/*
 * Responsive layer for the isolated XL-Toner test shop.
 *
 * The historical desktop stylesheet is intentionally left untouched. This
 * file only removes fixed-width assumptions at narrower viewports and keeps
 * the established desktop presentation unchanged above 1024px.
 */

/* The Hagen store is a first-class entry point on the homepage. The compact
 * strip stays above the product search without competing with it. */
body[data-controller="site"][data-action="index"] #location-hagen-teaser {
  box-sizing: border-box;
  width: 100%;
  max-width: 1000px;
  margin: 12px auto;
  padding: 0 20px;
  border: 0;
  background: transparent;
}

body[data-controller="site"][data-action="index"] .location-hagen-teaser-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  min-height: 68px;
  padding: 10px 12px 10px 14px;
  border: 1px solid #d2e5ec;
  border-left: 4px solid #58a849;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(31, 67, 82, 0.11);
}

body[data-controller="site"][data-action="index"] .location-hagen-teaser-copy {
  min-width: 0;
}

body[data-controller="site"][data-action="index"] .location-hagen-teaser-label {
  display: block;
  margin-bottom: 1px;
  color: #448c38;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

body[data-controller="site"][data-action="index"] #location-hagen-teaser-title {
  margin: 0 0 1px;
  color: #2d88a9;
  font-size: 19px;
  line-height: 1.15;
}

body[data-controller="site"][data-action="index"] .location-hagen-teaser-copy p,
body[data-controller="site"][data-action="index"] .location-hagen-teaser-hours {
  margin: 0;
  color: #334b55;
  font-size: 13px;
  line-height: 1.3;
}

body[data-controller="site"][data-action="index"] .location-hagen-teaser-hours {
  padding-left: 16px;
  border-left: 1px solid #d2e5ec;
}

body[data-controller="site"][data-action="index"] .location-hagen-teaser-hours strong,
body[data-controller="site"][data-action="index"] .location-hagen-teaser-hours span {
  display: block;
}

body[data-controller="site"][data-action="index"] .location-hagen-teaser-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #78b856;
  border-radius: 6px;
  background: linear-gradient(#caf2aa, #9ddd72);
  box-shadow: 0 2px 0 #5a963f, 0 4px 9px rgba(69, 125, 48, 0.23);
  color: #24521d;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

body[data-controller="site"][data-action="index"] .location-hagen-teaser-link::after {
  margin-left: 9px;
  content: "\203a";
  font-size: 22px;
  line-height: 0;
}

body[data-controller="site"][data-action="index"] .location-hagen-teaser-link:hover,
body[data-controller="site"][data-action="index"] .location-hagen-teaser-link:focus {
  border-color: #68aa47;
  background: linear-gradient(#d8f7bd, #aae47e);
  box-shadow: 0 2px 0 #4e8935, 0 5px 12px rgba(69, 125, 48, 0.28);
  color: #1e4818;
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  body[data-controller="site"][data-action="index"] #location-hagen-teaser {
    margin: 10px auto;
    padding: 0 16px;
  }

  body[data-controller="site"][data-action="index"] .location-hagen-teaser-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 14px;
    padding: 12px;
  }

  body[data-controller="site"][data-action="index"] .location-hagen-teaser-copy {
    grid-column: 1 / -1;
  }

  body[data-controller="site"][data-action="index"] #location-hagen-teaser-title {
    font-size: 20px;
  }

  body[data-controller="site"][data-action="index"] .location-hagen-teaser-copy p,
  body[data-controller="site"][data-action="index"] .location-hagen-teaser-hours {
    font-size: 14px;
  }

  body[data-controller="site"][data-action="index"] .location-hagen-teaser-hours {
    padding-left: 0;
    border-left: 0;
  }
}

@media screen and (max-width: 560px) {
  body[data-controller="site"][data-action="index"] .location-hagen-teaser-inner {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-direction: column;
  }

  body[data-controller="site"][data-action="index"] .location-hagen-teaser-link {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
  }
}

@media screen and (max-width: 1024px) {
  html {
    min-width: 0 !important;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
  }

  body {
    min-width: 0;
  }

  #staging-environment-banner,
  #page,
  #nav-container,
  #nav-container .navbar-inner {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
  }

  .bottom-shadow,
  .bottom-shadow > div {
    left: 0 !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
  }

  #header-slogan {
    box-sizing: border-box;
    max-width: 100%;
    margin-right: 0 !important;
  }

  .container-fluid {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 16px;
    padding-left: 16px;
  }

  .row,
  .row-fluid,
  [class*="span"] {
    min-width: 0;
  }

  img,
  video,
  canvas,
  iframe {
    max-width: 100%;
  }

  img,
  video {
    height: auto;
  }

  input,
  select,
  textarea,
  button {
    box-sizing: border-box;
    max-width: 100%;
  }

  table {
    max-width: 100%;
  }

  #staging-environment-banner {
    overflow-wrap: anywhere;
  }

  #quickbar #quick-dropdowns .chzn-container {
    box-sizing: border-box;
    width: 48% !important;
    max-width: 48%;
  }

  #quickbar #quick-dropdowns .chzn-drop,
  #quickbar #quick-dropdowns .chzn-search input,
  .chzn-container,
  .chzn-drop,
  .chzn-search input {
    box-sizing: border-box;
    max-width: 100%;
  }

  #savingOptionsModal,
  #merchant-overlay,
  #goodie-overlay,
  #site-popup {
    box-sizing: border-box;
    left: 16px;
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    margin-left: 0;
  }

  #savingOptionsModal .modal-body,
  #merchant-overlay .modal-body,
  #goodie-overlay .modal-body,
  #site-popup .modal-body {
    max-height: calc(100vh - 150px);
    overflow: auto;
  }

  #item-details-popover,
  #goody-details-popover,
  #goody-details-overlay-popover {
    max-width: calc(100vw - 32px);
  }
}

/* Tablet portrait: keep the global shell compact and give commerce content
 * the full width instead of squeezing it into legacy nested columns. */
