/* ==========================================================================
   MOLYDON.HR — RESPONSIVE FIX
   ============================================================================
   PROBLEM: The current inline <style> block in <head> contains 65 global
   rules (no media query) with !important that were designed for the desktop
   overlay-header layout. Because they apply at ALL viewport sizes, they
   completely override responsive.css and break the mobile layout.

   THIS FILE replaces the entire inline <style> block.

   HOW TO APPLY:
   1. Find the inline <style> block (24,306 bytes, 81 rules).
      IMPORTANT: On the homepage it's in <head>, on other pages it's in <body>.
      Search for the text "navbar-logo" + "position: fixed" to locate it.
      Source: likely Extensions > Modules > Custom CSS/HTML, or Theme Settings,
      or directly in catalog/view/theme/molydonh/template/common/header.tpl
      or catalog/view/theme/molydonh/template/common/footer.tpl
   2. Replace the ENTIRE content of the inline <style> block with this file
   3. Clear OpenCart's CSS/template cache (System > Settings > Edit > Server > clear cache,
      or delete files in system/storage/cache/)
   4. Fix viewport meta tag (see section 5 at bottom of file)

   WHAT THIS DOES:
   - All desktop-specific overrides are wrapped in @media (min-width: 992px)
   - All mobile-specific overrides are wrapped in @media (max-width: 991px)
   - The mobile layout now uses the theme's built-in responsive.css as a base
   - Desktop layout remains IDENTICAL to what it was before
   ========================================================================== */


/* ==========================================================================
   1. UNIVERSAL RULES (apply at all viewport sizes)
   These are safe because they don't affect layout positioning or sizing.
   ========================================================================== */

#google_translate_element { display: none !important; }
.goog-te-gadget, .skiptranslate { display: none !important; }
body { top: 0px !important; }

.products-list.grid .product-layout .left-block {
  max-height: none !important;
}

#so-topbar,
.so-topbar-wrapper,
#so-topbar .container-fluid,
.topbar,
#topbar,
.so-topbar,
.addthis_toolbox,
.so-social,
.top-social,
.social-share,
header .share-buttons,
.addthis-widget,
.social-toplink,
.li-social,
.module:has(.social-toplink) {
  display: none !important;
}

#cart p.text-shopping-cart { display: none !important; }
#cart .cart-total-full { display: none !important; }

.shopping_cart .handle {
  filter: brightness(0) saturate(100%) invert(78%) sepia(55%) saturate(700%) hue-rotate(5deg) brightness(98%) contrast(96%) !important;
}

.shopping_cart a.top_cart,
.shopping_cart a.top_cart * {
  color: #e8b800 !important;
}

.megamenu-wrapper ul.megamenu li .sub-menu li {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  min-height: 36px !important;
}

.megamenu-wrapper ul.megamenu li .sub-menu li i.fa-check-circle {
  flex-shrink: 0 !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  display: inline-block !important;
}

.megamenu .sub-menu {
  z-index: 10000 !important;
}


/* ==========================================================================
   2. DESKTOP LAYOUT (min-width: 992px)
   These rules create the overlay-header-on-slideshow effect.
   They ONLY apply at desktop widths.
   ========================================================================== */

