/*
 * Pusė Dainos - Y2K / Neocities design system
 *
 * Brandbook palette only: cobalt, ink, paper (+ card/metal tints derived
 * from paper). Fonts: Coolvetica for display, Doto for dot-matrix labels,
 * system UI for body text.
 *
 * Small Doto text never sits directly on the dot-grid background; it always
 * gets a solid backing (window, badge, card, box).
 */

@font-face {
    font-family: Coolvetica;
    src: local("Coolvetica"), local("Coolvetica Regular"), local("Coolvetica-Regular"),
         url("/assets/fonts/coolvetica.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --pd-cobalt: #001698;
    --pd-cobalt-hi: #1d36c6;
    --pd-peri: #5d73ff;
    --pd-ink: #070707;
    --pd-paper: #E3E4DB;
    --pd-card: #f6f6f2;
    --pd-muted: #47483f;
    --pd-soft: #5f6058;
    --pd-line: #c8c9be;
    --pd-stripe-a: #d4d5ca;
    --pd-zebra: rgba(227,228,219,.5);

    --pd-metal: repeating-linear-gradient(90deg, rgba(255,255,255,.45) 0 1px, rgba(0,0,0,.03) 1px 3px),
                linear-gradient(180deg, #f7f7f2, #d2d3c8);
    --pd-lcd: linear-gradient(180deg, #eeefe8, #dadbd0);
    --pd-lcd-inset: inset 0 2px 4px rgba(7,7,7,.2);
    --pd-aqua: linear-gradient(180deg, var(--pd-cobalt-hi), var(--pd-cobalt));
    --pd-aqua-paper: linear-gradient(180deg, #fbfbf8, #e6e7df);
    --pd-placeholder: repeating-linear-gradient(135deg, var(--pd-stripe-a) 0 8px, var(--pd-paper) 8px 16px);
    /* Faint paper dots for cobalt panels; size them with background-size. */
    --pd-dots-paper: radial-gradient(rgba(227,228,219,.16) 1.2px, transparent 1.6px);

    --pd-font-display: Coolvetica, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --pd-font-dot: Doto, ui-monospace, "SF Mono", Menlo, monospace;
    --pd-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --pd-shadow: 6px 6px 0 var(--pd-ink);
    --pd-shadow-sm: 3px 3px 0 var(--pd-ink);
    --pd-radius: 10px;
    --pd-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ===== Base ===== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--pd-font-ui);
    font-size: 15px;
    line-height: 1.5;
    color: var(--pd-ink);
    background-color: var(--pd-paper);
    background-image: radial-gradient(var(--pd-cobalt) 1.2px, transparent 1.6px);
    background-size: 16px 16px;
    -webkit-font-smoothing: antialiased;
}

body.pd-body--artist {
    background-color: #d0d5ea;
    background-image: repeating-linear-gradient(45deg, #c9cfe6 0 16px, #d6dbee 16px 32px);
    background-size: auto;
}

body.pd-body--artist.pd-body--custom-bg {
    background-color: var(--pd-paper);
    background-image: var(--korta-bg);
    background-repeat: repeat;
    background-position: center top;
    background-size: auto;
}

a { color: var(--pd-cobalt); text-decoration: none; }
a:hover { color: var(--pd-ink); text-decoration: underline; }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 { margin: 0; }

p { margin: 0 0 12px; }

code {
    font-family: var(--pd-font-dot);
    font-weight: 800;
    background: var(--pd-card);
    border: 1px solid var(--pd-ink);
    padding: 0 4px;
}

:focus-visible {
    outline: 3px solid var(--pd-cobalt);
    outline-offset: 2px;
}
/* Cobalt rings vanish on cobalt and ink surfaces, so those get a paper ring.
   Title bars stay light metal, so only window bodies are targeted. */
.pd-win--cobalt > .pd-win-body :focus-visible,
.pd-win--ink > .pd-win-body :focus-visible,
.pd-summary :focus-visible,
.korta-claim-strip :focus-visible,
.korta-impersonate :focus-visible,
.korta-flash--success :focus-visible,
.korta-flash--error :focus-visible,
.pd-footer :focus-visible,
.pd-marquee:focus-visible,
.pd-marquee :focus-visible { outline-color: var(--pd-paper); }

.pd-dot { font-family: var(--pd-font-dot); font-weight: 900; }

.pd-display {
    font-family: var(--pd-font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pd-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.pd-skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100;
    padding: 8px 14px;
    background: var(--pd-cobalt);
    color: var(--pd-paper);
    border: 2px solid var(--pd-ink);
    font-weight: 700;
}
.pd-skip-link:focus { top: 12px; color: var(--pd-paper); }

/* ===== Marquee ===== */

@keyframes pdMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.pd-marquee {
    height: 36px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--pd-ink);
    color: var(--pd-paper);
    border-bottom: 2px solid var(--pd-ink);
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 16px;
    white-space: nowrap;
}
.pd-marquee--cobalt { background: var(--pd-cobalt); }
.pd-marquee:focus-visible { outline-offset: -3px; }

.pd-marquee-track {
    display: flex;
    flex: none;
    animation: pdMarquee 28s linear infinite;
    will-change: transform;
}
/* 1ch is one Doto space, so the seam between copies reads ' ✦ ' like the rest. */
.pd-marquee-track > span { flex: none; padding-right: 1ch; }
.pd-marquee:hover .pd-marquee-track,
.pd-marquee:focus .pd-marquee-track,
.pd-marquee:focus-within .pd-marquee-track { animation-play-state: paused; }

/* ===== Impersonation bar ===== */

.korta-impersonate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 6px 16px;
    background: var(--pd-cobalt);
    color: var(--pd-paper);
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 13px;
    border-bottom: 2px solid var(--pd-ink);
}
/* A compact pill keeps the bar about 42px tall; a long name wraps. */
.korta-impersonate .korta-btn { min-height: 30px; padding: 0 14px; font-size: 13px; box-shadow: 2px 2px 0 var(--pd-ink), inset 0 1px 0 rgba(255,255,255,.28); }
.korta-impersonate > span { min-width: 0; text-align: center; }

/* ===== Top bar ===== */

.pd-shell {
    width: 100%;
    max-width: 1344px;
    margin: 0 auto;
    /* Longhands only: the shell shares elements with .pd-layout, .pd-top,
       .pd-artist-top and .pd-footer-inner, which own their vertical padding. */
    padding-left: 32px;
    padding-right: 32px;
}

.pd-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 32px;
    align-items: center;
    /* Room for the BETA circle under the marquee. */
    padding-top: 38px;
    padding-bottom: 24px;
}

.pd-logo {
    position: relative;
    display: inline-block;
    transform: rotate(-4deg);
    background: var(--pd-paper);
    /* Tall top padding: the .8 line box is shorter than the Ė dot, and the
       tilt lifts the border on the right where the Ė sits. */
    padding: 18px 14px 10px;
    border: 2px solid var(--pd-ink);
    box-shadow: 6px 6px 0 var(--pd-cobalt);
    color: var(--pd-cobalt);
    transition: transform .18s var(--pd-ease);
}
.pd-logo:hover { transform: rotate(-2deg) scale(1.03); text-decoration: none; color: var(--pd-cobalt); }

.pd-logo-word {
    display: block;
    font-family: var(--pd-font-display);
    font-weight: 700;
    font-size: 58px;
    line-height: .8;
    letter-spacing: -0.01em;
}
.pd-logo-word > span { display: block; }
.pd-logo-word > span + span { padding-left: .62em; }

.pd-logo-beta {
    position: absolute;
    top: -20px;
    right: -28px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--pd-ink);
    border: 2px solid var(--pd-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(14deg);
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 13px;
    color: var(--pd-paper);
}

.pd-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pd-tab {
    min-width: 120px;
    height: 40px;
    padding: 0 12px;
    border: 2px solid var(--pd-ink);
    background: var(--pd-card);
    color: var(--pd-cobalt);
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: var(--pd-shadow-sm);
    white-space: nowrap;
    transition: transform .1s var(--pd-ease), box-shadow .1s var(--pd-ease);
}
.pd-tab:hover {
    text-decoration: none;
    color: var(--pd-cobalt);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--pd-ink);
}
.pd-tab:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--pd-ink); }
.pd-tab.is-current { background: var(--pd-cobalt); color: var(--pd-paper); }
.pd-tab--cart { background: var(--pd-ink); color: var(--pd-paper); box-shadow: 3px 3px 0 var(--pd-cobalt); }
.pd-tab--cart:hover { color: var(--pd-paper); box-shadow: 4px 4px 0 var(--pd-cobalt); }
.pd-tab--cart.is-current { background: var(--pd-cobalt); box-shadow: var(--pd-shadow-sm); }
.pd-tab--cart.is-current:hover { box-shadow: 4px 4px 0 var(--pd-ink); }

.pd-search {
    position: relative;
    width: 270px; /* lines up with the 270px right rail */
    height: 40px;
}
.pd-search input {
    width: 100%;
    height: 100%;
    padding: 0 40px 0 12px;
    border: 2px solid var(--pd-ink);
    border-radius: 0;
    background: #fff;
    box-shadow: inset 2px 2px 0 var(--pd-line);
    font: inherit;
    font-size: 14px;
    color: var(--pd-ink);
    -webkit-appearance: none;
    appearance: none;
}
.pd-search input::placeholder { color: var(--pd-soft); }
.pd-search button {
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    width: 36px;
    border: 0;
    background: transparent;
    color: var(--pd-cobalt);
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 20px;
    cursor: pointer;
}
.pd-search button:hover { background: var(--pd-cobalt); color: var(--pd-paper); }

/* Logged out: a "Pradėk" pill joins the header. On wide screens it stacks
   above the search, so the four tabs keep the width they have without it;
   narrower screens move it (see below). */
@media (min-width: 1181px) {
    .pd-top--start { grid-template-columns: auto 1fr auto; grid-template-rows: 1fr 1fr; row-gap: 12px; }
    .pd-top--start .pd-logo { grid-row: 1 / 3; }
    .pd-top--start .pd-nav { grid-row: 1 / 3; align-self: center; }
    .pd-top-start { grid-column: 3; grid-row: 1; justify-self: end; align-self: end; }
    .pd-top--start .pd-search { grid-column: 3; grid-row: 2; align-self: start; }
}

/* Artist page top row */

.pd-artist-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-top: 18px;
    padding-bottom: 18px;
}
/* Back on the left, cart on the right: one-line nav badges, not the 88x31
   decorative ones the footer and rails keep. */
.pd-artist-top .pd-badge { width: auto; height: 36px; padding: 0 14px; font-size: 12px; white-space: nowrap; }

/* ===== Layout ===== */

.pd-main-wrap { flex: 1; }

.pd-layout {
    display: grid;
    gap: 28px;
    align-items: start;
    padding-top: 8px;
    padding-bottom: 40px;
}
.pd-layout--site { grid-template-columns: 230px minmax(0, 1fr); grid-template-areas: "left main"; }
.pd-layout--home { grid-template-columns: 230px minmax(0, 1fr) 270px; grid-template-areas: "left main right"; }
.pd-layout--artist { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; padding-top: 0; }

.pd-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
/* <main> takes focus (tabindex -1) when a focused window closes; no ring needed. */
.pd-main:focus { outline: none; }
.pd-rail { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.pd-rail--left { grid-area: left; }
.pd-rail--right { grid-area: right; }
.pd-rail--left > .pd-badges { justify-content: center; }

/* ===== Windows ===== */

.pd-win {
    position: relative;
    border: 2px solid var(--pd-ink);
    border-radius: var(--pd-radius);
    background: var(--pd-card);
    box-shadow: var(--pd-shadow);
    opacity: 1;
    scale: 1;
    transition: opacity .12s ease, scale .12s ease;
}
.pd-win[hidden] { display: none !important; }
.pd-win.is-closing,
.pd-win.is-dragging { transition: none; cursor: grabbing; }
.pd-win.is-raised { z-index: 20; }

.pd-win--shadow-cobalt { box-shadow: 6px 6px 0 var(--pd-cobalt); }
.pd-win--big { border-radius: 12px; box-shadow: 8px 8px 0 var(--pd-ink); }
.pd-win--big.pd-win--shadow-cobalt { box-shadow: 8px 8px 0 var(--pd-cobalt); }
.pd-win--tilt-l { rotate: -1.5deg; }
.pd-win--tilt-r { rotate: 1.5deg; }
.pd-win--ink { background: var(--pd-ink); color: var(--pd-paper); }
.pd-win--cobalt { background: var(--pd-cobalt); color: var(--pd-paper); }

.pd-win-bar {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 10px;
    border-bottom: 2px solid var(--pd-ink);
    border-radius: calc(var(--pd-radius) - 2px) calc(var(--pd-radius) - 2px) 0 0;
    background: var(--pd-metal);
    color: var(--pd-ink);
    user-select: none;
}
.pd-win--big > .pd-win-bar { height: 32px; padding: 0 12px; border-radius: 10px 10px 0 0; }
.pd-win.is-draggable > .pd-win-bar { cursor: grab; }

.pd-win-title {
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.pd-win-meta {
    margin-left: auto;
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 12px;
    color: var(--pd-cobalt);
    white-space: nowrap;
}

.pd-win-close {
    flex: none;
    width: 17px;
    height: 17px;
    padding: 0;
    border: 1.5px solid var(--pd-ink);
    border-radius: 3px;
    background: #fff;
    color: var(--pd-ink);
    font: 800 12px/13px var(--pd-font-ui);
    cursor: pointer;
    position: relative;
}
/* Bigger hit area without changing the 17px look. */
.pd-win-close::after { content: ""; position: absolute; inset: -7px; }
.pd-win-close:hover,
.pd-win-close:focus-visible { background: var(--pd-cobalt); color: #fff; }

.pd-win-body { padding: 14px; }
.pd-win-body--flush { padding: 0; }
.pd-win-body--roomy { padding: 22px 26px 26px; }

.pd-win--main { min-width: 0; }
.pd-win--narrow { max-width: 460px; width: 100%; }
.pd-win--form { max-width: 760px; width: 100%; }

/* ===== Menu window ===== */

.pd-menu { list-style: none; margin: 0; padding: 6px 0; }
.pd-menu a {
    padding: 9px 14px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    gap: 8px;
    color: var(--pd-ink);
}
.pd-menu a::before { content: "★"; content: "★" / ""; color: var(--pd-cobalt); }
.pd-menu a:hover { background: var(--pd-paper); text-decoration: none; }
.pd-menu a.is-current { background: var(--pd-cobalt); color: var(--pd-paper); font-weight: 700; }
.pd-menu a.is-current::before { color: var(--pd-paper); }
.pd-menu-sep { height: 2px; margin: 6px 14px; background: repeating-linear-gradient(90deg, var(--pd-ink) 0 3px, transparent 3px 6px); }

/* ===== Visitor counter ===== */

.pd-counter-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.pd-counter { display: flex; gap: 3px; }
.pd-counter > span {
    width: 28px;
    height: 40px;
    background: var(--pd-ink);
    color: var(--pd-paper);
    border-radius: 4px;
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.6);
}
.pd-counter--long > span { width: 19px; height: 30px; font-size: 20px; }
.pd-counter-caption {
    font-family: var(--pd-font-dot);
    font-weight: 800;
    font-size: 12px;
    color: var(--pd-muted);
}

/* ===== 88x31 badges ===== */

.pd-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-badges--grid { display: grid; grid-template-columns: repeat(2, 88px); gap: 10px; justify-content: center; }

.pd-badge {
    width: 88px;
    height: 31px;
    flex: none;
    border: 1px solid var(--pd-ink);
    background: var(--pd-cobalt);
    color: var(--pd-paper);
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 10px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 4px;
    overflow: hidden;
    text-transform: uppercase;
    word-break: break-word;
}
a.pd-badge:hover { text-decoration: none; filter: none; background: var(--pd-ink); color: var(--pd-paper); }
a.pd-badge--ink:hover,
a.pd-badge--ink-peri:hover { background: var(--pd-cobalt); color: var(--pd-paper); }
.pd-badge--paper { background: var(--pd-paper); color: var(--pd-cobalt); }
.pd-badge--card { background: var(--pd-card); color: var(--pd-ink); }
.pd-badge--ink { background: var(--pd-ink); color: var(--pd-paper); }
.pd-badge--ink-peri { background: var(--pd-ink); color: var(--pd-peri); }
.pd-badge--stripe { background: repeating-linear-gradient(45deg, var(--pd-ink) 0 4px, var(--pd-cobalt) 4px 8px); color: var(--pd-paper); }
.pd-badge--bars { background: repeating-linear-gradient(90deg, var(--pd-cobalt) 0 3px, var(--pd-ink) 3px 6px); color: var(--pd-paper); }
/* Ink outline keeps the dot letters readable over the stripes. */
.pd-badge--stripe,
.pd-badge--bars { text-shadow: 1px 0 0 var(--pd-ink), -1px 0 0 var(--pd-ink), 0 1px 0 var(--pd-ink), 0 -1px 0 var(--pd-ink); }
.pd-badge--small-text { font-size: 9px; line-height: 1.05; }
.pd-badge--shadow { box-shadow: var(--pd-shadow-sm); }
.pd-badge--shadow-cobalt { box-shadow: 3px 3px 0 var(--pd-cobalt); }

.pd-badge-more {
    margin-top: 14px;
    height: 36px;
    border: 2px solid var(--pd-ink);
    background: var(--pd-card);
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 13px;
    color: var(--pd-cobalt);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--pd-shadow-sm);
    transition: transform .1s var(--pd-ease), box-shadow .1s var(--pd-ease);
}
.pd-badge-more:hover {
    text-decoration: none;
    color: var(--pd-cobalt);
    background: var(--pd-card);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--pd-ink);
}

