/* Storefront customer account and sign-in pages, shared by every template.
   A template restyles them through the --account-theme-* custom properties below, set on :root in its
   own stylesheet (beauty.css, booknook.css, albeena-shop.css, default.css): colours, the button colour
   and its text, the help box, corner radii, the heading font and the weight of labels and buttons.
   Every property has a fallback, so a template that sets none still gets a complete, neutral look. */

.account-page,
.auth-page {
    --account-accent: var(--account-theme-accent, #2b2b2b);
    --account-accent-dark: var(--account-theme-accent-dark, #111111);
    --account-soft: var(--account-theme-soft, #f3f1ef);
    --account-cream: var(--account-theme-cream, #faf8f6);
    --account-line: var(--account-theme-line, #e5e1e3);
    --account-ink: var(--account-theme-ink, #222222);
    --account-muted: var(--account-theme-muted, #6b6669);
    --account-heading: var(--account-theme-heading, inherit);
    --account-heading-weight: var(--account-theme-heading-weight, 700);
    /* Buttons, the active filter, the current page, the avatar: the template's call-to-action colour. */
    --account-button: var(--account-theme-button, var(--account-accent));
    --account-button-hover: var(--account-theme-button-hover, var(--account-accent-dark));
    --account-on-button: var(--account-theme-on-button, #ffffff);
    --account-help: var(--account-theme-help, var(--account-button));
    --account-on-help: var(--account-theme-on-help, var(--account-on-button));
    --account-input: var(--account-theme-input, #ffffff);
    /* Cards and tables; inputs, rows and thumbnails; buttons, badges and tabs. */
    --account-radius: var(--account-theme-radius, 22px);
    --account-radius-small: var(--account-theme-radius-small, 14px);
    --account-pill: var(--account-theme-pill, 999px);
    --account-strong: var(--account-theme-strong, 800);
    color: var(--account-ink);
    padding: 28px 0 64px;
}

.account-page a { color: var(--account-accent); }
.account-page a:hover { color: var(--account-accent-dark); }

.account-breadcrumb { color: var(--account-muted); display: flex; flex-wrap: wrap; font-size: 14px; font-weight: 600; gap: 8px; margin-bottom: 22px; }
.account-breadcrumb a { color: var(--account-muted) !important; }
.account-breadcrumb strong { color: var(--account-ink); }

.account-layout { align-items: flex-start; display: grid; gap: 40px; grid-template-columns: 290px minmax(0, 1fr); }
.account-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.account-profile { align-items: center; background: var(--account-cream); border: 1px solid var(--account-line); border-radius: calc(var(--account-radius) - 2px); display: flex; gap: 14px; margin-bottom: 18px; padding: 18px; }
.account-avatar { align-items: center; background: var(--account-button); border-radius: 50%; color: var(--account-on-button); display: inline-flex; flex-shrink: 0; font-family: var(--account-heading); font-size: 22px; font-weight: var(--account-heading-weight); height: 52px; justify-content: center; width: 52px; }
.account-profile-text { min-width: 0; }
.account-profile-text strong { display: block; font-size: 16px; }
.account-profile-text small { color: var(--account-muted); display: block; font-size: 13px; overflow-wrap: anywhere; }

.account-nav { display: flex; flex-direction: column; gap: 4px; }
.account-nav a { align-items: center; border-radius: var(--account-radius-small); color: var(--account-ink) !important; display: flex; font-size: 15px; font-weight: 700; gap: 12px; min-height: 48px; padding: 0 14px; text-decoration: none; }
.account-nav a:hover { background: var(--account-cream); }
.account-nav a[aria-current="page"] { background: var(--account-soft); color: var(--account-accent-dark) !important; font-weight: var(--account-strong); }
.account-nav svg { color: var(--account-muted); flex-shrink: 0; }
.account-nav a[aria-current="page"] svg { color: var(--account-accent); }
.account-nav .account-nav-count { background: var(--account-cream); border: 1px solid var(--account-line); border-radius: var(--account-pill); color: var(--account-muted); font-size: 12px; margin-left: auto; min-width: 24px; padding: 1px 8px; text-align: center; }
.account-nav .account-nav-soon { background: var(--account-theme-gold-light, #e8d3b0); border-radius: var(--account-pill); color: var(--account-accent-dark); font-size: 11px; font-weight: var(--account-strong); margin-left: auto; padding: 3px 9px; }
.account-nav .account-nav-logout { color: var(--account-muted) !important; }
.account-help { background: var(--account-help); border-radius: calc(var(--account-radius) - 2px); color: var(--account-on-help); display: flex; flex-direction: column; font-size: 13px; gap: 6px; margin-top: 18px; padding: 18px; }
.account-help strong { font-size: 14px; }
.account-help a { color: var(--account-on-help) !important; font-weight: var(--account-strong); text-decoration: underline; }

.account-title { font-family: var(--account-heading); font-size: 42px; font-weight: var(--account-heading-weight); line-height: 1.08; margin: 0 0 8px; }
.account-lead { color: var(--account-muted); font-size: 15px; line-height: 1.55; margin: 0; max-width: 760px; }

.account-card { background: #ffffff; border: 1px solid var(--account-line); border-radius: var(--account-radius); display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.account-card--soft { background: var(--account-cream); }
.account-card--accent { background: var(--account-button); border-color: var(--account-button); color: var(--account-on-button); }
.account-card--accent a { color: var(--account-on-button) !important; }
.account-card-head { align-items: center; display: flex; gap: 16px; justify-content: space-between; }
.account-card-head h2 { font-size: 20px; font-weight: var(--account-strong); margin: 0; }
.account-card-head a { font-size: 14px; font-weight: var(--account-strong); }
.account-grid-2 { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-grid-3 { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.account-address { font-size: 15px; font-style: normal; line-height: 1.7; margin: 0; }
.account-muted { color: var(--account-muted); }
.account-empty { color: var(--account-muted); margin: 0; }

.account-badge { align-items: center; border-radius: var(--account-pill); display: inline-flex; font-size: 12px; font-weight: var(--account-strong); height: 26px; padding: 0 11px; white-space: nowrap; }
.account-badge--progress { background: var(--account-soft); color: var(--account-accent-dark); }
.account-badge--wait { background: #fdf1dc; color: #7a4f10; }
.account-badge--done { background: #e9efd9; color: #3a5520; }
.account-badge--storno { background: #f0eeef; color: #5f5a5d; }
.account-badges { display: flex; flex-wrap: wrap; gap: 6px; }

.account-thumbs { display: flex; flex-shrink: 0; }
.account-thumbs img, .account-thumbs span { background: #ffffff; border: 2px solid #ffffff; border-radius: calc(var(--account-radius-small) - 2px); box-shadow: 0 0 0 1px var(--account-line); height: 48px; object-fit: contain; width: 48px; }
.account-thumbs > * + * { margin-left: -14px; }
.account-thumbs span { background: var(--account-cream); display: inline-block; }

.account-timeline { display: flex; gap: 0; padding: 6px 4px 0; }
.account-timeline li { align-items: center; display: flex; flex: 1; list-style: none; }
.account-timeline li:last-child { flex: 0; }
.account-timeline .account-step { align-items: center; display: flex; flex-direction: column; font-size: 12px; font-weight: var(--account-strong); gap: 6px; white-space: nowrap; }
.account-timeline .account-dot { align-items: center; background: #ffffff; border: 2px solid var(--account-line); border-radius: 50%; display: inline-flex; height: 28px; justify-content: center; width: 28px; }
.account-timeline .is-done .account-dot { background: var(--account-accent); border-color: var(--account-accent); color: #ffffff; }
.account-timeline .account-step:not(.is-done) { color: var(--account-muted); }
.account-timeline .account-line { background: var(--account-line); border-radius: 2px; flex: 1; height: 3px; margin: 0 10px 22px; }
.account-timeline .account-line.is-done { background: var(--account-accent); }

.account-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.account-filters a { align-items: center; border: 1.5px solid var(--account-line); border-radius: var(--account-pill); color: var(--account-ink) !important; display: inline-flex; font-size: 14px; font-weight: var(--account-strong); height: 40px; padding: 0 16px; text-decoration: none; }
.account-filters a[aria-current="true"] { background: var(--account-button); border-color: var(--account-button); color: var(--account-on-button) !important; }

.account-table { background: #ffffff; border: 1px solid var(--account-line); border-radius: var(--account-radius); overflow: hidden; }
.account-row { align-items: center; border-top: 1px solid var(--account-line); display: grid; gap: 18px; grid-template-columns: 120px minmax(0, 1fr) 96px 170px 84px; padding: 16px 22px; }
.account-row:first-child { border-top: 0; }
.account-row--head { background: var(--account-cream); color: var(--account-muted); font-size: 12px; font-weight: var(--account-strong); letter-spacing: .08em; text-transform: uppercase; }
.account-row--docs { grid-template-columns: minmax(0, 1fr) 130px 120px 110px; }
.account-row strong { font-size: 15px; }
.account-row small { color: var(--account-muted); display: block; font-size: 13px; }
.account-row .account-products { align-items: center; display: flex; gap: 14px; min-width: 0; }
.account-row .account-products span { font-size: 14px; line-height: 1.45; }
.account-row .account-thumbs img, .account-row .account-thumbs span { height: 42px; width: 42px; }
.account-row .account-thumbs > * + * { margin-left: -12px; }
.account-amount { text-align: right; }

.account-button { align-items: center; background: var(--account-button); border: 0; border-radius: var(--account-pill); color: var(--account-on-button) !important; cursor: pointer; display: inline-flex; font-size: 14px; font-weight: var(--account-strong); gap: 8px; justify-content: center; min-height: 48px; padding: 0 22px; text-decoration: none; white-space: nowrap; }
.account-button:hover { background: var(--account-button-hover); color: var(--account-on-button) !important; }
.account-button--ghost { background: #ffffff; border: 1.5px solid var(--account-line); color: var(--account-accent) !important; }
.account-button--ghost:hover { background: var(--account-cream); color: var(--account-accent-dark) !important; }
.account-button--small { font-size: 13px; min-height: 38px; padding: 0 16px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

.account-form { display: flex; flex-direction: column; gap: 16px; }
.account-fields { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-fields--3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr); }
.account-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.account-field span { color: var(--account-muted); font-size: 13px; font-weight: var(--account-strong); }
.account-field input, .account-field select { background: var(--account-input); border: 1.5px solid var(--account-line); border-radius: var(--account-radius-small); color: var(--account-ink); font-size: 15px; height: 48px; padding: 0 16px; width: 100%; }
.account-field input:focus, .account-field select:focus { background: #ffffff; border-color: var(--account-accent); outline: none; }
.account-field input[readonly] { background: var(--account-cream); }
.account-check { align-items: flex-start; display: flex; font-size: 15px; font-weight: 700; gap: 10px; }
.account-check input { accent-color: var(--account-accent); flex-shrink: 0; height: 18px; margin-top: 2px; width: 18px; }
.account-subform[hidden] { display: none; }

.account-alert { border-radius: calc(var(--account-radius-small) + 2px); font-size: 15px; font-weight: 700; padding: 14px 18px; }
.account-alert--error { background: #fdecec; color: #8a1c1c; }
.account-alert--success { background: #e9efd9; color: #3a5520; }

.account-summary { display: flex; flex-direction: column; font-size: 15px; gap: 8px; padding-top: 14px; border-top: 1px solid var(--account-line); }
.account-summary div { display: flex; justify-content: space-between; gap: 16px; }
.account-summary .account-total { border-top: 1px solid var(--account-line); font-size: 19px; font-weight: var(--account-strong); padding-top: 10px; }
.account-lines { display: flex; flex-direction: column; }
.account-line-item { align-items: center; border-top: 1px solid var(--account-line); display: flex; gap: 16px; padding: 14px 0; }
.account-line-item img, .account-line-item .account-line-placeholder { background: #ffffff; border: 1px solid var(--account-line); border-radius: var(--account-radius-small); flex-shrink: 0; height: 56px; object-fit: contain; width: 56px; }
.account-line-item .account-line-placeholder { background: var(--account-cream); display: inline-block; }
.account-line-item .account-line-name { flex: 1; font-size: 15px; font-weight: 700; }
.account-line-item .account-line-name small { color: var(--account-muted); display: block; font-weight: 600; }
.account-line-item .account-line-pieces { color: var(--account-muted); font-size: 14px; width: 60px; }
.account-line-item .account-line-price { font-size: 15px; font-weight: var(--account-strong); text-align: right; width: 100px; }
.account-doc { align-items: center; background: var(--account-cream); border-radius: calc(var(--account-radius-small) + 2px); display: flex; gap: 14px; padding: 14px 16px; }
.account-doc span { flex: 1; }
.account-doc small { color: var(--account-muted); display: block; font-size: 13px; }
.account-tracking { align-items: center; background: #e9efd9; border-radius: var(--account-radius-small); color: #3a5520; display: flex; gap: 12px; justify-content: space-between; padding: 12px 14px; }
.account-tracking a { color: #3a5520 !important; font-size: 13px; font-weight: var(--account-strong); }
.account-pagination { display: flex; gap: 8px; justify-content: center; }
.account-pagination a, .account-pagination span { align-items: center; border: 1.5px solid var(--account-line); border-radius: var(--account-pill); display: inline-flex; font-weight: var(--account-strong); height: 40px; justify-content: center; min-width: 40px; padding: 0 12px; text-decoration: none; }
.account-pagination span { background: var(--account-button); border-color: var(--account-button); color: var(--account-on-button); }
.account-club { align-items: center; background: var(--account-accent); border-radius: calc(var(--account-radius) + 6px); color: #ffffff; display: grid; gap: 32px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding: 44px; }
.account-club h1 { color: #ffffff; font-family: var(--account-heading); font-size: 50px; font-weight: var(--account-heading-weight); line-height: 1; margin: 12px 0; }
.account-club p { color: rgba(255, 255, 255, .86); font-size: 16px; line-height: 1.6; margin: 0; }
.account-club-card { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--account-radius); display: flex; flex-direction: column; gap: 14px; padding: 26px; }
.account-club-bar { background: rgba(255, 255, 255, .2); border-radius: 4px; height: 8px; }
.account-club-bar span { background: var(--account-theme-gold-light, #e8d3b0); border-radius: 4px; display: block; height: 8px; width: 62%; }

/* Sign-in, registration and password pages */
.auth-card { background: #ffffff; border: 1px solid var(--account-line); border-radius: calc(var(--account-radius) + 4px); box-shadow: 0 20px 60px rgba(0, 0, 0, .06); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0 auto; max-width: 960px; overflow: hidden; }
.auth-card--narrow { display: block; max-width: 520px; }
.auth-body { display: flex; flex-direction: column; gap: 18px; padding: 40px; }
.auth-body h1 { font-family: var(--account-heading); font-size: 34px; font-weight: var(--account-heading-weight); margin: 0; }
.auth-title { font-family: var(--account-heading); font-size: 32px; font-weight: var(--account-heading-weight); margin: 0 0 16px; }
.auth-aside { background: var(--account-soft); display: flex; flex-direction: column; gap: 16px; justify-content: center; padding: 40px; }
.auth-aside h2 { color: var(--account-accent-dark); font-family: var(--account-heading); font-size: 28px; font-weight: var(--account-heading-weight); margin: 0 0 6px; }
.auth-aside li { align-items: center; display: flex; font-size: 15px; font-weight: 700; gap: 12px; list-style: none; }
.auth-aside ul { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; }
.auth-aside svg { color: var(--account-accent); flex-shrink: 0; }
.auth-tabs { background: var(--account-cream); border-radius: var(--account-pill); display: flex; gap: 6px; padding: 5px; }
.auth-tabs a { align-items: center; border-radius: var(--account-pill); color: var(--account-muted) !important; display: flex; flex: 1; font-size: 14px; font-weight: var(--account-strong); height: 42px; justify-content: center; text-decoration: none; }
.auth-tabs a[aria-current="page"], .auth-tabs a.active { background: #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, .08); color: var(--account-accent) !important; }

/* Sign-in dialog: form and benefits side by side (Bootstrap makes .modal-content a flex column) */
.account-modal .modal-content.auth-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.account-modal .modal-dialog { max-width: 880px; }
.auth-row { align-items: center; display: flex; font-size: 14px; gap: 12px; justify-content: space-between; }
.auth-note { color: var(--account-muted); font-size: 13px; line-height: 1.5; margin: 0; }

/* Header link of every template */
.account-header-link { align-items: center; display: inline-flex; font-weight: 700; gap: 6px; white-space: nowrap; }

@media (max-width: 991px) {
    .account-layout { grid-template-columns: minmax(0, 1fr); }
    .account-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .account-row, .account-row--docs { grid-template-columns: minmax(0, 1fr) auto; }
    .account-row--head { display: none; }
    .account-row .account-products { grid-column: 1 / -1; order: 3; }
    .account-club, .auth-card { grid-template-columns: minmax(0, 1fr); }
    .account-modal .modal-content.auth-card { grid-template-columns: minmax(0, 1fr); }
    .account-modal .auth-aside { display: none; }
}

@media (max-width: 640px) {
    .account-title { font-size: 32px; }
    .account-grid-2, .account-fields, .account-fields--3 { grid-template-columns: minmax(0, 1fr); }
    .account-card { padding: 18px; }
    .account-card-head { flex-wrap: wrap; }
    .auth-body, .auth-aside { padding: 26px 20px; }
    .account-timeline .account-step { font-size: 11px; white-space: normal; text-align: center; }
    .account-club { padding: 28px 22px; }
    .account-club h1 { font-size: 38px; }
}

/* Account box in the checkout's personal data */
.checkout-account { --account-accent: var(--account-theme-accent, #2b2b2b); align-items: center; background: var(--account-theme-soft, #f3f1ef); border-radius: calc(var(--account-theme-radius-small, 14px) + 2px); color: var(--account-theme-ink, #222222); display: flex; gap: 14px; margin-bottom: 24px; padding: 14px 18px; }
.checkout-account > svg { color: var(--account-accent); flex-shrink: 0; }
.checkout-account > span { display: flex; flex: 1; flex-direction: column; font-size: 15px; line-height: 1.4; min-width: 0; }
.checkout-account small { color: var(--account-theme-muted, #6b6669); font-size: 13px; }
.checkout-account a { color: var(--account-accent); font-size: 14px; font-weight: var(--account-theme-strong, 800); white-space: nowrap; }
.checkout-account--signed { background: #e9efd9; }
.checkout-account--signed > svg, .checkout-account--signed a { color: #3a5520; }
.checkout-account .checkout-account-button { background: var(--account-theme-button, var(--account-accent)); border-radius: var(--account-theme-pill, 999px); color: var(--account-theme-on-button, #ffffff) !important; padding: 10px 18px; text-decoration: none; }
@media (max-width: 640px) { .checkout-account { align-items: flex-start; flex-wrap: wrap; } .checkout-account .checkout-account-button { margin-left: 36px; } }