/* ===========================================================
   PORCEVILLE — Sistema visual
   Manual da marca: Azul Marinho #1D3557 · Dourado #C9A86A ·
   Branco Porcelana · Cinzas. Sofisticado, limpo, premium.
   =========================================================== */
:root{
  /* superfícies */
  --porc-bg:   #F0F0F0;   /* cinza claro do manual */
  --porc-2:    #E4E4E4;
  --surface:   #FFFFFF;
  --ink:       #333333;   /* grafite */
  --ink-soft:  #6B7280;
  --ink-mute:  #9AA0AA;
  --line:      rgba(13,43,90,0.10);
  --line-2:    rgba(13,43,90,0.06);

  /* marca — manual oficial */
  --navy:      #0D2B5A;
  --navy-deep: #081D40;
  --navy-soft: #E6ECF7;
  --gold:      #FFD200;
  --gold-700:  #9C7F00;
  --gold-soft: #FFF6C9;
  --green:     #2E7D5B;
  --danger:    #B4452F;

  /* sombras */
  --sh-card:  0 1px 2px rgba(13,43,90,.05), 0 8px 24px rgba(13,43,90,.06);
  --sh-pop:   0 12px 40px rgba(13,43,90,.18);
  --sh-tab:   0 -2px 24px rgba(13,43,90,.08);

  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 11px;

  --font-display: 'Anton', sans-serif;
  --font-body: 'Poppins', system-ui, sans-serif;
}

*{ box-sizing: border-box; }

.porc-app{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--porc-bg);
  height: 100%;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow: hidden;
}
.porc-app *::-webkit-scrollbar{ width: 0; height: 0; }

.scroll{ height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }

/* tipografia */
.display{ font-family: var(--font-display); font-weight: 400; letter-spacing: .02em; line-height: 1.1; }
.h1{ font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--navy); line-height: 1.18; text-transform: uppercase; letter-spacing: .03em; }
.h2{ font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--navy); letter-spacing: .02em; line-height: 1.18; }
.eyebrow{ font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-700); font-family: var(--font-body); }
.muted{ color: var(--ink-soft); }

/* wordmark — logo triangular */
.wordmark{ font-family: var(--font-display); letter-spacing: .05em; color: var(--navy); text-transform: uppercase; display: inline-flex; align-items: center; gap: 7px; }
.wordmark .tri{ flex: none; }
.wordmark .ville{ color: inherit; }

