/* ============================================================
   Pandley — shared stylesheet
   Light palette, canonical. Tokens are not re-derived anywhere.
   ============================================================ */

:root {
    --pdl-page: #F7F7F5;
    --pdl-card: #FFFFFF;
    --pdl-ink: #121110;
    --pdl-ink-2: #55524E;
    --pdl-ink-3: #6E6B67;
    --pdl-line: #E4E1DC;
    --pdl-line-2: #D6D2CB;
    --pdl-red: #C21414;
    --pdl-red-dk: #9E0F0F;
    --pdl-red-brand: #E01B1B;
    --pdl-black: #141211;
    --pdl-display: "Bebas Neue",Impact,sans-serif;
    --pdl-body: "Instrument Sans",system-ui,-apple-system,sans-serif;
    --pdl-mono: "Martian Mono",ui-monospace,monospace;
    --pdl-gut: 20px;
    --pdl-max: 1080px;
}

* {
    box-sizing: border-box
}

html {
    -webkit-text-size-adjust: 100%
}

/* Nothing may exceed the viewport. A single wide element — an image, a long
   unbroken reference, a table — produces horizontal scroll on the whole page,
   and on a phone that reads as broken rather than as one wide element. */
html, body {
    max-width: 100%;
    overflow-x: hidden
}

img, video, iframe {
    max-width: 100%
}

body {
    margin: 0;
    background: var(--pdl-page);
    color: var(--pdl-ink);
    font-family: var(--pdl-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.pdl-wrap {
    max-width: var(--pdl-max);
    margin: 0 auto;
    padding: 0 var(--pdl-gut)
}

    .pdl-wrap.narrow {
        max-width: 560px
    }

a {
    color: inherit
}

/* values injected by JS start blank rather than showing a stale default */
[data-pdl-bind]:empty::before {
    content: "\00a0"
}

/* ---------- top bar ---------- */
.pdl-top {
    background: var(--pdl-card);
    border-bottom: 1px solid var(--pdl-line)
}

.pdl-top-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0
}

.pdl-logo {
    font-family: var(--pdl-display);
    font-size: 26px;
    letter-spacing: .06em;
    line-height: 1;
    color: var(--pdl-ink)
}

    .pdl-logo span {
        color: var(--pdl-red-brand)
    }

.pdl-rc {
    font-family: var(--pdl-mono);
    font-size: 9px;
    letter-spacing: .06em;
    color: var(--pdl-ink-3);
    text-align: right;
    line-height: 1.6
}

/* ---------- hero ---------- */
.pdl-hero {
    padding: 44px 0 8px
}

.pdl-eyebrow {
    font-family: var(--pdl-mono);
    font-size: 10px;
    letter-spacing: .16em;
    color: var(--pdl-red);
    margin-bottom: 16px;
    text-transform: uppercase;
}

h1 {
    font-family: var(--pdl-display);
    font-weight: 400;
    color: var(--pdl-ink);
    font-size: clamp(42px,10.5vw,86px);
    line-height: .92;
    letter-spacing: .005em;
    margin: 0 0 18px;
    max-width: 14ch;
}

.pdl-sub {
    font-size: 16.5px;
    color: var(--pdl-ink-2);
    max-width: 46ch;
    margin: 0
}

    .pdl-sub b {
        color: var(--pdl-ink);
        font-weight: 600
    }

/* ---------- ticket ---------- */
.pdl-ticket-zone {
    padding: 30px 0 8px
}

.pdl-ticket {
    position: relative;
    background: var(--pdl-card);
    color: var(--pdl-ink);
    border: 1px solid var(--pdl-line);
    border-radius: 8px;
    max-width: 520px;
    box-shadow: 0 18px 38px -26px rgba(20,18,17,.35);
}

.pdl-stub-a {
    padding: 22px 24px 24px
}

.pdl-stub-b {
    padding: 24px
}

.pdl-stub-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--pdl-mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pdl-ink-3);
    margin-bottom: 14px;
}

.pdl-amount {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid var(--pdl-ink);
    padding-bottom: 6px
}

.pdl-naira {
    font-family: var(--pdl-display);
    font-size: 40px;
    line-height: 1;
    color: var(--pdl-ink-2)
}

.pdl-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-family: var(--pdl-display);
    font-size: 44px;
    line-height: 1;
    color: var(--pdl-ink);
    letter-spacing: .01em;
    padding: 0;
}

    .pdl-input::placeholder {
        color: #B9B5AF
    }

.pdl-amount:focus-within {
    border-bottom-color: var(--pdl-red)
}

.pdl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px
}

