/*
Theme Name: Astra Child - iBeauti Mall
Theme URI: https://ibeautistore.com
Description: Child theme for ibeautistore.com — mall-style multi-category storefront, product-page conversion/trust redesign.
Author: Dsesales
Template: astra
Version: 2.5.0
Text Domain: astra-child
*/

/* ==========================================================================
   DESIGN TOKENS
   Direction v2 (2026-08-04, superseding the 2026-08-01 black/gold direction):
   coral-orange marketplace look, inspired by everymarket.com's structure
   (colored header band + white category bar + full footer) and Temu's color
   strategy (one saturated primary + black for weight + green for trust) —
   not a literal copy of either site's hex values or layout. Star ratings
   stay a separate amber (--ib-star) from the orange primary/CTA color, on
   purpose, so rating stars read as their own universal convention instead
   of blending into every Buy Now button.
   ========================================================================== */
:root {
  --ib-ink: #171717;
  --ib-ink-mid: #333333;
  --ib-ink-soft: #666666;
  --ib-paper: #ffffff;
  --ib-surface: #fff8f5;
  --ib-surface-2: #f0e1d9;
  --ib-line: #f0e1d9;

  --ib-black: #171717;
  --ib-black-hover: #000000;
  --ib-primary: #ff6b35;
  --ib-primary-dark: #e0501c;
  --ib-primary-tint: #fff0e9;
  --ib-star: #d4af37;
  --ib-success: #2e7d4f;

  --ib-radius-sm: 4px;
  --ib-radius: 8px;
  --ib-radius-lg: 14px;
  --ib-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 6px 20px rgba(17, 17, 17, 0.06);
  --ib-shadow-hover: 0 4px 10px rgba(17, 17, 17, 0.06), 0 14px 32px rgba(17, 17, 17, 0.10);

  --ib-font-display: "Inter", -apple-system, "Segoe UI", "PingFang SC", sans-serif;
  --ib-font-body: "Inter", -apple-system, "Segoe UI", "PingFang SC", sans-serif;
}

/* ==========================================================================
   BASE
   ========================================================================== */
body {
  background: var(--ib-paper);
  color: var(--ib-ink);
  font-family: var(--ib-font-body);
}

h1, h2, h3, h4,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--ib-font-display);
  color: var(--ib-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}

a { color: var(--ib-ink); }
a:hover { color: var(--ib-primary-dark); }

