/*
Theme Name: Essential Image Apparel v2
Author: clothings.ai
Description: S&S-inspired wholesale catalog layout for clothings.ai
Version: 2.0.0
Requires PHP: 8.1
Text Domain: ei-apparel
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap');
:root{--ink:#21333e;--green:#7ac042;--green-dark:#487323;--black:#12151b;--muted:#6b767e;--line:#e3e6e8;--soft:#f3f4f5;--panel:#f7f8f9;--max:1280px;--radius:999px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:#fff;color:var(--ink);font:14px/1.5 Montserrat,Arial,sans-serif}
a{color:inherit;text-decoration:none}a:hover{color:var(--green-dark)}img{max-width:100%;height:auto;display:block}
button,input,select{font:inherit}button{cursor:pointer}
.screen-reader-text,.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:8px;top:8px;z-index:10000;background:var(--green);padding:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

/* Utility */
.utility-bar{background:var(--black);color:#cfd3d6;font-size:12px}
.utility-bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:32px}
.utility-bar a{color:#eef0f2}.utility-bar a:hover{color:var(--green)}
.utility-left,.utility-right{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.wa-link{color:#b7e08a!important;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.wa-link svg{width:14px;height:14px;fill:currentColor}

/* Header — white, logo | search pill | icons */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:900}
.header-main{display:grid;grid-template-columns:200px 1fr auto;align-items:center;gap:20px;padding:14px 0}
.brand-block{display:flex;align-items:center;min-width:0}
.site-logo{height:44px;width:auto}
.search-shell{position:relative;width:100%;max-width:560px;margin:0 auto}
.search-shell form{display:flex;align-items:center;background:var(--soft);border-radius:var(--radius);padding:4px 4px 4px 18px;border:1px solid transparent}
.search-shell form:focus-within{border-color:#cfe6b5;background:#fff;box-shadow:0 0 0 3px rgba(122,192,66,.15)}
.search-shell input[type=search]{flex:1;border:0;background:transparent;padding:10px 8px;outline:none;font-size:14px;min-width:0}
.search-shell button{width:40px;height:40px;border:0;border-radius:50%;background:var(--green);color:#17230e;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.search-shell button:hover{background:#96cf65}
.search-shell button svg{width:18px;height:18px}
.header-actions{display:flex;align-items:center;gap:4px}
.icon-btn{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);position:relative}
.icon-btn:hover{background:var(--soft);color:var(--ink)}
.icon-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7}
.icon-btn .cart-count{position:absolute;top:4px;right:2px;background:var(--green);color:#17230e;border-radius:999px;min-width:16px;height:16px;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.icon-btn.wa{color:#25D366}
.icon-btn.wa svg{fill:currentColor;stroke:none}
.menu-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 10px;font-weight:700}
.wa-label{display:none}

/* Suggest */
.search-suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(18,21,27,.12);display:none;max-height:420px;overflow:auto;z-index:960}
.search-suggest.open{display:block}
.search-suggest h4{margin:0;padding:10px 14px 4px;font-size:11px;letter-spacing:1px;color:var(--muted);text-transform:uppercase}
.search-suggest a{display:flex;gap:10px;align-items:center;padding:8px 14px}
.search-suggest a:hover{background:var(--panel)}
.search-suggest img{width:36px;height:44px;object-fit:contain;background:var(--soft);border-radius:4px}
.search-suggest .meta{font-size:12px;color:var(--muted)}
.search-suggest .empty{padding:14px;color:var(--muted)}

/* Grey nav bar */
.cat-nav{background:var(--soft);border-bottom:1px solid var(--line)}
.cat-nav-inner{display:flex;align-items:stretch;gap:2px;overflow-x:auto}
.cat-item{position:relative}
.cat-item>a,.cat-item>button{display:block;padding:12px 16px;font-weight:700;font-size:14px;color:var(--black);background:transparent;border:0;white-space:nowrap}
.cat-item>a:hover,.cat-item:focus-within>a,.cat-item>button:hover{color:var(--green-dark)}
.mega{display:none;position:absolute;left:0;top:100%;min-width:260px;background:#fff;border:1px solid var(--line);box-shadow:0 16px 40px rgba(0,0,0,.1);padding:16px;z-index:950;border-radius:0 0 8px 8px}
.cat-item:hover .mega,.cat-item:focus-within .mega{display:block}
.mega.wide{min-width:520px}
.mega.brands{min-width:640px;display:none;grid-template-columns:repeat(3,1fr);gap:4px 18px}
.cat-item:hover .mega.brands,.cat-item:focus-within .mega.brands{display:grid}
.mega a{display:block;padding:6px 0;font-size:13px;font-weight:500}
.mega strong{display:block;margin-bottom:8px;font-size:11px;letter-spacing:1px;color:var(--muted);text-transform:uppercase}

/* Breadcrumbs + archive header */
.breadcrumbs{padding:14px 0 0;font-size:13px;color:var(--muted)}
.breadcrumbs a{color:var(--muted)}.breadcrumbs a:hover{color:var(--green-dark)}
.archive-hero{text-align:center;padding:28px 0 10px}
.archive-hero h1{margin:0;font:700 34px/1.15 Poppins,sans-serif;color:var(--black)}
.archive-hero .count{margin:8px 0 0;color:var(--muted);font-size:14px}

/* Shop layout */
.shop-layout{display:grid;grid-template-columns:230px 1fr;gap:28px;padding:18px 0 56px;max-width:var(--max);margin:0 auto}
.shop-filters{background:#fff}
.shop-filters>h3{margin:0 0 8px;font-size:16px;font-weight:700}
.filter-block{border-top:1px solid var(--line)}
.filter-block summary{padding:12px 0;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.filter-block summary::-webkit-details-marker{display:none}
.filter-block summary:after{content:"+";color:var(--muted);font-weight:500}
.filter-block[open] summary:after{content:"–"}
.filter-block ul{list-style:none;margin:0 0 12px;padding:0;max-height:200px;overflow:auto}
.filter-block li{margin:0 0 8px;font-size:13px}
.filter-block a.active{font-weight:700;color:var(--green-dark)}
.filter-block label{display:flex;gap:8px;align-items:center;cursor:pointer}

.refine-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.refine-pills{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.refine-pills .label{font-weight:600;font-size:13px;margin-right:4px}
.pill{appearance:none;border:1px solid #cfd4d8;background:#fff;border-radius:var(--radius);padding:8px 14px;font-size:13px;font-weight:600;color:var(--ink)}
.pill:hover{border-color:var(--green)}
.sort-wrap{display:flex;align-items:center;gap:8px;font-size:13px}
.sort-wrap select{border:0;background:transparent;font-weight:700;color:var(--ink)}
.filter-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px;min-height:28px}
.filter-chips .chip{display:inline-flex;align-items:center;gap:6px;background:var(--soft);border-radius:var(--radius);padding:6px 10px;font-size:12px;font-weight:600}
.filter-chips .chip a{font-weight:700;color:var(--muted)}
.filter-chips .clear{color:var(--green-dark);font-weight:700;font-size:13px}

/* Product grid — 5 col dense cards */
.woocommerce ul.products{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 14px!important;padding:0!important;margin:0!important}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none!important}
.woocommerce ul.products li.product{width:auto!important;float:none!important;margin:0!important;list-style:none;background:transparent;border:0;padding:0}
.woocommerce ul.products li.product a img,.ei-card-img{height:200px;width:100%;object-fit:contain;background:var(--soft);margin:0 0 10px;border-radius:2px}
.ei-card-style{font:700 15px/1.2 Poppins,sans-serif;margin:0 0 4px;color:var(--black)}
.ei-card-price{font-weight:700;margin:0 0 4px;color:var(--black)}
.ei-card-brand{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin:0 0 2px}
.ei-card-name{font-size:13px;line-height:1.35;color:var(--ink);margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ei-swatches{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px;min-height:14px}
.ei-swatch-sq{width:12px;height:12px;border-radius:2px;border:1px solid rgba(0,0,0,.12);display:inline-block}
.ei-card-sizes{font-size:12px;color:var(--muted)}
.woocommerce ul.products li.product .button,.woocommerce ul.products li.product .price{display:none}

/* Home */
.hero{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.1fr);min-height:400px;background-color:var(--black);background-image:var(--hero-webp),var(--hero-jpg);background-size:cover;background-position:right center;color:#fff}
.hero-copy{padding:56px 7%;max-width:560px;background:linear-gradient(90deg,rgba(18,21,27,.92),rgba(18,21,27,.4) 75%,transparent)}
.eyebrow{display:block;font-size:10px;font-weight:700;letter-spacing:2px;color:#a6d77f}
.hero h1{margin:16px 0;font:800 44px/1.05 Poppins,sans-serif}
.hero h1 span{box-shadow:inset 0 -.32em #35521f}
.hero p{color:#c5c8d0;max-width:380px}
.cta,.button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{background:var(--green)!important;color:#17230e!important;border:0;border-radius:0!important;font-weight:700!important;padding:12px 18px!important;display:inline-block}
.cta{margin-top:16px}.cta:hover,.button:hover{background:#96cf65!important}
.section{padding:44px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:18px}
.section-head h2{margin:6px 0 0;font:700 26px/1.15 Poppins,sans-serif}
.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tile{background:#f1f6ea;border:1px solid #dde8d4;padding:20px;font-weight:700;min-height:100px}
.tile small{display:block;margin-top:8px;font-weight:500;color:var(--muted)}
.tile:hover{border-color:var(--green)}
.brand-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.brand-chip{border:1px solid var(--line);padding:12px 8px;text-align:center;font-weight:600;font-size:12px;min-height:56px;display:flex;align-items:center;justify-content:center;background:#fff}
.brand-chip:hover{border-color:var(--green);background:#f1f6ea}
.benefits{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-left:0;border-right:0}
.benefits div{padding:16px 10px;text-align:center;border-right:1px solid var(--line)}
.benefits strong{display:block;font-family:Poppins,sans-serif;font-size:13px}

/* Single */
.ei-single{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;padding:24px 0 56px;max-width:var(--max);margin:0 auto}
.ei-single .woocommerce-product-gallery img{background:var(--soft)}
.ei-single .summary{margin:0!important;width:auto!important;float:none!important}
.ei-single .product_title{font:700 28px/1.2 Poppins,sans-serif;margin:0 0 8px}
.stock-table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px}
.stock-table th,.stock-table td{border:1px solid var(--line);padding:8px;text-align:left}
.stock-table th{background:var(--soft)}

/* Footer */
.site-footer{background:var(--black);color:#c9ced3;padding:36px 0 20px;margin-top:40px}
.site-footer a{color:#e8eaed}.site-footer a:hover{color:var(--green)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px}
.site-footer h3{color:#fff;font-size:13px;margin:0 0 10px}
.site-footer ul{list-style:none;margin:0;padding:0}.site-footer li{margin:0 0 8px}
.footer-copy{border-top:1px solid #2a3238;margin-top:20px;padding-top:12px;font-size:12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

@media (max-width:1100px){
  .woocommerce ul.products{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .brand-grid{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:900px){
  .header-main{grid-template-columns:1fr auto;gap:8px}
  .search-shell{grid-column:1/-1;max-width:none}
  .menu-toggle{display:inline-flex}
  .cat-nav{display:none}.cat-nav.open{display:block}
  .cat-nav-inner{flex-direction:column}
  .mega,.mega.brands{position:static;min-width:0;box-shadow:none;border:0;display:none;grid-template-columns:1fr;padding:0 14px 12px}
  .cat-item.open .mega,.cat-item.open .mega.brands{display:block}
  .shop-layout{grid-template-columns:1fr}
  .woocommerce ul.products{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .hero{grid-template-columns:1fr;min-height:340px;background-position:70% center}
  .ei-single{grid-template-columns:1fr}
  .tile-grid{grid-template-columns:1fr 1fr}
  .brand-grid{grid-template-columns:repeat(3,1fr)}
  .benefits{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .wa-text-full{display:none}.wa-label{display:inline}
  .utility-left .hide-sm{display:none}
}
@media (max-width:600px){
  .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hero h1{font-size:32px}
  .archive-hero h1{font-size:26px}
  .site-logo{height:36px}
}