@charset "utf-8";
/* CSS Document */
/******************************
Main Color #2E5984
[Table of Contents]
1. Fonts
2. Body and some general stuff
  2.1 Buttons
3. Overall Header
	3.1 Navbar Top Menu
	3.2 Main Header
	3.3 Menu
	3.4 Search
	3.5 Shopping Cart
  3.6 Off Canvas Items
4. Carousel/Banner
  4.1 Carousel
  4.2 Banners
5. Characteristics
  5.1 Product Card
6. Deals of the week
	6.1 Deals
	6.2 Featured
7. Popular Categories
8. Banner 2
9. Hot New Arrivals
10. Hot Best Sellers
11. Adverts
12. Trends
13. Latest Reviews
14. Recently Viewed
15. Brands
16. Modal Dialog Box
17. Shopping Cart
18. Footer

******************************/
/*
If you are designing your layout with a mobile-first approach, then use min-width breakpoints and work your way up.
Bootstrap has breakpoints at 576px, 768px, 992px, and 1200px.
This breakpoint means the CSS will apply when the device width is 768px and above.
@media only screen (min-width: 768px){
...
}
This breakpoint means the CSS will apply when the device width is 767px and below.
@media only screen (max-width: 767px){
...
}
*/
:root {
  /* Apex Colors . Begin */
  --color-header-bg: #ffffff;
  --color-content-bg: #f8f8f8;
  --color-footer-bg: #162e5a;
  --color-button-text: #ffffff;
  --color-button-bg: #47749b;
  --color-button-border: #395c7c;
  --color-button-hover: #5184af;
  --color-button-active: #426c91;
  --color-button2-text: #ffffff;
  --color-button2-bg: #d9822b;
  --color-button2-border: #d07a25;
  --color-button2-hover: #db8a38;
  --color-button2-active: #d07a25;

  --color-primary--darker-3: #152d42;
  --color-primary--darker-2: #19354e;
  --color-primary--darker-1: #1c3d59;
  --color-primary: #204565;
  --color-primary--lighter-1: #244d71;
  --color-primary--lighter-2: #27557c;
  --color-primary--lighter-3: #2b5d88;

  --color-accent--darker-3: #254b84;
  --color-accent--darker-2: #285190;
  --color-accent--darker-1: #2c589c;
  --color-accent: #2f5fa8;
  --color-accent--lighter-1: #3266b4;
  --color-accent--lighter-2: #366dc0;
  --color-accent--lighter-3: #3c74c9;

  --color-tertiary--darker-3: #2f5fa8;
  --color-tertiary--darker-2: #3266b4;
  --color-tertiary--darker-1: #356dc0;
  --color-tertiary: #3c74c9;
  --color-tertiary--lighter-1: #487dcc;
  --color-tertiary--lighter-2: #5485d0;
  --color-tertiary--lighter-3: #608ed3;
  /* Apex Colors . End */

  --font-size: 1em;
}
/* -----------------------------------------------------------------------
   Bootstrap fixes & base overrides (from stylesheet.css)
   ----------------------------------------------------------------------- */

legend {
	font-size: 18px;
	padding: 7px 0px
}
label {
	font-size: 12px;
	font-weight: normal;
}
select.form-control, textarea.form-control, input[type="text"].form-control, input[type="password"].form-control, input[type="datetime"].form-control, input[type="datetime-local"].form-control, input[type="date"].form-control, input[type="month"].form-control, input[type="time"].form-control, input[type="week"].form-control, input[type="number"].form-control, input[type="email"].form-control, input[type="url"].form-control, input[type="search"].form-control, input[type="tel"].form-control, input[type="color"].form-control {
	font-size: 12px;
}
.input-group input, .input-group select, .input-group .dropdown-menu, .input-group .popover {
	font-size: 12px;
}
.input-group .input-group-addon {
	font-size: 12px;
	height: 30px;
}
/* Fix some bootstrap issues */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
	display: inline;
}

.nav-tabs {
	margin-bottom: 15px;
}
div.required .control-label:before {
	content: '* ';
	color: #F00;
	font-weight: bold;
}
/* Gradent to all drop down menus */
.dropdown-menu li > a:hover {
	text-decoration: none;
	color: #ffffff;
	background-color: var(--color-primary);
}
/* top */
#top {
	background-color: #EEEEEE;
	margin: 0 0 10px 0;
	min-height: 30px;
}
#top #form-currency .currency-select,
#top #form-language .language-select {
	text-align: left;
}
#top #form-currency .currency-select:hover,
#top #form-language .language-select:hover {
	text-shadow: none;
	color: #ffffff;
	background-color: var(--color-primary);
}
#top .btn-link, #top-links li, #top-links a {
	color: #888;
	text-shadow: 0 1px 0 #FFF;
	text-decoration: none;
}
/* cart */
#cart > .btn {
	font-size: 12px;
	line-height: 18px;
	color: #FFF;
}
#cart.open > .btn {
	background-image: none;
	background-color: #FFFFFF;
	border: 1px solid #E6E6E6;
	color: #666;
	box-shadow: none;
	text-shadow: none;
}
#cart.open > .btn:hover {
	color: #444;
}
#cart .dropdown-menu table {
	margin-bottom: 10px;
}
#cart .dropdown-menu li > div {
	min-width: 427px;
	padding: 0 10px;
}
@media (max-width: 478px) {
	#cart .dropdown-menu li > div {
		min-width: 100%;
	}
}
#cart .dropdown-menu li p {
	margin: 20px 0;
}
/* content */
#content {
	min-height: 600px;
}
/* footer */
footer {
	margin-top: 30px;
	padding-top: 30px;
	background-color: #303030;
	border-top: 1px solid #ddd;
	color: #e2e2e2;
}
footer hr {
	border-top: none;
	border-bottom: 1px solid #666;
}
footer a {
	color: #ccc;
}
footer a:hover {
	color: #fff;
}
footer h5 {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
}
/* list group */
.list-group a {
	border: 1px solid #DDDDDD;
	color: #888888;
	padding: 8px 12px;
}
.list-group a.active, .list-group a.active:hover, .list-group a:hover {
	color: #444444;
	background: #eeeeee;
	border: 1px solid #DDDDDD;
	text-shadow: 0 1px 0 #FFF;
}
.product-thumb .image {
	text-align: center;
	position: relative;
}
.product-thumb .image a {
	display: block;
}
.product-thumb .image a:hover {
	opacity: 0.8;
}
.product-thumb .image img {
	margin-left: auto;
	margin-right: auto;
}
.product-grid .product-thumb .image {
	float: none;
}
@media (min-width: 767px) {
.product-list .product-thumb .image {
	float: left;
	padding: 0 15px;
}
}
.product-thumb h4 {
	font-weight: bold;
}
.product-thumb .caption {
	padding: 0 20px;
	min-height: 180px;
}
.product-list .product-thumb .caption {
	margin-left: 230px;
}
@media (max-width: 1200px) {
.product-grid .product-thumb .caption {
	min-height: 210px;
	padding: 0 10px;
}
}
@media (max-width: 767px) {
.product-list .product-thumb .caption {
	min-height: 0;
	margin-left: 0;
	padding: 0 10px;
}
.product-grid .product-thumb .caption {
	min-height: 0;
}
}
.product-thumb .rating {
	padding-bottom: 10px;
}
.rating .fa-stack {
	font-size: 8px;
}
.rating .fa-star-o {
	color: #999;
	font-size: 15px;
}
.rating .fa-star {
	color: #FC0;
	font-size: 15px;
}
.rating .fa-star + .fa-star-o {
	color: #E69500;
}
h2.price {
	margin: 0;
}
.product-thumb .price-tax {
	color: #999;
	font-size: 12px;
	display: block;
}
.thumbnails {
	overflow: auto;
	clear: both;
	list-style: none;
	padding: 0;
	margin: 0;
}
.thumbnails > li {
	margin-left: 20px;
}
.thumbnails {
	margin-left: -20px;
}
.thumbnails > img {
	width: 100%;
}
.image-additional a {
	margin-bottom: 20px;
	padding: 5px;
	display: block;
	border: 1px solid #ddd;
}
.image-additional {
	max-width: 78px;
}
.thumbnails .image-additional {
	float: left;
	margin-left: 20px;
}

@media (min-width: 1200px) {
	#content .col-lg-2:nth-child(6n+1),
	#content .col-lg-3:nth-child(4n+1),
	#content .col-lg-4:nth-child(3n+1),
	#content .col-lg-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	#content .col-md-2:nth-child(6n+1),
	#content .col-md-3:nth-child(4n+1),
	#content .col-md-4:nth-child(3n+1),
	#content .col-md-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	#content .col-sm-2:nth-child(6n+1),
	#content .col-sm-3:nth-child(4n+1),
	#content .col-sm-4:nth-child(3n+1),
	#content .col-sm-6:nth-child(2n+1) {
		clear:left;
	}
}

/* fixed colum left + content + right*/
@media (min-width: 768px) {
    #column-left  .product-layout .col-md-3 {
       width: 100%;
    }

	#column-left + #content .product-layout .col-md-3 {
       width: 50%;
    }

	#column-left + #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }

    #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }
}

/* fixed product layouts used in left and right columns */
#column-left .product-layout, #column-right .product-layout {
	width: 100%;
}

/* fixed mobile cart quantity input */
.input-group .form-control[name^=quantity] {
	min-width: 50px;
}

/* Missing focus and border color to overwrite bootstrap */
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
    background-image: none;
    background-color: var(--color-button2-active);
}

/*********************************
1. Fonts
*********************************/
h1, h2, h3, h4, h5, h6 {
	color: #444;
}
/* default font size */
/* Override the bootstrap defaults */
h1 {
	font-size: 20px;
}
h2 {
	font-size: 18px;
}
h3 {
	font-size: 17px;
}
h4 {
	font-size: 16px;
}
h5 {
	font-size: 14px;
}
h6 {
	font-size: 12px;
}
a {
	color: var(--color-primary);
}
a:hover {
  color: var(--color-primary--lighter-3);
	text-decoration: none;
}

/*********************************
2. Body & General Items
*********************************/
body {
  background-color: var(--color-content-bg);
	font-family: Arial, sans-serif;
	font-weight: 400;
	color: #666;
	font-size: 12px;
	/*font-size: var(--font-size);*/
	line-height: 20px;
	width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  padding-top: calc(var(--header-offset, 144px) + 18px);
}
@media (min-width: 768px) and (max-width: 1400px) {
  .container {
    width: 100%;
    max-width: 100%;
  }
}
@media (min-width: 1401px) {
  .container {
    width: 1400px;
    max-width: 1400px;
  }
}
#content-top-full-width {
  /*padding-top: 20px;*/
}

.form-control, .input-lg,
.navbar,
.breadcrumb,
.well {
  border-radius: 3px;
}
.form-control {
  border: 1px solid #e9e9e9;
}
/* alert */
.alert {
	padding: 8px 14px 8px 14px;
}
.alert-dismissable .close, .alert-dismissible .close {
  top: 0;
  right: 0;
}
/* breadcrumb */
.breadcrumb {
	margin: 0 0 20px 0;
	padding: 8px 0;
	border: 1px solid #ddd;
}
.breadcrumb i {
	font-size: 15px;
}
.breadcrumb > li {
	text-shadow: 0 1px 0 #FFF;
	padding: 0 20px;
	position: relative;
	white-space: nowrap;
}
.breadcrumb > li + li:before {
	content: '';
	padding: 0;
}
.breadcrumb > li:after {
	content: '';
	display: block;
	position: absolute;
	top: -3px;
	right: -5px;
	width: 26px;
	height: 26px;
	border-right: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.pagination {
	margin: 0;
}
/*********************************
2.1 Buttons
*********************************/
.buttons {
	margin: 1em 0;
}
.btn {
	/*padding: 7.5px 12px;*/
	font-size: 12px;
	border-radius: 4px;
}
/* Bootstrap's default .btn:focus/.btn:active:focus outline is a hardcoded
   blue ring (-webkit-focus-ring-color), unrelated to the theme's colors -
   remove it sitewide instead of overriding every button that gets clicked. */
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
	outline: none;
	box-shadow: none;
}
.btn-sm {
	font-size: 10.2px;
}
.btn-lg {
	padding: 10px 16px;
	font-size: 15px;
}
.btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover {
	font-size: 12px;
}
.btn-group > .btn-xs {
	font-size: 9px;
}
.btn-group > .btn-sm {
	font-size: 10.2px;
}
.btn-group > .btn-lg {
	font-size: 15px;
}
.btn-default {
	color: #333333;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	background-color: #e7e7e7;
}
/* !important throughout this rule and the next two: takes .btn-primary's colors fully
   out of Bootstrap's control, so no vendor selector (present or future, however specific)
   can win this fight again - see the extended back-and-forth that led here. */
