/* ===========================================
   AWA MOTOS - CONSISTENCY LAYER
   Tema: AYO/Rokanthemes (Home5)

   OBJETIVO:
   Padronizar ritmo visual entre paginas:
   - espacamento
   - tipografia
   - botoes
   - formularios
   - grids e blocos

   CARREGAMENTO:
   Deve ser o ultimo arquivo CSS AWA no head.
=========================================== */

/* ===========================================
   TOKENS DE RITMO
=========================================== */
:root {
    --awa-page-section-gap: var(--awa-space-6);
    --awa-page-section-gap-lg: var(--awa-space-7);
    --awa-control-radius: var(--awa-radius-sm);
}

/* ===========================================
   ESTRUTURA E ESPACAMENTO GLOBAL
=========================================== */
body .page-wrapper .page-main {
    padding-top: var(--awa-space-4);
    padding-bottom: var(--awa-space-7);
}

body .page-wrapper .columns.layout.layout-2-col {
    column-gap: var(--awa-gap);
}

body .page-wrapper .column.main > .page-title-wrapper,
body .page-wrapper .column.main > .toolbar,
body .page-wrapper .column.main > .products.wrapper,
body .page-wrapper .column.main > .block,
body .page-wrapper .column.main > .table-wrapper,
body .page-wrapper .column.main > .fieldset,
body .page-wrapper .column.main > .actions-toolbar {
    margin-bottom: var(--awa-page-section-gap);
}

body .page-wrapper .sidebar .block {
    margin-bottom: var(--awa-page-section-gap);
}

body .page-wrapper .sidebar .block .block-title {
    margin-bottom: var(--awa-space-3);
    padding-bottom: var(--awa-space-2);
    border-bottom: 1px solid var(--awa-gray-200);
}

/* ===========================================
   TIPOGRAFIA UNIFICADA
=========================================== */
body .page-wrapper .page-title-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--awa-space-3);
    flex-wrap: wrap;
    text-align: start;
}

body .page-wrapper .page-title-wrapper .page-title,
body .page-wrapper .page-title-wrapper .base {
    margin: 0;
    font-size: clamp(24px, 2vw, 32px);
    line-height: var(--awa-leading-compact);
    font-weight: var(--awa-weight-bold);
    letter-spacing: var(--awa-tracking-tighter);
    color: var(--awa-dark);
}

body .page-wrapper .block .block-title strong,
body .page-wrapper .block .title strong {
    font-size: var(--awa-text-lg);
    font-weight: var(--awa-weight-bold);
    line-height: var(--awa-leading-base);
    color: var(--awa-dark);
}

body .page-wrapper .toolbar,
body .page-wrapper .toolbar .sorter,
body .page-wrapper .toolbar .limiter,
body .page-wrapper .toolbar .amount {
    font-size: var(--awa-text-sm);
    color: var(--awa-gray-700);
}

/* ===========================================
   BOTOES UNIFICADOS
=========================================== */
body .page-wrapper .action.primary,
body .page-wrapper button.primary,
body .page-wrapper .btn-primary {
    min-height: var(--awa-btn-height);
    border-radius: var(--awa-control-radius);
    font-size: var(--awa-text-sm);
    line-height: var(--awa-leading-none);
    letter-spacing: var(--awa-tracking-normal);
    text-transform: uppercase;
}

body .page-wrapper .action.secondary,
body .page-wrapper button.secondary,
body .page-wrapper .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--awa-btn-height);
    padding: 0 var(--awa-space-6);
    border-radius: var(--awa-control-radius);
    border: 1px solid var(--awa-red);
    background: var(--awa-bg-surface); /* BP-12 */
    color: var(--awa-red);
    font-size: var(--awa-text-sm);
    font-weight: var(--awa-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--awa-tracking-normal);
    transition: border-color var(--awa-transition-fast),
                color var(--awa-transition-fast),
                background var(--awa-transition-fast);
}

body .page-wrapper .action.secondary:hover,
body .page-wrapper button.secondary:hover,
body .page-wrapper .btn-secondary:hover {
    border-color: var(--awa-red-dark);
    color: var(--awa-text-on-primary);
    background: var(--awa-red-dark);
}

body .page-wrapper .action.secondary:focus-visible,
body .page-wrapper button.secondary:focus-visible,
body .page-wrapper .btn-secondary:focus-visible {
    outline: 2px solid var(--awa-red);
    outline-offset: 2px;
}

