/*
 * 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;
  }
}


/* ========================================================================== */
/* LS Vita v37 - wider centered search bar                                    */
/* ========================================================================== */
/*
 * The previous height correction (38px) is kept.
 * Only the desktop width is increased so the field is easier to use while
 * remaining centered between logo and cart.
 */
@media (min-width: 992px) {
  body.lsvita-opc040084 header #search form,
  body.lsvita-opc040084 header #search form.input-group {
    width: 420px !important;
    max-width: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  body.lsvita-opc040084 header #search form,
  body.lsvita-opc040084 header #search form.input-group {
    width: 340px !important;
    max-width: 100% !important;
  }
}


/* ========================================================================== */
/* LS Vita v38 - global neutral buttons + member welcome                      */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* ALL STOREFRONT BLUE PRIMARY BUTTONS                                        */
/* Same palette requested for the Compare Products control.                   */
/* Normal: neutral grey + dark text/icons                                     */
/* Hover/focus/active: darker grey + WHITE text/icons                         */
/* -------------------------------------------------------------------------- */

body.lsvita-opc040084 .btn-primary,
body.lsvita-opc040084 a.btn-primary,
body.lsvita-opc040084 button.btn-primary,
body.lsvita-opc040084 input.btn-primary,
body.lsvita-opc040084 .btn-info,
body.lsvita-opc040084 a.btn-info,
body.lsvita-opc040084 button.btn-info,
body.lsvita-opc040084 .btn-outline-primary {
  --bs-btn-color: #495057 !important;
  --bs-btn-bg: #d7d9db !important;
  --bs-btn-border-color: #ced1d4 !important;
  --bs-btn-hover-color: #ffffff !important;
  --bs-btn-hover-bg: #8f9499 !important;
  --bs-btn-hover-border-color: #858a8f !important;
  --bs-btn-focus-shadow-rgb: 143, 148, 153 !important;
  --bs-btn-active-color: #ffffff !important;
  --bs-btn-active-bg: #81868b !important;
  --bs-btn-active-border-color: #787d82 !important;
  --bs-btn-disabled-color: #6c757d !important;
  --bs-btn-disabled-bg: #e2e3e5 !important;
  --bs-btn-disabled-border-color: #d6d8db !important;

  color: #495057 !important;
  background-color: #d7d9db !important;
  background-image: none !important;
  border-color: #ced1d4 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.lsvita-opc040084 .btn-primary i,
body.lsvita-opc040084 .btn-primary span,
body.lsvita-opc040084 .btn-info i,
body.lsvita-opc040084 .btn-info span,
body.lsvita-opc040084 .btn-outline-primary i,
body.lsvita-opc040084 .btn-outline-primary span {
  color: #495057 !important;
}

body.lsvita-opc040084 .btn-primary:hover,
body.lsvita-opc040084 .btn-primary:focus,
body.lsvita-opc040084 .btn-primary:active,
body.lsvita-opc040084 .btn-primary.active,
body.lsvita-opc040084 .btn-info:hover,
body.lsvita-opc040084 .btn-info:focus,
body.lsvita-opc040084 .btn-info:active,
body.lsvita-opc040084 .btn-info.active,
body.lsvita-opc040084 .btn-outline-primary:hover,
body.lsvita-opc040084 .btn-outline-primary:focus,
body.lsvita-opc040084 .btn-outline-primary:active,
body.lsvita-opc040084 .btn-outline-primary.active {
  color: #ffffff !important;
  background-color: #8f9499 !important;
  background-image: none !important;
  border-color: #858a8f !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.lsvita-opc040084 .btn-primary:hover i,
body.lsvita-opc040084 .btn-primary:hover span,
body.lsvita-opc040084 .btn-primary:focus i,
body.lsvita-opc040084 .btn-primary:focus span,
body.lsvita-opc040084 .btn-primary:active i,
body.lsvita-opc040084 .btn-primary:active span,
body.lsvita-opc040084 .btn-info:hover i,
body.lsvita-opc040084 .btn-info:hover span,
body.lsvita-opc040084 .btn-info:focus i,
body.lsvita-opc040084 .btn-info:focus span,
body.lsvita-opc040084 .btn-info:active i,
body.lsvita-opc040084 .btn-info:active span,
body.lsvita-opc040084 .btn-outline-primary:hover i,
body.lsvita-opc040084 .btn-outline-primary:hover span,
body.lsvita-opc040084 .btn-outline-primary:focus i,
body.lsvita-opc040084 .btn-outline-primary:focus span,
body.lsvita-opc040084 .btn-outline-primary:active i,
body.lsvita-opc040084 .btn-outline-primary:active span {
  color: #ffffff !important;
}

/* Preserve the dark current-generation header cart button. */
body.lsvita-opc040084 #cart .btn-dark,
body.lsvita-opc040084 #cart button.btn-dark {
  color: var(--bs-btn-color) !important;
  background-color: var(--bs-btn-bg) !important;
  border-color: var(--bs-btn-border-color) !important;
}

/* -------------------------------------------------------------------------- */
/* LOGGED-IN MEMBER WELCOME ABOVE CART                                        */
/* Mirrors the old OPC040084 wording, minus the Logout link.                  */
/* -------------------------------------------------------------------------- */

body.lsvita-opc040084 header .lsvita-cart-column {
  position: relative !important;
  min-height: 92px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

body.lsvita-opc040084 header .lsvita-member-welcome {
  position: absolute !important;
  top: 2px !important;
  right: 0 !important;
  z-index: 3 !important;
  max-width: 100% !important;
  font-family: 'Marcellus', Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  text-align: right !important;
  white-space: nowrap !important;
  color: var(--opc040084-text) !important;
}

body.lsvita-opc040084 header .lsvita-member-welcome .lsvita-member-accent {
  color: #ff8b22 !important;
}

body.lsvita-opc040084 header .lsvita-member-welcome .lsvita-member-name,
body.lsvita-opc040084 header .lsvita-member-welcome .lsvita-member-group {
  color: var(--opc040084-text) !important;
}

body.lsvita-opc040084 header .lsvita-member-welcome .lsvita-member-name {
  text-decoration: none !important;
}

body.lsvita-opc040084 header .lsvita-member-welcome .lsvita-member-name:hover {
  color: var(--opc040084-orange-hover) !important;
}

body.lsvita-opc040084 header .lsvita-cart-slot {
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* Keep the existing cart button centered on the same horizontal axis as search. */
body.lsvita-opc040084 header .lsvita-cart-slot > .dropdown {
  width: 100% !important;
  max-width: 306px !important;
}

/* Smaller desktop widths: allow the greeting to wrap instead of colliding. */
@media (max-width: 1199.98px) {
  body.lsvita-opc040084 header .lsvita-member-welcome {
    font-size: 12px !important;
    white-space: normal !important;
    line-height: 16px !important;
  }
}

@media (max-width: 767.98px) {
  body.lsvita-opc040084 header .lsvita-cart-column {
    min-height: auto !important;
    display: block !important;
  }

  body.lsvita-opc040084 header .lsvita-member-welcome {
    position: static !important;
    margin: 4px 0 8px !important;
    text-align: center !important;
    white-space: normal !important;
  }

  body.lsvita-opc040084 header .lsvita-cart-slot {
    justify-content: center !important;
  }
}


/* ========================================================================== */
/* LS Vita v39 - greeting alignment, larger neutral buttons, footer/cart text */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* Member / guest welcome: right edge exactly matches the cart button.         */
/* Keep a deliberate gap above the cart.                                      */
/* -------------------------------------------------------------------------- */
body.lsvita-opc040084 header .lsvita-cart-column {
  min-height: 104px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

body.lsvita-opc040084 header .lsvita-member-welcome {
  position: static !important;
  width: 100% !important;
  max-width: 306px !important;
  margin: 0 0 11px auto !important;
  padding: 0 !important;
  text-align: right !important;
  white-space: normal !important;
  font-size: 13px !important;
  line-height: 18px !important;
}

body.lsvita-opc040084 header .lsvita-member-welcome .lsvita-member-action {
  color: var(--opc040084-orange-hover) !important;
  text-decoration: none !important;
  font-weight: 400 !important;
}

body.lsvita-opc040084 header .lsvita-member-welcome .lsvita-member-action:hover {
  color: #e56f00 !important;
  text-decoration: underline !important;
}

body.lsvita-opc040084 header .lsvita-cart-slot {
  width: 100% !important;
  max-width: 306px !important;
  margin: 0 0 0 auto !important;
  justify-content: flex-end !important;
}

body.lsvita-opc040084 header .lsvita-cart-slot > .dropdown {
  width: 100% !important;
  max-width: 306px !important;
}

/* -------------------------------------------------------------------------- */
/* Neutral buttons - tuned to the requested light grey / dark grey states.    */
/* All affected blue-style storefront buttons are also slightly larger.       */
/* -------------------------------------------------------------------------- */
body.lsvita-opc040084 .btn-primary,
body.lsvita-opc040084 a.btn-primary,
body.lsvita-opc040084 button.btn-primary,
body.lsvita-opc040084 input.btn-primary,
body.lsvita-opc040084 .btn-info,
body.lsvita-opc040084 a.btn-info,
body.lsvita-opc040084 button.btn-info,
body.lsvita-opc040084 .btn-outline-primary {
  --bs-btn-color: #585d61 !important;
  --bs-btn-bg: #d4d6d8 !important;
  --bs-btn-border-color: #c9cccf !important;
  --bs-btn-hover-color: #ffffff !important;
  --bs-btn-hover-bg: #8e9397 !important;
  --bs-btn-hover-border-color: #858a8e !important;
  --bs-btn-active-color: #ffffff !important;
  --bs-btn-active-bg: #83888c !important;
  --bs-btn-active-border-color: #7d8286 !important;

  min-height: 42px !important;
  padding: 9px 18px !important;
  border-radius: 4px !important;
  color: #585d61 !important;
  background-color: #d4d6d8 !important;
  background-image: none !important;
  border-color: #c9cccf !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.lsvita-opc040084 .btn-primary i,
body.lsvita-opc040084 .btn-primary span,
body.lsvita-opc040084 .btn-info i,
body.lsvita-opc040084 .btn-info span,
body.lsvita-opc040084 .btn-outline-primary i,
body.lsvita-opc040084 .btn-outline-primary span {
  color: #585d61 !important;
}

body.lsvita-opc040084 .btn-primary:hover,
body.lsvita-opc040084 .btn-primary:focus,
body.lsvita-opc040084 .btn-primary:active,
body.lsvita-opc040084 .btn-primary.active,
body.lsvita-opc040084 .btn-info:hover,
body.lsvita-opc040084 .btn-info:focus,
body.lsvita-opc040084 .btn-info:active,
body.lsvita-opc040084 .btn-info.active,
body.lsvita-opc040084 .btn-outline-primary:hover,
body.lsvita-opc040084 .btn-outline-primary:focus,
body.lsvita-opc040084 .btn-outline-primary:active,
body.lsvita-opc040084 .btn-outline-primary.active {
  color: #ffffff !important;
  background-color: #8e9397 !important;
  background-image: none !important;
  border-color: #858a8e !important;
  box-shadow: none !important;
}

body.lsvita-opc040084 .btn-primary:hover i,
body.lsvita-opc040084 .btn-primary:hover span,
body.lsvita-opc040084 .btn-primary:focus i,
body.lsvita-opc040084 .btn-primary:focus span,
body.lsvita-opc040084 .btn-primary:active i,
body.lsvita-opc040084 .btn-primary:active span,
body.lsvita-opc040084 .btn-info:hover i,
body.lsvita-opc040084 .btn-info:hover span,
body.lsvita-opc040084 .btn-info:focus i,
body.lsvita-opc040084 .btn-info:focus span,
body.lsvita-opc040084 .btn-info:active i,
body.lsvita-opc040084 .btn-info:active span,
body.lsvita-opc040084 .btn-outline-primary:hover i,
body.lsvita-opc040084 .btn-outline-primary:hover span,
body.lsvita-opc040084 .btn-outline-primary:focus i,
body.lsvita-opc040084 .btn-outline-primary:focus span,
body.lsvita-opc040084 .btn-outline-primary:active i,
body.lsvita-opc040084 .btn-outline-primary:active span {
  color: #ffffff !important;
}

/* Keep header cart button at its current design/size despite the global rules. */
body.lsvita-opc040084 #cart .btn-dark,
body.lsvita-opc040084 #cart button.btn-dark {
  min-height: initial !important;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x) !important;
  border-radius: var(--bs-btn-border-radius) !important;
  font-size: var(--bs-btn-font-size) !important;
  line-height: var(--bs-btn-line-height) !important;
}

/* -------------------------------------------------------------------------- */
/* Cart page: smaller orange title, no product-weight suffix in Twig.          */
/* -------------------------------------------------------------------------- */
body.lsvita-opc040084 #checkout-cart .lsvita-cart-title,
body.lsvita-opc040084 #shopping-cart .lsvita-cart-title {
  margin: 0 0 16px !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
}

/* -------------------------------------------------------------------------- */
/* Footer readability: reinforce the larger sizes even if another stylesheet  */
/* tries to reduce them.                                                      */
/* -------------------------------------------------------------------------- */
body.lsvita-opc040084 footer.tm-footer #footer h3,
body.lsvita-opc040084 footer.tm-footer #footer h5,
body.lsvita-opc040084 footer.tm-footer .title_block {
  font-size: 16px !important;
  line-height: 1.45 !important;
}

body.lsvita-opc040084 footer.tm-footer #footer p,
body.lsvita-opc040084 footer.tm-footer #footer li,
body.lsvita-opc040084 footer.tm-footer #footer a,
body.lsvita-opc040084 footer.tm-footer #footer .about_footer {
  font-size: 14px !important;
  line-height: 1.65 !important;
}

body.lsvita-opc040084 footer.tm-footer #bottomfooter li,
body.lsvita-opc040084 footer.tm-footer #bottomfooter a,
body.lsvita-opc040084 footer.tm-footer .copyright-container,
body.lsvita-opc040084 footer.tm-footer #powered {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

@media (max-width: 767.98px) {
  body.lsvita-opc040084 header .lsvita-cart-column {
    min-height: auto !important;
    align-items: stretch !important;
  }

  body.lsvita-opc040084 header .lsvita-member-welcome,
  body.lsvita-opc040084 header .lsvita-cart-slot {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.lsvita-opc040084 header .lsvita-member-welcome {
    text-align: center !important;
  }
}


/* ========================================================================== */
/* LS Vita v40 - make all previously-restyled buttons match "繼續購物"       */
/* ========================================================================== */
/*
 * The cart template's "繼續購物" button uses Bootstrap's .btn-light.
 * These rules make the previously changed primary/info/outline-primary buttons
 * use the SAME btn-light color palette in normal, hover, focus and active states.
 * Button sizing from v39 is intentionally retained.
 */

body.lsvita-opc040084 .btn-primary,
body.lsvita-opc040084 a.btn-primary,
body.lsvita-opc040084 button.btn-primary,
body.lsvita-opc040084 input.btn-primary,
body.lsvita-opc040084 .btn-info,
body.lsvita-opc040084 a.btn-info,
body.lsvita-opc040084 button.btn-info,
body.lsvita-opc040084 .btn-outline-primary,
body.lsvita-opc040084 a.btn-outline-primary,
body.lsvita-opc040084 button.btn-outline-primary {
  --bs-btn-color: #000000 !important;
  --bs-btn-bg: #f8f9fa !important;
  --bs-btn-border-color: #f8f9fa !important;
  --bs-btn-hover-color: #000000 !important;
  --bs-btn-hover-bg: #d3d4d5 !important;
  --bs-btn-hover-border-color: #c6c7c8 !important;
  --bs-btn-focus-shadow-rgb: 211, 212, 213 !important;
  --bs-btn-active-color: #000000 !important;
  --bs-btn-active-bg: #c6c7c8 !important;
  --bs-btn-active-border-color: #babbbc !important;
  --bs-btn-disabled-color: #000000 !important;
  --bs-btn-disabled-bg: #f8f9fa !important;
  --bs-btn-disabled-border-color: #f8f9fa !important;

  color: #000000 !important;
  background-color: #f8f9fa !important;
  background-image: none !important;
  border-color: #f8f9fa !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Icons/text follow the btn-light foreground too. */
body.lsvita-opc040084 .btn-primary i,
body.lsvita-opc040084 .btn-primary span,
body.lsvita-opc040084 .btn-info i,
body.lsvita-opc040084 .btn-info span,
body.lsvita-opc040084 .btn-outline-primary i,
body.lsvita-opc040084 .btn-outline-primary span {
  color: #000000 !important;
}

/* Same hover/focus/active palette as .btn-light. */
body.lsvita-opc040084 .btn-primary:hover,
body.lsvita-opc040084 .btn-primary:focus,
body.lsvita-opc040084 .btn-primary:active,
body.lsvita-opc040084 .btn-primary.active,
body.lsvita-opc040084 .btn-info:hover,
body.lsvita-opc040084 .btn-info:focus,
body.lsvita-opc040084 .btn-info:active,
body.lsvita-opc040084 .btn-info.active,
body.lsvita-opc040084 .btn-outline-primary:hover,
body.lsvita-opc040084 .btn-outline-primary:focus,
body.lsvita-opc040084 .btn-outline-primary:active,
body.lsvita-opc040084 .btn-outline-primary.active {
  color: #000000 !important;
  background-color: #d3d4d5 !important;
  background-image: none !important;
  border-color: #c6c7c8 !important;
  box-shadow: none !important;
}

body.lsvita-opc040084 .btn-primary:hover i,
body.lsvita-opc040084 .btn-primary:hover span,
body.lsvita-opc040084 .btn-primary:focus i,
body.lsvita-opc040084 .btn-primary:focus span,
body.lsvita-opc040084 .btn-primary:active i,
body.lsvita-opc040084 .btn-primary:active span,
body.lsvita-opc040084 .btn-info:hover i,
body.lsvita-opc040084 .btn-info:hover span,
body.lsvita-opc040084 .btn-info:focus i,
body.lsvita-opc040084 .btn-info:focus span,
body.lsvita-opc040084 .btn-info:active i,
body.lsvita-opc040084 .btn-info:active span,
body.lsvita-opc040084 .btn-outline-primary:hover i,
body.lsvita-opc040084 .btn-outline-primary:hover span,
body.lsvita-opc040084 .btn-outline-primary:focus i,
body.lsvita-opc040084 .btn-outline-primary:focus span,
body.lsvita-opc040084 .btn-outline-primary:active i,
body.lsvita-opc040084 .btn-outline-primary:active span {
  color: #000000 !important;
}

/* Compare button was given a custom class earlier. Match it too. */
body.lsvita-opc040084 #compare-total.lsvita-compare-neutral {
  color: #000000 !important;
  background-color: #f8f9fa !important;
  background-image: none !important;
  border-color: #f8f9fa !important;
}

body.lsvita-opc040084 #compare-total.lsvita-compare-neutral i,
body.lsvita-opc040084 #compare-total.lsvita-compare-neutral span {
  color: #000000 !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: #000000 !important;
  background-color: #d3d4d5 !important;
  background-image: none !important;
  border-color: #c6c7c8 !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: #000000 !important;
}

/* Preserve the current black header cart button. */
body.lsvita-opc040084 #cart .btn-dark,
body.lsvita-opc040084 #cart button.btn-dark {
  color: var(--bs-btn-color) !important;
  background-color: var(--bs-btn-bg) !important;
  border-color: var(--bs-btn-border-color) !important;
}


