/* ============================================
   AEROPORTO MATERIAIS PARA CONSTRUÇÕES
   CNPJ: 00.167.560/0001-35 — Desde 1994
   Design Corporativo Profissional v2
   ============================================ */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --b900: #1A1A1A;
    --b800: #1A1A1A;
    --b700: #C14B18;
    --b600: #F05A20;
    --b500: #F5721F;
    --b300: #D4733A;
    --b100: #FFF0E8;
    --b50: #F0F8FF;
    --ink: #1A1A1A;
    --ink80: rgba(26, 26, 26, .80);
    --ink50: rgba(26, 26, 26, .50);
    --ink20: rgba(26, 26, 26, .12);
    --ink08: rgba(26, 26, 26, .06);
    --white: #fff;
    --s1: #F6F9FC;
    --s2: #EEF4FA;
    --red: #D32F2F;
    --orange: #F57C00;
    --fd: 'Nunito', sans-serif;
    --fb: 'Nunito', sans-serif;
    --r2: 6px;
    --r3: 10px;
    --r4: 16px;
    --r5: 22px;
    --r6: 28px;
    --rf: 9999px;
    --sc: 0 1px 4px rgba(0, 0, 0, .06), 0 2px 10px rgba(0, 0, 0, .05);
    --sh: 0 6px 24px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .04);
    --sf: 0 20px 60px rgba(0, 0, 0, .12);

    /* compat com includes existentes */
    --primary: #C14B18;
    --primary-light: #C14B18;
    --primary-dark: #9A3A0D;
    --accent: #D84315;
    --accent-dark: #BF360C;
    --white: #fff;
    --gray-50: #F6F9FC;
    --gray-100: #EEF4FA;
    --gray-200: rgba(26, 26, 26, .12);
    --gray-500: rgba(26, 26, 26, .50);
    --gray-900: #1A1A1A;
    --font-display: 'Nunito', sans-serif;
    --font-body: 'Nunito', sans-serif;
    --font-primary: 'Nunito', sans-serif;
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, .06), 0 2px 10px rgba(0, 0, 0, .05);
    --shadow-lg: 0 6px 24px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .08);
    --shadow-2xl: 0 24px 48px rgba(0, 0, 0, .15);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, .12);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-2xl: 28px;
    --radius-full: 9999px;
    --transition-base: all 0.2s cubic-bezier(.4, 0, .2, 1);
    --transition-smooth: all 0.3s cubic-bezier(.4, 0, .2, 1);
    --transition-elegant: all 0.4s cubic-bezier(.4, 0, .1, 1);
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    max-width: 100vw
}

body {
    font-family: var(--fb);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: #fff;
    overflow-x: hidden
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
    -webkit-user-drag: none;
    user-drag: none
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--fb)
}

input, select, textarea {
    font-family: var(--fb)
}

.container {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 24px
}

/* ============================================
   PROMO TICKER
   ============================================ */
.promo-ticker {
    background: var(--b900);
    overflow: hidden;
    white-space: nowrap;
    padding: 9px 0;
    position: relative;
    z-index: 1000
}

.promo-ticker-track {
    display: inline-flex;
    animation: tickerScroll 38s linear infinite;
    padding: 0
}

.promo-ticker-track span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 44px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .3px;
    color: rgba(255, 255, 255, .70)
}

.promo-ticker-track span::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--b300);
    flex-shrink: 0;
    display: inline-block
}

@keyframes tickerScroll {
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(-50%)
    }
}

/* ============================================
   TOP BAR
   ============================================ */
.top-bar {
    background: var(--ink);
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.top-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 12px;
    flex-wrap: wrap
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap
}

.top-bar-left span {
    color: rgba(255, 255, 255, .55);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500
}

.top-bar-left span strong {
    color: rgba(255, 255, 255, .85);
    font-weight: 600
}

.top-bar-left span svg {
    width: 13px;
    height: 13px;
    fill: var(--b300)
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 2px
}

.top-bar-right a {
    color: rgba(255, 255, 255, .50);
    padding: 4px 10px;
    border-radius: var(--r2);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    transition: var(--transition-base)
}

.top-bar-right a:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff
}

/* ============================================
   HEADER
   ============================================ */
.header {
    background: #fff;
    box-shadow: 0 1px 10px rgba(0, 0, 0, .05);
    position: sticky;
    top: 0;
    z-index: 999;
    border-bottom: 1px solid var(--ink20);
    transition: var(--transition-smooth)
}

.header.scrolled {
    box-shadow: 0 3px 20px rgba(0, 0, 0, .09)
}

.header .container {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    min-height: auto
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    text-decoration: none;
    transition: opacity .2s
}

.logo:hover {
    opacity: .86
}

.logo-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r3);
    background: var(--b800);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.logo-icon img {
    height: 36px;
    width: auto;
    filter: brightness(10)
}

.logo-icon svg {
    width: 26px;
    height: 26px;
    fill: #fff
}

.logo-text h1 {
    font-family: var(--fd);
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.1;
    margin: 0;
    letter-spacing: -.3px
}

.logo-text span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--b700)
}

/* Nav */
.header nav {
    flex: 1
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0
}

.nav-links li a {
    font-family: var(--fb);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink80);
    padding: 9px 14px;
    border-radius: var(--r3);
    transition: var(--transition-base);
    white-space: nowrap
}

.nav-links li a:hover {
    background: var(--b50);
    color: var(--b700)
}

.nav-links li a.active {
    background: var(--b900);
    color: #fff
}

/* Search */
.search-bar {
    display: flex;
    align-items: center;
    background: var(--s1);
    border: 1.5px solid var(--ink20);
    border-radius: var(--rf);
    overflow: hidden;
    transition: var(--transition-base);
    max-width: 480px;
    flex: 1
}

.search-bar:focus-within {
    border-color: var(--b600);
    box-shadow: 0 0 0 3px rgba(193, 75, 24, .10);
    background: #fff
}

.search-bar input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 11px 14px;
    font-size: 13.5px;
    color: var(--ink);
    font-weight: 500
}

.search-bar input::placeholder {
    color: var(--ink50)
}

.search-bar input:focus {
    outline: none
}

.search-bar button {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 18px;
    height: 44px;
    background: var(--b700);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    transition: background .2s;
    border: none;
    cursor: pointer;
    flex-shrink: 0
}

.search-bar button svg {
    width: 15px;
    height: 15px;
    fill: #fff
}

.search-bar button:hover {
    background: var(--b900)
}

/* Header actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto
}

.header-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 11px;
    border-radius: var(--r3);
    border: 1.5px solid transparent;
    color: var(--ink80);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: var(--transition-base)
}

.header-btn svg {
    width: 22px;
    height: 22px;
    fill: var(--ink80)
}

.header-btn:hover {
    background: var(--b50);
    border-color: var(--b300)
}

.cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    background: var(--red);
    color: #fff;
    border-radius: var(--rf);
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff
}

.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: var(--r3);
    background: var(--s1);
    border: 1.5px solid var(--ink20);
    transition: var(--transition-base);
    flex-shrink: 0
}

.mobile-toggle:hover {
    background: var(--b50);
    border-color: var(--b300)
}

.mobile-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: var(--transition-base)
}

/* ============================================
   NAVBAR
   ============================================ */
.nav-bar {
    background: linear-gradient(135deg, #1A0800 0%, #3D1800 50%, #6B2D0A 100%)
}

.nav-inner {
    display: flex;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 24px
}

.nav-inner::-webkit-scrollbar {
    display: none
}

.nav-link {
    padding: 13px 14px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .72);
    white-space: nowrap;
    border-bottom: 2.5px solid transparent;
    transition: all .2s
}

.nav-link:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .4)
}

.nav-link.active {
    color: #fff;
    border-bottom-color: #fff;
    font-weight: 700
}

/* ============================================
   HERO
   ============================================ */
.hero {
    background: linear-gradient(135deg, var(--b900) 0%, #2A1A0A 60%, #1A1A1A 100%);
    position: relative;
    overflow: hidden;
    padding: 68px 0 64px;
    color: #fff
}

.hero::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(33, 150, 243, .12) 0%, transparent 65%);
    pointer-events: none
}

.hero-mesh {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none
}

.hero .container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 56px;
    align-items: center
}

.hero-content {
    max-width: 560px
}

.hero-badge, .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(33, 150, 243, .12);
    border: 1px solid rgba(33, 150, 243, .28);
    color: var(--b300);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 6px 16px;
    border-radius: var(--rf);
    margin-bottom: 22px
}

.hero-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--b300);
    animation: blink 2s ease-in-out infinite
}

@keyframes blink {
    0%, 100% {
        opacity: 1
    }
    50% {
        opacity: .2
    }
}

.hero-content h2, .hero-title {
    font-family: var(--fd);
    font-size: clamp(28px, 3.4vw, 48px);
    font-weight: 800;
    line-height: 1.08;
    color: #fff;
    margin-bottom: 18px;
    letter-spacing: -.5px
}

.hero-content h2 em, .hero-title em {
    font-style: normal;
    color: var(--b300)
}

.hero-content p, .hero-desc {
    font-size: 15.5px;
    line-height: 1.72;
    color: rgba(255, 255, 255, .62);
    margin-bottom: 32px;
    max-width: 440px
}

.hero-buttons, .hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.hero .btn-primary, .btn-hero-p {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--b700);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 14px 26px;
    border-radius: var(--r4);
    box-shadow: 0 5px 18px rgba(193, 75, 24, .30);
    transition: all .3s;
    border: none
}

.hero .btn-primary svg, .btn-hero-p svg {
    width: 16px;
    height: 16px;
    fill: #fff
}

.hero .btn-primary:hover, .btn-hero-p:hover {
    background: var(--b500);
    transform: translateY(-2px)
}

.hero .btn-outline, .btn-hero-g {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .26);
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 13px 26px;
    border-radius: var(--r4);
    transition: all .25s
}

.hero .btn-outline:hover, .btn-hero-g:hover {
    border-color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .07)
}

.hero-trust {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    flex-wrap: wrap
}

.trust-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, .50)
}

.trust-pill svg {
    width: 14px;
    height: 14px;
    fill: var(--b300)
}

.hero-visual, .hero-card {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: var(--r6);
    padding: 28px;
    backdrop-filter: blur(12px)
}

.hero-img {
    width: 100%;
    height: 220px;
    border-radius: var(--r5);
    overflow: hidden;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03))
}

.hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.hero-stats {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 10px
}

.hstat {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--r3);
    padding: 14px;
    text-align: center
}

.hstat-n {
    font-family: var(--fd);
    font-size: 26px;
    font-weight: 800;
    color: var(--b300);
    line-height: 1;
    margin-bottom: 4px
}

.hstat-l {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: rgba(255, 255, 255, .35)
}

/* ============================================
   TRUST STRIP
   ============================================ */
.features-strip, .trust-strip {
    background: linear-gradient(135deg, #1A1A1A 0%, #C14B18 100%)
}

.features-grid, .trust-grid {
    display: grid;
    grid-template-columns:repeat(4, 1fr)
}

.feature-item, .trust-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 20px;
    border-right: 1px solid rgba(255, 255, 255, .10);
    transition: background .2s;
    cursor: default
}

.feature-item:last-child, .trust-item:last-child {
    border-right: none
}

.feature-item:hover, .trust-item:hover {
    background: rgba(255, 255, 255, .05)
}

.feature-icon, .trust-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .3s
}

.feature-icon svg, .trust-icon svg {
    width: 22px;
    height: 22px;
    fill: #fff
}

.feature-item:hover .feature-icon {
    background: rgba(255, 255, 255, .24);
    transform: scale(1.07)
}

.feature-text h4, .trust-txt h4 {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px
}

.feature-text p, .trust-txt p {
    font-size: 12px;
    color: rgba(255, 255, 255, .65);
    line-height: 1.4
}

/* ============================================
   SECTIONS
   ============================================ */
.section, .sec {
    padding: 76px 0
}

.section-alt, .sec-alt {
    background: var(--s1)
}

.sec-label, .section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--b700);
    margin-bottom: 12px
}

.sec-label::before, .section-label::before {
    content: '';
    width: 18px;
    height: 2.5px;
    background: var(--b600);
    border-radius: 2px
}

/* compat com label antigo */
.section-header .label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: #fff;
    background: var(--b900);
    padding: 5px 14px;
    border-radius: var(--rf);
    margin-bottom: 14px
}

.sec-title, .section-header h2 {
    font-family: var(--fd);
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -.3px;
    margin-bottom: 10px
}

.sec-desc, .section-header p {
    font-size: 15px;
    color: var(--ink50);
    line-height: 1.65
}

.sec-row, .section-header-flex {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 44px;
    flex-wrap: wrap
}

.section-header {
    text-align: left;
    margin: 0
}

.btn-all, .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ink);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 11px 20px;
    border-radius: var(--r3);
    transition: all .25s;
    white-space: nowrap;
    border: none
}

.btn-all svg {
    width: 14px;
    height: 14px;
    fill: #fff
}

.btn-all:hover, .btn-secondary:hover {
    background: var(--b800)
}

.sec-center {
    text-align: center;
    max-width: 580px;
    margin: 0 auto 52px
}

.sec-center .sec-label {
    justify-content: center
}

/* ============================================
   PRODUCT GRID & CARDS
   ============================================ */
.products-grid {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 20px
}

.product-card {
    background: #fff;
    border: 1.5px solid var(--ink20);
    border-radius: var(--r4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all .3s;
    box-shadow: var(--sc)
}

.product-card:hover {
    border-color: var(--b300);
    box-shadow: var(--sh);
    transform: translateY(-4px)
}

/* Imagem */
.pc-img-wrap {
    position: relative;
    display: block;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: var(--s1);
    border-bottom: 1px solid var(--ink08);
    text-decoration: none
}

.pc-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 18px;
    display: block;
    transition: transform .34s ease
}

.product-card:hover .pc-img {
    transform: scale(1.04)
}

.pc-no-img {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ink50)
}

.pc-no-img svg {
    width: 52px;
    height: 52px;
    opacity: .3
}

.pc-no-img span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ink50)
}

/* Badges */
.pc-badges, .prod-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
    pointer-events: none
}

.pc-badge, .prod-pill {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 3px 9px;
    border-radius: var(--rf);
    line-height: 1.4
}

.pc-badge-sale, .pill-off {
    background: var(--red);
    color: #fff
}

.pc-badge-dest, .pill-new {
    background: var(--b700);
    color: #fff
}

/* Body */
.pc-body, .prod-body {
    padding: 16px 16px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px
}

.pc-cat, .prod-cat {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--b700);
    margin: 0;
    line-height: 1
}

.pc-name, .prod-name {
    font-family: var(--fd);
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 39px
}

.pc-name a, .prod-name a {
    color: inherit;
    text-decoration: none
}

.pc-name a:hover, .prod-name a:hover {
    color: var(--b800)
}

/* Preço */
.pc-price, .prod-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
    margin-bottom: 0
}

.pc-price-old, .price-was, .price-old {
    font-size: 13px;
    color: var(--ink50);
    text-decoration: line-through;
    font-weight: 500
}

.pc-price-now, .price-now, .price-current {
    font-family: var(--fd);
    font-size: 21px;
    font-weight: 800;
    color: var(--b800);
    line-height: 1
}

/* Botão carrinho */
.pc-btn-cart, .btn-cart, .btn-add-cart {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 14px;
    margin-top: 4px;
    background: var(--b900);
    color: #fff;
    border: none;
    border-radius: var(--r3);
    font-family: var(--fb);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    transition: all .25s;
    box-shadow: 0 2px 8px rgba(26, 26, 26, .15);
    white-space: nowrap
}

.pc-btn-cart svg, .btn-cart svg {
    width: 15px;
    height: 15px;
    fill: #fff;
    flex-shrink: 0
}

.pc-btn-cart:hover, .btn-cart:hover, .btn-add-cart:hover {
    background: var(--b700);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(26, 26, 26, .22)
}

/* compat com classes antigas */
.product-image {
    position: relative;
    display: block;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: var(--s1);
    border-bottom: 1px solid var(--ink08)
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px
}

.no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--ink50)
}

.product-info {
    padding: 16px 16px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px
}

.product-category {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--b700)
}

.product-name {
    font-family: var(--fd);
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 39px
}

.product-name a {
    color: inherit;
    text-decoration: none
}

.product-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto
}

.product-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2
}

.product-badge {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: var(--rf);
    background: var(--red);
    color: #fff
}

.badge-featured {
    background: var(--b700)
}

.product-actions-overlay {
    display: none
}

/* ============================================
   CATEGORIES
   ============================================ */
.categories-grid {
    display: grid;
    grid-template-columns:repeat(5, 1fr);
    gap: 14px
}

/* com imagens */
.category-card-image {
    display: block;
    border-radius: var(--r4);
    overflow: hidden;
    aspect-ratio: 3/4;
    background: var(--s2);
    transition: all .35s;
    box-shadow: var(--sc)
}

.category-card-image:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh)
}

.category-image-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block
}

.category-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s
}

.category-card-image:hover .category-image-wrapper img {
    transform: scale(1.05)
}

.category-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 28, 80, .92) 0%, rgba(10, 28, 80, .35) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px 14px;
    transition: background .3s
}

.category-card-image:hover .category-overlay {
    background: linear-gradient(to top, rgba(16, 64, 160, .96) 0%, rgba(16, 64, 160, .52) 55%, transparent 100%)
}

.category-overlay h3 {
    font-family: var(--fd);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
    line-height: 1.2
}

.category-overlay p {
    font-size: 11px;
    color: rgba(255, 255, 255, .62);
    font-weight: 500
}

/* sem imagens (fallback) */
.cat-card {
    position: relative;
    display: block;
    border-radius: var(--r4);
    overflow: hidden;
    aspect-ratio: 3/4;
    background: var(--s2);
    transition: all .35s;
    box-shadow: var(--sc)
}

.cat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh)
}

.cat-bg {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--b900) 0%, var(--b700) 100%);
    display: flex;
    align-items: center;
    justify-content: center
}

.cat-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 28, 80, .92) 0%, rgba(10, 28, 80, .35) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px 14px;
    transition: background .3s
}

.cat-card:hover .cat-overlay {
    background: linear-gradient(to top, rgba(16, 64, 160, .96) 0%, rgba(16, 64, 160, .52) 55%, transparent 100%)
}

.cat-name {
    font-family: var(--fd);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
    line-height: 1.2
}

.cat-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, .62);
    font-weight: 500
}

/* ============================================
   ABOUT
   ============================================ */
.about-strip {
    background: var(--ink);
    color: #fff;
    padding: 76px 0;
    position: relative;
    overflow: hidden
}

.about-inner, .about-strip .container {
    position: relative;
    z-index: 2;
    text-align: center
}

.about-strip h3, .about-title {
    font-family: var(--fd);
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 700;
    color: var(--b300);
    margin-bottom: 14px
}

.about-strip p, .about-desc {
    max-width: 700px;
    margin: 0 auto 16px;
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .55)
}

.about-stats {
    display: flex;
    justify-content: center;
    max-width: 580px;
    margin: 32px auto 0;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--r5);
    overflow: hidden;
    flex-wrap: wrap
}

.about-stat, .astat {
    flex: 1;
    min-width: 140px;
    padding: 28px 20px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, .07)
}

.about-stat:last-child, .astat:last-child {
    border-right: none
}

.about-stat strong, .astat-n {
    display: block;
    font-family: var(--fd);
    font-size: 36px;
    font-weight: 800;
    color: var(--b300);
    line-height: 1;
    margin-bottom: 6px
}

.about-stat span, .astat-l {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: rgba(255, 255, 255, .30)
}

/* ============================================
   CTA SECTION
   ============================================ */
.cta-sec {
    background: var(--s1);
    padding: 76px 0;
    border-top: 1px solid var(--ink20)
}

.cta-box {
    background: #fff;
    border-radius: var(--r6);
    padding: 52px 44px;
    text-align: center;
    border: 1px solid var(--ink20);
    box-shadow: var(--sf);
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    overflow: hidden
}

.cta-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--b700), var(--b300))
}

