/**
 * LIQUI MOLY Ecuador — Brand Redesign 2026
 * Warehouse ALT Theme — Custom CSS Override
 *
 * Basiert auf dem neuen LIQUI MOLY Corporate Design:
 * - Primary Blue: #00519e
 * - Accent Red: #e2001a
 * - Clean, minimal, German engineering aesthetic
 * - Inter font family
 * - Pill-shaped buttons (border-radius: 100px)
 *
 * @import url fuer Inter Font ist am Ende der Datei
 */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ========================================================================== */
:root {
  --lm-blue: #00519e;
  --lm-blue-dark: #003d77;
  --lm-blue-light: #e8f0fa;
  --lm-blue-hover: #0069cc;
  --lm-red: #e2001a;
  --lm-red-light: #ffe5e8;
  --lm-green: #009f10;
  --lm-green-light: #e5f5e7;
  --lm-yellow: #f5a623;
  --lm-dark: #1a1a1a;
  --lm-gray-900: #303030;
  --lm-gray-700: #555555;
  --lm-gray-500: #888888;
  --lm-gray-300: #cccccc;
  --lm-gray-200: #e0e0e0;
  --lm-gray-100: #f6f6f6;
  --lm-white: #ffffff;
  --lm-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --lm-gap: 20px;
  --lm-radius: 8px;
  --lm-radius-lg: 12px;
  --lm-radius-pill: 100px;
  --lm-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --lm-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --lm-shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --lm-transition: 0.2s ease;
  --lm-transition-slow: 0.3s ease;
}

/* ==========================================================================
   2. TYPOGRAPHY & BASE
   ========================================================================== */
body {
  font-family: var(--lm-font) !important;
  color: var(--lm-gray-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-display: swap;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: var(--lm-font) !important;
  color: var(--lm-dark);
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
a { color: var(--lm-blue); transition: color var(--lm-transition); }
a:hover { color: var(--lm-blue-dark); }
.sr-only,.visually-hidden { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;border:0!important; }
html { scroll-behavior: smooth; }

/* ==========================================================================
   3. HEADER & NAVIGATION
   ========================================================================== */
#header .header-nav,.header-top {
  background: var(--lm-dark) !important;
  color: var(--lm-white);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}
#header {
  background: var(--lm-white);
  border-bottom: 1px solid var(--lm-gray-200);
  box-shadow: none;
}
#header.is-sticky,#header.sticky-header { box-shadow: var(--lm-shadow-sm); }
.header-logo img { max-height: 36px; width: auto; }

/* Nav Links */
#_desktop_top_menu .top-menu > li > a,
.main-menu > ul > li > a,
.anav-top > li > a {
  font-family: var(--lm-font) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lm-gray-900) !important;
  padding: 10px 16px !important;
  transition: color var(--lm-transition);
  position: relative;
}
#_desktop_top_menu .top-menu > li > a:hover,
.main-menu > ul > li > a:hover,
.anav-top > li > a:hover,
.anav-top > li.sfHover > a {
  color: var(--lm-blue) !important;
}
/* Nav underline */
#_desktop_top_menu .top-menu > li > a::after,
.anav-top > li > a::after {
  content:''; position:absolute; bottom:0; left:16px; right:16px;
  height:2px; background:var(--lm-blue); transform:scaleX(0);
  transition:transform var(--lm-transition); transform-origin:center;
}
#_desktop_top_menu .top-menu > li > a:hover::after,
.anav-top > li > a:hover::after,
.anav-top > li.sfHover > a::after { transform:scaleX(1); }

/* Search */
#search_widget form,.search-widget form {
  border-radius: var(--lm-radius-pill) !important;
  background: var(--lm-gray-100) !important;
  border: 1px solid transparent !important;
  overflow: hidden;
  transition: border-color var(--lm-transition), box-shadow var(--lm-transition);
}
#search_widget form:focus-within,.search-widget form:focus-within {
  border-color: var(--lm-blue) !important;
  box-shadow: 0 0 0 3px rgba(0,81,158,0.1);
}
#search_widget form input[type="text"],.search-widget form input[type="text"] {
  font-family: var(--lm-font); font-size: 0.85rem; color: var(--lm-gray-900);
}