/* Visible keyboard focus everywhere — don't rely on browser default alone */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.ib-category-card:focus-visible {
  outline: 2px solid var(--ib-ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Primary buttons (Astra + WooCommerce share .button) — black is the
   default action color site-wide (Add to Cart etc); gold (.ib-buy-now) is
   reserved for the one highest-priority action per page, so it keeps its
   weight instead of being diluted across every button. */
.button,
button:not(.ast-menu-toggle),
input[type="submit"],
.wp-block-button__link,
.single_add_to_cart_button {
  background: var(--ib-black) !important;
  border-color: var(--ib-black) !important;
  color: #fff !important;
  border-radius: var(--ib-radius-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.button:hover,
button:hover:not(.ast-menu-toggle),
input[type="submit"]:hover,
.single_add_to_cart_button:hover {
  background: var(--ib-black-hover) !important;
  border-color: var(--ib-black-hover) !important;
}
.button:active,
.single_add_to_cart_button:active {
  transform: translateY(1px);
}

/* Restore PhotoSwipe lightbox controls (close/share/zoom/fullscreen/arrows
   are all plain <button class="pswp__button ...">, so the global black-
   button reset above wipes their icon sprite via the "background" shorthand.
   Re-declared here with matching specificity (button.pswp__button) so it
   wins on source order without raising specificity on the generic rule,
   which would break the button.ib-buy-now tie above. */
button.pswp__button {
  background-color: transparent !important;
  background-image: url("/wp-content/plugins/woocommerce/assets/css/photoswipe/default-skin/default-skin.png") !important;
  background-repeat: no-repeat !important;
  background-size: 264px 88px !important;
  background-position: 0 0 !important;
  border-color: transparent !important;
}
button.pswp__button--close { background-position: 0 -44px !important; }
button.pswp__button--share { background-position: -44px -44px !important; }
.pswp--fs button.pswp__button--fs { background-position: -44px 0 !important; }
button.pswp__button--zoom { background-position: -88px 0 !important; }
.pswp--zoomed-in button.pswp__button--zoom { background-position: -132px 0 !important; }
button.pswp__button--arrow--left,
button.pswp__button--arrow--right {
  background: none !important;
}

/* button.ib-buy-now (not just .ib-buy-now) so this ties the generic
   "button:not(.ast-menu-toggle)" override on specificity instead of losing
   to it — a plain class selector is less specific than an element+:not()
   selector, which was silently winning on :hover (black bg, near-invisible
   text) even though the base (non-hover) state happened to still resolve
   orange. */
button.ib-buy-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ib-primary) !important;
  border: 1px solid var(--ib-primary) !important;
  color: var(--ib-ink) !important;
  border-radius: var(--ib-radius-sm);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 32px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
button.ib-buy-now:hover { background: var(--ib-primary-dark) !important; color: var(--ib-ink) !important; }
button.ib-buy-now:active { transform: translateY(1px); }
button.ib-buy-now[disabled] { opacity: 0.6; cursor: wait; }

/* ==========================================================================
   HEADER BAND — Astra's own logo/menu/cart row, recolored to the orange
   primary (everymarket/Temu-style colored header band) instead of white.
   Text/icon colors overridden for contrast; verified against a real
   screenshot after deploy since these are Astra's own internal classes,
   not ones this child theme controls the markup of.
   ========================================================================== */
#masthead .ast-primary-header-bar {
  background: var(--ib-primary) !important;
}
#masthead .site-title a,
#masthead .site-title a:hover {
  color: #fff !important;
}
/* Top-level items only (> .menu-item > a) — the unscoped ".menu-link"
   selector also matched links inside .sub-menu, which sits in its own
   white dropdown/mobile-accordion panel. Forcing those the same near-white
   made every submenu (desktop hover AND mobile "Shop" expand) render with
   white text on a white panel — invisible, not actually empty. */
#masthead .main-header-menu > .menu-item > a {
  color: rgba(255,255,255,0.92) !important;
}
#masthead .main-header-menu > .menu-item:hover > a {
  color: #fff !important;
}
#masthead .main-header-menu .sub-menu .menu-link {
  color: var(--ib-ink) !important;
}
#masthead .main-header-menu .sub-menu .menu-item:hover > .menu-link {
  color: var(--ib-primary-dark) !important;
}
/* Scoped to the orange primary bar itself — NOT all of #masthead, which
   also contains the mobile dropdown menu's submenu-toggle arrows on a white
   background. Forcing those white too made the "Shop" expand arrow
   invisible on mobile (looked like the submenu opened empty). */
#masthead .ast-primary-header-bar .ast-icon svg,
#masthead .ast-primary-header-bar .astra-search-icon svg {
  fill: #fff !important;
}
#masthead .ast-header-woo-cart .count,
#masthead .ast-site-header-cart-data {
  color: #fff !important;
}

/* ==========================================================================
   UTILITY BAR — top-of-page strip (shipping / returns / support), matches
   the reference's header-top bar. Real claims only.
   ========================================================================== */
