/* ==========================================================================
   Merch — coming soon. Depends on tokens from redesign.css.
   ========================================================================== */

/* Fills the viewport minus the header: a short page shouldn't leave the
   footer floating halfway up the screen. */
.kxp-merch__inner {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-block: clamp(7rem, 14vh, 10rem) clamp(4rem, 8vh, 6rem);
}
.kxp-merch__grid {
    display: grid;
    gap: clamp(3rem, 7vw, 6rem);
    grid-template-columns: 1fr;
    align-items: center;
    width: 100%;
}
@media (min-width: 900px) {
    .kxp-merch__grid { grid-template-columns: 1.1fr 0.9fr; }
}

/* Text-only layout (teaser image removed at the client's request) — centred. */
.kxp-merch__center {
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
}
.kxp-merch__center .kxp-merch__title,
.kxp-merch__center .kxp-lead { margin-inline: auto; }
.kxp-merch__center .kxp-lead { max-width: 46ch; }
.kxp-merch__center .kxp-merch__form { margin-inline: auto; }

.kxp-merch__title { margin-block: 1.4rem 1.8rem; }
.kxp-merch__title--accent { color: var(--kxp-accent); }

/* ── Notify form ────────────────────────────────────────────────────────── */
.kxp-merch__form {
    display: flex;
    max-width: 460px;
    margin-top: clamp(2rem, 4vw, 2.75rem);
}
.kxp-merch__form input {
    flex: 1;
    min-width: 0;
    padding: 1.05em 1.2em;
    background: transparent;
    color: var(--kxp-black);
    border: 1px solid var(--kxp-grey-300);
    border-right: 0;
    font-family: inherit;
    font-size: var(--kxp-step--1);
    transition: border-color 0.3s var(--kxp-ease);
}
.kxp-merch__form input::placeholder { color: var(--kxp-grey-500); }
.kxp-merch__form input:focus { outline: none; border-color: var(--kxp-black); }

.kxp-merch__form button {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 1.05em 1.8em;
    background: var(--kxp-black);
    color: var(--kxp-white);
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    /* Chamfer on the outer corners only — matches .kxp-cta where it meets air. */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kxp-chamfer)), calc(100% - var(--kxp-chamfer)) 100%, 0 100%);
    transition: background 0.4s var(--kxp-ease);
}
.kxp-merch__form button:hover { background: var(--kxp-accent); }
.kxp-merch__form button:hover .kxp-cta__arrow { transform: translateX(4px); }

.kxp-merch__back {
    margin-top: 1.6rem;
    font-size: var(--kxp-step--1);
    color: var(--kxp-grey-500);
}
.kxp-merch__back a {
    color: var(--kxp-black);
    border-bottom: 1px solid var(--kxp-grey-300);
    padding-bottom: 2px;
    transition: border-color 0.3s var(--kxp-ease), color 0.3s var(--kxp-ease);
}
.kxp-merch__back a:hover { color: var(--kxp-accent); border-bottom-color: var(--kxp-accent); }

@media (max-width: 560px) {
    .kxp-merch__form { flex-direction: column; }
    .kxp-merch__form input { border-right: 1px solid var(--kxp-grey-300); border-bottom: 0; }
    .kxp-merch__form button { justify-content: center; clip-path: none; }
}

/* ── The teaser shot ────────────────────────────────────────────────────── */
.kxp-merch__shot {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    background: var(--kxp-grey-50);
    clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
    overflow: hidden;
}
/* The shot is cut out on white, so the grey plate is what gives it an edge —
   without it the hoodie floats and the chamfer never reads. */
.kxp-merch__shot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    mix-blend-mode: multiply;
    padding: 8% 6% 0;
    /* Barely-there drift: the piece is present but not yet available. */
    animation: kxp-merch-drift 18s var(--kxp-ease-io) infinite alternate;
}
@keyframes kxp-merch-drift {
    from { transform: scale(1.02); }
    to   { transform: scale(1.07); }
}

/* The one thing that tells you why there's no buy button. */
.kxp-merch__tag {
    position: absolute;
    top: 1.4rem;
    left: 1.4rem;
    background: var(--kxp-black);
    color: var(--kxp-white);
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 0.5em 1em;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

@media (max-width: 899px) {
    /* Keep the form reachable without scrolling past a tall image. */
    .kxp-merch__shot { aspect-ratio: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .kxp-merch__shot img { animation: none; }
}