/* ========================================================================
   WooCommerce styling pass — brings shop/product pages in line with the
   parity build's look (Windsor headings, ink borders, clay buttons).
   Scoped to .woocommerce so it only touches shop-related markup.
   Sep 2026 parity build.
   ======================================================================== */

/* Gallery thumbnail strip — Kadence's own default gives it
   margin-top:-32px, which live doesn't (confirmed margin-top:0 there) —
   it was pulling the thumbnails up to overlap the bottom of the main
   product photo instead of sitting cleanly below it. */
.woocommerce div.product .flex-control-thumbs {
  margin-top: 0 !important;
}

.woocommerce div.product .product_title,
.woocommerce div.product .entry-title {
  font-family: "Windsor", Georgia, serif;
  font-weight: 400;
  color: var(--jth-ink);
}

/* Kadence's ".content-bg" utility paints Kadence's own near-white theme
   background (#fbf9f6) on both the single-product content wrapper and
   every shop-archive product card — clashing with our warmer sand/cream
   palette. Override it wherever it shows up inside WooCommerce. */
body.woocommerce-page,
body.single-product {
  background: var(--jth-sand) !important;
}
.woocommerce .content-bg,
.woocommerce-page .content-bg {
  background: var(--jth-sand) !important;
}
.woocommerce ul.products li.product {
  box-shadow: none;
}
/* The breadcrumb strip above the product sits in its own ".entry-hero"
   wrapper, separate from ".content-bg" — still defaults to Kadence's
   near-white. */
body.single-product .entry-hero {
  background: var(--jth-sand) !important;
}

/* Shop archive: use Kadence's "always visible" product actions instead of
   its hover-reveal panel — the hover version slides the title/price block
   up while a separate action panel fades in from behind, and for products
   with taller action content (e.g. a vendor "Sold By" line plus "Read
   More" instead of a single-line Add to Cart) the two overlap instead of
   swapping cleanly. Always-visible avoids the animation entirely and
   works on touch, where hover doesn't. Set via theme mod
   'product_archive_style' = 'action-visible'; this just matches its look
   to the rest of the site. */
.woo-archive-action-visible .product-action-wrap {
  margin-top: 8px;
}
.woo-archive-action-visible .product-action-wrap .button,
.woo-archive-action-visible .product-action-wrap .added_to_cart {
  font-family: "Windsor", Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jth-clay);
}

.woocommerce-breadcrumb {
  font-size: 13px;
  color: rgba(29,19,15,0.6);
}
.woocommerce-breadcrumb a {
  color: rgba(29,19,15,0.6);
  text-decoration: underline;
}
.woocommerce-breadcrumb a:hover {
  color: var(--jth-ink);
}

/* Price */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce .wc-bookings-booking-cost.price {
  color: var(--jth-clay);
  font-family: "Windsor", Georgia, serif;
}

/* Booking form / quantity fields — bordered, ink, Windsor, no browser default chrome */
.woocommerce div.product form.cart .quantity input.qty,
.wc-bookings-booking-form input[type="number"],
.wc-bookings-booking-form input[type="text"],
.wc-bookings-booking-form select,
.wc-bookings-booking-form .wc-bookings-date-picker {
  border: 1px solid var(--jth-ink);
  border-radius: 2px;
  background: transparent;
  font-family: "Windsor", Georgia, serif;
  color: var(--jth-ink);
  padding: 10px 12px;
  appearance: none;
  -webkit-appearance: none;
}
.wc-bookings-booking-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231D130F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.wc-bookings-booking-form label {
  font-family: "Windsor", Georgia, serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--jth-ink);
}

