:root {
    /* Colors - Pagani Parafusos Blue Theme */
    --color-primary: #35348C;
    --color-primary-dark: #25245F;
    --color-primary-contrast: #ffffff;
    --color-secondary: #F0F4F8;

    --color-bg-dark: #F5F7FA;
    --color-bg-surface: #FFFFFF;
    --color-bg-card: #FFFFFF;

    --color-text-main: #333333;
    --color-text-muted: #666666;
    --color-text-inverse: #FFFFFF;
    --shadow-color: #000000;
    --hero-banner-bg: #222222;
    --hero-banner-border: #111111;
    --hero-banner-shadow: #000000;
    --banner-overlay: #000000;
    --banner-overlay-soft: #000000;
    --banner-text: #ffffff;
    --banner-button-bg: #35348C;
    --banner-button-text: #ffffff;
    --banner-button-hover-bg: #111111;
    --banner-button-hover-text: #35348C;
    --mid-banner-border: #ffffff;
    --mid-banner-shadow: #000000;
    --slider-bg: #222222;
    --slider-btn-bg: #ffffff;
    --slider-btn-text: #35348C;
    --slider-btn-border: #ffffff;
    --slider-btn-hover-bg: #35348C;
    --slider-btn-hover-text: #ffffff;
    --slider-dot-bg: #ffffff;
    --slider-dot-active-bg: #35348C;
    --slider-dot-border: #ffffff;

    --color-border: #E1E4E8;
    --color-border-hover: #35348C;

    /* Gradients */
    --gradient-hero: linear-gradient(135deg, #35348C 0%, #25245F 100%);
    --gradient-accent: linear-gradient(90deg, #35348C 0%, #4C4AA7 100%);

    /* Typography */
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Oswald', sans-serif;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    /* Shadows */
    --shadow-sm: 0 2px 4px color-mix(in srgb, var(--shadow-color) 5%, transparent);
    --shadow-md: 0 4px 8px color-mix(in srgb, var(--shadow-color) 8%, transparent);
    --shadow-lg: 0 8px 16px color-mix(in srgb, var(--shadow-color) 10%, transparent);
    --shadow-glow: 0 0 10px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

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

body {
    font-family: var(--font-main);
    background-color: var(--color-bg-dark);
    color: var(--color-text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Utilities */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--transition-fast);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    box-shadow: var(--shadow-glow);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.btn-outline:hover {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.text-primary {
    color: var(--color-primary);
}

.text-muted {
    color: var(--color-text-muted);
}

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

.mb-1 {
    margin-bottom: var(--spacing-sm);
}

.mb-2 {
    margin-bottom: var(--spacing-md);
}

.mb-3 {
    margin-bottom: var(--spacing-lg);
}
:root {
    --b2b-primary: var(--color-primary, #FFCC00);
    --b2b-secondary: var(--color-secondary, #1a1a1a);
    --b2b-accent: var(--color-primary, #FFCC00);
    --b2b-bg: #f2f2f2;
    --b2b-card: #ffffff;
    --b2b-border: #e0e0e0;
    --b2b-text: #222222;
    --b2b-text-dark: #222222;
    --b2b-text-light: #555555;
    --b2b-green: #16a34a;
    --shadow-sm: 0 1px 4px color-mix(in srgb, var(--shadow-color) 8%, transparent);
    --shadow-md: 0 4px 14px color-mix(in srgb, var(--shadow-color) 8%, transparent);
    --shadow: 0 8px 20px color-mix(in srgb, var(--shadow-color) 8%, transparent);
    --font-display: 'Oswald', system-ui, sans-serif;
}

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

body {
    background-color: var(--b2b-bg);
    color: var(--b2b-text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--b2b-secondary);
    margin-bottom: 0.5rem;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-main {
    padding-top: 30px;
}

/* Store Header */

.store-topbar {
    background: var(--topbar-bg);
    color: var(--topbar-text);
    font-size: 0.76rem;
    border-bottom: 1px solid color-mix(in srgb, var(--topbar-text) 7%, transparent);
}

.store-topbar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 6px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.store-topbar-highlight {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.store-topbar-highlight i {
    color: var(--b2b-primary);
}

.store-topbar-links {
    display: flex;
    align-items: center;
    gap: 20px;
    white-space: nowrap;
}

.store-topbar-links a {
    color: var(--topbar-text);
    text-decoration: none;
    font-weight: 600;
    transition: 0.2s;
}

.store-topbar-links a:hover {
    color: var(--topbar-h-bg);
}

header {

    background: var(--b2b-primary);

    color: var(--color-text-inverse);

    position: sticky;

    top: 0;

    z-index: 1000;

    box-shadow: 0 3px 12px color-mix(in srgb, var(--shadow-color) 25%, transparent);

}

.departments-bar {
    background: var(--menu-bg);
    border-bottom: 0;
    box-shadow: none;
    position: sticky;
    top: 64px;
    z-index: 900;
    overflow: visible;
}

/* Flat storefront navigation and breathing room before the footer. */
body.store-page.i3-page header,
body.store-page.i3-page .departments-bar {
    box-shadow: none !important;
}

body.store-page.i3-page .departments-bar {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

body.store-page.page-index.i3-page .i3-wrap.main-spacing {
    padding-bottom: 64px;
}

body.store-page.page-index.i3-page .i3-pagination {
    margin-bottom: 48px;
}

.departments-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--menu-text) 35%, transparent) transparent;
}

.departments-inner::-webkit-scrollbar {
    height: 4px;
}

.departments-inner::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--menu-text) 35%, transparent);
    border-radius: 999px;
}

.departments-inner a {
    color: var(--menu-text);
    text-decoration: none;
    font-size: 0.79rem;
    font-weight: 600;
    padding: 11px 13px;
    border-radius: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.departments-inner a:hover {
    color: var(--menu-h-text) !important;
    background: var(--menu-h-bg) !important;
}

.departments-dropdown {
    position: relative;
    flex: 0 0 auto;
    z-index: 80;
}

.departments-dropdown > summary {
    list-style: none;
    border: 0;
    outline: none;
    color: var(--menu-text);
    text-decoration: none;
    font-size: 0.79rem;
    font-weight: 800;
    padding: 11px 13px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: 0.2s;
}

.departments-dropdown > summary:focus,
.departments-dropdown > summary:focus-visible {
    outline: none;
    box-shadow: none;
}

.departments-dropdown > summary::-webkit-details-marker {
    display: none;
}

.departments-dropdown > summary:hover,
.departments-dropdown[open] > summary {
    color: var(--menu-h-text) !important;
    background: var(--menu-h-bg) !important;
}

.departments-dropdown > summary span,
.departments-dropdown-menu a span:last-child {
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--menu-text) 16%, transparent);
    font-size: 0.64rem;
    font-weight: 900;
}

.departments-dropdown[open] .departments-dropdown-caret {
    transform: rotate(180deg);
}

.departments-dropdown-caret {
    font-size: 0.72rem;
    transition: transform .18s ease;
}

.departments-dropdown-menu {
    position: fixed;
    top: var(--departments-dropdown-top, 180px);
    left: var(--departments-dropdown-left, 20px);
    width: min(380px, 88vw);
    max-height: 420px;
    overflow: auto;
    padding: 8px;
    border: 0;
    outline: none;
    border-radius: 8px;
    background: var(--surface-bg);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--shadow-color) 22%, transparent);
    z-index: 9999;
}

.departments-dropdown-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 11px;
    border-radius: 6px;
    color: var(--text-main) !important;
    background: transparent !important;
    white-space: normal;
    line-height: 1.25;
}

.departments-dropdown-menu a:hover,
.departments-dropdown-menu a.active-dept {
    color: var(--menu-h-text) !important;
    background: var(--menu-h-bg) !important;
}

.departments-dropdown-menu a:hover span:last-child,
.departments-dropdown-menu a.active-dept span:last-child {
    background: color-mix(in srgb, var(--menu-h-text) 22%, transparent);
}



.departments-inner .departments-promo {
    color: var(--b2b-primary);
    font-weight: 700;
}

.header-inner {

    max-width: 1400px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    padding: 10px 20px;

}

.header-search-container {

    flex: 1;

    max-width: 700px;

}

.modern-search {

    position: relative;

    display: flex;

    align-items: center;

}

.modern-search input {

    width: 100%;

    padding: 12px 18px;

    padding-right: 52px;

    border-radius: 4px;

    border: 2px solid color-mix(in srgb, var(--input-border) 25%, transparent);

    background: color-mix(in srgb, var(--input-bg) 95%, transparent);

    color: var(--input-text);

    font-size: 0.92rem;

    outline: none;

    transition: 0.25s;

}

.modern-search input::placeholder {

    color: var(--text-muted);

}

.modern-search input:focus {
    background: var(--input-bg);
    border-color: var(--b2b-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--shadow-color) 10%, transparent);
}

.modern-search button {

    position: absolute;

    right: 0;

    top: 0;

    bottom: 0;

    width: 46px;

    background: var(--btn-primary-bg);

    color: var(--btn-primary-text);

    border: none;

    border-radius: 0 4px 4px 0;

    cursor: pointer;

    font-size: 1rem;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: 0.2s;

}

.modern-search button:hover {
    background: var(--btn-primary-h-bg);
    color: var(--btn-primary-h-text);
}

.modern-search input:focus+button {

    background: var(--btn-primary-h-bg);

}

/* User Nav Simplification */

.user-nav {

    display: flex;

    align-items: center;

    gap: 24px;

}

.user-info-brief {

    color: var(--color-text-inverse);

    font-size: 0.9rem;

    font-weight: 500;

}

.nav-simple-link {

    color: var(--color-text-inverse);

    font-size: 0.9rem;

    font-weight: 600;

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 8px;

    transition: 0.2s;

}

.nav-simple-link:hover {

    opacity: 0.8;

}

.cart-pill {
    background: var(--header-cart-bg) !important;
    color: var(--header-cart-text) !important;
    padding: 9px 18px;
    border-radius: 4px;

    font-weight: 800;

    font-size: 0.88rem;

    display: flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    transition: 0.25s;

    box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow-color) 15%, transparent);
    text-transform: uppercase;

}

.cart-pill:hover {
    background: var(--header-cart-h-bg) !important;
    color: var(--header-cart-h-text) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px color-mix(in srgb, var(--shadow-color) 20%, transparent);
}

.cart-pill-badge {

    background: var(--header-cart-text);

    color: var(--header-cart-bg) !important;

    font-size: 0.72rem;

    padding: 2px 7px;

    border-radius: 10px;

    font-weight: 800;

}

.login-btn-link {
    background: var(--login-bg);
    color: var(--login-text) !important;
    padding: 9px 20px;

    border-radius: 4px;

    font-weight: 700;

    font-size: 0.85rem;

    text-decoration: none;

    transition: 0.2s;

    display: flex;

    align-items: center;

    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--login-text) 30%, transparent);
    text-transform: uppercase;

}

.login-btn-link:hover {
    background: var(--login-bg-h);
    color: var(--login-text-h) !important;
    transform: translateY(-1px);
}

.logout-icon {

    color: color-mix(in srgb, var(--color-text-inverse) 80%, transparent);

    font-size: 1.15rem;

    transition: 0.2s;
    text-decoration: none;

}

.logout-icon:hover {
    transform: scale(1.1);
    color: var(--b2b-primary);
}

/* Product Card - Guest View */

.price-guest-notice {

    text-align: center;

    padding: 10px;

    background: var(--b2b-bg);

    border-radius: 6px;

    border: 1px dashed var(--b2b-border);

}

.price-guest-notice a {

    color: var(--b2b-primary);

    font-size: 0.8rem;

    font-weight: 700;

    text-decoration: none;

    text-transform: uppercase;

}

/* Rest of the styles from previous version refined */

.b2b-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    width: 100%;
    margin-top: 10px;
}

/* Evita que o conteúdo dinâmico (carousel, grid de produtos) extrapole a coluna */
.b2b-container > aside,
.b2b-container > main {
    min-width: 0;
}

.sidebar-filters {

    position: sticky;

    top: 90px;

    height: fit-content;

}

.sidebar-section {

    background: var(--card-bg);

    border-radius: 12px;

    padding: 20px;

    border: 1px solid var(--b2b-border);

    box-shadow: var(--shadow-sm);

}

.filter-title {

    font-size: 0.75rem;

    font-weight: 800;

    color: var(--b2b-secondary);

    letter-spacing: 1px;

    margin-bottom: 20px;

    padding-bottom: 10px;

    border-bottom: 2px solid var(--b2b-accent);

}

.cat-list {

    list-style: none;

    padding: 0;

}

.cat-list a {

    display: flex;

    align-items: center;

    padding: 10px 12px;

    text-decoration: none;

    color: var(--b2b-text);

    font-size: 0.9rem;

    border-radius: 8px;

    transition: 0.2s;

    gap: 12px;

}

.cat-list a.active {

    background: var(--b2b-primary);

    color: var(--cat-active-text);

}

.at-list a:hover:not(.active) {

    background: var(--color-border);

    transform: translateX(5px);

}

.cat-count {

    margin-left: auto;

    font-size: 0.75rem;

    background: var(--color-border);

    padding: 2px 8px;

    border-radius: 10px;

    color: var(--b2b-text-light);

}

.active .cat-count {

    background: color-mix(in srgb, var(--cat-active-text) 20%, transparent);

    color: var(--cat-active-text);

}

.product-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

    gap: 20px;

}

.product-card {

    background: var(--card-bg);

    border-radius: 12px;

    padding: 20px;

    border: 1px solid var(--b2b-border);

    transition: all 0.3s ease;

    display: flex;

    flex-direction: column;

    position: relative;

    box-shadow: var(--shadow-sm);

}

.product-card:hover {

    box-shadow: var(--shadow-md);

    border-color: var(--b2b-primary);

    transform: translateY(-5px);

}

.product-sku {

    font-size: 0.7rem;

    color: var(--b2b-secondary);

    margin-bottom: 15px;

    height: 3.9em;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

}

.product-image-box {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.product-image-box a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.product-image-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin: auto;
}

.product-price-section {

    background: var(--color-border);

    padding: 12px;

    border-radius: 8px;

    margin-bottom: 15px;

    min-height: 65px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.price-label {

    font-size: 0.6rem;

    font-weight: 700;

    color: var(--b2b-text-light);

    text-transform: uppercase;

    margin-bottom: 2px;

}

.price-value {

    font-size: 1.3rem;

    font-weight: 900;

    color: var(--b2b-primary);

}

.stock-status {

    font-size: 0.75rem;

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 20px;

}

.in-stock {

    color: var(--b2b-green);

}

.out-of-stock {

    color: var(--out-stock-color);

}

.buy-section-refined {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

/* Qty Control - Modern Pill Style */
.qty-control {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--input-border);
    border-radius: 10px;
    overflow: hidden;
    width: 105px;
    flex-shrink: 0;
    background: var(--color-border);
    transition: border-color 0.2s;
}

.qty-control:focus-within {
    border-color: var(--input-border);
    background: var(--color-border);
    box-shadow: none;
}

.qty-control button {
    width: 32px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    font-weight: 800;
    font-size: 1rem;
    color: var(--b2b-primary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.qty-control button:hover {
    background: var(--b2b-primary);
    color: var(--btn-primary-text);
}

.qty-control input {
    flex: 1;
    min-width: 0;
    border: none;
    border-left: 1.5px solid var(--input-border);
    border-right: 1.5px solid var(--input-border);
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--b2b-text-dark);
    background: transparent;
    outline: none;
    padding: 0;
}

/* Add to Cart Button - Premium Modern */
.add-to-cart-btn {
    flex: 1;
    background: linear-gradient(135deg, var(--add-cart-bg1) 0%, var(--add-cart-bg2) 100%);
    color: var(--add-cart-text);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--add-cart-bg1) 35%, transparent);
    padding: 0 10px;
}

.add-to-cart-btn i {
    font-size: 0.95rem;
    transition: transform 0.3s;
}

.add-to-cart-btn:hover {
    background: linear-gradient(135deg, var(--add-cart-hover-bg1) 0%, var(--add-cart-hover-bg2) 100%);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--add-cart-bg1) 45%, transparent);
    transform: translateY(-2px);
}

.add-to-cart-btn:hover i {
    transform: scale(1.2) rotate(-8deg);
}

.add-to-cart-btn:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--add-cart-bg1) 30%, transparent);
}

/* Ripple effect */
.add-to-cart-btn .ripple {
    position: absolute;
    border-radius: 50%;
    background: color-mix(in srgb, var(--add-cart-text) 40%, transparent);
    transform: scale(0);
    animation: ripple-anim 0.5s linear;
    pointer-events: none;
}

@keyframes ripple-anim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Global Button System */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 10px 24px;

    border-radius: 8px;

    font-weight: 700;

    font-size: 0.95rem;

    text-decoration: none;

    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.btn-primary {

    background: var(--b2b-primary);

    color: var(--btn-primary-text) !important;

    box-shadow: 0 4px 6px color-mix(in srgb, var(--add-cart-bg1) 20%, transparent);

}