/* ===========================================
   CONTROLES E FORMULARIOS
=========================================== */
body .page-wrapper input[type="text"],
body .page-wrapper input[type="email"],
body .page-wrapper input[type="password"],
body .page-wrapper input[type="tel"],
body .page-wrapper input[type="number"],
body .page-wrapper input[type="search"],
body .page-wrapper textarea,
body .page-wrapper select {
    border-radius: var(--awa-control-radius);
}

body .page-wrapper .field .label,
body .page-wrapper .fieldset > .legend {
    font-size: var(--awa-text-sm);
    font-weight: var(--awa-weight-semibold);
    color: var(--awa-dark);
}

body .page-wrapper .field .control {
    margin-top: var(--awa-space-2);
}

/* ===========================================
   GRIDS E CARDS
=========================================== */
body .page-wrapper .products-grid .product-items:not(.owl-carousel),
body .page-wrapper .widget-product-grid .product-items:not(.owl-carousel),
body .page-wrapper .block-products-list .product-items:not(.owl-carousel) {
    gap: var(--awa-grid-gap);
}

body .page-wrapper .item-product,
body .page-wrapper .product-item,
body .page-wrapper .cart-summary,
body .page-wrapper .opc-block-summary,
body .page-wrapper .modal-popup .modal-inner-wrap {
    border-radius: var(--awa-control-radius);
}

body .page-wrapper .column.main > .block,
body .page-wrapper .sidebar .block,
body .page-wrapper .cart-summary,
body .page-wrapper .opc-block-summary,
body.customer-account-login .page-wrapper .login-container .block,
body.account .page-wrapper .column.main > .block {
    border: 1px solid var(--awa-gray-200);
    background: var(--awa-bg-surface); /* BP-12 */
    box-shadow: var(--awa-shadow-sm);
}

body .page-wrapper .item-product .product-info,
body .page-wrapper .product-item .product-item-details {
    padding: var(--awa-space-4);
}

/* ===========================================
   TABELAS E LISTAGENS
=========================================== */
body .page-wrapper .table-wrapper table {
    border-radius: var(--awa-control-radius);
    overflow: hidden;
}

body .page-wrapper .table-wrapper th,
body .page-wrapper .table-wrapper td {
    padding: var(--awa-space-3) var(--awa-space-4);
    vertical-align: middle;
}

/* ===========================================
   CATEGORIA E NAVEGACAO DE LISTAGEM
=========================================== */
body.catalog-category-view .page-wrapper .nav-breadcrumbs .breadcrumbs {
    margin-bottom: var(--awa-space-4);
}

body.catalog-category-view .page-wrapper .shop-tab-title {
    margin-bottom: var(--awa-space-4);
}

body.catalog-category-view .page-wrapper .toolbar.toolbar-products {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--awa-space-3);
    flex-wrap: wrap;
    padding: var(--awa-space-3) var(--awa-space-4);
    border: 1px solid var(--awa-gray-200);
    border-radius: var(--awa-control-radius);
    background: var(--awa-bg-surface); /* BP-12 */
}

body.catalog-category-view .page-wrapper .toolbar .sorter-options,
body.catalog-category-view .page-wrapper .toolbar .limiter-options {
    min-height: var(--awa-input-height-sm);
    padding-inline: var(--awa-space-3);
    border-radius: var(--awa-control-radius);
    border: 1px solid var(--awa-gray-300);
    background-color: var(--awa-bg-surface); /* BP-12 */
}

body.catalog-category-view .page-wrapper .toolbar .modes-mode,
body.catalog-category-view .page-wrapper .toolbar .modes-mode span {
    font-size: var(--awa-text-sm);
}