/* Buttons — same filled-clay treatment as the rest of the site. Rich
   flagged the single-product "Book Now"/"Add to Cart" as too small —
   confirmed against live: 18px text, full-width-ish block button (390px
   in a 470px column), not our small 12px inline pill. Sized up and made
   block/full-width, scoped to div.product (single product) so the tiny
   shop-archive quick-add buttons elsewhere aren't affected. */
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,
.single_add_to_cart_button.button,
.wc-bookings-booking-form-button {
  appearance: none;
  -webkit-appearance: none;
  background: var(--jth-clay) !important;
  color: var(--jth-sand-light) !important;
  border: none !important;
  border-radius: 2px;
  font-family: "Windsor", Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 16px 20px;
  width: 100%;
  cursor: pointer;
  transition: background 0.2s ease;
  /* WooCommerce Bookings forces a fixed height (40px) via its own JS/CSS
     with line-height matching that height — but our 14px top+bottom
     padding only leaves 12px of content box under box-sizing:border-box,
     so the tall line-height overflows the squeezed box unevenly instead
     of centering the text. Flex-center it directly so it's centered
     regardless of whatever height gets imposed on the button. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce #respond input#submit:hover,
.single_add_to_cart_button.button:hover,
.wc-bookings-booking-form-button:hover {
  background: var(--jth-clay-dark) !important;
}
.wc-bookings-booking-form-button.disabled,
.wc-bookings-booking-form-button:disabled {
  /* Live's own disabled state is just the real button color at reduced
     opacity (confirmed via computed styles) — WooCommerce Bookings' JS
     already applies opacity:0.5 to `.disabled` itself, so a solid
     background here was being double-dimmed by an rgba alpha stacked on
     top of that — much more washed out than intended. Solid color only. */
  background: var(--jth-clay) !important;
  cursor: not-allowed;
}

/* Product meta / short description text */
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(29,19,15,0.85);
}
/* Live actually HIDES "Sold By:", "Category:", "Tag:" entirely on the
   product page — checked via computed display, not just styling: its
   own .product_meta is present in the DOM but empty/collapsed (block,
   height:0), and .wcpv-sold-by-single is display:none outright. I'd
   previously only fixed their font-weight/color, which was still wrong —
   they shouldn't be visible at all. */
.woocommerce div.product .product_meta,
.woocommerce div.product .wcpv-sold-by-single,
.woocommerce div.product [class*="sold-by"],
.woocommerce div.product .wcfmmp_sold_by_wrapper {
  display: none !important;
}

/* Description tab content — live centers each paragraph in a 680px
   column (confirmed via computed margin: it uses a fixed left/right
   margin that happens to equal (container-width − 680) / 2 at that
   viewport, which is a hand-tuned value tied to one breakpoint; margin:
   auto achieves the same centered result and actually adapts across
   widths instead of being fragile to container width like a fixed
   pixel margin would be). Ours was rendering flush left — Kadence's own
   default caps .woocommerce-Tabs-panel at max-width:700px, which left
   almost no room either side of the 680px paragraph to center it in;
   freed that up to the tab wrapper's actual full width (976px here). */
.woocommerce div.product .woocommerce-Tabs-panel {
  max-width: none !important;
}
.woocommerce div.product #tab-description p,
.woocommerce div.product .woocommerce-Tabs-panel--description p,
.woocommerce div.product #tab-description ul,
.woocommerce div.product #tab-description ol,
.woocommerce div.product .woocommerce-Tabs-panel--description ul,
.woocommerce div.product .woocommerce-Tabs-panel--description ol {
  max-width: 680px;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Bullets should line up with the paragraph text above them, not hang
   further out toward the page edge — matched live's own measured
   padding-left:0 on this list (rather than the browser default ~40px
   indent), so the bullet markers sit right at the text column's edge. */
.woocommerce div.product #tab-description ul,
.woocommerce div.product .woocommerce-Tabs-panel--description ul {
  padding-left: 0;
}

/* Shop archive product titles/prices, same treatment */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: "Windsor", Georgia, serif;
  color: var(--jth-ink);
}
.woocommerce ul.products li.product .price {
  color: var(--jth-clay);
}

/* ── Shop archive — left-aligned title, 3 columns, flat cards with
   uppercase slate 18px titles, no result count / view toggle. ── */
