/* ==========================================================================
   WooCommerce styling overrides
   ========================================================================== */

/* ==========================================================================
   Auto-expanded product tabs
   Hide the tab nav, show all tab panels as stacked sections.
   Pure CSS — no PHP hooks touched. Safe against tab plugins that register
   callbacks expecting WC's exact rendering context.
   ========================================================================== */

/* Hide the tab navigation list */
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: none !important;
}

/* Show ALL tab panels — overrides WC's JS that hides inactive panels.
   WC's .hide() sets inline `style="display:none"` without !important,
   so our !important wins the cascade. */
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs .wc-tab,
.woocommerce div.product .woocommerce-tabs > .woocommerce-Tabs-panel {
  display: block !important;
  margin: 0 !important;
}

/* Outer wrapper spacing */
.woocommerce div.product .woocommerce-tabs {
  margin-top: var(--space-2xl) !important;
}

/* Each panel = its own section, separated by a top border */
.woocommerce div.product .woocommerce-tabs > .panel,
.woocommerce div.product .woocommerce-tabs > .woocommerce-Tabs-panel {
  padding: var(--space-xl) 0 !important;
  border-top: 1px solid var(--color-border);
}

.woocommerce div.product .woocommerce-tabs > .panel:first-of-type,
.woocommerce div.product .woocommerce-tabs > .woocommerce-Tabs-panel:first-of-type {
  border-top: none;
  padding-top: 0 !important;
}

/* Section headings — WC outputs <h2> inside each panel by default */
.woocommerce div.product .woocommerce-tabs h2,
.woocommerce div.product .woocommerce-tabs .woocommerce-Reviews-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--color-green-dark);
  margin: 0 0 var(--space-md);
  letter-spacing: -0.01em;
  padding-bottom: 0.5rem;
  position: relative;
}

/* Decorative accent under each section heading */
.woocommerce div.product .woocommerce-tabs > .panel > h2::after,
.woocommerce div.product .woocommerce-tabs > .woocommerce-Tabs-panel > h2::after,
.woocommerce div.product .woocommerce-tabs .woocommerce-Reviews-title::after {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  background: var(--color-pink);
  border-radius: 999px;
  margin-top: 0.6rem;
}

/* Body text inside panels */
.woocommerce div.product .woocommerce-tabs p {
  line-height: 1.7;
  color: var(--color-text);
  margin: 0 0 1em;
}

.woocommerce div.product .woocommerce-tabs p:last-child { margin-bottom: 0; }

/* Additional info attributes table */
.woocommerce div.product .woocommerce-tabs .shop_attributes {
  width: 100%;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin: 0;
}

.woocommerce div.product .woocommerce-tabs .shop_attributes th {
  font-weight: 500;
  color: var(--color-green-dark);
  background: rgba(243, 214, 214, 0.35);
  padding: 0.85rem var(--space-md);
  text-align: left;
  width: 35%;
  border-bottom: 1px solid var(--color-border);
}

