.catalog-hero {
  min-height: 430px;
  padding: 160px 54px 72px;
  display: flex;
  align-items: flex-end;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.98), rgba(5, 5, 5, 0.62)),
    radial-gradient(circle at 78% 28%, rgba(255, 255, 255, 0.14), transparent 32%),
    #050505;
  color: var(--color-white);
}

.catalog-hero > div {
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
}

.catalog-kicker {
  margin-bottom: 22px;
  font-family: var(--font-title);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--color-gray-200);
}

.catalog-hero h1 {
  font-family: var(--font-title);
  font-size: clamp(4.2rem, 8vw, 8.5rem);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 900;
}

.catalog-hero span {
  display: block;
  max-width: 560px;
  margin-top: 28px;
  color: var(--color-gray-200);
  font-size: 1.05rem;
  line-height: 1.8;
}

.catalog-section {
  padding: 54px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 42px;
  background: #f4f4f1;
  color: var(--color-black);
}

.catalog-sidebar {
  position: sticky;
  top: 112px;
  height: max-content;
  padding: 26px;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.filter-block + .filter-block {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.filter-block h3 {
  margin-bottom: 18px;
  font-family: var(--font-title);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.filter-block a {
  display: block;
  margin-bottom: 12px;
  color: #333;
  font-size: 0.92rem;
  transition: color 0.2s ease;
}

.filter-block a:hover {
  color: #000;
}

.filter-block a.active {
  color: #000;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.filter-block p {
  color: #555;
  font-size: 0.9rem;
  line-height: 1.7;
}

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

.filter-sizes a {
  min-width: 42px;
  height: 34px;
  padding: 0 12px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.86rem;
}

.filter-sizes a:hover,
.filter-sizes a.active {
  background: #111;
  color: #fff;
}

.catalog-content {
  min-width: 0;
}

.catalog-toolbar {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.catalog-toolbar p {
  color: #555;
  font-size: 0.92rem;
}

.catalog-toolbar strong {
  color: #111;
}

.catalog-sort-form {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: max-content;
}

.catalog-toolbar select {
  min-width: 250px;
  height: 42px;
  padding: 0 58px 0 18px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  background: #fff;
  outline: none;
  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.catalog-sort-form::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.active-filters {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.active-filters span {
  font-family: var(--font-title);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #666;
}

.active-filters a {
  padding: 8px 12px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 0.78rem;
}

.catalog-empty {
  min-height: 360px;
  padding: 54px;
  display: grid;
  place-content: center;
  text-align: center;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.catalog-empty h2 {
  font-family: var(--font-title);
  font-size: 2rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.catalog-empty p {
  margin-top: 12px;
  color: #555;
}

.catalog-empty a {
  width: max-content;
  height: 46px;
  margin: 24px auto 0;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-family: var(--font-title);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* Cards de produto reaproveitados no catálogo */

.product-card {
  min-width: 0;
}

.product-image-area {
  position: relative;
  height: 420px;
  overflow: hidden;
  border-radius: 8px;
  background: #dededb;
  isolation: isolate;
}

.product-image-link {
  position: absolute;
  inset: 0;
  display: block;
}

.product-image-area::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.28)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  pointer-events: none;
}

@media (hover: hover) {
  .product-card:hover .product-image-area::after {
    opacity: 1;
  }
}

.product-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 4;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #111;
  font-family: var(--font-title);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  pointer-events: none;
}

.product-badge-dark {
  background: rgba(5, 5, 5, 0.82);
  color: #fff;
}

.product-favorite {

  position: absolute;
  top: 18px;
  right: 18px;
  
  width: 42px;
  height: 42px;

  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255,.35);
  background: rgba(0, 0, 0,.35);

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

  font-size: 22px;
  cursor: pointer;
  z-index: 5;
  transition: .3s ease;
}

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

.product-favorite.active {
  background: white;
  color: #111;
  border-color: white;
}

.product-image {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: transform 0.45s ease, filter 0.45s ease;
}

@media (hover: hover) {
  .product-card:hover .product-image {
    transform: scale(1.045);
    filter: contrast(1.04);
  }
}

.product-image span {
  position: relative;
  z-index: 2;
  font-family: var(--font-title);
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  transition: opacity 0.4s ease, transform 0.4s ease, letter-spacing 0.4s ease;

}

.product-image-dark {
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.16), transparent 30%),
    linear-gradient(135deg, #202020, #050505);
  color: rgba(255, 255, 255, 0.64);
}

.product-image-light {
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.85), transparent 34%),
    linear-gradient(135deg, #eee9df, #cfc8ba);
  color: rgba(0, 0, 0, 0.42);
}

.product-image-hoodie {
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.14), transparent 28%),
    linear-gradient(135deg, #151515, #000000);
  color: rgba(255, 255, 255, 0.52);
}

.product-image-cap {
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.2), transparent 30%),
    linear-gradient(135deg, #242424, #101010);
  color: rgba(255, 255, 255, 0.58);
}

.product-image::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.6s ease, transform 0.8s ease;
  z-index: 1;
  pointer-events: none;
}

