/* ============================================
   NOTES E-SHOP — Hummingbird Restyling
   Blue + Yellow from Notes logo
   ============================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  --notes-blue: #1a3a6b;
  --notes-blue-light: #2a5298;
  --notes-yellow: #f0c929;
  --notes-dark: #1a1a2e;
  --notes-gray: #6b7280;
  --notes-light: #f5f7fa;
  --notes-white: #ffffff;
  --notes-border: #e2e8f0;
  --notes-radius: 10px;
}

body {
  font-family: "Inter", -apple-system, sans-serif !important;
  background: var(--notes-light) !important;
}

/* ── Fix layout — full width carousel, no left sidebar on homepage ── */
#wrapper {
  padding-top: 0 !important;
}

/* Hide left column on homepage */
#index #left-column,
#index .left-column,
body#index #columns .col-md-3,
body#index #columns .col-lg-3 {
  display: none !important;
}

/* Make content full width on homepage */
#index #content-wrapper,
#index .col-md-9,
#index .col-lg-9 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* ── Carousel — rounded, centered, same width as products ── */
#carousel,
.carousel,
#homeslider,
.homeslider-container,
[id*="homeslider"],
.ps-imageslider,
#content-wrapper > section:first-child,
.featured-products ~ .carousel,
#wrapper .carousel {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 20px auto 30px auto !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
  float: none !important;
}

/* Force center all homepage content */
#index #wrapper,
#index #wrapper > .container,
#index #columns,
#index #content-wrapper {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  width: 100% !important;
}

#carousel img,
.carousel img,
.homeslider-container img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  max-height: none !important;
  height: auto !important;
  max-width: 100% !important;
  --slider-img-height: auto !important;
}

/* Override Hummingbird slider variables and fixed height */
:root {
  --slider-img-height: auto !important;
}
.carousel-inner,
.carousel-item,
.carousel-item img,
#homeslider,
#homeslider li,
#homeslider img,
.homeslider-container,
[id*="homeslider"] {
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  overflow: visible !important;
}

/* ── Header ──────────────────────────────────── */
#header {
  background: var(--notes-white) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
}

.header-top {
  background: var(--notes-blue) !important;
}
.header-top, .header-top a, .header-top span,
.header-top .material-icons { color: white !important; }

/* Yellow accent line under header */
#header::after {
  content: "";
  display: block;
  height: 3px;
  background: var(--notes-yellow);
}

/* ── Navigation ──────────────────────────────── */
.top-menu > li > a,
#_desktop_top_menu .top-menu > li > a {
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  color: var(--notes-dark) !important;
  transition: color 0.2s !important;
}
.top-menu > li > a:hover {
  color: var(--notes-blue) !important;
}

/* Dropdown */
.top-menu .dropdown-menu,
.top-menu .sub-menu {
  border-top: 3px solid var(--notes-yellow) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
  border-radius: 0 0 var(--notes-radius) var(--notes-radius) !important;
}

/* ── Section titles ──────────────────────────── */
.featured-products h2,
h2.products-section-title,
.products-section-title,
section h2 {
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  color: var(--notes-dark) !important;
  text-align: center !important;
  margin: 40px 0 30px !important;
  padding-bottom: 12px !important;
  position: relative !important;
}
.featured-products h2::after,
.products-section-title::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 50px !important;
  height: 3px !important;
  background: var(--notes-yellow) !important;
  border-radius: 3px !important;
}

/* ── Product Cards ───────────────────────────── */
.product-miniature,
article.product-miniature {
  background: var(--notes-white) !important;
  border: 1px solid var(--notes-border) !important;
  border-radius: var(--notes-radius) !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
.product-miniature:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.1) !important;
  border-color: var(--notes-yellow) !important;
}

.product-miniature .thumbnail-container,
.product-miniature .product-image {
  background: var(--notes-light) !important;
  overflow: hidden !important;
}
.product-miniature img {
  transition: transform 0.4s ease !important;
}
.product-miniature:hover img {
  transform: scale(1.06) !important;
}

.product-miniature .product-title a {
  font-weight: 600 !important;
  color: var(--notes-dark) !important;
}
.product-miniature .product-title a:hover {
  color: var(--notes-blue) !important;
}

.product-miniature .price,
.product-miniature .product-price-and-shipping .price {
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  color: var(--notes-blue) !important;
}

/* Product flags */
.product-flag {
  background: var(--notes-blue) !important;
  color: white !important;
  border-radius: 4px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
}
.product-flag.discount {
  background: var(--notes-yellow) !important;
  color: var(--notes-dark) !important;
}

/* ── Buttons ─────────────────────────────────── */
.btn-primary, .add-to-cart, button.btn-primary {
  background: var(--notes-blue) !important;
  border-color: var(--notes-blue) !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  transition: all 0.3s !important;
}
.btn-primary:hover, .add-to-cart:hover {
  background: var(--notes-blue-light) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(26,58,107,0.3) !important;
}

