/*
Theme Name:   Kaiv Goods
Theme URI:    https://kaivgoods.com
Description:  Kaiv Goods child theme for the Botiga parent theme. Premium beauty e-commerce theme.
Author:       Kaiv Goods
Author URI:   https://kaivgoods.com
Template:     botiga
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  kaivgoods
Tags:         beauty, ecommerce, woocommerce, child-theme
*/

/* =====================================================================
   KAIV GOODS — BRAND TOKENS
   ===================================================================== */
:root {
  /* Brand palette — see color.md for the full brand color system */
  --kg-midnight:     #0a1628;
  --kg-white:        #ffffff;
  --kg-mist:         #f2fff8;
  --kg-mist-border:  #e2ede7;
  --kg-slate:        #64748b;
  --kg-green:        #00ff80;
  --kg-green-dark:   #00cc66;
  --kg-green-light:  #baffdd;

  /* Typography */
  --kg-font-heading: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --kg-font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --kg-font-accent:  'Montserrat', Arial, sans-serif;
  --kg-font-size-xs: 0.75rem;
  --kg-font-size-sm: 0.875rem;
  --kg-font-size-md: 1rem;
  --kg-font-size-lg: 1.125rem;
  --kg-font-size-xl: 1.375rem;
  --kg-font-size-2xl: 1.75rem;
  --kg-font-size-3xl: 2.25rem;
  --kg-font-size-4xl: 3rem;

  /* Spacing */
  --kg-gap-sm: 0.5rem;
  --kg-gap-md: 1rem;
  --kg-gap-lg: 1.5rem;
  --kg-gap-xl: 2.5rem;
  --kg-gap-2xl: 4rem;

  /* Layout */
  --kg-max-width: 1280px;
  --kg-radius: 2px;
  --kg-radius-lg: 4px;

  /* Transitions */
  --kg-transition: 0.2s ease;
}

/* =====================================================================
   GLOBAL RESET & BASE
   ===================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--kg-font-body) !important;
  font-size: var(--kg-font-size-md);
  color: var(--kg-midnight);
  background-color: var(--kg-white) !important;
  line-height: 1.6;
}

/* =====================================================================
   TYPOGRAPHY
   ===================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
  font-family: var(--kg-font-heading) !important;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--kg-midnight) !important;
}

/* Hide the WP "Home" page title that renders above the hero block */
.home .entry-header,
.home h1.entry-title,
.home h1.page-title,
.home .page-header {
  display: none !important;
}

h1, .h1 { font-size: var(--kg-font-size-4xl); }
h2, .h2 { font-size: var(--kg-font-size-3xl); }
h3, .h3 { font-size: var(--kg-font-size-2xl); }
h4, .h4 { font-size: var(--kg-font-size-xl); }
h5      { font-size: var(--kg-font-size-lg); }
h6      { font-size: var(--kg-font-size-md); }

p {
  margin-bottom: var(--kg-gap-md);
  color: var(--kg-slate) !important;
  font-family: var(--kg-font-body) !important;
  font-size: var(--kg-font-size-md);
}

a {
  color: var(--kg-midnight);
  text-decoration: none;
  transition: color var(--kg-transition), opacity var(--kg-transition);
}

a:hover {
  color: var(--kg-midnight);
  text-decoration: underline;
  text-decoration-color: var(--kg-green);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* =====================================================================
   HEADER
   ===================================================================== */
/* The live header is built with Botiga's Header/Footer Builder (class
   "bhfb"), not the plain ".site-header"/".botiga-header" markup — this
   targets the real wrapper (desktop + mobile variants) and its real
   sub-components (logo, nav, search, account, cart) as confirmed from
   the actual page source. No border: header and hero share one unbroken
   green field, so the seam between them should be invisible. */
/* Botiga's builder nests an inner ".bhfb-row-wrapper" (the actual visible
   bar) inside ".bhfb-header" with its own opaque white background, which
   painted over the green set on the outer wrapper — the header looked
   uncolored even though the outer element was correctly green. Both need
   the override. */
.bhfb-header,
.bhfb-header .bhfb-row-wrapper {
  background-color: var(--kg-green) !important;
  border-bottom: none !important;
}

.site-title a {
  font-family: var(--kg-font-heading) !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--kg-midnight) !important;
}