/* ========================================================================== */
/* LS Vita v41 - button hover text/icon orange                                */
/* ========================================================================== */
/*
 * Keep the v40 btn-light background colors.
 * Correct hover/focus/active foreground to the OPC040084 orange requested.
 */

body.lsvita-opc040084 .btn-primary:hover,
body.lsvita-opc040084 .btn-primary:focus,
body.lsvita-opc040084 .btn-primary:active,
body.lsvita-opc040084 .btn-primary.active,
body.lsvita-opc040084 .btn-info:hover,
body.lsvita-opc040084 .btn-info:focus,
body.lsvita-opc040084 .btn-info:active,
body.lsvita-opc040084 .btn-info.active,
body.lsvita-opc040084 .btn-outline-primary:hover,
body.lsvita-opc040084 .btn-outline-primary:focus,
body.lsvita-opc040084 .btn-outline-primary:active,
body.lsvita-opc040084 .btn-outline-primary.active {
  color: #ff7f00 !important;
}

body.lsvita-opc040084 .btn-primary:hover i,
body.lsvita-opc040084 .btn-primary:hover span,
body.lsvita-opc040084 .btn-primary:focus i,
body.lsvita-opc040084 .btn-primary:focus span,
body.lsvita-opc040084 .btn-primary:active i,
body.lsvita-opc040084 .btn-primary:active span,
body.lsvita-opc040084 .btn-info:hover i,
body.lsvita-opc040084 .btn-info:hover span,
body.lsvita-opc040084 .btn-info:focus i,
body.lsvita-opc040084 .btn-info:focus span,
body.lsvita-opc040084 .btn-info:active i,
body.lsvita-opc040084 .btn-info:active span,
body.lsvita-opc040084 .btn-outline-primary:hover i,
body.lsvita-opc040084 .btn-outline-primary:hover span,
body.lsvita-opc040084 .btn-outline-primary:focus i,
body.lsvita-opc040084 .btn-outline-primary:focus span,
body.lsvita-opc040084 .btn-outline-primary:active i,
body.lsvita-opc040084 .btn-outline-primary:active span {
  color: #ff7f00 !important;
}

/* Compare button follows the same hover text/icon color. */
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: #ff7f00 !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: #ff7f00 !important;
}


/* ========================================================================== */
/* LS Vita v42 - clearer dark border around neutral buttons                   */
/* ========================================================================== */

body.lsvita-opc040084 .btn-primary,
body.lsvita-opc040084 a.btn-primary,
body.lsvita-opc040084 button.btn-primary,
body.lsvita-opc040084 input.btn-primary,
body.lsvita-opc040084 .btn-info,
body.lsvita-opc040084 a.btn-info,
body.lsvita-opc040084 button.btn-info,
body.lsvita-opc040084 .btn-outline-primary,
body.lsvita-opc040084 a.btn-outline-primary,
body.lsvita-opc040084 button.btn-outline-primary,
body.lsvita-opc040084 #compare-total.lsvita-compare-neutral {
  border: 1px solid #aeb2b6 !important;
}

/* Slightly stronger border on hover/focus for clearer feedback. */
body.lsvita-opc040084 .btn-primary:hover,
body.lsvita-opc040084 .btn-primary:focus,
body.lsvita-opc040084 .btn-primary:active,
body.lsvita-opc040084 .btn-info:hover,
body.lsvita-opc040084 .btn-info:focus,
body.lsvita-opc040084 .btn-info:active,
body.lsvita-opc040084 .btn-outline-primary:hover,
body.lsvita-opc040084 .btn-outline-primary:focus,
body.lsvita-opc040084 .btn-outline-primary:active,
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 {
  border-color: #969b9f !important;
}

/* Keep the current dark header cart button untouched. */
body.lsvita-opc040084 #cart .btn-dark,
body.lsvita-opc040084 #cart button.btn-dark {
  border-color: var(--bs-btn-border-color) !important;
}


/* ========================================================================== */
/* LS Vita v43 - orange hover buttons, compact cart actions, wider greeting   */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1/2) Storefront action buttons + Continue Shopping                         */
/* Normal: light neutral + visible border                                     */
/* Hover/focus/active: ORANGE background + WHITE text/icons                   */
/* -------------------------------------------------------------------------- */
body.lsvita-opc040084 .btn-primary,
body.lsvita-opc040084 a.btn-primary,
body.lsvita-opc040084 button.btn-primary,
body.lsvita-opc040084 input.btn-primary,
body.lsvita-opc040084 .btn-info,
body.lsvita-opc040084 a.btn-info,
body.lsvita-opc040084 button.btn-info,
body.lsvita-opc040084 .btn-outline-primary,
body.lsvita-opc040084 a.btn-outline-primary,
body.lsvita-opc040084 button.btn-outline-primary,
body.lsvita-opc040084 #compare-total.lsvita-compare-neutral {
  --bs-btn-color: #585d61 !important;
  --bs-btn-bg: #f8f9fa !important;
  --bs-btn-border-color: #aeb2b6 !important;
  --bs-btn-hover-color: #ffffff !important;
  --bs-btn-hover-bg: #ff8106 !important;
  --bs-btn-hover-border-color: #e97400 !important;
  --bs-btn-active-color: #ffffff !important;
  --bs-btn-active-bg: #ee7700 !important;
  --bs-btn-active-border-color: #d96c00 !important;

  min-height: 42px !important;
  padding: 9px 18px !important;
  border: 1px solid #aeb2b6 !important;
  border-radius: 4px !important;
  color: #585d61 !important;
  background: #f8f9fa !important;
  background-image: none !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.lsvita-opc040084 .btn-primary i,
body.lsvita-opc040084 .btn-primary span,
body.lsvita-opc040084 .btn-info i,
body.lsvita-opc040084 .btn-info span,
body.lsvita-opc040084 .btn-outline-primary i,
body.lsvita-opc040084 .btn-outline-primary span,
body.lsvita-opc040084 #compare-total.lsvita-compare-neutral i,
body.lsvita-opc040084 #compare-total.lsvita-compare-neutral span {
  color: #585d61 !important;
}

body.lsvita-opc040084 .btn-primary:hover,
body.lsvita-opc040084 .btn-primary:focus,
body.lsvita-opc040084 .btn-primary:active,
body.lsvita-opc040084 .btn-primary.active,
body.lsvita-opc040084 .btn-info:hover,
body.lsvita-opc040084 .btn-info:focus,
body.lsvita-opc040084 .btn-info:active,
body.lsvita-opc040084 .btn-info.active,
body.lsvita-opc040084 .btn-outline-primary:hover,
body.lsvita-opc040084 .btn-outline-primary:focus,
body.lsvita-opc040084 .btn-outline-primary:active,
body.lsvita-opc040084 .btn-outline-primary.active,
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: #ff8106 !important;
  background-image: none !important;
  border-color: #e97400 !important;
  box-shadow: none !important;
}

body.lsvita-opc040084 .btn-primary:hover i,
body.lsvita-opc040084 .btn-primary:hover span,
body.lsvita-opc040084 .btn-primary:focus i,
body.lsvita-opc040084 .btn-primary:focus span,
body.lsvita-opc040084 .btn-primary:active i,
body.lsvita-opc040084 .btn-primary:active span,
body.lsvita-opc040084 .btn-info:hover i,
body.lsvita-opc040084 .btn-info:hover span,
body.lsvita-opc040084 .btn-info:focus i,
body.lsvita-opc040084 .btn-info:focus span,
body.lsvita-opc040084 .btn-info:active i,
body.lsvita-opc040084 .btn-info:active span,
body.lsvita-opc040084 .btn-outline-primary:hover i,
body.lsvita-opc040084 .btn-outline-primary:hover span,
body.lsvita-opc040084 .btn-outline-primary:focus i,
body.lsvita-opc040084 .btn-outline-primary:focus span,
body.lsvita-opc040084 .btn-outline-primary:active i,
body.lsvita-opc040084 .btn-outline-primary:active span,
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;
}

/* Keep the current black header cart button untouched. */
body.lsvita-opc040084 #cart .btn-dark,
body.lsvita-opc040084 #cart button.btn-dark {
  min-height: initial !important;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x) !important;
  border-color: var(--bs-btn-border-color) !important;
  color: var(--bs-btn-color) !important;
  background-color: var(--bs-btn-bg) !important;
  font-size: var(--bs-btn-font-size) !important;
  line-height: var(--bs-btn-line-height) !important;
}

/* -------------------------------------------------------------------------- */
/* 3/4) Cart quantity controls: update/remove same size and side-by-side       */
/* -------------------------------------------------------------------------- */
body.lsvita-opc040084 .lsvita-cart-quantity-form {
  margin: 0 !important;
}

body.lsvita-opc040084 .lsvita-cart-quantity-controls {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  min-width: 138px !important;
}

body.lsvita-opc040084 .lsvita-cart-quantity-input {
  flex: 0 0 54px !important;
  width: 54px !important;
  min-width: 54px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 5px 8px !important;
  text-align: center !important;
}

body.lsvita-opc040084 .lsvita-cart-mini-action,
body.lsvita-opc040084 .btn-primary.lsvita-cart-mini-action,
body.lsvita-opc040084 .btn-danger.lsvita-cart-mini-action {
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  line-height: 1 !important;
  font-size: 14px !important;
}

/* Update button: compact light style; orange/white on hover. */
body.lsvita-opc040084 .btn-primary.lsvita-cart-update {
  color: #585d61 !important;
  background: #f8f9fa !important;
  border-color: #aeb2b6 !important;
}
body.lsvita-opc040084 .btn-primary.lsvita-cart-update i {
  color: #585d61 !important;
}
body.lsvita-opc040084 .btn-primary.lsvita-cart-update:hover,
body.lsvita-opc040084 .btn-primary.lsvita-cart-update:focus,
body.lsvita-opc040084 .btn-primary.lsvita-cart-update:active {
  color: #ffffff !important;
  background: #ff8106 !important;
  border-color: #e97400 !important;
}
body.lsvita-opc040084 .btn-primary.lsvita-cart-update:hover i,
body.lsvita-opc040084 .btn-primary.lsvita-cart-update:focus i,
body.lsvita-opc040084 .btn-primary.lsvita-cart-update:active i {
  color: #ffffff !important;
}

/* Remove stays danger/red, but the center icon is always bright white. */
body.lsvita-opc040084 .btn-danger.lsvita-cart-remove,
body.lsvita-opc040084 .btn-danger.lsvita-cart-remove i {
  color: #ffffff !important;
}
body.lsvita-opc040084 .btn-danger.lsvita-cart-remove {
  background: #dc4f4f !important;
  border-color: #c94444 !important;
}
body.lsvita-opc040084 .btn-danger.lsvita-cart-remove:hover,
body.lsvita-opc040084 .btn-danger.lsvita-cart-remove:focus {
  background: #c94343 !important;
  border-color: #b63838 !important;
}

/* -------------------------------------------------------------------------- */
/* 5/6) Logged-in / guest welcome line                                         */
/* Right edge follows cart; left side may extend over the search area.         */
/* -------------------------------------------------------------------------- */
body.lsvita-opc040084 header .lsvita-cart-column {
  position: relative !important;
  min-height: 108px !important;
  overflow: visible !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
}

body.lsvita-opc040084 header .lsvita-member-welcome {
  position: absolute !important;
  top: 3px !important;
  right: 0 !important;
  width: max-content !important;
  max-width: 760px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 8 !important;
  text-align: right !important;
  white-space: nowrap !important;
  font-size: 16px !important;
  line-height: 22px !important;
  font-weight: 400 !important;
}