.pdl-chip {
    font-family: var(--pdl-mono);
    font-size: 11px;
    letter-spacing: .03em;
    padding: 7px 11px;
    border: 1px solid var(--pdl-line-2);
    border-radius: 100px;
    background: transparent;
    color: var(--pdl-ink-2);
    cursor: pointer;
    transition: background .15s ease,border-color .15s ease,color .15s ease;
}

    .pdl-chip:hover {
        border-color: var(--pdl-ink)
    }

    .pdl-chip[aria-pressed="true"] {
        background: var(--pdl-black);
        border-color: var(--pdl-black);
        color: #fff
    }

    .pdl-chip:focus-visible {
        outline: 2px solid var(--pdl-red);
        outline-offset: 2px
    }

.pdl-perf {
    position: relative;
    height: 0;
    border-top: 2px dashed var(--pdl-line-2)
}

.pdl-notch {
    position: absolute;
    top: 50%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pdl-page);
    border: 1px solid var(--pdl-line);
    transform: translateY(-50%);
}

    .pdl-notch.l {
        left: -12px;
        border-right-color: transparent
    }

    .pdl-notch.r {
        right: -12px;
        border-left-color: transparent
    }

.pdl-get {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px
}

.pdl-get-val {
    font-family: var(--pdl-display);
    font-size: clamp(48px,13vw,64px);
    line-height: .88;
    letter-spacing: .005em;
    color: var(--pdl-ink)
}

.pdl-bonus {
    font-family: var(--pdl-mono);
    font-size: 10px;
    letter-spacing: .08em;
    background: var(--pdl-red);
    color: #fff;
    padding: 6px 9px;
    border-radius: 3px;
    white-space: nowrap;
    margin-bottom: 6px;
}

    .pdl-bonus[data-off="1"] {
        background: #EDEAE5;
        color: var(--pdl-ink-3)
    }

.pdl-worth {
    font-family: var(--pdl-mono);
    font-size: 10.5px;
    color: var(--pdl-ink-3);
    margin-top: 12px;
    letter-spacing: .02em
}

/* identity fields */
.pdl-id {
    margin-top: 22px;
    display: grid;
    gap: 14px
}

.pdl-field label {
    display: block;
    font-family: var(--pdl-mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pdl-ink-3);
    margin-bottom: 6px;
}

.pdl-field input {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--pdl-line-2);
    background: transparent;
    outline: none;
    font-family: var(--pdl-body);
    font-size: 16px;
    color: var(--pdl-ink);
    padding: 4px 0 7px;
    border-radius: 0;
}

    .pdl-field input::placeholder {
        color: #B9B5AF
    }

    .pdl-field input:focus {
        border-bottom-color: var(--pdl-red)
    }

    .pdl-field input[aria-invalid="true"] {
        border-bottom-color: var(--pdl-red)
    }

.pdl-field-err {
    font-size: 12px;
    color: var(--pdl-red);
    margin: 5px 0 0
}

.pdl-field-hint {
    font-size: 12px;
    color: var(--pdl-ink-3);
    margin: 5px 0 0
}

/* pay method */
.pdl-pay {
    margin-top: 20px
}

.pdl-pay-lab {
    font-family: var(--pdl-mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pdl-ink-3);
    margin-bottom: 9px
}

.pdl-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

.pdl-method {
    text-align: left;
    border: 1px solid var(--pdl-line-2);
    border-radius: 5px;
    background: transparent;
    padding: 11px 12px;
    cursor: pointer;
    font-family: var(--pdl-body);
    transition: border-color .15s ease,background .15s ease,box-shadow .15s ease;
}

    .pdl-method strong {
        display: block;
        font-size: 13.5px;
        color: var(--pdl-ink);
        font-weight: 600;
        letter-spacing: -.01em
    }

    .pdl-method em {
        font-style: normal;
        font-size: 11px;
        color: var(--pdl-ink-3)
    }

    .pdl-method[aria-pressed="true"] {
        border-color: var(--pdl-ink);
        box-shadow: inset 0 0 0 1px var(--pdl-ink)
    }

    .pdl-method:focus-visible {
        outline: 2px solid var(--pdl-red);
        outline-offset: 2px
    }

.pdl-cta {
    display: block;
    width: 100%;
    margin-top: 16px;
    border: 0;
    border-radius: 5px;
    background: var(--pdl-red);
    color: #fff;
    cursor: pointer;
    font-family: var(--pdl-display);
    font-size: 25px;
    letter-spacing: .05em;
    padding: 15px 16px 12px;
    transition: background .15s ease;
}

    .pdl-cta:hover {
        background: var(--pdl-red-dk)
    }

    .pdl-cta:disabled {
        background: #E0DCD6;
        color: #8B8781;
        cursor: not-allowed
    }

    .pdl-cta:focus-visible {
        outline: 2px solid var(--pdl-ink);
        outline-offset: 3px
    }

.pdl-cta-note {
    font-size: 12px;
    color: var(--pdl-ink-3);
    text-align: center;
    margin: 10px 0 0;
    line-height: 1.5
}

.pdl-statement {
    margin: 12px 0 0;
    padding: 11px 12px;
    background: #F2F0EC;
    border-radius: 5px;
    font-size: 12.5px;
    color: var(--pdl-ink-2);
    line-height: 1.5;
}

    .pdl-statement b {
        color: var(--pdl-ink);
        font-weight: 600
    }

