/*
Theme Name:  SurgiMedex Storefront Child
Theme URI:   https://www.surgimedex.in
Description: Child theme of Storefront for surgimedex.in — modern marketplace redesign (sticky header, design system, homepage template). v1 scaffold; test on staging before live.
Author:      SurgiMedex
Template:    storefront
Version:     1.2.4
*/

/* =========================================================
   1. DESIGN SYSTEM TOKENS  — adjust these to your brand
   ========================================================= */
:root {
  /* Brand colours — sampled from the Surgimedex logo. */
  --sm-brand-green:   #8CC850;   /* logo honeycomb — brand identity / accents */
  --sm-accent:        #DCA050;   /* logo wordmark gold — secondary accent / badges */
  --sm-accent-dark:   #C4863A;
  --sm-orange:        #D5A25F;   /* brand orange (logo) — links, nav resting, focus rings */
  --sm-primary:       #97C15C;   /* brand green — buttons, outlines, nav (per brand) */
  --sm-primary-dark:  #6FA03C;   /* darker green — legible text on white + hover fills */
  --sm-primary-light: #F0F6E6;
  --sm-ink:           #1A2330;   /* primary text */
  --sm-muted:         #5B6472;   /* secondary text */
  --sm-line:          #E6E9EE;   /* borders / dividers */
  --sm-bg:            #FFFFFF;
  --sm-bg-soft:       #F5F7FA;   /* section backgrounds */
  --sm-success:       #1F9D57;
  --sm-danger:        #E23744;   /* sale / discount */

  /* Typography */
  --sm-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Radius, shadow, layout */
  --sm-radius:       10px;
  --sm-radius-sm:    6px;
  --sm-shadow:       0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --sm-shadow-hover: 0 6px 20px rgba(16,24,40,.10);
  --sm-header-h:     72px;
}

/* =========================================================
   2. BASE
   ========================================================= */
body {
  font-family: var(--sm-font);
  color: var(--sm-ink);
  background: var(--sm-bg);
}

/* =========================================================
   3. ANNOUNCEMENT BAR
   ========================================================= */
.surgimedex-announcement {
  background: var(--sm-ink);
  color: #fff;
  font-size: 13px;
  text-align: center;
  padding: 8px 0;
}
.surgimedex-announcement a { color: #fff; text-decoration: underline; }

/* =========================================================
   4. STICKY HEADER  (logo | search | account | cart)
   ========================================================= */
/* Sticky requires no scroll-container ancestor. Storefront/plugins set
   `overflow-x: hidden` on #page/body, which forces overflow-y to compute as
   `auto` — that creates a scroll container and silently kills position:sticky.
   `overflow-x: clip` clips horizontal overflow the same way but does NOT create
   a scroll container, so the header sticks to the viewport again. */
html, body, #page { overflow-x: clip !important; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--sm-bg) !important;
  border-bottom: 1px solid var(--sm-line);
  box-shadow: var(--sm-shadow);
  padding: 0 !important;
}
/* Keep the sticky header below the WP admin bar for logged-in previews. On mobile
   (<=782px) the admin bar is NOT fixed — it scrolls away — so the header must
   stick at the very top (top:0), otherwise a 46px gap appears. */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }
.site-header .col-full {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--sm-header-h);
  flex-wrap: nowrap;
}

/* Logo — Storefront floats branding and gives it ~591px width; both must be
   overridden or they eat half the header row as dead space. */
.site-header .site-branding {
  float: none !important;
  width: auto !important;
  max-width: 260px;
  margin: 0 !important;
  flex: 0 0 auto;
}
.site-header .site-branding img,
.site-header .site-logo-link img,
.site-header .custom-logo-link img { max-height: 48px; width: auto; }

/* Header search — self-contained rounded pill: [ 🔍  field ............ ].
   This is the plain Storefront/WooCommerce product search (FiboSearch lives in a
   homepage shortcode, not the header). The FORM is the pill; we draw our own
   magnifier and hide the native "Search" button (it renders as a 1px sliver in
   the flex row). Search submits on Enter. flex-basis:0 lets it fill the row. */
.site-header .site-search { display: block !important; flex: 1 1 0; min-width: 240px; max-width: 720px; margin: 0; }
.site-header .site-search .widget { width: 100% !important; margin: 0 !important; padding: 0 !important; }

.site-header .site-search form.woocommerce-product-search {
  position: relative;
  display: flex; align-items: center; width: 100%;
  background: #fff;
  border: 1.5px solid var(--sm-line);
  border-radius: var(--sm-radius);
  overflow: hidden;
}
.site-header .site-search form.woocommerce-product-search:focus-within { border-color: var(--sm-primary); }

/* our own magnifier on the left */
.site-header .site-search form.woocommerce-product-search::before {
  content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; background: var(--sm-muted); pointer-events: none; z-index: 1;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21.7 20.3l-5.4-5.4a8 8 0 10-1.4 1.4l5.4 5.4a1 1 0 001.4-1.4zM4 10a6 6 0 1112 0 6 6 0 01-12 0z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21.7 20.3l-5.4-5.4a8 8 0 10-1.4 1.4l5.4 5.4a1 1 0 001.4-1.4zM4 10a6 6 0 1112 0 6 6 0 01-12 0z'/></svg>") center/contain no-repeat;
}
.site-header .site-search input[type="search"],
.site-header .site-search input.search-field {
  flex: 1 1 auto; width: 100% !important;
  border: none !important; border-radius: 0 !important;
  background: transparent !important;
  padding: 11px 16px 11px 42px;
  font-size: 14px; box-shadow: none !important;
}
.site-header .site-search input.search-field:focus { outline: none; }

/* Hide the native submit button (1px sliver in the flex pill). */
.site-header .site-search form.woocommerce-product-search button,
.site-header .site-search form.woocommerce-product-search input[type="submit"] {
  display: none !important;
}

/* Account + cart pinned right — force flex centering so the icon, label, price
   and basket all sit on the same horizontal centre line as the search pill. */
.site-header .site-header-account,
.site-header .site-header-cart {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  line-height: 1;
}
.site-header-account { flex: 0 0 auto; }
.header-account-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--sm-ink); font-weight: 600; font-size: 14px;
}
.header-account-link:hover { color: var(--sm-primary); }
.account-icon {
  width: 22px; height: 22px; display: inline-block; color: var(--sm-ink);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z'/></svg>") center/contain no-repeat;
}
.site-header .site-header-cart { flex: 0 0 auto; margin: 0; padding: 0; }
/* Cart is a <ul><li><a> — flatten and centre every part (price text + basket
   icon) so nothing hangs below the search/account line. */
