:root {
  --color-black: #050505;
  --color-dark: #0d0d0d;
  --color-gray-950: #080808;
  --color-gray-900: #111111;
  --color-gray-800: #1a1a1a;
  --color-gray-700: #2a2a2a;
  --color-gray-500: #6e6e6e;
  --color-gray-300: #b8b8b8;
  --color-gray-200: #d9d9d9;
  --color-gray-100: #f4f4f4;
  --color-white: #ffffff;
  --color-gold: #b8a77a;

  /*
     Verde escuro da WISCRAL — Fase 10.5.19.
     A especificacao do Guilherme pede "verde escuro como acao e
     dourado apenas como detalhe". O dourado ja' existia; este e' novo.
     Escuro o bastante para segurar texto branco com folga (contraste
     ~11:1), e dessaturado para nao brigar com o dourado ao lado.
  */
  --color-green-deep: #1e3a2b;
  --color-green-deep-hover: #162c20;

  --font-title: "Archivo", Arial, Helvetica, sans-serif;
  --font-body: "Inter", Arial, Helvetica, sans-serif;

  --container: 1480px;
  --transition: 0.25s ease;
  --header-height: 88px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font-family: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* Header */

/* Header */

.site-header {
  width: 100%;
  position: fixed;
  top: 18px;
  left: 0;
  z-index: 50;
  padding: 0 16px;
  background: transparent;
  pointer-events: none;
}

.header-shell {
  width: 100%;
  max-width: 1790px;
  margin: 0 auto;
  min-height: 78px;
  padding: 0 36px;
  display: grid;
  /*
     CENTRO DE VERDADE — 02/09/2026

     Era "170px 1fr 420px". A coluna do meio ficava centralizada entre
     duas colunas de tamanhos MUITO diferentes: 170 de um lado, 420 do
     outro. O menu era centralizado dentro da propria coluna, e a
     coluna nao estava no centro da barra -- por isso ele parecia
     empurrado para a esquerda.

     Com sete itens ninguem reparava, porque o menu ocupava quase toda
     a largura. Com tres, o desvio de 125px ficou obvio.

     "1fr auto 1fr" resolve: as laterais dividem o que sobra em partes
     iguais e o miolo fica no eixo da barra, independente do tamanho do
     logo ou da quantidade de icones a' direita.
  */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;

  background: rgba(8, 8, 8, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32);

  pointer-events: auto;
  transition:
    min-height 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease,
    backdrop-filter 0.25s ease;
}

.site-header.is-scrolled .header-shell {
  min-height: 70px;
  background: rgba(8, 8, 8, 0.76);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 22px 65px rgba(0, 0, 0, 0.42);
}

.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-title);
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: 0.34em;
  font-weight: 800;
}

.logo span {
  display: block;
  margin-top: 7px;
  font-size: 0.46rem;
  letter-spacing: 0.42em;
  color: var(--color-gray-300);
  white-space: nowrap;
}

.main-nav {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-family: var(--font-title);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.main-nav a {
  color: var(--color-gray-200);
  transition: var(--transition);
  white-space: nowrap;
}

.main-nav a:hover {
  color: var(--color-white);
}

.main-nav small {
  margin-left: 5px;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-size: 0.48rem;
  letter-spacing: 0.12em;
  color: var(--color-gray-200);
}

.header-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.search-form {
  width: clamp(190px, 17vw, 280px);
  height: 42px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
  display: flex;
  align-items: center;
}

.search-form input {
  width: 100%;
  height: 100%;
  border: none;
  padding: 0 18px;
  outline: none;
  background: transparent;
  color: var(--color-black);
  font-size: 0.86rem;
}

.search-form button {
  width: 48px;
  height: 100%;
  border: none;
  cursor: pointer;
  background: transparent;
  font-size: 1rem;
}

.header-link {
  font-family: var(--font-title);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-gray-200);
  transition: var(--transition);
  white-space: nowrap;
}

.header-link:hover {
  color: var(--color-white);
}

.header-logo {
  width: 190px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  border: none;
  overflow: visible;
}

.header-logo-image {
  width: 170px;
  max-width: none;
  height: auto;
  display: block;
  object-fit: contain;
  background: transparent;
}

