/* =============================================================================
   Not Just a Patch — Single Product Page
   File: assets/css/single-product.css
   Enqueue on is_product() only (see functions.php snippet at the bottom of
   the README in this delivery, or add the enqueue hook to your theme).
   ============================================================================= */

/* --- Design tokens -------------------------------------------------------- */
.njp-product {
    --njp-pink:        #E53C76;
    --njp-pink-dark:   #e01e6c;
    --njp-cyan:        #6bd3e8;
    --njp-cyan-soft:   #a7e3ee;
    --njp-black:       #000;
    --njp-ink:         #0e0e0e;
    --njp-ink-soft:    #2a2a2a;
    --njp-muted:       #6a6a6a;
    --njp-line:        #e6e6e6;
    --njap-light-gray: #FAFAFA;
    --njp-bg:          #ffffff;
    --njp-bg-soft:     #f4f4f4;
    --njp-bg-tint:     #fafafa;
    --njp-radius:      14px;
    --njp-radius-lg:   22px;
    --njp-radius-pill: 999px;
    --njp-shadow:      0 6px 28px rgba(0,0,0,.06);
    --njp-display:     "Open Sans", sans-serif;
    --njp-body:        "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --njp-container:   1200px;
    --njp-gutter:      24px;
    --njp-reel-item-w: 180px;
    --njp-reel-item-h: calc(var(--njp-reel-item-w) * 16 / 9); /* 320px */
}

.njp-section-title {
    font-family: var(--njp-display);
    font-weight: 400;
    font-size: clamp(20px, 4.5vw, 32px);
    line-height: 1.15;
    margin: 0 0 18px;
    letter-spacing: -.01em;
}

/* Smaller variant — for inline section titles like "See our CGM patches in real life" */
.njp-section-title--sm {
    font-size: clamp(16px, 3.2vw, 22px);
    margin-bottom: 16px;
}

.njp-section-title--center {
    text-align: center;
}


/* --- Layout helpers ------------------------------------------------------- */
.njp-single-product-wrap { background: var(--njp-bg); color: var(--njp-ink); font-family: var(--njp-body); }
.njp-container { max-width: var(--njp-container); margin: 0 auto; padding: 0 var(--njp-gutter); }

/* --- Promo strip ---------------------------------------------------------- */
.njp-promo-strip {
    background: #fff;
    color: var(--njp-pink);
    text-align: center;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--njp-line);
    text-transform: uppercase;
}

/* =============================================================================
   1. HERO
   ============================================================================= */
.njp-hero { padding: 32px 0 56px; }
.njp-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 48px;
    align-items: flex-start;
}
@media (max-width: 900px) {
    .njp-hero__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* =============================================================================
   GALLERY — WooCommerce single-product gallery
   ============================================================================= */

/* Outer gallery wrapper — hard containment so Flexslider's slides can't
   overflow the viewport on mobile. We let Flexslider manage slide widths
   internally; we just clip at the boundary. */
   .njp-hero__gallery {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* Inner WooCommerce gallery container — visual styling (card + padding) */
.njp-hero__gallery .woocommerce-product-gallery {
    max-width: 100% !important;
    width: 100% !important;
    background: var(--njp-bg-soft);
    border-radius: var(--njp-radius-lg);
    padding: 24px;
    overflow: hidden;
    box-sizing: border-box;
}

@media (max-width: 700px) {
    .njp-hero__gallery .woocommerce-product-gallery {
        padding: 12px;
        border-radius: var(--njp-radius);
    }
}

/* Flexslider viewport — cap width and clip overflow. Do NOT force slide
   widths here; that creates a feedback loop with slider.resize(). */
.njp-hero__gallery .flex-viewport {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Slide images respect the slide width Flexslider sets, and stay responsive */
.njp-hero__gallery .woocommerce-product-gallery__image img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--njp-radius);
}

/* --- Thumbnails ---------------------------------------------------------- */
.njp-hero__gallery .flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 15px;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    list-style: none;
}

@media (max-width: 520px) {
    .njp-hero__gallery .flex-control-thumbs {
        gap: 20px;
    }
}

.njp-hero__gallery .flex-control-thumbs li {
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px;
    margin: 0 !important;
}

.njp-hero__gallery .flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid transparent;
    cursor: pointer;
}

.njp-hero__gallery .flex-control-thumbs li img.flex-active,
.njp-hero__gallery .flex-control-thumbs li img:hover {
    border-color: var(--njp-pink);
}

/* =============================================================================
   SUMMARY COLUMN
   ============================================================================= */

/* Summary column */
.njp-rating-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--njp-ink);
    font-size: 14px;
}
.njp-rating-link__count { color: var(--njp-muted); }

