/* ============================================================
   Kratoma theme overrides (auto-loaded by PrestaShop as custom.css,
   after kratoma-v225.css). Small, surgical fixes only.
   ============================================================ */

/* ---- Empty-cart padding in the green top bar ----
   The cart had breathing room only when it held products (.active).
   Give the empty state the same padding so the icon/label/count
   aren't cramped against the bar edge. */
.k-greenbar .blockcart,
.k-greenbar #_desktop_cart .blockcart,
.k-greenbar #_desktop_cart > a {
  padding: 2px 12px !important;
}
.k-greenbar .blockcart a,
.k-greenbar #_desktop_cart a {
  gap: 8px !important;
}

/* ---- Reviews "Comments" icon ----
   productcomments renders <i class="material-icons chat"> whose
   ::before content is the ligature word "chat". The theme ships only a
   SUBSET of Material Icons (no "chat" glyph), so it printed the literal
   word. Replace it with a clean speech-bubble SVG, masked in the current
   text colour so it matches the theme. */
i.material-icons.chat {
  font-size: 0 !important;
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: -3px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
i.material-icons.chat::before { content: "" !important; }

/* ---- Cart label / count spacing in the green bar ----
   The "(0)" count sat flush against the "Cart" label with no gap. */
.k-greenbar .blockcart .cart-products-count,
.k-greenbar #_desktop_cart .cart-products-count {
  margin-left: 6px !important;
}
.k-greenbar .blockcart .header {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* ---- Footer payment logos: larger for visibility ---- */
.k-foot-cards { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.k-foot-cards svg { width:50px !important; height:50px !important; }

/* ---- Mobile header: white bar with dark hamburger + cart ----
   .k-mobile-header is already shown only on mobile (hidden-md-up), but we
   also wrap in a media query for safety. Nicer, cleaner mobile top bar. */
@media (max-width: 991px) {
  .k-mobile-header {
    background: #fff !important;
    border-bottom: 1px solid var(--k-border, #E6EAD9) !important;
  }
  .k-mobile-header .k-mh-menu,
  .k-mobile-header .k-mh-menu *,
  .k-mobile-header .k-mh-cart,
  .k-mobile-header .k-mh-cart *,
  .k-mobile-header .material-icons,
  .k-mobile-header svg,
  .k-mobile-header a {
    color: var(--k-deep, #2E3320) !important;
    fill: var(--k-deep, #2E3320) !important;
    stroke: var(--k-deep, #2E3320) !important;
  }
  /* CSS hamburger lines, if any */
  .k-mobile-header .k-mh-menu span {
    background-color: var(--k-deep, #2E3320) !important;
  }
  /* keep the cart count readable (olive pill, white text) */
  .k-mobile-header .k-mh-cart-count {
    background: var(--k-olive, #7C9039) !important;
    color: #fff !important;
    fill: #fff !important;
  }
}

/* ---- Checkout card-payment form icons ----
   The card payment module renders Material Icons (credit_card / date_range /
   lock) in gray addon boxes. The theme doesn't load that webfont, so they
   showed as ugly empty gray squares. Draw them as clean inline SVGs instead
   (no font request), tinted in the theme olive. */
.input-group-addon:has(.material-icons) {
  background: var(--k-tint, #EDF1E2) !important;
  border-color: var(--k-border, #E6EAD9) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.input-group .input-group-addon i.material-icons {
  font-size: 0 !important;
  width: 20px !important; height: 20px !important;
  display: inline-block !important;
  background-color: var(--k-olive, #7C9039);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M20%204H4c-1.11%200-1.99.89-1.99%202L2%2018c0%201.11.89%202%202%202h16c1.11%200%202-.89%202-2V6c0-1.11-.89-2-2-2zm0%2014H4v-6h16v6zm0-10H4V6h16v2z%27%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M20%204H4c-1.11%200-1.99.89-1.99%202L2%2018c0%201.11.89%202%202%202h16c1.11%200%202-.89%202-2V6c0-1.11-.89-2-2-2zm0%2014H4v-6h16v6zm0-10H4V6h16v2z%27%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat;
}
.input-group:has(input[name*="exp" i]) .input-group-addon .material-icons,
.input-group:has(input[id*="exp" i]) .input-group-addon .material-icons {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M19%204h-1V2h-2v2H8V2H6v2H5c-1.11%200-1.99.9-1.99%202L3%2020a2%202%200%20002%202h14c1.1%200%202-.9%202-2V6c0-1.1-.9-2-2-2zm0%2016H5V9h14v11zM7%2011h5v5H7z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M19%204h-1V2h-2v2H8V2H6v2H5c-1.11%200-1.99.9-1.99%202L3%2020a2%202%200%20002%202h14c1.1%200%202-.9%202-2V6c0-1.1-.9-2-2-2zm0%2016H5V9h14v11zM7%2011h5v5H7z%27%2F%3E%3C%2Fsvg%3E");
}
.input-group:has(input[name*="cvc" i]) .input-group-addon .material-icons,
.input-group:has(input[name*="csc" i]) .input-group-addon .material-icons,
.input-group:has(input[name*="cvv" i]) .input-group-addon .material-icons,
.input-group:has(input[id*="cvc" i]) .input-group-addon .material-icons {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M18%208h-1V6c0-2.76-2.24-5-5-5S7%203.24%207%206v2H6c-1.1%200-2%20.9-2%202v10c0%201.1.9%202%202%202h12c1.1%200%202-.9%202-2V10c0-1.1-.9-2-2-2zm-6%209c-1.1%200-2-.9-2-2s.9-2%202-2%202%20.9%202%202-.9%202-2%202zm3.1-9H8.9V6c0-1.71%201.39-3.1%203.1-3.1%201.71%200%203.1%201.39%203.1%203.1v2z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M18%208h-1V6c0-2.76-2.24-5-5-5S7%203.24%207%206v2H6c-1.1%200-2%20.9-2%202v10c0%201.1.9%202%202%202h12c1.1%200%202-.9%202-2V10c0-1.1-.9-2-2-2zm-6%209c-1.1%200-2-.9-2-2s.9-2%202-2%202%20.9%202%202-.9%202-2%202zm3.1-9H8.9V6c0-1.71%201.39-3.1%203.1-3.1%201.71%200%203.1%201.39%203.1%203.1v2z%27%2F%3E%3C%2Fsvg%3E");
}
.input-group:has(.material-icons) .form-control,
.input-group:has(.material-icons) input {
  border-radius: 0 var(--k-radius-sm, 10px) var(--k-radius-sm, 10px) 0 !important;
}

/* ---- Card-brand indicator: hide the empty "[]" until a brand is detected ----
   The label shows <small>[<span data-payment="cc-brand"></span>]</small>. The
   JS fills the span with "Visa" / "Mastercard" etc. once a number is typed; the
   brackets look odd while empty, so hide the wrapper until it has content. */
.payment-options label small.text-muted:has(span[data-payment="cc-brand"]:empty),
label small.text-muted:has(span[data-payment="cc-brand"]:empty) {
  display: none !important;
}