/* Footer */

.site-footer {
  background: #030303;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 64px 48px;
}

.footer-container {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  /* 4 colunas desde a Fase 10.7.12, quando entrou a coluna "Ajuda" */
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}

.site-footer h2 {
  font-family: var(--font-title);
  letter-spacing: 0.35em;
  margin-bottom: 14px;
}

.site-footer h3 {
  margin-bottom: 18px;
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
}

.site-footer p,
.site-footer a {
  display: block;
  margin-bottom: 8px;
  color: var(--color-gray-300);
  font-size: 0.9rem;
  line-height: 1.7;
}

.footer-manifest {
  max-width: 460px;
  margin-top: 14px;
  color: var(--color-gray-500) !important;
}

.site-footer a:hover {
  color: var(--color-white);
}

/* Responsivo */

@media (max-width: 1250px) {
  .site-header {
    padding: 0 12px;
  }

  .header-shell {
    max-width: 100%;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    padding: 0 24px;
  }

  .main-nav {
    gap: 16px;
    font-size: 0.64rem;
  }

  .search-form {
    width: 220px;
  }
}

@media (max-width: 1180px) {
  .nav-about {
    display: none;
  }

  .header-shell {
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
  }

  .main-nav {
    gap: 12px;
    font-size: 0.6rem;
    letter-spacing: 0.13em;
  }

  .header-actions {
    gap: 12px;
  }

  .header-link {
    font-size: 0.64rem;
  }
}


@media (max-width: 1024px) {
  .site-header {
    top: 14px;
    padding: 0 10px;
  }

  .header-shell {
    grid-template-columns: 1fr auto;
    border-radius: 28px;
  }

  .main-nav {
    display: none;
  }

  .header-actions {
    gap: 14px;
  }
}

@media (max-width: 768px) {
  .site-header {
    top: 10px;
    padding: 0 8px;
  }

  .header-shell {
    min-height: auto;
    padding: 18px 18px;
    grid-template-columns: 1fr;
    border-radius: 24px;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .search-form {
    width: 100%;
    order: 3;
  }

  .footer-container {
    grid-template-columns: 1fr;
  }
}

.header-cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cart-count-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}

/* Ajuste premium do footer */
.site-footer,
.footer,
.main-footer {
  padding-top: 44px;
  padding-bottom: 44px;
}

.site-footer > div,
.footer > div,
.main-footer > div {
  align-items: flex-start;
}

.site-footer h2,
.site-footer h3,
.site-footer strong,
.footer h2,
.footer h3,
.footer strong,
.main-footer h2,
.main-footer h3,
.main-footer strong {
  letter-spacing: 0.24em;
}

.site-footer p,
.footer p,
.main-footer p {
  max-width: 360px;
  line-height: 1.65;
}

.site-footer a,
.footer a,
.main-footer a {
  line-height: 1.8;
}

.site-footer,
.footer,
.main-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer nav,
.footer nav,
.main-footer nav {
  display: grid;
  gap: 8px;
}

/* Fase 10.0.4 — footer compacto em telas menores */
@media (max-width: 720px) {
  .site-footer,
  .footer,
  .main-footer {
    min-height: auto;
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .site-footer > div,
  .footer > div,
  .main-footer > div {
    gap: 28px;
  }

  .site-footer p,
  .footer p,
  .main-footer p {
    max-width: 100%;
    line-height: 1.55;
  }

  .site-footer nav,
  .footer nav,
  .main-footer nav {
    gap: 6px;
  }

  .site-footer a,
  .footer a,
  .main-footer a {
    line-height: 1.55;
  }
}

/* Fase 10.0.4 — evita footer gigante em páginas curtas */
.cart-page + .site-footer,
.cart-page + .footer,
.cart-page + .main-footer,
.checkout-page + .site-footer,
.checkout-page + .footer,
.checkout-page + .main-footer {
  min-height: auto;
}

/* Fase 10.0.4.1 — menu mobile */
.mobile-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-direction: column;
}