@media screen and (max-width: 900px) {
  body[data-controller="item"][data-action="index"] #main > .container-fluid > .row-fluid > .span9,
  body[data-controller="item"][data-action="index"] #main > .container-fluid > .row-fluid > .span3,
  body[data-controller="item"][data-action="index"] #main .span9 > .row-fluid > .span6,
  body[data-controller="order"][data-action="checkout"] #order-form > .row-fluid > .span4 {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  body[data-controller="item"][data-action="index"] #main .span9 > .row-fluid > .span6 + .span6,
  body[data-controller="order"][data-action="checkout"] #order-form > .row-fluid > .span4 + .span4 {
    margin-top: 16px;
  }

  body[data-controller="item"][data-action="index"] #mini-cart {
    position: static !important;
    top: auto !important;
    width: 100%;
    margin-top: 20px;
  }

  body[data-controller="item"][data-action="index"] #results .items table,
  body[data-controller="item"][data-action="index"] #results .items tbody,
  body[data-controller="item"][data-action="index"] #results .items tr,
  body[data-controller="item"][data-action="index"] #results .items td,
  body[data-controller="item"][data-action="search"] #search-results table,
  body[data-controller="item"][data-action="search"] #search-results tbody,
  body[data-controller="item"][data-action="search"] #search-results tr,
  body[data-controller="item"][data-action="search"] #search-results td,
  body[data-controller="cart"][data-action="index"] #main .items,
  body[data-controller="cart"][data-action="index"] #main .items tbody,
  body[data-controller="cart"][data-action="index"] #main .items tr,
  body[data-controller="cart"][data-action="index"] #main .items th,
  body[data-controller="cart"][data-action="index"] #main .items td {
    box-sizing: border-box;
  }

  body[data-controller="item"][data-action="index"] #results .items table,
  body[data-controller="item"][data-action="index"] #results .items tbody,
  body[data-controller="item"][data-action="search"] #search-results table,
  body[data-controller="item"][data-action="search"] #search-results tbody {
    display: block;
    width: 100%;
  }

  body[data-controller="item"][data-action="index"] #results .items tr {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) minmax(145px, auto);
    gap: 8px 12px;
    width: 100%;
    padding: 12px;
    border-bottom: 1px solid #d7e9f0;
  }

  body[data-controller="item"][data-action="index"] #results .items td {
    display: block;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
    text-align: left;
  }

  body[data-controller="item"][data-action="index"] #results .items td:nth-child(1) {
    grid-row: 1 / span 3;
    grid-column: 1;
  }

  body[data-controller="item"][data-action="index"] #results .items td:nth-child(2) {
    grid-row: 1;
    grid-column: 2;
    overflow-wrap: anywhere;
  }

  body[data-controller="item"][data-action="index"] #results .items td:nth-child(3) {
    grid-row: 2;
    grid-column: 2;
  }

  body[data-controller="item"][data-action="index"] #results .items td:nth-child(4) {
    grid-row: 1 / span 2;
    grid-column: 3;
    align-self: center;
  }

  body[data-controller="item"][data-action="index"] #results .items td:nth-child(5) {
    grid-row: 3;
    grid-column: 2 / 4;
  }

  body[data-controller="item"][data-action="index"] #results .items .image,
  body[data-controller="item"][data-action="index"] #results .items .image img {
    box-sizing: border-box;
    width: 100%;
    max-width: 80px;
    height: auto;
  }

  body[data-controller="item"][data-action="index"] #results .items form.add-to-cart {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }

  body[data-controller="item"][data-action="index"] #results .items .btn-buy {
    min-width: 180px;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) minmax(190px, auto);
    gap: 8px 12px;
    width: 100%;
    padding: 12px;
    border-bottom: 1px solid #d7e9f0;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item td {
    display: block;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item .image {
    grid-row: 1 / span 2;
    grid-column: 1;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item .short-desc {
    grid-row: 1;
    grid-column: 2;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item .long-desc {
    grid-row: 2;
    grid-column: 2;
    overflow-wrap: anywhere;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item .add-to-cart-wrapper {
    grid-row: 1 / span 2;
    grid-column: 3;
    align-self: center;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item img {
    width: 80px;
    max-width: 100%;
    height: auto;
  }

  body[data-controller="cart"][data-action="index"] #main .items {
    display: block;
    width: 100%;
    table-layout: auto;
    border-spacing: 0;
  }

  body[data-controller="cart"][data-action="index"] #main .items > tbody {
    display: block;
  }

  body[data-controller="cart"][data-action="index"] #main .items > tbody > tr:first-child {
    display: none;
  }

  body[data-controller="cart"][data-action="index"] #main .items tr.item {
    position: relative;
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) repeat(3, minmax(95px, auto));
    gap: 8px 12px;
    width: 100%;
    margin-bottom: 12px;
    padding: 12px 52px 12px 12px;
    border: 1px solid #d7e9f0;
    border-radius: 5px;
    background: #fff;
  }

  body[data-controller="cart"][data-action="index"] #main .items tr.item td {
    display: block;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
    text-align: left;
  }

  body[data-controller="cart"][data-action="index"] #main .items tr.item td > div {
    padding: 0;
  }

  body[data-controller="cart"][data-action="index"] #main .items tr.item .image-column {
    grid-row: 1 / span 2;
    grid-column: 1;
  }

  body[data-controller="cart"][data-action="index"] #main .items tr.item .description-column {
    grid-row: 1;
    grid-column: 2 / 6;
    overflow-wrap: anywhere;
  }

  body[data-controller="cart"][data-action="index"] #main .items tr.item .number-column {
    grid-row: 2;
    grid-column: 2;
    white-space: normal;
  }

  body[data-controller="cart"][data-action="index"] #main .items tr.item .unit-price-column {
    grid-row: 2;
    grid-column: 3;
  }

  body[data-controller="cart"][data-action="index"] #main .items tr.item .count-column {
    grid-row: 2;
    grid-column: 4;
  }

  body[data-controller="cart"][data-action="index"] #main .items tr.item .total-price-column {
    grid-row: 2;
    grid-column: 5;
  }

  body[data-controller="cart"][data-action="index"] #main .items tr.item .remove-column {
    position: absolute;
    top: 8px;
    right: 8px;
  }

  body[data-controller="cart"][data-action="index"] #main .items tr.totals,
  body[data-controller="cart"][data-action="index"] #main .items tr.free-shipping,
  body[data-controller="cart"][data-action="index"] #main .items tr.empty-notice {
    display: table;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
    line-height: 1.45;
  }

  h1 {
    font-size: 24px;
    line-height: 1.2;
  }

  h2 {
    font-size: 20px;
    line-height: 1.25;
  }

  h3 {
    font-size: 18px;
    line-height: 1.3;
  }

  .container-fluid {
    padding-right: 12px;
    padding-left: 12px;
  }

  .row {
    margin-left: 0;
  }

  .row-fluid > [class*="span"],
  .row > [class*="span"] {
    float: none !important;
    width: 100% !important;
    min-height: 0;
    margin-left: 0 !important;
  }

  .row-fluid > [class*="span"] + [class*="span"] {
    margin-top: 12px;
  }

  .form-horizontal .control-group > label {
    float: none;
    width: auto;
    padding-top: 0;
    text-align: left;
  }

  .form-horizontal .controls {
    margin-left: 0;
  }

  .form-horizontal .form-actions {
    padding: 14px 12px;
  }

  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    min-height: 44px;
    font-size: 16px;
    line-height: 1.25;
  }

  button,
  .btn,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn-buy {
    min-height: 44px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
  }

  label.checkbox,
  label.radio,
  .search-filter label {
    box-sizing: border-box;
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #staging-environment-banner {
    padding: 8px 10px;
    border-bottom-width: 4px;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.02em;
  }

  #nav-container .container-fluid {
    padding: 0;
  }

  #nav-sub,
  #nav-main {
    width: 100%;
  }

  #nav-sub .btn-toolbar {
    display: grid;
    float: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin: 0 !important;
  }

  #nav-sub .btn-toolbar .btn-group {
    float: none;
    width: auto;
    margin: 0 !important;
  }

  #nav-sub .btn-toolbar .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 8px;
    white-space: normal;
  }

  #nav-main ol {
    display: flex;
    float: none !important;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 0 !important;
    padding: 4px;
  }

  #nav-main ol > li {
    float: none;
  }

  #nav-main ol > li > a {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 4px 7px;
  }

  #nav-main ol .divider-vertical {
    display: none;
  }

  #header .container-fluid {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  #header .row-fluid,
  #header .row-fluid > div {
    height: auto !important;
  }

  #header-logo {
    text-align: center;
  }

  #header-logo img {
    width: auto;
    max-width: 210px;
    max-height: 70px;
  }

  #header #hotline-image {
    display: none;
  }

  #header .row-fluid #quick-search {
    display: block;
    float: none !important;
    box-sizing: border-box;
    width: 100%;
    margin: 0 !important;
  }

  #quick-search form,
  #product-search form .content,
  #search-box form {
    display: flex;
    width: 100%;
  }

  #header #quick-search-input,
  body[data-controller="site"][data-action="index"] #product-search-input,
  body[data-controller="item"][data-action="search"] #search-box input[type="search"] {
    float: none;
    flex: 1 1 auto;
    box-sizing: border-box;
    width: auto !important;
    min-width: 0;
    height: 44px !important;
    margin: 0 !important;
  }

  #header #quick-search-submit,
  body[data-controller="site"][data-action="index"] #product-search-submit,
  body[data-controller="item"][data-action="search"] #search-box input[type="submit"] {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: auto !important;
    min-width: 84px;
    height: 44px !important;
    margin: 0 !important;
  }

  #header .seals {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    order: 3;
    margin-top: 10px;
  }

  #header .seals > div {
    position: static;
    width: auto;
    min-width: 62px;
    margin: 0 5px;
    text-align: center;
  }

  #header .seals img {
    width: auto;
    max-width: 70px;
    max-height: 58px;
  }

  #header-slogan,
  #header-hotline {
    margin: 0 !important;
    padding: 4px 0 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  #quickbar {
    height: auto;
    margin-bottom: 12px;
  }

  #quickbar .container-fluid {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  #quickbar-frontpage {
    display: none;
  }

  #quickbar #quick-dropdowns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  #quickbar #quick-dropdowns select {
    display: block;
    width: 100%;
  }

  #quickbar #quick-dropdowns .chzn-container,
  #quickbar #quick-dropdowns #quick-vendor-dropdown + div,
  #quickbar #quick-dropdowns #quick-model-dropdown + div {
    float: none;
    width: 100% !important;
    max-width: 100%;
    margin: 0;
  }

  #quickbar #quick-dropdowns .chzn-single {
    box-sizing: border-box;
    min-height: 44px;
    margin-top: 0;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  #quickbar #cart-status {
    min-height: 44px;
    line-height: 1.3;
  }

  #quickbar #cart-status > div {
    position: relative;
    width: 100%;
  }

  #quickbar #cart-status .empty .info,
  #quickbar #cart-status .full .info {
    box-sizing: border-box;
    min-height: 44px;
    padding-top: 9px;
    padding-bottom: 9px;
    line-height: 1.3;
  }

  #quickbar #cart-status .full .buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #quickbar #cart-status .full .buttons a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
  }

  #breadcrumbs .container-fluid {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  #breadcrumbs ol.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    overflow-wrap: anywhere;
  }

  #main {
    min-width: 0;
  }

  #main table {
    width: 100%;
    max-width: 100%;
  }

  #service-links .row-fluid > [class*="span"],
  #safe-service-links .row-fluid > [class*="span"],
  footer .row-fluid > [class*="span"] {
    margin-top: 0;
    margin-bottom: 12px;
  }

  #service-links h2,
  #safe-service-links,
  footer {
    text-align: center;
  }

  footer p a {
    display: inline-block;
    min-height: 36px;
    padding: 3px 6px;
  }

  #quick-login,
  #quick-login.use-overlay {
    position: fixed !important;
    z-index: 10001;
    top: 50% !important;
    right: 12px !important;
    left: 12px !important;
    box-sizing: border-box;
    width: auto !important;
    max-width: 420px;
    max-height: calc(100vh - 24px);
    margin: 0 auto !important;
    padding: 20px 16px;
    overflow: auto;
    transform: translateY(-50%);
  }

  #quick-login form,
  #quick-login .info,
  #quick-login form label,
  #quick-login form input[type="text"],
  #quick-login form input[type="password"],
  #quick-login .captcha-container .image-wrapper {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  #quick-login form .forgot-password {
    position: static;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  #quick-login .close {
    width: 44px;
    min-height: 44px;
  }

  body[data-controller="site"][data-action="index"] #product-selection h1 {
    margin: 18px 0;
    font-size: 28px;
    line-height: 1.15;
  }

  body[data-controller="site"][data-action="index"] #product-selection .span5 > div {
    margin-bottom: 18px;
  }

  body[data-controller="site"][data-action="index"] #product-selection .icon-pointer-left,
  body[data-controller="site"][data-action="index"] #product-selection .icon-pointer-right {
    display: none;
  }

  body[data-controller="site"][data-action="index"] #product-selection .icon-frog,
  body[data-controller="site"][data-action="index"] #product-selection .icon-printer {
    display: none;
  }

  body[data-controller="site"][data-action="index"] #product-search form,
  body[data-controller="site"][data-action="index"] #product-dropdowns form {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin-top: 0 !important;
  }

  body[data-controller="site"][data-action="index"] #product-selection #product-selection-info .warranty {
    position: static;
    float: none;
    display: block;
    box-sizing: border-box;
    width: 180px;
    max-width: 100%;
    margin: 0 auto !important;
    text-align: center;
  }

  body[data-controller="site"][data-action="index"] #product-selection .span5 > div form .content {
    box-sizing: border-box;
    min-height: 0;
    padding: 14px;
  }

  body[data-controller="site"][data-action="index"] #product-selection .chzn-container,
  body[data-controller="site"][data-action="index"] #product-selection .chzn-drop,
  body[data-controller="site"][data-action="index"] #product-selection .chzn-search input {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
  }

  body[data-controller="site"][data-action="index"] #product-selection .chzn-single {
    box-sizing: border-box;
    min-height: 44px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  #quickbar .chzn-container .chzn-drop,
  body[data-controller="site"][data-action="index"] #product-selection .chzn-container .chzn-drop {
    top: 100%;
  }

  body[data-controller="site"][data-action="index"] #top-vendors {
    height: auto;
    background: none;
  }

  body[data-controller="site"][data-action="index"] #top-vendors-container ul,
  body[data-controller="site"][data-action="index"] #top-vendors-container ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
  }

  body[data-controller="site"][data-action="index"] #top-vendors-container li,
  body[data-controller="site"][data-action="index"] #top-vendors-container #top-vendors li a {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
  }

  body[data-controller="site"][data-action="index"] #top-vendors-container #top-vendors li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    height: auto;
    padding: 8px;
    border: 1px solid #d7e9f0;
    border-radius: 4px;
    background: none;
    color: #3579ae;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
  }

  body[data-controller="printer"][data-action="index"] #nav-printer {
    margin-bottom: 16px;
  }

  body[data-controller="printer"][data-action="index"] #main .pane .content {
    padding: 12px;
  }

  body[data-controller="printer"][data-action="index"] #main ol {
    margin-left: 0;
  }

  body[data-controller="printer"][data-action="index"] #nav-printer ol,
  body[data-controller="printer"][data-action="index"] #content-printer ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
  }

  body[data-controller="printer"][data-action="index"] #nav-printer li,
  body[data-controller="printer"][data-action="index"] #content-printer ol li {
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    list-style-position: inside;
  }

  body[data-controller="printer"][data-action="index"] #nav-printer a,
  body[data-controller="printer"][data-action="index"] #content-printer a {
    display: flex;
    align-items: center;
    min-height: 44px;
    overflow-wrap: anywhere;
  }

  body[data-controller="item"][data-action="search"] #search-info > span {
    display: block;
    overflow-wrap: anywhere;
  }

  body[data-controller="item"][data-action="search"] #search-filters {
    padding: 12px;
  }

  body[data-controller="item"][data-action="search"] #search-filters .search-filter,
  body[data-controller="item"][data-action="search"] #search-filters #category-search-filters,
  body[data-controller="item"][data-action="search"] #search-filters #type-search-filters,
  body[data-controller="item"][data-action="search"] #search-filters #vendor-search-filters {
    float: none;
    clear: both;
    box-sizing: border-box;
    width: 100%;
  }

  body[data-controller="item"][data-action="search"] #sort-order-wrapper,
  body[data-controller="item"][data-action="search"] #sort-order-wrapper label,
  body[data-controller="item"][data-action="search"] #sort-order {
    float: none;
    display: block;
    box-sizing: border-box;
    width: 100%;
  }

  body[data-controller="item"][data-action="search"] #item-details-popover {
    display: none !important;
  }

  body[data-controller="item"][data-action="index"] #details,
  body[data-controller="item"][data-action="index"] #details-body-copy,
  body[data-controller="item"][data-action="index"] #compatible-printers {
    box-sizing: border-box;
    max-width: 100%;
  }

  body[data-controller="item"][data-action="index"] #details .image img,
  body[data-controller="item"][data-action="index"] #details img[itemprop="image"] {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
  }

  body[data-controller="item"][data-action="index"] #details form.add-to-cart,
  body[data-controller="item"][data-action="index"] #details form.add-to-cart .buy {
    box-sizing: border-box;
    width: 100%;
  }

  body[data-controller="item"][data-action="index"] #details form.add-to-cart .btn-buy {
    width: 100%;
  }

  body[data-controller="item"][data-action="index"] #mini-cart .items .item .item-wrapper {
    box-sizing: border-box;
    padding-right: 52px;
  }

  body[data-controller="item"][data-action="index"] #mini-cart .items .item .count-and-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: auto;
  }

  body[data-controller="item"][data-action="index"] #mini-cart .items .item .description {
    display: block;
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    margin: 8px 0 0;
  }

  body[data-controller="item"][data-action="index"] #mini-cart .items .item .count,
  body[data-controller="cart"][data-action="index"] #main .items tr.item .count-column .count,
  body[data-controller="order"][data-action="checkout"] #cart tr.item .count-column .count {
    box-sizing: border-box;
    width: 44px !important;
    min-width: 44px;
    height: 44px !important;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  body[data-controller="item"][data-action="index"] #mini-cart .items .item .inc,
  body[data-controller="item"][data-action="index"] #mini-cart .items .item .dec,
  body[data-controller="item"][data-action="index"] #mini-cart .items .item .remove,
  body[data-controller="cart"][data-action="index"] #main .items tr.item .count-column .inc,
  body[data-controller="cart"][data-action="index"] #main .items tr.item .count-column .dec,
  body[data-controller="cart"][data-action="index"] #main .items tr.item .remove-column .remove,
  body[data-controller="order"][data-action="checkout"] #cart tr.item .count-column .inc,
  body[data-controller="order"][data-action="checkout"] #cart tr.item .count-column .dec,
  body[data-controller="order"][data-action="checkout"] #cart tr.item .total-price-column .remove {
    display: inline-flex !important;
    position: static;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px !important;
    min-width: 44px;
    height: 44px !important;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid #aaa;
    border-radius: 4px;
    background-color: #fff;
    background-image: none !important;
    color: #333;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  body[data-controller="item"][data-action="index"] #mini-cart .items .item .inc::before,
  body[data-controller="cart"][data-action="index"] #main .items tr.item .count-column .inc::before,
  body[data-controller="order"][data-action="checkout"] #cart tr.item .count-column .inc::before {
    content: "+";
  }

  body[data-controller="item"][data-action="index"] #mini-cart .items .item .dec::before,
  body[data-controller="cart"][data-action="index"] #main .items tr.item .count-column .dec::before,
  body[data-controller="order"][data-action="checkout"] #cart tr.item .count-column .dec::before {
    content: "\2212";
  }

  body[data-controller="item"][data-action="index"] #mini-cart .items .item .remove::before,
  body[data-controller="order"][data-action="checkout"] #cart tr.item .total-price-column .remove::before {
    content: "\00d7";
  }

  body[data-controller="item"][data-action="index"] #mini-cart .items .item .remove {
    position: absolute;
    top: 6px;
    right: 6px;
  }

  body[data-controller="item"][data-action="index"] #mini-cart .items .item .inc,
  body[data-controller="item"][data-action="index"] #mini-cart .items .item .dec {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: none;
  }

  body[data-controller="cart"][data-action="index"] #main .items tr.item .count-column > div,
  body[data-controller="order"][data-action="checkout"] #cart tr.item .count-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    width: auto;
    margin: 0;
  }

  body[data-controller="item"][data-action="index"] #compatible-printers a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    overflow-wrap: anywhere;
  }

  body[data-controller="item"][data-action="index"] #goodie-carousel-wrapper,
  body[data-controller="item"][data-action="index"] .checkout-voucher-note,
  body[data-controller="order"][data-action="checkout"] .checkout-voucher-note {
    position: static !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    margin: 8px 0 0 !important;
  }

  body[data-controller="cart"][data-action="index"] #main .buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-controller="cart"][data-action="index"] #main .buttons .btn {
    float: none !important;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
  }

  body[data-controller="cart"][data-action="index"] #main .items tr.totals td,
  body[data-controller="cart"][data-action="index"] #main .items tr.free-shipping td,
  body[data-controller="cart"][data-action="index"] #main .items tr.empty-notice td {
    box-sizing: border-box;
    padding: 10px;
  }

  body[data-controller="order"][data-action="checkout"] #main .form-pane,
  body[data-controller="order"][data-action="checkout"] #main .form-pane .content {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  body[data-controller="order"][data-action="checkout"] #payment-methods .payment-method .radio {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 48px;
    padding: 8px 10px;
  }

  body[data-controller="order"][data-action="checkout"] #payment-methods .payment-method .radio span {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 8px;
  }

  body[data-controller="order"][data-action="checkout"] #payment-methods .payment-method .radio img {
    float: none;
    flex: 0 1 auto;
    width: auto;
    max-width: 40%;
    max-height: 44px;
  }

  body[data-controller="order"][data-action="checkout"] #cart table,
  body[data-controller="order"][data-action="checkout"] #cart tbody {
    display: block;
    width: 100%;
  }

  body[data-controller="order"][data-action="checkout"] #cart tr:first-child {
    display: none;
  }

  body[data-controller="order"][data-action="checkout"] #cart tr.item {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 6px 10px;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 0;
  }

  body[data-controller="order"][data-action="checkout"] #cart tr.item td {
    display: block;
    box-sizing: border-box;
    width: auto !important;
    min-width: 0;
    padding: 0;
  }

  body[data-controller="order"][data-action="checkout"] #cart .image-column {
    grid-row: 1;
    grid-column: 1;
  }

  body[data-controller="order"][data-action="checkout"] #cart .description-column {
    grid-column: 2;
    overflow-wrap: anywhere;
  }

  body[data-controller="order"][data-action="checkout"] #cart tr.item .count-column {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  body[data-controller="order"][data-action="checkout"] #cart tr.item .total-price-column {
    grid-row: 3;
    grid-column: 1 / -1;
  }

  body[data-controller="order"][data-action="checkout"] #cart tr.item .total-price-column > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  body[data-controller="order"][data-action="checkout"] #voucher-wrapper {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 0;
  }

  body[data-controller="order"][data-action="checkout"] #voucher-wrapper td {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
  }

  body[data-controller="order"][data-action="checkout"] #cart tr.totals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 10px;
    box-sizing: border-box;
    width: 100%;
  }

  body[data-controller="order"][data-action="checkout"] #cart tr.totals td {
    display: block;
    box-sizing: border-box;
    width: auto !important;
    min-width: 0;
    padding: 8px 0;
  }

  body[data-controller="order"][data-action="checkout"] #voucher-wrapper input,
  body[data-controller="order"][data-action="checkout"] #voucher-wrapper button {
    width: 100%;
    margin: 0 0 8px;
  }

  body[data-controller="account"] #main input:not([type="radio"]):not([type="checkbox"]),
  body[data-controller="account"] #main select,
  body[data-controller="register"] #main input:not([type="radio"]):not([type="checkbox"]),
  body[data-controller="register"] #main select,
  body[data-controller="password"] #main input:not([type="radio"]):not([type="checkbox"]),
  body[data-controller="password"] #main select {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
  }

  body[data-controller="account"] #main .controls,
  body[data-controller="register"] #main .controls,
  body[data-controller="password"] #main .controls {
    width: auto !important;
    margin-left: 0 !important;
  }

  body[data-controller="account"] #main input[type="radio"],
  body[data-controller="account"] #main input[type="checkbox"],
  body[data-controller="register"] #main input[type="radio"],
  body[data-controller="register"] #main input[type="checkbox"],
  body[data-controller="password"] #main input[type="radio"],
  body[data-controller="password"] #main input[type="checkbox"] {
    width: auto !important;
  }

  body[data-controller="password"][data-action="index"] #password-form-wrapper,
  body[data-controller="password"][data-action="index"] #password-form-wrapper form,
  body[data-controller="password"][data-action="index"] .form-error-messages {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  body[data-controller="password"][data-action="index"] #password-form-wrapper label {
    float: none;
    display: block;
    width: auto;
    text-align: left;
  }

  body[data-controller="password"][data-action="index"] #password-form-wrapper button,
  body[data-controller="password"][data-action="index"] #password-form-wrapper input[type="submit"] {
    box-sizing: border-box;
    width: 100%;
    margin-left: 0;
  }

  body[data-controller="account"][data-action="index"] #account-details #tab-address .wrapper .control-group,
  body[data-controller="account"][data-action="index"] #account-details #tab-change-password .wrapper .control-group,
  body[data-controller="account"][data-action="index"] #account-details #tab-delete-account .wrapper .control-group,
  body[data-controller="account"][data-action="index"] #account-details #tab-bank-account .wrapper .control-group,
  body[data-controller="account"][data-action="index"] #account-details #tab-delete-account input[type="submit"] {
    margin-left: 0 !important;
  }
}

