/* Global styles for ColorPro Tintas — minimal, modern, responsive */
:root {
    /* White + Purple theme */
    --bg: #ffffff;
    /* página branca */
    --card: #fbf8ff;
    /* leve tom lavanda para cards */
    --muted: #6b7280;
    /* usamos as variáveis já existentes para compatibilidade com o CSS */
    --accent-red: #AF9ADB;
    /* tom roxo escuro (usado antes como "red") */
    --accent-blue: #CBA7D7;
    /* tom roxo médio (usado antes como "blue") */
    --accent-gray: #9aa3ad;
    --shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
    --radius: 10px;
    --container: 1100px;
    --transition: 300ms cubic-bezier(.2, .9, .3, 1);
}

* {
    box-sizing: border-box
}

html,
body {
    /* allow content to determine height (prevents weird infinite-scroll on some mobile) */
    height: auto;
    min-height: 100%;
}

body {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: var(--bg);
    margin: 0;
    color: #111827;
    -webkit-font-smoothing: antialiased;
    /* ensure content is pushed below the fixed top banner + header */
    padding-top: calc(var(--top-banner-height) + var(--header-height));
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px
}

/* Search bar styles used on mobile and desktop below the header */
.search-bar{ max-width:980px; margin: 72px auto 18px; display:flex; gap:10px; align-items:center }

/* Larger desktops: nudge search a little more down so it matches the highlighted position */
@media (min-width: 1200px) {
    .search-bar { margin-top: 96px; }
}
.search-bar input[type="search"]{ 
    flex:1;
    padding:14px 18px;
    border-radius:999px;
    border:1px solid rgba(16,24,40,0.06);
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(16,24,40,0.08);
    font-size:15px;
    color: #111827;
    transition: box-shadow 180ms ease, border-color 180ms ease;
}
.search-bar input[type="search"]:focus,
.search-bar input[type="search"]:focus-visible{
    outline: none;
    box-shadow: 0 14px 40px rgba(16,24,40,0.12);
    border-color: rgba(139,92,246,0.18);
}
.search-bar button{
    background: transparent;
    border: 1px solid rgba(16,24,40,0.06);
    color: var(--accent-red);
    font-size:16px;
    padding:10px 14px;
    border-radius:12px;
    cursor:pointer;
    box-shadow: none;
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, color 120ms ease;
}
.search-bar button:hover,
.search-bar button:focus{
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(175,154,219,0.06);
    background: rgba(175,154,219,0.12);
    color: #111827;
}

/* Ensure search bar stays interactive above fixed header/menus on mobile */
.search-bar {
    position: relative;
    /* keep search below the header so it doesn't overlap the navbar while scrolling */
    z-index: 1900;
}
.search-bar input[type="search"] {
    pointer-events: auto;
}

@media(max-width:768px){
    .search-bar{ margin: 8px 12px; }
    .search-bar input[type="search"]{ font-size:14px; padding:12px 14px }
    .search-bar button{ padding:10px 12px }
}

/* Top small discount banner */
.top-banner {
    background: linear-gradient(90deg, var(--accent-red), var(--accent-blue));
    color: #fff;
    text-align: center;
    padding: 8px 12px;
    font-weight: 600;
    /* Fixada no topo para não ficar parcialmente visível sob a navbar */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
     /* Keep the banner visually above the header and search input so it
         remains visible while scrolling. Use a very high z-index so the
         banner is always on top of navigation controls (hamburger, header).
         This also ensures it overlays the cart/profile nav items on mobile. */
      z-index: 9999;
     /* Allow clicks to pass through the banner so fixed header controls
         (hamburger, cart) remain interactive on mobile while keeping the
         banner visually on top. If the banner later contains interactive
         controls, adjust selectors to enable pointer-events on those children. */
     pointer-events: none;
}

/* Header/Navbar */
:root {
    --top-banner-height: 36px;
    /* Increased header height so the navbar grows downward (more touch area) */
    --header-height: 84px;
}

.site-header {
    position: fixed;
    left: 0;
    right: 0;
    /* posiciona o header abaixo do banner fixo */
    top: var(--top-banner-height);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow);
    /* raise header above most floating elements so it doesn't get covered while scrolling */
    z-index: 2000;
    pointer-events: auto;
}

.site-header.small {
    position: static
}

/* Slightly stronger logo accent and nav spacing for better visual balance */
.logo {
    font-size: 22px
}

.nav-list {
    gap: 22px
}

.header-inner {
    /* Use a three-column grid: logo (left), nav (center), actions (right) */

/* Ensure explicit login links don't show underline in any header/context */
#authItem a, #loginBtn, #mobileLoginBtn {
    text-decoration: none !important;
    color: inherit;
}
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    /* slightly larger padding so the header visually expands downward */
    padding: 22px 20px;
    /* Ensure absolute-positioned children (cart icon) are positioned
       relative to the header container so they appear at the page edges
       when needed. This prevents the cart moving to the right on resize. */
    position: relative;
}

.logo {
    font-weight: 700;
    color: #111827;
    font-size: 20px;
    justify-self: start; /* keep logo at the left edge of the header region */
}

.logo span {
    color: var(--accent-blue);
    font-weight: 600;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    justify-self: center; /* center the nav in the header */
}

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

.header-actions {
    display: flex;
    align-items: center;
    justify-self: end; /* place actions at the right edge */
    gap: 12px;
}

.header-actions .cart-icon { font-size: 20px }

/* header-actions user link: no underline and styled like nav buttons */
.header-actions .user-link {
    text-decoration: none;
    color: inherit;
    padding: 8px 12px;
    border-radius: 8px;
    transition: var(--transition);
}
.header-actions .user-link:hover,
.header-actions .user-link:focus {
    background: rgba(139,92,246,0.12);
    transform: translateY(-2px);
}
/* ensure strong inside user-link does not add underline */
.header-actions .user-link strong { text-decoration: none }

/* Make cart-icon interactive on hover */
.header-actions .cart-icon, .cart-icon {
    display: inline-flex; align-items:center; gap:6px; padding:6px 8px; border-radius:8px; transition: var(--transition);
}
.header-actions .cart-icon:hover, .cart-icon:focus { background: rgba(139,92,246,0.08); transform: translateY(-2px) }

/* Remove underline for cart link and ensure it's treated as a button */
.cart-icon {
    text-decoration: none !important;
    color: inherit;
    /* Make the cart anchor a positioning context so the badge (.cart-count)
       is positioned relative to the anchor rather than a higher ancestor. */
    position: relative;
}

