/* Mobile adaptation of instop.es: Open Sans, #b93425 and neutral surfaces.
   Loaded after the legacy theme; keep the original Bootstrap grid intact. */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/open-sans-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/open-sans-latin-wght-italic.woff2') format('woff2');
}
:root {
  --instop-red: #b93425;
  --instop-red-dark: #8f281d;
  --instop-green: #438600;
  --instop-green-dark: #367000;
  --instop-text: #404040;
  --instop-muted: #6b6b6b;
  --instop-line: #d7d7d7;
  --instop-soft: #f3f3f3;
}
body {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  color: var(--instop-text);
  font-size: 15px;
  line-height: 1.6;
  background: #fff;
}
h1, h2, h3, h4, h5, h6 { color: var(--instop-text); line-height: 1.3; }
h1 { font-size: clamp(25px, 4vw, 34px); }
h2 { font-size: clamp(22px, 3.5vw, 28px); }
a { color: var(--instop-text); }
a:hover, a:focus { color: var(--instop-red-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--instop-red-dark);
  outline-offset: 3px;
}
button, input, select, textarea { font-family: inherit; }
.section { padding-top: 24px; padding-bottom: 24px; }
.section-title { margin-bottom: 22px; }
.section-title .title { text-transform: none; }

/* Contact strip, logo, search and actions share a predictable layout. */
#top-header { background: var(--instop-red); padding: 0; }
#top-header .header-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  float: none !important; gap: 4px 16px; margin: 0;
}
#top-header .header-links li { margin: 0; }
#top-header .header-links a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px;
  color: #fff; font-size: 12px;
}
#top-header .header-links i { color: #fff; margin: 0; }
#header { padding: 18px 0; background: var(--instop-soft); }
#header .instop-header-layout {
  display: grid; grid-template-columns: 210px minmax(0, 1fr) auto;
  align-items: center; gap: 24px; margin: 0;
}
#header .instop-header-layout::before, #header .instop-header-layout::after { display: none; }
#header .instop-header-layout > div { width: auto; min-width: 0; padding: 0; float: none; }
#header .header-logo { display: block; float: none; }
#header .header-logo .logo { display: flex; align-items: center; min-height: 48px; }
#header .header-logo img { width: 200px; max-width: 100%; height: auto; }
#header .header-search { position: relative; left: auto; width: auto; padding: 0; margin: 0; z-index: 30; }
#header .header-search form { display: flex; width: 100%; }
#header .header-search form .input {
  width: 100% !important; min-width: 0; height: 46px; margin: 0 !important;
  padding: 10px 12px; border: 1px solid var(--instop-line); border-right: 0;
  border-radius: 4px 0 0 4px; background: #fff; color: var(--instop-text); font-size: 16px;
}
#header .header-search form .search-btn {
  position: static; flex: 0 0 76px; width: 76px; height: 46px;
  border: 1px solid var(--instop-red); border-radius: 0 4px 4px 0;
  background: var(--instop-red); color: #fff; font-size: 14px; font-weight: 600;
}
#header .header-search form .search-btn:hover { background: var(--instop-red-dark); }
#header .header-ctn { display: flex; align-items: center; gap: 12px; float: none; padding: 0; }
#header .header-ctn > div + div { margin-left: 0; }
#header .header-ctn > div > a, #header .header-ctn > div > button {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 58px !important; min-height: 48px; padding: 4px 0;
  border: 0; border-radius: 4px; background: transparent; color: var(--instop-text);
  font-size: 12px; line-height: 1.4; cursor: pointer;
}
#header .header-ctn > div > a > i, #header .header-ctn > div > button > i { font-size: 21px; margin-bottom: 4px; }
#header .menu-toggle > button[aria-expanded='true'] { background: #e7e7e7; color: var(--instop-red-dark); }
#header .header-ctn > div > a > .qty, #header .header-ctn > div > button > .qty { position: absolute; right: 0; top: -5px; width: 20px; height: 20px; border-radius: 50%; color: #fff; line-height: 20px; text-align: center; background: var(--instop-red); }
#header .cart-dropdown { width: min(320px, calc(100vw - 32px)); border: 1px solid var(--instop-line); border-radius: 4px; }
#header .instop-cart-empty { padding: 20px; text-align: left; }
#header .instop-cart-empty p { margin: 0 0 10px; }
#header .instop-cart-empty a { display: block; padding: 10px 0; color: var(--instop-red-dark); font-weight: 600; }
#mobile-live-results { overscroll-behavior: contain; border-radius: 0 0 4px 4px; }
#mobile-live-results a { min-height: 56px; }