.ib-utility-bar {
  background: var(--ib-black);
  color: rgba(255,255,255,0.8);
}
.ib-utility-bar__inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 8px 16px;
  font-size: 12.5px;
  flex-wrap: wrap;
  text-align: center;
}
.ib-utility-bar__inner strong { color: #fff; font-weight: 600; }
.ib-search-toggle {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.8) !important;
  font-size: 12.5px !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
}
.ib-search-toggle:hover { color: #fff !important; }

.ib-search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 500;
  background: #fff;
  border-bottom: 1px solid var(--ib-line);
  box-shadow: var(--ib-shadow-hover);
}
.ib-utility-bar { position: relative; }
.ib-search-panel[hidden] { display: none; }
.ib-search-panel__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
}
.ib-search-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ib-line);
  border-radius: var(--ib-radius-sm);
  font-size: 15px;
}
.ib-search-results {
  margin-top: 8px;
  max-height: 60vh;
  overflow-y: auto;
}
.ib-search-results__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ib-search-results__list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  text-decoration: none;
  border-radius: var(--ib-radius-sm);
}
.ib-search-results__list li a:hover { background: var(--ib-surface); }
.ib-search-results__list img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--ib-radius-sm);
  flex-shrink: 0;
}
.ib-search-results__name {
  flex: 1 1 auto;
  font-size: 13.5px;
  color: var(--ib-ink);
  font-weight: 500;
}
.ib-search-results__price {
  font-size: 13px;
  color: var(--ib-ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ib-search-results__view-all {
  display: block;
  text-align: center;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  border-top: 1px solid var(--ib-line);
  margin-top: 6px;
}
.ib-search-results__empty {
  padding: 16px 6px;
  color: var(--ib-ink-soft);
  font-size: 13.5px;
}

/* ==========================================================================
   AISLE DIRECTORY — signature nav element: a department-store directory
   board just under the header. Injected via astra_header_after. White bar
   (not dark) so it reads as the everymarket-style "white category strip"
   under the colored header, rather than a second dark bar stacked on the
   black utility bar above it.
   ========================================================================== */
.ib-aisle-directory {
  background: var(--ib-paper);
  border-bottom: 1px solid var(--ib-line);
}
.ib-aisle-directory__inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding: 0 16px;
  scrollbar-width: thin;
}
.ib-aisle-directory__label {
  color: var(--ib-ink-soft);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  padding-right: 10px;
  flex-shrink: 0;
}
.ib-aisle-directory a {
  color: var(--ib-ink-mid);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  padding: 11px 14px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ib-aisle-directory a:hover,
.ib-aisle-directory a.is-current {
  color: var(--ib-primary-dark);
  border-bottom-color: var(--ib-primary);
}

/* ==========================================================================
   HOMEPAGE — category directory grid
   ========================================================================== */
.ib-home-intro {
  max-width: 720px;
  margin: 56px auto 8px;
  padding: 0 20px;
  text-align: center;
}
.ib-home-intro__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ib-primary-dark);
  margin-bottom: 14px;
}
.ib-home-intro h1 {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  margin: 0 0 14px;
}
.ib-home-intro p {
  color: var(--ib-ink-soft);
  font-size: 16px;
  line-height: 1.6;
}

/* Circular real-product-photo tiles — everymarket-style department picker.
   Real photo per category (the category's own top product image via
   ib_get_shoppable_categories() + wc_get_product's image), not an emoji/
   icon standing in for what's actually inside. Horizontal-scroll row so it
   doesn't need a fixed column count as more categories get added later. */
.ib-category-grid {
  max-width: 1600px;
  margin: 40px auto 64px;
  padding: 0 20px;
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.ib-category-card {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  width: 104px;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  text-decoration: none;
}
.ib-category-card__icon {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ib-surface);
  border: 2px solid var(--ib-paper);
  box-shadow: 0 1px 3px rgba(23,23,23,0.08), 0 1px 10px rgba(23,23,23,0.05);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.ib-category-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ib-category-card:hover .ib-category-card__icon {
  border-color: var(--ib-primary);
  transform: translateY(-2px);
}
.ib-category-card__name {
  font-family: var(--ib-font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ib-ink);
  margin: 0;
  line-height: 1.3;
}
.ib-category-card__count {
  font-size: 11px;
  color: var(--ib-ink-soft);
}
.ib-category-card--more .ib-category-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--ib-ink-soft);
  opacity: 0.6;
}

/* ==========================================================================
   TRUST STATS BAR — dark section, real claims only (no fabricated customer/
   review counts — see product-page trust strip for the same rule).
   ========================================================================== */