/* Navigation */
.main-navigation {
  font-family: var(--kg-font-body);
  font-size: var(--kg-font-size-sm);
}

.main-navigation a {
  color: var(--kg-midnight) !important;
  font-weight: 600;
}

.main-navigation a:hover {
  color: var(--kg-midnight) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Search / account / cart icons */
.bhfb-header .header-search,
.bhfb-header .wc-account-link,
.bhfb-header .cart-contents {
  color: var(--kg-midnight) !important;
}

.bhfb-header .header-search svg,
.bhfb-header .wc-account-link svg,
.bhfb-header .cart-contents svg {
  fill: var(--kg-midnight);
}

/* =====================================================================
   HERO BANNER
   ===================================================================== */
/* The real hero on the live Home page is a Gutenberg Cover block, authored
   before this redesign with hardcoded old-brand inline styles (background
   #1a1a1a, Cormorant Garamond heading, gold button) baked directly into
   the page content in wp-admin. Inline styles win over a normal CSS rule,
   so these overrides use !important to force the new brand palette without
   needing to edit the page content itself. Scoped to the front page's
   FIRST Cover block only (the hero), so an unrelated Cover block used
   elsewhere on the site is never touched.

   Heading color/font and the button are already handled by the global
   heading and button rules above/below — both use !important and already
   win over this block's inline styles. Only the block background, its
   dark dim overlay, and the paragraph (whose global rule isn't !important)
   need a direct override here.

   The block itself was never set to "Full width" alignment in the editor,
   so it rendered boxed inside the normal content container (~1110px, with
   white gutters and an 80px gap under the header) instead of the unbroken
   full-bleed field the brand calls for. The safest fix is CSS, not editing
   the live page content: zero out the page-level top margin Botiga adds
   above the content area on the home template, then break the cover block
   out of the content container with the standard full-bleed technique. */
.home .container.content-wrapper {
  margin-top: 0 !important;
}

.home .entry-content > .wp-block-cover:first-of-type {
  background-color: var(--kg-green) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  /* Also carries an inline min-height:80vh from the old hero content —
     removed so the block's height comes from its own content/padding
     instead of an arbitrary viewport-height box. */
  min-height: 0 !important;
}

.home .entry-content > .wp-block-cover:first-of-type .wp-block-cover__background {
  opacity: 0 !important;
}

/* The hero sits on the same green as every other button on the site, so
   the global green "Shop Now" button became invisible against it. The
   brand spec calls for the inverse pairing here specifically: white bg,
   Midnight Ink text, hover to Deep Midnight/white — same as the header's
   own "Shop Now" treatment. */
.home .entry-content > .wp-block-cover:first-of-type .wp-block-button__link {
  background-color: var(--kg-white) !important;
  color: var(--kg-midnight) !important;
  border: 2px solid var(--kg-midnight) !important;
}

.home .entry-content > .wp-block-cover:first-of-type .wp-block-button__link:hover {
  background-color: var(--kg-midnight) !important;
  color: var(--kg-white) !important;
}

.home .entry-content > .wp-block-cover:first-of-type p {
  color: rgba(10, 22, 40, 0.72) !important;
}

/* =====================================================================
   FEATURED PRODUCTS — auto-scrolling marquee
   ===================================================================== */
/* The homepage's "Featured Products" section (a WooCommerce Product
   Collection block, immediately below the hero) is the site's actual
   "products across all brands" row — turned into a continuous
   left-moving marquee here. kaivgoods_marquee_script() in functions.php
   duplicates each row's items once so the loop has no visible seam. */

/* The block was never set to "Wide"/"Full" width in the editor, so
   Gutenberg's default constrained-layout rule caps it at the theme's
   narrow content width (~730px on this site) — only enough room for 3 of
   the 240px cards to be visible at once, even though every product is
   present and scrolling through in the marquee. Let it use the full width
   its container actually has instead. */
.wp-block-woocommerce-product-collection {
  max-width: none !important;
  width: 100% !important;
}

/* Dark section band for Featured Products — matches the site's existing
   dark tone (header/footer's Deep Midnight) rather than a separate flat
   black, so cards read as "floating" white cards on the dark field.
   Targets the generic wp-block-group WordPress wraps the heading + block
   in (it has no distinguishing class of its own): ":has()" finds the one
   that actually contains the product collection, so nothing else on the
   site is affected. Full-bleed like the hero, so it reads as an
   intentional band rather than a boxed rectangle. */
.wp-block-group:has(> .wp-block-woocommerce-product-collection) {
  background-color: var(--kg-midnight) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.wp-block-group:has(> .wp-block-woocommerce-product-collection) > .wp-block-heading {
  color: var(--kg-white) !important;
}

/* kaivgoods_marquee_script() wraps the track in this at runtime — the
   clipping viewport. It must be the thing that clips, and must never be
   the thing that moves: overflow:hidden and a sliding transform can't
   both live on .wc-block-product-template itself, or the clip locks onto
   whatever fits in the box *before* any translation and never reveals
   anything beyond it, no matter how far the row slides (see functions.php
   for the full explanation — this was the actual cause of the marquee
   going blank instead of looping). */
.kg-marquee-viewport {
  overflow: hidden;
  width: 100%;
}

.wc-block-product-template {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content;
  gap: var(--kg-gap-lg) !important;
  /* Fallback only, in case JS hasn't measured the real value yet (e.g. JS
     disabled) — kaivgoods_marquee_script() sets this to an exact pixel
     distance once it duplicates the row, which is what actually drives a
     seamless loop (see functions.php for why -50% alone isn't precise
     enough). */
  --kg-marquee-shift: 50%;
}

.wc-block-product-template > li {
  flex: 0 0 240px;
  width: 240px !important;
}

@media (prefers-reduced-motion: no-preference) {
  .wc-block-product-template {
    animation: kg-marquee 22s linear infinite;
  }

  .wc-block-product-template:hover,
  .wc-block-product-template:focus-within {
    animation-play-state: paused;
  }
}

@keyframes kg-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--kg-marquee-shift))); }
}