body.post-type-archive-product .archive-title-wrap, body.tax-product_cat .archive-title-wrap { text-align: left; }
body.post-type-archive-product h1.page-title, body.post-type-archive-product .archive-title,
body.tax-product_cat h1.page-title {
  font-family: "Windsor", Georgia, "Times New Roman", serif !important;
  font-weight: 400; font-size: 36px; letter-spacing: 1px; text-align: left; color: var(--jth-ink);
}
body.post-type-archive-product .woocommerce-result-count,
body.post-type-archive-product .kadence-shop-toggle-view,
body.post-type-archive-product .kb-shop-view-toggle,
body.post-type-archive-product .woocommerce-breadcrumb { display: none !important; }
body.post-type-archive-product .woocommerce-ordering { margin-left: auto; }
body.post-type-archive-product ul.products {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 40px 36px !important; margin: 0 !important;
}
body.post-type-archive-product ul.products li.product { width: auto !important; margin: 0 !important; }
body.post-type-archive-product ul.products li.product img { border-radius: 0 !important; }
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
body.post-type-archive-product ul.products li.product h2 {
  font-size: 18px; font-weight: 700; text-transform: uppercase; color: #4F5E79; padding: 0; margin: 14px 0 8px;
}
body.post-type-archive-product ul.products li.product h2 a { color: #4F5E79; }
body.post-type-archive-product ul.products li.product .product-details,
body.post-type-archive-product ul.products li.product .entry-content-wrap { padding: 0 !important; }
body.post-type-archive-product ul.products li.product .price { font-size: 16px; color: var(--jth-ink); }
@media (max-width: 700px) { body.post-type-archive-product ul.products { grid-template-columns: 1fr 1fr !important; gap: 24px 16px !important; } }
body.post-type-archive-product .product-archive-title, body.post-type-archive-product .product-archive-title h1 { text-align: left !important; }
body.post-type-archive-product .kadence-product-toggle-container, body.post-type-archive-product .kadence-woo-toggle { display: none !important; }
body.post-type-archive-product .loop-entry.product, body.post-type-archive-product .loop-entry.product .post-thumbnail, body.post-type-archive-product .loop-entry.product img { border-radius: 0 !important; }
body.post-type-archive-product .loop-entry.product .product-details { padding: 0 !important; }
body.post-type-archive-product .loop-entry.product .product-action-wrap,
body.post-type-archive-product .loop-entry.product .product-loop-vendor,
body.post-type-archive-product .loop-entry.product .wcfm_sold_by_container,
body.post-type-archive-product .loop-entry.product [class*="sold-by"], body.post-type-archive-product .loop-entry.product .wcfmmp_sold_by_wrapper { display: none !important; }
body.woocommerce .product-archive-hero-section .entry-header, body.woocommerce .product-archive-hero-section .page-title, body.woocommerce .product-archive-hero-section .hero-container { text-align: left !important; justify-content: flex-start !important; }
body.post-type-archive-product ul.products li.product * { padding-left: 0 !important; padding-right: 0 !important; }
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title, body.post-type-archive-product ul.products li.product .price { margin-left: 0 !important; }
body.woocommerce .product-archive-hero-section .entry-header { width: 100% !important; margin: 0 !important; display: block !important; }
body.woocommerce .product-archive-hero-section .hero-container { width: 100%; }
body.woocommerce .product-archive-hero-section { padding: 40px 0 !important; min-height: 0 !important; }
body.woocommerce .product-archive-hero-section h1.page-title { text-align: left !important; margin: 0 !important; }
body.post-type-archive-product ul.products li.product { padding: 0 !important; }
body.post-type-archive-product ul.products li.product *:not(img) { margin-left: 0 !important; margin-right: 0 !important; }
body.post-type-archive-product .woocommerce-products-header { display: none !important; }
body.post-type-archive-product .kadence-shop-top-row { margin: 0 0 24px !important; }
body.post-type-archive-product .content-container, body.post-type-archive-product .site-main { padding-top: 0 !important; margin-top: 0 !important; }
body.woocommerce .product-archive-hero-section, body.woocommerce .product-archive-hero-section .entry-hero-container-inner, body.woocommerce .product-archive-hero-section .hero-container { min-height: 0 !important; height: auto !important; }
body.post-type-archive-product #primary { margin-top: 0 !important; }
body.woocommerce .product-archive-hero-section .entry-header { min-height: 0 !important; }

/* Shop sort dropdown — live: flat white box, thin hairline border, no
   radius, no native arrow chrome (their JS-enhanced "selectize" widget
   renders it that way) — ours was the plain unstyled browser <select>. */
body.post-type-archive-product .woocommerce-ordering select.orderby {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231D130F'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%231D130F' stroke-width='1.3' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center / 12px;
  border: 1px solid rgba(0,0,0,0.13);
  border-radius: 0;
  color: var(--jth-ink);
  font-size: 16.5px;
  padding: 12px 32px 12px 12px;
  min-width: 162px;
  cursor: pointer;
}
body.post-type-archive-product .woocommerce-ordering select.orderby:focus { outline: none; border-color: rgba(0,0,0,0.3); }

/* ── Single product — live hides the breadcrumb entirely and renders the
   description tab's content directly with no tab strip, no "Description"
   heading, and no boxed panel. Ours showed a visible breadcrumb, a
   clickable tab strip, a duplicate "Description" h2, and a boxed panel. ── */
body.single-product .woocommerce-breadcrumb, body.single-product .kadence-breadcrumbs { display: none !important; }
body.single-product .woocommerce-tabs ul.tabs { display: none !important; }
body.single-product .woocommerce-tabs .panel > h2:first-child { display: none !important; }
body.single-product .woocommerce-tabs .panel,
body.single-product .woocommerce-tabs {
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
}

/* ── WooCommerce Bookings calendar — live: gold header bar with uppercase
   ink month/year, cream weekday row with mauve text. Ours used the
   plugin's plain default (white header, gray weekday row). ── */
.wc-bookings-date-picker .ui-datepicker-header {
  background: var(--jth-gold);
  color: var(--jth-ink);
}
.wc-bookings-date-picker .ui-datepicker-title {
  font-family: "Windsor", Georgia, serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--jth-ink);
}
/* Live's prev/next controls are plain icon buttons — no gray box — ink
   colored arrow, transparent background, no border. Kadence/jQuery UI's
   own default paints them as a solid gray square button. */
