/*
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.14.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; flex-wrap: wrap; }
.es-header-actions a { color: var(--ee-ink); font-size: .78rem; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: .2rem; white-space: nowrap; }
.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, .es-header-actions .es-fav-wrap { position: relative; }
.es-fav-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-navbar { background: var(--ee-cream-soft); border-bottom: 1px solid var(--ee-line); padding: .7rem 0; }
.es-navbar .nav-link { font-family: var(--ee-font-display); font-weight: 600; color: var(--ee-ink); font-size: .9rem; padding: .5rem 1rem !important; }
.es-navbar .nav-link:hover, .es-navbar .nav-link.active { color: var(--ee-teal); }
.es-cat-dropdown .btn { font-family: var(--ee-font-display); font-weight: 600; font-size: .9rem; white-space: nowrap; padding: .6rem 1.1rem; }
.es-cat-dropdown .dropdown-menu { border-radius: var(--ee-radius); border-color: var(--ee-line-cool); box-shadow: var(--ee-shadow-lift); padding: .5rem; }
.es-cat-dropdown .dropdown-item { border-radius: 8px; padding: .5rem .8rem; font-size: .88rem; }
.es-cat-dropdown .dropdown-item:hover { background: var(--ee-chip-teal); color: var(--ee-teal-dark); }

/* =========================================================================
   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-tag {
  position: absolute; top: 1.2rem; right: 1.2rem; z-index: 2;
  background: var(--ee-navy-deep); color: #fff; font-family: var(--ee-font-display); font-weight: 700;
  font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; padding: .35rem .8rem; border-radius: 6px;
}
.es-hero-float {
  position: absolute; right: 2rem; bottom: 2rem; z-index: 3; background: #fff;
  border-radius: var(--ee-radius); box-shadow: var(--ee-shadow-lift); padding: 1.1rem 1.3rem;
  display: flex; flex-direction: column; gap: .7rem; max-width: 230px;
}
.es-hero-float div { display: flex; align-items: center; gap: .6rem; font-size: .78rem; font-weight: 600; color: var(--ee-ink); }
.es-hero-float i { font-size: 1.1rem; flex-shrink: 0; }
.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; }

@media (max-width: 991.98px) {
  .es-hero-float { display: none; } /* Not enough width left beside the text for the card to sit on the image without overlapping it. */
}

/* =========================================================================
   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; }

/* Homepage Featured Products — single scrollable row instead of the shop
   archive's wrapping grid above, with arrow buttons for discoverability
   (a bare scrollbar is easy to miss). Cards get a fixed width since flex
   (not grid) is what makes free horizontal scrolling straightforward. */
.es-carousel { position: relative; }
.es-carousel-track {
  display: flex !important; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory;
  padding-bottom: .5rem; -ms-overflow-style: none; scrollbar-width: none;
}
.es-carousel-track::-webkit-scrollbar { display: none; }
.es-carousel-track > li.product { flex: 0 0 240px; scroll-snap-align: start; }
.es-carousel-btn {
  position: absolute; top: 40%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--ee-line-cool);
  box-shadow: var(--ee-shadow-lift); display: flex; align-items: center; justify-content: center;
  color: var(--ee-navy); cursor: pointer;
}
.es-carousel-btn[hidden] { display: none; }
.es-carousel-btn.prev { left: -8px; }
.es-carousel-btn.next { right: -8px; }
.es-carousel-btn:hover { background: var(--ee-teal); color: #fff; border-color: var(--ee-teal); }
.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); margin-bottom: .15rem; }
.woocommerce ul.products li.product .es-card-vendor { font-size: .78rem; color: var(--ee-body); margin-bottom: .35rem; }
.woocommerce ul.products li.product .price { color: var(--ee-navy); font-weight: 800; font-family: var(--ee-font-display); display: block; margin-bottom: .3rem; }
.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 .es-review-count { font-size: .78rem; color: var(--ee-body); margin-left: .3rem; vertical-align: middle; }
.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;
  /* WC's own (dequeued) stylesheet normally supplies this — without it the
     badge renders in normal flow instead of pinned to the image corner. */
  position: absolute; z-index: 2;
}
.woocommerce ul.products li.product { position: relative; }

