/* ==========================================================================
   WooCommerce compatibility layer
   Deliberately styles WooCommerce's own default markup/classes rather than
   overriding its templates, so core/plugin updates keep working without a
   maintenance burden. Mirrors the classes used in main.css (.product-card,
   .product-grid, .spec-table, .btn, etc.) so native Woo pages match
   /preview visually. See inc/woocommerce.php for the "buy vs quote" logic
   that decides which button/price markup actually gets output.
   ========================================================================== */

/* ---- Archive / shop grid ----
   `float:none` + `width:auto` defensively neutralise any residual
   WooCommerce float-grid rules so the CSS grid always controls layout,
   even if a plugin re-enqueues the default WooCommerce layout stylesheet. */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid !important; grid-template-columns:repeat(3,1fr); gap:var(--sp-5);
  list-style:none; margin:0; padding:0; width:100%;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{ display:none !important; content:none !important; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  float:none !important; width:auto !important; margin:0 !important; clear:none !important;
  border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; background:var(--kc-white);
  display:flex; flex-direction:column; list-style:none;
  transition:box-shadow var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.woocommerce ul.products li.product:hover{ box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{ display:flex; flex-direction:column; flex:1; color:inherit; }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3{
  font-size:var(--fs-base); font-weight:700; padding:0 var(--sp-4); margin:6px 0 0; order:2;
  line-height:1.3; min-height:2.6em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Fixed-height image box so every card is identical regardless of the
   source photo's proportions (portrait pipe photos vs. square fittings). */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img{
  order:1; display:block; width:100% !important; height:210px !important;
  object-fit:contain; background:var(--bg-subtle); padding:var(--sp-4); margin:0;
  box-sizing:border-box;
}
@media (max-width:900px){ .woocommerce ul.products li.product img{ height:180px !important; } }
.woocommerce ul.products li.product .price{
  padding:var(--sp-2) var(--sp-4) var(--sp-4); margin-top:auto; order:4; font-weight:800; font-size:var(--fs-md); color:var(--kc-navy);
}
.woocommerce ul.products li.product .price ins{ text-decoration:none; }
.woocommerce ul.products li.product .price del{ color:var(--text-muted); font-size:var(--fs-sm); margin-inline-end:6px; }
.woocommerce ul.products li.product .price-on-request{ font-size:var(--fs-sm); color:var(--text-muted); font-weight:700; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.btn{
  margin:0 var(--sp-4) var(--sp-4); align-self:flex-start; order:5;
  display:inline-flex; align-items:center; justify-content:center; padding:9px 18px; border-radius:var(--radius-pill);
  background:var(--kc-red); color:var(--kc-white) !important; font-weight:700; font-size:var(--fs-sm); border:none; text-decoration:none;
  transition:background var(--dur-fast), transform var(--dur-fast);
}
.woocommerce ul.products li.product .button:hover{ background:var(--kc-red-dark); transform:translateY(-2px); }
.woocommerce ul.products li.product .button.loading{ opacity:.6; }
/* star-rating shown as of v1.2 (styles in main.css) */
/* Category label above the product title, injected via woocommerce.php */
.woocommerce ul.products li.product .kc-cat-label{
  order:2; padding:var(--sp-3) var(--sp-4) 0; font-size:var(--fs-xs); font-weight:800;
  color:var(--kc-red); text-transform:uppercase; letter-spacing:.04em;
}
.woocommerce ul.products li.product .kc-cat-label + .woocommerce-loop-product__title{ min-height:auto; }
.woocommerce span.onsale{
  position:absolute; margin:12px; padding:5px 12px; border-radius:var(--radius-pill); background:var(--kc-navy); color:var(--kc-white);
  font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; min-height:0; min-width:0; top:0; left:0; line-height:1;
}
[dir="rtl"] .woocommerce span.onsale{ left:auto; right:0; }

@media (max-width:1024px){ .woocommerce ul.products{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .woocommerce ul.products{ grid-template-columns:1fr; } }

.woocommerce nav.woocommerce-pagination{ margin-top:var(--sp-7); text-align:center; }
.woocommerce nav.woocommerce-pagination ul{ display:inline-flex; gap:6px; border:none; }
.woocommerce nav.woocommerce-pagination ul li{ border:none; }
.woocommerce nav.woocommerce-pagination .page-numbers{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--border); color:var(--text); font-weight:600;
}
.woocommerce nav.woocommerce-pagination .page-numbers.current,
.woocommerce nav.woocommerce-pagination .page-numbers:hover{ background:var(--kc-red); color:var(--kc-white); border-color:var(--kc-red); }

.woocommerce-result-count{ color:var(--text-muted); font-size:var(--fs-sm); }
.woocommerce-ordering select{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 12px; background:var(--kc-white); }
.woocommerce-notices-wrapper{ margin-bottom:var(--sp-4); }
.woocommerce-message, .woocommerce-info, .woocommerce-error{
  list-style:none; padding:14px 18px; border-radius:var(--radius-sm); background:var(--bg-subtle); border-inline-start:4px solid var(--kc-red);
  margin-bottom:var(--sp-4); font-size:var(--fs-sm);
}
.woocommerce-error{ border-color:var(--kc-error); }

/* ---- Single product ---- */
.woocommerce div.product{
  display:grid !important; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--sp-8);
}
.woocommerce div.product::before, .woocommerce div.product::after{ display:none !important; content:none !important; }
.woocommerce div.product > div.images,
.woocommerce div.product > div.summary,
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related,
.woocommerce div.product > .up-sells{ float:none !important; width:auto !important; margin:0 !important; }
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells{ grid-column:1 / -1; }
.woocommerce div.product div.images{ position:sticky; top:96px; align-self:start; }
.woocommerce div.product div.images img{
  border-radius:var(--radius-md); background:var(--bg-subtle); width:100%;
  aspect-ratio:1/1; object-fit:contain; padding:var(--sp-6); box-sizing:border-box;
}
.woocommerce div.product div.images .flex-control-thumbs{ display:flex; gap:10px; margin-top:12px; padding:0; }
.woocommerce div.product div.images .flex-control-thumbs li{ list-style:none; width:72px; }
.woocommerce div.product div.images .flex-control-thumbs img{ aspect-ratio:1/1; padding:6px; border:1px solid var(--border); }
.woocommerce div.product .summary{ max-width:none; }
@media (max-width:860px){
  .woocommerce div.product{ grid-template-columns:1fr !important; }
}
.woocommerce div.product .summary .product_title{ font-size:var(--fs-xl); margin-bottom:var(--sp-3); }
.woocommerce div.product .summary p.price{ font-size:var(--fs-2xl); font-weight:800; color:var(--kc-navy); margin-bottom:var(--sp-2); }
.woocommerce div.product .summary p.price .price-on-request{ font-size:var(--fs-lg); color:var(--kc-red); }
.woocommerce div.product .summary .kc-vat-note{ font-size:var(--fs-xs); color:var(--text-muted); font-weight:400; }
.woocommerce div.product .summary .woocommerce-product-details__short-description{ color:var(--text-muted); margin-bottom:var(--sp-5); }
.woocommerce div.product form.cart{ display:flex; gap:var(--sp-3); align-items:center; margin-block:var(--sp-6); flex-wrap:wrap; }
.woocommerce div.product form.cart .quantity{ display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:var(--radius-pill); overflow:hidden; }
.woocommerce div.product form.cart .quantity input{ width:56px; text-align:center; border:none; padding:12px 4px; font-weight:700; }
.woocommerce div.product form.cart button.single_add_to_cart_button{
  background:var(--kc-red); color:var(--kc-white); border:none; padding:14px 28px; border-radius:var(--radius-pill); font-weight:700;
  transition:background var(--dur-fast), transform var(--dur-fast);
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover{ background:var(--kc-red-dark); transform:translateY(-2px); }

.woocommerce-tabs{ margin-top:var(--sp-7); }
.woocommerce-tabs ul.tabs{ display:flex; gap:var(--sp-6); border-bottom:1px solid var(--border); list-style:none; padding:0; margin:0; }
.woocommerce-tabs ul.tabs li{ margin:0; }
.woocommerce-tabs ul.tabs li a{ display:block; padding:var(--sp-3) 0; font-weight:700; color:var(--text-muted); }
.woocommerce-tabs ul.tabs li.active a{ color:var(--kc-navy); border-bottom:2px solid var(--kc-red); }
.woocommerce-tabs .panel{ padding-block:var(--sp-5); color:var(--text-muted); }

.related.products{ margin-top:var(--sp-8); }
.related.products > h2{ font-size:var(--fs-2xl); margin-bottom:var(--sp-6); }

@media (max-width:860px){
  .woocommerce div.product div.images{ position:static; }
}

/* ---- Cart / Checkout ---- */
.woocommerce table.shop_table{ width:100%; border-collapse:collapse; margin-bottom:var(--sp-6); }
.woocommerce table.shop_table th{ text-align:start; padding:12px; border-bottom:2px solid var(--border); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.woocommerce table.shop_table td{ padding:14px 12px; border-bottom:1px solid var(--border); }
.woocommerce-cart-form .product-thumbnail img{ width:64px; border-radius:8px; background:var(--bg-subtle); }
.woocommerce a.remove{ color:var(--kc-red) !important; }
.woocommerce #coupon_code{ padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); }
.woocommerce button.button{
  background:var(--kc-red); color:var(--kc-white); border:none; padding:12px 24px; border-radius:var(--radius-pill); font-weight:700;
}
.woocommerce button.button:hover{ background:var(--kc-red-dark); }
.woocommerce button.button.alt{ background:var(--kc-navy); }
.cart-collaterals .cart_totals{ background:var(--bg-subtle); border-radius:var(--radius-md); padding:var(--sp-5); }
.cart-collaterals .cart_totals table{ border:none; }
.cart-collaterals .cart_totals th, .cart-collaterals .cart_totals td{ border-bottom:1px solid var(--border); }

.woocommerce-checkout #payment{ background:var(--bg-subtle); border-radius:var(--radius-md); padding:var(--sp-5); margin-top:var(--sp-5); }
.woocommerce form .form-row{ margin-bottom:var(--sp-4); }
.woocommerce form .form-row label{ font-weight:700; font-size:var(--fs-sm); margin-bottom:6px; display:block; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm);
}
.woocommerce-billing-fields .kc-vat-note,
.woocommerce-additional-fields .kc-vat-note{ font-size:var(--fs-xs); color:var(--text-muted); }

/* ---- My Account ---- */
.woocommerce-MyAccount-navigation ul{ list-style:none; padding:0; margin:0; display:grid; gap:4px; }
.woocommerce-MyAccount-navigation a{ display:block; padding:10px 14px; border-radius:var(--radius-sm); font-weight:600; color:var(--text-muted); }
.woocommerce-MyAccount-navigation .is-active a{ background:var(--bg-subtle); color:var(--kc-red); }
.woocommerce-MyAccount-content{ padding-top:var(--sp-5); }
.woocommerce-account .woocommerce{ display:grid; grid-template-columns:220px 1fr; gap:var(--sp-6); }
@media (max-width:760px){ .woocommerce-account .woocommerce{ grid-template-columns:1fr; } }

/* ---- Shop sidebar / filter widgets ---- */
.shop-layout{ display:grid; grid-template-columns:260px 1fr; gap:var(--sp-6); align-items:start; }
.filter-panel{ border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--sp-5); position:sticky; top:96px; }
.filter-panel .widget{ padding-block:var(--sp-4); border-bottom:1px solid var(--border); }
.filter-panel .widget:last-child{ border-bottom:none; }
.filter-panel .widget-title{ font-size:var(--fs-sm); margin-bottom:var(--sp-3); font-weight:800; }
.filter-panel ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.filter-panel .wc-layered-nav-term a, .filter-panel a{ font-size:var(--fs-sm); color:var(--text-muted); }
.filter-panel .wc-layered-nav-term.chosen a{ color:var(--kc-red); font-weight:700; }
@media (max-width:1024px){ .shop-layout{ grid-template-columns:1fr; } .filter-panel{ position:static; } }

/* ==========================================================================
   v1.1 enhancements: subcategory tiles, quick-view, search, recently viewed
   ========================================================================== */

/* ---- Sub-category tiles ---- */
.kc-subcat-tiles{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:var(--sp-3);
  margin-bottom:var(--sp-6);
}
.kc-subcat-tile{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  padding:var(--sp-4) var(--sp-3); border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--kc-white); transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.kc-subcat-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:transparent; }
.kc-subcat-thumb{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; }
.kc-subcat-thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.kc-subcat-name{ font-weight:700; font-size:var(--fs-sm); color:var(--kc-navy); }
.kc-subcat-count{ font-size:var(--fs-xs); color:var(--text-muted); }

/* ---- Quick-view button on cards ---- */
.woocommerce ul.products li.product{ position:relative; }
.kc-qv-btn{
  position:absolute; top:10px; inset-inline-end:10px; z-index:2; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.92); border:1px solid var(--border); color:var(--kc-navy);
  display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(-4px);
  transition:opacity var(--dur-fast), transform var(--dur-fast), background var(--dur-fast), color var(--dur-fast); cursor:pointer;
}
.woocommerce ul.products li.product:hover .kc-qv-btn{ opacity:1; transform:translateY(0); }
.kc-qv-btn:hover{ background:var(--kc-red); color:var(--kc-white); border-color:var(--kc-red); }
@media (hover:none){ .kc-qv-btn{ opacity:1; transform:none; } }

