/* ============================================================
   OroCafe – account screens, legal pages and the cookie banner.
   ============================================================ */

/* ---------- Account ---------- */
.account-lede {
    color: #000;
    font-size: 1.1rem;
    max-width: 60ch;
}

.account-subhead {
    margin: 30px 0 14px;
    /* Same size and tracking as the storefront .eyebrow. */
    font-size: .88rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--orange-2);
}

.avatar-field {
    padding: 20px;
    margin-bottom: 24px;
    background: var(--cream-2);
    border-radius: var(--radius);
}

.avatar-editor {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.avatar-field__image {
    width: 104px;
    height: 104px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: var(--cream-3);
    border: 3px solid var(--white);
}

.avatar-field__copy {
    flex: 1 1 240px;
    min-width: 0;
    display: grid;
    gap: 5px;
}

.avatar-field__copy strong {
    color: var(--brown);
}

.avatar-field__copy > span:not(.text-danger) {
    color: #000;
    font-size: 1.03rem;
    line-height: 1.55;
}

.avatar-field__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.avatar-field__actions .btn {
    padding: 10px 22px;
    font-size: .78rem;
}

.avatar-field__actions .btn input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* Every account menu item leads with an icon. */
.account-nav a,
.account-nav__logout button,
.main-nav .drawer-account a:not(.drawer-account__head),
.drawer-account__logout button {
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-nav a svg,
.account-nav__logout button svg,
.main-nav .drawer-account a svg,
.drawer-account__logout button svg {
    width: 18px;
    height: 18px;
    flex: none;
    fill: currentColor;
    opacity: .8;
}

.account-nav a.active svg {
    opacity: 1;
}

.account-nav__logout {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.account-nav__logout button {
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: #b3261e;
    font: 700 .82rem var(--body);
    text-align: left;
    cursor: pointer;
}

.account-nav__logout button:hover {
    background: #fdecea;
}

.order-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 88px;
    padding: 8px 14px;
    border: 1px solid rgba(92, 42, 18, .22);
    border-radius: 999px;
    background: var(--white);
    color: var(--brown);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: gap .2s ease, color .2s ease, background-color .2s ease, border-color .2s ease;
}

.order-view-btn:hover {
    gap: 12px;
    border-color: var(--brown);
    background: var(--brown);
    color: var(--cream);
}

.two-factor-actions,
.authenticator-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0;
}

.authenticator-card {
    margin-top: 28px;
    padding: clamp(20px, 4vw, 28px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--cream-2);
}

.authenticator-card__head {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.authenticator-card__icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--white);
    color: var(--orange-2);
}

.authenticator-card__icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.authenticator-card h4 {
    margin: 0 0 5px;
}

.authenticator-card p {
    margin: 0;
    color: #000;
    font-size: 1.1rem;
    line-height: 1.55;
}

.authenticator-card__actions {
    margin: 20px 0 0;
}

/* ---------- Preferences: favourite blend profile ---------- */
.pref-blends:empty { display: none; }

.pref-blend {
    --blend-accent: var(--brand-dark-green);
    display: grid;
    gap: 16px;
    margin-top: 16px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-left: 6px solid var(--blend-accent);
    border-radius: var(--radius);
    background: var(--cream-2);
}

.pref-blend[hidden] { display: none; }

.pref-blend__head { display: grid; gap: 2px; }

.pref-blend__head strong {
    color: var(--blend-accent);
    font-family: var(--display);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}

.pref-blend__head span { color: #000; font-size: .95rem; line-height: 1.45; }

.pref-blend__meters { display: grid; gap: 10px; }

.pref-blend__meter {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 34px;
    gap: 12px;
    align-items: center;
}

.pref-blend__label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.pref-blend__bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }

.pref-blend__bar span {
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
}

.pref-blend__bar span.is-filled { background: var(--blend-accent); }
.pref-blend__score { color: #000; font-size: .82rem; font-weight: 700; text-align: right; }

.pref-blend__facts { display: grid; gap: 8px; margin: 0; }
.pref-blend__facts div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.pref-blend__facts dt { color: var(--muted); font-size: .8rem; font-weight: 700; }
.pref-blend__facts dd { margin: 0; color: #000; font-size: .92rem; line-height: 1.45; }

@media (max-width: 520px) {
    .pref-blend__facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- On/off switches (preferences) ---------- */
.switch-list {
    display: grid;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--cream-2);
    overflow: hidden;
}

.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 20px;
    cursor: pointer;
}

.switch-row + .switch-row { border-top: 1px solid var(--line); }
.switch-row:hover { background: rgba(1, 56, 45, .03); }

.switch-row__text { display: grid; gap: 2px; min-width: 0; }
.switch-row__text strong { color: #000; font-size: 1rem; font-weight: 600; }
.switch-row__text span { color: var(--muted); font-size: .85rem; line-height: 1.4; }

.switch {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: none;
    width: 50px;
    height: 28px;
    margin: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, .2);
    cursor: pointer;
    transition: background-color .2s ease;
}

.switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .2s ease;
}