/* Card treatment for the Product Collection block's own markup (different
   from the classic ".woocommerce ul.products li.product" markup used by
   the plain shop-loop template — needs its own selectors). */
.wc-block-product {
  background-color: var(--kg-white);
  padding: var(--kg-gap-md);
}

.wc-block-product .wp-block-post-title a {
  font-family: var(--kg-font-body);
  color: var(--kg-midnight);
  font-weight: 500;
}

.wc-block-product .woocommerce-Price-amount {
  font-family: var(--kg-font-accent);
  font-weight: 700;
  color: var(--kg-midnight);
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.button,
button,
input[type="button"],
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background-color: var(--kg-green) !important;
  color: var(--kg-midnight) !important;
  border: 2px solid var(--kg-midnight) !important;
  border-radius: var(--kg-radius) !important;
  font-family: var(--kg-font-body) !important;
  font-size: var(--kg-font-size-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.75rem 1.75rem !important;
  transition: background-color var(--kg-transition), color var(--kg-transition), border-color var(--kg-transition) !important;
  cursor: pointer;
}

.button:hover,
button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background-color: var(--kg-midnight) !important;
  border-color: var(--kg-midnight) !important;
  color: var(--kg-white) !important;
}

/* Ghost/outline variant */
.button.button-outline,
.woocommerce a.button.button-outline {
  background-color: transparent !important;
  color: var(--kg-midnight) !important;
  border: 2px solid var(--kg-midnight) !important;
}