.btn-primary {
	color: var(--color-button-text) !important;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: var(--color-button-bg) !important;
	border-color: var(--color-button-border) !important;
}
.btn-primary:hover, .btn-primary.focus, .btn-primary:focus {
	color: var(--color-button-text) !important;
	background-color: var(--color-button-hover) !important;
	background-position: 0 -15px;
	border-color: var(--color-button-hover) !important;
}
.btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled],
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover,
.btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover {
	color: var(--color-button-text) !important;
	background-color: var(--color-button-active) !important;
	background-position: 0 -15px;
	border-color: var(--color-button-active) !important;
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-danger {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #da4f49;
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-success {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #5bb75b;
}
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-info {
	color: var(--color-button2-text) !important;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: var(--color-button2-bg) !important;
	border-color: var(--color-button2-border) !important;
}
.btn-info:hover, .btn-info.focus, .btn-info:focus {
	color: var(--color-button2-text) !important;
	background-image: none;
	background-color: var(--color-button2-hover) !important;
	border-color: var(--color-button2-hover) !important;
}
.btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled],
.btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover,
.btn-info:active.focus, .btn-info:active:focus, .btn-info:active:hover {
	color: var(--color-button2-text) !important;
	background-image: none;
	background-color: var(--color-button2-active) !important;
	border-color: var(--color-button2-active) !important;
}
.btn-link {
	border-color: rgba(0, 0, 0, 0);
	cursor: pointer;
	color: #23A1D1;
	border-radius: 0;
}
.btn-link, .btn-link:active, .btn-link[disabled] {
	background-color: rgba(0, 0, 0, 0);
	background-image: none;
	box-shadow: none;
}
.btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
	background-color: #222222;
	background-image: linear-gradient(to bottom, #333333, #111111);
}

/*********************************
3. Overall Header
*********************************/
header {
  background-color: var(--color-header-bg);
  /*border-bottom: 1px solid #ddd;*/
  padding: 0;
  position: fixed;
  top: 32px;
  left: 0;
  width: 100%;
  z-index: 99;
  transition: top 0.3s;
}
#header.sticky-header {
  top: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/*********************************
3.1 Navbar Top Menu
*********************************/
#navbar-top {
  width: 100%;
  background: var(--color-tertiary);
  color: #fff;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  transition: transform 0.3s;
}
#navbar-top.hide {
  top: -40px;
}
#navbar-top.pushed-up {
  transform: translateY(-32px);
}
#navbar-top #form-currency .currency-select, #navbar-top #form-language .language-select {
  text-align: left;
  color: #333;
  font-size: 13px;
  padding: 3px 16px;
}
#navbar-top #form-currency .currency-select:hover, #navbar-top #form-language .language-select:hover {
  text-shadow: none;
  text-decoration: none;
  color: var(--color-primary);
}
#navbar-top .btn-group > .btn-link, #navbar-top > ul > li, #navbar-top > ul > li > a {
  color: #fff;
  background: none;
  text-decoration: none;
}
#navbar-top .btn-group > .btn-link:hover, #navbar-top > ul > li > a:hover {
  color: #E0E0E0;
}
#navbar-top .dropdown-menu a {
  text-shadow: none;
  font-size: 13px;
}
#navbar-top .btn-link strong {
  font-size: 14px;
  line-height: 14px;
}
#navbar-top .language-currency {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.navbar-top {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.navbar-top-section {
  display: flex;
  align-items: center;
}
.navbar-top-section > ul > li, .navbar-top-section > ul > li > a {
  color: #ffffff;
  font-size: 14px;
  text-decoration: none;
}
.navbar-top-item {
  padding: 5px;
  font-size: 12px;
  margin-top: 0;
  margin-bottom: 0;
}
.navbar-top-item i {
  margin-right: 5px;
}
.navbar-top-item > li > a:hover {
  color: #E0E0E0;
}
@media (max-width: 576px) {
  .contact-section {
    display: none;
  }
  .offcanvas {
    width: 98%;
  }
}
/* Add this to your CSS to fix the dropdown z-index issue */
.navbar-top-section.currency-section .btn-group {
  position: relative;
}

/* Optionally, ensure the dropdown menu is above other content */
.navbar-top-section.currency-section .dropdown-menu {
  z-index: 1050 !important;
}

/*********************************
3.2 Main Header
*********************************/
.header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
}
.header-section {
  display: flex;
}
.header-item {
  padding: 0px 15px;
  font-size: 14px;
  margin-top: auto;
  margin-bottom: auto;
}
.header-item a {
  text-decoration: none;
}
.header-item a:hover {
  /*color: #6C6C6C;*/
}
.header-item + .header-item {
  margin-left: 5px;
}
.header-logo {
  min-width: 180px;
  padding-left: 0;
}
.header-logo img {
  max-height: 50px;
}
.header-cart {
  padding-right: 0;
}
@media (max-width: 767px) {
  .header-logo img {
    max-height: 46px;
  }
  .header-icon {
    display: none;
  }
}  
.header-mobile-button {
  display: none;
  cursor: pointer;
  color: #1D1C1C;
}  
.header-mobile-button button {
  background: none;
  border: none;
  padding: 5px;
  cursor: pointer;
}
.header-mobile-button button i {
  font-size: 24px;
  color: #1D1C1C;
  display: block;
  margin: 0 auto;
}
.header-mobile-button .btn {
  border: none;
  background: none;
  padding: 0;
}
.header-icon {
  color: var(--color-tertiary);
}
.fa-stack .header-icon {
  font-size: 20px;
}
.fa-heart-o.header-icon {
  line-height: 1em;
}
@media (max-width: 1200px) {
  .header-icon-label {
    display: none;
  }
}
@media (max-width: 991px) {
  .header-icon {
    display: none;
  }
}
@media (max-width: 1400px) {
  .header-icon-label {
    display: none;
  }
}

/*********************************
3.4 Menu
*********************************/
#menu.navbar {
  color: #fff;
  border-radius: 0;
  margin: 0;
}
#menu {
	background-color: var(--color-primary);
	min-height: 40px;
}
#menu .nav > li > a {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	padding: 10px 15px 10px 15px;
	min-height: 15px;
	background-color: transparent;
}
#menu .nav > li:hover > a, #menu .nav > li.open > a {
	background-color: var(--color-primary--lighter-3);
}
#menu .dropdown-menu {
	padding-bottom: 0;
}
#menu .dropdown-inner {
	display: table;
}
#menu .dropdown-inner ul {
	display: table-cell;
}
#menu .dropdown-inner a {
	min-width: 160px;
	display: block;
	padding: 6px 20px;
	clear: both;
	line-height: 20px;
	color: #333333;
	font-size: 12px;
	white-space: nowrap;
}
#menu .dropdown-inner li a:hover {
	color: #FFFFFF;
	background-color: var(--color-primary--lighter-3);
}
#menu .dropdown-inner a.active,
#menu .subcategory-list a.active {
	color: var(--color-primary);
}
#menu .see-all {
	display: block;
	margin-top: 0.5em;
	border-top: 1px solid #DDD;
	padding: 3px 20px;
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 3px 3px;
	font-size: 12px;
}
#menu .see-all:hover, #menu .see-all:focus {
	text-decoration: none;
	color: #ffffff;
	background-color: var(--color-primary);
}
#menu #category {
	float: left;
	padding-left: 15px;
	font-size: 16px;
	font-weight: 700;
	line-height: 40px;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#menu .btn-navbar {
	font-size: 15px;
	font-stretch: expanded;
	color: #FFF;
	padding: 2px 18px;
	float: right;
	background-color: var(--color-primary);
}
#menu .btn-navbar:hover, #menu .btn-navbar:focus, #menu .btn-navbar:active, #menu .btn-navbar.disabled, #menu .btn-navbar[disabled] {
	color: #ffffff;
	background-color: var(--color-primary);
}
/* Desktop (≥992px): hover mega-menu, plus a hover-flyout for any
   deeper nested (grandchild+) categories — ported from weber_theme,
   which had this; apex never did, so grandchildren were
   completely unreachable on desktop before this. */
@media (min-width: 992px) {
	/* Bootstrap's base .navbar-collapse ships with 15px of left/right
	   padding, which pushes #menu-offcanvas in from the edge on desktop
	   and misaligns the top-level items against the rest of the page's
	   content. Mobile keeps its own padding via the offcanvas panel
	   rules below (max-width: 991px), untouched by this. */
	#menu .navbar-collapse {
		padding-left: 0;
		padding-right: 0;
	}
	/* menu.twig server-renders class="dropdown open" on whichever
	   top-level category the current page belongs to, so the mobile
	   accordion auto-expands to the active category. Bootstrap's core
	   CSS (.open > .dropdown-menu { display: block; }, not scoped to
	   any breakpoint) picks that up on desktop too, popping the menu
	   open on every page load. Same specificity as the hover rule below,
	   so ordering it first is what lets :hover still win. */
	#menu .dropdown.open .dropdown-menu {
		display: none;
	}
	#menu .dropdown:hover .dropdown-menu {
		display: block;
	}
	#menu .dropdown-inner li.has-children {
		position: relative;
	}
	#menu .dropdown-inner li.has-children > a {
		padding-right: 28px;
	}
	#menu .dropdown-inner li.has-children > a:after {
		content: "\f0da";
		font-family: FontAwesome;
		position: absolute;
		top: 50%;
		right: 8px;
		transform: translateY(-50%);
	}
	#menu .dropdown-inner li.has-children > ul.subcategory-list {
		display: none;
		position: absolute;
		top: -1px;
		left: 100%;
		min-width: 160px;
		margin: 0;
		padding: 0;
		background-color: #fff;
		border: 1px solid rgba(0, 0, 0, .15);
		box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
		z-index: 1000;
	}
	#menu .dropdown-inner li.has-children:hover > ul.subcategory-list {
		display: block;
	}
	/* Toggled by JS (common.js) when a flyout's natural left:100% position
	   would run past the right edge of the viewport - flips it to open
	   toward the left of its parent instead. */
	#menu .dropdown-inner li.has-children > ul.subcategory-list.flyout-left {
		left: auto;
		right: 100%;
	}
	#menu .dropdown-inner .subcategory-list a {
		min-width: 0;
		font-size: 12px;
		color: #333333;
		white-space: nowrap;
	}
	#menu .dropdown-inner .subcategory-list a:hover {
		color: #FFFFFF;
		background-color: var(--color-primary--lighter-3);
	}
}

/* Mobile (<992px): #menu-offcanvas becomes a fixed slide-in panel with
   accordion category expand/collapse — ported directly from
   weber_theme's proven mobile nav mechanism (breakpoint moved from
   767/768 to 991/992 to match apex's own breakpoint everywhere
   else; colors switched to apex's white-panel/black-text choice;
   class names menu-desktop-only/menu-mobile-only used in place of
   Bootstrap's hidden-xs/visible-xs, which are keyed to the wrong,
   768px breakpoint). */
.dropdown-toggle-icon,
.subcategory-toggle { display: none; }
#menu .dropdown-inner ul.subcategory-list {
	/* Needs to out-specificity the older, unscoped "#menu .dropdown-inner
	   ul { display: table-cell; }" base rule above, which was otherwise
	   forcing every nested subcategory list visible at all times,
	   regardless of the .expanded state or the JS toggle. */
	display: none;
}

/* Which of the two category lists shows */
@media (max-width: 991px) {
	/* #menu prefix needed so this outranks the "#menu .navbar-nav {
	   display: block !important; }" float-fix rule below — both are
	   !important, so without the extra specificity that rule was
	   winning and keeping the desktop-only list visible on mobile
	   alongside the mobile one, showing every category twice. */
	#menu .navbar-nav.menu-desktop-only { display: none !important; }
}
@media (min-width: 992px) {
	/* .menu-mobile-only is also used on the close button (no .navbar-nav
	   class there, so no specificity conflict to worry about for it) —
	   kept as a separate, plain selector rather than folding it into the
	   #menu .navbar-nav rule above, which would only match the list. */
	.menu-mobile-only,
	#menu .navbar-nav.menu-mobile-only { display: none !important; }
}

