/*
Theme Name: Voltniq
Theme URI: https://voltniq.com
Author: Modern Trade LLC
Author URI: https://voltniq.com
Description: EV charging hardware storefront — Type 2 chargers, wallboxes and cables. Spec-sheet inspired design.
Version: 3.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: voltniq
Tags: e-commerce, woocommerce, electric-vehicle, modern, responsive, clean
WC requires at least: 7.0
WC tested up to: 8.5
*/

:root{
  --paper:#F1F3F6;
  --paper-2:#E7EBEF;
  --ink:#0B1220;
  --ink-soft:#3A4152;
  --amber:#E8A33D;
  --amber-deep:#C97F1E;
  --teal:#146B66;
  --line:#C7CDD6;
  --white:#FFFFFF;
  --r-sm:4px;
  --r-md:8px;
}
*{box-sizing:border-box;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  margin:0;
}
h1,h2,h3,.display{
  font-family:'Space Grotesk',sans-serif;
  letter-spacing:-0.02em;
}
.mono{ font-family:'IBM Plex Mono',monospace; letter-spacing:0.02em; }
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:1180px;margin:0 auto;padding:0 32px;}
@media(max-width:640px){.container{padding:0 20px;}}

/* ---------- NAV ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(241,243,246,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-nav{ display:flex;align-items:center;justify-content:space-between;padding:18px 0; }
.logo{ font-family:'Space Grotesk',sans-serif; font-weight:700;font-size:20px; display:flex;align-items:center;gap:8px; }
.logo .bolt{ width:20px;height:20px;background:var(--amber); clip-path:polygon(60% 0,0 60%,45% 60%,40% 100%,100% 40%,55% 40%); flex-shrink:0; }
.nav-links{display:flex;gap:32px;font-size:14px;font-weight:500;list-style:none;margin:0;padding:0;}
.nav-links a{opacity:0.75;transition:opacity .2s;}
.nav-links a:hover{opacity:1;}
.nav-cta{ background:var(--ink);color:var(--white); padding:10px 20px;border-radius:var(--r-sm); font-size:14px;font-weight:600; transition:background .2s; }
.nav-cta:hover{background:var(--amber-deep);color:var(--white);}
@media(max-width:820px){.nav-links{display:none;}}

.nav-icons{ display:flex; align-items:center; gap:18px; }
.nav-icon-link{ position:relative; display:flex; align-items:center; justify-content:center; color:var(--ink); opacity:0.8; transition:opacity .15s; }
.nav-icon-link:hover{ opacity:1; }
.cart-count{
  position:absolute; top:-8px; right:-9px;
  min-width:16px; height:16px; padding:0 4px;
  background:var(--amber-deep); color:#fff;
  border-radius:100px; font-size:10px; font-weight:700;
  font-family:'IBM Plex Mono',monospace;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
@media(max-width:480px){ .nav-cta{display:none;} }

/* ---------- HERO ---------- */
.hero{ padding:72px 0 40px; position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; }
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;}}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'IBM Plex Mono',monospace; font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--teal); border:1px solid var(--teal); padding:5px 10px;border-radius:100px; margin-bottom:24px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);}
.hero h1{ font-size:clamp(38px,5.2vw,64px); font-weight:600; line-height:1.02; margin-bottom:20px; }
.hero h1 em{ font-style:normal;color:var(--amber-deep); }
.hero p.lead{ font-size:18px;color:var(--ink-soft); max-width:480px;margin-bottom:32px; }
.hero-actions{display:flex;gap:14px;margin-bottom:44px;flex-wrap:wrap;}
.btn{ display:inline-flex;align-items:center;gap:8px; padding:14px 26px;border-radius:var(--r-sm); font-weight:600;font-size:15px; transition:transform .15s ease, box-shadow .15s ease; border:none; cursor:pointer; }
.btn-primary{background:var(--ink);color:var(--white);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,18,32,0.25);color:var(--white);}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:transparent;}
.btn-ghost:hover{border-color:var(--ink);}
.btn-amber{background:var(--amber-deep);color:var(--white);}
.btn-amber:hover{transform:translateY(-2px);color:var(--white);}

.spec-strip{ display:flex; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--white); flex-wrap:wrap; }
.spec-item{ flex:1;min-width:110px; padding:16px 18px; border-right:1px solid var(--line); }
.spec-item:last-child{border-right:none;}
.spec-item .k{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em; display:block;margin-bottom:4px; }
.spec-item .v{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:18px; }

