/* ==========================================================================
   Play Brinquedos / Brother Kids - Modern Header & Theme Design System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root {
    --font_family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Brand Colors */
    --color_primary: #360B8F;
    --color_primary_hover: #29076f;
    --color_primary_light: #f0ebf9;
    --color_secondary: #fb1058;
    --color_secondary_hover: #e0064a;
    
    /* Header Specific */
    --color_top_header_bg: #360B8F;
    --color_top_header_font: #ffffff;
    --color_header_bg: #ffffff;
    --color_header_highlight: #360B8F;
    --color_header_second_font: #fb1058;
    
    /* Text & Neutral Colors */
    --color_text_global: #333333;
    --color_text_muted: #71717a;
    --color_text_icon_head: #27272a;
    --color_border: #e4e4e7;
    --color_bg_light: #f8fafc;
    
    /* Status & Social Colors */
    --color_whats_bg: #eefbef;
    --color_whats_text: #25d366;
    --cor_texto_footer: #3f3f46;
    
    /* Layout */
    --container_max_width: 1440px;
    --header_shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
    --dropdown_shadow: 0 14px 38px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.06);
    --transition_speed: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font_family);
    color: var(--color_text_global);
    background-color: #f8fafc;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img, video, canvas, svg {
    max-width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition_speed);
}

ul {
    list-style: none;
}

button {
    font-family: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    background: transparent;
}

input {
    font-family: inherit;
    outline: none;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.relative {
    position: relative;
}

.container {
    width: 100%;
    max-width: var(--container_max_width);
    margin: 0 auto;
    padding: 0 24px;
}

.tray-hide {
    display: none !important;
}

/* ==========================================================================
   Header Component
   ========================================================================== */
.header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #ffffff;
    box-shadow: var(--header_shadow);
}

/* Top Announcement Bar */
.top-header {
    background: linear-gradient(90deg, #2b0873 0%, #360B8F 50%, #4a15ad 100%);
    text-align: center;
    padding: 10px 16px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.top-header a {
    color: var(--color_top_header_font);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    transition: transform var(--transition_speed), opacity var(--transition_speed);
}

.top-header-divider {
    opacity: 0.45;
    font-size: 13px;
    margin: 0 4px;
}

.top-header a:hover {
    opacity: 0.95;
    transform: scale(1.01);
}

.top-header a::after {
    content: 'Saiba mais →';
    display: inline-block;
    margin-left: 14px;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
    transition: background var(--transition_speed);
}

.top-header a:hover::after {
    background: rgba(255, 255, 255, 0.35);
}

/* Main Navigation Bar (.bg) */
.bg {
    background: #ffffff;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.line {
    gap: 20px;
    width: 100%;
}

/* Mobile Hamburger Menu */
.header-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    cursor: pointer;
    padding: 1px 0;
    flex-shrink: 0;
    border-radius: 4px;
    transition: transform var(--transition_speed);
}

.header-menu:hover {
    transform: scale(1.05);
}

.header-menu div {
    width: 100%;
    height: 3px;
    background-color: var(--color_primary);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: transform var(--transition_speed);
}

.logo:hover {
    transform: scale(1.03);
}

.logo img {
    width: auto;
    height: 64px;
    max-height: 72px;
    max-width: 220px;
    object-fit: contain;
    display: block;
}

.title-store {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Search Wrapper */
.header-search-wrapper {
    position: relative;
    flex: 1;
    max-width: 460px;
    margin: 0 16px;
    z-index: 30;
}

.input-search {
    width: 100%;
    height: 50px;
    padding: 0 54px 0 20px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--color_text_global);
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    transition: all var(--transition_speed);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.input-search::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.input-search:focus {
    background: #ffffff;
    border-color: var(--color_primary);
    box-shadow: 0 0 0 4px rgba(54, 11, 143, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
}

.button-search {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background var(--transition_speed), transform var(--transition_speed);
}

.button-search:hover {
    background: var(--color_primary_light);
    transform: translateY(-50%) scale(1.05);
}

.icon.icon-search {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--color_primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.71 20.29l-5.4-5.4A7.9 7.9 0 0 0 18 10a8 8 0 1 0-8 8 7.9 7.9 0 0 0 4.89-1.69l5.4 5.4a1 1 0 0 0 1.42-1.42zM4 10a6 6 0 1 1 6 6 6 6 0 0 1-6-6z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.71 20.29l-5.4-5.4A7.9 7.9 0 0 0 18 10a8 8 0 1 0-8 8 7.9 7.9 0 0 0 4.89-1.69l5.4 5.4a1 1 0 0 0 1.42-1.42zM4 10a6 6 0 1 1 6 6 6 6 0 0 1-6-6z'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: background-color var(--transition_speed);
}

.button-search:hover .icon-search {
    background-color: var(--color_secondary);
}

.suggestion {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: var(--dropdown_shadow);
    border: 1px solid #edf2f7;
    overflow: hidden;
    z-index: 100;
}

.suggestion.is-hidden {
    display: none;
}

/* Options Wrapper */
.options-wrapper {
    display: flex;
    align-items: center;
    gap: 22px;
}

/* ==========================================================================
   Header Dropdowns Common Styling
   ========================================================================== */
.dropHelp,
.orderList,
.account {
    position: relative;
    cursor: pointer;
    padding: 8px 6px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    transition: background-color var(--transition_speed);
}

.dropHelp:hover,
.orderList:hover,
.account:hover {
    background-color: #faf5ff;
}

/* Hover bridge so dropdown does not close when moving cursor */
.dropHelp::after,
.orderList::after,
.account::after {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 14px;
}

/* Dropdown Animation container */
.dropHelp ul,
.orderList ul,
.account .dropdown-account {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: #ffffff;
    border-radius: 14px;
    box-shadow: var(--dropdown_shadow);
    border: 1px solid #f1f5f9;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition_speed), transform var(--transition_speed), visibility var(--transition_speed);
    z-index: 1050;
    pointer-events: none;
}

.dropHelp:hover ul,
.orderList:hover ul,
.account:hover .dropdown-account {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* ==========================================================================
   Atendimento (dropHelp)
   ========================================================================== */
.dropHelp > svg {
    width: 25px;
    height: 25px;
    fill: var(--color_primary);
    margin-right: 8px;
    flex-shrink: 0;
    transition: transform var(--transition_speed);
}

.dropHelp:hover > svg {
    transform: rotate(-10deg) scale(1.08);
}

.dropHelp > p {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color_text_icon_head);
    white-space: nowrap;
}

.dropHelp ul {
    min-width: 290px;
    padding: 20px;
}

.dropHelp .box-contact {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 0;
}

.dropHelp .box-contact i {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--color_primary_light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dropHelp .box-contact i svg {
    width: 19px;
    height: 19px;
    fill: var(--color_primary);
}

.dropHelp .contact-title {
    font-size: 12px;
    color: var(--color_text_muted);
    font-weight: 500;
    margin-bottom: 2px;
}

.dropHelp .box-contact p {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.dropHelp .box-contact.contact-whats {
    display: block;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    margin: 12px 0;
    padding: 14px 0;
}

.dropHelp .wpp-title {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #16a34a;
    margin-bottom: 8px;
}

.dropHelp .contact-whats .contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dropHelp .contact-whats i {
    background: #dcfce7;
}

.dropHelp .contact-whats i svg {
    width: 22px;
    height: 22px;
    fill: #16a34a;
}

.dropHelp .contact-whats a {
    color: #0f172a;
    font-weight: 700;
    font-size: 14px;
    transition: color var(--transition_speed);
}

.dropHelp .contact-whats a:hover {
    color: #16a34a;
}

.dropHelp .contact-mail {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 0;
}

.dropHelp .contact-mail i {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--color_primary_light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dropHelp .contact-mail i svg {
    width: 20px;
    height: 20px;
    fill: var(--color_primary);
}

.dropHelp .contact-mail a p {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    word-break: break-all;
}

.dropHelp .store-opening-hours {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
}

.dropHelp .store-opening-hours span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    margin-bottom: 3px;
}

.dropHelp .store-opening-hours p {
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
}

/* ==========================================================================
   Rastrear Pedido (orderList)
   ========================================================================== */
.orderList > svg {
    width: 28px;
    height: 28px;
    fill: var(--color_primary);
    margin-right: 8px;
    flex-shrink: 0;
    transition: transform var(--transition_speed);
}

.orderList:hover > svg {
    transform: translateX(2px);
}

.orderList > p {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color_text_icon_head);
    white-space: nowrap;
}

.orderList ul {
    min-width: 290px;
    padding: 20px;
}

.orderList ul > p {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color_primary);
    margin-bottom: 12px;
}

.orderList .tracking-number {
    position: relative;
    width: 100%;
}

.orderList .tracking-number input {
    width: 100%;
    height: 44px;
    padding: 0 46px 0 14px;
    font-size: 13px;
    font-weight: 500;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    transition: all var(--transition_speed);
}

.orderList .tracking-number input:focus {
    background: #ffffff;
    border-color: var(--color_primary);
    box-shadow: 0 0 0 3px rgba(54, 11, 143, 0.12);
}

.orderList .tracking-search {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background var(--transition_speed);
}

.orderList .tracking-search:hover {
    background: var(--color_primary_light);
}

.orderList .tracking-search svg {
    width: 18px;
    height: 18px;
    fill: var(--color_primary);
}

/* ==========================================================================
   Minha Conta (account)
   ========================================================================== */
.account .user-icon {
    width: 25px;
    height: 25px;
    fill: var(--color_primary);
    margin-right: 8px;
    flex-shrink: 0;
    transition: transform var(--transition_speed);
}

.account:hover .user-icon {
    transform: scale(1.08);
}

.account span {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color_text_icon_head);
    white-space: nowrap;
}

.account .dropdown-account {
    right: 0;
    left: auto;
    transform: translateY(8px);
    min-width: 220px;
    padding: 18px;
    text-align: left;
}

.account:hover .dropdown-account {
    transform: translateY(0);
}

.account .account-user {
    display: block;
    font-size: 13.5px;
    color: #334155;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

.account .account-link {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    padding: 7px 0;
    transition: color var(--transition_speed), transform var(--transition_speed);
}

.account .account-link:hover {
    color: var(--color_primary);
    transform: translateX(4px);
}

.account .btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    margin: 12px 0 8px;
    background: linear-gradient(135deg, var(--color_primary) 0%, #29076f 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(54, 11, 143, 0.3);
    transition: all var(--transition_speed);
}

.account .btn-login:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(54, 11, 143, 0.45);
    opacity: 0.95;
}

.account .register {
    font-size: 12px;
    color: var(--color_secondary);
    text-align: center;
    display: block;
    font-weight: 600;
    margin-top: 4px;
}

.account .register:hover {
    text-decoration: underline;
}

.account .btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px;
    margin-top: 10px;
    background: #f1f5f9;
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    transition: background var(--transition_speed);
}

.account .btn-logout:hover {
    background: #fee2e2;
}

/* ==========================================================================
   Carrinho (.cart-toggle)
   ========================================================================== */
.cart-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #faf5ff;
    border: 1.5px solid #ebd8fd;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition_speed);
}

