/* PVS SITE CHROME: announcement bar, header, footer. ONE stylesheet for every surface (support site, account, tracking, ticket pages,
   order help flow, stockist portal). The markup comes from server/chrome_render.js, never from a page. 30 Oct 2026.

   🔴 Rules: ⛔ no page-local header or footer CSS. A change here changes every page, which is the point.
   Colours come from ui.css tokens (--sp-*); the fallbacks make this file work on its own.
   THREE layouts, each its own: desktop (>= 1100), iPad (700 to 1099), iPhone (< 700). */

/* ── announcement bar: the store's own message, colours and size. It scrolls away; the header below pins. ── */
.pvs-ann { background: var(--ann-bg, #000); color: var(--ann-fg, #fff); font: 12px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.pvs-ann-in { max-width: 1600px; margin: 0 auto; padding: 6px clamp(16px, 3vw, 40px); box-sizing: border-box; }
.pvs-ann p { margin: 0; }
.pvs-ann a { color: inherit !important; text-decoration: none; }
.pvs-ann a:hover { text-decoration: underline; }
@media (max-width: 699px) { .pvs-ann { font-size: 12px; } .pvs-ann-in { text-align: center; padding: 7px 16px; } }

/* ── header ── */
.pvs-hd { position: -webkit-sticky; position: sticky; top: 0; z-index: 60; background: var(--sp-hd-bg, rgba(255,255,255,.94)); color: var(--sp-ink, #1d1d1f);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--sp-line, rgba(0,0,0,.08)); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.pvs-hd-in { max-width: 1600px; margin: 0 auto; min-height: 60px; padding: 0 clamp(16px, 3vw, 40px); box-sizing: border-box; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; position: relative; }
.pvs-brand { display: inline-flex; align-items: flex-start; gap: 2px; justify-self: start; text-decoration: none; color: inherit; min-height: 44px; align-items: center; }
.pvs-brand img { height: 24px; width: auto; aspect-ratio: 439 / 112; object-fit: cover; object-position: left center; display: block; }
.pvs-brand .logo-d { display: none; }
.pvs-tm { font: 700 11px/1 Arial, Helvetica, sans-serif; margin-top: -8px; color: var(--sp-ink, #0a0a0a); }
.pvs-hd .bar-nav { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.4vw, 34px); }
.pvs-hd .bar-nav a, .pvs-dd-sum { padding: 0 6px !important; min-width: 44px; justify-content: center; font-size: 14px; font-weight: 500; line-height: 1; color: var(--sp-ink2, #6e6e73); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; }
.pvs-hd .bar-nav a:hover, .pvs-dd-sum:hover { color: var(--sp-ink, #1d1d1f); }
.pvs-hd .bar-nav a.act, .pvs-dd-sum.act { color: var(--sp-ink, #1d1d1f); }
.pvs-hd a:focus-visible, .pvs-hd summary:focus-visible, .pvs-hd button:focus-visible { outline: 2px solid var(--sp-blue, #0070d5); outline-offset: 3px; border-radius: 4px; }
/* Support menu (native <details>, closed by chrome.js on outside click / Escape) */
.pvs-dd { position: relative; }
.pvs-dd > summary { list-style: none; } .pvs-dd > summary::-webkit-details-marker { display: none; }
.pvs-chev { margin-left: 5px; transition: transform .18s ease; }
.pvs-dd[open] .pvs-chev { transform: rotate(180deg); }
.pvs-dd-panel { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); min-width: 250px; padding: 8px; border-radius: 14px; background: var(--sp-card, #fff); border: 1px solid var(--sp-line, rgba(0,0,0,.08)); box-shadow: 0 18px 40px rgba(0,0,0,.16); display: grid; z-index: 5; }
.pvs-hd .pvs-dd-panel a { padding: 0 12px; min-height: 44px; border-radius: 8px; font-size: 14px; color: var(--sp-ink, #1d1d1f); }
.pvs-hd .pvs-dd-panel a:hover { background: var(--sp-chip, rgba(118,118,128,.12)); }
/* account corner: Sign In, or first name + Sign Out. Same spot on every page. */
.pvs-corner { justify-self: end; display: flex; align-items: center; gap: 14px; min-height: 44px; }
.pvs-signin, .pvs-hd a.pvs-signin { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; background: var(--sp-btn, #111); color: var(--sp-btn-ink, #fff) !important; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.pvs-signin:hover { opacity: .88; }
.pvs-user-name { font-size: 14px; font-weight: 600; color: var(--sp-ink, #1d1d1f); white-space: nowrap; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
.pvs-out { margin: 0; display: flex; align-items: center; }
.pvs-link { background: none; border: 0; padding: 0; min-height: 44px; font: inherit; font-size: 14px; font-weight: 500; color: var(--sp-blue, #0070d5); cursor: pointer; }
.pvs-link:hover { opacity: .75; }
/* the phone's Menu button + sheet */
.pvs-menu { display: none; }
.pvs-menu > summary { list-style: none; } .pvs-menu > summary::-webkit-details-marker { display: none; }
.pvs-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; color: var(--sp-ink, #1d1d1f); cursor: pointer; border-radius: 10px; }
.pvs-menu-sheet { position: absolute; top: 100%; left: 0; right: 0; background: var(--sp-card, #fff); border-bottom: 1px solid var(--sp-line, rgba(0,0,0,.08)); box-shadow: 0 18px 30px rgba(0,0,0,.14); padding: 6px 16px 14px; display: grid; }
.pvs-menu-sheet a { display: flex; align-items: center; min-height: 48px; font-size: 16px; font-weight: 500; color: var(--sp-ink, #1d1d1f); text-decoration: none; border-bottom: 1px solid var(--sp-line, rgba(0,0,0,.08)); }
.pvs-menu-sheet a:last-child { border-bottom: 0; }
/* iPad portrait: tighter gaps, same bar */
@media (min-width: 700px) and (max-width: 899px) { .pvs-hd .bar-nav { gap: 18px; } .pvs-hd .bar-nav a, .pvs-dd-sum { font-size: 13.5px; } .pvs-user-name { display: none; } }
/* iPhone: logo left, account corner + Menu right; the links live in the sheet */
@media (max-width: 699px) {
  .pvs-hd-in { min-height: 52px; grid-template-columns: 1fr auto auto; gap: 10px; }
  .pvs-hd .bar-nav { display: none; }
  .pvs-menu { display: block; }
  .pvs-brand img { height: 18px; } .pvs-tm { font-size: 9px; margin-top: -6px; }
  .pvs-user-name { display: none; }
  .pvs-signin, .pvs-hd a.pvs-signin { min-height: 34px; padding: 0 14px; font-size: 13.5px; }
}
/* dark: the pages that follow the device get a dark bar; light-only pages (body.sp-light) keep it light via the tokens */
@media (prefers-color-scheme: dark) {
  body:not(.sp-light) .pvs-brand .logo-l { display: none; }
  body:not(.sp-light) .pvs-brand .logo-d { display: block; }
  body:not(.sp-light) .pvs-hd { background: var(--sp-hd-bg, rgba(0,0,0,.8)); }
}
@media (prefers-reduced-motion: reduce) { .pvs-chev { transition: none; } }

/* ── footer: the store's, read live. Black on every theme. ── */
.pvs-ft { background: #000; color: #f5f5f7; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; border-top: 1px solid rgba(255,255,255,.08); padding: 56px 0 32px; margin-top: 64px; clear: both; }
.pvs-ft a { color: inherit; text-decoration: none; }
.pvs-ft-in { max-width: 1600px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); box-sizing: border-box; }
.pvs-ft-mark { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.15); }
.pvs-ft-mark img { height: 48px; width: auto; display: block; }
.pvs-ft-mark p { margin: 0; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: rgba(255,255,255,.55); text-align: right; }
.pvs-ft-grid { display: grid; grid-template-columns: minmax(280px, 2.2fr) repeat(5, 1fr); gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.15); }
.pvs-ft-brand p { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: #d2d2d7; text-wrap: pretty; }
.pvs-ft-brand .biz { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.8; color: #a1a1a6; }
.pvs-ft-brand .biz a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pvs-ft-col { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.pvs-ft-acc summary { list-style: none; } .pvs-ft-acc summary::-webkit-details-marker { display: none; }
.pvs-ft-h { margin: 0 0 14px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); cursor: default; pointer-events: none; }
.pvs-ft-acc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pvs-ft-acc li a { font-size: 13px; line-height: 1.35; color: #f5f5f7; }
.pvs-ft-acc li a:hover { text-decoration: underline; }
.pvs-ft-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 24px; }
.pvs-ft-bottom p { margin: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.pvs-ft-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pvs-ft-bottom nav a { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.pvs-ft-bottom nav a:hover { color: #fff; }
.pvs-ft a:focus-visible { outline: 2px solid #79b8ff; outline-offset: 3px; border-radius: 3px; }
/* iPad: brand row on top, the five groups in three columns */
@media (min-width: 700px) and (max-width: 1099px) {
  .pvs-ft { padding-top: 44px; margin-top: 48px; }
  .pvs-ft-mark { padding-bottom: 32px; margin-bottom: 32px; }
  .pvs-ft-grid { grid-template-columns: repeat(3, 1fr); gap: 36px 32px; }
  .pvs-ft-brand { grid-column: 1 / -1; max-width: 640px; }
}
/* iPhone: brand first, then each group an accordion row (chrome.js closes them; without script they stay open) */
@media (max-width: 699px) {
  .pvs-ft { padding: 36px 0 28px; margin-top: 40px; }
  .pvs-ft-mark { flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 28px; margin-bottom: 28px; }
  .pvs-ft-mark img { height: 36px; } .pvs-ft-mark p { text-align: left; font-size: 11px; letter-spacing: .24em; }
  .pvs-ft-grid { display: block; padding-bottom: 8px; }
  .pvs-ft-brand { margin-bottom: 24px; }
  .pvs-ft-col { display: block; }
  .pvs-ft-acc { border-top: 1px solid rgba(255,255,255,.15); }
  .pvs-ft-col:last-child .pvs-ft-acc:last-child { border-bottom: 1px solid rgba(255,255,255,.15); }
  .pvs-ft-h { display: flex; align-items: center; justify-content: space-between; margin: 0; min-height: 52px; cursor: pointer; pointer-events: auto; }
  .pvs-ft-h::after { content: ""; width: 8px; height: 8px; border: solid rgba(255,255,255,.7); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .18s ease; margin-right: 4px; }
  .pvs-ft-acc[open] .pvs-ft-h::after { transform: rotate(-135deg); }
  .pvs-ft-acc:not([open]) > ul { display: none; }   /* a closed group has no boxes at all (Chromium keeps a closed <details>' content laid out) */
  .pvs-ft-acc ul { gap: 0; padding-bottom: 12px; }
  .pvs-ft-acc li a { display: flex; align-items: center; min-height: 44px; font-size: 15px; }
  .pvs-ft-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ── a BRAND store's ticket (Urnieta) wears its own logo and nothing of PVS: no announcement, no nav, no PVS footer (request.js paintBrand sets data-brand) ── */
html[data-brand]:not([data-brand=""]) .pvs-ann, html[data-brand]:not([data-brand=""]) .pvs-ft, html[data-brand]:not([data-brand=""]) .pvs-hd .bar-nav,
html[data-brand]:not([data-brand=""]) .pvs-corner, html[data-brand]:not([data-brand=""]) .pvs-menu, html[data-brand]:not([data-brand=""]) .pvs-tm, html[data-brand]:not([data-brand=""]) .pvs-brand .logo-d { display: none !important; }
html[data-brand]:not([data-brand=""]) .pvs-brand img.logo-l { aspect-ratio: auto; object-fit: contain; height: auto; max-height: 28px; display: block; }
@media (prefers-color-scheme: dark) { html[data-brand]:not([data-brand=""]) .pvs-brand img.logo-l { display: block !important; filter: invert(1); } }

/* closed menus have no boxes at all (Chromium keeps a closed <details>' content laid out, so it would sit off-screen and be measured) */
.pvs-menu:not([open]) > .pvs-menu-sheet, .pvs-dd:not([open]) > .pvs-dd-panel { display: none; }
@media (max-width: 1099px) { .pvs-ft-bottom nav a { display: inline-flex; align-items: center; min-height: 44px; } }
@media (max-width: 699px) { .pvs-ft-h, .pvs-ft-bottom p, .pvs-ft-bottom nav a, .pvs-ft-mark p { font-size: 12px; } .pvs-ft-brand p { font-size: 15px; } .pvs-ft-acc li a { font-size: 15px; } }