.njp-product-title {
    font-family: var(--njp-display);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.15;
    margin: 12px 0 16px;
    letter-spacing: -.01em;
}

.njp-product-shortdesc {
    color: var(--njp-ink-soft);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 22px;
}
.njp-product-shortdesc p:last-child { margin-bottom: 0; }

.njp-variation-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--njp-ink);
    margin: 0 0 10px;
}

/* =============================================================================
   CART BLOCK — variation swatches, price+qty row, subscribe, CTA, express pay
   ============================================================================= */

/* --- Variation swatches (the "Choose the CGM" pills) --------------------- */
/* Hide the default <select>; we restyle the swatch-plugin output OR fall back
   to styled-up labels. If you're using WooCommerce Variation Swatches, its
   markup will be a <ul class="variable-items-wrapper"> — both are covered. */
/* =============================================================================
   CART BLOCK — final layout
   Row 1: Price (left) + Quantity (right)
   Row 2: Subscribe & save 10%
   Row 3: ADD TO CART (full width pink)
   Row 4: Apple Pay + Link (black pills, 2-col)

   The Woo DOM order is: .price → form.cart (containing .quantity + button)
   → subscribe options injected by plugin. We use flex `order` to rearrange.
   ============================================================================= */

/* --- Variation swatches (the "Choose the CGM" pills) --------------------- */

.stock {
    display: inline-flex;
    flex: 0 0 auto !important;
    text-transform: uppercase;
    color: #fff;
    background: var(--njp-black);
    padding: 5px 30px;
    margin-bottom: 20px;
}

.njp-cart-block .variations { width: 100%; margin: 0 0 24px; border-collapse: collapse; }
.njp-cart-block .variations tr  { display: block; margin-bottom: 14px; }
.njp-cart-block .variations td.label { display: none; }
.njp-cart-block .variations td.value { display: block; padding: 0; }

/* WooCommerce Variation Swatches (free plugin) — button style */
.njp-cart-block .variable-items-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}
@media (max-width: 520px) {
    .njp-cart-block .variable-items-wrapper { grid-template-columns: 1fr; }
}
.njp-cart-block .variable-items-wrapper .variable-item {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 14px 12px !important;
    border: 1.5px solid var(--njp-ink) !important;
    border-radius: var(--njp-radius) !important;
    background: #fff !important;
    color: var(--njp-ink) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-align: center !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background .18s ease, color .18s ease;
}
.njp-cart-block .variable-items-wrapper .variable-item:hover {
    background: var(--njp-bg-soft) !important;
}
.njp-cart-block .variable-items-wrapper .variable-item.selected {
    background: var(--njp-ink) !important;
    color: #fff !important;
    border-color: var(--njp-ink) !important;
}
.njp-cart-block .variable-items-wrapper .variable-item .variable-item-span {
    line-height: 1.2;
}

/* Fallback: if no swatch plugin, restyle the native <select> */
.njp-cart-block .variations select {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--njp-ink);
    border-radius: var(--njp-radius);
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}
.njp-cart-block .reset_variations { display: none !important; }

/* =============================================================================
   Flex layout for the cart block. Children get `order` values so we can
   rearrange the Woo-rendered DOM visually without touching the HTML.
   ============================================================================= */
.njp-cart-block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px;
}

.njp-cart-block > * {
    flex: 0 0 100%;
}

/* --- Row 1a: Price (left) ------------------------------------------------ */


.njp-cart-block > .price,
.njp-cart-block .woocommerce-variation-price {
    order: 1;
    flex: 1 1 auto;
    margin: 0;
    align-self: center;
}
.njp-cart-block .price .woocommerce-Price-amount,
.njp-cart-block .woocommerce-variation-price .woocommerce-Price-amount {
    font-family: var(--njp-display);
    font-size: 36px;
    color: var(--njp-ink);
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 1;
}
.njp-cart-block del .woocommerce-Price-amount { color: var(--njp-muted); font-size: 20px; }
.njp-cart-block ins { background: none; text-decoration: none; }

/* --- form.cart dissolves so its children flow in the parent flex --------- */
.njp-cart-block form.cart {
    display: contents;
}

