/* V2: catálogo mais presente, banners fotográficos e leitura comercial. */
:root {
  --porcelain: #f5f3ef;
  --soft-gray: #efede8;
  --ink: #242321;
  --muted: #6b6863;
  --line: #e8e5df;
  --accent: #ac4d32;
  --accent-soft: #faece5;
  --accent-hover: #8d3d27;
  --accent-on-dark: #efb08e;
  --product-surface: #f7f4f0;
  --radius: 16px;
  --content-width: 1360px;
}
body { font-size: 16px; }
.container { width: min(var(--content-width), calc(100% - 80px)); }
.announcement { padding: 7px 40px; font-size: 10px; letter-spacing: .06em; background: var(--accent); }
.header-main { min-height: 94px; gap: 36px; }
.brand strong { font-size: 27px; letter-spacing: -.065em; }
.brand>span { font-size: 8px; letter-spacing: .24em; }
.brand-dot { color: var(--accent); }
.order-count { background: var(--accent); }
.button-dark, .hero .button { background: var(--accent); color: var(--inverse); }
.button-dark:hover, .hero .button:hover { background: var(--accent-hover); color: var(--inverse); }
.search { max-width: 510px; background: var(--paper); border-radius: 9px; padding-left: 18px; }
.search input { font-size: 14px; }
.search button { height: 46px; border-radius: 8px; }
.header-actions { gap: 26px; }
.service-link span { font-size: 11px; }
.service-link strong { font-size: 13px; }
.order-trigger { font-size: 13px; }
.navigation-band { background: var(--porcelain); }
.navigation { min-height: 52px; border-top: 0; font-size: 14px; }
.nav-categories { gap: 42px; }
.nav-categories button { min-height: 52px; font-weight: 500; }
.navigation>a { color: var(--ink); }
.nav-categories button.active { color: var(--accent); }
.nav-categories button.active::after { bottom: 9px; background: var(--accent); }
.showcase { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); gap: 18px; margin-top: 22px; }
.hero { position: relative; display: block; width: 100%; min-height: 420px; height: 420px; margin: 0; background: #30302d; isolation: isolate; color: var(--inverse); }
.hero-visual { position: absolute; inset: 0; z-index: -2; }
.hero-visual>img { left: auto; right: 0; width: 72%; height: 100%; object-position: center 55%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #30302d 3%, rgb(48 48 45 / .96) 22%, rgb(48 48 45 / .60) 48%, rgb(48 48 45 / .02) 78%); }
.hero-copy { position: relative; min-height: 100%; padding: 36px 36px 20px; width: 66%; }
.hero .eyebrow { font-size: 10px; color: #e6e3df; letter-spacing: .12em; }
.hero h1 { font-family: var(--display-font); font-size: clamp(37px, 3.5vw, 51px); line-height: 1.08; letter-spacing: -.045em; margin: 18px 0 14px; }
.hero-description { color: #e5e2dd; max-width: 320px; font-size: 14px; line-height: 1.7; margin-bottom: 20px; }
.hero .button { min-height: 48px; font-size: 13px; border-radius: 6px; padding: 12px 20px; }
.hero-pagination { padding-top: 20px; gap: 10px; max-width: 230px; font-size: 9px; }
.hero-pagination>span:last-of-type { color: #d3cfc9; }
.pagination-line { width: 42px; background: #8f8c87; }
.hero-controls { gap: 4px; }
.hero-controls .icon-button { width: 40px; height: 40px; background: transparent; color: var(--inverse); border-color: #797570; }
.hero-controls .icon-button:hover { background: rgb(255 255 255 / .15); }
.hero-product { left: auto; right: 16px; bottom: 16px; max-width: 225px; padding: 10px 14px; gap: 14px; border-radius: 8px; color: var(--ink); min-height: 54px; }
.hero-product small { font-size: 9px; }
.hero-product strong { font-size: 12px; }
.hero-product>.icon { width: 18px; height: 18px; }
.bf-seal { display: none; }
.hero.hero-black-friday { min-height: 440px; height: 440px; background: #171615; }
.hero-black-friday::after { background: linear-gradient(90deg, #171615 3%, rgb(23 22 21 / .94) 30%, rgb(23 22 21 / .45) 58%, rgb(23 22 21 / .08)); }
.hero-black-friday .hero-visual>img { object-position: center 48%; }
.hero-black-friday .hero-copy { width: 78%; padding: 24px 32px 16px; }
.hero-black-friday #hero-eyebrow { font-size: 9px; letter-spacing: .16em; }
.hero.hero-black-friday h1 { font-family: var(--body-font); font-size: clamp(60px, 6.2vw, 80px); font-weight: 800; line-height: .86; letter-spacing: -.06em; color: var(--accent-on-dark); margin: 12px 0 8px; }
.hero-black-friday h1::first-line { color: var(--inverse); }
.hero-black-friday .hero-description { max-width: 400px; font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
.hero-black-friday .button { min-height: 44px; padding-block: 10px; }
.hero-black-friday .hero-pagination { padding-top: 10px; }
.hero-black-friday .bf-seal { position: absolute; right: 22px; top: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 104px; height: 104px; border: 1px solid var(--accent-on-dark); border-radius: 50%; background: rgb(23 22 21 / .78); color: var(--accent-on-dark); transform: rotate(9deg); text-align: center; }
.bf-seal small { font-size: 7px; letter-spacing: .12em; }
.bf-seal strong { font-size: 18px; line-height: .95; letter-spacing: -.04em; margin-block: 7px; }
.showcase-side { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
.collection-banner { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius); min-width: 0; text-align: left; background: #46423d; color: var(--inverse); }
.collection-banner>img { position: absolute; inset: 0; width: 100%; height: 100%; object-position: right 49%; z-index: -2; }
.collection-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(25 24 22 / .80), rgb(25 24 22 / .45) 55%, rgb(25 24 22 / .05)); }
.collection-banner:hover { color: var(--inverse); }
.collection-banner:hover::after { background: linear-gradient(90deg, rgb(25 24 22 / .9), rgb(25 24 22 / .5) 55%, rgb(25 24 22 / .05)); }
.collection-copy { display: flex; flex-direction: column; justify-content: center; padding: 20px 24px; height: 100%; }
.collection-copy>small { font-size: 10px; letter-spacing: .12em; }
.collection-copy>strong { font-family: var(--display-font); font-size: clamp(23px, 2.15vw, 30px); line-height: 1.12; font-weight: 400; letter-spacing: -.03em; margin-block: 10px 12px; }
.collection-copy>span { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.collection-copy .icon { width: 16px; height: 16px; }
.benefits { margin-top: 20px; padding: 16px; gap: 12px; border: 0; border-radius: var(--radius); background: var(--accent); }
.benefits>div { justify-content: flex-start; padding: 18px 14px; gap: 12px; min-width: 0; border: 0; border-radius: 10px; background: var(--paper); }
.benefits strong { font-size: 14px; font-weight: 600; line-height: 1.4; }
.benefits small { font-size: 12px; line-height: 1.5; margin-top: 5px; }
.benefits .icon { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.catalog { padding-top: 38px; }
.section-heading { align-items: center; margin-bottom: 22px; }
.section-heading .eyebrow { font-size: 11px; margin-bottom: 7px; }
.section-heading h2 { font-family: var(--body-font); font-size: 30px; font-weight: 500; letter-spacing: -.055em; }
.catalog-description { font-size: 13px; max-width: 330px; text-align: right; }
.catalog-toolbar { gap: 16px; padding-bottom: 12px; }
.filter-list { gap: 4px; }
.filter-list button { border-radius: 6px; padding: 9px 16px; font-size: 14px; }
.filter-list button.active { background: var(--accent-soft); color: var(--accent); }
.sort-control select { font-size: 13px; }
.results-count { min-height: 40px; font-size: 12px; padding-block: 12px; }
.product-grid { gap: 30px 22px; }
.product-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--product-surface); }
.product-image-wrap { display: contents; }
.product-photo { grid-row: 1; grid-column: 1; border-radius: 15px 15px 0 0; }
.product-tag { font-size: 8px; top: 12px; left: 12px; background: var(--accent-soft); color: var(--accent); }
.product-info { grid-row: 2; padding: 8px 16px 0; }
.product-info h3 { min-width: 0; margin-bottom: 4px; font-size: 16px; font-weight: 500; line-height: 1.35; }
.product-info h3 button { display: block; width: 100%; min-height: 44px; padding-block: 0; }
.product-price { font-size: 23px; font-weight: 600; line-height: 1.2; margin-top: 0; white-space: nowrap; }
.product-currency { font-size: 12px; font-weight: 400; color: var(--muted); }
.product-info small { display: none; }
.add-product { position: static; grid-row: 3; width: auto; height: auto; min-height: 44px; margin: 12px 16px 16px; padding: 10px 14px; border: 1px solid var(--accent); background: var(--paper); color: var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; line-height: 1.3; }
.add-product::after { content: "Adicionar ao carrinho"; font-size: 13px; font-weight: 500; }
.add-product .icon { width: 16px; height: 16px; }
.add-product:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.price-note { margin-top: 24px; font-size: 12px; }
.editorial { margin-top: 44px; gap: 22px; }
.editorial-card { height: 290px; }
.editorial-card>div { left: 28px; bottom: 28px; }
.editorial-card h2 { font-size: 34px; }
.editorial-card.lighting>img { object-position: center 45%; }
.about { grid-template-columns: 170px minmax(0, 1fr); gap: 56px; padding: 48px; margin-block: 44px; border-radius: 16px; background: var(--porcelain); }
.years { padding: 0; }
.years>span { font-size: 110px; color: #aaa49a; }
.years p { font-size: 8px; letter-spacing: .12em; padding-left: 0; margin-top: 12px; }
.about-copy .eyebrow { font-size: 9px; margin-bottom: 12px; }
.about-copy h2 { font-size: 30px; }
.about-copy>p:not(.eyebrow) { max-width: 620px; font-size: 14px; margin-top: 16px; }
.contact-band { padding-block: 36px; }
.contact-band h2 { font-size: 30px; }
.footer-main { padding-block: 36px; }
.footer-main p, .footer-main>div { font-size: 13px; }
.footer-bottom { font-size: 11px; }
.detail-content h2 { font-size: 32px; }
.detail-content .button, .order-summary .button { font-size: 14px; }
.detail-description, .order-summary>p { font-size: 14px; }
.whatsapp-float { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 9; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #147d4f; color: var(--inverse); box-shadow: 0 3px 12px rgb(0 0 0 / .16); }
.whatsapp-float:hover { background: #0c623c; color: var(--inverse); }
.whatsapp-float .icon { width: 32px; height: 32px; stroke-width: 1.5; }
.toast { bottom: 96px; }
@media (max-width: 1150px) {
  .container { width: calc(100% - 56px); }
  .announcement { padding-inline: 28px; }
  .header-main { gap: 24px; }
  .brand strong { font-size: 24px; }
  .service-link { display: none; }
  .nav-categories { gap: 30px; }
  .showcase { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 14px; }
  .hero-copy { padding: 28px 26px 18px; width: 76%; }
  .hero h1 { font-size: 42px; }
  .hero-product { max-width: 180px; padding: 8px 10px; }
  .hero-product small { display: none; }
  .hero-product strong { font-size: 12px; }
  .hero-product>.icon { width: 16px; }
  .hero-pagination { max-width: 200px; }
  .showcase-side { gap: 14px; }
  .collection-copy { padding-inline: 20px; }
  .collection-copy>strong { font-size: 25px; }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefits>div { padding: 16px; gap: 14px; }
  .product-grid { gap: 28px 18px; }
  .product-info h3 { font-size: 15px; }
}
@media (max-width: 850px) and (min-width: 761px) {
  .showcase { grid-template-columns: minmax(0, 1fr); }
  .hero { height: 410px; min-height: 410px; }
  .hero-copy { width: 65%; padding: 30px; }
  .hero-product { max-width: 225px; }
  .showcase-side { grid-template-columns: 1fr 1fr; grid-template-rows: 160px; }
}
@media (max-width: 760px) {
  .container { width: calc(100% - 32px); }
  .announcement { padding: 8px; font-size: 9px; letter-spacing: .025em; }
  .header-main { padding-block: 18px 14px; gap: 16px; min-height: 0; }
  .brand strong { font-size: 24px; }
  .brand>span { font-size: 7px; }
  .search { max-width: none; }
  .search input { font-size: 13px; }
  .search button { height: 44px; }
  .navigation { min-height: 46px; }
  .navigation-band { background: var(--paper); }
  .site-header { border-bottom: 1px solid var(--line); }
  .nav-categories { gap: 26px; }
  .nav-categories button { min-height: 44px; font-size: 13px; }
  .nav-categories button.active::after { bottom: 5px; }
  .showcase { display: block; margin-top: 16px; }
  .hero { min-height: 350px; height: 350px; border-radius: 14px; }
  .hero-visual { aspect-ratio: auto; }
  .hero-visual>img { width: 100%; object-position: 65% center; }
  .hero::after { background: linear-gradient(90deg, rgb(25 24 22 / .85), rgb(25 24 22 / .57) 65%, rgb(25 24 22 / .12)); }
  .hero-copy { width: 100%; padding: 28px 24px 20px; }
  .hero .eyebrow { font-size: 9px; max-width: 250px; }
  .hero h1 { font-size: clamp(30px, 9vw, 40px); margin-block: 20px 16px; max-width: 330px; }
  .hero-description { display: none; }
  .hero .button { font-size: 13px; gap: 18px; margin-top: 8px; }
  .hero-pagination { max-width: 100%; margin-top: auto; padding-top: 20px; }
  .hero-controls { margin-left: auto; }
  .hero-product { display: none; }
  .hero.hero-black-friday { min-height: 350px; height: 350px; }
  .hero-black-friday .hero-copy { width: 100%; padding: 24px 24px 20px; }
  .hero.hero-black-friday h1 { font-size: clamp(52px, 16vw, 64px); }
  .hero-black-friday .bf-seal { display: none; }
  .showcase-side { grid-template-columns: 1fr 1fr; grid-template-rows: 160px; gap: 12px; margin-top: 12px; }
  .collection-banner { border-radius: 12px; }
  .collection-copy { padding: 16px 14px; }
  .collection-copy>small { font-size: 8px; letter-spacing: .04em; }
  .collection-copy>strong { font-size: 20px; margin: 12px 0; }
  .collection-copy>span { font-size: 10px; gap: 5px; }
  .collection-copy .icon { width: 13px; height: 13px; }
  .benefits { margin-top: 16px; padding: 12px; gap: 10px; }
  .benefits>div { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px; }
  .benefits strong { font-size: 13px; }
  .benefits small { font-size: 12px; }
  .benefits .icon { width: 40px; height: 40px; padding: 8px; margin: 0; }
  .catalog { padding-top: 32px; }
  .section-heading { margin-bottom: 18px; }
  .section-heading .eyebrow { font-size: 10px; }
  .section-heading h2 { font-size: 27px; }
  .catalog-description { max-width: none; text-align: left; font-size: 12px; margin-top: 8px; }
  .catalog-toolbar { gap: 8px; }
  .filter-list { gap: 3px; }
  .filter-list button { padding-inline: 12px; font-size: 12px; }
  .sort-control select { min-height: 44px; font-size: 12px; }
  .product-grid { gap: 24px 12px; }
  .product-card { border-radius: 12px; }
  .product-photo { border-radius: 11px 11px 0 0; }
  .product-tag { font-size: 7px; top: 8px; left: 8px; }
  .product-info { padding: 8px 10px 0; }
  .product-info h3 { font-size: 14px; line-height: 1.4; }
  .product-price { font-size: 18px; margin-top: 0; }
  .product-currency { font-size: 11px; }
  .add-product { margin: 12px 10px; min-height: 44px; padding-inline: 7px; gap: 5px; }
  .add-product::after { font-size: 11px; }
  .add-product .icon { width: 14px; height: 14px; }
  .price-note { font-size: 11px; }
  .editorial { margin-top: 32px; gap: 14px; }
  .editorial-card { height: 280px; }
  .editorial-card>div { left: 24px; bottom: 24px; }
  .editorial-card h2 { font-size: 32px; }
  .about { grid-template-columns: 1fr; padding: 24px; margin-block: 32px; gap: 28px; }
  .years { gap: 24px; }
  .years>span { font-size: 85px; }
  .years p { font-size: 7px; margin: 0; }
  .about-copy h2 { font-size: 27px; }
  .about-copy .eyebrow { font-size: 8px; }
  .contact-band h2 { font-size: 28px; }
  .footer-main { padding-block: 32px; }
  .footer-bottom { font-size: 10px; }
}
@media (max-width: 360px) {
  .hero-copy { padding-inline: 20px; }
  .hero h1 { font-size: 30px; }
  .collection-copy>strong { font-size: 18px; }
  .collection-copy>span { font-size: 9px; }
}
