@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --k-olive: #7C9039;
  --k-olive-dark: #5E7A2A;
  --k-olive-darker: #4A6020;
  --k-deep: #2E3320;
  --k-amber: #A6792E;
  --k-amber-light: #F3E7D6;
  --k-bg: #F2F5EC;
  --k-surface: #FFFFFF;
  --k-tint: #EDF1E2;
  --k-border: #E6EAD9;
  --k-muted: #8A9170;
  --k-text: #2E3320;
  --k-text-soft: #5A6348;
  --k-dark-img: #11140C;
  --k-radius: 14px;
  --k-radius-sm: 10px;
  --k-radius-pill: 24px;
  --k-shadow: 0 1px 3px rgba(46,51,32,0.06), 0 4px 16px rgba(46,51,32,0.04);
  --k-shadow-hover: 0 6px 24px rgba(46,51,32,0.10);
  --k-maxw: 1280px;
}

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--k-bg);
  color: var(--k-text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  color: var(--k-deep);
  letter-spacing: -0.4px;
}

a { color: var(--k-olive-dark); }
a:hover { color: var(--k-olive); text-decoration: none; }

.container { max-width: var(--k-maxw); }
/* NOTE: .container-fluid intentionally excluded — it must stay full-width
   per Bootstrap conventions. Constraining it broke the checkout payment column. */

#wrapper { background: var(--k-bg); }

.k-ico { width: 17px; height: 17px; flex-shrink: 0; vertical-align: middle; }
.k-add-btn .k-ico { width: 16px; height: 16px; }
.k-trust-item .k-ico { width: 21px; height: 21px; color: var(--k-olive); }
.k-sticky-cart .k-ico { width: 18px; height: 18px; }

/* ---------- Buttons ---------- */
.btn-primary,
.btn.btn-primary {
  background: var(--k-olive);
  border-color: var(--k-olive);
  color: #fff;
  font-weight: 500;
  border-radius: var(--k-radius-sm);
  padding: 11px 22px;
  transition: background .15s ease, transform .1s ease;
}
.btn-primary:hover, .btn.btn-primary:hover {
  background: var(--k-deep);
  border-color: var(--k-deep);
  color: #fff;
}
.btn-primary:active { transform: scale(0.985); }

.btn-secondary {
  background: #fff;
  border: 1px solid var(--k-border);
  color: var(--k-deep);
  border-radius: var(--k-radius-sm);
  font-weight: 500;
}
.btn-secondary:hover { background: var(--k-tint); color: var(--k-deep); }

/* ---------- Green info bar (contact + lab-tested | sign-in + cart) ---------- */
.k-greenbar.header-nav {
  background: var(--k-olive);
  color: #fff;
  border: none;
  padding: 6px 0;
  margin: 0;
  min-height: 0;
}
.k-greenbar-row { display: flex; align-items: center; min-height: 24px; }
.k-greenbar-left { display: flex; align-items: center; gap: 20px; flex: 1 1 auto; }
.k-greenbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 22px; flex: 0 0 auto; white-space: nowrap; }
.k-greenbar .k-tb-item { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 13px; }
.k-greenbar .k-tb-link { color: #fff !important; }
.k-greenbar .k-tb-link:hover { color: #fff !important; opacity: .85; }

/* cart + sign-in inside the green bar */
.k-greenbar #_desktop_cart,
.k-greenbar #_desktop_user_info,
.k-greenbar .blockcart,
.k-greenbar .user-info {
  background: transparent !important;
  margin: 0; padding: 0;
}
.k-greenbar a, .k-greenbar .blockcart a, .k-greenbar .user-info a {
  color: #fff !important;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.k-greenbar a:hover, .k-greenbar a:hover * { color: #fff !important; opacity: .9; }
.k-greenbar .blockcart, .k-greenbar .blockcart.active,
.k-greenbar .blockcart:hover { background: transparent !important; }
.k-greenbar .blockcart .cart-products-count {
  background: #fff !important;
  color: var(--k-olive-dark) !important;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px;
}
.k-greenbar .material-icons { font-size: 18px; vertical-align: middle; color: #fff; }
@media (max-width: 767px) {
  .k-tb-lab { display: none; }
  .k-greenbar { font-size: 12px; }
}

/* ---------- White header (logo + nav + search) ---------- */
.header-top, #header .header-top {
  background: var(--k-surface);
  border-bottom: 1px solid var(--k-border);
  box-shadow: none;
  padding: 14px 0;
}
#header { background: var(--k-surface); }

.k-logo {
  font-family: 'Outfit', sans-serif;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -1px;
  color: var(--k-olive-dark);
  text-decoration: none;
  line-height: 1;
  display: inline-block;
}
.k-logo:hover { color: var(--k-olive-dark); }
.k-logo .k-o { color: var(--k-amber); }

#_desktop_top_menu .top-menu a,
.header-top .menu a {
  color: var(--k-deep);
  font-weight: 400;
  font-size: 14.5px;
}
#_desktop_top_menu .top-menu a:hover,
#_desktop_top_menu .top-menu a:focus,
#_desktop_top_menu .top-menu .sub-menu a:hover,
#_desktop_top_menu .top-menu li:hover > a,
.header-top .menu a:hover,
.menu-dropdown a:hover {
  color: var(--k-olive) !important;
  background: transparent !important;
  background-color: transparent !important;
}
#_desktop_top_menu .top-menu a.dropdown-submenu:hover,
#_desktop_top_menu .top-menu .collapse a:hover {
  color: var(--k-olive) !important;
  background: var(--k-tint);
}
#header .header-top a:hover, #header .header-top a:focus,
.header-top a:hover {
  color: var(--k-olive) !important;
}
#header .blockcart:hover, #header .blockcart:hover * { color: #fff !important; }

/* general link hover safety net — kill Classic's default blue site-wide */
a:hover, a:focus { color: var(--k-olive); }
.header-top a:hover { color: var(--k-olive) !important; }

/* nuclear override for ps_mainmenu blue hover — target every rendered state */
#_desktop_top_menu a:hover,
#_desktop_top_menu a:focus,
#_desktop_top_menu a:active,
#_desktop_top_menu li:hover > a,
#_desktop_top_menu .top-menu > li > a:hover,
#_desktop_top_menu .top-menu .sub-menu a:hover,
#_desktop_top_menu .top-menu .sub-menu li:hover > a,
#_desktop_top_menu .top-menu li.menu-item:hover > a,
.menu .top-menu a:hover,
.top-menu a:hover,
.top-menu a:focus,
.top-menu li:hover > a,
.top-menu .sub-menu a:hover,
.top-menu .sub-menu li:hover > a,
ul.top-menu li a:hover,
#header .top-menu a:hover {
  color: var(--k-olive) !important;
  text-decoration: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

.header-nav i, .header-top i { color: var(--k-text-soft); }
.header-nav a:hover i, .header-top a:hover i,
.header .search-widget a:hover, .header i:hover { color: var(--k-olive); }

.cart-preview .header { color: var(--k-deep); }
.blockcart { position: relative; }
/* kill Classic's blue cart block background */
.blockcart,
.blockcart.active,
.header-top .blockcart,
#_desktop_cart .blockcart {
  background: transparent !important;
  border-radius: var(--k-radius-sm);
}
.blockcart a, .blockcart .header a { color: #fff !important; }
/* Desktop only — mobile cart should always stay transparent on the olive bar */
@media (min-width: 992px) {
  .blockcart:hover, .blockcart.active { background: var(--k-tint) !important; }
}
@media (max-width: 991px) {
  .k-mh-cart, .k-mh-cart:hover,
  .k-mh-cart .blockcart, .k-mh-cart .blockcart.active,
  #_mobile_cart, #_mobile_cart .blockcart, #_mobile_cart .blockcart.active {
    background: transparent !important;
    border-radius: 0 !important;
  }
}
.blockcart:hover a, .blockcart.active a { color: #fff !important; }
.blockcart .cart-products-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--k-olive);
  color: #fff;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  vertical-align: top;
  margin-left: 4px;
}
.blockcart.cart-empty .cart-products-count { display: none; }

/* ---------- Product grid card ---------- */
.products, .featured-products .products { gap: 16px; }

/* Product grid: 4 per row by default (home, full-width listings) */
#products .products,
.featured-products .products,
.products.product_list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
#products .products .product-miniature,
.featured-products .products .product-miniature,
.products .js-product {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* When a left filter sidebar is present, drop to 3 per row so cards don't squeeze */
#content-wrapper.left-column #js-product-list .products,
#content-wrapper.left-column .products.product_list,
#content-wrapper.col-md-8 #js-product-list .products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1199px) {
  #products .products, .featured-products .products, .products.product_list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  #products .products, .featured-products .products, .products.product_list,
  #content-wrapper.left-column #js-product-list .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  #products .products, .featured-products .products, .products.product_list,
  #content-wrapper.left-column #js-product-list .products {
    grid-template-columns: 1fr;
  }
}

.product-miniature {
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-miniature .thumbnail-container { display: flex; flex-direction: column; height: 100%; }
.product-miniature .product-description {
  padding: 12px 13px 14px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* uniform product name height (2 lines) so prices/buttons align */
.product-miniature .product-title {
  min-height: 2.7em;
  margin-bottom: 4px;
}
.product-miniature .product-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}
/* push price + button to the bottom of every card */
.product-miniature .k-card-foot { margin-top: auto; }
/* make grid cells stretch so all cards in a row match the tallest */
#products .products, .featured-products .products, .products.product_list {
  align-items: stretch;
}
#products .products > *, .featured-products .products > *, .products .js-product {
  display: flex;
}
.product-miniature:hover {
  box-shadow: var(--k-shadow-hover);
  transform: translateY(-2px);
}
.product-miniature .thumbnail-container {
  background: var(--k-dark-img);
  border-radius: var(--k-radius) var(--k-radius) 0 0;
  margin: 0;
  box-shadow: none;
}
.product-miniature .thumbnail-top {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--k-dark-img);
}
.product-miniature .thumbnail-top .product-thumbnail { display: block; height: 100%; }
.product-miniature .thumbnail-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-miniature .product-description { padding: 12px 13px 14px; }
.product-miniature .product-title a {
  color: var(--k-deep);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
}
.product-miniature .product-price-and-shipping .price {
  color: var(--k-deep);
  font-size: 16px;
  font-weight: 600;
}
.product-miniature .regular-price { color: var(--k-muted); font-size: 13px; }

.k-card-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 10px;
}
.k-card-foot .k-add-form { width: 100%; margin: 0; }
.k-card-foot .product-price-and-shipping { display: flex; align-items: baseline; gap: 8px; }
.k-badge {
  position: absolute;
  top: 9px; right: 9px;
  background: var(--k-tint);
  color: var(--k-olive-darker);
  font-size: 10px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: var(--k-radius-pill);
  z-index: 2;
}
.k-badge.k-badge-amber { background: var(--k-amber-light); color: var(--k-amber); }

/* compact add button that collapses on mobile */
.k-add-btn {
  border: none;
  background: var(--k-olive);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 11px 14px;
  border-radius: var(--k-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  text-align: center;
  transition: background .15s ease;
  white-space: nowrap;
}
.k-add-btn, .k-add-btn:link, .k-add-btn:visited,
.k-add-btn .k-add-label,
a.k-add-btn, a.k-add-btn .k-add-label,
.k-add-btn svg { color: #fff !important; fill: #fff !important; }
.k-add-btn:hover { background: var(--k-deep); color: #fff !important; }
.k-add-btn:hover .k-add-label, .k-add-btn:hover svg { color: #fff !important; fill: #fff !important; }
.k-add-btn .k-add-label { display: inline; }

/* ---------- Sticky add-to-cart bar (product page) ---------- */
.k-sticky-cart {
  position: fixed;
  left: 0; right: 0; bottom: -100px;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--k-border);
  box-shadow: 0 -4px 20px rgba(46,51,32,0.08);
  padding: 12px 0;
  z-index: 1040;
  transition: bottom .3s cubic-bezier(.2,.8,.2,1);
}
.k-sticky-cart.k-visible { bottom: 0; }
.k-sticky-cart .container {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.k-sticky-cart .k-sc-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.k-sticky-cart .k-sc-thumb {
  width: 44px; height: 44px; border-radius: 9px;
  background: var(--k-dark-img); flex-shrink: 0;
  object-fit: cover;
}
.k-sticky-cart .k-sc-name {
  font-weight: 500; font-size: 14px; color: var(--k-deep);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k-sticky-cart .k-sc-price { color: var(--k-olive-dark); font-weight: 600; font-size: 16px; }
.k-sticky-cart .btn { white-space: nowrap; }
@media (max-width: 600px) {
  .k-sticky-cart .k-sc-name { max-width: 130px; }
}

/* ---------- Product page ---------- */
.product-prices .current-price .price,
.product-prices .current-price span,
.current-price .price, .product-price, .h1 + .product-prices .price {
  color: var(--k-deep) !important; font-weight: 600; font-size: 28px;
}
.product-prices, .product-prices * { color: var(--k-deep); }
.product-information a, .product-description a, .tab-content a,
.product-tabs a:not(.nav-link) { color: var(--k-olive-dark); }
.product-information a:hover, .product-description a:hover { color: var(--k-olive); }
.product-discount .regular-price { color: var(--k-muted); }
.discount.discount-percentage, .product-flag.discount {
  background: #FCEBEB; color: #A32D2D;
  border-radius: var(--k-radius-pill);
  font-weight: 500;
}

/* volume / quantity discount tiles */
.k-volume-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 9px;
  margin: 14px 0 18px;
}
.k-volume-tile {
  border: 1.5px solid var(--k-border);
  border-radius: var(--k-radius-sm);
  padding: 11px 10px;
  cursor: pointer;
  position: relative;
  text-align: left;
  background: #fff;
  transition: border-color .12s ease, background .12s ease;
}
.k-volume-tile:hover { border-color: var(--k-olive); }
.k-volume-tile.k-selected {
  border-color: var(--k-olive);
  background: var(--k-tint);
}
.k-volume-tile .k-vt-units { font-weight: 600; font-size: 14px; color: var(--k-deep); }
.k-volume-tile .k-vt-price { font-size: 12.5px; color: var(--k-text-soft); margin-top: 2px; }
.k-volume-tile .k-vt-save {
  position: absolute; top: -8px; right: 8px;
  background: var(--k-olive); color: #fff;
  font-size: 10px; font-weight: 500;
  padding: 2px 7px; border-radius: var(--k-radius-pill);
}

/* quantity stepper */
.k-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-sm);
  overflow: hidden;
}
.k-qty button {
  border: none; background: #fff; width: 40px; height: 48px;
  font-size: 19px; color: var(--k-deep); cursor: pointer;
}
.k-qty button:hover { background: var(--k-tint); }
.k-qty input {
  width: 42px; height: 48px; text-align: center; border: none;
  font-weight: 600; font-size: 15px; color: var(--k-deep);
  background: #fff; -moz-appearance: textfield;
}
.k-qty input::-webkit-outer-spin-button,
.k-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* product tabs */
.product-tabs .nav-tabs { border-bottom: 1px solid var(--k-border); gap: 4px; }

/* tabs are relocated below the product-container by JS and get this class */
.k-tabs-fullwidth {
  width: 100%;
  margin-top: 36px;
  clear: both;
}
.tabs .nav-tabs .nav-link,
.product-tabs .nav-tabs .nav-link {
  border: none; color: var(--k-text-soft) !important; font-weight: 500;
  padding: 12px 18px; border-radius: 0;
  border-bottom: 2px solid transparent;
}
.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link.js-product-nav-active,
.product-tabs .nav-tabs .nav-link.active,
.nav-tabs .nav-link.active {
  color: var(--k-olive-dark) !important;
  border-bottom-color: var(--k-olive) !important;
  background: transparent !important;
}
.tabs .nav-tabs .nav-link:hover { color: var(--k-olive) !important; }

/* reassurance row */
.k-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 20px 0;
}
.k-trust-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--k-text-soft);
}
.k-trust-item i { color: var(--k-olive); }

/* keep product page content aligned, not pushed right */
#main .product-container { margin-left: 0; }
.product-information { padding-left: 0; }

/* rounded product page images + thumbnails */
#main .product-cover,
#main .product-cover img,
#main .images-container .product-cover {
  border-radius: var(--k-radius) !important;
  overflow: hidden;
}
#main .product-cover img { display: block; width: 100%; }
#main .product-images .thumb-container .thumb,
#main .js-qv-product-images img,
#main .product-images img,
#main .thumb {
  border-radius: var(--k-radius-sm) !important;
  overflow: hidden;
}
#main .product-cover .layer { border-radius: var(--k-radius); }

