/*
 * 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"] #main #nav-printer li,
  body[data-controller="printer"][data-action="index"] #main #content-printer ol li {
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    list-style: none;
  }

  body[data-controller="printer"][data-action="index"] #main #nav-printer a,
  body[data-controller="printer"][data-action="index"] #main #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%;
  }
}

/* ---------------------------------------------------------------
   Leeren Warenkorb-Balken auf kleinen Bildschirmen ausblenden.
   Auf dem Handy kostet "0 Artikel im Warenkorb" eine volle Zeile
   ueber dem Seiteninhalt, ohne etwas auszusagen. Das Template
   (#cart-status-template) rendert bei count <= 0 ein div.empty und
   sonst ein div.info - sobald also etwas im Korb liegt, erscheint
   der Balken automatisch wieder. Desktop bleibt unveraendert.
   Ergaenzt 2026-08-22.
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  /* Nicht nur den Warenkorb, sondern die ganze Quickbar: Der
     Brotkrumenpfad darin ist auf kleinen Bildschirmen ohnehin
     ausgeblendet, bei leerem Warenkorb bleibt sonst ein leerer
     blauer Streifen von 33px stehen. */
  #quickbar:has(#cart-status .empty) {
    display: none;
  }
}

/* ---------------------------------------------------------------
   Startseite auf kleinen Bildschirmen auf EINEN Suchkasten
   reduzieren (Wunsch SG, 2026-08-22).

   Die Startseite bietet nebeneinander die Freitextsuche
   (#product-search) und den Drucker-Finder mit zwei Auswahllisten
   (#product-dropdowns). Untereinander gestapelt kostet der Finder
   auf dem Handy rund 220px, und die Freitextsuche fuehrt zum
   gleichen Ziel. Der Finder bleibt auf Tablet und Desktop
   unveraendert erhalten.
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .span5:has(> #product-dropdowns) {
    display: none;
  }
}

/* ---------------------------------------------------------------
   Nur EINE Suche auf der Startseite (Wunsch SG, 2026-08-22).

   Startseite und Kopfzeile boten auf dem Handy zwei identische
   Suchfelder untereinander. Ausgeblendet wird die Kopfzeilen-Suche,
   weil der Kasten im Inhalt besser sichtbar ist und das Logo Luft
   bekommt.

   WICHTIG: ausschliesslich auf der Startseite. Auf Kategorie-,
   Artikel- und Warenkorbseiten gibt es KEINEN #product-search -
   dort ist #quick-search die einzige Suche und muss bleiben.
   Geprueft an /webshop/brother/ und /webshop/warenkorb.
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  body[data-controller="site"][data-action="index"] #quick-search {
    display: none !important;
  }
}

/* ---------------------------------------------------------------
   Startseite auf dem Handy aufraeumen (Wunsch SG, 2026-08-22).

   - Ueberschrift "Artikel oder Drucker suchen" entfaellt: Das
     Suchfeld traegt bereits den Platzhalter "Artikel-/Druckersuche",
     die Zeile darueber sagt dasselbe zweimal.
   - Suchkasten mittig setzen.
   - Die leere Abstandsspalte .span2 zwischen den beiden ehemaligen
     Kaesten einziehen, sonst bleibt eine Luecke stehen.
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  body[data-controller="site"][data-action="index"] #product-search::before {
    content: none;
  }

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

  body[data-controller="site"][data-action="index"] #product-selection .span5:has(> #product-search) {
    margin-left: auto;
    margin-right: auto;
    float: none;
  }
}

/* Polsterung um den Suchbereich auf dem Handy einziehen: Der
   Container war fuer zwei nebeneinanderstehende Kaesten ausgelegt
   und liess nach dem Ausduennen 87px Leerraum stehen. */