body.lsvita-opc040084 header .lsvita-cart-slot {
  width: 100% !important;
  max-width: 306px !important;
  margin: 36px 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* Guest Login/Register links use the same normal color as Contact Us. */
body.lsvita-opc040084 header .lsvita-member-welcome .lsvita-member-action {
  color: var(--opc040084-text) !important;
  text-decoration: none !important;
  font-weight: 400 !important;
}

body.lsvita-opc040084 header .lsvita-member-welcome .lsvita-member-action:hover {
  color: var(--opc040084-orange-hover) !important;
  text-decoration: none !important;
}

@media (max-width: 991.98px) {
  body.lsvita-opc040084 header .lsvita-member-welcome {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    font-size: 14px !important;
    line-height: 19px !important;
  }
}

@media (max-width: 767.98px) {
  body.lsvita-opc040084 header .lsvita-cart-column {
    min-height: auto !important;
    display: block !important;
  }

  body.lsvita-opc040084 header .lsvita-member-welcome {
    position: static !important;
    width: 100% !important;
    margin: 5px 0 10px !important;
    text-align: center !important;
  }

  body.lsvita-opc040084 header .lsvita-cart-slot {
    max-width: 100% !important;
    margin: 0 !important;
    justify-content: center !important;
  }
}


/* ========================================================================== */
/* LS Vita v44 - align header cart vertically with search                     */
/* ========================================================================== */
/*
 * The member/guest welcome stays absolutely positioned above the cart.
 * The cart itself is no longer pushed downward by margin-top.
 * Search and cart now share the same vertical center line.
 */

body.lsvita-opc040084 header .lsvita-header-row {
  align-items: center !important;
}

body.lsvita-opc040084 header .lsvita-cart-column {
  position: relative !important;
  min-height: 108px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  overflow: visible !important;
}

body.lsvita-opc040084 header .lsvita-cart-slot {
  width: 100% !important;
  max-width: 306px !important;
  margin: 0 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* Keep the greeting above without affecting cart vertical position. */
body.lsvita-opc040084 header .lsvita-member-welcome {
  position: absolute !important;
  top: 3px !important;
  right: 0 !important;
}

/* Make sure the actual cart dropdown/button itself is centered. */
body.lsvita-opc040084 header .lsvita-cart-slot > .dropdown {
  width: 100% !important;
  max-width: 306px !important;
  margin: 0 !important;
}

@media (max-width: 767.98px) {
  body.lsvita-opc040084 header .lsvita-cart-column {
    min-height: auto !important;
    display: block !important;
  }

  body.lsvita-opc040084 header .lsvita-member-welcome {
    position: static !important;
  }

  body.lsvita-opc040084 header .lsvita-cart-slot {
    max-width: 100% !important;
    margin: 0 !important;
    justify-content: center !important;
  }
}


/* ========================================================================== */
/* LS Vita v45 - hard-align cart with search + compact mobile header          */
/* ========================================================================== */

/*
 * Desktop/tablet:
 * The search sits on the Bootstrap row's vertical center.
 * Position the cart slot on that SAME 50% center line explicitly.
 * This avoids the welcome-line/cart flex layout pushing the cart downward.
 */
@media (min-width: 768px) {
  body.lsvita-opc040084 header .lsvita-header-row {
    position: relative !important;
    align-items: center !important;
  }

  body.lsvita-opc040084 header .lsvita-cart-column {
    position: relative !important;
    min-height: 108px !important;
    height: 108px !important;
    display: block !important;
    overflow: visible !important;
  }

  body.lsvita-opc040084 header .lsvita-member-welcome {
    position: absolute !important;
    top: 3px !important;
    right: 0 !important;
    margin: 0 !important;
  }

  body.lsvita-opc040084 header .lsvita-cart-slot {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    left: auto !important;
    width: 290px !important;
    max-width: 290px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    display: block !important;
  }

  body.lsvita-opc040084 header .lsvita-cart-slot > .dropdown {
    width: 100% !important;
    max-width: 290px !important;
    margin: 0 !important;
  }

  /* Slightly reduce the cart button overall size while preserving its dark style. */
  body.lsvita-opc040084 header #cart .btn-dark,
  body.lsvita-opc040084 header #cart button.btn-dark {
    min-height: 44px !important;
    padding: 8px 14px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile: narrower search and a more compact cart button                     */
/* -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body.lsvita-opc040084 header #search {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.lsvita-opc040084 header #search form,
  body.lsvita-opc040084 header #search form.input-group {
    width: 250px !important;
    max-width: calc(100vw - 42px) !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 auto !important;
  }

  body.lsvita-opc040084 header #search input.form-control,
  body.lsvita-opc040084 header #search input.form-control-lg,
  body.lsvita-opc040084 header #search button.btn,
  body.lsvita-opc040084 header #search button.btn-lg {
    height: 36px !important;
    min-height: 36px !important;
  }

  body.lsvita-opc040084 header #search input.form-control,
  body.lsvita-opc040084 header #search input.form-control-lg {
    font-size: 13px !important;
  }

  body.lsvita-opc040084 header #search button.btn,
  body.lsvita-opc040084 header #search button.btn-lg {
    width: 42px !important;
    font-size: 14px !important;
  }

  body.lsvita-opc040084 header .lsvita-cart-column {
    position: relative !important;
    min-height: auto !important;
    height: auto !important;
    display: block !important;
  }

  body.lsvita-opc040084 header .lsvita-member-welcome {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px 0 9px !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }

  body.lsvita-opc040084 header .lsvita-cart-slot {
    position: static !important;
    width: 235px !important;
    max-width: calc(100vw - 52px) !important;
    margin: 0 auto !important;
    transform: none !important;
    display: block !important;
  }

  body.lsvita-opc040084 header .lsvita-cart-slot > .dropdown {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.lsvita-opc040084 header #cart .btn-dark,
  body.lsvita-opc040084 header #cart button.btn-dark {
    min-height: 40px !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
}


/* ========================================================================== */
/* LS Vita v46 - lower desktop search/cart, right mobile cart, stacked login  */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1) Desktop/tablet: move BOTH search and cart down together by 10px.         */
/* Welcome message stays in its current top position.                          */
/* -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  body.lsvita-opc040084 header #search {
    transform: translateY(10px) !important;
  }

  body.lsvita-opc040084 header .lsvita-cart-slot {
    top: calc(50% + 10px) !important;
    transform: translateY(-50%) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 2) Mobile: keep search centered, but move the compact cart to the RIGHT.    */
/* -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body.lsvita-opc040084 header .lsvita-cart-slot {
    width: 235px !important;
    max-width: calc(100vw - 28px) !important;
    margin-left: auto !important;
    margin-right: 14px !important;
    transform: none !important;
  }

  body.lsvita-opc040084 header .lsvita-cart-slot > .dropdown {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 3) Mobile login page: New Customer and Returning Customer stack vertically. */
/* Twig also uses col-12 col-md-6 so this is an extra safety rule.             */
/* -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body.lsvita-opc040084 #account-login #content > .row {
    display: flex !important;
    flex-direction: column !important;
  }

  body.lsvita-opc040084 #account-login #content > .row > .col-12,
  body.lsvita-opc040084 #account-login #content > .row > .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}


/* ========================================================================== */
/* LS Vita v47 - desktop right-edge alignment                                 */
/* ========================================================================== */
/*
 * Goals:
 * 1) Cart button left/right edges match the right-side "我的帳戶" block.
 * 2) Member/guest welcome right edge aligns with the green menu bar.
 * 3) Top Contact/Account/Wishlist/Cart/Checkout row is shifted left slightly
 *    so its right edge follows the same menu/container line.
 *
 * Bootstrap rows extend into the container gutter. The 12px right inset below
 * compensates for that gutter so absolutely-positioned header elements line up
 * with the direct-child menu bar.
 */

@media (min-width: 992px) {
  /* Move the top-right utility row left by one Bootstrap half-gutter. */
  body.lsvita-opc040084 #top .row > .col.text-end > .list-inline {
    position: relative !important;
    left: -12px !important;
  }

  /* Welcome text can extend left, but its RIGHT edge is locked to menu edge. */
  body.lsvita-opc040084 header .lsvita-member-welcome {
    right: 12px !important;
    max-width: 780px !important;
    text-align: right !important;
  }

  /*
   * Match the standard right-column card width used by the account sidebar.
   * Right inset also aligns the cart with the green menu bar.
   */
  body.lsvita-opc040084 header .lsvita-cart-slot {
    right: 12px !important;
    width: 306px !important;
    max-width: 306px !important;
  }

  body.lsvita-opc040084 header .lsvita-cart-slot > .dropdown,
  body.lsvita-opc040084 header #cart > .dropdown {
    width: 306px !important;
    max-width: 306px !important;
  }

  /* Make the visible dark cart button fill that same 306px column. */
  body.lsvita-opc040084 header #cart .btn-dark,
  body.lsvita-opc040084 header #cart button.btn-dark {
    width: 100% !important;
  }
}

/* Tablet keeps the existing v46 arrangement without forcing 306px. */


/* ========================================================================== */
/* LS Vita v48 - keep cart dropdown above account/sidebar content             */
/* ========================================================================== */
/*
 * The cart dropdown was being covered by the right-side "我的帳戶" block.
 * Fix the stacking context at the header/cart level rather than moving either
 * component, so the cart menu can open naturally above page content.
 */

body.lsvita-opc040084 header {
  position: relative !important;
  z-index: 1100 !important;
  overflow: visible !important;
}

body.lsvita-opc040084 header .container,
body.lsvita-opc040084 header .lsvita-header-row,
body.lsvita-opc040084 header .lsvita-cart-column,
body.lsvita-opc040084 header .lsvita-cart-slot,
body.lsvita-opc040084 header #cart,
body.lsvita-opc040084 header #cart > .dropdown {
  overflow: visible !important;
}

body.lsvita-opc040084 header .lsvita-cart-column {
  z-index: 1200 !important;
}

body.lsvita-opc040084 header .lsvita-cart-slot,
body.lsvita-opc040084 header #cart {
  position: relative !important;
  z-index: 1250 !important;
}

/* Bootstrap dropdown itself must sit over account/sidebar cards below. */
body.lsvita-opc040084 header #cart .dropdown-menu {
  z-index: 2000 !important;
}

/* Prevent main/account content from creating a higher competing layer. */
body.lsvita-opc040084 main,
body.lsvita-opc040084 #content,
body.lsvita-opc040084 #column-right,
body.lsvita-opc040084 #column-left {
  position: relative !important;
  z-index: 1 !important;
}

/* Keep the green navigation below an open cart dropdown as well. */
body.lsvita-opc040084 #menu,
body.lsvita-opc040084 nav#menu {
  position: relative !important;
  z-index: 10 !important;
}


/* ========================================================================== */
/* LS Vita v49 - restore cart right alignment while keeping dropdown on top   */
/* ========================================================================== */
/*
 * v48 correctly raised the cart dropdown z-index, but its generic
 * `position: relative` on .lsvita-cart-slot overrode the desktop absolute
 * positioning from v45/v47. This restores that exact placement while retaining
 * the v48 stacking-layer fix.
 */

@media (min-width: 992px) {
  body.lsvita-opc040084 header .lsvita-cart-column {
    position: relative !important;
    z-index: 1200 !important;
    overflow: visible !important;
  }

  body.lsvita-opc040084 header .lsvita-cart-slot {
    position: absolute !important;
    top: calc(50% + 10px) !important;
    right: 12px !important;
    left: auto !important;
    width: 306px !important;
    max-width: 306px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 1250 !important;
    overflow: visible !important;
  }

  body.lsvita-opc040084 header #cart {
    position: relative !important;
    width: 100% !important;
    max-width: 306px !important;
    margin: 0 !important;
    z-index: 1250 !important;
    overflow: visible !important;
  }

  body.lsvita-opc040084 header #cart > .dropdown {
    position: relative !important;
    width: 100% !important;
    max-width: 306px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.lsvita-opc040084 header #cart .btn-dark,
  body.lsvita-opc040084 header #cart button.btn-dark {
    width: 100% !important;
  }

  /* Keep dropdown above the account sidebar and all page content. */
  body.lsvita-opc040084 header #cart .dropdown-menu {
    z-index: 2000 !important;
  }
}

/* Keep v48 mobile placement unchanged. */
@media (max-width: 767.98px) {
  body.lsvita-opc040084 header .lsvita-cart-slot {
    position: static !important;
  }
}


/* ========================================================================== */
/* LS Vita v50 - hard right alignment + cart dropdown action buttons          */
/* ========================================================================== */

/*
 * IMPORTANT:
 * Previous versions positioned the cart relative to the third Bootstrap column.
 * That column-relative positioning is why the visible cart could still stop
 * short of the right-side account block.
 *
 * v50 makes the whole header row the positioning reference instead.
 * The cart and welcome line are anchored to the row's/container's right edge.
 */
@media (min-width: 992px) {
  body.lsvita-opc040084 header .lsvita-header-row {
    position: relative !important;
  }

  /* The Bootstrap cart column no longer defines the cart's horizontal anchor. */
  body.lsvita-opc040084 header .lsvita-cart-column {
    position: static !important;
    z-index: auto !important;
    overflow: visible !important;
  }

  /* Welcome right edge follows the same line as the green menu/account column. */
  body.lsvita-opc040084 header .lsvita-member-welcome {
    position: absolute !important;
    top: 3px !important;
    right: 12px !important;
    width: max-content !important;
    max-width: 780px !important;
    margin: 0 !important;
    text-align: right !important;
    z-index: 1400 !important;
  }

  /* Cart right edge is now relative to the full row, not the third column. */
  body.lsvita-opc040084 header #cart.lsvita-cart-slot {
    position: absolute !important;
    top: calc(50% + 10px) !important;
    right: 12px !important;
    left: auto !important;
    width: 306px !important;
    max-width: 306px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 1500 !important;
    overflow: visible !important;
  }

  body.lsvita-opc040084 header #cart.lsvita-cart-slot > .dropdown {
    position: relative !important;
    width: 306px !important;
    max-width: 306px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.lsvita-opc040084 header #cart.lsvita-cart-slot .btn-dark {
    width: 306px !important;
  }

  /* Keep dropdown above account/sidebar/page content. */
  body.lsvita-opc040084 header #cart .dropdown-menu {
    z-index: 2500 !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Cart dropdown: "查看內容" / "結帳" as the same grey action buttons.       */
/* Normal = light grey; hover = orange background + white text/icon.           */
/* -------------------------------------------------------------------------- */
body.lsvita-opc040084 header #cart .lsvita-cart-dropdown-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

body.lsvita-opc040084 header #cart .lsvita-cart-dropdown-action {
  min-height: 38px !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

/* Since the generic global button rules are scoped to body and apply here,
   reinforce only the desired cart-dropdown visual result. */
body.lsvita-opc040084 header #cart .lsvita-cart-dropdown-action {
  color: #585d61 !important;
  background: #f8f9fa !important;
  border: 1px solid #aeb2b6 !important;
}

body.lsvita-opc040084 header #cart .lsvita-cart-dropdown-action i {
  color: #585d61 !important;
}

body.lsvita-opc040084 header #cart .lsvita-cart-dropdown-action:hover,
body.lsvita-opc040084 header #cart .lsvita-cart-dropdown-action:focus,
body.lsvita-opc040084 header #cart .lsvita-cart-dropdown-action:active {
  color: #ffffff !important;
  background: #ff8106 !important;
  border-color: #e97400 !important;
}

body.lsvita-opc040084 header #cart .lsvita-cart-dropdown-action:hover i,
body.lsvita-opc040084 header #cart .lsvita-cart-dropdown-action:focus i,
body.lsvita-opc040084 header #cart .lsvita-cart-dropdown-action:active i {
  color: #ffffff !important;
}

/* Mobile keeps the right-aligned compact cart behavior from v46+. */
@media (max-width: 767.98px) {
  body.lsvita-opc040084 header #cart.lsvita-cart-slot {
    position: static !important;
    width: 235px !important;
    max-width: calc(100vw - 28px) !important;
    margin-left: auto !important;
    margin-right: 14px !important;
    transform: none !important;
  }

  body.lsvita-opc040084 header #cart .lsvita-cart-dropdown-actions {
    justify-content: center !important;
  }
}