.pdl-formerr {
    margin: 12px 0 0;
    padding: 11px 12px;
    border-left: 3px solid var(--pdl-red);
    background: #FBF0F0;
    font-size: 13px;
    color: var(--pdl-ink);
    display: none;
}

    .pdl-formerr[data-on="1"] {
        display: block
    }

/* ---------- sections ---------- */
.pdl-sec {
    padding: 56px 0 0
}

.pdl-sec-lab {
    font-family: var(--pdl-mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pdl-ink-3);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--pdl-line-2);
    margin-bottom: 22px;
}

.pdl-cats {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1px;
    background: var(--pdl-line)
}

.pdl-cat {
    background: var(--pdl-page);
    padding: 18px 10px 20px 0
}

    .pdl-cat h3 {
        font-family: var(--pdl-display);
        font-size: 23px;
        font-weight: 400;
        letter-spacing: .03em;
        margin: 0 0 3px;
        color: var(--pdl-ink)
    }

    .pdl-cat p {
        margin: 0;
        font-size: 12.5px;
        color: var(--pdl-ink-3);
        line-height: 1.45
    }

.pdl-note {
    margin: 20px 0 0;
    font-size: 13px;
    color: var(--pdl-ink-3);
    max-width: 52ch
}

.pdl-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0
}

.pdl-step {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--pdl-line)
}

    .pdl-step:last-child {
        border-bottom: 0
    }

.pdl-step-n {
    font-family: var(--pdl-mono);
    font-size: 11px;
    color: var(--pdl-red);
    padding-top: 4px;
    flex: 0 0 24px
}

.pdl-step h3 {
    font-family: var(--pdl-body);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 3px;
    letter-spacing: -.01em
}

.pdl-step p {
    margin: 0;
    font-size: 14px;
    color: var(--pdl-ink-2);
    max-width: 48ch
}

.pdl-terms {
    list-style: none;
    padding: 0;
    margin: 0
}

    .pdl-terms li {
        padding: 13px 0;
        border-bottom: 1px solid var(--pdl-line);
        font-size: 14.5px;
        color: var(--pdl-ink-2);
        display: flex;
        gap: 13px;
    }

        .pdl-terms li:last-child {
            border-bottom: 0
        }

        .pdl-terms li::before {
            content: "\2014";
            color: var(--pdl-red);
            flex: 0 0 auto
        }

    .pdl-terms b {
        color: var(--pdl-ink);
        font-weight: 600
    }

/* ---------- org band ---------- */
.pdl-org {
    margin: 56px 0 0;
    background: var(--pdl-black);
    border-radius: 8px;
    color: #F6F1E8;
    padding: 26px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
}

    .pdl-org h3 {
        font-family: var(--pdl-display);
        font-size: 26px;
        font-weight: 400;
        letter-spacing: .03em;
        margin: 0 0 6px
    }

    .pdl-org p {
        margin: 0;
        font-size: 14px;
        color: #BDB7B1;
        max-width: 46ch
    }

    .pdl-org a {
        font-family: var(--pdl-mono);
        font-size: 11px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #fff;
        border: 1px solid rgba(255,255,255,.35);
        border-radius: 4px;
        padding: 11px 15px;
        text-decoration: none;
        white-space: nowrap;
        transition: border-color .15s ease,background .15s ease;
    }

        .pdl-org a:hover {
            border-color: #fff;
            background: rgba(255,255,255,.08)
        }

/* ---------- footer ---------- */
.pdl-foot {
    margin-top: 52px;
    border-top: 1px solid var(--pdl-line-2);
    padding: 22px 0 40px
}

    .pdl-foot p {
        margin: 0;
        font-family: var(--pdl-mono);
        font-size: 10px;
        line-height: 1.9;
        letter-spacing: .03em;
        color: var(--pdl-ink-3)
    }

/* ---------- completion page ---------- */
.pdl-card {
    background: var(--pdl-card);
    border: 1px solid var(--pdl-line);
    border-radius: 8px;
    padding: 28px 24px;
    margin-top: 34px;
    box-shadow: 0 18px 38px -26px rgba(20,18,17,.35)
}

    .pdl-card h1 {
        font-size: 44px;
        line-height: .95;
        margin: 0 0 14px;
        max-width: none
    }

.pdl-lede {
    font-size: 15.5px;
    color: var(--pdl-ink-2);
    margin: 0 0 22px
}

.pdl-rows {
    border-top: 1px solid var(--pdl-line);
    margin-top: 4px
}

.pdl-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--pdl-line);
    font-size: 14.5px
}

    .pdl-row span:first-child {
        color: var(--pdl-ink-3)
    }

    .pdl-row span:last-child {
        font-weight: 600;
        text-align: right
    }

.pdl-ref {
    font-family: var(--pdl-mono);
    font-size: 12px;
    word-break: break-all
}