@media (min-width: 992px) {

  /* --- Header structure: collapsed + overlay --- */
  #header {
    background: linear-gradient(rgb(26, 26, 26) 57px, transparent 57px) !important;
  }

  #header,
  header.variant,
  .header-center,
  .header-menu-center {
    background-color: rgb(0, 0, 0) !important;
  }

  header.variant {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9000 !important;
  }

  .header-center {
    min-height: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: visible !important;
  }

  .header-menu-center {
    background: transparent !important;
  }

  /* --- Logo: fixed position on desktop --- */
  .navbar-logo {
    position: fixed !important;
    left: 15px !important;
    top: 17px !important;
    height: auto !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    width: 270px !important;
  }

  .navbar-logo img {
    max-width: 280px !important;
    height: auto !important;
  }

  /* --- Top bar compact --- */
  .header-top-left { display: none !important; }
  .header-top-center { display: none !important; }
  #so-header-account { display: none !important; }
  header ul:first-child { display: block !important; }

  .header-top {
    line-height: 20px !important;
    min-height: 20px !important;
    height: auto !important;
  }

  .header-top-right {
    float: right !important;
    width: auto !important;
    height: 20px !important;
    overflow: visible !important;
  }

  .header-top .tabBlocks {
    line-height: 20px !important;
    height: 20px !important;
    overflow: visible !important;
  }

  .header-top .box-search {
    height: 20px !important;
    line-height: 20px !important;
  }

  .header-top .box-search input,
  .header-top .box-search button {
    height: 20px !important;
  }

  .header-top ul.top-link,
  .header-top ul.top-link li,
  .header-top ul.top-link li a {
    height: 20px !important;
    line-height: 20px !important;
    font-size: 11px !important;
  }

  .header-top-right ul.top-link li a {
    color: #ccc !important;
    font-size: 11px !important;
  }

  .header-top-right ul.top-link li i.fa {
    color: #e8b800 !important;
    font-size: 12px !important;
  }

  .header-top-right .box-search .btn-search {
    color: #ccc !important;
    font-size: 11px !important;
  }

  .header-top-right .box-search i.fa {
    color: #e8b800 !important;
  }

  #so-header-account {
    display: none !important;
  }

  /* --- Cart position on desktop --- */
  .header-center-right {
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .shopping_cart,
  .header-center-right .shopping_cart {
    position: fixed !important;
    right: 25px !important;
    top: 15px !important;
    z-index: 9999 !important;
    display: inline-flex !important;
    align-items: center !important;
    float: none !important;
  }

  /* --- Header bottom / menu bar --- */
  .header-bottom {
    background-color: rgb(0, 0, 0) !important;
    position: relative !important;
    z-index: 10 !important;
  }

  .header-bottom .navbar-default {
    background-color: rgb(0, 0, 0) !important;
  }

  .header-bottom .sidebar-menu {
    width: 100% !important;
  }

  .header-bottom .container-megamenu {
    position: relative !important;
  }

  .header-bottom .megamenu-wrapper .sub-menu {
    top: 100% !important;
    bottom: auto !important;
  }

  .so-spotlight1 {
    background-color: rgb(0, 0, 0) !important;
    margin-top: -88px !important;
  }

  /* --- Mega menu desktop --- */
  .megamenu-wrapper {
    display: block !important;
    overflow: visible !important;
    padding-top: 0 !important;
    padding-bottom: 3px !important;
  }

  .megamenu-wrapper ul.megamenu,
  ul.megamenu {
    display: flex !important;
  }

  div.megamenu-wrapper {
    background-color: #1a1a1a !important;
    border: none !important;
    border-radius: 0 !important;
  }

  ul.megamenu li.home a span strong {
    font-size: 0 !important;
  }

  ul.megamenu li.home a span {
    display: inline-flex !important;
    align-items: center !important;
  }

  ul.megamenu li.home a i.fa-home {
    font-size: 16px !important;
  }

  /* --- Existing desktop-only media rules from original block --- */
  .navbar-logo {
    top: 15px !important;
  }

  .common-home .header-center .navbar-logo {
    left: 35px !important;
  }

  .common-home .header-center {
    top: 73px !important;
    position: absolute !important;
    background: transparent !important;
  }

  .common-home .header-top {
    color: #fff !important;
    position: absolute !important;
  }

}


/* ==========================================================================
   3. MOBILE + TABLET LAYOUT (max-width: 991px)
   These rules create a proper mobile experience.
   The theme's responsive.css provides the base; these refine it.
   ========================================================================== */

