/* ============================================================
   WOOCOMMERCE OVERRIDES — custom-shop
   Styles WC output to match theme design. No template overrides.
   ============================================================ */

/* Ensure screen-reader text is hidden (fallback) */
.woocommerce .screen-reader-text,
.woocommerce-page .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------
   1. CONTAINERS & OVERFLOW
   Prevent WC elements from breaking layout
   -------------------------------------------------------------- */

.woocommerce,
.woocommerce-page {
  max-width: 100%;
  overflow-x: hidden;
}

.woocommerce .container,
.woocommerce-page .container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.woocommerce img,
.woocommerce-page img {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------
   2. BREADCRUMBS — .woocommerce-breadcrumb
   Map to theme .breadcrumb styles
   -------------------------------------------------------------- */

.breadcrumb .woocommerce-breadcrumb,
.woocommerce-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0;
  margin: 0;
  background: none;
}

.woocommerce-breadcrumb a {
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
  color: var(--color-text);
}

/* --------------------------------------------------------------
   3. ARCHIVE / SHOP — Product loop, result count, ordering
   -------------------------------------------------------------- */

/* Catalog topbar (result count + ordering) - uses existing .catalog-topbar from theme */
.catalog-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--space-8);
}

.catalog-topbar .woocommerce-message,
.catalog-topbar .woocommerce-info,
.catalog-topbar .woocommerce-error {
  flex-basis: 100%;
  margin-bottom: 0;
}

.woocommerce-products-header,
.woocommerce-result-count,
.woocommerce-ordering {
  margin-bottom: 0;
}

.woocommerce-result-count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.woocommerce-ordering .orderby {
  font-size: var(--text-sm);
  font-weight: 500;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  background-color: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A756E' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}

.woocommerce-ordering label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-right: var(--space-3);
}

/* Neutralize WC ::before/::after on ul.products (clearfix breaks CSS grid) */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none !important;
  display: none !important;
}

/* Product loop / grid — override WC columns, ensure full width */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products.products-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  width: 100%;
}

@media (min-width: 640px) {
  .woocommerce ul.products.products-grid--3,
  .woocommerce-page ul.products.products-grid--3,
  ul.products.products-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .woocommerce ul.products.products-grid--4,
  .woocommerce-page ul.products.products-grid--4,
  ul.products.products-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .woocommerce ul.products.products-grid--3,
  .woocommerce-page ul.products.products-grid--3,
  ul.products.products-grid--3 {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }

  .woocommerce ul.products.products-grid--4,
  .woocommerce-page ul.products.products-grid--4,
  ul.products.products-grid--4 {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product {
  list-style: none;
  margin: 0;
  width: 100%;
  min-width: 0;
}

/* Product cards in grid — ensure consistent layout */
.woocommerce ul.products li.product .product-card__image-wrap,
.woocommerce-page ul.products li.product .product-card__image-wrap,
ul.products li.product .product-card__image-wrap,
.woocommerce ul.products li.product a[href*="/product/"]:first-of-type,
ul.products li.product a[href*="/product/"]:first-of-type {
  display: block;
  width: 100%;
  overflow: hidden;
}

.woocommerce ul.products li.product .product-card__image-wrap img,
.woocommerce-page ul.products li.product .product-card__image-wrap img,
ul.products li.product .product-card__image-wrap img,
.woocommerce ul.products li.product .woocommerce-loop-product__link img,
ul.products li.product img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Price in loop */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins {
  text-decoration: none;
  color: var(--color-accent);
}

/* Sale badge — .onsale */
.woocommerce span.onsale,
.woocommerce-page span.onsale {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background-color: var(--color-accent);
  color: var(--color-surface);
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
}

/* Add to cart button in loop (archive, home, search) */
ul.products li.product a.button,
ul.products li.product button.button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product button.button,
.woocommerce-page ul.products li.product a.button,
.woocommerce-page ul.products li.product button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8125rem var(--space-8);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background-color: var(--color-text);
  color: var(--color-bg);
  border: var(--border-width) solid var(--color-text);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

ul.products li.product a.button:hover,
ul.products li.product button.button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product button.button:hover,
.woocommerce-page ul.products li.product a.button:hover,
.woocommerce-page ul.products li.product button.button:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-bg);
}

