/* AWA Global Polish — remaining UI gaps
   Scope: breadcrumbs, customer account, messages, CMS content, data tables.
   B2B-safe: no overrides to restricted/auth modes. */

/* ================================================
   1. BREADCRUMBS
   ================================================ */
.nav-breadcrumbs {
    margin-bottom: 6px;
}

.breadcrumbs {
    padding: 10px 0;
}

.breadcrumbs .items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
}

.breadcrumbs .item {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.breadcrumbs .item:not(:last-child)::after {
    content: '/';
    display: inline-block;
    margin: 0 8px;
    color: #94a3b8;
    font-weight: 400;
}

.breadcrumbs .item a {
    color: #475569;
    font-weight: 500;
}

.breadcrumbs .item strong {
    color: #1f2937;
    font-weight: 600;
}

/* ================================================
   2. GLOBAL MESSAGES
   ================================================ */
body .page-wrapper .page.messages {
    margin-bottom: 12px;
}

body .page-wrapper .message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.45;
}

body .page-wrapper .message.success {
    background: rgb(34 197 94 / 6%);
    border: 1px solid rgb(34 197 94 / 18%);
    color: #166534;
}

body .page-wrapper .message.error {
    background: rgb(239 68 68 / 6%);
    border: 1px solid rgb(239 68 68 / 18%);
    color: #991b1b;
}

body .page-wrapper .message.warning {
    background: rgb(245 158 11 / 6%);
    border: 1px solid rgb(245 158 11 / 18%);
    color: #92400e;
}

body .page-wrapper .message.notice,
body .page-wrapper .message.info {
    background: rgb(59 130 246 / 6%);
    border: 1px solid rgb(59 130 246 / 14%);
    color: #1e40af;
}

body .page-wrapper .message > :first-child::before {
    flex-shrink: 0;
}