/* botões */
.btn{
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  border: none; cursor: pointer; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; transition: transform .12s ease, filter .15s ease, background .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active{ transform: scale(.96); }
.btn-navy{ background: var(--navy); color: #fff; box-shadow: 0 6px 16px rgba(13,43,90,.30); }
.btn-navy:active{ filter: brightness(1.08); }
.btn-gold{ background: var(--gold); color: var(--navy-deep); box-shadow: 0 6px 16px rgba(255,210,0,.35); }
.btn-ghost{ background: rgba(13,43,90,.06); color: var(--navy); }
.btn-whats{ background: #1FAF38; color: #fff; box-shadow: 0 6px 16px rgba(31,175,56,.3); }
.btn-block{ width: 100%; }
.btn-sm{ padding: 9px 14px; font-size: 13px; }
.btn:disabled{ opacity: .45; cursor: default; }

/* chips */
.chip{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(13,43,90,.06); color: var(--navy); white-space: nowrap;
  border: none; cursor: pointer;
}
.chip.active{ background: var(--navy); color: #fff; }
.chip-gold{ background: var(--gold); color: var(--navy-deep); font-weight: 800; }
.chip-soft{ background: var(--gold-soft); color: var(--gold-700); font-weight: 800; }

/* selo "sob orçamento" */
.quote-tag{ font-family: var(--font-body); font-weight: 700; font-size: 12.5px; color: var(--navy); letter-spacing: .02em; border-bottom: 2px solid var(--gold); padding-bottom: 1px; display: inline-block; }

/* cartões */
.card{ background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-card); }

/* placeholders de foto — porcelana/vidro, tons frios elegantes */
.photo{ position: relative; overflow: hidden; background: #eee; }
.photo .grain{
  position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255,255,255,.6) 1px, transparent 1.4px);
  background-size: 8px 8px;
}
.photo .sheen{
  position: absolute; inset: 0;
  background: linear-gradient(165deg, rgba(255,255,255,.5), transparent 42%, rgba(29,53,87,.14));
}
.k-porcelain{ background: linear-gradient(150deg, #FDFDFC 0%, #E9E7E2 55%, #C9C6BF 100%); }
.k-glass    { background: linear-gradient(150deg, #EAF2F7 0%, #C3D6E4 55%, #8FAEC4 100%); }
.k-chopp    { background: linear-gradient(150deg, #F6E8CE 0%, #E3C690 55%, #B9924F 100%); }
.k-navy     { background: linear-gradient(150deg, #1A3F7C 0%, #0D2B5A 60%, #081D40 100%); }
.k-sublime  { background: linear-gradient(150deg, #F2E9F7 0%, #C9D7F0 50%, #E9C9D8 100%); }
.k-kit      { background: linear-gradient(150deg, #E7E3DA 0%, #CDC4B2 55%, #A1916F 100%); }

.photo-label{
  position: absolute; left: 12px; bottom: 11px; right: 12px; z-index: 2;
  color: var(--navy); font-family: var(--font-display);
  line-height: 1.12; font-size: 15px;
}
.k-navy .photo-label{ color: #fff; }

/* divisória */
.hr{ height: 1px; background: var(--line); border: 0; margin: 0; }

/* animações */
@keyframes popIn{ from{ opacity:0; transform: translateY(10px) scale(.98);} to{ opacity:1; transform:none;} }
@keyframes slideUp{ from{ transform: translateY(100%);} to{ transform: translateY(0);} }
@keyframes fadeIn{ from{ opacity:0;} to{ opacity:1;} }
@keyframes growBar{ from{ width: 0;} }
.pop-in{ animation: popIn .32s cubic-bezier(.2,.7,.3,1) both; }
.fade-in{ animation: fadeIn .25s ease both; }

/* animação de entrada da landing (celular) */
@keyframes lzUp{ from{ opacity: 0; transform: translateY(22px); } to{ opacity: 1; transform: none; } }
@keyframes lzBlob{ from{ opacity: 0; transform: scale(.82); } to{ opacity: 1; transform: none; } }
.porc-landing .lz{ animation: lzUp .6s cubic-bezier(.2,.75,.3,1) both; animation-delay: var(--d, 0ms); }
.porc-landing .lz-blob{ animation: lzBlob .7s cubic-bezier(.2,.75,.3,1) both; animation-delay: 120ms; }
@media (prefers-reduced-motion: reduce){ .porc-landing .lz, .porc-landing .lz-blob{ animation: none; } }

/* overlay / sheet */
.overlay{ position: absolute; inset: 0; z-index: 90; background: rgba(8,29,64,.55); animation: fadeIn .2s ease; }
.sheet{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 95;
  background: var(--surface); border-radius: 26px 26px 0 0;
  box-shadow: var(--sh-pop); animation: slideUp .3s cubic-bezier(.2,.7,.3,1);
  max-height: 90%; display: flex; flex-direction: column;
}
.sheet-grip{ width: 38px; height: 5px; border-radius: 99px; background: rgba(13,43,90,.18); margin: 9px auto 4px; flex: none; }

/* badge no ícone */
.dot-badge{
  position: absolute; top: -3px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--gold); color: var(--navy-deep); border-radius: 99px; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--porc-bg);
}

/* seletor de cores da logo */
.color-opt{
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: none; background: none; cursor: pointer; flex: 1; min-width: 0;
}
.color-opt .dotwrap{
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--line); transition: border-color .15s, transform .15s;
  background: var(--surface);
}
.color-opt.sel .dotwrap{ border-color: var(--gold); transform: scale(1.06); box-shadow: 0 0 0 3px var(--gold-soft); }
.color-opt .lbl{ font-size: 12px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.color-opt.sel .lbl{ color: var(--navy); }

/* aviso */
.notice{
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--gold-soft); border-radius: var(--r-md); padding: 11px 13px;
  font-size: 12.5px; line-height: 1.45; color: var(--gold-700); font-weight: 600;
}

/* espaços de imagem */
image-slot::part(empty){ color: var(--ink-soft); }
image-slot::part(ring){ border-color: rgba(13,43,90,.3); border-width: 2px; }
image-slot::part(frame){ background: transparent; }
.k-navy image-slot::part(empty){ color: rgba(255,255,255,.85); }
.k-navy image-slot::part(ring){ border-color: rgba(255,255,255,.45); }

/* ===================== VERSÃO DESKTOP (catálogo web) ===================== */
.pdesk{ min-height: 100vh; background: var(--porc-bg); display: flex; flex-direction: column; color: var(--ink); }
.pdesk-head{ position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); }
.pdesk-head-inner{ max-width: 1220px; margin: 0 auto; min-height: 92px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 28px; gap: 12px; }
.pdesk-logo{ grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; justify-self: center; }
.pdesk-actions{ grid-column: 3; justify-self: end; display: flex; gap: 12px; align-items: center; }
.pdesk-nav{ border-top: 1px solid var(--line-2); display: flex; gap: 8px; justify-content: center; padding: 12px 16px; flex-wrap: wrap; }
.pdesk-main{ max-width: 1220px; margin: 0 auto; width: 100%; padding: 40px 28px 70px; }
.pdesk-hero{ text-align: center; margin-bottom: 40px; }
.pdesk-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 24px; }
.pdesk-card{ background: var(--surface); border-radius: 18px; overflow: hidden; box-shadow: var(--sh-card); cursor: pointer; border: 1px solid var(--line-2); transition: transform .16s ease, box-shadow .16s ease; text-align: left; padding: 0; font-family: var(--font-body); }
.pdesk-card:hover{ transform: translateY(-5px); box-shadow: var(--sh-pop); }
.pdesk-modal-host{ position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.pdesk-modal-host .overlay{ position: fixed; }
.pdesk-modal-host .sheet{ position: relative; margin: auto; max-width: 480px; width: 92%; max-height: 88vh; border-radius: 22px; animation: popIn .3s cubic-bezier(.2,.7,.3,1) both; }
.pdesk-drawer{ position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 92vw; background: var(--surface); z-index: 130; box-shadow: var(--sh-pop); display: flex; flex-direction: column; animation: slideRight .3s cubic-bezier(.2,.7,.3,1); }
@keyframes slideRight{ from{ transform: translateX(100%);} to{ transform: none;} }
.pdesk-banner{ position: relative; border: none; cursor: pointer; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 26px 30px; min-height: 200px; text-align: left; color: #fff; font-family: var(--font-body); }
.pdesk-banner.span4{ grid-column: 1 / -1; min-height: 180px; }
.pdesk-banner.span2{ grid-column: span 2; }
.pdesk-banner .bnr-bg{ position: absolute; inset: 0; z-index: 0; }
.pdesk-banner .bnr-content{ position: relative; z-index: 2; max-width: 560px; }
@media (max-width: 700px){ .pdesk-banner.span2{ grid-column: 1 / -1; } }

/* ----- refinamento e-commerce premium (web) ----- */
.pdesk-head2{ position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.pdesk-head2-inner{ max-width: 1240px; margin: 0 auto; height: 78px; display: flex; align-items: center; gap: 30px; padding: 0 32px; }
.pdesk-topnav{ flex: 1; display: flex; gap: 26px; justify-content: center; }
.pdesk-navlink{ background: none; border: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-soft); padding: 6px 0; position: relative; font-family: var(--font-body); white-space: nowrap; }
.pdesk-navlink:hover{ color: var(--navy); }
.pdesk-navlink.active{ color: var(--navy); }
.pdesk-navlink.active::after{ content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--gold); border-radius: 2px; }
.pdesk-icbtn{ width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--porc-2); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }

.pdesk-hero{ background: #EDEAE3; }
.pdesk-hero-inner{ max-width: 1240px; margin: 0 auto; padding: 64px 32px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.pdesk-hero-art{ position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.pdesk-hero-art .blob{ position: absolute; width: 86%; height: 86%; border-radius: 50%; background: radial-gradient(120% 120% at 30% 25%, #2C4A75, #0D2B5A 70%); }
.pdesk-hero-art .arch{ position: relative; z-index: 2; width: 74%; height: 90%; border-radius: 240px 240px 28px 28px; overflow: hidden; box-shadow: 0 30px 60px rgba(13,43,90,.28); }
.pdesk-hero-badge{ position: absolute; z-index: 3; bottom: 6%; left: 0; background: var(--surface); border-radius: 16px; padding: 13px 16px; box-shadow: var(--sh-pop); display: flex; align-items: center; gap: 10px; }
@media (max-width: 880px){ .pdesk-hero-inner{ grid-template-columns: 1fr; text-align: center; } .pdesk-hero-art{ max-width: 360px; margin: 0 auto; } .pdesk-topnav{ display: none; } }

.pdesk-pcard{ background: var(--surface); border-radius: 16px; overflow: hidden; cursor: pointer; border: 1px solid var(--line-2); transition: transform .18s ease, box-shadow .18s ease; text-align: left; padding: 0; font-family: var(--font-body); }
.pdesk-pcard:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(13,43,90,.14); }
.pdesk-pcard .thumb{ position: relative; background: #F3F1EC; }
.pdesk-addbtn{ width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff; border: none; display: flex; align-items: center; justify-content: center; flex: none; transition: background .15s; }
.pdesk-pcard:hover .pdesk-addbtn{ background: var(--gold); color: var(--navy-deep); }

/* produto destaque (largura total) */
.pdesk-feat{ grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.1fr; background: var(--surface); border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden; box-shadow: var(--sh-card); min-height: 320px; }
.pdesk-feat .feat-media{ position: relative; background: #EDEAE3; }
.pdesk-feat .feat-body{ padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 760px){ .pdesk-feat{ grid-template-columns: 1fr; } .pdesk-feat .feat-media{ min-height: 240px; } .pdesk-feat .feat-body{ padding: 28px; } }

/* ===== detalhe do produto (pd-sheet) — mobile alto sem scroll aninhado + desktop 2 colunas ===== */
/* mobile: sheet quase fullscreen que abraça o conteúdo; foto compacta deixa as etapas na dobra */
.sheet.pd-sheet{ height: auto; max-height: 96%; }
.pd-photo{ width: 100%; height: 238px; }

/* desktop: modal largo em 2 colunas (foto/galeria à esquerda, seleções à direita) — sem barra interna na maioria dos produtos.
   Escopado em .pd-sheet para não afetar AdminPanel/OrderCaptureModal, que também vivem no .pdesk-modal-host. */
.pdesk-modal-host .sheet.pd-sheet{ height: auto; max-height: 92vh; width: min(1020px, 94vw); max-width: none; }
.pdesk-modal-host .sheet.pd-sheet .sheet-grip{ display: none; }
.pdesk-modal-host .sheet.pd-sheet .pd-cols{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
.pdesk-modal-host .sheet.pd-sheet .pd-media{ position: sticky; top: 0; padding-bottom: 18px; }
.pdesk-modal-host .sheet.pd-sheet .pd-photo{ height: auto; aspect-ratio: 4 / 3; }
.pdesk-modal-host .sheet.pd-sheet .pd-body{ padding-right: 36px; }