@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Jost:wght@300;400;500;600&display=swap');

/* =========================================================
   RESET + BASE
========================================================= */

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

:root {
    --bg: #f5efe8;
    --bg-2: #fbf8f4;
    --surface: rgba(255, 255, 255, 0.72);
    --surface-strong: rgba(255, 255, 255, 0.9);
    --surface-dark: rgba(38, 20, 17, 0.92);

    --red: #9a3e31;
    --red-dark: #7f2f25;
    --red-soft: #b35a4a;

    --gold: #c8a96e;
    --gold-soft: #e2d0a8;
    --gold-dark: #a8894e;

    --cream: #faf6f1;
    --cream-mid: #f3ebe3;
    --cream-deep: #e7d8cb;

    --text: #2d1d18;
    --muted: #72564f;
    --faint: #9c8179;

    --line: rgba(154, 62, 49, 0.09);
    --line-strong: rgba(154, 62, 49, 0.14);

    --shadow-xs: 0 6px 20px rgba(33, 18, 14, .05);
    --shadow-soft: 0 16px 50px rgba(33, 18, 14, .08);
    --shadow-medium: 0 24px 70px rgba(33, 18, 14, .12);
    --shadow-strong: 0 38px 120px rgba(33, 18, 14, .18);

    --radius-xs: 12px;
    --radius-sm: 16px;
    --radius-md: 22px;
    --radius-lg: 28px;
    --radius-xl: 34px;

    --transition: .34s cubic-bezier(0.22, 1, 0.36, 1);
}

html {
    scroll-behavior: smooth;
    background:
        radial-gradient(circle at top left, rgba(200, 169, 110, .12), transparent 26%),
        radial-gradient(circle at top right, rgba(154, 62, 49, .08), transparent 24%),
        linear-gradient(180deg, #fcfaf7 0%, var(--bg) 35%, #f7f1ea 100%);
}

body {
    font-family: 'Jost', sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 15% 10%, rgba(200, 169, 110, .10), transparent 20%),
        radial-gradient(circle at 85% 15%, rgba(154, 62, 49, .08), transparent 18%),
        linear-gradient(180deg, #fcfaf7 0%, #f7f1eb 35%, #f3ebe3 100%);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

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

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

::selection {
    background: rgba(154, 62, 49, .14);
    color: var(--text);
}

.section-shell {
    width: min(1280px, calc(100% - 2rem));
    margin-inline: auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   ANIMAÇÕES
========================================================= */

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .75s ease, transform .75s ease;
}

.fade-in.show {
    opacity: 1;
    transform: translateY(0);
}

@keyframes floatSoft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes shineMove {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes softRise {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   BOTÕES / ELEMENTOS GERAIS
========================================================= */

.btn-wpp,
.hero-btn-cat,
.filtro-submit,
.tv-tab,
.fb-nav-btn,
.perfume-modal-close,
.footer-social a {
    -webkit-tap-highlight-color: transparent;
}

.btn-wpp {
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--red) 0%, #b14d3f 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition: transform .28s var(--transition), box-shadow .28s var(--transition), background .28s var(--transition);
    box-shadow: 0 12px 30px rgba(154, 62, 49, .18);
}

.btn-wpp::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .18), transparent);
    transition: .6s ease;
}

.btn-wpp:hover::after {
    left: 100%;
}

.btn-wpp:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(154, 62, 49, .22);
}

.btn-wpp:focus-visible,
.hero-btn-cat:focus-visible,
.filtro-submit:focus-visible,
.tv-tab:focus-visible,
.fb-nav-btn:focus-visible,
.perfume-modal-close:focus-visible,
.footer-social a:focus-visible,
.product-link:focus-visible {
    outline: 2px solid rgba(200, 169, 110, .85);
    outline-offset: 3px;
}

/* =========================================================
   HERO MODERNO
========================================================= */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem 5rem;
    overflow: hidden;
}

.hero::before,
.hero::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.hero::before {
    top: -220px;
    left: 50%;
    transform: translateX(-50%);
    width: 760px;
    height: 760px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(154, 62, 49, .10) 0%, rgba(154, 62, 49, .06) 26%, transparent 68%);
    filter: blur(10px);
}

.hero::after {
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 169, 110, .55), transparent);
}

.hero-shell {
    width: min(1360px, calc(100% - 1.5rem));
    position: relative;
    z-index: 2;
}

