/* ─── Fonte ──────────────────────────────────────────────────── */

@font-face {
    font-family: 'MessinaSans';
    src: url('../fonts/MessinaSans_Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}


/* ─── Tokens ─────────────────────────────────────────────────── */

:root {

    /* cores */
    --white:   #ffffff;
    --black:   #1A1919;

    /* grid — colunas */
    --margin:  20px;
    --gutter:  20px;
    --cols:    10;
    --col-unit: calc((100vw - (var(--margin) * 2) - (var(--gutter) * (var(--cols) - 1))) / var(--cols));

    /* grid — rows */
    --rows:    3;
    --row-unit: calc((100vh - (var(--margin) * 2) - (var(--gutter) * (var(--rows) - 1))) / var(--rows));

    /* tipografia */
    --font:     'MessinaSans', sans-serif;
    --size-nav: 0.8125rem; /* 13px */
}


/* ─── Base ───────────────────────────────────────────────────── */

body {
    font-family: var(--font);
    color: var(--black);
    background: var(--white);
}


/* ─── Header ─────────────────────────────────────────────────── */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--row-unit);          /* 1 row */
    padding: 0 var(--margin);
    z-index: 100;
}


/* menu — topo esquerdo */
.header__nav {
    position: absolute;
    top: var(--margin);
    left: var(--margin);
    display: flex;
    align-items: center;
    gap: 40px;
}

.header__nav a {
    font-size: var(--size-nav);
    text-transform: uppercase;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
    cursor: pointer;
}

.header__nav a:hover {
    border-bottom-color: var(--black);
}


/* logo — verticalmente centrada no row, a partir da col 7 */
.header__logo {
    position: absolute;
    top: calc((var(--row-unit) - 40px) / 2); /* 40px = altura da svg */
    /* 6 colunas + 6 gutters + margem esquerda */
    left: calc(var(--margin) + (var(--col-unit) * 7) + (var(--gutter) * 7));
}


/* busca — topo direito */
.header__search {
    position: absolute;
    top: var(--margin);
    right: var(--margin);
    /* 2 colunas + 1 gutter */
    width: calc((var(--col-unit) * 2) + var(--gutter));
}

.header__search-input {
    width: 100%;
    font-size: var(--size-nav);
    text-transform: none;             /* valor digitado: normal */
    color: var(--black);
    border-bottom: 1px solid var(--black);
    padding-bottom: 5px;
    transition: opacity 0.2s ease;
}

/* placeholder: uppercase, opacity 100% */
.header__search-input::placeholder {
    color: var(--black);
    opacity: 1;
    text-transform: uppercase;
}

/* ao focar: placeholder muda pra lowercase + opacity 50% */
.header__search-input:focus::placeholder {
    opacity: 0.5;
    text-transform: none;
}



/* header — transição de visibilidade */
.header {
    transition: opacity 0.3s ease;
    /* a faixa do header não bloqueia hover/clique do conteúdo
       que passa por baixo; só os filhos interativos capturam */
    pointer-events: none;
}

.header__nav,
.header__logo,
.header__search {
    pointer-events: auto;
}

.header.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* escondido, nem os filhos capturam (senão o auto deles venceria) */
.header.is-hidden .header__nav,
.header.is-hidden .header__logo,
.header.is-hidden .header__search {
    pointer-events: none;
}

/* cat-bar — fade igual ao header quando o footer entra
   (a transition de opacity já está no .cat-bar base) */
.cat-bar.is-hidden {
    opacity: 0;
}

.cat-bar.is-hidden .cat-bar__left,
.cat-bar.is-hidden .cat-bar__right {
    pointer-events: none;
}

/* ─── Glass layer ────────────────────────────────────────────── */

.glass-layer {
    position: fixed;
    inset: 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    pointer-events: none;
    z-index: 90;                       /* abaixo do header (100) */
    transition: opacity 0.25s ease;
}

.glass-layer.is-visible {
    opacity: 1;
    pointer-events: none;              /* nunca bloqueia cliques */
}


/* ─── Nav item + submenu ─────────────────────────────────────── */