/* Link "Ver carrito" (added_to_cart) — mismo formato que el botón, en verde */
ul.products li.product a.added_to_cart.wc-forward,
.woocommerce ul.products li.product a.added_to_cart.wc-forward,
.woocommerce-page ul.products li.product a.added_to_cart.wc-forward {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-2);
  padding: 0.8125rem var(--space-8);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background-color: #16a34a;
  color: #fff;
  border: var(--border-width) solid #16a34a;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

ul.products li.product a.added_to_cart.wc-forward:hover,
.woocommerce ul.products li.product a.added_to_cart.wc-forward:hover,
.woocommerce-page ul.products li.product a.added_to_cart.wc-forward:hover {
  background-color: #15803d;
  border-color: #15803d;
  color: #fff;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination,
.woocommerce-page nav.woocommerce-pagination {
  padding-top: var(--space-12);
}

.woocommerce nav.woocommerce-pagination ul,
.woocommerce-page nav.woocommerce-pagination ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-page nav.woocommerce-pagination ul li {
  list-style: none;
  margin: 0;
}

.woocommerce nav.woocommerce-pagination a,
.woocommerce nav.woocommerce-pagination span,
.woocommerce-page nav.woocommerce-pagination a,
.woocommerce-page nav.woocommerce-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.woocommerce nav.woocommerce-pagination a:hover,
.woocommerce-page nav.woocommerce-pagination a:hover {
  border-color: var(--color-text);
}

.woocommerce nav.woocommerce-pagination span.current,
.woocommerce-page nav.woocommerce-pagination span.current {
  background-color: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

/* Sidebar — container (catalog/archive) */
.catalog-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Cada bloque en su propia card: fondo blanco semitransparente + borde tipo card */
.catalog-sidebar .sidebar-widget-card,
.woocommerce .catalog-sidebar .sidebar-widget-card,
.woocommerce-page .catalog-sidebar .sidebar-widget-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 222, 217, 0.8);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 1px 4px rgba(26, 23, 20, 0.05);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.catalog-sidebar .sidebar-widget-card:hover,
.woocommerce .catalog-sidebar .sidebar-widget-card:hover,
.woocommerce-page .catalog-sidebar .sidebar-widget-card:hover {
  box-shadow: 0 2px 8px rgba(26, 23, 20, 0.06);
}

/* Widget dentro de la card */
.catalog-sidebar .sidebar-widget-card .widget,
.woocommerce .catalog-sidebar .sidebar-widget-card .widget,
.woocommerce-page .catalog-sidebar .sidebar-widget-card .widget {
  margin: 0;
  padding: 0;
  border: none;
}

.catalog-sidebar .widget,
.woocommerce .catalog-sidebar .widget,
.woocommerce-page .catalog-sidebar .widget {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.catalog-sidebar .widget:last-child,
.woocommerce .catalog-sidebar .widget:last-child,
.woocommerce-page .catalog-sidebar .widget:last-child {
  margin-bottom: 0;
}

/* Títulos más suaves */
.catalog-sidebar .widget_title,
.woocommerce .catalog-sidebar .widget_title,
.woocommerce-page .catalog-sidebar .widget_title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  padding-left: var(--space-3);
  border-left: 2px solid rgba(181, 137, 90, 0.35);
}

.catalog-sidebar .widget ul,
.woocommerce .catalog-sidebar .widget ul,
.woocommerce-page .catalog-sidebar .widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.catalog-sidebar .widget li,
.woocommerce .catalog-sidebar .widget li,
.woocommerce-page .catalog-sidebar .widget li {
  margin-bottom: var(--space-2);
  padding: 0;
  border: none;
}

.catalog-sidebar .widget li::before {
  display: none;
}

/* Enlaces discretos */
.catalog-sidebar .widget a,
.woocommerce .catalog-sidebar .widget a,
.woocommerce-page .catalog-sidebar .widget a {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
  display: block;
  padding: var(--space-2) 0;
  line-height: var(--leading-snug);
}

.catalog-sidebar .widget a:hover,
.woocommerce .catalog-sidebar .widget a:hover,
.woocommerce-page .catalog-sidebar .widget a:hover {
  color: var(--color-text);
}

/* Product categories: count más discreto */
.catalog-sidebar .product-categories .count,
.woocommerce .catalog-sidebar .product-categories .count,
.catalog-sidebar .widget .count,
.woocommerce .catalog-sidebar .widget .count {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-weight: 400;
  margin-left: var(--space-2);
  opacity: 0.85;
}

/* Search widget — lupa al lado del input (dentro del mismo bloque) */
.catalog-sidebar .woocommerce-product-search--inline .woocommerce-product-search__inner {
  position: relative;
  display: flex;
  align-items: center;
}

.catalog-sidebar .woocommerce-product-search .search-field,
.catalog-sidebar .widget_search .search-field,
.woocommerce .catalog-sidebar .woocommerce-product-search .search-field,
.woocommerce .catalog-sidebar .product_search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: var(--space-3) 40px var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  border: 1px solid rgba(226, 222, 217, 0.8);
  border-radius: var(--radius-sm);
  background: rgba(247, 245, 242, 0.5);
  color: var(--color-text);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.catalog-sidebar .woocommerce-product-search .search-field:focus,
.catalog-sidebar .widget_search .search-field:focus,
.woocommerce .catalog-sidebar input[type="search"]:focus {
  border-color: rgba(181, 137, 90, 0.5);
  background: rgba(255, 255, 255, 0.9);
  outline: none;
}

/* Botón lupa — posicionado a la derecha del input */
.catalog-sidebar .woocommerce-product-search .search-submit {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  padding: 0;
  background: none;
  color: var(--color-text-muted);
  border: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.catalog-sidebar .woocommerce-product-search .search-submit:hover {
  color: var(--color-text);
}

/* Fallback para widget_search estándar */
.catalog-sidebar .widget_search form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.widget_product_search{
    padding-bottom:15px !important;
}
.price_label{
  display: inline-block !important;
}
.catalog-sidebar .widget_search .search-submit,
.woocommerce .catalog-sidebar .product_search .search-submit {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: rgba(26, 23, 20, 0.08);
  color: var(--color-text-muted);
  border: 1px solid rgba(226, 222, 217, 0.8);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.catalog-sidebar .widget_search .search-submit:hover,
.woocommerce .catalog-sidebar .product_search .search-submit:hover {
  color: var(--color-text);
  background: rgba(26, 23, 20, 0.12);
}

/* Nested categories */
.catalog-sidebar .product-categories .children,
.woocommerce .catalog-sidebar .product-categories .children {
  margin-top: var(--space-2);
  margin-left: var(--space-4);
  padding-left: var(--space-4);
  border-left: 1px solid rgba(226, 222, 217, 0.5);
}

/* Fallback for widgets outside catalog-sidebar */
.woocommerce .widget,
.woocommerce-page .widget {
  margin-bottom: var(--space-8);
}

.woocommerce .widget_title,
.woocommerce-page .widget_title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.woocommerce .widget ul,
.woocommerce-page .widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce .widget li,
.woocommerce-page .widget li {
  margin-bottom: var(--space-3);
}

.woocommerce .widget a,
.woocommerce-page .widget a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.woocommerce .widget a:hover,
.woocommerce-page .widget a:hover {
  color: var(--color-accent);
}

/* --------------------------------------------------------------
   4. SINGLE PRODUCT
   -------------------------------------------------------------- */

.section--product {
  padding-block: var(--space-20);
}

.woocommerce div.product,
.woocommerce-page div.product {
  margin-bottom: 0;
}

.woocommerce div.product .summary,
.woocommerce-page div.product .summary {
  margin: 0;
}

/* Single product price */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce-page div.product p.price,
.woocommerce-page div.product span.price {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
  text-decoration: none;
  color: var(--color-accent);
}

/* Single product title */
.woocommerce div.product .product_title,
.woocommerce-page div.product .product_title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}

/* Product meta (SKU, categories, tags) */
.woocommerce div.product .product_meta,
.woocommerce-page div.product .product_meta {
  display: block;
  width: 100%;
  max-width: 100%;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  padding-top: var(--space-6);
  margin-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
}

.woocommerce div.product .product_meta > span,
.woocommerce-page div.product .product_meta > span {
  display: block;
  margin-bottom: var(--space-2);
}

.woocommerce div.product .product_meta a,
.woocommerce-page div.product .product_meta a {
  color: var(--color-text);
  transition: color var(--transition-fast);
}

.woocommerce div.product .product_meta a:hover,
.woocommerce-page div.product .product_meta a:hover {
  color: var(--color-accent);
}

/* Add to cart single */
.woocommerce div.product form.cart,
.woocommerce-page div.product form.cart {
  margin-bottom: var(--space-6);
}

.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button,
.woocommerce-page div.product form.cart .button,
.woocommerce-page div.product .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.0625rem var(--space-10);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background-color: var(--color-text);
  color: var(--color-bg);
  border: var(--border-width) solid var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover,
.woocommerce-page div.product form.cart .button:hover,
.woocommerce-page div.product .single_add_to_cart_button:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-bg);
}