.ib-stats-bar {
  background: var(--ib-ink);
  padding: 32px 20px;
  margin-top: 8px;
}
.ib-stats-bar__inner {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
@media (max-width: 700px) {
  .ib-stats-bar__inner { grid-template-columns: repeat(2, 1fr); }
}
.ib-stats-bar__item strong {
  display: block;
  font-family: var(--ib-font-display);
  font-size: 15px;
  color: #fff;
  margin-bottom: 3px;
}
.ib-stats-bar__item span {
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
}

.ib-section-heading {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ib-section-heading h2 {
  font-size: 24px;
  margin: 0;
}
.ib-section-heading a {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ib-primary-dark);
}

/* Today's Deals / New Arrivals / Best Sellers rows on the homepage —
   three independent real-data rows (see template-mall-home.php), same
   shell so they stay visually consistent as more rows get added later. */
.ib-product-rail {
  margin-top: 8px;
}
.ib-product-rail + .ib-product-rail {
  margin-top: 40px;
}
.ib-product-rail__inner {
  max-width: 1600px;
  margin: 16px auto 56px;
  padding: 0 20px;
}

/* ==========================================================================
   SHOP / ARCHIVE — product cards
   ========================================================================== */
ul.products li.product {
  background: var(--ib-paper);
  border: 1px solid var(--ib-line);
  border-radius: var(--ib-radius);
  padding: 14px 14px 18px !important;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
ul.products li.product:hover {
  box-shadow: var(--ib-shadow-hover);
  transform: translateY(-2px);
  border-color: var(--ib-line);
}
ul.products li.product img {
  border-radius: var(--ib-radius-sm);
}
ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px;
  font-weight: 600;
  margin: 10px 0 4px;
}
ul.products li.product .price {
  font-family: var(--ib-font-body);
  font-variant-numeric: tabular-nums;
  color: var(--ib-ink);
}
ul.products li.product .price ins {
  color: var(--ib-primary-dark);
  font-weight: 700;
  text-decoration: none;
}
ul.products li.product .price del {
  color: var(--ib-ink-soft);
  opacity: 0.7;
}
.onsale {
  display: none !important;
}

/* ==========================================================================
   SINGLE PRODUCT
   ========================================================================== */
/* Gallery thumbnails on the left instead of below the main image. Astra's
   own "single-product-gallery-layout: vertical" Customizer option turned
   out to have no effect (likely gated behind Astra Pro's WooCommerce
   module, not present here), so this restyles WooCommerce's own
   Flexslider-generated markup directly: .flex-viewport (the visible main
   image) and .flex-control-nav (the thumbnail strip WC's own JS builds
   from the gallery images) become a two-column flex row instead of a
   stacked column. Desktop only — thumbnails go back below on narrow
   screens, where a left column would be too cramped. */
@media (min-width: 769px) {
  .single-product .woocommerce-product-gallery {
    display: flex;
    flex-direction: row-reverse;
    gap: 12px;
    align-items: flex-start;
  }
  .single-product .woocommerce-product-gallery .flex-viewport {
    flex: 1;
    min-width: 0;
  }
  .single-product .woocommerce-product-gallery ol.flex-control-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 76px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .single-product .woocommerce-product-gallery ol.flex-control-nav li {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  .single-product .woocommerce-product-gallery ol.flex-control-nav img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    border-radius: var(--ib-radius-sm);
    border: 1px solid var(--ib-line);
    cursor: pointer;
  }
  .single-product .woocommerce-product-gallery ol.flex-control-nav img.flex-active {
    border-color: var(--ib-primary);
  }
}
.ib-breadcrumb {
  font-size: 12.5px;
  color: var(--ib-ink-soft);
  margin: 0 0 16px;
}
.ib-breadcrumb a {
  color: var(--ib-ink-soft);
  text-decoration: none;
}
.ib-breadcrumb a:hover {
  color: var(--ib-primary-dark);
}
.ib-breadcrumb__sep {
  margin: 0 6px;
  color: var(--ib-line);
}
.ib-breadcrumb__current {
  color: var(--ib-ink);
  font-weight: 600;
}
/* Astra's base #primary{margin:4em 0} is only zeroed out under the
   "Separate Containers" layout; this site uses Plain Container, so that
   64px top margin was left in place and collapsed through #content,
   showing up as a large blank gap between the header and the page title.
   Zeroing it fully then left the gallery touching the header with no
   breathing room at all, so a small deliberate margin replaces it. */
.single-product.ast-plain-container #primary {
  margin-top: 20px;
}
.single-product div.product .summary p.price {
  font-family: var(--ib-font-body);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: 800;
  padding: 14px 0;
  margin: 10px 0 14px;
  border-top: 1px solid var(--ib-line);
  border-bottom: 1px solid var(--ib-line);
}
.single-product div.product .price ins { color: var(--ib-primary-dark); text-decoration: none; }
.single-product div.product .price del { opacity: 0.55; font-size: 0.6em; }
.single-product div.product .ib-price-save {
  display: inline-block;
  margin-left: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ib-primary-dark);
  background: var(--ib-primary-tint);
  padding: 3px 9px;
  border-radius: var(--ib-radius-sm);
  vertical-align: middle;
}
.single-product div.product .ib-review-teaser {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ib-ink-soft);
  text-decoration: none;
}
.single-product div.product .ib-review-teaser:hover {
  color: var(--ib-primary-dark);
  text-decoration: underline;
}
.single-product div.product .ib-delivery-estimate {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: normal;
  color: var(--ib-ink-mid);
}
.single-product div.product .ib-delivery-estimate strong {
  color: var(--ib-ink);
}
/* Astra's own "+ Free Shipping" text — redundant with the trust strip's
   own "Free shipping" line right below, so it's hidden here. */