.hero-visual{ position:relative; border-radius:12px; aspect-ratio:1/1.05; display:flex;align-items:center;justify-content:center; overflow:hidden; background-size:cover;background-position:center; }
.hero-visual svg{width:78%;height:78%;}
.grid-overlay{ position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size:28px 28px; }
.flow-dash{ stroke-dasharray:6 8; animation:flow 1.6s linear infinite; }
@keyframes flow{to{stroke-dashoffset:-28;}}
@media (prefers-reduced-motion: reduce){ .flow-dash{animation:none;} }
.visual-tag{ position:absolute;bottom:20px;left:20px;right:20px; display:flex;justify-content:space-between;align-items:flex-end; }
.visual-tag .label{ font-family:'IBM Plex Mono',monospace;color:rgba(255,255,255,0.65); font-size:11px;text-transform:uppercase;letter-spacing:0.08em; }
.visual-tag .name{ color:var(--white);font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600; }

/* ---------- SECTIONS ---------- */
.section{padding:88px 0;}
.section-head{max-width:560px;margin-bottom:48px;}
.section-head h2{font-size:clamp(28px,3.4vw,40px);font-weight:600;margin-bottom:12px;}
.section-head p{color:var(--ink-soft);font-size:16px;}

/* ---------- CATEGORY CARDS ---------- */
.cat-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
@media(max-width:820px){.cat-grid{grid-template-columns:1fr;}}
.cat-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:border-color .2s, transform .2s; display:flex;flex-direction:column; }
.cat-card:hover{border-color:var(--amber-deep);transform:translateY(-3px);}
.cat-img{ aspect-ratio:16/10;background-size:cover;background-position:center;border-bottom:1px solid var(--line); }
.cat-body{padding:24px 28px 28px;display:flex;flex-direction:column;flex:1;}
.cat-card .idx{ font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--amber-deep);margin-bottom:14px; }
.cat-card h3{font-size:21px;font-weight:600;margin-bottom:8px;}
.cat-card p{color:var(--ink-soft);font-size:14.5px;margin-bottom:auto;padding-bottom:20px;}
.cat-card .go{ font-family:'IBM Plex Mono',monospace;font-size:13px; display:flex;align-items:center;gap:6px;font-weight:500; }

/* ---------- FEATURE ROWS ---------- */
.why{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.feature-rows{border-top:1px solid var(--line);}
.feature-row{ display:grid;grid-template-columns:220px 1fr;gap:32px; padding:26px 0;border-bottom:1px solid var(--line); align-items:baseline; }
@media(max-width:640px){.feature-row{grid-template-columns:1fr;gap:8px;}}
.feature-row .num{font-family:'IBM Plex Mono',monospace;color:var(--ink-soft);font-size:13px;}
.feature-row h4{font-size:18px;font-weight:600;margin-bottom:6px;}
.feature-row p{color:var(--ink-soft);font-size:15px;max-width:520px;}

/* ---------- PRODUCTS (WooCommerce loop) ---------- */
ul.products{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:24px; list-style:none; margin:0 !important; padding:0 !important; }
ul.products.columns-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){ ul.products{grid-template-columns:1fr !important;} }
ul.products li.product{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; list-style:none; width:100% !important; float:none !important; margin:0 !important; clear:none !important; }
.prod-img,ul.products li.product img{ aspect-ratio:4/3; object-fit:cover; width:100%; background:linear-gradient(135deg,var(--paper-2),var(--paper)); border-bottom:1px solid var(--line); margin:0; }
ul.products li.product .product-info,ul.products li.product .woocommerce-loop-product__title{padding:0 22px;}
ul.products li.product .product-info{padding:22px;}
.prod-cat{ font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;color:var(--teal);letter-spacing:0.06em; }
ul.products li.product h2,ul.products li.product h3{font-size:18px;font-weight:600;margin:8px 0 6px;font-family:'Space Grotesk',sans-serif;}
.product-short-desc{color:var(--ink-soft);font-size:14px;margin-bottom:18px;}
.product-footer{display:flex;flex-direction:column;gap:14px;padding-top:6px;}
.price,ul.products li.product .price{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:18px;color:var(--ink);}
.price del{color:var(--ink-soft);opacity:0.6;font-weight:400;margin-right:6px;}
.price ins{text-decoration:none;}
a.add_to_cart_button,a.button{
  display:block; width:100%; text-align:center; box-sizing:border-box;
  font-family:'Inter',sans-serif !important; font-size:14px !important; font-weight:600 !important;
  background:var(--ink) !important; color:var(--white) !important; border:none !important;
  padding:11px 16px !important; border-radius:var(--r-sm) !important;
  text-transform:none !important; letter-spacing:normal !important;
  transition:background .15s ease, transform .15s ease;
}
a.add_to_cart_button:hover,a.button:hover{
  background:var(--amber-deep) !important; color:var(--white) !important; transform:translateY(-1px);
}
a.added_to_cart{
  display:block; margin-top:8px; font-family:'IBM Plex Mono',monospace; font-size:12px;
  text-align:center; color:var(--teal); border-bottom:1px solid var(--teal);
}

