/* ============================================================
   AWA B2B — FASE 5.1: Incremental UI/UX Polish (2026)
   Foco: Tipografia complementar, Espaçamentos, Interações Suaves
   ============================================================ */

/* 1. Global Typography & Spacing Polish */
body.awa-ds {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 2. Form & Inputs Focus Rings (Safe Enhancements) */
body.awa-ds .awa-ds-form-control:focus,
body.awa-ds .awa-ds-form-control:focus-visible,
main.page-main input[type="text"]:focus,
main.page-main input[type="password"]:focus,
main.page-main input[type="email"]:focus,
main.page-main input[type="number"]:focus,
main.page-main select:focus,
main.page-main textarea:focus {
    outline: none !important;
    border-color: var(--awa-color-primary, #b73337) !important;
    box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.15) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 3. Button Micro-Interactions (Hover/Active states) */
main.page-main button.action.primary,
main.page-main a.action.primary,
body.awa-ds .awa-ds-btn--primary {
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    will-change: transform, box-shadow;
}

main.page-main button.action.primary:hover,
main.page-main a.action.primary:hover,
body.awa-ds .awa-ds-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(183, 51, 55, 0.2);
}

main.page-main button.action.primary:active,
main.page-main a.action.primary:active,
body.awa-ds .awa-ds-btn--primary:active {
    transform: scale(0.98);
}

main.page-main button.action.secondary,
body.awa-ds .awa-ds-btn--secondary {
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.15s ease !important;
}

main.page-main button.action.secondary:hover,
body.awa-ds .awa-ds-btn--secondary:hover {
    transform: translateY(-1px);
}

/* 4. Product Cards Polish (Home & PLP) */
/* Modern elevate effect without layout shift */
.products-grid .product-item-info,
.owl-carousel .product-item-info {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform, box-shadow;
    border-radius: var(--awa-radius-md, 10px);
}

.products-grid .product-item-info:hover,
.owl-carousel .product-item-info:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.1) !important;
    z-index: 9; /* Elevate above siblings */
}

/* Smooth Image Scale on Hover */
.product-item-info .product-image-container {
    overflow: hidden;
    border-radius: var(--awa-radius-md, 10px) var(--awa-radius-md, 10px) 0 0;
}

.product-item-info .product-image-photo {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-item-info:hover .product-image-photo {
    transform: scale(1.05);
}

/* 5. Minicart & Header Refinements */
.minicart-wrapper .action.showcart {
    transition: transform 0.15s ease, opacity 0.2s ease;
}

.minicart-wrapper .action.showcart:hover {
    transform: scale(1.05);
}

/* 6. Checkout & Login Layout Consistency */
.checkout-index-index .opc-wrapper .step-title,
.customer-account-login .block-title {
    margin-bottom: var(--awa-space-4, 16px);
    border-bottom: 2px solid var(--awa-color-border, #e5e5e5);
    padding-bottom: var(--awa-space-2, 8px);
}

/* 7. Accessibility (Prefers Reduced Motion Check) */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        transform: none !important;
    }
}

