/*
 * LS Vita - OPC040084 compatibility layer for OpenCart 4.1.0.4
 * v31
 *
 * Goal: bring the legacy TemplateMela OPC040084 visual language to the
 * OpenCart 4 storefront without copying legacy PHP/TPL/JavaScript internals.
 *
 * Intentionally preserved from the NEW storefront:
 *   - Header/minicart button and dropdown styling
 *   - Product add-to-cart button styling
 *   - Bootstrap menu dropdown structure and dropdown styling
 *
 * Menu change is intentionally limited to the TOP BAR colors and top-level
 * hover treatment. .dropdown-menu is not restyled here.
 */

:root {
  --opc040084-text: #7f7355;
  --opc040084-orange: #ff8106;
  --opc040084-orange-hover: #ff8a00;
  --opc040084-green-top: #a1ce41;
  --opc040084-green-bottom: #6aad38;
  --opc040084-green-border: #6b9f32;
  --opc040084-green-dark: #385b0b;
  --opc040084-warm-bg: #f7f4ed;
  --opc040084-warm-bg-2: #f4f1e7;
  --opc040084-border: #d7d2c2;
}

/* ---------- Legacy OPC040084 typography / palette ---------- */
.lsvita-opc040084 {
  color: var(--opc040084-text);
  font-family: 'Marcellus', Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  background: #fff;
}

.lsvita-opc040084 a {
  color: var(--opc040084-text);
  text-decoration: none;
}

.lsvita-opc040084 a:hover,
.lsvita-opc040084 a:focus {
  color: var(--opc040084-orange-hover);
  text-decoration: none;
}

.lsvita-opc040084 h1,
.lsvita-opc040084 h2,
.lsvita-opc040084 h3,
.lsvita-opc040084 h4,
.lsvita-opc040084 h5,
.lsvita-opc040084 h6 {
  color: var(--opc040084-text);
  font-family: 'Della Respira', Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

.lsvita-opc040084 h1 {
  color: var(--opc040084-orange);
}

/* ---------- Top utility bar ---------- */
.lsvita-opc040084 #top {
  background: var(--opc040084-warm-bg);
  border-bottom: 1px solid #ece8d9;
  margin-bottom: 0;
  padding: 0;
}

.lsvita-opc040084 #top .list-inline-item > a,
.lsvita-opc040084 #top .list-inline-item .dropdown > a,
.lsvita-opc040084 #top .list-inline-item .dropdown > span {
  color: var(--opc040084-text);
}

.lsvita-opc040084 #top .list-inline-item > a:hover,
.lsvita-opc040084 #top .list-inline-item .dropdown > a:hover,
.lsvita-opc040084 #top .list-inline-item .dropdown > span:hover {
  color: var(--opc040084-orange-hover);
}

/* Keep account dropdown itself Bootstrap/OpenCart 4 style. */

/* ---------- Header shell, logo and search ---------- */
.lsvita-opc040084 header {
  padding-top: 12px;
  padding-bottom: 12px;
  background:
    linear-gradient(to bottom, #f7f4ed 0%, #ffffff 37%, #f8f5ee 77%, #f4f1e7 77%, #f4f1e7 100%);
  border-bottom: 1px solid #ece8d9;
}

.lsvita-opc040084 #logo {
  margin: 0;
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.lsvita-opc040084 #logo a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

/* Requirement 4: larger than the OpenCart 4 default max-width:200px. */
.lsvita-opc040084 #logo img {
  width: auto;
  max-width: min(270px, 100%);
  max-height: 108px;
  height: auto;
}

/* Recreate the old green search treatment using the current OC4 form markup. */
.lsvita-opc040084 header #search {
  margin-top: 24px;
  margin-bottom: 10px;
}

.lsvita-opc040084 header #search form {
  margin: 0;
  padding: 9px;
  border: 1px solid #8fbe39;
  border-radius: 5px;
  background: linear-gradient(to bottom, var(--opc040084-green-top) 0%, var(--opc040084-green-bottom) 100%);
}

.lsvita-opc040084 header #search .form-control-lg {
  border-color: #eee;
  border-radius: 3px 0 0 3px;
  background: #fff;
  color: var(--opc040084-text);
  box-shadow: none;
}

