/* ==========================================================================
   PÁGINA "COLEÇÃO" — vídeo de fundo cobrindo a página inteira
   ========================================================================== */

/* o container (não o <video> em si) é o elemento fixo — presa o vídeo dentro
   dele evita o bug clássico do iOS/Safari em que um <video> com
   position:fixed "escapa" do lugar e fica isolado no topo da página */
.colecao-bg-video-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2;

    width: 100%;
    height: 100%;
    overflow: hidden;

    /* impede repaint/scroll bugs em iOS Safari com elementos fixos */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* o vídeo em si só precisa preencher o container acima, sem posicionamento
   próprio — isso é o que garante que ele nunca "flutue" sozinho */
.colecao-bg-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* mesmo tratamento "ofuscado" já usado no vídeo do hero da home */
    filter: brightness(1) saturate(1) blur(1px);
}

/* No computador a tela é larga e o vídeo precisa ser ampliado pra cobrir
   tudo, o que deixa ele pixelado. Aqui o desfoque é maior pra suavizar
   isso (vira um fundo "ofuscado" bonito) e o leve zoom esconde as bordas
   que o desfoque deixaria transparentes. No celular nada muda. */
@media (min-width: 1025px) {
    .colecao-bg-video {
        filter: brightness(1) saturate(1.05) blur(4px);
        transform: scale(1.06);
    }
}

/* véu translúcido por cima do vídeo pra ele nunca atrapalhar a leitura,
   em nenhum ponto da página */
.colecao-bg-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;

    background: rgba(247, 241, 232, 0.22);
}

/* ---- banner do topo ---- */

.colecao-hero {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 340px;
    padding: 120px 40px 90px;
}

/* sombra extra só atrás do texto branco do banner, pra garantir contraste
   mesmo com o véu claro da página já sendo bem translúcido */
.colecao-hero-shade {
    position: absolute;
    inset: 0;
    z-index: 0;

    background: linear-gradient(
        180deg,
        rgba(20, 17, 15, 0.55) 0%,
        rgba(20, 17, 15, 0.4) 60%,
        rgba(20, 17, 15, 0) 100%
    );
}

.colecao-hero-inner {
    position: relative;
    z-index: 1;

    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.colecao-breadcrumb {
    display: inline-block;
    margin-bottom: 18px;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.75);
}

.colecao-breadcrumb a {
    color: var(--gold-light);
    text-decoration: none;
}

.colecao-breadcrumb a:hover {
    text-decoration: underline;
}

.colecao-hero-inner h1 {
    font-family: "Poppins", sans-serif;
    font-size: 44px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.colecao-hero-inner p {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* a seção de produtos nesta página não vem logo depois de "categorias"
   como na home, então não precisa do padding-top gigante pensado pra
   acomodar a barra de features flutuando por cima */
.colecao-produtos {
    padding-top: 80px;
}

/* ==========================================================================
   PRODUTOS — grade de fotos da coleção (exclusivo desta página)
   ========================================================================== */

.produtos {
    padding: 90px 40px;
}

.produtos-toolbar {
    display: flex;
    justify-content: center;
    margin-bottom: 44px;
}

.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.filter-tab {
    background: var(--paper);
    border: 1px solid var(--ink-faint);

    padding: 10px 20px;
    border-radius: 999px;

    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);

    cursor: pointer;
    transition: 0.25s ease;
}

.filter-tab:hover {
    border-color: var(--wine);
    color: var(--wine);
}

.filter-tab.active {
    background: var(--wine);
    border-color: var(--wine);
    color: #fff;
}

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

.produtos-empty {
    text-align: center;
    color: var(--ink-soft);
    padding: 60px 0;
}

.produto-card {
    background: var(--paper);
    border-radius: var(--radius-md);
    overflow: hidden;

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

    transition: transform 0.15s ease, box-shadow 0.3s ease;
    transform-style: preserve-3d;
}

.produto-card:hover {
    box-shadow: var(--shadow-strong);
}

/* a moldura da foto — a proporção 5/9 bate certinho com as fotos
   frente+costas lado a lado (405x729) usadas no catálogo. Se o estilo
   de foto mudar no futuro, é só ajustar esse aspect-ratio aqui. */
.produto-photo {
    position: relative;
    aspect-ratio: 5 / 9;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.produto-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 55%);
}

.produto-photo-icon {
    font-size: 42px;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25));
}

/* Peça marcada como esgotada no painel administrativo (/admin) */
.produto-sold-out .produto-photo {
    filter: grayscale(0.55) brightness(0.85);
}

.produto-sold-out-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;

    background: var(--wine);
    color: #fff;

    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;

    padding: 5px 10px;
    border-radius: 999px;
}

.btn-add:disabled {
    background: var(--ink-faint);
    color: var(--ink-soft);
    cursor: not-allowed;
}

.btn-add:disabled:hover {
    background: var(--ink-faint);
    transform: none;
}

/* a foto real, quando existir, cobre o quadradinho colorido + ícone
   por baixo — se o arquivo não for encontrado, a tag <img> se remove
   sozinha (onerror) e o ícone volta a aparecer normalmente */