@media (max-width: 991px) {
	#menu {
		min-height: 0;
		margin: 0;
		padding: 0;
		background: none;
		border: none;
		border-radius: 0;
	}
	#menu.navbar {
		display: block !important;
		background: transparent;
	}
	#menu div.dropdown-inner > ul.list-unstyled {
		display: block;
	}
	#menu div.dropdown-menu {
		margin-left: 0 !important;
		padding-bottom: 10px;
		background-color: #fff;
	}
	#menu .dropdown-menu {
		position: static;
		float: none;
		width: 100%;
		box-shadow: none;
		border: none;
	}
	#menu .dropdown-inner {
		display: block;
	}
	#menu .dropdown-inner a {
		width: 100%;
		color: #1D1C1C;
		font-size: 15px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	#menu ul.subcategory-list {
		margin-left: 5px;
	}
	#menu .subcategory-list a {
		min-width: 0;
		font-size: 15px;
	}
	#menu .nav > li > a.dropdown-toggle {
		position: relative;
		padding-right: 30px;
	}
	.dropdown-toggle-icon {
		display: block;
		position: absolute;
		top: 50%;
		right: 15px;
		margin-top: -7px;
		color: #1D1C1C;
	}
	#menu li.has-children {
		position: relative;
	}
	#menu li.has-children > a {
		padding-right: 30px;
	}
	/* Not vertically centered like the top-level icon above — this one's
	   positioned ancestor (li.has-children) grows taller every time its
	   own nested list expands, so top:50% would recalculate against that
	   new height and the icon would drift down on every click. Anchoring
	   to the top edge instead keeps it pinned to the name row. */
	.subcategory-toggle {
		display: block;
		position: absolute;
		top: 0;
		right: 5px;
		padding: 3px 12px;
		cursor: pointer;
		color: #1D1C1C;
	}
	.dropdown-toggle-icon .fa-minus,
	.subcategory-toggle .fa-minus {
		display: none;
	}
	#menu .dropdown.open .dropdown-toggle-icon .fa-plus {
		display: none;
	}
	#menu .dropdown.open .dropdown-toggle-icon .fa-minus {
		display: inline;
	}
	#menu li.has-children.expanded > .subcategory-toggle .fa-plus {
		display: none;
	}
	#menu li.has-children.expanded > .subcategory-toggle .fa-minus {
		display: inline;
	}
	#menu .dropdown-menu a:hover,
	#menu .dropdown-menu ul li a:hover {
		background: #fff;
	}
	#menu .navbar-collapse.collapse {
		display: block !important;
	}
	#menu .navbar-collapse {
		position: fixed;
		top: 0;
		left: 0;
		width: 85%;
		height: 100%;
		margin: 0;
		padding: 0;
		background-color: #fff;
		overflow-x: hidden;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
		will-change: transform;
		backface-visibility: hidden;
		z-index: 1050;
		border-top: none;
	}
	#menu .navbar-collapse .navbar-nav {
		margin: 0;
	}
	#menu .navbar-collapse.offcanvas-open {
		transform: translateX(0);
		box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
	}
	#menu .navbar-nav {
		float: none !important;
		display: block !important;
	}
	#menu .navbar-nav > li {
		float: none !important;
		display: block !important;
	}
	#menu .navbar-nav > li > a {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	#menu .menu-offcanvas-close {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		position: sticky;
		top: 0;
		z-index: 99;
		margin-bottom: 0;
		padding: 10px 15px;
		background-color: var(--color-primary);
		border: none;
		text-align: left;
		font-size: 18px;
		font-weight: 700;
		color: #fff;
		cursor: pointer;
	}
	#menu .menu-offcanvas-close .fa-times {
		font-size: 22px;
		color: #fff;
	}
	#menu .nav > li > a {
		color: #1D1C1C;
		text-shadow: none;
		font-size: 16px;
		font-weight: 700;
	}
	#menu .nav > li > a.active,
	#menu .nav > li.active > a {
		color: var(--color-primary);
	}
	#menu .nav > li > a:hover,
	#menu .nav > li > a:focus,
	#menu .nav > li.open > a,
	#menu .nav > li.open > a:hover,
	#menu .nav > li.open > a:focus {
		background-color: #fff;
	}
	#menu .see-all {
		margin-top: 0;
		border: none;
		border-radius: 0;
		color: #1D1C1C;
	}
}
/* Cap the offcanvas panel's width only in the upper part of the mobile
   range (766-991px), where 85% would otherwise be far too wide (up to
   ~840px). Below 766px, 85% alone is already a sensible panel width. */
@media (min-width: 766px) and (max-width: 991px) {
	#menu .navbar-collapse {
		max-width: 320px;
	}
}

/*********************************
3.3.1 Sidebar Category Module (flyout, all depths)
   Same visual/interaction language as #menu's own flyout above (hover to
   reveal on desktop, click-to-expand accordion on mobile, .flyout-left
   edge-flip), just scoped to .category-menu instead of #menu since this
   is a separate widget (column_left) with its own controller/twig, not
   part of the top nav. See common.js for the matching JS.
*********************************/
/* Bootstrap 3's .row is float-based and does not equalize column
   height on its own, so #column-left is normally only as tall as its
   own content - too short for its sticky child below to have any room
   to travel/stick as the page scrolls. Flexing just this row (scoped via
   :has() so no other .row on the site is affected) makes it match its
   sibling column's height, same as the main content column.
   Desktop only: below 768px #column-left is hidden-xs and #content's
   col-sm-9 doesn't apply, so as a flex item #content has no width and
   shrinks to fit its contents instead of filling the row. */
@media (min-width: 768px) {
	.row:has(> #column-left) {
		display: flex;
		flex-wrap: wrap;
	}
}
.category-menu {
	position: sticky;
	top: calc(var(--header-offset, 144px) + -15px);
}
.category-menu-header {
	font-weight: bold;
	font-size: 16px;
	padding: 10px 15px;
	background-color: var(--color-primary);
	color: #fff;
}
.category-menu .category-menu-top,
.category-menu .subcategory-list {
	margin: 0;
	background-color: #fff;
}
.category-menu .category-menu-top > li,
.category-menu .subcategory-list > li {
	border-bottom: 1px solid #eee;
}
.category-menu a {
	display: block;
	padding: 8px 15px;
	color: #333333;
	text-decoration: none;
}
.category-menu a:hover,
.category-menu a.active {
	color: #fff;
	background-color: var(--color-primary);
}
.category-menu li.has-children {
	position: relative;
}
.category-menu li.has-children > a {
	padding-right: 28px;
}
.category-menu .subcategory-toggle {
	display: none;
}
@media (min-width: 992px) {
	.category-menu li.has-children > a:after {
		content: "\f0da";
		font-family: FontAwesome;
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
	}
	.category-menu li.has-children > ul.subcategory-list {
		display: none;
		position: absolute;
		top: -1px;
		left: 100%;
		width: max-content;
		min-width: 200px;
		padding: 0;
		border: 1px solid rgba(0, 0, 0, .15);
		box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
		z-index: 1000;
	}
	.category-menu li.has-children:hover > ul.subcategory-list {
		display: block;
	}
	.category-menu .subcategory-list a {
		white-space: nowrap;
	}
	.category-menu li.has-children > ul.subcategory-list.flyout-left {
		left: auto;
		right: 100%;
	}
}
@media (max-width: 991px) {
	.category-menu .subcategory-toggle {
		display: block;
		position: absolute;
		top: 0;
		right: 5px;
		padding: 8px 12px;
		cursor: pointer;
	}
	.category-menu .subcategory-toggle .fa-minus {
		display: none;
	}
	.category-menu li.has-children.expanded > .subcategory-toggle .fa-plus {
		display: none;
	}
	.category-menu li.has-children.expanded > .subcategory-toggle .fa-minus {
		display: inline;
	}
	.category-menu ul.subcategory-list {
		display: none;
	}
	.category-menu li.has-children.expanded > ul.subcategory-list {
		display: block;
	}
	.category-menu .subcategory-list a {
		padding-left: 30px;
	}
	.category-menu .subcategory-list .subcategory-list a {
		padding-left: 45px;
	}
}

/*********************************
3.4 Search
*********************************/
.header-search {
  overflow: hidden;
}
.header-section.header-search {
  flex: 2 1 0;
  min-width: 220px;
  max-width: 100%;
}
@media (min-width: 1200px) {
  .header-section.header-search {
    flex: 3 1 0;
    max-width: 900px;
  }
}
.header-search .search-box {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px;
  background: #fff;
  min-height: 40px;
  position: relative;
  box-sizing: border-box;
  padding: 0;
}
.header-search .search-box input {
  flex: 1 1 0;
  padding: 8px 12px;
  border: none;
  outline: none;
  background: transparent;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  font-size: 16px;
  margin: 0;
}
.header-search .search-box .input-group-btn {
  display: flex;
  align-items: stretch;
  height: 100%;
  margin: 0;
  padding: 0;
}
.header-search .search-box button {
  background-color: var(--color-primary);
  color: white;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  height: 100%;
  box-sizing: border-box;
  border-radius: 0 5px 5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.header-search .search-box button i {
  font-size: 18px;
  line-height: 1;
}
.header-search .search-box button:hover {
  background-color: var(--color-primary--lighter-3);
}
.header-search .search-box .input-group-btn,
.header-search .search-box .input-group-btn:last-child > .btn {
  width: auto;
  white-space: nowrap;
  float: none;
  display: flex;
  align-items: stretch;
}

@media (max-width: 991px) {
  .header-mobile-button {
    display: block;
  }
  #header {
    top: 32px;
  }
  .header-section + .header-section {
    margin-left: 10px;
  }
  .header-item {
    padding: 5px 5px;
  }
  .header-search {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    transform: translateY(0);
    max-height: 0;
    transition: transform 0.5s ease-in-out, max-height 0.5s ease-in-out;
    z-index: 99;
    border-top: 1px solid #ddd;
    background-color: #f8f9fa;
  }
  .header-search.mobile-hidden {
    transform: translateY(0);
    max-height: 0;
    margin-left: 0;
  }
  .header-search.mobile-visible {
    transform: translateY(0);
    max-height: 200px;
    margin-left: 0;
    border-bottom: 1px solid #ccc;
  }
  .header-search form {
    width: 100%;
  }
  .header-search input {
    width: 100%;
    box-sizing: border-box;
  }
  .header-search button {
    flex-shrink: 0;
  }
}

/*********************************
3.5 Shopping Cart
 *********************************/
/* USED: Header cart dropdown button and quantity badge */
#cart {
  margin-top: 10px;
}
@media (min-width: 575px) {
  #cart {
    max-width: 280px;
  }
}

@media (min-width: 992px) {
  #cart {
    max-width: 100%;
  }
}
/* USED: Cart button in header */
.cart-button {
  margin: 0; 
  overflow: visible;
  text-transform: none;
  background: none;
  border: none;
  line-height: 26px; /*vertical alignment*/
}
.cart-button:hover {
  background: none;
  border: none;
}
/* USED: Cart quantity badge wrapper */
.cart-quantity-wrapper {
  position: relative;
  width: 28px;
  float: left;
  margin-right: 20px;
}
/* USED: Cart icon in header */
.cart-icon {
  font-size: 32px;
}
/* USED: Quantity badge on cart icon */
#cart-quantity {
  position: absolute;
  display: inline-block;
  top: -4px;
  right: -15px;
  width: 20px;
  height: 20px;
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  font-weight: bold;
  color: #f3f3f3;
}
/* USED: Cart icon colors */
.cart-icon {
  color: var(--color-primary);
}
#cart-quantity {
  background: var(--color-primary);
}
.cart-button:hover .cart-icon {
  color: var(--color-primary);
}
.cart-button:hover #cart-quantity {
  background: var(--color-primary);
}
/* USED: Cart total text in header */
.cart-total-wrapper {
  float: right;
}
#cart-total {
  font-size: 18px;
}
/* USED: Header cart dropdown container */
.cart-dropdown-container {
  background: #f8f8f9;
  z-index: 99;
  overflow-y: auto;
  max-height: 650px;
  scrollbar-width: thin;
  overflow-x: hidden;
  
  padding: 28px;
}
@media (max-width: 509px) {
  .cart-dropdown-container {
    width: calc(100vw - 20px);
  }
}
@media (min-width: 510px) {
  .cart-dropdown-container {
    min-width: 500px;
  }
}
/* USED: Product thumbnails in dropdown */
#cart .img-thumbnail {
  min-width: 50px;
}
/* USED: Cart table in dropdown */
.cart-table {
  margin-bottom: 6px;
}
.cart-table td {
  padding: 6px var(--space-1) !important;
}
.cart-table tr:first-child td {
  border-top: none;
  padding-top: 0 !important;
}
.cart-table td:first-child {
  padding-left: 0 !important;
}
.cart-table td:last-child {
  padding-right: 0 !important;
}
.cart-table--column-quantity {
  width: 12px;
  white-space: nowrap;
}
/* USED: Dropdown container minimum width */
.cart-dropdown-container li > div {
  min-width: 427px;
}
@media (max-width: 478px) {
  .cart-dropdown-container li > div {
    min-width: 100%;
  }
}
.cart-dropdown-container li p {
  margin: 20px 0;
}
/* USED: Remove button in dropdown */
.cart-btn-remove {
  /*padding: 0;*/
  border: none;
  background: none;
}
.cart-btn-remove .fa {
  font-size: 22px;
  color: #D2042D;
  opacity: 0.7;
}

/*********************************
4. Slideshow/Carousel/Banner
  4.1 Carousel
  4.2 Banners
*********************************/

/*********************************
4.1 Slideshow
*********************************/
.slideshow-container {
    display: flex;
    gap: 10px;
    margin: 0px auto 20px auto;
}
.slideshow {
    min-width: 0;
}
.slideshow.swiper-viewport {
    margin-bottom: 0;
}

.swiper-wrapper {
    width: 100%;
    box-sizing: border-box;
}

.swiper-slide {
    width: 100%;
    box-sizing: border-box;
}

.swiper-slide img {
    /*width: 100%;*/
    height: auto;
    max-width: 100%;
    display: block;
    box-sizing: border-box;
}

@media (max-width: 991px) {
  .slideshow {
      flex: none;
      width: 100%;
      max-width: 100%;
  }
}
/*
.swiper-viewport.product-carousel {
  display: flex;
  margin: 0;
  background: transparent;
  z-index: 1;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  position: relative;
  overflow: visible;
}
*/
.swiper-viewport.product-carousel .swiper-slide {
  display: flex;
}
.swiper-viewport.product-carousel .product-layout {
  flex: 1 1 0;
  min-width: 0; /* prevent overflow and allow equal distribution */
  padding-left: 5px;
  padding-right: 5px;
}