/* Quantity input — label "Cantidad:" + input on same line */
.woocommerce div.product form.cart .quantity,
.woocommerce-page div.product form.cart .quantity {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 48px;
}

.woocommerce div.product form.cart .quantity label,
.woocommerce-page div.product form.cart .quantity label {
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
  white-space: nowrap;
}

.woocommerce div.product form.cart .quantity input.qty {
  width: 52px;
  height: 100%;
  text-align: center;
  font-size: var(--text-base);
  font-weight: 600;
  border: none;
  border-left: var(--border-width) solid var(--color-border);
  border-right: var(--border-width) solid var(--color-border);
  background: transparent;
}

/* Product gallery — 100% of container (WC defaults to 48%) */
.woocommerce div.product .product-gallery,
.woocommerce div.product div.images,
.woocommerce-page div.product .product-gallery,
.woocommerce-page div.product div.images {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  float: none;
}

.woocommerce div.product .woocommerce-product-gallery,
.woocommerce-page div.product .woocommerce-product-gallery {
  margin-bottom: 0;
  width: 100% !important;
  max-width: 100%;
}

.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs,
.woocommerce-page div.product .woocommerce-product-gallery .flex-control-thumbs {
  width: 100%;
}

.woocommerce div.product .woocommerce-product-gallery img,
.woocommerce-page div.product .woocommerce-product-gallery img {
  border-radius: var(--radius-md);
}