/* --- Row 1b: Quantity (right of price) ---------------------------------- */
.njp-cart-block form.cart .quantity {
    order: 1;
    flex: 0 0 auto;
    margin-left: auto;
    align-self: center;
}
.njp-cart-block form.cart .quantity::before {
    content: "Quantity";
    font-size: 14px;
    color: var(--njp-muted);
    font-weight: 500;
    margin-right: 20px;
}
.njp-cart-block form.cart .quantity .qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--njp-line);
    overflow: hidden;
    background: #fff;
    border-radius: var(--njp-radius);
}
.njp-cart-block form.cart .quantity .qty-stepper button {
    width: 38px;
    height: 42px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 18px;
    color: var(--njp-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}
.njp-cart-block form.cart .quantity .qty-stepper button:hover { color: var(--njp-pink); }
.njp-cart-block form.cart .quantity input.qty {
    width: 48px;
    height: 42px;
    border: 0;
    background: transparent;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    padding: 0;
    -moz-appearance: textfield;
}
.njp-cart-block form.cart .quantity input::-webkit-outer-spin-button,
.njp-cart-block form.cart .quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

.woocommerce-product-details__short-description {
    border-bottom: 1px solid var(--njp-line);
    padding-bottom: 40px;
}

/* On mobile, quantity drops to its own row below price */
@media (max-width: 520px) {
    .njp-cart-block form.cart .quantity {
        order: 2;
        margin-left: 0;
    }
}


/* --- Row 3: Subscribe & save 10% --------------------------------------- */
.njp-cart-block .wcsatt-options-wrapper,
.njp-cart-block .wcsatt-add-to-subscription-wrapper,
.njp-cart-block .wcsatt-options-product-wrapper,
.njp-cart-block .woocommerce-product-add-on {
    order: 3;
    flex: 0 0 100%;
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid var(--njp-line);
    font-size: 14px;
}

/* Heading "Subscribe and save 10%" */
.njp-cart-block .wcsatt-options-prompt-text-label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--njp-ink);
    margin-bottom: 10px;
}

/* The two radio rows (Purchase one time / Subscribe and save 10%) */
.njp-cart-block .wcsatt-options-prompt-radios {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}
.njp-cart-block .wcsatt-options-prompt-radio {
    margin: 0;
}
.njp-cart-block .wcsatt-options-prompt-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--njp-ink);
    line-height: 1.4;
}
.njp-cart-block .wcsatt-options-prompt-action-input {
    accent-color: var(--njp-pink);
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 16px;
}
.njp-cart-block .wcsatt-sub-discount {
    font-weight: 700;
    color: var(--njp-pink);
}

/* The expanded subscription frequency dropdown (shown when "Subscribe" is selected) */
.njp-cart-block .wcsatt-options-product-wrapper {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--njp-line);
}
.njp-cart-block .wcsatt-options-product-dropdown-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--njp-muted);
}
.njp-cart-block .wcsatt-options-product-dropdown {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--njp-line);
    border-radius: var(--njp-radius);
    background: #fff;
    font-family: inherit;
    font-size: 14px;
}

/* Variation buttons (JS-generated from the <select>) */
.njp-cart-block .njp-variation-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
}
@media (max-width: 520px) {
    .njp-cart-block .njp-variation-buttons { grid-template-columns: 1fr; }
}
.njp-cart-block .njp-variation-btn {
    width: 100%;
    min-width: 160px;
    padding: 14px 12px;
    border: 1.5px solid var(--njp-ink);
    background: #fff;
    color: var(--njp-ink);
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.njp-cart-block .njp-variation-btn:hover:not(:disabled) {
    background: var(--njp-bg-soft);
}
.njp-cart-block .njp-variation-btn.selected {
    background: var(--njp-ink);
    color: #fff;
    border-color: var(--njp-ink);
}
.njp-cart-block .njp-variation-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}
/* END Variation buttons (JS-generated from the <select>) */

.njp-cart-block:has(.woocommerce-variation-price .woocommerce-Price-amount) > .price {
    display: none;
}


/* --- Row 3: ADD TO CART (full-width pink) ------------------------------- */
.njp-cart-block form.cart button.single_add_to_cart_button,
.njp-cart-block form.cart .single_add_to_cart_button {
    order: 4;
    display: block;
    width: 100%;
    background: var(--njp-pink);
    color: #fff;
    border-radius: 0;
    border: 0;
    padding: 11px 14px;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: .08em;
    cursor: pointer;
    transition: background .18s ease;
    font-family: inherit;
    margin-bottom: 20px;
}
.njp-cart-block form.cart button.single_add_to_cart_button:hover {
    background: var(--njp-pink-dark);
}

/* --- Row 4: Express pay (Apple Pay + Link) ------------------------------ */
.njp-cart-block .wc-stripe-payment-request-button-wrapper,
.njp-cart-block #wc-stripe-payment-request-button,
.njp-cart-block .wc-stripe-product-checkout-container,
.njp-cart-block #wcpay-payment-request-button,
.njp-cart-block .wcpay-payment-request-wrapper {
    order: 5;
    margin: 0;
}

