/* ==========================================================================
   Loja – estilos da vitrine
   As cores e fontes vêm de variáveis CSS definidas no painel (Admin > Aparência).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55;
  color: #111; background: #fff; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: #575757; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.25; margin: 0 0 .5em; letter-spacing: .01em; }
h1 { font-size: 26px; }
h2 { font-size: 22px; }
p { margin: 0 0 1em; }
del { color: #8a8a8a; }
[hidden] { display: none !important; }
.container { width: 100%; max-width: 1460px; margin: 0 auto; padding: 0 20px; }
.muted { color: #777; }
.small, small { font-size: 12px; }
.center { text-align: center; }
.mt { margin-top: 28px; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Botões e formulários ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 22px; border: 1px solid var(--primary);
  background: var(--primary); color: #fff; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  transition: opacity .2s, background .2s, color .2s;
}
.btn:hover { opacity: .85; color: #fff; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-outline { background: transparent; color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; opacity: 1; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 12px; }
.btn-lg { min-height: 54px; font-size: 15px; }
.btn-block { width: 100%; }
.link { background: none; border: 0; padding: 0; text-decoration: underline; color: inherit; }
.small-link { font-size: 12px; text-decoration: underline; color: #555; display: inline-block; margin-top: 6px; }

input, select, textarea {
  width: 100%; font: inherit; font-size: 14px; color: #222; background: #f5f5f5;
  border: 1px solid #ddd; border-radius: var(--radius); padding: 11px 12px; outline: none;
  transition: border-color .2s, background .2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); background: #fff; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--primary); }
label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 14px; color: #333; }
label > input, label > select, label > textarea { margin-top: 6px; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row .w-small { max-width: 90px; }
.self-end { align-self: center; }
.inline-form { display: flex; gap: 8px; }
.inline-form input { flex: 1; }
.error-text { color: #c0392b; }

/* ---------- Barra de aviso ---------- */
/* medidas do cabeçalho seguem o site de referência (Kérastase): barra 38px, logo 74px, menu 50px */
.topbar {
  display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; min-height: 38px;
  background: var(--topbar-bg); color: var(--topbar-text); font-size: 14px; font-weight: 300; line-height: 22px; text-transform: uppercase;
}
.topbar-msgs { grid-column: 2; display: grid; text-align: center; padding: 8px 0; opacity: .85; }
.topbar-msg { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.topbar-msg.active { opacity: 1; visibility: visible; }
.topbar-msg a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.topbar-msg a:hover { opacity: .8; }
.topbar-actions { grid-column: 3; justify-self: end; display: flex; padding-right: 6px; }
.topbar-prev { grid-column: 1; justify-self: start; margin-left: 6px; }
.topbar-btn { display: inline-flex; background: none; border: 0; padding: 6px; color: inherit; }
.topbar-btn svg { width: 18px; height: 18px; stroke-width: 1.2; }

/* ---------- Cabeçalho ---------- */
.site-header { background: #fff; position: relative; z-index: 50; }
.header-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 74px; gap: 20px; padding: 0 30px; }
.header-left, .header-right { display: flex; align-items: center; gap: 6px; align-self: start; min-height: 29px; margin-top: 9px; } /* links no alto da faixa, logo centralizado */
.header-right { justify-content: flex-end; gap: 13px; }
.header-links { display: flex; align-items: center; }
.header-links a, .header-link { display: inline-flex; align-items: center; gap: 12px; font-size: 10px; font-weight: 300; text-transform: uppercase; color: #000; white-space: nowrap; }
.header-links a { padding: 4px 16px 4px 12px; border-left: 1px solid #d6d6d6; }
.header-links svg { width: 18px; height: 18px; }
.btn-account { min-height: 0; padding: 8px 10px; border: 0; border-radius: 4px; font-size: 10px; font-weight: 300; line-height: 13px; letter-spacing: 0; white-space: nowrap; }
.account-menu { position: relative; }
.account-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; z-index: 70; padding: 6px 0;
  background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.1);
}
.account-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* ponte para o hover não fechar */
.account-menu:hover .account-dropdown, .account-menu:focus-within .account-dropdown { display: block; }
.account-dropdown p { margin: 0; padding: 8px 16px 10px; font-size: 13px; border-bottom: 1px solid #f0f0f0; }
.account-dropdown a { display: block; padding: 8px 16px; font-size: 13px; }
.account-dropdown a:hover { background: #f7f7f7; color: #000; }
.account-dropdown .account-dropdown-out { border-top: 1px solid #f0f0f0; color: #888; margin-top: 4px; }
.icon-btn.cart-btn { gap: 12px; padding: 0; }
.cart-icon { position: relative; display: inline-flex; }
.cart-label { font-size: 12px; font-weight: 300; text-transform: uppercase; color: #000; white-space: nowrap; }
.logo { display: flex; justify-content: center; }
.logo img { width: var(--logo-w); max-height: 56px; object-fit: contain; }
.logo-text { font-size: 24px; font-weight: 300; letter-spacing: .28em; text-transform: uppercase; padding-left: .28em; white-space: nowrap; }
.icon-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 8px; color: #333; position: relative; }
.icon-label { font-size: 12px; font-weight: 500; }
.header-divider { width: 1px; height: 24px; background: #ddd; }
.cart-count {
  position: absolute; top: -5px; right: -8px; min-width: 16px; height: 16px; border-radius: 8px;
  background: var(--primary); color: #fff; font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.header-search { position: relative; width: 100%; max-width: 420px; display: flex; }
.header-search input { background: #fff; border: 1px solid #ddd; border-right: 0; border-radius: var(--radius) 0 0 var(--radius); height: 42px; font-size: 14px; }
.header-search button { border: 1px solid #ddd; border-left: 0; background: #fff; border-radius: 0 var(--radius) var(--radius) 0; padding: 0 12px; color: #333; }
.live-results {
  position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #e5e5e5;
  box-shadow: 0 12px 30px rgba(0,0,0,.08); border-radius: 0 0 var(--radius) var(--radius); z-index: 60; max-height: 420px; overflow: auto;
}
.live-results a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid #f2f2f2; font-size: 13px; }
.live-results a:hover { background: #fafafa; }
.live-results img { width: 46px; height: 46px; object-fit: cover; border-radius: 4px; background: #f6f6f6; }
.live-results .lr-price { margin-left: auto; font-weight: 600; white-space: nowrap; }
.live-results .lr-empty { padding: 14px; color: #777; font-size: 13px; }
.search-panel { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid #e5e5e5; box-shadow: 0 14px 30px rgba(0,0,0,.08); padding: 18px 20px; }
.search-panel .header-search { max-width: 640px; margin: 0 auto; }
.search-panel .header-search input { height: 46px; }

.main-nav ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; margin: 0 auto; padding: 0 20px; }
.main-nav li { display: flex; }
.main-nav a, .main-nav button {
  display: flex; align-items: center; justify-content: center; min-height: 50px; max-width: 187px; padding: 8px 16px;
  font-size: 12px; font-weight: 300; line-height: 17px; text-align: center; text-transform: uppercase; color: #000; position: relative;
}
.main-nav a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 9px; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .25s; }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.main-nav .nav-highlight a { max-width: 93px; background: var(--primary); color: #fff; }
.main-nav .nav-highlight a::after { display: none; }
.main-nav .nav-highlight a:hover, .main-nav .nav-search button:hover { color: #fff; opacity: .85; }
.main-nav .nav-search button { justify-content: flex-start; gap: 6px; width: 140px; max-width: none; padding: 0 32px 0 8px; border: 0; background: var(--primary); color: #fff; }
.main-nav .nav-search svg { width: 20px; height: 20px; }

.only-mobile { display: none !important; }

/* ---------- Mensagens ---------- */
.flashes { margin-top: 16px; }
.flash { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 8px; font-size: 14px; }
.flash-success { background: #eaf6ee; color: #1e6b3a; }
.flash-error { background: #fdecea; color: #a12a1e; }

/* ---------- Página inicial (modelo da home de referência) ----------
   Medidas a 1440px: títulos de seção 36px fino; texto dos banners alinhado a uma coluna de 1170px;
   fotos de ponta a ponta; 54px entre seções. No celular, textos sobre a parte de baixo das fotos. */
.icon { flex-shrink: 0; }
.h-section { margin-top: 54px; }
.h-title { margin: 0 0 44px; padding: 20px 28px 0; font-size: 36px; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: uppercase; color: #242424; overflow-wrap: break-word; }
.h-link { display: inline-block; font-size: 14px; font-weight: 400; line-height: 1.2; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; color: #242424; }
.h-link-sm { font-size: 12px; font-weight: 800; }
.h-link-light { font-size: 12px; font-weight: 400; }
.h-link-plain { font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.h-media { position: relative; display: block; overflow: hidden; background: #f3f3f3; }
.h-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
a:hover .h-media img, a.h-media:hover img { transform: scale(1.03); }
.h-ratio-1 { aspect-ratio: 1; }
.h-ratio-45 { aspect-ratio: 4 / 5; }
.h-ratio-card { aspect-ratio: 278 / 351; }
.h-btn-outline, .h-btn-solid {
  display: inline-flex; align-items: center; justify-content: center; min-width: 170px; height: 50px; padding: 0 24px;
  font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; transition: background .2s, color .2s;
}
.h-btn-outline { border: 1px solid currentColor; color: inherit; }
.is-light .h-btn-outline:hover { background: #fff; color: #111; }
.is-dark .h-btn-outline:hover { background: #242424; color: #fff; }
.h-btn-solid { background: var(--primary); color: #fff; }
.h-btn-solid:hover { color: #fff; opacity: .88; }
.is-light { color: #fff; }
.is-dark { color: #242424; }
.h-duo-text, .h-head-center, .h-card { color: #242424; }

/* carrossel principal */
.h-hero { position: relative; overflow: hidden; }
.slider-track { display: flex; transition: transform .6s ease; }
.slide { position: relative; min-width: 100%; }
.h-hero-media { display: block; }
.h-hero-media img { width: 100%; aspect-ratio: 1440 / 608; object-fit: cover; }
.h-hero-box { position: absolute; top: 50%; left: max(16px, calc((100% - 1170px) / 2)); width: min(585px, 44%); transform: translateY(-50%); }
.text-right .h-hero-box { left: auto; right: max(16px, calc((100% - 1170px) / 2)); }
.text-center .h-hero-box { left: 50%; transform: translate(-50%, -50%); text-align: center; }
.h-hero-eyebrow { margin: 0 0 4px; font-size: 16px; font-weight: 400; line-height: 1.2; text-transform: uppercase; }
.h-hero-title { margin: 0 0 6px; font-size: 32px; font-weight: 500; line-height: 38px; text-transform: uppercase; }
.h-hero-sub { margin: 0 0 20px; font-size: 14px; line-height: 21px; }
.h-hero-arrow { position: absolute; top: 50%; z-index: 3; width: 40px; height: 64px; padding: 12px 10px; transform: translateY(-50%); border: 0; background: none; color: #fff; filter: drop-shadow(0 0 2px rgba(0,0,0,.45)); }
.h-hero-arrow svg { width: 18px; height: 38px; stroke-width: 1.3; }
.h-hero-arrow.prev { left: 10px; } .h-hero-arrow.next { right: 10px; }
.h-hero-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.h-hero-dots button { width: 31px; height: 19px; padding: 8px 0; border: 0; background: rgba(36,36,36,.25); background-clip: content-box; cursor: pointer; }
.h-hero-dots button.active { background-color: #242424; }

/* faixa promocional */
.h-strip { position: relative; display: flex; align-items: center; min-height: 312px; overflow: hidden; background: #efefef; }
.h-strip-media { position: absolute; inset: 0; }
.h-strip-media img { width: 100%; height: 100%; object-fit: cover; }
.h-strip-text { position: relative; z-index: 1; width: min(585px, 50%); margin-left: max(16px, calc((100% - 1170px) / 2)); padding: 30px 0; text-align: center; }
.h-strip-eyebrow { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; }
.h-strip-title { margin: 0 0 6px; font-size: 24px; font-weight: 500; line-height: 1.4; text-transform: uppercase; }
.h-strip-sub { margin: 0 0 18px; font-size: 14px; line-height: 21px; }

/* carrosséis de ponta a ponta (categorias, icônicos, tipo de cabelo, stories) */
.h-row { display: grid; grid-auto-flow: column; gap: 5px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.h-row::-webkit-scrollbar { display: none; }
.h-row > * { min-width: 0; scroll-snap-align: start; }
.h-row-4 { grid-auto-columns: calc((100% - 3 * 5px) / 4); }
.h-row-3 { grid-auto-columns: calc((100% - 2 * 5px) / 3); gap: 5px; }
.h-row-stories { grid-auto-columns: 255px; gap: 4px; padding: 0 2px 8px; }
.carousel-wrap.is-bleed { padding: 0; }
.carousel-wrap.is-bleed:not(.has-arrows) .carousel-btn { display: none !important; }
.carousel-wrap.has-arrows .carousel-btn { top: calc(50% - 50px); }

/* categorias */
.h-section.h-cats { margin-top: 18px; }
.h-cat { display: block; color: #242424; }
.h-cat-title { display: block; margin: 12px 15px 6px; font-size: 14px; text-transform: uppercase; }
.h-cat .h-link { margin: 0 15px; }

/* mais vendidos */
.h-head-center { margin-bottom: 40px; text-align: center; }
.h-head-center h2 { margin: 0 0 8px; font-size: 24px; font-weight: 600; text-transform: uppercase; }
.h-head-center p { margin: 0 0 4px; font-size: 14px; }

/* lançamento: 2 fotos com texto embaixo */
.h-duo { display: grid; grid-template-columns: 1fr 1fr; }
.h-duo-text { padding: 12px 15px 0; }
.h-duo-text h3 { margin: 0 0 6px; font-size: 16px; font-weight: 400; line-height: 1.4; text-transform: uppercase; }
.h-duo-text p { max-width: 640px; margin: 0 0 14px; font-size: 14px; line-height: 1.5; }

/* lançamento: foto vertical + produtos */
.h-showcase { display: grid; grid-template-columns: 1fr 2fr; align-items: start; margin-top: 54px; }
.h-showcase.no-image { grid-template-columns: 1fr; }
.h-showcase-img { display: block; overflow: hidden; aspect-ratio: 480 / 607; }
.h-showcase-img img { width: 100%; height: 100%; object-fit: cover; }
.h-showcase-rail { min-width: 0; padding: 76px 0 0 4px; }
.h-mini { display: block; color: #242424; }
.h-mini .h-link { margin: 0 12px; }
.h-mini-name { display: -webkit-box; min-height: 2.8em; margin: 12px 12px 8px; overflow: hidden; font-size: 16px; font-weight: 400; line-height: 1.4; text-transform: uppercase; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.h-mini-all-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; font-size: 22px; font-weight: 500; text-align: center; text-transform: uppercase; color: #242424; }

/* icônicos: texto sobre a parte de baixo do card */
.h-iconic { position: relative; display: block; overflow: hidden; aspect-ratio: 356 / 420; background: #f5f5f5; color: #242424; }
.h-iconic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.h-iconic:hover img { transform: scale(1.03); }
.h-iconic-text { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: 70px 15px 18px; background: linear-gradient(rgba(245,245,245,0), rgba(245,245,245,.94) 42%); }
.h-iconic-text small { font-size: 18px; font-weight: 400; text-transform: uppercase; }
.h-iconic-text b { display: -webkit-box; overflow: hidden; font-size: 18px; font-weight: 700; line-height: 1.3; text-transform: uppercase; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.h-iconic-text span { display: -webkit-box; overflow: hidden; font-size: 16px; font-weight: 400; line-height: 1.55; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* profissionais: 2 fotos com texto por cima */
.h-over { position: relative; display: block; }
.h-over .h-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,.66)); }
.h-over.is-dark .h-media::after { background: linear-gradient(rgba(255,255,255,0) 45%, rgba(255,255,255,.82)); }
.h-over-text { position: absolute; left: 15px; right: 15px; bottom: 26px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 360px; }
.h-over-text b { font-size: 22px; font-weight: 700; line-height: 1.4; text-transform: uppercase; }
.h-over-text > span { font-size: 14px; font-weight: 400; line-height: 22px; }
.h-over .h-link, .h-banner .h-link { color: inherit; }

/* banners largos: vídeo, serviços e final */
.h-banner { position: relative; display: flex; align-items: center; overflow: hidden; overflow: clip; aspect-ratio: 1440 / 608; }
.h-banner-media { position: absolute; inset: 0; }
.h-banner-media img, .h-banner-media video, .h-banner-media picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.h-banner.is-light .h-banner-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,0) 62%); pointer-events: none; }
.h-banner-text { position: relative; z-index: 1; width: min(585px, 44%); margin-left: max(16px, calc((100% - 1170px) / 2)); }
.h-banner-sub { max-width: 585px; margin: 0 0 16px; font-size: 14px; line-height: 22px; }
.h-feature-eyebrow { margin: 0 0 6px; font-size: 20px; font-weight: 500; line-height: 1.4; text-transform: uppercase; }
.h-feature-title { max-width: 535px; margin: 0 0 10px; font-size: 36px; font-weight: 800; line-height: 1.12; text-transform: uppercase; }
.h-service-eyebrow { margin: 0 0 4px; font-size: 22px; font-weight: 400; text-transform: uppercase; }
.h-service-title { margin: 0 0 10px; font-size: 24px; font-weight: 800; line-height: 1.4; text-transform: uppercase; }
.h-manifesto-title { margin: 0 0 16px; font-size: 32px; font-weight: 400; line-height: 1.5; text-transform: uppercase; }
.h-manifesto .h-banner-sub { max-width: 340px; }
.h-video-controls { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: flex; gap: 8px; }
.h-video-controls button { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #fff; color: #111; }
.h-video-controls .icon { width: 16px; height: 16px; }

/* tipo de cabelo */
.h-type { display: block; color: #242424; }
.h-type-title { display: block; margin: 12px 15px 4px; font-size: 16px; font-weight: 400; text-transform: uppercase; }
.h-type-sub { display: block; margin: 0 15px 14px; font-size: 14px; }
.h-type .h-link { margin: 0 15px; }

/* cartões */
.h-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 20px; max-width: 1202px; margin: 54px auto 0; padding: 0 16px; }
.h-section:has(.h-service) + .h-cards { margin-top: 16px; }
.h-card h3 { margin: 30px 6px 6px; font-size: 12px; font-weight: 400; text-transform: uppercase; }
.h-card p { margin: 0 6px 14px; font-size: 12px; font-weight: 400; line-height: 18.9px; }
.h-card .h-link { margin: 0 6px; }

/* stories */
.h-story { position: relative; display: block; overflow: hidden; aspect-ratio: 255 / 450; border-radius: 8px; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.h-story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h-story::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0) 60%, rgba(0,0,0,.55)); }
.h-story:hover { color: #fff; }
.h-story-play { position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); opacity: .9; }
.h-story-play .icon { width: 40px; height: 40px; fill: #fff; stroke: #fff; }
.h-story-title { position: absolute; left: 10px; right: 10px; bottom: 14px; z-index: 1; font-size: 22px; line-height: 1.2; }
.h-story-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.88); }
.h-story-modal video { max-width: 92vw; max-height: 88vh; border-radius: 8px; background: #000; }
.h-story-close { position: absolute; top: 14px; right: 14px; display: flex; padding: 8px; border: 0; background: none; color: #fff; }
.h-story-close .icon { width: 28px; height: 28px; }

/* selos acima do rodapé (todas as páginas) */
.trust-strip { margin-top: 54px; background: #f3f3f3; }
body:has(.h-manifesto) .trust-strip { margin-top: 0; }
.trust-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1202px; margin: 0 auto; padding: 36px 16px; text-align: center; }
.trust-item { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 14px; font-weight: 400; color: #242424; }
.trust-icon { width: 52px; height: 52px; stroke-width: 1.2; }

/* tablet: mesmo desenho do computador, com a coluna de texto dos banners mais larga */
@media (max-width: 991px) {
  .carousel-wrap.has-arrows .carousel-btn { display: block; }
  .h-row-4, .h-row-3 { grid-auto-columns: calc((100% - 10px) / 2.4); }
  .h-hero-box, .h-strip-text, .h-banner-text { width: min(585px, 58%); }
  .h-feature-title { font-size: 28px; }
}
/* celular: fotos verticais e texto sobre a parte de baixo; a <picture> troca para a foto de celular no mesmo ponto (767px) */
@media (max-width: 767px) {
  .h-title { margin-bottom: 36px; }
  .h-hero-media img { aspect-ratio: 4 / 5; }
  .h-hero-box, .text-right .h-hero-box, .text-center .h-hero-box {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; transform: none; padding: 70px 18px 52px; text-align: left;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.72) 38%); color: #fff;
  }
  .h-hero-box .h-btn-outline:hover { background: #fff; color: #111; }
  .h-hero-arrow { top: 40%; width: 32px; }
  .h-hero-arrow.prev { left: 2px; } .h-hero-arrow.next { right: 2px; }
  .h-hero-dots button { background-color: rgba(255,255,255,.45); }
  .h-hero-dots button.active { background-color: #fff; }
  .h-strip { display: block; min-height: 0; background: #fff; }
  .h-strip-media { position: static; display: block; }
  .h-strip-media img { height: auto; aspect-ratio: 390 / 156; }
  .h-strip-text { width: auto; margin: 0; padding: 22px 18px 30px; }
  .h-duo { grid-template-columns: 1fr; row-gap: 30px; }
  .h-showcase { grid-template-columns: 1fr; margin-top: 40px; }
  .h-showcase-img { aspect-ratio: 390 / 406; }
  .h-showcase-rail { padding: 24px 0 0; }
  .h-banner { align-items: flex-end; }
  .h-feature, .h-manifesto { aspect-ratio: 9 / 16; }
  .h-service { aspect-ratio: 390 / 538; }
  .h-banner.is-light .h-banner-media::after { background: linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,.72)); }
  .h-banner-text { width: auto; margin: 0; padding: 24px 18px 32px; }
  .h-manifesto-title { font-size: 26px; }
  .h-manifesto .h-banner-sub { max-width: none; }
  .h-video-controls { top: 14px; bottom: auto; left: auto; right: 14px; }
  .h-cards { grid-template-columns: 1fr 1fr; gap: 36px 14px; margin-top: 40px; }
  .h-card h3 { margin-top: 18px; }
  .h-row-stories { grid-auto-columns: 46%; }
  .trust-strip { margin-top: 40px; }
  .trust-inner { grid-template-columns: 1fr 1fr; row-gap: 26px; }
}
@media (max-width: 640px) {
  .h-row-4 { grid-auto-columns: 77%; }
  .h-row-3 { grid-auto-columns: 100%; }
  .h-iconic { aspect-ratio: 4 / 5; }
  .h-hero-title { font-size: 26px; line-height: 1.2; }
  .h-over-text b { font-size: 20px; }
  .h-row-stories { grid-auto-columns: 56%; }
}

/* ---------- Seções ---------- */
.section { padding: 46px 20px 10px; }
.section.container { padding-left: 20px; padding-right: 20px; }
.section-head { text-align: center; margin-bottom: 26px; }
.section-head h2 { font-size: 26px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.section-head p { color: #555; margin-bottom: 6px; }
.link-more { font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }


/* ---------- Grades e carrosséis de produtos ---------- */
.product-grid { display: grid; gap: 40px 17px; }
.product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.product-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.product-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.product-row, .lines-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 20px) / 5);
  gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px;
}
.product-row { grid-auto-columns: calc((100% - 3 * 17px) / 4); gap: 17px; }
.product-row::-webkit-scrollbar, .lines-row::-webkit-scrollbar { display: none; }
.product-row > *, .lines-row > * { scroll-snap-align: start; }
/* setas finas fora dos cards; o carrossel de produtos tem a largura de 4 cards de ~276px */
.carousel-wrap { position: relative; padding: 0 48px; }
.carousel-wrap.is-products { max-width: 1240px; margin: 0 auto; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 52px; padding: 4px; border: 0; background: none; color: #111; z-index: 4; }
.carousel-btn svg { width: 18px; height: 38px; stroke-width: 1.3; }
.carousel-btn:hover { color: #666; }
.carousel-btn.prev { left: 6px; } .carousel-btn.next { right: 6px; }
/* barrinhas de posição: o traço visível tem 3px, a área de clique 19px */
.carousel-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.carousel-dots button { width: 31px; height: 19px; padding: 8px 0; border: 0; background: #d9d9d9; background-clip: content-box; cursor: pointer; }
.carousel-dots button.active { background-color: #242424; }
.carousel-dots button:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* card de produto no modelo de referência (Kérastase) */
.product-card { display: flex; flex-direction: column; text-align: left; min-width: 0; }
.pc-media { position: relative; }
.pc-img { display: block; aspect-ratio: 1; background: #f7f5f3; overflow: hidden; position: relative; }
.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s, transform .5s; }
.pc-img-hover { position: absolute; inset: 0; opacity: 0; }
.product-card:hover .pc-img-hover { opacity: 1; }
.product-card:hover .pc-img img:first-child { transform: scale(1.03); }
.pc-badge { position: absolute; top: 4px; left: 0; z-index: 2; padding: 4px 8px; background: var(--primary); color: #fff; font-size: 10px; line-height: 16px; text-transform: uppercase; }
.pc-wish, .pp-wish {
  position: absolute; top: 8px; right: 10px; width: 24px; height: 24px; border-radius: 20px; padding: 0;
  border: 0; background: #fff; display: flex; align-items: center; justify-content: center; color: #000; z-index: 2;
}
.pc-wish svg { width: 16px; height: 16px; }
.pp-wish svg { width: 20px; height: 20px; }
.pc-wish.active svg, .pp-wish.active svg { fill: var(--primary); stroke: var(--primary); }
.pc-info { padding-top: 5px; display: flex; flex-direction: column; align-items: flex-start; }
.pc-line {
  display: inline-block; max-width: 100%; margin-bottom: 7px; padding: 4px 8px; background: #eee; color: #242424;
  font-size: 10px; line-height: 16px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-line.is-empty { visibility: hidden; }
a.pc-line:hover { opacity: .85; }
.pc-title {
  width: 100%; min-height: 2.6em; margin: 0 0 9px; font-size: 14px; font-weight: 800; line-height: 1.3; text-transform: uppercase; letter-spacing: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-desc {
  width: 100%; height: 42px; margin: 0 0 12px; font-size: 12px; font-weight: 300; line-height: 14px; color: #242424;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-rating { display: flex; align-items: center; gap: 6px; height: 18px; font-size: 12px; font-weight: 300; line-height: 18px; color: #242424; }
.pc-rating a { text-decoration: underline; }
.stars { position: relative; display: inline-block; font-size: 12px; line-height: 1; letter-spacing: 1px; color: #d4d4d4; white-space: nowrap; }
.stars::before { content: "★★★★★"; }
.stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--rating, 0%); overflow: hidden; color: #242424; }
.stars-lg { font-size: 22px; }
.pc-buy { display: flex; flex-direction: column; margin-top: auto; padding-top: 11px; }
.pc-size { position: relative; height: 58px; margin-bottom: 17px; }
.pc-select { position: absolute; inset: 0; margin: 0; }
.pc-select > span { position: absolute; top: 0; left: 10px; z-index: 1; padding: 0 5px; background: #fff; font-size: 11px; font-weight: 400; line-height: 16px; color: #242424; }
.pc-select select {
  position: absolute; top: 8px; left: 0; width: 100%; height: 50px; margin: 0; padding: 0 32px 0 15px;
  border: 1px solid #525252; border-radius: 0; font-size: 14px; color: #000; cursor: pointer; appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23242424' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
}
.pc-select select:focus { border-color: #000; background-color: #fff; }
.pc-size-label { display: block; font-size: 11px; line-height: 16px; color: #242424; }
.pc-size-value { display: block; margin-top: -8px; font-size: 14px; line-height: 50px; color: #000; }
.pc-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 51px; padding: 10px 12px;
  border: 0; background: var(--primary); color: #fff; text-align: center; text-transform: uppercase; transition: opacity .2s;
}
.pc-btn:hover { opacity: .88; }
.pc-btn:disabled { background: #9a9a9a; cursor: not-allowed; opacity: 1; }
.pc-btn-label { font-size: 12px; font-weight: 400; line-height: 14px; }
.pc-btn-price { font-size: 14px; font-weight: 700; line-height: 14px; text-transform: none; }
.pc-btn-price del { margin-right: 6px; color: #E4242E; font-weight: 400; }
.pc-btn-price del:empty { display: none; }
.sold-out .pc-img img { opacity: .55; }

/* ---------- Rodapé (listas, newsletter, contato e redes; textos em Admin > Aparência) ---------- */
.site-footer { background: var(--footer-bg); color: var(--footer-text); font-size: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a:hover { color: inherit; opacity: .7; }
.site-footer h4 { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 16px; }
.site-footer .footer-main { display: flex; justify-content: space-between; gap: 40px; padding-top: 30px; padding-bottom: 44px; }
.footer-nav { display: grid; grid-template-columns: repeat(2, 160px); gap: 30px; align-content: start; }
.footer-col h4 { font-size: 18px; font-weight: 500; margin-bottom: 14px; }
.footer-group li { margin-bottom: 8px; line-height: 1.2; }
.footer-group + .footer-group { margin-top: 64px; }
.footer-side { width: 370px; flex-shrink: 0; }

.footer-news h4 { margin-bottom: 18px; }
.fn-required { font-size: 12px; margin: 0 0 20px; }
.footer-news input[type=email], .footer-news input[type=tel] { height: 50px; margin-bottom: 18px; padding: 0 12px; background: #fff; color: #111; border: 0; border-radius: 0; }
.footer-news input::placeholder { color: #333; opacity: 1; }
.fn-optin { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; color: inherit; font-size: 13px; font-weight: 400; line-height: 1.6; }
.fn-optin input {
  flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0; padding: 0; appearance: none; -webkit-appearance: none;
  background: #fff; border: 0; border-radius: 0; cursor: pointer;
}
.fn-optin input:checked { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat; }
.fn-optin input:focus-visible, .fn-submit:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.fn-optin b { display: block; font-weight: 600; }
.fn-optin small { display: block; margin-top: 3px; font-size: 11px; }
.fn-optin a { text-decoration: underline; }
.fn-privacy { display: block; margin-top: 24px; }
.fn-submit { min-height: 50px; padding: 0 18px; background: #fff; color: #111; border: 0; border-radius: 0; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.fn-submit:hover { opacity: .85; }
.fn-submit:disabled { opacity: .5; cursor: wait; }
.fn-msg { margin: 12px 0 0; font-size: 13px; font-weight: 600; }

.site-footer .footer-contact { margin-top: 18px; line-height: 1.65; }
.footer-social { margin-top: 48px; }
.footer-social h4 { margin-bottom: 18px; }
.footer-social-icons { display: flex; justify-content: space-between; padding: 0 10px 0 2px; }
.footer-social-icons svg { width: 19px; height: 19px; }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; padding: 36px 0 34px;
  border-top: 1px solid color-mix(in srgb, currentColor 55%, transparent);
}
.footer-copy { font-size: 11px; line-height: 1.6; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 0; max-width: 620px; }
.footer-legal li + li::before { content: "•"; margin: 0 10px; }
/* faixa fixa no pé da tela; --bar-h abre espaço para ela no fim da página e nos botões flutuantes */
body:has(.footer-bar) { --bar-h: 34px; padding-bottom: var(--bar-h); }
.footer-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: color-mix(in srgb, var(--footer-text) 20%, var(--footer-bg)); }
.site-footer .footer-bar ul { display: flex; align-items: center; justify-content: flex-end; gap: 0 clamp(32px, 16vw, 250px); height: var(--bar-h); font-size: 12px; text-transform: uppercase; white-space: nowrap; opacity: .9; }
/* logos de pagamento: todos no mesmo cartão branco, logo centralizado */
.pay-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pay-card {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 34px; padding: 6px 7px;
  background: #fff; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}
.pay-card img { display: block; max-width: 100%; max-height: 100%; }

/* ---------- Gavetas (menu mobile e mini carrinho) ---------- */
.drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.drawer::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .3s; }
.drawer.open { visibility: visible; }
.drawer.open::before { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; bottom: 0; width: min(380px, 88vw); background: #fff; overflow-y: auto;
  transition: transform .3s ease; padding: 20px; display: flex; flex-direction: column;
}
.drawer-left .drawer-panel { left: 0; transform: translateX(-100%); }
.drawer-right .drawer-panel { right: 0; transform: translateX(100%); }
.drawer.open .drawer-panel { transform: none; }
.drawer-close { background: none; border: 0; font-size: 30px; line-height: 1; align-self: flex-end; padding: 0 4px; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 12px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .08em; }
.drawer-search { margin: 10px 0 16px; }
.drawer-nav { list-style: none; padding: 0; margin: 0; }
.drawer-nav a { display: block; padding: 13px 0; border-bottom: 1px solid #f0f0f0; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; }
.drawer-nav .sep { margin-top: 18px; }
.drawer-nav .drawer-highlight { background: var(--primary); color: #fff; padding: 13px 14px; border-bottom: 0; }
/* mini carrinho no modelo da Kérastase: lista em fundo cinza que rola, rodapé fixo com subtotal */
.drawer-cart .drawer-panel { width: min(450px, 100vw); padding: 0; overflow: hidden; }
.drawer-cart .drawer-head { margin: 0; padding: 16px 20px; border-color: #e5e5e5; font-size: 18px; text-transform: none; letter-spacing: 0; }
.drawer-cart .drawer-head strong { font-weight: 500; }
.drawer-cart .drawer-close { display: flex; padding: 0; }
.drawer-cart .drawer-close .icon { width: 26px; height: 26px; stroke-width: 1.4; }
.mini-cart-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.mini-cart-body.is-busy .mc-items { opacity: .6; pointer-events: none; }
.mc-scroll { flex: 1; overflow-y: auto; padding: 20px 15px 30px; background: #f5f5f5; }
.mc-notice { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; padding: 12px 20px; background: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.08); font-size: 13px; }
.mc-notice > div { flex: 1; }
.mc-notice.is-ok .icon { fill: #1f7a3a; stroke: #fff; stroke-width: 2.2; }
.mc-progress { display: block; height: 4px; margin-top: 8px; background: #e5e5e5; border-radius: 2px; overflow: hidden; }
.mc-progress span { display: block; height: 100%; background: var(--primary); }
.mc-items { display: grid; gap: 10px; margin: 0 0 30px; padding: 0; list-style: none; transition: opacity .2s; }
.mc-item { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 15px 12px 15px 15px; background: #fff; }
.mc-img img { width: 56px; height: 56px; object-fit: contain; }
.mc-info { min-width: 0; }
.mc-name { display: block; font-size: 14px; font-weight: 500; line-height: 1.15; text-transform: uppercase; }
.mc-desc { margin: 6px 0 0; overflow: hidden; color: #666; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.mc-size { margin: 6px 0 0; font-size: 13px; color: #333; }
.mc-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-top: 22px; }
.mc-qty { position: relative; display: inline-flex; align-items: center; height: 50px; border: 1px solid #ccc; border-radius: 3px; }
.mc-qty-label { position: absolute; top: -9px; left: 8px; padding: 0 4px; background: #fff; color: #444; font-size: 12px; line-height: 16px; white-space: nowrap; }
.mc-qty button { width: 34px; height: 100%; background: none; border: 0; font-size: 18px; color: #222; }
.mc-qty button:disabled { opacity: .3; cursor: not-allowed; }
.mc-qty-value { min-width: 28px; text-align: center; font-size: 14px; color: #666; }
.mc-price { font-size: 14px; font-weight: 600; white-space: nowrap; text-align: right; }
.mc-price del { display: block; color: #777; font-size: 12px; font-weight: 400; }
.mc-recs-title { margin: 0 0 20px; font-size: 18px; font-weight: 600; text-align: center; text-transform: uppercase; }
.mc-recs-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc(50% - 8px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mc-recs-track::-webkit-scrollbar { display: none; }
.mc-recs-track .product-card { scroll-snap-align: start; }
.mc-footer { padding: 15px 15px 20px; background: #fff; border-top: 1px solid #e5e5e5; box-shadow: 0 -2px 8px rgba(0,0,0,.05); }
.mc-subtotal { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 14px; }
.mc-footer .btn { min-height: 50px; font-weight: 500; }
.mc-footer .btn + .btn { margin-top: 12px; }
.mc-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 40px 20px; text-align: center; }
.mc-confirm { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.45); }
.mc-confirm[hidden] { display: none; }
.mc-confirm-box { width: 100%; max-width: 360px; padding: 24px; background: #fff; text-align: center; }
.mc-confirm-box strong { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 600; text-transform: uppercase; }
.mc-confirm-box p { margin: 0 0 20px; color: #555; font-size: 14px; }
.mc-confirm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.free-ship-bar { background: #f7f5f3; padding: 12px 14px; border-radius: var(--radius); font-size: 13px; margin-bottom: 16px; }
.free-ship-bar.ok { background: #eaf6ee; color: #1e6b3a; }
.free-ship-bar .bar { height: 5px; background: #e2ded9; border-radius: 3px; margin-top: 8px; overflow: hidden; }
.free-ship-bar .bar span { display: block; height: 100%; background: var(--primary); }

.whatsapp-float { position: fixed; right: 20px; bottom: calc(20px + var(--bar-h, 0px)); width: 54px; height: 54px; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; z-index: 90; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.whatsapp-float svg { width: 30px; height: 30px; fill: #fff; stroke: none; }
.back-to-top { position: fixed; right: 24px; bottom: calc(88px + var(--bar-h, 0px)); width: 42px; height: 42px; border-radius: 50%; border: 1px solid #ddd; background: #fff; color: #111; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 90; opacity: 0; pointer-events: none; transition: opacity .3s; }
.back-to-top svg { width: 18px; height: 18px; stroke-width: 1.3; }
.back-to-top.show { opacity: 1; pointer-events: auto; }
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--bar-h, 0px)); transform: translateX(-50%) translateY(20px); background: #111; color: #fff; padding: 12px 20px; border-radius: var(--radius); font-size: 14px; z-index: 300; opacity: 0; transition: all .3s; }
.toast.show { opacity: 1; transform: translateX(-50%); }

/* ---------- Listagem ---------- */
.breadcrumbs { font-size: 12px; color: #777; padding: 18px 0; }
.breadcrumbs a:hover { text-decoration: underline; }
.listing-layout { display: grid; grid-template-columns: 230px 1fr; gap: 40px; padding-bottom: 40px; }
.listing-sidebar h4 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.listing-sidebar ul { list-style: none; padding: 0; margin: 0; }
.listing-sidebar a { display: block; padding: 6px 0; font-size: 14px; color: #444; }
.listing-sidebar a.active { font-weight: 700; color: #000; }
.listing-sidebar span { color: #999; font-size: 12px; }
.listing-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.listing-head h1 { margin: 0; text-transform: uppercase; font-weight: 600; font-size: 24px; letter-spacing: .03em; }
.listing-sort { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.listing-sort select { width: auto; padding: 9px 12px; background: #fff; }
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 40px; }
.pagination a { min-width: 38px; height: 38px; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); font-size: 14px; }
.pagination a.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.empty-state { text-align: center; padding: 50px 20px; }
.empty-state.big { padding: 90px 20px; }

/* ---------- Página de produto ---------- */
.product-top { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; max-width: 1200px; margin: 0 auto; }
.gallery { display: grid; grid-template-columns: 80px 1fr; gap: 14px; align-self: start; position: sticky; top: 20px; }
.gallery-thumbs { display: flex; flex-direction: column; gap: 10px; }
.gallery-thumbs button { border: 1px solid #e5e5e5; padding: 0; background: #f7f5f3; border-radius: 4px; overflow: hidden; opacity: .65; }
.gallery-thumbs button.active, .gallery-thumbs button:hover { opacity: 1; border-color: #111; }
.gallery-main { position: relative; background: #f7f5f3; }
.gallery-main img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.product-summary h1 { font-size: 26px; font-weight: 500; margin-bottom: 6px; }
.sku { font-size: 12px; color: #888; }
.pp-price { display: flex; align-items: baseline; gap: 12px; margin: 16px 0 4px; }
.pp-price del { font-size: 16px; }
.pp-price strong { font-size: 28px; font-weight: 700; }
.pp-inst { color: #555; font-size: 14px; margin-bottom: 10px; }
.pix-box { display: inline-flex; align-items: center; gap: 10px; background: #eefaf8; border-radius: var(--radius); padding: 9px 14px; font-size: 14px; margin-bottom: 16px; }
.pix-icon { background: #32bcad; color: #fff; font-size: 10px; font-weight: 800; padding: 3px 6px; border-radius: 4px; letter-spacing: .05em; }
.short-desc { background: #f5f5f5; padding: 15px; border-radius: var(--radius); border-bottom: 3px solid #222; font-size: 14px; margin-bottom: 18px; }
.buy-form { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: stretch; margin-bottom: 20px; }
.buy-form .btn-buy { height: 58px; font-size: 16px; }
.buy-form .btn-add { grid-column: 1 / 3; }
.buy-form .pp-wish { position: static; width: 58px; height: 100%; border: 1px solid #ddd; border-radius: var(--radius); grid-row: 1 / 3; grid-column: 3; }
.qty { display: flex; align-items: center; border: 1px solid #ddd; border-radius: var(--radius); background: #fff; }
.qty button { background: none; border: 0; width: 36px; height: 100%; min-height: 40px; font-size: 18px; }
.qty input { width: 44px; text-align: center; border: 0; background: transparent; padding: 0; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.shipping-calc { border-top: 1px solid #eee; padding-top: 16px; margin-bottom: 18px; }
.shipping-calc .inline-form input { max-width: 200px; }
.shipping-result { margin-top: 10px; }
.ship-line { display: flex; justify-content: space-between; font-size: 13px; padding: 8px 0; border-bottom: 1px dashed #e5e5e5; }
.pp-payments { margin-bottom: 18px; }
.pp-benefits { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.pp-benefits li { display: flex; gap: 14px; align-items: flex-start; }
.pp-benefit-icon { width: 38px; height: 38px; border-radius: 50%; background: #f4f1ee; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pp-benefits strong { font-size: 14px; }
.pp-benefits p { font-size: 13px; color: #666; margin: 0; }
.product-details { max-width: 1000px; margin: 50px auto 0; }
.tab-buttons { display: flex; justify-content: center; gap: 30px; border-bottom: 1px solid #e5e5e5; }
.tab-buttons button { background: none; border: 0; padding: 12px 0; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #888; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab-buttons button.active { color: #000; border-color: #000; }
.tab-panel { display: none; padding: 26px 0; }
.tab-panel.active { display: block; }
.rich { font-size: 15px; line-height: 1.75; color: #333; }
.rich h3 { font-size: 18px; font-weight: 600; margin-top: 1.2em; }
.rich ul { padding-left: 20px; }
.product-summary .pc-line { margin-bottom: 10px; }
.gallery-main .pc-badge { top: 12px; }
.pp-rating { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; color: #444; }
.pp-rating span:last-child { text-decoration: underline; }
.pp-price del:empty, .pp-inst:empty { display: none; }
.pp-sizes { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.pp-sizes legend { padding: 0; margin-bottom: 8px; font-size: 13px; }
.pp-size-options { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-size { position: relative; margin: 0; }
.pp-size input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pp-size span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid #525252; background: #fff; font-size: 14px; font-weight: 400; cursor: pointer; }
.pp-size input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.pp-size input:focus-visible + span { outline: 2px solid #000; outline-offset: 2px; }
.pp-size.is-out span { color: #aaa; border-color: #ddd; text-decoration: line-through; cursor: not-allowed; }

/* avaliações */
.reviews { max-width: 1000px; margin: 50px auto 0; padding-top: 30px; border-top: 1px solid #e5e5e5; scroll-margin-top: 20px; }
.reviews > h2 { margin-bottom: 24px; font-size: 18px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.reviews-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.reviews-summary { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.reviews-summary strong { font-size: 34px; font-weight: 700; line-height: 1; }
.reviews-list { list-style: none; margin: 0; padding: 0; }
.reviews-list li { padding: 16px 0; border-bottom: 1px solid #eee; }
.reviews-list p { margin: 6px 0 0; font-size: 14px; }
.reviews-list .review-meta { font-size: 12px; color: #777; }
.review-form-box { padding: 22px; background: #f7f7f7; }
.review-form-box h3 { margin-bottom: 8px; font-size: 15px; font-weight: 700; text-transform: uppercase; }
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; margin-bottom: 12px; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { margin: 0; font-size: 30px; line-height: 1; color: #ccc; cursor: pointer; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: #242424; }
.star-input input:focus-visible + label { outline: 2px solid #000; }

/* ---------- Carrinho ---------- */
.steps { list-style: none; display: flex; justify-content: center; gap: 30px; padding: 26px 0; margin: 0; font-size: 14px; color: #aaa; flex-wrap: wrap; }
.steps li { display: flex; align-items: center; gap: 8px; }
.steps span { width: 26px; height: 26px; border-radius: 50%; border: 1px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.steps .active, .steps .done { color: #000; font-weight: 600; }
.steps .active span, .steps .done span { background: #000; color: #fff; border-color: #000; }
/* ---------- Página do carrinho (modelo Kérastase: fundo cinza, cartões brancos, resumo à direita) ---------- */
.cart-wrap { background: #f5f5f5; }
.cart-notice { padding: 13px 0; background: #000; color: #fff; font-size: 14px; font-weight: 500; line-height: 1.4; text-align: center; }
.cart-notice a { text-decoration: underline; text-underline-offset: 3px; }
.cart-page { padding: 44px 20px 70px; }
.cart-title { margin: 0 0 26px; font-size: 26px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; }
.cart-title small { margin-left: 4px; font-size: 14px; font-weight: 300; text-transform: none; color: #555; }
/* itens à esquerda, resumo à direita ocupando as duas linhas, sugestões embaixo dos itens; no celular vira itens > resumo > sugestões */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 30px; align-items: start; }
.cart-layout .cart-side { grid-column: 2; grid-row: 1 / span 2; }
.cart-layout .cart-recs { grid-column: 1; margin-top: 10px; }
.cart-ship { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding: 14px 20px; background: #fff; border: 1px solid #e3e3e3; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.06); font-size: 13px; }
.cart-ship > div { flex: 1; }
.cart-ship.is-ok .icon { fill: #1f7a3a; stroke: #fff; stroke-width: 2.2; }
.cart-ship-bar { display: block; height: 4px; margin-top: 8px; background: #e5e5e5; border-radius: 2px; overflow: hidden; }
.cart-ship-bar span { display: block; height: 100%; background: var(--primary); }
.cart-empty { padding: 50px 20px; background: #fff; text-align: center; }
.cart-empty p { margin: 0 0 18px; font-size: 16px; }
/* item */
.cart-item { margin-bottom: 16px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.ci-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: 24px; }
.ci-img img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.ci-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: start; }
.ci-name { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.3; text-transform: uppercase; }
.ci-wish, .ci-remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: #222; }
.ci-wish svg, .ci-remove svg { width: 18px; height: 18px; }
.ci-wish.active svg { fill: var(--primary); stroke: var(--primary); }
.ci-desc { max-width: 560px; margin: 10px 0 0; color: #666; font-size: 13px; line-height: 1.5; }
.ci-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 24px; align-items: center; margin-top: 28px; }
.ci-size { margin: 0; font-size: 13px; color: #333; }
.ci-size a { margin-left: 6px; text-decoration: underline; text-underline-offset: 3px; }
.ci-qty { position: relative; display: inline-flex; align-items: center; height: 50px; background: #fff; border: 1px solid #ccc; border-radius: 3px; }
.ci-qty-label { position: absolute; top: -9px; left: 8px; padding: 0 4px; background: #fff; color: #444; font-size: 12px; line-height: 16px; white-space: nowrap; }
.ci-qty button { width: 34px; height: 100%; border: 0; background: none; font-size: 18px; color: #222; }
.ci-qty button:disabled { opacity: .3; cursor: not-allowed; }
.ci-qty input { width: 36px; padding: 0; border: 0; background: transparent; text-align: center; font-size: 14px; color: #666; -moz-appearance: textfield; }
.ci-qty input::-webkit-outer-spin-button, .ci-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ci-price { margin: 0; font-size: 15px; text-align: right; white-space: nowrap; }
.ci-price del { display: block; color: #777; font-size: 12px; }
.ci-price strong { font-weight: 600; }
.ci-update { margin-top: 12px; }
/* compre junto */
.ci-bundle { margin: 0 24px 24px; background: #f2f2f2; }
.ci-bundle summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-size: 13px; cursor: pointer; list-style: none; }
.ci-bundle summary::-webkit-details-marker { display: none; }
.ci-bundle-tag { padding: 4px 8px; background: #000; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ci-bundle-mark { width: 20px; margin-left: auto; font-size: 20px; line-height: 1; text-align: center; }
.ci-bundle-mark::before { content: "+"; }
.ci-bundle[open] .ci-bundle-mark::before { content: "–"; }
.ci-bundle-body { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 4px 16px 20px; }
.ci-bundle-img { position: relative; display: block; background: #fff; }
.ci-bundle-img img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.ci-bundle-img .ci-wish { position: absolute; top: 2px; right: 2px; }
.ci-bundle-name { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.3; text-transform: uppercase; }
.ci-bundle-off { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13px; color: #1f7a3a; }
.ci-bundle-off .icon { width: 16px; height: 16px; fill: #1f7a3a; stroke: #fff; stroke-width: 2.2; }
.ci-bundle-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.ci-bundle-foot .ci-price del { display: inline; margin-right: 6px; }
.ci-bundle-add { align-self: center; }
.ci-bundle-add .btn { min-height: 50px; padding: 0 24px; }
/* sugestões */
.cart-recs { margin-top: 40px; }
.cart-recs-title { margin: 0 0 24px; font-size: 20px; font-weight: 600; letter-spacing: .02em; text-align: center; text-transform: uppercase; }
/* resumo do pedido e pagamento seguro */
.cart-side { position: sticky; top: 20px; display: grid; gap: 20px; }
.cart-summary, .cart-secure { padding: 24px 16px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.cart-summary h2, .cart-secure h2 { margin: 0 0 20px; font-size: 18px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.cs-rows { display: grid; grid-template-columns: 1fr auto; gap: 14px 10px; margin: 0; padding-bottom: 16px; border-bottom: 1px solid #ddd; font-size: 14px; }
.cs-rows dt { display: flex; align-items: center; gap: 8px; }
.cs-rows dd { margin: 0; text-align: right; }
.cs-rows .is-discount { color: #1e6b3a; }
.cs-info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid #333; border-radius: 50%; font-size: 11px; font-weight: 600; cursor: help; }
.cs-info::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 5; width: 230px; padding: 8px 10px; background: #111; color: #fff; border-radius: 3px; font-size: 12px; font-weight: 400; line-height: 1.4; text-align: center; transform: translateX(-50%); opacity: 0; visibility: hidden; transition: opacity .15s; }
.cs-info:hover::after, .cs-info:focus::after { opacity: 1; visibility: visible; }
.cs-expand { border-bottom: 1px solid #ddd; }
.cs-expand summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.cs-expand summary::-webkit-details-marker { display: none; }
.cs-mark { font-size: 22px; font-weight: 300; line-height: 1; }
.cs-mark::before { content: "+"; }
.cs-expand[open] .cs-mark::before { content: "–"; }
.cs-expand form { padding-bottom: 16px; }
.cs-inline { display: flex; gap: 8px; }
.cs-inline input { flex: 1; min-width: 0; }
.radio-card { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 10px 12px; border: 1px solid #ddd; border-radius: var(--radius); background: #fff; cursor: pointer; font-weight: 400; }
.radio-card span { flex: 1; }
.radio-card small { display: block; color: #777; }
.radio-card em { font-style: normal; font-weight: 600; }
.radio-card:has(input:checked) { border-color: var(--primary); }
.coupon-applied { padding: 10px; background: #eaf6ee; border-radius: var(--radius); font-size: 14px; }
.cs-total { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; font-size: 16px; font-weight: 600; text-transform: uppercase; }
.cs-pix { margin: -10px 0 16px; font-size: 13px; color: #1e6b3a; }
.cart-summary .btn-lg { min-height: 50px; font-size: 13px; }
.cart-secure { text-align: center; }
.cart-secure p { margin: 0 0 16px; font-size: 14px; color: #333; }
.cart-secure .pay-badges { justify-content: center; gap: 12px 16px; margin-bottom: 22px; }
.cart-secure .pay-card { width: 58px; height: 38px; }
.cart-terms { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
/* totais do checkout, da página do pedido e do obrigado */
.totals { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; margin: 18px 0; font-size: 14px; }
.totals dd { margin: 0; text-align: right; }
.totals .discount { color: #1e6b3a; }
.totals .grand { font-size: 18px; font-weight: 700; border-top: 1px solid #ddd; padding-top: 10px; }
.secure-note { text-align: center; font-size: 12px; color: #777; margin-top: 10px; }

/* ---------- Checkout (modelo Kérastase: passos empilhados à esquerda, "Meus pedidos" à direita) ---------- */
.checkout-body { background: #f5f5f5; }
.checkout-page { max-width: 1220px; }
.checkout-header { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.checkout-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 100px; }
.checkout-header .logo img { width: min(var(--logo-w), 220px); max-height: 64px; }
.checkout-header .logo-text { font-size: 24px; letter-spacing: .25em; text-transform: uppercase; }
.checkout-help { display: grid; gap: 3px; font-size: 12px; color: #555; text-align: right; }
.checkout-help b { font-weight: 400; text-transform: uppercase; color: #444; }
.checkout-help a { text-decoration: underline; text-underline-offset: 3px; }
.co-title { margin: 40px 0 22px; font-size: 24px; font-weight: 600; text-transform: uppercase; }
.co-layout { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 30px; align-items: start; padding-bottom: 60px; }
.co-steps, .co-form { display: grid; gap: 10px; }
.co-step { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.co-step-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 22px 16px; }
.co-step-head h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #999; }
.co-step.is-open .co-step-head h2, .co-step.is-done .co-step-head h2 { color: #111; }
.co-step.is-done:not(.is-open) .co-step-head { cursor: pointer; }
.co-step-n { font-size: 13px; color: #777; white-space: nowrap; }
.co-step-summary { grid-column: 1; margin: 0; font-size: 13px; color: #555; }
.co-step-summary:empty { display: none; }
.co-step-edit { grid-column: 2; justify-self: end; padding: 0; border: 0; background: none; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; color: #111; }
.co-step:not(.is-done) .co-step-edit, .co-step.is-open .co-step-edit { display: none; }
.co-step-body { padding: 0 16px 24px; }
.has-js .co-step:not(.is-open) .co-step-body { display: none; }
.co-delivery { padding: 18px 24px 24px; border: 1px solid #111; }
.co-delivery-head { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.co-delivery-head svg { width: 18px; height: 18px; }
.co-radio { flex-shrink: 0; width: 16px; height: 16px; border: 1px solid #111; border-radius: 50%; background: radial-gradient(circle, #111 40%, transparent 44%); }
.co-delivery-sub { margin: 4px 0 0 24px; font-size: 13px; color: #666; }
.co-required { margin: 14px 0 20px; font-size: 12px; color: #666; }
.co-who { margin: 16px 0; font-size: 14px; }
.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-items: end; }
.co-row-3 { grid-template-columns: 2fr 1fr 1fr; }
.co-field { display: block; margin: 0 0 22px; font-weight: 400; }
.co-field > span { display: block; font-size: 14px; color: #333; }
.co-field input, .co-field textarea { margin-top: 0; padding: 8px 0; border: 0; border-bottom: 1px solid #999; border-radius: 0; background: transparent; font-size: 15px; }
.co-field input:focus, .co-field textarea:focus { border-bottom-color: #111; background: transparent; }
.co-field input:user-invalid { border-bottom-color: #c0392b; }
.co-link { display: inline-block; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; color: #555; }
.co-link-cep { margin-bottom: 30px; }
.co-check { margin: 4px 0 12px; font-size: 13px; }
.co-addresses { margin: 16px 0 6px; }
.co-addresses-title { margin: 0 0 10px; font-size: 13px; color: #555; }
.co-next { min-height: 50px; padding: 0 24px; margin-top: 6px; }
.co-ship .radio-card { padding: 14px 16px; }
.co-ident-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.co-ident-box { padding: 20px; border: 1px solid #ddd; }
.co-ident-box h3 { margin: 0 0 14px; font-size: 15px; font-weight: 600; text-transform: uppercase; }
.co-ident-box p { margin: 0 0 18px; font-size: 13px; color: #555; }
.co-ident-box .co-link { display: block; margin-top: 14px; }
/* meus pedidos */
.co-summary { position: sticky; top: 20px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.co-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 16px; border-bottom: 1px solid #e5e5e5; }
.co-summary-head h2 { margin: 0; font-size: 18px; font-weight: 600; text-transform: uppercase; }
.co-summary-head a { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.co-items { list-style: none; margin: 0; padding: 8px 16px; border-bottom: 1px solid #e5e5e5; }
.co-items li { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 14px; padding: 14px 0; }
.co-items li + li { border-top: 1px solid #f0f0f0; }
.co-items img { width: 100px; aspect-ratio: 1; object-fit: contain; }
.co-item-name { display: block; overflow: hidden; font-size: 14px; font-weight: 500; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.co-item-desc { margin: 6px 0 0; overflow: hidden; color: #555; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.co-item-size { display: block; margin-top: 8px; font-size: 13px; color: #333; }
.co-item-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 13px; text-transform: uppercase; }
.co-item-foot b { font-size: 14px; text-transform: none; }
.co-totals { margin: 0; padding: 16px 16px 20px; font-size: 14px; }
.co-totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; }
.co-totals > div[hidden] { display: none; }
.co-totals dt, .co-totals dd { margin: 0; }
.co-totals dt small { display: block; margin-top: 2px; font-size: 12px; color: #777; }
.co-totals > div:has(.is-discount) { color: #1e6b3a; }
.co-grand dt { font-weight: 600; text-transform: uppercase; }
.co-grand dd { font-weight: 600; }
.pay-option { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; border: 1px solid #ddd; border-radius: var(--radius); padding: 14px; margin-bottom: 10px; cursor: pointer; font-weight: 400; }
.pay-option:has(input:checked) { border-color: var(--primary); background: #fafafa; }
.pay-option input { grid-row: 1 / 3; margin-top: 3px; }
.pay-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.pay-title .tag { margin-left: 0; }
.pay-title .pay-badges { gap: 4px; }
.pay-title .pay-card { width: 38px; height: 25px; padding: 4px 5px; border-radius: 4px; }
.pay-desc { font-size: 12px; color: #666; }
/* cartão digitado no checkout (Axxon Pay) */
.co-card { margin: -4px 0 14px; padding: 18px 18px 4px; border: 1px solid #ddd; border-radius: var(--radius); background: #fafafa; }
.co-card[hidden] { display: none; }
.co-card .co-field { margin-bottom: 18px; }
.co-card select { width: 100%; margin-top: 0; padding: 8px 0; border: 0; border-bottom: 1px solid #999; border-radius: 0; background: transparent; font-size: 15px; }
.co-card-row { grid-template-columns: 1fr 1fr 2fr; }
.co-card-note { margin: 0 0 12px; font-size: 12px; color: #666; }
.tag { font-style: normal; background: #32bcad; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: 6px; }
.checkout-footer { text-align: center; font-size: 12px; color: #888; padding: 20px 0 40px; }

/* ---------- Obrigado / conta / páginas ---------- */
.thanks-page { max-width: 1000px; padding-bottom: 60px; }
.thanks-head { text-align: center; padding: 40px 0 20px; }
.thanks-icon { width: 64px; height: 64px; border-radius: 50%; background: #1e6b3a; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.thanks-icon.is-off { background: #b3261e; }
.pay-wait { display: flex; align-items: center; justify-content: center; gap: 8px; }
.spinner { flex-shrink: 0; width: 14px; height: 14px; border: 2px solid #ccc; border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pix-pay { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 26px; text-align: center; margin-bottom: 30px; }
.pix-qr { display: flex; justify-content: center; margin: 16px 0; }
.pix-copy { display: flex; gap: 8px; max-width: 620px; margin: 0 auto 10px; }
.pix-copy input { font-size: 12px; }
.thanks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.thanks-grid h3 { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-top: 10px; }
/* ---------- Conta: janela "Iniciar sessão" / "Criar conta" / "Esqueceu sua senha?" (modelo da Kérastase) ---------- */
.auth-modal .drawer-panel {
  top: 50%; left: 50%; right: auto; bottom: auto; height: auto; max-height: calc(100vh - 32px); width: min(570px, calc(100vw - 24px));
  display: block; padding: 46px 80px 40px; background: #fff; overflow-y: auto; opacity: 0;
  transform: translate(-50%, -48%); transition: opacity .25s ease, transform .25s ease;
}
.auth-modal.open .drawer-panel { opacity: 1; transform: translate(-50%, -50%); }
.auth { position: relative; }
.auth-close { position: absolute; top: -28px; right: -58px; background: none; border: 0; padding: 6px; color: #111; display: inline-flex; }
.auth-close svg { width: 22px; height: 22px; stroke-width: 1.5; }
.auth-title { font-size: 26px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 22px; }
.auth-required { font-size: 12px; color: #666; margin: 0 0 14px; }
.auth-field { display: block; position: relative; margin: 0 0 22px; font-weight: 400; }
.auth-field > span { display: block; font-size: 13px; color: #333; padding-left: 4px; }
.auth-field input { margin-top: 2px; padding: 9px 4px; border: 0; border-bottom: 1px solid #111; border-radius: 0; background: transparent; font-size: 15px; }
.auth-field input:focus { background: transparent; border-bottom-color: #000; box-shadow: 0 1px 0 #000; }
.auth-field-pw input { padding-right: 40px; }
.auth-eye { position: absolute; right: 4px; bottom: 7px; background: none; border: 0; padding: 2px; color: #111; display: inline-flex; }
.auth-eye svg { width: 24px; height: 24px; stroke-width: 1.4; }
.auth-eye[aria-pressed="true"] .eye-off, .auth-eye[aria-pressed="false"] .eye-on { display: none; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 22px; }
.auth-row .auth-check { margin: 0; }
.auth-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; font-size: 14px; font-weight: 400; cursor: pointer; }
.auth-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; appearance: none; -webkit-appearance: none; border: 1px solid #111; border-radius: 0; background: #fff; display: inline-grid; place-content: center; }
.auth-check input::before { content: ""; width: 10px; height: 10px; background: #111; transform: scale(0); transition: transform .12s; }
.auth-check input:checked::before { transform: scale(1); }
.auth-link { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: #111; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth-submit { min-height: 50px; border-radius: 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.auth-or { display: flex; align-items: center; gap: 14px; margin: 22px 0 18px; font-size: 13px; color: #333; text-transform: uppercase; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: #d9d9d9; }
.auth-subtitle { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 8px; }
.auth-text { font-size: 14px; color: #333; margin: 0 0 18px; }
.auth-social { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.auth-social-btn { min-height: 50px; border-radius: 0; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .03em; }
.auth-social-icon { width: 24px; height: 24px; flex: none; }
.auth-social-icon * { stroke: none; }
.auth-note { font-size: 12px; color: #111; margin: 0 0 14px; }
.auth-panel form + .auth-note { margin-top: 16px; } /* sem login social, o aviso não cola no botão */
.auth-switch { font-size: 13px; margin: 0; }
.auth-alert { background: #fdecea; color: #a12a1e; padding: 12px 14px; font-size: 14px; margin: 0 0 18px; }
.auth-alert-ok { background: #eaf6ee; color: #1e6b3a; }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.auth-hint { font-size: 12px; color: #666; margin: -14px 0 16px 4px; }
.auth-page { display: block; max-width: 610px; padding: 40px 20px 70px; }
.auth-page .auth-close { display: none; }
@media (max-width: 640px) {
  .auth-modal .drawer-panel { padding: 40px 20px 30px; }
  .auth-close { top: -30px; right: -10px; }
  .auth-grid, .auth-social { grid-template-columns: 1fr; }
  .auth-title { font-size: 22px; }
}
.simple-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.simple-table th, .simple-table td { text-align: left; padding: 10px; border-bottom: 1px solid #eee; }
.simple-table a { text-decoration: underline; }
.status { font-size: 12px; padding: 3px 8px; border-radius: 10px; background: #eee; white-space: nowrap; }
.status-paid, .status-delivered { background: #eaf6ee; color: #1e6b3a; }
.status-pending { background: #fff4dc; color: #8a5a00; }
.status-shipped, .status-processing { background: #e8f0fe; color: #1a4fb4; }
.status-cancelled { background: #fdecea; color: #a12a1e; }
.page-content { max-width: 900px; padding-bottom: 60px; }
.page-content h1 { text-transform: uppercase; font-weight: 600; letter-spacing: .03em; }
.contact-form { margin-top: 30px; }
.link-danger { color: #a12a1e; }
.table-scroll { overflow-x: auto; }

/* ---------- Minha conta ---------- */
.account-page { padding-bottom: 60px; }
.account-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
.account-layout > * { min-width: 0; } /* deixa a fileira de abas rolar no celular em vez de alargar a página */
.account-nav { border: 1px solid #eee; border-radius: 8px; padding: 16px 0; position: sticky; top: 20px; }
.account-hello { padding: 0 20px 14px; margin: 0 0 8px; border-bottom: 1px solid #eee; font-size: 14px; }
.account-nav nav { display: flex; flex-direction: column; }
.account-nav a { padding: 10px 20px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #444; border-left: 3px solid transparent; }
.account-nav a:hover { background: #fafafa; color: #000; }
.account-nav a.active { border-left-color: var(--primary); color: #000; font-weight: 600; background: #fafafa; }
.account-nav .account-nav-out { margin-top: 8px; padding-top: 14px; border-top: 1px solid #eee; color: #888; }
.account-main { min-width: 0; }
.account-title { font-size: 22px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 18px; }
.account-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.account-title-row .account-title { margin: 0; }
.account-title-row + .muted { margin-top: -12px; }
.account-card { display: block; border: 1px solid #eee; border-radius: 8px; padding: 22px; margin-bottom: 20px; background: #fff; }
.account-card h2 { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
a.account-card:hover { border-color: #bbb; color: inherit; }
a.account-card h2 { margin-bottom: 6px; }
a.account-card p { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.account-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.account-empty { text-align: center; padding: 36px 22px; }
.account-shortcuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 20px; }
.account-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
.account-form { max-width: 720px; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.order-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; margin: 0; }
.order-meta .status { margin-left: auto; }

.order-steps { list-style: none; margin: 22px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.order-steps li { position: relative; text-align: center; padding: 0 6px; font-size: 12px; color: #999; }
.order-steps li::before { content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px; background: #e5e5e5; }
.order-steps li:first-child::before { display: none; }
.order-steps li.done::before { background: var(--primary); }
.order-steps .dot { position: relative; z-index: 1; display: block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ddd; background: #fff; margin: 0 auto 8px; }
.order-steps li.done { color: #111; }
.order-steps li.done .dot { border-color: var(--primary); background: var(--primary); }
.order-steps li.current .dot { box-shadow: 0 0 0 5px rgba(0,0,0,.08); }
.order-steps b { display: block; font-weight: 600; }
.order-steps small { display: block; color: #777; margin-top: 2px; }
.order-cancelled { background: #fdecea; color: #a12a1e; padding: 12px 14px; border-radius: var(--radius); margin: 0; }
.tracking-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid #eee; }
.tracking-box span { font-size: 13px; font-weight: 600; }
.tracking-box input { width: auto; flex: 1; min-width: 160px; background: #fafafa; font-weight: 600; letter-spacing: .05em; }
.pay-now { margin-top: 20px; padding: 16px; background: #fff8e8; border-radius: var(--radius); }
.pay-now p { margin-bottom: 10px; }
.order-history { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.order-history li { padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.order-history li:last-child { border: 0; }
.order-history small { display: block; color: #888; }

.order-row { padding: 18px 22px; }
.order-row-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; }
.order-row-head small { display: block; }
.order-row-body { display: flex; align-items: center; gap: 18px; padding-top: 14px; flex-wrap: wrap; }
.order-thumbs { display: flex; gap: 8px; align-items: center; flex: 1; }
.order-thumbs img { width: 54px; height: 54px; object-fit: cover; border-radius: 6px; background: #f6f6f6; }
.order-thumbs .more { font-size: 13px; color: #777; }
.order-row-total { text-align: right; }
.order-row-total small { display: block; }

.address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 20px; }
.address-card.is-default { border-color: var(--primary); }
.address-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.address-card p { font-size: 14px; color: #444; }
.address-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.address-actions form { display: inline; }
.address-actions a, .address-actions .link { text-decoration: underline; font-size: 13px; }
.saved-addresses { margin-bottom: 14px; }
.saved-addresses > p { margin-bottom: 6px; }

/* ---------- Buscar salão ---------- */
.salons-page { padding-bottom: 60px; }
.salons-head { text-align: center; max-width: 640px; margin: 10px auto 28px; }
.salons-head h1 { font-size: 26px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.salons-search { display: flex; gap: 8px; margin-top: 16px; }
.salons-search input { background: #fff; height: 48px; }
.salons-search .btn { min-height: 48px; }
.salons-summary { font-size: 14px; color: #555; margin-bottom: 14px; }
.salons-layout { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 24px; align-items: start; }
.salons-list { list-style: none; margin: 0; padding: 0 4px 0 0; max-height: 620px; overflow-y: auto; display: grid; gap: 12px; }
.salon-card { border: 1px solid #e5e5e5; border-radius: 8px; padding: 18px; cursor: pointer; transition: border-color .2s; }
.salon-card:hover { border-color: #bbb; }
.salon-card.active { border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.salon-card h2 { font-size: 16px; font-weight: 600; margin: 8px 0 6px; }
.salon-card p { font-size: 13px; color: #444; margin-bottom: 6px; }
.salon-card .salon-meta { color: #666; }
.salon-type { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 3px; background: #f1f1f1; }
.salon-type-store { background: var(--primary); color: #fff; }
.salon-actions { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; }
.salon-actions a { text-decoration: underline; }
.salons-map { position: sticky; top: 20px; border-radius: 8px; overflow: hidden; background: #f3f3f3; }
.salons-map iframe { display: block; width: 100%; height: 620px; border: 0; }

/* ---------- Responsivo ---------- */
@media (max-width: 1280px) {
  .main-nav a, .main-nav button { padding: 8px 12px; }
  .main-nav a::after { left: 12px; right: 12px; }
  .main-nav .nav-search button { width: auto; padding: 0 16px 0 8px; }
}
@media (max-width: 1200px) {
  .product-grid.cols-5 { grid-template-columns: repeat(4, 1fr); }
  .co-layout { grid-template-columns: minmax(0, 1fr) 400px; }
}
@media (max-width: 1100px) {
  .header-main { padding: 0 20px; }
  .cart-label, .nav-search-label { display: none; }
  .product-row { grid-auto-columns: calc((100% - 2 * 17px) / 3); }
  .main-nav ul { padding: 0 10px; }
  .main-nav a, .main-nav button { max-width: 120px; padding: 8px; font-size: 11px; }
  .main-nav a::after { left: 8px; right: 8px; }
  .main-nav .nav-highlight a { padding: 8px 10px; }
  .main-nav .nav-search button { padding: 0 12px; }
}
@media (max-width: 991px) {
  .only-desktop { display: none !important; }
  .only-mobile { display: inline-flex !important; }
  .header-main { min-height: 70px; gap: 8px; padding: 0 12px; }
  .header-left, .header-right { align-self: center; margin-top: 0; }
  .icon-btn.cart-btn { padding: 8px; }
  .topbar { grid-template-columns: 44px 1fr 72px; font-size: 12px; }
  .logo img { max-width: 150px; max-height: 50px; }
  .logo-text { font-size: 20px; letter-spacing: .25em; }
  .product-row { grid-auto-columns: calc((100% - 2 * 14px) / 2.6); gap: 14px; }
  .lines-row { grid-auto-columns: calc((100% - 14px) / 1.6); gap: 14px; }
  .product-grid.cols-3, .product-grid.cols-4, .product-grid.cols-5 { grid-template-columns: repeat(2, 1fr); gap: 32px 14px; }
  .carousel-btn { display: none; }
  .carousel-wrap { padding: 0; }
  .reviews-layout { grid-template-columns: 1fr; gap: 24px; }
  .listing-layout { grid-template-columns: 1fr; gap: 10px; }
  .listing-sidebar { display: none; }
  .product-top { grid-template-columns: 1fr; gap: 26px; }
  .gallery { grid-template-columns: 1fr; position: static; }
  .gallery-thumbs { flex-direction: row; order: 2; overflow-x: auto; }
  .gallery-thumbs button { width: 70px; flex-shrink: 0; }
  .cart-layout { grid-template-columns: 1fr; }
  .cart-layout .cart-side { position: static; grid-column: 1; grid-row: auto; }
  .cart-layout .cart-recs { margin-top: 20px; }
  .co-layout { grid-template-columns: 1fr; }
  .co-summary { position: static; }
  .site-footer .footer-main { flex-direction: column; gap: 44px; }
  .footer-side { width: 100%; max-width: 480px; }
  .footer-bottom { flex-direction: column; gap: 16px; }
  .footer-legal { justify-content: flex-start; }
  .site-footer .footer-bar ul { justify-content: space-between; gap: 20px; overflow-x: auto; scrollbar-width: none; font-size: 11px; }
  .auth-page, .thanks-grid { grid-template-columns: 1fr; }
  .account-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .account-nav { position: static; padding: 0; border: 0; }
  .account-hello { display: none; }
  .account-nav nav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 6px; }
  .account-nav a, .account-nav .account-nav-out { white-space: nowrap; border: 1px solid #e5e5e5; border-radius: 20px; padding: 8px 14px; margin: 0; font-size: 12px; }
  .account-nav a.active { border-color: var(--primary); background: var(--primary); color: #fff; }
  .account-cols { grid-template-columns: 1fr; }
  .salons-layout { grid-template-columns: 1fr; }
  .salons-list { max-height: none; overflow: visible; padding: 0; }
  .salons-map { position: static; order: -1; }
  .salons-map iframe { height: 300px; }
}
@media (max-width: 640px) {
  body { font-size: 14px; }
  .container { padding: 0 15px; }
  .section { padding: 34px 15px 6px; }
  .section-head h2 { font-size: 20px; }
  .checkout-header .container { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 15px; }
  .checkout-help { text-align: left; }
  .co-title { margin: 24px 0 16px; font-size: 20px; }
  .co-step-head { padding: 18px 14px; }
  .co-step-body { padding: 0 14px 20px; }
  .co-delivery { padding: 16px 14px 20px; }
  .co-row, .co-row-3, .co-ident-grid { grid-template-columns: 1fr; }
  .co-card { padding: 16px 14px 2px; }
  .co-card-row { grid-template-columns: 1fr 1fr; }
  .co-card-row .co-field:last-child { grid-column: 1 / -1; }
  .co-link-cep { margin: -10px 0 22px; }
  .co-next { width: 100%; }
  .co-items li { grid-template-columns: 72px minmax(0, 1fr); }
  .co-items img { width: 72px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-row .w-small { max-width: none; }
  .cart-page { padding: 26px 15px 50px; }
  .cart-title { font-size: 22px; }
  .ci-card { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .ci-head { gap: 6px; }
  .ci-name { font-size: 13px; }
  .ci-foot { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-top: 16px; }
  .ci-size { grid-column: 1 / -1; }
  .ci-bundle { margin: 0 12px 16px; }
  .ci-bundle-body { grid-template-columns: 80px minmax(0, 1fr); padding: 0 12px 16px; }
  .ci-bundle-add { grid-column: 1 / -1; }
  .ci-bundle-add .btn { width: 100%; }
  .cart-summary, .cart-secure { padding: 20px 14px; }
  .footer-nav { grid-template-columns: 1fr 1fr; gap: 20px; }
  .footer-col h4 { font-size: 16px; }
  .footer-group + .footer-group { margin-top: 36px; }
  .footer-legal { gap: 8px 22px; }
  .footer-legal li + li::before { content: none; }
  .site-footer .footer-bar ul { gap: 12px; font-size: 10px; }
  .steps { gap: 12px; font-size: 12px; }
  .buy-form { grid-template-columns: auto 1fr; }
  .buy-form .pp-wish { display: none; }
  .buy-form .btn-add { grid-column: 1 / -1; }
  .pix-copy { flex-direction: column; }
  .product-row { grid-auto-columns: calc((100% - 14px) / 1.6); }
  .carousel-dots { gap: 6px; margin-top: 20px; }
  .carousel-dots button { width: 20px; }
  .pc-title { font-size: 12.5px; }
  .pc-desc { font-size: 11.5px; height: 40px; line-height: 13.3px; }
  .pc-select select { font-size: 13px; padding-left: 10px; }
  .pc-btn { padding: 8px 6px; }
  .pc-btn-label { font-size: 11px; }
  .pc-btn-price { font-size: 13px; }
  .auth-page { padding: 24px 15px; }
  .auth-box, .account-card { padding: 18px 16px; }
  .order-steps { grid-template-columns: 1fr; margin-top: 16px; }
  .order-steps li { display: grid; grid-template-columns: 20px 1fr; column-gap: 12px; text-align: left; padding: 0 0 16px; }
  .order-steps li::before { left: 9px; top: calc(-100% + 18px); width: 2px; height: 100%; }
  .order-steps .dot { grid-row: 1 / 3; margin: 0; }
  .order-row-total { text-align: left; }
  .salons-search { flex-direction: column; }
}

/* ajustes finos para celular */
@media (max-width: 640px) {
  .topbar { font-size: 11px; }
  .topbar-btn svg { width: 17px; height: 17px; }
}


/* Aviso de cookies (Admin > Configurações > Privacidade) */
.cookie-notice { position: fixed; left: 16px; bottom: calc(16px + var(--bar-h, 0px)); z-index: 95; max-width: 520px; display: flex; align-items: center; gap: 16px; background: #fff; color: #111; padding: 14px 16px; border-radius: var(--radius); box-shadow: 0 8px 30px rgba(0,0,0,.18); font-size: 14px; line-height: 1.45; }
.cookie-notice p { margin: 0; }
.cookie-notice a { text-decoration: underline; }
.cookie-notice .btn { flex-shrink: 0; }
@media (max-width: 640px) {
  .cookie-notice { left: 12px; right: 12px; bottom: calc(12px + var(--bar-h, 0px)); max-width: none; flex-direction: column; align-items: stretch; gap: 10px; }
}

/* ---------- Diálogo (substitui as caixas confirm/alert do navegador): store.js, atributo data-confirm ---------- */
.dlg { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .5); animation: dlg-fade .15s ease; }
.dlg-card { width: min(460px, 100%); background: #fff; padding: 36px 32px 30px; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); animation: dlg-pop .18s ease; }
.dlg-logo { display: block; max-width: 150px; max-height: 46px; width: auto; height: auto; object-fit: contain; margin: 0 auto 20px; }
.dlg-mark { display: inline-block; font-size: 18px; letter-spacing: .25em; text-transform: uppercase; margin-bottom: 18px; }
.dlg-card h2 { font-size: 20px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; }
.dlg-card p { color: #444; font-size: 14px; margin: 0 0 24px; }
.dlg-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.dlg-actions .btn { min-width: 150px; border-radius: 0; }
@keyframes dlg-fade { from { opacity: 0; } }
@keyframes dlg-pop { from { transform: translateY(10px); opacity: 0; } }