.switch:checked { background: var(--brand-lime, #80bc00); }
.switch:checked::after { transform: translateX(22px); }
.switch:focus-visible { outline: 2px solid var(--brand-dark-green); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .switch, .switch::after { transition: none; }
}

/* ---------- Two-factor settings ---------- */
.tfa-status {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 16px 20px;
    border-radius: var(--radius);
    border: 1px solid;
}

.tfa-status--on { background: #e7f4ea; border-color: #b9dcbf; color: #1e5c22; }
.tfa-status--off { background: #fdf1dd; border-color: #f0d3a2; color: #7a4d0c; }

.tfa-status__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--white);
}

.tfa-status__icon svg { width: 24px; height: 24px; fill: currentColor; }
.tfa-status strong { font-size: 1.1rem; }

.tfa-status p {
    margin: 2px 0 0;
    color: #000;
    font-size: .98rem;
    line-height: 1.5;
}

.tfa-cards {
    display: grid;
    gap: 16px;
    margin-top: 20px;
}

.tfa-cards .authenticator-card { margin-top: 0; }

.authenticator-card--danger {
    border-color: #f2c4bf;
    background: #fff7f6;
}

.authenticator-card--danger .authenticator-card__icon { color: #b3261e; }

.tfa-meter { margin-top: 18px; }

.tfa-meter__label {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 12px;
    margin-bottom: 8px;
    font-size: .98rem;
}

.tfa-meter__warn {
    color: #8c1d18;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.tfa-meter__bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
    overflow: hidden;
}

.tfa-meter__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #2e7d32;
}

.tfa-meter--low .tfa-meter__bar span { background: #b3261e; }

.btn--danger {
    background: #b3261e;
    border: 2px solid #b3261e;
    color: #fff;
}

.btn--danger:hover {
    background: #8c1d18;
    border-color: #8c1d18;
    color: #fff;
}

.reset-2fa--danger { background: #fff7f6; border: 1px solid #f2c4bf; }

/* ---------- Recovery codes ---------- */
.recovery-codes {
    padding: clamp(18px, 4vw, 26px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--cream-2);
}

.recovery-codes__warning {
    padding: 14px 18px;
    border-left: 4px solid #b7791f;
    border-radius: var(--radius-sm);
    background: #fdf1dd;
    color: #5c3b07;
}

.recovery-codes__warning p { margin: 4px 0 0; line-height: 1.5; }

.recovery-codes__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 20px 0;
    padding: 0;
    list-style: none;
    counter-reset: code;
}

.recovery-codes__grid li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px dashed rgba(1, 56, 45, .3);
    border-radius: 10px;
    background: var(--white);
    counter-increment: code;
}

.recovery-codes__grid li::before {
    content: counter(code);
    min-width: 1.4em;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
}

.recovery-codes__grid code {
    color: var(--brand-dark-green);
    font: 600 1.05rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .08em;
}

.recovery-codes__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 520px) {
    .recovery-codes__grid { grid-template-columns: minmax(0, 1fr); }
    .recovery-codes__actions .btn { flex: 1 1 100%; }
}

@media print {
    body * { visibility: hidden; }
    .recovery-codes, .recovery-codes * { visibility: visible; }
    .recovery-codes { position: absolute; inset: 0 auto auto 0; width: 100%; border: 0; }
    .recovery-codes__actions { display: none; }
}

/* A one-time code: big, spaced, centred, so a misread digit is easy to spot. */
.otp-input {
    text-align: center;
    font: 600 1.5rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .3em;
}

.otp-input::placeholder { letter-spacing: .3em; opacity: .35; }

/* ---------- Linked sign-in services (Manage > External logins) ---------- */
.manage-intro {
    margin: -6px 0 22px;
    color: #000;
    font-size: 1.05rem;
    line-height: 1.55;
}

.linked-logins__empty {
    color: var(--muted);
}

.linked-logins {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.linked-login {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: clamp(16px, 3vw, 22px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--cream-2);
}

.linked-login__icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    color: var(--brand-dark-green);
    font-weight: 700;
    font-size: 1.2rem;
}

.linked-login__icon svg {
    width: 26px;
    height: 26px;
}

.linked-login__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 1.1rem;
}

.linked-login__body p {
    margin: 4px 0 0;
    color: #000;
    font-size: .95rem;
    line-height: 1.5;
}

.linked-login__state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .06);
    color: #555;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.linked-login__state::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.linked-login__state--on {
    background: #e7f4ea;
    color: #1e5c22;
}

.linked-login__action {
    margin: 0;
}

