/* ============================================================================
   RESUME4PRO — PRODUCT PAGE (single product / digital template)
   ============================================================================
   This is the ONLY stylesheet the single product page needs. It is loaded from
   Modules/Ecommerce/Resources/views/frontend/single_product.blade.php via
   @push('style_section') and nothing else pulls it in.

   Why every class is prefixed .r4p-pt-
   ------------------------------------
   The site loads Bootstrap, custom.css, main.css, app.min.css and services.css
   on every page. Generic names from the original design mockup (.container,
   .btn, .breadcrumb, .features, .pill, .hero) all collide with those, in both
   directions: our rules would leak out, and their rules would leak in and set
   properties we never declared. Prefixing removes the whole class of problem
   instead of fighting specificity. services.css already defines .features, so
   this is not hypothetical.

   Two deliberate exceptions, both required by the backend:
   - .cart-add-btn is NEVER styled here. It is the hook the global add-to-cart
     handler in resources/views/frontend/script.blade.php binds to, so it is
     carried on the buy buttons purely as a behaviour marker.
   - .cart-count is NEVER styled here. That is the real header cart badge
     (.cart_number.cart-count in frontend/templates/layouts/services_cart.blade.php)
     and it belongs to the global header, not to this page.

   The one top-level rule in this file is .r4p-pt-bump, at the very bottom: a
   transient animation class the page JS puts on the header cart badge after a
   successful add. It is namespaced and adds nothing but a keyframe.

   Retint the whole page by editing the tokens on .r4p-pt below. No colour is
   hardcoded anywhere else in this file.
   ========================================================================= */


/* ============================= TOKENS ============================= */
.r4p-pt {
    --r4p-navy:        #0B1240;
    --r4p-navy-2:      #161E5C;
    --r4p-blue:        #2B4DFF;
    --r4p-blue-2:      #007BFC;
    --r4p-white:       #FFFFFF;
    --r4p-surface:     #F3F5FB;
    --r4p-muted:       #8A93B8;
    --r4p-border:      #E3E7F5;
    --r4p-ink:         #1B2140;
    --r4p-green:       #17A465;
    --r4p-gold:        #F5A623;
    --r4p-sky:         #7DD6FF;
    --r4p-periwinkle:  #9FB0FF;

    --r4p-font-display: 'Sora', system-ui, sans-serif;
    --r4p-font-body: 'Inter', system-ui, sans-serif;

    --r4p-radius-sm: 10px;
    --r4p-radius-md: 16px;
    --r4p-radius-lg: 24px;
    --r4p-radius-pill: 999px;

    --r4p-shadow-card: 0 1px 2px rgba(11, 18, 64, 0.04), 0 12px 32px -16px rgba(11, 18, 64, 0.14);
    --r4p-shadow-float: 0 24px 60px -20px rgba(11, 18, 64, 0.45);
    --r4p-shadow-btn: 0 10px 24px -8px rgba(43, 77, 255, 0.55);

    --r4p-container: 1200px;
    --r4p-section-pad: clamp(3.5rem, 7vw, 6.5rem);

    font-family: var(--r4p-font-body);
    color: var(--r4p-ink);
    background: var(--r4p-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}


/* ============================= SCOPED RESET =============================
   Deliberately scoped to inside the wrapper. The global theme keeps its own
   box model everywhere else on the site. */
.r4p-pt,
.r4p-pt *,
.r4p-pt *::before,
.r4p-pt *::after {
    box-sizing: border-box;
}

.r4p-pt h1,
.r4p-pt h2,
.r4p-pt h3,
.r4p-pt h4,
.r4p-pt p,
.r4p-pt ul,
.r4p-pt li,
.r4p-pt figure {
    margin: 0;
    padding: 0;
}

.r4p-pt ul {
    list-style: none;
}

.r4p-pt img {
    max-width: 100%;
    height: auto;
    display: block;
}

.r4p-pt a {
    color: inherit;
    text-decoration: none;
}

.r4p-pt button {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
    margin: 0;
}

.r4p-pt input,
.r4p-pt textarea {
    font: inherit;
}

.r4p-pt svg {
    display: block;
}

.r4p-pt h1,
.r4p-pt h2,
.r4p-pt h3,
.r4p-pt h4 {
    font-family: var(--r4p-font-display);
    color: var(--r4p-navy);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
    .r4p-pt *,
    .r4p-pt *::before,
    .r4p-pt *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

.r4p-pt a:focus-visible,
.r4p-pt button:focus-visible,
.r4p-pt input:focus-visible,
.r4p-pt textarea:focus-visible {
    outline: 2.5px solid var(--r4p-blue-2);
    outline-offset: 3px;
    border-radius: 6px;
}


/* ============================= PRIMITIVES ============================= */
.r4p-pt-container {
    max-width: var(--r4p-container);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2rem);
}

.r4p-pt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--r4p-font-body);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--r4p-blue);
}