.btn-primary:hover {

    background: var(--b2b-secondary);

    transform: translateY(-2px);

    box-shadow: 0 8px 15px color-mix(in srgb, var(--shadow-color) 15%, transparent);

}

.btn-primary:active {

    transform: translateY(0);

}

.btn-outline {

    background: var(--btn-outline-bg, var(--card-bg));

    color: var(--b2b-primary) !important;

    border-color: var(--b2b-primary);

}

.btn-outline:hover {

    background: var(--color-border);

    transform: translateY(-2px);

    box-shadow: var(--shadow-sm);

}

.btn-secondary {

    background: var(--b2b-secondary);

    color: var(--color-text-inverse) !important;

}

.btn-secondary:hover {

    opacity: 0.9;

    transform: translateY(-2px);

}

.btn:disabled,

.btn.disabled {

    opacity: 0.5;

    cursor: not-allowed;

    transform: none !important;

    box-shadow: none !important;

}

/* Animations */

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

.b2b-card {

    animation: fadeIn 0.4s ease-out;

}

/* --- MOBILE APP-STYLE LAYOUT --- */

html,

body {

    overflow-x: hidden;

    position: relative;

    width: 100%;

    margin: 0;

    padding: 0;

}

/* Default Visiblity */

.mobile-controls,

.mobile-menu-overlay,

.mobile-menu-sidebar {

    display: none;

}

.desktop-nav {

    display: flex;

}

@media (max-width: 1024px) {

    .container {

        padding: 0 20px;

    }

    .b2b-container {

        grid-template-columns: 240px 1fr;

        gap: 20px;

    }

}

@media (max-width: 768px) {

    /* 1. HIDE DESKTOP ELEMENTS STRICTLY */
    .store-topbar {
        display: none;
    }

    .departments-bar {
        position: relative;
        top: auto;
        z-index: 800;
    }

    .departments-inner {
        padding: 0 15px;
    }

    .departments-inner a {
        padding: 11px 12px;
        font-size: 0.78rem;
    }

    .desktop-nav,

    .user-nav,

    .user-info-brief {

        display: none !important;

    }

    /* 2. SHOW MOBILE ELEMENTS */

    .mobile-controls {

        display: flex !important;

        align-items: center;

        gap: 20px;

    }

    .mobile-menu-overlay,

    .mobile-menu-sidebar {

        display: block;

    }

    /* But hidden via visibility/right */

    /* 3. APP-STYLE    /* HEADER LAYOUT: Logo Left | Menu Right | Search Bottom using Grid */

    .header-inner {

        display: grid !important;

        grid-template-columns: 1fr auto !important;

        grid-template-areas:

            "logo controls"

            "search search" !important;

        gap: 10px 0 !important;

        padding: 12px 15px !important;

        background: var(--b2b-primary);
        align-items: center !important;

    }

    /* Logo (Left) */

    .logo {

        grid-area: logo;

        display: flex !important;

        justify-content: flex-start;

        width: auto !important;

        margin: 0 !important;

        padding: 0 !important;

    }

    .logo img {

        height: 35px;

        width: auto;

        object-fit: contain;

    }

    /* Controls (Right) */

    .mobile-controls {

        grid-area: controls;

        display: flex !important;

        justify-content: flex-end;

        align-items: center;

        gap: 20px;

        margin: 0 !important;

    }

    /* Search (Bottom Row) */

    .header-search-container {

        grid-area: search;

        width: 100% !important;

        margin-top: 5px !important;

        padding-top: 0;

    }

    .modern-search input {

        width: 100%;

        height: 42px;

        border-radius: 8px;

        font-size: 16px;

        /* No zoom */

        padding-left: 15px;

    }

    /* Icons */
    #mobile-menu-trigger,
    .mobile-cart-icon {
        color: var(--color-text-inverse) !important;
        font-size: 1.4rem;
        background: none;
        border: none;
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;
    }

    .mobile-cart-badge {

        top: -6px;

        right: -6px;

        background: var(--color-danger);

        color: var(--color-text-inverse);

        border: 2px solid var(--b2b-primary);

        font-size: 0.7rem;

        font-weight: 700;

        padding: 2px 5px;

        border-radius: 10px;

        position: absolute;

    }

    /* 4. SIDEBAR AVATAR FIX */

    .avatar-circle {

        width: 48px;

        height: 48px;

        background: color-mix(in srgb, var(--color-text-inverse) 20%, transparent);

        color: var(--color-text-inverse);

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        font-weight: 700;

        margin-right: 15px;

        font-size: 1.4rem;

        border: 2px solid color-mix(in srgb, var(--color-text-inverse) 30%, transparent);

    }

    .user-welcome {

        display: flex;

        align-items: center;

        color: var(--color-text-inverse);

    }

    .user-welcome strong {

        font-size: 1.1rem;

        display: block;

    }

    .user-welcome small {

        opacity: 0.8;

        font-size: 0.8rem;

    }

    /* 5. GLOBAL RESETS & LAYOUT FIXES */

    .container {

        padding: 0 15px !important;

        width: 100%;

        box-sizing: border-box;

    }

    .b2b-container {

        display: flex;

        flex-direction: column;

        width: 100%;

        margin-top: 20px;

    }

    .sidebar-filters {

        position: static;

        width: 100%;

        margin-bottom: 20px;

        background: var(--card-bg);

        border-radius: 8px;

        padding: 10px;

        border: 1px solid var(--b2b-border);

    }

    /* Product Grid */

    .product-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;

    }

    @media (max-width: 400px) {

        .product-grid {

            grid-template-columns: 1fr;

        }

    }

    .product-card {

        padding: 10px;

    }

    .product-image-box {
        height: 140px;
        min-height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .product-image-box img {
        max-width: 100%;
        max-height: 100%;
        height: auto;
        object-fit: contain;
    }

    /* 6. TABLE TO CARD & CHECKOUT FIXES */

    table,

    thead,

    tbody,

    th,

    td,

    tr {

        display: block;

        width: 100% !important;

        box-sizing: border-box;

    }

    thead {

        display: none;

    }

    tr {

        margin-bottom: 15px;

        border: 1px solid var(--b2b-border);

        border-radius: 12px;

        background: var(--card-bg);

        padding: 15px;

        box-shadow: 0 2px 5px color-mix(in srgb, var(--shadow-color) 5%, transparent);

        height: auto !important;

    }

    td {

        display: flex;

        justify-content: space-between;

        align-items: center;

        flex-wrap: wrap;

        padding: 10px 0 !important;

        border-bottom: 1px solid color-mix(in srgb, var(--card-border) 45%, var(--card-bg));

        text-align: left !important;

        min-height: 30px;

    }

    td:last-child {

        border-bottom: none;

        justify-content: center;

        padding-top: 15px !important;

        background: var(--color-border);

        margin: 0 -15px -15px -15px;

        border-radius: 0 0 12px 12px;

    }

    td div[style*="align-items: center"] {

        flex-direction: row !important;

        width: 100%;

    }

    /* Checkout Grids */

    div[style*="grid-template-columns: 1fr 350px"],

    div[style*="grid-template-columns: 2fr 1fr"],

    form[style*="grid-template-columns: 1fr 350px"] {

        grid-template-columns: 1fr !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 20px !important;

    }

    div[style*="top: 100px"] {

        position: static !important;

    }

    .mp-tabs {

        flex-wrap: wrap;

        gap: 8px !important;

    }

    /* Login */

    .login-container {

        padding: 20px;

        width: 95%;

        margin: 20px auto;

    }

}

/* Sidebar & Overlay (Global scope) */

.mobile-menu-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: color-mix(in srgb, var(--popup-overlay) 50%, transparent);

    z-index: 1001;

    opacity: 0;

    visibility: hidden;

    transition: 0.3s;

}

.mobile-menu-overlay.active {

    opacity: 1;

    visibility: visible;

}

.mobile-menu-sidebar {

    position: fixed;

    top: 0;

    right: -320px;

    width: 280px;

    height: 100%;

    background: var(--surface-bg);

    z-index: 1002;

    box-shadow: -5px 0 20px color-mix(in srgb, var(--shadow-color) 10%, transparent);

    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    display: flex;

    flex-direction: column;

}

.mobile-menu-sidebar.active {

    right: 0;

}

.mobile-menu-header {

    padding: 30px 20px;

    background: var(--b2b-primary);

    color: var(--color-text-inverse);

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.mobile-menu-nav {

    padding: 10px 0;

    overflow-y: auto;

}

.mobile-menu-nav a {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 15px 25px;

    color: var(--b2b-text);

    text-decoration: none;

    font-weight: 500;

    border-bottom: 1px solid var(--color-border);

    font-size: 1rem;

}

.mobile-menu-nav a:hover {

    background: var(--login-gate-bg);

    color: var(--b2b-primary);

}

.mobile-menu-nav a i {

    width: 25px;

    text-align: center;

    color: var(--text-muted);

}

#mobile-menu-close {

    background: none;

    border: none;

    color: var(--color-text-inverse);

    font-size: 1.5rem;

    cursor: pointer;

}

/* --- Fixes for Cart, Checkout and Orders Mobile Layout --- */

@media (max-width: 768px) {

    /* Force single column for Cart and Checkout grids */

    div[style*="grid-template-columns: 1fr 350px"],

    form[style*="grid-template-columns: 1fr 350px"] {

        grid-template-columns: 1fr !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 20px !important;

    }

    /* Resumo (Sticky) fix - Remove sticky on mobile */

    div[style*="top: 100px"] {

        position: static !important;

    }

    /* Payment Tabs Wrap */

    .mp-tabs {

        flex-wrap: wrap;

        gap: 8px !important;

    }

    .mp-tab-btn {

        flex: 1 1 45%;

        /* 2 per row */

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 8px;

        font-size: 0.85rem;

        padding: 12px 10px !important;

    }

    /* --- TABLE TO CARD TRANSFORMATION (No Scroll) --- */

    table,

    thead,

    tbody,

    th,

    td,

    tr {

        display: block;

        width: 100% !important;

        box-sizing: border-box;

    }

    thead {

        display: none;

    }

    tr {

        margin-bottom: 15px;

        border: 1px solid var(--b2b-border);

        border-radius: 12px;

        background: var(--card-bg);

        padding: 15px;

        box-shadow: 0 2px 5px color-mix(in srgb, var(--shadow-color) 5%, transparent);

    }

    td {

        display: flex;

        justify-content: space-between;

        /* Espalha conteúdo se possível */

        align-items: center;

        flex-wrap: wrap;

        /* Permite quebra se conteúdo for longo */

        padding: 8px 0 !important;

        border-bottom: 1px solid color-mix(in srgb, var(--card-border) 45%, var(--card-bg));

        text-align: left !important;

        min-height: 30px;

    }

    td:last-child {

        border-bottom: none;

        justify-content: center;

        padding-top: 15px !important;

        background: var(--color-border);

        margin: 0 -15px -15px -15px;

        /* Full width button area */

        border-radius: 0 0 12px 12px;

    }

    /* Cart Specific: Product Image Row */

    td div[style*="align-items: center"] {

        flex-direction: row !important;

        /* Manter imagem ao lado do texto */

        width: 100%;

    }

    /* Remove fixed heights form rows */

    tr[style*="height"] {

        height: auto !important;

    }

    /* Ensure inputs allow interaction without zoom/scroll */

    input[type="text"],

    input[type="number"] {

        font-size: 16px;

        /* Evita zoom no iOS */

    }

}

/* --- Fixes for Order Details Mobile --- */

@media (max-width: 768px) {

    /* Grid 2fr 1fr conversion */

    div[style*="grid-template-columns: 2fr 1fr"] {

        grid-template-columns: 1fr !important;

        display: flex !important;

        flex-direction: column !important;

    }

    /* Header Stack (Título e Botão Voltar) */

    div[style*="justify-content: space-between; align-items: flex-start"] {

        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 15px;

    }

    /* TFoot adjustment for Card View */

    tfoot,

    tfoot tr {

        display: block;

        width: 100%;

        box-sizing: border-box;

    }

    tfoot tr {

        display: flex !important;

        flex-direction: row !important;

        justify-content: space-between !important;

        align-items: center !important;

        background: var(--color-border) !important;

        margin-top: 10px;

        padding: 0 !important;

    }

    tfoot td {

        width: auto !important;

        border: none !important;

        background: transparent !important;

        margin: 0 !important;

        padding: 15px !important;

    }

    /* Final Adjustments: Fix Search Visibility */
    .mobile-cart-icon {
        display: flex !important; /* Overriding previous hidden rule */
    }
    .header-search-container {

        display: block !important;

        opacity: 1 !important;

        visibility: visible !important;

        margin-top: 15px !important;

        order: 3 !important;

        width: 100% !important;

    }

    .modern-search input {

        background: var(--input-bg) !important;

        color: var(--text-main) !important;

        height: 45px !important;

        box-shadow: 0 2px 5px color-mix(in srgb, var(--shadow-color) 10%, transparent) !important;

    }

}

}

/* Carousel de promocoes */
.promo-section { margin-bottom: 24px; }

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

.promo-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.promo-section-title h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--price-promo);
}

.promo-fire-badge {
    background: var(--price-promo);
    color: var(--badge-promo-text) !important;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.4px;
}

.promo-see-all {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--price-promo);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.promo-see-all:hover { text-decoration: underline; }

/* Wrapper com espaço para os botões absolutos */
.promo-carousel-wrap {
    position: relative;
    margin: 0 20px;
}

.promo-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
}

.promo-carousel::-webkit-scrollbar { display: none; }

/* Card individual */
.promo-pcard {
    flex: 0 0 152px;
    min-height: 210px;
    background: var(--card-bg);
    border-radius: 12px;
    border: 1.5px solid var(--promo-card-border);
    padding: 14px 10px 12px;
    text-decoration: none;
    color: var(--b2b-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--shadow-color) 5%, transparent);
}

.promo-pcard:hover {
    box-shadow: 0 6px 20px color-mix(in srgb, var(--price-promo) 18%, transparent);
    border-color: var(--promo-card-hover-border);
}

/* Badge de desconto */
.promo-pcard .disc-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--price-promo);
    color: var(--badge-promo-text);
    font-size: 0.58rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 20px;
    line-height: 1.5;
    z-index: 1;
}