.es-badge-bestseller {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  background: var(--ee-gold); color: #fff; font-family: var(--ee-font-display); font-weight: 700;
  border-radius: 20px; font-size: .7rem; padding: .25rem .7rem; line-height: 1;
}
/* Shift down when this product is also on sale, so the two badges stack
   instead of overlapping — see the DOM-order note in functions.php. */
.onsale ~ .es-badge-bestseller { top: 2.6rem; }

.es-fav-btn {
  position: absolute; top: .8rem; right: .8rem; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--ee-shadow);
  color: var(--ee-navy); font-size: 1rem; cursor: pointer; transition: transform .15s ease;
}
.es-fav-btn:hover { transform: scale(1.1); }
.es-fav-btn.is-active { color: var(--ee-coral); }
.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.
   Outline style (not the solid teal above) — this is "Add to Cart"
   specifically, kept visually distinct and uniform everywhere it appears
   (homepage carousel, shop page, category pages, related products, single
   product buy box), separate from primary CTAs like "Place Order" /
   "Proceed to Checkout" which stay solid. */
.woocommerce ul.products li.product a.button {
  display: flex !important; width: 100%; margin-top: .6rem;
  background: #fff !important; color: var(--ee-teal) !important;
  border: 1.5px solid var(--ee-teal) !important;
}
.woocommerce ul.products li.product a.button:hover { background: var(--ee-teal) !important; color: #fff !important; }
.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. */
/* max-width alone left this row hugging the left edge of the (correctly
   centered, ~1320px-wide) page container — all the unused space piled up
   on the right instead of being split evenly, which read as broken rather
   than intentional. margin:auto centers the row itself within that
   container. */
.woocommerce div.product { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: flex-start; position: relative; max-width: 1040px; margin-left: auto; margin-right: auto; }
.woocommerce div.product > .woocommerce-product-gallery { flex: 1 1 380px; max-width: 460px; }
.woocommerce div.product > .summary { flex: 1 1 380px; max-width: 460px; }
.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); margin-bottom: .6rem; }
.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.7rem; margin-bottom: 1.2rem; display: block; }
/* A short price + a quantity box + a button, left-aligned in a column as
   wide as the gallery, reads as sparse/unfinished — a bordered "buy box"
   around them (standard e-commerce pattern) gives this area its own
   visual weight instead of just floating in empty space. */
.woocommerce div.product form.cart {
  background: var(--ee-cream-soft); border: 1px solid var(--ee-line-cool); border-radius: var(--ee-radius);
  padding: 1.3rem; display: inline-block;
}
.woocommerce div.product form.cart .quantity { margin-bottom: .9rem; display: block; }
.woocommerce div.product form.cart .quantity .qty { padding: .6rem .8rem; border-radius: 8px; border: 1px solid var(--ee-line-cool); width: 90px; }
/* Same outline Add to Cart treatment as the product grid (see
   ul.products li.product a.button above) — kept uniform across the
   storefront rather than solid teal like other primary CTAs. */
.woocommerce div.product form.cart .button {
  padding: .8rem 1.8rem !important; font-size: 1rem; width: 100%;
  background: #fff !important; color: var(--ee-teal) !important;
  border: 1.5px solid var(--ee-teal) !important;
}
.woocommerce div.product form.cart .button:hover { background: var(--ee-teal) !important; color: #fff !important; }
.woocommerce div.product .product_meta { margin-top: 1.2rem; font-size: .88rem; color: var(--ee-body); }
.woocommerce #reviews .star-rating { color: var(--ee-gold); }

/* Review form — WC's own (dequeued) stylesheet normally draws this.
   IMPORTANT: WC's own frontend.js computes the saved rating from each
   star's *DOM position* (`.find('a').index($star) + 1`), not from CSS/
   visual position — a `row-reverse` layout (tried here previously) makes
   the *visual* fill-on-hover look right but silently inverts the value
   that gets saved (clicking what looks like "5 stars" actually clicks the
   DOM node for star 1, saving rating=1). Confirmed against real submitted
   review data. Fixed by keeping normal DOM order and doing the "fill this
   star and everything before it" effect via explicit JS
   (assets/js/es-review-stars.js) instead of a CSS sibling-combinator trick,
   so the visual fill can never disagree with the value actually submitted. */
.woocommerce #respond p.stars span[role="group"] { display: inline-flex; gap: .15rem; }
.woocommerce #respond p.stars a {
  width: 1.4rem; height: 1.4rem; display: inline-block; position: relative;
  text-indent: -9999px; overflow: hidden;
}
.woocommerce #respond p.stars a::before {
  content: "\2605"; position: absolute; inset: 0; text-indent: 0;
  font-size: 1.4rem; line-height: 1; color: var(--ee-line-cool);
}
.woocommerce #respond p.stars a.es-hovering::before,
.woocommerce #respond p.stars a.es-selected::before,
.woocommerce #respond p.stars a.active::before { color: var(--ee-gold); }

