/**
 * PepperLabz — Pack product pages (Starter Pack / Complete Pack) and the
 * shared pack visual.
 *
 * The pack page renders the product page's own markup and global classes,
 * so most of it is styled by the existing product-page CSS, unchanged.
 * This file holds only what the product page doesn't have:
 *   1. The shared pack visual — hexagon pattern, glow, the original
 *      spinning liquid chrome (.plz-pack-chrome) and the big bag, used on
 *      the pack pages AND the homepage / bundle-page section (both place it
 *      in the product page's rounded .plz-product-image-card).
 *   2. Pack-page pieces: price note, action row, "What's in the box" rows
 *      with View COA / View product buttons, bottom-CTA bags, gap fix.
 * Pack-page rules are scoped to .plz-package-page (or body.plz-package-
 * product, added by PHP on the two pack products only), so nothing here
 * reaches a product page. Loads sitewide; harmless elsewhere.
 * Updated 2026-10-09b (owner fixes: centered buttons, aligned rows, View
 * product) and 2026-10-09c (CSS ring removed at the owner's request; the
 * original liquid chrome restored; bag ~85-90% of the card height).
 */

/* Same gap fix the product pages got (pepperlabz-fixes.css section 23). */
body.plz-package-product #primary {
    margin-top: 0 !important;
}

.plz-package-unavailable {
    text-align: center;
    padding: 80px 20px;
    color: #79818A;
    font-size: 16px;
}

/* =========================================================
   1. SHARED PACK VISUAL — liquid chrome behind a big bag
   ---------------------------------------------------------
   Lives inside a .plz-product-image-card. The stage fills the card and
   is a size container, so every piece scales with the card (cqw/cqh).
   Layers: hexagons (0) < glow (1) < liquid chrome (2) < shadow (3) <
   bag (4). Only transform/opacity animate (smooth on mobile); reduced
   motion stops everything. The bag is always the top layer.
========================================================= */

.plz-pack-image-card {
    isolation: isolate;
}

.plz-pack-ring-hex {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.075;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg fill='none' stroke='%231C1F23' stroke-width='1.2'%3E%3Cpath d='M30 0 L60 17.3 L60 52 L30 69.3 L0 52 L0 17.3 Z'/%3E%3Cpath d='M30 69.3 L30 104'/%3E%3C/g%3E%3Cg fill='%231C1F23'%3E%3Ccircle cx='30' cy='0' r='2.4'/%3E%3Ccircle cx='60' cy='17.3' r='2.4'/%3E%3Ccircle cx='60' cy='52' r='2.4'/%3E%3Ccircle cx='30' cy='69.3' r='2.4'/%3E%3Ccircle cx='0' cy='52' r='2.4'/%3E%3Ccircle cx='0' cy='17.3' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 60px 104px;
    -webkit-mask: radial-gradient(ellipse at 50% 50%, transparent 30%, #000 85%);
            mask: radial-gradient(ellipse at 50% 50%, transparent 30%, #000 85%);
}

.plz-pack-ring-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    container-type: size;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.plz-pack-ring-glow {
    position: absolute;
    z-index: 1;
    width: min(70cqw, 66cqh);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 245, 255, 0.95), rgba(255, 255, 255, 0) 68%);
    filter: blur(10px);
    animation: plzPackRingGlow 6s ease-in-out infinite;
}

/* The original liquid chrome, restored (2026-10-09c): the product page's
   own chrome swirl image and turn (.plz-chrome-circle in
   additional-css.css — 2x the card width, centred just below the middle,
   plzSpinChromeFixed one turn per 24s), at the 50% opacity the pack page
   used so it reads clearly. Its own class so it looks the same on the
   homepage, where the product page's per-breakpoint sizes don't apply. */