.button.button-outline:hover,
.woocommerce a.button.button-outline:hover {
  background-color: var(--kg-midnight) !important;
  color: var(--kg-white) !important;
}

/* Add to cart specific */
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: var(--kg-green) !important;
  color: var(--kg-midnight) !important;
  border-color: var(--kg-midnight) !important;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: var(--kg-midnight) !important;
  border-color: var(--kg-midnight) !important;
  color: var(--kg-white) !important;
}

/* =====================================================================
   WOOCOMMERCE — PRODUCT CARDS
   ===================================================================== */
.woocommerce ul.products li.product,
.botiga-product-item {
  border: none !important;
  background-color: var(--kg-white) !important;
  transition: transform var(--kg-transition), box-shadow var(--kg-transition) !important;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 6px 6px 0 var(--kg-green) !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.botiga-product-item .woocommerce-loop-product__title {
  font-family: var(--kg-font-body) !important;
  font-size: var(--kg-font-size-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: var(--kg-midnight) !important;
  text-transform: none !important;
}

.woocommerce ul.products li.product .price,
.botiga-product-item .price {
  font-family: var(--kg-font-accent) !important;
  font-size: var(--kg-font-size-sm) !important;
  color: var(--kg-midnight) !important;
  font-weight: 700 !important;
}

/* Product image */
.woocommerce ul.products li.product a img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
  background-color: var(--kg-mist);
}

/* Sale badge */
.woocommerce span.onsale,
.botiga-product-item .onsale {
  background-color: var(--kg-green) !important;
  color: var(--kg-midnight) !important;
  font-size: var(--kg-font-size-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: var(--kg-radius) !important;
  padding: 0.25rem 0.5rem !important;
}

/* Product grid */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--kg-gap-lg) !important;
}

@media (min-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

/* =====================================================================
   WOOCOMMERCE — SINGLE PRODUCT PAGE
   ===================================================================== */
.woocommerce div.product .product_title {
  font-family: var(--kg-font-heading) !important;
  font-size: var(--kg-font-size-3xl) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--kg-font-accent) !important;
  color: var(--kg-midnight) !important;
  font-size: var(--kg-font-size-2xl) !important;
  font-weight: 800 !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: var(--kg-font-size-md) !important;
  color: var(--kg-slate) !important;
  line-height: 1.7 !important;
  border-top: 1px solid var(--kg-mist-border);
  border-bottom: 1px solid var(--kg-mist-border);
  padding: var(--kg-gap-lg) 0;
  margin: var(--kg-gap-lg) 0;
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--kg-font-body) !important;
  font-size: var(--kg-font-size-sm) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--kg-slate) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--kg-midnight) !important;
}

/* Product gallery — active thumbnail outline (WooCommerce core flexslider markup) */
.woocommerce div.product .flex-control-thumbs li img.flex-active,
.woocommerce div.product .flex-control-thumbs li img:hover {
  outline: 2px solid var(--kg-green) !important;
  outline-offset: -2px;
  opacity: 1 !important;
}

/* =====================================================================
   ARCHIVE PAGE HEADER — brand/category breadcrumb + title banner
   ===================================================================== */
/* Botiga's own customizer CSS sets 80px top/bottom padding with a plain
   white background on ".woocommerce-page-header" — on a brand page like
   /brand/mustela/ that reads as a large empty gap under the green header.
   Tightened here and given a Soft Mist background plus the same accent
   underline used on every other section title, so it reads as a designed
   band rather than dead space. */
.woocommerce-page-header {
  background-color: var(--kg-mist) !important;
  padding-top: var(--kg-gap-lg) !important;
  padding-bottom: var(--kg-gap-lg) !important;
  margin-bottom: 0 !important;
}

.woocommerce-page-header .woocommerce-breadcrumb {
  color: var(--kg-slate);
  font-size: var(--kg-font-size-sm);
}

.woocommerce-page-header .woocommerce-breadcrumb a {
  color: var(--kg-slate);
}