.wc-bookings-date-picker .ui-datepicker-prev,
.wc-bookings-date-picker .ui-datepicker-next {
  background: transparent !important;
  border: 0 !important;
  color: var(--jth-ink);
}
/* NOTE: left the .ui-icon sprite itself alone — an earlier pass here
   stripped its background-image (the actual arrow glyph) and reset its
   text-indent, which un-hid the raw "Previous"/"Next" label text jQuery
   UI keeps offscreen for accessibility. Only the button's own gray-box
   chrome needed removing. */
.wc-bookings-date-picker .ui-datepicker-calendar th {
  background: var(--jth-sand-light, #EDE6E0);
  color: #665452;
  font-weight: 400;
  text-transform: uppercase;
}
/* Day-availability colors — Rich flagged these twice: first that live's
   plugin-default bright two-tone green (see below) didn't match ours,
   then that the flat green I matched it to was still too bright and
   should be an olive that fits the brand instead of live's plugin
   default. Using this site's own configured secondary brand color
   (Kadence global palette color 2, --global-palette2: #8f9a84 — an
   olive/sage already set in this theme's customizer, not a guess) for
   available days, with a hand-darkened shade of the same olive for a
   selected range, rather than copying live's plugin-default green
   verbatim. (For reference, live's actual color — from its real
   WooCommerce Bookings 3.10.0 frontend.css, a newer version than this
   site's 3.4.0 — is a flat forest green #1F874B/#176D3B; noted here in
   case "match live exactly" ever takes priority over "match our brand"
   for this element.) */
.wc-bookings-date-picker .ui-datepicker-calendar td.bookable a,
.wc-bookings-date-picker .ui-datepicker-calendar td.partial_booked a {
  background-color: var(--global-palette2, #8f9a84) !important;
  background-image: none !important;
  color: #fff !important;
}
.wc-bookings-date-picker .ui-datepicker-calendar td.bookable-range a,
.wc-bookings-date-picker .ui-datepicker-calendar td.bookable-range .ui-state-default {
  background: #6E7860 !important;
  color: #fff !important;
}
.wc-bookings-date-picker .ui-datepicker-calendar td.fully_booked a {
  background-color: #792D2A !important;
  background-image: none !important;
  color: #fff !important;
  opacity: .75;
}

/* ── Cart (empty state) — live: small left-aligned gray notice box, plain
   black rectangular "Return to shop" button. Kadence's own defaults here
   rendered the notice as a large centered heading-style message with a
   rounded clay pill button — quite different from live. ── */
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .cart-empty {
  background: #F7F6F7 !important;
  color: var(--jth-ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 16px 32px 16px 56px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  text-align: left !important;
  max-width: none !important;
}
.woocommerce-cart .wc-empty-cart-message + p,
.woocommerce-cart a.wc-backward {
  text-align: left !important;
}
.woocommerce-cart a.wc-backward {
  display: inline-block;
  background: var(--jth-ink) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 12px 25px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.woocommerce-cart a.wc-backward:hover { background: rgba(29,19,15,0.85) !important; }