.hero-card {
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.58)),
        radial-gradient(circle at top left, rgba(200,169,110,.12), transparent 26%),
        radial-gradient(circle at bottom right, rgba(154,62,49,.08), transparent 24%);
    border: 1px solid rgba(255,255,255,.62);
    box-shadow: var(--shadow-strong);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: clamp(1.2rem, 2.5vw, 2rem);
    position: relative;
    overflow: hidden;
}

.hero-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.18) 50%, transparent 80%);
    transform: translateX(-120%);
    animation: shineMove 9s ease-in-out infinite;
    pointer-events: none;
    opacity: .55;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    gap: clamp(1.2rem, 3vw, 3rem);
    align-items: center;
}

.hero-copy {
    padding: clamp(.4rem, 1vw, .75rem);
}

.hero-brand-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.35rem;
}

.hero-logo {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(200, 169, 110, .35);
    box-shadow: 0 0 0 6px rgba(255,255,255,.44), 0 12px 30px rgba(154, 62, 49, .10);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hero-brand-copy {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.brand {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.6rem, 5vw, 4.6rem);
    font-weight: 300;
    color: var(--red);
    letter-spacing: .16em;
    line-height: .95;
    text-transform: uppercase;
}

.tagline {
    font-size: .66rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted);
}

.hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.4rem, 4.2vw, 5rem);
    line-height: .94;
    letter-spacing: -.02em;
    font-weight: 300;
    color: var(--text);
    max-width: 11ch;
    margin-bottom: 1rem;
}

.hero-title span {
    color: var(--red);
    font-style: italic;
}

.hero-lead {
    font-size: clamp(.95rem, 1.2vw, 1.08rem);
    line-height: 1.9;
    color: var(--muted);
    max-width: 56ch;
    margin-bottom: 1.5rem;
}

.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-bottom: 1.5rem;
}

.hero-btn-cat {
    min-height: 50px;
    padding: 0 1.2rem;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: transform .28s var(--transition), box-shadow .28s var(--transition), background .28s var(--transition), border-color .28s var(--transition);
    border: 1px solid rgba(154, 62, 49, .18);
}

.hero-btn-primary {
    background: linear-gradient(135deg, var(--red) 0%, var(--red-soft) 100%);
    color: #fff;
    box-shadow: 0 16px 34px rgba(154, 62, 49, .18);
}

.hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 44px rgba(154, 62, 49, .22);
}

.hero-btn-secondary {
    background: rgba(255,255,255,.62);
    backdrop-filter: blur(10px);
    color: var(--red);
}

.hero-btn-secondary:hover {
    transform: translateY(-2px);
    border-color: rgba(154, 62, 49, .26);
    box-shadow: var(--shadow-xs);
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    margin-top: .35rem;
}

.hero-stat {
    padding: 1rem .95rem;
    border-radius: 18px;
    background: rgba(255,255,255,.58);
    border: 1px solid rgba(154, 62, 49, .08);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.hero-stat-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--red);
    font-weight: 500;
}

.hero-stat-label {
    font-size: .58rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}

.hero-aside {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.hero-ornament {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: .2rem;
}

.hero-ornament::before,
.hero-ornament::after {
    content: '';
    flex: 1;
    height: 1px;
}

.hero-ornament::before {
    background: linear-gradient(90deg, transparent, rgba(200, 169, 110, .62));
}

.hero-ornament::after {
    background: linear-gradient(90deg, rgba(200, 169, 110, .62), transparent);
}

.hero-ornament-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 5px rgba(200, 169, 110, .10);
}

.hero-sobre {
    padding: 1.25rem 1.2rem;
    border-radius: 22px;
    background: rgba(255,255,255,.56);
    border: 1px solid rgba(154, 62, 49, .08);
    box-shadow: var(--shadow-xs);
    text-align: left;
}

.hero-sobre-titulo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.45rem;
    font-weight: 400;
    font-style: italic;
    margin-bottom: .55rem;
    color: var(--text);
}

.hero-sobre-texto {
    font-size: .92rem;
    color: var(--muted);
    line-height: 1.9;
}

.divider {
    text-align: center;
    font-size: .58rem;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--faint);
    display: flex;
    align-items: center;
    gap: .8rem;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(154, 62, 49, .10), transparent);
}

.hero-selos {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.hero-selo {
    padding: 1rem .95rem;
    border-radius: 18px;
    background: rgba(255,255,255,.60);
    border: 1px solid rgba(154, 62, 49, .08);
    box-shadow: var(--shadow-xs);
    text-align: left;
    transition: transform .28s var(--transition), box-shadow .28s var(--transition), border-color .28s var(--transition);
}

.hero-selo:hover {
    transform: translateY(-3px);
    border-color: rgba(200, 169, 110, .32);
    box-shadow: var(--shadow-soft);
}

.hero-selo-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .7rem;
    background: rgba(154, 62, 49, .08);
    color: var(--red);
    font-size: 1rem;
}