.lsvita-opc040084 header #search .btn-lg {
  border-color: #ff9630;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(to bottom, #ffa145 0%, #fe8b1a 100%);
  color: #fff;
  text-shadow: none;
}

.lsvita-opc040084 header #search .btn-lg:hover,
.lsvita-opc040084 header #search .btn-lg:focus {
  border-color: #ff8a00;
  background: linear-gradient(to bottom, #ffad5d 0%, #ff8106 100%);
  color: #fff;
}

/*
 * Requirement 2: DO NOT style #cart .btn-lg here.
 * The new OpenCart 4 cart button/dropdown remains exactly on its existing CSS.
 */
.lsvita-opc040084 header #cart {
  margin-top: 24px;
}

/* ---------- Main menu ---------- */
/*
 * Requirement 3: only recolor the menu bar. Dropdown shape/layout remains
 * controlled by the existing OpenCart 4 stylesheet and common/menu.twig.
 */
.lsvita-opc040084 #menu {
  background-color: var(--opc040084-green-bottom);
  background-image: linear-gradient(to bottom, var(--opc040084-green-top) 0%, var(--opc040084-green-bottom) 100%);
  border-color: #a0ce41 var(--opc040084-green-border) #5c8e2a;
  box-shadow: inset 0 1px 0 #c8e861;
}

.lsvita-opc040084 #menu .navbar-nav > li > a {
  color: #fff;
  font-family: 'Della Respira', Georgia, serif;
  text-transform: uppercase;
  text-shadow: none;
}

.lsvita-opc040084 #menu .navbar-nav > li > a:hover,
.lsvita-opc040084 #menu .navbar-nav > li.show > a,
.lsvita-opc040084 #menu .navbar-nav > li > a:focus {
  color: var(--opc040084-green-dark);
  background-color: rgba(255, 255, 255, 0.08);
}

/* Keep no-children items readable because OC4 uses dropdown-item for them. */
.lsvita-opc040084 #menu .navbar-nav > li > a.dropdown-item {
  color: #fff;
}

.lsvita-opc040084 #menu .navbar-nav > li > a.dropdown-item:hover,
.lsvita-opc040084 #menu .navbar-nav > li > a.dropdown-item:focus {
  color: var(--opc040084-green-dark);
  background-color: rgba(255, 255, 255, 0.08);
}

/* IMPORTANT: no .dropdown-menu / .dropdown-inner appearance overrides. */

/* ---------- Content accents from the old theme ---------- */
.lsvita-opc040084 .breadcrumb {
  --bs-breadcrumb-divider-color: #a39982;
  --bs-breadcrumb-item-active-color: #7f7355;
}

.lsvita-opc040084 .breadcrumb a:hover {
  color: var(--opc040084-orange-hover);
}

.lsvita-opc040084 .card,
.lsvita-opc040084 .list-group,
.lsvita-opc040084 .table,
.lsvita-opc040084 .form-control,
.lsvita-opc040084 .form-select {
  --bs-border-color: #ded8ca;
}

.lsvita-opc040084 .form-control:focus,
.lsvita-opc040084 .form-select:focus {
  border-color: #a1ce41;
  box-shadow: 0 0 0 .2rem rgba(161, 206, 65, .16);
}

.lsvita-opc040084 .product-thumb {
  border-color: #e3ded2;
  border-radius: 5px;
  background: #fff;
  box-shadow: none;
}

.lsvita-opc040084 .product-thumb .description h4 a {
  color: var(--opc040084-text);
}

.lsvita-opc040084 .product-thumb .description h4 a:hover {
  color: var(--opc040084-orange-hover);
}

/* Do not restyle .product-thumb .button: keep the new storefront buttons. */

.lsvita-opc040084 .price-new {
  color: #5f8f2f;
}

.lsvita-opc040084 .price-old {
  color: #c96f45;
}

/* ---------- Existing migrated TemplateMela footer ---------- */
/* v27/v28 already ports the original footer; this only harmonizes typography. */
.lsvita-opc040084 .lsvita-legacy-footer {
  color: var(--opc040084-text);
  font-family: 'Marcellus', Arial, Helvetica, sans-serif;
}

