/* ==========================================================================
   Account panels — Wishlist, Browsing History, Account Details, Orders.

   A right-hand drawer opened from the header account menu. The markup is
   injected by scripts/account-menu.js, so this stylesheet is the only place
   the panel's appearance is defined.

   Reads only from tokens.css. No raw hex, no !important.
   ========================================================================== */

.account-panel {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
}

.account-panel.show {
    display: block;
}

.account-panel-scrim {
    position: absolute;
    inset: 0;
    background: var(--overlay-scrim);
    opacity: 0;
    animation: accountScrimIn var(--duration-base) var(--ease) forwards;
}

@keyframes accountScrimIn {
    to { opacity: 1; }
}

.account-panel-sheet {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    box-shadow: var(--shadow-xl);
    font-family: var(--font-sans);
    transform: translateX(100%);
    animation: accountSheetIn var(--duration-base) var(--ease) forwards;
}

@keyframes accountSheetIn {
    to { transform: translateX(0); }
}

/* ------------------------------------------------------------------ header */

.account-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--line-soft);
    flex: none;
}

.account-panel-title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
}

.account-panel-close {
    width: 36px;
    height: 36px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    color: var(--ink-soft);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: var(--transition-colors);
}

.account-panel-close:hover {
    background: var(--surface-sunken);
    color: var(--ink);
}

.account-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5) var(--space-6);
}

.account-panel-foot {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line-soft);
}

/* -------------------------------------------------------------- list rows  */

.account-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.account-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-base) var(--ease);
}

.account-row:hover {
    border-color: var(--line);
}

.account-row-thumb {
    width: 56px;
    height: 56px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
    overflow: hidden;
    color: var(--ink-faint);
}

.account-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    box-sizing: border-box;
}

.account-row-copy {
    flex: 1;
    min-width: 0;
}

.account-row-title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--ink);
    line-height: var(--leading-snug);
}

.account-row-meta {
    margin: 2px 0 0;
    font-size: var(--text-2xs);
    color: var(--ink-faint);
}

.account-row-price {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--brand-dark);
}

.account-row-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
}

.account-row-remove {
    width: 28px;
    height: 28px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    color: var(--ink-faint);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: var(--transition-colors);
}

.account-row-remove:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

/* ---------------------------------------------------------------- buttons  */

.account-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-colors), var(--transition-transform);
}

.account-btn:hover {
    background: var(--brand-tint);
    border-color: var(--brand);
    color: var(--brand-dark);
}

.account-btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-inverse);
}

.account-btn-primary:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: var(--on-inverse);
}

.account-btn-small {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-2xs);
}

.account-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.account-btn-quiet {
    padding: 0;
    border: none;
    background: none;
    color: var(--ink-soft);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    text-decoration: underline;
}

.account-btn-quiet:hover {
    background: none;
    border: none;
    color: var(--brand-dark);
}

/* ----------------------------------------------------------- empty states  */

.account-empty {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-16) var(--space-4);
    text-align: center;
}

/* The panel draws its own icons as inline SVG (account-menu.js) rather than
   Font Awesome glyphs, so they size by width/height instead of font-size and
   are never left as tofu when the icon CDN is unreachable. */
.account-icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
}

.account-empty > .account-empty-icon {
    width: 44px;
    height: 44px;
    color: var(--line);
}

.account-row-thumb > .account-icon {
    width: 24px;
    height: 24px;
}

.account-avatar-edit-badge > .account-icon {
    width: 11px;
    height: 11px;
    stroke-width: 2;
}

.account-empty-heading {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--ink);
}

.account-empty-text {
    margin: 0;
    max-width: var(--measure-tight);
    font-size: var(--text-sm);
    color: var(--ink-soft);
    line-height: var(--leading-relaxed);
}

.account-empty .account-btn {
    margin-top: var(--space-2);
}

.account-spinner {
    width: 28px;
    height: 28px;
    border: 2px solid var(--line);
    border-top-color: var(--brand);
    border-radius: var(--radius-full);
    animation: accountSpin 0.8s linear infinite;
}

@keyframes accountSpin {
    to { transform: rotate(360deg); }
}

.account-notice {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--warning-bg);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--warning);
}

/* ------------------------------------------------------- account identity  */

.account-identity {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--line-soft);
}

/* Wraps .account-avatar so clicking the picture itself opens the picker
   below, rather than the picker sitting permanently open in the panel. */
.account-avatar-edit {
    position: relative;
    flex: none;
    width: 56px;
    height: 56px;
    padding: 0;
    border: none;
    background: none;
    border-radius: var(--radius-full);
    cursor: pointer;
}

.account-avatar-edit-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    color: var(--on-inverse);
    border: 2px solid var(--surface);
    border-radius: var(--radius-full);
    font-size: 9px;
}

.account-avatar {
    width: 56px;
    height: 56px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    color: var(--on-inverse);
    border-radius: var(--radius-full);
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
}

