/*
 * Additions for the PHP theme on top of the old site's CSS (tokens, brand, site, pages are copies).
 * Only what server-rendered markup needs that React did differently.
 */

/* Elements hidden with the `hidden` attribute (menus, modals, story pages, toggled form parts)
   stay hidden even when a class gives them display: flex/grid/contents. */
.site [hidden] { display: none !important; }

/* Quantity stepper: the number is a real <input> (forms work without JavaScript). */
.qty__input {
    box-sizing: border-box;
    width: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    font: inherit;
    font-weight: 600;
    text-align: center;
    color: var(--dark-text);
    -moz-appearance: textfield;
    appearance: textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty--lg .qty__input { width: 32px; font-size: 18px; }

/* Forgot / reset password: one card, not stretched over the page. */
.auth-grid--single { grid-template-columns: minmax(0, 640px); }

/* A form wrapped around a card's button keeps the button's place. */
form.contents { display: contents; }

/* Header item that is only a heading (a "Text" menu item with children). */
span.header__link { cursor: default; }