@media (max-width: 520px) {
    .linked-login {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .linked-login__icon {
        width: 44px;
        height: 44px;
    }

    .linked-login__action {
        grid-column: 1 / -1;
    }

    .linked-login__action .btn {
        width: 100%;
    }
}

/* ---------- Drawer account section ---------- */
.drawer-account {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.nav-products-mobile { display: none; }
.nav-products-desktop { display: none; }
.products-mega[hidden] { display: none; }
.nav-products-trigger { border: 0; background: transparent; padding: 0; font-family: inherit; color: inherit; }
.products-mega__image img,
.nav-products-mobile__links img {
    background: var(--brand-pale-yellow);
}
.nav-products-arrow { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
@media (min-width: 861px) {
    .site-header__inner { position: static; }
    .nav-products-desktop { display: block; }
    .nav-products-desktop .nav-products-trigger {
        display: flex; align-items: center; gap: 6px; cursor: pointer;
        list-style: none; font-size: .9rem; font-weight: 700;
        letter-spacing: .16em; text-transform: uppercase;
    }
    .nav-products-desktop .nav-products-trigger::-webkit-details-marker { display: none; }
    .nav-products-desktop .nav-products-trigger:hover { color: var(--orange-2); }
    .nav-products-arrow { transition: transform .2s; }
    .nav-products-desktop.is-open .nav-products-arrow { transform: rotate(180deg); }
    .products-mega {
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--cream); border: 1px solid var(--line);
        border-radius: 0 0 18px 18px; box-shadow: 0 18px 36px rgba(1, 56, 45, .16);
        max-height: calc(100dvh - 150px); overflow-y: auto;
    }
    .products-mega__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 24px clamp(16px, 2vw, 40px); gap: 0; }
    .products-mega__category { display: flex; flex-direction: column; min-width: 0; }
    .products-mega__category { padding-inline: clamp(10px, 1.3vw, 24px); }
    .products-mega__category + .products-mega__category { border-left: 1px solid var(--line); }
    .products-mega__image { display: block; margin-bottom: 10px; }
    .products-mega__image img { width: 100%; height: 110px; object-fit: contain; border-radius: 12px; }
    .products-mega__category h3 { margin: 0 0 16px; font-family: var(--display); text-align: center; }
    .main-nav .products-mega__category h3 a { font-size: 1.4rem; letter-spacing: .02em; }
    .products-mega__category ul { list-style: none; padding: 0; margin: 0 0 20px; }
    .products-mega__category li + li { margin-top: 14px; }
    .main-nav .products-mega__category li a {
        display: flex; align-items: center; gap: 10px;
        font-size: .85rem; line-height: 1.4;
        font-weight: 400; letter-spacing: 0; text-transform: none;
    }
    .products-mega__category li img { width: 58px; height: 58px; object-fit: contain; flex: none; border-radius: 7px; }
    .products-mega__product-name { min-width: 0; flex: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; text-overflow: ellipsis; }
    .products-mega__product-arrow { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .main-nav .products-mega__view { margin-top: auto; font-size: .75rem; letter-spacing: .04em; text-align: center; }
    .products-mega__footer { padding: 18px; border-top: 1px solid var(--line); text-align: center; }
    .main-nav .products-mega__footer a { font-size: .85rem; }
}
.menu-category-anchor { scroll-margin-top: 110px; }
@media (max-width: 860px) {
    .main-nav .nav-products-desktop { display: none; }
    .nav-products-mobile { display: block; width: 100%; }
    .nav-products-mobile summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .9rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; list-style: none; }
    .nav-products-mobile summary::-webkit-details-marker { display: none; }
    .nav-products-mobile[open] .nav-products-arrow { transform: rotate(180deg); }
    .nav-products-mobile__links { padding-left: 14px; }
    .main-nav .nav-products-mobile__links a { display: flex; align-items: center; gap: 12px; font-size: .8rem; letter-spacing: .05em; }
    .nav-products-mobile__links img { width: 48px; height: 48px; object-fit: contain; flex: none; border-radius: 7px; }
    .main-nav .nav-products-mobile__links a.nav-products-mobile__view {
        gap: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .12em;
        text-transform: uppercase; color: var(--orange-2);
    }
}

.main-nav .drawer-account__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0 16px;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    border-bottom: 0;
}

.drawer-account__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--cream-3);
    flex: none;
}

.drawer-account__name {
    margin: 0;
    font-weight: 700;
    color: var(--brown);
    font-size: .92rem;
}

.drawer-account__role {
    margin: 0;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--orange-2);
}

.drawer-account__label {
    font-size: .64rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 10px 0 6px;
}

.drawer-account__logout {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.drawer-account__logout button {
    background: none;
    border: 0;
    padding: 11px 0;
    font-family: var(--body);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #b3261e;
    cursor: pointer;
}

/* ---------- 2FA setup ---------- */
.setup-steps {
    list-style: none;
    margin: 26px 0;
    padding: 0;
    display: grid;
    gap: 22px;
}

.setup-step {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.setup-step__num {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--orange);
    color: var(--white);
    font-family: var(--display);
    font-size: .95rem;
}

.setup-step__body h3 {
    margin: 4px 0 10px;
    font-size: var(--h3-size);
    line-height: 1.15;
}

.setup-step__body p {
    color: var(--muted);
    font-size: .92rem;
    max-width: 58ch;
}

.qr-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    background: var(--cream-2);
    border-radius: var(--radius);
    padding: 22px;
    margin-top: 14px;
}

.qr-panel__code {
    background: var(--white);
    border-radius: var(--radius-sm);
    padding: 12px;
    line-height: 0;
}

.qr-panel__code svg {
    display: block;
    width: 190px;
    height: 190px;
}

.qr-panel__label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brown);
    margin: 0 0 6px;
}

.qr-panel__key {
    display: inline-block;
    background: var(--white);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .95rem;
    letter-spacing: .06em;
    color: var(--brown);
    word-break: break-all;
}

.verify-form {
    margin-top: 14px;
    max-width: 440px;
}

.verify-form__code {
    width: 100%;
    max-width: 320px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.3rem;
    letter-spacing: .35em;
    text-align: center;
}

.verify-form .verify-form__actions {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 12px;
    width: 100%;
}