.pdl-state {
    margin-top: 20px;
    padding: 13px 14px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 1.5
}

    .pdl-state[data-kind="ready"] {
        background: #EDF3EE;
        color: #1F4028
    }

    .pdl-state[data-kind="working"] {
        background: #F5F1E6;
        color: #4A3F1E
    }

    .pdl-state[data-kind="waiting"] {
        background: #F2F0EC;
        color: var(--pdl-ink-2)
    }

    .pdl-state[data-kind="error"] {
        background: #FBF0F0;
        color: #6B1414
    }

.pdl-next {
    margin-top: 24px;
    font-size: 14px;
    color: var(--pdl-ink-2)
}

    .pdl-next b {
        color: var(--pdl-ink)
    }

.pdl-loading {
    padding: 40px 0;
    text-align: center;
    font-family: var(--pdl-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pdl-ink-3)
}

[hidden] {
    display: none !important
}

@media(min-width:720px) {
    :root {
        --pdl-gut: 34px
    }

    .pdl-hero {
        padding: 64px 0 0
    }

    .pdl-ticket-zone {
        padding: 36px 0 0
    }

    .pdl-cats {
        grid-template-columns: repeat(3,1fr)
    }

    .pdl-cat {
        padding: 20px 16px 22px 0
    }

    .pdl-sec {
        padding: 72px 0 0
    }
}

@media(min-width:940px) {
    .pdl-split {
        display: grid;
        grid-template-columns: 1fr 520px;
        gap: 56px;
        align-items: start
    }

    .pdl-hero {
        padding: 72px 0 0
    }

    .pdl-ticket-zone {
        padding: 72px 0 0
    }

    h1 {
        font-size: 76px
    }

    .pdl-card h1 {
        font-size: 44px
    }
}

@media(prefers-reduced-motion:no-preference) {
    .pdl-ticket {
        animation: pdl-rise .5s cubic-bezier(.2,.7,.3,1) both
    }

    @keyframes pdl-rise {
        from {
            opacity: 0;
            transform: translateY(14px)
        }

        to {
            opacity: 1;
            transform: none
        }
    }
}

/* ---------- account portal ---------- */
.pdl-total {
    font-family: var(--pdl-display);
    font-size: clamp(48px,13vw,64px);
    line-height: .88;
    letter-spacing: .005em;
    color: var(--pdl-ink);
    margin: 6px 0 4px
}

.pdl-credit, .pdl-purchase {
    background: var(--pdl-card);
    border: 1px solid var(--pdl-line);
    border-radius: 6px;
    padding: 16px 16px 14px;
    margin-bottom: 10px
}

.pdl-credit-top, .pdl-purchase-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px
}

.pdl-credit-val, .pdl-purchase-amt {
    font-family: var(--pdl-display);
    font-size: 26px;
    line-height: 1;
    color: var(--pdl-ink)
}

.pdl-credit-state, .pdl-purchase-state {
    font-family: var(--pdl-mono);
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pdl-ink-3);
    text-align: right
}

.pdl-credit-code {
    font-family: var(--pdl-mono);
    font-size: 14px;
    letter-spacing: .08em;
    color: var(--pdl-ink);
    margin-top: 10px;
    word-break: break-all
}

.pdl-credit-meta, .pdl-purchase-meta {
    font-size: 12px;
    color: var(--pdl-ink-3);
    margin-top: 6px
}

.pdl-empty {
    font-size: 14px;
    color: var(--pdl-ink-3);
    margin: 0;
    padding: 18px 0
}

/* ---------- admin: stat cards ---------- */
.pdl-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
    gap: 10px
}

.pdl-scard {
    background: var(--pdl-card);
    border: 1px solid var(--pdl-line);
    border-radius: 7px;
    padding: 15px 15px 16px;
    position: relative;
    overflow: hidden
}

    .pdl-scard::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: transparent
    }

    .pdl-scard[data-tone="bad"]::before {
        background: var(--pdl-red)
    }

    .pdl-scard[data-tone="warn"]::before {
        background: #C79A2E
    }

    .pdl-scard[data-tone="money"]::before {
        background: var(--pdl-black)
    }

.pdl-scard-v {
    font-family: var(--pdl-display);
    font-size: 34px;
    line-height: 1;
    color: var(--pdl-ink);
    letter-spacing: .005em;
    word-break: break-word
}

.pdl-scard[data-tone="bad"] .pdl-scard-v {
    color: var(--pdl-red)
}

.pdl-scard-l {
    font-family: var(--pdl-mono);
    font-size: 8.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--pdl-ink-3);
    margin-top: 9px;
    line-height: 1.5
}

.pdl-scard-s {
    font-size: 11.5px;
    color: var(--pdl-ink-3);
    margin-top: 5px
}

.pdl-alert {
    background: #FBF0F0;
    border-left: 3px solid var(--pdl-red);
    padding: 12px 14px;
    margin: 0 0 8px;
    font-size: 14px;
    border-radius: 0 5px 5px 0
}

    .pdl-alert[data-tone="ok"] {
        background: #EDF3EE;
        border-left-color: #2E6B3E;
        color: #1F4028
    }

