/*
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;}
html{
  overflow-x:hidden;
  width:100%;
}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ecs-ink);
  background:var(--ecs-cream);
  line-height:1.55;
  overflow-x:hidden;
  width:100%;
  position:relative;
}
/* Defensive net: nothing on the page should ever be allowed to force
   horizontal scroll/zoom-out on mobile, whatever plugin injects it. */
img, video, iframe, table, pre{max-width:100%;}
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-img{height:44px; width:auto; max-width:210px; display:block; object-fit:contain;}
.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); position:relative;}
.ecs-navbar .wrap{display:flex; align-items:center; gap:6px; overflow-x:auto; padding:0; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.ecs-navbar .wrap::-webkit-scrollbar{display:none;}
.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-nav-icon-img{width:18px; height:18px; border-radius:50%; object-fit:cover; flex-shrink:0; background:#fff;}
.ecs-nav-icon-emoji{display:inline-flex; line-height:1;}
.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;}

.ecs-search-toggle{display:none; background:none; border:none; color:#e6efe9; font-size:17px; cursor:pointer; padding:6px;}

/* ---------- Hero (full-bleed banner images + single CTA per slide) ---------- */
.ecs-hero{position:relative; overflow:hidden !important; width:100%; height:clamp(260px, 32vw, 440px); isolation:isolate; background:linear-gradient(150deg, var(--ecs-dark) 0%, var(--ecs-green) 100%);}
.ecs-hero-slide{position:absolute; inset:0; transition:transform .9s ease; z-index:1;}
.ecs-hero-slide[data-dir="rtl"]{transform:translateX(100%);}
.ecs-hero-slide[data-dir="ltr"]{transform:translateX(-100%);}
.ecs-hero-slide.active{transform:translateX(0); z-index:2;}
.ecs-hero-img{width:100%; height:100%; object-fit:cover; display:block;}
.ecs-hero-cta{position:absolute; left:5%; bottom:8%; z-index:3;}
.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(255,255,255,0.5); border:none; cursor:pointer; padding:0;}
.ecs-slider-dots .dot.active{background:var(--ecs-orange); width:22px; border-radius:5px;}
.ecs-slider-arrow{
  width:36px;height:36px;border-radius:50%; border:1px solid rgba(255,255,255,0.4); background:rgba(0,0,0,0.3);
  color:#fff; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.ecs-slider-arrow:hover{background:rgba(0,0,0,0.5);}
.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;
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.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; width:100%; min-width:0;}
.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;}

/* ---------- Category promo tile (mixed into the Hot Deals grid) ---------- */
.ecs-cat-promo-tile{
	position:relative; border-radius:10px; overflow:hidden; background:var(--ecs-dark);
	display:flex; align-items:flex-end; min-height:100%;
}
.ecs-cat-promo-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.55;}
.ecs-cat-promo-overlay{
	position:relative; z-index:1; padding:18px; display:flex; flex-direction:column; gap:6px; width:100%;
	background:linear-gradient(0deg, rgba(11,61,38,0.9) 0%, rgba(11,61,38,0.1) 90%);
}
.ecs-cat-promo-icon{font-size:22px;}
.ecs-cat-promo-overlay b{color:#fff; font-family:'Space Grotesk'; font-size:15px;}
.ecs-cat-promo-link{color:var(--ecs-mint); font-size:12px; font-weight:600;}

/* ---------- Promo tiles (large tile + 2 stacked, after Shop by Category) ---------- */
.ecs-promo-tiles{
	display:grid;
	grid-template-columns:1.5fr 1fr;
	grid-template-rows:1fr 1fr;
	gap:16px;
	min-height:290px;
}
.ecs-promo-tile{
	position:relative; border-radius:12px; overflow:hidden; background-size:cover; background-position:center;
	padding:24px; display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
	transition:transform .2s ease; color:#fff;
}
.ecs-promo-tile:hover{transform:translateY(-2px);}
.ecs-promo-tile-1{grid-column:1; grid-row:1 / span 2;}
.ecs-promo-tile-2{grid-column:2; grid-row:1;}
.ecs-promo-tile-3{grid-column:2; grid-row:2;}
.ecs-promo-tile-eyebrow{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,0.75); font-weight:600;}
.ecs-promo-tile-heading{font-family:'Space Grotesk'; font-weight:700; font-size:20px; line-height:1.25;}
.ecs-promo-tile-1 .ecs-promo-tile-heading{font-size:26px; max-width:80%;}
.ecs-promo-tile-link{font-size:13px; font-weight:600; color:var(--ecs-mint);}