/* ---------- Responsive tuning ---------- */
@media (max-width: 991.98px) {
  .lsvita-opc040084 #logo {
    justify-content: center;
    min-height: auto;
    margin-bottom: 8px;
  }

  .lsvita-opc040084 #logo img {
    max-width: min(240px, 100%);
    max-height: 96px;
  }

  .lsvita-opc040084 header #search,
  .lsvita-opc040084 header #cart {
    margin-top: 10px;
  }
}

@media (max-width: 767.98px) {
  .lsvita-opc040084 header {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .lsvita-opc040084 #logo img {
    max-width: min(225px, 85vw);
  }

  .lsvita-opc040084 #menu .navbar-nav > li > a {
    text-transform: none;
  }
}

/* ========================================================================== */
/* LS Vita v32 refinements - 2026-10-06                                      */
/* ========================================================================== */

/* 1) Search and NEW cart button: vertically line up without restyling cart. */
.lsvita-opc040084 header .lsvita-header-row {
  align-items: center !important;
}

.lsvita-opc040084 header #search,
.lsvita-opc040084 header #cart {
  margin-top: 0;
  margin-bottom: 0 !important;
}

.lsvita-opc040084 header #search form {
  margin-bottom: 0 !important;
}

/* The legacy OPC040084 search treatment now targets the real #search wrapper. */
.lsvita-opc040084 header #search form {
  padding: 9px;
  border: 1px solid #8fbe39;
  border-radius: 5px;
  background: linear-gradient(to bottom, var(--opc040084-green-top) 0%, var(--opc040084-green-bottom) 100%);
}

.lsvita-opc040084 header #search .form-control-lg,
.lsvita-opc040084 header #search .btn-lg {
  min-height: 46px;
}

/* 2) Currency label spacing. */
.lsvita-opc040084 .lsvita-currency-label {
  white-space: nowrap;
}

/* 3) Compare button: same neutral grey family as Sort/Limit controls. */
.lsvita-opc040084 #compare-total {
  background: var(--bs-tertiary-bg, #f8f9fa) !important;
  border: 1px solid var(--bs-border-color, #dee2e6) !important;
  color: #444 !important;
  box-shadow: none !important;
  font-family: inherit;
  font-weight: 400;
}

.lsvita-opc040084 #compare-total i,
.lsvita-opc040084 #compare-total span {
  color: #444 !important;
}

.lsvita-opc040084 #compare-total:hover,
.lsvita-opc040084 #compare-total:focus {
  background: #e9ecef !important;
  border-color: #ced4da !important;
  color: #333 !important;
}

/* 4) Slightly smaller category heading and product title text. */
.lsvita-opc040084 #product-category #content > h1 {
  font-size: 28px;
  line-height: 1.25;
  margin-bottom: 16px;
}

.lsvita-opc040084 #product-category .product-thumb .description h4 {
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  margin-bottom: 8px;
}

/* 5) Make product-grid currency/price easier to read. */
.lsvita-opc040084 #product-category .product-thumb .price,
.lsvita-opc040084 #product-category .product-thumb .price-new {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
}

/* 6) Left category module: reproduce the old OPC040084 '商品目錄' box. */
.lsvita-opc040084 .lsvita-category-box {
  border: 1px solid #f4f1e7;
  border-radius: 5px;
  background: #fff;
  padding: 5px;
  overflow: hidden;
}