.woocommerce div.product .woocommerce-tabs .shop_attributes td {
  padding: 0.85rem var(--space-md);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.woocommerce div.product .woocommerce-tabs .shop_attributes tr:last-child th,
.woocommerce div.product .woocommerce-tabs .shop_attributes tr:last-child td {
  border-bottom: none;
}

/* Allow anchor jumps from rating link to land below the sticky header */
.woocommerce div.product #reviews,
.woocommerce div.product #tab-reviews,
.woocommerce div.product .woocommerce-tabs > .panel {
  scroll-margin-top: 90px;
}

/* WC page wrapper — proper vertical spacing for shop/product/category */
.woocommerce-page-wrap {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

/* Defensive: hide any WC sidebar that slips through */
.woocommerce-sidebar,
#secondary,
.widget-area.woocommerce-sidebar { display: none !important; }

/* Make WC main content take full width once sidebar is gone */
.woocommerce #content,
.woocommerce-page #content,
.woocommerce .content-area,
.woocommerce-page .content-area {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

/* ==========================================================================
   Product rating (works for stock WC + Customer Reviews for WooCommerce)
   ========================================================================== */
.woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 0.75rem !important;
  font-size: 0.95rem;
}

.woocommerce-product-rating .star-rating {
  font-size: 1.05em; /* slightly larger stars */
  letter-spacing: 0.05em;
  width: 5.8em;
}

.woocommerce-product-rating .star-rating::before,
.star-rating::before {
  color: var(--color-border, #E8DFCF) !important; /* empty stars: subtle tan */
}

.woocommerce-product-rating .star-rating span::before,
.star-rating span::before {
  color: #D4A574 !important; /* filled stars: warm gold, fits brand */
}

.woocommerce-review-link {
  color: var(--color-green-dark, #3D5439);
  font-size: 0.9rem;
  text-decoration: underline;
  text-decoration-color: var(--color-border, #E8DFCF);
  text-underline-offset: 3px;
  transition: color var(--transition, 200ms ease);
}

.woocommerce-review-link:hover,
.woocommerce-review-link:focus {
  color: var(--color-green, #4F6B4A);
  text-decoration-color: var(--color-green, #4F6B4A);
}

.woocommerce-review-link .count {
  font-weight: 500;
}

/* ==========================================================================
   Reviews tab content + CR for WC review list
   ========================================================================== */
.woocommerce-Reviews,
.commentlist,
ol.commentlist {
  list-style: none;
  padding: 0;
}

.woocommerce #reviews #comments h2,
.woocommerce-Reviews-title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.4rem;
  color: var(--color-green-dark, #3D5439);
  margin: 0 0 1rem;
}

.commentlist li.comment,
.woocommerce #reviews .comment {
  background: var(--color-white, #fff);
  border: 1px solid var(--color-border, #E8DFCF);
  border-radius: var(--radius-md, 12px);
  padding: 1.1rem 1.2rem;
  margin: 0 0 0.8rem;
  list-style: none;
}

.comment-text { margin: 0 !important; }

.woocommerce #reviews .meta {
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
  color: var(--color-text-soft, #5C5C5C);
}

.woocommerce #reviews .meta strong { color: var(--color-green-dark, #3D5439); }

/* Review form */
#review_form_wrapper,
.cr-review-form,
.ivole-form {
  background: var(--color-cream, #FAF4EA);
  border: 1px solid var(--color-border, #E8DFCF);
  border-radius: var(--radius-md, 12px);
  padding: 1.25rem 1.4rem;
  margin-top: 1.5rem;
}

#review_form .comment-form-rating { margin-bottom: 0.8rem; }

#review_form input[type="text"],
#review_form input[type="email"],
#review_form textarea {
  background: var(--color-white, #fff);
}

#review_form input[type="submit"],
.ivole-form input[type="submit"] {
  background-color: var(--color-green, #4F6B4A) !important;
  color: var(--color-white, #fff) !important;
  border: none;
  padding: 0.85em 2em !important;
  border-radius: 999px !important;
  font-weight: 500;
}

/* ==========================================================================
   Shop loop star rating (for grid/featured product cards)
   ========================================================================== */
.woocommerce ul.products li.product .star-rating {
  margin: 0 var(--space-md) 0.4rem !important;
  font-size: 0.85em;
}

/* Shop / archive page header — title + breadcrumb */
.woocommerce-products-header {
  margin-bottom: var(--space-lg);
}

.woocommerce-products-header__title {
  margin: 0 0 0.4rem !important;
}

/* Breadcrumb in its new spot under the title — smaller, subtle */
.woocommerce-products-header .woocommerce-breadcrumb {
  font-size: 0.9rem;
  color: var(--color-text-soft, #5C5C5C);
  margin: 0 0 var(--space-md);
  padding: 0;
}

.woocommerce-products-header .woocommerce-breadcrumb a {
  color: var(--color-text-soft, #5C5C5C);
  text-decoration: underline;
  text-decoration-color: var(--color-border, #E8DFCF);
  text-underline-offset: 3px;
  transition: color var(--transition, 200ms ease);
}

.woocommerce-products-header .woocommerce-breadcrumb a:hover,
.woocommerce-products-header .woocommerce-breadcrumb a:focus {
  color: var(--color-green-dark, #3D5439);
  text-decoration-color: var(--color-green-dark, #3D5439);
}

/* Shop / archive pages */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  list-style: none;
  margin: 0 0 var(--space-xl);
  padding: 0;
}

/* Neutralize WooCommerce's legacy clearfix pseudo-elements on ul.products.
   WC adds ::before and ::after with `display: table` for float-based layouts.
   When we force `display: grid` on the ul, those pseudos become grid items,
   claiming the first and last grid cells and shifting all real products. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none !important;
  display: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition), box-shadow var(--transition);
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.woocommerce ul.products li.product a img {
  margin: 0 !important;
  border-radius: 0 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-heading) !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  color: var(--color-green-dark) !important;
  padding: var(--space-sm) var(--space-md) 0 !important;
}

.woocommerce ul.products li.product .price {
  display: block;
  padding: 0 var(--space-md) var(--space-md);
  color: var(--color-text) !important;
  font-weight: 500;
}

.woocommerce ul.products li.product .button {
  display: none !important; /* Hide loop add-to-cart, force product page visit */
}

@media (min-width: 700px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
}

@media (min-width: 1000px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Single product page */
.single-product div.product {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

/* Grid items have an implicit minimum size of their content — without
   min-width: 0 a long product title or wide image can force the grid wider
   than its container, which removes the side margins on mobile. */
.single-product div.product > * {
  min-width: 0;
  max-width: 100%;
}

/* Constrain the WC product gallery + its images (the gallery slider sets
   inline widths that can briefly exceed the container on mobile) */
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery img,
.single-product .flex-viewport,
.single-product .flex-control-thumbs {
  max-width: 100% !important;
  box-sizing: border-box;
}

.single-product .woocommerce-product-gallery img {
  height: auto !important;
}

@media (min-width: 800px) {
  .single-product div.product {
    grid-template-columns: 1fr 1fr;
  }

  /* Full-width sections below gallery + summary. */
  .single-product div.product > .woocommerce-tabs,
  .single-product div.product > .related,
  .single-product div.product > .upsells,
  .single-product div.product > .cross-sells,
  .single-product div.product > #reviews {
    grid-column: 1 / -1;
  }
}

/* Add visual breathing room above each full-width section */
.single-product .woocommerce-tabs,
.single-product .related,
.single-product .upsells {
  margin-top: var(--space-md);
}

/* Style the section heading consistently */
.single-product .related > h2,
.single-product .upsells > h2,
.single-product .cross-sells > h2 {
  margin-bottom: var(--space-lg);
}

.single-product .product .images,
.single-product .product .woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.single-product .product .summary,
.single-product .product .entry-summary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.single-product .product_title {
  font-family: var(--font-heading);
  margin-bottom: var(--space-sm);
}

.single-product .price {
  font-size: 1.5rem !important;
  color: var(--color-green-dark) !important;
  margin-bottom: var(--space-md) !important;
}

.single-product .woocommerce-product-details__short-description {
  color: var(--color-text-soft);
  margin-bottom: var(--space-lg);
}

/* WC notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background-color: var(--color-pink) !important;
  border-top-color: var(--color-green) !important;
  color: var(--color-text) !important;
  border-radius: var(--radius-sm);
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--color-green) !important;
}

/* Cart & checkout */
.woocommerce table.shop_table {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-white);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-color: var(--color-border) !important;
  padding: var(--space-md) !important;
}

.woocommerce-cart-form__contents,
.cart_totals {
  margin-bottom: var(--space-lg);
}

/* Mobile: let wide tables scroll horizontally inside their container
   instead of forcing the entire page to scroll */
@media (max-width: 599px) {
  .woocommerce-cart-form,
  .woocommerce-checkout-review-order-table-wrapper,
  .woocommerce-MyAccount-content {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td {
    padding: var(--space-sm) !important;
  }
}

/* Quantity input */
.woocommerce .quantity .qty {
  width: 80px;
  text-align: center;
}

/* Add to cart button on product page */
.single-product .single_add_to_cart_button {
  display: inline-block !important;
  background-color: var(--color-green) !important;
  color: var(--color-white) !important;
  padding: 1em 2.5em !important;
  border-radius: 999px !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  border: none !important;
  cursor: pointer;
  transition: background-color var(--transition), transform var(--transition);
}

.single-product .single_add_to_cart_button:hover {
  background-color: var(--color-green-dark) !important;
  transform: translateY(-1px);
}

/* Breadcrumbs */
.woocommerce-breadcrumb {
  font-size: 0.85rem;
  color: var(--color-text-soft);
  margin-bottom: var(--space-md) !important;
}