/* ===== Buttons ===== */

.pd-pill,
.korta-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 20px;
    border: 2px solid var(--pd-ink);
    border-radius: 999px;
    background: var(--pd-aqua);
    color: #fff;
    font: 700 14px/1.1 var(--pd-font-ui);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--pd-ink), inset 0 1px 0 rgba(255,255,255,.28);
    transition: transform .1s var(--pd-ease), box-shadow .1s var(--pd-ease), background .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.pd-pill::after,
.korta-btn::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 3px;
    height: 40%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0));
    pointer-events: none;
}
.pd-pill:hover,
.korta-btn:hover {
    color: #fff;
    text-decoration: none;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--pd-ink), inset 0 1px 0 rgba(255,255,255,.28);
}
.pd-pill:active,
.korta-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--pd-ink); }
.pd-pill:disabled,
.korta-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.pd-pill--paper,
.korta-btn--ghost {
    background: var(--pd-aqua-paper);
    color: var(--pd-cobalt);
}
.pd-pill--paper::after,
.korta-btn--ghost::after { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0)); }
.pd-pill--paper:hover,
.korta-btn--ghost:hover { color: var(--pd-cobalt); }

.korta-btn--danger { background: linear-gradient(180deg, #2a2a2a, var(--pd-ink)); color: var(--pd-paper); }
.korta-btn--danger:hover { color: var(--pd-paper); }

.pd-pill--lg,
.korta-btn--lg { min-height: 46px; padding: 0 22px; font-size: 15px; box-shadow: 4px 4px 0 var(--pd-ink), inset 0 1px 0 rgba(255,255,255,.28); }
.pd-pill--on-dark { border-color: var(--pd-paper); }
/* On ink panels the ink outline and shadow disappear: paper rim, peri shadow. */
.pd-win--ink .pd-pill,
.korta-claim-strip .korta-btn { border-color: var(--pd-paper); box-shadow: 3px 3px 0 var(--pd-peri), inset 0 1px 0 rgba(255,255,255,.28); }
.pd-win--ink .pd-pill:hover,
.korta-claim-strip .korta-btn:hover { box-shadow: 4px 4px 0 var(--pd-peri), inset 0 1px 0 rgba(255,255,255,.28); }
.pd-win--ink .pd-pill:active,
.korta-claim-strip .korta-btn:active { box-shadow: 1px 1px 0 var(--pd-peri); }

.pd-chunky {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 2px solid var(--pd-ink);
    background: var(--pd-card);
    color: var(--pd-cobalt);
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 13px;
    box-shadow: var(--pd-shadow-sm);
    white-space: nowrap;
    cursor: pointer;
    transition: transform .1s var(--pd-ease), box-shadow .1s var(--pd-ease);
}
/* Same lift and press as .pd-tab, so every square Doto button behaves alike. */
.pd-chunky:hover {
    text-decoration: none;
    color: var(--pd-cobalt);
    background: var(--pd-card);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--pd-ink);
}
.pd-chunky.is-active { background: var(--pd-cobalt); color: var(--pd-paper); }
.pd-chunky.is-active:hover { background: var(--pd-cobalt); color: var(--pd-paper); }
.pd-chunky:active,
.pd-badge-more:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--pd-ink); }
.pd-chunky.is-disabled { opacity: .4; pointer-events: none; }

.korta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.korta-actions form { margin: 0; }

/* ===== LCD box ===== */

.pd-lcd {
    border: 2px solid var(--pd-ink);
    border-radius: 8px;
    background: var(--pd-lcd);
    box-shadow: var(--pd-lcd-inset);
    font-family: var(--pd-font-dot);
    font-weight: 800;
    color: var(--pd-cobalt);
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.4;
}
.pd-lcd--shadow { box-shadow: 5px 5px 0 var(--pd-ink); }

/* ===== Section heading ===== */

.pd-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--pd-paper);
    border: 2px solid var(--pd-ink);
    border-radius: var(--pd-radius);
    padding: 10px 16px;
    box-shadow: 5px 5px 0 var(--pd-ink);
}
.pd-heading h1,
.pd-heading h2 {
    font-family: var(--pd-font-display);
    font-weight: 700;
    font-size: 56px;
    line-height: .9;
    color: var(--pd-cobalt);
    letter-spacing: -0.01em;
    min-width: 0;
}
.pd-heading-stars { font-family: var(--pd-font-dot); font-weight: 900; font-size: 16px; color: var(--pd-cobalt); white-space: nowrap; }
.pd-heading-rule { flex: 1; height: 3px; background: var(--pd-ink); min-width: 20px; }
/* The padding/margin pair grows the tap area without moving the text. */
.pd-heading-link { font-family: var(--pd-font-dot); font-weight: 900; font-size: 13px; white-space: nowrap; padding: 12px 0; margin: -12px 0; }
.pd-heading > .korta-btn,
.pd-heading > .pd-pill { flex: none; }

.pd-section { display: flex; flex-direction: column; gap: 20px; }

/* ===== Polaroid, tape, stickers ===== */

.pd-polaroid {
    position: relative;
    display: block;
    background: var(--pd-card);
    padding: 10px 10px 36px;
    box-shadow: 0 14px 24px -8px rgba(0,0,0,.6);
}
.pd-polaroid-img {
    aspect-ratio: 1;
    width: 100%;
    background: var(--pd-placeholder);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 13px;
    color: #5a5b52;
}
.pd-polaroid-img img { width: 100%; height: 100%; object-fit: cover; }
.pd-polaroid-caption {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 13px;
    color: var(--pd-ink);
    padding: 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-tape {
    position: absolute;
    width: 90px;
    height: 24px;
    background: rgba(227,228,219,.78);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    pointer-events: none;
}

.pd-sticker {
    position: absolute;
    border-radius: 50%;
    border: 2px solid var(--pd-ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
    font-family: var(--pd-font-dot);
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

/* ===== Featured window ===== */

.pd-feature {
    position: relative;
    padding: 36px 32px 32px;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 36px;
    align-items: center;
    color: var(--pd-paper);
    overflow: hidden;
    border-radius: 0 0 10px 10px;
}
.pd-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--pd-dots-paper);
    background-size: 12px 12px;
    pointer-events: none;
}
.pd-feature-photo { position: relative; rotate: -4deg; color: inherit; }
.pd-feature-photo:hover { text-decoration: none; rotate: -2deg; }
.pd-feature-photo .pd-tape--a { top: -10px; left: 30%; rotate: 6deg; }
.pd-feature-photo .pd-tape--b { bottom: -8px; right: -14px; width: 70px; height: 22px; rotate: -38deg; }
.pd-feature-info { position: relative; display: flex; flex-direction: column; gap: 18px; min-width: 0; container-type: inline-size; }
/* --len is the longest word (pdNameLen), so the name shrinks to keep every
   word whole in the info column; 72px stays as the fallback. */
.pd-feature-name {
    font-family: var(--pd-font-display);
    font-weight: 700;
    font-size: 72px;
    font-size: clamp(28px, calc(180cqi / var(--len, 8)), 72px);
    line-height: .85;
    letter-spacing: -0.01em;
    text-shadow: 4px 4px 0 var(--pd-ink);
    overflow-wrap: break-word;
}
.pd-feature-name a { color: inherit; }
.pd-feature-name a:hover { text-decoration: none; color: inherit; }
.pd-feature-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pd-feature-hint { font-family: var(--pd-font-dot); font-weight: 900; font-size: 13px; }
/* On the polaroid's top-right corner, clear of the name column. */
.pd-feature .pd-sticker {
    top: 12px;
    left: 224px;
    right: auto;
    width: 84px;
    height: 84px;
    background: var(--pd-paper);
    color: var(--pd-cobalt);
    box-shadow: var(--pd-shadow-sm);
    rotate: -12deg;
    font-size: 14px;
}

/* ===== Merch cards ===== */

.pd-merch-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 24px;
    padding: 14px 12px 0 0;
}
.pd-merch-grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Artist page: as many 160px+ columns as fit. Two classes so the 900px
   two-column rule for the other grids does not override it. */
.pd-merch-grid.pd-merch-grid--two { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.pd-merch-card {
    position: relative;
    rotate: var(--rot, 0deg);
    background: var(--pd-card);
    border: 2px solid var(--pd-ink);
    border-radius: var(--pd-radius);
    padding: 10px;
    box-shadow: 5px 5px 0 var(--pd-ink);
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--pd-ink);
    transition: rotate .18s var(--pd-ease), translate .18s var(--pd-ease), box-shadow .18s var(--pd-ease);
}
.pd-merch-card:hover,
.pd-merch-card:focus-within {
    rotate: 0deg;
    translate: -2px -2px;
    box-shadow: 7px 7px 0 var(--pd-ink);
}
a.pd-merch-card:hover { text-decoration: none; color: var(--pd-ink); }
.pd-merch-card--invite { border-style: dashed; }
.pd-merch-card--invite .pd-merch-cover { font-size: 72px; color: var(--pd-cobalt); background: var(--pd-card); border-style: dashed; }
.pd-merch-card.is-shuffle-win { box-shadow: 7px 7px 0 var(--pd-cobalt); outline: 3px solid var(--pd-cobalt); outline-offset: 4px; }
/* Invite cards past the last full row at 3 and 2 columns (templates/merch-grid.php). */
@media (min-width: 601px) and (max-width: 1180px) {
    .pd-merch-grid--wide > .pd-merch-card--hide-3 { display: none; }
}
@media (max-width: 600px) {
    .pd-merch-grid--wide > .pd-merch-card--hide-2 { display: none; }
}

.pd-merch-cover {
    aspect-ratio: 1.15;
    border-radius: 6px;
    border: 1.5px solid var(--pd-ink);
    background: var(--pd-placeholder);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 12px;
    color: #5a5b52;
    container-type: inline-size;
}
.pd-merch-cover img { width: 100%; height: 100%; object-fit: cover; }
/* Products without a photo show their own name on a solid chip. The
   card-coloured border stands in for vertical padding: overflow clips inside
   it, so a clamped fourth line never peeks out. The ink frame is the outline. */
.pd-merch-ph {
    max-width: 82%;
    padding: 0 4px;
    background: var(--pd-card);
    border: 4px solid var(--pd-card);
    outline: 2px solid var(--pd-ink);
    color: var(--pd-cobalt);
    font: 900 12px/1.25 var(--pd-font-dot);
    text-align: center;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
/* Narrow covers (compact artist cards, 320px grids): smaller chip text so
   whole words such as MARŠKINĖLIAI fit on a line. */
@container (max-width: 130px) {
    .pd-merch-ph { max-width: 94%; font-size: 10px; letter-spacing: -0.02em; }
}

.pd-merch-info { display: flex; flex-direction: column; gap: 2px; padding: 0 4px 4px; }
.pd-merch-artist { font-family: var(--pd-font-dot); font-weight: 900; font-size: 12px; color: var(--pd-cobalt); text-transform: uppercase; }
.pd-merch-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.25; }
.pd-merch-desc { font-size: 13px; color: var(--pd-muted); margin: 2px 0 0; }

.pd-merch-form { display: flex; flex-direction: column; gap: 8px; padding: 0 4px 4px; margin-top: auto; }
.pd-merch-form select {
    width: 100%;
    padding: 6px 28px 6px 10px;
    background-position: calc(100% - 15px) 50%, calc(100% - 9px) 50%;
    text-overflow: ellipsis;
}
.pd-merch-form .korta-btn { width: 100%; }
/* 320px: a slimmer arrow gutter so "Variantas" shows whole (still 16px text). */
@media (max-width: 339px) {
    .pd-merch-form select { padding-left: 8px; padding-right: 22px; background-position: calc(100% - 12px) 50%, calc(100% - 6px) 50%; }
}
.pd-merch-note { font-size: 12px; color: var(--pd-muted); margin: 0; }

.pd-price {
    position: absolute;
    top: -14px;
    right: -12px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--pd-cobalt);
    border: 2px solid var(--pd-ink);
    color: var(--pd-paper);
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    rotate: 10deg;
    text-align: center;
    line-height: 1;
    padding: 4px;
    flex-direction: column;
    gap: 1px;
}
/* Big number, small € underneath (Doto has no € glyph). */
.pd-price b { font-size: 21px; line-height: .9; letter-spacing: -0.05em; font-weight: 900; }
.pd-price small { font: 800 11px/1 var(--pd-font-ui); }
.pd-price--long b { font-size: 14px; letter-spacing: -0.06em; }
.pd-price--xlong b { font-size: 11px; letter-spacing: -0.08em; }
.pd-price--paper { background: var(--pd-paper); color: var(--pd-cobalt); rotate: -10deg; width: 66px; height: 66px; top: -16px; right: -14px; }

