/*
Theme Name: ECS Store
Theme URI: https://matymatix.com.ng
Author: Omaros Consults
Description: Custom WooCommerce theme for Everything Complete Solutions Limited — electronics & appliances store. Matches the approved ECS brand design (green identity, hero banner, category grid, featured deals).
Version: 1.0.0
Text Domain: ecs-store
Requires PHPs: 7.4
Requires at least: 6.0
Tested up to: 6.6
Requires Plugins: woocommerce
*/

:root{
  --ecs-dark:#0B3D26;
  --ecs-green:#12603C;
  --ecs-green-mid:#1E7A4E;
  --ecs-mint:#E7F5EC;
  --ecs-mint-deep:#BFE6CC;
  --ecs-cream:#F5FBF6;
  --ecs-orange:#F0821E;
  --ecs-red:#D6293E;
  --ecs-ink:#12201A;
  --ecs-line:rgba(18,32,26,0.12);
  --ecs-white:#FFFFFF;
  --max:1280px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ecs-ink);
  background:var(--ecs-cream);
  line-height:1.55;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; font-weight:700; margin:0; line-height:1.1;}

/* ---------- Header ---------- */
.ecs-topbar{background:var(--ecs-dark); color:#fff; padding:14px 0;}
.ecs-topbar .wrap{display:flex; align-items:center; gap:26px;}
.ecs-brand{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.ecs-logo-chip{background:#fff; border-radius:8px; padding:6px 10px; display:flex; align-items:center;}
.ecs-logo-chip img{height:40px; width:auto; display:block;}
.ecs-search{flex:1; max-width:640px;}
.ecs-search form{display:flex; align-items:center; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); border-radius:24px; padding:9px 18px; gap:10px;}
.ecs-search input{flex:1; background:none; border:none; outline:none; color:#fff; font-size:13.5px;}
.ecs-search input::placeholder{color:#9fb8a8;}
.ecs-top-actions{display:flex; align-items:center; gap:20px; margin-left:auto; font-size:13px; white-space:nowrap;}
.ecs-top-actions a{display:flex; align-items:center; gap:6px; color:#e6efe9;}
.ecs-cart-btn{background:var(--ecs-green-mid); padding:9px 16px; border-radius:20px; color:#fff !important; position:relative;}
.ecs-cart-count{position:absolute; top:-6px; right:-6px; background:var(--ecs-orange); color:#fff; font-size:10px; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center;}

.ecs-navbar{background:#0E4A2E; border-top:1px solid rgba(255,255,255,0.08);}
.ecs-navbar .wrap{display:flex; align-items:center; gap:6px; overflow-x:auto; padding:0;}
.ecs-navbar a{color:#dcece2; font-size:13.5px; font-weight:500; padding:13px 16px; display:flex; align-items:center; gap:6px; white-space:nowrap; border-bottom:2px solid transparent;}
.ecs-navbar a:hover, .ecs-navbar a.active{color:#fff; border-color:var(--ecs-orange);}
.ecs-navbar a.ecs-admin-link{margin-left:auto; color:#a9c9b3;}

/* ---------- Hero (multi-slide) ---------- */
.ecs-hero{position:relative; overflow:hidden; min-height:520px;}
.ecs-hero-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .6s ease;
  background:linear-gradient(150deg, #DCF3E2 0%, #A9DAB8 100%);
  display:flex; align-items:center; padding:56px 0;
}
.ecs-hero-slide.active{opacity:1; visibility:visible; z-index:2;}
.ecs-hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center; width:100%;}
.ecs-slider-controls{position:absolute; bottom:20px; right:28px; z-index:5; display:flex; gap:10px; align-items:center;}
.ecs-slider-dots{display:flex; gap:8px;}
.ecs-slider-dots .dot{width:9px;height:9px;border-radius:50%; background:rgba(11,61,38,0.25); border:none; cursor:pointer; padding:0;}
.ecs-slider-dots .dot.active{background:var(--ecs-dark); width:22px; border-radius:5px;}
.ecs-slider-arrow{
  width:36px;height:36px;border-radius:50%; border:1px solid rgba(11,61,38,0.2); background:rgba(255,255,255,0.7);
  color:var(--ecs-dark); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.ecs-slider-arrow:hover{background:#fff;}
.ecs-badge-pill{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.6); border:1px solid rgba(11,61,38,0.15); padding:7px 16px; border-radius:20px; font-size:12.5px; font-weight:600; color:var(--ecs-dark); margin-bottom:20px;}
.ecs-badge-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--ecs-orange);}
.ecs-hero h1{font-size:clamp(34px,4.6vw,52px); margin-bottom:16px;}
.ecs-hero h1 .accent{color:var(--ecs-green);}
.ecs-hero p.lead{font-size:15.5px; color:#2d4237; max-width:440px; margin-bottom:26px;}
.ecs-hero-actions{display:flex; gap:14px; margin-bottom:34px;}
.ecs-btn{background:var(--ecs-dark); color:#fff; font-weight:600; font-size:14px; padding:13px 26px; border-radius:6px; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;}
.ecs-btn:hover{background:var(--ecs-green);}
.ecs-btn-outline{background:#fff; color:var(--ecs-dark); font-weight:600; font-size:14px; padding:13px 26px; border-radius:6px; border:1px solid rgba(11,61,38,0.2);}
.ecs-stats{display:flex; gap:30px;}
.ecs-stats .stat b{display:block; font-family:'Space Grotesk'; font-size:20px;}
.ecs-stats .stat span{font-size:11px; color:#3d5548; text-transform:uppercase; letter-spacing:.05em;}
.ecs-hero-cards{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.ecs-hero-card{background:rgba(255,255,255,0.85); border-radius:10px; padding:20px; display:flex; flex-direction:column; gap:10px;}
.ecs-hero-card .ic{font-size:22px;}
.ecs-hero-card b{font-family:'Space Grotesk'; font-size:14.5px;}
.ecs-hero-card span{font-size:11.5px; color:#557064;}

.ecs-trustbar{background:var(--ecs-dark); padding:18px 0;}
.ecs-trustbar .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;}
.ecs-trust-item{display:flex; align-items:center; gap:10px; color:#dcece2; font-size:12.5px;}
.ecs-trust-item .ic{font-size:18px;}
.ecs-trust-item b{display:block; color:#fff; font-size:13px;}

/* ---------- Sections ---------- */
.ecs-section{padding:70px 0;}
.ecs-section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:34px; flex-wrap:wrap; gap:14px;}
.ecs-section-head h2{font-size:26px;}
.ecs-section-head h2 .accent{color:var(--ecs-green);}
.ecs-section-head p{color:#5b6b60; font-size:13.5px; margin:6px 0 0;}
.ecs-view-all{border:1px solid var(--ecs-line); padding:9px 18px; border-radius:20px; font-size:12.5px; font-weight:600;}

.ecs-cat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
.ecs-cat-card{background:#fff; border:1px solid var(--ecs-line); border-radius:10px; padding:22px 16px; text-align:center; transition:transform .15s ease, box-shadow .15s ease;}
.ecs-cat-card:hover{transform:translateY(-3px); box-shadow:0 12px 24px -12px rgba(11,61,38,0.25); border-color:var(--ecs-green-mid);}
.ecs-cat-card .ic{font-size:30px; margin-bottom:10px;}
.ecs-cat-img{width:56px; height:56px; border-radius:50%; overflow:hidden; margin:0 auto 12px; background:var(--ecs-mint);}
.ecs-cat-img img{width:100%; height:100%; object-fit:cover;}
.ecs-cat-card b{display:block; font-family:'Space Grotesk'; font-size:14px;}
.ecs-cat-card span{font-size:11.5px; color:#7d8c82;}

/* ---------- Product grid / cards ---------- */
.ecs-product-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
.ecs-product-card{background:#fff; border:1px solid var(--ecs-line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; position:relative;}
.ecs-badge{position:absolute; top:12px; left:12px; z-index:2; font-size:11px; font-weight:700; padding:4px 9px; border-radius:4px; color:#fff;}
.ecs-badge.sale{background:var(--ecs-orange);}
.ecs-badge.new{background:var(--ecs-green-mid);}
.ecs-wish{position:absolute; top:10px; right:10px; z-index:2; width:30px;height:30px;border-radius:50%; background:#fff; border:1px solid var(--ecs-line); display:flex; align-items:center; justify-content:center; font-size:13px;}
.ecs-product-thumb{aspect-ratio:1/0.9; background:var(--ecs-mint); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.ecs-product-thumb img{width:100%;height:100%;object-fit:cover;}
.ecs-product-body{padding:16px; display:flex; flex-direction:column; gap:6px; flex:1;}
.ecs-product-cat{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:#8a988f; font-weight:600;}
.ecs-product-title{font-size:14px; font-weight:600; line-height:1.3;}
.ecs-product-rating{font-size:11.5px; color:#c98a1a;}
.ecs-product-rating .count{color:#8a988f;}
.ecs-product-price{font-family:'Space Grotesk'; font-weight:700; font-size:15px; margin-top:2px;}
.ecs-product-price del{font-weight:400; color:#9aa6a0; font-size:12.5px; margin-left:6px;}
.ecs-product-actions{display:flex; gap:8px; margin-top:auto; padding-top:8px;}
.ecs-add-btn{flex:1; background:var(--ecs-green); color:#fff; border:none; border-radius:5px; padding:10px; font-size:12.5px; font-weight:600; cursor:pointer; text-align:center;}
.ecs-add-btn:hover{background:var(--ecs-dark);}
.ecs-view-btn{border:1px solid var(--ecs-line); border-radius:5px; padding:10px 14px; font-size:12.5px; font-weight:600;}

.ecs-empty-note{background:#fff; border:1px dashed var(--ecs-mint-deep); border-radius:8px; padding:28px; text-align:center; color:#5b6b60; font-size:13.5px;}

/* ---------- Footer ---------- */
.ecs-footer{background:var(--ecs-ink); color:#a9b8b0; padding:60px 0 24px;}
.ecs-footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.08);}
.ecs-footer h4{color:#fff; font-size:14px; margin-bottom:16px;}
.ecs-footer p{font-size:13px; line-height:1.7;}
.ecs-footer ul li{margin-bottom:9px; font-size:13px;}
.ecs-footer ul li a:hover{color:#fff;}
.ecs-footer-bottom{padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px;}

/* ---------- WooCommerce generic overrides ----------
   content-product.php is overridden (see /woocommerce/content-product.php)
   to render our ecs-product-card markup inside WooCommerce's <li>, so the
   Shop page, category pages, and search results all use the exact same
   card design as the homepage Featured Deals. */
.woocommerce ul.products{
	display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
	list-style:none; margin:0 0 20px; padding:0;
}
.woocommerce ul.products li.product.ecs-loop-item{
	background:none; border:none; padding:0; margin:0; text-align:left; box-shadow:none;
}
.woocommerce nav.woocommerce-pagination ul li a{border-radius:4px;}
.woocommerce-page .content-area{max-width:var(--max); margin:40px auto; padding:0 28px;}
.woocommerce-breadcrumb{font-family:'IBM Plex Mono'; font-size:12px; color:#7d8c82; margin-bottom:14px;}
.woocommerce-breadcrumb a{color:#7d8c82;}
.woocommerce-result-count, .woocommerce-ordering{font-size:13px; color:#5b6b60;}
.woocommerce-ordering select{border:1px solid var(--ecs-line); border-radius:5px; padding:8px 12px; font-family:'Inter';}

/* Single product page + cart/checkout: keep WooCommerce's default layout, apply our colors */
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit, .woocommerce a.button.alt{
	background:var(--ecs-green) !important; color:#fff !important; border-radius:5px !important; font-weight:600 !important; border:none !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover{background:var(--ecs-dark) !important;}
.woocommerce span.onsale{background:var(--ecs-orange) !important; border-radius:4px !important; font-family:'IBM Plex Mono';}
.woocommerce div.product p.price, .woocommerce div.product span.price{color:var(--ecs-ink); font-family:'Space Grotesk';}
.woocommerce table.cart td.actions .button, .woocommerce-cart table.cart td.actions .coupon .button{background:var(--ecs-dark) !important;}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .ecs-product-grid{grid-template-columns:repeat(3,1fr);}
  .ecs-cat-grid{grid-template-columns:repeat(3,1fr);}
  .woocommerce ul.products{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:900px){
  .ecs-hero-grid{grid-template-columns:1fr;}
  .ecs-footer-grid{grid-template-columns:1fr 1fr;}
  .ecs-top-actions span.label{display:none;}
}
@media (max-width:640px){
  .ecs-product-grid, .ecs-cat-grid{grid-template-columns:repeat(2,1fr);}
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr);}
  .ecs-footer-grid{grid-template-columns:1fr;}
  .ecs-hero-cards{grid-template-columns:1fr 1fr;}
  .ecs-stats{flex-wrap:wrap; gap:18px;}
}