.r4p-pt-eyebrow::before {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--r4p-blue-2);
    border-radius: 2px;
}

.r4p-pt-head {
    max-width: 640px;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.r4p-pt-head h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin-top: 0.6rem;
}

.r4p-pt-head p {
    color: var(--r4p-muted);
    font-size: 1.05rem;
    margin-top: 0.9rem;
}

.r4p-pt-head.is-center {
    margin-inline: auto;
    text-align: center;
}

.r4p-pt-head.is-center .r4p-pt-eyebrow {
    justify-content: center;
}

.r4p-pt-head.is-tight {
    margin-bottom: 1.5rem;
}

.r4p-pt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-family: var(--r4p-font-body);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.95rem 1.7rem;
    border-radius: var(--r4p-radius-pill);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, opacity 0.18s ease;
    white-space: nowrap;
    text-align: center;
}

.r4p-pt-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.r4p-pt-btn[disabled] {
    opacity: 0.65;
    cursor: progress;
}

.r4p-pt-btn--primary {
    background: linear-gradient(135deg, var(--r4p-blue), var(--r4p-blue-2));
    color: var(--r4p-white);
    box-shadow: var(--r4p-shadow-btn);
}

.r4p-pt-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -10px rgba(43, 77, 255, 0.6);
    color: var(--r4p-black);
}

.r4p-pt-btn--primary:active {
    transform: translateY(0);
}

/* Applied by the page JS for ~2.2s after the real add-to-cart AJAX succeeds. */
.r4p-pt-btn--primary.is-added {
    background: linear-gradient(135deg, #1A9E5C, #0D7A45);
    box-shadow: 0 10px 24px -8px rgba(26, 158, 92, 0.5);
}

.r4p-pt-btn--block {
    width: 100%;
}

.r4p-pt-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: var(--r4p-radius-pill);
    background: var(--r4p-surface);
    border: 1px solid var(--r4p-border);
    color: var(--r4p-navy);
}

.r4p-pt-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.r4p-pt-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .r4p-pt-reveal {
        opacity: 1;
        transform: none;
    }
}

.r4p-pt-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* ============================= HERO / PRODUCT ============================= */
.r4p-pt-hero {
    position: relative;
    overflow: hidden;
    color: var(--r4p-white);
    background: radial-gradient(120% 140% at 85% -10%, #1C2670 0%, var(--r4p-navy) 45%, #060A28 100%);
    padding-top: clamp(2rem, 5vw, 3rem);
    padding-bottom: clamp(4rem, 8vw, 6rem);
}

.r4p-pt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(600px 400px at 12% 30%, rgba(43, 77, 255, 0.28), transparent 60%),
        radial-gradient(500px 380px at 90% 80%, rgba(0, 123, 252, 0.22), transparent 60%);
}

.r4p-pt-crumbs {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: clamp(1.75rem, 4vw, 3rem);
    flex-wrap: wrap;
}

.r4p-pt-crumbs a {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
}

.r4p-pt-crumbs a:hover {
    color: var(--r4p-white);
}

.r4p-pt-crumbs span[aria-current] {
    color: var(--r4p-white);
    font-weight: 600;
}

.r4p-pt-hero-grid {
    position: relative;
    display: grid;
    gap: clamp(2.5rem, 6vw, 4rem);
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 1024px) {
    .r4p-pt-hero-grid {
        grid-template-columns: 1.02fr 1fr;
    }
}

/* --- hero visual --- */
.r4p-pt-visual {
    position: relative;
    max-width: 460px;
    margin-inline: auto;
}

.r4p-pt-stage {
    position: relative;
    border-radius: var(--r4p-radius-lg);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: var(--r4p-shadow-float);
    overflow: hidden;
}

.r4p-pt-stage img {
    border-radius: var(--r4p-radius-sm);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 1;
    width: 100%;
}