.hero-selo-label {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .25rem;
}

.hero-selo-sub {
    display: block;
    font-size: .6rem;
    color: var(--muted);
    line-height: 1.45;
}

/* =========================================================
   SEÇÕES / TITULOS
========================================================= */

.section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    text-align: center;
}

.section-eyebrow,
.catalog-eyebrow {
    display: inline-block;
    font-size: .56rem;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--gold-dark);
}

.section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 4vw, 3.3rem);
    font-weight: 300;
    line-height: 1;
    color: var(--text);
}

.section-title em {
    color: var(--red);
    font-style: italic;
}

.section-line,
.catalog-header-line {
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
    margin-top: .85rem;
}

.section-subtitle {
    max-width: 62ch;
    margin-top: .9rem;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.85;
}

/* =========================================================
   SEÇÃO TOP VENDIDOS
========================================================= */

.top-vendidos {
    position: relative;
    padding: 5rem 0 4.25rem;
    background:
        radial-gradient(circle at top, rgba(255,255,255,.6), transparent 28%),
        linear-gradient(180deg, #f8f3ed 0%, #f3ebe3 100%);
    overflow: hidden;
}

.top-vendidos::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(168, 137, 78, .65), transparent);
}

.top-vendidos-inner {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.tv-tabs {
    display: inline-flex;
    align-self: center;
    padding: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.64);
    border: 1px solid rgba(154, 62, 49, .08);
    box-shadow: var(--shadow-xs);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    gap: 4px;
}

.tv-tab {
    border: 0;
    background: transparent;
    color: var(--muted);
    min-height: 42px;
    padding: 0 1.05rem;
    border-radius: 999px;
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    transition: transform .24s var(--transition), background .24s var(--transition), color .24s var(--transition), box-shadow .24s var(--transition);
}

.tv-tab:hover:not(.active) {
    color: var(--text);
}

.tv-tab.active {
    background: linear-gradient(135deg, var(--red) 0%, var(--red-soft) 100%);
    color: #fff;
    box-shadow: 0 10px 28px rgba(154, 62, 49, .18);
}

.tv-carousel-wrap {
    position: relative;
}

.tv-panel {
    display: none;
}

.tv-panel.active {
    display: block;
}

.tv-track-outer {
    overflow: hidden;
    padding-top: .5rem;
}

.tv-track {
    display: grid;
    gap: 1rem;
}

.tv-track.tv-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tv-grid {
    align-items: stretch;
}

.tv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.60));
    border: 1px solid rgba(154, 62, 49, .08);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: transform .28s var(--transition), box-shadow .28s var(--transition), border-color .28s var(--transition), background .28s var(--transition);
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    isolation: isolate;
}

.tv-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: .8s ease;
    pointer-events: none;
    z-index: 1;
}

.tv-card:hover::before {
    transform: translateX(120%);
}

.tv-card:hover {
    transform: translateY(-6px);
    border-color: rgba(200, 169, 110, .28);
    box-shadow: 0 20px 60px rgba(33, 18, 14, .12);
}

.tv-card-rank,
.tv-card-badge-hot {
    position: absolute;
    z-index: 3;
}

.tv-card-rank {
    top: 12px;
    left: 12px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.9);
    color: var(--red);
    border: 1px solid rgba(154, 62, 49, .10);
    font-size: .62rem;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(33, 18, 14, .08);
}

.tv-card-rank.rank-1 {
    background: linear-gradient(135deg, #e8c85f 0%, #f6e7a4 100%);
    color: #24150f;
}

.tv-card-rank.rank-2 {
    background: linear-gradient(135deg, #e9edf3 0%, #c8ced8 100%);
    color: #17202b;
}

.tv-card-rank.rank-3 {
    background: linear-gradient(135deg, #e2b08a 0%, #c78359 100%);
    color: #24150f;
}

.tv-card-badge-hot {
    top: 12px;
    right: 12px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(154, 62, 49, .92);
    color: #fff;
    font-size: .5rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: 0 10px 20px rgba(154, 62, 49, .18);
}

.tv-card-media {
    aspect-ratio: 1 / 1.16;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(200,169,110,.22), transparent 55%),
        linear-gradient(180deg, rgba(243, 235, 227, .95), rgba(255,255,255,.65));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.tv-card-media::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 54%;
    background: linear-gradient(to top, rgba(33, 18, 14, .10), transparent);
    pointer-events: none;
}

.tv-card-media img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 18px 34px rgba(33, 18, 14, .16));
    transform: translateZ(0);
    transition: transform .45s var(--transition);
    position: relative;
    z-index: 2;
}

