:root {
  --coal: #11100e;
  --coal-soft: #1b1713;
  --wood: #3a2b22;
  --cognac: #a45f32;
  --copper: #b87333;
  --bronze: #8c6a3d;
  --parchment: #e9ddc5;
  --turquoise: #2a8f8a;
  --cream: #f4ead8;
  --font-body: "Barlow Condensed", Arial, sans-serif;
  --font-display: "Rye", Georgia, serif;
  --font-condensed: "Barlow Condensed", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--coal); color: var(--parchment); font-family: var(--font-body), Arial, sans-serif; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.site-header { height: 88px; padding: 0 4vw; position: fixed; top: 0; left: 0; z-index: 30; width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; background: linear-gradient(180deg, rgba(9,7,6,.85) 0%, rgba(9,7,6,.42) 62%, rgba(9,7,6,0) 100%); border-bottom: 1px solid transparent; transition: background .28s ease, box-shadow .28s ease, backdrop-filter .28s ease, border-color .28s ease, height .28s ease; }
/* ao rolar, o header do topo fica PREENCHIDO (sólido) pra não se misturar com o texto do conteúdo */
.site-header.scrolled { background: rgba(18,16,14,.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(184,115,51,.28); box-shadow: 0 6px 26px rgba(0,0,0,.4); }
/* header fixo cobre 88px: dá respiro pros alvos de âncora (#novidades, #autenticidade, #historia) */
html { scroll-padding-top: 100px; }
.site-header .brand-logo { height: 69px; }
.header-actions { display: inline-flex; align-items: center; gap: 14px; justify-self: end; }
.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; text-transform: uppercase; color: #c77c46; font-family: var(--font-display), Georgia, serif; text-decoration: none; }
.brand-logo { height: 88px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.brand-word { color: var(--parchment); font-family: var(--font-condensed), Arial, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1; }
.brand-name { font-size: clamp(1.2rem, 2vw, 2rem); font-weight: 800; letter-spacing: .035em; }
.brand-rule { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: Georgia, serif; font-size: 9px; }
.brand-rule::before, .brand-rule::after { content: ""; width: 82px; height: 1px; background: var(--copper); }
.brand-rule b { width: 27px; height: 27px; border: 1px solid var(--copper); border-radius: 50%; display: grid; place-items: center; font-size: 14px; }
.main-nav { display: flex; justify-content: center; gap: clamp(18px, 2.7vw, 44px); }
.main-nav a { color: var(--parchment); font-family: var(--font-condensed), Arial, sans-serif; text-transform: uppercase; font-size: .82rem; letter-spacing: .08em; padding: 12px 0; position: relative; }
.main-nav a::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 0; height: 1px; background: var(--copper); transition: width .22s ease; }
.main-nav a:hover::after { width: 100%; }
.cart-button { color: var(--parchment); text-decoration: none; border: 1px solid rgba(233,221,197,.45); background: rgba(17,16,14,.55); padding: 12px 14px; text-transform: uppercase; font-size: .72rem; letter-spacing: .1em; cursor: pointer; }
.cart-button span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 8px; border-radius: 50%; color: var(--coal); background: var(--turquoise); font-weight: 800; }
.menu-toggle { display: none; }