.verify-form .verify-form__actions .btn {
    width: 100%;
    height: 48px;
    min-height: 48px;
    padding: 0 18px;
    font-size: .85rem;
    letter-spacing: .06em;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .verify-form .verify-form__actions { gap: 8px; }
    .verify-form .verify-form__actions .btn {
        padding-inline: 8px;
        font-size: clamp(.6rem, 2.5vw, .78rem);
        letter-spacing: .02em;
    }
}

.reset-2fa {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    background: var(--cream-2);
    border-radius: var(--radius);
    padding: 24px;
    margin: 20px 0;
}

.reset-2fa__icon svg {
    width: 56px;
    height: 56px;
}

.reset-2fa h3 {
    margin: 0 0 12px;
    font-size: var(--h3-size);
    line-height: 1.15;
}

.reset-2fa p,
.reset-2fa__list {
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.6;
}

/* Both actions share one width and one height. The shrink-to-fit grid sizes both columns to the
   longer label, so they sit on one line when there is room; when there is not, both wrap and still
   stretch to the same row height. The reset button sits inside a <form>, which is made a flex box so
   the button fills the stretched form instead of keeping its own shorter height. */
.reset-2fa__actions {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: stretch;
    max-width: 100%;
}

.reset-2fa__actions form {
    display: flex;
    min-width: 0;
}

.reset-2fa__actions .btn {
    width: 100%;
    min-height: 55px;
    padding-inline: 24px;
    text-align: center;
}

@media (max-width: 560px) {
    .reset-2fa__actions {
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: minmax(0, 1fr);
        /* Stacked, each row would take its own label's height; 1fr rows share the tallest. */
        grid-auto-rows: 1fr;
    }
}

.reset-2fa__list {
    margin: 0 0 14px;
    padding-left: 20px;
    display: grid;
    gap: 6px;
}

.danger-panel {
    background: #fdecea;
    border-left: 4px solid #b3261e;
    border-radius: var(--radius-sm);
    padding: 20px 22px;
    margin: 16px 0 24px;
}

.danger-panel p {
    color: #8c1d18;
    font-size: 1.1rem;
}

.danger-panel p:last-of-type {
    margin-bottom: 16px;
}

/* ---------- Legal pages ---------- */
.legal {
    max-width: 1180px;
    display: grid;
    grid-template-columns: minmax(190px, 240px) minmax(0, 820px);
    column-gap: clamp(38px, 6vw, 76px);
    align-items: start;
}

.legal > nav[aria-label="Breadcrumb"],
.legal__head {
    grid-column: 1 / -1;
}

.legal__head {
    margin-bottom: 28px;
}

.legal__updated {
    color: #000;
    font-size: .84rem;
    margin: 0;
}

.legal__toc {
    grid-column: 1;
    position: sticky;
    top: 104px;
    align-self: start;
    background: var(--cream-2);
    border-radius: var(--radius);
    padding: 22px 20px;
    margin: 0;
}

.legal__toc p {
    margin: 0 0 12px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brown);
}

.legal__toc ol {
    margin: 0;
    padding-left: 20px;
    font-size: var(--section-subtext-size);
}

.legal__toc li {
    margin-bottom: 7px;
    break-inside: avoid;
}

.legal__toc a {
    color: #000;
    line-height: 1.45;
}

.legal__toc a:hover,
.legal__toc a:focus-visible {
    color: var(--orange-2);
}

.legal__body {
    grid-column: 2;
    min-width: 0;
}

.legal__body h2 {
    font-size: var(--h2-size);
    line-height: var(--section-h2-line-height);
    margin: 34px 0 12px;
    scroll-margin-top: 100px;
}

.legal__body p,
.legal__body li {
    color: #000;
    font-size: var(--section-subtext-size);
    line-height: var(--section-subtext-line-height);
}

.legal__body ul {
    padding-left: 22px;
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.legal__body strong {
    color: var(--brown);
}

.legal__table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    margin: 8px 0 20px;
    min-width: 520px;
}