.cta-icon-wrap {
    width: 64px;
    height: 64px;
    background: var(--b100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px
}

.cta-icon-wrap svg {
    width: 30px;
    height: 30px;
    fill: var(--b700)
}

.cta-title {
    font-family: var(--fd);
    font-size: 27px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 10px
}

.cta-desc {
    font-size: 15px;
    color: var(--ink50);
    line-height: 1.65;
    margin-bottom: 28px
}

.btn-wa {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 15px 32px;
    border-radius: var(--r4);
    box-shadow: 0 5px 18px rgba(37, 211, 102, .26);
    transition: all .3s
}

.btn-wa svg {
    width: 20px;
    height: 20px;
    fill: #fff
}

.btn-wa:hover {
    background: #1dbd5a;
    transform: translateY(-2px)
}

/* ============================================
   FOOTER
   ============================================ */
.footer, .site-footer {
    background: var(--ink);
    border-top: 3px solid var(--b700);
    padding: 56px 0 0;
    color: rgba(255, 255, 255, .55)
}

.footer-grid {
    display: grid;
    grid-template-columns:2.2fr 1fr 1fr 1.3fr;
    gap: 44px;
    padding-bottom: 44px;
    border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.footer-brand h3 {
    font-family: var(--fd);
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px
}

.footer-brand p {
    font-size: 13px;
    line-height: 1.75;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, .45)
}

.footer-cnpj {
    font-size: 11px;
    color: rgba(255, 255, 255, .25)
}

.footer h4, .footer-col h4 {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #fff;
    margin-bottom: 16px
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0
}

.footer-links li {
    margin-bottom: 9px
}

.footer-links a {
    font-size: 13px;
    color: rgba(255, 255, 255, .48);
    transition: all .2s;
    display: inline-block
}

.footer-links a:hover {
    color: var(--b300);
    transform: translateX(3px)
}

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

.footer-contact li {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .48);
    margin-bottom: 10px;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 7px
}

.footer-contact li svg {
    width: 13px;
    height: 13px;
    fill: var(--b300);
    margin-top: 2px;
    flex-shrink: 0
}

.footer-bottom {
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap
}

.footer-bottom p {
    font-size: 11.5px;
    color: rgba(255, 255, 255, .25)
}

/* ============================================
   WHATSAPP FLOAT
   ============================================ */
.whatsapp-float, .wa-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 888;
    width: 56px;
    height: 56px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(37, 211, 102, .40);
    transition: all .3s
}

.whatsapp-float:hover, .wa-float:hover {
    transform: scale(1.10)
}

.whatsapp-float svg, .wa-float svg {
    width: 28px;
    height: 28px;
    fill: #fff
}

/* ============================================
   CART & SIDEBARS
   ============================================ */
.overlay, .cart-overlay, .mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(5px);
    z-index: 950;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-smooth)
}

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

.cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 430px;
    max-width: 100%;
    background: #fff;
    z-index: 960;
    transform: translateX(100%);
    transition: transform .35s;
    display: flex;
    flex-direction: column;
    box-shadow: -6px 0 30px rgba(0, 0, 0, .12)
}

.cart-sidebar.show, .cart-sidebar.active {
    transform: translateX(0)
}

.cart-header {
    padding: 20px 22px;
    background: linear-gradient(135deg, var(--b900), var(--b700));
    display: flex;
    align-items: center;
    justify-content: space-between
}

.cart-header h3 {
    font-family: var(--fd);
    font-size: 17px;
    font-weight: 700;
    color: #fff
}

.close-cart {
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, .12);
    border: none;
    border-radius: var(--r2);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 22px;
    background: var(--s1)
}

.cart-item {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border-radius: var(--r3);
    margin-bottom: 10px;
    border: 1px solid var(--ink20)
}

.cart-item-image {
    width: 52px;
    height: 52px;
    border-radius: var(--r2);
    overflow: hidden;
    background: var(--s1);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px
}

.cart-item-details {
    flex: 1;
    min-width: 0
}

.cart-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px
}

.cart-item-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--b700)
}

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px
}

.qty-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--r2);
    background: #fff;
    border: 1px solid var(--ink20);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: var(--transition-base);
    cursor: pointer
}

.qty-btn:hover {
    background: var(--b700);
    border-color: var(--b700);
    color: #fff
}

.cart-footer {
    padding: 20px;
    border-top: 1px solid var(--ink20);
    background: #fff
}

.cart-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1.5px dashed var(--ink20)
}

.cart-total strong {
    font-family: var(--fd);
    font-size: 28px;
    font-weight: 800;
    color: var(--b700)
}

.continue-shopping {
    width: 100%;
    padding: 11px;
    background: transparent;
    border: 1.5px solid var(--ink20);
    border-radius: var(--r3);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink50);
    cursor: pointer;
    transition: var(--transition-base);
    margin-top: 8px
}

.continue-shopping:hover {
    border-color: var(--b300);
    color: var(--b700)
}

.mobile-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    background: var(--ink);
    z-index: 960;
    transform: translateX(-100%);
    transition: transform .35s;
    display: flex;
    flex-direction: column
}

.mobile-sidebar.show, .mobile-sidebar.active {
    transform: translateX(0)
}

.mobile-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    background: linear-gradient(135deg, var(--b900), var(--b700));
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.mobile-sidebar-header h3 {
    font-family: var(--fd);
    font-size: 17px;
    font-weight: 700;
    color: #fff
}

.mobile-nav-list {
    list-style: none;
    flex: 1;
    overflow-y: auto;
    padding: 6px 0
}

.mobile-nav-list li a {
    display: block;
    padding: 14px 22px;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .66);
    border-left: 3px solid transparent;
    transition: var(--transition-base)
}

.mobile-nav-list li a:hover {
    background: rgba(33, 150, 243, .10);
    color: var(--b300);
    border-left-color: var(--b400);
    padding-left: 26px
}

/* ============================================
   TOAST
   ============================================ */
.toast-container {
    position: fixed;
    top: 90px;
    right: 22px;
    z-index: 9990;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.toast {
    background: #fff;
    border-left: 3px solid var(--b700);
    border-radius: var(--r4);
    padding: 14px 18px;
    box-shadow: var(--sf);
    min-width: 280px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    animation: toastIn .3s ease
}

@keyframes toastIn {
    from {
        transform: translateX(80px);
        opacity: 0
    }
    to {
        transform: translateX(0);
        opacity: 1
    }
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state {
    text-align: center;
    padding: 80px 20px;
    grid-column: 1/-1
}

.empty-state .icon, .empty-state svg {
    font-size: 72px;
    margin: 0 auto 16px;
    opacity: .25;
    width: 60px;
    height: 60px;
    fill: var(--ink20)
}

.empty-state h3 {
    font-family: var(--fd);
    font-weight: 700;
    font-size: 20px;
    color: var(--ink);
    margin-bottom: 8px
}

.empty-state p {
    font-size: 14px;
    color: var(--ink50)
}

/* ============================================
   COOKIE BANNER
   ============================================ */
#cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--ink);
    color: #fff;
    padding: 15px 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .2);
    z-index: 9999;
    font-size: 14px;
    line-height: 1.6;
    display: flex;
    justify-content: center;
    align-items: center
}

#cookie-consent-banner .cookie-content {
    max-width: 900px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%
}

#cookie-consent-banner p {
    margin: 0;
    flex-grow: 1
}

#cookie-consent-banner a {
    color:  #063bca;
    text-decoration: underline
}

#cookie-consent-banner .cookie-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0
}

#cookie-consent-banner .btn-cookie-accept, #cookie-consent-banner .btn-cookie-decline {
    background: #063bca;
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: var(--r3);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all .2s
}

#cookie-consent-banner .btn-cookie-accept:hover, #cookie-consent-banner .btn-cookie-decline:hover {
    background: var(--b900)
}

#cookie-consent-banner .btn-cookie-decline {
    background: #e71a3b;
}

/* ============================================
   UTILITIES
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--r4);
    font-family: var(--fb);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: var(--transition-smooth);
    border: none;
    cursor: pointer
}

.btn-primary {
    background: var(--b700);
    color: #fff
}

.btn-primary:hover {
    background: var(--b900)
}

.btn-sm {
    padding: 8px 16px;
    font-size: 12px
}

.btn-lg {
    padding: 16px 32px;
    font-size: 16px
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns:repeat(3, 1fr)
    }

    .categories-grid {
        grid-template-columns:repeat(4, 1fr)
    }
}

@media (max-width: 1024px) {
    .header nav {
        display: none
    }

    .mobile-toggle {
        display: flex
    }

    .search-bar {
        max-width: 240px
    }

    .nav-bar {
        display: none
    }

    .hero .container {
        grid-template-columns:1fr;
        gap: 40px
    }

    .hero-visual, .hero-card {
        order: -1
    }

    .features-grid, .trust-grid {
        grid-template-columns:repeat(2, 1fr)
    }

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

    .products-grid {
        grid-template-columns:repeat(2, 1fr)
    }

    .categories-grid {
        grid-template-columns:repeat(3, 1fr)
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 48px 0 40px
    }

    .hero-content h2, .hero-title {
        font-size: 28px
    }

    .hero-content {
        text-align: center
    }

    .hero-buttons, .hero-ctas {
        justify-content: center;
        flex-direction: column;
        gap: 12px
    }

    .hero-buttons a, .hero-ctas a {
        width: 100%;
        justify-content: center
    }

    .hero-trust {
        justify-content: center
    }

    .section, .sec {
        padding: 56px 0
    }

    .sec-row, .section-header-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }

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

    .about-stats {
        flex-direction: column
    }

    .about-stat, .astat {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .07)
    }

    .footer-grid {
        grid-template-columns:1fr;
        gap: 0;
        padding-bottom: 32px
    }

    .footer-brand {
        padding-bottom: 24px;
        border-bottom: 1px solid rgba(255, 255, 255, .07)
    }

    .cta-box {
        padding: 36px 22px
    }

    .categories-grid {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (max-width: 640px) {
    .container {
        padding: 0 16px
    }

    .top-bar {
        display: none
    }

    .search-bar {
        max-width: 160px
    }

    .products-grid {
        grid-template-columns:repeat(2, 1fr);
        gap: 12px
    }

    .pc-body, .prod-body {
        padding: 12px 12px 14px
    }

    .pc-name, .prod-name {
        font-size: 13px
    }

    .pc-price-now, .price-now {
        font-size: 18px
    }

    .pc-btn-cart, .btn-cart {
        font-size: 11px;
        padding: 11px 8px
    }

    .whatsapp-float, .wa-float {
        width: 52px;
        height: 52px;
        bottom: 20px;
        right: 20px
    }
}

@media (max-width: 400px) {
    .products-grid {
        grid-template-columns:1fr
    }
}

@media print {
    .promo-ticker, .top-bar, .header, .nav-bar, .mobile-sidebar, .cart-sidebar, .footer, .whatsapp-float {
        display: none
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #121212;
    background: #ffffff;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

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

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

svg {
    display: block;
    flex-shrink: 0;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (max-width: 640px) {
    .container {
        padding: 0 16px;
    }
}

/* ════════════════════════════════════════════════════════════════
           HEADER CASASBAHIA — DESIGN LIMPO E PROFISSIONAL
           ════════════════════════════════════════════════════════════════ */

.main-header {
    background: #0071E4;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.3s ease;
}

.main-header.scrolled {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* LINHA 1: Menu + Logo + Busca + Ícones */
.header-top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
}

/* Hamburger Menu */
.mob-hamb {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.mob-hamb span {
    display: block;
    width: 24px;
    height: 2.5px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.site-logo:hover {
    opacity: 0.9;
}

.logo-image {
    height: 40px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

/* Barra de Busca */
.search-container {
    flex: 1;
    min-width: 200px;
}

.search-form {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 24px;
    padding: 0 16px;
    gap: 8px;
    transition: all 0.2s ease;
}

.search-form:focus-within {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 0;
    font-size: 14px;
    color: #0C1828;
    font-family: inherit;
}

.search-input::placeholder {
    color: rgba(12, 24, 40, 0.42);
}

.search-input:focus {
    outline: none;
}

.search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.search-button svg {
    width: 20px;
    height: 20px;
    fill: #0071E4;
}

/* Ícones Header (Favoritos, Carrinho, Perfil) */
.header-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.hdr-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.hdr-ico:hover {
    background: rgba(255, 255, 255, 0.15);
}

.hdr-ico svg {
    width: 28px;
    height: 28px;
    fill: #ffffff;
}

/* Badge Carrinho */
.cart-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 20px;
    height: 20px;
    background-color: rgb(202, 23, 23);
    color: #ffffff;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    /*border: 2px solid #0071E4;*/
    animation: badgePulse 2.5s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* LINHA 2: Localização */
.header-bottom {
    background: #0071E4;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.cep-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    flex-shrink: 0;
    padding: 4px 0;
    transition: opacity 0.2s;
}

.cep-pill:hover {
    opacity: 0.9;
}

.cep-pill svg {
    width: 18px;
    height: 18px;
    fill: #ffffff;
    flex-shrink: 0;
}

/* Fade do header */
.header-fade {
    height: 40px;
    background: linear-gradient(to bottom, #0071E4 0%, #5fa3f5 35%, #b2d8fc 68%, #f0f8ff 90%, #ffffff 100%);
    width: 100%;
}

/* ════════════════════════════════════════════════════════════════
           MOBILE MENU
           ════════════════════════════════════════════════════════════════ */

.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 950;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease;
}

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

.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 90vw;
    background: #0071E4;
    z-index: 960;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.mobile-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

.close-button {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    color: #ffffff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.close-button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.mobile-nav-list {
    list-style: none;
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

.mobile-nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-left-color: #ffffff;
    padding-left: 26px;
}

.mobile-footer {
    padding: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.whatsapp-button {
    width: 100%;
    padding: 14px;
    background: #25D366;
    color: #ffffff;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    transition: all 0.2s;
    cursor: pointer;
}

.whatsapp-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
}

/* ════════════════════════════════════════════════════════════════
           CARRINHO (CART SIDEBAR)
           ════════════════════════════════════════════════════════════════ */

.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 950;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease;
}

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

.cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100%;
    background: #f5f7fa;
    z-index: 960;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -6px 0 20px rgba(0, 0, 0, 0.12);
}

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

.cart-header {
    padding: 20px;
    background: #0071E4;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #f5f7fa;
}

.cart-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
}

.empty-icon {
    font-size: 56px;
    opacity: 0.2;
    margin-bottom: 12px;
}

.empty-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 5px;
}

.empty-text {
    font-size: 12px;
    color: rgba(18, 18, 18, 0.5);
}

.cart-footer {
    padding: 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
}

.cart-footer.hidden {
    display: none;
}

.cart-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.total-label {
    font-size: 13px;
    font-weight: 600;
    color: #666;
}

.total-value {
    font-size: 26px;
    font-weight: 800;
    color: #0071E4;
}

.checkout-button {
    width: 100%;
    padding: 14px;
    background: #0071E4;
    color: #ffffff;
    border-radius: 8px;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(0, 113, 228, 0.25);
    transition: all 0.2s;
    cursor: pointer;
    margin-bottom: 8px;
}

.checkout-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 113, 228, 0.35);
}

.continue-shopping {
    width: 100%;
    padding: 11px;
    background: transparent;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(18, 18, 18, 0.5);
    cursor: pointer;
    transition: all 0.2s;
}

.continue-shopping:hover {
    border-color: #0071E4;
    color: #0071E4;
}

/* ════════════════════════════════════════════════════════════════
           RESPONSIVO
           ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .logo-image {
        height: 36px;
    }

    .header-top {
        gap: 12px;
        padding: 10px 0;
    }

    .search-form {
        padding: 0 12px;
    }

    .search-input {
        font-size: 13px;
        padding: 10px 0;
    }

    .hdr-ico svg {
        width: 26px;
        height: 26px;
    }
}

@media (max-width: 640px) {
    .search-container {
        order: 3;
        width: 100%;
        flex: 0 0 100%;
        margin-top: 8px;
    }

    .header-top {
        flex-wrap: wrap;
        gap: 10px 12px;
    }

    .site-logo {
        order: 1;
        flex: 1;
        min-width: 100px;
    }

    .header-icons {
        order: 2;
        gap: 8px;
    }

    .hdr-ico {
        padding: 6px;
    }

    .hdr-ico svg {
        width: 24px;
        height: 24px;
    }

    .mobile-menu {
        width: 280px;
    }

    .cart-sidebar {
        width: 100%;
    }
}


/* ═════════════════════════════════════════════════════════
   FOOTER CASASBAHIA STYLE - COMPLETO
═════════════════════════════════════════════════════════ */
:root {
    --mg-primary: #0071E4;
    --mg-primary-dark: #005CB8;
    --mg-primary-light: #E3F2FD;
    --mg-success: #16A34A;
    --mg-warning: #EA8C00;
    --mg-bg: #F5F5F5;
    --mg-surface: #FFFFFF;
    --mg-text: #0F172A;
    --mg-text-secondary: #64748B;
    --mg-border: #E2E8F0;
    --mg-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.footer {
    background: var(--mg-bg);
    color: var(--mg-text-secondary);
    padding: 64px 0 0;
    border-top: 1px solid var(--mg-border);
    position: relative;
    overflow: hidden;
    font-family: var(--mg-font);
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 80% 20%, rgba(0, 113, 228, 0.02) 0%, transparent 40%),
    radial-gradient(circle at 10% 80%, rgba(0, 113, 228, 0.01) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.footer .container {
    position: relative;
    z-index: 1;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 56px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--mg-border);
}

/* ===== BRAND ===== */
.footer-brand-logo {
    display: block;
    margin-bottom: 16px;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.footer-brand-logo:hover {
    transform: scale(1.05);
}

.footer-brand-logo img {
    height: 40px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}

.footer-brand .footer-brand-sub {
    display: block;
    font-weight: 800;
    font-size: 10px;
    color: var(--mg-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    margin-top: 0;
}

.footer-brand p {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.7;
    margin-bottom: 16px;
    color: var(--mg-text-secondary);
}

.footer-badges-inline {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.footer-cnpj,
.footer-ie {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--mg-primary);
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    padding: 6px 12px;
    border-radius: 6px;
    letter-spacing: 0.4px;
    transition: all 0.2s ease;
}

.footer-cnpj:hover,
.footer-ie:hover {
    border-color: var(--mg-primary);
    background: var(--mg-primary-light);
}

/* ===== ACCORDION ===== */
.footer-accordion {
    border-bottom: 1px solid var(--mg-border);
    padding-bottom: 24px;
}

.footer h4,
.footer-accordion-toggle {
    font-weight: 800;
    font-size: 11px;
    color: var(--mg-primary);
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: color 0.2s ease;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-align: left;
    font-family: var(--mg-font);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-accordion-toggle:hover {
    color: var(--mg-primary-dark);
}

.accordion-arrow {
    display: none;
    transition: transform 0.3s ease;
    font-size: 14px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    font-size: 13px;
    font-weight: 500;
    color: var(--mg-text-secondary);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    position: relative;
}

.footer-links a::before {
    content: '';
    width: 0;
    height: 1.5px;
    background: var(--mg-primary);
    transition: width 0.2s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--mg-primary);
    font-weight: 600;
}

.footer-links a:hover::before {
    width: 10px;
}

/* ===== CONTATO ===== */
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--mg-text-secondary);
    line-height: 1.6;
}

.footer-contact li strong {
    color: var(--mg-text);
    font-weight: 700;
    display: block;
    margin-top: 8px;
    margin-bottom: 4px;
}

.footer-contact li:first-child strong {
    margin-top: 0;
}

.footer-contact li a {
    color: var(--mg-primary);
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 600;
}

.footer-contact li a:hover {
    color: var(--mg-primary-dark);
    text-decoration: underline;
}

/* ===== BADGES (PAGAMENTO + SELOS) ===== */
.footer-badges {
    padding: 32px 0;
    border-bottom: 1px solid var(--mg-border);
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.badge-label {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--mg-primary);
    margin: 0;
    white-space: nowrap;
}

.badge-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.badge-icons img {
    height: 32px;
    width: auto;
    object-fit: contain;
    max-width: 100px;
    transition: transform 0.2s ease;
}

.badge-icons img:hover {
    transform: scale(1.08);
}

/* ===== PAYMENT CARDS ===== */
.pay-svg {
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 0 12px;
    transition: all 0.2s ease;
    font-weight: 800;
    font-size: 12px;
}

.pay-svg:hover {
    transform: translateY(-2px);
}

/* PIX */
.pay-svg.pix {
    background: var(--mg-surface);
    border: 1.5px solid var(--mg-border);
    gap: 8px;
}

.pay-svg.pix svg {
    width: 16px;
    height: 16px;
}

.pay-svg.pix span {
    color: #32BCAD;
    letter-spacing: 0.5px;
}

/* VISA */
.pay-svg.visa {
    background: #1A1F71;
    color: white;
    font-family: Georgia, serif;
    font-style: italic;
    letter-spacing: -0.5px;
    padding: 0 14px;
}

/* MASTERCARD */
.pay-svg.master {
    background: var(--mg-surface);
    border: 1.5px solid var(--mg-border);
    gap: 6px;
}

.pay-svg.master .mc-c1 {
    width: 16px;
    height: 16px;
    background: #EB001B;
    border-radius: 50%;
}

.pay-svg.master .mc-c2 {
    width: 16px;
    height: 16px;
    background: #F79E1B;
    border-radius: 50%;
    margin-left: -6px;
}

/* ===== FOOTER BOTTOM ===== */
.footer-bottom {
    padding: 24px 0 32px;
}

.footer-bottom-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    border-top: 1px solid var(--mg-border);
    padding-top: 20px;
}