/* Force the express buttons into a 2-column grid */
.njp-cart-block .wc-stripe-product-checkout-container > *,
.njp-cart-block .wcpay-payment-request-wrapper > * {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

/* Style each express button as a black pill */
.njp-cart-block .StripeElement,
.njp-cart-block .wc-stripe-payment-request-button-wrapper iframe,
.njp-cart-block .apple-pay-button,
.njp-cart-block .gpay-button {
    height: 54px !important;
    border-radius: var(--njp-radius) !important;
    background: var(--njp-ink) !important;
    overflow: hidden;
}

/* --- Shipping info — sits below ADD TO CART (Row 5) -------------------- */
.njp-cart-block .product-shipping-info {
    order: 5;
    margin: 0;
}
.njp-cart-block .product-shipping-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}
.njp-cart-block .product-shipping-info li {
    position: relative;
    padding-left: 36px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--njp-ink);
}
.njp-cart-block .product-shipping-info li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid #2ec27e;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5l3.5 3.5 7-8' stroke='%232ec27e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
}
.njp-cart-block .product-shipping-info strong {
    font-weight: 700;
}

.njp-cart-block .single_variation_wrap,
.njp-cart-block .single_variation,
.njp-cart-block .woocommerce-variation-add-to-cart {
    display: contents;
}

/* Variation price — same row as quantity */
.njp-cart-block .woocommerce-variation-price {
    order: 1;
    flex: 1 1 auto;
    margin: 0;
    align-self: center;
}
.njp-cart-block .woocommerce-variation-price .price {
    margin: 0;
    display: block;
}
.njp-cart-block .woocommerce-variation-price .woocommerce-Price-amount {
    font-family: var(--njp-display);
    font-size: 36px;
    color: var(--njp-ink);
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 1;
}

/* Hide the empty variation description and availability rows
   (they're empty when the variation has no description/extra info) */
.njp-cart-block .woocommerce-variation-description:empty,
.njp-cart-block .woocommerce-variation-availability:empty {
    display: none;
}

/* If they DO have content, give them a full row outside the price row */
.njp-cart-block .woocommerce-variation-description,
.njp-cart-block .woocommerce-variation-availability {
    flex: 0 0 100%;
    font-size: 13px;
    color: var(--njp-muted);
    order: 0;
}



/* --- Shipping perks (the bulleted list under cart) ----------------------- */
.njp-perks {
    list-style: none;
    padding: 0;
    margin: 24px 0 22px;
    display: grid;
    gap: 12px;
}
.njp-perks__item {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    color: var(--njp-ink);
    line-height: 1.4;
}
.njp-perks__check {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid #2ec27e;
    color: #2ec27e;
    display: flex;
    align-items: center;
    justify-content: center;
}
.njp-perks__check svg { width: 14px; height: 14px; }

/* =============================================================================
   TRUST BADGES
   ============================================================================= */
   .njp-badges {
    background: var(--njap-light-gray);
    list-style: none;
    margin: 0 0 18px;
    padding: 60px;
    border-radius: var(--njp-radius);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 60px;
    box-sizing: border-box;
}

/* Tablet — looser breakpoint, tighter spacing */
@media (max-width: 900px) {
    .njp-badges {
        padding: 40px;
        gap: 32px;
    }
}

/* Mobile — keep 3 columns but tighten significantly */
@media (max-width: 520px) {
    .njp-badges {
        padding: 24px 16px;
        gap: 20px 12px;
    }
}

.njp-badges__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--njp-ink);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
    text-align: center;
}

.njp-badges__shape {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 520px) {
    .njp-badges__shape {
        width: 56px;
        height: 56px;
    }
}

.njp-badges__shape img {
    max-width: 100%;
    height: auto;
}

.njp-badges__label {
    font-size: 14px;
    font-weight: 500;
    color: var(--njp-ink);
    line-height: 1.3;
}

@media (max-width: 520px) {
    .njp-badges__label {
        font-size: 12px;
    }
}

/* =============================================================================
   STILL HAVE QUESTIONS
   ============================================================================= */

/* Still have questions — heading + two icon-link cards */
.njp-still-questions {
    margin-top: 18px;
}
.njp-still-questions__title {
    font-size: 24px;
    font-weight: 600;
    color: var(--njp-ink);
    margin: 0 0 14px;
}
.njp-still-questions__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
}
@media (max-width: 520px) {
    .njp-still-questions__grid { grid-template-columns: 1fr; }
}
.njp-help-card {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--njp-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.njp-help-card__icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    color: var(--njp-ink);
}
.njp-help-card__icon svg { width: 100%; height: 100%; display: block; }
.njp-help-card__text { 
    font-weight: 500;
    font-size: 14px;
    color: var(--njp-ink);
    line-height: 1.3;
    flex: 1; 
}