/* ---------- Age gate ---------- */
.k-agegate-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(17,20,12,0.72);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.k-agegate {
  background: #fff; border-radius: var(--k-radius);
  max-width: 420px; width: 100%;
  padding: 36px 32px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.k-agegate .k-ag-logo {
  font-size: 26px; font-weight: 600; color: var(--k-olive-dark);
  letter-spacing: -1px; margin-bottom: 18px;
}
.k-agegate .k-ag-logo .k-o { color: var(--k-amber); }
.k-agegate h2 { font-size: 21px; margin-bottom: 10px; }
.k-agegate p { color: var(--k-text-soft); font-size: 14px; margin-bottom: 24px; line-height: 1.5; }
.k-agegate .k-ag-btns { display: flex; gap: 12px; }
.k-agegate .k-ag-btns button {
  flex: 1; padding: 13px; border-radius: var(--k-radius-sm);
  font-weight: 600; font-size: 14px; cursor: pointer; border: none;
  font-family: 'Outfit', sans-serif;
}
.k-ag-yes { background: var(--k-olive); color: #fff; }
.k-ag-yes:hover { background: var(--k-olive-dark); }
.k-ag-no { background: #F1EFE8; color: var(--k-text-soft); }
.k-ag-no:hover { background: #E4E2D8; }
body.k-agegate-open { overflow: hidden; }


/* ---------- Footer ---------- */
#footer { background: var(--k-bg); color: var(--k-text-soft); padding-top: 40px; border-top: 1px solid #DCE3CB; }
#footer .k-logo, #footer .k-foot-logo {
  color: var(--k-olive-dark); font-size: 24px; font-weight: 600; letter-spacing: -1px;
}
#footer .k-foot-logo .k-o { color: var(--k-amber); }
#footer h3, #footer .h3,
#footer .links .title,
#footer .block-title,
#footer .footer__title { color: var(--k-deep) !important; font-size: 14px; margin-bottom: 14px; font-weight: 600; }
#footer,
#footer a, #footer li a, #footer p, #footer span, #footer li, #footer .toggle, #footer .navbar-toggler,
.footer-container, .footer-container a, .footer-container li a, .footer-container p, .footer-container span {
  color: var(--k-text-soft) !important;
}
#footer a:hover, .footer-container a:hover { color: var(--k-olive) !important; }
#footer .k-logo, #footer .k-foot-logo, #footer h3, #footer .h3 { color: var(--k-deep) !important; }
#footer .links ul { list-style: none; padding: 0; }
#footer .links li { margin-bottom: 8px; }
/* Brand block above footer columns */
.k-foot-brand {
  text-align: center;
  padding: 28px 0 18px;
  border-bottom: 1px solid #DCE3CB;
  margin-bottom: 24px;
}
.k-foot-brand .k-foot-logo {
  font-family: 'Outfit', sans-serif;
  font-size: 28px; font-weight: 600; letter-spacing: -1px;
  color: var(--k-olive-dark) !important;
  text-decoration: none;
  display: inline-block;
}
.k-foot-brand .k-foot-logo .k-o { color: var(--k-amber); }
.k-foot-brand .k-foot-tagline {
  font-size: 13px; color: var(--k-text-soft); margin: 6px 0 0;
}

/* Unified footer strip — legal disclaimer + cards/copyright together */
.k-foot-strip {
  background: #E8EDDD;
  border-top: 1px solid #DCE3CB;
  padding: 28px 0 22px;
}
.k-foot-strip .k-legal-disclaimer {
  background: transparent;
  padding: 0 0 18px;
  border: none;
}
.k-foot-strip .k-legal-disclaimer p {
  max-width: 1000px; margin: 0 auto; text-align: center;
  font-size: 12px; line-height: 1.7; color: var(--k-text-soft);
}
.k-foot-strip .k-foot-bottom {
  border-top: 1px solid #DCE3CB;
  margin-top: 0;
  padding: 18px 0 0;
  font-size: 12px; color: var(--k-muted);
  text-align: center;
}
.k-foot-cards {
  display: flex; gap: 9px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 14px;
}
.k-foot-cards svg { border-radius: 4px; }
.k-foot-copy { margin: 0; color: var(--k-muted); }

/* ---------- Compliance / blocked shipping notice ---------- */
.k-ship-blocked {
  background: #FCEBEB; border: 1px solid #F09595;
  border-radius: var(--k-radius-sm); padding: 14px 16px;
  color: #A32D2D; font-size: 13.5px; line-height: 1.5;
  display: flex; gap: 10px; align-items: flex-start;
}
.k-ship-blocked i { font-size: 18px; margin-top: 1px; }

/* ============================================================
   FINAL OVERRIDES (loaded last — highest priority)
   ============================================================ */
.k-add-btn.k-loading { opacity: .7; pointer-events: none; }

/* kill Classic blue everywhere in header on hover/focus/active */
#header a,
#header a:link,
.header-top a,
.header-nav a { color: var(--k-deep); }

#header .header-top a:hover, #header .header-top a:focus,
.header-top a:hover, .header-top a:focus {
  color: var(--k-olive) !important;
}
#header .header-top a:hover *, .header-top a:hover * { color: var(--k-olive) !important; }

/* cart block — force no blue background anywhere */
#header .blockcart, #header .blockcart.active,
.header-top .blockcart, .header-top .blockcart.active,
#_desktop_cart > .blockcart, #_desktop_cart .blockcart.active {
  background-color: transparent !important;
  background-image: none !important;
}
@media (min-width: 992px) {
  #header .blockcart.active, #header .blockcart:hover {
    background-color: var(--k-tint) !important;
  }
}
#header .blockcart * { color: #fff !important; }
#header .blockcart:hover *, #header .blockcart.active * { color: #fff !important; }
#header .blockcart .cart-products-count { color: var(--k-olive-dark) !important; background: #fff !important; }

/* product page thumbnail selected state — olive rounded instead of blue square */
#main .product-images .thumb.selected,
#main .product-images li.selected img,
#main .thumb-container .thumb.selected {
  border: 2px solid var(--k-olive) !important;
  border-radius: var(--k-radius-sm) !important;
}

/* ===== Green bar cart/sign-in cleanup — kill the cart box ===== */
.k-greenbar .blockcart,
.k-greenbar .blockcart.active,
.k-greenbar .blockcart:hover,
.k-greenbar #_desktop_cart,
.k-greenbar #_desktop_cart .blockcart {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.k-greenbar .header-top-right,
.k-greenbar .right-nav { padding: 0 !important; }
.k-greenbar-right { gap: 24px; }
.k-greenbar-right .blockcart a,
.k-greenbar-right .user-info a {
  padding: 0 !important;
  background: transparent !important;
  font-weight: 500;
}
.k-greenbar .cart-products,
.k-greenbar .header { background: transparent !important; }
/* vertically center everything in the green bar */
.k-greenbar-row { min-height: 24px; }
.k-greenbar-left, .k-greenbar-right { align-items: center; }

/* ===== Green bar: sign-in + cart rendered individually, side by side ===== */
.k-greenbar-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 24px !important;
  flex-wrap: nowrap !important;
}
.k-gb-signin, .k-gb-cart {
  display: inline-flex !important;
  align-items: center !important;
}
.k-gb-signin *, .k-gb-cart * {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* white text + icons, readable size */
.k-greenbar-right, .k-greenbar-right *,
.k-gb-signin a, .k-gb-cart a,
.k-greenbar-right .material-icons {
  color: #fff !important;
  font-size: 15px !important;
}
.k-greenbar-right .material-icons { font-size: 20px !important; margin-right: 6px; }
.k-gb-cart a, .k-gb-signin a { gap: 6px; }
/* count badge: white circle, olive number */
.k-greenbar-right .cart-products-count {
  background: #fff !important;
  color: var(--k-olive-dark) !important;
  font-size: 12px !important;
  min-width: 20px; height: 20px; border-radius: 10px;
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 0 6px; margin-left: 5px;
}
.k-greenbar-left, .k-greenbar-left * { font-size: 14px !important; }

/* ===== Sticky header on scroll ===== */
#header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--k-surface);
  transition: box-shadow .2s ease;
}
#header.k-stuck {
  box-shadow: 0 2px 12px rgba(46,51,32,0.10);
}
/* keep the age-gate and any modals above the sticky header */
.k-agegate-overlay { z-index: 2000; }

/* ===== Force cart + account icons white in green bar ===== */
.k-greenbar .material-icons,
.k-greenbar i.material-icons,
.k-gb-signin .material-icons,
.k-gb-cart .material-icons,
.k-greenbar-right i,
.k-greenbar-right svg,
.k-greenbar-right .material-icons {
  color: #fff !important;
  fill: #fff !important;
}
.k-gb-signin a *, .k-gb-cart a * { color: #fff !important; }
/* the cart count badge stays olive-on-white though */
.k-greenbar-right .cart-products-count,
.k-greenbar-right .cart-products-count * { color: var(--k-olive-dark) !important; }

/* ===== DEFINITIVE green-bar colors (last = wins) ===== */
/* everything in the green bar is white, including on hover/focus */
.k-greenbar a, .k-greenbar a *, .k-greenbar span, .k-greenbar i,
.k-greenbar .material-icons, .k-greenbar svg,
.k-greenbar-left a, .k-greenbar-left a *,
.k-greenbar-right a, .k-greenbar-right a *,
.k-gb-signin a, .k-gb-signin a *, .k-gb-cart a, .k-gb-cart a * {
  color: #fff !important;
  fill: #fff !important;
}
.k-greenbar a:hover, .k-greenbar a:hover *, .k-greenbar a:focus, .k-greenbar a:focus *,
.k-greenbar-left a:hover, .k-greenbar-left a:hover *,
.k-greenbar-right a:hover, .k-greenbar-right a:hover *,
.k-gb-signin a:hover, .k-gb-signin a:hover *,
.k-gb-cart a:hover, .k-gb-cart a:hover * {
  color: #fff !important;
  fill: #fff !important;
  opacity: .85;
}
/* count badge is the ONE exception: olive number on white circle */
.k-greenbar .cart-products-count,
.k-greenbar .cart-products-count *,
.k-greenbar-right .cart-products-count {
  color: var(--k-olive-dark) !important;
  background: #fff !important;
}

/* ============================================================
   HOMEPAGE
   ============================================================ */
.k-home { padding: 6px 0 0; }
.k-home .container { max-width: var(--k-maxw); }

/* Section heading */
.k-section { margin: 48px 0; }
.k-section-head { text-align: center; margin-bottom: 24px; }
.k-section-head h2 { font-size: 26px; font-weight: 600; color: var(--k-deep); margin: 0 0 6px; letter-spacing: -0.5px; }
.k-section-head p { font-size: 14px; color: var(--k-text-soft); margin: 0; }

/* 1. Hero slider — rounded corners + no arrows */
.k-hero { margin-bottom: 0; border-radius: var(--k-radius); overflow: hidden; }
.k-hero .homeslider-container,
.k-hero .rslides,
.k-hero .slide,
.k-hero .slide img,
.k-hero .rslides_container {
  border-radius: var(--k-radius) !important;
  overflow: hidden;
}
.k-hero .slide img { display: block; width: 100%; height: auto; border-radius: var(--k-radius) !important; }
.k-hero .rslides_nav,
.k-hero a.rslides_nav,
.k-hero .rslides_nav.prev,
.k-hero .rslides_nav.next,
.k-hero .prev, .k-hero .next,
.k-hero a.prev, .k-hero a.next,
.homeslider-container .rslides_nav,
.homeslider-container .prev,
.homeslider-container .next,
.homeslider-container a.prev,
.homeslider-container a.next,
#homepage-slider .rslides_nav,
.rslides_nav { display: none !important; visibility: hidden !important; opacity: 0 !important; }
.k-hero .rslides_tabs { bottom: 14px; }
.k-hero .rslides_tabs a, .k-hero .rslides_tabs li a { background: rgba(255,255,255,0.5); border: none; }
.k-hero .rslides_tabs .rslides_here a, .k-hero .rslides_tabs li.rslides_here a { background: #fff; }
.k-hero .caption { background: rgba(0,0,0,0.35); color: #fff; border-radius: var(--k-radius-sm); }

/* 1b. Static hero (from kratomahome module).
 * Image fills the section, dark gradient overlay keeps text readable on
 * any background, CTA uses the same olive→black pattern as the cart drawer
 * checkout button so visual language stays consistent.
 */
.k-hero-static {
  position: relative;
  overflow: hidden;
  border-radius: var(--k-radius);
  min-height: 460px;
  display: flex;
}
.k-hero-static .k-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.k-hero-static .k-hero-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0) 75%);
  display: flex;
  align-items: center;
}
.k-hero-static .k-hero-overlay-inner {
  padding: 48px 56px;
  max-width: 620px;
  color: #ffffff;
}
.k-hero-static .k-hero-title {
  font-size: 44px;
  line-height: 1.1;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 16px 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.k-hero-static .k-hero-subtitle {
  font-size: 18px;
  line-height: 1.5;
  color: #f0f0f0;
  margin: 0 0 28px 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  max-width: 520px;
}
.k-hero-static .k-hero-cta {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  background: #5b6b22;
  border: 1px solid #5b6b22;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s;
}
/* Color forced white across every link state, matching the checkout button
 * pattern — defeats Classic theme's .btn-primary rules without an arms race. */
.k-hero-static .k-hero-cta,
.k-hero-static .k-hero-cta:link,
.k-hero-static .k-hero-cta:visited,
.k-hero-static .k-hero-cta:hover,
.k-hero-static .k-hero-cta:focus,
.k-hero-static .k-hero-cta:active,
.k-hero-static .k-hero-cta * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.k-hero-static .k-hero-cta:hover,
.k-hero-static .k-hero-cta:focus {
  background: #1a1a1a;
  border-color: #1a1a1a;
}

/* Breathing room below the static hero before the trust strip.
 * (The trust strip has margin-top: -1px to overlap the slider hero by
 * design — looks tight with the static hero, so we cancel that here.) */
.k-hero-static { margin-bottom: 20px; }
.k-hero-static + .k-trust-strip { margin-top: 0; }

/* Mobile: stack overlay, smaller text, less padding */
@media (max-width: 768px) {
  .k-hero-static { min-height: 360px; }
  .k-hero-static .k-hero-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.6) 100%);
    align-items: flex-end;
  }
  .k-hero-static .k-hero-overlay-inner { padding: 28px 22px; }
  .k-hero-static .k-hero-title { font-size: 30px; }
  .k-hero-static .k-hero-subtitle { font-size: 15px; margin-bottom: 20px; }
  .k-hero-static .k-hero-cta { padding: 12px 22px; font-size: 13px; }
}

/* 2. Trust strip */
.k-trust-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin: -1px 0 8px;
  padding: 22px 24px;
  background: #E8EDDD;
  border: 1px solid #DCE3CB;
  border-radius: var(--k-radius);
}
.k-trust-strip .k-trust-item {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--k-text-soft);
}
.k-trust-strip .k-trust-item strong {
  display: block; color: var(--k-deep); font-weight: 600; font-size: 14px;
}
.k-trust-strip .k-trust-item span {
  display: block; font-size: 12px; color: var(--k-text-soft);
}
@media (max-width: 767px) {
  .k-trust-strip { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 14px; }
}

/* 3. Shop by form */
.k-form-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.k-form-tile {
  position: relative; aspect-ratio: 16/10;
  border-radius: var(--k-radius); overflow: hidden;
  background: var(--k-dark-img);
  display: flex; align-items: flex-end;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.k-form-tile:hover { transform: translateY(-3px); box-shadow: var(--k-shadow-hover); }
.k-form-tile .k-form-tile-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.k-form-tile .k-form-tile-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7) 100%);
  z-index: 2;
}
.k-form-tile .k-form-tile-label {
  position: relative; z-index: 3;
  color: #fff !important; font-size: 18px; font-weight: 600;
  padding: 16px 20px; width: 100%;
}
@media (max-width: 767px) {
  .k-form-grid { grid-template-columns: 1fr; }
}

/* 5. Shop by color */
.k-vein-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.k-vein-tile {
  display: flex; flex-direction: column; align-items: center;
  padding: 22px 14px; border-radius: var(--k-radius);
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform .2s ease, border-color .2s ease;
  text-align: center;
}
.k-vein-tile:hover { transform: translateY(-3px); }
.k-vein-dot {
  width: 28px; height: 28px; border-radius: 50%;
  margin-bottom: 10px;
}
.k-vein-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.k-vein-desc { font-size: 12px; opacity: 0.85; }