.single-product div.product .ast-shipping-text {
  display: none !important;
}

/* Add to Cart + Buy Now stack full-width (everymarket-style dual-CTA: a
   neutral "add" action on top, the one orange "do this now" action right
   under it, both impossible to miss). Buy Now is injected via
   woocommerce_after_add_to_cart_button so it lands as a sibling of the
   default button inside the same form — no template override needed. */
.single-product .single_add_to_cart_button,
.single-product .ib-buy-now {
  font-size: 14.5px !important;
  padding: 15px 20px !important;
  display: block !important;
  width: 100% !important;
  margin: 0 0 10px !important;
  text-align: center;
}
.single-product .ib-buy-now {
  background: linear-gradient(135deg, var(--ib-primary), var(--ib-primary-dark)) !important;
  border-color: var(--ib-primary) !important;
}

/* Quantity stepper — Astra's own "-"/"+" (plain <a> tags, .ast-qty-placeholder)
   flanking the native number input. Grouped into one connected control
   (shared border, no gap between the three) instead of three separate
   boxes, with consistent ink-black text throughout — the number input was
   picking up the theme's global accent color while the +/- links inherited
   our plain link color, so the three didn't match. */
.single-product form.cart div.quantity {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--ib-line);
  border-radius: var(--ib-radius-sm);
  overflow: hidden;
  width: fit-content;
}
.single-product form.cart div.quantity > * {
  margin: 0 !important;
}
.single-product form.cart div.quantity .ast-qty-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 44px;
  color: var(--ib-ink) !important;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none !important;
  background: var(--ib-surface);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.single-product form.cart div.quantity .ast-qty-placeholder:hover {
  background: var(--ib-line);
}
.single-product .quantity .qty {
  height: 44px;
  width: 52px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--ib-line);
  border-right: 1px solid var(--ib-line);
  border-radius: 0;
  font-size: 14px;
  color: var(--ib-ink) !important;
  font-variant-numeric: tabular-nums;
}
.single-product .ib-qty-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ib-ink) !important;
}
.single-product .ib-qty-stock-note {
  font-size: 13px;
  color: var(--ib-success);
  font-weight: 600;
}
.single-product .cart,
.single-product .woocommerce-variation-add-to-cart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* WooCommerce Payments' own express-checkout buttons (WooPay/Apple Pay/
   Google Pay) below Add to Cart — hidden per request; checkout still lists
   every real enabled payment method at the actual payment step. */
.single-product .woocommerce-product-buy-now-container,
.single-product .wcpay-payment-request-wrapper,
.single-product .wcpay-express-checkout-wrapper {
  display: none !important;
}

/* Product accordion — replaces the default WooCommerce Description/
   Additional information/Reviews tabs. One section open at a time
   (product-accordion.js), Key Features open by default. */
.ib-accordion {
  margin: 40px 0;
  border-top: 1px solid var(--ib-line);
}
.ib-accordion__item {
  border-bottom: 1px solid var(--ib-line);
}
button.ib-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 18px 2px;
  background: none !important;
  border: none !important;
  color: var(--ib-ink) !important;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.ib-accordion__chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--ib-ink-mid);
  transition: transform 0.2s ease;
}
.ib-accordion__item.is-open .ib-accordion__chevron {
  transform: rotate(180deg);
}
.ib-accordion__panel[hidden] {
  display: none;
}
.ib-accordion__panel-inner {
  padding: 0 2px 22px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ib-ink-mid);
}
.ib-accordion__panel-inner p:first-child {
  margin-top: 0;
}
.ib-accordion__list {
  margin: 0;
  padding-left: 20px;
}
.ib-accordion__list li {
  margin-bottom: 6px;
}
.ib-accordion__panel-inner table.woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
}
.ib-accordion__panel-inner table.woocommerce-product-attributes th,
.ib-accordion__panel-inner table.woocommerce-product-attributes td {
  padding: 10px 0;
  border-bottom: 1px solid var(--ib-line);
  text-align: left;
  font-size: 14px;
}
.ib-accordion__panel-inner table.woocommerce-product-attributes th {
  width: 35%;
  color: var(--ib-ink);
  font-weight: 600;
}

