/* ============================================================
   ELEMENTESSE — WooCommerce Brand Override Stylesheet
   ------------------------------------------------------------
   HOW TO USE:
   Option A (fastest): WordPress admin → Appearance → Customize
     → Additional CSS → paste this whole file → Publish.
   Option B (same tool used everywhere else on this site):
     WPCode → Code Snippets → Add New → CSS Snippet → paste this
     → set to run "Everywhere" or "Frontend only" → Activate.

   These are WooCommerce's own standard class names — they're
   consistent across almost every WooCommerce theme, since
   WooCommerce enforces them in its templates. If your theme is
   heavily customized, a few selectors below may need small
   tweaks, but this should apply cleanly in the vast majority
   of cases with zero changes.
   ============================================================ */

:root{
  --ew-ink:#162623; --ew-ink-soft:#5E8884;
  --ew-teal:#1F7A6E; --ew-teal-deep:#175F55; --ew-teal-tint:#C7E5DF;
  --ew-amber:#D4944A; --ew-amber-deep:#B97A38; --ew-amber-tint:#F5DCB4;
  --ew-line:#CBE3DF; --ew-cream:#F7F3EC;
}

/* ---- Global type & background ---- */
body.woocommerce, body.woocommerce-page{
  background:var(--ew-cream);
  color:var(--ew-ink);
}
.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce-products-header__title{
  font-family:'Philosopher', serif;
  color:var(--ew-ink);
}

/* ---- Shop page product grid ---- */
.woocommerce ul.products{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:24px;
  margin:0 !important;
}
.woocommerce ul.products li.product{
  background:#fff;
  border:1px solid var(--ew-line);
  border-radius:14px;
  padding:16px;
  text-align:left;
  transition:transform .15s ease, box-shadow .15s ease;
  list-style:none;
  width:100% !important; max-width:100% !important; min-width:0 !important; float:none !important;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(23,95,55,.14);
}
.woocommerce ul.products li.product img{
  border-radius:10px;
  aspect-ratio:1;
  object-fit:cover;
  margin-bottom:10px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Philosopher', serif;
  font-size:15px;
  font-weight:700;
  color:var(--ew-ink);
  margin:6px 0 4px;
}
.woocommerce ul.products li.product .price{
  color:var(--ew-teal-deep) !important;
  font-weight:700;
  font-size:15px;
}
.woocommerce ul.products li.product .price del{
  color:var(--ew-ink-soft);
  opacity:.7;
}
.woocommerce ul.products li.product .price ins{
  text-decoration:none;
}
.woocommerce ul.products li.product .star-rating{
  color:var(--ew-amber);
}

/* ---- Add to Cart buttons (the plain-blue-default fix) ---- */
.woocommerce a.button, .woocommerce button.button,
.woocommerce a.add_to_cart_button, .woocommerce a.single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce ul.products li.product .button{
  background:var(--ew-teal) !important;
  color:#fff !important;
  border:none !important;
  border-radius:8px !important;
  padding:11px 20px !important;
  font-weight:700 !important;
  font-size:13px !important;
  letter-spacing:.02em;
  text-transform:none !important;
  box-shadow:none !important;
  transition:background .15s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce a.add_to_cart_button:hover, .woocommerce a.single_add_to_cart_button:hover,
.woocommerce #respond input#submit:hover{
  background:var(--ew-teal-deep) !important;
}
.woocommerce a.added_to_cart{
  color:var(--ew-teal-deep) !important;
  font-weight:600;
}

/* ---- Sale badge ---- */
.woocommerce span.onsale{
  background:var(--ew-amber) !important;
  color:#fff !important;
  font-family:'Philosopher', serif;
  border-radius:50%;
}

/* ---- Sorting / result-count bar ---- */
.woocommerce-ordering select,
.woocommerce-result-count{
  border-color:var(--ew-line) !important;
  color:var(--ew-ink-soft);
  font-size:13px;
}
.woocommerce-ordering select{
  border-radius:8px !important;
  padding:8px 12px !important;
}

/* ---- Pagination ---- */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border-color:var(--ew-line) !important;
  color:var(--ew-ink) !important;
  border-radius:6px !important;
  margin:0 3px;
}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--ew-teal) !important;
  color:#fff !important;
  border-color:var(--ew-teal) !important;
}

/* ---- Single product page ---- */
.woocommerce div.product .product_title{
  font-family:'Philosopher', serif;
  color:var(--ew-ink);
}
.woocommerce div.product p.price, .woocommerce div.product span.price{
  color:var(--ew-teal-deep) !important;
  font-size:22px;
  font-weight:700;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  font-family:'Philosopher', serif;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  border-bottom:2px solid var(--ew-teal) !important;
}

/* ---- Cart & Checkout pages ---- */
.woocommerce-cart table.cart td.actions .button,
.woocommerce-checkout #payment #place_order{
  background:var(--ew-teal) !important;
  color:#fff !important;
  border-radius:8px !important;
}
.woocommerce-checkout #payment #place_order:hover,
.woocommerce-cart table.cart td.actions .button:hover{
  background:var(--ew-teal-deep) !important;
}
.woocommerce-info, .woocommerce-message{
  border-top-color:var(--ew-teal) !important;
}
.woocommerce-info::before, .woocommerce-message::before{
  color:var(--ew-teal) !important;
}

/* ---- Header VAT/delivery note bar, if you add one to WooCommerce too ---- */
.ew-utility-bar{
  background:var(--ew-ink);
  color:#F5DCB4;
  font-size:12px;
  letter-spacing:.04em;
  text-align:center;
  padding:9px 0;
}

/* ---- Theme header logo (site-wide, shows on native WooCommerce
   pages — Cart/Checkout/Shop — not the same as the custom storefront's
   own logo, which lives in its own CSS file) ----
   !important needed: WooCommerce's own core CSS overrides a plain
   version of this rule on Cart/Shop/Checkout pages. */
.custom-logo{
  height:40px !important;
  width:auto !important;
  max-width:none !important;
}
.site-branding{
  display:flex;
  align-items:center;
  gap:10px;
}

/* ---- WooCommerce Blocks buttons (modern Cart/Checkout blocks) ----
   The classic .button/.add_to_cart_button rules above only cover
   WooCommerce's older template system. Current WooCommerce (10.9+)
   renders Cart/Checkout using Blocks by default, which use these
   entirely different class names — without this, those buttons stay
   the theme's default color regardless of the classic-button fix. */
.wc-block-components-button, .wp-element-button{
  background:var(--ew-teal) !important;
  color:#fff !important;
  border-radius:8px !important;
}
.wc-block-components-button:hover, .wp-element-button:hover{
  background:var(--ew-teal-deep) !important;
}

/* ---- My Account — active "Dashboard" tab (defaults to the theme's
   blue instead of brand teal) ---- */
.woocommerce-MyAccount-navigation-link.is-active a{
  color:var(--ew-teal) !important;
  border-color:var(--ew-teal) !important;
}