.legal__table th {
    text-align: left;
    padding: 11px 14px;
    background: var(--cream-2);
    color: var(--brown);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.legal__table td {
    padding: 11px 14px;
    border-top: 1px solid var(--line);
    color: var(--muted);
}

.legal__table code {
    color: var(--brown);
    font-size: .84rem;
    word-break: break-all;
}

.consent-state {
    background: var(--cream-2);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin: 16px 0 24px;
}

.consent-state p {
    margin-top: 0;
}

/* ---------- Cookie banner ---------- */
.cookie-banner {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 120;
    background: var(--brown-2);
    color: var(--cream-2);
    box-shadow: 0 -14px 40px rgba(33, 15, 7, .34);
    padding: 20px var(--gutter);
    animation: cookie-rise .35s ease;
}

@keyframes cookie-rise {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner {
        animation: none;
    }
}

.cookie-banner__inner {
    max-width: var(--shell);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 18px 32px;
    align-items: center;
    justify-content: space-between;
}

.cookie-banner__body {
    flex: 1 1 420px;
    min-width: 0;
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner h3 {
    color: var(--cream);
    font-size: var(--h3-size);
    margin: 0 0 8px;
}

.cookie-banner p {
    margin: 0;
    font-size: .86rem;
    color: rgba(247, 240, 226, .82);
    max-width: 76ch;
}

.cookie-banner a {
    color: var(--orange);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.cookie-banner__actions .btn {
    white-space: nowrap;
}

.cookie-banner__actions .btn--ghost {
    border-color: rgba(247, 240, 226, .45);
    color: var(--cream);
}

.cookie-banner__actions .btn--ghost:hover {
    border-color: var(--cream);
    color: var(--white);
}

/* The third, quieter choice: a text link rather than a third button. */
.cookie-banner__manage {
    margin-right: 8px;
    padding: 6px 4px;
    border: 0;
    background: none;
    color: var(--cream);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    white-space: nowrap;
    cursor: pointer;
}

.cookie-banner__manage:hover {
    color: var(--orange);
}

.cookie-banner__manage:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

/* ---------- Cookie settings dialog ---------- */
.cookie-dialog {
    width: min(580px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--brand-light-beige);
    color: var(--brand-dark-green);
    box-shadow: 0 24px 60px rgba(1, 56, 45, .35);
    overflow-y: auto;
}

.cookie-dialog::backdrop {
    background: rgba(1, 56, 45, .55);
    backdrop-filter: blur(2px);
}

.cookie-dialog form {
    display: grid;
    gap: 16px;
    padding: 30px 28px 26px;
}

.cookie-dialog h3 {
    margin: 0;
    padding-right: 44px;
}

.cookie-dialog p {
    margin: 0;
    font-size: .95rem;
}

.cookie-dialog p a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookie-dialog .switch:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.cookie-dialog__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 4px;
}

.cookie-dialog__actions .btn {
    padding-inline: 10px;
    font-size: .82rem;
    letter-spacing: .08em;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .cookie-dialog form {
        padding: 26px 18px 20px;
    }

    .cookie-dialog .switch-row {
        padding: 14px 14px;
    }

    /* Save across the top, then Reject and Accept side by side. */
    .cookie-dialog__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cookie-dialog__save {
        grid-column: 1 / -1;
    }
}

/* Footer legal links (.footer-legal) are styled in site.css — kept there as the single
   source of truth instead of duplicating conflicting rules across stylesheets. */
.footer-legal a:hover {
    color: var(--orange);
}

@media (max-width: 720px) {
    .qr-panel {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
    }

    .legal {
        display: block;
        max-width: 860px;
    }

    .legal__head {
        text-align: center;
    }

    .legal__toc {
        display: none;
    }

    .reset-2fa {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Reject and Accept share one row, each on a single line; Manage sits under them. */
    .cookie-banner__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .cookie-banner__actions .btn {
        width: 100%;
        padding: 14px 10px;
        font-size: .84rem;
        letter-spacing: .08em;
    }

    .cookie-banner__manage {
        grid-column: 1 / -1;
        order: 1;
        justify-self: center;
        margin-right: 0;
    }
}

@media (max-width: 800px) {
    .account-nav__logout {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .avatar-editor {
        align-items: flex-start;
    }

    .authenticator-card__actions .btn,
    .two-factor-actions .btn {
        width: 100%;
    }
}

/* ---------- Blog ---------- */
/* Editorial cards shared by the blog index and product-detail article recommendations. */
.blog-grid {
    margin-top: 42px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 32px);
    align-items: stretch;
}

.blog-grid--compact {
    margin-top: 26px;
}

/* A lone recommendation is a feature, not half of an unfinished grid row —
   and a row of exactly two shouldn't stretch across all three columns either. */
.blog-grid:has(> .blog-card:only-child) {
    grid-template-columns: minmax(0, 480px);
    justify-content: center;
}

/* The base grid stays 3-column from 701px all the way up (there's no 2-column
   breakpoint below 1101px — see the max-width:1100px rule further down — but
   from 701-1100px it's already 2-column, so this only needs to act >=1101px... */
@media (min-width: 701px) {
    .blog-grid:has(> .blog-card:first-child:nth-last-child(2)) {
        grid-template-columns: repeat(2, minmax(0, 480px));
        justify-content: center;
    }
}

/* True desktop (3-per-row, >=1101px): switch to 6 tracks so a trailing row of
   1 or 2 orphaned cards (5 posts = 3+2, 7 posts = 3+3+1...) can be shifted to
   sit centered — each card spans 2 of the 6 tracks under a full row of 3. The
   701-1100px 2-column range and the <=700px single-column stack are untouched. */
@media (min-width: 1101px) {
    .blog-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .blog-grid > .blog-card {
        grid-column: span 2;
    }

    .blog-grid:has(> .blog-card:only-child) > .blog-card,
    .blog-grid:has(> .blog-card:first-child:nth-last-child(2)) > .blog-card {
        grid-column: auto;
    }

    /* Trailing row of exactly two cards after one or more full rows of three
       (5 posts, 8 posts...): shift that pair one track right in the 6-track
       grid, leaving equal empty space on both sides — the standard CSS Grid
       "orphan row" centering trick. Excludes the true 2-total case above,
       which already gets its own narrower centered layout. */
    .blog-grid > .blog-card:nth-last-child(2):nth-child(3n+1):not(:first-child) {
        grid-column: 2 / span 2;
    }

    /* Trailing row of exactly one card (4 posts, 7 posts...): center it the
       same way, offset further in. Excludes the true 1-total case above. */
    .blog-grid > .blog-card:last-child:nth-child(3n+1):not(:only-child) {
        grid-column: 3 / span 2;
    }
}

.blog-grid:has(> .blog-card:only-child) .blog-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
}

.blog-grid:has(> .blog-card:only-child) .blog-card__thumb {
    height: auto;
    aspect-ratio: 4 / 3;
}

.blog-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    height: 100%;
    background: var(--white);
    border: 1px solid rgba(1, 56, 45, .09);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(51, 23, 10, .07);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.blog-card:hover,
.blog-card:focus-within {
    transform: translateY(-6px);
    border-color: rgba(128, 188, 0, .4);
    box-shadow: 0 20px 46px rgba(1, 56, 45, .14);
}

.blog-card__thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--cream-2);
}

