/* 1. Tokens do design: altere aqui os valores compartilhados. */
:root {
  --pp-brand: #4a2c1d;
  --pp-accent: #874822;
  --pp-text: #252321;
  --pp-muted: #625b56;
  --pp-border: #e8e5e1;
  --pp-surface: #fff;
  --pp-subtle: #f4f4f3;
  --pp-radius: 12px;
  --pp-border-control: #8b817a;
  --pp-control-radius: 8px;
  --pp-card-shadow: 0 4px 16px rgb(74 44 29 / .04);
  /* WhatsApp brand colors are a deliberate external-brand exception. */
  --pp-whatsapp-bg: #25d366;
  --pp-whatsapp-text: #111b21;
  --pp-brand-hover: #382014;
  --pp-brand-pressed: #29170e;
  /* Semantic feedback extensions; shared by admin and login. */
  --pp-error: #9c2924;
  --pp-error-surface: #fbeceb;
  --pp-success: #30623c;
  --pp-success-surface: #edf5ee;
  --pp-body: 'DM Sans', Arial, sans-serif;
  --pp-heading: 'Playfair Display', Georgia, serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--pp-surface); color: var(--pp-text); font: 400 16px/1.5 var(--pp-body); }
body:has(dialog[open]) { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--pp-brand); outline-offset: 5px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--pp-brand); font-family: var(--pp-heading); font-weight: 400; }
h1 { font-size: clamp(36px, 4vw, 48px); line-height: 1.21; }
h2 { font-size: 32px; line-height: 1.3125; }
.container { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; top: 12px; left: 12px; padding: 12px 20px; background:var(--pp-surface); z-index: 10; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.eyebrow { color: var(--pp-accent); font-size: 14px; line-height: 20px; font-weight: 600; }

/* 2. Cabeçalho e navegação: funciona mesmo sem JavaScript. */
.site-header__inner { min-height: 104px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 12px; }
.brand { flex-shrink: 0; }
.brand img { width: 132px; height: 77.27px; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: 8px; width: 568px; }
.site-nav a { min-width: 136px; padding: 12px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 600; }
.site-nav a:hover, .footer-nav a:hover { background: var(--pp-subtle); }
.menu-toggle { display: none; border: 1px solid var(--pp-border-control); border-radius: 8px; min-height: 48px; padding: 8px 16px; background:var(--pp-surface); color: var(--pp-brand); font-weight: 600; }

/* 3. Home: as seções crescem junto com seu conteúdo. */
.hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; padding-block: 64px; }
.hero__content { display: grid; gap: 24px; min-width:0; overflow-wrap:anywhere; }
.hero__description { color: var(--pp-muted); }
.hero__image { display:block; width:100%; max-width:100%; height:auto; object-fit:contain; border-radius:var(--pp-radius); }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 12px 24px; border: 1px solid var(--pp-brand); border-radius: 8px; background: var(--pp-brand); color: white; text-decoration: none; font-size: 14px; line-height: 20px; font-weight: 600; text-align: center; transition: background .15s; }
.button:hover { background: var(--pp-brand-hover); }
.button:active { background: var(--pp-brand-pressed); }
.hero .button { width: 180px; }
.products { padding-block: 64px; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 24px 0 0; list-style: none; }
.product-grid li { min-width: 0; }
.product-card { display: flex; flex-direction: column; gap: 8px; min-height: 100%; padding: 8px; border: 1px solid var(--pp-border); border-radius: var(--pp-radius); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.product-card:hover { border-color:var(--pp-border-control); box-shadow:var(--pp-card-shadow); }
.product-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.product-card h3 { font-size: 16px; line-height: 24px; }
.product-card p { font-size: 14px; line-height: 20px; color: var(--pp-muted); min-height: 20px; }
/* Independent location and opening-hours sections. */
.visit-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 64px; padding-block: 64px; }
.location, .opening-hours { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.location address { font-style: normal; color: var(--pp-muted); }
.location-map { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border: 0; border-radius: var(--pp-radius); }
.location .button { max-width: 100%; }
.opening-hours__content { display: grid; gap: 16px; width: 100%; padding-block: 8px; }
.hours__contact { font-size: 16px; line-height: 24px; color: var(--pp-muted); }
.phone { color: inherit; text-underline-offset: 4px; }
@media(max-width:767px) { .visit-layout { grid-template-columns: 1fr; gap: 48px; padding-block: 40px; } }
.site-footer { padding-block: 32px 112px; }
.site-footer__inner { display: grid; gap: 16px; }
.footer-brand { font: 400 20px/28px var(--pp-heading); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-left: -8px; }
.footer-nav a { padding: 12px 8px; min-height: 48px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; }
.instagram { width: fit-content; text-underline-offset: 4px; font-size: 14px; }
.copyright { font-size: 14px; line-height: 20px; }
.whatsapp { position: fixed; z-index: 3; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); min-height: 48px; width: 120px; display: flex; align-items: center; justify-content: center; border-radius: 24px; border: 1px solid transparent; color:var(--pp-whatsapp-text); background:var(--pp-whatsapp-bg); font-size: 14px; font-weight: 600; text-decoration: none; }
.whatsapp:hover { border-color:var(--pp-whatsapp-text); }
.whatsapp:focus-visible { outline-color:var(--pp-whatsapp-text); }