@media (max-width: 767px) {
  .slideshow {
      flex: none;
      width: 100%;
  }
}

/* ---- Swiper carousel arrows - SINGLE SHARED SOURCE for every extension's swiper-button-prev/
   swiper-button-next on this site: a solid circle in the theme's primary color instead of the
   stock bare chevron. CSS-only - no extension's swiper-button-prev/next markup is touched,
   they just render the standard class names and this block skins all of them identically.

   Scoped to .swiper-viewport, the standard wrapper class every default-theme swiper module
   puts on its outer container alongside its own module class (e.g. carousel.twig's
   "carousel swiper-viewport", slideshow.twig's "slideshow swiper-viewport"). TO WIRE UP A NEW
   EXTENSION, just put .swiper-viewport on its wrapper next to its own module class - no
   changes needed here. (The position/opacity/hover-reveal rules below need an ancestor to
   hook :hover on - a bare .swiper-button-prev:hover would only fire when the mouse is directly
   over the 40px button itself, not anywhere in the carousel like the current reveal-on-hover
   behavior does - which is why .swiper-viewport, not the bare button classes, is what's scoped
   here.) If a wrapper doesn't want opencart.css's own .swiper-viewport box styling (margin/
   border/box-shadow/background - most extensions actually do want it, it's the stock "boxed
   carousel" look), reset it back out per-module: right here in this theme file for one of this
   theme's own modules (see .slideshow.swiper-viewport below), or in that extension's own
   stylesheet if it's a separate extension - an extension's own layout requirements shouldn't
   live only inside whichever theme happened to be active when they were written.

   !important throughout: the base button box (27x44px) comes from catalog/view/javascript/
   jquery/swiper/css/swiper.min.css and its color/opacity/position comes from that folder's
   opencart.css - both shared, unscoped stylesheets loaded by the extension system AFTER this
   theme's own stylesheet.css (see header.twig's "Styles added by extensions" block), so at
   equal selector specificity their rules win the cascade over anything declared here without it.

   background-image: none is also required here, not just relied on from opencart.css - some
   extensions load their own additional, plain, un-skinned copy of Swiper's own CSS alongside
   the theme's skinned one, and that plain copy's own unscoped .swiper-button-prev/
   .swiper-button-next rule (a blue SVG chevron background-image) can load AFTER opencart.css,
   re-enabling that stock arrow behind/around this restyled icon - without this override that
   stray blue chevron would show up alongside the FontAwesome one below. No new icon is added
   anywhere here - this reuses the exact same FontAwesome chevron (content \f053/\f054) the
   theme already had via opencart.css's :before rule, just resized/recolored; see the :before
   block further down. */
.swiper-viewport .swiper-button-prev,
.swiper-viewport .swiper-button-next {
  width: 40px !important;
  height: 40px !important;
  margin-top: -20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--color-primary) !important;
  background-image: none !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2) !important;
  transition: all .3s ease !important;
}
.swiper-viewport .swiper-button-prev:hover,
.swiper-viewport .swiper-button-next:hover {
  background-color: var(--color-tertiary) !important;
}
.swiper-viewport .swiper-button-prev {
  opacity: 0.85 !important;
  left: 10px !important;
}
.swiper-viewport .swiper-button-next {
  opacity: 0.85 !important;
  right: 10px !important;
}
@media (min-width: 768px) {
  .swiper-viewport .swiper-button-prev {
    opacity: 0 !important;
    left: -20px !important;
  }
  .swiper-viewport .swiper-button-next {
    opacity: 0 !important;
    right: -20px !important;
  }
  .swiper-viewport:hover .swiper-button-prev {
    opacity: 0.85 !important;
    left: 10px !important;
  }
  .swiper-viewport:hover .swiper-button-next {
    opacity: 0.85 !important;
    right: 10px !important;
  }
}
/* Some extensions carry .swiper-viewport purely to inherit the button styling above, without
   wanting opencart.css's own .swiper-viewport box styling that comes bundled with it (margin/
   border/background/box-shadow - the stock "boxed carousel" look). When that's the case, reset
   it back out in that extension's own stylesheet, not here - it's the extension's own layout
   requirement (not a theme aesthetic choice), so it needs to keep working the same if this
   site's theme is ever swapped for one whose stylesheet.css doesn't carry this comment block at
   all. Contrast with .slideshow.swiper-viewport's margin-bottom reset above, which stays
   theme-side because Slideshow is this theme's own module, not a separate extension.

   content/font-family are declared here (not left to opencart.css's own :before rule) so this
   block is fully self-sufficient - not every extension using .swiper-viewport is guaranteed to
   also load opencart.css, so on a page where none of the extensions present happen to load it,
   the icon glyph would otherwise never get set. */
.swiper-button-prev:before,
.swiper-button-next:before {
  font-family: FontAwesome !important;
  width: auto !important;
  height: auto !important;
  font-size: 16px !important;
  color: #fff !important;
  text-shadow: none !important;
  line-height: 1 !important;
}
/* The fa-chevron-left/right glyphs (\f053/\f054) aren't inked dead-center in their own
   character box, so flex-centering the button box alone still leaves both arrows looking
   pulled slightly toward the middle of the carousel - nudge each one back out 1px. */
.swiper-button-prev:before {
  content: "\f053" !important;
  transform: translateX(-1px);
}
.swiper-button-next:before {
  content: "\f054" !important;
  transform: translateX(1px);
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0 !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* ---- Swiper pagination controls - small rectangles instead of the stock round dots. Same
   SINGLE SHARED SOURCE approach as the arrows above: scoped to .swiper-viewport so any
   extension's swiper picks this up automatically just by using that wrapper class, no bare/
   unscoped .swiper-pagination-bullet selector needed.

   !important throughout for the same reason as the arrows block above - opencart.css's own
   .swiper-pagination-bullet rule, and vanilla Swiper's own copy of it, are both loaded later
   in the page than this theme's own stylesheet.css, so at equal specificity they'd otherwise
   win the cascade regardless of what's declared here. */
.swiper-viewport .swiper-pagination-bullet {
  width: 18px !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(0, 0, 0, .2) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transition: background-color .3s ease !important;
}
.swiper-viewport .swiper-pagination-bullet:hover {
  background: rgba(0, 0, 0, .35) !important;
}
.swiper-viewport .swiper-pagination-bullet-active {
  background: var(--color-primary) !important;
}

/* Extra Small Devices(Smaller than 767px wide) Styles Starts */
@media (max-width: 767px) {
  .navbar-contact {
    display: none;
  }
  .breadcrumb {
    display: none;
  }
  .cart-icon {
  font-size: 26px;
  }

}

#navbar-top .list-inline {
  margin-bottom: 0;
}
#navbar-top .btn-link {
  padding: 3px 5px;
  margin-left: 4px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  vertical-align: middle; /* for line */
}
#navbar-top .btn-link a {
  color: #333333;
}
#navbar-top .btn-link-2 {
  color: #000000;
}
#menu-top .navbar-nav > li > a:hover, #menu-top .navbar-nav > li > a:focus,
#navbar-top .btn-link:hover, .top-links a:hover,
#navbar-top .btn-link:focus, .top-links a:focus {
  color: #E0E0E0;
}
#form-currency .currency-select,
#form-language .language-select {
  text-align: left;
  color: #000000;
}
#form-currency .currency-select:hover,
#form-language .language-select:hover {
  text-shadow: none;
  color: var(--color-primary);
}
.dropdown-menu > li > a {
    font-size: 14px;
}
.btn-link, .btn-link:active, .btn-link[disabled] {
  background-color: rgba(0, 0, 0, 0);
  background-image: none;
  box-shadow: none;
}

/* Small Devices(Larger than 768px wide) Styles Starts */
@media (min-width: 768px) {
  .header-mobile-button {
    /*display: none;*/
  }
  .header-icons-container > .mobile-buttons {
    display: none;
  }
}
@media (min-width: 992px) {
  .footer-mobile {
    display: none;
  }
}
/* Extra Small Devices(Smaller than 767px wide) Styles Starts */
@media (max-width: 767px) {
  .header {
    padding: 0;
  }
  #cart {
    margin-top: 5px;
  }
}
/* Footer switches to mobile accordion at the same breakpoint as the header (991px) */
@media (max-width: 991px) {
  .foot-col-head.toggle::after {
    content: '\f078';
    font-family: FontAwesome;
    position: absolute;
    right: 0;
    top: 2px;
    font-size: 13px;
    transition: transform 0.2s ease;
  }
  .foot-col-head.active::after {
    transform: rotate(180deg);
  }
  footer a {
    color: var(--color-primary);
  }
  footer a:hover {
    color: var(--color-primary);
  }

  .foot-col-head {
    margin-bottom: 15px;
    font-size: 16px;
    cursor: pointer;
  }
  .footer-links li {
    padding-top: 3px;
    padding-bottom: 3px;
  }


  /* Footer Styles */
  .main-footer {
    padding-top: 5px;
    padding-bottom: 10px;
  }
  .foot-col {
    padding-top: 0;
    padding-bottom: 0;
  }
  .foot-col > button {
    float: right;
    color: #000;
    border: none;
  }
  .foot-col.last {
    border: none;
  }
  .foot-col-body {
    display: none;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #dbdbdb;
  }
  /* Footer nav for mobile */
  .footer-mobile {
    position: fixed;
    z-index: 999;
    bottom: -1px;
    width: 100%;
    height: 55px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    background-color: #ececec;
    display: flex;
    overflow-x: auto;
  }
  .footer-mobile-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    min-width: 50px;
    overflow: hidden;
    white-space: nowrap;
    font-family: sans-serif;
    font-size: 12px;
    color: #444444;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.1s ease-in-out;
  }
  .footer-mobile-link:hover {
    background-color: #eeeeee;
    text-decoration: none;
  }
  .footer-mobile-icon {
    font-size: 18px;
  }
  .copyright-inner {
    justify-content: center;
    text-align: center;
  }
  .copyright {
    margin-bottom: 54px;
  }
  .foot-about {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* Extra Small Devices(Smaller than 478px wide) Styles Starts */
@media (max-width: 478px) {
  #header > .container {
    padding-right: 5px;
    padding-left: 5px;
  }
  .categories-icon {
    font-size: 24px;
  }
  .search-icon {
    font-size: 24px;
  }
  .cart-button {
    line-height: 0;
  }
  .cart-quantity-wrapper {
    margin-right: 10px;
  }
  #cart-quantity {
      top: -5px;
      right: -8px;
  }
}

.cart-btn-remove:hover .fa {
  opacity: 1;
}

/** NEW CSS FROM THE OFFCANVAS-DESKTOP.HTML **/
.offcanvas-active {
	overflow: hidden;
}

.screen-overlay {
  width: 0%;
  height: 100%;
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  background-color: rgba(34, 34, 34, 0.6);
  transition: opacity .2s linear, visibility .1s, width 1s ease-in;
   }
.screen-overlay.show {
    transition: opacity .5s ease, width 0s;
    opacity: 1;
    width: 100%;
    visibility: visible;
}

.offcanvas.offcanvas-right {
   right: 0;
   left: auto;
   transform: translateX(100%); 
 }

/*********************************
16. Modal Dialog Box
*********************************/
.modal-dialog {
  top: 148px;
}
.modal-title {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0;
}
.modal-header {
  padding: 12px;
  padding-bottom: 6px;
}
.modal-body .alert {
  margin-bottom: 0;
}
.modal-btn-close i, .modal-btn-cart i {
  margin-right: 5px;
}

/*********************************
17. Shopping Cart
*********************************/
.cart-col:empty {
  display: none;
}
      
/* USED: Mobile styles - restore original working layout */
@media (max-width: 991px) {
  /* USED: Image and Product Name combined */
  .cart-col:nth-child(1) {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
  }
  /* USED: Product image sizing */
  .product-image img {
    max-width: 80px;
    height: auto;
  }
  /* USED: Product details styling */
  .product-details {
    flex: 1;
    font-size: 13px;
    font-weight: bold;
    text-align: left;
  }
  /* USED: Product Name - now hidden as separate row */
  .cart-col:nth-child(2) {
    /*display: none;*/
  }
  /* USED: Model row */
  .cart-col:nth-child(3) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
  }
  /* USED: Model label on mobile */
  .product-model:before {
    content: "Model: ";
    font-weight: bold;
    color: #666;
    font-size: 12px;
  }
  /* USED: Model text styling */
  .product-model {
    font-size: 12px;
    color: #888;
  }
  /* USED: Price label and styling on mobile */
  .cart-col:nth-child(5):before {
    /*content: "Price: ";
    font-weight: bold;
    color: #666;
    font-size: 12px;*/
  }
  .cart-col:nth-child(5) {
    font-size: 12px;
  }
  /* USED: Total label and styling on mobile */
  .cart-col:nth-child(6):before {
    content: "Total: ";
    font-weight: bold;
    color: #666;
    font-size: 14px;
  }
  .cart-col:nth-child(6) {
    font-size: 14px;
    font-weight: bold;
  }
  /* USED: Quantity controls layout on mobile */
  .quantity-controls {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .quantity-controls .form-control {
    max-width: 40px;
    font-size: 11px;
    padding: 2px 4px;
    height: 28px;
  }
}
.product-quantity {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* USED: Delete button styling */
.btn-delete {
  background: none;
  border: none;
  color: #d9534f;
  padding: 2px 6px;
  font-size: 20px;
  cursor: pointer;
  min-width: 28px;
  height: 28px;
  vertical-align: top;
}
.btn-delete:hover {
  color: #c9302c;
  background: none;
}
/* USED: Refresh/update button styling */
.btn-refresh {
  background: none;
  border: none;
  color: #337ab7;
  padding: 2px 6px;
  font-size: 18px;
  cursor: pointer;
  min-width: 28px;
  height: 28px;
  vertical-align: top;
  margin-right: 3px;
}
.btn-refresh:hover {
  color: #286090;
  background: none;
}
/* Cart Totals Section */
.cart-totals {
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  margin-top: 30px;
}
.total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}
.total-row:last-child {
  border-bottom: none;
  font-weight: bold;
  font-size: 16px;
}
.total-label {
  font-weight: bold;
}
.total-value {
  text-align: right;
}