.r4p-pt-scan {
    position: absolute;
    left: 8%;
    right: 8%;
    height: 3px;
    z-index: 2;
    border-radius: 4px;
    background: linear-gradient(90deg, transparent, var(--r4p-blue-2), var(--r4p-white), var(--r4p-blue-2), transparent);
    box-shadow: 0 0 18px 3px rgba(0, 123, 252, 0.7);
    animation: r4pPtScan 3.6s ease-in-out infinite;
}

@keyframes r4pPtScan {
    0%   { top: 6%;  opacity: 0; }
    8%   {            opacity: 1; }
    50%  { top: 92%; opacity: 1; }
    58%  {            opacity: 0; }
    100% { top: 92%; opacity: 0; }
}

.r4p-pt-ats {
    position: absolute;
    bottom: -1.75rem;
    right: -1.25rem;
    z-index: 3;
    width: 208px;
    background: var(--r4p-white);
    color: var(--r4p-ink);
    border-radius: var(--r4p-radius-md);
    padding: 1.1rem 1.1rem 1rem;
    box-shadow: var(--r4p-shadow-float);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.r4p-pt-ats-top {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.r4p-pt-ring {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

.r4p-pt-ring circle {
    fill: none;
    stroke-width: 5;
}

.r4p-pt-ring .r4p-pt-ring-track {
    stroke: var(--r4p-border);
}

.r4p-pt-ring .r4p-pt-ring-fill {
    stroke: var(--r4p-blue);
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    stroke-dasharray: 138;
    stroke-dashoffset: 138;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.r4p-pt-ring.is-visible .r4p-pt-ring-fill {
    stroke-dashoffset: 3;
}

.r4p-pt-ats-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--r4p-muted);
}

.r4p-pt-ats-value {
    font-family: var(--r4p-font-display);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--r4p-navy);
    line-height: 1;
}

.r4p-pt-ats-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border-top: 1px solid var(--r4p-border);
    padding-top: 0.6rem;
}

.r4p-pt-ats-list li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--r4p-navy);
}

.r4p-pt-ats-list svg {
    width: 15px;
    height: 15px;
    color: var(--r4p-green);
    flex-shrink: 0;
}

/* --- hero content --- */
.r4p-pt-hero-content .r4p-pt-eyebrow {
    color: var(--r4p-periwinkle);
}

.r4p-pt-hero-content .r4p-pt-eyebrow::before {
    background: var(--r4p-periwinkle);
}

.r4p-pt-hero-content h1 {
    color: var(--r4p-white);
    font-size: clamp(2.3rem, 4.4vw, 3.15rem);
    margin-top: 0.75rem;
}

.r4p-pt-sub {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.08rem;
    margin-top: 1.1rem;
    max-width: 46ch;
}

.r4p-pt-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 1.25rem;
    margin-top: 1.6rem;
}

.r4p-pt-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.r4p-pt-checklist svg {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    color: var(--r4p-sky);
    flex-shrink: 0;
}

.r4p-pt-price {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-top: 1.9rem;
    flex-wrap: wrap;
}

.r4p-pt-price-now,
.r4p-pt-price-was,
.r4p-pt-sticky-now,
.r4p-pt-sticky-was {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: nowrap;
}

.r4p-pt-price-main {
    font-size: 1em;
    line-height: 1;
}

.r4p-pt-price-decimal {
    font-size: 0.52em;
    line-height: 1;
    margin-left: 0.04em;
    vertical-align: baseline;
}

.r4p-pt-price-now {
    font-family: var(--r4p-font-display);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--r4p-white);
}

.r4p-pt-price-was {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: line-through;
}

.r4p-pt-price-save {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--r4p-sky);
    background: rgba(0, 123, 252, 0.16);
    padding: 0.25rem 0.6rem;
    border-radius: var(--r4p-radius-pill);
}

.r4p-pt-cta {
    margin-top: 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 360px;
}

.r4p-pt-cta-note {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}

.r4p-pt-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem 1.6rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.r4p-pt-trust-row li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.r4p-pt-trust-row svg {
    width: 17px;
    height: 17px;
    color: var(--r4p-periwinkle);
    flex-shrink: 0;
}

.r4p-pt-trust-row a:hover {
    color: var(--r4p-white);
}

.r4p-pt-quick {
    margin-top: 1.75rem;
}

.r4p-pt-quick-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0.6rem;
}

.r4p-pt-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.r4p-pt-tags .r4p-pt-pill {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
}