/* =============================================================================
   2. ROW SPLIT — video reel + color options
   ============================================================================= */
/* =============================================================================
   UGC video reel — horizontal scroll-snap carousel with click-to-play facades
   ============================================================================= */

.njp-row-split {
    margin-bottom: 60px;
}

.njp-row-split__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 40px;
}
@media (max-width: 900px) {
    .njp-row-split__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

.njp-reel {
    min-width: 0;
}

.njp-reel__carousel {
    position: relative;
    min-width: 0;
    margin-bottom: 40px;
    padding: 4px 0;
}

.njp-reel__track {
    display: flex;
    gap: 26px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    /* hide scrollbar */
    scrollbar-width: none;
    min-width: 0;
}
.njp-reel__track::-webkit-scrollbar { display: none; }

.njp-reel__item {
    flex: 0 0 auto;
    width: var(--njp-reel-item-w);
    aspect-ratio: 9 / 16;
    border-radius: var(--njp-radius);
    overflow: hidden;
    background: #000;
    scroll-snap-align: start;
    position: relative;
}
@media (max-width: 520px) {
    .njp-reel__item { 
        width: 42%;
        max-width: 160px; 
    }
}

.njp-reel__fullscreen {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    z-index: 2;
    transition: background 0.18s ease, transform 0.18s ease;
}

.njp-reel__fullscreen:hover,
.njp-reel__fullscreen:focus-visible {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
    outline: none;
}

.njp-reel__fullscreen svg {
    display: block;
}

/* Hide on touch devices since fullscreen on iframe is unreliable on iOS Safari */
@media (hover: none) {
    .njp-reel__fullscreen {
        display: none;
    }
}

/* Facade button (poster + play icon) */
.njp-reel__play {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: #000;
    cursor: pointer;
    position: relative;
}
.njp-reel__play img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease, opacity .2s ease;
}
.njp-reel__play:hover img { transform: scale(1.04); opacity: .9; }
.njp-reel__play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}

/* Mounted iframe replaces the facade */
.njp-reel__item iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Nav arrows */
.njp-reel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: #000;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .18s ease, opacity .18s ease;
}
.njp-reel__nav:hover { background: var(--njp-pink); }
.njp-reel__nav--prev { left: 8px; }
.njp-reel__nav--next { right: 32px; }
.njp-reel__nav[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 520px) {
    .njp-reel__nav { display: none; } /* rely on touch scroll on mobile */
}

.njp-reel__placeholder {
    text-align: center;
    border-radius: var(--njp-radius);
    color: var(--njp-muted);
    font-size: 13px;
}
.njp-reel__placeholder { background: #fff; padding: 2px 6px; border-radius: 4px; }

/* =============================================================================
   3. FEATURE BLOCK
   ============================================================================= */

.njp-feature__grid {
    background: var(--njp-bg-soft);
    border-radius: var(--njp-radius-lg);
    margin: auto;
    padding: 60px 40px;

}
.njp-feature__grid{
    background: var(--njp-bg-soft);
    border-radius: var(--njp-radius-lg);
}

@media (max-width: 700px) { .njp-feature { margin: 0 0 48px; border-radius: 0; padding: 40px 20px; } }
.njp-feature__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 56px;
    align-items: center;
}
@media (max-width: 900px) { .njp-feature__grid { grid-template-columns: 1fr; gap: 32px; } }
.njp-feature__media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--njp-radius);
}
.njp-feature__intro {
    font-size: 15px;
    line-height: 1.65;
    color: var(--njp-ink-soft);
    margin: 0 0 28px;
    max-width: 52ch;
}
.njp-feature__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.njp-feature__details > summary {
    /* Hide the default disclosure triangle in all browsers */
    list-style: none;
    &::-webkit-details-marker {
        display: none;
    }
}

.njp-feature__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    cursor: pointer;
    user-select: none;
    /* Focus ring for keyboard users */
    outline-offset: 4px;
}