/* SKU/Category meta line — Astra renders this via its own bundled
   single-product callback, not the standard removable WooCommerce hook,
   so hiding it here instead of via remove_action. */
.single-product .product_meta {
  display: none !important;
}

/* Variable products: variation-price-sync.js mirrors the selected variation's
   price into the top summary price, so WooCommerce's own lower price block
   (shown once a variation is picked) would just be a duplicate — hidden. */
.single-product .woocommerce-variation-price {
  display: none !important;
}

/* Trust/verification strip — sits directly under Add to Cart, the highest-
   attention spot on a product page right after price. Only real, defensible
   claims (shipping/returns/payment security), never fabricated counts. */
.ib-trust-strip {
  margin: 18px 0 4px;
  padding: 16px;
  background: var(--ib-surface);
  border: 1px solid var(--ib-line);
  border-radius: var(--ib-radius);
}
.ib-trust-strip__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ib-ink);
  margin-bottom: 10px;
}
.ib-trust-strip__shield {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--ib-ink);
}
.ib-trust-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ib-trust-strip__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--ib-ink-mid);
  line-height: 1.4;
}
.ib-trust-strip__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--ib-success);
  color: #fff;
  font-size: 10px;
  line-height: 1;
}

/* Research/credibility callout — upgrades plain trust copy already present
   in product descriptions into a visually distinct block */
.ib-credibility-note {
  display: flex;
  gap: 12px;
  margin: 20px 0;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--ib-line);
  border-left: 3px solid var(--ib-primary);
  border-radius: var(--ib-radius-sm);
  font-size: 13.5px;
  color: var(--ib-ink-soft);
  line-height: 1.55;
}

.woocommerce-tabs {
  margin-top: 40px;
}
.woocommerce-tabs ul.tabs li a {
  font-weight: 600;
  color: var(--ib-ink-soft);
}
.woocommerce-tabs ul.tabs li.active a { color: var(--ib-ink); border-bottom: 2px solid var(--ib-primary); }

/* Reviews — when empty, don't let "no reviews yet" read like a dead end.
   No template override: just restyle WooCommerce's own stock markup.
   WooCommerce already swaps the review-form heading to "Be the first to
   review ___" when there are no comments yet — that's the real invitation;
   the flat "There are no reviews yet." line above it just needs to get out
   of the way visually instead of reading as a dead stop. */
#reviews .woocommerce-Reviews-title { font-family: var(--ib-font-display); }
.star-rating, .star-rating span { color: var(--ib-star); }
.woocommerce-product-rating .star-rating { margin-right: 6px; }
p.woocommerce-noreviews {
  color: var(--ib-ink-soft);
  font-size: 13.5px;
  margin-bottom: 20px;
}
#review_form_wrapper {
  margin-top: 8px;
  padding: 24px;
  background: var(--ib-surface);
  border: 1px solid var(--ib-line);
  border-radius: var(--ib-radius);
}
#review_form #respond .comment-reply-title {
  font-family: var(--ib-font-display);
  font-size: 19px;
  display: block;
  margin-bottom: 14px;
}
#review_form #respond .form-submit input {
  margin-top: 4px;
}

.related.products,
.cross-sells {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--ib-line);
}
.related.products > h2,
.cross-sells > h2 {
  font-size: 22px;
}
/* Cart page cross-sells sit next to cart totals in Woo's default 2-column
   layout — give them room to breathe as their own full-width row above it
   instead of squeezing into the narrower cart-items column. */
.woocommerce-cart .cross-sells {
  clear: both;
  float: none;
  width: 100%;
}
.woocommerce-cart .cross-sells ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .woocommerce-cart .cross-sells ul.products { grid-template-columns: repeat(2, 1fr); }
}

ul.products li.product {
  position: relative;
}

