/* ALFA-DESIGN mobile improvements, 2026-10-16. Desktop keeps its existing layout. */
@media screen and (max-width: 700px) {
  html body.alfa-product #container header > .banners_container { display: none !important; }
  html body.alfa-product #container header { padding-bottom: 0; }
  html body #container #main_container #main #content #product h1 {
    font-size: 20px; line-height: 1.3; margin: 8px 0 10px;
  }
  html body #product h1 .producer-logo-container { display: none; }
  html body #container #main_container #main #content #product #breadcrumb {
    font-size: 11px; line-height: 1.35; margin-bottom: 10px;
  }
  html body #container #main_container #main #content #product #gallery {
    height: auto !important; text-align: center;
  }
  html body #container #main_container #main #content #product #gallery .zoomWrapper {
    width: 100% !important; height: auto !important;
  }
  html body #container #main_container #main #content #product #product_image {
    display: block; position: static !important; width: 100% !important;
    height: clamp(220px, 30vh, 280px) !important; object-fit: contain;
    max-width: 100% !important; margin: 0 auto;
  }
  html body #container #main_container #main #content #product #gallery_list {
    display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
    padding: 8px 0; margin: 0; text-align: left;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  html body #product #gallery_list a {
    display: block; flex: 0 0 58px; width: 58px; height: 58px;
    border: 2px solid #e5e5e5; border-radius: 6px; scroll-snap-align: start;
  }
  html body #product #gallery_list a.active { border-color: #e87500; }
  html body #product #gallery_list a img {
    display: block; width: 100%; height: 100%; object-fit: contain;
  }
  html body #container #main_container #main #content #product > .block50 { margin-top: 0; margin-bottom: 12px; }
  html body #container #main_container #main #content #product #order {
    border: 1px solid #ededed; border-radius: 10px; padding: 12px;
    box-sizing: border-box; background: #fff;
  }
  html body #container #main_container #main #content #product #order .prices { margin: 0 0 10px; }
  html body #product #order .price.gross > .value { font-size: 30px; }
  html body #product #basket-add { padding: 0; }
  html body #container #main_container #main #content #product #basket input[type="submit"] {
    box-sizing: border-box; width: 100%; min-height: 48px; font-size: 17px;
    line-height: 1.3; padding: 12px 10px; margin: 8px 0; border-radius: 6px;
  }
  html body #container #main_container #main #content input:not([type="hidden"]),
  html body #container #main_container #main #content select,
  html body #container #main_container #main #content textarea { font-size: 16px; }
  html body #product #basket select, html body #product #basket input.quantity,
  html body #page #personal-data-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  html body #page #personal-data-form select { min-height: 44px; box-sizing: border-box; }
  html body #page #step-next, html body #page #order-step button,
  html body #page #order-step a { min-height: 48px; box-sizing: border-box; }
  html body #product .description img { max-width: 100%; height: auto; }
}

/* Guest checkout precedes account creation in the document and keyboard order. */
@media screen and (max-width: 700px) {
  html body #container #main_container #main #content #page #order.alfa-checkout-choice > .block50 {
    box-sizing: border-box; width: calc(100% - 20px); margin: 10px;
  }
  html body #container #main_container #main #content #page #order.alfa-checkout-choice .alfa-checkout-guest {
    border: 1px solid #f1b173; border-radius: 8px; background: #fff8f0; padding: 14px;
  }
  html body #page #order.alfa-checkout-choice .alfa-checkout-guest h2 {
    margin: 0 0 12px; font-size: 20px; line-height: 1.3;
  }
  html body #container #main #content #page #order.alfa-checkout-choice #order-next #step-next {
    display: block; width: 100%; min-height: 48px; margin: 0;
    box-sizing: border-box; padding: 12px 10px; font-size: 17px; line-height: 1.3;
  }
  html body #page #order.alfa-checkout-choice .alfa-checkout-account > label {
    display: block; padding: 10px 0; line-height: 1.4;
  }
  html body #container #main #content #page #order.alfa-checkout-choice #order-register #rules td,
  html body #container #main #content #page #order.alfa-checkout-choice #order-register #rules2 td,
  html body #container #main #content #page #order.alfa-checkout-choice #order-register #newsletter td {
    padding: 8px 0; font-size: 14px; line-height: 1.4;
  }
  html body #container #main #content #page #order.alfa-checkout-choice #order-register #rules label,
  html body #container #main #content #page #order.alfa-checkout-choice #order-register #rules2 label,
  html body #container #main #content #page #order.alfa-checkout-choice #order-register #newsletter label {
    display: inline; font-size: 14px; line-height: 1.4;
  }
  html body #page #order.alfa-checkout-choice input[type="checkbox"],
  html body #page #order.alfa-checkout-choice input[type="radio"] {
    width: 20px; height: 20px; vertical-align: middle; margin: 0 7px 0 0;
  }
}