.nav-item {
    position: relative;
}

/* submenu — oculto por padrão */
.nav-item__sub {
    position: absolute;
    top: calc(100% + 20px);           /* 20px abaixo do item mãe */
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;          /* border-bottom no width do texto */
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* submenu — mesmo estilo do menu principal */
.nav-item__sub a {
    font-size: var(--size-nav);
    text-transform: uppercase;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
    white-space: nowrap;
}

.nav-item__sub a:hover {
    border-bottom-color: var(--black);
}

/* submenu — aparece via classe .is-open (controlada por JS com delay) */
.nav-item.is-open .nav-item__sub {
    opacity: 1;
    pointer-events: auto;
}


/* ─── Produtos ───────────────────────────────────────────────── */

.produtos {
    padding-top: calc(var(--row-unit) + var(--gutter));   /* header + 1 gutter */
    padding-left: var(--margin);
    padding-right: var(--margin);
}

.produtos__grid {
    display: grid;
    /* 5 itens por linha, cada um com 2 colunas */
    grid-template-columns: repeat(5, calc((var(--col-unit) * 2) + var(--gutter)));
    column-gap: var(--gutter);
    row-gap: 40px;
    justify-content: start;           /* alinha à esquerda se n for múltiplo de 5 */
}

/* item */
.produto {
    display: block;
    cursor: pointer;
}

.produto__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    transition: opacity 0.25s ease;
}

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

.produto:hover .produto__img {
    opacity: 0.5;
}

/* textos */
.produto__nome {
    margin-top: 10px;
    font-size: 1.21875rem;            /* 19.5px */
    text-transform: uppercase;
    color: var(--black);
}

.produto__designer {
    margin-top: 4px;
    font-size: var(--size-nav);       /* 13px */
    text-transform: uppercase;
    color: var(--black);
}


/* ─── Footer ─────────────────────────────────────────────────── */

.produtos ~ .footer {
    margin-top: var(--row-unit);
}

.footer {
    width: 100vw;
    height: 100vh;
    background: var(--black);
    color: var(--white);
    position: relative;
    padding: var(--margin);
}

/* menu — alinhado ao bottom do 1 row */
.footer__nav {
    position: absolute;
    top: var(--row-unit);             /* bottom exato do 1 row */
    transform: translateY(-100%);     /* sobe o bloco inteiro pra alinhar pelo bottom */
    left: calc(var(--margin) + (var(--col-unit) * 7) + (var(--gutter) * 7));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.footer__nav a {
    font-size: var(--size-nav);
    text-transform: uppercase;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 5px;
    transition: opacity 0.2s ease;
}

.footer__nav a:hover {
    opacity: 0.5;
}

/* bolinha whatsapp — fica fora do hover opacity */
.footer__wpp-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #555;                 /* offline: neutro */
    flex-shrink: 0;
}

/* online (dentro do horário definido nas Opções): verde pulsando */
.footer__wpp-dot.is-on {
    background: #00FF15;
    animation: pulse 2s ease-in-out infinite;
}