.njp-feature__summary:hover .njp-feature__text {
    color: var(--njp-pink, #ff2a7f);
}

.njp-feature__plus {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--njp-pink, #ff2a7f);
    font-size: 36px;
    font-weight: 500;
    line-height: 1;
    transition: transform 0.2s ease;
}

/* Rotate the + to × when the details is open */
.njp-feature__details[open] .njp-feature__plus {
    transform: rotate(45deg);
}

.njp-feature__text {
    flex: 1 1 auto;
    font-size: 15px;
    line-height: 1.4;
    color: var(--njp-ink, #0e0e0e);
    transition: color 0.2s ease;
}

/* Description wrapper — the grid that animates */
.njp-feature__description-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

/* Inner description — content lives here, clipped by the grid track */
.njp-feature__description {
    overflow: hidden;
    min-height: 0;
    /* Padding, colors, and typography stay on the inner element so they
       don't interfere with the grid's track sizing */
    padding: 0 0 16px 36px;
    color: var(--njp-ink, #0e0e0e);
    font-size: 14px;
    line-height: 1.6;
    opacity: 0;
    transition: opacity 0.25s ease 0.05s;
}

.njp-feature__description p {
    margin: 0 0 8px;
}

.njp-feature__description p:last-child {
    margin-bottom: 0;
}

/* Open state — expand the grid track and fade in the text */
.njp-feature__details[open] .njp-feature__description-wrap {
    grid-template-rows: 1fr;
}

.njp-feature__details[open] .njp-feature__description {
    opacity: 1;
}

/* =============================================================================
   4. AIR vs ORIGINAL comparison
   ============================================================================= */

@media (max-width: 800px) {
    .njp-compare { padding: 20px 0 72px; }
}
@media (min-width: 801px) {
    .njp-compare { padding: 110px 0 72px; }
}
.njp-compare__header { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.njp-compare__sub {
    color: var(--njp-muted);
    font-size: 15px;
    margin: 0;
}
.njp-compare__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}
@media (max-width: 800px) { .njp-compare__grid { grid-template-columns: 1fr; } }

.njp-compare__card {
    position: relative;
    padding: 44px 36px 40px;
    overflow: hidden;
    color: #fff;
    min-height: 460px;
    display: flex;
    flex-direction: column;
}

@media (max-width: 800px) {
    .njp-compare__card--air,
    .njp-compare__card--original { 
        border-radius: var(--njp-radius-lg);
    }
    .njp-compare__card--air {
        margin-bottom: 20px;
    }
}

@media (min-width: 801px) {
    .njp-compare__card--air      { 
        border-radius: var(--njp-radius-lg) 0  0 var(--njp-radius-lg);
    }
    .njp-compare__card--original {     
        border-radius: 0 var(--njp-radius-lg) var(--njp-radius-lg) 0;
    }
}
.njp-compare__card--air      { 
    background: var(--njp-cyan);
}
.njp-compare__card--original { 
    background: var(--njp-pink); 
}

.njp-compare__visual {
    display: flex;
    align-items: center;
    gap: 16px;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    position: static; /* override the absolute positioning */
    top: auto;
    right: auto;
    overflow: visible;
}
@media (max-width: 800px) {
    .njp-compare__visual {
        flex-direction: column;
    }
}
.njp-compare__visual img {
    width: 220px;        /* whatever size fits your card */
    height: 220px;
    object-fit: contain; /* or cover, depending on the image */
    flex: 0 0 auto;
    border-radius: var(--njp-radius); /* soft rounded corners on the image */
}

.njp-compare__visual-label {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .12em;
    position: static; /* override any absolute positioning */
    text-transform: uppercase;
}
.njp-compare__title {
    font-weight: 600;
    font-size: 26px;
    margin: 32px 0 8px;
    position: relative;
    z-index: 2;
}

.njp-compare__card--air .njp-compare__title {
    color: #000;
}
.njp-compare__card--original .njp-compare__title {
    color: #fff;
}

.njp-compare__tagline {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 24px;
    position: relative;
    z-index: 2;
}
.njp-compare__list { list-style: none; padding: 0; margin: 0; position: relative; z-index: 2; }
.njp-compare__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    margin-bottom: 10px;
    font-size: 13.5px;
    line-height: 1.5;
}

.njp-compare__list li::before {
    content: "";
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    background-size: contain;
}
.njp-compare__card--air {
    color: #000;
}
.njp-compare__card--original {
    color: #fff;
}

.njp-compare__card--air .njp-compare__list li::before {
    background-image: url("../img/single-product/njap-bullet-black.svg");
}
.njp-compare__card--original .njp-compare__list li::before {
    background-image: url("../img/single-product/njap-bullet-white.svg");
}

.njp-compare__list li:last-child { margin-bottom: 0; }
.njp-compare__list strong {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
    font-weight: 700;
}



/* =============================================================================
   5. CUSTOMER QUOTE
   ============================================================================= */
.njp-quote { padding: 24px 0 64px; }
.njp-quote__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
@media (max-width: 800px) {
    .njp-quote__grid { grid-template-columns: 1fr; gap: 28px; }
    .njp-quote__media { order: -1; }
}
.njp-quote__stars { color: var(--njp-pink); display: flex; gap: 4px; margin-bottom: 18px; }
.njp-quote__stars svg { width: 22px; height: 22px; }
.njp-quote__text {
    font-family: var(--njp-display);
    font-weight: 600;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.35;
    margin: 0 0 24px;
    color: var(--njp-ink);
    quotes: none;
}
.njp-quote__cite { font-style: normal; display: block; }
@media (max-width: 800px) {
    .njp-quote__name {
        font-size: 18px;
    }
}
@media (min-width: 801px) {
    .njp-quote__name {
        font-size: 24px;
    }
}
.njp-quote__name { display: block; font-weight: 500; }
.njp-quote__role { display: block; font-size: 14px; color: var(--njp-muted); margin-top: 2px; }
.njp-quote__media img {
    width: 100%;
    height: auto;
    border-radius: var(--njp-radius-lg);
    display: block;
}

/* =============================================================================
   6. FAQs
   ============================================================================= */
.njp-faqs {
    background: var(--njp-bg-soft);
    padding: 64px 0;
}
.njp-faqs__inner { max-width: 980px; }
.njp-faqs__list { display: grid; gap: 0; }
.njp-faq {
    border-bottom: 1px solid var(--njp-line);
}
.njp-faq:first-of-type { border-top: 1px solid var(--njp-line); }
.njp-faq__q {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 22px 0;
    font-weight: 600;
    font-size: 15px;
    color: var(--njp-ink);
}
.njp-faq__q::-webkit-details-marker { display: none; }
.njp-faq__qtext { flex: 1; }
.njp-faq__icon {
    width: 28px; height: 28px;
    border: 1.5px solid var(--njp-ink);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 28px;
    transition: transform .25s ease, background .25s ease, color .25s ease;
}
.njp-faq__icon svg { width: 12px; height: 12px; }
.njp-faq[open] .njp-faq__icon {
    background: var(--njp-pink);
    border-color: var(--njp-pink);
    color: #fff;
    transform: rotate(45deg);
}
.njp-faq__a {
    padding: 0 0 22px;
    color: var(--njp-ink-soft);
    font-size: 14.5px;
    line-height: 1.65;
    max-width: 72ch;
}
.njp-faq__a p:last-child { margin-bottom: 0; }

/* =============================================================================
   7. REVIEWS
   ============================================================================= */
.njp-reviews { padding: 72px 0 96px; }
.njp-reviews__summary {
    display: flex; justify-content: flex-start;
    margin: 0 0 28px;
}
.njp-reviews__score {
    display: flex; align-items: center; gap: 16px;
    background: #fff;
    border: 1px solid var(--njp-line);
    border-radius: var(--njp-radius);
    padding: 14px 20px;
}
.njp-reviews__avg {
    font-family: var(--njp-display);
    font-size: 36px;
    line-height: 1;
    color: var(--njp-ink);
}
.njp-reviews__based { font-size: 12px; color: var(--njp-muted); }

/* Restyle the native WooCommerce review list */
.njp-reviews .woocommerce-Reviews-title { display: none; } /* we have our own h2 */
.njp-reviews .commentlist {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 18px;
}
.njp-reviews .commentlist li.review,
.njp-reviews .commentlist li.comment {
    background: #fff;
    border: 1px solid var(--njp-line);
    border-radius: var(--njp-radius);
    padding: 20px 22px;
    list-style: none;
}
.njp-reviews .commentlist li .comment_container { display: flex; gap: 14px; }
.njp-reviews .commentlist li img.avatar {
    width: 44px; height: 44px; border-radius: 50%;
    position: static !important;
    padding: 0 !important;
    border: 1px solid var(--njp-line);
}
.njp-reviews .commentlist .comment-text {
    border: 0; padding: 0; margin: 0; background: transparent;
    width: 100%;
}
.njp-reviews .commentlist .meta {
    font-size: 13px; color: var(--njp-muted);
    margin: 0 0 6px;
}
.njp-reviews .commentlist .meta strong { color: var(--njp-ink); font-weight: 700; }
.njp-reviews .star-rating { color: var(--njp-pink); }
.njp-reviews .description { font-size: 14.5px; line-height: 1.6; color: var(--njp-ink); }

/* Review form */
.njp-reviews #review_form_wrapper {
    margin-top: 32px;
    background: #fff;
    border: 1px solid var(--njp-line);
    border-radius: var(--njp-radius);
    padding: 24px;
}
.njp-reviews #review_form .comment-reply-title {
    font-family: var(--njp-display);
    font-size: 22px;
    font-weight: 400;
    margin: 0 0 16px;
}
.njp-reviews #review_form textarea,
.njp-reviews #review_form input[type="text"],
.njp-reviews #review_form input[type="email"] {
    width: 100%;
    border: 1.5px solid var(--njp-line);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    margin-top: 6px;
}
.njp-reviews #review_form .form-submit input {
    background: var(--njp-pink);
    color: #fff;
    border: 0;
    border-radius: var(--njp-radius-pill);
    padding: 12px 28px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 13px;
    cursor: pointer;
}
.njp-reviews #review_form .form-submit input:hover { background: var(--njp-pink-dark); }