/* Ensure the cart emoji looks consistent across pages/devices */
.cart-icon .cart-emoji {
    display: inline-block;
    font-size: 20px; /* match .cart-icon default */
    line-height: 1;
    margin-right: 8px; /* space between emoji and count */
    vertical-align: middle;
}

/* Badge counter for the cart (red bubble) - consistent across pages */
.cart-icon .cart-count,
.cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ff3b3b;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 50%;
    line-height: 1;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-list a {
    color: #111827;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 8px;
    transition: var(--transition);
}

/* stronger hover & focus for nav links to signal highlight */
.nav-list a:hover,
.nav-list a:focus {
    background: rgba(139, 92, 246, 0.14);
    transform: translateY(-2px);
}

/* Make main-nav links look like buttons (pills) */
.main-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: #111827;
    font-weight: 600;
    border: 1px solid transparent;
    background: transparent;
    transition: transform 140ms ease, box-shadow 140ms ease, background 160ms ease;
}

/* apply same pill styling to nav-list used across pages */
.nav .nav-list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: #111827;
    font-weight: 600;
    border: 1px solid transparent;
    background: transparent;
}

.logo img{ height:38px; display:block }

/* Prevent the logo from growing on :focus/:active and ensure fixed size */
.logo,
.logo img {
    transition: none !important;
    max-height: 48px;
    height: 38px;
    width: auto;
}
.logo:focus, .logo:active { outline: none; }
.logo:focus img, .logo:active img { transform: none !important; }

/* Stronger lockdown: prevent any accidental scaling/transform for the logo
   across all states and make sure it stays centered on mobile. Using
   highly specific selectors to override other rules. */
.site-header .header-inner .logo,
.site-header .header-inner .logo img {
    height: 38px !important;
    max-height: 48px !important;
    width: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
    transform: none !important;
    transition: none !important;
}

.site-header .header-inner .logo:focus,
.site-header .header-inner .logo:active,
.site-header .header-inner .logo img:focus,
.site-header .header-inner .logo img:active {
    transform: none !important;
    outline: none !important;
}

/* Desktop: show textual logo, hide image. Mobile: image will take over and be centered. */
.site-header .header-inner .logo { display: block !important; text-decoration: none !important; }
.site-header .header-inner .logo img { display: none !important; }
.site-header .header-inner .logo .logo-text { display: block !important; font-weight:700; color: #111827; font-size:20px; text-decoration: none !important; }
.site-header .header-inner .logo .logo-text .logo-accent { color: var(--accent-red) !important; }

/* Ensure logo remains centered at small widths */
@media (max-width: 768px) {
    .header-inner .logo { justify-self: center; text-align: center }
}
.main-nav a:hover,
.main-nav a:focus {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(16,24,40,0.06);
    background: linear-gradient(90deg, rgba(175,154,219,0.12), rgba(203,167,215,0.08));
}
.main-nav a[aria-current="page"], .main-nav a.active {
    background: linear-gradient(90deg, var(--accent-red), var(--accent-red));
    color: #fff;
    box-shadow: 0 12px 30px rgba(175,154,219,0.12);
}

@media(max-width:900px){
    .main-nav a{ padding:10px 12px; border-radius:10px; }
}

.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}

.hamburger:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(139, 92, 246, 0.16);
}

.hamburger:active {
    transform: translateY(0);
}

.hamburger span {
    display: block;
    width: 22px;
    height: 3px;
    background: #111827; /* dark bars to be visible on white header */
    margin: 4px 0;
    border-radius: 2px;
    transition: background .12s ease, transform .12s ease;
}

/* Slightly larger touch target on small screens */
@media (max-width: 768px) {
    /* Slightly reduced header height for mobile so nav isn't too tall */
    :root { --header-height: 96px; }
    .hamburger {
        display: block;
    }

    /* E oculta o menu normal quando em modo mobile */
    .nav-list {
        display: none;
    }

    /* Mobile header layout: hamburger left, logo centered, actions right */
    .header-inner {
        grid-template-columns: auto 1fr auto;
        /* reduced mobile padding to shrink visual header height */
        padding: 16px 12px;
        position: relative; /* allow absolute positioning of cart */
    }

    /* center the logo */
    .logo { justify-self: center; }

    /* Make the logo visible on mobile and center it absolutely in the header */
    .site-header .header-inner .logo {
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 125 !important;
    }
    .site-header .header-inner .logo img {
        display: block !important;
        height: 38px !important;
        max-height: 48px !important;
    }
    /* hide textual logo on mobile since image is used */
    .site-header .header-inner .logo .logo-text { display: none !important; }

    /* ensure header-actions remain on the right */
    .header-actions { justify-self: end; }

    /* hide the inline auth item on mobile; user/login will be available inside the hamburger menu */
    .header-actions #authItem { display: none }

    /* Move the cart icon to the left edge visually on mobile while keeping it in the DOM
       (prevents changing HTML structure). This makes the cart appear on the left. */
    .header-actions .cart-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 120;
        background: transparent;
        /* define a fixed box so the badge can be positioned relative to it */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 6px;
        border-radius: 8px;
        font-size: 18px;
    }

    /* Mobile: CSS-driven dropdown menu when nav-list has .active */
    .nav-list.active {
        display: flex !important;
        flex-direction: column;
        position: absolute;
        right: 12px;
        /* place immediately under the header container (header-inner) */
        top: calc(100% + 6px);
        background: rgba(255,255,255,0.98);
        padding: 12px;
        border-radius: 8px;
        box-shadow: 0 8px 28px rgba(16,24,40,0.08);
        min-width: 180px;
        z-index: 140;
    }

     /* Place the hamburger inside the header actions (not absolutely positioned)
         so it participates in normal header flow and stays visually inside the navbar.
         NOTE: header-inner remains positioned so absolute children (cart-icon) are
         positioned relative to the entire header. Keep .header-actions static so
         the cart can be placed at the left edge of the header. */
     .header-actions { position: static; display: flex; align-items: center; gap: 8px }
    .header-actions #hamburger {
        position: static; /* participate in normal flow */
        margin-left: 8px;
        z-index: 130;
    }
    .header-actions #hamburger span { background: #111827 }

    /* Mobile-only nav item showing the user/login inside the menu */
    /* Ensure mobile-only elements are visible on small screens (override later global rules) */
    .mobile-only { display: block !important }
    .nav-list.active .mobile-only { display: list-item }

    /* Enable mobile carousels for tablets/phones (<=768px) so users see the
       two carousels across a wider range of mobile devices, not only <=600px */
    .products-grid { display: none }
    .products-carousel {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 12px 8px;
        scroll-snap-type: x mandatory;
    }
    .products-carousel::-webkit-scrollbar { height: 8px; display: none }
    .products-carousel .product-card {
        flex: 0 0 68%;
        min-width: 68%;
        scroll-snap-align: center;
        margin: 0;
    }

    /* Normalize product images on mobile: fixed visual box so artwork
       looks identical across cards and carousels. Use contain to preserve
       full artwork while maintaining consistent sizing. */
    .product-card img,
    .products-carousel .product-card img {
        display: block;
        width: 100%;
        height: 160px; /* consistent visual height */
        max-width: 240px; /* prevents very wide thumbnails from stretching too much */
        margin: 0 auto;
        object-fit: contain; /* show full artwork and center inside box */
    }
    .products-carousel .product-card img { max-height: 34vh; object-fit: cover; }
}

