/* Loaded after component styles; existing modal behaviour stays with each component. */
@media (max-width: 760px) {
  :is(.bsafe-cookie-dialog, .b2b-dialog, .team-quote__dialog, .protected-email-dialog, .product-guide, .product-lightbox, .category-drawer)[open] {
    --bsafe-panel-top: calc(16px + env(safe-area-inset-top, 0px));
    --bsafe-panel-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    --bsafe-panel-left: max(16px, env(safe-area-inset-left, 0px));
    --bsafe-panel-right: max(16px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
    position: fixed;
    inset: 0 0 0 auto;
    width: calc(100% - 12px);
    min-width: 0;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid #b8c1ba;
    border-radius: 0;
    background: #f5f6f2;
    color: #242a2b;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-wrap: anywhere;
    box-shadow: -12px 0 36px rgb(10 20 18 / 20%);
    animation: bsafe-mobile-panel-in 200ms ease-out;
  }

  :is(.bsafe-cookie-dialog, .b2b-dialog, .team-quote__dialog, .protected-email-dialog, .product-guide, .product-lightbox, .category-drawer)::backdrop {
    background: rgb(10 20 18 / 52%);
    backdrop-filter: none;
  }

  :is(.bsafe-cookie-dialog, .b2b-dialog, .team-quote__dialog, .protected-email-dialog, .product-guide, .product-lightbox, .category-drawer) button {
    min-width: 44px;
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  :is(.bsafe-cookie-dialog, .b2b-dialog, .team-quote__dialog, .protected-email-dialog, .product-guide, .product-lightbox, .category-drawer) :focus-visible {
    outline: 3px solid #506c14;
    outline-offset: 3px;
  }

  /* These dialogs scroll as a whole; no form fields or actions are clipped. */
  .bsafe-cookie-dialog[open] {
    padding: var(--bsafe-panel-top) var(--bsafe-panel-right) var(--bsafe-panel-bottom) var(--bsafe-panel-left);
    scroll-padding-block: 20px;
  }

  .bsafe-cookie-dialog > form {
    min-width: 0;
    margin: 0;
  }

  .bsafe-cookie-dialog__actions {
    background: #f5f6f2;
    box-shadow: 0 -8px 12px rgb(245 246 242 / 94%);
  }

  .b2b-dialog-header {
    position: sticky;
    top: 0;
    z-index: 2;
    align-items: flex-start;
    padding: var(--bsafe-panel-top) var(--bsafe-panel-right) 16px var(--bsafe-panel-left);
    border-bottom: 1px solid #d3dad4;
    background: #f5f6f2;
  }

  .b2b-dialog-header > :first-child {
    min-width: 0;
  }

  .b2b-dialog-header button {
    flex: none;
  }

  .b2b-dialog > .b2b-confirmation-form {
    min-width: 0;
    margin: 0;
    padding: 20px var(--bsafe-panel-right) 0 var(--bsafe-panel-left);
  }

  .b2b-dialog > .b2b-decline {
    margin: 16px var(--bsafe-panel-right) var(--bsafe-panel-bottom) var(--bsafe-panel-left);
    max-width: calc(100% - var(--bsafe-panel-left) - var(--bsafe-panel-right));
  }

  .protected-email-dialog__content {
    min-width: 0;
    padding: var(--bsafe-panel-top) var(--bsafe-panel-right) var(--bsafe-panel-bottom) var(--bsafe-panel-left);
  }

  .protected-email-dialog__close {
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: var(--bsafe-panel-right);
  }

  .protected-email-dialog__brand {
    min-height: 44px;
    margin-right: 56px;
    display: flex;
    align-items: center;
  }

  /* The existing team form keeps its independently scrolling body and footer. */
  .team-quote__dialog[open],
  .product-guide[open] {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
  }

  .team-quote__header,
  .product-guide__header {
    flex: none;
    gap: 12px;
    padding: var(--bsafe-panel-top) var(--bsafe-panel-right) 16px var(--bsafe-panel-left);
    border-bottom: 1px solid #d3dad4;
    background: #f5f6f2;
  }

  .team-quote__header > :first-child,
  .product-guide__header > :first-child {
    min-width: 0;
  }

  .team-quote__dialog > form {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
  }

  .team-quote__body,
  .product-guide__body {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    padding: 20px var(--bsafe-panel-right) 20px var(--bsafe-panel-left);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 20px;
  }

  .team-quote__footer {
    padding: 12px var(--bsafe-panel-right) var(--bsafe-panel-bottom) var(--bsafe-panel-left);
    background: #f5f6f2;
  }

  .team-quote__success,
  .product-guide__body {
    padding-bottom: var(--bsafe-panel-bottom);
  }

  /* Only controls with an existing X and an accessible name become circular. */
  .team-quote__close,
  .protected-email-dialog__close,
  .product-guide__close {
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #9aa69f;
    border-radius: 50%;
    background: transparent;
    color: #242a2b;
  }

  .team-quote__close {
    gap: 0;
    font-size: 0;
  }

  .team-quote__close span {
    font-size: 1.5rem;
  }

  .category-drawer__panel {
    height: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    padding: var(--bsafe-panel-top) var(--bsafe-panel-right) var(--bsafe-panel-bottom) var(--bsafe-panel-left);
  }

  .category-drawer__head {
    flex: none;
  }

  .category-drawer__head > :first-child {
    min-width: 0;
  }

  .category-drawer__list {
    min-width: 0;
    overflow-x: hidden;
  }

  /* Keep the image stage and its touch-action/transform rules intact. A short
     viewport scrolls the panel instead of squeezing away the photograph. */
  .product-lightbox[open] {
    gap: 12px;
    padding: var(--bsafe-panel-top) var(--bsafe-panel-right) var(--bsafe-panel-bottom) var(--bsafe-panel-left);
  }

  .product-lightbox__header,
  .product-lightbox__toolbar,
  .product-lightbox > p,
  .product-lightbox > a {
    flex: none;
    min-width: 0;
  }

  .product-lightbox__header {
    align-items: flex-start;
  }

  .product-lightbox__header > :first-child {
    min-width: 0;
  }

  .product-lightbox__header button {
    flex: none;
  }

  .product-lightbox__viewport {
    flex: 1 0 160px;
    min-width: 0;
    min-height: 160px;
  }

  .product-lightbox > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  @keyframes bsafe-mobile-panel-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    :is(.bsafe-cookie-dialog, .b2b-dialog, .team-quote__dialog, .protected-email-dialog, .product-guide, .product-lightbox, .category-drawer)[open] {
      animation: none;
    }
  }
}