/* ── Search bar ──────────────────────────────── */
input[type="search"],
input[type="text"].form-control {
  border-radius: 50px !important;
  border: 2px solid var(--notes-border) !important;
}
input[type="search"]:focus,
input[type="text"].form-control:focus {
  border-color: var(--notes-blue) !important;
  box-shadow: 0 0 0 3px rgba(26,58,107,0.1) !important;
}

/* ── Footer ──────────────────────────────────── */
#footer, .footer-container {
  background: var(--notes-blue) !important;
  color: rgba(255,255,255,0.85) !important;
}
#footer h4, #footer .h4, #footer .block-title {
  color: var(--notes-yellow) !important;
  font-weight: 600 !important;
}
#footer a { color: rgba(255,255,255,0.7) !important; }
#footer a:hover { color: var(--notes-yellow) !important; }

/* ── Category page ───────────────────────────── */
#left-column {
  background: var(--notes-white) !important;
  border-radius: var(--notes-radius) !important;
  padding: 15px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.facet .facet-title {
  font-weight: 600 !important;
  border-bottom: 2px solid var(--notes-yellow) !important;
  padding-bottom: 8px !important;
}

/* ── Product detail ──────────────────────────── */
.product-information .current-price .price {
  color: var(--notes-blue) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
}

/* ── Hide Custom Text Block (demo content) ───── */
.custom-text-block,
#custom-text { display: none !important; }

/* ── Cart badge ──────────────────────────────── */
.cart-products-count {
  background: var(--notes-yellow) !important;
  color: var(--notes-dark) !important;
  font-weight: 700 !important;
}

/* ── Scrollbar ───────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--notes-light); }
::-webkit-scrollbar-thumb { background: var(--notes-blue); border-radius: 4px; }

/* ── Variant image picker — large thumbnails ──── */
.color-variants .color-variant span.color.texture,
.color-variants .color-variant .color,
.color-variants span.color,
span.color.texture {
  width: 80px !important;
  height: 80px !important;
  min-width: 80px !important;
  min-height: 80px !important;
  border-radius: 10px !important;
  background-size: cover !important;
  background-position: center !important;
  cursor: pointer !important;
  border: 3px solid var(--notes-border) !important;
  transition: all 0.25s ease !important;
  display: inline-block !important;
}

.color-variants .color-variant span.color.texture:hover,
span.color.texture:hover {
  border-color: var(--notes-blue) !important;
  box-shadow: 0 0 0 3px rgba(26,58,107,0.2) !important;
  transform: scale(1.08) !important;
}

.color-variants .color-variant span.color.texture.active,
span.color.texture.active {
  border-color: var(--notes-blue) !important;
  box-shadow: 0 0 0 3px rgba(26,58,107,0.3) !important;
}

.color-variants {
  display: flex !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
}

/* ── Load more button instead of pagination ──── */
.pagination .page-list {
  display: none !important;
}

.pagination {
  text-align: center !important;
  margin: 30px 0 !important;
}

/* Style the "Next" link as a big "Load more" button */
.pagination .next {
  display: inline-block !important;
  background: var(--notes-blue) !important;
  color: white !important;
  padding: 14px 40px !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  transition: all 0.3s !important;
  border: none !important;
}

.pagination .next:hover {
  background: var(--notes-blue-light) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(26,58,107,0.3) !important;
}

.pagination .next .material-icons,
.pagination .next i {
  display: none !important;
}

.pagination .next::after {
  content: "Zobraziť viac produktov" !important;
}

.pagination .next span {
  display: none !important;
}

.pagination .previous {
  display: none !important;
}

/* Show total count nicely */
.pagination .showing {
  display: block !important;
  text-align: center !important;
  color: var(--notes-gray) !important;
  margin-bottom: 15px !important;
  font-size: 0.9rem !important;
}

/* ── AJAX Load More button ───────────────────── */
.notes-load-more {
  display: block !important;
  margin: 30px auto !important;
  background: var(--notes-blue) !important;
  color: white !important;
  padding: 16px 50px !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
}

.notes-load-more:hover {
  background: var(--notes-blue-light) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(26,58,107,0.3) !important;
}

.notes-load-more:disabled {
  background: var(--notes-gray) !important;
  cursor: default !important;
  transform: none !important;
  box-shadow: none !important;
}

.notes-load-count {
  text-align: center !important;
  color: var(--notes-gray) !important;
  margin-bottom: 10px !important;
  font-size: 0.9rem !important;
}

/* Hide original pagination completely */
.pagination {
  display: none !important;
}


/* ── Fix variant switch flickering ───────────── */
/* Keep variant picker thumbnails stable during AJAX reload */
.color-variants .color.texture {
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

/* Prevent main product image from flickering on variant change */
.product-cover img,
.product-images img,
.images-container img,
.product-cover-thumbnails img,
#product-images-large img {
  transition: opacity 0.3s ease !important;
}

/* Keep gallery stable height during reload */
.images-container,
.product-cover,
#product-images-large,
.product-thumbs {
  min-height: 300px !important;
}