.k-vein-red    { background: #FCEBEB; }
.k-vein-red    .k-vein-dot { background: #C0392B; }
.k-vein-red    .k-vein-name, .k-vein-red .k-vein-desc { color: #791F1F; }
.k-vein-red:hover { border-color: #C0392B; }

.k-vein-green  { background: #EAF3DE; }
.k-vein-green  .k-vein-dot { background: #5E7A2A; }
.k-vein-green  .k-vein-name, .k-vein-green .k-vein-desc { color: #27500A; }
.k-vein-green:hover { border-color: #5E7A2A; }

.k-vein-white  { background: #F4F4F0; }
.k-vein-white  .k-vein-dot { background: #fff; border: 2px solid #D3D1C7; box-sizing: content-box; width: 24px; height: 24px; }
.k-vein-white  .k-vein-name, .k-vein-white .k-vein-desc { color: #444441; }
.k-vein-white:hover { border-color: #888780; }

.k-vein-yellow { background: #FAEEDA; }
.k-vein-yellow .k-vein-dot { background: #D4A22F; }
.k-vein-yellow .k-vein-name, .k-vein-yellow .k-vein-desc { color: #633806; }
.k-vein-yellow:hover { border-color: #D4A22F; }

@media (max-width: 767px) {
  .k-vein-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 6. Why Kratoma */
.k-why { background: var(--k-tint); border-radius: var(--k-radius); padding: 36px; margin-top: 48px; }
.k-why-inner {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center;
}
.k-why-text h2 { font-size: 26px; font-weight: 600; color: var(--k-deep); margin: 0 0 12px; letter-spacing: -0.5px; }
.k-why-text p { font-size: 14.5px; color: var(--k-text-soft); line-height: 1.65; margin: 0 0 16px; }
.k-why-list { list-style: none; padding: 0; margin: 0 0 22px; }
.k-why-list li {
  font-size: 14px; color: var(--k-deep);
  padding: 6px 0; display: flex; align-items: center; gap: 8px;
}
.k-why-list .k-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--k-olive); color: #fff !important;
  font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.k-why-btn { padding: 12px 24px; font-weight: 600; }

.k-why-stats {
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
.k-stat {
  background: #fff; border: 1px solid var(--k-border);
  border-radius: var(--k-radius); padding: 18px 22px;
  text-align: center;
}
.k-stat-num { font-size: 32px; font-weight: 700; color: var(--k-olive-dark); line-height: 1; letter-spacing: -1px; }
.k-stat-lbl { font-size: 13px; color: var(--k-text-soft); margin-top: 6px; }

@media (max-width: 767px) {
  .k-why { padding: 22px; }
  .k-why-inner { grid-template-columns: 1fr; gap: 22px; }
}

/* ============================================================
   CHECKOUT — Personal Information cleanup
   Social title: handled in Back Office.
   Format helper text: removed at source via templates/_partials/form-fields.tpl override.
   ============================================================ */

/* ============================================================
   CHECKOUT — modern, rounded, on-brand styling
   ============================================================ */

/* --- Header (focused checkout header) --- */
.k-checkout-topbar {
  background: var(--k-olive);
  color: #fff;
  padding: 8px 0;
  min-height: 0;
  border: none;
  margin: 0;
}
.k-checkout-topbar-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px;
}
.k-checkout-topbar .k-checkout-back,
.k-checkout-topbar .k-checkout-help {
  color: #fff !important;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.k-checkout-topbar .k-checkout-back:hover { color: #fff !important; opacity: .85; }

.k-checkout-logo-bar {
  background: var(--k-surface);
  padding: 26px 0 22px;
  border-bottom: 1px solid var(--k-border);
}
.k-checkout-logo {
  font-family: 'Outfit', sans-serif;
  font-size: 36px; font-weight: 600; letter-spacing: -1.2px;
  color: var(--k-olive-dark) !important;
  text-decoration: none;
  display: inline-block;
}
.k-checkout-logo .k-o { color: var(--k-amber); }
.k-checkout-logo:hover { color: var(--k-olive-dark) !important; }
.k-checkout-tagline {
  font-size: 12px; color: var(--k-text-soft);
  margin: 8px 0 0;
  letter-spacing: 0.4px;
}

/* --- Body background to match site --- */
body#checkout, body.checkout { background: var(--k-bg); }

/* --- Step boxes (Personal Info / Addresses / Shipping / Payment) --- */
body#checkout section.checkout-step,
body.checkout section.checkout-step {
  background: var(--k-surface) !important;
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-radius) !important;
  margin-bottom: 16px !important;
  box-shadow: none !important;
  overflow: hidden;
}
body#checkout section.checkout-step .step-title,
body.checkout section.checkout-step .step-title {
  padding: 18px 22px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--k-deep) !important;
  letter-spacing: 0.3px;
  text-transform: none !important;
  background: transparent !important;
  border-bottom: 1px solid var(--k-border);
}
body#checkout section.checkout-step .content,
body.checkout section.checkout-step .content {
  padding: 24px !important;
}
/* Hide the bottom border between header and content for unchecked steps */
body#checkout section.checkout-step.-unreachable .step-title,
body#checkout section.checkout-step.-current .step-title {
  border-bottom-color: var(--k-border);
}

/* Step number badges */
body#checkout .step-number,
body.checkout .step-number {
  background: var(--k-olive) !important;
  color: #fff !important;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 10px;
}
body#checkout section.checkout-step.-unreachable .step-number {
  background: #C5C9B8 !important;
}

/* Form inputs - rounded + theme styling */
body#checkout .form-control,
body.checkout .form-control,
body#checkout input[type=text],
body#checkout input[type=email],
body#checkout input[type=password],
body#checkout input[type=tel],
body#checkout select,
body#checkout textarea {
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-radius-sm) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  background: #fff !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body#checkout .form-control:focus,
body.checkout .form-control:focus {
  border-color: var(--k-olive) !important;
  box-shadow: 0 0 0 3px rgba(124, 144, 57, 0.15) !important;
  outline: none !important;
}

/* Form labels */
body#checkout .form-control-label,
body.checkout .form-control-label {
  color: var(--k-deep) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

/* Continue/Save buttons */
body#checkout .btn-primary,
body.checkout .btn-primary,
body#checkout button.continue,
body.checkout button.continue {
  background: var(--k-olive) !important;
  border: none !important;
  color: #fff !important;
  padding: 12px 28px !important;
  border-radius: var(--k-radius-sm) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  transition: background .15s ease;
}
body#checkout .btn-primary:hover,
body.checkout .btn-primary:hover {
  background: var(--k-deep) !important;
}

/* Cart summary sidebar (right side during checkout) */
body#checkout .cart-summary,
body.checkout .cart-summary,
body#checkout #js-checkout-summary,
body.checkout #js-checkout-summary {
  background: var(--k-surface) !important;
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-radius) !important;
  padding: 22px !important;
  box-shadow: none !important;
}
body#checkout .cart-summary .h6,
body#checkout .cart-summary .card-title {
  color: var(--k-deep) !important;
  font-weight: 600;
}
body#checkout .cart-summary-line { padding: 8px 0 !important; font-size: 14px; }
body#checkout .cart-summary-line .value { color: var(--k-deep) !important; font-weight: 500; }
body#checkout .cart-total .value,
body#checkout .cart-summary-totals .value { color: var(--k-olive-dark) !important; font-weight: 700; }

/* Carrier options (Shipping step) */
body#checkout .delivery-options .delivery-option {
  background: var(--k-tint) !important;
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-radius-sm) !important;
  padding: 14px 18px !important;
  margin-bottom: 10px !important;
  transition: border-color .15s ease, background .15s ease;
}
body#checkout .delivery-options .delivery-option:hover {
  border-color: var(--k-olive) !important;
}
body#checkout .delivery-options .delivery-option:has(input:checked) {
  background: rgba(124, 144, 57, 0.08) !important;
  border-color: var(--k-olive) !important;
}

/* Payment options */
body#checkout .payment-options .payment-option {
  background: var(--k-tint) !important;
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-radius-sm) !important;
  padding: 14px 18px !important;
  margin-bottom: 10px !important;
}
body#checkout .payment-options .payment-option:hover { border-color: var(--k-olive) !important; }

/* Place order button - extra emphasis */
body#checkout #payment-confirmation .btn-primary {
  font-size: 16px !important;
  padding: 14px 36px !important;
  border-radius: var(--k-radius-sm) !important;
  width: 100%;
}

/* Custom radio / checkbox to match theme olive */
body#checkout .custom-radio input[type="radio"]:checked + span,
body#checkout .custom-checkbox input[type="checkbox"]:checked + span {
  background: var(--k-olive) !important;
  border-color: var(--k-olive) !important;
}

/* Terms of service section */
body#checkout #conditions-to-approve {
  background: var(--k-tint);
  border-radius: var(--k-radius-sm);
  padding: 16px 18px;
  margin-top: 18px;
}
body#checkout #conditions-to-approve ul { margin: 0; padding: 0; list-style: none; }
body#checkout #conditions-to-approve li { padding: 4px 0; font-size: 14px; }

/* "Sign in" / "Create an account" toggle styling */
body#checkout .nav-inline {
  border-bottom: 1px solid var(--k-border);
  padding-bottom: 14px;
  margin-bottom: 22px;
}
body#checkout .nav-inline .nav-link {
  color: var(--k-text-soft) !important;
  font-weight: 500;
  padding: 0 16px 0 0;
}
body#checkout .nav-inline .nav-link.active {
  color: var(--k-olive-dark) !important;
  font-weight: 600;
}

/* Checkout footer styling */
.k-checkout-foot {
  margin-top: 32px;
}

/* Hide PrestaShop "Ecommerce software by PrestaShop" credit (replaced by Kratoma copyright) */
#footer .text-sm-center:not(.k-foot-bottom):not(.js-terms) {
  display: none;
}

/* ===== Address selector cards - olive instead of default blue ===== */
body#checkout .address-item,
body#checkout .address-selector .address,
body#checkout .address {
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-radius) !important;
  background: #fff !important;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
body#checkout .address-item:hover,
body#checkout .address-selector .address:hover {
  border-color: var(--k-olive) !important;
}
/* Selected address — olive border instead of blue */
body#checkout .address-item.selected,
body#checkout .address-selector .address.selected,
body#checkout .address-item:has(input[type="radio"]:checked),
body#checkout .address-selector .address:has(input[type="radio"]:checked) {
  border-color: var(--k-olive) !important;
  background: rgba(124, 144, 57, 0.06) !important;
  box-shadow: 0 0 0 1px var(--k-olive);
}
/* The radio dot itself */
body#checkout .address-selector .custom-radio input[type="radio"]:checked + span,
body#checkout .address .custom-radio input[type="radio"]:checked + span {
  background: var(--k-olive) !important;
  border-color: var(--k-olive) !important;
}

/* ===== Kill the white inner box inside address cards ===== */
body#checkout .address-item .address,
body#checkout .address-selector .address-item .address,
body#checkout .address-item .alias,
body#checkout .address-item .address-alias,
body#checkout .address-item article,
body#checkout .address-item .address-body,
body#checkout .address-selector article {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Also when the address-item IS the .address element itself, ensure no inner whites */
body#checkout .address-item > *,
body#checkout .address-selector > .address > * {
  background: transparent !important;
}
/* Keep our outer card styling intact (re-assert) */
body#checkout .address-item {
  padding: 18px !important;
}
body#checkout .address-item.selected,
body#checkout .address-item:has(input[type="radio"]:checked) {
  background: rgba(124, 144, 57, 0.06) !important;
}

/* ============================================================
   CUSTOMER ACCOUNT — rounded, on-brand styling
   Applies to: Your account hub, Information, Addresses, Order history,
   Credit slips, Wishlist, GDPR, Login, Registration, Password recovery
   ============================================================ */

/* Page title styling */
body.customer-account .page-header,
body.my-account .page-header,
body.identity .page-header,
body.history .page-header,
body.order-detail .page-header,
body.address .page-header,
body.addresses .page-header,
body.password .page-header,
body.registration .page-header {
  margin-bottom: 24px;
  padding-bottom: 0;
  border-bottom: none;
}
body.customer-account h1.page-title,
body.my-account h1.page-title,
body.identity h1.page-title,
body.history h1.page-title,
body.order-detail h1.page-title,
body.address h1.page-title,
body.addresses h1.page-title {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--k-deep) !important;
  letter-spacing: -0.5px;
  text-transform: none !important;
}

/* --- "Your account" hub: the 6 link cards --- */
body.my-account .links {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
body.my-account .links .col-lg-4 {
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
}
body.my-account .links a {
  background: #fff !important;
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-radius) !important;
  padding: 28px 22px !important;
  box-shadow: none !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
body.my-account .links a:hover {
  transform: translateY(-2px);
  border-color: var(--k-olive) !important;
  box-shadow: var(--k-shadow-hover) !important;
}
/* Icon styling */
body.my-account .links a i,
body.my-account .links a .material-icons {
  color: var(--k-olive) !important;
  font-size: 40px !important;
  margin-bottom: 12px;
  background: var(--k-tint);
  width: 64px; height: 64px;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center; justify-content: center;
}
/* Label styling — sentence case, theme color */
body.my-account .links a .link-item,
body.my-account .links a span {
  text-transform: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--k-deep) !important;
  letter-spacing: 0;
  margin-top: 4px;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

/* Sign out link at bottom */
body.my-account .logout {
  display: inline-block;
  margin-top: 24px;
  padding: 10px 28px;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-sm);
  background: #fff;
  color: var(--k-deep) !important;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
body.my-account .logout:hover {
  border-color: var(--k-olive);
  background: var(--k-tint);
}

/* --- Account sub-pages: forms, address blocks, history tables --- */

/* Form panels (identity, password change, address forms) */
body.identity #content,
body.password #content,
body.address #content,
body.registration #content {
  background: #fff;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  padding: 28px;
}

/* Form inputs to match checkout */
body.customer-account .form-control,
body.my-account .form-control,
body.identity .form-control,
body.password .form-control,
body.address .form-control,
body.addresses .form-control,
body.registration .form-control {
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-radius-sm) !important;
  padding: 10px 14px !important;
  background: #fff !important;
}
body.customer-account .form-control:focus,
body.my-account .form-control:focus,
body.identity .form-control:focus,
body.password .form-control:focus,
body.address .form-control:focus,
body.registration .form-control:focus,
body.authentication .form-control:focus {
  border-color: var(--k-olive) !important;
  box-shadow: 0 0 0 3px rgba(124, 144, 57, 0.15) !important;
  outline: none !important;
}

/* Login/registration: also style other input types (date, password show/hide buttons, etc.) */
body.registration input:focus,
body.registration select:focus,
body.registration textarea:focus,
body.authentication input:focus,
body.authentication select:focus,
body.authentication textarea:focus {
  border-color: var(--k-olive) !important;
  box-shadow: 0 0 0 3px rgba(124, 144, 57, 0.15) !important;
  outline: none !important;
}

/* Fallback: target by form action URL — works regardless of body class.
   This catches login + registration even if PrestaShop uses different body classes
   than the ones above. Specificity boosted with multiple selector levels. */
form[action*="login"] input:focus,
form[action*="login"] select:focus,
form[action*="login"] textarea:focus,
form[action*="authentication"] input:focus,
form[action*="authentication"] select:focus,
form[action*="authentication"] textarea:focus,
form[action*="registration"] input:focus,
form[action*="registration"] select:focus,
form[action*="registration"] textarea:focus,
form#login-form input:focus,
form#login-form select:focus,
form#customer-form input:focus,
form#customer-form select:focus,
form#customer-form textarea:focus,
form.js-customer-form input:focus,
form.js-customer-form select:focus,
form.js-customer-form textarea:focus,
section#content .form-control:focus,
#main .form-control:focus,
section.login-form .form-control:focus,
section.register-form .form-control:focus {
  border-color: var(--k-olive) !important;
  box-shadow: 0 0 0 3px rgba(124, 144, 57, 0.15) !important;
  outline: none !important;
  -webkit-box-shadow: 0 0 0 3px rgba(124, 144, 57, 0.15) !important;
}

/* Nuclear option: kill Bootstrap's default blue focus ring globally on form inputs.
   This is safe because we explicitly set our own focus colors above for known pages,
   and other pages get a sensible neutral fallback. */
.form-control:focus,
input.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
select.form-control:focus,
textarea.form-control:focus {
  border-color: var(--k-olive) !important;
  box-shadow: 0 0 0 3px rgba(124, 144, 57, 0.15) !important;
  outline: none !important;
  -webkit-box-shadow: 0 0 0 3px rgba(124, 144, 57, 0.15) !important;
}

/* Buttons in account sections */
body.customer-account .btn-primary,
body.my-account .btn-primary,
body.identity .btn-primary,
body.password .btn-primary,
body.address .btn-primary,
body.addresses .btn-primary,
body.registration .btn-primary,
body.authentication .btn-primary {
  background: var(--k-olive) !important;
  border: none !important;
  color: #fff !important;
  padding: 11px 26px !important;
  border-radius: var(--k-radius-sm) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
body.customer-account .btn-primary:hover,
body.my-account .btn-primary:hover,
body.identity .btn-primary:hover {
  background: var(--k-deep) !important;
}

/* --- Addresses page: saved address cards --- */
body.addresses .addresses-footer,
body.addresses .address {
  margin-bottom: 16px;
}
body.addresses article.address {
  background: #fff;
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-radius) !important;
  padding: 22px !important;
  box-shadow: none !important;
}
body.addresses article.address h4,
body.addresses article.address .h4 {
  color: var(--k-deep) !important;
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--k-border);
}
body.addresses .address-body { padding: 0 !important; }
body.addresses .address-footer {
  background: transparent !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid var(--k-border);
  margin-top: 12px;
}
body.addresses .address-footer a { color: var(--k-text-soft) !important; }
body.addresses .address-footer a:hover { color: var(--k-olive) !important; }