.tv-card:hover .tv-card-media img {
    transform: translateY(-4px) scale(1.04);
}

.tv-card-body {
    padding: 1rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    flex: 1;
    position: relative;
    z-index: 2;
}

.tv-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.tv-card-marca {
    font-size: .56rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold-dark);
}

.tv-card-chip {
    font-size: .52rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(154, 62, 49, .06);
    color: var(--red);
    border: 1px solid rgba(154, 62, 49, .08);
    white-space: nowrap;
}

.tv-card-nome {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    line-height: 1.05;
    color: var(--text);
    font-weight: 500;
}

.tv-card-tipo {
    font-size: .58rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--faint);
}

.tv-card-desc {
    font-size: .74rem;
    line-height: 1.65;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tv-card-meta {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding-top: .55rem;
    margin-top: .2rem;
    border-top: 1px solid rgba(154, 62, 49, .08);
}

.tv-card-meta span {
    font-size: .64rem;
    color: var(--muted);
    line-height: 1.45;
}

.tv-card-meta strong {
    color: var(--red);
}

.tv-card-wpp {
    margin-top: auto;
    width: 100%;
    min-height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--red) 0%, var(--red-soft) 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: transform .24s var(--transition), box-shadow .24s var(--transition);
    box-shadow: 0 12px 24px rgba(154, 62, 49, .16);
}

.tv-card-wpp:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(154, 62, 49, .2);
}

/* fallback loading top-vendidos */
.tv-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

/* =========================================================
   FEEDBACKS
========================================================= */

.feedbacks {
    position: relative;
    padding: 5rem 0 4.25rem;
    background:
        linear-gradient(180deg, #f8f4ee 0%, #f3ebe3 100%);
    overflow: hidden;
}

.feedbacks::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 169, 110, .52), transparent);
}

.feedbacks::after {
    content: '"';
    position: absolute;
    top: 1.6rem;
    right: 4%;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(8rem, 18vw, 18rem);
    color: rgba(154, 62, 49, .04);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.feedbacks-inner {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.feedbacks-title {
    color: var(--text);
}

.feedbacks-title em {
    color: var(--red);
}

.fb-track-outer {
    padding-top: .35rem;
}

.fb-track {
    display: grid;
    gap: 1rem;
}

.fb-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fb-card {
    position: relative;
    padding: 1.35rem 1.25rem 1.2rem;
    border-radius: 22px;
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(154, 62, 49, .08);
    box-shadow: var(--shadow-xs);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: .85rem;
    overflow: hidden;
    transition: transform .28s var(--transition), box-shadow .28s var(--transition), border-color .28s var(--transition);
}

.fb-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 15%, rgba(255,255,255,.22) 50%, transparent 85%);
    transform: translateX(-120%);
    transition: .8s ease;
    pointer-events: none;
}

.fb-card:hover::before {
    transform: translateX(120%);
}

.fb-card:hover {
    transform: translateY(-5px);
    border-color: rgba(200, 169, 110, .26);
    box-shadow: var(--shadow-soft);
}

.fb-stars {
    display: flex;
    gap: 4px;
}

.fb-star {
    color: var(--gold);
    font-size: .84rem;
}

.fb-star.empty {
    color: rgba(200, 169, 110, .22);
}

.fb-produto-tag {
    align-self: flex-start;
    font-size: .52rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--red);
    background: rgba(154, 62, 49, .06);
    border: 1px solid rgba(154, 62, 49, .09);
    padding: 4px 10px;
    border-radius: 999px;
}

.fb-texto {
    font-size: .82rem;
    line-height: 1.9;
    color: var(--muted);
    font-style: italic;
    flex: 1;
}

.fb-autor {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(154, 62, 49, .08);
}

.fb-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.65)),
        linear-gradient(135deg, rgba(154,62,49,.08), rgba(200,169,110,.10));
    border: 1px solid rgba(200, 169, 110, .36);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    color: var(--red);
    text-transform: uppercase;
    flex-shrink: 0;
    overflow: hidden;
}

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

.fb-nome {
    font-size: .74rem;
    font-weight: 600;
    color: var(--text);
}

.fb-data {
    font-size: .6rem;
    color: var(--faint);
}

.fb-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted);
    font-size: .85rem;
}

/* =========================================================
   CATÁLOGO
========================================================= */