/* ========================================================================== */
/* LS Vita v51 - mobile cart right alignment + smaller cart + larger welcome  */
/* ========================================================================== */

@media (max-width: 767.98px) {
  /*
   * Make the cart column occupy the full mobile row.
   * Earlier versions only right-aligned #cart inside a shrink-to-fit parent,
   * which is why the button still appeared on the left.
   */
  body.lsvita-opc040084 header .lsvita-cart-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Larger guest/member welcome line above the cart. */
  body.lsvita-opc040084 header .lsvita-member-welcome {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 7px 0 10px !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    font-size: 15px !important;
    line-height: 21px !important;
  }

  /* Smaller cart, physically anchored to the right side. */
  body.lsvita-opc040084 header #cart.lsvita-cart-slot {
    position: static !important;
    width: 205px !important;
    max-width: 205px !important;
    align-self: flex-end !important;
    margin: 0 !important;
    transform: none !important;
    display: block !important;
  }

  body.lsvita-opc040084 header #cart.lsvita-cart-slot > .dropdown {
    width: 205px !important;
    max-width: 205px !important;
    margin: 0 !important;
  }

  body.lsvita-opc040084 header #cart .btn-dark,
  body.lsvita-opc040084 header #cart button.btn-dark {
    width: 205px !important;
    min-height: 38px !important;
    padding: 6px 9px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  /* Keep its dropdown usable even though the trigger is narrower. */
  body.lsvita-opc040084 header #cart .dropdown-menu {
    min-width: min(330px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    right: 0 !important;
    left: auto !important;
  }
}


/* ========================================================================== */
/* LS Vita v52 - cart extras removed + delete-button refinements              */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 2) Address book delete button: keep existing red background, white icon.   */
/* -------------------------------------------------------------------------- */
body.lsvita-opc040084 #account-address .lsvita-address-remove i {
  color: #ffffff !important;
}

/* Keep Bootstrap danger background behavior unchanged. */
body.lsvita-opc040084 #account-address .lsvita-address-remove {
  color: #ffffff !important;
}

body.lsvita-opc040084 #account-address .lsvita-address-remove:hover i,
body.lsvita-opc040084 #account-address .lsvita-address-remove:focus i,
body.lsvita-opc040084 #account-address .lsvita-address-remove:active i {
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------- */
/* 3) Cart-page remove button: match the cart-dropdown red delete treatment.  */
/* Normal Bootstrap-danger red, darker red on hover, white icon throughout.    */
/* -------------------------------------------------------------------------- */
body.lsvita-opc040084 #checkout-cart .lsvita-cart-remove,
body.lsvita-opc040084 #shopping-cart .lsvita-cart-remove {
  color: #ffffff !important;
  background-color: #dc3545 !important;
  background-image: none !important;
  border-color: #dc3545 !important;
  box-shadow: none !important;
}

body.lsvita-opc040084 #checkout-cart .lsvita-cart-remove i,
body.lsvita-opc040084 #shopping-cart .lsvita-cart-remove i {
  color: #ffffff !important;
}

body.lsvita-opc040084 #checkout-cart .lsvita-cart-remove:hover,
body.lsvita-opc040084 #checkout-cart .lsvita-cart-remove:focus,
body.lsvita-opc040084 #checkout-cart .lsvita-cart-remove:active,
body.lsvita-opc040084 #shopping-cart .lsvita-cart-remove:hover,
body.lsvita-opc040084 #shopping-cart .lsvita-cart-remove:focus,
body.lsvita-opc040084 #shopping-cart .lsvita-cart-remove:active {
  color: #ffffff !important;
  background-color: #bb2d3b !important;
  background-image: none !important;
  border-color: #b02a37 !important;
  box-shadow: none !important;
}

body.lsvita-opc040084 #checkout-cart .lsvita-cart-remove:hover i,
body.lsvita-opc040084 #checkout-cart .lsvita-cart-remove:focus i,
body.lsvita-opc040084 #checkout-cart .lsvita-cart-remove:active i,
body.lsvita-opc040084 #shopping-cart .lsvita-cart-remove:hover i,
body.lsvita-opc040084 #shopping-cart .lsvita-cart-remove:focus i,
body.lsvita-opc040084 #shopping-cart .lsvita-cart-remove:active i {
  color: #ffffff !important;
}


/* ========================================================================== */
/* LS Vita v53 - all front-end "返回" buttons use the shared grey style       */
/* ========================================================================== */

body.lsvita-opc040084 .lsvita-back-action {
  min-height: 42px !important;
  padding: 9px 18px !important;
  border: 1px solid #aeb2b6 !important;
  border-radius: 4px !important;
  color: #585d61 !important;
  background: #f8f9fa !important;
  background-image: none !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.lsvita-opc040084 .lsvita-back-action i,
body.lsvita-opc040084 .lsvita-back-action span {
  color: #585d61 !important;
}

body.lsvita-opc040084 .lsvita-back-action:hover,
body.lsvita-opc040084 .lsvita-back-action:focus,
body.lsvita-opc040084 .lsvita-back-action:active {
  color: #ffffff !important;
  background: #ff8106 !important;
  background-image: none !important;
  border-color: #e97400 !important;
  box-shadow: none !important;
}

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


/* ========================================================================== */
/* LS Vita v54 - responsive mobile breadcrumbs + order history                */
/* ========================================================================== */

@media (max-width: 767.98px) {
  /* ------------------------------------------------------------------------ */
  /* Global grey breadcrumb/navigation bar                                   */
  /* Keep every label on one line, scale type/padding down with viewport,     */
  /* and allow smooth horizontal scrolling instead of broken overlapping rows. */
  /* ------------------------------------------------------------------------ */
  body.lsvita-opc040084 .breadcrumb {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    margin: 0 0 16px 0 !important;
    padding: 6px 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    font-size: clamp(11px, 3.25vw, 14px) !important;
    line-height: 1.35 !important;
  }

  body.lsvita-opc040084 .breadcrumb::-webkit-scrollbar {
    display: none !important;
  }

  body.lsvita-opc040084 .breadcrumb > li.breadcrumb-item {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    padding: 0 clamp(10px, 2.8vw, 15px) !important;
    white-space: nowrap !important;
    font-size: inherit !important;
    line-height: 30px !important;
  }

  body.lsvita-opc040084 .breadcrumb > li.breadcrumb-item:first-child {
    padding-left: 12px !important;
    padding-right: 14px !important;
  }

  body.lsvita-opc040084 .breadcrumb > li.breadcrumb-item > a {
    display: block !important;
    max-width: none !important;
    white-space: nowrap !important;
    font-size: inherit !important;
  }

  body.lsvita-opc040084 .breadcrumb i {
    font-size: 13px !important;
  }

  /* Scale down the chevron separator to match the smaller mobile bar. */
  body.lsvita-opc040084 .breadcrumb > li.breadcrumb-item:after {
    top: 4px !important;
    right: -3px !important;
    width: 21px !important;
    height: 21px !important;
  }

  /* ------------------------------------------------------------------------ */
  /* Order detail -> 訂購記錄: convert table into stacked responsive cards.   */
  /* No horizontal table overflow on phones.                                 */
  /* ------------------------------------------------------------------------ */
  body.lsvita-opc040084 #account-order #history .table-responsive {
    overflow: visible !important;
    width: 100% !important;
  }

  body.lsvita-opc040084 #account-order #history table,
  body.lsvita-opc040084 #account-order #history thead,
  body.lsvita-opc040084 #account-order #history tbody,
  body.lsvita-opc040084 #account-order #history tr,
  body.lsvita-opc040084 #account-order #history th,
  body.lsvita-opc040084 #account-order #history td {
    display: block !important;
    width: 100% !important;
  }

  body.lsvita-opc040084 #account-order #history thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  body.lsvita-opc040084 #account-order #history tbody tr {
    margin: 0 0 12px !important;
    border: 1px solid #ded8ca !important;
    border-radius: 5px !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  body.lsvita-opc040084 #account-order #history tbody td {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(88px, 34%) minmax(0, 66%) !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 9px 11px !important;
    border: 0 !important;
    border-bottom: 1px solid #eee9df !important;
    font-size: clamp(12px, 3.35vw, 14px) !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
  }

  body.lsvita-opc040084 #account-order #history tbody td:last-child {
    border-bottom: 0 !important;
  }

  body.lsvita-opc040084 #account-order #history tbody td::before {
    content: attr(data-label) !important;
    color: #756a51 !important;
    font-weight: 600 !important;
    white-space: normal !important;
  }

  body.lsvita-opc040084 #account-order #history .row {
    row-gap: 6px !important;
  }

  body.lsvita-opc040084 #account-order #history .col-sm-6 {
    width: 100% !important;
    text-align: center !important;
  }
}


/* ========================================================================== */
/* LS Vita v55 - all red/danger button text and icons are white               */
/* ========================================================================== */
/*
 * Keep each red button's existing background/border/hover colors unchanged.
 * Only force the foreground (text/icons) to white in every interaction state.
 */

body.lsvita-opc040084 .btn-danger,
body.lsvita-opc040084 a.btn-danger,
body.lsvita-opc040084 button.btn-danger,
body.lsvita-opc040084 input.btn-danger,
body.lsvita-opc040084 .btn-danger:hover,
body.lsvita-opc040084 .btn-danger:focus,
body.lsvita-opc040084 .btn-danger:active,
body.lsvita-opc040084 .btn-danger.active,
body.lsvita-opc040084 .btn-danger:disabled,
body.lsvita-opc040084 .btn-danger.disabled {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* Font Awesome, nested text spans and any other child foreground. */
body.lsvita-opc040084 .btn-danger i,
body.lsvita-opc040084 .btn-danger span,
body.lsvita-opc040084 .btn-danger strong,
body.lsvita-opc040084 .btn-danger small,
body.lsvita-opc040084 .btn-danger:hover i,
body.lsvita-opc040084 .btn-danger:hover span,
body.lsvita-opc040084 .btn-danger:focus i,
body.lsvita-opc040084 .btn-danger:focus span,
body.lsvita-opc040084 .btn-danger:active i,
body.lsvita-opc040084 .btn-danger:active span {
  color: #ffffff !important;
}

/* Font Awesome/SVG implementations. */
body.lsvita-opc040084 .btn-danger svg,
body.lsvita-opc040084 .btn-danger svg * {
  color: #ffffff !important;
  fill: currentColor !important;
}


/* ========================================================================== */
/* LS Vita v56 - header cart trigger uses the same grey action-button palette */
/* ========================================================================== */
/*
 * Only the top header cart trigger is changed.
 * Cart dropdown content/buttons keep their existing styling.
 *
 * Normal:
 *   light grey background
 *   dark grey text/icon
 *   visible darker border
 *
 * Hover/focus/active:
 *   orange background
 *   white text/icon
 */

body.lsvita-opc040084 header #cart .btn-dark,
body.lsvita-opc040084 header #cart button.btn-dark {
  --bs-btn-color: #585d61 !important;
  --bs-btn-bg: #f8f9fa !important;
  --bs-btn-border-color: #aeb2b6 !important;
  --bs-btn-hover-color: #ffffff !important;
  --bs-btn-hover-bg: #ff8106 !important;
  --bs-btn-hover-border-color: #e97400 !important;
  --bs-btn-active-color: #ffffff !important;
  --bs-btn-active-bg: #ee7700 !important;
  --bs-btn-active-border-color: #d96c00 !important;

  color: #585d61 !important;
  background: #f8f9fa !important;
  background-image: none !important;
  border: 1px solid #aeb2b6 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Cart icon/text use the same dark grey in normal state. */
body.lsvita-opc040084 header #cart .btn-dark i,
body.lsvita-opc040084 header #cart .btn-dark span,
body.lsvita-opc040084 header #cart button.btn-dark i,
body.lsvita-opc040084 header #cart button.btn-dark span {
  color: #585d61 !important;
}

/* Hover/focus/active = orange background + white text/icon. */
body.lsvita-opc040084 header #cart .btn-dark:hover,
body.lsvita-opc040084 header #cart .btn-dark:focus,
body.lsvita-opc040084 header #cart .btn-dark:active,
body.lsvita-opc040084 header #cart .btn-dark.show,
body.lsvita-opc040084 header #cart button.btn-dark:hover,
body.lsvita-opc040084 header #cart button.btn-dark:focus,
body.lsvita-opc040084 header #cart button.btn-dark:active {
  color: #ffffff !important;
  background: #ff8106 !important;
  background-image: none !important;
  border-color: #e97400 !important;
  box-shadow: none !important;
}

body.lsvita-opc040084 header #cart .btn-dark:hover i,
body.lsvita-opc040084 header #cart .btn-dark:hover span,
body.lsvita-opc040084 header #cart .btn-dark:focus i,
body.lsvita-opc040084 header #cart .btn-dark:focus span,
body.lsvita-opc040084 header #cart .btn-dark:active i,
body.lsvita-opc040084 header #cart .btn-dark:active span,
body.lsvita-opc040084 header #cart .btn-dark.show i,
body.lsvita-opc040084 header #cart .btn-dark.show span {
  color: #ffffff !important;
}


/* ========================================================================== */
/* LS Vita v57 - Member Center dropdown visibility fix                        */
/* ========================================================================== */
/*
 * IMPORTANT:
 * This patch does NOT alter cart width, top/right/left position, margin,
 * transform, or mobile placement.
 *
 * It only fixes stacking/overflow so the top "會員中心" dropdown can open
 * above the lower header/member/cart area.
 */

/* Let top utility dropdowns escape their containers. */
body.lsvita-opc040084 #top,
body.lsvita-opc040084 #top .container,
body.lsvita-opc040084 #top .row,
body.lsvita-opc040084 #top .col,
body.lsvita-opc040084 #top .list-inline,
body.lsvita-opc040084 #top .list-inline-item,
body.lsvita-opc040084 #top .dropdown {
  overflow: visible !important;
}

/* Raise the entire top utility bar above the lower header/cart stack. */
body.lsvita-opc040084 #top {
  position: relative !important;
  z-index: 5000 !important;
}

/* The dropdown toggle and menu need their own explicit high layer. */
body.lsvita-opc040084 #top .dropdown,
body.lsvita-opc040084 #top .dropdown-toggle {
  position: relative !important;
  z-index: 5010 !important;
}

body.lsvita-opc040084 #top .dropdown-menu {
  z-index: 6000 !important;
}

/* Keep lower header/cart layers below the top utility dropdown.
   No positioning values are changed here. */
body.lsvita-opc040084 header .lsvita-member-welcome {
  z-index: 1400 !important;
}

body.lsvita-opc040084 header #cart.lsvita-cart-slot,
body.lsvita-opc040084 header .lsvita-cart-slot {
  z-index: 1500 !important;
}

/* Cart dropdown remains above normal page/sidebar content. */
body.lsvita-opc040084 header #cart .dropdown-menu {
  z-index: 2500 !important;
}

/* Some Bootstrap dropdown ancestors can establish a competing stacking context. */
body.lsvita-opc040084 #top .text-end,
body.lsvita-opc040084 #top .col.text-end {
  position: relative !important;
  z-index: 5005 !important;
}


/* ========================================================================== */
/* LS Vita v58 - cart dropdown remove hover label                             */
/* ========================================================================== */
/*
 * Show a black "刪除" label above the red remove button on hover/focus.
 * This is CSS-based so it continues to work after the cart dropdown is
 * refreshed through AJAX.
 */

body.lsvita-opc040084 header #cart .lsvita-cart-dropdown-remove {
  position: relative !important;
  overflow: visible !important;
}