/* Imagem */
.pcard-img-wrap {
    width: 88px;
    height: 88px;
    border-radius: 8px;
    background: var(--color-border);
    border: 1px solid var(--promo-card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.pcard-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pcard-img-wrap .pcard-emoji { font-size: 2rem; line-height: 1; }

/* Nome do produto */
.pcard-name {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

/* Preços */
.pcard-prices {
    margin-top: auto;
    padding-top: 6px;
    text-align: center;
    width: 100%;
}

.pcard-orig {
    font-size: 0.67rem;
    color: var(--text-muted);
    text-decoration: line-through;
}

.pcard-promo {
    font-size: 0.92rem;
    font-weight: 900;
    color: var(--price-promo);
}

/* Link para login (visitantes) */
.pcard-login {
    margin-top: auto;
    padding-top: 6px;
    font-size: 0.72rem;
    text-align: center;
}

.pcard-login a {
    color: var(--color-danger);
    font-weight: 700;
    text-decoration: none;
}

.pcard-login a:hover { text-decoration: underline; }

/* Botões prev/next */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1.5px solid var(--color-border);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow-color) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    z-index: 10;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    font-size: 0.7rem;
}

.carousel-btn:hover {
    background: var(--color-danger);
    color: var(--color-text-inverse);
    border-color: var(--color-danger);
}

.carousel-btn.prev { left: -20px; }
.carousel-btn.next { right: -20px; }

/* Superproatacado polishing - final refinements */

/* Logo sizing inside red header */
.logo img {
    max-height: 46px;
    width: auto;
    display: block;
}

/* User nav link */
.user-nav .nav-simple-link,
.user-nav .nav-simple-link:visited {
    color: color-mix(in srgb, var(--color-text-inverse) 92%, transparent);
    font-size: 0.85rem;
}
.user-nav .nav-simple-link:hover { color: var(--color-text-inverse); opacity: 1; }

/* User info brief */
.user-info-brief span { color: color-mix(in srgb, var(--color-text-inverse) 70%, transparent) !important; font-size: 0.72rem !important; }
.user-info-brief strong { color: var(--color-text-inverse) !important; font-size: 0.88rem !important; }

/* Header search wider */
.header-search-container {
    max-width: 760px;
}

/* Departments bar active link highlight */
.departments-inner a.active-dept,
.departments-inner a:focus {
    color: var(--menu-h-text) !important;
    background: var(--menu-h-bg) !important;
}

/* Section headings (h2 in catalog sections) */
.i3-section-head h2,
h2.section-title {
    font-family: 'Roboto Condensed', 'Oswald', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

/* Product price in red (Superproatacado style) */
.price-value {
    color: var(--b2b-primary) !important;
}

/* Primary buttons */
.btn-primary {
    background: var(--b2b-primary) !important;
    border-color: var(--b2b-primary) !important;
}
.btn-primary:hover {
    background: var(--b2b-secondary) !important;
}

/* Category active state */
.cat-list a.active {
    background: var(--b2b-primary) !important;
    color: var(--cat-active-text) !important;
}
.filter-title {
    border-bottom-color: var(--b2b-primary) !important;
    color: var(--b2b-secondary) !important;
}

/* Carousel buttons */
.carousel-btn:hover {
    background: var(--b2b-primary) !important;
    border-color: var(--b2b-primary) !important;
}

/* Login page button color */
.btn-login-submit,
button[type=submit].btn-primary {
    background: var(--b2b-primary) !important;
}

/* Mobile cart badge */
.mobile-cart-badge {
    background: var(--mobile-cart-badge-bg) !important;
    color: var(--mobile-cart-badge-text) !important;
    border-color: var(--b2b-primary) !important;
}

/* Store topbar highlight */
.store-topbar-highlight {
    color: var(--color-text-inverse);
}

/* Departments sticky top offset */
@media (max-width: 768px) {
    .departments-bar {
        top: 0 !important;
        position: relative !important;
    }
}

/* Smooth scroll for the whole page */
html { scroll-behavior: smooth; }

/* Section separator line color */
hr { border-color: var(--b2b-border); }

/* Focus outline */
*:focus-visible {
    outline: 2px solid var(--b2b-primary);
    outline-offset: 2px;
}

/**
 * Tema unificado da loja.
 * Identidade visual centralizada em variaveis para gestao administrativa.
 */

:root {
    /* Brand Colors */
    --pagani-primary: #35348C;
    --pagani-dark: #000000;
    
    /* Layout & General */
    --page-bg: #f4f4f4;
    --text-main: #000000;
    --text-muted: var(--text-muted);
    
    /* Top Bar */
    --topbar-bg: #000000;
    --topbar-text: #cccccc;
    --topbar-h-bg: #35348C;
    --topbar-h-text: #ffffff;
    
    /* Header & Menu */
    --header-bg: #ffffff;
    --menu-bg: #000000;
    --menu-text: #ffffff;
    --menu-h-text: #35348C;
    
    /* Buttons */
    --btn-primary-bg: #35348C;
    --btn-primary-text: #ffffff;
    --btn-primary-h-bg: #25245F;
    --btn-primary-h-text: #ffffff;
    
    /* Product Cards */
    --card-bg: #ffffff;
    --card-border: var(--color-border);
    --price-color: #000000;
    --price-promo: #cc0000;
    
    /* Footer */
    --footer-bg: #17172A;
    --footer-title: #35348C;
    --footer-text: #ffffff;
    --footer-link-h: #35348C;
}

/* --- Global & Layout --- */
body { 
    background-color: var(--page-bg) !important; 
    color: var(--text-main) !important; 
}

/* --- Top Bar --- */
.store-topbar { 
    background: var(--topbar-bg) !important; 
    color: var(--topbar-text) !important; 
}
.store-topbar-links a { color: var(--topbar-text) !important; }
.store-topbar-links a:hover { color: var(--topbar-text) !important; }
.store-topbar-highlight { 
    background: var(--topbar-h-bg) !important; 
    color: var(--topbar-h-text) !important; 
    font-weight: 800 !important;
}
.store-topbar-highlight i, .store-topbar-highlight span { color: inherit !important; }

/* --- Header & Menu --- */
header { background: var(--header-bg) !important; }
.departments-bar { background: var(--menu-bg) !important; }
.departments-inner a { color: var(--menu-text) !important; }
.departments-inner .departments-dropdown-menu a { color: var(--text-main) !important; }
.departments-inner .departments-dropdown-menu a:hover,
.departments-inner .departments-dropdown-menu a.active-dept {
    color: var(--menu-h-text) !important;
    background: var(--menu-h-bg) !important;
}

/* --- Botões de Ação --- */
.cart-pill {
    background-color: var(--header-cart-bg) !important;
    color: var(--header-cart-text) !important;
    border: none !important;
}
.cart-pill:hover {
    background-color: var(--header-cart-h-bg) !important;
    color: var(--header-cart-h-text) !important;
}
.cart-pill i { color: inherit !important; }

.btn-primary, .swal2-confirm, .pcard-btn-buy, .buy-btn-refined, .modern-search button, .i3-btn-buy { 
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important; 
    border: none !important;
}
.btn-primary:hover, .swal2-confirm:hover, .modern-search button:hover, .pcard-btn-buy:hover, .i3-btn-buy:hover {
    background-color: var(--btn-primary-h-bg) !important;
    color: var(--btn-primary-h-text) !important; 
}
.btn-primary i, .pcard-btn-buy i, .i3-btn-buy i { color: inherit !important; }

/* --- Barra de Benefícios --- */
.i3-benefits { background: var(--benefits-bg) !important; }
.i3-benefit-icon { background: var(--benefits-icon-bg) !important; color: var(--benefits-icon) !important; }
.i3-benefit-text strong, .i3-benefit-text span { color: var(--benefits-text) !important; }

/* --- Cards de Produto --- */
.i3-pcard, .product-card, .pcard-inner { 
    background: var(--card-bg) !important; 
    border: 1px solid var(--card-border) !important; 
}
.i3-pcard-name, .pcard-title a { color: var(--text-main) !important; }
.i3-pcard-name a:hover, .pcard-title a:hover { color: var(--card-title-hover) !important; }
.i3-pcard-price, .pcard-price-current { color: var(--price-color) !important; }
.i3-pcard-price.promo, .pcard-price-current.is-promo { color: var(--price-promo) !important; }
.i3-pcard-badge, .pcard-badge-promo { 
    background: var(--badge-promo-bg) !important; 
    color: var(--badge-promo-text) !important; 
}
.i3-pcard-badge.leadtime {
    background: var(--leadtime-badge-bg) !important;
    color: var(--leadtime-badge-text) !important;
}
.i3-pcard-badge.installment {
    background: var(--installment-badge-bg) !important;
    color: var(--installment-badge-text) !important;
}

/* --- Rodapé --- */
.b2b-site-footer { 
    background: var(--footer-bg) !important; 
    color: var(--footer-text) !important; 
}
.footer-col-title, .b2b-site-footer h4 { color: var(--footer-title) !important; }
.b2b-site-footer a { color: var(--footer-text) !important; opacity: 0.8; }
.b2b-site-footer a:hover { color: var(--footer-link-h) !important; opacity: 1; }

/* --- UI Utility & Layout --- */
.header-logo-container { flex-shrink: 0; min-width: 200px; display: flex; align-items: center; justify-content: flex-start; }
.header-logo-img { height: 85px !important; width: auto !important; max-height: none !important; display: block; padding: 5px 0; }
.user-welcome-text { font-size: 0.75rem; color: var(--text-muted); }
.nav-margin-right { margin-right: 15px; }
.nav-btn-small { padding: 6px 12px; font-size: 0.8rem; }
.mobile-nav-promo { color: var(--price-promo); font-weight: 700; }
.mobile-menu-section-title { padding: 10px 20px; font-weight: 700; color: var(--text-muted); font-size: 0.85rem; text-transform: uppercase; }
.mobile-nav-dept-all, .mobile-nav-dept-item { padding-left: 30px; }
.nav-icon-muted { font-size: 0.9em; opacity: 0.7; }
.nav-icon-tiny { font-size: 0.8em; opacity: 0.5; }
.hero-loader-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.main-spacing { padding-top: 30px; padding-bottom: 60px; }
.section-top-zero { margin-top: 0; position: relative; }
.section-controls { display: flex; gap: 10px; align-items: center; }

/* Standard Page UI */
.page-container-padded { padding: 40px 20px; }
.page-card-standard { background: var(--surface-bg); border-radius: 12px; padding: 40px; box-shadow: 0 4px 15px color-mix(in srgb, var(--shadow-color) 5%, transparent); border: 1px solid var(--card-border); max-width: 900px; margin: 0 auto; }
.page-header-container { margin-bottom: 30px; border-bottom: 2px solid var(--color-border); padding-bottom: 20px; }
.page-title-main { font-size: 2rem; margin: 0; color: var(--text-main); }
.page-subtitle-text { color: var(--text-muted); margin-top: 10px; }
.page-content-formatted { line-height: 1.7; color: var(--text-main); font-size: 1rem; }
.page-content-formatted h2 { color: var(--text-main); margin-top: 30px; margin-bottom: 15px; font-size: 1.5rem; }
.page-content-formatted a { color: var(--text-main); text-decoration: underline; }

/* Success & Payment UI */
.success-card { max-width: 600px; margin: 40px auto; text-align: center; padding: 40px; background: var(--surface-bg); border-radius: 12px; box-shadow: 0 4px 20px color-mix(in srgb, var(--shadow-color) 8%, transparent); }
.success-icon-circle { width: 80px; height: 80px; background: var(--success-icon-bg); color: var(--color-success); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 30px; font-size: 2.5rem; }
.success-title { color: var(--text-main); margin-bottom: 10px; font-size: 1.5rem; }
.success-msg { color: var(--text-muted); margin-bottom: 30px; }
.payment-box { padding: 20px; border-radius: 8px; margin-bottom: 30px; border: 1px solid transparent; }
.ticket-box { background: var(--ticket-bg); border-color: var(--ticket-border); }
.payment-box-icon { font-size: 2rem; color: var(--color-warning); margin-bottom: 10px; }
.pix-box { background: var(--pix-bg); border-color: var(--pix-border); padding: 25px; border-radius: 12px; }
.pix-qr { width: 200px; height: 200px; margin-bottom: 15px; border: 4px solid var(--surface-bg); border-radius: 8px; box-shadow: 0 4px 12px color-mix(in srgb, var(--shadow-color) 10%, transparent); }
.pix-input { flex: 1; padding: 10px; border: 1px solid var(--pix-border); border-radius: 6px; font-size: 0.75rem; background: var(--input-bg); }
.pix-copy-btn { padding: 10px; background: var(--color-success); color: var(--color-text-inverse); border: none; border-radius: 6px; cursor: pointer; }
.success-actions { display: flex; gap: 15px; justify-content: center; }
.btn-success-action { padding: 12px 25px; }
.bg-white { background: var(--surface-bg) !important; }

/* --- Index & Extra UI --- */

/* Popup Modal */
.i3-popup-overlay { position:fixed; inset:0; background:color-mix(in srgb, var(--popup-overlay) 65%, transparent); z-index:100100; backdrop-filter:blur(4px); display: none; }
.i3-popup-modal { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--popup-bg); border-radius:20px; overflow:hidden; max-width:560px; width:90%; box-shadow:0 30px 80px color-mix(in srgb, var(--shadow-color) 30%, transparent); }
.i3-popup-close { position:absolute; top:14px; right:14px; z-index:10; background:color-mix(in srgb, var(--popup-close-bg) 50%, transparent); border:none; color:var(--popup-close-text); width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; }
.i3-popup-img-container { height:200px; overflow:hidden; }
.i3-popup-img { width:100%; height:100%; object-fit:fill; display:block; }
.i3-popup-content { padding:32px 36px; }
.i3-popup-title { font-size:1.5rem; font-weight:800; color:var(--text-main); margin:0 0 10px; }
.i3-popup-subtitle { font-size:.95rem; color:var(--text-muted); margin:0 0 20px; line-height:1.6; }
.i3-popup-coupon-box { width:100%; display:block; background:linear-gradient(135deg,var(--popup-coupon-bg1),var(--popup-coupon-bg2)); border:2px dashed var(--btn-primary-bg); border-radius:12px; padding:16px 20px; margin-bottom:20px; text-align:center; font:inherit; cursor:pointer; transition:transform .2s ease, border-color .2s ease, background-color .2s ease; }
.i3-popup-coupon-box:hover { transform:translateY(-1px); border-color:var(--btn-primary-h-bg); }
.i3-popup-coupon-box:focus-visible { outline:3px solid color-mix(in srgb, var(--btn-primary-bg) 25%, transparent); outline-offset:3px; }
.i3-popup-coupon-label { font-size:.8rem; color:var(--btn-primary-bg); font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.i3-popup-coupon-code { display:flex; align-items:center; justify-content:center; gap:10px; font-size:1.8rem; font-weight:900; color:var(--text-main); letter-spacing:4px; }
.i3-popup-coupon-code i { font-size:1rem; letter-spacing:0; color:var(--btn-primary-bg); }
.i3-popup-coupon-desc { font-size:.78rem; color:var(--text-muted); margin-top:4px; }
.i3-popup-coupon-copy-hint { margin-top:8px; font-size:.7rem; font-weight:700; color:var(--btn-primary-bg); text-transform:uppercase; letter-spacing:.04em; }
.i3-popup-btn { display:block; text-align:center; background: var(--btn-primary-bg); color: var(--btn-primary-text); padding:15px; border-radius:8px; font-weight:800; font-size:1rem; text-decoration:none; }
.i3-popup-cancel { text-align:center; margin-top:14px; font-size:.78rem; color:var(--text-muted); }
.i3-popup-cancel a { color:var(--text-muted); text-decoration:underline; }

/* Coupon Bar */
.i3-coupon-bar {
    background: linear-gradient(135deg, var(--coupon-bg1), var(--coupon-bg2));
    border-radius: 12px; margin: 0 0 30px;
    cursor: pointer; overflow: hidden; transition: .3s;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--shadow-color) 15%, transparent);
}
.i3-coupon-bar:hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-color) 30%, transparent); }
.i3-coupon-inner { display: flex; align-items: center; gap: 20px; padding: 18px 28px; color: var(--coupon-text); }
.i3-coupon-icon { font-size: 1.8rem; color: inherit; flex-shrink: 0; }
.i3-coupon-text { flex: 1; }
.i3-coupon-text strong { display: block; font-size: 1rem; font-weight: 800; }
.i3-coupon-text span { font-size: .82rem; opacity: .85; }
.i3-coupon-btn {
    flex-shrink: 0; background: var(--page-bg); color: var(--text-main);
    padding: 10px 22px; border-radius: 30px; font-weight: 800;
    font-size: .82rem; text-decoration: none;
    display: flex; align-items: center; gap: 6px; white-space: nowrap; transition: .3s;
}

/* Mid-page Banner */
.i3-mid-banner { position: relative; text-decoration: none; display: block; margin-bottom: 30px; border-radius: 12px; overflow: hidden; border:0; box-shadow:0 8px 20px color-mix(in srgb, var(--mid-banner-shadow) 12%, transparent); }
.i3-mid-banner img { width: 100%; height: auto; display: block; border-radius: 12px; }
.i3-mid-banner-overlay {
    position: absolute; inset: 0; border-radius: 12px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--banner-overlay) 65%, transparent) 0%, color-mix(in srgb, var(--banner-overlay-soft) 10%, transparent) 100%);
    display: flex; align-items: center; justify-content: space-between;
    padding: 28px 40px; color: var(--banner-text);
}
.i3-mid-banner-overlay strong { display: block; font-size: 1.4rem; font-weight: 800; margin-bottom: 4px; }
.i3-mid-banner-overlay span { font-size: .88rem; opacity: .85; }
.i3-mid-banner-btn {
    background: var(--banner-button-bg); color: var(--banner-button-text); padding: 12px 28px; border-radius: 30px;
    font-weight: 800; font-size: .88rem; display: flex; align-items: center;
    gap: 8px; white-space: nowrap; flex-shrink: 0; transition: .3s;
}
.i3-mid-banner:hover .i3-mid-banner-btn { background: var(--banner-button-hover-bg); color: var(--banner-button-hover-text); transform: scale(1.04); }