.product-image-dark::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent 45%),
    radial-gradient(circle at 42% 24%, rgba(255, 255, 255, 0.35), transparent 24%),
    linear-gradient(145deg, #000000 0%, #333333 48%, #070707 100%);
}

.product-image-light::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.45), transparent 45%),
    radial-gradient(circle at 52% 28%, rgba(255, 255, 255, 1), transparent 24%),
    linear-gradient(145deg, #bfb39d 0%, #f7f1e6 48%, #d1c3aa 100%);
}

.product-image-hoodie::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.62), transparent 45%),
    radial-gradient(circle at 45% 24%, rgba(255, 255, 255, 0.28), transparent 24%),
    linear-gradient(145deg, #000000 0%, #292929 52%, #020202 100%);
}

.product-image-cap::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.48), transparent 45%),
    radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.42), transparent 24%),
    linear-gradient(145deg, #080808 0%, #3b3b3b 52%, #111111 100%);
}

@media (hover: hover) {
  .product-card:hover .product-image::before {
    animation: productImageSwap 4s ease-in-out infinite;
  }
}

@media (hover: hover) {
  .product-card:hover .product-image span {
    animation: productTextSwap 4s ease-in-out infinite;
  }
}

@keyframes productImageSwap {
  0% {
    opacity: 0;
    transform: scale(1.02) translateY(0);
  }

  12% {
    opacity: 1;
    transform: scale(1.08) translateY(-6px);
  }

  78% {
    opacity: 1;
    transform: scale(1.13) translateY(-10px);
  }

  100% {
    opacity: 0;
    transform: scale(1.02) translateY(0);
  }
}

@keyframes productTextSwap {
  0% {
    opacity: 1;
    transform: scale(1);
    letter-spacing: 0.34em;
  }

  12% {
    opacity: 0.55;
    transform: scale(0.96);
    letter-spacing: 0.42em;
  }

  78% {
    opacity: 0.55;
    transform: scale(0.96);
    letter-spacing: 0.42em;
  }

  100% {
    opacity: 1;
    transform: scale(1);
    letter-spacing: 0.34em;
  }
}