/* Move hamburger to right edge on mobile while keeping cart on the left */
@media (max-width: 768px) {
    .site-header .header-inner { position: relative; }
    .header-actions #hamburger {
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 2500 !important;
        margin: 0 !important;
    }
    /* ensure the cart remains on the left side */
    .header-actions .cart-icon {
        left: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        position: absolute !important;
        z-index: 2400 !important;
    }
}

/* Ensure hamburger is always visible and clickable on mobile across all pages */
@media (max-width: 768px) {
    .hamburger {
        display: block !important;
        position: relative !important;
        z-index: 2400 !important;
        background: transparent !important;
        border: 0 !important;
    }
    .hamburger span { background: #111827 !important; }
}

/* Hero / Carousel */
.hero {
    /* Reduce top padding so carousel sits closer under the search bar on desktop */
    padding-top: 12px; /* was calc(var(--top-banner-height) + var(--header-height) + 12px) */
    padding-bottom: 36px;
    /* keep hero background matching page (white/transparent) per user request */
    background: transparent;
}

.carousel {
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--radius) + 8px);
    /* imagem ocupa toda a área do carrossel sem padding interno */
    background: transparent;
    box-shadow: var(--shadow);
    padding: 0;
    /* Limita a largura ao container do site e centraliza o carrossel */
    max-width: var(--container);
    margin: 0 auto;
    width: calc(100% - 40px);
    /* Força proporção para imagens 1224x312 (largura:altura ≈ 3.923)
         e limita a altura máxima para não ocupar muito espaço */
    aspect-ratio: 1224 / 312;
    max-height: 60vh;
    /* limita quanto o carrossel ocupa do topo da página */
}

.slides {
    display: flex;
    transition: transform 600ms ease;
    height: 100%;
}

.slide {
    min-width: 100%;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide img {
    width: 100%;
    height: 100%;
    /* preencher toda a área do carrossel e cortar o excedente para dar aspecto cheio */
    object-fit: cover;
    display: block;
}

.carousel-caption {
    position: absolute;
    left: 36px;
    bottom: 36px;
    /* Texto em preto para melhor legibilidade sobre imagens claras/variadas */
    color: #111827;
    /* Removemos a sombra escura (era pensada para texto branco).
       Para garantir contraste, aplicamos um fundo branco semi-transparente. */
    text-shadow: none;
    background: rgba(255, 255, 255, 0.88);
    padding: 12px 16px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
    max-width: calc(100% - 72px);
}

.carousel-caption h1 {
    margin: 0;
    font-size: 28px
}

.carousel-caption p {
    margin: 6px 0 0;
    font-size: 15px;
    opacity: 0.95
}

.carousel-caption {
    position: absolute;
    left: 36px;
    bottom: 36px;
    /* Removido o "balão" branco: deixamos o texto diretamente sobre a imagem */
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    /* Texto em branco com sombra para garantir legibilidade sobre imagens variadas */
    color: #ffffff;
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
    max-width: calc(100% - 72px);
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95);
    border: 0;
    padding: 8px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    /* Lower z-index so the fixed header (navbar) stays above the arrows when scrolling */
    z-index: 50;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-arrow.prev {
    left: 12px
}

.carousel-arrow.next {
    right: 12px
}

.carousel-indicators {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: flex;
    gap: 8px
}

.carousel-indicators {
    z-index: 50
}

.carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer
}

.carousel-indicators button.active {
    background: var(--accent-blue)
}

/* Promo strip under carousel: rounded rectangle with content */
.promo-strip {
    padding: 20px 0
}

/* Modal for product details */
.modal.hidden {
    display: none
}

.modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45)
}

.modal-content {
    position: relative;
    background: var(--card);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.2);
    max-width: 920px;
    width: 94%;
    z-index: 210
}

.modal-close {
    position: absolute;
    right: 14px;
    top: 14px;
    border: 0;
    background: transparent;
    font-size: 18px;
    cursor: pointer
}

.product-modal {
    display: flex;
    gap: 18px;
    align-items: flex-start
}

.product-modal .media {
    flex: 0 0 360px
}

.product-modal .media img {
    width: 100%;
    height: auto;
    border-radius: 8px
}

.product-modal .info {
    flex: 1
}

.product-modal h2 {
    margin: 0 0 8px
}

.product-modal .price {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-blue)
}

.qty-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 12px 0
}

.qty-row input {
    width: 100px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #e6e9ee
}

.modal-actions {
    display: flex;
    gap: 12px
}

.buy-now {
    background: var(--accent-red);
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    border: 0
}

.add-cart {
    background: var(--accent-blue);
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    border: 0
}

.promo-card {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    background: linear-gradient(90deg, #2b2b2b, #3b3b3b);
    color: #fff;
    border-radius: 26px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 12px 30px rgba(10, 10, 10, 0.08);
}

.promo-media img {
    width: 160px;
    max-width: 160px;
    height: auto;
    border-radius: 10px
}

.promo-content {
    flex: 1
}

.promo-content h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 600
}

.promo-content h3 span {
    color: rgba(241, 194, 125, 0.95)
}

.promo-content p {
    margin: 6px 0 0
}

.promo-action {
    display: flex;
    align-items: center
}

.promo-btn {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    padding: 12px 22px;
    border-radius: 26px;
    text-decoration: none
}

@media(max-width:900px) {
    .promo-media img {
        width: 110px;
        max-width: 110px
    }

    .promo-content h3 {
        font-size: 22px
    }
}