/* Header Icons */
.header-right-section a,.blockcart .header a,.user-info a {
  color: var(--lm-gray-900) !important;
  transition: color var(--lm-transition);
}
.header-right-section a:hover,.blockcart .header a:hover,.user-info a:hover {
  color: var(--lm-blue) !important;
}
/* Cart Badge */
.blockcart .cart-products-count,.header-cart .cart-products-count {
  background: var(--lm-red) !important;
  color: var(--lm-white) !important;
  font-size: 0.6rem; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 50%;
}

/* ==========================================================================
   4. HERO / SLIDER & LCP
   ========================================================================== */
.page-home #hook-home > .revslider-wrapper,
.page-home #hook-home > div:first-child,
.page-home .displayTopColumn,
#rev_slider_wrapper,.rev_slider_wrapper {
  min-height: 300px; contain: layout style;
}
@media (min-width: 768px) {
  .page-home #hook-home > .revslider-wrapper,
  .page-home #hook-home > div:first-child,
  #rev_slider_wrapper,.rev_slider_wrapper { min-height: 450px; }
}
#page-preloader { display: none !important; }
#main-page-content { opacity: 1 !important; }

/* ==========================================================================
   5. PRODUCT CARDS
   ========================================================================== */
.product-miniature {
  border: 1px solid var(--lm-gray-200) !important;
  border-radius: var(--lm-radius-lg) !important;
  overflow: hidden;
  transition: transform var(--lm-transition), box-shadow var(--lm-transition), border-color var(--lm-transition);
  background: var(--lm-white);
}
.product-miniature:hover {
  transform: translateY(-4px);
  box-shadow: var(--lm-shadow-lg);
  border-color: var(--lm-gray-300) !important;
}
.product-miniature .thumbnail-container { position:relative; overflow:hidden; background:var(--lm-gray-100); }
.product-miniature .product-thumbnail img {
  aspect-ratio: 236/305; object-fit: contain;
  width: 100%; height: auto;
  transition: transform var(--lm-transition-slow);
}
.product-miniature:hover .product-thumbnail img { transform: scale(1.05); }

/* Product Flags */
.product-flag {
  border-radius: var(--lm-radius-pill) !important;
  font-size: 0.7rem !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 10px !important;
}
.product-flag.discount { background: var(--lm-red) !important; color: var(--lm-white) !important; }
.product-flag.new { background: var(--lm-green) !important; color: var(--lm-white) !important; }

/* Product Info */
.product-miniature .product-title a {
  font-family: var(--lm-font) !important;
  font-size: 0.9rem !important; font-weight: 600 !important;
  color: var(--lm-gray-900) !important; line-height: 1.3;
}
.product-miniature .product-title a:hover { color: var(--lm-blue) !important; }

/* Product Price */
.product-price-and-shipping .product-price,
.product-miniature .product-price-and-shipping .price {
  font-size: 1.1rem !important; font-weight: 700 !important; color: var(--lm-dark) !important;
}
.product-price-and-shipping .regular-price {
  text-decoration: line-through; opacity: 0.6; font-size: 0.85rem;
}

/* Add to Cart in List */
.product-miniature .add-to-cart,
.product-miniature .btn-product-list,
.product-add-cart .btn {
  background: var(--lm-blue) !important; color: var(--lm-white) !important;
  border: none !important; border-radius: var(--lm-radius-pill) !important;
  font-weight: 600; font-size: 0.85rem;
  text-transform: none; letter-spacing: 0.02em;
  transition: all var(--lm-transition); padding: 8px 20px;
}
.product-miniature .add-to-cart:hover,
.product-miniature .btn-product-list:hover,
.product-add-cart .btn:hover {
  background: var(--lm-blue-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,81,158,0.25);
}

/* ==========================================================================
   6. CATEGORY PAGES
   ========================================================================== */