/* a bolinha não herda o opacity do hover do pai */
.footer__nav a:hover .footer__wpp-dot {
    opacity: 1;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* bloco de endereço — alinhado verticalmente no 3 row */
.footer__info {
    position: absolute;
    bottom: calc(var(--row-unit) - var(--margin));
    left: var(--margin);
    /* 5 colunas + 4 gutters */
    width: calc((var(--col-unit) * 5) + (var(--gutter) * 4));
}

.footer__info-row {
    display: flex;
    justify-content: space-between;
    font-size: 2.4375rem;             /* 39px */
    text-transform: uppercase;
    line-height: 1.1;
}

/* crédito — canto inferior esquerdo */
.footer__credit {
    position: absolute;
    bottom: var(--margin);
    left: var(--margin);
    font-size: var(--size-nav);
    color: var(--white);
    transition: opacity 0.2s ease;
}

.footer__credit:hover {
    opacity: 0.5;
}

/* elemento visual — canto inferior direito */
.footer__mark {
    position: absolute;
    bottom: var(--margin);
    right: var(--margin);
}


/* glass layer exclusivo da cat-bar — mesmo style do header */
.glass-layer--cat {
    position: fixed;
    inset: 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    pointer-events: none;
    z-index: 70;                       /* padrão: abaixo do glass do header (90) */
    transition: opacity 0.25s ease;
}

/* glass-cat quando cat-bar está ativa — sobe acima do header */
.cat-bar.is-active ~ .footer,
.glass-layer--cat.is-active {
    z-index: 110;
}

/* ─── Barra de categoria (produtos) ─────────────────────────── */

.cat-bar {
    position: fixed;
    transition: opacity 0.3s ease;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 var(--margin);
    padding-top: 20px;
    padding-bottom: var(--margin);
    z-index: 80;                       /* padrão: abaixo do glass do header (90) */
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    pointer-events: none;              /* só os filhos são clicáveis */
}

/* shade glass da cat-bar — MESMO efeito progressivo do .produto-info__glass:
   véu branco sólido na base → transparente no topo, com blur que cresce
   de cima (nítido) pra baixo (forte). Camadas empilhadas com máscara em faixa.
   elemento próprio ABAIXO do vidrão (110): quando o glass-cat entra,
   o blur dele absorve a faixa — nenhuma transição necessária */
.cat-bar-shade {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    z-index: 70;                       /* acima do conteúdo, abaixo da barra (80) e do vidrão (110) */
    pointer-events: none;
    transition: opacity 0.3s ease;     /* mesmo fade da barra no footer */
    /* véu branco: sólido na base → transparente no topo */
    background: linear-gradient(to top, #fff 0%, rgba(255,255,255,0.85) 35%, rgba(255,255,255,0.4) 65%, transparent 100%);
}

.cat-bar-shade::before,
.cat-bar-shade::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* blur fraco — cobre a metade de cima, some no topo */
.cat-bar-shade::before {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    mask-image: linear-gradient(to top, black 40%, transparent 75%);
    -webkit-mask-image: linear-gradient(to top, black 40%, transparent 75%);
}

/* blur forte — concentrado na base */
.cat-bar-shade::after {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    mask-image: linear-gradient(to top, black 0%, black 20%, transparent 55%);
    -webkit-mask-image: linear-gradient(to top, black 0%, black 20%, transparent 55%);
}

/* some junto com a barra na chegada do footer (shade é irmão anterior) */
.cat-bar-shade:has(~ .cat-bar.is-hidden) {
    opacity: 0;
}


/* — lado esquerdo: categoria ativa + lista de categorias — */

.cat-bar__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    pointer-events: auto;
    cursor: pointer;
}

/* categorias inativas (acima da ativa) */
.cat-bar__other {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.cat-bar.is-open .cat-bar__other {
    display: flex;
}

.cat-bar__other a {
    font-size: 1.21875rem;            /* 19.5px */
    line-height: 1.2;                 /* espaço p/ acentos e descendentes */
    text-transform: uppercase;
    color: var(--black);
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.cat-bar__other a:hover {
    opacity: 1;
}

/* categoria ativa — sempre visível */
.cat-bar__current {
    cursor: pointer;
    font-size: 1.21875rem;            /* 19.5px */
    line-height: 1.2;                 /* espaço p/ acentos e descendentes */
    text-transform: uppercase;
    color: var(--black);
    font-weight: 400;
}


/* — lado direito: ver tudo + subcategorias — */

.cat-bar__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: auto;
    cursor: pointer;
}

/* subcategorias — ocultas no estado fechado */
.cat-bar__subs {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.cat-bar.is-open .cat-bar__subs {
    display: flex;
}

.cat-bar__subs a {
    font-size: var(--size-nav);       /* 13px */
    text-transform: uppercase;
    color: var(--black);
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.cat-bar__subs a:hover,
.cat-bar__subs a.is-current {
    border-bottom-color: var(--black);
}

/* ver tudo — sempre visível, mesmo estilo das subs */
.cat-bar__vertudo {
    font-size: var(--size-nav);       /* 13px */
    text-transform: uppercase;
    color: var(--black);
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

/* ver tudo ativo = current */
.cat-bar__vertudo.is-current,
.cat-bar__vertudo:hover {
    border-bottom-color: var(--black);
}


/* cat-bar ativa — sobe acima do glass do header */
.cat-bar.is-active {
    z-index: 200;
}


/* ─── Designers ──────────────────────────────────────────────── */

.designers {
    position: relative;
    padding-top: calc(var(--row-unit) + var(--gutter));
    padding-left: var(--margin);
    padding-right: var(--margin);
    padding-bottom: var(--row-unit);
}

/* lista — só ela scrolla */
.designers__list {
    display: flex;
    flex-direction: column;
    gap: 60px;
    width: calc((var(--col-unit) * 6) + (var(--gutter) * 5));  /* 6 colunas */
}

.designers__list .designer-item:last-child {
    margin-bottom: 0;
}

/* item */
.designer-item {
    font-size: 3.25rem;               /* 52px */
    text-transform: uppercase;
    color: var(--black);
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s ease;
    line-height: 1;
}

.designer-item.is-active {
    opacity: 1;
}


/* imagem — fixed, canto inferior direito a partir da col 7 */
.designer-img {
    position: fixed;
    bottom: var(--margin);
    left: calc(var(--margin) + (var(--col-unit) * 7) + (var(--gutter) * 7));
    width: 232px; /* mesma width da logo interna (svg 232x40) */
    aspect-ratio: 1 / 1;
    pointer-events: none;
    z-index: 50;
}

.designer-img img,
.designer-img svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease;
}

.designer-img img.is-active,
.designer-img svg.is-active {
    opacity: 1;
}


/* menu alfabético — fixed, lateral direita, rotacionado */
.alpha-nav {
    position: fixed;
    right: var(--margin);
    top: calc(var(--row-unit) + var(--gutter));  /* igual ao padding-top da lista */
    writing-mode: vertical-lr;        /* letras viradas, de cima pra baixo */
    display: flex;
    gap: 5px;
    z-index: 50;
    pointer-events: auto;
}

.alpha-nav a {
    font-size: var(--size-nav);       /* 13px */
    text-transform: uppercase;
    color: var(--black);
    opacity: 0.5;
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.alpha-nav a:hover {
    opacity: 1;
}

.alpha-nav a.is-active {
    opacity: 1;
}


/* ─── Produto (single) ───────────────────────────────────────── */

.produto-single ~ .footer {
    margin-top: var(--row-unit);
}

.produto-single {
    padding-top: calc(var(--row-unit) + var(--gutter));
    padding-left: var(--margin);
    padding-right: var(--margin);
    display: grid;
    /* 3 col info | gutter | 5 col fotos | gutter | 2 col direita */
    grid-template-columns:
        calc((var(--col-unit) * 3) + (var(--gutter) * 2))
        var(--gutter)
        calc((var(--col-unit) * 5) + (var(--gutter) * 4))
        var(--gutter)
        1fr;
    grid-template-areas: "info . fotos . links";
    align-items: start;
}


/* — bloco esquerdo — */

.produto-info {
    grid-area: info;
    position: sticky;
    top: calc(var(--row-unit) + var(--gutter));
}

.produto-info__nome {
    font-size: 2.4375rem;             /* 39px */
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--black);
}

.produto-info__designer {
    margin-top: 20px;
    font-size: 1.21875rem;            /* 19.5px */
    text-transform: uppercase;
    color: var(--black);
}

.produto-info__ano {
    margin-top: 20px;
    font-size: var(--size-nav);       /* 13px */
    color: var(--black);
}

/* descrição */
.produto-info__head {
    margin-bottom: 40px;
}
.produto-info__desc-grupo {
    margin-bottom: 20px;
}
.produto-info__desc-wrap {
    position: relative;
}

.produto-info__desc {
    font-size: var(--size-nav);       /* 13px */
    line-height: 1.5;
    color: var(--black);
    overflow: hidden;
    max-height: calc(1.5 * 0.8125rem * 4); /* 4 linhas */
    transition: max-height 0.4s ease;
}

.produto-info__desc.is-open {
    max-height: 600px;
}

/* gradiente que oculta o texto */
.produto-info__desc-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, transparent, #fff);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.produto-info__desc.is-open + .produto-info__desc-fade {
    opacity: 0;
}

/* botão +/- */
.produto-info__toggle {
    margin-top: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
}


/* accordions */
.produto-accordions {
    margin-top: 0;
}

.accordion {
    border-top: 1px solid var(--black);
}

.accordion:last-child {
    border-bottom: 1px solid var(--black);
}

.accordion__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
    font-size: var(--size-nav);
    text-transform: uppercase;
    color: var(--black);
}

.accordion__body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease, padding 0.35s ease;
    font-size: var(--size-nav);
    line-height: 1.6;
    color: var(--black);
}

.accordion.is-open .accordion__body {
    max-height: 400px;
    padding-bottom: 20px;
}


/* — fotos — */

.produto-fotos {
    grid-area: fotos;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.produto-fotos__item {
    width: 100%;
    overflow: hidden;
}

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

.produto-fotos__item--34  { aspect-ratio: 3 / 4; }
.produto-fotos__item--43  { aspect-ratio: 4 / 3; }
.produto-fotos__item--11  { aspect-ratio: 1 / 1; }


/* — bloco direito (links fixos) — */

.produto-links {
    grid-area: links;
    position: sticky;
    bottom: var(--margin);
    align-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.produto-links a {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--size-nav);
    text-transform: uppercase;
    color: var(--black);
    transition: opacity 0.2s ease;
}

.produto-links a:hover {
    opacity: 0.5;
}


/* ─── Designer (single) ──────────────────────────────────────── */

.designer-single ~ .footer {
    margin-top: var(--row-unit);
}

.designer-single {
    padding-left: var(--margin);
    padding-right: var(--margin);
}

/* bloco bio — 1 row do topo, ocupa 1 row de altura */
.designer-bio {
    padding-top: calc(var(--row-unit) + var(--gutter));
    min-height: calc(var(--row-unit) * 2 + var(--gutter)); /* pelo menos até row 2 (grid na row 3); cresce se a bio passar */
    position: relative;
    display: grid;
    grid-template-columns:
        calc((var(--col-unit) * 5) + (var(--gutter) * 4))
        1fr;
    align-items: start;
}

.designer-bio__text {
    /* 5 colunas */
}

.designer-bio__nome {
    font-size: 2.4375rem;             /* 39px */
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--black);
}

.designer-bio__desc-wrap {
    margin-top: 40px;
    position: relative;
}

.designer-bio__desc {
    font-size: var(--size-nav);       /* 13px */
    line-height: 1.5;
    color: var(--black);
    overflow: hidden;
    max-height: calc(1.5 * 0.8125rem * 4); /* 4 linhas (igual desc de produto) */
    transition: max-height 0.4s ease;
}

.designer-bio__desc.is-open {
    max-height: 800px;
}

.designer-bio__desc-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, transparent, #fff);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.designer-bio__desc.is-open + .designer-bio__desc-fade {
    opacity: 0;
}