@media(max-width:600px) {
    .promo-card {
        flex-direction: column;
        gap: 12px;
        padding: 14px
    }

    .promo-media img {
        width: 140px
    }

    .promo-action {
        width: 100%;
        display: flex;
        justify-content: center
    }

    .promo-btn {
        width: 170px;
        text-align: center
    }
}

/* Promotions / products */
.promotions {
    padding: 40px 20px
}

.promotions h2 {
    text-align: center;
    margin-bottom: 18px
}

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

/* Mobile-only horizontal carousels (kept hidden on desktop) */
.products-carousel { display: none }

.product-card {
    background: var(--card);
     /* subtle outline to separate products without being intrusive
         slightly tinted with the brand purple so product surfaces stand out
         a touch more against a white page (desktop emphasis). */
    /* slightly stronger so product outlines stand out a little more */
    border: 1px solid rgba(139,92,246,0.10);
    padding: 16px;
    border-radius: 12px; /* slightly larger radius like the example */
    overflow: hidden; /* keep rounded corners tidy */
    /* soft default purple-tinged shadow to improve contrast on white backgrounds */
    box-shadow: 0 6px 18px rgba(139,92,246,0.04);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform .14s ease, box-shadow .14s ease;
}

.product-card:hover {
    transform: translateY(-6px);
    /* slightly stronger, purple-tinged hover shadow for a gentle lift */
    box-shadow: 0 22px 44px rgba(139,92,246,0.12);
}

.product-card img {
    display: block;
    width: 100%;
    height: 220px; /* fixed visual box on desktop */
    max-width: 100%;
    object-fit: contain; /* keep artwork intact, centered in box */
    /* Limit max height but allow it to scale down with viewport width.
       clamp(min, preferred, max) ensures images stay reasonable on large
       screens while shrinking on small devices. */
    max-height: clamp(120px, 40vh, 380px);
    object-fit: contain;
    border-radius: 8px;
    background: linear-gradient(#fff, #f5f7fa);
}

/* Add a soft divider line above the actions area so the card feels like
   the example: a white surface, shadow, rounded corners and a thin rule */
.product-card .actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    /* use a subtle purple divider so actions are readable but still soft */
    border-top: 1px solid rgba(139,92,246,0.05);
    padding-top: 10px;
    margin-top: 8px;
}

.product-meta {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.product-title {
    font-weight: 600
}

.price {
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

.price .original {
    text-decoration: line-through;
    color: var(--muted);
    font-size: 13px
}

.price .sale {
    color: var(--accent-red);
    font-weight: 700
}

.btn {
    display: inline-block;
    padding: 10px 12px;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}

.btn:hover,
.btn:focus {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 10px 26px rgba(16,24,40,0.06);
}

.btn.cart {
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-blue));
    color: #fff
}

/* Buy button on product cards */
.btn.buy {
    background: linear-gradient(90deg, var(--accent-red), var(--accent-red));
    color: #fff;
    margin-right: 8px;
}

/* Center action buttons inside product cards and product detail page */
.product-card .actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Product detail page actions (buttons under product info) */
.product-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Contact */
.contact {
    padding: 36px 20px
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px
}

.socials {
    display: flex;
    gap: 8px;
    margin-top: 12px
}

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--muted)
}

.newsletter-form {
    display: flex;
    gap: 8px
}

.newsletter-form input {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #e6e9ee
}

.newsletter-form button {
    padding: 10px 12px;
    border-radius: 8px;
    border: 0;
    background: var(--accent-red);
    color: #fff
}

/* Footer */
.site-footer {
    margin-top: 36px;
    padding: 28px 20px;
    background: transparent
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 24px
}

.footer-bottom {
    text-align: center;
    margin-top: 14px;
    color: var(--muted);
    font-size: 13px
}

/* Login page */
.login-page .login-main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80vh
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #fff);
    padding: 28px;
    border-radius: 12px;
    box-shadow: var(--shadow)
}

.login-card h2 {
    margin-top: 0
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.login-form input {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e6e9ee
}

/* Profile page specific styles */
.profile-card {
    max-width: 920px;
    margin: 24px auto;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), var(--card));
    padding: 20px;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(16,24,40,0.06);
}

.profile-header {
    display: flex;
    gap: 18px;
    align-items: center;
    border-bottom: 1px solid rgba(16,24,40,0.04);
    padding-bottom: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap; /* allow items to wrap so buttons don't overflow */
}

.profile-avatar {
    width: 86px;
    height: 86px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-red));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 28px;
    box-shadow: 0 8px 24px rgba(16,24,40,0.08);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 999px;
    display: block;
}

.avatar-actions { display:flex; flex-direction:column; gap:8px; align-items:flex-start }
.avatar-actions .btn { padding:6px 10px }
.profile-header .profile-info { min-width: 220px }
.profile-header > div[style] { min-width: 220px }

/* Smaller inputs used in profile address section */
.small-input {
    max-width: 180px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #e6e9ee;
}

.estado-select {
    width: 110px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #e6e9ee;
    background: #fff;
}

@media(max-width:600px) {
    .small-input { max-width: 140px }
    .estado-select { width: 90px }
}

/* Address row helpers to prevent overflow */
.address-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.address-row > div { min-width: 0; }
.address-row .city { flex: 1 1 160px; }
.address-row .estado { flex: 0 0 110px; }
.address-row .numero { flex: 0 1 110px; }
.address-row .complemento { flex: 0 1 160px; }

/* Ensure inputs/selects fill their wrapper and respect box-sizing */
.section-card .login-form input,
.section-card .login-form select {
    width: 100%;
    box-sizing: border-box;
}
.avatar-actions .btn { padding:6px 10px }
.avatar-input { display:none }

.profile-info h3 {
    margin: 0;
    font-size: 18px;
    /* Keep the user's name on a single line; truncate with ellipsis if too long */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.profile-info .muted { margin-top: 4px }

.profile-sections {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 18px;
}

.section-card {
    background: white;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(16,24,40,0.04);
}

.section-card h4 {
    margin: 0 0 8px;
    font-size: 16px;
}

/* On small screens, stack profile sections */
@media(max-width:900px) {
    .profile-sections { grid-template-columns: 1fr }
    .profile-card { padding: 16px }
}

.field-row { display:flex; gap:12px; align-items:center }
.field-row input { flex:1 }

.muted.small { font-size:13px }

.primary {
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-blue));
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    border: 0;
    transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.primary:hover,
.primary:focus {
    transform: translateY(-3px);
    filter: brightness(1.08);
    box-shadow: 0 12px 30px rgba(139,92,246,0.12);
}

