/* Product Views module.

   Class naming rule for this whole file: every hook class this module styles must be prefixed
   product-views- (or already namespaced under .compact-recently-viewed / .compact-layout, this
   module's own card system), with exactly one deliberate exception - swiper-container, swiper-wrapper
   and swiper-slide, which are required verbatim by the bundled Swiper library's own JS and cannot be
   renamed. Do NOT reuse other generic Swiper-theme class names like swiper-viewport, swiper-pager, or
   swiper-button-prev/next here, even though other extensions in this theme (adv_banner, adv_featured,
   bestseller_carousel, etc.) use exactly those names - several of them also load a shared, completely
   unscoped stylesheet (catalog/view/javascript/jquery/swiper/css/opencart.css) that styles those class
   names globally, with no ancestor scoping at all. If this module's markup carries any of those same
   classes, that other extension's CSS applies to this module's elements too - a 60px margin, a 4px
   border, a box-shadow, and a different button appearance all showed up uninvited the first time this
   happened, when a page also had an Advanced Slideshow/Banner module active. This module deliberately
   never loads that shared opencart.css itself (see the swiper carousel section below), but avoiding
   the shared *class names* matters just as much as avoiding the shared *stylesheet* - the collision
   happens via any other extension on the same page loading it, not via anything this module does. */

.product-views {
  margin-bottom: 20px;
}

/* Tab header/panel switcher */
.product-views-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 15px;
}
.product-views-tab {
  border: 0;
  background: transparent;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 600;
  color: #8a8a90;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color .2s ease, border-color .2s ease;
}
.product-views-tab:hover {
  color: #373737;
}
.product-views-tab.active {
  color: #373737;
  border-bottom-color: #F8694A;
}
.product-views-panel {
  display: none;
}
.product-views-panel.active {
  display: block;
}

/* Compact Layout CSS - shared by both Most Viewed and Recently Viewed tabs, and by both the
   flex-wrap grid (.compact-recently-viewed) and the swiper carousel (.product-views-swiper)
   variants. Card-internal rules are combined selectors so the two variants can't drift apart -
   only the outer box sizing (flex-basis vs. 100% of its swiper-slide) differs between them. */