body.lsvita-opc040084 header #cart .lsvita-cart-dropdown-remove::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 4px) !important;
  transform: translateX(-50%) !important;
  border-width: 5px 5px 0 !important;
  border-style: solid !important;
  border-color: #212529 transparent transparent transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 7001 !important;
}

body.lsvita-opc040084 header #cart .lsvita-cart-dropdown-remove::after {
  content: attr(data-lsvita-tooltip) !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 9px) !important;
  transform: translateX(-50%) !important;
  min-width: max-content !important;
  padding: 5px 8px !important;
  border-radius: 4px !important;
  background: #212529 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 7000 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.18) !important;
}

body.lsvita-opc040084 header #cart .lsvita-cart-dropdown-remove:hover::before,
body.lsvita-opc040084 header #cart .lsvita-cart-dropdown-remove:hover::after,
body.lsvita-opc040084 header #cart .lsvita-cart-dropdown-remove:focus::before,
body.lsvita-opc040084 header #cart .lsvita-cart-dropdown-remove:focus::after {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure surrounding cart-dropdown cells do not clip the tooltip. */
body.lsvita-opc040084 header #cart .dropdown-menu,
body.lsvita-opc040084 header #cart .dropdown-menu li,
body.lsvita-opc040084 header #cart .dropdown-menu table,
body.lsvita-opc040084 header #cart .dropdown-menu tbody,
body.lsvita-opc040084 header #cart .dropdown-menu tr,
body.lsvita-opc040084 header #cart .dropdown-menu td,
body.lsvita-opc040084 header #cart .dropdown-menu form {
  overflow: visible !important;
}


/* ========================================================================== */
/* LS Vita v59 - tablet landscape / page shell horizontal alignment           */
/* ========================================================================== */
/*
 * Problem fixed:
 * Bootstrap .container uses fixed max-width values at tablet/desktop
 * breakpoints. On landscape phones and tablets this made the green menu and
 * page content substantially narrower than the header/footer shell.
 *
 * This fix intentionally targets only the page-level direct containers and
 * the migrated footer inner wrappers. Nested product/module containers are
 * left untouched so cards, checkout, forms and module layouts keep their
 * existing sizing.
 */

@media (min-width: 768px) {
  /* Use one shared horizontal shell from tablet landscape upward. */
  body.lsvita-opc040084 #top > .container,
  body.lsvita-opc040084 header > .container,
  body.lsvita-opc040084 main > .container,
  body.lsvita-opc040084 .lsvita-legacy-footer .lsvita-footer-inner,
  body.lsvita-opc040084 .lsvita-legacy-footer .lsvita-footer-bottom-inner {
    width: calc(100% - 30px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Prevent direct page shells from picking up Bootstrap fixed widths again. */
  body.lsvita-opc040084 main > .container {
    box-sizing: border-box !important;
  }
}

/* Keep narrow portrait/mobile behavior exactly as before. */
@media (max-width: 767.98px) {
  body.lsvita-opc040084 main > .container {
    max-width: 100% !important;
  }
}


/* ========================================================================== */
/* LS Vita v60 - phone/tablet landscape header + homepage column correction   */
/* ========================================================================== */
/*
 * Targets the 768px-1199px range used by most landscape phones/tablets.
 *
 * Fixes:
 * 1) The header cart is anchored to the full header row instead of the third
 *    Bootstrap column, so it cannot protrude beyond the header's right edge.
 * 2) On the HOME page, the left 商品目錄 column is restored at >=768px.
 *    The right sidebar remains hidden until XL, giving the center 75% width.
 * 3) The home content keeps the same page shell as the header/green menu.
 *
 * Portrait phones below 768px and desktop >=1200px keep their existing layout.
 */

@media (min-width: 768px) and (max-width: 1199.98px) {

  /* ---------------------------------------------------------------------- */
  /* Header: use the full row as the positioning reference.                 */
  /* ---------------------------------------------------------------------- */
  body.lsvita-opc040084 header .lsvita-header-row {
    position: relative !important;
    align-items: center !important;
    max-width: 100% !important;
  }

  /* Do not let the third Bootstrap column become the cart positioning box. */
  body.lsvita-opc040084 header .lsvita-cart-column {
    position: static !important;
    min-height: 108px !important;
    height: 108px !important;
    overflow: visible !important;
  }

  /* Guest/member line follows exactly the same right edge as the cart. */
  body.lsvita-opc040084 header .lsvita-member-welcome {
    position: absolute !important;
    top: 3px !important;
    right: 12px !important;
    left: auto !important;
    width: calc(33.333333% - 8px) !important;
    max-width: 290px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    white-space: normal !important;
    font-size: 12px !important;
    line-height: 17px !important;
    z-index: 1400 !important;
  }

  /* Cart stays INSIDE the header row and shares the green-menu right line. */
  body.lsvita-opc040084 header #cart.lsvita-cart-slot,
  body.lsvita-opc040084 header .lsvita-cart-slot {
    position: absolute !important;
    top: calc(50% + 10px) !important;
    right: 12px !important;
    left: auto !important;
    width: calc(33.333333% - 8px) !important;
    max-width: 290px !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    display: block !important;
    overflow: visible !important;
    z-index: 1500 !important;
  }

  body.lsvita-opc040084 header #cart.lsvita-cart-slot > .dropdown,
  body.lsvita-opc040084 header #cart > .dropdown {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.lsvita-opc040084 header #cart .btn-dark,
  body.lsvita-opc040084 header #cart button.btn-dark {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Cart dropdown opens inward from the right edge, never outside viewport. */
  body.lsvita-opc040084 header #cart .dropdown-menu {
    right: 0 !important;
    left: auto !important;
    max-width: min(360px, calc(100vw - 30px)) !important;
  }

  /* ---------------------------------------------------------------------- */
  /* HOME: restore left 商品目錄 on landscape phone/tablet.                 */
  /* The global column_left.twig may still carry d-none d-xl-block from the  */
  /* earlier tablet patch; this HOME-only rule intentionally overrides it.   */
  /* ---------------------------------------------------------------------- */
  body.lsvita-opc040084 #common-home > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  body.lsvita-opc040084 #common-home > .row > #column-left {
    display: block !important;
    flex: 0 0 25% !important;
    width: 25% !important;
    max-width: 25% !important;
    min-width: 0 !important;
  }

  /* Right sidebar remains hidden in this range so the center has room. */
  body.lsvita-opc040084 #common-home > .row > #column-right {
    display: none !important;
  }

  body.lsvita-opc040084 #common-home > .row > #content {
    display: block !important;
    flex: 0 0 75% !important;
    width: 75% !important;
    max-width: 75% !important;
    min-width: 0 !important;
  }

  /* Keep homepage modules/slideshow inside the 75% center column. */
  body.lsvita-opc040084 #common-home #content img,
  body.lsvita-opc040084 #common-home #content .img-fluid,
  body.lsvita-opc040084 #common-home #content .lsvita-yo-slideshow,
  body.lsvita-opc040084 #common-home #content .slide-wrapper,
  body.lsvita-opc040084 #common-home #content .yo-slide-list {
    max-width: 100% !important;
  }
}

/* Portrait/narrow phones: keep the existing one-column homepage. */
@media (max-width: 767.98px) {
  body.lsvita-opc040084 #common-home > .row > #column-left,
  body.lsvita-opc040084 #common-home > .row > #column-right {
    display: none !important;
  }

  body.lsvita-opc040084 #common-home > .row > #content {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ========================================================================== */
/* LS Vita v61 - ACTIVE CSS landscape/tablet hard fix                         */
/* ========================================================================== */
/*
 * IMPORTANT:
 * Earlier landscape patches changed versioned CSS files, but this storefront
 * has also used catalog/view/stylesheet/opc040084.css directly.  This v61
 * package writes the same fix to the active CSS name AND the recent versioned
 * names, so it works even when OpenCart still serves a cached header template.
 *
 * Goals from the supplied screenshots:
 *   1. Cart must stay inside the header at landscape/tablet widths.
 *   2. Green category bar and homepage content must use the same left/right
 *      shell as the header.
 *   3. Restore the left 商品目錄 sidebar in landscape/tablet mode.
 *   4. Keep portrait phones single-column.
 */

/* One shared shell: top/header/menu/home/footer. */
@media (min-width: 768px) and (max-width: 1399.98px) {
  body.lsvita-opc040084 #top > .container,
  body.lsvita-opc040084 header > .container,
  body.lsvita-opc040084 main > .container,
  body.lsvita-opc040084 main > #common-home.container,
  body.lsvita-opc040084 .lsvita-legacy-footer .lsvita-footer-inner,
  body.lsvita-opc040084 .lsvita-legacy-footer .lsvita-footer-bottom-inner {
    width: calc(100% - 30px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* The menu template itself is wrapped by main > .container. */
  body.lsvita-opc040084 main > .container > #menu,
  body.lsvita-opc040084 main > .container > nav#menu {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* ---------------------------------------------------------------------- */
  /* Header: use normal grid flow at landscape/tablet widths.                */
  /* This intentionally cancels older absolute cart positioning.             */
  /* ---------------------------------------------------------------------- */
  body.lsvita-opc040084 header .lsvita-header-row {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-items: center !important;
  }

  /* Newer header structure: wrapper containing welcome + cart. */
  body.lsvita-opc040084 header .lsvita-cart-column {
    position: relative !important;
    display: flex !important;
    flex: 0 0 33.333333% !important;
    width: 33.333333% !important;
    max-width: 33.333333% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  body.lsvita-opc040084 header .lsvita-member-welcome {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    text-align: right !important;
    white-space: normal !important;
    font-size: 12px !important;
    line-height: 17px !important;
    transform: none !important;
  }

  body.lsvita-opc040084 header #cart.lsvita-cart-slot,
  body.lsvita-opc040084 header .lsvita-cart-slot {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
    display: block !important;
    overflow: visible !important;
  }

  /* Older cached header structure: #cart itself is the third Bootstrap col. */
  body.lsvita-opc040084 header .lsvita-header-row > #cart.col-md-4,
  body.lsvita-opc040084 header .lsvita-header-row > #cart.col-lg-4,
  body.lsvita-opc040084 header .lsvita-header-row > #cart[class*="col-"] {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 33.333333% !important;
    width: 33.333333% !important;
    max-width: 33.333333% !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow: visible !important;
  }

  /* In both header generations the actual dropdown/button must obey its col. */
  body.lsvita-opc040084 header #cart > .dropdown,
  body.lsvita-opc040084 header #cart.lsvita-cart-slot > .dropdown,
  body.lsvita-opc040084 header .lsvita-cart-slot > .dropdown {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.lsvita-opc040084 header #cart .btn-dark,
  body.lsvita-opc040084 header #cart button.btn-dark,
  body.lsvita-opc040084 header #cart .dropdown-toggle {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.lsvita-opc040084 header #cart .dropdown-menu {
    right: 0 !important;
    left: auto !important;
    max-width: min(360px, calc(100vw - 30px)) !important;
  }

  /* ---------------------------------------------------------------------- */
  /* Homepage landscape/tablet: restore left 商品目錄 and keep it aligned.  */
  /* ---------------------------------------------------------------------- */
  body.lsvita-opc040084 #common-home.container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.lsvita-opc040084 #common-home > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    width: auto !important;
    max-width: none !important;
  }

  body.lsvita-opc040084 #common-home > .row > #column-left,
  body.lsvita-opc040084 #common-home > .row > aside#column-left {
    display: block !important;
    visibility: visible !important;
    flex: 0 0 24% !important;
    width: 24% !important;
    max-width: 24% !important;
    min-width: 0 !important;
    opacity: 1 !important;
  }

  body.lsvita-opc040084 #common-home > .row > #column-right,
  body.lsvita-opc040084 #common-home > .row > aside#column-right {
    display: none !important;
  }

  body.lsvita-opc040084 #common-home > .row > #content {
    display: block !important;
    flex: 0 0 76% !important;
    width: 76% !important;
    max-width: 76% !important;
    min-width: 0 !important;
  }

  /* Prevent fixed-width slideshow/module wrappers from forcing horizontal scroll. */
  body.lsvita-opc040084 #common-home #content img,
  body.lsvita-opc040084 #common-home #content .img-fluid,
  body.lsvita-opc040084 #common-home #content .lsvita-yo-slideshow,
  body.lsvita-opc040084 #common-home #content .yo-slideshow,
  body.lsvita-opc040084 #common-home #content .yo-slide-list,
  body.lsvita-opc040084 #common-home #content .slide-wrapper,
  body.lsvita-opc040084 #common-home #content .swiper,
  body.lsvita-opc040084 #common-home #content .carousel {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.lsvita-opc040084 #common-home #content img,
  body.lsvita-opc040084 #common-home #content .img-fluid {
    height: auto !important;
  }
}

/* Some landscape phones report a CSS viewport just below Bootstrap md. */
@media (orientation: landscape) and (min-width: 640px) and (max-width: 767.98px) {
  body.lsvita-opc040084 #top > .container,
  body.lsvita-opc040084 header > .container,
  body.lsvita-opc040084 main > .container,
  body.lsvita-opc040084 main > #common-home.container {
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.lsvita-opc040084 #common-home > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }

  body.lsvita-opc040084 #common-home > .row > #column-left {
    display: block !important;
    visibility: visible !important;
    flex: 0 0 29% !important;
    width: 29% !important;
    max-width: 29% !important;
    min-width: 0 !important;
  }

  body.lsvita-opc040084 #common-home > .row > #column-right {
    display: none !important;
  }

  body.lsvita-opc040084 #common-home > .row > #content {
    flex: 0 0 71% !important;
    width: 71% !important;
    max-width: 71% !important;
    min-width: 0 !important;
  }

  /* At this width, keep cart inside the header by using normal flow. */
  body.lsvita-opc040084 header .lsvita-cart-column,
  body.lsvita-opc040084 header .lsvita-header-row > #cart[class*="col-"] {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    overflow: visible !important;
  }

  body.lsvita-opc040084 header #cart.lsvita-cart-slot,
  body.lsvita-opc040084 header .lsvita-cart-slot {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    max-width: 100% !important;
  }

  body.lsvita-opc040084 header #cart > .dropdown,
  body.lsvita-opc040084 header #cart .btn-dark,
  body.lsvita-opc040084 header #cart button.btn-dark {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Portrait phones remain the existing single-column mobile layout. */
@media (orientation: portrait) and (max-width: 767.98px) {
  body.lsvita-opc040084 #common-home > .row > #column-left,
  body.lsvita-opc040084 #common-home > .row > #column-right {
    display: none !important;
  }
  body.lsvita-opc040084 #common-home > .row > #content {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Hard guard against the landscape horizontal scrollbar seen in screenshot. */
body.lsvita-opc040084 {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* ========================================================================== */
/* LS Vita v62 - menu width + landscape full categories + footer gap fix      */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* A. Remove the legacy OpenCart bottom spacer that can leave hundreds of px   */
/*    between the last content block and the footer.                           */
/* -------------------------------------------------------------------------- */
body.lsvita-opc040084 #container {
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.lsvita-opc040084 main {
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.lsvita-opc040084 #content,
body.lsvita-opc040084 #column-left,
body.lsvita-opc040084 #column-right {
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 20px !important;
  margin-bottom: 0 !important;
}

body.lsvita-opc040084 #common-home,
body.lsvita-opc040084 #common-home > .row {
  min-height: 0 !important;
  height: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.lsvita-opc040084 footer,
body.lsvita-opc040084 footer.tm-footer,
body.lsvita-opc040084 #footer-container {
  position: relative !important;
  bottom: auto !important;
  clear: both !important;
  margin-top: 20px !important;
}