.quick-view {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 5;
  height: 46px;
  display: grid;
  place-items: center;
  background: rgba(5, 5, 5, 0.86);
  color: #fff;
  border-radius: 999px;
  transform: translateY(72px);
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.quick-view span {
  font-family: var(--font-title);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (hover: hover) {
  .product-card:hover .quick-view {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (hover: hover) {
  .product-card:hover .product-badge {
    opacity: 0;
  }
}

.product-info {
  padding: 18px 4px 0;
}

.product-category {
  margin-bottom: 6px;
  font-family: var(--font-title);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

.product-info h3 {
  min-height: 44px;
  font-size: 0.98rem;
  line-height: 1.4;
  font-weight: 700;
  color: #111;
}

.product-prices {
  margin-top: 12px;
}

.product-prices p {
  font-size: 1rem;
  font-weight: 800;
  color: #111;
}

.product-prices span {
  display: block;
  margin-top: 3px;
  font-size: 0.86rem;
  color: #4d4d4d;
}

.product-sizes {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.product-sizes span {
  min-width: 34px;
  height: 28px;
  padding: 0 9px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #222;
}

@media (max-width: 1300px) {
  .catalog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .catalog-section {
    grid-template-columns: 1fr;
  }

  .catalog-sidebar {
    position: static;
  }

  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-image-area {
    height: 390px;
  }
}

@media (max-width: 640px) {
  .catalog-hero {
    min-height: 380px;
    padding: 150px 22px 58px;
  }

  .catalog-section {
    padding: 34px 22px 70px;
  }

  .catalog-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .catalog-toolbar select {
    width: 100%;
  }

  .catalog-sort-form {
    width: 100%;
  }

  .catalog-grid {
    grid-template-columns: 1fr;
  }

  .product-image-area {
    height: 360px;
  }
}

.active-filters a.clear-filters {
  background: transparent;
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.18);
}

.active-filters a.clear-filters:hover {
  background: #111;
  color: #fff;
}

.product-status {
  width: max-content;
  margin-top: 10px;
  padding: 7px 11px;
  border-radius: 999px;
  font-family: var(--font-title);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.product-status-soon {
  background: #111;
  color: #fff;
}

.product-status-soldout {
  background: #d8d8d8;
  color: #111;
}

/* Fase 9.7.4 — acabamento das imagens reais no catálogo */
.product-real-image-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 22px;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.95), 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 0.45s ease, transform 4s ease, filter 0.45s ease;
}

.product-real-image-hover {
  position: absolute;
  inset: 22px;
  width: calc(100% - 44px);
  height: calc(100% - 44px);
  opacity: 0;
}

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

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

/* Fase 9.7.4 — padrão definitivo para imagens verticais frente/costas */
.product-real-image-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 26px;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.98), transparent 42%),
    linear-gradient(180deg, #f8f8f5 0%, #e8e8e3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.product-real-image-hover {
  position: absolute;
  inset: 26px;
  width: calc(100% - 52px);
  height: calc(100% - 52px);
  opacity: 0;
  pointer-events: none;
}

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

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

/* Ajuste fino — título do catálogo no mobile */
@media (max-width: 720px) {
  .catalog-hero {
    overflow: hidden;
  }

  .catalog-hero > div {
    width: 100%;
    max-width: 100%;
  }

  .catalog-hero h1 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(2.7rem, 14vw, 3.8rem);
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: normal;
    overflow: visible;
    word-break: normal;
  }

  .catalog-hero span {
    max-width: 320px;
  }
}

/* Fase 10.0.4.2 — filtro mobile recolhível */
.catalog-filter-toggle {
  display: none;
}

@media (max-width: 720px) {
  .catalog-section {
    display: block;
  }

  .catalog-filter-toggle {
    width: 100%;
    min-height: 58px;
    margin-bottom: 18px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    border-radius: 22px;
    background: #111;
    color: #fff;
    cursor: pointer;
    font-family: var(--font-title);
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }

  .catalog-filter-toggle span {
    font-size: 0.72rem;
    font-weight: 900;
  }

  .catalog-filter-toggle strong {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 1rem;
    line-height: 1;
  }

  .catalog-sidebar {
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin-bottom 0.25s ease, padding 0.25s ease;
  }

  .catalog-section.filters-open .catalog-sidebar {
    max-height: 1100px;
    margin-bottom: 24px;
    padding-top: 28px;
    padding-bottom: 28px;
    opacity: 1;
    pointer-events: auto;
  }

  .catalog-section.filters-open .catalog-filter-toggle strong {
    content: "−";
  }

  .catalog-section.filters-open .catalog-filter-toggle strong {
    font-size: 0;
  }

  .catalog-section.filters-open .catalog-filter-toggle strong::before {
    content: "−";
    font-size: 1rem;
  }
}


/* ======================================
   FAVORITO - CARD PRODUTO WISC
====================================== */


.product-favorite {

    position:absolute;

    top:18px;
    right:18px;

    z-index:5;

    width:32px;
    height:32px;

    padding:0;

    border:none;

    background:transparent;

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

}


/* coração */

.favorite-icon {

    width:22px;

    height:22px;

    display:block;

    stroke:#111;

    fill:none;

    stroke-width:1.8;

    transition:
    transform .25s ease,
    fill .25s ease;

}


/* hover */

.product-favorite:hover .favorite-icon {

    transform:scale(1.15);

}


/* FAVORITADO */

.product-favorite.active .favorite-icon {

    fill:#111;

    stroke:#111;

    transform:scale(1.08);

}


/* pequena animação ao favoritar */

.product-favorite.active {

    animation:
    favoritePop .35s ease;

}


@keyframes favoritePop {

    0% {

        transform:scale(1);

    }

    50% {

        transform:scale(1.25);

    }

    100% {

        transform:scale(1);

    }

}

/* ======================================
   FAVORITO - AJUSTE DEFINITIVO WISC
====================================== */

.product-favorite {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 5 !important;

    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;

    border: none !important;
    background: transparent !important;
    box-shadow: none !important;

    color: #111 !important;

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

    cursor: pointer !important;
    border-radius: 0 !important;

    transition: transform .25s ease !important;
}

.product-favorite .favorite-icon {
    width: 20px !important;
    height: 20px !important;

    display: block !important;

    stroke: #111 !important;
    fill: transparent !important;

    transition:
        transform .25s ease,
        fill .25s ease,
        stroke .25s ease !important;
}

.product-favorite:hover {
    transform: scale(1.08) !important;
}

.product-favorite.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    animation: favoritePop .32s ease !important;
}