.lsvita-opc040084 .lsvita-category-heading {
  margin: 0 0 5px;
  padding: 7px 8px;
  border-radius: 4px;
  background: linear-gradient(to bottom, #faf8f3 0%, #f4f1e7 100%);
  color: var(--opc040084-orange);
  font-family: 'Marcellus', Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.4;
}

.lsvita-opc040084 .lsvita-category-heading i {
  margin-right: 7px;
  color: #ffa145;
}

.lsvita-opc040084 .lsvita-category-content {
  padding: 3px 9px 8px;
}

.lsvita-opc040084 .lsvita-category-tree,
.lsvita-opc040084 .lsvita-category-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lsvita-opc040084 .lsvita-category-tree > li {
  padding: 3px 0;
}

.lsvita-opc040084 .lsvita-category-tree a {
  display: block;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: var(--opc040084-text);
  font-size: 14px;
  line-height: 1.35;
}

.lsvita-opc040084 .lsvita-category-tree > li > a.active,
.lsvita-opc040084 .lsvita-category-tree > li.is-active > a {
  color: var(--opc040084-orange);
  font-weight: 400;
}

.lsvita-opc040084 .lsvita-category-tree a:hover,
.lsvita-opc040084 .lsvita-category-tree a:focus,
.lsvita-opc040084 .lsvita-category-tree ul a.active {
  color: var(--opc040084-orange-hover);
  background: transparent;
}

.lsvita-opc040084 .lsvita-root-arrow {
  display: inline-block;
  width: 14px;
  color: var(--opc040084-orange);
  font-family: Arial, sans-serif;
}

.lsvita-opc040084 .lsvita-category-tree ul {
  margin-left: 14px;
  padding-top: 2px;
}

.lsvita-opc040084 .lsvita-category-tree ul li {
  padding: 1px 0;
}

.lsvita-opc040084 .lsvita-child-bullet {
  display: inline-block;
  width: 14px;
  color: #b5a47d;
  font-family: Arial, sans-serif;
  font-size: 12px;
  vertical-align: 1px;
}

/* Remove Bootstrap list-group panel appearance if an old cached module view remains. */
.lsvita-opc040084 #column-left .list-group {
  border: 1px solid #f4f1e7;
  border-radius: 5px;
  padding: 7px 10px;
  background: #fff;
}

.lsvita-opc040084 #column-left .list-group-item {
  border: 0 !important;
  padding: 5px 2px;
  background: transparent !important;
  color: var(--opc040084-text) !important;
}

.lsvita-opc040084 #column-left .list-group-item.active {
  color: var(--opc040084-orange) !important;
  font-weight: 400;
}

@media (max-width: 991.98px) {
  .lsvita-opc040084 header #search,
  .lsvita-opc040084 header #cart {
    margin-top: 8px;
  }

  .lsvita-opc040084 #product-category #content > h1 {
    font-size: 25px;
  }
}

/* ========================================================================== */
/* LS Vita v33 refinements - 2026-10-06                                      */
/* ========================================================================== */

/* 1) Left product directory: restore the boxed OPC040084 look. */
.lsvita-opc040084 .lsvita-category-box {
  margin-bottom: 12px !important;
  padding: 5px !important;
  border: 1px solid #ded8ca !important;
  border-radius: 5px !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden;
}