.cart-toggle:hover {
    background: var(--color_primary);
    border-color: var(--color_primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(54, 11, 143, 0.28);
}

.cart-toggle svg {
    width: 24px;
    height: 24px;
    fill: var(--color_primary);
    transition: fill var(--transition_speed);
}

.cart-toggle:hover svg {
    fill: #ffffff;
}

.cart-toggle .cart-quantity {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--color_secondary);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(251, 16, 88, 0.45);
    border: 2px solid #ffffff;
    transition: transform var(--transition_speed);
}

.cart-toggle:hover .cart-quantity {
    transform: scale(1.1);
}

/* ==========================================================================
   Category Navigation Bar (.nav)
   ========================================================================== */
.nav-categories {
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    position: relative;
    width: 100%;
    z-index: 50;
}

.nav-categories .container,
.nav-categories-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    gap: 8px !important;
    padding: 0 16px !important;
    width: 100% !important;
    max-width: var(--container_max_width) !important;
    margin: 0 auto !important;
}

.category-scroll-wrapper {
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 0;
    display: flex;
    align-items: center;
    position: relative;
}

.category-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.nav-categories .category-list {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: max-content;
}

/* Quando todos os itens cabem na tela sem rolagem */
.category-scroll-wrapper.is-centered .category-list {
    margin: 0 auto;
    justify-content: center;
}

.nav-cat-arrow {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 5;
    padding: 0;
    line-height: 1;
}

.nav-cat-arrow:hover {
    background: var(--color_primary);
    color: #ffffff;
    border-color: var(--color_primary);
    box-shadow: 0 4px 12px rgba(54, 11, 143, 0.25);
    transform: scale(1.08);
}

.nav-cat-arrow.is-hidden {
    display: none !important;
}

.category-item {
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
}

.category-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    border-radius: 8px;
    transition: all var(--transition_speed);
    text-decoration: none;
    user-select: none;
    background: transparent;
}

.category-link:hover,
.category-item.active .category-link {
    color: var(--color_primary);
    background: var(--color_primary_light);
}

.category-item.highlight .category-link {
    color: var(--color_secondary);
    font-weight: 700;
    background: #fff0f5;
}

.category-item.highlight .category-link:hover {
    background: var(--color_secondary);
    color: #ffffff;
}

.category-link svg {
    flex-shrink: 0;
}

/* ==========================================================================
   Mobile Drawer & Overlay
   ========================================================================== */
.menu-mobile-drawer {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100vh;
    background: #ffffff;
    z-index: 2000;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.menu-mobile-drawer.active {
    left: 0;
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: var(--color_primary);
    color: #ffffff;
}

.drawer-header h3 {
    font-size: 16px;
    font-weight: 700;
}

.drawer-close {
    font-size: 24px;
    color: #ffffff;
    cursor: pointer;
    line-height: 1;
}

.drawer-body {
    padding: 16px;
    flex: 1;
}

.drawer-nav-list {
    margin-bottom: 24px;
}

.drawer-nav-list li a {
    display: block;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    border-radius: 8px;
    transition: background var(--transition_speed);
}

.drawer-nav-list li a:hover {
    background: var(--color_primary_light);
    color: var(--color_primary);
}

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1200px) {
    .orderList > p,
    .dropHelp > p,
    .account > span {
        display: none;
    }
    
    .dropHelp > svg,
    .orderList > svg,
    .account .user-icon {
        margin-right: 0;
    }

    .header-search-wrapper {
        max-width: 360px;
    }
}

@media (max-width: 991px) {
    .header-menu {
        display: flex;
    }
    
    .orderList.hidden-sm {
        display: none;
    }
    
    .header-search-wrapper {
        order: 3;
        width: 100%;
        max-width: 100%;
        margin: 12px 0 0 0;
    }
    
    .line {
        flex-wrap: wrap;
    }
    
    .options-wrapper {
        gap: 12px;
    }
    
    .logo img {
        height: 48px;
        max-height: 52px;
    }
    
    .top-header {
        font-size: 11px;
        padding: 8px 12px;
    }
    
    .top-header a::after {
        display: none;
    }
}

@media (max-width: 576px) {
    .container {
        padding: 0 16px;
    }
    
    .options-wrapper {
        gap: 8px;
    }
    
    .cart-toggle {
        width: 40px;
        height: 40px;
    }
    
    .cart-toggle svg {
        width: 20px;
        height: 20px;
    }
}

/* ==========================================================================
   Hero Showcase Banner (Efeito 3D Pop-Out)
   ========================================================================== */
.hero-banner {
    background: linear-gradient(135deg, #360B8F 0%, #1f045c 100%);
    border-radius: 24px;
    padding: 56px 44px 56px 52px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    box-shadow: 0 20px 48px rgba(54, 11, 143, 0.35);
    position: relative;
    overflow: visible;
    margin-top: 36px;
    margin-bottom: 52px;
}

.hero-banner-content {
    flex: 1;
    max-width: 580px;
    z-index: 2;
}

.hero-banner-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    backdrop-filter: blur(4px);
}

.hero-banner-title {
    font-size: 2.35rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 14px;
    color: #ffffff;
}

.hero-banner-desc {
    font-size: 16px;
    opacity: 0.95;
    line-height: 1.6;
    margin-bottom: 24px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
}

.hero-banner-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fb1058;
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 6px 18px rgba(251, 16, 88, 0.4);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}

.hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(251, 16, 88, 0.55);
    color: #ffffff;
}

.hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 14px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    backdrop-filter: blur(4px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}

.hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    color: #ffffff;
}

/* Imagem 3D Pop-Out */
.hero-banner-image-wrap {
    flex: 1.15;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    position: relative;
    max-width: 600px;
    margin-top: -65px;
    margin-bottom: -50px;
    margin-right: -30px;
    pointer-events: none;
}

.hero-banner-img {
    width: 100%;
    max-width: 560px;
    height: auto;
    max-height: 490px;
    object-fit: contain;
    filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.45)) drop-shadow(0 10px 18px rgba(20, 2, 60, 0.35));
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center bottom;
}

