/* Brand extension onto the WooCommerce templates (shop/product/cart/checkout/my-account).
   The redesigned pages (home/about/press/contact) use a cream/forest-green/terracotta palette and
   Fraunces/Work Sans type via ct-pages.css, but the actual purchase path still rendered in stock
   Divi/WooCommerce styling (Montserrat headings, default WooCommerce red sale badges/buttons) --
   the look changed jarringly right where a visitor decides to buy. Same tokens as ct-pages.css,
   applied here via body-class scoping so it never touches the custom ct-home/ct-page templates.
   !important matches the precedent already set in ct-pages.css's .ct-add-cart rule -- Divi injects
   its own dynamic CSS for WooCommerce buttons/prices and otherwise wins on load order. */

body.woocommerce-shop,
body.single-product,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
  background: #F8F2E6 !important;
}
body.woocommerce-shop #main-content,
body.single-product #main-content,
body.woocommerce-cart #main-content,
body.woocommerce-checkout #main-content,
body.woocommerce-account #main-content {
  font-family: 'Work Sans', system-ui, sans-serif;
  color: #2B241E;
}
body.woocommerce-shop #main-content h1,
body.woocommerce-shop #main-content h2,
body.woocommerce-shop #main-content h3,
body.single-product #main-content h1,
body.single-product #main-content h2,
body.single-product #main-content h3,
body.woocommerce-cart #main-content h1,
body.woocommerce-cart #main-content h2,
body.woocommerce-cart #main-content h3,
body.woocommerce-checkout #main-content h1,
body.woocommerce-checkout #main-content h2,
body.woocommerce-checkout #main-content h3,
body.woocommerce-account #main-content h1,
body.woocommerce-account #main-content h2,
body.woocommerce-account #main-content h3 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 500 !important;
  color: #2B241E !important;
}
/* Exception: the hero banner at the top of each of these templates is a Divi text module sitting on
   a dark photo background, marked et_pb_bg_layout_light -- Divi's own signal meaning "use light text
   here for contrast," which it already does correctly for the subtitle paragraph below the heading.
   The blanket dark-text rule above (meant for headings on the cream #F8F2E6 content background, e.g.
   the shop grid) was also catching this hero h1 with !important, forcing dark text onto a dark green
   jungle photo and making it unreadable. Respect Divi's own contrast signal here instead of fighting it. */
body.woocommerce-shop #main-content .et_pb_bg_layout_light h1,
body.single-product #main-content .et_pb_bg_layout_light h1,
body.woocommerce-cart #main-content .et_pb_bg_layout_light h1,
body.woocommerce-checkout #main-content .et_pb_bg_layout_light h1,
body.woocommerce-account #main-content .et_pb_bg_layout_light h1 {
  color: #FFFFFF !important;
}

/* Shop/category grid cards + related/up-sell product cards on the PDP */
body.woocommerce-shop ul.products li.product,
body.single-product .related.products ul.products li.product,
body.single-product .up-sells ul.products li.product {
  background: #FFFFFF;
  border: 1px solid #E6D9C2;
  border-radius: 6px;
  padding: 16px !important;
  margin-bottom: 24px;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
body.woocommerce-shop ul.products li.product:hover,
body.single-product .related.products ul.products li.product:hover,
body.single-product .up-sells ul.products li.product:hover {
  box-shadow: 0 8px 24px rgba(43,36,30,0.12);
  transform: translateY(-3px);
  border-color: #D9BE7C;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Fraunces', Georgia, serif !important;
  color: #2B241E !important;
  font-size: 17px !important;
  font-weight: 500 !important;
}
.woocommerce ul.products li.product span.onsale,
.woocommerce div.product span.onsale {
  background: #B4592E !important;
  color: #FFFFFF !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
/* Divi's per-page cached CSS (wp-content/et-cache/<page-id>/et-core-unified-*.min.css) sets its own
   !important price color with high selector specificity -- matched here rather than fought, same
   lesson as the existing ct-wc-notice-fix comment above in functions.php. */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price ins,
.woocommerce div.product .summary .price,
.woocommerce div.product .summary .price ins,
.woocommerce .related.products ul.products li.product .price,
.woocommerce .up-sells ul.products li.product .price,
/* Single-product page is a Divi Theme Builder template (et_pb_wc_price module) -- no .summary
   wrapper exists there at all, it's a bare p.price, which the rules above never matched. */
.woocommerce div.product p.price,
.woocommerce div.product p.price ins {
  color: #B4592E !important;
  font-weight: 600 !important;
  text-decoration: none;
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product .summary .price del,
.woocommerce div.product p.price del {
  color: #9C8F7E !important;
  opacity: 0.8;
}

/* Add to cart -- shop grid, related products, up-sells, and the single-product buy button */
.woocommerce a.button.product_type_simple,
.woocommerce a.add_to_cart_button,
.woocommerce .single_add_to_cart_button,
/* The single-product page is rendered via a Divi Theme Builder template, not the classic
   WooCommerce template -- its et_pb_wc_add_to_cart module injects its own inline !important
   button color with #page-container in the selector (effectively ID-level specificity), so a
   plain class selector above loses regardless of source order. Match that specificity tier. */
#page-container .et_pb_wc_add_to_cart .single_add_to_cart_button.button.alt {
  background: #2E4F3C !important;
  color: #F8F2E6 !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 600 !important;
  transition: background-color 0.15s ease;
}
.woocommerce a.button.product_type_simple:hover,
.woocommerce a.add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button:hover,
#page-container .et_pb_wc_add_to_cart .single_add_to_cart_button.button.alt:hover {
  background: #22392B !important;
  /* WooCommerce/Divi's own hover rule swaps padding to 0.3em 2em 0.3em 1em and adds a 2px border on
     hover (meant for the default theme's arrow-icon effect). That resizes the button the instant the
     cursor enters it, pushing the edge out from under the mouse -- it un-hovers, shrinks back, the
     mouse is inside again, and it flickers in a loop. Locking padding/border to the measured resting
     value (6px 20px, confirmed identical across shop grid, single-product, and related/up-sell
     buttons) stops the size change entirely. Using the literal px value rather than an em equivalent
     on purpose: these buttons don't all share one font-size context (Divi applies its button styles
     per-template), so an em value that happens to match on one page can silently drift on another. */
  padding: 6px 20px !important;
  border: none !important;
}
/* WooCommerce's core CSS only adds padding-top to the AJAX "View cart" link that appears next to
   Add to cart (no left margin at all -- it expects the theme to add spacing), so it was rendering
   flush against the button with no gap. */
.woocommerce ul.products li.product a.added_to_cart {
  margin-left: 10px !important;
}

/* Single product page */
body.single-product .product_title {
  font-family: 'Fraunces', Georgia, serif !important;
  color: #2B241E !important;
}
body.single-product .summary .price,
body.single-product .summary .price ins {
  color: #B4592E !important;
}
body.single-product .et_pb_tabs_controls li.et_pb_tab_active a,
body.single-product .woocommerce-tabs ul.tabs li.active a {
  color: #B4592E !important;
  border-bottom-color: #B4592E !important;
}
body.single-product .related.products h2,
body.single-product .up-sells h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  color: #2B241E !important;
}

