/**
 * Pegasus Peptides — design layer
 *
 * Deployable home for design CSS. Lives in the plugin rather than the theme so
 * it is a plain file: diffable, version-controlled, and shipped over SFTP the
 * same way the plugin PHP already is.
 *
 * Load order matters here. WordPress prints Customizer CSS inline at wp_head
 * priority 101, which would beat a normally-enqueued stylesheet on any
 * specificity tie. This file is printed at priority 102 so it lands after —
 * see the enqueue block in pegasus-peptides.php. That means you should not
 * need !important to override Customizer rules; if you reach for it, the
 * cascade is probably telling you something else is wrong.
 *
 * There is ~10KB of existing CSS in the Customizer. It is deliberately left
 * there for now. Migrating it here is worth doing, but as its own change, not
 * mixed into design work.
 *
 * Design tokens currently defined in the Elementor Kit (post 4):
 *   Primary   #4A42EC     Secondary #8A2BE2
 *   Accent    #C824A4     Text      #4F4F4F
 *   Headings  #333333     Borders   #C4C4C4
 *   Type      Poppins
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

/* ==========================================================================
   2. Global / typography
   ========================================================================== */

/* ==========================================================================
   3. Age verification gate

   The first screen every new visitor sees. Stock styling is a white box with
   black text and hairline buttons, which reads as a generic compliance popup
   rather than as this brand.

   Direction: the product photography already speaks in laboratory
   documentation — CAS numbers, molecular weight, an RUO badge. The gate
   borrows that vocabulary instead of inventing a new one, so the checkpoint
   feels like part of the same system as the vials.

   Emphasis is applied by class (--yes / --no), never by position, so it stays
   correct whichever way Age Gate → Restrictions orders the buttons.
   ========================================================================== */

.age-gate__wrapper {
    --pg-ink:      #0E0B2B;                  /* deep base, sits under Primary */
    --pg-surface:  #17123F;                  /* the panel */
    --pg-line:     rgba(255, 255, 255, 0.14);
    --pg-accent:   #C824A4;                  /* Kit Accent — unused until now */
    --pg-heading:  #FFFFFF;
    --pg-text:     rgba(255, 255, 255, 0.72);
    --pg-muted:    rgba(255, 255, 255, 0.48);
    --pg-mono:     ui-monospace, SFMono-Regular, Menlo, "Roboto Mono", monospace;
}

/* The wrapper is a flex row that inherits align-items: normal, so the panel is
   stretched down the cross axis — on a tall phone the plugin's max-height lets
   it reach nearly the full viewport, and the form then centres its content
   inside all that empty space. Centring the item instead lets the panel size
   to its content at every width. */
.age-gate__wrapper {
    align-items: center;
    justify-content: center;
}

/* Backdrop: dark wash rather than the default white one, so the panel reads as
   lit from within and the page behind recedes. */
.age-gate__wrapper .age-gate__background-color {
    background-color: var(--pg-ink);
    opacity: 0.92;
}

.age-gate__wrapper .age-gate__loader {
    color: var(--pg-accent);
}

/* --- panel ------------------------------------------------------------- */

.age-gate__wrapper .age-gate {
    align-self: center;
    height: auto;
    max-width: 30rem;
    padding: 2.75rem 2.5rem 2.25rem;
    background: var(--pg-surface);
    border: 1px solid var(--pg-line);
    border-radius: 4px;                      /* square-ish: document, not app */
    box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, 0.55);
    text-align: center;
}

/* Logo ships as a black SVG, so it is inverted rather than swapped — a file
   change we can deploy, versus an attachment setting we could not. */
.age-gate__wrapper .age-gate__heading-title--logo {
    width: 12.5rem;
    height: auto;
    margin: 0 auto 1.75rem;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

/* --- type -------------------------------------------------------------- */

/* Signature: the RUO badge language lifted from the product labels, set in
   mono so it reads as an instrument marking rather than a heading. */
.age-gate__wrapper .age-gate__headline::before {
    /* No age here on purpose — the challenge line below already states it, and
       repeating "21" twice in one panel makes the label read as instruction
       rather than as a mark. */
    content: "RESEARCH USE ONLY";
    display: block;
    margin-bottom: 1.25rem;
    padding-bottom: 1.125rem;
    border-bottom: 1px solid var(--pg-line);
    font-family: var(--pg-mono);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    color: var(--pg-muted);
}

.age-gate__wrapper .age-gate__headline {
    margin: 0 0 0.625rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--pg-heading);
}

.age-gate__wrapper .age-gate__challenge {
    margin: 0 0 1.875rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--pg-text);
}

/* --- actions ----------------------------------------------------------- */