.plz-pack-chrome {
    position: absolute !important;
    z-index: 2;
    left: 50% !important;
    top: 54% !important;
    width: 200cqw !important;
    max-width: none !important;
    height: auto !important;
    opacity: 0.5;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.1));
    pointer-events: none;
    animation: plzSpinChromeFixed 24s linear infinite;
}

/* Sits right under the bag: the bag is centred and min(88cqh, 138cqw)
   tall, so its bottom edge is at 50% + half that height. */
.plz-pack-ring-shadow {
    position: absolute;
    z-index: 3;
    top: calc(50% + min(44cqh, 69cqw) - 3cqh);
    width: 44cqw;
    height: 5cqh;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(28, 31, 35, 0.3), rgba(28, 31, 35, 0) 70%);
    filter: blur(6px);
}

/* The bag: always on top, fully visible (real PNG proportions), ~88% of
   the card height. The 138cqw cap (= 94% of the card width at the bag's
   1034:1521 ratio) keeps it inside the card edges in narrow cards — the
   pack page's tall hero card lands at ~86%. */
.plz-pack-ring-bag {
    position: relative;
    z-index: 4;
    height: min(88cqh, 138cqw);
    max-width: 94cqw;
    aspect-ratio: 1034 / 1521;
    perspective: 1600px;
    filter: drop-shadow(0 30px 34px rgba(28, 31, 35, 0.18));
}

.plz-pack-ring-bag .plz-package-flip-face.is-static {
    height: 100%;
}

