/*
Theme Name: SBK Clinical
Theme URI: https://sbkmedicaltrading.com
Description: SBK Medical Trading — "Clinical Datasheet" child theme. Light, precise, medical-packaging aesthetic carried over from the Astro site.
Author: SBK Medical Trading
Template: twentytwentyfive
Version: 0.1.0
Text Domain: sbk-clinical
*/

:root {
  --sbk-paper: #F4F7FA;
  --sbk-navy: #17335C;
  --sbk-blue: #2C6FB5;
  --sbk-line: #D8E1EA;
  --sbk-muted: #5A6B7E;
}

body { background: var(--sbk-paper); }

/* Mono utility for catalogue codes / specs */
.wp-block-post-excerpt__excerpt,
.woocommerce ul.products li.product .price,
.sbk-mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}

/* Ruler-tick divider — the signature device from the Astro site */
.sbk-ruler {
  height: 22px;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-image:
    repeating-linear-gradient(90deg, #B7C6D6 0 1px, transparent 1px, transparent 9px),
    repeating-linear-gradient(90deg, var(--sbk-navy) 0 1.5px, transparent 1.5px, transparent 45px);
  background-size: 100% 8px, 100% 15px;
}

/* --- Block-theme product cards (Twenty Twenty-Five uses .wc-block-product) --- */
.wc-block-product {
  background: #fff;
  border: 1px solid var(--sbk-line);
  border-radius: 12px;
  overflow: hidden;
  padding: 0 0 16px !important;
  transition: transform 0.15s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.wc-block-product:hover {
  transform: translateY(-3px);
  border-color: var(--sbk-blue);
  box-shadow: 0 20px 44px -28px rgba(14, 30, 51, 0.45);
}
.wc-block-product .wc-block-components-product-image {
  margin: 0 0 12px;
  background: #EAF0F6;
  border-bottom: 1px solid var(--sbk-line);
}
.wc-block-product .wc-block-components-product-image img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 14px;
  width: 100%;
}
.wc-block-product .wp-block-post-title,
.wc-block-product .wc-block-components-product-title {
  padding-inline: 16px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
}
.wc-block-product .wp-block-post-title a { color: #0E1E33; text-decoration: none; }
.wc-block-product .wc-block-components-product-button,
.wc-block-product .wp-block-woocommerce-product-button { padding-inline: 16px; }
.wc-block-product .wc-block-components-product-button a,
.wc-block-product .wp-block-button__link {
  display: inline-block;
  background: var(--sbk-navy);
  color: #fff !important;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.wc-block-product .wc-block-components-product-button a:hover { background: #0C2444; }

/* Classic-template fallback (kept for non-block themes) */
.woocommerce ul.products li.product,
.wc-block-grid__product {
  background: #fff;
  border: 1px solid var(--sbk-line);
  border-radius: 12px;
  overflow: hidden;
  padding: 0 0 16px;
  transition: transform 0.15s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  border-color: var(--sbk-blue);
  box-shadow: 0 20px 44px -28px rgba(14, 30, 51, 0.45);
}
.woocommerce ul.products li.product img {
  background: #EAF0F6;
  border-bottom: 1px solid var(--sbk-line);
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 14px;
  margin-bottom: 12px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 15.5px !important;
  font-weight: 600;
  color: #0E1E33;
  padding-inline: 16px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link + * { padding-inline: 16px; }

/* B2B: no prices, so present the CTA as an enquiry rather than a cart */
.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .button {
  background: var(--sbk-navy);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  margin-inline: 16px;
}
.woocommerce ul.products li.product .button:hover { background: #0C2444; }

/* Single product */
.woocommerce div.product .product_title { letter-spacing: -0.015em; }
.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--sbk-blue);
  font-size: 14px;
}

/* =============================================================
   Header (child theme template part)
   ============================================================= */
.sbk-header {
  background: rgba(244,247,250,.86);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--sbk-line);
  position: sticky; top: 0; z-index: 50;
  padding-block: 0 !important;
}
.sbk-header-inner { min-height: 70px; align-items: center; gap: 20px; }
.sbk-brand { gap: 11px !important; align-items: center; }
.sbk-brand .wp-block-site-logo img { border-radius: 10px; width: 36px; height: 36px; object-fit: contain; }
.sbk-brand-name a, .sbk-brand-name { font-weight: 700; color: #0E1E33 !important; text-decoration: none; font-size: 17px; letter-spacing: -.01em; }
.sbk-nav { gap: 26px !important; align-items: center; }
.sbk-nav-link { margin: 0 !important; font-size: 15px; }
.sbk-nav-link a { color: var(--sbk-muted); text-decoration: none; font-weight: 500; }
.sbk-nav-link a:hover { color: #0E1E33; }
@media (max-width: 700px) { .sbk-nav { display: none !important; } }

/* =============================================================
   Product shortcode grid — replace WooCommerce floats with CSS grid
   ============================================================= */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 18px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; }
.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link { display: block; }
.woocommerce ul.products li.product .button { align-self: flex-start; margin-top: auto; }