.footer-bottom-links a {
    font-size: 12px;
    font-weight: 700;
    color: var(--mg-primary);
    transition: all 0.2s ease;
    text-decoration: none;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.footer-bottom-links a:hover {
    color: var(--mg-primary-dark);
    transform: translateY(-1px);
}

.footer-bottom p {
    font-size: 12px;
    font-weight: 500;
    color: var(--mg-text-secondary);
    margin: 0;
    text-align: center;
    line-height: 1.7;
}

/* ===== COOKIE BANNER ===== */
#cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f7f7f7;
    z-index: 999;
    display: none !important;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: var(--mg-font);
    animation: slideUpCookie 0.4s ease-out;
}

#cookie-consent-banner.show {
    display: flex !important;
}

@keyframes slideUpCookie {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.cookie-content {
    max-width: 1100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.cookie-content p {
    margin: 0;
    color: #5c5c5c;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    flex: 1;
}

.cookie-content p a {
    color: white;
    font-weight: 700;
    text-decoration: underline;
    transition: opacity 0.2s ease;
}

.cookie-content p a:hover {
    opacity: 0.9;
}

.cookie-buttons {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.btn-cookie-accept,
.btn-cookie-decline {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--mg-font);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-cookie-accept {
    background: white;
    color: #0071E4;
}

.btn-cookie-accept:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-cookie-decline {
    background: rgba(255, 255, 255, 0.2);
    color:  rgba(255, 255, 255, 0.2);
    border: 1px solid white;
}

.btn-cookie-decline:hover {
    background: #9f172d;
}


/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

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

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding-bottom: 32px;
    }

    .footer-brand {
        padding-bottom: 24px;
        border-bottom: 1px solid var(--mg-border);
    }

    .footer-accordion {
        border-bottom: 1px solid var(--mg-border);
        padding-bottom: 0;
    }

    .footer h4,
    .footer-accordion-toggle {
        margin: 0;
        padding: 16px 0;
        font-size: 13px;
    }

    .accordion-arrow {
        display: inline-block;
    }

    .footer-accordion-toggle.active .accordion-arrow {
        transform: rotate(90deg);
    }

    .footer-accordion-content {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: all 0.3s ease;
    }

    .footer-accordion-content.open {
        max-height: 500px;
        opacity: 1;
        padding-bottom: 12px;
    }

    .footer-bottom {
        padding: 20px 0 24px;
    }

    .footer-bottom-links {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
        text-align: center;
        border-top: none;
        padding-top: 0;
        margin-bottom: 16px;
    }

    .footer-bottom-links a {
        padding: 12px 0;
        font-size: 13px;
        border-bottom: 1px solid var(--mg-border);
        width: 100%;
        display: block;
    }

    .footer-bottom-links a:last-child {
        border-bottom: none;
    }

    .footer-bottom p {
        font-size: 11px;
        line-height: 1.6;
        padding: 0 12px;
    }

    .footer-badges {
        padding: 24px 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .badge-label {
        width: 100%;
        margin-bottom: 12px;
    }

    .badge-icons {
        width: 100%;
        justify-content: flex-start;
    }

    .cookie-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

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

    .btn-cookie-accept,
    .btn-cookie-decline {
        width: 100%;
    }


}

@media (max-width: 640px) {
    .footer {
        padding: 40px 0 0;
    }

    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}


/* ── PRODUCT CARD MERCADO LIVRE STYLE — PERFEITO ── */
.product-card {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    height: 100%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.product-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: #d0d0d0;
}

/* CONTAINER DA IMAGEM — FUNDO BRANCO PURO */
.pc-img-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: #ffffff;
    text-decoration: none;
    padding: 12px;
    flex-shrink: 0;
}

.pc-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* QUANDO NÃO TEM IMAGEM — fundo branco também */
.pc-no-img {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(18, 18, 18, 0.22);
    gap: 8px;
    font-size: 12px;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}

.pc-no-img svg {
    width: 44px;
    height: 44px;
}

/* BADGE FULL (canto superior esquerdo) — AZUL PURO */
.pc-badge-full {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #0071e4;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.pc-badge-full::before {
    content: '☁';
    font-size: 13px;
}

/* CORPO DO CARD */
.pc-body {
    padding: 14px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* NOME DO PRODUTO */
.pc-name {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #212529;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
}

.pc-name a {
    color: inherit;
    text-decoration: none;
}

.pc-name a:hover {
    color: #0071e4;
}

/* AVALIAÇÃO (Rating + Estrelas) */
.pc-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    margin-top: 4px;
}

.pc-rating-num {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
}

.pc-rating-count {
    font-size: 11px;
    color: #999;
    margin-left: 2px;
}

.pc-stars {
    display: inline-flex;
    gap: 1px;
}

.pc-stars svg {
    width: 13px;
    height: 13px;
}

.pc-star-full {
    fill: #ffb300;
}

.pc-star-empty {
    fill: #e8e8e8;
}

/* DESCONTO (verde teal) */
.pc-discount {
    font-size: 12px;
    font-weight: 700;
    color: #27ae60;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* PREÇO */
.pc-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    margin-bottom: 6px;
}

.pc-price-now {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.1;
}

.pc-price-small {
    font-size: 11px;
    color: #999;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* PARCELAMENTO */
.pc-installment {
    font-size: 11px;
    color: #666;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.4;
}

/* LINKS AZUIS (Retire, Frete, Receba) */
.pc-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
    border-top: 1px solid #eee;
    padding-top: 8px;
}

.pc-link {
    font-size: 11px;
    color: #0071e4;
    text-decoration: none;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    transition: color 0.2s;
}

.pc-link:hover {
    color: #005fc4;
    text-decoration: underline;
}

/* GRID DE PRODUTOS */
.products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

/* RESPONSIVIDADE */
@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .pc-body {
        padding: 12px 14px 14px;
        gap: 6px;
    }

    .pc-name {
        font-size: 13px;
        min-height: 33px;
    }

    .pc-price-now {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .pc-img-wrap {
        padding: 8px;
    }

    .pc-body {
        padding: 10px 12px 12px;
        gap: 5px;
    }

    .pc-name {
        font-size: 12px;
        min-height: 30px;
    }

    .pc-price-now {
        font-size: 16px;
    }
}


* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* BANNER TOPO + 3 banners + banners de seção */
.idx-banner-wrap {
    background: #ffffff;
    padding: 0 0 8px;
}

.idx-bigbanner {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 1430/470;
    background: #0D2B5E;
    border: 1px solid rgba(21, 101, 192, .20);
    box-shadow: 0 10px 40px rgba(13, 43, 94, .18);
}

.idx-bb-slide {
    position: absolute;
    inset: 0;
    opacity: 1;
    z-index: 1;
}

.idx-bb-slide.active {
    z-index: 2;
    animation: idxFade .6s ease both;
}

@keyframes idxFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.idx-bb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.idx-bb-ph {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0D2B5E 0%, #1565C0 55%, #0D2B5E 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.idx-bb-ph span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .65);
    padding: 0 20px;
    text-align: center;
}

.idx-bb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(21, 101, 192, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}

.idx-bb-arrow:hover {
    background: #1565C0;
    border-color: #1565C0;
}

.idx-bb-arrow svg {
    width: 20px;
    height: 20px;
    fill: #1565C0;
}

.idx-bb-arrow:hover svg {
    fill: #fff;
}

.idx-bb-prev {
    left: 16px;
}

.idx-bb-next {
    right: 16px;
}

.idx-bb-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 7px;
}

.idx-bb-pg {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .65);
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.idx-bb-pg.active {
    background: #1565C0;
    width: 22px;
    border-radius: 5px;
}

.idx-midbanners {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 18px;
    margin-top: 18px;
}

.idx-mid {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 460/260;
    background: #ffffff;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, .08);
    transition: all .3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.idx-mid:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(21, 101, 192, .15);
    border-color: rgba(21, 101, 192, .25);
}

.idx-mid-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.idx-mid:hover .idx-mid-img {
    transform: scale(1.05);
}

.idx-mid-ph {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0D2B5E 0%, #1565C0 55%, #0D2B5E 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.idx-mid-ph span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .65);
}

.idx-secbanner {
    display: block;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 30px;
    aspect-ratio: 1430/360;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

.idx-secbanner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.idx-secbanner.full {
    margin: 0 auto;
    max-width: 1180px;
}

/* SECTIONS — ESTILO CASASBAHIA REFINADO (BRANCO PURO) */
.idx-sec {
    padding: 48px 0;
    background: #ffffff;
}

.idx-sec-alt {
    background: #ffffff;
}

.idx-sec-label {
    display: none;
}

.idx-sec-title {
    font-family: 'Manrope', -apple-system, 'Segoe UI', 'Roboto', sans-serif;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.2;
    letter-spacing: -.4px;
    margin-bottom: 4px;
    -webkit-text-fill-color: #1a1a1a;
}

.idx-sec-title em {
    font-style: normal;
    color: #0071E4;
}

.idx-sec-desc {
    font-size: 14px;
    color: #888;
    line-height: 1.5;
    font-weight: 500;
}

.idx-sec-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.idx-sec-center {
    text-align: left;
    max-width: none;
    margin: 0 0 24px;
}

.idx-btn-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: #0071E4;
    border: none;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    padding: 6px 0;
    border-radius: 0;
    transition: opacity .2s;
    white-space: nowrap;
    text-decoration: none;
}

.idx-btn-all svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.idx-btn-all:hover {
    background: transparent;
    color: #005FC4;
    opacity: .85;
}

/* PRODUCT GRID - REFERENCIANDO O ESTILO DO PRODUCT-CARD.PHP */
.products-grid {
    display: grid;
    grid-template-columns:repeat(5, 1fr);
    gap: 20px;
}

/* DEPOIMENTOS */
.idx-depo-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 18px;
}

.idx-depo-c {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    padding: 24px;
    transition: all .25s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.idx-depo-c:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
    border-color: rgba(0, 0, 0, .12);
}

.idx-depo-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 14px;
}

.idx-depo-stars svg {
    width: 16px;
    height: 16px;
    fill: #FFB300;
}

.idx-depo-txt {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: #333;
    margin: 0 0 18px;
    font-weight: 400;
}

.idx-depo-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

.idx-depo-avatar-foto {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    border: 2px solid #F0F8FF;
    background: #FAFAFA;
}

.idx-depo-name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    color: #1a1a1a;
    line-height: 1.2;
}

.idx-depo-loc {
    font-family: 'Manrope', sans-serif;
    font-size: 11.5px;
    color: rgba(26, 26, 26, .6);
    font-weight: 500;
    margin-top: 3px;
}

.idx-depo-verify {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Manrope', sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    color: #0071E4;
    background: rgba(0, 113, 228, .10);
    padding: 2px 7px;
    border-radius: 9999px;
    margin-top: 5px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.idx-depo-verify svg {
    width: 9px;
    height: 9px;
    fill: #0071E4;
}

.idx-divider {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .06);
}

/* RESPONSIVE */
@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns:repeat(4, 1fr);
        gap: 18px
    }
}

@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns:repeat(3, 1fr);
        gap: 16px
    }
}

@media (max-width: 900px) {
    .idx-depo-grid {
        grid-template-columns:1fr;
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .idx-bigbanner {
        aspect-ratio: auto;
        background: #ffffff;
        border-radius: 14px;
    }

    .idx-bb-slide {
        position: absolute;
        inset: 0;
    }

    .idx-bb-slide.active {
        position: relative;
    }

    .idx-bb-img {
        position: relative;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .idx-bb-arrow {
        width: 34px;
        height: 34px;
    }

    .idx-bb-dots {
        bottom: 8px;
    }

    .idx-midbanners {
        grid-template-columns:1fr;
        gap: 14px;
    }

    .idx-mid {
        aspect-ratio: auto;
        background: #ffffff;
    }

    .idx-mid-img {
        position: relative;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .idx-secbanner {
        aspect-ratio: auto;
        background: #ffffff;
    }

    .idx-secbanner img {
        height: auto;
    }

    .idx-sec {
        padding: 36px 0
    }

    .idx-sec-row {
        flex-direction: row;
        align-items: center;
        gap: 12px
    }
}

@media (max-width: 640px) {
    .products-grid {
        grid-template-columns:repeat(2, 1fr);
        gap: 12px
    }
}

@media (max-width: 400px) {
    .products-grid {
        grid-template-columns:repeat(2, 1fr)
    }
}


.idx-svc-wrap {
    background: #ffffff;
}

/* Banner azul superior */
.idx-svc-banner {
    background: linear-gradient(90deg, #0086FF 0%, #00A6FF 100%);
    position: relative;
    overflow: hidden;
}

.idx-svc-banner-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 16px 24px;
    flex-wrap: wrap;
}

.idx-svc-logo {
    display: flex;
    flex-direction: column;
    line-height: .95;
    flex-shrink: 0;
}

.idx-svc-logo b {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 26px;
    color: #fff;
    letter-spacing: .5px;
}

.idx-svc-logo span {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #FFE000;
    letter-spacing: .5px;
}

.idx-svc-tag {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.05;
    color: #fff;
    flex-shrink: 0;
}

.idx-svc-tag em {
    font-style: normal;
    color: #FFE000;
}

.idx-svc-banner-icons {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.idx-svc-banner-icons div {
    width: 46px;
    height: 46px;
    border: 1.5px solid rgba(255, 255, 255, .7);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.idx-svc-banner-icons svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.6;
}

.idx-svc-banner-txt {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    line-height: 1.3;
    max-width: 200px;
}

.idx-svc-banner-search {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 9999px;
    padding: 9px 18px;
    flex-shrink: 0;
}

.idx-svc-banner-search svg {
    width: 16px;
    height: 16px;
    fill: #0086FF;
}

.idx-svc-banner-search span {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #0086FF;
}

/* Grade de selos */
.idx-svc-grid {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 38px 24px 30px;
    flex-wrap: wrap;
}

.idx-svc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    flex: 1;
    min-width: 120px;
}

.idx-svc-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    transition: transform .2s, box-shadow .2s;
}

.idx-svc-item:hover .idx-svc-circle {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

.idx-svc-circle svg {
    width: 42px;
    height: 42px;
}

.idx-svc-label {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    text-align: center;
    line-height: 1.3;
    max-width: 150px;
}

/* Linha Lu explica + sociais */
.idx-svc-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 24px 40px;
    flex-wrap: wrap;
}

.idx-svc-lu-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: #DDE6F0;
    flex-shrink: 0;
}

.idx-svc-lu {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: #6B2FB3;
}

.idx-svc-lu svg {
    width: 26px;
    height: 26px;
    fill: #9B30C9;
}

.idx-svc-lu span {
    color: #1A1A1A;
    font-weight: 700;
}

.idx-svc-social {
    margin-left: auto;
    display: flex;
    gap: 10px;
}

.idx-svc-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #1565C0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s;
}

.idx-svc-social a:hover {
    opacity: .85;
}

.idx-svc-social svg {
    width: 17px;
    height: 17px;
    fill: #fff;
}

@media (max-width: 900px) {
    .idx-svc-banner-icons, .idx-svc-banner-txt, .idx-svc-banner-search {
        display: none;
    }

    .idx-svc-grid {
        gap: 18px 8px;
    }

    .idx-svc-item {
        min-width: 33%;
        flex: 0 0 30%;
    }
}

@media (max-width: 560px) {
    .idx-svc-tag {
        font-size: 18px;
    }

    .idx-svc-circle {
        width: 74px;
        height: 74px;
    }

    .idx-svc-circle svg {
        width: 34px;
        height: 34px;
    }

    .idx-svc-label {
        font-size: 13px;
    }

    .idx-svc-foot {
        justify-content: center;
    }

    .idx-svc-social {
        margin-left: 0;
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }
}


/* ============================================================
   PRODUTOS.PHP - AEROPORTO MATERIAIS
   Visual claro/apagado, loja fina, ZERO emojis
============================================================ */
:root {
    --pl-orange: #1B3F8B;
    --pl-orange-d: #14306B;
    --pl-orange-l: #3A5FAE;
    --pl-orange-tint: rgba(27, 63, 139, .08);
    --pl-orange-tint-2: #F2F5FB;
    --pl-success: #059669;
    --pl-success-l: #10B981;
    --pl-success-bg: rgba(5, 150, 105, .10);
    --pl-ink: #1A1A1A;
    --pl-ink-70: rgba(26, 26, 26, .70);
    --pl-ink-60: rgba(26, 26, 26, .55);
    --pl-ink-40: rgba(26, 26, 26, .40);
    --pl-ink-20: rgba(26, 26, 26, .12);
    --pl-cream: #FAFAF7;
    --pl-cream-2: #F4F4ED;
    --pl-border: #ECECE5;
    --pl-border-l: #F4F4ED;
    --pl-border-strong: #D4D4D4;
    --pl-white: #fff;
    --pl-red: #DC2626;
    --pl-fp: 'Fraunces', Georgia, serif;
    --pl-fb: 'Figtree', -apple-system, sans-serif;
    --pl-r2: 6px;
    --pl-r3: 10px;
    --pl-r4: 14px;
    --pl-r5: 18px;
    --pl-rf: 9999px;
    --pl-ease: cubic-bezier(.4, 0, .2, 1);
    --pl-spring: cubic-bezier(.34, 1.56, .64, 1);
}

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

/* ===== PAGE HERO ===== */
.page-hero {
    background: #fff;
    border-bottom: 1px solid var(--pl-border);
    padding: 48px 0 36px;
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--pl-orange) 50%, transparent);
}

.page-hero-inner {
    position: relative;
    z-index: 2;
}

/* breadcrumb */
.pbc {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--pl-ink-60);
    margin-bottom: 18px;
    flex-wrap: wrap;
    font-family: var(--pl-fb);
}

.pbc a {
    color: var(--pl-ink-60);
    text-decoration: none;
    transition: color .2s;
}

.pbc a:hover {
    color: var(--pl-orange);
}

.pbc svg {
    width: 10px;
    height: 10px;
    fill: var(--pl-ink-40);
    flex-shrink: 0;
}

.pbc span:last-child {
    color: var(--pl-ink);
    font-weight: 700;
}

/* eyebrow */
.page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--pl-cream);
    border: 1px solid var(--pl-border);
    color: var(--pl-ink);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 6px 14px;
    border-radius: var(--pl-rf);
    margin-bottom: 18px;
    font-family: var(--pl-fb);
}

.page-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pl-orange);
    animation: plBlink 2s ease-in-out infinite;
}

@keyframes plBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: .5;
        transform: scale(.85);
    }
}

/* titulo */
.page-title {
    font-family: var(--pl-fp);
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 600;
    line-height: 1.05;
    color: var(--pl-ink);
    margin: 0 0 16px;
    letter-spacing: -.8px;
}

.page-title em {
    font-style: italic;
    color: var(--pl-orange);
    font-weight: 500;
}

/* meta bar */
.page-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding-top: 18px;
    border-top: 1px solid var(--pl-border);
}

.page-meta-count {
    font-size: 13px;
    color: var(--pl-ink-60);
    font-family: var(--pl-fb);
    font-weight: 500;
}

.page-meta-count b {
    color: var(--pl-ink);
    font-weight: 800;
}

