/* ============================================================================
 * Pro Peptide · Combined Cart + Checkout
 * v8.0 (2026-05-31) — Single-card checkout. ONE narrow (620px) rounded card
 *   holds "Contact & Shipping" (top) and "Order & Payment" (bottom), split by
 *   a dotted divider. Coupon sits under the item list; payment renders as a
 *   bordered info box (the single Interac gateway, radio hidden). Matches the
 *   approved Checkout mockup. Replaces the v7 two-block layout.
 * Theme handles header/nav/footer. All WC wiring (AJAX qty, coupon, totals,
 * gateway) is untouched — this file is presentation only.
 * ============================================================================ */

/* ───── 1. Suppress WC + plugin clutter ───── */

.woocommerce-checkout .entry-header,
.woocommerce-checkout .page-header,
.woocommerce-checkout > h1.entry-title,
.woocommerce-checkout .yith-ywpar-message,
.woocommerce-checkout .ywpar_message,
.woocommerce-checkout .wc_points_redeem_earn_points,
.woocommerce-checkout .ywpar-points-message-cart,
.woocommerce-checkout .woocommerce-notices-wrapper:empty,
.woocommerce-checkout > .woocommerce-message,
.woocommerce-checkout form.checkout > .woocommerce-message,
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-billing-fields > h3 {
    display: none !important;
}

/* ───── 2. Page wrapper ───── */

.pp-checkout {
    font-family: 'Montserrat', system-ui, sans-serif;
    color: #343434;
    width: 100%;
    box-sizing: border-box;
}

/* ───── 3. Trust strip ───── */

/* A) Trust badges — centered row directly under the subtitle. */
.pp-checkout-trust-strip {
    padding: 0;
    margin: 2px 0 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pp-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
}

.pp-trust-item svg { color: #0e6a99; }

.pp-trust-divider { color: #d1d5db; font-size: 10px; }

.pp-trust-disclaimer { font-size: 11px; color: #6b7280; font-style: italic; }

/* ───── 4. Page title (centered) ───── */

/* This is the page's main headline (h1) now that the site-wide banner is
 * suppressed on checkout — sized to carry that role. */
.pp-checkout-header {
    margin: 8px 0 12px;
    text-align: center;
}

.pp-checkout-page-title {
    font-size: clamp(32px, 4.5vw, 44px);
    font-weight: 700;
    color: #343434;
    margin: 0;
    letter-spacing: -0.6px;
    line-height: 1.1;
    text-align: center;
}

.pp-checkout-page-title .accent { color: #1f9edb; }

.pp-checkout-page-sub {
    margin: 8px 0 0;
    font-size: 14px;
    color: #6b7280;
    text-align: center;
}

/* ───── 5. Single card shell ───── */

.pp-checkout-body--single {
    display: block;
    max-width: 620px;
    margin: 0 auto;
    padding: 0 20px 56px;
}

/* CORRECTED (no cards): both sections float on a WHITE page — no border, no
   shadow, no card background. A single 1px #EEE rule separates them. Generous
   vertical rhythm; ~8px inner side padding so fields aren't edge-to-edge. The
   inner field boxes keep their own borders. */
.pp-checkout-card {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.pp-checkout-card .pp-form-top,
.pp-checkout-card .pp-order-card {
    background: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 8px;
}
.pp-checkout-card .pp-form-top { margin: 0; }

/* Inner blocks chromeless. */
.pp-checkout-card .pp-billing,
.pp-checkout-card .pp-additional {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
}
.pp-checkout-card .pp-additional { margin-top: 18px; }

/* Section titles — 600/16px, NO divider under. */
.pp-checkout-card .pp-block-heading {
    font-size: 16px;
    font-weight: 600;
    color: #343434;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    display: block;
    text-align: left;
    letter-spacing: -0.2px;
}

/* The single section divider — one thin 1px #EEE rule. */
.pp-card-divider {
    border: 0;
    border-top: 1px solid #EEEEEE;
    margin: 28px 0;
    height: 0;
}

/* Borderless review wrapper (kills legacy v3 #order_review card chrome). */
.pp-checkout #order_review,
.pp-checkout .woocommerce-checkout-review-order {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* ───── 6. Billing field grid ───── */

/* 6-col grid: paired fields span 3; wide fields span all 6; the
 * City | Province | Postal trio each span 2. */
.pp-form-top .woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}
.pp-form-top .woocommerce-billing-fields__field-wrapper .form-row {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: span 3;
}
.pp-form-top .woocommerce-billing-fields__field-wrapper .form-row-wide,
.pp-form-top .woocommerce-billing-fields__field-wrapper .notes,
.pp-form-top .woocommerce-billing-fields__field-wrapper #billing_country_field {
    grid-column: 1 / -1;
}
/* Street address (wide, ~1fr) + Unit # (narrow, ~100px) share one row. ID
 * selectors beat the .form-row-wide class these fields also carry. */
.pp-form-top .woocommerce-billing-fields__field-wrapper #billing_address_1_field {
    grid-column: span 5;
}
.pp-form-top .woocommerce-billing-fields__field-wrapper #billing_address_2_field {
    grid-column: span 1;
}
/* Keep the "Unit #" label one short line in its narrow box (hide WC's
 * "(optional)" suffix here only — the field is clearly optional). */
.pp-form-top #billing_address_2_field label .optional { display: none; }
.pp-form-top .woocommerce-billing-fields__field-wrapper #billing_city_field,
.pp-form-top .woocommerce-billing-fields__field-wrapper #billing_state_field,
.pp-form-top .woocommerce-billing-fields__field-wrapper #billing_postcode_field {
    grid-column: span 2;
}
.pp-form-top .woocommerce-billing-fields__field-wrapper input,
.pp-form-top .woocommerce-billing-fields__field-wrapper select,
.pp-form-top .woocommerce-billing-fields__field-wrapper .select2-selection {
    width: 100% !important;
    box-sizing: border-box;
}

.pp-form #billing_country_field { display: none; }

/* ───── 7. WC form fields ───── */

.pp-form .form-row {
    margin: 0 0 12px;
    padding: 0;
}

.pp-form .form-row label,
.pp-form-top label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    margin: 0 0 5px;
}