.hero-reference { display: block; position: relative; width: 100%; overflow: hidden; background: #070706; }
/* overlay do hero FLEXÍVEL (título/subtítulo/botão em HTML) — só aparece com "texto embutido" DESLIGADO */
.hero-overlay { position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; pointer-events: none; }
.hero-overlay-in { pointer-events: auto; width: min(46%, 620px); padding-left: 4vw; }
.hero-overlay-in h1 { margin: 0 0 18px; font-family: var(--font-display), Georgia, serif; text-transform: uppercase; letter-spacing: .04em; color: var(--parchment); font-size: clamp(2.4rem, 4.6vw, 4.6rem); line-height: .95; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.hero-overlay-in p { margin: 0 0 26px; color: #e3d6c1; font-size: clamp(1rem, 1.4vw, 1.25rem); max-width: 460px; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.hero-cta-btn { display: inline-block; background: var(--copper); color: #1a120b; padding: 15px 30px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: .82rem; border-radius: 4px; text-decoration: none; }
.hero-cta-btn:hover { background: #cf8a4e; }
@media (max-width: 780px) { .hero-overlay { align-items: flex-end; padding-bottom: 9%; } .hero-overlay-in { width: 100%; padding: 0 22px; text-align: center; } .hero-overlay-in p { margin-left: auto; margin-right: auto; } }
.hero-reference picture { display: block; width: 100%; }
.hero-reference > img, .hero-reference picture img { display: block; width: 100%; height: auto; }
/* áreas clicáveis sobre a arte (posições em % — escalam junto com a imagem) */
.hero-reference .hs { position: absolute; display: block; z-index: 5; }
.hero-reference .hs-logo { left: 3%; top: 2.5%; width: 21%; height: 9%; }
.hero-reference .hs-nav1 { left: 27.3%; top: 3.4%; width: 7.6%; height: 5.6%; }
.hero-reference .hs-nav2 { left: 35%;   top: 3.4%; width: 6%;   height: 5.6%; }
.hero-reference .hs-nav3 { left: 40.5%; top: 3.4%; width: 5%;   height: 5.6%; }
.hero-reference .hs-nav4 { left: 45.4%; top: 3.4%; width: 7.6%; height: 5.6%; }
.hero-reference .hs-nav5 { left: 52.5%; top: 3.4%; width: 8.8%; height: 5.6%; }
.hero-reference .hs-cta  { left: 4.4%;  top: 73.5%; width: 23%; height: 8%; }
@media (max-width: 780px){ .hero-reference .hs-cta { left: 8%; top: 45%; width: 35%; height: 5.5%; } }
.hero-reference .ref-actions { position: absolute; z-index: 6; top: 3.4%; right: 3.5%; display: flex; align-items: center; gap: 14px; }
.hero-reference .ref-cart { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid rgba(224,196,150,.55); border-radius: 999px; background: rgba(12,10,8,.45); color: #f2e6d2; font-family: var(--font-display), Georgia, serif; text-transform: uppercase; letter-spacing: .12em; font-size: 14px; cursor: pointer; backdrop-filter: blur(3px); }
.hero-reference .ref-cart:hover { background: rgba(184,115,51,.85); border-color: transparent; color: #1a120b; }
.hero-reference .ref-cart .cart-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #b87333; color: #1a120b; font-size: 12px; font-weight: 700; }
.reference-hotspots { position: absolute; z-index: 4; left: 27.4%; top: 2.7%; width: 32.5%; height: 7.5%; display: grid; grid-template-columns: 1.08fr .8fr .65fr 1.2fr 1.35fr; }
.reference-hotspots a, .reference-cta { display: block; border: 1px solid transparent; }
.reference-hotspots a:focus-visible, .reference-cta:focus-visible { border-color: var(--turquoise); outline: 2px solid var(--parchment); outline-offset: 2px; }
.reference-cta { position: absolute; z-index: 4; left: 4%; top: 71.2%; width: 23.8%; height: 8.4%; }
.hero-functional { display: none; }
.hero-photo-mobile { display: none; }
.hero { min-height: 900px; height: 100vh; max-height: 1040px; position: relative; overflow: hidden; background: radial-gradient(circle at 78% 35%, rgba(164,95,50,.2), transparent 32%), linear-gradient(90deg, #090907 0%, #11100e 45%, #231812 100%); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .24; background-image: repeating-linear-gradient(90deg, transparent 0 44px, rgba(255,255,255,.018) 45px, transparent 47px); mix-blend-mode: screen; }
.sunset { position: absolute; right: -2%; top: 0; width: 34%; height: 100%; background: linear-gradient(90deg, rgba(17,16,14,1), rgba(17,16,14,.1) 46%, rgba(17,16,14,.05)), radial-gradient(circle at 72% 45%, #f0a83e 0 1.5%, #bd6128 3%, rgba(94,44,22,.65) 13%, transparent 34%), linear-gradient(160deg, #362018, #7c4229 48%, #21160f); clip-path: polygon(14% 0,100% 0,100% 100%,0 100%); opacity: .85; }
.hero-copy { position: relative; z-index: 8; width: 42%; padding: 175px 0 80px 4vw; }
.eyebrow { margin: 0 0 22px; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #d3b895; font-weight: 700; }
.eyebrow.copper { color: var(--copper); }
.hero h1, .section-heading h2, .authenticity-copy h2, .contact-section h2 { font-family: var(--font-display), Georgia, serif; text-transform: uppercase; letter-spacing: .05em; }
.hero h1 { margin: 0; color: var(--parchment); font-size: clamp(3.7rem, 6.2vw, 6.8rem); line-height: .88; text-shadow: 0 5px 35px #000; }
.western-divider { width: 78%; display: flex; align-items: center; gap: 14px; color: var(--copper); margin: 28px 0 22px; }
.western-divider::before, .western-divider::after { content: ""; height: 1px; background: var(--copper); flex: 1; }
.western-divider span { font-size: 14px; }
.hero-text { max-width: 470px; margin: 0 0 28px; font-size: clamp(1rem, 1.5vw, 1.28rem); line-height: 1.6; color: #e3d6c1; }
.primary-button { display: inline-flex; justify-content: center; align-items: center; min-height: 60px; padding: 0 34px; color: #fff7eb; background: linear-gradient(135deg, #bd692d, #91451f); border: 1px solid #d1844a; text-transform: uppercase; font-weight: 800; letter-spacing: .05em; box-shadow: 0 16px 36px rgba(0,0,0,.28); transition: transform .2s ease, filter .2s ease; }
.primary-button:hover { transform: translateY(-2px); filter: brightness(1.12); }
.one-only { width: max-content; margin-top: 24px; padding: 13px 30px; color: #54b9b4; border: 1px solid var(--turquoise); outline: 1px solid rgba(42,143,138,.4); outline-offset: 4px; font-family: var(--font-display), Georgia, serif; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em; }

.hero-stage { position: absolute; z-index: 6; right: 0; bottom: 0; width: 65%; height: 88%; }
.timber { position: absolute; background: linear-gradient(90deg, #1f140e, #513421 15%, #251810 55%, #674128 78%, #23150e); box-shadow: inset 0 2px 0 rgba(255,255,255,.06), 0 22px 45px #000; border: 1px solid #583821; }
.timber-one { width: 88%; height: 27%; left: 8%; bottom: 0; transform: perspective(500px) rotateX(4deg); }
.timber-two { width: 74%; height: 12%; right: 0; bottom: 23%; transform: rotate(-1deg); }
.hero-bag, .hero-saddle { position: absolute; object-fit: contain; filter: saturate(1.08) contrast(1.08) drop-shadow(0 20px 24px rgba(0,0,0,.65)); mix-blend-mode: normal; }
.hero-bag { z-index: 4; width: 47%; height: 66%; left: 8%; bottom: 16%; }
.hero-saddle { z-index: 3; width: 51%; height: 57%; right: 3%; top: 4%; }
.certificate { z-index: 8; position: absolute; right: 22%; bottom: 4%; width: 190px; padding: 17px 14px; color: #2a211a; background: linear-gradient(135deg, #ded0b6, #aa967a); border: 7px solid #27221c; outline: 1px solid #b3743d; outline-offset: -10px; text-align: center; transform: rotate(-1.5deg); box-shadow: 0 15px 30px #000; }
.certificate small, .certificate span, .certificate b { display: block; text-transform: uppercase; letter-spacing: .09em; }
.certificate small { font-size: .48rem; color: #734522; }
.certificate span { margin: 15px 0 8px; font-family: var(--font-display), Georgia, serif; font-weight: 900; font-size: 1.08rem; }
.certificate b { font-size: .63rem; color: #2d706e; }
.certificate i { display: grid; place-items: center; width: 38px; height: 38px; margin: 13px auto 0; border-radius: 50%; color: #d4a678; background: #542816; border: 4px double #b36935; font-family: Georgia, serif; font-weight: 800; }

.trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #3b2a21; border-top: 1px solid #6d4b35; border-bottom: 1px solid #6d4b35; }
.trust-strip > div { min-height: 138px; display: flex; align-items: center; gap: 22px; padding: 30px 4vw; background: #18130f; }
.trust-strip b { font-family: var(--font-display), Georgia, serif; color: var(--copper); font-size: 2.2rem; }
.trust-strip span { color: #a99986; font-size: .83rem; line-height: 1.5; }
.trust-strip strong { display: block; color: var(--parchment); text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; margin-bottom: 4px; }

.catalog-section { padding: 110px 4vw 130px; background: #f0e7d8; color: #211914; }
.section-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 7vw; align-items: stretch; max-width: 1320px; margin: 0 auto 52px; }
.section-heading h2, .authenticity-copy h2, .contact-section h2 { margin: 0; font-size: clamp(2.4rem, 5vw, 5.4rem); line-height: 1.1; }
.heading-side { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; height: 100%; gap: 26px; }
.heading-logo { display: block; width: 220px; max-width: 100%; height: auto; }
.section-heading .heading-side > p { max-width: 540px; margin: 0; color: #65584d; line-height: 1.8; text-align: right; }
.filters { max-width: 1320px; margin: 0 auto 34px; display: flex; gap: 8px; }
.filters button { border: 1px solid #b7a793; background: transparent; color: #55483e; padding: 11px 20px; text-transform: uppercase; font-size: .7rem; letter-spacing: .12em; cursor: pointer; }
.filters button.active, .filters button:hover { background: #1e1814; color: var(--parchment); border-color: #1e1814; }
.product-grid { max-width: 1320px; margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.product-card { background: #e8ddcc; border: 1px solid #c9b8a1; transition: transform .25s ease, box-shadow .25s ease; display: flex; flex-direction: column; height: 100%; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 20px 38px rgba(56,40,28,.16); }
.filters:empty { display: none; margin: 0; }
.empty-catalog { text-align: center; color: #7a6752; padding: 44px 0; max-width: 1320px; margin: auto; }
/* paginação (desktop) */
.pagination { max-width: 1320px; margin: 36px auto 0; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.pagination button { min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid #b7a793; background: transparent; color: #55483e; font-size: .95rem; cursor: pointer; transition: .18s; }
.pagination button.active, .pagination button:hover:not([disabled]) { background: #1e1814; color: var(--parchment); border-color: #1e1814; }
.pagination button[disabled] { opacity: .35; cursor: default; }
/* carrosséis por categoria (mobile) */
.cat-carousel { margin: 0 0 30px; position: relative; }
.cat-carousel-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px 12px; }
.cat-carousel-head h3 { margin: 0; font-family: var(--font-display), Georgia, serif; text-transform: uppercase; letter-spacing: .02em; color: #211914; font-size: 1.5rem; }
.cat-carousel-head span { color: #8a6f52; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; }
.carousel-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 2px 2px 14px; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-item { flex: 0 0 99%; max-width: none; scroll-snap-align: start; }
.product-image { aspect-ratio: 1/1.06; display: block; position: relative; overflow: hidden; background: #ddd0bd; flex: 0 0 auto; }
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.product-card:hover .product-image img { transform: scale(1.035); }
/* Indicador de arraste — flecha indígena (mobile) */
.swipe-hint { position: absolute; top: 118px; right: 15px; z-index: 6; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 13px 7px; border-radius: 15px; background: rgba(16,13,11,.60); border: 1px solid rgba(184,115,51,.55); backdrop-filter: blur(3px); pointer-events: none; opacity: 1; transition: opacity .55s ease; animation: swipeNudge 1.6s ease-in-out infinite; }
.swipe-hint.hide { opacity: 0; }
.swipe-arrow { width: 48px; height: 18px; color: #e0954e; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.swipe-hint span { font-family: var(--font-condensed), Arial, sans-serif; text-transform: uppercase; font-size: .58rem; letter-spacing: .16em; color: #ecdfc9; }
@keyframes swipeNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(9px); } }
@media (prefers-reduced-motion: reduce) { .swipe-hint { animation: none; } }
.inventory-number, .unique-badge { position: absolute; top: 13px; font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; padding: 7px 9px; }
.inventory-number { left: 13px; color: #c9eeeb; background: rgba(15,50,48,.86); }
.unique-badge { right: 13px; color: #fff0df; background: rgba(95,44,17,.9); }
.product-info { padding: 19px; display: flex; flex-direction: column; flex: 1 1 auto; }
.product-info > p { color: var(--cognac); font-size: .64rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 800; margin: 0 0 9px; }
.product-info h3 { min-height: 48px; margin: 0 0 10px; font-family: var(--font-display), Georgia, serif; font-size: 1.12rem; line-height: 1.25; }
.product-note { display: block; min-height: 58px; color: #76685c; font-size: .92rem; line-height: 1.55; }
.price-line { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid #cab9a1; }
.price-line strong { display: block; font-size: 1.05rem; }
.price-line small { display: block; color: #4b7d78; margin-top: 3px; font-size: .67rem; }
.price-line button { border: 0; color: #fff6e8; background: #743b1f; padding: 11px 13px; text-transform: uppercase; font-size: .62rem; letter-spacing: .07em; cursor: pointer; }
.price-line button:disabled { color: #d0c2b1; background: #4b4038; cursor: default; }
/* bloco de origem: bandeira acima da palavra "Origem" */
.origin-badge { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; flex: 0 0 auto; }
.origin-badge .flag { width: 34px; height: auto; display: block; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.28); }
.origin-label { font-size: .56rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #8a6f52; line-height: 1; }

.authenticity-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 740px; background: #15110e; }
.authenticity-photo { position: relative; overflow: hidden; min-height: 600px; }
.authenticity-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 50%, #15110e 100%); }
.authenticity-photo img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.18) saturate(.8) contrast(1.12); }
.authenticity-photo > span { position: absolute; z-index: 3; left: 8%; bottom: 8%; padding: 16px 22px; border: 1px solid var(--copper); background: rgba(17,16,14,.8); font-family: var(--font-display), Georgia, serif; font-size: 1.6rem; text-transform: uppercase; }
.authenticity-copy { padding: 100px 8vw 90px 6vw; }
.authenticity-copy h2 { color: var(--parchment); }
.authenticity-copy > p:not(.eyebrow) { color: #bbaa96; max-width: 600px; line-height: 1.8; }
.authenticity-copy ul { padding: 0; margin: 42px 0 0; list-style: none; border-top: 1px solid #4b3426; }
.authenticity-copy li { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 17px 0; border-bottom: 1px solid #4b3426; }
.authenticity-copy li b { color: var(--copper); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.authenticity-copy li span { color: #d1c3b0; }

.story-section { padding: 125px 8vw; text-align: center; background: linear-gradient(rgba(41,23,14,.88), rgba(41,23,14,.94)), url("/images/mc-story.jpg") center 40%/cover; }
.story-section blockquote { max-width: 1120px; margin: 25px auto; font-family: var(--font-display), Georgia, serif; font-size: clamp(2.4rem, 5vw, 5.4rem); line-height: 1.1; text-transform: uppercase; letter-spacing: .05em; }
.story-copy { max-width: 750px; margin: 0 auto 32px; color: #d2c1ad; line-height: 1.8; }
.outline-button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border: 1px solid #c58a58; color: #f5ddc4; text-transform: uppercase; font-size: .72rem; letter-spacing: .1em; transition: background .2s ease; }
.outline-button:hover { background: rgba(184,115,51,.2); }

.contact-section { display: flex; justify-content: space-between; gap: 40px; align-items: center; padding: 90px 8vw; color: #201710; background: #d8c7ac; }
.contact-section h2 { font-size: clamp(2.4rem, 5vw, 5.4rem); }
footer { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: 40px; align-items: end; padding: 62px 4vw; background: #0b0a08; border-top: 1px solid #422e20; }
footer > div { display: flex; flex-direction: column; gap: 8px; }
footer b, footer strong { color: #cf9a69; text-transform: uppercase; font-size: .75rem; letter-spacing: .1em; }
footer a:not(.footer-ig) { color: #b98b62; font-size: .8rem; text-decoration: none; transition: color .18s ease; }
footer a:not(.footer-ig):hover { color: #ead9c2; }
.footer-brand strong { font-family: var(--font-display), Georgia, serif; font-size: 1.45rem; }
footer span, footer p { color: #8f8173; font-size: .76rem; margin: 0; }
.app-version { color: #5f564b; font-size: .72rem; letter-spacing: .06em; margin-left: 6px; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 49; background: rgba(0,0,0,.68); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.cart-drawer { position: fixed; z-index: 50; top: 0; right: 0; width: min(440px, 100%); height: 100%; padding: 32px; color: #241b15; background: #eee4d5; transform: translateX(102%); transition: transform .3s ease; overflow-y: auto; }
.cart-drawer.open { transform: translateX(0); }
.drawer-header { display: flex; justify-content: space-between; align-items: start; padding-bottom: 22px; border-bottom: 1px solid #c8b7a1; }
.drawer-header p { margin: 0; color: #a45f32; text-transform: uppercase; font-size: .65rem; letter-spacing: .15em; }
.drawer-header h2 { margin: 3px 0 0; font-family: var(--font-display), Georgia, serif; font-size: 2.5rem; text-transform: uppercase; }
.drawer-header button, .cart-item > button { border: 0; background: transparent; color: #7d5235; font-size: 2rem; cursor: pointer; }
.empty-cart { min-height: 65vh; display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 12px; }
.empty-cart b { font-family: var(--font-display), Georgia, serif; font-size: 1.6rem; text-transform: uppercase; }
.empty-cart span { color: #796b5f; }
.empty-cart button { margin: 18px auto 0; border: 1px solid #9a6948; background: transparent; color: #633c25; padding: 13px 20px; cursor: pointer; }
.cart-items { padding: 16px 0; }
.cart-item { display: grid; grid-template-columns: 76px 1fr auto; gap: 13px; align-items: center; padding: 14px 0; border-bottom: 1px solid #cabbab; }
.cart-item img { width: 76px; height: 76px; object-fit: cover; }
.cart-item div { display: flex; flex-direction: column; gap: 7px; }
.cart-item b { font-family: var(--font-display), Georgia, serif; font-size: .9rem; }
.cart-item span { color: #87502f; font-weight: 800; }
.cart-total { display: flex; justify-content: space-between; align-items: center; margin: 20px 0; font-size: 1.15rem; }
.cart-total strong { font-size: 1.5rem; }
.checkout-button { display: flex; min-height: 56px; align-items: center; justify-content: center; color: white; background: #7a3d20; text-transform: uppercase; font-weight: 800; letter-spacing: .06em; }
.checkout-note { display: block; text-align: center; color: #77695e; margin-top: 12px; }

@media (max-width: 1100px) {
  .site-header { grid-template-columns: 250px 1fr auto; }
  .main-nav { gap: 16px; }
  .main-nav a { font-size: .7rem; }
  .hero-copy { width: 48%; }
  .hero-stage { width: 58%; opacity: .9; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 780px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  .cat-carousel .product-image { aspect-ratio: 1 / 1; }
  .site-header { display: flex; align-items: center; justify-content: flex-end; gap: 10px; position: fixed; top: 0; left: 0; right: 0; width: auto; box-sizing: border-box; height: 72px; padding: 0 14px; }
  html { scroll-padding-top: 84px; }
  .site-header .brand { display: none; }
  .site-header .ig-link { display: none; }
  .menu-toggle, .cart-button { flex: 0 0 auto; }
  .hero-reference { display: block; }
  .hero-functional { display: none; }
  .brand-name { font-size: 1.18rem; }
  .brand { width: auto; min-width: 0; gap: 7px; overflow: hidden; }
  .brand-logo { height: 40px; }
  .brand-word { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .ig-link { width: 34px; height: 34px; }
  .ig-link svg { width: 18px; height: 18px; }
  .brand-rule::before, .brand-rule::after { width: 48px; }
  .brand-rule b { width: 21px; height: 21px; font-size: 11px; }
  .menu-toggle { display: flex; width: 32px; height: 32px; padding: 7px; flex-direction: column; justify-content: center; gap: 4px; border: 1px solid #6a4834; background: rgba(0,0,0,.25); cursor: pointer; flex: 0 0 auto; }
  .menu-toggle span { width: 100%; height: 1px; background: var(--parchment); }
  .main-nav { position: absolute; left: 0; right: 0; top: 72px; padding: 18px 20px 26px; display: none; flex-direction: column; gap: 2px; background: rgba(16,13,11,.97); border-bottom: 1px solid #563724; }
  .main-nav.open { display: flex; }
  .main-nav a { font-size: 1rem; padding: 13px 2px; letter-spacing: .09em; }
  .cart-button { padding: 7px 9px; font-size: 0; display: inline-flex; align-items: center; }
  .cart-button::before { content: "🛍"; font-size: 18px; }
  .cart-button span { font-size: .66rem; margin-left: 4px; min-width: 17px; height: 17px; }
  /* HERO MOBILE — foto editorial full-bleed com texto embaixo sobre degradê */
  /* HERO MOBILE — foto editorial full-bleed com texto embaixo sobre degradê */
  .hero { height: 100vh; height: 100svh; min-height: 620px; max-height: none; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
  .sunset { display: none; }
  .hero-stage { display: none; }
  .hero-photo-mobile { display: block; position: absolute; inset: 0; z-index: 1;
    background-image: linear-gradient(to top, rgba(9,7,6,.97) 4%, rgba(9,7,6,.72) 24%, rgba(9,7,6,.16) 46%, rgba(9,7,6,.16) 62%, rgba(9,7,6,.66) 100%), url("/images/mc-hero-mobile.jpg");
    background-size: cover; background-position: 62% 28%; background-repeat: no-repeat; }
  .hero-copy { position: relative; z-index: 8; width: 100vw; max-width: 100vw; padding: 0 22px calc(30px + env(safe-area-inset-bottom)); }
  .hero-copy > * { max-width: calc(100vw - 44px); }
  .hero .eyebrow { font-size: .58rem; letter-spacing: .08em; margin-bottom: 12px; white-space: normal; overflow-wrap: break-word; }
  .hero h1 { font-size: clamp(1.85rem, 8.4vw, 3rem); line-height: 1; text-shadow: 0 4px 30px rgba(0,0,0,.85); overflow-wrap: break-word; }
  .western-divider { margin: 15px 0; }
  .hero-text { max-width: 100%; margin-bottom: 20px; font-size: .95rem; overflow-wrap: break-word; text-shadow: 0 2px 14px rgba(0,0,0,.8); }
  .primary-button { display: inline-flex; }
  .one-only { font-size: .9rem; }
  .trust-strip { grid-template-columns: 1fr; }
  .trust-strip > div { min-height: 110px; }
  .catalog-section { padding: 80px 10px; }
  .section-heading { grid-template-columns: 1fr; gap: 28px; }
  .section-heading h2, .authenticity-copy h2, .contact-section h2 { font-size: clamp(2.1rem, 9.5vw, 3.6rem); overflow-wrap: break-word; }
  .heading-logo { display: none; } /* logo do catálogo só no browser, não no mobile */
  .heading-side { display: block; }
  .section-heading .heading-side > p { text-align: left; max-width: 100%; }
  .filters { overflow-x: auto; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product-info { padding: 14px; }
  .product-info h3 { font-size: .94rem; min-height: 55px; }
  .product-note { display: none; }
  /* mobile: valor à esquerda, bandeira/Origem à direita, botão ocupando a linha de baixo */
  .price-line { align-items: center; flex-direction: row; flex-wrap: wrap; row-gap: 14px; }
  .price-line .price-main { text-align: left; }
  .price-line .origin-badge { margin-left: auto; }
  .price-line button { width: 100%; flex: 0 0 100%; }
  /* card do carrossel ficou grande: fontes maiores e legíveis */
  .cat-carousel .product-info { padding: 22px 20px 24px; }
  .cat-carousel .product-info > p { font-size: .82rem; letter-spacing: .14em; }
  .cat-carousel .product-info h3 { font-size: 1.34rem; min-height: 0; margin-bottom: 12px; }
  .cat-carousel .product-note { display: block; font-size: 1.16rem; line-height: 1.6; min-height: 0; }
  .cat-carousel .price-line strong { font-size: 1.42rem; }
  .cat-carousel .price-line small { font-size: .86rem; }
  .cat-carousel .price-line button { font-size: .82rem; padding: 15px 14px; letter-spacing: .08em; }
  .authenticity-section { grid-template-columns: 1fr; }
  .authenticity-photo { min-height: 440px; }
  .authenticity-photo::after { background: linear-gradient(0deg, #15110e, transparent 55%); }
  .authenticity-copy { padding: 72px 22px; }
  .authenticity-copy li { grid-template-columns: 115px 1fr; }
  .story-section { padding: 90px 22px; }
  .contact-section { padding: 70px 22px; flex-direction: column; align-items: flex-start; }
  footer { grid-template-columns: 1fr; gap: 30px; align-items: start; padding: 52px 22px; }
}

@media (max-width: 460px) {
  .hero { min-height: 600px; }
  .hero h1 { font-size: clamp(1.7rem, 8vw, 2.5rem); }
  .primary-button { width: 100%; padding: 0 18px; }
  .one-only { width: 100%; text-align: center; }
  .product-grid { grid-template-columns: 1fr; }
  .product-note { display: block; min-height: 0; }
  .authenticity-copy li { grid-template-columns: 1fr; gap: 5px; }
  .cart-drawer { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* botão flutuante do WhatsApp (número vem das Configurações do admin, via /api/config) */
.waFloat{position:fixed;right:20px;bottom:20px;width:60px;height:60px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.28);z-index:90;transition:transform .15s}
.waFloat:hover{transform:scale(1.06)}
.waFloat svg{width:34px;height:34px;fill:#fff}
@media(max-width:600px){.waFloat{width:54px;height:54px;right:16px;bottom:16px}.waFloat svg{width:30px;height:30px}}

/* modal carrossel de fotos do produto (clique na imagem do card) */
.product-image { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; background: rgba(8,6,5,.94); padding: 60px 16px 120px; }
.lightbox.open { display: flex; }
.lb-stage { margin: 0; max-width: 92vw; max-height: 78vh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lb-stage img { max-width: 92vw; max-height: 74vh; width: auto; height: auto; object-fit: contain; border: 1px solid rgba(184,115,51,.35); box-shadow: 0 30px 80px rgba(0,0,0,.6); background: #12100e; }
.lb-cap, #lb-cap { color: #cdbfa6; font-size: .85rem; letter-spacing: .04em; }
.lb-close { position: absolute; top: 18px; right: 20px; width: 46px; height: 46px; border: 1px solid rgba(233,221,197,.4); background: rgba(20,16,14,.6); color: #e9ddc5; font-size: 26px; line-height: 1; cursor: pointer; border-radius: 50%; }
.lb-close:hover { background: var(--copper); color: #1a120b; border-color: transparent; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border: 1px solid rgba(233,221,197,.4); background: rgba(20,16,14,.55); color: #e9ddc5; font-size: 30px; line-height: 1; cursor: pointer; border-radius: 50%; }
.lb-nav:hover { background: var(--copper); color: #1a120b; border-color: transparent; }
.lb-prev { left: 18px; } .lb-next { right: 18px; }
.lb-thumbs { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 0 16px; }
.lb-thumbs img { width: 62px; height: 62px; object-fit: cover; border: 2px solid transparent; opacity: .6; cursor: pointer; border-radius: 3px; }
.lb-thumbs img.active, .lb-thumbs img:hover { opacity: 1; border-color: var(--copper); }
@media (max-width: 640px){ .lb-nav { width: 44px; height: 44px; font-size: 24px; } .lb-thumbs img { width: 48px; height: 48px; } .lightbox { padding: 54px 8px 100px; } }

/* selo de contagem de fotos no card (quando há galeria) */
.product-image { position: relative; }
.photo-count { position: absolute; left: 12px; bottom: 12px; background: rgba(12,10,8,.72); color: #f2e6d2; font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; padding: 5px 10px; border: 1px solid rgba(224,196,150,.4); }

/* Instagram — header, arte (desktop) e rodapé */
.ig-link { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(233,221,197,.45); color: var(--parchment); background: rgba(17,16,14,.35); transition: .18s; }
.ig-link svg { width: 20px; height: 20px; fill: currentColor; }
.ig-link:hover { background: var(--copper); color: #1a120b; border-color: transparent; }
.hero-reference .ref-ig { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(224,196,150,.55); border-radius: 999px; background: rgba(12,10,8,.45); color: #f2e6d2; backdrop-filter: blur(3px); }
.hero-reference .ref-ig svg { width: 20px; height: 20px; fill: currentColor; }
.hero-reference .ref-ig:hover { background: rgba(184,115,51,.85); color: #1a120b; border-color: transparent; }
.footer-ig { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--copper); }
.footer-ig svg { width: 22px; height: 22px; fill: currentColor; }
.footer-ig:hover { color: var(--parchment); }