/* Account forms are disclosed by accessible, non-submitting buttons. */
html body #container #main #content #page #order.alfa-checkout-choice .alfa-account-toggle {
  display: block; width: 100%; min-height: 48px; box-sizing: border-box;
  padding: 12px 14px; margin: 10px 0; border: 1px solid #aaa; border-radius: 6px;
  background: #fff; color: #333; font: inherit; font-size: 16px;
  line-height: 1.4; text-align: center; cursor: pointer;
}
html body #container #main #content #page #order.alfa-checkout-choice .alfa-account-toggle:hover,
html body #container #main #content #page #order.alfa-checkout-choice .alfa-account-toggle[aria-expanded="true"] {
  border-color: #d56600; background: #fff8f0;
}
html body #container #main #content #page #order.alfa-checkout-choice .alfa-account-toggle:focus-visible {
  outline: 3px solid #175f99; outline-offset: 3px;
}

/* Homepage only: two columns on phones. Desktop rules remain unchanged. */
@media screen and (max-width:700px){
html body #container #main #content #page.page_id_1 .alfa-home-grid .products.LIGHTBOXES{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;}
html body #container #main #content #page.page_id_1 .alfa-home-grid .products.LIGHTBOXES > li{display:flex;flex-direction:column;float:none;width:auto!important;min-width:0;margin:0;padding:6px;box-sizing:border-box;border:1px solid #e5e5e5;border-radius:5px;height:auto;overflow:hidden;}
html body #container #main #content #page.page_id_1 .alfa-home-grid .products.LIGHTBOXES > li .photo{order:1;width:100%;height:auto;position:relative;margin:0;}
html body #container #main #content #page.page_id_1 .alfa-home-grid .products.LIGHTBOXES > li .photo > a{display:block;width:100%;}
html body #container #main #content #page.page_id_1 .alfa-home-grid .products.LIGHTBOXES > li .photo img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;max-width:100%;}
html body #container #main #content #page.page_id_1 .alfa-home-grid .products.LIGHTBOXES > li .hover{order:2;position:static;display:block;opacity:1!important;visibility:visible;background:none;width:auto;height:auto;padding:0;color:#222;}
html body #container #main #content #page.page_id_1 .alfa-home-grid .products.LIGHTBOXES > li .hover h3{position:static;margin:8px 0 4px;padding:0;height:auto;text-align:left;font-size:13px;font-weight:normal;line-height:1.35;}
html body #container #main #content #page.page_id_1 .alfa-home-grid .products.LIGHTBOXES > li .hover h3 a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;min-height:53px;color:#222;font-size:13px;line-height:1.35;}
html body #container #main #content #page.page_id_1 .alfa-home-grid .products.LIGHTBOXES > li .hover > a, html body #container #main #content #page.page_id_1 .alfa-home-grid .products.LIGHTBOXES > li .hover > input, html body #container #main #content #page.page_id_1 .alfa-home-grid .products.LIGHTBOXES > li .hover .compare{display:none!important;}
html body #container #main #content #page.page_id_1 .alfa-home-grid .products.LIGHTBOXES > li .prices{order:3;position:static;width:100%;margin:4px 0 0;padding:0;text-align:left;background:none;}
html body #container #main #content #page.page_id_1 .alfa-home-grid .products.LIGHTBOXES > li .prices .price{font-size:16px;line-height:1.4;}
html body #container #main #content #page.page_id_1 .alfa-home-grid .products.LIGHTBOXES > li .prices .value{font-size:16px;}
html body #container #main #content #page.page_id_1 .alfa-home-grid .products.LIGHTBOXES > li .prices .old, html body #container #main #content #page.page_id_1 .alfa-home-grid .products.LIGHTBOXES > li .prices .old .value{font-size:12px;}
html body #container #main #content #page.page_id_1 .alfa-home-grid .products.LIGHTBOXES > li .photo .promo{font-size:10px;padding:2px 4px;max-width:100%;box-sizing:border-box;}
}