/* Primary purple variant for product add-to-cart buttons (matching design) */
.primary-purple {
    background: linear-gradient(90deg, var(--accent-red), var(--accent-red));
    color: #fff;
    padding: 10px 14px;
    border-radius: 12px;
    border: 0;
    cursor: pointer;
    font-weight: 600;
    transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}
.primary-purple:hover,
.primary-purple:focus {
    transform: translateY(-3px);
    filter: brightness(1.06);
    box-shadow: 0 12px 30px rgba(175,154,219,0.12);
}

.small {
    font-size: 13px;
    color: var(--muted)
}

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

.back-link {
    text-decoration: none;
    color: var(--accent-red);
    font-weight: 600;
}

/* Loading overlay */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 120;
    opacity: 1;
    transition: opacity 300ms
}

.loading-overlay.hidden {
    opacity: 0;
    visibility: hidden
}

/* When hidden, ensure overlay doesn't block pointer events */
.loading-overlay.hidden { pointer-events: none }

.spinner {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: 6px solid rgba(30, 30, 30, 0.06);
    border-top-color: var(--accent-blue);
    animation: spin 1s linear infinite
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

/* Responsive */
@media(max-width:900px) {
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
        gap: 14px;
    }

    .carousel {
        max-height: 260px;
    }
}

/* Ensure mobile-only carousels are available on small tablets and large phones
   so the user's "duplo carrossel" appears on a wider set of viewports. */
@media (max-width:900px) {
    /* make mobile-only elements visible on these widths */
    .mobile-only { display: block !important; }

    /* hide desktop grid and enable the horizontal carousels */
    .products-grid { display: none !important; }
    .products-carousel {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 12px 8px;
        scroll-snap-type: x mandatory;
    }
    .products-carousel::-webkit-scrollbar { height: 8px; display: none }
    .products-carousel .product-card {
        flex: 0 0 68%;
        min-width: 68%;
        scroll-snap-align: center;
        margin: 0;
    }
    .products-carousel .product-card img { max-height: 34vh; object-fit: cover; }
}

@media(max-width:600px) {
    /* reduced header height for smaller phones */
    :root { --header-height: 96px; }
    .header-inner {
        padding: 14px;
    }


    .nav-list {
        display: none
    }

    .hamburger {
        display: inline-flex
    }

    .hero {
        padding-top: 80px
    }

    .carousel {
        max-height: 180px;
    }

    /* On mobile we hide the desktop grid and show mobile carousels
       (.products-carousel). This keeps desktop layout intact and provides
       two independent touch carousels for mobile. */
    .products-grid { display: none }

    .products-carousel {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* smoother momentum on iOS */
        gap: 12px;
        padding: 12px 8px;
        scroll-snap-type: x mandatory;
    }
    /* hide native scrollbar for webkit browsers while preserving accessibility */
    .products-carousel::-webkit-scrollbar { height: 8px; display: none }

    .products-carousel .product-card {
        flex: 0 0 78%; /* card width in the carousel (shows one main card) */
        min-width: 78%;
        scroll-snap-align: center;
        margin: 0; /* remove grid spacing reliance */
    }

    /* Slightly taller images in the carousel but keep them clipped nicely */
    .products-carousel .product-card img { max-height: 36vh; object-fit: cover; }

    .contact-grid {
        grid-template-columns: 1fr
    }

    .carousel-caption {
        left: 16px;
        bottom: 16px
    }
}

/* small utilities */
.text-center {
    text-align: center
}

.hidden {
    display: none
}

/* hide mobile-only elements by default (desktop) */
.mobile-only { display: none }

/* Product detail page styles */
.product-detail {
    padding: 18px 0
}

.product-page-grid {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 28px;
    align-items: start;
}

.product-page-grid .media img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    background: linear-gradient(#fff, #f6f6ff);
    box-shadow: var(--shadow)
}

.product-page-grid .info h1 {
    margin: 0 0 8px;
    font-size: 24px
}

.product-page-grid .info .muted {
    margin-bottom: 8px
}

/* size selection pills */
.size-options {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap
}

.size-pill {
    padding: 12px 18px;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: transparent;
    cursor: pointer;
    min-width: 96px;
    text-align: center;
    transition: var(--transition);
    font-weight: 600;
    color: var(--muted)
}

.size-pill:hover {
    transform: translateY(-3px);
    filter: brightness(1.04);
}

.size-pill.active {
    background: var(--accent-red);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 30px rgba(175, 154, 219, 0.12)
}

.size-pill.outline {
    background: var(--card);
    color: #111827;
    border-color: rgba(16, 24, 40, 0.04)
}

@media(max-width:900px) {
    .product-page-grid {
        grid-template-columns: 1fr
    }

    .product-page-grid .media {
        order: 0
    }
}

/* Extra mobile polish: make components reflow better on small devices */
@media(max-width:420px) {
    :root {
        --container: calc(100% - 32px);
    }

    .container {
        padding: 0 16px
    }

    /* Slightly reduce header top offset so content fits on very small screens */
    /* Keep header visually thick on small phones (<=420px) by forcing the
       header height and padding. This ensures the navbar does not collapse
       between 420px and ~330px where some devices previously showed a thin bar. */
    :root { --header-height: 96px; }

    .site-header {
        top: 30px;
    }

    .header-inner {
        padding: 14px 12px !important;
    }

    /* Login card should use most of the viewport width on small phones */
    .login-card {
        max-width: 94%;
        padding: 18px;
        border-radius: 10px;
    }

    /* Make carousel shorter and move arrows a bit lower so they don't overlap header */
    .carousel {
        aspect-ratio: 16 / 6;
        max-height: 200px
    }

    .carousel-arrow {
        top: 60%
    }

    /* Indicators moved slightly up to avoid touching the footer of the carousel */
    .carousel-indicators {
        bottom: 10px;
        right: 10px
    }

    /* Keep two columns on very small screens but make cards more compact */
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        grid-auto-rows: auto;
    }

    /* Reduce padding and font sizes inside cards so they fit naturally */
    .product-card { padding: 10px; gap: 8px; }
    .product-card .product-title { font-size: 14px }
    .product-card .price .sale { font-size: 14px }

    /* Reduce image height on very small screens so the cards remain compact */
    .product-card img { max-height: 20vh; }

    /* Reduce promo-card padding and media size on very small screens */
    .promo-card {
        padding: 12px;
        border-radius: 18px
    }

    .promo-media img {
        width: 120px
    }

    /* Smaller buttons and pills for touch targets */
    .btn,
    .primary {
        padding: 10px 12px
    }

    .size-pill {
        padding: 10px 14px;
        min-width: 80px
    }
}