.blog-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.blog-card:hover .blog-card__thumb img,
.blog-card:focus-within .blog-card__thumb img {
    transform: scale(1.035);
}

.blog-card__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: clamp(17px, 1.6vw, 23px);
}

.blog-card__title {
    margin: 0;
    font-size: clamp(1.47rem, 1.78vw, 1.98rem);
    line-height: 1.2;
    text-wrap: balance;
}

.blog-card__title a {
    color: var(--brown);
}

.blog-card__title a:hover,
.blog-card__title a:focus-visible {
    color: var(--orange-2);
}

/* Stretched link: the whole card is clickable via this ::after covering .blog-card. */
.blog-card__overlay {
    color: var(--brown);
}

.blog-card__overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

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

.blog-empty {
    margin-top: 34px;
    padding: 40px;
    text-align: center;
    color: var(--muted);
    background: var(--cream-2);
    border-radius: var(--radius);
}

.blog-article {
    width: 100%;
}

.blog-article__meta {
    color: var(--muted);
    font-size: .84rem;
    margin: 10px 0 24px;
}

.blog-article__hero {
    margin: 0 0 28px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--cream-2);
    aspect-ratio: 4 / 3;
}

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

.blog-article__excerpt {
    color: var(--brown);
    font-size: var(--section-subtext-size);
    line-height: var(--section-subtext-line-height);
    margin-bottom: 26px;
}

/* Renders the admin's rich-text content; rules mirror .legal__body since both display
   arbitrary WYSIWYG-authored HTML. */
.blog-article__body {
    color: var(--muted);
    font-size: var(--section-subtext-size);
    line-height: var(--section-subtext-line-height);
}

.blog-article__body h2,
.blog-article__body h3,
.blog-article__body h4 {
    color: var(--brown);
    line-height: 1.35;
    margin: 34px 0 12px;
}

.blog-article__body p {
    margin: 0 0 18px;
}

.blog-article__body ul,
.blog-article__body ol {
    padding-left: 22px;
    display: grid;
    gap: 8px;
    margin: 0 0 18px;
}

.blog-article__body a {
    color: var(--orange-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-article__body strong {
    color: var(--brown);
}

.blog-article__body blockquote {
    margin: 24px 0;
    padding: 4px 22px;
    border-left: 4px solid var(--orange);
    color: var(--brown);
    font-style: italic;
}

.blog-article__body figure {
    margin: 28px 0;
}

.blog-article__body img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

.blog-article__body figcaption {
    margin-top: 9px;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.45;
    text-align: center;
}

.blog-article__body table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
    margin: 8px 0 22px;
}

.blog-article__body th,
.blog-article__body td {
    padding: 10px 14px;
    border: 1px solid var(--line);
    text-align: left;
}

.blog-article__body th {
    background: var(--cream-2);
    color: var(--brown);
}

.blog-article__footer {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 24px;
}

.blog-article__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.blog-article__nav-link {
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--cream-2);
    color: var(--brown);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.blog-article__nav-link:hover,
.blog-article__nav-link:focus-visible {
    transform: translateY(-2px);
    border-color: var(--orange);
    box-shadow: var(--shadow);
}

.blog-article__nav-link span {
    display: block;
    margin-bottom: 7px;
    color: var(--orange-2);
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.blog-article__nav-link strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--display);
    font-size: var(--section-subtext-size);
    line-height: 1.3;
}

.blog-article__nav-link--next {
    text-align: right;
}

.blog-article__footer > .btn {
    justify-self: center;
}

@media (max-width: 700px) {
    .blog-grid {
        grid-template-columns: 1fr;
        margin-top: 30px;
        gap: 20px;
    }

    .blog-card__thumb {
        aspect-ratio: 4 / 3;
    }

    .blog-card__body {
        padding: 18px 20px 22px;
    }

    .blog-article__nav {
        grid-template-columns: 1fr;
    }

    .blog-article__nav > span:empty {
        display: none;
    }

    .blog-article__nav-link--next {
        text-align: left;
    }

}