/* The mobile menu opens in the page flow, so it never covers the search. */
#navigation { border-top: 2px solid var(--instop-red); border-bottom: 1px solid var(--instop-line); }
#navigation .main-nav { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; float: none; }
#navigation .main-nav > li + li { margin-left: 0; }
#navigation .main-nav > li > a { min-height: 48px; padding: 14px 0; color: var(--instop-text); font-weight: 600; font-size: 13px; }
#navigation .main-nav > li > a:hover, #navigation .main-nav > li.active > a { color: var(--instop-red-dark); }
#navigation .main-nav > li > a::after { background: var(--instop-red); }

/* Home and category cards use the quieter framing of the main website. */
.instop-shortcut-grid, .instop-category-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  margin: 24px 0 0;
}
.instop-shortcut-grid::before, .instop-shortcut-grid::after,
.instop-category-grid::before, .instop-category-grid::after { display: none; }
.instop-shortcut-grid:first-child { margin-top: 0; }
.instop-category-grid > .clearfix { display: none !important; }
.instop-shortcut-grid > div, .instop-category-grid > div {
  width: auto !important; min-width: 0; float: none; padding: 0; margin: 0 !important;
}
.instop-shortcut-grid .shop {
  display: flex; flex-direction: column; height: 100%; margin: 0;
  border: 1px solid var(--instop-line); border-radius: 4px; background: #fff;
}
.instop-shortcut-grid .shop::before, .instop-shortcut-grid .shop::after { display: none; }
.instop-shortcut-grid .shop .shop-img { position: relative; z-index: auto; background: var(--instop-soft); }
.instop-shortcut-grid .shop .shop-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.instop-shortcut-grid .shop .shop-body { position: static; width: 100%; padding: 14px; border-top: 3px solid var(--instop-red); }
.instop-shortcut-grid .shop .shop-body h4 { margin: 0; color: var(--instop-text); font-size: 16px; text-shadow: none; }
.instop-shortcut-grid .shop:hover { border-color: var(--instop-red); }
.instop-shortcut-grid .shop:hover .shop-img img { transform: none; }
.instop-home-title { margin: 34px 0 0; font-size: 24px; }
.instop-category-grid .elem {
  display: flex; flex-direction: column; border: 1px solid var(--instop-line); border-radius: 4px; overflow: hidden;
}
.instop-category-grid .elem > a { display: block; padding: 12px; }
.instop-category-grid .elem .principal { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.instop-category-grid .elem h4 { height: auto; margin: 0 !important; padding: 0 14px 16px; font-size: 15px; line-height: 1.4; }
.instop-category-grid .elem h4 a { display: block; }
.instop-category-grid .product { height: 100%; margin: 0; border: 1px solid var(--instop-line); border-radius: 4px; box-shadow: none; }
.instop-category-grid .product:hover, .instop-category-grid .elem:hover { border-color: var(--instop-red); }
.instop-category-grid .product-img { display: block; height: auto !important; padding: 14px; }
.instop-category-grid .product-img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.instop-category-grid .product .product-body { height: auto !important; padding: 0 14px 16px; text-align: left; }
.instop-category-grid .product .product-name { height: auto; margin: 0; text-transform: none; font-size: 16px; line-height: 1.4; }
.instop-category-subtitle { margin-top: 8px; color: var(--instop-muted); font-size: 13px; }
.instop-category-intro { margin: 0; }
.instop-category-intro > font { font-size: 16px; }
.instop-catalogue-strip { margin-left: 0; margin-right: 0; }
body > .row { margin-left: 0; margin-right: 0; }

/* Shared catalogue, product and form components. */
#breadcrumb { padding: 14px 0; margin-bottom: 0; background: #fafafa; }
#breadcrumb .breadcrumb-tree { display: flex; flex-wrap: wrap; gap: 5px 0; line-height: 1.6; }
#breadcrumb .breadcrumb-tree li { font-size: 12px; }
.product { border-color: var(--instop-line); box-shadow: none; border-radius: 4px; }
.product .product-body .product-price, .product-details .product-price { color: var(--instop-red); }
.product .product-body .product-name { text-transform: none; }
.product:hover { box-shadow: 0 0 0 1px var(--instop-red); }
.product-details .product-name { font-size: clamp(22px, 4vw, 30px); line-height: 1.3; }
.primary-btn, .product-details .add-to-cart .add-to-cart-btn, .boton-enviarA {
  min-height: 46px; border-radius: 4px; background: var(--instop-red); color: #fff;
  font-weight: 600; text-transform: none;
}
.primary-btn:hover, .product-details .add-to-cart .add-to-cart-btn:hover, .boton-enviarA:hover {
  background: var(--instop-red-dark); color: #fff;
}
/* Purchase buttons match the desktop website; the cart icon is always visible. */
.product-details .add-to-cart .add-to-cart-btn.instop-buy-btn,
.product .add-to-cart .add-to-cart-btn.instop-buy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 150px; max-width: 100%; min-height: 48px; height: auto; padding: 10px 18px;
  border: 1px solid var(--instop-green); border-radius: 4px;
  background: var(--instop-green); color: #fff; box-shadow: none;
  font-size: 15px; font-weight: 700; line-height: 1.2; text-transform: uppercase;
  transition: background-color .2s, border-color .2s;
}
.product-details .add-to-cart .add-to-cart-btn.instop-buy-btn:hover,
.product .add-to-cart .add-to-cart-btn.instop-buy-btn:hover {
  padding: 10px 18px; border-color: var(--instop-green-dark);
  background: var(--instop-green-dark); color: #fff;
}
.product-details .add-to-cart .add-to-cart-btn.instop-buy-btn:focus-visible,
.product .add-to-cart .add-to-cart-btn.instop-buy-btn:focus-visible {
  outline: 3px solid var(--instop-green-dark); outline-offset: 3px;
}
.product-details .add-to-cart .add-to-cart-btn.instop-buy-btn > i,
.product .add-to-cart .add-to-cart-btn.instop-buy-btn > i {
  position: static; width: auto; height: auto; line-height: 1;
  color: inherit; opacity: 1; visibility: visible;
}
.input, .inputf, .selectf, .notes-formulariA {
  max-width: 100%; min-height: 44px; border: 1px solid var(--instop-line); border-radius: 4px;
  font-size: 16px; padding: 10px 12px; background: #fff; color: var(--instop-text);
}
textarea.input, textarea.inputf, .notes-formulariA { min-height: 120px; height: auto; line-height: 1.5; }
#formulari, #formulariA { max-width: 100%; font-family: inherit; font-size: 15px; }
#formulari input:not([type='checkbox']):not([type='radio']), #formulari select, #formulari textarea {
  max-width: 100%; min-height: 44px; font-family: inherit; font-size: 16px;
}
#formulari textarea { box-sizing: border-box; }
#product-tab .tab-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
#product-tab .tab-nav li { margin: 0; }
#product-tab .tab-nav li a { display: block; min-height: 44px; padding: 10px 0; }
#product-tab .tab-nav li.active a, #product-tab .tab-nav li a:hover { color: var(--instop-red-dark); }
#product-tab .tab-nav li a::after { background: var(--instop-red); }
#product-tab .tab-content { max-width: 100%; overflow-x: auto; }
#product-tab .tab-content img { max-width: 100%; height: auto; }

