@font-face {
  font-family: Archivo;
  src: url("assets/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: Marcellus;
  src: url("assets/marcellus.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Anton;
  src: url("assets/anton.woff2") format("woff2");
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #e8e8e3;
  --ink: #181715;
  --muted: #5c5a52;
  --accent: #bfb21a;
  --accent-text: #181715;
  --wash: #dcdcd6;
  --line: #bcbcb4;
  --gap: clamp(18px, 5vw, 78px);
  font: 16px/1.5 Archivo, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); }
[data-brand="orla"] { --paper: #f8f3eb; --ink: #301b20; --accent: #762d40; --accent-text: #fff9f2; --wash: #ebdfd0; --muted: #645054; --line: #d8c9be; }
[data-brand="barro"] { --paper: #f3efe4; --ink: #273225; --accent: #33452e; --accent-text: #fff9e8; --wash: #e4d9c0; --muted: #565c4e; --line: #c9c6b4; }
[data-brand="cume"] { --paper: #ebeff0; --ink: #132733; --accent: #a13c18; --accent-text: #fff7ef; --wash: #dae3e6; --muted: #415763; --line: #bdcbd0; }
main { flex: 1; min-width: 0; }
main:focus { outline: none; }
img { max-width: 100%; display: block; object-fit: cover; }
a { color: inherit; text-underline-offset: .24em; }
button, input, select { font: inherit; color: inherit; }
button, input, select, .primary, .secondary { min-height: 42px; }
button, .primary, .secondary { padding: .58em 1em; border: 1px solid currentColor; background: transparent; cursor: pointer; }
button:hover:not(:disabled), .secondary:hover { background: var(--wash); }
button:disabled { opacity: .48; cursor: not-allowed; }
input:not([type="radio"]), select { padding: .55em .65em; border: 1px solid var(--line); background: var(--paper); max-width: 100%; }
input[type="radio"] { min-height: auto; accent-color: var(--accent); }
:focus-visible { outline: 3px solid #1d5fbf; outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.06; }
p { margin-block: .6em 1em; }
ul, ol { padding-left: 1.25em; }
.wide { width: min(100% - var(--gap) * 2, 1280px); margin-inline: auto; }
.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; font-weight: 650; text-decoration: none; text-align: center; }
.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.primary:hover:not(:disabled) { background: var(--accent); color: var(--accent-text); filter: brightness(.93); }
.text-button { border: 0; padding-inline: 0; text-decoration: underline; text-underline-offset: .22em; }
.text-button:hover:not(:disabled) { background: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.small, small { font-size: .86rem; color: var(--muted); }
.error, .low { color: #8b241d; }
.demo-nav { background: #181715; color: #eeeee9; }
.demo-inner { width: min(100% - var(--gap) * 2, 1280px); margin-inline: auto; min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.signature { white-space: nowrap; text-decoration: none; font-weight: 500; }
.demo-nav nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.demo-nav nav a { font-size: .85rem; line-height: 2; text-decoration: none; color: #d6d5d0; }
.demo-nav nav a[aria-current], .demo-nav nav a:hover { color: #fff; text-decoration: underline; }
.demo-footer { background: #181715; color: #eeeee9; margin-top: auto; font-size: .88rem; }
.demo-footer > div { width: min(100% - var(--gap) * 2, 1280px); margin-inline: auto; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.intro { background: #181715; color: #e8e8e3; }
.intro-inner { width: min(100% - var(--gap) * 2, 1280px); margin-inline: auto; display: grid; grid-template-columns: 1.25fr .8fr; align-items: center; gap: clamp(24px, 6vw, 100px); padding-block: clamp(44px, 7vw, 98px); }
.intro h1 { font-stretch: 70%; font-weight: 900; font-size: clamp(3.35rem, 8vw, 8rem); line-height: .87; text-transform: uppercase; letter-spacing: -.025em; }
.intro-copy p { font-size: clamp(1.1rem, 2vw, 1.4rem); max-width: 31ch; margin-block: 26px 24px; color: #d6d5cd; }
.receipt { position: relative; background: #e8e8e3; color: #181715; padding: clamp(19px, 3vw, 36px); font-variant-numeric: tabular-nums; }
.receipt::after { content: ""; position: absolute; inset: auto 0 -9px; height: 10px; background: inherit; clip-path: polygon(0 0, 100% 0, 100% 100%, 95% 20%, 90% 100%, 85% 20%, 80% 100%, 75% 20%, 70% 100%, 65% 20%, 60% 100%, 55% 20%, 50% 100%, 45% 20%, 40% 100%, 35% 20%, 30% 100%, 25% 20%, 20% 100%, 15% 20%, 10% 100%, 5% 20%, 0 100%); }
.receipt-top, .receipt-total, .receipt-links { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 15px; }
.receipt-top { padding-bottom: 14px; border-bottom: 3px dotted #a7a59d; }
.receipt-top strong, .receipt-total strong { font-size: 1.28rem; }
.receipt-top span, .receipt-product span, .receipt-links { font-size: .87rem; }
.receipt-product { padding-block: 22px; display: flex; align-items: center; gap: 15px; }
.receipt-product img { width: 105px; height: 74px; }
.receipt-product span { display: block; color: #535149; }
.receipt-total { border-top: 3px dotted #a7a59d; padding-block: 13px; }
.examples { padding-block: 52px 68px; }
.examples h2, .flow h2 { font-size: clamp(2rem, 4vw, 3.4rem); font-stretch: 78%; letter-spacing: -.02em; margin-bottom: 24px; }
.examples-grid, .product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 30px); }
.example { background: #ded6c8; }
.example.barro { background: #d8dccb; }
.example.cume { background: #d4dce0; }
.example a, .product-grid a { display: block; text-decoration: none; }
.example a:hover h3, .product-grid a:hover h3 { text-decoration: underline; }
.example img, .product-grid img { width: 100%; height: auto; aspect-ratio: 1.5; }
.example-copy { padding: 19px; }
.example-copy > span { font-size: .86rem; }
.example h3 { font-size: clamp(1.2rem, 2.5vw, 1.95rem); margin-top: 5px; }
.example p { margin-bottom: 0; }
.flow { background: var(--wash); padding-block: 48px; }
.flow-inner { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(18px, 6vw, 90px); align-items: center; }
.flow ol { display: grid; gap: 12px; padding-left: 1.3rem; margin: 0; }
.flow p { margin-bottom: 0; }
.flow-photo { display: block; }
.flow-photo img { width: 100%; height: auto; }
.shop-head { min-height: 84px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.shop-head nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; }
.shop-head a { text-decoration: none; }
.shop-head a:hover { text-decoration: underline; }
.wordmark { font-size: clamp(1.45rem, 3vw, 2.5rem); font-weight: 750; letter-spacing: -.045em; line-height: 1; }
[data-brand="orla"] .wordmark { font-family: Marcellus, Georgia, serif; font-weight: 400; }
[data-brand="barro"] .wordmark { font-family: Marcellus, Georgia, serif; font-weight: 400; }
[data-brand="cume"] .wordmark { font-family: Anton, Archivo, sans-serif; font-weight: 400; letter-spacing: .02em; }
.bag { padding: 8px 11px; border: 1px solid var(--line); }
.store-hero { display: grid; grid-template-columns: .95fr 1.05fr; min-height: 385px; background: var(--wash); }
.store-copy { align-self: center; padding: clamp(23px, 5vw, 73px); }
.store-copy h1 { font-size: clamp(3rem, 5.6vw, 6.25rem); line-height: .96; font-weight: 400; font-family: Marcellus, Georgia, serif; }
.store-copy p { font-size: 1.1rem; max-width: 35ch; margin-block: 20px; }
.store-photo { width: 100%; height: 100%; object-position: center; }
.store-hero.barro { grid-template-columns: 1.15fr .85fr; }
.store-hero.barro .store-photo { order: -1; }
.store-hero.cume { background: #183344; color: #f4f6f5; grid-template-columns: .8fr 1.2fr; }
.store-hero.cume h1 { font-family: Anton, Archivo, sans-serif; font-size: clamp(2.8rem, 5.4vw, 5.4rem); text-transform: uppercase; }
.perks { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; padding-block: 17px; border-bottom: 1px solid var(--line); font-size: .89rem; }
.catalog, .inner { padding-block: 44px 60px; }
.section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.section-head h2, .inner h1 { font-size: clamp(2rem, 5vw, 3.8rem); letter-spacing: -.035em; }
.section-head form { display: flex; gap: 6px; max-width: 100%; }
.section-head input { min-width: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 20px; }
.filters .selected { background: var(--ink); color: var(--paper); }
.product-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; padding-top: 13px; }
.product-title h3 { font-size: 1.18rem; }
.product-grid p { color: var(--muted); }
.store-terms { background: var(--wash); padding-block: 28px; }
.store-terms h2 { font-size: 1.45rem; }
.store-terms p { max-width: 70ch; }
.back { display: inline-block; margin-bottom: 24px; }
.product-detail { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(22px, 5vw, 65px); align-items: start; }
.detail-image { width: 100%; height: auto; }
.detail-price { font-size: 1.55rem; font-weight: 700; margin-block: .5em; }
fieldset { padding: 0; border: 0; margin: 0 0 16px; min-width: 0; }
legend { font-weight: 650; margin-bottom: 8px; }
.variants { display: flex; gap: 8px; flex-wrap: wrap; }
.variants label { position: relative; }
.variants input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.variants span { display: block; min-width: 85px; padding: 9px 11px; border: 1px solid var(--line); }
.variants small { display: block; }
.variants input:checked + span { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--wash); }
.variants input:focus-visible + span { outline: 3px solid #1d5fbf; }
.variants input:disabled + span { opacity: .62; }
.add-form { margin-block: 18px 24px; }
.cep-form { margin-block: 18px; }
.cep-form label { display: block; font-weight: 650; margin-bottom: 6px; }
.cep-form div { display: flex; gap: 6px; }
.cep-form input { width: 135px; min-width: 0; }
.cep-form small { display: block; margin-top: 5px; }
.delivery-preview { margin-block: 0; }
.cart-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(20px, 5vw, 70px); margin-top: 24px; align-items: start; }
.cart-lines { list-style: none; padding: 0; margin: 0; }
.cart-lines li { display: grid; grid-template-columns: 95px 1fr auto; gap: 13px; border-bottom: 1px solid var(--line); padding-block: 14px; }
.cart-lines img { width: 95px; height: 75px; }
.cart-lines p { margin-block: 2px; }
.qty { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; }
.stepper { padding: 0; width: 36px; }
.summary { padding: clamp(16px, 3vw, 32px); background: var(--wash); }
.summary h2, .order h2 { font-size: 1.4rem; }
.option { display: flex; align-items: center; gap: 7px; min-height: 36px; }
.totals { border-top: 1px solid var(--line); padding-top: 10px; font-variant-numeric: tabular-nums; }
.totals div { display: flex; justify-content: space-between; gap: 10px; }
.totals div:last-child { font-size: 1.12rem; padding-top: 6px; }
.summary .primary { width: 100%; }
.empty { margin-top: 20px; }
.order { margin-top: 24px; padding: clamp(16px, 3vw, 28px); background: var(--wash); }
.order header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.order header > div:last-child { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.status { display: inline-block; background: var(--paper); padding: 3px 8px; font-size: .86rem; font-weight: 550; }
.timeline { list-style: none; margin: 17px 0; padding: 0 0 0 12px; border-left: 3px solid var(--accent); }
.timeline li { display: flex; flex-wrap: wrap; gap: 2px 16px; padding-block: 5px; }
.timeline time { color: var(--muted); font-size: .86rem; }
.notice { font-weight: 650; }
[data-page="painel"], [data-page="estoque"] { --paper: #f4f3f1; --ink: #141414; --accent: #141414; --accent-text: #fff; --wash: #e9e9e9; --line: #d4d4d4; --muted: #595959; }
.admin { display: grid; grid-template-columns: minmax(154px, 220px) minmax(0, 1fr); gap: 22px; padding-block: 32px 60px; font-size: .94rem; }
.admin aside { border-right: 1px solid var(--line); padding-right: 18px; }
.admin aside > strong { font-size: 1.24rem; }
.admin aside p, .admin-head p { color: var(--muted); margin-top: .2em; }
.admin aside nav { display: grid; gap: 4px; margin-top: 18px; }
.admin aside a { padding: 7px 9px; text-decoration: none; }
.admin aside a:hover, .admin aside .selected { background: var(--wash); }
.admin-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.admin h1 { font-size: 1.65rem; }
.admin h2 { font-size: 1.15rem; margin-top: 24px; }
.admin h3 { font-size: 1rem; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; margin-top: 12px; }
.metrics > div { padding: clamp(10px, 2vw, 20px); border-right: 1px solid var(--wash); }
.metrics span { color: var(--muted); font-size: .85rem; }
.metrics strong { display: block; font-size: 1.95rem; font-variant-numeric: tabular-nums; font-weight: 500; }
.panel { background: #fff; padding: 15px; margin-top: 12px; }
.admin-order { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.admin-order p { margin: 4px 0 0; }
.admin-order .status { margin-left: 5px; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.stock-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.stock-table td, .stock-table th { padding: 9px 5px; border-bottom: 1px solid var(--line); text-align: left; }
.stock-table th:nth-child(3), .stock-table td:nth-child(3) { text-align: right; }
.stock-table th:last-child, .stock-table td:last-child { text-align: right; }
.stock-table tbody th { font-weight: 550; }
.toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 2; width: max-content; max-width: calc(100% - 30px); background: #181715; color: #fff; padding: 12px 16px; }
.toast:empty { display: none; }
dialog { border: 0; background: var(--paper); color: var(--ink); width: min(460px, 100% - 30px); padding: 24px; }
dialog::backdrop { background: #181715a6; }
.dialog-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.dialog-head h2 { font-size: 1.35rem; }
dialog form { display: grid; gap: 13px; margin-top: 12px; }
dialog label { display: grid; gap: 4px; }
@media (max-width: 950px) {
  .demo-inner { align-items: flex-start; flex-direction: column; gap: 3px; padding-block: 9px; }
  .demo-nav nav { gap: 0 15px; }
  .store-hero { min-height: 320px; }
}
@media (max-width: 680px) {
  .intro-inner, .store-hero, .store-hero.barro, .store-hero.cume, .product-detail, .cart-grid, .admin { grid-template-columns: minmax(0, 1fr); }
  .intro-inner { gap: 28px; }
  .intro h1 { font-size: clamp(3rem, 13vw, 5.2rem); }
  .intro-copy p { margin-block: 16px; }
  .receipt { max-width: 440px; }
  .examples { padding-block: 34px; }
  .examples-grid, .flow ol { grid-template-columns: minmax(0, 1fr); }
  .example a { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch; }
  .example img { height: 100%; min-height: 120px; }
  .example-copy { padding: 12px; }
  .example p { font-size: .91rem; }
  .flow { padding-block: 35px; }
  .flow-inner { grid-template-columns: minmax(0, 1fr); }
  .flow ol { gap: 14px; }
  .shop-head { align-items: flex-start; justify-content: center; flex-direction: column; min-height: 88px; gap: 7px; padding-block: 12px; }
  .shop-head nav { gap: 5px 15px; font-size: .89rem; }
  .bag { padding: 4px 7px; }
  .store-photo { height: auto; aspect-ratio: 1.6; }
  .store-hero.barro .store-photo { order: 0; }
  .store-copy h1, .store-hero.cume h1 { font-size: clamp(2.7rem, 11vw, 4rem); }
  .store-copy p { margin-block: 13px; }
  .catalog, .inner { padding-block: 28px 40px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-title { gap: 4px; }
  .cart-lines li { grid-template-columns: 64px 1fr auto; gap: 8px; }
  .cart-lines img { width: 64px; height: 58px; }
  .admin { gap: 18px; }
  .admin aside { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 10px; }
  .admin aside nav { display: flex; flex-wrap: wrap; margin-top: 0; }
  .stock-table td, .stock-table th { font-size: .82rem; }
  .stock-table button { padding-inline: 6px; }
}
@media (prefers-reduced-motion: no-preference) {
  .primary, .secondary, button { transition: background-color .15s, filter .15s; }
  .intro-copy, .store-hero, .arrived { animation: enter .5s ease-out; }
  .example:nth-child(2).arrived { animation-delay: .05s; }
  .example:nth-child(3).arrived { animation-delay: .1s; }
  @keyframes enter { from { opacity: .5; transform: translateY(10px); } }
}