/*
Theme Name:  Earthly Storefront
Theme URI:   https://www.earthlyelegance.online
Author:      GRIT Technologies
Author URI:  https://grittechnologies.com
Description: Individual vendor storefront theme for Earthly Elegance Online — one per vendor Multisite subsite. WooCommerce-first: search-led header, category browsing, product grid, trust badges. Built with Bootstrap 5, matching the earthly-elegance brand system.
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: earthly-storefront
Tested up to: 6.5
Requires PHP: 7.4
*/

/* =========================================================================
   1. DESIGN TOKENS — same brand palette as the main earthly-elegance theme
      (every vendor store is still "powered by Earthly Elegance"). Store
      Setup's Branding step lets a vendor override logo/tagline via the
      native Customizer; full per-vendor color theming is a later step.
   ========================================================================= */
:root {
  --ee-navy:        #1B3A5C;
  --ee-navy-deep:   #12324F;
  --ee-teal:        #147D71;
  --ee-teal-dark:   #0E5F56;
  --ee-coral:       #E4593F;
  --ee-gold:        #E5A029;
  --ee-gold-dark:   #C98A18;
  --ee-green:       #4E8C46;
  --ee-purple:      #7B4FA6;

  --ee-cream:       #FBF4E6;
  --ee-cream-soft:  #FDF9F1;
  --ee-white:       #FFFFFF;
  --ee-ink:         #23364B;
  --ee-body:        #5B6B7C;
  --ee-line:        #EDE4D2;
  --ee-line-cool:   #E6EBF1;

  --ee-chip-teal:   #E3F2EF;
  --ee-chip-gold:   #FBEFD8;
  --ee-chip-coral:  #FBE5DF;
  --ee-chip-navy:   #E4EBF3;
  --ee-chip-green:  #E8F1E5;
  --ee-chip-purple: #EFE7F6;

  --ee-font-display: 'Poppins', system-ui, sans-serif;
  --ee-font-body:    'Nunito Sans', system-ui, sans-serif;

  --ee-radius:      16px;
  --ee-radius-lg:   24px;
  --ee-shadow:      0 6px 24px rgba(27, 58, 92, .08);
  --ee-shadow-lift: 0 12px 32px rgba(27, 58, 92, .14);
}

/* =========================================================================
   2. BASE
   ========================================================================= */
body {
  font-family: var(--ee-font-body);
  color: var(--ee-body);
  background: var(--ee-white);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--ee-font-display); color: var(--ee-ink); font-weight: 700; line-height: 1.2; }
a { color: var(--ee-teal); text-decoration: none; }
a:hover { color: var(--ee-teal-dark); }
img { max-width: 100%; height: auto; }