/* ==========================================================================
   MOBILE BOTTOM NAV — hidden above the mobile breakpoint. When both this
   and the sticky add-to-cart bar are present (product page on mobile), the
   sticky bar sits just above this one instead of overlapping it.
   ========================================================================== */
.ib-bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  height: 56px;
  background: #fff;
  border-top: 1px solid var(--ib-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.ib-bottom-nav__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--ib-ink-soft);
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 600;
}
.ib-bottom-nav__icon {
  position: relative;
  font-size: 19px;
  line-height: 1;
}
.ib-bottom-nav__badge {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--ib-primary);
  color: var(--ib-ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}
.ib-bottom-nav__badge[data-count="0"] {
  display: none;
}
@media (max-width: 768px) {
  .ib-bottom-nav {
    display: flex;
  }
  body {
    padding-bottom: 56px;
  }
  .ib-sticky-cta {
    bottom: 56px;
  }
}

/* ==========================================================================
   STICKY ADD TO CART BAR — hidden by default, JS (sticky-cta.js) toggles
   .is-visible once the real add-to-cart area scrolls out of view.
   ========================================================================== */
.ib-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: #fff;
  border-top: 1px solid var(--ib-line);
  box-shadow: 0 -4px 16px rgba(17,17,17,0.08);
  transform: translateY(100%);
  transition: transform 0.22s ease;
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.ib-sticky-cta.is-visible {
  transform: translateY(0);
}
.ib-sticky-cta__inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ib-sticky-cta__thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--ib-radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  display: none;
}
.ib-sticky-cta__info {
  flex: 1 1 auto;
  min-width: 0;
}
.ib-sticky-cta__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ib-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ib-sticky-cta__price {
  font-size: 13px;
  color: var(--ib-ink-soft);
  font-variant-numeric: tabular-nums;
}
.ib-sticky-cta__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
/* .single-product .ib-buy-now (the main-page Buy Now sizing rule) is more
   specific than a bare ".ib-sticky-cta__actions button", so it was winning
   inside the sticky bar too — Buy Now rendered taller than Add to Cart
   there. Repeating ".single-product" here ties it back. */
.single-product .ib-sticky-cta__actions button {
  padding: 10px 16px !important;
  font-size: 13px !important;
  margin: 0 !important;
  white-space: nowrap;
}
@media (min-width: 641px) {
  .ib-sticky-cta__thumb { display: block; }
}
@media (max-width: 480px) {
  .ib-sticky-cta__name { display: none; }
}

/* ==========================================================================
   DISTRACTION-FREE CHECKOUT — Shoptimizer's core conversion trick: strip
   nav/footer/promo bars on the one page where you actually want the visitor
   to finish, not wander off. Selectors confirmed against real rendered
   markup (#masthead / .main-header-bar-navigation / #colophon), not guessed.
   Logo stays (keeps brand trust), just the nav + everything below is gone.
   ========================================================================== */
body.woocommerce-checkout #masthead .main-header-bar-navigation,
body.woocommerce-checkout .ib-footer,
body.woocommerce-checkout #colophon {
  display: none !important;
}
body.woocommerce-checkout .ib-checkout-trust {
  text-align: center;
  padding: 10px 16px;
  font-size: 12.5px;
  color: var(--ib-ink-soft);
  background: var(--ib-surface);
  border-bottom: 1px solid var(--ib-line);
}

/* ==========================================================================
   NEWSLETTER BAR — sits directly above the footer. Real backend (see
   ib_newsletter_subscribe_ajax_handler in functions.php), not decorative.
   ========================================================================== */
.ib-newsletter-bar {
  background: var(--ib-primary);
  padding: 18px 20px;
}
.ib-newsletter-bar__inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ib-newsletter-bar__msg {
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
}
.ib-newsletter-form {
  display: flex;
  gap: 8px;
}
.ib-newsletter-form__input {
  border: none;
  border-radius: 20px;
  padding: 9px 16px;
  font-size: 13px;
  width: 220px;
  max-width: 60vw;
}
.ib-newsletter-form__submit {
  border: none !important;
  border-radius: 20px !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: var(--ib-black) !important;
  color: #fff !important;
  margin: 0 !important;
}
.ib-newsletter-form__message {
  max-width: 1600px;
  margin: 8px auto 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
}
.ib-newsletter-form__message.is-error {
  color: #3a1200;
}