/* "Add new address" button */
body.addresses .addresses-footer a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--k-olive) !important;
  font-weight: 600;
  text-decoration: none;
}
body.addresses .addresses-footer a:hover { color: var(--k-deep) !important; }

/* --- Order history table --- */
body.history #content,
body.order-detail #content {
  background: #fff;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  padding: 24px;
}
body.history table.table,
body.order-detail table.table {
  border-radius: var(--k-radius-sm);
  overflow: hidden;
  border: 1px solid var(--k-border);
}
body.history .table thead th,
body.order-detail .table thead th {
  background: var(--k-tint) !important;
  border-bottom: 1px solid var(--k-border);
  color: var(--k-deep);
  font-weight: 600;
  text-transform: none;
  padding: 12px 14px;
}
body.history .table td,
body.order-detail .table td { padding: 12px 14px; }

/* Status badge (Awaiting, Delivered, etc.) */
body.history .label,
body.order-detail .label {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

/* --- Wishlist --- */
body.wishlist .wishlist-list,
body#module-blockwishlist-lists .wishlist-list {
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  background: #fff;
  padding: 20px;
}

/* --- Login + Registration pages --- */
body.authentication #content,
body.registration #content {
  max-width: 540px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  padding: 32px;
}
body.authentication h1.page-title,
body.registration h1.page-title { text-align: center; }
body.authentication .forgot-password { text-align: center; margin-top: 12px; }
body.authentication .forgot-password a { color: var(--k-olive) !important; font-weight: 500; }
body.authentication .no-account a { color: var(--k-olive-dark) !important; font-weight: 600; }

/* Account sidebar (left nav on some sub-pages) */
body.customer-account .links-aside,
body.my-account .links-aside,
body.identity .links-aside,
body.history .links-aside,
body.order-detail .links-aside,
body.address .links-aside,
body.addresses .links-aside {
  background: #fff;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  padding: 16px;
}
body.customer-account .links-aside li,
body.my-account .links-aside li,
body.identity .links-aside li {
  list-style: none;
  margin: 4px 0;
}
body.customer-account .links-aside li a,
body.my-account .links-aside li a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--k-radius-sm);
  color: var(--k-deep) !important;
  text-decoration: none;
  font-size: 14px;
}
body.customer-account .links-aside li a:hover {
  background: var(--k-tint);
  color: var(--k-olive-dark) !important;
}
body.customer-account .links-aside li a.active,
body.customer-account .links-aside li.active a {
  background: var(--k-olive);
  color: #fff !important;
}

/* Responsive: stack cards on mobile */
@media (max-width: 767px) {
  body.my-account .links { grid-template-columns: 1fr; }
  body.identity #content,
  body.password #content,
  body.address #content,
  body.registration #content,
  body.authentication #content { padding: 20px; }
}

/* ============================================================
   QUICK VIEW — replace PrestaShop blues with theme olive
   ============================================================ */

.product-miniature .quick-view,
.product-miniature a.quick-view,
.product-miniature .js-quick-view {
  background: transparent !important;
  color: #000 !important;
  border: none !important;
  padding: 6px 10px !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}
.product-miniature .quick-view:hover,
.product-miniature a.quick-view:hover,
.product-miniature .js-quick-view:hover {
  background: transparent !important;
  color: #000 !important;
  text-decoration: underline !important;
}
.product-miniature .quick-view i,
.product-miniature .quick-view .material-icons {
  color: #000 !important;
  font-size: 14px !important;
  vertical-align: middle;
  margin-right: 2px;
}

/* --- Quick view modal --- */
.modal-content,
#blockcart-modal .modal-content,
.quickview .modal-content {
  border-radius: var(--k-radius) !important;
  border: 1px solid var(--k-border) !important;
}

/* Selected thumbnail border in quick view (and product page gallery) */
.quickview .product-images li.thumb-container .thumb.selected,
.quickview .product-images img.selected,
.quickview .images-container .thumb.selected,
#product .product-images li.thumb-container .thumb.selected,
#product .images-container .thumb.selected,
.product-images .thumb-container .thumb:hover,
.product-images .thumb.selected,
.product-images img.selected {
  border: 2px solid var(--k-olive) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px var(--k-olive) !important;
}
.quickview .product-images li.thumb-container .thumb,
.quickview .images-container .thumb,
#product .product-images li.thumb-container .thumb,
.product-images .thumb-container .thumb,
.product-images .thumb {
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-radius-sm) !important;
  transition: border-color .15s ease !important;
}

/* Quick view product layout cleanup */
.quickview .product-actions .add-to-cart,
.quickview .product-add-to-cart .btn-primary {
  background: var(--k-olive) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--k-radius-sm) !important;
  font-weight: 600;
  text-transform: uppercase;
}
.quickview .product-actions .add-to-cart:hover {
  background: var(--k-deep) !important;
}
.quickview .product-prices .current-price .price,
.quickview .current-price .price { color: var(--k-olive-dark) !important; }
.quickview .product-variants .input-color:checked + span,
.quickview .product-variants input:checked + .color {
  outline: 2px solid var(--k-olive) !important;
  outline-offset: 2px;
}

/* Modal close (X) */
.modal .close, .modal-header .close {
  color: var(--k-deep) !important;
  opacity: 0.6;
}
.modal .close:hover { opacity: 1; color: var(--k-olive) !important; }

/* "Item added to cart" modal — the one that pops up after Add to cart */
#blockcart-modal .modal-title,
#blockcart-modal .h6 { color: var(--k-deep) !important; }
#blockcart-modal .cart-content a.btn-primary {
  background: var(--k-olive) !important;
  border: none !important;
  color: #fff !important;
}
#blockcart-modal .cart-content a.btn-secondary {
  background: #fff !important;
  border: 1px solid var(--k-border) !important;
  color: var(--k-deep) !important;
}
#blockcart-modal .cart-content a.btn-secondary:hover {
  border-color: var(--k-olive) !important;
  color: var(--k-olive-dark) !important;
}

/* ============================================================
   CONTACT page — restyle the file upload "Choose file" button
   + footer "Contact us" link styling
   ============================================================ */

/* Footer Contact us link */
.k-footer-contact-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--k-olive-dark) !important;
  font-weight: 500;
  text-decoration: none;
}
.k-footer-contact-link:hover {
  color: var(--k-olive) !important;
  text-decoration: underline;
}

/* Contact form file input — kill the browser blue button */
body#contact .form-control-file,
body#contact input[type="file"],
body.contact input[type="file"],
body#contact .input-file {
  background: var(--k-tint) !important;
  border: 1px dashed var(--k-border) !important;
  border-radius: var(--k-radius-sm) !important;
  padding: 14px 16px !important;
  color: var(--k-deep) !important;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
}
/* The actual "Choose file" button inside the input (webkit / firefox) */
body#contact input[type="file"]::-webkit-file-upload-button,
body.contact input[type="file"]::-webkit-file-upload-button {
  background: var(--k-olive) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--k-radius-sm) !important;
  padding: 8px 18px !important;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  margin-right: 12px;
  transition: background .15s ease;
}
body#contact input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--k-deep) !important;
}
/* Firefox */
body#contact input[type="file"]::file-selector-button,
body.contact input[type="file"]::file-selector-button {
  background: var(--k-olive) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--k-radius-sm) !important;
  padding: 8px 18px !important;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  margin-right: 12px;
}
body#contact input[type="file"]::file-selector-button:hover {
  background: var(--k-deep) !important;
}

/* The whole contact form panel */
body#contact #content-wrapper #content,
body.contact #content-wrapper #content {
  background: #fff;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  padding: 32px;
}
body#contact .form-control,
body.contact .form-control {
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-radius-sm) !important;
  background: #fff !important;
}
body#contact .form-control:focus,
body.contact .form-control:focus {
  border-color: var(--k-olive) !important;
  box-shadow: 0 0 0 3px rgba(124, 144, 57, 0.15) !important;
  outline: none !important;
}
body#contact .btn-primary,
body.contact .btn-primary {
  background: var(--k-olive) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--k-radius-sm) !important;
  text-transform: uppercase;
  font-weight: 600;
  padding: 11px 26px;
}
body#contact .btn-primary:hover,
body.contact .btn-primary:hover { background: var(--k-deep) !important; }

/* ===== Contact form: kill the blue CHOOSE FILE button ===== */
/* The button is a real <button> inside an input-group, not a file input pseudo */
body#contact .input-group .btn,
body#contact .input-group-btn .btn,
body#contact .input-group button,
body.contact .input-group .btn,
body.contact .input-group-btn .btn,
body.contact .input-group button,
body#contact button[class*="file"],
body#contact .file-upload-wrapper .btn {
  background: var(--k-olive) !important;
  background-color: var(--k-olive) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 0 var(--k-radius-sm) var(--k-radius-sm) 0 !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  box-shadow: none !important;
}
body#contact .input-group .btn:hover,
body#contact .input-group-btn .btn:hover,
body.contact .input-group .btn:hover,
body.contact .input-group-btn .btn:hover {
  background: var(--k-deep) !important;
  background-color: var(--k-deep) !important;
  color: #fff !important;
}

/* The hidden file input visual (the input field beside the button) */
body#contact .input-group input[type="text"],
body#contact .input-group .form-control,
body.contact .input-group input[type="text"] {
  border: 1px solid var(--k-border) !important;
  border-right: none !important;
  border-radius: var(--k-radius-sm) 0 0 var(--k-radius-sm) !important;
  background: #fff !important;
}

/* ===== Kill huge empty space on short pages (cart with 1 item, etc.) =====
   PrestaShop sets aggressive min-heights on content areas which creates dead zones
   on pages with little content. Reduce them. */
#main, #content-wrapper, #content, .page-content, .page-wrapper {
  min-height: 0 !important;
}
body main { min-height: 0 !important; }

/* Add reasonable bottom spacing to the cart page specifically */
body#cart #content-wrapper,
body.cart #content-wrapper { padding-bottom: 40px; }

/* Same for other typically-short pages */
body.contact #content-wrapper,
body.password #content-wrapper,
body.authentication #content-wrapper,
body.identity #content-wrapper,
body.address #content-wrapper { padding-bottom: 40px; }

/* ===== Homepage: remove dead space between last section and footer ===== */
.k-home .k-section:last-child { margin-bottom: 24px; }
.k-home > *:last-child { margin-bottom: 24px; }
/* Make sure the page-content wrapper doesn't add extra padding on homepage */
body#index #wrapper, body.index #wrapper,
body#index #content-wrapper, body.index #content-wrapper { padding-bottom: 0 !important; }

/* ===== Add-to-cart popup: rounded corners + theme polish ===== */
#blockcart-modal .modal-content,
#blockcart-modal.modal .modal-content {
  border-radius: var(--k-radius) !important;
  border: 1px solid var(--k-border) !important;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(46,51,32,0.15);
}
#blockcart-modal .modal-header {
  background: var(--k-tint) !important;
  border-bottom: 1px solid var(--k-border) !important;
  padding: 18px 22px;
}
#blockcart-modal .modal-header .modal-title {
  color: var(--k-deep) !important;
  font-weight: 600;
  font-size: 16px;
  display: flex; align-items: center; gap: 8px;
}
#blockcart-modal .modal-header .material-icons { color: var(--k-olive) !important; }
#blockcart-modal .modal-body { padding: 22px; }
#blockcart-modal .product-image,
#blockcart-modal img { border-radius: var(--k-radius-sm); }
#blockcart-modal .cart-content { padding: 14px 0 0; }
#blockcart-modal .cart-content .btn {
  border-radius: var(--k-radius-sm) !important;
  padding: 11px 22px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 13px;
}
#blockcart-modal .modal-footer {
  border-top: 1px solid var(--k-border);
  padding: 16px 22px;
}

/* ============================================================
   CONSISTENCY SWEEP — anything that should be rounded but wasn't covered
   ============================================================ */

/* Search bar (header) */
#search_widget input[type="text"],
#search_widget .form-control,
.search-widget input[type="text"],
.search-widget .form-control {
  border-radius: var(--k-radius-sm) !important;
  border: 1px solid var(--k-border) !important;
}
#search_widget input:focus, .search-widget input:focus {
  border-color: var(--k-olive) !important;
  box-shadow: 0 0 0 3px rgba(124, 144, 57, 0.15) !important;
  outline: none !important;
}

/* Alerts and notifications */
.alert, .alert-success, .alert-danger, .alert-warning, .alert-info {
  border-radius: var(--k-radius-sm) !important;
  border: 1px solid var(--k-border);
}
.alert-success { background: rgba(124, 144, 57, 0.08); color: var(--k-olive-dark); border-color: var(--k-olive); }
.alert-danger { background: #FCEBEB; color: #791F1F; border-color: #C0392B; }
.alert-warning { background: #FAEEDA; color: #633806; border-color: #D4A22F; }
.alert-info { background: var(--k-tint); color: var(--k-deep); border-color: var(--k-border); }

/* Pagination */
.pagination > li > a, .pagination > li > span,
.page-link {
  border-radius: var(--k-radius-sm) !important;
  border: 1px solid var(--k-border) !important;
  color: var(--k-deep) !important;
  margin: 0 3px;
}
.pagination > li.active > a,
.pagination > li > a:hover,
.page-link:hover, .page-item.active .page-link {
  background: var(--k-olive) !important;
  border-color: var(--k-olive) !important;
  color: #fff !important;
}

/* Breadcrumb */
.breadcrumb {
  background: transparent !important;
  padding: 12px 0 !important;
  border-radius: 0 !important;
  font-size: 13px;
}
.breadcrumb a { color: var(--k-text-soft) !important; }
.breadcrumb a:hover { color: var(--k-olive) !important; }
.breadcrumb .active, .breadcrumb [aria-current="page"] { color: var(--k-deep) !important; }

/* Generic .card / .panel anywhere */
.card, .panel, .card-block, .panel-body {
  border-radius: var(--k-radius) !important;
  border: 1px solid var(--k-border) !important;
}

/* Any input that wasn't caught */
.form-control, input.form-control, select.form-control, textarea.form-control {
  border-radius: var(--k-radius-sm) !important;
}

/* Buttons not yet caught */
.btn, button.btn {
  border-radius: var(--k-radius-sm) !important;
}

/* Modals beyond what's already styled */
.modal-content { border-radius: var(--k-radius) !important; }

/* Dropdown menus */
.dropdown-menu {
  border-radius: var(--k-radius-sm) !important;
  border: 1px solid var(--k-border) !important;
  box-shadow: 0 8px 24px rgba(46,51,32,0.10);
}

/* Tags / chips (e.g. on facet filter results) */
.tag, .ui-autocomplete .ui-menu-item {
  border-radius: var(--k-radius-pill) !important;
}

/* Tooltip */
.tooltip-inner {
  border-radius: var(--k-radius-sm) !important;
  background: var(--k-deep) !important;
}

/* Product list filter sidebar */
#search_filters .facet,
.block-categories,
#category-description {
  border-radius: var(--k-radius) !important;
}

/* ============================================================
   CONSISTENCY FIXES — square corners spotted in audit
   ============================================================ */

/* --- Image 1: Your Addresses page — address cards still square --- */
body.addresses .address-item,
body.addresses article.address,
body.addresses .col-lg-4 article,
body.addresses .col-md-6 article,
body.addresses #content article {
  background: #fff !important;
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-radius) !important;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: none !important;
}
body.addresses .address-item .address-body,
body.addresses article.address .address-body {
  padding: 22px !important;
  background: transparent !important;
}
body.addresses .address-item .address-footer,
body.addresses article.address .address-footer {
  padding: 12px 22px !important;
  background: transparent !important;
  border-top: 1px solid var(--k-border) !important;
  margin-top: 0 !important;
}

/* --- Image 2/3: Cart count badge (8) in green bar --- */
.k-greenbar .cart-products-count,
.k-greenbar-right .cart-products-count,
.k-gb-cart .cart-products-count {
  background: #fff !important;
  color: var(--k-olive-dark) !important;
  border-radius: var(--k-radius-pill) !important;
  min-width: 22px;
  height: 22px;
  padding: 0 7px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
}