.pp-form .form-row .required {
    color: #ef4444;
    text-decoration: none;
}

.pp-form .form-row .input-text,
.pp-form .form-row select,
.pp-form .form-row .select2-selection--single {
    width: 100%;
    height: 42px;
    border-radius: 9px;
    border: 1px solid #E5E7EB;
    padding: 0 11px;
    font-size: 14px;
    font-family: inherit;
    color: #343434;
    background: #ffffff;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pp-form .form-row .input-text:focus,
.pp-form .form-row select:focus {
    border-color: #1f9edb;
    box-shadow: 0 0 0 3px rgba(31, 158, 219, 0.12);
}

.pp-form .form-row textarea {
    width: 100%;
    min-height: 72px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #343434;
    background: #ffffff;
    outline: none;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pp-form .form-row textarea:focus {
    border-color: #1f9edb;
    box-shadow: 0 0 0 3px rgba(31, 158, 219, 0.12);
}

/* ───── 8. Order item rows (flat: thumb | name | stepper | price | × ) ───── */

.pp-order-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pp-order-item {
    display: grid;
    grid-template-columns: 48px 1fr auto auto auto;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f3f4f6;
}
.pp-order-item:first-child { padding-top: 0; }
.pp-order-item:last-child { border-bottom: 0; }

.pp-order-item__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: #f7f8fa;
    border: 1px solid #f3f4f6;
}
.pp-order-item__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    display: block;
    margin: 0 !important;
}