.site-header .site-header-cart li { display: flex !important; align-items: center; margin: 0; padding: 0; list-style: none; }
.site-header .site-header-cart .cart-contents {
  display: inline-flex !important; align-items: center; gap: 8px;
  color: var(--sm-ink); font-weight: 600; line-height: 1;
}
.site-header .site-header-cart .cart-contents .amount,
.site-header .site-header-cart .cart-contents .count { line-height: 1; vertical-align: middle; }
.site-header .site-header-cart .cart-contents::before,
.site-header .site-header-cart .cart-contents::after { line-height: 1; vertical-align: middle; margin: 0; }

/* Nav menu row below the top bar. It is "partially sticky": visible at the top,
   then collapses away once the user scrolls past ~120px (JS toggles
   .sm-nav-collapsed on <body>). The top logo/search/cart row stays fully sticky.
   max-height (not overflow) drives the animation so dropdowns aren't clipped. */
.storefront-primary-navigation {
  background: var(--sm-bg);
  border-top: 1px solid var(--sm-line);
}
/* The scroll-collapse (and its max-height) is DESKTOP ONLY — on mobile the nav is
   a tall vertical menu and a 200px cap would clip it, which broke the handheld
   menu. */
@media (min-width: 992px) {
  .storefront-primary-navigation {
    max-height: 200px;
    transition: max-height .28s ease, opacity .2s ease, border-color .28s ease;
  }
  body.sm-nav-collapsed .storefront-primary-navigation {
    max-height: 0 !important; opacity: 0; overflow: hidden; pointer-events: none; border-top-color: transparent;
  }
}

/* Long dropdowns (e.g. Buy Online → By Category) must fit the viewport — but only
   the LEAF submenus scroll. Applying overflow to a submenu that itself contains a
   flyout (has a nested ul.sub-menu) would clip that flyout, breaking the menu. */
.main-navigation ul.sub-menu:not(:has(ul.sub-menu)) {
  max-height: 82vh; overflow-y: auto; overflow-x: hidden;
}
.main-navigation ul li a { font-weight: 600; }
/* Slimmer menu bar — trim the tall default link padding. */
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a,
.main-navigation > div > ul > li > a { padding-top: 14px !important; padding-bottom: 14px !important; }
/* First-level menu items only — brand green, ALL states pinned. Storefront's
   default purple accent (#96588a) leaks into :visited / :focus / current-item,
   and the current page ("Home") is coloured separately with higher specificity —
   so every state is set explicitly here. Submenu (dropdown) links are untouched. */
/* Top-level menu: resting = brand orange; hover/focus = brand green (only while
   the cursor is on the item). Submenu links untouched. */
.main-navigation > div > ul > li > a,
.main-navigation > div > ul > li > a:visited,
.main-navigation ul.menu > li > a,
.main-navigation ul.menu > li > a:visited,
.main-navigation ul.nav-menu > li > a,
.main-navigation ul.nav-menu > li > a:visited,
.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li.current_page_item > a,
.main-navigation > div > ul > li.current-menu-item > a,
.main-navigation > div > ul > li.current_page_item > a { color: var(--sm-orange); }

.main-navigation > div > ul > li > a:hover,
.main-navigation > div > ul > li > a:focus,
.main-navigation > div > ul > li > a:active,
.main-navigation ul.menu > li > a:hover,
.main-navigation ul.menu > li > a:focus,
.main-navigation ul.menu > li > a:active,
.main-navigation ul.menu > li:hover > a { color: var(--sm-primary); }

/* Kill the cosmetic focus outline on mouse click; keep an accessible orange ring
   for keyboard users only. */
.main-navigation a:focus:not(:focus-visible) { outline: 0; box-shadow: none; }
.main-navigation a:focus-visible { outline: 2px solid var(--sm-orange); outline-offset: 2px; }

/* Storefront's default purple accent (#96588a) leaks onto content links, the
   header account link and browser/UA focus rings. Replace it with brand orange
   sitewide, and remove the cosmetic focus box on mouse-click (keyboard keeps an
   orange ring). Components with their own colour (nav, buttons, section links,
   product titles) are unaffected. */
.entry-content a, .woocommerce-account a, .woocommerce-breadcrumb a,
.woocommerce-MyAccount-content a, .site-content a:not(.button):not(.sm-btn):not(.sm-section__all):not(.woocommerce-LoopProduct-link) {
  color: var(--sm-orange);
}
.entry-content a:hover, .woocommerce-account a:hover, .woocommerce-breadcrumb a:hover,
.woocommerce-MyAccount-content a:hover { color: var(--sm-primary-dark); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { color: var(--sm-ink); }

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.header-account-link:focus:not(:focus-visible),
.site-header-cart a:focus:not(:focus-visible) { outline: none; box-shadow: none; }
a:focus-visible, button:focus-visible,
.header-account-link:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--sm-orange) !important; outline-offset: 2px;
}

/* =========================================================
   5. BUTTONS
   ========================================================= */