@media(max-width:600px){
    .i3-coupon-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
    .i3-coupon-btn { width: 100%; justify-content: center; }
    .i3-mid-banner-overlay { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
    .i3-mid-banner-overlay strong { font-size: 1rem; }
}
/* ===================================================
   INDEX3 - Redesign inspirado no SuperPro Atacado
   Vermelho/laranja vibrante, atacado premium B2C
   =================================================== */

:root {
    /* Mapeamento para o Sistema Global de Cores */
    --i3-primary:    var(--btn-primary-bg, #35348C);
    --i3-primary-d:  var(--btn-primary-h-bg, #ffffff);
    --i3-primary-l:  color-mix(in srgb, var(--btn-primary-bg, #35348C) 20%, transparent);
    --i3-accent:     var(--pagani-dark, #ffffff);
    --i3-accent-d:   var(--text-main, #ffffff);
    --i3-yellow:     var(--pagani-primary, #35348C);
    --i3-green:      var(--color-success);
    --i3-red:        var(--price-promo, #cc0000);
    --i3-bg:         var(--page-bg, #f4f4f4);
    --i3-white:      var(--color-text-inverse, #ffffff);
    --i3-border:     var(--card-border, var(--color-border));
    --i3-text:       var(--text-main, #ffffff);
    --i3-muted:      var(--text-muted, var(--text-muted));
    --i3-shadow:     0 2px 8px color-mix(in srgb, var(--shadow-color) 10%, transparent);
    --i3-shadow-lg:  0 8px 28px color-mix(in srgb, var(--shadow-color) 14%, transparent);
    --i3-radius:     6px;
    --i3-radius-lg:  10px;
    --i3-max:        1400px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }

body.i3-page {
    background: var(--i3-bg);
    font-family: 'Inter', 'Roboto', sans-serif;
    color: var(--i3-text);
    margin: 0;
}

.i3-wrap {
    max-width: var(--i3-max);
    margin: 0 auto;
    padding: 0 16px;
}

/* Floating WhatsApp */
.i3-wa {
    position: fixed;
    bottom: 24px; right: 24px;
    background: var(--whatsapp-bg);
    color: var(--whatsapp-text);
    padding: 12px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: .88rem;
    display: flex;
    align-items: center;
    gap: 9px;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--whatsapp-bg) 40%, transparent);
    z-index: 9999;
    transition: .3s;
}
.i3-wa:hover { transform: translateY(-4px); color:var(--whatsapp-text); box-shadow:0 10px 28px color-mix(in srgb, var(--whatsapp-bg) 50%, transparent); }
.i3-wa i { font-size: 1.35rem; }
@media(max-width:600px){ .i3-wa span{display:none;} .i3-wa{padding:14px;border-radius:50%;} }

/* Hero banner */
.i3-hero {
    background: var(--hero-banner-bg, var(--slider-bg));
    width: 100%;
    height: clamp(220px, 25vw, 330px);
    position: relative;
    overflow: hidden;
    margin-top: 16px;
    margin-bottom: 0;
    border: 0;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--hero-banner-shadow, var(--shadow-color)) 12%, transparent);
}
@media(max-width:768px){ .i3-hero{ height: 180px; margin-top:10px; } }

.i3-slider-wrap { display:flex; height:100%; transition: transform .6s cubic-bezier(.4,0,.2,1); will-change:transform; }
.i3-slide { flex:0 0 100%; width:100%; height:100%; position:relative; }
.i3-slide img { width:100%; height:100%; object-fit:fill; display:block; }
.i3-slide-link { display:block; width:100%; height:100%; }

.i3-slider-btn {
    position:absolute; top:50%; transform:translateY(-50%);
    background:color-mix(in srgb, var(--slider-btn-bg) 90%, transparent); color:var(--slider-btn-text);
    border:1px solid color-mix(in srgb, var(--slider-btn-border, var(--slider-btn-bg)) 65%, transparent);
    width:46px; height:46px; border-radius:50%;
    cursor:pointer; z-index:10; font-size:1.1rem;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px color-mix(in srgb, var(--hero-banner-shadow, var(--shadow-color)) 20%, transparent); transition:.3s;
}
.i3-slider-btn:hover { background:var(--slider-btn-hover-bg); color:var(--slider-btn-hover-text); border-color:var(--slider-btn-hover-bg); transform:translateY(-50%) scale(1.08); }
.i3-slider-prev{ left:18px; } .i3-slider-next{ right:18px; }

.i3-slider-dots {
    position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
    display:flex; gap:8px; z-index:10;
}
.i3-slider-dots .dot {
    width:9px; height:9px; border-radius:50%;
    background:color-mix(in srgb, var(--slider-dot-bg) 50%, transparent); cursor:pointer; transition:.3s;
    border:1px solid color-mix(in srgb, var(--slider-dot-border, var(--slider-dot-bg)) 55%, transparent);
}
.i3-slider-dots .dot.active { width:28px; border-radius:5px; background:var(--slider-dot-active-bg); border-color:var(--slider-dot-active-bg); }

/* Benefits bar */
.i3-benefits {
    background: var(--i3-primary);
    padding: 0;
    margin-top: 18px;
    margin-bottom: 20px;
}
.i3-benefits-inner {
    display:flex;
    justify-content:space-around;
    align-items:stretch;
    max-width:var(--i3-max);
    margin:0 auto;
    padding:0 16px;
}
.i3-benefit {
    display:flex; align-items:center; gap:12px;
    padding:13px 18px;
    flex:1;
    border-right:1px solid color-mix(in srgb, var(--benefits-text) 20%, transparent);
    min-width:0;
    color: var(--benefits-text);
    text-decoration: none;
    transition: .2s ease;
}
.i3-benefit:last-child{ border-right:none; }
.i3-benefit:hover {
    background: color-mix(in srgb, var(--benefits-text) 8%, transparent);
    color: var(--benefits-text);
}
.i3-benefit-icon {
    width:40px; height:40px; flex-shrink:0;
    background:color-mix(in srgb, var(--benefits-text) 15%, transparent);
    color:var(--benefits-text); border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.15rem;
}
.i3-benefit-text strong { display:block; font-size:.78rem; font-weight:700; color:var(--benefits-text); }
.i3-benefit-text span { font-size:.68rem; color:color-mix(in srgb, var(--benefits-text) 80%, transparent); }
@media(max-width:768px){
    .i3-benefits-inner{ flex-wrap:wrap; gap:0; }
    .i3-benefit{ flex:1 1 50%; border-right:none; border-bottom:1px solid color-mix(in srgb, var(--benefits-text) 15%, transparent); padding:10px 12px; }
    .i3-benefit:last-child{ border-bottom:none; }
}
@media(max-width:400px){
    .i3-benefit{ flex:1 1 100%; }
}

/* Section spacing */
.i3-section { margin: 28px 0; }

/* Section header */
.i3-section-head {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:18px;
    padding-bottom:12px;
    border-bottom:3px solid var(--i3-primary);
}
.i3-section-head h2 {
    font-size:1.2rem; font-weight:800;
    color:var(--text-main); margin:0;
    display:flex; align-items:center; gap:10px;
    text-transform:uppercase;
    letter-spacing:.3px;
}
.i3-section-head h2 i { color:var(--section-icon); }
.i3-see-all {
    font-size:.78rem; font-weight:700;
    color:var(--section-nav-main); text-decoration:none;
    display:flex; align-items:center; gap:5px;
    padding:6px 14px; border-radius:4px;
    border:1.5px solid var(--section-nav-main);
    background:var(--section-nav-bg);
    transition:.2s; white-space:nowrap;
    text-transform:uppercase;
}
.i3-see-all:hover { background:var(--section-nav-main); color:var(--section-nav-bg); }

/* Promo carousel */
.i3-promo-track {
    display:flex; gap:16px;
    overflow-x:auto; padding: 10px 0 15px;
    scrollbar-width:none; -ms-overflow-style:none;
}
.i3-promo-track::-webkit-scrollbar{ display:none; }
.i3-promo-nav { display:flex; gap:8px; }
.i3-scroll-btn {
    width:34px; height:34px; border-radius:6px;
    border:1.5px solid var(--color-border); background:var(--section-nav-bg);
    color:var(--text-muted); cursor:pointer; font-size:.88rem;
    display:flex; align-items:center; justify-content:center;
    transition:.2s;
}
.i3-scroll-btn:hover { border-color:var(--section-nav-main); color:var(--section-nav-main); }

/* Product card */
.i3-pcard {
    background:var(--card-bg); border-radius:var(--i3-radius);
    border:1px solid var(--i3-border);
    display:flex; flex-direction:column;
    transition:all .28s ease;
    position:relative; overflow:hidden;
    box-shadow:var(--i3-shadow);
    text-decoration:none; color:inherit;
}
.i3-pcard:hover {
    box-shadow:var(--i3-shadow-lg);
    border-color:var(--i3-primary);
    transform:translateY(-4px);
}

/* Promo card (carousel) */
.i3-pcard-sm { flex:0 0 200px; min-width:200px; }

/* Grid card */
.i3-pcard-grid { width:100%; }

.i3-pcard-badge {
    position:absolute; top:0; left:0; z-index:5;
    background: var(--badge-promo-bg);
    color:var(--badge-promo-text); font-size:.65rem; font-weight:800;
    padding:4px 10px;
    border-bottom-right-radius:8px;
}
.i3-pcard-badge.new { background:var(--i3-green); }
.i3-pcard-badge.out { background:var(--text-muted); }
.i3-pcard-badge.leadtime {
    left: auto;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: calc(100% - 12px);
    background: var(--leadtime-badge-bg) !important;
    color: var(--leadtime-badge-text) !important;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 8px;
}
.i3-pcard-badge.installment {
    top: 30px;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--installment-badge-bg) !important;
    color: var(--installment-badge-text) !important;
}

.i3-pcard-img {
    height:175px; display:flex;
    align-items:center; justify-content:center;
    padding:14px; background:var(--pcard-image-bg);
    border-bottom:1px solid var(--pcard-image-border);
    overflow:hidden;
    position: relative;
}
.i3-pcard-img img {
    max-width:100%; max-height:100%;
    object-fit:contain;
    transition:transform .4s ease;
}
.i3-pcard:hover .i3-pcard-img img { transform:scale(1.06); }

.i3-pcard-body { padding:12px; flex:1; display:flex; flex-direction:column; gap:5px; }
.i3-pcard-sku { font-size:.6rem; color:var(--i3-muted); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.i3-pcard-name {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--i3-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.i3-pcard-name a { color:inherit; text-decoration:none; }
.i3-pcard-name a:hover { color:var(--card-title-hover); }

/* Price Box */
.i3-price-box {
    background:var(--price-box-bg);
    border:1px solid var(--price-box-border);
    border-radius:5px;
    padding:8px 10px;
    margin-top:auto;
    text-align:center;
}
.i3-price-old { font-size:.7rem; color:var(--text-muted); text-decoration:line-through; margin-bottom:1px; text-align:center; }
.i3-price-main {
    font-size:1.3rem; font-weight:900;
    color:var(--price-color); line-height:1.1;
    text-align:center;
}
.i3-price-main.promo { color:var(--price-promo); }
.i3-price-multi { font-size:.62rem; color:var(--i3-muted); margin-top:2px; font-weight:600; text-align:center; }

/* Stock tag */
.i3-stock-tag {
    font-size:.68rem; font-weight:600;
    display:flex; align-items:center; gap:5px;
}
.i3-stock-tag.ok { color:var(--i3-green); }
.i3-stock-tag.out { color:var(--i3-red); }
.i3-stock-tag.lead { color:var(--leadtime-badge-bg); }

.product-detail-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 12px;
}
.product-detail-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 4px;
    padding: 5px 11px;
    font-size: .72rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.product-detail-badge.promo {
    background: var(--badge-promo-bg);
    color: var(--badge-promo-text);
}
.product-detail-badge.leadtime {
    background: var(--leadtime-badge-bg);
    color: var(--leadtime-badge-text);
}
.product-detail-badge.installment {
    background: var(--installment-badge-bg);
    color: var(--installment-badge-text);
}
.product-detail-badge.outstock {
    background: color-mix(in srgb, var(--out-stock-color) 14%, transparent);
    color: var(--out-stock-color);
    border: 1px solid color-mix(in srgb, var(--out-stock-color) 35%, transparent);
}

.product-gallery-view {
    padding: 40px;
    border-right: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
    background: #fff;
    min-width: 0;
}

.product-gallery-stage {
    position: relative;
    width: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-gallery-stage img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
}

.product-gallery-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 42px;
    height: 42px;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--btn-primary-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-color) 16%, transparent);
    transform: translateY(-50%);
}

.product-gallery-prev {
    left: 4px;
}

.product-gallery-next {
    right: 4px;
}

.product-gallery-thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 8px;
}

.product-gallery-thumb {
    width: 74px;
    height: 74px;
    flex: 0 0 74px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    cursor: pointer;
}

.product-gallery-thumb.is-active {
    border-color: var(--btn-primary-bg);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--btn-primary-bg) 18%, transparent);
}

.product-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-info-sections {
    align-items: start;
}

.product-description-card,
.product-specs-card {
    background: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

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

.product-specs-table td {
    vertical-align: top;
    line-height: 1.35;
}

.product-specs-table td:first-child {
    white-space: nowrap;
}

@media (max-width: 860px) {
    .product-detail-grid {
        grid-template-columns: 1fr !important;
    }

    .product-gallery-view {
        padding: 22px;
        border-right: 0;
        border-bottom: 1px solid #f1f5f9;
    }

    .product-gallery-stage {
        min-height: 280px;
    }

    .product-gallery-stage img {
        max-height: 280px;
    }
}

.i3-pcard-foot {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:10px 12px;
    padding-top:0;
}

/* Qty and buy controls */
.i3-buy-row {
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:7px;
    width:100%;
}
.i3-qty {
    display:flex; align-items:center;
    border:1.5px solid var(--color-border); border-radius:5px;
    overflow:hidden; height:38px; background:var(--input-bg);
    flex-shrink:0;
}
.i3-qty button {
    width:30px; height:100%; border:none;
    background:var(--qty-btn-bg); color:var(--qty-btn-text);
    font-size:.95rem; font-weight:700; cursor:pointer; transition:.2s;
    flex-shrink:0;
}
.i3-qty button:hover { background:var(--i3-primary); color:var(--btn-primary-text); }
.i3-qty input {
    width:36px; text-align:center; border:none;
    border-left:1.5px solid var(--color-border); border-right:1.5px solid var(--color-border);
    font-size:.85rem; font-weight:700; outline:none;
    -moz-appearance:textfield; background:var(--input-bg);
}
.i3-qty input::-webkit-outer-spin-button,
.i3-qty input::-webkit-inner-spin-button { -webkit-appearance:none; }

.i3-btn-buy {
    flex:1; height:38px; min-width:0; border:none; border-radius:5px;
    background: var(--i3-primary);
    color:var(--btn-primary-text); font-weight:700; font-size:.78rem;
    text-transform:uppercase; letter-spacing:.5px;
    cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;
    transition:.25s; box-shadow:0 3px 10px color-mix(in srgb, var(--shadow-color) 15%, transparent);
}
.i3-btn-buy:hover { background:var(--i3-primary-d); box-shadow:0 5px 16px color-mix(in srgb, var(--shadow-color) 20%, transparent); transform:translateY(-1px); }
.i3-btn-buy:active { transform:translateY(0); }

.i3-btn-notify {
    flex:1; width:100%; min-width:0; min-height:42px; padding:0 14px;
    border:1.5px solid var(--i3-primary); border-radius:5px;
    background:transparent; color:var(--i3-primary);
    font-weight:700; font-size:.75rem; text-transform:uppercase;
    cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;
    white-space:nowrap; line-height:1.1; transition:.25s;
}
.i3-btn-notify:hover { background:var(--i3-primary); color:var(--btn-primary-text); }

.i3-btn-details {
    width: 100%;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1.5px solid var(--i3-primary);
    border-radius: 5px;
    background: transparent;
    color: var(--i3-primary);
    font-size: .74rem;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    transition: .2s ease;
}

.i3-btn-details:hover {
    background: var(--i3-primary);
    color: var(--btn-primary-text);
}

.i3-login-gate {
    padding:9px 10px; background:var(--login-gate-bg); border-radius:5px;
    text-align:center; margin-top:auto;
    border:1px dashed var(--login-gate-border);
}
.i3-login-gate a { color:var(--i3-primary); font-size:.7rem; font-weight:800; text-decoration:none; }

.i3-tiers-link { font-size:.65rem; color:var(--i3-primary); font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:4px; margin-top:3px; }

/* Product grid */
.i3-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
    gap:16px;
    padding: 10px 0 15px;
}
@media(max-width:1200px){ .i3-grid{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; } }
@media(max-width:768px){
    .i3-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
    .i3-pcard-img{ height:130px; padding:10px; }
    .i3-price-main{ font-size:1.05rem; }
    .i3-pcard-name{ font-size:.77rem; }
}
@media(max-width:380px){ .i3-grid{ grid-template-columns:repeat(2,1fr); gap:8px; } }

/* Sort and filter bar */
.i3-filter-bar {
    display:flex; justify-content:space-between; align-items:center;
    background:var(--filter-bar-bg); border-radius:var(--i3-radius);
    border:1px solid var(--i3-border);
    padding:10px 18px; margin-bottom:18px;
    box-shadow:var(--i3-shadow); flex-wrap:wrap; gap:10px;
}
.i3-filter-bar label { font-size:.76rem; font-weight:700; color:var(--i3-muted); text-transform:uppercase; }
.i3-filter-bar select {
    padding:7px 12px; border-radius:5px;
    border:1.5px solid var(--i3-border); font-size:.8rem;
    outline:none; cursor:pointer; font-family:inherit;
    background:var(--filter-select-bg); color:var(--i3-text);
}
.i3-filter-bar select:focus { border-color:var(--i3-primary); }
.i3-result-count { font-size:.8rem; color:var(--i3-muted); }
.i3-result-count strong { color:var(--i3-text); font-weight:800; }

/* Pagination */
.i3-pagination {
    display:flex; justify-content:center; align-items:center;
    gap:7px; margin-top:40px; flex-wrap:wrap;
}
.i3-pagination a, .i3-pagination span {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:40px; height:40px; border-radius:5px;
    text-decoration:none; font-weight:700; font-size:.85rem;
    transition:.2s; padding:0 10px;
}
.i3-pagination a { background:var(--card-bg); border:1.5px solid var(--i3-border); color:var(--i3-text); }
.i3-pagination a:hover { border-color:var(--i3-primary); color:var(--i3-primary); background:var(--price-box-bg); }
.i3-pagination span.current { background:var(--i3-primary); color:var(--btn-primary-text); border:1.5px solid var(--i3-primary); }

/* Empty state */
.i3-empty {
    text-align:center; padding:70px 20px;
    background:var(--card-bg); border-radius:var(--i3-radius);
    border:1px solid var(--i3-border);
}
.i3-empty i { font-size:3rem; color:var(--empty-icon); margin-bottom:14px; display:block; }
.i3-empty h3 { font-size:1.05rem; color:var(--text-muted); margin-bottom:7px; }
.i3-empty p { font-size:.86rem; color:var(--i3-muted); }

/* Variation select */
.i3-var-select {
    width:100%; padding:7px 10px;
    border:1.5px solid var(--i3-border); border-radius:5px;
    font-size:.77rem; background:var(--input-bg);
    margin-bottom:7px; outline:none; font-family:inherit;
}
.i3-var-select:focus { border-color:var(--i3-primary); }

/* Coupon banner */
.i3-coupon-bar {
    background: linear-gradient(135deg, var(--coupon-bg1), var(--coupon-bg2));
    border-radius: var(--i3-radius); margin: 0 0 24px;
    overflow: hidden; transition: .25s;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--shadow-color) 15%, transparent);
    background-size: 100% 100%;
    background-position: center;
}
.i3-coupon-bar:hover { transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, var(--shadow-color) 20%, transparent); }
.i3-coupon-inner { display: flex; align-items: center; gap: 18px; padding: 16px 24px; color: var(--coupon-text); }
.i3-coupon-icon { font-size: 1.7rem; color: inherit; flex-shrink: 0; }
.i3-coupon-text { flex: 1; }
.i3-coupon-text strong { display: block; font-size: .96rem; font-weight: 800; }
.i3-coupon-text span { font-size: .79rem; opacity: .88; }
.i3-coupon-btn {
    flex-shrink: 0; background: var(--coupon-button-bg); color: var(--coupon-button-text);
    padding: 9px 20px; border-radius: 4px; font-weight: 800;
    font-size: .78rem; text-decoration: none;
    display: flex; align-items: center; gap: 6px; white-space: nowrap; transition: .25s;
    text-transform: uppercase;
}
.i3-coupon-btn:hover { background: var(--coupon-button-hover-bg); color: var(--coupon-button-text); }
.i3-coupon-code {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 9px 18px;
    border: 2px dashed color-mix(in srgb, var(--coupon-button-bg) 78%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--coupon-button-bg) 12%, transparent);
    color: var(--coupon-text);
    font-family: var(--font-display);
    font-size: .98rem;
    font-weight: 900;
    letter-spacing: .6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: .2s ease;
}
.i3-coupon-code:hover {
    background: color-mix(in srgb, var(--coupon-button-bg) 20%, transparent);
    transform: translateY(-1px);
}