/* =============================================================================
   Accessibility & small touches
   ============================================================================= */
.njp-product :focus-visible {
    outline: 2px solid var(--njp-pink);
    outline-offset: 2px;
    border-radius: 4px;
}
.njp-product img { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .njp-product *, .njp-product *::before, .njp-product *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}


/* =============================================================================
   Product Recommendations — horizontal scroll-snap carousel
   ============================================================================= */
   .product-recommendations {
    position: relative;
    margin: 0;
}

/* Make the <ul> the scroll track */
.product-recommendations ul.products {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0;
}
.product-recommendations ul.products::-webkit-scrollbar { display: none; }

/* Each card — fixed-width flex item, snaps to start. 2 visible at a time. */
.product-recommendations li.product {
    list-style: none;
    flex: 0 0 calc((100% - 16px) / 2); /* 2 visible, one 16px gap between */
    min-width: 0;
    height: var(--njp-reel-item-h);
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid var(--njp-line);
    border-radius: var(--njp-radius);
    padding: 20px 6px;
    margin: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: auto !important;       /* override Woo's percentage widths */
    float: none !important;
    text-align: left;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
@media (max-width: 520px) {
    .product-recommendations li.product { flex: 0 0 75%; } /* mobile: ~1 visible with peek */
}

.product-recommendations li.product:hover {
    border-color: var(--njp-ink);
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
    transform: translateY(-2px);
}

/* Main link wrapping image, title, price */
.product-recommendations li.product > a.woocommerce-loop-product__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--njp-ink);
    flex: 1;
}