/* Smooth crossfade for main image */
.product-cover {
  position: relative !important;
}

.product-cover img {
  will-change: opacity !important;
}

/* ── Fix dropdown menu text color ────────────── */
.top-menu .dropdown-menu a,
.top-menu .sub-menu a,
.top-menu .dropdown-menu li a,
.top-menu ul[data-depth] a,
#top-menu .dropdown-menu a {
  color: var(--notes-dark) !important;
}
.top-menu .dropdown-menu a:hover,
.top-menu .sub-menu a:hover {
  color: var(--notes-blue) !important;
  background: var(--notes-light) !important;
}
.top-menu .dropdown-menu,
.top-menu .sub-menu,
.top-menu ul[data-depth="1"],
#top-menu .dropdown-menu {
  background: var(--notes-white) !important;
}

/* ── Fix cart count badge visibility ─────────── */
.header-top .cart-products-count,
.blockcart .cart-products-count {
  background: var(--notes-yellow) !important;
  color: var(--notes-dark) !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  min-width: 20px !important;
  height: 20px !important;
  line-height: 20px !important;
  text-align: center !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

/* ── Fix desktop dropdown menu (popover sub-menu) ── */
.top-menu .popover.sub-menu,
.top-menu .js-sub-menu,
#top-menu .popover.sub-menu,
.menu .popover.sub-menu {
  background: var(--notes-white) !important;
}
.top-menu .popover.sub-menu a,
.top-menu .js-sub-menu a,
#top-menu .popover.sub-menu a,
.menu .popover.sub-menu a,
.top-menu a.dropdown-item,
#top-menu a.dropdown-item {
  color: var(--notes-dark) !important;
}
.top-menu .popover.sub-menu a:hover,
#top-menu .popover.sub-menu a:hover,
.top-menu a.dropdown-item:hover {
  color: var(--notes-blue) !important;
  background: var(--notes-light) !important;
}

/* ── Force popover/dropdown light background on desktop ── */
.popover.sub-menu,
.js-sub-menu.popover,
#top-menu .popover {
  --bs-popover-bg: #ffffff !important;
  --bs-body-bg: #ffffff !important;
  --bs-body-color: #1a1a2e !important;
  background-color: #ffffff !important;
  color: #1a1a2e !important;
}
.popover.sub-menu a,
.popover.sub-menu .dropdown-item {
  color: #1a1a2e !important;
  background: transparent !important;
}
.popover.sub-menu a:hover,
.popover.sub-menu .dropdown-item:hover {
  color: #2a5298 !important;
  background: #f5f7fa !important;
}

/* ── Force cart count visible ── */
.header-top .cart-products-count {
  background: #f0c929 !important;
  color: #1a1a2e !important;
}

/* ── Fix Hummingbird desktop dropdown (menu-container) ── */
.menu-container,
.menu-container.js-sub-menu,
.menu-container.shadow-sm {
  background-color: #ffffff !important;
  color: #1a1a2e !important;
}
.menu-container a,
.menu-container .dropdown-item {
  color: #1a1a2e !important;
}
.menu-container a:hover,
.menu-container .dropdown-item:hover {
  color: #2a5298 !important;
  background: #f5f7fa !important;
}

/* ── Fix cart badge ── */
.header-block__badge {
  background: #f0c929 !important;
  color: #1a1a2e !important;
  font-weight: 700 !important;
}

/* ── Fix Bootstrap dropdown-menu (user account + any dropdown) ── */
.dropdown-menu {
  background-color: #ffffff !important;
  --bs-dropdown-bg: #ffffff !important;
  --bs-dropdown-color: #1a1a2e !important;
  --bs-dropdown-link-color: #1a1a2e !important;
  --bs-dropdown-link-hover-color: #2a5298 !important;
  --bs-dropdown-link-hover-bg: #f5f7fa !important;
}
.dropdown-menu .dropdown-item {
  color: #1a1a2e !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  color: #2a5298 !important;
  background-color: #f5f7fa !important;
}
.dropdown-menu .dropdown-divider {
  border-color: #e2e8f0 !important;
}

/* ── Cart badge — match mobile blue style ── */
.header-block__badge {
  background: #1a3a6b !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  font-size: 0.7rem !important;
  text-align: center !important;
  display: inline-block !important;
}

/* ── Fix dropdown menu icons ── */
.dropdown-menu .material-icons,
.dropdown-menu .dropdown-item .material-icons,
.dropdown-menu .dropdown-item i {
  color: #1a3a6b !important;
}
.dropdown-menu .dropdown-item:hover .material-icons,
.dropdown-menu .dropdown-item:hover i {
  color: #2a5298 !important;
}

/* ── Fix cart badge visibility in header ── */
.header-top .header-block__badge,
.header-top .cart-products-count,
.blockcart .header-block__badge {
  background: #f0c929 !important;
  color: #1a1a2e !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  min-width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 4px !important;
}