/* The cart button beside the phone header's menu button (LMTK_Header_Cart). It matches that button's box. */
.lmtk-hcart-row { flex-direction: row !important; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 8px; }
.lmtk-hcart-row > .elementor-menu-toggle { margin: 0 !important; }
.lmtk-hcart-row > .elementor-nav-menu--dropdown { flex: 0 0 100%; }

a.lmtk-hcart {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 33px; height: 33px; border-radius: 3px; background: rgba(0, 0, 0, 0.05); color: #33373D; text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
a.lmtk-hcart:hover, a.lmtk-hcart:focus-visible { background: #F7EAE5; color: #A35C53; }
a.lmtk-hcart:focus-visible { outline: 2px solid #A35C53; outline-offset: 2px; }
a.lmtk-hcart svg { display: block; width: 19px; height: 19px; }

.lmtk-hcart-n {
  position: absolute; top: -6px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #A35C53; box-shadow: 0 0 0 2px #FFFFFF; color: #FFFFFF;
  font: 600 10px/18px "Montserrat", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; text-align: center;
}
.lmtk-hcart-n[data-n=""], .lmtk-hcart-n[data-n="0"] { display: none; }
.lmtk-hcart-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tablets and narrow desktops (where the header shows its menu button too): the pair sits at the right of its column
   (which runs to the screen edge) rather than in the middle */
@media (min-width: 768px) and (max-width: 1229px) {
  .lmtk-hcart-row { justify-content: flex-end; padding-right: 24px; }
}

/* Desktop: a bare bag just past the last menu item, in the menu's ink, only while the cart has something in it.
   It hangs in the margin outside the menu so the header stays balanced around the logo. The header's content is
   1140px wide, so that margin only has room for it from 1230px up; narrower desktops don't show it. */
.lmtk-hcart-desk-row { position: relative; }
a.lmtk-hcart.lmtk-hcart--desk { position: absolute; top: 50%; left: 100%; margin: -17px 0 0 8px; border-radius: 50%; background: none; color: #1F1D1D; }
a.lmtk-hcart.lmtk-hcart--desk:hover, a.lmtk-hcart.lmtk-hcart--desk:focus-visible { background: #F7EAE5; color: #A35C53; }
a.lmtk-hcart.lmtk-hcart--desk .lmtk-hcart-n { top: -2px; right: -4px; }
a.lmtk-hcart.lmtk-hcart--desk:has(.lmtk-hcart-n[data-n=""]), a.lmtk-hcart.lmtk-hcart--desk:has(.lmtk-hcart-n[data-n="0"]) { display: none; }
@media (max-width: 1229px) {
  a.lmtk-hcart.lmtk-hcart--desk { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  a.lmtk-hcart { transition: none; }
}