/* Image */
.product-recommendations li.product img {
    width: 80%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    background: var(--njp-bg-soft);
}

/* Title */
.product-recommendations .woocommerce-loop-product__title {
    display: flex;
    flex-direction: column;
    font-family: var(--njp-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--njp-ink);
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 6px;
    margin: 0;
}

/* Variation subtitle (e.g. "Dexcom") */
.product-recommendations .variation-subtitle {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--njp-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 4px;
}

/* Price — handle nested .price wrappers from variation cards */
.product-recommendations li.product .price,
.product-recommendations li.product .price .price {
    font-family: var(--njp-display);
    font-size: 18px;
    color: var(--njp-ink);
    font-weight: 400;
    padding: 0;
    display: inline-block;
}
.product-recommendations li.product > a .price {
    padding: 0 8px;
    display: block;
    font-weight: 600;
}
.product-recommendations li.product .price del .woocommerce-Price-amount {
    color: var(--njp-muted);
    font-size: 14px;
}
.product-recommendations li.product .price ins {
    background: none;
    text-decoration: none;
}

/* "Select options" / "Add to cart" button */
.product-recommendations li.product .button.add_to_cart_button {
    display: block;
    background: var(--njp-pink);
    color: #fff;
    border: 0;
    border-radius: var(--njp-radius-pill);
    padding: 10px 16px;
    font-family: inherit;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease;
}
.product-recommendations li.product .button.add_to_cart_button:hover {
    background: var(--njp-pink-dark);
    color: #fff;
}

/* Hide a11y description */
.product-recommendations .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* Arrow nav (injected by JS) */
.product-recommendations__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    color: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}
.product-recommendations__nav:hover { background: var(--njp-pink); }
.product-recommendations__nav svg { width: 18px; height: 18px; }
.product-recommendations__nav--prev { left: 8px; }
.product-recommendations__nav--next { right: 8px; }
.product-recommendations__nav[disabled] {
    opacity: 0;
    pointer-events: none;
}
@media (max-width: 520px) {
    .product-recommendations__nav { display: none; } /* mobile: native swipe */
}

.product-recommendations__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 6px;
}
.product-recommendations li.product .product-recommendations__content .price {
    font-family: var(--njp-display);
    font-size: 18px;
    color: var(--njp-ink);
    font-weight: 600;
    padding: 0;
}

/* Optional css loading indicator for the add to cart button */
.njp-variation-add-to-cart.loading {
    opacity: 0.6;
    pointer-events: none;
}

.njp-variation-add-to-cart.loading::after {
    content: "…";
    margin-left: 4px;
}

.njp-variation-add-to-cart.added {
    background: #2ec27e !important;
    color: #fff !important;
}

.njp-variation-add-to-cart.added::after {
    content: " ✓";
}