/* USED: Desktop Styles - table layout */
@media (min-width: 992px) {
  .cart-col:before {
    display: none;
  }
  .quantity-controls {
    display: none;
  }
  .product-model {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .product-model:before {
    display: none;
  }
  .cart-col:nth-child(4) .form-control {
    max-width: 50px;
    width: 50px;
    display: inline-block;
    margin-right: 8px;
    flex-shrink: 0;
  }
  /* USED: Desktop totals styling - table format */
  .cart-totals {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    display: table;
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
  }
  .total-row {
    display: table-row;
    padding: 0;
    border-bottom: 1px solid #ddd;
  }
  .total-label, .total-value {
    display: table-cell;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-top: none;
  }
  .total-label {
    text-align: right;
    background-color: #f9f9f9;
  }
  .total-row:first-child .total-label {
    border-top: 1px solid #ddd;
    border-top-left-radius: 4px;
  }
  .total-row:first-child .total-value {
    border-top: 1px solid #ddd;
    border-top-right-radius: 4px;
  }
  .total-row:last-child .total-label {
    border-bottom-left-radius: 4px;
  }
  .total-row:last-child .total-value {
    border-bottom-right-radius: 4px;
  }
}
/*********************************
18. Footer
*********************************/
footer a {
  color: var(--color-primary);
}
footer a:hover {
  color: var(--color-primary);
}
.main-footer {
  margin-top: 15px;
  padding-top: 25px;
  padding-bottom: 35px;
  border-top: 1px solid #dbdbdb;
  background-color: #ececec;
}
.foot-col-head {
  color: black;
  font-weight: 500;
  margin-bottom: 10px;
  font-size: 20px;
  position: relative;
}
.footer-links {
  margin-bottom: 20px;
}
.footer-links li {
  margin-top: 6px;
}
.footer-contact-links li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.footer-links li, .footer-links li a, .footer-contact-links li {
  color: #484848;
}
.footer-links li i {
  margin-right: 10px;
  color: var(--color-primary);
}
.footer-contact-links li i {
  margin-top: 3px;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}
.footer-links li::before {
  margin-right: 6px;
}
.footer-links li a:hover, .footer-links li a:focus, .footer-contact-links li a:hover, .footer-contact-links li a:focus {
  text-decoration: underline;
}
.footer-links li a:hover, .footer-links li a:focus, .footer-links li::before, .footer-contact-links li .fa, .footer-contact-links li .fa {
  color: var(--color-primary);
}
.footer-contact-links .fa-map-marker {
  font-size: 18px;
}
.footer-contact-links .fa-phone {
  font-size: 16px;
}
.foot-fb-embed {
  max-width: 100%;
  display: block;
}
.foot-instagram-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #484848;
}
.foot-instagram-link .fa-instagram {
  font-size: 18px;
  color: var(--color-primary);
}
.foot-instagram-link:hover, .foot-instagram-link:focus {
  text-decoration: underline;
}
.foot-grid {
  position: relative;
  display: grid;
  grid-template-columns: 3fr 2fr 2fr 2fr 3fr;
  grid-template-areas:
    "contact information customer-service myaccount followus"
    "about about about about followus";
  gap: 20px;
}
.foot-grid-contact {
  grid-area: contact;
}
.foot-grid-information {
  grid-area: information;
}
.foot-grid-customer-service {
  grid-area: customer-service;
}
.foot-grid-myaccount {
  grid-area: myaccount;
}
/* Positioned absolutely (still placed via grid-area) so its content can grow
   taller than the combined left-side rows without stretching them — it only
   ever grows downward to fill or exceed that space, never the reverse. */
.foot-grid-followus {
  grid-area: followus;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100%;
  display: flex;
}
.foot-grid-followus .foot-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}
.foot-grid-about {
  grid-area: about;
  padding-top: 20px;
  border-top: 1px solid #dbdbdb;
}
/* Footer switches to mobile accordion at the same breakpoint as the header (991px) —
   placed after the base .foot-grid rules above so it actually wins the cascade. */
@media (max-width: 991px) {
  .foot-grid {
    display: block;
  }
  .foot-grid-item {
    margin-bottom: 20px;
  }
  .foot-grid-item:last-child {
    margin-bottom: 0;
  }
  .foot-grid-followus {
    position: static;
    min-height: 0;
  }
  .foot-grid-followus .foot-col {
    justify-content: flex-start;
  }
  .foot-grid-about {
    padding-top: 20px;
    border-top: 1px solid #dbdbdb;
  }
}
.foot-about {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}
.foot-about-logo {
  flex-shrink: 0;
  max-width: 100px;
  height: auto;
}
.foot-about p {
  margin: 0;
  color: #484848;
}
.foot-disclaimer {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #dbdbdb;
  font-size: 9px;
  color: #767676;
  text-align: center;
}
/* Copyright */
.copyright {
  padding-top: 15px;
  padding-bottom: 15px;
  background: var(--color-footer-bg);
}
.copyright, .copyright a {
  color: #fff;
}
.copyright-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.copyright-text {
  margin: 0;
}
.copyright-social {
  margin: 0;
}
.copyright-social li {
  display: inline-block;
}
.copyright-payments {
  margin: 0;
}
.copyright-payments li {
  display: inline-block;
}
.copyright-payments li:not(:last-child) {
  padding-right: 14px;
}
.copyright-payments .fa {
  font-size: 26px;
}
.copyright-text br {
  display: none;
}
.copyright-text a:hover, .copyright-text a:focus {
  text-decoration: underline;
}
.copyright ul > li:not(:last-child) {
  padding-right: 14px;
}
.copyright ul > li a:hover, .copyright ul > li a:focus {
  color: var(--color-accent);
}
/* Scroll to Top */
#scrollTop {
  position: fixed;
  bottom: 85px;
  z-index: 100;
  right: 35px;
  opacity: 0.3;
  background: var(--color-primary);
  border-radius: 3px;
  cursor: pointer;
  padding: 9px 12px;
  font-weight: normal;
  font-size: 14px;
  color: #fff;
  display: none;
}
#scrollTop:hover {
  opacity: 0.95;
  background-color: var(--color-primary);
}

/* INPUT SPINNER CSS */
.spinner input {
  text-align: right;
}
.input-group-btn-vertical {
  position: relative;
  white-space: nowrap;
  width: 1%;
  vertical-align: middle;
  display: table-cell;
}
.input-group-btn-vertical > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  padding: 8px;
  margin-left: -1px;
  position: relative;
  border-radius: 0;
}
.input-group-btn-vertical > .btn:first-child {
  border-top-right-radius: 4px;
}
.input-group-btn-vertical > .btn:last-child {
  margin-top: -2px;
  border-bottom-right-radius: 4px;
}
.input-group-btn-vertical i{
  position: absolute;
  top: 0;
  left: 4px;
}
.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.form-group .d-flex .btn-primary {
  margin-left: 10px; /* Adjust spacing as needed */
  margin-right: 10px;
}

#button-cart i {
  margin-right: 5px;
}

#product #paypal_form {
  margin-top: 10px;
}

@media (max-width: 992px) {
  .offcanvas-categories .show {
    visibility: visible;
    transform: translateX(0);
  }
  .offcanvas-cart.show {
    visibility: visible;
    transform: translateX(0);
  }
  .navbar {
    padding: 0px;
  }
}
#content h1 {
  font-size: 18px;
}
.tab-content h2 {
  font-size: 14px;
}

@media (max-width: 768px) {
  /*.category-header {
    display: block;
    min-height: 40px;
    background-color: #204565;
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    padding: 10px;
  }*/
  .category-header h3 {
    color: #fff;
    margin: 0;
    padding: 10px 6px;
  }
}

/* MY CHANGES */
@media (max-width: 767px) {
  #offcanvas_cls_div_cont.offcanvas-left {
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    height: 100%;
    background: #fff;
    z-index: 1050;
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    /* ↑ use "ease-in-out-back" style for a more natural slide */
    box-shadow: 2px 0 8px rgba(0,0,0,0.2);
    overflow-y: auto;
    display: block;
    transform: translateX(-100%);
    will-change: transform;
    /* Optional: hardware acceleration for smoother animation */
    backface-visibility: hidden;
    perspective: 1000px;
  }
  #offcanvas_cls_div_cont.offcanvas-left.open {
    transform: translateX(0);
  }
  #offcanvas_cls_div_cont .category-header {
    position: sticky;
    top: 0;
    background-color: var(--color-primary);
    /*background: #fff;*/
    z-index: 10;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .btn-close {
    margin-left: auto;
  }
  #open-offcanvas-cats {
    display: block;
  }
  #column-left.offcanvas-active > *:not(#offcanvas_cls_div_cont) {
    display: none !important;
  }
  #column-left.offcanvas-active {
    display: block !important;
    position: static !important;
    z-index: 1050;
    background: transparent;
    width: auto;
    height: auto;
  }
}
/* Style for close button: no outline, no background */
.ac-close-btn {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: #fff;
  font-size: 2rem;
  padding: 5px 15px;
  cursor: pointer;
  transition: color 0.2s;
  margin-left: 0;
  margin-right: 0;
  /* Remove align-self and flex properties, let flexbox handle alignment */
}
.btn-accent {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: var(--color-accent);
  background-repeat: repeat-x;
  border-color: var(--color-accent--darker-1);
}
.btn-accent:hover, .btn-accent:active, .btn-accent:focus, .btn-accent.active, .btn-accent.disabled, .btn-accent[disabled] {
  color: #ffffff;
  background-color: var(--color-accent--lighter-1);
  border-color: var(--color-accent);
}
.dropdown-backdrop {
  display: none !important;
}