/* ---------- admin: responsive table ---------- */
.pdl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px
}

    .pdl-table thead th {
        font-family: var(--pdl-mono);
        font-size: 8.5px;
        letter-spacing: .13em;
        text-transform: uppercase;
        color: var(--pdl-ink-3);
        text-align: left;
        font-weight: 400;
        padding: 0 12px 10px 0;
        border-bottom: 1px solid var(--pdl-line-2);
        white-space: nowrap;
    }

    .pdl-table tbody td {
        padding: 13px 12px 13px 0;
        border-bottom: 1px solid var(--pdl-line);
        vertical-align: top
    }

    .pdl-table tbody tr:last-child td {
        border-bottom: 0
    }

    .pdl-table .num {
        font-variant-numeric: tabular-nums;
        white-space: nowrap
    }

    .pdl-table .mono {
        font-family: var(--pdl-mono);
        font-size: 11px;
        color: var(--pdl-ink-3);
        word-break: break-all
    }

    .pdl-table .right {
        text-align: right;
        padding-right: 0
    }

.pdl-pill {
    display: inline-block;
    font-family: var(--pdl-mono);
    font-size: 8.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 100px;
    white-space: nowrap;
    background: #EDEAE5;
    color: var(--pdl-ink-2)
}

    .pdl-pill[data-tone="ok"] {
        background: #E6EFE8;
        color: #25563 0
    }

    .pdl-pill[data-tone="ok"] {
        background: #E6EFE8;
        color: #255630
    }

    .pdl-pill[data-tone="warn"] {
        background: #F5EEDC;
        color: #6B5410
    }

    .pdl-pill[data-tone="bad"] {
        background: #F7E3E3;
        color: #8A1414
    }

.pdl-mini {
    font-family: var(--pdl-mono);
    font-size: 10px;
    letter-spacing: .04em;
    padding: 7px 11px;
    border: 1px solid var(--pdl-line-2);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    color: var(--pdl-ink)
}

    .pdl-mini:hover {
        border-color: var(--pdl-ink)
    }

    .pdl-mini:disabled {
        opacity: .5;
        cursor: not-allowed
    }

    .pdl-mini[data-danger="1"] {
        color: var(--pdl-red);
        border-color: #E8C9C9
    }

        .pdl-mini[data-danger="1"]:hover {
            border-color: var(--pdl-red);
            background: #FBF0F0
        }

.pdl-empty {
    font-size: 14px;
    color: var(--pdl-ink-3);
    margin: 0;
    padding: 18px 0
}

/* Below 720px the table becomes stacked cards. Each cell carries its own
   label via data-label, so no horizontal scrolling and no truncation. */
@media(max-width:719px) {
    .pdl-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0)
    }

    .pdl-table, .pdl-table tbody, .pdl-table tr, .pdl-table td {
        display: block;
        width: 100%
    }

        .pdl-table tbody tr {
            background: var(--pdl-card);
            border: 1px solid var(--pdl-line);
            border-radius: 7px;
            padding: 13px 14px;
            margin-bottom: 9px;
        }

        .pdl-table tbody td {
            border: 0;
            padding: 5px 0;
            display: flex;
            justify-content: space-between;
            gap: 14px;
            align-items: baseline;
        }

            .pdl-table tbody td::before {
                content: attr(data-label);
                font-family: var(--pdl-mono);
                font-size: 8.5px;
                letter-spacing: .12em;
                text-transform: uppercase;
                color: var(--pdl-ink-3);
                flex: 0 0 auto;
                padding-top: 2px;
            }

            .pdl-table tbody td.right {
                justify-content: flex-end;
                padding-top: 10px
            }

                .pdl-table tbody td.right::before {
                    display: none
                }

        .pdl-table .mono {
            text-align: right
        }
}

/* ---------- pager ---------- */
.pdl-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 0 2px;
    margin-top: 4px;
    border-top: 1px solid var(--pdl-line)
}

.pdl-pager-count {
    font-family: var(--pdl-mono);
    font-size: 10px;
    letter-spacing: .08em;
    color: var(--pdl-ink-3)
}

.pdl-pager-nav {
    display: flex;
    align-items: center;
    gap: 8px
}

.pdl-pager-btn {
    font-family: var(--pdl-mono);
    font-size: 10px;
    letter-spacing: .04em;
    padding: 8px 12px;
    border: 1px solid var(--pdl-line-2);
    border-radius: 4px;
    background: transparent;
    color: var(--pdl-ink);
    cursor: pointer
}

    .pdl-pager-btn:hover:not(:disabled) {
        border-color: var(--pdl-ink)
    }

    .pdl-pager-btn:disabled {
        opacity: .35;
        cursor: not-allowed
    }