.woocommerce #respond .comment-form-rating,
.woocommerce #respond .comment-form-comment,
.woocommerce #respond .comment-form-author,
.woocommerce #respond .comment-form-email,
.woocommerce #respond .comment-form-cookies-consent { margin-bottom: 1.1rem; }
.woocommerce #respond label { display: block; font-family: var(--ee-font-display); font-weight: 600; color: var(--ee-ink); margin-bottom: .4rem; }
.woocommerce #respond textarea,
.woocommerce #respond input[type="text"],
.woocommerce #respond input[type="email"] {
  width: 100%; max-width: 480px; border: 1px solid var(--ee-line-cool); border-radius: 10px;
  padding: .6rem .9rem; font-family: var(--ee-font-body);
}
.woocommerce #respond textarea:focus,
.woocommerce #respond input:focus { outline: none; border-color: var(--ee-teal); }
.woocommerce #respond p.form-submit input.submit {
  background: var(--ee-teal); color: #fff; font-family: var(--ee-font-display); font-weight: 600;
  border: none; border-radius: 10px; padding: .7rem 1.6rem; cursor: pointer;
}
.woocommerce #respond p.form-submit input.submit:hover { background: var(--ee-teal-dark); }

/* 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); }

/* Order Received / Thank You page — was completely unstyled (plain h1,
   bulleted <ul> overview, bare table, address text with no wrapper), same
   root cause as the My Account login page before it: this theme dequeues
   WooCommerce's own stylesheet and nothing had filled the gap in yet. */
.woocommerce-order { max-width: 900px; }

.woocommerce-thankyou-order-received {
  background: var(--ee-chip-teal); border: 1px solid var(--ee-teal); color: var(--ee-teal-dark);
  border-radius: var(--ee-radius); padding: 1rem 1.3rem 1rem 3.4rem; position: relative;
  font-weight: 600; margin-bottom: 2rem; list-style: none;
}
.woocommerce-thankyou-order-received::before {
  content: "\2713"; position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; background: var(--ee-teal); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 800;
}

.woocommerce-order-overview {
  list-style: none; padding: 1.4rem 1.6rem; margin: 0 0 2rem; display: flex; flex-wrap: wrap;
  gap: 1rem 2.4rem; background: var(--ee-cream-soft); border: 1px solid var(--ee-line-cool);
  border-radius: var(--ee-radius-lg);
}
.woocommerce-order-overview li { font-size: .85rem; color: var(--ee-body); }
.woocommerce-order-overview li strong { display: block; font-family: var(--ee-font-display); color: var(--ee-navy); font-size: 1.05rem; margin-top: .15rem; }

.woocommerce-order-details__title, .woocommerce-column__title {
  font-size: 1.15rem; margin-bottom: 1.1rem; position: relative; padding-bottom: .6rem;
}
.woocommerce-order-details__title::after, .woocommerce-column__title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px;
  background: var(--ee-teal); border-radius: 2px;
}
.woocommerce-order-details, .woocommerce-customer-details { margin-bottom: 2.5rem; }

table.shop_table.order_details th, table.shop_table.order_details td { padding: .8rem 1rem; }
table.shop_table.order_details .product-name a { color: var(--ee-teal); font-weight: 600; }
table.shop_table.order_details .product-total, table.shop_table.order_details tfoot td { text-align: right; }
table.shop_table.order_details tfoot th { font-family: var(--ee-font-display); color: var(--ee-navy); font-weight: 700; }
table.shop_table.order_details tfoot td { font-family: var(--ee-font-display); color: var(--ee-ink); font-weight: 600; }