/* ==========================================================================
   LEGACY FOOTER WIDGETS — ib_custom_footer() now covers the same ground
   (newsletter/quick links/store info) as the pre-existing Astra footer
   builder widget areas, so those show up as a literal duplicate underneath
   it. Widget 1 ("Our Promise") is a leftover supplements-only mission
   statement from before the multi-category pivot, no longer accurate.
   ========================================================================== */
/* All 4 widgets are hidden, so hide their shared row wrapper too —
   otherwise its own padding/min-height stays reserved as dead space even
   with every widget inside it gone. Same for Astra's separate "below
   footer" row: its only content is .ast-footer-copyright (already hidden
   in favor of our own copyright in .ib-footer__bottom) plus an empty
   second column, so the row itself was left as a block of dead space
   under our payment-badges row. */
.site-primary-footer-wrap,
.site-below-footer-wrap {
  display: none !important;
}

/* #colophon (Astra's own footer wrapper, holding "Our Promise" + the
   copyright row) uses the theme's navy global color, which reads as a
   separate block sitting under our black .ib-footer instead of one
   continuous footer. Recolor it to match. */
#colophon,
.site-primary-footer-wrap,
.site-below-footer-wrap {
  background-color: var(--ib-black) !important;
}
.ast-footer-copyright p {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ==========================================================================
   FOOTER — real store info (categories / policy links / contact), sits
   above Astra's own copyright bar. Dark, matches the stats-bar treatment.
   ========================================================================== */
.ib-footer {
  background: var(--ib-black);
  padding: 44px 20px 28px;
}
.ib-footer__inner {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 900px) {
  .ib-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
}
@media (max-width: 640px) {
  .ib-footer__desc { max-width: none; }
}
.ib-footer__brand {
  font-family: var(--ib-font-display);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.ib-footer__desc {
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  margin: 0;
  max-width: 260px;
}
.ib-footer__heading {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ib-primary);
  margin-bottom: 14px;
}
.ib-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ib-footer__links a {
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-size: 13.5px;
}
.ib-footer__links a:hover {
  color: #fff;
  text-decoration: underline;
}
.ib-footer__links--info li {
  color: rgba(255,255,255,0.72);
  font-size: 13.5px;
}
/* Bottom row: our own copyright + payment badges side by side. Astra's own
   copyright line (.ast-footer-copyright, right below this) is hidden so
   there's only one, not two. */
.ib-footer__bottom {
  max-width: 1600px;
  margin: 28px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.ib-footer__copyright {
  margin: 0;
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
}
/* nowrap + flex:1 on each badge (instead of a fixed px size per breakpoint)
   so the icons always share out whatever row width is available and stay
   on one line on any phone, shrinking/growing with the screen instead of
   wrapping to a second row. max-width caps how big they get on wide
   screens where there's more room than 7 icons need. */
.ib-footer__payments {
  display: flex;
  gap: clamp(4px, 1.5vw, 8px);
  flex-wrap: nowrap;
}
.ib-footer__payment-badge {
  flex: 1 1 0;
  min-width: 0;
  max-width: 60px;
}
.ib-footer__payment-badge svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}
.ast-footer-copyright {
  display: none !important;
}

/* ==========================================================================
   HOMEPAGE — leftover generic supplement-marketing copy row ("Experience
   Premium Quality Supplements" / "Boost Your Health with Natural
   Ingredients" / "Pure, Potent, and Effective" / "Support Your Journey to
   Optimal Health") from the original single-category demo content — no
   longer accurate now that the store spans every department.
   ========================================================================== */
.fl-node-5d19b56d1cc83 {
  display: none !important;
}

/* ==========================================================================
   SHOP / CATEGORY / SEARCH SIDEBAR — desktop only. On mobile the left
   sidebar (search + "Filter by price" + other widgets) was stacking above
   the product grid instead of being hidden, pushing products below the
   fold. Scoped to WooCommerce archive/search pages specifically (not
   single-product, cart, checkout) so it only touches product listing pages.
   ========================================================================== */
@media (max-width: 768px) {
  body.woocommerce-page.archive #secondary,
  body.woocommerce-page.search #secondary {
    display: none !important;
  }
  body.woocommerce-page.archive #primary,
  body.woocommerce-page.search #primary {
    width: 100% !important;
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}