.age-gate__wrapper .age-gate__buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.age-gate__wrapper .age-gate__submit {
    flex: 1 1 0;
    min-height: 3rem;
    padding: 0 1.25rem;
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Affirmative carries the accent. This is the one place on the site where
   #C824A4 does work rather than decoration. */
.age-gate__wrapper .age-gate__submit--yes {
    background: var(--pg-accent);
    border: 1px solid var(--pg-accent);
    color: #FFFFFF;
}

.age-gate__wrapper .age-gate__submit--yes:hover {
    background: #A81C89;
    border-color: #A81C89;
}

/* Declining stays available and legible, but never competes. */
.age-gate__wrapper .age-gate__submit--no {
    background: transparent;
    border: 1px solid var(--pg-line);
    color: var(--pg-muted);
}

.age-gate__wrapper .age-gate__submit--no:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--pg-text);
}

.age-gate__wrapper .age-gate__submit:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

/* --- remember ---------------------------------------------------------- */

.age-gate__wrapper .age-gate__remember-wrapper {
    margin-top: 1.5rem;
}

.age-gate__wrapper .age-gate__remember {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--pg-muted);
    cursor: pointer;
}

/* accent-color only paints the checked state; the unchecked native box renders
   as a bright white block against this panel. Drawn explicitly instead. */
.age-gate__wrapper .age-gate__remember-field {
    appearance: none;
    -webkit-appearance: none;
    width: 0.9375rem;
    height: 0.9375rem;
    margin: 0;
    border: 1px solid var(--pg-line);
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.age-gate__wrapper .age-gate__remember-field::after {
    content: "";
    width: 0.5rem;
    height: 0.28125rem;
    border-left: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    transform: rotate(-45deg) translate(0.03125rem, -0.0625rem);
    opacity: 0;
}

.age-gate__wrapper .age-gate__remember-field:checked {
    background: var(--pg-accent);
    border-color: var(--pg-accent);
}

.age-gate__wrapper .age-gate__remember-field:checked::after {
    opacity: 1;
}

.age-gate__wrapper .age-gate__remember-field:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

.age-gate__wrapper .age-gate__remember:hover .age-gate__remember-field:not(:checked) {
    border-color: rgba(255, 255, 255, 0.32);
}

.age-gate__wrapper .age-gate__remember:hover .age-gate__remember-text {
    color: var(--pg-text);
}

/* --- small screens ----------------------------------------------------- */

@media (max-width: 30rem) {
    .age-gate__wrapper .age-gate {
        max-width: none;
        margin: 1rem;
        padding: 2.25rem 1.5rem 1.875rem;
    }

    .age-gate__wrapper .age-gate__heading-title--logo {
        width: 10.5rem;
    }

    .age-gate__wrapper .age-gate__headline {
        font-size: 1.3125rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .age-gate__wrapper .age-gate__submit {
        transition: none;
    }
}

/* ==========================================================================
   4. Header & navigation
   ========================================================================== */

/* ==========================================================================
   5. Home page
   ========================================================================== */

/* Hero headline.
   It renders as an <h2> at 30px/500 on desktop while the section headings
   below it are 36px/600 — so the most important line on the site is neither
   the largest nor the heaviest. The tag itself should also become an <h1>
   (Elementor template 1217, widget 55f3b96); this only fixes the appearance,
   not the document outline. */
.elementor-element-55f3b96 .elementor-heading-title {
    font-size: 2.75rem;
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.015em;
}

@media (max-width: 1024px) {
    .elementor-element-55f3b96 .elementor-heading-title {
        font-size: 2.25rem;
    }
}

/* --- mobile card rows ---------------------------------------------------
   Three stacked card rows account for 4,430px of a 7,284px page — 61% of the
   scroll for twelve cards, one per screen. These are compact cards (icon,
   short title, one line of copy), so two across reads fine at 390px and
   removes roughly 2,200px.
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {

    /* Product grid ships as a single fixed 310px column. */
    .elementor-products-grid ul.products,
    .woocommerce ul.products.elementor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 0.75rem;
    }

    /* Trust cards — flex row that wraps, currently with no gap. */
    .elementor-element.elementor-element-af52b2c {
        gap: 0.75rem;
    }

    .elementor-element.elementor-element-af52b2c > .e-con {
        flex: 0 0 calc(50% - 0.375rem);
        max-width: calc(50% - 0.375rem);
    }

    /* Research tools deliberately stays one per row. Each of those two cards
       carries an image, a heading, three lines of copy and a button — at half
       of 390px that became a nine-line column with words breaking mid-word
       ("Peptide Calculat / or"). The ~400px saved is not worth it. */

    /* Two across halves the width for the same words, and something in the
       stack breaks words anywhere rather than only where needed. Allow breaks
       only when a word genuinely cannot fit. */
    /* Cards keep their desktop padding into a ~145px column, which leaves too
       little text width for "Transparent" to fit and forces a mid-word break.
       Trimming the inset buys the width back and shortens the row. */
    .elementor-element.elementor-element-af52b2c > .e-con {
        padding-left: 0.625rem;
        padding-right: 0.625rem;
    }

    .elementor-element.elementor-element-af52b2c .elementor-heading-title {
        font-size: 0.875rem;
        line-height: 1.3;
    }

    .elementor-element.elementor-element-af52b2c .elementor-heading-title,
    .elementor-element.elementor-element-af52b2c p,
    .elementor-element.elementor-element-af52b2c .elementor-widget-text-editor {
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: none;
    }
}