/* ===== Artist catalogue ===== */

.pd-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}
.pd-seg { display: flex; flex-wrap: wrap; gap: 8px; }
/* Same 34px height as the .pd-chunky chips; keeps the LCD look (no offset
   shadow) because it is a read-out, not a control. */
.pd-count {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    line-height: 1;
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 13px;
    color: var(--pd-cobalt);
    margin: 0 0 0 auto;
}
.pd-toolbar-note {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    background: var(--pd-card);
    border: 2px solid var(--pd-ink);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.2;
}

.pd-artist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 26px 20px;
}

.pd-artist-tile {
    position: relative;
    rotate: var(--rot, 0deg);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 8px 10px;
    background: var(--pd-card);
    border: 2px solid var(--pd-ink);
    box-shadow: 4px 4px 0 var(--pd-ink);
    color: var(--pd-ink);
    transition: rotate .18s var(--pd-ease), translate .18s var(--pd-ease), box-shadow .18s var(--pd-ease);
}
.pd-artist-tile:hover,
.pd-artist-tile:focus-visible {
    text-decoration: none;
    color: var(--pd-ink);
    rotate: 0deg;
    translate: -2px -2px;
    box-shadow: 6px 6px 0 var(--pd-cobalt);
}
.pd-artist-tile-cover {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1.5px solid var(--pd-ink);
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 48px;
    line-height: 1;
}
.pd-artist-tile-cover img { width: 100%; height: 100%; object-fit: cover; }
.pd-artist-tile-name { font-weight: 700; font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* One line; the slight tightening lets BENDRADARBIAUJAME fit the narrowest
   130px tile, so the ellipsis is only a safety net. */
.pd-artist-tile-status { font-family: var(--pd-font-dot); font-weight: 900; font-size: 11px; letter-spacing: -0.02em; color: var(--pd-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-artist-tile-status.is-claimed { color: var(--pd-cobalt); }
.pd-artist-tile-flag {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--pd-ink);
    background: var(--pd-cobalt);
    color: var(--pd-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    rotate: 12deg;
}

.pd-swatch-0 { background: var(--pd-cobalt); color: var(--pd-paper); }
.pd-swatch-1 { background: var(--pd-paper); color: var(--pd-cobalt); }
.pd-swatch-2 { background: var(--pd-ink); color: var(--pd-paper); }
.pd-swatch-3 { background: repeating-linear-gradient(45deg, var(--pd-ink) 0 4px, var(--pd-cobalt) 4px 8px); color: var(--pd-paper); }
.pd-swatch-4 { background: var(--pd-card); color: var(--pd-ink); }
.pd-swatch-5 { background: var(--pd-ink); color: var(--pd-peri); }

/* ===== Pager ===== */

.pd-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--pd-paper);
    border: 2px solid var(--pd-ink);
    border-radius: var(--pd-radius);
    box-shadow: 4px 4px 0 var(--pd-ink);
    align-self: center;
}
.pd-pager .pd-chunky { min-width: 34px; }
.pd-pager-gap { font-family: var(--pd-font-dot); font-weight: 900; color: var(--pd-muted); }

/* ===== Random window ===== */

.pd-random {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    color: var(--pd-paper);
}
.pd-random-title {
    font-family: var(--pd-font-display);
    font-weight: 700;
    font-size: 34px;
    line-height: .95;
    text-align: center;
}

/* Start window on the home rail: one wide pill on dotted cobalt. */
.pd-esi {
    padding: 18px;
    display: flex;
    background-image: var(--pd-dots-paper);
    background-size: 14px 14px;
}
.pd-esi .pd-pill { flex: 1; }

/* ===== Footer ===== */

.pd-footer {
    border-top: 2px solid var(--pd-ink);
    background: var(--pd-ink);
    color: var(--pd-paper);
}
.pd-footer-inner {
    padding-top: 18px;
    padding-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.pd-footer .pd-badge { border-color: var(--pd-paper); }
.pd-footer-text { font-family: var(--pd-font-dot); font-weight: 800; font-size: 12px; }
/* Doto draws © like a 0. */
.pd-footer-copy { font-family: var(--pd-font-ui); font-weight: 700; }
.pd-footer-date { white-space: nowrap; }
.pd-footer--artist .pd-footer-inner { padding-top: 14px; padding-bottom: 14px; justify-content: center; gap: 10px; }
.pd-footer-brand { font-family: var(--pd-font-display); font-weight: 700; font-size: 22px; color: var(--pd-paper); }
.pd-footer-brand:hover { color: var(--pd-paper); }

/* ===== Flash ===== */

.korta-flash {
    position: relative;
    padding: 12px 16px 12px 52px;
    border: 2px solid var(--pd-ink);
    border-radius: 8px;
    background: var(--pd-card);
    box-shadow: 4px 4px 0 var(--pd-ink);
    font-weight: 600;
    margin: 0 0 16px;
}
.korta-flash::before {
    content: "i";
    content: "i" / "";
    position: absolute;
    left: 12px;
    top: 50%;
    translate: 0 -50%;
    width: 26px;
    height: 26px;
    border: 2px solid var(--pd-ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pd-paper);
    color: var(--pd-cobalt);
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 14px;
}
.korta-flash--success { background: var(--pd-cobalt); color: var(--pd-paper); }
.korta-flash--success::before { content: "★"; content: "★" / ""; }
.korta-flash--error { background: var(--pd-ink); color: var(--pd-paper); box-shadow: 4px 4px 0 var(--pd-cobalt); }
.korta-flash--error::before { content: "!"; content: "!" / ""; }
.korta-flash--notice::before { content: "✦"; content: "✦" / ""; }
/* .pd-main's 36px gap plus the flash margin left the page flash floating
   52px above its heading; this pulls it to 20px. */
.pd-main > .korta-flash { margin: 0 0 -16px; }

/* ===== Content inside windows ===== */

.korta-panel-title {
    font-family: var(--pd-font-display);
    font-weight: 700;
    font-size: 44px;
    line-height: .95;
    letter-spacing: -0.01em;
    color: var(--pd-cobalt);
    margin: 0 0 14px;
}
.korta-panel-title + .korta-cover-meta { margin-top: -6px; }

/* Full font reset: the helper often sits inside a Doto form label. */
.korta-cover-meta { font: 400 13px/1.45 var(--pd-font-ui); color: var(--pd-muted); margin: 0 0 14px; text-transform: none; letter-spacing: normal; }

.korta-empty {
    padding: 18px;
    border: 2px dashed var(--pd-ink);
    border-radius: var(--pd-radius);
    background: var(--pd-card);
    font-weight: 600;
    text-align: center;
}
.korta-empty p { margin: 0; }
.korta-empty p + p { margin-top: 6px; }
.korta-empty .korta-actions { justify-content: center; margin-top: 12px; }

/* ===== Account pages: login, password reset, email confirmation =====
   One page-load reveal: the heading, the copy, each field and the button
   drop in one after another. */

.pd-auth .korta-panel-title { font-size: 38px; }
.pd-auth > :not(form),
.pd-auth .korta-form > * { animation: pdAuthDrop .55s var(--pd-ease) backwards; }
.pd-auth > :nth-child(2) { animation-delay: .07s; }
.pd-auth .korta-form > :nth-child(1) { animation-delay: .12s; }
.pd-auth .korta-form > :nth-child(2) { animation-delay: .18s; }
.pd-auth .korta-form > :nth-child(3) { animation-delay: .24s; }
.pd-auth .korta-form > :nth-child(4) { animation-delay: .3s; }
.pd-auth .korta-form > :nth-child(5) { animation-delay: .36s; }
.pd-auth .korta-form > :nth-child(n+6) { animation-delay: .42s; }
.pd-auth > .pd-auth-links { animation-delay: .5s; }
@keyframes pdAuthDrop {
    from { opacity: 0; transform: translateY(-14px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pd-auth > :not(form),
    .pd-auth .korta-form > * { animation: none; }
}

.pd-auth-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; }
.pd-auth-links a {
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--pd-cobalt);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.pd-auth-links a:hover { color: var(--pd-ink); }

/* ===== Start page: PRADĖK.EXE =====
   A cobalt window under paper dots: the headline in display type four times
   the body size, then the name search as an LCD readout. Its answer is the
   page's one moment: the artist's page already waiting as a taped polaroid
   on a card, one tap from its demo. Pages someone owns hang untaped, in grey,
   tagged PERIMTAS on ink; one fans cannot see yet shows only its name. "Kurti naują puslapį" is always the last card, the
   striped crate the site uses for "not yet". The four steps below are the
   page's only reveal: they pop in one after another on load. */

.pd-pradek {
    position: relative;
    padding: 34px 32px 32px;
    border-radius: 0 0 10px 10px;
    color: var(--pd-paper);
}
.pd-pradek::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--pd-dots-paper);
    background-size: 12px 12px;
    pointer-events: none;
}
.pd-pradek > * { position: relative; }

.pd-pradek-title {
    margin: 0 0 18px;
    font: 700 72px/.88 var(--pd-font-display);
    letter-spacing: -0.015em;
    text-shadow: 4px 4px 0 var(--pd-ink);
}
.pd-pradek-lede { max-width: 46ch; margin: 0 0 28px; font-size: 17px; line-height: 1.45; }

.pd-pradek-label { display: block; margin: 0 0 8px; font: 700 14px/1.3 var(--pd-font-ui); }
.pd-pradek-field { display: flex; gap: 12px; align-items: stretch; max-width: 640px; }
/* Selectors carry the input type: the base input rule comes later in this file. */
.pd-pradek-field input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 56px;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--pd-lcd);
    box-shadow: var(--pd-lcd-inset), 4px 4px 0 var(--pd-ink);
    font: 900 24px/1.1 var(--pd-font-dot);
    color: var(--pd-cobalt);
    letter-spacing: .03em;
    text-transform: uppercase;
}
.pd-pradek-field input[type="search"]::placeholder { color: var(--pd-cobalt); opacity: .4; }
.pd-pradek-field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.pd-pradek-field .pd-pill { flex: none; min-height: 56px; }

.pd-pradek-mine {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
}
.pd-pradek-mine-text { margin: 0; font: 700 34px/1 var(--pd-font-display); letter-spacing: -0.01em; }

.pd-pradek-hits {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    gap: 20px;
}
.pd-pradek-hit {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 18px 18px 18px 20px;
    border: 2px solid var(--pd-ink);
    border-radius: 8px;
    background: var(--pd-card);
    color: var(--pd-ink);
    box-shadow: var(--pd-shadow);
}
/* Two cards a row at most: the new-page card fills its row when it would sit alone in it. */
.pd-pradek-hit--new:nth-child(odd) { grid-column: 1 / -1; }
.pd-pradek .pd-pradek-hit :focus-visible { outline-color: var(--pd-cobalt); }

.pd-pradek-photo { position: relative; display: block; rotate: -4deg; }
.pd-pradek-photo .pd-polaroid { padding: 6px 6px 22px; border: 2px solid var(--pd-ink); box-shadow: var(--pd-shadow-sm); }
.pd-pradek-photo .pd-polaroid-caption { bottom: 4px; font-size: 11px; }
.pd-pradek-photo .pd-tape { top: -10px; left: 24%; width: 64px; height: 20px; rotate: 6deg; }
.pd-pradek-initials { font: 700 44px/1 var(--pd-font-display); color: var(--pd-cobalt); }
.pd-pradek-hit.is-claimed .pd-pradek-photo { rotate: 3deg; }
.pd-pradek-hit.is-claimed .pd-polaroid-img { filter: grayscale(1); }
.pd-pradek-hit.is-bare { grid-template-columns: minmax(0, 1fr); }

.pd-pradek-hit-info { min-width: 0; }
.pd-pradek-tag {
    display: inline-block;
    padding: 4px 8px 3px;
    border-radius: 4px;
    background: var(--pd-cobalt);
    color: var(--pd-paper);
    font: 900 11px/1.2 var(--pd-font-dot);
    letter-spacing: .04em;
}
.pd-pradek-hit.is-claimed .pd-pradek-tag,
.pd-pradek-new .pd-pradek-tag { background: var(--pd-ink); }
.pd-pradek-hit-name {
    margin: 10px 0 14px;
    font: 700 32px/.92 var(--pd-font-display);
    letter-spacing: -0.01em;
    color: var(--pd-cobalt);
    overflow-wrap: anywhere;
}
.pd-pradek-hit .pd-pill { min-height: 38px; padding: 0 16px; font-size: 13px; }

.pd-pradek-hit--new { display: block; padding: 10px; background: var(--pd-placeholder); }
.pd-pradek-new {
    height: 100%;
    padding: 16px 18px;
    border: 2px dashed var(--pd-ink);
    border-radius: 6px;
    background: var(--pd-card);
}
.pd-pradek-new .pd-pradek-hit-name { color: var(--pd-ink); }

/* Kaip tai veikia */
.pd-pradek-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.pd-pradek-step {
    position: relative;
    border: 2px solid var(--pd-ink);
    border-radius: var(--pd-radius);
    background: var(--pd-card);
    box-shadow: var(--pd-shadow-sm);
    overflow: hidden;
    animation: pdStepPop .6s var(--pd-ease) backwards;
}
.pd-pradek-step:nth-child(1) { animation-delay: .15s; }
.pd-pradek-step:nth-child(2) { animation-delay: .27s; }
.pd-pradek-step:nth-child(3) { animation-delay: .39s; }
.pd-pradek-step:nth-child(4) { animation-delay: .51s; }
@keyframes pdStepPop {
    from { opacity: 0; transform: translateY(24px) rotate(-3deg) scale(.94); }
    to { opacity: 1; transform: none; }
}
.pd-pradek-step-n {
    display: block;
    padding: 12px 14px 6px;
    border-bottom: 2px solid var(--pd-ink);
    background: var(--pd-lcd);
    font: 900 58px/1 var(--pd-font-dot);
    color: var(--pd-cobalt);
}
/* Step 01 is this page, so it is lit. */
.pd-pradek-step:first-child .pd-pradek-step-n { background: var(--pd-cobalt); color: var(--pd-paper); }
.pd-pradek-here {
    position: absolute;
    top: 14px;
    right: 12px;
    padding: 5px 8px 4px;
    border: 2px solid var(--pd-ink);
    border-radius: 4px;
    background: var(--pd-paper);
    color: var(--pd-cobalt);
    box-shadow: var(--pd-shadow-sm);
    font: 900 11px/1 var(--pd-font-dot);
    rotate: 6deg;
}
.pd-pradek-step-title { margin: 14px 14px 6px; font: 700 26px/.95 var(--pd-font-display); letter-spacing: -0.01em; }
.pd-pradek-step p { margin: 0 14px 16px; font-size: 14px; line-height: 1.45; color: var(--pd-muted); }