/* Summary — override WC 48% so grid controls layout */
.woocommerce div.product .summary,
.woocommerce-page div.product .summary {
  width: 100%;
  float: none;
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs,
.woocommerce-page div.product .woocommerce-tabs {
  margin-top: var(--space-12);
  padding-top: var(--space-12);
  border-top: var(--border-width) solid var(--color-border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce-page div.product .woocommerce-tabs ul.tabs {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  gap: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  padding: var(--space-4) 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
  display: block;
  transition: color var(--transition-fast);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--color-text);
  border-bottom-color: var(--color-text);
}

.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce-page div.product .woocommerce-tabs .panel {
  margin: 0;
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce-page div.product .woocommerce-tabs .panel h2 {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 400;
  margin-bottom: var(--space-6);
}

.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce-page div.product .woocommerce-tabs .panel p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* Related / Upsells — full width below tabs, grid layout */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products,
.woocommerce-page div.product .woocommerce-tabs,
.woocommerce-page div.product .related.products,
.woocommerce-page div.product .upsells.products {
  grid-column: 1 / -1;
}

.woocommerce .related.products,
.woocommerce .upsells.products,
.woocommerce-page .related.products,
.woocommerce-page .upsells.products {
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: var(--border-width) solid var(--color-border);
}

.woocommerce .related.products ul.products,
.woocommerce .upsells.products ul.products,
.woocommerce-page .related.products ul.products,
.woocommerce-page .upsells.products ul.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .woocommerce .related.products ul.products,
  .woocommerce .upsells.products ul.products,
  .woocommerce-page .related.products ul.products,
  .woocommerce-page .upsells.products ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .woocommerce .related.products ul.products,
  .woocommerce .upsells.products ul.products,
  .woocommerce-page .related.products ul.products,
  .woocommerce-page .upsells.products ul.products {
    grid-template-columns: repeat(4, 1fr);
  }
}

.woocommerce .related.products ul.products li.product,
.woocommerce .upsells.products ul.products li.product,
.woocommerce-page .related.products ul.products li.product,
.woocommerce-page .upsells.products ul.products li.product {
  list-style: none;
  margin: 0;
}

.woocommerce .related.products h2,
.woocommerce .upsells.products h2,
.woocommerce-page .related.products h2,
.woocommerce-page .upsells.products h2 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  margin-bottom: var(--space-10);
}

/* --------------------------------------------------------------
   5. CART
   -------------------------------------------------------------- */

/* Cart page: main content contained like home */
.woocommerce-cart #main-content {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section--cart {
  padding-block: var(--space-24);
}