.lsvita-opc040084 .lsvita-category-heading {
  margin: 0 !important;
  padding: 7px 8px 7px 8px !important;
  border-radius: 4px 4px 0 0 !important;
  border-bottom: 1px solid #f0ece2;
  background: linear-gradient(to bottom, #fbfaf6 0%, #f5f2ea 100%) !important;
  color: var(--opc040084-orange) !important;
  font-size: 15px !important;
  line-height: 1.4;
}

.lsvita-opc040084 .lsvita-category-content {
  margin: 0 !important;
  padding: 6px 8px 7px !important;
  background: #fff;
}

.lsvita-opc040084 .lsvita-category-tree > li {
  padding: 2px 0 !important;
}

.lsvita-opc040084 .lsvita-category-tree > li > a {
  position: relative;
  padding: 3px 20px 3px 0 !important;
  color: var(--opc040084-text) !important;
  background: transparent !important;
}

.lsvita-opc040084 .lsvita-category-tree > li > a.active,
.lsvita-opc040084 .lsvita-category-tree > li.is-active > a {
  color: var(--opc040084-orange) !important;
}

.lsvita-opc040084 .lsvita-root-arrow {
  width: 14px !important;
  color: var(--opc040084-orange) !important;
}

.lsvita-opc040084 .lsvita-tree-state {
  position: absolute;
  right: 2px;
  top: 3px;
  color: #a99f88;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1;
}

.lsvita-opc040084 .lsvita-category-tree ul {
  margin-left: 15px !important;
  padding-top: 1px !important;
}

.lsvita-opc040084 .lsvita-category-tree ul li {
  padding: 1px 0 !important;
}

.lsvita-opc040084 .lsvita-category-tree ul a {
  padding: 2px 0 !important;
  color: var(--opc040084-text) !important;
  background: transparent !important;
}

.lsvita-opc040084 .lsvita-category-tree ul a:hover,
.lsvita-opc040084 .lsvita-category-tree ul a.active {
  color: var(--opc040084-orange-hover) !important;
}

/* 2) Restore the original green/orange search look, center it on the page,
      and make its outer height exactly match the stock OC4 cart button (48px). */
.lsvita-opc040084 header .lsvita-header-row {
  align-items: center !important;
}

.lsvita-opc040084 header #search {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.lsvita-opc040084 header #search form {
  width: 285px;
  max-width: 100%;
  height: 48px;
  margin: 0 !important;
  padding: 3px !important;
  border: 1px solid #8fbe39 !important;
  border-radius: 5px !important;
  background: linear-gradient(to bottom, #a1ce41 0%, #6aad38 100%) !important;
  box-sizing: border-box;
}

.lsvita-opc040084 header #search .form-control-lg {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  border: 1px solid #eee !important;
  border-right: 0 !important;
  border-radius: 3px 0 0 3px !important;
  background: #fff !important;
  color: var(--opc040084-text) !important;
  font-size: 12px !important;
  line-height: 20px !important;
  box-shadow: none !important;
}

.lsvita-opc040084 header #search .btn-lg {
  width: 42px;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 1px solid #ff9630 !important;
  border-radius: 0 5px 5px 0 !important;
  background: linear-gradient(to bottom, #ffa145 0%, #fe8b1a 100%) !important;
  color: #fff !important;
  font-size: 15px !important;
  line-height: 38px !important;
  text-shadow: none !important;
}

.lsvita-opc040084 header #search .btn-lg:hover,
.lsvita-opc040084 header #search .btn-lg:focus {
  border-color: #ff8a00 !important;
  background: linear-gradient(to bottom, #ffad5d 0%, #ff8106 100%) !important;
  color: #fff !important;
}

/* Keep the new cart button appearance; only position its wrapper. */
.lsvita-opc040084 header #cart {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 0 !important;
}

.lsvita-opc040084 header #cart > .dropdown {
  width: 307px;
  max-width: 100%;
}

/* 4/5) Legacy category-page heading, banner and visual subcategory tiles. */
.lsvita-opc040084 #product-category #content > h1.lsvita-category-title {
  margin: 0 0 15px !important;
  color: var(--opc040084-orange) !important;
  font-size: 17px !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
}

.lsvita-opc040084 #product-category .lsvita-category-info {
  margin-bottom: 14px;
  overflow: hidden;
}

.lsvita-opc040084 #product-category .lsvita-category-banner {
  width: 530px;
  max-width: 100%;
  margin: 0 0 10px;
  padding: 0;
  background: #fff;
  border: 0;
}

.lsvita-opc040084 #product-category .lsvita-category-banner img {
  display: block;
  width: 530px;
  max-width: 100%;
  height: auto;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.lsvita-opc040084 #product-category .lsvita-category-description {
  margin-bottom: 8px;
}

.lsvita-opc040084 #product-category .lsvita-refine-title {
  margin: 0 0 10px !important;
  color: var(--opc040084-text) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
}

.lsvita-opc040084 #product-category .lsvita-subcategory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(105px, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 500px;
  margin: 0 0 18px;
}

.lsvita-opc040084 #product-category .lsvita-subcategory-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  color: var(--opc040084-text) !important;
  text-align: center;
  text-decoration: none !important;
}

.lsvita-opc040084 #product-category .lsvita-subcategory-image {
  display: flex;
  width: 100%;
  max-width: 117px;
  height: 117px;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  border: 1px solid #e6dfcf;
  background: #fff;
  overflow: hidden;
}

.lsvita-opc040084 #product-category .lsvita-subcategory-image img {
  display: block;
  max-width: 115px;
  max-height: 115px;
  width: auto;
  height: auto;
}