@media screen and (max-width: 768px) {
  body[data-controller="site"][data-action="index"] #product-selection {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* ---------------------------------------------------------------
   Startseite: Bereich "Gratis mitbestellen" auf dem Handy
   ausblenden (Wunsch SG, 2026-08-22). Der Block ist rund 800px
   hoch und schiebt die eigentlichen Inhalte weit nach unten.
   Auf Tablet und Desktop bleibt er unveraendert.
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  body[data-controller="site"][data-action="index"] #goodies {
    display: none;
  }
}

/* ---------------------------------------------------------------
   Herstellerlogos auf dem Handy anzeigen (Wunsch SG, 2026-08-22).

   Bisher ersetzte responsive.css die Logos durch Markennamen als
   Text. Grund: Auf dem Desktop liegt EIN Sprite (top-vendors-new.png,
   960x165 = 6 Spalten x 3 Zeilen a 160x55) als Hintergrund auf
   #top-vendors, darueber unsichtbare Klickflaechen von 159x55px.
   Dieses feste Raster passt nicht auf 375px Breite.

   Loesung ohne Bildschnitt: Jede Kachel bekommt das Sprite selbst
   als Hintergrund, auf 600% x 300% skaliert - damit entspricht ein
   Kachelausschnitt genau 100% der Kachelflaeche - und wird ueber
   background-position auf ihre Zelle gesetzt. Das Seitenverhaeltnis
   160:55 haelt aspect-ratio, dadurch skalieren die Logos mit der
   Bildschirmbreite mit.

   Reihenfolge im HTML (float, 6 pro Zeile):
     Zeile 1: Brother Canon HP Epson Samsung OKI
     Zeile 2: Kyocera Dell Xerox Lexmark KonicaMinolta Apple
   Zeile 3 des Sprites sind Alt-Marken und bleibt ungenutzt.
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  body[data-controller="site"][data-action="index"] #top-vendors-container ul,
  body[data-controller="site"][data-action="index"] #top-vendors-container ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-controller="site"][data-action="index"] #top-vendors-container #top-vendors li a {
    background-image: url("/webshop/img/desktop/top-vendors-new.png");
    background-repeat: no-repeat;
    background-size: 600% 300%;
    aspect-ratio: 160 / 55;
    height: auto;
    min-height: 0;
    padding: 0;
    font-size: 0;
    color: transparent;
  }

  body[data-controller="site"][data-action="index"] #top-vendors-container #top-vendors li:nth-child(1) a  { background-position:   0%   0%; }
  body[data-controller="site"][data-action="index"] #top-vendors-container #top-vendors li:nth-child(2) a  { background-position:  20%   0%; }
  body[data-controller="site"][data-action="index"] #top-vendors-container #top-vendors li:nth-child(3) a  { background-position:  40%   0%; }
  body[data-controller="site"][data-action="index"] #top-vendors-container #top-vendors li:nth-child(4) a  { background-position:  60%   0%; }
  body[data-controller="site"][data-action="index"] #top-vendors-container #top-vendors li:nth-child(5) a  { background-position:  80%   0%; }
  body[data-controller="site"][data-action="index"] #top-vendors-container #top-vendors li:nth-child(6) a  { background-position: 100%   0%; }
  body[data-controller="site"][data-action="index"] #top-vendors-container #top-vendors li:nth-child(7) a  { background-position:   0%  50%; }
  body[data-controller="site"][data-action="index"] #top-vendors-container #top-vendors li:nth-child(8) a  { background-position:  20%  50%; }
  body[data-controller="site"][data-action="index"] #top-vendors-container #top-vendors li:nth-child(9) a  { background-position:  40%  50%; }
  body[data-controller="site"][data-action="index"] #top-vendors-container #top-vendors li:nth-child(10) a { background-position:  60%  50%; }
  body[data-controller="site"][data-action="index"] #top-vendors-container #top-vendors li:nth-child(11) a { background-position:  80%  50%; }
  body[data-controller="site"][data-action="index"] #top-vendors-container #top-vendors li:nth-child(12) a { background-position: 100%  50%; }
}

/* ---------------------------------------------------------------
   Trusted-Shops-Abzeichen auf dem Handy nach oben in den
   Kopfbereich neben Logo und Siegel (Wunsch SG, 2026-08-22).
   Standard ist ein schwebendes Abzeichen unten links, das dort
   Markenlogos und den Datenschutz-Button ueberlagert. Der
   Container kommt vom Trusted-Shops-Skript mit Inline-Styles
   (position:fixed), daher !important. Der id-Praefix
   "trustbadge-container-" ist die stabile Kennung.
   Desktop bleibt unveraendert (schwebend unten links).
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  /* Nur auf der Startseite: dort ist die Ecke neben dem Logo frei.
     Auf Unterseiten sitzt oben die Kopfzeilen-Suche - dort wuerde das
     Abzeichen den Suchen-Knopf ueberdecken (am 22.08. an der
     Suchergebnisseite beobachtet). Unterseiten behalten deshalb das
     normale schwebende Abzeichen unten links. */
  body[data-controller="site"][data-action="index"] div[id^="trustbadge-container-"] {
    position: absolute !important;
    top: 62px !important;
    right: 4px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 900 !important;
  }

  /* Das Abzeichen selbst ist INNERHALB des Containers nochmals
     position:fixed (Klassennamen dort sind generiert und wechseln,
     daher ueber die Struktur adressiert): im Container auf static
     zuruecksetzen, damit es der Containerposition folgt. */
  body[data-controller="site"][data-action="index"] div[id^="trustbadge-container-"] div {
    position: static !important;
  }
}

