/* ==========================================================================
   WCC INDUSTRIAL — design tokens
   Matches the home.html / product-detail.html mockups.
   ========================================================================== */

:root{
  --wcc-bg:      #EDEAE2;
  --wcc-paper:   #F6F4EF;
  --wcc-ink:     #201D1B;
  --wcc-steel:   #3F4A52;
  --wcc-safety:  #F5B700;
  --wcc-rust:    #B23A1F;
  --wcc-tag:     #E7DAB9;
  --wcc-line:    #C9C2B4;
  --wcc-green:   #3E6B4A;

  --wcc-display: 'Bebas Neue', sans-serif;
  --wcc-body:    'IBM Plex Sans', sans-serif;
  --wcc-mono:    'IBM Plex Mono', monospace;
}

/* ==========================================================================
   GLOBAL
   ========================================================================== */

body{
  background: var(--wcc-bg);
  color: var(--wcc-ink);
  font-family: var(--wcc-body);
}

h1, h2, h3, .entry-title, .page-title,
.woocommerce-products-header__title {
  font-family: var(--wcc-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Hazard-stripe rule — the page's one structural signature element.
   Apply by adding class="wcc-hazard-rule" to a block/HTML widget,
   e.g. above the footer widget area in Customizer > Widgets. */
.wcc-hazard-rule{
  height: 8px;
  background: repeating-linear-gradient(135deg, var(--wcc-safety) 0 14px, var(--wcc-ink) 14px 28px);
  border: none;
  margin: 0;
}

/* Primary buttons app-wide (Astra + WooCommerce share .button) */
.button, button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button {
  background: var(--wcc-ink) !important;
  color: var(--wcc-paper) !important;
  border-radius: 0 !important;
  border: none !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13px;
  padding: 12px 20px !important;
}
.button.alt, .woocommerce a.button.alt,
.wcc-cta-safety {
  background: var(--wcc-safety) !important;
  color: var(--wcc-ink) !important;
}

/* ==========================================================================
   WOOCOMMERCE LOOP — "lot tag" product cards
   Applies to shop/archive/category grids and the UWA "ending soon" /
   related-products widgets, since those all render through the standard
   woocommerce_loop_start / content-product.php structure.
   ========================================================================== */

ul.products{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  list-style: none;
}
@media (max-width: 1000px){ ul.products{ grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px){ ul.products{ grid-template-columns: 1fr !important; } }

ul.products li.product{
  background: var(--wcc-paper);
  border: 1px solid var(--wcc-line);
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
  transition: transform .15s, box-shadow .15s;
}
ul.products li.product:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(32,29,27,0.14);
}

/* Product thumbnail area */
ul.products li.product a img{
  border-bottom: 1px dashed var(--wcc-line);
  border-radius: 0 !important;
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* Title + price sit in a padded body, matching the mockup's .lot-body */
ul.products li.product .woocommerce-loop-product__title{
  font-family: var(--wcc-body);
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 14px 14px 0;
  line-height: 1.3;
}
ul.products li.product .price{
  font-family: var(--wcc-mono) !important;
  font-size: 19px;
  font-weight: 600;
  color: var(--wcc-ink);
  padding: 8px 14px 14px;
  border-top: 1px dashed var(--wcc-line);
  margin-top: 10px;
}
ul.products li.product .price ins{ text-decoration: none; }

/* --- UWA Pro auction status on cards ------------------------------------
   Confirmed classes from this install's plugin docs: uwa_auction_status_live
   / uwa_auction_status_expired. Styled as the small rust "badge" from the
   mockup. If UWA renders a different wrapper element, move this rule to
   target that element instead — check via devtools on a live lot. */
.uwa_auction_status_live{
  display: inline-block;
  background: var(--wcc-rust);
  color: var(--wcc-paper);
  font-family: var(--wcc-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  margin: 10px 14px 0;
}
.uwa_auction_status_expired{
  display: inline-block;
  background: var(--wcc-steel);
  color: var(--wcc-paper);
  font-family: var(--wcc-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  margin: 10px 14px 0;
}

/* ==========================================================================
   SINGLE PRODUCT — bid ticket panel
   NOTE ON SELECTORS: the .summary / .product / tabs selectors below are
   standard WooCommerce single-product markup and are safe. The UWA-specific
   bid box selectors (marked below) are best-guess placeholders based on
   typical UWA Pro output — paste me the actual rendered HTML of a live
   product page and I'll swap these for exact matches.
   ========================================================================== */

.single-product div.product .summary{
  background: var(--wcc-paper);
  border: 1px solid var(--wcc-ink);
  position: relative;
  padding: 24px 22px 22px !important;
}
.single-product div.product .summary::before{
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 6px;
  background: repeating-linear-gradient(135deg, var(--wcc-safety) 0 10px, var(--wcc-ink) 10px 20px);
}

.single-product div.product .summary .product_title{
  font-family: var(--wcc-mono);
  font-size: 12px;
  color: var(--wcc-steel);
  text-transform: none;
  letter-spacing: normal;
  border-bottom: 1px dashed var(--wcc-line);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.single-product div.product .price{
  font-family: var(--wcc-mono) !important;
  font-size: 32px !important;
  font-weight: 600;
  padding: 16px 0 !important;
  border-top: 1px solid var(--wcc-line);
  border-bottom: 1px solid var(--wcc-line);
}

/* --- UWA bid form — PLACEHOLDER selectors, verify against live markup --- */
.uwa-bid-form,
.woo_auction_bid_form,
form.cart .uwa-place-bid {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.uwa-bid-form input[type="number"],
.uwa-bid-form input[type="text"]{
  flex: 1;
  border: 1px solid var(--wcc-ink) !important;
  padding: 13px 12px !important;
  font-family: var(--wcc-mono);
  font-size: 16px;
  background: var(--wcc-bg);
}

/* --- UWA countdown timer — PLACEHOLDER selector, verify against live markup ---
   UWA Pro typically renders a countdown via a shortcode/widget wrapper;
   this targets the most common pattern (a div with digits inside spans).
   Wrap adjustment: if the live markup differs, the safe fallback is to
   scope by whatever wrapper class surrounds the timer and restyle the
   digit segments to var(--wcc-mono) on var(--wcc-ink) background, per
   the mockup's "cd-digits" treatment. */
.uwa_countdown_timer,
.woo_auction_countdown {
  text-align: center;
  margin-bottom: 20px;
  font-family: var(--wcc-mono);
}
.uwa_countdown_timer .uwa-time-block,
.woo_auction_countdown .time-block{
  background: var(--wcc-ink);
  color: var(--wcc-safety);
  font-family: var(--wcc-mono);
  font-size: 24px;
  font-weight: 600;
  padding: 10px 12px;
  min-width: 52px;
  display: inline-block;
  text-align: center;
  margin: 0 2px;
}

/* ==========================================================================
   WooCommerce product tabs (Description / Additional info) —
   restyled to match the mockup's underline-tab treatment.
   ========================================================================== */

.woocommerce-tabs ul.tabs{
  border-bottom: 1px solid var(--wcc-line);
  border-top: 2px solid var(--wcc-ink);
  padding-top: 0;
}
.woocommerce-tabs ul.tabs li{
  border-radius: 0 !important;
  background: none !important;
  border: none !important;
}
.woocommerce-tabs ul.tabs li a{
  font-family: var(--wcc-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--wcc-steel);
  padding: 14px 20px;
}
.woocommerce-tabs ul.tabs li.active a{
  color: var(--wcc-ink);
  border-bottom: 2px solid var(--wcc-rust);
}

/* ==========================================================================
   Bid history table (if UWA renders one as a <table>, standard WP table
   styling picks this up automatically; class kept generic on purpose).
   ========================================================================== */

table.shop_table, .uwa-bid-history table{
  font-family: var(--wcc-mono);
  font-size: 13px;
  border-collapse: collapse;
  width: 100%;
}
table.shop_table th, .uwa-bid-history table th{
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--wcc-steel);
  border-bottom: 2px solid var(--wcc-ink) !important;
  text-align: left;
}
table.shop_table td, .uwa-bid-history table td{
  border-bottom: 1px solid var(--wcc-line) !important;
  padding: 9px 4px;
}