/* The address book: the list on the account page, and the picker at checkout.

   Colours come from the theme's own palette variables so this follows the shop
   rather than setting a second one. --global-palette1 is the deep navy the
   header and headings already use. */

/* ── account page ──────────────────────────────────────────────────────────── */

.fq-ab {
    margin: 2.2rem 0 0;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.fq-ab-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}

.fq-ab-head h3 { margin: 0; }

.fq-ab-none {
    margin: 0;
    opacity: .75;
    max-width: 44em;
    line-height: 1.6;
}

.fq-ab-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    /* Two across where there is room, one where there is not. The addresses are
       short, so a third column would leave each one mostly whitespace. */
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.fq-ab-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .8rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 10px;
    background: #fff;
}

.fq-ab-label {
    display: inline-block;
    font-weight: 700;
    font-size: .92rem;
    margin-bottom: .35rem;
    color: var(--global-palette1, #00205b);
}

.fq-ab-item address {
    font-style: normal;
    line-height: 1.5;
    font-size: .92rem;
    opacity: .85;
}

.fq-ab-item-acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem .9rem;
}

/* The three actions are links, not buttons: three buttons on every card turns
   a short list into a wall of chrome, and only one of them (Remove) is a
   decision worth that weight. */
.fq-ab-inline { margin: 0; display: inline; }

.fq-ab-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: .86rem;
    color: var(--global-palette1, #00205b);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.fq-ab-link:hover { opacity: .75; }
.fq-ab-link--del  { color: #9a2d33; }

.fq-ab-link:focus-visible,
.fq-ab-pick-btn:focus-visible {
    outline: 2px solid var(--global-palette1, #00205b);
    outline-offset: 2px;
}

.fq-ab-req  { color: #9a2d33; }
.fq-ab-help {
    display: block;
    font-size: .8rem;
    opacity: .65;
    margin-top: .25rem;
}

/* ── checkout picker ───────────────────────────────────────────────────────── */

.fq-ab-pick {
    margin: 0 0 1.3rem;
    padding: .9rem 1rem 1rem;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 10px;
    background: rgba(0, 0, 0, .015);
}

.fq-ab-pick-head {
    margin: 0 0 .6rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .7;
}

.fq-ab-pick-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.fq-ab-pick-btn {
    flex: 1 1 11rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    text-align: left;
    padding: .6rem .75rem;
    border: 1.5px solid rgba(0, 0, 0, .15);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    line-height: 1.35;
}

.fq-ab-pick-btn:hover { border-color: var(--global-palette1, #00205b); }

/* The chosen one is filled, not merely outlined: at a glance, on a phone, an
   outline difference between two cards is not a difference. */
.fq-ab-pick-btn.is-on {
    border-color: var(--global-palette1, #00205b);
    background: var(--global-palette1, #00205b);
    color: #fff;
}

.fq-ab-pick-label { font-weight: 700; font-size: .95rem; }

.fq-ab-pick-sum {
    font-size: .8rem;
    opacity: .7;
    /* An address that outgrows its card wraps rather than being clipped. */
    overflow-wrap: anywhere;
}

.fq-ab-pick-btn.is-on .fq-ab-pick-sum { opacity: .85; }

.fq-ab-pick-manage {
    display: inline-block;
    margin-top: .7rem;
    font-size: .82rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 480px) {
    .fq-ab-pick-btn { flex: 1 1 100%; }
    .fq-ab-item-acts { gap: .2rem .7rem; }
}