/**
 * My Account — application frame, shell, navigation, dashboard, addresses,
 * notices, empty states.
 *
 * Loaded on WooCommerce account pages only (inc/woocommerce/account/assets.php),
 * where WooCommerce's own storefront stylesheets are dequeued: nothing here
 * competes with them. Forms live in account-forms.css, the order views in
 * account-orders.css.
 *
 * Scopes: .casablanca-account-entry is page.php's content wrapper on the account
 * page (both logged in and logged out); .casablanca-account is the logged-in shell.
 * Every colour, radius and font is a base.css token; the only literals are the
 * three status hues, which the theme had no token for.
 *
 * Mobile first. 1024px is where the shell becomes two columns; below it the
 * rail is a profile bar over a scrolling tab strip.
 */

.casablanca-account-entry {
    --acc-line: var(--casablanca-border);
    --acc-muted: var(--casablanca-text-secondary);
    --acc-surface: var(--casablanca-bg-secondary);
    --acc-tint: color-mix(in srgb, var(--casablanca-brand) 7%, #fff);
    --acc-success: #15803d;
    --acc-warning: #b45309;
    --acc-danger: #b42318;

    color: var(--casablanca-text-primary);
    font-size: 14px;
    line-height: 1.5;
}

/* No extra layout on the entry — natural block flow keeps it at content
   height. Nothing here sets a height, a min-height or a flex that would
   stretch it past its content; the shell's own bottom edge is the content
   column's padding. */

/* ── The application frame ────────────────────────────────────────────
   Logged in, the account is an application, not an article: page.php wraps
   it in .casablanca-account-app instead of the storefront container, so the shell
   runs the full width of the viewport and the navigation rail touches the
   left edge with its divider running the height of the page. There is no
   gutter here — each column carries its own padding (--acc-gutter), which is
   what lets the rail bleed while the content stays inset. */

.casablanca-account-app {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.casablanca-account-app > article.page-account-layout {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* ── Flush against the footer ──────────────────────────────────────────
 * The white band between the shell and the footer was .casablanca-footer's own
 * `margin-top: 60px` (template-parts/footer/main-footer.css), not anything
 * inside the account: #primary ends exactly where the rail's divider stops,
 * and the footer pushed itself down from there.
 *
 * That 60px is the right gap after editorial content, so it stays global and
 * is zeroed only for the application frame — where the shell is a full-width
 * panel with its own bottom padding and the footer is meant to butt against
 * it. The logged-out login card keeps the storefront spacing.
 *
 * Same pattern as template-parts/sections/services.css. No negative margin,
 * no spacer, footer design untouched.
 */
#primary:has(> .casablanca-account-app) + .casablanca-footer {
    margin-top: 0;
}

/* ── The logged-out frame ─────────────────────────────────────────────
   The login / register view is one card, so it keeps the storefront
   container: the same 1400px and the same 20px gutter (10px on phones) as
   .header-container-full and .footer-container, so its edges line up with
   the logo above it and the footer below it. */

.casablanca-container.casablanca-account-container {
    --acc-gutter: 10px;
    max-width: 1400px;
    padding: 0 var(--acc-gutter);
}

.casablanca-container > article.page-account-layout {
    max-width: none;
    padding: 16px 0 40px;
}

@media (min-width: 768px) {
    .casablanca-container.casablanca-account-container {
        --acc-gutter: 20px;
    }

    .casablanca-container > article.page-account-layout {
        padding: 28px 0 56px;
    }
}

/* Logged out: page.php still prints the page title (the shell prints its
   own when logged in). Centred over the login card. */
.page-account-layout > .entry-header {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    text-align: center;
}

.page-account-layout > .entry-header .entry-title {
    text-align: center;
}

/* ── Shell ────────────────────────────────────────────────────────────
   One column on phones (rail above content), two from 1024px. The rail is a
   grid item, so it stretches to the row's height on its own and its divider
   never stops short of the content. */

.casablanca-account {
    --acc-gutter: 16px;
    --acc-rail: 264px;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.casablanca-account__sidebar {
    min-width: 0;
    border-bottom: 1px solid var(--acc-line);
    background: var(--casablanca-bg-primary);
}

.casablanca-account__sidebar-inner {
    padding: 12px var(--acc-gutter) 0;
}

.casablanca-account__content {
    min-width: 0;
    padding: 20px var(--acc-gutter) 44px;
}

/* Sections can hold long tables and wide grids, but text should not run the
   width of a 1920px screen. The cap is on the content, never on the shell. */
.casablanca-account__content-inner {
    max-width: 1280px;
}

/* The core class keeps WooCommerce's name for plugins; the layout is the
   grid's. width/float are reset in case a plugin brings WooCommerce's
   layout sheet back. */
.casablanca-account .casablanca-account__content.woocommerce-MyAccount-content,
.casablanca-account .casablanca-account__nav.woocommerce-MyAccount-navigation {
    float: none;
    width: auto;
    min-width: 0;
}

/* ── Content head ─────────────────────────────────────────────────── */

.casablanca-account__head {
    margin: 0 0 18px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--acc-line);
}

/* Shown on endpoints only: the way back to the dashboard. */
.casablanca-account__back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--acc-muted);
    text-decoration: none;
}