/* Current product delivery quote, sourced from the checkout calculator. */
#product #alfa-product-delivery {margin:12px 0 16px;padding:12px;background:#f7f7f7;border-radius:7px;text-align:left;color:#333;font-size:14px;line-height:1.45;}
#product #alfa-product-delivery p {margin:0 0 10px;padding:0;}
#product #alfa-product-delivery strong,#product #alfa-product-delivery span {display:block;}
#product #alfa-product-delivery small {display:block;font-size:11px;line-height:1.4;color:#666;}
#product #alfa-product-delivery [hidden] {display:none!important;}

/* Product recommendation grids. Bought together: 8 desktop / 6 phone. */
html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid){float:none;clear:both;width:100%;box-sizing:border-box;}
html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;width:100%;}
html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li{display:flex;flex-direction:column;float:none;width:auto!important;max-width:none!important;min-width:0;min-height:0;margin:0;padding:8px;box-sizing:border-box;border:1px solid #e5e5e5;border-radius:5px;height:auto!important;overflow:hidden;}
html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li:nth-child(n+9){display:none!important;}
html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li .photo{order:1;width:100%;height:auto!important;position:relative;margin:0;}
html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li .photo > a{display:block;width:100%;}
html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li .photo img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;max-width:100%;}
html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li .hover{order:2;position:static;display:block!important;opacity:1!important;visibility:visible!important;background:none;width:auto;height:auto!important;padding:0;color:#222;}
html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li .hover h3{position:static;margin:8px 0 4px;padding:0;height:auto;text-align:left;font-size:14px;font-weight:normal;line-height:1.35;}
html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li .hover h3 a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;min-height:57px;color:#222;font-size:14px;line-height:1.35;}
html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li .hover > a,html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li .hover > input,html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li .hover .compare{display:none!important;}
html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li .prices{order:3;position:static;width:100%;margin:auto 0 0;padding:4px 0 0;text-align:left;background:none;}
html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li .prices .price,html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li .prices .value{font-size:19px;line-height:1.4;}
html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li .prices .old,html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li .prices .old .value{font-size:12px;}
html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li .photo .promo{font-size:10px;padding:2px 4px;max-width:100%;box-sizing:border-box;}
@media screen and (max-width:700px){
html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li{padding:6px;}
html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li:nth-child(n+7){display:none!important;}
html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li .hover h3,html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li .hover h3 a{font-size:13px;}
html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li .hover h3 a{min-height:53px;}
html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li .prices .price,html body #container #main #content #product :is(.alfa-bought-together,.alfa-related-grid) .products.LIGHTBOXES > li .prices .value{font-size:16px;}
}

/* Related products and accessories: four cards, two columns on phones. */
html body #container #main #content #product .alfa-related-grid .products.LIGHTBOXES > li:nth-child(n+5){display:none!important;}

@media screen and (max-width:700px){
html body #container #main #content #product .alfa-related-grid .products.LIGHTBOXES > li:nth-child(n+3){display:none!important;}
}

/* Mobile personal-data step; native checkout actions and desktop layout retained. */
html body #container #main_container #main #content #page #order #personal-data-form .alfa-consent-heading{display:none;}
html body #container #main_container #main #content #page #order #personal-data-form span.alfa-field-error{display:block;color:#ad1f1f;font:12px/1.4 Arial,sans-serif;margin:5px 0;text-align:left;}
@media screen and (max-width:700px){
html body #container #main_container #main #content #page #order #personal-data-form{width:100%;padding:0;margin:0;text-align:left;}
html body #container #main_container #main #content #page #order #personal-data-form > .block50{float:none;clear:both;width:100%;max-width:none;margin:0;padding:0;box-sizing:border-box;}
html body #container #main_container #main #content #page #order #personal-data-form fieldset{min-width:0;border:0;padding:0;margin:0 0 20px;}
html body #container #main_container #main #content #page #order #personal-data-form fieldset > h2{font:700 17px/1.3 Arial,sans-serif;color:#282828;background:none;padding:0;margin:0 0 12px;text-transform:none;border:0;}
html body #container #main_container #main #content #page #order #personal-data-form table{width:100%;max-width:100%;border:0;margin:0;padding:0;table-layout:auto;}
html body #container #main_container #main #content #page #order #personal-data-form tbody{display:block;width:100%;}
html body #container #main_container #main #content #page #order #personal-data-form tr{display:block;width:100%;margin:0 0 13px;}
html body #container #main_container #main #content #page #order #personal-data-form th,html body #container #main_container #main #content #page #order #personal-data-form td{display:block;width:100%;padding:0;margin:0;text-align:left;box-sizing:border-box;border:0;}
html body #container #main_container #main #content #page #order #personal-data-form th{font:700 13px/1.35 Arial,sans-serif;padding:0 0 5px;}
html body #container #main_container #main #content #page #order #personal-data-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]),html body #container #main_container #main #content #page #order #personal-data-form select{width:100%!important;max-width:100%!important;min-width:0!important;height:46px;min-height:46px;padding:10px 11px;margin:0;border:1px solid #bcbcbc;border-radius:6px;box-sizing:border-box;background:#fff;color:#222;font:16px/1.3 Arial,sans-serif;box-shadow:none;}
html body #container #main_container #main #content #page #order #personal-data-form input:focus,html body #container #main_container #main #content #page #order #personal-data-form select:focus{outline:2px solid #d45e00;outline-offset:1px;}
html body #container #main_container #main #content #page #order #personal-data-form input.validation-error,html body #container #main_container #main #content #page #order #personal-data-form select.validation-error{border-color:#ba2525;background-color:#fffafa;}
html body #container #main_container #main #content #page #order #personal-data-form td > img.tTip{display:none;}
html body #container #main_container #main #content #page #order #personal-data-form #personal-data > label,html body #container #main_container #main #content #page #order #personal-data-form #postal-data > label{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin:0 14px 10px 0;font:14px/1.35 Arial,sans-serif;}
html body #container #main_container #main #content #page #order #personal-data-form input[type=checkbox],html body #container #main_container #main #content #page #order #personal-data-form input[type=radio]{width:21px;height:21px;min-width:21px;margin:0;accent-color:#c65500;}
html body #container #main_container #main #content #page #order #personal-data-form .alfa-consent-heading{display:block;font:700 17px/1.3 Arial,sans-serif;margin:17px 0 8px;padding:0;background:none;color:#282828;border:0;}
html body #container #main_container #main #content #page #order #personal-data-form .alfa-consent-heading.alfa-optional{font-size:14px;padding-top:12px;border-top:1px solid #ddd;}
html body #container #main_container #main #content #page #order #personal-data-form fieldset.alfa-consent-row{display:grid;grid-template-columns:23px minmax(0,1fr);column-gap:9px;row-gap:4px;align-items:start;min-height:44px;padding:8px 0;margin:0;}
html body #container #main_container #main #content #page #order #personal-data-form fieldset.alfa-consent-row > input{margin-top:2px;}
html body #container #main_container #main #content #page #order #personal-data-form fieldset.alfa-consent-row > label{display:block;font:13px/1.45 Arial,sans-serif;color:#333;text-align:left;min-height:32px;padding:0 0 8px;}
html body #container #main_container #main #content #page #order #personal-data-form fieldset.alfa-consent-row > div{grid-column:1/-1;}
html body #container #main_container #main #content #page #order #personal-data-form fieldset.alfa-consent-row > span.alfa-field-error{grid-column:2;}
html body #container #main_container #main #content #page #order #personal-data-form .alfa-consent-prefix{display:none;}
html body #container #main_container #main #content #page #order #personal-data-form #order-step{display:flex;flex-direction:column-reverse;gap:10px;clear:both;padding-top:18px;}
html body #container #main_container #main #content #page #order #personal-data-form #order-step button{width:100%;min-height:48px;box-sizing:border-box;margin:0;border-radius:6px;font-size:16px;}
}

@media screen and (max-width:700px){html body #container #main_container #main #content #page #order #personal-data-form .ui-selectmenu{width:100%!important;max-width:100%;min-height:46px;box-sizing:border-box;font-size:16px;}html body #container #main_container #main #content #page #order #personal-data-form .ui-selectmenu-status{min-height:44px;box-sizing:border-box;}}