/* =========================
Shopping Cart
========================= */
/* Mobile First Approach */
.cart-items {
  background: transparent;
  border: none;
}
.cart-header {
  display: none; /* Hide header on mobile */
}
.cart-row {
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 12px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.cart-col {
  display: block;
  width: 100%;
  padding: 4px 0;
  border-bottom: 1px solid #f0f0f0;
}
.cart-col:last-child {
  border-bottom: none;
}
.cart-col:empty {
  display: none;
}

/* Mobile-specific layout adjustments */
@media (max-width: 767px) {
  .cart-body .cart-row .cart-col:nth-child(1) {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
}
.product-image img {
  max-width: 80px;
  height: auto;
}
.product-details {
  flex: 1;
  font-size: 13px;
  font-weight: bold;
  text-align: left;
}
.cart-body .cart-row .cart-col-name {
  display: none; /* Hide desktop name column on mobile */
}

.model-quantity-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid #f0f0f0;
  padding: 4px 0;
}

.model-quantity-wrapper .cart-col {
  border-bottom: none;
  width: auto;
}

.product-model:before {
  content: "Model: ";
  font-weight: bold;
}
.product-quantity {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Space out input and buttons */
}
.cart-col.text-right:before {
  font-weight: bold;
}
.cart-col-price:before {
  content: "Price: ";
}
.cart-col-total:before {
  content: "Total: ";
}

/* Desktop Styles */
@media (min-width: 992px) {
  .cart-items {
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
  }
  .cart-header {
    display: block;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
  }
  .cart-header .cart-row,
  .cart-body .cart-row {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
  }
  .cart-header .cart-row {
    border-bottom: none;
  }
  .cart-body .cart-row:last-child {
    border-bottom: none;
  }
  .cart-col {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-right: 1px solid #ddd;
    border-bottom: none;
  }
  .cart-row > .cart-col:last-child {
    border-right: none;
  }
  .cart-col:before {
    display: none;
  }

  /* Show name column on desktop */
  .cart-body .cart-row .cart-col-name {
    display: block;
  }

  /* Hide mobile-specific wrappers */
  .product-details {
    display: none;
  }

  .model-quantity-wrapper {
    display: contents; /* Allows children to be direct flex items of .cart-row */
  }

  /* Column widths for desktop */
  .cart-col-image {
    flex: 0 0 100px;
    justify-content: center;
  }
  .cart-col-name {
    flex: 1 1 auto;
    /*display: block;*/
  }
  .cart-col-model {
    flex: 0 0 15%;
    align-items: center;
  }
  .cart-col-quantity {
    flex: 0 0 160px;
  }
  .cart-col-price {
    flex: 0 0 100px;
    justify-content: flex-end;
  }
  .cart-col-total {
    flex: 0 0 100px;
    justify-content: flex-end;
  }

  .product-model:before {
    display: none;
  }
  .product-quantity {
    display: inline-flex;
    gap: 6px;
  }
  .cart-col-quantity {
    border-right: 1px solid #ddd;
  }
}
/* The savings display on the product page */
.savings {
  color: #FF0000;
  font-weight: 700;
  font-size: 14px;
}

.price-box {
  background-color: rgb(233, 232, 232);
  padding: 10px;
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 15px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.price-box-details,
.price-box-pricing {
  flex: 0 1 auto;
  max-width: calc(50% - 15px);
  min-width: 0;
}
.price-box-pricing {
  text-align: right;
  margin-left: auto;
}
.price-box-pricing h2 {
  margin-top: 5px;
  margin-bottom: 0px;
  line-height: normal;
}
.price-box > #product {
  flex-basis: 100%;
}
#product h3 {
  margin-top: 0;
}
@media (max-width: 767px) {
  .price-box-details,
  .price-box-pricing {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .price-box-pricing {
    text-align: left;
  }
}
.options-box {
  max-height: 250px;
  overflow: auto;
  padding: 5px;
  background-color: rgb(247, 243, 243);
  border-radius: 6px;
}
#product, .alert {
  /*margin-top: 20px;*/
}
@media (min-width: 768px) {
  /* Bootstrap 3's .row is float-based, and a floated element (or anything
     inside it) never sticks correctly while scrolling in this browser - the
     row containing the gallery/info split also has the <h1> title as a
     third child, so simply flexing the row (as done for #column-left above)
     puts the title on the same line as the columns; adding flex-wrap to fix
     that instead pushes the sticky column onto flex line 2, which breaks
     sticky again. Grid avoids both: the title spans the full row via
     grid-column, the two columns get their own row below it, and neither
     is floated, so position:sticky on #product-images actually works.
     #product-images and its sibling are always col-sm-5/col-sm-7 in this
     template regardless of column_left/right, so the split can be hardcoded. */
  .row:has(> #product-images) {
    display: grid;
    grid-template-columns: 41.6667% 1fr;
    align-items: start;
  }
  .row:has(> #product-images) > .container {
    grid-column: 1 / -1;
  }
  /* Bootstrap's col-sm-5/col-sm-7 width percentages are meant to resolve
     against the (float-based) .row's full width. As grid items instead,
     a percentage width resolves against the grid track it's already been
     given, compounding the two and shrinking both columns - reset to auto
     so the grid-template-columns split above is the only sizing in play. */
  .row:has(> #product-images) > #product-images,
  .row:has(> #product-images) > #product-images + div {
    width: auto;
  }
  #product-product #product-images {
    float: none;
    position: -webkit-sticky;
    position: sticky;
    top: 144px;
  }
}
.description-content {
  max-height: 250px;
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
}
.description-content.expanded {
  max-height: none;
}
.description-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--color-content-bg));
}
#read-more-btn {
  padding: 4px 10px;
}
#read-more-btn i {
  margin-left: 4px;
}
#read-more-btn:hover, #read-more-btn:active, #read-more-btn.active, #read-more-btn:focus {
  background-color: var(--color-primary--lighter-1);
  border-color: var(--color-primary--lighter-1);
  outline: none;
  box-shadow: none;
}
.product-cart-controls {
  margin: 20px 0;
}

/* -----------------------------------------------------------------------
   Product layout & grid styles (from product-layout.css)
   ----------------------------------------------------------------------- */

/* OLD PRODUCT CARD LAYOUT DELETE WHEN DONE */
.product-layout {
  margin-bottom: 10px;
  float: none;
  min-width: 0;
}
.product-layout-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -5px;
  margin-right: -5px;
}
/*
.product-layout-row .product-layout {
  flex-basis: calc(100% / 6);
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}
*/
.col-6 {
  flex-basis: calc(100% / 6);
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}
.col-5 {
  flex-basis: calc(100% / 4);
  padding-left: 5px;
  padding-right: 5px;
  justify-content: space-between;
  box-sizing: border-box;
}
.col-4 {
  flex-basis: calc(100% / 4);
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}
.product-extension-row .product-layout {
  flex-basis: calc(100% / 6);
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}
.product-extension-row .product-thumb {
  flex-direction: column;
}
/*
.product-extension-row .product-thumb--info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
}
*/

/* Make only .product-layout children inside product-extension-row equal width */
.product-extension-row .product-layout {
  padding-left: 5px;
  padding-right: 5px;
}
.product-list {
  width: 100%; /* overwrite all bootstrap cols */
}
.product-thumb {
  /*added by me*/
  display: flex;
  height: 100%;
  /*added by me*/
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 6px;
  position: relative;
  background: #fff;
  margin: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 5px 15px rgba(0,0,0,.06);
  transition: box-shadow .2s ease;
  overflow: hidden;
}

.product-grid .product-thumb {
  flex-direction: column;
}

.product-thumb:hover {
  border: 1px solid rgba(0,0,0,.086);
  box-shadow: 0 5px 15px rgba(0,0,0,.06);
  box-shadow: 0 5px 5px rgba(0,0,0,.1);
  box-shadow: 3px 3px 15px 0px rgba(0,0,0,.15);
  z-index: 2;
  /*height: auto;*/
}


/* effect with change height of card container */
@media (min-width: 1200px) {
  
  .product-layout.product-grid.grid-hover-effect .product-thumb:hover {
    position: relative;
    margin-bottom: 20px; /* button height + margin-top of it */
    /* it is possible to add new elements and then it is necessary to take in account also their fixed height */
  }
}

.product-thumb--image {
  text-align: center;
  margin: 0;
  margin-bottom: 10px;
}

.product-thumb--image.-has-margins {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  
  margin-bottom: 5px;
}

.product-list .product-thumb--image {
  float: left;
  width: 100px;
  margin-right: 10px;
}

.product-list .product-thumb--image.-has-margins {
  margin-bottom: 10px;
}

@media (min-width: 1200px) {
  .product-list .product-thumb--image {
    width: 260px;
    margin-bottom: 0;
  }
  .product-list .product-thumb--image.-has-margins {
    width: 210px;
  }
}

.product-thumb--image a {
  display: block;
  transition: all .2s ease;
}
.product-thumb:hover .product-thumb--image a {
  opacity: 0.9;
  
}
.product-thumb--image img {
  margin-left: auto;
  margin-right: auto;
  border-radius: 0;
}

.product-thumb--image.-has-margins img {
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
}

@media (min-width: 768px) {
  .product-list .product-thumb .image {
    float: left;
    padding: 0 5px;
  }
}

.product-thumb--wishlist, .product-thumb--compare {
  display: block;
  color: #8a8a90;
  border: 1px solid rgba(200, 200, 200, .8);
  border: 1px solid #8a8a90;
  text-align: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  transition: all .25s ease;
  opacity: 0.5;
}

.product-thumb:hover .product-thumb--wishlist, .product-thumb:hover .product-thumb--compare {
  opacity: 1;
}

.product-thumb--wishlist:hover, .product-thumb--compare:hover {
  color: #0056b3;
  border: 1px solid #415F69;
  cursor: pointer;
}

.product-thumb--wishlist .fa, .product-thumb--compare .fa {
  /*line-height: 32px;*/
  font-weight: bolder;
}

.product-thumb--wishlist .fa {
  color: red;
}

.product-thumb--compare .fa {
  color: green;
}

.product-list .product-thumb--wishlist, .product-list .product-thumb--compare {
  margin-right: 5px;
  float: left;
  margin-top: 3px;
}

.product-thumb--info {
  /* never set position for .product-thumb--info - compare & wishlist dependency */
}

.product-list .product-thumb--info {
  float: left;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  width: calc(100% - 100px - 10px - 10px - 10px);
}

@media (min-width: 1200px) {
  .product-list .product-thumb--info {
    width: calc(100% - 260px - 10px - 10px - 10px);
  }
  
  .product-list .product-thumb--image.-has-margins + .product-list .product-thumb--info {
    width: calc(100% - 210px - 10px - 10px - 10px);
  }
}

.product-grid .product-thumb--info {
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  /*added by me*/
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /*added by me*/
}


.product-thumb--rating {
  padding-bottom: 8px;
}

.product-thumb--rating .fa-stack {
  /*font-size: 12px;*/
  width: 12px;
  height: 12px;
}

.product-thumb--rating .fa-star {
  color: #ffdb00;
  font-size: 12px;
}

.product-thumb--rating .fa-star-o {
  color: #ffdb00;
  font-size: 12px;
}
.product-thumb--name {
  line-height: 16px;
  margin-bottom: 5px;
  max-height: 78px;
  overflow: hidden;
}
.product-thumb--name, .product-thumb--name a {
  color: #373737;
  font-weight: 600;
}
.product-thumb--name:hover, .product-thumb--name a:hover {
  color: #373737;
}
a.product-thumb--name {
  display: block;
 }
.product-thumb--description {
  font-size: 12px;
  line-height: 14px;
}
.product-thumb--footer {
  margin-top: auto; /* mt-auto - Pushes this content to the bottom of the flex container */
}
.product-thumb--buttons {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: space-between;
}


@media (min-width: 768px) {
  .product-thumb--name {
    line-height: 14px;
    max-height: 60px;
    overflow: hidden;
  }
  
  .product-thumb--description {
    font-size: 14px;
  }
}


@media (min-width: 1500px) {
  .product-thumb--name {
    font-size: 12px;
    max-height: 64px;
    overflow: hidden;
  }
  
  .product-thumb--description {
    /*font-size: 16px;*/
    max-height: 56px;
    overflow: hidden;
  }
}

.product-thumb .price {
  margin: 5px 0;
}

.product-thumb .price-value {
  color: #444;
  font-size: 18px;
  line-height: 1; /* in 1 string */
  /*color: var(--color-primary);*/
}

.product-thumb .price-new {
  font-size: 18px;
  line-height: 1; /* in 1 string */
  font-weight: 600;
  color: #ef3434;
}
.product-thumb .price-old {
  color: #999;
  /*text-decoration: line-through;*/
  margin-right: 10px;
}

.price-old {
  position: relative;
}

.price-old:before {
	content: "";
  display: inline-block;
	border-bottom: 1px solid #ef3434;
	position: absolute;
	width: 120%;
	height: 50%;
  left: -10%;
  top: 1px;
	transform: rotate(-15deg);
}
/*.product-thumb .price-old:after {
	content: "";
  display: inline-block;
	border-bottom: 2px solid #ef3434;
	position: absolute;
	width: 120%;
	height: 50%;
  left: -7%;
  top: 1px;
	transform: rotate(15deg);
}*/

.product-thumb .price-tax {
  color: #999;
  font-size: 12px;
  display: block;
}


@media (min-width: 1200px) {
  .product-grid.grid-hover-effect .-grid-hover-effect-hidden {
    display: none;
    margin-top: 10px;
    opacity: 0;
    /*transition: all .25s ease;*/
  }
  
  .product-grid.grid-hover-effect .product-thumb:hover .-grid-hover-effect-hidden {
    opacity: 1;
    display: block;
  }
}

.product-list .product-thumb--button-buy {
  margin-right: 10px;
  float: left;
}

.product-grid .product-thumb--button-buy {
  /*width: 100%;*/
}
/* OLD PRODUCT CARD LAYOUT DELETE WHEN DONE */

/* SWIPER LAYOUT WILL GO HERE */
.product-carousel.swiper-viewport {
  padding-bottom: 25px;
	margin: 0;
  background: none;
  z-index: 1;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  position: relative;
  overflow: visible;
}
.product-carousel.swiper-slide {
  display: flex;
  height: auto;
}
.product-carousel--model-brand .model-label,.brand-label {
  font-weight: bold;
}