/* --- Image 4: Your Account hub cards (6 cards) --- */
body.my-account #content,
body.my-account .links {
  background: transparent !important;
}
body.my-account .links a,
body.my-account #content .links a,
body.my-account .col-lg-4 a.bg-light,
body.my-account .col-md-4 a.bg-light,
body.my-account a[href*="my-account"],
body.my-account a[href*="identity"],
body.my-account a[href*="addresses"],
body.my-account a[href*="history"],
body.my-account a[href*="discount"],
body.my-account a[href*="order-slip"],
body.my-account a[href*="module-blockwishlist"],
body.my-account a[href*="psgdpr"] {
  background: #fff !important;
  border: 1px solid var(--k-border) !important;
  border-radius: var(--k-radius) !important;
  padding: 28px 22px !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  text-decoration: none !important;
}
body.my-account .links a:hover,
body.my-account #content .links a:hover {
  transform: translateY(-2px);
  border-color: var(--k-olive) !important;
  box-shadow: var(--k-shadow-hover) !important;
}
/* Card icons — olive in tinted circle */
body.my-account .links a i,
body.my-account .links a .material-icons,
body.my-account #content .links a i,
body.my-account #content .links a .material-icons {
  color: var(--k-olive) !important;
  font-size: 36px !important;
  margin-bottom: 14px !important;
  background: var(--k-tint) !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
/* Card label — sentence case (NOT all caps) */
body.my-account .links a span,
body.my-account .links a .link-item,
body.my-account #content .links a span,
body.my-account #content .links a {
  text-transform: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--k-deep) !important;
  letter-spacing: 0 !important;
  background: transparent !important;
}

/* --- Image 5: Cart summary inner boxes --- */
.cart-summary,
#js-checkout-summary,
.cart-detailed-totals,
.cart-summary-products {
  background: #fff !important;
  border-radius: var(--k-radius) !important;
}
/* Kill the inner box around subtotal/shipping that creates double-box look */
.cart-summary .cart-summary-line,
.cart-summary .cart-detailed-totals .cart-summary-line,
.cart-summary .cart-summary-totals,
.cart-summary .cart-detailed-totals,
.cart-detailed-totals > div,
#js-checkout-summary .cart-summary-line,
#js-checkout-summary .card,
#js-checkout-summary .card-block {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 22px !important;
}
/* The summary card wrapper gets proper top/bottom padding (sides handled by rows above) */
.cart-summary, #js-checkout-summary {
  padding: 22px 0 !important;
}
.cart-summary .cart-summary-products,
.cart-summary > .h6,
.cart-summary > .card-title { padding: 0 22px !important; }
/* The Total row gets a top border separator instead of being its own box */
.cart-summary .cart-summary-totals,
#js-checkout-summary .cart-total {
  border-top: 1px solid var(--k-border) !important;
  margin-top: 14px !important;
  padding-top: 18px !important;
  padding-bottom: 4px !important;
  font-weight: 700;
}
.cart-summary .cart-summary-totals .value,
#js-checkout-summary .cart-total .value {
  font-size: 18px !important;
  color: var(--k-olive-dark) !important;
}

/* Checkout cart summary line items: shrink the line item product price
   so the TOTAL row stays visually dominant. The .product-price class is
   reused from the product page where it's 28px — too big in this context. */
body#checkout .cart-summary-products .product-price,
body#checkout .cart-summary-products .price,
body#checkout .cart-summary-products .current-price .price,
body#checkout .cart-summary-products .current-price span,
body.checkout .cart-summary-products .product-price,
body.checkout .cart-summary-products .price,
#js-checkout-summary .cart-summary-products .product-price,
#js-checkout-summary .cart-summary-products .price {
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* Also tone down the line item product name (was inheriting the cart-summary olive color too brightly) */
body#checkout .cart-summary-products .product-name,
body#checkout .cart-summary-products .product-line-info,
body.checkout .cart-summary-products .product-name {
  font-size: 13px !important;
  color: var(--k-deep) !important;
}

/* Cart summary: proceed-to-checkout button and any inner buttons get side margin */
.cart-summary .btn-primary,
.cart-summary a.btn-primary,
.cart-summary .checkout > a,
.cart-summary .checkout {
  margin: 16px 22px 4px !important;
  width: calc(100% - 44px) !important;
  display: block;
}

/* ============================================================
   MOBILE FIXES — responsive issues from audit
   ============================================================ */
@media (max-width: 767px) {

  /* 1. Logo letter spacing — letters shouldn't have gaps */
  #header .k-logo,
  .k-logo,
  .k-checkout-logo {
    letter-spacing: -1px !important;
    white-space: nowrap;
    font-size: 18px !important;
  }
  #header .k-logo .k-o,
  .k-logo .k-o,
  .k-checkout-logo .k-o {
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important;
  }

  /* 2. Cart badge — keep it small on mobile, not full-width pill */
  .k-greenbar .cart-products-count,
  .k-greenbar-right .cart-products-count,
  .k-gb-cart .cart-products-count,
  .k-greenbar #_mobile_cart .cart-products-count,
  #_mobile_cart .cart-products-count {
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
    line-height: 1 !important;
  }

  /* 3. Slider arrows — kill them harder on mobile (CSS belt + JS suspenders) */
  .k-hero .rslides_nav,
  .homeslider-container .rslides_nav,
  .homeslider-container .prev,
  .homeslider-container .next,
  .homeslider-container a.prev,
  .homeslider-container a.next,
  .k-hero .prev, .k-hero .next,
  .k-hero a.prev, .k-hero a.next {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
  }

  /* 4a. Product title — sentence case on mobile, smaller */
  #product .h1, #product h1.h1, .product-title, #product .product-information h1 {
    text-transform: none !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }

  /* 4b. SAVE badge — smaller on mobile */
  #product .discount, #product .product-discount,
  #product .product-discount .discount-percentage,
  .discount-percentage, .product-flag.discount-percentage {
    font-size: 13px !important;
    padding: 4px 10px !important;
    border-radius: var(--k-radius-pill) !important;
  }

  /* 4c. Hide "No tax" label — not relevant for US store */
  #product .tax-shipping-delivery-label,
  .product-prices .tax-shipping-delivery-label { display: none !important; }

  /* 5. Quantity stepper — arrows beside input on mobile, not below */
  #product .product-quantity,
  #product .product-add-to-cart .qty {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
  }
  #product .qty .input-group,
  #product .product-quantity .input-group {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: auto !important;
  }
  #product .qty input.input-group-field,
  #product .product-quantity input,
  #product input#quantity_wanted {
    width: 50px !important;
    height: 44px !important;
    text-align: center !important;
    border: 1px solid var(--k-border) !important;
    border-radius: var(--k-radius-sm) 0 0 var(--k-radius-sm) !important;
    padding: 0 !important;
  }
  #product .input-group-btn-vertical,
  #product .qty .input-group-btn,
  #product .qty .bootstrap-touchspin-down,
  #product .qty .bootstrap-touchspin-up {
    display: inline-flex !important;
    flex-direction: column !important;
    width: 30px !important;
    height: 44px !important;
  }
  #product .input-group-btn-vertical button,
  #product .qty button.btn-touchspin,
  #product .qty .bootstrap-touchspin-up,
  #product .qty .bootstrap-touchspin-down {
    flex: 1 !important;
    width: 30px !important;
    height: 22px !important;
    padding: 0 !important;
    background: var(--k-tint) !important;
    border: 1px solid var(--k-border) !important;
    border-left: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #product .input-group-btn-vertical button:first-child,
  #product .qty .bootstrap-touchspin-up {
    border-top-right-radius: var(--k-radius-sm) !important;
    border-bottom: none !important;
  }
  #product .input-group-btn-vertical button:last-child,
  #product .qty .bootstrap-touchspin-down {
    border-bottom-right-radius: var(--k-radius-sm) !important;
  }

  /* Wishlist heart button — fix oversize on mobile */
  #product .wishlist-button-product,
  #product .wishlist-button-add,
  .wishlist-button-product {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Bonus: trust strip on mobile — 2-col grid with cleaner text wrap */
  .k-trust-strip { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; padding: 16px !important; }
  .k-trust-strip .k-trust-item { font-size: 12px !important; }
  .k-trust-strip .k-trust-item strong { font-size: 13px !important; }
  .k-trust-strip .k-trust-item span { display: none !important; }

  /* Sticky add-to-cart bar — give the product title more room */
  .k-sticky-cart .k-sticky-name {
    font-size: 13px !important;
    max-width: 50% !important;
  }
}

/* Also kill duplicate reassurance block — happens because blockreassurance is hooked twice */
#product #product-additional-info ~ #product-additional-info,
#product .reassurance-tabs + .reassurance-tabs { display: none !important; }

/* ============================================================
   IMAGE LOGO sizing — when SEO team uploads a logo via Back Office
   ============================================================ */

/* Main header logo (desktop) — proportional cap, container-constrained.
   Width fits the column (no overflow into nav), height adjusts to keep
   aspect ratio, capped at 70px. To get more visible size we widen the
   logo column below from col-md-2 (~16.67%) to ~25%. */
#_desktop_logo img,
#_desktop_logo .logo {
  height: auto !important;
  max-height: 70px !important;
  width: auto !important;
  max-width: 100% !important;
  display: block;
}

/* Give the logo column more horizontal room — the default col-md-2 is too
   narrow for typical wide-aspect logos. Force ~25% / ~75% split. */
.header-top .row > #_desktop_logo,
.header-top #_desktop_logo {
  flex: 0 0 25% !important;
  max-width: 25% !important;
}
.header-top .row > .header-top-right,
.header-top .header-top-right {
  flex: 0 0 75% !important;
  max-width: 75% !important;
}
#_desktop_logo h1 { line-height: 1; margin: 0; }

/* Mobile logo in green bar */
#_mobile_logo img,
#_mobile_logo .logo {
  max-height: 32px;
  width: auto;
  margin: 0 auto;
  display: block;
}

/* Checkout logo — larger, prominent */
.k-checkout-logo-bar .k-checkout-logo-link img,
.k-checkout-logo-bar img.logo {
  max-height: 60px;
  width: auto;
  display: inline-block;
}

/* Footer brand logo — medium */
.k-foot-brand .k-foot-logo-link img,
.k-foot-brand img.logo {
  max-height: 44px;
  width: auto;
  display: inline-block;
}

/* Responsive — slightly smaller on mobile */
@media (max-width: 767px) {
  #_desktop_logo img { max-height: 36px; }
  .k-checkout-logo-bar img { max-height: 48px; }
  .k-foot-brand img { max-height: 36px; }
}

/* ============================================================
   MOBILE FIXES — cart badge oversize + sticky cart bar overflow
   ============================================================ */
@media (max-width: 767px) {

  /* Cart count badge — force small on mobile (v51 made it big with min-width 22) */
  .k-greenbar .cart-products-count,
  .k-greenbar-right .cart-products-count,
  .k-gb-cart .cart-products-count,
  #_mobile_cart .cart-products-count,
  .header-nav .cart-products-count,
  .blockcart .cart-products-count {
    min-width: 18px !important;
    width: auto !important;
    height: 18px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
    line-height: 18px !important;
    border-radius: 9px !important;
    margin-left: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Mobile cart icon area — don't let it expand to fill */
  #_mobile_cart, .k-greenbar #_mobile_cart {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
  }

  /* Sticky bottom add-to-cart bar — contain it properly within viewport */
  .k-sticky-cart, .k-sticky-cart-bar, #k-sticky-cart {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: hidden;
  }
  .k-sticky-cart > *, .k-sticky-cart-bar > * { box-sizing: border-box; }
  .k-sticky-cart .k-sticky-thumb,
  .k-sticky-cart img {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
  }
  .k-sticky-cart .k-sticky-info,
  .k-sticky-cart .k-sticky-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .k-sticky-cart .k-sticky-add,
  .k-sticky-cart .btn-primary,
  .k-sticky-cart a.btn,
  .k-sticky-cart button {
    flex: 0 0 auto !important;
    margin-right: 0 !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    max-width: 50% !important;
  }
}

/* ============================================================
   ROOT FIX — horizontal overflow on mobile (wishlist heart)
   The wishlist button was positioned outside its container causing the
   whole document width to exceed viewport, making everything else off-screen.
   ============================================================ */

/* Universal overflow guard — no element can push the page wider than viewport.
   Uses `clip` (not `hidden`) so position:sticky on #header still works. */
html, body { overflow-x: clip !important; max-width: 100vw !important; }
body { position: relative; }

/* Product page wishlist heart — contain it within the form area on mobile */
@media (max-width: 767px) {
  #product .wishlist-button-product,
  #product .wishlist-button-add,
  .wishlist-button-product,
  .product-add-to-cart .wishlist-button-product,
  .product-actions .wishlist-button-product {
    position: static !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 0 0 8px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    flex: 0 0 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border: 1px solid var(--k-border) !important;
    box-shadow: none !important;
  }

  /* Product add-to-cart row layout — wrap everything cleanly */
  #product .product-add-to-cart,
  #product .product-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 100% !important;
  }
  #product .product-add-to-cart > *,
  #product .product-actions > * { max-width: 100% !important; }

  /* The cart icon area in green bar — align with sign-in vertically */
  .k-greenbar-right {
    align-items: center !important;
    gap: 14px !important;
  }
  .k-gb-cart, .k-gb-signin,
  .k-gb-cart a, .k-gb-signin a {
    display: inline-flex !important;
    align-items: center !important;
    height: 24px;
  }
  .k-greenbar .material-icons,
  .k-greenbar svg { vertical-align: middle !important; }
}

/* ============================================================
   MOBILE — sticky header same as desktop
   ============================================================ */
@media (max-width: 991px) {
  #header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
    background: var(--k-surface);
    transition: box-shadow .2s ease;
  }
  #header.k-stuck {
    box-shadow: 0 2px 12px rgba(46,51,32,0.10);
  }
  /* Make sure ancestors don't break the sticky behavior */
  body, #wrapper, #page, main { overflow-x: clip !important; }
}

/* ============================================================
   WISHLIST — fully hide. Module can also be uninstalled in BO.
   ============================================================ */
.wishlist-button-product,
.wishlist-button-add,
.wishlist-list-item,
.wishlist-add-to-new,
.wishlist-modal,
.product-actions .wishlist-button-product,
.product-add-to-cart .wishlist-button-product,
body.my-account .links a[href*="module-blockwishlist"],
body.my-account .links a[href*="blockwishlist"],
#blockwishlist,
.wishlist-toast {
  display: none !important;
}

/* ============================================================
   Sticky add-to-cart bar — proper right margin so ADD TO CART
   doesn't kiss the edge
   ============================================================ */
@media (max-width: 991px) {
  .k-sticky-cart, .k-sticky-cart-bar, #k-sticky-cart {
    padding: 10px 14px !important;
    padding-right: 14px !important;
  }
  .k-sticky-cart .btn-primary,
  .k-sticky-cart a.btn,
  .k-sticky-cart button,
  .k-sticky-cart .k-sticky-add {
    margin-right: 0 !important;
  }
}

/* (v57 mobile header overrides removed — replaced with .k-mobile-header dedicated block) */

/* ============================================================
   MOBILE HEADER — dedicated, compact, 3 elements only
   ============================================================ */
.k-mobile-header {
  display: none;
  background: var(--k-olive);
  color: #fff;
  padding: 0;
  border: none;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  position: relative;
  z-index: 100;
}
@media (max-width: 991px) {
  .k-mobile-header { display: flex; }
  /* Hide the desktop bars on mobile */
  .k-greenbar.hidden-sm-down,
  .header-top.hidden-sm-down { display: none !important; }
}

.k-mobile-header .k-mh-menu {
  background: transparent;
  border: none;
  color: #fff !important;
  padding: 0 16px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.k-mobile-header .k-mh-menu:hover { opacity: 0.85; }
.k-mobile-header .k-mh-menu svg { color: #fff !important; stroke: #fff !important; }
/* When menu is open, rotate hamburger to indicate close action */
.k-mobile-header .k-mh-menu.k-mh-open svg {
  transform: rotate(90deg);
  transition: transform .15s ease;
}

/* Logo absolutely centered in the bar — independent of side element widths */
.k-mobile-header .k-mh-logo {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  text-decoration: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 60%;
  z-index: 1;
}
.k-mobile-header .k-mh-logo img {
  max-height: 24px !important;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}
.k-mobile-header .k-mh-logo .k-logo {
  color: #fff !important;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.5px;
}
.k-mobile-header .k-mh-logo .k-logo .k-o { color: var(--k-amber); }

.k-mobile-header .k-mh-cart {
  background: transparent;
  border: none;
  color: #fff !important;
  padding: 0 16px 0 12px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  z-index: 2;
  margin-right: 4px;
}
.k-mobile-header .k-mh-cart:hover { opacity: 0.85; color: #fff !important; }
.k-mobile-header .k-mh-cart svg { color: #fff !important; stroke: #fff !important; }
.k-mobile-header .k-mh-cart-count {
  background: #fff;
  color: var(--k-olive-dark);
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  line-height: 1;
}

/* Force any PrestaShop-rendered account icon white on the olive bar */
.k-mobile-header svg,
.k-mobile-header i,
.k-mobile-header .material-icons,
#_mobile_user_info, #_mobile_user_info i,
#_mobile_user_info .material-icons,
#_mobile_user_info svg,
#_mobile_user_info a,
.k-mobile-header #_mobile_user_info * {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* Sticky on mobile */
@media (max-width: 991px) {
  #header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
    background: transparent;
  }
}

/* ============================================================
   Mobile menu — PrestaShop's native top-menu.js shows/hides #mobile_top_menu_wrapper.
   It adds `is-open` to #header when menu opens. We just style the result.
   ============================================================ */
#mobile_top_menu_wrapper {
  background: #fff;
  border-bottom: 1px solid var(--k-border);
  margin: 0;
  padding: 8px 0 16px;
}
/* Visible when PrestaShop reveals it (either inline style:block from JS or .is-open on header).
   IMPORTANT: do NOT use !important here. Classic theme's top-menu.js sets inline display:none
   after its slideToggle animation completes; if we use !important here, that inline style is
   ignored and the menu stays visually open even after classic tries to close it. */
#header.is-open #mobile_top_menu_wrapper {
  display: block;
}

/* Menu items list */
#mobile_top_menu_wrapper .js-top-menu ul,
#mobile_top_menu_wrapper .top-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
#mobile_top_menu_wrapper .js-top-menu li,
#mobile_top_menu_wrapper .top-menu li {
  border-bottom: 1px solid var(--k-tint);
}
#mobile_top_menu_wrapper .js-top-menu li:last-child,
#mobile_top_menu_wrapper .top-menu li:last-child { border-bottom: none; }
#mobile_top_menu_wrapper .js-top-menu li a,
#mobile_top_menu_wrapper .top-menu li a {
  display: block;
  padding: 14px 20px;
  color: var(--k-deep) !important;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
}
#mobile_top_menu_wrapper .js-top-menu li a:hover,
#mobile_top_menu_wrapper .top-menu li a:hover {
  background: var(--k-tint);
  color: var(--k-olive-dark) !important;
}