/* Mid-page banner */
.i3-mid-banner { position: relative; text-decoration: none; display:block; border:0; box-shadow:0 8px 20px color-mix(in srgb, var(--mid-banner-shadow) 12%, transparent); border-radius:var(--i3-radius); overflow:hidden; }
.i3-mid-banner-inline { margin: 30px 0; }
.i3-mid-banner img { width: 100%; height: 180px; object-fit: fill; display: block; }
.i3-mid-banner-overlay {
    position: absolute; inset: 0; border-radius: var(--i3-radius);
    background: transparent;
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 36px; color: var(--banner-text);
}
.i3-mid-banner-overlay strong { display: block; font-size: 1.35rem; font-weight: 800; margin-bottom: 4px; }
.i3-mid-banner-overlay span { font-size: .86rem; opacity: .88; }
.i3-mid-banner-btn {
    background: var(--banner-button-bg); color: var(--banner-button-text); padding: 11px 26px; border-radius: 4px;
    font-weight: 800; font-size: .85rem; display: flex; align-items: center;
    gap: 7px; white-space: nowrap; flex-shrink: 0; transition: .25s;
    text-transform: uppercase;
}
.i3-mid-banner:hover .i3-mid-banner-btn { background: var(--banner-button-hover-bg); color: var(--banner-button-hover-text); transform: scale(1.04); }

/* Responsive tweaks */
@media(max-width:768px){
    .i3-buy-row { flex-direction:column; }
    .i3-qty { width:100%; justify-content:space-between; }
    .i3-btn-buy, .i3-btn-notify { width:100%; height:42px; }
    .i3-section-head h2 { font-size:1rem; }
    .i3-promo-track { gap:10px; }
    .i3-pcard-sm { flex:0 0 162px; min-width:162px; }
    .i3-coupon-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
    .i3-coupon-btn, .i3-coupon-code { width: 100%; justify-content: center; }
    .i3-mid-banner-overlay { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; }
    .i3-mid-banner-overlay strong { font-size: .98rem; }
}

/* Final dynamic override - must stay after extracted page styles. */
body,
body.i3-page,
.b2b-container {
    background-color: var(--page-bg) !important;
    color: var(--text-main) !important;
}

.b2b-card,
.auth-card,
.checkout-card,
.cart-summary,
.product-detail-card,
.page-card-standard,
.success-card,
.i3-pcard,
.i3-empty {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--text-main) !important;
}

input:not(#cardPaymentBrick_container input),
select:not(#cardPaymentBrick_container select),
textarea:not(#cardPaymentBrick_container textarea),
.form-input,
.form-control,
.modern-search input {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
}

input:not(#cardPaymentBrick_container input):focus,
select:not(#cardPaymentBrick_container select):focus,
textarea:not(#cardPaymentBrick_container textarea):focus,
.form-input:focus,
.form-control:focus {
    border-color: var(--input-focus) !important;
}

.btn-primary,
.btn-submit,
.i3-btn-buy,
.modern-search button,
.checkout-btn,
a[href="checkout.php"].btn,
a[data-action="begin_guest_checkout"].btn {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border-color: var(--btn-primary-bg) !important;
}

.btn-primary:hover,
.btn-submit:hover,
.i3-btn-buy:hover,
.modern-search button:hover,
.checkout-btn:hover {
    background-color: var(--btn-primary-h-bg) !important;
    color: var(--btn-primary-h-text) !important;
    border-color: var(--btn-primary-h-bg) !important;
}

.alert-error {
    background: color-mix(in srgb, var(--color-danger) 12%, var(--surface-bg)) !important;
    color: var(--color-danger) !important;
    border-color: color-mix(in srgb, var(--color-danger) 45%, var(--surface-bg)) !important;
}

.alert-success {
    background: color-mix(in srgb, var(--color-success) 12%, var(--surface-bg)) !important;
    color: var(--color-success) !important;
    border-color: color-mix(in srgb, var(--color-success) 45%, var(--surface-bg)) !important;
}

/* Scoped standalone/auth pages. These selectors must never affect the catalog. */
.store-auth-page {
    min-height: 100vh;
    display: flex;
    overflow: hidden;
    background: var(--page-bg) !important;
}

.store-auth-page .split-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

.store-auth-page .brand-side {
    flex: 1.15;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--login-bg) 92%, #000000),
            color-mix(in srgb, var(--color-primary-dark) 86%, #17172a)
        );
    color: var(--login-text);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.store-auth-page .brand-side::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg,
            transparent 0 58%,
            color-mix(in srgb, var(--login-text) 7%, transparent) 58% 59%,
            transparent 59% 100%
        ),
        linear-gradient(90deg,
            color-mix(in srgb, var(--login-bg) 62%, transparent),
            transparent
        );
    background-position: center;
    background-size: cover;
    opacity: 1;
    pointer-events: none;
}

.store-forgot-page .brand-side {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--login-bg) 92%, #000000),
            color-mix(in srgb, var(--color-primary-dark) 86%, #17172a)
        );
}

.store-auth-page .brand-content {
    position: relative;
    z-index: 1;
    max-width: 500px;
    color: var(--login-text);
}

.store-auth-page .brand-logo {
    margin-bottom: 30px;
    display: inline-flex;
    align-items: center;
}

.store-auth-page .brand-logo img {
    max-height: 80px;
    max-width: 280px;
    width: auto;
    display: block;
    object-fit: contain;
}

.store-auth-page .brand-text {
    font-size: 1.15rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--login-text) 88%, transparent);
    font-weight: 300;
}

.store-auth-page .brand-text strong {
    color: var(--login-text);
    font-weight: 800;
}

.store-auth-page .brand-features {
    margin-top: 40px;
    list-style: none;
}

.store-auth-page .brand-features li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--login-text);
    font-weight: 700;
}

.store-auth-page .brand-features i {
    color: var(--login-text);
    background: color-mix(in srgb, var(--login-text) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--login-text) 16%, transparent);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.9rem;
}

.store-auth-page .form-side {
    flex: 1;
    position: relative;
    background:
        linear-gradient(180deg,
            var(--surface-bg),
            color-mix(in srgb, var(--color-primary) 5%, var(--page-bg))
        );
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    overflow-y: auto;
}

.store-auth-page .login-card,
.store-reset-page .form-container {
    width: 100%;
    max-width: 430px;
    background: var(--surface-bg);
    border: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
    border-radius: 18px;
    box-shadow: 0 22px 52px color-mix(in srgb, var(--shadow-color) 10%, transparent);
    padding: 34px;
    animation: storeFadeIn 0.45s ease-out;
}

.store-auth-page .login-header {
    margin-bottom: 34px;
}

.store-auth-page .login-header h2,
.store-reset-page h2 {
    font-family: 'Outfit', var(--font-display);
    font-size: 2rem;
    color: var(--color-primary-dark);
    margin-bottom: 10px;
}

.store-auth-page .login-header p,
.store-reset-page p {
    color: var(--text-muted);
}

.store-auth-page .input-group,
.store-reset-page .input-group {
    position: relative;
    margin-bottom: 22px;
}

.store-auth-page .input-group label,
.store-reset-page .input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-main);
}

.store-auth-page .input-wrapper {
    position: relative;
}

.store-auth-page .input-wrapper i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary);
    pointer-events: none;
}

.store-auth-page .form-input {
    padding-left: 45px;
    min-height: 48px;
}

.store-auth-page .auth-copyright {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid color-mix(in srgb, var(--login-text) 14%, transparent);
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--login-text) 74%, transparent);
}

.store-auth-page .auth-back-link {
    position: absolute;
    top: 20px;
    right: 20px;
    color: var(--text-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
}

.store-auth-page .auth-back-link:hover {
    color: var(--color-primary);
}

.store-auth-page .auth-forgot-row {
    text-align: right;
    margin-top: 7px;
}

.store-auth-page .auth-forgot-row a {
    font-size: 0.8rem;
    color: var(--color-primary-dark);
    text-decoration: none;
    font-weight: 700;
}

.store-auth-page .auth-forgot-row a:hover {
    color: var(--color-primary);
}

.store-auth-page .btn-login,
.store-reset-page .btn-submit {
    width: 100%;
    padding: 16px;
    background:
        linear-gradient(135deg,
            var(--login-bg),
            var(--color-primary-dark)
        );
    color: var(--login-text);
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
}

.store-auth-page .btn-login:hover,
.store-reset-page .btn-submit:hover {
    background: var(--login-bg-h);
    color: var(--login-text-h);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--login-bg-h) 22%, transparent);
}

.store-auth-page .footer-links {
    margin-top: 30px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    border-top: 1px solid var(--color-border);
    padding-top: 20px;
}

.store-auth-page .footer-links a {
    color: var(--color-primary-dark);
    text-decoration: none;
    font-weight: 700;
    border-bottom: 2px solid var(--color-primary);
}

.store-reset-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--page-bg) !important;
    padding: 20px;
}

.store-reset-page .form-container {
    background: var(--surface-bg);
    padding: 40px;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    text-align: center;
}

.store-reset-page .brand-logo img {
    max-height: 60px;
    margin: 0 auto 20px;
}

.store-maintenance-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--page-bg) !important;
    color: var(--text-main);
    padding: 20px;
}

.store-maintenance-page .maintenance-card {
    background: var(--surface-bg);
    padding: 60px 40px;
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    text-align: center;
    max-width: 500px;
    width: 90%;
    border: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
}

.store-maintenance-page .maintenance-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-warning));
}

.store-maintenance-page .icon-box {
    width: 100px;
    height: 100px;
    background: color-mix(in srgb, var(--color-primary) 14%, var(--surface-bg));
    color: var(--color-primary);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin: 0 auto 30px;
}

.store-maintenance-page h1 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: var(--text-main);
    text-transform: uppercase;
}

.store-maintenance-page p,
.store-maintenance-page .footer-info {
    color: var(--text-muted);
}

.store-maintenance-page .btn-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.store-maintenance-page .footer-info {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
    font-size: 0.85rem;
}

.feedback-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 30px;
    background: var(--surface-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

.rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 10px;
}

.rating input {
    display: none;
}

.rating label {
    font-size: 40px;
    color: var(--color-border);
    cursor: pointer;
    transition: color 0.2s;
}

.rating input:checked ~ label,
.rating label:hover,
.rating label:hover ~ label {
    color: var(--color-warning);
}

.page-content h2 {
    color: var(--color-primary);
    margin-top: 35px;
    margin-bottom: 15px;
    font-size: 1.6rem;
    border-left: 4px solid var(--color-primary);
    padding-left: 15px;
}

.page-content h3 {
    color: var(--text-main);
    margin-top: 30px;
    margin-bottom: 12px;
    font-size: 1.3rem;
}

.page-content p {
    margin-bottom: 18px;
}

.page-content ul,
.page-content ol {
    margin-bottom: 25px;
    padding-left: 20px;
}

.page-content li {
    margin-bottom: 10px;
}

.page-content a {
    color: var(--color-primary);
    text-decoration: underline;
}

@keyframes storeFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    .store-auth-page .brand-side {
        display: none;
    }

    .store-auth-page .form-side {
        flex: 1;
        padding: 20px;
    }
}

/* Layout guard: normal store pages must not inherit auth/maintenance centering. */
body.i3-page,
body:not(.store-auth-page):not(.store-reset-page):not(.store-maintenance-page) {
    display: block !important;
    min-height: 100vh;
    height: auto !important;
    overflow-x: hidden;
    overflow-y: auto;
}

.store-auth-page,
.store-reset-page,
.store-maintenance-page {
    overflow-x: hidden;
}