.catalog {
    position: relative;
    padding: 0 0 4rem;
    background:
        radial-gradient(circle at top, rgba(255,255,255,.75), transparent 24%),
        linear-gradient(180deg, #fbf8f4 0%, #f4ede6 100%);
}

.catalog-shell {
    padding-top: 1rem;
}

.catalog-header {
    position: relative;
    text-align: center;
    padding: 5rem 1rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
}

.catalog-header h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.5rem, 4.4vw, 3.7rem);
    line-height: 1;
    font-weight: 300;
    color: var(--text);
}

.catalog-header h2 em {
    color: var(--red);
    font-style: italic;
}

.catalog-header-line {
    margin-top: .85rem;
}

.catalog-filtro-advanced {
    width: 100%;
    margin-top: 1.8rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
}

.filtro-group {
    position: relative;
}

.filtro-search {
    position: relative;
    display: flex;
    align-items: center;
}

.filtro-search-icon {
    position: absolute;
    left: 14px;
    color: var(--faint);
    font-size: .92rem;
    pointer-events: none;
    z-index: 2;
}

.catalog-filtro-advanced input[type="text"] {
    height: 48px;
    min-width: 250px;
    padding: 0 1rem 0 2.55rem;
    border-radius: 14px;
    border: 1px solid rgba(154, 62, 49, .08);
    background: rgba(255,255,255,.70);
    color: var(--text);
    outline: none;
    transition: border-color .24s var(--transition), box-shadow .24s var(--transition), background .24s var(--transition), transform .24s var(--transition);
    box-shadow: var(--shadow-xs);
}

.catalog-filtro-advanced input[type="text"]::placeholder {
    color: var(--faint);
}

.catalog-filtro-advanced input[type="text"]:focus {
    border-color: rgba(200, 169, 110, .45);
    box-shadow: 0 0 0 4px rgba(200, 169, 110, .10);
    background: rgba(255,255,255,.84);
}

.custom-select-wrap {
    position: relative;
    min-width: 190px;
}

.custom-select-trigger {
    height: 48px;
    padding: 0 1rem 0 1rem;
    border-radius: 14px;
    border: 1px solid rgba(154, 62, 49, .08);
    background: rgba(255,255,255,.70);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    cursor: pointer;
    font-size: .72rem;
    letter-spacing: .08em;
    transition: border-color .24s var(--transition), box-shadow .24s var(--transition), transform .24s var(--transition), background .24s var(--transition);
    user-select: none;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
}

.custom-select-trigger:hover,
.custom-select-wrap.open .custom-select-trigger {
    border-color: rgba(200, 169, 110, .35);
    background: rgba(255,255,255,.84);
    box-shadow: 0 0 0 4px rgba(200, 169, 110, .10);
}

.custom-select-trigger .caret {
    font-size: .72rem;
    color: var(--faint);
    transition: transform .22s ease;
    flex-shrink: 0;
}

.custom-select-wrap.open .custom-select-trigger .caret {
    transform: rotate(180deg);
}

.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 100%;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid rgba(154, 62, 49, .08);
    box-shadow: var(--shadow-medium);
    overflow-y: auto;
    max-height: 280px;
    z-index: 200;
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.custom-select-wrap.open .custom-select-dropdown {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.custom-select-dropdown::-webkit-scrollbar {
    width: 7px;
}

.custom-select-dropdown::-webkit-scrollbar-track {
    background: rgba(255,255,255,.7);
    border-radius: 0 16px 16px 0;
}

.custom-select-dropdown::-webkit-scrollbar-thumb {
    background: rgba(200,169,110,.9);
    border-radius: 999px;
}

.custom-select-option {
    padding: 11px 15px;
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--muted);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
    white-space: nowrap;
    border-bottom: 1px solid rgba(154, 62, 49, .07);
}

.custom-select-option:last-child {
    border-bottom: none;
}

.custom-select-option:hover {
    background: rgba(243, 235, 227, .92);
    color: var(--red);
}

.custom-select-option.selected {
    color: var(--red);
    font-weight: 600;
    background: rgba(154, 62, 49, .04);
    position: relative;
}

.custom-select-option.selected::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
}

.filtro-submit {
    height: 48px;
    padding: 0 1.3rem;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%);
    color: #21140f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .24s var(--transition), box-shadow .24s var(--transition), filter .24s var(--transition);
    box-shadow: 0 12px 28px rgba(200, 169, 110, .18);
}

.filtro-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(200, 169, 110, .22);
}

.catalog-count {
    margin-top: .75rem;
    font-size: .58rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
}

.catalog-count-clear {
    color: var(--red);
    border-bottom: 1px solid rgba(154, 62, 49, .18);
    transition: color .2s ease, border-color .2s ease;
}