/* ---- Quick-view modal ---- */
.kc-modal{ position:fixed; inset:0; z-index:400; display:none; }
.kc-modal.is-open{ display:block; }
.kc-modal-backdrop{ position:absolute; inset:0; background:rgba(16,18,28,.55); backdrop-filter:blur(2px); }
.kc-modal-dialog{
  position:absolute; inset-inline:0; top:50%; margin-inline:auto; transform:translateY(-50%);
  width:min(860px,92vw); max-height:90vh; overflow-y:auto; background:var(--kc-white);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:var(--sp-6);
  animation:kc-modal-in .3s var(--ease-spring);
}
@keyframes kc-modal-in{ from{ opacity:0; transform:translateY(-46%) scale(.97);} to{ opacity:1; transform:translateY(-50%) scale(1);} }
.kc-modal-close{
  position:absolute; top:14px; inset-inline-end:14px; width:36px; height:36px; border-radius:50%;
  border:none; background:var(--bg-subtle); font-size:22px; line-height:1; color:var(--kc-navy); cursor:pointer;
}
.kc-modal-close:hover{ background:var(--kc-grey-200); }
.kc-modal-loading{ padding:var(--sp-7); text-align:center; color:var(--text-muted); }
.kc-qv-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:var(--sp-6); }
.kc-qv-image{ background:var(--bg-subtle); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; padding:var(--sp-6); }
.kc-qv-image img{ max-width:100%; max-height:320px; object-fit:contain; }
.kc-qv-body h2{ font-size:var(--fs-xl); margin:6px 0 var(--sp-3); }
.kc-qv-price{ font-size:var(--fs-xl); font-weight:800; color:var(--kc-navy); margin-bottom:var(--sp-3); }
.kc-qv-price .price-on-request{ font-size:var(--fs-md); color:var(--kc-red); }
.kc-qv-desc{ color:var(--text-muted); font-size:var(--fs-sm); margin-bottom:var(--sp-3); }
.kc-qv-actions{ display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-4); align-items:center; }
@media (max-width:640px){ .kc-qv-grid{ grid-template-columns:1fr; } .kc-qv-image img{ max-height:220px; } }