.cart-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-text);
  margin: 0;
}

.cart-subtitle {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.order-summary__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 400;
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border);
}

.order-summary .cart_totals h2 {
  display: none;
}

.woocommerce-cart-form .shop_table,
.woocommerce-cart-form .cart {
  margin-bottom: 0;
}

.woocommerce-cart-form .cart th,
.woocommerce-cart-form .cart td {
  padding: var(--space-6) 0;
  border-bottom: var(--border-width) solid var(--color-border);
  vertical-align: top;
}

.woocommerce-cart-form .cart thead th {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: var(--space-4);
}

.woocommerce-cart-form .cart .product-thumbnail img {
  width: 76px;
  height: 92px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.woocommerce-cart-form .cart .product-name a {
  font-weight: 500;
  color: var(--color-text);
}

.woocommerce-cart-form .cart .product-remove a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-text-muted);
  border-radius: 50%;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.woocommerce-cart-form .cart .product-remove a:hover {
  color: var(--color-error);
  background-color: rgba(192, 57, 43, 0.08);
}

/* Cart totals in sidebar */
.order-summary .cart_totals,
.woocommerce .cart_totals {
  margin-bottom: 0;
}

.order-summary .cart_totals h2,
.woocommerce .cart_totals h2 {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 400;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border);
}

.order-summary .cart_totals table,
.woocommerce .cart_totals table {
  border: none;
  margin: 0;
}

.order-summary .cart_totals table th,
.order-summary .cart_totals table td,
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
  border: none;
  padding: var(--space-3) 0;
  font-size: var(--text-base);
}

.order-summary .cart_totals .order-total th,
.order-summary .cart_totals .order-total td,
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
  border-top: var(--border-width) solid var(--color-border);
  margin-top: var(--space-3);
  padding-top: var(--space-5);
  font-size: var(--text-lg);
  font-weight: 700;
}

.order-summary .cart_totals .cart-subtotal th,
.woocommerce .cart_totals .cart-subtotal th {
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------
   6. CHECKOUT
   -------------------------------------------------------------- */

/* Checkout page: width containment (same as cart) */
.woocommerce-checkout #main-content {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section--checkout {
  padding-block: var(--space-24);
}

.checkout-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-text);
  margin: 0;
}

/* Checkout layout: col2-set (billing + order review) */
.woocommerce-checkout .col2-set {
  margin-bottom: var(--space-10);
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  float: none;
  width: 100%;
  margin: 0;
}

@media (min-width: 1024px) {
  .woocommerce-checkout .col2-set {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-12);
    align-items: start;
  }
}

/* Section headings (Billing, Shipping, etc.) */
.woocommerce-checkout h3 {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-text);
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}