.page-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pl-ink-60);
    font-family: var(--pl-fb);
}

.page-trust-pill svg {
    width: 14px;
    height: 14px;
    fill: var(--pl-orange);
}

.page-trust-pill strong {
    color: var(--pl-ink);
    font-weight: 700;
}

/* ===== CATALOG BODY ===== */
.catalog-page {
    padding: 36px 0 96px;
    background: var(--pl-cream);
}

.catalog-layout {
    display: grid;
    grid-template-columns: 248px 1fr;
    gap: 32px;
    align-items: start;
}

/* ===== SIDEBAR ===== */
.catalog-sidebar {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sb-card {
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-r4);
    overflow: hidden;
    transition: border-color .2s;
}

.sb-card:hover {
    border-color: var(--pl-border-strong);
}

.sb-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--pl-white);
    border-bottom: 1px solid var(--pl-border-l);
    cursor: pointer;
    user-select: none;
    transition: background .15s;
}

.sb-card-head:hover {
    background: var(--pl-cream);
}

.sb-card.open .sb-card-head {
    border-bottom-color: var(--pl-border);
}

.sb-card-icon {
    width: 32px;
    height: 32px;
    background: var(--pl-orange-tint-2);
    border: 1px solid rgba(27, 63, 139, .18);
    border-radius: var(--pl-r2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sb-card-icon svg {
    width: 14px;
    height: 14px;
    fill: var(--pl-orange);
}

.sb-card-title {
    flex: 1;
    font-family: var(--pl-fb);
    font-size: 11.5px;
    font-weight: 800;
    color: var(--pl-ink);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.sb-card-arrow {
    width: 24px;
    height: 24px;
    background: var(--pl-cream);
    border: 1px solid var(--pl-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .32s var(--pl-ease), background .2s, border-color .2s;
}

.sb-card-arrow svg {
    width: 11px;
    height: 11px;
    fill: var(--pl-ink-60);
}

.sb-card.open .sb-card-arrow {
    transform: rotate(180deg);
    background: var(--pl-orange-tint);
    border-color: var(--pl-orange-l);
}

.sb-card.open .sb-card-arrow svg {
    fill: var(--pl-orange);
}

.sb-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .38s var(--pl-ease);
}

.sb-card.open .sb-card-body {
    max-height: 900px;
}

/* lista de categorias */
.category-filter {
    list-style: none;
    padding: 6px 0 6px;
    margin: 0;
}

.category-filter li + li {
    border-top: 1px solid var(--pl-border-l);
}

.category-filter a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pl-ink-70);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all .22s var(--pl-ease);
    font-family: var(--pl-fb);
}

.category-filter a:hover {
    background: var(--pl-orange-tint-2);
    color: var(--pl-orange);
    border-left-color: var(--pl-orange);
    padding-left: 22px;
}

.category-filter a.active {
    background: var(--pl-orange-tint);
    color: var(--pl-orange);
    border-left-color: var(--pl-orange);
    font-weight: 700;
    padding-left: 22px;
}

.cat-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pl-ink-20);
    flex-shrink: 0;
    transition: background .2s, transform .22s var(--pl-spring);
}

.category-filter a:hover .cat-dot {
    background: var(--pl-orange);
    transform: scale(1.4);
}

.category-filter a.active .cat-dot {
    background: var(--pl-orange);
    transform: scale(1.4);
}

.cat-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--pl-fb);
    font-size: 13px;
    font-weight: 600;
    color: var(--pl-ink) !important;
}

.category-filter a:hover .cat-name {
    color: var(--pl-orange) !important;
}

.category-filter a.active .cat-name {
    color: var(--pl-orange) !important;
    font-weight: 800;
}

.cat-count {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--pl-ink-60);
    background: var(--pl-cream-2);
    border: 1px solid var(--pl-border);
    padding: 2px 8px;
    border-radius: var(--pl-rf);
    flex-shrink: 0;
    min-width: 22px;
    text-align: center;
    transition: all .2s;
    font-family: var(--pl-fb);
}

.category-filter a:hover .cat-count {
    background: var(--pl-orange-tint);
    color: var(--pl-orange);
    border-color: var(--pl-orange-l);
}

.category-filter a.active .cat-count {
    background: var(--pl-orange);
    color: #fff;
    border-color: var(--pl-orange);
}

/* selos sidebar - CSS removido (bloco "Por que comprar" foi deletado) */

/* ===== BUSCA MOBILE ===== */
.mob-search {
    display: none;
    margin-bottom: 18px;
}

.mob-search-form {
    display: flex;
    align-items: center;
    background: var(--pl-white);
    border: 1.5px solid var(--pl-border);
    border-radius: var(--pl-r3);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}

.mob-search-form:focus-within {
    border-color: var(--pl-orange);
    box-shadow: 0 0 0 3px rgba(27, 63, 139, .10);
}

.mob-search-icon {
    padding: 0 4px 0 14px;
    display: flex;
    align-items: center;
}

.mob-search-icon svg {
    width: 16px;
    height: 16px;
    fill: var(--pl-ink-40);
}

.mob-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 13px 10px;
    font-size: 14px;
    color: var(--pl-ink);
    background: transparent;
    font-family: var(--pl-fb);
}

.mob-search-input::placeholder {
    color: var(--pl-ink-40);
}

.mob-search-btn {
    background: var(--pl-orange);
    color: #fff;
    border: none;
    padding: 0 18px;
    height: 46px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    transition: background .15s;
    font-family: var(--pl-fb);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mob-search-btn:hover {
    background: var(--pl-orange-d);
}

.mob-search-clear {
    background: none;
    border: none;
    padding: 0 10px;
    cursor: pointer;
    display: none;
    flex-shrink: 0;
    align-items: center;
}

.mob-search-clear svg {
    width: 12px;
    height: 12px;
    fill: var(--pl-ink-40);
}

.mob-search-clear.show {
    display: flex;
}

/* tag busca ativa */
.mob-search-tag {
    display: none;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--pl-ink-60);
    font-family: var(--pl-fb);
}

.mob-search-tag span {
    background: var(--pl-orange-tint);
    color: var(--pl-orange);
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--pl-rf);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mob-search-tag a {
    color: var(--pl-orange);
    text-decoration: none;
    line-height: 1;
    display: flex;
    align-items: center;
}

.mob-search-tag a svg {
    width: 10px;
    height: 10px;
    fill: currentColor;
}

/* ===== CATALOG HEADER ===== */
.catalog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--pl-border);
    flex-wrap: wrap;
}

.catalog-header h2 {
    font-family: var(--pl-fp);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 600;
    color: var(--pl-ink);
    margin: 0 0 4px;
    letter-spacing: -.3px;
}

.catalog-header-meta {
    font-size: 12.5px;
    color: var(--pl-ink-60);
    font-family: var(--pl-fb);
    font-weight: 500;
}

.catalog-header-meta b {
    color: var(--pl-orange);
    font-weight: 800;
}

/* select sort */
.catalog-sort {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.catalog-sort select {
    padding: 10px 36px 10px 14px;
    border: 1.5px solid var(--pl-border);
    border-radius: var(--pl-r3);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pl-ink);
    font-family: var(--pl-fb);
    background: var(--pl-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231B3F8B' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 14px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    min-width: 180px;
    transition: border-color .2s, box-shadow .2s;
}

.catalog-sort select:hover {
    border-color: var(--pl-orange-l);
}

.catalog-sort select:focus {
    outline: none;
    border-color: var(--pl-orange);
    box-shadow: 0 0 0 3px rgba(27, 63, 139, .10);
}

/* ===== EMPTY STATE ===== */
.empty-state {
    text-align: center;
    padding: 72px 28px;
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-r5);
}

.empty-state .icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--pl-cream-2);
    border: 1px solid var(--pl-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
}

.empty-state .icon svg {
    width: 32px;
    height: 32px;
    fill: var(--pl-ink-40);
}

.empty-state h3 {
    font-family: var(--pl-fp);
    font-size: 22px;
    font-weight: 600;
    color: var(--pl-ink);
    margin: 0 0 10px;
    letter-spacing: -.3px;
}

.empty-state p {
    font-size: 13.5px;
    color: var(--pl-ink-60);
    line-height: 1.65;
    margin: 0 auto 26px;
    font-family: var(--pl-fb);
    max-width: 360px;
    font-weight: 500;
}

.empty-state .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--pl-orange);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 14px 28px;
    border-radius: var(--pl-r3);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, background .2s;
    font-family: var(--pl-fb);
    box-shadow: 0 6px 18px rgba(27, 63, 139, .25);
}

.empty-state .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(27, 63, 139, .35);
    background: var(--pl-orange-d);
}

/* ===== PAGINATION ===== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 48px;
    flex-wrap: wrap;
}

.pagination a, .pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    border: 1.5px solid var(--pl-border);
    border-radius: var(--pl-r3);
    font-size: 13px;
    font-weight: 700;
    color: var(--pl-ink);
    background: var(--pl-white);
    text-decoration: none;
    padding: 0 8px;
    transition: all .2s;
    font-family: var(--pl-fb);
}

.pagination a:hover {
    background: var(--pl-orange-tint-2);
    border-color: var(--pl-orange);
    color: var(--pl-orange);
    transform: translateY(-1px);
}

.pagination span.active {
    background: var(--pl-orange);
    border-color: var(--pl-orange);
    color: #fff;
    font-weight: 800;
    cursor: default;
    box-shadow: 0 4px 12px rgba(27, 63, 139, .25);
}

.pagination a svg, .pagination span svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

/* ===== OVERRIDES: FORCA AZUL NOS CARDS DE PRODUTO ===== */
/* Botao adicionar ao carrinho dentro da grid de produtos */
.products-grid .btn-cart,
.products-grid .btn-add-cart,
.products-grid button[class*="cart"],
.products-grid a[class*="cart"],
.products-grid .product-card button,
.products-grid .product-card .add-to-cart,
.products-grid .product-card .btn-buy,
.products-grid .product-card .btn-primary {
    background: var(--pl-orange) !important;
    color: #fff !important;
    border-color: var(--pl-orange) !important;
}

.products-grid .btn-cart:hover,
.products-grid .btn-add-cart:hover,
.products-grid button[class*="cart"]:hover,
.products-grid a[class*="cart"]:hover,
.products-grid .product-card button:hover,
.products-grid .product-card .add-to-cart:hover,
.products-grid .product-card .btn-buy:hover,
.products-grid .product-card .btn-primary:hover {
    background: var(--pl-orange-d) !important;
    border-color: var(--pl-orange-d) !important;
}

/* Preco em azul nos cards de produto */
.products-grid .product-price,
.products-grid .price,
.products-grid .product-card .price-main {
    color: var(--pl-orange) !important;
}

/* Categoria tag em cima do produto */
.products-grid .product-category,
.products-grid .product-card .category {
    color: var(--pl-ink-60) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1060px) {
    .catalog-layout {
        grid-template-columns: 220px 1fr;
        gap: 24px;
    }
}

@media (max-width: 900px) {
    .catalog-layout {
        grid-template-columns: 1fr;
    }

    .catalog-sidebar {
        position: static;
    }

    .mob-search {
        display: block;
    }

    .mob-search-tag {
        display: flex;
    }
}

@media (max-width: 640px) {
    .page-hero {
        padding: 32px 0 28px;
    }

    .page-title {
        font-size: 26px;
    }

    .catalog-page {
        padding: 24px 0 60px;
    }

    .catalog-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .catalog-sort select {
        min-width: 100%;
        width: 100%;
    }

    .page-meta {
        gap: 12px;
    }

    .page-trust-pill {
        font-size: 11px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   PRODUTO.PHP — VISUAL 100% IDÊNTICO AO CASASBAHIA REAL
═══════════════════════════════════════════════════════════════ */
:root {
    --mg-blue: #0071E4;
    --mg-blue-dk: #005FC4;
    --mg-green: #28A745;
    --mg-green-dk: #1E8A38;
    --mg-red: #E60014;
    --mg-yellow: #FFB300;
    --mg-ink: #1A1A1A;
    --mg-gray: #666;
    --mg-gray-lt: #888;
    --mg-line: #E6E6E6;
    --mg-bg: #F7F7F7;
    --mg-white: #fff;
    --mg-radius: 8px;
}

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

html, body {
    margin: 0;
    padding: 0;
}

.pd-page {
    background: var(--mg-bg);
    min-height: 100vh;
    overflow-x: clip;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    padding: 20px 0 50px;
}

.pd-container {
    max-width: 1392px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

.pd-breadcrumb {
    padding: 0 0 20px;
    font-size: 13px;
    color: var(--mg-gray-lt);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pd-breadcrumb a {
    color: var(--mg-gray-lt);
    text-decoration: none;
    transition: color 0.2s ease;
}

.pd-breadcrumb a:hover {
    color: var(--mg-blue);
}

.pd-breadcrumb .sep {
    color: var(--mg-line);
}

.pd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 380px;
    gap: 28px;
    align-items: start;
    margin-bottom: 50px;
}

.pd-grid > * {
    min-width: 0;
}

/* GALERIA */
.pd-gallery {
    background: var(--mg-white);
    border-radius: var(--mg-radius);
    border: 1px solid var(--mg-line);
    padding: 16px;
    position: sticky;
    top: 20px;
}

.pd-gallery-main {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f9f9f9;
    border-radius: var(--mg-radius);
    overflow: hidden;
    cursor: zoom-in;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    transition: transform 0.35s ease, opacity 0.2s ease;
}

.pd-gallery-main:hover img {
    transform: scale(1.05);
}

.pd-img-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--mg-red);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    z-index: 2;
}

.pd-img-expand {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    backdrop-filter: blur(4px);
    transition: background 0.2s ease;
}

.pd-img-expand:hover {
    background: rgba(0, 0, 0, 0.65);
}

.pd-img-expand svg {
    width: 18px;
    height: 18px;
    fill: #fff;
}

.pd-img-counter {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 2;
}

.pd-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.pd-thumbs::-webkit-scrollbar {
    height: 6px;
}

.pd-thumbs::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.pd-thumb {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: var(--mg-radius);
    overflow: hidden;
    border: 2px solid var(--mg-line);
    cursor: pointer;
    background: #fff;
    transition: border-color 0.2s ease;
}

.pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}

.pd-thumb.active {
    border-color: var(--mg-blue);
}

/* INFO COLUNA 2 */
.pd-info {
    background: var(--mg-white);
    border-radius: var(--mg-radius);
    border: 1px solid var(--mg-line);
    padding: 24px;
}

.pd-info-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.pd-full-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mg-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
}

.pd-full-badge svg {
    width: 16px;
    height: 16px;
    fill: #fff;
}

.pd-info-icons {
    display: flex;
    gap: 6px;
}

.pd-round-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #F0F4F8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pd-round-btn:hover {
    background: #E2E9F0;
}

.pd-round-btn svg {
    width: 20px;
    height: 20px;
    fill: var(--mg-blue);
}

.pd-rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.pd-rating-star svg {
    width: 16px;
    height: 16px;
    fill: var(--mg-yellow);
}

.pd-rating-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--mg-ink);
}

.pd-rating-count {
    font-size: 14px;
    color: var(--mg-gray);
}

.pd-title {
    font-size: 22px;
    font-weight: 500;
    color: var(--mg-ink);
    line-height: 1.3;
    margin: 0 0 24px;
}

.pd-variation {
    margin-bottom: 20px;
}

.pd-variation-label {
    font-size: 13px;
    color: var(--mg-gray);
    margin-bottom: 10px;
}

.pd-variation-label strong {
    color: var(--mg-ink);
    font-weight: 600;
}

.pd-variation-opts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pd-variation-opt {
    padding: 8px 16px;
    border: 1.5px solid var(--mg-line);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mg-ink);
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pd-variation-opt.active {
    border-color: var(--mg-blue);
    background: var(--mg-blue);
    color: #fff;
}

.pd-seller {
    font-size: 13px;
    color: var(--mg-gray);
    padding-top: 20px;
    border-top: 1px solid var(--mg-line);
}

.pd-seller strong {
    color: var(--mg-ink);
    font-weight: 600;
}

/* COLUNA 3: BUYBOX - LAYOUT CASASBAHIA */
.pd-buybox {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 20px;
}

.pd-price-card {
    background: var(--mg-white);
    border-radius: var(--mg-radius);
    border: 1px solid var(--mg-line);
    padding: 20px;
}

.pd-price-original {
    font-size: 13px;
    color: var(--mg-gray-lt);
    text-decoration: line-through;
    margin-bottom: 4px;
}

.pd-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.pd-price-current {
    font-size: 36px;
    font-weight: 800;
    color: var(--mg-ink);
    line-height: 1;
}

.pd-price-pix {
    font-size: 13px;
    color: var(--mg-gray);
    font-weight: 500;
}

.pd-price-off {
    background: #E6F4EA;
    color: var(--mg-green-dk);
    font-size: 12px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}

.pd-price-installment {
    font-size: 13px;
    color: var(--mg-gray);
    line-height: 1.5;
    margin-top: 8px;
}

.pd-pay-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mg-blue);
    margin-top: 12px;
    text-decoration: none;
    cursor: pointer;
}

.pd-pay-link:hover {
    color: var(--mg-blue-dk);
}

.pd-pay-link svg {
    width: 16px;
    height: 16px;
    fill: var(--mg-blue);
}

/* LOCALIZAÇÃO */
.pd-location-card {
    background: var(--mg-white);
    border-radius: var(--mg-radius);
    border: 1px solid var(--mg-line);
    padding: 16px;
}

.pd-location-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.pd-location-row svg {
    width: 20px;
    height: 20px;
    fill: var(--mg-blue);
}

.pd-location-txt {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--mg-ink);
}

.pd-location-alter {
    font-size: 13px;
    color: var(--mg-blue);
    text-decoration: underline;
    cursor: pointer;
}

.pd-location-sub {
    font-size: 12px;
    color: var(--mg-gray);
    margin-top: 8px;
    line-height: 1.4;
}

/* DELIVERY BOX */
.pd-delivery-box {
    background: var(--mg-white);
    border-radius: var(--mg-radius);
    border: 2px solid var(--mg-blue);
    padding: 14px;
}

.pd-delivery-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--mg-ink);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.pd-delivery-title svg {
    width: 18px;
    height: 18px;
    fill: var(--mg-blue);
}

.pd-delivery-sub {
    font-size: 12px;
    color: var(--mg-gray);
}

/* DELIVERY INFO (2 linhas) */
.pd-delivery-info {
    background: var(--mg-white);
    border-radius: var(--mg-radius);
    border: 1px solid var(--mg-line);
    padding: 12px;
}

.pd-info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.pd-info-row:last-child {
    margin-bottom: 0;
}

.pd-info-row svg {
    width: 18px;
    height: 18px;
    fill: var(--mg-blue);
    margin-top: 2px;
    flex-shrink: 0;
}

.pd-info-txt {
    font-size: 12px;
    color: var(--mg-ink);
    line-height: 1.4;
}

.pd-info-txt strong {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}

.pd-info-free {
    color: var(--mg-green);
    font-weight: 600;
}

/* QTY + ACTIONS */
.pd-qty-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.pd-qty-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--mg-ink);
}

.pd-qty-box {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--mg-line);
    border-radius: var(--mg-radius);
}

.pd-qty-btn {
    width: 40px;
    height: 44px;
    background: #fff;
    border: none;
    font-size: 20px;
    color: var(--mg-blue);
    cursor: pointer;
}

.pd-qty-btn:hover {
    background: #F5F5F5;
}

.pd-qty-input {
    width: 50px;
    height: 44px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-left: 1px solid var(--mg-line);
    border-right: 1px solid var(--mg-line);
    outline: none;
    -moz-appearance: textfield;
}

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

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

.pd-btn-cart {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: var(--mg-green);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s ease;
}

.pd-btn-cart:hover:not(:disabled) {
    background: var(--mg-green-dk);
}

.pd-btn-cart:disabled {
    opacity: 0.7;
}

.pd-btn-cart svg {
    width: 18px;
    height: 18px;
    fill: #fff;
}

.pd-btn-buy {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--mg-green-dk);
    background: #fff;
    border: 1.5px solid var(--mg-green);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pd-btn-buy:hover:not(:disabled) {
    background: #F2FBF4;
}

.pd-btn-buy:disabled {
    opacity: 0.7;
}