/* Sign in / Create account links injected at the bottom */
.k-mh-drawer-account {
  border-top: 1px solid var(--k-border);
  margin-top: 8px;
  padding: 12px 0;
}
.k-mh-drawer-account a {
  display: block;
  padding: 12px 20px;
  color: var(--k-deep) !important;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
}
.k-mh-drawer-account a:hover {
  background: var(--k-tint);
  color: var(--k-olive-dark) !important;
}

/* Hamburger rotates when menu opens — PrestaShop adds .is-open to #header */
#header.is-open .k-mh-menu svg {
  transform: rotate(90deg);
  transition: transform .15s ease;
}

/* ============================================================
   STICKY ADD-TO-CART BAR — final fix for right edge cut-off
   ============================================================ */
@media (max-width: 991px) {
  .k-sticky-cart, .k-sticky-cart-bar, #k-sticky-cart, .product-add-to-cart-sticky {
    box-sizing: border-box !important;
    padding: 8px 12px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    gap: 10px !important;
  }
  .k-sticky-cart > *,
  .product-add-to-cart-sticky > * {
    box-sizing: border-box;
  }
  /* Thumbnail smaller on mobile */
  .k-sticky-cart .k-sticky-thumb,
  .k-sticky-cart img,
  .product-add-to-cart-sticky img {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
  }
  /* Button smaller — fixed sensible size, not percentage */
  .k-sticky-cart .btn,
  .k-sticky-cart button,
  .k-sticky-cart a.btn-primary,
  .product-add-to-cart-sticky .btn-primary {
    margin-right: 0 !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
    padding: 9px 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    border-radius: var(--k-radius-sm) !important;
  }
  /* Info column — give the product name + price proper room */
  .k-sticky-cart .k-sticky-info,
  .product-add-to-cart-sticky .product-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden;
  }
  .k-sticky-cart .k-sticky-name,
  .product-add-to-cart-sticky .product-name {
    font-size: 13px !important;
    line-height: 1.25 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 0 2px;
  }
  .k-sticky-cart .k-sticky-price,
  .product-add-to-cart-sticky .price {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--k-olive-dark) !important;
  }
}

/* Very narrow screens (≤375px) — even tighter */
@media (max-width: 375px) {
  .k-sticky-cart .btn,
  .k-sticky-cart button,
  .k-sticky-cart a.btn-primary,
  .product-add-to-cart-sticky .btn-primary {
    padding: 9px 12px !important;
    font-size: 11px !important;
  }
}

/* ============================================================
   Mobile bar — hide ALL traces of the user/account icon
   PrestaShop's ps_customersignin module injects into #_mobile_user_info
   regardless of our `d-none` class. Hide hard.
   ============================================================ */
@media (max-width: 991px) {
  .k-mobile-header #_mobile_user_info,
  #_mobile_user_info,
  .k-mobile-header .user-info,
  .k-mobile-header .header_user_info,
  .k-mobile-header [class*="user-info"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
}

/* ============================================================
   Final mobile cart background killer — beats #header specificity
   ============================================================ */
@media (max-width: 991px) {
  .k-mobile-header .k-mh-cart,
  .k-mobile-header .k-mh-cart.active,
  .k-mobile-header .k-mh-cart:hover,
  .k-mobile-header #_mobile_cart,
  .k-mobile-header #_mobile_cart.active,
  #header .k-mobile-header .k-mh-cart,
  #header .k-mobile-header .k-mh-cart.active,
  #header .k-mobile-header #_mobile_cart,
  #header .k-mobile-header #_mobile_cart.active,
  #header .k-mobile-header .blockcart,
  #header .k-mobile-header .blockcart.active,
  #header .k-mobile-header .blockcart:hover {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
}

/* ============================================================
   PAYMENT FORM FIELDS (Authorize.Net + others)
   Fix cramped expiration/CVC inputs visible in screenshot.
   ============================================================ */

/* Payment form container — give inputs room to breathe */
.payment-options form input[type="text"],
.payment-options form input[type="tel"],
.payment-options form input[type="number"],
.payment-options form input[type="email"],
.js-payment-form input[type="text"],
.js-payment-form input[type="tel"],
form[id*="payment"] input[type="text"],
form[id*="payment"] input[type="tel"],
form[id*="authorize"] input[type="text"],
form[id*="authorize"] input[type="tel"] {
  min-width: 0 !important;
  width: 100% !important;
  font-size: 15px !important;
  padding: 10px 14px !important;
}

/* Specific to Authorize.Net field IDs/names */
input[name="cc_number"],
input[name="card_number"],
input[name="cardNumber"],
input[id*="card-number"],
input[id*="card_number"] {
  width: 100% !important;
  min-width: 240px !important;
  letter-spacing: 1px !important;
  font-size: 16px !important;
}

input[name="cc_expiration"],
input[name="cc_expiry"],
input[name="cc_expire"],
input[name="expiration"],
input[name="expiry"],
input[id*="expir"] {
  width: 100% !important;
  min-width: 140px !important;
  font-size: 15px !important;
  letter-spacing: 1px !important;
}

input[name="cc_cvc"],
input[name="cc_cvv"],
input[name="cvc"],
input[name="cvv"],
input[id*="cvc"],
input[id*="cvv"],
input[id*="security"] {
  width: 100% !important;
  min-width: 100px !important;
  font-size: 15px !important;
  letter-spacing: 1px !important;
}

/* Hide the empty translation placeholder " []" that some payment modules append to labels.
   Targets generic patterns; safe because [] in payment labels is always a stray placeholder. */
.payment-options label,
.js-payment-form label {
  /* No direct selector for "ends with []" in CSS — handled by JS below if needed */
}

/* Ensure payment form input rows wrap and fields are visible.
   Some themes constrain .form-group widths too aggressively on checkout payment step. */
.payment-options .form-group,
.payment-options .row > .form-group,
form[id*="payment"] .form-group,
form[id*="authorize"] .form-group {
  max-width: 100% !important;
  margin-bottom: 16px !important;
}

/* Two-column layout for expiration + CVC (typical pattern) */
.payment-options .form-row,
.payment-options .row.cc-row {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
.payment-options .form-row > *,
.payment-options .row.cc-row > * {
  flex: 1 1 140px !important;
  min-width: 120px !important;
}

/* The card icon prefix box should not be square-crushed — make it taller for visual balance */
.payment-options .input-group-prepend,
.payment-options .input-group-text {
  padding: 0 14px !important;
}

/* Place Order button: slightly less imposing, still prominent */
.payment-options .btn-primary,
button[type="submit"][name*="confirm"],
button[type="submit"][id*="place-order"] {
  padding: 14px 32px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

/* Empty "[]" placeholder fix injection.
   The tfauthorizedotnet payment module has a translation key that renders as
   literal "[]" in input placeholders. Pure CSS cannot rewrite placeholder
   attribute content, so this style tag carries a JS fixup via the linked
   <style data-fix-placeholders> hook — see theme.yml + JS section below.
   Until the proper module fix is in, we rely on the CSS-only hack below
   which uses transparent text color on placeholders that contain "[]". */
input[placeholder="[]"]::placeholder,
input[placeholder="[ ]"]::placeholder {
  color: transparent !important;
}
input[placeholder="[]"]:focus::placeholder,
input[placeholder="[ ]"]:focus::placeholder {
  color: transparent !important;
}

/* ============================================================
   PAYMENT FORM — bulletproof containment
   The Authorize.Net (tfauthorizedotnet) module renders form fields
   that overflow the parent container on narrow viewports.
   Fix: constrain the whole payment options area + force inputs to
   respect their container width.
   ============================================================ */

/* Outer containment — keep the payment area inside its column */
#checkout-payment-step,
.payment-options,
.payment-options > *,
.payment-options form,
.payment-option,
.payment-option > *,
[id*="payment-form"],
[class*="payment-form"] {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible;
}

/* Force ALL inputs inside the payment area to shrink to container width */
.payment-options input[type="text"],
.payment-options input[type="tel"],
.payment-options input[type="number"],
.payment-options input[type="password"],
.payment-options input[type="email"],
.payment-options select,
.payment-options textarea,
[id*="payment-form"] input,
[id*="payment-form"] select,
[class*="payment-form"] input,
[class*="payment-form"] select,
form[id*="authorize"] input,
form[id*="authorize"] select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
}

/* Form groups inside payment options: shrink to fit, no horizontal overflow */
.payment-options .form-group,
.payment-options .row,
.payment-options [class*="col-"],
[id*="payment-form"] .form-group,
[id*="payment-form"] .row,
[id*="payment-form"] [class*="col-"] {
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* The grid row that holds card number / expiration / CVC inputs:
   stack on mobile, side-by-side on tablet+, but never overflow */
.payment-options .row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.payment-options .row > .col-md-6,
.payment-options .row > .col-md-4,
.payment-options .row > .col-sm-6,
.payment-options .row > .col-sm-4,
.payment-options .row > [class*="col-"] {
  flex: 1 1 200px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Specific input-group prefix boxes (the card icon, calendar, padlock):
   keep them compact and aligned with the input */
.payment-options .input-group,
[id*="payment-form"] .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
}
.payment-options .input-group-prepend,
.payment-options .input-group-text,
[id*="payment-form"] .input-group-prepend,
[id*="payment-form"] .input-group-text {
  flex: 0 0 auto !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
}
.payment-options .input-group input,
[id*="payment-form"] .input-group input {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

/* Hide the empty "[]" placeholder text via transparent color
   (the JS fixup in kratoma.js replaces it with proper text on most pages) */
input[placeholder="[]"]::placeholder,
input[placeholder="[ ]"]::placeholder {
  color: transparent !important;
}

/* Place Order button: ensure it fits the column */
.payment-options .btn,
.payment-options button[type="submit"],
#payment-confirmation .btn,
#payment-confirmation button[type="submit"] {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ================================================================
 * BLUE PURGE — overrides Bootstrap and PrestaShop Classic theme defaults
 * Maps all primary/info/link/focus blue accents to the olive palette.
 * v74 — kratomaloyal launch
 * ================================================================ */

/* Bootstrap CSS variable overrides — all "primary" and "info" become olive */
:root {
  --bs-primary: var(--k-olive);
  --bs-primary-rgb: 124, 144, 57;
  --bs-link-color: var(--k-olive);
  --bs-link-color-rgb: 124, 144, 57;
  --bs-link-hover-color: var(--k-olive-dark);
  --bs-link-hover-color-rgb: 94, 122, 42;
  --bs-info: var(--k-olive);
  --bs-info-rgb: 124, 144, 57;
  --bs-component-active-bg: var(--k-olive);
  --bs-form-select-bg-img: none;
}

/* Anchor / link color across all surfaces */
a, .text-primary, .link-primary {
  color: var(--k-olive);
}
a:hover, a:focus, .text-primary:hover, .link-primary:hover {
  color: var(--k-olive-dark);
}

/* Bootstrap buttons — primary / info → olive */
.btn-primary,
.btn-info,
.btn-outline-primary:hover,
.btn-outline-info:hover {
  background-color: var(--k-olive);
  border-color: var(--k-olive);
  color: #fff;
}
.btn-primary:hover,
.btn-info:hover,
.btn-primary:focus,
.btn-info:focus,
.btn-primary:active,
.btn-info:active {
  background-color: var(--k-olive-dark) !important;
  border-color: var(--k-olive-dark) !important;
  color: #fff !important;
}
.btn-outline-primary, .btn-outline-info {
  color: var(--k-olive);
  border-color: var(--k-olive);
}

/* Bootstrap form focus rings — turn off blue glow, use olive */
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus,
.input-group .form-control:focus {
  border-color: var(--k-olive) !important;
  box-shadow: 0 0 0 0.2rem rgba(124, 144, 57, 0.20) !important;
  outline: 0 !important;
}

/* Checkboxes and radios checked state */
.form-check-input:checked {
  background-color: var(--k-olive) !important;
  border-color: var(--k-olive) !important;
}
.form-check-input:focus {
  border-color: var(--k-olive) !important;
  box-shadow: 0 0 0 0.2rem rgba(124, 144, 57, 0.20) !important;
}

/* Alerts and badges */
.alert-primary, .alert-info {
  background-color: rgba(124, 144, 57, 0.10);
  border-color: rgba(124, 144, 57, 0.30);
  color: var(--k-deep);
}
.badge-primary, .badge-info, .badge.bg-primary, .badge.bg-info {
  background-color: var(--k-olive) !important;
  color: #fff;
}

/* Progress bars */
.progress-bar { background-color: var(--k-olive); }

/* Spinners */
.spinner-border-primary, .text-primary.spinner-border {
  color: var(--k-olive) !important;
}

/* PrestaShop Classic theme specifics */

/* Account dashboard "links" — they get a default blue color */
.account-link,
#main .page-content a,
.block-categories a,
.product-list a {
  color: var(--k-text);
}
.account-link:hover,
#main .page-content a:hover,
.block-categories a:hover,
.product-list a:hover {
  color: var(--k-olive);
}

/* "Continue shopping" link, "Forgot password" link etc */
.cart-continue-link,
.form-control-comment,
.btn-link,
small a {
  color: var(--k-olive);
}
.btn-link:hover { color: var(--k-olive-dark); }

/* Notification messages (cart updates, etc) */
.notification-success,
.notifications-success,
.alert.alert-success {
  background-color: rgba(124, 144, 57, 0.10);
  border-color: var(--k-olive);
  color: var(--k-deep);
}

/* Pagination current page */
.page-list .current a,
.page-item.active .page-link,
.pagination .active a {
  background-color: var(--k-olive) !important;
  border-color: var(--k-olive) !important;
  color: #fff !important;
}
.page-link {
  color: var(--k-olive);
}
.page-link:hover {
  background-color: var(--k-tint);
  color: var(--k-olive-dark);
}

/* Tabs — active tab indicator */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  border-bottom-color: var(--k-olive);
  color: var(--k-olive);
}
.nav-tabs .nav-link:hover { color: var(--k-olive-dark); }

/* Breadcrumbs */
.breadcrumb a { color: var(--k-text-soft); }
.breadcrumb a:hover { color: var(--k-olive); }

/* Order status badges — anything blue → muted olive */
.label-primary, .label-info {
  background-color: var(--k-olive);
  color: #fff;
}

/* Quantity selector / spinner buttons */
.bootstrap-touchspin .input-group-btn-vertical button {
  color: var(--k-olive);
}

/* Selection highlights */
::selection {
  background-color: var(--k-olive);
  color: #fff;
}
::-moz-selection {
  background-color: var(--k-olive);
  color: #fff;
}

/* ================================================================
 * CART PAGE — promo code form is always visible
 * The template override at templates/checkout/_partials/cart-voucher.tpl
 * removes the Bootstrap collapse wrapper entirely. This block just
 * styles the always-open form.
 * ================================================================ */

/* Force the whole container chain to full width — must match the
   "Proceed to checkout" button beneath it. */
.cart-voucher,
.cart-voucher .block-promo,
.cart-voucher .promo-code,
.cart-voucher .promo-code__content,
.cart-voucher .form__add-voucher {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.cart-voucher {
  padding: 0 16px 16px !important;   /* match cart-summary card horizontal padding */
}

.cart-voucher .k-promo-open {
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--k-border) !important;
}

.cart-voucher .form__add-voucher .input-group,
.cart-voucher .promo-code .input-group,
.cart-voucher div.input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative;
  align-items: stretch;
}

.cart-voucher .form__add-voucher input,
.cart-voucher .form__add-voucher .form-control,
.cart-voucher .form__add-voucher input.form-control,
.cart-voucher .form__add-voucher .input-group .form-control,
.cart-voucher .form__add-voucher input[name="discount_name"] {
  flex: 1 1 100% !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 44px !important;
  line-height: 1 !important;
  padding: 0 14px !important;
  border: 1px solid var(--k-border) !important;
  border-right: 0 !important;
  border-radius: var(--k-radius-sm) 0 0 var(--k-radius-sm) !important;
  background: #fff !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.cart-voucher .form__add-voucher .input-group-append,
.cart-voucher .form__add-voucher .input-group-btn {
  display: flex !important;
  flex: 0 0 auto !important;
  margin-left: -1px !important;
  width: auto !important;
}

.cart-voucher .form__add-voucher .btn,
.cart-voucher .form__add-voucher .btn-primary,
.cart-voucher .form__add-voucher .input-group-append .btn,
.cart-voucher .form__add-voucher .input-group-append .btn-primary,
.cart-voucher .form__add-voucher button[type="submit"] {
  height: 44px !important;
  line-height: 1 !important;
  padding: 0 22px !important;
  border: 1px solid var(--k-olive) !important;
  background: var(--k-olive) !important;
  color: #fff !important;
  border-radius: 0 var(--k-radius-sm) var(--k-radius-sm) 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* The "Take advantage of our exclusive offers" highlighted box.
   We set highlight=0 on cashback vouchers at the module level so this
   shouldn't appear for KRA- vouchers, but if it does for other rules,
   tone down the visual loudness. */
.cart-summary .promo-highlighted,
.promo-highlighted {
  color: var(--k-text-soft);
  font-size: 13px;
  margin-top: 12px;
}
.cart-summary .promo-discounts,
.promo-discounts {
  color: var(--k-text-soft);
}

/* ================================================================
 * v82 fixes
 * ================================================================ */

/* --- Cart voucher form: full width on all viewports (button stays compact) --- */
.cart-voucher .form__add-voucher .input-group {
  width: 100% !important;
}
.cart-voucher .form__add-voucher input[name="discount_name"],
.cart-voucher .form__add-voucher .form-control {
  flex: 1 1 100% !important;
  width: auto !important;
  min-width: 0 !important;
}
.cart-voucher .form__add-voucher .btn,
.cart-voucher .form__add-voucher .btn-primary {
  padding: 0 18px !important;     /* smaller "ADD" button so input has more room */
  flex: 0 0 auto !important;
}

/* On mobile, give the input a bigger share */
@media (max-width: 640px) {
  .cart-voucher .form__add-voucher .btn,
  .cart-voucher .form__add-voucher .btn-primary {
    padding: 0 14px !important;
    font-size: 12px !important;
  }
  .cart-voucher .form__add-voucher input[name="discount_name"],
  .cart-voucher .form__add-voucher .form-control {
    font-size: 16px !important;   /* 16px prevents iOS auto-zoom on focus */
  }
}

/* --- My Account dashboard: hover state must stay olive, never blue --- */
body.my-account .links a,
body.my-account .links a:link,
body.my-account .links a:visited {
  color: var(--k-deep) !important;
}
body.my-account .links a:hover,
body.my-account .links a:focus,
body.my-account .links a:active,
body.my-account .links a:hover .link-item,
body.my-account .links a:hover span,
body.my-account .links a:hover small,
body.my-account .links a:hover i,
body.my-account .links a:hover .material-icons,
body.my-account .links a:hover svg {
  color: var(--k-olive) !important;
}
/* The SVG/icon inside the account card should also stay olive on hover */
body.my-account .links a svg {
  color: var(--k-olive);
  stroke: currentColor;
}
body.my-account .links a:hover svg {
  color: var(--k-olive-dark) !important;
}

/* --- Product page tabs (description / product details) hover stays olive --- */
.tabs .nav-tabs .nav-link,
.product-tabs .nav-tabs .nav-link,
#product .tabs .nav-tabs .nav-link {
  color: var(--k-text) !important;
}
.tabs .nav-tabs .nav-link:hover,
.tabs .nav-tabs .nav-link:focus,
.product-tabs .nav-tabs .nav-link:hover,
.product-tabs .nav-tabs .nav-link:focus,
#product .tabs .nav-tabs .nav-link:hover,
#product .tabs .nav-tabs .nav-link:focus {
  color: var(--k-olive) !important;
  border-color: transparent !important;
}
.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link.js-product-nav-active,
.product-tabs .nav-tabs .nav-link.active,
#product .tabs .nav-tabs .nav-link.active {
  color: var(--k-olive) !important;
  border-bottom-color: var(--k-olive) !important;
}

/* --- Top green bar layout: "Sign out" and "Luke Luke" need spacing --- */
.k-greenbar .user-info,
.k-greenbar #_desktop_user_info,
.k-greenbar #_mobile_user_info {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;          /* space between Sign out and customer name */
}
.k-greenbar .user-info a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;            /* space between icon and label inside each link */
  white-space: nowrap !important;
}
.k-greenbar .user-info .account,
.k-greenbar .user-info .logout {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Lab-tested / Free shipping banner — center the contact-text on desktop */
.k-greenbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.k-greenbar .contact-info,
.k-greenbar .header-banner {
  flex: 1 1 auto;
  text-align: center;
}
.k-greenbar .contact-info {
  text-align: left;
}
.k-greenbar .header-banner {
  text-align: center;
}
@media (max-width: 768px) {
  .k-greenbar {
    flex-wrap: wrap;
  }
  .k-greenbar .contact-info,
  .k-greenbar .header-banner {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ================================================================
 * v84 mobile fixes
 * ================================================================ */

/* --- 1. Hero slider: bottom corners also rounded on mobile --- */
.k-hero,
.k-hero .homeslider-container,
.k-hero .rslides,
.k-hero .rslides_container,
.k-hero .rslides li,
.k-hero .slide,
.k-hero .slide img,
.k-hero .rslides > li,
.k-hero .rslides > li img {
  border-radius: var(--k-radius) !important;
  overflow: hidden !important;
}
/* Force the image element itself to have all four corners rounded.
   Some slider plugins inline-style only top corners on mobile. */
.k-hero img,
.k-hero .slide a img,
.k-hero .rslides img {
  border-top-left-radius: var(--k-radius) !important;
  border-top-right-radius: var(--k-radius) !important;
  border-bottom-left-radius: var(--k-radius) !important;
  border-bottom-right-radius: var(--k-radius) !important;
  display: block;
}

/* --- 2. Product page tabs: remove the black focus outline rectangle --- */
.tabs .nav-tabs .nav-link,
.product-tabs .nav-tabs .nav-link,
#product .tabs .nav-tabs .nav-link,
.nav-tabs .nav-link {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
}
.tabs .nav-tabs .nav-link:focus,
.tabs .nav-tabs .nav-link:focus-visible,
.tabs .nav-tabs .nav-link.active:focus,
.product-tabs .nav-tabs .nav-link:focus,
.product-tabs .nav-tabs .nav-link:focus-visible,
#product .tabs .nav-tabs .nav-link:focus,
#product .tabs .nav-tabs .nav-link:focus-visible,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 2px solid var(--k-olive) !important;
}
.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link.js-product-nav-active,
.product-tabs .nav-tabs .nav-link.active,
#product .tabs .nav-tabs .nav-link.active,
.nav-tabs .nav-link.active {
  border: none !important;
  border-bottom: 2px solid var(--k-olive) !important;
  background: transparent !important;
  color: var(--k-olive-dark) !important;
}

/* --- 3. Trust badges: one per line on mobile (not 2x2 grid) --- */
@media (max-width: 640px) {
  .k-trust-strip {
    grid-template-columns: 1fr !important;     /* single column */
    gap: 14px !important;
    padding: 18px !important;
  }
  .k-trust-strip .k-trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: left !important;
    justify-content: flex-start !important;
    font-size: 14px !important;
  }
  .k-trust-strip .k-trust-item strong {
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  /* Show the descriptive sub-text on mobile too (we previously hid it) */
  .k-trust-strip .k-trust-item span {
    display: block !important;
    font-size: 12px !important;
    color: var(--k-text-soft) !important;
  }
}

/* ================================================================
 * v89 — aggressive voucher form full-width on cart
 * Zero out padding/margin on every container in the chain so the
 * input-group expands to the cart-summary card's full inner width.
 * ================================================================ */

.cart-summary .block-promo,
.cart-summary .cart-voucher,
.cart-summary .promo-code,
.cart-summary .promo-code__content,
.cart-summary .form__add-voucher,
#cart .block-promo,
#cart .cart-voucher,
#cart .promo-code,
#cart .promo-code__content,
#cart .form__add-voucher,
body#cart .block-promo,
body#cart .cart-voucher,
body#cart .promo-code,
body#cart .promo-code__content,
body#cart .form__add-voucher {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Keep vertical spacing on the .cart-voucher container only (top/bottom OK) */
.cart-summary .cart-voucher,
#cart .cart-voucher {
  padding-top: 0 !important;
  padding-bottom: 12px !important;
}

/* Border-top divider for visual separation from totals above */
.cart-summary .k-promo-open,
#cart .k-promo-open {
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--k-border) !important;
}