body .page-wrapper .message a {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

/* ================================================
   3. CUSTOMER ACCOUNT PAGES
   ================================================ */

/* Account sidebar navigation */
body.account .sidebar-main .block-collapsible-nav {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgb(15 23 42 / 4%);
    overflow: clip;
}

body.account .sidebar-main .block-collapsible-nav .title {
    display: none;
}

body.account .sidebar-main .block-collapsible-nav .content {
    padding: 0;
}

body.account .sidebar-main .block-collapsible-nav .nav.items {
    padding: 8px 0;
}

body.account .sidebar-main .block-collapsible-nav .nav.item {
    margin: 0;
}

body.account .sidebar-main .block-collapsible-nav .nav.item a,
body.account .sidebar-main .block-collapsible-nav .nav.item > strong {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 16px;
    color: #334155;
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body.account .sidebar-main .block-collapsible-nav .nav.item a:hover,
body.account .sidebar-main .block-collapsible-nav .nav.item a:focus-visible {
    background: rgb(183 51 55 / 4%);
    color: var(--primary-color, #b73337);
    border-left-color: rgb(183 51 55 / 20%);
    outline: 0;
}

body.account .sidebar-main .block-collapsible-nav .nav.item.current a,
body.account .sidebar-main .block-collapsible-nav .nav.item.current > strong {
    background: rgb(183 51 55 / 6%);
    color: var(--primary-color, #b73337);
    font-weight: 700;
    border-left-color: var(--primary-color, #b73337);
}

/* Account page content containers */
body.account .column.main .block {
    margin-bottom: 20px;
}

body.account .column.main .block-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
}

body.account .column.main .block-title strong {
    color: #1f2937;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

body.account .column.main .block-title .action {
    color: var(--primary-color, #b73337);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

body.account .column.main .block-title .action:hover,
body.account .column.main .block-title .action:focus-visible {
    color: var(--primary-hover, #8e2629);
    text-decoration: underline;
    outline: 0;
}

/* Account info boxes (dashboard) */
body.account .column.main .box {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    padding: 14px 16px;
    margin-bottom: 12px;
}

body.account .column.main .box-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

body.account .column.main .box-title > span {
    color: #334155;
    font-weight: 700;
    font-size: 14px;
}

body.account .column.main .box-title .action {
    color: var(--primary-color, #b73337);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

body.account .column.main .box-title .action:hover,
body.account .column.main .box-title .action:focus-visible {
    text-decoration: underline;
    outline: 0;
}

body.account .column.main .box-content {
    color: #475569;
    font-size: 14px;
    line-height: 1.55;
}

body.account .column.main .box-content address {
    font-style: normal;
}

body.account .column.main .box-actions a {
    color: var(--primary-color, #b73337);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

body.account .column.main .box-actions a:hover,
body.account .column.main .box-actions a:focus-visible {
    text-decoration: underline;
    outline: 0;
}

/* ================================================
   4. DATA TABLES (orders, address book, etc.)
   ================================================ */
body.account .table-wrapper {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: clip;
    background: #fff;
    box-shadow: 0 2px 8px rgb(15 23 42 / 3%);
}

body.account .table-wrapper .data.table {
    margin: 0;
}

body.account .table-wrapper .data.table thead th {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 10px 14px;
    white-space: nowrap;
}

body.account .table-wrapper .data.table tbody td {
    padding: 12px 14px;
    color: #475569;
    font-size: 14px;
    line-height: 1.4;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

body.account .table-wrapper .data.table tbody tr:last-child td {
    border-bottom: 0;
}

body.account .table-wrapper .data.table tbody tr:hover td {
    background: rgb(183 51 55 / 2%);
}

body.account .table-wrapper .data.table .col.actions a {
    color: var(--primary-color, #b73337);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

body.account .table-wrapper .data.table .col.actions a:hover,
body.account .table-wrapper .data.table .col.actions a:focus-visible {
    text-decoration: underline;
    outline: 0;
}

/* Empty table state */
body.account .message.info.empty {
    text-align: center;
    padding: 24px 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 14px;
}

/* Account page actions toolbar */
body.account .actions-toolbar {
    margin-top: 16px;
}

body.account .actions-toolbar .action.back {
    color: #475569;
    font-weight: 600;
    text-decoration: none;
}

body.account .actions-toolbar .action.back:hover,
body.account .actions-toolbar .action.back:focus-visible {
    color: var(--primary-color, #b73337);
    outline: 0;
}

/* ================================================
   5. CMS CONTENT PAGES
   ================================================ */
body.cms-page-view .column.main {
    color: #334155;
    line-height: 1.65;
}

body.cms-page-view .column.main h1,
body.cms-page-view .column.main h2,
body.cms-page-view .column.main h3,
body.cms-page-view .column.main h4 {
    color: #1f2937;
    line-height: 1.25;
    margin-top: 1.4em;
    margin-bottom: 0.6em;
}

body.cms-page-view .column.main h1 {
    font-size: clamp(24px, 3.5vw, 32px);
    font-weight: 800;
    letter-spacing: -0.02em;
}

body.cms-page-view .column.main h2 {
    font-size: clamp(20px, 2.8vw, 26px);
    font-weight: 700;
    letter-spacing: -0.01em;
}

body.cms-page-view .column.main h3 {
    font-size: clamp(17px, 2.2vw, 21px);
    font-weight: 700;
}

body.cms-page-view .column.main p {
    margin-bottom: 1em;
}

body.cms-page-view .column.main ul,
body.cms-page-view .column.main ol {
    padding-left: 1.5em;
    margin-bottom: 1em;
}

body.cms-page-view .column.main li {
    margin-bottom: 0.35em;
}

body.cms-page-view .column.main a {
    color: var(--primary-color, #b73337);
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.14em;
}

body.cms-page-view .column.main a:hover {
    color: var(--primary-hover, #8e2629);
}

body.cms-page-view .column.main img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

body.cms-page-view .column.main table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: clip;
}

body.cms-page-view .column.main table th {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 12px;
    font-weight: 700;
    color: #334155;
    text-align: left;
}

body.cms-page-view .column.main table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
}

body.cms-page-view .column.main table tr:last-child td {
    border-bottom: 0;
}

body.cms-page-view .column.main blockquote {
    border-left: 4px solid rgb(183 51 55 / 30%);
    padding: 12px 16px;
    margin: 1em 0;
    background: rgb(183 51 55 / 3%);
    border-radius: 0 10px 10px 0;
    color: #334155;
    font-style: italic;
}

/* ================================================
   6. RESPONSIVE
   ================================================ */
@media (width <= 991px) {
    body.account .sidebar-main .block-collapsible-nav {
        border-radius: 12px;
    }

    body.account .column.main .box {
        border-radius: 10px;
    }

    body.account .table-wrapper {
        border-radius: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (width <= 767px) {
    .breadcrumbs {
        padding: 8px 0;
    }

    .breadcrumbs .items {
        font-size: 12px;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

    .breadcrumbs .items::-webkit-scrollbar {
        display: none;
    }

    .breadcrumbs .item {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .breadcrumbs .item:not(:last-child)::after {
        margin: 0 6px;
    }

    body.account .sidebar-main .block-collapsible-nav .nav.item a,
    body.account .sidebar-main .block-collapsible-nav .nav.item > strong {
        padding: 8px 14px;
        font-size: 13px;
    }

    body.account .column.main .block-title strong {
        font-size: 16px;
    }

    body.account .column.main .box {
        padding: 12px 14px;
    }

    body.account .table-wrapper .data.table thead th {
        padding: 8px 10px;
        font-size: 11px;
    }

    body.account .table-wrapper .data.table tbody td {
        padding: 10px;
        font-size: 13px;
    }

    body.cms-page-view .column.main {
        font-size: 15px;
    }
}

/* ================================================
   7. REDUCED MOTION
   ================================================ */
@media (prefers-reduced-motion: reduce) {
    body.account .sidebar-main .block-collapsible-nav .nav.item a {
        transition: none;
    }
}

/* ================================================
   8. FOOTER PAYMENT ICONS
   ================================================ */
/* B2B Payment Icons Monochromatic Filter */
.footer-payments-list img,
.payment-methods img,
.footer-col-pay img,
.footer-payment img,
.footer .payment img {
    filter: grayscale(100%) opacity(0.7);
    transition: filter 0.3s ease;
}
.footer-payments-list img:hover,
.payment-methods img:hover,
.footer-col-pay img:hover,
.footer-payment img:hover,
.footer .payment img:hover {
    filter: grayscale(0%) opacity(1);
}