.product-favorite.active .favorite-icon {
    fill: #111 !important;
    stroke: #111 !important;
}

.product-favorite:not(.active) .favorite-icon {
    fill: transparent !important;
    stroke: #111 !important;
}

@keyframes favoritePop {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
    }
}

/* ======================================
   FAVORITE PREMIUM ANIMATION
====================================== */

.product-favorite {
    position: relative;
    display:flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    border-radius:50%;

    background:transparent;

    border:1px solid rgba(0,0,0,.15);

    cursor:pointer;

    transition:
        transform .25s ease,
        border-color .25s ease;
}


.product-favorite:hover {

    transform:scale(1.08);

}


/* Ícone */

.favorite-icon {

    width:22px;
    height:22px;

    stroke:#111;

    fill:transparent;

    transition:
        transform .3s ease,
        fill .3s ease;

}



/* FAVORITADO */

.product-favorite.active .favorite-icon {

    fill:#111;

    stroke:#111;

    animation:
        favoritePop .35s ease;

}



/* animação */

@keyframes favoritePop {

    0% {

        transform:scale(.7);

    }


    60% {

        transform:scale(1.25);

    }


    100% {

        transform:scale(1);

    }

}


/* ================================================================
   CARD POR COLORWAY — Fase 10.5.17

   O catalogo lista cores, nao estampas: "A Criacao Obedece." aparece
   duas vezes, uma preta e uma branca. Sem a cor escrita no card, ficam
   dois cards de titulo identico e foto diferente -- e o cliente nao
   entende se sao duas pecas ou um erro da loja.
================================================================ */

.product-card-color{
    margin-top:7px;
    display:flex;
    align-items:center;
    gap:8px;
}

.product-card-color .wisc-star-ring{
    width:16px;
    height:20px;
    flex-shrink:0;
}

.product-card-color span:last-child{
    font-size:.78rem;
    letter-spacing:.02em;
    color:rgba(0,0,0,.56);
}

/*
   Esgotado NESTA cor. A estampa pode ter peca na preta e nenhuma na
   branca; o card precisa dizer de qual das duas esta falando.

   A foto perde saturacao em vez de o card sumir: a peca continua
   existindo, e ver que ela existe e acabou e' informacao util -- e o
   gatilho do "avise-me quando voltar".
*/
.product-card-soldout .product-real-image,
.product-card-soldout .product-image{
    filter:grayscale(.72) opacity(.62);
}

.product-card-soldout:hover .product-real-image,
.product-card-soldout:hover .product-image{
    filter:grayscale(.42) opacity(.78);
}

@media (max-width:430px){

    .product-card-color span:last-child{
        font-size:.74rem;
    }

}


/* ================================================================
   FOTO RETRATO — Fase 10.5.17

   As fotos originais eram 16:9, com frente e costas lado a lado. Numa
   area de card vertical, sobrava fundo nas laterais e a peca ficava
   pequena no meio.

   Agora cada colorway tem duas fotos 4:5, uma peca por foto. A area do
   card cresce um pouco para acompanhar, e o padding interno diminui --
   a peca ja' vem com margem embutida na propria imagem.
================================================================ */

.product-image-area{
    height:470px;
}

.product-real-image-card{
    padding:14px;
}

.product-real-image-hover{
    inset:14px;
    width:calc(100% - 28px);
    height:calc(100% - 28px);
}

@media (max-width:1180px){

    .product-image-area{
        height:430px;
    }

}

@media (max-width:640px){

    .product-image-area{
        height:400px;
    }

}


/* ================================================================
   ACABAMENTO DO CARD — Fase 10.5.17

   NOTA SOBRE DUPLICACAO INTENCIONAL

   As regras de .favorite-icon e .product-real-image* tambem existem
   no global.css, porque o card virou componente de tres telas e a
   home nao carrega este arquivo.

   Elas continuam aqui de proposito. Sao os mesmos valores, este
   arquivo carrega depois e vence -- entao o resultado e' identico.

   Eu tinha removido as copias daqui "para nao duplicar". O corte
   levou junto dois blocos @media, incluindo o "filtro mobile
   recolhivel", que e' quem faz .catalog-section virar display:block
   em telas pequenas. Sem ele o catalogo desmontou inteiro, no
   desktop e no mobile.

   Limpar duplicata nao valia esse risco. Fica como esta'.
================================================================ */