.woocommerce-customer-details address {
  background: var(--ee-cream-soft); border: 1px solid var(--ee-line-cool); border-radius: var(--ee-radius);
  padding: 1.2rem 1.4rem; font-style: normal; color: var(--ee-body); line-height: 1.8;
}
/* Same Bootstrap .col-1/.col-2 width-utility collision as #customer_login
   (see that rule for the full explanation) — WC's billing/shipping address
   columns use the same legacy "col-1"/"col-2" class pairing. */
.woocommerce-columns--addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.woocommerce-columns--addresses .col-1, .woocommerce-columns--addresses .col-2 { width: auto; flex: initial; max-width: none; }

@media (max-width: 767.98px) {
  .woocommerce-order-overview { gap: .8rem 1.6rem; padding: 1.2rem; }
  .woocommerce-columns--addresses { grid-template-columns: 1fr; }
}

/* 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); }

/* My Account — Login / Register / Lost & Reset Password. Previously
   completely unstyled (raw browser inputs, no card, no spacing) since this
   theme dequeues WooCommerce's own stylesheet and nothing here had filled
   the gap in yet. The heading (<h2>Login</h2> / <h2>Register</h2>) is a
   *sibling* of the <form>, not a wrapper around it — in both WC layouts
   (registration on: wrapped in #customer_login's two columns; off: bare,
   no wrapper at all) — so the card styling lives on the <form> itself
   rather than on a shared parent, which works identically either way. */
.woocommerce-MyAccount-content { max-width: 900px; }
.woocommerce-MyAccount-content > h2,
#customer_login h2 {
  font-size: 1.25rem; margin-bottom: 1.1rem; position: relative; padding-bottom: .6rem;
}
.woocommerce-MyAccount-content > h2::after,
#customer_login h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px;
  background: var(--ee-teal); border-radius: 2px;
}

#customer_login { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
/* WC's own template gives these divs BOTH its legacy grid class (u-column1/
   u-column2) AND a second class (col-1/col-2) meant for very old Storefront-
   theme support — col-1/col-2 collide with Bootstrap's 12-column width
   utilities (8.33%/16.67%), crushing both columns and everything in them
   down to a sliver. Confirmed live (not a test artifact) by temporarily
   forcing registration on via a debug filter and screenshotting the real
   page. Reset scoped to this ID so it can't affect Bootstrap's grid
   anywhere else on the site. */
#customer_login .col-1, #customer_login .col-2 { width: auto; flex: initial; max-width: none; }

.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword {
  background: var(--ee-cream-soft); border: 1px solid var(--ee-line-cool);
  border-radius: var(--ee-radius-lg); box-shadow: var(--ee-shadow);
  padding: 1.8rem 2rem; max-width: 460px;
}
#customer_login .woocommerce-form-login, #customer_login .woocommerce-form-register { max-width: none; }

.woocommerce-form-row label {
  display: block; font-family: var(--ee-font-display); font-weight: 600;
  color: var(--ee-ink); font-size: .9rem; margin-bottom: .4rem;
}
.woocommerce-form-row .required { color: var(--ee-coral); text-decoration: none; }
.woocommerce-Input {
  width: 100%; border: 1px solid var(--ee-line-cool); border-radius: 10px;
  padding: .65rem .9rem; font-family: var(--ee-font-body); font-size: .95rem;
}
.woocommerce-Input:focus { outline: none; border-color: var(--ee-teal); box-shadow: 0 0 0 3px rgba(20,125,113,.12); }

.woocommerce-form__label-for-checkbox {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 600;
  color: var(--ee-ink); font-size: .9rem; cursor: pointer;
}
.woocommerce-form__input-checkbox { accent-color: var(--ee-teal); width: 16px; height: 16px; }

/* "Remember me" + "Log in" share one <p> in WC's own markup — lay them out
   side by side instead of the default stacked block flow. */
.woocommerce-form-login p.form-row:has(.woocommerce-form-login__rememberme) {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 1.2rem;
}
.woocommerce-LostPassword { margin-top: 1.1rem; margin-bottom: 0; font-size: .9rem; }
.woocommerce-ResetPassword .clear { display: none; }

@media (max-width: 767.98px) {
  #customer_login { grid-template-columns: 1fr; gap: 1.5rem; }
  .woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword { max-width: none; }
}

