/*
    Zone B styles - catalogue listings, cart, checkout, account and admin.

    Loaded through the layout's optional "Styles" section, never from the head
    unconditionally: the header, footer and the three protected pages are Zone A
    and their markup is diffed against the live legacy site, so a stylesheet link
    that appeared on every page would change their DOM.

    Colours are taken from the legacy palette (dist/css/Style.css) so a Zone B
    page reads as the same site: #008686 teal, #f5f7f7 panel grey, #333 text.
*/

.catalogue-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
}

.catalogue-filter__label {
    font-size: 13px;
    color: #666;
}

.catalogue-filter__input {
    flex: 1 1 220px;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid #d5dcdc;
    border-radius: 3px;
    font-size: 14px;
}

.catalogue-filter__input:focus {
    outline: 2px solid #008686;
    outline-offset: 1px;
}

.catalogue-count,
.catalogue-empty {
    margin: 0 0 18px;
    font-size: 14px;
    color: #666;
}

.catalogue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.catalogue-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    border: 1px solid #e3e8e8;
    border-radius: 4px;
    background: #fff;
    color: #333;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.catalogue-card:hover,
.catalogue-card:focus-visible {
    border-color: #008686;
    box-shadow: 0 2px 10px rgba(0, 134, 134, .12);
}

.catalogue-card__image {
    width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: contain;
    margin-bottom: 12px;
}

.catalogue-card__heading {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.catalogue-card__sku {
    margin: 0 0 8px;
    font-size: 12px;
    color: #888;
    letter-spacing: .04em;
}

.catalogue-card__text {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.45;
    color: #555;
}

.catalogue-card__price {
    margin: auto 0 0;
    font-size: 15px;
    font-weight: 600;
    color: #008686;
}

.catalogue-card__price--enquire {
    font-size: 13px;
    font-weight: 400;
    color: #777;
}

.catalogue-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 32px 0 0;
}

.catalogue-pager__link {
    padding: 8px 16px;
    border: 1px solid #008686;
    border-radius: 3px;
    color: #008686;
    text-decoration: none;
    font-size: 14px;
}

.catalogue-pager__link:hover,
.catalogue-pager__link:focus-visible {
    background: #008686;
    color: #fff;
}

.catalogue-pager__current {
    font-size: 13px;
    color: #666;
}

/* --------------------------------------------------------------- cart page */

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
    align-items: start;
}

@media (max-width: 860px) {
    .cart-layout { grid-template-columns: minmax(0, 1fr); }
}

.cart-empty {
    padding: 48px 0;
    text-align: center;
}

.cart-empty__text {
    margin: 0 0 20px;
    font-size: 16px;
    color: #666;
}

.cart-line {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 190px;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid #e3e8e8;
}

@media (max-width: 640px) {
    .cart-line { grid-template-columns: 64px minmax(0, 1fr); }
    .cart-line__actions { grid-column: 1 / -1; }
}