.designer-bio__toggle {
    margin-top: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* foto — col 8, 2 colunas, 1:1, alinhada ao topo do bloco */
.designer-bio__img {
    position: absolute;
    top: calc(var(--row-unit) + var(--gutter));
    /* pai já tem padding-left: margin, então não soma margem novamente */
    left: calc((var(--col-unit) * 7) + (var(--gutter) * 7));
    width: 232px; /* mesma width da logo interna (svg 232x40) */
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.designer-bio__img img,
.designer-bio__img svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* grid produtos — começa em 50% do 3º row */
/* GAP do grid no designer (desktop):
   1) só nome (is-bare: sem bio E sem foto) → grid começa no topo da row 3
   2) tem bio colapsada OU tem foto         → grid começa no topo da row 3
   3) bio descolapsada                       → gap = 120px */

/* padrão = tem bio ou foto: bio/bloco ocupa até row 2, grid no topo da row 3 */
.designer-produtos {
    padding-top: 0;
}

/* SÓ NOME (is-bare): bloco até row 2, grid começa no topo da row 3 */
.designer-single.is-bare .designer-produtos {
    padding-top: 0;
}

/* bio DESCOLAPSADA: solta a altura (cresce, pode invadir a row 3) e gap = 60px */
.designer-single:has(.designer-bio__desc.is-open) .designer-bio {
    height: auto;
}
.designer-single:has(.designer-bio__desc.is-open) .designer-produtos {
    padding-top: 60px;
}

.designer-produtos .produtos__grid {
    /* herda o grid de produtos */
}

/* ─── Home ───────────────────────────────────────────────────── */

/* logo — maior, na margem esquerda, base no fim do 2º row.
   continua dentro do header fixo, então some junto com ele no footer */
.home .header__logo {
    left: var(--margin);
    top: calc(var(--margin) + (var(--row-unit) * 2) + var(--gutter) - 83px);
}

.home .header__logo svg {
    height: 83px;
    width: auto;
}


/* hero — track dá a distância de scroll (altura via JS),
   o .hero fica pinado ocupando 1 viewport */
.hero-track {
    position: relative;
}

.hero {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

/* cada slide é uma "folha" transparente de viewport inteiro:
   só a imagem cobre a anterior ao subir, sem faixa branca */
.hero__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    /* a folha em si não captura nada — só imagem + título */
    pointer-events: none;
}

/* slides seguintes começam abaixo da tela (JS assume no scroll) */
.hero__slide:not(:first-child) {
    transform: translateY(100%);
}

/* imagem: 8 colunas de width, centralizada, proporção do viewport.
   é o <a> do slide: só ela + título são clicáveis, sem efeito hover */
.hero__media {
    position: relative;
    display: block;
    width: calc((var(--col-unit) * 8) + (var(--gutter) * 7));
    pointer-events: auto;
    cursor: pointer;
}

.hero__media img {
    display: block;
    width: 100%;
    height: var(--hero-img-h, 70vh); /* valor real definido via JS */
    object-fit: cover;
}

/* título — abaixo da foto, gap 20px, mesmo corpo do nome de produto */
.hero__title {
    position: absolute;
    top: calc(100% + 20px);
    left: 0;
    font-size: 1.21875rem;            /* 19.5px */
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--black);
}


/* coleções — 2×2, blocos de 4 colunas alinhados às bordas da hero */
.home-colecoes {
    margin-top: var(--row-unit);      /* mesmo respiro do footer */
    /* alinha com a hero: começa na col 2 */
    padding-left: calc(var(--margin) + var(--col-unit) + var(--gutter));
    display: grid;
    grid-template-columns: repeat(2, calc((var(--col-unit) * 4) + (var(--gutter) * 3)));
    column-gap: var(--gutter);
    row-gap: 40px;
}

.colecao {
    display: block;
    cursor: pointer;
}

.colecao__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    transition: opacity 0.25s ease;   /* hover igual produtos */
}

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