/* Cart */
body.woocommerce-cart table.cart th {
  font-family: 'Work Sans', sans-serif !important;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #8A4A26 !important;
  border-bottom: 2px solid #E6D9C2 !important;
}
body.woocommerce-cart .cart_totals {
  background: #F3EADA !important;
  border: 1px solid #E6D9C2 !important;
  border-radius: 8px;
  padding: 20px !important;
}
body.woocommerce-cart .cart_totals h2 {
  font-family: 'Fraunces', Georgia, serif !important;
}
/* Update cart / Apply coupon: same hover-flicker bug as the shop grid's Add to cart buttons above --
   WooCommerce's own hover rule resizes the button's padding (and, for Apply coupon, adds a border
   where none existed) to make room for an arrow icon the default theme draws on hover. Divi never
   draws that icon, so the box just resizes under the cursor, which pushes the edge out from under
   the mouse, un-hovers it, shrinks it back, and the mouse is inside it again -- flicker loop. Locking
   padding/border to the unchanged base values (read from the live computed styles) stops the resize. */
body.woocommerce-cart button[name="update_cart"]:hover {
  padding: 6px 20px !important;
}
body.woocommerce-cart button[name="apply_coupon"]:hover {
  padding: 5.4px 18px !important;
  border-width: 0 !important;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-checkout #place_order {
  background: #B4592E !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 600 !important;
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-checkout #place_order:hover {
  background: #9A4A24 !important;
  /* Same flicker fix as above: lock the hover padding to match the base rule (border is already
     neutralized by border: none !important on both states, so only padding could still jump). */
  padding: 6px 20px !important;
  border: none !important;
}
/* Every other My Account form button (lost/reset password, edit-account save, address save, etc.)
   has the same WooCommerce hover-padding jump as the login button above, even though the brand
   colors/border above only target the login and register forms specifically. Scoped to padding only
   (not border) so a button that still has its default outlined look keeps it -- the outline's width
   doesn't change on hover here, only its color fades, so it was never the source of the flicker. */
body.woocommerce-account .woocommerce-Button:hover,
body.woocommerce-account button[type="submit"]:hover {
  padding: 6px 20px !important;
}

/* Checkout */
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout #customer_details h3 {
  font-family: 'Fraunces', Georgia, serif !important;
  color: #2B241E !important;
}
body.woocommerce-checkout .woocommerce-input-wrapper input:focus,
body.woocommerce-checkout .woocommerce-input-wrapper select:focus,
body.woocommerce-checkout .woocommerce-input-wrapper textarea:focus {
  outline: 2px solid #2E4F3C;
  outline-offset: 1px;
}

/* My Account login/forms */
body.woocommerce-account .woocommerce-form-login .button,
body.woocommerce-account .woocommerce-form-register .button {
  background: #B4592E !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 600 !important;
}
body.woocommerce-account .woocommerce-form-login .button:hover,
body.woocommerce-account .woocommerce-form-register .button:hover {
  background: #9A4A24 !important;
  /* Same hover-flicker fix as the add to cart / cart / checkout buttons above: WooCommerce's own hover
     rule pads out the right side (20px -> 40px here) to make room for an arrow icon Divi doesn't draw,
     resizing the button under the cursor. Locking padding to the base value stops the jump. */
  padding: 6px 20px !important;
  border: none !important;
}