/* ---------- Promo banner (after Hot Deals) ---------- */
.ecs-promo-banner{
	position:relative; isolation:isolate; z-index:0;
	background-size:cover; background-position:center; padding:80px 0;
}
.ecs-promo-banner-inner{max-width:640px; text-align:left;}
.ecs-promo-banner-inner h2{color:#fff; font-size:clamp(26px,3.4vw,36px); margin-bottom:14px;}
.ecs-promo-banner-inner p{color:#dcece2; font-size:15px; margin:0 0 24px;}

/* ---------- 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 !important; grid-template-columns:repeat(4,1fr); gap:18px;
	list-style:none; margin:0 0 20px; padding:0;
}
/* WooCommerce's own base stylesheet adds :before/:after clearfix pseudo-elements
   to this list (leftover from its old float-based grid). Under display:grid those
   become real, empty grid cells — which is what was eating the first slot in each
   row. Strip them out entirely so only actual products occupy grid cells. */
.woocommerce ul.products::before,
.woocommerce ul.products::after{
	content:none !important; display:none !important;
}
.woocommerce ul.products li.product.ecs-loop-item{
	width:auto !important; float:none !important; clear:none !important;
	background:none; border:none; padding:0; margin:0 !important; text-align:left; box-shadow:none;
	min-width:0;
}
.woocommerce ul.products li.product.ecs-loop-item a{text-decoration: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) !important;}
}

@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;}
  .ecs-section{padding:48px 0;}
}

/* Tablet/mobile: stack the top bar into two rows (logo+icons, then full-width search)
   and switch search to a slide-down panel triggered by a compact icon button. */
@media (max-width:760px){
  .ecs-topbar{padding:12px 0;}
  .ecs-topbar .wrap{flex-wrap:wrap; gap:12px 14px;}
  .ecs-brand{order:1;}
  .ecs-top-actions{order:2; margin-left:auto; gap:14px;}
  .ecs-search-toggle{display:inline-flex; align-items:center;}
  .ecs-search{order:3; flex-basis:100%; max-width:none; max-height:0; overflow:hidden; opacity:0; transition:max-height .25s ease, opacity .2s ease; margin:0;}
  .ecs-search.ecs-search-open{max-height:60px; opacity:1;}
  .ecs-search form{padding:10px 16px;}
  .ecs-logo-img{height:36px !important; max-width:170px !important;}
  .ecs-cart-btn{padding:8px 12px;}
  .ecs-navbar a{padding:11px 13px; font-size:13px;}
}

@media (max-width:640px){
  .wrap{padding:0 18px;}
  .ecs-product-grid, .ecs-cat-grid{grid-template-columns:repeat(2,1fr); gap:12px;}
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr) !important; gap:12px !important;}
  .ecs-footer-grid{grid-template-columns:1fr; gap:32px;}
  .ecs-section{padding:40px 0;}
  .ecs-section-head{margin-bottom:22px;}
  .ecs-section-head h2{font-size:22px;}

  /* Hero: letterbox instead of cropping, so the baked-in headline text in
     each banner image stays fully visible on narrow screens instead of
     being cut off by a portrait crop. */
  .ecs-hero{width:100%; height:clamp(220px, 60vw, 340px);}
  .ecs-promo-tiles{grid-template-columns:1fr; grid-template-rows:none; min-height:0;}
  .ecs-promo-tile-1, .ecs-promo-tile-2, .ecs-promo-tile-3{grid-column:1; grid-row:auto; min-height:170px;}
  .ecs-promo-tile-1 .ecs-promo-tile-heading{max-width:100%;}
  .ecs-hero-img{object-fit:contain; background:linear-gradient(150deg, var(--ecs-dark) 0%, var(--ecs-green) 100%);}
  .ecs-hero-cta{left:50%; bottom:6%; transform:translateX(-50%); width:92%; text-align:center;}
  .ecs-hero-cta .ecs-btn{width:100%; justify-content:center; padding:13px 18px; font-size:13.5px;}
  .ecs-slider-controls{right:14px; bottom:12px;}
  .ecs-slider-arrow{width:32px; height:32px; font-size:14px;}

  .ecs-promo-banner{padding:52px 0;}
  .ecs-promo-banner-inner{max-width:100%;}
  .ecs-promo-banner-inner .ecs-btn{width:100%; justify-content:center;}

  /* Touch-friendly tap targets */
  .ecs-add-btn{padding:12px 10px; font-size:13px;}
  .ecs-view-btn{padding:12px 14px; font-size:13px;}
  .ecs-navbar a{padding:12px 14px;}
  .woocommerce a.button, .woocommerce button.button{padding:12px 18px !important;}

  .ecs-product-title{font-size:13px;}
  .ecs-product-body{padding:12px;}
}

@media (max-width:420px){
  .wrap{padding:0 14px;}
  .ecs-hero h1{font-size:26px;}
  .ecs-stats{gap:18px;}
  .ecs-footer-bottom{flex-direction:column; gap:6px; text-align:center;}
}

/* Larger, easier-to-tap controls on touch devices regardless of screen size */
@media (hover:none) and (pointer:coarse){
  .ecs-add-btn, .ecs-view-btn, .woocommerce a.button, .woocommerce button.button{min-height:42px;}
  .ecs-navbar a, .ecs-top-actions a{min-height:44px;}
  .ecs-wish{width:34px; height:34px;}
}