.catalog-count-clear:hover {
    color: var(--red-dark);
    border-color: rgba(154, 62, 49, .35);
}

.catalog-grid {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* =========================================================
   PRODUTOS / CARDS PREMIUM
========================================================= */

.product-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr);
    min-height: 330px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.64));
    border: 1px solid rgba(154, 62, 49, .08);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform .3s var(--transition), box-shadow .3s var(--transition), border-color .3s var(--transition);
    isolation: isolate;
}

.product-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: .85s ease;
    pointer-events: none;
    z-index: 1;
}

.product-card:hover::before {
    transform: translateX(120%);
}

.product-card:hover {
    transform: translateY(-4px);
    border-color: rgba(200, 169, 110, .22);
    box-shadow: var(--shadow-medium);
}

.product-card * {
    position: relative;
    z-index: 2;
}

.product-card-premium {
    margin-bottom: .1rem;
}

.product-ambience {
    min-height: 100%;
    background-size: cover;
    background-position: center;
    background-color: var(--cream-mid);
    transition: transform .7s cubic-bezier(0.22, 1, 0.36, 1), filter .7s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card:hover .product-ambience {
    transform: scale(1.03);
    filter: saturate(1.03);
}

.product-bottle {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.6rem 1rem;
    background:
        radial-gradient(circle at center, rgba(200,169,110,.14), transparent 56%),
        linear-gradient(180deg, rgba(243,235,227,.96), rgba(255,255,255,.62));
    border-left: 1px solid rgba(154, 62, 49, .08);
    border-right: 1px solid rgba(154, 62, 49, .08);
}

.product-bottle img {
    max-height: 230px;
    width: auto;
    object-fit: contain;
    opacity: 0;
    filter: drop-shadow(0 18px 36px rgba(33,18,14,.18));
    transition: opacity .35s ease, transform .45s var(--transition);
}

.product-bottle img.loaded {
    opacity: 1;
}

.product-card:hover .product-bottle img {
    transform: translateY(-4px) scale(1.03);
}

.product-info {
    padding: 1.8rem 1.55rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .48rem;
}

.product-badge,
.product-badge-light {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .54rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    border: 1px solid rgba(154, 62, 49, .08);
    white-space: nowrap;
}

.product-badge {
    background: rgba(154, 62, 49, .05);
    color: var(--red);
}

.product-badge-light {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.18);
    color: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.product-marca {
    font-size: .56rem;
    color: var(--gold-dark);
    letter-spacing: .28em;
    text-transform: uppercase;
}

.product-link {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-align: left;
    display: block;
    width: 100%;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.7rem, 2.6vw, 2.1rem);
    font-weight: 300;
    color: var(--red);
    line-height: 1.03;
    transition: color .2s ease;
}

.product-link:hover {
    color: var(--red-dark);
}

.product-type {
    font-size: .59rem;
    color: var(--faint);
    letter-spacing: .2em;
    text-transform: uppercase;
}

.product-desc {
    padding-top: .7rem;
    margin-top: .1rem;
    border-top: 1px solid rgba(154, 62, 49, .08);
    font-size: .78rem;
    color: var(--muted);
    line-height: 1.72;
}

.product-tags {
    padding-top: .7rem;
    margin-top: .1rem;
    border-top: 1px solid rgba(154, 62, 49, .08);
    display: flex;
    flex-direction: column;
    gap: .28rem;
}

.product-tags p {
    font-size: .67rem;
    color: var(--muted);
    line-height: 1.5;
}

.product-tags strong {
    color: var(--red);
}

.product-open {
    cursor: pointer;
}

/* =========================================================
   SKELETON
========================================================= */

.skeleton-wrap {
    position: relative;
}

.skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #efe4db 25%, #f7f0e9 50%, #efe4db 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.15s infinite linear;
}

/* =========================================================
   EMPTY STATE
========================================================= */

.catalog-empty {
    text-align: center;
    padding: 4.5rem 1rem 1rem;
}

.catalog-empty i {
    font-size: 3rem;
    color: var(--gold);
    margin-bottom: .9rem;
    display: block;
}

.catalog-empty h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 300;
    color: var(--red);
    margin-bottom: .45rem;
}

.catalog-empty p {
    color: var(--muted);
    line-height: 1.8;
}

/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    position: relative;
    text-align: center;
    padding: 3.8rem 1rem 4.2rem;
    background:
        linear-gradient(180deg, rgba(154, 62, 49, .98), rgba(126, 47, 37, .98));
    color: rgba(255,255,255,.88);
    overflow: hidden;
}