/* Das kleine statische Trusted-Shops-Siegel im Kopfbereich ist auf
   dem Handy doppelt: Direkt daneben haengt jetzt das interaktive
   Abzeichen mit Live-Bewertung (4,77). Das statische ausblenden,
   die anderen beiden Siegel bleiben. */
@media screen and (max-width: 768px) {
  body[data-controller="site"][data-action="index"] a:has(> img[alt="Trusted Shop Logo"]) {
    display: none !important;
  }
}

/* ---------------------------------------------------------------
   Suchergebnisseite: Filterkasten (Produktkategorie/Medienart/
   Hersteller) auf dem Handy ausblenden (Wunsch SG, 2026-08-22).
   Er schiebt die Treffer einen ganzen Bildschirm nach unten;
   die Suche selbst grenzt ueber den Suchbegriff ausreichend ein.
   Desktop behaelt die Filter.
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  body[data-controller="item"][data-action="search"] #search-filters {
    display: none;
  }
}

/* ---------------------------------------------------------------
   Trefferliste: Warenkorb-Buttons auf dem Handy kleiner
   (Wunsch SG, 2026-08-22). Vorher dominierte der orange Button
   die halbe Kartenbreite.
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .btn-buy {
    font-size: 13px !important;
    min-height: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    padding: 0 10px 0 30px !important;
    background-size: 22px auto !important;
    width: auto !important;
    max-width: 200px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---------------------------------------------------------------
   Schwebenden Datenschutz-Knopf (Usercentrics-Fingerabdruck) auf
   dem Handy ausblenden (Wunsch SG, 2026-08-22). Er ueberlagert
   Markenlogos und Preise. Die Datenschutz-Einstellungen bleiben
   ueber den Fusszeilen-Link "Datenschutz" erreichbar.
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  #uc-btn-open-main-corner-modal,
  [id^="uc-btn-open"] {
    display: none !important;
  }
}

/* ---------------------------------------------------------------
   Schwebendes Trusted-Shops-Abzeichen auf UNTERSEITEN ganz
   ausblenden (Wunsch SG, 2026-08-22): Es ueberlagerte dort
   Produktbilder und Preise. Auf der Startseite bleibt es sichtbar,
   fest platziert neben dem Logo. Desktop unveraendert.
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  div[id^="trustbadge-container-"] {
    display: none !important;
  }
  body[data-controller="site"][data-action="index"] div[id^="trustbadge-container-"] {
    display: block !important;
  }
}

/* ---------------------------------------------------------------
   Siegelzeile (Trusted Shops / IT-Recht / Gepruefter Lieferant)
   auf UNTERSEITEN ausblenden (Wunsch SG, 2026-08-22) - sie kostet
   dort eine Zeile Kopfhoehe auf jedem Bildschirm. Die Startseite
   behaelt ihre zwei Siegel plus das interaktive Abzeichen.
   Desktop unveraendert.
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .seals {
    display: none !important;
  }
  body[data-controller="site"][data-action="index"] .seals {
    display: flex !important;
  }
}

/* ---------------------------------------------------------------
   Suchergebnisseite: Kopfzeilen-Suche ausblenden (Wunsch SG,
   2026-08-22) - die Seite bringt ein eigenes, mit dem Suchbegriff
   vorausgefuelltes Suchfeld mit, zwei Felder sind doppelt.
   Auf allen anderen Unterseiten (Kategorie, Artikel, Warenkorb)
   bleibt die Kopfzeilen-Suche die einzige und damit erhalten.
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  body[data-controller="item"][data-action="search"] #quick-search {
    display: none !important;
  }
}

/* ---------------------------------------------------------------
   Artikelseite: "Gratis mitbestellen"-Karussell auf dem Handy
   ausblenden (Wunsch SG, 2026-08-22). Es stand VOR den
   Artikeldetails und schob Preis und Warenkorb aus dem Bild.
   Desktop unveraendert.
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  #goodie-carousel-wrapper {
    display: none !important;
  }
}

/* ---------------------------------------------------------------
   Artikelseite, Karten "weitere passende Artikel"/"Guenstige
   Kompatible": Der Kartentitel IST der Link zur Detailseite,
   sah aber wie schwarzer Fliesstext aus - auf dem Handy erkennt
   das niemand (Befund SG, 2026-08-22: "hier fehlen details").
   Titel-Link als Link einfaerben und einen expliziten Hinweis
   "Details anzeigen >" unter den Titel setzen.
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  body[data-controller="item"][data-action="index"] #results .description a.url {
    color: #3579ae !important;
  }
  body[data-controller="item"][data-action="index"] #results .description a.url::after {
    content: "Details anzeigen ›";
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 400;
    text-decoration: underline;
  }
}

/* ---------------------------------------------------------------
   Artikelseite: Empfehlungskasten "Guenstige Kompatible" auf dem
   Handy ausblenden (Wunsch SG, 2026-08-22). Auf der Seite des
   Alternativ-Artikels bewirbt er dasselbe Produkt, das der Kunde
   schon ansieht. Die Kaesten tragen seit heute ihren Listennamen
   als data-list-Attribut (item/index.jsp). Desktop unveraendert.
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  /* ^="G" statt des vollen Namens: Guenstige Kompatible ist die
     einzige Liste mit G-Anfang - vermeidet Umlaut-Escapes in CSS. */
  #results article.dialog[data-list^="G"] {
    display: none !important;
  }
}