.lsvita-opc040084 #product-category .lsvita-subcategory-name {
  display: block;
  color: var(--opc040084-text);
  font-size: 14px;
  line-height: 1.35;
}

.lsvita-opc040084 #product-category .lsvita-subcategory-card:hover .lsvita-subcategory-name {
  color: var(--opc040084-orange-hover);
}

@media (max-width: 991.98px) {
  .lsvita-opc040084 header #search,
  .lsvita-opc040084 header #cart {
    margin-top: 0 !important;
  }

  .lsvita-opc040084 #product-category .lsvita-subcategory-grid {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }
}

@media (max-width: 767.98px) {
  .lsvita-opc040084 header #search,
  .lsvita-opc040084 header #cart {
    justify-content: center !important;
    margin-top: 8px !important;
  }

  .lsvita-opc040084 header #search form,
  .lsvita-opc040084 header #cart > .dropdown {
    width: 100%;
  }

  .lsvita-opc040084 #product-category .lsvita-subcategory-grid {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
    max-width: none;
  }
}


/* ========================================================================== */
/* LS Vita v34 - Compare button neutral style                                 */
/* ========================================================================== */
/*
 * Force the category "compare products" control to use the same neutral
 * Bootstrap family as the sort/list controls, overriding .btn-primary.
 * Intentionally does not alter add-to-cart or the header cart button.
 */
#compare-total.lsvita-compare-neutral,
#compare-total.lsvita-compare-neutral.btn,
a#compare-total.lsvita-compare-neutral {
  --bs-btn-color: #495057 !important;
  --bs-btn-bg: #f8f9fa !important;
  --bs-btn-border-color: #dee2e6 !important;
  --bs-btn-hover-color: #343a40 !important;
  --bs-btn-hover-bg: #e9ecef !important;
  --bs-btn-hover-border-color: #ced4da !important;
  --bs-btn-active-color: #343a40 !important;
  --bs-btn-active-bg: #e2e6ea !important;
  --bs-btn-active-border-color: #ced4da !important;
  --bs-btn-disabled-color: #6c757d !important;
  --bs-btn-disabled-bg: #f8f9fa !important;
  --bs-btn-disabled-border-color: #dee2e6 !important;

  color: #495057 !important;
  background-color: #f8f9fa !important;
  background-image: none !important;
  border: 1px solid #dee2e6 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 400 !important;
}

#compare-total.lsvita-compare-neutral i,
#compare-total.lsvita-compare-neutral span {
  color: #495057 !important;
}

#compare-total.lsvita-compare-neutral:hover,
#compare-total.lsvita-compare-neutral:focus,
#compare-total.lsvita-compare-neutral:active {
  color: #343a40 !important;
  background-color: #e9ecef !important;
  background-image: none !important;
  border-color: #ced4da !important;
  box-shadow: none !important;
}

#compare-total.lsvita-compare-neutral:hover i,
#compare-total.lsvita-compare-neutral:hover span,
#compare-total.lsvita-compare-neutral:focus i,
#compare-total.lsvita-compare-neutral:focus span {
  color: #343a40 !important;
}


/* ========================================================================== */
/* LS Vita v35 - Search bar compact / original neutral border                 */
/* ========================================================================== */
/*
 * Remove the v33 green outer search shell.
 * Restore the clean OpenCart 4-style white/neutral search appearance.
 * Keep the search centered in the middle header column and vertically centered
 * against the current cart button.
 */

.lsvita-opc040084 header #search {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

/* No colored outer frame/background. */
.lsvita-opc040084 header #search form {
  width: 285px !important;
  max-width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* Original clean neutral input border. */
.lsvita-opc040084 header #search .form-control-lg {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid #dee2e6 !important;
  border-right: 0 !important;
  border-radius: 5px 0 0 5px !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--opc040084-text) !important;
  font-size: 14px !important;
  line-height: 38px !important;
  box-shadow: none !important;
}