.casablanca-account__back-icon {
    display: inline-flex;
    width: var(--casablanca-icon-size-xs);
    height: var(--casablanca-icon-size-xs);
}

.casablanca-account__back-icon svg {
    width: 100%;
    height: 100%;
    transform: rotate(180deg);
}

.casablanca-account__title {
    margin: 0;
    font-family: var(--casablanca-font-secondary);
    font-size: clamp(16px, 1.1vw + 0.55rem, 20px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--casablanca-text-primary);
    overflow-wrap: anywhere;
}

.casablanca-account__lead {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--acc-muted);
}

.casablanca-account__section-title {
    margin: 0 0 10px;
    font-family: var(--casablanca-font-secondary);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--acc-muted);
}

/* Plain links a plugin prints in the content column. */
.casablanca-account__content a:where(:not([class])) {
    color: var(--casablanca-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Profile ──────────────────────────────────────────────────────────
   Phones: the rail's top bar, with the logout button. From 1024px it is the
   rail's header and logging out is the navigation's own row. */

.casablanca-account__profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 10px;
}

.casablanca-account__avatar {
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--casablanca-radius-circle);
    background: var(--acc-tint);
    color: var(--casablanca-brand);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.casablanca-account__identity {
    flex: 1 1 auto;
    min-width: 0;
}

.casablanca-account__name {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

/* Wraps rather than truncates: "Client depuis septembre 2026" does not fit
   the rail on one line. */
.casablanca-account__since {
    margin: 2px 0 0;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--acc-muted);
}

.casablanca-account__logout {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--acc-line);
    border-radius: var(--casablanca-radius);
    background: var(--casablanca-bg-primary);
    color: var(--acc-muted);
}

.casablanca-account__logout svg {
    width: var(--casablanca-icon-size-xl);
    height: var(--casablanca-icon-size-xl);
}

/* ── Navigation: phones — a tab strip ─────────────────────────────────
   Runs to the screen edges (the negative margin undoes the column's gutter;
   scroll-padding keeps the first and current tabs off the edge) and overlaps
   the rail's bottom border by 1px, so the active tab's underline sits on
   that line instead of beside it. account-nav.js scrolls the current tab
   into view on load. */

.casablanca-account__nav-list {
    display: flex;
    gap: 2px;
    margin: 0 calc(-1 * var(--acc-gutter, 16px)) -1px;
    padding: 0 var(--acc-gutter, 16px);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--acc-gutter, 16px);
    scrollbar-width: none;
}

.casablanca-account__nav-list::-webkit-scrollbar {
    display: none;
}

.casablanca-account__nav-item {
    flex: 0 0 auto;
    margin: 0;
}

.casablanca-account__nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--acc-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
}

.casablanca-account__nav-link:focus-visible,
.casablanca-account__logout:focus-visible,
.casablanca-account__card:focus-visible,
.casablanca-account__stat-link:focus-visible,
.casablanca-account__latest:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--casablanca-brand) 50%, transparent);
    outline-offset: 2px;
}

.casablanca-account__nav-icon {
    display: inline-flex;
    flex: 0 0 var(--casablanca-icon-size-lg);
    width: var(--casablanca-icon-size-lg);
    height: var(--casablanca-icon-size-lg);
    color: currentColor;
    opacity: 0.85;
}

