:root{font-family:'Segoe UI',Tahoma,Arial,sans-serif;color:#203329;background:#f4f6f3;font-size:18px;--green:#286238;--dark:#163e29;--border:#c6d2c9;--muted:#526257;--amber:#805300;--paper:#fff}

*{box-sizing:border-box}
body{margin:0}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,.button{min-height:50px;border:1px solid var(--border);border-radius:9px;padding:12px 18px;background:white;color:var(--dark);font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;line-height:1.3}
button:hover,.button:hover{background:#eaf1e7}
button:disabled{opacity:.58;cursor:not-allowed}
.primary{background:var(--green);color:white;border-color:var(--green)}
.primary:hover{background:var(--dark)}
.secondary{background:#edf3ea}
.quiet{background:transparent;border-color:transparent;text-decoration:underline;padding-left:8px;padding-right:8px}
.danger{color:#992d2d}
.full{width:100%}
.small{font-size:.87rem}
a{color:var(--green)}
:focus-visible{outline:3px solid #df9200;outline-offset:3px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(1.65rem,4vw,2.4rem);line-height:1.15;letter-spacing:-.035em}
h2{font-size:1.45rem;letter-spacing:-.02em}
h3{font-size:1.15rem;line-height:1.3}
p{line-height:1.55;max-width:72ch}
small,.muted{color:var(--muted)}
small{font-size:.8rem}
label{display:grid;gap:8px;font-weight:700}
input,select,textarea{width:100%;border:2px solid var(--border);padding:12px;border-radius:8px;background:white;color:inherit;min-height:50px}
textarea{resize:vertical;min-height:100px}
input[type=checkbox],input[type=radio]{width:23px;min-height:23px;accent-color:var(--green);flex-shrink:0}
.check{display:flex;align-items:center;gap:10px;font-weight:400}
.check input{margin:0}
fieldset{padding:0;border:0;margin:0}
legend{margin-bottom:10px;font-weight:700}
.skip{position:absolute;left:12px;top:-100px;z-index:100;background:white;padding:16px}
.skip:focus{top:12px}
.topbar{background:var(--dark);color:white;padding:16px max(20px,calc((100vw - 1200px)/2));display:flex;justify-content:space-between;align-items:center;gap:20px}
.brand{display:flex;gap:12px;align-items:center}
.brand img{width:56px;height:56px;border-radius:50%}
.brand strong{font-size:1.15rem}
.brand small{display:block;color:#d5e2d0;margin-top:4px}
.topbar nav{display:flex;gap:8px;flex-wrap:wrap}
.topbar button{background:transparent;color:white;border-color:#698165}
.topbar button:hover{background:#2a5130}
.topbar .primary{background:white;color:var(--dark)}
main{max-width:1200px;margin:0 auto;padding:30px 20px 130px}
.login{max-width:480px;margin:5vh auto 0;background:white;border:1px solid var(--border);padding:32px;border-radius:16px}
.login h1{margin-top:24px}
.login img{width:90px;height:90px;border-radius:50%}
.stack{display:grid;gap:18px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.between{justify-content:space-between}
.notice{background:#eaf2e6;border-left:4px solid var(--green);padding:16px;margin:18px 0;line-height:1.5}
.warning{background:#fff3d9;border-color:#b57500;color:#674200}
.error{color:#8e2424;background:#ffeded;border-left:4px solid #a73737;padding:14px;margin:12px 0}
.error:empty{display:none}
.help{margin:24px 0;padding:20px 0;border-top:1px solid var(--border)}
.help p{margin-bottom:12px}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px;margin:24px 0}
.choice{min-height:106px;align-items:flex-start;flex-direction:column;text-align:left;padding:22px;font-size:1.2rem;border:2px solid var(--border)}
.choice span{font-size:.86rem;font-weight:400;color:var(--muted)}
.selection{background:#e6eee2;border-radius:10px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.selection p{margin:4px 0 0}
.search{display:flex;gap:8px;margin:18px 0}
.search label{flex:1}
.search input{height:56px}
.search button{align-self:end;height:56px}
.filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.filters label{font-size:.85rem;flex:1;min-width:180px}
.result-count{font-size:1rem;font-weight:400;color:var(--muted)}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:18px;align-items:start}
.product{background:white;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.product-content{padding:20px}
.product-image{display:block;width:100%;height:190px;object-fit:contain;background:white;border-bottom:1px solid var(--border);cursor:zoom-in}
.no-photo{padding:14px 20px;background:#edf1eb;color:var(--muted);font-size:.85rem;border-bottom:1px solid var(--border)}
.product h3{margin-bottom:8px}
.compat{font-size:.86rem;line-height:1.45;color:var(--muted);margin-bottom:16px}
.variants{display:grid;gap:10px}
.variant{display:grid;grid-template-columns:24px 1fr;gap:10px;border:2px solid var(--border);border-radius:8px;padding:14px;cursor:pointer;font-weight:400}
.variant:has(input:checked){border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.variant input{margin:0;align-self:start}
.variant strong{display:block;margin:8px 0 4px;font-size:1.2rem}
.variant small{display:block;line-height:1.4}
.badge{display:inline-block;padding:5px 9px;border-radius:4px;font-size:.84rem;font-weight:800;letter-spacing:.035em;background:#edf1eb;color:#43523e}
.original{background:#e4f2df;color:#245c2a;border:1px solid #a4c298}
.paralela{background:#fff0ce;color:#744c00;border:1px solid #d7ae61}
.unclassified{background:#eef0f3;color:#424e5d;border:1px solid #bbc3cc}
.add-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.add-row .primary{flex:1;min-width:150px;font-size:.95rem}
.quantity{display:flex;align-items:center;gap:0}
.quantity button{width:46px;padding:8px;min-height:48px}
.quantity output{min-width:40px;text-align:center;font-weight:700}
.quantity input{width:68px;text-align:center;padding:8px;border-width:1px}
.empty{text-align:center;padding:35px 20px;background:white;border:1px dashed var(--border);border-radius:12px}
.cartbar{position:fixed;bottom:0;left:0;right:0;z-index:10;background:white;border-top:1px solid var(--border);padding:12px max(16px,calc((100vw - 1160px)/2));box-shadow:0 -4px 20px #16391f12}
.cartbar button{width:100%;justify-content:space-between;padding:16px 20px}
.cartbar small{color:inherit}
.checkout{max-width:800px}
.cart-item{padding:20px 0;border-bottom:1px solid var(--border)}
.cart-item h3{margin:8px 0}
.cart-item p{margin-bottom:8px}
.total{padding:22px 0;font-size:1.2rem}
.total strong{font-size:1.6rem}
.success{background:white;padding:28px;border:1px solid var(--border);border-top:6px solid var(--green);border-radius:10px;margin-bottom:24px}
.success h1{margin:14px 0}
.success .primary{margin:10px 0}
.order{background:white;border:1px solid var(--border);border-radius:10px;padding:20px;margin:16px 0}
.order header{margin-bottom:16px}
.order details{margin-top:18px}
.order summary{cursor:pointer;padding:10px 0;font-weight:700}
.order li{margin:12px 0;line-height:1.5}
.tabs{display:flex;gap:8px;overflow:auto;padding-bottom:12px;margin-bottom:20px}
.tabs button{white-space:nowrap}
.tabs .active{background:var(--green);color:white}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.stat{padding:22px;background:white;border:1px solid var(--border);border-radius:10px}
.stat strong{display:block;font-size:2rem;margin-bottom:8px}
.admin-row{background:white;border:1px solid var(--border);padding:18px;border-radius:9px;margin:10px 0;display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.admin-row p{margin:6px 0}
.admin-row .row{margin-left:auto}
.admin-form{background:white;border:1px solid var(--border);padding:24px;border-radius:12px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.span2{grid-column:1/-1}
.code{display:block;overflow-wrap:anywhere;font-size:1.7rem;letter-spacing:.03em;padding:18px;background:#edf3ea;margin:18px 0}
.compat-row{border:1px solid var(--border);padding:14px;border-radius:8px;display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;margin:10px 0}
.compat-row label{font-size:.85rem}
dialog{border:0;border-radius:14px;padding:26px;width:min(720px,calc(100% - 24px));max-height:90vh;overflow:auto;color:inherit}
dialog::backdrop{background:#102415aa}
dialog img{max-width:100%;max-height:65vh;object-fit:contain}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.dialog-head h2{margin:0}
#toast:not(:empty){position:fixed;top:14px;left:50%;transform:translateX(-50%);background:var(--dark);color:white;box-shadow:0 4px 20px #0003;padding:16px 24px;border-radius:10px;max-width:calc(100% - 24px);z-index:50}
.loading{text-align:center;padding-top:15vh}
.loading img{border-radius:50%}
footer{max-width:1200px;margin:auto;padding:20px;color:var(--muted);font-size:.85rem}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.photo-preview{width:150px;height:120px;object-fit:contain}
.photo-help{font-size:.85rem}
.nowrap{white-space:nowrap}

.global-error{max-width:1160px;margin:20px auto}
.product,.order,.selection{overflow-wrap:anywhere}

@media(max-width:600px){:root{font-size:17px}
.topbar{padding:14px 16px;align-items:flex-start;flex-wrap:wrap;gap:12px}
.topbar nav{width:100%}
.topbar nav button{flex:1;padding:10px;font-size:.9rem}
.brand img{width:46px;height:46px}
main{padding:24px 16px 140px}
.login{padding:24px;margin-top:12px}
.choices{grid-template-columns:1fr 1fr;gap:10px}
.choice{font-size:1.06rem;padding:18px 14px}
.search{flex-wrap:wrap}
.search label{min-width:180px}
.search button{padding:10px 14px}
.form-grid{grid-template-columns:1fr}
.span2{grid-column:auto}
.compat-row{grid-template-columns:1fr}
.filters label{min-width:140px}
.product-content{padding:18px}
.admin-form{padding:18px}
.cartbar button{font-size:1rem}
.success{padding:22px}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
}

@media(max-width:600px){.filters label{min-width:100%}
}

@media print{.topbar nav,.tabs,.cartbar,.help,button,footer{display:none!important}
main{padding:0}
.order{break-inside:avoid}
body{background:white}
}

/* R.O Agro: catálogo de balcão, com uma escolha clara em cada etapa. */
:root {
  --surface: #ffffff;
  --soft-green: #e8f0e8;
  --focus: #c37900;
  --shadow: 0 12px 36px rgb(22 62 41 / 7%);
}
body { line-height: 1.5; }
h1,h2,h3 { text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 3.7vw, 2.8rem); font-weight: 750; margin-bottom: 14px; }
button,.button { border-radius: 10px; transition: background-color 140ms, border-color 140ms, box-shadow 140ms, transform 100ms; }
button:not(:disabled):active,.button:active { transform: translateY(2px); }
.primary { box-shadow: 0 3px 0 #123b20; }
.primary:disabled { box-shadow: none; background: #e4e9e4; color: #586159; border-color: #c8d0c9; opacity: 1; }
input,select,textarea { border-width: 1px; border-color: #8b9e90; border-radius: 10px; }
input::placeholder,textarea::placeholder { color: #69756d; opacity: 1; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.topbar { padding-top: 20px; padding-bottom: 20px; border-bottom: 4px solid #a7c586; }
.brand { gap: 14px; min-width: 0; }
.brand strong { font-size: 1.35rem; letter-spacing: .025em; }
.brand img { width: 60px; height: 60px; box-shadow: 0 0 0 4px #ffffff18; }
.brand small { color: #e0eadd; overflow-wrap: anywhere; }
.private-access { font-size: .85rem; color: #e0eadd; }
.topbar nav { gap: 10px; }
.topbar nav button { border-color: #759480; }
.topbar nav button[aria-current=page]:not(.primary) { background: #355c45; border-color: #e0eadd; box-shadow: none; }
.topbar .primary { box-shadow: none; border-color: white; }
.topbar .logout { border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }
main { padding-top: 40px; }
.login-layout { display: grid; grid-template-columns: 1fr 470px; gap: 64px; align-items: center; padding-top: 60px; padding-bottom: 32px; }
.login-intro { padding: 24px 0; }
.login-intro h2 { font-size: clamp(2.2rem,3.7vw,3rem); line-height: 1.14; letter-spacing: -.035em; color: var(--dark); margin-bottom: 24px; }
.login-intro > p { max-width: 42ch; color: var(--muted); }
.intro-steps { list-style: none; counter-reset: intro; padding: 0; margin: 36px 0; }
.intro-steps li { counter-increment: intro; display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; margin: 24px 0; }
.intro-steps li::before { content: counter(intro); grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; background: var(--soft-green); color: var(--green); border-radius: 50%; font-weight: 700; }
.intro-steps span { color: var(--muted); font-size: .9rem; }
.login-intro .intro-payment { color: var(--dark); font-weight: 650; padding-top: 22px; border-top: 1px solid var(--border); }
.login { width: 100%; max-width: none; margin: 0; padding: 36px; border-radius: 20px; border-top: 5px solid var(--green); box-shadow: var(--shadow); }
.login > img { display: none; }
.login h1 { margin-top: 0; font-size: 1.85rem; }
.login input[name=code] { min-height: 60px; font-size: 1.15rem; letter-spacing: .06em; }
.login .stack { gap: 16px; }
.login .primary { min-height: 56px; }
.login .check { font-size: .92rem; }
.login > a { display: inline-block; padding: 8px 0; text-underline-offset: 4px; }
.login-layout footer { grid-column: 1/-1; padding: 0; text-align: center; }
.choices { gap: 20px; margin: 30px 0; }
.choice { border-width: 1px; border-top: 4px solid var(--green); border-radius: 12px; padding: 28px; min-height: 136px; gap: 12px; font-size: 1.35rem; box-shadow: 0 4px 0 #e0e7df; }
.choice:hover { border-color: var(--green); background: #f0f6ec; }
.choice span { font-size: .9rem; }
.help { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; align-items: center; padding: 28px 0; margin-top: 40px; }
.help strong { font-size: 1.2rem; }
.help p { grid-column: 1; margin: 0; color: var(--muted); font-size: .95rem; }
.help .button { grid-column: 2; grid-row: 1 / span 2; border-color: var(--green); }
.selection { border-radius: 12px; background: #e7efe5; border-left: 5px solid var(--green); padding: 20px 24px; }
.selection small { font-size: .85rem; }
.selection strong { font-size: 1.12rem; }
.search { gap: 12px; margin: 24px 0 18px; }
.search input { margin-top: 4px; background: white; }
.search button { min-width: 130px; }
.filters { padding-bottom: 26px; border-bottom: 1px solid var(--border); gap: 16px; }
.filters .quiet { align-self: end; }
.result-count { display: inline-block; background: #e4ece2; color: var(--dark); border-radius: 6px; padding: 2px 8px; vertical-align: middle; }
.products { gap: 24px; }
.product { border-radius: 16px; box-shadow: 0 3px 0 #e7ece5; }
.product-content { padding: 24px; }
.product h3 { font-size: 1.3rem; letter-spacing: -.018em; }
.product-image { height: 220px; padding: 16px; }
.no-photo { background: #edf1eb; padding: 16px 24px; font-size: .82rem; }
.compat { color: #4b6051; padding-bottom: 16px; border-bottom: 1px solid #e0e7df; }
.variants { gap: 12px; }
.variants legend { font-size: .9rem; }
.variant { padding: 16px; border-width: 1px; border-color: #99ab9d; border-radius: 10px; gap: 12px; position: relative; }
.variant input { margin-top: 4px; }
.variant:has(input:checked) { border-color: var(--green); background: #f0f7ed; box-shadow: 0 0 0 1px var(--green); }
.variant-paralela:has(input:checked) { background: #fff8e9; border-color: #9b6a12; box-shadow: 0 0 0 1px #9b6a12; }
.variant-paralela input { accent-color: #805300; }
.variant-unclassified:has(input:checked) { background: #f2f4f6; border-color: #657384; box-shadow: 0 0 0 1px #657384; }
.variant .badge { margin-bottom: 6px; }
.variant strong { font-size: 1.35rem; letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: var(--dark); }
.variant-selected { display: block; color: var(--dark); margin-top: 8px; font-size: .8rem; font-weight: 700; visibility: hidden; }
.variant:has(input:checked) .variant-selected { visibility: visible; }
.badge { border-radius: 5px; font-size: .8rem; padding: 5px 9px; }
.add-row { gap: 12px; margin-top: 20px; }
.add-row .primary { flex-basis: 100%; min-height: 54px; }
.quantity { border: 1px solid #9caea0; border-radius: 9px; overflow: hidden; background: white; }
.quantity button { border: 0; border-radius: 0; background: #edf2eb; font-size: 1.2rem; }
.quantity output { min-width: 48px; }
.quantity input { border: 0; border-radius: 0; }
.cart-item { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-top: 18px; }
.total { padding: 28px 0; }
.total strong { font-variant-numeric: tabular-nums; color: var(--dark); }
.cartbar { padding-bottom: max(14px,env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px #163e2912; }
.cartbar button { min-height: 60px; }
.notice { border-radius: 0 10px 10px 0; }
.order { padding: 26px; border-radius: 14px; }
.order h2 { margin-bottom: 4px; }
.order ul { padding-left: 22px; }
.order li { padding-bottom: 12px; border-bottom: 1px solid #e0e7df; }
.stat { border-radius: 12px; border-top: 3px solid var(--green); }
.stat strong { color: var(--dark); font-variant-numeric: tabular-nums; }
dialog { border-radius: 18px; box-shadow: 0 24px 80px #0004; }
@media (max-width: 960px) {
  .login-layout { grid-template-columns: 1fr 430px; gap: 32px; }
  .login-intro h2 { font-size: 2.15rem; }
  .topbar { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .login-layout { display: flex; flex-direction: column; gap: 26px; padding-top: 28px; }
  .login { max-width: 480px; }
  .login-intro { order: 1; max-width: 480px; padding: 0; }
  .login-intro h2 { font-size: 1.7rem; }
  .login-layout footer { order: 2; }
  .private-access { display: none; }
  .help { display: block; }
  .help p { margin: 10px 0 18px; }
}
@media (max-width: 600px) {
  .topbar { padding: 16px; gap: 18px; }
  .brand img { width: 48px; height: 48px; }
  .brand strong { font-size: 1.2rem; }
  .topbar nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .topbar nav button { padding: 12px 8px; min-height: 48px; font-size: .92rem; }
  main { padding-top: 28px; }
  .login { padding: 26px 22px; }
  .choices { gap: 12px; }
  .choice { padding: 20px 14px; font-size: 1.12rem; min-height: 126px; overflow-wrap: anywhere; }
  .choice span { font-size: .8rem; }
  .selection { padding: 18px; }
  .search button { min-width: 88px; }
  .product-content { padding: 20px; }
  .product-image { height: 200px; }
  .help .button { width: 100%; }
  .cart-item,.order { padding: 20px; }
  .total strong { font-size: 1.4rem; }
  .cartbar button { flex-wrap: wrap; gap: 4px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none!important; transition: none!important; }
  button:not(:disabled):active,.button:active { transform: none; }
}
@media print {
  .login-intro { display: none; }
  .cart-item,.order,.product { box-shadow: none; }
}

/* Guia do pedido: só existe na impressão (ou no "Salvar como PDF" do celular). */
#print-area{display:none}
@media print{
  body.printing>:not(#print-area){display:none!important}
  html:has(body.printing),body.printing{background:#fff}
  body.printing #print-area{display:block}
  @page{margin:12mm}
}
.guide{font:12pt/1.4 "Segoe UI",Tahoma,Arial,sans-serif;color:#000}
.guide header{display:flex;gap:12px;align-items:center;border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:10px}
.guide h1{font-size:16pt;margin:0}
.guide header p{margin:2px 0 0}
.guide dl{display:grid;grid-template-columns:max-content 1fr;gap:2px 12px;margin:0 0 12px}
.guide dt{font-weight:700}
.guide dd{margin:0}
.guide table{width:100%;border-collapse:collapse}
.guide th,.guide td{border:1px solid #000;padding:5px 6px;text-align:left;vertical-align:top}
.guide th{background:#eee}
.guide td:first-child,.guide td:last-child{text-align:center;width:3em}
.guide td small{display:block;font-size:9pt;color:#333}
.guide tfoot td{font-weight:700}
.guide tr{break-inside:avoid}
.guide-sign{display:flex;gap:16px;margin-top:36px}
.guide-sign span{flex:1;border-top:1px solid #000;padding-top:4px;font-size:10pt;text-align:center}

/* Catálogo em grade: quadrinhos lado a lado (2 no celular), como vitrine de loja. */
.how-to { background: #eef4ec; border-left: 4px solid var(--green); border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; font-size: .95rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; align-items: stretch; }
.tile { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px; overflow-wrap: anywhere; }
.tile-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 8px; background: #fff; }
.tile-nophoto { display: flex; align-items: center; justify-content: center; height: 64px; border-radius: 8px; background: #edf1eb; color: var(--muted); font-size: .75rem; }
.tile h3 { font-size: 1rem; line-height: 1.25; margin: 2px 0 0; }
.tile-machine { font-size: .78rem; line-height: 1.3; color: var(--muted); margin: 0; }
.tile-prices { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 4px; }
.tile-prices li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.tile-prices .badge { font-size: .62rem; padding: 2px 5px; }
.tile-prices strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--dark); }
.tile-incart { margin: 0; font-size: .8rem; font-weight: 700; color: var(--green); }
.tile .primary { margin-top: auto; width: 100%; min-height: 48px; padding: 8px; font-size: 1rem; }
/* Tela da peça: o cartão completo dentro do diálogo, sem repetir título nem a faixa de foto. */
#dialog .product { border: 0; box-shadow: none; overflow: visible; } /* overflow visível: senão o rodapé fixo gruda no cartão, não na janela */
#dialog .product h3, #dialog .no-photo { display: none; }
#dialog .product-content { padding: 0; }
/* Tela da peça: caixas de tipo mais baixas e quantidade + botão sempre visíveis no rodapé da janela. */
#dialog .variant { padding: 12px; }
#dialog .variant strong { margin: 4px 0 2px; }
#dialog .variant-selected { display: none; margin-top: 2px; }
#dialog .variant:has(input:checked) .variant-selected { display: block; }
#dialog .add-row { position: sticky; bottom: 0; margin: 14px 0 0; padding: 12px 0 2px; background: #fff; border-top: 1px solid #e0e7df; flex-wrap: nowrap; }
#dialog .add-row .primary { flex: 1 1 auto; min-width: 0; }

/* Celular: busca e filtros ocupam menos espaço, para as peças aparecerem logo ao abrir. */

/* Celular: cabeçalho mais baixo. "Sair" ao lado do logo; os outros botões numa fileira. */

/* Tela do pedido compacta: uma linha por peça, total e botão fixos no rodapé. */
.checkout-head { align-items: center; margin-bottom: 10px; gap: 8px; }
.checkout-head h1 { font-size: 1.5rem; margin: 0; }
.checkout-head .quiet { min-height: 44px; padding: 6px 8px; }
.cart-list { display: grid; gap: 8px; }
.cart-list .cart-item { margin: 0; padding: 10px 12px; border-radius: 10px; }
.ci-info { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.ci-info .badge { font-size: .65rem; padding: 2px 6px; }
.ci-name { font-size: 1rem; line-height: 1.25; }
.ci-info small { flex-basis: 100%; color: var(--muted); font-size: .8rem; }
.ci-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ci-actions .quantity button { width: 44px; min-height: 48px; }
.ci-actions .quantity input { width: 52px; height: 48px; font-size: 16px; }
.ci-sub { margin-left: auto; font-variant-numeric: tabular-nums; }
.ci-remove { min-height: 48px; padding: 4px 6px; font-size: .85rem; }
.notes { margin: 12px 0 4px; }
.notes summary { cursor: pointer; padding: 12px 0; font-weight: 700; color: var(--dark); }
.notes textarea { font-size: 16px; }
.checkout-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 12px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 -4px 14px #0002; }
.checkout-bar small { display: block; color: var(--muted); font-size: .75rem; }
.checkout-bar strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.checkout-bar .primary { flex: 1; max-width: 300px; min-height: 52px; padding: 8px 12px; line-height: 1.2; }

/* Celular: telas de escolha, ajuda, entrada e pedidos mais baixas (varredura de espaço). */

.photo-note{display:block;margin:0;padding:6px 10px;color:#5a554a;background:#f4efe4;font-size:.75rem;line-height:1.35;text-align:center}

/* Revisão: filtros ativos, erros por campo, paginação, avisos de pedido, foco e áreas de toque. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.check { min-height: 48px; padding: 6px 0; align-items: center; cursor: pointer; }
.check input { width: 24px; height: 24px; flex: none; }
.field-error { display: block; margin-top: 4px; color: #a32121; font-size: .88rem; font-weight: 600; }
[aria-invalid="true"] { border-color: #a32121 !important; box-shadow: 0 0 0 2px #f3d2d2; }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.chip { min-height: 44px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--green); background: #eef4ec; color: var(--dark); font-size: .9rem; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; }
.order-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.email-failed { color: #a32121; font-weight: 600; }
.email-sent { color: var(--green); }
.pending { color: #805300; }
.cart-item.changed { border-color: #9b6a12; box-shadow: 0 0 0 2px #f4e3c2; }
.done-steps { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.done-steps li { padding-left: 30px; position: relative; color: var(--muted); }
.done-steps li::before { content: ''; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 50%; }
.done-steps li.done { color: var(--dark); }
.done-steps li.done::before { content: ''; border-color: var(--green); background: var(--green); color: #fff; font-size: 12px; line-height: 18px; text-align: center; }
.wa-help { margin-top: 12px; }
.wa-help summary { cursor: pointer; padding: 12px 0; font-weight: 700; }
.photo-note.real { background: #eef4ec; color: var(--dark); }
:focus-visible { outline: 3px solid #1f6feb; outline-offset: 2px; }
h1[tabindex="-1"]:focus { outline: none; }
@media (max-width: 600px) {
  .checkout-bar { display: grid; grid-template-columns: minmax(0, 1fr); }
  .checkout-bar strong { white-space: normal; }
  .checkout-bar .primary { width: 100%; max-width: none; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { padding: 8px; }
  .tile h3 { font-size: .95rem; }
  .tile-nophoto { height: 38px; font-size: .7rem; }
  /* Selo e preço na mesma linha, inclusive com Original e Paralela. */
  .tile-prices .badge { font-size: .58rem; padding: 2px 4px; }
  .tile-prices strong { font-size: .95rem; }
  .selection { padding: 10px 12px; margin-bottom: 12px; gap: 10px; flex-wrap: nowrap; }
  .selection small { font-size: .72rem; }
  .selection p { margin: 0; }
  .selection strong { font-size: .98rem; line-height: 1.25; }
  .selection button { flex: none; min-height: 48px; padding: 8px 12px; font-size: .85rem; white-space: nowrap; }
  #main > h1:has(+ #search-form) { font-size: 1.15rem; margin: 0 0 8px; }
  .search { flex-wrap: nowrap; gap: 8px; margin: 0 0 10px; }
  .search label { min-width: 0; font-size: 0; } /* o texto do rótulo continua para leitores de tela; a dica fica no campo */
  .search input { height: 48px; margin: 0; font-size: 16px; }
  .search button { height: 48px; min-width: 0; padding: 0 16px; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; }
  .filters label { min-width: 0; font-size: .75rem; }
  .filters select { height: 48px; margin-top: 2px; padding: 0 28px 0 10px; font-size: 16px; }
  .filters .quiet { grid-column: 1 / -1; justify-self: start; min-height: 44px; padding: 6px 0; font-size: .9rem; }
  h2[aria-live] { font-size: 1.1rem; margin: 0; }
  .how-to { padding: 8px 12px; margin: 6px 0 10px; font-size: .88rem; }
  .topbar { position: relative; padding: 10px 16px 12px; gap: 10px; }
  .brand img { width: 40px; height: 40px; }
  .brand strong { font-size: 1.05rem; }
  .brand small { margin-top: 0; font-size: .8rem; }
  .topbar nav { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 6px; }
  .topbar nav button { min-height: 48px; padding: 6px 4px; font-size: .82rem; line-height: 1.15; }
  .topbar nav .logout { position: absolute; top: 10px; right: 12px; min-height: 40px; padding: 4px 8px; }
  #main > h1 { font-size: 1.35rem; margin-bottom: 4px; }
  #main > h1 + p.muted { margin-bottom: 8px; font-size: .9rem; }
  .choices { gap: 8px; margin: 10px 0 14px; }
  .choice { min-height: 64px; padding: 10px 12px; gap: 2px; font-size: 1.02rem; border-top-width: 3px; }
  .choice span { font-size: .75rem; }
  #main > h2 { font-size: 1.05rem; margin: 6px 0 0; }
  .help { padding: 12px 0; margin-top: 16px; }
  .help strong { font-size: 1rem; }
  .help p { margin: 2px 0 10px; font-size: .85rem; }
  .login .notice { display: none; } /* repete o que o texto de apresentação diz logo abaixo */
  .login-intro h2 { font-size: 1.3rem; margin-bottom: 8px; }
  .login-intro > p { font-size: .9rem; margin-bottom: 10px; }
  .intro-steps li { margin: 6px 0; }
  .login-intro .intro-payment { padding-top: 10px; }
  .order { padding: 12px 14px; margin: 10px 0; }
  .order header { margin-bottom: 8px; }
  .order h2 { font-size: 1.1rem; }
  .order ul { padding-left: 18px; margin: 6px 0; }
  .order li { margin: 6px 0; padding-bottom: 6px; line-height: 1.35; }
  .order p { margin: 6px 0; }
  .order details { margin-top: 6px; }
  .order summary { padding: 8px 0; }
  .order-actions { display: grid; gap: 6px; }
  .order-actions button { width: 100%; }
  .active-filters { margin-bottom: 8px; }
  .chip { font-size: .82rem; padding: 4px 10px; }
}

/* Etapas de máquina/marca/modelo: Voltar + caminho escolhido, sem a régua numerada. */
.wizard-path { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; color: var(--muted); }
.wizard-path .quiet { min-height: 44px; padding: 6px 4px; }

/* Avisos sem controles não interceptam toques na navegação ou no pedido. */
#toast { pointer-events: none; }
#toast:not(:empty) { width: max-content; max-width: min(560px,calc(100% - 32px)); }

/* Painel: a fila de atendimento primeiro, no verde e na tipografia da R.O Agro.
   Grade desktop: 5 colunas iguais sem vãos; no celular 2 colunas e a última ocupa ambas. */
.admin-screen { --panel-edge: #e2e8e2; --panel-fill: #fff; padding: 24px; margin-top: 16px; background: var(--panel-fill); border: 1px solid var(--panel-edge); border-radius: 16px; }
.admin-screen h1 { font-size: 24px; letter-spacing: -.02em; line-height: 1.25; }
.admin-screen h2 { font-size: 20px; }
.admin-screen button,body:has(.admin-screen) .topbar button { box-shadow: none; }
.admin-screen .tabs { gap: 12px; padding: 0; border-bottom: 1px solid var(--panel-edge); }
.admin-screen .tabs button { border: 0; border-radius: 0; padding: 10px 4px; background: transparent; color: var(--muted); }
.admin-screen .tabs .active { color: var(--dark); border-bottom: 2px solid var(--green); }
.admin-area-picker { display: none; }
.admin-screen .action-stats { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0; border: 1px solid var(--panel-edge); border-radius: 8px; overflow: hidden; margin: 16px 0; }
.admin-screen .stat { display: flex; flex-direction: column-reverse; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; border: 0; border-right: 1px solid var(--panel-edge); border-radius: 0; padding: 16px; text-align: left; font-size: 14px; font-weight: 500; color: var(--muted); }
.admin-screen .stat:last-child { border-right: 0; }
.admin-screen .stat strong { margin: 0; font-size: 28px; line-height: 1; font-weight: 600; color: var(--dark); }
.admin-screen .stat:hover { background: #f0f5ef; }
.summary-recent { margin-top: 24px; }
.summary-recent h2 { margin: 0; }
.recent-order { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--panel-edge); }
.recent-order:last-child { border-bottom: 0; }
.recent-order h3 { margin: 0 0 4px; font-size: 16px; }
.recent-order p,.recent-order-total>span:last-child { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.recent-order-total { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; font-variant-numeric: tabular-nums; }
.recent-order-total .badge { font-size: 12px; letter-spacing: 0; }
.admin-screen .order,.admin-screen .admin-row,.admin-screen .admin-form { border-color: var(--panel-edge); box-shadow: none; }
.admin-screen .order h2 { font-size: 20px; }
.tile-prices .badge { font-size: 12px; letter-spacing: 0; padding: 3px 5px; }
.settings-form { display: grid; gap: 24px; }
.settings-section { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(0,1.2fr); gap: 24px; align-items: start; }
.settings-section h2 { margin: 4px 0 10px; }
.settings-section p { max-width: 42ch; margin: 0 0 12px; }
.settings-panel { display: grid; gap: 16px; background: #f6f8f5; border-radius: 8px; padding: 16px; }
.settings-panel p { margin: 0; }
.settings-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding: 12px 0; }
@media (max-width: 1100px) {
  .admin-screen .tabs { display: none; }
  .admin-area-picker { display: block; margin: 12px 0 20px; }
  .admin-screen { margin: 12px 16px; }
}
@media (max-width: 600px) {
  .admin-screen { padding: 16px; border-radius: 8px; }
  .admin-screen h1 { font-size: 24px; }
  .admin-screen .stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-screen .stat { min-height: 104px; border-bottom: 1px solid var(--panel-edge); }
  .admin-screen .stat:nth-child(even) { border-right: 0; }
  .admin-screen .action-stats .stat:last-child { grid-column: 1 / -1; flex-direction: row-reverse; align-items: center; min-height: 64px; border-bottom: 0; }
  .recent-order { grid-template-columns: minmax(0,1fr); }
  .recent-order-total { align-items: flex-start; text-align: left; }
  .admin-screen .filters { grid-template-columns: 1fr 1fr; }
  .admin-screen .filters label:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .settings-section { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .settings-actions { position: sticky; bottom: 0; background: var(--paper); z-index: 3; }
  .settings-actions button { width: 100%; }
}