.btn-ee-teal {
  background: var(--ee-teal); color: #fff; font-family: var(--ee-font-display); font-weight: 600;
  border: none; border-radius: 10px; padding: .7rem 1.5rem;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: background .2s ease, transform .2s ease;
}
.btn-ee-teal:hover { background: var(--ee-teal-dark); color: #fff; transform: translateY(-2px); }
.btn-ee-outline-dark {
  border: 2px solid var(--ee-ink); color: var(--ee-ink); font-family: var(--ee-font-display); font-weight: 600;
  border-radius: 10px; padding: .65rem 1.4rem; background: #fff;
}
.btn-ee-outline-dark:hover { background: var(--ee-ink); color: #fff; }

/* =========================================================================
   3. HEADER — logo, search-first nav, account/cart icons
   ========================================================================= */
.es-topbar { background: var(--ee-navy-deep); color: #cfd9e4; font-size: .8rem; padding: .4rem 0; }
.es-topbar a { color: #cfd9e4; }
.es-topbar a:hover { color: #fff; }

.es-header { background: #fff; border-bottom: 1px solid var(--ee-line-cool); padding: .9rem 0; }
.es-header .navbar-brand { display: flex; align-items: center; gap: .6rem; }
.es-logo-text { font-family: var(--ee-font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.1; color: var(--ee-navy); }

.es-search { flex: 1 1 auto; max-width: 560px; }
.es-search .form-control { border-radius: 8px 0 0 8px; border-color: var(--ee-line-cool); }
.es-search .btn { border-radius: 0 8px 8px 0; background: var(--ee-teal); color: #fff; border: none; padding: 0 1.1rem; }
.es-search .btn:hover { background: var(--ee-teal-dark); }

.es-header-actions { display: flex; align-items: center; gap: 1.3rem; }
.es-header-actions a { color: var(--ee-ink); font-size: .82rem; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.es-header-actions a i { font-size: 1.2rem; color: var(--ee-navy); }
.es-header-actions a:hover i, .es-header-actions a:hover { color: var(--ee-teal); }
.es-cart-count {
  position: absolute; top: -6px; right: -10px; background: var(--ee-coral); color: #fff;
  font-size: .65rem; font-weight: 700; border-radius: 50%; width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
}
.es-header-actions .es-cart-wrap { position: relative; }

.es-navbar { background: var(--ee-cream-soft); border-bottom: 1px solid var(--ee-line); }
.es-navbar .nav-link { font-family: var(--ee-font-display); font-weight: 600; color: var(--ee-ink); font-size: .9rem; padding: .7rem 1rem !important; }
.es-navbar .nav-link:hover, .es-navbar .nav-link.active { color: var(--ee-teal); }

/* =========================================================================
   4. HERO
   ========================================================================= */
.es-hero { position: relative; overflow: hidden; border-radius: var(--ee-radius-lg); background: var(--ee-cream); margin: 1.5rem 0; }
.es-hero-inner { padding: 3rem 2.5rem; position: relative; z-index: 2; }
.es-hero h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; margin-bottom: .8rem; }
.es-hero .word-teal { color: var(--ee-teal); }
.es-hero-img { position: absolute; inset: 0; z-index: 1; }
.es-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.es-hero-badges { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.2rem; font-size: .85rem; font-weight: 600; color: var(--ee-navy); }
.es-hero-badges span { display: flex; align-items: center; gap: .4rem; }

/* =========================================================================
   5. CATEGORY ICON ROW
   ========================================================================= */
.es-cat-row { display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center; padding: 1.6rem 0; border-bottom: 1px solid var(--ee-line-cool); }
.es-cat-item { text-align: center; width: 92px; }
.es-cat-item .icon-wrap {
  width: 68px; height: 68px; border-radius: 50%; background: var(--ee-chip-teal);
  display: flex; align-items: center; justify-content: center; margin: 0 auto .5rem;
  overflow: hidden; border: 1px solid var(--ee-line-cool);
}
.es-cat-item .icon-wrap img { width: 100%; height: 100%; object-fit: cover; }
.es-cat-item .icon-wrap i { font-size: 1.5rem; color: var(--ee-teal); }
.es-cat-item span { font-size: .78rem; font-weight: 700; color: var(--ee-ink); }

/* =========================================================================
   6. TRUST STRIP
   ========================================================================= */
.es-trust-strip { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; padding: 1.4rem 0; border-bottom: 1px solid var(--ee-line-cool); }
.es-trust-item { display: flex; align-items: center; gap: .6rem; font-size: .82rem; }
.es-trust-item i { font-size: 1.3rem; color: var(--ee-teal); }
.es-trust-item strong { display: block; color: var(--ee-navy); font-family: var(--ee-font-display); font-size: .85rem; }

/* =========================================================================
   7. WOOCOMMERCE — product grid, single product, cart, checkout, account
   ========================================================================= */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; list-style: none; padding: 0; margin: 2rem 0; }
.woocommerce ul.products li.product {
  background: #fff; border: 1px solid var(--ee-line-cool); border-radius: var(--ee-radius);
  padding: 1rem; position: relative; transition: box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover { box-shadow: var(--ee-shadow-lift); transform: translateY(-3px); }
.woocommerce ul.products li.product img { border-radius: 10px; margin-bottom: .8rem; aspect-ratio: 1/1; object-fit: cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--ee-font-display); font-weight: 700; font-size: .95rem; color: var(--ee-ink); }
.woocommerce ul.products li.product .price { color: var(--ee-navy); font-weight: 800; font-family: var(--ee-font-display); }
.woocommerce ul.products li.product .price del { color: var(--ee-body); opacity: .6; font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .star-rating { color: var(--ee-gold); font-size: .8rem; }
.woocommerce span.onsale {
  background: var(--ee-coral); color: #fff; font-family: var(--ee-font-display); font-weight: 700;
  border-radius: 20px; font-size: .7rem; padding: .25rem .7rem; top: .8rem; left: .8rem; right: auto;
  min-height: 0; min-width: 0; line-height: 1;
}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background: var(--ee-teal) !important; color: #fff !important; font-family: var(--ee-font-display); font-weight: 600;
  border-radius: 10px !important; padding: .6rem 1.3rem !important; border: none !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  white-space: nowrap; font-size: .88rem;
}
/* Full-width CTA inside a product card — safer against overflow than a
   shrink-wrapped button in a narrow grid column, and a standard pattern. */
.woocommerce ul.products li.product a.button {
  display: flex !important; width: 100%; margin-top: .6rem;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--ee-teal-dark) !important; }
.woocommerce a.added_to_cart { color: var(--ee-teal); font-weight: 600; margin-left: .5rem; }

.woocommerce nav.woocommerce-pagination ul { border: none; gap: .4rem; display: flex; }
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  border: 1px solid var(--ee-line-cool); border-radius: 8px; color: var(--ee-navy);
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--ee-teal); color: #fff; }

/* Single product — two-column layout (gallery left, summary right). WC's
   default template provides no layout CSS of its own for this; normally
   supplied by woocommerce-general.css, which this theme dequeues. */
.woocommerce div.product { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: flex-start; }
.woocommerce div.product > .woocommerce-product-gallery { flex: 1 1 420px; max-width: 480px; }
.woocommerce div.product > .summary { flex: 1 1 320px; }
.woocommerce div.product .woocommerce-product-gallery { border-radius: var(--ee-radius); overflow: hidden; }
.woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; padding: 0; list-style: none; }
.woocommerce div.product .woocommerce-product-gallery__image img { width: 100%; border-radius: var(--ee-radius); }
.woocommerce div.product .flex-control-thumbs { display: flex; gap: .6rem; margin-top: .8rem; padding: 0; list-style: none; }
.woocommerce div.product .flex-control-thumbs li { width: 70px; }
.woocommerce div.product .flex-control-thumbs img { border-radius: 8px; cursor: pointer; opacity: .7; }
.woocommerce div.product .flex-control-thumbs img.flex-active { opacity: 1; outline: 2px solid var(--ee-teal); }
/* Product tabs (Description / Reviews) + related products, below the
   two-column area above */
.woocommerce div.product .woocommerce-tabs { flex: 1 1 100%; margin-top: 2rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs { list-style: none; display: flex; gap: 1.5rem; border-bottom: 1px solid var(--ee-line-cool); padding: 0; margin-bottom: 1.5rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: var(--ee-font-display); font-weight: 700; color: var(--ee-body); padding-bottom: .8rem; display: block; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ee-teal); border-bottom: 2px solid var(--ee-teal); }
.woocommerce div.product .related.products { flex: 1 1 100%; margin-top: 2rem; }
.woocommerce div.product .product_title { font-family: var(--ee-font-display); font-weight: 800; color: var(--ee-navy); }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--ee-navy); font-family: var(--ee-font-display); font-weight: 800; font-size: 1.4rem; }
.woocommerce div.product form.cart .button { padding: .8rem 1.8rem !important; font-size: 1rem; }
.woocommerce #reviews .star-rating { color: var(--ee-gold); }

/* Cart / Checkout tables */
.woocommerce table.shop_table { border: 1px solid var(--ee-line-cool); border-radius: var(--ee-radius); overflow: hidden; }
.woocommerce table.shop_table th { background: var(--ee-cream-soft); font-family: var(--ee-font-display); color: var(--ee-navy); }
.woocommerce-checkout #payment { background: var(--ee-cream-soft) !important; border-radius: var(--ee-radius); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row select { border-radius: 8px; border-color: var(--ee-line-cool); }

/* My Account */
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.woocommerce-MyAccount-navigation li { margin-bottom: .4rem; }
.woocommerce-MyAccount-navigation li a { display: block; padding: .6rem 1rem; border-radius: 8px; color: var(--ee-ink); font-weight: 600; }
.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover { background: var(--ee-chip-teal); color: var(--ee-teal-dark); }

/* Star ratings elsewhere (theme-agnostic override) */
.star-rating span::before { color: var(--ee-gold); }

/* =========================================================================
   8. FOOTER
   ========================================================================= */
.es-footer { background: var(--ee-navy-deep); color: #B9C6D4; padding: 3rem 0 1.5rem; margin-top: 3rem; }
.es-footer h6 { color: #fff; font-size: .95rem; margin-bottom: 1rem; }
.es-footer a { color: #B9C6D4; display: block; margin-bottom: .5rem; font-size: .9rem; }
.es-footer a:hover { color: var(--ee-gold); }
.es-footer .copy { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2rem; padding-top: 1.2rem; font-size: .82rem; }

@media (max-width: 767.98px) {
  .es-hero-inner { padding: 2rem 1.3rem; }
  .es-search { max-width: none; }
}