/* MERCH.TXT and JAU SU MUMIS */
.pd-pradek-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.pd-pradek-pair--single { grid-template-columns: minmax(0, 1fr); }
.pd-pradek-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 6px;
    margin: 4px 0 16px;
}
.pd-pradek-flow span {
    padding: 7px 9px 6px;
    border: 2px solid var(--pd-ink);
    border-radius: 6px;
    background: var(--pd-paper);
    color: var(--pd-ink);
    font: 900 12px/1 var(--pd-font-dot);
}
.pd-pradek-flow .is-us { background: var(--pd-cobalt); color: var(--pd-paper); }
.pd-pradek-flow .is-you { background: var(--pd-ink); color: var(--pd-paper); }
.pd-pradek-flow b { font: 900 12px/1 var(--pd-font-dot); color: var(--pd-cobalt); }
.pd-pradek-merch { margin: 0; font: 700 26px/1.02 var(--pd-font-display); letter-spacing: -0.01em; }
.pd-pradek-badges { justify-content: flex-start; }

.pd-pradek-final {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 20px;
    padding: 24px 26px;
    color: var(--pd-paper);
}
.pd-pradek-final-title { margin: 0; font: 700 40px/.95 var(--pd-font-display); letter-spacing: -0.01em; }

.pd-pradek-login { align-self: flex-start; }

@media (max-width: 1180px) {
    .pd-pradek-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .pd-pradek { padding: 26px 22px 24px; }
    .pd-pradek-title { font-size: 50px; }
    .pd-pradek-pair { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 600px) {
    .pd-pradek { padding: 22px 16px 20px; }
    .pd-pradek-title { font-size: 42px; text-shadow: 3px 3px 0 var(--pd-ink); }
    .pd-pradek-lede { font-size: 15px; margin-bottom: 22px; }
    .pd-pradek-field { gap: 8px; }
    .pd-pradek-field input[type="search"] { min-height: 50px; padding: 8px 12px; font-size: 19px; box-shadow: var(--pd-lcd-inset), 3px 3px 0 var(--pd-ink); }
    .pd-pradek-field .pd-pill { min-height: 50px; padding: 0 16px; }
    .pd-pradek-mine-text { font-size: 28px; }
    .pd-pradek-hits { gap: 16px; margin-top: 24px; }
    .pd-pradek-hit { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 14px; box-shadow: 4px 4px 0 var(--pd-ink); }
    .pd-pradek-hit--new { padding: 8px; }
    .pd-pradek-new { padding: 12px 14px; }
    .pd-pradek-photo .pd-polaroid { padding: 4px 4px 16px; }
    .pd-pradek-photo .pd-polaroid-caption { display: none; }
    .pd-pradek-photo .pd-tape { width: 50px; height: 16px; top: -8px; }
    .pd-pradek-initials { font-size: 32px; }
    .pd-pradek-hit-name { margin: 8px 0 12px; font-size: 26px; }
    .pd-pradek-hit .pd-pill { padding: 0 12px; }
    .pd-pradek-steps { gap: 14px; }
    .pd-pradek-step-n { padding: 10px 10px 4px; font-size: 44px; }
    .pd-pradek-here { top: 10px; right: 8px; font-size: 10px; }
    .pd-pradek-step-title { margin: 12px 10px 4px; font-size: 21px; }
    .pd-pradek-step p { margin: 0 10px 12px; font-size: 13px; }
    .pd-pradek-merch { font-size: 22px; }
    .pd-pradek-final { padding: 18px 16px; }
    .pd-pradek-final-title { font-size: 30px; }
}
@media (max-width: 360px) {
    .pd-pradek-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .pd-pradek-step { animation: none; }
}

/* ===== New page: NAUJAS.EXE and IŠSAUGOTI.EXE =====
   Both reuse the account pages' drop-in reveal (.pd-auth). The name field
   types in Coolvetica at poster size, the way the page will show it. The
   page address is one unit: a metal host plate fused to the slug input, with
   an LCD readout under it that flips between UŽIMTAS on ink and LAISVAS ✓
   in cobalt while the artist types. */

/* Selectors carry the input type: the base input rule comes later in this file. */
.pd-start-name input[type="text"] {
    min-height: 58px;
    padding: 8px 14px;
    font: 700 30px/1.05 var(--pd-font-display);
    letter-spacing: -0.01em;
    color: var(--pd-cobalt);
}
.pd-start-resume {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 2px solid var(--pd-ink);
    border-radius: 8px;
    background: var(--pd-lcd);
    box-shadow: var(--pd-shadow-sm);
}
.pd-start-resume p { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.pd-signup-match a { font-weight: 800; white-space: nowrap; }

.pd-slug { display: flex; flex-direction: column; gap: 6px; }
.pd-slug-box {
    display: block;
    border: 2px solid var(--pd-ink);
    background: var(--pd-card);
    box-shadow: var(--pd-shadow-sm);
}
.pd-slug-box:focus-within { outline: 3px solid var(--pd-cobalt); outline-offset: 2px; }
.pd-slug-bar { display: flex; align-items: stretch; min-width: 0; }
.pd-slug-host {
    flex: none;
    display: flex;
    align-items: center;
    padding: 0 8px 0 10px;
    border-right: 2px solid var(--pd-ink);
    background: var(--pd-metal);
    font: 900 12px/1.2 var(--pd-font-dot);
    color: var(--pd-muted);
    white-space: nowrap;
}
.pd-slug-bar input[type="text"] { flex: 1 1 auto; min-width: 0; border: 0; }
.pd-slug-bar input[type="text"]:focus { outline: none; }
.pd-slug-status {
    margin: 0;
    padding: 6px 12px;
    border: 0;
    border-top: 2px solid var(--pd-ink);
    border-radius: 0;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .04em;
    transition: background .15s var(--pd-ease), color .15s var(--pd-ease), opacity .15s var(--pd-ease);
}
.pd-slug-status[data-state="taken"],
.pd-slug-status[data-state="invalid"] { background: var(--pd-ink); color: var(--pd-paper); box-shadow: none; }
/* While the answer is on its way the last one stays, dimmed. */
.pd-slug-status.is-busy { opacity: .55; }
/* The readout refreshes like a dot-matrix display when an address frees up. */
.pd-slug-status.is-live[data-state="free"] { animation: pdLcdFlip .4s steps(1, end); }
@keyframes pdLcdFlip {
    0% { color: transparent; }
    25% { color: var(--pd-cobalt); }
    50% { color: transparent; }
    75% { color: var(--pd-cobalt); }
}
@media (max-width: 380px) {
    /* The host plate takes its own row so the slug keeps room to be read. */
    .pd-slug-bar { flex-wrap: wrap; }
    .pd-slug-host { flex-basis: 100%; min-height: 28px; border-right: 0; border-bottom: 2px solid var(--pd-ink); }
}
@media (prefers-reduced-motion: reduce) {
    .pd-slug-status { transition: none; }
    .pd-slug-status.is-live[data-state="free"] { animation: none; }
}

/* The page a claim asks for, as an LCD plate under the save form's copy. */
.pd-signup-target { margin: 0 0 18px; font-size: 13px; letter-spacing: .03em; overflow-wrap: anywhere; }
.pd-auth > .pd-signup-target { animation-delay: .1s; }

/* ===== Claim home: STUDIJA while the team checks a claim =====
   The window body is the striped "waiting" crate; on it, the page's name on a
   solid nameplate, an LCD whose block cursor keeps blinking (the claim is
   alive, just queued), and the note on a solid card. The pieces drop in one
   by one, then the cursor starts. A rejected claim flips the LCD to ink, like
   the UŽIMTAS readout, and stops the cursor. */

.pd-claim-home > .pd-win-body {
    background: var(--pd-placeholder);
    border-radius: 0 0 10px 10px;
}
.pd-claim-name {
    display: inline-block;
    max-width: 100%;
    margin: 0 0 18px;
    padding: 8px 14px 6px;
    border: 2px solid var(--pd-ink);
    border-radius: 8px;
    background: var(--pd-card);
    box-shadow: var(--pd-shadow-sm);
    font: 700 44px/.95 var(--pd-font-display);
    letter-spacing: -0.01em;
    color: var(--pd-cobalt);
    overflow-wrap: anywhere;
}
.pd-claim-lcd { margin: 0; font-size: 16px; letter-spacing: .03em; }
.pd-claim-lcd--off,
.pd-live-lcd--off { background: var(--pd-ink); color: var(--pd-paper); }
.pd-claim-cursor { animation: pdClaimBlink 1.1s steps(1, end) .7s infinite; }
.pd-claim-note,
.pd-live-note {
    margin: 16px 0 20px;
    padding: 12px 14px;
    border: 2px solid var(--pd-ink);
    border-radius: 8px;
    background: var(--pd-card);
    box-shadow: var(--pd-shadow-sm);
}
.pd-claim-note p { margin: 0; }
.pd-claim-note p + p { margin-top: 8px; }

.pd-claim > * { animation: pdAuthDrop .55s var(--pd-ease) backwards; }
.pd-claim > :nth-child(2) { animation-delay: .08s; }
.pd-claim > :nth-child(3) { animation-delay: .16s; }
.pd-claim > :nth-child(n+4) { animation-delay: .24s; }
@keyframes pdClaimBlink {
    50% { opacity: 0; }
}
@media (max-width: 600px) {
    .pd-claim-name { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .pd-claim > *,
    .pd-claim-cursor { animation: none; }
}

/* ===== Studio home: STUDIJA and PASIRUOŠK PARDUOTI =====
   The cobalt STUDIJA window says the page is live in display type three
   times the body size, over the address in an LCD. Beside it (under it on
   phones) the checklist: ink tick boxes that fill cobalt when done, Doto
   VĖLIAU tags on the steps still being built. Both windows drop in once on
   load. Fresh from the save form (?naujas=1) the LCD then types the address
   out: each character waits its beat hidden, shows for one beat as a cobalt
   block (the cursor), then settles, so the block runs along the address.
   --pd-key (ms a key) and --i (the character's place) come from the page. */

.pd-studio-home {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
    gap: 26px;
    align-items: start;
    margin: 6px 0 30px;
}
.pd-studio-home > * { animation: pdAuthDrop .55s var(--pd-ease) backwards; }
.pd-studio-home > :nth-child(2) { animation-delay: .1s; }

.pd-live-title {
    margin: 0 0 18px;
    font: 700 46px/.95 var(--pd-font-display);
    letter-spacing: -0.01em;
    color: var(--pd-paper);
}
.pd-live-lcd { margin: 0 0 22px; font-size: 17px; letter-spacing: .02em; overflow-wrap: anywhere; }
.pd-live-lcd.is-typing .pd-live-key {
    animation: pdLiveKey calc(var(--pd-key) * 2ms) steps(1, end) calc(.6s + var(--i) * var(--pd-key) * 1ms) backwards;
}
@keyframes pdLiveKey {
    from { visibility: hidden; }
    50%, to { visibility: visible; background: var(--pd-cobalt); color: var(--pd-paper); }
}
/* The note is a card on the cobalt window: ink text, cobalt focus ring. */
.pd-live-note { margin: 20px 0 0; color: var(--pd-ink); font-size: 14px; }
.pd-live .pd-live-note :focus-visible { outline-color: var(--pd-cobalt); }

.pd-ready > .pd-win-body { padding: 14px 18px 16px; }
.pd-ready-list { list-style: none; margin: 0; padding: 0; }
.pd-ready-item {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: start;
    padding: 11px 0;
    border-top: 1px solid var(--pd-line);
}
.pd-ready-item:first-child { border-top: 0; padding-top: 2px; }
.pd-ready-item:last-child { padding-bottom: 2px; }
.pd-ready-box {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--pd-ink);
    border-radius: 4px;
    background: var(--pd-paper);
    box-shadow: inset 2px 2px 0 var(--pd-line);
    font: 900 14px/1 var(--pd-font-ui);
}
.pd-ready-item.is-done .pd-ready-box { background: var(--pd-cobalt); color: var(--pd-paper); box-shadow: 2px 2px 0 var(--pd-ink); }
.pd-ready-text { min-width: 0; padding-top: 1px; font-weight: 600; line-height: 1.35; }
.pd-ready-text a { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pd-ready-sub { display: block; margin-top: 2px; font: 400 13px/1.35 var(--pd-font-ui); color: var(--pd-muted); overflow-wrap: anywhere; }
.pd-ready-later { align-self: center; min-height: 22px; background: var(--pd-paper); color: var(--pd-muted); font-size: 11px; letter-spacing: .04em; }
/* "Siųsti dar kartą" sits under the email line, not squeezed beside it. */
.pd-ready-action { grid-column: 2 / -1; margin: 0; }
.pd-ready-action .korta-btn { min-height: 32px; padding: 0 14px; font-size: 13px; box-shadow: 2px 2px 0 var(--pd-ink), inset 0 1px 0 rgba(255,255,255,.28); }

@media (max-width: 900px) {
    .pd-studio-home { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 600px) {
    .pd-live-title { font-size: 36px; }
    .pd-live-lcd { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .pd-studio-home > *,
    .pd-live-lcd.is-typing .pd-live-key { animation: none; }
}

/* ===== Mock steps: selling steps still being built =====
   A PERŽIŪRA window whose body is the striped crate the claim home uses for
   "not yet": on it a card with the GREITAI badge on ink, then the step's
   fields on a card of their own, dashed and disabled, so they read as a
   preview of what is coming, never as a broken form. The shipping label
   mock is a sticker on that card, stamped PAVYZDYS. */

.pd-mock { max-width: 640px; }
.pd-mock > .pd-win-body {
    display: grid;
    gap: 18px;
    padding: 20px;
    background: var(--pd-placeholder);
    border-radius: 0 0 8px 8px;
}
.pd-mock-head,
.pd-mock-fields {
    min-width: 0;
    margin: 0;
    border: 2px solid var(--pd-ink);
    border-radius: 8px;
    background: var(--pd-card);
    box-shadow: var(--pd-shadow-sm);
}
.pd-mock-head { padding: 14px 16px; }
.pd-mock-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; font-weight: 700; }
.pd-mock-badge {
    display: inline-block;
    padding: 5px 10px 4px;
    border: 2px solid var(--pd-ink);
    border-radius: 4px;
    background: var(--pd-ink);
    color: var(--pd-paper);
    font: 900 14px/1.1 var(--pd-font-dot);
    letter-spacing: .06em;
    box-shadow: 3px 3px 0 var(--pd-cobalt);
    rotate: -2deg;
}
.pd-mock-why { margin: 0; }
.pd-mock-fields { padding: 18px 16px; }
.pd-mock-fields .korta-form { max-width: none; }
.pd-mock-fields label { cursor: not-allowed; }
.pd-mock-fields input:disabled {
    border-style: dashed;
    background: var(--pd-paper);
    box-shadow: none;
    color: var(--pd-muted);
    -webkit-text-fill-color: var(--pd-muted);
    opacity: 1;
    cursor: not-allowed;
}
.pd-mock-fields input::placeholder { color: var(--pd-soft); -webkit-text-fill-color: var(--pd-soft); opacity: 1; }

.pd-mock-step { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; }
.pd-mock-step-no {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 2px solid var(--pd-ink);
    border-radius: 50%;
    background: var(--pd-cobalt);
    color: var(--pd-paper);
    font: 900 14px/1 var(--pd-font-dot);
}
.pd-mock-lcd { margin: 0; font-size: 15px; letter-spacing: .04em; overflow-wrap: anywhere; }

/* Shipping methods: Aqua switches, the knob drawn in the background. */
.pd-mock-switches { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pd-mock-switches li { padding: 10px 12px; border: 2px dashed var(--pd-ink); border-radius: 8px; background: var(--pd-paper); }
.pd-mock-switches .korta-check { cursor: not-allowed; }
.pd-mock-switches input[role="switch"] {
    width: 44px;
    height: 24px;
    border: 2px solid var(--pd-ink);
    border-radius: 999px;
    background: radial-gradient(circle at 10px 50%, var(--pd-card) 0 6px, var(--pd-ink) 6.5px 8px, transparent 8.5px), var(--pd-line);
    -webkit-appearance: none;
    appearance: none;
    cursor: not-allowed;
}
.pd-mock-switches input[role="switch"]:checked {
    background: radial-gradient(circle at calc(100% - 10px) 50%, var(--pd-card) 0 6px, var(--pd-ink) 6.5px 8px, transparent 8.5px), var(--pd-aqua);
}

.pd-label {
    position: relative;
    overflow: hidden;
    max-width: 400px;
    border: 2px solid var(--pd-ink);
    border-radius: 6px;
    background: var(--pd-card);
    box-shadow: var(--pd-shadow);
    rotate: -1deg;
}
.pd-label-row { display: grid; gap: 2px; padding: 12px 14px; border-bottom: 2px solid var(--pd-ink); overflow-wrap: anywhere; }
.pd-label-key { font: 900 11px/1.2 var(--pd-font-dot); color: var(--pd-cobalt); letter-spacing: .06em; }
.pd-label-to strong { font: 700 26px/1.05 var(--pd-font-display); letter-spacing: -0.01em; }
.pd-label-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; }
.pd-label-no { font: 900 22px/1 var(--pd-font-dot); }
.pd-label-code {
    flex: 1 1 auto;
    max-width: 160px;
    height: 40px;
    background: repeating-linear-gradient(90deg, var(--pd-ink) 0 2px, transparent 2px 4px, var(--pd-ink) 4px 7px, transparent 7px 9px, var(--pd-ink) 9px 10px, transparent 10px 13px);
}
/* The stamp lies over the whole sticker, faint enough to read through. */
.pd-label-mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font: 900 clamp(34px, 11vw, 54px)/1 var(--pd-font-dot);
    letter-spacing: .08em;
    color: var(--pd-cobalt);
    opacity: .22;
    rotate: -18deg;
    pointer-events: none;
}
@media (max-width: 600px) {
    .pd-mock > .pd-win-body { padding: 14px; }
}

/* Orders: the label mock's link under each buyer's address. */
.korta-order-label { margin-top: 8px; height: 30px; font-size: 12px; text-transform: uppercase; }

.korta-studio-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 22px;
    padding: 0 0 18px;
    border-bottom: 2px dashed var(--pd-ink);
}
/* Phones: six tabs as an even 3x2 grid instead of ragged 3/2/1 rows; a
   longer label such as "ŽINUTĖS (12)" wraps inside its tab. */
@media (max-width: 600px) {
    .korta-studio-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-bottom: 14px; margin-bottom: 18px; }
    .korta-studio-nav .pd-chunky { min-width: 0; height: auto; min-height: 40px; padding: 4px; font-size: 12px; line-height: 1.1; white-space: normal; text-align: center; box-shadow: 2px 2px 0 var(--pd-ink); }
}
/* Small tablets: one even row of six rather than five and an orphan. */
@media (min-width: 601px) and (max-width: 767px) {
    .korta-studio-nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
    .korta-studio-nav .pd-chunky { min-width: 0; height: auto; min-height: 34px; padding: 4px; font-size: 12px; line-height: 1.1; white-space: normal; text-align: center; }
}
/* Seven tabs (the admin nav): the seventh takes the whole last row, not one cell of it. */
@media (max-width: 767px) {
    .korta-studio-nav > :nth-child(7):last-child { grid-column: 1 / -1; }
}

/* ===== Forms ===== */

.korta-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 560px;
}
/* Submit buttons keep their natural width; --block opts into full width. */
.korta-form > .korta-btn,
.korta-form > .pd-pill { align-self: flex-start; }
.korta-btn--block { width: 100%; }
.korta-form > .korta-btn--block { align-self: stretch; }
/* Row editors (links) use the whole window width. */
.korta-form--wide { max-width: none; }
.korta-form label,
.korta-merch-filters label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 13px;
    color: var(--pd-ink);
    text-transform: uppercase;
    letter-spacing: .02em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 2px solid var(--pd-ink);
    border-radius: 0;
    background: #fff;
    box-shadow: inset 2px 2px 0 var(--pd-line);
    font: 400 15px/1.35 var(--pd-font-ui);
    color: var(--pd-ink);
    -webkit-appearance: none;
    appearance: none;
}
textarea { min-height: 110px; resize: vertical; }
select {
    padding-right: 36px;
    background-image: linear-gradient(45deg, transparent 50%, var(--pd-cobalt) 50%), linear-gradient(135deg, var(--pd-cobalt) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
}
input:focus,
select:focus,
textarea:focus { outline: 3px solid var(--pd-cobalt); outline-offset: 0; }
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* The header search has its own button; the filter field gets a cobalt ×. */
.pd-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.korta-merch-filters input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    cursor: pointer;
    background: center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%23001698' stroke-width='2.5'/%3E%3C/svg%3E");
}
/* File picker: the native input is visually hidden (its button text follows
   the browser language), and this Lithuanian row stands in for it. */
