/* ==========================================================================
   Pro Peptide — Universal Product Card v2 (site-wide additive overrides)
   Heart was already top-left in style.css:17559. v2 adds: a category pill
   top-right of the image area, and a new star-rating block.
   ========================================================================== */

/* --- Category pill (top-right of image area) ---
   `!important` on width/height/display defends against the existing greedy
   rule `.pp-product-card--grid .pp-product-card__image a` (style.css:12516)
   which forces every <a> in the image area to width:100%/height:100%. Without
   this override the pill expanded to fill the card and `border-radius:9999px`
   turned it into a giant circle. */
.pp-product-card .pp-product-card__image > .pp-product-card__category-pill,
.pp-product-card .pp-product-card__image > a.pp-product-card__category-pill {
    position: absolute !important;
    top: 18px;
    right: 12px;
    z-index: 8;
    width: auto !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center;
    background: var(--pp-cc-bg, #E8F4FB);
    border: 1.5px solid var(--pp-cc-border, #1f9edb);
    color: var(--pp-cc, #0e6a99);
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    transition: transform 0.15s, box-shadow 0.15s;
}
.pp-product-card .pp-product-card__image > .pp-product-card__category-pill:hover,
.pp-product-card .pp-product-card__image > a.pp-product-card__category-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--pp-cc-border, #1f9edb) 33%, transparent);
}

/* --- Color tints per category, applied via .pp-product-card--cat-* on root --- */
.pp-product-card--cat-healing      { --pp-cc:#15803d; --pp-cc-border:#22c55e; --pp-cc-bg:#F0FDF4; }
.pp-product-card--cat-skin         { --pp-cc:#7e22ce; --pp-cc-border:#9333ea; --pp-cc-bg:#FAF5FF; }
.pp-product-card--cat-weight       { --pp-cc:#c2410c; --pp-cc-border:#ea580c; --pp-cc-bg:#FFF7ED; }
.pp-product-card--cat-brain        { --pp-cc:#0e6a99; --pp-cc-border:#1f9edb; --pp-cc-bg:#E8F4FB; }
.pp-product-card--cat-performance  { --pp-cc:#c0384a; --pp-cc-border:#ef4444; --pp-cc-bg:#FEF2F2; }
.pp-product-card--cat-immune       { --pp-cc:#0e6a99; --pp-cc-border:#1f9edb; --pp-cc-bg:#E8F4FB; }

/* --- v2 star rating block (replaces the old blue-badge variant) --- */
.pp-product-card__rating-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 12px;
}
.pp-product-card__rating-v2 .pp-rv2-stars {
    display: inline-flex;
    gap: 2px;
}
.pp-product-card__rating-v2 .pp-rv2-num {
    font-size: 14px;
    font-weight: 700;
    color: #343434;
}
.pp-product-card__rating-v2 .pp-rv2-count {
    font-size: 13px;
    color: #6b7280;
}

/* --- Hide deprecated body-banner markup on grid cards (renderer no longer
       emits it; cached HTML still in the DOM gets neutralised here). --- */
.pp-product-card--grid .pp-product-card__category-banner,
.pp-product-card--grid .pp-product-card__divider {
    display: none;
}

/* --- "Starting at" prefix above price (variable products) --- */
.pp-product-card__price-from {
    display: block;
    font-size: 9px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 2px;
}

/* --- Peptide Planner link (inline left of Add to Cart in the CTA row) --- */
.pp-product-card__planner-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #0e6a99;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0.2px;
    transition: color 0.15s;
}
.pp-product-card__planner-link:hover { color: #1577AD; }
.pp-product-card__planner-link svg { transform: translateY(0.5px); }


/* ==========================================================================
   CARD TOKENS — single source of truth for HEART + CATEGORY PILL sizing.
   These rules force the same dimensions/typography on every card variant
   site-wide (vertical grid, horizontal list-row, PDP gallery, wishlist tab,
   cart upsells). Position can still differ per layout (e.g., list view's
   bottom-center vs grid's top-right) but size + style stay locked.

   Loaded after style.css and pp-shop.css; uses !important so any future
   per-variant rule has to opt out explicitly to break the consistency.
   ========================================================================== */

/* --- HEART: 40x40 circle, 12px from top-left of its container, 20px icon --- */
.pp-product-card__image .pp-wishlist-btn,
.pp-shop-row__image .pp-wishlist-btn,
.ppx-gallery > .pp-wishlist-btn {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    padding: 0 !important;
}
.pp-product-card__image .pp-wishlist-btn svg,
.pp-shop-row__image .pp-wishlist-btn svg,
.ppx-gallery > .pp-wishlist-btn svg {
    width: 20px !important;
    height: 20px !important;
}
.pp-product-card__image .pp-wishlist-btn--active,
.pp-shop-row__image .pp-wishlist-btn--active,
.ppx-gallery > .pp-wishlist-btn--active {
    background: rgba(239, 68, 68, 0.08) !important;
}

/* --- CATEGORY PILL: locked typography + chip dimensions across all variants.
   Position is intentionally NOT forced here (grid uses top-right, list-row
   uses bottom-center) — only the size + style is unified. */
.pp-product-card__image > .pp-product-card__category-pill,
.pp-product-card .pp-product-card__image > .pp-product-card__category-pill,
.pp-product-card .pp-product-card__image > a.pp-product-card__category-pill,
.pp-shop-row__cat {
    font-family: 'Montserrat', 'Inter', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    border-width: 1.5px !important;
    border-style: solid !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* 2026-05-11: category pills get pure white bg (was tinted per-category)
   and a slightly larger pill size — keeps the colored border + text. */
.pp-product-card__category-pill,
.pp-product-card .pp-product-card__image > .pp-product-card__category-pill,
.pp-product-card .pp-product-card__image > a.pp-product-card__category-pill,
.pp-shop-row__cat {
    background: #FFFFFF !important;
    padding: 7px 14px !important;
}


/* ==========================================================================
   VARIATION D — centered showcase card.
   Shared by Most Popular (home_popular) and PDP Related (related); both get
   `.pp-product-card--vd`. Loaded after style.css so equal-specificity wins.
   ========================================================================== */
.pp-product-card.pp-product-card--vd {
    padding: 20px;
    align-items: center;
    text-align: center;
    overflow: visible;
    /* Let the card shrink to its grid/flex track instead of expanding to the
       hook's nowrap min-content (which caused desktop horizontal scroll). */
    min-width: 0;
}
.pp-product-card--vd .pp-product-card__body { min-width: 0; }
.pp-product-card--vd .pp-product-card__hook { max-width: 100%; }

/* Category pill — top, LEFT-aligned, out of the image (keeps its category color;
   box shape comes from the site-wide badge !important rules). */
.pp-product-card--vd > .pp-product-card__category-pill {
    position: static !important;
    align-self: flex-start;
    width: auto !important;
    height: auto !important;
    margin: 0 0 14px;
    display: inline-flex;
    align-items: center;
    background: #FFFFFF;
    border: 1.5px solid var(--pp-cc-border, #1f9edb);
    color: var(--pp-cc, #0e6a99);
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 9999px;
    padding: 7px 14px;
}

/* White image cell — contained + padded (kills the grey product bg). */
.pp-product-card--vd .pp-product-card__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #FFFFFF !important;
    background-image: none !important;
    border: none;
    border-radius: 12px;
    padding: 16px;
    box-sizing: border-box;
    overflow: hidden;
}
.pp-product-card--vd .pp-product-card__img {
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Dosage pill — ALWAYS blue, centered under the image (category-independent). */
.pp-product-card--vd .pp-product-card__dose-pill {
    display: inline-flex;
    align-items: center;
    margin: 14px auto 0;
    padding: 4px 14px;
    border-radius: 9999px;
    background: #E8F4FB;
    border: 1px solid #1f9edb;
    color: #0e6a99;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1.3;
}

/* Body — centered column, full-width children, breathing room. */
.pp-product-card--vd .pp-product-card__body {
    padding: 16px 0 0;
    gap: 10px;
}
.pp-product-card--vd .pp-product-card__body > * {
    width: 100%;
}
.pp-product-card--vd .pp-product-card__title {
    padding: 0;
    font-size: 17px;
}
.pp-product-card--vd .pp-product-card__rating-v2 {
    margin: 0;
}

/* Hook — single muted line; min-height keeps a row of cards even when some
   products have no short description yet. */
.pp-product-card--vd .pp-product-card__hook {
    margin: 0;
    min-height: 20px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Divider — info vs buy area (named __rule; __divider is hidden on grid cards). */
.pp-product-card--vd .pp-product-card__rule {
    width: 100%;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 6px 0 4px;
}

/* Price — centered; lowercase "from" inline LEFT of the value, de-emphasised. */
.pp-product-card--vd .pp-product-card__price-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin: 0;
}
.pp-product-card--vd .pp-product-card__price-from {
    display: inline;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0;
    color: #9CA3AF;
}
.pp-product-card--vd .pp-product-card__price-value {
    font-size: 22px;
    font-weight: 700;
    color: #1E293B;
    line-height: 1;
}

/* Buy area — Add to Cart centered (full card width), Planner a small text link. */
.pp-product-card--vd .pp-product-card__cta-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}
.pp-product-card--vd .pp-product-card__cta {
    width: 100%;
    justify-content: center;
}
.pp-product-card--vd .pp-product-card__planner-link--below {
    margin-top: 2px;
}

@media (max-width: 768px) {
    .pp-product-card.pp-product-card--vd { padding: 16px; }
    .pp-product-card--vd .pp-product-card__price-value { font-size: 20px; }
}