/* Star rating — WC's own (dequeued) stylesheet normally draws this via a
   background sprite image; without it, wc_get_rating_html()'s markup had
   no visual rendering at all, just its screen-reader text showing as
   plain text ("Rated 2 out of 5..."). Rebuilt with the standard two-layer
   Unicode-star technique: an empty-star row as the base, and a gold row
   clipped to the rating percentage on top — same trick used for the
   review-form stars above, just non-interactive. */
.star-rating {
  position: relative; display: inline-block; overflow: hidden;
  height: 1.2em; line-height: 1.2; width: 5.3em; font-size: .8rem; vertical-align: middle;
}
.star-rating::before {
  content: "\2605\2605\2605\2605\2605"; position: absolute; top: 0; left: 0;
  letter-spacing: .12em; color: var(--ee-line-cool);
}
.star-rating span { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; font-size: 0; }
.star-rating span::before {
  content: "\2605\2605\2605\2605\2605"; position: absolute; top: 0; left: 0;
  letter-spacing: .12em; color: var(--ee-gold); font-size: 1rem; white-space: nowrap;
}

/* =========================================================================
   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; }

/* =========================================================================
   9. RESPONSIVE
   ========================================================================= */
@media (max-width: 767.98px) {
  .es-search { max-width: none; }

  /* The hero's full-bleed absolute-positioned image (behind the text,
     see section 4) only works when the container is wide enough for text
     to sit beside it without needing much height. On a phone the text
     wraps to far more lines than the image was ever sized for, so it just
     overlaps illegibly. Stack instead: image on top at a fixed height,
     text below it in normal flow. */
  .es-hero-img {
    position: relative; inset: auto; height: 200px;
    border-radius: var(--ee-radius-lg) var(--ee-radius-lg) 0 0; overflow: hidden;
  }
  .es-hero-inner { max-width: none !important; padding: 1.5rem 1.3rem; }
  .es-hero-badges { gap: .8rem 1.2rem; }

  /* Five header icons + labels don't fit a phone width. Two problems, two
     fixes: (1) without flex-basis:100%, .es-header-actions only gets
     whatever width is *left over* on the logo's line rather than the
     full row, so its own flex-wrap has nowhere to actually wrap to and
     the later icons render past the right edge of the viewport entirely
     (confirmed via computed getBoundingClientRect — they're not
     display:none, just laid out off-screen); (2) icons only (no text
     labels) once it does have its own full line, or five items still
     don't comfortably fit even at 16px each. */
  .es-header-actions { flex-basis: 100%; justify-content: flex-end; gap: 1.1rem; margin-left: 0 !important; }
  .es-header-actions .es-action-label { display: none; }
  .es-header-actions a i { font-size: 1.3rem; }
}

@media (max-width: 480px) {
  /* Become a Vendor / Help Center are secondary, promotional links — on
     the narrowest phones, drop them entirely rather than let the core
     shopping icons (Favorites/Account/Cart) get squeezed for room. */
  .es-header-actions .es-secondary-action { display: none; }

  .es-carousel-track > li.product { flex-basis: 200px; }
  .es-carousel-btn { width: 34px; height: 34px; }
  .es-carousel-btn.prev { left: 2px; }
  .es-carousel-btn.next { right: 2px; }
}

/* =========================================================================
   10. SHOP PAGE — vendor profile layout (woocommerce/archive-product.php),
       is_shop() only. Category/tag archives keep the plain grid above.
   ========================================================================= */
.es-vshop-hero {
  /* No overflow:hidden here — the stats card is deliberately positioned to
     float partially outside this box (bottom: negative offset below), and
     clipping the container would cut it off. The hero photo already has
     its own border-radius + overflow:hidden, so nothing else needs this
     box to clip. */
  position: relative; border-radius: var(--ee-radius-lg);
  background: var(--ee-cream-soft); margin-bottom: 3.5rem;
}
.es-vshop-hero-top {
  padding: 1.6rem 2rem 0; display: flex; justify-content: space-between;
  align-items: flex-start; gap: 1rem; flex-wrap: wrap;
}
.es-vshop-identity { display: flex; gap: 1rem; align-items: center; }
.es-vshop-logo {
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: var(--ee-teal); box-shadow: var(--ee-shadow);
}
.es-vshop-logo img { width: 100%; height: 100%; object-fit: cover; }
.es-vshop-identity h1 { font-size: 1.6rem; margin-bottom: .2rem; }
.es-vshop-tagline { color: var(--ee-body); font-weight: 600; margin: 0; }
.es-vshop-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.es-follow-btn.is-following { background: var(--ee-teal-dark); }