@container (max-width: 210px) {
  .product-carousel--model-brand {
    flex-direction: column;
    align-items: flex-start;
  }
  .product-carousel--model-brand > span {
    display: inline-flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2px;
    order: 0;
  }
  .product-carousel--model-brand a {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
.product-layout .price-value {
  color: #444;
  font-size: 18px;
  line-height: 1;
}
.product-layout .price-new {
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  color: #ef3434;
}
.product-layout .price-old {
  color: #999;
  margin-right: 10px;
}
.price-old {
  position: relative;
}
@container (max-width: 185px) {
  .product-carousel--buttons {
    flex-wrap: wrap;
  }
  .product-carousel--button-buy {
    order: 1;
    flex: 0 0 100%;
  }
  .product-carousel--wishlist,
  .product-carousel--compare {
    order: 2;
    flex: 1 1 calc(50% - 2.5px);
    width: auto;
  }
}
.product-carousel--wishlist .fa, .product-carousel--compare .fa {
  font-weight: bolder;
  font-size: 14px;
  line-height: 1.5;
}
.product-carousel--wishlist .fa {
  color: red;
}
.product-carousel--compare .fa {
  color: green;
}
.product-list .product-carousel--wishlist, .product-list .product-carousel--compare {
  margin-right: 5px;
  float: left;
  margin-top: 3px;
}
/* SWIPER LAYOUT WILL GO HERE */

/* NEW PRODUCT CARD LAYOUT DO NOT MODIFY */
/* Grid Layout CSS */
.product-layout--grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.product-layout--container {
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  position: relative;
  width: 100%;
  margin: 0;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 6px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: box-shadow .2s ease;
  overflow: hidden;
}
.product-layout--container:hover {
  border: 1px solid rgba(0,0,0,.086);
  box-shadow: 0 5px 15px rgba(0,0,0,.06);
  box-shadow: 0 5px 5px rgba(0,0,0,.1);
  box-shadow: 3px 3px 15px 0px rgba(0,0,0,.15);
  z-index: 2;
}
@media (min-width: 992px) {
  .product-layout--grid {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .product-layout--grid > .product-layout--container {
    flex: 0 0 calc(16.666% - 8.34px);
    box-sizing: border-box;
  }
}
@media (max-width: 991px) {
  .product-layout--grid > .product-layout--container {
    flex-basis: calc(33% - 5px);
  }
}
@media (max-width: 576px) {
  .product-layout--grid > .product-layout--container {
    flex-basis: calc(50% - 5px);
    box-sizing: border-box;
  }
}
.product-layout--image img {
  margin-left: auto;
  margin-right: auto;
  border-radius: 0;
}
.product-layout--model-brand {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 5px;
  font-size: 10px;
  background-color: var(--color-accent--lighter-3);
  color: #fff;
}
.product-layout--model-brand .model-label,.brand-label {
  font-weight: bold;
}
.product-layout--model-brand > span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
}
.product-layout--model-brand span,
.product-layout--model-brand a {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.product-layout--model-brand a {
  display: inline-flex;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

@container (max-width: 210px) {
  .product-layout--model-brand {
    flex-direction: column;
    align-items: flex-start;
  }
  .product-layout--model-brand > span {
    display: inline-flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2px;
    order: 0;
  }
  .product-layout--model-brand a {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
.product-layout--info {
  margin: 10px;
}
.product-layout--name {
  line-height: 16px;
  margin-bottom: 5px;
  max-height: 78px;
  overflow: hidden;
}
.product-layout--name, .product-layout--name a {
  color: #373737;
  font-weight: 600;
}
.product-layout--name:hover, .product-layout--name a:hover {
  color: #373737;
}
a.product-layout--name {
  display: block;
}
.product-layout--description {
  font-size: 12px;
  line-height: 14px;
}
@media (min-width: 768px) {
  .product-layout--name {
    line-height: 14px;
    max-height: 60px;
    overflow: hidden;
  }
  .product-layout--description {
    font-size: 14px;
  }
}
@media (min-width: 1500px) {
  .product-layout--name {
    font-size: 12px;
    max-height: 64px;
    overflow: hidden;
  }
  .product-layout--description {
    max-height: 56px;
    overflow: hidden;
  }
}
.product-layout--footer {
  margin: 10px;
  margin-top: auto;
}
.product-layout--price {
  margin: 5px 0;
}
.product-layout .price-value {
  color: #444;
  font-size: 18px;
  line-height: 1;
}
.product-layout .price-new {
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  color: #ef3434;
}
.product-layout .price-old {
  color: #999;
  margin-right: 10px;
}
.price-old {
  position: relative;
}
.product-layout--buttons {
  display: flex;
  gap: 5px;
  width: 100%;
  align-items: stretch;
}
.product-layout--button-buy {
  flex: 1 1 0;
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
}
@media (min-width: 768px) {
  .product-layout--button-buy {
    padding: 5px 10px;
    font-size: 12px;
  }
}
.product-layout--wishlist, .product-layout--compare {
  display: block;
  color: #333;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  transition: all .25s ease;
  opacity: 1;
}
@container (max-width: 185px) {
  .product-layout--buttons {
    flex-wrap: wrap;
  }
  .product-layout--button-buy {
    order: 1;
    flex: 0 0 100%;
  }
  .product-layout--wishlist,
  .product-layout--compare {
    order: 2;
    flex: 1 1 calc(50% - 2.5px);
    width: auto;
  }
}
.product-layout--container:hover .product-layout--wishlist, .product-layout--container:hover .product-layout--compare {
  opacity: 1;
}
.product-layout--wishlist:hover, .product-layout--compare:hover {
  color: #0056b3;
  border: 1px solid #415F69;
  cursor: pointer;
}
.product-layout--wishlist .fa, .product-layout--compare .fa {
  font-weight: bolder;
  font-size: 14px;
  line-height: 1.5;
}
.product-layout--wishlist .fa {
  color: red;
}
.product-layout--compare .fa {
  color: green;
}
.product-list .product-layout--wishlist, .product-list .product-layout--compare {
  margin-right: 5px;
  float: left;
  margin-top: 3px;
}
.compact-recently-viewed .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 {
  color: #333;
  font-size: 11px;
}
.compact-recently-viewed .compact-layout--rating .fa-stack {
  font-size: 6px;
}
@media (max-width: 767px) {
  .product-layout-row {
    margin-left: 0;
    margin-right: 0;
    gap: 10px;
  }
  .product-layout-row .product-layout {
    padding-left: 0;
    padding-right: 0;
    flex-basis: calc(50% - 5px);
  }
}
/* NEW PRODUCT CARD LAYOUT DO NOT MODIFY */

/* =========================================================================
   DEFAULT-APEX INTEGRATION (merged in, nothing above this line
   touched) - styles the swapped-in default-theme twig markup (plain
   .product-thumb/.image/.caption/.button-group, not this file's own
   .product-thumb-- / .product-layout-- BEM modifier classes above) now used by
   category.twig, product.twig, and the bestseller/featured/latest/
   special extension module templates. Ported verbatim from
   catalog/view/theme/default/stylesheet/product-layout-apex-match.css
   (originally built against the stock default theme) - see
   default-apex-ocmod/ at the project root for the standalone
   installable package this was developed as.
   ========================================================================= */

/* ==========================================================================
   Default theme product-thumb -> visually/functionally match apex's
   .product-layout--grid card design, CSS ONLY. No template/HTML changes.

   Default theme markup this targets (catalog/product/category.twig et al,
   unchanged, identical across category/search/special/manufacturer_info):

   <div class="product-layout product-grid col-lg-3 ...">
     <div class="product-thumb">
       <div class="image"><a><img class="img-responsive"></a></div>
       <div>
         <div class="caption">
           <h4><a>Name</a></h4>
           <p>Description</p>
           <p class="price"><span class="price-new">..</span> <span class="price-old">..</span></p>
           <div class="rating">...5 fa-stack stars...</div>
         </div>
         <div class="button-group">
           <button><i class="fa fa-shopping-cart"></i> <span>Add to Cart</span></button>
           <button><i class="fa fa-heart"></i></button>
           <button><i class="fa fa-exchange"></i></button>
         </div>
       </div>
     </div>
   </div>

   Known gap (CSS cannot add markup): apex's card has a
   Part#/Brand info bar (.product-layout--model-brand) between the image
   and the name - default's product array/template never expose model or
   manufacturer on listing pages, so there is no element to style into
   that position. Everything else is achievable with CSS alone because
   the two markups share the same effective shape (image, name,
   description, rating, price, three-button row).

   Also includes one page-wide (not product-card-scoped) override below:
   .container's width, matched to apex's own value - this affects
   header/footer/every page on the site, not just product listings.
   ========================================================================== */

/* ---- Page container width, matched to apex ----
   Bootstrap's stock .container steps in fixed tiers (750/970/1170px at
   sm/md/lg) - this is what drove the sidebar-squeeze card-width math
   documented further down this file. apex doesn't use Bootstrap's
   stock tiers at all: fluid 100% width from 768px up to 1400px, then
   locked to a fixed 1400px above that (verified in apex.css).
   Matching it here changes the page's overall width behavior everywhere,
   not just on product listing pages - loads after bootstrap.min.css in
   header.twig so this wins the cascade at equal .container specificity. */
@media (min-width: 768px) and (max-width: 1400px) {
  .container {
    width: 100%;
    max-width: 100%;
  }
}
@media (min-width: 1401px) {
  .container {
    width: 1400px;
    max-width: 1400px;
  }
}

/* ---- Equal-height cards within a row ----
   .row is normally Bootstrap's float-based grid, so columns don't
   stretch to a shared row height on their own - apex's own
   .product-layout--grid gets equal-height cards for free because it's a
   flex container with the browser's default align-items:stretch. Only
   display/flex-wrap are added to .row here; column width/count is left
   entirely to whatever Bootstrap col-* classes (or the grid/list toggle)
   already set - this doesn't touch that, only makes the row stretch
   each column's height so .product-thumb's height:100% below actually
   has something to fill. :has() scopes it to rows that actually contain
   product cards, so it can't affect any other .row on the page. */
.row:has(> .product-layout) {
  display: flex;
  flex-wrap: wrap;
}

/* ---- Items per row, listing pages only, GRID MODE ONLY ----
   Scoped to the actual product-category/search/special/manufacturer_info
   page containers (each has its own unique #product-* id) plus #content
   specifically, so it can never reach the Featured sidebar widget
   (rendered in the sibling <aside id="column-left">, not #content) or
   any extension module elsewhere on the site (bestseller/special/
   featured/latest - see the container-query block below this one for
   those). This is the only place column width/count is touched for
   listing pages - overrides whatever Bootstrap col-* class the GRID
   toggle sets (col-lg-3 etc, per common.js's #grid-view handler).
   Column-width rules below are scoped to .product-grid specifically
   (not bare .product-layout) - the LIST toggle (#list-view in
   common.js) swaps the class to .product-list.col-xs-12, meant to stay
   100% width/one-per-row. An earlier version of this rule targeted
   bare .product-layout with no .product-grid requirement, which matched
   .product-list too and force-squeezed list view into these same grid
   columns - breaking list view entirely.

   3/4/5-per-row tiers use a CONTAINER query on #content's own row, not
   a viewport @media query. #content's width isn't a fixed function of
   viewport width on this template - category.twig sets it to col-sm-6
   (50%) when BOTH column_left and column_right are enabled, col-sm-9
   (75%) with just one, or col-sm-12 (100%) with neither - so the exact
   same viewport width can mean three very different actual content
   widths depending purely on which sidebars an admin has turned on.
   A @media breakpoint literally cannot see that difference; a
   @container query reacting to the row's own rendered width naturally
   does, which is what makes "3 per row with both sidebars, 4 with one,
   5 with none" (the actual desired behavior) fall out automatically
   from one shared rule instead of needing separate sidebar-count cases.
   This replaces an earlier @media-based version of this same block
   (766px/1200px breakpoints, capped at 4 columns) that could only ever
   assume one specific sidebar configuration was in effect. */
#product-category #content .row:has(> .product-layout),
#product-search #content .row:has(> .product-layout),
#product-manufacturer #content .row:has(> .product-layout) {
  container-type: inline-size;
  margin-left: -5px;
  margin-right: -5px;
}
#product-category #content .product-grid.product-layout,
#product-search #content .product-grid.product-layout,
#product-manufacturer #content .product-grid.product-layout {
  flex: 0 0 50%;
  max-width: 50%;
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}
@container (min-width: 600px) {
  #product-category #content .product-grid.product-layout,
  #product-search #content .product-grid.product-layout,
  #product-manufacturer #content .product-grid.product-layout {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}
@container (min-width: 850px) {
  #product-category #content .product-grid.product-layout,
  #product-search #content .product-grid.product-layout,
  #product-manufacturer #content .product-grid.product-layout {
    flex: 0 0 25%;
    max-width: 25%;
  }
}
@container (min-width: 1100px) {
  #product-category #content .product-grid.product-layout,
  #product-search #content .product-grid.product-layout,
  #product-manufacturer #content .product-grid.product-layout {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/* ---- Items per row, EXTENSION MODULES (bestseller/featured/latest/
   special/most_viewed/most_searched/random/etc) - 5 per row on desktop,
   scaling down ----
   These modules' own twig templates render bare
   `.product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12` and never get
   .product-grid or .product-list added (that pair is exclusive to the
   listing-page grid/list toggle above) - so :not(.product-grid):
   not(.product-list) reliably selects only extension-module cards,
   with no ID-scoping needed, wherever they render: homepage content,
   a category page's content_top/content_bottom (still inside #content,
   but excluded from the block above by the .product-grid requirement),
   or the far narrower <aside id="column-left"/"column-right"> sidebar
   widget slot (col-sm-3, ~25% of the container).
   Column count here uses a CONTAINER query on the row itself, not a
   viewport @media query like the listing-page block above - these
   modules can render in two very differently-sized contexts (a full
   content-width row vs. the narrow sidebar slot) on the same page at
   the same viewport width, and a media-query breakpoint tuned for one
   would put cramped/oversized columns in the other. This is the same
   class of bug already hit and fixed for the button-stack threshold and
   the listing-page column count elsewhere in this file - avoided here
   from the start by reacting to the row's own rendered width instead. */
.row:has(> .product-layout:not(.product-grid):not(.product-list)) {
  container-type: inline-size;
  margin-left: -5px;
  margin-right: -5px;
}
.product-layout:not(.product-grid):not(.product-list) {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}
@container (min-width: 380px) {
  .product-layout:not(.product-grid):not(.product-list) {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@container (min-width: 600px) {
  .product-layout:not(.product-grid):not(.product-list) {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}
@container (min-width: 850px) {
  .product-layout:not(.product-grid):not(.product-list) {
    flex: 0 0 25%;
    max-width: 25%;
  }
}
@container (min-width: 1100px) {
  .product-layout:not(.product-grid):not(.product-list) {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/* ---- Related products (product.twig's "text_related" block) ----
   This section's markup is its own third pattern, different from both
   blocks above: the card wrapper here isn't .product-layout at all -
   product.twig wraps each .product-thumb directly in a bare
   `<div class="col-xs-8 col-sm-6">` (or `col-xs-6 col-md-4` /
   `col-xs-6 col-sm-3`, chosen by the same column_left/column_right
   sidebar logic as everywhere else) with no .product-layout/.product-
   grid/.product-list class whatsoever - so neither of the two selector
   strategies above can reach it; it needs its own :has()-based hook off
   the actual markup shape (a .row whose direct-child divs each wrap a
   .product-thumb).
   .product-thumb itself already picks up this file's card styling
   (border/shadow/flex-column/reordered caption/price/button-group)
   unconditionally, since that selector was never scoped to begin with -
   only the ROW/COLUMN layer needed building here.
   Column count reuses the exact same container-query tiers as the main
   listing-page grid above (600/850/1100px -> 3/4/5 columns) for one
   consistent "columns per available width" scale between the main
   listing and this section, since both live inside the same #content
   with the same col-sm-6/9/12 sidebar-driven width swings.
   The stock template also emits its own `<div class="clearfix
   visible-md visible-sm">` spacers every 2/3/4 items - a float-clearing
   technique from before this row was flexbox. With flex-wrap doing the
   row-breaking automatically, those spacers are now just stray empty
   flex items that would leave irregular gaps at the breakpoints where
   Bootstrap's .visible-* utilities turn them on - hidden below rather
   than left in the flex flow. */
#product-product #content .row:has(> div > .product-thumb) {
  display: flex;
  flex-wrap: wrap;
  container-type: inline-size;
  margin-left: -5px;
  margin-right: -5px;
}
#product-product #content .row > div:has(> .product-thumb) {
  flex: 0 0 50%;
  max-width: 50%;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
@container (min-width: 600px) {
  #product-product #content .row > div:has(> .product-thumb) {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}
@container (min-width: 850px) {
  #product-product #content .row > div:has(> .product-thumb) {
    flex: 0 0 25%;
    max-width: 25%;
  }
}
@container (min-width: 1100px) {
  #product-product #content .row > div:has(> .product-thumb) {
    flex: 0 0 20%;
    max-width: 20%;
  }
}
@container (min-width: 1300px) {
  #product-product #content .row > div:has(> .product-thumb) {
    flex: 0 0 16.6666%;
    max-width: 16.6666%;
  }
}
#product-product #content .clearfix.visible-md {
  display: none !important;
}

/* .product-thumb's own margin is zeroed out below (cancelling stock
   stylesheet.css's margin-bottom:20px, which would otherwise make cards
   in the same row uneven heights before the row-stretch above even gets
   a chance to run) - put the vertical gap back at the column level
   instead, so wrapped rows still have breathing room between them. */
.product-layout {
  margin-bottom: 10px;
}

/* ---- Card-internal list-mode layout, matching apex's own list view ----
   apex's list view (product-layout.css: .product-thumb--image
   floated left at 100px/260px, .product-thumb--info filling the rest
   via calc(100% - image width - gutters)) puts the image and text
   side-by-side, not stacked. The unconditional "Card container" rule
   further below makes every .product-thumb a flex-direction:column box
   (image on top, full width) - correct for grid mode, but the same
   rule applying in list mode produced a full-width stacked card that
   just looked like one huge grid tile per row, not a real list.
   An earlier version of this section only neutralized stock
   stylesheet.css's OWN float-based list layout (float:none) without
   replacing it with anything - so list mode had no side-by-side layout
   at all, just inherited the grid's stacked column layout by default.
   Fixed by switching .product-thumb to flex-direction:row for list mode
   specifically (floats don't apply to flex children, so this replaces
   floating with the flex equivalent), capping .image to a fixed width
   matching apex's own two-tier sizing, and letting the existing
   caption+button-group wrapper (already flex-column, unchanged) fill
   the remaining width as the right-hand column. */
.product-list .product-thumb {
  flex-direction: row;
  align-items: stretch;
}
.product-list .product-thumb .image {
  flex: 0 0 100px;
  max-width: 100px;
  padding: 10px;
}
@media (min-width: 1200px) {
  .product-list .product-thumb .image {
    flex: 0 0 260px;
    max-width: 260px;
  }
}
.product-list .product-thumb > div:has(> .caption) {
  min-width: 0;
}
/* Stock stylesheet.css's .product-list .product-thumb .caption still
   carries margin-left:230px, a leftover from its own float-based list
   layout (image used to be 230px wide) - flexbox already positions the
   caption correctly next to our differently-sized image above, so that
   stock margin is pure extra dead space pushing the text away from the
   image. Zeroed out here. */
.product-list .product-thumb .caption {
  margin-left: 0;
}
.product-list .product-thumb .caption h4,
.product-list .product-thumb .caption > p:not(.price) {
  max-height: none;
  overflow: visible;
}
.product-list .product-thumb .button-group {
  border-left: 0;
}

/* ---- Card container ----
   Unscoped (no .product-grid/.product-list ancestor requirement) so every
   .product-thumb gets the same card treatment, including extension
   modules (bestseller/special/featured/latest, the Featured sidebar
   widget) whose markup never carries a product-grid/product-list class
   at all - only the listing pages' own column count/width is left alone. */
.product-thumb {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  width: 100%;
  margin: 0;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  transition: box-shadow .2s ease;
  overflow: hidden;
  container-type: inline-size;
}
.product-thumb:hover {
  border-color: rgba(0, 0, 0, .086);
  box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, .15);
  z-index: 2;
}

/* ---- Image ---- */
.product-thumb .image {
  margin: 0;
  padding: 0;
  text-align: center;
}
.product-thumb .image a {
  display: block;
  transition: none;
}
.product-thumb .image a:hover {
  opacity: 1; /* apex doesn't fade the image on hover */
}
.product-thumb .image img {
  margin-left: auto;
  margin-right: auto;
  border-radius: 0;
  width: 100%;
  height: auto;
}

/* ---- Caption: reorder via flex `order` so it reads name -> description ->
   rating -> price, matching apex's visual order, without touching the
   underlying HTML source order (h4, p, p.price, div.rating). ---- */
/* Category/search/special/manufacturer_info wrap .caption + .button-group
   in an extra unnamed div; that wrapper has to be a flex column itself
   before .caption's own flex-grow below has anything to grow inside.
   Targeted via :has(> .caption) rather than :last-child - extension
   modules (bestseller/special/featured/latest, the Featured sidebar
   widget) use a FLATTER structure with no such wrapper (.image,
   .caption, .button-group are all direct .product-thumb children), so
   :last-child was matching .button-group itself there and forcing it
   into flex-direction:column, stacking the three buttons vertically.
   :has(> .caption) only ever matches the real wrapper div and is inert
   on the flatter module markup, where .caption has no div to be wrapped
   in and .button-group's own row layout is left alone. */
.product-thumb > div:has(> .caption) {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
}
.product-thumb .caption {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 10px;
  min-height: 0;
}
.product-thumb .caption h4 {
  order: 1;
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  margin: 0 0 5px;
  max-height: 60px;
  overflow: hidden;
}
.product-thumb .caption h4 a {
  color: #373737;
}
.product-thumb .caption h4 a:hover {
  color: #373737;
  text-decoration: none;
}
.product-thumb .caption > p:not(.price) {
  order: 2;
  font-size: 12px;
  line-height: 14px;
  color: #666;
  margin: 0 0 5px;
  max-height: 56px;
  overflow: hidden;
}
.product-thumb .caption .rating {
  order: 3;
  padding-bottom: 8px;
}
.product-thumb .caption p.price {
  order: 4;
  margin-top: auto; /* push price to the bottom of the caption, like apex's footer */
  margin-bottom: 0;
  color: #444;
}

/* ---- Rating stars ---- */
.rating .fa-stack {
  width: 12px;
  height: 12px;
}
.rating .fa-star,
.rating .fa-star-o {
  font-size: 12px;
  color: #ffdb00;
}
.rating .fa-star + .fa-star-o {
  color: #ffdb00;
}

/* ---- Price ---- */
.product-thumb .price-new {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: #ef3434;
}
.product-thumb .price-old {
  position: relative;
  color: #999;
  text-decoration: none; /* replace the default underline-strike with apex's diagonal line */
  margin-left: 10px;
}
.product-thumb .price-old:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: -10%;
  top: 1px;
  width: 120%;
  height: 50%;
  border-bottom: 1px solid #ef3434;
  transform: rotate(-15deg);
}

/* ---- Button row: default's 3 buttons (cart, wishlist, compare) map 1:1 onto
   apex's .product-layout--button-buy / --wishlist / --compare. ---- */
.product-thumb .button-group {
  display: flex;
  align-items: stretch;
  gap: 5px;
  padding: 0 10px 10px;
  border: 0;
  background: none;
  overflow: visible;
}
.product-thumb .button-group button {
  float: none;
  width: auto;
  line-height: normal;
  font-weight: normal;
  text-align: center;
  text-transform: none;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all .25s ease;
}
.product-thumb .button-group button:nth-child(1) {
  flex: 1 1 0;
  padding: 0;
  font-size: 12px;
  color: var(--color-button-text);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
  background-color: var(--color-button-bg);
  border-color: var(--color-button-border);
}
.product-thumb .button-group button:nth-child(1):hover, .product-thumb .button-group button:nth-child(1):focus {
  background-color: var(--color-button-hover);
  border-color: var(--color-button-hover);
  color: var(--color-button-text);
  outline: none;
}
.product-thumb .button-group button:nth-child(1):active {
  background-color: var(--color-button-active);
  border-color: var(--color-button-active);
  color: var(--color-button-text);
}
/* The Add to Cart label is wrapped in <span class="hidden-xs hidden-sm
   hidden-md"> in the stock markup, so Bootstrap hides it below the "md"
   breakpoint (<992px) by design - can't remove that class without an
   HTML change, so override it here instead. Bootstrap's own .hidden-*
   utilities use !important, so beating them requires !important too. */
.product-thumb .button-group button:nth-child(1) span {
  display: inline !important;
}
.product-thumb .button-group button:nth-child(2),
.product-thumb .button-group button:nth-child(3) {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #333;
  background-color: #f0f0f0;
  border-color: #ccc;
}
.product-thumb .button-group button:nth-child(2):hover,
.product-thumb .button-group button:nth-child(3):hover {
  color: #0056b3;
  background-color: #f0f0f0;
  border-color: #415f69;
  cursor: pointer;
}
.product-thumb .button-group button:nth-child(2) .fa {
  color: red;
}
.product-thumb .button-group button:nth-child(3) .fa {
  color: green;
}
.product-thumb .button-group button:nth-child(1):hover .fa,
.product-thumb .button-group button:nth-child(1) .fa {
  color: var(--color-button-text);
}

/* Product detail page's Wishlist/Compare buttons (next to Add to Cart) - stay the
   normal Bootstrap .btn-default size (matching Add to Cart), just get the same
   icon colors as the listing/category cards' equivalent buttons. */
.icon-action-btn .fa-heart {
  color: red;
}
.icon-action-btn .fa-exchange {
  color: green;
}

/* On a narrow card (mobile, more-per-row, or a sidebar widget) three
   buttons in one row squeeze Add to Cart down to almost nothing - past
   this width, wrap wishlist/compare onto their own row below instead,
   split evenly, and let Add to Cart have the full-width row to itself.
   Reacting to the card's own rendered width via a container query
   (not the viewport) so it works correctly even inside a narrower
   ancestor like a sidebar column.
   185px matches apex's own .product-layout--buttons threshold
   exactly (verified in catalog/view/theme/apex/stylesheet/
   product-layout.css) - this means the 3-per-row tier (~177px cards,
   see the breakpoint comment above) DOES stack, same as apex's
   own cards would at an equivalent width. */
@container (max-width: 185px) {
  .product-thumb .button-group {
    flex-wrap: wrap;
  }
  .product-thumb .button-group button:nth-child(1) {
    order: 1;
    flex: 0 0 100%;
    padding: 6px 8px;
  }
  .product-thumb .button-group button:nth-child(2),
  .product-thumb .button-group button:nth-child(3) {
    order: 2;
    flex: 1 1 calc(50% - 2.5px);
    width: auto;
  }
}