/* Very-small-screen fix: ensure header stays thick on narrow viewports (example: 328px). */
@media (max-width: 328px) {
    /* Force the header-height to the mobile value and increase header padding so
       the navbar remains visibly thick on very small phones. This overrides
       any cascade issues that could make the header collapse at some sizes. */
    :root { --header-height: 96px; }

    .header-inner {
        /* Make touch targets comfortably large and keep the visual thickness */
        padding: 14px 12px !important;
    }

    /* Ensure the header remains positioned below the top banner */
    .site-header { top: var(--top-banner-height) !important; }

    /* Keep the centered logo correctly positioned inside the thicker header */
    .site-header .header-inner .logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 125 !important;
    }

    /* Keep the cart icon aligned at the left edge inside the thicker header */
    .header-actions .cart-icon {
        left: 10px !important;
        width: 40px !important;
        height: 40px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* On very narrow screens slightly reduce product card padding so two columns fit */
    .product-card { padding: 8px; }
    .product-card .product-title { font-size: 13px }
}

/* Global mobile button fixes: make buttons wrap/shrink to avoid text overflow
   Applies to many button variants used across the site; keeps header action
   buttons unchanged to avoid breaking header layout. */
@media (max-width: 768px) {
    .btn, .btn-primary, .btn-secondary, .btn-ghost, .primary-purple, .btn.buy, .btn.cart {
        min-width: 0 !important; /* allow shrinking */
        box-sizing: border-box;
        white-space: normal !important; /* allow wrapping */
        overflow-wrap: anywhere !important; /* aggressive wrap for long words */
        word-break: break-word !important;
        line-height: 1.15;
    }

    /* Product card action buttons: prefer two buttons per row when space allows */
    .product-card .actions .btn {
        flex: 1 1 48%;
        min-width: 0;
        padding: 8px 10px;
        font-size: 13px;
        white-space: normal;
        text-align: center;
    }

    /* Single-button actions should be full width */
    .product-card .actions.single .btn {
        flex-basis: 100%;
        min-width: 100%;
    }

    /* Slightly reduce buy button text on smaller screens to avoid wrapping if possible */
    .product-card .btn.buy, .product-card .btn-primary, .primary-purple {
        font-size: 13px;
        padding: 8px 10px;
    }

    /* Keep header action buttons (cart/login) unchanged to avoid header wrap */
    .header-actions .btn, .header-actions a, .header-actions button {
        white-space: nowrap;
    }
}

/* Extra-tight layout to guarantee two products per row down to 320-368px.
   We remove extra container padding, reduce gaps, shrink images and typography
   and make action buttons compact so each card fits without being cut. */
@media (max-width: 368px) {
    .container { padding: 0 8px; }

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

    .product-card {
        padding: 6px;
        gap: 8px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    /* Force images to be compact but visible; use viewport-based height so
       they scale correctly with very narrow widths. object-fit: contain
       prevents cropping. */
    .product-card img {
        max-height: 18vh;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* Compact text and price to avoid wrapping that increases card height */
    .product-card .product-title { font-size: 13px; line-height: 1.1; }
    .price .sale { font-size: 13px; }
    .price .original { font-size: 11px }

    /* Make buttons smaller and allow wrapping inside the actions row */
    .product-card .actions { gap: 6px; flex-wrap: wrap; justify-content: center }
    .product-card .btn { padding: 8px 10px; font-size: 13px }

    /* Fix for mobile buttons that overflow their container: make action buttons
       responsive, allow them to share the row and wrap text when needed while
       keeping consistent sizing and spacing. Applies to very small screens. */
    .product-card .actions .btn {
        box-sizing: border-box;
        min-width: 0; /* allow flex children to shrink below content width */
        flex: 1 1 48%; /* try to place two buttons per row when possible */
        white-space: normal; /* allow wrapping inside the button if text is long */
        line-height: 1.15;
        text-align: center;
        font-size: 13px;
        padding: 8px 10px;
    }
    /* If there's a single action button, let it take full width for prominence */
    .product-card .actions.single .btn { flex-basis: 100%; min-width: 100%; }

    /* ensure no unexpected overflow from elements inside the card */
    .product-card * { min-width: 0 }
}

/* Stack product action buttons vertically on narrow mobile screens so
   'Comprar' appears above 'Adicionar ao carrinho'. This only applies to
   very small/mobile viewports and overrides the two-per-row rule. */
@media (max-width: 480px) {
    .product-card .actions {
        flex-direction: column !important;
        align-items: center; /* center the small buttons */
        gap: 8px;
    }

    /* Refined small centered rectangles (stacked) for mobile action buttons */
    .product-card .actions .btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        flex-basis: auto !important;
        width: 140px !important; /* slightly narrower rectangle */
        max-width: 78% !important;
        min-width: 100px !important;
        white-space: normal !important;
        text-align: center;
        padding: 8px 10px !important;
        font-size: 14px !important;
        line-height: 1 !important;
        border-radius: 8px !important; /* less rounded */
        box-shadow: none !important;
    }

    .product-card .actions .btn:not(:last-child) {
        margin-bottom: 6px;
    }
}

/* Mobile-only: highlight the user/profile item inside the hamburger menu
   This gives a clear visual cue for the user's profile option without
   affecting desktop layout. Targets the mobile-only list item with id
   `mobileUserMenu`. */
@media (max-width: 768px) {
    #mobileUserMenu a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 10px;
        background: linear-gradient(90deg, var(--accent-red), var(--accent-blue));
        color: #fff !important;
        font-weight: 700;
        text-decoration: none !important;
        box-shadow: 0 12px 30px rgba(175,154,219,0.12);
    }
    #mobileUserMenu a::before {
        content: "👤";
        display: inline-block;
        font-size: 16px;
        line-height: 1;
        transform: translateY(-1px);
    }
    #mobileUserMenu a:hover, #mobileUserMenu a:focus {
        transform: translateY(-2px);
        box-shadow: 0 16px 36px rgba(175,154,219,0.16);
    }
}