.r4p-pt-tags .r4p-pt-pill.is-category {
    background: rgba(43, 77, 255, 0.25);
    border-color: rgba(125, 214, 255, 0.4);
    color: var(--r4p-white);
}


/* ============================= TRUST STRIP ============================= */
.r4p-pt-strip {
    padding-block: clamp(2.5rem, 5vw, 3.5rem);
    border-bottom: 1px solid var(--r4p-border);
}

.r4p-pt-strip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1.25rem;
}

@media (min-width: 720px) {
    .r4p-pt-strip-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.r4p-pt-strip-item {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.r4p-pt-strip-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--r4p-radius-sm);
    background: linear-gradient(135deg, rgba(43, 77, 255, 0.12), rgba(0, 123, 252, 0.06));
    display: grid;
    place-items: center;
    color: var(--r4p-blue);
}

.r4p-pt-strip-icon svg {
    width: 22px;
    height: 22px;
}

.r4p-pt-strip-item h3 {
    font-size: 1rem;
}

.r4p-pt-strip-item p {
    color: var(--r4p-muted);
    font-size: 0.88rem;
    margin-top: 0.15rem;
}


/* ============================= FEATURES ============================= */
.r4p-pt-features {
    background: var(--r4p-surface);
    padding-block: var(--r4p-section-pad);
}

.r4p-pt-feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .r4p-pt-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .r4p-pt-feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.r4p-pt-feature {
    background: var(--r4p-white);
    border: 1px solid var(--r4p-border);
    border-radius: var(--r4p-radius-md);
    padding: 1.6rem;
    box-shadow: var(--r4p-shadow-card);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.r4p-pt-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -18px rgba(11, 18, 64, 0.22);
}

.r4p-pt-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--r4p-radius-sm);
    background: linear-gradient(135deg, var(--r4p-blue), var(--r4p-blue-2));
    display: grid;
    place-items: center;
    color: var(--r4p-white);
    margin-bottom: 1.1rem;
}

.r4p-pt-feature-icon svg {
    width: 21px;
    height: 21px;
}

.r4p-pt-feature h3 {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.r4p-pt-feature p {
    color: var(--r4p-muted);
    font-size: 0.92rem;
}


/* ============================= HOW IT WORKS ============================= */
.r4p-pt-how {
    padding-block: var(--r4p-section-pad);
}

.r4p-pt-how-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem;
}

@media (min-width: 900px) {
    .r4p-pt-how-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .r4p-pt-how-grid::before {
        content: "";
        position: absolute;
        top: 26px;
        left: 12%;
        right: 12%;
        height: 2px;
        background: repeating-linear-gradient(90deg, var(--r4p-border) 0 10px, transparent 10px 18px);
        z-index: 0;
    }
}

.r4p-pt-step {
    position: relative;
    z-index: 1;
}

.r4p-pt-step-num {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--r4p-navy);
    color: var(--r4p-white);
    display: grid;
    place-items: center;
    font-family: var(--r4p-font-display);
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 10px 22px -8px rgba(11, 18, 64, 0.45);
}

.r4p-pt-step h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.r4p-pt-step p {
    color: var(--r4p-muted);
    font-size: 0.93rem;
    max-width: 32ch;
}


/* ============================= DESCRIPTION ============================= */
.r4p-pt-desc {
    background: var(--r4p-surface);
    padding-block: var(--r4p-section-pad);
}

.r4p-pt-desc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (min-width: 960px) {
    .r4p-pt-desc-grid {
        grid-template-columns: 1.35fr 1fr;
        align-items: start;
    }
}

/* The admin writes this copy in the product editor, so it arrives as arbitrary
   HTML (p / ul / ol / strong / a / h3). The scoped reset above strips list
   markers and margins from everything in the wrapper, so they are restored
   here rather than special-cased in the reset. */
.r4p-pt-prose {
    color: var(--r4p-ink);
    font-size: 1rem;
    max-width: 62ch;
}

.r4p-pt-prose > *:first-child {
    margin-top: 0;
}

.r4p-pt-prose p {
    margin-bottom: 1.1rem;
}

.r4p-pt-prose p:last-child {
    margin-bottom: 0;
}

.r4p-pt-prose h3,
.r4p-pt-prose h4 {
    font-size: 1.1rem;
    margin: 1.6rem 0 0.6rem;
}