/* -------------------------------------------------------------------------- */
/* B. Green category bar: use the full width of the same outer page shell as   */
/*    the header instead of Bootstrap's narrower .container max-width.         */
/* -------------------------------------------------------------------------- */
body.lsvita-opc040084 main > .lsvita-menu-shell,
body.lsvita-opc040084 main > .container:has(> #menu) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

body.lsvita-opc040084 .lsvita-menu-shell > #menu,
body.lsvita-opc040084 main > .container:has(> #menu) > #menu,
body.lsvita-opc040084 main > .container:has(> #menu) > nav#menu {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Home content must not fall back to Bootstrap's 720/960/1140/1320 max-width. */
body.lsvita-opc040084 main > #common-home.container {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* -------------------------------------------------------------------------- */
/* C. Tablet / landscape phone: show ALL top-level categories like desktop.   */
/* -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  body.lsvita-opc040084 #menu #category,
  body.lsvita-opc040084 #menu .navbar-toggler {
    display: none !important;
  }

  body.lsvita-opc040084 #menu #navbar-menu,
  body.lsvita-opc040084 #menu .navbar-collapse,
  body.lsvita-opc040084 #navbar-menu.collapse,
  body.lsvita-opc040084 #navbar-menu.collapse:not(.show) {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    flex-basis: auto !important;
  }

  body.lsvita-opc040084 #menu .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 8px !important;
  }

  body.lsvita-opc040084 #menu .navbar-nav > li,
  body.lsvita-opc040084 #menu .navbar-nav > .nav-item {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }

  body.lsvita-opc040084 #menu .navbar-nav > li > a,
  body.lsvita-opc040084 #menu .navbar-nav > .nav-item > .nav-link,
  body.lsvita-opc040084 #menu .navbar-nav > .nav-item > .dropdown-item {
    display: block !important;
    width: auto !important;
    padding: 12px 13px !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    line-height: 20px !important;
  }
}

/* Some phones in landscape are below Bootstrap md.  Expand the same menu. */
@media (orientation: landscape) and (min-width: 640px) and (max-width: 767.98px) {
  body.lsvita-opc040084 #menu #category,
  body.lsvita-opc040084 #menu .navbar-toggler {
    display: none !important;
  }

  body.lsvita-opc040084 #menu #navbar-menu,
  body.lsvita-opc040084 #menu .navbar-collapse,
  body.lsvita-opc040084 #navbar-menu.collapse,
  body.lsvita-opc040084 #navbar-menu.collapse:not(.show) {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    flex-basis: auto !important;
  }

  body.lsvita-opc040084 #menu .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 6px !important;
  }

  body.lsvita-opc040084 #menu .navbar-nav > li,
  body.lsvita-opc040084 #menu .navbar-nav > .nav-item {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }

  body.lsvita-opc040084 #menu .navbar-nav > li > a,
  body.lsvita-opc040084 #menu .navbar-nav > .nav-item > .nav-link,
  body.lsvita-opc040084 #menu .navbar-nav > .nav-item > .dropdown-item {
    display: block !important;
    width: auto !important;
    padding: 10px 9px !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    line-height: 19px !important;
  }
}

/* Portrait phones retain the hamburger/collapsed mobile menu. */
@media (orientation: portrait) and (max-width: 767.98px) {
  body.lsvita-opc040084 #menu #category {
    display: block !important;
  }
  body.lsvita-opc040084 #menu .navbar-toggler {
    display: block !important;
  }
}

/* -------------------------------------------------------------------------- */
/* D. Keep the landscape homepage left category column from v61, while the     */
/*    whole home shell now uses the available header width.                    */
/* -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1399.98px) {
  body.lsvita-opc040084 main > #common-home.container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  body.lsvita-opc040084 #common-home > .row > #column-left,
  body.lsvita-opc040084 #common-home > .row > aside#column-left {
    display: block !important;
    visibility: visible !important;
    flex: 0 0 24% !important;
    width: 24% !important;
    max-width: 24% !important;
  }

  body.lsvita-opc040084 #common-home > .row > #content {
    flex: 0 0 76% !important;
    width: 76% !important;
    max-width: 76% !important;
  }
}

/* ========================================================================== */
/* LS Vita v63 - product breadcrumb/content shell aligns with header/menu      */
/* ========================================================================== */
/*
 * v62 aligned the green category bar with the header.  Product pages still
 * used an inner Bootstrap .container, leaving the grey breadcrumb bar and the
 * product-detail block inset on both sides.  This rule removes only that
 * product-page inner max-width/gutter.  Checkout/account/other page containers
 * are intentionally untouched.
 */

@media (min-width: 768px) {
  /* Match the exact outer shell used by the green category bar. */
  body.lsvita-opc040084 main > #product-info.container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Grey breadcrumb bar now starts/ends on the same vertical lines. */
  body.lsvita-opc040084 #product-info > .breadcrumb {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Remove the extra Bootstrap row/container inset below the breadcrumb. */
  body.lsvita-opc040084 #product-info > .row {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.lsvita-opc040084 #product-info > .row > #content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Product image/info two-column row: keep normal gap BETWEEN columns,
     but remove the spare gutter at the two OUTER edges. */
  body.lsvita-opc040084 #product-info #content > .row.mb-3 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.lsvita-opc040084 #product-info #content > .row.mb-3 > [class*="col-"]:first-child,
  body.lsvita-opc040084 #product-info #content > .row.mb-3 > .col:first-child {
    padding-left: 0 !important;
  }

  body.lsvita-opc040084 #product-info #content > .row.mb-3 > [class*="col-"]:last-child,
  body.lsvita-opc040084 #product-info #content > .row.mb-3 > .col:last-child {
    padding-right: 0 !important;
  }

  /* Any full-width blocks under the main product row should use the same shell. */
  body.lsvita-opc040084 #product-info #content > .nav-tabs,
  body.lsvita-opc040084 #product-info #content > .tab-content,
  body.lsvita-opc040084 #product-info #content > .lsvita-purchase-information,
  body.lsvita-opc040084 #product-info #content > .product-related,
  body.lsvita-opc040084 #product-info #content > .related-products {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Landscape phones whose CSS viewport is just below md get the same alignment. */
@media (orientation: landscape) and (min-width: 640px) and (max-width: 767.98px) {
  body.lsvita-opc040084 main > #product-info.container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.lsvita-opc040084 #product-info > .breadcrumb,
  body.lsvita-opc040084 #product-info > .row,
  body.lsvita-opc040084 #product-info > .row > #content {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ========================================================================== */
/* LS Vita v64 - restore desktop width + 3 related products on landscape      */
/* ========================================================================== */
/*
 * v59-v63 intentionally removed Bootstrap max-widths for tablet/landscape
 * alignment. Those older rules also remained active above 1400px and widened
 * the desktop storefront. Restore the original Bootstrap XL/XXL content width
 * on desktop while keeping the 768-1399px landscape/tablet alignment fixes.
 */
@media (min-width: 1400px) {
  /* Restore the original desktop page/content width. */
  body.lsvita-opc040084 #top > .container,
  body.lsvita-opc040084 header > .container,
  body.lsvita-opc040084 main > .container,
  body.lsvita-opc040084 main > #common-home.container,
  body.lsvita-opc040084 main > #product-info.container,
  body.lsvita-opc040084 main > .lsvita-menu-shell,
  body.lsvita-opc040084 main > .container:has(> #menu),
  body.lsvita-opc040084 .lsvita-legacy-footer .lsvita-footer-inner,
  body.lsvita-opc040084 .lsvita-legacy-footer .lsvita-footer-bottom-inner {
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Keep the green category bar and product page aligned to that 1320px shell. */
  body.lsvita-opc040084 .lsvita-menu-shell > #menu,
  body.lsvita-opc040084 main > .container:has(> #menu) > #menu,
  body.lsvita-opc040084 main > .container:has(> #menu) > nav#menu,
  body.lsvita-opc040084 #product-info > .breadcrumb,
  body.lsvita-opc040084 #product-info > .row,
  body.lsvita-opc040084 #product-info > .row > #content {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Related products: 3 columns on landscape phones and tablets. */
@media (min-width: 640px) and (max-width: 1399.98px) {
  body.lsvita-opc040084 .lsvita-related-grid > .col,
  body.lsvita-opc040084 .related-products .product-layout,
  body.lsvita-opc040084 .product-related .product-layout {
    flex: 0 0 33.333333% !important;
    width: 33.333333% !important;
    max-width: 33.333333% !important;
    min-width: 0 !important;
  }
}

/* ========================================================================== */
/* LS Vita v65 - category subcategory tiles use the available content width   */
/* ========================================================================== */
/*
 * The migrated legacy category tile block had max-width:500px, which made the
 * directory tiles bunch up against the left edge even when the center content
 * column had much more room.  Keep the images at their legacy size, but let the
 * grid itself fill whatever width is available and choose the number of columns
 * automatically.
 */
body.lsvita-opc040084 #product-category .lsvita-subcategory-grid {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
  column-gap: clamp(8px, 1.4vw, 18px) !important;
  row-gap: 10px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

body.lsvita-opc040084 #product-category .lsvita-subcategory-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
}

body.lsvita-opc040084 #product-category .lsvita-subcategory-image {
  width: min(117px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.lsvita-opc040084 #product-category .lsvita-subcategory-name {
  width: 100% !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}

/* Tablet / landscape: keep the grid fluid instead of falling back to fixed
   3-column or 2-column rules from the old compatibility stylesheet. */
@media (min-width: 640px) and (max-width: 1399.98px) {
  body.lsvita-opc040084 #product-category .lsvita-subcategory-grid {
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
  }
}

/* Narrow portrait phones remain easy to tap/read. */
@media (max-width: 639.98px) {
  body.lsvita-opc040084 #product-category .lsvita-subcategory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
  }
}

/* ========================================================================== */
/* LS Vita v66 - responsive category shell + breadcrumb + sidebar price rules */
/* ========================================================================== */
/*
 * 1) Portrait mobile category pages: grey breadcrumb/page shell uses the same
 *    outer width as the header/green menu.  Inner content keeps safe padding.
 * 2) Landscape/tablet breadcrumbs stay on ONE clean row; long final labels are
 *    ellipsized instead of wrapping into an oversized chevron row.
 * 3) Right-column prices use one consistent size site-wide (16px), overriding
 *    the category-page 20px product-grid price rule that leaked into sidebar.
 * 4) Current/sale prices are green site-wide; crossed-out original prices red.
 */

/* -------------------------------------------------------------------------- */
/* A. Mobile category shell alignment                                         */
/* -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body.lsvita-opc040084 main > #product-category.container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Grey breadcrumb touches the same left/right shell as the green menu. */
  body.lsvita-opc040084 #product-category > .breadcrumb {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Remove Bootstrap row negative-gutter drift at the page edge. */
  body.lsvita-opc040084 #product-category > .row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Keep readable breathing room INSIDE the aligned page shell. */
  body.lsvita-opc040084 #product-category > .row > #content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-sizing: border-box !important;
  }
}

/* -------------------------------------------------------------------------- */
/* B. Landscape phone / tablet breadcrumb cleanup                             */
/* -------------------------------------------------------------------------- */
@media (min-width: 640px) and (max-width: 1399.98px) {
  body.lsvita-opc040084 .breadcrumb {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-height: 50px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    overflow: hidden !important;
    font-size: clamp(13px, 1.35vw, 16px) !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
  }

  body.lsvita-opc040084 .breadcrumb > li.breadcrumb-item {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap !important;
    line-height: 34px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Long product/category name: consume remaining room but never create row 2. */
  body.lsvita-opc040084 .breadcrumb > li.breadcrumb-item:last-child {
    flex: 1 1 auto !important;
    min-width: 80px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding-right: 18px !important;
  }

  body.lsvita-opc040084 .breadcrumb > li.breadcrumb-item:last-child > a {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.lsvita-opc040084 .breadcrumb > li.breadcrumb-item:after {
    top: 6px !important;
    width: 25px !important;
    height: 25px !important;
  }
}

/* Portrait phones: keep breadcrumb one-line and scrollable, but aligned. */
@media (max-width: 639.98px) {
  body.lsvita-opc040084 #product-category > .breadcrumb {
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    border-radius: 0 !important;
  }
}

/* -------------------------------------------------------------------------- */
/* C. ONE right-column price scale everywhere                                 */
/* -------------------------------------------------------------------------- */
/*
 * v36 deliberately made #product-category .product-thumb .price = 20px.
 * Because the right sidebar lives inside #product-category, that rule also
 * enlarged sidebar prices.  Override sidebar/module prices after that rule.
 */
body.lsvita-opc040084 #column-right .product-thumb .price,
body.lsvita-opc040084 #column-right .product-thumb .price-new,
body.lsvita-opc040084 #column-right .box-product .price,
body.lsvita-opc040084 #column-right .box-product .price-new,
body.lsvita-opc040084 #column-right .product-price,
body.lsvita-opc040084 aside#column-right .price,
body.lsvita-opc040084 aside#column-right .price-new {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

body.lsvita-opc040084 #column-right .product-thumb .price > span:not(.price-old):not(.price-tax),
body.lsvita-opc040084 #column-right .box-product .price > span:not(.price-old):not(.price-tax),
body.lsvita-opc040084 aside#column-right .price > span:not(.price-old):not(.price-tax) {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

body.lsvita-opc040084 #column-right .price-old,
body.lsvita-opc040084 aside#column-right .price-old,
body.lsvita-opc040084 #column-right .price s,
body.lsvita-opc040084 #column-right .price del {
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

body.lsvita-opc040084 #column-right .price-tax,
body.lsvita-opc040084 aside#column-right .price-tax {
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

/* -------------------------------------------------------------------------- */
/* D. Site-wide price colors                                                  */
/* -------------------------------------------------------------------------- */
body.lsvita-opc040084 .product-thumb .price,
body.lsvita-opc040084 .product-thumb .price-new,
body.lsvita-opc040084 .box-product .price,
body.lsvita-opc040084 .box-product .price-new,
body.lsvita-opc040084 .product-price,
body.lsvita-opc040084 .price-new,
body.lsvita-opc040084 #column-right .price,
body.lsvita-opc040084 #column-right .price-new,
body.lsvita-opc040084 #product-info .price,
body.lsvita-opc040084 #product-info .price-new {
  color: #5f8f2f !important;
}

/* When the current price is direct text in .price, child normal-price spans
   inherit green.  Original/crossed price always wins as red below. */
body.lsvita-opc040084 .price-old,
body.lsvita-opc040084 .product-thumb .price-old,
body.lsvita-opc040084 .box-product .price-old,
body.lsvita-opc040084 .price s,
body.lsvita-opc040084 .price del,
body.lsvita-opc040084 s.price-old,
body.lsvita-opc040084 del.price-old {
  color: #c0392b !important;
  text-decoration-color: #c0392b !important;
}

/* Do not recolor tax/helper text as a selling price. */
body.lsvita-opc040084 .price-tax {
  color: #777 !important;
}

/* ========================================================================== */
/* LS Vita v67 - sidebar old-price size match                                */
/* ========================================================================== */
/* Keep crossed-out/original prices exactly the same text size as the green
   selling price in every right-column product module. */
body.lsvita-opc040084 #column-right .price-old,
body.lsvita-opc040084 aside#column-right .price-old,
body.lsvita-opc040084 #column-right .product-thumb .price-old,
body.lsvita-opc040084 #column-right .box-product .price-old,
body.lsvita-opc040084 #column-right .price s,
body.lsvita-opc040084 #column-right .price del,
body.lsvita-opc040084 aside#column-right .price s,
body.lsvita-opc040084 aside#column-right .price del,
body.lsvita-opc040084 #column-right s.price-old,
body.lsvita-opc040084 #column-right del.price-old,
body.lsvita-opc040084 #column-right .price-old span,
body.lsvita-opc040084 aside#column-right .price-old span {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: #c0392b !important;
  text-decoration: line-through !important;
  text-decoration-color: #c0392b !important;
}