.casablanca-account__nav-icon svg {
    width: 100%;
    height: 100%;
}

.casablanca-account__nav-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: var(--casablanca-radius-pill);
    background: var(--acc-tint);
    color: var(--casablanca-brand);
    font-size: 11px;
    font-weight: 700;
}

.casablanca-account__nav-link[aria-current="page"] {
    border-bottom-color: var(--casablanca-brand);
    color: var(--casablanca-brand);
}

.casablanca-account__nav-link[aria-current="page"] .casablanca-account__nav-icon {
    opacity: 1;
}

/* On phones logging out is the profile bar's button; a logout tab at the end
   of a swipeable strip is too easy to hit by accident. */
.casablanca-account__nav-item.woocommerce-MyAccount-navigation-link--customer-logout {
    display: none;
}

/* ── Navigation: desktop — the rail ──────────────────────────────────── */

@media (min-width: 1024px) {
    .casablanca-account {
        --acc-gutter: clamp(20px, 2.2vw, 40px);

        grid-template-columns: var(--acc-rail) minmax(0, 1fr);
        align-items: stretch;
    }

    .casablanca-account__sidebar {
        border-bottom: 0;
        border-inline-end: 1px solid var(--acc-line);
        background: var(--acc-surface);
    }

    .casablanca-account__sidebar-inner {
        padding: 22px clamp(12px, 1vw, 20px) 28px;
    }

    /* Sticky only once account-nav.js has measured how tall the site header
       is: without that offset the rail would slide under it. */
    .casablanca-account[data-header-offset] .casablanca-account__sidebar-inner {
        position: sticky;
        top: calc(var(--casablanca-admin-bar, 0px) + var(--acc-header-h, 0px));
    }

    .casablanca-account__content {
        padding: 26px var(--acc-gutter) 32px;
    }

    .casablanca-account__profile {
        gap: 11px;
        margin-bottom: 14px;
        padding: 0 8px 14px;
        border-bottom: 1px solid var(--acc-line);
    }

    /* Desktop uses the navigation's own "Log out" row. */
    .casablanca-account__logout {
        display: none;
    }

    .casablanca-account__nav-list {
        flex-direction: column;
        gap: 2px;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .casablanca-account__nav-link {
        display: flex;
        width: 100%;
        min-height: 38px;
        padding: 0 10px;
        border: 0;
        border-radius: var(--casablanca-radius);
        color: var(--casablanca-text-primary);
        font-size: 13.5px;
        font-weight: 500;
    }

    .casablanca-account__nav-label {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .casablanca-account__nav-link[aria-current="page"] {
        background: var(--acc-tint);
        color: var(--casablanca-brand);
        font-weight: 700;
    }

    .casablanca-account__nav-link[aria-current="page"] .casablanca-account__nav-meta {
        background: var(--casablanca-bg-primary);
        color: var(--casablanca-brand);
    }

    .casablanca-account__nav-item.woocommerce-MyAccount-navigation-link--customer-logout {
        display: block;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--acc-line);
    }

    .woocommerce-MyAccount-navigation-link--customer-logout .casablanca-account__nav-link {
        color: var(--acc-muted);
    }

    .casablanca-account__head {
        margin-bottom: 22px;
        padding-bottom: 16px;
    }
}

/* A wider rail once there is room for it; the content column keeps the rest. */
@media (min-width: 1440px) {
    .casablanca-account {
        --acc-rail: 288px;
    }
}

/* ── Shared bits: chevron, status badge ─────────────────────────────── */

.casablanca-account__chevron {
    display: inline-flex;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    align-self: center;
    color: var(--acc-muted);
}

.casablanca-account__chevron svg {
    width: 100%;
    height: 100%;
}

/* The status hue is a custom property so an order's status colours both
   this badge and the status inside WooCommerce's sentence on the single
   order view (account-orders.css). Unknown statuses stay neutral. */
.casablanca-account-entry .is-status-completed { --acc-status: var(--acc-success); }
.casablanca-account-entry .is-status-processing { --acc-status: var(--casablanca-brand); }
.casablanca-account-entry .is-status-on-hold,
.casablanca-account-entry .is-status-pending { --acc-status: var(--acc-warning); }
.casablanca-account-entry .is-status-cancelled,
.casablanca-account-entry .is-status-failed { --acc-status: var(--acc-danger); }

.casablanca-account__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: var(--casablanca-radius);
    background: color-mix(in srgb, var(--acc-status, var(--acc-muted)) 10%, #fff);
    color: var(--acc-status, var(--acc-muted));
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.casablanca-account__status::before {
    content: "";
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: var(--casablanca-radius-circle);
    background: currentColor;
}

/* ── Dashboard ────────────────────────────────────────────────────────
   A strip of figures, the latest order, then one shortcut per section. The
   sections are plain bands with hairline boxes inside them — no card wraps
   the dashboard itself. */

.casablanca-account__panel {
    margin: 0 0 22px;
}

.casablanca-account__panel:last-child {
    margin-bottom: 0;
}

.casablanca-account__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 10px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.casablanca-account__stats > li {
    display: flex;
    margin: 0;
}

.casablanca-account__stat-link {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--acc-line);
    border-radius: var(--casablanca-radius);
    background: var(--casablanca-bg-primary);
    color: var(--casablanca-text-primary);
    text-decoration: none;
}

.casablanca-account__stat-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--acc-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.casablanca-account__stat-value {
    font-family: var(--casablanca-font-secondary);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}

.casablanca-account__latest {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "main chev"
        "side chev";
    align-items: center;
    gap: 6px 12px;
    padding: 14px;
    border: 1px solid var(--acc-line);
    border-radius: var(--casablanca-radius);
    background: var(--casablanca-bg-primary);
    color: var(--casablanca-text-primary);
    text-decoration: none;
}

.casablanca-account__latest-main {
    grid-area: main;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    min-width: 0;
}

.casablanca-account__latest-number {
    font-size: 15px;
    font-weight: 700;
}

.casablanca-account__latest-date {
    font-size: 12.5px;
    color: var(--acc-muted);
}

.casablanca-account__latest-side {
    grid-area: side;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.casablanca-account__latest-total {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.casablanca-account__latest .casablanca-account__chevron {
    grid-area: chev;
}

.casablanca-account__cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.casablanca-account__cards > li {
    display: flex;
    margin: 0;
}

.casablanca-account__card {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--acc-line);
    border-radius: var(--casablanca-radius);
    background: var(--casablanca-bg-primary);
    color: var(--casablanca-text-primary);
    text-decoration: none;
}

.casablanca-account__card-icon {
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--casablanca-radius);
    background: var(--acc-tint);
    color: var(--casablanca-brand);
}

.casablanca-account__card-icon svg {
    width: 19px;
    height: 19px;
}

.casablanca-account__card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.casablanca-account__card-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.casablanca-account__card-text {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--acc-muted);
}