.category-header,.block-category {
  background: linear-gradient(135deg, #001a3a 0%, var(--lm-blue) 100%);
  color: var(--lm-white); padding: 40px 0;
}
.category-header h1,.block-category h1 {
  color: var(--lm-white) !important; font-size: 2rem; font-weight: 800;
}
.category-cover img {
  aspect-ratio: 1003/200; object-fit: cover; width: 100%; height: auto;
}
.products-sort-order .select-title,.products-sort-order .select-list {
  border-radius: var(--lm-radius-pill); border-color: var(--lm-gray-200);
  font-family: var(--lm-font); font-size: 0.85rem;
}
.active_filters .filter-block {
  background: var(--lm-blue-light); color: var(--lm-blue);
  border-radius: var(--lm-radius-pill); font-weight: 600;
}
.pagination .page-list li a,.pagination .page-list li span {
  border-radius: var(--lm-radius) !important; font-weight: 500;
  min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
}
.pagination .page-list li.current a,.pagination .page-list li .current {
  background: var(--lm-blue) !important; color: var(--lm-white) !important; border-color: var(--lm-blue) !important;
}
.facet .facet-title {
  font-family: var(--lm-font) !important; font-weight: 700;
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em;
}

/* ==========================================================================
   7. PRODUCT DETAIL PAGE
   ========================================================================== */
.product-container h1.page-title,.product-container .h1 {
  font-size: 2rem !important; font-weight: 800 !important;
  color: var(--lm-dark) !important; letter-spacing: -0.02em;
}
.product-reference { font-size: 0.85rem; color: var(--lm-gray-500); }
.product-prices .current-price .price,.product-prices .product-price {
  font-size: 2.2rem !important; font-weight: 800 !important; color: var(--lm-dark) !important;
}
.product-prices .tax-shipping-delivery-label { font-size: 0.8rem; color: var(--lm-gray-500); }
.product-availability .product-available { color: var(--lm-green); font-weight: 600; }

/* Gallery */
.product-cover img,.images-container .product-cover img {
  aspect-ratio: 381/492; object-fit: contain; width: 100%; height: auto;
}
.images-container { position: relative; }
@media (min-width: 992px) {
  .col-product-image { position: sticky; top: 1rem; align-self: flex-start; }
}
.product-images .thumb-container {
  border: 2px solid transparent; border-radius: var(--lm-radius);
  overflow: hidden; transition: border-color var(--lm-transition); padding: 2px;
}
.product-images .thumb-container:hover { border-color: var(--lm-gray-300); }
.product-images .thumb-container .js-thumb-selected,
.product-images .thumb-container .selected { border-color: var(--lm-blue); }
.product-image-count {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,0.65); color: var(--lm-white);
  font-size: 0.75rem; padding: 4px 12px;
  border-radius: var(--lm-radius-pill); z-index: 5; pointer-events: none;
}

/* Video */
.product-video-slide { position:relative; background:#000; display:flex; align-items:center; justify-content:center; }
.product-video-container { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.video-poster { position:relative; width:100%; cursor:pointer; }
.video-poster img { width:100%; height:auto; object-fit:contain; filter:brightness(0.85); transition:filter var(--lm-transition-slow); }
.video-poster:hover img { filter:brightness(0.75); }
.video-play-btn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:none; border:none; cursor:pointer; z-index:2; transition:transform var(--lm-transition); padding:0; }
.video-play-btn:hover { transform:translate(-50%,-50%) scale(1.1); }
.video-play-btn svg { filter:drop-shadow(0 2px 8px rgba(0,0,0,0.4)); }
.product-video-container iframe,.product-video-container video { width:100%; aspect-ratio:16/9; border:none; border-radius:var(--lm-radius); }
.video-thumb-container { position:relative; cursor:pointer; }
.video-thumb-overlay { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; pointer-events:none; }
.video-thumb-container img { filter:brightness(0.8); }
.video-thumb-container:hover img { filter:brightness(0.7); }

/* Add to Cart */
.product-add-to-cart .add-to-cart,
.product-quantity .add-to-cart,
#add-to-cart-or-refresh .add-to-cart {
  background: var(--lm-blue) !important; color: var(--lm-white) !important;
  border: none !important; border-radius: var(--lm-radius-pill) !important;
  font-weight: 600 !important; font-size: 0.95rem !important;
  padding: 12px 32px !important;
  transition: all var(--lm-transition); text-transform: none; letter-spacing: 0.02em;
}
.product-add-to-cart .add-to-cart:hover,
.product-quantity .add-to-cart:hover,
#add-to-cart-or-refresh .add-to-cart:hover {
  background: var(--lm-blue-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,81,158,0.25);
}
.product-quantity .qty,.product-quantity #quantity_wanted {
  border-radius: var(--lm-radius-pill);
  border: 1px solid var(--lm-gray-200);
  text-align: center; font-weight: 600; font-family: var(--lm-font);
}
.product-information .product-description { line-height: 1.7; color: var(--lm-gray-700); }
.product-information .product-features {
  margin-top: 1rem; padding: 1rem; background: var(--lm-gray-100);
  border-radius: var(--lm-radius-lg); border: 1px solid var(--lm-gray-200);
}
.product-information .product-features li {
  padding: 0.5rem 0; border-bottom: 1px solid var(--lm-gray-200); font-size: 0.9rem;
}
.product-information .product-features li:last-child { border-bottom: none; }