.es-vshop-hero-body { padding: 1.6rem 2rem 2rem; position: relative; }
.es-vshop-hero-img { position: relative; border-radius: var(--ee-radius); overflow: hidden; margin-bottom: 1.2rem; }
.es-vshop-hero-img img { width: 100%; height: 280px; object-fit: cover; display: block; }
.es-vshop-seal {
  position: absolute; top: 1rem; right: 1rem; background: #fff; color: var(--ee-teal-dark);
  font-family: var(--ee-font-display); font-weight: 700; font-size: .78rem;
  padding: .5rem .9rem; border-radius: 999px; display: inline-flex; align-items: center;
  gap: .4rem; box-shadow: var(--ee-shadow);
}
.es-vshop-bio { max-width: 640px; margin-bottom: 1rem; }
.es-vshop-badges { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; margin-bottom: .5rem; }
.es-vshop-badges span { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--ee-navy); font-size: .9rem; }
.es-vshop-badges i { color: var(--ee-teal); }

.es-vshop-stats {
  position: absolute; right: 2rem; bottom: -1.6rem; background: #fff;
  border-radius: var(--ee-radius); box-shadow: var(--ee-shadow-lift);
  padding: 1rem 1.5rem; display: flex; gap: 1.8rem; flex-wrap: wrap; z-index: 1;
}
.es-vshop-stats div { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 68px; }
.es-vshop-stats span { font-size: .7rem; color: var(--ee-body); text-transform: uppercase; letter-spacing: .03em; }
.es-vshop-stats strong { font-family: var(--ee-font-display); color: var(--ee-navy); font-size: 1.05rem; }
/* A brand-new vendor subsite may not have uploaded a hero photo yet — the
   stats card (Products/Ratings always have real values even then) has
   nothing to overlap in that case, so it drops into normal flow instead
   of floating over an image that isn't there. */
.es-vshop-stats-noimg { position: static; margin-top: 1rem; }
.es-vshop-hero:has(.es-vshop-stats-noimg) { margin-bottom: 1.6rem; }

.es-vshop-tabs {
  display: flex; gap: .3rem; overflow-x: auto; border-bottom: 1px solid var(--ee-line-cool);
  margin-bottom: 2rem;
}
.es-vshop-tabs::-webkit-scrollbar { display: none; }
.es-vshop-tab {
  background: none; border: none; padding: .9rem 1.1rem; font-family: var(--ee-font-display);
  font-weight: 700; color: var(--ee-body); white-space: nowrap; border-bottom: 3px solid transparent;
  cursor: pointer;
}
.es-vshop-tab:hover { color: var(--ee-teal-dark); }
.es-vshop-tab.is-active { color: var(--ee-teal); border-bottom-color: var(--ee-teal); }

.es-vshop-trust-strip {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem;
  background: var(--ee-chip-teal); border-radius: var(--ee-radius); padding: 1.4rem;
  margin-bottom: 2.5rem;
}
.es-vshop-trust-strip > div { display: flex; gap: .7rem; align-items: flex-start; }
.es-vshop-trust-strip i { color: var(--ee-teal); font-size: 1.3rem; flex-shrink: 0; margin-top: .1rem; }
.es-vshop-trust-strip strong { display: block; font-family: var(--ee-font-display); color: var(--ee-navy); font-size: .85rem; }
.es-vshop-trust-strip div div { font-size: .78rem; color: var(--ee-body); }

.es-vshop-pane[hidden] { display: none; }
.es-vshop-richtext { color: var(--ee-body); max-width: 760px; }

.es-vshop-reviews-summary { font-weight: 700; color: var(--ee-navy); margin-bottom: 1.2rem; }
.es-vshop-review { border-bottom: 1px solid var(--ee-line-cool); padding: 1rem 0; }
.es-vshop-review:first-child { padding-top: 0; }

