/* HD STORE 3.1 - Tema Gamer RGB. Somente visual. */
:root{--rgb-cyan:#22c9ff;--rgb-pink:#ff3ac8;--rgb-violet:#9858ff;--rgb-orange:#ff9c35}
html{scroll-behavior:smooth}
body{background-color:#070c1e!important;background-image:radial-gradient(ellipse 65% 45% at 10% 10%,rgba(226,39,196,.34),transparent 70%),radial-gradient(ellipse 60% 45% at 90% 17%,rgba(16,169,255,.34),transparent 70%),radial-gradient(ellipse 60% 45% at 80% 75%,rgba(138,56,255,.24),transparent 70%),radial-gradient(ellipse 55% 45% at 12% 85%,rgba(255,135,36,.2),transparent 70%),linear-gradient(135deg,#070b1a,#101332 45%,#090e22)!important;background-attachment:fixed!important;color:#edf5ff}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(90deg,transparent 0 99px,rgba(66,173,255,.045) 100px),repeating-linear-gradient(0deg,transparent 0 99px,rgba(66,173,255,.04) 100px);mask-image:linear-gradient(to bottom,black,transparent 90%)}
body::after{content:"";position:fixed;inset:-25%;pointer-events:none;z-index:0;background:radial-gradient(circle at 30% 35%,rgba(250,43,188,.13),transparent 30%),radial-gradient(circle at 70% 60%,rgba(0,201,255,.15),transparent 35%);animation:rgbDrift 22s ease-in-out infinite alternate}
@keyframes rgbDrift{to{transform:translate(5%, -4%) scale(1.07)}}
body>header,body>main,body>footer,body>section,body>.container{position:relative;z-index:1}
header,nav{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
article,.card,.product-card,.produto,.hero-card{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 14px 40px rgba(0,0,0,.22),0 0 25px rgba(53,125,255,.07);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
article:hover,.card:hover,.product-card:hover,.produto:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.35),0 0 22px rgba(180,64,255,.2);border-color:rgba(66,205,255,.55)}
button,a{transition:filter .2s ease,transform .2s ease}
button:hover{filter:brightness(1.12)}
@media(max-width:720px){body{background-attachment:scroll!important}body::after{animation:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
/* HD STORE 3.1 - Fundo Gamer */

body {
    background:
        linear-gradient(
            rgba(5, 10, 30, 0.68),
            rgba(5, 10, 30, 0.78)
        ),
        url("/imagens/fundo-gamer.webp")
        center center / cover fixed no-repeat !important;
}

/* HD STORE 3.1 - Ajuste de visibilidade do fundo */

html {
    background-color: #080b1c;
}

body {
    background:
        linear-gradient(
            rgba(5, 10, 30, 0.55),
            rgba(5, 10, 30, 0.72)
        ),
        url("/imagens/fundo-gamer.webp")
        center center / cover fixed no-repeat !important;
}

main,
section {
    background-color: transparent !important;
}

header,
footer,
.product-card,
.hero-card {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 720px) {
    body {
        background-attachment: scroll !important;
    }
}

/* HD STORE 3.1 - Ícones menores */

.product-card .emoji,
.product-card .icon,
.product-card .product-icon,
.product-card .produto-icone,
.product-card .product-image,
.product-card .produto-imagem {
    font-size: 42px !important;
    max-width: 90px !important;
    max-height: 90px !important;
}

/* Imagens dos equipamentos */
.product-card img {
    max-width: 90px;
    max-height: 90px;
    object-fit: contain;
}

/* ==========================================
   HD STORE 3.1 - CARTÕES COMPACTOS
   Ícones de equipamentos: 32px
   ========================================== */

/* Ícones dos produtos */
.product-card .emoji,
.product-card .icon,
.product-card .product-icon,
.product-card .produto-icone,
.product-card .product-emoji,
.produto-card .emoji,
.produto-card .icon {
    font-size: 32px !important;
    line-height: 1.2 !important;
}

/* Imagens dos equipamentos */
.product-card img,
.produto-card img {
    max-width: 64px !important;
    max-height: 64px !important;
    object-fit: contain;
}

/* Área superior dos cartões */
.product-card .product-image,
.product-card .product-media,
.product-card .produto-imagem,
.produto-card .produto-imagem {
    height: 110px !important;
    min-height: 110px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Espaçamento interno */
.product-card .product-info,
.product-card .product-content,
.produto-card .produto-info {
    padding: 18px !important;
}

/* Animação suave */
.product-card,
.produto-card {
    transition: transform .25s ease,
                box-shadow .25s ease;
}

/* Ajuste para celulares */
@media (max-width: 720px) {
    .product-card .product-image,
    .product-card .product-media,
    .product-card .produto-imagem,
    .produto-card .produto-imagem {
        height: 90px !important;
        min-height: 90px !important;
    }
}

/* ======================================
   HD STORE 3.1 - PRODUTOS COMPACTOS
   ====================================== */

/* Grade de produtos */
.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

/* Cartão */
.product {
    height: auto;
    min-height: 0;
    border-radius: 14px;
}

/* Área superior e ícone */
.product .pic {
    height: 70px !important;
    min-height: 70px !important;
    font-size: 32px !important;
    line-height: 1 !important;
    display: grid;
    place-items: center;
}

/* Informações */
.product .details {
    padding: 12px 14px !important;
}

.product .details h3 {
    font-size: 16px;
    margin: 5px 0;
}

.product .details p {
    font-size: 12px;
    line-height: 1.4;
    min-height: 0;
    margin: 8px 0;
}

/* Preço */
.product .price {
    font-size: 16px;
    margin-top: 10px;
}

/* Botão */
.product .details button {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 13px;
    margin-top: 10px;
}

/* Responsividade */
@media (max-width: 780px) {
    .products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

/* ==========================================
   HD STORE 3.1 - VITRINE HORIZONTAL
   ========================================== */

/* Produtos em uma única linha */
.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding: 10px 4px 18px !important;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;

    scrollbar-width: thin;
    scrollbar-color: #38bdf8 #102039;
}

/* Cartões compactos */
.products > .product {
    flex: 0 0 250px !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;

    height: auto !important;
    scroll-snap-align: start;
}

/* Área superior */
.products > .product .pic {
    height: 70px !important;
    min-height: 70px !important;
    font-size: 32px !important;
    display: grid;
    place-items: center;
}

/* Informações dos equipamentos */
.products > .product .details {
    padding: 14px !important;
}

/* Barra horizontal */
.products::-webkit-scrollbar {
    height: 8px;
}

.products::-webkit-scrollbar-track {
    background: #102039;
    border-radius: 20px;
}

.products::-webkit-scrollbar-thumb {
    background: linear-gradient(
        90deg,
        #0ea5e9,
        #a855f7
    );
    border-radius: 20px;
}

/* Ajustes para celulares */
@media (max-width: 600px) {
    .products > .product {
        flex-basis: 210px !important;
        width: 210px !important;
        min-width: 210px !important;
        max-width: 210px !important;
    }
}

/* Respeitar preferência por movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .products {
        scroll-behavior: auto;
    }
}

/* HD STORE - Controles da vitrine */

.vitrine-controles {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 8px 0 12px;
}

.vitrine-controles button {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid #38bdf8;
    background: #10243c;
    color: #ffffff;
    font-size: 22px;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.vitrine-controles button:hover:not(:disabled) {
    background: #087fc2;
    transform: translateY(-2px);
}

.vitrine-controles button:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.products {
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
}