.woocommerce-products-header__title {
  position: relative;
  display: inline-block;
  padding-bottom: var(--kg-gap-sm);
  color: var(--kg-midnight) !important;
}

.woocommerce-products-header__title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: var(--kg-green);
}

/* =====================================================================
   PRODUCT META — WEIGHT & DELIVERY ESTIMATE
   ===================================================================== */
.kg-product-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: var(--kg-gap-sm) 0 var(--kg-gap-md);
}

.kg-product-meta__weight,
.kg-product-meta__delivery {
  font-family: var(--kg-font-body);
  font-size: var(--kg-font-size-sm);
  color: var(--kg-slate);
  margin: 0;
}

.kg-product-meta__weight strong {
  color: var(--kg-midnight);
  font-weight: 600;
}

.kg-loop-meta {
  font-size: var(--kg-font-size-xs);
  color: var(--kg-slate);
  margin-top: 0.25rem;
}

/* =====================================================================
   WOOCOMMERCE — CART & CHECKOUT
   ===================================================================== */
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border: 1px solid var(--kg-mist-border) !important;
  border-radius: var(--kg-radius) !important;
  font-family: var(--kg-font-body) !important;
  font-size: var(--kg-font-size-sm) !important;
  color: var(--kg-midnight) !important;
  background-color: var(--kg-white) !important;
  padding: 0.75rem 1rem !important;
  transition: border-color var(--kg-transition) !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--kg-midnight) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Order summary */
.woocommerce-checkout #payment,
.woocommerce-cart .cart_totals {
  background-color: var(--kg-mist) !important;
  border: none !important;
  border-radius: var(--kg-radius-lg) !important;
  padding: var(--kg-gap-lg) !important;
}

/* Cart table — WooCommerce core markup (table.cart / shop_table), styled to
   match the templates/cart.html prototype's row rhythm and typography. */
.woocommerce-cart table.cart,
.woocommerce-checkout table.shop_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--kg-gap-xl);
}

.woocommerce-cart table.cart thead th {
  text-align: left;
  font-family: var(--kg-font-body) !important;
  font-size: var(--kg-font-size-xs) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kg-slate) !important;
  padding-bottom: var(--kg-gap-sm);
  border-bottom: 1px solid var(--kg-mist-border);
}

.woocommerce-cart table.cart td {
  padding: var(--kg-gap-md) 0.5rem !important;
  border-bottom: 1px solid var(--kg-mist-border);
  vertical-align: middle;
}

.woocommerce-cart table.cart td.product-thumbnail img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  background-color: var(--kg-mist);
}

.woocommerce-cart table.cart td.product-name a {
  font-family: var(--kg-font-body) !important;
  font-weight: 500 !important;
  color: var(--kg-midnight) !important;
}

.woocommerce-cart table.cart td.product-price .woocommerce-Price-amount,
.woocommerce-cart table.cart td.product-subtotal .woocommerce-Price-amount {
  font-family: var(--kg-font-accent) !important;
  font-weight: 700 !important;
  color: var(--kg-midnight) !important;
}

.woocommerce-cart table.cart td.product-remove a.remove {
  background-color: transparent !important;
  color: var(--kg-slate) !important;
  font-size: 1.1rem !important;
}

.woocommerce-cart table.cart td.product-remove a.remove:hover {
  background-color: transparent !important;
  color: #c0392b !important;
}

/* Quantity input + Botiga's increment/decrement buttons, if present */
.woocommerce .quantity {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--kg-midnight);
  border-radius: var(--kg-radius);
  overflow: hidden;
}

.woocommerce .quantity .qty {
  border: none !important;
  width: 44px;
  text-align: center;
  font-family: var(--kg-font-accent) !important;
  font-weight: 700 !important;
  color: var(--kg-midnight) !important;
  padding: 0.6rem 0 !important;
}

.woocommerce .quantity .plus,
.woocommerce .quantity .minus {
  background: none !important;
  border: none !important;
  color: var(--kg-midnight) !important;
  width: 36px;
  cursor: pointer;
}