/* Intentional exception: layout styles must not reveal hidden content. */
[hidden] { display: none !important; }
@media (max-width: 767px) {
  .site-header__inner { flex-wrap: wrap; gap: 8px; }
  .site-nav { width: 100%; flex-wrap: wrap; }
  .site-nav a { min-width: auto; }
  .js .menu-toggle { display: inline-flex; align-items: center; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: flex; flex-direction: column; align-items: stretch; }
  .hero { grid-template-columns: 1fr; padding-block: 40px; gap: 32px; }
  .products { padding-block: 40px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  h2 { font-size: 28px; line-height: 1.3; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Intentional accessibility exception, independent of component specificity. */
  *, *::before, *::after { transition: none !important; }
}
picture { display:block; min-width:0; }
/* Music uses PP v1/Button Secondary (85:14); responsive layout only. */
.music-player { min-width:0; position:relative; display:flex; align-items:center; gap:8px; flex-shrink:0; color:var(--pp-brand); background:var(--pp-surface); }
.music-play { width:220px; }
.music-mute { min-width:108px; }
.music-status { position:absolute; top:calc(100% + 8px); right:0; background:var(--pp-surface); color:var(--pp-muted); font:400 14px/20px var(--pp-body); max-width:280px; z-index:2; }
.music-status:empty { display:none; }
@media(min-width:768px) { .site-header__inner:has(.music-player) .site-nav { width:auto; margin-left:auto; } .site-header__inner:has(.music-player) .site-nav a { min-width:auto; } }
@media(max-width:1100px) {
 .site-header__inner:has(.music-player) { flex-wrap:wrap; }
 .music-player { flex-basis:100%; order:3; }
 .music-play { flex:1; width:auto; min-width:0; }
}

/* PP v1/Button Secondary: shared by gallery, player and admin. */
.secondary, .music-player button, .upload-button, .danger { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:48px; padding:8px 16px; border:1px solid var(--pp-border-control); border-radius:var(--pp-control-radius); background:var(--pp-surface); color:var(--pp-brand); font:600 14px/20px var(--pp-body); text-align:center; text-decoration:none; }
.secondary:hover, .secondary:active, .music-player button:hover, .music-player button:active, .menu-toggle:hover, .upload-button:hover, .danger:hover { background:var(--pp-subtle); }
.secondary:focus-visible, .music-player button:focus-visible, .menu-toggle:focus-visible, .upload-button:focus-within, .danger:focus-visible { outline:none; border-color:var(--pp-brand); box-shadow:inset 0 0 0 2px var(--pp-brand); }
button:disabled { opacity:.5; cursor:not-allowed; }
button[aria-busy=true] { cursor:wait; }
.danger { color:var(--pp-error); }
/* PP v1/TextField: label, value and help inside one bordered surface. */
.field { display:flex; flex-direction:column; gap:8px; border:1px solid var(--pp-border-control); border-radius:var(--pp-radius); background:var(--pp-surface); padding:16px; margin:16px 0; min-width:0; }
.field>span { font:600 14px/20px var(--pp-body); }
.field input, .field textarea, .field select { width:100%; min-width:0; border:0; border-radius:0; padding:0; background:transparent; color:var(--pp-text); font:400 16px/24px var(--pp-body); }
.field:focus-within { border-color:var(--pp-brand); box-shadow:inset 0 0 0 2px var(--pp-brand); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline:none; }
.field textarea { resize:vertical; }
.field small { font:400 14px/20px var(--pp-body); color:var(--pp-muted); }
.field:has([aria-invalid=true]) { border-color:var(--pp-error); }
.field .field-error { color:var(--pp-error); }
.notice { padding:16px 20px; border-radius:var(--pp-control-radius); margin-bottom:24px; font:400 14px/20px var(--pp-body); overflow-wrap:anywhere; }
.notice.error { background:var(--pp-error-surface); color:var(--pp-error); }
.notice.success { background:var(--pp-success-surface); color:var(--pp-success); }
/* Authentication composes the same controls as the editor. */
.auth-main { width:min(460px,calc(100% - 32px)); margin:8vh auto; padding:32px; border:1px solid var(--pp-border); border-radius:var(--pp-radius); }
.auth-main h1 { font-size:30px; margin:12px 0; }
.auth-main p { color:var(--pp-muted); margin:12px 0; }
.auth-main .button { width:100%; }
.auth-main a, .auth-main small { font:400 14px/20px var(--pp-body); }