.colecao:hover .colecao__img {
    opacity: 0.5;
}

.colecao__titulo {
    margin-top: 10px;
    font-size: 1.21875rem;            /* mesmo style do título da hero */
    text-transform: uppercase;
    color: var(--black);
}

/* respiro até o footer — igual às outras páginas */
.home-colecoes ~ .footer {
    margin-top: var(--row-unit);
}

/* ─── Preloader ──────────────────────────────────────────────── */

.preloader {
    position: fixed;
    inset: 0;
    background: var(--white);
    z-index: 200;                     /* acima do header (100) */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
}

/* símbolo — 40px, pulsando (esmaece e volta) */
.preloader svg {
    height: 40px;
    width: auto;
    animation: preloader-pulse 1.2s ease-in-out infinite;
}

@keyframes preloader-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.15; }
}

/* saída — overlay esmaece e libera a página */
.preloader.is-done {
    opacity: 0;
    pointer-events: none;
}


/* ─── Glass aberto = página travada ──────────────────────────── */

/* glass visível captura cliques: bloqueia interação com o conteúdo
   atrás e, de quebra, clicar no vidrão fecha (handlers de clique-fora) */
.glass-layer.is-visible,
.glass-layer--cat.is-visible,
.glass-layer--cat.is-active {
    pointer-events: auto;
}

