/* Base responsive shared by public pages, administration and display screens. */
:root { --viewport-gutter: clamp(12px, 3vw, 32px); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body:not(.publisher-screen):not(.s2w-tv) { min-width: 0; overflow-x: hidden; }
img, picture, video, canvas, svg { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; font: inherit; }
textarea { min-height: 5rem; }
.container, .publisher-page, .s2w-page, .orphan-page { min-width: 0; }
.table-container, .products-table, .categories-table, .s2w-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) {
  .container { width: min(100% - (var(--viewport-gutter) * 2), var(--page-max-width, 100%)); }
  .navbar, .nav-links, .user-info, .actions, .btn-goup-h, .admin-actions, .form-actions, .pagination { min-width: 0; flex-wrap: wrap; }
  .navbar .user-info { overflow-wrap: anywhere; }
  .card, .publisher-panel, .publisher-panel-card, .s2w-card { min-width: 0; }
  .modal-content { margin: auto; }
}
@media (max-width: 480px) {
  :root { --viewport-gutter: 10px; }
  .container { padding-inline: 14px; }
  .card, .publisher-panel, .publisher-panel-card, .s2w-card { padding: 16px; border-radius: 16px; }
  .modal-content { border-radius: 16px; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .navbar { padding-block: 8px; }
  .container { margin-block: 8px; }
  .footer { padding-block: 8px; }
  .modal { align-items: flex-start; overflow-y: auto; }
  .modal-content { max-height: calc(100dvh - 16px); }
}
@media (hover: none) and (pointer: coarse) { button, .btn, .button, input[type="submit"], input[type="button"], a { min-height: 44px; } }
body.publisher-screen, body.s2w-tv { min-height: 100dvh; }
body.publisher-screen, .publisher-screen__shell { height: 100dvh; }
@media (orientation: portrait) {
  body.publisher-screen .publisher-screen__shell { grid-template-rows: auto 1fr auto; min-height: 100dvh; height: auto; }
  body.publisher-screen .publisher-screen__content { overflow-y: auto; }
}
@media (orientation: landscape) and (max-height: 540px) {
  body.publisher-screen .publisher-screen__topbar { min-height: 48px; height: 12vh; }
  body.publisher-screen .publisher-screen__content { overflow-y: auto; }
}