/* Tabs */
.product-tabs .nav-tabs .nav-link,
.product-tabs-h .nav-tabs .nav-link {
  font-family: var(--lm-font) !important; font-weight: 600; font-size: 0.9rem;
  color: var(--lm-gray-500); padding: 12px 24px;
  border: none; border-bottom: 2px solid transparent; transition: all var(--lm-transition);
}
.product-tabs .nav-tabs .nav-link:hover,
.product-tabs-h .nav-tabs .nav-link:hover { color: var(--lm-gray-900); }
.product-tabs .nav-tabs .nav-link.active,
.product-tabs-h .nav-tabs .nav-link.active {
  color: var(--lm-blue) !important; border-bottom-color: var(--lm-blue) !important;
  background: transparent !important;
}

/* Datasheet Link */
.product-datasheet-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 10px 20px; background: var(--lm-gray-100);
  border-radius: var(--lm-radius-pill); color: var(--lm-gray-900);
  font-size: 0.9rem; font-weight: 600; transition: all var(--lm-transition);
  margin-top: 0.75rem; border: 1px solid var(--lm-gray-200);
}
.product-datasheet-link:hover { background: var(--lm-gray-200); color: var(--lm-dark); text-decoration: none; }
.product-datasheet-link i { font-size: 1.1rem; color: var(--lm-red); }

/* Trust Section */
.product-trust-section {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 20px; margin-top: 1rem; background: var(--lm-gray-100);
  border-radius: var(--lm-radius-lg); border: 1px solid var(--lm-gray-200);
}
.product-trust-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.85rem; color: var(--lm-gray-700);
}
.product-trust-item i {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--lm-white); display: flex; align-items: center; justify-content: center;
  color: var(--lm-blue); font-size: 0.9rem; box-shadow: var(--lm-shadow-sm); flex-shrink: 0;
}

/* ==========================================================================
   8. CART & CHECKOUT
   ========================================================================== */
.cart-summary {
  position: sticky; top: 1rem;
  background: var(--lm-gray-100); border-radius: var(--lm-radius-lg);
  border: 1px solid var(--lm-gray-200); border-top: 3px solid var(--lm-blue);
}
.cart-grid-right .checkout .btn-primary,
.cart-summary .checkout a,
.checkout-btn-optimized {
  background: var(--lm-blue) !important; color: var(--lm-white) !important;
  border: none !important; border-radius: var(--lm-radius-pill) !important;
  font-size: 1rem !important; font-weight: 700 !important;
  padding: 14px 28px !important; width: 100%; text-align: center;
  transition: all var(--lm-transition); text-transform: none;
}
.cart-grid-right .checkout .btn-primary:hover,
.cart-summary .checkout a:hover,
.checkout-btn-optimized:hover {
  background: var(--lm-blue-dark) !important;
  transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,81,158,0.3);
}
.checkout-trust-badges { font-size: 0.8rem; color: var(--lm-gray-500); margin-top: 12px; text-align: center; }
.cart-grid .input-group .form-control,.product-add-cart .input-qty {
  border-radius: var(--lm-radius-pill); border: 1px solid var(--lm-gray-200);
  width: 50px; text-align: center; padding: 0.3rem; font-family: var(--lm-font); font-weight: 600;
}
.cart-grid .cart-container {
  background: var(--lm-white); border-radius: var(--lm-radius-lg); border: 1px solid var(--lm-gray-200);
}

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.footer-container,#footer {
  background: var(--lm-dark) !important; color: var(--lm-gray-300);
}
#footer h4,.footer-container h4,.footer-container .h4 {
  color: var(--lm-white) !important; font-family: var(--lm-font) !important;
  font-size: 0.8rem !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.08em;
}
#footer a,.footer-container a { color: var(--lm-gray-500) !important; font-size: 0.85rem; transition: color var(--lm-transition); }
#footer a:hover,.footer-container a:hover { color: var(--lm-white) !important; }
.footer-container .social-links a,.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15) !important;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--lm-gray-500) !important; transition: all var(--lm-transition);
}
.footer-container .social-links a:hover,.footer-social a:hover {
  border-color: var(--lm-blue) !important; color: var(--lm-blue) !important;
  background: rgba(0,81,158,0.1);
}
#footer .footer-bottom,.footer-container .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.78rem; color: var(--lm-gray-500);
}
.newsletter-form input[type="email"],.block_newsletter input[type="email"] {
  border-radius: var(--lm-radius-pill);
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.1); color: var(--lm-white);
  font-family: var(--lm-font); padding: 12px 20px;
}
.newsletter-form button,.block_newsletter button {
  border-radius: var(--lm-radius-pill) !important;
  background: var(--lm-white) !important; color: var(--lm-blue) !important;
  font-weight: 600; padding: 12px 24px; border: none !important; transition: all var(--lm-transition);
}
.newsletter-form button:hover,.block_newsletter button:hover {
  background: var(--lm-gray-100) !important; transform: translateY(-1px);
}