.compact-recently-viewed {
  display: flex;
  /* No wrap, deliberately: the swiper carousel is always exactly one row (extra items scroll
     instead of wrapping to a second row), so this grid has to stay one row too, or it ends up
     taller than the carousel whenever a tab has more items than fit per row at the current
     viewport width - visible as the page's footer jumping up/down when switching tabs. */
  flex-wrap: nowrap;
  /* Cards don't flex-shrink (see flex: 0 0 ... below) - they always render at the exact width the
     current breakpoint's column count implies, same as the swiper carousel's slides at the same
     breakpoint. Without this, more items than that column count (this grid can have up to 6) would
     just squeeze every card narrower to fit them all in view, so the number of *full-size* cards on
     screen would silently stop matching the breakpoint tiers below - overflow scrolls horizontally
     instead. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Hide the native scrollbar track - still fully scrollable by touch/trackpad/drag, just no visible
     scrollbar, so it looks like the swiper carousel rather than a plain overflowing list. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 10px;
  justify-content: flex-start;
  /* Without this, flexbox's default "stretch" makes every card match the tallest card in its own
     row (whenever content height varies - e.g. a rating shown on one card but not its neighbor).
     The swiper carousel can't replicate that (all its slides are one continuous unwrapped row, so
     "stretch" there would match every slide to the single tallest slide in the whole list, not just
     the visible ones - see .product-views-swiper .swiper-wrapper below). flex-start here keeps both
     variants on the same "every card is its own natural height, never stretched" behavior. */
  align-items: flex-start;
}
.compact-recently-viewed::-webkit-scrollbar {
  display: none;
}
.compact-layout {
  margin-bottom: 10px;
}
.compact-recently-viewed .compact-layout,
.product-views-swiper .compact-layout {
  display: flex;
  min-width: 0;
  padding: 5px;
  border-radius: 6px;
  height: 100%;
  background: #fff;
  box-shadow: 0 5px 15px rgba(0,0,0,.06);
  transition: box-shadow .2s ease;
}
.compact-recently-viewed .compact-layout {
  /* 5 per row - same column count as the swiper carousel's desktop slidesPerView (product-views.js),
     so a card is exactly the same size whether a tab happens to render as the grid or the carousel.
     flex-shrink 0 (the middle value) - never let a card go narrower than this to cram more of them
     into view; the row scrolls horizontally past 5 instead (see overflow-x:auto above). */
  flex: 0 0 calc(20% - 8px);
  box-sizing: border-box;
  /* Cancels the base .compact-layout margin-bottom:10px below - that rule dates back to when this
     grid could wrap to multiple rows and needed space between them. It's single-row only now
     (flex-wrap:nowrap above), so that margin just adds unmatched trailing height under the row that
     the swiper carousel's cards don't have (its own copy is already margin-bottom:0), which is what
     was pushing the page footer down by ~10px whenever a grid tab was the active one. */
  margin-bottom: 0;
}
@media (max-width: 1199px) {
  .compact-recently-viewed .compact-layout {
    flex-basis: calc(25% - 7.5px); /* 4 per row - matches swiper's 1199px breakpoint */
  }
}
@media (max-width: 991px) {
  .compact-recently-viewed .compact-layout {
    flex-basis: calc(33.333% - 6.67px); /* 3 per row - matches swiper's 991px breakpoint */
  }
}
@media (max-width: 767px) {
  .compact-recently-viewed .compact-layout {
    flex-basis: calc(50% - 5px); /* 2 per row - matches swiper's 767px breakpoint */
  }
}
.product-views-swiper .compact-layout {
  width: 100%;
  margin-bottom: 0;
}
.compact-recently-viewed .compact-layout--image,
.product-views-swiper .compact-layout--image {
  position: relative;
  margin-right: 10px;
}
.compact-recently-viewed .compact-layout--image img,
.product-views-swiper .compact-layout--image img {
  border-radius: 4px;
}
.compact-recently-viewed .quickview-button,
.product-views-swiper .quickview-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.compact-recently-viewed .compact-layout:hover .quickview-button,
.product-views-swiper .compact-layout:hover .quickview-button {
  opacity: 1;
}
.compact-recently-viewed .btn-quickview,
.product-views-swiper .btn-quickview {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background-color: #204565;
  color: #fff;
}
.compact-recently-viewed .btn-quickview:hover,
.product-views-swiper .btn-quickview:hover {
  background-color: #5c85a6;
  color: #ccc;
}
.compact-recently-viewed .compact-layout--button-group,
.product-views-swiper .compact-layout--button-group {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 2px;
}
.compact-recently-viewed .compact-layout--button-group .btn,
.product-views-swiper .compact-layout--button-group .btn {
  flex-shrink: 0;
  padding: 3px 5px;
  font-size: 11px;
  line-height: 1;
}
.compact-recently-viewed .compact-layout--button-group .btn i,
.product-views-swiper .compact-layout--button-group .btn i {
  color: #333;
  font-size: 11px;
}
.compact-recently-viewed .compact-layout--button-group .btn-cart:hover i,
.product-views-swiper .compact-layout--button-group .btn-cart:hover i {
  color: #204565;
}
.compact-recently-viewed .compact-layout--button-group .btn-wishlist:hover i,
.product-views-swiper .compact-layout--button-group .btn-wishlist:hover i {
  color: red;
}
.compact-recently-viewed .compact-layout--button-group .btn-compare:hover i,
.product-views-swiper .compact-layout--button-group .btn-compare:hover i {
  color: green;
}
.compact-recently-viewed .compact-layout--rating .fa-stack,
.product-views-swiper .compact-layout--rating .fa-stack {
  font-size: 6px;
}
.compact-recently-viewed .compact-layout--name,
.product-views-swiper .compact-layout--name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: bold;
}
.compact-recently-viewed .compact-layout--info,
.product-views-swiper .compact-layout--info {
  min-width: 0;
  flex: 1;
}
/* Swiper carousel variant - used instead of the flex-wrap grid above once a tab has more than 6 products.
   Loads swiper.min.css/swiper.jquery.min.js from catalog/view/javascript/jquery/swiper/ - a copy
   bundled by this extension's own OCMOD package (not the active theme's folder), so it keeps working
   no matter which theme is active. Several extensions bundle the same 3 files to that identical path,
   so addStyle/addScript's href-dedupe means only one copy ever actually loads on a given page. This
   module still deliberately never loads that shared path's opencart.css (see the file-level comment
   at the top) and still uses its own scoped class names below, not the generic swiper-* names, so
   it's unaffected by whatever styling that shared opencart.css carries when another module loads it.
   Card-internal styling (image/name/info/buttons/rating) is shared with the grid variant above -
   only swiper's own structural elements (container/wrapper/slide/pager/arrows) are defined here. */