/* Store form baseline: dynamic colors for fields even when old pages missed classes. */
:where(body.store-page, .store-auth-page, .store-reset-page) :where(
    .form-input,
    .form-control,
    .form-select,
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not(#cardPaymentBrick_container input),
    select:not(#cardPaymentBrick_container select),
    textarea:not(#cardPaymentBrick_container textarea)
) {
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    border: 1.5px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--input-text);
    font: inherit;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

:where(body.store-page, .store-auth-page, .store-reset-page) :where(
    .form-input,
    .form-control,
    .form-select,
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not(#cardPaymentBrick_container input),
    select:not(#cardPaymentBrick_container select),
    textarea:not(#cardPaymentBrick_container textarea)
):focus {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--input-focus) 16%, transparent);
}

:where(body.store-page, .store-auth-page, .store-reset-page) :where(textarea) {
    min-height: 110px;
    resize: vertical;
}

:where(body.store-page, .store-auth-page, .store-reset-page) :where(input[readonly], textarea[readonly]) {
    background: color-mix(in srgb, var(--input-bg) 82%, var(--color-border));
    color: var(--text-muted);
}

.store-auth-page .input-wrapper .form-input {
    padding-left: 45px;
}

.i3-qty input {
    min-height: 0;
    padding: 0;
}

.form-input-uf {
    max-width: 78px;
    text-transform: uppercase;
}

.form-input-captcha {
    max-width: 96px;
    text-align: center;
    font-weight: 800;
}

:where(body.store-page) :where(.form-check-input, input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--color-primary);
}

.product-variation-select {
    margin-top: 5px;
}

.qty-control .qty-input,
.cart-qty-input {
    width: 58px;
    min-height: 0;
    padding: 4px 0;
    border: 0;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    border-radius: 0;
    text-align: center;
    font-weight: 800;
    font-size: 0.95rem;
    background: var(--input-bg);
}

.qty-control .qty-input {
    width: 40px;
    font-size: 1.05rem;
}

.cookie-consent {
    position: fixed;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    max-width: 980px;
    margin: 0 auto;
    padding: 18px 20px;
    border-radius: 10px;
    background: var(--surface-bg);
    color: var(--text-main);
    box-shadow: 0 18px 50px color-mix(in srgb, var(--shadow-color) 28%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
}

.cookie-consent[hidden] {
    display: none !important;
}

.cookie-consent-text {
    display: grid;
    gap: 4px;
    font-size: .86rem;
    line-height: 1.35;
}

.cookie-consent-text strong {
    font-size: .96rem;
    color: var(--text-main);
}

.cookie-consent-text span {
    color: var(--text-muted);
}

.cookie-consent-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookie-btn {
    border: 0;
    border-radius: 6px;
    padding: 11px 15px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.cookie-btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.cookie-btn-outline {
    background: var(--input-bg);
    color: var(--text-main);
    border: 1px solid var(--color-border);
}

@media(max-width: 700px) {
    .cookie-consent {
        left: 12px;
        right: 12px;
        bottom: 12px;
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-consent-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.cart-coupon-box {
    padding: 14px;
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--coupon-bg1) 5%, var(--cart-summary-bg));
}

.cart-coupon-label {
    display: block;
    margin-bottom: 8px;
    color: var(--cart-title);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.cart-coupon-row {
    display: flex;
    gap: 8px;
}

.cart-coupon-input {
    min-width: 0;
    min-height: 40px;
    text-transform: uppercase;
}

.cart-coupon-btn {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 14px !important;
    font-size: 0.78rem !important;
}

.cart-coupon-feedback {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
}

.cart-coupon-feedback.is-success {
    color: var(--success-color, #16a34a);
}

.cart-coupon-feedback.is-error {
    color: var(--danger-color, #dc2626);
}

.cart-coupon-remove {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.72rem;
    text-decoration: underline;
    cursor: pointer;
}

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

.qty-control .qty-input,
.i3-qty-input,
.cart-qty-input {
    -moz-appearance: textfield;
    appearance: textfield;
    outline: none !important;
    box-shadow: none !important;
}

.qty-control .qty-input:focus,
.i3-qty-input:focus,
.cart-qty-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

.i3-qty,
.i3-qty:focus,
.i3-qty:focus-within,
.i3-qty:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.i3-qty input,
.i3-qty input:focus,
.i3-qty input:focus-visible,
.i3-qty-input,
.i3-qty-input:focus,
.i3-qty-input:focus-visible {
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
    appearance: textfield !important;
}

.order-notes {
    min-height: 100px;
}

.pix-code-input {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.72rem;
}

.modern-search-input {
    min-width: 0;
}

.i3-qty-input {
    min-height: 0;
    padding: 0;
}

.method-name {
    font-weight: 800;
    color: var(--text-main);
}

.check-icon {
    color: var(--color-primary);
    opacity: 0.45;
}

.payment-option input:checked ~ .check-icon {
    opacity: 1;
}

.page-checkout .shipping-opt {
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 16px 18px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 10px !important;
    background: var(--surface-bg) !important;
    box-shadow: none !important;
}

.page-checkout .shipping-opt > input[type="radio"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.page-checkout .shipping-opt .check-icon {
    display: none !important;
}

.page-checkout .shipping-opt .method-name {
    margin-bottom: 4px !important;
    font-size: 1rem !important;
}

.page-checkout .shipping-opt .shipping-price {
    white-space: nowrap !important;
    font-weight: 800 !important;
    text-align: right !important;
}

.page-checkout .shipping-opt small,
.page-checkout .shipping-opt div {
    min-width: 0 !important;
}

.btn-continue-shopping {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-danger {
    background: var(--color-danger);
    color: var(--color-text-inverse);
    border-color: var(--color-danger);
}

.btn-danger:hover {
    filter: brightness(0.95);
}

.feedback-textarea {
    min-height: 140px;
}

/* Store footer: compact B2C layout. */
.b2b-site-footer {
    background: var(--footer-bg) !important;
    color: var(--footer-text) !important;
    font-size: 0.84rem;
    line-height: 1.45;
    margin-top: 0;
    flex-shrink: 0;
}

.b2b-site-footer .container {
    max-width: 1240px;
    padding: 0 20px;
}

.footer-upper {
    padding: 26px 0 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--footer-text) 12%, transparent);
}

.footer-grid-b2b {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

.footer-col h4 {
    margin: 0 0 10px;
    color: var(--footer-title) !important;
    font-size: 0.78rem;
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.footer-col ul,
.contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col li {
    margin: 0 0 7px;
    color: var(--footer-text);
}

.footer-col a {
    color: var(--footer-text) !important;
    opacity: 0.84;
    font-size: 0.82rem;
}

.footer-col a:hover {
    color: var(--footer-link-h) !important;
    opacity: 1;
}

.store-newsletter {
    margin-top: 18px;
}

.store-newsletter h4 {
    margin-top: 0;
}

.store-newsletter-form {
    display: flex;
    gap: 8px;
    max-width: 260px;
}

.store-newsletter-form input {
    min-width: 0;
    width: 100%;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--footer-text) 28%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--footer-bg) 82%, #ffffff);
    color: var(--footer-text);
    outline: none;
}

.store-newsletter-form input::placeholder {
    color: color-mix(in srgb, var(--footer-text) 62%, transparent);
}

.store-newsletter-form input:focus {
    border-color: var(--footer-title);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--footer-title) 18%, transparent);
}

.store-newsletter-form button {
    flex: 0 0 40px;
    width: 40px;
    min-height: 38px;
    border: 0;
    border-radius: 6px;
    background: var(--coupon-button-bg);
    color: var(--coupon-button-text);
    cursor: pointer;
}

.store-newsletter-form button:disabled {
    opacity: 0.72;
    cursor: wait;
}

.store-newsletter-feedback {
    min-height: 18px;
    margin-top: 7px;
    font-size: 0.74rem;
    font-weight: 700;
}

.store-newsletter-feedback.is-success {
    color: #22c55e;
}

.store-newsletter-feedback.is-error {
    color: #f87171;
}

.contact-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    word-break: break-word;
}

.contact-list i {
    width: 14px;
    color: var(--footer-title);
    flex: 0 0 14px;
}

.social-icons-v2 {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.social-icons-v2 a {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--footer-text) 10%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--footer-text) !important;
}

.footer-lower {
    padding: 20px 0 12px;
}

.footer-bottom-grid {
    display: grid;
    grid-template-columns: minmax(160px, 240px) minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
}

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

.footer-addresses p {
    margin: 0 0 5px;
    font-size: 0.78rem;
    color: var(--footer-text);
    opacity: 0.9;
}

.footer-address-main {
    font-weight: 700;
}

/* Checkout address */
.checkout-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 14px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
}

.checkout-alert-success {
    background: color-mix(in srgb, var(--success-color, #16a34a) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--success-color, #16a34a) 28%, #fff);
    color: var(--success-color, #166534);
}

.checkout-alert-error {
    background: color-mix(in srgb, var(--danger-color, #dc2626) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--danger-color, #dc2626) 28%, #fff);
    color: var(--danger-color, #b91c1c);
}

.checkout-address-card {
    margin-bottom: 25px;
    padding: 25px;
}

.checkout-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--checkout-title-border, var(--p-title-border));
    padding-bottom: 12px;
}

.checkout-section-heading h3 {
    margin: 0;
    color: var(--cart-title);
    font-family: 'Oswald', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
}

.checkout-section-heading h3 i {
    color: var(--price);
    margin-right: 8px;
}

.checkout-section-heading p {
    margin: 6px 0 0;
    color: var(--b2b-text-light);
    font-size: 0.86rem;
}

.checkout-address-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.checkout-field {
    min-width: 0;
}

.checkout-field-wide {
    grid-column: span 2;
}

.checkout-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--b2b-text-light);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.checkout-address-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.form-input-uf {
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .checkout-address-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .checkout-address-grid,
    .checkout-field-wide {
        grid-template-columns: 1fr;
        grid-column: span 1;
    }

    .checkout-address-actions .btn {
        width: 100%;
    }
}

.payment-methods h5 {
    margin: 0 0 8px;
    color: var(--footer-title);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0;
}

.payment-icons-list {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    color: var(--footer-text);
    font-size: 1.1rem;
}

.footer-copyright {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    margin-top: 12px;
    padding: 0 20px;
    border-top: 1px solid color-mix(in srgb, var(--footer-text) 10%, transparent);
    font-size: 0.72rem;
    line-height: 1.2;
    color: var(--footer-text);
    opacity: 0.75;
    text-align: center;
}

body.store-page.i3-page:not(.store-auth-page):not(.store-reset-page):not(.store-maintenance-page) {
    display: flex !important;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--page-bg) !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip !important;
}

html {
    overflow-x: hidden !important;
}

html:has(body.store-page.i3-page) {
    background: var(--footer-bg) !important;
    max-width: 100%;
    overflow-x: clip !important;
}

body.store-page.i3-page:not(.store-auth-page):not(.store-reset-page):not(.store-maintenance-page) > main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

body.store-page.page-index.i3-page:not(.store-auth-page):not(.store-reset-page):not(.store-maintenance-page) > main > .container-main {
    width: 100%;
    max-width: none;
    padding: 0;
}

body.store-page.i3-page:not(.store-auth-page):not(.store-reset-page):not(.store-maintenance-page) > .b2b-site-footer {
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
    box-shadow: 0 20px 0 var(--footer-bg);
}

@supports not (overflow: clip) {
    body.store-page.i3-page,
    html:has(body.store-page.i3-page),
    body.store-page.i3-page > main,
    body.store-page.i3-page > .b2b-site-footer {
        overflow-x: hidden !important;
    }
}

@media (max-width: 900px) {
    .footer-grid-b2b {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-bottom-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .footer-logo img {
        max-width: 210px;
        max-height: 58px;
    }

    .payment-icons-list {
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    .footer-upper {
        padding: 22px 0 16px;
    }

    .footer-grid-b2b {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .footer-lower {
        padding-top: 16px;
    }
}

/* Final page-bottom guard: prevents browser/page gutters after the footer. */
html {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: var(--footer-bg) !important;
}

body.store-page.i3-page,
body.store-page.i3-page:not(.store-auth-page):not(.store-reset-page):not(.store-maintenance-page) {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    background: var(--footer-bg) !important;
    background-color: var(--footer-bg) !important;
}

body.store-page.i3-page > main,
body.store-page.i3-page:not(.store-auth-page):not(.store-reset-page):not(.store-maintenance-page) > main {
    flex: 1 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: var(--page-bg) !important;
    background-color: var(--page-bg) !important;
}

body.store-page.i3-page > .b2b-site-footer,
body.store-page.i3-page:not(.store-auth-page):not(.store-reset-page):not(.store-maintenance-page) > .b2b-site-footer {
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background: var(--footer-bg) !important;
    background-color: var(--footer-bg) !important;
}

/* Mobile storefront polish: compact header, readable cards and no lateral overflow. */
@media (max-width: 768px) {
    body.store-page.i3-page {
        font-size: 15px;
        -webkit-text-size-adjust: 100%;
    }

    body.store-page.i3-page .container,
    body.store-page.i3-page .i3-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.store-page.page-index.i3-page > main > .container-main {
        padding: 0 !important;
    }

    .header-inner {
        grid-template-columns: minmax(0, 1fr) 112px !important;
        gap: 10px 8px !important;
        padding: 10px 12px 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    .header-logo-container {
        grid-area: logo;
        min-width: 0 !important;
        max-width: 104px;
    }

    .header-logo-img {
        width: auto !important;
        max-width: 104px !important;
        height: auto !important;
        max-height: 52px !important;
        padding: 0 !important;
        object-fit: contain;
    }

    .mobile-controls {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 4px !important;
        position: absolute !important;
        top: 10px;
        right: 24px;
        min-width: 0 !important;
        width: 100px !important;
        flex: none !important;
        justify-self: auto;
        max-width: 100px;
        overflow: visible;
    }

    .mobile-controls .login-btn-link {
        width: 30px !important;
        height: 30px !important;
        min-height: 30px;
        padding: 0 !important;
        border-radius: 6px;
        font-size: 0 !important;
        white-space: nowrap;
        flex: 0 0 30px;
        overflow: hidden;
    }

    .mobile-controls .login-btn-link i {
        margin: 0;
        font-size: 0.95rem;
    }

    #mobile-menu-trigger,
    .mobile-cart-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: color-mix(in srgb, var(--color-text-inverse) 10%, transparent) !important;
        font-size: 1.08rem !important;
        flex: 0 0 30px;
        margin: 0 !important;
        min-width: 30px !important;
    }

    .header-search-container {
        grid-area: search !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-top: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .modern-search {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .modern-search input {
        min-height: 44px;
        padding: 0 48px 0 13px !important;
        border-width: 1px !important;
        font-size: 16px !important;
    }

    .modern-search button {
        width: 44px;
        border-radius: 0 7px 7px 0;
    }

    .departments-bar {
        position: sticky;
        top: 0;
        z-index: 880;
    }

    .departments-inner {
        padding: 0 10px !important;
        gap: 6px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .departments-inner > a:not(.departments-promo) {
        display: none;
    }

    .departments-dropdown > summary,
    .departments-inner a {
        min-height: 42px;
        padding: 0 11px !important;
        border-radius: 6px;
        font-size: 0.76rem !important;
        scroll-snap-align: start;
    }

    .departments-dropdown-menu {
        width: calc(100vw - 20px);
        max-height: min(70vh, 460px);
        left: 10px !important;
    }

    .i3-hero {
        height: clamp(128px, 38vw, 184px) !important;
        box-shadow: none;
    }

    .i3-slide img {
        object-fit: fill;
    }

    .i3-slider-btn {
        width: 34px;
        height: 34px;
        font-size: 0.85rem;
    }

    .i3-slider-prev {
        left: 8px;
    }

    .i3-slider-next {
        right: 8px;
    }

    .i3-benefits {
        margin: 10px 0 14px;
    }

    .i3-benefits-inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 8px;
    }

    .i3-benefit {
        flex: none;
        min-height: 70px;
        padding: 10px 8px;
        gap: 9px;
    }

    .i3-benefit-icon {
        width: 34px;
        height: 34px;
        border-radius: 7px;
        font-size: 0.98rem;
    }

    .i3-benefit-text strong {
        font-size: 0.72rem;
        line-height: 1.2;
    }

    .i3-benefit-text span {
        display: block;
        max-width: 100%;
        overflow: hidden;
        font-size: 0.64rem;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .main-spacing {
        padding-top: 14px;
        padding-bottom: 34px;
    }

    .i3-coupon-bar {
        margin-bottom: 16px;
        border-radius: 8px;
    }

    .i3-coupon-inner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        padding: 13px;
    }

    .i3-coupon-code {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 38px;
        padding: 8px 12px;
    }

    .i3-coupon-text span {
        display: block;
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .i3-section {
        margin: 20px 0;
    }

    .i3-section-head {
        margin-bottom: 10px;
        padding-bottom: 9px;
        gap: 10px;
    }

    .i3-section-head h2 {
        min-width: 0;
        font-size: 0.95rem !important;
        line-height: 1.2;
    }

    .section-controls {
        display: flex;
        gap: 6px;
        flex: 0 0 auto;
    }

    .i3-scroll-btn {
        width: 32px;
        height: 32px;
    }

    .i3-promo-track {
        gap: 10px !important;
        padding: 8px 2px 14px;
        scroll-snap-type: x proximity;
    }

    .i3-pcard-sm {
        flex: 0 0 clamp(156px, 44vw, 178px) !important;
        min-width: clamp(156px, 44vw, 178px) !important;
        scroll-snap-align: start;
    }

    .i3-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding-top: 6px;
    }

    .i3-pcard {
        border-radius: 8px;
        box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow-color) 8%, transparent);
    }

    .i3-pcard:hover {
        transform: none;
    }

    .i3-pcard-img {
        height: 128px !important;
        padding: 9px !important;
    }

    .i3-pcard-body {
        padding: 10px;
        gap: 4px;
    }

    .i3-pcard-sku {
        font-size: 0.58rem;
    }

    .i3-pcard-name {
        font-size: 0.76rem !important;
        line-height: 1.18;
        min-height: 2.36em;
    }

    .i3-price-box {
        padding: 7px 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .i3-price-main {
        font-size: 1.02rem !important;
        width: 100%;
        text-align: center;
    }

    .i3-pcard-foot {
        padding: 0 10px 10px;
        align-items: stretch;
    }

    .i3-buy-row {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 7px;
    }

    .i3-qty,
    .i3-btn-buy,
    .i3-btn-notify,
    .i3-btn-details {
        width: 100%;
        min-height: 38px;
        justify-content: center;
        text-align: center;
    }

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

    .i3-qty button {
        width: 38px;
    }

    .i3-qty input {
        flex: 1;
        width: auto;
        min-width: 0;
    }

    .i3-mid-banner-inline {
        margin: 18px 0;
    }

    .i3-mid-banner {
        border-radius: 8px;
    }

    .i3-mid-banner img {
        height: clamp(105px, 31vw, 140px);
        object-fit: cover;
    }

    .i3-mid-banner-overlay {
        padding: 14px;
    }

    .product-detail-card {
        border-radius: 0 !important;
    }

    .product-detail-grid {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }

    .product-gallery-view {
        padding: 16px !important;
    }

    .product-gallery-stage {
        min-height: 250px !important;
    }

    .product-gallery-stage img {
        max-height: 250px !important;
    }

    .product-gallery-view + div {
        padding: 20px 16px !important;
    }

    .page-product h1 {
        font-size: 1.35rem !important;
        line-height: 1.15 !important;
    }

    .product-detail-badges {
        gap: 6px;
    }

    .product-detail-badge {
        padding: 5px 8px;
        font-size: 0.64rem;
    }

    .qty-control {
        width: 108px !important;
        flex: 0 0 108px;
    }

    .qty-control + .btn {
        min-width: 0;
    }

    .page-product .btn {
        min-height: 46px;
        font-size: 0.9rem !important;
    }

    .page-product div[style*="grid-template-columns: 2fr 1fr"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-top: 22px !important;
    }

    .page-product .product-info-sections {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-top: 22px !important;
    }

    .page-product .product-description-card,
    .page-product .product-specs-card {
        padding: 20px 16px !important;
        border-radius: 10px !important;
    }

    .page-product .product-description {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .page-product .product-specs-table {
        display: block !important;
        width: 100% !important;
        font-size: 0.84rem !important;
        overflow: visible !important;
    }

    .page-product .product-specs-table tbody {
        display: grid !important;
        width: 100% !important;
        gap: 8px;
    }

    .page-product .product-specs-table tr {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 12px 13px !important;
        border: 1px solid color-mix(in srgb, var(--card-border) 82%, var(--surface-bg)) !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 7px color-mix(in srgb, var(--shadow-color) 5%, transparent) !important;
        background: var(--card-bg) !important;
    }

    .page-product .product-specs-table tr:nth-child(even),
    .page-product .product-specs-table tr:nth-child(odd) {
        background: var(--card-bg) !important;
    }

    .page-product .product-specs-table td:first-child {
        display: block !important;
        width: 100% !important;
        margin: 0 0 4px !important;
        padding: 0 !important;
        color: var(--text-muted) !important;
        font-weight: 800 !important;
        font-size: 0.72rem !important;
        line-height: 1.2 !important;
        text-transform: uppercase;
        white-space: normal !important;
        background: transparent !important;
        border: 0 !important;
        justify-content: flex-start !important;
    }

    .page-product .product-specs-table td:last-child {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--text-main) !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        word-break: break-word;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        justify-content: flex-start !important;
    }

    .page-static-wrap {
        width: calc(100vw - 56px) !important;
        max-width: calc(100vw - 56px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 18px 0 32px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .page-static-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 20px 14px !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .page-static-breadcrumb {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 18px !important;
        line-height: 1.3;
    }

    .page-static-header {
        margin-bottom: 20px !important;
        padding-bottom: 14px !important;
    }

    .page-static-header h1 {
        font-size: 1.35rem !important;
        line-height: 1.15 !important;
        word-break: break-word;
    }

    .page-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
        overflow-wrap: anywhere;
        word-break: break-word;
        font-size: 0.96rem !important;
        line-height: 1.65 !important;
    }

    .page-content p,
    .page-content li {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 0.96rem !important;
        line-height: 1.65 !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .page-content * {
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
    }

    .page-content h2 {
        margin-top: 22px;
        font-size: 1.12rem !important;
    }

    .page-content h3 {
        margin-top: 18px;
        font-size: 1rem !important;
    }

    .page-content table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        border-collapse: collapse !important;
    }

    .page-content img,
    .page-content iframe {
        max-width: 100% !important;
        height: auto !important;
    }

    .cart-page-layout,
    form#form-checkout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .cart-items-card {
        overflow: hidden;
    }

    .cart-items-table tr {
        margin: 0;
        border: 0;
        border-bottom: 1px solid var(--card-border);
        border-radius: 0;
        box-shadow: none;
        padding: 12px;
    }

    .cart-items-table td {
        border-bottom: 0;
        padding: 7px 0 !important;
    }

    .cart-items-table td:last-child {
        margin: 0;
        padding-top: 8px !important;
        border-radius: 0;
        background: transparent;
        justify-content: flex-start;
    }

    .cart-coupon-row {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .checkout-address-card,
    .page-checkout .b2b-card,
    .page-cart .b2b-card {
        padding: 18px !important;
    }

    .checkout-section-heading {
        flex-direction: column;
        gap: 8px;
    }

    .mp-tabs {
        display: grid !important;
        grid-template-columns: 1fr;
    }

    .footer-grid-b2b,
    .footer-bottom-grid {
        text-align: left;
    }

    .store-newsletter-form {
        max-width: none;
    }

    .i3-wa {
        right: 14px;
        bottom: 14px;
        z-index: 950;
    }

    .cookie-consent {
        left: 12px !important;
        right: 12px !important;
        width: calc(100vw - 24px) !important;
        max-width: none !important;
        padding: 16px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        overflow: hidden;
    }

    .cookie-consent-actions {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .cookie-consent-actions button {
        min-width: 0;
        width: 100%;
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 0.82rem !important;
        white-space: normal !important;
        line-height: 1.15;
        overflow: hidden;
    }
}

@media (max-width: 560px) {
    .header-logo-img {
        max-width: 104px !important;
        max-height: 48px !important;
    }

    .mobile-controls .login-btn-link {
        width: 38px;
        flex-basis: 38px;
        padding: 0 !important;
        overflow: hidden;
        font-size: 0 !important;
    }

    .mobile-controls .login-btn-link i {
        margin: 0;
        font-size: 0.95rem;
    }

    .i3-grid {
        gap: 8px !important;
    }

    .i3-pcard-img {
        height: 116px !important;
    }

    .i3-pcard-body {
        padding: 9px;
    }

    .i3-pcard-name {
        font-size: 0.7rem !important;
    }

    .i3-price-main {
        font-size: 0.94rem !important;
    }

    .i3-pcard-badge {
        font-size: 0.58rem;
        padding: 4px 7px;
    }

    .i3-pcard-badge.installment {
        top: 27px;
    }
}

@media (max-width: 420px) {
    .header-logo-img {
        max-width: 108px !important;
    }

    #mobile-menu-trigger,
    .mobile-cart-icon,
    .mobile-controls .login-btn-link {
        width: 32px;
        height: 32px;
        min-height: 32px;
        flex-basis: 32px;
    }
}

/* Mobile audit pass for all visible storefront pages. Keep this at the end. */
@media (max-width: 768px) {
    body.store-page:not(.store-auth-page) h1 {
        font-size: 1.45rem !important;
        line-height: 1.18 !important;
    }

    body.store-page:not(.store-auth-page) h2 {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
    }

    body.store-page:not(.store-auth-page) h3 {
        font-size: 1.05rem !important;
        line-height: 1.22 !important;
    }

    body.store-page .form-input,
    body.store-page .form-control,
    body.store-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(#cardPaymentBrick_container input),
    body.store-page select:not(#cardPaymentBrick_container select),
    body.store-page textarea:not(#cardPaymentBrick_container textarea) {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    body.store-page textarea {
        min-height: 118px !important;
    }

    body.store-page .btn,
    body.store-page .btn-primary,
    body.store-page .btn-secondary,
    body.store-page .btn-outline,
    body.store-page .btn-login,
    body.store-page .btn-submit {
        min-width: 0;
        min-height: 44px;
        gap: 8px;
        text-align: center;
        white-space: normal;
        line-height: 1.15;
    }

    body.store-page .btn i,
    body.store-page .btn-primary i,
    body.store-page .btn-secondary i,
    body.store-page .btn-outline i {
        flex: 0 0 auto;
    }

    body.store-page .b2b-card,
    body.store-page .page-card-standard,
    body.store-page .success-card {
        max-width: 100%;
        border-radius: 10px !important;
    }

    body.store-page div[style*="grid-template-columns"] {
        min-width: 0;
    }

    .page-cadastro .container-main > div,
    .page-guest_details .container-main > div,
    .page-feedback .container-main > div {
        max-width: 100% !important;
        margin-top: 18px !important;
        margin-bottom: 28px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .page-cadastro .b2b-card,
    .page-guest_details .b2b-card,
    .page-feedback .b2b-card {
        padding: 20px !important;
    }

    .page-cadastro form div[style*="grid-template-columns"],
    .page-guest_details form div[style*="grid-template-columns"],
    .page-profile form div[style*="grid-template-columns"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .page-cadastro form div[style*="grid-column"],
    .page-guest_details form div[style*="grid-column"],
    .page-profile form div[style*="grid-column"] {
        grid-column: auto !important;
    }

    .page-cadastro form > div[style*="background"],
    .page-guest_details form > div[style*="background"] {
        padding: 16px !important;
    }

    .page-cadastro form > div[style*="background"] > div,
    .page-guest_details form > div[style*="background"] > div {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .page-profile .i3-wrap {
        margin-top: 20px !important;
        margin-bottom: 34px !important;
    }

    .page-profile .i3-wrap > div:first-child,
    .page-orders .container-main > div:first-child,
    .page-order_details .container-main > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .page-profile .i3-wrap > div:first-child .btn,
    .page-orders .btn,
    .page-order_details .btn {
        width: 100%;
        justify-content: center;
    }

    .page-profile .i3-wrap > div[style*="grid-template-columns"],
    .page-order_details .container-main > div[style*="grid-template-columns"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .page-profile .i3-wrap > div[style*="grid-template-columns"] > div,
    .page-profile .i3-wrap > div[style*="grid-template-columns"] > div > div {
        padding: 18px !important;
    }

    .page-profile div[style*="justify-content:space-between"],
    .page-profile div[style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .page-profile #addAddressModal {
        padding: 12px;
        align-items: flex-start !important;
        overflow-y: auto;
    }

    .page-profile #addAddressModal > div {
        max-width: 100% !important;
        margin: 18px 0 !important;
        padding: 20px !important;
    }

    .page-profile #addAddressModal form > div[style*="display:flex"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .page-orders .b2b-card,
    .page-order_details .b2b-card {
        padding: 18px !important;
    }

    .page-orders .b2b-card:has(table),
    .page-order_details .b2b-card:has(table),
    .page-profile .b2b-card:has(table),
    .page-cart .cart-items-card {
        padding: 0 !important;
        overflow: hidden;
    }

    .page-orders table,
    .page-order_details table,
    .page-profile table,
    .page-cart .cart-items-table {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .page-orders thead,
    .page-order_details thead,
    .page-profile thead,
    .page-cart .cart-items-table thead {
        display: none !important;
    }

    .page-orders tbody,
    .page-order_details tbody,
    .page-profile tbody,
    .page-cart .cart-items-table tbody {
        display: block !important;
        width: 100% !important;
    }

    .page-orders tr,
    .page-order_details tr,
    .page-profile tr,
    .page-cart .cart-items-table tr {
        display: grid !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 14px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--card-border) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: var(--card-bg) !important;
    }

    .page-orders td,
    .page-order_details td,
    .page-profile td,
    .page-cart .cart-items-table td {
        display: flex !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 7px 0 !important;
        border: 0 !important;
        background: transparent !important;
        text-align: left !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    .page-orders td:last-child,
    .page-order_details td:last-child,
    .page-profile td:last-child,
    .page-cart .cart-items-table td:last-child {
        justify-content: flex-start !important;
        padding-top: 12px !important;
    }

    .page-orders td .btn,
    .page-order_details td .btn {
        width: 100%;
    }

    .page-checkout .container-main > h1,
    .page-cart .container-main > div:first-child {
        margin-bottom: 18px !important;
    }

    .page-checkout .checkout-address-card,
    .page-checkout form#form-checkout > div > .b2b-card,
    .page-checkout form#form-checkout > div:last-child .b2b-card,
    .page-cart .b2b-card:not(.cart-items-card) {
        padding: 18px !important;
    }

    .page-checkout .checkout-address-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .page-checkout .checkout-field-wide {
        grid-column: auto !important;
    }

    .page-checkout .checkout-address-actions {
        justify-content: stretch;
    }

    .page-checkout .checkout-address-actions .btn {
        width: 100%;
    }

    .page-checkout .payment-option {
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 14px !important;
    }

    .page-checkout .payment-option .check-icon {
        margin-left: auto !important;
    }

    .page-checkout .mp-tab-btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .cart-coupon-row {
        grid-template-columns: 1fr !important;
    }

    .cart-coupon-btn {
        width: 100%;
    }

    .page-product .container-main > div:first-child {
        padding-top: 12px !important;
    }

    .page-product .product-detail-card {
        margin-left: -12px;
        margin-right: -12px;
        border-left: 0 !important;
        border-right: 0 !important;
    }

    .page-product .product-gallery-thumbs {
        gap: 8px;
    }

    .page-product .product-gallery-thumb {
        width: 60px;
        height: 60px;
        flex-basis: 60px;
    }

    .page-product .qty-control {
        width: 100% !important;
        flex-basis: auto !important;
        min-height: 46px;
    }

    .page-product .qty-control button {
        min-width: 44px;
    }

    .page-product .qty-input {
        min-height: 42px !important;
        text-align: center;
    }

    .page-product .qty-control + .btn,
    .page-product .qty-control ~ .btn {
        width: 100%;
    }

    .page-product div[style*="display: flex; gap: 15px"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .pix-code-input,
    .pix-input {
        min-width: 0 !important;
        font-size: 0.72rem !important;
    }

    .pix-copy-btn {
        flex: 0 0 44px;
        width: 44px;
        min-height: 44px;
    }

    .success-card {
        padding: 22px !important;
    }
}

@media (max-width: 420px) {
    .i3-benefits-inner {
        grid-template-columns: 1fr;
    }

    .i3-benefit {
        min-height: 62px;
    }

    .page-product .product-gallery-stage {
        min-height: 220px !important;
    }

    .page-product .product-gallery-stage img {
        max-height: 220px !important;
    }
}

@media (max-width: 900px) {
    .store-auth-page,
    .store-reset-page {
        display: block !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        background: var(--page-bg) !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto;
    }

    .store-auth-page .split-container {
        display: block !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        width: 100% !important;
    }

    .store-auth-page .brand-side {
        display: none !important;
    }

    .store-auth-page .form-side {
        display: block !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 74px 16px 24px !important;
        align-items: flex-start !important;
        background: var(--page-bg) !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow: visible !important;
    }

    .store-auth-page .auth-back-link {
        top: 18px;
        left: 16px;
        right: auto;
        color: var(--text-main);
        opacity: 1;
    }

    .store-auth-page .login-card,
    .store-reset-page .form-container {
        max-width: 100% !important;
        width: calc(100vw - 32px) !important;
        margin: 0 auto !important;
        padding: 24px 20px !important;
        border-radius: 14px !important;
        background: var(--surface-bg) !important;
        opacity: 1 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        box-shadow: 0 14px 34px color-mix(in srgb, var(--shadow-color) 10%, transparent) !important;
    }

    .store-auth-page .login-header {
        margin-bottom: 22px !important;
    }

    .store-auth-page .login-header h2,
    .store-reset-page h2 {
        font-size: 1.65rem !important;
        color: var(--text-main) !important;
        opacity: 1 !important;
    }

    .store-auth-page .login-header p,
    .store-reset-page p,
    .store-auth-page .footer-links {
        color: var(--text-muted) !important;
        opacity: 1 !important;
    }

    .store-auth-page .input-group,
    .store-reset-page .input-group {
        margin-bottom: 18px !important;
        min-width: 0 !important;
    }

    .store-auth-page .input-wrapper,
    .store-reset-page .input-wrapper {
        min-width: 0 !important;
        width: 100% !important;
    }

    .store-auth-page .input-group label,
    .store-reset-page .input-group label {
        color: var(--text-main) !important;
        opacity: 1 !important;
    }

    .store-auth-page .form-input,
    .store-reset-page .form-input {
        min-height: 48px !important;
        font-size: 16px !important;
        opacity: 1 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .store-auth-page .auth-forgot-row {
        text-align: left !important;
        margin-top: 10px !important;
    }

    .store-auth-page .btn-login,
    .store-reset-page .btn-submit {
        min-height: 50px !important;
        opacity: 1 !important;
    }
}

@media (max-width: 768px) {
    .i3-popup-overlay {
        padding: 12px;
        overflow-y: auto;
        align-items: flex-start;
        backdrop-filter: blur(2px);
    }

    .i3-popup-modal {
        position: relative;
        top: auto;
        left: auto;
        transform: none !important;
        width: min(100%, 430px);
        max-width: 100%;
        max-height: none;
        margin: 18px auto 120px;
        border-radius: 14px;
        opacity: 1 !important;
    }

    .i3-popup-close {
        top: 10px;
        right: 10px;
        width: 38px;
        height: 38px;
        background: color-mix(in srgb, var(--popup-close-bg) 72%, transparent);
    }

    .i3-popup-img-container {
        height: clamp(130px, 45vw, 190px);
    }

    .i3-popup-img {
        object-fit: fill;
    }

    .i3-popup-content {
        padding: 22px 18px 24px;
    }

    .i3-popup-title {
        font-size: 1.25rem;
        line-height: 1.15;
        margin-bottom: 8px;
    }

    .i3-popup-subtitle {
        font-size: 0.88rem;
        line-height: 1.45;
        margin-bottom: 16px;
    }

    .i3-popup-coupon-box {
        padding: 14px 12px;
        margin-bottom: 16px;
        overflow: hidden;
    }

    .i3-popup-coupon-code {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        justify-content: center;
        gap: 8px;
        max-width: 100%;
        font-size: clamp(1.05rem, 6vw, 1.5rem);
        line-height: 1.15;
        letter-spacing: 0.08em;
    }

    .i3-popup-coupon-code span {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
        text-align: center;
    }

    .i3-popup-coupon-code i {
        flex: 0 0 auto;
        align-self: center;
    }

    .i3-popup-btn {
        min-height: 46px;
        padding: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .cookie-consent {
        z-index: 99000;
    }
}

/* Mobile hardening for policy/help pages and compact header controls. */
@media (max-width: 768px) {
    html:has(body.store-page.i3-page),
    body.store-page.i3-page {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.store-page.i3-page header,
    body.store-page.i3-page .header-inner,
    body.store-page.i3-page .departments-bar,
    body.store-page.i3-page main {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    body.store-page.i3-page .header-inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "logo controls"
            "search search" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 14px 12px !important;
    }

    body.store-page.i3-page .header-logo-container {
        grid-area: logo !important;
        max-width: 108px !important;
        min-width: 0 !important;
    }

    body.store-page.i3-page .header-logo-img {
        max-width: 108px !important;
        max-height: 46px !important;
    }

    body.store-page.i3-page .mobile-controls {
        grid-area: controls !important;
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 5px !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    body.store-page.i3-page #mobile-menu-trigger,
    body.store-page.i3-page .mobile-cart-icon,
    body.store-page.i3-page .mobile-controls .login-btn-link {
        width: 31px !important;
        height: 31px !important;
        min-width: 31px !important;
        min-height: 31px !important;
        flex: 0 0 31px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 7px !important;
        overflow: hidden !important;
    }

    body.store-page.i3-page .mobile-controls .login-btn-link {
        font-size: 0 !important;
    }

    body.store-page.i3-page .mobile-controls .login-btn-link i,
    body.store-page.i3-page #mobile-menu-trigger i,
    body.store-page.i3-page .mobile-cart-icon i {
        margin: 0 !important;
        font-size: 0.92rem !important;
        line-height: 1 !important;
    }

    body.store-page.i3-page .header-search-container {
        grid-area: search !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.store-page.i3-page .modern-search,
    body.store-page.i3-page .modern-search-input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.store-page.i3-page .modern-search input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.store-page.i3-page .page-static-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px 24px 32px !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    body.store-page.i3-page .page-static-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 14px !important;
        margin: 0 auto !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.store-page.i3-page .page-content,
    body.store-page.i3-page .page-content p,
    body.store-page.i3-page .page-content li,
    body.store-page.i3-page .page-content div,
    body.store-page.i3-page .page-content span {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }
}

/* Final mobile header icon alignment and popup image proportion guard. */
@media (max-width: 768px) {
    body.store-page.i3-page .modern-search button,
    body.store-page.i3-page #mobile-menu-trigger,
    body.store-page.i3-page .mobile-cart-icon,
    body.store-page.i3-page .mobile-controls .login-btn-link,
    body.store-page.i3-page .departments-dropdown > summary,
    body.store-page.i3-page .departments-inner a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        vertical-align: middle !important;
    }

    body.store-page.i3-page #mobile-menu-trigger,
    body.store-page.i3-page .mobile-cart-icon,
    body.store-page.i3-page .mobile-controls .login-btn-link {
        appearance: none !important;
        -webkit-appearance: none !important;
        box-sizing: border-box !important;
    }

    body.store-page.i3-page .modern-search button i,
    body.store-page.i3-page #mobile-menu-trigger i,
    body.store-page.i3-page .mobile-cart-icon i,
    body.store-page.i3-page .mobile-controls .login-btn-link i,
    body.store-page.i3-page .departments-dropdown > summary i,
    body.store-page.i3-page .departments-inner a i {
        display: block !important;
        width: 1em !important;
        height: 1em !important;
        line-height: 1 !important;
        margin: 0 !important;
        text-align: center !important;
    }

    body.store-page.i3-page .mobile-controls .login-btn-link,
    body.store-page.i3-page .mobile-cart-icon,
    body.store-page.i3-page #mobile-menu-trigger {
        background: color-mix(in srgb, var(--color-text-inverse) 10%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--color-text-inverse) 18%, transparent) !important;
    }

    body.store-page.i3-page .mobile-cart-badge {
        top: -5px !important;
        right: -5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 16px !important;
        height: 16px !important;
        padding: 0 4px !important;
        line-height: 1 !important;
    }

    body.store-page.i3-page .i3-popup-modal {
        width: min(calc(100vw - 24px), 430px) !important;
        overflow: hidden !important;
    }

    body.store-page.i3-page .i3-popup-img-container {
        height: auto !important;
        aspect-ratio: 14 / 5 !important;
        background: var(--popup-bg) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

body.store-page.i3-page .i3-popup-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

/* Static policy/help pages */
body.store-page.page-page .page-static-wrap {
    width: min(1120px, calc(100% - 32px)) !important;
    max-width: 1120px !important;
    padding: 34px 0 48px !important;
    margin: 0 auto !important;
}

body.store-page.page-page .page-static-card {
    width: 100% !important;
    max-width: 940px !important;
    margin: 0 auto !important;
    padding: clamp(22px, 4vw, 44px) !important;
    background: var(--surface-bg, #fff) !important;
    border: 1px solid var(--color-border, #e5e7eb) !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--shadow-color, #0f172a) 8%, transparent) !important;
    overflow: hidden !important;
}

body.store-page.page-page .page-static-breadcrumb {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 22px !important;
    color: var(--text-muted, #64748b) !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
}

body.store-page.page-page .page-static-breadcrumb a {
    color: var(--text-muted, #64748b) !important;
    text-decoration: none !important;
}

body.store-page.page-page .page-static-breadcrumb span:last-child {
    color: var(--color-primary, var(--b2b-primary, #2f2d86)) !important;
}

body.store-page.page-page .page-static-header {
    margin-bottom: 28px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid var(--color-border, #e5e7eb) !important;
}

body.store-page.page-page .page-static-header h1 {
    color: var(--text-main, #111827) !important;
    font-family: var(--font-display, Oswald), sans-serif !important;
    font-size: clamp(1.65rem, 4vw, 2.35rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
}

body.store-page.page-page .page-static-header p {
    margin: 6px 0 0 !important;
    color: var(--text-muted, #64748b) !important;
    font-size: 0.96rem !important;
}

body.store-page.page-page .page-content {
    color: var(--text-main, #334155) !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
    overflow-wrap: anywhere !important;
}

body.store-page.page-page .page-content table {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
    border-collapse: collapse !important;
}

body.store-page.page-page .page-content img,
body.store-page.page-page .page-content iframe {
    max-width: 100% !important;
    height: auto !important;
}

/* Final override for static footer pages rendered by page.php and /pagina/ URLs */
body.store-page .page-static-wrap {
    width: min(1120px, calc(100% - 32px)) !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding: 34px 0 48px !important;
}

body.store-page .page-static-card {
    width: 100% !important;
    max-width: 940px !important;
    margin: 0 auto !important;
    padding: clamp(22px, 4vw, 44px) !important;
    background: var(--surface-bg, #fff) !important;
    color: var(--text-main, #111827) !important;
    border: 1px solid var(--color-border, #e5e7eb) !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--shadow-color, #0f172a) 8%, transparent) !important;
    overflow: hidden !important;
}

body.store-page .page-static-breadcrumb {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--text-muted, #64748b) !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

body.store-page .page-static-breadcrumb a {
    color: var(--text-muted, #64748b) !important;
    text-decoration: none !important;
}

body.store-page .page-static-breadcrumb span:last-child {
    color: var(--color-primary, #35348c) !important;
}

body.store-page .page-static-header {
    display: block !important;
    margin: 0 0 28px !important;
    padding: 0 0 18px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--text-main, #111827) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--color-border, #e5e7eb) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
}

body.store-page .page-static-header h1 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--text-main, #111827) !important;
    font-family: var(--font-display, Oswald), sans-serif !important;
    font-size: clamp(1.65rem, 4vw, 2.35rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

body.store-page .page-static-header p {
    display: block !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--text-muted, #64748b) !important;
    font-size: 0.96rem !important;
    line-height: 1.45 !important;
}

body.store-page .page-content {
    width: 100% !important;
    max-width: 100% !important;
    color: var(--text-main, #334155) !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
    overflow-wrap: anywhere !important;
}

body.store-page .payment-box.pix-box,
body.store-page .pix-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

body.store-page .pix-qr {
    display: block;
    margin: 0 auto 16px !important;
    object-fit: contain;
}

body.store-page .pix-copy-container,
body.store-page .pix-input-group {
    width: 100%;
}

body.store-page .pix-input-group {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

body.store-page .mp-card-notice {
    margin-bottom: 12px;
}

body.store-page #cardPaymentBrick_container {
    min-height: 460px !important;
    width: 100% !important;
    overflow: visible !important;
}

body.store-page #cardPaymentBrick_container iframe {
    width: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.store-page.page-checkout form#form-checkout,
body.store-page.page-checkout .mp-content,
body.store-page.page-checkout #cardPaymentBrick_container {
    overflow: visible !important;
}

body.store-page.page-checkout .mp-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

body.store-page.page-checkout .mp-tab-btn {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    min-width: 108px !important;
    padding: 11px 18px !important;
    border: 1.5px solid var(--color-primary, var(--btn-primary-bg)) !important;
    border-radius: 8px !important;
    background: var(--surface-bg, #fff) !important;
    color: var(--color-primary, var(--btn-primary-bg)) !important;
    font-family: var(--font-body, Inter), Arial, sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease !important;
}

body.store-page.page-checkout .mp-tab-btn i {
    color: currentColor !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

body.store-page.page-checkout .mp-tab-btn.active,
body.store-page.page-checkout .mp-tab-btn:hover {
    background: var(--btn-primary-bg, var(--color-primary)) !important;
    color: var(--btn-primary-text, #fff) !important;
    border-color: var(--btn-primary-bg, var(--color-primary)) !important;
}

body.store-page.page-checkout .mp-tab-btn:hover {
    transform: translateY(-1px) !important;
}

body.store-page.page-checkout #cardPaymentBrick_container {
    min-height: 500px !important;
    padding: 6px 0 8px !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.store-page.page-checkout #cardPaymentBrick_container iframe {
    display: block !important;
    min-height: 0 !important;
    border: 0 !important;
}

body.store-page.page-success .pix-box,
body.store-page.page-order_details .pix-box {
    align-items: center !important;
}

body.store-page.page-success .pix-input-group,
body.store-page.page-order_details .pix-input-group {
    max-width: 620px !important;
    margin: 0 auto !important;
}

@media (max-width: 768px) {
    body.store-page.page-checkout #cardPaymentBrick_container {
        min-height: 560px !important;
    }

    body.store-page.page-checkout #cardPaymentBrick_container iframe {
        min-height: 0 !important;
    }

    body.store-page.page-checkout .mp-tabs {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
}

/* Final mobile guard: compact departments dropdown and uncropped mid banners. */
@media (max-width: 768px) {
    body.store-page.i3-page .departments-dropdown-menu {
        display: block !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: min(56dvh, 390px) !important;
        left: 10px !important;
        padding: 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        border-radius: 8px !important;
    }

    body.store-page.i3-page .departments-dropdown-menu a {
        display: flex !important;
        width: 100% !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 10px 11px !important;
        justify-content: space-between !important;
        gap: 12px !important;
        border-radius: 6px !important;
        white-space: normal !important;
    }

    body.store-page.i3-page .departments-dropdown-menu a + a {
        border-top: 1px solid color-mix(in srgb, var(--text-main) 8%, transparent);
    }

    body.store-page.i3-page .departments-dropdown-menu a span:first-child {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    body.store-page.i3-page .departments-dropdown-menu a span:last-child {
        flex: 0 0 auto !important;
    }

    body.store-page.page-index.i3-page .i3-mid-banner,
    body.store-page.page-index.i3-page .i3-mid-banner-inline {
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body.store-page.page-index.i3-page .i3-mid-banner img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}

/* Cadastro B2C - pagina de conta com tema dinamico da loja. */
.register-page-shell {
    width: 100%;
    max-width: 1120px;
    margin: 36px auto 52px;
    padding: 0 20px;
}

.register-card {
    width: 100%;
    padding: 34px !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--shadow-color) 7%, transparent) !important;
}

.register-header {
    display: grid;
    gap: 8px;
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid color-mix(in srgb, var(--card-border) 72%, transparent);
}

.register-eyebrow {
    color: var(--btn-primary-bg);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.register-header h1 {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.85rem, 3vw, 2.55rem);
    line-height: 1.05;
}

.register-header p {
    max-width: 680px;
    margin: 0;
    color: var(--text-muted);
    font-size: 1rem;
}

.register-form {
    display: grid;
    gap: 22px;
}

.register-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--btn-primary-bg);
    color: var(--text-main);
    font-size: .9rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.register-section-title i {
    color: var(--btn-primary-bg);
}

.register-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.register-address-grid {
    grid-template-columns: 1.2fr .8fr 2fr;
}

.register-field-wide,
.register-field-street {
    grid-column: 1 / -1;
}

.register-field label,
.register-security-box label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-main);
    font-size: .82rem;
    font-weight: 800;
}

.register-field .form-input,
.register-security-box .form-input {
    width: 100%;
    min-height: 48px;
    border-radius: 8px !important;
}

.register-security-box {
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--input-border) 82%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-bg) 84%, var(--page-bg));
}

.register-captcha-row {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-main);
    font-weight: 750;
}

.register-captcha-row span {
    flex: 0 0 auto;
}

.register-main-btn {
    width: 100%;
    min-height: 52px;
    gap: 10px;
    border-radius: 8px !important;
    font-size: 1rem;
    font-weight: 900;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--btn-primary-bg) 20%, transparent) !important;
}

.register-login-box {
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid color-mix(in srgb, var(--card-border) 72%, transparent);
    text-align: center;
}

.register-login-box p {
    margin: 0 0 10px;
    color: var(--text-muted);
    font-size: .95rem;
}

.register-login-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--btn-primary-bg);
    border-radius: 8px;
    color: var(--btn-primary-bg) !important;
    background: var(--btn-outline-bg);
    font-size: .96rem;
    font-weight: 900;
    text-transform: uppercase;
}

.register-login-link:hover {
    color: var(--btn-primary-text) !important;
    background: var(--btn-primary-bg);
}

.register-alert {
    padding: 18px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: .95rem;
}

.register-alert h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    font-size: 1.12rem;
}

.register-alert p {
    margin: 0 0 14px;
}

.register-alert-success {
    color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 11%, var(--surface-bg));
    border: 1px solid color-mix(in srgb, var(--color-success) 34%, var(--surface-bg));
}

.register-alert-error {
    color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 10%, var(--surface-bg));
    border: 1px solid color-mix(in srgb, var(--color-danger) 32%, var(--surface-bg));
}

@media (max-width: 900px) {
    .register-page-shell {
        margin-top: 24px;
        padding: 0 14px;
    }

    .register-card {
        padding: 24px !important;
    }

    .register-address-grid,
    .register-grid {
        grid-template-columns: 1fr;
    }

    .register-field-wide,
    .register-field-street {
        grid-column: auto;
    }
}

@media (max-width: 560px) {
    .register-page-shell {
        margin: 18px auto 36px;
        padding: 0 10px;
    }

    .register-card {
        padding: 18px !important;
        border-radius: 8px !important;
    }

    .register-header {
        margin-bottom: 22px;
        padding-bottom: 18px;
    }

    .register-form {
        gap: 18px;
    }

    .register-grid {
        gap: 14px;
    }

    .register-captcha-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .register-main-btn,
    .register-login-link {
        width: 100%;
    }
}
@media (max-width: 767px) {
    .swal2-popup.store-mobile-cart-popup {
        width: calc(100% - 32px);
        max-width: 390px;
        padding: 24px 18px 18px;
        border-radius: 8px;
    }

    .store-mobile-cart-popup .swal2-title {
        padding: 8px 0 0;
        font-size: 1.35rem;
        line-height: 1.25;
        letter-spacing: 0;
    }

    .store-mobile-cart-popup .swal2-html-container {
        margin: 10px 0 0;
        font-size: 0.95rem;
        line-height: 1.45;
    }

    .swal2-actions.store-mobile-cart-actions {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
        margin: 22px 0 0;
    }

    .store-mobile-cart-actions .swal2-styled {
        width: 100%;
        min-height: 48px;
        margin: 0;
        border-radius: 6px;
        font-size: 0.9rem;
        font-weight: 800;
        letter-spacing: 0;
    }

    .store-mobile-cart-actions .store-mobile-cart-confirm {
        grid-row: 1;
    }

    .store-mobile-cart-actions .store-mobile-cart-continue {
        grid-row: 2;
        border: 1px solid var(--b2b-primary) !important;
        color: var(--b2b-primary) !important;
        background: #fff !important;
        box-shadow: none !important;
    }
}