/* scroll travado enquanto houver glass aberto (toggle via JS) */
body.no-scroll {
    overflow: hidden;
}

/* ─── Sobre — A Casiere ──────────────────────────────────────── */

/* one page: sem scroll, sem footer */
.sobre {
    height: 100vh;
    overflow: hidden;
}

/* logo — mesmo tamanho da home (83px), colada nas margens
   inferior e direita */
.sobre .header__logo {
    left: auto;
    right: var(--margin);
    top: calc(100vh - var(--margin) - 83px);
}

.sobre .header__logo svg {
    height: 83px;
    width: auto;
}

/* nav — marca a página atual (underline fixo, mesmo traço do hover) */
.header__nav a.is-current-page {
    border-bottom-color: var(--black);
}

/* texto institucional — 6 colunas (2 blocos de 3), texto fluindo
   entre as colunas; base do bloco no fim do 2º row */
.sobre-texto {
    position: fixed;
    left: var(--margin);
    top: calc(var(--row-unit) + var(--gutter)); /* mesmo início de conteúdo das demais páginas */
    width: calc((var(--col-unit) * 6) + (var(--gutter) * 5));
    columns: 2;
    column-gap: var(--gutter);
    column-fill: balance;             /* colunas iguais; sobra cai na 1ª */
    font-size: var(--size-nav);       /* 13px — mesmo style da desc de produto */
    line-height: 1.5;
    text-align: justify;
    color: var(--black);
}