.plz-pack-ring-bag img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@keyframes plzPackRingGlow {
    0%, 100% { opacity: 0.6; transform: scale(0.97); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* =========================================================
   2. PACK PAGE
========================================================= */

.plz-package-page .plz-pack-compare-note {
    margin: 2px 0 12px;
    color: #79818A;
    font-size: 13px;
    line-height: 1.45;
}

/* View COAs + View Cart: two equal columns so neither wraps. */
.plz-package-page .plz-pack-action-row {
    grid-template-columns: 1fr 1fr !important;
}

.plz-package-page .plz-pack-coa-jump {
    white-space: nowrap;
}

/* ---- "What's in the box": one shared grid, every row a subgrid, so
   Name / Strength / Lot # / Purity / buttons line up on every row. ---- */
.plz-package-page .plz-pack-vials {
    display: grid;
    /* The 4px edge tracks (+ the 20px gap) are the rows' 24px side
       padding: a subgrid's own padding would otherwise be taken out of
       its first and last columns, shrinking the image and button cells. */
    grid-template-columns:
        4px 72px minmax(150px, 1.25fr) minmax(70px, 0.7fr) minmax(130px, 1.1fr) minmax(70px, 0.7fr) 150px 150px 4px;
    column-gap: 20px;
    row-gap: 14px;
}

.plz-package-page .plz-pack-vial {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    min-height: 104px;
    padding: 16px 0;
    background: #FFFFFF;
    border: 1px solid #e5e5e5;
    border-radius: 22px;
}

.plz-package-page .plz-pack-vial > :first-child {
    grid-column-start: 2;
}

.plz-package-page .plz-pack-vial-img {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F1F3F5;
    border-radius: 16px;
    overflow: hidden;
}

.plz-package-page .plz-pack-vial-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.plz-package-page .plz-pack-vial-name {
    margin: 0 !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 800 !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    color: #1C1F23 !important;
}

.plz-package-page .plz-pack-fact {
    min-width: 0;
}

.plz-package-page .plz-pack-fact span {
    display: block;
    margin: 0 0 4px;
    color: #79818A;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.plz-package-page .plz-pack-fact strong {
    display: block;
    color: #1C1F23;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

/* ---- Buttons: text centred exactly (the theme's 17px/34px button
   padding is what pushed "View COA" low), same size on every row. ---- */
.plz-package-page .plz-pack-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 2px solid #1C1F23 !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.plz-package-page .plz-pack-coa-btn {
    background: #1C1F23 !important;
    color: #FFFFFF !important;
}

.plz-package-page .plz-pack-coa-btn:hover {
    background: #FFFFFF !important;
    color: #1C1F23 !important;
    box-shadow: 0 10px 22px rgba(28, 31, 35, 0.12);
}

.plz-package-page .plz-pack-product-btn {
    background: #FFFFFF !important;
    color: #1C1F23 !important;
}

.plz-package-page .plz-pack-product-btn:hover {
    background: #1C1F23 !important;
    color: #FFFFFF !important;
    box-shadow: 0 10px 22px rgba(28, 31, 35, 0.12);
}

.plz-package-page .plz-pack-btn:active {
    transform: translateY(1px);
}

.plz-package-page .plz-pack-btn:focus-visible {
    outline: 3px solid #C4CAD1 !important;
    outline-offset: 2px;
}


/* Bottom CTA uses the pack's own bags instead of a vial. */
.plz-package-page .plz-pack-bottom-bag {
    width: 150px !important;
    height: auto !important;
}

/* =========================================================
   MOBILE — rows become stacked cards; both buttons full width.
========================================================= */

@media (max-width: 767px) {
    .plz-package-page .plz-pack-vials {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .plz-package-page .plz-pack-vial {
        /* Column 2 is 0 so Strength (spanning cols 1–2, 70px) gives its
           spare room to Lot #: at 360px the longest lot (GHKCU-020526,
           ~100px) ran into Purity (2026-10-09e). */
        grid-template-columns: 56px 0 minmax(0, 1.75fr) minmax(0, 1fr);
        grid-template-areas:
            "img name name name"
            "str  str lot  pur"
            "coa  coa coa  coa"
            "prod prod prod prod";
        gap: 12px 14px;
        min-height: 0;
        padding: 14px 16px;
        border-radius: 18px;
    }

    /* Thumbnail and name side by side (2026-10-09d fix): the desktop
       rule ".plz-pack-vial > :first-child { grid-column-start: 2 }" (for
       the subgrid spacer track) outranked the mobile grid-area and put the
       thumbnail under the name. This more specific selector puts it back
       in its own fixed 56px slot; the name sits beside it, vertically
       centred, wrapping if long. */
    .plz-package-page .plz-pack-vial > .plz-pack-vial-img {
        grid-area: img;
        width: 56px;
        min-width: 56px;
        height: 56px;
        flex-shrink: 0;
        border-radius: 14px;
    }

    .plz-package-page .plz-pack-vial-name {
        grid-area: name;
        align-self: center;
        min-width: 0;
        overflow-wrap: anywhere;
        font-size: 17px !important;
    }
    .plz-package-page .plz-pack-fact.is-strength { grid-area: str; }
    .plz-package-page .plz-pack-fact.is-lot { grid-area: lot; }
    .plz-package-page .plz-pack-fact.is-purity { grid-area: pur; }
    .plz-package-page .plz-pack-coa-btn { grid-area: coa; }
    .plz-package-page .plz-pack-product-btn { grid-area: prod; }
    .plz-package-page .plz-pack-btn-slot { display: none; }

    .plz-package-page .plz-pack-fact strong {
        font-size: 13.5px;
    }

    .plz-package-page .plz-pack-bottom-bag {
        width: 96px !important;
    }
}

/* =========================================================
   REDUCED MOTION — nothing moves; the bag stays big (Complete: front bag).
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .plz-pack-ring-glow,
    .plz-package-page .plz-bottom-vial {
        animation: none !important;
    }

    /* Chrome stays visible, held still at its centred position. */
    .plz-pack-chrome {
        animation: none !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Complete Pack: no flip — the front bag, at the same big size. */
    .plz-pack-ring-bag .plz-package-flip {
        animation: none !important;
        transform: none !important;
    }

    .plz-pack-ring-bag .plz-package-flip-face.is-back {
        display: none;
    }

    .plz-package-page .plz-pack-btn {
        transition: none;
    }
}