/* ---------- CERT BAND ---------- */
.cert-band{ background:var(--ink);color:var(--white);padding:40px 0; }
.cert-inner{ display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px; }
.cert-list{display:flex;gap:36px;flex-wrap:wrap;}
.cert-item{display:flex;align-items:center;gap:10px;}
.cert-item .dot{width:8px;height:8px;background:var(--amber);border-radius:50%;}
.cert-item span{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:0.03em;}

/* ---------- SINGLE PRODUCT (two-column top, stacked gallery) ---------- */
.product-hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; padding:32px 0 64px; align-items:start; }
@media(max-width:900px){ .product-hero-grid{grid-template-columns:1fr; gap:32px;} }

.pd-gallery-main{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--white); aspect-ratio:1/1; }
.pd-gallery-main img{width:100%;height:100%;object-fit:cover;display:block;}
.pd-gallery-thumbs{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 0; }
.pd-thumb{ border:1px solid var(--line); border-radius:var(--r-sm); padding:0; background:var(--white); cursor:pointer; overflow:hidden; width:64px; height:64px; flex-shrink:0; transition:border-color .15s; }
.pd-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.pd-thumb.is-active,.pd-thumb:hover{ border-color:var(--amber-deep); }

.product-info-panel h1.product_title{ font-size:clamp(26px,3.2vw,36px); font-weight:600; margin:0 0 16px; line-height:1.15; }
.product-price{ font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:600; margin-bottom:18px; }
.product-price .woocommerce-Price-amount{ color:var(--ink); }
.product-price del .woocommerce-Price-amount{ color:var(--ink-soft); opacity:0.6; font-weight:400; }
.product-info-panel .woocommerce-product-details__short-description{ color:var(--ink-soft); font-size:16px; margin-bottom:26px; }
.product-info-panel .woocommerce-product-details__short-description p:last-child{margin-bottom:0;}

.product-cta{margin-bottom:32px;}
.product-cta form.cart{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.product-cta .quantity{ margin:0; }
.product-cta .quantity input.qty{
  width:64px; padding:14px 10px; border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:'IBM Plex Mono',monospace; font-size:15px; text-align:center; background:var(--white); color:var(--ink);
}
.product-cta .single_add_to_cart_button,
.product-cta button.single_add_to_cart_button{
  background:var(--ink) !important; color:var(--white) !important; border:none !important;
  padding:14px 28px !important; border-radius:var(--r-sm) !important; font-weight:600 !important; font-size:15px !important;
  font-family:'Inter',sans-serif !important; text-transform:none !important; letter-spacing:normal !important;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease; cursor:pointer;
}
.product-cta .single_add_to_cart_button:hover{
  background:var(--amber-deep) !important; transform:translateY(-2px); box-shadow:0 8px 20px rgba(11,18,32,0.2);
}

/* hide WooCommerce's default SKU/category/tag meta line — category is
   shown separately above the title as an eyebrow instead, tags are
   intentionally not shown to shoppers */
.product_meta{display:none;}

.page-content{padding:72px 0 96px;}
.page-content .container{max-width:820px;}
.page-content h1{font-size:clamp(30px,4vw,44px);margin-bottom:28px;}
.page-content h2{font-size:24px;margin:40px 0 14px;font-weight:600;}
.page-content h3,.page-content h4{font-size:18px;margin:28px 0 10px;font-weight:600;font-family:'Space Grotesk',sans-serif;}
.page-content p{color:var(--ink-soft);font-size:16px;margin-bottom:16px;line-height:1.65;}
.page-content ul,.page-content ol{color:var(--ink-soft);font-size:16px;padding-left:22px;margin-bottom:16px;line-height:1.65;}
.page-content table{width:100%;border-collapse:collapse;margin:20px 0 28px;font-size:15px;}
.page-content table th,.page-content table td{ text-align:left; padding:10px 14px; border:1px solid var(--line); }
.page-content table th{ font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.05em; background:var(--paper-2); color:var(--ink-soft); }
.page-content table td{background:var(--white);}
.page-content strong{color:var(--ink);}

/* ---------- FOOTER ---------- */
.site-footer{padding:64px 0 32px;background:var(--paper);}
.footer-top{ display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px; }
@media(max-width:760px){.footer-top{grid-template-columns:1fr 1fr;}}
.footer-top h5{font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:0.07em;color:var(--ink-soft);margin-bottom:16px;}
.footer-top a{display:block;font-size:14.5px;margin-bottom:10px;color:var(--ink-soft);}
.footer-top a:hover{color:var(--ink);}
.footer-brand p{color:var(--ink-soft);font-size:14px;margin-top:12px;max-width:280px;}
.footer-bottom{ border-top:1px solid var(--line);padding-top:24px; display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px; font-size:13px;color:var(--ink-soft); }

/* ---------- WooCommerce misc resets ---------- */
.woocommerce-breadcrumb{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);margin-bottom:24px;}
.woocommerce-breadcrumb a{color:var(--ink-soft);border-bottom:1px solid var(--line);}