/* respiro entre parágrafos por baixo — coerente com o bloco
   ancorado pelo topo: a margem morre no pé da coluna, inofensiva */
.sobre-texto p:not(:last-child) {
    margin-bottom: 1em;
}

/* quebra explícita por parágrafo: 3 na 1ª coluna, 2 na 2ª */
.sobre-texto p:nth-of-type(4) {
    break-before: column;
}

/* ─── Showroom ───────────────────────────────────────────────── */

.showroom {
    padding-top: calc(var(--row-unit) + var(--gutter)); /* início padrão de conteúdo */
    padding-left: calc(var(--margin) + var(--col-unit) + var(--gutter)); /* col 2 */
    display: flex;
    column-gap: var(--gutter);        /* info termina na col 4, foto abre na col 5 */
    align-items: flex-start;
}

/* info — 3 colunas */
.showroom__info {
    width: calc((var(--col-unit) * 3) + (var(--gutter) * 2));
}

/* títulos — mesmo spec do accordion (13px / 0.04em / caps) */
.showroom__titulo {
    font-size: var(--size-nav);
    text-transform: uppercase;
    font-weight: normal;
    color: var(--black);
    margin-bottom: 20px;
}

/* endereço — link pro maps; cada linha com o border-bottom
   milimétrico padrão da casa (1px + 2px), na largura do texto */
.showroom__endereco {
    display: block;
    font-size: var(--size-nav);
    color: var(--black);
}

.showroom__endereco span {
    display: table;                   /* traço na largura exata do texto */
    padding-bottom: 2px;
    border-bottom: 1px solid var(--black);
}

.showroom__endereco span + span {
    margin-top: 8px;
}

/* divisória entre endereço e horários */
.showroom__linha {
    border: 0;
    border-top: 1px solid var(--black);
    margin: 40px 0;
}

.showroom__horarios-titulo {
    font-size: var(--size-nav);
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 20px;
}

/* tabelinha — 2 colunas alinhadas */
.showroom__horarios {
    font-size: var(--size-nav);
    line-height: 1.5;
    color: var(--black);
}

.showroom__horario-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* foto — 5 colunas na margem direita */
.showroom__foto {
    width: calc((var(--col-unit) * 5) + (var(--gutter) * 4));
}

.showroom__foto img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* respiro até o footer — igual às outras páginas */
.showroom ~ .footer {
    margin-top: var(--row-unit);
}