/* ========================================================================== */
/* LS Vita v68 - shared shell alignment + homepage spacing + price + typography */
/* ========================================================================== */
/*
 * 1) Category sidebar old/sale prices: force the crossed-out price to the
 *    SAME 16px size as the green selling price, including the higher-specificity
 *    #product-category rule used by category pages.
 * 2) Restore the intentional gap between the green category menu and the
 *    homepage content block.
 * 3) Use ONE page-shell width for header + main content at desktop and portrait
 *    mobile widths. Tablet/landscape behavior from v61-v67 is preserved.
 * 4) Use Marcellus consistently for storefront text. Font Awesome icon classes
 *    are intentionally not overridden.
 */

/* -------------------------------------------------------------------------- */
/* A. Right-column prices: same size everywhere, including category pages      */
/* -------------------------------------------------------------------------- */
body.lsvita-opc040084 #column-right .price,
body.lsvita-opc040084 #column-right .price *,
body.lsvita-opc040084 aside#column-right .price,
body.lsvita-opc040084 aside#column-right .price *,
body.lsvita-opc040084 #column-right .price-new,
body.lsvita-opc040084 #column-right .price-old,
body.lsvita-opc040084 #column-right s,
body.lsvita-opc040084 #column-right del,
body.lsvita-opc040084 #product-category #column-right .product-thumb .price,
body.lsvita-opc040084 #product-category #column-right .product-thumb .price > span,
body.lsvita-opc040084 #product-category #column-right .product-thumb .price-new,
body.lsvita-opc040084 #product-category #column-right .product-thumb .price-old,
body.lsvita-opc040084 #product-category #column-right .product-thumb .price s,
body.lsvita-opc040084 #product-category #column-right .product-thumb .price del {
  font-size: 16px !important;
  line-height: 1.35 !important;
}

/* Selling/current price = green. */
body.lsvita-opc040084 #column-right .price,
body.lsvita-opc040084 #column-right .price-new,
body.lsvita-opc040084 aside#column-right .price,
body.lsvita-opc040084 aside#column-right .price-new,
body.lsvita-opc040084 #product-category #column-right .product-thumb .price,
body.lsvita-opc040084 #product-category #column-right .product-thumb .price-new {
  color: #5f8f2f !important;
  font-weight: 600 !important;
}

/* Crossed-out/original price = red, but NEVER larger than the selling price. */
body.lsvita-opc040084 #column-right .price-old,
body.lsvita-opc040084 #column-right .price-old *,
body.lsvita-opc040084 #column-right .price s,
body.lsvita-opc040084 #column-right .price del,
body.lsvita-opc040084 #column-right s.price-old,
body.lsvita-opc040084 #column-right del.price-old,
body.lsvita-opc040084 aside#column-right .price-old,
body.lsvita-opc040084 aside#column-right .price-old *,
body.lsvita-opc040084 aside#column-right .price s,
body.lsvita-opc040084 aside#column-right .price del,
body.lsvita-opc040084 #product-category #column-right .product-thumb .price-old,
body.lsvita-opc040084 #product-category #column-right .product-thumb .price-old *,
body.lsvita-opc040084 #product-category #column-right .product-thumb .price s,
body.lsvita-opc040084 #product-category #column-right .product-thumb .price del {
  color: #c0392b !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  text-decoration: line-through !important;
  text-decoration-color: #c0392b !important;
}

/* Tax/helper text stays smaller and neutral. */
body.lsvita-opc040084 #column-right .price-tax,
body.lsvita-opc040084 aside#column-right .price-tax,
body.lsvita-opc040084 #product-category #column-right .product-thumb .price-tax {
  color: #777 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* -------------------------------------------------------------------------- */
/* B. Restore homepage gap below the green category bar                        */
/* -------------------------------------------------------------------------- */
body.lsvita-opc040084 main > #common-home.container {
  margin-top: 28px !important;
}

@media (max-width: 767.98px) {
  body.lsvita-opc040084 main > #common-home.container {
    margin-top: 20px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* C. One shared outer shell: header and middle page content always align      */
/* -------------------------------------------------------------------------- */
/* Desktop: restore/keep the original 1320px centered site width. */
@media (min-width: 1400px) {
  body.lsvita-opc040084 #top > .container,
  body.lsvita-opc040084 header > .container,
  body.lsvita-opc040084 main > .lsvita-menu-shell,
  body.lsvita-opc040084 main > .container,
  body.lsvita-opc040084 .lsvita-legacy-footer .lsvita-footer-inner,
  body.lsvita-opc040084 .lsvita-legacy-footer .lsvita-footer-bottom-inner {
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  body.lsvita-opc040084 .lsvita-menu-shell > #menu,
  body.lsvita-opc040084 .lsvita-menu-shell > nav#menu {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Normal desktop/tablet: same 15px outside gutter for header and page content. */
@media (min-width: 768px) and (max-width: 1399.98px) {
  body.lsvita-opc040084 #top > .container,
  body.lsvita-opc040084 header > .container,
  body.lsvita-opc040084 main > .lsvita-menu-shell,
  body.lsvita-opc040084 main > .container,
  body.lsvita-opc040084 .lsvita-legacy-footer .lsvita-footer-inner,
  body.lsvita-opc040084 .lsvita-legacy-footer .lsvita-footer-bottom-inner {
    width: calc(100% - 30px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* Portrait/narrow mobile: header and every page container share exactly the
   same 100% shell and the same 12px inner gutter. This replaces the v66
   category-only zero-padding exception that caused visible misalignment. */
@media (max-width: 767.98px) {
  body.lsvita-opc040084 #top > .container,
  body.lsvita-opc040084 header > .container,
  body.lsvita-opc040084 main > .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* Green menu stays full-width on portrait mobile, as designed. */
  body.lsvita-opc040084 main > .lsvita-menu-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Override v66's category page zero-padding rule. */
  body.lsvita-opc040084 main > #product-category.container,
  body.lsvita-opc040084 main > #product-info.container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* Breadcrumbs and the primary page row use the same inner alignment line. */
  body.lsvita-opc040084 main > .container > .breadcrumb,
  body.lsvita-opc040084 #product-category > .breadcrumb,
  body.lsvita-opc040084 #product-info > .breadcrumb {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.lsvita-opc040084 main > .container > .row,
  body.lsvita-opc040084 #product-category > .row,
  body.lsvita-opc040084 #product-info > .row,
  body.lsvita-opc040084 #common-home > .row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.lsvita-opc040084 #product-category > .row > #content,
  body.lsvita-opc040084 #product-info > .row > #content,
  body.lsvita-opc040084 #common-home > .row > #content {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* -------------------------------------------------------------------------- */
/* D. Uniform storefront typography                                            */
/* -------------------------------------------------------------------------- */
/* Do not target i/.fa icon nodes, because Font Awesome needs its own font. */
body.lsvita-opc040084,
body.lsvita-opc040084 a,
body.lsvita-opc040084 p,
body.lsvita-opc040084 span:not(.fa):not(.fas):not(.far):not(.fab),
body.lsvita-opc040084 div,
body.lsvita-opc040084 li,
body.lsvita-opc040084 td,
body.lsvita-opc040084 th,
body.lsvita-opc040084 label,
body.lsvita-opc040084 small,
body.lsvita-opc040084 strong,
body.lsvita-opc040084 b,
body.lsvita-opc040084 h1,
body.lsvita-opc040084 h2,
body.lsvita-opc040084 h3,
body.lsvita-opc040084 h4,
body.lsvita-opc040084 h5,
body.lsvita-opc040084 h6,
body.lsvita-opc040084 input,
body.lsvita-opc040084 textarea,
body.lsvita-opc040084 select,
body.lsvita-opc040084 button,
body.lsvita-opc040084 .btn,
body.lsvita-opc040084 .form-control,
body.lsvita-opc040084 .dropdown-item,
body.lsvita-opc040084 #menu .navbar-nav > li > a,
body.lsvita-opc040084 #menu .navbar-nav > .nav-item > .nav-link,
body.lsvita-opc040084 .breadcrumb,
body.lsvita-opc040084 .breadcrumb a {
  font-family: 'Marcellus', Arial, Helvetica, sans-serif !important;
}

/* ========================================================================== */
/* LS Vita v69 - FINAL parent-shell alignment                                 */
/* ========================================================================== */
/*
 * The visible header background is the outer #container width. Earlier
 * patches mixed that parent width with Bootstrap child-container gutters
 * (100%, calc(100% - 20px), calc(100% - 30px), and 1320px), and higher-
 * specificity product/category rules could win at different breakpoints.
 *
 * v69 uses ONE reference line: the width of #container/main itself.
 * Green menu, grey breadcrumb and page shell all occupy 100% of that parent.
 * The existing #container keeps the site's original desktop maximum width, so
 * this does NOT widen the desktop site.
 */

/* A. One outer line for menu + every direct main page shell. */
body.lsvita-opc040084 #container > main > .lsvita-menu-shell,
body.lsvita-opc040084 #container > main > #common-home.container,
body.lsvita-opc040084 #container > main > #product-category.container,
body.lsvita-opc040084 #container > main > #product-info.container,
body.lsvita-opc040084 #container > main > .container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* B. Green menu must fill its shell at ALL breakpoints. */
body.lsvita-opc040084 #container > main > .lsvita-menu-shell > #menu,
body.lsvita-opc040084 #container > main > .lsvita-menu-shell > nav#menu,
body.lsvita-opc040084 #container > main > .container > #menu,
body.lsvita-opc040084 #container > main > .container > nav#menu {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* C. Grey breadcrumb bar uses the exact same outer line as the green menu. */
body.lsvita-opc040084 #container > main > .container > .breadcrumb,
body.lsvita-opc040084 #container > main > #product-category.container > .breadcrumb,
body.lsvita-opc040084 #container > main > #product-info.container > .breadcrumb {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* D. Main rows may no longer borrow Bootstrap's negative outside gutter.
 * Columns keep their own inner padding, so text/cards still have breathing room.
 */
body.lsvita-opc040084 #container > main > .container > .row,
body.lsvita-opc040084 #container > main > #common-home.container > .row,
body.lsvita-opc040084 #container > main > #product-category.container > .row,
body.lsvita-opc040084 #container > main > #product-info.container > .row {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* E. Preserve the intentional homepage space below the green menu. */
body.lsvita-opc040084 #container > main > #common-home.container {
  margin-top: 28px !important;
}

/* F. Portrait phone: outer bars stay edge-aligned; category content retains
 * comfortable inner padding so tiles/text are not glued to screen edges.
 */
@media (max-width: 639.98px) and (orientation: portrait) {
  body.lsvita-opc040084 #container > main > #common-home.container {
    margin-top: 20px !important;
  }

  body.lsvita-opc040084 #product-category > .row > #content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-sizing: border-box !important;
  }
}

/* G. Landscape phones below Bootstrap md previously matched the 640-767 rule
 * for header/page width but ALSO matched a later mobile rule that forced the
 * green menu back to 100vw.  This final block makes all three use the same
 * parent width, eliminating the visible offset.
 */
@media (orientation: landscape) and (min-width: 640px) and (max-width: 767.98px) {
  body.lsvita-opc040084 #container > main > .lsvita-menu-shell,
  body.lsvita-opc040084 #container > main > #common-home.container,
  body.lsvita-opc040084 #container > main > #product-category.container,
  body.lsvita-opc040084 #container > main > #product-info.container,
  body.lsvita-opc040084 #container > main > .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* H. Tablet/desktop: explicitly beat the old calc(100% - 30px) and 1320px
 * menu/page rules with ID-level specificity. The original desktop width is
 * still governed by the existing outer #container.
 */
@media (min-width: 768px) {
  body.lsvita-opc040084 #container > main > .lsvita-menu-shell,
  body.lsvita-opc040084 #container > main > #common-home.container,
  body.lsvita-opc040084 #container > main > #product-category.container,
  body.lsvita-opc040084 #container > main > #product-info.container,
  body.lsvita-opc040084 #container > main > .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ========================================================================== */
/* LS Vita v70 - restore ORIGINAL desktop Bootstrap width only                 */
/* ========================================================================== */
/*
 * v69 intentionally unified the outer alignment, but its final >=768px rule
 * also let desktop page shells expand to the full outer #container width.
 * v70 limits ONLY desktop widths back to the original Bootstrap container
 * sizes while leaving phone/tablet/landscape behaviour from v69 untouched.
 *
 * Bootstrap/OpenCart desktop widths:
 *   1200-1399px viewport -> 1140px shell
 *   >=1400px viewport     -> 1320px shell
 */

@media (min-width: 1200px) and (max-width: 1399.98px) {
  body.lsvita-opc040084 #top > .container,
  body.lsvita-opc040084 header > .container,
  body.lsvita-opc040084 #container > main > .lsvita-menu-shell,
  body.lsvita-opc040084 #container > main > #common-home.container,
  body.lsvita-opc040084 #container > main > #product-category.container,
  body.lsvita-opc040084 #container > main > #product-info.container,
  body.lsvita-opc040084 #container > main > .container,
  body.lsvita-opc040084 .lsvita-legacy-footer .lsvita-footer-inner,
  body.lsvita-opc040084 .lsvita-legacy-footer .lsvita-footer-bottom-inner {
    width: 100% !important;
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 1400px) {
  body.lsvita-opc040084 #top > .container,
  body.lsvita-opc040084 header > .container,
  body.lsvita-opc040084 #container > main > .lsvita-menu-shell,
  body.lsvita-opc040084 #container > main > #common-home.container,
  body.lsvita-opc040084 #container > main > #product-category.container,
  body.lsvita-opc040084 #container > main > #product-info.container,
  body.lsvita-opc040084 #container > main > .container,
  body.lsvita-opc040084 .lsvita-legacy-footer .lsvita-footer-inner,
  body.lsvita-opc040084 .lsvita-legacy-footer .lsvita-footer-bottom-inner {
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* Keep the green menu / grey breadcrumb / page row filling the restored shell,
   not the browser viewport. */
@media (min-width: 1200px) {
  body.lsvita-opc040084 #container > main > .lsvita-menu-shell > #menu,
  body.lsvita-opc040084 #container > main > .lsvita-menu-shell > nav#menu,
  body.lsvita-opc040084 #container > main > .container > .breadcrumb,
  body.lsvita-opc040084 #container > main > #product-category.container > .breadcrumb,
  body.lsvita-opc040084 #container > main > #product-info.container > .breadcrumb,
  body.lsvita-opc040084 #container > main > .container > .row,
  body.lsvita-opc040084 #container > main > #common-home.container > .row,
  body.lsvita-opc040084 #container > main > #product-category.container > .row,
  body.lsvita-opc040084 #container > main > #product-info.container > .row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ========================================================================== */
/* LS Vita v71 - desktop content below breadcrumb aligns with header shell     */
/* ========================================================================== */
/*
 * v70 restored the preferred desktop shell width, but Bootstrap column
 * gutters can still leave the first and last column 12px inside that shell.
 * This makes the area BELOW the grey breadcrumb look narrower even though the
 * breadcrumb itself is correctly aligned.  Keep the normal gap BETWEEN
 * columns, but remove only the two OUTER gutters on desktop.
 */
@media (min-width: 1200px) {
  /* Keep the primary rows exactly on the same shell as header/menu/breadcrumb. */
  body.lsvita-opc040084 #container > main > .container > .row,
  body.lsvita-opc040084 #container > main > #common-home.container > .row,
  body.lsvita-opc040084 #container > main > #product-category.container > .row,
  body.lsvita-opc040084 #container > main > #product-info.container > .row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Remove only the OUTER Bootstrap gutter. Interior column spacing remains. */
  body.lsvita-opc040084 #container > main > .container > .row > :first-child,
  body.lsvita-opc040084 #container > main > #common-home.container > .row > :first-child,
  body.lsvita-opc040084 #container > main > #product-category.container > .row > :first-child,
  body.lsvita-opc040084 #container > main > #product-info.container > .row > :first-child {
    padding-left: 0 !important;
  }

  body.lsvita-opc040084 #container > main > .container > .row > :last-child,
  body.lsvita-opc040084 #container > main > #common-home.container > .row > :last-child,
  body.lsvita-opc040084 #container > main > #product-category.container > .row > :last-child,
  body.lsvita-opc040084 #container > main > #product-info.container > .row > :last-child {
    padding-right: 0 !important;
  }

  /* A full-width #content is both first and last child: remove both sides. */
  body.lsvita-opc040084 #container > main > .container > .row > #content:only-child,
  body.lsvita-opc040084 #product-category > .row > #content:only-child,
  body.lsvita-opc040084 #product-info > .row > #content:only-child {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Product detail's inner image/info row: same outer line, normal center gap. */
  body.lsvita-opc040084 #product-info #content > .row.mb-3 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.lsvita-opc040084 #product-info #content > .row.mb-3 > :first-child {
    padding-left: 0 !important;
  }

  body.lsvita-opc040084 #product-info #content > .row.mb-3 > :last-child {
    padding-right: 0 !important;
  }
}


/* ========================================================================== */
/* LS Vita v82 - left sidebar title typography only                           */
/* ========================================================================== */
/*
 * Keep the existing title backgrounds/layout exactly as-is.
 * Only normalize text inside left-column title blocks so 常見問答 / 商店訊息
 * use the same Marcellus 15px regular weight as 商品目錄.
 */
body.lsvita-opc040084 #column-left .lsvita-category-heading,
body.lsvita-opc040084 #column-left .lsvita-category-heading > strong,
body.lsvita-opc040084 #column-left .lsvita-category-heading > b,
body.lsvita-opc040084 #column-left .lsvita-category-heading > a,
body.lsvita-opc040084 #column-left .lsvita-category-heading > h1,
body.lsvita-opc040084 #column-left .lsvita-category-heading > h2,
body.lsvita-opc040084 #column-left .lsvita-category-heading > h3,
body.lsvita-opc040084 #column-left .lsvita-category-heading > h4,
body.lsvita-opc040084 #column-left .lsvita-category-heading > h5,
body.lsvita-opc040084 #column-left .lsvita-category-heading > h6,
body.lsvita-opc040084 #column-left .lsvita-category-heading > span:not(.fa):not(.fas):not(.far):not(.fab) {
  font-family: 'Marcellus', Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: var(--opc040084-orange) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* ========================================================================== */
/* LS Vita v83 - force all LEFT sidebar block-title text to match 商品目錄      */
/* ========================================================================== */
/*
 * v82 only matched .lsvita-category-heading and direct children. Some of the
 * left-column legacy/custom blocks wrap their title text more deeply or use
 * .box-heading / .card-header.  This rule changes typography ONLY; no size,
 * box, background, border, margin, padding, or product-card layout is touched.
 */
body.lsvita-opc040084 #column-left .lsvita-category-heading,
body.lsvita-opc040084 #column-left .box-heading,
body.lsvita-opc040084 #column-left .title_inner_block > .box-heading,
body.lsvita-opc040084 #column-left .card-header,
body.lsvita-opc040084 #column-left .lsvita-sidebar-heading,
body.lsvita-opc040084 #column-left .lsvita-faq-heading,
body.lsvita-opc040084 #column-left .lsvita-information-heading,
body.lsvita-opc040084 #column-left .box > h2:first-child,
body.lsvita-opc040084 #column-left .box > h3:first-child,
body.lsvita-opc040084 #column-left .sidebar > h2:first-child,
body.lsvita-opc040084 #column-left .sidebar > h3:first-child {
  font-family: 'Marcellus', Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Legacy/custom HTML sometimes nests <span><strong>...</strong></span> inside
   the title. Force every text-bearing descendant to inherit the exact same
   regular font while leaving Font Awesome icon elements alone. */
body.lsvita-opc040084 #column-left .lsvita-category-heading span:not([class*="fa-"]),
body.lsvita-opc040084 #column-left .lsvita-category-heading strong,
body.lsvita-opc040084 #column-left .lsvita-category-heading b,
body.lsvita-opc040084 #column-left .box-heading span:not([class*="fa-"]),
body.lsvita-opc040084 #column-left .box-heading strong,
body.lsvita-opc040084 #column-left .box-heading b,
body.lsvita-opc040084 #column-left .title_inner_block > .box-heading span:not([class*="fa-"]),
body.lsvita-opc040084 #column-left .title_inner_block > .box-heading strong,
body.lsvita-opc040084 #column-left .title_inner_block > .box-heading b,
body.lsvita-opc040084 #column-left .card-header span:not([class*="fa-"]),
body.lsvita-opc040084 #column-left .card-header strong,
body.lsvita-opc040084 #column-left .card-header b,
body.lsvita-opc040084 #column-left .lsvita-sidebar-heading span:not([class*="fa-"]),
body.lsvita-opc040084 #column-left .lsvita-sidebar-heading strong,
body.lsvita-opc040084 #column-left .lsvita-sidebar-heading b,
body.lsvita-opc040084 #column-left .lsvita-faq-heading span:not([class*="fa-"]),
body.lsvita-opc040084 #column-left .lsvita-faq-heading strong,
body.lsvita-opc040084 #column-left .lsvita-faq-heading b,
body.lsvita-opc040084 #column-left .lsvita-information-heading span:not([class*="fa-"]),
body.lsvita-opc040084 #column-left .lsvita-information-heading strong,
body.lsvita-opc040084 #column-left .lsvita-information-heading b {
  font-family: 'Marcellus', Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* ========================================================================== */
/* LS Vita v84 - compact category product cards                               */
/* ========================================================================== */
/* Keep the current 3-column desktop layout, but stop long product names and
   descriptions from forcing every card into an excessively tall box. */
body.lsvita-opc040084 #product-category .product-thumb {
  min-height: 0 !important;
}

body.lsvita-opc040084 #product-category .product-thumb .description h4,
body.lsvita-opc040084 #product-category .product-thumb .description h4 a {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
  overflow: hidden !important;
  max-height: calc(1.35em * 4) !important;
}

body.lsvita-opc040084 #product-category .product-thumb .description > p {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
  overflow: hidden !important;
  max-height: calc(1.45em * 4) !important;
  line-height: 1.45 !important;
  margin-bottom: 8px !important;
}

body.lsvita-opc040084 #product-category .product-thumb .description {
  padding-bottom: 8px !important;
}

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

/* ========================================================================== */
/* LS Vita v85 - mobile product option readability                            */
/* ========================================================================== */
/* Enlarge only the option/accessory choices on portrait/mobile product pages. */
@media (max-width: 767.98px) {
  body.lsvita-opc040084 #product-info #product label:not(.btn),
  body.lsvita-opc040084 #product-info #form-product label:not(.btn),
  body.lsvita-opc040084 #product-info .option label,
  body.lsvita-opc040084 #product-info .option-image label,
  body.lsvita-opc040084 #product-info .form-label,
  body.lsvita-opc040084 #product-info .form-check-label,
  body.lsvita-opc040084 #product-info [id^="option-"] label,
  body.lsvita-opc040084 #product-info [id^="input-option-"] {
    font-size: 17px !important;
    line-height: 1.45 !important;
  }

  body.lsvita-opc040084 #product-info #product select,
  body.lsvita-opc040084 #product-info #form-product select,
  body.lsvita-opc040084 #product-info #product .form-select,
  body.lsvita-opc040084 #product-info #form-product .form-select {
    font-size: 17px !important;
    line-height: 1.4 !important;
    min-height: 44px !important;
  }
}

