/* Pro Peptide — Pack boxes (Single / 5-Pack / 10-Pack display nudge). */

/* The old pack-size pills are replaced by the qty boxes — hide that selector
   group (the hidden WC <select> stays in the DOM for variation resolution). */
.pp-selector-group[data-attribute="pa_pack-size"] { display: none !important; }

.pp-pack-boxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0 18px;
}
.pp-pack-box {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.pp-pack-box:hover { border-color: #cbd5e1; }
.pp-pack-box.is-selected {
    border-color: #1f9edb;
    background: #E8F4FB;
}
.pp-pack-box__radio {
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    flex: 0 0 auto;
    position: relative;
    box-sizing: border-box;
}
.pp-pack-box.is-selected .pp-pack-box__radio { border-color: #1f9edb; }
.pp-pack-box.is-selected .pp-pack-box__radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #1f9edb;
}
.pp-pack-box__body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.pp-pack-box__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-pack-box__name { font-size: 14px; font-weight: 700; color: #343434; }
.pp-pack-box__save {
    font-size: 11px;
    font-weight: 600;
    color: #4e9c2a;
    background: #eaf6e3;
    padding: 2px 7px;
    border-radius: 9999px;
    white-space: nowrap;
}
.pp-pack-box__pricing {
    text-align: right;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    flex: 0 0 auto;
}
.pp-pack-box__total { font-size: 14px; font-weight: 700; color: #343434; font-variant-numeric: tabular-nums; }
.pp-pack-box__total .amount, .pp-pack-box__total bdi { font: inherit; color: inherit; }
.pp-pack-box__per { font-size: 11px; color: #6b7280; font-variant-numeric: tabular-nums; }
.pp-pack-box__per .amount, .pp-pack-box__per bdi { font: inherit; color: inherit; }

/* Pack rows: per-vial price is the headline (large, dark); the pack total drops
   to the small grayed line beneath it. The Single row keeps its total as the
   primary price (no per-vial line, no --pack modifier). */
.pp-pack-box__pricing--pack .pp-pack-box__per { font-size: 15px; font-weight: 700; color: #343434; }
.pp-pack-box__pricing--pack .pp-pack-box__total { font-size: 11px; font-weight: 400; color: #6b7280; }

/* Vial-size chip — simple products don't get size pills, so the mg level would
   otherwise be invisible in the buy box. People need to know the strength. */
.pp-buybox__strength {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 14px;
}
.pp-buybox__strength-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #6b7280;
}
.pp-buybox__strength-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border: 1.5px solid #1f9edb;
    border-radius: 9999px;
    background: #E8F4FB;
    font-size: 15px;
    font-weight: 700;
    color: #1a6f9e;
    font-variant-numeric: tabular-nums;
}
/* Simple products: the Use Peptide Planner link rides the strength row
   (variable products carry it on .pp-size-row). Right-aligned to mirror
   the size-row's space-between layout; the row wraps so the link's
   existing <=380px flex:1 0 100% rule still drops it to its own line. */
.pp-buybox__strength {
    flex-wrap: wrap;
}
.pp-buybox__strength .pp-planner-link {
    margin-left: auto;
}