.hero-banner:hover .hero-banner-img {
    transform: scale(1.05) translateY(-8px);
}

.hero-banner-glow {
    position: absolute;
    right: 20px;
    bottom: -30px;
    width: 440px;
    height: 440px;
    background: radial-gradient(circle, rgba(251, 16, 88, 0.38) 0%, rgba(54, 11, 143, 0.2) 50%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

/* ==========================================================================
   Faixa de Vantagens (Features Grid) - 4 Colunas Lado a Lado
   ========================================================================== */
.features-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin-top: 24px !important;
    margin-bottom: 36px !important;
    width: 100% !important;
}

@media (max-width: 1200px) {
    .hero-banner {
        padding: 48px 36px;
    }

    .hero-banner-image-wrap {
        margin-top: -50px;
        margin-bottom: -40px;
        margin-right: -15px;
        max-width: 480px;
    }

    .hero-banner-img {
        max-width: 460px;
        max-height: 420px;
    }
}

@media (max-width: 991px) {
    .hero-banner {
        flex-direction: column;
        padding: 44px 28px 32px;
        text-align: center;
        gap: 32px;
        margin-top: 20px;
        margin-bottom: 40px;
    }

    .hero-banner-content {
        max-width: 100%;
        margin: 0 auto;
    }

    .hero-banner-title {
        font-size: 1.95rem;
    }

    .hero-banner-buttons {
        justify-content: center;
    }

    .hero-banner-image-wrap {
        max-width: 420px;
        width: 100%;
        margin: -15px auto -35px;
    }

    .hero-banner-img {
        max-width: 400px;
        max-height: 360px;
    }
}

@media (max-width: 576px) {
    .hero-banner {
        padding: 32px 20px 24px;
        border-radius: 18px;
        margin-top: 15px;
        margin-bottom: 30px;
    }

    .hero-banner-title {
        font-size: 1.6rem;
    }

    .hero-banner-desc {
        font-size: 14px;
    }

    .hero-banner-buttons {
        flex-direction: column;
        width: 100%;
    }

    .hero-btn-primary, .hero-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .hero-banner-image-wrap {
        max-width: 320px;
        margin: -10px auto -25px;
    }

    .hero-banner-img {
        max-width: 300px;
        max-height: 280px;
    }
}

/* ==========================================================================
   Showcase / Vitrine de Produtos (Lançamentos)
   ========================================================================== */
.section-showcase {
    margin-top: 56px;
    margin-bottom: 64px;
}

.section-showcase .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 2px solid #eef2f6;
    position: relative;
}

.section-showcase .title-section {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
    position: relative;
    padding-left: 16px;
}

.section-showcase .title-section::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 28px;
    background: linear-gradient(180deg, var(--color_primary) 0%, var(--color_secondary) 100%);
    border-radius: 4px;
}

.swiper-container {
    position: relative;
    width: 100%;
}

/* Lista de Produtos (Grid / Slider Fluido) */
.list-product {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 10px 4px 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.list-product::-webkit-scrollbar {
    height: 6px;
}

.list-product::-webkit-scrollbar-track {
    background: transparent;
}

.list-product::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 6px;
}

.list-product::-webkit-scrollbar-thumb:hover {
    background: var(--color_primary);
}

.list-product .item {
    flex: 0 0 310px;
    max-width: 310px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}

/* Card do Produto */
.product {
    background: #ffffff;
    border-radius: 18px;
    border: 1.5px solid #eef2f6;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.product:hover {
    transform: translateY(-6px);
    border-color: #d8b4fe;
    box-shadow: 0 16px 36px rgba(54, 11, 143, 0.12);
}

/* Imagem e Transição de Hover */
.product .image {
    position: relative;
    width: 100%;
    height: 270px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product .space-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.product .primary-image,
.product .hover-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.product .hover-image {
    position: absolute;
    top: 5%;
    left: 5%;
    opacity: 0;
    pointer-events: none;
}

.product:hover .hover-image {
    opacity: 1;
    transform: scale(1.06);
}

.product:hover .primary-image {
    opacity: 0;
    transform: scale(0.95);
}

/* Tags de Produtos */
.product-tags {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 3;
    pointer-events: none;
}

.product-tags .tag {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.product-tags .tag.new {
    background: var(--color_primary);
}

.product-tags .tag.featured {
    background: #fb1058;
}

.tag-circle.free-shipping {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #10b981;
    color: #ffffff;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.tag-circle.free-shipping svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.tag-circle.free-shipping .banner-progressive-discounts {
    display: none;
}

/* Informações do Produto */
.product-info {
    padding: 16px 18px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.product-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
    min-height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
    transition: color 0.2s;
}

.product:hover .product-name {
    color: var(--color_primary);
}

/* Avaliação por Estrelas */
.product-rating {
    display: flex;
    gap: 3px;
    align-items: center;
    margin-bottom: 12px;
}

.product-rating .icon {
    width: 13px;
    height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59e0b'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Preços */
.product-price {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.product-has-variants {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
}

.product-price .current-price {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    display: block;
    line-height: 1.2;
}

.product-installments {
    display: block;
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.5;
    margin-top: 2px;
}

.preco-avista {
    font-size: 15px;
    font-weight: 800;
    color: #15803d;
}

.txt-avista, .txt-com-desconto {
    color: #15803d;
    font-weight: 600;
}

.txt-forma-pagamento {
    color: #64748b;
    font-weight: 500;
}

.txt-corparcelas .color {
    font-weight: 800;
    color: #0f172a;
}

.operadora {
    color: #15803d;
    font-weight: 700;
    background: #dcfce7;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
}

/* Ações (Quantidade + Comprar + WhatsApp) */
.actions.actions-fixed {
    padding: 12px 18px 18px;
    border-top: 1px solid #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #ffffff;
}

.actions.actions-fixed > .flex {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Seletor de Quantidade */
.qtd-prod {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    height: 42px;
}

.qtd-prod button {
    width: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: #64748b;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    padding: 0;
}

.qtd-prod button:hover {
    background: #e2e8f0;
    color: var(--color_primary);
}

.qtd-prod button svg {
    width: 14px;
    height: 14px;
}

.qtd-prod input.form-control {
    width: 36px;
    height: 100%;
    border: none;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    color: #0f172a;
    padding: 0;
    margin: 0;
    -moz-appearance: textfield;
}

.qtd-prod input.form-control::-webkit-outer-spin-button,
.qtd-prod input.form-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Botão Comprar / Ver Produto */
.add-to-cart,
.product-button {
    flex: 1;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color_primary);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(54, 11, 143, 0.25);
}

.add-to-cart:hover,
.product-button:hover {
    background: #250669;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(54, 11, 143, 0.38);
    color: #ffffff;
}

/* Botão Comprar no WhatsApp */
.prod-options {
    width: 100%;
}

.btn-pay-wp {
    width: 100%;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #eefbef;
    color: #16a34a;
    border: 1.5px solid #bbf7d0;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-pay-wp:hover {
    background: #25D366;
    color: #ffffff;
    border-color: #25D366;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
    transform: translateY(-1px);
}

.btn-pay-wp svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
    flex-shrink: 0;
}

/* Botões do Carrossel (Prev / Next) */
.swiper-button-prev,
.swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--color_primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0;
}

.swiper-button-prev {
    left: -20px;
}

.swiper-button-next {
    right: -20px;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background: var(--color_primary);
    color: #ffffff;
    border-color: var(--color_primary);
    transform: translateY(-50%) scale(1.08);
}

.swiper-button-prev::after {
    content: '‹';
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    margin-right: 2px;
}

.swiper-button-next::after {
    content: '›';
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    margin-left: 2px;
}

/* Dots / Paginação */
.dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: all 0.25s ease;
}

.dots .dot:hover {
    background: #94a3b8;
}

.dots .dot.dot-active {
    width: 28px;
    border-radius: 6px;
    background: var(--color_primary);
}

@media (max-width: 768px) {
    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }

    .list-product .item {
        flex: 0 0 270px;
        max-width: 270px;
    }
}

/* ==========================================================================
   Banners Grid (2 colunas promocionais)
   ========================================================================== */
.banners-grid {
    margin-top: 50px;
    margin-bottom: 60px;
    gap: 24px;
}