.pdl-pager-pos {
    font-family: var(--pdl-mono);
    font-size: 10px;
    color: var(--pdl-ink-3);
    min-width: 56px;
    text-align: center
}

/* ---------- filter bar ---------- */
.pdl-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px
}

.pdl-search {
    flex: 1 1 220px;
    min-width: 0;
    border: 1px solid var(--pdl-line-2);
    border-radius: 5px;
    background: var(--pdl-card);
    padding: 9px 12px;
    font-family: var(--pdl-body);
    font-size: 14px;
    color: var(--pdl-ink);
    outline: none
}

    .pdl-search:focus {
        border-color: var(--pdl-ink)
    }

    .pdl-search::placeholder {
        color: #B9B5AF
    }

.pdl-filter {
    font-family: var(--pdl-mono);
    font-size: 10px;
    letter-spacing: .04em;
    padding: 9px 12px;
    border: 1px solid var(--pdl-line-2);
    border-radius: 5px;
    background: var(--pdl-card);
    color: var(--pdl-ink-2);
    cursor: pointer
}

    .pdl-filter[aria-pressed="true"] {
        background: var(--pdl-black);
        border-color: var(--pdl-black);
        color: #fff
    }

@media(max-width:719px) {
    .pdl-pager {
        justify-content: center
    }

    .pdl-pager-nav {
        width: 100%;
        justify-content: space-between
    }

    .pdl-pager-btn {
        flex: 1
    }
}

/* ---------- shop ---------- */
/* Two columns from 380px up: on a phone, one tile per screen means scrolling
   past a single product to discover there is another. min() keeps the track
   from demanding more width than the viewport has. */
.pdl-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill,minmax(min(100%,150px),1fr))
}

@media(min-width:600px) {
    .pdl-grid {
        gap: 18px;
        grid-template-columns: repeat(auto-fill,minmax(min(100%,240px),1fr))
    }
}

.pdl-tile {
    background: var(--pdl-card);
    border: 1px solid var(--pdl-line);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease,transform .15s ease
}

    .pdl-tile:hover {
        border-color: var(--pdl-line-2);
        transform: translateY(-2px)
    }

.pdl-tile-img {
    position: relative;
    overflow: hidden;
    background: #EFEDE9;
    padding-bottom: 100%;
    height: 0
}

    .pdl-tile-img img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

.pdl-tile-body {
    padding: 14px 15px 16px
}

.pdl-tile-name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 4px;
    line-height: 1.3
}

.pdl-tile-price {
    font-family: var(--pdl-display);
    font-size: 26px;
    line-height: 1;
    color: var(--pdl-ink)
}

.pdl-tile-sub {
    font-size: 12px;
    color: var(--pdl-ink-3);
    margin-top: 6px
}

.pdl-soldout {
    position: absolute;
    inset: 0;
    background: rgba(247,247,245,.82);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pdl-mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pdl-ink-2)
}

/* product detail */
.pdl-item {
    display: grid;
    gap: 26px
}

.pdl-gallery {
    background: #EFEDE9;
    border: 1px solid var(--pdl-line);
    border-radius: 8px;
    overflow: hidden
}

.pdl-gallery-main {
    position: relative;
    padding-bottom: 100%;
    height: 0;
    overflow: hidden
}

    .pdl-gallery-main img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

.pdl-thumbs {
    display: flex;
    gap: 7px;
    padding: 9px;
    background: var(--pdl-card);
    border-top: 1px solid var(--pdl-line)
}

.pdl-thumb {
    width: 52px;
    height: 52px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--pdl-line-2);
    cursor: pointer;
    flex: 0 0 auto;
    padding: 0;
    background: none
}

    .pdl-thumb[aria-pressed="true"] {
        border-color: var(--pdl-ink)
    }

    .pdl-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

.pdl-item-price {
    font-family: var(--pdl-display);
    font-size: clamp(40px,11vw,54px);
    line-height: .9;
    margin: 4px 0 6px
}

.pdl-item-desc {
    font-size: 14.5px;
    color: var(--pdl-ink-2);
    white-space: pre-wrap;
    margin: 14px 0 0
}

.pdl-preload {
    margin: 16px 0 0;
    padding: 13px 14px;
    background: #F2F0EC;
    border-radius: 6px;
    font-size: 13.5px;
    color: var(--pdl-ink-2);
    line-height: 1.5
}

    .pdl-preload b {
        color: var(--pdl-ink)
    }

.pdl-qty {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px
}

    .pdl-qty button {
        width: 36px;
        height: 36px;
        border: 1px solid var(--pdl-line-2);
        border-radius: 5px;
        background: transparent;
        font-size: 18px;
        cursor: pointer;
        line-height: 1;
        color: var(--pdl-ink)
    }

        .pdl-qty button:disabled {
            opacity: .4;
            cursor: not-allowed
        }

    .pdl-qty span {
        font-family: var(--pdl-mono);
        font-size: 14px;
        min-width: 28px;
        text-align: center
    }