.mobile-menu-toggle span {
  width: 17px;
  height: 2px;
  display: block;
  border-radius: 999px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.mobile-menu-panel {
  display: none;
}

@media (max-width: 1024px) {
  .mobile-menu-toggle {
    display: inline-flex;
  }

  .header-shell {
    grid-template-columns: auto 1fr;
  }

  .header-logo {
    width: 150px;
  }

  .header-logo-image {
    width: 145px;
  }

  .header-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .header-shell {
    min-height: 82px;
    padding: 16px 18px;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .header-actions {
    width: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .header-icon-link {
    width: 40px;
    height: 40px;
  }

  .header-cart-link {
    min-height: 40px;
    padding: 0 4px;
    font-size: 0.95rem;
  }

  .mobile-menu-panel {
    position: fixed;
    inset: 104px 10px auto 10px;
    z-index: 49;
    display: block;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  body.mobile-menu-open .mobile-menu-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .mobile-menu-panel-inner {
    padding: 22px;
    border-radius: 28px;
    background: rgba(5, 5, 5, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
  }

  .mobile-menu-header {
    padding-bottom: 16px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .mobile-menu-header span {
    font-family: var(--font-title);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gray-300);
  }

  .mobile-menu-header strong {
    font-family: var(--font-title);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.3em;
  }

  .mobile-nav {
    display: grid;
    gap: 8px;
  }

  .mobile-nav a {
    min-height: 46px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
    color: #fff;
    font-family: var(--font-title);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .mobile-nav a::after {
    content: "→";
    opacity: 0.65;
  }

  .mobile-nav small {
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    font-size: 0.46rem;
    letter-spacing: 0.1em;
  }

  .mobile-menu-actions {
    margin-top: 16px;
    padding-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .mobile-menu-actions a {
    min-height: 44px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font-family: var(--font-title);
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  body.mobile-menu-open .mobile-menu-toggle span:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }

  body.mobile-menu-open .mobile-menu-toggle span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }
}

/* Ajuste fino — header mobile não cortar carrinho */
@media (max-width: 720px) {
  .site-header {
    padding: 0 10px;
  }

  .header-shell {
    width: 100%;
    max-width: 100%;
    padding: 16px 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    overflow: hidden;
  }

  .header-logo {
    width: 118px;
    min-width: 0;
  }

  .header-logo-image {
    width: 118px;
  }

  .header-actions {
    min-width: 0;
    gap: 8px;
  }

  .mobile-menu-toggle {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

  .header-icon-link {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  .header-cart-link {
    max-width: 78px;
    min-width: 0;
    overflow: hidden;
  }

  .header-cart-link span {
    display: inline-block;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* =================================
   ADDRESS DELETE MODAL GLOBAL
================================= */

.address-confirm-modal{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    z-index:99999;

}


.address-confirm-modal.active{

    display:flex;

}


.address-confirm-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(10px);

}


.address-confirm-card{

    position:relative;

    width:min(420px,90%);

    padding:42px;

    background:#fff;

    border-radius:32px;

    text-align:center;

    box-shadow:
    0 30px 80px rgba(0,0,0,.25);

    animation:
    addressModal .25s ease;

}


.address-confirm-card h2{

    margin-bottom:12px;

    font-size:28px;

    font-weight:800;

}


.address-confirm-card p{

    color:#666;

    margin-bottom:32px;

}


.address-confirm-actions{

    display:flex;

    gap:14px;

}


.address-confirm-actions button{

    flex:1;

    height:48px;

    border-radius:999px;

    font-weight:700;

    cursor:pointer;

}


.address-confirm-cancel{

    background:#fff;

    border:1px solid #ddd;

}


.address-confirm-delete{

    background:#c62828;

    color:#fff;

    border:none;

}


@keyframes addressModal{

    from{

        opacity:0;

        transform:translateY(20px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}

.header-icon-link {
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    color:#fff;
}


.header-icon-link svg {
    width:22px;
    height:22px;
}

/* ======================================
   HEADER FAVORITES LINK
====================================== */

.header-favorites-link {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    color: #fff;
    text-decoration: none;

    opacity: 1;
    visibility: visible;

    transition: .25s ease;
}

.header-favorites-link svg {
    width: 21px;
    height: 21px;
}

.header-favorites-link:hover {
    transform: scale(1.08);
    opacity: .82;
}

/* ======================================
   HEADER ACCOUNT/FAVORITES FINAL POLISH
====================================== */

.header-actions {
    display:flex;
    align-items:center;
    gap:10px;
}

.header-icon-link,
.header-favorites-link {
    display:flex;
    align-items:center;
    justify-content:center;

    width:38px;
    height:38px;

    color:#fff;
    text-decoration:none;

    opacity:1;
    visibility:visible;

    border-radius:50%;

    transition:
        transform .25s ease,
        background .25s ease,
        opacity .25s ease;
}

.header-icon-link svg,
.header-favorites-link svg {
    width:21px;
    height:21px;
}

.header-icon-link:hover,
.header-favorites-link:hover {
    transform:scale(1.08);
    background:rgba(255,255,255,.08);
}

@media(max-width:720px) {
    .header-actions {
        gap:6px;
    }

    .header-icon-link,
    .header-favorites-link {
        width:34px;
        height:34px;
    }

    .header-icon-link svg,
    .header-favorites-link svg {
        width:19px;
        height:19px;
    }

    .header-cart-link {
        padding-left:8px;
    }
}


/* ================================================================
   WISC — RODAPE INSTITUCIONAL
   Fase 10.7.12
================================================================ */

.footer-instagram{
  display:inline-block;
  margin-top:18px;
  color:var(--color-gold);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.06em;
  transition:var(--transition);
}

.footer-instagram:hover{
  opacity:.75;
}

.footer-legal{
  max-width:var(--container);
  margin:44px auto 0;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,.08);

  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
}

.footer-legal-links{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.86rem;
}

.footer-legal-links a{
  color:rgba(255,255,255,.78);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:var(--transition);
}

.footer-legal-links a:hover{
  color:#fff;
}

.footer-legal-links span{
  color:rgba(255,255,255,.3);
}

.footer-empresa{
  max-width:520px;
  color:rgba(255,255,255,.45);
  font-size:.8rem;
  line-height:1.7;
  text-align:right;
}


@media (max-width: 1024px){

  .footer-container{
    grid-template-columns:1fr 1fr;
  }

}


@media (max-width: 768px){

  .footer-legal{
    margin-top:34px;
    padding-top:22px;
    flex-direction:column;
    gap:18px;
  }

  .footer-empresa{
    max-width:100%;
    text-align:left;
    font-size:.78rem;
  }

  .footer-legal-links{
    font-size:.82rem;
  }

}


/* ================================================================
   ESTRELA DE COR — Fase 10.5.17

   O componente que representa um colorway. Aparece no seletor da
   pagina do produto, no card do catalogo e na lista de favoritos --
   por isso mora aqui no global, e nao em products.css: a pagina de
   favoritos carrega account.css.

   A REGRA, combinada com o Guilherme:

       miolo = cor da CAMISA
       anel  = cor ou cores da ARTE estampada

   Sao duas estrelas empilhadas, recortadas pela mesma mascara. A de
   tras e' maior e recebe a cor da arte; a da frente e' menor e recebe
   a cor da camisa. A diferenca de tamanho vira o contorno.

   O background e' aplicado por JavaScript a partir de data-attributes,
   porque os valores vem do banco. Sem cor definida, ficam no cinza
   padrao daqui.
================================================================ */

.wisc-star-ring,
.wisc-star-core{
    display:block;

    -webkit-mask-image:url("/images/logo/seletor-estrela-4-pontas.svg");
    mask-image:url("/images/logo/seletor-estrela-4-pontas.svg");

    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;

    -webkit-mask-position:center;
    mask-position:center;

    -webkit-mask-size:contain;
    mask-size:contain;
}

.wisc-star-ring{
    position:relative;
    width:27px;
    height:33px;
    background:var(--color-gray-200,#d9d9d9);
}

/*
   O miolo e' posicionado no centro do anel. Nao da' para usar padding:
   a mascara recorta o elemento inteiro, entao qualquer espacamento
   interno seria recortado junto. Centralizar por absolute mantem as
   duas estrelas concentricas em qualquer tamanho.
*/
.wisc-star-core{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:76%;
    height:76%;
    background:var(--color-gray-200,#d9d9d9);
}


/* ================================================================
   TOOLTIP WISC — Fase 10.5.17

   Substitui o title="" nativo. O balao do navegador demora quase um
   segundo para aparecer, tem a cara do sistema operacional, some
   sozinho e nao aceita estilo nenhum.

   Mesmo raciocinio das mensagens de formulario da 10.7.11: o que o
   navegador desenha por conta propria sai do padrao da marca.

   Uso:  <a data-wisc-tip="Off-white">...</a>

   pointer-events:none no balao e' essencial. Sem isso, o proprio
   tooltip roubaria o hover do elemento embaixo e ficaria piscando.
================================================================ */

[data-wisc-tip]{
    position:relative;
}

[data-wisc-tip]::after{
    content:attr(data-wisc-tip);

    position:absolute;
    bottom:calc(100% + 9px);
    left:50%;
    transform:translateX(-50%) translateY(3px);

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

    background:var(--color-black,#050505);
    color:var(--color-white,#fff);

    font-family:var(--font-title,inherit);
    font-size:.62rem;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
    white-space:nowrap;

    opacity:0;
    pointer-events:none;
    transition:opacity .16s ease, transform .16s ease;

    z-index:20;
}

[data-wisc-tip]:hover::after,
[data-wisc-tip]:focus-visible::after{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

/*
   Em tela de toque nao existe hover: o balao apareceria no toque e
   ficaria preso na tela ate' o proximo toque em outro lugar. Como o
   nome da cor ja' esta escrito ao lado do seletor, o balao nao faz
   falta aqui.
*/
@media (hover:none){

    [data-wisc-tip]::after{
        display:none;
    }

}


/* ================================================================
   CARD DE PRODUTO — peças compartilhadas
   Fase 10.5.17

   POR QUE ISTO MUDOU DE ARQUIVO

   O card de produto aparece em tres telas: catalogo, home e
   favoritos. So' que os estilos dele moravam em products.css, e o
   layout carrega apenas global.css mais a folha DAQUELA pagina.

   Na home, que carrega home.css, aconteceram duas coisas:

     1. .favorite-icon nao existia. SVG sem width/height cai no
        tamanho padrao de elemento substituido -- 300x150px. O
        coracao ficava enorme, transbordando o botao de 38px e sendo
        cortado pelo overflow do card.

        Dava para ver um coracao grande e bonito, mas a area clicavel
        continuava sendo os 38px do botao, escondida atras dele.
        Clicar no coracao nao fazia nada -- exatamente o que apareceu
        no teste.

     2. .product-real-image-hover nao existia. Sem position:absolute,
        a foto de costas caia no fluxo, logo abaixo da frente, e
        aparecia como uma faixa de outra camisa embaixo de cada card.

   Nenhum dos dois era erro de logica. Era estilo de componente
   guardado em folha de pagina. Daqui para frente mora aqui.
================================================================ */

.favorite-icon{
    width:22px;
    height:22px;
    display:block;
    stroke:#111;
    fill:none;
    stroke-width:1.8;
    transition:transform .25s ease, fill .25s ease;
}

.product-favorite:hover .favorite-icon{
    transform:scale(1.15);
}

.product-favorite.active .favorite-icon{
    fill:#111;
    stroke:#111;
    transform:scale(1.08);
}


/* --- foto da peca, com troca no hover --- */

.product-real-image-card{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    padding:14px;
    overflow:hidden;
    border-radius:inherit;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at 50% 24%, rgba(255,255,255,.98), transparent 42%),
        linear-gradient(180deg,#f8f8f5 0%,#e8e8e3 100%);
}

.product-real-image{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    object-position:center;
    transition:opacity .45s ease, transform 4s ease, filter .45s ease;
}

/*
   A foto de costas fica empilhada por cima da frente, invisivel, e
   so' aparece no hover. Empilhar em vez de trocar o src evita o
   piscar de uma imagem que ainda nao carregou.
*/
.product-real-image-hover{
    position:absolute;
    inset:14px;
    width:calc(100% - 28px);
    height:calc(100% - 28px);
    opacity:0;
}

/* ================================================================
   HOVER SO' ONDE EXISTE HOVER — 08/09/2026

   Estas duas regras estavam soltas, e este arquivo carrega em TODAS
   as paginas -- inclusive na home, que nao carrega o products.css.

   Em aparelho de toque o navegador simula hover e o deixa GRUDADO no
   ultimo elemento tocado. Sem a cerca, tocar em qualquer lugar de um
   card deixava as duas regras ligadas para sempre.

   E repare no defeito que isso causava: a primeira regra AMPLIA a
   foto da frente mas nao a esconde, enquanto a segunda traz as costas
   por cima. O resultado eram as duas fotos visiveis ao mesmo tempo,
   ambas ampliadas -- a "imagem duplicada e deslocada" que aparecia no
   mostruario da home.

   No /produtos o defeito era menor porque o products.css carrega
   depois e zera a opacidade da frente. Na home nao havia quem
   corrigisse.

   Era tambem o que impedia o botao de virar de voltar atras: o hover
   grudado segurava as costas em opacity 1 por cima da classe.
================================================================ */

@media (hover: hover) {

    .product-card:hover .product-real-image-main{
        opacity:0;
        transform:scale(1.045);
        filter:contrast(1.03);
    }

    .product-card:hover .product-real-image-hover{
        opacity:1;
        transform:scale(1.045);
        filter:contrast(1.03);
    }
}


/* ================================================================
   MENU DE LINHA NA HEADER — 02/09/2026
================================================================ */

.nav-linha{
    position:relative;
}

/*
   O gatilho e' <button>, e nao <a>: ele nao navega, abre um menu.
   Leitor de tela anuncia "botao, recolhido/expandido" e a pessoa sabe
   o que esperar antes de acionar.

   O visual copia o dos links vizinhos para a barra continuar parecendo
   uma barra so'.
*/
.nav-linha-gatilho{
    padding:0;
    border:none;
    background:none;

    font-family:var(--font-title);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:inherit;

    cursor:pointer;
    transition:color var(--transition);
}

.nav-linha-gatilho::after{
    content:"";
    display:inline-block;
    margin-left:7px;
    vertical-align:middle;

    /* Seta em CSS puro: um icone a mais seria uma requisicao a mais
       para desenhar um triangulo. */
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:4px solid currentColor;

    transition:transform var(--transition);
}

.nav-linha-gatilho[aria-expanded="true"]::after{
    transform:rotate(180deg);
}

.nav-linha-gatilho:focus-visible{
    outline:2px solid var(--color-gold);
    outline-offset:6px;
}

.nav-linha-menu[hidden]{
    display:none;
}

.nav-linha-menu{
    position:absolute;
    top:calc(100% + 18px);
    left:50%;
    transform:translateX(-50%);
    z-index:130;

    display:grid;
    gap:2px;
    min-width:210px;
    padding:10px;

    border-radius:18px;
    background:var(--color-gray-900);
    border:1px solid rgba(255,255,255,.1);
    box-shadow:0 24px 60px rgba(0,0,0,.45);
}

/*
   Ponte invisivel entre o gatilho e o menu. Sem ela, os 18px de
   respiro viram uma faixa morta: o mouse atravessa e o menu perde o
   :hover no meio do caminho ate' o primeiro link.
*/
.nav-linha-menu::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-18px;
    height:18px;
}

.nav-linha-menu a{
    padding:11px 14px;
    border-radius:12px;

    font-family:var(--font-title);
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--color-gray-200);
    text-decoration:none;

    transition:background var(--transition), color var(--transition);
}

.nav-linha-menu a:hover{
    background:rgba(255,255,255,.07);
    color:#fff;
}

.nav-linha-menu a:focus-visible{
    outline:2px solid var(--color-gold);
    outline-offset:-2px;
}

/* O nome da linha e' o item de cima e leva ao catalogo inteiro dela.
   Separado por uma linha para nao se confundir com as subdivisoes. */
.nav-linha-titulo{
    margin-bottom:6px;
    padding-bottom:13px !important;
    border-bottom:1px solid rgba(255,255,255,.1);
    border-radius:12px 12px 0 0 !important;
    color:#fff !important;
}

.nav-linha-titulo::after{
    content:"Ver tudo";
    display:block;
    margin-top:5px;

    font-family:var(--font-body);
    font-size:.68rem;
    font-weight:400;
    letter-spacing:0;
    text-transform:none;
    color:var(--color-gray-500);
}


/* ---- celular: hierarquia sem dropdown ---- */

.mobile-nav-grupo{
    font-weight:900 !important;
}

.mobile-nav-filho{
    padding-left:20px !important;
    opacity:.82;
}

/* Fio ligando o filho ao grupo -- deixa a hierarquia visivel sem
   precisar de recuo grande, que em 390px custa caro. */
.mobile-nav-filho{
    position:relative;
}

.mobile-nav-filho::before{
    content:"";
    position:absolute;
    left:7px;
    top:50%;
    width:7px;
    height:1px;
    background:rgba(255,255,255,.28);
}


/* Parcelamento embaixo do preco — 02/09/2026.
   Terceira linha do bloco de preco, e por isso a menor e a mais
   discreta: R$ 179,90 manda, "no PIX" e' a economia, e o parcelamento
   e' o alivio. Hierarquia de tres degraus, nao tres avisos gritando. */
.product-parcelamento{
    display:block;
    margin-top:3px;

    font-family:var(--font-body);
    font-size:.74rem;
    line-height:1.4;
    color:var(--color-gray-500);
}


/* ----------------------------------------------------------------
   MOVIDO DE products.css EM 08/09/2026

   Estava so' no products.css, e a home NAO carrega aquele arquivo --
   entao na home o botao existia no HTML sem estilo nenhum e sem a
   regra que troca as fotos. Ele nunca teve chance de funcionar la'.

   Aqui vale para as tres telas que usam o card. Uma copia so'.
---------------------------------------------------------------- */

/* ================================================================
   BOTAO DE VIRAR A PECA — 08/09/2026

   O equivalente do hover para quem usa o dedo.

   ----------------------------------------------------------------
   POR QUE A REGRA PERGUNTA PELO PONTEIRO, E NAO PELA LARGURA
   ----------------------------------------------------------------

   @media (hover: none) pergunta ao APARELHO se ele tem hover. Usar
   max-width no lugar erraria nos dois sentidos: uma janela estreita
   no computador perderia o hover que ela tem, e um tablet largo
   ficaria sem botao mesmo sem ter mouse.

   O que decide se o hover existe e' o aparelho, nao o tamanho da
   janela.

   Isto vale para o catalogo E para a home -- as duas paginas usam
   estas mesmas classes, ainda que a marcacao esteja escrita duas
   vezes.
================================================================ */

/* Onde ha' mouse, o hover ja' resolve: botao a mais seria ruido. */
.product-flip {
  display: none;
}

@media (hover: none) {

  .product-flip {
    position: absolute;

    /*
     * Mesmo recuo do badge "NOVO", que fica em left:18 bottom:18.
     * Os dois viram um par: um em cada canto de baixo, na mesma
     * linha. Recuo menor colava o botao na quina arredondada do
     * cartao e ele parecia estar do lado de fora da foto.
     */
    right: 18px;
    bottom: 18px;

    /* Acima do link, do quick-view (5) e do badge. Sem isto o toque
       cairia no <a> que cobre a area inteira, e virar a peca abriria
       o produto. */
    z-index: 6;

    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;

    border: none;
    border-radius: 50%;
    cursor: pointer;

    background: rgba(5, 5, 5, 0.55);
    color: #fff;
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);

    transition: background 0.22s ease;
  }

  .product-flip svg {
    width: 20px;
    height: 20px;
  }

  /*
   * Virado: o botao escurece. E' a unica pista de que a foto na tela
   * e' o verso -- sem ela, quem chegasse ao card rolando a pagina
   * poderia achar que a estampa da frente e' aquela.
   */
  .product-card.mostrando-costas .product-flip {
    background: rgba(5, 5, 5, 0.85);
  }

  .product-card.mostrando-costas .product-real-image-main {
    opacity: 0;
  }

  .product-card.mostrando-costas .product-real-image-hover {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {

  .product-flip {
    transition: none;
  }
}