.korta-file { position: relative; }
/* A name that does not fit beside the button drops under it instead of
   shrinking to "Failas ..." on narrow phones. */
.korta-file-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px; border: 2px dashed var(--pd-ink); background: var(--pd-card); cursor: pointer; }
.korta-file-btn { flex: none; padding: 6px 12px; border: 2px solid var(--pd-ink); background: var(--pd-cobalt); color: var(--pd-paper); font: 900 13px var(--pd-font-dot); }
.korta-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px var(--pd-font-ui); color: var(--pd-muted); text-transform: none; letter-spacing: normal; }
.korta-file input:focus-visible + .korta-file-row { outline: 3px solid var(--pd-cobalt); outline-offset: 2px; }
.korta-file .korta-cover-meta { margin: 0; }

.korta-check {
    flex-direction: row !important;
    align-items: center;
    gap: 10px !important;
    font-family: var(--pd-font-ui) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer;
}
.korta-form .korta-check { text-transform: none; letter-spacing: normal; }
input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: none;
    accent-color: var(--pd-cobalt);
    cursor: pointer;
}

/* Sub-heading for a group of fields, matching the Doto field labels. */
.korta-group-label,
.korta-fieldset > legend {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    font: 900 13px/1.3 var(--pd-font-dot);
    color: var(--pd-ink);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.korta-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

/* Inline field errors: a cobalt inset on the field and a short message
   under it, reset from the Doto label it sits in. */
.korta-field-error { font: 700 13px/1.3 var(--pd-font-ui); color: var(--pd-ink); background: var(--pd-card); border-left: 4px solid var(--pd-cobalt); padding: 3px 8px; text-transform: none; letter-spacing: normal; }
.korta-form [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--pd-cobalt); border-color: var(--pd-cobalt); }
/* Checkout banners line up with the 560px form under them. */
.pd-cart .pd-win-body > .korta-flash { max-width: 560px; }

.korta-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.korta-link-row,
.korta-variant-row {
    display: grid;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border: 2px solid var(--pd-ink);
    border-radius: 8px;
    background: var(--pd-paper);
}
.korta-link-row { grid-template-columns: 160px minmax(0, 2fr) minmax(0, 1fr) auto; }
.korta-variant-row { grid-template-columns: minmax(0, 1fr) 90px 34px; margin-top: 8px; }
/* Small tablets: the label column keeps room for its "pvz. @vardas" hint. */
@media (min-width: 641px) and (max-width: 900px) {
    .korta-link-row { grid-template-columns: 150px minmax(0, 3fr) minmax(0, 2fr) auto; }
}
/* Phones: platform and × on top, then the address and the label full width. */
@media (max-width: 640px) {
    .korta-link-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "platform tools" "url url" "label label"; }
    .korta-link-row select { grid-area: platform; }
    .korta-link-row input[type="url"] { grid-area: url; }
    .korta-link-row input[type="text"] { grid-area: label; }
    .korta-row-tools { grid-area: tools; }
}

/* Small square row tools; the remove × is ink so it reads as destructive. */
.korta-row-tools { display: flex; gap: 6px; }
.korta-icon-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--pd-ink);
    border-radius: 4px;
    background: var(--pd-card);
    color: var(--pd-cobalt);
    font: 900 14px/1 var(--pd-font-dot);
    box-shadow: 2px 2px 0 var(--pd-ink);
    cursor: pointer;
}
.korta-icon-btn:hover { background: var(--pd-cobalt); color: var(--pd-paper); }
.korta-icon-btn--remove { background: var(--pd-ink); color: var(--pd-paper); font: 800 18px/1 var(--pd-font-ui); }

/* Price with a fixed € on the right edge of the field. */
.korta-input-suffix { position: relative; display: block; }
.korta-input-suffix input { padding-right: 34px; }
.korta-input-suffix::after {
    content: attr(data-suffix);
    position: absolute;
    right: 12px;
    top: 50%;
    translate: 0 -50%;
    font: 800 14px var(--pd-font-ui);
    color: var(--pd-cobalt);
    pointer-events: none;
}

/* Save row; on phones it stays pinned to the bottom of the screen until
   the end of its form, bleeding to the window body edges. */
@media (max-width: 640px) {
    .korta-form-actions { position: sticky; bottom: 0; z-index: 5; margin: 4px -18px 0; padding: 12px 18px; background: var(--pd-card); border-top: 2px dashed var(--pd-ink); }
    .korta-form-actions > .korta-btn[type="submit"] { flex: 1 1 auto; }
    /* Its form fills the body, so the bar meets both edges up to 640px. */
    .korta-form:has(> .korta-form-actions) { max-width: none; }
    /* A field reached with Tab scrolls clear of the pinned bar (66px). */
    html:has(.korta-form-actions) { scroll-padding-bottom: 84px; }
}
/* Narrow phones: tighter buttons keep "Pridėti nuorodą" and "Išsaugoti"
   on one row of the bar. */
@media (max-width: 400px) {
    .korta-form-actions { gap: 8px; }
    .korta-form-actions > .korta-btn { padding-left: 12px; padding-right: 12px; }
}

.korta-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 2px solid var(--pd-ink);
    box-shadow: var(--pd-shadow-sm);
    background: var(--pd-placeholder);
}
.korta-thumb--empty { display: inline-block; }
.korta-merch-list-item { display: flex; align-items: center; gap: 12px; }
.korta-merch-list-item .korta-thumb { flex: none; width: 48px; height: 48px; }

.korta-image-preview img {
    max-width: 220px;
    border: 2px solid var(--pd-ink);
    box-shadow: var(--pd-shadow-sm);
    background: var(--pd-card);
    padding: 6px 6px 22px;
}
/* The profile photo previews as the square thumb, not a polaroid. */
.korta-image-preview--thumb img { max-width: none; width: 72px; height: 72px; padding: 0; }
/* A preview tucks under the picker it belongs to. */
.korta-form > .korta-image-preview,
.korta-form > .korta-bg-preview { margin-top: -4px; }

.korta-bg-preview {
    width: 100%;
    max-width: 280px;
    height: 88px;
    border: 2px solid var(--pd-ink);
    box-shadow: var(--pd-shadow-sm);
    background-color: var(--pd-paper);
    background-image: var(--korta-bg);
    background-repeat: repeat;
}

.korta-pay-empty {
    margin-top: 6px;
    padding: 12px 14px;
    border: 2px dashed var(--pd-ink);
    background: var(--pd-lcd);
    font: 500 14px/1.45 var(--pd-font-ui);
    color: var(--pd-ink);
}
/* A short Doto tag over the sentence, which stays in the UI font to read. */
.korta-pay-empty .pd-dot { display: block; color: var(--pd-cobalt); font-size: 12px; margin-bottom: 4px; }

/* ===== Tables ===== */

.korta-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 2px solid var(--pd-ink);
    border-radius: 8px;
    overflow: hidden;
    background: var(--pd-card);
    box-shadow: 4px 4px 0 var(--pd-ink);
    font-size: 14px;
    margin-bottom: 16px;
}
.korta-table th,
.korta-table td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--pd-line);
}
.korta-table thead th {
    background: var(--pd-metal);
    border-bottom: 2px solid var(--pd-ink);
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    white-space: nowrap;
}
.korta-table tbody tr:nth-child(even) > * { background: var(--pd-zebra); }
.korta-table tbody tr:last-child td { border-bottom: 0; }
.korta-table .korta-actions { gap: 8px; }
.korta-table .korta-btn { min-height: 32px; padding: 0 12px; font-size: 13px; box-shadow: 2px 2px 0 var(--pd-ink), inset 0 1px 0 rgba(255,255,255,.28); }
.pd-table-scroll { overflow-x: auto; padding: 0 6px 6px 0; margin-bottom: 16px; }
.pd-table-scroll > .korta-table { margin-bottom: 0; }

.korta-table .korta-cover-meta { margin: 2px 0 0; }
.korta-table .korta-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Long cells (messages, item lists) keep the short ones at the top of the row. */
.korta-table--top td { vertical-align: top; }
.korta-table td.korta-nowrap { white-space: nowrap; }
/* Addresses break after the @ (<wbr>). A long name before the @, or a URL
   pasted into a message, breaks anywhere rather than pushing the table out
   of its window. */
.korta-table a[href^="mailto:"],
.korta-table td.korta-msg { overflow-wrap: anywhere; }
/* A row action redirects back to #row-id: the row lands clear of the edge, tinted. */
.korta-table tbody tr { scroll-margin-top: 16px; }
.korta-table tbody tr:target > * { background: rgba(93,115,255,.14); }
/* As a table, a message keeps a readable width and the actions column
   takes only what its buttons need, on one line. */
@media (min-width: 768px) {
    .korta-table td.korta-msg { width: 40%; min-width: 220px; }
    .korta-table td.korta-cell-actions { width: 1%; white-space: nowrap; }
    .korta-table td.korta-cell-actions > .korta-actions { flex-wrap: nowrap; }
    /* Breaking anywhere would otherwise shrink an address column to a few letters. */
    .korta-table td.korta-cell-email { min-width: 160px; }
}
/* Opt-in for a table with many row buttons (the accounts list): the actions
   column may wrap onto a second line instead of pushing the table out of its window. */