/* Primary — Add to cart, form submits */
button, .button, input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background: var(--sm-primary);
  color: #fff !important;
  border-radius: var(--sm-radius-sm);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .3px;
  padding: 10px 18px;
  border: none;
  transition: background .15s ease, box-shadow .15s ease;
}
button:hover, .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
  background: var(--sm-primary-dark);
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(78,154,38,.22);
}
/* Product-card buttons — ALL outlined (neutral bg, green outline). Applies to
   Add to cart, Select options, Read more alike so the grid reads uniformly. */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product button.button {
  background: transparent !important;
  color: var(--sm-primary-dark) !important;
  border: 1.5px solid var(--sm-primary) !important;
  box-shadow: none !important;
  width: 100%;
  text-align: center;
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product button.button:hover {
  background: var(--sm-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}
/* Out of stock / disabled — neutral gray, non-interactive.
   Scoped to the product card + kept as the last rule so it beats the outlined
   rule above (which also matches .button). */
.woocommerce ul.products li.product a.button.disabled,
.woocommerce ul.products li.product button.button.disabled,
.woocommerce ul.products li.product a.button:disabled,
.woocommerce ul.products li.product button.button:disabled,
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce a.button:disabled,
.woocommerce button.button:disabled {
  background: var(--sm-bg-soft) !important;
  color: var(--sm-muted) !important;
  border: 1.5px solid var(--sm-line) !important;
  cursor: not-allowed !important;
  pointer-events: none;
  box-shadow: none !important;
}

/* =========================================================
   6. PRODUCT CARDS
   ========================================================= */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: #fff;
  border: 1px solid var(--sm-line);
  border-radius: var(--sm-radius);
  padding: 12px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.woocommerce ul.products li.product:hover {
  box-shadow: var(--sm-shadow-hover);
  transform: translateY(-2px);
}
/* Prices — normalise weight/size so every card reads identically (sale, range
   and regular prices were rendering at mixed weights). Active price bold, the
   struck-through original muted + lighter, no underline on <ins>. */
.woocommerce ul.products li.product .price { color: var(--sm-ink); font-weight: 700; font-size: 15px; }
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price .woocommerce-Price-amount { font-weight: 700; text-decoration: none; }
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .woocommerce-Price-amount { color: var(--sm-muted); font-weight: 400; }
.woocommerce span.onsale {
  background: var(--sm-danger);
  color: #fff;
  border-radius: 100px;
  min-height: auto; min-width: auto;
  padding: 3px 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase;
  line-height: 1.5;
}
/* Star ratings — brand gold (#DCA050) instead of WooCommerce purple */
.woocommerce .star-rating { color: var(--sm-accent); }
.woocommerce .star-rating::before { color: var(--sm-line); }
.woocommerce .star-rating span::before { color: var(--sm-accent); }

/* =========================================================
   7. RESPONSIVE — mobile header
   ========================================================= */
@media (max-width: 768px) {
  .site-header .col-full { flex-wrap: wrap; gap: 12px; min-height: auto; padding: 10px 0; }
  .site-header .site-search { order: 3; flex: 1 1 100%; max-width: 100%; }
  .account-label { display: none; }   /* icon-only on mobile */
}

/* Mobile handheld menu — clear "Menu" toggle + a clean vertical list (the desktop
   nav-collapse is scoped away above so the menu is never clipped). */
@media (max-width: 991px) {
  .site-header .menu-toggle,
  .storefront-primary-navigation .menu-toggle,
  button.menu-toggle {
    display: block !important; width: 100%; margin: 0 !important;
    background: #fff !important; color: var(--sm-ink) !important;
    border: 1.5px solid var(--sm-line) !important; border-radius: var(--sm-radius-sm) !important;
    padding: 12px 16px !important; font-weight: 700; font-size: 15px; text-align: center; line-height: 1.2;
  }
  .site-header .menu-toggle:hover { background: var(--sm-bg-soft) !important; }
  /* Vertical menu list — full width, tidy rows, brand colours. */
  .main-navigation ul.menu,
  .main-navigation ul.nav-menu { display: block; }
  .main-navigation ul li { float: none; width: 100%; }
  .main-navigation ul li a {
    display: block; padding: 13px 16px !important; border-bottom: 1px solid var(--sm-line);
    color: var(--sm-ink) !important; font-weight: 600;
  }
  .main-navigation ul li a:hover,
  .main-navigation ul li a:focus { color: var(--sm-primary-dark) !important; background: var(--sm-bg-soft); }
  .main-navigation ul.menu > li > a,
  .main-navigation ul.nav-menu > li > a { color: var(--sm-ink) !important; padding-top: 13px !important; padding-bottom: 13px !important; }
}

/* =========================================================
   7b. MOBILE PRODUCT BUY BOX (native layout; the desktop 2-col pin is >=992px)
   Full-width comfortable dropdowns + a clean stacked Add to Cart / Buy Now.
   ========================================================= */
@media (max-width: 991px) {
  .single-product form.cart table.variations,
  .single-product form.cart table.variations tbody { width: 100%; }
  .single-product form.cart table.variations td { display: block; width: 100%; }
  .single-product form.cart .variations th.label { text-align: left; padding-bottom: 4px; }
  .single-product form.cart .variations td.value select,
  .single-product form.cart .variations select {
    width: 100% !important; max-width: 100% !important;
    padding: 12px 40px 12px 14px !important; font-size: 15px !important; height: auto !important;
  }
  .single-product form.cart .woocommerce-variation-price { font-size: 22px !important; font-weight: 800 !important; }

  /* Quantity a comfortable tap size, on its own line. */
  .single-product form.cart .quantity.sm-qty { display: inline-flex !important; height: 48px; margin: 4px 0 12px !important; }
  .single-product form.cart .quantity.sm-qty input.qty { width: 46px !important; }
  .single-product form.cart .quantity.sm-qty .sm-qty__btn { width: 44px; }

  /* Add to Cart + Buy Now — matching full-width stacked buttons. */
  .single-product form.cart .single_add_to_cart_button,
  .single-product form.cart .sm-buy-now {
    display: block !important; width: 100% !important; margin: 0 0 10px !important;
    padding: 15px !important; font-size: 16px !important; text-align: center; border-radius: 8px; min-width: 0;
  }
  .single-product form.cart .sm-buy-now {
    background: var(--sm-accent) !important; color: #fff !important; border: 1.5px solid var(--sm-accent) !important; margin-left: 0 !important;
  }
}

/* Buy Now mirrors Add to Cart's disabled state on variable products (WooCommerce
   adds .woocommerce-variation-add-to-cart-disabled until a variation is chosen). */
.woocommerce-variation-add-to-cart-disabled .sm-buy-now { opacity: .5; pointer-events: none; }

/* =========================================================
   8. HOMEPAGE  (front-page.php)
   ========================================================= */
.surgimedex-home .sm-section { margin: 0 0 48px; }

/* Section heading row */
.sm-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.sm-section__head h2 { margin: 0; font-size: 22px; font-weight: 700; color: var(--sm-ink); }
.sm-section__all { font-size: 14px; font-weight: 600; color: var(--sm-primary); white-space: nowrap; text-decoration: none; }
.sm-section__all:hover { color: var(--sm-primary-dark); }

/* Buttons — solid hero CTA uses the darker green so white text stays legible
   (the light brand green is reserved for outlines/accents). */
.sm-btn { display: inline-block; background: var(--sm-primary-dark); color: #fff !important; font-weight: 600;
  border-radius: var(--sm-radius-sm); padding: 12px 22px; text-decoration: none; transition: background .15s ease; }
.sm-btn:hover { background: var(--sm-ink); }
.sm-btn--lg { padding: 14px 28px; font-size: 16px; }

/* Hero SLIDER — brand gradient panel. Headline text is real HTML (good for
   SEO/LCP). Slides are stacked in one grid cell and cross-faded via JS; the
   container sizes to the tallest slide so there's no layout jump on rotation. */
.sm-hero { position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--sm-primary-light), #fff 68%);
  border: 1px solid var(--sm-line); border-radius: var(--sm-radius); padding: 48px 40px; margin: 8px 0 48px; }
.sm-hero__slides { display: grid; }
.sm-hero__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s ease; }
.sm-hero__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

.sm-hero__text { max-width: 640px; position: relative; z-index: 2; }
/* Capitalize Each Word of the hero headlines + CTAs (per request). */
.sm-hero h1 { margin: 0 0 14px; font-size: 34px; line-height: 1.15; font-weight: 800; color: var(--sm-ink); text-transform: capitalize; }
.sm-hero p { margin: 0 0 24px; font-size: 17px; color: var(--sm-muted); }
.sm-btn { text-transform: capitalize; }