/* Now the input-group itself — flex row spanning full width */
.cart-summary .form__add-voucher .input-group,
#cart .form__add-voucher .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: stretch !important;
}

/* Input grows, button stays compact */
.cart-summary .form__add-voucher .form-control,
.cart-summary .form__add-voucher input[name="discount_name"],
#cart .form__add-voucher .form-control,
#cart .form__add-voucher input[name="discount_name"] {
  flex: 1 1 100% !important;
  width: auto !important;
  min-width: 0 !important;
  height: 44px !important;
  box-sizing: border-box !important;
}

.cart-summary .form__add-voucher .btn,
.cart-summary .form__add-voucher button[type="submit"],
#cart .form__add-voucher .btn,
#cart .form__add-voucher button[type="submit"] {
  flex: 0 0 auto !important;
  height: 44px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* ================================================================
 * v90 — inline variant picker on product miniatures
 * Dropdown above Add to Cart button on category/listing tiles.
 * Powered by kratomacatalog module's k_combinations data.
 * ================================================================ */

.k-variant-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin: 0;
}

.k-variant-picker .k-variant-select {
  height: 36px;
  padding: 0 32px 0 10px;
  border: 1px solid var(--k-border);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--k-text);
  cursor: pointer;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237C9039' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 10px;
  transition: border-color 0.15s;
}

.k-variant-picker .k-variant-select:hover,
.k-variant-picker .k-variant-select:focus {
  border-color: var(--k-olive);
  outline: none;
}

.k-variant-picker .k-variant-select option[disabled] {
  color: #999;
  font-style: italic;
}

/* Add-to-cart button inside the variant picker form keeps the existing
   .k-add-btn styling — no override needed. */

/* On small screens, keep dropdown and button stacked but ensure they
   stay tappable (44px target). */
@media (max-width: 640px) {
  .k-variant-picker .k-variant-select {
    height: 40px;
    font-size: 14px;
  }
}

/* ================================================================
 * v91 — center miniature price + prevent header wrap at medium widths
 * ================================================================ */

/* --- 1. Center the price under the product title on miniatures --- */
.product-miniature .product-price-and-shipping,
.product-miniature .k-card-foot .product-price-and-shipping {
  justify-content: center !important;
  text-align: center;
  width: 100%;
}

/* --- 2. Prevent header wrap on medium screens (980-1280px) --- */

/* On medium screens, tighten up nav item spacing so the search bar can
   stay on the same row as the menu instead of falling below. */
@media (max-width: 1280px) and (min-width: 980px) {
  /* Slightly tighter padding on top menu items */
  #_desktop_top_menu .top-menu > li > a,
  .top-menu > li > a {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 14px !important;
  }

  /* Narrower search box so it fits */
  #search_widget,
  .search-widget {
    max-width: 220px !important;
  }
  #search_widget input[type="text"],
  #search_widget .form-control,
  .search-widget input[type="text"],
  .search-widget .form-control {
    max-width: 220px !important;
    font-size: 13px !important;
  }
}

/* On screens 1024-1180px (the worst-case zone where wrap happens) — push
   the search smaller still + shrink the logo a touch. */
@media (max-width: 1180px) and (min-width: 1024px) {
  .k-logo {
    font-size: 34px !important;
  }
  #_desktop_top_menu .top-menu > li > a,
  .top-menu > li > a {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
  }
  #search_widget,
  .search-widget {
    max-width: 180px !important;
  }
  #search_widget input[type="text"],
  #search_widget .form-control,
  .search-widget input[type="text"],
  .search-widget .form-control {
    max-width: 180px !important;
  }
}

/* Below 1024px, PrestaShop's classic theme switches to mobile menu (hamburger)
   so the wrap problem disappears naturally — no rules needed below this. */

/* ================================================================
 * v91.1 — slightly larger product name on miniatures (was 13.5px)
 * Bumps to 15.5px desktop, 14.5px mobile. Keeps 2-line clamp so cards
 * stay aligned vertically.
 * ================================================================ */
.product-miniature .product-title,
.product-miniature .product-title a {
  font-size: 15.5px !important;
  line-height: 1.35 !important;
}

/* Slightly shorter on mobile so longer names don't push the tile too tall */
@media (max-width: 640px) {
  .product-miniature .product-title,
  .product-miniature .product-title a {
    font-size: 14.5px !important;
  }
}

/* ===== Cart icon flash on add-to-cart (visual feedback since modal is suppressed) ===== */
.k-cart-flash {
  animation: k-cart-pulse 0.6s ease-out;
}
@keyframes k-cart-pulse {
  0%   { transform: scale(1);    filter: brightness(1); }
  35%  { transform: scale(1.18); filter: brightness(1.4); }
  70%  { transform: scale(0.96); filter: brightness(1.15); }
  100% { transform: scale(1);    filter: brightness(1); }
}

/* ===== Toast notification (Added to cart confirmation) ===== */
.k-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;          /* Above everything including modals */
  background: var(--k-deep, #3d4a1a);
  color: #fff;
  padding: 14px 18px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
  max-width: 360px;
  font-family: inherit;
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  pointer-events: none;    /* Don't intercept clicks */
}
.k-toast.k-toast-show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.k-toast-icon {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  padding: 4px;
  width: 28px;
  height: 28px;
  color: #b8d473;          /* olive accent */
}
.k-toast-text {
  flex: 1;
  min-width: 0;            /* allows text truncation */
}
.k-toast-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 2px;
}
.k-toast-name {
  font-size: 12.5px;
  opacity: 0.85;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile: stretch full width with edge margins */
@media (max-width: 600px) {
  .k-toast {
    bottom: 16px;
    right: 16px;
    left: 16px;
    max-width: none;
    min-width: 0;
  }
}

/* ===== Cart page: tone down attribute info (Size: 4oz, etc.) =====
   PrestaShop classic renders attributes as <div class="product-line-info">
     <span class="label">Size:</span><span class="value">4oz</span>
   </div>
   By default these print at body-text size, which is way too loud for a
   simple size badge. Make them small, gray, inline, and drop the
   "Size:" label since the value is self-explanatory.
*/
body#cart .cart-item .product-line-info,
body.cart .cart-item .product-line-info {
  display: inline-block !important;
  font-size: 12.5px !important;
  color: #888 !important;
  margin: 4px 8px 0 0 !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
}
body#cart .cart-item .product-line-info span.label,
body.cart .cart-item .product-line-info span.label {
  display: none !important;
}
body#cart .cart-item .product-line-info .value,
body.cart .cart-item .product-line-info .value {
  color: #666 !important;
  background: #f3f1ea;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 12px !important;
}

/* Slight breathing room between price and the size badge */
body#cart .cart-item .product-price,
body.cart .cart-item .product-price {
  margin-bottom: 2px;
}

/* ===== Cart page: scale down line-item prices =====
   Earlier in the stylesheet .product-price is set to 28px for the
   product detail page hero. PrestaShop reuses that same class on cart
   line items and order-summary rows, so the 28px bleeds in and makes
   the cart look shouty. Re-scope to sensible cart sizes.
*/
body#cart .cart-item .product-price,
body.cart .cart-item .product-price,
body#cart .cart-item .price,
body.cart .cart-item .price {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--k-deep) !important;
}