/* WooCommerce Cart BLOCK (Gutenberg) — quantity stepper + remove control.
   The global `button` reset above (padding/border/radius/background) also
   hits these native <button>s; their oversized padding overflowed the
   stepper's box and visually collided with the remove button next to it. */
.wc-block-cart-item__quantity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kg-gap-sm);
}

.wc-block-components-quantity-selector {
  display: inline-flex;
  align-items: stretch;
  width: auto !important;
  background: none !important;
  border: 2px solid var(--kg-midnight) !important;
  border-radius: var(--kg-radius) !important;
  overflow: hidden;
}

.wc-block-components-quantity-selector__input {
  width: 44px;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.6rem 0 !important;
  text-align: center;
  font-family: var(--kg-font-accent) !important;
  font-weight: 700 !important;
  font-size: var(--kg-font-size-sm) !important;
  color: var(--kg-midnight) !important;
}

.wc-block-components-quantity-selector__button {
  width: 36px;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.6rem 0 !important;
  font-size: var(--kg-font-size-sm) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--kg-midnight) !important;
}

.wc-block-components-quantity-selector__button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.wc-block-cart-item__remove-link {
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.4rem !important;
  color: var(--kg-slate) !important;
}

.wc-block-cart-item__remove-link:hover {
  background: none !important;
  color: #c0392b !important;
}

.wc-block-cart-item__remove-link svg path {
  fill: currentColor;
}

/* Coupon row */
.woocommerce-cart table.cart td.actions .coupon {
  display: flex;
  gap: var(--kg-gap-sm);
  align-items: center;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
  flex: 1;
  max-width: 220px;
}

/* Cart totals table + proceed-to-checkout button */
.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
  padding: var(--kg-gap-sm) 0 !important;
  font-size: var(--kg-font-size-sm) !important;
  color: var(--kg-slate) !important;
  border: none !important;
}

.cart_totals table.shop_table tr.order-total th,
.cart_totals table.shop_table tr.order-total td {
  border-top: 1px solid var(--kg-mist-border) !important;
  padding-top: var(--kg-gap-md) !important;
  font-family: var(--kg-font-accent) !important;
  font-size: var(--kg-font-size-lg) !important;
  font-weight: 800 !important;
  color: var(--kg-midnight) !important;
}

.cart_totals .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  width: 100%;
  margin-top: var(--kg-gap-md);
}

/* Checkout — billing/shipping columns + order review table + payment box */
.woocommerce-checkout .col2-set {
  display: grid;
  gap: var(--kg-gap-xl);
}

@media (min-width: 900px) {
  .woocommerce-checkout .col2-set {
    grid-template-columns: 1fr;
  }
  .woocommerce-checkout-review-order {
    max-width: 480px;
    margin-left: auto;
  }
}

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  position: relative;
  display: inline-block;
  padding-bottom: var(--kg-gap-sm);
  margin-bottom: var(--kg-gap-lg);
}

.woocommerce-checkout h3::after,
.woocommerce-checkout #order_review_heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background-color: var(--kg-green);
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  font-size: var(--kg-font-size-sm) !important;
  color: var(--kg-slate) !important;
  padding: var(--kg-gap-sm) 0 !important;
  border-bottom: 1px solid var(--kg-mist-border) !important;
}

.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout-review-order-table tr.order-total td {
  font-family: var(--kg-font-accent) !important;
  font-size: var(--kg-font-size-lg) !important;
  font-weight: 800 !important;
  color: var(--kg-midnight) !important;
  border-bottom: none !important;
}

.wc_payment_methods.payment_methods {
  margin: var(--kg-gap-lg) 0 0 !important;
}

.wc_payment_methods.payment_methods li.wc_payment_method {
  border: 1px solid var(--kg-mist-border) !important;
  border-radius: var(--kg-radius) !important;
  padding: 0.85rem 1rem !important;
  margin-bottom: var(--kg-gap-sm) !important;
  list-style: none !important;
}

