/* Responsive overrides (no JS required).
   The original layout relied on Creatium/PLP scripts to set `screen-xs/sm/...` classes.
   These rules emulate the most important XS behaviors using media queries. */

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
    min-width: 0;
  }

  /* Creatium sets fixed desktop min-widths via `div.area.screen-*`.
     Without JS switching to `screen-xs`, mobile ends up stuck at 1170px+. */
  div.area.screen-lg,
  div.area.screen-md,
  div.area.screen-sm {
    min-width: 0 !important;
  }

  /* Visibility helpers */
  .xs-none {
    display: none !important;
  }

  /* Centering helper used across the markup */
  .xs-force-center {
    text-align: center !important;
  }

  /* Scale helpers that previously depended on `.screen-xs` */
  .xs-scale-60 {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    transform: scale(0.6);
    transform-origin: center top;
  }

  .xs-scale-70 {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    transform: scale(0.7);
    transform-origin: center top;
  }

  .xs-scale-80 {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    transform: scale(0.8);
    transform-origin: center top;
  }

  /* Ensure long text can wrap instead of forcing horizontal overflow */
  .textable,
  .textable * {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Grid: stack columns on mobile */
  .grid .gridwrap,
  .grid.xs-wrap .gridwrap {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  .grid .col,
  .grid.xs-wrap .col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Some columns have fixed pixel widths inline */
  .grid .col[style*="width"] {
    width: 100% !important;
  }

  /* Elements grid (product examples, etc.) */
  .s-elements-grid.use-table {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  .s-elements-grid.use-table .s-elements-grid__cell {
    width: 100% !important;
  }

  /* Keep images within viewport */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Avoid horizontal overflow caused by fixed container paddings */
  .area,
  .area > .wrapper1,
  .area > .wrapper1 > .wrapper2,
  .node.section > .wrapper1,
  .node.section > .wrapper1 > .wrapper2 {
    width: 100% !important;
    max-width: 100% !important;
  }

  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Modals: prevent fixed-width overflow if they ever become visible */
  .modal .modal-dialog {
    width: auto !important;
    max-width: 95% !important;
  }
}