.product-views-swiper {
  position: relative;
  width: 100%;
  overflow: visible;
}
.product-views-swiper .swiper-container {
  position: relative;
  overflow: hidden;
  /* No padding here, deliberately - the grid variant's outer wrapper (.compact-recently-viewed) has
     none either, and overflow:hidden above already clips anything that padding would have protected
     (e.g. box-shadow), so it was pure unmatched height (4px, top+bottom) with no real purpose. */
  /* Tells the browser to keep handling vertical page scroll itself but hand horizontal drag gestures
     to Swiper instead of treating them as ambiguous/ignoring them - without this some mobile browsers
     can swallow a horizontal swipe that starts inside a normally-vertical-scrolling page. */
  touch-action: pan-y;
}
.product-views-swiper .swiper-slide img {
  /* Dragging a finger across an <img> can trigger the browser's own native image-drag/callout instead
     of Swiper's touch handling, especially inside an <a> - this stops that so the swipe gesture always
     reaches Swiper on mobile. */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.product-views-swiper .swiper-wrapper {
  /* Swiper's own CSS makes .swiper-wrapper a flex row with every slide as a sibling (not just the
     visible ones) and no align-items override, so the default "stretch" cross-axis alignment makes
     every card match the height of the single tallest card in the whole list. flex-start opts each
     slide back out of that so cards keep their own natural height, like the non-swiper grid. */
  align-items: flex-start;
}
.product-views-swiper .swiper-slide {
  height: auto;
  display: flex;
}
.product-views-swiper .product-views-swiper-pager {
  width: 100%;
  position: absolute;
  top: 50%;
  line-height: 45px;
}
.product-views-swiper .product-views-swiper-prev,
.product-views-swiper .product-views-swiper-next {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition: all .3s ease;
  z-index: 2;
  cursor: pointer;
}
.product-views-swiper .product-views-swiper-prev:hover,
.product-views-swiper .product-views-swiper-next:hover {
  background-color: var(--color-tertiary);
}
.product-views-swiper .product-views-swiper-prev {
  opacity: 0.85;
  left: 10px;
}
.product-views-swiper .product-views-swiper-next {
  opacity: 0.85;
  right: 10px;
}
@media (min-width: 768px) {
  .product-views-swiper .product-views-swiper-prev {
    opacity: 0;
    left: -20px;
  }
  .product-views-swiper .product-views-swiper-next {
    opacity: 0;
    right: -20px;
  }
  .product-views-swiper:hover .product-views-swiper-prev {
    opacity: 0.85;
    left: 10px;
  }
  .product-views-swiper:hover .product-views-swiper-next {
    opacity: 0.85;
    right: 10px;
  }
}
.product-views-swiper .product-views-swiper-prev:before,
.product-views-swiper .product-views-swiper-next:before {
  font-family: FontAwesome;
  font-size: 16px;
  /* White, not dark - the circle behind it is var(--color-primary), a dark navy. */
  color: #fff;
  /* Without this, the icon inherits the page's normal (much larger) line-height, so its line box
     has extra leading above/below the glyph - flexbox centers that whole box, not the glyph itself,
     which is what made the chevron sit visibly high inside the circle. */
  line-height: 1;
}
.product-views-swiper .product-views-swiper-prev:before {
  content: "\f053";
}
.product-views-swiper .product-views-swiper-next:before {
  content: "\f054";
}
/* swiper-button-disabled (not renamed) is a class Swiper's own JS adds/removes automatically on
   whatever elements are passed as nextButton/prevButton, regardless of their other class names - see
   product-views.js. This whole rule block uses only this module's own product-views-swiper-prev/next
   classes (not the generic swiper-button-prev/next names) precisely so nothing else on the page that
   happens to also use vanilla Swiper (and its shared, unscoped opencart.css) can style these elements
   out from under it - see the "shared class name collision" note near the top of this file. */
.product-views-swiper .product-views-swiper-next.swiper-button-disabled,
.product-views-swiper .product-views-swiper-prev.swiper-button-disabled {
  opacity: 0 !important;
  cursor: default;
  pointer-events: none;
}