.banners-grid.two .item {
    flex: 1 1 calc(50% - 12px);
    max-width: calc(50% - 12px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border: 1.5px solid #eef2f6;
    background: #ffffff;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.banners-grid.two .item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(54, 11, 143, 0.16);
    border-color: #d8b4fe;
}

.banners-grid.two .item a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.banners-grid.two .item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.banners-grid.two .item:hover img {
    transform: scale(1.03);
}

@media (max-width: 768px) {
    .banners-grid.two {
        flex-direction: column;
        gap: 16px;
    }
    .banners-grid.two .item {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   Banner Slider Carrossel - Tobogãs e Futebol de Sabão Mais Vendidos
   ========================================================================== */
.banners-grid.two .item.toboga-carousel-item,
.banners-grid.two .item.fut-carousel-item {
    position: relative;
    padding: 0;
    background: #0f172a;
}

.toboga-slider-banner,
.fut-slider-banner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 280px;
    aspect-ratio: 695 / 434;
    overflow: hidden;
    user-select: none;
    background: #0f172a;
}

.toboga-slide-link,
.fut-slide-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.toboga-slides-track,
.fut-slides-track {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.toboga-slide-item,
.fut-slide-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    transform: scale(1.05);
    z-index: 1;
}

.toboga-slide-item.active,
.fut-slide-item.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 2;
}

.toboga-slide-item img,
.fut-slide-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    display: block;
    transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.toboga-slide-item.active img,
.fut-slide-item.active img {
    transform: scale(1.04) !important;
}

/* Overlay com gradiente escuro refinado para destaque do texto */
.toboga-slider-overlay,
.fut-slider-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.05) 45%, rgba(15, 23, 42, 0.85) 100%);
    transition: background 0.3s ease;
}

.toboga-slider-banner:hover .toboga-slider-overlay,
.fut-slider-banner:hover .fut-slider-overlay {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.1) 45%, rgba(15, 23, 42, 0.9) 100%);
}

/* Badge Flutuante no Topo */
.toboga-slider-badge,
.fut-slider-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    color: #0f172a;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.85);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.badge-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 10px #ef4444;
    animation: tobogaBadgePulse 1.8s infinite ease-in-out;
}

.badge-dot-blue {
    background: #0284c7;
    box-shadow: 0 0 10px #0284c7;
}

@keyframes tobogaBadgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(1.35); }
}

/* Contador de Slides Flutuante no Topo Direito */
.toboga-slider-counter,
.fut-slider-counter {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 4;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Legenda e Ação no Rodapé */
.toboga-slider-info,
.fut-slider-info {
    position: absolute;
    bottom: 22px;
    left: 20px;
    right: 20px;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    pointer-events: none;
}

.toboga-slider-info-text,
.fut-slider-info-text {
    flex: 1;
    min-width: 0;
}

.toboga-slider-info-text h3,
.fut-slider-info-text h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    line-height: 1.25;
    letter-spacing: -0.3px;
}

.toboga-slider-info-text p,
.fut-slider-info-text p {
    margin: 4px 0 0 0;
    font-size: 13px;
    font-weight: 500;
    color: #e2e8f0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.toboga-slider-cta,
.fut-slider-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 12px;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.toboga-slider-cta {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45);
}

.fut-slider-cta {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.45);
}

.toboga-slider-banner:hover .toboga-slider-cta {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.6);
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.fut-slider-banner:hover .fut-slider-cta {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.6);
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

.toboga-slider-cta svg,
.fut-slider-cta svg {
    transition: transform 0.25s ease;
}

.toboga-slider-banner:hover .toboga-slider-cta svg,
.fut-slider-banner:hover .fut-slider-cta svg {
    transform: translateX(3px);
}

/* Botões de Navegação (Setas) */
.toboga-nav-btn,
.fut-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0.88;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.toboga-nav-btn:hover {
    background: #ffffff;
    transform: translateY(-50%) scale(1.15);
    color: #7c3aed;
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.45);
    opacity: 1;
}

.fut-nav-btn:hover {
    background: #ffffff;
    transform: translateY(-50%) scale(1.15);
    color: #0284c7;
    box-shadow: 0 8px 25px rgba(2, 132, 199, 0.45);
    opacity: 1;
}

.toboga-nav-prev,
.fut-nav-prev {
    left: 14px;
}

.toboga-nav-next,
.fut-nav-next {
    right: 14px;
}

.toboga-slider-banner:hover .toboga-nav-btn,
.fut-slider-banner:hover .fut-nav-btn {
    opacity: 1;
}

/* Indicadores de Ponto (Dots) */
.toboga-dots-container,
.fut-dots-container {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 10;
    padding: 4px 10px;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.toboga-dot,
.fut-dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.45);
    border: none;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0;
}

.toboga-dot:hover,
.fut-dot:hover {
    background: rgba(255, 255, 255, 0.85);
}

.toboga-dot.active,
.fut-dot.active {
    width: 22px;
    background: #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
}

/* Barra de Progresso no Topo */
.toboga-progress-bar,
.fut-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3.5px;
    z-index: 7;
    width: 0%;
    transition: width linear;
}

.toboga-progress-bar {
    background: linear-gradient(90deg, #a855f7 0%, #ec4899 100%);
}

.fut-progress-bar {
    background: linear-gradient(90deg, #38bdf8 0%, #0284c7 100%);
}

@media (max-width: 768px) {
    .toboga-nav-btn,
    .fut-nav-btn {
        opacity: 0.85;
        width: 36px;
        height: 36px;
    }
    .toboga-slider-info-text h3,
    .fut-slider-info-text h3 {
        font-size: 16px;
    }
    .toboga-slider-info-text p,
    .fut-slider-info-text p {
        font-size: 12px;
        display: none;
    }
    .toboga-slider-cta,
    .fut-slider-cta {
        padding: 7px 12px;
        font-size: 12px;
    }
}

/* ==========================================================================
   Footer / Rodapé Brother Kids
   ========================================================================== */
.footer {
    background: #ffffff;
    border-top: 1px solid #eef2f6;
    margin-top: 40px;
    width: 100%;
}

.footer .cols {
    padding: 64px 0 48px;
}

.footer .cols .container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 36px;
}

.footer .box {
    flex: 1 1 200px;
}

.footer .box.logo-box {
    flex: 0 0 340px;
    max-width: 340px;
}

.footer .logo-footer {
    display: inline-block;
    margin-bottom: 18px;
}

.footer .logo-footer img {
    max-width: 175px;
    height: auto;
    display: block;
}

.footer .sobre-a-loja {
    font-size: 13.5px;
    line-height: 1.65;
    color: #64748b;
    margin-bottom: 22px;
    display: block;
}

.footer .social-media {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer .social-media a {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color_primary);
    transition: all 0.25s ease;
}

.footer .social-media a:hover {
    background: var(--color_primary);
    border-color: var(--color_primary);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(54, 11, 143, 0.25);
}

.footer .title {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 22px;
    position: relative;
    padding-bottom: 10px;
}

.footer .title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 3px;
    background: linear-gradient(90deg, var(--color_primary) 0%, var(--color_secondary) 100%);
    border-radius: 2px;
}

.footer .title.mt-4 {
    margin-top: 26px;
}

.footer .list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer .list li a {
    font-size: 13.5px;
    color: #475569;
    font-weight: 500;
    display: inline-block;
    transition: all 0.2s ease;
}

.footer .list li a:hover {
    color: var(--color_primary);
    transform: translateX(4px);
}

.footer .box-infos ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footer .box-contact {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer .contact-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #faf5ff;
    color: var(--color_primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1.5px solid #f3e8ff;
    transition: transform 0.2s;
}

.footer .box-contact:hover .contact-icon {
    transform: scale(1.08);
}

.footer .contact-icon.whats-icon {
    background: #eefbef;
    color: #16a34a;
    border-color: #bbf7d0;
}

.footer .contact-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 2px;
}

.footer .contact-val {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    transition: color 0.2s;
    text-decoration: none;
}

.footer .contact-val:hover {
    color: var(--color_primary);
}

.footer .contact-val.whats-link {
    color: #16a34a;
}

.footer .contact-val.whats-link:hover {
    color: #15803d;
}

.footer .store-opening-hours {
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
}

.footer .hours-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 4px;
}