/* Search button: same neutral frame, no green/orange treatment. */
.lsvita-opc040084 header #search .btn-lg {
  width: 48px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 0 5px 5px 0 !important;
  background: #f8f9fa !important;
  background-image: none !important;
  color: #111 !important;
  font-size: 16px !important;
  line-height: 38px !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.lsvita-opc040084 header #search .btn-lg i {
  color: #111 !important;
}

.lsvita-opc040084 header #search .btn-lg:hover,
.lsvita-opc040084 header #search .btn-lg:focus {
  border-color: #ced4da !important;
  background: #e9ecef !important;
  background-image: none !important;
  color: #111 !important;
  box-shadow: none !important;
}

/* Keep both controls centered on the same horizontal axis. */
.lsvita-opc040084 header .lsvita-header-row {
  align-items: center !important;
}

.lsvita-opc040084 header #cart {
  align-items: center !important;
  margin: 0 !important;
}

@media (max-width: 767.98px) {
  .lsvita-opc040084 header #search form {
    width: 100% !important;
  }
}


/* ========================================================================== */
/* LS Vita v36 - definitive header/category/compare/price refinements          */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1) SEARCH: completely remove the green outer shell.                         */
/* New filename opc040084-v36.css also cache-busts browser/CDN stale CSS.      */
/* -------------------------------------------------------------------------- */

body.lsvita-opc040084 header #search,
body.lsvita-opc040084 header div#search {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.lsvita-opc040084 header #search form,
body.lsvita-opc040084 header #search form.input-group {
  width: 320px !important;
  max-width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Same clean neutral border family as the original non-green search field. */
body.lsvita-opc040084 header #search input.form-control,
body.lsvita-opc040084 header #search input.form-control-lg {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid #d9d5cc !important;
  border-right: 0 !important;
  border-radius: 5px 0 0 5px !important;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: var(--opc040084-text) !important;
  font-size: 13px !important;
  line-height: 36px !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Neutral search button; no green/orange outer treatment. */
body.lsvita-opc040084 header #search button.btn,
body.lsvita-opc040084 header #search button.btn-lg {
  width: 48px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #d9d5cc !important;
  border-radius: 0 5px 5px 0 !important;
  background: #f7f7f7 !important;
  background-color: #f7f7f7 !important;
  background-image: none !important;
  color: #222 !important;
  font-size: 15px !important;
  line-height: 36px !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.lsvita-opc040084 header #search button.btn i,
body.lsvita-opc040084 header #search button.btn-lg i {
  color: #222 !important;
}

body.lsvita-opc040084 header #search button.btn:hover,
body.lsvita-opc040084 header #search button.btn:focus,
body.lsvita-opc040084 header #search button.btn-lg:hover,
body.lsvita-opc040084 header #search button.btn-lg:focus {
  border-color: #c9c4ba !important;
  background: #eeeeee !important;
  background-image: none !important;
  color: #222 !important;
  box-shadow: none !important;
}

/* Keep the search exactly in the center column and aligned with cart. */
body.lsvita-opc040084 header .lsvita-header-row {
  align-items: center !important;
}
body.lsvita-opc040084 header #cart {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* 2) LEFT CATEGORY DIRECTORY: restore the original boxed OPC040084 treatment. */
/* -------------------------------------------------------------------------- */