@media (min-width: 768px) {
    .korta-table--wrap-actions td.korta-cell-actions { width: auto; white-space: normal; }
    .korta-table--wrap-actions td.korta-cell-actions > .korta-actions { flex-wrap: wrap; }
}
/* Below 768px each row becomes a card, every cell labelled from
   data-label; the six-column order tables need about 680px as tables.
   --stack-wide is the same card layout up to 1280px, for a table whose
   columns cannot fit a narrower window (the inbox). */
@media (max-width: 767px) {
    .korta-table--stack thead { display: none; }
    .korta-table--stack,
    .korta-table--stack tbody,
    .korta-table--stack tr,
    .korta-table--stack td { display: block; width: 100%; }
    .korta-table--stack tr { padding: 10px 14px; border-bottom: 1px solid var(--pd-line); }
    .korta-table--stack tbody tr:last-child { border-bottom: 0; }
    .korta-table--stack td { position: relative; padding: 4px 0 4px 100px; border: 0; min-height: 26px; }
    .korta-table--stack td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 6px;
        width: 92px;
        font: 900 12px/1.2 var(--pd-font-dot);
        color: var(--pd-cobalt);
        text-transform: uppercase;
    }
    .korta-table--stack td[data-label=""] { padding-left: 0; }
    /* A wide cell's label sits above its content in the flow, so a label that
       wraps (KAIP PATIKRINTI) pushes the content down instead of covering it. */
    .korta-table--stack td.korta-cell-wide { padding-left: 0; }
    .korta-table--stack td.korta-cell-wide::before { position: static; display: block; width: auto; margin-bottom: 4px; }
    /* The row carries the zebra and target tints; its cells stay clear. */
    .korta-table--stack tbody tr:is(:nth-child(even), :target) > td { background: none; }
    .korta-table--stack tbody tr:nth-child(even) { background: var(--pd-zebra); }
    .korta-table--stack tbody tr:target { background: rgba(93,115,255,.14); }
    .korta-table--stack td.korta-num { text-align: left; }
    .korta-table--stack .korta-btn { min-height: 40px; }
}
@media (max-width: 1280px) {
    .korta-table--stack-wide thead { display: none; }
    .korta-table--stack-wide,
    .korta-table--stack-wide tbody,
    .korta-table--stack-wide tr,
    .korta-table--stack-wide td { display: block; width: 100%; }
    .korta-table--stack-wide tr { padding: 10px 14px; border-bottom: 1px solid var(--pd-line); }
    .korta-table--stack-wide tbody tr:last-child { border-bottom: 0; }
    .korta-table--stack-wide td { position: relative; padding: 4px 0 4px 100px; border: 0; min-height: 26px; }
    .korta-table--stack-wide td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 6px;
        width: 92px;
        font: 900 12px/1.2 var(--pd-font-dot);
        color: var(--pd-cobalt);
        text-transform: uppercase;
    }
    .korta-table--stack-wide td[data-label=""] { padding-left: 0; }
    .korta-table--stack-wide td.korta-cell-wide { padding-left: 0; }
    .korta-table--stack-wide td.korta-cell-wide::before { position: static; display: block; width: auto; margin-bottom: 4px; }
    /* The row carries the zebra and target tints; its cells stay clear. */
    .korta-table--stack-wide tbody tr:is(:nth-child(even), :target) > td { background: none; }
    .korta-table--stack-wide tbody tr:nth-child(even) { background: var(--pd-zebra); }
    .korta-table--stack-wide tbody tr:target { background: rgba(93,115,255,.14); }
    .korta-table--stack-wide td.korta-num { text-align: left; }
    .korta-table--stack-wide .korta-btn { min-height: 40px; }
    /* The 40% message column of the table layout spans the card instead. */
    .korta-table--stack-wide td.korta-msg { width: 100%; min-width: 0; }
}
/* As a table the inbox message column gives up a little room, so a long
   address column still fits beside it just above 1280px. */
@media (min-width: 1281px) {
    .korta-table--stack-wide td.korta-msg { min-width: 180px; }
}

/* ===== Studio: chips, stat tiles, period filter, disclosures ===== */

/* Status chips, keyed by state: cobalt = on, ink = waiting, dashed = off. */
.korta-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.korta-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border: 2px solid var(--pd-ink);
    border-radius: 4px;
    background: var(--pd-card);
    color: var(--pd-ink);
    font: 900 12px/1.1 var(--pd-font-dot);
    text-transform: uppercase;
    white-space: nowrap;
}
.korta-chip--on { background: var(--pd-cobalt); color: var(--pd-paper); }
.korta-chip--wait { background: var(--pd-ink); color: var(--pd-paper); }
.korta-chip--off { background: transparent; color: var(--pd-muted); border-style: dashed; }
.korta-chip--struck { text-decoration: line-through; }

/* LCD stat tiles; the number sits at the bottom so a row shares a baseline. */
.korta-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 4px 0 22px; }
.korta-stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px 14px;
    border: 2px solid var(--pd-ink);
    border-radius: 8px;
    background: var(--pd-lcd);
    box-shadow: 4px 4px 0 var(--pd-ink);
    color: var(--pd-ink);
    transition: transform .1s var(--pd-ease), box-shadow .1s var(--pd-ease);
}
a.korta-stat:hover { text-decoration: none; color: var(--pd-ink); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--pd-ink); }
.korta-stat-label { font: 900 12px/1.2 var(--pd-font-dot); color: var(--pd-muted); text-transform: uppercase; }
.korta-stat-value { margin-top: auto; font: 700 44px/.9 var(--pd-font-display); color: var(--pd-cobalt); letter-spacing: -0.01em; white-space: nowrap; }
.korta-stat--alert { background: var(--pd-cobalt); }
.korta-stat--alert .korta-stat-label,
.korta-stat--alert .korta-stat-value { color: var(--pd-paper); }
@media (max-width: 520px) {
    .korta-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    /* An odd count puts the first tile on its own full row. */
    .korta-stat:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
    .korta-stat-value { font-size: 36px; }
}

/* Analytics period: the same square chunky tabs as the studio nav. */
.korta-period { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
@media (max-width: 520px) {
    .korta-period { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .korta-period .pd-chunky { height: 40px; padding: 0 4px; font-size: 12px; }
    /* Two long labels (the admin accounts filter) get half the row each, not a quarter. */
    .korta-period--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.korta-section-title { margin: 24px 0 10px; font: 900 13px/1.3 var(--pd-font-dot); color: var(--pd-cobalt); text-transform: uppercase; letter-spacing: .02em; }
/* Daily bar: --v is the day's share of the busiest day (0 to 1). */
.korta-bar { display: block; height: 10px; width: calc(var(--v, 0) * 160px); min-width: 2px; background: var(--pd-cobalt); border: 1px solid var(--pd-ink); }
.korta-table td.korta-bar-cell { width: 180px; }
/* Phones: the bar column takes what the date and number leave, so the
   table fits instead of scrolling. */
@media (max-width: 520px) {
    .korta-table td.korta-bar-cell { width: 45%; }
    .korta-bar { width: calc(var(--v, 0) * 100%); }
    /* Number headings ("PER VISĄ LAIKĄ") may wrap; the numbers do not. */
    .korta-table th.korta-num { white-space: normal; }
}

/* A page-level form behind a button; the button goes once it is open. */
.korta-disclosure { margin: 0 0 22px; }
.korta-disclosure > summary { list-style: none; width: max-content; margin-bottom: 16px; }
.korta-disclosure > summary::-webkit-details-marker { display: none; }
.korta-disclosure[open] > summary { display: none; }
/* Once open, the form's heading sits a step under the page h1 above it.
   The item list after it gets the same step; without a disclosure (the
   try page) the list heading keeps the size of its sibling headings. */
.korta-disclosure > .korta-panel-title,
.korta-disclosure ~ .korta-panel-title--section { font-size: 30px; }
.korta-panel-title--section { margin-top: 32px; }
/* When the item list comes first, the opened form starts a section too. */
.korta-table + .korta-disclosure > .korta-panel-title { margin-top: 32px; }
.korta-form--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; max-width: 720px; }
.korta-form--grid > .korta-btn,
.korta-form--grid > .korta-flash { grid-column: 1 / -1; justify-self: start; min-width: 200px; }
.korta-form--grid .korta-grid-start { grid-column: 1; }
@media (max-width: 600px) {
    .korta-form--grid { grid-template-columns: minmax(0, 1fr); }
    .korta-form--grid .korta-grid-start { grid-column: auto; }
}
/* A per-row form (e.g. a password reset) folded under a small text toggle;
   it wraps normally even inside a nowrap actions cell. */
.korta-row-more { margin-top: 8px; white-space: normal; }
.korta-row-more > summary {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    cursor: pointer;
    list-style: none;
    font: 900 12px var(--pd-font-dot);
    color: var(--pd-cobalt);
    text-transform: uppercase;
}
.korta-row-more > summary::-webkit-details-marker { display: none; }
.korta-row-more > summary::before { content: "▸"; content: "▸" / ""; margin-right: 6px; }
.korta-row-more[open] > summary::before { content: "▾"; content: "▾" / ""; }
.korta-row-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; max-width: 360px; }
.korta-row-form input { flex: 1 1 160px; min-width: 0; min-height: 34px; }
.korta-flash-list { margin: 0; padding-left: 18px; }
.korta-form .korta-flash,
.korta-row-more .korta-flash,
.korta-disclosure > .korta-flash { max-width: 560px; }

/* ===== Alert (404 / 500) ===== */

.pd-alert { max-width: 620px; }
.pd-alert-body { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; padding: 26px; }
.pd-alert-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid var(--pd-ink);
    background: var(--pd-cobalt);
    color: var(--pd-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 30px;
    box-shadow: var(--pd-shadow-sm);
    rotate: -8deg;
}
.pd-alert h1,
.pd-alert h2 {
    font-family: var(--pd-font-display);
    font-weight: 700;
    font-size: 48px;
    line-height: .9;
    color: var(--pd-cobalt);
    margin-bottom: 12px;
}
.pd-alert-sub { color: var(--pd-muted); font-size: 14px; }
.pd-alert code { overflow-wrap: anywhere; }
.pd-alert .korta-actions { margin-top: 18px; }
/* A free address: the same dashed coupon as the live artist page's closing line. */
.pd-alert-free {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 2px dashed var(--pd-ink);
    border-radius: var(--pd-radius);
    background: var(--pd-card);
}
.pd-alert-free p { margin: 0; font-weight: 700; min-width: 0; }

/* ===== Merch catalogue filters ===== */

.korta-merch-filters {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.4fr) 90px 90px;
    gap: 12px;
    align-items: end;
}
.korta-merch-filters-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
/* The same arrow geometry as the merch card select, so a chosen artist or
   sort keeps more of its text. */
.korta-merch-filters select {
    padding-right: 28px;
    background-position: calc(100% - 15px) 50%, calc(100% - 9px) 50%;
    text-overflow: ellipsis;
}
/* Wide screens (1281px and up): the button joins the fields on one row.
   Narrower, the selects would be too short for "BASTA TGTK". */
@media (min-width: 1281px) {
    .korta-merch-filters { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.4fr) 90px 90px auto; }
    .korta-merch-filters-actions { grid-column: auto; }
}

/* ===== Cart ===== */

.pd-cart {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
}
.pd-cart-lines { display: flex; flex-direction: column; gap: 0; border: 2px solid var(--pd-ink); border-radius: 8px; overflow: hidden; background: var(--pd-card); box-shadow: 4px 4px 0 var(--pd-ink); }
.pd-cart-head,
.pd-cart-line {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 90px 90px;
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
}
.pd-cart-head {
    padding: 8px 16px;
    background: var(--pd-metal);
    border-bottom: 2px solid var(--pd-ink);
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 12px;
}
.pd-cart-head > :last-child { text-align: right; }
.pd-cart-line + .pd-cart-line { border-top: 1px solid var(--pd-line); }
.pd-cart-line:nth-child(odd) { background: var(--pd-zebra); }
.pd-cart-thumb { width: 72px; height: 72px; border: 1.5px solid var(--pd-ink); border-radius: 6px; background: var(--pd-placeholder); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pd-cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* No photo: the item's initials on a solid tag, like the merch cover label. */
.pd-cart-thumb-ph { padding: 2px 6px; background: var(--pd-card); border: 2px solid var(--pd-ink); font: 900 14px var(--pd-font-dot); color: var(--pd-cobalt); }
.pd-cart-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-cart-name strong { font-size: 15px; }
.pd-cart-variant { font-size: 13px; color: var(--pd-muted); }
.pd-cart-remove {
    position: relative;
    align-self: flex-start;
    margin-top: 2px;
    min-height: 28px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--pd-cobalt);
    font: 900 12px var(--pd-font-dot);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
/* Grows the hit area to about 44px tall without moving the row. */
.pd-cart-remove::after { content: ""; position: absolute; inset: -8px -10px; }
.pd-cart-remove:hover { color: var(--pd-cobalt); text-decoration: underline; }
.pd-cart-qty input {
    width: 72px;
    text-align: center;
    background: var(--pd-ink);
    color: var(--pd-paper);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.6);
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 16px;
}
.pd-cart-price { text-align: right; font-family: var(--pd-font-dot); font-weight: 900; font-size: 16px; white-space: nowrap; }
.pd-cart-unit { display: block; font: 600 12px var(--pd-font-ui); color: var(--pd-muted); }
.pd-cart-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }

.pd-summary {
    border: 2px solid var(--pd-ink);
    border-radius: 12px;
    background: var(--pd-cobalt);
    color: var(--pd-paper);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 6px 6px 0 var(--pd-ink);
}
.pd-summary-title { font-family: var(--pd-font-display); font-weight: 700; font-size: 34px; line-height: 1; }
.pd-summary .pd-lcd { display: flex; flex-direction: column; gap: 8px; }
.pd-summary-row { display: flex; justify-content: space-between; gap: 12px; }
.pd-summary-row > :first-child { min-width: 0; }
.pd-summary-row > :last-child { flex: none; white-space: nowrap; text-align: right; }
.pd-summary-rule { height: 2px; background: repeating-linear-gradient(90deg, var(--pd-cobalt) 0 3px, transparent 3px 6px); }
.pd-summary-total { align-items: baseline; color: var(--pd-ink); }
.pd-summary-total strong { font-size: 30px; font-weight: 900; color: var(--pd-cobalt); }
.pd-summary .korta-btn { width: 100%; min-height: 50px; font-size: 16px; }
/* The way back sits under the main action and reads as secondary. */
.pd-summary .korta-btn--ghost { min-height: 40px; font-size: 14px; }
.pd-summary-note { font-size: 13px; text-align: center; opacity: 1; margin: 0; }

/* ===== Artist page ===== */

.pd-artist {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
    /* No side padding: the shell's gutter is the page edge, shared with the
       top badges, the try bar and the footer. */
    padding: 20px 0 24px;
}
/* The column is the container the name sizes against. */
.pd-artist-left { display: flex; flex-direction: column; gap: 30px; min-width: 0; container-type: inline-size; }
.pd-artist-right { display: flex; flex-direction: column; gap: 28px; min-width: 0; }