/* Same slot, but an <img> when the account has a real avatar — the letter
   circle above is only the no-avatar fallback now. */
img.account-avatar {
    object-fit: cover;
    background: var(--surface-sunken);
}

.avatar-picker {
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--line-soft);
}

.avatar-picker-label {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-faint);
}

.avatar-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 44px);
    gap: var(--space-3);
}

.avatar-pick-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    background: none;
    cursor: pointer;
    line-height: 0;
    transition: border-color var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}

.avatar-pick-btn img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    object-fit: cover;
    display: block;
}

.avatar-pick-btn:hover {
    transform: scale(1.06);
}

.avatar-pick-btn.is-selected {
    border-color: var(--brand);
}

.account-identity-name {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--ink);
}

.account-identity-email {
    margin: 2px 0 0;
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

.account-facts {
    margin: 0;
    padding: var(--space-5) 0 0;
    display: grid;
    gap: var(--space-4);
}

.account-fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
}

.account-fact dt {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-faint);
}

.account-fact dd {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--ink);
    text-align: right;
}

/* ----------------------------------------------------------------- orders  */

.account-order {
    padding: var(--space-4);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
}

.account-order-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.account-order-number {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--ink);
}

.account-status {
    flex: none;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
}

.account-status.is-awaiting {
    background: var(--warning-bg);
    color: var(--warning);
}

.account-status.is-pending {
    background: var(--surface-sunken);
    color: var(--ink-soft);
}

.account-status.is-done {
    background: var(--success-bg);
    color: var(--success);
}

.account-order-items {
    list-style: none;
    margin: 0;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    display: grid;
    gap: var(--space-2);
}

.account-order-items li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--ink-soft);
}

.account-order-items li span {
    flex: none;
    color: var(--ink);
    font-weight: var(--weight-medium);
}

.account-order-total {
    margin: var(--space-3) 0 0;
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

.account-order-total strong {
    color: var(--brand-dark);
    font-weight: var(--weight-bold);
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 480px) {
    .account-panel-head,
    .account-panel-body {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .account-row {
        flex-wrap: wrap;
    }

    .account-row-actions {
        margin-left: auto;
    }
}


/* ==========================================================================
   ACCOUNT PANELS — EDITORIAL REFINEMENT
   --------------------------------------------------------------------------
   Brings Wishlist, Browsing History, Orders and Account details into line
   with the quick view and cart (styles/store.css, same section name): square
   corners, no drop shadow, ruled rows instead of individually bordered
   cards, and outlined rather than filled status chips.

   Deliberately NOT squared: .account-avatar, .avatar-pick-btn and
   .account-spinner. A round avatar is a convention, not a rounded card, and
   a square spinner would just look broken.
   ========================================================================== */

.account-panel-sheet,
.account-panel-close,
.account-row,
.account-row-thumb,
.account-row-remove,
.account-btn,
.account-order,
.account-status,
.account-notice {
    border-radius: 0;
}

.account-panel-sheet {
    box-shadow: none;
    border-left: 1px solid var(--line);
}

.account-panel-title {
    letter-spacing: var(--tracking-tighter);
}

.account-panel-close {
    border: 1px solid var(--line);
}

.account-panel-close:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--on-inverse);
}

/* Rows were separately bordered boxes with a gap between each. As a ruled
   list they read as one continuous inventory, which is what a wishlist and
   a history actually are. */
.account-list {
    gap: 0;
    border-top: 1px solid var(--line-soft);
}

.account-row {
    border: none;
    border-bottom: 1px solid var(--line-soft);
    padding: var(--space-4) 0;
}

.account-row:hover {
    border-color: var(--line-soft);
    background: var(--surface-sunken);
}

.account-row-thumb {
    border: 1px solid var(--line-soft);
    background: var(--surface);
}

.account-row-title {
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-snug);
}

.account-row-meta {
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.account-row-price {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Removal is a quiet action until you reach for it — no standing red fill. */
.account-row-remove:hover {
    background: transparent;
    color: var(--danger);
}

.account-btn {
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-snug);
    box-shadow: none;
}

.account-btn-primary {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--on-inverse);
}

.account-btn-primary:hover {
    background: var(--ink-strong);
    border-color: var(--ink-strong);
}

.account-order {
    border: none;
    border-bottom: 1px solid var(--line-soft);
    padding: var(--space-4) 0;
}

/* Outlined chips rather than filled blocks of colour, so a list of orders
   does not read as a row of warning banners. */
.account-status {
    background: transparent;
    border: 1px solid currentColor;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.account-status.is-awaiting,
.account-status.is-pending {
    background: transparent;
}

.account-notice {
    background: transparent;
    border-left: 2px solid var(--warning);
    padding-left: var(--space-3);
}

.account-empty-heading {
    letter-spacing: var(--tracking-tight);
}