/* One product card across the site, in the home page's "Buy again" style (web brief): white
   card, photo on white, quick view and wishlist as small white circles, two-line name, price
   with the old price struck through after it, a green "+ Add" pill, a small pink sale badge.
   Only the card itself — each page keeps its own grid and number of columns.
   Loaded after main.css on every page. */

.product-card {
    display: flex !important;
    flex-direction: column;
    position: relative;
    height: auto;
    background: #fff;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 8px !important;
    box-shadow: none !important;
    text-decoration: none;
    min-width: 0;
}
.product-card:hover, .product-card:focus { border-color: #f3c2d8 !important; }
.product-card:hover .product-title, .product-card:focus .product-title { color: #e61b77; }

/* Photo */
.product-card .img-box {
    height: 150px !important;
    margin: 0 0 8px !important;
    padding: 4px !important;
    background: #fff !important;
    border-radius: 8px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.product-card .img-box img,
.product-card .img-box .product-img {
    max-height: 140px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto;
}

/* Sale badge: above the photo, top left */
.product-card .sale-badge,
.product-card .prescription-badge {
    position: absolute;
    z-index: 3;
    top: 8px !important;
    left: 8px !important;
    font-family: "Figtree-SemiBold", sans-serif;
    font-size: 11px !important;
    line-height: 1.4 !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
}

/* Quick view and wishlist: small white circles with a soft shadow */
.product-card .action-btns { top: 8px !important; right: 8px !important; gap: 6px !important; z-index: 4; }
.product-card .action-btns .btn-view,
.product-card .action-btns .btn-wishlist {
    width: 30px !important; height: 30px !important; padding: 0 !important; border: 0 !important;
    border-radius: 50% !important; background: #fff !important; box-shadow: 0 1px 4px rgba(17, 24, 39, .14) !important;
    display: flex !important; align-items: center; justify-content: center; transition: box-shadow .15s, background .15s;
}
.product-card .action-btns .btn-view:hover,
.product-card .action-btns .btn-wishlist:hover { box-shadow: 0 2px 8px rgba(230, 27, 119, .28) !important; }
/* the site shows a white eye on hover, so the circle turns pink behind it */
.product-card .action-btns .btn-view:hover,
.product-card .action-btns .btn-view:focus { background: #e61b77 !important; }
.product-card .action-btns img { width: 15px !important; height: 15px !important; object-fit: contain !important; }

/* Text */
.product-card .card-body { padding: 0 !important; display: flex; flex-direction: column; flex: 1; }
.product-card .product-cat-label { font-size: 11px; color: #6b7280; margin: 0 0 2px; }
.product-card .product-title {
    font-family: "Figtree-SemiBold", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    color: #1f2937;
    max-width: none !important;
    height: auto !important;
    min-height: 2.6em;
    max-height: 2.6em;
    margin: 0 0 6px !important;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Price: the price to pay first, the old one struck through after it */
.product-card .card-body .d-flex,
.product-card .NewOnMyDawa > .d-flex {
    flex-wrap: wrap;
    align-items: baseline !important;
    column-gap: 6px !important;
    row-gap: 0;
    margin: 0 0 8px !important;
    float: none !important;
    width: 100% !important;
}
.product-card .NewOnMyDawa { position: static !important; width: auto !important; margin-top: auto; display: flex !important; flex-direction: column; }
.product-card .product-price {
    font-family: "Figtree-Bold", sans-serif !important;
    font-size: 15px !important;
    color: #1f2937 !important;
    margin: 0 !important;
    width: auto !important;
}
.product-card .product-price-old { order: 2; font-size: 12px !important; margin: 0 !important; width: auto !important; color: #9ca3af !important; }
.product-card .price-uom { font-size: 11px; color: #9ca3af; font-family: "Figtree-Medium", sans-serif; margin-left: 2px; }
.product-card .product-offer-end { font-size: 12px; color: #b45309; margin: -4px 0 6px; }

/* The action: green "+ Add" pill, or "Notify Me" / prescription / consultation at the same size */
.product-card .btn-cart,
.product-card .notifyMeRequest,
.product-card .btn-prescription,
.product-card .card-body > .btn-grey,
.product-card .NewOnMyDawa > .btn-grey {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    height: 36px !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 10px !important;
    border-radius: 20px !important;
    font-family: "Figtree-SemiBold", sans-serif;
    font-size: 13px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: none !important;
}
.product-card .btn-cart { border: 0 !important; background: #6FB74C !important; color: #fff !important; }
.product-card .btn-cart:hover { background: #5ea33e !important; }
.product-card .btn-cart.remove2Cart { background: #3f8f22 !important; }
.product-card .btn-cart img { width: 12px !important; height: 12px !important; filter: brightness(0) invert(1); }
.product-card .notifyMeRequest svg { width: 15px; height: 15px; }

@media (max-width: 767.98px) {
    .product-card { padding: 6px !important; }
    .product-card .img-box { height: 110px !important; }
    .product-card .img-box img, .product-card .img-box .product-img { max-height: 100px !important; }
    .product-card .product-title { font-size: 13px !important; }
    .product-card .product-price { font-size: 14px !important; }
    .product-card .action-btns .btn-view,
    .product-card .action-btns .btn-wishlist { width: 26px !important; height: 26px !important; }
    .product-card .action-btns img { width: 13px !important; height: 13px !important; }
    .product-card .btn-cart, .product-card .notifyMeRequest, .product-card .btn-prescription { height: 34px !important; font-size: 12px !important; }
}

/* Buttons a page keeps hidden (search draws an "Added" twin with d-none) stay hidden */
.product-card .btn-cart.d-none, .product-card .btn-cart.hideUL,
.product-card .notifyMeRequest.d-none, .product-card .notifyMeRequest.hideUL { display: none !important; }

/* Search/category on phones lays the cards out inline (two per row), so they stay inline */
.mobile-grid > .product-card { display: inline-flex !important; vertical-align: top; height: auto !important; min-height: 0 !important; }

/* Category line above the name (search, category, brand pages) */
.product-card .product-category { font-size: 11px !important; line-height: 1.3 !important; color: #6b7280 !important; margin: 0 0 2px !important; }

/* Sale badge is a small pill, never stretched across the card */
.product-card .sale-badge, .product-card .prescription-badge { display: inline-block !important; width: max-content !important; min-width: 0 !important; max-width: calc(100% - 56px); right: auto !important; }

/* Quick view and wishlist icons drawn as clean line icons (the PNGs looked blurred and
   squashed). The images stay in the markup for the existing scripts, just not shown. */
.product-card .action-btns .btn-view img,
.product-card .action-btns .btn-wishlist img { display: none !important; }
.product-card .action-btns .btn-view::before,
.product-card .action-btns .btn-wishlist::before {
    content: ""; width: 15px; height: 15px; display: block;
    -webkit-mask: var(--pc-icon) center / contain no-repeat; mask: var(--pc-icon) center / contain no-repeat;
}
.product-card .action-btns .btn-view { --pc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.product-card .action-btns .btn-view::before { background: #6b7280; }
.product-card .action-btns .btn-view:hover::before,
.product-card .action-btns .btn-view:focus::before { background: #fff; }
.product-card .action-btns .btn-wishlist { --pc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21.2l7.8-7.7 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E"); }
.product-card .action-btns .btn-wishlist::before { background: #e61b77; }
/* saved: a filled heart */
.product-card .action-btns .btn-wishlist.remove2WishList,
.product-card .action-btns .btn-wishlist:hover { --pc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21.2l7.8-7.7 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E"); }
@media (max-width: 767.98px) {
    .product-card .action-btns .btn-view::before,
    .product-card .action-btns .btn-wishlist::before { width: 13px; height: 13px; }
}

/* No fixed card heights from older page styles; a grid row still lines the buttons up */
.product-card { min-height: 0 !important; }

/* Sponsored search placement (web brief): a small grey "Sponsored" tag at the start of the
   category line, so it never covers the photo, the sale badge or the round buttons */
.product-card .sponsored-tag {
    display: inline-block; vertical-align: 1px; margin-right: 6px;
    font-family: "Figtree-SemiBold", sans-serif; font-size: 10px; line-height: 1; letter-spacing: .02em;
    padding: 3px 6px; border-radius: 6px; background: #f3f4f6; color: #4b5563;
}

/* Refill reminders: the next step for an item that needs a prescription, a consultation or
   consent, at the size of "+ Add" and in the site's dark pill */
.product-card .btn-cart.rf-step { background: #373434 !important; color: #fff !important; cursor: pointer; text-decoration: none; }
.product-card .btn-cart.rf-step:hover { background: #1f1d1d !important; }