.wc_payment_methods.payment_methods label {
  font-family: var(--kg-font-body) !important;
  font-weight: 500 !important;
  color: var(--kg-midnight) !important;
}

.woocommerce-checkout #place_order {
  width: 100%;
}

/* =====================================================================
   WOOCOMMERCE — NOTICES & MESSAGES
   ===================================================================== */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--kg-green) !important;
  background-color: var(--kg-mist) !important;
}

.woocommerce-error {
  border-top-color: #c0392b !important;
}

/* =====================================================================
   SIDEBAR & WIDGETS
   ===================================================================== */
.widget-title,
.widgettitle {
  font-family: var(--kg-font-body) !important;
  font-size: var(--kg-font-size-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--kg-midnight) !important;
  border-bottom: 1px solid var(--kg-mist-border);
  padding-bottom: var(--kg-gap-sm);
  margin-bottom: var(--kg-gap-md);
}

/* Price filter */
.price_slider_wrapper .ui-widget-header {
  background: var(--kg-midnight) !important;
}

.price_slider_wrapper .ui-slider-handle {
  background: var(--kg-midnight) !important;
  border-color: var(--kg-midnight) !important;
}

/* =====================================================================
   SHOP BY BRAND
   ===================================================================== */
.kg-shop-by-brand {
  max-width: var(--kg-max-width);
  margin: 0 auto;
  padding: var(--kg-gap-xl) var(--kg-gap-lg);
  text-align: center;
}

.kg-shop-by-brand__heading {
  position: relative;
  display: inline-block;
  padding-bottom: var(--kg-gap-sm);
  margin-bottom: var(--kg-gap-lg);
}

.kg-shop-by-brand__heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: var(--kg-green);
}

.kg-shop-by-brand__grid {
  display: flex;
  gap: var(--kg-gap-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--kg-gap-sm);
}

.kg-brand-tile {
  flex: 0 0 160px;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  border: 1px solid var(--kg-mist-border);
  background-color: var(--kg-white);
  text-decoration: none !important;
  transition: box-shadow var(--kg-transition), transform var(--kg-transition);
}

.kg-brand-tile:hover {
  box-shadow: 4px 4px 0 var(--kg-green);
  transform: translateY(-2px);
}

/* Inside the hero: "white tiles lifted off the green with a deep shadow"
   per the brand spec, rather than the bordered treatment used when this
   section stands alone on the Shop page — the hero already supplies its
   own headline, so no heading is rendered here (see
   kaivgoods_inject_shop_by_brand_home() in functions.php). */
.wp-block-cover .kg-shop-by-brand {
  padding-top: var(--kg-gap-lg);
  padding-bottom: 0;
}

.wp-block-cover .kg-brand-tile {
  border: none;
  box-shadow: 0 10px 24px rgba(10, 22, 40, 0.18);
}

.wp-block-cover .kg-brand-tile:hover {
  box-shadow: 0 14px 28px rgba(10, 22, 40, 0.24);
}

.kg-brand-tile__logo {
  max-width: 100%;
  max-height: 56px;
  object-fit: contain;
}

.kg-brand-tile__name {
  font-family: var(--kg-font-heading);
  font-weight: 700;
  color: var(--kg-midnight);
  font-size: var(--kg-font-size-sm);
}