.pp-order-item__body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    min-width: 0;
}
.pp-order-item__name {
    font-size: 14px;
    font-weight: 600;
    color: #343434;
    text-decoration: none;
    line-height: 1.3;
}
.pp-order-item__name:hover { color: #0e6a99; }
.pp-order-item__pill {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 5px;
    background: #e8f4fb;
    color: #0e6a99;
    font-size: 10px;
    font-weight: 600;
}

/* Stepper — rectangular (mockup .stepper). */
.pp-order-item__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    overflow: hidden;
    background: #ffffff;
}
.pp-order-item__qty-btn {
    width: 30px;
    height: 30px;
    background: #ffffff;
    border: 0;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.pp-order-item__qty-btn:hover:not([disabled]) { background: #f3f4f6; color: #343434; }
.pp-order-item__qty-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.pp-order-item__qty-btn svg { width: 12px; height: 12px; }
.pp-order-item__qty-value {
    min-width: 34px;
    padding: 0 4px;
    text-align: center;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    font-size: 13px;
    font-weight: 600;
    color: #343434;
    line-height: 30px;
}

.pp-order-item__price {
    font-size: 14px;
    font-weight: 600;
    color: #343434;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
    min-width: 60px;
}
.pp-order-item__price .amount,
.pp-order-item__price bdi { font: inherit; color: inherit; }

.pp-order-item__remove {
    width: 24px;
    height: 24px;
    background: transparent;
    border: 0;
    color: #cbd5e1;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.pp-order-item__remove:hover { color: #ef4444; background: #fef3f2; }
.pp-order-item__remove svg { width: 14px; height: 14px; }

/* ───── 9. Coupon (under items) ───── */

/* C) Coupon — top of the order section, 22px clearance below before items. */
.pp-order-coupon {
    margin: 0 0 22px;
}
.pp-order-coupon__row {
    display: flex;
    gap: 8px;
}
.pp-order-coupon__input {
    flex: 1 1 auto;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #343434;
    font-size: 13px;
    font-family: inherit;
}
.pp-order-coupon__input:focus {
    outline: none;
    border-color: #1f9edb;
    box-shadow: 0 0 0 3px rgba(31, 158, 219, 0.12);
}
.pp-order-coupon__apply {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 18px;
    background: #343434;
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.pp-order-coupon__apply:hover { background: #4a4a4a; }

/* ───── 10. Totals ───── */

.pp-order-totals {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.pp-order-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
    color: #6b7280;
}
.pp-order-row__label { color: #6b7280; }
.pp-order-row__value { color: #343434; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.pp-order-row .amount, .pp-order-row bdi { font: inherit; color: inherit; }
.pp-order-row--bulk,
.pp-order-row--bulk .pp-order-row__label,
.pp-order-row--bulk .pp-order-row__value { color: #4e9c2a; font-weight: 600; }
.pp-order-row--coupon,
.pp-order-row--coupon .pp-order-row__value { color: #4e9c2a; }

.pp-order-row__shipping-value { font-size: 13px; font-weight: 600; color: #343434; }
.pp-order-row__shipping-value ul.pp-shipping-methods,
.pp-order-row__shipping-value ul.woocommerce-shipping-methods {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.pp-order-row__shipping-value label { font-weight: 500; cursor: pointer; }

.pp-order-grand {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
}
.pp-order-grand__label { font-size: 16px; font-weight: 700; color: #343434; }
.pp-order-grand__value {
    font-size: 18px;
    font-weight: 700;
    color: #343434;
    font-variant-numeric: tabular-nums;
}
.pp-order-grand__value .amount,
.pp-order-grand__value bdi { font: inherit; color: inherit; }
.pp-order-grand__currency {
    margin-left: 5px;
    font-size: 11px;
    font-weight: 400;
    color: #6b7280;
    letter-spacing: 0.4px;
}

/* ───── 11. Payment — bordered info box, single gateway ───── */

.pp-order-payment { margin: 0; }
.pp-order-payment__heading {
    font-size: 13px;
    font-weight: 700;
    color: #343434;
    margin: 0 0 10px;
}

.pp-payment-methods {
    list-style: none;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
}
.pp-payment-methods li.payment_method,
.pp-payment-methods li.wc_payment_method {
    margin: 0;
    padding: 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    list-style: none;
}
/* Single gateway — hide the radio, keep it in the DOM so it still submits. */
.pp-payment-methods li.payment_method input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.pp-payment-methods li.payment_method label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #343434;
    cursor: default;
    margin: 0;
}
.pp-payment-methods li.payment_method label img { display: none; }
.pp-payment-methods .payment_box {
    display: block !important;
    margin: 6px 0 0;
    padding: 0;
    background: none;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7280;
}
.pp-payment-methods .payment_box::before { display: none; }
.pp-payment-methods .payment_box p { margin: 0; }

/* ───── 12. Place order ───── */

.pp-order-card .pp-place-order,
.pp-place-order { padding: 0; margin: 20px 0 0; }

.pp-order-card .pp-place-order-btn,
.pp-place-order-btn,
#place_order.pp-place-order-btn {
    width: 100%;
    height: 52px;
    background: #ef4444;
    color: #ffffff;
    border: 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0.1px;
    line-height: 1;
    padding: 0;
    transition: background 0.2s, transform 0.05s;
}
.pp-order-card .pp-place-order-btn:hover,
.pp-place-order-btn:hover { background: #e23b3b; color: #ffffff; }
.pp-place-order-btn:active { transform: translateY(1px); }

.pp-consent,
.pp-order-card .pp-consent {
    font-size: 10px;
    color: #9ca3af;
    text-align: center;
    margin: 12px 0 0;
    line-height: 1.5;
}
.pp-consent strong { color: #6b7280; font-weight: 600; }

/* ───── 13. Cross-sells (slim, below the card) ───── */

.pp-cross-sells {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid #e5e7eb;
}
.pp-cross-sells .pp-block-heading {
    display: block;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    border: 0;
    padding: 0;
    margin: 0 0 4px;
}
.pp-cross-sells .pp-accent { color: #1f9edb; }
.pp-cross-sells-subtitle {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 20px;
    font-style: italic;
    text-align: center;
}
.pp-cross-sells-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* ───── 14. Empty state ───── */

.pp-checkout-empty {
    text-align: center;
    padding: 80px 40px;
}
.pp-checkout-empty h2 {
    font-size: 20px;
    font-weight: 700;
    color: #343434;
    margin: 0 0 8px;
}
.pp-checkout-empty p {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 24px;
}
.pp-checkout-empty-cta {
    display: inline-flex;
    padding: 12px 24px;
    background: #343434;
    color: #fafafa;
    text-decoration: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}

/* ───── 15. Mobile ───── */

@media (max-width: 680px) {
    .pp-checkout-trust-strip { gap: 8px; font-size: 10px; }
    .pp-checkout-page-title { font-size: 24px; }
    .pp-checkout-body--single { padding: 0 12px 40px; }
    .pp-checkout-card .pp-form-top,
    .pp-checkout-card .pp-order-card { padding: 20px; }

    /* Fields stack to one column. */
    .pp-form-top .woocommerce-billing-fields__field-wrapper {
        grid-template-columns: 1fr;
    }
    .pp-form-top .woocommerce-billing-fields__field-wrapper .form-row,
    .pp-form-top .woocommerce-billing-fields__field-wrapper #billing_address_1_field,
    .pp-form-top .woocommerce-billing-fields__field-wrapper #billing_address_2_field,
    .pp-form-top .woocommerce-billing-fields__field-wrapper #billing_city_field,
    .pp-form-top .woocommerce-billing-fields__field-wrapper #billing_state_field,
    .pp-form-top .woocommerce-billing-fields__field-wrapper #billing_postcode_field {
        grid-column: 1 / -1;
    }

    .pp-order-item { gap: 10px; }
    .pp-order-item__name { font-size: 13px; }

    .pp-cross-sells-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
 * v9 (2026-05-31) — two-card redesign additions
 * ========================================================================== */

/* ───── B) Shipping selector — full-width selectable rows ───── */
.pp-shipping-select { margin-top: 20px; }
.pp-shipping-select__heading {
    font-size: 13px;
    font-weight: 700;
    color: #343434;
    margin: 0 0 10px;
}
.pp-ship-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid #E5E7EB;
    border-radius: 9px;
    background: #ffffff;
    cursor: pointer;
    margin-bottom: 6px;
}
.pp-ship-row:last-child { margin-bottom: 0; }
.pp-ship-row__text {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.pp-ship-row__name { font-size: 13px; font-weight: 600; color: #343434; }
.pp-ship-row__cost { font-size: 12px; color: #6b7280; font-variant-numeric: tabular-nums; }
.pp-ship-row__cost .amount, .pp-ship-row__cost bdi { font: inherit; color: inherit; }
.pp-ship-row__radio {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #1f9edb;
    cursor: pointer;
}
/* Selected = server class OR live :checked (instant feedback before AJAX). */
.pp-ship-row.is-selected,
.pp-ship-row:has(.pp-ship-row__radio:checked) {
    border: 1.5px solid #1f9edb;
    background: #E8F4FB;
}
.pp-ship-note { font-size: 12px; color: #6b7280; margin: 0; }

/* ───── E) Summary panel ───── */
.pp-order-summary {
    margin-top: 20px;
    background: #FAFAFA;
    border-radius: 10px;
    padding: 16px;
}
.pp-order-summary .pp-order-grand {
    margin-top: 10px;
    padding-top: 12px;
}
.pp-order-row--shipping-line .pp-order-row__value { font-weight: 600; }

/* ───── D) Dimmed "Credit / Debit Card — Coming soon" placeholder ───── */
.pp-payment-methods { display: flex; flex-direction: column; gap: 8px; }
.pp-payment-soon {
    opacity: 0.55;
    border: 1px dashed #E5E7EB;
    border-radius: 10px;
    padding: 12px 14px;
    list-style: none;
    cursor: not-allowed;
    background: #ffffff;
}
.pp-payment-soon__head { display: flex; align-items: center; gap: 8px; }
.pp-payment-soon__title { font-size: 13px; font-weight: 700; color: #343434; }
.pp-payment-soon__pill {
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 9999px;
    padding: 2px 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.pp-payment-soon__sub { font-size: 12px; color: #6b7280; margin: 4px 0 0; }