/* ─── Contato ────────────────────────────────────────────────── */

.contato {
    padding-top: calc(var(--row-unit) + var(--gutter)); /* início padrão de conteúdo */
    padding-left: calc(var(--margin) + var(--col-unit) + var(--gutter)); /* col 2 */
    display: flex;
    column-gap: var(--gutter);        /* form fecha na col 7, info abre na col 8 */
    align-items: flex-start;
}

/* form — cols 2–7 */
.contato__form {
    width: calc((var(--col-unit) * 6) + (var(--gutter) * 5));
}

/* inputs em 2 colunas de 3 cols, 40px de respiro vertical */
.contato__campos {
    display: grid;
    grid-template-columns: repeat(2, calc((var(--col-unit) * 3) + (var(--gutter) * 2)));
    column-gap: var(--gutter);
    row-gap: 40px;
}

/* input — mesmo style e comportamento da busca */
.contato__input {
    width: 100%;
    font-size: var(--size-nav);
    text-transform: none;             /* valor digitado: normal */
    color: var(--black);
    border-bottom: 1px solid var(--black);
    padding-bottom: 5px;
    cursor: text;
}

.contato__input::placeholder {
    color: var(--black);
    opacity: 1;
    text-transform: uppercase;
}

.contato__input:focus::placeholder {
    opacity: 0;                       /* no foco some de vez, sem apagadinho */
}

/* textarea — 3 cols, só a linha de baixo, igual aos campos */
.contato__mensagem {
    display: block;
    margin-top: 40px;
    width: calc((var(--col-unit) * 3) + (var(--gutter) * 2));
    height: calc(var(--row-unit) * 0.5); /* 50% de 1 row */
    resize: none;
    border: 0;
    border-bottom: 1px solid var(--black);
    padding-bottom: 5px;
    background: none;
    font-family: inherit;
    font-size: var(--size-nav);
    line-height: 1.5;
    color: var(--black);
}

/* enviar — à direita da última coluna do form, 40px abaixo */
.contato__enviar {
    display: block;
    margin: 40px 0 0 auto;
    padding: 10px;                    /* igual nos 4 lados */
    background: var(--black);
    color: var(--white);
    font-family: inherit;
    font-size: var(--size-nav);
    text-transform: uppercase;
    line-height: 1;                   /* posicionamento milimétrico do texto */
    border: 0;
    cursor: pointer;
    transition: opacity 0.25s ease;
}

.contato__enviar:hover {
    opacity: 0.5;
}

/* info — 2 colunas (cols 8–9), style do showroom */
.contato__info {
    width: calc((var(--col-unit) * 2) + var(--gutter));
    font-size: var(--size-nav);
    color: var(--black);
}

.contato__info-bloco + .contato__info-bloco {
    margin-top: 40px;
}

.contato__info-titulo {
    text-transform: uppercase;
    margin-bottom: 20px;
}

.contato__info-link {
    display: table;                   /* traço na largura exata do texto */
    padding-bottom: 2px;
    border-bottom: 1px solid var(--black);
    color: var(--black);
}

/* respiro até o footer — igual às outras páginas */
.contato ~ .footer {
    margin-top: var(--row-unit);
}


/* designer/busca SEM bio nem foto: grid começa logo após o título,
   com 1 col de gap (não reserva o espaço da 3ª row) */
.designer-single.is-bare .designer-bio {
    display: block;
    padding-top: calc(var(--row-unit) + var(--gutter)); /* começa no topo da row 2 */
    min-height: calc(var(--row-unit) * 2 + var(--gutter)); /* ocupa até row 2 → grid na row 3 */
}

/* alpha-nav: letras sem designer = MESMO visual do front (.alpha-nav a),
   só não clicáveis */
.alpha-nav a.is-empty {
    pointer-events: none;
    cursor: default;
}

/* texto "nenhum resultado" — mesmo style da desc (13px, line-height 1.5) */
.produtos__vazio,
.designers__vazio,
.busca__vazio {
    font-size: var(--size-nav);
    line-height: 1.5;
    color: var(--black);
}