/* ---------- My orders: cards ---------- */
.orders-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: nowrap; }
.orders-toolbar h2 { margin: 0; }
.orders-filter { width: 220px; max-width: 100%; }
.orders-filter .combo { position: relative; }
.orders-filter .combo__button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; cursor: pointer; text-align: left; }
.orders-filter .combo__panel { position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 30; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.orders-filter .combo__panel[hidden] { display: none; }
.orders-filter .combo__list { list-style: none; padding: 0; margin: 0; }
.orders-filter .combo__option { width: 100%; border: 0; border-radius: 8px; padding: 12px; text-align: left; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.orders-filter .combo__option:hover, .orders-filter .combo__option[aria-selected="true"] { background: #e5edc9; }
@media (max-width: 560px) {
    .orders-toolbar { gap: 10px; }
    .orders-toolbar h2 { font-size: clamp(1.4rem, 6vw, 1.8rem); white-space: nowrap; flex-shrink: 0; }
    .orders-filter { width: 145px; min-width: 0; }
    .orders-filter .combo__button { min-height: 42px; padding: 8px 10px; gap: 6px; font-size: .8rem; }
    .orders-filter [data-combo-label] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .orders-filter .combo__panel { inset-inline-start: auto; width: 180px; max-width: calc(100vw - 48px); }
}
.orders-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; margin-top: 28px; }

.order-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 18px;
}

.order-tile {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: box-shadow .2s ease, transform .2s ease;
}

.order-tile:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.order-tile--cancelled {
    border-style: dashed;
}

.order-tile__head {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: 4px;
}

.order-tile__title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.order-tile__number {
    display: block;
    font-family: var(--display);
    font-size: 1.15rem;
    text-transform: uppercase;
    color: var(--brown);
    overflow-wrap: anywhere;
}

.order-tile__date {
    display: block;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.order-tile__items {
    list-style: none;
    margin: 0;
    padding: 14px 0;
    display: grid;
    gap: 10px;
    border-block: 1px solid var(--line);
}

.order-tile__items li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: var(--brown);
}

.order-tile__items img {
    width: 44px;
    height: 44px;
    flex: none;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--cream-3);
}

.order-tile__items span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-tile__items em {
    font-style: normal;
    color: var(--muted);
}

.order-tile__more {
    padding-left: 56px;
    font-size: .88rem;
    color: var(--muted);
}

.order-tile__note {
    margin: 0;
    font-size: .92rem;
    color: #b3261e;
}

.order-tile__foot {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.order-tile__count {
    display: block;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}


/* ---------- Cancelled order: what happens next ---------- */
/* A list waiting on its own refresh. Dimmed rather than blanked: the rows that are there are
   still the right rows until the new ones arrive. */
.is-live-loading {
    opacity: .55;
    transition: opacity .15s ease;
    pointer-events: none;
}

.order-support {
    display: flex;
    gap: 16px;
    padding: 18px 20px;
    background: #fdecea;
    border: 1px solid rgba(179, 38, 30, .25);
    border-radius: var(--radius);
    color: var(--brown);
}

.order-support__icon {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #b3261e;
    color: #fff;
    font-weight: 800;
}

.order-support__body {
    display: grid;
    gap: 8px;
    min-width: 0;
    /* Without this the body is sized by its content inside the flex row, and the quoted reason —
       which is short — was drawn narrower than the paragraph under it. */
    flex: 1;
}

.order-support__body strong {
    font-size: 1.05rem;
}

.order-support__body p {
    margin: 0;
    line-height: 1.55;
}

.order-support__ref {
    font-size: .92rem;
}

.order-support__reason {
    font-size: .98rem;
}

/* The admin's own words, set apart from our wording around them so it is obvious which part of the
   message is a person explaining and which part is the site talking. */
.order-support__remarks {
    margin: 0;
    padding: 10px 14px;
    border-left: 3px solid #b3261e;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: rgba(255, 255, 255, .6);
    font-style: italic;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.order-support__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

@media (max-width: 640px) {
    .order-support { flex-direction: column; }

    /* One line each. "Open a support ticket" is a sentence, and breaking it across two lines made
       the pair read as two blocks of text rather than two buttons. */
    .order-support__actions .btn {
        width: 100%;
        padding-inline: 10px;
        font-size: .7rem;
        letter-spacing: .04em;
        white-space: nowrap;
    }
}

/* ---------- Paid watermark: My orders card head and order details ---------- */
/* Sits behind the card head's text. Deliberately fainter than the order details watermark, because
   it overlaps the order number and status at a much smaller size. */
.paid-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%) rotate(-12deg);
    padding: .08em .4em 0;
    border: .08em solid currentColor;
    border-radius: .14em;
    color: rgba(30, 92, 34, .06);
    font-family: var(--display);
    font-size: 3.1rem;
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

.order-card--paid {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.order-card--paid::after {
    content: 'Paid';
    position: absolute;
    top: 50%;
    right: 5%;
    z-index: -1;
    transform: translateY(-50%) rotate(-14deg);
    padding: .06em .35em 0;
    border: .07em solid currentColor;
    border-radius: .12em;
    color: rgba(30, 92, 34, .08);
    font-family: var(--display);
    font-size: clamp(4.5rem, 11vw, 9rem);
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
    pointer-events: none;
}

/* The cancelled-order box used an opaque fill that hid the watermark behind it. A translucent tint of
   the same red keeps the box distinct while the watermark still shows through. */
.order-card--paid .order-support {
    background: rgba(179, 38, 30, .07);
}

@media (max-width: 520px) {
    .order-tile {
        padding: 16px;
    }

    /* Order number and status stay on one row on a phone. */
    .order-tile__number {
        font-size: .98rem;
    }

    .order-tile__title-row .status {
        padding: 4px 9px;
        font-size: .58rem;
        letter-spacing: .06em;
    }

    .paid-stamp {
        font-size: 2.5rem;
    }

    /* A name may take two lines rather than being cut to a few characters. */
    .order-tile__items span {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
    }
}

/* The narrowest phones (320px) need one more step to keep the number on a single line. */
@media (max-width: 360px) {
    .order-tile {
        padding: 12px;
    }

    .order-tile__title-row {
        gap: 6px;
    }

    .order-tile__number {
        font-size: .86rem;
    }
}
@media (min-width: 1024px) {
    .preferences-contact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
        gap: 20px;
    }

    .preferences-contact .field--check {
        margin-bottom: 0;
        align-items: flex-start;
    }

    .preferences-contact input[type="checkbox"] {
        flex-shrink: 0;
    }
}
@media (min-width: 861px) and (max-width: 1200px) {
    .site-header__inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 16px;
        padding-block: 12px;
    }

    .site-header .main-nav { gap: 16px; }
    .site-header .main-nav > a,
    .nav-products-desktop .nav-products-trigger {
        font-size: .72rem;
        letter-spacing: .08em;
        white-space: nowrap;
    }

    .site-header .brand__wordmark {
        width: clamp(150px, 17vw, 195px);
        max-height: 54px;
    }

    .site-header .header-actions { gap: 10px; }
    .site-header .header-order {
        padding: 14px 16px;
        font-size: .72rem;
        letter-spacing: .06em;
        white-space: nowrap;
    }
}

