.pppp-wrap {
    width: 100%;
    margin: 2.25rem 0 1.75rem;
    clear: both;
}
.pppp-section-heading { margin-bottom: 1rem; }
.pppp-section-heading h2 { margin: 0 0 .35rem; font-size: clamp(1.35rem, 2vw, 1.75rem); }
.pppp-section-heading p { margin: 0; opacity: .78; }

/*
 * The grid deliberately adapts to the number of visible bundle offers.
 * One offer stays comfortably sized, two fill two columns, three fill three,
 * four can use four columns on wide desktops, and five/six use a balanced
 * three-column layout instead of leaving a single orphan card on a new row.
 */
.pppp-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
    width: 100%;
}
.pppp-list.pppp-count-1 {
    grid-template-columns: minmax(0, min(100%, 620px));
}
.pppp-list.pppp-count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pppp-list.pppp-count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pppp-list.pppp-count-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pppp-list.pppp-count-5 {
    /* Six tracks let the second row of a 5-card set sit centred as 3 + 2. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.pppp-list.pppp-count-5 > .pppp-card { grid-column: span 2; }
.pppp-list.pppp-count-5 > .pppp-card:nth-child(4) { grid-column: 2 / span 2; }
.pppp-list.pppp-count-5 > .pppp-card:nth-child(5) { grid-column: 4 / span 2; }
.pppp-list.pppp-count-6,
.pppp-list.pppp-count-many {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pppp-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    padding: 1rem;
    border: 1px solid rgba(0,0,0,.14);
    border-radius: 16px;
    background: #fff;
}
.pppp-card.is-unavailable { background: #fafafa; opacity: .78; }
.pppp-products {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(.3rem, .75vw, .7rem);
    align-items: center;
    min-width: 0;
    margin-bottom: .9rem;
}
.pppp-product {
    flex: 1 1 0;
    min-width: 0;
    max-width: 104px;
    text-align: center;
}
.pppp-image-link { color: inherit; text-decoration: none; }
.pppp-image-wrap {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.pppp-image-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pppp-product-name { display: block; margin-top: .45rem; font-size: .8rem; line-height: 1.25; overflow-wrap: anywhere; }
.pppp-plus { flex: 0 0 auto; font-size: 1.5rem; line-height: 1; font-weight: 700; opacity: .65; }
.pppp-product.is-unavailable .pppp-image-wrap img { filter: grayscale(1); opacity: .52; }
.pppp-slash { position: absolute; z-index: 2; left: -12%; top: 47%; width: 124%; height: 7px; border-radius: 999px; background: #c5162e; transform: rotate(-38deg); box-shadow: 0 0 0 2px rgba(255,255,255,.82); }
.pppp-oos-label { position: absolute; z-index: 3; left: 50%; bottom: 6px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 8px); padding: 3px 6px; border-radius: 4px; background: #c5162e; color: #fff; font-size: .65rem; line-height: 1.15; }
.pppp-info { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; border-top: 1px solid rgba(0,0,0,.08); padding-top: .85rem; }
.pppp-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.pppp-title-line h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.pppp-badge, .pppp-saving { display: inline-flex; width: fit-content; border-radius: 999px; padding: .25rem .55rem; font-size: .78rem; font-weight: 700; background: rgba(0,0,0,.08); }
.pppp-description { margin: .45rem 0; font-size: .9rem; opacity: .8; }
.pppp-prices { display: flex; flex-direction: column; align-items: flex-start; margin: .6rem 0 .8rem; }
.pppp-regular { font-size: .86rem; text-decoration: line-through; opacity: .65; }
.pppp-price { font-size: 1.3rem; font-weight: 750; }
.pppp-saving { margin-top: .25rem; }
.pppp-add-form { margin: auto 0 0; padding-top: .2rem; }
.pppp-add-button { width: 100%; margin: 0 !important; text-align: center; }
.pppp-add-button.is-loading { opacity: .7; cursor: wait; }
.pppp-stock-message { margin: .6rem 0; color: #a00; font-size: .9rem; font-weight: 600; }
.pppp-locked-quantity { display: inline-block; min-width: 2em; text-align: center; }

/* Four cards only remain four columns when each card still has useful room. */
@media (max-width: 1180px) {
    .pppp-list.pppp-count-4,
    .pppp-list.pppp-count-5,
    .pppp-list.pppp-count-6,
    .pppp-list.pppp-count-many {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pppp-list.pppp-count-5 > .pppp-card,
    .pppp-list.pppp-count-5 > .pppp-card:nth-child(4),
    .pppp-list.pppp-count-5 > .pppp-card:nth-child(5) {
        grid-column: auto;
    }
}

@media (max-width: 820px) {
    .pppp-list,
    .pppp-list.pppp-count-3,
    .pppp-list.pppp-count-4,
    .pppp-list.pppp-count-5,
    .pppp-list.pppp-count-6,
    .pppp-list.pppp-count-many {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pppp-list.pppp-count-1 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
    .pppp-list,
    .pppp-list.pppp-count-1,
    .pppp-list.pppp-count-2,
    .pppp-list.pppp-count-3,
    .pppp-list.pppp-count-4,
    .pppp-list.pppp-count-5,
    .pppp-list.pppp-count-6,
    .pppp-list.pppp-count-many {
        grid-template-columns: 1fr;
    }
    .pppp-card { padding: .9rem; }
    .pppp-product { max-width: 92px; }
    .pppp-product-name { font-size: .78rem; }
    .pppp-plus { font-size: 1.35rem; }
}

@media (max-width: 390px) {
    .pppp-products { gap: .35rem; }
    .pppp-product { max-width: 78px; }
    .pppp-plus { font-size: 1.15rem; }
}