/* ---------------------------------------------------------------
   Quickbar aufraeumen (Wunsch SG, 2026-08-22):
   1) "Drucker finden" mit den beiden Auswahllisten (Hersteller/
      Modell) auf dem Handy ueberall ausblenden - kostet ~200px
      und die Freitextsuche deckt den Anwendungsfall ab.
   (Die Kopfzeilen-Suche bleibt auf der Artikelseite: Logo ->
   Suche -> Warenkorbleiste, Entscheidung SG am selben Abend.)
   Desktop unveraendert.
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  #quickbar #quick-dropdowns {
    display: none !important;
  }

}

/* ---------------------------------------------------------------
   Artikelseite, Empfehlungslisten (Originalmedien, Verwandte,
   Papier): Karten ans saubere Kartendesign angleichen (Befund SG,
   2026-08-22: "diese box sieht haesslich aus"). Ursachen: jede
   Tabellenzelle traegt duenne gruene Desktop-Raender, und der
   gerade betrachtete Artikel bekommt als .selected einen dicken
   blauen Rahmen. Auf dem Handy: Zellraender weg, selected-Rahmen
   neutral, Warenkorb-Knopf mittig. Desktop unveraendert.
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  #results article.dialog tr.item td {
    border: none !important;
  }

  #results article.dialog tr.item.selected {
    border: 1px solid #d7e9f0 !important;
    border-radius: 4px;
  }

  #results article.dialog td.last form {
    display: flex;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------
   Artikelseite: Liste "Papier" auf dem Handy komplett ausblenden
   (Wunsch SG, 2026-08-22). Sie war mit ~3000px der laengste Block
   der Seite. Desktop unveraendert.
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  #results article.dialog[data-list="Papier"] {
    display: none !important;
  }
}

/* ---------------------------------------------------------------
   Warenkorbseite (cart/index) auf dem Handy aufraeumen
   (Wunsch SG, 2026-08-22). Nur Darstellung, keine Logik.
   Befunde: oranges Kopfband schnitt den Untertitel ab (81px fix
   bei 103px Inhalt); die Summenzeile tr.totals war 401px breit
   bei 351px Platz - Werte-Spalte 75px, Zahlen umgebrochen, rote
   Sparbox daneben gequetscht; darueber hing die leere Quickbar.
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  /* Quickbar raus - die Seite IST der Warenkorb */
  body[data-controller="cart"] #quickbar {
    display: none !important;
  }

  /* Kopfband: Hoehe folgt dem Inhalt, Untertitel darf umbrechen */
  body[data-controller="cart"] .container-fluid:has(> .row-fluid h1) {
    height: auto !important;
    min-height: 0 !important;
    padding: 6px 12px 8px !important;
  }
  /* Kopfband dezenter: kleinere Ueberschrift, Untertitel weg
     (Wunsch SG: "kleiner schmaler nicht so praesent") */
  body[data-controller="cart"] .container-fluid:has(> .row-fluid h1) h1 {
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }
  body[data-controller="cart"] .container-fluid:has(> .row-fluid h1) strong {
    display: none !important;
  }

  /* Summenblock: Beschriftungen links, Betraege rechts, sauber
     untereinander; rote Sparbox als eigene volle Zeile darunter */
  body[data-controller="cart"] table.items tr.totals {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
  }
  body[data-controller="cart"] table.items tr.totals > td {
    border: none !important;
    box-sizing: border-box;
  }
  body[data-controller="cart"] table.items tr.totals > td:first-child {
    order: 2;
    flex: 1 1 100%;
    width: auto !important;
    margin-top: 12px;
    text-align: center;
  }
  body[data-controller="cart"] table.items tr.totals > td.labels {
    order: 0;
    flex: 1 1 55%;
    text-align: right;
    padding-right: 8px;
  }
  body[data-controller="cart"] table.items tr.totals > td.values {
    order: 1;
    flex: 1 1 30%;
    text-align: right;
    white-space: nowrap;
  }
  body[data-controller="cart"] table.items tr.totals > td.padding {
    display: none;
  }
}