.pd-btn-store {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: var(--mg-blue);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s ease;
}

.pd-btn-store:hover:not(:disabled) {
    background: var(--mg-blue-dk);
}

.pd-btn-store svg {
    width: 18px;
    height: 18px;
    fill: #fff;
}

.pd-btn-whatsapp {
    width: 100%;
    padding: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #1E8A38;
    background: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pd-btn-whatsapp:hover {
    background: #F5F5F5;
}

.pd-btn-whatsapp svg {
    width: 18px;
    height: 18px;
    fill: #25D366;
}

/* SELOS */
.pd-perks {
    background: var(--mg-white);
    border-radius: var(--mg-radius);
    border: 1px solid var(--mg-line);
    padding: 4px 0;
}

.pd-perk {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mg-line);
}

.pd-perk:last-child {
    border-bottom: none;
}

.pd-perk-icon {
    width: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-perk-icon svg {
    width: 28px;
    height: 28px;
    fill: var(--mg-blue);
}

.pd-perk-text {
    flex: 1;
    font-size: 13px;
    color: var(--mg-gray);
    line-height: 1.5;
}

.pd-perk-text strong {
    color: var(--mg-ink);
    font-weight: 600;
}

.pd-perk-chev {
    width: 20px;
    height: 20px;
    fill: var(--mg-gray-lt);
    flex-shrink: 0;
}

/* DESCRIÇÃO */
.pd-details {
    background: var(--mg-white);
    border-radius: var(--mg-radius);
    border: 1px solid var(--mg-line);
    padding: 32px;
    margin-bottom: 40px;
}

.pd-details-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--mg-ink);
    margin: 0 0 20px;
}

.pd-details-content {
    font-size: 15px;
    color: #333;
    line-height: 1.7;
}

/* LIGHTBOX */
.pd-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.94);
    z-index: 100000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pd-lightbox.open {
    display: flex;
}

.pd-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-lightbox-img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--mg-radius);
    user-select: none;
}

.pd-lb-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    z-index: 3;
}

.pd-lb-close:hover {
    background: rgba(255, 255, 255, 0.24);
}

.pd-lb-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    z-index: 3;
}

.pd-lb-nav:hover {
    background: rgba(255, 255, 255, 0.24);
}

.pd-lb-prev {
    left: 20px;
}

.pd-lb-next {
    right: 20px;
}

.pd-lb-counter {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    z-index: 3;
}

.pd-lb-thumbs {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 3;
}

.pd-lb-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.5;
}

.pd-lb-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-lb-thumb.active {
    opacity: 1;
    border-color: #fff;
}

/* NOTIFICAÇÃO */
.pd-notify-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    z-index: 200000;
    align-items: flex-end;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.pd-notify-overlay.open {
    display: flex;
}

.pd-notify-box {
    background: #fff;
    width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 24px 20px 32px;
}

.pd-notify-bar {
    width: 36px;
    height: 4px;
    background: var(--mg-line);
    border-radius: 9999px;
    margin: 0 auto 18px;
}

.pd-notify-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.pd-notify-row img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: var(--mg-radius);
    background: var(--mg-bg);
    border: 1px solid var(--mg-line);
    padding: 4px;
    flex-shrink: 0;
}

.pd-notify-text p {
    font-size: 14px;
    color: #333;
    margin: 0 0 6px;
    font-weight: 600;
}

.pd-notify-qty-tag {
    display: inline-block;
    font-size: 12px;
    color: var(--mg-blue);
    font-weight: 600;
    background: #E3F2FD;
    padding: 3px 12px;
    border-radius: 6px;
}

.pd-notify-btns {
    display: flex;
    gap: 12px;
}

.pd-notify-btn {
    flex: 1;
    padding: 14px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: none;
}

.pd-notify-btn-cart {
    background: #fff;
    color: var(--mg-ink);
    border: 1px solid var(--mg-line);
}

.pd-notify-btn-cart:hover {
    background: #F5F5F5;
}

.pd-notify-btn-add {
    background: var(--mg-green);
    color: #fff;
}

.pd-notify-btn-add:hover {
    background: var(--mg-green-dk);
}

.pd-related {
    padding: 40px 0 30px;
}

.pd-related-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--mg-ink);
    margin: 0 0 24px;
}

/* RESPONSIVIDADE */
@media (max-width: 1200px) {
    .pd-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .pd-buybox {
        grid-column: 1 / -1;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 14px;
    }

    .pd-price-card, .pd-location-card, .pd-delivery-box, .pd-delivery-info, .pd-perks {
        flex: 1;
        min-width: 280px;
    }
}

@media (max-width: 768px) {
    .pd-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pd-buybox {
        flex-direction: column;
    }

    .pd-container {
        padding: 0 16px;
    }

    .pd-page {
        padding: 16px 0 40px;
    }

    .pd-title {
        font-size: 20px;
    }

    .pd-price-current {
        font-size: 28px;
    }

    .pd-breadcrumb {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .pd-container {
        padding: 0 12px;
    }

    .pd-title {
        font-size: 18px;
    }

    .pd-price-current {
        font-size: 24px;
    }

    .pd-btn-cart, .pd-btn-buy, .pd-btn-store, .pd-btn-whatsapp {
        padding: 14px;
        font-size: 14px;
    }
}


.pd-reviews-section {
    background: var(--mg-bg);
    padding: clamp(40px, 6vw, 80px) 0;
    margin-top: clamp(40px, 8vw, 80px);
}

.pd-reviews-container {
    max-width: clamp(380px, 95vw, 1800px);
    margin: 0 auto;
    padding: 0 clamp(12px, 4vw, 48px);
}

.pd-reviews-header {
    display: flex;
    align-items: center;
    gap: clamp(20px, 4vw, 40px);
    margin-bottom: clamp(40px, 6vw, 60px);
    flex-wrap: wrap;
}

.pd-reviews-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 2vw, 16px);
}

.pd-reviews-big-score {
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 800;
    color: var(--mg-ink);
    line-height: 1;
}

.pd-reviews-stars {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1vw, 10px);
}

.pd-reviews-stars svg {
    width: clamp(20px, 3vw, 32px);
    height: clamp(20px, 3vw, 32px);
    fill: var(--mg-yellow);
}

.pd-reviews-meta {
    font-size: clamp(13px, 1.8vw, 18px);
    color: var(--mg-gray);
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 1vw, 8px);
    word-break: break-word;
}

.pd-reviews-meta strong {
    color: var(--mg-ink);
    font-weight: 600;
}

.pd-reviews-title {
    font-size: clamp(24px, 3.5vw, 44px);
    font-weight: 600;
    color: var(--mg-ink);
    margin-bottom: clamp(30px, 5vw, 50px);
}

.pd-reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(20px, 3vw, 32px);
}

.pd-review-card {
    background: var(--mg-white);
    border-radius: var(--mg-radius);
    border: 1px solid var(--mg-line);
    padding: clamp(20px, 3vw, 32px);
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2vw, 18px);
}

.pd-review-header {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 16px);
    flex-wrap: wrap;
}

.pd-review-avatar {
    width: clamp(40px, 6vw, 56px);
    height: clamp(40px, 6vw, 56px);
    background: var(--mg-blue);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: clamp(16px, 2.5vw, 24px);
    flex-shrink: 0;
}

.pd-review-info {
    flex: 1;
    min-width: 0;
}

.pd-review-name {
    font-size: clamp(13px, 1.8vw, 17px);
    font-weight: 600;
    color: var(--mg-ink);
    word-break: break-word;
}

.pd-review-date {
    font-size: clamp(11px, 1.5vw, 14px);
    color: var(--mg-gray);
    margin-top: clamp(2px, 0.5vw, 4px);
}

.pd-review-rating {
    display: flex;
    gap: clamp(2px, 0.5vw, 4px);
}

.pd-review-rating svg {
    width: clamp(16px, 2.5vw, 22px);
    height: clamp(16px, 2.5vw, 22px);
    fill: var(--mg-yellow);
}

.pd-review-text {
    font-size: clamp(13px, 1.8vw, 16px);
    color: #333;
    line-height: 1.7;
    word-break: break-word;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
    max-width: 100%;
}

.pd-review-reply {
    background: var(--mg-bg);
    border-left: 3px solid var(--mg-blue);
    padding: clamp(12px, 2vw, 18px);
    border-radius: 4px;
    margin-top: clamp(12px, 2vw, 16px);
}

.pd-review-reply-label {
    font-size: clamp(10px, 1.4vw, 13px);
    font-weight: 700;
    color: var(--mg-blue);
    text-transform: uppercase;
    margin-bottom: clamp(4px, 1vw, 8px);
    letter-spacing: 0.5px;
}

.pd-review-reply-text {
    font-size: clamp(12px, 1.7vw, 15px);
    color: #333;
    line-height: 1.6;
    word-break: break-word;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
}

.pd-reviews-all-link {
    text-align: center;
    margin-top: clamp(40px, 6vw, 60px);
}

.pd-reviews-all-btn {
    display: inline-block;
    padding: clamp(14px, 2.5vw, 20px) clamp(32px, 5vw, 48px);
    background: var(--mg-blue);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: clamp(14px, 2vw, 18px);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.5vw, 12px);
}

.pd-reviews-all-btn:hover {
    background: var(--mg-blue-dk);
}

/* Responsividade */
@media (max-width: 768px) {
    .pd-reviews-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .pd-reviews-grid {
        grid-template-columns: 1fr;
    }
}

/* Casas Bahia product detail — reference composition */
.cb-legacy-related-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0)
}

.cb-product-page, .cb-product-shelf, .cb-reviews {
    font-family: 'Nunito', sans-serif;
    color: #5f5f5f;
    background: #fff
}

.cb-product-container {
    width: 100%;
    max-width: 1368px;
    margin: 0 auto;
    padding: 0 8px
}

.cb-product-page {
    padding: 15px 0 50px
}

.cb-product-breadcrumb {
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 12px;
    margin-bottom: 14px
}

.cb-product-breadcrumb a {
    color: #5f5f5f;
    text-decoration: none
}

.cb-product-breadcrumb span:last-child, .cb-product-breadcrumb a:last-of-type {
    color: #0033c6;
    font-weight: 700
}

.cb-product-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 4px
}

.cb-product-tags span {
    background: #0066b8;
    color: #fff;
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 10px;
    font-weight: 800
}

.cb-product-page h1 {
    font-size: 25px;
    line-height: 1.25;
    font-weight: 500;
    margin: 0 0 5px;
    color: #5c5c5c
}

.cb-product-meta {
    font-size: 12px;
    padding-bottom: 17px;
    border-bottom: 1px solid #ddd
}

.cb-product-meta i {
    display: inline-block;
    height: 18px;
    border-left: 1px solid #ccc;
    margin: 0 10px -5px
}

.cb-product-meta a, .cb-seller a {
    color: #0033c6;
    font-weight: 700;
    text-decoration: underline
}

.cb-product-main {
    display: grid;
    grid-template-columns:610px 1fr;
    gap: 24px;
    padding: 16px 8px 0
}

.cb-product-gallery {
    padding-right: 24px;
    border-right: 1px solid #ddd
}

.cb-product-photo {
    height: 435px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in
}

.cb-product-photo > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.cb-product-thumbs {
    height: 98px;
    border-top: 1px solid #ddd;
    padding-top: 16px;
    display: flex;
    gap: 15px;
    overflow: hidden
}

.cb-product-thumbs .pd-thumb {
    width: 79px;
    height: 81px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    padding: 5px;
    flex: 0 0 auto
}

.cb-product-thumbs .pd-thumb.active {
    border: 2px solid #0033c6
}

.cb-product-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.cb-thumb-more {
    width: 79px;
    height: 81px;
    background: #eef2fc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0033c6;
    font-size: 25px;
    font-weight: 700;
    border-radius: 5px
}

.cb-product-commerce {
    padding: 3px 0
}

.cb-seller {
    font-size: 14px;
    display: flex;
    gap: 7px;
    align-items: center
}

.cb-seller svg {
    width: 24px;
    height: 24px;
    fill: #666
}

.cb-rating {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 17px 10px 10px;
    border-bottom: 1px dashed #ddd
}

.cb-rating span {
    color: #cb6500;
    font-size: 18px;
    letter-spacing: 1px
}

.cb-rating b {
    font-size: 13px
}

.cb-rating a {
    color: #0033c6;
    background: #fafafa;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 700
}

.cb-old-price {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    font-size: 14px
}

.cb-old-price b {
    color: #fff;
    background: #167300;
    border-radius: 4px;
    padding: 3px 8px
}

.cb-installment {
    font-size: 14px;
    margin-top: 5px
}

.cb-buy-row {
    display: grid;
    grid-template-columns:1fr 290px;
    gap: 20px;
    padding: 12px 0 50px
}

.cb-pix-price {
    font-size: 32px;
    color: #0033c6;
    font-weight: 800
}

.cb-pix-copy {
    font-size: 16px;
    font-weight: 700
}

.cb-pix-copy b {
    color: #167300
}

.cb-payment-link {
    display: block;
    margin-top: 22px;
    color: #0033c6;
    font-size: 16px;
    font-weight: 800;
    text-decoration: underline
}

.cb-actions {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.cb-actions button {
    height: 48px;
    border: 0;
    border-radius: 4px;
    background: #18770e;
    color: #fff;
    font: 800 16px 'Nunito';
    cursor: pointer
}

.cb-actions button.store {
    background: #063bca
}

.cb-shipping {
    background: #f4f7fe;
    border-radius: 4px
}

.cb-zip {
    height: 85px;
    background: #e9f0fd;
    display: grid;
    grid-template-columns:1fr 142px 124px;
    align-items: center;
    gap: 8px;
    padding: 16px
}

.cb-zip strong {
    color: #0033c6
}

.cb-zip input {
    height: 50px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0 16px;
    font: 14px Nunito
}

.cb-zip input[aria-invalid=true] {
    border-color: #b42318;
    outline: 2px solid rgba(180, 35, 24, .1)
}

.cb-zip button {
    height: 48px;
    border: 0;
    border-radius: 4px;
    background: #063bca;
    color: #fff;
    font: 800 16px Nunito;
    cursor: pointer
}

.cb-zip button:disabled {
    cursor: wait;
    opacity: .72
}

.cb-shipping-status {
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 700
}

.cb-shipping-status.is-error {
    background: #fff1f0;
    color: #b42318
}

.cb-shipping-status.is-success {
    background: #eaf7e8;
    color: #167300
}

.cb-address {
    padding: 13px 16px;
    background: #e3ecfc;
    color: #0033c6;
    font-size: 12px;
    font-weight: 700
}

.cb-shipping-option {
    display: grid;
    grid-template-columns:1fr 1.2fr auto;
    gap: 5px 30px;
    padding: 14px 16px;
    border-bottom: 1px solid #9ab6fa;
    font-size: 14px
}

.cb-shipping-option b {
    grid-column: 1/-1;
    color: #0033c6
}

.cb-shipping-option em {
    color: #168000;
    font-style: normal
}

.cb-shipping-rules {
    display: block;
    text-align: center;
    padding: 25px;
    color: #0033c6;
    font-weight: 700;
    text-decoration: underline
}

.pd-details {
    max-width: 1368px;
    margin: 40px auto 0;
    border: 0;
    border-top: 1px solid #ddd;
    border-radius: 0
}

.cb-product-shelf {
    padding: 55px 0 20px;
    overflow: hidden
}

.cb-product-shelf h2, .cb-reviews h2 {
    font-size: 20px;
    color: #0033c6;
    margin: 0 0 4px
}

.cb-product-shelf small {
    display: block;
    margin-bottom: 25px
}

.cb-suggested {
    padding-top: 35px
}

.cb-suggested h2 {
    margin-bottom: 25px
}

.cb-shelf-track {
    display: flex;
    gap: 20px;
    overflow: hidden;
    padding: 0 2px 8px
}

.cb-shelf-track .product-card {
    flex: 0 0 220px;
    width: 220px;
    min-height: 375px;
    border: 1px solid #ddd;
    border-radius: 7px;
    box-shadow: 0 3px 6px #ddd;
    background: #fff;
    padding: 12px 20px
}

.cb-shelf-track .pc-img-wrap {
    height: 160px
}

.cb-shelf-track .pc-badge-full, .cb-shelf-track .pc-links, .cb-shelf-track .pc-rating-num {
    display: none
}

.cb-shelf-track .pc-body {
    padding: 0
}

.cb-shelf-track .pc-name {
    height: 38px;
    font-size: 13px;
    line-height: 17px;
    margin: 7px 0;
    overflow: hidden
}

.cb-shelf-track .pc-rating {
    margin: 0;
    color: #cc6500
}

.cb-shelf-track .pc-stars svg {
    width: 14px;
    height: 14px;
    fill: #cc6500
}

.cb-shelf-track .pc-rating-count {
    font-size: 12px;
    color: #222
}

.cb-shelf-track .pc-discount {
    float: right;
    margin-top: 6px;
    background: #176f0b;
    color: #fff;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px
}

.cb-shelf-track .pc-price {
    display: flex;
    flex-direction: column
}

.cb-shelf-track .pc-price-now {
    font-size: 17px;
    color: #0033c6;
    font-weight: 800;
    order: 2;
    margin-top: 9px
}

.cb-shelf-track .pc-price-small {
    font-size: 12px;
    color: #222;
    font-weight: 600
}

.cb-shelf-track .pc-price-now .pc-price-small {
    display: none
}

.cb-reviews {
    padding: 45px 0 70px
}

.cb-reviews-layout {
    display: grid;
    grid-template-columns:370px 1fr;
    gap: 30px;
    max-width: 920px
}

.cb-review-summary h2, .cb-review-list h2 {
    margin-bottom: 20px
}

.cb-score {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px
}

.cb-score > b {
    font-size: 34px
}

.cb-score > span {
    color: #c86400;
    font-size: 35px;
    line-height: .7
}

.cb-score small {
    display: block;
    color: #555;
    font-size: 12px;
    letter-spacing: 0;
    margin-top: 10px
}

.cb-score-row {
    display: grid;
    grid-template-columns:72px 240px 35px;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin: 11px 0
}

.cb-score-row i {
    height: 8px;
    background: #e5e5e5;
    border-radius: 8px;
    overflow: hidden
}

.cb-score-row i b {
    display: block;
    height: 100%;
    background: #063bca;
    border-radius: 8px
}

.cb-score-row em {
    font-style: normal
}

.cb-review-summary h2:nth-of-type(2) {
    margin-top: 28px
}

.cb-recommend {
    background: #fafafa;
    padding: 18px 16px
}

.cb-recommend b {
    display: block;
    color: #0033c6;
    font-size: 25px
}

.cb-review-list {
    padding-left: 0
}

.cb-review {
    padding: 16px 0;
    border-bottom: 1px solid #ddd
}

.cb-review > strong {
    font-size: 15px
}

.cb-review > div {
    display: flex;
    gap: 16px;
    margin: 8px 0
}

.cb-review > div span {
    color: #cb6500
}

.cb-review > div small {
    font-size: 13px
}

.cb-review p {
    margin: 0;
    font-size: 16px;
    line-height: 1.45
}

.cb-review blockquote {
    margin: 12px 0 0;
    padding: 10px 14px;
    background: #f5f5f5;
    border-left: 3px solid #0033c6;
    font-size: 13px
}

.cb-review blockquote b {
    display: block;
    color: #0033c6;
    text-transform: uppercase;
    font-size: 11px;
    margin-bottom: 5px
}

@media (max-width: 768px) {
    .cb-product-container {
        max-width: 412px;
        padding: 0 10px
    }

    .cb-product-page {
        padding-top: 15px
    }

    .cb-product-breadcrumb {
        white-space: nowrap;
        overflow: hidden
    }

    .cb-product-page h1 {
        font-size: 20px;
        margin-top: 16px
    }

    .cb-product-meta {
        font-size: 12px
    }

    .cb-product-main {
        display: block;
        padding: 12px 0 0
    }

    .cb-product-gallery {
        border-right: 0;
        padding-right: 0
    }

    .cb-product-photo {
        height: 380px
    }

    .cb-product-thumbs {
        height: 84px;
        gap: 8px;
        padding-top: 12px
    }

    .cb-product-thumbs .pd-thumb {
        width: 68px;
        height: 69px
    }

    .cb-thumb-more {
        width: 68px;
        height: 69px
    }

    .cb-product-commerce {
        margin-top: 28px;
        border-top: 1px solid #ddd;
        padding-top: 18px
    }

    .cb-buy-row {
        grid-template-columns:1fr;
        padding-bottom: 25px
    }

    .cb-zip {
        height: auto;
        grid-template-columns:1fr 110px
    }

    .cb-zip strong {
        grid-column: 1/-1
    }

    .cb-zip input {
        width: 100%
    }

    .cb-shipping-option {
        grid-template-columns:1fr auto
    }

    .cb-shipping-option strong {
        display: none
    }

    .cb-product-shelf {
        padding-top: 35px
    }

    .cb-shelf-track {
        overflow-x: auto
    }

    .cb-shelf-track .product-card {
        flex-basis: 210px
    }

    .cb-reviews-layout {
        grid-template-columns:1fr
    }

    .cb-score-row {
        grid-template-columns:72px 1fr 35px
    }

    .cb-review-list {
        margin-top: 20px
    }
}

/* Product shelves and review alignment from Casas Bahia reference */
.pc-shelf-payment {
    display: none
}

.cb-product-shelf > .cb-product-container {
    max-width: 1120px;
    padding: 0
}

.cb-product-shelf {
    padding-top: 28px
}

.cb-product-shelf h2 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 3px
}