.site-footer::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,110,.75), transparent);
}

.footer-line {
    width: 36px;
    height: 1px;
    margin: 1rem auto;
    background: rgba(200, 169, 110, .7);
}

.footer-brand {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 3.8vw, 2.8rem);
    font-weight: 300;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.95);
}

.footer-brand em {
    color: var(--gold);
    font-style: normal;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: .8rem;
    margin: 1.35rem 0;
}

.footer-social a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.88);
    background: rgba(255,255,255,.04);
    transition: transform .26s var(--transition), background .26s var(--transition), border-color .26s var(--transition), color .26s var(--transition);
}

.footer-social a:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.10);
    border-color: rgba(200,169,110,.8);
    color: var(--gold);
}

.footer-copy {
    font-size: .6rem;
    color: rgba(255,255,255,.42);
    letter-spacing: .2em;
    text-transform: uppercase;
}

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

body.modal-open {
    overflow: hidden;
}

.perfume-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
}

.perfume-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.perfume-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 12, 10, .68);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.perfume-modal-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1180px;
    max-height: 92vh;
    overflow: hidden;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.84));
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: var(--shadow-strong);
    transform: translateY(18px) scale(.985);
    transition: transform .28s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.perfume-modal.active .perfume-modal-content {
    transform: translateY(0) scale(1);
}

.perfume-modal-layout {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    min-height: min(90vh, 860px);
}

.perfume-modal-left {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.16), transparent 28%),
        linear-gradient(135deg, rgba(33, 18, 14, .92), rgba(77, 38, 30, .82));
}

.perfume-modal-banner {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
}

.perfume-modal-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(12,8,7,.24), rgba(12,8,7,.48)),
        linear-gradient(90deg, rgba(12,8,7,.42), rgba(12,8,7,.10));
}

.perfume-modal-overlay {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    min-height: 100%;
    padding: 2.4rem;
}

.perfume-modal-overlay-inner {
    max-width: 460px;
}

.perfume-modal-overlay-inner h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.6rem, 5vw, 4rem);
    line-height: .92;
    font-weight: 300;
    color: #fff;
    margin: .9rem 0 1rem;
    text-wrap: balance;
}

.perfume-modal-overlay-inner p {
    color: rgba(255,255,255,.80);
    line-height: 1.9;
    font-size: .92rem;
}

.perfume-modal-right {
    position: relative;
    padding: 2rem;
    overflow: auto;
    background:
        radial-gradient(circle at top right, rgba(200,169,110,.10), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,243,236,.92));
}

.perfume-modal-right::-webkit-scrollbar {
    width: 8px;
}

.perfume-modal-right::-webkit-scrollbar-track {
    background: rgba(255,255,255,.6);
}

.perfume-modal-right::-webkit-scrollbar-thumb {
    background: rgba(200,169,110,.9);
    border-radius: 999px;
}

.perfume-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(154, 62, 49, .10);
    background: rgba(255,255,255,.92);
    color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: transform .24s var(--transition), background .24s var(--transition), box-shadow .24s var(--transition);
    box-shadow: var(--shadow-xs);
}

.perfume-modal-close:hover {
    transform: translateY(-1px) rotate(4deg);
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.perfume-modal-image {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 280px;
    margin-bottom: 1.4rem;
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(200,169,110,.14), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.8), rgba(243,235,227,.75));
    border: 1px solid rgba(154, 62, 49, .08);
    box-shadow: var(--shadow-xs);
}

.perfume-modal-image img {
    max-height: 300px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    opacity: 0;
    filter: drop-shadow(0 18px 38px rgba(33,18,14,.18));
    transition: opacity .35s ease, transform .45s var(--transition);
    position: relative;
    z-index: 2;
}

.perfume-modal-image img.loaded {
    opacity: 1;
}

.perfume-modal-image:hover img {
    transform: translateY(-5px) scale(1.02);
}

.perfume-modal-brand {
    font-size: .66rem;
    letter-spacing: .28em;
    color: var(--gold-dark);
    text-transform: uppercase;
    margin-bottom: .55rem;
}

.perfume-modal-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.1rem, 3.8vw, 3rem);
    line-height: .98;
    color: var(--red);
    font-weight: 300;
    margin-bottom: .7rem;
}

.perfume-modal-type {
    font-size: .62rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 1rem;
}

.perfume-modal-desc {
    color: var(--muted);
    line-height: 1.9;
    font-size: .88rem;
}

.perfume-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    margin-top: 1.35rem;
}