/* ---------------------------------------------------------------
   Warenkorb: Breiten vereinheitlichen (Wunsch SG, 2026-08-22).
   Alle Bloecke sassen auf 12px Seitenrand - bis auf das randlose
   orange Kopfband und den roten Sparhinweis-Button (22px Einzug
   plus schwerer Schlagschatten, wirkte ueberstehend).
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  body[data-controller="cart"] .container-fluid:has(> .row-fluid h1) {
    margin: 0 12px !important;
    /* feste width:100vw des Desktop-Designs neutralisieren, sonst
       ragt das Band trotz Rand rechts aus dem Bildschirm */
    width: auto !important;
    max-width: none !important;
    border-radius: 4px;
  }

  body[data-controller="cart"] tr.totals .btn-danger {
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box;
    border-radius: 4px;
    margin: 0 !important;
  }

  body[data-controller="cart"] a.checkout.btn,
  body[data-controller="cart"] a.btn.btn-primary {
    box-shadow: none !important;
    border-radius: 4px;
    box-sizing: border-box;
  }
}

/* Warenkorb: table.items sitzt im Desktop-Design mit -20px ueber
   dem Kopfband - beim schmalen Band verdeckt das die Ueberschrift.
   Auf dem Handy normaler Abstand. */
@media screen and (max-width: 768px) {
  body[data-controller="cart"] table.items {
    margin-top: 10px !important;
  }
}