/* ==========================================================================
   6. Shop & product cards
   ========================================================================== */

/* Product names vary from one line ("Ipamorelin") to three ("(KLOW) GHK-CU +
   TB500 + BPC157 + KPV Blend"), which leaves the price and button of each card
   sitting at a different height across the row. Making the card a flex column
   and pushing the action to the bottom keeps the row on a consistent baseline
   whatever the titles happen to be. */
.woocommerce ul.products.elementor-grid li.product {
    display: flex;
    flex-direction: column;
}

.woocommerce ul.products.elementor-grid li.product > .button,
.woocommerce ul.products.elementor-grid li.product > a.button,
.woocommerce ul.products.elementor-grid li.product .add_to_cart_button {
    margin-top: auto;
    align-self: flex-start;
}

/* Reserve room for a second line so single-line names do not ride up against
   the price. Three lines would over-pad the common case. */
.woocommerce ul.products.elementor-grid li.product .woocommerce-loop-product__title {
    min-height: 2.75em;
}

/* ==========================================================================
   7. Single product / buy box

   Stock WooCommerce on a site whose home page is carefully built. This is
   where begin_checkout originates, so it gets the accent and the proof.
   ========================================================================== */

/* The gallery is capped at 300px while the summary starts around 768px,
   leaving ~340px of dead space between them. The spec-card photography is the
   strongest evidence on the page and it was rendering thumbnail-sized. */
.woocommerce div.product .woocommerce-product-gallery {
    width: 30rem;
    max-width: 42%;
}

/* Price was 24px/700 but in body grey, so it read as text rather than as the
   number the page is about. */
.woocommerce div.product .summary p.price,
.woocommerce div.product .summary span.price {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: #333333;
}

.woocommerce div.product .summary p.price del {
    font-size: 0.6em;
    font-weight: 500;
    opacity: 0.55;
}

/* Once a size is chosen the range stops being the answer — the chosen
   variant's price is. Class is toggled on found_variation / reset_data. */
.woocommerce div.product.pegasus-variation-chosen .summary > p.price {
    display: none;
}

.woocommerce div.product .woocommerce-variation-price .price {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: #333333;
}

/* Add to cart was a 132x38 white button with a 1px black border — lower
   contrast than the breadcrumb above it, on the one control that matters. */
.woocommerce div.product form.cart .single_add_to_cart_button {
    min-width: 13rem;
    min-height: 3.25rem;
    padding: 0 1.75rem;
    background-color: #C824A4;
    border: 1px solid #C824A4;
    border-radius: 3px;
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:focus {
    background-color: #A81C89;
    border-color: #A81C89;
    color: #FFFFFF;
}

.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible {
    outline: 2px solid #333333;
    outline-offset: 2px;
}

/* Variable products disable the button until a size is chosen. The theme
   reverts it to a white outline, so it reads as a different and weaker
   control rather than the same one waiting on input. Keep the fill and let
   the inherited opacity carry the inactive state. */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.wc-variation-selection-needed {
    background-color: #C824A4;
    border-color: #C824A4;
    color: #FFFFFF;
    cursor: not-allowed;
}

/* Match the quantity field to the button so the pair reads as one control. */
.woocommerce div.product form.cart .quantity .qty {
    min-height: 3.25rem;
    padding: 0 0.5rem;
    font-size: 1rem;
}

/* --- verification block -------------------------------------------------
   Batch COAs are third-party documents on chromate.org — the most persuasive
   asset on the page, previously buried in a tab. Set in the same monospace
   register as the age gate so the site reads as one documentation system.
   ------------------------------------------------------------------------ */

.pegasus-verify {
    margin: 1.5rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid #E3E3E8;
}

.pegasus-verify__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem 0.75rem;
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.pegasus-verify__row:last-child {
    margin-bottom: 0;
}

.pegasus-verify__label {
    font-family: ui-monospace, SFMono-Regular, Menlo, "Roboto Mono", monospace;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6B6B76;
}

.pegasus-verify__links a {
    font-weight: 600;
    color: #C824A4;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.pegasus-verify__links a:hover {
    color: #A81C89;
}

/* Pending is stated rather than implied — silence reads as "not tested". */
.pegasus-verify__row--pending .pegasus-verify__label {
    color: #8A8A95;
}

.pegasus-verify__note {
    color: #6B6B76;
}

.pegasus-verify__row--stock {
    font-weight: 600;
    color: #1F7A4D;
}

@media (max-width: 767px) {
    .woocommerce div.product .woocommerce-product-gallery {
        width: 100%;
        max-width: 100%;
    }

    .woocommerce div.product form.cart .single_add_to_cart_button {
        min-width: 0;
        width: 100%;
    }

    .woocommerce div.product .summary p.price {
        font-size: 1.75rem;
    }
}

/* ==========================================================================
   8. Cart & checkout
   ========================================================================== */

/* ==========================================================================
   9. Footer
   ========================================================================== */