/* Shared product card (.pl-*): used by the product list and the home page sections (classic layout). */

/* =====================================================================
   Product list cards (.pl-*) — one card design for grid and list view.
   Brand colours come from the store's colour theme variables.
   ===================================================================== */
.pl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}
.pl-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--card-bg-color, #fff);
    border: 1px solid var(--border-color, #e8e8e8);
    border-radius: 16px;
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.pl-card:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: 0 14px 30px rgba(var(--shadow-color-rgb, 0, 0, 0), .12);
}

/* picture */
.pl-media {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #faf7f3;
    overflow: hidden;
}
/* Product photos are square crops (see Product.image), and so is the default image shown when a product
   has none (static/images/no-image.png), so both fill the frame edge to edge. */
.pl-media img {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
    transition: transform .3s ease;
}
.pl-card:hover .pl-media img { transform: scale(1.04); }
.pl-card.is-oos .pl-media img { opacity: .45; filter: grayscale(.6); }

.pl-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    max-width: calc(100% - 64px);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--button-color);
    color: var(--white-color, #fff);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pl-wish {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    margin: 0;
}
.pl-wish .wishlist-icon {
    position: static !important;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
    transition: transform .15s ease;
}
.pl-wish .wishlist-icon:hover { transform: scale(1.1); }
.pl-wish .wishlist-icon i { font-size: 15px; color: #c0392b !important; }
.pl-oos-tag {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(33, 37, 41, .85);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* text */
.pl-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px 4px;
}
.pl-card, .pl-body, .pl-body > * { text-align: left !important; }
.pl-title {
    margin: 0;
    min-height: 2.6em;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-color, #1a1a1a);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pl-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--description-color, #666);
    text-align: left !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pl-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
    font-size: 12px;
}
.pl-rating .fa-star { font-size: 12px; }
.pl-rating .fa-star.text-warning { color: var(--star-color, #f6b400) !important; }
.pl-rating .pl-star-off { color: #d9d4cc !important; }
.pl-rating-count { margin-left: 6px; font-size: 12px; color: #777; }

.pl-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin: 4px 0 0;
}
.pl-price-now {
    font-size: 18px;
    font-weight: 700;
    color: var(--price-color, var(--text-color, #1a1a1a));
}
.pl-price-old { font-size: 13px; color: #8a8a8a; }
.pl-unit { font-size: 12px; color: #777; }
.pl-volume { margin: 0; font-size: 12px; color: #b45f06; }
.pl-stock-low { margin: 0; font-size: 12px; font-weight: 600; color: #dc3545; }

/* actions: [ - 1 + ] [ Add to cart ] */
.pl-actions { padding: 10px 14px 14px; }
.pl-actions form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0;
}
.pl-stepper {
    display: grid;
    grid-template-columns: 32px 38px 32px;
    height: 40px;
    border: 1px solid #ddd5cb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.pl-card .pl-stepper .pl-step {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0;
    background: #f6f2ed;
    color: var(--text-color, #1a1a1a);
    font-size: 17px !important;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}
.pl-card .pl-stepper .pl-step:hover { background: #ece5dc; }
.pl-card .pl-stepper input[id^="qty-"][name="quantity"] {
    width: 100% !important;
    height: 100%;
    padding: 0;
    border: 0;
    background: #fff;
    text-align: center;
    font-size: 14px !important;
    font-weight: 700;
    -moz-appearance: textfield;
}
.pl-stepper input::-webkit-outer-spin-button,
.pl-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pl-add {
    height: 40px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 10px;
    background: var(--btn-bg-color);
    color: var(--btn-txt-color);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: filter .15s ease;
}
.pl-add:hover { filter: brightness(1.12); color: var(--btn-txt-color); }
.pl-add i { color: inherit !important; font-size: 13px; }
.pl-add-disabled, .pl-add-disabled:hover {
    width: 100%;
    background: #e3ded7;
    color: #756e66;
    cursor: not-allowed;
    filter: none;
}
.pl-empty {
    grid-column: 1 / -1;
    padding: 56px 16px;
    text-align: center;
    color: var(--description-color, #666);
    background: #fff;
    border: 1px dashed var(--border-color, #ddd);
    border-radius: 16px;
}
.pl-empty i { font-size: 34px; color: #b9b1a7; }
.pl-empty h4 { margin: 10px 0 4px; color: var(--text-color, #1a1a1a); }
.pl-empty .pl-clear { display: inline-flex; margin-top: 8px; }

/* list view: picture | details | buy box */
.pl-list .pl-card {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 230px;
    align-items: stretch;
}
.pl-list .pl-card:hover { transform: none; }
.pl-list .pl-media { aspect-ratio: auto; min-height: 200px; }
.pl-list .pl-body { padding: 16px 8px 16px 18px; justify-content: center; gap: 6px; }
.pl-list .pl-title { min-height: 0; font-size: 17px; }
.pl-list .pl-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 18px 16px 8px;
}
/* the buy box is narrow in list view: stepper above a full-width button instead of side by side */
.pl-list .pl-actions form { grid-template-columns: 1fr; }
.pl-list .pl-stepper { width: 100%; grid-template-columns: 40px minmax(0, 1fr) 40px; }
.pl-list .pl-add { width: 100%; }

/* below ~1200px the grid cards are under ~250px wide: stack the stepper above a full-width button
   so "Add to cart" is never clipped */
@media (max-width: 1199.98px) {
    .pl-grid { gap: 16px; }
    .pl-grid .pl-actions form { grid-template-columns: 1fr; }
    .pl-grid .pl-stepper { width: 100%; grid-template-columns: 40px minmax(0, 1fr) 40px; }
    .pl-grid .pl-add { width: 100%; }
}
/* small tablet / large phone */
@media (max-width: 767.98px) {
    .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .pl-list .pl-card { grid-template-columns: 150px minmax(0, 1fr); }
    .pl-list .pl-media { min-height: 150px; }
    .pl-list .pl-actions { grid-column: 1 / -1; padding: 0 16px 16px; }
    .pl-list .pl-body { padding: 14px 14px 10px 4px; }
}
/* phone: compact two-up cards, full-width stacked buy controls */
@media (max-width: 575.98px) {
    .pl-grid { gap: 10px; }
    .pl-card { border-radius: 14px; }
    .pl-body { padding: 10px 10px 2px; gap: 3px; }
    .pl-title { font-size: 14px; min-height: 2.6em; }
    .pl-desc { display: none; }
    .pl-price-now { font-size: 16px; }
    .pl-actions { padding: 8px 10px 12px; }
    .pl-actions form { grid-template-columns: 1fr; gap: 6px; }
    .pl-stepper { grid-template-columns: 40px minmax(0, 1fr) 40px; width: 100%; }
    .pl-add { width: 100%; padding: 0 8px; font-size: 13px; }
    .pl-list .pl-card { grid-template-columns: 112px minmax(0, 1fr); }
    .pl-list .pl-media { min-height: 112px; }
    .pl-list .pl-title { font-size: 15px; }
    .pl-list .pl-desc { display: -webkit-box; -webkit-line-clamp: 1; }
    .pl-list .pl-actions { padding: 0 12px 12px; }
}
/* very narrow phones: one card per row */
@media (max-width: 349.98px) {
    .pl-grid { grid-template-columns: 1fr; }
}

/* 4-up variant (home page sections): flex so a short last row is centred under the centred
   section heading; buy controls always stacked at this card width */
.pl-grid.pl-cols-4 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.pl-grid.pl-cols-4 > .pl-card { flex: 0 0 calc((100% - 60px) / 4); max-width: calc((100% - 60px) / 4); }
.pl-grid.pl-cols-4 .pl-actions form { grid-template-columns: 1fr; }
.pl-grid.pl-cols-4 .pl-stepper { width: 100%; grid-template-columns: 40px minmax(0, 1fr) 40px; }
.pl-grid.pl-cols-4 .pl-add { width: 100%; }
@media (max-width: 991.98px) {
    .pl-grid.pl-cols-4 { gap: 16px; }
    .pl-grid.pl-cols-4 > .pl-card { flex-basis: calc((100% - 32px) / 3); max-width: calc((100% - 32px) / 3); }
}
@media (max-width: 767.98px) {
    .pl-grid.pl-cols-4 { gap: 14px; }
    .pl-grid.pl-cols-4 > .pl-card { flex-basis: calc((100% - 14px) / 2); max-width: calc((100% - 14px) / 2); }
}
@media (max-width: 575.98px) {
    .pl-grid.pl-cols-4 { gap: 10px; }
    .pl-grid.pl-cols-4 > .pl-card { flex-basis: calc((100% - 10px) / 2); max-width: calc((100% - 10px) / 2); }
}
@media (max-width: 349.98px) {
    .pl-grid.pl-cols-4 > .pl-card { flex-basis: 100%; max-width: 100%; }
}

/* "Select options" (products with variants) is a link, not a form button: fill the buy box like one */
.pl-actions > .pl-add { width: 100%; }
.pl-select-options { background: transparent; color: var(--btn-bg-color); border: 1.5px solid var(--btn-bg-color); }
.pl-select-options:hover { background: var(--btn-bg-color); color: var(--btn-txt-color); filter: none; }

/* Not in the cart: just "Add to cart". In the cart: just the stepper (it saves on every tap; at 0 it goes back). */
.pl-card .pl-actions form { grid-template-columns: minmax(0, 1fr); }
.pl-card .pl-actions form .pl-add { width: 100%; }
.pl-card .pl-actions form .pl-stepper { display: none; }
.pl-card .pl-actions form.pl-in-cart .pl-stepper { display: grid; width: 100%; grid-template-columns: 44px minmax(0, 1fr) 44px; }
.pl-card .pl-actions form.pl-in-cart .pl-add { display: none; }

/* the "-20%" pill: part of every card, but only a layout that wants it (Bold) shows it */
.pl-off { display: none; }