@media screen and (max-width: 560px) {
  body[data-controller="item"][data-action="index"] #results .items tr,
  body[data-controller="item"][data-action="search"] #search-results tr.item {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  body[data-controller="item"][data-action="index"] #results .items td:nth-child(1),
  body[data-controller="item"][data-action="search"] #search-results tr.item .image {
    grid-row: 1 / span 3;
    grid-column: 1;
  }

  body[data-controller="item"][data-action="index"] #results .items td:nth-child(2),
  body[data-controller="item"][data-action="search"] #search-results tr.item .short-desc {
    grid-row: 1;
    grid-column: 2;
  }

  body[data-controller="item"][data-action="index"] #results .items td:nth-child(3) {
    grid-row: 2;
    grid-column: 2;
  }

  body[data-controller="item"][data-action="index"] #results .items td:nth-child(4),
  body[data-controller="item"][data-action="search"] #search-results tr.item .long-desc {
    grid-row: 3;
    grid-column: 2;
  }

  body[data-controller="item"][data-action="index"] #results .items td:nth-child(5),
  body[data-controller="item"][data-action="search"] #search-results tr.item .add-to-cart-wrapper {
    grid-row: 4;
    grid-column: 1 / 3;
  }

  body[data-controller="item"][data-action="index"] #results .items form.add-to-cart,
  body[data-controller="item"][data-action="search"] #search-results tr.item form.add-to-cart {
    display: block;
    width: 100%;
  }

  body[data-controller="item"][data-action="index"] #results .items .btn-buy,
  body[data-controller="item"][data-action="search"] #search-results tr.item .btn-buy {
    width: 100%;
    min-width: 0;
  }

  body[data-controller="cart"][data-action="index"] #main .items tr.item {
    grid-template-columns: 72px minmax(0, 1fr);
    padding-right: 52px;
  }

  body[data-controller="cart"][data-action="index"] #main .items tr.item .image-column {
    grid-row: 1 / span 2;
    grid-column: 1;
  }

  body[data-controller="cart"][data-action="index"] #main .items tr.item .description-column,
  body[data-controller="cart"][data-action="index"] #main .items tr.item .number-column,
  body[data-controller="cart"][data-action="index"] #main .items tr.item .unit-price-column,
  body[data-controller="cart"][data-action="index"] #main .items tr.item .count-column,
  body[data-controller="cart"][data-action="index"] #main .items tr.item .total-price-column {
    grid-column: 2;
  }

  body[data-controller="cart"][data-action="index"] #main .items tr.item .description-column {
    grid-row: 1;
  }

  body[data-controller="cart"][data-action="index"] #main .items tr.item .number-column {
    grid-row: 2;
  }

  body[data-controller="cart"][data-action="index"] #main .items tr.item .unit-price-column {
    grid-row: 3;
  }

  body[data-controller="cart"][data-action="index"] #main .items tr.item .count-column {
    grid-row: 4;
  }

  body[data-controller="cart"][data-action="index"] #main .items tr.item .total-price-column {
    grid-row: 5;
  }

  body[data-controller="site"][data-action="index"] #top-vendors-container ul,
  body[data-controller="site"][data-action="index"] #top-vendors-container ol,
  body[data-controller="printer"][data-action="index"] #nav-printer ol,
  body[data-controller="printer"][data-action="index"] #content-printer ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* First visible multi-device refinement: keep the established XL-Toner look,
 * but make the mobile entry into search, account, cart and printer selection
 * compact and clearly ordered. */
