/* ===========================
   BASE / GERAL
=========================== */

body {
    font-family: "Segoe UI", Arial, sans-serif;
    margin:0;
    padding:0;
    background:#f5f5f7;
    color:#111827;
}

/* ===========================
   BOTÃO COMPARTILHAR
=========================== */
.share-btn{
    width: 100%;                 /* igual ao comprar */
    display: flex;               /* centraliza perfeito */
    align-items: center;
    justify-content: center;
    text-align: center;

    padding: 10px 14px;
    margin-top: 12px;

    background: #e30613;      /* vermelho divimed */
    color: #fff;

    border: 0;
    border-radius: 6px;

    font-weight: 600;
    font-size: 15px;

    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
}

.share-btn:hover{
    background: #c10510;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

.share-btn:active{
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* ===========================
   BOTÃO COMPRAR
=========================== */
.comprar-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 10px 14px;
    background: #e30613;      /* vermelho divimed */
    color: #fff;
    text-align: center;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
}

.comprar-btn:hover {
    background: #c10510;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

.comprar-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.sumir {
    display: none !important;
}

.page {
    min-height:100vh;
}

.promo-check {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    font-weight:600;
    color:#fff;
    padding:8px 14px;
    border-radius:999px;
    background:#e30613;
    box-shadow:0 4px 10px rgba(0,0,0,0.18);
    cursor:pointer;
}

.promo-check input {
    width:18px;
    height:18px;
}

/* ===========================
   FILTRO ESTOQUE MELHORADO
=========================== */
.estoque-filter-container {
    display: flex;
    align-items: center;
}

.filtro-estoque-select {
    background-color: #ffffff;
    color: #111827;
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    outline: none;
    min-width: 160px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.filtro-estoque-select option {
    font-weight: normal;
}

.filtro-estoque-select option[value="1"] {
    color: #10b981; /* verde */
    font-weight: 500;
}

.filtro-estoque-select option[value="0"] {
    color: #ef4444; /* vermelho */
    font-weight: 500;
}

/* ===========================
   TOP BAR
=========================== */

.top-bar {
    background:#e30613;
    color:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,0.18);
    position:sticky;
    top:0;
    z-index:20;
}

.top-bar-inner {
    max-width:1200px;
    margin:0 auto;
    padding:10px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.brand {
    display:flex;
    align-items:center;
}

.brand-logo {
    height:100px; 
    width:auto;
}

.top-search {
    flex:1;
    display:flex;
    justify-content:center;
}

.search-box {
    display:flex;
    align-items:center;
    background:#3b3b3b;
    border-radius:999px;
    padding:4px 4px 4px 12px;
    box-shadow:0 8px 20px rgba(0,0,0,0.35);
    max-width:480px;
    width:100%;
}

.search-input {
    flex:1;
    border:none;
    outline:none;
    background:transparent;
    color:#f9fafb;
    font-size:14px;
}

.search-input::placeholder {
    color:#e5e7eb;
}

.search-btn {
    border:none;
    background:#e30613;
    color:#fff;
    padding:8px 14px;
    border-radius:999px;
    cursor:pointer;
    font-size:14px;
}

.top-actions {
    display:flex;
    align-items:center;
    gap: 12px; 
}

.icon-btn {
    border:none;
    background:transparent;
    padding:0;
    cursor:pointer;
    display:flex;
    align-items:center;
    text-decoration:none;
}

.icon-circle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:50%;
    background:#ffffff;
    color:#e30613;
    font-size:20px;
    box-shadow:0 2px 6px rgba(0,0,0,0.25);
    margin-right:8px;
}

.icon-text {
    color:#ffffff;
    font-size:17px;
    font-weight:500;
}

/* ===========================
   TOP BAR FILTERS
=========================== */

.top-bar-filters {
    background:#e30613;
    padding:6px 0 10px 0;
}

@media (max-width: 900px) {
    .top-bar-inner {
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:8px;
        padding:6px 12px;
    }
    .brand-logo {
        height:90px;
    }
    .top-search,
    .top-actions {
        width:100%;
        justify-content:center;
    }
}

/* MOBILE – header menor e mais compacto */
@media (max-width: 480px) {
    .top-bar-inner {
        padding:2px 6px;
        gap:3px;
    }

    .brand-logo {
        height:45px;
    }

    .search-box {
        padding:2px 8px;
        max-width:300px;
    }

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

    .search-btn {
        padding:6px 10px;
        font-size:13px;
    }

    .icon-circle {
        width:30px;
        height:30px;
        font-size:16px;
    }

    .icon-text {
        font-size:14px;
    }

    .promo-check {
        padding:4px 10px;
        font-size:12px;
    }
    
    .filtro-estoque-select {
        min-width: 140px;
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* ===========================
   CONTAINER PRINCIPAL
=========================== */

.main-container {
    max-width:1200px;
    margin:0 auto;
    padding:16px 16px 32px 16px;
}

/* ===========================
   BANNER (CARROSSEL)
=========================== */

.banner {
    margin:8px 0 18px 0;
    display:flex;
    justify-content:center;
}

.banner-slider {
    position:relative;
    width:90vw;
    max-width:1350px;
    max-height:240px;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 4px 10px rgba(0,0,0,0.18);
}

.banner-slider .slide {
    display:none;
    width:100%;
}

.banner-slider .slide img {
    width:100%;
    height:100%;
    max-height:260px;
    object-fit:cover;
    display:block;
}

.banner-slider .slide.active {
    display:block;
}

/* MOBILE – banner */
@media (max-width: 480px) {
    .banner-slider {
        max-height: 200px !important;
        height: 81px !important;
        border-radius: 12px;
    }

    .banner-slider .slide img {
        max-height: 81px !important;
        height: 180px !important;
        object-fit: cover;
    }
}

/* ===========================
   FILTERS
=========================== */

.filters-header {
    display:none;
    margin:0 auto 6px auto;
    max-width:1200px;
    padding:0 16px;
}

.filters-toggle {
    border:none;
    background:#ffffff;
    color:#e30613;
    font-size:14px;
    font-weight:600;
    padding:8px 20px;
    border-radius:999px;
    box-shadow:0 4px 10px rgba(0,0,0,0.18);
    display:inline-flex;
    align-items:center;
    cursor:pointer;
}

.filters-toggle::before {
    font-size:16px;
}

.filters {
    max-width:1200px;
    margin:0 auto;
    padding:0 16px 6px 16px;
    display:flex;
    gap:16px;
    justify-content:center;
    flex-wrap:nowrap;
    overflow-x:auto;
}

.filters select {
    flex:1 1 0;
    max-width:220px;
    padding:10px 24px;
    border-radius:999px;
    border:1px solid #e5e7eb;
    background:#ffffff;
    font-size:14px;
    color:#111827;
    outline:none;
    box-shadow:0 8px 20px rgba(0,0,0,0.18);
    appearance:none;
}

@media (max-width: 768px) {
    .filters-header { display:flex; justify-content:center; }
    .filters { display:none; flex-wrap:wrap; }
    .filters.open { display:flex; }
}

/* ===========================
   GRID — PRODUTOS
=========================== */

.catalog-section {
    margin-top:12px;
}

.catalogo {
    margin-top:8px;
    display:flex;
    flex-wrap:wrap;
}

.card-wrapper {
    box-sizing:border-box;
    padding:10px;
    flex:0 0 25%;
    max-width:25%;
    display:flex;
    justify-content:center;
}

@media (max-width: 1024px) {
    .card-wrapper { flex:0 0 33.3333%; max-width:33.3333%; }
}

@media (max-width: 768px) {
    .card-wrapper { flex:0 0 50%; max-width:50%; }
    .card-med { width:100%; height:auto; min-height:420px; }
}

@media (max-width: 480px) {
    .card-wrapper { flex:0 0 100%; max-width:100%; }
}

/* ===========================
   CARD DO PRODUTO
=========================== */

.card-med {
    width:230px;
    height:430px;
    border-radius:14px;
    border:1px solid #e5e7eb;
    background:#ffffff;
    text-align:center;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    box-shadow:0 4px 10px rgba(0,0,0,0.06);
    transition:transform 0.18s;
    overflow: hidden;
}

.card-med:hover {
    transform:translateY(-4px);
    box-shadow:0 8px 18px rgba(0,0,0,0.12);
}

/* Card esgotado */
.card-med.card-esgotado {
    opacity: 0.9;
    filter: grayscale(0.3);
    border: 1px solid #fecaca;
}

.card-header-red {
    background:#e30613;
    color:#ffffff;
    font-size:16px;
    font-weight:600;
    padding:7px 4px;
    width:100%;
    border-radius:14px 14px 0 0;
    box-sizing: border-box;
    overflow: hidden;  
}

.card-header-red.header-esgotado {
    background: #9ca3af; /* cinza */
    position: relative;
}

.card-header-red.header-esgotado::after {
    content: "⚠️ ESGOTADO";
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 8px;
    background: #1f2937;
    color: white;
    padding: 2px 4px;
    border-radius: 4px;
}

.card-subtitle {
    color:#e30613;
    font-size:12px;
    font-weight:600;
    padding:6px 4px;
    width:100%;
    overflow: hidden;  
}

.card-esgotado .card-subtitle {
    color: #6b7280;
}

.card-middle {
    flex:1;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    justify-items:center;
    width:100%;
    padding:0;
    overflow:hidden;
    position: relative;
}

.img-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-img {
    width:150px;
    height:250px;
    object-fit:contain;
    display:block;
    margin:0 auto;
    cursor:pointer;
}

.card-img.img-esgotado {
    opacity: 0.7;
    filter: grayscale(0.5);
}

.selo-esgotado {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    background: #dc2626;
    color: white;
    font-weight: 800;
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 2px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    white-space: nowrap;
    z-index: 5;
    pointer-events: none;
    text-shadow: 1px 1px 2px black;
    letter-spacing: 1px;
}

@media (max-width: 480px) {
    .selo-esgotado {
        font-size: 14px;
        padding: 6px 10px;
    }
}

.vertical-text {
    font-size:11px;
    color:#6b7280;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
}

.card-description {
    font-size:13px;
    font-weight:bold;
    padding:4px 6px;
}

.card-small {
    font-size:12px;
    padding:2px 6px 8px 6px;
    color:#4b5563;
}

/* ===========================
   LOADER
=========================== */

#loader {
    text-align:center;
    padding:16px;
    font-size:14px;
    color:#6b7280;
}

/* ===========================
   MODAL
=========================== */

.image-modal {
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.85);
    z-index:50;

    display:none;
    align-items:center;
    justify-content:center;
}

.image-modal.open {
    display:flex;
}

.image-modal-content {
    display:flex;
    flex-direction:column;
    align-items:center;
    background:#ffffff;

    padding:20px 30px;
    border-radius:12px;
    max-width:90vw;
    max-height:90vh;

    box-shadow:0 10px 30px rgba(0,0,0,0.30);
}

.image-modal-close {
    align-self:flex-end;
    border:none;
    background:transparent;
    color:#111827;
    font-size:28px;
    cursor:pointer;
    line-height:1;
    margin-bottom:8px;
}

.image-modal-img {
    max-width:80vw;
    max-height:60vh;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
}

.image-modal-title {
    margin-top:15px;
    font-size:22px;
    font-weight:700;
    color:#111827;
    text-align:center;
}

/* ===========================
   MOBILE - MODAL + BOTÕES
=========================== */
@media (max-width: 480px) {
    .image-modal-content{
        padding: 14px 14px;
        border-radius: 14px;
        max-width: 92vw;
        max-height: 92vh;
    }

    .image-modal-img{
        max-width: 88vw;
        max-height: 58vh;
    }

    .image-modal-title{
        font-size: 18px;
        margin-top: 10px;
    }

    .comprar-btn,
    .share-btn{
        padding: 14px 14px;   /* mais confortável no toque */
        font-size: 16px;
        border-radius: 10px;
    }

    .image-modal-close{
        font-size: 32px;
        margin-bottom: 6px;
    }
}

/* ===========================
   PROMOÇÕES
=========================== */

.promo-wrapper {
    box-sizing:border-box;
    padding:10px;
    flex:0 0 50%;
    max-width:50%;
    display:flex;
    justify-content:center;
}

.promo-banner {
    width:100%;
    border-radius:10px;
    overflow:hidden;
    display:flex;
    justify-content:center;
}

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

@media (max-width: 480px) {
    .promo-wrapper {
        flex:0 0 100%;
        max-width:100%;
    }
}

/* ===========================
   HEADER FIXO + BANNER FIXO ABAIXO (FUNCIONA NO CELULAR)
=========================== */

/* ajuste essas alturas conforme seu header */
:root{
  --header-h: 170px; /* desktop */
}

@media (max-width: 900px){
  :root{ --header-h: 230px; } /* header vira coluna e cresce */
}

@media (max-width: 480px){
  :root{ --header-h: 185px; } /* mobile */
}

/* HEADER fixo */
.top-bar{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
}

/* empurra o conteúdo pra baixo do header fixo */
.page{
  padding-top: var(--header-h);
}

/* BANNER “colado” abaixo do header */
.banner{
  position: relative;
  top: auto;
  z-index: 1;        /* ↓ menor que header */
  margin: 20px 0;    /* espaço em cima e embaixo */
}

/* ===========================
   BANNER MENOR NO PC (DESKTOP)
=========================== */

/* desktop */
@media (min-width: 901px){
  .banner-slider{
    max-height: 200px;   /* antes era 260px */
  }

  .banner-slider .slide img{
    max-height: 200px;   /* acompanha o container */
  }
}