body.catalog-category-view .page-wrapper .grid-mode-show-type-products a {
    min-width: 36px;
    min-height: 36px;
    border-radius: var(--awa-control-radius);
    border: 1px solid var(--awa-gray-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.catalog-category-view .page-wrapper .grid-mode-show-type-products a:hover {
    border-color: var(--awa-red-dark);
    color: var(--awa-red-dark);
    background: var(--awa-red-extra-light);
}

body.catalog-category-view .page-wrapper .grid-mode-show-type-products a.actived {
    border-color: var(--awa-red);
    background: var(--awa-red);
    color: var(--awa-text-on-primary);
}

body.catalog-category-view .page-wrapper .sidebar-main-1 .block.filter {
    border: 1px solid var(--awa-gray-200);
    border-radius: var(--awa-control-radius);
    background: var(--awa-bg-surface); /* BP-12 */
    padding: var(--awa-space-3);
}

body.catalog-category-view .page-wrapper .sidebar-main-1 .filter-options-item {
    border-bottom: 1px solid var(--awa-gray-200);
    padding-bottom: var(--awa-space-3);
    margin-bottom: var(--awa-space-3);
}

body.catalog-category-view .page-wrapper .sidebar-main-1 .filter-options-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

body.catalog-category-view .page-wrapper .sidebar-main-1 .filter-options-title {
    font-size: var(--awa-text-sm);
    font-weight: var(--awa-weight-bold);
    color: var(--awa-dark);
    text-transform: uppercase;
    letter-spacing: var(--awa-tracking-normal);
}

body.page-layout-2columns-left .page-wrapper .columns.layout.layout-2-col > .sidebar-main-1,
body.page-layout-2columns-left .page-wrapper .columns.layout.layout-2-col > .sidebar-main {
    order: 1;
    margin-right: 30px;
    margin-left: 0;
}

body.page-layout-2columns-left .page-wrapper .columns.layout.layout-2-col > .col-main,
body.page-layout-2columns-left .page-wrapper .columns.layout.layout-2-col > .column.main {
    order: 2;
}

body.page-layout-2columns-right .page-wrapper .columns.layout.layout-2-col > .sidebar-main-1,
body.page-layout-2columns-right .page-wrapper .columns.layout.layout-2-col > .sidebar-main {
    order: 2;
    margin-left: 30px;
    margin-right: 0;
}

body.page-layout-2columns-right .page-wrapper .columns.layout.layout-2-col > .col-main,
body.page-layout-2columns-right .page-wrapper .columns.layout.layout-2-col > .column.main {
    order: 1;
}

/* ===========================================
   HEADER TOP-ACCOUNT / SIDEBAR
=========================================== */
body .page-wrapper .top-header {
    /* Tokens locais: reduz duplicação entre breakpoints */
    --awa-top-account-links-gap: var(--awa-space-2);
    --awa-top-account-link-min-height: 34px;
    --awa-top-account-link-padding-inline: var(--awa-space-3);
}

body .page-wrapper .top-header .top-bar-right,
body .page-wrapper .top-header .top-info,
body .page-wrapper .top-header .top-account {
    display: flex;
    align-items: center;
}

body .page-wrapper .top-header .top-account ul.header.links {
    gap: var(--awa-top-account-links-gap);
}

body .page-wrapper .top-header .top-account ul.header.links li {
    margin: 0;
    line-height: var(--awa-leading-none);
    display: inline-flex;
    align-items: center;
}

body .page-wrapper .top-header .top-account ul.header.links li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--awa-top-account-link-min-height);
    padding: 0 var(--awa-top-account-link-padding-inline);
    border: 0;
    border-radius: var(--awa-control-radius);
    color: var(--awa-gray-700);
    font-size: var(--awa-text-xs);
    line-height: var(--awa-leading-compact);
    text-decoration: none;
    transition: color var(--awa-transition-fast), background var(--awa-transition-fast);
}

body .page-wrapper .top-header .top-account ul.header.links li > a:hover {
    background: var(--awa-red-extra-light);
    color: var(--awa-red-dark);
}

body .page-wrapper .top-header .top-account ul.header.links li > a:focus-visible {
    outline: 2px solid var(--awa-red);
    outline-offset: 2px;
}

body .page-wrapper .columns .sidebar-main {
    min-width: 240px;
}

body .page-wrapper .sidebar-main .block {
    border-radius: var(--awa-control-radius);
}

body .page-wrapper .sidebar-main .block.filter .filter-options-title {
    min-height: 36px;
    display: flex;
    align-items: center;
}

/* ===========================================
   LOGIN E CONTA
=========================================== */
body.customer-account-login .page-wrapper .login-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--awa-gap);
    align-items: stretch;
}

body.customer-account-login .page-wrapper .login-container .block {
    margin: 0;
    border: 1px solid var(--awa-gray-200);
    border-radius: var(--awa-control-radius);
    background: var(--awa-bg-surface); /* BP-12 */
    padding: var(--awa-space-5);
    box-shadow: var(--awa-shadow-sm);
}