.es-vshop-contact-form { max-width: 520px; }
.es-vshop-contact-form label { font-family: var(--ee-font-display); font-weight: 600; color: var(--ee-ink); }
.es-vshop-contact-status { margin-top: .8rem; font-weight: 600; color: var(--ee-teal-dark); }

.es-vshop-side-card { background: var(--ee-cream-soft); border: 1px solid var(--ee-line-cool); border-radius: var(--ee-radius); padding: 1.3rem; margin-bottom: 1.2rem; }
.es-vshop-side-card h6 { font-family: var(--ee-font-display); color: var(--ee-navy); margin-bottom: .6rem; }
.es-vshop-social { display: flex; gap: .8rem; }
.es-vshop-social a {
  width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--ee-line-cool);
  display: flex; align-items: center; justify-content: center; color: var(--ee-teal);
}
.es-vshop-social a:hover { background: var(--ee-teal); color: #fff; border-color: var(--ee-teal); }
.es-vshop-side-cta { background: var(--ee-chip-teal); border-color: transparent; }
.es-vshop-side-mini {
  display: flex; gap: .8rem; align-items: center; background: var(--ee-cream-soft);
  border: 1px solid var(--ee-line-cool); border-radius: var(--ee-radius); padding: 1rem 1.3rem;
}
.es-vshop-side-mini i { font-size: 1.4rem; color: var(--ee-teal); }
.es-vshop-side-mini strong { display: block; color: var(--ee-navy); font-family: var(--ee-font-display); }
.es-vshop-side-mini span { font-size: .85rem; color: var(--ee-body); }

@media (max-width: 991.98px) {
  .es-vshop-trust-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
  /* An absolutely-positioned card overlapping the hero's bottom edge only
     reads as intentional when there's room beside it; on a phone it would
     just cover the bio/badges below it, so it drops into normal flow. */
  .es-vshop-stats { position: static; box-shadow: none; border: 1px solid var(--ee-line-cool); margin-top: 1rem; width: 100%; justify-content: space-between; }
  .es-vshop-hero { margin-bottom: 2rem; }
  .es-vshop-hero-top, .es-vshop-hero-body { padding-left: 1.3rem; padding-right: 1.3rem; }
  .es-vshop-trust-strip { grid-template-columns: 1fr; }
}

/* =========================================================================
   15. CONVERSATION THREAD — shared by the public /conversation/ page and
   the Vendor Dashboard's Messages Inbox pane (dashboard.css), so these
   bubble styles live here in style.css (loaded on both) rather than being
   duplicated in two places.
   ========================================================================= */
.es-conv-page { max-width: 720px; margin: 0 auto; }
.es-conv-notfound { text-align: center; padding: 3rem 1.5rem; }
.es-conv-notfound i { font-size: 2.2rem; color: var(--ee-body); margin-bottom: 1rem; display: block; }
.es-conv-notfound p { max-width: 420px; margin: 0 auto 1.5rem; }

.es-conv-thread { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.es-conv-bubble-row { display: flex; }
.es-conv-bubble-row.is-vendor { justify-content: flex-start; }
.es-conv-bubble-row.is-customer { justify-content: flex-end; }
.es-conv-bubble {
  max-width: 78%; border-radius: var(--ee-radius); padding: .9rem 1.1rem;
  background: var(--ee-cream-soft); border: 1px solid var(--ee-line-cool);
}
.es-conv-bubble-row.is-customer .es-conv-bubble { background: var(--ee-chip-teal); border-color: transparent; }
.es-conv-bubble strong { display: block; font-family: var(--ee-font-display); font-size: .8rem; color: var(--ee-navy); margin-bottom: .3rem; }
.es-conv-bubble p { margin: 0 0 .4rem; font-size: .9rem; color: var(--ee-ink); white-space: pre-wrap; }
.es-conv-bubble time { font-size: .7rem; color: var(--ee-body); }

.es-conv-reply-form { display: flex; flex-direction: column; gap: .8rem; }
.es-conv-reply-form textarea {
  width: 100%; border: 1px solid var(--ee-line-cool); border-radius: var(--ee-radius); padding: .8rem 1rem;
  font-family: var(--ee-font-body); resize: vertical;
}
.es-conv-reply-form textarea:focus { outline: none; border-color: var(--ee-teal); }
.es-conv-reply-form button { align-self: flex-start; }