.r4p-pt-prose ul,
.r4p-pt-prose ol {
    margin: 0 0 1.1rem 0;
    padding-left: 1.3rem;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.r4p-pt-prose ol {
    list-style: decimal;
}

.r4p-pt-prose li {
    color: var(--r4p-ink);
}

/* The product description nests a <p> inside each <li>; without this the
   list reads as double-spaced. */
.r4p-pt-prose li > p {
    margin-bottom: 0;
}

.r4p-pt-prose strong,
.r4p-pt-prose b {
    color: var(--r4p-navy);
    font-weight: 700;
}

.r4p-pt-prose a {
    color: var(--r4p-blue);
    font-weight: 600;
    text-decoration: underline;
}

.r4p-pt-prose img {
    border-radius: var(--r4p-radius-sm);
    margin-bottom: 1.1rem;
}

.r4p-pt-included {
    background: var(--r4p-white);
    border: 1px solid var(--r4p-border);
    border-radius: var(--r4p-radius-lg);
    padding: 1.75rem;
    box-shadow: var(--r4p-shadow-card);
}

.r4p-pt-included h3 {
    font-size: 1.05rem;
    margin-bottom: 1.1rem;
}

.r4p-pt-included-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.r4p-pt-included-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--r4p-navy);
}

.r4p-pt-included-list .r4p-pt-ic {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--r4p-surface);
    display: grid;
    place-items: center;
    color: var(--r4p-blue);
    flex-shrink: 0;
}

.r4p-pt-included-list .r4p-pt-ic svg {
    width: 18px;
    height: 18px;
}

.r4p-pt-included .r4p-pt-btn {
    margin-top: 1.5rem;
}


/* ============================= FAQ ============================= */
.r4p-pt-faq {
    padding-block: var(--r4p-section-pad);
}

.r4p-pt-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 760px;
}

.r4p-pt-faq-item {
    border: 1px solid var(--r4p-border);
    border-radius: var(--r4p-radius-md);
    overflow: hidden;
    background: var(--r4p-white);
}

.r4p-pt-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.4rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--r4p-navy);
}

.r4p-pt-faq-q svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--r4p-blue);
    transition: transform 0.25s ease;
}

.r4p-pt-faq-item.is-open .r4p-pt-faq-q svg {
    transform: rotate(180deg);
}

.r4p-pt-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.r4p-pt-faq-a-inner {
    padding: 0 1.4rem 1.3rem;
    color: var(--r4p-muted);
    font-size: 0.93rem;
    max-width: 60ch;
}

.r4p-pt-faq-a-inner a {
    color: var(--r4p-blue);
    font-weight: 600;
}


/* ============================= REVIEWS ============================= */
.r4p-pt-reviews {
    background: var(--r4p-surface);
    padding-block: var(--r4p-section-pad);
}

.r4p-pt-reviews-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 900px) {
    .r4p-pt-reviews-grid {
        grid-template-columns: 1fr 1.15fr;
    }
}

.r4p-pt-reviews-empty {
    background: var(--r4p-white);
    border: 1px dashed var(--r4p-border);
    border-radius: var(--r4p-radius-lg);
    padding: 2.25rem;
    text-align: center;
}

.r4p-pt-reviews-empty svg {
    width: 34px;
    height: 34px;
    color: var(--r4p-blue);
    margin-inline: auto;
}

.r4p-pt-reviews-empty h3 {
    font-size: 1.05rem;
    margin-top: 0.9rem;
}

.r4p-pt-reviews-empty p {
    color: var(--r4p-muted);
    font-size: 0.9rem;
    margin-top: 0.4rem;
}

.r4p-pt-review-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.r4p-pt-review {
    background: var(--r4p-white);
    border: 1px solid var(--r4p-border);
    border-radius: var(--r4p-radius-md);
    padding: 1.4rem 1.5rem;
    box-shadow: var(--r4p-shadow-card);
}

.r4p-pt-review-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.65rem;
}

.r4p-pt-review-who {
    font-family: var(--r4p-font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--r4p-navy);
}

.r4p-pt-review-when {
    font-size: 0.78rem;
    color: var(--r4p-muted);
}

.r4p-pt-stars {
    display: flex;
    gap: 0.15rem;
    margin-top: 0.2rem;
}

.r4p-pt-stars svg {
    width: 14px;
    height: 14px;
    color: var(--r4p-border);
}

.r4p-pt-stars svg.is-on {
    color: var(--r4p-gold);
}