/* Targeted range: ensure two full cards per row between 368px and 446px */
@media (min-width: 368px) and (max-width: 446px) {
    .container { padding: 0 10px; }

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

    .product-card {
        padding: 8px;
        gap: 10px;
    }

    .product-card img {
        /* slightly larger than the <=368 rule but still compact */
        max-height: 22vh;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .product-card .product-title { font-size: 14px; line-height: 1.12 }
    .price .sale { font-size: 14px }
    .price .original { font-size: 12px }

    .product-card .actions { gap: 8px; }
    .product-card .btn { padding: 9px 10px; font-size: 13px }

    .product-card * { min-width: 0 }
}

/* Very-specific adjustments for ~380px widths to ensure two cards fit perfectly */
@media (min-width: 378px) and (max-width: 392px) {
    .container { padding: 0 6px; }

    .products-grid { gap: 6px; }

    .product-card {
        padding: 6px;
        gap: 8px;
    }

    /* Slightly reduce image height to ensure there is room for title/buttons */
    .product-card img {
        max-height: 20vh;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .product-card .product-title { font-size: 13px; line-height: 1.05 }
    .price .sale { font-size: 13px }

    .product-card .actions { gap: 6px; }
    .product-card .btn { padding: 8px 10px; font-size: 12px }

    /* ensure no element forces overflow */
    .product-card * { min-width: 0 }
}

/* Very-specific micro-tweak for exactly ~376px (374–380px)
   Guarantees two product cards per row at 376px with no clipping. */
@media (min-width: 368px) and (max-width: 380px) {
    .container { padding: 0 6px; }

    .products-grid { gap: 6px; }

    .product-card {
        padding: 6px;
        gap: 8px;
    }

    .product-card img {
        max-height: 19vh;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .product-card .product-title { font-size: 13px; line-height: 1.05 }
    .price .sale { font-size: 13px }

    .product-card .actions { gap: 6px; }
    .product-card .btn { padding: 8px 10px; font-size: 12px }

    .product-card * { min-width: 0 }
}

/* Ensure large fixed header stays above other components on small/large screens */
.site-header {
    z-index: 2000
}

.logout-btn {
    background: none;
    border: none;
    color: #e53935;
    font-weight: 600;
    cursor: pointer;
    margin-left: 8px;
}

.logout-btn:hover {
    text-decoration: underline;
}

/* ==== Botão do Carrinho ==== */
.cart-button {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #222;
    color: white;
    font-size: 24px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    transition: background 0.2s ease;
    z-index: 999;
}

.cart-button:hover {
    background-color: #444;
}

/* Evita qualquer overflow horizontal */
html,
body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}


/* WhatsApp floating action button (FAB) */
.whatsapp-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366; /* solid WhatsApp green */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 26px rgba(0,0,0,0.24);
    z-index: 1400;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.whatsapp-fab svg { width: 28px; height: 28px; display:block }
.whatsapp-fab img { width: 28px; height: 28px; display:block }
.whatsapp-fab:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.28); }
.whatsapp-fab:active { transform: translateY(-1px) }

@media(max-width:420px){ .whatsapp-fab{ right: 12px; bottom: 12px; width:48px; height:48px } .whatsapp-fab svg{ width:22px;height:22px } .whatsapp-fab img{ width:22px;height:22px } }

