/* KARLEEN Catalog + Product R1.1
   Compact catalog card, V2 product-detail contract, cart drawer remove button. */

/* Catalog card: do not let a sparse catalog produce visually oversized cards. */
@media (min-width: 768px) {
  .shop-v3 .shop-grid--catalog {
    grid-template-columns: repeat(auto-fill, minmax(240px, 285px));
    justify-content: start;
    gap: 22px;
  }
}

.shop-v3 .shop-grid--catalog .shop-card h3 {
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.shop-v3 .shop-grid--catalog .shop-card__desc {
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.shop-v3 .shop-grid--catalog .shop-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 7px;
  font-size: 19px;
}

.shop-v3 .shop-grid--catalog .shop-card__old-price {
  margin-left: 0;
  font-size: 12px;
}

.shop-v3 .shop-card__cart-button {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.shop-v3 .shop-card__cart-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shop-v3 .shop-card__cart-button:hover {
  background: #fff;
  color: #111;
}

.shop-v3 .shop-card__cart-button:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.shop-v3 .shop-card__cart-button.is-loading {
  opacity: .55;
}

.shop-v3 .product-summary__lead {
  margin-bottom: 0;
}

.shop-v3 .product-summary__stock {
  margin-top: 2px;
}

.shop-v3 .product-benefits {
  margin-top: 20px;
}

@media (max-width: 767px) {
  .shop-v3 .shop-grid--catalog .shop-card__body { padding: 12px 10px; }
  .shop-v3 .shop-grid--catalog .shop-card__bottom { padding-top: 10px; }
  .shop-v3 .shop-card__cart-button { width: 38px; height: 38px; flex-basis: 38px; }
  .shop-v3 .shop-card__cart-button svg { width: 17px; height: 17px; }
}


/* =========================================================
   KARLEEN — PRODUCT DETAIL VISUAL R1
   ========================================================= */


/*
 * Breadcrumbs and product hero use the same global container.
 * The previous gallery centered an intrinsic-width image inside
 * the left grid column, creating a false left indent.
 */
.shop-v3 .product-gallery {
    min-width: 0;
}

.shop-v3 .product-gallery__main {
    width: 100%;

    justify-content:
        flex-start;
}

.shop-v3 .product-gallery__main img {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;
}


/*
 * Related products continue the page after the care-selection CTA.
 */
.shop-v3 .related-section {
    background: #fff;
}

.shop-v3 .related-products {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 22px;
}


/*
 * Keep related catalog cards visually stable regardless of
 * the amount of description text.
 */
.shop-v3 .related-products .shop-card h3 {
    display: -webkit-box;

    margin-bottom: 8px;

    overflow: hidden;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;
}

.shop-v3 .related-products .shop-card__desc {
    display: -webkit-box;

    margin-bottom: 10px;

    overflow: hidden;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;
}

.shop-v3 .related-products .shop-card__price {
    display: flex;

    align-items: baseline;
    flex-wrap: wrap;

    gap: 4px 7px;

    font-size: 19px;
}


@media (max-width: 991px) {

    .shop-v3 .related-products {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 14px;
    }

}


@media (max-width: 767px) {

    /*
     * Legacy CSS hides the third related card on mobile.
     * Product Detail Visual R1 deliberately shows the full
     * recommendation set as a 2 × 2 grid.
     */
    .shop-v3
    .related-products
    .shop-card:nth-child(3) {
        display: flex;
    }

    .shop-v3 .related-products {
        gap: 10px;
    }

}


/* =========================================================
   KARLEEN — RELATED PRODUCTS MOBILE PRICE FIX R2

   Real markup:
   .shop-card__bottom
     .shop-card__price
       current price text
       .shop-card__old-price
     .shop-card__cart-button
   ========================================================= */

@media (max-width: 767px) {

    /*
     * shop.css changes every card footer to display:block
     * on mobile. For related products we need price + cart
     * to remain on one horizontal row.
     */
    .shop-v3
    .related-products
    .shop-card__bottom {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            38px;

        align-items: start;

        column-gap: 10px;

        padding-top: 10px;
    }


    /*
     * Current price first,
     * crossed-out price directly underneath.
     */
    .shop-v3
    .related-products
    .shop-card__price {
        display: flex;

        min-width: 0;

        flex-direction: column;
        align-items: flex-start;
        flex-wrap: nowrap;

        gap: 3px;

        margin: 0;

        font-size: 17px;
        line-height: 1.05;
    }


    .shop-v3
    .related-products
    .shop-card__old-price {
        display: block;

        margin: 0;

        font-size: 10px;
        line-height: 1.2;
    }


    /*
     * Cart button occupies the right column
     * beside the current price.
     */
    .shop-v3
    .related-products
    .shop-card__cart-button {
        align-self: start;
        justify-self: end;

        width: 38px;
        height: 38px;

        margin: 0;
    }

}