.casablanca-account__card-meta {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--casablanca-brand);
    overflow-wrap: anywhere;
}

@media (min-width: 600px) {
    .casablanca-account__latest {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "main side chev";
        padding: 15px 16px;
    }

    .casablanca-account__latest-side {
        justify-content: flex-end;
    }

    /* auto-fill, so the shortcuts keep their size on a wide screen instead
       of stretching into banners. */
    .casablanca-account__cards {
        grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
        gap: 12px;
    }

    .casablanca-account__card {
        padding: 16px;
    }

    .casablanca-account__stats {
        gap: 12px;
    }

    .casablanca-account__stat-link {
        padding: 14px 16px;
    }
}

/* ── Addresses ────────────────────────────────────────────────────── */

.casablanca-account__addresses {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.casablanca-account__address {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--acc-line);
    border-radius: var(--casablanca-radius);
}

.casablanca-account__address.is-empty {
    border-style: dashed;
    background: var(--acc-surface);
}

.casablanca-account__address-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.casablanca-account__address-icon {
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--casablanca-radius);
    background: var(--acc-tint);
    color: var(--casablanca-brand);
}

.casablanca-account__address-icon svg {
    width: 18px;
    height: 18px;
}

.casablanca-account__address-title {
    margin: 0;
    font-family: var(--casablanca-font-secondary);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.casablanca-account__address-body {
    flex: 1 1 auto;
    margin: 0;
    font-size: 13px;
    font-style: normal;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.casablanca-account__address-empty {
    color: var(--acc-muted);
}

.casablanca-account-entry .casablanca-account__address .button {
    align-self: flex-start;
}

@media (min-width: 600px) {
    .casablanca-account__addresses {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Empty state ──────────────────────────────────────────────────── */

.casablanca-account__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    border: 1px dashed var(--acc-line);
    border-radius: var(--casablanca-radius);
    background: var(--acc-surface);
    text-align: center;
}

.casablanca-account__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 4px;
    border: 1px solid var(--acc-line);
    border-radius: var(--casablanca-radius-circle);
    background: var(--casablanca-bg-primary);
    color: var(--casablanca-brand);
}

.casablanca-account__empty-icon svg {
    width: 20px;
    height: 20px;
}

.casablanca-account__empty-title {
    margin: 0;
    font-family: var(--casablanca-font-secondary);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.casablanca-account__empty-text {
    max-width: 38ch;
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--acc-muted);
}

.casablanca-account-entry .casablanca-account__empty-action {
    margin-top: 8px;
}

/* ── Buttons ──────────────────────────────────────────────────────────
   WooCommerce prints `.button` on the submits and links in these views, and
   its stylesheets are dequeued here, so this one scoped rule owns the look:
   no !important anywhere, and base.css's storefront button contract is left
   to the storefront. Same tokens as that contract, so the two match.
   Contextual sizes (row actions, download buttons) follow in
   account-orders.css and win by source order at equal specificity. */

.casablanca-account-entry .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--ostore-primary);
    border-radius: var(--casablanca-radius);
    background: var(--ostore-primary);
    color: var(--color-bg-white);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.casablanca-account-entry .button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--casablanca-brand) 50%, transparent);
    outline-offset: 2px;
}