/* Light footer matches the main site's neutral palette. */
#footer { background: var(--instop-soft); color: var(--instop-text); border-top: 3px solid var(--instop-red); }
#footer .footer { margin: 14px 0 22px; }
#footer .footer .footer-title { color: var(--instop-text); font-size: 15px; margin-bottom: 12px; text-transform: none; }
#footer .footer-links li + li { margin-top: 0; }
#footer .footer-links li a { display: inline-block; padding: 7px 0; color: var(--instop-text); line-height: 1.45; }
#footer .footer-links li a:hover { color: var(--instop-red-dark); text-decoration: underline; }
#footer .footer-links li i { color: var(--instop-red); }
#footer .instop-footer-links-grid, #footer .instop-footer-offices { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; margin: 0; }
#footer .instop-footer-offices { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 24px; border-top: 1px solid var(--instop-line); }
#footer .instop-footer-links-grid > div, #footer .instop-footer-offices > div { width: auto; min-width: 0; padding: 0; }
#footer .instop-footer-links-grid::before, #footer .instop-footer-links-grid::after,
#footer .instop-footer-offices::before, #footer .instop-footer-offices::after { display: none; }
#footer .instop-footer-links-grid > .clearfix { display: none !important; }
#footer .instop-footer-offices h4 { font-size: 16px; }
#footer .instop-footer-offices .footer-title a { color: inherit; font-weight: inherit; }
#footer .instop-footer-offices .footer-title a:hover { color: var(--instop-red-dark); text-decoration: underline; }
#footer .instop-footer-offices a { overflow-wrap: anywhere; }
#bottom-footer { background: #e7e7e7; padding: 20px 0; }
#bottom-footer .copyright { color: var(--instop-muted); font-size: 12px; }
#newsletter { border-top-color: var(--instop-line); border-bottom: 0; }
#newsletter img { max-width: 100%; height: auto; }
.video span, .video span:hover { display: flex; align-items: center; justify-content: center; background: none !important; }
.video span::after { content: '\f144'; font-family: FontAwesome; font-size: 38px; line-height: 1; color: #fff; text-shadow: 0 1px 5px #333; }
.slick-prev::before, .slick-next::before { font-family: Arial, sans-serif; }

@media (max-width: 991px) {
  #header .instop-header-layout { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
  #header .instop-header-brand { grid-column: 1; grid-row: 1; }
  #header .instop-header-actions { grid-column: 2; grid-row: 1; }
  #header .instop-header-search { grid-column: 1 / -1; grid-row: 2; }
  #header .header-ctn .menu-toggle { display: block; }
  #responsive-nav {
    position: static; display: none; width: auto; max-width: none; height: auto;
    padding: 8px 0; transform: none; overflow: visible; background: #fff;
  }
  #responsive-nav.active { display: block; width: auto; transform: none; }
  #navigation .main-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  #navigation .main-nav > li { float: none; }
  #navigation .main-nav > li > a { padding: 14px 8px; border-bottom: 1px solid #eee; }
  .instop-shortcut-grid, .instop-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #footer .instop-footer-links-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #footer .instop-footer-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .container { padding-left: 16px; padding-right: 16px; }
  #header { padding: 14px 0 16px; }
  #header .header-logo img { width: 180px; }
  #header .header-ctn { gap: 6px; }
  #header .header-ctn > div > a, #header .header-ctn > div > button { width: 50px !important; }
  #header .cart-dropdown { right: -56px; }
  .section { padding-top: 20px; padding-bottom: 20px; }
  .instop-shortcut-grid, .instop-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
  .instop-shortcut-grid .shop .shop-body { padding: 12px; }
  .instop-shortcut-grid .shop .shop-body h4 { font-size: 15px; }
  .instop-category-grid .product .product-name { font-size: 15px; }
  .instop-category-grid .elem h4 { padding: 0 10px 12px; font-size: 14px; }
  .instop-category-grid .product .product-body { padding: 0 10px 12px; }
  .instop-category-grid .product-img { padding: 10px; }
  #footer .col-xs-6 { width: 50%; }
  #footer .col-xs-4 { width: 100%; }
  #footer .footer-links li a { min-height: 44px; padding: 11px 0; }
  #footer .footer .footer-title { min-height: 20px; }
  #footer .footer-links { font-size: 14px; }
  #footer .instop-footer-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  #footer .instop-footer-offices { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 359px) {
  #header .header-logo img { width: 145px; }
  #header .instop-header-layout { gap: 12px; }
  #top-header .header-links { gap: 0 8px; }
  #top-header .header-links a { font-size: 11px; }
  #header .header-search form .input { font-size: 16px; padding-left: 10px; }
  #header .header-search form .search-btn { flex-basis: 66px; width: 66px; }
}
@media (max-width: 480px) {
  #formulariA .campA > div[style*='width:49%'] { width: 100% !important; float: none !important; margin-bottom: 16px; }
  #formulariA .selectf { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .shop .shop-img img, .product, .main-nav > li > a::after { transition: none; }
}