/* Checkout page styles */
.checkout-page{ padding: calc(var(--top-banner-height) + var(--header-height) + 12px) 20px 48px; display:flex; justify-content:center; }
.checkout-card{ max-width:980px; width:100%; background:#fff; padding:28px; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.08); }
.checkout-card h1{ margin:0 0 6px 0; }
.payment-methods{ margin:18px 0; }
.radio-row{ display:flex; gap:12px; align-items:center; padding:12px; border-radius:8px; background:#f7f7f8; cursor:pointer; }
.radio-row input{ margin-right:12px; }
.pix-box{ display:flex; gap:18px; padding:16px; border-radius:10px; background:linear-gradient(180deg,#fafafa,#fff);} 
.pix-left{ width:220px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.pix-qr{ width:180px; height:180px; background:linear-gradient(135deg,#e7f9ec,#c0f0d6); display:flex; align-items:center; justify-content:center; border-radius:10px; font-weight:700; color:#06623b; font-size:28px; }
.pix-key{ font-size:14px; color:#333; }
.pix-right{ flex:1; display:flex; align-items:center; }
.pix-instructions p{ margin:0 0 8px 0; }
.checkout-actions{ display:flex; justify-content:space-between; gap:12px; margin-top:18px; }
.btn-outline{ background:transparent; border:1px solid #ddd; color:#333; }
.btn-primary{ background:var(--accent-red); color:#fff; }

/* Overlay + spinner for fake payment */
.overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.45); z-index:200; }
.overlay-content{ background:transparent; color:#fff; text-align:center; padding:28px; border-radius:12px; }
.spinner{ width:64px; height:64px; border-radius:50%; border:6px solid rgba(255,255,255,0.18); border-top-color:#fff; margin:0 auto 14px auto; animation:spin 1s linear infinite; }
@keyframes spin{ to { transform:rotate(360deg);} }
.overlay-text{ font-size:18px; }
.overlay-content.success .checkmark{ width:96px; height:96px; border-radius:50%; background:linear-gradient(135deg,#4ade80,#16a34a); display:flex; align-items:center; justify-content:center; font-size:48px; margin:0 auto 10px auto; }


/* Unified button variants (preferred classes: .btn + .btn-primary/.btn-secondary/.btn-ghost) */
.btn-primary {
    background: linear-gradient(90deg, var(--accent-red), var(--accent-red));
    color: #fff;
    padding: 10px 14px;
    border-radius: 12px;
    border: 0;
    cursor: pointer;
    font-weight: 600;
}

/* Toast / notification */
.toast-container {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 88px; /* above FAB */
    z-index: 2600;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    background: linear-gradient(90deg, rgba(75,0,130,0.98), rgba(139,92,246,0.98));
    color: #fff;
    padding: 10px 14px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(16,24,40,0.24);
    display: inline-flex;
    gap: 10px;
    align-items: center;
    min-width: 200px;
    max-width: 92vw;
    transform: translateY(12px);
    opacity: 0;
    transition: transform 260ms cubic-bezier(.2,.9,.28,1), opacity 260ms ease;
}
.toast.show {
    transform: translateY(0);
    opacity: 1;
}
.toast img.toast-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.08);
}
.toast .toast-text {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.1;
}
.toast .toast-close {
    margin-left: 8px;
    background: transparent;
    border: 0;
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    font-size: 16px;
    opacity: 0.9;
}
.btn-primary:hover, .btn-primary:focus { transform: translateY(-3px); filter: brightness(1.04); box-shadow: 0 12px 30px rgba(175,154,219,0.12); }

.btn-secondary {
    background: #f3f4f6;
    color: #111827;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e6e9ee;
    cursor: pointer;
}
.btn-secondary:hover, .btn-secondary:focus { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,24,40,0.04); }

.btn-ghost {
    background: transparent;
    color: var(--muted);
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
}
.btn-ghost:hover, .btn-ghost:focus { background: rgba(16,24,40,0.02); transform: translateY(-2px); }

/* Back-link styled as a small ghost button */
.back-link.btn-ghost { padding: 6px 10px; font-size: 14px; }

.hamburger {
    /* Keep hamburger hidden by default on larger screens; media queries
       below will make it visible on mobile. */
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 6px;
    background: transparent;
    border: 0;
    border-radius: 8px;
}
.hamburger span {
    display: block;
    width: 22px;
    height: 3px;
    background: #111827;
    margin: 3px 0;
    border-radius: 2px;
}

/* Cart page images: match product card style but scaled for cart list */
.cart-item img {
    width: 92px;
    height: 92px;
    object-fit: contain; /* show full product artwork without cropping */
    border-radius: 10px;
    background: linear-gradient(#fff, #f5f7fa);
}

/* subtle outline for cart rows so each item is separated clearly */
.cart-item {
    border: 1px solid rgba(16,24,40,0.04);
    border-radius: 10px;
    padding: 10px;
    transition: background .12s ease, box-shadow .12s ease;
}

/* Responsive adjustments for cart thumbnails on small screens */
@media (max-width: 420px) {
    .cart-item img { width: 72px; height: 72px }
    .cart-item { padding: 12px }
    .cart-item-name { font-size: 14px }
    .cart-item-price { font-size: 14px }
}

/* Upload spinner used on profile page when sending avatar */
.upload-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.08);
    border-top-color: var(--accent-red);
    animation: spin 900ms linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

/* Fix: Keep logo visually centered on mobile without absolute positioning.
   Use the header grid to center the logo (safer across devices) and
   disable transitions on active/focus so it doesn't jump when tapped. */
@media (max-width: 768px) {
    .site-header .header-inner .logo,
    .site-header .header-inner .logo img {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        transition: none !important;
        -webkit-tap-highlight-color: transparent !important;
        justify-self: center !important;
        align-self: center !important;
        margin: 0 auto !important;
    }

    .site-header .header-inner .logo:active,
    .site-header .header-inner .logo:focus,
    .site-header .header-inner .logo img:active,
    .site-header .header-inner .logo img:focus {
        transform: none !important;
        transition: none !important;
        outline: none !important;
    }

    /* Ensure ancestor active states don't apply transforms that rotate/shift children */
    .site-header:active, .site-header *:active {
        transform: none !important;
    }
}

/* Ensure the logo occupies the middle column of the header grid on mobile
   so it is visually centered among nav and header actions. This is robust
   when HTML ordering places logo first. */
@media (max-width: 768px) {
    /* Ensure header columns are fixed on mobile so icons (left/right) don't
       change size and push the centered logo up/down when something becomes
       active. Fixed columns ensure the logo stays centered at all times. */
    .site-header .header-inner { grid-template-columns: 44px 1fr 44px !important; align-items: center !important; height: var(--header-height) !important; }
    /* slight downward nudge so the logo visually centers within the header */
    .site-header .header-inner > .logo { grid-column: 2 !important; justify-self: center !important; align-self: center !important; position: static !important; transform: translateY(6px) !important; }
    /* show the image variant and hide textual logo on mobile to avoid layout shifts */
    .site-header .header-inner .logo img { display: block !important; }
    .site-header .header-inner .logo .logo-text { display: none !important; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Styled remove button for cart items */
.red-remove,
button.red-remove,
.remove {
    background: transparent;
    border: 1px solid rgba(249, 99, 99, 0.12);
    color: #b91c1c;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, color 140ms ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.red-remove:hover, .red-remove:focus, .remove:hover, .remove:focus {
    background: rgba(249, 99, 99, 0.10);
    box-shadow: 0 12px 30px rgba(185, 28, 28, 0.08);
    transform: translateY(-3px);
    color: #7f1d1d;
    outline: none;
}
.red-remove::before, .remove::before {
    content: "🗑️";
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    transform: translateY(-1px);
}

@media (max-width: 420px) {
    .red-remove, .remove { padding: 6px 10px; font-size: 14px }
}


/* ===== Override: prefer simple 2-column grid on small screens (disable carousels) =====
   The site previously used mobile-only horizontal carousels. The user requested
   to ignore carousels and show two products per row as before. We enforce a
   conservative override for widths <= 900px so the visible product source is
   the main `.products-grid` and mobile carousels stay hidden.
*/
@media (max-width: 900px) {
    .products-carousel { display: none !important; }
    .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    /* ensure product images are not overly tall on small viewports */
    .product-card img { max-height: 28vh; object-fit: contain; }
}

/* Mobile: hide hero carousel arrows but keep indicators and autoplay.
   Users can still swipe/drag the slides; JS implements touch handling. */
@media (max-width: 768px) {
    .carousel-arrow {
        display: none !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }
}

/* Strong override: stack and center product action buttons on very small screens
   This final block ensures the buy/add buttons are vertically stacked and
   centered one above the other on mobile devices. It overrides earlier rules
   that attempted two-per-row layouts. */
@media (max-width: 480px) {
    .product-card .actions,
    .product-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 8px 0 !important;
    }

    .product-card .actions .btn,
    .product-actions .btn {
        display: block !important;
        margin: 6px auto !important;
        width: 160px !important; /* fixed, narrow pill like design in screenshot */
        max-width: 92% !important; /* allow shrink on very narrow devices */
        box-sizing: border-box !important;
        text-align: center !important;
        padding: 10px 12px !important;
        font-size: 15px !important;
        align-self: center !important;
    }

    /* ensure the primary buy button appears above the add-to-cart when stacked */
    .product-card .actions .btn.buy {
        order: -1 !important;
    }
}

/* Product image improvements for mobile: reduce height, center and add subtle card */
@media (max-width: 480px) {
    .product-page-grid .media {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 8px 12px !important;
    }

    .product-page-grid .media img {
        width: auto !important;
        max-width: 86% !important; /* a bit of side gutter */
        max-height: 42vh !important; /* reduce vertical dominance */
        object-fit: contain !important;
        border-radius: 12px !important;
        box-shadow: 0 18px 40px rgba(16,24,40,0.08) !important;
        background: #ffffff !important;
        padding: 8px !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Ensure the product info doesn't jump up under the header when image is smaller */
    .product-page-grid .info {
        padding-top: 8px !important;
    }
}