/* Slide with a product image → two columns; text-only slide → centred single col */
@media (min-width: 901px) {
  .sm-hero__slide--media { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 32px; }
}
.sm-hero__slide--text { display: flex; align-items: center; min-height: 300px; }
.sm-hero__slide--text .sm-hero__text { max-width: 780px; }

.sm-hero__media { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.sm-hero__media img { max-width: 100%; height: auto; max-height: 340px; object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(61,125,28,.16)); }

/* Slider dots */
.sm-hero__dots { position: absolute; bottom: 18px; left: 40px; display: flex; gap: 8px; z-index: 3; }
.sm-hero__dot { width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%;
  background: rgba(26,35,48,.22); cursor: pointer; transition: width .2s ease, background .2s ease; }
.sm-hero__dot.is-active { background: var(--sm-primary-dark); width: 26px; border-radius: 5px; }

@media (max-width: 900px) {
  .sm-hero__slide--media { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .sm-hero__text { max-width: none; }
  .sm-hero__media { order: -1; }
  .sm-hero__media img { max-height: 200px; }
  .sm-hero__dots { left: 22px; }
}

/* Specialty tiles */
.sm-specialty-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.sm-specialty-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  background: #fff; border: 1px solid var(--sm-line); border-radius: var(--sm-radius); padding: 18px 12px;
  text-decoration: none; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.sm-specialty-card:hover { box-shadow: var(--sm-shadow-hover); transform: translateY(-2px); border-color: var(--sm-brand-green); }
.sm-specialty-card__img { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; background: var(--sm-primary-light); }
.sm-specialty-card__img img { width: 100%; height: 100%; object-fit: cover; }
.sm-specialty-card__ph { font-size: 28px; font-weight: 800; color: var(--sm-primary); }
.sm-specialty-card__name { font-size: 14px; font-weight: 700; color: var(--sm-ink); line-height: 1.25; }
.sm-specialty-card__count { font-size: 12px; color: var(--sm-muted); }

/* Product carousels — turn the WooCommerce grid into a horizontal scroller (no JS) */
.sm-carousel ul.products { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden;
  gap: 16px; margin: 0 !important; padding: 4px 0 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.sm-carousel ul.products::before, .sm-carousel ul.products::after { content: none !important; display: none !important; }
.sm-carousel ul.products li.product { flex: 0 0 210px !important; width: 210px !important; max-width: 210px; margin: 0 !important;
  scroll-snap-align: start; padding: 12px; }
.sm-carousel ul.products li.product::before { content: none !important; }
.sm-carousel ul.products li.product img { margin: 0 auto 10px; }
.sm-carousel ul.products::-webkit-scrollbar { height: 8px; }
.sm-carousel ul.products::-webkit-scrollbar-thumb { background: var(--sm-line); border-radius: 8px; }

/* Trust strip */
.sm-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  background: var(--sm-bg-soft); border: 1px solid var(--sm-line); border-radius: var(--sm-radius); padding: 24px; }
.sm-trust__item { display: flex; flex-direction: column; gap: 4px; }
.sm-trust__item strong { font-size: 15px; color: var(--sm-ink); }
.sm-trust__item span { font-size: 13px; color: var(--sm-muted); }

/* Homepage responsive */
@media (max-width: 1024px) {
  .sm-specialty-grid { grid-template-columns: repeat(4, 1fr); }
  .sm-trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sm-hero { padding: 36px 22px; }
  .sm-hero h1 { font-size: 26px; }
  .sm-specialty-grid { grid-template-columns: repeat(3, 1fr); }
  .sm-carousel ul.products li.product { flex-basis: 160px !important; width: 160px !important; }
}
@media (max-width: 480px) {
  .sm-specialty-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   9. FULL-WIDTH LAYOUT
   Storefront centres everything in a ~864px `.col-full`. Widen it site-wide
   (header, content, footer) for the modern full-width marketplace look.
   ========================================================= */
.col-full {
  max-width: 1600px !important;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .col-full { padding-left: 16px; padding-right: 16px; }
}

/* Storefront reserves ~30% for a right sidebar on product pages, but no sidebar
   renders — reclaim it so content fills the full width. */
.tax-product_cat #primary,
.post-type-archive-product #primary,
.single-product #primary {
  width: 100% !important; float: none !important; margin: 0 !important;
}
/* A leftover product-categories widget still renders in #secondary on these
   pages (it was peeking on the right after "Common Questions"). Hide it. */
.tax-product_cat #secondary,
.post-type-archive-product #secondary,
.single-product #secondary { display: none !important; }

/* =========================================================
   10. FiboSearch IN HEADER (predictive search)
   Styled to match the plain-search pill above. FiboSearch wraps input + submit
   button in .dgwt-wcas-sf-wrapp — that becomes our pill container.
   ========================================================= */
.site-header .site-search .dgwt-wcas-search-wrapp,
.site-header .site-search .dgwt-wcas-search-form-wrapp,
.site-header .site-search form.dgwt-wcas-search-form { width: 100% !important; max-width: none !important; margin: 0; }

.site-header .site-search .dgwt-wcas-sf-wrapp {
  display: flex !important; align-items: center;
  background: #fff;
  border: 1.5px solid var(--sm-line) !important;
  border-radius: var(--sm-radius) !important;
  overflow: hidden;
  transition: border-color .15s ease;
}
.site-header .site-search .dgwt-wcas-sf-wrapp:focus-within { border-color: var(--sm-primary) !important; }

.site-header .site-search input.dgwt-wcas-search-input {
  flex: 1 1 auto !important; width: 100% !important;
  border: none !important; border-radius: 0 !important; outline: none !important;
  padding: 11px 14px !important; height: 44px !important;
  font-size: 14px !important; background: transparent !important; box-shadow: none !important;
}

/* Keep FiboSearch's own submit icon (shown on the right as a clickable magnifier) */
.site-header .site-search button.dgwt-wcas-search-submit {
  flex: 0 0 auto !important;
  background: none !important; border: none !important; border-left: 1px solid var(--sm-line) !important;
  padding: 0 14px !important; height: 44px !important;
  display: flex !important; align-items: center; justify-content: center;
  color: var(--sm-muted) !important; cursor: pointer; transition: color .15s ease, background .15s ease;
  border-radius: 0 !important;
}
.site-header .site-search button.dgwt-wcas-search-submit:hover {
  color: var(--sm-primary) !important;
  background: var(--sm-primary-light) !important;
}
.site-header .site-search button.dgwt-wcas-search-submit svg { width: 18px; height: 18px; fill: currentColor; }

/* Predictive results dropdown */
.site-header .site-search .dgwt-wcas-suggestions-wrapp {
  border-radius: 0 0 var(--sm-radius) var(--sm-radius) !important;
  border-color: var(--sm-line) !important;
  box-shadow: var(--sm-shadow-hover) !important;
}

/* =========================================================
   11. SHOP / CATEGORY ARCHIVE POLISH
   ========================================================= */
/* Styled dropdowns (WooCommerce ordering + custom Category/Type/Company/Price filters) */
.woocommerce select,
.woocommerce-page select {
  border: 1.5px solid var(--sm-line); border-radius: var(--sm-radius-sm);
  padding: 9px 34px 9px 12px; font-size: 14px; line-height: 1.3;
  background-color: #fff; color: var(--sm-ink);
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6472' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
.woocommerce select:focus { border-color: var(--sm-primary); outline: none; }

/* Equal-height product cards via CSS grid (archive pages; carousels stay flex).
   columns-2 included so cart cross-sells grid instead of stacking full-width. */
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5 { display: grid; gap: 20px; margin: 0 0 24px; }
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
.woocommerce ul.products.columns-2::before, .woocommerce ul.products.columns-2::after,
.woocommerce ul.products.columns-3::before, .woocommerce ul.products.columns-3::after,
.woocommerce ul.products.columns-4::before, .woocommerce ul.products.columns-4::after,
.woocommerce ul.products.columns-5::before, .woocommerce ul.products.columns-5::after { content: none !important; display: none !important; }

.woocommerce ul.products li.product {
  display: flex !important; flex-direction: column;
  float: none !important; margin: 0 !important; box-sizing: border-box;
}
/* CRITICAL: a plugin (Customizer for WooCommerce) re-applies Storefront's float
   width `22.05% !important` AFTER our stylesheet at equal specificity, so it wins
   by source order and collapses grid items (li → ~72px, image → ~46px). The extra
   `.type-product` class (present on every product) raises specificity so we win
   regardless of load order. Keep this selector — plain `li.product` is not enough. */
.woocommerce ul.products li.product.type-product,
.woocommerce-page ul.products li.product.type-product {
  width: 100% !important; max-width: 100% !important;
}
.woocommerce ul.products li.product::before { content: none !important; }
/* Product link must be a full-width block so the image can fill it. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link { display: block; width: 100%; }
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
  width: 100% !important; height: auto !important;
  aspect-ratio: 1 / 1; object-fit: contain; background: #fff; margin: 0 auto 12px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 14px; line-height: 1.35; min-height: 2.7em; }
/* push add-to-cart to the bottom so every card aligns */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart { margin-top: auto; }

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

/* =========================================================
   11b. SHOP / CATEGORY ARCHIVE — compact the header so the first product row
   appears sooner (title + sorting + filters take much less vertical space, and
   the cards are a little shorter).
   ========================================================= */
.post-type-archive-product .woocommerce-products-header,
.tax-product_cat .woocommerce-products-header { margin: 0 0 6px !important; }
.post-type-archive-product .woocommerce-products-header__title,
.post-type-archive-product h1.page-title,
.tax-product_cat .woocommerce-products-header__title,
.tax-product_cat h1.page-title { font-size: 28px !important; line-height: 1.1 !important; margin: 0 0 4px !important; }

.post-type-archive-product .storefront-sorting,
.tax-product_cat .storefront-sorting { margin: 0 0 10px !important; }
.post-type-archive-product .woocommerce-result-count,
.post-type-archive-product .woocommerce-ordering,
.tax-product_cat .woocommerce-result-count,
.tax-product_cat .woocommerce-ordering { margin-bottom: 0 !important; }

/* Filters on ONE line (large screens): each control is a compact label-above-
   dropdown group; the Reset button sits at the right of the same row. The
   decorative "FILTERS" heading is hidden. */
.shop-filters-horizontal {
  display: flex !important; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px;
  padding: 12px 18px !important; margin: 0 0 12px !important;
}
.shop-filters-horizontal .filters-heading { display: none !important; }
.shop-filters-horizontal .filter-item {
  display: flex !important; flex-direction: column; gap: 4px; margin: 0 !important;
  flex: 1 1 150px; min-width: 140px;
}
.shop-filters-horizontal .filter-item label {
  margin: 0 !important; padding: 0 !important; white-space: nowrap;
  font-size: 12px; font-weight: 700; color: var(--sm-ink); line-height: 1.2;
}
.shop-filters-horizontal .filter-item select {
  width: 100% !important; margin: 0 !important;
  padding-top: 8px !important; padding-bottom: 8px !important;
}
.shop-filters-horizontal .filter-reset { margin-left: auto; align-self: flex-end; }
.shop-filters-horizontal .filter-reset button,
.shop-filters-horizontal .filter-reset a,
.shop-filters-horizontal .filter-reset input {
  white-space: nowrap; padding: 9px 18px !important;
}
/* On tablet, allow the groups to wrap to two lines gracefully. */
@media (max-width: 900px) {
  .shop-filters-horizontal .filter-item { flex: 1 1 44%; }
  .shop-filters-horizontal .filter-reset { margin-left: 0; flex: 1 1 100%; align-self: stretch; }
}

/* Archive product images — a touch taller (~20% bigger than 4/3) for better
   presence, while still shorter than the original square. */
.post-type-archive-product ul.products li.product a img,
.tax-product_cat ul.products li.product a img,
.post-type-archive-product ul.products li.product img.attachment-woocommerce_thumbnail,
.tax-product_cat ul.products li.product img.attachment-woocommerce_thumbnail {
  aspect-ratio: 10 / 9 !important; margin-bottom: 8px !important;
}
.post-type-archive-product ul.products li.product,
.tax-product_cat ul.products li.product { padding: 10px !important; }

/* =========================================================
   12. SINGLE PRODUCT PAGE
   ========================================================= */
/* Related / up-sell products render as columns-3 (huge 440px cards). Force 4
   across so they match the shop card size instead of dwarfing the page. */
.woocommerce .related.products ul.products,
.woocommerce .upsells.products ul.products,
.woocommerce .up-sells.products ul.products,
.woocommerce section.related ul.products,
.woocommerce section.up-sells ul.products {
  display: grid !important;                 /* explicit — never let items stack in a column */
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important; margin: 0 0 24px !important;
}
@media (max-width: 1024px) {
  .woocommerce .related.products ul.products,
  .woocommerce .upsells.products ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
  .woocommerce .related.products ul.products,
  .woocommerce .upsells.products ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Custom FAQ blocks render question text in white — invisible on the white card.
   Two systems exist: product pages use `.smx-faq-*`; the tracking page / others
   use `.sf-faq-*`. Restore readable ink colour on both. */
.smx-faq-q,
.smx-faq-q span,
.smx-faq-item .smx-faq-q,
.sf-faq-q,
.sf-faq-q-text,
.sf-faq-item .sf-faq-q { color: var(--sm-ink) !important; }
.smx-faq-a,
.smx-faq-a *,
.sf-faq-a,
.sf-faq-a * { color: var(--sm-muted) !important; }

/* =========================================================
   13. HEADER MINI-CART FLYOUT (hover dropdown)
   ========================================================= */
.site-header-cart .widget_shopping_cart,
.site-header-cart .widget_shopping_cart_content { min-width: 360px; padding: 20px 22px !important; box-sizing: border-box; }
/* Anchor the flyout to the cart's right edge (not overflowing toward the
   viewport/scrollbar) and never let it touch the screen edges. */
.site-header .site-header-cart .widget_shopping_cart {
  right: 0 !important; left: auto !important;
  max-width: calc(100vw - 32px);
}
.site-header-cart .woocommerce-mini-cart { margin: 0 !important; }

/* Line items — thumbnail left, name + price with real breathing room */
.site-header-cart .woocommerce-mini-cart li.woocommerce-mini-cart-item,
.site-header-cart .cart_list li {
  position: relative; padding: 14px 44px 14px 60px !important; margin: 0 !important;
  line-height: 1.45; border-bottom: 1px solid var(--sm-line);
}
.site-header-cart .woocommerce-mini-cart li.woocommerce-mini-cart-item:last-child { border-bottom: none; }
.site-header-cart .woocommerce-mini-cart-item img,
.site-header-cart .cart_list li img {
  position: absolute; left: 0; top: 14px; width: 46px !important; height: auto; margin: 0 !important; border: 1px solid var(--sm-line); border-radius: 6px;
}
/* remove (×) — Storefront leaves it position:relative so it sits inline and
   crowds the product name. Force it absolute in the top-right corner, clear of
   the thumbnail (left) and the name. */
.site-header-cart .woocommerce-mini-cart-item a.remove,
.site-header-cart .woocommerce-mini-cart-item a.remove.remove_from_cart_button {
  position: absolute !important; top: 14px; right: 14px !important; left: auto !important; margin: 0 !important;
  width: 20px; height: 20px; line-height: 18px; text-align: center; font-size: 15px;
}
.site-header-cart .woocommerce-mini-cart__total { padding: 14px 0; margin: 6px 0 0; border-top: 2px solid var(--sm-line); font-size: 15px; }

/* Buttons: "View cart" was white text on #eee (invisible). Make it an outlined
   green button; "Checkout" a solid green button. Stack with spacing. */
.site-header-cart .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 0; }
.site-header-cart .woocommerce-mini-cart__buttons .button {
  width: 100%; text-align: center; margin: 0 !important;
  background: #fff !important; color: var(--sm-primary-dark) !important;
  border: 1.5px solid var(--sm-primary) !important;
}
.site-header-cart .woocommerce-mini-cart__buttons .button:hover {
  background: var(--sm-primary-light) !important; color: var(--sm-primary-dark) !important;
}
.site-header-cart .woocommerce-mini-cart__buttons .button.checkout {
  background: var(--sm-primary-dark) !important; color: #fff !important; border-color: var(--sm-primary-dark) !important;
}
.site-header-cart .woocommerce-mini-cart__buttons .button.checkout:hover {
  background: var(--sm-ink) !important; border-color: var(--sm-ink) !important; color: #fff !important;
}

/* =========================================================
   14. CART PAGE  (/shop/cart/)
   JS (functions.php) moves "Proceed to checkout" into the actions row next to
   "Update cart" and adds .sm-cart-restructured to <body>. Then the totals box is
   hidden and cross-sells go full-width, 4 across. If the JS doesn't run, the
   original totals box (with its own checkout button) stays visible as a fallback.
   ========================================================= */
/* Actions row: order total on top, then Update cart + Proceed to checkout —
   large, centred, unmissable, with a hover lift.
   IMPORTANT: `td.actions` must stay `display: table-cell` — setting flex/block on
   a <td> breaks its colspan and collapses the cell to ~495px. So we centre with
   text-align + inline-block, NOT flexbox. */
.woocommerce-cart form.woocommerce-cart-form td.actions {
  text-align: center !important; padding: 30px 16px !important;
}
.woocommerce-cart form.woocommerce-cart-form td.actions .coupon { display: inline-flex; gap: 8px; margin: 0 0 16px; }

/* Order total (injected by functions.php via woocommerce_cart_actions) */
.sm-cart-total-wrap { display: block; text-align: center; font-size: 17px; color: var(--sm-muted); margin: 0 0 14px; }
.sm-cart-total-wrap strong { font-size: 24px; color: var(--sm-ink); font-weight: 800; }

.woocommerce-cart form.woocommerce-cart-form td.actions button[name="update_cart"],
.woocommerce-cart form.woocommerce-cart-form td.actions .sm-cart-checkout {
  display: inline-block; vertical-align: middle; margin: 6px 9px !important;
  padding: 16px 42px !important; font-size: 16px !important; min-width: 230px; text-align: center;
  border-radius: 8px; box-shadow: 0 2px 6px rgba(16,24,40,.08);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease !important;
}
/* Proceed to checkout — the primary, always-active green button */
.woocommerce-cart form.woocommerce-cart-form td.actions .sm-cart-checkout {
  background: var(--sm-primary-dark) !important; color: #fff !important;
  border: 1.5px solid var(--sm-primary-dark) !important;
}
.woocommerce-cart form.woocommerce-cart-form td.actions .sm-cart-checkout:hover {
  background: var(--sm-ink) !important; border-color: var(--sm-ink) !important; color: #fff !important;
  transform: translateY(-2px); box-shadow: 0 12px 26px rgba(61,125,28,.28);
}
/* Update cart — secondary outlined; solid green once it's active (cart changed) */
.woocommerce-cart form.woocommerce-cart-form td.actions button[name="update_cart"] {
  background: #fff !important; color: var(--sm-primary-dark) !important;
  border: 1.5px solid var(--sm-primary) !important;
}
.woocommerce-cart form.woocommerce-cart-form td.actions button[name="update_cart"]:not([disabled]):hover {
  background: var(--sm-primary-light) !important; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(16,24,40,.12);
}

/* After JS moves the checkout button: hide the now-empty totals box and let
   cross-sells span the full width. */
.sm-cart-restructured .cart-collaterals .cart_totals { display: none !important; }
.sm-cart-restructured .cart-collaterals,
.sm-cart-restructured .cart-collaterals .cross-sells { width: 100% !important; float: none !important; margin: 0 !important; }

/* Cross-sells: 4 columns, a touch smaller, full width below the cart */
.woocommerce-cart .cross-sells ul.products { grid-template-columns: repeat(4, 1fr) !important; }
.woocommerce-cart .cross-sells > h2 { font-size: 20px; margin: 8px 0 16px; }
@media (max-width: 1024px) { .woocommerce-cart .cross-sells ul.products { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 640px)  { .woocommerce-cart .cross-sells ul.products { grid-template-columns: repeat(2, 1fr) !important; } }

/* =========================================================
   14. SINGLE PRODUCT — 2-column sticky layout (desktop) + mobile buy bar
   (built by JS in functions.php; see surgimedex_product_page_js)
   ========================================================= */
/* Sticky needs a non-clipping ancestor, but WooCommerce ships div.product with
   overflow:hidden (a float clearfix). Our columns use grid, so it's safe to open. */
.single-product div.product { overflow: visible !important; }

/* Buy Now — gold accent so it stands apart from the green Add to Cart. */
.sm-buy-now {
  background: var(--sm-accent) !important; color: #fff !important;
  border: 1.5px solid var(--sm-accent) !important; margin-left: 10px !important;
}
.sm-buy-now:hover { background: var(--sm-accent-dark) !important; border-color: var(--sm-accent-dark) !important; color: #fff !important; }

/* Price — larger and bolder. */
.single-product .summary .price,
.sm-pdp__right .price {
  font-size: 30px !important; font-weight: 800 !important; color: var(--sm-ink) !important; margin: 6px 0 18px !important;
}
.single-product .summary .price del,
.sm-pdp__right .price del { font-size: 20px; font-weight: 400; color: var(--sm-muted); }
.single-product .summary .price ins,
.sm-pdp__right .price ins { text-decoration: none; }

/* Purchase buttons — rounded, with a hover lift; selects highlight on hover. */
.single-product form.cart .single_add_to_cart_button,
.single-product form.cart .sm-buy-now {
  border-radius: 8px;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease !important;
}
.single-product form.cart .single_add_to_cart_button:hover,
.single-product form.cart .sm-buy-now:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,24,40,.16); }
.single-product .summary select:hover { border-color: var(--sm-primary); }

/* Quantity −/+ stepper. Inline with the buttons (not cornered), and the ± glyphs
   forced dark — the global button rule sets color:#fff !important, which made
   them invisible. */
.single-product form.cart .quantity.sm-qty {
  float: none !important; display: inline-flex !important; vertical-align: middle;
  align-items: stretch; background: #fff;
  border: 1.5px solid var(--sm-line); border-radius: 8px; overflow: hidden;
  margin: 0 14px 12px 0 !important; height: 50px;
}
.sm-qty input.qty {
  width: 56px !important; text-align: center; border: none !important; border-radius: 0 !important;
  box-shadow: none !important; font-size: 16px; font-weight: 700; -moz-appearance: textfield; padding: 0 !important;
}
.sm-qty input.qty::-webkit-outer-spin-button,
.sm-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sm-qty__btn {
  border: none !important; background: var(--sm-bg-soft) !important; color: var(--sm-ink) !important;
  width: 42px; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease !important;
}
.sm-qty__btn:hover { background: var(--sm-primary) !important; color: #fff !important; transform: none; }
.sm-qty__minus { border-right: 1.5px solid var(--sm-line) !important; }
.sm-qty__plus  { border-left: 1.5px solid var(--sm-line) !important; }

/* Desktop: 2 columns — LEFT is pinned (position:fixed, driven by JS so it never
   moves at all), RIGHT scrolls. The left column is absolute inside a relative
   .sm-pdp; JS flips it to fixed while in the pin zone and back to absolute at the
   wrapper's top/bottom. Product images vary wildly in size, so the gallery is
   locked to a fixed 400px height (object-fit:contain) — this keeps the buy
   actions at a constant position across every product. */
@media (min-width: 992px) {
  .sm-pdp { position: relative; display: block; margin: 8px 0 44px; }
  .sm-pdp__left { position: absolute; top: 0; left: 0; width: 44%; box-sizing: border-box;
    /* Never taller than the viewport — if a product has many variations, the buy
       box scrolls internally instead of pushing the buttons off-screen. */
    max-height: calc(100vh - 104px); overflow-y: auto; overflow-x: hidden; }
  .sm-pdp__right { margin-left: 48%; min-width: 0; }

  /* Strip Storefront's floats/widths inside the new columns. */
  .sm-pdp .woocommerce-product-gallery,
  .sm-pdp .wcgs-woocommerce-product-gallery,
  .sm-pdp .summary.entry-summary {
    width: 100% !important; float: none !important; margin: 0 !important;
  }

  /* Sale badge rides along inside the pinned column (was scrolling away). */
  .sm-pdp__left { }
  .sm-pdp__left > .onsale {
    position: absolute !important; top: 12px; left: 12px; right: auto; z-index: 6; margin: 0 !important;
  }

  /* Standardise the gallery height so it never shifts the buy actions. Kept
     compact (340px) so the gallery + variations + buttons fit one screen. */
  .sm-pdp__left .wcgs-woocommerce-product-gallery,
  .sm-pdp__left .woocommerce-product-gallery { overflow: hidden; }
  .sm-pdp__left .wcgs-woocommerce-product-gallery,
  .sm-pdp__left .wcgs-carousel,
  .sm-pdp__left .spswiper-wrapper,
  .sm-pdp__left .spswiper-slide,
  .sm-pdp__left .wcgs-slider-image { height: 380px !important; }
  .sm-pdp__left .wcgs-slider-image-tag,
  .sm-pdp__left .woocommerce-product-gallery img {
    height: 380px !important; width: 100% !important; object-fit: contain !important;
  }

  /* Keep the purchase card compact so selecting a variation never pushes the
     Add to Cart / Buy Now buttons off-screen: hide the long variation
     description here (it still shows in the right-column Description), and cap
     the price/availability block. */
  .sm-pdp__left form.cart .woocommerce-variation-description { display: none !important; }
  .sm-pdp__left form.cart .woocommerce-variation { margin: 2px 0 !important; }
  .sm-pdp__left form.cart { padding: 11px 13px !important; }
  .sm-pdp__left form.cart .quantity.sm-qty { height: 42px; margin: 0 !important; }

  /* Variations in a 2-COLUMN grid to save vertical space — attributes sit
     side-by-side (label above each dropdown). auto-fit means a single-attribute
     product spans full width, two sit in two columns, more wrap. */
  .sm-pdp__left form.cart table.variations,
  .sm-pdp__left form.cart table.variations thead { display: block; width: 100%; }
  .sm-pdp__left form.cart table.variations tbody {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 12px; align-items: start; margin: 0;
  }
  .sm-pdp__left form.cart table.variations tr { display: block; margin: 0; }
  .sm-pdp__left form.cart table.variations th.label {
    display: block; width: auto; text-align: center; padding: 0 0 2px; font-weight: 600; font-size: 11px; line-height: 1.2;
  }
  .sm-pdp__left form.cart table.variations td.value { display: block; width: auto; text-align: center; padding: 0; }
  .sm-pdp__left form.cart table.variations td.value select {
    display: block !important; width: 100% !important; max-width: 100% !important;
    margin: 0 !important; padding: 6px 24px 6px 8px; font-size: 13px;
  }
  .sm-pdp__left form.cart .reset_variations { display: inline-block; text-align: center; margin: 3px 0 0; font-size: 12px; }

  /* Price — moved (by JS) into the variations grid so it fills the empty cell
     next to the dropdowns. It is a grid item; WooCommerce controls its show/hide,
     so we do NOT force `display` here (that would reveal an empty cell before a
     variation is picked). align-self centres it in the cell. */
  .sm-pdp__left form.cart .woocommerce-variation { margin: 0 !important; }
  .sm-pdp__left form.cart table.variations tbody .single_variation {
    text-align: center; margin: 0 !important; align-self: center; min-width: 0;
  }
  .sm-pdp__left form.cart .single_variation .price,
  .sm-pdp__left form.cart .woocommerce-variation-price {
    display: block; margin: 0 !important; font-size: 18px !important; font-weight: 800 !important; color: var(--sm-ink) !important; line-height: 1.2;
  }
  .sm-pdp__left form.cart .woocommerce-variation-price del { font-size: 13px; font-weight: 400; color: var(--sm-muted); }
  /* Fallback (if JS didn't move it): keep a centred standalone price row. */
  .sm-pdp__left form.cart .single_variation_wrap > .single_variation { text-align: center; margin: 4px 0 0; }
  .sm-pdp__left form.cart .woocommerce-variation-price ins { text-decoration: none; }
  /* Stock status is relocated to the right column (see .sm-right-availability). */
  .sm-pdp__left form.cart .woocommerce-variation-availability { display: none !important; }

  /* Buy actions — single 3-column row: quantity + Add to Cart + Buy Now. */
  .sm-pdp__left form.cart .woocommerce-variation-add-to-cart,
  .sm-pdp__left form.cart.cart:not(.variations_form) {
    display: flex !important; flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: 8px; margin: 6px 0 0;
  }
  .sm-pdp__left form.cart .quantity.sm-qty {
    display: flex !important; flex: 0 0 auto; width: auto; height: auto; margin: 0 !important;
  }
  .sm-pdp__left form.cart .quantity.sm-qty input.qty { width: 32px !important; font-size: 15px; }
  .sm-pdp__left form.cart .quantity.sm-qty .sm-qty__btn { width: 28px; font-size: 18px; }
  .sm-pdp__left form.cart .single_add_to_cart_button,
  .sm-pdp__left form.cart .sm-buy-now {
    display: inline-flex !important; align-items: center; justify-content: center;
    flex: 1 1 0 !important; width: auto !important; min-width: 0; margin: 0 !important; padding: 10px 5px !important;
    font-size: 13px !important;
  }
  .sm-pdp__right .summary.entry-summary { margin-bottom: 26px !important; }

  /* Relocated variation stock status, shown under the right-column price. */
  .sm-pdp__right .sm-right-availability { margin: 4px 0 14px; font-size: 15px; }
  .sm-pdp__right .sm-right-availability .stock { margin: 0; font-weight: 600; }

  /* Purchase panel — prominent white card under the gallery: soft green-tinted
     border, generous radius, and a lift shadow so it reads as the focal CTA. */
  /* Prominence comes from the border + shadow (no extra layout height); padding
     and margin stay compact so the card never overflows the viewport. */
  .sm-pdp__left form.cart {
    margin-top: 11px; margin-bottom: 0 !important; padding: 11px 13px; text-align: center;
    background: #fff; border: 1.5px solid var(--sm-primary); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(78,154,38,.12);
  }
  .sm-pdp__left form.cart .variations { margin: 0 auto 10px; width: 100%; }
  .sm-pdp__left form.cart .variations th,
  .sm-pdp__left form.cart .variations td { text-align: center; display: block; width: 100%; padding: 4px 0; }
  .sm-pdp__left form.cart .variations select { width: 100%; max-width: 320px; }
  .sm-pdp__left form.cart .reset_variations { display: inline-block; margin: 6px 0; }
  .sm-pdp__left form.cart .single_add_to_cart_button,
  .sm-pdp__left form.cart .sm-buy-now { min-width: 190px; padding: 15px 26px !important; font-size: 15px !important; margin-top: 6px !important; }
  .sm-pdp__left form.cart .sm-buy-now { margin-left: 12px !important; }

  /* Moved tab panels become evenly-spaced stacked sections in the right column. */
  .sm-pdp__right #tab-description,
  .sm-pdp__right #tab-additional_information,
  .sm-pdp__right #tab-return-policy,
  .sm-pdp__right #tab-reviews {
    display: block !important; margin: 0 0 26px !important; padding: 22px 0 0 !important; border-top: 1px solid var(--sm-line);
  }
  .sm-pdp__right #tab-description { border-top: none; padding-top: 0 !important; }
  /* Section titles — carry the site's heading language: bold ink + teal underline
     (matches the "Why Order from Surgimedex?" style). */
  .sm-pdp__right [id^="tab-"] > h2,
  .sm-pdp__right #reviews > h2,
  .sm-pdp__right .woocommerce-Reviews-title {
    color: #1A2B3C !important; font-size: 20px !important; font-weight: 700 !important;
    border-bottom: 2px solid #0097A7 !important; padding-bottom: 8px !important; margin: 0 0 16px !important;
  }

  /* Hide the leftover tab nav (panels are shown stacked now). */
  .sm-pdp-active .woocommerce-tabs > ul.tabs,
  .sm-pdp-active .woocommerce-tabs > .wc-tabs { display: none !important; }
}

/* Mobile: fixed bottom buy bar — Add to cart (left) + Buy Now (right). */
.sm-mobile-buybar { display: none; }
@media (max-width: 991px) {
  .sm-mobile-buybar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    background: #fff; border-top: 1px solid var(--sm-line);
    padding: 10px 12px; box-shadow: 0 -4px 16px rgba(16,24,40,.10);
  }
  .sm-mobile-buybar .button {
    margin: 0 !important; width: 100%; padding: 14px 0 !important; font-size: 15px !important;
    border-radius: 8px; min-width: 0;
  }
  .sm-mbb-atc { background: #fff !important; color: var(--sm-primary-dark) !important; border: 1.5px solid var(--sm-primary) !important; }
  .sm-mbb-bn  { background: var(--sm-primary-dark) !important; color: #fff !important; border: 1.5px solid var(--sm-primary-dark) !important; }
  body.sm-has-buybar { padding-bottom: 78px; }
}