/* Latafa product card — quantity stepper: symmetric padding, minus on the left */
.latafa-card .latafa-card__qtysel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 40px;
  margin-top: auto;          /* the hidden CTA's bottom pin, so rows stay aligned */
  padding: 4px;
}

/* from lg the CTA hugs its label, so the pill hugs too */
@media (min-width: 1024px) {
  .latafa-card .latafa-card__qtysel {
    display: inline-flex;
    justify-content: center;
    width: auto;
    margin-top: 0;
  }
}

/* Add custom CSS styles below */ 

/* 1. The button is a centred row that cannot be squeezed. */
#mainnav salla-cart-summary,
.latafa-nav__cart {
  display: flex !important; align-items: center !important;
  flex-shrink: 0 !important; min-width: 0 !important; min-height: 0 !important;
}

/* 2. THE FIX — anchor, icon div and slotted <i> are all rows. Without this the
      <i> falls back to display:inline and the block svg drops to its own line. */
#mainnav salla-cart-summary .s-cart-summary-wrapper,
#mainnav salla-cart-summary #s-cart-icon,
#mainnav salla-cart-summary #s-cart-icon > i,
.latafa-nav__cart .s-cart-summary-wrapper,
.latafa-nav__cart #s-cart-icon,
.latafa-nav__cart #s-cart-icon > i {
  display: flex !important; align-items: center !important; flex-wrap: nowrap !important;
}
#mainnav salla-cart-summary #s-cart-icon > i,
.latafa-nav__cart #s-cart-icon > i { gap: 8px !important; line-height: 1 !important; }

/* 3. Glyph keeps its 20px box, never shrinks against the nowrap label. */
#mainnav salla-cart-summary #s-cart-icon svg,
.latafa-nav__cart .latafa-nav__icon {
  display: block !important; width: 20px !important; height: 20px !important; flex: 0 0 20px !important;
}

/* 4. Label: hidden when empty, revealed by .is-filled. */
#mainnav salla-cart-summary .latafa-nav__cart-label,
.latafa-nav__cart-label {
  font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important;
  white-space: nowrap !important; color: inherit !important; display: none;
}
#mainnav salla-cart-summary.is-filled .latafa-nav__cart-label,
.latafa-nav__cart.is-filled .latafa-nav__cart-label { display: block !important; }

/* 5. Component's own <p> is design-hidden; its width would push the badge
      off the glyph, because the badge is measured from the anchor's edge. */
#mainnav salla-cart-summary .s-cart-summary-content,
#mainnav salla-cart-summary .s-cart-summary-total,
.latafa-nav__cart .s-cart-summary-content,
.latafa-nav__cart .s-cart-summary-total { display: none !important; }

/* 6. Count badge — 16px dot on the glyph's outer top corner. The component
      hard-codes left:-15px (LTR), so the unused edge must be reset. */
#mainnav salla-cart-summary .s-cart-summary-count,
.latafa-nav__cart .s-cart-summary-count {
  top: -6px !important; left: -6px !important; right: auto !important;
  width: 16px !important; min-width: 16px !important; height: 16px !important;
  padding: 0 !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1 !important;
}
[dir="ltr"] #mainnav salla-cart-summary .s-cart-summary-count,
[dir="ltr"] .latafa-nav__cart .s-cart-summary-count { left: auto !important; right: -6px !important; }


/* ******************************************* */
/* Hide the shipping row and the "total excludes shipping" note for logged-out shoppers */
body.lt-guest .ltc-summary__row:has([data-ltc-shipping]),
body.lt-guest [data-ltc-shipping-note] {
  display: none !important;
}