/* ---------- SHOP / ARCHIVE PAGE ---------- */
.shop-hero{
  padding:64px 0 40px; margin-bottom:8px;
  background-size:cover; background-position:center;
}
.shop-hero h1{ color:#fff; font-size:clamp(30px,4vw,46px); font-weight:600; margin:0 0 12px; }
.shop-hero p{ color:rgba(255,255,255,0.75); font-size:16px; max-width:520px; margin-bottom:24px; }
.shop-page{padding:40px 0 96px;}
.shop-header{margin-bottom:24px;}
.shop-header h1{font-size:clamp(28px,3.4vw,40px);font-weight:600;margin:0 0 20px;}
.shop-cat-pills{display:flex;gap:10px;flex-wrap:wrap;}
.shop-pill{
  font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:0.02em;
  padding:8px 16px;border:1px solid var(--line);border-radius:100px;
  color:var(--ink-soft);background:var(--white);transition:all .15s;
}
.shop-pill:hover{border-color:var(--ink);color:var(--ink);}
.shop-pill.is-active{background:var(--ink);border-color:var(--ink);color:var(--white);}
.shop-hero .shop-pill{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.3); color:#fff; }
.shop-hero .shop-pill:hover{ border-color:#fff; }
.shop-hero .shop-pill.is-active{ background:var(--amber-deep); border-color:var(--amber-deep); color:#fff; }

.shop-toolbar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding:16px 0;margin-bottom:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.woocommerce-result-count{font-size:14px;color:var(--ink-soft);margin:0;}
.woocommerce-ordering{margin:0;}
.woocommerce-ordering select.orderby{
  font-family:'IBM Plex Mono',monospace;font-size:13px;
  padding:9px 34px 9px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%233A4152'/%3E%3C/svg%3E") no-repeat right 14px center;
  appearance:none;-webkit-appearance:none;color:var(--ink);cursor:pointer;
}

/* balance the grid instead of leaving it looking sparse when a category
   only has one or two products */
ul.products.is-single{ grid-template-columns:minmax(260px,380px) !important; justify-content:center; }
ul.products.is-pair{ grid-template-columns:repeat(2,minmax(260px,380px)) !important; justify-content:center; max-width:800px; margin-left:auto !important; margin-right:auto !important; }

.shop-empty{text-align:center;padding:80px 0;color:var(--ink-soft);}
.shop-empty p{margin-bottom:20px;font-size:16px;}

/* ---------- BLOG GRID ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:8px; }
@media(max-width:900px){ .blog-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:640px){ .blog-grid{grid-template-columns:1fr;} }
.blog-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:border-color .2s, transform .2s; }
.blog-card:hover{ border-color:var(--amber-deep); transform:translateY(-3px); }
.blog-card-img{ display:block; aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--line); background:linear-gradient(135deg,var(--paper-2),var(--paper)); }
.blog-card-img img{ width:100%; height:100%; object-fit:cover; }
.blog-card-img-placeholder{ width:100%; height:100%; background:linear-gradient(135deg,var(--paper-2),var(--paper)); }
.blog-card-body{ padding:22px; }
.blog-card-date{ font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--teal); }
.blog-card-title{ font-size:19px; font-weight:600; margin:10px 0 10px; line-height:1.3; }
.blog-card-title a{ color:var(--ink); }
.blog-card-excerpt{ color:var(--ink-soft); font-size:14.5px; margin-bottom:16px; line-height:1.55; }
.blog-card-link{ font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:500; color:var(--ink); border-bottom:1px solid var(--ink); }

.shop-pagination{margin-top:48px;}
.woocommerce-pagination ul.page-numbers{
  display:flex;justify-content:center;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap;
}
.woocommerce-pagination .page-numbers li{list-style:none;}
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span{
  display:flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 10px;
  font-family:'IBM Plex Mono',monospace;font-size:13px;
  border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink-soft);
}
.woocommerce-pagination .page-numbers a:hover{border-color:var(--ink);color:var(--ink);}
.woocommerce-pagination .page-numbers .current{background:var(--ink);border-color:var(--ink);color:var(--white);}