.r4p-pt-review p {
    font-size: 0.93rem;
    color: var(--r4p-ink);
}

.r4p-pt-review-form {
    background: var(--r4p-white);
    border: 1px solid var(--r4p-border);
    border-radius: var(--r4p-radius-lg);
    padding: 1.9rem;
    box-shadow: var(--r4p-shadow-card);
}

.r4p-pt-review-form h3 {
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.r4p-pt-star-picker {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 1.15rem;
}

.r4p-pt-star-picker button {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
}

.r4p-pt-star-picker svg {
    width: 24px;
    height: 24px;
    color: var(--r4p-border);
    transition: color 0.15s ease, transform 0.15s ease;
}

.r4p-pt-star-picker button.is-active svg,
.r4p-pt-star-picker button:hover svg {
    color: var(--r4p-gold);
    transform: scale(1.08);
}

.r4p-pt-review-form textarea {
    width: 100%;
    min-height: 110px;
    border: 1px solid var(--r4p-border);
    border-radius: var(--r4p-radius-sm);
    padding: 0.85rem 1rem;
    resize: vertical;
    font-size: 0.93rem;
    color: var(--r4p-ink);
    background: var(--r4p-white);
}

.r4p-pt-review-form textarea::placeholder {
    color: var(--r4p-muted);
}

.r4p-pt-review-form .r4p-pt-btn {
    margin-top: 1.1rem;
}

/* Shown instead of the form to guests. */
.r4p-pt-review-gate {
    background: var(--r4p-white);
    border: 1px solid var(--r4p-border);
    border-radius: var(--r4p-radius-lg);
    padding: 1.9rem;
    box-shadow: var(--r4p-shadow-card);
}

.r4p-pt-review-gate h3 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.r4p-pt-review-gate p {
    color: var(--r4p-muted);
    font-size: 0.92rem;
    margin-bottom: 1.2rem;
}


/* ============================= STICKY MOBILE BUY BAR =============================
   Hidden from 1024px up, where the hero buy button is always within reach. The
   wrapper .r4p-pt must never get transform/filter/perspective or this stops
   being positioned against the viewport. */
.r4p-pt-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    background: var(--r4p-white);
    border-top: 1px solid var(--r4p-border);
    box-shadow: 0 -12px 30px -18px rgba(11, 18, 64, 0.35);
    padding: 0.85rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transform: translateY(110%);
    transition: transform 0.28s ease;
}

.r4p-pt-sticky.is-visible {
    transform: translateY(0);
}

.r4p-pt-sticky-price {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.r4p-pt-sticky-price .r4p-pt-sticky-now {
    font-family: var(--r4p-font-display);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--r4p-navy);
}

.r4p-pt-sticky-price .r4p-pt-sticky-was {
    font-size: 0.78rem;
    color: var(--r4p-muted);
    text-decoration: line-through;
}

.r4p-pt-sticky-price .r4p-pt-price-decimal {
    font-size: 0.54em;
}

@media (min-width: 1024px) {
    .r4p-pt-sticky {
        display: none;
    }
}

/* Two global floating controls sit in the bottom-right corner on every page:
   the WhatsApp button (frontend/templates/partials/whatsapp_button, effectively
   ~95px off the bottom once its margin-bottom:75px is counted) and the
   .progress-wrap scroll-to-top from layout.blade.php at bottom:30px. The sticky
   buy bar occupies roughly the bottom 71px, so the scroll-to-top ends up half
   buried. Restack both above the bar, keeping their existing order.

   No body class is needed as a gate: this stylesheet is only ever loaded by the
   single product page. The descendant selectors are not decoration either —
   global/whatsapp.css is linked from the FOOTER, so it comes after this file in
   document order and would win a specificity tie on .whatsapp-float. */
@media (max-width: 1023.98px) {
    .wa-widget .whatsapp-float {
        margin-bottom: 0;
        bottom: 5.5rem;
    }

    .paginacontainer .progress-wrap {
        bottom: 10.5rem;
    }
}


/* ============================= HEADER CART BADGE BUMP =============================
   The only rule in this file outside .r4p-pt. The header cart badge lives in the
   global navbar, so the page JS reaches out and adds this class for one
   animation cycle after a successful add-to-cart. Nothing else is touched —
   .cart-count itself is left entirely to the global stylesheet. */
.r4p-pt-bump {
    animation: r4pPtBump 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes r4pPtBump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.5); }
    100% { transform: scale(1); }
}