.pd-artist-photo { position: relative; rotate: -3deg; margin-top: 10px; }
.pd-artist-photo .pd-polaroid {
    padding: 14px 14px 56px;
    border: 2px solid var(--pd-ink);
    box-shadow: 10px 10px 0 var(--pd-ink);
}
.pd-artist-photo .pd-polaroid-img { font-size: 15px; }
/* No photo: big dot-matrix initials on a dark swatch, like the home tiles. */
.pd-polaroid-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 168px;
    line-height: 1;
}
.pd-artist-photo .pd-tape { top: -14px; left: 36%; width: 130px; height: 30px; rotate: -4deg; }
.pd-artist-chip {
    position: absolute;
    top: 22px;
    left: 24px;
    max-width: calc(100% - 140px);
    background: var(--pd-card);
    padding: 2px 6px;
    border: 1px solid var(--pd-ink);
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 16px;
    color: var(--pd-cobalt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pd-artist-photo .pd-sticker {
    top: -30px;
    right: -34px;
    width: 112px;
    height: 112px;
    background: var(--pd-cobalt);
    color: var(--pd-paper);
    box-shadow: 4px 4px 0 var(--pd-ink);
    rotate: 16deg;
    gap: 4px;
    font-size: 12px;
}
.pd-artist-photo .pd-sticker .pd-sticker-big { font-size: 16px; }
/* A narrow hero column (two columns at about 901-1060px) shows the slug
   alone rather than cutting the brand with an ellipsis. */
@container (max-width: 439px) {
    .pd-artist-chip-brand { display: none; }
}

/* --len is the longest word (pdNameLen), so the name shrinks to keep every
   word whole in the column; the first font-size is the fallback. The outline
   is a real stroke painted behind the fill, so neighbouring letters keep
   their own outlines. */
.pd-artist-name {
    margin: -70px 0 0 -16px;
    position: relative;
    font-family: var(--pd-font-display);
    font-weight: 700;
    --len: 8;
    font-size: clamp(36px, min(calc(860px / var(--len)), calc(150vw / var(--len))), 136px);
    font-size: clamp(32px, calc(180cqi / var(--len, 8)), 136px);
    line-height: .9;
    letter-spacing: 0.01em;
    color: var(--pd-paper);
    -webkit-text-stroke: 4px var(--pd-ink);
    paint-order: stroke fill;
    text-shadow: 6px 6px 0 var(--pd-cobalt);
    overflow-wrap: break-word;
}

.pd-artist-bio { font-size: 16px; padding: 14px 16px; white-space: pre-line; }
/* Artist-typed text: a pasted URL breaks instead of widening the page. */
.pd-artist-bio,
.pd-feature .pd-lcd,
.pd-merch-desc { overflow-wrap: anywhere; }
.pd-artist-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.pd-links { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.pd-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 54px;
    padding: 6px 14px 6px 8px;
    margin-right: 6px;
    border: 2px solid var(--pd-ink);
    border-radius: 8px;
    box-shadow: 4px 4px 0 var(--pd-ink);
    transition: translate .1s var(--pd-ease), box-shadow .1s var(--pd-ease);
}
.pd-link:hover { text-decoration: none; translate: -2px -2px; box-shadow: 6px 6px 0 var(--pd-ink); }
.pd-link:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--pd-ink); }
.pd-link--cobalt { background: var(--pd-cobalt); color: var(--pd-paper); }
.pd-link--card { background: var(--pd-card); color: var(--pd-ink); }
.pd-link--ink { background: var(--pd-ink); color: var(--pd-paper); }
.pd-link--cobalt:hover, .pd-link--ink:hover { color: var(--pd-paper); }
.pd-link--card:hover { color: var(--pd-ink); }
.pd-link-icon {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 6px;
    border: 1.5px solid var(--pd-ink);
    background: var(--pd-paper);
    color: var(--pd-cobalt);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pd-link--card .pd-link-icon { background: var(--pd-cobalt); color: var(--pd-paper); }
/* The platform SVGs carry fill="#fff"; currentColor follows the tile. */
.pd-link-icon svg { height: 20px; width: auto; max-width: 28px; fill: currentColor; }
/* The Apple Music note only fills the middle of its viewBox. */
.pd-link-icon--applemusic svg { height: 32px; max-width: 32px; }
.pd-link-name { flex: 1; font-size: 17px; font-weight: 700; min-width: 0; }
.pd-link-handle {
    font-family: var(--pd-font-dot);
    font-weight: 800;
    font-size: 13px;
    opacity: .85;
    text-transform: uppercase;
    max-width: 45%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pd-link-arrow { font-family: var(--pd-font-dot); font-weight: 900; font-size: 16px; }
.pd-links-empty { padding: 18px; font-weight: 600; text-align: center; }
.pd-merch-invite { text-align: center; }
.pd-merch-invite p { margin: 0 auto 14px; max-width: 60ch; }
.pd-merch-invite-title { font-family: var(--pd-font-dot); font-weight: 900; font-size: 22px; text-transform: uppercase; }

.korta-claim-strip {
    border: 2px solid var(--pd-ink);
    border-radius: var(--pd-radius);
    background: var(--pd-ink);
    color: var(--pd-paper);
    padding: 18px 20px;
    box-shadow: 6px 6px 0 var(--pd-cobalt);
    rotate: .6deg;
}
.korta-claim-strip strong { font-family: var(--pd-font-dot); font-weight: 900; color: var(--pd-peri); margin-right: 4px; text-transform: uppercase; }
.korta-claim-strip p { margin-bottom: 14px; font-size: 14px; }

/* Closing line on a live artist page: a tear-off coupon on a solid card. */
.pd-artist-start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    padding: 14px 18px;
    border: 2px dashed var(--pd-ink);
    border-radius: var(--pd-radius);
    background: var(--pd-card);
    rotate: -.6deg;
}
.pd-artist-start p {
    margin: 0;
    font-family: var(--pd-font-display);
    font-weight: 700;
    font-size: 28px;
    line-height: .95;
    color: var(--pd-cobalt);
}

.korta-contact .korta-form { max-width: none; }
/* In the try window it lines up with the 560px forms above it. */
.pd-win--main .korta-contact .korta-form { max-width: 560px; }
.pd-win--main .korta-contact { margin-top: 32px; padding-top: 24px; border-top: 2px dashed var(--pd-ink); }
.korta-contact > p { font-size: 14px; }
.korta-cover-meta,
.korta-contact > p { max-width: 68ch; }

/* ===== Try studio bar ===== */

.korta-try-bar {
    position: sticky;
    top: 8px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 22px;
    padding: 12px 14px;
    border: 2px solid var(--pd-ink);
    border-radius: var(--pd-radius);
    background: var(--pd-metal);
    box-shadow: 4px 4px 0 var(--pd-cobalt);
}
.pd-layout--artist .korta-try-bar { margin: 0 0 10px; }
.korta-try-bar-note { margin: 0; font-family: var(--pd-font-dot); font-weight: 900; font-size: 12px; color: var(--pd-cobalt); }
.korta-try-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.korta-try-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.korta-try-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
/* The admin's claim preview: who asks, where the studio tabs would be. */
.korta-try-who { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
/* A claimed page an artist login still runs: approving switches it off, so the
   warning is a hard-edged ink tab and the approve form waits for the box. */
.korta-claim-owner {
    margin: 8px 0 0;
    padding: 8px 10px 8px 34px;
    position: relative;
    border: 2px solid var(--pd-ink);
    border-radius: 6px;
    background: var(--pd-card);
    box-shadow: var(--pd-shadow-sm);
    font: 600 13px/1.4 var(--pd-font-ui);
    color: var(--pd-ink);
    overflow-wrap: anywhere;
    overflow: hidden;
}
.korta-claim-owner::before {
    content: "!";
    content: "!" / "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pd-ink);
    color: var(--pd-paper);
    font: 900 14px var(--pd-font-dot);
}
.korta-check.korta-claim-ack { display: flex; margin-top: 8px; font-size: 13px !important; line-height: 1.3; }
.korta-claim-ack input { flex: none; }
/* As a table (the claims list stacks up to 1280px), the page column makes
   room for the warning instead of setting it a word to a line. */
@media (min-width: 1281px) {
    .korta-table td:has(> .korta-claim-owner) { min-width: 260px; }
}
/* Jumps and focused fields land below the sticky bar, not under it. */
html:has(.korta-try-bar) { scroll-padding-top: 170px; }
@media (min-width: 1100px) {
    html:has(.korta-try-bar) { scroll-padding-top: 124px; }
}
/* Phones: the bar would cover a third of the screen, so it scrolls away. */
@media (max-width: 600px) {
    .korta-try-bar { position: static; }
    html:has(.korta-try-bar) { scroll-padding-top: 0; }
    .korta-try-actions { margin-left: 0; width: 100%; }
    .korta-try-actions .pd-pill { flex: 1 1 0; min-height: 38px; padding: 0 12px; }
}
@media (max-width: 520px) {
    .korta-try-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .korta-try-seg .pd-chunky { width: 100%; }
}

/* In-page jumps keep the target's title bar or heading in view. */
#merch, #atlikejai, #kontaktas { scroll-margin-top: 20px; }

/* ===== Shuffle overlay ===== */

.korta-shuffle {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(7,7,7,.55);
    overflow-y: auto;
    overscroll-behavior: contain;
    align-items: safe center;
}
.korta-shuffle[hidden] { display: none; }
.korta-shuffle .pd-win { width: 100%; max-width: 380px; max-height: calc(100dvh - 40px); overflow-y: auto; }
#korta-merch-invite .pd-win { max-width: 520px; }
/* The page behind an open dialog does not scroll. */
html:has(.korta-shuffle:not([hidden])) { overflow: hidden; }
.korta-shuffle-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.korta-shuffle-reel {
    width: 220px;
    aspect-ratio: 1;
    border: 2px solid var(--pd-ink);
    background: var(--pd-ink);
    box-shadow: 5px 5px 0 var(--pd-cobalt);
    overflow: hidden;
}
.korta-shuffle-cover { width: 100%; height: 100%; object-fit: cover; background: var(--pd-placeholder); }
.korta-shuffle-cover.korta-merch-ph { display: flex; align-items: center; justify-content: center; font-family: var(--pd-font-dot); font-weight: 900; color: var(--pd-soft); }
.korta-shuffle-caption { margin: 0; font-weight: 700; text-align: center; min-height: 1.5em; }
.korta-shuffle-lcd { width: 100%; text-align: center; text-transform: uppercase; }
.korta-shuffle.is-landed .korta-shuffle-reel { box-shadow: 5px 5px 0 var(--pd-ink); outline: 3px solid var(--pd-cobalt); outline-offset: 3px; }
/* Muted while spinning so photo swaps stay low contrast; full colour on landing. */
.korta-shuffle:not(.is-landed) .korta-shuffle-cover { filter: grayscale(1) contrast(.55) brightness(1.1); }
/* Landscape phones: the whole dialog, title bar to buttons, fits the screen. */
@media (max-height: 520px) {
    .korta-shuffle-reel { width: min(220px, 34dvh); }
    .korta-shuffle-body { padding: 12px; gap: 10px; }
    .korta-shuffle-lcd { padding: 6px 10px; }
}

/* ===== Toast ===== */

.pd-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 90;
    translate: -50% 20px;
    opacity: 0;
    padding: 10px 18px;
    border: 2px solid var(--pd-ink);
    background: var(--pd-cobalt);
    color: var(--pd-paper);
    font-family: var(--pd-font-dot);
    font-weight: 900;
    font-size: 14px;
    box-shadow: var(--pd-shadow-sm);
    transition: opacity .2s ease, translate .2s var(--pd-ease);
    pointer-events: none;
}
.pd-toast.is-visible { opacity: 1; translate: -50% 0; }

/* ===== Responsive ===== */

@media (max-width: 1180px) {
    /* Row 1 hugs the left rail and row 2 takes the slack, so the right rail
       starts right under it instead of halfway down the main column. */
    .pd-layout--home {
        grid-template-columns: 230px minmax(0, 1fr);
        grid-template-areas: "left main" "right main";
        grid-template-rows: auto 1fr;
    }
    .pd-layout--home .pd-rail--right { align-self: start; }
    .pd-top { grid-template-columns: auto 1fr; }
    /* Keeps the four tabs on one row down to 901px. */
    .pd-tab { min-width: 112px; }
    .pd-search { grid-column: 1 / -1; width: 100%; }
    /* Logged out: the pill shares the search row, so the tabs keep the top row. */
    .pd-top--start { grid-template-columns: auto 1fr auto; column-gap: 32px; }
    .pd-top--start .pd-nav { grid-column: 2 / -1; }
    .pd-top--start .pd-search { grid-column: 1 / 3; grid-row: 2; }
    .pd-top-start { grid-column: 3; grid-row: 2; }
    /* Searching artists is not a studio task, and here it needs a row of its own. */
    .pd-body--studio .pd-search { display: none; }
    .pd-merch-grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pd-artist { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; }
    .pd-cart { grid-template-columns: minmax(0, 1fr); }
}

/* Stacked under the lines, the summary stays receipt-sized at the right
   instead of a full-width slab; phones keep it full width. */
@media (min-width: 601px) and (max-width: 1180px) {
    .pd-cart > .pd-summary { width: 100%; max-width: 420px; justify-self: end; }
}

/* Four 120px tabs stay on one row just above the 1180px breakpoint. */
@media (min-width: 1181px) and (max-width: 1280px) {
    .pd-search { width: 200px; }
}

/* Rails stay in view while the long main column scrolls. */
@media (min-width: 1181px) and (min-height: 720px) {
    .pd-layout--home .pd-rail { position: sticky; top: 20px; }
}
@media (min-width: 901px) and (min-height: 720px) {
    .pd-layout--site .pd-rail--left { position: sticky; top: 20px; }
}
/* Studio tables need the full width until the rail fits beside them (the
   users table is about 680px), so the menu sits under the window as on
   tablets instead of pushing the table out of it. */
@media (min-width: 901px) and (max-width: 1180px) {
    .pd-body--studio .pd-layout--site { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "left"; }
    .pd-body--studio .pd-rail--left { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
    .pd-body--studio .pd-rail--left > .pd-badges { display: none; }
}

/* The hero scrolls until its buttons are in view, then stays pinned and
   ends level with the last window instead of leaving an empty band. */
@media (min-width: 901px) {
    .pd-artist-left { position: sticky; bottom: 24px; align-self: end; }
}
/* A tall screen fits the whole hero, which would otherwise float at the
   bottom of the screen with a gap above it, so it pins to the top instead.
   A hero still taller than the screen (pd.js sets --pd-hero-h) scrolls
   until its buttons are in view and then pins. Without JS it pins at 20px.
   Not on the try preview, where the sticky try bar holds the top. */
@media (min-width: 901px) and (min-height: 1000px) {
    .pd-layout--artist:not(:has(.korta-try-bar)) .pd-artist-left { top: min(20px, calc(100vh - 24px - var(--pd-hero-h, 0px))); bottom: auto; align-self: start; }
}
/* The try preview on a tall screen: 124px clears the sticky try bar (96px
   at top 8px) plus a 20px gap. A hero too tall for that pins by its bottom
   edge instead, as on shorter screens. */
@media (min-width: 901px) and (min-height: 1100px) {
    .pd-layout--artist:has(.korta-try-bar) .pd-artist-left { top: min(124px, calc(100vh - 24px - var(--pd-hero-h, 0px))); bottom: auto; align-self: start; }
}

@media (max-width: 900px) {
    .pd-shell { padding-left: 18px; padding-right: 18px; }
    .pd-layout { padding-bottom: 32px; }
    .pd-top { grid-template-columns: auto 1fr; gap: 16px 18px; padding-top: 26px; padding-bottom: 14px; }
    .pd-logo-word { font-size: 34px; }
    .pd-logo { padding: 11px 10px 7px; box-shadow: 4px 4px 0 var(--pd-cobalt); }
    .pd-logo-beta { width: 42px; height: 42px; top: -14px; right: -22px; font-size: 10px; }
    .pd-nav {
        grid-column: 1 / -1;
        order: 3;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 2px 6px 8px 2px;
        scrollbar-width: none;
    }
    .pd-nav::-webkit-scrollbar { display: none; }
    /* No shrinking below the label: the strip scrolls instead. */
    .pd-tab { flex: none; min-width: 0; height: 36px; font-size: 13px; }
    .pd-top-cart { justify-self: end; }
    .pd-search { order: 4; }
    /* Logged out: the pill sits at the right end of the logo row. */
    .pd-top--start { grid-template-columns: auto 1fr auto; column-gap: 18px; }
    .pd-top--start .pd-nav { grid-column: 1 / -1; }
    .pd-top--start .pd-search { grid-column: 1 / -1; grid-row: auto; }
    .pd-top-start { grid-column: 3; grid-row: 1; min-height: 38px; padding: 0 16px; font-size: 13px; }

    .pd-layout--site,
    .pd-layout--home {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "main" "right" "left";
        grid-template-rows: none;
        gap: 22px;
    }
    .pd-main { gap: 26px; }
    /* The footer badge row sits right below, so the rail copy goes. */
    .pd-rail--left > .pd-badges { display: none; }

    .pd-heading h1,
    .pd-heading h2 { font-size: 34px; }
    .pd-heading { padding: 8px 12px; gap: 10px; box-shadow: 4px 4px 0 var(--pd-ink); }

    .pd-merch-grid,
    .pd-merch-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
    .pd-artist-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 20px 14px; }

    /* 16 badges fill 4x4 here and 2x8 on phones, with no orphan. */
    .pd-badges--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pd-badges--grid .pd-badge { width: 100%; max-width: 132px; justify-self: center; height: 34px; font-size: 10px; word-break: normal; box-shadow: 2px 2px 0 var(--pd-ink); }

    .pd-random { flex-direction: row; justify-content: space-between; padding: 14px; }
    .pd-random-title { font-size: 24px; text-align: left; }

    /* One centred 640px column; the badges and the try bar line up with it. */
    .pd-artist { grid-template-columns: minmax(0, 1fr); padding: 10px 0 24px; gap: 30px; width: 100%; max-width: 640px; margin-inline: auto; }
    .pd-artist-top { max-width: 676px; }
    .pd-layout--artist .korta-try-bar { width: 100%; max-width: 640px; margin: 0 auto 10px; }
    .pd-artist-photo { max-width: 420px; margin: 32px auto 0; width: calc(100% - 30px); }
    /* Bigger circle, smaller words: OFICIALU and PERIMTI clear the rim. */
    .pd-artist-photo .pd-sticker { width: 96px; height: 96px; top: -22px; right: -8px; font-size: 11px; }
    .pd-artist-photo .pd-sticker .pd-sticker-big { font-size: 14px; letter-spacing: -0.02em; }
    .pd-artist-photo .pd-sticker > span:first-child { font-size: 14px; }
    .pd-artist-name { margin: -48px 0 0 0; text-shadow: 4px 4px 0 var(--pd-cobalt); }
    .pd-artist-chip { font-size: 12px; top: 18px; left: 18px; }
    .pd-polaroid-initials { font-size: 120px; }

    .korta-merch-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .korta-merch-filters label:first-child { grid-column: 1 / -1; }

    .pd-summary-title { font-size: 28px; }

    .pd-win-body--roomy { padding: 18px; }
    .korta-panel-title { font-size: 36px; }
    .pd-footer-inner { justify-content: center; text-align: center; }
    .pd-footer .pd-badges { justify-content: center; }
    .pd-alert-body { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 20px; }
    .pd-alert-icon { width: 48px; height: 48px; font-size: 22px; }
    /* An alert's h2 sits under the page h1, so it steps below it. */
    .pd-alert h2 { font-size: 28px; }

    .pd-main > .korta-flash { margin-bottom: -6px; }
    .pd-win-close { width: 20px; height: 20px; font-size: 14px; line-height: 15px; }

    /* iOS Safari zooms into any focused field under 16px. */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    select,
    textarea,
    .pd-search input { font-size: 16px; }
}

/* Tablet hero: a smaller polaroid, but the bio LCD and sticker stay. */
@media (min-width: 521px) and (max-width: 900px) {
    .pd-feature { grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: 24px; }
    .pd-feature .pd-polaroid { padding: 8px 8px 28px; }
    .pd-feature-hint { display: none; }
    .pd-feature-name { font-size: clamp(28px, calc(180cqi / var(--len, 8)), 56px); text-shadow: 3px 3px 0 var(--pd-ink); }
    .pd-feature .pd-lcd { font-size: 13px; padding: 8px 10px; }
    .pd-feature .pd-sticker { top: 8px; left: 132px; right: auto; width: 72px; height: 72px; font-size: 12px; }
}

/* Tablets: search joins the logo row, and the left rail windows sit side by side. */
@media (min-width: 601px) and (max-width: 900px) {
    .pd-merch-grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; }
    .pd-search { grid-column: 2; grid-row: 1; justify-self: end; width: min(100%, 320px); }
    .pd-top--start .pd-search { grid-column: 2; grid-row: 1; }
    .pd-nav { grid-row: 2; }
    .pd-rail--left { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
}

/* From 601px the home shelf (up to 6 items) is 3 cards wide on 6 tracks, so
   a short last row (4 or 5 items) sits centred like the odd phone card
   instead of hugging the left. Two tracks plus their gap are exactly one of
   the old three columns, so 3 or 6 items look the same as before. */
@media (min-width: 601px) {
    .pd-merch-grid.pd-merch-grid--home { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .pd-merch-grid--home > .pd-merch-card { grid-column: span 2; }
    .pd-merch-grid--home > .pd-merch-card:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
    .pd-merch-grid--home > .pd-merch-card:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
}

/* An odd last home merch card sits centred at column width, not alone on the left. */
@media (max-width: 600px) {
    .pd-merch-grid--home > .pd-merch-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 9px); }
}