/* Secondary: view, cancel, edit an address, pagination. */
.casablanca-account-entry .button.casablanca-account__btn-secondary {
    border-color: var(--acc-line);
    background: var(--casablanca-bg-primary);
    color: var(--casablanca-text-primary);
}

@media (max-width: 767px) {
    .casablanca-account-entry .button {
        min-height: 40px;
        padding: 9px 16px;
        font-size: 13px;
    }
}

/* ── WooCommerce notices ──────────────────────────────────────────────
   WooCommerce's markup, the theme's look: plain text — no box, no ground —
   coloured by kind (error red, success green). role="alert" and every class
   stay WooCommerce's. */

.casablanca-account-entry .woocommerce-notices-wrapper:empty {
    display: none;
}

.casablanca-account-entry :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
    --acc-notice: var(--casablanca-brand);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    border: 0;
    background: none;
    color: var(--acc-notice);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* WooCommerce focuses the notice (tabindex="-1") so screen readers announce
   it; that programmatic focus drew a ring round what is now plain text. It is
   not reachable by Tab, so there is no keyboard focus to lose. */
.casablanca-account-entry :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):focus {
    outline: none;
}

/* The info kind (e.g. "no order yet") reads as body text, not brand-coloured. */
.casablanca-account-entry .woocommerce-info { --acc-notice: var(--casablanca-text-primary); }

.casablanca-account-entry .woocommerce-message { --acc-notice: var(--acc-success); }
.casablanca-account-entry .woocommerce-error { --acc-notice: var(--acc-danger); }

/* An error notice is a <ul> of messages: one per line. */
.casablanca-account-entry .woocommerce-error {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.casablanca-account-entry .woocommerce-error > li {
    margin: 0;
}

.casablanca-account-entry :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.casablanca-account-entry :is(.woocommerce-message, .woocommerce-info) .button {
    order: 2;
    margin-inline-start: auto;
}

/* ── Store notice ─────────────────────────────────────────────────────
   WooCommerce prints it in the footer and woocommerce.js shows it; its only
   styling was the stylesheet dequeued on these pages. */

.woocommerce-store-notice,
p.demo_store {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99998;
    display: none;
    width: 100%;
    margin: 0;
    padding: 10px 16px;
    background: var(--casablanca-brand);
    color: #fff;
    font-size: 13px;
    text-align: center;
}

.woocommerce-store-notice a,
p.demo_store a {
    color: #fff;
    text-decoration: underline;
}

/* ── Reduced motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .casablanca-account-entry *,
    .casablanca-account-entry .button {
        transition: none !important;
    }
}