/* ---- Live search overlay ---- */
.kc-search-overlay{ position:fixed; inset:0; z-index:400; display:none; }
.kc-search-overlay.is-open{ display:block; }
.kc-search-backdrop{ position:absolute; inset:0; background:rgba(16,18,28,.55); backdrop-filter:blur(2px); }
.kc-search-panel{
  position:absolute; inset-inline:0; top:0; margin-inline:auto; width:min(720px,94vw);
  background:var(--kc-white); border-radius:0 0 var(--radius-lg) var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:var(--sp-4); animation:kc-search-in .3s var(--ease-out);
}
@keyframes kc-search-in{ from{ transform:translateY(-16px); opacity:0;} to{ transform:translateY(0); opacity:1;} }
.kc-search-inputwrap{ display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:var(--radius-pill); padding:6px 14px; }
.kc-search-inputwrap svg{ color:var(--text-muted); flex-shrink:0; }
.kc-search-inputwrap input{ flex:1; border:none; padding:10px 4px; font-size:var(--fs-md); background:none; }
.kc-search-inputwrap input:focus{ outline:none; box-shadow:none; }
.kc-search-inputwrap button{ background:none; border:none; font-size:22px; color:var(--text-muted); cursor:pointer; line-height:1; }
.kc-search-results{ margin-top:var(--sp-3); max-height:60vh; overflow-y:auto; }
.kc-search-status{ padding:var(--sp-4); color:var(--text-muted); text-align:center; font-size:var(--fs-sm); }
.kc-search-item{ display:flex; gap:12px; align-items:center; padding:10px; border-radius:var(--radius-sm); }
.kc-search-item:hover{ background:var(--bg-subtle); }
.kc-search-thumb{ width:52px; height:52px; flex-shrink:0; background:var(--bg-subtle); border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.kc-search-thumb img{ width:78%; height:78%; object-fit:contain; }
.kc-search-meta{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.kc-search-cat{ font-size:var(--fs-xs); color:var(--kc-red); font-weight:700; text-transform:uppercase; }
.kc-search-meta strong{ font-size:var(--fs-sm); color:var(--kc-navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kc-search-price{ font-size:var(--fs-xs); color:var(--text-muted); }
.kc-search-all{ display:block; text-align:center; padding:12px; font-weight:700; color:var(--kc-red); font-size:var(--fs-sm); }

/* ---- Recently viewed ---- */
.kc-recently-viewed{ border-top:1px solid var(--border); }

/* ==========================================================================
   v1.2.1 mobile alignment pass
   ========================================================================== */

/* Cart & order tables: stacked card layout on mobile. Replaces the
   responsive behaviour lost when WooCommerce's smallscreen stylesheet was
   dequeued — labels come from WooCommerce's own data-title attributes. */
@media (max-width:768px){
  .woocommerce table.shop_table_responsive thead{ display:none; }
  .woocommerce table.shop_table_responsive tr{
    display:block; border:1px solid var(--border); border-radius:var(--radius-md);
    margin-bottom:var(--sp-4); padding:var(--sp-2) var(--sp-4); background:var(--kc-white);
  }
  .woocommerce table.shop_table_responsive td{
    display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3);
    text-align:end; border:none; border-bottom:1px solid var(--border); padding:10px 0;
  }
  .woocommerce table.shop_table_responsive td:last-child{ border-bottom:none; }
  .woocommerce table.shop_table_responsive td::before{
    content:attr(data-title); font-weight:700; color:var(--text-muted);
    font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em; text-align:start;
  }
  .woocommerce table.shop_table_responsive td.product-remove::before,
  .woocommerce table.shop_table_responsive td.product-thumbnail::before,
  .woocommerce table.shop_table_responsive td.actions::before{ content:none; }
  .woocommerce table.shop_table_responsive td.product-remove,
  .woocommerce table.shop_table_responsive td.actions{ justify-content:flex-end; }
  .woocommerce table.shop_table_responsive td.actions{ display:block; text-align:start; }
  .woocommerce table.shop_table_responsive td.actions .coupon{ display:flex; gap:8px; margin-bottom:10px; }
  .woocommerce table.shop_table_responsive td.actions .coupon #coupon_code{ flex:1; }
  .woocommerce table.shop_table_responsive td.actions > .button{ width:100%; }
}

@media (max-width:640px){
  /* Product tabs scroll instead of wrapping awkwardly */
  .woocommerce-tabs ul.tabs{ overflow-x:auto; white-space:nowrap; flex-wrap:nowrap; gap:var(--sp-5); scrollbar-width:none; }
  .woocommerce-tabs ul.tabs::-webkit-scrollbar{ display:none; }

  /* Typography scale on small screens */
  .woocommerce div.product .summary .product_title{ font-size:1.35rem; }
  .woocommerce div.product .summary p.price{ font-size:var(--fs-xl); }
  .related.products > h2{ font-size:1.35rem; margin-bottom:var(--sp-4); }
  .woocommerce div.product div.images img{ padding:var(--sp-4); }

  /* Sort dropdown aligns full-width under the result count */
  .woocommerce-ordering{ width:100%; }
  .woocommerce-ordering select{ width:100%; }

  /* Sub-category tiles: tighter on phones */
  .kc-subcat-tiles{ grid-template-columns:repeat(2,1fr); }

  /* Quote/contact form cards lose their wide padding */
  .form-grid-2{ gap:var(--sp-3); }

  /* Spec table: give values more room */
  .spec-table th{ width:34%; font-size:var(--fs-xs); }
  .spec-table td{ font-size:var(--fs-sm); }
}