/* ---------------------------------------------------------------
   Warenkorb-Feinschliff (Wunsch SG, 2026-08-22):
   - Roter Alarm-Button "Sie geben X zu viel aus" auf dem Handy
     ganz raus - die Sparoption steht bereits als Button direkt
     am Artikel.
   - Dieser Spar-Button am Artikel: statt Blau ein warmes Orange
     im Ton der Warenkorb-Buttons - Aufmerksamkeit ohne Alarm.
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  body[data-controller="cart"] tr.totals > td:first-child {
    display: none !important;
  }

  body[data-controller="cart"] button.alternative-item.btn-save {
    background: #e8a33d !important;
    background-image: linear-gradient(to bottom, #f0b45c, #dd9327) !important;
    border: 1px solid #c9821d !important;
    color: #fff !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border-radius: 4px;
  }
}

/* ---------------------------------------------------------------
   Bestellseite (order/checkout): Warenkorbleiste oben raus
   (Wunsch SG, 2026-08-22) - der Kunde ist bereits in der Kasse,
   die Leiste mit "Zur Kasse" ist dort doppelt. Zusaetzlich das
   orange Kopfband wie beim Warenkorb schmal ziehen.
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  body[data-controller="order"] #quickbar {
    display: none !important;
  }

  body[data-controller="order"] .container-fluid:has(> .row-fluid h1) {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 12px !important;
    width: auto !important;
    max-width: none !important;
    padding: 6px 12px 8px !important;
    border-radius: 4px;
  }
  body[data-controller="order"] .container-fluid:has(> .row-fluid h1) h1 {
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }
  body[data-controller="order"] .container-fluid:has(> .row-fluid h1) strong {
    display: none !important;
  }
}

/* Bestellseite: auch die Kopfzeilen-Suche raus (Wunsch SG,
   2026-08-22) - in der Kasse soll sich der Kunde auf den
   Abschluss konzentrieren, keine Ablenkung. */
@media screen and (max-width: 768px) {
  body[data-controller="order"] #quick-search {
    display: none !important;
  }
}

/* ---------------------------------------------------------------
   Bestellseite: Warenkorb-Zusammenfassung nach OBEN (Wunsch SG,
   2026-08-22) - der Kunde sieht zuerst, was er bestellt, dann
   folgen Adresse, Zahlart, AGB und der Kauf-abschliessen-Knopf.
   Technik: Die drei Formularspalten (.span4) werden per
   display:contents aufgeloest, ihre Bausteine haengen dann direkt
   im Flex-Container und #cart bekommt order:-1.
   Zusaetzlich: "Sie sind Haendler?"-Link raus (Fokus).
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  body[data-controller="order"] #order-form > .row-fluid {
    display: flex !important;
    flex-direction: column;
  }
  body[data-controller="order"] #order-form > .row-fluid > .span4 {
    display: contents;
  }
  body[data-controller="order"] #order-form #cart {
    order: -1;
    margin-bottom: 14px;
  }

  body[data-controller="order"] #type-selector a {
    display: none !important;
  }
}

/* Warenkorbleiste ohne blauen Untergrund (Wunsch SG, 2026-08-22):
   Die weisse Statusbox sitzt direkt auf dem Seitenhintergrund,
   der blaue Quickbar-Balken dahinter verschwindet. */
@media screen and (max-width: 768px) {
  #quickbar,
  #quickbar .container-fluid {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }
}