.cart-line__image {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.cart-line__heading {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
}

.cart-line__heading a {
    color: #333;
    text-decoration: none;
}

.cart-line__heading a:hover { color: #008686; }

.cart-line__sku {
    margin: 0 0 8px;
    font-size: 12px;
    color: #888;
    letter-spacing: .04em;
}

.cart-line__options {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: #555;
    line-height: 1.6;
}

.cart-line__option-group { color: #888; }
.cart-line__option-count { color: #008686; font-weight: 600; }
.cart-line__option-price { color: #888; }

.cart-line__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.cart-line__quantity {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cart-line__quantity-label { font-size: 12px; color: #888; }

.cart-line__quantity-input {
    width: 66px;
    padding: 5px 8px;
    border: 1px solid #d5dcdc;
    border-radius: 3px;
    font-size: 14px;
}

.cart-line__update,
.cart-line__remove {
    padding: 0;
    border: 0;
    background: none;
    color: #008686;
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}

.cart-line__remove { color: #a33; }

.cart-line__price {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #008686;
}

.cart-clear { padding: 16px 0; text-align: right; }

.cart-summary {
    padding: 20px;
    border: 1px solid #e3e8e8;
    border-radius: 4px;
    background: #f5f7f7;
}

.cart-summary__heading {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
}

.cart-summary__list {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    margin: 0 0 14px;
    font-size: 14px;
}

.cart-summary__list dt { color: #666; }
.cart-summary__list dd { margin: 0; text-align: right; }

.cart-summary__total {
    padding-top: 8px;
    border-top: 1px solid #d5dcdc;
    font-weight: 600;
    color: #008686;
}

.cart-summary__notice {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-left: 3px solid #008686;
    background: #fff;
    font-size: 12px;
    line-height: 1.5;
    color: #555;
}

.cart-summary__checkout { display: block; text-align: center; }

.cart-summary__signin {
    margin: 12px 0 0;
    font-size: 12px;
    color: #777;
    line-height: 1.5;
}

/* ------------------------------------------------------------ account area */

.account-layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

@media (max-width: 760px) {
    .account-layout { grid-template-columns: minmax(0, 1fr); }
}

/*
 * acct-nav, NOT account-nav.
 *
 * style-min.css already owns ".account-nav" - it is the legacy site's HORIZONTAL
 * TEAL account bar: background-color #008686, white links, 60px tall. This is a
 * vertical sidebar on white, a different component that happened to be given the
 * same name, and the legacy rules won: the box was painted teal, the links were
 * #555 on teal, and on hover they turned #008686 - teal on teal, invisible.
 *
 * Renaming is the fix rather than piling on !important, which would leave the
 * collision in place for whoever comes next.
 */
.acct-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    border-right: 1px solid #e3e8e8;
}

@media (max-width: 760px) {
    .acct-nav {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: 0;
        border-bottom: 1px solid #e3e8e8;
        padding-bottom: 12px;
    }
}

.acct-nav__link {
    /* The 3px left pad matches the active item's marker, so nothing shifts
       sideways when an item becomes the current one. */
    padding: 8px 14px 8px 11px;
    border-left: 3px solid transparent;
    color: #555;
    text-decoration: none;
    font-size: 14px;
    border-radius: 0 3px 3px 0;
    transition: background-color .15s, color .15s;
}

/* Hover moves the surface, not just the ink. Colour alone is easy to miss and
   impossible to see for anyone who cannot separate #555 from #008686. */
.acct-nav__link:hover,
.acct-nav__link:focus-visible {
    background-color: #eef6f6;
    color: #00706f;
}

.acct-nav__link:focus-visible {
    outline: 2px solid #008686;
    outline-offset: -2px;
}

.acct-nav__link--active {
    border-left-color: #008686;
    background-color: #eef6f6;
    color: #00706f;
    font-weight: 600;
}

.acct-nav__link--button {
    display: block;
    width: 100%;
    border: 0;
    border-left: 3px solid transparent;
    background: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    font-size: 14px;
}

.acct-nav__signout {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e3e8e8;
}

.account-heading {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 600;
}

.account-sub {
    margin: 0 0 24px;
    font-size: 14px;
    color: #777;
}

.account-notice {
    margin: 0 0 20px;
    padding: 10px 14px;
    border-left: 3px solid #008686;
    background: #f4fafa;
    font-size: 14px;
}

.account-note {
    margin: 8px 0 0;
    font-size: 13px;
    color: #777;
}

.account-actions { margin: 0 0 20px; }

.account-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 14px;
    margin: 0 0 24px;
}

.account-tile {
    display: block;
    padding: 18px;
    border: 1px solid #e3e8e8;
    border-radius: 4px;
    background: #fff;
    color: #333;
    text-decoration: none;
    text-align: center;
}

.account-tile:hover { border-color: #008686; }

.account-tile__count {
    display: block;
    font-size: 26px;
    font-weight: 600;
    color: #008686;
}

.account-tile__label {
    display: block;
    font-size: 12px;
    color: #777;
}

.account-empty {
    padding: 36px 24px;
    border: 1px dashed #d5dcdc;
    border-radius: 4px;
    background: #fafcfc;
    text-align: center;
}

.account-empty__text {
    margin: 0 0 18px;
    font-size: 15px;
    color: #666;
    line-height: 1.6;
}

/* --------------------------------------------------------------- forms */

.account-form { max-width: 620px; }

.account-form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0 16px;
}

.account-form__actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 24px;
}

.account-form__cancel {
    color: #777;
    font-size: 13px;
}

.basic-form__group { margin-bottom: 16px; }

.basic-form__group--checkbox { font-size: 14px; }

.basic-form__label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    color: #555;
}

.basic-form__input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d5dcdc;
    border-radius: 3px;
    font-size: 14px;
    font-family: inherit;
}

.basic-form__input:focus {
    outline: 2px solid #008686;
    outline-offset: 1px;
}

.basic-form__hint {
    margin: 5px 0 0;
    font-size: 12px;
    color: #888;
    line-height: 1.5;
}

.basic-form__notice {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #a33;
}

.profile-avatar {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
}

.profile-avatar__image,
.profile-avatar__placeholder {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-avatar__placeholder {
    display: grid;
    place-items: center;
    background: #e3f0f0;
    color: #008686;
    font-size: 34px;
    font-weight: 600;
}

.profile-avatar__field { flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------------------- addresses */

.address-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.address-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid #e3e8e8;
    border-radius: 4px;
    background: #fff;
}

.address-card__body { flex: 1 1 auto; }

.address-card__label {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: #008686;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.address-card__name {
    margin: 0 0 4px;
    font-weight: 600;
    font-size: 14px;
}

.address-card__line {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #555;
}

.address-card__line--muted { color: #888; }

.address-card__flags {
    margin: 10px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.address-card__flag {
    padding: 2px 8px;
    border: 1px solid #008686;
    border-radius: 10px;
    font-size: 11px;
    color: #008686;
}

.address-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eef2f2;
}

.address-card__action {
    padding: 0;
    border: 0;
    background: none;
    color: #008686;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.address-card__action--danger { color: #a33; }

.saved-card__link {
    color: inherit;
    text-decoration: none;
}

/* The Save button is a POST now, so it is a form and a button rather than an
   anchor. These rules make it sit exactly where the anchor did. */
.save-tag__form { display: inline; }

.save-tag__button {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* ------------------------------------------------------- checkout and orders */

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
}

@media (max-width: 860px) {
    .checkout-layout { grid-template-columns: minmax(0, 1fr); }
}

.checkout-step {
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e3e8e8;
}

.checkout-step:last-child { border-bottom: 0; }

.checkout-step__heading {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
}

.checkout-step__link { margin: 10px 0 0; font-size: 13px; }

.checkout-choice {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid #e3e8e8;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.55;
    cursor: pointer;
}

.checkout-choice:hover { border-color: #008686; }

/*
 * THE SELECTED ROW HAS TO LOOK SELECTED, and its control has to exist.
 *
 * Two faults, stacked, and each on its own was enough to make choosing an
 * address or a payment method produce no visible change at all.
 *
 * 1. style-min.css sets `input, textarea { appearance: none }` on EVERY input
 *    on the site. That erases the native radio and puts nothing in its place -
 *    measured at 0x81 pixels inside this flex row, so there was no control on
 *    screen, not merely one without a dot. The legacy site survives that
 *    because its own markup pairs .basic-form__radio-input with a
 *    .basic-form__checkmark element it draws by hand; these rows are ours and
 *    nothing drew them.
 *
 * 2. .checkout-choice had a :hover and no checked state, so the chosen row and
 *    an untouched one computed identically - same border, same background, same
 *    weight.
 *
 * The control is drawn back below. :has() carries the row state, and the
 * adjacent-sibling rule under it does the same job for the label text without
 * :has(), so the selection is still legible if that selector is unavailable.
 */
/*
 * .pmm-control - OUR radios and checkboxes, drawn back.
 *
 * A class rather than a selector clever enough to guess which inputs are ours.
 * "The class names are the point" has cost this project three separate defects
 * already (D-077, D-080, D-087); a legacy-classed control has its own treatment
 * and must not be caught by this, and naming ours is the only way to be sure.
 *
 * They needed drawing because style-min.css sets
 * `input, textarea { appearance: none }` on EVERY input on the site, and puts
 * nothing in its place. Measured: the checkout radios were 0x81, the "accept
 * the terms" checkbox on registration was 0x0 - not a control without a dot, no
 * control at all, on a box a customer has to tick to open an account.
 */
.pmm-control {
    flex: 0 0 18px;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 2px 8px 0 0;
    vertical-align: -3px;
    border: 2px solid #b9c6c6;
    background-color: #fff;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}

input[type="radio"].pmm-control    { border-radius: 50%; }
input[type="checkbox"].pmm-control { border-radius: 3px; }

.pmm-control:hover { border-color: #008686; }

.pmm-control:focus-visible {
    outline: 2px solid #008686;
    outline-offset: 2px;
}

/* The dot is an inset ring - teal edge, white gap, teal centre. Not a
   pseudo-element: ::before on an <input> is not reliable across browsers. */
input[type="radio"].pmm-control:checked {
    border-color: #008686;
    background-color: #008686;
    box-shadow: inset 0 0 0 3px #fff;
}

/* The tick is a background image, not a glyph, so a font that fails to load
   cannot take it with it. data: is permitted by img-src in the CSP. */
input[type="checkbox"].pmm-control:checked {
    border-color: #008686;
    background-color: #008686;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* The checkout row itself, which had a :hover and no checked state - so the
   chosen address and an untouched one computed identically: same border, same
   background, same weight. */
.checkout-choice:has(input:checked) {
    border-color: #008686;
    background-color: #f2f9f9;
    box-shadow: inset 0 0 0 1px #008686;
}

.checkout-choice input:checked + .checkout-choice__body { font-weight: 600; }

/* Keyboard users get the same answer as mouse users. */
.checkout-choice:focus-within {
    outline: 2px solid #008686;
    outline-offset: 2px;
}


.checkout-choice__hint { color: #777; }

.checkout-summary {
    padding: 20px;
    border: 1px solid #e3e8e8;
    border-radius: 4px;
    background: #f5f7f7;
}

.checkout-lines {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.checkout-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #e6ecec;
}

.checkout-line__option { color: #888; font-size: 12px; }
.checkout-line__total { white-space: nowrap; font-weight: 600; }

.order-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.order-header__number { margin: 0; font-size: 18px; font-weight: 600; }
.order-header__meta { margin: 4px 0 0; font-size: 13px; color: #777; }
.order-header__status { text-align: right; font-size: 12px; color: #777; }
.order-header__payment { display: block; margin-top: 6px; }

.order-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    background: #eef2f2;
    color: #555;
    font-size: 12px;
    font-weight: 600;
}

.order-status--pending   { background: #fff4e0; color: #8a5a00; }
.order-status--confirmed,
.order-status--processing,
.order-status--ready     { background: #e3f0f0; color: #008686; }
.order-status--shipped,
.order-status--delivered { background: #e6f4e6; color: #2c6e2c; }
.order-status--cancelled { background: #f7e6e6; color: #a33; }

.order-lines {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.order-lines th,
.order-lines td {
    padding: 10px 8px;
    border-bottom: 1px solid #e6ecec;
    text-align: left;
    vertical-align: top;
}

.order-lines th { font-size: 12px; color: #777; font-weight: 600; }
.order-lines__num { text-align: right; white-space: nowrap; }

.order-lines__sku,
.order-lines__option {
    display: block;
    font-size: 12px;
    color: #888;
}

.order-totals { max-width: 320px; margin-left: auto; }

.order-addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 24px 0;
}

.order-address__heading {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #008686;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.order-note { margin: 0 0 24px; }

.order-timeline {
    margin: 0;
    padding: 0 0 0 4px;
    list-style: none;
    border-left: 2px solid #e3e8e8;
}

.order-timeline__entry {
    position: relative;
    padding: 0 0 16px 18px;
    font-size: 13px;
}

.order-timeline__entry::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #008686;
}

.order-timeline__when {
    display: block;
    font-size: 12px;
    color: #888;
}

.order-timeline__note {
    display: block;
    color: #666;
}

/* ------------------------------------------------------------------ contact */

/*
    The honeypot. Hidden from people without display:none, which some bots
    detect and skip - it is off-screen and out of the tab order instead, and
    aria-hidden keeps it out of assistive technology.
*/
.contact-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-sent {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-left: 3px solid #008686;
    background: #eef7f7;
    font-size: 14px;
}

/* ----------------------------------------------------------------- support */

/* The Support landing page's cards. Its own class, not .admin-columns - that
   one lives in admin.css, which a public page does not load, so borrowing it
   produced a single stacked column and no grid at all. */
.support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 24px 0 32px;
    align-items: start;
}

/* `> *` rather than `.shadow-block`: naming the legacy class here is exactly
   what check-css-collisions.py exists to stop, and it caught this. The grid
   owns its own children whatever they are made of. */
.support-grid > * { height: 100%; }

/* ----------------------------------------------------------------- contact */

/*
 * /contact is Zone B, so it is ours to design - and it arrived from the legacy
 * site with no page heading at all, a field grid that left half-width holes
 * beside Phone and Region, and vertical gaps wide enough to push the submit
 * button off a laptop screen.
 *
 * Everything here is scoped to .contact-page, which the extractor now emits.
 * Without that scope these rules would reach .basic-form on nineteen solution
 * pages, which is exactly the kind of reach that produced D-080.
 */

.contact-page__heading {
    margin: 0 0 8px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #14201f;
}

.contact-page__intro {
    margin: 0 0 28px;
    max-width: 60ch;
    font-size: 15px;
    line-height: 1.6;
    color: #55696a;
}

/* THE FIELD GRID IS LEFT ALONE.
 *
 * A first attempt replaced .column--2 with a CSS grid to close the empty half
 * beside Phone and Region. It made the layout worse, not better: measured,
 * "First Name" landed in column 2 at x=499 while "Last Name" sat in column 1 at
 * x=184 on the next row, and the rows no longer aligned - the legacy rules on
 * .column__item place these items themselves, and a grid container underneath
 * them fights rather than replaces that.
 *
 * The pairing worked before the change. The real complaints were the vertical
 * gaps and the missing heading, and those are fixed above and below without
 * touching how the fields are placed.
 */

/* The legacy rhythm is roughly double what these fields need, and the form is
   long enough that it matters. */
.contact-page .basic-form__group { margin-bottom: 18px; }
.contact-page .basic-form__legend { margin-bottom: 18px; }

.contact-page .shadow-block { padding-bottom: 8px; }

/* The map. It had no frame of its own, so a 497px iframe simply abutted the
   text above it. */
.contact-page iframe {
    display: block;
    width: 100%;
    border: 1px solid #e3e8e8;
    border-radius: 6px;
}

@media (max-width: 760px) {
    .contact-page__heading { font-size: 24px; }
}

/* ------------------------------------------------- the form error summary */

/* A NAME OF OUR OWN, and the reason is worth keeping.
   
   This block used .basic-form__notice, which the legacy stylesheet positions
   absolutely (bottom: 6px; left: 0) because there it is a one-line note under a
   single input. Used for a block at the top of a form it left the flow, and
   "Incorrect email address or password." rendered twenty pixels BELOW the Sign
   in button - correct in the markup, wrong on the screen. */

.form-error-summary {
    margin: 0 0 20px;
    padding: 12px 16px;
    background: #fdf3f2;
    border-left: 4px solid #c0392b;
    border-radius: 0 4px 4px 0;
    color: #8e2f26;
}

.form-error-summary ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}

/* One problem is a sentence, not a list of one. */
.form-error-summary li:only-child {
    margin-left: -18px;
    list-style: none;
}