.perfume-modal-item {
    padding: .95rem 1rem;
    border-radius: 16px;
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(154, 62, 49, .08);
    box-shadow: var(--shadow-xs);
}

.perfume-modal-label {
    font-size: .54rem;
    letter-spacing: .16em;
    color: var(--faint);
    text-transform: uppercase;
    margin-bottom: .35rem;
}

.perfume-modal-value {
    color: var(--red);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.45;
}

.perfume-modal-actions {
    display: flex;
    gap: .8rem;
    margin-top: 1.4rem;
}

.perfume-modal-actions .btn-wpp {
    width: 100%;
}

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

@media (max-width: 1280px) {
    .tv-track.tv-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-copy {
        order: 1;
    }

    .hero-aside {
        order: 2;
    }

    .tv-track.tv-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .product-card {
        grid-template-columns: 1fr 200px 1fr;
    }
}

@media (max-width: 980px) {
    .product-card {
        grid-template-columns: 1fr;
    }

    .product-ambience {
        min-height: 220px;
        order: 1;
    }

    .product-bottle {
        order: 2;
        border-left: 0;
        border-right: 0;
        border-top: 1px solid rgba(154, 62, 49, .08);
        border-bottom: 1px solid rgba(154, 62, 49, .08);
        min-height: 240px;
    }

    .product-info {
        order: 3;
        padding: 1.45rem 1.35rem 1.55rem;
    }

    .tv-track.tv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .perfume-modal-layout {
        grid-template-columns: 1fr;
    }

    .perfume-modal-right {
        max-height: 52vh;
    }

    .perfume-modal-left {
        min-height: 320px;
    }

    .perfume-modal-overlay {
        padding: 1.8rem;
    }

    .perfume-modal-overlay-inner h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 760px) {
    .hero {
        padding: 3.5rem .85rem 4rem;
        min-height: auto;
    }

    .hero-card {
        border-radius: 28px;
    }

    .hero-brand-row {
        align-items: flex-start;
    }

    .hero-logo {
        width: 78px;
        height: 78px;
    }

    .hero-stats {
        grid-template-columns: 1fr;
    }

    .hero-selos {
        grid-template-columns: 1fr;
    }

    .tv-track.tv-grid {
        grid-template-columns: 1fr;
    }

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

    .catalog-header {
        padding: 4rem 0 1.7rem;
    }

    .catalog-filtro-advanced {
        flex-direction: column;
        align-items: stretch;
    }

    .catalog-filtro-advanced input[type="text"],
    .custom-select-wrap,
    .custom-select-trigger,
    .filtro-submit {
        width: 100%;
        min-width: 0;
    }

    .custom-select-dropdown {
        top: auto;
        bottom: calc(100% + 8px);
    }

    .perfume-modal {
        padding: .6rem;
    }

    .perfume-modal-content {
        border-radius: 24px;
        max-height: 94vh;
    }

    .perfume-modal-right {
        padding: 1.15rem;
    }

    .perfume-modal-grid {
        grid-template-columns: 1fr;
    }

    .perfume-modal-image {
        min-height: 220px;
    }

    .perfume-modal-image img {
        max-height: 240px;
    }
}

@media (max-width: 640px) {
    .section-title {
        font-size: clamp(1.9rem, 7vw, 2.3rem);
    }

    .brand {
        font-size: 2.2rem;
    }

    .tagline {
        line-height: 1.7;
        letter-spacing: .22em;
    }

    .hero-title {
        max-width: 100%;
    }

    .hero-sobre {
        padding: 1.05rem 1rem;
    }

    .hero-sobre-texto,
    .section-subtitle,
    .product-desc,
    .fb-texto,
    .perfume-modal-desc {
        font-size: .84rem;
    }

    .tv-card-nome {
        font-size: 1.28rem;
    }

    .catalog-header h2 {
        font-size: 2.2rem;
    }

    .product-link {
        font-size: 1.68rem;
    }

    .catalog-empty {
        padding-top: 3.5rem;
    }

    .site-footer {
        padding: 3.4rem 1rem 4rem;
    }
}

/* =========================================================
   TOQUE / HOVER
========================================================= */

@media (hover: none) {
    .hero-selo:hover,
    .hero-btn-cat:hover,
    .tv-card:hover,
    .fb-card:hover,
    .product-card:hover,
    .btn-wpp:hover,
    .footer-social a:hover,
    .perfume-modal-close:hover {
        transform: none;
        box-shadow: inherit;
    }

    .tv-card:hover .tv-card-media img,
    .product-card:hover .product-bottle img,
    .perfume-modal-image:hover img {
        transform: none;
    }
}