@media(min-width:860px) {
    .pdl-item {
        grid-template-columns: 1fr 1fr;
        gap: 44px;
        align-items: start
    }
}

.pdl-select {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--pdl-line-2);
    background: transparent;
    outline: none;
    font-family: var(--pdl-body);
    font-size: 16px;
    color: var(--pdl-ink);
    padding: 4px 0 7px;
    border-radius: 0;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%236E6B67' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center
}

    .pdl-select:focus {
        border-bottom-color: var(--pdl-red)
    }

    .pdl-select[aria-invalid="true"] {
        border-bottom-color: var(--pdl-red)
    }

/* ---------- product video ---------- */
.pdl-video {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--pdl-line)
}

.pdl-video-frame {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--pdl-line)
}

    .pdl-video-frame.vertical {
        padding-bottom: 125%
    }

    .pdl-video-frame iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0
    }

/* ---------- credit payment ---------- */
.pdl-credit {
    margin-top: 22px;
    padding: 15px 15px 16px;
    background: #F2F0EC;
    border-radius: 7px
}

.pdl-credit-row {
    display: flex;
    gap: 8px;
    align-items: stretch
}

.pdl-credit-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--pdl-line-2);
    border-radius: 5px;
    background: var(--pdl-card);
    padding: 10px 12px;
    font-family: var(--pdl-mono);
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--pdl-ink);
    outline: none;
    text-transform: uppercase
}

    .pdl-credit-input:focus {
        border-color: var(--pdl-ink)
    }

    .pdl-credit-input[aria-invalid="true"] {
        border-color: var(--pdl-red)
    }

.pdl-credit-applied {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 11px;
    padding: 10px 12px;
    background: #E6EFE8;
    border-radius: 5px;
    font-size: 13.5px;
    color: #255630
}

.pdl-linkbtn {
    background: none;
    border: 0;
    padding: 0;
    font-size: 12.5px;
    color: var(--pdl-red);
    cursor: pointer;
    text-decoration: underline;
    font-family: var(--pdl-body)
}
/* ---------- product description ---------- */
/*
   Clamped rather than put in a scrollable box. A nested scroll area fights
   page scroll on touch — a swipe meant for the page moves the description
   instead — and the problem being solved is only that the buy button was
   pushed off the fold. A clamp fixes that without introducing a second
   scroll surface.
*/
.pdl-desc-wrap {
    position: relative;
    margin-top: 14px;
    overflow: hidden;
    max-height: 180px;
    transition: max-height .28s ease
}

    .pdl-desc-wrap[data-open="1"] {
        max-height: none
    }

.pdl-desc-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    pointer-events: none;
    background: linear-gradient(to bottom,rgba(247,247,245,0),var(--pdl-page))
}

.pdl-desc-wrap[data-open="1"] .pdl-desc-fade {
    display: none
}

.pdl-readmore {
    margin-top: 8px;
    background: none;
    border: 0;
    padding: 6px 0;
    font-family: var(--pdl-mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pdl-red);
    cursor: pointer;
    min-height: 36px
}

    .pdl-readmore:hover {
        color: var(--pdl-red-dk)
    }

/* The editor produces headings, lists and paragraphs. Left unstyled they
   render at browser defaults, which in this typography reads as broken. */
.pdl-item-desc {
    font-size: 14.5px;
    color: var(--pdl-ink-2);
    line-height: 1.65
}

    .pdl-item-desc p {
        margin: 0 0 11px
    }

    .pdl-item-desc h3, .pdl-item-desc h4, .pdl-item-desc h5 {
        font-family: var(--pdl-body);
        font-size: 14.5px;
        font-weight: 600;
        color: var(--pdl-ink);
        margin: 18px 0 7px;
        letter-spacing: -.01em;
        line-height: 1.35
    }

        .pdl-item-desc h3:first-child, .pdl-item-desc h4:first-child {
            margin-top: 0
        }

    .pdl-item-desc strong, .pdl-item-desc b {
        color: var(--pdl-ink);
        font-weight: 600
    }

    .pdl-item-desc ul, .pdl-item-desc ol {
        margin: 0 0 12px;
        padding-left: 0;
        list-style: none
    }

        .pdl-item-desc ul li {
            position: relative;
            padding-left: 16px;
            margin-bottom: 6px
        }

            .pdl-item-desc ul li::before {
                content: "";
                position: absolute;
                left: 2px;
                top: 9px;
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background: var(--pdl-red)
            }

    .pdl-item-desc ol {
        counter-reset: pdl-ol;
        padding-left: 0
    }

        .pdl-item-desc ol li {
            position: relative;
            padding-left: 20px;
            margin-bottom: 6px;
            counter-increment: pdl-ol
        }

            .pdl-item-desc ol li::before {
                content: counter(pdl-ol) ".";
                position: absolute;
                left: 0;
                font-family: var(--pdl-mono);
                font-size: 11px;
                color: var(--pdl-red);
                top: 2px
            }

    .pdl-item-desc a {
        color: var(--pdl-red)
    }

    .pdl-item-desc > *:last-child {
        margin-bottom: 0
    }

