/*
Theme Name: KitMik Child
Theme URI: https://test.kitmik.com
Description: KitMik baby products store — child of Twenty Twenty-Five
Author: KitMik
Template: twentytwentyfive
Version: 1.3.16
License: GNU General Public License v2 or later
*/

/* -- Social icons: transparent background everywhere -- */
.wp-block-social-links .wp-social-link,
.wp-social-link {
  background-color: transparent !important;
  box-shadow: none !important;
}
.wp-social-link:hover {
  background-color: transparent !important;
  opacity: 0.7;
}

/* -- Logo lockup: no image block margins -- */
.km-logo-lockup .wp-block-image,
.km-footer-logo .wp-block-image {
  margin: 0 !important;
}

/* -- Account & Cart icon links -- */
.km-icon-account .wp-block-navigation-item__content,
.km-icon-cart .wp-block-navigation-item__content {
  font-size: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 24px !important;
  height: 24px !important;
  color: #1c1108 !important;
  text-decoration: none !important;
  transition: color 0.2s;
  position: relative;
}
.km-icon-account .wp-block-navigation-item__content:hover,
.km-icon-cart .wp-block-navigation-item__content:hover {
  color: #c4956a !important;
}

/* Person icon via mask */
.km-icon-account .wp-block-navigation-item__content::before {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  background-color: #1c1108;
  transition: background-color 0.2s;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.km-icon-account .wp-block-navigation-item__content:hover::before {
  background-color: #c4956a;
}

/* Bag icon via mask */
.km-icon-cart .wp-block-navigation-item__content::before {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  background-color: #1c1108;
  transition: background-color 0.2s;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 01-8 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 01-8 0'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.km-icon-cart .wp-block-navigation-item__content:hover::before {
  background-color: #c4956a;
}

/* Cart count badge */
.km-icon-cart .km-cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  background: #1c1108;
  color: #fff;
  font-size: 10px !important;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.km-icon-cart .km-cart-count.km-cart-count--empty {
  display: none !important;
}

/* Wishlist icon (heart) - header nav */
.km-icon-wishlist .wp-block-navigation-item__content {
  font-size: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 24px !important;
  height: 24px !important;
  color: #1c1108 !important;
  text-decoration: none !important;
  transition: color 0.2s;
  position: relative;
}
.km-icon-wishlist .wp-block-navigation-item__content:hover {
  color: #c4956a !important;
}
.km-icon-wishlist .wp-block-navigation-item__content::before {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  background-color: #1c1108;
  transition: background-color 0.2s;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 00-7.8 0L12 5.6l-1-1a5.5 5.5 0 00-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 000-7.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 00-7.8 0L12 5.6l-1-1a5.5 5.5 0 00-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 000-7.8z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.km-icon-wishlist .wp-block-navigation-item__content:hover::before {
  background-color: #c4956a;
}

/* Wishlist count badge */
.km-icon-wishlist .km-wishlist-count {
  position: absolute;
  top: -6px;
  right: -8px;
  background: #1c1108;
  color: #fff;
  font-size: 10px !important;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.km-icon-wishlist .km-wishlist-count.km-wishlist-count--empty {
  display: none !important;
}

/* -- Footer brand column -- */
.km-footer-brand {
  min-width: 220px;
  max-width: 260px;
  flex: 0 0 240px !important;
}
.km-footer-inner {
  align-items: flex-start !important;
}

/* -- Header full width -- */
.km-site-header {
  width: 100% !important;
  box-sizing: border-box;
}

/* ============================================
   MY ACCOUNT / LOGIN PAGE — Minimal & Clean
   ============================================ */

/* My Account: match /about-style body copy across every account section —
   the classic WooCommerce templates (addresses, dashboard, orders/downloads
   empty states) render plain <p>/<address> tags with the browser default
   dark color + <address>'s built-in italic, instead of the muted brown
   body-copy color used site-wide on content pages. */
.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce-MyAccount-content address {
  font-style: normal !important;
  font-size: 1rem !important;
  color: #5a4c3f !important;
  line-height: 1.7 !important;
}
.woocommerce-account .woocommerce-Address-title .edit {
  font-size: 0.9rem !important;
}
/* Reduce header-to-card gap — the block template stacks a margin-top on <main> and a
   padding-top on the inner group, both set to the same large spacing preset */
.woocommerce-account main {
  margin-top: 0 !important;
}
.woocommerce-account main > .wp-block-group {
  padding-top: 16px !important;
}

/* Hide the "My account" page title */
.woocommerce-account .wp-block-post-title { display: none !important; }

/* Hide the default WooCommerce dashboard intro paragraph ("From your account dashboard...") */
.woocommerce-account .woocommerce-MyAccount-content > p:nth-of-type(2) {
  display: none !important;
}

/* Make post content a centering flex column */
.woocommerce-account .entry-content,
.woocommerce-account .wp-block-post-content {
  background: #fdf8f4 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 8px 20px 60px !important;
  min-height: auto;
  box-sizing: border-box;
}

/* Card — fixed width, centered */
.woocommerce-account .woocommerce:not(.wp-block-breadcrumbs):not(.yith-wcwl-form) {
  background: #ffffff;
  border-radius: 4px;
  padding: 52px 48px 48px !important;
  width: 100% !important;
  max-width: 460px !important;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Logged-in dashboard needs the standard content-card width, not the narrow login-box width */
body.logged-in.woocommerce-account .woocommerce:not(.wp-block-breadcrumbs):not(.yith-wcwl-form) {
  width: 80% !important;
  max-width: 1200px !important;
  box-shadow: 0 2px 24px rgba(28,17,8,0.07);
}

@media (max-width: 1024px) {
  body.logged-in.woocommerce-account .woocommerce:not(.wp-block-breadcrumbs):not(.yith-wcwl-form) {
    width: 88% !important;
  }
}

@media (max-width: 782px) {
  body.logged-in.woocommerce-account .woocommerce:not(.wp-block-breadcrumbs):not(.yith-wcwl-form) {
    width: 94% !important;
    padding: 32px 24px !important;
  }
  .woocommerce-account .woocommerce:not(.wp-block-breadcrumbs):not(.yith-wcwl-form) {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .kitmik-account-sidebar {
    width: 100% !important;
    flex-basis: auto !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    padding: 8px 12px;
  }
  .kitmik-order-card {
    flex-direction: column;
  }
  .kitmik-order-card__meta {
    gap: 16px;
  }
}

/* logo handled by km-login-brand block */

.woocommerce-account h2,
.woocommerce-account .woocommerce-MyAccount-content h2 {
  font-family: Manrope, sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  color: #1c1108 !important;
  text-align: center;
  margin-bottom: 32px !important;
  letter-spacing: 0.5px;
}

/* Stack login + register columns vertically */
.woocommerce-account .u-columns.col2-set {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.woocommerce-account .u-columns.col2-set .col-1,
.woocommerce-account .u-columns.col2-set .col-2 {
  width: 100% !important;
  float: none !important;
}
.woocommerce-account .u-columns.col2-set .col-2 {
  border-top: 1px solid #f0e8df;
  margin-top: 32px;
  padding-top: 32px;
}

/* Labels */
.woocommerce-account .woocommerce-form label,
.woocommerce-account form.login label,
.woocommerce-account form.register label {
  font-family: Manrope, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #9a8a7a !important;
  display: block;
  margin-bottom: 6px;
}

/* Inputs — bottom border only */
.woocommerce-account .woocommerce-form input[type="text"],
.woocommerce-account .woocommerce-form input[type="email"],
.woocommerce-account .woocommerce-form input[type="password"],
.woocommerce-account form.login input[type="text"],
.woocommerce-account form.login input[type="email"],
.woocommerce-account form.login input[type="password"],
.woocommerce-account form.register input[type="text"],
.woocommerce-account form.register input[type="email"],
.woocommerce-account form.register input[type="password"] {
  width: 100% !important;
  border: none !important;
  border-bottom: 1.5px solid #e0d4c8 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 10px 0 !important;
  font-family: Manrope, sans-serif !important;
  font-size: 0.9rem !important;
  color: #1c1108 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.2s;
}
.woocommerce-account .woocommerce-form input:focus,
.woocommerce-account form.login input:focus,
.woocommerce-account form.register input:focus {
  border-bottom-color: #c4956a !important;
  box-shadow: none !important;
}

.woocommerce-account .woocommerce-form-row,
.woocommerce-account .form-row {
  margin-bottom: 24px !important;
  padding: 0 !important;
}

/* Address book (My Account > Addresses) -- inputs/select match the login/register bottom-border style */
.woocommerce-account .woocommerce-address-fields input[type="text"],
.woocommerce-account .woocommerce-address-fields input[type="email"],
.woocommerce-account .woocommerce-address-fields input[type="tel"] {
  width: 100% !important;
  border: none !important;
  border-bottom: 1.5px solid #e0d4c8 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 10px 0 !important;
  font-family: Manrope, sans-serif !important;
  font-size: 0.9rem !important;
  color: #1c1108 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.2s;
}
.woocommerce-account .woocommerce-address-fields input:focus {
  border-bottom-color: #c4956a !important;
  box-shadow: none !important;
}
.woocommerce-account .woocommerce-address-fields label {
  font-family: Manrope, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #9a8a7a !important;
  display: block;
  margin-bottom: 6px;
}
.woocommerce-account .woocommerce-address-fields .select2-container--default .select2-selection--single {
  border: none !important;
  border-bottom: 1.5px solid #e0d4c8 !important;
  border-radius: 0 !important;
  background: transparent !important;
  height: auto !important;
  padding: 10px 0 !important;
}
.woocommerce-account .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-family: Manrope, sans-serif !important;
  font-size: 0.9rem !important;
  color: #1c1108 !important;
  padding: 0 20px 0 0 !important;
  line-height: 1.4 !important;
}
.woocommerce-account .woocommerce-address-fields .select2-container--default .select2-selection__arrow {
  height: 100% !important;
}
.woocommerce-account .woocommerce-address-fields .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce-account .woocommerce-address-fields .select2-container--default.select2-container--focus .select2-selection--single {
  border-bottom-color: #c4956a !important;
}

/* Remember me */
.woocommerce-account .woocommerce-form__label-for-checkbox {
  font-size: 0.75rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #7a6a5a !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
}

/* Submit buttons */
.woocommerce-account .woocommerce-form button[type="submit"],
.woocommerce-account .woocommerce-Button,
.woocommerce-account button.button {
  width: 100% !important;
  background: #1c1108 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: Manrope, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  padding: 16px 32px !important;
  cursor: pointer !important;
  transition: background 0.3s !important;
  margin-top: 8px !important;
}
.woocommerce-account .woocommerce-form button[type="submit"]:hover,
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account button.button:hover {
  background: #c4956a !important;
}

/* Lost password */
.woocommerce-account .woocommerce-LostPassword a,
.woocommerce-account .woocommerce-form .lost_password a {
  font-family: Manrope, sans-serif !important;
  font-size: 0.72rem !important;
  color: #9a8a7a !important;
  text-decoration: none !important;
  letter-spacing: 0.5px;
}
.woocommerce-account .woocommerce-LostPassword a:hover,
.woocommerce-account .woocommerce-form .lost_password a:hover {
  color: #c4956a !important;
}

/* Notices */
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
  font-family: Manrope, sans-serif !important;
  font-size: 0.8rem !important;
  border-top: none !important;
  border-radius: 4px !important;
  padding: 12px 16px !important;
  margin-bottom: 24px !important;
  list-style: none !important;
}

/* Notice banners (WooCommerce Blocks component) -- used for empty-state and success/error
   notices inside My Account (e.g. "No order has been made yet."). Defaults to WC's saturated
   blue/green/red palette, which does not match this site's warm neutral+tan look. */
.woocommerce-account .wc-block-components-notice-banner {
  background: #f7f1ea !important;
  border: 1px solid #e0d4c8 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.woocommerce-account .wc-block-components-notice-banner.is-success {
  border-color: #b7cfa0 !important;
}
.woocommerce-account .wc-block-components-notice-banner.is-error {
  border-color: #d9a9a0 !important;
}
.woocommerce-account .wc-block-components-notice-banner.is-warning {
  border-color: #e0c58a !important;
}
.woocommerce-account .wc-block-components-notice-banner svg {
  background-color: #9a8a7a !important;
}
.woocommerce-account .wc-block-components-notice-banner.is-success svg {
  background-color: #7a9a5a !important;
}
.woocommerce-account .wc-block-components-notice-banner.is-error svg {
  background-color: #b06a5a !important;
}
.woocommerce-account .wc-block-components-notice-banner.is-warning svg {
  background-color: #c4956a !important;
}
.woocommerce-account .wc-block-components-notice-banner .wc-block-components-notice-banner__content,
.woocommerce-account .wc-block-components-notice-banner .wc-block-components-notice-banner__content * {
  font-family: Manrope, sans-serif !important;
  color: #1c1108 !important;
}
.woocommerce-account .wc-block-components-notice-banner .wc-block-components-notice-banner__content a {
  color: #c4956a !important;
  opacity: 1 !important;
}
.woocommerce-account .wc-block-components-notice-banner .wc-block-components-notice-banner__content a:hover {
  color: #1c1108 !important;
  background: transparent !important;
}

/* Wishlist (YITH shortcode) -- both the embedded My Account > Favorites view AND the
   standalone /wishlist/ page -- now a product-card grid (2026-08-05), see the
   ".km-wishlist-*" rules further down. The old <table> layout and its CSS
   (.wishlist_table td.product-*, thead, ins/del) are gone along with the
   table markup itself (see woocommerce/wishlist-view.php override). */
.yith-wcwl-share {
  display: none !important;
}
.woocommerce-account .wishlist-title h2 {
  display: block !important;
  width: 100% !important;
}
.km-wishlist-media {
  position: relative;
}
.km-wishlist-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  text-decoration: none !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;
  box-shadow: none !important;
  transition: color 0.2s, background 0.2s;
  z-index: 2;
}
.km-wishlist-remove:hover {
  background: rgba(0, 0, 0, 0.2) !important;
  color: #fff !important;
}
li.product .wishlist-in-stock,
li.product .wishlist-out-of-stock {
  display: block;
  padding: 0 16px 10px !important;
  margin: 0 !important;
  font-family: Manrope, sans-serif;
  font-size: 0.7rem !important;
  font-weight: 600;
  letter-spacing: 0.3px;
}
li.product .wishlist-in-stock { color: #2f7d4f; }
li.product .wishlist-out-of-stock { color: #c0392b; }
.km-wishlist-empty {
  text-align: center;
  padding: 56px 24px;
  color: #7a6a5a;
  font-family: Manrope, sans-serif;
  font-size: 0.95rem;
  width: 100%;
}
/* Standalone /wishlist/ page (post ID 125) already shows its own page title
   ("Wishlist", from the page-content template's H1) - YITH's own header
   template (wishlist-view-header.php, not overridden here) separately
   prints a redundant "My wishlist" <h2> right below it. Hidden only on
   this specific page (not on the My Account > Favorites tab, where
   "My wishlist" is the only heading for that section and stays visible). */
body.page-id-125 .wishlist-title-container {
  display: none !important;
}
/* My Account > Favorites: the wishlist form (#yith-wcwl-form) renders
   inside the narrower .woocommerce-MyAccount-content column (sidebar takes
   ~240px), not the full page width the standalone /wishlist/ page's
   6-column grid assumes - confirmed via computed styles: ~704px container
   at a 1440px viewport squeezed li.product down to ~97px (6 columns worth
   of flex-basis applied to a much narrower row). Viewport media queries
   can't see this, since the constraint is the CONTAINER width, not the
   viewport - so force 3 columns here explicitly instead, which works out
   to roughly the same card width as 6 columns on the full-width page.
   Scoped to >=783px (the account sidebar's own breakpoint, see
   ".kitmik-account-sidebar"): below that the sidebar stacks above the
   content and this column goes back to being close to full viewport
   width, where the normal viewport-based breakpoints already fit fine.
   Must be scoped with .woocommerce-account (not just #yith-wcwl-form) -
   the standalone /wishlist/ page uses the exact same #yith-wcwl-form id
   for its own (already-correctly-sized) 6-column layout, and a bare
   #yith-wcwl-form selector here would incorrectly shrink that page to 3
   columns too (confirmed by screenshot before adding this scope). */
@media (min-width: 783px) {
  .woocommerce-account #yith-wcwl-form .km-wishlist-products > li.product {
    flex-basis: calc((100% - 2 * 24px) / 3) !important;
    max-width: calc((100% - 2 * 24px) / 3) !important;
  }
}

/* Mobile (<=600px): same image-left/content-right grid split already used
   by the block-based product cards elsewhere (see the li.wc-block-product
   rules in the "MOBILE PRODUCT CARDS" media query below) - reused here for
   the wishlist's classic li.product markup so both look consistent. Scoped
   to .km-wishlist-item only, so it can't affect any other li.product usage. */
@media (max-width: 600px) {
  li.product.km-wishlist-item {
    display: grid !important;
    /* WooCommerce core ships a dormant `.woocommerce ul.products li.product
       { width: 22.05% }` rule (classic-template CSS) that no other product
       grid on this site ever triggers, since they all use the block-based
       li.wc-block-product markup instead of classic li.product. It has no
       !important, so it's harmless while ul.products is display:flex
       (flex-basis wins over width there) - but once ul.products switches to
       display:grid at this breakpoint, flex-basis stops applying at all and
       that dormant width:22.05% becomes the winning rule, shrinking the
       card to ~22% width instead of the full grid track. Override explicitly. */
    width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns: 42% 1fr;
    column-gap: 14px;
    height: auto !important;
    overflow: hidden !important;
    align-items: start;
    background: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: rgba(28, 17, 8, 0.07) 0px 2px 24px 0px;
    padding: 12px !important;
  }
  li.product.km-wishlist-item .km-wishlist-media {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
  }
  li.product.km-wishlist-item .km-wishlist-media a {
    display: block;
  }
  li.product.km-wishlist-item .km-wishlist-media img {
    aspect-ratio: 1 / 1;
    height: auto !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 4px;
  }
  li.product.km-wishlist-item .woocommerce-loop-product__title,
  li.product.km-wishlist-item .price,
  li.product.km-wishlist-item .wishlist-in-stock,
  li.product.km-wishlist-item .wishlist-out-of-stock,
  li.product.km-wishlist-item .add_to_cart_button {
    grid-column: 2;
    text-align: left !important;
  }
  li.product.km-wishlist-item .woocommerce-loop-product__title {
    grid-row: 1;
    padding: 0 !important;
    margin: 0 0 4px !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  li.product.km-wishlist-item .price {
    grid-row: 2;
    padding: 0 !important;
    margin: 0 0 4px !important;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }
  li.product.km-wishlist-item .wishlist-in-stock,
  li.product.km-wishlist-item .wishlist-out-of-stock {
    grid-row: 3;
    padding: 0 !important;
    margin: 0 0 8px !important;
  }
  li.product.km-wishlist-item .add_to_cart_button {
    grid-row: 4;
    align-self: end;
    margin: 0 !important;
    width: 100% !important;
    padding: 8px 10px !important;
    letter-spacing: 0.5px !important;
    font-size: 0.62rem !important;
    white-space: nowrap !important;
  }
  .km-wishlist-remove {
    width: 22px;
    height: 22px;
    font-size: 15px;
  }
}

/* Product-card wishlist heart -- injected inline at the start of the title (same row),
   icon only, no text label, sized to sit comfortably next to the title text */
li.product h2.wp-block-post-title,
li.wc-block-product h2.wp-block-post-title {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  text-align: left !important;
}
li.product h2.wp-block-post-title a,
li.wc-block-product h2.wp-block-post-title a {
  text-align: left !important;
}
.km-card-wishlist-heart {
  display: inline-flex !important;
  flex: 0 0 auto;
  vertical-align: middle;
}
.km-card-wishlist-heart .yith-add-to-wishlist-button-block {
  display: inline-flex !important;
}
.km-card-wishlist-heart .yith-wcwl-add-to-wishlist-button {
  display: inline-flex !important;
  align-items: center;
}
.km-card-wishlist-heart .yith-wcwl-add-to-wishlist-button__label {
  display: none !important;
}
.km-card-wishlist-heart .yith-wcwl-icon {
  width: 14px !important;
  height: 14px !important;
  color: #1c1108;
}

/* Logged-in: dashboard nav as pill tabs */
.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 100% !important;
  float: none !important;
  margin-bottom: 24px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 0 16px;
  list-style: none;
  border-bottom: 1px solid #f0e8df;
  margin-bottom: 32px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  font-family: Manrope, sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #7a6a5a !important;
  text-decoration: none !important;
  padding: 8px 16px;
  border-radius: 2px;
  transition: background 0.2s, color 0.2s;
  display: block;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  background: #f0e8df;
  color: #1c1108 !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
  width: 100% !important;
  float: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce-MyAccount-content li {
  font-family: Manrope, sans-serif;
  font-size: 0.92rem;
  line-height: 1.7;
  color: #1c1108;
}
.woocommerce-account .woocommerce-MyAccount-content a {
  color: #c4956a;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.woocommerce-account .woocommerce-MyAccount-content a:hover {
  color: #1c1108;
}
.woocommerce-account .woocommerce-MyAccount-content strong {
  color: #1c1108;
  font-weight: 600;
}

@media (max-width: 600px) {
  .woocommerce-account .woocommerce:not(.wp-block-breadcrumbs):not(.yith-wcwl-form) {
    padding: 36px 24px 32px;
  }
}

/* ============================================
   DIGITS OTP LOGIN — Minimal & Clean
   ============================================ */

/* "Or" divider */
.xoo-ml-or {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 24px 0;
  font-family: Manrope, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #c8b8a8 !important;
}
.xoo-ml-or::before,
.xoo-ml-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #f0e8df;
  margin: 0 12px;
}

/* "Login with OTP" button — outline style */
.xoo-ml-open-lwo-btn {
  width: 100% !important;
  background: transparent !important;
  color: #1c1108 !important;
  border: 1.5px solid #1c1108 !important;
  border-radius: 0 !important;
  font-family: Manrope, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  padding: 14px 32px !important;
  cursor: pointer !important;
  transition: background 0.3s, color 0.3s !important;
  display: block !important;
}
.xoo-ml-open-lwo-btn:hover {
  background: #1c1108 !important;
  color: #fff !important;
}

/* OTP form container */
.xoo-ml-lwo-form-placeholder {
  margin-top: 8px;
}

/* Phone label */
.xoo-ml-phinput-cont label {
  font-family: Manrope, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #9a8a7a !important;
  display: block;
  margin-bottom: 6px;
}

/* Phone input row: compact flag+code select + number input side by side */
.xoo-ml-has-cc {
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Country code select — compact */
.xoo-ml-phone-cc {
  flex: 0 0 90px !important;
  width: 90px !important;
  min-width: 0 !important;
  border: none !important;
  border-bottom: 1.5px solid #e0d4c8 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 10px 4px 10px 0 !important;
  font-family: Manrope, sans-serif !important;
  font-size: 0.82rem !important;
  color: #1c1108 !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239a8a7a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
  padding-right: 20px !important;
  transition: border-color 0.2s;
}
.xoo-ml-phone-cc:focus {
  border-bottom-color: #c4956a !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Phone number input — takes remaining space */
.xoo-ml-has-cc .xoo-ml-phinput,
.xoo-ml-has-cc input[type="tel"],
.xoo-ml-has-cc input[type="text"],
.xoo-ml-has-cc input[type="number"] {
  flex: 1 1 auto !important;
  width: auto !important;
  border: none !important;
  border-bottom: 1.5px solid #e0d4c8 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 10px 0 !important;
  font-family: Manrope, sans-serif !important;
  font-size: 0.9rem !important;
  color: #1c1108 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.2s;
}
.xoo-ml-has-cc .xoo-ml-phinput:focus,
.xoo-ml-has-cc input:focus {
  border-bottom-color: #c4956a !important;
  box-shadow: none !important;
}

/* OTP submit button */
.xoo-ml-lwo-form-placeholder button[type="submit"],
.xoo-ml-lwo-form-placeholder .xoo-ml-btn {
  width: 100% !important;
  background: #1c1108 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: Manrope, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  padding: 16px 32px !important;
  margin-top: 16px !important;
  cursor: pointer !important;
  transition: background 0.3s !important;
}
.xoo-ml-lwo-form-placeholder button[type="submit"]:hover,
.xoo-ml-lwo-form-placeholder .xoo-ml-btn:hover {
  background: #c4956a !important;
}

/* Any other Digits inputs (OTP code field) */
.xoo-ml-lwo-form-placeholder input[type="text"],
.xoo-ml-lwo-form-placeholder input[type="number"] {
  width: 100% !important;
  border: none !important;
  border-bottom: 1.5px solid #e0d4c8 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 10px 0 !important;
  font-family: Manrope, sans-serif !important;
  font-size: 0.9rem !important;
  color: #1c1108 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.2s;
  box-sizing: border-box !important;
}

/* ============================================
   DIGITS — +91 prefix, clean phone input
   ============================================ */

/* Wrap input + prefix together */
.xoo-ml-regphin {
  display: flex !important;
  align-items: flex-end !important;
  border-bottom: 1.5px solid #e0d4c8;
  transition: border-color 0.2s;
}
.xoo-ml-regphin:focus-within {
  border-bottom-color: #c4956a;
}

/* +91 static prefix */
.xoo-ml-regphin::before {
  content: "+91";
  font-family: Manrope, sans-serif;
  font-size: 0.9rem;
  color: #7a6a5a;
  padding: 10px 8px 10px 0;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
  border-right: 1px solid #e0d4c8;
  margin-right: 10px;
}

/* Phone input itself */
.xoo-ml-phone-input {
  flex: 1 1 auto !important;
  border: none !important;
  background: transparent !important;
  padding: 10px 0 !important;
  font-family: Manrope, sans-serif !important;
  font-size: 0.9rem !important;
  color: #1c1108 !important;
  box-shadow: none !important;
  outline: none !important;
  width: 100% !important;
  min-width: 0;
}
.xoo-ml-phone-input:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* Validation error */
.km-phone-error {
  font-family: Manrope, sans-serif;
  font-size: 0.7rem;
  color: #c0392b;
  margin-top: 6px;
  letter-spacing: 0.3px;
  display: none;
}
.km-phone-error.visible { display: block; }
.km-phone-ok .xoo-ml-regphin { border-bottom-color: #27ae60; }
.km-phone-err .xoo-ml-regphin { border-bottom-color: #c0392b; }

/* Fix: close white gap above the cream backdrop on the My Account page (main's default top margin sat on white body bg before the account content's cream background began) */
body.woocommerce-account {
  background-color: #fdf8f4 !important;
}


/* ============================================
   MY ACCOUNT — Sidebar layout v2
   ============================================ */

.woocommerce-account .woocommerce:not(.wp-block-breadcrumbs):not(.yith-wcwl-form) {
  display: flex !important;
  align-items: flex-start !important;
  gap: 40px !important;
  flex-wrap: wrap;
}

@media (min-width: 783px) {
  .kitmik-account-sidebar {
    flex: 0 0 200px !important;
    width: 200px !important;
  }
}

.kitmik-account-greeting {
  font-family: Manrope, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1c1108;
  margin: 0 0 20px;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 100% !important;
  float: none !important;
  margin-bottom: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: #7a6a5a;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
  transition: background-color 0.2s;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::before,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover::before {
  background-color: #1c1108;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 01-8 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 01-8 0'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--favorites a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 00-7.8 0L12 5.6l-1-1a5.5 5.5 0 00-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 000-7.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 00-7.8 0L12 5.6l-1-1a5.5 5.5 0 00-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 000-7.8z'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

.woocommerce-account .woocommerce-MyAccount-content {
  flex: 1 1 320px !important;
  min-width: 0;
  width: auto !important;
}

/* Order cards */
.kitmik-orders-list { display: flex; flex-direction: column; gap: 16px; }
.kitmik-order-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  border: 1px solid #f0e8df;
  border-radius: 4px;
  background: #fff;
  flex-wrap: wrap;
}
.kitmik-order-card__thumbs { display: flex; gap: 6px; flex-shrink: 0; }
.kitmik-order-thumb img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; display: block; }
.kitmik-order-thumb--placeholder { width: 48px; height: 48px; border-radius: 4px; background: #f0e8df; display: block; }
.kitmik-order-card__body { flex: 1 1 240px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.kitmik-order-card__meta { display: flex; flex-wrap: wrap; gap: 24px; }
.kitmik-order-card__label {
  display: block;
  font-family: Manrope, sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9a8a7a;
  margin-bottom: 3px;
}
.kitmik-order-card__meta > div { font-family: Manrope, sans-serif; font-size: 0.85rem; color: #1c1108; }
.kitmik-order-card__number { color: #1c1108; text-decoration: none; font-weight: 600; }
.kitmik-order-status { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.7rem; font-weight: 600; }
.kitmik-order-status--completed { background: #e5f3e8; color: #2f7d4f; }
.kitmik-order-status--processing { background: #fbeed9; color: #b9762b; }
.kitmik-order-status--on-hold,
.kitmik-order-status--pending { background: #f0e8df; color: #7a6a5a; }
.kitmik-order-status--cancelled,
.kitmik-order-status--refunded,
.kitmik-order-status--failed { background: #fbe4e1; color: #c0392b; }
.kitmik-order-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.kitmik-order-action {
  display: inline-block;
  padding: 8px 16px;
  border: 1.5px solid #1c1108;
  border-radius: 2px;
  font-family: Manrope, sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #1c1108;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.kitmik-order-action:hover { background: #1c1108; color: #fff; }


/* ============================================
   PRODUCT CARDS — global (Shop, category archives, New Arrivals, related products)
   Matches the Home page "New Arrivals" card design exactly.
   Covers both the classic Products grid (li.product, ul.products) and the
   newer Product Collection block (li.product with wp-block-post-title /
   wc-block-components-product-price markup).
   ============================================ */

li.product,
.wc-block-grid__product {
  background: #fff !important;
  border: 1px solid #f0e8df !important;
  border-radius: 16px !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: box-shadow 0.3s, transform 0.3s !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
li.product:hover,
.wc-block-grid__product:hover {
  box-shadow: 0 8px 32px rgba(28,17,8,0.1) !important;
  transform: translateY(-4px) !important;
}
li.product .wp-post-image,
li.product a img,
.wc-block-product-template .wc-block-grid__product-image img,
ul.products .wc-block-grid__product-image img {
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  display: block !important;
}
li.product .woocommerce-loop-product__title,
li.product .wp-block-post-title,
.wc-block-grid__product-title {
  font-family: Manrope, sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #1c1108 !important;
  padding: 12px 16px 4px !important;
  margin: 0 !important;
  text-align: left !important;
}
li.product .wp-block-post-title a {
  color: #1c1108 !important;
  text-decoration: none !important;
}
li.product .price,
.wc-block-grid__product-price,
.wc-block-components-product-price {
  padding: 0 16px 12px !important;
  font-size: 0.85rem !important;
  color: #c4956a !important;
  text-align: left !important;
  margin: 0 !important;
}
li.product .add_to_cart_button,
li.product .button,
.wc-block-grid__product-add-to-cart .wp-block-button__link {
  background: transparent !important;
  color: #1c1108 !important;
  border: 1.5px solid #1c1108 !important;
  border-radius: 0 !important;
  font-family: Manrope, sans-serif !important;
  font-size: 0.65rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  margin: auto 16px 16px 16px !important;
  display: block !important;
  text-align: center !important;
  transition: background 0.3s, color 0.3s !important;
  width: calc(100% - 32px) !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  white-space: normal !important;
  overflow: visible !important;
  line-height: 1.4 !important;
}
li.product .add_to_cart_button:hover,
li.product .button:hover,
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
  background: #1c1108 !important;
  color: #fff !important;
}
.single_add_to_cart_button:hover,
.single_add_to_cart_button.button:hover {
  background: #1c1108 !important;
  color: #fff !important;
  opacity: 1 !important;
}
li.product .woocommerce-badge--sale,
li.product .onsale,
.wc-block-grid__product-onsale {
  display: none !important;
}
.added_to_cart.wc_forward,
a.added_to_cart {
  font-family: Manrope, sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #1c1108 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.added_to_cart.wc_forward:hover,
a.added_to_cart:hover {
  color: #c4956a !important;
}


/* ============================================
   PRODUCT GRID — 4 columns, responsive
   Overrides WooCommerce's default column mechanism (flex/width-percentage)
   with an explicit flexbox layout (not CSS Grid) so the column count is
   fully predictable across both the classic Products grid and the newer
   Product Collection block. Flexbox is deliberate: with a fixed CSS Grid
   column count, a row with fewer products than the column count (last
   page, a filtered category, a short Home section, etc.) left the unused
   grid tracks empty on the right — products looked stuck to the left with
   a blank gap instead of spread across the row. justify-content: center
   plus a fixed flex-basis per item keeps full rows pixel-identical to the
   old grid while centering any incomplete row instead (2026-08-01).
   ============================================ */

.wc-block-product-template,
ul.products {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 24px !important;
  width: 100% !important;
}
.wc-block-product-template > li.product,
ul.products > li.product {
  flex: 0 1 calc((100% - 5 * 24px) / 6) !important;
  max-width: calc((100% - 5 * 24px) / 6) !important;
  margin: 0 !important;
  float: none !important;
}

@media (max-width: 1024px) {
  .wc-block-product-template > li.product,
  ul.products > li.product {
    flex-basis: calc((100% - 2 * 24px) / 3) !important;
    max-width: calc((100% - 2 * 24px) / 3) !important;
  }
}
@media (max-width: 768px) {
  .wc-block-product-template,
  ul.products {
    gap: 16px !important;
  }
  .wc-block-product-template > li.product,
  ul.products > li.product {
    flex-basis: calc((100% - 1 * 16px) / 2) !important;
    max-width: calc((100% - 1 * 16px) / 2) !important;
  }
}
@media (max-width: 400px) {
  li.product .wp-post-image,
  li.product a img,
  .wc-block-product-template .wc-block-grid__product-image img,
  ul.products .wc-block-grid__product-image img {
    height: 180px !important;
  }
}

.woocommerce-breadcrumb {
  text-align: center;
}

/* Single product page: WooCommerce's classic-hook compatibility wrapper
   (SingleProductTemplateCompatibility) around <main> carries its own default
   ~21px margin-top, stacking on top of main's own padding-top and breaking
   the site-wide header-to-breadcrumb gap. Zero it out here. */
.wp-block-group.woocommerce.product.is-layout-flow {
  margin-top: 0 !important;
}

/* Shop & category archive pages (with sidebar filters) — 4 columns instead of 6 */
.km-shop-main .wc-block-product-template > li.product,
.km-shop-main ul.products > li.product {
  flex-basis: calc((100% - 3 * 24px) / 4) !important;
  max-width: calc((100% - 3 * 24px) / 4) !important;
}
/* Single product page upsells/related Product Collection blocks only ever
   show a handful of items, never a full multi-row grid, so the
   justify-content:center fix above (meant for Shop/Home incomplete rows)
   instead strands 2-4 small cards in the middle with a gap under the
   section heading. Left-align these instead (2026-08-02). */
.single-product .wp-block-woocommerce-product-collection .wc-block-product-template {
  justify-content: flex-start !important;
}

/* Single product page: title + description were rendering at unstyled browser
   defaults — no theme.json fontSize was ever set for wp:post-title or the
   post-excerpt block on this template — so the title ballooned to ~2.5rem
   across 3-4 lines, reading as oversized/heavy next to the rest of the page's
   compact type scale (2026-08-07). Scoped to .single-product only so blog/page
   post-titles elsewhere on the site are untouched. */
.single-product .wp-block-post-title {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.1px !important;
  margin: 0 0 10px !important;
  color: var(--km-dark, #1c1108);
}
.single-product .wp-block-post-excerpt__excerpt {
  font-size: 0.92rem !important;
  line-height: 1.7 !important;
  color: var(--km-dark, #1c1108);
  margin: 0 0 4px;
}

/* Buy-box card: wraps price + GST breakdown + coupon banner + description +
   add-to-cart-form in one white rectangular panel, reusing the design
   system's card style verbatim (same shadow as /my-account/'s login card).
   These blocks are already contiguous siblings in the template, so the
   card wrapper adds zero reordering risk to the GST/coupon plugins, which
   render via WooCommerce's block-hook compatibility layer keyed to the
   post-excerpt block's position (2026-08-07). */
.single-product .km-buybox-card {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: rgba(28,17,8,0.07) 0px 2px 24px 0px;
  padding: 24px 28px;
  margin: 16px 0 20px;
}

:root{--km-bg:#fdf8f4;--km-dark:#1c1108;--km-accent:#c4956a;--km-light:#f0e8df;}


/* ============================================
   GLOBAL: header, nav + dropdown, footer, buttons, logo
   Migrated from Home page content — these must apply on every page,
   not just Home. (Previously only worked while viewing Home.)
   ============================================ */

.km-site-header{border-bottom:1px solid #ede5dc;position:sticky;top:0;z-index:999;width:100%!important;left:0!important;right:0!important;box-sizing:border-box;}
.km-nav-inner .wp-block-navigation__responsive-container-close,.km-nav-inner .wp-block-navigation__responsive-container-open{color:var(--km-dark)!important;}
.wp-block-navigation a{color:var(--km-dark)!important;text-decoration:none!important;}
.wp-block-navigation a:hover{color:var(--km-accent)!important;}
.wp-block-navigation .wp-block-navigation-item__content{padding:4px 0!important;}
.wp-block-navigation .wp-block-navigation-submenu__toggle{color:var(--km-dark)!important;}
.wp-block-navigation__submenu-container{background:#fdf8f4!important;border:none!important;border-top:2px solid var(--km-accent)!important;min-width:220px!important;padding:12px 0!important;box-shadow:0 8px 32px rgba(28,17,8,0.10)!important;border-radius:0 0 10px 10px!important;}
.wp-block-navigation__submenu-container a.wp-block-navigation-item__content{padding:12px 28px!important;font-size:0.75rem!important;letter-spacing:1.5px!important;font-weight:600!important;text-transform:uppercase!important;display:block!important;transition:background 0.2s,color 0.2s!important;}
.wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover{background:var(--km-light)!important;color:var(--km-accent)!important;padding-left:34px!important;}

/* Categories dropdown replaced 2026-08-02 by the click-to-drill-down panel in the kitmik-customizations plugin (Kitmik_Categories_Menu) — see assets/categories-menu.css there. */



.wp-block-woocommerce-mini-cart-button a,.wp-block-woocommerce-customer-account a{color:var(--km-dark)!important;}

@media(max-width:768px){
  .km-nav-inner{padding-left:20px!important;padding-right:20px!important;}
}

/* -- Buttons -- */
.wp-element-button,.wp-block-button__link{border-radius:0!important;font-family:Manrope,sans-serif!important;font-weight:600!important;letter-spacing:2.5px!important;text-transform:uppercase!important;font-size:0.68rem!important;transition:background 0.3s,color 0.3s,border-color 0.3s!important;}
.km-btn-dark .wp-block-button__link{background:var(--km-dark)!important;color:#fff!important;border:1.5px solid var(--km-dark)!important;padding:14px 36px!important;}
.km-btn-dark .wp-block-button__link:hover{background:var(--km-accent)!important;border-color:var(--km-accent)!important;}
.km-btn-outline .wp-block-button__link{background:transparent!important;color:var(--km-dark)!important;border:1.5px solid var(--km-dark)!important;padding:12px 32px!important;}
.km-btn-outline .wp-block-button__link:hover{background:var(--km-dark)!important;color:#fff!important;}
.km-btn-outline-white .wp-block-button__link:hover{background:#fff!important;color:var(--km-dark)!important;border-color:#fff!important;}

/* -- Footer -- */
.km-site-footer{border-top:1px solid #e8ddd4;width:100vw!important;margin-left:calc(50% - 50vw)!important;}
.km-footer-brand{min-width:220px;max-width:260px;flex:0 0 240px!important;}

.km-footer-inner{align-items:flex-start!important;}
.km-social-links li a{color:var(--km-dark)!important;}
.km-social-links li a svg{fill:var(--km-dark)!important;}
.km-social-links li a:hover svg{fill:var(--km-accent)!important;}
@media(max-width:768px){
  .km-footer-inner{flex-direction:column!important;align-items:center!important;}
  .km-footer-brand{flex:none!important;width:100%!important;max-width:none!important;align-items:center!important;text-align:center!important;}
  .km-footer-brand .km-footer-logo{justify-content:center!important;}
  .km-footer-brand p{text-align:center!important;}
  .km-social-links{justify-content:center!important;}
  .km-footer-links{flex:none!important;width:100%!important;gap:24px!important;margin-top:8px!important;}
}

/* -- Site logo -- */
.wp-block-site-logo img{display:block!important;height:auto!important;}
.wp-block-site-logo a{display:inline-flex!important;}

/* -- Social icons transparent bg (general) -- */
.wp-block-social-links .wp-block-social-link,.wp-social-link{background-color:transparent!important;padding:4px!important;}
.wp-block-social-links .wp-block-social-link a svg{fill:var(--km-dark,#1c1108)!important;}
.wp-block-social-links .wp-block-social-link a:hover svg{fill:var(--km-accent,#c4956a)!important;}


/* ============================================
   GLOBAL TYPOGRAPHY — Manrope everywhere, no exceptions
   Previously only the Home page enforced this on headings; body text
   had no global font rule at all anywhere on the site.
   ============================================ */
body, p, li, a, span, button, input, textarea, select {
  font-family: Manrope, sans-serif;
}
h1, h2, h3, h4, h5, h6, .wp-block-heading {
  font-family: Manrope, sans-serif !important;
}


/* ============================================
   MY ACCOUNT — Login split layout (image left, form right)
   ============================================ */

.woocommerce-account .woocommerce:not(.wp-block-breadcrumbs):not(.yith-wcwl-form):has(.km-login-split) {
  max-width: 900px !important;
  border-radius: 12px;
}

.km-login-split {
  display: flex;
  align-items: stretch;
  gap: 40px;
}

.km-login-image {
  flex: 0 0 42%;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.km-login-image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, rgba(196,149,106,0.55), rgba(28,17,8,0.35));
  mix-blend-mode: multiply;
}

.km-login-overlay {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 28px 32px;
  background: linear-gradient(to top, rgba(20,12,6,0.72) 0%, rgba(20,12,6,0.32) 55%, rgba(20,12,6,0) 100%);
}
.km-login-kicker {
  display: block;
  font-family: Manrope, sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #f0e4d8;
  margin-bottom: 10px;
}
.km-login-kicker-brand {
  text-transform: none;
}
.km-login-headline {
  font-family: Manrope, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: #ffffff;
  margin: 0;
  max-width: 22ch;
}

.km-login-form-panel h2 {
  display: none !important;
}
.km-login-form-panel .km-login-brand {
  display: none !important;
}
.km-login-welcome-title {
  font-family: Manrope, sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  color: #1c1108;
  margin: 0 0 8px;
  letter-spacing: 0.3px;
}
.km-login-welcome-subtitle {
  font-family: Manrope, sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: #7a6a5a;
  margin: 0 0 28px;
  line-height: 1.5;
}
.km-login-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.km-login-form-panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.km-login-form-panel .km-login-brand {
  text-align: left;
}
.km-login-form-panel h2 {
  text-align: left !important;
}

@media (max-width: 782px) {
  .km-login-split {
    flex-direction: column;
    gap: 24px;
  }
  .km-login-image {
    flex-basis: auto;
    min-height: 200px;
  }
  .km-login-form-panel .km-login-brand,
  .km-login-form-panel h2 {
    text-align: center !important;
  }
  .km-login-welcome-title,
  .km-login-welcome-subtitle {
    text-align: center;
  }
  .km-login-kicker {
    font-size: 0.72rem;
  }
  .km-login-headline {
    font-size: 0.6rem;
    max-width: none;
  }
}
/* ============================================
   OUR STORY / ABOUT PAGE (page-story template)
   ============================================ */

.km-story-hero{position:relative;display:flex;align-items:stretch;overflow:hidden;background:#f5ede4;min-height:520px;}
.km-story-hero__left{flex:0 0 50%;max-width:50%;padding:80px 64px;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;position:relative;z-index:2;}
.km-story-hero__title{font-family:Manrope, sans-serif;font-weight:800;font-size:clamp(2rem,5vw,3.2rem);color:#1c1108;margin:0 0 20px;line-height:1.1;}
.km-story-hero__intro{font-family:Manrope, sans-serif;font-size:0.95rem;line-height:1.8;color:#5a4c3f;max-width:46ch;margin:0;}
.km-story-hero__right{flex:1;position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;}
.km-story-hero__accent{position:absolute;top:0;bottom:0;left:38%;right:6%;background:#dcc4a2;z-index:0;}
.km-story-hero__photos{position:relative;z-index:1;width:100%;height:100%;}
.km-story-hero__photo{position:absolute;width:220px;height:220px;object-fit:cover;border-radius:12px;box-shadow:0 12px 32px rgba(28,17,8,0.18);border:4px solid #fff;display:block;}
.km-story-hero__photo--1{top:16%;left:12%;transform:rotate(-3deg);}
.km-story-hero__photo--2{bottom:12%;right:10%;transform:rotate(3deg);}

.km-story-article{background:#fdf8f4;padding:64px 20px 40px;}
.km-story-card{background:#ffffff;border-radius:4px;box-shadow:rgba(28,17,8,0.07) 0px 2px 24px 0px;max-width:720px;margin:0 auto;padding:48px;box-sizing:border-box;}
.km-story-card p{font-family:Manrope, sans-serif;font-size:0.92rem;line-height:1.8;color:#1c1108;margin:0 0 22px;}
.km-story-card p:last-child{margin-bottom:0;}
.km-story-card strong{font-weight:700;color:#1c1108;}

.km-story-closing{background:#fdf8f4;text-align:center;padding:8px 20px 90px;}
.km-story-closing__brand{font-family:Manrope, sans-serif;font-weight:800;font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:1px;color:#1c1108;margin:0 0 10px;}
.km-story-closing__tagline{font-family:Manrope, sans-serif;font-size:0.85rem;letter-spacing:1.5px;text-transform:uppercase;color:#c4956a;font-weight:600;margin:0;}

@media (max-width:900px){
  .km-story-hero{flex-direction:column;min-height:0;}
  .km-story-hero__left{flex:none;max-width:100%;width:100%;padding:48px 24px 32px;text-align:center;}
  .km-story-hero__intro{max-width:none;margin:0 auto;}
  .km-story-hero__right{flex:none;width:100%;height:300px;}
  .km-story-hero__accent{left:14%;right:14%;}
  .km-story-hero__photo{width:140px;height:140px;}
  .km-story-hero__photo--1{left:8%;top:18%;}
  .km-story-hero__photo--2{right:8%;bottom:14%;}
}

@media (max-width:600px){
  .km-story-card{padding:32px 24px;}
}
/* ============================================
   CONTACT US PAGE — colorful icon + pill list
   ============================================ */

.km-contact-subtitle{font-family:Manrope,sans-serif;font-size:0.9rem;line-height:1.6;color:#7a6a5a;text-align:center;margin:-8px 0 36px;}
.km-contact-list{display:flex;flex-direction:column;align-items:center;gap:28px;max-width:360px;margin:0 auto;}
.km-contact-item{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;width:100%;}
.km-contact-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 14px rgba(28,17,8,0.14);}
.km-contact-icon svg{width:26px;height:26px;display:block;}
.km-contact-icon--whatsapp{background:#25D366;}
.km-contact-icon--instagram{background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);}
.km-contact-icon--facebook{background:#1877F2;}
.km-contact-icon--email{background:#c4956a;}
.km-contact-pill{display:block;width:100%;box-sizing:border-box;text-align:center;padding:14px 24px;border:1.5px solid #e0d4c8;border-radius:999px;font-family:Manrope,sans-serif;font-size:0.85rem;font-weight:600;color:#1c1108;letter-spacing:0.3px;transition:background 0.2s,border-color 0.2s,color 0.2s;}
.km-contact-item:hover .km-contact-pill{background:#fdf8f4;border-color:#c4956a;color:#c4956a;}

@media (max-width:480px){
  .km-contact-list{max-width:100%;}
}
/* ============================================
   SHOP FILTERS SIDEBAR (archive-product.html)
   ============================================ */

.km-shop-layout{gap:40px;align-items:flex-start;}
/* .km-shop-layout alone only supplies gap/align-items - display:flex on the
   real Shop page comes from Gutenberg's own block-generated classes
   (is-layout-flex / wp-block-group-is-layout-flex, from the block's own
   layout attribute), which the wishlist page's hand-written HTML (no block
   editor involved) never gets. Without this, .km-wishlist-layout defaulted
   to display:block and the sidebar + product grid stacked vertically
   instead of sitting side by side (caught via screenshot, 2026-08-05). */
.km-wishlist-layout{display:flex;flex-wrap:nowrap;justify-content:space-between;}
.km-shop-sidebar{flex:0 0 260px;width:260px;max-width:260px;}
.km-shop-main{flex:1 1 auto;min-width:0;width:auto;}

.km-shop-filters-title{font-family:Manrope,sans-serif!important;font-size:1.1rem!important;font-weight:700!important;color:#1c1108!important;letter-spacing:0.3px;margin-bottom:20px!important;}

.wp-block-woocommerce-product-filters{display:flex!important;flex-direction:column;gap:28px!important;}
.wp-block-woocommerce-product-filter-taxonomy,
.wp-block-woocommerce-product-filter-price,
.wp-block-woocommerce-product-filter-status,
.wp-block-woocommerce-product-filter-attribute{
  padding-bottom:24px;
  border-bottom:1px solid #ede1d3;
}
.wp-block-woocommerce-product-filter-attribute{border-bottom:none;padding-bottom:0;}

.wp-block-woocommerce-product-filter-taxonomy h3,
.wp-block-woocommerce-product-filter-price h3,
.wp-block-woocommerce-product-filter-status h3,
.wp-block-woocommerce-product-filter-attribute h3{
  font-family:Manrope,sans-serif!important;
  font-size:0.68rem!important;
  font-weight:700!important;
  letter-spacing:2px!important;
  text-transform:uppercase!important;
  color:#1c1108!important;
}

/* Checkbox list */
.wc-block-product-filter-checkbox-list__items{display:flex;flex-direction:column;gap:10px;}
.wc-block-product-filter-checkbox-list__label{
  display:flex!important;
  align-items:center;
  gap:9px;
  font-family:Manrope,sans-serif;
  font-size:0.82rem;
  color:#4a3f34;
  cursor:pointer;
}
.wc-block-product-filter-checkbox-list__input-wrapper{
  position:relative;
  width:16px;
  height:16px;
  flex-shrink:0;
  display:inline-flex;
}
.wc-block-product-filter-checkbox-list__input{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;margin:0;
  border:1.5px solid #d8c8b8;
  border-radius:3px;
  background:#fff;
  cursor:pointer;
  transition:background 0.2s,border-color 0.2s;
}
.wc-block-product-filter-checkbox-list__input:checked{
  background:#1c1108;
  border-color:#1c1108;
}
.wc-block-product-filter-checkbox-list__mark{
  position:absolute;
  top:3px;left:3px;
  width:10px;height:8px;
  color:#fff;
  pointer-events:none;
  opacity:0;
}
.wc-block-product-filter-checkbox-list__input:checked + .wc-block-product-filter-checkbox-list__mark,
.wc-block-product-filter-checkbox-list__input:checked ~ .wc-block-product-filter-checkbox-list__mark{
  opacity:1;
}
.wc-block-product-filter-checkbox-list__label:hover .wc-block-product-filter-checkbox-list__input{
  border-color:#c4956a;
}

/* Price slider — WooCommerce's own CSS (product-filter-price-slider-style.css) already
   implements a fully correct, cross-browser dual-handle slider driven by --low/--high
   custom properties; it just needs brand colors via its own documented CSS vars. */
.wc-block-product-filter-price-slider__range{
  --wc-product-filter-price-slider:#c4956a;
  --wc-product-filter-price-slider-handle:#fff;
  --wc-product-filter-price-slider-handle-border:#1c1108;
}

.wp-block-woocommerce-product-filter-price input[type=text],
.wp-block-woocommerce-product-filter-price input[type=number]{
  font-family:Manrope,sans-serif!important;
  font-size:0.78rem!important;
  color:#1c1108!important;
  border:1.5px solid #e0d4c8!important;
  border-radius:4px!important;
  padding:6px 8px!important;
  width:100%!important;
  max-width:100px!important;
  min-width:0!important;
  box-sizing:border-box!important;
  background:#fff!important;
}
.wc-block-product-filter-price-slider__content{
  column-gap:8px!important;
}

/* Active filters + clear */
.wp-block-woocommerce-product-filter-active{margin-bottom:4px;}
.wc-block-product-filter-removable-chips__item,
[class*="removable-chips"] button{
  font-family:Manrope,sans-serif!important;
  font-size:0.72rem!important;
  border:1.5px solid #1c1108!important;
  border-radius:999px!important;
  padding:5px 10px!important;
  color:#1c1108!important;
  background:transparent!important;
}
.wp-block-woocommerce-product-filter-clear-button button{
  font-family:Manrope,sans-serif!important;
  font-size:0.68rem!important;
  font-weight:600!important;
  letter-spacing:1px!important;
  text-transform:uppercase!important;
  color:#c4956a!important;
  background:transparent!important;
  border:none!important;
  padding:4px 0!important;
  cursor:pointer;
}


@media (max-width:900px){
  .km-shop-layout{flex-wrap:wrap!important;}
  .km-shop-sidebar{flex:0 0 100%;width:100%;max-width:100%;}
}
/* ============================================
   CATEGORY PAGE — subcategory strip
   ============================================ */

.km-cat-strip{
  position:relative;
  max-width:1400px;
  margin:0 auto 8px;
  padding:8px 48px 0;
  box-sizing:border-box;
}
.km-cat-strip__track{
  display:flex;
  justify-content:flex-start;
  gap:28px;
  overflow-x:auto;
  overflow-y:visible;
  padding:18px 6px 8px;
  scrollbar-width:none;
}
.km-cat-strip__track::-webkit-scrollbar{display:none;}
.km-cat-strip__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid #e6d6c2;
  background:#fff;
  color:#1c1108;
  font-size:1.1rem;
  line-height:1;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(28,17,8,0.15);
  z-index:2;
  padding:0;
}
.km-cat-strip__arrow:hover{
  border-color:#c4956a;
  color:#c4956a;
}
.km-cat-strip__arrow--prev{left:8px;}
.km-cat-strip__arrow--next{right:8px;}
@media (max-width:768px){
  .km-cat-strip__arrow{width:28px;height:28px;font-size:1rem;}
}
.km-cat-strip__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex:0 0 auto;
  width:104px;
}
.km-cat-strip__circle{
  width:96px;
  height:96px;
  border-radius:50%;
  padding:4px;
  border:1.5px solid #e6d6c2;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  transition:transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.km-cat-strip__item:hover .km-cat-strip__circle{
  border-color:#c4956a;
  transform:translateY(-6px) scale(1.07);
  box-shadow:0 12px 26px rgba(28,17,8,0.16);
}
.km-cat-strip__circle img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}
.km-cat-strip__label{
  font-family:Manrope,sans-serif;
  font-size:0.72rem;
  font-weight:600;
  color:#4a3f34;
  text-align:center;
  line-height:1.3;
  transition:color 0.2s;
}
.km-cat-strip__item:hover .km-cat-strip__label{
  color:#c4956a;
}

.km-cat-strip__item,
.km-cat-strip__item:focus,
.km-cat-strip__item:active,
.km-cat-strip__circle,
.km-cat-strip__circle:focus,
.km-cat-strip__circle img,
.km-cat-strip__circle img:focus {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width:768px){
  .km-cat-strip{padding:8px 20px 0;}
  .km-cat-strip__circle{width:76px;height:76px;}
  .km-cat-strip__item{width:84px;}
  .km-cat-strip__track{gap:18px;}
}
/* ============================================
   SHOP/CATEGORY — "Default sorting" dropdown
   ============================================ */

.woocommerce-ordering select.orderby{
  appearance:none!important;
  -webkit-appearance:none!important;
  -moz-appearance:none!important;
  font-family:Manrope,sans-serif!important;
  font-size:0.82rem!important;
  color:#1c1108!important;
  background-color:#fff!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239a8a7a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 14px center!important;
  background-size:10px 6px!important;
  border:1.5px solid #e0d4c8!important;
  border-radius:4px!important;
  padding:10px 34px 10px 14px!important;
  cursor:pointer;
  outline:none!important;
  box-shadow:none!important;
  transition:border-color 0.2s;
}
.woocommerce-ordering select.orderby:hover,
.woocommerce-ordering select.orderby:focus{
  border-color:#c4956a!important;
}
/* ============================================
   SHOP/CATEGORY — filter loading indicator
   ============================================ */

.wp-block-woocommerce-product-collection{position:relative;min-height:120px;}
.km-grid-loading{
  position:absolute;
  inset:0;
  background:rgba(253,248,244,0.75);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:80px;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.15s ease;
  z-index:5;
}
.wp-block-woocommerce-product-collection.is-km-loading .km-grid-loading{
  opacity:1;
  pointer-events:auto;
}
.km-grid-loading__spinner{
  width:34px;
  height:34px;
  border-radius:50%;
  border:3px solid #ede1d3;
  border-top-color:#c4956a;
  animation:km-spin 0.7s linear infinite;
}
@keyframes km-spin{
  to{transform:rotate(360deg);}
}

/* Cart & Checkout — same loading overlay, reused on the cart/checkout blocks */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout{
  position:relative;
}
.wp-block-woocommerce-cart.is-km-loading .km-grid-loading,
.wp-block-woocommerce-checkout.is-km-loading .km-grid-loading{
  opacity:1;
  pointer-events:auto;
}

/* ============================================
   CHECKOUT — compact fields, matching site theme (2026-08-04)
   WooCommerce Blocks ships text inputs at a fixed 50px/16px size.
   Shrunk for a tighter look per reference request, scoped to
   desktop/tablet (>=783px) only — mobile keeps the default 16px
   font/50px box because anything smaller triggers iOS Safari's
   auto-zoom-on-focus on form inputs.
   ============================================ */
@media (min-width: 783px) {
  .wp-block-woocommerce-checkout .wc-block-components-text-input input[type="text"],
  .wp-block-woocommerce-checkout .wc-block-components-text-input input[type="email"],
  .wp-block-woocommerce-checkout .wc-block-components-text-input input[type="tel"],
  .wp-block-woocommerce-checkout .wc-block-components-text-input input[type="number"],
  .wp-block-woocommerce-checkout .wc-block-components-text-input input[type="url"],
  .wp-block-woocommerce-checkout .wc-block-components-text-input input[type="password"] {
    height: 44px !important;
    font-size: 0.875rem !important;
    line-height: 20px !important;
    padding: 12px 12px !important;
    border-color: #e0d4c8 !important;
    border-radius: 6px !important;
  }
  .wp-block-woocommerce-checkout .wc-block-components-text-input.is-active input[type="text"],
  .wp-block-woocommerce-checkout .wc-block-components-text-input.is-active input[type="email"],
  .wp-block-woocommerce-checkout .wc-block-components-text-input.is-active input[type="tel"],
  .wp-block-woocommerce-checkout .wc-block-components-text-input.is-active input[type="number"],
  .wp-block-woocommerce-checkout .wc-block-components-text-input.is-active input[type="url"],
  .wp-block-woocommerce-checkout .wc-block-components-text-input.is-active input[type="password"],
  .wp-block-woocommerce-checkout .wc-block-components-text-input input:-webkit-autofill {
    padding: 21px 10px 7px !important;
  }
  .wp-block-woocommerce-checkout .wc-block-components-text-input input:focus {
    border-color: #c4956a !important;
  }
  .wp-block-woocommerce-checkout .wc-block-components-text-input label {
    font-size: 0.875rem !important;
    top: 22px !important;
    left: 12px !important;
    color: #9a8a7a !important;
  }
  .wp-block-woocommerce-checkout .wc-block-components-text-input.is-active label {
    top: 5px !important;
  }

  /* Country / State selects — match the same compact box, whichever element WC renders */
  .wp-block-woocommerce-checkout .wc-block-components-country-input input,
  .wp-block-woocommerce-checkout .wc-block-components-country-input select,
  .wp-block-woocommerce-checkout .wc-block-components-country-input button,
  .wp-block-woocommerce-checkout .wc-block-components-state-input input,
  .wp-block-woocommerce-checkout .wc-block-components-state-input select,
  .wp-block-woocommerce-checkout .wc-block-components-state-input button {
    height: 44px !important;
    font-size: 0.875rem !important;
    border-radius: 6px !important;
    border-color: #e0d4c8 !important;
  }

  /* Country/State dropdown labels weren't covered by the text-input
     label color rule above (2026-08-04) — different wrapper classes,
     no shared selector. Match the same grey. */
  .wp-block-woocommerce-checkout .wc-block-components-country-input label,
  .wp-block-woocommerce-checkout .wc-block-components-state-input label {
    color: #9a8a7a !important;
  }

  /* tighter vertical rhythm between fields */
  .wp-block-woocommerce-checkout .wc-block-components-text-input,
  .wp-block-woocommerce-checkout .wc-block-components-country-input,
  .wp-block-woocommerce-checkout .wc-block-components-state-input {
    margin-top: 10px !important;
  }
}
/* ==========================================================================
   Mobile-only horizontal product cards (Amazon-app style), requested
   2026-07-31. Applies everywhere the product grid appears: Shop, Home,
   category archives, and single-product Related/Upsells (all the same
   WooCommerce Product Collection block markup, <li class="wc-block-product">
   with image/title/price/button as direct sibling children), plus the older
   "Products (Beta)" block used only on the empty-cart page's upsell
   (<li class="wc-block-grid__product">, where image+title share one <a>).
   Desktop (>600px) is completely untouched — every rule here lives inside
   this single media query. */
@media (max-width: 600px) {

  /* Multiple existing rules control column count at different
     specificities (base .wc-block-product-template/ul.products stepping
     6 to 3 to 2 columns via 1024px/768px breakpoints, plus an unconditional
     4-column override scoped to .km-shop-main on Shop/category pages that
     has no mobile step-down of its own — confirmed live on the Apparel
     category page, 2026-07-31). Mirroring every one of those selectors
     here, at equal specificity and later in the file, is what reliably
     forces a single column everywhere instead of just one variant. */
  .wc-block-product-template,
  ul.products,
  .km-shop-main .wc-block-product-template,
  .km-shop-main ul.products,
  .wc-block-product-template__responsive,
  .wc-block-product-template.is-flex-container,
  .wc-block-grid__products {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .wc-block-product-template.is-flex-container > li {
    width: 100% !important;
  }

  /* Flexbox reset (2026-08-01): the desktop/tablet rules above size each
     item with a fixed flex-basis/max-width per breakpoint (6/3/2 columns).
     At this width every row goes back to one full-width column, so those
     values must be reset back to 100% here — otherwise the narrower
     tablet-width max-width would linger and shrink the single column. */
  .wc-block-product-template > li.product,
  ul.products > li.product,
  .km-shop-main .wc-block-product-template > li.product,
  .km-shop-main ul.products > li.product {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }

  /* ---- Modern Product Collection block (Shop, Home, category archives,
         single-product Related/Upsells) ---- */
  li.wc-block-product {
    display: grid !important;
    grid-template-columns: 42% 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    height: auto !important;
    overflow: hidden !important;
    align-items: start;
    background: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: rgba(28, 17, 8, 0.07) 0px 2px 24px 0px;
    padding: 12px !important;
  }
  /* The Home page has its own page-embedded style block with a
     .km-new-arrivals-scoped card rule (padding:0, border:1px) that
     otherwise wins here on specificity — this selector combines both
     of the li's own classes to reliably outrank it. */
  .km-new-arrivals li.wc-block-product.product {
    padding: 12px !important;
    border: none !important;
  }
  li.wc-block-product .wc-block-components-product-image {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
  }
  li.wc-block-product .wc-block-components-product-image a {
    display: block;
  }
  .wc-block-product-template li.wc-block-product .wc-block-components-product-image img {
    aspect-ratio: 1 / 1;
    height: auto !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 4px;
  }
  li.wc-block-product .wp-block-post-title,
  li.wc-block-product .wp-block-woocommerce-product-price,
  li.wc-block-product .wc-block-components-product-button {
    grid-column: 2;
    text-align: left !important;
  }
  li.wc-block-product .wp-block-post-title {
    grid-row: 1;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  li.wc-block-product .wp-block-woocommerce-product-price {
    grid-row: 2;
    margin: 0 0 8px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }
  li.wc-block-product .wp-block-woocommerce-product-price .woocommerce-price-suffix {
    display: none !important;
  }
  li.wc-block-product .wc-block-components-product-button {
    grid-row: 3;
  }
  li.wc-block-product .wc-block-components-product-button .wp-block-button__link {
    padding: 8px 10px !important;
    letter-spacing: 0.5px !important;
    font-size: 0.62rem !important;
    white-space: nowrap !important;
  }

  /* ---- Legacy "Products (Beta)" block (empty-cart upsell only) ----
     Image + title share one <a class="wc-block-grid__product-link">;
     display:contents drops that anchor's own box so its two children
     become direct grid items of the <li>, placeable independently
     just like the modern block above. The anchor's link behavior is
     unaffected — only its box generation is removed. */
  li.wc-block-grid__product {
    display: grid !important;
    grid-template-columns: 42% 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    height: auto !important;
    overflow: hidden !important;
    align-items: start;
    background: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: rgba(28, 17, 8, 0.07) 0px 2px 24px 0px;
    padding: 12px !important;
  }
  li.wc-block-grid__product > a.wc-block-grid__product-link {
    display: contents;
  }
  li.wc-block-grid__product .wc-block-grid__product-image {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
  }
  li.wc-block-grid__product .wc-block-grid__product-image img {
    aspect-ratio: 1 / 1;
    height: auto !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 4px;
  }
  li.wc-block-grid__product .wc-block-grid__product-title,
  li.wc-block-grid__product .wc-block-grid__product-price,
  li.wc-block-grid__product .wc-block-grid__product-add-to-cart {
    grid-column: 2;
    text-align: left !important;
  }
  li.wc-block-grid__product .wc-block-grid__product-title {
    grid-row: 1;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  li.wc-block-grid__product .wc-block-grid__product-price {
    grid-row: 2;
    margin: 0 0 8px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }
  li.wc-block-grid__product .wc-block-grid__product-price .woocommerce-price-suffix {
    display: none !important;
  }
  li.wc-block-grid__product .wc-block-grid__product-add-to-cart {
    grid-row: 3;
  }
  li.wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link {
    padding: 8px 10px !important;
    letter-spacing: 0.5px !important;
    font-size: 0.62rem !important;
    white-space: nowrap !important;
  }
}


/* ============================================
   MOBILE MENU OVERLAY — full-screen panel matching reference design:
   in-panel logo + account/wishlist/cart row, search bar, left-aligned
   list with dividers + right-aligned chevrons, tap-to-expand submenu.
   The header row + search markup is injected via render_block() in
   functions.php (km-mobile-menu-header-item) into the same <ul> the
   desktop menu bar uses, so it must stay hidden above the breakpoint.
   ============================================ */
.km-mobile-menu-header-item,
.km-mobile-search { display: none !important; }

@media (max-width: 782px) {
  .wp-block-navigation__responsive-container.is-menu-open {
    background: #fff !important;
  }
  .wp-block-navigation__responsive-container-close {
    top: 22px !important;
    left: 20px !important;
    right: auto !important;
  }
  .is-menu-open .km-nav-links.wp-block-navigation__container {
    align-items: stretch !important;
    width: 100%;
  }

  /* Header row: logo centered, account/wishlist/cart on the right,
     left gutter reserved so it doesn't collide with the close (X). */
  .km-mobile-menu-header-item {
    display: block !important;
    width: 100%;
    padding: 14px 20px 18px 56px !important;
    border-bottom: 1px solid #ede5dc;
  }
  .km-mobile-menu-topbar {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .km-mobile-menu-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    grid-column: 2;
    justify-self: center;
  }
  .km-mobile-menu-logo img { display: block; }
  .km-mobile-menu-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    grid-column: 3;
    justify-self: end;
  }
  .km-mobile-menu-icons a:focus-visible,
  .km-mobile-menu-icons a:focus {
    outline: 2px solid var(--km-accent);
    outline-offset: 3px;
    border-radius: 4px;
  }
  .km-mobile-menu-icons .wp-block-navigation-item__content {
    width: 20px !important;
    height: 20px !important;
  }

  /* Search bar */
  .km-mobile-search {
    display: block !important;
    position: relative;
    width: 100%;
    padding: 16px 20px;
    border-bottom: 1px solid #ede5dc;
    box-sizing: border-box;
  }
  .km-mobile-search input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: var(--km-light);
    border-radius: 999px;
    padding: 12px 20px 12px 42px;
    font-family: Manrope, sans-serif;
    font-size: 0.85rem;
    color: var(--km-dark);
    -webkit-appearance: none;
    appearance: none;
  }
  .km-mobile-search input[type="search"]::placeholder { color: #9a8a7a; }
  .km-mobile-search::before {
    content: "";
    position: absolute;
    left: 38px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    opacity: 0.55;
    background-color: var(--km-dark);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  /* Nav list rows: left-aligned, full-width, divider + chevron */
  .is-menu-open .km-nav-links > li.wp-block-navigation-item:not(.km-mobile-menu-header-item) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    border-bottom: 1px solid #ede5dc;
    padding: 0 20px;
  }
  .is-menu-open .km-nav-links .wp-block-navigation-item__content {
    padding: 16px 0 !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
  }
  .is-menu-open .km-nav-links .wp-block-navigation-submenu__toggle {
    position: static !important;
    margin-left: auto;
    padding: 8px !important;
  }
  .is-menu-open .km-nav-links .wp-block-navigation-submenu__toggle svg {
    transform: rotate(-90deg);
    transition: transform 0.2s ease;
  }
  .is-menu-open .km-nav-links .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
    transform: rotate(0deg);
  }

  /* Submenu: collapsed by default, expands on tap (chevron-driven, no boxed card) */
  .is-menu-open .wp-block-navigation__submenu-container {
    position: static !important;
    max-height: 0;
    overflow: hidden;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    flex: 1 0 100%;
    order: 3;
    padding: 0 !important;
    transition: max-height 0.25s ease;
  }
  .is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
    max-height: 600px;
  }
  .is-menu-open .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
    padding: 10px 0 10px 14px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
  }
}


/* Fix-up pass for the mobile menu overlay above:
   1) The parent theme's useRootPaddingAwareAlignments adds
      var(--wp--style--root--padding-*) to the overlay content box (~30px),
      which combined with our own <li> padding (content-box by default)
      overflowed the panel. Zero out the root inset here and let our own
      per-item padding be the only spacing, computed against the full width.
   2) Core hides `.wp-block-navigation__submenu-icon` specifically inside
      the mobile overlay (its own default UX: show submenus always expanded,
      no toggle) — different class from `.wp-block-navigation-submenu__toggle`
      that we already styled, so it survived untouched until now. Un-hide it
      so tap-to-expand works as intended. */
@media (max-width: 782px) {
  .wp-block-navigation__responsive-container-content,
  .wp-block-navigation__responsive-dialog {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .km-mobile-menu-header-item,
  .is-menu-open .km-nav-links > li.wp-block-navigation-item {
    box-sizing: border-box !important;
  }
  .is-menu-open .wp-block-navigation__submenu-icon {
    display: flex !important;
  }
}

@media (max-width: 782px) {
  .is-menu-open .wp-block-navigation__submenu-container {
    overflow: hidden !important;
  }
}

/* The toggle chevron SVG uses CSS width:inherit (core's own rule), which
   resolves through a circular auto-width chain here and collapses to 0 —
   set an explicit pixel size directly instead of relying on inheritance. */
@media (max-width: 782px) {
  .is-menu-open .km-nav-links .wp-block-navigation-submenu__toggle svg {
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
  }
}

@media (max-width: 782px) {
  /* Same flex-direction:column/align-items:center default as the top-level
     items (core's vertical-overlay behavior) was centering submenu links too. */
  .is-menu-open .wp-block-navigation__submenu-container li.wp-block-navigation-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    width: 100%;
  }
  .is-menu-open .km-nav-links .wp-block-navigation-submenu__toggle:focus-visible,
  .is-menu-open .km-nav-links .wp-block-navigation-submenu__toggle:focus {
    outline: 2px solid var(--km-accent);
    outline-offset: 2px;
    border-radius: 4px;
  }
}

@media (max-width: 782px) {
  .is-menu-open .km-nav-links > li.wp-block-navigation-submenu {
    cursor: pointer;
  }
}


/* ============================================
   NAVBAR SEARCH — lens icon in the header icon row (before Account),
   shared by desktop and the always-visible mobile header. Expands inline
   on desktop (room to spare); takes over the full header row on mobile
   (hides logo/hamburger/other icons while active) since space is tight.
   Markup injected via render_block() in functions.php.
   ============================================ */
.km-search-toggle {
  display: flex;
  align-items: center;
  position: relative;
}
.km-search-icon-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.km-search-icon {
  display: block;
  width: 22px;
  height: 22px;
  background-color: var(--km-dark);
  transition: background-color 0.2s;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.km-search-icon-btn:hover .km-search-icon {
  background-color: var(--km-accent);
}
.km-nav-search-form {
  display: none;
  align-items: center;
}
.km-search-toggle.is-active .km-search-icon-btn { display: none; }
.km-search-toggle.is-active .km-nav-search-form { display: flex; }

/* Desktop: inline expanding input, styled to match the themed mobile pill
   (rounded, --km-light background, leading lens icon) with a smooth grow
   animation instead of an instant appear. */
@media (min-width: 783px) {
  .km-nav-search-form {
    position: relative;
  }
  .km-nav-search-input {
    width: 0;
    min-width: 0;
    opacity: 0;
    padding: 8px 0;
    border: none;
    border-radius: 999px;
    background: var(--km-light);
    font-family: Manrope, sans-serif;
    font-size: 0.8rem;
    color: var(--km-dark);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .km-search-toggle.is-active .km-nav-search-input {
    width: 200px;
    opacity: 1;
    padding: 8px 14px 8px 34px;
  }
  .km-nav-search-input::placeholder { color: #9a8a7a; }
  .km-search-toggle.is-active .km-nav-search-form::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    opacity: 0.55;
    background-color: var(--km-dark);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .km-nav-search-close {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 6px;
    padding: 0 2px;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--km-dark);
    opacity: 0;
    animation: km-search-fade-in 0.3s ease 0.1s forwards;
  }
  .km-nav-search-close:hover { color: var(--km-accent); }
}

/* Mobile: full-width takeover — not enough room for an inline expand
   alongside the logo, hamburger, and other icons, so hide them while active. */
@media (max-width: 782px) {
  .km-nav-inner.km-search-mode .km-logo-lockup,
  .km-nav-inner.km-search-mode > nav.km-nav-links,
  .km-nav-inner.km-search-mode .km-icon-account,
  .km-nav-inner.km-search-mode .km-icon-wishlist,
  .km-nav-inner.km-search-mode .km-icon-cart {
    display: none !important;
  }
  .km-nav-inner.km-search-mode .km-nav-icons {
    flex: 1 1 auto;
    width: 100%;
  }
  .km-nav-inner.km-search-mode .km-search-toggle {
    width: 100%;
  }
  .km-nav-inner.km-search-mode .km-nav-search-form {
    width: 100%;
    position: relative;
  }
  .km-nav-inner.km-search-mode .km-nav-search-input {
    flex: 1 1 auto;
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: var(--km-light);
    border-radius: 999px;
    padding: 10px 16px 10px 38px;
    font-family: Manrope, sans-serif;
    font-size: 0.85rem;
    color: var(--km-dark);
  }
  .km-nav-inner.km-search-mode .km-nav-search-input::placeholder { color: #9a8a7a; }
  .km-nav-inner.km-search-mode .km-nav-search-form::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    opacity: 0.55;
    z-index: 1;
    background-color: var(--km-dark);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .km-nav-inner.km-search-mode .km-nav-search-close {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 10px;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--km-dark);
    flex-shrink: 0;
  }
}

/* The Account/Wishlist/Cart icon-only nav never had an explicit flex-wrap
   set (only its parent .km-nav-icons group did), so it defaulted to "wrap" —
   harmless until the new search icon narrowed its available width enough
   to tip Cart onto a second line. These are 3 small icons; never wrap. */
.km-nav-icons nav.wp-block-navigation {
  flex-wrap: nowrap !important;
}

/* The <ul> inside the icon-only nav has its own independent flex-wrap,
   not inherited from the <nav> fixed above — same issue, one level deeper. */
.km-nav-icons nav.wp-block-navigation ul.wp-block-navigation__container {
  flex-wrap: nowrap !important;
}

/* Shared expand-in animation for the search bar reveal, both desktop
   (alongside the width transition) and mobile (the full-row takeover swap
   is an instant display change otherwise, so this is what actually animates
   it in). */
@keyframes km-search-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.km-search-toggle.is-active .km-nav-search-form {
  animation: km-search-fade-in 0.3s ease;
}
@media (max-width: 782px) {
  .km-nav-inner.km-search-mode .km-nav-search-input {
    animation: km-search-fade-in 0.3s ease;
  }
}


/* ============================================
   SEARCH RESULTS PAGE — the "no results" fallback (parent theme's
   search.html + WooCommerce's inherited product-collection no-results
   markup) renders its search-again form inside an "alignwide" wrapper,
   and the core/search block itself defaults to width:100% of that
   wrapper — so it visually stretches near-edge-to-edge while the
   heading/paragraph text above it (same container width) just looks
   narrow because text doesn't fill its box. Cap it to a normal form
   width instead, left-aligned like the rest of the page content.
   ============================================ */
.wp-block-woocommerce-product-collection-no-results .wp-block-search {
  max-width: 460px;
  width: 100%;
}
.km-search-correction-notice {
  font-size: 0.9rem;
  color: #7a6a5a;
  margin-top: -8px;
  margin-bottom: 24px;
}
.km-search-correction-notice strong {
  color: var(--km-dark);
}


/* ============================================
   CHECKOUT — Country/State/City/PIN Code on one row (2026-08-04)
   Address form is a flex-wrap row; WooCommerce ships Country first
   (own 100% row) with City/State/Postcode paired up later (each 50%).
   An earlier version of this rule targeted fields by nth-child position,
   which turned out wrong in practice (assumed field order did not match
   the real DOM) and produced a broken layout. Replaced with :has() plus
   the autocomplete attribute WooCommerce assigns per field — confirmed
   directly from woocommerce/src/Blocks/Domain/Services/CheckoutFields.php:
   city=address-level2, state=address-level1, postcode=postal-code,
   phone=tel. This does not depend on field order at all.
   ============================================ */
@media (min-width: 783px) {
  .wc-block-checkout__shipping-fields .wc-block-components-address-form .wc-block-components-country-input,
  .wc-block-checkout__billing-fields .wc-block-components-address-form .wc-block-components-country-input {
    order: 1;
    flex: 1 0 calc(25% - 9px) !important;
  }
  .wc-block-checkout__shipping-fields .wc-block-components-address-form > *:has(input[autocomplete="address-level2"]),
  .wc-block-checkout__billing-fields .wc-block-components-address-form > *:has(input[autocomplete="address-level2"]),
  .wc-block-checkout__shipping-fields .wc-block-components-address-form > *:has(input[autocomplete="address-level1"]),
  .wc-block-checkout__billing-fields .wc-block-components-address-form > *:has(input[autocomplete="address-level1"]),
  .wc-block-checkout__shipping-fields .wc-block-components-address-form > *:has(input[autocomplete="postal-code"]),
  .wc-block-checkout__billing-fields .wc-block-components-address-form > *:has(input[autocomplete="postal-code"]) {
    order: 2;
    flex: 1 0 calc(25% - 9px) !important;
  }
  .wc-block-checkout__shipping-fields .wc-block-components-address-form > *:has(input[autocomplete="tel"]),
  .wc-block-checkout__billing-fields .wc-block-components-address-form > *:has(input[autocomplete="tel"]) {
    order: 3;
  }
}