/* Prove di branding: PNG originale, opacità applicata soltanto alla decorazione. */
.panda-surface { position: relative; isolation: isolate; overflow: clip; }
.panda-surface::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background-image: url('assets/panda-originale.png'); background-repeat: no-repeat; }
[data-panda="watermark"] .panda-surface::before { background-size: 480px auto; background-position: calc(100% + 65px) center; opacity: .075; }
[data-panda="pattern"] .panda-surface::before { background-size: 145px 145px; background-repeat: space; opacity: .045; }
[data-panda="corners"] .panda-surface { background-color: #edf6fc; }
[data-panda="corners"] .panda-surface::before { background-image: url('assets/panda-originale.png'), url('assets/panda-originale.png'); background-size: 270px auto, 340px auto; background-position: -90px calc(100% + 60px), calc(100% + 80px) -70px; opacity: .075; }
.panda-surface .department-card, .panda-surface .retail-brand-names button { background-color: #fff; }
.panda-surface.retail-footer { border-top: 1px solid #d7e2ee; }
.panda-preview-bar { background: #edf5fa; border-bottom: 1px solid #d7e2ee; }
.panda-preview-bar > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-block: 10px; }
.panda-preview-bar a { font-size: 13px; font-weight: 800; padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 24px; }
.panda-preview-bar nav { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.panda-preview-bar [aria-current="true"] { background: #285eb0; color: white; }
.panda-preview-bar a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
  [data-panda="watermark"] .panda-surface::before { background-size: 300px auto; background-position: calc(100% + 100px) 36px; }
  [data-panda="pattern"] .panda-surface::before { background-size: 100px 100px; opacity: .04; }
  [data-panda="corners"] .panda-surface::before { background-size: 180px auto, 220px auto; background-position: -75px calc(100% + 25px), calc(100% + 90px) -30px; }
  .panda-preview-bar > div { gap: 3px 8px; }
  .panda-preview-bar nav { width: 100%; margin: 0; order: 1; }
  .panda-preview-bar a { padding-inline: 8px; font-size: 12px; }
}
@media print { .panda-preview-bar { display: none; } }