/* ---------- Foldables unfolded / small tablets (Galaxy Z Fold, 8" tablets) ----------
   Between 821px and 1023px the desktop mega menu is active but its six columns are
   far too narrow for product names, so the products in it fall back to thumbnails
   only. (The cart button on the cards sizes itself from the card - see site.css.) */
@media (min-width: 821px) and (max-width: 1023px) {
    .products-mega__category { padding-inline: 8px; }
    .products-mega__category ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 16px; }
    .products-mega__category li,
    .products-mega__category li + li { margin: 0; }
    .main-nav .products-mega__category li a { display: block; }
    .products-mega__category li img { width: 36px; height: 36px; }
    .products-mega__product-name,
    .products-mega__product-arrow { display: none; }
    /* "Ground coffee" and "Instant coffee" wrap to two lines at this width while the
       others stay on one, which pushed each column's thumbnails and "View all" to a
       different height. A fixed two-line box for the title lines the rows back up. */
    .main-nav .products-mega__category h3 {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        margin-bottom: 12px;
    }
}

/* ---------- Deals & offers page ---------- */
.deals-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(40px, 6vw, 84px) 0 clamp(28px, 4vw, 48px);
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 183, 27, .35), transparent 42%),
        radial-gradient(circle at 88% 70%, rgba(128, 188, 0, .28), transparent 45%),
        var(--brand-dark-green);
    color: var(--brand-light-beige);
    text-align: center;
}

.deals-hero__inner { display: grid; justify-items: center; gap: 14px; }
.deals-hero .eyebrow { color: var(--brand-yellow); margin: 0; }

.deals-hero h1 {
    margin: 0;
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    line-height: .95;
    color: var(--brand-light-beige);
}

.deals-hero__lede {
    max-width: 640px;
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.55;
    opacity: .92;
}

.deals-jump {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.deals-jump a {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 243, 228, .35);
    color: var(--brand-light-beige);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.deals-jump a:hover,
.deals-jump a:focus-visible {
    background: var(--brand-yellow);
    border-color: var(--brand-yellow);
    color: var(--brand-dark-green);
}

.deals { display: grid; gap: clamp(36px, 5vw, 64px); padding-block: clamp(28px, 4vw, 52px) clamp(48px, 6vw, 80px); }
.deals-welcome .welcome-note { margin: 0; }

.deal-section { scroll-margin-top: 110px; display: grid; gap: 24px; }

.deal-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
    padding: clamp(20px, 3vw, 30px);
    border-radius: var(--radius);
    background: var(--cream-2);
    border: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(1, 56, 45, .06);
}

.deal-section__intro { display: grid; gap: 8px; max-width: 760px; min-width: 0; }

.deal-section__badge {
    justify-self: start;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--brand-yellow);
    color: var(--brand-dark-green);
    font-weight: 800;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.deal-section--sale .deal-section__badge { background: var(--brand-orange); color: #fff; }

.deal-section__intro h2 {
    margin: 0;
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    line-height: 1.02;
    overflow-wrap: anywhere;
}

.deal-section__intro p { margin: 0; font-size: 1.05rem; color: var(--brand-dark-brown); }

.deal-section__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--brand-dark-green);
}

.deal-section__meta > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
}

.deal-section__ends svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.deals-empty {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 48px 20px;
    text-align: center;
    border-radius: var(--radius);
    background: var(--cream-2);
}

.deals-empty h2 { margin: 0; }
.deals-empty p { margin: 0; max-width: 460px; }

@media (max-width: 640px) {
    .deals-hero__lede { font-size: 1rem; }
    .deals-jump {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .deals-jump::-webkit-scrollbar { display: none; }
    .deals-jump a { flex: none; }
    .deal-section__head { align-items: flex-start; }
}

/* Header link to the deals page. */
.main-nav .nav-deals {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.main-nav .nav-deals::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-orange);
}