.cb-product-shelf small {
    font-size: 13px;
    margin-bottom: 25px
}

.cb-suggested {
    padding-top: 34px
}

.cb-suggested h2 {
    margin-bottom: 27px
}

.cb-shelf-track {
    gap: 20px;
    padding: 0 0 9px
}

.cb-shelf-track .product-card {
    flex: 0 0 220px;
    width: 220px;
    height: 375px;
    min-height: 375px;
    padding: 16px 20px 15px;
    border-color: #dedede;
    border-radius: 7px;
    box-shadow: 0 4px 7px rgba(0, 0, 0, .12)
}

.cb-shelf-track .pc-img-wrap {
    height: 150px;
    margin: 0 0 10px
}

.cb-shelf-track .pc-img {
    padding: 0;
    object-fit: contain
}

.cb-shelf-track .pc-name {
    height: 36px;
    margin: 0 0 7px;
    font-size: 13px;
    line-height: 17px;
    font-weight: 600
}

.cb-shelf-track .pc-rating {
    height: 19px;
    display: flex;
    align-items: center;
    margin: 0 0 4px
}

.cb-shelf-track .pc-stars {
    display: flex;
    gap: 0
}

.cb-shelf-track .pc-stars svg {
    width: 14px;
    height: 14px
}

.cb-shelf-track .pc-rating-count {
    margin-left: 7px;
    font-size: 12px
}

.cb-shelf-track .pc-list-price {
    display: inline-block;
    font-size: 12px;
    color: #666;
    margin-right: 6px;
    line-height: 19px
}

.cb-shelf-track .pc-discount {
    float: none !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    margin: 0 !important;
    background: #176d09;
    padding: 2px 8px;
    line-height: 17px;
    vertical-align: top
}

.cb-shelf-track .pc-price {
    display: none
}

.cb-shelf-track .pc-shelf-payment {
    clear: both;
    display: block;
    margin-top: 3px
}

.cb-shelf-track .pc-shelf-installment {
    color: #222;
    font-size: 13px;
    line-height: 17px;
    font-weight: 600
}

.cb-shelf-track .pc-shelf-pix {
    display: block;
    color: #0033c6;
    font-size: 17px;
    font-weight: 900;
    margin-top: 10px
}

.cb-reviews > .cb-product-container {
    max-width: 1128px;
    padding: 0
}

.cb-reviews {
    padding: 48px 0 70px
}

.cb-reviews-layout {
    grid-template-columns:370px 512px;
    gap: 30px;
    max-width: 1128px;
    margin: 0 auto
}

.cb-review-summary h2, .cb-review-list h2 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 24px
}

.cb-score {
    margin-bottom: 22px
}

.cb-score > b {
    font-size: 34px;
    font-weight: 500
}

.cb-score > span {
    font-size: 35px
}

.cb-score small {
    font-size: 12px;
    margin-top: 10px
}

.cb-score-row {
    grid-template-columns:72px 240px 35px;
    margin: 10px 0
}

.cb-review-summary h2:nth-of-type(2) {
    margin-top: 29px;
    margin-bottom: 14px
}

.cb-recommend {
    height: 86px;
    padding: 17px 16px
}

.cb-recommend b {
    font-size: 25px
}

.cb-review-summary-box {
    margin-top: 49px;
    background: #fbfbfb;
    border-radius: 10px;
    padding: 13px 10px 0
}

.cb-review-summary-box h2 {
    font-size: 17px;
    margin: 0 0 15px
}

.cb-summary-placeholder {
    height: 31px;
    background: #f2f2f2;
    border-radius: 3px
}

.cb-summary-tags {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px
}

.cb-summary-tags span {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #fff;
    color: #195c17;
    font-size: 14px
}

.cb-review-list h2 {
    margin-bottom: 47px
}

.cb-review {
    padding: 0 0 20px;
    margin-bottom: 19px
}

.cb-review > strong {
    font-size: 16px
}

.cb-review > div {
    margin: 8px 0 13px
}

.cb-review p {
    font-size: 16px;
    line-height: 1.38
}

.cb-review blockquote {
    margin-top: 13px
}

@media (max-width: 768px) {
    .cb-product-shelf > .cb-product-container, .cb-reviews > .cb-product-container {
        max-width: 412px;
        padding: 0 10px
    }

    .cb-product-shelf {
        padding-top: 30px
    }

    .cb-shelf-track {
        overflow-x: auto
    }

    .cb-shelf-track .product-card {
        flex-basis: 220px
    }

    .cb-reviews-layout {
        grid-template-columns:1fr;
        gap: 34px
    }

    .cb-review-list h2 {
        margin-bottom: 25px
    }

    .cb-review-summary-box {
        margin-top: 35px
    }
}

.pc-shelf-offer {
    display: contents
}

.cb-shelf-track .pc-shelf-offer {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 21px
}

.cb-shelf-track .pc-shelf-offer .pc-list-price {
    margin: 0
}

/* Prateleiras da página de produto — dimensões e hierarquia do protótipo Casas Bahia. */
.pc-shelf-image-discount, .pc-shelf-or, .pc-shelf-pix-label, .pc-shelf-pickup {
    display: none
}

.cb-product-shelf {
    position: relative;
    padding: 42px 0 24px
}

.cb-product-shelf > .cb-product-container {
    max-width: 1369px;
    padding: 0
}

.cb-product-shelf h2 {
    font-size: 20px;
    line-height: 25px;
    margin: 0 0 2px
}

.cb-product-shelf small {
    font-size: 13px;
    margin: 0 0 27px
}

.cb-suggested {
    padding-top: 42px
}

.cb-suggested h2 {
    margin-bottom: 27px
}

.cb-shelf-track {
    gap: 24px;
    padding: 0 0 10px;
    overflow: hidden
}

.cb-shelf-track .product-card {
    position: relative;
    flex: 0 0 252px;
    width: 252px;
    height: 518px;
    min-height: 518px;
    padding: 0;
    border: 1px solid #d2d2d2;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .12);
    overflow: hidden
}

.cb-shelf-track .pc-img-wrap {
    height: 224px;
    margin: 0;
    padding: 20px 24px 0;
    border: 0
}

.cb-shelf-track .pc-img {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: contain
}

.cb-shelf-track .pc-shelf-image-discount {
    position: absolute;
    display: flex;
    left: 24px;
    top: 24px;
    width: 48px;
    height: 49px;
    border-radius: 4px;
    background: #f1f1ee;
    color: #0033c6;
    z-index: 2;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: .8
}

.cb-shelf-track .pc-shelf-image-discount b {
    font-size: 25px;
    letter-spacing: -2px
}

.cb-shelf-track .pc-shelf-image-discount small {
    font-size: 14px;
    font-weight: 900;
    margin: 4px 0 0
}

.cb-shelf-track .pc-body {
    height: 294px;
    padding: 14px 24px 27px;
    display: flex;
    flex-direction: column
}

.cb-shelf-track .pc-name {
    height: 43px;
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: #4d4d4d
}

.cb-shelf-track .pc-rating {
    height: 22px;
    margin: 0 0 18px
}

.cb-shelf-track .pc-stars svg {
    width: 17px;
    height: 17px
}

.cb-shelf-track .pc-rating-count {
    font-size: 12px;
    margin-left: 9px
}

.cb-shelf-track .pc-shelf-offer {
    min-height: 22px;
    gap: 5px
}

.cb-shelf-track .pc-list-price {
    font-size: 12px;
    line-height: 18px;
    color: #666
}

.cb-shelf-track .pc-discount {
    font-size: 11px;
    line-height: 16px;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: none
}

.cb-shelf-track .pc-shelf-payment {
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.cb-shelf-track .pc-shelf-installment {
    font-size: 13px;
    line-height: 20px;
    color: #4d4d4d;
    font-weight: 700;
    min-height: 40px
}

.cb-shelf-track .pc-shelf-or {
    display: block;
    font-size: 12px;
    line-height: 16px;
    color: #4d4d4d
}

.cb-shelf-track .pc-shelf-pix {
    font-size: 22px;
    line-height: 27px;
    margin: 0;
    color: #0033c6;
    font-weight: 900
}

.cb-shelf-track .pc-shelf-pix-label {
    display: block;
    margin-top: 6px;
    color: #0033c6;
    font-size: 12px;
    font-weight: 700
}

.cb-shelf-track .pc-shelf-pickup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-width: 98px;
    height: 13px;
    margin-top: auto;
    padding: 0 10px;
    border-radius: 2px;
    background: #0033c6;
    color: #fff;
    font-size: 7px;
    line-height: 13px;
    font-weight: 900
}

.cb-product-shelf::after {
    content: '›';
    position: absolute;
    z-index: 4;
    right: max(calc((100vw - 1384px) / 2), 18px);
    top: 50%;
    width: 38px;
    height: 38px;
    border: 2px solid #0033c6;
    border-radius: 4px;
    background: #fff;
    color: #0033c6;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center
}

@media (max-width: 768px) {
    .cb-product-shelf > .cb-product-container {
        max-width: 412px;
        padding: 0 10px
    }

    .cb-shelf-track {
        gap: 14px;
        overflow-x: auto
    }

    .cb-shelf-track .product-card {
        flex-basis: 252px
    }

    .cb-product-shelf::after {
        display: none
    }
}

/* Acabamento visual do card conforme a referência da prateleira. */
.cb-shelf-track .product-card {
    border-color: #cfcfcf;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .12);
    background: #fff
}

.cb-shelf-track .pc-shelf-image-discount {
    width: 48px;
    height: 47px;
    background: #0033c6;
    color: #fff;
    border-radius: 4px;
    line-height: 1
}

.cb-shelf-track .pc-shelf-image-discount small {
    margin: 0 0 3px;
    color: #fff;
    font-size: 6px;
    line-height: 7px;
    font-weight: 800;
    letter-spacing: -.1px
}

.cb-shelf-track .pc-shelf-image-discount b {
    font-size: 17px;
    line-height: 18px;
    letter-spacing: 0;
    font-weight: 900
}

.cb-shelf-track .pc-name, .cb-shelf-track .pc-name a {
    color: #4c4c4c;
    font-weight: 800
}

.cb-shelf-track .pc-star-full {
    fill: #cc6500
}

.cb-shelf-track .pc-stars svg.pc-star-empty {
    fill: #d5d5d5
}

.cb-shelf-track .pc-rating-count {
    color: #383838;
    font-weight: 700
}

.cb-shelf-track .pc-list-price {
    color: #777
}

.cb-shelf-track .pc-discount {
    background: #247515;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0
}

.cb-shelf-track .pc-shelf-installment, .cb-shelf-track .pc-shelf-or {
    color: #4a4a4a;
    font-weight: 700
}

.cb-shelf-track .pc-shelf-pix, .cb-shelf-track .pc-shelf-pix-label {
    color: #0033c6
}

.cb-shelf-track .pc-shelf-pickup {
    background: #0033c6
}

.cb-shelf-track .pc-shelf-offer.is-empty {
    min-height: 0;
    height: 0
}

.cb-product-shelf::after {
    top: calc(50% + 22px)
}

/* A prateleira de referência não exibe selos promocionais. */
.cb-shelf-track .pc-shelf-image-discount, .cb-shelf-track .pc-shelf-offer {
    display: none !important
}

.cb-shelf-track .pc-name {
    margin-bottom: 23px
}

.cb-shelf-track .pc-rating {
    margin-bottom: 12px
}

.cb-shelf-track .pc-shelf-pix {
    margin-top: 6px
}

.cb-shelf-track .pc-shelf-pickup {
    position: absolute;
    left: 24px;
    bottom: 27px;
    margin: 0
}

.cb-product-shelf > .cb-product-container {
    width: calc(100% - 94px);
    max-width: 1356px
}

.cb-product-shelf small {
    margin-bottom: 29px
}

@media (max-width: 768px) {
    .cb-product-shelf > .cb-product-container {
        width: 100%
    }
}

/* Valores RGB medidos diretamente no protótipo. */
.cb-product-shelf, .cb-product-shelf .cb-product-container {
    background: #fff !important
}

.cb-shelf-track .product-card, .cb-shelf-track .pc-img-wrap, .cb-shelf-track .pc-body {
    background: #fafafa !important
}

.cb-shelf-track .product-card {
    border: 1px solid #ccc !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .12) !important
}

.cb-shelf-track .pc-name, .cb-shelf-track .pc-name a {
    color: #4c4c4c !important
}

.cb-shelf-track .pc-stars svg.pc-star-empty {
    fill: #d5d5d5 !important
}

.cb-shelf-track .pc-rating-count {
    color: #4a4a4a !important
}

.cb-shelf-track .pc-shelf-installment, .cb-shelf-track .pc-shelf-or {
    color: #4a4a4a !important
}

.cb-product-shelf h2, .cb-shelf-track .pc-shelf-pix, .cb-shelf-track .pc-shelf-pix-label {
    color: #0033c6 !important
}

.cb-product-sticky-cta {
    display: none
}

@media (max-width: 768px) {
    .cb-product-sticky-cta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10020;
        display: block;
        padding: 12px 11px 12px;
        background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .94) 42%, #fff 100%);
        border-top: 1px solid rgba(226, 226, 226, .72);
        /*box-shadow:0 -18px 30px rgba(206,222,255,.74),0 -2px 8px rgba(0,0,0,.08);*/
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transform: translateY(110%);
        transition: transform .18s ease;
        pointer-events: none;
    }

    .cb-product-sticky-visible .cb-product-sticky-cta {
        transform: translateY(0);
        pointer-events: auto;
    }

    .cb-product-sticky-visible {
        padding-bottom: 94px;
    }

    .cb-product-sticky-card {
        width: 100%;
        max-width: 412px;
        height: 62px;
        margin: 0 auto;
        display: grid;
        grid-template-columns:38px 1fr 121px;
        align-items: center;
        gap: 10px;
        color: #5f5f5f;
        font-family: 'Nunito', sans-serif;
    }

    .cb-product-sticky-card img {
        width: 38px;
        height: 38px;
        object-fit: contain;
        border: 1px solid #e5e5e5;
        border-radius: 2px;
        background: #fff;
    }

    .cb-product-sticky-copy {
        min-width: 0;
        line-height: 1.15;
    }

    .cb-product-sticky-copy div {
        display: flex;
        align-items: baseline;
        gap: 4px;
        margin-bottom: 3px;
        color: #0033c6;
        white-space: nowrap;
    }

    .cb-product-sticky-copy strong {
        font-size: 20px;
        line-height: 22px;
        font-weight: 900;
    }

    .cb-product-sticky-copy span {
        font-size: 12px;
        font-weight: 800;
    }

    .cb-product-sticky-copy p {
        margin: 0;
        color: #5f5f5f;
        font-size: 12px;
        line-height: 17px;
    }

    .cb-product-sticky-copy b {
        color: #0033c6;
        font-weight: 900;
        white-space: nowrap;
    }

    .cb-product-sticky-card button {
        width: 121px;
        height: 48px;
        border: 0;
        border-radius: 4px;
        background: #18770e;
        color: #fff;
        font: 900 17px/48px 'Nunito', sans-serif;
        cursor: pointer;
    }

    .cb-product-sticky-card button:disabled {
        opacity: .55;
        cursor: not-allowed;
    }
}

/* Casas Bahia cart drawer refresh */
.cart-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9997 !important;
    background: rgba(0, 0, 0, .46) !important;
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease
}

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

.cart-sidebar.cb-cart-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9998 !important;
    width: min(430px, 100vw) !important;
    max-width: 100% !important;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.2, .75, .25, 1) !important;
    box-shadow: -16px 0 38px rgba(0, 0, 0, .2) !important;
    border-left: 1px solid #e4e4e4;
    overflow: hidden
}

.cart-sidebar.cb-cart-drawer.active {
    transform: translateX(0) !important
}

.cb-cart-drawer .cart-header {
    height: 72px;
    padding: 0 20px !important;
    background: #fff !important;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #003fa7 !important;
    flex: 0 0 auto
}

.cb-cart-drawer .cart-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #003fa7;
    font: 800 18px 'Nunito', Arial, sans-serif;
    text-transform: none;
    letter-spacing: 0
}

.cb-cart-drawer .cart-title svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
    display: block
}

.cb-cart-drawer .close-button {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #d8d8d8;
    border-radius: 50%;
    background: #fff;
    color: #003fa7;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease
}

.cb-cart-drawer .close-button:hover {
    background: #f2f6ff;
    border-color: #9bb5ee;
    transform: scale(1.03)
}

.cb-cart-drawer .close-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round
}

.cb-cart-drawer .cart-items {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 18px 10px !important;
    background: #f7f8fb !important
}

.cb-cart-drawer .cart-empty {
    height: 100%;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 20px;
    color: #5d5d5d
}

.cb-cart-drawer .cart-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef3ff;
    color: #003fa7;
    margin-bottom: 16px
}

.cb-cart-drawer .cart-empty-icon svg {
    width: 34px;
    height: 34px;
    fill: currentColor;
    display: block
}

.cb-cart-drawer .cart-empty-title {
    font-size: 18px;
    font-weight: 800;
    color: #003fa7;
    margin-bottom: 6px
}

.cb-cart-drawer .cart-empty-sub, .cb-cart-drawer .cart-empty-text {
    font-size: 13px;
    color: #686868;
    line-height: 1.35
}

.cb-cart-drawer .cart-item {
    display: grid !important;
    grid-template-columns:76px minmax(0, 1fr) 36px;
    gap: 12px;
    padding: 14px !important;
    margin: 0 0 12px !important;
    border: 1px solid #dedede !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06) !important;
    align-items: start
}

.cb-cart-drawer .cart-item-image {
    width: 76px !important;
    height: 76px !important;
    border-radius: 7px !important;
    background: #fff !important;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 76px
}

.cb-cart-drawer .cart-item-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 6px !important;
    border-radius: 0 !important
}

.cb-cart-drawer .cart-item-image svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: #003fa7;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.cb-cart-drawer .cart-item-details {
    min-width: 0;
    display: grid;
    gap: 7px
}

.cb-cart-drawer .cart-item-title {
    font-size: 13px !important;
    line-height: 1.28 !important;
    font-weight: 700 !important;
    color: #4d4d4d !important;
    margin: 0 !important;
    white-space: normal !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.cb-cart-drawer .cart-item-price {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #003fa7 !important;
    margin: 0 !important
}

.cb-cart-drawer .cart-item-controls {
    width: max-content;
    display: inline-flex !important;
    align-items: center;
    gap: 0;
    margin-top: 2px !important;
    border: 1px solid #cfd7ee;
    border-radius: 6px;
    background: #fff;
    overflow: hidden
}

.cb-cart-drawer .cart-item-controls span {
    min-width: 34px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #333;
    border-left: 1px solid #edf0f7;
    border-right: 1px solid #edf0f7
}

.cb-cart-drawer .cart-qty-btn {
    width: 32px;
    height: 30px;
    border: 0;
    background: #fff;
    color: #003fa7;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .16s ease
}

.cb-cart-drawer .cart-qty-btn:hover {
    background: #eef3ff
}

.cb-cart-drawer .cart-qty-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round
}