/* ==========================================================================
   10. TRUST & CONVERSION & GENERAL BUTTONS
   ========================================================================== */
.blockreassurance_product { margin-top: 1rem; padding: 1rem 0; border-top: 1px solid var(--lm-gray-200); }
.btn-primary {
  background: var(--lm-blue) !important; border-color: var(--lm-blue) !important;
  border-radius: var(--lm-radius-pill) !important; font-weight: 600; transition: all var(--lm-transition);
}
.btn-primary:hover {
  background: var(--lm-blue-dark) !important; border-color: var(--lm-blue-dark) !important;
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,81,158,0.25);
}
.btn-secondary {
  border-radius: var(--lm-radius-pill) !important; border-color: var(--lm-gray-200) !important;
  font-weight: 500; transition: all var(--lm-transition);
}
.btn-secondary:hover { border-color: var(--lm-blue) !important; color: var(--lm-blue) !important; }
.product-availability .badge-success {
  background: var(--lm-green-light) !important; color: #155724 !important;
  border-radius: var(--lm-radius-pill); font-weight: 600; font-size: 0.8rem;
}
.breadcrumb { font-size: 0.85rem; background: var(--lm-gray-100); }
.breadcrumb li:last-child { font-weight: 600; color: var(--lm-gray-900); }
.product-add-cart .notification-area { margin-top: 0.5rem; font-size: 0.85rem; }

/* ==========================================================================
   11. PERFORMANCE (CLS/LCP)
   ========================================================================== */
img.lazy-product-image,img[data-src] { background-color: var(--lm-gray-100); transition: opacity var(--lm-transition-slow); }
img.lazy-product-image:not(.loaded) { opacity: 0; }
img.lazy-product-image.loaded { opacity: 1; }

/* ==========================================================================
   12. ACCESSIBILITY
   ========================================================================== */
*:focus-visible { outline: 2px solid var(--lm-blue); outline-offset: 2px; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline: 2px solid var(--lm-blue); outline-offset: 2px;
}
.skip-to-content {
  position: absolute; top: -40px; left: 0;
  background: var(--lm-blue); color: var(--lm-white);
  padding: 8px 16px; z-index: 100000; font-weight: 600;
  text-decoration: none; transition: top var(--lm-transition);
}
.skip-to-content:focus { top: 0; }
#back-to-top {
  cursor: pointer; border: none;
  background: rgba(0,81,158,0.8); color: var(--lm-white);
  border-radius: 50%; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  transition: background var(--lm-transition);
}
#back-to-top:hover { background: var(--lm-blue); }
.product-functional-buttons a,.product-functional-buttons button,.product-flags li {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration:0.01ms!important; animation-iteration-count:1!important; transition-duration:0.01ms!important; }
}

/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */
@media (max-width: 575px) {
  .product-miniature .product-description-short { display: none; }
  .product-miniature .product-reference { display: none; }
  .product-miniature .product-brand { font-size: 0.75rem; }
  .product-trust-section { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .product-container h1.page-title { font-size: 1.5rem !important; }
  .product-prices .current-price .price { font-size: 1.8rem !important; }
}

/* ==========================================================================
   14. FONT IMPORT (Inter) — Fallback fuer Template-Ladeprobleme
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');