.footer .hours-val {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

/* Formas de Pagamento e Selos */
.footer .payment-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer .payment-form {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
}

.footer .payment-form:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.footer .payment-form img {
    height: 22px;
    width: auto;
    object-fit: contain;
    display: block;
}

.footer .security-seals {
    list-style: none;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.footer .seal-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

/* Barra Inferior (Copy) - Limpa, sem links de tecnologia */
.footer .copy {
    background: #0f172a;
    color: #94a3b8;
    padding: 22px 0;
    font-size: 13px;
    font-weight: 500;
    border-top: 1px solid #1e293b;
}

.footer .copy .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.footer .copy .text-cnpj {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

@media (max-width: 992px) {
    .footer .cols {
        padding: 48px 0 32px;
    }

    .footer .box.logo-box {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .footer .box {
        flex: 1 1 calc(50% - 20px);
    }
}

@media (max-width: 640px) {
    .footer .box {
        flex: 1 1 100%;
    }

    .footer .copy .container {
        flex-direction: column;
        text-align: center;
        gap: 6px;
    }
}

/* ==========================================================================
   Shopping Cart Drawer (.cart-drawer) & Overlay
   ========================================================================== */
.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 440px;
    max-width: 100vw;
    height: 100vh;
    background: #ffffff;
    z-index: 999999;
    box-shadow: -10px 0 50px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-drawer.active {
    transform: translateX(0);
}

.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(5px);
    z-index: 999998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Cabeçalho do Drawer */
.cart-drawer-header {
    padding: 22px 24px;
    border-bottom: 1.5px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    flex-shrink: 0;
}

.cart-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cart-header-title svg {
    color: var(--color_primary);
    stroke: var(--color_primary);
}

.cart-header-title h3 {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.3px;
}

.cart-header-title h3 span {
    font-size: 15px;
    font-weight: 700;
    color: var(--color_primary);
}

.cart-drawer-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cart-drawer-close:hover {
    background: #fee2e2;
    color: #ef4444;
    border-color: #fca5a5;
    transform: rotate(90deg);
}

/* Corpo do Drawer com Itens */
.cart-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    -webkit-overflow-scrolling: touch;
}

.cart-item {
    display: flex;
    gap: 14px;
    padding: 14px;
    background: #f8fafc;
    border: 1.5px solid #f1f5f9;
    border-radius: 14px;
    position: relative;
    transition: all 0.25s ease;
}

.cart-item:hover {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.cart-item-img {
    width: 76px;
    height: 76px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.cart-item-img img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.cart-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.cart-item-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-item-price {
    font-size: 14px;
    font-weight: 800;
    color: var(--color_primary);
}

.cart-item-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.cart-qty-group {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    height: 32px;
    overflow: hidden;
}

.cart-qty-btn {
    width: 28px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: #475569;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
    padding: 0;
}

.cart-qty-btn:hover {
    background: #e2e8f0;
    color: var(--color_primary);
}

.cart-qty-input {
    width: 34px;
    height: 100%;
    border: none;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    -moz-appearance: textfield;
}

.cart-qty-input::-webkit-outer-spin-button,
.cart-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cart-item-remove {
    color: #94a3b8;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.cart-item-remove:hover {
    color: #ef4444;
    background: #fee2e2;
}

/* Estado Vazio do Carrinho */
.cart-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    margin: auto 0;
}

.cart-empty-icon {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: #faf5ff;
    border: 2px dashed #d8b4fe;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color_primary);
    margin-bottom: 22px;
}

.cart-empty-title {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
}

.cart-empty-desc {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.55;
    margin-bottom: 24px;
    max-width: 290px;
}

.btn-explore-toys {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color_primary);
    color: #ffffff;
    padding: 12px 26px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(54, 11, 143, 0.25);
}

.btn-explore-toys:hover {
    background: #250669;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(54, 11, 143, 0.35);
}

/* Rodapé do Carrinho com Totais e Ações */
.cart-drawer-footer {
    padding: 20px 24px 28px;
    background: #ffffff;
    border-top: 1.5px solid #f1f5f9;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

.cart-shipping-calculator {
    margin-bottom: 16px;
}

.shipping-input-group {
    display: flex;
    align-items: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 4px 6px 4px 12px;
    background: #f8fafc;
    gap: 8px;
    transition: border-color 0.2s;
}

.shipping-input-group:focus-within {
    border-color: var(--color_primary);
    background: #ffffff;
}

.shipping-input-group svg {
    color: #64748b;
    flex-shrink: 0;
}

.shipping-input-group input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    outline: none;
    font-family: inherit;
}

.shipping-input-group button {
    background: #0f172a;
    color: #ffffff;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}

.shipping-input-group button:hover {
    background: var(--color_primary);
}

.cart-shipping-result {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #16a34a;
    background: #eefbef;
    padding: 6px 10px;
    border-radius: 6px;
    display: none;
}

.cart-totals {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 13.5px;
    color: #64748b;
    font-weight: 600;
}

.cart-total-row .cart-shipping-free {
    color: #16a34a;
    font-weight: 700;
}

.cart-total-row.total-highlight {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin-top: 4px;
}

.cart-total-row.total-highlight #cart-total-val {
    font-size: 20px;
    color: var(--color_primary);
}

.cart-installments-info {
    font-size: 12px;
    font-weight: 700;
    color: #15803d;
    background: #dcfce7;
    padding: 6px 12px;
    border-radius: 6px;
    text-align: center;
    margin-top: 4px;
}

.cart-drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-checkout-whatsapp {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    background: #25D366;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
    text-decoration: none;
}

.btn-checkout-whatsapp:hover {
    background: #20ba59;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
    color: #ffffff;
}

.btn-checkout-direct {
    width: 100%;
    height: 46px;
    border-radius: 12px;
    background: var(--color_primary);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 4px 16px rgba(54, 11, 143, 0.25);
}

.btn-checkout-direct:hover {
    background: #250669;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(54, 11, 143, 0.35);
}

.btn-continue-shopping {
    width: 100%;
    height: 38px;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid #e2e8f0;
    transition: all 0.2s ease;
}

.btn-continue-shopping:hover {
    background: #f8fafc;
    color: #0f172a;
    border-color: #cbd5e1;
}

/* ==========================================================================
   Checkout Modal & Order Success Modal
   ========================================================================== */
.checkout-modal,
.order-success-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(6px);
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.checkout-modal.active,
.order-success-modal.active {
    opacity: 1;
    visibility: visible;
}

.checkout-modal-dialog {
    background: #ffffff;
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.92);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.checkout-modal.active .checkout-modal-dialog {
    transform: scale(1);
}

.checkout-modal-header {
    padding: 20px 24px;
    border-bottom: 1.5px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #faf5ff;
}

.checkout-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color_primary);
}

.checkout-modal-title h3 {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
}

.checkout-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    font-size: 20px;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.checkout-modal-close:hover {
    background: #fee2e2;
    color: #ef4444;
}

.checkout-modal-body {
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.checkout-section-title {
    font-size: 14.5px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.checkout-section-title span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color_primary);
    color: #ffffff;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.checkout-items-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
    padding-right: 4px;
}

.checkout-summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 10px;
    font-size: 13px;
}

.checkout-summary-item-name {
    font-weight: 600;
    color: #1e293b;
    flex: 1;
    margin-right: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkout-summary-item-price {
    font-weight: 800;
    color: var(--color_primary);
}

.checkout-total-box {
    margin-top: 12px;
    background: #faf5ff;
    border: 1.5px solid #ebd8fd;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.checkout-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 13.5px;
    color: #64748b;
    font-weight: 600;
}

.checkout-total-row .frete-gratis {
    color: #16a34a;
    font-weight: 700;
}

.checkout-total-row.total-highlight {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    border-top: 1px dashed #d8b4fe;
    padding-top: 8px;
    margin-top: 4px;
}

.checkout-total-row.total-highlight #checkout-total {
    color: var(--color_primary);
    font-size: 19px;
}

/* Formulário de Checkout */
.checkout-form .form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 12px;
}

.checkout-form .form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 14px;
    margin-bottom: 12px;
}

.checkout-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.checkout-form label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
}

.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="tel"] {
    height: 42px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    padding: 0 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: #0f172a;
    background: #ffffff;
    font-family: inherit;
    transition: all 0.2s;
}

.checkout-form input:focus {
    border-color: var(--color_primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(54, 11, 143, 0.1);
}

/* Opções de Pagamento */
.checkout-payments {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.payment-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.payment-option:hover,
.payment-option.selected {
    border-color: var(--color_primary);
    background: #faf5ff;
}

.payment-option input[type="radio"] {
    accent-color: var(--color_primary);
    width: 18px;
    height: 18px;
}

.payment-option-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.payment-option-content .pay-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
}

.payment-option-content .pay-desc {
    font-size: 11.5px;
    color: #64748b;
}

.badge-desconto {
    background: #dcfce7;
    color: #16a34a;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
}

.badge-semjuros {
    background: #faf5ff;
    color: var(--color_primary);
    border: 1px solid #d8b4fe;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
}

.checkout-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.btn-confirm-order {
    width: 100%;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color_primary) 0%, #1f045c 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    border: none;
    box-shadow: 0 6px 20px rgba(54, 11, 143, 0.35);
    transition: all 0.2s ease;
}