body.customer-account-login .page-wrapper .login-container .block-title {
    margin-bottom: var(--awa-space-4);
}

body.customer-account-login .page-wrapper .login-container .actions-toolbar {
    margin-top: var(--awa-space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--awa-space-3);
    flex-wrap: wrap;
}

body.account .page-wrapper .column.main > .block {
    border: 1px solid var(--awa-gray-200);
    border-radius: var(--awa-control-radius);
    background: var(--awa-bg-surface); /* BP-12 */
    padding: var(--awa-space-4);
}

/* ===========================================
   CARRINHO
=========================================== */
body.checkout-cart-index .page-wrapper .cart-empty,
body.checkout-cart-index .page-wrapper .cart-summary,
body.checkout-cart-index .page-wrapper .cart.table-wrapper {
    border: 1px solid var(--awa-gray-200);
    border-radius: var(--awa-control-radius);
    background: var(--awa-bg-surface); /* BP-12 */
}

body.checkout-cart-index .page-wrapper .cart-empty {
    padding: var(--awa-space-7);
}

body.checkout-cart-index .page-wrapper .cart-empty p {
    margin-bottom: var(--awa-space-3);
}

body.checkout-cart-index .page-wrapper .cart-empty a {
    font-weight: var(--awa-weight-semibold);
}

/* ===========================================
   RESPONSIVO
=========================================== */
@media (width <= 991px) {
    :root {
        --awa-page-section-gap: var(--awa-space-5);
    }

    body .page-wrapper .top-header {
        --awa-top-account-links-gap: var(--awa-space-1);
        --awa-top-account-link-min-height: 32px;
        --awa-top-account-link-padding-inline: var(--awa-space-2);
    }

    body .page-wrapper .columns.layout.layout-2-col {
        column-gap: var(--awa-space-4);
    }

    body.customer-account-login .page-wrapper .login-container {
        grid-template-columns: 1fr;
    }

    body .page-wrapper .top-header .top-account ul.header.links {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    body.page-layout-2columns-left .page-wrapper .columns.layout.layout-2-col > .sidebar-main-1,
    body.page-layout-2columns-left .page-wrapper .columns.layout.layout-2-col > .sidebar-main,
    body.page-layout-2columns-right .page-wrapper .columns.layout.layout-2-col > .sidebar-main-1,
    body.page-layout-2columns-right .page-wrapper .columns.layout.layout-2-col > .sidebar-main {
        margin-left: 0;
        margin-right: 0;
    }

    body .page-wrapper .columns .sidebar-main {
        min-width: 0;
    }

    body .page-wrapper .block-search .search-content.cat-search .field-by-cat-search {
        flex-basis: 150px;
        max-width: 150px;
    }

    body .page-wrapper .page-title-wrapper .page-title,
    body .page-wrapper .page-title-wrapper .base {
        font-size: clamp(22px, 4.5vw, 28px);
    }
}

@media (width <= 768px) {
    body .page-wrapper .page-main {
        padding-top: var(--awa-space-3);
        padding-bottom: var(--awa-space-6);
    }

    body .page-wrapper .action.primary,
    body .page-wrapper button.primary,
    body .page-wrapper .btn-primary,
    body .page-wrapper .action.secondary,
    body .page-wrapper button.secondary,
    body .page-wrapper .btn-secondary {
        min-height: var(--awa-btn-height-sm);
        padding-inline: var(--awa-space-4);
    }

    body .page-wrapper .item-product .product-info,
    body .page-wrapper .product-item .product-item-details {
        padding: var(--awa-space-3);
    }

    body .page-wrapper #maincontent .page-title-wrapper {
        margin-bottom: var(--awa-space-4);
        padding-bottom: var(--awa-space-2);
    }

    body .page-wrapper .block-search .search-content.cat-search .field-by-cat-search {
        display: none;
    }

    body .page-wrapper .top-header .top-bar-right {
        justify-content: center;
    }

    body .page-wrapper .top-header .top-account ul.header.links {
        justify-content: center;
    }

    body .page-wrapper .block-search .search-content.cat-search .field.search input#search {
        padding-left: var(--awa-space-3);
    }

    body.catalog-category-view .page-wrapper .toolbar.toolbar-products {
        padding: var(--awa-space-3);
    }

    body.catalog-category-view .page-wrapper .toolbar.toolbar-products .field.limiter {
        width: auto;
    }

    body.customer-account-login .page-wrapper .login-container .block {
        padding: var(--awa-space-4);
    }
}