.product-image-area{
    border-radius:22px;
}

/*
   O coracao ficava meio para fora da foto: ele e' filho de
   .product-image-area e contava 18px a partir da borda do container,
   nao da foto branca que o olho enxerga. Com o card arredondado, a
   diferenca virou meia lua.

   Ganhou tambem borda e sombra -- na "A Criacao Obedece Branca" o
   coracao branco sumia no fundo branco.
*/
.product-favorite{
    top:16px;
    right:16px;

    width:40px;
    height:40px;

    z-index:6;

    border:1px solid rgba(0,0,0,.10);
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(4px);
    box-shadow:0 4px 14px rgba(0,0,0,.08);
}

.product-favorite:hover,
.product-favorite.active{
    background:#fff;
    border-color:rgba(0,0,0,.22);
}

/*
   O veu escuro de hover e a foto precisam do mesmo raio do card,
   senao sobra um canto reto por cima do canto arredondado.
*/
.product-image-area::after,
.product-real-image-card{
    border-radius:inherit;
}


/* ================================================================
   A BADGE PRECISA SOBREVIVER A QUALQUER FOTO — 07/09/2026

   Ela era uma pilula BRANCA com 86% de opacidade, e a foto do card
   era um mockup sobre um degrade cinza claro. Contraste suficiente,
   e nunca precisou de mais que isso.

   As fotos de campanha vieram com fundo BRANCO de estudio. Branco
   sobre branco: a pilula desaparece, sobram as letras soltas, e a
   borda dela borra na passagem para o cinza do card. E' isso que se
   ve' como "a badge esta' vazando" -- ela nao esta' fora do lugar,
   ela esta' invisivel.

   Agora ela e' escura com texto branco, que e' o mesmo tratamento da
   badge dentro da pagina do produto. Duas vantagens alem do
   contraste: fica igual nos dois lugares, e funciona sobre qualquer
   foto futura -- clara, escura ou estampada.

   Continua com transparencia (nao e' preto chapado) para nao virar um
   adesivo colado por cima da peca. 0.78 sobre branco ainda da' mais de
   10:1 de contraste com o texto -- muito acima do minimo de 4.5:1.
================================================================ */

.product-badge {
  background: rgba(5, 5, 5, 0.78);
  color: #fff;

  /* O desfoque deixa a peca respirar por tras da pilula em vez de
     sumir atras de um retangulo opaco. Onde o navegador nao suportar,
     o fundo acima ja' resolve sozinho. */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  /* Sombra curta: separa a pilula do fundo claro sem parecer um
     botao flutuando. */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}


/* ================================================================
   SEPARADOR ENTRE PRODUTOS NO CELULAR
   08/09/2026 — ideia do amigo do Guilherme, item 5

   Ate' 640px a grade vira uma coluna so'. Com 22px de gap e nada
   entre um card e outro, a leitura fica ambigua: o preco de um
   produto encosta na foto do proximo, e num rolar rapido a pessoa
   nao ve' onde termina uma peca e comeca a outra.

   A linha entra so' ENTRE cards -- o seletor "+" garante que o
   primeiro nao ganha risco em cima, que pareceria uma borda solta
   logo abaixo dos filtros.

   O respiro e' assimetrico de proposito: mais espaco DEPOIS da
   linha do que antes. Assim a linha pertence visualmente ao card de
   baixo (ela o apresenta) em vez de flutuar no meio do nada. E' a
   mesma razao pela qual um titulo tem mais espaco acima do que
   abaixo: proximidade e' o que diz o que pertence a que.
================================================================ */

@media (max-width: 640px) {

  .catalog-grid > .product-card + .product-card {
    border-top: 1px solid rgba(5, 5, 5, 0.09);
    padding-top: 26px;
    margin-top: 4px;
  }
}





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

   Em aparelho de toque nao existe hover de verdade, mas o navegador
   simula: ao tocar em algo ele aplica :hover e DEIXA aplicado ate' o
   proximo toque em outro lugar. E' o chamado "hover grudado".

   Sem esta cerca, tocar em qualquer lugar de um card deixava o card
   preso no estado de hover -- mostrando as costas, com zoom, e com o
   botao "VER PRODUTO" aberto -- ate' que se tocasse fora dele. E o
   botao de virar a peca nao conseguia desfazer nada, porque a regra
   de hover continuava valendo por cima da classe.

   Estava assim desde antes; so' ficava escondido porque ninguem
   costumava tocar no card sem sair da pagina em seguida.
================================================================ */