@media (min-width: 768px) {
  .kg-shop-by-brand__grid {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
  }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
/* Like the header, the live footer is built with Botiga's Header/Footer
   Builder (".bhfb-footer" + nested ".bhfb-row-wrapper"), not the plain
   ".site-footer"/".botiga-footer" markup those selectors assumed — so
   none of this was ever actually applying. Both class sets are kept:
   the bhfb-* rules for the real live markup, the site-footer/botiga-footer
   rules in case a page ever renders the classic (non-builder) footer. */
.site-footer,
.botiga-footer,
.bhfb-footer,
.bhfb-footer .bhfb-row-wrapper {
  background-color: var(--kg-midnight) !important;
  color: var(--kg-slate) !important;
  border-top: none !important;
}

.site-footer a,
.botiga-footer a,
.bhfb-footer a {
  color: var(--kg-slate) !important;
  font-size: var(--kg-font-size-sm) !important;
}

.site-footer a:hover,
.botiga-footer a:hover,
.bhfb-footer a:hover {
  color: var(--kg-green) !important;
}

.site-footer .widget-title,
.botiga-footer .widget-title,
.bhfb-footer .widget-title,
.bhfb-footer .widgettitle {
  color: var(--kg-white) !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}

.site-footer .site-info,
.botiga-footer .site-info,
.bhfb-footer .site-info {
  background-color: rgba(0,0,0,0.3) !important;
  color: var(--kg-slate) !important;
  font-size: var(--kg-font-size-xs) !important;
  letter-spacing: 0.05em !important;
}

/* =====================================================================
   FORMS — GLOBAL
   ===================================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
  border: 1px solid var(--kg-mist-border) !important;
  border-radius: var(--kg-radius) !important;
  padding: 0.75rem 1rem !important;
  font-family: var(--kg-font-body) !important;
  font-size: var(--kg-font-size-sm) !important;
  color: var(--kg-midnight) !important;
  background-color: var(--kg-white) !important;
  transition: border-color var(--kg-transition) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--kg-midnight) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(10,22,40,0.08) !important;
}

/* =====================================================================
   UTILITY CLASSES
   ===================================================================== */
.kg-text-centre { text-align: center; }
.kg-text-small  { font-size: var(--kg-font-size-sm); }
.kg-uppercase   { letter-spacing: 0.1em; text-transform: uppercase; }
.kg-accent-bg   { background-color: var(--kg-green); color: var(--kg-midnight); padding: 0.1em 0.4em; }

/* =====================================================================
   RESPONSIVE ADJUSTMENTS
   ===================================================================== */
@media (max-width: 767px) {
  h1, .h1 { font-size: 2rem; }
  h2, .h2 { font-size: 1.75rem; }
  h3, .h3 { font-size: 1.375rem; }

  .site-title a {
    font-size: 1.2rem !important;
  }
}

/* =====================================================================
   ACCESSIBILITY
   ===================================================================== */
:focus-visible {
  outline: 2px solid var(--kg-midnight);
  outline-offset: 2px;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px,1px,1px,1px);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal;
}

/* =====================================================================
   ANNOUNCEMENT BAR — inserted by kaivgoods_announcement_bar() in
   functions.php, directly above the header on every page.
   ===================================================================== */
.kg-announcement-bar {
  background-color: var(--kg-midnight);
  color: var(--kg-white);
  text-align: center;
  font-family: var(--kg-font-body);
  font-size: var(--kg-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
}

/* =====================================================================
   BLOG INDEX CARDS — used on the /blog/ page (WP page ID 267). Thumbnails
   are CSS background-images on a class, not inline style="" or <img>,
   because this site's WAF blocks any REST API request whose content
   field contains a literal "<img" tag or a style="" attribute (confirmed
   live 2026-09-23) — class="" is unaffected. Add one .kg-blog-thumb--*
   modifier per post here, then reference it from the page content.
   ===================================================================== */
.kg-blog-card {
  display: block;
  margin-bottom: var(--kg-gap-xl);
  text-decoration: none;
}

.kg-blog-thumb {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 3;
  background-color: var(--kg-mist);
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  margin-bottom: var(--kg-gap-sm);
}

.kg-blog-thumb--marine-collagen-serum {
  background-image: url('https://kaivgoods.com/wp-content/uploads/2026/04/51UXZsZCjfL-1.jpg');
}

.kg-blog-thumb--curated-skincare-and-fragrance {
  background-image: url('https://kaivgoods.com/wp-content/uploads/2026/04/21v1sX87-S-1.jpg');
}