@media screen and (max-width: 768px) {
  #staging-environment-banner {
    padding: 7px 10px !important;
    border-bottom-width: 3px !important;
    font-size: 13px !important;
    line-height: 1.2;
    letter-spacing: 0 !important;
  }

  #nav-container {
    border: 0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(31, 67, 82, 0.16);
  }

  #nav-container .navbar-inner,
  #nav-container .navbar-inner .container-fluid {
    min-height: 0;
    padding: 0 !important;
    border: 0;
    background: #fff;
  }

  #nav-sub {
    height: auto;
  }

  #nav-sub .btn-toolbar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #nav-sub .btn-toolbar .btn {
    min-height: 48px;
    padding: 6px 4px;
    border: 0;
    border-right: 1px solid #d4e3e9;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    color: #28556a;
    font-size: 12px;
    line-height: 1.2;
    text-shadow: none;
  }

  #nav-sub .btn-toolbar .btn-group:last-child .btn {
    border-right: 0;
  }

  #nav-sub .btn-toolbar .btn:hover,
  #nav-sub .btn-toolbar .btn:focus {
    background: #eaf6fa;
    color: #176c8e;
  }

  #nav-main {
    display: none;
  }

  #header {
    height: auto;
    border-bottom: 1px solid #dcebf0;
    background: #fff;
  }

  #header .container-fluid {
    padding: 10px 12px;
  }

  #header .row-fluid {
    display: grid;
    gap: 8px;
  }

  #header .row-fluid > .span5 {
    display: grid;
    gap: 8px;
    margin-top: 0;
  }

  #header .row-fluid > .span3 {
    display: none;
  }

  #header-logo {
    height: auto !important;
  }

  #header-logo img {
    max-width: 175px;
    max-height: 58px;
  }

  #header #quick-search {
    order: 1;
  }

  #header #quick-search form {
    margin: 0;
  }

  #header #quick-search-input {
    padding-right: 10px;
    padding-left: 10px;
    border: 1px solid #9fc6d5;
    border-radius: 6px 0 0 6px;
    background: #fff;
    box-shadow: none;
  }

  #header #quick-search-submit {
    border: 1px solid #247f9f;
    border-radius: 0 6px 6px 0;
    background: #2d96ba;
    box-shadow: none;
    color: #fff;
    text-shadow: none;
  }

  #header .row-fluid .seals {
    position: static !important;
    right: auto;
    top: auto;
    order: 2;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100% !important;
    height: 36px;
    margin: 0;
    overflow: hidden;
  }

  #header .row-fluid .seals > div {
    position: static;
    display: block;
    width: auto;
    min-width: 0;
    height: 34px;
    margin: 0;
  }

  #header .row-fluid .seals > div:first-child {
    display: none;
  }

  #header .row-fluid .seals a {
    display: flex;
    align-items: center;
    height: 34px;
  }

  #header .row-fluid .seals img {
    width: auto;
    max-width: 58px;
    max-height: 34px;
  }

  #header-slogan,
  #header-hotline {
    display: none;
  }

  #quickbar {
    border-top: 0;
    border-bottom: 1px solid #247f9f;
    background: #2d96ba;
    box-shadow: 0 3px 8px rgba(31, 67, 82, 0.16);
  }

  #quickbar .container-fluid {
    padding: 8px 12px;
  }

  #quickbar .row-fluid {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #quickbar .row-fluid > [class*="span"] + [class*="span"] {
    margin-top: 0;
  }

  #quickbar .row-fluid > .span3:last-child {
    order: -1;
  }

  #quickbar .row-fluid > .span3:first-child {
    display: none;
  }

  #quickbar #cart-status {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 6px;
    background: #fff;
  }

  #quickbar #cart-status .empty .info,
  #quickbar #cart-status .full .info {
    background: #fff;
    color: #28556a;
  }

  #quickbar #cart-status .empty .info b,
  #quickbar #cart-status .full .info b {
    color: #28556a;
  }

  #quickbar #quick-dropdowns::before {
    content: "Drucker finden";
    display: block;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
  }

  body[data-controller="site"][data-action="index"] #quickbar .span6 {
    display: none;
  }

  body[data-controller="site"][data-action="index"] #product-selection {
    padding: 4px 0 20px;
    background: #f4f9fb;
  }

  body[data-controller="site"][data-action="index"] #product-selection h1 {
    margin: 14px 0 16px;
    color: #267f9f;
    font-size: 24px;
    line-height: 1.15;
  }

  body[data-controller="site"][data-action="index"] #product-selection .row-fluid:nth-child(2) {
    display: grid;
    gap: 12px;
  }

  body[data-controller="site"][data-action="index"] #product-selection .row-fluid:nth-child(2) > [class*="span"] {
    margin-top: 0;
  }

  body[data-controller="site"][data-action="index"] #product-selection .span5 > div {
    margin-bottom: 0;
  }

  body[data-controller="site"][data-action="index"] #product-search::before,
  body[data-controller="site"][data-action="index"] #product-dropdowns::before {
    display: block;
    margin-bottom: 8px;
    color: #28556a;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
  }

  body[data-controller="site"][data-action="index"] #product-search::before {
    content: "Artikel oder Drucker suchen";
  }

  body[data-controller="site"][data-action="index"] #product-dropdowns::before {
    content: "Drucker finden";
  }

  body[data-controller="site"][data-action="index"] #product-selection #product-search form,
  body[data-controller="site"][data-action="index"] #product-selection #product-dropdowns form {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 14px;
    border: 1px solid #d4e5eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(31, 67, 82, 0.12);
  }

  body[data-controller="site"][data-action="index"] #product-search form .spacer,
  body[data-controller="site"][data-action="index"] #product-dropdowns form .spacer {
    display: none;
  }

  body[data-controller="site"][data-action="index"] #product-selection .span5 > div form .content {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  body[data-controller="site"][data-action="index"] #product-selection #product-search #product-search-input {
    font-size: 16px !important;
    box-shadow: none;
  }

  body[data-controller="site"][data-action="index"] #product-selection #product-search #product-search-submit {
    font-size: 15px !important;
  }

  body[data-controller="site"][data-action="index"] #product-dropdowns form .content {
    display: grid;
    gap: 10px;
  }

  body[data-controller="site"][data-action="index"] #product-dropdowns {
    padding-top: 0;
  }

  body[data-controller="site"][data-action="index"] #product-selection #product-selection-info .warranty {
    width: 112px;
  }

  body[data-controller="site"][data-action="index"] #product-selection .bottom-shadow {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  #nav-sub .btn-toolbar .btn,
  #nav-main ol > li > a {
    min-height: 30px;
    box-sizing: border-box;
    font-size: 12px;
  }

  #nav-sub .btn-toolbar .btn:focus,
  #nav-main ol > li > a:focus {
    outline: 2px solid #2d96ba;
    outline-offset: -2px;
  }
}