/* ---------- product video ---------- */
.pdl-video-head {
    font-family: var(--pdl-mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pdl-ink-3);
    margin-bottom: 10px
}

/* ============================================================
   MOBILE
   Written last so these win without needing !important.
   Target is a 320px screen on an older browser, not a new iPhone.
   ============================================================ */
@media(max-width:599px) {

    /* Tighter tiles: at 320px, 15px of padding each side leaves very
     little for the words that actually sell the thing. */
    .pdl-tile-body {
        padding: 10px 11px 12px
    }

    .pdl-tile-name {
        font-size: 13.5px;
        line-height: 1.25
    }

    .pdl-tile-price {
        font-size: 21px
    }

    .pdl-tile-sub {
        font-size: 11px;
        margin-top: 4px
    }

    /* Product page: gallery first, and the buy form below it. */
    .pdl-item {
        gap: 20px
    }

    .pdl-thumbs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 8px
    }

        .pdl-thumbs::-webkit-scrollbar {
            display: none
        }

    .pdl-thumb {
        width: 46px;
        height: 46px
    }

    /* The ticket is the payment surface; it must never be cut off. */
    .pdl-ticket {
        max-width: 100%
    }

    .pdl-stub-a, .pdl-stub-b {
        padding: 18px 16px
    }

    /* 16px minimum on every input. Below that, iOS Safari zooms the page
     on focus and the buyer is left scrolled sideways mid-checkout. */
    input, select, textarea {
        font-size: 16px !important
    }

    .pdl-credit-row {
        flex-wrap: wrap
    }

    .pdl-credit-input {
        flex: 1 1 100%
    }

    .pdl-credit-row .pdl-mini {
        flex: 1 1 100%;
        padding: 11px
    }

    .pdl-methods {
        grid-template-columns: 1fr
    }

    /* Touch targets. 44px is the smallest reliably hittable with a thumb. */
    .pdl-cta {
        padding: 16px;
        font-size: 23px
    }

    .pdl-mini, .pdl-chip, .pdl-filter {
        min-height: 40px
    }

    .pdl-qty button {
        width: 44px;
        height: 44px
    }

    /* Org band stacks; the link becomes full width rather than a
     stranded pill under a paragraph. */
    .pdl-org {
        padding: 20px 18px
    }

        .pdl-org a {
            width: 100%;
            text-align: center
        }

    .pdl-cards {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .pdl-scard {
        padding: 12px 12px 13px
    }

    .pdl-scard-v {
        font-size: 24px
    }

    .pdl-filters {
        gap: 6px
    }

    .pdl-search {
        flex: 1 1 100%
    }

    h1 {
        font-size: clamp(34px,9.5vw,48px)
    }

    .pdl-card {
        padding: 22px 18px
    }

    .pdl-total {
        font-size: 44px
    }
}

/* Very small screens still exist in this market. */
@media(max-width:359px) {
    :root {
        --pdl-gut: 14px
    }

    .pdl-grid {
        grid-template-columns: 1fr
    }

    .pdl-cards {
        grid-template-columns: 1fr
    }

    .pdl-tile-price {
        font-size: 19px
    }
}

/* Landscape phones: a fixed-height hero would eat the whole screen. */
@media(max-height:480px) and (orientation:landscape) {
    .pdl-hero {
        padding: 24px 0 0
    }

    .pdl-ticket-zone {
        padding: 18px 0 0
    }
}

/* ---------- account chooser ---------- */
.pdl-account-pick {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--pdl-card);
    border: 1px solid var(--pdl-line-2);
    border-radius: 6px;
    padding: 14px 15px;
    margin-bottom: 9px;
    cursor: pointer;
    font-family: var(--pdl-body);
    transition: border-color .15s ease
}

    .pdl-account-pick:hover {
        border-color: var(--pdl-ink)
    }

    .pdl-account-pick:disabled {
        opacity: .5;
        cursor: not-allowed
    }

.pdl-account-phone {
    display: block;
    font-family: var(--pdl-mono);
    font-size: 14px;
    letter-spacing: .06em;
    color: var(--pdl-ink)
}

.pdl-account-meta {
    display: block;
    font-size: 12.5px;
    color: var(--pdl-ink-3);
    margin-top: 5px
}

/* ---------- pandley id ---------- */
.pdl-idrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--pdl-line);
    flex-wrap: wrap
}

.pdl-idlabel {
    font-family: var(--pdl-mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pdl-ink-3)
}

.pdl-idvalue {
    font-family: var(--pdl-mono);
    font-size: 16px;
    letter-spacing: .1em;
    color: var(--pdl-ink);
    margin-top: 5px
}

.pdl-idnote {
    font-size: 12px;
    color: var(--pdl-ink-3);
    margin: 10px 0 0;
    line-height: 1.5
}