.produto-photo-img {
    position: absolute;
    inset: 0;
    z-index: 1;

    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Peças da categoria Cropped: a foto tem outro formato que as demais,
   então em vez de cortar na moldura fixa 5/9 o card se ajusta ao
   tamanho real da foto (aparece inteira, sem cortar). O "i" faz valer
   tanto pra "cropped" quanto "Cropped". */
.produto-card[data-category="cropped" i] .produto-photo {
    aspect-ratio: auto;
    display: block;
}

.produto-card[data-category="cropped" i] .produto-photo-icon {
    display: none;
}

.produto-card[data-category="cropped" i] .produto-photo-img {
    position: relative;
    inset: auto;
    display: block;
    height: auto;
    object-fit: contain;
}

/* Blusa Virginia: mesmo ajuste do Cropped (foto inteira, sem cortar),
   só que identificando pela foto — todas as fotos dela começam com
   "virginia" (virginiapreto.jpeg etc.). Assim a Blusa Helena, que está
   na mesma categoria "blusas", continua como estava. */
.produto-photo:has(img[src^="virginia"]) {
    aspect-ratio: auto;
    display: block;
}

.produto-photo:has(img[src^="virginia"]) .produto-photo-icon {
    display: none;
}

.produto-photo-img[src^="virginia"] {
    position: relative;
    inset: auto;
    display: block;
    height: auto;
    object-fit: contain;
}

.produto-info {
    padding: 22px 20px 26px;
}

.produto-cat {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
}

.produto-info h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--ink);
    line-height: 1.4;
}

.produto-color {
    display: block;
    font-size: 12.5px;
    color: var(--ink-soft);
    margin-bottom: 8px;
}

.produto-material {
    display: block;
    font-size: 10px;
    color: var(--ink-soft);
    font-style: italic;
    margin-top: -4px;
    margin-bottom: 8px;
}

.produto-price {
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 16px;
}

.produto-installment {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--gold);
    margin-top: -8px;
    margin-bottom: 16px;
}

.produto-sizes {
    margin-bottom: 16px;
}

.produto-sizes-label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 8px;
}

.produto-sizes-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.size-btn {
    min-width: 38px;
    padding: 7px 10px;

    background: var(--paper);
    color: var(--ink);
    border: 1.5px solid var(--ink-faint);
    border-radius: var(--radius-sm);

    font-family: "Poppins", sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;

    transition: 0.2s ease;
}

.size-btn:hover {
    border-color: var(--wine);
}

.size-btn.active {
    background: var(--wine);
    border-color: var(--wine);
    color: #fff;
}

/* Bolinhas de cor (seletor "colorPhotos") — ao clicar, troca a foto do card */
.produto-color-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.color-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;

    border: 2px solid rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);

    cursor: pointer;
    transition: 0.2s ease;
    padding: 0;
}

.color-dot:hover {
    transform: scale(1.1);
}

.color-dot.active {
    border-color: var(--wine);
    box-shadow: 0 0 0 2px var(--wine), inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.btn-add {
    width: 100%;

    background: var(--ink);
    color: #fff;

    border: none;
    border-radius: var(--radius-sm);

    padding: 13px;

    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
    transition: 0.3s ease;
}

.btn-add:hover {
    background: var(--wine);
    transform: translateY(-2px);
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

/* telas de computador menores / notebooks: 4 colunas em vez de 5 */
@media (max-width: 1280px) {
    .produtos-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1024px) {
    .produtos { padding: 80px 28px; }
    .produtos-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .colecao-hero { padding: 100px 24px 70px; min-height: 280px; }
    .colecao-hero-inner h1 { font-size: 34px; }
    .produtos { padding: 70px 20px; }
    .produtos-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

@media (max-width: 600px) {
    .colecao-hero { padding: 90px 18px 60px; }
    .colecao-hero-inner h1 { font-size: 28px; }
    .colecao-hero-inner p { font-size: 14.5px; }
    .colecao-produtos { padding-top: 60px; }

    .produtos { padding: 60px 16px; }
    .produtos-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }

    .produto-info { padding: 10px 8px 12px; }
    .produto-info h3 { font-size: 11.5px; margin-bottom: 4px; }
    .produto-cat { font-size: 9px; margin-bottom: 4px; }
    .produto-color { font-size: 9.5px; margin-bottom: 4px; }
    .produto-material { font-size: 10.5px; margin-bottom: 4px; }
    .produto-price { font-size: 13px; margin-bottom: 6px; }
    .produto-installment { font-size: 10.5px; font-weight: 600; margin-top: -2px; margin-bottom: 8px; }
    .btn-add { padding: 9px; font-size: 10.5px; }

    /* esconde o rótulo "Tamanho:" no mobile pra economizar uma linha
       inteira — os botões de número já deixam claro o que são */
    .produto-sizes { margin-bottom: 8px; }
    .produto-sizes-label { display: none; }
    .produto-sizes-options { gap: 4px; }
    .size-btn { min-width: 22px; padding: 4px 3px; font-size: 9.5px; border-radius: 7px; }
    .produto-color-dots { gap: 6px; }
    .color-dot { width: 18px; height: 18px; }

    .filter-tabs { gap: 8px; }
    .filter-tab { font-size: 12px; padding: 8px 14px; }
}

@media (max-width: 380px) {
    .produtos-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}