/** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ /* ========================================================================== AWA Design System — Z-Index Hierarchy (source/_z-index.less) Fonte única de verdade para camadas visuais. NUNCA use z-index diretamente. Importe este arquivo e use @awa-z-* ========================================================================== */ /* STACKING CONTEXT GUIDE: 1. None (auto, z-index: auto) 2. Positional (absolute/fixed relative to natural flow) 3. @awa-z-dropdown (100) — autocomplete, select options 4. @awa-z-tooltip (150) — hover info 5. @awa-z-sticky (200) — header fixed, nav sticky 6. @awa-z-floating-btn (250) — floating action, chat 7. @awa-z-overlay (500) — loading states, dim 8. @awa-z-modal-backdrop (999) — modal dim background 9. @awa-z-modal (1000) — modal itself 10. @awa-z-alert-backdrop (1099) — alert background 11. @awa-z-alert (1100) — toast message 12. @awa-z-debug (9999) — dev tools only Em CSS interpolação (within :root): --awa-z-dropdown: @awa-z-dropdown; (se necessário em CSS components) */ h1, .page-title, .cms-home .page-title { font-size: var(--awa-heading-1-size); line-height: var(--awa-heading-line-height); letter-spacing: var(--awa-heading-letter-spacing); color: var(--awa-text); } h2, .block-title > strong, .section-title, .awa-section__title { font-size: var(--awa-heading-2-size); line-height: var(--awa-heading-line-height); letter-spacing: var(--awa-heading-letter-spacing); color: var(--awa-text); } h3, .subtitle { font-size: var(--awa-heading-3-size); line-height: var(--awa-heading-line-height); letter-spacing: var(--awa-heading-letter-spacing); color: var(--awa-text); } h4 { font-size: var(--awa-heading-4-size); line-height: 1.3; letter-spacing: -0.01em; color: var(--awa-text); } h5 { font-size: var(--awa-heading-5-size); line-height: 1.35; letter-spacing: -0.005em; color: var(--awa-text); } h6 { font-size: var(--awa-heading-6-size); line-height: 1.4; letter-spacing: 0; color: var(--awa-text-muted); } body { font-size: clamp(14px, 2vw, 16px); line-height: var(--awa-leading-relaxed); letter-spacing: 0; } p, .std, .cms-page-view .column.main { font-size: clamp(14px, 2vw, 16px); line-height: var(--awa-leading-relaxed); letter-spacing: 0; max-width: var(--awa-content-max-readable); } small, .small, .note, .caption { font-size: clamp(12px, 1.5vw, 14px); line-height: 1.5; letter-spacing: 0.2px; color: var(--awa-text-muted); } :root { --awa-fluid-h1: clamp(32px, 5vw, 40px); --awa-fluid-h2: clamp(28px, 4vw, 32px); --awa-fluid-h3: clamp(24px, 3.5vw, 28px); --awa-fluid-h4: clamp(20px, 3vw, 24px); --awa-fluid-h5: clamp(18px, 2.5vw, 20px); --awa-fluid-h6: clamp(16px, 2vw, 18px); --awa-fluid-body: clamp(14px, 2vw, 16px); --awa-fluid-small: clamp(12px, 1.5vw, 14px); } .awa-container { max-width: var(--awa-container-max); margin-inline: auto; padding-inline: var(--awa-container-pad); width: 100%; } .cms-index-index .page-main > .block, .cms-index-index .page-main > .widget, .cms-index-index .page-main > section, .cms-index-index .page-main > .awa-section { margin-bottom: var(--awa-section-gap); } .awa-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--awa-section-header-mb); padding-bottom: 12px; border-bottom: 2px solid var(--awa-border); gap: var(--awa-space-md); } .awa-section-header .awa-section-title { font-size: var(--awa-font-size-xl); font-weight: var(--awa-weight-bold); color: var(--awa-text); margin: 0; padding-left: 16px; border-left: 4px solid var(--awa-primary); line-height: var(--awa-leading-tight); } .awa-section-header .awa-section-link { font-size: var(--awa-font-size-sm); color: var(--awa-primary); text-decoration: none; font-weight: var(--awa-weight-medium); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--awa-radius-full); transition: all var(--awa-duration) var(--awa-ease); } .awa-section-header .awa-section-link::after { content: '\2192'; transition: transform var(--awa-duration) var(--awa-ease); } .awa-section-header .awa-section-link:hover { background: var(--awa-primary-subtle); color: var(--awa-primary-hover); text-decoration: none; } .awa-section-header .awa-section-link:hover::after { transform: translateX(3px); } @media (max-width: 768px) { :root { --awa-section-gap: 32px; --awa-gap-card: 8px; --awa-container-pad: 12px; } .awa-section-header .awa-section-title { font-size: var(--awa-font-size-lg); } } @media (max-width: 480px) { :root { --awa-section-gap: 24px; --awa-gap-card: 8px; --awa-container-pad: 10px; } .awa-section-header { flex-direction: column; align-items: flex-start; gap: var(--awa-space-sm); } } .message { display: flex; align-items: flex-start; gap: 12px; padding: 14px var(--awa-space-lg); border-radius: var(--awa-radius-md); font-size: var(--awa-font-size-sm); font-weight: var(--awa-weight-medium); line-height: var(--awa-leading-normal); border: 1px solid transparent; margin-bottom: var(--awa-space-md); position: relative; animation: awa-msg-in var(--awa-duration-slow) var(--awa-ease-spring) both; } .message::before { font-size: var(--awa-font-lg); line-height: 1; flex-shrink: 0; margin-top: 1px; } .message .action.close, .message .close { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border: none; background: transparent; cursor: pointer; opacity: 0.5; font-size: var(--awa-fs-base); display: flex; align-items: center; justify-content: center; border-radius: var(--awa-radius-sm); transition: opacity var(--awa-duration-fast) var(--awa-ease), background var(--awa-duration-fast) var(--awa-ease); } .message .action.close:hover, .message .close:hover { opacity: 1; background: rgba(0, 0, 0, 0.05); } .message.success, .message.message-success { background: var(--awa-success-bg); border-color: rgba(45, 122, 58, 0.2); color: var(--awa-msg-success-text); } .message.success::before, .message.message-success::before { content: '\2713'; color: var(--awa-success); } .message.error, .message.message-error { background: var(--awa-error-bg); border-color: rgba(211, 47, 47, 0.2); color: var(--awa-msg-error-text); } .message.error::before, .message.message-error::before { content: '\2717'; color: var(--awa-error); } .message.warning, .message.message-warning { background: var(--awa-warning-bg); border-color: rgba(184, 122, 0, 0.2); color: var(--awa-msg-warning-text); } .message.warning::before, .message.message-warning::before { content: '\26A0'; color: var(--awa-warning); } .message.info, .message.message-info, .message.notice, .message.message-notice { background: var(--awa-info-bg); border-color: rgba(25, 118, 210, 0.2); color: var(--awa-msg-info-text); } .message.info::before, .message.message-info::before, .message.notice::before, .message.message-notice::before { content: '\2139'; color: var(--awa-info); } .messages { max-width: var(--awa-container-max); margin: var(--awa-space-md) auto; padding: 0 var(--awa-container-pad); } .page.messages { position: relative; z-index: var(--awa-z-toast); } .message.awa-toast { position: fixed; bottom: var(--awa-space-lg); right: var(--awa-space-lg); z-index: var(--awa-z-toast); max-width: 420px; box-shadow: var(--awa-shadow-lg); margin: 0; animation: awa-toast-in var(--awa-duration-slow) var(--awa-ease-spring) both; } .message.awa-toast.auto-dismiss::after { content: ''; position: absolute; bottom: 0; left: 0; height: 3px; background: currentColor; opacity: 0.3; border-radius: 0 0 var(--awa-radius-md) var(--awa-radius-md); animation: awa-toast-progress 5s linear forwards; } @keyframes awa-msg-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes awa-toast-in { from { opacity: 0; transform: translateX(20px) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes awa-toast-progress { from { width: 100%; } to { width: 0%; } } @media (max-width: 600px) { .message.awa-toast { right: var(--awa-space-md); left: var(--awa-space-md); bottom: var(--awa-space-md); max-width: none; } } [data-awa-header-nav="true"], .awa-nav-bar, .nav-sections { background: var(--awa-primary, #b73337); border-bottom: 1px solid var(--awa-nav-divider); box-shadow: var(--awa-nav-shadow); position: relative; z-index: calc(var(--awa-z-sticky) - 1); } [data-awa-header-nav="true"] .nav-sections-items, .awa-nav-bar .nav-sections-items, .nav-sections .nav-sections-items { max-width: var(--awa-container-max); margin: 0 auto; padding: 0 var(--awa-container-pad); } .navigation, .awa-main-nav { display: flex; align-items: stretch; gap: 0; list-style: none; padding: 0; margin: 0; } .navigation > li, .awa-main-nav > li, .navigation > .nav-item, .awa-main-nav > .nav-item { position: relative; } .navigation > li > a, .awa-main-nav > li > a, .navigation > .nav-item > a, .awa-main-nav > .nav-item > a { display: flex; align-items: center; gap: 6px; padding: 0 14px; min-height: 36px; margin: 6px 2px; font-size: var(--awa-font-size-sm); font-weight: var(--awa-weight-semi); color: var(--awa-white); text-decoration: none; white-space: nowrap; position: relative; transition: background-color var(--awa-duration) var(--awa-ease), box-shadow var(--awa-duration-fast) var(--awa-ease), color var(--awa-duration-fast) var(--awa-ease); } .navigation > li > a:hover, .awa-main-nav > li > a:hover, .navigation > .nav-item > a:hover, .awa-main-nav > .nav-item > a:hover { background: var(--awa-nav-link-bg-hover); box-shadow: inset 0 0 0 1px var(--awa-nav-pill-border); color: var(--awa-white); } .navigation > li.active > a, .awa-main-nav > li.active > a, .navigation > .nav-item.active > a, .awa-main-nav > .nav-item.active > a, .navigation > li.current > a, .awa-main-nav > li.current > a, .navigation > .nav-item.current > a, .awa-main-nav > .nav-item.current > a { background: var(--awa-nav-link-bg-active); box-shadow: inset 0 0 0 1px var(--awa-nav-pill-border); color: var(--awa-white); } .navigation > li .submenu, .awa-main-nav > li .submenu, .navigation > .nav-item .submenu, .awa-main-nav > .nav-item .submenu, .navigation > li ul.level0.submenu, .awa-main-nav > li ul.level0.submenu, .navigation > .nav-item ul.level0.submenu, .awa-main-nav > .nav-item ul.level0.submenu { position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--awa-bg-elevated); border: 1px solid var(--awa-border); border-top: 2px solid var(--awa-primary); border-radius: 0 0 var(--awa-radius-md) var(--awa-radius-md); box-shadow: var(--awa-shadow-lg); z-index: var(--awa-z-dropdown); padding: var(--awa-space-xs) 0; list-style: none; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--awa-duration) var(--awa-ease), visibility var(--awa-duration) var(--awa-ease), transform var(--awa-duration) var(--awa-ease); } .navigation > li .submenu li a, .awa-main-nav > li .submenu li a, .navigation > .nav-item .submenu li a, .awa-main-nav > .nav-item .submenu li a, .navigation > li ul.level0.submenu li a, .awa-main-nav > li ul.level0.submenu li a, .navigation > .nav-item ul.level0.submenu li a, .awa-main-nav > .nav-item ul.level0.submenu li a { display: flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: var(--awa-font-size-sm); font-weight: var(--awa-weight-normal); color: var(--awa-text); text-decoration: none; transition: background var(--awa-duration-fast) var(--awa-ease), color var(--awa-duration-fast) var(--awa-ease), padding-left var(--awa-duration) var(--awa-ease); } .navigation > li .submenu li a:hover, .awa-main-nav > li .submenu li a:hover, .navigation > .nav-item .submenu li a:hover, .awa-main-nav > .nav-item .submenu li a:hover, .navigation > li ul.level0.submenu li a:hover, .awa-main-nav > li ul.level0.submenu li a:hover, .navigation > .nav-item ul.level0.submenu li a:hover, .awa-main-nav > .nav-item ul.level0.submenu li a:hover { background: var(--awa-primary-subtle); color: var(--awa-primary); padding-left: 24px; } .navigation > li .submenu li.divider, .awa-main-nav > li .submenu li.divider, .navigation > .nav-item .submenu li.divider, .awa-main-nav > .nav-item .submenu li.divider, .navigation > li ul.level0.submenu li.divider, .awa-main-nav > li ul.level0.submenu li.divider, .navigation > .nav-item ul.level0.submenu li.divider, .awa-main-nav > .nav-item ul.level0.submenu li.divider { border-top: 1px solid var(--awa-border-subtle); margin: var(--awa-space-xs) 0; } .navigation > li:hover > .submenu, .awa-main-nav > li:hover > .submenu, .navigation > .nav-item:hover > .submenu, .awa-main-nav > .nav-item:hover > .submenu, .navigation > li:hover > ul.level0.submenu, .awa-main-nav > li:hover > ul.level0.submenu, .navigation > .nav-item:hover > ul.level0.submenu, .awa-main-nav > .nav-item:hover > ul.level0.submenu, .navigation > li:focus-within > .submenu, .awa-main-nav > li:focus-within > .submenu, .navigation > .nav-item:focus-within > .submenu, .awa-main-nav > .nav-item:focus-within > .submenu, .navigation > li:focus-within > ul.level0.submenu, .awa-main-nav > li:focus-within > ul.level0.submenu, .navigation > .nav-item:focus-within > ul.level0.submenu, .awa-main-nav > .nav-item:focus-within > ul.level0.submenu { opacity: 1; visibility: visible; transform: translateY(0); } .navigation > .nav-all-categories > a, .awa-main-nav > .nav-all-categories > a { background: var(--awa-nav-pill-bg); color: var(--awa-nav-text); border: 1px solid var(--awa-nav-pill-border); border-radius: var(--awa-radius-full); } .navigation > .nav-all-categories > a::after, .awa-main-nav > .nav-all-categories > a::after { display: none; } .navigation > .nav-all-categories > a:hover, .awa-main-nav > .nav-all-categories > a:hover { background: var(--awa-nav-pill-bg-hover); color: var(--awa-nav-text); } @media (max-width: 960px) { [data-awa-header-nav="true"], .awa-nav-bar, .nav-sections { background: var(--awa-bg-surface, #ffffff); } [data-awa-header-nav="true"] .nav-sections-items, .awa-nav-bar .nav-sections-items, .nav-sections .nav-sections-items { padding: 0; } .navigation, .awa-main-nav { flex-direction: column; } .navigation > li > a, .awa-main-nav > li > a, .navigation > .nav-item > a, .awa-main-nav > .nav-item > a { color: var(--awa-text, #333333); padding: 14px var(--awa-container-pad); border-bottom: 1px solid var(--awa-border-subtle); } .navigation > li > a::after, .awa-main-nav > li > a::after, .navigation > .nav-item > a::after, .awa-main-nav > .nav-item > a::after { display: none; } .navigation > li > a:hover, .awa-main-nav > li > a:hover, .navigation > .nav-item > a:hover, .awa-main-nav > .nav-item > a:hover, .navigation > li > a:focus-visible, .awa-main-nav > li > a:focus-visible, .navigation > .nav-item > a:focus-visible, .awa-main-nav > .nav-item > a:focus-visible { background: transparent; color: var(--awa-primary, #b73337); box-shadow: none; } .navigation > li .submenu, .awa-main-nav > li .submenu, .navigation > .nav-item ul.level0.submenu, .awa-main-nav > .nav-item ul.level0.submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-top: none; border-radius: 0; background: var(--awa-bg-surface); } .navigation > li .submenu li a, .awa-main-nav > li .submenu li a, .navigation > .nav-item ul.level0.submenu li a, .awa-main-nav > .nav-item ul.level0.submenu li a { padding-left: 36px; font-size: var(--awa-font-size-sm); } } body .page-wrapper .awa-site-header [data-awa-header-nav="true"] { margin-bottom: 0; } body .page-wrapper .awa-site-header [data-awa-header-nav="true"] .menu_primary, body .page-wrapper .awa-site-header [data-awa-header-nav="true"] .awa-header-primary-nav { min-width: 0; } label, .label { font-size: var(--awa-font-size-sm); font-weight: var(--awa-weight-medium); color: var(--awa-text); margin-bottom: var(--awa-space-xs); display: block; line-height: var(--awa-leading-snug); } .required label::after, .required .label::after { content: ' *'; color: var(--awa-error); font-weight: var(--awa-weight-normal); } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], textarea, .input-text { width: 100%; min-height: 44px; padding: 0 var(--awa-space-md); border: var(--awa-border-width) solid var(--awa-border); border-radius: var(--awa-radius-sm); font-size: var(--awa-font-size-sm); line-height: var(--awa-leading-normal); color: var(--awa-text); background: var(--awa-bg); transition: border-color var(--awa-duration) var(--awa-ease), box-shadow var(--awa-duration) var(--awa-ease), background-color var(--awa-duration) var(--awa-ease); } input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="password"]::placeholder, input[type="tel"]::placeholder, input[type="number"]::placeholder, input[type="search"]::placeholder, input[type="url"]::placeholder, textarea::placeholder, .input-text::placeholder { color: var(--awa-text-light); } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="url"]:focus, textarea:focus, .input-text:focus, input[type="text"]:focus-visible, input[type="email"]:focus-visible, input[type="password"]:focus-visible, input[type="tel"]:focus-visible, input[type="number"]:focus-visible, input[type="search"]:focus-visible, input[type="url"]:focus-visible, textarea:focus-visible, .input-text:focus-visible { border-color: var(--awa-primary); outline: none; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.25); } input[type="text"]:disabled, input[type="email"]:disabled, input[type="password"]:disabled, input[type="tel"]:disabled, input[type="number"]:disabled, input[type="search"]:disabled, input[type="url"]:disabled, textarea:disabled, .input-text:disabled { background: var(--awa-bg-surface); color: var(--awa-text-light); cursor: not-allowed; opacity: 0.7; } input[type="text"].mage-error, input[type="email"].mage-error, input[type="password"].mage-error, input[type="tel"].mage-error, input[type="number"].mage-error, input[type="search"].mage-error, input[type="url"].mage-error, textarea.mage-error, .input-text.mage-error, input[type="text"].validation-failed, input[type="email"].validation-failed, input[type="password"].validation-failed, input[type="tel"].validation-failed, input[type="number"].validation-failed, input[type="search"].validation-failed, input[type="url"].validation-failed, textarea.validation-failed, .input-text.validation-failed { border-color: var(--awa-error); box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.12); } input[type="text"].mage-error:focus, input[type="email"].mage-error:focus, input[type="password"].mage-error:focus, input[type="tel"].mage-error:focus, input[type="number"].mage-error:focus, input[type="search"].mage-error:focus, input[type="url"].mage-error:focus, textarea.mage-error:focus, .input-text.mage-error:focus, input[type="text"].validation-failed:focus, input[type="email"].validation-failed:focus, input[type="password"].validation-failed:focus, input[type="tel"].validation-failed:focus, input[type="number"].validation-failed:focus, input[type="search"].validation-failed:focus, input[type="url"].validation-failed:focus, textarea.validation-failed:focus, .input-text.validation-failed:focus { border-color: var(--awa-error); box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.18); } textarea { height: auto; min-height: 100px; padding: var(--awa-space-sm) var(--awa-space-md); resize: vertical; line-height: var(--awa-leading-normal); } select { width: 100%; min-height: 44px; padding: 0 36px 0 var(--awa-space-md); border: var(--awa-border-width) solid var(--awa-border); border-radius: var(--awa-radius-sm); font-size: var(--awa-font-size-sm); line-height: var(--awa-leading-normal); color: var(--awa-text); background: var(--awa-bg); appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; transition: border-color var(--awa-duration) var(--awa-ease), box-shadow var(--awa-duration) var(--awa-ease); } select:focus, select:focus-visible { border-color: var(--awa-primary); outline: none; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.25); } input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--awa-primary); cursor: pointer; margin-right: var(--awa-space-xs); } div.mage-error, .field-error { font-size: var(--awa-font-size-xs); color: var(--awa-error); margin-top: var(--awa-space-xs); font-weight: var(--awa-weight-normal); display: flex; align-items: center; gap: 4px; } div.mage-error::before, .field-error::before { content: '!'; width: 16px; height: 16px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: var(--awa-weight-bold); color: #ffffff; background: var(--awa-error); flex-shrink: 0; } .field, .form-group { margin-bottom: var(--awa-space-md); } fieldset { border: var(--awa-border-width) solid var(--awa-border); border-radius: var(--awa-radius-lg); padding: var(--awa-space-lg); margin-bottom: var(--awa-space-lg); } fieldset legend { font-size: var(--awa-font-size-md); font-weight: var(--awa-weight-bold); color: var(--awa-text); padding: 0 var(--awa-space-sm); } .qty-wrapper, .control.qty { display: inline-flex; align-items: center; border: var(--awa-border-width) solid var(--awa-border); border-radius: var(--awa-radius-sm); overflow: hidden; } .qty-wrapper button, .control.qty button, .qty-wrapper .qty-btn, .control.qty .qty-btn { width: 36px; min-height: 36px; border: none; background: var(--awa-bg-surface); color: var(--awa-text); font-size: var(--awa-font-size-md); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--awa-duration-fast) var(--awa-ease); } .qty-wrapper button:hover, .control.qty button:hover, .qty-wrapper .qty-btn:hover, .control.qty .qty-btn:hover { background: var(--awa-primary); color: var(--awa-text-inverse); } .qty-wrapper button:active, .control.qty button:active, .qty-wrapper .qty-btn:active, .control.qty .qty-btn:active { transform: scale(0.98); } .qty-wrapper input.qty, .control.qty input.qty, .qty-wrapper input[type="number"].qty, .control.qty input[type="number"].qty { width: 48px; min-height: 36px; text-align: center; border: none; border-left: var(--awa-border-width) solid var(--awa-border); border-right: var(--awa-border-width) solid var(--awa-border); border-radius: 0; font-weight: var(--awa-weight-semi); font-size: var(--awa-font-size-sm); -moz-appearance: textfield; } .qty-wrapper input.qty::-webkit-inner-spin-button, .control.qty input.qty::-webkit-inner-spin-button, .qty-wrapper input[type="number"].qty::-webkit-inner-spin-button, .control.qty input[type="number"].qty::-webkit-inner-spin-button, .qty-wrapper input.qty::-webkit-outer-spin-button, .control.qty input.qty::-webkit-outer-spin-button, .qty-wrapper input[type="number"].qty::-webkit-outer-spin-button, .control.qty input[type="number"].qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .qty-wrapper input.qty:focus, .control.qty input.qty:focus, .qty-wrapper input[type="number"].qty:focus, .control.qty input[type="number"].qty:focus { box-shadow: none; } @media (max-width: 767px) { .field, .form-group { margin-bottom: var(--awa-space-sm); } fieldset { padding: var(--awa-space-md); } } .action.primary, .awa-btn-primary, button.action.primary { gap: var(--awa-space-sm); padding: 0 var(--awa-space-lg); font-size: var(--awa-font-size-14); font-weight: var(--awa-weight-semi); border-radius: var(--awa-radius-sm); border: var(--awa-border-width) solid transparent; transition: background-color var(--awa-duration) var(--awa-ease), border-color var(--awa-duration) var(--awa-ease), color var(--awa-duration) var(--awa-ease), box-shadow var(--awa-duration) var(--awa-ease), transform var(--awa-duration-fast) var(--awa-ease); -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; font-size: 14px; font-weight: 600; font-family: inherit; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; border: none; border-radius: 4px; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 150ms ease; user-select: none; vertical-align: middle; position: relative; overflow: hidden; background: var(--awa-primary); color: var(--awa-text-inverse); border-color: var(--awa-primary); } .action.primary:disabled, .awa-btn-primary:disabled, button.action.primary:disabled, .action.primary[disabled], .awa-btn-primary[disabled], button.action.primary[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none; } .action.primary:active:not(:disabled), .awa-btn-primary:active:not(:disabled), button.action.primary:active:not(:disabled) { transform: scale(0.97); } .action.primary:focus-visible, .awa-btn-primary:focus-visible, button.action.primary:focus-visible { outline: var(--awa-border-width-strong) solid var(--awa-primary); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.25); } .action.primary svg, .awa-btn-primary svg, button.action.primary svg, .action.primary i, .awa-btn-primary i, button.action.primary i, .action.primary [class*="icon"], .awa-btn-primary [class*="icon"], button.action.primary [class*="icon"] { width: var(--awa-icon-size-sm); height: var(--awa-icon-size-sm); flex-shrink: 0; } .action.primary:active, .awa-btn-primary:active, button.action.primary:active { transform: translateY(1px); } .action.primary:hover:not(:disabled), .awa-btn-primary:hover:not(:disabled), button.action.primary:hover:not(:disabled) { background: var(--awa-primary-hover); border-color: var(--awa-primary-hover); color: var(--awa-text-inverse); box-shadow: 0 4px 12px rgba(183, 51, 55, 0.3); transform: translateY(var(--awa-hover-lift)); } .action.secondary, .awa-btn-secondary { gap: var(--awa-space-sm); padding: 0 var(--awa-space-lg); font-size: var(--awa-font-size-14); font-weight: var(--awa-weight-semi); border-radius: var(--awa-radius-sm); border: var(--awa-border-width) solid transparent; transition: background-color var(--awa-duration) var(--awa-ease), border-color var(--awa-duration) var(--awa-ease), color var(--awa-duration) var(--awa-ease), box-shadow var(--awa-duration) var(--awa-ease), transform var(--awa-duration-fast) var(--awa-ease); -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; font-size: 14px; font-weight: 600; font-family: inherit; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; border: none; border-radius: 4px; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 150ms ease; user-select: none; vertical-align: middle; position: relative; overflow: hidden; background: transparent; color: var(--awa-primary); border-color: var(--awa-primary); } .action.secondary:disabled, .awa-btn-secondary:disabled, .action.secondary[disabled], .awa-btn-secondary[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none; } .action.secondary:active:not(:disabled), .awa-btn-secondary:active:not(:disabled) { transform: scale(0.97); } .action.secondary:focus-visible, .awa-btn-secondary:focus-visible { outline: var(--awa-border-width-strong) solid var(--awa-primary); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.25); } .action.secondary svg, .awa-btn-secondary svg, .action.secondary i, .awa-btn-secondary i, .action.secondary [class*="icon"], .awa-btn-secondary [class*="icon"] { width: var(--awa-icon-size-sm); height: var(--awa-icon-size-sm); flex-shrink: 0; } .action.secondary:active, .awa-btn-secondary:active { transform: translateY(1px); } .action.secondary:hover:not(:disabled), .awa-btn-secondary:hover:not(:disabled) { background: var(--awa-primary); color: var(--awa-text-inverse); box-shadow: 0 4px 12px rgba(183, 51, 55, 0.2); transform: translateY(var(--awa-hover-lift)); } .awa-btn-ghost { gap: var(--awa-space-sm); padding: 0 var(--awa-space-lg); font-size: var(--awa-font-size-14); font-weight: var(--awa-weight-semi); border-radius: var(--awa-radius-sm); border: var(--awa-border-width) solid transparent; transition: background-color var(--awa-duration) var(--awa-ease), border-color var(--awa-duration) var(--awa-ease), color var(--awa-duration) var(--awa-ease), box-shadow var(--awa-duration) var(--awa-ease), transform var(--awa-duration-fast) var(--awa-ease); -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; font-size: 14px; font-weight: 600; font-family: inherit; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; border: none; border-radius: 4px; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 150ms ease; user-select: none; vertical-align: middle; position: relative; overflow: hidden; background: transparent; color: var(--awa-primary); border-color: transparent; padding: 0 var(--awa-space-md); } .awa-btn-ghost:disabled, .awa-btn-ghost[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none; } .awa-btn-ghost:active:not(:disabled) { transform: scale(0.97); } .awa-btn-ghost:focus-visible { outline: var(--awa-border-width-strong) solid var(--awa-primary); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.25); } .awa-btn-ghost svg, .awa-btn-ghost i, .awa-btn-ghost [class*="icon"] { width: var(--awa-icon-size-sm); height: var(--awa-icon-size-sm); flex-shrink: 0; } .awa-btn-ghost:active { transform: translateY(1px); } .awa-btn-ghost:hover:not(:disabled) { background: var(--awa-primary-subtle); color: var(--awa-primary-hover); transform: translateY(var(--awa-hover-lift)); } .awa-btn-dark { gap: var(--awa-space-sm); padding: 0 var(--awa-space-lg); font-size: var(--awa-font-size-14); font-weight: var(--awa-weight-semi); border-radius: var(--awa-radius-sm); border: var(--awa-border-width) solid transparent; transition: background-color var(--awa-duration) var(--awa-ease), border-color var(--awa-duration) var(--awa-ease), color var(--awa-duration) var(--awa-ease), box-shadow var(--awa-duration) var(--awa-ease), transform var(--awa-duration-fast) var(--awa-ease); -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; font-size: 14px; font-weight: 600; font-family: inherit; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; border: none; border-radius: 4px; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 150ms ease; user-select: none; vertical-align: middle; position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.1); color: var(--awa-text-inverse); border-color: rgba(255, 255, 255, 0.2); } .awa-btn-dark:disabled, .awa-btn-dark[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none; } .awa-btn-dark:active:not(:disabled) { transform: scale(0.97); } .awa-btn-dark:focus-visible { outline: var(--awa-border-width-strong) solid var(--awa-primary); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.25); } .awa-btn-dark svg, .awa-btn-dark i, .awa-btn-dark [class*="icon"] { width: var(--awa-icon-size-sm); height: var(--awa-icon-size-sm); flex-shrink: 0; } .awa-btn-dark:active { transform: translateY(1px); } .awa-btn-dark:hover:not(:disabled) { background: var(--awa-bg); color: var(--awa-text); border-color: var(--awa-text-inverse); transform: translateY(var(--awa-hover-lift)); } .awa-btn-sm { min-height: 36px; padding: 0 var(--awa-space-md); font-size: var(--awa-font-size-xs); border-radius: var(--awa-radius-sm); } .awa-btn-lg { min-height: 54px; padding: 0 var(--awa-space-xl); font-size: var(--awa-font-size-md); border-radius: var(--awa-radius-md); } .awa-btn-full, .action.primary.full-width { width: 100%; } .awa-btn-icon { gap: var(--awa-space-sm); padding: 0 var(--awa-space-lg); font-size: var(--awa-font-size-14); font-weight: var(--awa-weight-semi); border-radius: var(--awa-radius-sm); border: var(--awa-border-width) solid transparent; transition: background-color var(--awa-duration) var(--awa-ease), border-color var(--awa-duration) var(--awa-ease), color var(--awa-duration) var(--awa-ease), box-shadow var(--awa-duration) var(--awa-ease), transform var(--awa-duration-fast) var(--awa-ease); -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 24px; font-size: 14px; font-weight: 600; font-family: inherit; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; border: none; border-radius: 4px; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 150ms ease; user-select: none; vertical-align: middle; position: relative; overflow: hidden; width: 44px; min-height: 44px; padding: 0; border-radius: var(--awa-radius-md); background: var(--awa-bg-surface); color: var(--awa-text-muted); border-color: var(--awa-border); } .awa-btn-icon:disabled, .awa-btn-icon[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none; } .awa-btn-icon:active:not(:disabled) { transform: scale(0.97); } .awa-btn-icon:focus-visible { outline: var(--awa-border-width-strong) solid var(--awa-primary); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.25); } .awa-btn-icon svg, .awa-btn-icon i, .awa-btn-icon [class*="icon"] { width: var(--awa-icon-size-sm); height: var(--awa-icon-size-sm); flex-shrink: 0; } .awa-btn-icon:active { transform: translateY(1px); } .awa-btn-icon:hover:not(:disabled) { background: var(--awa-primary-subtle); color: var(--awa-primary); border-color: var(--awa-primary); } .awa-btn-icon.awa-btn-icon-sm { width: 36px; min-height: 36px; } .action.tocart, button.action.tocart { gap: var(--awa-space-sm); padding: 0 var(--awa-space-lg); font-size: var(--awa-font-size-14); font-weight: var(--awa-weight-semi); border-radius: var(--awa-radius-sm); border: var(--awa-border-width) solid transparent; transition: background-color var(--awa-duration) var(--awa-ease), border-color var(--awa-duration) var(--awa-ease), color var(--awa-duration) var(--awa-ease), box-shadow var(--awa-duration) var(--awa-ease), transform var(--awa-duration-fast) var(--awa-ease); -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; font-size: 14px; font-weight: 600; font-family: inherit; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; border: none; border-radius: 4px; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 150ms ease; user-select: none; vertical-align: middle; position: relative; overflow: hidden; background: var(--awa-primary); color: var(--awa-text-inverse); border-color: var(--awa-primary); width: 100%; } .action.tocart:disabled, button.action.tocart:disabled, .action.tocart[disabled], button.action.tocart[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none; } .action.tocart:active:not(:disabled), button.action.tocart:active:not(:disabled) { transform: scale(0.97); } .action.tocart:focus-visible, button.action.tocart:focus-visible { outline: var(--awa-border-width-strong) solid var(--awa-primary); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.25); } .action.tocart svg, button.action.tocart svg, .action.tocart i, button.action.tocart i, .action.tocart [class*="icon"], button.action.tocart [class*="icon"] { width: var(--awa-icon-size-sm); height: var(--awa-icon-size-sm); flex-shrink: 0; } .action.tocart:active, button.action.tocart:active { transform: translateY(1px); } .action.tocart:hover:not(:disabled), button.action.tocart:hover:not(:disabled) { background: var(--awa-primary-hover); border-color: var(--awa-primary-hover); box-shadow: 0 4px 12px rgba(183, 51, 55, 0.3); transform: translateY(var(--awa-hover-lift)); } .awa-btn-whatsapp { gap: var(--awa-space-sm); padding: 0 var(--awa-space-lg); font-size: var(--awa-font-size-14); font-weight: var(--awa-weight-semi); border-radius: var(--awa-radius-sm); border: var(--awa-border-width) solid transparent; transition: background-color var(--awa-duration) var(--awa-ease), border-color var(--awa-duration) var(--awa-ease), color var(--awa-duration) var(--awa-ease), box-shadow var(--awa-duration) var(--awa-ease), transform var(--awa-duration-fast) var(--awa-ease); -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; font-size: 14px; font-weight: 600; font-family: inherit; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; border: none; border-radius: 4px; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 150ms ease; user-select: none; vertical-align: middle; position: relative; overflow: hidden; background: var(--awa-whatsapp); color: var(--awa-text-inverse); border-color: var(--awa-whatsapp); } .awa-btn-whatsapp:disabled, .awa-btn-whatsapp[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none; } .awa-btn-whatsapp:active:not(:disabled) { transform: scale(0.97); } .awa-btn-whatsapp:focus-visible { outline: var(--awa-border-width-strong) solid var(--awa-primary); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.25); } .awa-btn-whatsapp svg, .awa-btn-whatsapp i, .awa-btn-whatsapp [class*="icon"] { width: var(--awa-icon-size-sm); height: var(--awa-icon-size-sm); flex-shrink: 0; } .awa-btn-whatsapp:active { transform: translateY(1px); } .awa-btn-whatsapp:hover:not(:disabled) { background: var(--awa-whatsapp-dark, #128C7E); border-color: var(--awa-whatsapp-dark, #128C7E); box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3); transform: translateY(var(--awa-hover-lift)); } .awa-btn-group { display: flex; gap: var(--awa-space-sm); flex-wrap: wrap; } @media (prefers-reduced-motion: reduce) { .action.primary, .awa-btn-primary, .action.secondary, .awa-btn-secondary, .awa-btn-ghost, .awa-btn-dark, .action.tocart, .awa-btn-whatsapp { transition: none; transform: none; } } :root { --ds-space-xs: 8px; --ds-space-sm: 16px; --ds-space-md: 24px; --ds-space-lg: 32px; --ds-space-xl: 40px; --ds-space-xxl: 48px; --ds-space-3xl: 64px; --ds-space-4xl: 80px; --awa-s-0: 0; --awa-s-1: 8px; --awa-s-2: 16px; --awa-s-3: 24px; --awa-s-4: 32px; --awa-s-5: 40px; --awa-s-6: 48px; --awa-s-7: 64px; --awa-s-8: 80px; --awa-s-9: 96px; } :root { --ds-bp-xs: 320px; --ds-bp-sm: 480px; --ds-bp-md: 768px; --ds-bp-lg: 1024px; --ds-bp-xl: 1280px; --ds-bp-xxl: 1920px; --ds-bp-4k: 2560px; --awa-bp-576: 576px; --awa-bp-768: 768px; --awa-bp-992: 992px; --awa-bp-1200: 1200px; } :root { --ds-font-xs: 12px; --ds-font-sm: 14px; --ds-font-base: 16px; --ds-font-lg: 18px; --ds-font-xl: 20px; --ds-font-h6: 18px; --ds-font-h5: 22px; --ds-font-h4: 24px; --ds-font-h3: 28px; --ds-font-h2: 36px; --ds-font-h1: 48px; --awa-fs-xs: clamp(10px, calc(9.33px + 0.208vw), 12px); --awa-fs-sm: clamp(12px, calc(11.33px + 0.208vw), 14px); --awa-fs-md: clamp(14px, calc(13.33px + 0.208vw), 16px); --awa-fs-lg: clamp(16px, calc(15.33px + 0.208vw), 18px); --awa-fs-xl: clamp(18px, calc(17.33px + 0.208vw), 20px); --awa-fs-2xl: clamp(24px, calc(21.33px + 0.833vw), 32px); --awa-fs-3xl: clamp(28px, calc(25.33px + 0.833vw), 36px); } :root { --awa-primary: #b73337; --awa-primary-hover: #8e2629; --awa-ink: #1a1a1a; --awa-ink-05: rgba(0, 0, 0, 0.05); --awa-ink-10: rgba(0, 0, 0, 0.1); --awa-ink-20: rgba(0, 0, 0, 0.2); --awa-ink-50: rgba(0, 0, 0, 0.5); --awa-ink-80: rgba(0, 0, 0, 0.8); --awa-bg: #ffffff; --awa-bg-soft: #f7f7f7; --awa-success: #16a34a; --awa-warning: #d97706; --awa-error: #b73337; --awa-info: #0ea5e9; --awa-radius-sm: 4px; --awa-radius-md: 12px; --awa-radius-lg: 16px; --awa-radius-pill: 9999px; --awa-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --awa-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --awa-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --awa-ease: cubic-bezier(0.4, 0, 0.2, 1); --awa-dur-fast: 120ms; --awa-dur-base: 200ms; --awa-dur-slow: 350ms; --awa-container-content: 1200px; } :root { --ds-grid-max-width: 1280px; --ds-grid-columns: 12; --ds-grid-gutter: 24px; --ds-grid-half-gutter: 12px; } :root { --section-py: 24px; --section-py-half: 12px; --section-py-double: 40px; } @media (min-width: 768px) { :root { --section-py: 32px; --section-py-half: 16px; --section-py-double: 48px; } } @media (min-width: 1024px) { :root { --section-py: 40px; --section-py-half: 24px; --section-py-double: 64px; } } .section { padding-top: var(--section-py); padding-bottom: var(--section-py); } .section--small { padding-top: var(--section-py-half); padding-bottom: var(--section-py-half); } .section--large { padding-top: var(--section-py-double); padding-bottom: var(--section-py-double); } .section--no-padding { padding-top: 0; padding-bottom: 0; } .section--top-only { padding-top: var(--section-py); padding-bottom: 0; } .section--bottom-only { padding-top: 0; padding-bottom: var(--section-py); } body.cms-index-index .column.main .awa-security-section, body.cms-index-index .column.main .trust-badges-homepage { padding-top: var(--section-py-half); padding-bottom: var(--section-py-half); } body .page-wrapper .awa-section { padding-top: var(--section-py); padding-bottom: var(--section-py); } .catalog-category-view .column.main .products.wrapper { padding-top: var(--section-py); padding-bottom: var(--section-py); } .catalogsearch-result-index .column.main .search.results { padding-top: var(--section-py); padding-bottom: var(--section-py); } .breadcrumbs { padding: var(--awa-space-sm) 0; margin-bottom: var(--awa-space-md); max-width: var(--awa-container-max); margin-left: auto; margin-right: auto; padding-left: var(--awa-container-pad); padding-right: var(--awa-container-pad); } .breadcrumbs .items { display: flex; align-items: center; flex-wrap: wrap; gap: 0; list-style: none; padding: 0; margin: 0; } .breadcrumbs .item { display: inline-flex; align-items: center; font-size: var(--awa-font-size-xs); color: var(--awa-text-light); } .breadcrumbs .item a { color: var(--awa-text-muted); text-decoration: none; padding: 2px 0; transition: color var(--awa-duration-fast) var(--awa-ease); } .breadcrumbs .item a:hover { color: var(--awa-primary); } .breadcrumbs .item::after { content: ''; display: inline-block; width: 14px; height: 14px; margin: 0 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; flex-shrink: 0; } .breadcrumbs .item:last-child::after { display: none; } .breadcrumbs .item:last-child strong { color: var(--awa-text); font-weight: var(--awa-weight-semi); } .price-box { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; } .price-box .old-price .price { font-size: var(--awa-font-size-xs); color: var(--awa-text-light); text-decoration: line-through; font-weight: 400; } .price-box .price-final_price .price, .price-box .special-price .price, .price-box .price-wrapper .price { font-size: var(--awa-font-size-md); font-weight: 700; color: var(--awa-text); } .price-box .special-price .price { color: var(--awa-primary); } .price-box .price-label { font-size: 11px; color: var(--awa-text-light); font-weight: 400; display: block; } .price-box .minimal-price-link { font-size: var(--awa-font-size-xs); color: var(--awa-primary); text-decoration: none; } .price-box .minimal-price-link:hover { text-decoration: underline; } .price-badge-discount, .awa-badge-discount { position: absolute; top: var(--awa-space-sm); left: var(--awa-space-sm); background: var(--awa-primary); color: var(--awa-text-inverse); font-size: var(--awa-font-size-xs); font-weight: 700; padding: 3px 8px; border-radius: var(--awa-radius-sm); line-height: 1.2; z-index: 2; } .awa-badge-new { position: absolute; top: var(--awa-space-sm); right: var(--awa-space-sm); background: var(--awa-success); color: var(--awa-text-inverse); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--awa-radius-sm); text-transform: uppercase; letter-spacing: 0.04em; z-index: 2; } .awa-badge-soldout { position: absolute; top: var(--awa-space-sm); right: var(--awa-space-sm); background: var(--awa-text-muted); color: var(--awa-text-inverse); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: var(--awa-radius-sm); z-index: 2; } .awa-installments, .price-installments { font-size: var(--awa-font-size-xs); color: var(--awa-text-muted); margin-top: 2px; } .awa-installments strong, .price-installments strong { color: var(--awa-text); font-weight: 600; } .awa-pix-price, .price-pix { display: flex; align-items: center; gap: var(--awa-space-xs); margin-top: 4px; } .awa-pix-price .pix-icon, .price-pix .pix-icon { width: 16px; height: 16px; } .awa-pix-price .pix-value, .price-pix .pix-value { font-size: var(--awa-font-size-sm); font-weight: 700; color: var(--awa-success); } .awa-pix-price .pix-label, .price-pix .pix-label { font-size: 11px; color: var(--awa-text-light); } .catalog-product-view .price-box .price-final_price .price, .catalog-product-view .price-box .special-price .price { font-size: var(--awa-font-size-xl); } .catalog-product-view .price-box .old-price .price { font-size: var(--awa-font-size-sm); } /** * Copyright 2014 Adobe * All Rights Reserved. */ /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ .form-discount .g-recaptcha { margin-top: 50px !important; } /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ .login-container .g-recaptcha, .form-login .g-recaptcha, .form-edit-account .g-recaptcha { margin-bottom: 10px !important; } /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ .required-captcha.checkbox { position: absolute; display: block; visibility: visible; overflow: hidden; opacity: 0; width: 1px; height: 1px; } /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ .review-form .field-recaptcha { margin-bottom: 10px; } /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ .form.send.friend .g-recaptcha { margin-top: 40px; } /** * Copyright 2024 Adobe * All rights reserved. */ .form.wishlist.share .g-recaptcha { margin-bottom: 40px; } /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ .product-info-stock-sku .configurable-variation-qty { display: none; } .awa-b2b-register-bar { display: flex; align-items: center; gap: 12px; padding: 0 16px; min-height: 48px; max-height: 48px; background: var(--awa-primary-light, #f9e5e5); border-bottom: 1px solid #f0c0c0; box-sizing: border-box; overflow: hidden; } .awa-b2b-register-bar[aria-hidden="true"], .awa-b2b-register-bar--hidden { display: none !important; } body.b2b-auth-shell .awa-b2b-register-bar, body.b2b-register-index .awa-b2b-register-bar, body.customer-account-login .awa-b2b-register-bar, body.customer-account-create .awa-b2b-register-bar, body.b2b-account-login .awa-b2b-register-bar, body.checkout-cart-index .awa-b2b-register-bar, body.checkout-index-index .awa-b2b-register-bar, body.rokanthemes-onepagecheckout .awa-b2b-register-bar { display: none !important; } .awa-b2b-register-bar__icon { flex-shrink: 0; display: flex; align-items: center; color: var(--awa-primary, #b73337); } .awa-b2b-register-bar__icon svg { display: block; width: 18px; height: 18px; } .awa-b2b-register-bar__text { flex: 1 1 0; min-width: 0; font-size: 13px; line-height: 1.35; color: #5a2020; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .awa-b2b-register-bar__actions { flex-shrink: 0; display: flex; align-items: center; gap: 10px; } .awa-b2b-register-bar__btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; height: 32px; font-size: 13px; font-weight: 600; line-height: 1; color: #fff !important; background: var(--awa-primary, #b73337); border: none; border-radius: var(--awa-radius-sm, 4px); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 0.15s ease; } .awa-b2b-register-bar__btn:hover, .awa-b2b-register-bar__btn:focus { background: var(--awa-primary-hover, #8e2629); color: #fff !important; text-decoration: none; } .awa-b2b-register-bar__btn:focus-visible { outline: 2px solid var(--awa-primary, #b73337); outline-offset: 2px; } .awa-b2b-register-bar__link { font-size: 13px; font-weight: 500; color: var(--awa-primary, #b73337); text-decoration: underline; white-space: nowrap; } .awa-b2b-register-bar__link:hover { color: var(--awa-primary-hover, #8e2629); } @media (max-width: 767px) { .awa-b2b-register-bar { flex-direction: column; align-items: stretch; max-height: none; min-height: 0; padding: 10px 16px; gap: 8px; } .awa-b2b-register-bar__text { white-space: normal; overflow: visible; text-overflow: unset; text-align: center; } .awa-b2b-register-bar__actions { flex-direction: column; gap: 6px; width: 100%; } .awa-b2b-register-bar__btn { width: 100%; height: 38px; font-size: 14px; } .awa-b2b-register-bar__link { text-align: center; display: block; } } .b2b-price-hidden { display: block; padding: 6px 0; } .b2b-price-hidden .b2b-login-cta { display: inline-block; font-size: 12px; color: #666; line-height: 1.4; } .b2b-price-hidden .b2b-login-link, .b2b-price-hidden .b2b-register-link { color: #e31f2a; font-weight: 600; text-decoration: none; } .b2b-price-hidden .b2b-login-link:hover, .b2b-price-hidden .b2b-register-link:hover { text-decoration: underline; } .b2b-strict-mode .product-item-actions, .b2b-strict-mode .action.tocart { display: none !important; } .b2b-register-page { max-width: 700px; margin: 0 auto; padding: 30px 20px; } .b2b-register-page .b2b-register-header { margin-bottom: 30px; } .b2b-register-page .b2b-register-header h1 { font-size: 26px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; } .b2b-register-page .b2b-register-header p { color: #555; font-size: 14px; line-height: 1.6; } .b2b-register-page .fieldset { border: 1px solid #e0e0e0; border-radius: 6px; padding: 20px 24px; margin-bottom: 20px; } .b2b-register-page .fieldset .legend { padding: 0 8px; font-size: 14px; font-weight: 700; color: #333; text-transform: uppercase; letter-spacing: 0.5px; } .b2b-register-page .field { margin-bottom: 16px; } .b2b-register-page .field .label { display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 5px; } .b2b-register-page .field .control input { width: 100%; padding: 9px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; transition: border-color 0.2s; } .b2b-register-page .field .control input:focus { border-color: #e31f2a; outline: none; box-shadow: 0 0 0 2px rgba(227, 31, 42, 0.1); } .b2b-register-page .field.required .label::after { content: ' *'; color: #e31f2a; } .b2b-register-page .actions-toolbar { margin-top: 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .b2b-register-page .actions-toolbar .action.submit.primary { background: #e31f2a; color: #fff; border: none; padding: 12px 32px; font-size: 15px; font-weight: 700; border-radius: 4px; cursor: pointer; transition: background 0.2s; } .b2b-register-page .actions-toolbar .action.submit.primary:hover { background: #c41a23; } .b2b-register-page .actions-toolbar .action.login { font-size: 13px; color: #666; text-decoration: none; } .b2b-register-page .actions-toolbar .action.login:hover { color: #e31f2a; } .b2b-register-page #cnpj.valid { border-color: #2e7d32; } .b2b-register-page #cnpj.invalid { border-color: #c62828; } .b2b-register-page .cnpj-feedback { font-size: 11px; margin-top: 4px; } .b2b-register-page .cnpj-feedback.ok { color: #2e7d32; } .b2b-register-page .cnpj-feedback.err { color: #c62828; } .b2b-register-page .b2b-field-row { display: flex; gap: 16px; } @media (max-width: 480px) { .b2b-register-page .b2b-field-row { flex-wrap: wrap; } .b2b-register-page .b2b-field-row > .field { flex: 1 1 100% !important; min-width: 0; } } .b2b-account-status { background: #f5f5f5; border-left: 4px solid #e31f2a; padding: 12px 16px; margin-bottom: 20px; border-radius: 0 4px 4px 0; } .b2b-account-status.approved { border-color: #2e7d32; } .b2b-account-status.pending { border-color: #f57c00; } .b2b-account-status.rejected { border-color: #c62828; } .b2b-account-status .b2b-status-label { font-weight: 700; font-size: 13px; } .b2b-account-status p { font-size: 12px; margin: 6px 0 0; color: #666; } .b2b-account-status.approved p { color: #1b5e20; } .b2b-account-status.rejected p { color: #c62828; } .b2b-account-status a { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--awa-primary, #b73337); text-decoration: none; } .b2b-account-status a:hover { text-decoration: underline; } .mst-search-in__wrapper { max-width: 100%; display: flex; overflow: hidden; position: relative; flex-grow: 1; margin-bottom: 10px; flex-wrap: wrap; } .mst-search-in__wrapper .mst-search-in__title { border: none; padding: 6px 3px 6px 6px; margin-right: 3px; font-weight: 600; white-space: nowrap; } .mst-search-in__wrapper .mst-search-in__item { white-space: nowrap; border: 1px solid #ccc; border-radius: 2px; margin: 0 5px 5px 0; padding: 6px 12px; color: #494949; text-decoration: none; cursor: pointer; display: flex; align-items: center; } .mst-search-in__wrapper .mst-search-in__item span.name { display: flex; flex-wrap: nowrap; font-size: 13px; } .mst-search-in__wrapper .mst-search-in__item span.name i { font-style: normal; display: flex; align-items: center; } .mst-search-in__wrapper .mst-search-in__item span.name i:after { font-size: 7px; content: '\e608'; font-family: 'luma-icons'; margin: 0 5px; vertical-align: top; display: inline-block; font-weight: normal; overflow: hidden; speak: none; text-align: center; color: #757575; } .mst-search-in__wrapper .mst-search-in__item span.name i:last-child:after { display: none; } .mst-search-in__wrapper .mst-search-in__item span.count { color: #757575; display: block; margin-left: 8px; font-size: 80%; } .mst-search-in__wrapper .mst-search-in__item span.count:before { content: "("; } .mst-search-in__wrapper .mst-search-in__item span.count:after { content: ")"; } .mst-search-in__wrapper .mst-search-in__item:hover { border-color: #ff5501; text-decoration: none; } .mst_categorySearchLoader { display: none; position: absolute; top: 6px; right: 15px; width: 20px; height: 20px; } .mst_categorySearchLoader .spinner-item { box-sizing: border-box; display: block; position: absolute; width: 20px; height: 20px; margin: 0; border: 2px solid #ffffff; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #999999 transparent transparent transparent; } .mst_categorySearchLoader .spinner-item.spinner-item-1 { animation-delay: -0.45s; } .mst_categorySearchLoader .spinner-item.spinner-item-2 { animation-delay: -0.3s; } .mst_categorySearchLoader .spinner-item.spinner-item-3 { animation-delay: -0.15s; } @keyframes lds-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .mst_categorySearch { display: block; position: relative; } .mst_categorySearch_searchIcon { position: absolute; left: 10px; font-size: 21px; color: #bbbbbb; } span.mst_categorySearch_totals { position: absolute; right: 0; padding: 6px 15px 6px 15px; color: #999; display: none; } input#mst_categorySearch { padding: 0 0 0 35px; margin-bottom: 15px; width: 100%; max-width: 100%; } .mst_categorySearchLoader .fa-spinner { font-size: 30px; } #search_autocomplete, .search-autocomplete, #searchbox_autocomplete { display: none !important; height: 0 !important; overflow: hidden !important; } .block-search { z-index: 10000; } /* gobal popup-ajaxsuite style */ /* Ipad and lager srceen */ /* Mobile screen */ @keyframes wave { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #locator_filter .column_left .block-content { padding: 15px 15px; margin-bottom: 20px; background: #f8f8f8; border: 1px solid #e0e0e0; border-radius: 8px; width: 100%; box-sizing: border-box; display: flex; justify-content: space-between; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } #locator_filter .column_left .block-content #current-address { flex: 1; } #locator_filter .column_left .block-content #current-address .input-box #locator-search { border-radius: 5px 0 0 5px; height: 50px; border: 1px solid #ddd; padding: 0 15px; font-size: 14px; transition: border-color 0.3s ease; } #locator_filter .column_left .block-content #current-address .input-box #locator-search:focus { border-color: #007bff; outline: none; } #locator_filter .column_left .block-content #current-address .input-box #locator-search::placeholder { color: #999; } #locator_filter .column_left .block-content .bstlocator_input .button { height: 50px; background: #007bff; color: #fff; border: none; border-radius: 0 5px 5px 0; padding: 0 20px; font-weight: 600; cursor: pointer; transition: background 0.3s ease; } #locator_filter .column_left .block-content .bstlocator_input .button:hover { background: #0056b3; } #locator_filter .column_left .block-content .bstlocator_input .button span span { color: #fff; } #locator_filter .column_left .center { overflow: auto; height: 100vh; max-height: 600px; } #locator_filter .column_left .center .store-list-header { padding: 20px 15px 15px; margin: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border-radius: 8px 8px 0 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } #locator_filter .column_left .center .store-list-header h3 { margin: 0 0 5px 0; font-size: 20px; font-weight: 700; color: #fff; } #locator_filter .column_left .center .store-list-header .store-list-subtitle { margin: 0; font-size: 13px; opacity: 0.9; font-weight: 400; } #locator_filter .column_left .center #store_list { padding: 15px; background: #fafafa; } #locator_filter .column_left .center #store_list .list { display: flex; margin-bottom: 15px; overflow: auto; font-size: 14px; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); cursor: pointer; flex-wrap: wrap; transition: all 0.3s ease; } #locator_filter .column_left .center #store_list .list:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateY(-2px); border-color: #007bff; } #locator_filter .column_left .center #store_list .list .image { flex: 0 0 40%; max-width: 150px; margin: 15px; border-radius: 6px; overflow: hidden; } #locator_filter .column_left .center #store_list .list .image img { width: 100%; height: 120px; object-fit: cover; transition: transform 0.3s ease; } #locator_filter .column_left .center #store_list .list .image:hover img { transform: scale(1.05); } #locator_filter .column_left .center #store_list .list .location-information { flex: 1; margin: 15px; margin-left: 0; min-width: 250px; } #locator_filter .column_left .center #store_list .list .location-information h2 { margin: 0 0 10px 0; font-size: 18px; color: #333; font-weight: 600; } #locator_filter .column_left .center #store_list .list .location-information div { margin-bottom: 6px; color: #666; font-size: 14px; line-height: 1.5; } #locator_filter .column_left .center #store_list .list .location-information div strong { color: #333; font-weight: 600; } #locator_filter .column_left .center #store_list .list .location-information div a { color: #007bff; text-decoration: none; } #locator_filter .column_left .center #store_list .list .location-information div a:hover { text-decoration: underline; } #locator_filter .column_left .center #store_list .list .location-information .store-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } #locator_filter .column_left .center #store_list .list .location-information .store-actions .btn-view-detail, #locator_filter .column_left .center #store_list .list .location-information .store-actions .btn-whatsapp { display: inline-block; padding: 8px 16px; border-radius: 4px; font-size: 13px; font-weight: 500; text-decoration: none; transition: all 0.2s ease; text-align: center; } #locator_filter .column_left .center #store_list .list .location-information .store-actions .btn-view-detail { background: #007bff; color: #fff; } #locator_filter .column_left .center #store_list .list .location-information .store-actions .btn-view-detail:hover { background: #0056b3; } #locator_filter .column_left .center #store_list .list .location-information .store-actions .btn-whatsapp { background: #25D366; color: #fff; } #locator_filter .column_left .center #store_list .list .location-information .store-actions .btn-whatsapp i { margin-right: 5px; } #locator_filter .column_left .center #store_list .list .location-information .store-actions .btn-whatsapp:hover { background: #128C7E; } #locator_filter .column_left .center #store_list .list .location-information .store-phone a { color: #007bff; font-weight: 500; } #locator_filter .column_left .center #store_list .list .today_time { width: 100%; position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; align-items: center; margin-top: 5px; padding: 10px 15px; background: #f0f0f0; border-radius: 0 0 8px 8px; font-size: 13px; } #locator_filter .column_left .center #store_list .list .today_time i.fa { margin-right: 8px; color: #007bff; } #locator_filter .column_left .center #store_list .list .today_time .open-hours { font-weight: 600; color: #28a745; } #locator_filter .column_left .center #store_list .list .today_time .closed-label { font-weight: 600; color: #dc3545; } #locator_filter .column_left .center #store_list .list .today_time .closed-label { font-weight: 600; color: #dc3545; } #locator_filter .column_left .center #store_list .list .today_time .locator_arrow { margin-left: auto; } #locator_filter .column_left .center #store_list .list .today_time .locator_arrow:before { content: '\e622'; display: inline-block; font-family: 'icons-blank-theme'; font-size: 30px; line-height: 1; vertical-align: top; margin-left: 0; } #locator_filter .column_left .center #store_list .list .all_today_time { width: 100%; position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; margin-top: 10px; padding: 15px; background: #dfdfdf; flex-direction: column; } #locator_filter .column_left .center #store_list .list .all_today_time > div { padding: 3px 0; text-transform: capitalize; } #locator_filter .column_left .center #store_list .list .all_today_time .active { font-weight: 500; } #locator_filter .column_right #bst-map-load button { background: #fff !important; color: inherit !important; border-color: inherit !important; } #locator_filter-store .column_right #bst-map-view button { background: #fff !important; color: inherit !important; border-color: inherit !important; } #locator_filter-store .column_left #store_list_view .today_time { width: 100%; position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; align-items: center; margin-top: 5px; padding: 5px 15px 5px 15px; background: #dfdfdf; cursor: pointer; } #locator_filter-store .column_left #store_list_view .today_time:before { content: "\f017"; font: normal normal normal 14px/1 FontAwesome; margin-right: 10px; } #locator_filter-store .column_left #store_list_view .today_time .locator_arrow { margin-left: auto; } #locator_filter-store .column_left #store_list_view .today_time .locator_arrow:before { content: '\e622'; display: inline-block; font-family: 'icons-blank-theme'; font-size: 30px; line-height: 1; vertical-align: top; margin-left: 0; } #locator_filter-store .column_left #store_list_view .all_today_time { width: 100%; position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; margin-top: 10px; padding: 15px; background: #dfdfdf; flex-direction: column; } #locator_filter-store .column_left #store_list_view .all_today_time > div { padding: 3px 0; text-transform: capitalize; } #locator_filter-store .column_left #store_list_view .all_today_time .active { font-weight: 500; } #locator_filter-store .column_left #store_list_view .location-information { flex: 1; margin: 15px; margin-left: 0; } #locator_filter-store .column_left #store_list_view .location-information div a { font-weight: 500; font-size: 1.8rem; margin-bottom: 20px; } @media (max-width: 992px), print { #locator_filter, #locator_filter-store { flex-direction: column; } #locator_filter .column_left, #locator_filter-store .column_left, #locator_filter .column_right, #locator_filter-store .column_right { width: 100% !important; } #locator_filter .column_right, #locator_filter-store .column_right { order: -1; padding: 0 0 30px !important; height: 50vh !important; } #locator_filter .column_left .center, #locator_filter-store .column_left .center { max-height: none !important; } #locator_filter .column_left #store_list .list, #locator_filter-store .column_left #store_list .list { flex-direction: column; } #locator_filter .column_left #store_list .list .image, #locator_filter-store .column_left #store_list .list .image { max-width: 100%; margin: 15px 15px 0 15px; } #locator_filter .column_left #store_list .list .image img, #locator_filter-store .column_left #store_list .list .image img { height: 200px; } #locator_filter .column_left #store_list .list .location-information, #locator_filter-store .column_left #store_list .list .location-information { min-width: 100%; } } @media only screen and (max-width: 768px) { .field-tooltip .field-tooltip-content { left: auto; right: -10px; top: 40px; } .field-tooltip .field-tooltip-content::before, .field-tooltip .field-tooltip-content::after { border: 10px solid transparent; height: 0; left: auto; margin-top: -21px; right: 10px; top: 0; width: 0; } .field-tooltip .field-tooltip-content::before { border-bottom-color: #999; } .field-tooltip .field-tooltip-content::after { border-bottom-color: #f4f4f4; top: 1px; } } /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ @media only screen and (min-device-width: 320px) and (max-device-width: 780px) and (orientation: landscape) { .product-video { height: 100%; width: 81%; } } /* GiftRegistry: override vazio para evitar erro de compilacao LESS (variavel ausente no tema) */ :root { /* ── awa-vfix — design tokens ─── */ --awa-vfix-c1: #4b5563; --awa-vfix-c2: #fff; } @media (max-width: 767px) { .awa-whatsapp-float { bottom: 85px !important; z-index: 9998 !important; } body.awa-cookie-banner-active .awa-whatsapp-float { bottom: 160px !important; } #awaBackToTop { bottom: 85px !important; z-index: 9997 !important; } body.awa-cookie-banner-active #awaBackToTop { bottom: 160px !important; } } body.awa-cookie-banner-active .awa-whatsapp-float, body.awa-cookie-banner-active #awaBackToTop { bottom: calc(var(--awa-cookie-banner-height, 0px) + 24px) !important; } .modals-wrapper { z-index: 100005 !important; } #awa-cookie-banner { z-index: 100000 !important; } .swiper-wrapper .product-thumb, .swiper-wrapper .hot-onsale, .swiper-wrapper .onsale { overflow: visible !important; } #awa-b2b-promo-bar { transition: max-height 0.35s ease-out, opacity 0.3s ease, padding 0.3s ease; max-height: 60px; overflow: hidden; } #awa-b2b-promo-bar.is-dismissing { max-height: 0 !important; opacity: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important; border: none !important; } @media (max-width: 360px) { .awa-header-primary-row { flex-wrap: wrap; } .awa-header-primary-row .awa-header-actions, .awa-header-primary-row .awa-header-search-col { order: 4; width: 100% !important; margin-top: 8px; flex-basis: 100%; } } .products-grid .product-item-info { display: flex; flex-direction: column; height: 100%; } .products-grid .product-item-info .product-item-details { display: flex; flex-direction: column; flex-grow: 1; } .products-grid .product-item-info .price-box, .products-grid .product-item-info .product-item-inner { margin-top: auto; } .footer-static5 .footer-payments img, .footer-static5 .social-links li { vertical-align: middle; display: inline-flex; align-items: center; } .fotorama__nav__frame.fotorama__active { outline: 2px solid var(--awa-primary); outline-offset: -2px; opacity: 1 !important; } .fotorama__nav__frame { opacity: 0.6; transition: opacity 0.2s ease; } .fotorama__nav__frame:hover { opacity: 0.9; } .vmenu-promo-carousel { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; } .vmenu-promo-carousel .vmenu-promo-slide { grid-area: 1 / 1; transition: opacity 0.5s ease-in-out; z-index: 0; } .vmenu-promo-carousel .vmenu-promo-slide.vmenu-promo-slide--active { z-index: 1; } .footer_brand_list_slider:not([data-awa-footer-slider-ready='1']) { min-height: 56px; overflow: hidden; } body.cms-index-index .ayo-home5-wrapper > .top-home-content, body.cms-index-index .ayo-home5-wrapper > .awa-home-section { padding-block: clamp(20px, 3.2vw, 44px) !important; } body.cms-index-index .top-home-content + .top-home-content { margin-top: clamp(10px, 1.8vw, 24px) !important; } @media (min-width: 1025px) { .awa-nav-bar .awa-nav-categories .nav-sections { position: relative; z-index: 1; } .awa-nav-bar .awa-header-primary-nav .top-menu { position: relative; z-index: 2; } } .awa-b2b-promo-bar__layout { display: flex; justify-content: center; align-items: center; position: relative; } .awa-b2b-promo-close { position: absolute; right: 15px; background: none; border: 0; color: var(--awa-vfix-c2); cursor: pointer; padding: 4px; font-size: 20px; line-height: 1; display: flex; align-items: center; border-radius: 4px; } .awa-b2b-promo-close:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 2px; } body.cms-index-index .top-home-content--trust-and-offers { margin-top: clamp(6px, 1vw, 14px) !important; } body.cms-index-index .top-home-content--trust-and-offers .top-home-content__trust-offers-grid { row-gap: clamp(12px, 1.6vw, 20px) !important; } .awa-footer-muted-label { color: var(--awa-vfix-c1) !important; } :root { --awa-text-3xs: 10px; --awa-text-2xs: 11px; --awa-text-xs: 12px; --awa-text-sm: 13px; --awa-text-base: 14px; --awa-text-base-plus: 15px; --awa-text-md: 16px; --awa-text-lg: 18px; --awa-text-xl: 20px; --awa-text-xl-plus: 22px; --awa-text-2xl: 24px; --awa-text-3xl: 28px; --awa-text-4xl: 32px; --awa-text-5xl: 40px; --awa-text-fluid-xs: clamp(10px, calc(9.33px + 0.208vw), 12px); --awa-text-fluid-sm: clamp(12px, calc(11.33px + 0.208vw), 14px); --awa-text-fluid-base: clamp(14px, calc(13.33px + 0.208vw), 16px); --awa-text-fluid-md: clamp(14px, calc(13.33px + 0.208vw), 16px); --awa-text-fluid-lg: clamp(16px, calc(15.33px + 0.208vw), 18px); --awa-text-fluid-xl: clamp(18px, calc(17.33px + 0.208vw), 20px); --awa-text-fluid-2xl: clamp(24px, calc(21.33px + 0.833vw), 32px); --awa-text-fluid-3xl: clamp(28px, calc(25.33px + 0.833vw), 36px); --awa-text-fluid-h6: clamp(16px, calc(15.33px + 0.208vw), 18px); --awa-text-fluid-h5: clamp(18px, calc(16.67px + 0.417vw), 22px); --awa-text-fluid-h4: clamp(20px, calc(18.67px + 0.417vw), 24px); --awa-text-fluid-h3: clamp(24px, calc(22.67px + 0.417vw), 28px); --awa-text-fluid-h2: clamp(28px, calc(25.33px + 0.833vw), 36px); --awa-text-fluid-h1: clamp(32px, calc(26.67px + 1.667vw), 48px); --awa-font-size-2xs: var(--awa-text-3xs); --awa-font-size-xs: var(--awa-text-2xs); --awa-font-size-12: var(--awa-text-xs); --awa-font-size-sm: var(--awa-text-sm); --awa-font-size-14: var(--awa-text-base); --awa-font-size-md: var(--awa-text-base-plus); --awa-font-size-base: var(--awa-text-base); --awa-font-size: var(--awa-text-md); --awa-font-size-16: var(--awa-text-md); --awa-font-size-lg: var(--awa-text-lg); --awa-font-size-20: var(--awa-text-xl); --awa-font-size-xl: var(--awa-text-xl); --awa-font-size-24: var(--awa-text-2xl); --awa-font-size-2xl: var(--awa-text-2xl); --awa-font-size-3xl: var(--awa-text-4xl); --awa-font-xs: var(--awa-text-2xs); --awa-font-sm: var(--awa-text-sm); --awa-font-base: var(--awa-text-base); --awa-font-md: var(--awa-text-base-plus); --awa-font-lg: var(--awa-text-lg); --awa-font-xl: var(--awa-text-xl); --awa-fs-xs: var(--awa-text-fluid-xs); --awa-fs-sm: var(--awa-text-fluid-sm); --awa-fs-base: var(--awa-text-fluid-base); --awa-fs-md: var(--awa-text-fluid-md); --awa-fs-lg: var(--awa-text-fluid-lg); --awa-fs-xl: var(--awa-text-fluid-xl); --awa-fs-2xl: var(--awa-text-fluid-2xl); --awa-fs-3xl: var(--awa-text-fluid-3xl); --awa-fluid-text-sm: var(--awa-text-fluid-sm); --awa-fluid-text-sm2: var(--awa-text-fluid-sm); --awa-fluid-text-md: var(--awa-text-fluid-md); --awa-fluid-text-md2: var(--awa-text-fluid-md); --awa-fluid-text-md4: var(--awa-text-fluid-lg); --awa-fluid-text-md6: var(--awa-text-fluid-lg); --awa-fluid-text-lg: var(--awa-text-fluid-lg); --awa-fluid-text-xl2: var(--awa-text-fluid-xl); --awa-fluid-text-2xl: var(--awa-text-fluid-2xl); --awa-fluid-text-2xl2: var(--awa-text-fluid-2xl); --awa-text-10-5: 10.5px; --awa-text-12-5: 12.5px; --awa-text-36: 36px; --awa-fs-90: clamp(10px, calc(9px + 0.15vw), 12px); --awa-fs-115: clamp(12px, calc(11.5px + 0.15vw), 14px); --awa-fs-130: clamp(13px, calc(12.33px + 0.208vw), 15px); --awa-fs-xs2: var(--awa-text-fluid-xs); --awa-fs-xs3: var(--awa-text-fluid-xs); --awa-weight-light: 300; --awa-weight-normal: 400; --awa-weight-medium: 500; --awa-weight-semibold: 600; --awa-weight-bold: 700; --awa-weight-extrabold: 800; --awa-weight-semi: var(--awa-weight-semibold); --awa-leading-none: 1; --awa-leading-tight: 1.1; --awa-leading-compact: 1.2; --awa-leading-snug: 1.25; --awa-leading-base: 1.3; --awa-leading-cozy: 1.35; --awa-leading-normal: 1.4; --awa-leading-comfortable: 1.45; --awa-leading-relaxed: 1.5; --awa-leading-loose: 1.6; --awa-tracking-tighter: -0.02em; --awa-tracking-tight: -0.01em; --awa-tracking-normal: 0; --awa-tracking-wide: 0.02em; --awa-tracking-wider: 0.04em; --awa-tracking-widest: 0.08em; } .awa-text-3xs { font-size: var(--awa-text-3xs); } .awa-text-2xs { font-size: var(--awa-text-2xs); } .awa-text-xs { font-size: var(--awa-text-xs); } .awa-text-sm { font-size: var(--awa-text-sm); } .awa-text-base { font-size: var(--awa-text-base); } .awa-text-md { font-size: var(--awa-text-md); } .awa-text-lg { font-size: var(--awa-text-lg); } .awa-text-xl { font-size: var(--awa-text-xl); } .awa-text-2xl { font-size: var(--awa-text-2xl); } .awa-text-3xl { font-size: var(--awa-text-3xl); } .awa-text-4xl { font-size: var(--awa-text-4xl); } .awa-text-5xl { font-size: var(--awa-text-5xl); } .awa-font-light { font-weight: var(--awa-weight-light); } .awa-font-normal { font-weight: var(--awa-weight-normal); } .awa-font-medium { font-weight: var(--awa-weight-medium); } .awa-font-semibold { font-weight: var(--awa-weight-semibold); } .awa-font-bold { font-weight: var(--awa-weight-bold); } .awa-font-extrabold { font-weight: var(--awa-weight-extrabold); } .awa-leading-tight { line-height: var(--awa-leading-tight); } .awa-leading-snug { line-height: var(--awa-leading-snug); } .awa-leading-normal { line-height: var(--awa-leading-normal); } .awa-leading-relaxed { line-height: var(--awa-leading-relaxed); } .awa-leading-loose { line-height: var(--awa-leading-loose); } .awa-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .awa-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .awa-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .awa-tabular-nums { font-variant-numeric: tabular-nums; } .awa-nowrap { white-space: nowrap; } :root { --awa-neutral-50: #f8fafc; --awa-neutral-100: #f1f5f9; --awa-neutral-200: #e2e8f0; --awa-neutral-300: #cbd5e1; --awa-neutral-400: #94a3b8; --awa-neutral-500: #64748b; --awa-neutral-600: #475569; --awa-neutral-700: #334155; --awa-neutral-800: #1e293b; --awa-neutral-900: #0f172a; --awa-white: #ffffff; --awa-black: #000000; --awa-bg-page: var(--awa-white); --awa-bg-muted: #f7f7f7; --awa-bg-accent: #f0f0f0; --awa-bg-surface-alt: #fafafa; --awa-bg-hover: var(--awa-neutral-50); --awa-bg-selected: var(--awa-primary-50, #fef2f2); --awa-text-primary: var(--awa-neutral-900); --awa-text-secondary: var(--awa-neutral-600); --awa-text-tertiary: var(--awa-neutral-400); --awa-text-disabled: var(--awa-neutral-300); --awa-text-on-primary: var(--awa-white); --awa-border-default: #e5e5e5; --awa-border-hover: var(--awa-neutral-400); --awa-border-focus: var(--awa-red); --awa-border-error: var(--awa-red); --awa-focus-ring-color: var(--awa-red); --awa-link-color: var(--awa-red); --awa-link-hover: var(--awa-red-dark); --awa-social-fb: #365397; --awa-social-twitter: #1da1f2; --awa-social-whatsapp: #25d366; --awa-social-youtube: #ff0000; --awa-social-instagram: #e4405f; --awa-status-success: #16a34a; --awa-status-warning: #d97706; --awa-status-error: var(--awa-red); --awa-status-info: #2563eb; --awa-status-success-bg: #f0fdf4; --awa-status-warning-bg: #fffbeb; --awa-status-error-bg: #fef2f2; --awa-status-info-bg: #eff6ff; } .awa-text-primary { color: var(--awa-neutral-900); } .awa-text-secondary { color: var(--awa-neutral-600); } .awa-text-muted { color: var(--awa-neutral-400); } .awa-text-red { color: var(--awa-red); } .awa-text-success { color: var(--awa-status-success); } .awa-text-warning { color: var(--awa-status-warning); } .awa-text-white { color: var(--awa-white); } .awa-bg-white { background-color: var(--awa-white); } .awa-bg-muted { background-color: var(--awa-bg-muted); } .awa-bg-accent { background-color: var(--awa-bg-accent); } .awa-bg-red { background-color: var(--awa-red); } .awa-bg-dark { background-color: var(--awa-secondary); } .awa-bg-success { background-color: var(--awa-status-success-bg); } .awa-bg-warning { background-color: var(--awa-status-warning-bg); } .awa-bg-error { background-color: var(--awa-status-error-bg); } .awa-border-default { border-color: var(--awa-border-default); } .awa-border-red { border-color: var(--awa-red); } .awa-border-success { border-color: var(--awa-status-success); } :root { --awa-s-0: 0; --awa-s-px: 1px; --awa-s-0-5: 2px; --awa-s-1: 4px; --awa-s-1-5: 6px; --awa-s-2: 8px; --awa-s-2-5: 10px; --awa-s-3: 12px; --awa-s-3-5: 14px; --awa-s-4: 16px; --awa-s-5: 20px; --awa-s-6: 24px; --awa-s-7: 32px; --awa-s-8: 40px; --awa-s-9: 48px; --awa-s-10: 64px; --awa-s-12: 80px; --awa-s-16: 96px; --awa-s-xs: var(--awa-s-1); --awa-s-sm: var(--awa-s-2); --awa-s-md: var(--awa-s-3); --awa-s-lg: var(--awa-s-4); --awa-s-xl: var(--awa-s-5); --awa-s-2xl: var(--awa-s-6); --awa-s-3xl: var(--awa-s-7); --awa-s-4xl: var(--awa-s-8); --awa-s-5xl: var(--awa-s-9); --awa-s-6xl: var(--awa-s-10); --awa-shadow-none: none; --awa-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --awa-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --awa-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --awa-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --awa-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --awa-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); --awa-shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.2); --awa-shadow-brand: 0 4px 12px color-mix(in srgb, var(--awa-red) 24%, transparent); --awa-shadow-brand-lg: 0 8px 20px color-mix(in srgb, var(--awa-red) 18%, transparent); --awa-shadow-brand-xl: 0 8px 24px color-mix(in srgb, var(--awa-red) 36%, transparent); --awa-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--awa-red) 25%, transparent); --awa-shadow-focus-soft: 0 0 0 3px color-mix(in srgb, var(--awa-red) 12%, transparent); --awa-shadow-inset: inset 0 0 0 1px var(--awa-border-default, #e5e5e5); --awa-shadow-card: var(--awa-shadow-sm); --awa-shadow-card-hover: var(--awa-shadow-md); --awa-shadow-dropdown: 0 6px 20px rgba(0, 0, 0, 0.12); --awa-shadow-badge: 0 1px 4px rgba(0, 0, 0, 0.12); --awa-shadow-hover: var(--awa-shadow-md); --awa-shadow-red: var(--awa-shadow-brand); --awa-shadow-focus-ring: var(--awa-shadow-focus); --awa-radius-none: 0; --awa-radius-2xs: 4px; --awa-radius-xs: 4px; --awa-radius-sm: 8px; --awa-radius-md: 12px; --awa-radius-md-lg: 14px; --awa-radius-lg: 16px; --awa-radius-xl: 20px; --awa-radius-2xl: 24px; --awa-radius-pill: 9999px; --awa-radius-full: 9999px; --awa-radius: var(--awa-radius-md); --awa-duration-fast: 100ms; --awa-duration-base: 200ms; --awa-duration-slow: 300ms; --awa-duration-slower: 500ms; --awa-ease-default: cubic-bezier(0.4, 0, 0.2, 1); --awa-ease-in: cubic-bezier(0.4, 0, 1, 1); --awa-ease-out: cubic-bezier(0, 0, 0.2, 1); --awa-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --awa-transition-colors: color var(--awa-duration-base) var(--awa-ease-default), background-color var(--awa-duration-base) var(--awa-ease-default), border-color var(--awa-duration-base) var(--awa-ease-default); --awa-transition-shadow: box-shadow var(--awa-duration-base) var(--awa-ease-default); --awa-transition-transform: transform var(--awa-duration-fast) var(--awa-ease-default); --awa-transition-all: all var(--awa-duration-base) var(--awa-ease-default); } .awa-m-0 { margin: 0; } .awa-mt-0 { margin-top: 0; } .awa-mb-0 { margin-bottom: 0; } .awa-mb-1 { margin-bottom: var(--awa-s-1); } .awa-mb-2 { margin-bottom: var(--awa-s-2); } .awa-mb-3 { margin-bottom: var(--awa-s-3); } .awa-mb-4 { margin-bottom: var(--awa-s-4); } .awa-mb-6 { margin-bottom: var(--awa-s-6); } .awa-mb-8 { margin-bottom: var(--awa-s-8); } .awa-mx-auto { margin-inline: auto; } .awa-p-0 { padding: 0; } .awa-p-2 { padding: var(--awa-s-2); } .awa-p-3 { padding: var(--awa-s-3); } .awa-p-4 { padding: var(--awa-s-4); } .awa-p-6 { padding: var(--awa-s-6); } .awa-px-4 { padding-inline: var(--awa-s-4); } .awa-px-6 { padding-inline: var(--awa-s-6); } .awa-py-2 { padding-block: var(--awa-s-2); } .awa-py-4 { padding-block: var(--awa-s-4); } .awa-py-6 { padding-block: var(--awa-s-6); } .awa-gap-1 { gap: var(--awa-s-1); } .awa-gap-2 { gap: var(--awa-s-2); } .awa-gap-3 { gap: var(--awa-s-3); } .awa-gap-4 { gap: var(--awa-s-4); } .awa-gap-6 { gap: var(--awa-s-6); } .awa-shadow-none { box-shadow: var(--awa-shadow-none); } .awa-shadow-xs { box-shadow: var(--awa-shadow-xs); } .awa-shadow-sm { box-shadow: var(--awa-shadow-sm); } .awa-shadow { box-shadow: var(--awa-shadow); } .awa-shadow-md { box-shadow: var(--awa-shadow-md); } .awa-shadow-lg { box-shadow: var(--awa-shadow-lg); } .awa-shadow-xl { box-shadow: var(--awa-shadow-xl); } .awa-rounded-none { border-radius: var(--awa-radius-none); } .awa-rounded-sm { border-radius: var(--awa-radius-sm); } .awa-rounded { border-radius: var(--awa-radius-md); } .awa-rounded-lg { border-radius: var(--awa-radius-lg); } .awa-rounded-xl { border-radius: var(--awa-radius-xl); } .awa-rounded-pill { border-radius: var(--awa-radius-pill); } .awa-rounded-full { border-radius: var(--awa-radius-full); } @media (prefers-reduced-motion: reduce) { :root { --awa-duration-fast: 0ms; --awa-duration-base: 0ms; --awa-duration-slow: 0ms; --awa-duration-slower: 0ms; } } :root { --awa-primary: #b73337; --awa-primary-dark: #8e2629; --awa-primary-hover: #8e2629; --awa-primary-50: #fef2f2; --awa-primary-100: #fde8e8; --awa-primary-light: #f9e5e5; --awa-primary-subtle: rgba(183, 51, 55, 0.06); --awa-primary-10: rgba(183, 51, 55, 0.1); --awa-primary-15: rgba(183, 51, 55, 0.15); --awa-red: var(--awa-primary); --awa-secondary: #333333; --awa-secondary-hover: #2e2e2e; --awa-secondary-muted: #4a4a4a; --awa-color-dark: #333333; --awa-color-dark-text: #ffffff; --awa-text: #333333; --awa-text-muted: #666666; --awa-text-light: #999999; --awa-text-inverse: #ffffff; --awa-bg: #ffffff; --awa-bg-surface: #ffffff; --awa-bg-elevated: #ffffff; --awa-bg-dark: #333333; --awa-bg-overlay: rgba(0, 0, 0, 0.45); --awa-nav-bg: var(--awa-primary); --awa-nav-bg-hover: var(--awa-primary-hover); --awa-nav-text: var(--awa-text-inverse); --awa-nav-divider: rgba(255, 255, 255, 0.14); --awa-nav-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(15, 23, 42, 0.1); --awa-nav-pill-bg: rgba(255, 255, 255, 0.08); --awa-nav-pill-bg-hover: rgba(255, 255, 255, 0.16); --awa-nav-pill-border: rgba(255, 255, 255, 0.2); --awa-nav-pill-border-hover: rgba(255, 255, 255, 0.32); --awa-nav-pill-shadow: 0 8px 18px rgba(15, 23, 42, 0.12); --awa-nav-link-bg-hover: rgba(255, 255, 255, 0.14); --awa-nav-link-bg-active: rgba(0, 0, 0, 0.16); --awa-border: #e5e5e5; --awa-border-strong: #cbd5e1; --awa-border-subtle: #e5e7eb; --awa-border-width: 1px; --awa-border-width-strong: 2px; --awa-success: #16a34a; --awa-success-bg: #dcfce7; --awa-warning: #d97706; --awa-warning-bg: #fef3c7; --awa-error: #b73337; --awa-error-bg: rgba(183, 51, 55, 0.08); --awa-info: #0ea5e9; --awa-info-bg: #eff6ff; --awa-msg-success-text: #166534; --awa-msg-error-text: #8e2629; --awa-msg-warning-text: #92400e; --awa-msg-info-text: #1e40af; --awa-text-on-dark: rgba(255, 255, 255, 0.85); --awa-text-on-dark-muted: rgba(255, 255, 255, 0.5); --awa-text-on-dark-faint: rgba(255, 255, 255, 0.3); --awa-text-on-dark-muted-solid: #bbbbbb; --awa-whatsapp: #25D366; --awa-whatsapp-dark: #1da851; --awa-whatsapp-bright: #4dda85; --awa-whatsapp-bright-hover: #80edb1; --awa-bg-page: #f9fafb; --awa-bg-input: #f5f5f5; --awa-promo: #f5a623; --awa-skeleton: #ececec; --awa-gradient-warm: #e57373; --awa-gray-950: #0f172a; --awa-neutral-50: #f8fafc; --awa-neutral-100: #f1f5f9; --awa-neutral-200: #e2e8f0; --awa-neutral-300: #cbd5e1; --awa-neutral-400: #94a3b8; --awa-neutral-500: #64748b; --awa-neutral-600: #475569; --awa-neutral-700: #334155; --awa-neutral-800: #1e293b; --awa-neutral-900: #0f172a; --awa-radius-2xs: 4px; --awa-radius-xs: 4px; --awa-radius-sm: 4px; --awa-radius-md: 12px; --awa-radius-pill: 9999px; --awa-radius-lg: 16px; --awa-radius-xl: 16px; --awa-radius-2xl: 16px; --awa-radius-3xl: 16px; --awa-radius-full: 9999px; --awa-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --awa-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.06); --awa-shadow-md: 0 8px 20px -4px rgba(0, 0, 0, 0.08), 0 4px 8px -4px rgba(0, 0, 0, 0.04); --awa-shadow-lg: 0 20px 32px -8px rgba(0, 0, 0, 0.12), 0 8px 16px -8px rgba(0, 0, 0, 0.08); --awa-shadow-xl: 0 32px 64px -12px rgba(0, 0, 0, 0.16); --awa-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06); --awa-font-size-2xs: 10px; --awa-font-size-xs: 11px; --awa-font-size-12: 12px; --awa-font-size-sm: 13px; --awa-font-size-14: 14px; --awa-font-size-md: 15px; --awa-font-size-16: 16px; --awa-font-size-lg: 18px; --awa-font-size-20: 20px; --awa-font-size-xl: 22px; --awa-font-size-24: 24px; --awa-font-size-2xl: 28px; --awa-font-size-3xl: 36px; --awa-font-size-4xl: 48px; --awa-weight-normal: 400; --awa-weight-medium: 500; --awa-weight-semi: 600; --awa-weight-bold: 700; --awa-weight-black: 800; --awa-leading-tight: 1.15; --awa-leading-snug: 1.3; --awa-leading-normal: 1.5; --awa-leading-relaxed: 1.7; --awa-ease: cubic-bezier(0.4, 0, 0.2, 1); --awa-ease-out: cubic-bezier(0, 0, 0.2, 1); --awa-ease-in: cubic-bezier(0.4, 0, 1, 1); --awa-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --awa-duration-fast: 150ms; --awa-duration: 250ms; --awa-duration-slow: 400ms; --awa-hover-lift: -4px; --awa-hover-scale: 1.02; --awa-space-1: 4px; --awa-space-2: 8px; --awa-space-3: 12px; --awa-space-4: 16px; --awa-space-5: 20px; --awa-space-6: 24px; --awa-space-7: 32px; --awa-space-8: 40px; --awa-space-9: 48px; --awa-space-10: 48px; --awa-space-12: 56px; --awa-space-16: 80px; --awa-space-xs: var(--awa-space-1); --awa-space-sm: var(--awa-space-2); --awa-space-md: var(--awa-space-4); --awa-space-lg: var(--awa-space-6); --awa-space-xl: var(--awa-space-8); --awa-stack-tight: var(--awa-space-3); --awa-stack-base: var(--awa-space-6); --awa-stack-loose: var(--awa-space-8); --awa-gap-card: var(--awa-space-4); --awa-card-pad: var(--awa-space-5); --awa-card-radius: var(--awa-radius-lg); --awa-card-shadow: var(--awa-shadow-md); --awa-card-shadow-hover: var(--awa-shadow-lg); --awa-card-border: 1px solid rgba(0, 0, 0, 0.05); --awa-bento-gap: var(--awa-space-4); --awa-bento-radius: var(--awa-radius-lg); --awa-bento-bg: var(--awa-white); --awa-bento-border: 1px solid rgba(0, 0, 0, 0.04); --awa-bento-shadow: var(--awa-shadow-sm); --awa-glass-bg: rgba(255, 255, 255, 0.7); --awa-glass-blur: 12px; --awa-glass-border: 1px solid rgba(255, 255, 255, 0.3); --awa-section-header-mb: var(--awa-space-8); --awa-section-header-pb: var(--awa-space-3); --awa-section-header-border: none; --awa-section-header-accent: none; --awa-section-header-title-pl: 0; --awa-section-header-font-size: clamp(20px, 3vw, 28px); --awa-section-header-font-weight: 800; --awa-section-header-color: var(--awa-text); --awa-section-header-letter-spacing: -0.02em; --awa-section-header-link-size: var(--awa-font-size-sm); --awa-section-header-link-color: var(--awa-primary); --awa-card-btn-h: 44px; --awa-card-pad-img: 16px; --awa-card-pad-body: 12px 16px; --awa-card-pad-action: 0 16px 16px; --awa-card-img-h: 240px; --awa-card-img-inner-h: 200px; --awa-section-gap: 24px; --awa-section-gap-sm: 16px; --awa-container-pad: 16px; --awa-container-padding: var(--awa-container-pad); --awa-container: var(--awa-container-max); --awa-container-max: 1280px; --awa-container-small-max: 960px; --awa-container-wide-max: 1280px; --awa-container-narrow: 960px; --awa-container-wide: 1280px; --awa-content-max-readable: 72ch; --awa-heading-1-size: clamp(34px, 5vw, 52px); --awa-heading-2-size: clamp(28px, 4vw, 40px); --awa-heading-3-size: clamp(22px, 3vw, 32px); --awa-heading-4-size: clamp(18px, 2.5vw, 24px); --awa-heading-5-size: clamp(16px, 2vw, 20px); --awa-heading-6-size: clamp(14px, 1.5vw, 16px); --awa-heading-line-height: 1.1; --awa-heading-letter-spacing: -0.03em; --awa-icon-size-sm: 16px; --awa-icon-size-md: 20px; --awa-icon-size-lg: 24px; --container-max: var(--awa-container-max); --container-pad: var(--awa-container-padding); --section-gap: var(--awa-section-gap); --section-gap-sm: var(--awa-section-gap-sm); --awa-z-base: 1; --awa-z-dropdown: 100; --awa-z-tooltip: 150; --awa-z-sticky: 200; --awa-z-floating-btn: 250; --awa-z-overlay: 500; --awa-z-modal-backdrop: 999; --awa-z-modal: 1000; --awa-z-toast: 1100; --awa-pdp-gallery-min-h: 500px; } :root { --awa-vmenu-width: 260px; --awa-vmenu-item-h: 42px; --awa-vmenu-icon-size: 18px; --awa-vmenu-font-size: 13px; --awa-vmenu-sub-font: 12px; --awa-vmenu-header-h: 44px; --awa-vmenu-header-bg: var(--awa-primary); --awa-vmenu-header-color: #ffffff; --awa-vmenu-active-bg: var(--awa-primary-light); --awa-vmenu-active-border: var(--awa-primary); --awa-vmenu-hover-bg: var(--awa-bg-surface); --awa-vmenu-open-bg: var(--awa-bg-surface); --awa-vmenu-sub-bg: var(--awa-bg-surface); --awa-vmenu-sub-indent: 44px; --awa-flyout-width: 480px; --awa-flyout-col-icon: 48px; --awa-page-with-vmenu: grid; --awa-vmenu-top: 0px; } :root { --awa-font-xs: 11px; --awa-font-sm: 13px; --awa-font-md: 15px; --awa-font-lg: 18px; --awa-font-xl: 20px; } @media (min-width: 768px) { :root { --awa-section-gap: 32px; --awa-section-gap-sm: 24px; } } @media (min-width: 1024px) { :root { --awa-section-gap: 40px; } } body .page-wrapper .field input[type='text'], body .page-wrapper .field input[type='email'], body .page-wrapper .field input[type='tel'], body .page-wrapper .field input[type='password'], body .page-wrapper .field input[type='number'], body .page-wrapper .field input[type='search'], body .page-wrapper .field input[type='url'], body .page-wrapper .field input[type='date'], body .page-wrapper input.input-text, body .page-wrapper .control input[type='text'], body .page-wrapper .control input[type='email'], body .page-wrapper .control input[type='tel'], body .page-wrapper .control input[type='password'], body .page-wrapper .control input[type='number'], body .page-wrapper .awa-form-control { display: block; width: 100%; min-height: 44px; padding: 0 16px; font-size: 14px; font-family: inherit; font-weight: 400; color: #333333; background: #ffffff; border: 1.5px solid #e5e5e5; border-radius: 4px; line-height: 1.2; transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease; appearance: none; -webkit-appearance: none; box-sizing: border-box; display: block !important; width: 100% !important; max-width: 100% !important; min-height: var(--awa-input-min-h) !important; padding: var(--awa-input-pad-y) var(--awa-input-pad-x) !important; border: var(--awa-input-border) !important; border-radius: var(--awa-input-radius) !important; background: var(--awa-input-bg) !important; color: var(--awa-input-color) !important; font-size: var(--awa-input-fs) !important; line-height: 1.4 !important; box-sizing: border-box !important; box-shadow: none !important; transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), outline-color 150ms cubic-bezier(0.4, 0, 0.2, 1) !important; } body .page-wrapper .field input[type='text']::placeholder, body .page-wrapper .field input[type='email']::placeholder, body .page-wrapper .field input[type='tel']::placeholder, body .page-wrapper .field input[type='password']::placeholder, body .page-wrapper .field input[type='number']::placeholder, body .page-wrapper .field input[type='search']::placeholder, body .page-wrapper .field input[type='url']::placeholder, body .page-wrapper .field input[type='date']::placeholder, body .page-wrapper input.input-text::placeholder, body .page-wrapper .control input[type='text']::placeholder, body .page-wrapper .control input[type='email']::placeholder, body .page-wrapper .control input[type='tel']::placeholder, body .page-wrapper .control input[type='password']::placeholder, body .page-wrapper .control input[type='number']::placeholder, body .page-wrapper .awa-form-control::placeholder { color: #94a3b8; opacity: 1; } body .page-wrapper .field input[type='text']:hover:not(:focus):not(:disabled):not([disabled]), body .page-wrapper .field input[type='email']:hover:not(:focus):not(:disabled):not([disabled]), body .page-wrapper .field input[type='tel']:hover:not(:focus):not(:disabled):not([disabled]), body .page-wrapper .field input[type='password']:hover:not(:focus):not(:disabled):not([disabled]), body .page-wrapper .field input[type='number']:hover:not(:focus):not(:disabled):not([disabled]), body .page-wrapper .field input[type='search']:hover:not(:focus):not(:disabled):not([disabled]), body .page-wrapper .field input[type='url']:hover:not(:focus):not(:disabled):not([disabled]), body .page-wrapper .field input[type='date']:hover:not(:focus):not(:disabled):not([disabled]), body .page-wrapper input.input-text:hover:not(:focus):not(:disabled):not([disabled]), body .page-wrapper .control input[type='text']:hover:not(:focus):not(:disabled):not([disabled]), body .page-wrapper .control input[type='email']:hover:not(:focus):not(:disabled):not([disabled]), body .page-wrapper .control input[type='tel']:hover:not(:focus):not(:disabled):not([disabled]), body .page-wrapper .control input[type='password']:hover:not(:focus):not(:disabled):not([disabled]), body .page-wrapper .control input[type='number']:hover:not(:focus):not(:disabled):not([disabled]), body .page-wrapper .awa-form-control:hover:not(:focus):not(:disabled):not([disabled]) { border-color: #94a3b8; } body .page-wrapper .field input[type='text']:focus, body .page-wrapper .field input[type='email']:focus, body .page-wrapper .field input[type='tel']:focus, body .page-wrapper .field input[type='password']:focus, body .page-wrapper .field input[type='number']:focus, body .page-wrapper .field input[type='search']:focus, body .page-wrapper .field input[type='url']:focus, body .page-wrapper .field input[type='date']:focus, body .page-wrapper input.input-text:focus, body .page-wrapper .control input[type='text']:focus, body .page-wrapper .control input[type='email']:focus, body .page-wrapper .control input[type='tel']:focus, body .page-wrapper .control input[type='password']:focus, body .page-wrapper .control input[type='number']:focus, body .page-wrapper .awa-form-control:focus, body .page-wrapper .field input[type='text']:focus-visible, body .page-wrapper .field input[type='email']:focus-visible, body .page-wrapper .field input[type='tel']:focus-visible, body .page-wrapper .field input[type='password']:focus-visible, body .page-wrapper .field input[type='number']:focus-visible, body .page-wrapper .field input[type='search']:focus-visible, body .page-wrapper .field input[type='url']:focus-visible, body .page-wrapper .field input[type='date']:focus-visible, body .page-wrapper input.input-text:focus-visible, body .page-wrapper .control input[type='text']:focus-visible, body .page-wrapper .control input[type='email']:focus-visible, body .page-wrapper .control input[type='tel']:focus-visible, body .page-wrapper .control input[type='password']:focus-visible, body .page-wrapper .control input[type='number']:focus-visible, body .page-wrapper .awa-form-control:focus-visible { outline: none; border-color: #b73337; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.12); background: #ffffff; } body .page-wrapper .field input[type='text']:disabled, body .page-wrapper .field input[type='email']:disabled, body .page-wrapper .field input[type='tel']:disabled, body .page-wrapper .field input[type='password']:disabled, body .page-wrapper .field input[type='number']:disabled, body .page-wrapper .field input[type='search']:disabled, body .page-wrapper .field input[type='url']:disabled, body .page-wrapper .field input[type='date']:disabled, body .page-wrapper input.input-text:disabled, body .page-wrapper .control input[type='text']:disabled, body .page-wrapper .control input[type='email']:disabled, body .page-wrapper .control input[type='tel']:disabled, body .page-wrapper .control input[type='password']:disabled, body .page-wrapper .control input[type='number']:disabled, body .page-wrapper .awa-form-control:disabled, body .page-wrapper .field input[type='text'][disabled], body .page-wrapper .field input[type='email'][disabled], body .page-wrapper .field input[type='tel'][disabled], body .page-wrapper .field input[type='password'][disabled], body .page-wrapper .field input[type='number'][disabled], body .page-wrapper .field input[type='search'][disabled], body .page-wrapper .field input[type='url'][disabled], body .page-wrapper .field input[type='date'][disabled], body .page-wrapper input.input-text[disabled], body .page-wrapper .control input[type='text'][disabled], body .page-wrapper .control input[type='email'][disabled], body .page-wrapper .control input[type='tel'][disabled], body .page-wrapper .control input[type='password'][disabled], body .page-wrapper .control input[type='number'][disabled], body .page-wrapper .awa-form-control[disabled] { background: #f7f7f7; border-color: #e5e5e5; color: #94a3b8; cursor: not-allowed; opacity: 0.65; } body .page-wrapper .field input[type='text']::placeholder, body .page-wrapper .field input[type='email']::placeholder, body .page-wrapper .field input[type='tel']::placeholder, body .page-wrapper .field input[type='password']::placeholder, body .page-wrapper .field input[type='number']::placeholder, body .page-wrapper .field input[type='search']::placeholder, body .page-wrapper .field input[type='url']::placeholder, body .page-wrapper .field input[type='date']::placeholder, body .page-wrapper input.input-text::placeholder, body .page-wrapper .control input[type='text']::placeholder, body .page-wrapper .control input[type='email']::placeholder, body .page-wrapper .control input[type='tel']::placeholder, body .page-wrapper .control input[type='password']::placeholder, body .page-wrapper .control input[type='number']::placeholder, body .page-wrapper .awa-form-control::placeholder { color: var(--awa-text-muted, #666666) !important; opacity: 1 !important; } @media (hover: hover) and (pointer: fine) { body .page-wrapper .field input[type='text']:hover:not(:disabled):not([disabled]), body .page-wrapper .field input[type='email']:hover:not(:disabled):not([disabled]), body .page-wrapper .field input[type='tel']:hover:not(:disabled):not([disabled]), body .page-wrapper .field input[type='password']:hover:not(:disabled):not([disabled]), body .page-wrapper .field input[type='number']:hover:not(:disabled):not([disabled]), body .page-wrapper .field input[type='search']:hover:not(:disabled):not([disabled]), body .page-wrapper .field input[type='url']:hover:not(:disabled):not([disabled]), body .page-wrapper .field input[type='date']:hover:not(:disabled):not([disabled]), body .page-wrapper input.input-text:hover:not(:disabled):not([disabled]), body .page-wrapper .control input[type='text']:hover:not(:disabled):not([disabled]), body .page-wrapper .control input[type='email']:hover:not(:disabled):not([disabled]), body .page-wrapper .control input[type='tel']:hover:not(:disabled):not([disabled]), body .page-wrapper .control input[type='password']:hover:not(:disabled):not([disabled]), body .page-wrapper .control input[type='number']:hover:not(:disabled):not([disabled]), body .page-wrapper .awa-form-control:hover:not(:disabled):not([disabled]) { border-color: color-mix(in srgb, var(--awa-primary, #b73337) 28%, var(--awa-border, #e5e5e5)) !important; } } body .page-wrapper .field input[type='text']:focus-visible, body .page-wrapper .field input[type='email']:focus-visible, body .page-wrapper .field input[type='tel']:focus-visible, body .page-wrapper .field input[type='password']:focus-visible, body .page-wrapper .field input[type='number']:focus-visible, body .page-wrapper .field input[type='search']:focus-visible, body .page-wrapper .field input[type='url']:focus-visible, body .page-wrapper .field input[type='date']:focus-visible, body .page-wrapper input.input-text:focus-visible, body .page-wrapper .control input[type='text']:focus-visible, body .page-wrapper .control input[type='email']:focus-visible, body .page-wrapper .control input[type='tel']:focus-visible, body .page-wrapper .control input[type='password']:focus-visible, body .page-wrapper .control input[type='number']:focus-visible, body .page-wrapper .awa-form-control:focus-visible { outline: 2px solid var(--awa-primary, #b73337) !important; outline-offset: 2px !important; border-color: var(--awa-primary, #b73337) !important; } body .page-wrapper .field input[type='text']:focus:not(:focus-visible), body .page-wrapper .field input[type='email']:focus:not(:focus-visible), body .page-wrapper .field input[type='tel']:focus:not(:focus-visible), body .page-wrapper .field input[type='password']:focus:not(:focus-visible), body .page-wrapper .field input[type='number']:focus:not(:focus-visible), body .page-wrapper .field input[type='search']:focus:not(:focus-visible), body .page-wrapper .field input[type='url']:focus:not(:focus-visible), body .page-wrapper .field input[type='date']:focus:not(:focus-visible), body .page-wrapper input.input-text:focus:not(:focus-visible), body .page-wrapper .control input[type='text']:focus:not(:focus-visible), body .page-wrapper .control input[type='email']:focus:not(:focus-visible), body .page-wrapper .control input[type='tel']:focus:not(:focus-visible), body .page-wrapper .control input[type='password']:focus:not(:focus-visible), body .page-wrapper .control input[type='number']:focus:not(:focus-visible), body .page-wrapper .awa-form-control:focus:not(:focus-visible) { outline: none !important; } body .page-wrapper .field textarea, body .page-wrapper .control textarea, body .page-wrapper textarea.input-text { display: block; width: 100%; min-height: 44px; padding: 0 16px; font-size: 14px; font-family: inherit; font-weight: 400; color: #333333; background: #ffffff; border: 1.5px solid #e5e5e5; border-radius: 4px; line-height: 1.2; transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease; appearance: none; -webkit-appearance: none; box-sizing: border-box; display: block !important; width: 100% !important; max-width: 100% !important; min-height: var(--awa-input-min-h) !important; padding: var(--awa-input-pad-y) var(--awa-input-pad-x) !important; border: var(--awa-input-border) !important; border-radius: var(--awa-input-radius) !important; background: var(--awa-input-bg) !important; color: var(--awa-input-color) !important; font-size: var(--awa-input-fs) !important; line-height: 1.4 !important; box-sizing: border-box !important; box-shadow: none !important; transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), outline-color 150ms cubic-bezier(0.4, 0, 0.2, 1) !important; min-height: 100px; padding-top: 12px; padding-bottom: 12px; resize: vertical; line-height: 1.6; } body .page-wrapper .field textarea::placeholder, body .page-wrapper .control textarea::placeholder, body .page-wrapper textarea.input-text::placeholder { color: #94a3b8; opacity: 1; } body .page-wrapper .field textarea:hover:not(:focus):not(:disabled):not([disabled]), body .page-wrapper .control textarea:hover:not(:focus):not(:disabled):not([disabled]), body .page-wrapper textarea.input-text:hover:not(:focus):not(:disabled):not([disabled]) { border-color: #94a3b8; } body .page-wrapper .field textarea:focus, body .page-wrapper .control textarea:focus, body .page-wrapper textarea.input-text:focus, body .page-wrapper .field textarea:focus-visible, body .page-wrapper .control textarea:focus-visible, body .page-wrapper textarea.input-text:focus-visible { outline: none; border-color: #b73337; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.12); background: #ffffff; } body .page-wrapper .field textarea:disabled, body .page-wrapper .control textarea:disabled, body .page-wrapper textarea.input-text:disabled, body .page-wrapper .field textarea[disabled], body .page-wrapper .control textarea[disabled], body .page-wrapper textarea.input-text[disabled] { background: #f7f7f7; border-color: #e5e5e5; color: #94a3b8; cursor: not-allowed; opacity: 0.65; } body .page-wrapper .field textarea::placeholder, body .page-wrapper .control textarea::placeholder, body .page-wrapper textarea.input-text::placeholder { color: var(--awa-text-muted, #666666) !important; opacity: 1 !important; } @media (hover: hover) and (pointer: fine) { body .page-wrapper .field textarea:hover:not(:disabled):not([disabled]), body .page-wrapper .control textarea:hover:not(:disabled):not([disabled]), body .page-wrapper textarea.input-text:hover:not(:disabled):not([disabled]) { border-color: color-mix(in srgb, var(--awa-primary, #b73337) 28%, var(--awa-border, #e5e5e5)) !important; } } body .page-wrapper .field textarea:focus-visible, body .page-wrapper .control textarea:focus-visible, body .page-wrapper textarea.input-text:focus-visible { outline: 2px solid var(--awa-primary, #b73337) !important; outline-offset: 2px !important; border-color: var(--awa-primary, #b73337) !important; } body .page-wrapper .field textarea:focus:not(:focus-visible), body .page-wrapper .control textarea:focus:not(:focus-visible), body .page-wrapper textarea.input-text:focus:not(:focus-visible) { outline: none !important; } body .page-wrapper .field select, body .page-wrapper .control select, body .page-wrapper select.select { display: block; width: 100%; min-height: 44px; padding: 0 16px; font-size: 14px; font-family: inherit; font-weight: 400; color: #333333; background: #ffffff; border: 1.5px solid #e5e5e5; border-radius: 4px; line-height: 1.2; transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease; appearance: none; -webkit-appearance: none; box-sizing: border-box; display: block !important; width: 100% !important; max-width: 100% !important; min-height: var(--awa-input-min-h) !important; padding: var(--awa-input-pad-y) var(--awa-input-pad-x) !important; border: var(--awa-input-border) !important; border-radius: var(--awa-input-radius) !important; background: var(--awa-input-bg) !important; color: var(--awa-input-color) !important; font-size: var(--awa-input-fs) !important; line-height: 1.4 !important; box-sizing: border-box !important; box-shadow: none !important; transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), outline-color 150ms cubic-bezier(0.4, 0, 0.2, 1) !important; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; cursor: pointer; } body .page-wrapper .field select::placeholder, body .page-wrapper .control select::placeholder, body .page-wrapper select.select::placeholder { color: #94a3b8; opacity: 1; } body .page-wrapper .field select:hover:not(:focus):not(:disabled):not([disabled]), body .page-wrapper .control select:hover:not(:focus):not(:disabled):not([disabled]), body .page-wrapper select.select:hover:not(:focus):not(:disabled):not([disabled]) { border-color: #94a3b8; } body .page-wrapper .field select:focus, body .page-wrapper .control select:focus, body .page-wrapper select.select:focus, body .page-wrapper .field select:focus-visible, body .page-wrapper .control select:focus-visible, body .page-wrapper select.select:focus-visible { outline: none; border-color: #b73337; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.12); background: #ffffff; } body .page-wrapper .field select:disabled, body .page-wrapper .control select:disabled, body .page-wrapper select.select:disabled, body .page-wrapper .field select[disabled], body .page-wrapper .control select[disabled], body .page-wrapper select.select[disabled] { background: #f7f7f7; border-color: #e5e5e5; color: #94a3b8; cursor: not-allowed; opacity: 0.65; } body .page-wrapper .field select::placeholder, body .page-wrapper .control select::placeholder, body .page-wrapper select.select::placeholder { color: var(--awa-text-muted, #666666) !important; opacity: 1 !important; } @media (hover: hover) and (pointer: fine) { body .page-wrapper .field select:hover:not(:disabled):not([disabled]), body .page-wrapper .control select:hover:not(:disabled):not([disabled]), body .page-wrapper select.select:hover:not(:disabled):not([disabled]) { border-color: color-mix(in srgb, var(--awa-primary, #b73337) 28%, var(--awa-border, #e5e5e5)) !important; } } body .page-wrapper .field select:focus-visible, body .page-wrapper .control select:focus-visible, body .page-wrapper select.select:focus-visible { outline: 2px solid var(--awa-primary, #b73337) !important; outline-offset: 2px !important; border-color: var(--awa-primary, #b73337) !important; } body .page-wrapper .field select:focus:not(:focus-visible), body .page-wrapper .control select:focus:not(:focus-visible), body .page-wrapper select.select:focus:not(:focus-visible) { outline: none !important; } body .page-wrapper .field .label, body .page-wrapper .field > label, body .page-wrapper .control label, body .page-wrapper .fieldset .legend, body .page-wrapper .awa-form-label { display: block; font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.4; } body .page-wrapper .field.required .label::after, body .page-wrapper .field._required .label::after, body .page-wrapper .required label::after { content: ' *'; color: #b73337; font-weight: 700; } body .page-wrapper .fieldset { border: none; padding: 0; margin: 0; } body .page-wrapper .fieldset .field, body .page-wrapper .form .field { margin-bottom: 20px; } body .page-wrapper .fieldset .field:last-child, body .page-wrapper .form .field:last-child { margin-bottom: 0; } body .page-wrapper .mage-error, body .page-wrapper .field-error, body .page-wrapper div.mage-error, body .page-wrapper .message.error:not(.global-messages .message.error) { display: flex !important; align-items: flex-start; gap: 4px; margin-top: 4px; font-size: 12px; font-weight: 500; color: #8e2629; line-height: 1.4; } body .page-wrapper .mage-error::before, body .page-wrapper .field-error::before, body .page-wrapper div.mage-error::before, body .page-wrapper .message.error:not(.global-messages .message.error)::before { content: '⚠'; flex-shrink: 0; font-size: var(--awa-font-xs); margin-top: 1px; } body .page-wrapper .field input[type='text'].mage-error, body .page-wrapper .field input[type='email'].mage-error, body .page-wrapper .field input[type='tel'].mage-error, body .page-wrapper .field input[type='password'].mage-error, body .page-wrapper .field input[type='number'].mage-error, body .page-wrapper .field select.mage-error, body .page-wrapper .field textarea.mage-error, body .page-wrapper input.input-text.mage-error { border-color: #b73337; background: rgba(183, 51, 55, 0.08); box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.08); } body .page-wrapper .field input[type='text'].mage-error:focus, body .page-wrapper .field input[type='email'].mage-error:focus, body .page-wrapper .field input[type='tel'].mage-error:focus, body .page-wrapper .field input[type='password'].mage-error:focus, body .page-wrapper .field input[type='number'].mage-error:focus, body .page-wrapper .field select.mage-error:focus, body .page-wrapper .field textarea.mage-error:focus, body .page-wrapper input.input-text.mage-error:focus, body .page-wrapper .field input[type='text'].mage-error:focus-visible, body .page-wrapper .field input[type='email'].mage-error:focus-visible, body .page-wrapper .field input[type='tel'].mage-error:focus-visible, body .page-wrapper .field input[type='password'].mage-error:focus-visible, body .page-wrapper .field input[type='number'].mage-error:focus-visible, body .page-wrapper .field select.mage-error:focus-visible, body .page-wrapper .field textarea.mage-error:focus-visible, body .page-wrapper input.input-text.mage-error:focus-visible { border-color: #b73337; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.14); } body .page-wrapper .field input[type='checkbox'], body .page-wrapper .field input[type='radio'] { accent-color: #b73337; width: 16px; height: 16px; cursor: pointer; } body .page-wrapper .fieldset .legend { font-size: 16px; font-weight: 700; color: #333333; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid #e5e5e5; letter-spacing: 0; text-transform: none; width: 100%; } body .page-wrapper .form-create-account .fieldset + .fieldset, body .page-wrapper .form-login .fieldset + .fieldset, body .page-wrapper .form-address-edit .fieldset + .fieldset, body .page-wrapper .form-edit-account .fieldset + .fieldset, body .page-wrapper .form-newsletter-manage .fieldset + .fieldset { margin-top: 32px; } body .page-wrapper .fieldset .field.two-fields, body .page-wrapper .form .fields.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 480px) { body .page-wrapper .fieldset .field.two-fields, body .page-wrapper .form .fields.two-fields { grid-template-columns: 1fr; } } body .page-wrapper .awa-char-count { display: block; text-align: right; font-size: 12px; color: #94a3b8; margin-top: 4px; } @media (max-width: 768px) { body .page-wrapper .field input[type='text'], body .page-wrapper .field input[type='email'], body .page-wrapper .field input[type='tel'], body .page-wrapper .field input[type='password'], body .page-wrapper .field select, body .page-wrapper input.input-text { font-size: var(--awa-fs-base); } } @media (prefers-reduced-motion: reduce) { body .page-wrapper .field input, body .page-wrapper .field select, body .page-wrapper .field textarea { transition: none; } } body .page-wrapper .form-edit-account, body .page-wrapper .form-address-edit, body .page-wrapper .form-newsletter-manage { max-width: 560px; } .awa-btn-group, body .page-wrapper .actions-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 32px; } body .page-wrapper .actions-toolbar .primary, body .page-wrapper .actions-toolbar .secondary { display: flex; align-items: center; gap: 16px; margin: 0; float: none; } .awa-card { background: #ffffff; border-radius: 12px; box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06); padding: 32px; } .awa-card--flat { box-shadow: none; border: 1px solid #e5e7eb; } .awa-card--compact { padding: 24px; } .awa-card__title { font-size: 18px; font-weight: 700; color: #333333; margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid #e5e7eb; } .awa-card__section { padding-top: 24px; border-top: 1px solid #e5e7eb; } .awa-card__section:first-child { border-top: none; padding-top: 0; } .awa-card__label { font-size: 12px; font-weight: 500; color: #666666; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .awa-card__value { font-size: 16px; font-weight: 700; color: #333333; } .awa-card__value--primary { color: #b73337; } .awa-card__value--success { color: #16a34a; } .awa-card__value--muted { color: #666666; font-weight: 400; } .awa-badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 9999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2; } .awa-badge--success { background: #dcfce7; color: #16a34a; } .awa-badge--warning { background: #fef3c7; color: #d97706; } .awa-badge--error { background: rgba(183, 51, 55, 0.08); color: #b73337; } .awa-badge--primary { background: rgba(183, 51, 55, 0.08); color: #b73337; } body .page-wrapper .action.primary, body .page-main .action.primary, body .page-wrapper .action.tocart, body .page-main .action.tocart, body .page-wrapper .action.login, body .page-main .action.login, body .page-wrapper .action.checkout, body .page-main .action.checkout, body .page-wrapper .action.update, body .page-main .action.update, body .page-wrapper .btn-primary, body .page-main .btn-primary, body .page-wrapper .button.btn-cart, body .page-main .button.btn-cart, body .page-wrapper button.action-primary, body .page-main button.action-primary, body .page-wrapper .awa-btn-primary, body .page-main .awa-btn-primary { background: var(--awa-primary); color: var(--awa-text-inverse); border-color: var(--awa-primary); gap: var(--awa-space-sm); padding: 0 var(--awa-space-lg); font-size: var(--awa-font-size-14); font-weight: var(--awa-weight-semi); border-radius: var(--awa-radius-sm); border: var(--awa-border-width) solid transparent; transition: background-color var(--awa-duration) var(--awa-ease), border-color var(--awa-duration) var(--awa-ease), color var(--awa-duration) var(--awa-ease), box-shadow var(--awa-duration) var(--awa-ease), transform var(--awa-duration-fast) var(--awa-ease); -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; font-size: 14px; font-weight: 600; font-family: inherit; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; border: none; border-radius: 4px; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 150ms ease; user-select: none; vertical-align: middle; position: relative; overflow: hidden; background: #b73337; color: #ffffff; border: 1.5px solid #b73337; box-shadow: 0 2px 8px rgba(183, 51, 55, 0.24); } body .page-wrapper .action.primary:disabled, body .page-main .action.primary:disabled, body .page-wrapper .action.tocart:disabled, body .page-main .action.tocart:disabled, body .page-wrapper .action.login:disabled, body .page-main .action.login:disabled, body .page-wrapper .action.checkout:disabled, body .page-main .action.checkout:disabled, body .page-wrapper .action.update:disabled, body .page-main .action.update:disabled, body .page-wrapper .btn-primary:disabled, body .page-main .btn-primary:disabled, body .page-wrapper .button.btn-cart:disabled, body .page-main .button.btn-cart:disabled, body .page-wrapper button.action-primary:disabled, body .page-main button.action-primary:disabled, body .page-wrapper .awa-btn-primary:disabled, body .page-main .awa-btn-primary:disabled, body .page-wrapper .action.primary[disabled], body .page-main .action.primary[disabled], body .page-wrapper .action.tocart[disabled], body .page-main .action.tocart[disabled], body .page-wrapper .action.login[disabled], body .page-main .action.login[disabled], body .page-wrapper .action.checkout[disabled], body .page-main .action.checkout[disabled], body .page-wrapper .action.update[disabled], body .page-main .action.update[disabled], body .page-wrapper .btn-primary[disabled], body .page-main .btn-primary[disabled], body .page-wrapper .button.btn-cart[disabled], body .page-main .button.btn-cart[disabled], body .page-wrapper button.action-primary[disabled], body .page-main button.action-primary[disabled], body .page-wrapper .awa-btn-primary[disabled], body .page-main .awa-btn-primary[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none; } body .page-wrapper .action.primary:active:not(:disabled), body .page-main .action.primary:active:not(:disabled), body .page-wrapper .action.tocart:active:not(:disabled), body .page-main .action.tocart:active:not(:disabled), body .page-wrapper .action.login:active:not(:disabled), body .page-main .action.login:active:not(:disabled), body .page-wrapper .action.checkout:active:not(:disabled), body .page-main .action.checkout:active:not(:disabled), body .page-wrapper .action.update:active:not(:disabled), body .page-main .action.update:active:not(:disabled), body .page-wrapper .btn-primary:active:not(:disabled), body .page-main .btn-primary:active:not(:disabled), body .page-wrapper .button.btn-cart:active:not(:disabled), body .page-main .button.btn-cart:active:not(:disabled), body .page-wrapper button.action-primary:active:not(:disabled), body .page-main button.action-primary:active:not(:disabled), body .page-wrapper .awa-btn-primary:active:not(:disabled), body .page-main .awa-btn-primary:active:not(:disabled) { transform: scale(0.97); } body .page-wrapper .action.primary:focus-visible, body .page-main .action.primary:focus-visible, body .page-wrapper .action.tocart:focus-visible, body .page-main .action.tocart:focus-visible, body .page-wrapper .action.login:focus-visible, body .page-main .action.login:focus-visible, body .page-wrapper .action.checkout:focus-visible, body .page-main .action.checkout:focus-visible, body .page-wrapper .action.update:focus-visible, body .page-main .action.update:focus-visible, body .page-wrapper .btn-primary:focus-visible, body .page-main .btn-primary:focus-visible, body .page-wrapper .button.btn-cart:focus-visible, body .page-main .button.btn-cart:focus-visible, body .page-wrapper button.action-primary:focus-visible, body .page-main button.action-primary:focus-visible, body .page-wrapper .awa-btn-primary:focus-visible, body .page-main .awa-btn-primary:focus-visible { outline: var(--awa-border-width-strong) solid var(--awa-primary); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.25); } body .page-wrapper .action.primary svg, body .page-main .action.primary svg, body .page-wrapper .action.tocart svg, body .page-main .action.tocart svg, body .page-wrapper .action.login svg, body .page-main .action.login svg, body .page-wrapper .action.checkout svg, body .page-main .action.checkout svg, body .page-wrapper .action.update svg, body .page-main .action.update svg, body .page-wrapper .btn-primary svg, body .page-main .btn-primary svg, body .page-wrapper .button.btn-cart svg, body .page-main .button.btn-cart svg, body .page-wrapper button.action-primary svg, body .page-main button.action-primary svg, body .page-wrapper .awa-btn-primary svg, body .page-main .awa-btn-primary svg, body .page-wrapper .action.primary i, body .page-main .action.primary i, body .page-wrapper .action.tocart i, body .page-main .action.tocart i, body .page-wrapper .action.login i, body .page-main .action.login i, body .page-wrapper .action.checkout i, body .page-main .action.checkout i, body .page-wrapper .action.update i, body .page-main .action.update i, body .page-wrapper .btn-primary i, body .page-main .btn-primary i, body .page-wrapper .button.btn-cart i, body .page-main .button.btn-cart i, body .page-wrapper button.action-primary i, body .page-main button.action-primary i, body .page-wrapper .awa-btn-primary i, body .page-main .awa-btn-primary i, body .page-wrapper .action.primary [class*="icon"], body .page-main .action.primary [class*="icon"], body .page-wrapper .action.tocart [class*="icon"], body .page-main .action.tocart [class*="icon"], body .page-wrapper .action.login [class*="icon"], body .page-main .action.login [class*="icon"], body .page-wrapper .action.checkout [class*="icon"], body .page-main .action.checkout [class*="icon"], body .page-wrapper .action.update [class*="icon"], body .page-main .action.update [class*="icon"], body .page-wrapper .btn-primary [class*="icon"], body .page-main .btn-primary [class*="icon"], body .page-wrapper .button.btn-cart [class*="icon"], body .page-main .button.btn-cart [class*="icon"], body .page-wrapper button.action-primary [class*="icon"], body .page-main button.action-primary [class*="icon"], body .page-wrapper .awa-btn-primary [class*="icon"], body .page-main .awa-btn-primary [class*="icon"] { width: var(--awa-icon-size-sm); height: var(--awa-icon-size-sm); flex-shrink: 0; } body .page-wrapper .action.primary:active, body .page-main .action.primary:active, body .page-wrapper .action.tocart:active, body .page-main .action.tocart:active, body .page-wrapper .action.login:active, body .page-main .action.login:active, body .page-wrapper .action.checkout:active, body .page-main .action.checkout:active, body .page-wrapper .action.update:active, body .page-main .action.update:active, body .page-wrapper .btn-primary:active, body .page-main .btn-primary:active, body .page-wrapper .button.btn-cart:active, body .page-main .button.btn-cart:active, body .page-wrapper button.action-primary:active, body .page-main button.action-primary:active, body .page-wrapper .awa-btn-primary:active, body .page-main .awa-btn-primary:active { transform: translateY(1px); } body .page-wrapper .action.primary:hover:not(:disabled), body .page-main .action.primary:hover:not(:disabled), body .page-wrapper .action.tocart:hover:not(:disabled), body .page-main .action.tocart:hover:not(:disabled), body .page-wrapper .action.login:hover:not(:disabled), body .page-main .action.login:hover:not(:disabled), body .page-wrapper .action.checkout:hover:not(:disabled), body .page-main .action.checkout:hover:not(:disabled), body .page-wrapper .action.update:hover:not(:disabled), body .page-main .action.update:hover:not(:disabled), body .page-wrapper .btn-primary:hover:not(:disabled), body .page-main .btn-primary:hover:not(:disabled), body .page-wrapper .button.btn-cart:hover:not(:disabled), body .page-main .button.btn-cart:hover:not(:disabled), body .page-wrapper button.action-primary:hover:not(:disabled), body .page-main button.action-primary:hover:not(:disabled), body .page-wrapper .awa-btn-primary:hover:not(:disabled), body .page-main .awa-btn-primary:hover:not(:disabled) { background: var(--awa-primary-hover); border-color: var(--awa-primary-hover); color: var(--awa-text-inverse); box-shadow: 0 4px 12px rgba(183, 51, 55, 0.3); transform: translateY(var(--awa-hover-lift)); } body .page-wrapper .action.primary:disabled, body .page-main .action.primary:disabled, body .page-wrapper .action.tocart:disabled, body .page-main .action.tocart:disabled, body .page-wrapper .action.login:disabled, body .page-main .action.login:disabled, body .page-wrapper .action.checkout:disabled, body .page-main .action.checkout:disabled, body .page-wrapper .action.update:disabled, body .page-main .action.update:disabled, body .page-wrapper .btn-primary:disabled, body .page-main .btn-primary:disabled, body .page-wrapper .button.btn-cart:disabled, body .page-main .button.btn-cart:disabled, body .page-wrapper button.action-primary:disabled, body .page-main button.action-primary:disabled, body .page-wrapper .awa-btn-primary:disabled, body .page-main .awa-btn-primary:disabled, body .page-wrapper .action.primary[disabled], body .page-main .action.primary[disabled], body .page-wrapper .action.tocart[disabled], body .page-main .action.tocart[disabled], body .page-wrapper .action.login[disabled], body .page-main .action.login[disabled], body .page-wrapper .action.checkout[disabled], body .page-main .action.checkout[disabled], body .page-wrapper .action.update[disabled], body .page-main .action.update[disabled], body .page-wrapper .btn-primary[disabled], body .page-main .btn-primary[disabled], body .page-wrapper .button.btn-cart[disabled], body .page-main .button.btn-cart[disabled], body .page-wrapper button.action-primary[disabled], body .page-main button.action-primary[disabled], body .page-wrapper .awa-btn-primary[disabled], body .page-main .awa-btn-primary[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none; } body .page-wrapper .action.primary:active:not(:disabled), body .page-main .action.primary:active:not(:disabled), body .page-wrapper .action.tocart:active:not(:disabled), body .page-main .action.tocart:active:not(:disabled), body .page-wrapper .action.login:active:not(:disabled), body .page-main .action.login:active:not(:disabled), body .page-wrapper .action.checkout:active:not(:disabled), body .page-main .action.checkout:active:not(:disabled), body .page-wrapper .action.update:active:not(:disabled), body .page-main .action.update:active:not(:disabled), body .page-wrapper .btn-primary:active:not(:disabled), body .page-main .btn-primary:active:not(:disabled), body .page-wrapper .button.btn-cart:active:not(:disabled), body .page-main .button.btn-cart:active:not(:disabled), body .page-wrapper button.action-primary:active:not(:disabled), body .page-main button.action-primary:active:not(:disabled), body .page-wrapper .awa-btn-primary:active:not(:disabled), body .page-main .awa-btn-primary:active:not(:disabled) { transform: scale(0.97); } body .page-wrapper .action.primary:focus-visible, body .page-main .action.primary:focus-visible, body .page-wrapper .action.tocart:focus-visible, body .page-main .action.tocart:focus-visible, body .page-wrapper .action.login:focus-visible, body .page-main .action.login:focus-visible, body .page-wrapper .action.checkout:focus-visible, body .page-main .action.checkout:focus-visible, body .page-wrapper .action.update:focus-visible, body .page-main .action.update:focus-visible, body .page-wrapper .btn-primary:focus-visible, body .page-main .btn-primary:focus-visible, body .page-wrapper .button.btn-cart:focus-visible, body .page-main .button.btn-cart:focus-visible, body .page-wrapper button.action-primary:focus-visible, body .page-main button.action-primary:focus-visible, body .page-wrapper .awa-btn-primary:focus-visible, body .page-main .awa-btn-primary:focus-visible { outline: var(--awa-border-width-strong) solid var(--awa-primary); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.25); } body .page-wrapper .action.primary svg, body .page-main .action.primary svg, body .page-wrapper .action.tocart svg, body .page-main .action.tocart svg, body .page-wrapper .action.login svg, body .page-main .action.login svg, body .page-wrapper .action.checkout svg, body .page-main .action.checkout svg, body .page-wrapper .action.update svg, body .page-main .action.update svg, body .page-wrapper .btn-primary svg, body .page-main .btn-primary svg, body .page-wrapper .button.btn-cart svg, body .page-main .button.btn-cart svg, body .page-wrapper button.action-primary svg, body .page-main button.action-primary svg, body .page-wrapper .awa-btn-primary svg, body .page-main .awa-btn-primary svg, body .page-wrapper .action.primary i, body .page-main .action.primary i, body .page-wrapper .action.tocart i, body .page-main .action.tocart i, body .page-wrapper .action.login i, body .page-main .action.login i, body .page-wrapper .action.checkout i, body .page-main .action.checkout i, body .page-wrapper .action.update i, body .page-main .action.update i, body .page-wrapper .btn-primary i, body .page-main .btn-primary i, body .page-wrapper .button.btn-cart i, body .page-main .button.btn-cart i, body .page-wrapper button.action-primary i, body .page-main button.action-primary i, body .page-wrapper .awa-btn-primary i, body .page-main .awa-btn-primary i, body .page-wrapper .action.primary [class*="icon"], body .page-main .action.primary [class*="icon"], body .page-wrapper .action.tocart [class*="icon"], body .page-main .action.tocart [class*="icon"], body .page-wrapper .action.login [class*="icon"], body .page-main .action.login [class*="icon"], body .page-wrapper .action.checkout [class*="icon"], body .page-main .action.checkout [class*="icon"], body .page-wrapper .action.update [class*="icon"], body .page-main .action.update [class*="icon"], body .page-wrapper .btn-primary [class*="icon"], body .page-main .btn-primary [class*="icon"], body .page-wrapper .button.btn-cart [class*="icon"], body .page-main .button.btn-cart [class*="icon"], body .page-wrapper button.action-primary [class*="icon"], body .page-main button.action-primary [class*="icon"], body .page-wrapper .awa-btn-primary [class*="icon"], body .page-main .awa-btn-primary [class*="icon"] { width: var(--awa-icon-size-sm); height: var(--awa-icon-size-sm); flex-shrink: 0; } body .page-wrapper .action.primary:active, body .page-main .action.primary:active, body .page-wrapper .action.tocart:active, body .page-main .action.tocart:active, body .page-wrapper .action.login:active, body .page-main .action.login:active, body .page-wrapper .action.checkout:active, body .page-main .action.checkout:active, body .page-wrapper .action.update:active, body .page-main .action.update:active, body .page-wrapper .btn-primary:active, body .page-main .btn-primary:active, body .page-wrapper .button.btn-cart:active, body .page-main .button.btn-cart:active, body .page-wrapper button.action-primary:active, body .page-main button.action-primary:active, body .page-wrapper .awa-btn-primary:active, body .page-main .awa-btn-primary:active { transform: translateY(1px); } body .page-wrapper .action.primary:hover, body .page-main .action.primary:hover, body .page-wrapper .action.tocart:hover, body .page-main .action.tocart:hover, body .page-wrapper .action.login:hover, body .page-main .action.login:hover, body .page-wrapper .action.checkout:hover, body .page-main .action.checkout:hover, body .page-wrapper .action.update:hover, body .page-main .action.update:hover, body .page-wrapper .btn-primary:hover, body .page-main .btn-primary:hover, body .page-wrapper .button.btn-cart:hover, body .page-main .button.btn-cart:hover, body .page-wrapper button.action-primary:hover, body .page-main button.action-primary:hover, body .page-wrapper .awa-btn-primary:hover, body .page-main .awa-btn-primary:hover, body .page-wrapper .action.primary:focus-visible, body .page-main .action.primary:focus-visible, body .page-wrapper .action.tocart:focus-visible, body .page-main .action.tocart:focus-visible, body .page-wrapper .action.login:focus-visible, body .page-main .action.login:focus-visible, body .page-wrapper .action.checkout:focus-visible, body .page-main .action.checkout:focus-visible, body .page-wrapper .action.update:focus-visible, body .page-main .action.update:focus-visible, body .page-wrapper .btn-primary:focus-visible, body .page-main .btn-primary:focus-visible, body .page-wrapper .button.btn-cart:focus-visible, body .page-main .button.btn-cart:focus-visible, body .page-wrapper button.action-primary:focus-visible, body .page-main button.action-primary:focus-visible, body .page-wrapper .awa-btn-primary:focus-visible, body .page-main .awa-btn-primary:focus-visible { background: #8e2629; border-color: #8e2629; color: #ffffff; box-shadow: 0 6px 18px rgba(183, 51, 55, 0.36); transform: translateY(-1px); text-decoration: none; } body .page-wrapper .action.primary:focus-visible, body .page-main .action.primary:focus-visible, body .page-wrapper .action.tocart:focus-visible, body .page-main .action.tocart:focus-visible, body .page-wrapper .action.login:focus-visible, body .page-main .action.login:focus-visible, body .page-wrapper .action.checkout:focus-visible, body .page-main .action.checkout:focus-visible, body .page-wrapper .action.update:focus-visible, body .page-main .action.update:focus-visible, body .page-wrapper .btn-primary:focus-visible, body .page-main .btn-primary:focus-visible, body .page-wrapper .button.btn-cart:focus-visible, body .page-main .button.btn-cart:focus-visible, body .page-wrapper button.action-primary:focus-visible, body .page-main button.action-primary:focus-visible, body .page-wrapper .awa-btn-primary:focus-visible, body .page-main .awa-btn-primary:focus-visible { outline: 2px solid #8e2629; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.25); } body .page-wrapper .action.primary:disabled, body .page-main .action.primary:disabled, body .page-wrapper .action.tocart:disabled, body .page-main .action.tocart:disabled, body .page-wrapper .action.login:disabled, body .page-main .action.login:disabled, body .page-wrapper .action.checkout:disabled, body .page-main .action.checkout:disabled, body .page-wrapper .action.update:disabled, body .page-main .action.update:disabled, body .page-wrapper .btn-primary:disabled, body .page-main .btn-primary:disabled, body .page-wrapper .button.btn-cart:disabled, body .page-main .button.btn-cart:disabled, body .page-wrapper button.action-primary:disabled, body .page-main button.action-primary:disabled, body .page-wrapper .awa-btn-primary:disabled, body .page-main .awa-btn-primary:disabled, body .page-wrapper .action.primary[disabled], body .page-main .action.primary[disabled], body .page-wrapper .action.tocart[disabled], body .page-main .action.tocart[disabled], body .page-wrapper .action.login[disabled], body .page-main .action.login[disabled], body .page-wrapper .action.checkout[disabled], body .page-main .action.checkout[disabled], body .page-wrapper .action.update[disabled], body .page-main .action.update[disabled], body .page-wrapper .btn-primary[disabled], body .page-main .btn-primary[disabled], body .page-wrapper .button.btn-cart[disabled], body .page-main .button.btn-cart[disabled], body .page-wrapper button.action-primary[disabled], body .page-main button.action-primary[disabled], body .page-wrapper .awa-btn-primary[disabled], body .page-main .awa-btn-primary[disabled], body .page-wrapper .action.primary.disabled, body .page-main .action.primary.disabled, body .page-wrapper .action.tocart.disabled, body .page-main .action.tocart.disabled, body .page-wrapper .action.login.disabled, body .page-main .action.login.disabled, body .page-wrapper .action.checkout.disabled, body .page-main .action.checkout.disabled, body .page-wrapper .action.update.disabled, body .page-main .action.update.disabled, body .page-wrapper .btn-primary.disabled, body .page-main .btn-primary.disabled, body .page-wrapper .button.btn-cart.disabled, body .page-main .button.btn-cart.disabled, body .page-wrapper button.action-primary.disabled, body .page-main button.action-primary.disabled, body .page-wrapper .awa-btn-primary.disabled, body .page-main .awa-btn-primary.disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; } body .page-wrapper .action.tocart, body .page-main .action.tocart, body .page-wrapper .btn-cart.action, body .page-main .btn-cart.action { width: 100%; max-width: 320px; box-shadow: 0 4px 16px rgba(183, 51, 55, 0.32); } body .page-wrapper .action.tocart:hover, body .page-main .action.tocart:hover, body .page-wrapper .btn-cart.action:hover, body .page-main .btn-cart.action:hover { box-shadow: 0 8px 24px rgba(183, 51, 55, 0.42); } body .page-wrapper .form-create-account button[type='submit'], body .page-main .form-create-account button[type='submit'], body .page-wrapper .form-login button[type='submit'], body .page-main .form-login button[type='submit'], body .page-wrapper .form-address-edit button[type='submit'], body .page-main .form-address-edit button[type='submit'], body .page-wrapper .form-edit-account button[type='submit'], body .page-main .form-edit-account button[type='submit'], body .page-wrapper .checkout-payment-method button[type='submit'], body .page-main .checkout-payment-method button[type='submit'], body .page-wrapper .payment-method-content button[type='submit'], body .page-main .payment-method-content button[type='submit'] { background: var(--awa-primary); color: var(--awa-text-inverse); border-color: var(--awa-primary); gap: var(--awa-space-sm); padding: 0 var(--awa-space-lg); font-size: var(--awa-font-size-14); font-weight: var(--awa-weight-semi); border-radius: var(--awa-radius-sm); border: var(--awa-border-width) solid transparent; transition: background-color var(--awa-duration) var(--awa-ease), border-color var(--awa-duration) var(--awa-ease), color var(--awa-duration) var(--awa-ease), box-shadow var(--awa-duration) var(--awa-ease), transform var(--awa-duration-fast) var(--awa-ease); -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; font-size: 14px; font-weight: 600; font-family: inherit; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; border: none; border-radius: 4px; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 150ms ease; user-select: none; vertical-align: middle; position: relative; overflow: hidden; background: #b73337; color: #ffffff; border: 1.5px solid #b73337; box-shadow: 0 2px 8px rgba(183, 51, 55, 0.24); min-width: 160px; } body .page-wrapper .form-create-account button[type='submit']:disabled, body .page-main .form-create-account button[type='submit']:disabled, body .page-wrapper .form-login button[type='submit']:disabled, body .page-main .form-login button[type='submit']:disabled, body .page-wrapper .form-address-edit button[type='submit']:disabled, body .page-main .form-address-edit button[type='submit']:disabled, body .page-wrapper .form-edit-account button[type='submit']:disabled, body .page-main .form-edit-account button[type='submit']:disabled, body .page-wrapper .checkout-payment-method button[type='submit']:disabled, body .page-main .checkout-payment-method button[type='submit']:disabled, body .page-wrapper .payment-method-content button[type='submit']:disabled, body .page-main .payment-method-content button[type='submit']:disabled, body .page-wrapper .form-create-account button[type='submit'][disabled], body .page-main .form-create-account button[type='submit'][disabled], body .page-wrapper .form-login button[type='submit'][disabled], body .page-main .form-login button[type='submit'][disabled], body .page-wrapper .form-address-edit button[type='submit'][disabled], body .page-main .form-address-edit button[type='submit'][disabled], body .page-wrapper .form-edit-account button[type='submit'][disabled], body .page-main .form-edit-account button[type='submit'][disabled], body .page-wrapper .checkout-payment-method button[type='submit'][disabled], body .page-main .checkout-payment-method button[type='submit'][disabled], body .page-wrapper .payment-method-content button[type='submit'][disabled], body .page-main .payment-method-content button[type='submit'][disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none; } body .page-wrapper .form-create-account button[type='submit']:active:not(:disabled), body .page-main .form-create-account button[type='submit']:active:not(:disabled), body .page-wrapper .form-login button[type='submit']:active:not(:disabled), body .page-main .form-login button[type='submit']:active:not(:disabled), body .page-wrapper .form-address-edit button[type='submit']:active:not(:disabled), body .page-main .form-address-edit button[type='submit']:active:not(:disabled), body .page-wrapper .form-edit-account button[type='submit']:active:not(:disabled), body .page-main .form-edit-account button[type='submit']:active:not(:disabled), body .page-wrapper .checkout-payment-method button[type='submit']:active:not(:disabled), body .page-main .checkout-payment-method button[type='submit']:active:not(:disabled), body .page-wrapper .payment-method-content button[type='submit']:active:not(:disabled), body .page-main .payment-method-content button[type='submit']:active:not(:disabled) { transform: scale(0.97); } body .page-wrapper .form-create-account button[type='submit']:focus-visible, body .page-main .form-create-account button[type='submit']:focus-visible, body .page-wrapper .form-login button[type='submit']:focus-visible, body .page-main .form-login button[type='submit']:focus-visible, body .page-wrapper .form-address-edit button[type='submit']:focus-visible, body .page-main .form-address-edit button[type='submit']:focus-visible, body .page-wrapper .form-edit-account button[type='submit']:focus-visible, body .page-main .form-edit-account button[type='submit']:focus-visible, body .page-wrapper .checkout-payment-method button[type='submit']:focus-visible, body .page-main .checkout-payment-method button[type='submit']:focus-visible, body .page-wrapper .payment-method-content button[type='submit']:focus-visible, body .page-main .payment-method-content button[type='submit']:focus-visible { outline: var(--awa-border-width-strong) solid var(--awa-primary); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.25); } body .page-wrapper .form-create-account button[type='submit'] svg, body .page-main .form-create-account button[type='submit'] svg, body .page-wrapper .form-login button[type='submit'] svg, body .page-main .form-login button[type='submit'] svg, body .page-wrapper .form-address-edit button[type='submit'] svg, body .page-main .form-address-edit button[type='submit'] svg, body .page-wrapper .form-edit-account button[type='submit'] svg, body .page-main .form-edit-account button[type='submit'] svg, body .page-wrapper .checkout-payment-method button[type='submit'] svg, body .page-main .checkout-payment-method button[type='submit'] svg, body .page-wrapper .payment-method-content button[type='submit'] svg, body .page-main .payment-method-content button[type='submit'] svg, body .page-wrapper .form-create-account button[type='submit'] i, body .page-main .form-create-account button[type='submit'] i, body .page-wrapper .form-login button[type='submit'] i, body .page-main .form-login button[type='submit'] i, body .page-wrapper .form-address-edit button[type='submit'] i, body .page-main .form-address-edit button[type='submit'] i, body .page-wrapper .form-edit-account button[type='submit'] i, body .page-main .form-edit-account button[type='submit'] i, body .page-wrapper .checkout-payment-method button[type='submit'] i, body .page-main .checkout-payment-method button[type='submit'] i, body .page-wrapper .payment-method-content button[type='submit'] i, body .page-main .payment-method-content button[type='submit'] i, body .page-wrapper .form-create-account button[type='submit'] [class*="icon"], body .page-main .form-create-account button[type='submit'] [class*="icon"], body .page-wrapper .form-login button[type='submit'] [class*="icon"], body .page-main .form-login button[type='submit'] [class*="icon"], body .page-wrapper .form-address-edit button[type='submit'] [class*="icon"], body .page-main .form-address-edit button[type='submit'] [class*="icon"], body .page-wrapper .form-edit-account button[type='submit'] [class*="icon"], body .page-main .form-edit-account button[type='submit'] [class*="icon"], body .page-wrapper .checkout-payment-method button[type='submit'] [class*="icon"], body .page-main .checkout-payment-method button[type='submit'] [class*="icon"], body .page-wrapper .payment-method-content button[type='submit'] [class*="icon"], body .page-main .payment-method-content button[type='submit'] [class*="icon"] { width: var(--awa-icon-size-sm); height: var(--awa-icon-size-sm); flex-shrink: 0; } body .page-wrapper .form-create-account button[type='submit']:active, body .page-main .form-create-account button[type='submit']:active, body .page-wrapper .form-login button[type='submit']:active, body .page-main .form-login button[type='submit']:active, body .page-wrapper .form-address-edit button[type='submit']:active, body .page-main .form-address-edit button[type='submit']:active, body .page-wrapper .form-edit-account button[type='submit']:active, body .page-main .form-edit-account button[type='submit']:active, body .page-wrapper .checkout-payment-method button[type='submit']:active, body .page-main .checkout-payment-method button[type='submit']:active, body .page-wrapper .payment-method-content button[type='submit']:active, body .page-main .payment-method-content button[type='submit']:active { transform: translateY(1px); } body .page-wrapper .form-create-account button[type='submit']:hover:not(:disabled), body .page-main .form-create-account button[type='submit']:hover:not(:disabled), body .page-wrapper .form-login button[type='submit']:hover:not(:disabled), body .page-main .form-login button[type='submit']:hover:not(:disabled), body .page-wrapper .form-address-edit button[type='submit']:hover:not(:disabled), body .page-main .form-address-edit button[type='submit']:hover:not(:disabled), body .page-wrapper .form-edit-account button[type='submit']:hover:not(:disabled), body .page-main .form-edit-account button[type='submit']:hover:not(:disabled), body .page-wrapper .checkout-payment-method button[type='submit']:hover:not(:disabled), body .page-main .checkout-payment-method button[type='submit']:hover:not(:disabled), body .page-wrapper .payment-method-content button[type='submit']:hover:not(:disabled), body .page-main .payment-method-content button[type='submit']:hover:not(:disabled) { background: var(--awa-primary-hover); border-color: var(--awa-primary-hover); color: var(--awa-text-inverse); box-shadow: 0 4px 12px rgba(183, 51, 55, 0.3); transform: translateY(var(--awa-hover-lift)); } body .page-wrapper .form-create-account button[type='submit']:disabled, body .page-main .form-create-account button[type='submit']:disabled, body .page-wrapper .form-login button[type='submit']:disabled, body .page-main .form-login button[type='submit']:disabled, body .page-wrapper .form-address-edit button[type='submit']:disabled, body .page-main .form-address-edit button[type='submit']:disabled, body .page-wrapper .form-edit-account button[type='submit']:disabled, body .page-main .form-edit-account button[type='submit']:disabled, body .page-wrapper .checkout-payment-method button[type='submit']:disabled, body .page-main .checkout-payment-method button[type='submit']:disabled, body .page-wrapper .payment-method-content button[type='submit']:disabled, body .page-main .payment-method-content button[type='submit']:disabled, body .page-wrapper .form-create-account button[type='submit'][disabled], body .page-main .form-create-account button[type='submit'][disabled], body .page-wrapper .form-login button[type='submit'][disabled], body .page-main .form-login button[type='submit'][disabled], body .page-wrapper .form-address-edit button[type='submit'][disabled], body .page-main .form-address-edit button[type='submit'][disabled], body .page-wrapper .form-edit-account button[type='submit'][disabled], body .page-main .form-edit-account button[type='submit'][disabled], body .page-wrapper .checkout-payment-method button[type='submit'][disabled], body .page-main .checkout-payment-method button[type='submit'][disabled], body .page-wrapper .payment-method-content button[type='submit'][disabled], body .page-main .payment-method-content button[type='submit'][disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none; } body .page-wrapper .form-create-account button[type='submit']:active:not(:disabled), body .page-main .form-create-account button[type='submit']:active:not(:disabled), body .page-wrapper .form-login button[type='submit']:active:not(:disabled), body .page-main .form-login button[type='submit']:active:not(:disabled), body .page-wrapper .form-address-edit button[type='submit']:active:not(:disabled), body .page-main .form-address-edit button[type='submit']:active:not(:disabled), body .page-wrapper .form-edit-account button[type='submit']:active:not(:disabled), body .page-main .form-edit-account button[type='submit']:active:not(:disabled), body .page-wrapper .checkout-payment-method button[type='submit']:active:not(:disabled), body .page-main .checkout-payment-method button[type='submit']:active:not(:disabled), body .page-wrapper .payment-method-content button[type='submit']:active:not(:disabled), body .page-main .payment-method-content button[type='submit']:active:not(:disabled) { transform: scale(0.97); } body .page-wrapper .form-create-account button[type='submit']:focus-visible, body .page-main .form-create-account button[type='submit']:focus-visible, body .page-wrapper .form-login button[type='submit']:focus-visible, body .page-main .form-login button[type='submit']:focus-visible, body .page-wrapper .form-address-edit button[type='submit']:focus-visible, body .page-main .form-address-edit button[type='submit']:focus-visible, body .page-wrapper .form-edit-account button[type='submit']:focus-visible, body .page-main .form-edit-account button[type='submit']:focus-visible, body .page-wrapper .checkout-payment-method button[type='submit']:focus-visible, body .page-main .checkout-payment-method button[type='submit']:focus-visible, body .page-wrapper .payment-method-content button[type='submit']:focus-visible, body .page-main .payment-method-content button[type='submit']:focus-visible { outline: var(--awa-border-width-strong) solid var(--awa-primary); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.25); } body .page-wrapper .form-create-account button[type='submit'] svg, body .page-main .form-create-account button[type='submit'] svg, body .page-wrapper .form-login button[type='submit'] svg, body .page-main .form-login button[type='submit'] svg, body .page-wrapper .form-address-edit button[type='submit'] svg, body .page-main .form-address-edit button[type='submit'] svg, body .page-wrapper .form-edit-account button[type='submit'] svg, body .page-main .form-edit-account button[type='submit'] svg, body .page-wrapper .checkout-payment-method button[type='submit'] svg, body .page-main .checkout-payment-method button[type='submit'] svg, body .page-wrapper .payment-method-content button[type='submit'] svg, body .page-main .payment-method-content button[type='submit'] svg, body .page-wrapper .form-create-account button[type='submit'] i, body .page-main .form-create-account button[type='submit'] i, body .page-wrapper .form-login button[type='submit'] i, body .page-main .form-login button[type='submit'] i, body .page-wrapper .form-address-edit button[type='submit'] i, body .page-main .form-address-edit button[type='submit'] i, body .page-wrapper .form-edit-account button[type='submit'] i, body .page-main .form-edit-account button[type='submit'] i, body .page-wrapper .checkout-payment-method button[type='submit'] i, body .page-main .checkout-payment-method button[type='submit'] i, body .page-wrapper .payment-method-content button[type='submit'] i, body .page-main .payment-method-content button[type='submit'] i, body .page-wrapper .form-create-account button[type='submit'] [class*="icon"], body .page-main .form-create-account button[type='submit'] [class*="icon"], body .page-wrapper .form-login button[type='submit'] [class*="icon"], body .page-main .form-login button[type='submit'] [class*="icon"], body .page-wrapper .form-address-edit button[type='submit'] [class*="icon"], body .page-main .form-address-edit button[type='submit'] [class*="icon"], body .page-wrapper .form-edit-account button[type='submit'] [class*="icon"], body .page-main .form-edit-account button[type='submit'] [class*="icon"], body .page-wrapper .checkout-payment-method button[type='submit'] [class*="icon"], body .page-main .checkout-payment-method button[type='submit'] [class*="icon"], body .page-wrapper .payment-method-content button[type='submit'] [class*="icon"], body .page-main .payment-method-content button[type='submit'] [class*="icon"] { width: var(--awa-icon-size-sm); height: var(--awa-icon-size-sm); flex-shrink: 0; } body .page-wrapper .form-create-account button[type='submit']:active, body .page-main .form-create-account button[type='submit']:active, body .page-wrapper .form-login button[type='submit']:active, body .page-main .form-login button[type='submit']:active, body .page-wrapper .form-address-edit button[type='submit']:active, body .page-main .form-address-edit button[type='submit']:active, body .page-wrapper .form-edit-account button[type='submit']:active, body .page-main .form-edit-account button[type='submit']:active, body .page-wrapper .checkout-payment-method button[type='submit']:active, body .page-main .checkout-payment-method button[type='submit']:active, body .page-wrapper .payment-method-content button[type='submit']:active, body .page-main .payment-method-content button[type='submit']:active { transform: translateY(1px); } body .page-wrapper .form-create-account button[type='submit']:hover, body .page-main .form-create-account button[type='submit']:hover, body .page-wrapper .form-login button[type='submit']:hover, body .page-main .form-login button[type='submit']:hover, body .page-wrapper .form-address-edit button[type='submit']:hover, body .page-main .form-address-edit button[type='submit']:hover, body .page-wrapper .form-edit-account button[type='submit']:hover, body .page-main .form-edit-account button[type='submit']:hover, body .page-wrapper .checkout-payment-method button[type='submit']:hover, body .page-main .checkout-payment-method button[type='submit']:hover, body .page-wrapper .payment-method-content button[type='submit']:hover, body .page-main .payment-method-content button[type='submit']:hover, body .page-wrapper .form-create-account button[type='submit']:focus-visible, body .page-main .form-create-account button[type='submit']:focus-visible, body .page-wrapper .form-login button[type='submit']:focus-visible, body .page-main .form-login button[type='submit']:focus-visible, body .page-wrapper .form-address-edit button[type='submit']:focus-visible, body .page-main .form-address-edit button[type='submit']:focus-visible, body .page-wrapper .form-edit-account button[type='submit']:focus-visible, body .page-main .form-edit-account button[type='submit']:focus-visible, body .page-wrapper .checkout-payment-method button[type='submit']:focus-visible, body .page-main .checkout-payment-method button[type='submit']:focus-visible, body .page-wrapper .payment-method-content button[type='submit']:focus-visible, body .page-main .payment-method-content button[type='submit']:focus-visible { background: #8e2629; border-color: #8e2629; color: #ffffff; box-shadow: 0 6px 18px rgba(183, 51, 55, 0.36); transform: translateY(-1px); text-decoration: none; } body .page-wrapper .form-create-account button[type='submit']:focus-visible, body .page-main .form-create-account button[type='submit']:focus-visible, body .page-wrapper .form-login button[type='submit']:focus-visible, body .page-main .form-login button[type='submit']:focus-visible, body .page-wrapper .form-address-edit button[type='submit']:focus-visible, body .page-main .form-address-edit button[type='submit']:focus-visible, body .page-wrapper .form-edit-account button[type='submit']:focus-visible, body .page-main .form-edit-account button[type='submit']:focus-visible, body .page-wrapper .checkout-payment-method button[type='submit']:focus-visible, body .page-main .checkout-payment-method button[type='submit']:focus-visible, body .page-wrapper .payment-method-content button[type='submit']:focus-visible, body .page-main .payment-method-content button[type='submit']:focus-visible { outline: 2px solid #8e2629; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.25); } body .page-wrapper .form-create-account button[type='submit']:disabled, body .page-main .form-create-account button[type='submit']:disabled, body .page-wrapper .form-login button[type='submit']:disabled, body .page-main .form-login button[type='submit']:disabled, body .page-wrapper .form-address-edit button[type='submit']:disabled, body .page-main .form-address-edit button[type='submit']:disabled, body .page-wrapper .form-edit-account button[type='submit']:disabled, body .page-main .form-edit-account button[type='submit']:disabled, body .page-wrapper .checkout-payment-method button[type='submit']:disabled, body .page-main .checkout-payment-method button[type='submit']:disabled, body .page-wrapper .payment-method-content button[type='submit']:disabled, body .page-main .payment-method-content button[type='submit']:disabled, body .page-wrapper .form-create-account button[type='submit'][disabled], body .page-main .form-create-account button[type='submit'][disabled], body .page-wrapper .form-login button[type='submit'][disabled], body .page-main .form-login button[type='submit'][disabled], body .page-wrapper .form-address-edit button[type='submit'][disabled], body .page-main .form-address-edit button[type='submit'][disabled], body .page-wrapper .form-edit-account button[type='submit'][disabled], body .page-main .form-edit-account button[type='submit'][disabled], body .page-wrapper .checkout-payment-method button[type='submit'][disabled], body .page-main .checkout-payment-method button[type='submit'][disabled], body .page-wrapper .payment-method-content button[type='submit'][disabled], body .page-main .payment-method-content button[type='submit'][disabled], body .page-wrapper .form-create-account button[type='submit'].disabled, body .page-main .form-create-account button[type='submit'].disabled, body .page-wrapper .form-login button[type='submit'].disabled, body .page-main .form-login button[type='submit'].disabled, body .page-wrapper .form-address-edit button[type='submit'].disabled, body .page-main .form-address-edit button[type='submit'].disabled, body .page-wrapper .form-edit-account button[type='submit'].disabled, body .page-main .form-edit-account button[type='submit'].disabled, body .page-wrapper .checkout-payment-method button[type='submit'].disabled, body .page-main .checkout-payment-method button[type='submit'].disabled, body .page-wrapper .payment-method-content button[type='submit'].disabled, body .page-main .payment-method-content button[type='submit'].disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; } body .page-wrapper .action.secondary, body .page-main .action.secondary, body .page-wrapper .action.viewcart, body .page-main .action.viewcart, body .page-wrapper .action.continue, body .page-main .action.continue, body .page-wrapper .action.back, body .page-main .action.back, body .page-wrapper .btn-secondary, body .page-main .btn-secondary, body .page-wrapper .awa-btn-secondary, body .page-main .awa-btn-secondary { color: var(--awa-primary); border-color: var(--awa-primary); gap: var(--awa-space-sm); padding: 0 var(--awa-space-lg); font-size: var(--awa-font-size-14); font-weight: var(--awa-weight-semi); border-radius: var(--awa-radius-sm); border: var(--awa-border-width) solid transparent; transition: background-color var(--awa-duration) var(--awa-ease), border-color var(--awa-duration) var(--awa-ease), color var(--awa-duration) var(--awa-ease), box-shadow var(--awa-duration) var(--awa-ease), transform var(--awa-duration-fast) var(--awa-ease); -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; font-size: 14px; font-weight: 600; font-family: inherit; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; border: none; border-radius: 4px; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 150ms ease; user-select: none; vertical-align: middle; position: relative; overflow: hidden; background: transparent; color: #b73337; border: 1.5px solid #b73337; box-shadow: none; } body .page-wrapper .action.secondary:disabled, body .page-main .action.secondary:disabled, body .page-wrapper .action.viewcart:disabled, body .page-main .action.viewcart:disabled, body .page-wrapper .action.continue:disabled, body .page-main .action.continue:disabled, body .page-wrapper .action.back:disabled, body .page-main .action.back:disabled, body .page-wrapper .btn-secondary:disabled, body .page-main .btn-secondary:disabled, body .page-wrapper .awa-btn-secondary:disabled, body .page-main .awa-btn-secondary:disabled, body .page-wrapper .action.secondary[disabled], body .page-main .action.secondary[disabled], body .page-wrapper .action.viewcart[disabled], body .page-main .action.viewcart[disabled], body .page-wrapper .action.continue[disabled], body .page-main .action.continue[disabled], body .page-wrapper .action.back[disabled], body .page-main .action.back[disabled], body .page-wrapper .btn-secondary[disabled], body .page-main .btn-secondary[disabled], body .page-wrapper .awa-btn-secondary[disabled], body .page-main .awa-btn-secondary[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none; } body .page-wrapper .action.secondary:active:not(:disabled), body .page-main .action.secondary:active:not(:disabled), body .page-wrapper .action.viewcart:active:not(:disabled), body .page-main .action.viewcart:active:not(:disabled), body .page-wrapper .action.continue:active:not(:disabled), body .page-main .action.continue:active:not(:disabled), body .page-wrapper .action.back:active:not(:disabled), body .page-main .action.back:active:not(:disabled), body .page-wrapper .btn-secondary:active:not(:disabled), body .page-main .btn-secondary:active:not(:disabled), body .page-wrapper .awa-btn-secondary:active:not(:disabled), body .page-main .awa-btn-secondary:active:not(:disabled) { transform: scale(0.97); } body .page-wrapper .action.secondary:focus-visible, body .page-main .action.secondary:focus-visible, body .page-wrapper .action.viewcart:focus-visible, body .page-main .action.viewcart:focus-visible, body .page-wrapper .action.continue:focus-visible, body .page-main .action.continue:focus-visible, body .page-wrapper .action.back:focus-visible, body .page-main .action.back:focus-visible, body .page-wrapper .btn-secondary:focus-visible, body .page-main .btn-secondary:focus-visible, body .page-wrapper .awa-btn-secondary:focus-visible, body .page-main .awa-btn-secondary:focus-visible { outline: var(--awa-border-width-strong) solid var(--awa-primary); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.25); } body .page-wrapper .action.secondary svg, body .page-main .action.secondary svg, body .page-wrapper .action.viewcart svg, body .page-main .action.viewcart svg, body .page-wrapper .action.continue svg, body .page-main .action.continue svg, body .page-wrapper .action.back svg, body .page-main .action.back svg, body .page-wrapper .btn-secondary svg, body .page-main .btn-secondary svg, body .page-wrapper .awa-btn-secondary svg, body .page-main .awa-btn-secondary svg, body .page-wrapper .action.secondary i, body .page-main .action.secondary i, body .page-wrapper .action.viewcart i, body .page-main .action.viewcart i, body .page-wrapper .action.continue i, body .page-main .action.continue i, body .page-wrapper .action.back i, body .page-main .action.back i, body .page-wrapper .btn-secondary i, body .page-main .btn-secondary i, body .page-wrapper .awa-btn-secondary i, body .page-main .awa-btn-secondary i, body .page-wrapper .action.secondary [class*="icon"], body .page-main .action.secondary [class*="icon"], body .page-wrapper .action.viewcart [class*="icon"], body .page-main .action.viewcart [class*="icon"], body .page-wrapper .action.continue [class*="icon"], body .page-main .action.continue [class*="icon"], body .page-wrapper .action.back [class*="icon"], body .page-main .action.back [class*="icon"], body .page-wrapper .btn-secondary [class*="icon"], body .page-main .btn-secondary [class*="icon"], body .page-wrapper .awa-btn-secondary [class*="icon"], body .page-main .awa-btn-secondary [class*="icon"] { width: var(--awa-icon-size-sm); height: var(--awa-icon-size-sm); flex-shrink: 0; } body .page-wrapper .action.secondary:active, body .page-main .action.secondary:active, body .page-wrapper .action.viewcart:active, body .page-main .action.viewcart:active, body .page-wrapper .action.continue:active, body .page-main .action.continue:active, body .page-wrapper .action.back:active, body .page-main .action.back:active, body .page-wrapper .btn-secondary:active, body .page-main .btn-secondary:active, body .page-wrapper .awa-btn-secondary:active, body .page-main .awa-btn-secondary:active { transform: translateY(1px); } body .page-wrapper .action.secondary:hover:not(:disabled), body .page-main .action.secondary:hover:not(:disabled), body .page-wrapper .action.viewcart:hover:not(:disabled), body .page-main .action.viewcart:hover:not(:disabled), body .page-wrapper .action.continue:hover:not(:disabled), body .page-main .action.continue:hover:not(:disabled), body .page-wrapper .action.back:hover:not(:disabled), body .page-main .action.back:hover:not(:disabled), body .page-wrapper .btn-secondary:hover:not(:disabled), body .page-main .btn-secondary:hover:not(:disabled), body .page-wrapper .awa-btn-secondary:hover:not(:disabled), body .page-main .awa-btn-secondary:hover:not(:disabled) { background: var(--awa-primary); color: var(--awa-text-inverse); box-shadow: 0 4px 12px rgba(183, 51, 55, 0.2); transform: translateY(var(--awa-hover-lift)); } body .page-wrapper .action.secondary:disabled, body .page-main .action.secondary:disabled, body .page-wrapper .action.viewcart:disabled, body .page-main .action.viewcart:disabled, body .page-wrapper .action.continue:disabled, body .page-main .action.continue:disabled, body .page-wrapper .action.back:disabled, body .page-main .action.back:disabled, body .page-wrapper .btn-secondary:disabled, body .page-main .btn-secondary:disabled, body .page-wrapper .awa-btn-secondary:disabled, body .page-main .awa-btn-secondary:disabled, body .page-wrapper .action.secondary[disabled], body .page-main .action.secondary[disabled], body .page-wrapper .action.viewcart[disabled], body .page-main .action.viewcart[disabled], body .page-wrapper .action.continue[disabled], body .page-main .action.continue[disabled], body .page-wrapper .action.back[disabled], body .page-main .action.back[disabled], body .page-wrapper .btn-secondary[disabled], body .page-main .btn-secondary[disabled], body .page-wrapper .awa-btn-secondary[disabled], body .page-main .awa-btn-secondary[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none; } body .page-wrapper .action.secondary:active:not(:disabled), body .page-main .action.secondary:active:not(:disabled), body .page-wrapper .action.viewcart:active:not(:disabled), body .page-main .action.viewcart:active:not(:disabled), body .page-wrapper .action.continue:active:not(:disabled), body .page-main .action.continue:active:not(:disabled), body .page-wrapper .action.back:active:not(:disabled), body .page-main .action.back:active:not(:disabled), body .page-wrapper .btn-secondary:active:not(:disabled), body .page-main .btn-secondary:active:not(:disabled), body .page-wrapper .awa-btn-secondary:active:not(:disabled), body .page-main .awa-btn-secondary:active:not(:disabled) { transform: scale(0.97); } body .page-wrapper .action.secondary:focus-visible, body .page-main .action.secondary:focus-visible, body .page-wrapper .action.viewcart:focus-visible, body .page-main .action.viewcart:focus-visible, body .page-wrapper .action.continue:focus-visible, body .page-main .action.continue:focus-visible, body .page-wrapper .action.back:focus-visible, body .page-main .action.back:focus-visible, body .page-wrapper .btn-secondary:focus-visible, body .page-main .btn-secondary:focus-visible, body .page-wrapper .awa-btn-secondary:focus-visible, body .page-main .awa-btn-secondary:focus-visible { outline: var(--awa-border-width-strong) solid var(--awa-primary); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.25); } body .page-wrapper .action.secondary svg, body .page-main .action.secondary svg, body .page-wrapper .action.viewcart svg, body .page-main .action.viewcart svg, body .page-wrapper .action.continue svg, body .page-main .action.continue svg, body .page-wrapper .action.back svg, body .page-main .action.back svg, body .page-wrapper .btn-secondary svg, body .page-main .btn-secondary svg, body .page-wrapper .awa-btn-secondary svg, body .page-main .awa-btn-secondary svg, body .page-wrapper .action.secondary i, body .page-main .action.secondary i, body .page-wrapper .action.viewcart i, body .page-main .action.viewcart i, body .page-wrapper .action.continue i, body .page-main .action.continue i, body .page-wrapper .action.back i, body .page-main .action.back i, body .page-wrapper .btn-secondary i, body .page-main .btn-secondary i, body .page-wrapper .awa-btn-secondary i, body .page-main .awa-btn-secondary i, body .page-wrapper .action.secondary [class*="icon"], body .page-main .action.secondary [class*="icon"], body .page-wrapper .action.viewcart [class*="icon"], body .page-main .action.viewcart [class*="icon"], body .page-wrapper .action.continue [class*="icon"], body .page-main .action.continue [class*="icon"], body .page-wrapper .action.back [class*="icon"], body .page-main .action.back [class*="icon"], body .page-wrapper .btn-secondary [class*="icon"], body .page-main .btn-secondary [class*="icon"], body .page-wrapper .awa-btn-secondary [class*="icon"], body .page-main .awa-btn-secondary [class*="icon"] { width: var(--awa-icon-size-sm); height: var(--awa-icon-size-sm); flex-shrink: 0; } body .page-wrapper .action.secondary:active, body .page-main .action.secondary:active, body .page-wrapper .action.viewcart:active, body .page-main .action.viewcart:active, body .page-wrapper .action.continue:active, body .page-main .action.continue:active, body .page-wrapper .action.back:active, body .page-main .action.back:active, body .page-wrapper .btn-secondary:active, body .page-main .btn-secondary:active, body .page-wrapper .awa-btn-secondary:active, body .page-main .awa-btn-secondary:active { transform: translateY(1px); } body .page-wrapper .action.secondary:hover, body .page-main .action.secondary:hover, body .page-wrapper .action.viewcart:hover, body .page-main .action.viewcart:hover, body .page-wrapper .action.continue:hover, body .page-main .action.continue:hover, body .page-wrapper .action.back:hover, body .page-main .action.back:hover, body .page-wrapper .btn-secondary:hover, body .page-main .btn-secondary:hover, body .page-wrapper .awa-btn-secondary:hover, body .page-main .awa-btn-secondary:hover, body .page-wrapper .action.secondary:focus-visible, body .page-main .action.secondary:focus-visible, body .page-wrapper .action.viewcart:focus-visible, body .page-main .action.viewcart:focus-visible, body .page-wrapper .action.continue:focus-visible, body .page-main .action.continue:focus-visible, body .page-wrapper .action.back:focus-visible, body .page-main .action.back:focus-visible, body .page-wrapper .btn-secondary:focus-visible, body .page-main .btn-secondary:focus-visible, body .page-wrapper .awa-btn-secondary:focus-visible, body .page-main .awa-btn-secondary:focus-visible { background: #b73337; color: #ffffff; border-color: #b73337; box-shadow: 0 4px 14px rgba(183, 51, 55, 0.28); transform: translateY(-1px); text-decoration: none; } body .page-wrapper .action.secondary:focus-visible, body .page-main .action.secondary:focus-visible, body .page-wrapper .action.viewcart:focus-visible, body .page-main .action.viewcart:focus-visible, body .page-wrapper .action.continue:focus-visible, body .page-main .action.continue:focus-visible, body .page-wrapper .action.back:focus-visible, body .page-main .action.back:focus-visible, body .page-wrapper .btn-secondary:focus-visible, body .page-main .btn-secondary:focus-visible, body .page-wrapper .awa-btn-secondary:focus-visible, body .page-main .awa-btn-secondary:focus-visible { outline: 2px solid #8e2629; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.25); } body .page-wrapper .action.secondary:disabled, body .page-main .action.secondary:disabled, body .page-wrapper .action.viewcart:disabled, body .page-main .action.viewcart:disabled, body .page-wrapper .action.continue:disabled, body .page-main .action.continue:disabled, body .page-wrapper .action.back:disabled, body .page-main .action.back:disabled, body .page-wrapper .btn-secondary:disabled, body .page-main .btn-secondary:disabled, body .page-wrapper .awa-btn-secondary:disabled, body .page-main .awa-btn-secondary:disabled, body .page-wrapper .action.secondary[disabled], body .page-main .action.secondary[disabled], body .page-wrapper .action.viewcart[disabled], body .page-main .action.viewcart[disabled], body .page-wrapper .action.continue[disabled], body .page-main .action.continue[disabled], body .page-wrapper .action.back[disabled], body .page-main .action.back[disabled], body .page-wrapper .btn-secondary[disabled], body .page-main .btn-secondary[disabled], body .page-wrapper .awa-btn-secondary[disabled], body .page-main .awa-btn-secondary[disabled], body .page-wrapper .action.secondary.disabled, body .page-main .action.secondary.disabled, body .page-wrapper .action.viewcart.disabled, body .page-main .action.viewcart.disabled, body .page-wrapper .action.continue.disabled, body .page-main .action.continue.disabled, body .page-wrapper .action.back.disabled, body .page-main .action.back.disabled, body .page-wrapper .btn-secondary.disabled, body .page-main .btn-secondary.disabled, body .page-wrapper .awa-btn-secondary.disabled, body .page-main .awa-btn-secondary.disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; } body .page-wrapper .action.viewcart, body .page-main .action.viewcart { width: 100%; justify-content: center; } body .page-wrapper .action.delete, body .page-main .action.delete, body .page-wrapper .action.edit, body .page-main .action.edit, body .page-wrapper .action.towishlist, body .page-main .action.towishlist, body .page-wrapper .action.tocompare, body .page-main .action.tocompare, body .page-wrapper .btn-ghost, body .page-main .btn-ghost, body .page-wrapper .awa-btn-ghost, body .page-main .awa-btn-ghost { color: var(--awa-primary); border-color: transparent; gap: var(--awa-space-sm); padding: 0 var(--awa-space-lg); font-size: var(--awa-font-size-14); font-weight: var(--awa-weight-semi); border: var(--awa-border-width) solid transparent; transition: background-color var(--awa-duration) var(--awa-ease), border-color var(--awa-duration) var(--awa-ease), color var(--awa-duration) var(--awa-ease), box-shadow var(--awa-duration) var(--awa-ease), transform var(--awa-duration-fast) var(--awa-ease); -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; font-size: 14px; font-weight: 600; font-family: inherit; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; border: none; border-radius: 4px; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 150ms ease; user-select: none; vertical-align: middle; position: relative; overflow: hidden; background: transparent; color: #475569; border: 1px solid #e5e5e5; box-shadow: none; padding: 0 var(--awa-space-md); font-size: var(--awa-font-size-xs); border-radius: var(--awa-radius-sm); min-height: 36px; padding: 0 16px; font-size: 12px; text-transform: none; letter-spacing: 0; } body .page-wrapper .action.delete:disabled, body .page-main .action.delete:disabled, body .page-wrapper .action.edit:disabled, body .page-main .action.edit:disabled, body .page-wrapper .action.towishlist:disabled, body .page-main .action.towishlist:disabled, body .page-wrapper .action.tocompare:disabled, body .page-main .action.tocompare:disabled, body .page-wrapper .btn-ghost:disabled, body .page-main .btn-ghost:disabled, body .page-wrapper .awa-btn-ghost:disabled, body .page-main .awa-btn-ghost:disabled, body .page-wrapper .action.delete[disabled], body .page-main .action.delete[disabled], body .page-wrapper .action.edit[disabled], body .page-main .action.edit[disabled], body .page-wrapper .action.towishlist[disabled], body .page-main .action.towishlist[disabled], body .page-wrapper .action.tocompare[disabled], body .page-main .action.tocompare[disabled], body .page-wrapper .btn-ghost[disabled], body .page-main .btn-ghost[disabled], body .page-wrapper .awa-btn-ghost[disabled], body .page-main .awa-btn-ghost[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none; } body .page-wrapper .action.delete:active:not(:disabled), body .page-main .action.delete:active:not(:disabled), body .page-wrapper .action.edit:active:not(:disabled), body .page-main .action.edit:active:not(:disabled), body .page-wrapper .action.towishlist:active:not(:disabled), body .page-main .action.towishlist:active:not(:disabled), body .page-wrapper .action.tocompare:active:not(:disabled), body .page-main .action.tocompare:active:not(:disabled), body .page-wrapper .btn-ghost:active:not(:disabled), body .page-main .btn-ghost:active:not(:disabled), body .page-wrapper .awa-btn-ghost:active:not(:disabled), body .page-main .awa-btn-ghost:active:not(:disabled) { transform: scale(0.97); } body .page-wrapper .action.delete:focus-visible, body .page-main .action.delete:focus-visible, body .page-wrapper .action.edit:focus-visible, body .page-main .action.edit:focus-visible, body .page-wrapper .action.towishlist:focus-visible, body .page-main .action.towishlist:focus-visible, body .page-wrapper .action.tocompare:focus-visible, body .page-main .action.tocompare:focus-visible, body .page-wrapper .btn-ghost:focus-visible, body .page-main .btn-ghost:focus-visible, body .page-wrapper .awa-btn-ghost:focus-visible, body .page-main .awa-btn-ghost:focus-visible { outline: var(--awa-border-width-strong) solid var(--awa-primary); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.25); } body .page-wrapper .action.delete svg, body .page-main .action.delete svg, body .page-wrapper .action.edit svg, body .page-main .action.edit svg, body .page-wrapper .action.towishlist svg, body .page-main .action.towishlist svg, body .page-wrapper .action.tocompare svg, body .page-main .action.tocompare svg, body .page-wrapper .btn-ghost svg, body .page-main .btn-ghost svg, body .page-wrapper .awa-btn-ghost svg, body .page-main .awa-btn-ghost svg, body .page-wrapper .action.delete i, body .page-main .action.delete i, body .page-wrapper .action.edit i, body .page-main .action.edit i, body .page-wrapper .action.towishlist i, body .page-main .action.towishlist i, body .page-wrapper .action.tocompare i, body .page-main .action.tocompare i, body .page-wrapper .btn-ghost i, body .page-main .btn-ghost i, body .page-wrapper .awa-btn-ghost i, body .page-main .awa-btn-ghost i, body .page-wrapper .action.delete [class*="icon"], body .page-main .action.delete [class*="icon"], body .page-wrapper .action.edit [class*="icon"], body .page-main .action.edit [class*="icon"], body .page-wrapper .action.towishlist [class*="icon"], body .page-main .action.towishlist [class*="icon"], body .page-wrapper .action.tocompare [class*="icon"], body .page-main .action.tocompare [class*="icon"], body .page-wrapper .btn-ghost [class*="icon"], body .page-main .btn-ghost [class*="icon"], body .page-wrapper .awa-btn-ghost [class*="icon"], body .page-main .awa-btn-ghost [class*="icon"] { width: var(--awa-icon-size-sm); height: var(--awa-icon-size-sm); flex-shrink: 0; } body .page-wrapper .action.delete:active, body .page-main .action.delete:active, body .page-wrapper .action.edit:active, body .page-main .action.edit:active, body .page-wrapper .action.towishlist:active, body .page-main .action.towishlist:active, body .page-wrapper .action.tocompare:active, body .page-main .action.tocompare:active, body .page-wrapper .btn-ghost:active, body .page-main .btn-ghost:active, body .page-wrapper .awa-btn-ghost:active, body .page-main .awa-btn-ghost:active { transform: translateY(1px); } body .page-wrapper .action.delete:hover:not(:disabled), body .page-main .action.delete:hover:not(:disabled), body .page-wrapper .action.edit:hover:not(:disabled), body .page-main .action.edit:hover:not(:disabled), body .page-wrapper .action.towishlist:hover:not(:disabled), body .page-main .action.towishlist:hover:not(:disabled), body .page-wrapper .action.tocompare:hover:not(:disabled), body .page-main .action.tocompare:hover:not(:disabled), body .page-wrapper .btn-ghost:hover:not(:disabled), body .page-main .btn-ghost:hover:not(:disabled), body .page-wrapper .awa-btn-ghost:hover:not(:disabled), body .page-main .awa-btn-ghost:hover:not(:disabled) { background: var(--awa-primary-subtle); color: var(--awa-primary-hover); transform: translateY(var(--awa-hover-lift)); } body .page-wrapper .action.delete:disabled, body .page-main .action.delete:disabled, body .page-wrapper .action.edit:disabled, body .page-main .action.edit:disabled, body .page-wrapper .action.towishlist:disabled, body .page-main .action.towishlist:disabled, body .page-wrapper .action.tocompare:disabled, body .page-main .action.tocompare:disabled, body .page-wrapper .btn-ghost:disabled, body .page-main .btn-ghost:disabled, body .page-wrapper .awa-btn-ghost:disabled, body .page-main .awa-btn-ghost:disabled, body .page-wrapper .action.delete[disabled], body .page-main .action.delete[disabled], body .page-wrapper .action.edit[disabled], body .page-main .action.edit[disabled], body .page-wrapper .action.towishlist[disabled], body .page-main .action.towishlist[disabled], body .page-wrapper .action.tocompare[disabled], body .page-main .action.tocompare[disabled], body .page-wrapper .btn-ghost[disabled], body .page-main .btn-ghost[disabled], body .page-wrapper .awa-btn-ghost[disabled], body .page-main .awa-btn-ghost[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none; } body .page-wrapper .action.delete:active:not(:disabled), body .page-main .action.delete:active:not(:disabled), body .page-wrapper .action.edit:active:not(:disabled), body .page-main .action.edit:active:not(:disabled), body .page-wrapper .action.towishlist:active:not(:disabled), body .page-main .action.towishlist:active:not(:disabled), body .page-wrapper .action.tocompare:active:not(:disabled), body .page-main .action.tocompare:active:not(:disabled), body .page-wrapper .btn-ghost:active:not(:disabled), body .page-main .btn-ghost:active:not(:disabled), body .page-wrapper .awa-btn-ghost:active:not(:disabled), body .page-main .awa-btn-ghost:active:not(:disabled) { transform: scale(0.97); } body .page-wrapper .action.delete:focus-visible, body .page-main .action.delete:focus-visible, body .page-wrapper .action.edit:focus-visible, body .page-main .action.edit:focus-visible, body .page-wrapper .action.towishlist:focus-visible, body .page-main .action.towishlist:focus-visible, body .page-wrapper .action.tocompare:focus-visible, body .page-main .action.tocompare:focus-visible, body .page-wrapper .btn-ghost:focus-visible, body .page-main .btn-ghost:focus-visible, body .page-wrapper .awa-btn-ghost:focus-visible, body .page-main .awa-btn-ghost:focus-visible { outline: var(--awa-border-width-strong) solid var(--awa-primary); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(183, 51, 55, 0.25); } body .page-wrapper .action.delete svg, body .page-main .action.delete svg, body .page-wrapper .action.edit svg, body .page-main .action.edit svg, body .page-wrapper .action.towishlist svg, body .page-main .action.towishlist svg, body .page-wrapper .action.tocompare svg, body .page-main .action.tocompare svg, body .page-wrapper .btn-ghost svg, body .page-main .btn-ghost svg, body .page-wrapper .awa-btn-ghost svg, body .page-main .awa-btn-ghost svg, body .page-wrapper .action.delete i, body .page-main .action.delete i, body .page-wrapper .action.edit i, body .page-main .action.edit i, body .page-wrapper .action.towishlist i, body .page-main .action.towishlist i, body .page-wrapper .action.tocompare i, body .page-main .action.tocompare i, body .page-wrapper .btn-ghost i, body .page-main .btn-ghost i, body .page-wrapper .awa-btn-ghost i, body .page-main .awa-btn-ghost i, body .page-wrapper .action.delete [class*="icon"], body .page-main .action.delete [class*="icon"], body .page-wrapper .action.edit [class*="icon"], body .page-main .action.edit [class*="icon"], body .page-wrapper .action.towishlist [class*="icon"], body .page-main .action.towishlist [class*="icon"], body .page-wrapper .action.tocompare [class*="icon"], body .page-main .action.tocompare [class*="icon"], body .page-wrapper .btn-ghost [class*="icon"], body .page-main .btn-ghost [class*="icon"], body .page-wrapper .awa-btn-ghost [class*="icon"], body .page-main .awa-btn-ghost [class*="icon"] { width: var(--awa-icon-size-sm); height: var(--awa-icon-size-sm); flex-shrink: 0; } body .page-wrapper .action.delete:active, body .page-main .action.delete:active, body .page-wrapper .action.edit:active, body .page-main .action.edit:active, body .page-wrapper .action.towishlist:active, body .page-main .action.towishlist:active, body .page-wrapper .action.tocompare:active, body .page-main .action.tocompare:active, body .page-wrapper .btn-ghost:active, body .page-main .btn-ghost:active, body .page-wrapper .awa-btn-ghost:active, body .page-main .awa-btn-ghost:active { transform: translateY(1px); } body .page-wrapper .action.delete:hover, body .page-main .action.delete:hover, body .page-wrapper .action.edit:hover, body .page-main .action.edit:hover, body .page-wrapper .action.towishlist:hover, body .page-main .action.towishlist:hover, body .page-wrapper .action.tocompare:hover, body .page-main .action.tocompare:hover, body .page-wrapper .btn-ghost:hover, body .page-main .btn-ghost:hover, body .page-wrapper .awa-btn-ghost:hover, body .page-main .awa-btn-ghost:hover, body .page-wrapper .action.delete:focus-visible, body .page-main .action.delete:focus-visible, body .page-wrapper .action.edit:focus-visible, body .page-main .action.edit:focus-visible, body .page-wrapper .action.towishlist:focus-visible, body .page-main .action.towishlist:focus-visible, body .page-wrapper .action.tocompare:focus-visible, body .page-main .action.tocompare:focus-visible, body .page-wrapper .btn-ghost:focus-visible, body .page-main .btn-ghost:focus-visible, body .page-wrapper .awa-btn-ghost:focus-visible, body .page-main .awa-btn-ghost:focus-visible { border-color: #b73337; color: #b73337; background: rgba(183, 51, 55, 0.04); transform: translateY(-1px); text-decoration: none; } body .page-wrapper .action.delete:focus-visible, body .page-main .action.delete:focus-visible, body .page-wrapper .action.edit:focus-visible, body .page-main .action.edit:focus-visible, body .page-wrapper .action.towishlist:focus-visible, body .page-main .action.towishlist:focus-visible, body .page-wrapper .action.tocompare:focus-visible, body .page-main .action.tocompare:focus-visible, body .page-wrapper .btn-ghost:focus-visible, body .page-main .btn-ghost:focus-visible, body .page-wrapper .awa-btn-ghost:focus-visible, body .page-main .awa-btn-ghost:focus-visible { outline: 2px solid #b73337; outline-offset: 2px; } body .page-wrapper .action.delete:disabled, body .page-main .action.delete:disabled, body .page-wrapper .action.edit:disabled, body .page-main .action.edit:disabled, body .page-wrapper .action.towishlist:disabled, body .page-main .action.towishlist:disabled, body .page-wrapper .action.tocompare:disabled, body .page-main .action.tocompare:disabled, body .page-wrapper .btn-ghost:disabled, body .page-main .btn-ghost:disabled, body .page-wrapper .awa-btn-ghost:disabled, body .page-main .awa-btn-ghost:disabled, body .page-wrapper .action.delete[disabled], body .page-main .action.delete[disabled], body .page-wrapper .action.edit[disabled], body .page-main .action.edit[disabled], body .page-wrapper .action.towishlist[disabled], body .page-main .action.towishlist[disabled], body .page-wrapper .action.tocompare[disabled], body .page-main .action.tocompare[disabled], body .page-wrapper .btn-ghost[disabled], body .page-main .btn-ghost[disabled], body .page-wrapper .awa-btn-ghost[disabled], body .page-main .awa-btn-ghost[disabled], body .page-wrapper .action.delete.disabled, body .page-main .action.delete.disabled, body .page-wrapper .action.edit.disabled, body .page-main .action.edit.disabled, body .page-wrapper .action.towishlist.disabled, body .page-main .action.towishlist.disabled, body .page-wrapper .action.tocompare.disabled, body .page-main .action.tocompare.disabled, body .page-wrapper .btn-ghost.disabled, body .page-main .btn-ghost.disabled, body .page-wrapper .awa-btn-ghost.disabled, body .page-main .awa-btn-ghost.disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; } body .page-wrapper .nav-sections .action, body .page-wrapper .header-control .action, body .page-wrapper .awa-nav-bar button, body .page-wrapper .awa-nav-bar .action { background: transparent; border: none; color: #ffffff; box-shadow: none; text-transform: none; letter-spacing: 0; min-height: auto; padding: 0; transform: none; } body .page-wrapper .action.is-loading, body .page-main .action.is-loading, body .page-wrapper .action._loading, body .page-main .action._loading { position: relative; pointer-events: none; color: transparent; } body .page-wrapper .action.is-loading::after, body .page-main .action.is-loading::after, body .page-wrapper .action._loading::after, body .page-main .action._loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #ffffff; border-radius: 50%; animation: awa-btn-spin 0.65s linear infinite; } @keyframes awa-btn-spin { to { transform: rotate(360deg); } } @media (max-width: 768px) { body .page-wrapper .action.primary, body .page-main .action.primary, body .page-wrapper .action.tocart, body .page-main .action.tocart, body .page-wrapper .action.checkout, body .page-main .action.checkout { width: 100%; max-width: 100%; } } @media (prefers-reduced-motion: reduce) { body .page-wrapper .action, body .page-main .action { transition: none; transform: none; animation: none; } } :is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5, body.catalog-category-view, body.catalogsearch-result-index) .categorytab-container .category_tab_slider .des .b2b-login-to-see-price::after { content: none !important; display: none !important; } :is(body.catalog-category-view, body.catalogsearch-result-index, body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) :is(.wrapper.grid.products-grid .item-product, .products-swiper .product-item, .product-tab-slider .item-product, .rokan-bestseller .item-product, .rokan-newproduct .item-product, .list-tab-product .item-product, .block-products-list .item-product, .block-new-products .item-product, .hot-deal .item-product) .b2b-login-to-see-price::after { content: none !important; display: none !important; } html body#html-body.catalog-product-view .awa-pdp-sticky-cta { position: fixed; inset-inline: 0; inset-block-end: calc(var(--awa-mobile-nav-h, 72px) + env(safe-area-inset-bottom, 0px)); z-index: var(--awa-z-pdp-sticky, 520); padding: 8px 12px; pointer-events: none; opacity: 0; transform: translateY(16px); transition: opacity 200ms ease-out, transform 200ms ease-out; } html body#html-body.catalog-product-view:not(.awa-pdp-sticky-cta-ready) .awa-pdp-sticky-cta { display: none !important; } html body#html-body.catalog-product-view.awa-pdp-sticky-cta-visible .awa-pdp-sticky-cta { pointer-events: auto; opacity: 1; transform: translateY(0); } html body#html-body.catalog-product-view .awa-pdp-sticky-cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; max-width: min(640px, 100%); margin-inline: auto; padding: 10px 12px; border: 1px solid rgba(229, 229, 229, 0.9); border-radius: 12px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); box-shadow: 0 -4px 24px rgba(51, 51, 51, 0.1); } html body#html-body.catalog-product-view .awa-pdp-sticky-cta__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } html body#html-body.catalog-product-view .awa-pdp-sticky-cta__name { font-size: 12px; font-weight: 600; line-height: 1.3; color: #333333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html body#html-body.catalog-product-view .awa-pdp-sticky-cta__name[hidden] { display: none !important; } html body#html-body.catalog-product-view .awa-pdp-sticky-cta__name:not([hidden]) + .awa-pdp-sticky-cta__label { display: none !important; } html body#html-body.catalog-product-view .awa-pdp-sticky-cta__label { font-size: 11px; font-weight: 600; line-height: 1.3; color: #666666; text-transform: none; letter-spacing: 0; } html body#html-body.catalog-product-view .awa-pdp-sticky-cta__price { font-size: 18px; font-weight: 700; line-height: 1.2; color: #b73337; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html body#html-body.catalog-product-view .awa-pdp-sticky-cta__price--muted { font-size: 14px; font-weight: 600; color: #666666; } html body#html-body.catalog-product-view .awa-pdp-sticky-cta__button { min-width: 9.5rem; min-height: 44px; padding: 0 12px; border: 0; border-radius: 4px; background: #b73337; color: #ffffff; font-size: 14px; font-weight: 700; box-shadow: 0 4px 14px rgba(183, 51, 55, 0.28); cursor: pointer; transition: background-color 200ms ease-out, box-shadow 200ms ease-out; } html body#html-body.catalog-product-view .awa-pdp-sticky-cta__button:hover, html body#html-body.catalog-product-view .awa-pdp-sticky-cta__button:focus-visible { background: #8e2629; outline: 2px solid #8e2629; outline-offset: 2px; } html body#html-body.catalog-product-view .awa-pdp-sticky-cta__button[disabled], html body#html-body.catalog-product-view .awa-pdp-sticky-cta--disabled .awa-pdp-sticky-cta__button { opacity: 0.58; box-shadow: none; cursor: not-allowed; } html body#html-body.catalog-product-view.awa-cookie-banner-active .awa-pdp-sticky-cta { inset-block-end: calc(var(--awa-mobile-nav-h, 72px) + 96px + env(safe-area-inset-bottom, 0px)); } @media (min-width: 768px) { html body#html-body.catalog-product-view .awa-pdp-sticky-cta { display: none !important; } } @media (prefers-reduced-motion: reduce) { html body#html-body.catalog-product-view .awa-pdp-sticky-cta, html body#html-body.catalog-product-view .awa-pdp-sticky-cta__button { transition: none !important; } } body.checkout-cart-index .modals-overlay, body.checkout-cart-index .modal-custom-overlay, body.checkout-cart-index .modal-popup._show, body.checkout-cart-index .modal-slide._show, body.checkout-cart-index .awa-mobile-drawer-overlay, body.checkout-cart-index .awa-mobile-drawer-overlay.is-active, body.checkout-cart-index .awa-nav-overlay, body.checkout-cart-index .awa-nav-overlay.is-visible, body.checkout-cart-index .minicart-wrapper.active::before, body.checkout-cart-index .minicart-wrapper .block-minicart::before, body.checkout-cart-index .minicart-wrapper .block-minicart._active::before { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } // ============================================================================= // AWA CONSOLIDATED CSS — S84-S92 ONLY // Prefixo legado (PARENT + awa-* avulsos) migrado para partials LESS no rebuild. // Regenerar S84+: scripts/rebuild-consolidated-s84-s92.sh // ============================================================================= /* ============================================================================= * S84-S92 — LESS SOURCE UNIFIED (recompile) * Compilação única — ver scripts/rebuild-consolidated-s84-s92.sh * ============================================================================= */ /* ========================================================================== AWA Design System — Canonical Tokens (source/_awa-variables.less) FONTE ÚNICA DE VERDADE para todos os design tokens AWA. Convenção de importação: _variables.less → @import '_awa-variables'; (shim Magento — 1ª entrada) _extend.less → usa @awa-* em escopo (disponíveis via _variables.less) Para adicionar ou alterar um token, edite APENAS este arquivo. ========================================================================== */ /* ========================================================================== AWA Design System — Foundation Layer (source/_design-system.less) Versão 2.0 — Tokens consolidados (2026-04-26) Camada de fundação do design system AWA Motos. Importa _awa-variables.less e extende com tokens, mixins e CSS custom properties para uso direto em qualquer partial LESS ou runtime CSS. ┌──────────────────────────────────────────────────────────────────────┐ │ TABELA DE TOKENS — Referência rápida │ ├────────────┬──────────────────┬───────────────────┬─────────────────┤ │ Grupo │ LESS var │ CSS custom prop │ Valor │ ├────────────┼──────────────────┼───────────────────┼─────────────────┤ │ CORES │ @awa-color-primary│ --awa-primary │ #b73337 │ │ │ (ver _awa-vars) │ --awa-primary-hover│ #8e2629 │ │ │ @awa-ink │ --awa-ink │ #1a1a1a │ │ │ @awa-ink-05 │ --awa-ink-05 │ rgba(0,0,0,.05) │ │ │ @awa-ink-20 │ --awa-ink-20 │ rgba(0,0,0,.20) │ │ │ @awa-ink-50 │ --awa-ink-50 │ rgba(0,0,0,.50) │ │ │ @awa-ink-80 │ --awa-ink-80 │ rgba(0,0,0,.80) │ │ │ @awa-color-white │ --awa-bg │ #ffffff │ │ │ @awa-color-bg-soft│ --awa-bg-soft │ #f7f7f7 │ │ │ @awa-color-success│ --awa-success │ #16a34a │ │ │ @awa-color-warning│ --awa-warning │ #d97706 │ │ │ @awa-color-error │ --awa-error │ #b73337 │ │ │ @awa-color-info │ --awa-info │ #0ea5e9 │ ├────────────┼──────────────────┼───────────────────┼─────────────────┤ │ ESPAÇAMENTO│ @awa-s-0 │ --awa-s-0 │ 0 │ │ (8px base) │ @awa-s-1 │ --awa-s-1 │ 8px │ │ │ @awa-s-2 │ --awa-s-2 │ 16px │ │ │ @awa-s-3 │ --awa-s-3 │ 24px │ │ │ @awa-s-4 │ --awa-s-4 │ 32px │ │ │ @awa-s-5 │ --awa-s-5 │ 40px │ │ │ @awa-s-6 │ --awa-s-6 │ 48px │ │ │ @awa-s-7 │ --awa-s-7 │ 64px │ │ │ @awa-s-8 │ --awa-s-8 │ 80px │ │ │ @awa-s-9 │ --awa-s-9 │ 96px │ ├────────────┼──────────────────┼───────────────────┼─────────────────┤ │ TIPOGRAFIA │ @awa-fs-xs │ --awa-fs-xs │ clamp(10..12px) │ │ (fluida) │ @awa-fs-sm │ --awa-fs-sm │ clamp(12..14px) │ │ │ @awa-fs-md │ --awa-fs-md │ clamp(14..16px) │ │ │ @awa-fs-lg │ --awa-fs-lg │ clamp(16..18px) │ │ │ @awa-fs-xl │ --awa-fs-xl │ clamp(18..20px) │ │ │ @awa-fs-2xl │ --awa-fs-2xl │ clamp(24..32px) │ │ │ @awa-fs-3xl │ --awa-fs-3xl │ clamp(28..36px) │ ├────────────┼──────────────────┼───────────────────┼─────────────────┤ │ RAIOS │ @awa-radius-sm │ --awa-radius-sm │ 8px │ │ │ @awa-radius-md │ --awa-radius-md │ 10px │ │ │ @awa-radius-lg │ --awa-radius-lg │ 16px │ │ │ @awa-radius-pill │ --awa-radius-pill │ 9999px │ ├────────────┼──────────────────┼───────────────────┼─────────────────┤ │ SOMBRAS │ @awa-shadow-sm │ --awa-shadow-sm │ 0 1px 3px… │ │ │ @awa-shadow-md │ --awa-shadow-md │ 0 4px 12px… │ │ │ @awa-shadow-lg │ --awa-shadow-lg │ 0 8px 24px… │ ├────────────┼──────────────────┼───────────────────┼─────────────────┤ │ MOTION │ @awa-ease │ --awa-ease │ cubic-bezier… │ │ │ @awa-dur-fast │ --awa-dur-fast │ 120ms │ │ │ @awa-dur-base │ --awa-dur-base │ 200ms │ │ │ @awa-dur-slow │ --awa-dur-slow │ 350ms │ ├────────────┼──────────────────┼───────────────────┼─────────────────┤ │ LAYOUT │ @awa-container- │ --awa-container- │ 1200px │ │ │ content │ content │ │ │ │ @ds-grid-max- │ --ds-grid-max- │ 1440px │ │ │ width │ width │ │ │ │ @awa-bp-576…1200 │ --awa-bp-576…1200 │ breakpoints │ └────────────┴──────────────────┴───────────────────┴─────────────────┘ USO: LESS: padding: @awa-s-3; // 24px CSS: padding: var(--awa-s-3); // 24px Fluid: font-size: var(--awa-fs-lg);// clamp(16px..18px) Mixin: .font-size-h2(); // clamp(28px..36px) REGRA: Este arquivo é 100% não-destrutivo. Apenas define variáveis, mapas e mixins para uso futuro. Nenhum seletor HTML é alterado. ========================================================================== */ :root { --ds-space-xs: 8px; --ds-space-sm: 16px; --ds-space-md: 24px; --ds-space-lg: 32px; --ds-space-xl: 40px; --ds-space-xxl: 48px; --ds-space-3xl: 64px; --ds-space-4xl: 80px; --awa-s-0: 0; --awa-s-1: 8px; --awa-s-2: 16px; --awa-s-3: 24px; --awa-s-4: 32px; --awa-s-5: 40px; --awa-s-6: 48px; --awa-s-7: 64px; --awa-s-8: 80px; --awa-s-9: 96px; } :root { --ds-bp-xs: 320px; --ds-bp-sm: 480px; --ds-bp-md: 768px; --ds-bp-lg: 1024px; --ds-bp-xl: 1280px; --ds-bp-xxl: 1920px; --ds-bp-4k: 2560px; --awa-bp-576: 576px; --awa-bp-768: 768px; --awa-bp-992: 992px; --awa-bp-1200: 1200px; } :root { --ds-font-xs: 12px; --ds-font-sm: 14px; --ds-font-base: 16px; --ds-font-lg: 18px; --ds-font-xl: 20px; --ds-font-h6: 18px; --ds-font-h5: 22px; --ds-font-h4: 24px; --ds-font-h3: 28px; --ds-font-h2: 36px; --ds-font-h1: 48px; --awa-fs-xs: clamp(10px, calc(9.33px + 0.208vw), 12px); --awa-fs-sm: clamp(12px, calc(11.33px + 0.208vw), 14px); --awa-fs-md: clamp(14px, calc(13.33px + 0.208vw), 16px); --awa-fs-lg: clamp(16px, calc(15.33px + 0.208vw), 18px); --awa-fs-xl: clamp(18px, calc(17.33px + 0.208vw), 20px); --awa-fs-2xl: clamp(24px, calc(21.33px + 0.833vw), 32px); --awa-fs-3xl: clamp(28px, calc(25.33px + 0.833vw), 36px); } :root { --awa-primary: #b73337; --awa-primary-hover: #8e2629; --awa-ink: #1a1a1a; --awa-ink-05: rgba(0, 0, 0, 0.05); --awa-ink-10: rgba(0, 0, 0, 0.1); --awa-ink-20: rgba(0, 0, 0, 0.2); --awa-ink-50: rgba(0, 0, 0, 0.5); --awa-ink-80: rgba(0, 0, 0, 0.8); --awa-bg: #ffffff; --awa-bg-soft: #f7f7f7; --awa-success: #16a34a; --awa-warning: #d97706; --awa-error: #b73337; --awa-info: #0ea5e9; --awa-radius-sm: 4px; --awa-radius-md: 8px; --awa-radius-lg: 16px; --awa-radius-pill: 9999px; --awa-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --awa-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --awa-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --awa-ease: cubic-bezier(0.4, 0, 0.2, 1); --awa-dur-fast: 120ms; --awa-dur-base: 200ms; --awa-dur-slow: 350ms; --awa-container-content: 1200px; } :root { --ds-grid-max-width: 1280px; --ds-grid-columns: 12; --ds-grid-gutter: 24px; --ds-grid-half-gutter: 12px; } :root { --awa-page-catalog: 1280px; --awa-page-dash: 1280px; --awa-page-flow: 1100px; --awa-page-narrow: 960px; --awa-page-prose: 800px; --awa-page-pad: 24px; --awa-page-content: 1280px; } body.cms-index-index .page-main, body.cms-homepage_ayo_home5 .page-main { max-width: 100% !important; padding-inline: 0 !important; } body.catalog-category-view .page-main, body.catalog-product-view .page-main, body.catalogsearch-result-index .page-main, body.checkout-cart-index .page-main { max-width: 1280px !important; width: 100%; margin-inline: auto; padding-inline: clamp(16px, 3vw, 24px); } @media (max-width: 1024px) { body.catalog-category-view .page-main, body.catalog-product-view .page-main, body.catalogsearch-result-index .page-main, body.checkout-cart-index .page-main { padding-inline: 16px; } } @media (max-width: 768px) { body.catalog-category-view .page-main, body.catalog-product-view .page-main, body.catalogsearch-result-index .page-main, body.checkout-cart-index .page-main { padding-inline: 12px; } } body.b2b-account-dashboard .page-main, body.b2b-company-index .page-main, body.b2b-credit-index .page-main, body.b2b-approval-index .page-main, body.b2b-reorder-history .page-main, body.customer-account-index .page-main, body.account .page-main, body.sales-order-history .page-main, body.sales-order-view .page-main, body.wishlist-index-index .page-main { max-width: 1280px !important; width: 100%; margin-inline: auto; padding-inline: 24px; } @media (max-width: 1024px) { body.b2b-account-dashboard .page-main, body.b2b-company-index .page-main, body.b2b-credit-index .page-main, body.b2b-approval-index .page-main, body.b2b-reorder-history .page-main, body.customer-account-index .page-main, body.account .page-main, body.sales-order-history .page-main, body.sales-order-view .page-main, body.wishlist-index-index .page-main { padding-inline: 16px; } } @media (max-width: 768px) { body.b2b-account-dashboard .page-main, body.b2b-company-index .page-main, body.b2b-credit-index .page-main, body.b2b-approval-index .page-main, body.b2b-reorder-history .page-main, body.customer-account-index .page-main, body.account .page-main, body.sales-order-history .page-main, body.sales-order-view .page-main, body.wishlist-index-index .page-main { padding-inline: 12px; } } // Account grid shell → _awa-account-layout.less (importado após consolidated em _extend.less) body.b2b-quote-index .page-main, body.b2b-quote-view .page-main, body.b2b-quote-create .page-main, body.b2b-shoppinglist-index .page-main, body.b2b-shoppinglist-view .page-main, body.b2b-quickorder-index .page-main { max-width: 1100px !important; width: 100%; margin-inline: auto; padding-inline: 24px; } @media (max-width: 1024px) { body.b2b-quote-index .page-main, body.b2b-quote-view .page-main, body.b2b-quote-create .page-main, body.b2b-shoppinglist-index .page-main, body.b2b-shoppinglist-view .page-main, body.b2b-quickorder-index .page-main { padding-inline: 16px; } } @media (max-width: 768px) { body.b2b-quote-index .page-main, body.b2b-quote-view .page-main, body.b2b-quote-create .page-main, body.b2b-shoppinglist-index .page-main, body.b2b-shoppinglist-view .page-main, body.b2b-quickorder-index .page-main { padding-inline: 12px; } } body.b2b-auth-shell .page-main, body.b2b-account-login .page-main, body.b2b-register-index .page-main, body.customer-account-login .page-main, body.customer-account-create .page-main, body.customer-account-forgotpassword .page-main, body.checkout-index-index .page-main, body.onepagecheckout-index-index .page-main { max-width: 960px !important; width: 100%; margin-inline: auto; padding-inline: 24px; padding-block: 40px; } @media (max-width: 1024px) { body.b2b-auth-shell .page-main, body.b2b-account-login .page-main, body.b2b-register-index .page-main, body.customer-account-login .page-main, body.customer-account-create .page-main, body.customer-account-forgotpassword .page-main, body.checkout-index-index .page-main, body.onepagecheckout-index-index .page-main { padding-inline: 16px; } } @media (max-width: 768px) { body.b2b-auth-shell .page-main, body.b2b-account-login .page-main, body.b2b-register-index .page-main, body.customer-account-login .page-main, body.customer-account-create .page-main, body.customer-account-forgotpassword .page-main, body.checkout-index-index .page-main, body.onepagecheckout-index-index .page-main { padding-inline: 12px; } } @media (max-width: 768px) { body.b2b-auth-shell .page-main, body.b2b-account-login .page-main, body.b2b-register-index .page-main, body.customer-account-login .page-main, body.customer-account-create .page-main, body.customer-account-forgotpassword .page-main, body.checkout-index-index .page-main, body.onepagecheckout-index-index .page-main { padding-block: 24px; } } body.cms-page-view .page-main, body.curriculo-index-index .page-main, body.curriculo-index-status .page-main, body.ayo-curriculo-index-index .page-main, body.ayo-curriculo-index-status .page-main { max-width: 800px !important; width: 100%; margin-inline: auto; padding-inline: 24px; padding-block: 48px; } @media (max-width: 1024px) { body.cms-page-view .page-main, body.curriculo-index-index .page-main, body.curriculo-index-status .page-main, body.ayo-curriculo-index-index .page-main, body.ayo-curriculo-index-status .page-main { padding-inline: 16px; } } @media (max-width: 768px) { body.cms-page-view .page-main, body.curriculo-index-index .page-main, body.curriculo-index-status .page-main, body.ayo-curriculo-index-index .page-main, body.ayo-curriculo-index-status .page-main { padding-inline: 12px; } } @media (max-width: 768px) { body.cms-page-view .page-main, body.curriculo-index-index .page-main, body.curriculo-index-status .page-main, body.ayo-curriculo-index-index .page-main, body.ayo-curriculo-index-status .page-main { padding-block: 24px; } } body.catalog-category-view .breadcrumbs, body.catalog-product-view .breadcrumbs, body.catalogsearch-result-index .breadcrumbs { max-width: 1440px; margin-inline: auto; padding-inline: 24px; } @media (max-width: 1024px) { body.catalog-category-view .breadcrumbs, body.catalog-product-view .breadcrumbs, body.catalogsearch-result-index .breadcrumbs { padding-inline: 16px; } } :root { --awa-text-3xs: 10px; --awa-text-2xs: 11px; --awa-text-xs: 12px; --awa-text-sm: 13px; --awa-text-base: 14px; --awa-text-base-plus: 15px; --awa-text-md: 16px; --awa-text-lg: 18px; --awa-text-xl: 20px; --awa-text-xl-plus: 22px; --awa-text-2xl: 24px; --awa-text-3xl: 28px; --awa-text-4xl: 32px; --awa-text-5xl: 40px; --awa-text-fluid-xs: clamp(10px, calc(9.33px + 0.208vw), 12px); --awa-text-fluid-sm: clamp(12px, calc(11.33px + 0.208vw), 14px); --awa-text-fluid-base: clamp(14px, calc(13.33px + 0.208vw), 16px); --awa-text-fluid-md: clamp(14px, calc(13.33px + 0.208vw), 16px); --awa-text-fluid-lg: clamp(16px, calc(15.33px + 0.208vw), 18px); --awa-text-fluid-xl: clamp(18px, calc(17.33px + 0.208vw), 20px); --awa-text-fluid-2xl: clamp(24px, calc(21.33px + 0.833vw), 32px); --awa-text-fluid-3xl: clamp(28px, calc(25.33px + 0.833vw), 36px); --awa-text-fluid-h6: clamp(16px, calc(15.33px + 0.208vw), 18px); --awa-text-fluid-h5: clamp(18px, calc(16.67px + 0.417vw), 22px); --awa-text-fluid-h4: clamp(20px, calc(18.67px + 0.417vw), 24px); --awa-text-fluid-h3: clamp(24px, calc(22.67px + 0.417vw), 28px); --awa-text-fluid-h2: clamp(28px, calc(25.33px + 0.833vw), 36px); --awa-text-fluid-h1: clamp(32px, calc(26.67px + 1.667vw), 48px); --awa-font-size-2xs: var(--awa-text-3xs); --awa-font-size-xs: var(--awa-text-2xs); --awa-font-size-12: var(--awa-text-xs); --awa-font-size-sm: var(--awa-text-sm); --awa-font-size-14: var(--awa-text-base); --awa-font-size-md: var(--awa-text-base-plus); --awa-font-size-base: var(--awa-text-base); --awa-font-size: var(--awa-text-md); --awa-font-size-16: var(--awa-text-md); --awa-font-size-lg: var(--awa-text-lg); --awa-font-size-20: var(--awa-text-xl); --awa-font-size-xl: var(--awa-text-xl); --awa-font-size-24: var(--awa-text-2xl); --awa-font-size-2xl: var(--awa-text-2xl); --awa-font-size-3xl: var(--awa-text-4xl); --awa-font-xs: var(--awa-text-2xs); --awa-font-sm: var(--awa-text-sm); --awa-font-base: var(--awa-text-base); --awa-font-md: var(--awa-text-base-plus); --awa-font-lg: var(--awa-text-lg); --awa-font-xl: var(--awa-text-xl); --awa-fs-xs: var(--awa-text-fluid-xs); --awa-fs-sm: var(--awa-text-fluid-sm); --awa-fs-base: var(--awa-text-fluid-base); --awa-fs-md: var(--awa-text-fluid-md); --awa-fs-lg: var(--awa-text-fluid-lg); --awa-fs-xl: var(--awa-text-fluid-xl); --awa-fs-2xl: var(--awa-text-fluid-2xl); --awa-fs-3xl: var(--awa-text-fluid-3xl); --awa-fluid-text-sm: var(--awa-text-fluid-sm); --awa-fluid-text-sm2: var(--awa-text-fluid-sm); --awa-fluid-text-md: var(--awa-text-fluid-md); --awa-fluid-text-md2: var(--awa-text-fluid-md); --awa-fluid-text-md4: var(--awa-text-fluid-lg); --awa-fluid-text-md6: var(--awa-text-fluid-lg); --awa-fluid-text-lg: var(--awa-text-fluid-lg); --awa-fluid-text-xl2: var(--awa-text-fluid-xl); --awa-fluid-text-2xl: var(--awa-text-fluid-2xl); --awa-fluid-text-2xl2: var(--awa-text-fluid-2xl); --awa-text-10-5: 10.5px; --awa-text-12-5: 12.5px; --awa-text-36: 36px; --awa-fs-90: clamp(10px, calc(9px + 0.15vw), 12px); --awa-fs-115: clamp(12px, calc(11.5px + 0.15vw), 14px); --awa-fs-130: clamp(13px, calc(12.33px + 0.208vw), 15px); --awa-fs-xs2: var(--awa-text-fluid-xs); --awa-fs-xs3: var(--awa-text-fluid-xs); --awa-weight-light: 300; --awa-weight-normal: 400; --awa-weight-medium: 500; --awa-weight-semibold: 600; --awa-weight-bold: 700; --awa-weight-extrabold: 800; --awa-weight-semi: var(--awa-weight-semibold); --awa-leading-none: 1; --awa-leading-tight: 1.1; --awa-leading-compact: 1.2; --awa-leading-snug: 1.25; --awa-leading-base: 1.3; --awa-leading-cozy: 1.35; --awa-leading-normal: 1.4; --awa-leading-comfortable: 1.45; --awa-leading-relaxed: 1.5; --awa-leading-loose: 1.6; --awa-tracking-tighter: -0.02em; --awa-tracking-tight: -0.01em; --awa-tracking-normal: 0; --awa-tracking-wide: 0.02em; --awa-tracking-wider: 0.04em; --awa-tracking-widest: 0.08em; } .awa-text-3xs { font-size: var(--awa-text-3xs); } .awa-text-2xs { font-size: var(--awa-text-2xs); } .awa-text-xs { font-size: var(--awa-text-xs); } .awa-text-sm { font-size: var(--awa-text-sm); } .awa-text-base { font-size: var(--awa-text-base); } .awa-text-md { font-size: var(--awa-text-md); } .awa-text-lg { font-size: var(--awa-text-lg); } .awa-text-xl { font-size: var(--awa-text-xl); } .awa-text-2xl { font-size: var(--awa-text-2xl); } .awa-text-3xl { font-size: var(--awa-text-3xl); } .awa-text-4xl { font-size: var(--awa-text-4xl); } .awa-text-5xl { font-size: var(--awa-text-5xl); } .awa-font-light { font-weight: var(--awa-weight-light); } .awa-font-normal { font-weight: var(--awa-weight-normal); } .awa-font-medium { font-weight: var(--awa-weight-medium); } .awa-font-semibold { font-weight: var(--awa-weight-semibold); } .awa-font-bold { font-weight: var(--awa-weight-bold); } .awa-font-extrabold { font-weight: var(--awa-weight-extrabold); } .awa-leading-tight { line-height: var(--awa-leading-tight); } .awa-leading-snug { line-height: var(--awa-leading-snug); } .awa-leading-normal { line-height: var(--awa-leading-normal); } .awa-leading-relaxed { line-height: var(--awa-leading-relaxed); } .awa-leading-loose { line-height: var(--awa-leading-loose); } .awa-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .awa-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .awa-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .awa-tabular-nums { font-variant-numeric: tabular-nums; } .awa-nowrap { white-space: nowrap; } :root { --awa-neutral-50: #f8fafc; --awa-neutral-100: #f1f5f9; --awa-neutral-200: #e2e8f0; --awa-neutral-300: #cbd5e1; --awa-neutral-400: #94a3b8; --awa-neutral-500: #64748b; --awa-neutral-600: #475569; --awa-neutral-700: #334155; --awa-neutral-800: #1e293b; --awa-neutral-900: #0f172a; --awa-white: #ffffff; --awa-black: #000000; --awa-bg-page: var(--awa-white); --awa-bg-muted: #f7f7f7; --awa-bg-accent: #f0f0f0; --awa-bg-surface-alt: #fafafa; --awa-bg-hover: var(--awa-neutral-50); --awa-bg-selected: var(--awa-primary-50, #fef2f2); --awa-text-primary: var(--awa-neutral-900); --awa-text-secondary: var(--awa-neutral-600); --awa-text-tertiary: var(--awa-neutral-400); --awa-text-disabled: var(--awa-neutral-300); --awa-text-on-primary: var(--awa-white); --awa-border-default: #e5e5e5; --awa-border-hover: var(--awa-neutral-400); --awa-border-focus: var(--awa-red); --awa-border-error: var(--awa-red); --awa-focus-ring-color: var(--awa-red); --awa-link-color: var(--awa-red); --awa-link-hover: var(--awa-red-dark); --awa-social-fb: #365397; --awa-social-twitter: #1da1f2; --awa-social-whatsapp: #25d366; --awa-social-youtube: #ff0000; --awa-social-instagram: #e4405f; --awa-status-success: #16a34a; --awa-status-warning: #d97706; --awa-status-error: var(--awa-red); --awa-status-info: #2563eb; --awa-status-success-bg: #f0fdf4; --awa-status-warning-bg: #fffbeb; --awa-status-error-bg: #fef2f2; --awa-status-info-bg: #eff6ff; } .awa-text-primary { color: var(--awa-neutral-900); } .awa-text-secondary { color: var(--awa-neutral-600); } .awa-text-muted { color: var(--awa-neutral-400); } .awa-text-red { color: var(--awa-red); } .awa-text-success { color: var(--awa-status-success); } .awa-text-warning { color: var(--awa-status-warning); } .awa-text-white { color: var(--awa-white); } .awa-bg-white { background-color: var(--awa-white); } .awa-bg-muted { background-color: var(--awa-bg-muted); } .awa-bg-accent { background-color: var(--awa-bg-accent); } .awa-bg-red { background-color: var(--awa-red); } .awa-bg-dark { background-color: var(--awa-secondary); } .awa-bg-success { background-color: var(--awa-status-success-bg); } .awa-bg-warning { background-color: var(--awa-status-warning-bg); } .awa-bg-error { background-color: var(--awa-status-error-bg); } .awa-border-default { border-color: var(--awa-border-default); } .awa-border-red { border-color: var(--awa-red); } .awa-border-success { border-color: var(--awa-status-success); } :root { --awa-s-0: 0; --awa-s-px: 1px; --awa-s-0-5: 2px; --awa-s-1: 4px; --awa-s-1-5: 6px; --awa-s-2: 8px; --awa-s-2-5: 10px; --awa-s-3: 12px; --awa-s-3-5: 14px; --awa-s-4: 16px; --awa-s-5: 20px; --awa-s-6: 24px; --awa-s-7: 32px; --awa-s-8: 40px; --awa-s-9: 48px; --awa-s-10: 64px; --awa-s-12: 80px; --awa-s-16: 96px; --awa-s-xs: var(--awa-s-1); --awa-s-sm: var(--awa-s-2); --awa-s-md: var(--awa-s-3); --awa-s-lg: var(--awa-s-4); --awa-s-xl: var(--awa-s-5); --awa-s-2xl: var(--awa-s-6); --awa-s-3xl: var(--awa-s-7); --awa-s-4xl: var(--awa-s-8); --awa-s-5xl: var(--awa-s-9); --awa-s-6xl: var(--awa-s-10); --awa-shadow-none: none; --awa-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --awa-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --awa-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --awa-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --awa-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --awa-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); --awa-shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.2); --awa-shadow-brand: 0 4px 12px color-mix(in srgb, var(--awa-red) 24%, transparent); --awa-shadow-brand-lg: 0 8px 20px color-mix(in srgb, var(--awa-red) 18%, transparent); --awa-shadow-brand-xl: 0 8px 24px color-mix(in srgb, var(--awa-red) 36%, transparent); --awa-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--awa-red) 25%, transparent); --awa-shadow-focus-soft: 0 0 0 3px color-mix(in srgb, var(--awa-red) 12%, transparent); --awa-shadow-inset: inset 0 0 0 1px var(--awa-border-default, #e5e5e5); --awa-shadow-card: var(--awa-shadow-sm); --awa-shadow-card-hover: var(--awa-shadow-md); --awa-shadow-dropdown: 0 6px 20px rgba(0, 0, 0, 0.12); --awa-shadow-badge: 0 1px 4px rgba(0, 0, 0, 0.12); --awa-shadow-hover: var(--awa-shadow-md); --awa-shadow-red: var(--awa-shadow-brand); --awa-shadow-focus-ring: var(--awa-shadow-focus); --awa-radius-none: 0; --awa-radius-2xs: 4px; --awa-radius-xs: 4px; --awa-radius-sm: 8px; --awa-radius-md: 12px; --awa-radius-md-lg: 14px; --awa-radius-lg: 16px; --awa-radius-xl: 20px; --awa-radius-2xl: 24px; --awa-radius-pill: 9999px; --awa-radius-full: 9999px; --awa-radius: var(--awa-radius-md); --awa-duration-fast: 100ms; --awa-duration-base: 200ms; --awa-duration-slow: 300ms; --awa-duration-slower: 500ms; --awa-ease-default: cubic-bezier(0.4, 0, 0.2, 1); --awa-ease-in: cubic-bezier(0.4, 0, 1, 1); --awa-ease-out: cubic-bezier(0, 0, 0.2, 1); --awa-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --awa-transition-colors: color var(--awa-duration-base) var(--awa-ease-default), background-color var(--awa-duration-base) var(--awa-ease-default), border-color var(--awa-duration-base) var(--awa-ease-default); --awa-transition-shadow: box-shadow var(--awa-duration-base) var(--awa-ease-default); --awa-transition-transform: transform var(--awa-duration-fast) var(--awa-ease-default); --awa-transition-all: all var(--awa-duration-base) var(--awa-ease-default); } .awa-m-0 { margin: 0; } .awa-mt-0 { margin-top: 0; } .awa-mb-0 { margin-bottom: 0; } .awa-mb-1 { margin-bottom: var(--awa-s-1); } .awa-mb-2 { margin-bottom: var(--awa-s-2); } .awa-mb-3 { margin-bottom: var(--awa-s-3); } .awa-mb-4 { margin-bottom: var(--awa-s-4); } .awa-mb-6 { margin-bottom: var(--awa-s-6); } .awa-mb-8 { margin-bottom: var(--awa-s-8); } .awa-mx-auto { margin-inline: auto; } .awa-p-0 { padding: 0; } .awa-p-2 { padding: var(--awa-s-2); } .awa-p-3 { padding: var(--awa-s-3); } .awa-p-4 { padding: var(--awa-s-4); } .awa-p-6 { padding: var(--awa-s-6); } .awa-px-4 { padding-inline: var(--awa-s-4); } .awa-px-6 { padding-inline: var(--awa-s-6); } .awa-py-2 { padding-block: var(--awa-s-2); } .awa-py-4 { padding-block: var(--awa-s-4); } .awa-py-6 { padding-block: var(--awa-s-6); } .awa-gap-1 { gap: var(--awa-s-1); } .awa-gap-2 { gap: var(--awa-s-2); } .awa-gap-3 { gap: var(--awa-s-3); } .awa-gap-4 { gap: var(--awa-s-4); } .awa-gap-6 { gap: var(--awa-s-6); } .awa-shadow-none { box-shadow: var(--awa-shadow-none); } .awa-shadow-xs { box-shadow: var(--awa-shadow-xs); } .awa-shadow-sm { box-shadow: var(--awa-shadow-sm); } .awa-shadow { box-shadow: var(--awa-shadow); } .awa-shadow-md { box-shadow: var(--awa-shadow-md); } .awa-shadow-lg { box-shadow: var(--awa-shadow-lg); } .awa-shadow-xl { box-shadow: var(--awa-shadow-xl); } .awa-rounded-none { border-radius: var(--awa-radius-none); } .awa-rounded-sm { border-radius: var(--awa-radius-sm); } .awa-rounded { border-radius: var(--awa-radius-md); } .awa-rounded-lg { border-radius: var(--awa-radius-lg); } .awa-rounded-xl { border-radius: var(--awa-radius-xl); } .awa-rounded-pill { border-radius: var(--awa-radius-pill); } .awa-rounded-full { border-radius: var(--awa-radius-full); } @media (prefers-reduced-motion: reduce) { :root { --awa-duration-fast: 0ms; --awa-duration-base: 0ms; --awa-duration-slow: 0ms; --awa-duration-slower: 0ms; } } /* ========================================================================== AWA Design System — Semantic Brand Tokens (source/_tokens.less) Camada semântica sobre os tokens primitivos de _awa-variables.less. Nomes descrevem intenção (primary, text, bg…), sem vínculo a componente. ========================================================================== */ :root { --awa-primary: #b73337; --awa-primary-dark: #8e2629; --awa-primary-hover: #8e2629; --awa-primary-50: #fef2f2; --awa-primary-100: #fde8e8; --awa-primary-light: #f9e5e5; --awa-primary-subtle: rgba(183, 51, 55, 0.06); --awa-primary-10: rgba(183, 51, 55, 0.1); --awa-primary-15: rgba(183, 51, 55, 0.15); --awa-red: var(--awa-primary); --awa-secondary: #333333; --awa-secondary-hover: #2e2e2e; --awa-secondary-muted: #4a4a4a; --awa-color-dark: #333333; --awa-color-dark-text: #ffffff; --awa-text: #333333; --awa-text-muted: #666666; --awa-text-light: #999999; --awa-text-inverse: #ffffff; --awa-bg: #ffffff; --awa-bg-surface: #ffffff; --awa-bg-elevated: #ffffff; --awa-bg-dark: #333333; --awa-bg-overlay: rgba(0, 0, 0, 0.45); --awa-nav-bg: var(--awa-primary); --awa-nav-bg-hover: var(--awa-primary-hover); --awa-nav-text: var(--awa-text-inverse); --awa-nav-divider: rgba(255, 255, 255, 0.14); --awa-nav-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(15, 23, 42, 0.1); --awa-nav-pill-bg: rgba(255, 255, 255, 0.08); --awa-nav-pill-bg-hover: rgba(255, 255, 255, 0.16); --awa-nav-pill-border: rgba(255, 255, 255, 0.2); --awa-nav-pill-border-hover: rgba(255, 255, 255, 0.32); --awa-nav-pill-shadow: 0 8px 18px rgba(15, 23, 42, 0.12); --awa-nav-link-bg-hover: rgba(255, 255, 255, 0.14); --awa-nav-link-bg-active: rgba(0, 0, 0, 0.16); --awa-border: #e5e5e5; --awa-border-strong: #cbd5e1; --awa-border-subtle: #e5e7eb; --awa-border-width: 1px; --awa-border-width-strong: 2px; --awa-success: #16a34a; --awa-success-bg: #dcfce7; --awa-warning: #d97706; --awa-warning-bg: #fef3c7; --awa-error: #b73337; --awa-error-bg: rgba(183, 51, 55, 0.08); --awa-info: #0ea5e9; --awa-info-bg: #eff6ff; --awa-msg-success-text: #166534; --awa-msg-error-text: #8e2629; --awa-msg-warning-text: #92400e; --awa-msg-info-text: #1e40af; --awa-text-on-dark: rgba(255, 255, 255, 0.85); --awa-text-on-dark-muted: rgba(255, 255, 255, 0.5); --awa-text-on-dark-faint: rgba(255, 255, 255, 0.3); --awa-text-on-dark-muted-solid: #bbbbbb; --awa-whatsapp: #25D366; --awa-whatsapp-dark: #1da851; --awa-whatsapp-bright: #4dda85; --awa-whatsapp-bright-hover: #80edb1; --awa-bg-page: #f9fafb; --awa-bg-input: #f5f5f5; --awa-promo: #f5a623; --awa-skeleton: #ececec; --awa-gradient-warm: #e57373; --awa-gray-950: #0f172a; --awa-neutral-50: #f8fafc; --awa-neutral-100: #f1f5f9; --awa-neutral-200: #e2e8f0; --awa-neutral-300: #cbd5e1; --awa-neutral-400: #94a3b8; --awa-neutral-500: #64748b; --awa-neutral-600: #475569; --awa-neutral-700: #334155; --awa-neutral-800: #1e293b; --awa-neutral-900: #0f172a; --awa-radius-2xs: 4px; --awa-radius-xs: 4px; --awa-radius-sm: 4px; --awa-radius-md: 8px; --awa-radius-pill: 9999px; --awa-radius-lg: 16px; --awa-radius-xl: 16px; --awa-radius-2xl: 16px; --awa-radius-3xl: 16px; --awa-radius-full: 9999px; --awa-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --awa-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.06); --awa-shadow-md: 0 8px 20px -4px rgba(0, 0, 0, 0.08), 0 4px 8px -4px rgba(0, 0, 0, 0.04); --awa-shadow-lg: 0 20px 32px -8px rgba(0, 0, 0, 0.12), 0 8px 16px -8px rgba(0, 0, 0, 0.08); --awa-shadow-xl: 0 32px 64px -12px rgba(0, 0, 0, 0.16); --awa-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06); --awa-font-size-2xs: 10px; --awa-font-size-xs: 11px; --awa-font-size-12: 12px; --awa-font-size-sm: 13px; --awa-font-size-14: 14px; --awa-font-size-md: 15px; --awa-font-size-16: 16px; --awa-font-size-lg: 18px; --awa-font-size-20: 20px; --awa-font-size-xl: 22px; --awa-font-size-24: 24px; --awa-font-size-2xl: 28px; --awa-font-size-3xl: 36px; --awa-font-size-4xl: 48px; --awa-weight-normal: 400; --awa-weight-medium: 500; --awa-weight-semi: 600; --awa-weight-bold: 700; --awa-weight-black: 800; --awa-leading-tight: 1.15; --awa-leading-snug: 1.3; --awa-leading-normal: 1.5; --awa-leading-relaxed: 1.7; --awa-ease: cubic-bezier(0.4, 0, 0.2, 1); --awa-ease-out: cubic-bezier(0, 0, 0.2, 1); --awa-ease-in: cubic-bezier(0.4, 0, 1, 1); --awa-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --awa-duration-fast: 150ms; --awa-duration: 250ms; --awa-duration-slow: 400ms; --awa-hover-lift: -4px; --awa-hover-scale: 1.02; --awa-space-1: 4px; --awa-space-2: 8px; --awa-space-3: 12px; --awa-space-4: 16px; --awa-space-5: 20px; --awa-space-6: 24px; --awa-space-7: 32px; --awa-space-8: 40px; --awa-space-9: 48px; --awa-space-10: 48px; --awa-space-12: 56px; --awa-space-16: 80px; --awa-space-xs: var(--awa-space-1); --awa-space-sm: var(--awa-space-2); --awa-space-md: var(--awa-space-4); --awa-space-lg: var(--awa-space-6); --awa-space-xl: var(--awa-space-8); --awa-stack-tight: var(--awa-space-3); --awa-stack-base: var(--awa-space-6); --awa-stack-loose: var(--awa-space-8); --awa-gap-card: var(--awa-space-4); --awa-card-pad: var(--awa-space-5); --awa-card-radius: var(--awa-radius-lg); --awa-card-shadow: var(--awa-shadow-md); --awa-card-shadow-hover: var(--awa-shadow-lg); --awa-card-border: 1px solid rgba(0, 0, 0, 0.05); --awa-bento-gap: var(--awa-space-4); --awa-bento-radius: var(--awa-radius-lg); --awa-bento-bg: var(--awa-white); --awa-bento-border: 1px solid rgba(0, 0, 0, 0.04); --awa-bento-shadow: var(--awa-shadow-sm); --awa-glass-bg: rgba(255, 255, 255, 0.7); --awa-glass-blur: 12px; --awa-glass-border: 1px solid rgba(255, 255, 255, 0.3); --awa-section-header-mb: var(--awa-space-8); --awa-section-header-pb: var(--awa-space-3); --awa-section-header-border: none; --awa-section-header-accent: none; --awa-section-header-title-pl: 0; --awa-section-header-font-size: clamp(20px, 3vw, 28px); --awa-section-header-font-weight: 800; --awa-section-header-color: var(--awa-text); --awa-section-header-letter-spacing: -0.02em; --awa-section-header-link-size: var(--awa-font-size-sm); --awa-section-header-link-color: var(--awa-primary); --awa-card-btn-h: 44px; --awa-card-pad-img: 16px; --awa-card-pad-body: 12px 16px; --awa-card-pad-action: 0 16px 16px; --awa-card-img-h: 240px; --awa-card-img-inner-h: 200px; --awa-section-gap: 24px; --awa-section-gap-sm: 16px; --awa-container-pad: 16px; --awa-container-padding: var(--awa-container-pad); --awa-container: var(--awa-container-max); --awa-container-max: 1280px; --awa-container-small-max: 960px; --awa-container-wide-max: 1280px; --awa-container-narrow: 960px; --awa-container-wide: 1280px; --awa-content-max-readable: 72ch; --awa-heading-1-size: clamp(34px, 5vw, 52px); --awa-heading-2-size: clamp(28px, 4vw, 40px); --awa-heading-3-size: clamp(22px, 3vw, 32px); --awa-heading-4-size: clamp(18px, 2.5vw, 24px); --awa-heading-5-size: clamp(16px, 2vw, 20px); --awa-heading-6-size: clamp(14px, 1.5vw, 16px); --awa-heading-line-height: 1.1; --awa-heading-letter-spacing: -0.03em; --awa-icon-size-sm: 16px; --awa-icon-size-md: 20px; --awa-icon-size-lg: 24px; --container-max: var(--awa-container-max); --container-pad: var(--awa-container-padding); --section-gap: var(--awa-section-gap); --section-gap-sm: var(--awa-section-gap-sm); --awa-z-base: 1; --awa-z-dropdown: 100; --awa-z-tooltip: 150; --awa-z-sticky: 200; --awa-z-floating-btn: 250; --awa-z-overlay: 500; --awa-z-modal-backdrop: 999; --awa-z-modal: 1000; --awa-z-toast: 1100; --awa-pdp-gallery-min-h: 500px; } :root { --awa-vmenu-width: 260px; --awa-vmenu-item-h: 42px; --awa-vmenu-icon-size: 18px; --awa-vmenu-font-size: 13px; --awa-vmenu-sub-font: 12px; --awa-vmenu-header-h: 44px; --awa-vmenu-header-bg: var(--awa-primary); --awa-vmenu-header-color: #ffffff; --awa-vmenu-active-bg: var(--awa-primary-light); --awa-vmenu-active-border: var(--awa-primary); --awa-vmenu-hover-bg: var(--awa-bg-surface); --awa-vmenu-open-bg: var(--awa-bg-surface); --awa-vmenu-sub-bg: var(--awa-bg-surface); --awa-vmenu-sub-indent: 44px; --awa-flyout-width: 480px; --awa-flyout-col-icon: 48px; --awa-page-with-vmenu: grid; --awa-vmenu-top: 0px; } :root { --awa-font-xs: 11px; --awa-font-sm: 13px; --awa-font-md: 15px; --awa-font-lg: 18px; --awa-font-xl: 20px; } @media (min-width: 768px) { :root { --awa-section-gap: 32px; --awa-section-gap-sm: 24px; } } @media (min-width: 1024px) { :root { --awa-section-gap: 40px; } } :root { /* ?? awa-cons ? design tokens ??? */ --awa-cons-c1: #9ca3af; --awa-cons-c2: #f8f8f8; --awa-cons-c3: #f0f0f0; --awa-cons-c4: #fff8e6; --awa-cons-c5: #f0fdf4; --awa-cons-c6: #f3f4f6; --awa-cons-c7: #ebebeb; --awa-cons-c8: #e5e5e5; --awa-cons-c9: #166534; --awa-cons-c10: #16a34a; --awa-cons-c11: #92400e; --awa-cons-c12: #842528; --awa-cons-c13: #c0cad7; --awa-cons-c14: #fafafa; --awa-cons-c15: #fff4f4; --awa-cons-c16: #b7e4c7; --awa-cons-c17: #334155; --awa-cons-c18: #1a1a2e; --awa-cons-c19: #f0f2f5; --awa-cons-c20: #f8fafc; --awa-cons-c21: #065f46; --awa-cons-c22: #475569; --awa-cons-c23: #1e40af; --awa-cons-c24: #dc2626; --awa-cons-c25: #f8f9fc; --awa-cons-c26: #d9d9d9; --awa-cons-c27: #fef3c7; --awa-cons-c28: #991b1b; --awa-cons-c29: #b73337; --awa-cons-c30: #fff5f5; --awa-cons-c31: #b8c4d6; --awa-cons-c32: #fde68a; --awa-cons-c33: #bbf7d0; --awa-cons-c34: #881337; --awa-cons-c35: #fecaca; --awa-cons-c36: #595959; --awa-cons-c37: #dcdde3; --awa-cons-c38: #e8e8e8; --awa-cons-c39: #374151; --awa-cons-c40: #e2e8f0; --awa-cons-c41: #cbd5e1; --awa-cons-c42: #646981; --awa-cons-c43: #fef2f2; --awa-cons-c44: #3a3a3a; --awa-cons-c45: #1ebe5d; --awa-cons-c46: #fff1f2; --awa-cons-c47: #1e293b; --awa-cons-c48: #1a2744; --awa-cons-c49: #8b97a8; --awa-cons-c50: #f5f5f5; --awa-cons-c51: #bfdbfe; --awa-cons-c52: #78350f; --awa-cons-c53: #2d7a3a; --awa-cons-c54: #1f2937; --awa-cons-c55: #952b2f; --awa-cons-c56: #111827; --awa-cons-c57: #eef2f7; --awa-cons-c58: #a12d30; --awa-cons-c59: #e53e3e; --awa-cons-c60: #8a2528; --awa-cons-c61: #f97316; --awa-cons-c62: #16213e; --awa-cons-c63: #eff6ff; --awa-cons-c64: #eefbf3; --awa-cons-c65: #25d366; --awa-cons-c66: #a63135; --awa-cons-c67: #ecfdf5; --awa-cons-c68: #6b7280; --awa-cons-c69: #f6f7f8; --awa-cons-c70: #ffffff; --awa-cons-c71: #0f3460; --awa-cons-c72: #fffbeb; --awa-cons-c73: #fffdfd; --awa-cons-c74: #dcfce7; --awa-cons-c75: #d97706; --awa-cons-c76: #4b5563; --awa-cons-c77: #bbb; --awa-cons-c78: #fff; --awa-cons-c79: #555; --awa-cons-c80: #666; --awa-cons-c81: #ccc; --awa-cons-c82: #000; --awa-cons-c83: #aaa; --awa-cons-c84: #777; --awa-cons-c85: #333; --awa-cons-c86: #888; --awa-cons-c87: #999; --awa-cons-c88: #bac; } @layer awa-reset, awa-core, awa-layout, awa-components, awa-consistency, awa-fixes, awa-grid; :root { color-scheme: light; --awa-red: #b73337; --awa-red-dark: #8e2629; --awa-red-light: color-mix(in srgb, var(--awa-red) 16%, transparent); --awa-red-extra-light: color-mix(in srgb, var(--awa-red) 8%, transparent); --awa-dark: var(--awa-gray-700, #333); --awa-orange: var(--awa-red); --awa-white: #fff; --awa-color-white: var(--awa-white, #fff); /* alias: used in awa-bundle-refinements */ --awa-black: #000; --awa-gray-50: #f7f7f7; --awa-gray-100: var(--awa-gray-50, #f7f7f7); --awa-gray-150: #f2f2f2; --awa-gray-200: #e5e5e5; --awa-gray-210: #e0e0e0; --awa-gray-225: #e1e1e1; --awa-gray-250: #ccc; --awa-gray-275: #ddd; --awa-gray-300: #d9d9d9; --awa-gray-400: var(--awa-gray-300, #d9d9d9); --awa-gray-430: #aaa; --awa-gray-450: #999; --awa-gray-460: #888; --awa-gray-470: #777; --awa-gray-500: #666666; --awa-gray-550: #555; --awa-gray-600: var(--awa-gray-500, #666666); --awa-gray-700: #333333; --awa-gray-800: var(--awa-gray-700, #333); --awa-gray-900: var(--awa-gray-700, #333333); --awa-gray-920: #222; --awa-gray-950: #111; --awa-gray-30: #fafafa; --awa-gray-40: #f9fafb; --awa-gray-45: #f8fafc; --awa-gray-48: #f3f4f6; --awa-gray-53: #edf1f5; --awa-gray-56: #f0f2f4; --awa-gray-60: #dde1e7; --awa-gray-65: #dfe5ee; --awa-gray-75: #c7d2e1; --awa-gray-170: #e5e7eb; --awa-gray-360: #9ca3af; --awa-gray-480: #6b7280; --awa-gray-530: #4b5563; --awa-gray-580: #374151; --awa-gray-960: #111827; --awa-topbar-height: 36px; --awa-success: #2d7a3a; --awa-success-mid: #22a05a; --awa-success-dark: #166534; --awa-success-mid: #15803d; --awa-danger-mid: #b91c1c; --awa-warning-amber-dark: #854d0e; --awa-warning-amber-light: #f59e0b; --awa-info: #0369a1; --awa-success-bg: #f0fdf4; --awa-danger-bg: #fee2e2; --awa-warning-bg: #fffbeb; --awa-success-darkest: #1a7d44; --awa-success-light: rgba(22, 163, 74, 0.1); --awa-warning: #b87a00; --awa-warning-dark: #92400e; --awa-warning-darkest: #451a03; --awa-warning-light: rgba(217, 119, 6, 0.1); --awa-danger: #dc2626; --awa-danger-dark: #991b1b; --awa-danger-light: rgba(220, 38, 38, 0.1); --awa-info: #0ea5e9; --awa-info-dark: #1e40af; --awa-info-darkest: #0c4a6e; --awa-info-light: rgba(14, 165, 233, 0.1); --awa-slate: var(--awa-gray-500, #666666); --awa-slate-light: var(--awa-gray-430, #aaa); --awa-accent: var(--awa-red, #b73337); --awa-success-text: var(--awa-success, #16a34a); --awa-danger-text: var(--awa-danger, #dc2626); --awa-info-text: var(--awa-info, #0ea5e9); --awa-warning-text: var(--awa-warning, #d97706); --awa-text-on-primary: var(--awa-white, #fff); --awa-text-on-danger: var(--awa-white, #fff); --awa-error: var(--awa-danger, #dc2626); --awa-error-dark: var(--awa-danger-dark, #991b1b); --awa-error-bg: var(--awa-danger-light, rgba(220, 38, 38, 0.08)); --awa-success-darker: #064e3b; --awa-warning-amber: #d97706; --awa-warning-golden: #ffd700; --awa-red-extra-dark: #7a2e32; --awa-red-bg: #fff8f8; --awa-red-bg-light: #fff2f2; --awa-red-bg-medium: #ffe8e8; --awa-red-bg-strong: #e3dcdc; --awa-info-bg: #eff6ff; --awa-info-border: #bfdbfe; --awa-whatsapp: #25d366; --awa-purple: #7c3aed; --awa-purple-bg: #f5f0ff; --awa-success-bg: #dcfce7; --awa-warning-bg: #fef3c7; --awa-text-on-success: var(--awa-white, #fff); --awa-text-on-warning: var(--awa-white, #fff); --awa-text-on-dark: var(--awa-white, #fff); --awa-text-on-light: var(--awa-dark); --awa-text-muted-on-light: var(--awa-gray-500); --awa-bg-surface: #ffffff; --awa-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --awa-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --awa-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1); --awa-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.12); --awa-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15); --awa-shadow-dropdown: 0 6px 20px rgba(0, 0, 0, 0.12); --awa-shadow-red: 0 4px 12px color-mix(in srgb, var(--awa-red) 24%, transparent); --awa-shadow-badge: 0 1px 4px rgba(0, 0, 0, 0.12); --awa-shadow-focus-ring: 0 0 0 3px color-mix(in srgb, var(--awa-red) 15%, transparent); --awa-shadow-focus-brand-sm: 0 0 0 3px rgba(183, 51, 55, 0.12); --awa-shadow-focus-brand-md: 0 0 0 3px rgba(183, 51, 55, 0.2); --awa-shadow-red-hover: 0 3px 10px rgba(183, 51, 55, 0.25); --awa-shadow-red-lift: 0 4px 12px rgba(183, 51, 55, 0.3); --awa-shadow-xs2: 0 1px 4px rgba(0, 0, 0, 0.06); --awa-shadow-sm2: 0 2px 8px rgba(0, 0, 0, 0.04); --awa-shadow-sm3: 0 2px 8px rgba(0, 0, 0, 0.06); --awa-shadow-sm4: 0 2px 12px rgba(0, 0, 0, 0.08); --awa-shadow-md2: 0 4px 12px rgba(15, 23, 42, 0.06); --awa-shadow-md3: 0 4px 12px rgba(15, 23, 42, 0.08); --awa-shadow-md4: 0 4px 20px rgba(0, 0, 0, 0.08); --awa-shadow-lg2: 0 6px 18px rgba(0, 0, 0, 0.1); --awa-shadow-lg3: 0 8px 18px rgba(15, 23, 42, 0.06); --awa-shadow-xl2: 0 8px 24px rgba(0, 0, 0, 0.08); --awa-shadow-xl3: 0 8px 24px rgba(0, 0, 0, 0.1); --awa-shadow-xl4: 0 8px 24px rgba(0, 0, 0, 0.12); --awa-shadow-2xl: 0 8px 24px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.03); --awa-shadow-side: -8px 0 32px rgba(15, 23, 42, 0.14); --awa-shadow-focus-sm: 0 0 0 2px rgba(0, 0, 0, 0.06); --awa-shadow-focus-brand-lg: 0 0 0 3px rgba(183, 51, 55, 0.14); --awa-shadow-focus-brand-xl: 0 0 0 3px rgba(183, 51, 55, 0.18); --awa-shadow-focus-brand-2xl: 0 0 0 3px rgba(183, 51, 55, 0.25); --awa-shadow-brand-sm2: 0 2px 8px rgba(183, 51, 55, 0.1); --awa-shadow-brand-md2: 0 2px 8px rgba(183, 51, 55, 0.25); --awa-shadow-brand-lg2: 0 4px 14px rgba(183, 51, 55, 0.25); --awa-shadow-brand-xl2: 0 6px 20px rgba(183, 51, 55, 0.3); --awa-shadow-brand-2xl2: 0 6px 18px rgba(183, 51, 55, 0.36); --awa-overlay: rgba(0, 0, 0, 0.8); --awa-opacity-disabled: 0.45; --awa-opacity-muted: 0.55; --awa-opacity-subtle: 0.6; --awa-opacity-medium: 0.7; --awa-opacity-high: 0.85; --awa-primary: #b73337; --awa-primary-hover: #8e2629; --awa-primary-light: #f9e5e5; --awa-primary-subtle: rgba(183, 51, 55, 0.06); /* === Red alpha (brand rgb 183 51 55) === */ --awa-red-10: rgba(183, 51, 55, 0.1); --awa-red-14: rgba(183, 51, 55, 0.14); --awa-red-15: rgba(183, 51, 55, 0.15); --awa-red-16: rgba(183, 51, 55, 0.16); --awa-red-18: rgba(183, 51, 55, 0.18); --awa-red-20: rgba(183, 51, 55, 0.2); --awa-red-22: rgba(183, 51, 55, 0.22); --awa-red-24: rgba(183, 51, 55, 0.24); --awa-red-25: rgba(183, 51, 55, 0.25); --awa-red-28: rgba(183, 51, 55, 0.28); --awa-red-30: rgba(183, 51, 55, 0.3); --awa-red-34: rgba(183, 51, 55, 0.34); --awa-red-35: rgba(183, 51, 55, 0.35); --awa-red-40: rgba(183, 51, 55, 0.4); /* === Green alpha (rgb 34 197 94) === */ --awa-green-24: rgba(34, 197, 94, 0.24); --awa-green-36: rgba(34, 197, 94, 0.36); /* === White alpha === */ --awa-white-22: rgba(255, 255, 255, 0.22); --awa-white-30: rgba(255, 255, 255, 0.3); /* === font-size scale (px — root é 10px no Magento; rem puro quebrava a escala) === */ --awa-fs-xs3: 12px; --awa-fs-xs2: 13px; --awa-fs-xs: 14px; --awa-fs-sm: 15px; --awa-fs-base: 16px; --awa-fs-md: 17px; --awa-fs-lg: 18px; --awa-fs-xl: 20px; --awa-fs-2xl: 22px; --awa-fs-3xl: 24px; --awa-fs-4xl: 28px; --awa-fs-5xl: 32px; --awa-fs-6xl: 36px; --awa-fs-7xl: 40px; --awa-fs-8xl: 48px; --awa-fs-9xl: 56px; --awa-text: #333333; --awa-text-muted: #666666; --awa-text-light: #999999; --awa-text-inverse: #ffffff; --awa-bg: #ffffff; --awa-bg-elevated: #ffffff; --awa-bg-dark: #1a1a1a; --awa-border: #e0e0e0; --awa-border-strong: #cccccc; --awa-border-subtle: #f0f0f0; --awa-border-width: 1px; --awa-border-width-2: 2px; --awa-border-width-3: 3px; --awa-border-width-4: 4px; --awa-outline-width: 2px; --awa-font-size-xs: 11px; --awa-font-size-sm: 13px; --awa-font-size-md: 15px; --awa-font-size-lg: 18px; --awa-font-size-xl: 22px; --awa-font-xs: 11px; --awa-font-sm: 13px; --awa-font-md: 15px; --awa-font-lg: 18px; --awa-font-xl: 22px; --awa-font-base: var(--awa-font); --awa-container: 1280px; --awa-container-max: 1280px; --footer-container: 1280px; --border-radius-base: 6px; --awa-radius-2xs: 2px; --awa-radius-xs: 4px; --awa-radius-sm: 4px; --awa-radius-md: 8px; --awa-radius: var(--border-radius-base); --awa-radius-md-lg: 14px; --awa-radius-lg: 12px; --awa-radius-xl: 20px; --awa-radius-2xl: 24px; --awa-radius-full: 9999px; --awa-radius-pill: 10px; /* === Border-radius directional === */ --awa-radius-bottom-sm: 0 0 6px 6px; --awa-radius-bottom-lg: 0 0 16px 16px; --awa-radius-top-sm: 3px 3px 0 0; --awa-radius-top-lg: 16px 16px 0 0; --awa-radius-right-xs: 0 3px 3px 0; --awa-radius-right-sm: 0 7px 7px 0; --awa-radius-left-sm: 6px 0 0 6px; --awa-space-0-25: 1px; --awa-space-0-5: 2px; --awa-space-0-75: 3px; --awa-space-1-25: 5px; --awa-space-1: 4px; --awa-space-1-5: 6px; --awa-space-1-75: 7px; --awa-space-2: 8px; --awa-space-2-25: 9px; --awa-space-2-5: 10px; --awa-space-2-75: 11px; --awa-space-3: 12px; --awa-space-3-5: 14px; --awa-space-3-75: 15px; --awa-space-4: 16px; --awa-space-4-5: 18px; --awa-space-5: 20px; --awa-space-5-5: 22px; --awa-space-6: 24px; --awa-space-6-5: 28px; --awa-space-7: 32px; --awa-space-7-5: 30px; --awa-space-8: 40px; --awa-space-8-5: 44px; --awa-space-9: 48px; --awa-space-9-5: 52px; --awa-space-10: 64px; --awa-space-10-5: 60px; --awa-size-26: 26px; --awa-size-50: 50px; --awa-size-54: 54px; --awa-size-84: 84px; --awa-size-92: 92px; --awa-size-100: 100px; --awa-size-118: 118px; --awa-size-120: 120px; --awa-size-160: 160px; --awa-size-180: 180px; --awa-size-200: 200px; --awa-size-220: 220px; --awa-size-240: 240px; --awa-size-260: 260px; --awa-size-290: 290px; --awa-size-320: 320px; --awa-size-400: 400px; --awa-size-464: 464px; --awa-size-520: 520px; --awa-size-560: 560px; --awa-size-680: 680px; --awa-size-1280: 1280px; --awa-size-1440: 1440px; --awa-size-34: 34px; --awa-size-36: 36px; --awa-size-38: 38px; --awa-size-42: 42px; --awa-size-46: 46px; --awa-size-56: 56px; --awa-size-60: 60px; --awa-size-64: 64px; --awa-size-72: 72px; --awa-size-80: 80px; --awa-size-17: 17px; --awa-size-35: 35px; --awa-size-43: 43px; --awa-size-45: 45px; --awa-size-55: 55px; --awa-size-58: 58px; --awa-size-62: 62px; --awa-size-63: 63px; --awa-size-70: 70px; --awa-size-74: 74px; --awa-size-76: 76px; --awa-size-78: 78px; --awa-size-82: 82px; --awa-size-86: 86px; --awa-size-90: 90px; --awa-size-96: 96px; --awa-size-98: 98px; --awa-size-104: 104px; --awa-size-108: 108px; --awa-size-110: 110px; --awa-size-128: 128px; --awa-size-130: 130px; --awa-size-140: 140px; --awa-size-142: 142px; --awa-size-144: 144px; --awa-size-148: 148px; --awa-size-150: 150px; --awa-size-158: 158px; --awa-size-161: 161px; --awa-size-176: 176px; --awa-size-190: 190px; --awa-size-194: 194px; --awa-size-208: 208px; --awa-size-212: 212px; --awa-size-228: 228px; --awa-size-236: 236px; --awa-size-238: 238px; --awa-size-262: 262px; --awa-size-270: 270px; --awa-size-280: 280px; --awa-size-300: 300px; --awa-size-340: 340px; --awa-size-350: 350px; --awa-size-360: 360px; --awa-size-380: 380px; --awa-size-420: 420px; --awa-size-440: 440px; --awa-size-450: 450px; --awa-size-460: 460px; --awa-size-480: 480px; --awa-size-500: 500px; --awa-size-600: 600px; --awa-size-640: 640px; --awa-size-720: 720px; --awa-size-760: 760px; --awa-size-768: 768px; --awa-size-800: 800px; --awa-size-860: 860px; --awa-size-900: 900px; --awa-size-960: 960px; --awa-size-1170: 1170px; --awa-size-1200: 1200px; --awa-size-1240: 1240px; --awa-size-1400: 1400px; --awa-size-1600: 1600px; --awa-space-sm: 8px; --awa-space-md: 16px; --awa-space-lg: 24px; --awa-space-xl: 40px; --awa-gap: var(--awa-gap-xl); /* Negative offsets */ --awa-neg-0-25: -1px; --awa-neg-0-5: -2px; --awa-neg-0-75: -3px; --awa-neg-1: -4px; --awa-neg-1-25: -5px; --awa-neg-1-5: -6px; --awa-neg-1-75: -7px; --awa-neg-2: -8px; --awa-neg-2-5: -10px; --awa-neg-3: -12px; --awa-neg-3-5: -14px; --awa-neg-4: -16px; --awa-neg-5: -20px; --awa-neg-6: -24px; --awa-neg-7: -32px; --awa-neg-8: -40px; --awa-grid-gap: var(--awa-gap-xl); --awa-grid-gap-sm: 16px; --awa-grid-gap-xs: 12px; --awa-gap-0-25: 1px; --awa-gap-0-5: 2px; --awa-gap-0-75: 3px; --awa-gap-1-25: 5px; --awa-gap-1-75: 7px; --awa-gap-2-25: 9px; --awa-gap-xs: 4px; --awa-gap-1-5: 6px; --awa-gap-sm: 8px; --awa-gap-2-5: 10px; --awa-gap-md: 12px; --awa-gap-3-5: 14px; --awa-gap-lg: 16px; --awa-gap-xl: 24px; --awa-gap-2xl: 32px; --awa-container-padding: clamp(12px, 2.1vw, var(--awa-space-5)); --awa-control-height-sm: clamp(40px, 4vw, 44px); --awa-control-height: clamp(44px, 4.6vw, 48px); --awa-control-height-lg: clamp(48px, 5.4vw, 52px); --awa-icon-button-size: clamp(42px, 4.2vw, 48px); --awa-control-padding-inline: clamp(var(--awa-space-4), 1.5vw, var(--awa-space-6)); --awa-control-padding-inline-sm: clamp(var(--awa-space-3), 1.2vw, var(--awa-space-4)); --awa-section-gap: var(--awa-space-9); --awa-section-gap-sm: 24px; --awa-grid-product-min: 200px; --awa-grid-product-gap: var(--awa-grid-gap); --awa-grid-product-cols: repeat(auto-fill, minmax(var(--awa-grid-product-min), 1fr)); --awa-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --awa-transition-fast: 0.15s ease; --awa-transition-slow: 0.4s ease; --awa-duration: 200ms; --awa-duration-fast: 120ms; --awa-duration-slow: 350ms; --awa-ease: cubic-bezier(0.4, 0, 0.2, 1); --awa-z-dropdown: 99; --awa-z-sub-overlay: 999; --awa-z-overlay: 1000; --awa-z-above-overlay: 1200; --awa-z-menu-container: 1006; --awa-z-menu-list: 1008; --awa-z-sticky: 9990; --awa-z-sidebar: 9997; --awa-z-fixed: 9998; --awa-z-float: 9999; --awa-z-submenu: 10000; --awa-z-vmenu-base: 10010; --awa-z-vmenu-child: 10011; --awa-z-vmenu-grandchild: 10012; --awa-z-mega-panel: 10021; --awa-z-flyout: 10030; --awa-z-popup: 10100; --awa-z-modal: 10200; --awa-z-toast: 10050; --awa-z-nav-overlay: 99998; --awa-z-nav-drawer: 99999; --awa-z-loader: 100000; --awa-z-skip: 999999; --awa-font: 'Rubik', 'Open Sans', Arial, sans-serif; --awa-font-heading: 'Rubik', Arial, sans-serif; --awa-font-body: 'Rubik', 'Open Sans', Arial, sans-serif; --awa-font-family: var(--awa-font); --font-family: var(--awa-font); --awa-font-size: var(--awa-text-md); --awa-line-height: var(--awa-leading-loose); --awa-weight-light: 300; --awa-weight-normal: 400; --awa-weight-medium: 500; --awa-weight-semibold: 600; --awa-weight-bold: 700; --awa-weight-extrabold: 800; --awa-weight-black: 900; --awa-weight-semi: 600; --awa-leading-none: 1; --awa-leading-xdense: 1.05; --awa-leading-dense: 1.15; --awa-leading-tight: 1.1; --awa-leading-compact: 1.2; --awa-leading-snug: 1.25; --awa-leading-base: 1.3; --awa-leading-cozy: 1.35; --awa-leading-normal: 1.4; --awa-leading-comfortable: 1.45; --awa-leading-relaxed: 1.5; --awa-leading-airy: 1.55; --awa-leading-loose: 1.6; --awa-leading-spacious: 1.65; --awa-leading-generous: 1.7; --awa-leading-xl: 1.75; --awa-leading-2xl: 1.8; --awa-leading-3xl: 1.85; --awa-tracking-tighter: -0.01em; --awa-underline-offset-sm: 2px; --awa-underline-offset-md: 3px; --awa-tracking-loose: 0.03em; --awa-tracking-tight: 0.01em; --awa-tracking-normal: 0.02em; --awa-tracking-wide: 0.5px; --awa-tracking-wider: 1px; --awa-tracking-caption: 0.04em; --awa-tracking-label: 0.05em; --awa-tracking-button: 0.06em; --awa-tracking-badge: 0.07em; --awa-tracking-caps: 0.08em; /* === Fractional font sizes === */ --awa-text-10-5: 10.5px; --awa-text-11-5: 11.5px; --awa-text-12-5: 12.5px; --awa-text-13-5: 13.5px; --awa-text-31: 31px; /* === Extended tracking (letter-spacing) === */ --awa-tracking-neg-2: -0.02em; --awa-tracking-neg-5: -0.5px; --awa-tracking-0-3: 0.3px; --awa-tracking-0-8: 0.8px; --awa-tracking-1-4: 1.4px; --awa-tracking-wide2: 0.005em; --awa-tracking-wide3: 0.014em; --awa-tracking-wide4: 0.015em; --awa-tracking-wide5: 0.1em; --awa-tracking-wide6: 0.14em; /* === Extended line-height === */ --awa-leading-zero: 0; --awa-leading-tight2: 0.9; --awa-leading-xdense2: 1.12; --awa-leading-spacious2: 1.72; --awa-text-4xs: 9px; --awa-text-8px: 8px; --awa-text-26: 26px; --awa-text-30: 30px; --awa-text-34: 34px; --awa-text-36: 36px; --awa-text-46: 46px; --awa-text-48: 48px; --awa-text-70: 70px; --awa-text-3xs: 10px; --awa-text-2xs: 11px; --awa-text-xs: 12px; --awa-text-sm: 13px; --awa-text-base: 14px; --awa-text-base-plus: 15px; --awa-text-md: 16px; --awa-text-lg: 18px; --awa-text-xl: 20px; --awa-text-xl-plus: 22px; --awa-text-2xl: 24px; --awa-text-3xl: 28px; --awa-text-4xl: 32px; --awa-text-5xl: 40px; --awa-input-height: var(--awa-control-height); --awa-input-height-sm: var(--awa-control-height-sm); --awa-btn-height: var(--awa-control-height); --awa-btn-height-sm: var(--awa-control-height-sm); --awa-ui-body-size: var(--awa-text-base-plus); --awa-ui-caption-size: var(--awa-text-xs); --awa-ui-heading-1: clamp(var(--awa-text-3xl), 16vw, var(--awa-text-5xl)); --awa-ui-heading-2: clamp(var(--awa-text-xl-plus), 15.4vw, var(--awa-text-3xl)); --awa-ui-heading-3: clamp(var(--awa-text-lg), 14.6vw, var(--awa-text-xl-plus)); --awa-ui-title-line-height: var(--awa-leading-cozy); --awa-ui-body-line-height: var(--awa-leading-airy); --awa-ui-caption-line-height: var(--awa-leading-normal); --awa-ui-radius-field: 12px; --awa-ui-radius-button: 12px; --awa-ui-radius-card: 16px; --awa-ui-radius-panel: 16px; --awa-ui-card-shadow: 0 8px 24px rgba(17, 24, 39, 0.06); --awa-ui-card-shadow-hover: 0 12px 32px rgba(17, 24, 39, 0.1); --awa-ui-panel-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); --awa-ui-cta-shadow: 0 6px 16px rgba(183, 51, 55, 0.14); --awa-ui-cta-shadow-hover: 0 10px 24px rgba(142, 38, 41, 0.18); --awa-ui-card-title-min-height: 2.9em; --awa-ui-card-price-min-height: 48px; --awa-ui-card-actions-min-height: 56px; --awa-ui-toolbar-control-size: 42px; --awa-ui-grid-gap: clamp(var(--awa-space-3), 1.6vw, var(--awa-space-5)); --awa-ui-section-gap: clamp(var(--awa-space-6), 2.4vw, var(--awa-space-8)); --awa-touch-target: 44px; --awa-text-countdown-label: var(--awa-gray-200, #e5e5e5); /* Fluid typography tokens */ --awa-fluid-text-2xs: clamp(10px, 0.9vw, 11px); --awa-fluid-text-xs: clamp(13px, 0.95vw, 14px); --awa-fluid-text-sm: clamp(14px, 1.8vw, 18px); --awa-fluid-text-sm2: clamp(15px, 1.6vw, 18px); --awa-fluid-text-md: clamp(20px, 2.8vw, 24px); --awa-fluid-text-md2: clamp(20px, 7vw, 26px); --awa-fluid-text-lg: clamp(22px, 2.2vw, 30px); --awa-fluid-text-xl: clamp(22px, 6vw, 28px); --awa-fluid-text-2xl: clamp(22px, 4vw, 44px); /* Fluid rem typography */ --awa-fluid-text-rem-sm: clamp(1.2rem, 1.6rem, 1.55rem); --awa-fluid-text-rem-md: clamp(1.25rem, 1.8rem, 1.7rem); --awa-fluid-text-rem-md2: clamp(1.25rem, 1.6rem, 1.5rem); --awa-fluid-text-rem-lg: clamp(1.25rem, 1.8rem, 1.75rem); --awa-fluid-text-rem-xl: clamp(1.4rem, 2rem, 1.9rem); /* === Extended fluid text === */ --awa-fluid-text-sm3: clamp(13px, 1.1vw, 15px); --awa-fluid-text-sm4: clamp(14px, 2vw, 16px); --awa-fluid-text-md3: clamp(17px, 2vw, 20px); --awa-fluid-text-md4: clamp(17px, 6vw, 20px); --awa-fluid-text-md5: clamp(18px, 3vw, 22px); --awa-fluid-text-md6: clamp(18px, 5.2vw, 22px); --awa-fluid-text-lg2: clamp(22px, 3vw, 30px); --awa-fluid-text-lg3: clamp(22px, 15.3vw, 28px); --awa-fluid-text-xl2: clamp(24px, 16vw, 26px); --awa-fluid-text-xl3: clamp(24px, 3vw, 34px); --awa-fluid-text-2xl2: clamp(26px, 8vw, 34px); /* === Width clamp / min tokens === */ --awa-width-min-380: min(380px, 94vw); --awa-width-min-720: min(720px, calc(100vw - 32px)); --awa-width-min-760: min(760px, calc(100vw - 24px)); --awa-width-min-860: min(860px, calc(100vw - 32px)); --awa-width-fluid-sm: clamp(78px, 22vw, 98px); --awa-width-fluid-md: clamp(82px, 24vw, 108px); /* === Gap row/col tokens === */ --awa-gap-row-sm: 12px 18px; --awa-gap-row-xs: 14px 18px; --awa-gap-row-xs2: 12px 16px; --awa-gap-row-sm2: 18px 20px; /* === Background-size tokens === */ --awa-bg-size-icon: 12px 8px; --awa-bg-size-icon2: 12px; --awa-bg-size-icon3: 14px; --awa-bg-size-icon4: 18px 18px; --awa-bg-size-underline: 0% 1px; --awa-bg-size-underline2: 100% 1px; /* === Contain-intrinsic-size tokens === */ --awa-cis-400: auto 400px; --awa-cis-500: auto 500px; --awa-cis-300: auto 300px; --awa-cis-350: auto 350px; --awa-cis-280: 1px 280px; --footer-bg: var(--awa-gray-50, #f7f7f7); --footer-bg-secondary: var(--awa-gray-50, #f7f7f7); --footer-bg-tertiary: var(--awa-gray-50, #f7f7f7); --footer-text: var(--awa-gray-500, #666666); --footer-text-bright: var(--awa-gray-700, #333333); --footer-accent: var(--awa-red); --footer-border: color-mix(in srgb, transparent, white 10%); --footer-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif; --footer-font-size-small: 12px; --footer-font-size-base: 14px; --footer-font-size-heading: 16px; --footer-space-sm: 12px; --footer-space-md: 20px; --footer-space-lg: 30px; --footer-space-xl: 50px; --footer-radius: 8px; --footer-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --r-xs: var(--awa-radius-xs); --r-sm: var(--awa-radius-sm); --r-md: var(--awa-radius-md); --r-lg: var(--awa-radius-lg); --r-xl: var(--awa-radius-xl); --r-full: var(--awa-radius-full); --text-xs: var(--awa-text-xs); --text-sm: var(--awa-text-sm); --text-base: var(--awa-text-base); --text-md: var(--awa-text-md); --text-lg: var(--awa-text-lg); --text-xl: var(--awa-text-xl); --text-2xl: var(--awa-text-2xl); --text-3xl: var(--awa-text-3xl); --text-4xl: var(--awa-text-4xl); --sp-1: var(--awa-space-1); --sp-2: var(--awa-space-2); --sp-3: var(--awa-space-3); --sp-4: var(--awa-space-4); --sp-5: var(--awa-space-5); --sp-6: var(--awa-space-6); --sp-8: var(--awa-space-7); --sp-10: var(--awa-space-8); --sp-12: var(--awa-space-9); --sp-16: var(--awa-space-10); --shadow-xs: var(--awa-shadow-sm); --shadow-sm: var(--awa-shadow); --shadow-md: var(--awa-shadow-md); --shadow-lg: var(--awa-shadow-lg); --shadow-red: var(--awa-shadow-red); --t-fast: var(--awa-transition-fast); --t-base: var(--awa-transition); --t-slow: var(--awa-transition-slow); --touch: var(--awa-touch-target); --primary-color: var(--awa-red); --primary-hover: var(--awa-red-dark); --awa-brand-primary: var(--awa-red); --awa-brand-hover: var(--awa-red-dark); --color-primary: var(--awa-red); --color-primary-hover: var(--awa-red-dark); --color-primary-light: var(--awa-red-light); --color-text: var(--awa-dark); --color-text-muted: var(--awa-gray-500); --color-border: var(--awa-gray-200); --color-bg: var(--awa-gray-50); --color-surface: var(--awa-bg-surface); --color-success: var(--awa-success); --color-warning: var(--awa-warning); --color-danger: var(--awa-danger); --color-info: var(--awa-info); --container-max: var(--awa-container); --container-pad: var(--awa-container-padding); --section-gap: var(--awa-section-gap); --section-gap-sm: var(--awa-section-gap-sm); --grid-gap: var(--awa-grid-gap); --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; --bp-2xl: 1440px; /* === Z-index scale === */ --awa-z-neg: -1; --awa-z-0: 0; --awa-z-1: 1; --awa-z-2: 2; --awa-z-3: 3; --awa-z-6: 6; --awa-z-8: 8; --awa-z-9: 9; --awa-z-10: 10; --awa-z-20: 20; --awa-z-100: 100; --awa-z-200: 200; --awa-z-999: 999; --awa-z-1300: 1300; --awa-z-9999: 9999; --awa-z-10020: 10020; --awa-z-99999: 99999; --awa-z-100001: 100001; --awa-z-100120: 100120; --awa-z-100130: 100130; /* === Opacity scale === */ --awa-opacity-0: 0; --awa-opacity-15: 0.15; --awa-opacity-22: 0.22; --awa-opacity-40: 0.4; --awa-opacity-65: 0.65; --awa-opacity-70: 0.7; --awa-opacity-80: 0.8; --awa-opacity-85: 0.85; --awa-opacity-90: 0.9; --awa-opacity-95: 0.95; --awa-opacity-100: 1; --awa-opacity-0_25: 0.25; --awa-opacity-0_72: 0.72; --awa-opacity-0_82: 0.82; --awa-opacity-0_88: 0.88; --awa-opacity-0_92: 0.92; /* === Font-size complementar === */ --awa-fs-pt9: 9pt; --awa-fs-90: 0.9rem; --awa-fs-95: 0.95rem; --awa-fs-105: 1.05rem; --awa-fs-110: 1.1rem; --awa-fs-115: 1.15rem; --awa-fs-130: 1.3rem; --awa-fs-140: 1.4rem; } @layer awa-core { ::selection { background: var(--awa-red); color: var(--awa-text-on-primary); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--awa-gray-100); } ::-webkit-scrollbar-thumb { background: var(--awa-gray-400); border-radius: var(--awa-radius-xs); } ::-webkit-scrollbar-thumb:hover { background: var(--awa-gray-500); } html { scrollbar-width: thin; scrollbar-color: var(--awa-gray-400) var(--awa-gray-100); scroll-behavior: smooth; interpolate-size: allow-keywords; } *, *::before, *::after { box-sizing: border-box; } img { max-width: 100%; height: auto; } .checkout-index-index, .checkout-onepage-success { scroll-behavior: auto; } body { font-family: var(--awa-font); font-size: var(--awa-font-size); color: var(--awa-dark); line-height: var(--awa-line-height); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility; } a { color: var(--awa-red); text-decoration: none; text-decoration-skip-ink: auto; transition: color var(--awa-transition); } a:hover { color: var(--awa-red-dark); } a, button, [role="button"], input, select, textarea, summary { touch-action: manipulation; } a:focus-visible, button:focus-visible, [tabindex]:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--awa-red); outline-offset: 2px; border-radius: var(--awa-radius-2xs); } body .page-wrapper h1 { font-size: clamp(var(--awa-text-2xl), 18vw, var(--awa-text-4xl)); font-weight: var(--awa-weight-bold); line-height: var(--awa-leading-base); margin-bottom: var(--awa-space-4); text-wrap: balance; } body .page-wrapper h2 { font-size: clamp(var(--awa-text-xl), 15.5vw, var(--awa-text-3xl)); font-weight: var(--awa-weight-bold); line-height: var(--awa-leading-cozy); margin-bottom: var(--awa-space-3); text-wrap: balance; } body .page-wrapper h3 { font-size: clamp(var(--awa-text-lg), 13vw, var(--awa-text-2xl)); font-weight: var(--awa-weight-semibold); line-height: var(--awa-leading-normal); margin-bottom: var(--awa-space-3); text-wrap: balance; } body .page-wrapper h4 { font-size: var(--awa-text-lg); font-weight: var(--awa-weight-semibold); line-height: var(--awa-leading-normal); margin-bottom: var(--awa-space-2); text-wrap: balance; } body .page-wrapper p, body .page-wrapper .product.attribute.description, body .page-wrapper .cms-page-view .page-main { text-wrap: pretty; } body .page-wrapper .product.attribute.description, body .page-wrapper .cms-page-view .page-main, body .page-wrapper .post-content { hanging-punctuation: first allow-end; } .page-wrapper { max-width: 100%; overflow-x: hidden; overflow-x: clip; } body .page-wrapper .page-main { max-width: var(--awa-container); margin: 0 auto; padding: 0 var(--awa-container-padding); isolation: isolate; } body .page-wrapper .nav-sections, body .page-wrapper .page-footer, body .page-wrapper .page-header { max-width: 100%; isolation: isolate; } body .page-wrapper .awa-section { padding-block: var(--awa-section-gap); } body .page-wrapper .awa-section--sm { padding-block: var(--awa-section-gap-sm); } body .page-wrapper .awa-section--flush { padding-block: 0; } body .page-wrapper .awa-section-title { font-size: clamp(var(--awa-text-xl), 15.5vw, var(--awa-text-3xl)); font-weight: var(--awa-weight-bold); line-height: var(--awa-leading-cozy); margin-block-end: var(--awa-space-6); text-wrap: balance; } body .page-wrapper .awa-section-subtitle { font-size: var(--awa-text-md); color: var(--awa-gray-500); margin-block-end: var(--awa-space-5); } body .page-wrapper .action.primary, body .page-wrapper button.primary, body .page-wrapper .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--awa-space-2); background: var(--awa-red); color: var(--awa-text-on-primary); border: none; border-radius: var(--awa-radius-sm); padding: var(--awa-space-3-5) var(--awa-control-padding-inline); min-height: var(--awa-btn-height); font-weight: var(--awa-weight-semibold); cursor: pointer; transition: background var(--awa-transition), transform var(--awa-transition), box-shadow var(--awa-transition); position: relative; overflow: hidden; } body .page-wrapper .action.primary:hover, body .page-wrapper button.primary:hover, body .page-wrapper .btn-primary:hover { background: var(--awa-red-dark); box-shadow: var(--awa-shadow-red); } body .page-wrapper .action.primary:active, body .page-wrapper button.primary:active, body .page-wrapper .btn-primary:active { transform: scale(0.98); } body .page-wrapper .action.primary:focus-visible, body .page-wrapper button.primary:focus-visible, body .page-wrapper .btn-primary:focus-visible { outline: 2px solid var(--awa-red); outline-offset: 2px; } body .page-wrapper .action.primary.loading, body .page-wrapper button.primary.loading { pointer-events: none; opacity: 0.8; } body .page-wrapper .action.primary:disabled, body .page-wrapper .action.primary[disabled], body .page-wrapper button.primary:disabled, body .page-wrapper .btn-primary:disabled { background: var(--awa-gray-300); color: var(--awa-gray-500); cursor: not-allowed; opacity: 0.6; transform: none; box-shadow: none; } body .page-wrapper .action.secondary, body .page-wrapper button.secondary, body .page-wrapper .btn-secondary { background: var(--awa-bg-surface); color: var(--awa-red); border: 1px solid var(--awa-red); border-radius: var(--awa-radius-sm); padding: var(--awa-space-3-5) var(--awa-control-padding-inline); min-height: var(--awa-btn-height); font-weight: var(--awa-weight-semibold); cursor: pointer; transition: background var(--awa-transition-fast), color var(--awa-transition-fast), border-color var(--awa-transition-fast); } body .page-wrapper .action.secondary:hover, body .page-wrapper button.secondary:hover, body .page-wrapper .btn-secondary:hover { background: var(--awa-red-dark); color: var(--awa-text-on-primary); border-color: 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; } 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: 1px solid var(--awa-gray-200); border-radius: var(--border-radius-base); padding: var(--awa-space-2-5) var(--awa-control-padding-inline-sm); min-height: var(--awa-input-height); font-size: var(--awa-text-base); font-family: inherit; line-height: var(--awa-leading-normal); transition: border-color var(--awa-transition), box-shadow var(--awa-transition); } body .page-wrapper input[type="text"]:hover, body .page-wrapper input[type="email"]:hover, body .page-wrapper input[type="password"]:hover, body .page-wrapper input[type="tel"]:hover, body .page-wrapper input[type="number"]:hover, body .page-wrapper input[type="search"]:hover, body .page-wrapper textarea:hover, body .page-wrapper select:hover { border-color: var(--awa-gray-400); } body .page-wrapper input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]):focus, body .page-wrapper textarea:focus, body .page-wrapper select:focus { border-color: var(--awa-red); outline: none; box-shadow: 0 0 0 3px var(--awa-red-light); } body .page-wrapper input::placeholder, body .page-wrapper textarea::placeholder { color: var(--awa-gray-500); opacity: 1; } body .page-wrapper input.mage-error, body .page-wrapper textarea.mage-error, body .page-wrapper select.mage-error { border-color: var(--awa-danger); box-shadow: 0 0 0 3px var(--awa-danger-light); } body .page-wrapper .field._error .label, body .page-wrapper div.mage-error { color: var(--awa-danger); font-size: var(--awa-text-xs); margin-top: var(--awa-space-1); } body .page-wrapper input.valid, body .page-wrapper textarea.valid { border-color: var(--awa-success); } body .page-wrapper input:-webkit-autofill, body .page-wrapper input:-webkit-autofill:hover, body .page-wrapper input:-webkit-autofill:focus, body .page-wrapper textarea:-webkit-autofill, body .page-wrapper select:-webkit-autofill { -webkit-text-fill-color: var(--awa-dark); box-shadow: 0 0 0 1000px var(--awa-bg-surface) inset; transition: background-color 5000s ease-in-out 0s; } body .page-wrapper input[type="checkbox"], body .page-wrapper input[type="radio"] { accent-color: var(--awa-red); } body .page-wrapper input[type="number"]::-webkit-inner-spin-button, body .page-wrapper input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; } body .page-wrapper input[type="number"] { appearance: textfield; } body .page-wrapper .message { border-radius: var(--awa-radius-sm); padding: var(--awa-space-4) var(--awa-space-5); margin-bottom: var(--awa-space-4); display: flex; align-items: center; gap: var(--awa-space-3); font-size: var(--awa-text-base); line-height: var(--awa-leading-relaxed); animation: awa-slide-down-toast 0.3s ease; border-left: 4px solid transparent; } body .page-wrapper .message.success { background: var(--awa-success-light); border-left-color: var(--awa-success); color: var(--awa-success-text); } body .page-wrapper .message.error { background: var(--awa-danger-light); border-left-color: var(--awa-danger); color: var(--awa-danger-text); } body .page-wrapper .message.info, body .page-wrapper .message.notice { background: var(--awa-info-light); border-left-color: var(--awa-info); color: var(--awa-info-text); } body .page-wrapper .message.warning { background: var(--awa-warning-light); border-left-color: var(--awa-warning); color: var(--awa-warning-text); } @keyframes awa-slide-down-toast { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } body .page-wrapper .message.empty, body .page-wrapper .empty-cart, body .page-wrapper .no-products { text-align: center; padding: var(--awa-space-10) var(--awa-space-7); color: var(--awa-gray-500); background: var(--awa-gray-50); border-radius: var(--border-radius-base); border: 1px dashed var(--awa-gray-200); } body .page-wrapper .cart-empty { text-align: center; padding: var(--awa-space-10) var(--awa-space-7); background: var(--awa-gray-50); border-radius: var(--border-radius-base); border: 1px dashed var(--awa-gray-200); } body .page-wrapper .cart-empty p { font-size: var(--awa-text-lg); color: var(--awa-gray-500); margin-bottom: var(--awa-space-6); } body .page-wrapper .cart-empty .action.continue { display: inline-block; padding: var(--awa-space-4) var(--awa-space-7); background: var(--awa-red); color: var(--awa-text-on-primary); border-radius: var(--awa-radius-sm); font-weight: var(--awa-weight-semibold); text-decoration: none; transition: background var(--awa-transition), transform var(--awa-transition), box-shadow var(--awa-transition); } body .page-wrapper .cart-empty .action.continue:hover { background: var(--awa-red-dark); transform: translateY(-2px); box-shadow: var(--awa-shadow-red); } body .page-wrapper .cart-empty .action.continue:focus-visible { outline: 2px solid var(--awa-red); outline-offset: 2px; } body .page-wrapper .breadcrumbs { padding: var(--awa-space-3) var(--awa-space-5); margin-bottom: var(--awa-space-6); background: var(--awa-gray-50); border-radius: var(--awa-radius-sm); } body .page-wrapper .breadcrumbs ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--awa-space-1); padding: 0; margin: 0; } body .page-wrapper .breadcrumbs li { display: flex; align-items: center; font-size: var(--awa-text-sm); color: var(--awa-gray-500); } body .page-wrapper .breadcrumbs li:not(:last-child)::after { content: '/'; margin: 0 var(--awa-space-2); } body .page-wrapper .breadcrumbs li:last-child { color: var(--awa-dark); font-weight: var(--awa-weight-semibold); } body .page-wrapper .breadcrumbs a { color: var(--awa-gray-700); transition: color var(--awa-transition-fast); } body .page-wrapper .breadcrumbs a:hover { color: var(--awa-red-dark); } body .page-wrapper .pages { text-align: center; margin: var(--awa-space-8) 0; } body .page-wrapper .pages-items { display: inline-flex; gap: var(--awa-space-1); list-style: none; padding: var(--awa-space-1); background: var(--awa-gray-50); border-radius: var(--awa-radius); } body .page-wrapper .pages .item { display: inline-block; } body .page-wrapper .pages .item a, body .page-wrapper .pages .item strong { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 var(--awa-space-3); border-radius: var(--awa-radius-sm); font-size: var(--awa-text-base); font-weight: var(--awa-weight-medium); transition: background var(--awa-transition), color var(--awa-transition); } body .page-wrapper .pages .item a { background: var(--awa-gray-100); color: var(--awa-dark); } body .page-wrapper .pages .item a:hover { background: var(--awa-red-dark); color: var(--awa-text-on-primary); } body .page-wrapper .pages .item.current strong { background: var(--awa-red); color: var(--awa-text-on-primary); } body .page-wrapper .loading-mask { background: rgba(255, 255, 255, 0.8); } body .page-wrapper .loader > img { display: none; } body .page-wrapper .loader::after { content: ''; width: 40px; height: 40px; border: 3px solid var(--awa-gray-200); border-top-color: var(--awa-red); border-radius: var(--awa-radius-full, 9999px); animation: awa-spinner 0.8s linear infinite; display: block; margin: 0 auto; } @keyframes awa-spinner { to { transform: rotate(360deg); } } @keyframes awa-skeleton { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } body .page-wrapper .awa-skeleton { background: linear-gradient(90deg, var(--awa-gray-100) 25%, var(--awa-gray-200) 50%, var(--awa-gray-100) 75%); background-size: 200% 100%; animation: awa-skeleton 1.5s ease infinite; border-radius: var(--awa-radius-sm); } body .page-wrapper .table-wrapper { overflow-x: auto; max-width: 100%; position: relative; } body .page-wrapper table { max-width: 100%; } body .page-wrapper .modal-popup .modal-inner-wrap { border-radius: var(--awa-radius); box-shadow: var(--awa-shadow-lg); overflow: hidden; } body .page-wrapper .modal-popup .modal-header { padding: var(--awa-space-5) var(--awa-space-6); border-bottom: 1px solid var(--awa-gray-200); } body .page-wrapper .modal-popup .modal-content { padding: var(--awa-space-6); } body .page-wrapper .modal-popup .modal-footer { padding: var(--awa-space-4) var(--awa-space-6); border-top: 1px solid var(--awa-gray-200); background: var(--awa-gray-50); } body .page-wrapper .opc-progress-bar-item._active .opc-progress-bar-item-element { background: var(--awa-red); } body .page-wrapper .opc-progress-bar-item._complete .opc-progress-bar-item-element { background: var(--awa-success); } body .page-wrapper .swatch-option { min-width: 32px; height: 32px; border-radius: var(--border-radius-base); border: 1px solid var(--awa-gray-200); cursor: pointer; transition: transform var(--awa-transition-fast), border-color var(--awa-transition-fast), box-shadow var(--awa-transition-fast); } body .page-wrapper .swatch-option:hover { transform: scale(1.1); border-color: var(--awa-gray-400); } body .page-wrapper .swatch-option.selected { border-color: var(--awa-red); box-shadow: 0 0 0 3px var(--awa-red-light); } body .page-wrapper .product-item img, body .page-wrapper .item-product img, body .page-wrapper .catalog-product-view .gallery img { transition: opacity var(--awa-transition); } body .page-wrapper img[loading="lazy"]:not(.awa-loaded) { opacity: 0; animation: awa-lazy-fallback 0s 3s forwards; } body .page-wrapper img[loading="lazy"].awa-loaded { animation: awa-fade-in 0.4s ease forwards; } @keyframes awa-lazy-fallback { to { opacity: 1; } } @keyframes awa-fade-in { from { opacity: 0; } to { opacity: 1; } } .sr-text, .awa-sr-only { position: absolute; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden; clip-path: inset(50%) !important; white-space: nowrap; border: 0 !important; } body .page-wrapper *:focus-visible { outline: 2px solid var(--awa-red); outline-offset: 2px; } body .page-wrapper .checkout-container *:focus-visible { outline: revert; outline-offset: revert; } body .page-wrapper *:focus:not(:focus-visible) { outline: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body .page-wrapper *, body .page-wrapper *::before, body .page-wrapper *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } #awaBackToTop, .awa-whatsapp-float, .awa-nav-overlay { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } .awa-whatsapp-float:hover { transform: none; } body .page-wrapper .the_blog .post-item:hover, body .page-wrapper .blog-post-item:hover, body .page-wrapper .cart-empty .action.continue:hover, body .page-wrapper .footer-social a:hover, body .page-wrapper .social-block a:hover, body .page-wrapper .aw-footer-social a:hover, body .page-wrapper .page-footer .social-icons a:hover, body .page-wrapper .item-deal-product:hover { transform: none; } } @media (hover: none) and (pointer: coarse) { body .page-wrapper a:hover, body .page-wrapper button:hover, body .page-wrapper [role="button"]:hover, body .page-wrapper .action:hover, body .page-wrapper .swatch-option:hover { transform: none; } body .page-wrapper a:hover, body .page-wrapper button:hover, body .page-wrapper [role="button"]:hover { box-shadow: var(--awa-shadow); } } @media (prefers-contrast: more), (forced-colors: active) { :root { --footer-text: var(--awa-white, #fff); --footer-border: rgba(255, 255, 255, 0.4); --awa-gray-200: var(--awa-gray-470, #777777); --awa-gray-300: var(--awa-gray-470, #777777); --awa-gray-400: var(--awa-gray-470, #777); --awa-gray-500: #666666; --awa-gray-700: #333333; --awa-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); --awa-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.25); /* === Box-shadow extended (batch 2) === */ --awa-shadow-xs3: 0 1px 2px rgba(15, 23, 42, 0.04); --awa-shadow-xs4: 0 1px 3px rgba(0, 0, 0, 0.04); --awa-shadow-xs5: 0 1px 2px rgba(0, 0, 0, 0.05); --awa-shadow-sm5: 0 2px 4px rgba(0, 0, 0, 0.25); --awa-shadow-sm6: 0 2px 8px rgba(183, 51, 55, 0.15); --awa-shadow-sm7: 0 2px 8px rgba(183, 51, 55, 0.18); --awa-shadow-sm8: 0 2px 8px rgba(183, 51, 55, 0.24); --awa-shadow-sm9: 0 2px 8px rgba(183, 51, 55, 0.3); --awa-shadow-md5: 0 4px 12px rgba(0, 0, 0, 0.06); --awa-shadow-md6: 0 4px 12px rgba(15, 23, 42, 0.05); --awa-shadow-md7: 0 4px 12px rgba(183, 51, 55, 0.15); --awa-shadow-md8: 0 4px 12px rgba(183, 51, 55, 0.22); --awa-shadow-md9: 0 4px 14px rgba(0, 0, 0, 0.06); --awa-shadow-md10: 0 4px 14px rgba(0, 0, 0, 0.08); --awa-shadow-md11: 0 4px 14px rgba(183, 51, 55, 0.12); --awa-shadow-md12: 0 4px 14px rgba(183, 51, 55, 0.28); --awa-shadow-md13: 0 4px 16px rgba(0, 0, 0, 0.06); --awa-shadow-md14: 0 4px 16px rgba(15, 23, 42, 0.04); --awa-shadow-md15: 0 4px 16px rgba(183, 51, 55, 0.32); --awa-shadow-md16: 0 4px 16px rgba(183, 51, 55, 0.4); --awa-shadow-md17: 0 4px 6px -1px rgba(0, 0, 0, 0.05); --awa-shadow-md18: 0 4px 6px -1px rgba(183, 51, 55, 0.25); --awa-shadow-lg4: 0 6px 16px rgba(15, 23, 42, 0.05); --awa-shadow-lg5: 0 6px 16px rgba(15, 23, 42, 0.12); --awa-shadow-lg6: 0 6px 18px rgba(15, 23, 42, 0.14); --awa-shadow-xl5: 0 8px 24px rgba(15, 23, 42, 0.06); --awa-shadow-xl6: 0 8px 24px rgba(16, 24, 40, 0.07); --awa-shadow-xl7: 0 8px 32px rgba(0, 0, 0, 0.08); --awa-shadow-2xl2: 0 10px 20px rgba(183, 51, 55, 0.2); --awa-shadow-2xl3: 0 10px 22px rgba(16, 24, 40, 0.1); --awa-shadow-2xl4: 0 10px 24px rgba(15, 23, 42, 0.08); --awa-shadow-3xl: 0 12px 24px rgba(15, 23, 42, 0.16); --awa-shadow-3xl2: 0 12px 24px rgba(183, 51, 55, 0.18); --awa-shadow-4xl: 0 16px 32px rgba(0, 0, 0, 0.12); --awa-shadow-4xl2: 0 16px 34px rgba(16, 24, 40, 0.11); --awa-shadow-hero: 0 25px 60px rgba(15, 23, 42, 0.18); --awa-shadow-inset-red-sm: 0 0 0 2px rgba(183, 51, 55, 0.12); --awa-shadow-inset-red-md: 0 0 0 3px rgba(183, 51, 55, 0.08); --awa-shadow-inset-red-lg: 0 0 0 3px rgba(183, 51, 55, 0.15); --awa-shadow-inset-red-xl: 0 0 0 4px rgba(183, 51, 55, 0.15); --awa-shadow-inset-green: 0 0 0 3px rgba(22, 163, 74, 0.2); --awa-shadow-overlay: 0 0 0 100vmax rgba(15, 23, 42, 0.45), -8px 0 32px rgba(15, 23, 42, 0.14); --awa-shadow-brand-dark: 0 4px 12px rgba(142, 38, 41, 0.4); /* === Box-shadow compound (unique) === */ --awa-shadow-hero2: 0 18px 42px rgba(15, 23, 42, 0.1), 0 6px 18px rgba(183, 51, 55, 0.1); --awa-shadow-inset-glass: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 22px rgba(183, 51, 55, 0.08); --awa-shadow-inset-glass2: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 12px 28px rgba(183, 51, 55, 0.1); --awa-shadow-hero3: 0 8px 18px rgba(15, 23, 42, 0.1); --awa-shadow-error: 0 0 0 3px rgba(239, 68, 68, 0.1); --awa-shadow-md19: 0 8px 16px rgba(0, 0, 0, 0.07); --awa-shadow-hero4: 0 8px 18px rgba(15, 23, 42, 0.08); --awa-shadow-xs6: 0 4px 12px rgba(17, 24, 39, 0.05); --awa-shadow-xs7: 0 6px 16px rgba(17, 24, 39, 0.08); --awa-shadow-layered: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --awa-shadow-green: 0 2px 8px rgba(22, 101, 52, 0.08); /* === Zero / unitless === */ --awa-zero: 0; /* === Gap === */ --awa-gap-0: 0; --awa-gap-1: 4px; --awa-gap-1-5: 6px; --awa-gap-2: 8px; --awa-gap-2-5: 10px; --awa-gap-3: 12px; --awa-gap-3-5: 14px; --awa-gap-4: 16px; --awa-gap-4-5: 18px; --awa-gap-5: 20px; --awa-gap-6: 24px; --awa-gap-7: 32px; --awa-gap-8: 40px; /* === Letter-spacing === */ --awa-tracking-0: 0; --awa-tracking-normal: normal; --awa-tracking-tight: -0.01em; --awa-tracking-tight2: -0.03em; --awa-tracking-wide: 0.02em; --awa-tracking-wide2: 0.03em; --awa-tracking-wide3: 0.12em; --awa-tracking-wide4: 0.12em; --awa-tracking-px2: 2px; --awa-tracking-px02: 0.2px; /* === Line-height === */ --awa-leading-normal: normal; --awa-leading-134: 1.34; /* === Box-shadow — brand === */ --awa-shadow-none: none; --awa-shadow-brand-sm: 0 3px 8px rgba(183, 51, 55, 0.3); --awa-shadow-brand-md: 0 3px 10px rgba(183, 51, 55, 0.3); --awa-shadow-brand-lg: 0 6px 14px rgba(183, 51, 55, 0.12); --awa-shadow-brand-xl: 0 10px 22px rgba(183, 51, 55, 0.14); --awa-shadow-brand-2xl: 0 14px 26px rgba(142, 38, 41, 0.16); --awa-shadow-brand-3xl: 0 4px 15px rgba(183, 51, 55, 0.28); --awa-shadow-brand-4xl: 0 6px 20px rgba(142, 38, 41, 0.34); --awa-shadow-brand-inset: inset 0 0 0 2px rgba(183, 51, 55, 0.16); --awa-shadow-neutral-sm: 0 3px 10px rgba(0, 0, 0, 0.06); --awa-shadow-neutral-md: 0 4px 20px rgba(0, 0, 0, 0.07); --awa-shadow-neutral-lg: 0 8px 30px rgba(0, 0, 0, 0.15); --awa-shadow-neutral-xl: 0 10px 20px rgba(142, 38, 41, 0.18); --awa-shadow-dark-sm: 0 10px 26px rgba(15, 23, 42, 0.06); --awa-shadow-dark-md: 0 18px 38px rgba(15, 23, 42, 0.12); --awa-shadow-red-sm: 0 3px 10px rgba(220, 38, 38, 0.3); --awa-shadow-green-sm: 0 3px 10px rgba(5, 150, 105, 0.3); /* === Text-shadow tokens === */ --awa-text-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --awa-text-shadow-sm2: 0 1px 3px rgba(0, 0, 0, 0.2); --awa-text-shadow-sm3: 0 1px 4px rgba(0, 0, 0, 0.25); --awa-text-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3); --awa-text-shadow-lg: 0 2px 12px rgba(0, 0, 0, 0.32); --awa-text-shadow-xl: 0 2px 14px rgba(0, 0, 0, 0.42); --awa-text-shadow-dark: 0 1px 4px rgba(0, 0, 0, 0.65); /* === Text-decoration-thickness === */ --awa-decoration-1: 1px; --awa-decoration-1-5: 1.5px; --awa-decoration-2: 2px; /* === Background-position offset === */ --awa-bg-pos-right-8: right 8px center; --awa-bg-pos-right-10: right 10px center; --awa-bg-pos-right-12: right 12px center; --awa-bg-pos-right-16: right 16px center; /* === Padding clamp tokens === */ --awa-pad-clamp-xs: clamp(10px, 1.2vw, 16px); --awa-pad-clamp-sm: clamp(12px, 1.2vw, 18px); --awa-pad-clamp-sm2: clamp(14px, 1.5vw, 20px); --awa-pad-clamp-md: clamp(16px, 2vw, 24px); --awa-pad-clamp-lg: clamp(18px, 2.2vw, 28px); --awa-pad-clamp-2col: clamp(24px, 3vw, 34px) clamp(16px, 3vw, 28px); --awa-blur-xs: blur(2px); --awa-blur-sm: blur(3px); --awa-blur-md: blur(4px); --awa-blur-lg: blur(8px); --awa-blur-xl: blur(10px); --awa-blur-2xl: blur(12px); --awa-blur-3xl: blur(20px); --awa-blur-glass: blur(10px) saturate(140%); --awa-blur-glass2: blur(20px) saturate(180%); --awa-blur-glass3: blur(12px) saturate(150%); --awa-blur-glass4: saturate(1.1) blur(2px); /* === Grid Template Columns === */ /* Equal columns */ --awa-gtc-1: 1fr; --awa-gtc-2: repeat(2, 1fr); --awa-gtc-3: repeat(3, 1fr); --awa-gtc-4: repeat(4, 1fr); --awa-gtc-5: repeat(5, 1fr); /* minmax(0, 1fr) columns */ --awa-gtc-1-minmax: minmax(0, 1fr); --awa-gtc-2-minmax: repeat(2, minmax(0, 1fr)); --awa-gtc-3-minmax: repeat(3, minmax(0, 1fr)); --awa-gtc-4-minmax: repeat(4, minmax(0, 1fr)); --awa-gtc-5-minmax: repeat(5, minmax(0, 1fr)); /* auto-fill / auto-fit */ --awa-gtc-autofill-160: repeat(auto-fill, minmax(160px, 1fr)); --awa-gtc-autofill-180: repeat(auto-fill, minmax(180px, 1fr)); --awa-gtc-autofill-200: repeat(auto-fill, minmax(200px, 1fr)); --awa-gtc-autofit-200: repeat(auto-fit, minmax(200px, 1fr)); /* icon + content layouts */ --awa-gtc-1fr-36: minmax(0, 1fr) 36px; --awa-gtc-1fr-38: minmax(0, 1fr) 38px; --awa-gtc-1fr-40: minmax(0, 1fr) 40px; --awa-gtc-1fr-42: minmax(0, 1fr) 42px; --awa-gtc-1fr-44: minmax(0, 1fr) 44px; --awa-gtc-1fr-46: minmax(0, 1fr) 46px; --awa-gtc-44-1fr-44: 44px minmax(0, 1fr) 44px; /* sidebar layouts */ --awa-gtc-20-1fr: 20px 1fr; --awa-gtc-34-1fr: 34px minmax(0, 1fr); --awa-gtc-48-1fr: 48px minmax(0, 1fr); --awa-gtc-52-1fr: 52px minmax(0, 1fr); --awa-gtc-56-1fr: 56px minmax(0, 1fr); --awa-gtc-60-1fr: 60px minmax(0, 1fr); --awa-gtc-64-1fr: 64px minmax(0, 1fr); --awa-gtc-66-1fr: 66px minmax(0, 1fr); --awa-gtc-68-1fr: 68px minmax(0, 1fr); --awa-gtc-72-1fr-auto: 72px minmax(0, 1fr) auto; --awa-gtc-260-1fr: 260px minmax(0, 1fr); --awa-gtc-auto-1fr: auto 1fr; --awa-gtc-clamp-sm: clamp(72px, 22vw, 94px) minmax(0, 1fr); --awa-gtc-clamp-md: clamp(74px, 22vw, 96px) minmax(0, 1fr); --awa-gtc-clamp-lg: clamp(82px, 24vw, 108px) minmax(0, 1fr); /* === Position / Offset tokens === */ --awa-pos-offscreen: -9999px; --awa-pos-neg-1: -1px; --awa-pos-neg-15: -15px; --awa-pos-neg-45: -45px; --awa-pos-neg-46: -46px; --awa-pos-neg-50: -50px; --awa-pos-neg-60: -60px; /* === Outline offset === */ --awa-outline-offset-neg-1: -1px; --awa-outline-offset-neg-2: -2px; --awa-outline-offset-neg-3: -3px; --awa-outline-offset-neg-4: -4px; /* === Border width 1.5px === */ --awa-border-width-1-5: 1.5px; /* === Flex basis tokens === */ --awa-flex-full: 1 1 100%; --awa-flex-half: 1 1 50%; --awa-flex-auto: 1 1 auto; --awa-flex-none: 0 0 auto; --awa-flex-240: 1 1 240px; --awa-flex-250: 1 1 250px; --awa-flex-320: 1 1 320px; --awa-flex-640: 1 1 640px; /* === GTC extra === */ --awa-gtc-12-minmax: repeat(12, minmax(0, 1fr)); --awa-gtc-autofill-280: repeat(auto-fill, minmax(280px, 1fr)); --awa-gtc-36pct-1fr: 36% 1fr; } } @media (prefers-reduced-transparency: reduce) { :root { --awa-red-light: color-mix(in srgb, var(--awa-red) 16%, var(--awa-bg-surface)); --awa-red-extra-light: color-mix(in srgb, var(--awa-red) 8%, var(--awa-bg-surface)); /* === Red alpha background/color (brand) === */ --awa-red-2: rgba(183, 51, 55, 0.02); --awa-red-3: rgba(183, 51, 55, 0.03); --awa-red-4: rgba(183, 51, 55, 0.04); --awa-red-5: rgba(183, 51, 55, 0.05); --awa-red-7: rgba(183, 51, 55, 0.07); --awa-red-8: rgba(183, 51, 55, 0.08); --awa-red-12: rgba(183, 51, 55, 0.12); /* === Red alpha 6% background === */ --awa-red-6: rgba(183, 51, 55, 0.06); /* === Green alpha === */ --awa-green-6: rgba(22, 163, 74, 0.06); /* === White text alpha scale === */ --awa-white-50: rgba(255, 255, 255, 0.5); --awa-white-60: rgba(255 255 255 / 60%); --awa-white-65: rgba(255, 255, 255, 0.65); --awa-white-70: rgba(255, 255, 255, 0.7); --awa-white-75: rgba(255, 255, 255, 0.75); --awa-white-80: rgba(255, 255, 255, 0.8); --awa-white-86: rgba(255, 255, 255, 0.86); --awa-white-88: rgba(255, 255, 255, 0.88); --awa-white-90: rgba(255, 255, 255, 0.9); /* === Additional surface colors === */ --awa-white-3: rgba(255, 255, 255, 0.03); --awa-white-5: rgba(255, 255, 255, 0.05); --awa-white-16: rgba(255 255 255 / 16%); --awa-surface-blue-light: #f0f9ff; --awa-surface-gray: #f8f9fa; --awa-brand-bg-xlight: #fff1f1; /* === Brand hex complementar === */ --awa-color-slate: #515568; --awa-color-success-hex: #27ae60; /* === White alpha backgrounds === */ --awa-white-4: rgba(255, 255, 255, 0.04); --awa-white-6: rgba(255, 255, 255, 0.06); --awa-white-8: rgba(255, 255, 255, 0.08); --awa-white-10: rgba(255, 255, 255, 0.1); --awa-white-12: rgba(255, 255, 255, 0.12); --awa-white-14: rgba(255, 255, 255, 0.14); --awa-white-15: rgba(255, 255, 255, 0.15); --awa-white-18: rgba(255, 255, 255, 0.18); --awa-white-20: rgba(255 255 255 / 20%); --awa-white-85: rgba(255, 255, 255, 0.85); --awa-white-92: rgba(255, 255, 255, 0.92); --awa-white-96: rgba(255, 255, 255, 0.96); /* === Black/dark alpha === */ --awa-black-4: rgba(0, 0, 0, 0.04); --awa-black-10: rgba(0, 0, 0, 0.1); --awa-black-15: rgba(0, 0, 0, 0.15); --awa-black-20: rgba(0, 0, 0, 0.2); --awa-dark-45: rgba(15, 23, 42, 0.45); /* === Brand solid bg === */ --awa-brand-bg-light: #fff7f7; --awa-brand-bg-warn: #fef9c3; --awa-surface-cool: #fafbfc; --awa-surface-slate: rgba(248, 250, 252, 0.92); /* === Gradients === */ --awa-gradient-brand-subtle: linear-gradient(180deg, rgba(183, 51, 55, 0.1) 0%, rgba(183, 51, 55, 0.02) 100%); /* === Brand hex complementar === */ --awa-color-error: #ef4444; --awa-success-light: color-mix(in srgb, var(--awa-success) 12%, var(--awa-bg-surface)); --awa-info-light: color-mix(in srgb, var(--awa-info) 12%, var(--awa-bg-surface)); --awa-warning-light: color-mix(in srgb, var(--awa-warning) 12%, var(--awa-bg-surface)); --awa-danger-light: color-mix(in srgb, var(--awa-danger) 12%, var(--awa-bg-surface)); } body .page-wrapper .awa-quickview-overlay { backdrop-filter: none; background: var(--awa-bg-surface); } body .page-wrapper [class*="muted"], body .page-wrapper .price-label, body .page-wrapper .old-price .price { opacity: 1; } } @media (scripting: none) { body .page-wrapper .owl-carousel { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--awa-grid-gap); overflow: visible; } body .page-wrapper img[loading="lazy"] { opacity: 1; } body .page-wrapper .loading-mask, body .newsletterpopup, #awaBackToTop, .awa-whatsapp-float, .awa-nav-overlay { display: none; } body .page-wrapper details > *:not(summary) { display: block; } } @media print { body .page-wrapper .page-footer, body .page-wrapper .page-header, body .page-wrapper .nav-sections, .whatsapp-float, .awa-whatsapp-float, .back-to-top, #back-to-top, #awaBackToTop, .awa-nav-overlay, .awa-nav-close, .awa-filter-toggle, body .newsletterpopup, body .page-wrapper .loading-mask, body .page-wrapper .item-product .actions-secondary, body .page-wrapper .item-product .quickview-link, body .page-wrapper .owl-carousel .owl-nav, body .page-wrapper .owl-carousel .owl-dots { display: none !important; } } @media (max-width: 767px) { body .page-wrapper .page-main, body .page-wrapper .panel.header, body .page-wrapper .header.content, body .page-wrapper .footer.content, body .page-wrapper .footer-primary, body .page-wrapper .footer-columns, body .page-wrapper .footer-container .rowFlex { padding-left: var(--awa-space-3-75); padding-right: var(--awa-space-3-75); } } .awa-hidden-leak { display: none !important; } body .page-wrapper .price.awa-price-consulte { color: var(--awa-gray-500); font-size: var(--awa-text-md); font-weight: normal; } .awa-skip-to-main, body .page-wrapper .skip-link, body .page-wrapper a[href="#maincontent"], body .page-wrapper .action.skip { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: var(--awa-z-skip); } .awa-skip-to-main:focus, body .page-wrapper .skip-link:focus, body .page-wrapper a[href="#maincontent"]:focus { position: fixed; top: 0; left: 0; width: auto; height: auto; padding: var(--awa-space-3) var(--awa-space-6); background: var(--awa-red); color: var(--awa-text-on-primary); font-size: var(--awa-text-md); font-weight: var(--awa-weight-semibold); text-decoration: none; outline: 2px solid var(--awa-text-on-primary); } #maincontent, body .page-wrapper .block, body .page-wrapper .widget, body .page-wrapper [id]:not(input, select, textarea, button) { scroll-margin-top: var(--awa-header-height, 0); } #awaBackToTop { position: fixed; bottom: 95px; right: 25px; width: var(--awa-icon-button-size); height: var(--awa-icon-button-size); background: var(--awa-dark); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--awa-radius-full, 9999px); color: var(--awa-text-on-dark); font-size: var(--awa-text-xl); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity var(--awa-transition), visibility var(--awa-transition), background var(--awa-transition), border-color var(--awa-transition); z-index: var(--awa-z-fixed); display: flex; align-items: center; justify-content: center; will-change: opacity, visibility; } #awaBackToTop:hover { background: var(--awa-red); border-color: var(--awa-red); } #awaBackToTop:focus-visible { outline: 2px solid var(--awa-text-on-primary); outline-offset: 2px; background: var(--awa-red); } #awaBackToTop.visible { opacity: 1; visibility: visible; } .awa-whatsapp-float { position: fixed; bottom: 25px; right: 25px; width: 60px; height: 60px; background: var(--awa-red); border-radius: var(--awa-radius-full, 9999px); display: flex; align-items: center; justify-content: center; color: var(--awa-text-on-primary); text-decoration: none; box-shadow: 0 4px 15px rgba(183, 51, 55, 0.28); z-index: var(--awa-z-float); transition: transform var(--awa-transition), box-shadow var(--awa-transition); will-change: transform; } .awa-whatsapp-float:hover { transform: scale(1.1); background: var(--awa-red-dark); box-shadow: 0 6px 20px rgba(142, 38, 41, 0.34); } .awa-whatsapp-float:focus-visible { outline: 2px solid var(--awa-text-on-primary); outline-offset: 2px; box-shadow: 0 0 0 4px var(--awa-red-light); } @media (min-width: 1400px) and (max-width: 1599px) { :root { --awa-container: 1280px; --footer-container: 1280px; --awa-container-max: 1280px; } } @media (min-width: 1600px) { :root { --awa-container: 1280px; --footer-container: 1280px; --awa-container-max: 1280px; } } @media (max-width: 1399px) { :root { --awa-container: 1280px; --footer-container: 1280px; --awa-container-max: 1280px; } } @media (max-width: 1199px) { :root { --awa-container: 100%; --footer-container: 100%; --awa-container-max: 100%; --awa-container-padding: 15px; } } @media (max-width: 991px) { :root { --awa-gap: 20px; --awa-grid-gap: 20px; } } @media (max-width: 767px) { :root { --awa-gap: var(--awa-gap-lg); --awa-grid-gap: var(--awa-gap-lg); --awa-container-max: 100%; --awa-container-padding: 15px; } body .page-wrapper .breadcrumbs { padding: var(--awa-space-2) var(--awa-space-4); font-size: var(--awa-text-xs); } body .page-wrapper .action.primary, body .page-wrapper button.primary, body .page-wrapper .btn-primary { padding: var(--awa-space-3) var(--awa-control-padding-inline-sm); min-height: var(--awa-btn-height-sm); font-size: var(--awa-text-base); } 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 { padding: var(--awa-space-2-5) var(--awa-control-padding-inline-sm); min-height: var(--awa-input-height-sm); font-size: var(--awa-text-base); } } @media (max-width: 480px) { :root { --awa-gap: var(--awa-gap-md); --awa-grid-gap: var(--awa-gap-md); --awa-radius: 8px; } body .page-wrapper .pages .item a, body .page-wrapper .pages .item > strong { min-width: 36px; height: 36px; font-size: var(--awa-text-sm); } #awaBackToTop { width: 40px; height: 40px; right: 15px; bottom: 80px; font-size: var(--awa-text-lg); } .awa-whatsapp-float { width: 50px; height: 50px; right: 15px; bottom: 15px; } .awa-whatsapp-float svg { width: 24px; height: 24px; } body .page-wrapper .modal-popup .modal-inner-wrap { margin: var(--awa-space-3); border-radius: var(--awa-radius-sm); max-width: calc(100vw - 20px); } } @media (max-width: 375px) { :root { --awa-font-size: var(--awa-text-base-plus); } body .page-wrapper .page-main { padding: 0 var(--awa-space-3); } body .page-wrapper .breadcrumbs { padding: var(--awa-space-1) var(--awa-space-3); font-size: var(--awa-text-xs); } body .page-wrapper .breadcrumbs a { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; } body .page-wrapper .pages .item a, body .page-wrapper .pages .item > strong { min-width: 32px; height: 32px; font-size: var(--awa-text-xs); } } @media (max-width: 320px) { :root { --awa-font-size: var(--awa-text-base); --awa-gap: var(--awa-gap-2-5); --awa-grid-gap: var(--awa-gap-2-5); /* === Layout misc === */ --awa-radius-full: 50%; --awa-radius-none: 0; --awa-flex-1: 1; --awa-aspect-square: 1 / 1; --awa-aspect-video: 16 / 9; --awa-aspect-4-3: 4 / 3; /* === Typography misc === */ --awa-ls-tight: 0.06em; --awa-ls-tighter: 0.05em; --awa-ls-wide: 0.08em; --awa-ls-widest: 0.14em; --awa-text-decoration-thickness: 0.08em; --awa-text-underline-offset: 0.14em; --awa-text-underline-offset-sm: 0.12em; /* === Transition presets === */ --awa-transition-border-shadow: border-color 180ms ease, box-shadow 180ms ease; --awa-transition-color-bg: color 200ms ease, background-color 200ms ease; --awa-transition-opacity: opacity 200ms ease; --awa-transition-all: all 200ms ease; /* === Transparency / keyword === */ --awa-transparent: transparent; --awa-currentcolor: currentcolor; --awa-inherit: inherit; --awa-none: none; /* === Text decoration === */ --awa-underline: underline; --awa-line-through: line-through; --awa-none-deco: none; /* === Transition — more patterns === */ --awa-transition-border-sh-015: border-color 0.15s ease, box-shadow 0.15s ease; --awa-transition-bg-brd-sh-cbg-02: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; --awa-transition-bg-180-sh: background 180ms ease, box-shadow 180ms ease; --awa-transition-bg-250-cbg-sh: background 250ms ease, color 250ms ease, border-color 250ms ease; --awa-transition-full-030: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease; /* === Transition — valores adicionais === */ --awa-transition-none: none; --awa-transition-280-bezier: 280ms cubic-bezier(0.4, 0, 0.2, 1); --awa-transition-bg: background 150ms ease; --awa-transition-bg-250: background 250ms ease, color 250ms ease, border-color 250ms ease; --awa-transition-all-025: all 0.25s ease; --awa-transition-transform-02: transform 0.2s ease; --awa-transition-transform-025: transform 0.25s ease; --awa-transition-transform-03: transform 0.3s ease; --awa-transition-color-015: color 0.15s ease; --awa-transition-color-03: color 0.3s ease; --awa-transition-border-sh-02: border-color 0.2s ease, box-shadow 0.2s ease; --awa-transition-bg-brd-sh-02: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; --awa-transition-cbg-02: background-color 0.2s ease, color 0.2s ease; --awa-transition-full-02: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 150ms ease; --awa-transition-full-bg-160: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease; /* === Transition shorthands — passes AP === */ --awa-transition-sh-tf-brd: box-shadow 250ms ease, transform 250ms ease, border-color 250ms ease; --awa-transition-bg-sh-180: background 180ms ease, box-shadow 180ms ease; --awa-transition-bg-200: background 200ms ease; --awa-transition-op-150: opacity 150ms ease; --awa-transition-brd-02: border-color 0.2s; --awa-transition-color-02: color 0.2s; --awa-transition-brd-sh-015: border-color 0.15s, box-shadow 0.15s; --awa-transition-bg-012: background 0.12s; --awa-transition-bg-color-02: background 0.2s ease, color 0.2s ease; --awa-transition-bg-02: background 0.2s ease; --awa-transition-all-015: all 0.15s; --awa-transition-tf-022: transform 0.22s ease; --awa-transition-brd-sh-02: border-color 0.2s ease, box-shadow 0.2s ease; --awa-transition-bg-brd-02: background 0.2s, border-color 0.2s; --awa-transition-bg-02-plain: background 0.2s; --awa-transition-filter-02: filter 0.2s; --awa-transition-brd-color-sh-02: border-color 0.2s, box-shadow 0.2s; --awa-transition-sh-tf-02: box-shadow 0.2s, transform 0.15s; --awa-transition-bg-brd-sh-150: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease; --awa-transition-brd-015: border-color 0.15s; --awa-transition-sh-tf-025: box-shadow 0.25s ease, transform 0.25s ease; --awa-transition-bg-color-160: background-color 160ms ease, color 160ms ease; --awa-transition-color-180: color 180ms ease; --awa-transition-bg-sh-tf-02: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; /* === Background-size === */ --awa-bg-size-contain: contain; --awa-bg-size-cover: cover; --awa-bg-size-auto: auto; --awa-bg-repeat-no: no-repeat; /* === Transform presets === */ --awa-transform-gpu: translate3d(0, 0, 0); --awa-transform-y-0: translateY(0); --awa-transform-x-0: translateX(0); --awa-transform-y-center: translateY(-50%); --awa-transform-x-center: translateX(-50%); --awa-transform-center: translate(-50%, -50%); --awa-transform-scale-1: scale(1); --awa-transform-scale-0: scale(0); --awa-transform-scale-97: scale(0.97); --awa-transform-scale-103: scale(1.03); --awa-transform-scale-105: scale(1.05); --awa-transform-scale-3d: scale3d(1, 1, 1); /* === Position percentuais === */ --awa-pos-50: 50%; --awa-pos-100: 100%; --awa-pos-neg-100: -100%; /* === Line-clamp === */ --awa-clamp-1: 1; --awa-clamp-2: 2; --awa-clamp-3: 3; --awa-clamp-4: 4; /* === Viewport sizes === */ --awa-vw-100: 100vw; --awa-vh-100: 100vh; --awa-dvh-100: 100dvh; --awa-svh-100: 100svh; /* === Flex === */ --awa-flex-grow-1: 1; --awa-flex-shrink-0: 0; /* === Text underline offset === */ --awa-underline-offset-auto: auto; --awa-underline-offset-015: 0.15em; --awa-underline-offset-02: 0.2em; --awa-underline-offset-025: 0.25em; /* === Letter-spacing (normalized) === */ --awa-tracking-tight2n: -0.03em; /* === Order === */ --awa-order-neg1: -1; --awa-order-0: 0; --awa-order-1: 1; --awa-order-2: 2; --awa-order-3: 3; --awa-order-4: 4; --awa-order-10: 10; /* === Z-index misc === */ --awa-z-5: 5; --awa-z-7: 7; --awa-z-25: 25; --awa-z-30: 30; --awa-z-40: 40; --awa-z-150: 150; --awa-z-400: 400; --awa-z-997: 997; --awa-z-998: 998; --awa-z-1001: 1001; --awa-z-9000: 9000; --awa-z-9500: 9500; --awa-z-9600: 9600; } body .page-wrapper .page-main { padding: 0 var(--awa-space-2-5); } #awaBackToTop { width: 36px; height: 36px; right: 10px; bottom: 70px; } .awa-whatsapp-float { width: 44px; height: 44px; right: 10px; bottom: 10px; } } body .page-wrapper .fa, body .page-wrapper .fas, body .page-wrapper .far, body .page-wrapper .fal, body .page-wrapper .fab, body .page-wrapper [class^="icon-"], body .page-wrapper [class*=" icon-"] { vertical-align: middle; line-height: var(--awa-leading-none); } .qty-down-fixed-onclick-page-cart, .qty-up-fixed-onclick-page-cart { background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit; line-height: inherit; appearance: none; } } /* =========================================== AWA MOTOS ? CORE (Design Tokens + Reset + Base) Tema: AYO/Rokanthemes (Home5) ARQUIVO 1/4 da camada AWA consolidada. CONTE�DO: - Vari�veis CSS (FONTE �NICA para todo o projeto) - Reset e base tipogr�fica - Bot?es, formul�rios, mensagens - Breadcrumbs, pagina�?o, loading - Acessibilidade global - Scrollbar, sele�?o de texto - Skeleton loader, modais, tabelas - Utilit�rios (sr-text, reduced motion) INSTALA�?O: app/design/frontend/ayo/ayo_home5/web/css/awa-core.css Carregar PRIMEIRO (antes dos demais awa-*.css) ESPECIFICIDADE: Usa body .page-wrapper para superar Magento/AYO LESS sem !important. !important APENAS para overrides de inline styles do Magento. =========================================== */ /* =========================================== LAYERS ? ORDEM DE CASCATA AWA (F2-02) Declara a prioridade dos layers (menor ? maior): awa-reset < awa-core < awa-layout < awa-components < awa-consistency < awa-fixes < awa-grid Aten�?o: regras fora de @layer (Ayo LESS) t?m prioridade m�xima. Estrat�gia adotada: body .page-wrapper supera Ayo LESS por especificidade. TODO: envolver cada arquivo em seu layer correspondente. =========================================== */ @layer awa-reset, awa-core, awa-layout, awa-components, awa-consistency, awa-fixes, awa-grid; /* =========================================== LAYER AWA-CORE ? F2-02: Cascade Layers para organiza�?o Todas as regras deste arquivo est?o dentro de @layer awa-core =========================================== */ @layer awa-core { :root { color-scheme: light; /* R16-01: sinaliza ao UA que a p�gina � light-only */ /* Cores prim�rias (prints oficiais) */ --awa-red: var(--awa-cons-c29); --awa-red-dark: color-mix(in srgb, var(--awa-red), black 30%); /* F2-01 ? derivado autom�tico */ --awa-red-light: color-mix(in srgb, var(--awa-red) 16%, transparent); /* F2-01 */ --awa-red-extra-light: color-mix(in srgb, var(--awa-red) 8%, transparent); /* F2-01 hover bg leve */ --awa-dark: var(--awa-cons-c85); --awa-orange: var(--awa-cons-c29); /* mant�m badges dentro da paleta oficial */ /* --awa-white, --awa-whatsapp: removidas (sem uso em var()) */ /* Escala de cinzas */ --awa-gray-50: #fafbfc; --awa-gray-100: #f8f9fa; --awa-gray-200: #e9ecef; --awa-gray-300: #dee2e6; --awa-gray-400: #ced4da; --awa-gray-500: #6c757d; --awa-gray-600: #585e63; --awa-gray-700: #495057; --awa-gray-800: var(--awa-cons-c85); --awa-gray-900: #212529; /* Cores sem�nticas ? diferenciadas para UX clara */ --awa-success: #198754; --awa-success-light: color-mix(in srgb, var(--awa-success) 10%, white); /* F2-01 */ --awa-warning: #e09100; --awa-warning-light: color-mix(in srgb, var(--awa-warning) 12%, white); /* F2-01 */ --awa-danger: #8e2629; --awa-danger-light: color-mix(in srgb, var(--awa-danger) 12%, white); /* F2-01 */ --awa-info: #0d6efd; --awa-info-light: color-mix(in srgb, var(--awa-info) 12%, white); /* F2-01 */ /* Cores sem�nticas ? texto (R12-14) */ --awa-success-text: #0f5132; --awa-danger-text: #8e2629; --awa-info-text: #084298; --awa-warning-text: #664d03; /* Contraste sem�ntico */ --awa-text-on-primary: var(--awa-cons-c78); --awa-text-on-danger: var(--awa-cons-c78); --awa-text-on-success: var(--awa-cons-c78); --awa-text-on-warning: var(--awa-cons-c78); --awa-text-on-dark: var(--awa-cons-c78); --awa-text-on-light: var(--awa-dark); --awa-text-muted-on-light: var(--awa-gray-500); /* Superf�cies */ --awa-bg-surface: var(--awa-cons-c78); /* Sombras */ --awa-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --awa-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --awa-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --awa-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.12); --awa-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15); --awa-shadow-dropdown: 0 6px 20px rgba(0, 0, 0, 0.12); /* R13: dropdown menus */ --awa-shadow-red: 0 4px 12px color-mix(in srgb, var(--awa-red) 24%, transparent); /* F2-01 CTA hover glow */ --awa-shadow-badge: 0 1px 4px rgba(0, 0, 0, 0.12); /* BP-35: product/PDP badges */ --awa-shadow-focus-ring: 0 0 0 3px color-mix(in srgb, var(--awa-red) 15%, transparent); /* BP-35: focus ring */ --awa-overlay: rgba(0, 0, 0, 0.8); /* R16-02: overlay/backdrop backgrounds */ /* Layout ? padr?o AYO Bootstrap container AYO usa max-width 1600px em telas ?1399px (XL). No range 768?1398px herda do Magento base (~1280px). N�s usamos 1200px como default e escalamos via @media. */ --awa-container: 1200px; /* --awa-container-sm, --awa-container-xs: removidas (sem uso) */ --footer-container: 1200px; /* Classe utilit�ria para ocultar leaks Magento (usado pelo JS) */ /* .awa-hidden-leak { display: none !important; } ? definida abaixo */ /* Border radius */ --awa-radius-2xs: 2px; --awa-radius-xs: 4px; --awa-radius-sm: 8px; --awa-radius-md: 10px; --awa-radius: 12px; --awa-radius-lg: 16px; --awa-radius-full: 9999px; /* Spacing scale (base 4px) */ --awa-space-1: 4px; --awa-space-2: 8px; --awa-space-2-5: 10px; /* BP-50: common spacing */ --awa-space-3: 12px; --awa-space-3-5: 14px; /* BP-50: common spacing */ --awa-space-3-75: 15px; /* BP-50: common spacing */ --awa-space-4: 16px; --awa-space-5: 20px; --awa-space-6: 24px; --awa-space-7: 32px; --awa-space-8: 40px; --awa-space-9: 48px; --awa-space-10: 64px; /* Espa�amento / grid gap */ --awa-gap: 24px; --awa-grid-gap: 24px; --awa-grid-gap-sm: 16px; --awa-grid-gap-xs: 12px; /* Transi�?es */ --awa-transition: 0.25s ease; --awa-transition-fast: 0.15s ease; --awa-transition-slow: 0.4s ease; /* Z-index ? Escala de camadas arquitetural (BP-16) */ --awa-z-dropdown: 99; /* autocomplete, dropdowns leves */ --awa-z-overlay: 1000; /* minicart, modais leves */ --awa-z-menu-container: 1006; /* container do menu vertical */ --awa-z-menu-list: 1008; /* lista do menu vertical dropdown */ --awa-z-sticky: 9990; /* header sticky/fixed */ --awa-z-sidebar: 9997; /* fixed-right sidebar tools */ --awa-z-fixed: 9998; /* back-to-top button */ --awa-z-float: 9999; /* whatsapp float, header dropdown */ --awa-z-submenu: 10000; /* vertical menu flyout */ --awa-z-flyout: 10030; /* submenu acima do menu principal */ --awa-z-popup: 10100; /* newsletter popup */ --awa-z-modal: 10200; /* B2B login/suggestion modals */ --awa-z-toast: 10050; /* toast notifications, pending banners */ --awa-z-nav-overlay: 99998; /* overlay backdrop mobile nav */ --awa-z-nav-drawer: 99999; /* mobile nav drawer */ --awa-z-skip: 999999; /* skip-to-content a11y */ /* ?? Conven�?o: Logical Properties (BP-05) ?? A partir de fev/2026, NOVAS regras devem usar propriedades l�gicas: padding-inline / padding-block / margin-inline / margin-block / inset-inline / border-inline / etc. N?o migrar em massa c�digo existente ? apenas novas adi�?es. Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties */ /* Tipografia ? Poppins carregada pelo Ayo via Google Fonts */ --awa-font: 'Poppins', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, sans-serif; --awa-font-size: 16px; --awa-line-height: var(--awa-leading-loose); /* Tipografia ? escala de pesos (BP-22) */ --awa-weight-light: 300; --awa-weight-normal: 400; --awa-weight-medium: 500; --awa-weight-semibold: 600; --awa-weight-bold: 700; --awa-weight-extrabold: 800; --awa-weight-black: 900; /* Tipografia ? escala de line-height (BP-23) */ --awa-leading-none: 1; --awa-leading-tight: 1.1; --awa-leading-compact: 1.2; --awa-leading-snug: 1.25; --awa-leading-base: 1.3; --awa-leading-cozy: 1.35; --awa-leading-normal: 1.4; --awa-leading-comfortable: 1.45; --awa-leading-relaxed: 1.5; --awa-leading-loose: 1.6; /* Tipografia ? escala de letter-spacing (BP-25) */ --awa-tracking-tighter: -0.01em; --awa-tracking-tight: 0.01em; --awa-tracking-normal: 0.02em; --awa-tracking-wide: 0.5px; --awa-tracking-wider: 1px; /* Tipografia ? escala de tamanhos */ --awa-text-3xs: 11px; /* BP-30: era 10px, aumentado para legibilidade */ --awa-text-2xs: 11px; /* BP-30: labels, badges, captions extra-pequenos */ --awa-text-xs: 12px; --awa-text-sm: 13px; --awa-text-base: 14px; --awa-text-base-plus: 15px; /* BP-39: countdown titles, benefits bar, sidebar icons */ --awa-text-md: 16px; --awa-text-lg: 18px; --awa-text-xl: 20px; --awa-text-xl-plus: 22px; /* BP-38: icons, badge titles, popup headings */ --awa-text-2xl: 24px; --awa-text-3xl: 28px; --awa-text-4xl: 32px; --awa-text-5xl: 40px; /* BP-40: display headings, category circle icons */ /* Altura padr?o de inputs e bot?es */ --awa-input-height: 48px; --awa-input-height-sm: 40px; --awa-btn-height: 48px; --awa-btn-height-sm: 40px; /* Touch target m�nimo ? WCAG 2.2 Success Criterion 2.5.8 (AAA) */ --awa-touch-target: 44px; /* Cores especializadas (BP-41) */ --awa-text-countdown-label: #ffe8c9; /* BP-41: warm cream p/ labels countdown sobre bg escuro */ /* Footer (tokens espec�ficos, valores alinhados com globais) */ --footer-bg: #1a1a1a; --footer-bg-secondary: #242424; --footer-bg-tertiary: #111; --footer-text: #c0c0c0; /* BP-41: era #b0b0b0 ? 5.3:1 sobre #1a1a1a ? WCAG AA */ --footer-text-bright: var(--awa-cons-c78); --footer-accent: var(--awa-cons-c29); /* --footer-accent-hover: removida (sem uso) */ --footer-border: color-mix(in srgb, transparent, white 10%); /* F2-01 */ --footer-font-size-small: 12px; --footer-font-size-base: 14px; --footer-font-size-heading: 16px; /* --footer-space-xs: removida (sem uso) */ --footer-space-sm: 12px; --footer-space-md: 20px; --footer-space-lg: 30px; --footer-space-xl: 50px; --footer-radius: 8px; --footer-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); } /* =========================================== SELE�?O DE TEXTO =========================================== */ ::selection { background: var(--awa-red); color: var(--awa-text-on-primary); /* BP-09: era var(--awa-cons-c78) hardcoded */ } /* ::-moz-selection removida ? obsoleta desde Firefox 62 (2018) */ /* =========================================== SCROLLBAR CUSTOMIZADA =========================================== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--awa-gray-100); } ::-webkit-scrollbar-thumb { background: var(--awa-gray-400); border-radius: var(--awa-radius-xs); /* BP-11: era 4px hardcoded */ } ::-webkit-scrollbar-thumb:hover { background: var(--awa-gray-500); } html { scrollbar-width: thin; scrollbar-color: var(--awa-gray-400) var(--awa-gray-100); scroll-behavior: smooth; interpolate-size: allow-keywords; /* F4-01: transi�?o height:auto nativa (Chrome 129+) */ } /* =========================================== RESET E BASE =========================================== */ *, *::before, *::after { box-sizing: border-box; } /* Desabilitar smooth scroll em checkout ? conflita com OPC step anchors */ .checkout-index-index, .checkout-onepage-success { scroll-behavior: auto; } body { font-family: var(--awa-font); font-size: var(--awa-font-size); color: var(--awa-dark); line-height: var(--awa-line-height); font-optical-sizing: auto; /* BP-44: otimiza�?o �ptica para Poppins (variable-weight awareness) */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility; } a { color: var(--awa-red); text-decoration: none; text-decoration-skip-ink: auto; /* BP-42: linhas de underline n?o cortam descendentes */ transition: color var(--awa-transition); } a:hover { color: var(--awa-red-dark); } /* BP-27: touch-action: manipulation ? remove 300ms tap delay em interativos */ a, button, [role="button"], input, select, textarea, summary { touch-action: manipulation; } /* Focus visible global ? acessibilidade */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--awa-red); outline-offset: 2px; border-radius: var(--awa-radius-2xs); } /* Hierarquia tipogr�fica global */ body .page-wrapper h1 { font-size: clamp(var(--awa-text-2xl), 18vw, var(--awa-text-4xl)); /* F2-03: fluid 24?32px */ font-weight: var(--awa-weight-bold); line-height: var(--awa-leading-base); margin-bottom: var(--awa-space-4); text-wrap: balance; /* F1-01: elimina vi�vas tipogr�ficas */ } body .page-wrapper h2 { font-size: clamp(var(--awa-text-xl), 15.5vw, var(--awa-text-3xl)); /* F2-03: fluid 20?28px */ font-weight: var(--awa-weight-bold); line-height: var(--awa-leading-cozy); margin-bottom: var(--awa-space-3); text-wrap: balance; /* F1-01 */ } body .page-wrapper h3 { font-size: clamp(var(--awa-text-lg), 13vw, var(--awa-text-2xl)); /* F2-03: fluid 18?24px */ font-weight: var(--awa-weight-semibold); line-height: var(--awa-leading-normal); margin-bottom: var(--awa-space-3); text-wrap: balance; /* F1-01 */ } body .page-wrapper h4 { font-size: var(--awa-text-lg); /* F2-03: h4 mant�m fixo (18px ? adequado para labels) */ font-weight: var(--awa-weight-semibold); line-height: var(--awa-leading-normal); margin-bottom: var(--awa-space-2); text-wrap: balance; /* F1-01 */ } /* F1-02: text-wrap pretty em par�grafos ? evita vi�vas em texto corrido */ body .page-wrapper p, body .page-wrapper .product.attribute.description, body .page-wrapper .cms-page-view .page-main { text-wrap: pretty; } /* F4-03: hanging-punctuation ? alinhamento �ptico de aspas/h�fens */ body .page-wrapper .product.attribute.description, body .page-wrapper .cms-page-view .page-main, body .page-wrapper .post-content { hanging-punctuation: first allow-end; } .page-wrapper { max-width: 100%; overflow-x: hidden; /* BUG-06: fallback para Safari <16 que n?o suporta clip */ overflow-x: clip; /* moderno: n?o cria scroll container */ } /* =========================================== CONTAINER GLOBAL ? ALINHAMENTO UNIFORME Garante que TODAS as se�?es usem a mesma largura. Resolve conflito entre os 5+ arquivos que definiam max-width diferente para .page-main. =========================================== */ body .page-wrapper .page-main { max-width: var(--awa-container); margin: 0 auto; padding: 0 var(--awa-space-5); /* P2-fluid: era 0 20px */ isolation: isolate; /* BP-33: stacking context ? conter z-index de conte�do */ } /* Se�?es full-width (slider, banners, nav background) mant?m 100% */ body .page-wrapper .nav-sections, body .page-wrapper .page-footer, body .page-wrapper .page-header { max-width: 100%; isolation: isolate; /* BP-33: cada se�?o � um stacking context independente */ } /* =========================================== BOT?ES GERAIS =========================================== */ body .page-wrapper .action.primary, body .page-wrapper button.primary, body .page-wrapper .btn-primary { background: var(--awa-red); color: var(--awa-text-on-primary); border: none; border-radius: var(--awa-radius-sm); padding: var(--awa-space-4) var(--awa-space-7); min-height: var(--awa-btn-height); font-weight: var(--awa-weight-semibold); cursor: pointer; transition: background var(--awa-transition), transform var(--awa-transition), box-shadow var(--awa-transition); position: relative; overflow: hidden; } body .page-wrapper .action.primary:hover, body .page-wrapper button.primary:hover, body .page-wrapper .btn-primary:hover { background: var(--awa-red-dark); box-shadow: var(--awa-shadow-red); } body .page-wrapper .action.primary:active, body .page-wrapper button.primary:active, body .page-wrapper .btn-primary:active { transform: scale(0.98); } body .page-wrapper .action.primary:focus-visible, body .page-wrapper button.primary:focus-visible, body .page-wrapper .btn-primary:focus-visible { outline: 2px solid var(--awa-red); outline-offset: 2px; } body .page-wrapper .action.primary.loading, body .page-wrapper button.primary.loading { pointer-events: none; opacity: 0.8; } /* Estado disabled universal */ body .page-wrapper .action.primary:disabled, body .page-wrapper .action.primary[disabled], body .page-wrapper button.primary:disabled, body .page-wrapper .btn-primary:disabled { background: var(--awa-gray-300); color: var(--awa-gray-500); cursor: not-allowed; opacity: 0.6; transform: none; box-shadow: none; } /* Bot?o secund�rio (invertido) */ body .page-wrapper .action.secondary, body .page-wrapper button.secondary, body .page-wrapper .btn-secondary { background: var(--awa-bg-surface); /* BP-12 */ color: var(--awa-red); border: 1px solid var(--awa-red); border-radius: var(--awa-radius-sm); padding: var(--awa-space-4) var(--awa-space-7); min-height: var(--awa-btn-height); font-weight: var(--awa-weight-semibold); cursor: pointer; transition: background var(--awa-transition-fast), color var(--awa-transition-fast), border-color var(--awa-transition-fast); } body .page-wrapper .action.secondary:hover, body .page-wrapper button.secondary:hover, body .page-wrapper .btn-secondary:hover { background: var(--awa-red-dark); color: var(--awa-text-on-primary); border-color: 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; } /* =========================================== FORMUL�RIOS =========================================== */ 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: 2px solid var(--awa-gray-200); border-radius: var(--awa-radius-sm); padding: var(--awa-space-3) var(--awa-space-4); min-height: var(--awa-input-height); font-size: var(--awa-text-base); font-family: inherit; line-height: var(--awa-leading-normal); transition: border-color var(--awa-transition), box-shadow var(--awa-transition); } body .page-wrapper input[type="text"]:hover, body .page-wrapper input[type="email"]:hover, body .page-wrapper input[type="password"]:hover, body .page-wrapper input[type="tel"]:hover, body .page-wrapper input[type="number"]:hover, body .page-wrapper input[type="search"]:hover, body .page-wrapper textarea:hover, body .page-wrapper select:hover { border-color: var(--awa-gray-400); } body .page-wrapper input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]):focus, body .page-wrapper textarea:focus, body .page-wrapper select:focus { border-color: var(--awa-red); outline: none; box-shadow: 0 0 0 3px var(--awa-red-light); } /* Placeholder */ body .page-wrapper input::placeholder, body .page-wrapper textarea::placeholder { color: var(--awa-gray-500); opacity: 1; } /* Valida�?o */ body .page-wrapper input.mage-error, body .page-wrapper textarea.mage-error, body .page-wrapper select.mage-error { border-color: var(--awa-danger); box-shadow: 0 0 0 3px var(--awa-danger-light); /* R13: era rgba hardcoded */ } body .page-wrapper .field._error .label, body .page-wrapper div.mage-error { color: var(--awa-danger); font-size: var(--awa-text-xs); margin-top: var(--awa-space-1); } body .page-wrapper input.valid, body .page-wrapper textarea.valid { border-color: var(--awa-success); } /* R17-03: Autofill ? neutraliza background amarelo/azul do Chrome/Safari */ body .page-wrapper input:-webkit-autofill, body .page-wrapper input:-webkit-autofill:hover, body .page-wrapper input:-webkit-autofill:focus, body .page-wrapper textarea:-webkit-autofill, body .page-wrapper select:-webkit-autofill { -webkit-text-fill-color: var(--awa-dark); box-shadow: 0 0 0 1000px var(--awa-bg-surface) inset; transition: background-color 5000s ease-in-out 0s; } /* R17-05: Alinhar checkboxes e radios ? paleta da marca */ body .page-wrapper input[type="checkbox"], body .page-wrapper input[type="radio"] { accent-color: var(--awa-red); } /* R17-08: Ocultar spinner de input[type=number] (consist?ncia com qty do PDP) */ body .page-wrapper input[type="number"]::-webkit-inner-spin-button, body .page-wrapper input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; } body .page-wrapper input[type="number"] { appearance: textfield; } /* =========================================== MENSAGENS / TOASTS =========================================== */ body .page-wrapper .message { border-radius: var(--awa-radius-sm); padding: var(--awa-space-4) var(--awa-space-5); margin-bottom: var(--awa-space-4); display: flex; align-items: center; gap: var(--awa-space-3); font-size: var(--awa-text-base); line-height: var(--awa-leading-relaxed); animation: awa-slide-down-toast 0.3s ease; border-left: 4px solid transparent; } body .page-wrapper .message.success { background: var(--awa-success-light); border-left-color: var(--awa-success); color: var(--awa-success-text); /* R12-14 */ } body .page-wrapper .message.error { background: var(--awa-danger-light); border-left-color: var(--awa-danger); color: var(--awa-danger-text); /* R12-14 */ } body .page-wrapper .message.info, body .page-wrapper .message.notice { background: var(--awa-info-light); border-left-color: var(--awa-info); color: var(--awa-info-text); /* R12-14 */ } body .page-wrapper .message.warning { background: var(--awa-warning-light); border-left-color: var(--awa-warning); color: var(--awa-warning-text); /* R12-14 */ } @keyframes awa-slide-down-toast { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* =========================================== ESTADOS VAZIOS =========================================== */ body .page-wrapper .message.empty, body .page-wrapper .empty-cart, body .page-wrapper .no-products { text-align: center; padding: var(--awa-space-10) var(--awa-space-7); color: var(--awa-gray-500); background: var(--awa-gray-50); border-radius: var(--awa-radius); border: 2px dashed var(--awa-gray-200); } body .page-wrapper .cart-empty { text-align: center; padding: var(--awa-space-10) var(--awa-space-7); background: var(--awa-gray-50); border-radius: var(--awa-radius); border: 2px dashed var(--awa-gray-200); } body .page-wrapper .cart-empty p { font-size: var(--awa-text-lg); color: var(--awa-gray-500); margin-bottom: var(--awa-space-6); } body .page-wrapper .cart-empty .action.continue { display: inline-block; padding: var(--awa-space-4) var(--awa-space-7); background: var(--awa-red); color: var(--awa-text-on-primary); border-radius: var(--awa-radius-sm); font-weight: var(--awa-weight-semibold); text-decoration: none; transition: background var(--awa-transition), transform var(--awa-transition), box-shadow var(--awa-transition); /* R13: era 'all' */ } body .page-wrapper .cart-empty .action.continue:hover { background: var(--awa-red-dark); transform: translateY(-2px); box-shadow: var(--awa-shadow-red); /* R13: token */ } /* R18-02: keyboard focus indicator for empty-cart CTA */ body .page-wrapper .cart-empty .action.continue:focus-visible { outline: 2px solid var(--awa-red); outline-offset: 2px; } /* =========================================== BREADCRUMBS =========================================== */ body .page-wrapper .breadcrumbs { padding: var(--awa-space-3) var(--awa-space-5); margin-bottom: var(--awa-space-6); background: var(--awa-gray-50); border-radius: var(--awa-radius-sm); } body .page-wrapper .breadcrumbs ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--awa-space-1); padding: 0; margin: 0; } body .page-wrapper .breadcrumbs li { display: flex; align-items: center; font-size: var(--awa-text-sm); color: var(--awa-gray-500); } body .page-wrapper .breadcrumbs li:not(:last-child)::after { content: '/'; margin: 0 var(--awa-space-2); } body .page-wrapper .breadcrumbs li:last-child { color: var(--awa-dark); font-weight: var(--awa-weight-semibold); } body .page-wrapper .breadcrumbs a { color: var(--awa-gray-700); transition: color var(--awa-transition-fast); } body .page-wrapper .breadcrumbs a:hover { color: var(--awa-red-dark); } /* =========================================== PAGINA�?O =========================================== */ body .page-wrapper .pages { text-align: center; margin: var(--awa-space-8) 0; } body .page-wrapper .pages-items { display: inline-flex; gap: var(--awa-space-1); list-style: none; padding: var(--awa-space-1); background: var(--awa-gray-50); border-radius: var(--awa-radius); } body .page-wrapper .pages .item { display: inline-block; } body .page-wrapper .pages .item a, body .page-wrapper .pages .item strong { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 var(--awa-space-3); border-radius: var(--awa-radius-sm); font-size: var(--awa-text-base); font-weight: var(--awa-weight-medium); transition: background var(--awa-transition), color var(--awa-transition); /* R13: era 'all' */ } body .page-wrapper .pages .item a { background: var(--awa-gray-100); color: var(--awa-dark); } body .page-wrapper .pages .item a:hover { background: var(--awa-red-dark); color: var(--awa-text-on-primary); } body .page-wrapper .pages .item.current strong { background: var(--awa-red); color: var(--awa-text-on-primary); } /* =========================================== LOADING / SPINNER =========================================== */ body .page-wrapper .loading-mask { background: rgba(255, 255, 255, 0.8); } body .page-wrapper .loader > img { display: none; } body .page-wrapper .loader::after { content: ''; width: 40px; height: 40px; border: 3px solid var(--awa-gray-200); border-top-color: var(--awa-red); border-radius: 50%; animation: awa-spinner 0.8s linear infinite; display: block; margin: 0 auto; } @keyframes awa-spinner { to { transform: rotate(360deg); } } /* =========================================== SKELETON LOADING PLACEHOLDERS =========================================== */ @keyframes awa-skeleton { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* R11-12: prefixo para especificidade */ body .page-wrapper .awa-skeleton { background: linear-gradient(90deg, var(--awa-gray-100) 25%, var(--awa-gray-200) 50%, var(--awa-gray-100) 75%); background-size: 200% 100%; animation: awa-skeleton 1.5s ease infinite; border-radius: var(--awa-radius-sm); } /* =========================================== TABELAS RESPONSIVAS =========================================== */ body .page-wrapper .table-wrapper { overflow-x: auto; max-width: 100%; position: relative; } body .page-wrapper table { max-width: 100%; } /* =========================================== MODAL / POPUP =========================================== */ body .page-wrapper .modal-popup .modal-inner-wrap { border-radius: var(--awa-radius); box-shadow: var(--awa-shadow-lg); overflow: hidden; } body .page-wrapper .modal-popup .modal-header { padding: var(--awa-space-5) var(--awa-space-6); border-bottom: 1px solid var(--awa-gray-200); } body .page-wrapper .modal-popup .modal-content { padding: var(--awa-space-6); } body .page-wrapper .modal-popup .modal-footer { padding: var(--awa-space-4) var(--awa-space-6); border-top: 1px solid var(--awa-gray-200); background: var(--awa-gray-50); } /* =========================================== PROGRESS BAR (checkout steps) =========================================== */ body .page-wrapper .opc-progress-bar-item._active .opc-progress-bar-item-element { background: var(--awa-red); } body .page-wrapper .opc-progress-bar-item._complete .opc-progress-bar-item-element { background: var(--awa-success); } /* =========================================== SWATCH DE COR =========================================== */ body .page-wrapper .swatch-option { min-width: 32px; height: 32px; border-radius: var(--awa-radius-sm); /* R13: era 6px hardcoded */ border: 2px solid var(--awa-gray-200); cursor: pointer; transition: transform var(--awa-transition-fast), border-color var(--awa-transition-fast), box-shadow var(--awa-transition-fast); /* R13: era 'all' */ } body .page-wrapper .swatch-option:hover { transform: scale(1.1); border-color: var(--awa-gray-400); } body .page-wrapper .swatch-option.selected { border-color: var(--awa-red); box-shadow: 0 0 0 3px var(--awa-red-light); } /* =========================================== IMAGENS ? CARREGAMENTO SUAVE =========================================== */ body .page-wrapper .product-item img, body .page-wrapper .item-product img, body .page-wrapper .catalog-product-view .gallery img { transition: opacity var(--awa-transition); /* R12-05 */ } body .page-wrapper img[loading="lazy"]:not(.awa-loaded) { opacity: 0; animation: awa-lazy-fallback 0s 3s forwards; } body .page-wrapper img[loading="lazy"].awa-loaded { animation: awa-fade-in 0.4s ease forwards; } @keyframes awa-lazy-fallback { to { opacity: 1; } } @keyframes awa-fade-in { from { opacity: 0; } to { opacity: 1; } } /* =========================================== UTILIT�RIOS =========================================== */ /* Screen reader only */ .sr-text, .awa-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; /* R18-12: modern replacement for deprecated clip */ white-space: nowrap !important; border: 0 !important; } /* =========================================== ACESSIBILIDADE ? FOCO VIS�VEL GLOBAL =========================================== */ body .page-wrapper *:focus-visible { outline: 2px solid var(--awa-red); outline-offset: 2px; } /* Checkout usa estilos de valida�?o pr�prios */ body .page-wrapper .checkout-container *:focus-visible { outline: revert; outline-offset: revert; } /* Foco com mouse n?o mostra outline */ body .page-wrapper *:focus:not(:focus-visible) { outline: none; } /* =========================================== REDUCED MOTION =========================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body .page-wrapper *, body .page-wrapper *::before, body .page-wrapper *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } /* VB-04: floating buttons fora de .page-wrapper */ #awaBackToTop, .awa-whatsapp-float, .awa-nav-overlay { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } .awa-whatsapp-float:hover { transform: none !important; } /* R15-05: desabilitar hover transforms que causam motion residual */ body .page-wrapper .the_blog .post-item:hover, body .page-wrapper .blog-post-item:hover, body .page-wrapper .cart-empty .action.continue:hover, body .page-wrapper .footer-social a:hover, body .page-wrapper .social-block a:hover, body .page-wrapper .aw-footer-social a:hover, body .page-wrapper .page-footer .social-icons a:hover, body .page-wrapper .item-deal-product:hover { transform: none; } } /* =========================================== TOUCH DEVICES ? Hover safety net (BP-32) Previne "stuck hover" em telas touch onde :hover fires on tap e persiste visualmente. Chrome 108+, Safari 17+, Firefox 113+ (~96%) =========================================== */ @media (hover: none) and (pointer: coarse) { /* Cancelar transforms de hover em TODOS os interativos */ body .page-wrapper a:hover, body .page-wrapper button:hover, body .page-wrapper [role="button"]:hover, body .page-wrapper .action:hover, body .page-wrapper .swatch-option:hover { transform: none; } /* Box-shadow hover ? shadow base (evita "glow" preso) */ body .page-wrapper a:hover, body .page-wrapper button:hover, body .page-wrapper [role="button"]:hover { box-shadow: var(--awa-shadow); } } /* =========================================== HIGH CONTRAST =========================================== */ @media (prefers-contrast: more), (forced-colors: active) { :root { /* Footer */ --footer-text: var(--awa-cons-c78); --footer-border: rgba(255, 255, 255, 0.4); /* R15-04: Main content ? refor�ar bordas e texto secund�rio */ --awa-gray-200: var(--awa-cons-c87); /* bordas mais vis�veis */ --awa-gray-300: var(--awa-cons-c86); --awa-gray-400: var(--awa-cons-c84); --awa-gray-500: #444; /* texto secund�rio mais escuro */ --awa-gray-700: #222; --awa-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); --awa-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.25); } } /* =========================================== REDUCED TRANSPARENCY (BP-31) Chrome 118+, Safari 17.5+ ? degrada silenciosamente =========================================== */ @media (prefers-reduced-transparency: reduce) { :root { /* Substituir semi-transpar?ncias por s�lidos */ --awa-red-light: color-mix(in srgb, var(--awa-red) 16%, var(--awa-bg-surface)); --awa-red-extra-light: color-mix(in srgb, var(--awa-red) 8%, var(--awa-bg-surface)); --awa-success-light: color-mix(in srgb, var(--awa-success) 12%, var(--awa-bg-surface)); --awa-info-light: color-mix(in srgb, var(--awa-info) 12%, var(--awa-bg-surface)); --awa-warning-light: color-mix(in srgb, var(--awa-warning) 12%, var(--awa-bg-surface)); --awa-danger-light: color-mix(in srgb, var(--awa-danger) 12%, var(--awa-bg-surface)); } /* Backdrop blur ? s�lido */ body .page-wrapper .awa-quickview-overlay { backdrop-filter: none; background: var(--awa-bg-surface); } /* Muted text ? garante contraste m�nimo */ body .page-wrapper [class*="muted"], body .page-wrapper .price-label, body .page-wrapper .old-price .price { opacity: 1; } } /* =========================================== NO JAVASCRIPT ? Fallback (BP-46) Chrome 120+, Firefox 113+ (~85%) Degrada silenciosamente em navegadores sem suporte. =========================================== */ @media (scripting: none) { /* Carousels sem JS: mostrar todos os itens em grid */ body .page-wrapper .owl-carousel { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--awa-grid-gap); overflow: visible; } /* Lazy images sem JS: for�ar visibilidade */ body .page-wrapper img[loading="lazy"] { opacity: 1; } /* Elementos JS-dependentes: ocultar */ body .page-wrapper .loading-mask, body .newsletterpopup, #awaBackToTop, .awa-whatsapp-float, .awa-nav-overlay { display: none; } /* Accordion / details: mostrar conte�do por padr?o sem JS */ body .page-wrapper details > *:not(summary) { display: block; } } /* =========================================== PRINT =========================================== */ @media print { body .page-wrapper .page-footer, body .page-wrapper .page-header, body .page-wrapper .nav-sections, .whatsapp-float, .awa-whatsapp-float, .back-to-top, .scroll-to-top, #awaBackToTop, .awa-nav-overlay, .awa-nav-close, .awa-filter-toggle, body .newsletterpopup, body .page-wrapper .loading-mask, body .page-wrapper .item-product .actions-secondary, body .page-wrapper .item-product .quickview-link, body .page-wrapper .owl-carousel .owl-nav, body .page-wrapper .owl-carousel .owl-dots { display: none !important; } } /* =========================================== RESPONSIVO BASE =========================================== */ @media (width <= 768px) { body .page-wrapper .page-main, body .page-wrapper .panel.header, body .page-wrapper .header.content, body .page-wrapper .footer.content, body .page-wrapper .footer-primary, body .page-wrapper .footer-columns, body .page-wrapper .footer-container .rowFlex { padding-left: var(--awa-space-3-75); /* P2-fluid: era 15px */ padding-right: var(--awa-space-3-75); /* P2-fluid: era 15px */ } } /* =========================================== HIDDEN LEAK (usado pelo JS hideMagentoCode) =========================================== */ .awa-hidden-leak { display: none !important; } /* Classe para pre�os "Consulte" (JS fixPrices) ? body .page-wrapper .price (0,3,1) supera tema */ body .page-wrapper .price.awa-price-consulte { color: var(--awa-gray-500); /* R11-02: token */ font-size: var(--awa-text-md); font-weight: normal; } /* Skip-to-main link (JS addSkipToMain + Magento nativo) */ .awa-skip-to-main, body .page-wrapper .skip-link, body .page-wrapper a[href="#maincontent"], body .page-wrapper .action.skip { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: var(--awa-z-skip); /* BP-16: era 999999 */ } .awa-skip-to-main:focus, body .page-wrapper .skip-link:focus, body .page-wrapper a[href="#maincontent"]:focus { position: fixed; top: 0; left: 0; width: auto; height: auto; padding: var(--awa-space-3) var(--awa-space-6); background: var(--awa-red); color: var(--awa-text-on-primary); font-size: var(--awa-text-md); font-weight: var(--awa-weight-semibold); text-decoration: none; outline: 2px solid var(--awa-text-on-primary); } /* R10-05 + BP-43: Scroll-margin para ancoras sob sticky header */ #maincontent, body .page-wrapper .block, body .page-wrapper .widget, body .page-wrapper [id]:not(input, select, textarea, button) { scroll-margin-top: var(--awa-header-height, 0); } /* =========================================== FLOATING BUTTONS (Back-to-top + WhatsApp) Fonte �nica de estilos ? JS apenas cria/toggle. =========================================== */ #awaBackToTop { position: fixed; bottom: 95px; right: 25px; width: 45px; height: 45px; background: var(--awa-dark); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; color: var(--awa-text-on-dark); font-size: var(--awa-text-xl); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity var(--awa-transition), visibility var(--awa-transition), background var(--awa-transition), border-color var(--awa-transition); /* R13: era 'all' */ z-index: var(--awa-z-fixed); /* BP-16: era 9998 */ display: flex; align-items: center; justify-content: center; will-change: opacity, visibility; /* BP-47: hint p/ composite layer ? toggled by JS */ } #awaBackToTop:hover { background: var(--awa-red); border-color: var(--awa-red); } #awaBackToTop:focus-visible { outline: 2px solid var(--awa-text-on-primary); /* BP-15: era var(--awa-cons-c78) hardcoded */ outline-offset: 2px; background: var(--awa-red); } #awaBackToTop.visible { opacity: 1; visibility: visible; } .awa-whatsapp-float { position: fixed; bottom: 25px; right: 25px; width: 60px; height: 60px; background: var(--awa-red); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--awa-text-on-primary); text-decoration: none; box-shadow: 0 4px 15px rgba(183, 51, 55, 0.28); z-index: var(--awa-z-float); /* BP-16: era 9999 */ transition: transform var(--awa-transition), box-shadow var(--awa-transition); /* R13: era 'all' */ will-change: transform; /* BP-47: hint p/ composite layer ? hover scale animation */ } .awa-whatsapp-float:hover { transform: scale(1.1); background: var(--awa-red-dark); box-shadow: 0 6px 20px rgba(142, 38, 41, 0.34); } .awa-whatsapp-float:focus-visible { outline: 2px solid var(--awa-text-on-primary); /* BP-15: era var(--awa-cons-c78) hardcoded */ outline-offset: 2px; box-shadow: 0 0 0 4px var(--awa-red-light); } /* =========================================== RESPONSIVO ? BREAKPOINTS AYO-ALIGNED AYO usa: 1399, 1199, 991, 840, 767, 680, 640, 560, 480, 479, 414, 375, 320 =========================================== */ /* --- XL Desktop ? LB-07: transi�?o suave para evitar salto de 200px no container --- */ /* 1399-1599px: container 1400px, ?1600px: container 1600px */ @media (width >= 1399px) and (width <= 1599px) { :root { --awa-container: 1400px; --footer-container: 1400px; } } @media (width >= 1600px) { :root { --awa-container: 1600px; --footer-container: 1600px; } } /* --- Desktop (?1399px) ? newsletter 50/50 --- */ @media (width <= 1399px) { :root { --awa-container: 1200px; --footer-container: 1200px; } } /* --- Tablet landscape (?1199px) --- */ @media (width <= 1199px) { :root { --awa-container: 100%; --footer-container: 100%; } body .page-wrapper .page-main { padding: 0 var(--awa-space-3-75); /* P2-fluid: era 0 15px */ } } /* --- Tablet (?991px) --- */ @media (width <= 991px) { :root { --awa-gap: 20px; --awa-grid-gap: 20px; } } /* --- Mobile (?767px) --- */ @media (width <= 767px) { :root { --awa-gap: 16px; --awa-grid-gap: 16px; } body .page-wrapper .page-main { padding: 0 var(--awa-space-3-75); /* P2-fluid: era 0 15px */ } /* Breadcrumbs mobile */ body .page-wrapper .breadcrumbs { padding: var(--awa-space-2) var(--awa-space-4); font-size: var(--awa-text-xs); } /* Bot?es compactos */ body .page-wrapper .action.primary, body .page-wrapper button.primary, body .page-wrapper .btn-primary { padding: var(--awa-space-3) var(--awa-space-5); min-height: var(--awa-btn-height-sm); font-size: var(--awa-text-base); } /* Formul�rios compactos */ 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 { padding: var(--awa-space-3) var(--awa-space-3); min-height: var(--awa-input-height-sm); font-size: var(--awa-text-base); } } /* --- Mobile SM (?480px) --- */ @media (width <= 480px) { :root { --awa-gap: 12px; --awa-grid-gap: 12px; --awa-radius: 8px; } /* Pagina�?o compacta */ body .page-wrapper .pages .item a, body .page-wrapper .pages .item > strong { min-width: 36px; height: 36px; font-size: var(--awa-text-sm); } /* Floating buttons reposicionados */ #awaBackToTop { width: 40px; height: 40px; right: 15px; bottom: 80px; font-size: var(--awa-text-lg); } .awa-whatsapp-float { width: 50px; height: 50px; right: 15px; bottom: 15px; } .awa-whatsapp-float svg { width: 24px; height: 24px; } /* Modal responsivo */ body .page-wrapper .modal-popup .modal-inner-wrap { margin: var(--awa-space-3); border-radius: var(--awa-radius-sm); max-width: calc(100vw - 20px); } } /* --- Mobile XS (?375px) --- */ @media (width <= 375px) { :root { --awa-font-size: 15px; } body .page-wrapper .page-main { padding: 0 var(--awa-space-3); /* P2-fluid: era 0 12px */ } body .page-wrapper .breadcrumbs { padding: var(--awa-space-1) var(--awa-space-3); font-size: var(--awa-text-xs); /* 11px ? xs */ } /* R15-08: truncar breadcrumbs longos em mobile XS */ body .page-wrapper .breadcrumbs a { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; } body .page-wrapper .pages .item a, body .page-wrapper .pages .item > strong { min-width: 32px; height: 32px; font-size: var(--awa-text-xs); } } /* --- Mobile XXS (?320px) --- */ @media (width <= 320px) { :root { --awa-font-size: 14px; --awa-gap: 10px; --awa-grid-gap: 10px; } body .page-wrapper .page-main { padding: 0 var(--awa-space-2-5); /* P2-fluid: era 0 10px */ } /* Floating buttons m�nimos */ #awaBackToTop { width: 36px; height: 36px; right: 10px; bottom: 70px; } .awa-whatsapp-float { width: 44px; height: 44px; right: 10px; bottom: 10px; } } /* ============================================================ �CONES ? ALINHAMENTO VERTICAL ============================================================ */ body .page-wrapper .fa, body .page-wrapper .fas, body .page-wrapper .far, body .page-wrapper .fal, body .page-wrapper .fab, body .page-wrapper [class^="icon-"], body .page-wrapper [class*=" icon-"] { vertical-align: middle; line-height: 1; } /* Cart qty +/- button reset (a11y: changed to