body.lsvita-opc040084 #column-left .lsvita-category-box,
body.lsvita-opc040084 .lsvita-category-box {
  margin: 0 0 14px !important;
  padding: 6px !important;
  border: 1px solid #e3ded2 !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.lsvita-opc040084 #column-left .lsvita-category-heading,
body.lsvita-opc040084 .lsvita-category-heading {
  margin: 0 0 7px !important;
  padding: 7px 9px !important;
  border: 1px solid #ece6d9 !important;
  border-radius: 5px !important;
  background: linear-gradient(to bottom, #fbfaf6 0%, #f4f1e8 100%) !important;
  color: var(--opc040084-orange) !important;
  font-family: 'Marcellus', Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

body.lsvita-opc040084 .lsvita-category-heading i {
  color: #ff9a33 !important;
  margin-right: 6px !important;
}

body.lsvita-opc040084 #column-left .lsvita-category-content,
body.lsvita-opc040084 .lsvita-category-content {
  margin: 0 !important;
  padding: 0 9px 8px !important;
  border: 0 !important;
  background: #fff !important;
}

body.lsvita-opc040084 .lsvita-category-tree,
body.lsvita-opc040084 .lsvita-category-tree ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.lsvita-opc040084 .lsvita-category-tree > li {
  padding: 1px 0 !important;
}

body.lsvita-opc040084 .lsvita-category-tree > li > a {
  position: relative !important;
  display: block !important;
  padding: 3px 18px 3px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--opc040084-text) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

body.lsvita-opc040084 .lsvita-category-tree ul {
  margin-left: 15px !important;
}

body.lsvita-opc040084 .lsvita-category-tree ul li {
  padding: 0 !important;
}

body.lsvita-opc040084 .lsvita-category-tree ul a {
  display: block !important;
  padding: 2px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--opc040084-text) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

body.lsvita-opc040084 .lsvita-root-arrow {
  display: inline-block !important;
  width: 14px !important;
  color: var(--opc040084-orange) !important;
}

body.lsvita-opc040084 .lsvita-child-bullet {
  display: inline-block !important;
  width: 14px !important;
  color: #b09c70 !important;
}

body.lsvita-opc040084 .lsvita-tree-state {
  position: absolute !important;
  right: 1px !important;
  top: 3px !important;
  color: #9f957e !important;
}

body.lsvita-opc040084 .lsvita-category-tree a:hover,
body.lsvita-opc040084 .lsvita-category-tree a:focus,
body.lsvita-opc040084 .lsvita-category-tree a.active {
  background: transparent !important;
  color: var(--opc040084-orange-hover) !important;
}

/* -------------------------------------------------------------------------- */
/* 3) COMPARE: normal is neutral grey; hover text/arrows must be WHITE.        */
/* -------------------------------------------------------------------------- */

body.lsvita-opc040084 #compare-total.lsvita-compare-neutral {
  color: #495057 !important;
  background: #d7d9db !important;
  background-image: none !important;
  border-color: #ced1d4 !important;
}

body.lsvita-opc040084 #compare-total.lsvita-compare-neutral i,
body.lsvita-opc040084 #compare-total.lsvita-compare-neutral span {
  color: #495057 !important;
}

body.lsvita-opc040084 #compare-total.lsvita-compare-neutral:hover,
body.lsvita-opc040084 #compare-total.lsvita-compare-neutral:focus,
body.lsvita-opc040084 #compare-total.lsvita-compare-neutral:active {
  color: #ffffff !important;
  background: #8f9499 !important;
  background-image: none !important;
  border-color: #858a8f !important;
  box-shadow: none !important;
}

body.lsvita-opc040084 #compare-total.lsvita-compare-neutral:hover i,
body.lsvita-opc040084 #compare-total.lsvita-compare-neutral:hover span,
body.lsvita-opc040084 #compare-total.lsvita-compare-neutral:focus i,
body.lsvita-opc040084 #compare-total.lsvita-compare-neutral:focus span,
body.lsvita-opc040084 #compare-total.lsvita-compare-neutral:active i,
body.lsvita-opc040084 #compare-total.lsvita-compare-neutral:active span {
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------- */
/* 4) PRODUCT GRID PRICE: larger and easier to scan.                           */
/* -------------------------------------------------------------------------- */

body.lsvita-opc040084 #product-category .product-thumb .price,
body.lsvita-opc040084 #product-category .product-thumb .price-new,
body.lsvita-opc040084 #product-category .product-thumb .price > span {
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

body.lsvita-opc040084 #product-category .product-thumb .price {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  color: #5f8f2f !important;
}

/* Preserve smaller old-price/tax text when present. */
body.lsvita-opc040084 #product-category .product-thumb .price-old {
  font-size: 15px !important;
  font-weight: 400 !important;
}

body.lsvita-opc040084 #product-category .product-thumb .price-tax {
  font-size: 13px !important;
  font-weight: 400 !important;
}

/* Mobile: let search use the available width. */
@media (max-width: 767.98px) {
  body.lsvita-opc040084 header #search form,
  body.lsvita-opc040084 header #search form.input-group {
    width: 100% !important;
  }
}