/* Phones: cart lines stack, with quantity and price under the name. Tablets
   keep the four-column table. */
@media (max-width: 600px) {
    .pd-cart-head { display: none; }
    .pd-cart-line { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "thumb name name" "thumb qty price"; gap: 8px 12px; }
    .pd-cart-thumb { grid-area: thumb; width: 64px; height: 64px; }
    .pd-cart-name { grid-area: name; }
    .pd-cart-qty { grid-area: qty; }
    .pd-cart-price { grid-area: price; }
}

@media (max-width: 480px) {
    .pd-badges--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    /* Four tabs as a 2x2 block, so the cart is always in view. */
    .pd-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding: 2px 6px 4px 2px;
    }
    .pd-tab { width: 100%; height: 38px; padding: 0 8px; }
    .pd-footer .pd-badges { display: grid; grid-template-columns: repeat(2, 88px); justify-content: center; }

    .pd-merch-grid,
    .pd-merch-grid--wide { gap: 22px 14px; padding-right: 8px; }
    .pd-merch-card { padding: 8px; }
    .pd-price { width: 52px; height: 52px; top: -12px; right: -10px; }
    .pd-price b { font-size: 17px; }
    .pd-price--long b { font-size: 11px; }
    .pd-price--xlong b { font-size: 10px; }
    .pd-merch-title { font-size: 14px; }
    /* Two-line pill instead of clipping "Noriu savo merch" at 320px. */
    .pd-merch-form .korta-btn { padding: 0 10px; white-space: normal; line-height: 1.15; }
    /* Alert buttons can carry an artist name, so they wrap rather than
       run past the window at 320px. */
    .pd-alert .korta-btn { white-space: normal; line-height: 1.15; }

    /* Filters: artist and sort, then min, max and the button. The header
       search right above already searches merch with the same q, so the
       form's copy is hidden here; it still submits its value. */
    .korta-merch-filters { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
    .korta-merch-filters label:nth-child(1) { display: none; }
    .korta-merch-filters label:nth-child(2),
    .korta-merch-filters label:nth-child(3) { grid-column: span 3; }
    .korta-merch-filters label:nth-child(4),
    .korta-merch-filters label:nth-child(5) { grid-column: span 2; }
    .korta-merch-filters-actions { grid-column: span 2; }
    .korta-merch-filters-actions .korta-btn { width: 100%; padding: 0 10px; }
    .pd-link-handle { display: none; }

    /* Artist hero: the slug alone on the chip, never an ellipsis, and the
       buttons fill their row instead of leaving a ragged edge. */
    .pd-artist-chip-brand { display: none; }
    .pd-artist-chip { max-width: calc(100% - 110px); }
    .pd-artist-actions > .pd-pill { flex: 1 1 auto; }

    /* Artist merch: one compact card per row, cover beside the text and the
       variant select next to the button on a full-width row below. */
    .pd-artist .pd-merch-grid--two { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .pd-artist .pd-merch-card {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        grid-template-areas: "cover info" "form form";
        gap: 10px 12px;
        align-items: start;
    }
    .pd-artist .pd-merch-cover { grid-area: cover; aspect-ratio: 1; }
    .pd-artist .pd-merch-info { grid-area: info; padding: 4px 0 0; }
    .pd-artist .pd-merch-title { margin-right: 40px; }
    .pd-artist .pd-merch-form { grid-area: form; flex-direction: row; padding: 0; }
    .pd-artist div.pd-merch-form { flex-direction: column; }
    .pd-artist .pd-merch-form select { flex: 1 1 auto; min-width: 0; }
    .pd-artist .pd-merch-form .korta-btn { width: auto; flex: none; }
    .pd-artist .pd-merch-form:not(:has(select)) .korta-btn { flex: 1 1 auto; }

    /* Hero: photo and name side by side, then a two-line bio and a
       full-width button. display: contents removes the info container, so
       the whole feature is the container and the name column is its
       content width minus the photo and gap (112px). position: relative
       keeps each piece above the ::before dot overlay. */
    .pd-feature {
        grid-template-columns: 96px minmax(0, 1fr);
        grid-template-areas: "photo name" "lcd lcd" "actions actions";
        gap: 14px 16px;
        padding: 16px;
        container-type: inline-size;
    }
    .pd-feature-info { display: contents; container-type: normal; }
    .pd-feature-photo { grid-area: photo; }
    .pd-feature-name { grid-area: name; align-self: center; position: relative; font-size: clamp(18px, calc((100cqi - 112px) * 1.8 / var(--len, 8)), 40px); text-shadow: 3px 3px 0 var(--pd-ink); }
    .pd-feature .pd-lcd {
        grid-area: lcd;
        position: relative;
        margin: 0;
        font-size: 12px;
        padding: 6px 8px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .pd-feature-actions { grid-area: actions; position: relative; }
    .pd-feature-actions .pd-pill { flex: 1 1 auto; }
    .pd-feature .pd-polaroid { padding: 6px 6px 18px; }
    .pd-feature .pd-polaroid-caption,
    .pd-feature .pd-sticker,
    .pd-feature-hint,
    .pd-feature-photo .pd-tape { display: none; }

    /* Sort chips as a 2x2 block; the three filters share the next row. */
    .pd-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
    .pd-seg .pd-chunky { padding: 0 8px; font-size: 12px; }
    .pd-seg--filter { grid-template-columns: auto minmax(0, 1fr); }
    .pd-seg--filter > :last-child { grid-column: 1 / -1; }

    /* Headings wrap instead of pushing their link or pill off screen. */
    .pd-heading { flex-wrap: wrap; row-gap: 6px; }
    .pd-heading-stars { display: none; }
    .pd-heading-rule { flex: 1 1 24px; min-width: 0; }
    .pd-heading-link,
    .pd-heading > .pd-pill { margin-left: auto; }
    .pd-heading h1,
    .pd-heading h2 { font-size: 30px; }
    .pd-heading > .pd-pill { min-height: 36px; padding: 0 14px; font-size: 13px; }
}

/* All three filters fit on one row from 375px. */
@media (min-width: 375px) and (max-width: 520px) {
    .pd-seg--filter { grid-template-columns: auto 1fr 1fr; }
    .pd-seg--filter > :last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .pd-marquee-track { animation: none; }
    /* A static strip that wraps and shows the whole text once. */
    .pd-marquee { height: auto; min-height: 36px; padding: 6px 16px; white-space: normal; }
    .pd-marquee-track { display: block; flex: 1 1 auto; min-width: 0; }
    .pd-marquee-track > span + span { display: none; }
    .pd-win,
    .pd-merch-card,
    .pd-artist-tile,
    .pd-link,
    .pd-tab,
    .pd-logo,
    .pd-pill,
    .korta-btn,
    .pd-chunky,
    .pd-badge-more,
    .korta-stat,
    .pd-toast { transition: none; }
}

@media (forced-colors: active) {
    select { appearance: auto; background-image: none; }
    .pd-tab.is-current,
    .pd-menu a.is-current,
    .pd-chunky.is-active {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
        border-color: Highlight;
    }
    .pd-heading-rule,
    .pd-summary-rule { background: CanvasText; }
    /* Its border is spacing, not a frame; the outline is the frame. */
    .pd-merch-ph { border-color: Canvas; }
}

@media print {
    .pd-marquee, .pd-top, .pd-rail, .pd-footer, .pd-win-close { display: none !important; }
    body,
    body.pd-body--artist,
    body.pd-body--custom-bg { background: #fff !important; }
    .pd-artist-top, .pd-artist-actions, .pd-merch-form, .korta-contact, .korta-claim-strip, .pd-artist-start,
    .korta-try-bar, .pd-skip-link, .pd-cart-foot, .pd-summary .korta-btn, .korta-shuffle { display: none !important; }
    * { box-shadow: none !important; text-shadow: none !important; }
    /* Paper text on cobalt or ink prints as pale grey once backgrounds drop. */
    .pd-win, .pd-link, .pd-lcd, .pd-summary, .korta-flash { background: #fff !important; color: var(--pd-ink) !important; }
    .pd-artist-name, .pd-feature-name { color: var(--pd-cobalt) !important; }
    .pd-link::after { content: " " attr(href); font: 800 11px var(--pd-font-dot); }
    .pd-win, .pd-merch-card { break-inside: avoid; }
}