@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600&display=swap');
    
/* ========== 01. CORES E CONFIGURAÇÕES GERAIS ========== */
:root {
    --wine:#780d34;
    --deep:#43091f;
    --pink:#f9edf0;
    --gold:#c99b64;
    --text:#251c20}

* {
    box-sizing:border-box}

html {
    scroll-behavior:smooth}

body {
    margin:0;
    color:var(--text);
    font-family:'DM Sans',sans-serif;
    background:#fff}

button,input,select {
    font:inherit}

button {
    cursor:pointer}

/* ========== 02. FAIXA SUPERIOR ========== */
.shipping {
    background:var(--wine);
    color:white;
    text-align:center;
    padding:11px 15px;
    font-size:11px;
    letter-spacing:1.5px}

/* ========== 03. CABEÇALHO ========== */
header {
    height:105px;
    display:flex;
    align-items:center;
    gap:50px;
    max-width:1450px;
    padding:0 35px;
    margin:auto}

.brand {
    display:flex;
    align-items:center;
    text-decoration:none;
    color:var(--deep);
    gap:12px;
    white-space:nowrap}

/* Logo oficial no topo e no rodapé. Ajuste a largura aqui. */
.brand-logo {
    display: block;
    width: 260px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.brand-symbol {
    font-family:'Playfair Display',serif;
    font-size:70px;
    line-height:1;
    font-style:italic;
    color:var(--wine)}

.brand strong {
    display:block;
    font-family:'Playfair Display',serif;
    font-size:36px;
    letter-spacing:4px;
    font-weight:500;
    line-height:1}

.brand small {
    display:block;
    text-align:center;
    letter-spacing:5px;
    font-size:10px;
    margin-top:7px}

.search {
    border:1px solid #ddd;
    display:flex;
    align-items:center;
    flex:1;
    height:45px;
    padding:0 15px}

.search input {
    width:100%;
    border:0;
    outline:0}

.search span {
    font-size:30px}

.plain {
    border:0;
    background:none;
    color:var(--deep);
    font-weight:600}

.header-actions b {
    background:var(--wine);
    color:#fff;
    border-radius:100%;
    padding:3px 7px}

.mobile {
    display:none}

/* ========== 04. NAVEGAÇÃO ========== */
nav {
    display:flex;
    gap:36px;
    justify-content:center;
    padding:20px 15px;
    border-top:1px solid #eee}

nav a {
    text-decoration:none;
    color:#262024;
    font-size:12px;
    font-weight:700;
    letter-spacing:.6px}

nav a:hover {
    color:var(--wine)}

/* ========== 05. BANNER PRINCIPAL ========== */
.hero {
    min-height:450px;
    background:linear-gradient(115deg,#fff8f4 10%,#f5dce2 62%,#9b1648 150%);
    display:grid;
    grid-template-columns:1.2fr 1fr;
    overflow:hidden}

.hero-copy {
    padding:75px max(45px,calc((100vw - 1270px)/2));
    padding-right:10px;
    z-index:1}

.eyebrow {
    color:var(--wine);
    font-size:11px;
    font-weight:700;
    letter-spacing:3px}

.hero h1 {
    font-family:'Playfair Display',serif;
    font-weight:500;
    font-size:clamp(46px,5vw,78px);
    line-height:1.1;
    margin:18px 0;
    color:var(--deep)}

.hero h1 em {
    color:var(--wine);
    font-weight:400}

.hero-copy>p:not(.eyebrow) {
    font-size:17px;
    color:#68545a;
    max-width:380px;
    line-height:1.7}

.cta {
    display:inline-block;
    border:0;
    background:var(--wine);
    color:#fff;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
    letter-spacing:1px;
    padding:18px 26px;
    border-radius:3px;
    margin-top:22px}

.cta:hover {
    background:var(--deep)}

.hero-art {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    position:relative;
    background:radial-gradient(ellipse,#f8d9df 0%,transparent 65%)}

.hero-letter {
    font-family:'Playfair Display',serif;
    font-style:italic;
    font-size:330px;
    color:var(--wine);
    opacity:.85;
    line-height:1}

.hero-caption {
    font-family:'Playfair Display',serif;
    color:var(--deep);
    font-size:40px;
    letter-spacing:9px;
    margin-top:-35px;
    text-align:center}

.hero-caption span {
    display:block;
    font-family:'DM Sans',sans-serif;
    font-size:11px;
    letter-spacing:7px;
    margin-top:10px}

/* ========== 06. BENEFÍCIOS ========== */
.benefits {
    display:flex;
    justify-content:space-around;
    gap:15px;
    background:#fcf7f7;
    padding:24px;
    color:var(--wine);
    font-size:13px}

/* ========== 07. CATÁLOGO E FILTROS ========== */
.catalog {
    max-width:1370px;
    margin:auto;
    padding:65px 30px}

.section-head {
    text-align:center;
    margin-bottom:35px}

.section-head h2 {
    font-family:'Playfair Display',serif;
    color:var(--deep);
    font-size:44px;
    font-weight:500;
    margin:8px}

.section-head>p:last-child {
    color:#82777a}

.filters {
    display:flex;
    gap:10px;
    justify-content:flex-end;
    margin-bottom:25px}

.filters select {
    padding:12px 16px;
    border:1px solid #ddd;
    background:white}

/* ========== 08. CARTÕES DE PRODUTOS ========== */
.product-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:23px}

.product {
    position:relative}

.product-photo {
    height:330px;
    background:linear-gradient(140deg,#f6e8e8,#e7cbd1);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    position:relative}

.product-photo:before {
    content:'';
    position:absolute;
    width:210px;
    height:210px;
    border:1px solid #ffffffa8;
    border-radius:50%}

.garment {
    font-size:100px;
    filter:drop-shadow(0 10px 10px #8a627144);
    z-index:1}

.product-info {
    padding:15px 0}

.product-info h3 {
    font-size:15px;
    font-weight:500;
    margin:0 0 7px}

.product-info p {
    color:var(--wine);
    font-weight:700;
    margin:0 0 12px}

.product-info button {
    background:transparent;
    border:1px solid var(--wine);
    color:var(--wine);
    padding:10px;
    width:100%;
    font-size:12px;
    font-weight:700}

.product-info button:hover {
    background:var(--wine);
    color:white}

.demo-note {
    font-size:12px;
    color:#777;
    margin-top:28px}

/* ========== 09. RODAPÉ ========== */
footer {
    background:#330c1b;
    color:#f7e9ee;
    padding:50px 30px;
    text-align:center}

footer .brand {
    justify-content:center;
    color:white}

/* O fundo claro preserva a leitura da logo vinho no rodapé. */
footer .footer-brand {
    width: fit-content;
    margin: 0 auto;
    padding: 12px 20px;
    border-radius: 8px;
    background: #fff;
}

footer p {
    font-size:12px;
    color:#d9bfc7}

/* ========== 10. SACOLA LATERAL ========== */
.drawer {
    position:fixed;
    z-index:10;
    right:0;
    top:0;
    height:100vh;
    width:min(420px,100%);
    background:white;
    transform:translateX(100%);
    transition:.25s;
    display:flex;
    flex-direction:column;
    padding:25px;
    box-shadow:-10px 0 40px #0002}

.drawer.open {
    transform:translateX(0)}

.drawer-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #ddd}

.drawer-head h2 {
    font-family:'Playfair Display',serif}

.drawer #cartItems {
    overflow:auto;
    flex:1}

.cart-line {
    padding:18px 0;
    border-bottom:1px solid #eee;
    display:flex;
    justify-content:space-between;
    gap:10px}

.cart-line button {
    border:0;
    background:#f6e8eb;
    color:var(--wine)}

.drawer-bottom {
    border-top:1px solid #ddd;
    padding-top:12px}

.drawer-bottom .cta {
    width:100%}

.drawer-bottom small {
    display:block;
    color:#888;
    margin-top:12px}

.overlay {
    position:fixed;
    inset:0;
    background:#0008;
    z-index:9;
    display:none}

.overlay.show {
    display:block}

/* ========== 11. RESPONSIVIDADE: TABLETS E CELULARES ========== */
@media (max-width: 850px) {
    .brand-logo {
        width: 190px;
    }

    header {
    height:auto;
    padding:18px;
    gap:12px;
    flex-wrap:wrap}

.mobile {
    display:block}

.brand strong {
    font-size:25px}

.brand-symbol {
    font-size:45px}

.brand small {
    font-size:8px;
    letter-spacing:3px}

.search {
    order:3;
    flex-basis:100%}

.header-actions {
    margin-left:auto}

nav {
    display:none;
    flex-wrap:wrap;
    gap:20px}

nav.open {
    display:flex}

.hero {
    grid-template-columns:1fr;
    min-height:unset}

.hero-copy {
    padding:55px 30px}

.hero-art {
    display:none}

.benefits {
    flex-direction:column;
    text-align:center}

.product-grid {
    grid-template-columns:repeat(2,1fr);
    gap:15px}

.product-photo {
    height:240px}

.catalog {
    padding:45px 15px}

}

@media (max-width: 450px) {
    .product-photo {
    height:190px}

.garment {
    font-size:75px}

.section-head h2 {
    font-size:36px}

.hero h1 {
    font-size:52px}

}



/* Celulares pequenos: mantenha logo e sacola na mesma linha. */
@media (max-width: 450px) {
    .brand-logo { width: 155px; }
}

/* ==========================================================
   12. TOPO NOVO — baseado no layout aprovado
   Modifique este bloco para ajustar o cabeçalho.
   ========================================================== */
.site-header {
    max-width: 1600px;
    height: 105px;
    padding: 0 36px;
    gap: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-menu, .header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    background: transparent;
    color: #240d18;
    white-space: nowrap;
    cursor: pointer;
}
.header-menu { font-size: 13px; font-weight: 700; color: var(--wine); }
.header-menu svg, .header-action svg, .search svg {
    width: 25px;
    height: 25px;
    flex: none;
}
.site-header .brand { flex: none; }
.site-header .brand-logo { width: 245px; }
.site-header .search { flex: 1 1 280px; min-width: 130px; max-width: none; }
.site-header .search svg { width: 22px; height: 22px; }
.site-header .header-actions { display: flex; align-items: center; gap: 18px; margin-left: 0; }
.site-header .header-action { padding: 6px 0; font-size: 12px; font-weight: 600; }
.site-header .cart-action { gap: 4px; }
.site-header .cart-action b {
    display: inline-grid;
    place-items: center;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border-radius: 50%;
    font-size: 11px;
    color: #fff;
    background: var(--wine);
}
/* Menu de categorias: aberto por padrão no computador. */
#nav.nav-hidden { display: none; }
.info-dialog { border: 1px solid #e6d8dd; border-radius: 12px; padding: 28px; max-width: 360px; box-shadow: 0 15px 50px #0002; }
.info-dialog::backdrop { background: #0007; }
.info-dialog h2 { font-family: 'Playfair Display', serif; color: var(--wine); }
.info-dialog .cta { margin-top: 8px; }
@media (max-width: 1050px) {
    .site-header { gap: 16px; padding: 0 20px; }
    .site-header .brand-logo { width: 200px; }
    .account-action span { display: none; }
    .site-header .header-actions { gap: 12px; }
}
@media (max-width: 850px) {
    .site-header { height: auto; min-height: 88px; flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
    .site-header .brand-logo { width: 175px; }
    .site-header .search { order: 3; flex: 1 0 100%; }
    .site-header .header-actions { margin-left: auto; gap: 10px; }
    .header-menu span { display: none; }
    #nav { display: none; }
    #nav.open:not(.nav-hidden) { display: flex; }
}
@media (max-width: 430px) {
    .site-header { gap: 8px; padding: 12px 10px; }
    .site-header .brand-logo { width: 135px; }
    .site-header .header-actions { gap: 7px; }
    .site-header .header-action svg { width: 21px; height: 21px; }
    .header-menu svg { width: 22px; height: 22px; }
}

/* Foto real dos produtos cadastrados pelo painel */
.product-image { width:100%; height:100%; object-fit:cover; position:relative; z-index:1; }
.product-info del {color:#9c8790;font-size:12px;font-weight:400;}



/* ==========================================
   13. MENU MINHA CONTA
   ========================================== */

/* Container do botão */
.account-container {
    position: relative;
}

/* Janela suspensa */
.account-menu {
    position: absolute;
    top: calc(100% + 18px);
    right: 0;

    width: 280px;
    padding: 25px;

    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 8px;

    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);

    z-index: 1000;
    text-align: center;
}

/* Esconder quando estiver fechada */
.account-menu[hidden] {
    display: none;
}

/* Título */
.account-menu h3 {
    color: #780d34;
    font-size: 19px;
    margin: 0 0 12px;
}

/* Descrição */
.account-menu p {
    font-size: 13px;
    color: #777777;
    margin-bottom: 20px;
}

/* Botão de acesso administrativo */
.admin-login-link {
    display: block;
    padding: 13px 15px;

    background: #780d34;
    color: #ffffff;

    border-radius: 5px;
    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition: background 0.2s ease;
}

/* Efeito ao passar o mouse */
.admin-login-link:hover {
    background: #510923;
}

/* Versão celular */
@media (max-width: 850px) {
    .account-menu {
        width: min(280px, calc(100vw - 30px));
        right: -75px;
    }
}