/* Mobile product discovery: show the selected product before alternatives and
 * turn search results into compact, touch-friendly product cards. */
@media screen and (max-width: 768px) {
  body[data-controller="item"][data-action="search"] #search-info {
    box-sizing: border-box;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #d4e5eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(31, 67, 82, 0.1);
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  body[data-controller="item"][data-action="search"] #search-info > span {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 6px;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  body[data-controller="item"][data-action="search"] #search-info > span:last-of-type {
    margin-bottom: 0;
  }

  body[data-controller="item"][data-action="search"] #search-info > a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    height: auto;
    margin-top: 10px;
    padding: 9px 12px;
    line-height: 1.3;
    white-space: normal;
    text-align: center;
  }

  body[data-controller="item"][data-action="search"] #search-filters {
    box-sizing: border-box;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #d4e5eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(31, 67, 82, 0.08);
  }

  body[data-controller="item"][data-action="search"] #search-filters form {
    display: grid;
    gap: 10px;
    margin: 0;
  }

  body[data-controller="item"][data-action="search"] #search-filters .search-filter,
  body[data-controller="item"][data-action="search"] #search-filters #category-search-filters,
  body[data-controller="item"][data-action="search"] #search-filters #type-search-filters,
  body[data-controller="item"][data-action="search"] #search-filters #vendor-search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100% !important;
    height: auto !important;
    min-height: 0;
    margin: 0;
  }

  body[data-controller="item"][data-action="search"] #search-filters legend {
    flex: 0 0 100%;
    box-sizing: border-box;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    color: #28556a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
  }

  body[data-controller="item"][data-action="search"] #search-filters label {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 36px;
    margin: 0;
    padding: 6px 9px;
    border: 1px solid #cfe1e8;
    border-radius: 18px;
    background: #f3f8fa;
    line-height: 1.2;
  }

  body[data-controller="item"][data-action="search"] #search-filters label input {
    width: 18px;
    height: 18px;
    margin: 0 6px 0 0;
  }

  body[data-controller="item"][data-action="search"] #search-box {
    margin-top: 12px;
  }

  body[data-controller="item"][data-action="search"] #search-results {
    margin-top: 12px;
  }

  body[data-controller="item"][data-action="search"] #search-results > header {
    padding: 9px 12px;
    border-radius: 8px 8px 0 0;
  }

  body[data-controller="item"][data-action="search"] #search-results > header h3 {
    font-size: 16px;
    line-height: 1.3;
  }

  body[data-controller="item"][data-action="search"] #sort-order-wrapper {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    height: auto;
    padding: 9px 12px;
    background: #f4f9fb;
  }

  body[data-controller="item"][data-action="search"] #sort-order-wrapper label,
  body[data-controller="item"][data-action="search"] #sort-order-wrapper #sort-order {
    width: auto;
    margin: 0;
  }

  body[data-controller="item"][data-action="search"] #sort-order-wrapper #sort-order {
    width: 100%;
    min-height: 44px;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item,
  body[data-controller="item"][data-action="index"] #results .items tr {
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 14px;
    border: 1px solid #d4e5eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(31, 67, 82, 0.08);
  }

  body[data-controller="item"][data-action="index"] #results .items tr.selected {
    border: 2px solid #2d96ba;
    box-shadow: 0 5px 16px rgba(45, 150, 186, 0.18);
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item .short-desc .name {
    display: inline-block;
    margin-bottom: 4px;
    padding: 2px 7px;
    border-radius: 12px;
    background: #e8f5f9;
    color: #176c8e;
    font-size: 12px;
    font-weight: 700;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item .short-desc .number,
  body[data-controller="item"][data-action="search"] #search-results tr.item .short-desc .category {
    display: block;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item .short-desc .category {
    font-weight: 700;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item .short-desc br {
    display: none;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item .long-desc {
    font-size: 12px;
    line-height: 1.4;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item .long-desc > span {
    display: block;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item .long-desc .description,
  body[data-controller="item"][data-action="search"] #search-results tr.item .long-desc .display-number {
    display: none !important;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item .capacity,
  body[data-controller="item"][data-action="index"] #results .items tr .capacity {
    color: #238b4b;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item .link-wrapper {
    margin-top: 6px;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item .add-to-cart-wrapper {
    padding-top: 10px !important;
    border-top: 1px solid #dcebf0;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item form.add-to-cart,
  body[data-controller="item"][data-action="index"] #details form.add-to-cart {
    margin: 0;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item form.add-to-cart .price,
  body[data-controller="item"][data-action="index"] #details form.add-to-cart .price {
    display: grid;
    grid-template-columns: minmax(110px, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 8px;
    margin: 0 0 10px !important;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item form.add-to-cart .price > .wrapper,
  body[data-controller="item"][data-action="index"] #details form.add-to-cart .price > .wrapper {
    box-sizing: border-box;
    width: auto !important;
    margin: 0 !important;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item form.add-to-cart .price > .wrapper:first-child,
  body[data-controller="item"][data-action="index"] #details form.add-to-cart .price > .wrapper:first-child {
    grid-row: 1;
    grid-column: 1;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item form.add-to-cart .price > .wrapper:last-child,
  body[data-controller="item"][data-action="index"] #details form.add-to-cart .price > .wrapper:last-child {
    grid-row: 1;
    grid-column: 2;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item form.add-to-cart .vat-note,
  body[data-controller="item"][data-action="search"] #search-results tr.item form.add-to-cart .shipping-note,
  body[data-controller="item"][data-action="index"] #details form.add-to-cart .vat-note,
  body[data-controller="item"][data-action="index"] #details form.add-to-cart .shipping-note {
    font-size: 12px;
    line-height: 1.3;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item form.add-to-cart .buy,
  body[data-controller="item"][data-action="index"] #details form.add-to-cart .buy {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: end;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0 !important;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item form.add-to-cart .buy > .wrapper,
  body[data-controller="item"][data-action="index"] #details form.add-to-cart .buy > .wrapper {
    float: none;
    box-sizing: border-box;
    width: auto !important;
    margin: 0 !important;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item form.add-to-cart .buy > .wrapper:first-child,
  body[data-controller="item"][data-action="index"] #details form.add-to-cart .buy > .wrapper:first-child {
    grid-row: 1;
    grid-column: 1;
    height: auto !important;
    min-height: 59px;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item form.add-to-cart .buy > .wrapper:last-child,
  body[data-controller="item"][data-action="index"] #details form.add-to-cart .buy > .wrapper:last-child {
    grid-row: 1;
    grid-column: 2;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item form.add-to-cart .buy label,
  body[data-controller="item"][data-action="index"] #details form.add-to-cart .buy label {
    display: block !important;
    height: auto !important;
    margin: 0;
    padding: 0 !important;
    font-size: 11px;
    line-height: 1.2;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item form.add-to-cart .buy select,
  body[data-controller="item"][data-action="index"] #details form.add-to-cart .buy select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    margin: 0;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item form.add-to-cart .btn-buy,
  body[data-controller="item"][data-action="index"] #details form.add-to-cart .btn-buy,
  body[data-controller="item"][data-action="index"] #results .items .btn-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-right: 7px;
    padding-left: 34px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.15;
    white-space: nowrap;
  }

  body[data-controller="item"][data-action="index"] #main > .container-fluid > .row-fluid > .span9 {
    display: flex;
    flex-direction: column;
  }

  body[data-controller="item"][data-action="index"] #goodie-carousel-wrapper {
    order: 2;
    margin-top: 16px;
  }

  body[data-controller="item"][data-action="index"] #goodie-carousel-wrapper + .row-fluid {
    order: 1;
    display: flex;
    flex-direction: column;
  }

  body[data-controller="item"][data-action="index"] #goodie-carousel-wrapper + .row-fluid > .span6:last-child {
    order: -1;
  }

  body[data-controller="item"][data-action="index"] #details > .dialog {
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid #cfe1e8;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(31, 67, 82, 0.12);
  }

  body[data-controller="item"][data-action="index"] #details > .dialog > .header {
    padding: 9px 12px;
  }

  body[data-controller="item"][data-action="index"] #details > .dialog > .content {
    padding: 12px;
  }

  body[data-controller="item"][data-action="index"] #details-body-copy {
    box-sizing: border-box;
    margin-top: 12px;
    padding: 14px !important;
    border: 1px solid #d4e5eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(31, 67, 82, 0.08);
  }

  body[data-controller="item"][data-action="index"] #details-body-copy h3 {
    color: #28556a;
    font-size: 20px;
    line-height: 1.2;
  }

  body[data-controller="item"][data-action="index"] #details-body-copy dl {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 6px 10px;
    margin: 10px 0;
  }

  body[data-controller="item"][data-action="index"] #details-body-copy dt,
  body[data-controller="item"][data-action="index"] #details-body-copy dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
  }
}

