:root{font-family:'Manrope',Arial,Helvetica,sans-serif;font-size:16px;color:#16212E;background:#F6F4F1}
*{box-sizing:border-box}
body{margin:0}
button,input,select{font:inherit}
button{cursor:pointer}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:400}

main{max-width:1550px;margin:auto;padding:36px clamp(14px,3vw,40px) 70px}
.crumb{font-size:.78rem;color:#8A93A0;margin:0 0 14px;letter-spacing:.02em}
.crumb a{color:#9D7A5A;text-decoration:none}
.crumb a:hover{text-decoration:underline}
.page-title h1{font-size:clamp(1.7rem,2.6vw,2.3rem);margin:0 0 6px;color:#102E4A}
.page-title p{color:#5C6B7A;margin:0 0 26px;line-height:1.5;font-size:.95rem}
.page-title p a,.link-btn{color:#9D7A5A;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.link-btn{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.how-to{background:#fff;border:1px solid rgba(157,122,90,.22);border-radius:6px;padding:4px 20px;margin:0 0 26px;max-width:820px}
.how-to summary{cursor:pointer;list-style:none;padding:14px 0;font-weight:700;font-size:.86rem;color:#102E4A;display:flex;align-items:center;gap:8px}
.how-to summary::-webkit-details-marker{display:none}
.how-to summary::before{content:"?";flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:#9D7A5A;color:#fff;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.how-to[open] summary{border-bottom:1px solid rgba(157,122,90,.18);margin-bottom:12px}
.how-to ul{margin:0;padding:0 0 16px;list-style:none;display:flex;flex-direction:column;gap:9px}
.how-to li{font-size:.83rem;line-height:1.55;color:#3D4A57;padding-left:16px;position:relative}
.how-to li::before{content:"—";position:absolute;left:0;color:#9D7A5A}
.mode-row{margin:0 0 18px}

/* ── CATEGORY / PART TABS ── */
.categories,.part-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:14px}
.categories button,.part-tabs button{
  border:1px solid rgba(157,122,90,.28);background:#fff;border-radius:2px;
  padding:11px 16px;white-space:nowrap;min-height:44px;color:#3D4A57;
  font-size:.78rem;letter-spacing:.03em;transition:all .2s;
}
.categories button:hover,.part-tabs button:hover{border-color:#9D7A5A;color:#102E4A}
.categories button[aria-pressed=true],.part-tabs button[aria-pressed=true]{background:#102E4A;color:#F6F4F1;border-color:#102E4A}

.workspace{display:grid;grid-template-columns:minmax(325px,.86fr) minmax(400px,1.14fr);align-items:start;gap:20px}
.panel{border:1px solid rgba(157,122,90,.18);background:#fff;border-radius:4px;box-shadow:0 6px 28px rgba(16,46,74,.06)}
.viewer{padding:22px;position:sticky;top:calc(var(--nav-h, 96px) + 16px)}
.viewer-heading,.proposal-header,.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.viewer-heading h2,.proposal h2{font-size:1.25rem;margin:5px 0;color:#102E4A}
.viewer-heading small{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#8A93A0}
.pill{background:rgba(157,122,90,.12);border-radius:99px;padding:7px 12px;color:#9D7A5A;font-size:.73rem;font-weight:600;letter-spacing:.02em}

/* ── PRODUCT STAGE ── */
.stage{display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:10px;margin-top:16px;min-height:355px}
.stage-bottle{
  position:relative;display:flex;align-items:center;justify-content:center;border-radius:4px;overflow:hidden;
  border:1px solid rgba(157,122,90,.3);
  background:radial-gradient(ellipse at 46% 30%,#1B4370 0%,#102E4A 55%,#0A1D30 100%);
}
.stage-bottle:after{content:"";position:absolute;width:62%;height:20px;bottom:22px;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(11px)}
.stage-bottle img{object-fit:contain;width:min(80%,315px);height:300px;z-index:1;filter:drop-shadow(9px 16px 7px rgba(0,0,0,.45))}
.stage-bottle span{position:absolute;bottom:10px;left:12px;color:rgba(246,244,241,.75);font-size:.68rem;z-index:2;letter-spacing:.04em}
.stage-parts{display:grid;grid-template-rows:1fr 1fr;gap:10px}
.part{border:1px solid rgba(157,122,90,.28);background:linear-gradient(135deg,#1B4370,#0A1D30);border-radius:4px;display:flex;align-items:center;justify-content:center;position:relative}
.part img{max-width:90%;max-height:104px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.part small{position:absolute;bottom:7px;left:7px;font-size:.65rem;color:#102E4A;background:rgba(246,244,241,.92);border-radius:2px;padding:3px 6px}

.art-preview{margin-top:14px;border:1px solid rgba(157,122,90,.2);border-radius:4px;min-height:105px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;background:#FAF8F5;text-align:center;padding:16px}
.art-preview img{max-width:80%;max-height:86px;object-fit:contain}
.art-preview strong{font-family:'Fraunces',Georgia,serif;font-size:1.5rem;overflow-wrap:anywhere;color:#102E4A}
.art-preview small{font-size:.66rem;letter-spacing:.15em;color:#9D7A5A;text-transform:uppercase}
.viewer-note{font-size:.78rem;line-height:1.5;color:#7C8894;margin:14px 0 0}

/* ── CONFIGURATOR PANEL ── */
.configurator{padding:2px 22px 22px}
.section{padding:20px 0;border-top:1px solid rgba(157,122,90,.15)}
.section:first-child{border-top:0}
.section h2{font-size:1.05rem;margin:0 0 14px;color:#102E4A;font-family:'Fraunces',Georgia,serif}
.section-head small{font-size:.72rem;color:#8A93A0;letter-spacing:.03em}
.field{display:flex;flex-direction:column;gap:7px;font-size:.8rem;font-weight:600;color:#3D4A57;margin-bottom:12px}
.field select,.field input{width:100%;border:1px solid rgba(92,107,122,.28);border-radius:2px;padding:11px 12px;min-height:44px;background:#fff;color:#16212E;font-weight:400}
.field input:focus,.field select:focus{outline:2px solid #9D7A5A;outline-offset:1px}
.filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.hint{font-size:.78rem;color:#7C8894;margin:8px 0 10px;line-height:1.5}

/* ── CARD GRID (frascos/componentes) ── */
.card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;max-height:360px;overflow-y:auto}
.card{position:relative;border:1px solid rgba(157,122,90,.22);background:linear-gradient(160deg,#1B4370,#0A1D30);border-radius:4px;padding:8px;display:flex;align-items:center;flex-direction:column;gap:4px;min-height:128px;color:#F6F4F1;text-align:center;transition:all .2s}
.supplier-badge{position:absolute;top:6px;right:6px;width:19px;height:19px;border-radius:50%;background:rgba(246,244,241,.94);color:#102E4A;font-size:.65rem;font-weight:700;line-height:19px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.supplier-badge.has-link{cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.4),0 0 0 2px #9D7A5A}
.supplier-badge.has-link:hover{background:#9D7A5A;color:#fff}
.card:hover{border-color:#9D7A5A}
.card[aria-pressed=true]{border:2px solid #9D7A5A;box-shadow:0 0 0 1px #9D7A5A inset}
.card img{width:100%;height:75px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.card strong{font-size:.72rem;line-height:1.25;overflow-wrap:anywhere;color:#F6F4F1}
.card small{font-size:.66rem;color:rgba(246,244,241,.6)}
.card-sentinel{background:transparent;border:1px dashed rgba(157,122,90,.55);justify-content:center;min-height:128px}
.card-sentinel strong{color:#9D7A5A;font-size:.76rem}
.card-sentinel small{color:#3D4A57}
.card-sentinel[aria-pressed=true]{background:rgba(157,122,90,.14);border:2px solid #9D7A5A}

/* ── BUTTONS ── */
.outline,.primary{
  padding:12px 18px;border-radius:2px;min-height:46px;font-weight:600;font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;transition:all .22s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.outline{border:1px solid #102E4A;background:#fff;color:#102E4A}
.outline:hover{background:#102E4A;color:#F6F4F1}
.primary{border:1px solid #9D7A5A;background:#9D7A5A;color:#fff}
.primary:hover{background:#B69572;border-color:#B69572}
.card-grid+.outline{margin-top:12px}

.checkline{display:flex;align-items:center;gap:9px;font-size:.85rem;margin:10px 0;color:#3D4A57}
.checkline input{width:18px;height:18px;accent-color:#9D7A5A}
.checkline.disabled{color:#AEB6BF}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.file-field{border:1px dashed rgba(157,122,90,.4);background:#FAF8F5;border-radius:4px;padding:14px}
.file-field input{border:0;padding:6px 0;min-height:auto;background:none}
.file-field small{font-size:.73rem;font-weight:400;color:#7C8894}
.options{display:flex;gap:0 18px;flex-wrap:wrap}

/* ── PROPOSAL / FICHA ── */
.proposal{padding:24px;margin-top:20px}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0 22px}
.facts div{border-top:1px solid rgba(157,122,90,.18);padding-top:9px}
.facts small{color:#8A93A0;font-size:.7rem;letter-spacing:.03em;text-transform:uppercase}
.facts strong{display:block;font-size:.9rem;line-height:1.35;margin-top:4px;color:#16212E;font-weight:600}

/* Valores finais ocultos por enquanto (preços ainda em validação) — lógica de cálculo mantida no app.js, só não é exibida */
.price-layout,.price-warning{display:none}
.price-layout{grid-template-columns:minmax(240px,.8fr) minmax(300px,1.2fr);gap:16px}
.price-highlight{background:linear-gradient(160deg,#102E4A 0%,#1B4370 100%);border-radius:4px;padding:20px;color:#F6F4F1}
.price-highlight strong{display:block;font-size:1.5rem;margin:8px 0;font-family:'Fraunces',Georgia,serif;color:#fff}
.price-highlight span{font-size:.8rem;color:rgba(246,244,241,.65)}
.tiers{border:1px solid rgba(157,122,90,.2);border-radius:4px;padding:14px}
.tiers h3{font-size:.86rem;margin:0 0 10px;color:#102E4A;font-weight:600}
.tier-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.tier-list div{font-size:.78rem;border:1px solid rgba(92,107,122,.2);padding:8px;border-radius:2px;color:#3D4A57}
.tier-list .active{border-color:#9D7A5A;background:rgba(157,122,90,.08)}
.tier-list b{display:block;color:#16212E}
.price-warning{font-size:.82rem;color:#8A6B3E;line-height:1.5;background:rgba(157,122,90,.08);border-radius:4px;padding:10px 14px}

.actions{display:flex;gap:10px;flex-wrap:wrap}
.footnote{font-size:.78rem;color:#8A93A0;line-height:1.5;margin-bottom:0}

/* ── DIALOG (orçamentos prontos) ── */
dialog{border:1px solid rgba(157,122,90,.3);border-radius:6px;box-shadow:0 18px 80px rgba(16,32,45,.4);max-width:560px;width:calc(100% - 30px);max-height:calc(100vh - 60px);padding:26px;color:#16212E}
dialog::backdrop{background:rgba(16,32,45,.55)}
dialog h2{margin:0 0 8px;font-family:'Fraunces',Georgia,serif;color:#102E4A}
dialog p{font-size:.88rem;line-height:1.5;color:#5C6B7A}
dialog .close{float:right;border:0;background:rgba(157,122,90,.12);border-radius:50%;width:36px;height:36px;font-size:1.3rem;color:#102E4A}
.presets-list{max-height:56vh;overflow-y:auto;margin-top:14px;display:flex;flex-direction:column;gap:4px}
.preset-group-title{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#9D7A5A;font-weight:700;margin:14px 0 4px;padding-top:8px;border-top:1px solid rgba(157,122,90,.15)}
.preset-group-title:first-child{margin-top:0;padding-top:0;border-top:0}
.preset-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;border:1px solid transparent;border-radius:3px;padding:9px 10px;background:transparent}
.preset-item:hover{background:rgba(157,122,90,.09);border-color:rgba(157,122,90,.3)}
.preset-item strong{font-size:.86rem;color:#16212E;font-weight:600}
.preset-item small{font-size:.72rem;color:#8A93A0}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

@media(max-width:960px){
  .workspace{grid-template-columns:1fr}
  .viewer{position:static}
  .stage{min-height:290px}
}
@media(max-width:600px){
  .viewer,.proposal{padding:16px}
  .configurator{padding:2px 14px 14px}
  .stage{grid-template-columns:1fr 90px;min-height:265px}
  .stage-bottle img{height:230px}
  .part img{max-height:74px}
  .filters{grid-template-columns:repeat(2,1fr)}
  .card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .facts{grid-template-columns:repeat(2,1fr)}
  .price-layout{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
  .tier-list{grid-template-columns:repeat(2,1fr)}
}