/* Line total (right side, larger because it's the actionable number) */
body#cart .cart-item .product-line-grid-right .price,
body#cart .cart-item .total,
body.cart .cart-item .product-line-grid-right .price,
body.cart .cart-item .total {
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* Product name */
body#cart .cart-item .product-line-info-aside .product-line-info,
body#cart .cart-item .product-name,
body#cart .cart-item .product-line-grid-body .product-name,
body.cart .cart-item .product-name {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* ================================================================
 * v103 — fix navigation breakpoint gap + search wrap
 *
 * Problem 1: Desktop bars use Bootstrap's `hidden-sm-down` class which
 * hides them at <768px. But ps_mainmenu's internal CSS hides menu
 * items below ~991px (Bootstrap "lg"). Result: a 768-991px zone with
 * a visible nav bar and no menu inside.
 *
 * Problem 2: At 992-1279px the menu items + search input can't all
 * fit on one row, so search wraps to a second line ("small double
 * line in awkward sizes").
 *
 * Fix: force a single, consistent 992px breakpoint between desktop
 * and mobile (matches ps_mainmenu), and hide the search bar at
 * medium-desktop widths (992-1279px) so the menu has clean room.
 * ================================================================ */

/* Below 992px: full mobile mode. Hide both desktop bars, show mobile. */
@media (max-width: 991.98px) {
  .header-nav.k-greenbar,
  .header-top,
  #header .header-nav.k-greenbar,
  #header .header-top {
    display: none !important;
  }
  .k-mobile-header {
    display: flex !important;
  }
}

/* At 992px and up: desktop mode. Hide mobile bar, show desktop bars. */
@media (min-width: 992px) {
  .k-mobile-header,
  nav.k-mobile-header {
    display: none !important;
  }
  .header-nav.k-greenbar {
    display: block !important;
  }
}

/* At 992-1279px: hide the search box to prevent wrap. The menu and
   logo will use the freed horizontal space cleanly. */
@media (min-width: 992px) and (max-width: 1279.98px) {
  #header #search_widget,
  #header .search-widget,
  .header-top #search_widget,
  .header-top .search-widget,
  .header-top-right #search_widget,
  .header-top-right .search-widget {
    display: none !important;
  }
}

/* ================================================================
 * v104 — navigation polish
 *
 * Bundles fixes for:
 *   1) Mobile menu wrapper hidden at 768-991px (broken breakpoint)
 *   2) Search missing on mobile entirely
 *   3) Left sidebar category tree collapsed by default
 *   4) Subcategories block on category pages way too tall
 *   5) Blue hover state lingering on subcategory tiles
 *   6) Pagination wrapped in odd white pill with green sub-box
 * ================================================================ */

/* --- 1) Mobile menu wrapper: enforce 992px breakpoint --- */
/* At ≥992px we always hide the mobile wrapper (desktop nav is showing) */
@media (min-width: 992px) {
  #mobile_top_menu_wrapper,
  .k-mobile-menu-wrap {
    display: none !important;
  }
}
/* At <992px we let the inline `display:none` and PrestaShop's JS
   toggle control visibility; no override needed. */

/* --- 2) Mobile search styling --- */
.k-mobile-search {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--k-border);
  background: #fff;
}
.k-mobile-search-form {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
}
.k-mobile-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--k-border);
  border-right: none;
  border-radius: 6px 0 0 6px;
  font-size: 15px;
  color: var(--k-deep);
  background: #fff;
  outline: none;
}
.k-mobile-search-input:focus {
  border-color: var(--k-olive);
}
.k-mobile-search-btn {
  flex: 0 0 auto;
  width: 50px;
  height: 42px;
  background: var(--k-olive);
  border: 1px solid var(--k-olive);
  color: #fff;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.k-mobile-search-btn:hover { background: var(--k-deep); border-color: var(--k-deep); }

/* --- 3) Left sidebar category tree: handled via JS in kratoma.js
       (auto-clicks each toggle on page load so all branches expand).
       We keep the +/- toggle visible AFTER expansion so user can still
       collapse manually if they want. Styling here is just for the
       sub-item links so they look consistent. */
.block-categories .category-sub-menu li a {
  font-weight: 400 !important;
  font-size: 14px !important;
  padding: 4px 0 !important;
  color: var(--k-deep);
}
.block-categories .category-sub-menu li a:hover {
  color: var(--k-olive) !important;
  background: transparent !important;
}
.block-categories .category-top-menu > li > a {
  font-weight: 600 !important;
}
/* Make the +/- toggle small and unobtrusive — olive color, no harsh border */
.block-categories .navbar-toggler {
  background: transparent !important;
  border: none !important;
  color: var(--k-olive) !important;
  padding: 0 4px !important;
  cursor: pointer;
}
.block-categories .navbar-toggler i,
.block-categories .navbar-toggler .material-icons {
  color: var(--k-olive) !important;
  font-size: 18px !important;
}

/* --- 4) Subcategories block on category pages: slimmer --- */
/* The default block adds huge white tiles per subcategory with
   tons of vertical padding — pushes products way below the fold.
   Tighten everything down. */
#subcategories,
.subcategories {
  padding: 16px 20px !important;
  margin-bottom: 16px !important;
}
#subcategories h2,
.subcategories h2,
#subcategories .h6,
.subcategories .h6 {
  font-size: 15px !important;
  margin-bottom: 10px !important;
  color: var(--k-deep);
}
#subcategories ul,
.subcategories ul,
.subcategories .subcategory-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#subcategories ul li,
.subcategories ul li,
.subcategories .subcategory {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
/* Make each subcategory a small pill, not a giant tile */
.subcategories a,
.subcategories .subcategory-name,
#subcategories a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 7px 14px !important;
  background: #fff !important;
  border: 1px solid var(--k-border) !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--k-deep) !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
/* Hide the empty image placeholders that were taking up huge space */
.subcategories .subcategory-image,
.subcategories img,
#subcategories .subcategory-image,
#subcategories img {
  display: none !important;
}

/* --- 5) Kill blue hover everywhere on subcategory pills + tiles --- */
.subcategories a:hover,
.subcategories .subcategory-name:hover,
.subcategories .subcategory:hover,
.subcategories .subcategory:hover a,
.subcategories a:focus,
#subcategories a:hover,
#subcategories a:focus,
.subcategory-image:hover,
.subcategory-image:hover *,
.subcategories *:hover {
  background: var(--k-olive) !important;
  border-color: var(--k-olive) !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Belt-and-suspenders: nuke any blue inherited from default Bootstrap on these blocks */
.subcategories .subcategory::before,
.subcategories .subcategory::after,
#subcategories *::before,
#subcategories *::after {
  background: transparent !important;
  border-color: var(--k-olive) !important;
}

/* --- 6) Pagination: clean the white pill + green inner box mess --- */
/* The classic theme wraps pagination in a div with default white bg
   and the active page in another wrapper. We strip the outer wrap
   and just style each page-link as a discrete pill. */
.pagination,
.page-list,
nav .pagination,
#js-product-list-bottom .pagination {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  list-style: none !important;
  box-shadow: none !important;
}
.pagination > li,
.page-list > li,
.pagination .page-item {
  display: inline-block !important;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pagination > li > a,
.pagination > li > span,
.page-link,
.page-list > li > a,
.page-list > li > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  border: 1px solid var(--k-border) !important;
  background: #fff !important;
  color: var(--k-deep) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pagination > li.active > a,
.pagination > li.active > span,
.page-item.active .page-link,
.page-list .current a,
.page-list .current span {
  background: var(--k-olive) !important;
  border-color: var(--k-olive) !important;
  color: #fff !important;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.page-link:hover,
.page-list > li > a:hover {
  background: var(--k-tint) !important;
  border-color: var(--k-olive) !important;
  color: var(--k-deep) !important;
}
.page-item.active .page-link:hover {
  background: var(--k-deep) !important;
  border-color: var(--k-deep) !important;
  color: #fff !important;
}

/* ================================================================
 * v110 — sidebar hierarchy + hide subcategories block
 * (Forked clean from v105 — no mobile experiments)
 * ================================================================ */

/* --- CSS fallback for sidebar expansion (in case JS hasn't loaded) --- */
.block-categories ul.category-sub-menu,
.block-categories .category-sub-menu,
.block-categories li ul,
.block-categories li ul.collapse,
.block-categories li ul.collapse.show,
body .block-categories ul.category-sub-menu,
html body .block-categories ul {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: none !important;
}

/* Hide collapse toggle buttons entirely */
.block-categories .navbar-toggler,
.block-categories [data-toggle="collapse"],
.block-categories [data-bs-toggle="collapse"],
.block-categories .arrows,
.block-categories .toggle-category,
.block-categories .collapse-icons,
.block-categories .category-arrow {
  display: none !important;
}

/* --- Sidebar visual hierarchy ---
   Customer needs to see at a glance which sub-items belong to Kratom Powder
   vs Kratom Capsules vs Kratom Extracts. Top-level items get bold weight,
   larger font, and a top border to separate the groups. Sub-items get
   indent + smaller + lighter. */

/* Top-level (depth 1: Kratom Powder, Kratom Capsules, Kratom Extracts) */
.block-categories .category-sub-menu > li > a,
.block-categories ul.category-top-menu > li > ul.category-sub-menu > li > a,
.block-categories li > a[data-depth="0"] {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: var(--k-deep) !important;
  padding: 14px 0 6px !important;
  margin-top: 4px !important;
  border-top: 1px solid var(--k-border) !important;
  display: block !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
}
/* First top-level item: no top border (no need to separate from HOME above) */
.block-categories .category-sub-menu > li:first-child > a {
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 4px !important;
}

/* Sub-items (depth 2: Red Vein, Veggie Capsules, Gummies, etc.) */
.block-categories .category-sub-menu .category-sub-menu li a,
.block-categories ul ul ul li a,
.block-categories li[data-depth="1"] a,
.block-categories li > a[data-depth="2"] {
  font-size: 13.5px !important;
  font-weight: 400 !important;
  padding: 4px 0 4px 16px !important;
  margin: 0 !important;
  border-top: none !important;
  color: var(--k-deep) !important;
  letter-spacing: 0 !important;
  opacity: 0.85;
  text-transform: none !important;
}
.block-categories .category-sub-menu .category-sub-menu li a:hover,
.block-categories ul ul ul li a:hover {
  color: var(--k-olive) !important;
  opacity: 1;
}

/* Strip list markers */
.block-categories ul,
.block-categories ul ul,
.block-categories li {
  list-style: none !important;
}

/* --- Hide subcategories block on category pages ---
   NARROW: only target the specific #subcategories ID. Broader class
   selectors (.subcategories) hit header navigation elements in some
   PS configurations, taking down the logo/search row. ID-only is safe. */
#subcategories,
section#subcategories,
div#subcategories {
  display: none !important;
}

/* ============================================================
 * v113 — Cart drawer (side-sliding panel)
 *
 * Replaces the previous after-add toast with a richer experience.
 * Slides in from the right, shows full cart contents, allows
 * quantity changes + removal, and provides clear paths to either
 * continue shopping or check out.
 * ============================================================ */

/* Container fills the viewport but is non-interactive when closed */
.k-drawer {
  position: fixed;
  inset: 0;
  z-index: 1080;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.3s;
}
.k-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}

/* Backdrop — fades in/out */
.k-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(43, 48, 21, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease-out;
}
.k-drawer.is-open .k-drawer-overlay {
  opacity: 1;
}

/* Panel — slides in from right */
.k-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;            /* v115: was 420 — too wide, dominated viewport */
  max-width: 100vw;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.k-drawer.is-open .k-drawer-panel {
  transform: translateX(0);
}

/* Header */
.k-drawer-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #ebe8df;
}
.k-drawer-title {
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  color: #2b3015;
  margin: 0;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.k-drawer-close {
  border: 0;
  background: transparent;
  color: #2b3015;
  padding: 4px;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.k-drawer-close:hover {
  background: #f3f1ea;
  color: #5b6b22;
}

/* Body — scrollable item list */
.k-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

/* Empty state */
.k-drawer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  color: #888;
  height: 100%;
}
.k-drawer-empty svg {
  color: #c8c4b3;
  margin-bottom: 16px;
}
.k-drawer-empty p {
  margin: 0;
  font-size: 15px;
}

/* Item row */
.k-drawer-item {
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid #f5f3ec;
  align-items: flex-start;
}
.k-drawer-item:last-child {
  border-bottom: 0;
}

.k-drawer-item-image {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  background: #f6f5ef;
  border: 1px solid #ebe8df;
}
.k-drawer-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.k-drawer-item-info {
  flex: 1 1 auto;
  min-width: 0;
}
.k-drawer-item-name {
  font-size: 14px;
  font-weight: 600;
  color: #2b3015;
  margin: 0 0 4px;
  line-height: 1.3;
}
.k-drawer-item-name a {
  color: inherit;
  text-decoration: none;
}
.k-drawer-item-name a:hover {
  color: #5b6b22;
}
.k-drawer-item-attrs {
  font-size: 12px;
  color: #6c6e5e;
  margin: 0 0 8px;
  line-height: 1.4;
}
.k-drawer-item-attrs span {
  display: inline-block;
}

/* Row: qty stepper on left, price on right */
.k-drawer-item-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.k-drawer-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d8d4c4;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.k-drawer-qty-btn {
  background: transparent;
  border: 0;
  color: #2b3015;
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.k-drawer-qty-btn:hover:not(:disabled) {
  background: #f3f1ea;
  color: #5b6b22;
}
.k-drawer-qty-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.k-drawer-qty-value {
  min-width: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #2b3015;
  padding: 0 4px;
}

.k-drawer-item-price {
  font-size: 14px;
  font-weight: 700;
  color: #2b3015;
  white-space: nowrap;
}

.k-drawer-item-remove {
  background: transparent;
  border: 0;
  color: #b3a59d;
  padding: 4px 0 0 8px;
  cursor: pointer;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: auto;
  transition: color 0.15s;
}
.k-drawer-item-remove:hover {
  color: #c0392b;
}

/* Footer */
.k-drawer-footer {
  flex: 0 0 auto;
  padding: 18px 24px 22px;
  border-top: 1px solid #ebe8df;
  background: #fafaf6;
}
.k-drawer-subtotal-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.k-drawer-subtotal-label {
  font-size: 14px;
  font-weight: 600;
  color: #2b3015;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.k-drawer-subtotal-value {
  font-size: 20px;
  font-weight: 700;
  color: #2b3015;
}
.k-drawer-tax-note {
  font-size: 11px;
  color: #888;
  margin: 0 0 14px;
  text-align: right;
}
.k-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.k-drawer .k-drawer-continue,
.k-drawer .k-drawer-checkout {
  width: 100%;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: 6px;
  text-transform: uppercase;
  text-align: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.k-drawer .k-drawer-continue {
  background: #fff;
  color: #2b3015;
  border: 1px solid #d8d4c4;
  cursor: pointer;
}
.k-drawer .k-drawer-continue:hover {
  background: #f3f1ea;
  border-color: #5b6b22;
  color: #5b6b22;
}
.k-drawer .k-drawer-checkout {
  background: #5b6b22;
  border: 1px solid #5b6b22;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
/* Force white text on the checkout button across every state. We use:
 *   - 3-level descendant selector + a.k-drawer-checkout (specificity 0,4,1)
 *   - !important on color
 *   - explicit opacity:1 in case something inherits reduced opacity
 *   - color set on direct children via * selector to cover any nested spans
 * This is more aggressive than usual because PS Classic + some other
 * stylesheets we don't control kept winning the cascade. */
.k-drawer .k-drawer-footer a.k-drawer-checkout,
.k-drawer .k-drawer-footer a.k-drawer-checkout:link,
.k-drawer .k-drawer-footer a.k-drawer-checkout:visited,
.k-drawer .k-drawer-footer a.k-drawer-checkout:hover,
.k-drawer .k-drawer-footer a.k-drawer-checkout:focus,
.k-drawer .k-drawer-footer a.k-drawer-checkout:active,
.k-drawer .k-drawer-footer a.k-drawer-checkout * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important; /* defeats themes that gradient-fill text */
  opacity: 1 !important;
}
.k-drawer .k-drawer-footer a.k-drawer-checkout svg {
  stroke: #ffffff !important;
}
/* Hover: switch to black background, keep white text — high-contrast CTA pattern */
.k-drawer .k-drawer-footer a.k-drawer-checkout:hover,
.k-drawer .k-drawer-footer a.k-drawer-checkout:focus {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
  color: #ffffff !important;
}

/* Disabled state — applied via JS when cart is empty */
.k-drawer .k-drawer-checkout.disabled,
.k-drawer .k-drawer-checkout[aria-disabled="true"] {
  background: #c8c4b3 !important;
  border-color: #c8c4b3 !important;
  pointer-events: none;
  cursor: not-allowed;
}

/* Drawer is loading state */
.k-drawer-body.is-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.15s;
}

/* Mobile: full-screen drawer */
@media (max-width: 480px) {
  .k-drawer-panel {
    width: 100vw;
  }
  .k-drawer-header,
  .k-drawer-item,
  .k-drawer-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
  .k-drawer-actions {
    flex-direction: column-reverse; /* Checkout on top on mobile */
  }
}

/* Body scroll lock for drawer-open state is now applied via inline styles
 * in lockBodyScroll() so we can save+restore scroll position properly.
 * Only kept .k-drawer-open class on body for potential future hooks. */