/* PageChew's launch state and email signup within the home product carousel. */

.product-media-pagechew { background: #0a0a09; }
.product-copy-pagechew { position: relative; }

.pagechew-launch-ticket {
    position: absolute;
    top: clamp(24px, 3vw, 34px);
    right: clamp(24px, 3vw, 34px);
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px 0 24px;
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
    background: var(--pagechew);
    color: #191d06;
    filter: drop-shadow(0 8px 14px rgba(72, 82, 10, .16));
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.pagechew-launch-ticket::before {
    position: absolute;
    left: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(25, 29, 6, .3);
    content: "";
}

.pagechew-subscribe {
    width: min(100%, 390px);
    margin-top: clamp(24px, 3vw, 34px);
}

.pagechew-subscribe-row { display: flex; gap: 8px; }

.pagechew-subscribe label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pagechew-subscribe input {
    min-width: 0;
    flex: 1;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font: 15px var(--font);
}

.pagechew-subscribe input::placeholder { color: var(--ink-3); }
.pagechew-subscribe input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.pagechew-subscribe .btn { flex: none; padding-inline: 19px; }
.pagechew-subscribe .btn:disabled { cursor: wait; opacity: .56; transform: none; }

.pagechew-subscribe-note {
    margin: 10px 2px 0;
    color: var(--ink-3);
    font-size: 13px;
    line-height: 1.45;
}

.pagechew-subscribe-note a { text-decoration: underline; text-underline-offset: 2px; }

.pagechew-more {
    width: fit-content;
    margin-top: 13px;
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--line-2);
    text-underline-offset: 4px;
}

.pagechew-more:hover { color: var(--ink); text-decoration-color: var(--ink); }

@media (max-width: 560px) {
    .product-copy-pagechew { padding-top: 82px; }
    .pagechew-launch-ticket { top: 26px; right: 26px; }
    .pagechew-subscribe-row { flex-direction: column; }
    .pagechew-subscribe .btn { width: 100%; }
}