/* 8. Typography Scale & Readability Polish */
body.awa-ds {
    line-height: var(--awa-line-height-base, 1.6);
    color: var(--awa-color-text-primary, #333);
}

body.awa-ds h1, 
body.awa-ds .page-title {
    line-height: var(--awa-line-height-tight, 1.2);
    letter-spacing: -0.02em;
    font-weight: 700;
}

body.awa-ds h2, body.awa-ds h3, 
body.awa-ds .block-title strong {
    line-height: var(--awa-line-height-compact, 1.3);
    letter-spacing: -0.01em;
}

body.awa-ds p {
    margin-bottom: var(--awa-space-4, 16px);
}

/* 9. Critical Interactions & Cursors */
.products-grid .product-item-info,
.owl-carousel .product-item-info,
.awa-ds-card,
.minicart-wrapper .action.showcart {
    cursor: pointer !important;
}

/* 10. Responsive Layout Adjustments (Mobile Polish) */
@media (max-width: 768px) {
    /* Improve touch targets for mobile */
    main.page-main button,
    main.page-main .action {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.awa-ds .page-wrapper .page-main.container {
        padding-inline: var(--awa-space-3, 12px);
    }

    /* Reduce aggressive elevations on mobile to save paint performance */
    .products-grid .product-item-info:hover,
    .owl-carousel .product-item-info:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 16px rgba(17, 24, 39, 0.08) !important;
    }

    /* Ensure form fields are inherently larger on mobile to avoid iOS zoom */
    body.awa-ds .awa-ds-form-control,
    main.page-main input[type="text"],
    main.page-main input[type="password"],
    main.page-main input[type="email"],
    main.page-main input[type="number"],
    main.page-main select {
        font-size: 16px !important;
        padding: 10px 12px;
    }
}

/* ============================================================
   11. Header Mega Menu & Dropdown Polish
   ============================================================ */
.navigation .level0 .submenu {
    border: 1px solid var(--awa-color-border, #e5e5e5) !important;
    border-radius: var(--awa-radius-md, 10px) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important;
    padding: var(--awa-space-4, 16px) !important;
    margin-top: 4px;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.navigation .level0 .submenu a:hover {
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 4px;
    text-decoration: none !important;
}

/* 12. Search Autocomplete Polish */
.search-autocomplete {
    border-radius: var(--awa-radius-md, 10px) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid var(--awa-color-border, #e5e5e5) !important;
    overflow: hidden;
    margin-top: 8px;
}

.search-autocomplete li:hover,
.search-autocomplete li.selected {
    background-color: rgba(183, 51, 55, 0.04) !important;
}

/* 13. Shopping Cart & Checkout Polish */
.cart-summary {
    background: #f8fafc !important; /* Tailwind slate-50 */
    border: 1px solid #e2e8f0 !important; /* Tailwind slate-200 */
    border-radius: var(--awa-radius-md, 10px);
    padding: var(--awa-space-6, 24px) !important;
}

.cart-summary .checkout-methods-items .action.primary.checkout {
    width: 100%;
    margin-top: 16px;
    font-size: 16px;
    padding: 14px 24px;
}

/* Distinct ghost button for Update Cart */
.cart.actions .action.update {
    background: transparent !important;
    border: 1px solid var(--awa-color-border, #e5e5e5) !important;
    color: var(--awa-color-text-primary, #333) !important;
}

.cart.actions .action.update:hover {
    background: #f1f5f9 !important; /* Tailwind slate-100 */
    border-color: #cbd5e1 !important; /* Tailwind slate-300 */
}

/* 14. PDP Layout Alignment Polish */
.product-info-main .box-tocart {
    margin-bottom: var(--awa-space-6, 24px) !important;
}

/* Align Trust Badges injected below Cart */
.product-info-main .awa-trust-badges {
    margin-top: 0; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    border: 1px dashed #cbd5e1; /* Subtle dash to contrast with solid cart outline */
    background: #ffffff;
}

/* ============================================================
   15. Mini-Cart Dropdown Polish
   ============================================================ */
.block-minicart {
    border-radius: var(--awa-radius-lg, 12px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid var(--awa-color-border, #e5e5e5) !important;
    padding: 0 !important;
    overflow: hidden;
}

.block-minicart .minicart-items-wrapper {
    padding: var(--awa-space-4, 16px) !important;
    max-height: 350px;
    overflow-y: auto;
}

/* Custom Webkit Scrollbar for Minicart */
.block-minicart .minicart-items-wrapper::-webkit-scrollbar {
    width: 6px;
}
.block-minicart .minicart-items-wrapper::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}
.block-minicart .minicart-items-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.block-minicart .minicart-items-wrapper::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Sticky Footer inside Minicart */
.block-minicart .actions,
.block-minicart .subtotal {
    background: #f8fafc;
    border-top: 1px solid var(--awa-color-border, #e5e5e5);
    padding: 16px 20px !important;
    margin: 0 !important;
}

.block-minicart .product-image-photo {
    border-radius: 6px;
    border: 1px solid #f1f5f9;
}

/* 16. Form Micro-Interactions (B2B) */
.form-group:focus-within label,
.field:focus-within .label {
    color: var(--awa-color-primary, #b73337) !important;
    transition: color 0.2s ease;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--awa-color-primary, #b73337);
    cursor: pointer;
    transition: transform 0.2s ease;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
    transform: scale(1.1);
}

/* 17. Layered Navigation (PLP Filters) Polish */
.filter-current .items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-current .item {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 9999px; /* Pill shape */
    padding: 4px 12px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
}

.filter-current .item .action.remove {
    margin-left: 8px;
    color: #64748b;
}

.filter-current .item .action.remove:hover {
    color: var(--awa-color-primary, #b73337);
}

.filter-actions .action.clear {
    color: #dc2626; /* Tailwind Red 600 */
    background: transparent;
    padding: 4px 0;
    font-weight: 500;
}
.filter-actions .action.clear:hover {
    text-decoration: underline;
}

/* 18. Toast Notifications (System Messages) */
.page.messages .messages {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page.messages .message {
    padding: 16px 20px !important;
    border-radius: var(--awa-radius-md, 10px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    display: flex;
    align-items: flex-start;
    border-left-width: 4px !important;
    border-left-style: solid !important;
}

.page.messages .message-success {
    background-color: #f0fdf4 !important; /* bg-green-50 */
    border-left-color: #22c55e !important; /* border-green-500 */
    color: #166534 !important; /* text-green-800 */
}

.page.messages .message-error {
    background-color: #fef2f2 !important; /* bg-red-50 */
    border-left-color: #ef4444 !important; /* border-red-500 */
    color: #991b1b !important; /* text-red-800 */
}

.page.messages .message-warning,
.page.messages .message-notice {
    background-color: #fefce8 !important; /* bg-yellow-50 */
    border-left-color: #eab308 !important; /* border-yellow-500 */
    color: #854d0e !important; /* text-yellow-800 */
}

@keyframes slideInRight {
    0% { transform: translateX(110%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

/* ============================================================
   19. Phase 5: Core Web Vitals (CLS Bounding Boxes)
   ============================================================ */
/* Hero Slider Container Constraint to prevent layout shift before initialization */
.rokanthemes-slide-banner {
    min-height: 760px; /* Desktop aspect ratio lock */
    background-color: #f8fafc; /* Placeholder skeleton color while images load */
    display: block;
    width: 100%;
    overflow: hidden;
}

@media (max-width: 767px) {
    .rokanthemes-slide-banner {
        min-height: 380px; /* Mobile aspect ratio lock */
    }
}

/* Category Tab and Product Sliders Constraint */
.category-tab-container,
.rokan-product-slider {
    min-height: 400px; 
    contain: layout paint;
}

/* ============================================================
   20. Phase 6: Deep Component Polish & Micro-Animations
   ============================================================ */

/* Breadcrumbs Modernization */
.breadcrumbs {
    margin-bottom: 24px;
    font-size: 13px;
    color: #64748b;
}

.breadcrumbs .items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.breadcrumbs .item:not(:last-child)::after {
    content: '\203A'; /* Chevron symbol instead of slash */
    margin-left: 8px;
    font-size: 16px;
    color: #cbd5e1;
    position: relative;
    top: 1px;
}

.breadcrumbs .item.current {
    font-weight: 600;
    color: #0f172a;
}
.breadcrumbs .item a:hover {
    color: var(--awa-color-primary, #b73337);
    text-decoration: underline;
}

/* Elegant Underline Hover Array for standard links (Footer/Menus) */
.footer-links a,
.cms-links a {
    position: relative;
    display: inline-block;
}

.footer-links a::after,
.cms-links a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--awa-color-primary, #b73337);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.footer-links a:hover::after,
.cms-links a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Back-To-Top Button Modernization */
#back-top {
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background-color: var(--awa-color-primary, #b73337) !important;
    color: #fff !important;
    bottom: 30px !important;
    right: 30px !important;
}

#back-top:hover {
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 0 15px 35px rgba(183,51,55,0.3) !important;
    background-color: #9f2a2e !important;
}

/* Empty States (Cart, Search Results) */
.cart-empty,
.message.notice.empty {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: var(--awa-radius-lg, 12px);
    padding: 60px 20px;
    text-align: center;
    color: #475569;
    font-size: 15px;
    max-width: 600px;
    margin: 40px auto;
}

.cart-empty > p {
    margin-bottom: 24px;
}

/* ============================================================
   21. Phase 7: Homepage Layout & Banner Polish (Vertical Rhythm)
   ============================================================ */

/* Primary Section Spacing (Vertical Rhythm) */
.cms-index-index .page-main > .columns > .column.main > * {
    margin-bottom: var(--awa-space-12, 64px);
}
@media (max-width: 767px) {
    .cms-index-index .page-main > .columns > .column.main > * {
        margin-bottom: var(--awa-space-8, 32px);
    }
}

/* Promo Banners & Images constraints */
.cms-index-index .banner-image img,
.cms-index-index .promo-banner img {
    border-radius: var(--awa-radius-lg, 12px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.cms-index-index .banner-image:hover img,
.cms-index-index .promo-banner:hover img {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 16px 32px rgba(0,0,0,0.1);
}

/* Section Headings Standardization */
.rokan-product-heading .title,
.block-title.title {
    font-size: 28px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -0.5px;
    color: #0f172a;
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 32px !important;
    text-align: center;
}

.rokan-product-heading .title::after,
.block-title.title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--awa-color-primary, #b73337);
    border-radius: 4px;
}

@media (max-width: 767px) {
    .rokan-product-heading .title,
    .block-title.title {
        font-size: 24px !important;
        margin-bottom: 24px !important;
    }
}

/* Soften Product Grid internal borders on Homepage */
.cms-index-index .product-item-info {
    border-color: #f1f5f9 !important; /* Extremely soft grid line */
}