/* ===========================================
   BREADCRUMBS — OVERFLOW MOBILE
   Nomes de categorias longos podem causar scroll horizontal.
   Solução: flex-wrap + text-overflow em itens individuais.
=========================================== */
body .page-wrapper .breadcrumbs {
    overflow: hidden;
}

body .page-wrapper .breadcrumbs .items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--awa-space-1);
    align-items: center;
    padding: var(--awa-space-2) 0;
    list-style: none;
    margin: 0;
}

body .page-wrapper .breadcrumbs .items li {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

body .page-wrapper .breadcrumbs .items li a,
body .page-wrapper .breadcrumbs .items li strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

@media (width <= 480px) {
    body .page-wrapper .breadcrumbs .items li a,
    body .page-wrapper .breadcrumbs .items li strong {
        max-width: 140px;
        font-size: var(--awa-text-xs);
    }

    body .page-wrapper .page-products .toolbar-products {
        flex-direction: column;
        align-items: stretch;
        gap: var(--awa-space-2);
    }

    body .page-wrapper .toolbar-products .toolbar-amount {
        text-align: center;
        font-size: var(--awa-text-xs);
    }

    body .page-wrapper .toolbar-products .sorter {
        display: flex;
        align-items: center;
        gap: var(--awa-space-2);
        justify-content: center;
    }

    body .page-wrapper .toolbar-products .modes {
        display: none;
    }

    body .page-wrapper .toolbar-products .limiter {
        display: none;
    }

    body .page-wrapper .pages .items.pages-items .item a,
    body .page-wrapper .pages .items.pages-items .item strong {
        min-width: 32px;
        height: 32px;
        font-size: var(--awa-text-xs);
    }
}

/* ===========================================
   TOOLBAR MOBILE (< 480px)
   Toolbar de categoria/listagem empilha em mobile pequeno.
=========================================== */

/* ===========================================
   PAGINAÇÃO — STYLING CONSISTENTE
   Magento usa .pages .items.pages-items com .item como LI.
=========================================== */
body .page-wrapper .pages {
    margin-top: var(--awa-space-6);
    text-align: center;
}

body .page-wrapper .pages .items.pages-items {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--awa-space-1);
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

body .page-wrapper .pages .items.pages-items .item {
    display: inline-flex;
}

body .page-wrapper .pages .items.pages-items .item a,
body .page-wrapper .pages .items.pages-items .item strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--awa-space-2);
    border-radius: var(--awa-radius-sm);
    border: 1px solid var(--awa-gray-200);
    background: var(--awa-bg-surface); /* BP-12 */
    color: var(--awa-gray-700);
    font-size: var(--awa-text-sm);
    text-decoration: none;
    transition: background var(--awa-transition),
                color var(--awa-transition),
                border-color var(--awa-transition);
}

body .page-wrapper .pages .items.pages-items .item a:hover {
    background: var(--awa-gray-100);
    border-color: var(--awa-gray-300);
    color: var(--awa-dark);
}

body .page-wrapper .pages .items.pages-items .item.current strong {
    background: var(--awa-red);
    color: var(--awa-text-on-primary);
    border-color: var(--awa-red);
    font-weight: var(--awa-weight-bold);
}

body .page-wrapper .pages .items.pages-items .item .action.next,
body .page-wrapper .pages .items.pages-items .item .action.previous {
    font-size: 0;
    position: relative;
}

body .page-wrapper .pages .items.pages-items .item .action.next::before {
    content: "\f105";
    font-family: FontAwesome, 'Font Awesome 5 Free', sans-serif;
    font-size: var(--awa-text-base);
    font-weight: var(--awa-weight-black);
}

body .page-wrapper .pages .items.pages-items .item .action.previous::before {
    content: "\f104";
    font-family: FontAwesome, 'Font Awesome 5 Free', sans-serif;
    font-size: var(--awa-text-base);
    font-weight: var(--awa-weight-black);
}

/* ===========================================
   OWL CAROUSEL CONTAINMENT (Performance)
   Reduz reflows em carrosséis com CSS containment.
=========================================== */
body .page-wrapper .owl-carousel {
    contain: layout style;
}

body .page-wrapper .owl-carousel .owl-wrapper-outer,
body .page-wrapper .owl-carousel .owl-stage-outer {
    contain: layout style paint;
}