.btn-confirm-order:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(54, 11, 143, 0.45);
}

.btn-whatsapp-order {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    background: #eefbef;
    border: 1.5px solid #bbf7d0;
    color: #16a34a;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-whatsapp-order:hover {
    background: #25D366;
    color: #ffffff;
    border-color: #25D366;
}

/* Diálogo de Sucesso */
.order-success-dialog {
    background: #ffffff;
    width: 100%;
    max-width: 480px;
    border-radius: 20px;
    padding: 36px 30px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.order-success-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #dcfce7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.order-success-title {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
}

.order-success-desc {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.55;
    margin-bottom: 24px;
}

.order-success-details {
    width: 100%;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 16px;
    display: flex;
    justify-content: space-around;
    margin-bottom: 24px;
}

.order-number-box span,
.order-amount-box span {
    font-size: 11px;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
}

.order-number-box strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--color_primary);
}

.order-amount-box strong {
    font-size: 15px;
    font-weight: 800;
    color: #15803d;
}

.order-success-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-success-whatsapp {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    background: #25D366;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
    transition: all 0.2s;
}

.btn-success-whatsapp:hover {
    background: #20ba59;
    transform: translateY(-2px);
    color: #ffffff;
}

.btn-success-close {
    width: 100%;
    height: 42px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    color: #475569;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-success-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

@media (max-width: 480px) {
    .cart-drawer {
        width: 100vw;
    }

    .checkout-form .form-grid-2,
    .checkout-form .form-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Live Search Dropdown com Imagem, Título e Descrição Curta
   ========================================================================== */
.suggestion {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    min-width: 440px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.18);
    border: 1.5px solid #e2e8f0;
    overflow: hidden;
    z-index: 10000;
    max-height: 480px;
    overflow-y: auto;
}

.suggestion.is-hidden {
    display: none;
}

.suggestion-header {
    padding: 12px 18px;
    font-size: 11.5px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover,
.suggestion-item.active {
    background: #faf5ff;
}

.suggestion-item:hover::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--color_primary);
    border-radius: 0 4px 4px 0;
}

.suggestion-img {
    width: 58px;
    height: 58px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.suggestion-img img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform 0.2s;
}

.suggestion-item:hover .suggestion-img img {
    transform: scale(1.08);
}

.suggestion-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.suggestion-title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-desc {
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.suggestion-pricing {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.suggestion-price {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--color_primary);
}

.suggestion-installments {
    font-size: 11px;
    font-weight: 600;
    color: #16a34a;
    background: #eefbef;
    padding: 2px 6px;
    border-radius: 4px;
}

.suggestion-action {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    padding-left: 6px;
    transition: transform 0.2s, color 0.2s;
}

.suggestion-item:hover .suggestion-action {
    color: var(--color_primary);
    transform: translateX(3px);
}

.suggestion-empty {
    padding: 28px 20px;
    text-align: center;
    color: #64748b;
    font-size: 13.5px;
}

/* ==========================================================================
   Página de Detalhes do Produto (Product Detail Page)
   ========================================================================== */
.breadcrumb-container {
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
    padding: 12px 0;
    margin-bottom: 28px;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 500;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb a:hover {
    color: var(--color_primary);
}

.breadcrumb .separator {
    color: #cbd5e1;
}

.breadcrumb .active {
    color: #0f172a;
    font-weight: 700;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 50px;
}

/* Galeria */
.product-gallery-card {
    background: #ffffff;
    border: 1.5px solid #edf2f7;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.product-main-view {
    position: relative;
    width: 100%;
    height: 440px;
    background: #f8fafc;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 18px;
}

.product-main-view .main-photo {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: opacity 0.2s ease, transform 0.3s ease;
}

.product-main-view:hover .main-photo {
    transform: scale(1.04);
}

.product-factory-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(54, 11, 143, 0.9);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.product-thumbnails-list {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.thumb-btn {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.thumb-btn:hover,
.thumb-btn.active {
    border-color: var(--color_primary);
    box-shadow: 0 4px 12px rgba(54, 11, 143, 0.15);
    background: #ffffff;
}

.thumb-btn img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-badges-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.badge-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #edf2f7;
}

.badge-item svg {
    color: var(--color_primary);
    flex-shrink: 0;
}

.badge-item strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
}

.badge-item span {
    font-size: 11px;
    color: #64748b;
}

/* Info Box */
.product-info-card {
    background: #ffffff;
    border: 1.5px solid #edf2f7;
    border-radius: 20px;
    padding: 32px 36px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.product-meta-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.product-category-tag {
    background: #faf5ff;
    color: var(--color_primary);
    border: 1px solid #ebd8fd;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 6px;
}

.product-sku {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 600;
}

.product-detail-title {
    font-size: 26px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.25;
    margin-bottom: 12px;
}

.product-rating-box {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 13px;
}

.product-rating-box .stars {
    color: #f59e0b;
    font-size: 15px;
    letter-spacing: 2px;
}

.product-rating-box .rating-number {
    font-weight: 700;
    color: #0f172a;
}

.product-rating-box .rating-reviews {
    color: #64748b;
}

.product-short-desc {
    font-size: 14.5px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1.5px solid #f1f5f9;
}

/* Preço */
.product-pricing-box {
    background: #faf5ff;
    border: 1.5px solid #ebd8fd;
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 24px;
}

.price-cash-highlight .cash-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
}

.price-cash-highlight .cash-value {
    font-size: 32px;
    font-weight: 900;
    color: var(--color_primary);
    line-height: 1.1;
    margin: 4px 0;
}

.price-cash-highlight .cash-desc {
    font-size: 12.5px;
    color: #16a34a;
    font-weight: 700;
}

.price-installment-info {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #d8b4fe;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.price-installment-info .install-val {
    font-size: 13px;
    color: #475569;
}

.price-installment-info .install-val strong {
    color: #0f172a;
}

.badge-no-interest {
    background: #dcfce7;
    color: #16a34a;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
}

/* Ações de Compra */
.product-action-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 26px;
}

.qty-control-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
}

.qty-control-wrapper label {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.qty-input-group {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    height: 42px;
    background: #ffffff;
    overflow: hidden;
}

.btn-qty-minus,
.btn-qty-plus {
    width: 38px;
    height: 100%;
    background: #f8fafc;
    border: none;
    font-size: 18px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-qty-minus:hover,
.btn-qty-plus:hover {
    background: #e2e8f0;
    color: var(--color_primary);
}

.qty-input-group input {
    width: 48px;
    height: 100%;
    border: none;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.cta-buttons-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.btn-product-buy {
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color_primary) 0%, #1f045c 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(54, 11, 143, 0.35);
    transition: all 0.2s ease;
}

.btn-product-buy:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(54, 11, 143, 0.45);
}

.btn-product-whatsapp {
    height: 52px;
    border-radius: 12px;
    background: #25D366;
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
    transition: all 0.2s ease;
}

.btn-product-whatsapp:hover {
    background: #20ba59;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
}

/* Calculadora de Frete na Página */
.product-shipping-calc {
    padding: 16px 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.shipping-title {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
}

.shipping-box-row {
    display: flex;
    gap: 8px;
}

.shipping-box-row input {
    flex: 1;
    height: 42px;
    border-radius: 8px;
    border: 1.5px solid #cbd5e1;
    padding: 0 14px;
    font-size: 13.5px;
    font-weight: 600;
}

.shipping-box-row button {
    height: 42px;
    padding: 0 20px;
    border-radius: 8px;
    background: #0f172a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.shipping-box-row button:hover {
    background: var(--color_primary);
}

.shipping-feedback {
    margin-top: 10px;
    display: none;
}

/* Abas de Detalhes */
.product-details-tabs-container {
    background: #ffffff;
    border: 1.5px solid #edf2f7;
    border-radius: 20px;
    padding: 32px 36px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    margin-bottom: 50px;
}

.tabs-nav {
    display: flex;
    gap: 12px;
    border-bottom: 2px solid #f1f5f9;
    margin-bottom: 26px;
}

.tab-btn {
    background: transparent;
    border: none;
    font-size: 15px;
    font-weight: 700;
    color: #64748b;
    padding: 12px 20px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}

.tab-btn:hover {
    color: var(--color_primary);
}

.tab-btn.active {
    color: var(--color_primary);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color_primary);
    border-radius: 3px 3px 0 0;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.specs-table {
    width: 100%;
    border-collapse: collapse;
}

.specs-table th,
.specs-table td {
    padding: 14px 18px;
    font-size: 14px;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
}

.specs-table th {
    width: 28%;
    font-weight: 700;
    color: #334155;
    background: #f8fafc;
}

.specs-table td {
    color: #0f172a;
    font-weight: 600;
}

.product-full-description {
    font-size: 15px;
    line-height: 1.7;
    color: #334155;
}

.factory-highlight-box {
    margin-top: 24px;
    background: #faf5ff;
    border: 1.5px solid #ebd8fd;
    border-radius: 14px;
    padding: 24px;
}

.factory-highlight-box h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--color_primary);
    margin-bottom: 12px;
}