.woocommerce-checkout .woocommerce-form-row,
.woocommerce-checkout .form-row {
  margin-bottom: var(--space-5);
}

.woocommerce-checkout label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-2);
}

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  width: 100%;
  max-width: 100%;
  height: 52px;
  padding: 0 var(--space-5);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}

.woocommerce-checkout textarea {
  height: auto;
  padding: var(--space-4);
  min-height: 120px;
  resize: vertical;
}

.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--color-text);
  outline: none;
}

/* Form row first/last (two columns) */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
  float: none;
  width: 100%;
}

@media (min-width: 640px) {
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last {
    width: calc(50% - var(--space-3));
  }
  .woocommerce-checkout .form-row-first { float: left; margin-right: var(--space-2); }
  .woocommerce-checkout .form-row-last { float: right; }
}

.woocommerce-checkout .form-row-wide {
  clear: both;
}

/* Place order button */
.woocommerce-checkout #place_order {
  width: 100%;
  padding: 1.0625rem var(--space-10);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background-color: var(--color-text);
  color: var(--color-bg);
  border: var(--border-width) solid var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  margin-top: var(--space-6);
}

.woocommerce-checkout #place_order:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-bg);
}

/* Order review table */
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-checkout #order_review {
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table {
  width: 100%;
  border: none;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: var(--space-4) 0;
  border: none;
  font-size: var(--text-base);
  border-bottom: var(--border-width) solid var(--color-border);
  vertical-align: top;
}

.woocommerce-checkout-review-order-table tr:last-child th,
.woocommerce-checkout-review-order-table tr:last-child td {
  border-bottom: none;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
  font-size: var(--text-lg);
  font-weight: 700;
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
  margin-top: var(--space-2);
}

/* Payment methods */
.woocommerce-checkout #payment {
  background: transparent;
  padding: 0;
  margin-top: var(--space-6);
}

.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  border: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
  padding: var(--space-4) 0;
  border-bottom: var(--border-width) solid var(--color-border);
  margin: 0;
}

.woocommerce-checkout #payment ul.payment_methods li:last-child {
  border-bottom: none;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  font-size: var(--text-base);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text);
  cursor: pointer;
}

.woocommerce-checkout #payment div.payment_box {
  background-color: rgba(181, 137, 90, 0.08);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--color-border);
}

/* --------------------------------------------------------------
   7. NOTICES & MESSAGES
   -------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-sm);
  list-style: none;
  margin-left: 0;
}

.woocommerce-message {
  background-color: rgba(46, 125, 82, 0.1);
  border: var(--border-width) solid var(--color-success);
  color: var(--color-text);
}

.woocommerce-info {
  background-color: rgba(181, 137, 90, 0.1);
  border: var(--border-width) solid var(--color-accent);
  color: var(--color-text);
}

.woocommerce-error {
  background-color: rgba(192, 57, 43, 0.08);
  border: var(--border-width) solid var(--color-error);
  color: var(--color-text);
}

.woocommerce-error li {
  list-style: none;
  margin: 0;
}

/* --------------------------------------------------------------
   8. MY ACCOUNT
   -------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block;
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  border-bottom: var(--border-width) solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.woocommerce-account .woocommerce-MyAccount-content {
  margin-top: var(--space-8);
}

/* --------------------------------------------------------------
   9. FORM ELEMENTS (global)
   -------------------------------------------------------------- */

.woocommerce .form-row input.input-text,
.woocommerce .form-row select,
.woocommerce .form-row textarea,
.woocommerce-page .form-row input.input-text,
.woocommerce-page .form-row select,
.woocommerce-page .form-row textarea {
  max-width: 100%;
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce-page .button,
.woocommerce-page a.button,
.woocommerce-page button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8125rem var(--space-8);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background-color: var(--color-text);
  color: var(--color-bg);
  border: var(--border-width) solid var(--color-text);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce-page .button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-bg);
}

/* Alt/secondary buttons */
.woocommerce a.button.alt:not(.disabled),
.woocommerce button.button.alt:not(.disabled) {
  background-color: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}
