/* ==========================================================================
   fix-shop.css — per-area graphic fix layer (loaded LAST, overrides shared sheets)
   Add !important / higher specificity here. DO NOT edit woocommerce.css etc.
   Scope: SHOP + CATEGORY (archive) pages only.
   Theme: heritage green #031c12, card #0a1a12 / #0a2e1a, gold #c5a059.
   ========================================================================== */

/* ==========================================================================
   1. SHOP / CATEGORY HEADER  (title, breadcrumbs, result count, ordering)
   ========================================================================== */

/* Header band spacing + a hairline divider for vertical rhythm. */
.bwc-shop-header {
  padding: 28px 0 22px !important;
  background-color: #031c12 !important;
  border-bottom: 1px solid #1a1a1a !important;
}

.bwc-shop-header .bwc-container { display: block !important; }

/* Breadcrumbs — readable, gold links, white current, gold separator. */
.bwc-breadcrumbs,
.woocommerce .bwc-breadcrumbs {
  padding: 0 0 14px !important;
  margin: 0 !important;
  font-family: "Inter", -apple-system, system-ui, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.3px !important;
  color: #888888 !important;
}
.bwc-breadcrumbs a,
.bwc-breadcrumbs .bwc-breadcrumb-item a {
  color: #c5a059 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.bwc-breadcrumbs a:hover { color: #ffffff !important; }
.bwc-breadcrumbs .bwc-breadcrumb-item:last-child,
.bwc-breadcrumbs .bwc-breadcrumb-item {
  color: #cccccc !important;
}
.bwc-breadcrumb-sep { color: #c5a059 !important; opacity: 0.7; padding: 0 6px; }

/* Page title — Playfair, white, tight rhythm. */
.bwc-shop-title,
.woocommerce .bwc-shop-title {
  font-family: "Playfair Display", Georgia, serif !important;
  color: #ffffff !important;
  font-size: clamp(34px, 4vw, 52px) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.5px !important;
  margin: 0 0 18px !important;
}

/* Controls row: result count LEFT, ordering RIGHT, single flex line, wraps on narrow screens. */
.bwc-shop-controls {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px 24px !important;
  margin-top: 4px !important;
}

.bwc-result-count,
.woocommerce .bwc-result-count {
  margin: 0 !important;
  color: #cccccc !important;
  font-family: "Inter", -apple-system, system-ui, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.2px !important;
}
.bwc-result-count .woocommerce-result-count,
.woocommerce .woocommerce-result-count {
  margin: 0 !important;
  color: #cccccc !important;
  font-size: 14px !important;
}

.bwc-ordering { margin: 0 !important; }
.bwc-ordering form.woocommerce-ordering,
.woocommerce-ordering {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   1b. ORDERING DROPDOWN — dark, rounded, custom gold chevron (not WC white)
   -------------------------------------------------------------------------- */
.bwc-ordering select.orderby,
.woocommerce-ordering select.orderby,
.woocommerce .woocommerce-ordering select.orderby,
.woocommerce .bwc-ordering select.orderby {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: #0a1a12 !important;
  color: #ffffff !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 8px !important;
  padding: 10px 42px 10px 16px !important;
  font-family: "Inter", -apple-system, system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  outline: none !important;
  min-width: 210px;
  /* custom gold chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c5a059' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 13px 13px !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.bwc-ordering select.orderby:hover,
.woocommerce-ordering select.orderby:hover { border-color: #c5a059 !important; }
.bwc-ordering select.orderby:focus,
.woocommerce-ordering select.orderby:focus {
  border-color: #c5a059 !important;
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.22) !important;
}
/* Native option list — dark where the browser allows it. */
.bwc-ordering select.orderby option,
.woocommerce-ordering select.orderby option {
  background-color: #0a1a12 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   2. CATEGORY FILTER BAR — horizontal rounded pills, gold active state
   ========================================================================== */
.bwc-category-filter-section {
  padding: 18px 0 22px !important;
  background-color: #031c12 !important;
  border-bottom: 1px solid #1a1a1a !important;
}

/* Force the <ul> into a wrapping horizontal flex row. */
.bwc-category-filter,
.bwc-category-filter-section .bwc-category-filter {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bwc-filter-item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* The pill itself — applied to the link so it carries the click target. */
.bwc-filter-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 9px 20px !important;
  border-radius: 999px !important;
  background-color: #0a1a12 !important;
  border: 1px solid #1a1a1a !important;
  color: #cccccc !important;
  font-family: "Inter", -apple-system, system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.4px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}
.bwc-filter-link:hover {
  color: #ffffff !important;
  border-color: #c5a059 !important;
  background-color: #0a2e1a !important;
}

/* ACTIVE pill — gold background, dark text. Works for current category + "All". */
.bwc-filter-item.active .bwc-filter-link,
.bwc-filter-item .bwc-filter-link[aria-current="page"] {
  background-color: #c5a059 !important;
  color: #031c12 !important;
  border-color: #c5a059 !important;
  font-weight: 700 !important;
}
.bwc-filter-item.active .bwc-filter-link:hover {
  background-color: #d4b06a !important;
  color: #031c12 !important;
}

/* ==========================================================================
   3. PRODUCT GRID + CARDS — equal height, aligned buttons, stable rhythm
   ========================================================================== */
.bwc-dark-products { padding: 40px 0 30px !important; }

/* Grid is already 4-col / 30px gap from woocommerce.css; just enforce stretch + alignment. */
.woocommerce ul.products,
.bwc-dark-products ul.products {
  align-items: stretch !important;
}
.woocommerce ul.products li.product,
.bwc-dark-products ul.products li.product {
  display: flex !important;
  height: auto !important;
}

/* Make every card a column flex so the body grows and the button pins to bottom. */
.product-card,
.bwc-dark-products .product-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background-color: #0a1a12 !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Image tile — keep the light product-photo backdrop (clocks are shot on white),
   but make sure it respects the card radius and never squishes. */
.product-card-image {
  background-color: #f5f5f5 !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-bottom: 1px solid #14241b !important;
}
.product-card-image img,
.product-card-img-primary {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Body grows; contents stack with consistent gaps. */
.product-card-body,
.bwc-dark-products .product-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  padding: 18px 18px 20px !important;
  background-color: #0a1a12 !important;
  color: #ffffff !important;
}

/* Category label */
.product-card-category,
.bwc-dark-products .product-card-category {
  color: #c5a059 !important;
  font-family: "Inter", -apple-system, system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
}

/* Title — clamp to 2 lines so every card aligns the same way. */
.product-card-title,
.bwc-dark-products .product-card-title {
  font-family: "Inter", -apple-system, system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #ffffff !important;
  margin: 0 0 10px !important;
  min-height: 2.8em; /* reserve 2 lines for even rhythm */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.product-card-title a { color: #ffffff !important; text-decoration: none !important; }
.product-card-title a:hover { color: #c5a059 !important; }

/* Rating row */
.product-card-rating,
.bwc-dark-products .product-card-rating {
  margin: 0 0 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: "Inter", -apple-system, system-ui, sans-serif !important;
  font-size: 12px !important;
  color: #888888 !important;
}
.bwc-star { color: #c5a059 !important; font-size: 13px !important; line-height: 1 !important; }
.bwc-star.empty { color: #555555 !important; }
.product-card-review-count { color: #888888 !important; }

/* Price */
.product-card-price,
.bwc-dark-products .product-card-price {
  margin: 0 0 10px !important;
  color: #c5a059 !important;
  font-family: "Inter", -apple-system, system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}
.product-card-price del,
.product-card-price .product-card-price-original {
  color: #666666 !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  margin-right: 8px !important;
  text-decoration: line-through !important;
}
.product-card-price ins,
.product-card-price .product-card-price-sale,
.product-card-price .product-card-price-current { color: #c5a059 !important; text-decoration: none !important; }
.product-card-price .woocommerce-Price-amount { color: inherit !important; }

/* Delivery row */
.product-card-delivery,
.bwc-dark-products .product-card-delivery {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 0 12px !important;
  font-family: "Inter", -apple-system, system-ui, sans-serif !important;
  font-size: 11.5px !important;
  color: #cccccc !important;
  line-height: 1.4 !important;
}
.product-card-delivery .delivery-icon { color: #c5a059 !important; flex: 0 0 auto; }
.product-card-delivery .delivery-badge-express {
  display: inline-block !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  background-color: rgba(197, 160, 89, 0.14) !important;
  border: 1px solid rgba(197, 160, 89, 0.45) !important;
  color: #c5a059 !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
}

/* Badges overlaying the image */
.product-card .product-badge,
.product-card .product-sale-percentage {
  position: absolute !important;
  z-index: 5 !important;
  top: 12px !important;
  font-family: "Inter", -apple-system, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  line-height: 1 !important;
}
.product-card .product-badge { left: 12px !important; }
.product-card .product-sale-percentage { right: 12px !important; background-color: #c5a059 !important; color: #031c12 !important; }

/* ------------------------------------------------------------------
   Actions — pinned to the bottom so all buttons line up across a row.
   ------------------------------------------------------------------ */
.product-card-actions,
.bwc-dark-products .product-card-actions {
  margin-top: auto !important;       /* push to bottom of the flex body */
  padding-top: 4px !important;
}
/* Full-width gold add-to-cart button */
.product-card-actions .button,
.product-card-actions .add_to_cart_button,
.bwc-dark-products .product-card-actions .button,
.bwc-dark-products .add_to_cart_button {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 12px 14px !important;
  background-color: #c5a059 !important;
  color: #031c12 !important;
  border: 1px solid #c5a059 !important;
  border-radius: 6px !important;
  font-family: "Inter", -apple-system, system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}
.product-card-actions .button:hover,
.product-card-actions .add_to_cart_button:hover,
.bwc-dark-products .product-card-actions .button:hover,
.bwc-dark-products .add_to_cart_button:hover {
  background-color: #ffffff !important;
  color: #031c12 !important;
  border-color: #ffffff !important;
}
.product-card-actions .button.added { display: none !important; } /* keep card tidy after AJAX add */

/* ==========================================================================
   4. PAGINATION — clean dark bar, gold active page
   NOTE: WooCommerce reuses the .page-numbers class on BOTH the <ul> container
   AND the inner <span>/<a> cells, so we scope explicitly to ul.page-numbers
   for the bar and to li > a/span for the cells to avoid width collapse.
   ========================================================================== */
.bwc-pagination-section { padding: 0 !important; }
.woocommerce-pagination,
.bwc-dark-products .woocommerce-pagination {
  margin: 40px 0 12px !important;
  text-align: center !important;
  line-height: 1 !important;
}
.woocommerce-pagination ul.page-numbers,
.woocommerce-pagination .page-numbers {
  display: inline-flex !important;     /* hug content; parent text-align centers it */
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  width: auto !important;          /* beat WC's width:42px hitting the <ul> */
  height: auto !important;
  min-width: 0 !important;
  background-color: #0a1a12 !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.woocommerce-pagination ul.page-numbers li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  border-right: 1px solid #1a1a1a !important;
  background-color: transparent !important;
}
.woocommerce-pagination ul.page-numbers li:last-child { border-right: 0 !important; }

/* The actual cells (the <a>/<span> inside each <li>). */
.woocommerce-pagination ul.page-numbers li > a,
.woocommerce-pagination ul.page-numbers li > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  background-color: transparent !important;
  color: #cccccc !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: "Inter", -apple-system, system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}
.woocommerce-pagination ul.page-numbers li > a:hover,
.woocommerce-pagination ul.page-numbers li > span:hover {
  background-color: #0a2e1a !important;
  color: #c5a059 !important;
}
/* Active page — gold. */
.woocommerce-pagination ul.page-numbers li > .current,
.woocommerce-pagination ul.page-numbers .current {
  background-color: #c5a059 !important;
  color: #031c12 !important;
  font-weight: 700 !important;
}
/* Prev/Next arrows in gold. */
.woocommerce-pagination ul.page-numbers .next,
.woocommerce-pagination ul.page-numbers .prev { color: #c5a059 !important; }
.woocommerce-pagination ul.page-numbers .next:hover,
.woocommerce-pagination ul.page-numbers .prev:hover { color: #ffffff !important; }

/* ==========================================================================
   5. SAFETY NETS — kill any residual default-WC white boxes on archive pages
   ========================================================================== */
.woocommerce-info, .woocommerce-message, .woocommerce-error,
.bwc-dark-products .woocommerce-info,
.bwc-dark-products .woocommerce-message {
  background-color: #0a1a12 !important;
  color: #ffffff !important;
  border-top: 3px solid #c5a059 !important;
  border-radius: 6px !important;
}

/* "No products found" state on empty category pages. */
.woocommerce p.woocommerce-info,
.woocommerce-info {
  background-color: #0a1a12 !important;
  color: #cccccc !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 8px !important;
  padding: 24px !important;
}

/* ==========================================================================
   6. RESPONSIVE — tighten the archive layout on smaller screens
   ========================================================================== */
@media (max-width: 980px) {
  .bwc-shop-controls { justify-content: flex-start !important; }
}
@media (max-width: 768px) {
  .bwc-shop-title,
  .woocommerce .bwc-shop-title { font-size: 32px !important; }
  .bwc-dark-products { padding: 28px 0 20px !important; }
  .woocommerce ul.products,
  .bwc-dark-products ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .bwc-filter-link { padding: 8px 15px !important; font-size: 12px !important; }
}
@media (max-width: 480px) {
  .bwc-shop-controls { flex-direction: column !important; align-items: flex-start !important; }
  .bwc-ordering, .bwc-ordering select.orderby { width: 100% !important; }
  .bwc-ordering select.orderby { min-width: 0 !important; }
}