.cb-cart-drawer .cart-remove {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #7a7a7a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
    align-self: start
}

.cb-cart-drawer .cart-remove:hover {
    background: #fff0f0;
    color: #c81717
}

.cb-cart-drawer .cart-remove svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.cb-cart-drawer .cart-footer {
    padding: 16px 18px 18px !important;
    background: #fff !important;
    border-top: 1px solid #ddd !important;
    box-shadow: 0 -8px 22px rgba(0, 0, 0, .06);
    flex: 0 0 auto
}

.cb-cart-drawer .cart-footer[hidden] {
    display: none !important
}

.cb-cart-drawer .cart-total {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 0 14px !important;
    padding: 0 0 13px !important;
    border-bottom: 1px solid #e5e5e5 !important
}

.cb-cart-drawer .total-label {
    font-size: 14px;
    color: #5d5d5d;
    font-weight: 800
}

.cb-cart-drawer .total-value {
    font-size: 22px;
    color: #003fa7;
    font-weight: 900
}

.cb-cart-drawer .checkout-button {
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 4px;
    background: #008f2f;
    color: #fff;
    text-decoration: none;
    font: 900 15px 'Nunito', Arial, sans-serif;
    transition: background .18s ease, transform .18s ease
}

.cb-cart-drawer .checkout-button:hover {
    background: #047d2c;
    transform: translateY(-1px)
}

.cb-cart-drawer .checkout-button svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.cb-cart-drawer .continue-shopping {
    width: 100%;
    height: 42px;
    margin-top: 9px;
    border: 1px solid #cfd7ee;
    border-radius: 4px;
    background: #fff;
    color: #003fa7;
    font: 800 13px 'Nunito', Arial, sans-serif;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease
}

.cb-cart-drawer .continue-shopping:hover {
    background: #eef3ff;
    border-color: #9bb5ee;
    color: #003fa7
}

@media (max-width: 600px) {
    .cart-sidebar.cb-cart-drawer {
        width: 100vw !important
    }

    .cb-cart-drawer .cart-header {
        height: 64px
    }

    .cb-cart-drawer .cart-items {
        padding: 14px 12px 8px !important
    }

    .cb-cart-drawer .cart-item {
        grid-template-columns:68px minmax(0, 1fr) 34px;
        padding: 12px !important
    }

    .cb-cart-drawer .cart-item-image {
        width: 68px !important;
        height: 68px !important
    }
}

/* Casas Bahia listing/search page aligned to prototype */
.cb-listing-page {
    background: #f8f8f8;
    padding: 28px 0 76px;
    font-family: 'Nunito', Arial, sans-serif;
    color: #666
}

.cb-listing-container {
    width: min(1300px, calc(100% - 48px));
    margin: 0 auto
}

.cb-listing-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    color: #777;
    font-size: 12px;
    line-height: 1
}

.cb-listing-breadcrumb a {
    color: #777;
    text-decoration: none
}

.cb-listing-breadcrumb a:hover {
    color: #0033c6;
    text-decoration: underline
}

.cb-listing-breadcrumb svg {
    width: 13px;
    height: 13px;
    fill: #6e6e6e
}

.cb-listing-breadcrumb span {
    color: #0033c6;
    font-weight: 800
}

.cb-listing-title {
    margin: 0 0 58px;
    color: #0033c6;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.3px
}

.cb-listing-search-label {
    margin: -46px 0 44px;
    color: #666;
    font-size: 14px
}

.cb-listing-search-label strong {
    color: #0033c6
}

.cb-listing-layout {
    display: grid;
    grid-template-columns:310px minmax(0, 1fr);
    gap: 24px;
    align-items: start
}

.cb-listing-sidebar {
    position: sticky;
    top: 88px
}

.cb-filter-card {
    background: #f8f8f8;
    border: 1px solid #cfcfcf;
    border-radius: 5px;
    margin: 0;
    overflow: hidden
}

.cb-filter-card + .cb-filter-card {
    border-top: 0;
    border-radius: 0
}

.cb-filter-card:first-child {
    border-radius: 5px 5px 0 0
}

.cb-filter-card:last-child {
    border-radius: 0 0 5px 5px
}

.cb-filter-head {
    width: 100%;
    height: 56px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    background: transparent;
    color: #6d6d6d;
    font: 800 16px 'Nunito', Arial, sans-serif;
    text-align: left;
    cursor: pointer
}

.cb-filter-head svg {
    width: 22px;
    height: 22px;
    fill: #686868;
    transition: transform .2s
}

.cb-filter-card.is-closed .cb-filter-head svg {
    transform: rotate(-90deg)
}

.cb-filter-body {
    padding: 0 16px 22px
}

.cb-filter-card.is-closed .cb-filter-body {
    display: none
}

.cb-price-inputs {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 10px;
    margin-bottom: 20px
}

.cb-price-inputs label span {
    display: block;
    margin-bottom: 10px;
    color: #666;
    font-size: 13px
}

.cb-price-inputs input {
    width: 100%;
    height: 60px;
    padding: 0 16px;
    border: 1px solid #d2d2d2;
    border-radius: 12px;
    background: #fff;
    color: #777;
    font: 14px 'Nunito', Arial, sans-serif;
    outline: none
}

.cb-price-inputs input:focus {
    border-color: #0033c6;
    box-shadow: 0 0 0 2px rgba(0, 51, 198, .1)
}

.cb-price-range {
    position: relative;
    height: 22px;
    margin: 0 8px 3px
}

.cb-price-range:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    height: 3px;
    background: #0033c6
}

.cb-price-range:after, .cb-price-range span:before {
    content: '';
    position: absolute;
    top: 1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0033c6
}

.cb-price-range:after {
    left: 0
}

.cb-price-range span:before {
    right: 0
}

.cb-price-range-labels {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    color: #777;
    font-size: 13px
}

.cb-filter-apply {
    width: 100%;
    height: 40px;
    border: 2px solid #0033c6;
    border-radius: 3px;
    background: transparent;
    color: #0033c6;
    font: 800 14px 'Nunito', Arial, sans-serif;
    cursor: pointer;
    transition: .18s
}

.cb-filter-apply:hover {
    background: #0033c6;
    color: #fff
}

.cb-filter-clear {
    display: block;
    margin-top: 12px;
    color: #0033c6;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    text-decoration: underline
}

.cb-rating-option {
    height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d5d5d5;
    font-size: 20px
}

.cb-rating-option input {
    width: 16px;
    height: 16px;
    margin: 0;
    appearance: none;
    border: 1px solid #8e8e8e;
    border-radius: 4px;
    background: #f8f8f8
}

.cb-rating-stars {
    letter-spacing: 2px;
    color: #cfcfcf
}

.cb-rating-stars.is-active {
    color: #cc6500
}

.cb-category-list {
    display: grid;
    gap: 2px
}

.cb-category-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    color: #666;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none
}

.cb-category-list a:hover, .cb-category-list a.active {
    color: #0033c6;
    text-decoration: underline
}

.cb-category-list a span {
    color: #888;
    font-size: 12px;
    text-decoration: none
}

.cb-listing-main {
    min-width: 0
}

.cb-listing-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin: -8px 0 42px
}

.cb-listing-toolbar > strong {
    margin-top: 30px;
    color: #777;
    font-size: 13px;
    font-weight: 800
}

.cb-listing-sort {
    display: grid;
    gap: 10px;
    color: #777;
    font-size: 12px
}

.cb-listing-sort select {
    width: 228px;
    height: 50px;
    padding: 0 42px 0 16px;
    border: 1px solid #cfcfcf;
    border-radius: 9px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 13px center;
    background-size: 23px;
    color: #777;
    font: 14px 'Nunito', Arial, sans-serif;
    appearance: none;
    cursor: pointer
}

.cb-listing-sort select:focus {
    outline: 2px solid rgba(0, 51, 198, .14);
    border-color: #0033c6
}

.cb-listing-grid.products-grid {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 24px
}

.cb-listing-grid .product-card {
    position: relative;
    width: 100%;
    height: 100%; display: flex; flex-direction: column;
    min-height: 468px;
    padding: 0;
    border: 1px solid #cfcfcf;
    border-radius: 7px;
    background: #fafafa !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .12);
    overflow: hidden;
    transition: box-shadow .18s, border-color .18s
}

.cb-listing-grid .product-card:hover {
    transform: none;
    border-color: #bdbdbd;
    box-shadow: 0 4px 9px rgba(0, 0, 0, .14)
}

.cb-listing-grid .pc-img-wrap {
    height: 200px;
    margin: 0;
    padding: 24px 24px 0;
    border: 0;
    background: #fafafa !important
}

.cb-listing-grid .pc-img {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: contain;
    mix-blend-mode: multiply
}

.cb-listing-grid .pc-img-wrap:before {
    content: 'EM ATÉ\A 30X\A NO CARTÃO CASAS BAHIA';
    white-space: pre;
    position: absolute;
    left: 24px;
    top: 24px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0033c6;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    font-size: 6px;
    line-height: 8px;
    font-weight: 900;
    z-index: 2
}

.cb-listing-grid .pc-badge-full {
    display: none
}

.cb-listing-grid .pc-body {
    flex: 1;
    padding: 14px 24px 24px;
    background: #fafafa !important;
    display: flex;
    flex-direction: column
}

.cb-listing-grid .pc-name {
    height: 42px;
    min-height: 42px;
    margin: 0 0 12px;
    color: #4d4d4d;
    font-size: 14px;
    line-height: 21px;
    font-weight: 800
}

.cb-listing-grid .pc-name a {
    color: inherit;
    text-decoration: none
}

.cb-listing-grid .pc-name a:hover {
    color: #0033c6;
    text-decoration: underline
}

.cb-listing-grid .pc-rating {
    height: 22px;
    margin: 0 0 10px;
    display: flex;
    align-items: center
}

.cb-listing-grid .pc-rating-num {
    display: none
}

.cb-listing-grid .pc-stars {
    display: flex;
    gap: 1px
}

.cb-listing-grid .pc-stars svg {
    width: 17px;
    height: 17px
}

.cb-listing-grid .pc-star-full {
    fill: #cc6500
}

.cb-listing-grid .pc-star-empty {
    fill: #d5d5d5
}

.cb-listing-grid .pc-rating-count {
    margin-left: 8px;
    color: #3e3e3e;
    font-size: 12px;
    font-weight: 700
}

.cb-listing-grid .pc-shelf-offer {
    height: 20px;
    min-height: 20px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px
}

.cb-listing-grid .pc-shelf-offer.is-empty {
    visibility: hidden
}

.cb-listing-grid .pc-list-price {
    color: #777;
    font-size: 12px;
    line-height: 18px
}

.cb-listing-grid .pc-discount {
    display: inline-flex !important;
    width: auto !important;
    margin: 0 !important;
    padding: 2px 7px;
    border-radius: 3px;
    background: #247515;
    color: #fff;
    font-size: 11px;
    line-height: 15px;
    font-weight: 900;
    text-transform: none
}

.cb-listing-grid .pc-price {
    display: none
}

.cb-listing-grid .pc-shelf-payment {
    display: flex;
    flex-direction: column;
    margin: 3px 0 0
}

.cb-listing-grid .pc-shelf-installment {
    min-height: 40px;
    color: #4d4d4d;
    font-size: 13px;
    line-height: 20px;
    font-weight: 800
}

.cb-listing-grid .pc-shelf-or {
    display: block;
    color: #4d4d4d;
    font-size: 12px;
    line-height: 16px
}

.cb-listing-grid .pc-shelf-pix {
    margin: 0;
    color: #0033c6;
    font-size: 22px;
    line-height: 28px;
    font-weight: 900
}

.cb-listing-grid .pc-shelf-pix-label {
    display: block;
    margin-top: 6px;
    color: #0033c6;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700
}

.cb-listing-grid .pc-shelf-pickup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-width: 98px;
    height: 13px;
    margin-top: auto;
    padding: 0 10px;
    border-radius: 2px;
    background: #0033c6;
    color: #fff;
    font-size: 7px;
    line-height: 13px;
    font-weight: 900
}

.cb-listing-grid .pc-links {
    display: none
}

.cb-listing-page .pagination {
    margin-top: 34px
}

.cb-listing-page .pagination a:hover {
    border-color: #0033c6;
    background: #eef3ff;
    color: #0033c6
}

.cb-listing-page .pagination span.active {
    background: #0033c6;
    border-color: #0033c6
}

@media (max-width: 1180px) {
    .cb-listing-layout {
        grid-template-columns:280px 1fr
    }

    .cb-listing-grid.products-grid {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }

    .cb-listing-container {
        width: calc(100% - 32px)
    }
}

@media (max-width: 860px) {
    .cb-listing-title {
        margin-bottom: 24px
    }

    .cb-listing-layout {
        grid-template-columns:1fr
    }

    .cb-listing-sidebar {
        position: static
    }

    .cb-listing-toolbar {
        margin-top: 18px;
        align-items: stretch;
        flex-direction: column
    }

    .cb-listing-toolbar > strong {
        margin: 0
    }

    .cb-listing-sort select {
        width: 100%
    }

    .cb-listing-grid.products-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap: 14px
    }

    .cb-filter-card + .cb-filter-card {
        border-top: 1px solid #cfcfcf;
        border-radius: 5px
    }

    .cb-filter-card {
        border-radius: 5px !important
    }
}

@media (max-width: 520px) {
    .cb-listing-page {
        padding-top: 20px
    }

    .cb-listing-container {
        width: calc(100% - 20px)
    }

    .cb-listing-breadcrumb {
        font-size: 11px;
        overflow: hidden;
        white-space: nowrap;
        flex-wrap: nowrap
    }

    .cb-listing-title {
        font-size: 25px
    }

    .cb-listing-grid.products-grid {
        gap: 10px
    }

    .cb-listing-grid .product-card {
        height: 400px;
        min-height: 400px
    }

    .cb-listing-grid .pc-img-wrap {
        height: 155px;
        padding: 16px 14px 0
    }

    .cb-listing-grid .pc-img-wrap:before {
        left: 14px;
        top: 16px;
        transform: scale(.82);
        transform-origin: top left
    }

    .cb-listing-grid .pc-body {
        height: 245px;
        padding: 12px 12px 16px
    }

    .cb-listing-grid .pc-name {
        font-size: 12px;
        line-height: 18px;
        height: 36px;
        min-height: 36px;
        margin-bottom: 8px
    }

    .cb-listing-grid .pc-rating {
        margin-bottom: 6px
    }

    .cb-listing-grid .pc-shelf-payment {
        flex: none
    }

    .cb-listing-grid .pc-stars svg {
        width: 13px;
        height: 13px
    }

    .cb-listing-grid .pc-rating-count {
        font-size: 10px;
        margin-left: 4px
    }

    .cb-listing-grid .pc-shelf-installment {
        font-size: 11px;
        line-height: 16px;
        min-height: 40px
    }

    .cb-listing-grid .pc-shelf-pix {
        font-size: 19px;
        line-height: 24px
    }

    .cb-listing-grid .pc-shelf-pix-label {
        margin-top: 2px;
        font-size: 11px;
        line-height: 14px
    }

    .cb-listing-grid .pc-shelf-pickup {
        margin-top: 6px
    }

    .cb-price-inputs {
        grid-template-columns:1fr
    }

    .cb-listing-toolbar {
        margin-bottom: 22px
    }
}

/* Remove financing badge from listing cards */
.cb-listing-grid .pc-img-wrap:before {
    display: none !important;
    content: none !important
}


/* Checked state for listing rating filter */
.cb-rating-option input:checked {
    border-color: #0033c6;
    background: #0033c6;
    box-shadow: inset 0 0 0 3px #fff
}

.cb-rating-option:has(input:checked) .cb-rating-stars {
    color: #cc6500;
    font-weight: 800
}


/* Product detail delivery tags — match product-card badge style */
.cb-product-tags {
    gap: 6px;
    margin: 0 0 8px;
    align-items: center;
}

.cb-product-tags span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 98px;
    height: 13px;
    padding: 0 10px;
    border-radius: 2px;
    background: #0033c6;
    color: #fff;
    font-size: 7px;
    line-height: 13px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .cb-product-tags {
        gap: 6px;
        margin-bottom: 8px
    }

    .cb-product-tags span {
        min-width: 98px;
        height: 13px;
        padding: 0 10px;
        font-size: 7px;
        line-height: 13px;
        border-radius: 2px
    }
}

/* Product detail delivery tags — readable size on PDP */
.cb-product-tags span {
    min-width: 110px;
    height: 18px;
    padding: 0 12px;
    font-size: 8.5px;
    line-height: 18px;
    border-radius: 3px;
}

@media (max-width: 768px) {
    .cb-product-tags span {
        min-width: 110px;
        height: 18px;
        padding: 0 12px;
        font-size: 8.5px;
        line-height: 18px;
        border-radius: 3px
    }
}

/* Product gallery: swipe, zoom and Casas Bahia lightbox */
.pd-lightbox-open {
    overflow: hidden
}

.cb-product-photo {
    overflow: hidden;
    touch-action: pan-y;
    outline: none
}

.cb-product-photo > img {
    transition: transform .12s ease;
    will-change: transform
}

@media (hover: hover) and (pointer: fine) {
    .cb-product-photo.is-zooming > img {
        transform: scale(2.15);
        cursor: zoom-in
    }
}

.cb-product-thumbs {
    overflow-x: auto;
    scrollbar-width: none
}

.cb-product-thumbs::-webkit-scrollbar {
    display: none
}

.pd-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    background: #fff;
    color: #5f5f5f;
    font-family: 'Nunito', sans-serif;
    padding: 0
}

.pd-lightbox.open {
    display: grid;
    grid-template-columns:minmax(0, 1fr) 438px
}

.pd-lb-stage {
    position: relative;
    min-width: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff
}

.pd-lb-image-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: pan-y;
    overflow: hidden
}

.pd-lightbox-img {
    display: block;
    max-width: min(760px, 72vw);
    max-height: 76vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0;
    user-select: none
}

.pd-lb-panel {
    height: 100vh;
    padding: 29px 20px 24px 25px;
    background: #fff;
    border-left: 1px solid #f1f1f1;
    overflow: auto
}

.pd-lb-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px
}

.pd-lb-rating span {
    color: #d56b00;
    font-size: 18px;
    letter-spacing: 2px
}

.pd-lb-rating b {
    font-size: 12px;
    color: #444
}

.pd-lb-panel h2 {
    margin: 0;
    color: #5d5d5d;
    font-size: 24px;
    line-height: 36px;
    font-weight: 800
}

.pd-lb-divider {
    height: 1px;
    margin: 18px 0;
    border-top: 1px dashed #d8d8d8
}

.pd-lb-panel h3 {
    margin: 0 0 12px;
    color: #555;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 900
}

.pd-lb-thumbs {
    position: static;
    display: flex;
    gap: 9px;
    max-width: 100%;
    overflow-x: auto;
    padding: 0 0 8px;
    transform: none;
    background: transparent
}

.pd-lb-thumb {
    width: 55px;
    height: 55px;
    flex: 0 0 55px;
    padding: 3px;
    border: 1px solid #d8d8d8;
    border-radius: 5px;
    background: #fff;
    opacity: 1;
    cursor: pointer
}

.pd-lb-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.pd-lb-thumb.active {
    border: 2px solid #0033c6
}

.pd-lb-close {
    position: fixed;
    right: 18px;
    top: 12px;
    z-index: 4;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: #666;
    font-size: 46px;
    line-height: 28px;
    font-weight: 200;
    cursor: pointer
}

.pd-lb-close:hover {
    background: transparent;
    color: #333
}

.pd-lb-nav {
    position: fixed;
    top: 50%;
    z-index: 3;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #0033c6;
    border-radius: 4px;
    background: #fff;
    color: #0033c6;
    font-size: 23px;
    font-weight: 700;
    transform: translateY(-50%);
    cursor: pointer
}

.pd-lb-prev {
    left: 28px
}

.pd-lb-next {
    right: 466px
}

.pd-lb-nav:hover {
    background: #eef3ff
}

.pd-lb-counter {
    position: fixed;
    left: calc((100vw - 438px) / 2);
    bottom: 34px;
    z-index: 3;
    transform: translateX(-50%);
    padding: 9px 11px;
    border-radius: 4px;
    background: #f5f5f5;
    color: #555;
    font-size: 12px;
    font-weight: 800
}