@media (max-width: 991px) {

  /* --- Prevent horizontal overflow --- */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  #wrapper,
  #wrapper > * {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .container,
  .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  .row {
    margin-left: -15px !important;
    margin-right: -15px !important;
    max-width: 100% !important;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* --- Force all wide elements to fit viewport --- */
  .header-top,
  .search-form-action,
  .form-search-popup,
  .navbar-default,
  .sidebar-menu,
  .container-megamenu {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* --- Mobile typography: bigger text for readability --- */
  body {
    font-size: 14px !important;
  }

  h1 { font-size: 22px !important; }
  h2 { font-size: 20px !important; }
  h3, .product-name, .name a { font-size: 16px !important; }

  .price, .price-new {
    font-size: 18px !important;
  }

  .price-old {
    font-size: 14px !important;
  }

  /* --- Product grid: 2 columns on phone, bigger items --- */
  .products-list .product-layout,
  .products-list.grid .product-layout {
    width: 50% !important;
    float: left !important;
    padding: 5px !important;
  }

  /* --- Make buttons/links bigger for touch --- */
  .btn {
    min-height: 40px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
  }

  /* --- Iframes: prevent overflow --- */
  iframe {
    max-width: 100% !important;
  }

  /* --- Header: solid background, normal flow --- */
  #header,
  header.variant,
  .header-center,
  .header-menu-center {
    background-color: rgb(0, 0, 0) !important;
    background-image: none !important;
  }

  header.variant {
    position: relative !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .header-center {
    position: relative !important;
    background-color: rgb(26, 26, 26) !important;
    height: auto !important;
    min-height: auto !important;
    padding: 5px 0 !important;
    overflow: hidden !important;
    max-width: 100vw !important;
  }

  .header-center .container {
    position: relative !important;
  }

  .header-center .col-lg-12.col-md-12 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  /* --- Logo: normal flow, not fixed --- */
  .navbar-logo {
    position: static !important;
    left: auto !important;
    top: auto !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    width: auto !important;
    max-width: 58% !important;
    float: left !important;
    z-index: auto !important;
    height: auto !important;
  }

  .navbar-logo img {
    max-height: 42px !important;
    width: auto !important;
  }

  /* --- Cart: inline, right-aligned --- */
  .header-center-right {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
  }

  .header-center-right .shopping_cart,
  .header-center-right #cart {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    float: none !important;
  }

  .shopping_cart {
    position: static !important;
    right: auto !important;
    top: auto !important;
    z-index: auto !important;
  }

  .shopping_cart a,
  .shopping_cart .handle {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .header-center .box-cart,
  .header-center #cart {
    float: right !important;
    margin-top: 8px !important;
  }

  /* --- Search: full-width below logo --- */
  .header-center .box-search {
    clear: both !important;
    width: 100% !important;
    padding: 5px 10px !important;
    float: none !important;
    display: block !important;
  }

  .header-center .box-search .input-group {
    width: 100% !important;
  }

  /* --- Top bar: compact mobile --- */
  .header-top {
    line-height: normal !important;
    min-height: auto !important;
    height: auto !important;
  }

  .header-top-right {
    float: right !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  .header-top .tabBlocks {
    line-height: normal !important;
    height: auto !important;
    overflow: visible !important;
  }

  .header-top .box-search {
    height: auto !important;
    line-height: normal !important;
  }

  .header-top .box-search input,
  .header-top .box-search button {
    height: auto !important;
    min-height: 36px !important;
  }

  .header-top ul.top-link,
  .header-top ul.top-link li,
  .header-top ul.top-link li a {
    height: auto !important;
    line-height: normal !important;
    font-size: 12px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .header-top-right ul.top-link li a {
    color: #ccc !important;
    font-size: 12px !important;
    padding: 8px 6px !important;
  }

  .header-top-right ul.top-link li i.fa {
    color: #e8b800 !important;
  }

  .header-top-right .box-search .btn-search {
    color: #ccc !important;
  }

  .header-top-right .box-search i.fa {
    color: #e8b800 !important;
  }

  .header-top-left { display: none !important; }
  .header-top-center { display: none !important; }
  #so-header-account { display: none !important; }
  header ul:first-child { display: block !important; }

  /* --- Header bottom / hamburger menu --- */
  .header-bottom {
    background-color: rgb(0, 0, 0) !important;
    position: relative !important;
    z-index: 10 !important;
    overflow: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  .header-bottom .sidebar-menu {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  .header-bottom .navbar-default {
    background-color: rgb(0, 0, 0) !important;
  }

  .header-bottom .sidebar-menu {
    width: 100% !important;
  }

  .header-bottom .container-megamenu {
    position: relative !important;
  }

  .header-bottom .megamenu-wrapper .sub-menu {
    top: 100% !important;
    bottom: auto !important;
  }

  /* --- Hamburger menu toggle --- */
  #show-megamenu {
    background: #333 !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px !important;
    margin: 5px 10px !important;
    display: inline-block !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  #show-megamenu .icon-bar {
    background: #fff !important;
    width: 22px !important;
    height: 2px !important;
    display: block !important;
    margin: 4px 0 !important;
  }

  .navbar-header {
    display: block !important;
    float: left !important;
  }

  .navbar-toggle {
    display: block !important;
  }

  /* --- Mega menu: off-canvas drawer --- */
  .megamenu-style-dev .navbar-default .horizontal .megamenu-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: -280px !important;
    width: 280px !important;
    height: 100vh !important;
    background: #333 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 999999 !important;
    transition: transform 0.3s ease !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: block !important;
  }

  .megamenu-style-dev .navbar-default .horizontal .megamenu-wrapper.in,
  .megamenu-style-dev .navbar-default .horizontal .megamenu-wrapper.so-megamenu-active {
    transform: translateX(280px) !important;
  }

  .megamenu-wrapper ul.megamenu {
    display: block !important;
    flex-direction: column !important;
  }

  .megamenu-wrapper ul.megamenu > li {
    display: block !important;
    width: 100% !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
  }

  .megamenu-wrapper ul.megamenu > li > a {
    color: #fff !important;
    line-height: 44px !important;
    height: 44px !important;
    padding: 0 15px !important;
    font-size: 14px !important;
    display: block !important;
  }

  .megamenu-wrapper ul.megamenu > li > a:hover {
    color: #e8b800 !important;
  }

  .megamenu-wrapper {
    overflow: hidden !important;
  }

  div.megamenu-wrapper {
    background-color: #333 !important;
    border: none !important;
    border-radius: 0 !important;
  }

  /* --- Slideshow: no negative margin, prevent overflow --- */
  .so-spotlight1 {
    background-color: rgb(0, 0, 0) !important;
    margin-top: 0 !important;
    overflow: hidden !important;
    max-width: 100vw !important;
  }

  .so-spotlight1 .container,
  .so-spotlight1 .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  /* --- Content areas: prevent overflow --- */
  .so-spotlight-content,
  .content-main,
  .footer-center,
  #footer {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* --- Product grid: proper mobile sizing --- */
  .products-list .product-layout {
    width: 50% !important;
    float: left !important;
  }

  .products-list .product-layout .product-item-container {
    overflow: hidden !important;
  }

  /* --- Tables: scrollable on mobile --- */
  table {
    max-width: 100% !important;
  }

  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* --- Menu home icon --- */
  ul.megamenu li.home a span strong {
    font-size: inherit !important;
  }

  ul.megamenu li.home a span {
    display: inline-flex !important;
    align-items: center !important;
  }

  ul.megamenu li.home a i.fa-home {
    font-size: 16px !important;
  }

  /* --- Header-menu-center: visible for cart/search --- */
  .header-menu-center {
    background: transparent !important;
    display: block !important;
  }

}


/* ==========================================================================
   4. SMALL PHONE (max-width: 479px)
   Additional refinements for very small screens.
   ========================================================================== */

@media (max-width: 479px) {

  .navbar-logo {
    max-width: 50% !important;
  }

  .navbar-logo img {
    max-height: 36px !important;
  }

}


/* ==========================================================================
   5. VIEWPORT META FIX

   IMPORTANT: Also change the viewport meta tag in header.tpl:

   BEFORE:
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

   AFTER:
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   This restores pinch-to-zoom (WCAG 2.1 accessibility requirement).
   ========================================================================== */