/* ========================================================================== */
/* LS Vita v86 - mobile option text + visual required-option callout           */
/* ========================================================================== */
/* Mobile only: make the choices below 選項及配件 easier to read/tap. */
@media (max-width: 767.98px) {
  body.lsvita-opc040084 #product-info #product .option,
  body.lsvita-opc040084 #product-info #form-product .option,
  body.lsvita-opc040084 #product-info #product [id^="option-"],
  body.lsvita-opc040084 #product-info #form-product [id^="option-"] {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  body.lsvita-opc040084 #product-info #product .option label,
  body.lsvita-opc040084 #product-info #form-product .option label,
  body.lsvita-opc040084 #product-info #product .option b,
  body.lsvita-opc040084 #product-info #form-product .option b,
  body.lsvita-opc040084 #product-info #product [id^="option-"] label,
  body.lsvita-opc040084 #product-info #form-product [id^="option-"] label,
  body.lsvita-opc040084 #product-info #product [id^="option-"] b,
  body.lsvita-opc040084 #product-info #form-product [id^="option-"] b,
  body.lsvita-opc040084 #product-info #product .form-check-label,
  body.lsvita-opc040084 #product-info #form-product .form-check-label {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  body.lsvita-opc040084 #product-info #product select,
  body.lsvita-opc040084 #product-info #form-product select,
  body.lsvita-opc040084 #product-info #product .form-select,
  body.lsvita-opc040084 #product-info #form-product .form-select {
    font-size: 17px !important;
    line-height: 1.4 !important;
    min-height: 46px !important;
  }
}

/* The callout is injected only when Add to Cart is pressed while a required
   option is still missing. It points to the first missing option group. */
.lsvita-option-popup {
  --lsvita-option-arrow-left: 50%;
  position: absolute;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: min(330px, calc(100vw - 20px));
  padding: 10px 14px;
  box-sizing: border-box;
  background: #fffaf2;
  border: 2px solid #f28c28;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  color: #d96f00;
  font-family: 'Marcellus', Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  pointer-events: none;
}

.lsvita-option-popup::before,
.lsvita-option-popup::after {
  content: '';
  position: absolute;
  left: var(--lsvita-option-arrow-left);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
}

/* Default: popup sits above the option and arrow points downward. */
.lsvita-option-popup::before {
  bottom: -11px;
  border-top: 11px solid #f28c28;
}
.lsvita-option-popup::after {
  bottom: -8px;
  border-top: 9px solid #fffaf2;
}

/* When there is no room above, popup sits below and arrow points upward. */
.lsvita-option-popup.lsvita-option-popup-below::before {
  top: -11px;
  bottom: auto;
  border-top: 0;
  border-bottom: 11px solid #f28c28;
}
.lsvita-option-popup.lsvita-option-popup-below::after {
  top: -8px;
  bottom: auto;
  border-top: 0;
  border-bottom: 9px solid #fffaf2;
}

.lsvita-option-popup-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f28c28;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.lsvita-option-popup-target {
  position: relative;
  outline: 2px solid rgba(242, 140, 40, 0.75);
  outline-offset: 5px;
  border-radius: 4px;
}

@media (max-width: 767.98px) {
  .lsvita-option-popup {
    max-width: calc(100vw - 24px);
    padding: 11px 13px;
    font-size: 17px;
  }
}

/* ========================================================================== */
/* LS Vita v87 - force mobile product option/accessory text readability       */
/* ========================================================================== */
@media (max-width: 767.98px) {
  body.lsvita-opc040084 .product-info .options,
  body.lsvita-opc040084 .product-info .option,
  body.lsvita-opc040084 .product-info .option label,
  body.lsvita-opc040084 .product-info .option b,
  body.lsvita-opc040084 .product-info .option span:not(.required),
  body.lsvita-opc040084 .product-info .option td,
  body.lsvita-opc040084 .product-info .option-image,
  body.lsvita-opc040084 .product-info .option-image label,
  body.lsvita-opc040084 #product .form-label,
  body.lsvita-opc040084 #product .form-check-label,
  body.lsvita-opc040084 #product .form-check,
  body.lsvita-opc040084 #product select,
  body.lsvita-opc040084 #product-info .form-label,
  body.lsvita-opc040084 #product-info .form-check-label,
  body.lsvita-opc040084 #product-info .form-check,
  body.lsvita-opc040084 #product-info select {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }

  body.lsvita-opc040084 .product-info .options > b,
  body.lsvita-opc040084 .product-info .options > strong,
  body.lsvita-opc040084 .product-info .option > b,
  body.lsvita-opc040084 .product-info .option > strong,
  body.lsvita-opc040084 #product .form-label,
  body.lsvita-opc040084 #product-info .form-label {
    font-size: 19px !important;
    line-height: 1.45 !important;
  }

  body.lsvita-opc040084 .product-info .required,
  body.lsvita-opc040084 #product .text-danger,
  body.lsvita-opc040084 #product-info .text-danger {
    font-size: 18px !important;
  }
}

/* ========================================================================== */
/* LS Vita v88 - tablet/desktop product option/accessory text readability     */
/* ========================================================================== */
@media (min-width: 768px) {
  body.lsvita-opc040084 .product-info .options,
  body.lsvita-opc040084 .product-info .option,
  body.lsvita-opc040084 .product-info .option label,
  body.lsvita-opc040084 .product-info .option b,
  body.lsvita-opc040084 .product-info .option span:not(.required),
  body.lsvita-opc040084 .product-info .option td,
  body.lsvita-opc040084 .product-info .option-image,
  body.lsvita-opc040084 .product-info .option-image label,
  body.lsvita-opc040084 #product .form-label,
  body.lsvita-opc040084 #product .form-check-label,
  body.lsvita-opc040084 #product .form-check,
  body.lsvita-opc040084 #product select,
  body.lsvita-opc040084 #product-info .form-label,
  body.lsvita-opc040084 #product-info .form-check-label,
  body.lsvita-opc040084 #product-info .form-check,
  body.lsvita-opc040084 #product-info select {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }

  body.lsvita-opc040084 .product-info .options > b,
  body.lsvita-opc040084 .product-info .options > strong,
  body.lsvita-opc040084 .product-info .option > b,
  body.lsvita-opc040084 .product-info .option > strong,
  body.lsvita-opc040084 #product .form-label,
  body.lsvita-opc040084 #product-info .form-label {
    font-size: 19px !important;
    line-height: 1.45 !important;
  }

  body.lsvita-opc040084 .product-info .required,
  body.lsvita-opc040084 #product .text-danger,
  body.lsvita-opc040084 #product-info .text-danger {
    font-size: 18px !important;
  }
}

/* ========================================================================== */
/* LS Vita v89 - tune tablet/desktop product option text size                 */
/* ========================================================================== */
@media (min-width: 768px) {
  body.lsvita-opc040084 .product-info .options,
  body.lsvita-opc040084 .product-info .option,
  body.lsvita-opc040084 .product-info .option label,
  body.lsvita-opc040084 .product-info .option b,
  body.lsvita-opc040084 .product-info .option span:not(.required),
  body.lsvita-opc040084 .product-info .option td,
  body.lsvita-opc040084 .product-info .option-image,
  body.lsvita-opc040084 .product-info .option-image label,
  body.lsvita-opc040084 #product .form-check-label,
  body.lsvita-opc040084 #product .form-check,
  body.lsvita-opc040084 #product select,
  body.lsvita-opc040084 #product-info .form-check-label,
  body.lsvita-opc040084 #product-info .form-check,
  body.lsvita-opc040084 #product-info select {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  body.lsvita-opc040084 .product-info .options > b,
  body.lsvita-opc040084 .product-info .options > strong,
  body.lsvita-opc040084 .product-info .option > b,
  body.lsvita-opc040084 .product-info .option > strong,
  body.lsvita-opc040084 #product .form-label,
  body.lsvita-opc040084 #product-info .form-label {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  body.lsvita-opc040084 .product-info .required,
  body.lsvita-opc040084 #product .text-danger,
  body.lsvita-opc040084 #product-info .text-danger {
    font-size: 14px !important;
  }
}