@media (max-width: 768px) {
    .pd-lightbox {
        background: rgba(45, 57, 59, .98);
        padding: 24px 0
    }

    .pd-lightbox.open {
        display: flex;
        align-items: center;
        justify-content: center
    }

    .pd-lb-stage {
        width: min(412px, calc(100vw - 28px));
        height: calc(100vh - 48px);
        display: grid;
        grid-template-rows:1fr auto auto;
        background: #fff;
        overflow: hidden
    }

    .pd-lb-image-wrap {
        height: auto;
        min-height: 0;
        padding: 52px 8px 0
    }

    .pd-lightbox-img {
        max-width: 100%;
        max-height: 60vh
    }

    .pd-lb-panel {
        position: absolute;
        left: 50%;
        bottom: 33px;
        width: min(412px, calc(100vw - 28px));
        height: auto;
        padding: 0 8px 8px;
        background: transparent;
        border: 0;
        transform: translateX(-50%);
        overflow: hidden
    }

    .pd-lb-rating, .pd-lb-panel h2, .pd-lb-divider {
        display: none
    }

    .pd-lb-panel h3 {
        margin: 0 0 10px;
        color: #555;
        font-size: 15px;
        text-transform: none
    }

    .pd-lb-thumbs {
        gap: 8px;
        padding-bottom: 5px;
        overflow-x: auto
    }

    .pd-lb-thumb {
        width: 54px;
        height: 54px;
        flex-basis: 54px
    }

    .pd-lb-close {
        top: 34px;
        right: calc((100vw - min(412px, calc(100vw - 28px))) / 2 + 12px);
        color: #666;
        font-size: 42px
    }

    .pd-lb-nav {
        display: none
    }

    .pd-lb-counter {
        left: 50%;
        bottom: 144px;
        padding: 9px 10px
    }

    .pd-lb-stage .pd-lb-counter {
        position: fixed
    }

    .cb-product-photo {
        touch-action: pan-y
    }

    .cb-product-photo > img {
        transform: none !important
    }
}

/* Product gallery swipe animation */
@keyframes pdSwipeInRight {
    from {
        opacity: .25;
        transform: translateX(34px) scale(.985)
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1)
    }
}

@keyframes pdSwipeInLeft {
    from {
        opacity: .25;
        transform: translateX(-34px) scale(.985)
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1)
    }
}

.pd-swipe-in-right {
    animation: pdSwipeInRight .24s cubic-bezier(.2, .7, .2, 1) both
}

.pd-swipe-in-left {
    animation: pdSwipeInLeft .24s cubic-bezier(.2, .7, .2, 1) both
}

@media (max-width: 768px) {
    .pd-swipe-in-right {
        animation-duration: .28s
    }

    .pd-swipe-in-left {
        animation-duration: .28s
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd-swipe-in-right, .pd-swipe-in-left {
        animation: none
    }
}


/* Mobile PDP horizontal scroll fix — surgical */
@media (max-width: 768px) {
    .cb-product-container,
    .cb-product-shelf > .cb-product-container,
    .cb-reviews > .cb-product-container {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 412px !important;
    }

    .cb-product-page,
    .cb-product-main,
    .cb-product-gallery,
    .cb-product-commerce,
    .cb-reviews-layout,
    .cb-review-summary,
    .cb-review-list {
        min-width: 0;
    }

    .cb-rating,
    .cb-product-meta,
    .cb-product-tags {
        max-width: 100%;
    }

    .cb-rating {
        flex-wrap: wrap;
    }
}

/* Hide product sticky footer while cart drawer is open */
.cb-cart-open .cb-product-sticky-cta {
    display: none !important
}

/* Hide PDP sticky when cart drawer is active, regardless of body state */
body:has(#cartSidebar.active) .cb-product-sticky-cta,
body:has(.cart-sidebar.active) .cb-product-sticky-cta,
body:has(#cartOverlay.active) .cb-product-sticky-cta {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Hide PDP sticky footer while image gallery modal is open */
.pd-lightbox-open .cb-product-sticky-cta,
body:has(#pdLightbox.open) .cb-product-sticky-cta{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Global sticky footer CTA color */
.cb-product-sticky-card button{
  background:rgb(0,51,198)!important;
  color:#fff!important;
}
.cb-product-sticky-card button:hover:not(:disabled){
  background:#002aa3!important;
  box-shadow:0 4px 10px rgba(0,51,198,.22);
}
.cb-product-sticky-card button:disabled{
  background:#c8d6ff!important;
  color:rgba(255,255,255,.88)!important;
  opacity:1!important;
  cursor:not-allowed;
}

/* Mobile listing filters and breadcrumb refinement */
@media (max-width: 860px){
    .cb-listing-sidebar{
        display:grid;
        gap:14px;
        margin-bottom:24px;
    }
    .cb-filter-card,
    .cb-filter-card + .cb-filter-card{
        margin:0!important;
        border:1px solid #cfcfcf!important;
        border-radius:5px!important;
    }
    .cb-filter-head{
        height:58px;
        padding:0 16px;
    }
    .cb-filter-card.is-closed .cb-filter-head svg{
        transform:rotate(0deg);
    }
    .cb-filter-card:not(.is-closed) .cb-filter-head svg{
        transform:rotate(180deg);
    }
}
@media (max-width: 520px){
    .cb-listing-breadcrumb{
        display:grid;
        grid-template-columns:auto 13px minmax(0,1fr);
        gap:8px;
        max-width:100%;
        margin:0 0 18px;
        font-size:10px;
        line-height:1.2;
        white-space:normal;
        overflow:visible;
    }
    .cb-listing-breadcrumb a,
    .cb-listing-breadcrumb span{
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .cb-listing-breadcrumb svg{
        width:12px;
        height:12px;
        align-self:center;
    }
    .cb-listing-title{
        margin-bottom:26px;
        font-size:25px;
        line-height:1.18;
    }
    .cb-filter-card{
        background:#f8f8f8;
    }
    .cb-filter-head{
        height:56px;
        font-size:15px;
    }
    .cb-filter-body{
        padding:0 16px 22px;
    }
}

/* Sticky footer CTA exit spinner: only the clicked CTA receives .is-progress */
.cb-product-sticky-card button.is-progress{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:9px;
    background:rgb(0,51,198)!important;
    color:#fff!important;
    cursor:wait!important;
}
.cb-product-sticky-card button.is-progress::after{
    content:"";
    width:16px;
    height:16px;
    flex:0 0 16px;
    border:2px solid rgba(255,255,255,.45);
    border-top-color:#fff;
    border-radius:50%;
    animation:cbStickySpin .72s linear infinite;
}

/* Casas Bahia mobile menu aligned with new storefront UI */
.mobile-overlay {
    background: rgba(0, 14, 62, .48) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 2100 !important;
}

.mobile-menu {
    width: min(336px, 88vw) !important;
    max-width: 88vw !important;
    background: #fff !important;
    color: #0033c6 !important;
    z-index: 2110 !important;
    border-top: 4px solid #e71a3b !important;
    box-shadow: 18px 0 42px rgba(0, 14, 62, .22) !important;
    font-family: 'Nunito', sans-serif !important;
}

.mobile-header {
    min-height: 68px !important;
    padding: 0 16px 0 18px !important;
    background: #fff !important;
    border-bottom: 1px solid #eceff5 !important;
}

.mobile-title {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    color: #0033c6 !important;
}

.mobile-title img {
    display: block !important;
    width: 158px !important;
    height: auto !important;
}

.mobile-menu .close-button {
    width: 42px !important;
    height: 42px !important;
    border: 1px solid #d7def1 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #0033c6 !important;
    box-shadow: none !important;
}

.mobile-menu .close-button svg {
    width: 22px !important;
    height: 22px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
}

.mobile-menu__location {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    column-gap: 9px !important;
    row-gap: 1px !important;
    padding: 14px 18px 15px !important;
    background: #f7f9ff !important;
    border-bottom: 1px solid #e3e9fb !important;
    color: #0033c6 !important;
}

.mobile-menu__location svg {
    grid-row: 1 / span 2 !important;
    width: 22px !important;
    height: 16px !important;
    align-self: center !important;
}

.mobile-menu__location span {
    color: #0033c6 !important;
    font-size: 13px !important;
    line-height: 1.05 !important;
}

.mobile-menu__location strong {
    display: block !important;
    overflow: hidden !important;
    color: #0033c6 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.mobile-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 12px 12px 18px !important;
    background: linear-gradient(180deg, #fff 0%, #f8faff 100%) !important;
}

.mobile-nav-section {
    padding: 17px 8px 8px !important;
    color: #667085 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
}

.mobile-nav-list {
    display: grid !important;
    gap: 8px !important;
    flex: initial !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.mobile-nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 48px !important;
    padding: 12px 13px !important;
    border: 1px solid #e2e8f8 !important;
    border-left: 0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #0033c6 !important;
    box-shadow: 0 4px 14px rgba(0, 51, 198, .05) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
}

.mobile-nav-link--featured {
    margin-bottom: 8px !important;
    border-color: #d4def8 !important;
    background: #f8faff !important;
}

.mobile-nav-link span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.mobile-nav-link i {
    color: #0033c6 !important;
    font-style: normal !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

.mobile-nav-link:hover,
.mobile-nav-link:focus-visible {
    background: #eef3ff !important;
    border-color: #b9c9f4 !important;
    color: #0033c6 !important;
    padding-left: 13px !important;
    transform: translateX(2px) !important;
    outline: none !important;
}

.mobile-footer {
    padding: 16px 16px 18px !important;
    background: #fff !important;
    border-top: 1px solid #e5eaf7 !important;
}

.mobile-footer .whatsapp-button {
    height: 48px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    background: #20d45a !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(32, 212, 90, .22) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
}

.mobile-footer p {
    margin: 12px 2px 0 !important;
    color: #0033c6 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    word-break: break-word !important;
}

@media (max-width: 420px) {
    .mobile-menu {
        width: min(316px, 86vw) !important;
        max-width: 86vw !important;
    }

    .mobile-nav {
        padding-inline: 10px !important;
    }

    .mobile-nav-link {
        min-height: 46px !important;
        font-size: 13px !important;
    }
}

/* Functional PDP product shelves */
.cb-product-carousel > .cb-product-container {
    position: relative;
}

.cb-product-carousel::after {
    display: none !important;
}

.cb-product-carousel .cb-shelf-track {
    overflow-x: auto !important;
    scroll-behavior: smooth;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}

.cb-product-carousel .cb-shelf-track::-webkit-scrollbar {
    display: none;
}

.cb-product-carousel .product-card {
    scroll-snap-align: start;
}

.cb-product-shelf-arrow {
    position: absolute;
    top: calc(50% + 22px);
    z-index: 5;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #0033c6;
    border-radius: 4px;
    background: #fff;
    color: #0033c6;
    font: 800 24px/1 'Nunito', sans-serif;
    cursor: pointer;
    box-shadow: 0 3px 9px rgba(0, 0, 0, .12);
}

.cb-product-shelf-arrow--prev {
    left: -20px;
}

.cb-product-shelf-arrow--next {
    right: -20px;
}

.cb-product-shelf-arrow:disabled {
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 768px) {
    .cb-product-shelf-arrow {
        display: none !important;
    }
}

/* Mobile listing heading spacing fix */
@media (max-width: 860px) {
    .cb-listing-page .cb-listing-container {
        display: flow-root;
    }

    .cb-listing-page .cb-listing-title {
        display: block !important;
        margin: 0 0 8px !important;
        color: #0033c6 !important;
        font-size: 25px !important;
        line-height: 1.18 !important;
        letter-spacing: -.2px !important;
    }

    .cb-listing-page .cb-listing-search-label {
        display: block !important;
        clear: both !important;
        margin: 0 0 48px !important;
        color: #666 !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
        position: static !important;
        transform: none !important;
    }

    .cb-listing-page .cb-listing-search-label strong {
        color: #4f4f4f !important;
        font-weight: 800 !important;
    }

    .cb-listing-page .cb-listing-title + .cb-listing-search-label + .cb-listing-layout,
    .cb-listing-page .cb-listing-title + .cb-listing-layout {
        margin-top: 0 !important;
    }
}

@media (max-width: 520px) {
    .cb-listing-page {
        padding-top: 28px !important;
    }

    .cb-listing-page .cb-listing-breadcrumb {
        margin-bottom: 20px !important;
    }

    .cb-listing-page .cb-listing-search-label {
        margin-bottom: 48px !important;
    }
}

/* Clickable product card */
.product-card {
    position: relative;
    cursor: pointer;
}

.product-card .pc-card-link {
    position: absolute;
    inset: 0;
    z-index: 20;
    border-radius: inherit;
}

.product-card:focus-visible {
    outline: 2px solid #0033c6;
    outline-offset: 3px;
}


/* PDP CTA hover states */
.cb-actions button,
.cb-product-sticky-card button {
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease, filter .18s ease;
}

.cb-actions button:hover,
.cb-actions button:focus-visible,
.cb-product-sticky-card button:hover,
.cb-product-sticky-card button:focus-visible {
    background: #0b6f08 !important;
    box-shadow: 0 7px 16px rgba(11, 111, 8, .22);
    transform: translateY(-1px);
    outline: none;
}

.cb-actions button.store:hover,
.cb-actions button.store:focus-visible {
    background: #002aa3 !important;
    box-shadow: 0 7px 16px rgba(0, 51, 198, .22);
    transform: translateY(-1px);
    outline: none;
}

.cb-actions button:active,
.cb-actions button.store:active,
.cb-product-sticky-card button:active {
    transform: translateY(0);
    box-shadow: none;
    filter: brightness(.94);
}

.cb-actions button:disabled:hover,
.cb-product-sticky-card button:disabled:hover {
    transform: none;
    box-shadow: none;
    filter: none;
}

/* Sticky footer CTA loading replaces text */
.cb-product-sticky-card button.is-progress {
    color: transparent !important;
    position: relative;
}

.cb-product-sticky-card button.is-progress::after {
    position: absolute !important;
    inset: 0 !important;
    margin: auto !important;
    transform-origin: center;
    will-change: transform;
}

/* Sticky footer CTA keeps Casas Bahia blue, including loading */
.cb-product-sticky-card button,
.cb-product-sticky-card button:hover,
.cb-product-sticky-card button:focus-visible,
.cb-product-sticky-card button.is-progress,
.cb-product-sticky-card button.is-progress:hover,
.cb-product-sticky-card button.is-progress:focus-visible {
    background: rgb(0, 51, 198) !important;
    border-color: rgb(0, 51, 198) !important;
}

.cb-product-sticky-card button:hover,
.cb-product-sticky-card button:focus-visible {
    background: rgb(0, 42, 163) !important;
    border-color: rgb(0, 42, 163) !important;
    box-shadow: 0 7px 16px rgba(0, 51, 198, .22) !important;
}

.cb-product-sticky-card button.is-progress,
.cb-product-sticky-card button.is-progress:hover,
.cb-product-sticky-card button.is-progress:focus-visible {
    background: rgb(0, 51, 198) !important;
    border-color: rgb(0, 51, 198) !important;
    box-shadow: none !important;
}

@keyframes cbStickySpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Mobile menu delivery icon fix */
.mobile-menu__location .cb-menu-delivery-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    color: #0033c6 !important;
    fill: currentColor !important;
    stroke: none !important;
    overflow: visible !important;
    transform: none !important;
}

.mobile-menu__location .cb-menu-delivery-icon path {
    fill: currentColor !important;
    stroke: none !important;
}

/* PDP payment options modal */
.cb-payment-link {
    display: block;
    margin-top: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0033c6;
    font: 800 16px 'Nunito', sans-serif;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
}

.cb-payment-modal-open {
    overflow: hidden;
}

.cb-payment-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    color: #666;
    font-family: 'Nunito', sans-serif;
}

.cb-payment-modal.open {
    display: flex;
}

.cb-payment-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .42);
}

.cb-payment-modal__dialog {
    position: relative;
    width: min(798px, calc(100vw - 28px));
    max-height: min(790px, calc(100vh - 28px));
    overflow: hidden;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .24);
}

.cb-payment-modal__header {
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0 25px;
    background: #0033c6;
    color: #fff;
}

.cb-payment-modal__header h2 {
    margin: 0;
    color: #fff;
    font-size: 21px;
    font-weight: 900;
}

.cb-payment-modal__close {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 44px;
    line-height: 30px;
    cursor: pointer;
}

.cb-payment-modal__body {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 600px;
    max-height: calc(100vh - 90px);
    overflow: hidden;
}

.cb-payment-tabs {
    padding: 40px 24px;
    border-right: 1px solid #d8d8d8;
    background: #fff;
}

.cb-payment-tab {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 7px;
    border: 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: #fff;
    color: #666;
    font: 900 15px 'Nunito', sans-serif;
    text-align: left;
    cursor: pointer;
}

.cb-payment-tab + .cb-payment-tab {
    border-top: 0;
}

.cb-payment-tab svg {
    width: 25px;
    height: 25px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.7;
}

.cb-payment-tab.active {
    border: 2px solid #111;
    border-radius: 2px;
    color: #0033c6;
}

.cb-payment-panel {
    overflow: auto;
    padding: 24px 22px 26px 24px;
}

.cb-payment-product {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ddd;
}

.cb-payment-product img {
    width: 63px;
    height: 63px;
    object-fit: contain;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.cb-payment-product p {
    margin: 0 0 4px;
    color: #666;
    font-size: 15px;
    line-height: 1.35;
}

.cb-payment-product strong {
    display: block;
    color: #666;
    font-size: 17px;
    font-weight: 900;
}

.cb-payment-method {
    display: none;
}

.cb-payment-method.active {
    display: block;
}

.cb-payment-method h3 {
    margin: 17px 0 14px;
    color: #666;
    font-size: 18px;
    font-weight: 900;
}

.cb-installment-table {
    display: grid;
    gap: 0;
    font-size: 15px;
}

.cb-installment-row {
    min-height: 37px;
    display: grid;
    grid-template-columns: 1fr 140px;
    align-items: center;
    padding: 0 12px;
    background: #f7f7f7;
}

.cb-installment-row:nth-child(odd) {
    background: #f1f1f1;
}

.cb-installment-head {
    min-height: 27px;
    background: #fff !important;
    color: #666;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.cb-installment-row b,
.cb-installment-row strong {
    color: #666;
    font-weight: 900;
}

.cb-installment-row strong {
    text-align: right;
}

.cb-payment-note {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px dashed #ddd;
    color: #777;
    font-size: 12px;
    line-height: 1.55;
}

.cb-payment-pix-box {
    padding: 22px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f7f7f7;
}

.cb-payment-pix-box span {
    color: #666;
    font-size: 13px;
    font-weight: 800;
}

.cb-payment-pix-box strong {
    display: block;
    margin: 8px 0;
    color: #0033c6;
    font-size: 28px;
    font-weight: 900;
}

.cb-payment-pix-box p {
    margin: 0;
    line-height: 1.45;
}

@media (max-width: 768px) {
    .cb-payment-modal {
        align-items: flex-end;
        padding: 0;
    }

    .cb-payment-modal__dialog {
        width: 100%;
        max-height: 88vh;
        border-radius: 10px 10px 0 0;
    }

    .cb-payment-modal__body {
        grid-template-columns: 1fr;
        min-height: 0;
        max-height: calc(88vh - 62px);
        overflow: auto;
    }

    .cb-payment-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 14px;
        border-right: 0;
        border-bottom: 1px solid #ddd;
    }

    .cb-payment-tab {
        border: 1px solid #ddd;
        border-radius: 4px;
        justify-content: center;
        font-size: 13px;
    }

    .cb-payment-panel {
        overflow: visible;
        padding: 16px 14px 20px;
    }

    .cb-installment-row {
        grid-template-columns: 1fr 112px;
        padding: 0 10px;
        font-size: 13px;
    }
}

/* Payment modal tabs use checkout payment icons */
.cb-payment-tab .cb-payment-icon {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    color: currentColor !important;
}

.cb-payment-tab .cb-payment-icon svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
}

.cb-payment-tab .cb-payment-icon--card svg {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.cb-payment-tab .cb-payment-icon--pix svg {
    fill: currentColor !important;
    stroke: none !important;
}

.cb-payment-tab > svg {
    display: none !important;
}