/* ===================================================================
   Product card tweaks
   -------------------------------------------------------------------
   1. Action row (.product-item-inner) takes the full card width.
      The theme ships a 65% rule inside a container query, but that
      block is uncompiled LESS (& + .product-item-inner), so browsers
      discard it and the width falls back to the inherited 100%.

   2. Add-to-cart arrow: the theme only lays the label and arrow out as
      a flex pair for hero / product page / featured product. In the grid
      the arrow is a ::after on the .tocart button with no flex layout,
      so it renders flush against the text and .tocart { gap } is inert.
   =================================================================== */

.product-item-inner {
    width: 100% !important;
}

/* Label and arrow on one line, with breathing room between them. */
.product-item-inner .tocart {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Keep the label from collapsing against the arrow. */
.product-item-inner .tocart > span {
    display: inline-flex;
    align-items: center;
}

/* The theme pulls the arrow in with a negative margin. */
.product-item-inner .tocart::after {
    margin-inline-end: 0;
}

/* ===================================================================
   Product name: reserve exactly two lines and clamp.

   NOTE: .product-item-name is a bare <strong> in this theme, so it is
   inline by default. min-height / max-height / overflow are all ignored
   on inline elements, so display:block is required for the clamp below
   to actually take effect.
   =================================================================== */
.product-item-name {
    display: block;
    min-height: 48px;
    max-height: 48px;
    line-height: 24px;
    overflow: hidden;
}

.product-item-name .product-item-link {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}