.factory-highlight-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.factory-highlight-box li {
    font-size: 14px;
    color: #475569;
    padding-left: 20px;
    position: relative;
}

.factory-highlight-box li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #16a34a;
    font-weight: 800;
}

.items-included-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.items-included-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #edf2f7;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

/* Produtos Relacionados */
.related-products-section {
    margin-bottom: 60px;
}

.related-products-section .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.related-products-section .title-section {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
}

.related-products-section .view-all-link {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color_primary);
    text-decoration: none;
}

.related-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.product-card-related {
    background: #ffffff;
    border: 1.5px solid #edf2f7;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
}

.product-card-related:hover {
    border-color: #cbd5e1;
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.related-img-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    background: #f8fafc;
    padding: 12px;
    overflow: hidden;
}

.related-img-link img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform 0.25s;
}

.product-card-related:hover .related-img-link img {
    transform: scale(1.06);
}

.related-info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.related-cat {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 4px;
}

.related-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    margin-bottom: 8px;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--color_primary);
    margin-top: auto;
    margin-bottom: 12px;
}

.btn-see-details {
    display: block;
    text-align: center;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: #334155;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-see-details:hover {
    background: var(--color_primary);
    color: #ffffff;
    border-color: var(--color_primary);
}

@media (max-width: 991px) {
    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .cta-buttons-group {
        grid-template-columns: 1fr;
    }
    .related-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .product-main-view {
        height: 300px;
    }
    .related-products-grid {
        grid-template-columns: 1fr;
    }
    .suggestion {
        min-width: 100%;
    }
    .product-badges-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   BROTHER KIDS - SISTEMA COMPLETO DE RESPONSIVIDADE MOBILE DE ALTA PERFORMANCE
   ========================================================================== */

/* Regras Globais para Telas <= 991px (Tablets e Smartphones) */
@media (max-width: 991px) {
    .top-header {
        font-size: 11px;
        padding: 8px 12px;
    }
    .top-header a {
        gap: 6px;
    }
    .top-header a::after {
        display: none !important;
    }

    .bg {
        padding: 12px 0;
    }

    .line {
        flex-wrap: wrap;
        gap: 12px;
    }

    .header-menu {
        display: flex !important;
    }

    .orderList.hidden-sm {
        display: none !important;
    }

    .header-search-wrapper {
        order: 3;
        width: 100%;
        max-width: 100%;
        margin: 8px 0 0 0;
    }

    /* Barra de Categorias Horizontal com Scroll Suave Mobile */
    .nav-categories-container {
        padding: 0 8px;
        gap: 0;
    }
    .nav-cat-arrow {
        display: none !important;
    }
    .category-scroll-wrapper {
        padding: 8px 4px;
    }
    .nav-categories .category-list {
        gap: 6px;
    }
    .category-link {
        font-size: 12px;
        padding: 6px 12px;
        background: #f1f5f9;
        border-radius: 18px;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    .category-item.active .category-link {
        background: var(--color_primary);
        color: #ffffff;
    }

    /* Hero Showcase Banner */
    .hero-banner {
        flex-direction: column !important;
        padding: 38px 24px 28px !important;
        text-align: center !important;
        gap: 20px !important;
        margin-top: 16px !important;
        margin-bottom: 32px !important;
        overflow: hidden !important;
    }
    .hero-banner-content {
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    .hero-banner-title {
        font-size: 1.85rem !important;
    }
    .hero-banner-buttons {
        justify-content: center !important;
    }
    .hero-banner-image-wrap {
        max-width: 380px !important;
        width: 100% !important;
        margin: 10px auto 0 !important;
    }
    .hero-banner-img {
        max-width: 320px !important;
        max-height: 290px !important;
    }

    /* Faixa de Vantagens (Features Bar) */
    .features-grid,
    div[style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Banners Promocionais Grid */
    .banners-grid.two {
        flex-direction: column !important;
        gap: 16px !important;
        margin-top: 36px !important;
        margin-bottom: 40px !important;
    }
    .banners-grid.two .item {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    /* Newsletter */
    .footer-main .newsletter {
        flex-direction: column !important;
        text-align: center !important;
        gap: 20px !important;
    }
    .footer-main .newsletter .form {
        width: 100% !important;
    }
    .footer-main .newsletter .form .flex {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .footer-main .newsletter .field,
    .footer-main .newsletter button {
        width: 100% !important;
        height: 48px !important;
    }

    /* Rodapé Colunas */
    .footer .cols {
        padding: 40px 0 28px !important;
    }
    .footer .cols .container {
        gap: 28px !important;
    }
    .footer .box.logo-box {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    .footer .box.logo-box .social-media {
        justify-content: center !important;
    }
    .footer .box {
        flex: 1 1 calc(50% - 14px) !important;
    }
}

/* Regras Específicas para Smartphones (Telas <= 576px) */
@media (max-width: 576px) {
    .container {
        padding: 0 14px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Header Mobile Otimizado */
    .header-menu {
        width: 38px !important;
        height: 38px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 8px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
    }
    .header-menu div {
        width: 20px !important;
        height: 2px !important;
    }

    .logo img {
        height: 40px !important;
        max-height: 44px !important;
        max-width: 145px !important;
    }

    .options-wrapper {
        gap: 8px !important;
    }

    .cart-toggle {
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
    }
    .cart-toggle svg {
        width: 19px !important;
        height: 19px !important;
    }
    .cart-quantity {
        width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
        top: -4px !important;
        right: -4px !important;
    }

    .input-search {
        height: 44px !important;
        font-size: 13.5px !important;
        padding: 0 46px 0 14px !important;
        border-radius: 10px !important;
    }
    .button-search {
        width: 36px !important;
        height: 36px !important;
        right: 4px !important;
    }

    /* Hero Banner Mobile */
    .hero-banner {
        padding: 28px 16px 22px !important;
        border-radius: 20px !important;
        margin-top: 12px !important;
        margin-bottom: 24px !important;
    }
    .hero-banner-title {
        font-size: 1.45rem !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }
    .hero-banner-desc {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        margin-bottom: 18px !important;
    }
    .hero-banner-buttons {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }
    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100% !important;
        height: 48px !important;
        padding: 0 16px !important;
        justify-content: center !important;
        font-size: 13.5px !important;
        border-radius: 12px !important;
    }
    .hero-banner-image-wrap {
        max-width: 270px !important;
        margin: 10px auto -15px !important;
    }
    .hero-banner-img {
        max-width: 260px !important;
        max-height: 230px !important;
    }

    /* Faixa de Vantagens Mobile */
    .features-grid,
    div[style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    div[style*="grid-template-columns: repeat(auto-fit"] > div {
        padding: 14px 10px !important;
        gap: 10px !important;
        border-radius: 12px !important;
    }
    div[style*="grid-template-columns: repeat(auto-fit"] svg {
        width: 18px !important;
        height: 18px !important;
    }
    div[style*="grid-template-columns: repeat(auto-fit"] h4 {
        font-size: 12px !important;
    }
    div[style*="grid-template-columns: repeat(auto-fit"] p {
        font-size: 10.5px !important;
    }

    /* Vitrine de Produtos (Showcase Slide) */
    .section-showcase {
        margin-top: 30px !important;
        margin-bottom: 38px !important;
    }
    .section-showcase .section-header {
        margin-bottom: 14px !important;
        padding-bottom: 10px !important;
    }
    .section-showcase .title-section {
        font-size: 18px !important;
        padding-left: 12px !important;
    }
    .section-showcase .title-section::before {
        width: 4px !important;
        height: 20px !important;
    }

    /* Lista e Cards de Produtos em Mobile */
    .list-product {
        padding: 6px 2px 18px !important;
        gap: 12px !important;
    }
    .list-product .item {
        flex: 0 0 240px !important;
        max-width: 240px !important;
    }
    .product {
        border-radius: 14px !important;
    }
    .product .image {
        height: 190px !important;
    }
    .product .info-product {
        padding: 12px 10px !important;
    }
    .product .product-name {
        font-size: 13px !important;
        min-height: 34px !important;
        line-height: 1.3 !important;
    }
    .product .product-price .price {
        font-size: 17px !important;
    }
    .product .product-price .installments {
        font-size: 11.5px !important;
    }
    .product-actions {
        gap: 6px !important;
    }
    .product .btn-buy,
    .product .btn-whatsapp {
        height: 38px !important;
        font-size: 12px !important;
        padding: 0 8px !important;
        border-radius: 8px !important;
    }

    /* Carrinho Drawer Mobile */
    .cart-drawer {
        width: 100vw !important;
        max-width: 100vw !important;
    }
    .cart-drawer-header {
        padding: 16px !important;
    }
    .cart-drawer-body {
        padding: 14px !important;
    }
    .cart-drawer-footer {
        padding: 16px !important;
    }

    /* Página de Detalhes do Produto (Mobile) */
    .breadcrumb-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 10px 0 !important;
    }
    .breadcrumb-container::-webkit-scrollbar {
        display: none !important;
    }
    .breadcrumb {
        white-space: nowrap !important;
        font-size: 12px !important;
    }

    .product-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-bottom: 24px !important;
    }
    .product-gallery-card {
        padding: 14px !important;
        border-radius: 16px !important;
    }
    .product-main-view {
        height: 280px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
    }
    .product-main-view .main-photo {
        max-height: 85% !important;
    }
    .product-factory-badge {
        top: 10px !important;
        left: 10px !important;
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
    .product-thumbnails-list {
        gap: 8px !important;
        margin-bottom: 16px !important;
    }
    .thumb-btn {
        width: 62px !important;
        height: 62px !important;
        border-radius: 10px !important;
    }
    .product-badges-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding-top: 12px !important;
    }
    .badge-item {
        padding: 8px 10px !important;
        gap: 8px !important;
        border-radius: 8px !important;
    }
    .badge-item svg {
        width: 18px !important;
        height: 18px !important;
    }
    .badge-item strong {
        font-size: 11px !important;
    }
    .badge-item span {
        font-size: 10px !important;
    }

    .product-info-card {
        padding: 20px 14px !important;
        border-radius: 16px !important;
    }
    .product-detail-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }
    .product-rating-box {
        font-size: 12px !important;
        margin-bottom: 14px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .product-short-desc {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        margin-bottom: 18px !important;
        padding-bottom: 14px !important;
    }
    .product-pricing-box {
        padding: 16px 14px !important;
        border-radius: 12px !important;
        margin-bottom: 18px !important;
    }
    .price-cash-highlight .cash-value {
        font-size: 26px !important;
    }
    .price-installment-info {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }
    .product-action-block {
        gap: 14px !important;
        margin-bottom: 20px !important;
    }
    .qty-control-wrapper {
        justify-content: space-between !important;
        width: 100% !important;
    }
    .cta-buttons-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .btn-product-buy,
    .btn-product-whatsapp {
        height: 48px !important;
        font-size: 14px !important;
        width: 100% !important;
        border-radius: 10px !important;
    }
    .product-shipping-calc {
        padding: 14px 12px !important;
        border-radius: 12px !important;
    }
    .shipping-box-row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .shipping-box-row input {
        width: 100% !important;
        height: 44px !important;
        font-size: 13.5px !important;
    }
    .shipping-box-row button {
        width: 100% !important;
        height: 44px !important;
        border-radius: 8px !important;
    }

    /* Abas Técnicas do Produto */
    .product-details-tabs-container {
        padding: 20px 14px !important;
        border-radius: 16px !important;
        margin-bottom: 30px !important;
    }
    .tabs-nav {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        white-space: nowrap !important;
        gap: 6px !important;
        margin-bottom: 18px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        padding-bottom: 4px !important;
    }
    .tabs-nav::-webkit-scrollbar {
        display: none !important;
    }
    .tab-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .specs-table th,
    .specs-table td {
        display: block !important;
        width: 100% !important;
        padding: 6px 8px !important;
    }
    .specs-table th {
        background: #f8fafc !important;
        font-size: 11.5px !important;
        border-bottom: none !important;
        padding-top: 10px !important;
    }
    .specs-table td {
        font-size: 13px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        padding-bottom: 10px !important;
    }
    .factory-highlight-box {
        padding: 16px 14px !important;
        border-radius: 12px !important;
    }

    /* Catálogo de Produtos */
    .related-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
        gap: 14px !important;
    }
    .product-card-related {
        border-radius: 14px !important;
    }
    .product-card-related .related-img-link {
        height: 180px !important;
    }
    .product-card-related .related-info {
        padding: 14px !important;
    }

    /* Rodapé em Mobile */
    .footer .box {
        flex: 1 1 100% !important;
    }
    .footer .title {
        font-size: 14px !important;
        margin-bottom: 16px !important;
    }
    .footer .copy .container {
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
    }
}

/* Telas Muito Pequenas (Telas <= 380px) */
@media (max-width: 380px) {
    .features-grid,
    div[style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
    }
    .list-product .item {
        flex: 0 0 215px !important;
        max-width: 215px !important;
    }
    .logo img {
        max-width: 125px !important;
    }
}

/* ==========================================================================
   Estilos dos Vendedores de WhatsApp e Widget Flutuante Brother Kids
   ========================================================================== */
.dropHelp .sellers-dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}
.dropHelp .seller-dropdown-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    text-decoration: none;
    transition: all 0.2s ease;
}
.dropHelp .seller-dropdown-link:hover {
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.dropHelp .seller-icon {
    font-size: 18px;
    flex-shrink: 0;
}
.dropHelp .seller-meta {
    flex: 1;
    min-width: 0;
}
.dropHelp .seller-meta strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}
.dropHelp .seller-meta span {
    display: block;
    font-size: 12px;
    color: #16a34a;
    font-weight: 700;
}

.footer-sellers-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}
.footer-seller-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    transition: color 0.2s, transform 0.2s;
}
.footer-seller-item:hover {
    color: #16a34a;
    transform: translateX(3px);
}
.footer-seller-badge {
    font-size: 10px;
    font-weight: 700;
    background: #dcfce7;
    color: #166534;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.checkout-sellers-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.btn-seller-checkout {
    width: 100%;
    height: 48px;
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #25d366;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn-seller-checkout:hover {
    background: #20ba59;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.5);
}

/* Botão Flutuante de WhatsApp */
.bk-floating-whatsapp {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 998;
}
.bk-wpp-button {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: #ffffff;
    border: none;
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
    position: relative;
}
.bk-wpp-button:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.6);
}
.bk-wpp-tooltip {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
    background: #0f172a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.bk-wpp-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -5px;
    transform: translateY(-50%);
    border-width: 5px 0 5px 5px;
    border-style: solid;
    border-color: transparent transparent transparent #0f172a;
}
.bk-floating-whatsapp:hover .bk-wpp-tooltip {
    opacity: 1;
    visibility: visible;
}
.bk-wpp-online-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #10b981;
    border: 2.5px solid #ffffff;
}
.bk-wpp-popup {
    position: absolute;
    bottom: 72px;
    right: 0;
    width: 320px;
    max-width: calc(100vw - 32px);
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.22);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.96);
    transform-origin: bottom right;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.bk-wpp-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.bk-wpp-header {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #ffffff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bk-wpp-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
}
.bk-wpp-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.2s;
}
.bk-wpp-close:hover {
    color: #ffffff;
}
.bk-wpp-body {
    padding: 14px 16px;
    background: #f8fafc;
}
.bk-wpp-intro {
    font-size: 12px;
    color: #64748b;
    margin: 0 0 10px 0;
    line-height: 1.4;
}
.bk-wpp-sellers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bk-seller-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}
.bk-seller-card:hover {
    border-color: #22c55e;
    background: #f0fdf4;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}
.bk-seller-avatar {
    font-size: 22px;
    width: 38px;
    height: 38px;
    background: #dcfce7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bk-seller-info {
    flex: 1;
    min-width: 0;
}
.bk-seller-info strong {
    display: block;
    font-size: 13.5px;
    color: #0f172a;
    font-weight: 700;
    line-height: 1.2;
}
.bk-seller-info span {
    display: block;
    font-size: 11px;
    color: #64748b;
}
.bk-seller-info small {
    display: block;
    font-size: 12px;
    color: #16a34a;
    font-weight: 700;
}
.bk-seller-action {
    font-size: 11px;
    font-weight: 700;
    color: #16a34a;
    background: #dcfce7;
    padding: 5px 9px;
    border-radius: 8px;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .bk-floating-whatsapp {
        bottom: 16px;
        right: 16px;
    }
    .bk-wpp-button {
        width: 52px;
        height: 52px;
    }
    .bk-wpp-popup {
        width: calc(100vw - 32px);
        bottom: 64px;
    }
}