/* Mobile readability: the legacy product list used 9-11px text. Keep the
 * compact card layout, but use comfortable phone-sized typography. */
@media screen and (max-width: 768px) {
  body[data-controller="item"][data-action="index"] #results .type > .header {
    box-sizing: border-box;
    height: auto !important;
    min-height: 46px;
    padding: 10px 12px;
  }

  body[data-controller="item"][data-action="index"] #results .type > .header .type-name {
    font-size: 18px !important;
    line-height: 24px !important;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item .description,
  body[data-controller="item"][data-action="index"] #results .items tr.item .description a {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item .description a {
    display: block;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item .description .vendor,
  body[data-controller="item"][data-action="index"] #results .items tr.item .description a > div,
  body[data-controller="item"][data-action="index"] #results .items tr.item .description .category {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item .description .capacity,
  body[data-controller="item"][data-action="index"] #results .items tr.item .description .unit-count {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item .price .gross .value {
    font-size: 26px !important;
    line-height: 1.1 !important;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item .price .net .value {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item .price .vat-note {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item .stock-status {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item .btn-buy {
    height: 52px !important;
    min-height: 52px;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  body[data-controller="item"][data-action="index"] #results .type > footer {
    font-size: 14px;
    line-height: 1.4;
  }

  body[data-controller="item"][data-action="index"] #details {
    font-size: 16px;
    line-height: 1.45;
  }

  body[data-controller="item"][data-action="index"] #details > .dialog > .header h2 {
    font-size: 18px;
    line-height: 1.3;
  }

  body[data-controller="item"][data-action="index"] #details form.add-to-cart .vat-note,
  body[data-controller="item"][data-action="index"] #details form.add-to-cart .shipping-note {
    font-size: 14px;
  }

  body[data-controller="item"][data-action="index"] #details form.add-to-cart .stock-status {
    font-size: 15px;
  }

  body[data-controller="item"][data-action="index"] #details form.add-to-cart .btn-buy {
    height: 52px;
    min-height: 52px;
    font-size: 16px;
  }

  body[data-controller="item"][data-action="index"] #details-body-copy,
  body[data-controller="item"][data-action="index"] #compatible-printers {
    font-size: 16px;
    line-height: 1.45;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item {
    font-size: 15px;
    line-height: 1.4;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item .short-desc {
    font-size: 16px;
    line-height: 1.35;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item .short-desc .name {
    font-size: 14px;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item .long-desc {
    font-size: 14px;
    line-height: 1.45;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item form.add-to-cart .vat-note,
  body[data-controller="item"][data-action="search"] #search-results tr.item form.add-to-cart .shipping-note {
    font-size: 13px;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item form.add-to-cart .stock-status {
    font-size: 15px;
  }

  body[data-controller="item"][data-action="search"] #search-results tr.item form.add-to-cart .btn-buy {
    height: 48px;
    min-height: 48px;
    font-size: 15px;
  }
}

/* Phone product cards: mirror the clear hierarchy of the selected product
 * instead of squeezing image and product data into two narrow columns. */
@media screen and (max-width: 560px) {
  body[data-controller="item"][data-action="index"] #results .items tr.item {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
    border: 1px solid #d4e5eb;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(31, 67, 82, 0.08);
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item.selected {
    border: 2px solid #2d96ba;
    background: #fff !important;
    box-shadow: 0 5px 16px rgba(45, 150, 186, 0.18);
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item td:nth-child(1),
  body[data-controller="item"][data-action="index"] #results .items tr.item td:nth-child(2),
  body[data-controller="item"][data-action="index"] #results .items tr.item td:nth-child(3),
  body[data-controller="item"][data-action="index"] #results .items tr.item td:nth-child(4),
  body[data-controller="item"][data-action="index"] #results .items tr.item td:nth-child(5) {
    grid-column: 1;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item td:nth-child(2) {
    grid-row: 1;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item td:nth-child(1) {
    grid-row: 2;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item td:nth-child(3) {
    grid-row: 3;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item td:nth-child(4) {
    grid-row: 4;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item td:nth-child(5) {
    grid-row: 5;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item .description,
  body[data-controller="item"][data-action="index"] #results .items tr.item .description a {
    text-align: center;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item .image {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-height: 180px;
    padding: 8px 0;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item .image picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item .image img {
    width: auto !important;
    max-width: 240px !important;
    max-height: 180px;
    object-fit: contain;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item .colors {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    width: 100% !important;
    min-height: 20px;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item .price {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item .stock-status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin-right: auto;
    margin-left: auto;
  }

  body[data-controller="item"][data-action="index"] #results .items tr.item form.add-to-cart,
  body[data-controller="item"][data-action="index"] #results .items tr.item .btn-buy {
    width: 100%;
  }
}