/*
 * Owner-approved clean product page (docs/demos/product-page-clean-demo.html).
 * A plain white page with thin lines between parts: cover with its language
 * tag and Sample button, title and facts, "How to buy" before Buy Now, then
 * "About this paper" and the same paper's other formats as cards.
 *
 * Loads after the shared Store styles; every rule starts at
 * .pt-product-detail-wrap.pt-pp so it wins over the older card layout.
 */

.pt-product-detail-wrap.pt-pp {
    --pp-ink: var(--pt-store-ink, #0f172a);
    --pp-text: var(--pt-store-text, #334155);
    --pp-muted: var(--pt-store-muted, #64748b);
    --pp-line: var(--pt-store-line, #e2e8f0);
    --pp-line-soft: var(--pt-store-line-soft, #eef2f7);
    --pp-soft: var(--pt-store-page, #f8fafc);
    --pp-brand: var(--pt-store-brand, #2563eb);
    --pp-brand-dark: var(--pt-store-brand-hover, #1d4ed8);
    --pp-brand-soft: var(--pt-store-brand-soft, #eff6ff);
    --pp-brand-line: var(--pt-store-brand-soft-border, #bfdbfe);
    --pp-ok: var(--pt-store-success, #15803d);
    --pp-en: #2563eb;
    --pp-en-dark: #1e40af;
    --pp-hi: #ea580c;
    --pp-hi-dark: #9a3412;
    max-width: 860px;
    margin: 0 auto;
}

/*
 * The paper: the same bordered sheet as the question page (single-pyq.css
 * #ptApp .pq-sheet), in the Design Studio "Question paper" colour, which
 * PYQ_Store_Design_Studio prints as --pq-paper / --pq-line on this page too.
 */
.pt-product-detail-wrap.pt-pp .pt-pp-sheet {
    background: var(--pq-paper, #fefefc);
    border: 1px solid var(--pq-line, #dadad4);
    border-radius: 0;
    box-shadow: 0 1px 0 #fff inset, 0 6px 18px rgba(15, 23, 42, .08);
    padding: 26px 26px 22px;
    margin: 0 0 24px;
}

/* Owned, free, upgrade: the older step box and buttons, full width under
   the cover row and as wide as the Buy Now zone. */
.pt-product-detail-wrap.pt-pp .pt-pp-own > * {
    max-width: 520px;
}

.pt-product-detail-wrap.pt-pp .pt-pp-own .pt-pdp-steps {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* ---------- top: cover and title ---------- */
.pt-product-detail-wrap.pt-pp .pt-pdp {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.pt-product-detail-wrap.pt-pp .pt-pdp--nocover {
    grid-template-columns: minmax(0, 1fr);
}

.pt-product-detail-wrap.pt-pp .pt-pdp-media {
    position: static;
    display: grid;
    gap: 10px;
    align-content: start;
}

.pt-product-detail-wrap.pt-pp .pt-pdp-cover {
    position: relative;
    display: block;
    width: 100%;
    max-height: none;
    aspect-ratio: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
    font: inherit;
    text-align: left;
}

.pt-product-detail-wrap.pt-pp button.pt-pdp-cover {
    cursor: pointer;
}

.pt-product-detail-wrap.pt-pp .pt-pdp-cover-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--pp-line);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 8px 24px rgba(15, 23, 42, .1);
    transition: transform .15s;
}

.pt-product-detail-wrap.pt-pp button.pt-pdp-cover:hover .pt-pdp-cover-img {
    transform: translateY(-2px);
}

.pt-product-detail-wrap.pt-pp button.pt-pdp-cover:focus-visible {
    outline: 2px solid var(--pp-brand);
    outline-offset: 3px;
}

/* The language ribbon on the cover's top-left edge: EN or हिं. */
.pt-product-detail-wrap.pt-pp .pt-pp-tag {
    position: absolute;
    top: 10px;
    left: -5px;
    padding: 2px 8px 2px 7px;
    border-radius: 0 4px 4px 0;
    background: var(--pp-hi);
    box-shadow: 0 2px 5px rgba(15, 23, 42, .18);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: .03em;
}

.pt-product-detail-wrap.pt-pp .pt-pp-tag::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    border-top: 4px solid var(--pp-hi-dark);
    border-left: 5px solid transparent;
}

.pt-product-detail-wrap.pt-pp .pt-pp-tag.pt-pp-is-en {
    background: var(--pp-en);
}

.pt-product-detail-wrap.pt-pp .pt-pp-tag.pt-pp-is-en::before {
    border-top-color: var(--pp-en-dark);
}

.pt-product-detail-wrap.pt-pp .pt-pp-peek {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(15, 23, 42, .72);
    color: #fff;
}

.pt-product-detail-wrap.pt-pp .pt-pp-peek svg {
    width: 16px;
    height: 16px;
}

.pt-product-detail-wrap.pt-pp .pt-pp-sample {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--pp-brand-line);
    border-radius: 9px;
    background: var(--pp-brand-soft);
    box-shadow: none;
    color: var(--pp-brand-dark);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.pt-product-detail-wrap.pt-pp .pt-pp-sample:hover,
.pt-product-detail-wrap.pt-pp .pt-pp-sample:focus-visible {
    border-color: var(--pp-brand);
    background: var(--pp-brand-soft);
    color: var(--pp-brand-dark);
    transform: none;
}

.pt-product-detail-wrap.pt-pp .pt-pp-sample svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.pt-product-detail-wrap.pt-pp .pt-pdp--nocover .pt-pp-sample {
    width: auto;
    justify-self: start;
    margin-top: 14px;
}

.pt-product-detail-wrap.pt-pp .pt-pdp-info {
    display: block;
    min-width: 0;
    padding: 0;
}

.pt-product-detail-wrap.pt-pp .pt-pdp-title {
    margin: 0;
    color: var(--pp-ink);
    font-size: 25px;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;
}

.pt-product-detail-wrap.pt-pp .pt-pp-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    color: var(--pp-text);
    font-size: 13.5px;
}

.pt-product-detail-wrap.pt-pp .pt-pp-facts li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}

.pt-product-detail-wrap.pt-pp .pt-pp-facts svg {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--pp-muted);
}

/* The language: first, bold, and coloured -- not a button. */
.pt-product-detail-wrap.pt-pp .pt-pp-facts .pt-pp-lang {
    color: var(--pp-hi-dark);
    font-weight: 700;
}

.pt-product-detail-wrap.pt-pp .pt-pp-facts .pt-pp-lang svg {
    color: var(--pp-hi);
}

.pt-product-detail-wrap.pt-pp .pt-pp-facts .pt-pp-lang.pt-pp-is-en {
    color: var(--pp-en-dark);
}

.pt-product-detail-wrap.pt-pp .pt-pp-facts .pt-pp-lang.pt-pp-is-en svg {
    color: var(--pp-en);
}

.pt-product-detail-wrap.pt-pp .pt-pdp-pills {
    margin-top: 12px;
}

.pt-product-detail-wrap.pt-pp .pt-pdp-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.pt-product-detail-wrap.pt-pp .pt-pdp-price-now {
    color: var(--pp-ink);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.pt-product-detail-wrap.pt-pp .pt-pdp-price-now--free {
    color: var(--pp-ok);
}

.pt-product-detail-wrap.pt-pp .pt-pdp-price-off {
    padding: 0;
    background: transparent;
    color: var(--pp-ok);
    font-size: 13px;
    font-weight: 600;
}

.pt-product-detail-wrap.pt-pp .pt-pp-gets {
    display: grid;
    gap: 6px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.pt-product-detail-wrap.pt-pp .pt-pp-gets li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0;
    color: var(--pp-ink);
    font-size: 14.5px;
    line-height: 1.5;
}

.pt-product-detail-wrap.pt-pp .pt-pp-gets svg {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 3px;
    color: var(--pp-ok);
}

.pt-product-detail-wrap.pt-pp .pt-pp-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 12px;
}

.pt-product-detail-wrap.pt-pp .pt-pp-links__sep {
    width: 1px;
    height: 16px;
    background: var(--pp-line);
}

.pt-product-detail-wrap.pt-pp .pt-pp-alt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--pp-brand);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
}

.pt-product-detail-wrap.pt-pp .pt-pp-alt:hover {
    text-decoration: underline;
}

.pt-product-detail-wrap.pt-pp .pt-pp-alt svg {
    width: 16px;
    height: 16px;
}

/* ---------- parts below the top, split by thin lines ---------- */
.pt-product-detail-wrap.pt-pp .pt-pp-sec {
    margin: 22px 0 0;
    padding: 22px 0 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--pp-line);
    border-radius: 0;
    box-shadow: none;
}

.pt-product-detail-wrap.pt-pp .pt-pp-h2 {
    margin: 0 0 14px;
    color: var(--pp-ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

/* "How to buy": numbered circles in a row, the last a green tick. */
.pt-product-detail-wrap.pt-pp .pt-pp-steps {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pt-product-detail-wrap.pt-pp .pt-pp-steps li {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    padding-right: 22px;
}

.pt-product-detail-wrap.pt-pp .pt-pp-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid #cbd5e1;
    border-right: 1.5px solid #cbd5e1;
    transform: rotate(45deg);
}

.pt-product-detail-wrap.pt-pp .pt-pp-dot {
    position: relative;
    z-index: 1;
    display: grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1.5px solid var(--pp-brand);
    border-radius: 50%;
    background: #fff;
    color: var(--pp-brand);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.pt-product-detail-wrap.pt-pp .pt-pp-steps li:last-child .pt-pp-dot {
    border-color: var(--pp-ok);
    background: var(--pp-ok);
    color: #fff;
}

.pt-product-detail-wrap.pt-pp .pt-pp-dot svg {
    width: 14px;
    height: 14px;
    stroke-width: 3;
}

.pt-product-detail-wrap.pt-pp .pt-pp-steps b {
    display: block;
    padding-top: 2px;
    color: var(--pp-ink);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
}

.pt-product-detail-wrap.pt-pp .pt-pp-steps small {
    display: block;
    margin-top: 1px;
    color: var(--pp-muted);
    font-size: 13px;
    line-height: 1.4;
}

.pt-product-detail-wrap.pt-pp .pt-pp-buyzone {
    display: grid;
    gap: 10px;
    max-width: 520px;
    margin-top: 20px;
}

.pt-product-detail-wrap.pt-pp .pt-pp-label {
    margin: 0;
    color: var(--pp-muted);
    font-size: 13px;
    font-weight: 600;
}

.pt-product-detail-wrap.pt-pp .pt-pdp-routes {
    margin: 0;
}

.pt-product-detail-wrap.pt-pp .pt-pp-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--pp-muted);
    font-size: 13px;
}

.pt-product-detail-wrap.pt-pp .pt-pp-hint svg {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--pp-ok);
}

/* "Straight from the website": a tick box under Telegram / Email. */
.pt-product-detail-wrap.pt-pp .pt-pp-direct {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 2px 0;
    padding: 10px 12px;
    border-radius: 12px;
    line-height: 1.45;
    cursor: pointer;
    transition: background .15s;
}

.pt-product-detail-wrap.pt-pp .pt-pp-direct:hover {
    background: rgba(148, 163, 184, .1);
}

.pt-product-detail-wrap.pt-pp .pt-pp-direct input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pt-product-detail-wrap.pt-pp .pt-pp-direct__box {
    display: grid;
    flex: none;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 2px solid #94a3b8;
    border-radius: 6px;
    background: #fff;
    transition: background .15s, border-color .15s;
}

.pt-product-detail-wrap.pt-pp .pt-pp-direct__box svg {
    width: 14px;
    height: 14px;
    color: #fff;
    stroke-width: 3;
    opacity: 0;
}

.pt-product-detail-wrap.pt-pp .pt-pp-direct input:checked + .pt-pp-direct__box {
    border-color: #2563eb;
    background: #2563eb;
}

.pt-product-detail-wrap.pt-pp .pt-pp-direct input:checked + .pt-pp-direct__box svg {
    opacity: 1;
}

.pt-product-detail-wrap.pt-pp .pt-pp-direct input:focus-visible + .pt-pp-direct__box {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

.pt-product-detail-wrap.pt-pp .pt-pp-direct b {
    display: block;
    color: var(--pp-ink);
    font-size: 14.5px;
    font-weight: 700;
}

.pt-product-detail-wrap.pt-pp .pt-pp-direct small {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-top: 3px;
    color: var(--pp-muted);
    font-size: 12.5px;
}

.pt-product-detail-wrap.pt-pp .pt-pp-direct small svg {
    width: 14px;
    height: 14px;
    flex: none;
    margin-top: 2px;
}

.pt-product-detail-wrap.pt-pp .pt-pp-buyzone.is-direct .pt-pp-direct {
    background: #eff6ff;
}

.pt-product-detail-wrap.pt-pp .pt-pp-buyzone.is-direct .pt-pp-direct b {
    color: #1e3a8a;
}

.pt-product-detail-wrap.pt-pp .pt-pp-buyzone.is-direct .pt-pp-direct small svg {
    color: #2563eb;
}

.pt-product-detail-wrap.pt-pp .pt-pp-buyzone.is-direct .pt-pdp-routes {
    opacity: .45;
}

/* Hidden, not removed, so the tick box does not jump when ticked. */
.pt-product-detail-wrap.pt-pp .pt-pp-buyzone.is-direct .pt-pp-hint {
    visibility: hidden;
}

/* Test page: "take it in your browser, no app". */
.pt-product-detail-wrap.pt-pp .pt-pp-browser {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--pp-text);
    font-size: 13.5px;
}

.pt-product-detail-wrap.pt-pp .pt-pp-browser svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: #2563eb;
}

.pt-product-detail-wrap.pt-pp .pt-pp-browser b {
    color: var(--pp-ink);
}

.pt-product-detail-wrap.pt-pp .pt-pdp-buy-now {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    margin: 0;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
}

.pt-product-detail-wrap.pt-pp .pt-pp-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    color: var(--pp-muted);
    font-size: 12.5px;
    text-align: center;
}

.pt-product-detail-wrap.pt-pp .pt-pp-trust svg {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--pp-ok);
}

/* "About this paper": plain full-width rows, no box. */
.pt-product-detail-wrap.pt-pp .pt-pdp-description .pt-facts {
    max-width: none;
    margin-top: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.pt-product-detail-wrap.pt-pp .pt-pdp-description .pt-product-description-body + .pt-facts {
    margin-top: 12px;
}

.pt-product-detail-wrap.pt-pp .pt-pdp-description .pt-facts__rows > div {
    gap: 7px;
    padding: 9px 0;
    font-size: 14px;
}

.pt-product-detail-wrap.pt-pp .pt-pdp-description .pt-facts__rows > div + div {
    border-top-color: var(--pp-line-soft);
}

.pt-product-detail-wrap.pt-pp .pt-pdp-description .pt-facts__rows dt svg {
    width: 15px;
    height: 15px;
}

.pt-product-detail-wrap.pt-pp .pt-pdp-description .pt-facts__rows dd {
    font-weight: 600;
}

/* ---------- same paper, other formats: the Store card (store-list-card.css) ---------- */
.pt-product-detail-wrap.pt-pp .pt-same-paper__list {
    display: grid;
    gap: 10px;
}

/* ---------- phone: price and Buy stay at the bottom ---------- */
.pt-product-detail-wrap.pt-pp .pt-pp-bar {
    display: none;
}

@media (max-width: 760px) {
    /* Phone: the sheet runs edge to edge, so the page loses no width to
       the outside gap; only the sheet's own inner space remains. */
    .pt-product-detail-wrap.pt-pp {
        padding-left: 16px;
        padding-right: 16px;
    }

    .pt-product-detail-wrap.pt-pp .pt-pp-sheet {
        margin-left: -16px;
        margin-right: -16px;
        padding: 18px 16px;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }

    .pt-product-detail-wrap.pt-pp .pt-pdp {
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 14px;
    }

    .pt-product-detail-wrap.pt-pp .pt-pdp--nocover {
        grid-template-columns: minmax(0, 1fr);
    }

    .pt-product-detail-wrap.pt-pp .pt-pdp-cover {
        width: 100%;
    }

    .pt-product-detail-wrap.pt-pp .pt-pp-sample {
        padding: 7px 6px;
        font-size: 13px;
    }

    .pt-product-detail-wrap.pt-pp .pt-pdp-title {
        font-size: 18px;
    }

    .pt-product-detail-wrap.pt-pp .pt-pp-links {
        gap: 10px 14px;
    }

    .pt-product-detail-wrap.pt-pp .pt-pp-links__sep {
        display: none;
    }

    .pt-product-detail-wrap.pt-pp .pt-pdp-price-now {
        font-size: 24px;
    }

    .pt-product-detail-wrap.pt-pp .pt-pp-facts {
        gap: 4px 10px;
        font-size: 13px;
    }

    .pt-product-detail-wrap.pt-pp .pt-pp-steps {
        grid-auto-flow: row;
        gap: 14px;
    }

    .pt-product-detail-wrap.pt-pp .pt-pp-steps li {
        padding-right: 0;
    }

    .pt-product-detail-wrap.pt-pp .pt-pp-steps li:not(:last-child)::after {
        top: 30px;
        right: auto;
        bottom: -12px;
        left: 12.25px;
        width: 1.5px;
        height: auto;
        border: 0;
        background: var(--pp-line);
        transform: none;
    }

    .pt-product-detail-wrap.pt-pp .pt-pp-buyzone {
        max-width: none;
    }

    .pt-product-detail-wrap.pt-pp .pt-pp-bar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 40;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid var(--pp-line);
        box-shadow: 0 -6px 20px rgba(15, 23, 42, .08);
        transform: translateY(110%);
        transition: transform .2s;
    }

    .pt-product-detail-wrap.pt-pp .pt-pp-bar.is-on {
        transform: none;
    }

    .pt-product-detail-wrap.pt-pp .pt-pp-bar__price {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
    }

    .pt-product-detail-wrap.pt-pp .pt-pp-bar__price b {
        color: var(--pp-ink);
        font-size: 20px;
    }

    .pt-product-detail-wrap.pt-pp .pt-pp-bar__price s {
        color: var(--pp-muted);
        font-size: 12px;
    }

    .pt-product-detail-wrap.pt-pp .pt-pp-bar .pt-btn {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        margin: 0;
        border-radius: 10px;
        font-weight: 700;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pt-product-detail-wrap.pt-pp .pt-pdp-cover-img,
    .pt-product-detail-wrap.pt-pp .pt-pp-bar {
        transition: none;
    }
}