@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Manrope:wght@400;500;600;700;800&display=swap');

/* =========================================================================
   DIY HOTSPOT — Modern Redesign
   Loaded last (zzz_ prefix) so its rules override stylesheet.css,
   responsive_*.css, index_home.css, stylesheet_colors.css.
   ========================================================================= */

:root {
  --bg: #F7F6F2;
  --surface: #FFFFFF;
  --surface-warm: #FBF8F2;
  --ink: #161616;
  --ink-soft: #5B5B5B;
  --ink-mute: #8A8A8A;
  --brand: #FF5A3C;
  --brand-deep: #D63E22;
  --brand-tint: #FFEFEA;
  --mint: #0F9D7A;
  --mint-tint: #E2F6EF;
  --line: #E8E4DB;
  --line-soft: #F0ECE3;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -12px rgba(22, 22, 22, .12);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .04), 0 30px 60px -30px rgba(22, 22, 22, .18);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;
  --font-display: 'Bricolage Grotesque', ui-serif, Georgia, serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --container: 1320px;
}

/* Base ------------------------------------------------------------------- */
html, body {
  background: var(--bg) !important;
  color: var(--ink);
  font-family: var(--font-body) !important;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin-top: 18px;
}

a {
  color: var(--ink);
  text-decoration: none;
  transition: color .18s ease;
}

a:hover {
  color: var(--brand);
}

img {
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--brand);
  color: #fff;
}

/* Utility ---------------------------------------------------------------- */
.mr-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* =========================================================================
   ANNOUNCEMENT STRIP (replaces marquee)
   ========================================================================= */
.announce-strip {
  position: relative;
  height: 36px;
  background: linear-gradient(95deg, #161616 0%, #2a2a2a 50%, #161616 100%);
  color: #f4ede2;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* Hidden entirely on mobile/tablet */
@media (max-width: 720px) {
  .announce-strip {
    display: none !important;
  }
}

.announce-strip::before,
.announce-strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 2;
}

.announce-strip::before {
  left: 0;
  background: linear-gradient(90deg, #161616, transparent);
}

.announce-strip::after {
  right: 0;
  background: linear-gradient(270deg, #161616, transparent);
}

.announce-strip__msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: announceCycle 18s infinite;
}

.announce-strip__msg:nth-child(1) {
  animation-delay: 0s;
}

.announce-strip__msg:nth-child(2) {
  animation-delay: 6s;
}

.announce-strip__msg:nth-child(3) {
  animation-delay: 12s;
}

@keyframes announceCycle {
  0%, 2% {
    opacity: 0;
    transform: translateY(8px);
  }

  6%, 28% {
    opacity: 1;
    transform: translateY(0);
  }

  32%, 100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* =========================================================================
   HEADER
   ========================================================================= */
#headerWrapper {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm);
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100% !important;
  z-index: 100;
}

/* Override the legacy height:90px on #mainWrapper that breaks sticky/fixed
   layouts and compensate for the now-fixed header by pushing body content
   down. The default header height (slim nav) is ~64px; the mobile bar is
   ~60px; on first paint browsers measure the actual height via this var. */
:root {
  --header-h: 64px;
}

@media (max-width: 720px) {
  :root {
    --header-h: 60px;
  }
}

#mainWrapper {
  height: 60px;

}


#navMainWrapper {
  background: var(--surface) !important;
  max-width: var(--container);
  margin: 0 auto !important;
  padding: 14px 24px !important;
  border: 0 !important;
}

#navMain {
  background: transparent !important;
  display: flex;
  align-items: center;
  gap: 24px;
}

#navMain>div {
  display: flex;
  align-items: center;
  gap: 18px;
}

#navMain>div:first-child {
  flex: 0 0 auto;
}

#navMain>div:last-child {
  flex: 1 1 auto;
  justify-content: flex-end;
}

/* Logo */
.dm-logo a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.dm-logo img {
  height: 44px !important;
  width: auto;
}

/* Search bar — pill */
#navMainSearch {
  flex: 1 1 auto;
  max-width: 560px;
  margin-right: 14px !important;
}

#navMainSearch form,
#navMainSearch .search_in_field {
  display: flex !important;
  align-items: center;
  background: var(--surface-warm) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  padding: 6px 8px 6px 18px !important;
  height: 44px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: none !important;
}

#navMainSearch form:focus-within,
#navMainSearch .search_in_field:focus-within {
  background: #fff !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px var(--brand-tint) !important;
}

#navMainSearch input[type="text"],
#navMainSearch input.behavior,
#navMainSearch input[type="text"].search-bar-input {
  flex: 1 1 auto !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  font: 500 13.5px/1.4 var(--font-body) !important;
  color: var(--ink) !important;
  padding: 0 20px !important;
  height: 38px !important;
}

#navMainSearch input::placeholder {
  color: var(--ink-mute);
}

#navMainSearch button,
#navMainSearch input[type="submit"] {
  flex: 0 0 auto;
  background: var(--brand) !important;
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  color: #fff !important;
  font: 600 13px/1 var(--font-body) !important;
  letter-spacing: .02em !important;
  padding: 0 18px !important;
  height: 32px !important;
  cursor: pointer;
  transition: background .18s ease;
  box-shadow: none !important;
}

#navMainSearch button:hover,
#navMainSearch input[type="submit"]:hover {
  background: var(--brand-deep) !important;
}

/* Profile / login button */
.profileBtn {
  background: var(--surface-warm) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  padding: 6px 14px 6px 6px !important;
  height: 44px;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.profileBtn:hover {
  border-color: var(--brand);
  background: #fff;
}

.profileBtn .avatar {
  width: 32px !important;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.profileBtn .profileContent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.profileBtn .customerName {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}

.profileBtn .discountWallet {
  font-size: 11px;
  color: var(--mint);
  font-weight: 600;
}

.profileBtn .discountWallet i {
  margin-right: 3px;
}

.topBarNav .profileBtn {
  width: 44px;
  padding: 0 !important;
  justify-content: center;
}

.topBarNav .profileBtn i {
  color: var(--ink);
  font-size: 16px;
}

/* Cart button */
.shoppingCartDropDown {
  position: relative;
  margin-left: 6px;
}

.shoppingCartDropDownBtn {
  background: var(--ink) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  width: 44px;
  height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.shoppingCartDropDownBtn:hover {
  background: var(--brand);
  transform: translateY(-1px);
}

.shoppingCartDropDownBtn i {
  font-size: 16px;
}

.shopping-cart-badge.badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  background: var(--brand) !important;
  color: #fff !important;
  border: 2px solid #fff;
  font: 700 11px/1 var(--font-body) !important;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Dropdown content surfaces */
.dropdown-content {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-lg) !important;
  margin-top: 8px;
}

/* ----- Profile dropdown menu ------------------------------------------ */
#ProfileDropDownContent {
  min-width: 240px;
  padding: 8px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
}

/* "Hi, Name" greeting (mobile rendering only) */
#ProfileDropDownContent h2.wm {
  margin: 0 0 6px !important;
  padding: 14px 14px 12px !important;
  font: 700 15px/1.25 var(--font-display) !important;
  color: var(--ink) !important;
  letter-spacing: -.005em;
  background: var(--surface-warm);
  border-radius: calc(var(--r-md) - 2px);
  border: 0 !important;
  text-align: left;
  position: relative;
  padding-left: 44px !important;
}

#ProfileDropDownContent h2.wm::before {
  content: "\f007";
  /* user icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

/* Each link becomes an icon + label row */
#ProfileDropDownContent a,
#ProfileDropDownContent a:link,
#ProfileDropDownContent a:visited {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 11px 14px !important;
  font: 600 13.5px/1.3 var(--font-body) !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  border-radius: calc(var(--r-md) - 4px);
  background: transparent !important;
  border: 0 !important;
  transition: background .15s ease, color .15s ease, transform .12s ease;
  position: relative;
}

/* Icon glyph via Font Awesome ::before */
#ProfileDropDownContent a::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  width: 20px;
  text-align: center;
  color: var(--ink-mute);
  font-size: 13px;
  flex: 0 0 20px;
  transition: color .15s ease;
}

/* Right-aligned chevron arrow on every menu row */
#ProfileDropDownContent a::after {
  content: "\f105";
  /* chevron-right */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: auto;
  color: var(--ink-mute);
  font-size: 12px;
  transition: color .15s ease, transform .15s ease;
}

#ProfileDropDownContent a:hover::after {
  color: var(--brand);
  transform: translateX(2px);
}

#ProfileDropDownContent a[href*="discount_wallet"]:hover::after {
  color: var(--mint);
}

#ProfileDropDownContent a[href*="logoff"]::after,
#ProfileDropDownContent a[href*="logoff"]:hover::after {
  color: #C8312B;
}

/* Map icons to known account links by href fragment */
#ProfileDropDownContent a[href*="main_page=account"]:not([href*="account_history"])::before {
  content: "\f007";
  /* user */
}

#ProfileDropDownContent a[href*="account_history"]::before {
  content: "\f291";
  /* shopping-bag */
}

#ProfileDropDownContent a[href*="referralCode"]::before {
  content: "\f1e0";
  /* share-alt */
}

#ProfileDropDownContent a[href*="discount_wallet"]::before {
  content: "\f555";
  /* wallet */
  color: var(--mint);
}

#ProfileDropDownContent a[href*="logoff"]::before {
  content: "\f2f5";
  /* sign-out-alt */
  color: #C8312B;
}

/* Hover/active states */
#ProfileDropDownContent a:hover {
  background: var(--brand-tint) !important;
  color: var(--brand-deep) !important;
}

#ProfileDropDownContent a:hover::before {
  color: var(--brand) !important;
}

/* Wallet keeps mint accent on hover */
#ProfileDropDownContent a[href*="discount_wallet"]:hover {
  background: var(--mint-tint) !important;
  color: var(--mint) !important;
}

#ProfileDropDownContent a[href*="discount_wallet"]:hover::before {
  color: var(--mint) !important;
}

/* Log Out — separated by a hairline; red on hover */
#ProfileDropDownContent a[href*="logoff"] {
  margin-top: 6px !important;
  border-top: 1px solid var(--line-soft) !important;
  border-radius: 0 0 calc(var(--r-md) - 4px) calc(var(--r-md) - 4px) !important;
  padding-top: 13px !important;
  color: #C8312B !important;
}

#ProfileDropDownContent a[href*="logoff"]:hover {
  background: rgba(200, 49, 43, .08) !important;
  color: #C8312B !important;
}

#ProfileDropDownContent a[href*="logoff"]:hover::before {
  color: #C8312B !important;
}

/* Position: anchor right under the profile button on desktop */
.profileDropDown #ProfileDropDownContent {
  right: 0;
  left: auto;
  top: calc(100% + 6px);
}

/* Mobile dropdown — full-width with tighter min-width if cramped */
@media (max-width: 720px) {
  #ProfileDropDownContent {
    min-width: 220px;
  }

  #ProfileDropDownContent h2.wm {
    font-size: 14px !important;
  }
}

/* =========================================================================
   MINI-CART DROPDOWN — #shoppingCartDropDownContent
   Skin the legacy markup (table rows, voucher input, totals, GIF buttons)
   into a clean modern panel. Existing PHP/JS in tpl_header.php drives it.
   ========================================================================= */

#shoppingCartDropDownContent {
  width: 380px !important;
  max-width: 92vw;
  max-height: 70vh;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 0 !important;
  margin-top: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

#shoppingCartDropDownContent::-webkit-scrollbar {
  width: 6px;
}

#shoppingCartDropDownContent::-webkit-scrollbar-track {
  background: transparent;
}

#shoppingCartDropDownContent::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}

#shoppingCartDropDownContent::-webkit-scrollbar-thumb:hover {
  background: var(--brand);
}

/* Header row "Your Cart  |  View in full page →" */
#shoppingCartDropDownContent>.flex-space-between {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px !important;
  background: var(--surface-warm) !important;
  border-bottom: 1px solid var(--line) !important;
  margin: 0 !important;
}

#shoppingCartDropDownContent>.flex-space-between>div:first-child::before {
  content: "Your Cart";
  font: 700 14px/1.2 var(--font-display);
  color: var(--ink);
  letter-spacing: -.005em;
}

#shoppingCartDropDownContent>.flex-space-between>a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 12px/1 var(--font-body) !important;
  color: var(--brand) !important;
  text-decoration: none !important;
  background: transparent !important;
}

#shoppingCartDropDownContent>.flex-space-between>a label {
  cursor: pointer;
  margin: 0 !important;
}

#shoppingCartDropDownContent>.flex-space-between>a i {
  font-size: 11px;
}

/* Products list — scrollable area */
#shoppingCartDropDownContent .cartProductListTable {
  max-height: 360px;
  overflow-y: auto;
  background: transparent !important;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

#shoppingCartDropDownContent .cartMainProductList,
#shoppingCartDropDownContent .cartProductList {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}

#shoppingCartDropDownContent .cartMainProductList tr,
#shoppingCartDropDownContent .cartProductList tr {
  background: transparent !important;
}

#shoppingCartDropDownContent .cartMainProductList tr:not(.emptycart) {
  border-bottom: 1px solid var(--line-soft);
}

#shoppingCartDropDownContent .cartMainProductList td,
#shoppingCartDropDownContent .cartProductList td {
  border: 0 !important;
  background: transparent !important;
  padding: 12px !important;
  vertical-align: top !important;
}

#shoppingCartDropDownContent .cartProductImage {
  width: 76px !important;
  padding-right: 0 !important;
}

#shoppingCartDropDownContent .cartProductImage img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 4px;
  display: block;
}

#shoppingCartDropDownContent .cartProductDetails {
  position: relative;
  padding: 12px !important;
}

#shoppingCartDropDownContent .cartProductName {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  font: 600 13px/1.35 var(--font-body) !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  margin: 0 38px 4px 0 !important;
  /* clear the absolutely-positioned trash button */
}

#shoppingCartDropDownContent .cartProductName:hover {
  color: var(--brand) !important;
}

#shoppingCartDropDownContent .cartProductOptionWrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin: 4px 0 6px !important;
}

#shoppingCartDropDownContent .cartProductOption {
  display: inline-block !important;
  padding: 4px 10px !important;
  margin: 0 !important;
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  font: 500 11.5px/1.3 var(--font-body) !important;
  color: var(--ink-soft) !important;
  white-space: nowrap !important;
}

#shoppingCartDropDownContent .cartProductOption:empty {
  display: none !important;
}

#shoppingCartDropDownContent .cartProductOption br {
  display: none !important;
}

#shoppingCartDropDownContent .cartProductPrice {
  font: 700 14px/1 var(--font-body) !important;
  color: var(--brand) !important;
  margin: 4px 0 8px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

#shoppingCartDropDownContent .cartProductPrice .nPrice {
  color: var(--ink-mute) !important;
  font-weight: 500;
  font-size: 11px;
}

/* Quantity stepper */
#shoppingCartDropDownContent .cartProductQty1 {
  display: inline-flex !important;
  align-items: center;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-warm);
  overflow: hidden;
  height: 30px;
}

#shoppingCartDropDownContent .cartProductQty1 .cart-qty-minus,
#shoppingCartDropDownContent .cartProductQty1 .cart-qty-plus {
  width: 26px !important;
  height: 28px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ink-soft) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  transition: color .15s ease, background .15s ease;
}

#shoppingCartDropDownContent .cartProductQty1 .cart-qty-minus:hover,
#shoppingCartDropDownContent .cartProductQty1 .cart-qty-plus:hover {
  color: var(--brand) !important;
  background: var(--brand-tint) !important;
}

#shoppingCartDropDownContent .cartProductQty1 .cartProductQty,
#shoppingCartDropDownContent .cartProductQty1 input[type="number"] {
  width: 36px !important;
  height: 28px !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center;
  font: 600 12px/1 var(--font-body) !important;
  color: var(--ink) !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
  -moz-appearance: textfield;
}

#shoppingCartDropDownContent .cartProductQty1 input::-webkit-outer-spin-button,
#shoppingCartDropDownContent .cartProductQty1 input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#shoppingCartDropDownContent .cartProductQty1 span {
  font: 600 12px/1 var(--font-body) !important;
  color: var(--ink) !important;
  padding: 0 10px;
}

/* Delete (trash) button — top right of each row */
#shoppingCartDropDownContent .cartProductDetails .deleteBtn {
  position: absolute;
  top: 12px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  background: var(--surface-warm);
  color: var(--ink-mute);
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

#shoppingCartDropDownContent .cartProductDetails .deleteBtn:hover {
  background: rgba(200, 49, 43, .08);
  color: #C8312B;
  border-color: #C8312B;
}

#shoppingCartDropDownContent .remind-text {
  font: 500 11px/1.3 var(--font-body) !important;
  color: var(--brand-deep) !important;
  background: var(--brand-tint);
  padding: 3px 8px;
  border-radius: 6px;
  margin: 6px 0 0;
  display: inline-block;
}

/* Empty cart row */
#shoppingCartDropDownContent .emptycart {
  display: none !important;
}

#shoppingCartDropDownContent .emptycart.show {
  display: table-row !important;
}

#shoppingCartDropDownContent .emptycart td {
  text-align: center !important;
  padding: 32px 20px !important;
  color: var(--ink-mute) !important;
  font: 500 13.5px/1.4 var(--font-body) !important;
}

#shoppingCartDropDownContent .emptycart td::before {
  content: "\f07a";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: block;
  font-size: 32px;
  color: var(--brand);
  opacity: .5;
  margin-bottom: 10px;
}

/* Add-on deals strip inside the dropdown */
#shoppingCartDropDownContent .addOnContents {
  display: none;
  background: transparent;
  border-top: 1px solid var(--line);
  padding: 0 12px 10px;
}

#shoppingCartDropDownContent .addOnContents.show {
  display: block;
}

/* dark full-bleed header bar (matches the Add On Deals dialog).
   Selector mirrors stylesheet.css:815 specificity (id + 2 classes) so the
   dark background wins over its #ffecba cream band. */
#shoppingCartDropDownContent .addOnContents .addOnTitle {
  font: 800 11px/1 var(--font-body) !important;
  color: #fff !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left !important;
  margin: 0 -12px 10px !important;
  padding: 10px 12px 10px 16px !important;
  background: #0a1f44 !important;
  position: relative;
}

#shoppingCartDropDownContent .addOnContents .addOnTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #ffb020;
}

/* kill the grey row-hover the base stylesheet applies to add-on items */
#shoppingCartDropDownContent .cartProductList tr:hover {
  background: transparent !important;
}

/* Refresh banner */
#shoppingCartDropDownContent .alertRefresh {
  display: none;
  background: #FFF6DA !important;
  color: #8E5F00 !important;
  padding: 10px 14px !important;
  font: 500 12.5px/1.4 var(--font-body) !important;
  border-bottom: 1px solid var(--line);
}

#shoppingCartDropDownContent .alertRefresh label {
  margin: 0 !important;
  cursor: default;
}

#shoppingCartDropDownContent .alertRefresh a {
  color: var(--brand) !important;
  font-weight: 700 !important;
}

/* HR between products and checkout area */
#shoppingCartDropDownContent>hr {
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  margin: 0 !important;
  height: 0;
}

/* Checkout / totals area */
#shoppingCartDropDownContent .checkout {
  display: flex !important;
  flex-direction: column;
  padding: 12px 16px 16px;
  gap: 0;
  background: var(--surface);
}

#shoppingCartDropDownContent .checkout>div:first-child {
  display: none;
}

/* Voucher row */
#shoppingCartDropDownContent .voucher {
  display: flex !important;
  gap: 6px;
  margin-bottom: 8px;
}

#shoppingCartDropDownContent .voucher input.voucher_code,
#shoppingCartDropDownContent input.voucher_code {
  flex: 1 1 auto !important;
  background: var(--surface-warm) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  padding: 0 14px !important;
  font: 500 12px/1 var(--font-body) !important;
  color: var(--ink) !important;
  outline: none !important;
  height: 32px !important;
  margin: 0 !important;
}

#shoppingCartDropDownContent .voucher input.voucher_code:focus {
  background: #fff !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-tint);
}

#shoppingCartDropDownContent .voucher .apply_voucher,
#shoppingCartDropDownContent button.apply_voucher {
  background: var(--ink) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  padding: 0 14px !important;
  height: 32px !important;
  font: 600 11.5px/1 var(--font-body) !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease;
}

#shoppingCartDropDownContent .voucher .apply_voucher:hover {
  background: var(--brand) !important;
}

/* Cancel voucher — full-width applied-voucher chip with mint success tint
   and a clearable ✕ on the right. Turns red-tinted on hover. */
#shoppingCartDropDownContent .cancel_voucher {
  font: 600 11.5px/1 var(--font-body) !important;
  color: var(--mint) !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  height: 30px;
  padding: 0 6px 0 12px !important;
  margin: 0 0 6px !important;
  background: var(--mint-tint) !important;
  border: 1px dashed var(--mint);
  border-radius: var(--r-pill);
  letter-spacing: .01em;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

/* Hidden state — must out-specify the display:flex !important above. */
#shoppingCartDropDownContent .cancel_voucher.is-hidden,
#shoppingCartDefault .cancel_voucher.is-hidden,
.cartDetails .cancel_voucher.is-hidden {
  display: none !important;
}

/* Apply-voucher row hides once a voucher is applied (Cancel takes its slot). */
#shoppingCartDropDownContent .voucher.is-hidden,
#shoppingCartDefault .voucher.is-hidden,
.cartDetails .voucher.is-hidden {
  display: none !important;
}

/* voucher code tag shown on the Discount line */
.Discount .vCode {
  font-weight: 700;
  opacity: .85;
}

#shoppingCartDropDownContent .cancel_voucher::before {
  content: "\f02b";
  /* tag icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 10px;
  color: inherit;
  margin-right: -2px;
}

#shoppingCartDropDownContent .cancel_voucher::after {
  content: "\f00d";
  /* close icon — sits in a circular pill on the right */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 9px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 157, 122, .15);
  color: var(--mint);
  margin-left: auto;
  transition: background .18s ease, color .18s ease;
}

#shoppingCartDropDownContent .cancel_voucher:hover {
  color: #C8312B !important;
  background: rgba(200, 49, 43, .08) !important;
  border-color: #C8312B;
  border-style: solid;
}

#shoppingCartDropDownContent .cancel_voucher:hover::after {
  background: #C8312B;
  color: #fff;
}

/* Add-on dialog button */
#shoppingCartDropDownContent .addon {
  text-align: right !important;
  margin: 4px 0 6px;
}

#shoppingCartDropDownContent .add_on_cursor img {
  display: none;
}

#shoppingCartDropDownContent .addOnDialogBtn {
  background: transparent !important;
  border: 1.5px solid var(--brand) !important;
  color: var(--brand) !important;
  border-radius: var(--r-pill) !important;
  padding: 6px 12px !important;
  font: 600 11.5px/1 var(--font-body) !important;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

#shoppingCartDropDownContent .addOnDialogBtn:hover {
  background: var(--brand) !important;
  color: #fff !important;
}

/* Totals lines */
#shoppingCartDropDownContent .cartSubTotalAmount,
#shoppingCartDropDownContent .cartAddOnTotalAmount,
#shoppingCartDropDownContent .Discount,
#shoppingCartDropDownContent .DiscountWallet {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0 !important;
  font: 500 12.5px/1.3 var(--font-body) !important;
  color: var(--ink) !important;
  border-bottom: 1px dashed var(--line-soft);
  position: relative;
  gap: 8px;
}

#shoppingCartDropDownContent .Discount {
  display: none !important;
}

#shoppingCartDropDownContent .Discount.show {
  display: flex !important;
  color: var(--mint) !important;
}

#shoppingCartDropDownContent .Amount {
  font-weight: 700;
  margin-left: auto;
  white-space: nowrap;
}

/* Discount Wallet row has nested layout */
#shoppingCartDropDownContent .DiscountWallet .BtnInfodw {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#shoppingCartDropDownContent .DiscountWallet .BtnInfodw button {
  background: transparent !important;
  border: 0 !important;
  color: var(--ink-mute) !important;
  cursor: pointer;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}

#shoppingCartDropDownContent .DiscountWallet .BtnInfodw button:hover {
  color: var(--brand) !important;
}

#shoppingCartDropDownContent .DiscountWallet>.popup,
#shoppingCartDropDownContent .DiscountWallet .main-overview-popup {
  position: absolute !important;
  bottom: 100%;
  left: 0;
  pointer-events: none;
  z-index: 5;
}

#shoppingCartDropDownContent .cartTotalAmount {
  font: 700 16px/1.3 var(--font-display) !important;
  color: var(--ink) !important;
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0 4px !important;
  margin-top: 6px;
  border-top: 2px solid var(--ink) !important;
}

#shoppingCartDropDownContent .cartTotalAmount .Amount,
#shoppingCartDropDownContent .cartTotalAmount>span:not(.Amount) {
  color: var(--brand) !important;
  font-weight: 700;
}

/* Checkout button */
#shoppingCartDropDownContent .checkoutLink,
#shoppingCartDropDownContent .checkoutbtn {
  display: block !important;
  width: 100%;
  margin-top: 12px;
  text-decoration: none !important;
}

#shoppingCartDropDownContent .checkoutLink button,
#shoppingCartDropDownContent .checkoutbtn button {
  width: 100% !important;
  height: 44px !important;
  background: var(--brand) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  font: 700 13.5px/1 var(--font-body) !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .18s ease, transform .15s ease, box-shadow .18s ease;
  box-shadow: 0 6px 16px -8px rgba(255, 90, 60, .5);
}

#shoppingCartDropDownContent .checkoutLink button:hover,
#shoppingCartDropDownContent .checkoutbtn button:hover {
  background: var(--brand-deep) !important;
  transform: translateY(-1px);
}

#shoppingCartDropDownContent .checkoutLink button[disabled],
#shoppingCartDropDownContent .checkoutbtn button[disabled] {
  background: var(--line) !important;
  color: var(--ink-mute) !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#shoppingCartDropDownContent .checkoutLink.maintainence button,
#shoppingCartDropDownContent .checkoutbtn.maintainence_btn button {
  background: var(--ink-mute) !important;
}

/* Position dropdown — anchored right edge of the cart icon */
.shoppingCartDropDown {
  position: relative;
}

.shoppingCartDropDown #shoppingCartDropDownContent {
  right: 0;
  left: auto;
  top: calc(100% + 6px);
}

/* Mobile compact */
@media (max-width: 720px) {
  #shoppingCartDropDownContent {
    width: 320px !important;
    max-width: 90vw;
  }

  #shoppingCartDropDownContent .cartProductListTable {
    max-height: 280px;
  }

  #shoppingCartDropDownContent .cartProductImage {
    width: 64px !important;
  }

  #shoppingCartDropDownContent .cartProductImage img {
    width: 56px !important;
    height: 56px !important;
  }

  #shoppingCartDropDownContent .cartProductName {
    font-size: 12.5px !important;
  }
}

/* Notice flag (above header) */
.noticeflag.csslfmarquee {
  background: var(--brand-tint) !important;
  color: var(--brand-deep) !important;
  border-bottom: 1px solid var(--line);
}

.noticeflag h1 {
  font: 600 13px/1.6 var(--font-body) !important;
  letter-spacing: .02em;
  margin: 0;
  padding: 6px 0;
}

/* Mobile header bar */
#navMainSearch1 {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm);
  padding: 10px 14px !important;
}

#navMainSearch1 .menu-bars {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--surface-warm);
  border: 1px solid var(--line);
  color: var(--ink);
  margin-right: 10px;
}

#navMainSearch1 .menu-bars:hover {
  background: var(--brand-tint);
  color: var(--brand-deep);
}

#navMainSearch1 .mm-logo img {
  height: 36px;
  width: auto;
}

#navMainSearch1 .SearchBtn {
  width: 38px;
  height: 38px;
  border: 0;
  background: var(--surface-warm);
  border-radius: var(--r-md);
  color: var(--ink);
  cursor: pointer;
}

#navMainSearch1 .v-divider {
  width: 1px;
  height: 22px;
  background: var(--line);
  margin: 0 10px;
}

#navMainSearch1 .discountWallet label {
  color: var(--mint);
  font-weight: 700;
  font-size: 12px;
}

/* Categories tabs (existing module) */
#navCatTabsWrapper, #navCatTabs {
  background: var(--surface) !important;
  border-top: 1px solid var(--line) !important;
}

/* =========================================================================
   PAGE FRAME
   ========================================================================= */
#mainWrapper {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  background: transparent !important;
}

/* Keep the legacy float layout (col* classes use float:left) — just neutralize backgrounds and add a clearfix */
#contentMainWrapper {
  background: transparent !important;
  padding-bottom: 0px;
}

#contentMainWrapper::after {
  content: "";
  display: table;
  clear: both;
}

#contentMainWrapper>div[class*="col"] {
  background: transparent;
}

/* Sidebar widths kept by Zen Cart's col* classes; just style the inner */
.leftBoxContainer,
.rightBoxContainer {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px !important;
  overflow: hidden;
}

.leftBoxHeading,
.rightBoxHeading,
.leftBoxContainer h3.leftBoxHeading,
.rightBoxContainer h3.rightBoxHeading {
  background: var(--surface-warm) !important;
  color: var(--ink) !important;
  font: 600 12px/1 var(--font-body) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  padding: 14px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  margin: 0 !important;
}

.sideBoxContent,
.sideBoxContentItem {
  background: transparent !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--line-soft) !important;
  font-size: 13.5px;
}

.sideBoxContent:last-child,
.sideBoxContentItem:last-child {
  border-bottom: 0 !important;
}

.sideBoxContent a,
.sideBoxContentItem a {
  color: var(--ink-soft);
}

.sideBoxContent a:hover,
.sideBoxContentItem a:hover {
  color: var(--brand);
}

/* =========================================================================
   HOMEPAGE — HERO
   ========================================================================= */
#indexDefault {
  padding: 0;
}

.home-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  column-gap: 48px;
  row-gap: 34px;
  align-items: center;
  background:
    radial-gradient(1100px 500px at 110% -20%, var(--brand-tint) 0%, transparent 60%),
    radial-gradient(700px 400px at -10% 120%, var(--mint-tint) 0%, transparent 60%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 56px 56px 52px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.home-hero::before {
  /* subtle dot grid */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(22, 22, 22, .05) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at top right, transparent 30%, black 80%);
  -webkit-mask-image: radial-gradient(ellipse at top right, transparent 30%, black 80%);
  opacity: .55;
}

.home-hero__text {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(12px);
  animation: heroFadeUp .9s .05s ease-out forwards;
}

.home-hero__text>* {
  opacity: 0;
  transform: translateY(10px);
  animation: heroFadeUp .8s ease-out forwards;
}

.home-hero__text>*:nth-child(1) {
  animation-delay: .15s;
}

.home-hero__text>*:nth-child(2) {
  animation-delay: .25s;
}

.home-hero__text>*:nth-child(3) {
  animation-delay: .35s;
}

.home-hero__text>*:nth-child(4) {
  animation-delay: .45s;
}

.home-hero__text>*:nth-child(5) {
  animation-delay: .55s;
}

.home-hero__text {
  animation: none;
  opacity: 1;
  transform: none;
}

@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 12px/1 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-deep);
  background: var(--brand-tint);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 22px;
}

.home-hero__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--brand);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 90, 60, .18);
}

.home-hero__title {
  font: 700 clamp(36px, 5vw, 60px)/1.04 var(--font-display) !important;
  letter-spacing: -.02em;
  color: var(--ink) !important;
  margin: 0 0 18px !important;
  max-width: 14ch;
}

.home-hero__title em {
  font-style: normal;
  color: var(--brand);
  position: relative;
  white-space: nowrap;
}

.home-hero__title em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.05em;
  height: .14em;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-deep) 100%);
  border-radius: 4px;
  opacity: .35;
}

.home-hero__lead {
  font: 400 17px/1.55 var(--font-body);
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 46ch;
}

.home-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 0;
}

.btn-primary, .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  font: 600 14.5px/1 var(--font-body);
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  border: 1.5px solid transparent;
  white-space: nowrap;
}

.btn-primary {
  background: var(--ink);
  color: #fff !important;
  box-shadow: 0 6px 18px -8px rgba(22, 22, 22, .5);
}

.btn-primary:hover {
  background: var(--brand);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(255, 90, 60, .55);
}

.btn-primary::after {
  content: "→";
  font-size: 18px;
  transition: transform .2s ease;
}

.btn-primary:hover::after {
  transform: translateX(3px);
}

.btn-ghost {
  background: transparent;
  color: var(--ink) !important;
  border-color: var(--ink);
}

.btn-ghost:hover {
  background: var(--ink);
  color: #fff !important;
}

.home-hero__pills {
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 34px;
  margin: 0;
  padding: 28px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.home-hero__pills li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 4px 0;
  font: 600 14px/1.2 var(--font-body);
  color: var(--ink);
  box-shadow: none;
}

.home-hero__pills i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  color: var(--brand);
  font-size: 15px;
}

.home-hero__pills li:nth-child(1) i {
  color: var(--mint);
}

.home-hero__pills li:nth-child(3) i {
  color: #25D366;
}

/* Hero visual — single main image with a small "Free Delivery" corner badge.
   Constrained max dimensions so it never gets unwieldy on wide windows. */
.home-hero__visual {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  /* anchor to the right side of the hero */
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-hero__visual .tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Main image — natural aspect ratio, no crop, no letterbox */
.home-hero__visual .tile--main,
.home-hero__visual a.tile--main {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 26px;
  background: #fff;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.home-hero__visual a.tile--main:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.home-hero__visual .tile--main img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  display: block;
  opacity: 1;
  transition: opacity .35s ease;
}

/* Small "FREE Delivery in Miri" badge — tucks into the bottom-left corner */
.home-hero__visual .tile--badge {
  position: absolute;
  left: -14px;
  bottom: -14px;
  width: 140px;
  height: 140px;
  z-index: 3;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--surface);
  box-shadow: var(--shadow-lg);
  transform: rotate(-4deg);
}

.home-hero__visual .tile--badge .badge-text {
  display: block;
  font-size: 10px;
  font-family: var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 8px;
  opacity: .95;
}

/* Delivery-truck icon inside the badge */
.home-hero__visual .tile--badge i {
  display: block;
  margin-top: 10px;
  font-size: 26px;
  line-height: 1;
  opacity: .95;
}

/* =========================================================================
   HOMEPAGE — TRUST STRIP
   ========================================================================= */
.home-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 36px;
}

.home-trust__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 18px 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  text-decoration: none !important;
  color: inherit;
}

a.home-trust__item {
  cursor: pointer;
}

a.home-trust__item:hover .home-trust__title {
  color: var(--brand);
}

.home-trust__item:hover {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.home-trust__icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-tint);
  color: var(--brand-deep);
  font-size: 18px;
}

.home-trust__item:nth-child(2) .home-trust__icon {
  background: var(--mint-tint);
  color: var(--mint);
}

.home-trust__item:nth-child(3) .home-trust__icon {
  background: #FFF6DA;
  color: #C58A00;
}

.home-trust__item:nth-child(4) .home-trust__icon {
  background: #E9F0FF;
  color: #2A55B7;
}

.home-trust__title {
  font: 700 13.5px/1.2 var(--font-body);
  color: var(--ink);
  margin: 0 0 2px;
}

.home-trust__sub {
  font: 500 12px/1.3 var(--font-body);
  color: var(--ink-mute);
  margin: 0;
}

/* =========================================================================
   HOMEPAGE — SECTION HEADINGS + GRIDS
   ========================================================================= */
.home-section {
  margin-bottom: 36px;
}

.home-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.home-section__title {
  font: 700 clamp(24px, 2.4vw, 32px)/1.1 var(--font-display);
  color: var(--ink);
  margin: 0;
  letter-spacing: -.01em;
  position: relative;
  padding-bottom: 10px;
}

.home-section__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 4px;
  border-radius: 4px;
  background: var(--brand);
}

.home-section__sub {
  font: 500 13px/1.3 var(--font-body);
  color: var(--ink-mute);
  margin: 0;
}

.home-section__more {
  font: 600 13px/1 var(--font-body);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.home-section__more::after {
  content: "→";
  transition: transform .18s ease;
}

.home-section__more:hover::after {
  transform: translateX(3px);
}

/* =========================================================================
   CATEGORIES RAIL (desktop)
   ========================================================================= */
.home-categories {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 22px 22px;
  box-shadow: var(--shadow-sm);
}

.home-categories__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.home-categories__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 8px;
  border-radius: var(--r-md);
  transition: background .18s ease, transform .18s ease;
  text-align: center;
}

.home-categories__item:hover {
  background: var(--surface-warm);
  transform: translateY(-2px);
}

.home-categories__icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--surface-warm) 0%, #fff 100%);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.home-categories__icon img {
  max-width: 56px;
  max-height: 56px;
  object-fit: contain;
}

.home-categories__label {
  font: 600 12px/1.25 var(--font-body);
  color: var(--ink);
  letter-spacing: .01em;
}

/* =========================================================================
   ZEN CART CENTERBOXES — restyled product cards
   ========================================================================= */
#indexDefault .centerBoxWrapper,
.centerBoxWrapper {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 22px 22px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}

.centerBoxHeading,
h2.centerBoxHeading {
  font: 700 clamp(22px, 2.2vw, 28px)/1.15 var(--font-display) !important;
  color: var(--ink) !important;
  letter-spacing: -.01em !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 0 14px !important;
  margin: 0 0 16px !important;
  position: relative;
  text-align: left !important;
}

.centerBoxHeading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 4px;
  border-radius: 4px;
  background: var(--brand);
}

#whatsNewHeading::after {
  background: var(--mint);
}

#specialsHeading::after {
  background: #C58A00;
}

#upcomingProductsHeading::after {
  background: #2A55B7;
}

.centerBoxContents,
.centerBoxContentsFeatured,
.centerBoxContentsSpecials,
.centerBoxContentsNew,
.centerBoxContentsAlsoPurchased,
.centerBoxContentsProductsRecentView,
.specialsListBoxContents {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  padding: 14px !important;
  box-shadow: none !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
}

.centerBoxContents:hover,
.centerBoxContentsFeatured:hover,
.centerBoxContentsSpecials:hover,
.centerBoxContentsNew:hover,
.centerBoxContentsAlsoPurchased:hover,
.centerBoxContentsProductsRecentView:hover,
.specialsListBoxContents:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.centerBoxContents img,
.centerBoxContentsFeatured img,
.centerBoxContentsSpecials img,
.centerBoxContentsNew img,
.centerBoxContentsAlsoPurchased img,
.centerBoxContentsProductsRecentView img,
.specialsListBoxContents img {
  border-radius: var(--r-sm);
  background: var(--surface-warm);
}

.centerBoxContents a,
.centerBoxContentsFeatured a,
.centerBoxContentsSpecials a,
.centerBoxContentsNew a,
.centerBoxContentsProductsRecentView a,
.specialsListBoxContents a {
  color: var(--ink) !important;
  font: 600 13.5px/1.35 var(--font-body) !important;
  display: block;
  margin-top: 8px;
}

.centerBoxContents a:hover {
  color: var(--brand) !important;
}

.normalprice, s.productSpecialPriceSale {
  color: var(--ink-mute) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  margin-right: 6px;
}

.productSpecialPrice, .productPriceDiscount, .productSalePrice {
  color: var(--brand) !important;
  font: 700 15px/1 var(--font-body) !important;
}

/* =========================================================================
   FAQ panel (homepage)
   ========================================================================= */
.faq_panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}

.faq_panel .Htitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.faq_panel .headingTitle {
  font: 700 clamp(22px, 2.2vw, 28px)/1.15 var(--font-display);
  color: var(--ink);
  margin: 0;
  position: relative;
  padding-bottom: 10px;
  letter-spacing: -.01em;
}

.faq_panel .headingTitle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 4px;
  border-radius: 4px;
  background: var(--brand);
}

.faq_panel .clickMore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 13px/1 var(--font-body);
  color: var(--brand);
  text-decoration: none !important;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.faq_panel .clickMore::after {
  content: "\2192";
  font-size: 14px;
  transition: transform .2s ease;
}

.faq_panel .clickMore:hover {
  background: var(--brand);
  color: #fff !important;
  border-color: var(--brand);
}

.faq_panel .clickMore:hover::after {
  transform: translateX(3px);
}

.faq_panel .clickMore img {
  display: none;
}

.accordionContents.single .accordionBtn {
  background: var(--surface-warm) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  padding: 14px 44px 14px 16px !important;
  width: 100%;
  text-align: left;
  font: 600 14px/1.4 var(--font-body) !important;
  color: var(--ink) !important;
  margin-bottom: 8px !important;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
  position: relative;
}

.accordionContents.single .accordionBtn:hover {
  background: #fff !important;
  border-color: var(--brand) !important;
}

.accordionContents.single .accordionBtn::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--brand);
  font-weight: 400;
  transition: transform .18s ease;
}

.accordionContents.single .accordionBtn.minus::after {
  content: "−";
}

.FAQContents {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md);
  padding: 16px;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: -12px;
  margin-bottom: 8px;
}

/* =========================================================================
   FAQ page v3 — docs-style sidebar (.faq-page)
   Desktop: sticky left sidebar with category list + main panel.
   Mobile: stacks, sidebar becomes a horizontal scrollable pill row.
   Native <details> accordions. No hero, no search, no help card.
   ========================================================================= */

.faq-page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 12px 4px 48px;
  text-align: left;
  font-size: 14px;
  color: var(--ink);
}

/* ----- Head ----- */
.faq-head { margin: 0 0 22px; text-align: center;border-bottom: 1px solid var(--line);padding-bottom:15px}
#FaQHeading.faq-head__title,
.faq-head__title {
  margin: 0 0 8px !important;
  font: 700 26px/1.2 var(--font-display) !important;
  color: var(--ink) !important;
  letter-spacing: -.01em;
  background: transparent !important;
  padding: 0 !important;
}
.faq-head__lead {
  margin: 0;
  font: 500 14px/1.5 var(--font-body);
  color: var(--ink-soft);
  font-size: unset !important;
      text-align: center;
}

/* ----- Two-column layout ----- */
.faq-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* ----- Sidebar ----- */
.faq-side { position: sticky; top: calc(var(--header-h, 64px) + 16px); }
.faq-side__inner {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
}
.faq-side__label {
  display: block;
  margin: 4px 8px 8px;
  font: 700 10.5px/1 var(--font-body);
  color: var(--ink-mute);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.faq-side__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.faq-side__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  font: 600 13.5px/1.3 var(--font-body);
  cursor: pointer;
  text-align: left;
  transition: background .15s ease, color .15s ease;
}
.faq-side__link:hover {
  background: var(--surface-warm);
  color: var(--ink);
}
.faq-side__link.is-active {
  background: var(--brand-tint);
  color: var(--brand-deep);
}
.faq-side__name { flex: 1 1 auto; min-width: 0; }

/* Inline "Need help?" pill — lives in the FAQ head area, not floating.
   Stays in normal page flow so it never overlays other content. */
.faq-head__wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--ink) !important;
  text-decoration: none !important;
  transition: border-color .15s ease, background .15s ease;
}
.faq-head__wa:hover {
  border-color: var(--mint);
  background: var(--mint-tint);
  color: var(--ink) !important;
  text-decoration: none !important;
}
.faq-head__wa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--mint);
  color: #fff;
  border-radius: 50%;
  font-size: 15px;
  flex: 0 0 auto;
}
.faq-head__wa-text { display: flex; flex-direction: column; line-height: 1.15; }
.faq-head__wa-label {
  font: 600 9.5px/1 var(--font-body);
  color: var(--ink-mute);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.faq-head__wa-num {
  font: 700 13px/1.15 var(--font-display);
  color: var(--ink);
  margin-top: 2px;
}

/* ----- Main panel ----- */
.faq-main { display: block; }
.faq-cat { display: none; }
.faq-cat.is-shown {
  display: block;
  animation: faqCatIn .2s ease-out;
}
@keyframes faqCatIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.faq-cat__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
}
.faq-cat__title {
  margin: 0;
  font: 700 18px/1.2 var(--font-display);
  color: var(--ink);
  letter-spacing: -.005em;
}
.faq-cat__count {
  font: 500 12px/1 var(--font-body);
  color: var(--ink-mute);
}

/* ----- Accordion list ----- */
.faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

details.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .15s ease;
}
details.faq-item[open] {
  border-color: rgba(255, 90, 60, .25);
}

.faq-page summary.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font: 600 14px/1.4 var(--font-body) !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  width: 100% !important;
}
.faq-page summary.faq-item__q::-webkit-details-marker,
.faq-page summary.faq-item__q::marker { display: none; }
.faq-page summary.faq-item__q::after { content: none !important; }
.faq-page summary.faq-item__q:hover { color: var(--brand-deep) !important; }

.faq-page .faq-item__qtext { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.faq-page .faq-item__chev {
  flex: 0 0 auto;
  color: var(--ink-mute);
  font-size: 11px;
  transition: transform .2s ease, color .15s ease;
}
.faq-page details.faq-item[open] .faq-item__chev {
  transform: rotate(180deg);
  color: var(--brand-deep);
}

.faq-page .faq-item__a {
  padding: 12px 16px 14px !important;
  background: var(--surface) !important;
  border: 0 !important;
  border-top: 1px solid var(--line-soft) !important;
  margin: 0 !important;
  font: 500 13.5px/1.6 var(--font-body) !important;
  color: var(--ink) !important;
}
.faq-page .faq-item__a p { margin: 0 0 10px; font-size:unset !important; }
.faq-page .faq-item__a p:last-child { margin-bottom: 0; }
.faq-page .faq-item__a ul,
.faq-page .faq-item__a ol { margin: 8px 0 10px; padding-left: 22px; }
.faq-page .faq-item__a a { color: var(--brand-deep); font-weight: 600; text-decoration: none !important; padding:0 !important; }
.faq-page .faq-item__a a:hover { color: var(--brand); }
.faq-page .faq-item__a strong { color: var(--ink); }

/* ----- Footnote ----- */
.faq-footnote {
  margin: 32px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  font: 500 13px/1.5 var(--font-body);
  color: var(--ink-soft);
  text-align: center;
}
.faq-footnote a {
  color: var(--brand-deep);
  font-weight: 700;
  text-decoration: none;
}
.faq-footnote a:hover { color: var(--brand); }
.faq-footnote i { margin-right: 4px; }

/* ----- Mobile / tablet ----- */
@media (max-width: 900px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .faq-side { position: static; }
  /* Drop the card wrapper on mobile — pill row sits directly on the page */
  .faq-side__inner {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .faq-side__label { display: none; }
  .faq-side__nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: center;

  }
  .faq-side__link {
    flex: 0 0 auto;
    width: auto;
    padding: 8px 14px;
    border-radius: 99px;
    border: 1px solid var(--line);
    background: var(--surface);
  }
  .faq-side__link.is-active {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
  }
}

@media (max-width: 720px) {
  .faq-page { padding: 8px 10px 32px; }
  #FaQHeading.faq-head__title,
  .faq-head__title { font-size: 22px !important; }
  .faq-cat__title { font-size: 16px; }
  .faq-main { gap: 24px; }
  .faq-page summary.faq-item__q { padding: 13px 14px; font-size: 13.5px !important; }
  .faq-page .faq-item__a { padding: 10px 14px 12px !important; }
}

/* =========================================================================
   Plain document pages — Privacy, Shipping, About Us
   Shared minimal layout: title + lead + sections + paragraphs + bullet lists.
   No jump-link bar, no callouts, no footnote, no back button.
   ========================================================================= */

.privacy-page,
.shipping-page,
.about-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 8px 48px;
  text-align: left;
  color: var(--ink);
}

#privacyDefaultHeading.privacy-page__title,
.privacy-page__title,
#shippingInfoHeading.shipping-page__title,
.shipping-page__title,
#aboutUsHeading.about-page__title,
.about-page__title {
  margin: 0 0 24px !important;
  padding: 0 !important;
  font: 700 26px/1.2 var(--font-display) !important;
  color: var(--ink) !important;
  letter-spacing: -.01em;
  background: transparent !important;
}

.privacy-page__body p,
.shipping-page__body p,
.about-page__body p {
  margin: 0 0 14px;
  font: 500 15px/1.7 var(--font-body);
  color: #0a0a0a;
}
.privacy-page__body p:last-child,
.shipping-page__body p:last-child,
.about-page__body p:last-child { margin-bottom: 0; }

/* Lead paragraph — sits under the title, slightly heavier/larger,
   followed by a thin separator so the document feels grounded. */
.privacy-page__lead,
.shipping-page__lead,
.about-page__lead {
  margin: 0 0 28px !important;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--line);
  font: 500 16px/1.65 var(--font-body) !important;
  color: var(--ink) !important;
}

.privacy-page__body h2,
.shipping-page__body h2,
.about-page__body h2 {
  margin: 36px 0 12px;
  font: 800 18px/1.3 var(--font-display);
  color: #0a0a0a;
  letter-spacing: -.005em;
}
.privacy-page__body h2:first-child,
.shipping-page__body h2:first-child,
.about-page__body h2:first-child { margin-top: 24px; }

/* Bullet lists inside the document body */
.privacy-page__body ul,
.shipping-page__body ul,
.about-page__body ul {
  margin: 0 0 16px;
  padding: 0 0 0 22px;
  list-style: disc outside;
}
.privacy-page__body ul li,
.shipping-page__body ul li,
.about-page__body ul li {
  margin: 0 0 8px;
  padding-left: 4px;
  font: 500 15px/1.65 var(--font-body);
  color: #0a0a0a;
}
.privacy-page__body ul li::marker,
.shipping-page__body ul li::marker,
.about-page__body ul li::marker { color: var(--brand-deep); }
.privacy-page__body ul li:last-child,
.shipping-page__body ul li:last-child,
.about-page__body ul li:last-child { margin-bottom: 0; }

/* When a paragraph leads directly into a list, tighten the gap so they
   read as one thought. */
.privacy-page__body p + ul,
.shipping-page__body p + ul,
.about-page__body p + ul { margin-top: -4px; }
.privacy-page__body ul + p,
.shipping-page__body ul + p,
.about-page__body ul + p { margin-top: 14px; }

.privacy-page__body a,
.shipping-page__body a,
.about-page__body a {
  color: var(--brand-deep);
  text-decoration: none;
  font-weight: 600;
}
.privacy-page__body a:hover,
.shipping-page__body a:hover,
.about-page__body a:hover {
  color: var(--brand);
  text-decoration: underline;
}
.privacy-page__body strong,
.shipping-page__body strong,
.about-page__body strong { color: var(--ink); font-weight: 700; }

@media (max-width: 720px) {
  .privacy-page,
  .shipping-page,
  .about-page { padding: 8px 2px 32px; }
  #privacyDefaultHeading.privacy-page__title,
  .privacy-page__title,
  #shippingInfoHeading.shipping-page__title,
  .shipping-page__title,
  #aboutUsHeading.about-page__title,
  .about-page__title { font-size: 22px !important; }
  .privacy-page__body p,
  .shipping-page__body p,
  .about-page__body p { font-size: 13.5px; }
  .privacy-page__lead,
  .shipping-page__lead,
  .about-page__lead { font-size: 14.5px !important; padding-bottom: 16px; margin-bottom: 22px !important; }
  .privacy-page__body h2,
  .shipping-page__body h2,
  .about-page__body h2 { font-size: 16px; margin-top: 28px; }
  .privacy-page__body ul li,
  .shipping-page__body ul li,
  .about-page__body ul li { font-size: 13.5px; }
}
.contact_us_panel {
  background:
    radial-gradient(700px 360px at 100% 0%, var(--brand-tint) 0%, transparent 60%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: center;
}

.contact_us_panel .contents {
  display: contents;
}

.contact_us_panel .headingTitle {
  font: 700 clamp(22px, 2.2vw, 30px)/1.1 var(--font-display);
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -.01em;
  grid-column: 1;
}

.contact_us_panel .wording {
  font: 500 14px/1.5 var(--font-body);
  color: var(--ink-soft);
  margin: 0 0 20px;
  display: block;
  grid-column: 1;
}

.contact_us_panel .contact_information {
  grid-column: 1;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
}

.contact_us_panel .contact_information td {
  padding: 6px 4px !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  vertical-align: middle;
}

.contact_us_panel .contact_information td:first-child {
  width: 44px;
}

.contact_us_panel .contact_information i {
  height: 36px !important;
  width: 36px !important;
  border-radius: 12px !important;
  font-size: 14px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}

.contact_us_panel hr {
  display: none;
}

.contact_us_panel a[target='_blank'] {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: stretch;
  display: block;
  height: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
  transition: transform .25s ease;
}

.contact_us_panel a[target='_blank']:hover {
  transform: scale(1.01);
}

.contact_us_panel a[target='_blank'] img {
  width: 100% !important;
  height: 280px !important;
  object-fit: cover;
  display: block;
}

/* =========================================================================
   MAIN CATEGORIES PANEL (was mobile-only)
   ========================================================================= */
.main_categories_panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}

.main_categories_panel .headingTitle {
  font: 700 clamp(22px, 2.2vw, 28px)/1.15 var(--font-display) !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 0 16px !important;
  padding: 0 0 10px !important;
  position: relative;
  letter-spacing: -.01em !important;
  font-family: var(--font-display) !important;
}

.main_categories_panel .headingTitle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 4px;
  border-radius: 4px;
  background: var(--brand);
}

.main_categories_panel .categories_list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin: 0 !important;
}

.main_categories_panel .categories_link {
  text-decoration: none !important;
  display: block;
  border-radius: var(--r-md);
  padding: 14px 8px;
  text-align: center;
  transition: background .18s ease, transform .18s ease;
}

.main_categories_panel .categories_link:hover {
  background: var(--surface-warm);
  transform: translateY(-2px);
}

.main_categories_panel .categories_icon {
  width: 64px !important;
  height: 64px;
  object-fit: contain;
  border-radius: 50%;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  padding: 10px;
}

.main_categories_panel .categories_name {
  display: block;
  margin-top: 8px;
  font: 600 12px/1.25 var(--font-body) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.modern-footer {
  background: var(--ink);
  color: #C9C5BC;
  padding: 56px 0 0;
  margin-top: 48px;
}

.modern-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
}

.modern-footer__brand h3 {
  font: 700 24px/1.1 var(--font-display);
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -.01em;
}

.modern-footer__brand p {
  font: 400 13.5px/1.6 var(--font-body);
  color: #9D9A92;
  margin: 0 0 18px;
  max-width: 32ch;
  font-size: unset !important;
}

.modern-footer__social {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.modern-footer__social a {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, transform .18s ease;
  font-size: 14px;
}

.modern-footer__social a:hover {
  background: var(--brand);
  transform: translateY(-2px);
}

/* Each col is a <details> element. On desktop it behaves like a static
   block (force the content visible regardless of open/closed state, hide
   the summary affordance). On mobile (≤720px) it becomes a tappable
   accordion via the rules at the bottom of this file. */
details.modern-footer__col {
  border: 0;
  background: transparent;
  display: block;
}
details.modern-footer__col > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: default;
  padding: 0;
}
details.modern-footer__col > summary::-webkit-details-marker,
details.modern-footer__col > summary::marker { display: none; }
.modern-footer__chev {
  color: #6F6C66;
  font-size: 11px;
  transition: transform .2s ease, color .15s ease;
  display: none;             /* hidden on desktop; revealed at ≤720px */
}
/* Desktop visibility comes from the `open` attribute set server-side in
   tpl_footer.php (via $detect->isMobile() check). The browser natively
   shows all children of an open <details>, so no `display: block` force
   is needed here — which previously was overriding
   .modern-footer__contact-row's flex layout and stacking icon+text. */
@media (min-width: 721px) {
  details.modern-footer__col > ul { padding: 0; margin: 0; list-style: none; }
}

.modern-footer__col h4 {
  font: 700 12px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px;
}

.modern-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.modern-footer__col li {
  margin-bottom: 10px;
}

.modern-footer__col a {
  color: #9D9A92;
  font: 500 13.5px/1.5 var(--font-body);
  transition: color .18s ease;
}

.modern-footer__col a:hover {
  color: var(--brand);
}

.modern-footer__contact-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font: 500 13px/1.45 var(--font-body);
  color: #C9C5BC;
}

.modern-footer__contact-row i {
  color: var(--brand);   /* default = map pin (coral) */
  flex: 0 0 16px;
  margin-top: 2px;
}
/* Per-row icon colors so each contact channel reads visually distinct */
.modern-footer__contact-row .fa-whatsapp { color: #25D366; }   /* WhatsApp green */
.modern-footer__contact-row .fa-envelope { color: #4084E0; }   /* email blue */

/* Inline anchors inside contact rows (address link, WhatsApp numbers) */
.modern-footer__contact-row a {
  color: #C9C5BC;
  text-decoration: none;
  transition: color .15s ease;
}
.modern-footer__contact-row a:hover {
  color: #fff;
  text-decoration: underline;
}
.modern-footer__contact-row .wa-label {
  color: #8E8B83;
  font-size: 12px;
}

.modern-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: #0E0E0E;
  padding: 18px 24px;
}

.modern-footer__bottom-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font: 500 12.5px/1.4 var(--font-body);
  color: #7C7972;
}

.modern-footer__pay {
  display: flex;
  gap: 8px;
  align-items: center;
}

.modern-footer__pay span {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: 700 11px/1 var(--font-body);
  letter-spacing: .08em;
  padding: 7px 11px;
  border-radius: 6px;
}

/* Restyle existing legacy footer chunks --------------------------------- */
#navSuppWrapper {
  background: transparent !important;
  border: 0 !important;
  padding: 0 24px !important;
  max-width: var(--container);
  margin: 0 auto !important;
}

#navSupp ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 18px 0 !important;
  margin: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

#navSupp li {
  list-style: none;
}

#navSupp a {
  color: #9D9A92 !important;
  font: 500 13px/1 var(--font-body) !important;
  text-transform: none !important;
}

#navSupp a:hover {
  color: var(--brand) !important;
}

#siteinfoLegal.legalCopyright {
  background: transparent !important;
  color: #7C7972 !important;
  text-align: center;
  font: 500 12.5px/1.5 var(--font-body) !important;
  padding: 14px 24px 28px !important;
  max-width: var(--container);
  margin: 0 auto !important;
  border: 0 !important;
}

#siteinfoLegal a {
  color: #9D9A92 !important;
}

#siteinfoLegal a:hover {
  color: var(--brand) !important;
}

#siteinfoIP {
  text-align: center;
  font: 500 11.5px/1 var(--font-body) !important;
  color: #6B6864 !important;
  padding: 8px 0 !important;
  background: transparent !important;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1100px) {
  .home-hero {
    grid-template-columns: 1fr;
    padding: 40px 32px;
  }

  .home-hero__visual {
    max-width: 100%;
    margin: 8px auto 0;
    justify-self: center;
  }

  .home-hero__visual .tile--main img {
    max-height: 360px;
  }

  .home-hero__visual .tile--badge {
    width: 110px;
    height: 110px;
    font-size: 30px;
    padding: 12px;
  }

  .home-hero__visual .tile--badge .badge-text {
    font-size: 9px;
    margin-top: 6px;
  }

  .home-categories__grid,
  .main_categories_panel .categories_list {
    grid-template-columns: repeat(4, 1fr);
  }

  .home-trust {
    grid-template-columns: repeat(2, 1fr);
  }

  .modern-footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .contact_us_panel {
    grid-template-columns: 1fr;
  }

  .contact_us_panel a[target='_blank'] {
    grid-column: 1;
    grid-row: auto;
  }

  .contact_us_panel a[target='_blank'] img {
    height: 220px !important;
  }
}

@media (max-width: 720px) {
  body {
    /* Header height + 40px breathing room above the first page item.
     This single rule applies to every page (homepage, cart, search,
     category list, etc.) on every viewport. */
    /* padding-top: calc(var(--header-h) + 40px) !important; */
  }

  #mainWrapper {
    margin: 0 !important;
    padding: 0 !important;
  }

  .home-hero {
    padding: 32px 22px;
    border-radius: var(--r-md);
  }

  .home-hero__title {
    font-size: clamp(30px, 8vw, 40px) !important;
  }

  .home-hero__lead {
    font-size: 15px;
  }

  .home-hero__visual {
    max-width: 100%;
  }

  .home-hero__visual .tile--main img {
    max-height: 280px;
  }

  .home-hero__visual .tile--badge {
    width: 84px;
    height: 84px;
    font-size: 23px;
    padding: 9px;
    left: 11px;
    bottom: 11px;
  }

  .home-hero__visual .tile--badge .badge-text {
    font-size: 8.5px;
    letter-spacing: .12em;
    margin-top: 4px;
  }

  .home-hero__visual .tile--badge i {
    font-size: 18px;
    margin-top: 6px;
  }

  .home-trust {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .home-trust__item {
    padding: 14px;
  }

  .home-trust__title {
    font-size: 12.5px;
  }

  .home-trust__sub {
    font-size: 11px;
  }

  .home-categories__grid,
  .main_categories_panel .categories_list {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }

  .home-categories__icon,
  .main_categories_panel .categories_icon {
    width: 56px !important;
    height: 56px;
  }

  .modern-footer__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 28px;
  }

  .modern-footer {
    padding-top: 40px;
  }

  .home-section__title,
  .centerBoxHeading,
  .faq_panel .headingTitle,
  .contact_us_panel .headingTitle {
    font-size: 22px !important;
  }

  .btn-primary, .btn-ghost {
    height: 46px;
    padding: 0 18px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  body {
    /* Header height + 40px breathing room above the first page item.
     This single rule applies to every page (homepage, cart, search,
     category list, etc.) on every viewport. */
    padding-top: calc(var(--header-h) + 25px) !important;
  }

  .home-hero {
    padding: 26px 18px;
  }

  .home-hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .home-hero__cta a {
    justify-content: center;
  }

  .home-categories__grid,
  .main_categories_panel .categories_list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================================
   Make legacy "mobile only" panels visible on desktop (CSS gate removal)
   ========================================================================= */
.main_categories_panel,
.faq_panel,
.contact_us_panel {
  display: block;
}

.contact_us_panel {
  display: grid;
}

/* Override the legacy stylesheet's hide-on-desktop helper if it's used   */
.mobileshowonly {
  display: inline-block;
}

@media (min-width: 721px) {
  .mobileshowonly {
    display: inline-block;
  }
}

/* Hide the legacy bare H1 on homepage (hero carries it instead) */
#indexDefaultHeading.is-replaced-by-hero {
  display: none;
}


/* =========================================================================
   FIXES (round 2) — target the actual rendered classes
   ========================================================================= */

/* --- Header search: real markup is form > .search-box > input.search-bar-input + input.cssButton + button.search-box-submit
   The form has inline style="display:block" — override with attribute-aware selector. */
#navMainSearch form,
#navMainSearch form[name="quick_find_header"] {
  display: flex !important;
  align-items: center;
  background: var(--surface-warm) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  padding: 0 !important;
  height: 44px;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

#navMainSearch form:focus-within {
  background: #fff !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px var(--brand-tint) !important;
}

#navMainSearch .search-box {
  display: flex !important;
  align-items: center;
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

#navMainSearch .search-box.focus {
  box-shadow: none !important;
}

#navMainSearch .search-bar-input {
  flex: 1 1 auto;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  font: 500 14px/1.4 var(--font-body) !important;
  color: var(--ink) !important;
  height: 42px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  box-shadow: none !important;
}

#navMainSearch .search-bar-input::placeholder {
  color: var(--ink-mute) !important;
}

/* Hide the legacy plain "Search" submit button — keep only the icon button */
#navMainSearch .cssButton.button_search,
#navMainSearch input.button_search,
#navMainSearch .submit_button.button_search,
#navMainSearch input[type="submit"].cssButton {
  display: none !important;
}

/* Hide the &nbsp; whitespace too */
#navMainSearch .search-box br {
  display: none;
}

#navMainSearch .search-box-submit {
  flex: 0 0 auto;
  background: var(--brand) !important;
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  color: #fff !important;
  width: 38px;
  height: 38px;
  margin: 0 3px 0 0 !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, transform .18s ease;
  padding: 0 !important;
}

#navMainSearch .search-box-submit i {
  color: #fff !important;
  font-size: 14px;
}

#navMainSearch .search-box-submit:hover {
  background: var(--brand-deep) !important;
  transform: scale(1.05);
}

/* --- Sidebar: styled to match the mobile mmenu side drawer.
   Same 50px row height, 20px horizontal padding, bottom-border inset from
   the left (skipping under the icon), 24px icon, no left accent strip.
   Target real classes (.list-links, #categoriesContent, .sidebox_categories_icon)
   and override the inline width="150" attribute and legacy backgrounds. */
.leftBoxContainer,
.rightBoxContainer {
  width: auto !important;
}

.leftBoxContainer[style*="width"],
.rightBoxContainer[style*="width"] {
  width: auto !important;
}

#categoriesContent ul,
.sideBoxContent ul.list-links,
.sideBoxContent ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#categoriesContent ul li,
.sideBoxContent ul.list-links li,
.sideBoxContent ul li {
  background: transparent !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13.5px !important;
  position: relative;
}

/* Inset bottom divider — starts at 20px from left (under the icon column),
   matching mmenu's .mm-listitem::after pattern */
#categoriesContent ul li::after,
.sideBoxContent ul.list-links li::after,
.sideBoxContent ul li::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid var(--line-soft);
}

#categoriesContent ul li:last-child::after,
.sideBoxContent ul.list-links li:last-child::after,
.sideBoxContent ul li:last-child::after {
  border-bottom: 0;
}

#categoriesContent ul li a,
.sideBoxContent ul.list-links li a,
.sideBoxContent ul li a {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 8px 20px !important;
  color: var(--ink) !important;
  font: 500 13.5px/1.3 var(--font-body) !important;
  text-shadow: none !important;
  transition: background .15s ease, color .15s ease;
  text-decoration: none !important;
}

#categoriesContent ul li a:hover,
.sideBoxContent ul.list-links li a:hover,
.sideBoxContent ul li a:hover {
  background: var(--brand-tint) !important;
  color: var(--brand-deep) !important;
  text-shadow: none !important;
}

#categoriesContent ul li a span,
.sideBoxContent ul.list-links li a span {
  flex: 1 1 auto;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

img.sidebox_categories_icon {
  float: none !important;
  margin: 0 !important;
  width: 24px !important;
  height: 24px !important;
  object-fit: contain;
  flex: 0 0 24px;
  border: 0 !important;
}

/* Sidebox content general padding tweak */
.sideBoxContent#categoriesContent,
.sideBoxContent[id$="Content"] {
  padding: 0 !important;
}

/* --- Centerbox product cards: actual classes are
   .flexATTRibute.centerBoxContentsCategories.centeredContent.back  (and similar variants). */
.flexATTRibute.centerBoxContentsCategories.centeredContent,
.flexATTRibute.centerBoxContentsFeatured.centeredContent,
.flexATTRibute.centerBoxContentsSpecials.centeredContent,
.flexATTRibute.centerBoxContentsNew.centeredContent,
.flexATTRibute.centerBoxContentsProductsRecentView.centeredContent,
.flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-sm) !important;
  margin: 6px !important;
  padding: 12px 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: left !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  width: auto !important;
  height: auto !important;
}

.flexATTRibute.centerBoxContentsCategories.centeredContent:hover,
.flexATTRibute.centerBoxContentsFeatured.centeredContent:hover,
.flexATTRibute.centerBoxContentsSpecials.centeredContent:hover,
.flexATTRibute.centerBoxContentsNew.centeredContent:hover,
.flexATTRibute.centerBoxContentsProductsRecentView.centeredContent:hover,
.flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent:hover {
  transform: translateY(-3px);
  border-color: transparent !important;
  box-shadow: var(--shadow-md) !important;
}

.flexATTRibute>a:first-of-type {
  display: block;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-warm);
  aspect-ratio: 1 / 1;
  position: relative;
}

.flexATTRibute>a:first-of-type img:not(.imgSubContent) {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 8px !important;
  border: 0 !important;
}

a.column-product-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: auto !important;
  min-height: 38px;
  font: 600 13px/1.35 var(--font-body) !important;
  color: var(--ink) !important;
  margin-top: 10px !important;
  text-decoration: none !important;
  text-align: left !important;
}

a.column-product-name:hover {
  color: var(--brand) !important;
}

.productBasedPrice {
  display: flex !important;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px !important;
  flex-wrap: wrap;
}

i.priceshown,
.productBasedPrice i.priceshown {
  font: 700 16px / 1 var(--font-body) !important;
  color: var(--brand) !important;
}

i.productUOM,
.productBasedPrice i.productUOM {
  font-style: normal !important;
  font: 500 11.5px/1 var(--font-body) !important;
  color: var(--ink-mute) !important;
}

.productSpecialPrice,
span.productSpecialPrice {
  font: 700 16px/1 var(--font-body) !important;
  color: var(--brand) !important;
  display: inline !important;
}

.normalprice,
s.normalprice {
  color: var(--ink-mute) !important;
  font: 500 12px/1 var(--font-body) !important;
  margin-right: 4px;
}

/* Category section heading row (See More link) */
.categoriesPdList .centerCategories {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}

.categoriesPdList .categories-link {
  font: 600 13px/1 var(--font-body) !important;
  color: var(--brand) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  text-decoration: none !important;
}

.categoriesPdList .categories-link:hover {
  color: var(--brand-deep) !important;
}

.categoriesPdList .centerBoxHeading,
.categoriesPdList .centerCategories .centerBoxHeading {
  margin: 0 !important;
  padding-bottom: 8px !important;
}

.categoriesPdList .centerCategories a h2 {
  margin: 0 !important;
  padding: 0 0 8px !important;
}

.categoriesPdList .centerCategories a {
  text-decoration: none !important;
}

/* "View More..." link area in centerboxes */
.centerBoxWrapper .flex-space-between {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.centerBoxWrapper .flex-space-between a {
  font: 600 13px/1 var(--font-body);
  color: var(--brand) !important;
  text-decoration: none !important;
}

.centerBoxWrapper .flex-space-between a:hover {
  color: var(--brand-deep) !important;
}

/* Unified "View All" pill button for every homepage card header
   (Featured / Specials / New / category rows). */
.card-view-all,
.categoriesPdList .card-view-all,
.centerBoxWrapper .flex-space-between a.card-view-all {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font: 600 12px/1 var(--font-body) !important;
  color: var(--brand) !important;
  background: var(--brand-tint, rgba(232, 73, 47, .08));
  border: 1px solid var(--brand);
  padding: 7px 14px !important;
  border-radius: 999px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.card-view-all:hover,
.categoriesPdList .card-view-all:hover,
.centerBoxWrapper .flex-space-between a.card-view-all:hover {
  background: var(--brand) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(232, 73, 47, .28);
}

.card-view-all i {
  font-size: 10px;
}

/* Card grid: use minmax so 4-up on wide, gracefully reflow on narrow */
.centerBoxWrapper .flexBar,
.productsRecentViewContents.flexBar,
.productsMayLikeContents.flexBar {}

@media (max-width: 720px) {

  .centerBoxWrapper .flexBar,
  .productsRecentViewContents.flexBar,
  .productsMayLikeContents.flexBar {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }

  .flexATTRibute.centerBoxContentsCategories.centeredContent,
  .flexATTRibute.centerBoxContentsFeatured.centeredContent,
  .flexATTRibute.centerBoxContentsSpecials.centeredContent,
  .flexATTRibute.centerBoxContentsNew.centeredContent {
    margin: 4px !important;
    padding: 10px 10px 12px !important;
  }

  i.priceshown,
  .productBasedPrice i.priceshown,
  .productSpecialPrice {
    font-size: 14px !important;
  }

  a.column-product-name {
    font-size: 12.5px !important;
    min-height: 34px;
  }


}

/* =========================================================================
   CONTACT PANEL — match the Contact Us page's structure & polish
   ========================================================================= */

/* Homepage contact panel */
.contact_us_panel {
  background:
    radial-gradient(700px 360px at 100% 0%, var(--brand-tint) 0%, transparent 60%),
    var(--surface) !important;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 36px;
  align-items: stretch;
}

.contact_us_panel .contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact_us_panel .headingTitle {
  font: 700 clamp(24px, 2.4vw, 32px)/1.1 var(--font-display) !important;
  color: var(--ink) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  letter-spacing: -.01em !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--font-display) !important;
}

.contact_us_panel .headingTitle::after {
  display: none !important;
}

.contact_us_panel .wording {
  font: 500 14.5px/1.5 var(--font-body) !important;
  color: var(--ink-soft) !important;
  margin: 0 0 14px !important;
  display: block;
  max-width: 36ch;
}

.contact_us_panel .contact_information {
  width: 100% !important;
  max-width: none !important;
  margin: 4px 0 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
  font-size: 14px !important;
}

.contact_us_panel .contact_information td {
  padding: 6px 4px !important;
  vertical-align: middle !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

.contact_us_panel .contact_information td:first-child {
  width: 44px;
}

.contact_us_panel .contact_information td a {
  color: var(--ink) !important;
  font-weight: 600;
  text-decoration: none !important;
}

.contact_us_panel .contact_information td a:hover {
  color: var(--brand) !important;
}

.contact_us_panel .contact_information i {
  height: 36px !important;
  width: 36px !important;
  line-height: 26px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  padding: 0 !important;
}

.contact_us_panel hr {
  display: none !important;
}

.contact_us_panel iframe,
.contact_us_panel>a[target='_blank'],
.contact_us_panel a[target='_blank'] {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 320px;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-md);
  align-self: stretch;
}

.contact_us_panel a[target='_blank'] {
  overflow: hidden;
  transition: transform .25s ease;
}

.contact_us_panel a[target='_blank']:hover {
  transform: scale(1.01);
}

.contact_us_panel a[target='_blank'] img {
  width: 100% !important;
  height: 100% !important;
  min-height: 320px;
  object-fit: cover !important;
  display: block;
}

/* Standalone Contact Us page */
#contactUsDefault {
  text-align: left !important;
  font-size: 14px !important;
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 24px 0 !important;
}

#contactusHeading {
  font: 700 clamp(28px, 3vw, 38px)/1.1 var(--font-display) !important;
  color: var(--ink) !important;
  margin: 0 0 18px !important;
  letter-spacing: -.02em !important;
  text-align: left !important;
  position: relative;
  padding-bottom: 12px;
}

#contactusHeading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 4px;
  border-radius: 4px;
  background: var(--brand);
}

#contactUsDefault>div {
  background:
    radial-gradient(700px 360px at 100% 0%, var(--brand-tint) 0%, transparent 60%),
    var(--surface) !important;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 36px;
  align-items: center;
  text-align: left;
}

#contactUsDefault>div>h2 {
  grid-column: 1;
  font: 600 14.5px/1.45 var(--font-body) !important;
  color: var(--ink-soft) !important;
  margin: 0 0 10px !important;
  font-weight: 500 !important;
}

#contactUsDefault>div>h2 b {
  color: var(--ink);
  font-weight: 700;
  font-family: var(--font-display) !important;
  font-size: 22px;
  display: block;
  margin-bottom: 6px;
  letter-spacing: -.01em;
}

#contactUsDefault .contact_information {
  grid-column: 1;
  width: 100% !important;
  max-width: none !important;
  margin: 4px 0 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
  font-size: 14px !important;
}

#contactUsDefault .contact_information td {
  padding: 6px 4px !important;
  vertical-align: middle !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

#contactUsDefault .contact_information td:first-child {
  width: 44px;
}

#contactUsDefault .contact_information td a {
  color: var(--ink) !important;
  font-weight: 600;
  text-decoration: none !important;
}

#contactUsDefault .contact_information td a:hover {
  color: var(--brand) !important;
}

#contactUsDefault .contact_information i {
  height: 36px !important;
  width: 36px !important;
  line-height: 26px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  padding: 0 !important;
}

#contactUsDefault hr {
  display: none !important;
}

#contactUsDefault iframe {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: stretch;
  width: 100% !important;
  height: 100% !important;
  min-height: 360px;
  max-width: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-md);
}

@media (max-width: 900px) {

  .contact_us_panel,
  #contactUsDefault>div {
    padding: 24px !important;
  }
}


/* =========================================================================
   FIXES (round 3) — Contact panel: drop the grid, center all content,
   stop the map's <a target="_blank"> rule from skinning the Facebook link.
   ========================================================================= */

.contact_us_panel,
#contactUsDefault>div {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  text-align: center !important;
  padding: 32px !important;
}

.contact_us_panel .contents {
  display: block !important;
  text-align: center !important;
  max-width: 720px;
  margin: 0 auto !important;
}

.contact_us_panel .headingTitle,
#contactUsDefault>div>h2 {
  text-align: center !important;
}

.contact_us_panel .wording {
  max-width: 100% !important;
  text-align: center !important;
  margin: 0 auto 16px !important;
}

/* Contact info table: shrink-to-fit, centered, left-aligned cells */
.contact_us_panel .contact_information,
#contactUsDefault .contact_information {
  display: inline-table !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 8px auto 16px !important;
  text-align: left !important;
}

.contact_us_panel .contact_information td,
#contactUsDefault .contact_information td {
  text-align: left !important;
}

/* Restore HR as a centered hairline divider */
.contact_us_panel hr,
#contactUsDefault hr {
  display: block !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  width: 60% !important;
  max-width: 360px;
  margin: 20px auto !important;
  height: 1px !important;
}

/* CRITICAL: previous rules painted EVERY <a target="_blank"> with a 320px
   bordered card — that included the Facebook link in the table. Reset all
   of those properties on the <a> itself; visuals belong on the <img>. */
.contact_us_panel a[target='_blank'],
#contactUsDefault a[target='_blank'] {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 auto !important;
  align-self: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  overflow: visible !important;
  transform: none !important;
}

.contact_us_panel a[target='_blank']:hover,
#contactUsDefault a[target='_blank']:hover {
  transform: none !important;
}

/* Inside the contact info table, the Facebook link is a plain inline link */
.contact_us_panel .contact_information a[target='_blank'],
#contactUsDefault .contact_information a[target='_blank'] {
  display: inline !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
}

.contact_us_panel .contact_information a[target='_blank']:hover,
#contactUsDefault .contact_information a[target='_blank']:hover {
  color: var(--brand) !important;
}

/* The map link wraps an <img> — style the IMG, not the wrapping <a> */
.contact_us_panel a[target='_blank'] img {
  display: block !important;
  width: 100% !important;
  max-width: 520px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-md) !important;
  object-fit: cover !important;
  transition: transform .25s ease;
}

.contact_us_panel a[target='_blank']:hover img {
  transform: scale(1.01);
}

/* Standalone Contact Us page: keep iframe centered with sensible bounds */
#contactUsDefault {
  text-align: center !important;
}

#contactusHeading {
  text-align: center !important;
}

#contactusHeading::after {
  left: 50% !important;
  transform: translateX(-50%);
}

#contactUsDefault iframe {
  display: block !important;
  width: 100% !important;
  max-width: 600px !important;
  height: 320px !important;
  min-height: 0 !important;
  margin: 16px auto 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-md) !important;
  grid-column: auto !important;
  grid-row: auto !important;
  align-self: auto !important;
}


/* =========================================================================
   FIXES (round 4) — header width, slim controls, defeat the red sidebar
   highlighter, fix Information sidebox, white product image, center prices,
   hide divider bars.
   ========================================================================= */

/* (1) HEADER — full width, zero horizontal margin */
#headerWrapper {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  border-radius: 0 !important;
}

#navMainWrapper {
  max-width: none !important;
  margin: 0 !important;
  padding: 10px 28px !important;
  width: 100% !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
}

/* (2) Slim, tidy header cluster */
#navMain {
  display: flex !important;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0 !important;
}

#navMain>div:first-child {
  flex: 0 0 auto;
}

#navMain>div:last-child {
  flex: 1 1 auto;
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin-right: 0 !important;
  justify-content: flex-end;
}

.dm-logo a {
  display: inline-flex;
  align-items: center;
}

.dm-logo img {
  height: 40px !important;
  width: auto !important;
}

/* Search */
#navMainSearch {
  flex: 1 1 auto;
  max-width: 540px;
  margin-right: 0 !important;
}

#navMainSearch form,
#navMainSearch form[name="quick_find_header"] {
  height: 40px !important;
  border-width: 1px !important;
}

#navMainSearch .search-bar-input {
  height: 38px !important;
  padding: 0 20px !important;
  font-size: 13.5px !important;
}

#navMainSearch .search-box-submit {
  width: 32px !important;
  height: 32px !important;
  margin: 0 4px 0 0 !important;
  border-radius: 50% !important;
}

#navMainSearch .search-box-submit i {
  font-size: 12px !important;
}

/* Profile button (logged-in and logged-out) */
.profileBtn {
  height: 40px !important;
  padding: 4px 12px 4px 4px !important;
  border-width: 1px !important;
  gap: 8px !important;
}

.profileBtn .avatar {
  width: 30px !important;
  height: 30px !important;
}

.profileBtn .customerName {
  font-size: 12.5px !important;
  line-height: 1.1 !important;
}

.profileBtn .discountWallet {
  font-size: 10.5px !important;
  line-height: 1.1 !important;
}

.topBarNav {
  display: inline-flex;
}

.topBarNav .profileBtn {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  justify-content: center !important;
}

.topBarNav .profileBtn i {
  font-size: 14px;
}

/* Cart */
.shoppingCartDropDownBtn {
  width: 40px !important;
  height: 40px !important;
}

.shopping-cart-badge.badge {
  min-width: 18px !important;
  height: 18px !important;
  font-size: 10px !important;
  border-width: 1.5px !important;
  top: -3px !important;
  right: -3px !important;
}

/* Drop the legacy NOTICE_FLAG red bar (was #DA3545) */
.noticeflag.csslfmarquee {
  background: var(--brand-tint) !important;
  color: var(--brand-deep) !important;
  border-bottom: 1px solid var(--line) !important;
  text-align: center;
}

.noticeflag.csslfmarquee h1,
.noticeflag h1 {
  background: transparent !important;
  color: var(--brand-deep) !important;
  font: 600 13px/1.5 var(--font-body) !important;
  font-family: var(--font-body) !important;
  letter-spacing: .02em !important;
  border-radius: 0 !important;
  padding: 6px 12px !important;
  margin: 0 !important;
  text-align: center;
}

/* (3) DEFEAT THE RED SIDEBAR HEADING (#DA3545 from stylesheet_colors.css line 16-20)
   Use element+class selector to win specificity over h3.leftBoxHeading rules. */
h3.leftBoxHeading,
h3.rightBoxHeading,
h3.leftBoxHeading a,
h3.leftBoxHeading a:hover,
h3.rightBoxHeading a,
h3.rightBoxHeading a:hover,
.leftBoxContainer h3.leftBoxHeading,
.rightBoxContainer h3.rightBoxHeading {
  background: var(--surface-warm) !important;
  background-color: var(--surface-warm) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
}

/* The category/info heading IDs use font-family: beginning — kill that. */
#categoriesHeading,
#informationHeading,
#manufacturersHeading,
#whatsnewheading,
#categoriesHeading a,
#informationHeading a,
#manufacturersHeading a,
#whatsnewheading a {
  font-family: var(--font-body) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}

/* h2.centerBoxHeading — beat the same red rule with display-font, brand-bar underline */
h2.centerBoxHeading,
.centerBoxWrapper h2.centerBoxHeading,
.categoriesPdList h2.centerBoxHeading {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(22px, 2.2vw, 28px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  text-align: left !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 0 14px !important;
  margin: 0 0 16px !important;
  position: relative;
}

h2.centerBoxHeading::after,
.centerBoxWrapper h2.centerBoxHeading::after,
.categoriesPdList h2.centerBoxHeading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 4px;
  border-radius: 4px;
  background: var(--brand);
}

/* (4) INFORMATION SIDEBOX — beat #informationContent ul li a's pill style */
#informationContent ul,
#informationContent ul.list-links {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#informationContent ul li {
  background: transparent !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--line-soft) !important;
}

#informationContent ul li:last-child {
  border-bottom: 0 !important;
}

#informationContent ul li a,
#informationContent ul li a:link,
#informationContent ul li a:visited {
  background: transparent !important;
  background-color: transparent !important;
  margin-top: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 14px !important;
  color: var(--ink) !important;
  font: 500 13px/1.3 var(--font-body) !important;
  border-left: 3px solid transparent !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

#informationContent ul li a:hover {
  background: var(--brand-tint) !important;
  color: var(--brand-deep) !important;
  border-left-color: var(--brand) !important;
}

/* Same pill-bg pattern in any other sideboxes */
[id$="Content"].sideBoxContent ul li a {
  background: transparent !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
}

/* (5) Smooth-scroll behaviour for the new hero "#main-categories" anchor */
html {
  scroll-behavior: smooth;
}

#main-categories {
  scroll-margin-top: 24px;
}

/* (6) PRODUCT IMAGE — white, no padding, no cream tint; center the card content */
.flexATTRibute>a:first-of-type {
  background: #fff !important;
  background-color: #fff !important;
  padding: 0 !important;
}

.flexATTRibute>a:first-of-type img:not(.imgSubContent) {
  background: #fff !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border: 0 !important;
}

/* Preserve the absolutely-positioned overlay badge — no background, no resize */
.flexATTRibute .imgSubContent,
.flexATTRibute>a:first-of-type img.imgSubContent {
  background: transparent !important;
  background-color: transparent !important;
}

.flexATTRibute.centerBoxContentsCategories.centeredContent,
.flexATTRibute.centerBoxContentsFeatured.centeredContent,
.flexATTRibute.centerBoxContentsSpecials.centeredContent,
.flexATTRibute.centerBoxContentsNew.centeredContent,
.flexATTRibute.centerBoxContentsProductsRecentView.centeredContent,
.flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent {
  text-align: center !important;
}

a.column-product-name {
  text-align: center !important;
  /* Maintain the 2-line clamp from the previous round */
}

.productBasedPrice,
.flexATTRibute .productBasedPrice {
  justify-content: center !important;
  text-align: center !important;
}

/* Specials-style card price (when wrapped in <div> not .productBasedPrice) */
.flexATTRibute .normalprice,
.flexATTRibute .productSpecialPrice {
  display: inline-block;
  text-align: center;
}

/* (7) HIDE THE GREY DIVIDER BARS BETWEEN CENTERBOXES */
#indexDefault>.divider,
#indexDefault .divider,
#indexDefaultBody #indexDefault .divider {
  display: none !important;
}


/* =========================================================================
   FIXES (round 5) — beautify product cards with long names
   - All cards same height in a row
   - 2-line clamp + ellipsis with consistent reserved height
   - Lighter, tighter title typography
   - Price always anchors to the bottom
   - Image area is a fixed-aspect frame so cards never collapse
   ========================================================================= */

.flexATTRibute.centerBoxContentsCategories.centeredContent,
.flexATTRibute.centerBoxContentsFeatured.centeredContent,
.flexATTRibute.centerBoxContentsSpecials.centeredContent,
.flexATTRibute.centerBoxContentsNew.centeredContent,
.flexATTRibute.centerBoxContentsProductsRecentView.centeredContent,
.flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  /* stretch to row height */
  padding: 14px 12px 16px !important;
  width: 200px !important;
}




/* Force grid items to align stretch so all cards in a row match the tallest */
.centerBoxWrapper .flexBar,
.productsRecentViewContents.flexBar,
.productsMayLikeContents.flexBar {
  align-items: stretch !important;
}

/* Image frame — fixed square aspect so cards never collapse on long names */
.flexATTRibute>a:first-of-type {
  flex: 0 0 auto;
  aspect-ratio: 1 / 1 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 10px;
  position: relative;
  overflow: hidden;
}

/* Product name — 2-line clamp, balanced wrap, gentler weight */
a.column-product-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  text-overflow: ellipsis;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-wrap: balance;
  /* nicer two-line break in supporting browsers */

  /* Reserve EXACTLY 2 lines worth of height — keeps every card uniform */
  height: calc(13px * 1.4 * 2) !important;
  /* line-height × 2 */
  min-height: calc(13px * 1.4 * 2) !important;

  font: 500 13px/1.4 var(--font-body) !important;
  color: var(--ink) !important;
  letter-spacing: -.005em;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 2px;
  flex: 0 0 auto;
}

a.column-product-name:hover {
  color: var(--brand) !important;
}

/* Push the price block to the very bottom of the card */
.productBasedPrice,
.flexATTRibute .productBasedPrice {
  margin-top: auto !important;
  /* anchors to bottom inside flex column */
  padding-top: 10px;
  display: flex !important;
  align-items: baseline;
  justify-content: center !important;
  gap: 6px;
  flex-wrap: wrap;
}

/* When the price isn't wrapped in .productBasedPrice (specials use raw <span>),
   give the trailing siblings the same bottom-anchored treatment. */
.flexATTRibute>.normalprice,
.flexATTRibute>.productSpecialPrice,
.flexATTRibute>.productPriceDiscount {
  display: block;
  text-align: center;
  margin: 0 auto;
}

.flexATTRibute>.normalprice {

  padding-top: 10px;
}

.flexATTRibute>.productSpecialPrice {
  margin-top: 2px;
}

.flexATTRibute>.productPriceDiscount {
  font: 500 11px/1.2 var(--font-body) !important;
  color: var(--mint) !important;
  margin-top: 2px;
}

/* Tooltip the full name on hover (browsers show the title attribute if present) —
   for cards that don't have a title attr, at least make the truncated text
   visually feel intentional. */
a.column-product-name {
  cursor: pointer;
}

/* Tighten the icon-button area on smaller cards */
@media (max-width: 720px) {
  a.column-product-name {
    height: calc(12.5px * 1.4 * 2) !important;
    min-height: calc(12.5px * 1.4 * 2) !important;
    font-size: 12.5px !important;
  }

  .flexATTRibute.centerBoxContentsCategories.centeredContent,
  .flexATTRibute.centerBoxContentsFeatured.centeredContent,
  .flexATTRibute.centerBoxContentsSpecials.centeredContent,
  .flexATTRibute.centerBoxContentsNew.centeredContent {
    padding: 12px 10px 14px !important;
  }
}


/* =========================================================================
   FIXES (round 6) — Sidebar product cards (.sideBoxContentItem)
   The legacy markup has <img width="230"> hard-coded and long product names
   with no wrapping, so cards overflow narrow sidebars. Constrain everything
   to the card's actual width.
   ========================================================================= */

.sideBoxContent {
  padding: 8px !important;
  box-sizing: border-box;
  overflow: hidden;
}

.sideBoxContentItem {
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 8px 0 !important;
  padding: 10px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-sm) !important;
  text-align: center;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sideBoxContentItem:hover {
  transform: translateY(-2px);
  border-color: transparent !important;
  box-shadow: var(--shadow-md) !important;
  background: var(--surface) !important;
}

.sideBoxContentItem a {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  width: 100% !important;
  max-width: 100% !important;
  text-decoration: none !important;
  position: relative;
}

/* Override the inline width="230" on <img> — defeat the HTML attribute */
.sideBoxContentItem a img,
.sideBoxContentItem img,
.sideBoxContentItem img[width] {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: contain !important;
  background: #fff !important;
  border-radius: var(--r-sm) !important;
  padding: 4px !important;
  margin: 0 0 8px !important;
  display: block;
}

.sideBoxContentItem a br {
  display: none !important;
}

/* Product name — 2-line clamp + ellipsis, balanced wrap, breaks long words */
.sideBoxContentItem .sideBoxProductsName,
.sideBoxContentItem div.sideBoxProductsName {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  text-overflow: ellipsis;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-wrap: balance;

  height: calc(12.5px * 1.4 * 2) !important;
  min-height: calc(12.5px * 1.4 * 2) !important;
  font: 500 12.5px/1.4 var(--font-body) !important;
  color: var(--ink) !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  letter-spacing: -.005em;
}

.sideBoxContentItem:hover .sideBoxProductsName {
  color: var(--brand) !important;
}

/* Price block — centered, sits under the name */
.sideBoxContentItem>a>div:last-child,
.sideBoxContentItem .productBasedPrice {
  display: flex !important;
  justify-content: center !important;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px !important;
}

.sideBoxContentItem .priceshown,
.sideBoxContentItem i.priceshown {
  font-style: normal !important;
  font: 700 14px/1 var(--font-body) !important;
  color: var(--brand) !important;
}

.sideBoxContentItem .productUOM,
.sideBoxContentItem i.productUOM {
  font-style: normal !important;
  font: 500 11px/1 var(--font-body) !important;
  color: var(--ink-mute) !important;
}

/* Specials/featured sidebox variants that use .normalprice + .productSpecialPrice */
.sideBoxContentItem .productSpecialPrice {
  font: 700 14px/1 var(--font-body) !important;
  color: var(--brand) !important;
  display: inline-block;
}

.sideBoxContentItem .normalprice {
  display: none !important;
  /* legacy stylesheet already hides this */
}

/* Sidebar centered-content sidebox heading row spacing */
.sideBoxContent.centeredContent {
  padding: 10px 8px !important;
}

/* Sideboxes inside narrower side columns: tighter paddings */
@media (max-width: 1100px) {
  .sideBoxContentItem {
    padding: 8px !important;
  }

  .sideBoxContentItem .sideBoxProductsName,
  .sideBoxContentItem div.sideBoxProductsName {
    font-size: 12px !important;
    height: calc(12px * 1.4 * 2) !important;
    min-height: calc(12px * 1.4 * 2) !important;
  }

  .sideBoxContentItem .priceshown,
  .sideBoxContentItem i.priceshown,
  .sideBoxContentItem .productSpecialPrice {
    font-size: 13px !important;
  }
}


/* =========================================================================
   SHOPPING CART PAGE — full restyle
   Existing PHP markup is preserved; rules below skin every legacy class
   (#cartContentsDisplay table, .cart-qty-modify, .cartDetails, etc.)
   ========================================================================= */

#shoppingCartDefault {
  max-width: 1280px;
  margin: 24px auto 60px;
  padding: 0 24px;
  background: transparent !important;
}

/* --- Heading + intro */
#cartDefaultHeading {
  font: 700 clamp(28px, 3vw, 38px)/1.1 var(--font-display) !important;
  color: var(--ink) !important;
  margin: 0 0 6px !important;
  letter-spacing: -.02em !important;
  position: relative;
  padding-bottom: 12px;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
}

#cartDefaultHeading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 4px;
  border-radius: 4px;
  background: var(--brand);
}

#shoppingCartDefault .forward {
  font: 500 13px/1.4 var(--font-body) !important;
  color: var(--ink-mute) !important;
  margin-bottom: 12px;
}

#cartInstructionsDisplay {
  font: 500 14px/1.5 var(--font-body) !important;
  color: var(--ink-soft) !important;
  margin: 4px 0 18px !important;
}

#shoppingCartDefault .cartTotalsDisplay {
  background: var(--brand-tint) !important;
  color: var(--brand-deep) !important;
  border: 1px solid var(--brand-tint) !important;
  border-radius: var(--r-md) !important;
  padding: 12px 16px !important;
  font: 600 14px/1.4 var(--font-body) !important;
  margin: 4px 0 14px !important;
}

/* Out-of-stock alert styling */
#shoppingCartDefault .messageStackError {
  background: #FFEBE6 !important;
  color: #B33A1B !important;
  border: 1px solid #FFB7A6 !important;
  border-radius: var(--r-md) !important;
  padding: 12px 16px !important;
  font: 500 13.5px/1.5 var(--font-body) !important;
  margin: 6px 0 14px !important;
}

/* --- Cart contents: convert <table> rows into cards */
#cartContentsDisplay {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 12px !important;
  background: transparent !important;
  margin-bottom: 24px;
}

#cartContentsDisplay tr.tableHeading {
  display: none !important;
  /* hide legacy column-header row */
}

#cartContentsDisplay tr {
  background: var(--surface) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow .18s ease, transform .18s ease;
}

#cartContentsDisplay tr:hover {
  box-shadow: var(--shadow-md) !important;
}

#cartContentsDisplay tr.out_of_stock {
  background: #FFF6F4 !important;
  outline: 1px solid #FFB7A6;
}

#cartContentsDisplay td {
  padding: 16px 14px !important;
  border: 0 !important;
  vertical-align: middle !important;
  background: transparent !important;
}

#cartContentsDisplay td:first-child {
  border-top-left-radius: var(--r-md);
  border-bottom-left-radius: var(--r-md);
  padding-left: 18px !important;
}

#cartContentsDisplay td:last-child {
  border-top-right-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
  padding-right: 18px !important;
}

/* Image + name + attributes — grid: image (left) | name on top of attribs.
   The anchor uses display: contents so its inner spans (cartImage,
   cartProdTitle) join the grid alongside the cartAttribsList sibling. */
.cartProductDisplay {
  min-width: 0;
  display: grid !important;
  grid-template-columns: 100px minmax(0, 1fr);
  grid-template-areas:
    "img  title"
    "img  attribs";
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
}

.cartProductDisplay>a {
  display: contents !important;
  text-decoration: none !important;
  color: var(--ink) !important;
}

.cartImage,
.cartImage.back {
  grid-area: img;
  align-self: start;
  display: block;
}

.cartImage img {
  width: 100px !important;
  height: 100px !important;
  object-fit: contain !important;
  background: #fff !important;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 5px;
  display: block;
}

.cartProdTitle {
  grid-area: title;
  align-self: start;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font: 600 14.5px/1.35 var(--font-body) !important;
  color: var(--ink) !important;
  margin: 0 !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.cartProductDisplay>a:hover .cartProdTitle {
  color: var(--brand) !important;
}

.cartAttribsList {
  grid-area: attribs;
  align-self: start;
  font: 500 12.5px/1.4 var(--font-body) !important;
  color: var(--ink-mute) !important;
  margin: 0 !important;
}

.cartAttribsList ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Drop the legacy <br class="clearBoth"> between name and attribute list */
#cartContentsDisplay .cartProductDisplay br,
#cartContentsDisplay td.cartProductDisplay br.clearBoth,
#cartContentsDisplay .cartProdTitle br {
  display: none !important;
}

.cartAttribsList ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.cartAttribsList ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.cartAttribsList li {
  list-style: none !important;
  padding: 4px 10px !important;
  margin: 0 !important;
  border: 1px solid var(--line) !important;
  background: var(--bg) !important;
  border-radius: 999px !important;
  font: 500 11.5px/1 var(--font-body) !important;
  color: var(--ink-soft) !important;
}

/* Quantity stepper — pill, 36px tall, balanced 36x36 round buttons */
#cartContentsDisplay .cart-qty-modify,
#cartContentsDisplay div.cart-qty-modify {
  display: inline-flex !important;
  align-items: center;
  background: var(--surface-warm) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  height: 36px !important;
  padding: 0 !important;
  width: fit-content;
  overflow: hidden;
  box-sizing: content-box;
}

#cartContentsDisplay .cart-qty-modify .cartProductQty,
#cartContentsDisplay .cart-qty-modify input.cartProductQty,
#cartContentsDisplay .cart-qty-modify input[type="number"] {
  width: 44px !important;
  height: 34px !important;
  text-align: center;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  font: 700 13px/1 var(--font-body) !important;
  color: var(--ink) !important;
  -moz-appearance: textfield;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto;
}

#cartContentsDisplay .cart-qty-modify input::-webkit-outer-spin-button,
#cartContentsDisplay .cart-qty-modify input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#cartContentsDisplay .cart-qty-modify .cart-qty-minus,
#cartContentsDisplay .cart-qty-modify .cart-qty-plus,
#cartContentsDisplay button.cart-qty-modify.cart-qty-minus,
#cartContentsDisplay button.cart-qty-modify.cart-qty-plus {
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer;
  color: var(--ink) !important;
  font-size: 11px !important;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: color .15s ease, background .15s ease;
  flex: 0 0 36px;
  padding: 0 !important;
  margin: 0 !important;
}

#cartContentsDisplay .cart-qty-modify .cart-qty-minus:hover,
#cartContentsDisplay .cart-qty-modify .cart-qty-plus:hover {
  color: var(--brand) !important;
  background: var(--brand-tint) !important;
}

.remind-text {
  font: 500 11.5px/1.3 var(--font-body) !important;
  color: var(--brand-deep) !important;
  background: var(--brand-tint);
  padding: 4px 8px;
  border-radius: 6px;
  margin-top: 6px;
  display: inline-block;
}

/* Unit price + line total */
.cartUnitDisplay,
.cartTotalDisplay {
  font: 600 14px/1.2 var(--font-body) !important;
  color: var(--ink) !important;
  text-align: right !important;
  white-space: nowrap;
}

.cartTotalDisplay {
  color: var(--brand) !important;
  font-weight: 700 !important;
  font-size: 15.5px !important;
}

.cartUnitDisplay b.hide,
.cartTotalDisplay b.hide {
  display: none !important;
}

/* Remove button */
.cartRemoveItemDisplay {
  width: 56px;
  text-align: center !important;
}

.cartRemoveItemDisplay a {
  display: inline-flex !important;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-warm) !important;
  border: 1px solid var(--line) !important;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.cartRemoveItemDisplay a:hover {
  background: var(--brand-tint) !important;
  border-color: var(--brand) !important;
  transform: scale(1.05);
}

.cartRemoveItemDisplay a img {
  width: 16px !important;
  height: 16px !important;
  filter: grayscale(1) opacity(.7);
  transition: filter .15s ease;
}

.cartRemoveItemDisplay a:hover img {
  filter: none;
}

/* Out-of-stock alert — only visible when PHP adds the .show class */
span.out_of_stock {
  display: none !important;
}

span.out_of_stock.show.alert.bold,
span.out_of_stock.show {
  display: inline-block !important;
  color: #B33A1B !important;
  font: 600 12px/1.4 var(--font-body) !important;
  margin-top: 4px;
}

/* Generic alert label (not the stock one) */
span.alert.bold:not(.out_of_stock) {
  display: inline-block;
  color: #B33A1B !important;
  font: 600 12px/1.4 var(--font-body) !important;
  margin-top: 4px;
}

/* Stock-by-attributes alert text */
.cartProductDisplay .alert.bold,
.cartProdTitle .alert.bold {
  display: block;
  margin-top: 4px;
}

/* --- Mobile cart row layout (uses .productDisplay / .productDisplay2) */
#cartContentsDisplay td .productDisplay {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

#cartContentsDisplay td .productDisplay .productsLink {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
}

#cartContentsDisplay td .productDisplay .cartImage img {
  width: 76px !important;
  height: 76px !important;
}

#cartContentsDisplay td .productsDelete {
  flex: 0 0 auto;
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-warm) !important;
  border: 1px solid var(--line) !important;
}

#cartContentsDisplay td .productsDelete:hover {
  background: var(--brand-tint) !important;
  border-color: var(--brand) !important;
}

#cartContentsDisplay td .productDisplay2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}

#cartContentsDisplay td .productPrice table {
  background: transparent !important;
  border: 0 !important;
  font: 500 13px/1.4 var(--font-body) !important;
}

#cartContentsDisplay td .productPrice th {
  background: transparent !important;
  color: var(--ink-mute) !important;
  font-weight: 500 !important;
  text-align: right !important;
  border: 0 !important;
  padding: 2px 6px 2px 0 !important;
}

#cartContentsDisplay td .productPrice td {
  background: transparent !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  padding: 2px 0 !important;
}

#cartContentsDisplay td .productPrice tbody td {
  color: var(--brand) !important;
  font-weight: 700 !important;
}

/* --- Add-on deals strip (shown when active) */
#shoppingCartDefault .addOnContents {
  display: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin: 0 0 20px;
  overflow: hidden;
}

#shoppingCartDefault .addOnContents.show {
  display: block;
}

/* dark full-bleed header bar (matches the dialog + dropdown). Selector
   mirrors stylesheet.css:815 specificity so the dark bg wins over #ffecba. */
#shoppingCartDefault .addOnContents .addOnTitle {
  font: 800 12px/1 var(--font-body) !important;
  color: #fff !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left !important;
  margin: -16px -18px 14px !important;
  padding: 12px 16px 12px 20px !important;
  background: #0a1f44 !important;
  position: relative;
}

#shoppingCartDefault .addOnContents .addOnTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #ffb020;
}

#shoppingCartDefault .addOnContents .cartProductImage img {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #fff;
  padding: 4px;
}

#shoppingCartDefault .cartProductName {
  font: 600 13px/1.4 var(--font-body) !important;
  color: var(--ink) !important;
}

#shoppingCartDefault .nPrice {
  color: var(--ink-mute) !important;
  font-size: 12px !important;
}

/* --- Cart Details: voucher + totals card */
.cartDetails {
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  display: grid !important;
  grid-template-columns: 1fr 1.1fr;
  gap: 32px;
  margin: 24px 0;
  box-shadow: var(--shadow-sm);
  align-items: start;
}

.cartDetails>div {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
}

.cartDetails .voucher {
  display: flex !important;
  gap: 0;
  align-items: stretch;
}

.cartDetails .voucher_code,
.cartDetails input.voucher_code {
  flex: 1 1 auto !important;
  background: var(--surface-warm) !important;
  border: 1.5px solid var(--line) !important;
  border-right: 0 !important;
  border-radius: var(--r-pill) 0 0 var(--r-pill) !important;
  padding: 10px 18px !important;
  font: 500 13px/1 var(--font-body) !important;
  color: var(--ink) !important;
  outline: none !important;
  height: 42px;
}

.cartDetails .voucher_code:focus {
  background: #fff !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px var(--brand-tint);
}

.cartDetails .apply_voucher {
  background: var(--ink) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 var(--r-pill) var(--r-pill) 0 !important;
  padding: 0 22px !important;
  height: 42px !important;
  font: 600 13px/1 var(--font-body) !important;
  cursor: pointer;
  transition: background .18s ease, transform .15s ease;
  white-space: nowrap;
}

.cartDetails .apply_voucher:hover {
  background: var(--brand) !important;
  transform: translateY(-1px);
}

/* selector carries an id (#shoppingCartDefault) to out-specify
   stylesheet.css:601 which forces `text-decoration: revert !important`. */
#shoppingCartDefault .cartDetails .cancel_voucher {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  width: fit-content;
  align-self: flex-start;
  height: 34px;
  padding: 0 14px !important;
  margin: 0 !important;
  text-align: left !important;
  font: 700 12px/1 var(--font-body) !important;
  color: var(--mint) !important;
  text-decoration: none !important;
  background: #fff !important;
  border: 1.5px solid var(--mint);
  border-radius: var(--r-pill);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

#shoppingCartDefault .cartDetails .cancel_voucher::before {
  content: "\f00d"; /* × — remove indicator */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 11px;
  opacity: .9;
}

#shoppingCartDefault .cartDetails .cancel_voucher::after {
  content: none !important;
}

#shoppingCartDefault .cartDetails .cancel_voucher:hover {
  color: #fff !important;
  background: #C8312B !important;
  border-color: #C8312B;
}

/* keep the hide winning now that the base selector also carries the id */
#shoppingCartDefault .cartDetails .cancel_voucher.is-hidden {
  display: none !important;
}

.cartDetails .addon {
  text-align: right;
  margin-bottom: 4px;
}

.cartDetails .addon .add_on_cursor img {
  display: none;
}

.cartDetails .addOnDialogBtn {
  background: transparent !important;
  border: 1.5px solid var(--brand) !important;
  color: var(--brand) !important;
  border-radius: var(--r-pill) !important;
  padding: 8px 16px !important;
  font: 600 12.5px/1 var(--font-body) !important;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.cartDetails .addOnDialogBtn:hover {
  background: var(--brand) !important;
  color: #fff !important;
}

/* Totals rows */
#cartSubTotal,
#cartAddOnTotal,
#cartDiscountTotal,
#cartDiscountWallet,
.cartDetails #cartSubTotal,
.cartDetails #cartAddOnTotal,
.cartDetails #cartDiscountTotal,
.cartDetails #cartDiscountWallet {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--line-soft);
  font: 500 14px/1.3 var(--font-body) !important;
  color: var(--ink) !important;
  text-align: left !important;
  background: transparent !important;
  position: relative;
}

/* Label/amount split: label on the left, amount on the right */
#cartSubTotal .label,
#cartAddOnTotal .label,
#cartDiscountTotal>.label,
#cartTotal .label {
  color: var(--ink-soft) !important;
  font-weight: 500 !important;
}

#cartSubTotal .amount,
#cartAddOnTotal .amount,
#cartDiscountTotal>.amount,
#cartTotal .amount {
  color: var(--ink) !important;
  font-weight: 700 !important;
  text-align: right !important;
  white-space: nowrap;
  margin-left: auto;
}

#cartDiscountTotal>.amount,
#cartDiscountTotal>.amount .Amount {
  color: var(--mint) !important;
}

/* DiscountWallet popup must not take flex space — float it as a tooltip */
#cartDiscountWallet>.popup,
#cartDiscountWallet .popup.main-overview-popup {
  position: absolute !important;
  z-index: 5;
  pointer-events: none;
  margin-left: auto;
}

#cartDiscountTotal {
  display: none !important;
}

#cartDiscountTotal.show {
  display: flex !important;
  color: var(--mint) !important;
}

#cartDiscountTotal .Amount,
#cartDiscountWallet .Amount,
#cartAddOnTotal {
  color: var(--ink) !important;
  font-weight: 600 !important;
}

#cartDiscountTotal .Amount {
  color: var(--mint) !important;
}

#cartDiscountWallet .BtnInfodw {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
}

#cartDiscountWallet .BtnInfodw button {
  background: transparent;
  border: 0;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 0;
}

#cartDiscountWallet .BtnInfodw button:hover {
  color: var(--brand);
}

#cartTotal {
  padding: 16px 0 4px !important;
  margin-top: 8px;
  border-top: 2px solid var(--ink) !important;
  font: 700 19px/1.2 var(--font-display) !important;
  color: var(--ink) !important;
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  background: transparent !important;
  text-align: left !important;
}

/* --- Action buttons */
#shoppingCartDefault .buttonRow {
  margin: 20px 0;
}

#shoppingCartDefault .buttonRow.buttoncheckout {
  text-align: right !important;
}

/* Hide every legacy child of the wrapping <a> in cart button rows.
   zen_image_button can render as <img>, <input type="image">, or
   <span class="cssButton ...">label</span>; this catches all variants. */
#shoppingCartDefault .buttonRow>a>*,
#shoppingCartDefault .buttonRow.buttoncheckout>a>img,
#shoppingCartDefault .buttonRow.back>a>img,
#shoppingCartDefault .buttonRow>a img,
#shoppingCartDefault .buttonRow>a input,
#shoppingCartDefault .buttonRow>a span.cssButton,
#shoppingCartDefault .buttonRow>a span.normal_button,
#shoppingCartDefault .buttonRow>a span.button {
  display: none !important;
}

/* Same for the standalone shipping-estimator buttonRow — hide legacy image. */
#shoppingCartDefault .buttonRow:not(.buttoncheckout):not(.back)>a>* {
  display: none !important;
}

#shoppingCartDefault .buttonRow.buttoncheckout a {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 32px;
  background: var(--ink) !important;
  color: #fff !important;
  border-radius: var(--r-pill);
  font: 600 15px/1 var(--font-body) !important;
  text-decoration: none !important;
  transition: background .18s ease, transform .15s ease, box-shadow .18s ease;
  box-shadow: 0 8px 22px -10px rgba(22, 22, 22, .5);
  position: relative;
}

#shoppingCartDefault .buttonRow.buttoncheckout a::before {
  content: "Proceed to Checkout";
}

#shoppingCartDefault .buttonRow.buttoncheckout a::after {
  content: "→";
  font-size: 18px;
  transition: transform .18s ease;
}

#shoppingCartDefault .buttonRow.buttoncheckout a:hover {
  background: var(--brand) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -10px rgba(255, 90, 60, .55);
}

#shoppingCartDefault .buttonRow.buttoncheckout a:hover::after {
  transform: translateX(3px);
}

/* Only the FIRST .back row (immediately following the checkout row) becomes
   the Continue Shopping button; later .back rows (e.g. Shipping Estimator)
   are hidden with their legacy content. */
#shoppingCartDefault .buttonRow.buttoncheckout+.buttonRow.back a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  background: transparent !important;
  border: 1.5px solid var(--ink) !important;
  color: var(--ink) !important;
  border-radius: var(--r-pill);
  font: 600 13.5px/1 var(--font-body) !important;
  text-decoration: none !important;
  transition: background .18s ease, color .18s ease;
}

#shoppingCartDefault .buttonRow.buttoncheckout+.buttonRow.back a::before {
  content: "← Continue Shopping";
}

#shoppingCartDefault .buttonRow.buttoncheckout+.buttonRow.back a:hover {
  background: var(--ink) !important;
  color: #fff !important;
}

/* Show all .back rows (Continue Shopping + Shipping Estimator). */
#shoppingCartDefault .buttonRow.back {
  display: block !important;
}

/* Hide truly empty .back rows (e.g. the commented-out legacy update row). */
#shoppingCartDefault .buttonRow.back:empty {
  display: none !important;
}

/* Shipping Estimator — anchor uses a javascript:popupWindow href.
   Style it as a subtle outlined link, no arrow. */
#shoppingCartDefault .buttonRow.back a[href*="popupWindow"] {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  background: transparent !important;
  border: 1.5px solid var(--line) !important;
  color: var(--ink-soft) !important;
  border-radius: var(--r-pill);
  font: 600 13px/1 var(--font-body) !important;
  text-decoration: none !important;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

#shoppingCartDefault .buttonRow.back a[href*="popupWindow"]::before {
  content: "Estimate Shipping";
}

#shoppingCartDefault .buttonRow.back a[href*="popupWindow"]:hover {
  border-color: var(--brand) !important;
  color: var(--brand) !important;
  background: var(--brand-tint) !important;
}

/* Empty cart state */
#cartEmptyText {
  text-align: center !important;
  padding: 60px 24px !important;
  font: 600 18px/1.4 var(--font-body) !important;
  color: var(--ink-soft) !important;
  background: var(--surface) !important;
  border: 1px dashed var(--line) !important;
  border-radius: var(--r-lg) !important;
  margin: 24px 0 !important;
  position: relative;
}

#cartEmptyText::before {
  content: "\f07a";
  /* Font Awesome shopping-cart */
  font-family: "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  display: block;
  font-size: 56px;
  color: var(--brand);
  margin-bottom: 18px;
  opacity: .7;
}

#cartEmptyText::after {
  content: "Browse our latest products below.";
  display: block;
  font: 500 13.5px/1.4 var(--font-body);
  color: var(--ink-mute);
  margin-top: 10px;
}

/* --- Mobile breakpoints */
@media (max-width: 720px) {
  #shoppingCartDefault {
    padding: 0 14px;
    margin: 14px auto 40px;
  }

  /* Drop grid → simple block stack so the totals + voucher panel always shows */
  .cartDetails {
    display: block !important;
    grid-template-columns: none !important;
    padding: 18px !important;
    gap: 0 !important;
  }

  .cartDetails>div {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .cartDetails>div+div {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
  }

  .cartImage img {
    width: 72px !important;
    height: 72px !important;
  }

  #shoppingCartDefault .buttonRow.buttoncheckout {
    text-align: center !important;
  }

  #shoppingCartDefault .buttonRow.buttoncheckout a {
    width: 100%;
    justify-content: center;
    padding: 0 18px;
  }

  #shoppingCartDefault .buttonRow.back a {
    width: 100%;
    justify-content: center;
  }

  #cartContentsDisplay td {
    padding: 12px !important;
  }
}


/* =========================================================================
   CHECKOUT — Shipping + Shipping Address pages (.co-page)
   Modern checkout shell with step indicator, card sections, and a
   coral CTA. Targets .co-page#checkoutShipping and
   .co-page#checkoutShipAddressDefault.
   ========================================================================= */
.co-page {
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  padding: 18px 20px 80px;
  font-family: var(--font-body);
  color: var(--ink);
  box-sizing: border-box;
  overflow-x: hidden;
  /* belt-and-braces guard against children that overflow */
}

.co-page,
.co-page * {
  box-sizing: border-box;
  min-width: 0;
}

.co-ship-summary.PaymentDescription * {
  font-size: unset !important;
}

/* Step indicator — circles on top, labels below, connector line runs
   between adjacent circles only (never crosses through the label text). */
.co-page .co-steps {
  list-style: none;
  margin: 0 0 24px;
  padding: 20px 24px 16px;
  display: flex;
  gap: 0;
  align-items: flex-start;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.co-page .co-steps::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-deep) 100%);
}

.co-page .co-step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  font: 600 13px/1 var(--font-body);
  color: var(--ink-mute);
  text-align: center;
}

/* Connector — sits at the vertical centre of the 28px circle (top: 14px)
   and spans the gap between adjacent circles only. The circle is on z=1
   so it always sits in front of the line. */
.co-page .co-step+.co-step::before {
  content: "";
  position: absolute;
  top: 14px;
  right: calc(50% + 18px);
  width: calc(100% - 36px);
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  z-index: 0;
}

.co-page .co-step.is-done+.co-step::before {
  background: var(--mint);
}

.co-page .co-step__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-warm);
  border: 1.5px solid var(--line);
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 var(--font-body);
  flex: 0 0 28px;
  z-index: 1;
  position: relative;
}

.co-page .co-step__label {
  white-space: nowrap;
  letter-spacing: .01em;
  font: 600 12.5px/1 var(--font-body);
}

.co-page .co-step.is-current {
  color: var(--ink);
}

.co-page .co-step.is-current .co-step__num {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  border-color: var(--brand-deep);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(214, 62, 34, .45);
}

.co-page .co-step.is-done .co-step__num {
  background: var(--mint);
  border-color: var(--mint);
  color: #fff;
}

.co-page .co-step.is-done .co-step__num i {
  font-size: 11px;
}

.co-page .co-step.is-done {
  color: var(--ink);
}

/* Page title */
.co-page .co-page__title {
  font: 700 26px/1.2 var(--font-display);
  color: var(--ink);
  margin: 0 0 18px;
  padding: 0;
  background: transparent;
  border: 0;
  letter-spacing: -.01em;
  text-align: left;
}

.co-page .co-page__title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-deep) 100%);
  border-radius: 2px;
  margin-top: 10px;
}

/* Card sections */
.co-page .co-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  margin: 0 0 18px;
  overflow: hidden;
  width:100%;
}

.co-page .co-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  /* let the "Change" link drop to its own line if needed */
  gap: 8px 12px;
  padding: 14px 20px;
  background: var(--surface-warm);
  border-bottom: 1px solid var(--line);
}

.co-page .co-card__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  font: 700 15.5px/1.2 var(--font-display) !important;
  color: var(--ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  letter-spacing: -.005em;
}

.co-page .co-card__head .co-link {
  flex: 0 0 auto;
}

.co-page .co-card__title i {
  color: var(--brand-deep);
  font-size: 14px;
}

.co-page .co-card__body {
  padding: 20px;
}

/* Inline link in card head */
.co-page .co-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 99px;
  background: rgba(255, 90, 60, .08);
  color: var(--brand-deep);
  font: 600 12.5px/1 var(--font-body);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.co-page .co-link i {
  font-size: 11px;
}

.co-page .co-link:hover {
  background: var(--brand);
  color: #fff !important;
}

/* Address block */
.co-page .co-address {
  font: 500 14px/1.6 var(--font-body);
  color: var(--ink);
  font-style: normal;
}

/* Note / hint banners */
.co-page .co-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px !important;
  padding: 10px 14px !important;
  border-radius: 10px;
  font: 500 13px/1.45 var(--font-body) !important;
}

.co-page .co-note i {
  font-size: 13px;
  flex: 0 0 13px;
  margin-top: 2px;
}

.co-page .co-note--hint {
  background: rgba(64, 132, 224, .08);
  color: #1d3a73;
  border: 1px solid rgba(64, 132, 224, .18);
}

.co-page .co-note--hint i {
  color: #4084e0;
}

.co-page .co-note--err {
  background: rgba(214, 62, 34, .08);
  color: var(--brand-deep);
  border: 1px solid rgba(214, 62, 34, .18);
}

/* Free shipping callout */
.co-page .co-ship-free {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15, 157, 122, .10) 0%, rgba(31, 181, 122, .06) 100%);
  border: 1px solid rgba(15, 157, 122, .22);
}

.co-page .co-ship-free__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 15px/1.2 var(--font-display);
  color: #0a6f53;
}

.co-page .co-ship-free__title i {
  color: var(--mint);
}

.co-page .co-ship-free__desc {
  font: 500 13.5px/1.5 var(--font-body);
  color: var(--ink-soft);
}

/* Shipping methods — radio cards */
.co-page .co-ship-methods,
.co-page .co-pay-methods {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.co-page .co-ship-method,
.co-page .co-pay-method {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  padding: 0 !important;
}

.co-page .co-ship-method:hover,
.co-page .co-pay-method:hover {
  border-color: var(--brand);
}

.co-page .co-ship-method:has(input[type="radio"]:checked),
.co-page .co-ship-method.is-selected,
.co-page .co-pay-method:has(input[type="radio"]:checked),
.co-page .co-pay-method.is-selected {
  border-color: var(--brand);
  background: rgba(255, 90, 60, .04);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.co-page .co-ship-method__label,
.co-page .co-pay-method__label {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  /* minmax(0,1fr) lets info column shrink + truncate */
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  margin: 0 !important;
}

.co-page .co-ship-method__radio,
.co-page .co-pay-method__radio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.co-page .co-ship-method__radio input[type="radio"],
.co-page .co-pay-method__radio input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  cursor: pointer;
  margin: 0;
}

.co-page .co-ship-method__info,
.co-page .co-pay-method__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.co-page .co-ship-method__name,
.co-page .co-pay-method__name {
  font: 600 14.5px/1.3 var(--font-body);
  color: var(--ink);
}

.co-page .co-ship-method__sub,
.co-page .co-pay-method__sub {
  font: 500 12.5px/1.3 var(--font-body);
  color: var(--ink-mute);
}

.co-page .co-ship-method__icon,
.co-page .co-pay-method__icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.co-page .co-ship-method__icon img,
.co-page .co-pay-method__icon img {
  max-height: 18px;
  width: auto;
}

.co-page .co-ship-method__price,
.co-page .co-pay-method__price {
  font: 700 15px/1 var(--font-display);
  color: var(--brand-deep);
  white-space: nowrap;
}

.co-page .co-ship-method--err,
.co-page .co-pay-method--err {
  padding: 12px 16px !important;
}

.co-page .co-ship-method__err,
.co-page .co-pay-method__err {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-deep);
  font: 500 13px/1.4 var(--font-body);
}

/* Textarea */
.co-page .co-textarea,
.co-page #comments textarea {
  width: 100% !important;
  min-height: 110px;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--line) !important;
  font: 500 13.5px/1.55 var(--font-body) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-shadow: none !important;
}

.co-page .co-textarea:focus,
.co-page #comments textarea:focus {
  border-color: var(--brand) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(255, 90, 60, .12) !important;
}

.co-page fieldset.shipping {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.co-page fieldset.shipping legend {
  padding: 0 !important;
  margin: 0 !important;
}

/* Saved addresses — radio cards (.co-addrbook) */
.co-page .co-addrbook {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.co-page .co-addrbook__card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 14px 18px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  margin: 0;
  position: relative;
}

.co-page .co-addrbook__card:hover {
  border-color: var(--brand);
}

.co-page .co-addrbook__card.is-selected,
.co-page .co-addrbook__card:has(input[type="radio"]:checked) {
  border-color: var(--brand);
  background: rgba(255, 90, 60, .05);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.co-page .co-addrbook__radio {
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}

.co-page .co-addrbook__radio input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  margin: 0;
}

.co-page .co-addrbook__body {
  font: 500 13.5px/1.55 var(--font-body);
  color: var(--ink);
  font-style: normal;
}

.co-page .co-addrbook__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 6px;
  padding: 3px 9px;
  background: rgba(15, 157, 122, .10);
  color: var(--mint);
  border-radius: 99px;
  font: 700 10.5px/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.co-page .co-addrbook__badge i {
  font-size: 10px;
}

/* New-address form — 3 inner cards grid (.co-addr-cards) */
.co-page .co-addr-cards {
  padding: 0;
}

.co-page .co-addr-cards__title {
  font: 700 16px/1.2 var(--font-display) !important;
  color: var(--ink) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.co-page .co-addr-cards__hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px !important;
  padding: 6px 12px !important;
  background: rgba(214, 62, 34, .07);
  color: var(--brand-deep) !important;
  border-radius: 99px;
  font: 600 11.5px/1 var(--font-body) !important;
}

.co-page .co-addr-cards__hint i {
  font-size: 9px;
}

.co-page .co-addr-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 1024px) {
  .co-page .co-addr-cards__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Inner cards (lighter than the outer .co-card) */
.co-page .co-card--inner {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: none;
  margin: 0;
}

.co-page .co-card--inner .co-card__head {
  padding: 12px 16px;
  background: var(--surface-warm);
}

.co-page .co-card--inner .co-card__title {
  font: 700 13.5px/1.2 var(--font-display) !important;
}

.co-page .co-card--inner .co-card__title i {
  font-size: 12px;
}

.co-page .co-card--inner .co-card__body {
  padding: 16px;
}

/* 2-column form grid inside each card */
.co-page .co-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}

@media (max-width: 520px) {
  .co-page .co-form__grid {
    grid-template-columns: 1fr;
  }
}

.co-page .co-form__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.co-page .co-form__field--full {
  grid-column: 1 / -1;
}

.co-page .co-form__label {
  font: 600 11.5px/1.2 var(--font-body) !important;
  color: var(--ink-soft) !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 !important;
  padding: 0 !important;
}

.co-page .co-form__label .alert {
  display: inline-block;
  margin-left: 4px;
  color: var(--brand-deep);
  text-transform: none;
  font-size: 10px;
  letter-spacing: 0;
}

.co-page .co-form__radios {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 6px 0;
  align-items: center;
}

.co-page .co-form__radios input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  margin: 0 4px 0 0;
  vertical-align: middle;
}

.co-page .co-form__radios .radioButtonLabel {
  font: 500 13.5px/1 var(--font-body);
  color: var(--ink);
  margin: 0 !important;
  cursor: pointer;
}

/* All inputs/selects inside the form cards */
.co-page .co-addr-cards input[type="text"],
.co-page .co-addr-cards input[type="email"],
.co-page .co-addr-cards input[type="tel"],
.co-page .co-addr-cards select,
.co-page .co-form input[type="text"],
.co-page .co-form input[type="email"],
.co-page .co-form input[type="tel"],
.co-page .co-form select {
  width: 100% !important;
  max-width: none !important;
  padding: 0px 12px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--line) !important;
  font: 500 14px/1.3 var(--font-body) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-shadow: none !important;
}

.co-page .co-addr-cards input:focus,
.co-page .co-addr-cards select:focus,
.co-page .co-form input:focus,
.co-page .co-form select:focus {
  border-color: var(--brand) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(255, 90, 60, .12) !important;
}

.co-page .co-form label {
  display: block;
  font: 600 12px/1 var(--font-body) !important;
  color: var(--ink-soft) !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 6px !important;
}

/* Actions / submit button */
.co-page .co-actions {
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.co-page .co-actions--inline {
  margin: 14px 0 22px;
}

.co-page .co-actions__main {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.co-page button.co-submit,
.co-page .co-submit {
  appearance: none !important;
  border: 0 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px !important;
  border-radius: 99px !important;
  font: 700 14.5px/1 var(--font-body) !important;
  letter-spacing: .03em !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%) !important;
  box-shadow: 0 8px 18px -8px rgba(214, 62, 34, .55) !important;
  transition: transform .15s ease, box-shadow .15s ease;
  width: auto !important;
  height: auto !important;
  min-width: 180px;
}

.co-page button.co-submit i,
.co-page .co-submit i {
  font-size: 13px;
}

.co-page button.co-submit:hover,
.co-page .co-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px -10px rgba(214, 62, 34, .65) !important;
}

/* Keyboard accessibility — the default browser focus ring is invisible on
   the brand-orange gradient. Replace it with a soft brand-tint halo so
   tab-focused users can see where they are. */
.co-page button.co-submit:focus,
.co-page .co-submit:focus,
.co-page button.co-submit:focus-visible,
.co-page .co-submit:focus-visible {
  outline: none !important;
  box-shadow: 0 8px 18px -8px rgba(214, 62, 34, .55),
              0 0 0 3px rgba(255, 90, 60, .35) !important;
}
.co-page button.co-submit:focus:not(:focus-visible),
.co-page .co-submit:focus:not(:focus-visible) {
  /* Drop the halo when focus came from a mouse click — keep it only for
     keyboard navigation (matches modern UX expectations). */
  box-shadow: 0 8px 18px -8px rgba(214, 62, 34, .55) !important;
  color: var(--brand) !important;
  background: var(--brand-tint) !important;
}

.co-page .co-actions__note {
  margin: 0 !important;
  padding: 12px 16px !important;
  background: var(--surface-warm);
  border: 1px dashed var(--line);
  border-radius: 10px;
  font: 500 12.5px/1.5 var(--font-body) !important;
  color: var(--ink-soft) !important;
  text-align: center;
}

.co-page .co-actions__note strong {
  color: var(--ink);
  font-weight: 700;
}

/* Collapsible "Or add a brand-new address" toggle — keeps the new-address
   form hidden by default so users don't accidentally submit it when they
   meant to pick a saved address. */
.co-page .co-new-addr-toggle {
  margin: 16px 0 0;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.co-page .co-new-addr-toggle[open] {
  border-style: solid;
  border-color: var(--brand);
  box-shadow: 0 8px 20px -12px rgba(214, 62, 34, .25);
}

.co-page .co-new-addr-toggle__summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  font: 700 14px/1.2 var(--font-display);
  color: var(--ink);
  background: var(--surface-warm);
  user-select: none;
  transition: background .15s ease, color .15s ease;
}

.co-page .co-new-addr-toggle__summary::-webkit-details-marker {
  display: none;
}

.co-page .co-new-addr-toggle__summary::marker {
  display: none;
}

.co-page .co-new-addr-toggle__summary>i:first-child {
  color: var(--brand-deep);
  font-size: 16px;
}

.co-page .co-new-addr-toggle__summary>span {
  flex: 1 1 auto;
  min-width: 0;
}

.co-page .co-new-addr-toggle__chev {
  color: var(--ink-mute);
  font-size: 11px;
  transition: transform .2s ease, color .15s ease;
}

.co-page .co-new-addr-toggle[open] .co-new-addr-toggle__chev {
  transform: rotate(180deg);
  color: var(--brand);
}

.co-page .co-new-addr-toggle:hover .co-new-addr-toggle__summary {
  background: rgba(255, 90, 60, .06);
  color: var(--brand-deep);
}

.co-page .co-new-addr-toggle>form {
  padding: 0 18px 18px;
}

/* Shipping method summary (payment page — read-only line) */
.co-page .co-ship-summary {
  font: 600 14.5px/1.4 var(--font-body);
  color: var(--ink);
  background: var(--surface-warm);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}

/* Order totals table */
.co-page .co-totals {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  background: transparent !important;
}

.co-page .co-totals tr {
  background: transparent !important;
}

.co-page .co-totals td {
  padding: 10px 4px !important;
  border-bottom: 1px dashed var(--line);
  font: 500 13.5px/1.4 var(--font-body) !important;
  color: var(--ink-soft) !important;
  background: transparent !important;
  vertical-align: middle;
}

.co-page .co-totals tr:last-child td {
  border-bottom: 0;
  font-weight: 700 !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  padding-top: 12px !important;
}

.co-page .co-totals__label {
  text-align: left !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.co-page .co-totals__icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  
  color: var(--brand-deep);

}

.co-page .co-totals__text {
  flex: 1 1 auto;
  min-width: 0;
}

.co-page .co-totals__value {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink) !important;
}

.co-page .co-totals tr:last-child .co-totals__label {
  font-weight: 700;
}

.co-page .co-totals tr:last-child .co-totals__value {
  color: var(--brand-deep) !important;
  font-size: 17px !important;
}

/* ----- Confirmation page: billing + shipping address side-by-side ----- */
.co-page .co-addr-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.co-page .co-addr-pair>.co-card {
  margin: 0;
  height: 100%;
}

.co-page .co-addr-pair>.co-card:only-child {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .co-page .co-addr-pair {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ----- Confirmation page: payment-method confirmation fields ----- */
.co-page .co-confirm__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--surface-warm);
  border-radius: 10px;
}

.co-page .co-confirm__field {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  align-items: center;
}

@media (max-width: 520px) {
  .co-page .co-confirm__field {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.co-page .co-confirm__fldlabel {
  font: 600 12px/1.3 var(--font-body);
  color: var(--ink-soft);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.co-page .co-confirm__fldvalue {
  font: 500 14px/1.4 var(--font-body);
  color: var(--ink);
}

/* ----- Confirmation page: order comments ----- */
.co-page .co-confirm__comments {
  font: 500 13.5px/1.6 var(--font-body);
  color: var(--ink);
  padding: 12px 14px;
  background: var(--surface-warm);
  border-radius: 10px;
  white-space: pre-line;
}

.co-page .co-confirm__no-comments {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-mute);
  font-style: italic;
}

.co-page .co-confirm__no-comments i {
  font-size: 12px;
}

/* ----- Confirmation page: cart items list ----- */
.co-page .co-confirm__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.co-page .co-confirm__item {
  display: grid;
  grid-template-columns: 72px 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.co-page a.co-confirm__thumb,
.co-page .co-confirm__thumb {
  display: block !important;
  width: 72px;
  height: 72px;
  padding: 0 !important;
  /* prevent global `a { padding: … }` from squashing the image */
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  flex-shrink: 0;
  box-sizing: border-box;
  line-height: 0;
  /* kill the descender gap an inline-anchor adds */
}

.co-page .co-confirm__thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  object-fit: contain;
  background: var(--surface);
}

.co-page .co-confirm__thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  font-size: 22px;
}

.co-page .co-confirm__qty {
  font: 700 14.5px/1 var(--font-display);
  color: var(--brand-deep);
  background: rgba(255, 90, 60, .08);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  letter-spacing: -.02em;
}

.co-page .co-confirm__info {
  min-width: 0;
}

.co-page .co-confirm__name {
  font: 600 14px/1.35 var(--font-body);
  color: var(--ink);
  word-break: break-word;
  text-decoration: none !important;
  transition: color .15s ease;
  display: block;
}

.co-page .co-confirm__name:hover {
  color: var(--brand-deep);
}

/* Wipe ALL the global margin-left / padding-left rules that target
   .cartAttribsList from responsive_default.css (15%), responsive_tablet.css
   (5em), responsive_mobile.css and stylesheet.css. Maximum specificity. */
body .co-page .co-confirm__attrs,
body .co-page ul.co-confirm__attrs,
body .co-page .co-confirm__attrs.cartAttribsList,
body .co-page ul.cartAttribsList,
.co-page .co-confirm__items .cartAttribsList {
  list-style: none !important;
  margin: 6px 0 0 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
  font: 500 12.5px/1.4 var(--font-body);
  color: var(--ink-soft);
}

.co-page .co-confirm__attrs li,
.co-page ul.cartAttribsList li {
  margin: 0 !important;
  margin-left: 0 !important;
  padding: 6px !important;
  list-style: none !important;
  background: none !important;
}

.co-page .co-confirm__attrs li {
  display: inline-block;
  margin-right: 12px;
}

.co-page .co-confirm__attrs li strong {
  font-weight: 600;
  color: var(--ink);
}

.co-page .co-confirm__price {
  font: 700 14.5px/1.2 var(--font-display);
  color: var(--ink);
  white-space: nowrap;
  text-align: right;
}

.co-page .co-confirm__onetime {
  font: 500 11.5px/1.2 var(--font-body);
  color: var(--ink-mute);
  margin-top: 2px;
}

/* ----- Confirmation page: items card collapsible on all viewports -----
   Default closed. Click/tap the summary to expand. Chevron rotates 180°
   when [open]. The "Edit cart" link uses onclick="event.stopPropagation()"
   so clicking it navigates without toggling the accordion.            */
details.co-card--mcollapse {
  display: block;
}

details.co-card--mcollapse > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

details.co-card--mcollapse > summary::-webkit-details-marker,
details.co-card--mcollapse > summary::marker {
  display: none;
}

.co-page details.co-card--mcollapse .co-card__mchev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 90, 60, .08);
  color: var(--brand-deep);
  flex: 0 0 auto;
  margin-left: 4px;
}

.co-page details.co-card--mcollapse .co-card__mchev i {
  font-size: 11px;
  transition: transform .2s ease;
}

details.co-card--mcollapse[open] .co-card__mchev i {
  transform: rotate(180deg);
}

.co-page details.co-card--mcollapse .co-card__count-extra {
  display: inline;
}

@media (max-width: 520px) {
  .co-page .co-confirm__item {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .co-page .co-confirm__thumb {
    width: 60px;
    height: 60px;
  }

  .co-page .co-confirm__qty {
    /* Qty pill sits inline below the name on mobile */
    grid-column: 2;
    grid-row: 2;
    width: auto;
    height: auto;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 12.5px;
    justify-self: start;
  }

  .co-page .co-confirm__info {
    grid-column: 2;
    grid-row: 1;
  }

  .co-page .co-confirm__thumb {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
  }

  .co-page .co-confirm__price {
    grid-column: 1 / -1;
    text-align: right;
    font-size: 14px;
  }
}

/* Confirm Order button — larger / more prominent than the other co-submit buttons */
.co-page button.co-submit.button_confirm_order,
.co-page .co-submit.button_confirm_order {
  padding: 16px 36px !important;
  font-size: 15.5px !important;
  min-width: 240px;
}

/* =========================================================
   Checkout Success page (.co-page.co-success)
   ========================================================= */

/* Mobile-only address & method summary hoisted to top of page.
   Default hidden; revealed at <=720px. On the same breakpoint the
   .od-aside (which contains the same cards in the sidebar) is hidden
   to avoid duplication. */
.co-success-mobile-info {
  display: none;
  margin: 0 0 18px;
}

@media (max-width: 720px) {
  .co-page.co-success .co-success-mobile-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .co-page.co-success .od-aside {
    display: none;
  }
  /* Slim the address cards a touch for the mobile-top placement. */
  .co-page.co-success .co-success-mobile-info .od-card {
    border-radius: 14px;
  }
}

/* Success-step pill: mint instead of coral to communicate completion */
.co-page.co-success .co-step--success .co-step__num {
  background: var(--mint) !important;
  color: #fff !important;
  border-color: var(--mint) !important;
  box-shadow: 0 0 0 4px var(--mint-tint) !important;
}

.co-page.co-success .co-step--success .co-step__label {
  color: var(--mint) !important;
  font-weight: 700;
}

/* Hide the order-detail page's redundant hero / back-link when embedded
   inside the success template (it has its own celebratory hero above). */
.co-page.co-success .od-page > .od-hero {
  display: none;
}

.co-page.co-success #accountHistInfo {
  padding: 0;
  background: transparent;
}

/* ----- Success hero ----- */
.co-success-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  margin: 0 0 22px;
  padding: 44px 28px 32px;
  background:
    radial-gradient(ellipse at top, rgba(15, 157, 122, .10) 0%, transparent 55%),
    linear-gradient(180deg, #FFFDF9 0%, #FFFFFF 100%);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
}

.co-success-hero::before,
.co-success-hero::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  pointer-events: none;
  opacity: .35;
  filter: blur(40px);
}

.co-success-hero::before {
  background: var(--mint);
  top: -90px;
  left: -90px;
}

.co-success-hero::after {
  background: var(--brand);
  bottom: -110px;
  right: -110px;
  opacity: .18;
}

.co-success-hero > * {
  position: relative;
  z-index: 1;
}

.co-success-hero__icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  color: var(--mint);
  background: rgba(15, 157, 122, .12);
  border-radius: 50%;
  animation: coSuccessPop .55s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes coSuccessPop {
  0%   { transform: scale(0);   opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

.co-success-hero__title {
  font: 700 28px/1.2 var(--font-display);
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -.01em;
}

.co-success-hero__sub {
  font: 400 14.5px/1.55 var(--font-body);
  color: var(--ink-soft);
  margin: 0 auto 22px;
  max-width: 480px;
}

.co-success-hero__meta {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto 18px;
  max-width: 640px;
}

.co-success-hero__pill {
  flex: 1 1 160px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.co-success-hero__pill-label {
  font: 600 10.5px/1 var(--font-body);
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.co-success-hero__pill strong {
  font: 700 15.5px/1.2 var(--font-display);
  color: var(--ink);
  word-break: break-all;
}

.co-success-hero__pill--total {
  background: var(--brand-tint);
  border-color: rgba(255, 90, 60, .25);
}

.co-success-hero__pill--total .co-success-hero__pill-label {
  color: var(--brand-deep);
}

.co-success-hero__pill--total strong {
  color: var(--brand-deep);
  font-size: 17px;
}

.co-success-hero__email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(15, 157, 122, .10);
  color: var(--mint);
  border-radius: 99px;
  font: 600 12.5px/1 var(--font-body);
  margin-top: 4px;
}

/* ----- Alert / additional-payment-message card ----- */
.co-page.co-success .co-card--alert {
  border-left: 4px solid var(--brand);
  background: #FFF8F5;
}

.co-page.co-success .co-card--alert .co-card__body {
  padding: 16px 20px;
  font: 500 13.5px/1.5 var(--font-body);
  color: var(--ink);
}

/* ----- Reward / wallet promo card (inline details) ----- */
.co-page.co-success .co-card--reward {
  background: linear-gradient(135deg, #FFF8F5 0%, #FFFFFF 100%);
  border-color: rgba(255, 90, 60, .25);
}

.co-page.co-success .co-card--reward .co-card__head--reward {
  background: linear-gradient(135deg, var(--brand-tint) 0%, #FFF 100%);
}

.co-page.co-success .co-card--reward .co-card__body {
  padding: 18px 20px;
}

.co-success-reward {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Top hero: image + callout + current balance pill */
.co-success-reward__hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
}

.co-success-reward__img-wrap {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border-radius: 14px;
  padding: 8px;
  border: 1px solid var(--line);
}

.co-success-reward__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.co-success-reward__callout {
  min-width: 0;
}

.co-success-reward__desc {
  margin: 0;
  font: 500 14px/1.5 var(--font-body);
  color: var(--ink);
  font-size: unset !important;
}

.co-success-reward__balance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 12px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 2px 8px -4px rgba(214, 62, 34, .15);
}

.co-success-reward__balance-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 10.5px/1 var(--font-body);
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.co-success-reward__balance-label i {
  color: var(--brand);
}

.co-success-reward__balance-amt {
  font: 800 22px/1 var(--font-display);
  color: var(--brand-deep);
  letter-spacing: -.02em;
}

/* "How it works" inline blurb — collapsible <details>, closed by default */
details.co-success-reward__howto {
  padding: 0;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 12px;
  overflow: hidden;
}

details.co-success-reward__howto > summary.co-success-reward__howto-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font: 700 12.5px/1 var(--font-body);
  color: var(--brand-deep);
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: background .15s ease;
  margin: 0;
}

details.co-success-reward__howto > summary::-webkit-details-marker,
details.co-success-reward__howto > summary::marker {
  display: none;
}

details.co-success-reward__howto > summary:hover {
  background: var(--brand-tint);
}

.co-success-reward__howto-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.co-success-reward__howto-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-deep);
  font-size: 10px;
  flex: 0 0 auto;
  transition: transform .2s ease;
}

details.co-success-reward__howto[open] .co-success-reward__howto-chev {
  transform: rotate(180deg);
}

.co-success-reward__howto-body {
  padding: 12px 16px 14px;
  font: 500 13.5px/1.6 var(--font-body);
  color: var(--ink);
  border-top: 1px dashed var(--line);
}

.co-success-reward__howto-body p { margin: 0 0 8px; }
.co-success-reward__howto-body p:last-child { margin-bottom: 0; }
.co-success-reward__howto-body ul,
.co-success-reward__howto-body ol { margin: 6px 0; padding-left: 20px; }

/* Quick perks list */
.co-success-reward__perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 14px;
}

.co-success-reward__perks li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  font: 500 13px/1.4 var(--font-body);
  color: var(--ink);
}

.co-success-reward__perks li i {
  color: var(--mint);
  font-size: 12px;
}

/* CTA: link to full wallet & history */
.co-success-reward__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--brand);
  color: #fff !important;
  border-radius: 10px;
  font: 700 13px/1 var(--font-body);
  text-decoration: none !important;
  transition: background .15s ease;
}

.co-success-reward__cta:hover {
  background: var(--brand-deep);
}

/* ----- Next-step action buttons ----- */
.co-success-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 26px 0 18px;
}

.co-success-actions__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  font: 600 13.5px/1 var(--font-body);
  text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.co-success-actions__btn--primary {
  background: var(--brand);
  color: #fff !important;
}

.co-success-actions__btn--primary:hover {
  background: var(--brand-deep);
  color: #fff !important;
}

.co-success-actions__btn--ghost {
  background: var(--surface);
  color: var(--ink) !important;
  border: 1px solid var(--line);
}

.co-success-actions__btn--ghost:hover {
  border-color: var(--brand);
  color: var(--brand-deep) !important;
  background: var(--surface-warm);
}

/* ----- Closing "thanks" line ----- */
.co-success-thanks {
  text-align: center;
  font: 500 14px/1.5 var(--font-body);
  color: var(--ink-soft);
  margin: 18px 0 28px;
  font-size: unset !important;
}

.co-success-thanks i.fa-heart {
  color: var(--brand);
  margin-right: 4px;
}

/* ----- Mobile adjustments ----- */
@media (max-width: 720px) {
  .co-success-hero {
    padding: 32px 18px 24px;
    border-radius: 18px;
  }
  .co-success-hero__icon {
    width: 68px;
    height: 68px;
    font-size: 38px;
    margin-bottom: 14px;
  }
  .co-success-hero__title {
    font-size: 22px;
  }
  .co-success-hero__sub {
    font-size: 13.5px;
    margin-bottom: 18px;
  }
  .co-success-hero__meta {
    gap: 8px;
  }
  .co-success-hero__pill {
    flex: 1 1 calc(50% - 4px);
    padding: 10px 12px;
  }
  .co-success-hero__pill strong {
    font-size: 13.5px;
  }
  .co-success-hero__pill--total strong {
    font-size: 15px;
  }
  .co-success-reward__hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 12px;
  }
  .co-success-reward__img-wrap {
    margin: 0 auto;
  }
  .co-success-reward__balance {
    align-items: center;
  }
  details.co-success-reward__howto > summary.co-success-reward__howto-head {
    padding: 10px 14px;
  }
  .co-success-reward__howto-body {
    padding: 10px 14px 12px;
  }
  .co-success-reward__perks {
    grid-template-columns: 1fr;
  }
  .co-success-reward__cta {
    align-self: stretch;
    justify-content: center;
  }
  .co-success-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .co-success-actions__btn {
    justify-content: center;
  }
}

/* Per-payment-method extra fields (e.g. credit-card number) */
.co-page .co-ship-method__fields,
.co-page .co-pay-method__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 0 18px 14px;
  margin-top: -4px;
  border-top: 1px dashed var(--line);
  padding-top: 14px;
}

.co-page .co-ship-method:not(.is-selected) .co-ship-method__fields,
.co-page .co-pay-method:not(.is-selected) .co-pay-method__fields {
  display: none;
}

.co-page .co-ship-method__field,
.co-page .co-pay-method__field {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.co-page .co-ship-method__fldlabel,
.co-page .co-pay-method__fldlabel {
  font: 600 11.5px/1.2 var(--font-body);
  color: var(--ink-soft);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.co-page .co-ship-method__fldinput input,
.co-page .co-ship-method__fldinput select,
.co-page .co-pay-method__fldinput input,
.co-page .co-pay-method__fldinput select {
  width: 100% !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--line) !important;
  font: 500 14px/1.3 var(--font-body) !important;
}

/* Terms & Conditions checkbox card */
.co-page .co-terms__text {
  font: 500 13.5px/1.6 var(--font-body);
  color: var(--ink-soft);
  margin: 0 0 12px;
  padding: 12px 14px;
  background: var(--surface-warm);
  border-radius: 10px;
  max-height: 180px;
  overflow-y: auto;
}

.co-page .co-terms__check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  margin: 0;
  font: 600 13.5px/1.4 var(--font-body);
  color: var(--ink);
  transition: border-color .15s ease, background .15s ease;
}

.co-page .co-terms__check:hover {
  border-color: var(--brand);
}

.co-page .co-terms__check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  margin: 0;
  flex: 0 0 18px;
}

.co-page .co-terms__check:has(input[type="checkbox"]:checked) {
  border-color: var(--brand);
  background: rgba(255, 90, 60, .05);
}

/* Back link */
.co-page .co-back {
  margin: 24px 0 0;
  text-align: left;
}

.co-page .co-back__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--ink-soft);
  font: 600 13px/1 var(--font-body);
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.co-page .co-back__link:hover {
  border-color: var(--brand);
  color: var(--brand-deep);
  background: rgba(255, 90, 60, .06);
}

/* Screen-reader-only utility */
.co-page .sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reset legacy floats/buttonRow on co-page */
.co-page .buttonRow.forward,
.co-page .buttonRow.back {
  float: none !important;
  width: auto !important;
  text-align: inherit !important;
}

/* Mobile */
@media (max-width: 720px) {
  .co-page {
    padding: 0px 0px 5px;
  }

  .co-page .co-steps {
    padding: 12px 8px;
    gap: 0;
    flex-wrap: wrap;
    border-radius: 0px;
  }

  .co-page .co-step {
    flex: 0 0 auto;
    gap: 6px;
    font-size: 11.5px;
  }

  .co-page .co-step__num {
    width: 24px;
    height: 24px;
    font-size: 11px;
    flex-basis: 24px;
  }

  .co-page .co-step+.co-step::before {
    display: none;
  }

  .co-page .co-step__label {
    font-size: 11px;
  }

  .co-page .co-page__title {
    font-size: 21px;
  }

  .co-page .co-card {
    border-radius: 14px;
  }

  .co-page .co-card__head {
    padding: 12px 14px;
  }

  .co-page .co-card__body {
    padding: 14px;
  }

  .co-page .co-card__title {
    font-size: 14px !important;
  }

  .co-page .co-ship-method__label,
  .co-page .co-pay-method__label {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 12px 12px;
  }

  .co-page .co-ship-method__name,
  .co-page .co-pay-method__name {
    font-size: 13.5px;
  }

  .co-page .co-ship-method__price,
  .co-page .co-pay-method__price {
    font-size: 14px;
  }

  .co-page .co-actions__main input[type="image"],
  .co-page .co-submit {
    width: 100% !important;
    padding: 13px 22px !important;
  }

  .co-page .co-actions__main {
    justify-content: stretch;
  }
}

@media (max-width: 420px) {
  .co-page .co-step__label {
    display: none;
  }

  /* `#navMainSearch1 .discountWallet { display: none }` lives later in
     this file (next to the wallet's other rules at ~line 9270) so it can
     defeat the unconditional `display: inline-flex !important;` rule that
     appears later in the source. Don't put it here — same specificity +
     earlier in source = it loses. */

  .co-page .co-steps {
    justify-content: center;
    gap: 18px;
  }
}

/* ---------- Bridge: route .ax-* styles into .co-page ------------------
   The checkout pages reuse the same .ax-card, .ax-form, .ax-field,
   .ax-radio, .ax-addr markup as the account Address Book / Process
   pages, but those input/label rules are scoped to .ax-page. This
   block mirrors the relevant rules so the same look applies inside
   .co-page (checkout) without unscoping the original .ax-page rules. */

/* Labels */
.co-page .ax-field label,
.co-page .ax-field>label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 12.5px/1.3 var(--font-body) !important;
  color: var(--ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Inputs / Selects / Textareas */
.co-page input[type="text"],
.co-page input[type="email"],
.co-page input[type="tel"],
.co-page input[type="password"],
.co-page input[type="number"],
.co-page input[type="date"],
.co-page select,
.co-page textarea {
  display: block;
  width: 100%;
  height: 36px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  font: 500 14px/1.3 var(--font-body) !important;
  color: var(--ink) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.co-page textarea {
  height: auto !important;
  min-height: 110px;
  padding: 12px 14px !important;
}

.co-page input::placeholder {
  color: var(--ink-mute);
  opacity: 1;
}

.co-page input:hover,
.co-page select:hover {
  border-color: #DFD9CB !important;
}

.co-page input:focus,
.co-page select:focus,
.co-page textarea:focus {
  outline: 0 !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(255, 90, 60, .14) !important;
  background: var(--surface) !important;
}

.co-page select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5B5B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
  padding-right: 38px !important;
}

/* Pill-shaped radio + checkbox labels (gender, "Set as primary") */
.co-page label.ax-radio,
.co-page label.ax-check {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  padding: 10px 16px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  font: 600 13px/1 var(--font-body) !important;
  color: var(--ink-soft) !important;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
  margin: 0 !important;
}

.co-page .ax-radio input[type="radio"],
.co-page .ax-check input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid var(--line) !important;
  background: var(--surface) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
  flex-shrink: 0;
  box-shadow: none !important;
}

.co-page .ax-radio input[type="radio"] {
  border-radius: 50% !important;
}

.co-page .ax-check input[type="checkbox"] {
  border-radius: 5px !important;
}

.co-page .ax-radio input[type="radio"]:checked,
.co-page .ax-check input[type="checkbox"]:checked {
  border-color: var(--brand) !important;
  background: var(--brand) !important;
}

.co-page .ax-radio input[type="radio"]:checked::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

.co-page .ax-check input[type="checkbox"]:checked::after {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 10px;
  color: #fff;
}

.co-page .ax-radio:has(input:checked),
.co-page .ax-check:has(input:checked) {
  border-color: var(--brand) !important;
  background: rgba(255, 90, 60, .07) !important;
  color: var(--brand-deep) !important;
}

/* Saved-address radio cards (.ax-addr--pickable) inside checkout
   ---------------------------------------------------------------
   Each tile is a 2-column flex layout: [radio] [address block].
   No absolute-positioned overlays — the "Selected" pill sits inline
   above the address lines so it can't collide with the radio. */
.co-page .ax-addr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin: 0;
  padding-top: 5px !important;

}

.co-page .ax-addr--pickable {
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  margin: 0 !important;
  padding: 16px 18px !important;
  /* Non-selected tiles use a muted warm-cream surface so the bright-white
     selected tile reads as clearly distinct from the rest. */
  background: #ffffff !important;
  border: 1.5px solid #c1c1c1 !important;
  border-radius: 14px !important;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
  position: relative;
  opacity: .82;
}

.co-page .ax-addr--pickable:hover {
  background: #FBF8F1 !important;
  border-color: #D4CCB8 !important;
  opacity: 1;
}

.co-page .ax-addr--pickable.is-selected, .co-page .ax-addr--pickable.is-selected:has(input[type="radio"]:checked) {
  background: var(--surface) !important;
  /* bright white */
  border-color: var(--brand) !important;
  box-shadow:
    inset 0 0 0 1px var(--brand),
    0 10px 24px -12px rgba(214, 62, 34, .30) !important;
  /* coral glow */
  opacity: 1;
  transform: translateY(-1px);
}

.co-page .ax-addr--pickable.is-selected .ax-addr__radio input[type="radio"]:checked {
  border-color: var(--brand) !important;
  background: var(--brand) !important;
}

.co-page .ax-addr--pickable:has(input[type="radio"]:checked) {
  background: #ffffff !important;
  /* bright white */
  border-color: #4CAF50 !important;
  box-shadow:
    inset 0 0 0 1px #4CAF50,
    0 10px 24px -12px rgba(214, 62, 34, .30) !important;
  /* coral glow */
  opacity: 1;
  transform: translateY(-1px);

}

.co-page .ax-addr__head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 22px;
}

.co-page .ax-addr__radio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin-top: 1px;
}

.co-page .ax-addr__radio input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid #b6b6b6 !important;
  border-radius: 50% !important;
  background: var(--surface) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease, background .15s ease;
  position: relative;
}

.co-page .ax-addr__radio input[type="radio"]:checked {
  border-color: #4CAF50 !important;
  background: #4CAF50 !important;
}

.co-page .ax-addr__radio input[type="radio"]:checked::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.co-page .ax-addr__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff !important;
  border-radius: 99px;
  font: 800 10.5px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  position: static !important;
  margin: 0 !important;
  box-shadow: 0 4px 10px -4px rgba(214, 62, 34, .55);
  white-space: nowrap;

}

.co-page .ax-addr__pill i {
  font-size: 11px;
  color: #fff !important;
}

.co-page .ax-addr__lines,
.co-page address,
.co-page .ax-addr__lines * {
  font: 500 13.5px/1.55 var(--font-body) !important;
  color: var(--ink) !important;
  font-style: normal !important;
  margin: 0;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Info-tip strip used in the saved-address card body */
.co-page .ax-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font: 500 13px/1.45 var(--font-body) !important;
}

.co-page .ax-tip i {
  font-size: 13px;
  margin-top: 2px;
}

.co-page .ax-tip--info {
  background: rgba(64, 132, 224, .07);
  color: #1d3a73;
  border: 1px solid rgba(64, 132, 224, .18);
}

.co-page .ax-tip--info i {
  color: #4084e0;
}

/* Required asterisk tone */
.co-page .ax-req,
.co-page .alert {
  color: var(--brand-deep) !important;
}

/* =========================================================================
   SHIPPING ESTIMATOR — popup page + inline (on cart page)
   Targets the existing markup in tpl_modules_shipping_estimator.php
   ========================================================================= */

#shippingEstimatorContent {
  max-width: 880px;
  margin: 24px auto;
  padding: 28px;
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  font: 500 14px/1.5 var(--font-body) !important;
  color: var(--ink) !important;
}

/* When inlined under the cart, drop the outer padding so it sits flush */
#shoppingCartDefault #shippingEstimatorContent {
  margin: 24px 0;
  max-width: none;
}

#shippingEstimatorContent .popuppageHeading {
  margin-bottom: 18px;
}

#shippingEstimatorContent h2 {
  font: 700 clamp(22px, 2.4vw, 28px)/1.15 var(--font-display) !important;
  color: var(--ink) !important;
  margin: 0 0 10px !important;
  letter-spacing: -.01em !important;
  position: relative;
  padding-bottom: 10px;
  background: transparent !important;
  border: 0 !important;
  text-align: left !important;
}

#shippingEstimatorContent h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 4px;
  border-radius: 4px;
  background: var(--brand);
}

#shippingEstimatorContent .cartTotalsDisplay.important {
  background: var(--brand-tint) !important;
  color: var(--brand-deep) !important;
  border: 1px solid var(--brand-tint) !important;
  border-radius: var(--r-md) !important;
  padding: 10px 14px !important;
  font: 600 13.5px/1.4 var(--font-body) !important;
  margin: 0 0 18px !important;
}

#shippingEstimatorContent #seShipTo,
#shippingEstimatorContent .bold#seShipTo {
  font: 700 12px/1 var(--font-body) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute) !important;
  margin: 18px 0 12px !important;
  background: transparent !important;
  padding: 0 !important;
}

/* --- Address cards (logged-in customer) */
.pop-up-estimator-address-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 0 0 8px;
}

.pop-up-estimator-address {
  background: var(--surface) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  padding: 14px 16px !important;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
  position: relative;
}

.pop-up-estimator-address:hover {
  border-color: var(--ink) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.pop-up-estimator-address.selected {
  border-color: var(--brand) !important;
  background: var(--brand-tint) !important;
  box-shadow: 0 0 0 4px rgba(255, 90, 60, .12);
}

.pop-up-estimator-address.selected::after {
  content: "\f00c";
  /* check */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 10px;
  right: 12px;
  width: 22px;
  height: 22px;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.pop-up-estimator-address span {
  font: 500 13px/1.45 var(--font-body) !important;
  color: var(--ink) !important;
  display: block;
}

/* --- Country/state/sub-zone form (guest) */
.shippingEstimatorAddressContent {
  margin: 0 0 18px;
}

#shippingEstimatorZoneChooser {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
  background: transparent !important;
  margin: 0 !important;
}

#shippingEstimatorZoneChooser tr {
  background: transparent !important;
}

#shippingEstimatorZoneChooser th {
  background: transparent !important;
  text-align: left !important;
  vertical-align: middle !important;
  width: 140px;
  padding: 6px 14px 6px 0 !important;
  border: 0 !important;
  color: var(--ink-soft) !important;
}

#shippingEstimatorZoneChooser td {
  background: transparent !important;
  padding: 6px 0 !important;
  border: 0 !important;
}

#shippingEstimatorZoneChooser label.inputLabel {
  font: 600 12.5px/1 var(--font-body) !important;
  color: var(--ink) !important;
  letter-spacing: .02em;
}

#shippingEstimatorZoneChooser select {
  width: 100% !important;
  height: 42px;
  padding: 0 36px 0 16px !important;
  background: var(--surface-warm) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%235B5B5B' d='M6 9 1.5 4.5h9z'/%3E%3C/svg%3E") right 14px center / 12px no-repeat !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  font: 500 13.5px/1 var(--font-body) !important;
  color: var(--ink) !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

#shippingEstimatorZoneChooser select:focus {
  background-color: #fff !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px var(--brand-tint) !important;
}

#shippingEstimatorZoneChooser select[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

/* --- Quote results table */
#seQuoteResults {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 16px 0 0 !important;
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

#seQuoteResults tr.heading {
  background: var(--surface-warm) !important;
}

#seQuoteResults tr.heading th {
  background: transparent !important;
  font: 700 11.5px/1 var(--font-body) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute) !important;
  text-align: left !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
}

#seQuoteResults tr.heading th.text-right {
  text-align: right !important;
}

#seQuoteResults tr.DisplayedAddressLabeheading td.seDisplayedAddressLabel {
  background: var(--brand-tint) !important;
  color: var(--brand-deep) !important;
  font: 600 12.5px/1.5 var(--font-body) !important;
  padding: 10px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
}

#seQuoteResults tr.DisplayedAddressLabeheading .seDisplayedAddressInfo {
  display: block;
  margin-top: 4px;
  color: var(--ink) !important;
  font-weight: 500;
}

#seQuoteResults tbody tr,
#seQuoteResults tr {
  background: transparent !important;
}

#seQuoteResults td {
  background: transparent !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line-soft) !important;
  font: 500 14px/1.4 var(--font-body) !important;
  color: var(--ink) !important;
  vertical-align: middle !important;
}

#seQuoteResults tr:last-child td {
  border-bottom: 0 !important;
}

#seQuoteResults td.cartTotalDisplay {
  text-align: right !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

#seQuoteResults tr td.bold,
#seQuoteResults tr td.cartTotalDisplay.bold {
  background: var(--brand-tint) !important;
  color: var(--brand-deep) !important;
  font-weight: 700 !important;
}

#seQuoteResults tr td.cartTotalDisplay.bold {
  color: var(--brand) !important;
  font-size: 15.5px !important;
}

#seQuoteResults tr td.bold::before {
  content: "\f00c";
  /* check */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: inline-flex;
  width: 18px;
  height: 18px;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  margin-right: 8px;
  vertical-align: middle;
}

/* --- Mobile */
@media (max-width: 720px) {
  #shippingEstimatorContent {
    padding: 18px;
    margin: 14px;
    max-width: none;
  }

  #shippingEstimatorZoneChooser th {
    width: auto;
    display: block;
    padding: 0 0 4px !important;
  }

  #shippingEstimatorZoneChooser td {
    display: block;
    padding: 0 0 8px !important;
  }

  #shippingEstimatorZoneChooser tr {
    display: block;
    margin-bottom: 10px;
  }

  .pop-up-estimator-address-list {
    grid-template-columns: 1fr;
  }

  #seQuoteResults td {
    padding: 10px 12px !important;
  }
}


/* =========================================================================
   MOBILE RESPONSIVE — comprehensive coverage across every modified surface
   Stacks header cluster, cart table, contact panel, hero pills, and other
   sections at narrow widths so nothing overflows or breaks.
   ========================================================================= */

/* ---------- TABLET (<=1100px) ---------- */
@media (max-width: 1100px) {

  /* Header: tighten the cluster so the logo + search + profile + cart fit */
  #navMainWrapper {
    padding: 8px 16px !important;
  }

  #navMain {
    gap: 12px;
  }

  .dm-logo img {
    height: 36px !important;
  }

  #navMainSearch {
    max-width: 360px;
  }

  #navMainSearch .search-bar-input {
    padding: 0 16px !important;
  }

  /* Hide the customer name/wallet text in the profile pill — keep just the avatar */
  .profileBtn .profileContent {
    display: none !important;
  }

  .profileBtn {
    padding: 4px !important;
    width: 40px !important;
  }

  /* Hero: more breathing room, stack collage below text on tablet */
  .home-hero {
    padding: 36px 28px !important;
    gap: 24px !important;
  }

  .home-hero__title {
    font-size: clamp(30px, 4vw, 44px) !important;
  }

  /* Trust strip: 2-up */
  .home-trust {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Footer: 2 columns */
  .modern-footer__inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px;
  }

  /* Cart details: tighten padding */
  .cartDetails {
    padding: 22px !important;
    gap: 22px !important;
  }
}

/* ---------- LARGE MOBILE (<=720px) ---------- */
@media (max-width: 720px) {

  /* Body padding clears the fixed mobile bar plus a small 12px gap (no
     announce-strip on mobile so the +40px desktop spacer isn't needed). */
  body {
    /* padding-top: calc(var(--header-h, 60px) + 12px) !important; */
  }

  /* Tight top spacing for the homepage center column on mobile */
  #indexDefault {
    margin-top: 0px !important;
  }

  /* Mobile bar tweaks (template renders #navMainSearch1 instead of #navMainWrapper) */
  #navMainSearch1 {
    padding: 8px 2px !important;
  }

  #navMainSearch1 .menu-bars,
  #navMainSearch1 .SearchBtn {
    width: 36px;
    height: 36px;
  }

  #navMainSearch1 .mm-logo img {
    height: 32px !important;
  }

  /* Hero stacks fully; pills wrap to single column at very narrow */
  .home-hero {
    padding: 26px 18px !important;
    border-radius: var(--r-md);
    grid-template-columns: 1fr !important;
  }

  .home-hero__title {
    font-size: clamp(28px, 8vw, 38px) !important;
  }

  .home-hero__visual {
    max-width: 100%;
  }

  .home-hero__visual .tile--main {
    min-height: 220px;
    padding: 16px;
  }

  .home-hero__visual .tile--main img {
    max-height: 240px;
  }

  .home-hero__cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .home-hero__cta a {
    justify-content: center;
    width: 100%;
  }

  /* Trust strip: 2-up but pad less */
  .home-trust {
    gap: 8px !important;
  }

  .home-trust__item {
    padding: 12px 14px !important;
    gap: 10px !important;
  }

  .home-trust__icon {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }

  .home-trust__title {
    font-size: 12.5px !important;
  }

  .home-trust__sub {
    font-size: 11px !important;
  }

  /* Categories rail — 3 cols, smaller icons */
  .main_categories_panel {
    padding: 20px 16px !important;
  }

  .main_categories_panel .categories_list {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .main_categories_panel .categories_icon {
    width: 56px !important;
    height: 56px;
  }

  /* Contact panel — already stacks, just tighten padding */
  .contact_us_panel {
    padding: 22px !important;
  }

  .contact_us_panel a[target='_blank'] img {
    max-width: 100% !important;
  }

  /* Compact mobile cart card. Each <tr> is a flex column with three rows:
        [img] product name + attrs              [✕]
        ─────────────────────────────────────────
        [-  qty  +]                Subtotal: RMxx
     Unit price + total cells get hidden — subtotal is enough on mobile. */
  #cartContentsDisplay {
    display: block !important;
    width: 100% !important;
    border-spacing: 0 !important;
    margin-bottom: 16px;
  }

  #cartContentsDisplay tbody {
    display: block !important;
  }

  #cartContentsDisplay tr {
    display: flex !important;

    gap: 10px;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 12px !important;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-sm) !important;
    box-sizing: border-box;
    position: relative;
  }

  #cartContentsDisplay td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    background: transparent !important;
    min-height: 0;
  }

  /* === Row 1: image + name + attribs grid (smaller image on mobile) === */
  #cartContentsDisplay td.cartProductDisplay {
    order: 1;
    padding: 0 48px 0 0 !important;
    /* clear absolute trash button on the right */
    min-height: 0 !important;
    grid-template-columns: 80px minmax(0, 1fr) !important;
    column-gap: 10px !important;
  }

  #cartContentsDisplay .cartImage img {
    width: 80px !important;
    height: 80px !important;
  }

  #cartContentsDisplay .cartProdTitle {
    font: 600 13.5px/1.4 var(--font-body) !important;
  }

  .co-page .co-confirm__attrs li,
  .co-page ul.cartAttribsList li {

    padding: 6px !important;

  }

  .co-page .co-confirm__qty {

    margin-left: 1.5em;
  }

  #cartContentsDisplay.co-confirm__items .cartAttribsList {
    margin-left: 1.5em !important;
    /* indent under the title */
    margin-top: 0px !important;
  }

  #cartContentsDisplay .cartAttribsList {
    margin-left: 62px !important;
    /* indent under the title */
    margin-top: -2px !important;
  }

  /* Drop the legacy <br class="clearBoth"> between name and attributes */
  #cartContentsDisplay .cartProductDisplay br,
  #cartContentsDisplay td.cartProductDisplay br.clearBoth {
    display: none !important;
  }

  /* === Row 2: qty stepper (left) + subtotal (right) === */
  #cartContentsDisplay td.cartQuantity {
    order: 2;
  }

  #cartContentsDisplay td.cartTotalDisplay {
    order: 3;
  }

  /* Lay them side-by-side on the same flex row by giving them shared parent
     behavior via a wrapping pseudo? Not possible without DOM change.
     Instead: put both on order 2 and float them. */
  #cartContentsDisplay td.cartTotalDisplay {
    order: 2;
    text-align: right !important;
    margin-left: auto;
    font: 700 14.5px/1.2 var(--font-body) !important;
    color: var(--brand) !important;
    align-self: center;
  }

  /* Pair qty + subtotal on the same horizontal line */
  #cartContentsDisplay tr {
    flex-wrap: wrap;
  }

  #cartContentsDisplay td.cartProductDisplay {
    width: 100% !important;
  }

  #cartContentsDisplay td.cartQuantity {
    flex: 0 0 auto;
    align-self: center;
  }

  /* Hide unit price + remove default total label rendered by PHP */
  #cartContentsDisplay td.cartUnitDisplay {
    display: none !important;
  }

  .cartUnitDisplay b.hide,
  .cartTotalDisplay b.hide {
    display: none !important;
  }

  /* Trash button — absolute top-right corner */
  #cartContentsDisplay td.cartRemoveItemDisplay {
    position: absolute !important;
    top: 8px;
    right: 8px;
    width: 30px !important;
    padding: 0 !important;
  }

  #cartContentsDisplay td.cartRemoveItemDisplay a {
    width: 30px !important;
    height: 30px !important;
    margin: 0;
  }

  #cartContentsDisplay td.cartRemoveItemDisplay a img {
    width: 12px !important;
    height: 12px !important;
  }

  /* Compact quantity stepper — pill, 34px tall, balanced buttons */
  #cartContentsDisplay .cart-qty-modify {
    display: inline-flex !important;
    align-items: center;
    height: 34px !important;
    background: var(--surface-warm);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    overflow: hidden;
    padding: 0 !important;
  }

  #cartContentsDisplay .cart-qty-modify .cart-qty-minus,
  #cartContentsDisplay .cart-qty-modify .cart-qty-plus {
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ink) !important;
    font-size: 11px !important;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  #cartContentsDisplay .cart-qty-modify .cart-qty-minus:hover,
  #cartContentsDisplay .cart-qty-modify .cart-qty-plus:hover {
    color: var(--brand) !important;
    background: var(--brand-tint) !important;
  }

  #cartContentsDisplay .cart-qty-modify .cartProductQty,
  #cartContentsDisplay .cart-qty-modify input[type="number"] {
    width: 40px !important;
    height: 32px !important;
    font: 700 13px/1 var(--font-body) !important;
    background: transparent !important;
    border: 0 !important;
    text-align: center;
    outline: none !important;
    color: var(--ink) !important;
    padding: 0 !important;
  }

  /* Reminder text + "Order multiple of N" pills — keep on their own line */
  #cartContentsDisplay .remind-text {
    display: inline-block;

  }

  /* Keep cartDetails visible & block on mobile */
  #shoppingCartDefault .cartDetails {
    display: block !important;
  }

  #shoppingCartDefault {
    padding: 0 12px !important;
  }

  /* The mobile-PHP-rendered layout uses .productDisplay/.productDisplay2 — already styled */
  #cartContentsDisplay td .productDisplay {
    gap: 12px !important;
  }

  #cartContentsDisplay td .productDisplay2 {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
  }

  .cartProdTitle {
    font-size: 13.5px !important;
  }

  /* Cart action buttons stack and become full-width */
  #shoppingCartDefault .buttonRow.buttoncheckout,
  #shoppingCartDefault .buttonRow.back {
    text-align: center !important;
  }

  #shoppingCartDefault .buttonRow.buttoncheckout a,
  #shoppingCartDefault .buttonRow.buttoncheckout+.buttonRow.back a,
  #shoppingCartDefault .buttonRow.back a[href*="popupWindow"] {
    width: 100%;
    justify-content: center;
  }

  /* Shipping estimator: same already covered in earlier @media block */

  /* ============== FOOTER — MOBILE REDO (accordion) ============== */
  .modern-footer {
    padding-top: 32px !important;
    margin-top: 2px !important;
  }
  .modern-footer__inner {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 18px 16px !important;
  }

  /* Brand block: centered, more breathing room, larger social pills */
  .modern-footer__brand {
    text-align: center;
    padding: 0 0 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .modern-footer__brand h3 { font-size: 22px !important; }
  .modern-footer__brand p {
    margin: 0 auto 16px !important;
    max-width: 38ch !important;
    font-size: 13px !important;
  }
  .modern-footer__social { justify-content: center; gap: 12px !important; }
  .modern-footer__social a {
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, .08) !important;
    font-size: 15px !important;
    text-decoration: none;
  }

  /* Each column becomes a tappable accordion row */
  details.modern-footer__col {
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    padding: 0;
  }
  details.modern-footer__col > summary {
    cursor: pointer;
    padding: 16px 4px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  details.modern-footer__col > summary h4 {
    margin: 0 !important;
    font-size: 13px !important;
    letter-spacing: .12em;
  }
  details.modern-footer__col .modern-footer__chev {
    display: inline-block;
  }
  details.modern-footer__col[open] .modern-footer__chev {
    transform: rotate(180deg);
    color: var(--brand);
  }
  details.modern-footer__col > summary:hover .modern-footer__chev,
  details.modern-footer__col > summary:active .modern-footer__chev {
    color: var(--brand);
  }
  details.modern-footer__col > ul,
  details.modern-footer__col > .modern-footer__contact-row {
    padding-bottom: 16px;
  }
  details.modern-footer__col > ul { padding-top: 4px; }
  details.modern-footer__col li { margin-bottom: 12px !important; }
  details.modern-footer__col li:last-child { margin-bottom: 0 !important; }
  details.modern-footer__col a {
    font-size: 14px !important;
    color: #B7B3AB !important;
  }
  details.modern-footer__col .modern-footer__contact-row {
    margin-bottom: 0 !important;
    padding-top: 4px;
    padding-bottom: 12px;
    font-size: 12.5px !important;
  }
  details.modern-footer__col .modern-footer__contact-row + .modern-footer__contact-row {
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, .06);
  }

  .modern-footer__bottom {
    padding: 14px 18px !important;
    text-align: center;
  }
  .modern-footer__bottom-inner {
    justify-content: center !important;
    text-align: center;
  }

  .modern-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Sidebars on small screens stack below the center column.
     The legacy float layout will already wrap; just ensure they sit
     full-width and shed left/right margins. */
  #contentMainWrapper>div[class*="col"] {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 2px !important;
  }

  /* FAQ panel & general homepage panels */
  .faq_panel {
    padding: 18px 14px !important;
  }

  /* Section headings stay legible */
  .home-section__title,
  .centerBoxHeading,
  .faq_panel .headingTitle,
  .contact_us_panel .headingTitle,
  .main_categories_panel .headingTitle {
    font-size: 22px !important;
  }
}

/* ---------- SMALL MOBILE (<=480px) ---------- */
@media (max-width: 480px) {

  /* Hero — trim further */
  .home-hero {
    padding: 22px 16px !important;
  }

  .home-hero__visual .tile--badge {
    width: 84px !important;
    height: 84px !important;
    font-size: 23px !important;
    padding: 9px !important;
  }

  /* Trust strip: 1 column */
  .home-trust {
    grid-template-columns: 1fr !important;
  }

  /* Categories: 2 cols */
  .main_categories_panel .categories_list,
  .home-categories__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Centerbox product cards */
  .centerBoxWrapper .flexBar,
  .productsRecentViewContents.flexBar,
  .productsMayLikeContents.flexBar {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }

  /* Contact info table cells stay readable */
  .contact_us_panel .contact_information td:first-child,
  #contactUsDefault .contact_information td:first-child {
    width: 36px;
  }

  .contact_us_panel .contact_information i,
  #contactUsDefault .contact_information i {
    height: 30px !important;
    width: 30px !important;
    font-size: 12px !important;
  }

  /* Shipping estimator card */
  #shippingEstimatorContent {
    padding: 16px !important;
    margin: 10px !important;
  }

  /* Cart price inline labels: keep compact */
  .cartProdTitle {
    font-size: 13px !important;
  }

  /* Smaller checkout button on tiny phones */
  #shoppingCartDefault .buttonRow.buttoncheckout a {
    height: 48px;
    font-size: 14px !important;
    padding: 0 22px;
  }
}

/* Avoid horizontal scroll regardless of viewport width */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}


/* =========================================================================
   MOBILE OFF-CANVAS MENU (jQuery Mmenu plugin)
   Restyle the slide-in nav so it matches the modern aesthetic.
   ========================================================================= */

/* Outer panel surface */
.mm-menu,
.mm-panel,
.mm-panels,
.mm-listview {
  background: var(--surface) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
}

/* Top navbar (panel title) */
.mm-navbar {
  background: var(--surface-warm) !important;
  border-bottom: 1px solid var(--line) !important;
  height: 56px !important;
  padding: 0 !important;
}

.mm-navbar__title,
.mm-navbar>.mm-navbar__title {
  font: 700 15px/1 var(--font-display) !important;
  color: var(--ink) !important;
  letter-spacing: -.005em;
  text-align: center !important;
  padding: 18px 16px !important;
}

.mm-navbar__btn,
.mm-btn {
  color: var(--ink) !important;
  width: 56px !important;
}

.mm-btn:before,
.mm-btn:after {
  border-color: var(--ink) !important;
  border-width: 2px !important;
}

.mm-navbar__btn:hover {
  background: var(--brand-tint) !important;
}

.mm-navbar__btn:hover .mm-btn:before,
.mm-navbar__btn:hover .mm-btn:after {
  border-color: var(--brand-deep) !important;
}

/* List view (the menu rows) */
.mm-listview {
  list-style: none !important;
  margin: 0 !important;
  padding: 8px 0 !important;
}

.mm-listview .mm-listitem {
  border-bottom: 1px solid var(--line-soft) !important;
  background: transparent !important;
  position: relative;
}

.mm-listview .mm-listitem:last-child {
  border-bottom: 0 !important;
}

.mm-listitem:after,
.mm-listitem_divider:after {
  border-color: transparent !important;
}

/* Section heading (e.g. "Categories") */
.mm-listitem>span,
.mm-listview>li>span:not([class]) {
  display: block;
  padding: 14px 18px 8px !important;
  font: 700 11px/1 var(--font-body) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute) !important;
  background: var(--surface-warm) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* Menu links */
.mm-listitem .mm-listitem__text,
.mm-listitem a,
.mm-listview .mm-listitem a:not(.mm-btn) {
  display: flex !important;
  align-items: center;
  padding: 13px 18px !important;
  font: 600 14px/1.3 var(--font-body) !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  border-left: 3px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  background: transparent !important;
  border-top: 0 !important;
}

.mm-listitem .mm-listitem__text:hover,
.mm-listitem .mm-listitem__text:focus,
.mm-listitem a:hover,
.mm-listitem a:focus {
  background: var(--brand-tint) !important;
  color: var(--brand-deep) !important;
  border-left-color: var(--brand) !important;
}

/* Sub-panel toggle (chevron right button) */
.mm-listitem__btn {
  border-left-color: var(--line) !important;
  color: var(--ink) !important;
  background: transparent !important;
}

.mm-listitem__btn:hover {
  background: var(--brand-tint) !important;
}

.mm-listitem__btn:after {
  border-color: var(--ink-mute) !important;
  border-width: 2px !important;
  width: 8px !important;
  height: 8px !important;
  right: 22px !important;
}

.mm-listitem__btn:hover:after {
  border-color: var(--brand) !important;
}

/* Active item */
.mm-listitem_selected>.mm-listitem__text,
.mm-listitem_selected>a {
  background: var(--brand-tint) !important;
  color: var(--brand-deep) !important;
  border-left-color: var(--brand) !important;
}

/* Counters (when Mmenu adds counts on parent items) */
.mm-counter {
  background: var(--brand-tint);
  color: var(--brand-deep) !important;
  font: 600 11px/1 var(--font-body) !important;
  padding: 4px 8px !important;
  border-radius: var(--r-pill) !important;
  margin-right: 32px;
  text-indent: 0 !important;
}

/* Mmenu shadow override — softer */
.mm-menu_shadow-page,
.mm-menu_offcanvas {
  box-shadow: 0 0 40px rgba(22, 22, 22, .18) !important;
}

/* Page overlay (scrim) when menu is open — only #mm-blocker, not .mm-page
   (.mm-page is the wrapper around the entire page content). */
#mm-blocker {
  background: rgba(22, 22, 22, .45) !important;
}

/* Specials / What's New / Featured / Contact / FAQ — quick links section */
.mm-listview .mm-listitem a.category-links {
  background: var(--surface-warm) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

.mm-listview .mm-listitem a.category-links:hover {
  background: var(--brand-tint) !important;
  color: var(--brand-deep) !important;
}


/* =========================================================================
   MOBILE TOP BAR — clean redesign of #navMainSearch1
   The template renders this bar instead of the desktop nav when the server
   detects mobile/tablet, so this needs its own consistent styling.
   ========================================================================= */

#navMainSearch1 {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 12px !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm) !important;
}

#navMainSearch1>div {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

/* Remove the dated vertical divider lines */
#navMainSearch1 .v-divider {
  display: none !important;
}

/* Hamburger menu — square icon button with custom 3-line glyph */
#navMainSearch1 .menu-bars {
  width: 38px;
  height: 38px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border-radius: var(--r-md);
  background: var(--surface-warm);
  border: 1px solid var(--line);
  flex: 0 0 38px;
  transition: background .18s ease, border-color .18s ease;
  margin-right: 4px;
  padding: 0;
}

#navMainSearch1 .menu-bars:hover,
#navMainSearch1 .menu-bars:active {
  background: var(--brand-tint);
  border-color: var(--brand);
}

/* Custom 3-bar hamburger — varied widths for a branded look */
#navMainSearch1 .menu-bars .bar {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: background .18s ease, width .25s cubic-bezier(.4, 0, .2, 1), transform .25s cubic-bezier(.4, 0, .2, 1);
}

#navMainSearch1 .menu-bars .bar1 {
  width: 16px;
}

#navMainSearch1 .menu-bars .bar2 {
  width: 12px;
}

#navMainSearch1 .menu-bars .bar3 {
  width: 16px;
}

#navMainSearch1 .menu-bars:hover .bar {
  background: var(--brand-deep);
}

#navMainSearch1 .menu-bars:hover .bar2 {
  width: 16px;
}

/* Hide any leftover FA icon if cached */
#navMainSearch1 .menu-bars i {
  display: none !important;
}

/* Logo */
#navMainSearch1 .mm-logo {
  display: flex !important;
  align-items: center;
}

#navMainSearch1 .mm-logo a {
  display: block;
  line-height: 0;
}

#navMainSearch1 .mm-logo img {
  height: 30px !important;
  width: auto !important;
  display: block;
}

/* Right-side icon buttons — uniform 38x38 squircles */
#navMainSearch1 .SearchBtn,
#navMainSearch1 .topBarNav .profileBtn,
#navMainSearch1 .profileDropDown .profileBtn,
#navMainSearch1 .shoppingCartDropDownBtn {
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: var(--r-md) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 38px;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .15s ease;
}

#navMainSearch1 .SearchBtn,
#navMainSearch1 .topBarNav .profileBtn,
#navMainSearch1 .profileDropDown .profileBtn {
  background: var(--surface-warm) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

#navMainSearch1 .SearchBtn:hover,
#navMainSearch1 .topBarNav .profileBtn:hover,
#navMainSearch1 .profileDropDown .profileBtn:hover {
  background: var(--brand-tint) !important;
  border-color: var(--brand) !important;
  color: var(--brand-deep) !important;
}

#navMainSearch1 .SearchBtn i,
#navMainSearch1 .topBarNav .profileBtn i {
  font-size: 13px;
}

#navMainSearch1 .profileDropDown .profileBtn .avatar {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50%;
  margin: 0 !important;
  object-fit: cover;
}

/* Cart button — solid ink, brand on hover */
#navMainSearch1 .shoppingCartDropDownBtn {
  background: var(--ink) !important;
  border: 0 !important;
  color: #fff !important;
}

#navMainSearch1 .shoppingCartDropDownBtn:hover {
  background: var(--brand) !important;
  transform: translateY(-1px);
}

#navMainSearch1 .shoppingCartDropDownBtn i {
  font-size: 13px;
}

#navMainSearch1 .shoppingCartDropDown {
  position: relative;
}

#navMainSearch1 .shopping-cart-badge.badge {
  position: absolute !important;
  top: -3px !important;
  right: -3px !important;
  background: var(--brand) !important;
  color: #fff !important;
  border: 2px solid var(--surface);
  font: 700 10px/1 var(--font-body) !important;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Discount wallet pill — mint-tint badge with icon + balance only.
   Padding is mobile-only (10px 8px); desktop uses its own .profileBtn
   .discountWallet rule above and is unaffected by this block. */
#navMainSearch1 .discountWallet {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 38px;
  border-radius: var(--r-md);
  background: var(--mint-tint) !important;
  border: 1px solid transparent;
  color: var(--mint) !important;
  text-decoration: none !important;
  transition: background .18s ease, color .18s ease;
}

@media (max-width: 720px) {
  #navMainSearch1 .discountWallet {
    padding: 10px 8px !important;
  }
}

/* Hide the wallet pill on phones <=420px. Placed AFTER the
   `display: inline-flex !important` rule above (same specificity, both
   !important) so the cascade resolves in our favour. */
@media (max-width: 420px) {
  #navMainSearch1 .discountWallet {
    display: none !important;
  }
}

#navMainSearch1 .discountWallet label {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  margin: 0 !important;
  font: 700 12px/1 var(--font-body) !important;
  color: var(--mint) !important;
  letter-spacing: .01em;
  cursor: pointer;
  background: transparent !important;
  padding: 0 !important;
}

#navMainSearch1 .discountWallet i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: var(--mint) !important;
}

#navMainSearch1 .discountWallet .text {
  display: none !important;
}

/* hide "Show Details" */
#navMainSearch1 .discountWallet:hover {
  background: var(--mint) !important;
}

#navMainSearch1 .discountWallet:hover label,
#navMainSearch1 .discountWallet:hover i {
  color: #fff !important;
}

/* Popout search bar — sits below the mobile icon row in normal flow.
   Shrinks via .is-hidden when the user scrolls down (set by JS in
   tpl_header.php), expands again when scrolling back up. */
.popoutSearchBar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 6px 12px !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
  max-height: 80px;
  transition: max-height .25s ease, padding .25s ease, border-bottom-width .25s ease, opacity .2s ease;
  opacity: 1;
}

.popoutSearchBar.is-hidden,
body .popoutSearchBar.is-hidden {
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom-width: 0 !important;
  opacity: 0 !important;
  transform: translateY(-100%) !important;
  pointer-events: none;
  visibility: hidden;
}

.popoutSearchBar .search-bar form,
.popoutSearchBar .search-bar form[name="quick_find_header"] {
  display: flex !important;
  align-items: center;
  background: var(--surface-warm) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  height: 36px;
  overflow: hidden;
  padding: 0 !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.popoutSearchBar .search-bar form:focus-within {
  background: #fff !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px var(--brand-tint) !important;
}

.popoutSearchBar .search-box {
  display: flex !important;
  align-items: center;
  width: 100%;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.popoutSearchBar .search-bar-input,
.popoutSearchBar input[type="text"] {
  flex: 1 1 auto !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  font: 500 13px/1.4 var(--font-body) !important;
  color: var(--ink) !important;
  padding: 0 16px !important;
  height: 32px !important;
  margin: 0 !important;
}

/* Defeat the legacy global input { margin-bottom: 10px } for all search inputs */
#navMainSearch input.search-bar-input,
#navMainSearch input[type="text"],
.popoutSearchBar input.search-bar-input,
.popoutSearchBar input[type="text"] {
  margin: 0 !important;
}

.popoutSearchBar input.cssButton,
.popoutSearchBar input.button_search {
  display: none !important;
}

.popoutSearchBar .search-box-submit {
  width: 28px;
  height: 28px;
  background: var(--brand) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 50%;
  margin: 0 3px 0 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.popoutSearchBar .search-box-submit:hover {
  background: var(--brand-deep) !important;
}

.popoutSearchBar .search-box-submit i {
  color: #fff !important;
  font-size: 12px;
}

/* Tighten further on very narrow phones */
@media (max-width: 380px) {
  #navMainSearch1 {
    padding: 6px 8px !important;
    gap: 4px;
  }

  #navMainSearch1 .menu-bars,
  #navMainSearch1 .SearchBtn,
  #navMainSearch1 .topBarNav .profileBtn,
  #navMainSearch1 .profileDropDown .profileBtn,
  #navMainSearch1 .shoppingCartDropDownBtn {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px;
  }

  #navMainSearch1 .mm-logo img {
    height: 26px !important;
  }

  #navMainSearch1 .discountWallet {
    padding: 10px 8px !important;
    height: 34px;
  }

  #navMainSearch1 .discountWallet label {
    font-size: 11px !important;
  }
}


/* =========================================================================
   MOBILE: search bar always visible below the top icon row.
   The search-icon trigger is hidden; .popoutSearchBar is pinned in normal
   flow inside the fixed header (no slide-down animation).
   Desktop layout is untouched.
   ========================================================================= */

@media (max-width: 720px) {

  /* Hide the search-icon button — search is permanently visible below */
  #navMainSearch1 .SearchBtn {
    display: none !important;
  }

  /* Force the popout bar to render in normal flow inside the fixed header */
  .popoutSearchBar,
  .popoutSearchBar.animate {
    display: block !important;
    position: static !important;
    top: auto !important;
    width: 100% !important;
    z-index: auto !important;
    transform: none !important;
    animation: none !important;
  }

  /* Bump fixed-header height to clear the icon row + (slimmer) search bar */
  :root {
    --header-h: 108px;
  }
}

@media (max-width: 380px) {
  :root {
    --header-h: 100px;
  }
}


/* =========================================================================
   HOMEPAGE PRODUCT CAROUSELS — horizontal scroll instead of vertical stack
   Applies to every product grid: categoriesPdList, Featured, Specials,
   New Products, Recent View, You May Like.
   ========================================================================= */

#indexDefault .centerBoxWrapper .flexBar,
#indexDefault .productsRecentViewContents.flexBar,
#indexDefault .productsMayLikeContents.flexBar,
.categoriesPdList .flexBar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  align-items: stretch !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 12px;
  padding: 4px 4px 14px !important;
  margin: 0 -4px !important;
  /* nudge cards flush with section edges */
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  justify-content: flex-start;

}

/* Each product card becomes a fixed-width horizontal slide */
#indexDefault .flexATTRibute.centerBoxContentsCategories.centeredContent,
#indexDefault .flexATTRibute.centerBoxContentsFeatured.centeredContent,
#indexDefault .flexATTRibute.centerBoxContentsSpecials.centeredContent,
#indexDefault .flexATTRibute.centerBoxContentsNew.centeredContent,
#indexDefault .flexATTRibute.centerBoxContentsProductsRecentView.centeredContent,
#indexDefault .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent,
.categoriesPdList .flexATTRibute.centerBoxContentsCategories.centeredContent {
  flex: 0 0 auto !important;
  width: 260px !important;
  height: auto !important;
  margin: 0 !important;
  scroll-snap-align: start;
}

/* WebKit scrollbar styling — slim, subtle, brand on hover */
#indexDefault .centerBoxWrapper .flexBar::-webkit-scrollbar,
#indexDefault .productsRecentViewContents.flexBar::-webkit-scrollbar,
#indexDefault .productsMayLikeContents.flexBar::-webkit-scrollbar,
.categoriesPdList .flexBar::-webkit-scrollbar {
  height: 8px;
}

#indexDefault .centerBoxWrapper .flexBar::-webkit-scrollbar-track,
#indexDefault .productsRecentViewContents.flexBar::-webkit-scrollbar-track,
#indexDefault .productsMayLikeContents.flexBar::-webkit-scrollbar-track,
.categoriesPdList .flexBar::-webkit-scrollbar-track {
  background: transparent;
}

#indexDefault .centerBoxWrapper .flexBar::-webkit-scrollbar-thumb,
#indexDefault .productsRecentViewContents.flexBar::-webkit-scrollbar-thumb,
#indexDefault .productsMayLikeContents.flexBar::-webkit-scrollbar-thumb,
.categoriesPdList .flexBar::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}

#indexDefault .centerBoxWrapper .flexBar::-webkit-scrollbar-thumb:hover,
#indexDefault .productsRecentViewContents.flexBar::-webkit-scrollbar-thumb:hover,
#indexDefault .productsMayLikeContents.flexBar::-webkit-scrollbar-thumb:hover,
.categoriesPdList .flexBar::-webkit-scrollbar-thumb:hover {
  background: var(--brand);
}

/* Slightly smaller cards on mobile so 1.5–2 cards peek into view */
@media (max-width: 720px) {

  #indexDefault .flexATTRibute.centerBoxContentsCategories.centeredContent,
  #indexDefault .flexATTRibute.centerBoxContentsFeatured.centeredContent,
  #indexDefault .flexATTRibute.centerBoxContentsSpecials.centeredContent,
  #indexDefault .flexATTRibute.centerBoxContentsNew.centeredContent,
  #indexDefault .flexATTRibute.centerBoxContentsProductsRecentView.centeredContent,
  .categoriesPdList .flexATTRibute.centerBoxContentsCategories.centeredContent {
    width: 200px !important;
  }
}

@media (max-width: 480px) {

  #indexDefault .flexATTRibute.centerBoxContentsCategories.centeredContent,
  #indexDefault .flexATTRibute.centerBoxContentsFeatured.centeredContent,
  #indexDefault .flexATTRibute.centerBoxContentsSpecials.centeredContent,
  #indexDefault .flexATTRibute.centerBoxContentsNew.centeredContent,
  #indexDefault .flexATTRibute.centerBoxContentsProductsRecentView.centeredContent,
  .categoriesPdList .flexATTRibute.centerBoxContentsCategories.centeredContent {
    width: 170px !important;
  }
}


/* =========================================================================
   CART CARD-STACK LAYOUT — TABLET (≤1024px, >720px)
   At in-between widths the desktop 5-column cart overflows into the sidebar.
   Switch to a vertical card-stack starting earlier.
   ========================================================================= */
@media (max-width: 1024px) and (min-width: 721px) {

  /* The 3-column legacy layout doesn't fit at this width — hide sidebars on
     EVERY page and let the center column take full width. */
  #contentMainWrapper>div[class*="col"]:first-child,
  #contentMainWrapper>div[class*="col"]:last-child {
    display: none !important;
  }

  #contentMainWrapper>div[class*="col"]:nth-child(2),
  #contentMainWrapper {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }

  .onerow-fluid>[class*="col"] {
    width: 100% !important;
    margin-left: 0 !important;
    float: none !important;
  }

  /* Keep table + tr in their natural display (table / table-row).
     Only stack the cells: each <td> renders as a full-width block.
     `border-spacing: 0 12px` adds a vertical gap between rows (margin
     doesn't work on table-row). */
  #cartContentsDisplay {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
  }

  #cartContentsDisplay tbody {
    width: 100% !important;
  }

  #cartContentsDisplay tr {

    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 14px 14px 14px 14px !important;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-sm) !important;
    box-sizing: border-box;
    position: relative;
  }

  #cartContentsDisplay td {

    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
  }

  /* Cell ordering: name first, qty second, subtotal third. Trash absolute. */
  #cartContentsDisplay td.cartProductDisplay {
    /* clear absolute trash button */
    grid-template-columns: 84px minmax(0, 1fr) !important;
    column-gap: 12px !important;
  }

  #cartContentsDisplay .cartImage img {
    width: 84px !important;
    height: 84px !important;
  }

  /* Subtotal: right-aligned, bold coral, with "Subtotal:" prefix */
  #cartContentsDisplay td.cartTotalDisplay {
    text-align: right !important;
    font: 700 15px/1.2 var(--font-body) !important;
    color: var(--brand) !important;
    padding: 4px 15px 0 !important;
    border-top: 1px dashed var(--line-soft);
    margin-top: 6px !important;
  }

  /* Hide unit price (subtotal already conveys it) and PHP labels */
  #cartContentsDisplay td.cartUnitDisplay {
    display: none !important;
  }

  .cartUnitDisplay b.hide,
  .cartTotalDisplay b.hide {
    display: none !important;
  }

  /* Trash → absolute top-right */
  #cartContentsDisplay td.cartRemoveItemDisplay {
    position: absolute !important;
    top: 10px;
    right: 10px;
    width: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #cartContentsDisplay td.cartRemoveItemDisplay a {
    width: 32px !important;
    height: 32px !important;
    margin: 0;
  }

  /* Cart details: stack to single column */
  .cartDetails {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}


/* =========================================================================
   ADVANCED SEARCH RESULTS PAGE — #advSearchResultsDefault
   Each category-bucket section becomes a clean card with a horizontal-scroll
   carousel of product cards.
   ========================================================================= */

#advSearchResultsDefault {
  max-width: 1280px;
  margin: 24px auto 60px;
  padding: 0 24px;
}

#advSearchResultsDefaultHeading {
  font: 700 clamp(28px, 3vw, 38px)/1.1 var(--font-display) !important;
  color: var(--ink) !important;
  margin: 0 0 18px !important;
  letter-spacing: -.02em !important;
  position: relative;
  padding-bottom: 12px;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
}

#advSearchResultsDefaultHeading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 4px;
  border-radius: 4px;
  background: var(--brand);
}

/* Filter sorter (alpha) */
#advSearchResultsDefault #filter-wrapper {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  padding: 12px 16px !important;
  margin: 0 0 18px !important;
  font: 500 13px/1.4 var(--font-body) !important;
  color: var(--ink-soft) !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

#advSearchResultsDefault #filter-wrapper select,
#advSearchResultsDefault #filter-wrapper input[type="text"] {
  background: var(--surface-warm) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  height: 36px !important;
  padding: 0 14px !important;
  font: 500 13px/1 var(--font-body) !important;
  color: var(--ink) !important;
  outline: none !important;
  margin: 0 !important;
}

#advSearchResultsDefault #filter-wrapper select:focus,
#advSearchResultsDefault #filter-wrapper input:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-tint);
}

#advSearchResultsDefault #filter-wrapper a {
  color: var(--brand) !important;
  font-weight: 600;
}

/* Each category section becomes a soft-shadow card */
#advSearchResultsDefault .productsProductCategoriesView, #indexProductList .productsProductCategoriesView, #indexCategories .productsProductCategoriesView {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 0px !important;
  margin: 0 0 20px !important;
}

/* Section heading row */
#advSearchResultsDefault .productLinkCategories, #indexProductList .productLinkCategories, #indexCategories .productLinkCategories {
  display: block !important;
  text-decoration: none !important;
  color: var(--ink) !important;
  margin-bottom: 14px;
  border-radius: var(--r-lg) !important;
}

#advSearchResultsDefault .ProductCategorieheadingTitle, #indexProductList .ProductCategorieheadingTitle, #indexCategories .ProductCategorieheadingTitle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: 700 clamp(18px, 1.8vw, 22px)/1.2 var(--font-display) !important;
  color: var(--ink) !important;
  margin: 0 !important;
  letter-spacing: -.005em;
  position: relative;
  padding: 10px;
}

#advSearchResultsDefault .ProductCategorieheadingTitle::after,
#indexProductList .ProductCategorieheadingTitle::after,
#indexCategories .ProductCategorieheadingTitle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: var(--brand);
}

#advSearchResultsDefault .productLinkCategories:hover .ProductCategorieheadingTitle,
#indexProductList .productLinkCategories:hover .ProductCategorieheadingTitle,
#indexCategories .productLinkCategories:hover .ProductCategorieheadingTitle {
  color: var(--brand) !important;
}

.productsProductCategoriesView .viewAllProduct {
  text-decoration: none !important;
}

/* "[VIEW ALL]" — redesigned: hide the legacy bracketed text and render
   "View All" + a circular chevron arrow that animates on hover. */
#advSearchResultsDefault .viewAllProduct, #indexProductList .viewAllProduct, #indexCategories .viewAllProduct {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 6px 0 14px !important;
  margin-left: auto;
  background: var(--surface-warm) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  font-size: 0 !important;
  /* hide the legacy "[VIEW ALL]" text */
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#advSearchResultsDefault .viewAllProduct::before,
#indexProductList .viewAllProduct::before,
#indexCategories .viewAllProduct::before {
  content: "View all";
  font: 600 12px/1 var(--font-body);
  letter-spacing: .01em;
  color: var(--brand);
  text-transform: none !important;
  text-decoration: none !important;
}

#advSearchResultsDefault .viewAllProduct::after,
#indexProductList .viewAllProduct::after,
#indexCategories .viewAllProduct::after {
  content: "\f054";
  /* Font Awesome chevron-right */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 9px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  transition: transform .25s ease, background .18s ease;
}

#advSearchResultsDefault .productLinkCategories:hover .viewAllProduct,
#indexProductList .productLinkCategories:hover .viewAllProduct,
#indexCategories .productLinkCategories:hover .viewAllProduct {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 8px 18px -8px rgba(255, 90, 60, .5);
  transform: translateY(-1px);
}

#advSearchResultsDefault .productLinkCategories:hover .viewAllProduct::before,
#indexProductList .productLinkCategories:hover .viewAllProduct::before,
#indexCategories .productLinkCategories:hover .viewAllProduct::before {
  color: #fff;
}

#advSearchResultsDefault .productLinkCategories:hover .viewAllProduct::after,
#indexProductList .productLinkCategories:hover .viewAllProduct::after,
#indexCategories .productLinkCategories:hover .viewAllProduct::after {
  background: rgba(255, 255, 255, .22);
  transform: translateX(4px);
}

/* Cards — horizontal-scroll carousel inside each category section */
#advSearchResultsDefault .productsProductCategoriesViewContents, #indexProductList .productsProductCategoriesViewContents, #indexCategories .productsProductCategoriesViewContents {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 12px;
  padding: 4px 4px 14px !important;
  margin: 0 5px !important;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

#advSearchResultsDefault .productsProductCategoriesViewContents::-webkit-scrollbar,
#indexProductList .productsProductCategoriesViewContents::-webkit-scrollbar,
#indexCategories .productsProductCategoriesViewContents::-webkit-scrollbar {
  height: 8px;
}

#advSearchResultsDefault .productsProductCategoriesViewContents::-webkit-scrollbar-track,
#indexProductList .productsProductCategoriesViewContents::-webkit-scrollbar-track,
#indexCategories .productsProductCategoriesViewContents::-webkit-scrollbar-track {
  background: transparent;
}

#advSearchResultsDefault .productsProductCategoriesViewContents::-webkit-scrollbar-thumb,
#indexProductList .productsProductCategoriesViewContents::-webkit-scrollbar-thumb,
#indexCategories .productsProductCategoriesViewContents::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}

#advSearchResultsDefault .productsProductCategoriesViewContents::-webkit-scrollbar-thumb:hover,
#indexProductList .productsProductCategoriesViewContents::-webkit-scrollbar-thumb:hover,
#indexCategories .productsProductCategoriesViewContents::-webkit-scrollbar-thumb:hover {
  background: var(--brand);
}

/* Each product card — fixed-width horizontal slide */
#advSearchResultsDefault .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent, #indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent, #indexCategories .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent,
#advSearchResultsDefault .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent, #indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent, #indexCategories .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent[style] {
  flex: 0 0 auto !important;
  width: 200px !important;
  height: auto !important;
  margin: 0 !important;
  scroll-snap-align: start;
}

/* Card layout — match the homepage: image, 2-line name clamp, price at bottom. */
#advSearchResultsDefault .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent, #indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent, #indexCategories .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: center !important;
  height: auto !important;
  padding: 12px !important;
  position: relative;
}

/* Product name — 2-line clamp with reserved height (no overlap with price) */
#advSearchResultsDefault a.column-product-name, #indexProductList a.column-product-name, #indexCategories a.column-product-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  word-break: break-word;
  height: calc(15px * 1.4 * 2) !important;
  min-height: calc(13px * 1.4 * 2) !important;
  font: 500 13px/1.4 var(--font-body) !important;
  color: var(--ink) !important;
  margin: 8px 0 0 !important;
  text-decoration: none !important;
  text-align: center !important;
}

/* Price block — anchored to the bottom of the card, centered */
#advSearchResultsDefault .list-price,
#indexProductList .list-price,
#indexCategories .list-price {
  margin-top: auto !important;
  padding-top: 10px;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 2px;
  text-decoration: none !important;
}

#advSearchResultsDefault .list-price>*,
#indexProductList .list-price>*,
#indexCategories .list-price>* {
  text-align: center !important;
  align-self: center !important;
  text-decoration: none;
}

#advSearchResultsDefault .list-price .normalprice,
#advSearchResultsDefault .list-price s.normalprice,
#advSearchResultsDefault .list-price s.productSpecialPriceSale,
#indexProductList .list-price .normalprice,
#indexProductList .list-price s.normalprice,
#indexProductList .list-price s.productSpecialPriceSale,
#indexCategories .list-price .normalprice,
#indexCategories .list-price s.normalprice,
#indexCategories .list-price s.productSpecialPriceSale {
  color: var(--ink-mute) !important;
  font: 500 12px/1.2 var(--font-body) !important;
  text-decoration: line-through !important;
}

#advSearchResultsDefault .list-price .productSpecialPrice,
#advSearchResultsDefault .list-price .normalprice+.productSpecialPrice,
#indexProductList .list-price .productSpecialPrice,
#indexProductList .list-price .normalprice+.productSpecialPrice,
#indexCategories .list-price .productSpecialPrice,
#indexCategories .list-price .normalprice+.productSpecialPrice {
  color: var(--brand) !important;
  font: 700 15px/1 var(--font-body) !important;
  text-decoration: none !important;
}

#advSearchResultsDefault .list-price .productBasedPrice,
#indexProductList .list-price .productBasedPrice,
#indexCategories .list-price .productBasedPrice {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  justify-content: center;
}

#advSearchResultsDefault .list-price i.priceshown,
#indexProductList .list-price i.priceshown,
#indexCategories .list-price i.priceshown {
  font-style: normal !important;
  color: var(--brand) !important;
  font: 700 15px/1 var(--font-body) !important;
  text-decoration: none !important;
}

#advSearchResultsDefault .list-price i.productUOM,
#indexProductList .list-price i.productUOM,
#indexCategories .list-price i.productUOM {
  font-style: normal !important;
  color: var(--ink-mute) !important;
  font: 500 11px/1 var(--font-body) !important;
  text-decoration: none !important;
}

/* "Save: x% off" tag */
#advSearchResultsDefault .productPriceDiscount, #indexProductList .productPriceDiscount, #indexCategories .productPriceDiscount {
  display: inline-block;
  background: var(--mint-tint);
  color: var(--mint) !important;
  font: 600 10.5px/1 var(--font-body) !important;
  letter-spacing: .04em;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  margin-top: 4px;
}

#advSearchResultsDefault .productPriceDiscount, #indexProductList .productPriceDiscount, #indexCategories .productPriceDiscount br {
  display: none;
}

/* Sold Out badge — compact neutral pill, centered. Uses a thin clock icon
   to signal "temporarily unavailable / check back later". */
#advSearchResultsDefault .button_sold_out_sm, #indexProductList .button_sold_out_sm, #indexCategories .button_sold_out_sm,
#advSearchResultsDefault span.cssButton.button_sold_out_sm, #indexProductList span.cssButton.button_sold_out_sm, #indexCategories span.cssButton.button_sold_out_sm,
#advSearchResultsDefault span.cssButton.normal_button.button_sold_out_sm, #indexProductList span.cssButton.normal_button.button_sold_out_sm, #indexCategories span.cssButton.normal_button.button_sold_out_sm {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  background: var(--surface-warm) !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  padding: 4px 10px !important;
  margin: 0 auto !important;
  font: 600 10px/1 var(--font-body) !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: not-allowed;
  white-space: nowrap;
  width: auto;
  max-width: max-content;
}

#advSearchResultsDefault .button_sold_out_sm::before,
#indexProductList .button_sold_out_sm::before,
#indexCategories .button_sold_out_sm::before {
  content: "\f017";
  /* Font Awesome clock — "check back later" */
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  /* regular = thin outline */
  font-size: 10px;
  color: var(--ink-mute);
}

/* Sold-out cards keep their image in full color (filter removed) */

/* Mobile / tablet */
@media (max-width: 1024px) {
  #advSearchResultsDefault {
    padding: 0 16px;
  }

  #advSearchResultsDefault .productsProductCategoriesView, #indexProductList .productsProductCategoriesView, #indexCategories .productsProductCategoriesView {
    padding: 18px !important;
  }

  #advSearchResultsDefault .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent, #indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent, #indexCategories .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent,
  #advSearchResultsDefault .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent, #indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent, #indexCategories .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent[style] {
    width: 170px !important;
  }
}

@media (max-width: 720px) {
  #advSearchResultsDefault {
    padding: 0 12px;
    margin: 40px auto 40px;
  }

  #advSearchResultsDefault .productsProductCategoriesView, #indexProductList .productsProductCategoriesView, #indexCategories .productsProductCategoriesView {
    padding: 0px !important;
  }

  #advSearchResultsDefault .ProductCategorieheadingTitle, #indexProductList .ProductCategorieheadingTitle, #indexCategories .ProductCategorieheadingTitle {
    font-size: 17px !important;
  }

  #advSearchResultsDefault .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent, #indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent, #indexCategories .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent,
  #advSearchResultsDefault .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent, #indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent, #indexCategories .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent[style] {
    width: 170px !important;
  }

}

/* --- Advanced-search image wrapper + empty state ---------------------- */
#advSearchResultsDefault .advsr-image,
#indexProductList .advsr-image,
#indexCategories .advsr-image {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--bg);
}

#advSearchResultsDefault .advsr-image img,
#indexProductList .advsr-image img,
#indexCategories .advsr-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 10px;
  background: var(--surface);
  transition: transform .35s ease;
  display: block;
}

#advSearchResultsDefault .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent:hover .advsr-image img,
#indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent:hover .advsr-image img,
#indexCategories .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent:hover .advsr-image img {
  transform: scale(1.04);
}

/* Empty state when search returns no products */
.advsr-empty {
  margin: 0 auto;
  max-width: 520px;
  padding: 60px 28px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.advsr-empty>i {
  font-size: 38px;
  color: var(--ink-mute);
  opacity: .55;
  margin-bottom: 10px;
}

.advsr-empty strong {
  font: 700 17px/1.3 var(--font-display);
  color: var(--ink);
}

.advsr-empty span {
  font: 500 13.5px/1.5 var(--font-body);
  color: var(--ink-soft);
  margin-bottom: 14px;
}

.advsr-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff !important;
  border-radius: 999px;
  font: 700 12.5px/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 6px 16px -4px rgba(214, 62, 34, .40);
}

.advsr-empty__cta i {
  font-size: 11px;
  transition: transform .2s ease;
}

.advsr-empty__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -4px rgba(214, 62, 34, .50);
  color: #fff;
}

.advsr-empty__cta:hover i {
  transform: translateX(3px);
}

/* Pre-Order pill — match the listing-page styling, centered in .list-price */
#advSearchResultsDefault .list-price .button_preorder,
#indexProductList .list-price .button_preorder,
#indexCategories .list-price .button_preorder {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  margin: 4px auto 0 !important;
  padding: 4px 10px !important;
  background: #DCF3E8 !important;
  border: 1px solid rgba(11, 110, 85, .22) !important;
  border-radius: 999px !important;
  font: 700 10.5px/1 var(--font-body) !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: #0B6E55 !important;
  white-space: nowrap !important;
}

#advSearchResultsDefault .list-price .button_preorder::before,
#indexProductList .list-price .button_preorder::before,
#indexCategories .list-price .button_preorder::before {
  content: "\f017";
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  margin-right: 6px;
  font-size: 10px;
  color: var(--mint);
}


/* =========================================================================
   CATEGORY LISTING PAGE — #indexProductList
   Styles the breadcrumb, page heading, optional category-description card,
   sub-category grid, and product listing rows.
   ========================================================================= */

#indexProductList {
  max-width: 1280px;
  margin: 24px auto 60px;
  padding: 0 24px;
}

/* ----- Breadcrumb ----- */
#indexProductList .cBreadCrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font: 500 12.5px/1 var(--font-body);
  color: var(--ink-mute);
  margin: 0 0 16px;
  padding: 8px 14px;
  background: var(--surface-warm);
  border-radius: var(--r-pill);
  width: fit-content;
  max-width: 100%;
}

#indexProductList .cBreadCrumb a.breadCrumbText,
#indexProductList .cBreadCrumb label.breadCrumbText {
  color: var(--ink-soft) !important;
  text-decoration: none !important;
  font: 500 12.5px/1 var(--font-body) !important;
  letter-spacing: .01em;
}

#indexProductList .cBreadCrumb a.breadCrumbText:hover {
  color: var(--brand) !important;
}

#indexProductList .cBreadCrumb label.breadCrumbText {
  color: var(--ink) !important;
  font-weight: 700 !important;
}

#indexProductList .cBreadCrumb .breadcrumbRight {
  color: var(--ink-mute);
  font-size: 11px;
  opacity: .55;
}

#indexProductList .cBreadCrumb a.breadCrumbText i.fa-home {
  color: var(--ink) !important;
  font-size: 12px;
}

/* ----- Page heading + category image ----- */
#indexProductList #cat-top {
  margin: 0 0 22px;
}

#indexProductList #cat-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

#indexProductList #productListHeading {
  font: 700 clamp(26px, 3vw, 36px)/1.1 var(--font-display) !important;
  color: var(--ink) !important;
  margin: 0 !important;
  letter-spacing: -.02em !important;
  position: relative;
  padding-bottom: 12px;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
}

#indexProductList #productListHeading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 4px;
  border-radius: 4px;
  background: var(--brand);
}

#indexProductList #categoryImgListing img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 6px;
}

/* ----- Category description card (with image + social-link table) ----- */
#indexProductList #categoryDescription {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 20px !important;
  margin: 0 0 22px !important;
  display: flex;
  align-items: stretch;
  gap: 22px;
}

#indexProductList #categoryDescription.dual {
  flex-direction: row;
}

#indexProductList #categoryDescription.single {
  flex-direction: column;
}

#indexProductList #categoryDescription .descriptionImg {
  flex: 0 0 220px;
  position: relative;
}

#indexProductList #categoryDescription .descriptionImg img {
  width: 100%;
  max-width: 220px;
  height: auto;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}

#indexProductList #categoryDescription .v-divider {
  display: none;
}

#indexProductList #categoryDescription .descriptionCont {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#indexProductList #categoryDescription .descriptionContText {
  font: 500 14px/1.6 var(--font-body) !important;
  color: var(--ink-soft) !important;
}

#indexProductList #categoryDescription .descriptionContact table {
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
}

#indexProductList #categoryDescription .descriptionContact td {
  padding: 4px 8px !important;
  vertical-align: middle;
  font: 500 13px/1.4 var(--font-body) !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: 0 !important;
}

#indexProductList #categoryDescription .descriptionContact td:first-child {
  width: 32px;
}

#indexProductList #categoryDescription .descriptionContact i.link {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-warm);
  color: var(--ink-soft) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border: 1px solid var(--line);
}

#indexProductList #categoryDescription a.descriptionLink {
  color: var(--brand) !important;
  font-weight: 600;
  text-decoration: none !important;
}

#indexProductList #categoryDescription a.descriptionLink:hover {
  color: var(--brand-deep) !important;
}

/* Mobile description block */
#indexProductList #mcategoryDescription {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  padding: 14px !important;
  margin: 0 0 18px !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#indexProductList #mcategoryDescription .mdescriptionImg img {
  width: 100% !important;
  max-height: 180px;
  object-fit: cover;
  border-radius: var(--r-md);
}

#indexProductList #mcategoryDescription .mdescriptionContText {
  font: 500 13.5px/1.5 var(--font-body) !important;
  color: var(--ink-soft) !important;
}

#indexProductList #mcategoryDescription .mdescriptionContact {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#indexProductList #mcategoryDescription .mdescriptionContact .descriptionLink {
  width: 36px;
  height: 36px;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

#indexProductList #mcategoryDescription .mdescriptionContact .descriptionLink:hover {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand-deep);
}

/* ----- Sub-categories grid — one big card with 4-up layout ----- */
#indexProductList .sub-categories-content,
#indexCategories .sub-categories-content {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  /* responsive: 4 per row (max); steps down to 3 (min) at <=1024px — see media queries below */
  gap: 24px 18px;
  margin: 0 0 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
}
#indexProductList .categoryListBoxContents,
#indexCategories .categoryListBoxContents {
  width: auto !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#indexProductList .categoryListBoxContentsItem,
#indexCategories .categoryListBoxContentsItem {
  background: var(--surface) !important;
  border: 1px solid #e8e4db47 !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 12px !important;
  text-align: center;
  cursor: pointer;
  width: auto !important;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

#indexProductList .categoryListBoxContents:hover .categoryListBoxContentsItem,
#indexCategories .categoryListBoxContents:hover .categoryListBoxContentsItem,
#indexProductList .categoryListBoxContentsItem:hover,
#indexCategories .categoryListBoxContentsItem:hover {
  transform: translateY(-3px);
  border-color: transparent !important;
  box-shadow: var(--shadow-md) !important;
}

#indexProductList .categoryListBoxContentsItem a,
#indexCategories .categoryListBoxContentsItem a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  color: var(--ink) !important;
  width: 100%;
  height: 100%;
}

#indexProductList .categoryListBoxContentsItem img,
#indexCategories .categoryListBoxContentsItem img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  /* show whole image, no cropping */
  background: #fff;
  border: 0 !important;
  border-radius: var(--r-sm);
  padding: 6px;
  display: block;
}

#indexProductList .categoryListBoxContentsItem br,
#indexCategories .categoryListBoxContentsItem br {
  display: none !important;
}

#indexProductList .categoryListBoxContentsItem label,
#indexCategories .categoryListBoxContentsItem label {
  font: 700 14px / 1.35 var(--font-body) !important;
  color: var(--ink) !important;
  cursor: pointer;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  transition: color .15s ease;
}

/* Underline as a centered flex item on the (non-clamped) link, so long names
   clamp cleanly to 2 lines without the underline overlapping a peeking 3rd line. */
#indexProductList .categoryListBoxContentsItem a::after,
#indexCategories .categoryListBoxContentsItem a::after{
    content: "";
    flex: 0 0 auto;
    width: 40px;
    height: 4px;
    border-radius: 4px;
    background: var(--brand);
}

#indexProductList .categoryListBoxContents:hover label,
#indexCategories .categoryListBoxContents:hover label,
#indexProductList .categoryListBoxContentsItem:hover label,
#indexCategories .categoryListBoxContentsItem:hover label {
  color: var(--brand) !important;
}

/* ----- Product listing rows (when this category has products instead of subcats) ----- */
#indexProductList .flexATTRibute.centerBoxContentsProducts.centeredContent,
#indexProductList .flexATTRibute.centerBoxContentsCategories.centeredContent {
  /* inherits the global product-card styling */
}

/* ----- Filter/sort controls bar ----- */
#indexProductList #filter-wrapper,
#indexProductList #productsFilter,
#indexProductList .productsFilterRow {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  padding: 10px 14px !important;
  margin: 0 0 16px !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font: 500 13px/1.4 var(--font-body) !important;
  color: var(--ink-soft) !important;
}

#indexProductList #filter-wrapper select,
#indexProductList #productsFilter select {
  background: var(--surface-warm) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  height: 34px !important;
  padding: 0 14px !important;
  font: 500 13px/1 var(--font-body) !important;
  color: var(--ink) !important;
  outline: none !important;
}

/* Page numbers / pagination split */
#indexProductList #productsListingTopNumber,
#indexProductList #productsListingBottomNumber {
  font: 500 12.5px/1.4 var(--font-body) !important;
  color: var(--ink-mute) !important;
}

#indexProductList .navSplitPagesLinks,
#indexProductList .navSplitPagesResult {
  font: 500 12.5px/1.4 var(--font-body) !important;
}

#indexProductList .navSplitPagesLinks a {}

#indexProductList .navSplitPagesLinks .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  background: var(--surface-warm) !important;
  border: 1px solid var(--line);
  border-radius: var(--r-pill) !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

#indexProductList .navSplitPagesLinks a:hover {
  background: var(--brand-tint) !important;
  border-color: var(--brand) !important;
  color: var(--brand-deep) !important;
}

#indexProductList .navSplitPagesLinks .current {
  border: 0;
}

/* Empty category — no products */
#indexProductList .noProductsAvailable,
#indexProductList #productsListingTopNumber:empty+#productsListingListingTopLinks:empty+p {
  background: var(--surface) !important;
  border: 1px dashed var(--line) !important;
  border-radius: var(--r-md);
  padding: 24px !important;
  text-align: center;
  color: var(--ink-mute) !important;
  font: 500 14px/1.5 var(--font-body) !important;
}

/* ----- Mobile / tablet ----- */
@media (max-width: 1024px) {
  #indexProductList {
    padding: 0 16px;
  }

  #indexProductList #categoryDescription {
    flex-direction: column;
    gap: 14px;
    padding: 16px !important;
  }

  #indexProductList #categoryDescription .descriptionImg {
    flex: 0 0 auto;
  }

  #indexProductList #categoryDescription .descriptionImg img {
    max-width: 100%;
  }
}

@media (max-width: 1024px) {

  /* 3-up at tablet widths */
  #indexProductList .sub-categories-content,
  #indexCategories .sub-categories-content {
    grid-template-columns: repeat(3, 1fr) !important;
    padding: 18px !important;
    gap: 18px 14px !important;
  }
}

@media (max-width: 720px) {
  #indexProductList {
    padding: 0 12px;
    margin: 14px auto 40px;
  }

  #indexProductList #productListHeading {
    font-size: 22px !important;
  }

  /* minimum 3-up at mobile widths */
  #indexProductList .sub-categories-content,
  #indexCategories .sub-categories-content {
    grid-template-columns: repeat(3, 1fr) !important;
    padding: 14px !important;
    gap: 14px 10px !important;
  }

  #indexProductList .categoryListBoxContentsItem label,
  #indexCategories .categoryListBoxContentsItem label {
    font-size: 12.5px !important;
  }
}


/* =========================================================================
   CATEGORY-LIST PAGE PRODUCT CARDS — final tweaks so cards match the
   homepage / search-results look. The category page renders the price as
   a bare <span class="productBasedPrice"> directly inside the card (no
   .list-price wrapper), so anchor that to the bottom and center it.
   ========================================================================= */

#indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent>.productBasedPrice,
#advSearchResultsDefault .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent>.productBasedPrice {
  margin-top: auto !important;
  padding-top: 10px;
  display: inline-flex !important;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  text-align: center !important;
  align-self: center;
}

#indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent>.productBasedPrice i.priceshown,
#advSearchResultsDefault .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent>.productBasedPrice i.priceshown {
  font-style: normal !important;
  color: var(--brand) !important;
  font: 700 15px/1 var(--font-body) !important;
}

#indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent>.productBasedPrice i.productUOM,
#advSearchResultsDefault .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent>.productBasedPrice i.productUOM {
  font-style: normal !important;
  color: var(--ink-mute) !important;
  font: 500 11px/1 var(--font-body) !important;
}

/* Special-price on category page (when normalprice + productSpecialPrice
   sit directly in the card). */
#indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent>.normalprice,
#indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent>.productSpecialPrice,
#indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent>.productPriceDiscount {
  text-align: center;
  display: block;
}

#indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent>.normalprice {
  margin-top: auto !important;
  padding-top: 10px;
  color: var(--ink-mute) !important;
  font: 500 12px/1.2 var(--font-body) !important;
  text-decoration: line-through;
}

#indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent>.productSpecialPrice {
  color: var(--brand) !important;
  font: 700 15px/1 var(--font-body) !important;
}

/* Show the section's overflow visible so card hover lift isn't clipped */
#indexProductList .productsProductCategoriesViewContents,
#advSearchResultsDefault .productsProductCategoriesViewContents {
  padding: 8px 4px 16px !important;
}

/* Ensure cards on category page use the same dimensions as search page */
#indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent,
#indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent[style] {
  width: 200px !important;
  height: auto !important;
}

@media (max-width: 1024px) {

  #indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent,
  #indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent[style] {
    width: 170px !important;
  }
}

@media (max-width: 720px) {

  #indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent,
  #indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent[style] {
    width: 150px !important;
  }
}


/* =========================================================================
   CATEGORY DEEP-LEAF PRODUCT LISTING — #productListing
   When a category has products directly (no sub-categories), the legacy
   tpl_modules_product_listing renders cards with class
   .centerBoxContentsProducts inside #productListing. Style them to match
   the homepage / search-results product card aesthetic.
   ========================================================================= */

#productListing {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 24px;
}

#productListing .centerBoxContentsProducts,
#productListing .centerBoxContentsProducts.centeredContent.back {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: block;
}

#productListing .inner-box {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  background: var(--surface);

  box-shadow: var(--shadow-sm);
  padding: 14px 12px 16px;
  text-align: center;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

#productListing .centerBoxContentsProducts:hover .inner-box {
  transform: translateY(-3px);
  border-color: transparent !important;
  box-shadow: var(--shadow-md);
}

/* Image area — square aspect, white background */
#productListing .list-image {
  flex: 0 0 auto;
  margin-bottom: 10px;
  position: relative;
}

#productListing .list-image a {
  display: block;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line-soft);
  aspect-ratio: 1 / 1;
  position: relative;
}

#productListing .list-image img,
#productListing img.listingProductImage {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #fff !important;
  border: 0 !important;
  padding: 6px !important;
  display: block;
  margin: auto;
}

#productListing .list-image img.imgSubContent {
  /* keep the existing absolute-positioned overlay badge intact */
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Product title — match the side-column product link style:
   13.5px, 500 weight, ink-soft, 2-line clamp.
   Use high-specificity selectors so legacy `.centerBoxContentsProducts .itemTitle`
   ("font-size: 130%; height: 34px") doesn't win. */
#productListing .centerBoxContentsProducts .itemTitle,
#productListing .centerBoxContentsProducts h3.itemTitle,
#productListing .centerBoxContentsSpecials .itemTitle,
#productListing .centerBoxContentsSpecials h3.itemTitle,
#productListing .specialsListBoxContents .product-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  word-break: break-word !important;
  margin: 6px auto !important;
  padding: 0 6px !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: calc(13.5px * 1.45 * 2) !important;
  max-height: calc(13.5px * 1.45 * 2) !important;
  font: 500 13.5px/1.45 var(--font-body) !important;
  font-size: 13.5px !important;
  color: var(--ink-soft) !important;
  text-decoration: none !important;
  text-align: center !important;
  letter-spacing: 0 !important;
}

#productListing .centerBoxContentsProducts .itemTitle a,
#productListing .centerBoxContentsProducts h3.itemTitle a,
#productListing .centerBoxContentsSpecials .itemTitle a,
#productListing .centerBoxContentsSpecials h3.itemTitle a {
  display: inline !important;
  color: inherit !important;
  text-decoration: none !important;
  font: inherit !important;
}

#productListing .centerBoxContentsProducts:hover .itemTitle,
#productListing .centerBoxContentsProducts:hover h3.itemTitle,
#productListing .centerBoxContentsProducts:hover .itemTitle a,
#productListing .centerBoxContentsSpecials:hover .product-name,
#productListing .specialsListBoxContents:hover .product-name {
  color: var(--brand) !important;
}

/* Description — hidden in the card view (still in DOM for tooltip) */
#productListing .listingDescription {
  display: none !important;
}

#productListing .listDescription.tooltiptext {
  display: none !important;
}

/* Price block — anchored to bottom, centered */
#productListing .list-price {
  margin-top: auto !important;
  padding-top: 10px;
  text-align: center;
}

#productListing .list-price a {
  text-decoration: none !important;
}

#productListing .list-price .productBasedPrice {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

#productListing .list-price i.priceshown {
  font-style: normal !important;
  color: var(--brand) !important;
  font: 700 15px/1 var(--font-body) !important;
}

#productListing .list-price i.productUOM {
  font-style: normal !important;
  color: var(--ink-mute) !important;
  font: 500 11px/1 var(--font-body) !important;
}

#productListing .list-price .normalprice {
  color: var(--ink-mute) !important;
  font: 500 12px/1 var(--font-body) !important;
  text-decoration: line-through;
  margin-right: 4px;
}

#productListing .list-price .productSpecialPrice {
  color: var(--brand) !important;
  font: 700 15px/1 var(--font-body) !important;
}

#productListing .list-price .productPriceDiscount {
  display: block;
  background: var(--mint-tint);
  color: var(--mint) !important;
  font: 600 10.5px/1 var(--font-body) !important;
  letter-spacing: .04em;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  margin-left: 6px;
}

/* Buy-now / cart-add button (when shown) */
#productListing .cart-add {
  margin-top: 8px;
}

#productListing .cart-add a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--ink);
  color: #fff !important;
  border-radius: var(--r-pill);
  font: 600 11.5px/1 var(--font-body);
  letter-spacing: .05em;
  text-decoration: none !important;
  transition: background .15s ease;
}

#productListing .cart-add a:hover {
  background: var(--brand);
}

#productListing .cart-add a img,
#productListing .cart-add a input[type="image"] {
  display: none;
}

#productListing .cart-add a::before {
  content: "ADD TO CART";
}

/* Sold-out badge (matching the search-results version) */
#productListing .button_sold_out_sm,
#productListing span.cssButton.button_sold_out_sm,
#productListing span.cssButton.normal_button.button_sold_out_sm {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  background: var(--surface-warm) !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  padding: 4px 10px !important;
  margin: 8px auto 0 !important;
  font: 600 10px/1 var(--font-body) !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: not-allowed;
  white-space: nowrap;
  width: auto;
  max-width: max-content;
}

#productListing .button_sold_out_sm::before {
  content: "\f017";
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  font-size: 10px;
  color: var(--ink-mute);
}

/* Sold-out listing images keep full color (filter removed) */

/* Pagination + result count above/below the listing */
#productListing-row,
#productsListingTopNumber,
#productsListingBottomNumber,
#productsListingListingTopLinks,
#productsListingListingBottomLinks {
  font: 500 12.5px/1.4 var(--font-body) !important;
  color: var(--ink-mute) !important;
}

/* Mobile / tablet tweaks — fixed columns so a per-page count rounded
   to a multiple of 4 always fills every row (4-col desktop, 2-col mobile). */
@media (max-width: 1024px) {
  #productListing {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (max-width: 720px) {
  #productListing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #productListing .inner-box {
    padding: 10px 8px 12px;
  }

  #productListing h3.itemTitle a {
    font-size: 12.5px !important;
  }

  #productListing .list-price i.priceshown,
  #productListing .list-price .productSpecialPrice {
    font-size: 14px !important;
  }
}

/* =========================================================================
   REFERRAL CODE PAGE  (.rc-page #referralCodeDefault) — full restructure
   Hero + cards + tabbed follow-up progress
   ========================================================================= */
.rc-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 18px 80px;
  font-family: var(--font-body);
  color: var(--ink);
  box-sizing: border-box;
}

.rc-page * {
  box-sizing: border-box;
}

/* Legacy resets for this page */
body#referralCodeBody .rc-page hr {
  display: none !important;
}

body#referralCodeBody .rc-page label {
  background: transparent !important;
  padding: 0 !important;
}

body#referralCodeBody .rc-page h1 {
  background: transparent !important;
  padding: 0 !important;
}

/* HERO — VOUCHER / TICKET STYLE ------------------------------------- */
.rc-hero {
  --voucher-bg: #FFF8EE;
  --voucher-edge: #F0E5D0;
  --voucher-radius: 22px;
  --notch-size: 28px;

  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  background: var(--voucher-bg);
  border: 1px solid var(--voucher-edge);
  border-radius: var(--voucher-radius);
  margin: 0 0 16px;
  box-shadow: 0 8px 30px -16px rgba(22, 22, 22, .18), 0 1px 2px rgba(0, 0, 0, .04);
  isolation: isolate;
}

/* Decorative top-right radial wash */
.rc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--voucher-radius);
  background: radial-gradient(ellipse at 100% 0%, rgba(255, 90, 60, .10), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(245, 192, 74, .10), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* The two notches that punch through at the perforated tear line */
.rc-hero__notch {
  position: absolute;
  width: var(--notch-size);
  height: var(--notch-size);
  background: var(--bg);
  border: 1px solid var(--voucher-edge);
  border-radius: 50%;
  left: 57.4%;
  transform: translateX(-50%);
  z-index: 3;
}

.rc-hero__notch--top {
  top: calc(var(--notch-size) / -2);
}

.rc-hero__notch--bottom {
  bottom: calc(var(--notch-size) / -2);
}

.rc-hero__intro {
  position: relative;
  z-index: 1;
  padding: 32px 36px 32px 32px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.rc-hero__intro::after {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  right: 0;
  width: 0;
  border-right: 2px dashed var(--voucher-edge);
}

.rc-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--voucher-edge);
  border-radius: 999px;
  font: 700 10.5px/1 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-deep);
}

.rc-hero__eyebrow i {
  color: var(--brand);
  font-size: 12px;
}

#referralCodeDefault #referralCodeHeading {
  font: 700 28px/1.15 var(--font-display) !important;
  color: var(--ink) !important;
  margin: 4px 0 0 !important;
  letter-spacing: -.01em;
}

.rc-hero__sub {
  margin: 0;
  font: 500 13.5px/1.55 var(--font-body);
  color: var(--ink-soft);
  max-width: 360px;
}

/* RIGHT STUB — code + actions --------------------------------------- */
#referralCodeDefault .rc-hero__code {
  position: relative;
  z-index: 1;
  padding: 28px 28px 26px;
  background: transparent;
  border-radius: 0;
  color: var(--ink);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  box-shadow: none;
  overflow: visible;
}

.rc-code__label {
  display: block;
  font: 700 10.5px/1 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
  text-align: center;
}

#referralCodeDefault .rc-code__chip {
  margin: 0 0 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  display: flex !important;
  justify-content: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
}

#referralCodeDefault .rc-code__chip span {
  display: inline-block;
  padding: 14px 24px;
  background: var(--surface);
  border: 2px dashed var(--brand);
  border-radius: 14px;
  font: 800 24px/1 var(--font-display);
  letter-spacing: .14em;
  color: var(--brand-deep);
  user-select: all;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 2px 8px rgba(214, 62, 34, .10);
}

#referralCodeDefault .rc-code__chip:hover span {
  background: #FFF6F1;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(214, 62, 34, .18);
}

#referralCodeDefault .rc-code__actions {
  display: flex !important;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  position: relative;
  z-index: 1;
  border: 0;
  box-shadow: none;
}

.rc-action {
  flex: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px !important;
  width: auto !important;
  height: auto !important;
  border: 0;
  border-radius: 12px;
  font: 700 12.5px/1 var(--font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}

.rc-action i {
  font-size: 14px;
}

.rc-action--copy {
  background: var(--ink) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(22, 22, 22, .18);
}

.rc-action--copy:hover {
  background: var(--brand) !important;
  transform: translateY(-1px);
}

.rc-action--wa {
  background: #25D366 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(37, 211, 102, .30);
}

.rc-action--wa:hover {
  background: #1FB855 !important;
  transform: translateY(-1px);
}

.rc-code__copied {
  position: absolute;
  top: 12px;
  right: 18px;
  background: var(--ink);
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font: 700 11px/1 var(--font-body);
  letter-spacing: .10em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-6px) scale(.96);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  z-index: 4;
}

.rc-code__copied.is-on {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.rc-code__copied::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 5px;
  color: #4AE3B5;
}

/* TIP STRIP ----------------------------------------------------------- */
.rc-tip {
  width: 100% !important;
  display: flex !important;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px !important;
  background: #FFFCF1 !important;
  border: 1px solid #F5E2B0 !important;
  border-left: 3px solid #F5C04A !important;
  border-radius: 12px !important;
  margin: 0 0 16px !important;
  font: 500 13.5px/1.5 var(--font-body) !important;
  color: var(--ink-soft) !important;
}

.rc-tip i {
  font-size: 18px;
  color: #B8741E;
  flex-shrink: 0;
  margin-top: 2px;
}

.rc-tip>div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rc-tip strong {
  font: 700 13.5px/1.4 var(--font-body);
  color: var(--ink);
}

.rc-tip span {
  color: var(--ink-soft);
  font-size: 13px;
}

/* BANNER ------------------------------------------------------------- */
.rc-page .rc-banner {
  margin: 0 0 16px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}

.rc-page .rc-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* CARD shell --------------------------------------------------------- */
.rc-page .rc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin: 0 0 16px;
}

.rc-page .rc-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: #FFE1C4;
  border-bottom: 1px solid rgba(214, 62, 34, .16);
  font: 700 13.5px/1 var(--font-display);
  color: var(--ink);
  letter-spacing: .02em;
}

.rc-page .rc-card__head i {
  color: var(--brand-deep);
  font-size: 14px;
}

.rc-page .rc-card__head .textHeading {
  font: inherit !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
}

.rc-page .rc-card__count {
  margin-left: auto;
  padding: 4px 10px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(214, 62, 34, .18);
  border-radius: 999px;
  font: 600 11px/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-deep);
}

.rc-page .rc-card__body {
  padding: 18px 20px;
}

#referralCodeDefault .referralCodeParagraph {
  font: 500 14.5px/1.7 var(--font-body) !important;
  color: var(--ink-soft);
  margin: 0 !important;
}

#referralCodeDefault .referralCodeParagraph p:first-child {
  margin-top: 0;
}

#referralCodeDefault .referralCodeParagraph p:last-child {
  margin-bottom: 0;
}

#referralCodeDefault .referralCodeParagraph strong {
  color: var(--ink);
}

/* TABS --------------------------------------------------------------- */
.rc-tabs {
  padding: 14px;
}

.rc-tabs__menu {
  display: flex;
  gap: 6px;
  background: var(--bg);
  padding: 6px;
  border-radius: 12px;
  margin: 0 0 14px;
}

#referralCodeDefault .rc-tabs__menu .navLink {
  flex: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px !important;
  border-radius: 10px !important;
  font: 600 13px/1 var(--font-body) !important;
  color: var(--ink-soft) !important;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  text-decoration: none !important;
  background: transparent !important;
}

#referralCodeDefault .rc-tabs__menu .navLink i {
  font-size: 13px;
}

#referralCodeDefault .rc-tabs__menu .navLink:hover {
  color: var(--ink) !important;
}

#referralCodeDefault .rc-tabs__menu .navLink.active {
  background: var(--ink) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(22, 22, 22, .18);
}

.rc-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 7px;
  height: 20px;
  background: rgba(255, 255, 255, .16);
  border-radius: 999px;
  font: 700 11px/1 var(--font-body);
  letter-spacing: .04em;
}

#referralCodeDefault .rc-tabs__menu .navLink:not(.active) .rc-tabs__count {
  background: var(--surface);
  color: var(--brand-deep);
  border: 1px solid var(--line);
}

.rc-tabs__contents {
  padding: 4px 2px 4px;
  position: relative;
}

#referralCodeDefault .tabPane {
  display: none;
}

#referralCodeDefault .tabPane.active {
  display: block;
  max-height: 540px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 8px 4px 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

#referralCodeDefault .tabPane.active::-webkit-scrollbar {
  width: 8px;
}

#referralCodeDefault .tabPane.active::-webkit-scrollbar-track {
  background: transparent;
}

#referralCodeDefault .tabPane.active::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
  border: 2px solid var(--surface);
}

#referralCodeDefault .tabPane.active::-webkit-scrollbar-thumb:hover {
  background: var(--ink-mute);
}

/* Soft fade hint when more rows are below */
.rc-tabs__contents::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 10px;
  bottom: 0;
  height: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--surface) 90%);
  pointer-events: none;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* EMPTY STATE -------------------------------------------------------- */
.rc-empty {
  padding: 38px 24px 32px;
  text-align: center;
  background: var(--bg);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.rc-empty i {
  font-size: 30px;
  color: var(--ink-mute);
  opacity: .55;
  margin-bottom: 6px;
}

.rc-empty strong {
  font: 700 14.5px/1.3 var(--font-display);
  color: var(--ink);
}

#referralCodeDefault .rc-empty .texthh {
  display: block !important;
  font: 500 13px/1.55 var(--font-body) !important;
  color: var(--ink-soft) !important;
  margin: 0 !important;
  max-width: 420px;
}

/* REFERRAL PROGRESS CARD --------------------------------------------- */
.rc-progress {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px 30px;
  margin: 0 0 12px;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.rc-progress:last-child {
  margin-bottom: 0;
}

.rc-progress:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: #DFD9CB;
}

#referralCodeDefault .rc-progress__profile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}

#referralCodeDefault .rc-progress__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%) !important;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 14px/1 var(--font-display) !important;
  letter-spacing: .02em;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(214, 62, 34, .25);
  padding: 0 !important;
}

.rc-progress__avatar i {
  font-size: 16px;
}

.rc-progress__who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#referralCodeDefault .rc-progress__name {
  font: 600 14.5px/1.3 var(--font-body) !important;
  color: var(--ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 600 !important;
}

.rc-progress__spend {
  font: 500 12px/1 var(--font-body);
  color: var(--ink-mute);
}

.rc-progress__spend strong {
  color: var(--brand-deep);
  font-weight: 700;
}

.rc-progress__pct {
  align-self: flex-start;
  padding: 5px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 700 12px/1 var(--font-display);
  color: var(--brand-deep);
  flex-shrink: 0;
}

/* PROGRESS BAR ------------------------------------------------------- */
.rc-progress__bar {
  padding: 14px 4px 0;
}

.rc-progress__bar .progress_bar-wrapper {
  position: relative;
}

.rc-progress__track {
  position: relative;
  height: 6px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.rc-progress__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--brand) 0%, #FFB199 100%);
  border-radius: 999px;
  transition: width .8s cubic-bezier(.2, .8, .2, 1);
}

.rc-progress__milestones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  position: relative;
}

.rc-milestone {
  position: relative;
  flex: 1;
  text-align: right;
}

.rc-milestone__point {
  position: absolute;
  right: 0;
  top: 14px;
  transform: translate(50%, 0);
  min-width: 38px;
  height: 38px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--surface);
  border: 2px solid var(--line);
  color: var(--ink-mute);
  font: 700 13px/1 var(--font-display);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.rc-milestone__point::after {
  content: "pt";
  font: 500 9.5px/1 var(--font-body);
  margin-left: 2px;
  opacity: .7;
}

.rc-milestone.is-reached .rc-milestone__point {
  background: var(--surface);
  border-color: var(--brand);
  color: var(--brand-deep);
  box-shadow: 0 4px 10px rgba(255, 90, 60, .28);
}

.rc-milestone.is-reached .rc-milestone__point::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: var(--mint);
  font-size: 9px;
  margin-right: 4px;
}

.rc-milestone__amount {
  position: absolute;
  right: 0;
  top: -22px;
  transform: translateX(50%);
  font: 600 11.5px/1 var(--font-body) !important;
  color: var(--ink-mute) !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap;
}

.rc-milestone.is-reached .rc-milestone__amount {
  color: var(--brand-deep) !important;
}

/* Mobile ------------------------------------------------------------- */
@media (max-width: 720px) {
  .rc-page {
    padding: 8px 2px 60px;
    overflow-x: hidden;
  }

  /* Hero collapses to a single column, vertical perforation → horizontal */
  .rc-hero {
    grid-template-columns: 1fr;
    margin: 0 0 14px;
  }

  .rc-hero__notch {
    display: none !important;
  }

  .rc-hero__intro {
    padding: 22px 22px 24px !important;
  }

  .rc-hero__intro::after {
    top: auto !important;
    bottom: 0 !important;
    left: 22px !important;
    right: 22px !important;
    width: auto !important;
    height: 0 !important;
    border-right: 0 !important;
    border-bottom: 2px dashed var(--voucher-edge) !important;
  }

  #referralCodeDefault #referralCodeHeading {
    font-size: 22px !important;
  }

  .rc-hero__sub {
    font-size: 13px;
  }

  #referralCodeDefault .rc-hero__code {
    padding: 22px 22px 22px !important;
  }

  #referralCodeDefault .rc-code__chip span {
    font-size: 22px;
    padding: 12px 22px;
    letter-spacing: .10em;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .rc-action {
    font-size: 11.5px !important;
    padding: 12px 10px !important;
    gap: 6px !important;
  }

  .rc-action i {
    font-size: 14px;
  }

  /* Tip + cards */
  .rc-tip {
    gap: 10px;
    padding: 12px 14px !important;
  }

  .rc-page .rc-card__head {
    padding: 12px 14px;
    font-size: 12.5px;
    gap: 8px;
  }

  .rc-page .rc-card__head .textHeading,
  .rc-page .rc-card__head span:first-of-type {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .rc-page .rc-card__count {
    font-size: 10px;
    padding: 3px 8px;
  }

  .rc-page .rc-card__body {
    padding: 14px 14px;
  }

  /* Tabs */
  .rc-tabs {
    padding: 10px;
  }

  #referralCodeDefault .rc-tabs__menu {
    padding: 4px;
    gap: 4px;
  }

  #referralCodeDefault .rc-tabs__menu .navLink {
    font-size: 12px !important;
    padding: 10px 6px !important;
    gap: 6px;
  }

  #referralCodeDefault .rc-tabs__menu .navLink i {
    font-size: 12px;
  }

  .rc-tabs__count {
    min-width: 20px;
    height: 18px;
    font-size: 10.5px;
    padding: 0 6px;
  }

  /* Progress card — fix milestone overflow + allow profile row to wrap */
  .rc-progress {
    padding: 14px 14px 32px;
    margin-bottom: 10px;
  }

  #referralCodeDefault .rc-progress__profile {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
  }

  #referralCodeDefault .rc-progress__avatar {
    width: 36px;
    height: 36px;
    font-size: 13px !important;
  }

  #referralCodeDefault .rc-progress__name {
    font-size: 13.5px !important;
  }

  .rc-progress__spend {
    font-size: 11.5px;
  }

  #referralCodeDefault .rc-progress__pct {
    font-size: 11px;
    padding: 4px 8px;
    margin-left: auto;
    align-self: center;
  }

  /* Inner padding on the bar so first & last milestone points don't get clipped */
  .rc-progress__bar {
    padding: 14px 18px 0;
  }

  .rc-milestone__point {
    min-width: 28px;
    height: 28px;
    font-size: 10.5px;
    padding: 0 6px;
    top: 12px;
  }

  .rc-milestone__amount {
    font-size: 10px !important;
    top: -18px;
  }

  /* Tab pane scrolls instead of growing */
  #referralCodeDefault .tabPane.active {
    max-height: 60vh;
    padding-right: 6px;
  }

  /* Empty state */
  .rc-empty {
    padding: 28px 18px 24px;
  }

  .rc-empty i {
    font-size: 26px;
  }

  .rc-empty strong {
    font-size: 13.5px;
  }

  #referralCodeDefault .rc-empty .texthh {
    font-size: 12.5px !important;
  }
}

@media (max-width: 380px) {
  #referralCodeDefault .rc-code__chip span {
    font-size: 18px;
    padding: 11px 18px;
    letter-spacing: .08em;
  }

  #referralCodeDefault .rc-tabs__menu .navLink span:not(.rc-tabs__count) {
    display: none;
  }

  .rc-action {
    font-size: 11px !important;
    padding: 11px 8px !important;
  }

  .rc-action span {
    display: none;
  }
}

/* =========================================================================
   ACCOUNT HISTORY PAGE  (#accountHistoryDefault)
   Order cards · status pill · reward strip · footer with view-order CTA
   ========================================================================= */
#accountHistoryDefault {
  max-width: 980px;
  margin: 0 auto;
  padding: 8px 16px 80px;
  font-family: var(--font-body);
  color: var(--ink);
}

#accountHistoryDefaultHeading {
  font: 700 30px/1.2 var(--font-display);
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 22px;
  position: relative;
  padding-bottom: 12px;
}

#accountHistoryDefaultHeading::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  background: var(--brand);
  border-radius: 3px;
  position: absolute;
  left: 0;
  bottom: 0;
}

div#accountHistoryList {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: unset;
}

/* Order card — clean layered card, no banded header/footer ----------- */
.orderLists {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 20px 16px;
  margin: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.orderLists::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--brand);
  opacity: .85;
}

.orderLists:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: #DFD9CB;
}

.orderLists hr {
  display: none !important;
}

/* Top row: order id + date | status pill */
.orderLists .orderLists__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.orderLists .orderLists__id {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 14px;
  min-width: 0;
}

.orderLists .orderNo {
  font: 800 15px/1 var(--font-display);
  color: var(--ink);
  letter-spacing: .02em;
  margin: 0;
  padding: 0 !important;
  background: transparent !important;
}

.orderLists .orderLists__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 var(--font-body);
  color: var(--ink-mute);
  white-space: nowrap;
}

.orderLists .orderLists__date i {
  font-size: 11px;
  opacity: .85;
}

.orderLists .orderStatus {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  background: #FFF1E8;
  border: 1px solid rgba(214, 62, 34, .20);
  border-radius: 999px;
  font: 700 10.5px/1 var(--font-body);
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin: 0;
  white-space: nowrap;
}

.orderLists .orderStatus::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(255, 90, 60, .18);
  margin-right: 7px;
  animation: orderStatusPulse 2.4s ease-in-out infinite;
}

@keyframes orderStatusPulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(255, 90, 60, .18);
  }

  50% {
    box-shadow: 0 0 0 5px rgba(255, 90, 60, .06);
  }
}

/* Status color variants — accent stripe + pill color tint */
.orderLists--cancelled::before,
.orderLists--canceled::before,
.orderLists--refunded::before,
.orderLists--voided::before {
  background: #8A8275;
}

.orderLists--cancelled .orderStatus,
.orderLists--canceled .orderStatus,
.orderLists--refunded .orderStatus,
.orderLists--voided .orderStatus {
  background: #ECE8DD;
  border-color: rgba(90, 82, 68, .20);
  color: #5B5247;
}

.orderLists--cancelled .orderStatus::before,
.orderLists--canceled .orderStatus::before,
.orderLists--refunded .orderStatus::before,
.orderLists--voided .orderStatus::before {
  background: #8A8275;
  box-shadow: none;
  animation: none;
}

.orderLists--delivered::before,
.orderLists--completed::before,
.orderLists--shipped::before {
  background: var(--mint);
}

.orderLists--delivered .orderStatus,
.orderLists--completed .orderStatus,
.orderLists--shipped .orderStatus {
  background: #DCF3E8;
  border-color: rgba(11, 110, 85, .20);
  color: #0B6E55;
}

.orderLists--delivered .orderStatus::before,
.orderLists--completed .orderStatus::before,
.orderLists--shipped .orderStatus::before {
  background: var(--mint);
  box-shadow: none;
  animation: none;
}

/* Product preview row */
.orderLists .orderProduct {
  display: flex;
  gap: 14px;
  margin: 0;
  align-items: flex-start;
}

.orderLists .orderProduct .productImage {
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.orderLists .orderProduct .productImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.orderLists .orderProduct .productInfo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 2px;
}

.orderLists .productName {
  font: 600 14.5px/1.4 var(--font-body);
  color: var(--ink);
  margin: 0;
  padding: 0 !important;
  background: transparent !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.orderLists .infos {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.orderLists .productAttribute {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font: 500 12.5px/1.4 var(--font-body);
  color: var(--ink-mute);
}

.orderLists .productAttribute:empty {
  display: none;
}

.orderLists .productAttribute__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 500 11.5px/1 var(--font-body);
  color: var(--ink-soft);
  white-space: nowrap;
}

.orderLists .productQtynPrice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.orderLists .productQty {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 600 11.5px/1 var(--font-body);
  color: var(--ink-soft);
  margin: 0;
}

.orderLists .productPrice {
  font: 700 14.5px/1 var(--font-display);
  color: var(--brand-deep);
  margin: 0;
  white-space: nowrap;
}

/* "View N more products" link — subtle inline action */
.orderLists .viewMoreProduct {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0 !important;
  text-align: left !important;
  font: 600 12.5px/1 var(--font-body);
  color: var(--brand-deep);
  background: transparent !important;
  border: 0;
  border-bottom: 1px dashed transparent;
  text-decoration: none;
  letter-spacing: .02em;
  width: auto !important;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}

.orderLists .viewMoreProduct i {
  font-size: 12px;
  color: var(--brand);
}

.orderLists .viewMoreProduct::after {
  content: " →";
  margin-left: 2px;
  transition: transform .2s ease;
  display: inline-block;
}

.orderLists .viewMoreProduct:hover {
  color: var(--brand);
  border-bottom-color: var(--brand);
  background: transparent;
}

.orderLists .viewMoreProduct:hover::after {
  transform: translateX(3px);
}

/* Reward claimed strip */
.orderLists .rewardClaimed {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  padding: 10px 14px;
  background: linear-gradient(90deg, #FFFCF1 0%, #FFF6DF 100%);
  border: 1px solid #F5E2B0;
  border-radius: 12px;
}

.orderLists .rewardClaimed img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.orderLists .rewardClaimed>label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
  margin: 0;
  font: 500 12.5px/1.4 var(--font-body);
  color: var(--ink-soft);
}

.orderLists .rewardClaimed .inform {
  display: inline-flex;
  align-items: center;
  font: 600 12px/1.3 var(--font-body);
  color: #B8741E;
  margin: 0;
}

.orderLists .rewardClaimed .inform i {
  color: #E5A33B;
}

.orderLists .rewardClaimed .success {
  display: inline-flex;
  align-items: center;
  font: 600 12px/1.3 var(--font-body);
  color: var(--mint);
  margin: 0;
}

.orderLists .rewardClaimed .dWMoreBtn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font: 600 10.5px/1 var(--font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}

.orderLists .rewardClaimed .dWMoreBtn:hover {
  background: var(--brand);
  transform: translateY(-1px);
}

/* Foot: total + view order CTA */
.orderLists .orderLists__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
}

.orderLists .orderTotal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0;
  margin: 0;
}

.orderLists .orderTotal .totalItems {
  font: 600 10.5px/1 var(--font-body);
  color: var(--ink-mute);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
}

.orderLists .orderTotal .orderTotalAmount {
  font: 800 19px/1 var(--font-display);
  color: var(--brand-deep);
  margin: 0;
  letter-spacing: -.01em;
}

.orderLists .viewOrder {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  font: 700 12.5px/1 var(--font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 4px 10px rgba(255, 90, 60, .22);
}

.orderLists .viewOrder i {
  font-size: 11px;
  transition: transform .2s ease;
}

.orderLists .viewOrder:hover {
  background: var(--brand-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 90, 60, .34);
  color: #fff;
}

.orderLists .viewOrder:hover i {
  transform: translateX(3px);
}

/* No-history empty state ---------------------------------------------- */
#noAcctHistoryDefault {
  padding: 60px 24px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 18px;
  text-align: center;
  font-size: 14.5px;
  color: var(--ink-soft);
  position: relative;
}

#noAcctHistoryDefault::before {
  content: "\f07a";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: block;
  font-size: 36px;
  color: var(--ink-mute);
  margin-bottom: 14px;
  opacity: .6;
}

/* Old back button — hidden in redesign */
#accountHistoryDefault .buttonRow.forward {
  display: none;
}

/* Mobile -------------------------------------------------------------- */
@media (max-width: 720px) {
  #accountHistoryDefault {
    padding: 0px 2px 60px;
  }

  #accountHistoryDefaultHeading {
    font-size: 24px;
    margin: 0 0 10px;
  }

  div#accountHistoryList {

    padding: 0 2px 8px;
}

  .orderLists {
    border-radius: 14px;
    padding: 14px 14px 14px;
  }

  .orderLists .orderLists__top {
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  .orderLists .orderNo {
    font-size: 13.5px;
  }

  .orderLists .orderLists__date {
    font-size: 11.5px;
  }

  .orderLists .orderStatus {
    font-size: 10px;
    padding: 4px 9px;
    letter-spacing: .08em;
  }

  .orderLists .orderProduct .productImage {
    flex-basis: 72px;
    width: 72px;
    height: 72px;
  }

  .orderLists .productName {
    font-size: 13.5px;
  }

  .orderLists .productPrice {
    font-size: 14px;
  }

  .orderLists .orderLists__foot {
    margin-top: 12px;
    padding-top: 12px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .orderLists .orderTotal .orderTotalAmount {
    font-size: 17px;
  }

  .orderLists .viewOrder {
    padding: 9px 14px;
    font-size: 11.5px;
  }

  .orderLists .rewardClaimed {
    padding: 10px 12px;
  }

  .orderLists .rewardClaimed .dWMoreBtn {
    padding: 6px 12px;
    font-size: 10px;
  }

  #noAcctHistoryDefault {
    padding: 40px 18px;
  }
}

/* =========================================================================
   ACCOUNT HISTORY INFO  (.od-page #accountHistInfo) — full restructure
   Hero + 2-column card layout for a single order
   ========================================================================= */

/* Hard reset of legacy backgrounds that leak from stylesheet.css ---- */
.od-page,
.od-page * {
  box-sizing: border-box;
}

.od-page table {
  border: 0 !important;
  background: transparent !important;
}

.od-page #orderHistoryHeading tr,
.od-page #orderHistoryHeading td,
.od-page #orderHistoryHeading th {
  background: transparent !important;
}

.od-page #orderHistoryHeading .tableHeading th {
  background: transparent !important;
}

.od-page #orderHistoryHeading tr:nth-child(even) td {
  background: transparent !important;
}

.od-page #orderHistoryHeading tr.orderTotals td {
  background: transparent !important;
}

.od-page input.payment_slip_input {
  background: transparent !important;
}

.od-page h1, .od-page h2, .od-page h3, .od-page h4, .od-page h5,
.od-page label {
  background: transparent !important;
}

.od-page #orderHistoryStatus,
.od-page #Payment_Details,
.od-page #Payment_Slip {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
}

.od-page hr {
  display: none !important;
}

.od-page address {
  background: transparent !important;
  padding: 0 !important;
}

.od-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 18px 80px;
  font-family: var(--font-body);
  color: var(--ink);
  box-sizing: border-box;
}

/* HERO ---------------------------------------------------------------- */
.od-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "back title meta";
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
      background: linear-gradient(160deg, #0f9d7a4a 5%, #00000000 55%), linear-gradient(234deg, #fffdf93d 5%);
  color: #fff;
  border-radius: 22px;
  margin: 0 0 18px;
  overflow: hidden;
  isolation: isolate;
}

.od-hero::before {
  content: "";
  position: absolute;
  inset: -60% -20% auto auto;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(255, 90, 60, .28) 0%, transparent 60%);
  z-index: -1;
  pointer-events: none;
}

.od-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
}

.od-back {
  grid-area: back;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 14px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  border-radius: 999px;
  font: 600 12.5px/1 var(--font-body);
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}

.od-back i {
  font-size: 11px;
}

.od-back:hover {
  background: rgba(0, 0, 0);
  transform: translateX(-2px);
  color: #fff;
/*   font-weight: 700; */
  text-decoration: none;
}

.od-hero__title {
  grid-area: title;
  min-width: 0;
}

.od-eyebrow {
  display: block;
  font: 600 11px/1 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: black;
  margin-bottom: 6px;
}

#orderHistoryDetailedOrder {
  font: 700 28px/1.15 var(--font-display);
  letter-spacing: -.01em;
  color: black;
  margin: 0;
}

.od-hero__meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
      align-items: center;
  gap: 8px;
}

.od-status {
  display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgb(255 255 255);
    border: 1px solid rgb(154 154 154 / 32%);
    border-radius: 999px;
    font: 700 11.5px / 1 var(--font-body);
    letter-spacing: .10em;
    text-transform: uppercase;
    color: #000000;
}

.od-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(255, 90, 60, .25);
  animation: odPulse 2.4s ease-in-out infinite;
}

@keyframes odPulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(255, 90, 60, .25);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(255, 90, 60, .08);
  }
}

.od-status--cancelled .od-status__dot,
.od-status--canceled .od-status__dot,
.od-status--refunded .od-status__dot {
  background: #8A8275;
  box-shadow: none;
  animation: none;
}

.od-status--delivered .od-status__dot,
.od-status--completed .od-status__dot,
.od-status--shipped .od-status__dot {
  background: #4AE3B5;
  box-shadow: 0 0 0 3px rgba(74, 227, 181, .25);
}

.od-date {
display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 800 12px / 1 var(--font-body);
    color: rgb(0 0 0);
}

.od-date i {
  font-size: 11px;
}

/* BANNERS ------------------------------------------------------------- */
.od-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  margin: 0 0 14px;
  font: 500 13.5px/1.4 var(--font-body);
}

.od-banner>div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.od-banner strong {
  font-weight: 700;
  color: var(--ink);
}

.od-banner span {
  color: var(--ink-soft);
  font-size: 12.5px;
}

.od-banner i {
  font-size: 18px;
  flex-shrink: 0;
}

.od-banner--cancelled {
  background: #FFE9E4;
  border: 1px solid rgba(214, 62, 34, .22);
}

.od-banner--cancelled i {
  color: #D63E22;
}

.od-banner--cancelled strong {
  color: #B5311B;
}

.od-banner--reward {
  background: linear-gradient(90deg, #FFFCF1 0%, #FFF6DF 100%);
  border: 1px solid #F5E2B0;
}

.od-banner__icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.od-banner__text {
  flex: 1;
}

.od-banner__text--success {
  color: var(--mint);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.od-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--brand-tint);
    border-radius: 999px;
    font: 600 12px / 1 var(--font-body);
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background .18s ease, transform .18s ease;
    border: 1px solid rgba(255, 90, 60, .25);
    color: var(--brand-deep) !important;
}

.od-banner__cta:hover {
  background: var(--brand);
  transform: translateY(-1px);
  color: #fff !important;
}

/* LAYOUT -------------------------------------------------------------- */
.od-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}

.od-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.od-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: calc(var(--header-h, 64px) + 16px);
}

/* CARD shell ---------------------------------------------------------- */
.od-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.od-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: #FFE1C4;
  border-bottom: 1px solid rgba(214, 62, 34, .16);
  font: 700 13.5px/1 var(--font-display);
  color: var(--ink);
  letter-spacing: .02em;
}

.od-card__head i {
  color: var(--brand-deep);
  font-size: 14px;
}

.od-card__head span {
  font: inherit;
  color: inherit;
}

.od-card__count {
  margin-left: auto;
  padding: 4px 10px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(214, 62, 34, .18);
  border-radius: 999px;
  font: 600 11px/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-deep);
}

.od-required {
  margin-left: auto;
  padding: 4px 10px;
  background: #FFE9E4;
  color: #B5311B;
  border-radius: 999px;
  font: 700 10.5px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.od-card__body {
  padding: 18px 20px;
}

/* ITEMS LIST (new <ul class="od-items"> layout — replaces the old table) -- */
ul#orderHistoryHeading,
.od-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.od-items > .od-item {
  display: grid;
  grid-template-columns: 88px 1fr 56px auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}

.od-items > .od-item:first-child {
  border-top: 0;
}

.od-item__thumb {
  grid-column: 1;
  width: 88px;
  height: 88px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.od-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.od-item__info {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.od-item__name {
  font: 600 14.5px/1.4 var(--font-body);
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.od-item__attrs.orderAttribsList,
.od-item__attrs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.od-item__attrs li {
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 500 11.5px/1 var(--font-body);
  color: var(--ink-soft);
}

.od-item__attrs li strong {
  color: var(--ink);
  font-weight: 600;
}

.od-item__combo {
  margin-top: 4px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 10px;
  border-left: 3px solid var(--brand);
}

.od-item__combo .od-combo__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 10.5px/1 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: 6px;
}

.od-item__combo .orderAttribsList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.od-item__combo .orderAttribsList li {
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 500 11.5px/1 var(--font-body);
  color: var(--ink-soft);
}

.od-item__tax {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: var(--mint-tint);
  color: #1e7a5f;
  border-radius: 99px;
  font: 600 11px/1 var(--font-body);
}

.od-item__tax i {
  font-size: 9px;
}

.od-item__qty {
  grid-column: 3;
  justify-self: center;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 32px;
  padding: 0 10px;
  background: var(--brand-tint);
  color: var(--brand-deep);
  border-radius: 99px;
  font: 700 13px/1 var(--font-display);
  letter-spacing: -.02em;
}

.od-item__price {
  grid-column: 4;
  text-align: right;
  font: 700 16px/1.2 var(--font-display);
  color: var(--brand-deep);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.od-item__onetime {
  font: 500 11.5px/1.2 var(--font-body);
  color: var(--ink-mute);
}

/* Add-on divider row inside the items list */
.od-items__divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--bg);
  font: 700 11px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}

.od-items__divider i {
  color: var(--brand);
}

.od-item--addon {
  background: rgba(247, 246, 242, .5);
}

/* TOTALS (new <ul class="od-totals"> layout) -------------------------- */
.od-totals {
  list-style: none;
  margin: 0;
  padding: 14px 20px 18px;
  border-top: 1px dashed var(--line);
  background: #f9f9f9;
}

.od-totals__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
}

.od-totals__label {
  flex: 1 1 auto;
  min-width: 0;
  font: 500 13.5px/1.45 var(--font-body);
  color: var(--ink-soft);
  word-break: break-word;
}

.od-totals__value {
  flex: 0 0 auto;
  font: 600 14px/1.4 var(--font-body);
  color: var(--ink);
  white-space: nowrap;
  text-align: right;
}

.od-totals__row--grand,
.od-totals .ot-total {
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid rgba(214, 62, 34, .20);
}

.od-totals__row--grand .od-totals__label,
.od-totals .ot-total .od-totals__label {
  font: 700 14.5px/1 var(--font-display);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.od-totals__row--grand .od-totals__value,
.od-totals .ot-total .od-totals__value {
  font: 700 20px/1 var(--font-display);
  color: var(--brand-deep);
}

/* Items list mobile layout */
@media (max-width: 720px) {
  .od-items > .od-item {
    grid-template-columns: 64px 1fr auto;
    grid-template-areas:
      "thumb info  price"
      "thumb info  qty";
    gap: 10px 12px;
    padding: 12px 14px;
  }
  .od-item__thumb {
    grid-area: thumb;
    width: 64px;
    height: 64px;
    border-radius: 10px;
  }
  .od-item__info  { grid-area: info; }
  .od-item__qty {
    grid-area: qty;
    justify-self: end;
    min-width: 0;
    padding: 2px 9px;
    height: 24px;
    font-size: 12px;
  }
  .od-item__price {
    grid-area: price;
    font-size: 14.5px;
  }
  .od-items__divider {
    padding: 8px 14px;
    font-size: 10.5px;
  }
  .od-totals {
    padding: 12px 14px 16px;
  }
  .od-totals__row--grand .od-totals__value,
  .od-totals .ot-total .od-totals__value {
    font-size: 17px;
  }
}

/* TIMELINE ----------------------------------------------------------- */
.od-timeline {
  list-style: none;
  margin: 0;
  padding: 8px 20px 18px;
}

.od-timeline__item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 14px;
  padding: 12px 0;
  position: relative;
}

.od-timeline__item+.od-timeline__item::before {
  content: "";
  position: absolute;
  left: 8px;
  top: -4px;
  bottom: 50%;
  width: 2px;
  background: var(--line);
}

.od-timeline__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line);
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

.od-timeline__item.is-current .od-timeline__dot {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(255, 90, 60, .18);
}

.od-timeline__body {
  min-width: 0;
}

.od-timeline__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.od-timeline__head strong {
  font: 700 13.5px/1.3 var(--font-body);
  color: var(--ink);
}

.od-timeline__item.is-current .od-timeline__head strong {
  color: var(--brand-deep);
}

.od-timeline__head time {
  font: 500 12px/1 var(--font-body);
  color: var(--ink-mute);
  white-space: nowrap;
}

.od-timeline__note {
  margin: 6px 0 0;
  font: 500 12.5px/1.6 var(--font-body);
  color: var(--ink-soft);
  padding: 8px 12px;
  background: var(--bg);
  border-radius: 8px;
  border-left: 3px solid var(--line);
}

/* PAYMENT SLIP UPLOAD ------------------------------------------------ */
.od-help {
  margin: 0 0 14px;
  font: 500 13px/1.5 var(--font-body);
  color: var(--ink-soft);
  font-size: unset !important;
}

.od-upload-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: stretch;
}

.od-fileinput {
  position: relative;
  flex: 1;
  min-width: 220px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 12px;
}

.od-fileinput input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.od-fileinput__face {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg);
  border: 1.5px dashed #D8CDB4;
  border-radius: 12px;
  font: 500 13px/1.3 var(--font-body);
  color: var(--ink-soft);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.od-fileinput__face i {
  font-size: 18px;
  color: var(--brand-deep);
}

.od-fileinput:hover .od-fileinput__face {
  background: #FFF6EC;
  border-color: var(--brand);
  color: var(--ink);
}

button.od-submit,
input.od-submit,
.od-page .od-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 14px 26px !important;
  min-width: auto !important;
  width: auto !important;
  height: auto !important;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 14px !important;
  font: 700 13.5px/1 var(--font-body) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
  box-shadow: 0 6px 18px -4px rgba(214, 62, 34, .45), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .10);
}

button.od-submit::before,
input.od-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  z-index: -1;
}

button.od-submit:hover,
input.od-submit:hover,
.od-page .od-submit:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.05);
  box-shadow: 0 10px 24px -4px rgba(214, 62, 34, .55), inset 0 1px 0 rgba(255, 255, 255, .20) !important;
}

button.od-submit:hover::before,
input.od-submit:hover::before {
  transform: translateX(120%);
}

button.od-submit:active,
input.od-submit:active {
  transform: translateY(0) !important;
  filter: brightness(.96);
}

button.od-submit i,
input.od-submit i {
  font-size: 15px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .12));
}

.od-uploads {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}

.od-uploads__label {
  display: block;
  font: 700 10.5px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}

.od-uploads__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: 12px;
  border: 1px solid var(--line);
}

.od-uploads__time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 13px/1 var(--font-body);
  color: var(--ink);
}

.od-uploads__time i {
  color: var(--ink-mute);
}

.od-uploads__view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font: 600 11.5px/1 var(--font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .18s ease;
}

.od-uploads__view:hover {
  background: var(--brand);
  color: #fff;
}

/* SIDEBAR INFO CARDS ------------------------------------------------- */
.od-info .od-card__body {
  padding: 16px 18px 18px;
}

.od-info__label {
  font: 700 10.5px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 8px;
}

.od-info__label:not(:first-child) {
  margin-top: 14px;
}

.od-info__address {
  font: 500 13.5px/1.6 var(--font-body);
  color: var(--ink);
  font-style: normal;
  margin: 0;
}

.od-info__chip {
  display: inline-block;
  padding: 7px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  font: 600 13px/1.3 var(--font-body);
  color: var(--ink);
}

.od-info__rich img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.od-info__rich p {
  margin: 0 0 8px;
  font: 500 13px/1.6 var(--font-body);
  color: var(--ink-soft);
}

.od-warn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #FFF4E5;
  border: 1px solid #F5C04A;
  border-radius: 10px;
  font: 600 12.5px/1.3 var(--font-body);
  color: #8B5A0F;
}

/* RESPONSIVE --------------------------------------------------------- */
@media (max-width: 1024px) {
  .od-layout {
    grid-template-columns: 1fr;
  }

  .od-aside {
    position: static;
  }
}

@media (max-width: 720px) {
  .od-page {
    padding: 8px 2px 60px;
  }

  .od-hero {
    grid-template-columns: 1fr;
    grid-template-areas: "back""title""meta";
    gap: 12px;
    padding: 18px 18px;
  }

  .od-hero__meta {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }

  #orderHistoryDetailedOrder {
    font-size: 22px;
  }

  .od-card__head {
    padding: 12px 14px;
    font-size: 12.5px;
  }

  .od-card__body {
    padding: 14px 14px;
  }

  #orderHistoryHeading tbody tr {
    grid-template-columns: 72px 1fr;
    grid-template-areas:
      "img  info"
      "img  total";
    padding: 14px;
    gap: 12px;
  }

  #orderHistoryHeading .od-thumb {
    width: 72px;
    height: 72px;
    grid-area: img;
  }

  #orderHistoryHeading .productDetails {
    grid-area: info;
  }

  #orderHistoryHeading td.accountTotalDisplay {
    grid-area: total;
    text-align: left;
    font-size: 14px;
    align-items: flex-start;
  }

  #orderHistoryHeading td.accountTaxDisplay {
    grid-area: total;
  }

  #orderHistoryHeading tfoot {
    padding: 12px 14px 14px;
  }

  #orderHistoryHeading tfoot .ot-total .od-total__val {
    font-size: 18px;
  }

  .od-banner {
    padding: 12px 14px;
    flex-wrap: wrap;
  }

  .od-banner__cta {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
  }

  .od-upload-form {
    flex-direction: column;
  }

  .od-submit {
    padding: 12px 22px;
    justify-content: center;
  }
}

/* =========================================================================
   LISTING PAGES  (.lp-page — products_new / featured_products / products_all)
   Same shell + card layout as specials BUT no SALE / SOLD OUT ribbons.
   ========================================================================= */
.lp-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 18px 80px;
  font-family: var(--font-body);
  color: var(--ink);
  box-sizing: border-box;
}

.lp-page * {
  box-sizing: border-box;
}

/* Head — same look as the specials head */
body#productsnewBody .lp-page #newProductsDefaultHeading,
body#featuredproductsBody .lp-page #featuredDefaultHeading,
body#productsallBody .lp-page #allProductsDefaultHeading,
.lp-page .sp-head h1,
.lp-page .sp-head>h1 {
  background: transparent !important;
  color: var(--ink) !important;
  padding: 0 !important;
  text-align: left !important;
  font: 700 28px/1.15 var(--font-display) !important;
  margin: 0 !important;
  letter-spacing: -.01em !important;
  border-radius: 0 !important;
}

/* Product grid — fixed columns so the multiple-of-4 per-page count
   always fills every row on both desktop and mobile. */
.lp-page #productListing {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Card shell */
.lp-page #productListing>*,
.lp-page #productListing .centerBoxContentsProducts,
.lp-page #productListing .centerBoxContentsFeatured,
.lp-page #productListing .centerBoxContentsSpecials {
  width: 100% !important;
  float: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  position: relative;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease !important;
  display: flex !important;
  flex-direction: column;
}

.lp-page #productListing>*:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px);
  border-color: rgba(214, 62, 34, .30) !important;
}

/* Image area */
.lp-page #productListing .list-image,
.lp-page #productListing>*>a:first-of-type {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.lp-page #productListing img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  padding: 14px !important;
  background: var(--surface) !important;
  transition: transform .35s ease;
}

.lp-page #productListing>*:hover img {
  transform: scale(1.04);
}

/* Inner content padding — exclude .prod-tag (absolute-positioned pill) */
.lp-page #productListing .inner-box,
.lp-page #productListing>*>*:not(a:first-of-type):not(.list-image):not(.prod-tag) {
  padding: 12px 14px 14px !important;
  text-align: left !important;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Product name — match side-column style: 13.5px, 500, ink-soft, 2-line clamp */
.lp-page #productListing .centerBoxContentsProducts .itemTitle,
.lp-page #productListing .centerBoxContentsProducts h3.itemTitle,
.lp-page #productListing .centerBoxContentsFeatured .itemTitle,
.lp-page #productListing .centerBoxContentsFeatured h3.itemTitle,
.lp-page #productListing .centerBoxContentsSpecials .itemTitle,
.lp-page #productListing .centerBoxContentsSpecials h3.itemTitle,
.lp-page #productListing .specialsListBoxContents .product-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  word-break: break-word !important;
  margin: 6px 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: calc(13.5px * 1.45 * 2) !important;
  max-height: calc(13.5px * 1.45 * 2) !important;
  font: 500 13.5px/1.45 var(--font-body) !important;
  font-size: 13.5px !important;
  color: var(--ink-soft) !important;
  background: transparent !important;
  text-decoration: none !important;
  text-align: left !important;
  letter-spacing: 0 !important;
}

.lp-page #productListing>*:hover .itemTitle,
.lp-page #productListing>*:hover h3.itemTitle,
.lp-page #productListing>*:hover .product-name {
  color: var(--brand) !important;
}

/* Price — centered */
.lp-page #productListing .list-price {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 2px;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  font: 500 13px/1.3 var(--font-body) !important;
  color: var(--ink-soft) !important;
  background: transparent !important;
}

.lp-page #productListing .list-price>* {
  text-align: center !important;
  align-self: center !important;
}

.lp-page #productListing .normalprice,
.lp-page #productListing s.productSpecialPriceSale {
  font: 500 12px/1 var(--font-body) !important;
  color: var(--ink-mute) !important;
  text-decoration: line-through !important;
  margin: 0 !important;
  padding: 0 !important;
}

.lp-page #productListing .productSpecialPrice,
.lp-page #productListing span.productSpecialPrice,
.lp-page #productListing i.priceshown {
  font: 800 18px/1.1 var(--font-display) !important;
  color: var(--brand-deep) !important;
  font-style: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -.01em;
}

.lp-page #productListing .productPriceDiscount {
  display: none !important;
}

/* Sold-out pill (inside .list-price) — kept, no top-left ribbon, centered */
.lp-page #productListing .button_sold_out_sm,
.lp-page #productListing .button_sold_out {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  padding: 5px 11px !important;
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  font: 700 11px/1 var(--font-body) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--ink-soft) !important;
  white-space: nowrap !important;
  margin: 0 auto !important;
}

/* Product feature tag — top-left overlay on the card image
   (Recommended / Hot Selling / Best Quality / Pre-Order …) */
.lp-page #productListing .prod-tag,
.sp-page #productListing .prod-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font: 800 10.5px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 10px -2px rgba(22, 22, 22, .30);
}

.lp-page #productListing .prod-tag::before,
.sp-page #productListing .prod-tag::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 10px;
}

/* Variants */
.lp-page #productListing .prod-tag--recommended,
.sp-page #productListing .prod-tag--recommended {
  background: linear-gradient(135deg, #4A6FE1 0%, #2D4FB8 100%);
  box-shadow: 0 4px 12px -2px rgba(74, 111, 225, .40);
}

.lp-page #productListing .prod-tag--recommended::before,
.sp-page #productListing .prod-tag--recommended::before {
  content: "\f164";
  /* thumbs-up */
}

.lp-page #productListing .prod-tag--hot-selling,
.sp-page #productListing .prod-tag--hot-selling {
  background: linear-gradient(135deg, #FF8A3C 0%, #E25218 100%);
  box-shadow: 0 4px 12px -2px rgba(226, 82, 24, .45);
}

.lp-page #productListing .prod-tag--hot-selling::before,
.sp-page #productListing .prod-tag--hot-selling::before {
  content: "\f06d";
  /* fire */
}

.lp-page #productListing .prod-tag--best-quality,
.sp-page #productListing .prod-tag--best-quality {
  background: linear-gradient(135deg, #E8B339 0%, #B98315 100%);
  box-shadow: 0 4px 12px -2px rgba(185, 131, 21, .45);
}

.lp-page #productListing .prod-tag--best-quality::before,
.sp-page #productListing .prod-tag--best-quality::before {
  content: "\f005";
  /* star */
}

.lp-page #productListing .prod-tag--pre-order,
.sp-page #productListing .prod-tag--pre-order {
  background: linear-gradient(135deg, #1FB57A 0%, #0B8B5B 100%);
  box-shadow: 0 4px 12px -2px rgba(15, 157, 122, .45);
}

.lp-page #productListing .prod-tag--pre-order::before,
.sp-page #productListing .prod-tag--pre-order::before {
  content: "\f017";
  /* clock */
}

/* Hide the legacy <img class="imgSubContent"> banner everywhere — replaced
   by the .prod-tag pill rendered server-side. */
.imgSubContent {
  display: none !important;
}

/* =========================================================================
   Prod-tag in OTHER contexts — sideboxes, homepage centerboxes, product info
   ========================================================================= */

/* Sidebox product items */
.sideBoxContentItem {
  position: relative;
}

.sideBoxContentItem .sideBoxImg {
  position: relative;
  display: block;
  overflow: hidden;
}

.sideBoxContentItem .prod-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  padding: 3px 8px;
  font: 800 9px/1 var(--font-body);
  letter-spacing: .10em;
  border-radius: 999px;
  white-space: nowrap;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
  box-shadow: 0 2px 6px -1px rgba(22, 22, 22, .30);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sideBoxContentItem .prod-tag::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 9px;
}

.sideBoxContentItem .prod-tag--recommended {
  background: linear-gradient(135deg, #4A6FE1, #2D4FB8);
}

.sideBoxContentItem .prod-tag--recommended::before {
  content: "\f164";
}

.sideBoxContentItem .prod-tag--hot-selling {
  background: linear-gradient(135deg, #FF8A3C, #E25218);
}

.sideBoxContentItem .prod-tag--hot-selling::before {
  content: "\f06d";
}

.sideBoxContentItem .prod-tag--best-quality {
  background: linear-gradient(135deg, #E8B339, #B98315);
}

.sideBoxContentItem .prod-tag--best-quality::before {
  content: "\f005";
}

.sideBoxContentItem .prod-tag--pre-order {
  background: linear-gradient(135deg, #1FB57A, #0B8B5B);
}

.sideBoxContentItem .prod-tag--pre-order::before {
  content: "\f017";
}

.sideBoxContentItem .prod-tag--sale {
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
}

/* Homepage centerboxes — pill anchored top-left of the card */
.centerBoxContentsSpecials,
.centerBoxContentsFeatured,
.centerBoxContentsNew,
.centerBoxContentsProductsRecentView,
.centerBoxContentsProductCategoriesView,
.specialsListBoxContents {
  position: relative;
}

.centerBoxContentsSpecials>.prod-tag,
.centerBoxContentsFeatured>.prod-tag,
.centerBoxContentsNew>.prod-tag,
.centerBoxContentsProductsRecentView>.prod-tag,
.centerBoxContentsProductCategoriesView>.prod-tag,
.specialsListBoxContents>.prod-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  padding: 4px 10px;
  font: 800 10px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 10px -2px rgba(22, 22, 22, .30);
  background: var(--ink);
}

.centerBoxContentsSpecials>.prod-tag::before,
.centerBoxContentsFeatured>.prod-tag::before,
.centerBoxContentsNew>.prod-tag::before,
.centerBoxContentsProductsRecentView>.prod-tag::before,
.centerBoxContentsProductCategoriesView>.prod-tag::before,
.specialsListBoxContents>.prod-tag::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 9.5px;
}

.centerBoxContentsSpecials>.prod-tag--recommended,
.centerBoxContentsFeatured>.prod-tag--recommended,
.centerBoxContentsNew>.prod-tag--recommended,
.centerBoxContentsProductsRecentView>.prod-tag--recommended,
.centerBoxContentsProductCategoriesView>.prod-tag--recommended,
.specialsListBoxContents>.prod-tag--recommended {
  background: linear-gradient(135deg, #4A6FE1, #2D4FB8);
  box-shadow: 0 4px 10px -2px rgba(74, 111, 225, .40);
}

.centerBoxContentsSpecials>.prod-tag--recommended::before,
.centerBoxContentsFeatured>.prod-tag--recommended::before,
.centerBoxContentsNew>.prod-tag--recommended::before,
.centerBoxContentsProductsRecentView>.prod-tag--recommended::before,
.centerBoxContentsProductCategoriesView>.prod-tag--recommended::before,
.specialsListBoxContents>.prod-tag--recommended::before {
  content: "\f164";
}

.centerBoxContentsSpecials>.prod-tag--hot-selling,
.centerBoxContentsFeatured>.prod-tag--hot-selling,
.centerBoxContentsNew>.prod-tag--hot-selling,
.centerBoxContentsProductsRecentView>.prod-tag--hot-selling,
.centerBoxContentsProductCategoriesView>.prod-tag--hot-selling,
.specialsListBoxContents>.prod-tag--hot-selling {
  background: linear-gradient(135deg, #FF8A3C, #E25218);
  box-shadow: 0 4px 10px -2px rgba(226, 82, 24, .45);
}

.centerBoxContentsSpecials>.prod-tag--hot-selling::before,
.centerBoxContentsFeatured>.prod-tag--hot-selling::before,
.centerBoxContentsNew>.prod-tag--hot-selling::before,
.centerBoxContentsProductsRecentView>.prod-tag--hot-selling::before,
.centerBoxContentsProductCategoriesView>.prod-tag--hot-selling::before,
.specialsListBoxContents>.prod-tag--hot-selling::before {
  content: "\f06d";
}

.centerBoxContentsSpecials>.prod-tag--best-quality,
.centerBoxContentsFeatured>.prod-tag--best-quality,
.centerBoxContentsNew>.prod-tag--best-quality,
.centerBoxContentsProductsRecentView>.prod-tag--best-quality,
.centerBoxContentsProductCategoriesView>.prod-tag--best-quality,
.specialsListBoxContents>.prod-tag--best-quality {
  background: linear-gradient(135deg, #E8B339, #B98315);
  box-shadow: 0 4px 10px -2px rgba(185, 131, 21, .45);
}

.centerBoxContentsSpecials>.prod-tag--best-quality::before,
.centerBoxContentsFeatured>.prod-tag--best-quality::before,
.centerBoxContentsNew>.prod-tag--best-quality::before,
.centerBoxContentsProductsRecentView>.prod-tag--best-quality::before,
.centerBoxContentsProductCategoriesView>.prod-tag--best-quality::before,
.specialsListBoxContents>.prod-tag--best-quality::before {
  content: "\f005";
}

.centerBoxContentsSpecials>.prod-tag--pre-order,
.centerBoxContentsFeatured>.prod-tag--pre-order,
.centerBoxContentsNew>.prod-tag--pre-order,
.centerBoxContentsProductsRecentView>.prod-tag--pre-order,
.centerBoxContentsProductCategoriesView>.prod-tag--pre-order,
.specialsListBoxContents>.prod-tag--pre-order {
  background: linear-gradient(135deg, #1FB57A, #0B8B5B);
  box-shadow: 0 4px 10px -2px rgba(15, 157, 122, .45);
}

.centerBoxContentsSpecials>.prod-tag--pre-order::before,
.centerBoxContentsFeatured>.prod-tag--pre-order::before,
.centerBoxContentsNew>.prod-tag--pre-order::before,
.centerBoxContentsProductsRecentView>.prod-tag--pre-order::before,
.centerBoxContentsProductCategoriesView>.prod-tag--pre-order::before,
.specialsListBoxContents>.prod-tag--pre-order::before {
  content: "\f017";
}

/* Product info page — main image overlay pill */
#productMainImage {
  position: relative;
}

#productMainImage>.prod-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  padding: 7px 14px;
  font: 800 12px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 18px -4px rgba(22, 22, 22, .35);
  background: var(--ink);
}

#productMainImage>.prod-tag::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 11px;
}

#productMainImage>.prod-tag--recommended {
  background: linear-gradient(135deg, #4A6FE1, #2D4FB8);
  box-shadow: 0 6px 18px -4px rgba(74, 111, 225, .45);
}

#productMainImage>.prod-tag--recommended::before {
  content: "\f164";
}

#productMainImage>.prod-tag--hot-selling {
  background: linear-gradient(135deg, #FF8A3C, #E25218);
  box-shadow: 0 6px 18px -4px rgba(226, 82, 24, .50);
}

#productMainImage>.prod-tag--hot-selling::before {
  content: "\f06d";
}

#productMainImage>.prod-tag--best-quality {
  background: linear-gradient(135deg, #E8B339, #B98315);
  box-shadow: 0 6px 18px -4px rgba(185, 131, 21, .50);
}

#productMainImage>.prod-tag--best-quality::before {
  content: "\f005";
}

#productMainImage>.prod-tag--pre-order {
  background: linear-gradient(135deg, #1FB57A, #0B8B5B);
  box-shadow: 0 6px 18px -4px rgba(15, 157, 122, .50);
}

#productMainImage>.prod-tag--pre-order::before {
  content: "\f017";
}

/* SALE pill on the product info page — top-RIGHT corner so it doesn't
   collide with the feature tag on the left. !important so no other stylesheet
   (mobile overrides etc.) can drag it back to the left over the feature tag. */
#productMainImage>.prod-tag--sale-pi {
  left: auto !important;
  right: 14px !important;
  top: 14px !important;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%) !important;
  box-shadow: 0 6px 18px -4px rgba(214, 62, 34, .50) !important;
}

#productMainImage>.prod-tag--sale-pi::before {
  content: "\f02b";
  /* tag icon */
}

/* Mobile: keep the feature tag (left) and SALE pill (right) compact and capped
   in width so they never meet/overlap on a narrow product image. */
@media (max-width: 640px) {
  #productMainImage>.prod-tag {
    padding: 4px 9px;
    font-size: 9.5px;
    letter-spacing: .08em;
    gap: 4px;
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #productMainImage>.prod-tag--recommended,
  #productMainImage>.prod-tag--hot-selling,
  #productMainImage>.prod-tag--best-quality,
  #productMainImage>.prod-tag--pre-order {
    left: 10px;
  }
  #productMainImage>.prod-tag--sale-pi {
    right: 10px !important;
    left: auto !important;
  }
}

@media (max-width: 720px) {

  .lp-page #productListing .prod-tag,
  .sp-page #productListing .prod-tag {
    top: 8px;
    left: 8px;
    padding: 4px 9px;
    font-size: 9.5px;
    gap: 4px;
  }

  .lp-page #productListing .prod-tag::before,
  .sp-page #productListing .prod-tag::before {
    font-size: 9px;
  }

  .co-page__title {
    font-size: 18px !important;

  }

  #checkoutShipto, #checkoutBillto {
    padding: 12px 14px !important;
  }

}

/* Pre-order pill (rendered alongside the price, mint-tinted) */
.lp-page #productListing .button_preorder,
.sp-page #productListing .button_preorder {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  padding: 4px 10px !important;
  background: #DCF3E8 !important;
  border: 1px solid rgba(11, 110, 85, .22) !important;
  border-radius: 999px !important;
  font: 700 10.5px/1 var(--font-body) !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: #0B6E55 !important;
  white-space: nowrap !important;
  margin: 4px auto 0 !important;
}

.lp-page #productListing .button_preorder::before,
.sp-page #productListing .button_preorder::before {
  content: "\f017";
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  margin-right: 6px;
  font-size: 10px;
  color: var(--mint);
}

.lp-page #productListing .button_sold_out_sm::before,
.lp-page #productListing .button_sold_out::before {
  content: "\f017";
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  margin-right: 6px;
  font-size: 10px;
  color: var(--ink-mute);
}

/* Empty state — reuses .sp-empty, but also works under .lp-page */
.lp-page .sp-empty,
.lp-page .lp-empty {
  margin: 0 auto;
  max-width: 520px;
  padding: 60px 28px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Page count / pagination strip — override legacy
   "width: 25%; margin-left: -74%" rules on the ID-targeted number divs. */
.lp-page .sp-page-info,
.sp-page .sp-page-info {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  padding: 0 4px;
  margin: 0 0 14px;
  width: 100%;
  float: none !important;
}

.lp-page .sp-page-info>div,
.sp-page .sp-page-info>div,
.lp-page .sp-page-info #specialsListingTopNumber,
.lp-page .sp-page-info #specialsListingTopLinks,
.lp-page .sp-page-info #newProductsDefaultListingTopNumber,
.lp-page .sp-page-info #newProductsDefaultListingTopLinks,
.lp-page .sp-page-info #featuredProductsListingTopNumber,
.lp-page .sp-page-info #featuredProductsListingTopLinks,
.lp-page .sp-page-info #allProductsListingTopNumber,
.lp-page .sp-page-info #allProductsListingTopLinks,
.sp-page .sp-page-info #specialsListingTopNumber,
.sp-page .sp-page-info #specialsListingTopLinks {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  padding: 0 !important;
}

.lp-page .sp-page-info .navSplitPagesResult,
.sp-page .sp-page-info .navSplitPagesResult {
  font: 600 12.5px/1.3 var(--font-body);
  color: var(--ink-mute);
  text-align: left !important;
}

.lp-page .sp-page-info .navSplitPagesLinks,
.sp-page .sp-page-info .navSplitPagesLinks {
  text-align: right !important;
}

/* Tablet / mobile */
@media (max-width: 1024px) {
  .lp-page #productListing {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 720px) {
  .lp-page {
    padding: 8px 2px 60px;
  }

  body#productsnewBody .lp-page #newProductsDefaultHeading,
  body#featuredproductsBody .lp-page #featuredDefaultHeading,
  body#productsallBody .lp-page #allProductsDefaultHeading,
  .lp-page .sp-head h1,
  .lp-page .sp-head>h1 {
    font-size: 22px !important;
  }

  .lp-page .sp-head {
    padding-bottom: 12px;
    margin-bottom: 14px;
  }

  .lp-page .sp-head__count {
    font-size: 10.5px;
    padding: 6px 11px;
    letter-spacing: .06em;
  }

  .lp-page #productListing {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .lp-page #productListing .inner-box,
  .lp-page #productListing>*>*:not(a:first-of-type):not(.list-image):not(.prod-tag) {
    padding: 10px 12px 12px !important;
  }

  .lp-page #productListing .centerBoxContentsProducts .itemTitle,
  .lp-page #productListing .centerBoxContentsFeatured .itemTitle,
  .lp-page #productListing .specialsListBoxContents .product-name {
    font-size: 12.5px !important;
  }

  .lp-page #productListing .productSpecialPrice,
  .lp-page #productListing span.productSpecialPrice,
  .lp-page #productListing i.priceshown {
    font-size: 16px !important;
  }

  .lp-page #productListing img {
    padding: 10px !important;
  }

  .lp-page .sp-empty {
    padding: 40px 18px;
  }
}

/* =========================================================================
   ADDED-TO-CART TOAST DIALOG  (#addedToCartDialog)
   Triggered by diy_js: $("#addedToCartDialog").show().delay(1200).fadeOut();
   ========================================================================= */
#addedToCartDialog,
body #addedToCartDialog.alert-dialog {
  display: none;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 9999 !important;
  width: 320px !important;
  max-width: calc(100vw - 32px) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

#addedToCartDialog .alert-dialog-content,
#addedToCartDialog.alert-dialog .alert-dialog-content {
  margin: 0 !important;
  border: 0 !important;
  width: 100% !important;
  height: auto !important;
  background: var(--surface);
  border-radius: 22px;
  padding: 28px 24px 24px;
  box-shadow:
    0 24px 60px -12px rgba(22, 22, 22, .30),
    0 4px 14px -2px rgba(22, 22, 22, .18),
    inset 0 1px 0 rgba(255, 255, 255, .7);
  position: relative;
  overflow: hidden;
  pointer-events: auto;
}

#addedToCartDialog .alert-dialog-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-deep) 100%);
}

#addedToCartDialog .alert-dialog-content::after {
  content: "";
  position: absolute;
  inset: -40% 50% auto -50%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(31, 181, 122, .18) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

#addedToCartDialog .container {
  text-align: center !important;
  position: relative;
  z-index: 1;
  color: var(--ink) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

#addedToCartDialog .status-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px !important;
  border-radius: 50%;
  background: linear-gradient(135deg, #1FB57A 0%, var(--mint) 100%);
  color: #fff !important;
  font-size: 32px !important;
  box-shadow:
    0 10px 28px -8px rgba(15, 157, 122, .55),
    0 0 0 8px rgba(31, 181, 122, .12);
  animation: addedToCart_pop .35s cubic-bezier(.34, 1.56, .64, 1);
}

#addedToCartDialog .status-icon i {
  font-size: inherit !important;
  color: inherit !important;
}

@keyframes addedToCart_pop {
  0% {
    transform: scale(.3);
    opacity: 0;
  }

  60% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

#addedToCartDialog hr,
#addedToCartDialog .container hr {
  display: none !important;
}

#addedToCartDialog .container>.message::before {
  content: "Success";
  display: block;
  margin-bottom: 4px;
  font: 700 10.5px/1 var(--font-body);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mint);
}

#addedToCartDialog .message {
  font: 700 18px/1.3 var(--font-display) !important;
  color: var(--ink) !important;
  letter-spacing: -.005em;
}

@media (max-width: 480px) {

  #addedToCartDialog,
  body #addedToCartDialog.alert-dialog {
    width: 280px !important;
  }

  #addedToCartDialog .alert-dialog-content {
    padding: 24px 20px 22px;
  }

  #addedToCartDialog .status-icon {
    width: 56px;
    height: 56px;
    font-size: 28px !important;
  }

  #addedToCartDialog .message {
    font-size: 16px !important;
  }
}

/* =========================================================================
   STOCK-WARNING DIALOG  (#stockWarningDialog)
   Replaces native alert() for "no enough stock" server messages.
   ========================================================================= */
#stockWarningDialog {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  background: rgba(22, 22, 22, .42);
  backdrop-filter: blur(2px);
  padding: 16px;
  opacity: 0;
  transition: opacity .18s ease;
}

#stockWarningDialog.is-open {
  display: flex;
  opacity: 1;
}

#stockWarningDialog .stock-warning-dialog__card {
  position: relative;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border-radius: 22px;
  padding: 28px 24px 22px;
  box-shadow:
    0 24px 60px -12px rgba(22, 22, 22, .35),
    0 4px 14px -2px rgba(22, 22, 22, .18),
    inset 0 1px 0 rgba(255, 255, 255, .7);
  overflow: hidden;
  text-align: center;
  animation: stockWarn_in .35s cubic-bezier(.34, 1.56, .64, 1);
}

#stockWarningDialog .stock-warning-dialog__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #F2B61C 0%, #E69100 100%);
}

#stockWarningDialog .stock-warning-dialog__card::after {
  content: "";
  position: absolute;
  inset: -40% 50% auto -50%;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(242, 182, 28, .22) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

#stockWarningDialog .stock-warning-dialog__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F2B61C 0%, #E69100 100%);
  color: #fff;
  font-size: 30px;
  box-shadow:
    0 10px 28px -8px rgba(230, 145, 0, .55),
    0 0 0 8px rgba(242, 182, 28, .12);
  animation: stockWarn_pop .4s cubic-bezier(.34, 1.56, .64, 1);
}

#stockWarningDialog .stock-warning-dialog__eyebrow {
  position: relative;
  z-index: 1;
  font: 700 10.5px/1 var(--font-body);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #C57600;
  margin-bottom: 6px;
}

#stockWarningDialog .stock-warning-dialog__title {
  position: relative;
  z-index: 1;
  font: 700 19px/1.3 var(--font-display);
  color: var(--ink);
  letter-spacing: -.005em;
  margin-bottom: 8px;
}

#stockWarningDialog .stock-warning-dialog__msg {
  position: relative;
  z-index: 1;
  font: 400 14px/1.5 var(--font-body);
  color: var(--ink-soft);
  margin-bottom: 18px;
}

#stockWarningDialog .stock-warning-dialog__btn {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 11px 28px;
  border-radius: 99px;
  font: 700 14px/1 var(--font-body);
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  box-shadow: 0 8px 18px -8px rgba(214, 62, 34, .55);
  transition: transform .15s ease, box-shadow .15s ease;
}

#stockWarningDialog .stock-warning-dialog__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px -10px rgba(214, 62, 34, .65);
}

#stockWarningDialog .stock-warning-dialog__btn:active {
  transform: translateY(0);
}

@keyframes stockWarn_in {
  0% {
    transform: translateY(8px) scale(.96);
    opacity: 0;
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes stockWarn_pop {
  0% {
    transform: scale(.3);
    opacity: 0;
  }

  60% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (max-width: 480px) {
  #stockWarningDialog .stock-warning-dialog__card {
    width: 300px;
    padding: 24px 20px 20px;
  }

  #stockWarningDialog .stock-warning-dialog__icon {
    width: 56px;
    height: 56px;
    font-size: 26px;
  }

  #stockWarningDialog .stock-warning-dialog__title {
    font-size: 17px;
  }
}

/* =========================================================================
   MMENU: keep the offcanvas nav out of normal flow.
   The legacy <nav id="menu"> sits in the page body and contains the entire
   mobile category menu (~17k px tall). mmenu's stock rule
   `.mm-menu--offcanvas { position: fixed }` was being overridden by
   a higher-specificity rule somewhere (likely the id-based `#menu`
   visibility/position rules in stylesheet.css), leaving the nav as
   `position: static`. That kept its full layout height in normal flow
   and inflated body.scrollHeight to ~22k px on every page (visible as
   huge blank space below the footer).

   We re-assert `position: fixed` ONLY — width / left / right / top /
   bottom stay under mmenu's control so the panel keeps its proper
   side-drawer size (240–440px wide, anchored left or right depending
   on the .mm-menu--position-* modifier). */
body>nav#menu,
nav#menu.mm-menu,
#menu.mm-menu--offcanvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  /* right + width intentionally NOT set so mmenu's
     `.mm-menu--position-left { right: auto; width: clamp(240px,…,440px) }`
     keeps the side drawer at its natural 240–440px width. */
}

/* =========================================================================
   BREADCRUMB (.cBreadCrumb / .pi-breadcrumb) on product info page.
   Rendered inside .pi-page so it shares the page's max-width and padding.
   Single warm-surface pill, flat text, caret separators, home icon only.
   ========================================================================= */
.pi-page>.cBreadCrumb,
.pi-page>.pi-breadcrumb {
  margin: 0 0 16px !important;
  padding: 8px 14px !important;
  background: var(--surface-warm) !important;
  border-radius: var(--r-pill) !important;
  width: fit-content !important;
  max-width: 100%;
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font: 500 12.5px/1 var(--font-body);
  color: var(--ink-mute);
  box-sizing: border-box;
}

.pi-page .cBreadCrumb a.breadCrumbText,
.pi-page .cBreadCrumb label.breadCrumbText {
  color: var(--ink-soft) !important;
  text-decoration: none !important;
  font: 500 12.5px/1 var(--font-body) !important;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 280px;

  overflow: hidden;
  text-overflow: ellipsis;
}

.pi-page .cBreadCrumb a.breadCrumbText:hover {
  color: var(--brand) !important;
}

.pi-page .cBreadCrumb label.breadCrumbText {
  color: var(--ink) !important;
  font-weight: 700 !important;
}

.pi-page .cBreadCrumb i.breadcrumbRight,
.pi-page .cBreadCrumb i.fa-caret-right {
  color: var(--ink-mute);
  font-size: 11px;
  opacity: .55;
  margin: 0 10px;
}

.pi-page .cBreadCrumb a.breadCrumbText i.fa-home,
.pi-page .cBreadCrumb a.breadCrumbText i.fas.fa-home {
  color: var(--ink) !important;
  font-size: 12px;
}

@media (max-width: 900px) {

  .pi-page>.cBreadCrumb,
  .pi-page>.pi-breadcrumb {
    margin: 0 0 12px !important;
    padding: 7px 12px !important;
    gap: 5px;
  }

  .pi-page .cBreadCrumb a.breadCrumbText,
  .pi-page .cBreadCrumb label.breadCrumbText {
    font-size: 12px !important;

  }

  .pi-page .cBreadCrumb i.breadcrumbRight,
  .pi-page .cBreadCrumb i.fa-caret-right {
    font-size: 10px;
    margin: 0 1px;
  }
}

@media (max-width: 480px) {

  .pi-page>.cBreadCrumb,
  .pi-page>.pi-breadcrumb {
    margin: 0 0 10px !important;
    padding: 6px 11px !important;
  }

  .pi-page .cBreadCrumb a.breadCrumbText,
  .pi-page .cBreadCrumb label.breadCrumbText {}
}

/* =========================================================================
   PRODUCT INFO PAGE  (.pi-page #productGeneral)
   ========================================================================= */
.pi-page {

  margin: 0 auto;
  padding: 16px 18px;
  font-family: var(--font-body);
  color: var(--ink);
  box-sizing: border-box;
}

.pi-page * {
  box-sizing: border-box;
}

body#productinfoBody .pi-page #productName,
.pi-page .pi-name {
  background: transparent !important;
  color: var(--ink) !important;
  font: 700 26px/1.25 var(--font-display) !important;
  letter-spacing: -.01em;
  margin: 4px 0 12px !important;
  padding: 0 !important;
  text-align: left !important;
  border-radius: 0 !important;
}

.pi-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  gap: 36px;
  margin: 0 0 28px;
  align-items: start;
}

.pi-hero__media {
  top: calc(var(--header-h, 64px) + 16px);
  /* Match heights both ways: stretch to the grid row so when the info card is
     taller, the image card grows to the same height (and vice-versa). Content
     centered so the image sits nicely in a taller card. height:auto overrides
     the base stylesheet's #pinfo-left content-height pin. */
  align-self: stretch;
  height: auto !important;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  width: 100%;
}

.pi-hero__media,
.pi-hero__media>#pinfo-left,
.pi-hero__media>#pinfo-left.group {
  width: 100% !important;
}

.pi-hero__info {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 30px 32px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  /* Match the image card's height. The base stylesheet.css sets
     #cart-box{height:max-content} (an ID rule) which pins this card to its
     content height and defeats the stretch — override it so align-self can
     stretch the card down to the image card's height. */
  align-self: stretch;
  height: auto !important;
}

/* Soft top accent stripe in brand color */
.pi-hero__info::before {
  content: "";
  position: absolute;
  top: 0;
  left: 30px;
  right: 30px;
  height: 4px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-deep) 60%, transparent 100%);
  border-radius: 0 0 4px 4px;
}

.pi-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.pi-page .pi-meta__chip--model {
  display: none !important;
}

.pi-meta__chip {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 5px 11px !important;
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  font: 600 11.5px/1 var(--font-body) !important;
  letter-spacing: .04em;
  color: var(--ink-soft) !important;
  margin: 0 !important;
  text-transform: none !important;
}

.pi-meta__chip i {
  font-size: 10.5px;
  color: var(--ink-mute);
}

.pi-meta__chip--stock.is-out {
  background: #ECE8DD !important;
  border-color: rgba(90, 82, 68, .20) !important;
  color: #5B5247 !important;
}

.pi-meta__chip--stock.is-out i {
  color: #8A8275;
}

.pi-meta__chip--stock.is-preorder {
  background: #DCF3E8 !important;
  border-color: rgba(11, 110, 85, .22) !important;
  color: #0B6E55 !important;
}

.pi-meta__chip--stock.is-preorder i {
  color: var(--mint);
}

/* Price block — bold focal point with a small coral pulse anchor */
.pi-page #productPrices,
.pi-page .pi-price {
  background: transparent !important;
  color: var(--brand-deep) !important;
  font: 800 36px/1 var(--font-display) !important;
  letter-spacing: -.02em;
  margin: 6px 0 22px !important;
  padding: 0 0 20px !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px dashed var(--line) !important;
  text-align: left !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
  overflow: visible !important;
}

.pi-page .pi-price em,
.pi-page .pi-price i,
.pi-page #productPrices em,
.pi-page #productPrices i {
  font-style: normal;
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: 0;
  align-self: center;
}

.pi-page .pi-price i.priceshown {
  font-size: unset !important;
}

.pi-page .pi-price .normalprice,
.pi-page .pi-price s,
.pi-page .pi-price s.productSpecialPriceSale,
.pi-page #productPrices .normalprice,
.pi-page #productPrices s {
  color: var(--ink-mute) !important;
  font: 500 17px/1 var(--font-body) !important;
  text-decoration: line-through !important;
  align-self: center;
}

.pi-page .pi-price .productSpecialPrice,
.pi-page #productPrices .productSpecialPrice {
  color: #f5543a !important;
  font: 800 36px/1 var(--font-display) !important;
}

/* "Save 20% off" badge — solid coral gradient pill with tag icon */
.pi-page .pi-price .productPriceDiscount,
.pi-page #productPrices .productPriceDiscount {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff !important;
  border: 0;
  border-radius: 999px;
  font: 800 10.5px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  align-self: center;
  box-shadow: 0 4px 12px -3px rgba(214, 62, 34, .45);
}

.pi-page .pi-price .productPriceDiscount::before,
.pi-page #productPrices .productPriceDiscount::before {
  content: "\f02b";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 10px;
}

.pi-page .pi-price__call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: #25D366;
  color: #fff;
  border-radius: 999px;
  font: 700 14px/1 var(--font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pi-hero__info .divider {
  height: 1px;
  background: var(--line);
  margin: 18px 0;
  position: relative;
}

.pi-hero__info .divider::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 1px;
  background: var(--brand);
}

.pi-page .pi-notice,
.pi-page .productNoticeWithinBox,
.pi-page .attributesOptionText:not(:empty) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 5px !important;
  margin: 0 0 16px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .55), transparent 55%),
    linear-gradient(135deg, #FFF8EA 0%, #FFEBC8 100%) !important;
  border: 1px solid #ECC780 !important;
  border-radius: 16px !important;
  font: 500 11.5px var(--font-body) !important;
  color: #5A3D0A !important;
  position: relative;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  overflow: hidden;
  box-shadow: 0 6px 22px -10px rgba(185, 131, 21, .35), inset 0 1px 0 rgba(255, 255, 255, .45);
  letter-spacing: .005em;
}

.pi-page .pi-notice::after,
.pi-page .productNoticeWithinBox::after,
.pi-page .attributesOptionText:not(:empty)::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ffd300 0%, #e5b000 100%);
}

/* Force every descendant element to wrap and stay inside the bubble */
.pi-page .pi-notice *,
.pi-page .productNoticeWithinBox *,
.pi-page .attributesOptionText *:not(br) {
  max-width: 100% !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.pi-page .pi-notice table,
.pi-page .productNoticeWithinBox table,
.pi-page .attributesOptionText table {
  width: 100% !important;
  table-layout: fixed !important;
}

.pi-page .pi-notice img,
.pi-page .productNoticeWithinBox img,
.pi-page .attributesOptionText img {
  max-width: 100% !important;
  height: auto !important;
}

/* Belt and suspenders — keep the info panel from letting any child
   bleed past its content box. */
.pi-hero__info {
  overflow-x: clip;
}

.pi-page .productNoticeWithinBox p,
.pi-page .attributesOptionText p {
  margin: 0 0 6px !important;
  display: block !important;
}

.pi-page .productNoticeWithinBox p:last-child,
.pi-page .attributesOptionText p:last-child {
  margin: 0 !important;
}

.pi-page .productNoticeWithinBox strong,
.pi-page .productNoticeWithinBox b,
.pi-page .attributesOptionText strong,
.pi-page .attributesOptionText b {
  color: var(--brand-deep) !important;
  font-weight: 800 !important;
  font-style: normal;
}

.pi-page .productNoticeWithinBox span[style*="color"],
.pi-page .productNoticeWithinBox font[color],
.pi-page .productNoticeWithinBox font,
.pi-page .attributesOptionText span[style*="color"],
.pi-page .attributesOptionText font[color],
.pi-page .attributesOptionText font {
  color: var(--brand-deep) !important;
  font-weight: 700 !important;
  background: transparent !important;
}

.pi-page .productNoticeWithinBox a,
.pi-page .attributesOptionText a {
  color: var(--brand-deep) !important;
  text-decoration: underline;
  font-weight: 700;
}

.pi-page .productNoticeWithinBox a:hover,
.pi-page .attributesOptionText a:hover {
  color: var(--brand) !important;
}

/* Hide doubled <br><br> and empty paragraphs */
.pi-page .productNoticeWithinBox br+br,
.pi-page .attributesOptionText br+br {
  display: none;
}

.pi-page .attributesOptionText:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Attribute option pills */
.pi-page .productAttributes,
.pi-page .pi-attrs {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 0 !important;
  background: transparent !important;
  margin: 0 0 8px !important;
}

.pi-page .productAttributes tr,
.pi-page .pi-attrs tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  background: transparent !important;
  padding: 0 0 14px;
}

.pi-page .productAttributes th.optionNm,
.pi-page .pi-attrs th.optionNm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: left !important;
  background: transparent !important;
  padding: 0 !important;
  font: 700 11px/1 var(--font-body) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute) !important;
}

.pi-page .productAttributes th.optionNm::before,
.pi-page .pi-attrs th.optionNm::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
  margin-right: 8px;
}

.pi-page .products_variationTD {
  padding: 0 !important;
  background: transparent !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pi-page .btnProductsVariation {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.pi-page button.products_variation {
  padding: 11px 18px !important;
  min-width: 80px;
  background: var(--surface) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 12px !important;
  font: 600 13.5px/1 var(--font-body) !important;
  color: var(--ink) !important;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
  text-transform: none !important;
  position: relative;
}

.pi-page button.products_variation:hover {
  border-color: var(--brand) !important;
  color: var(--brand-deep) !important;
}

.pi-page button.products_variation.selected {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%) !important;
  border-color: var(--brand-deep) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(214, 62, 34, .40);
}

/* Unavailable combination (e.g. 12mm has no 90/100 yards) — diy_js sets
   the button's `disabled` prop; grey it out so it reads as unselectable. */
.pi-page button.products_variation:disabled,
.pi-page button.products_variation[disabled],
.pi-page button.products_variation.disabled-btn,
.pi-page .products_variation:disabled,
.pi-page .products_variation[disabled],
.pi-page .products_variation.disabled-btn {
  background: #F3F2EF !important;
  border-color: #E8E4DB !important;
  border-style: dashed !important;
  color: var(--ink-mute) !important;
  opacity: .5;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

/* kill the hover lift/colour on unavailable buttons */
.pi-page button.products_variation:disabled:hover,
.pi-page button.products_variation[disabled]:hover,
.pi-page button.products_variation.disabled-btn:hover,
.pi-page .products_variation:disabled:hover,
.pi-page .products_variation[disabled]:hover,
.pi-page .products_variation.disabled-btn:hover {
  border-color: #E8E4DB !important;
  color: var(--ink-mute) !important;
  background: #F3F2EF !important;
  transform: none !important;
}

.pi-page .outOfStockText {
  display: none;
  font: 600 10px/1 var(--font-body);
  color: var(--ink-mute);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pi-page .btnProductsVariation.outOfStock .products_variation,
.pi-page .btnProductsVariation.outOfStock button.products_variation {
  opacity: .55;
  text-decoration: line-through;
}

.pi-page .btnProductsVariation.outOfStock .outOfStockText {
  display: inline-block;
}

/* Add-to-cart CTA — block layout so inline qty stepper stays on one row.
   No top border: the price's dashed underline (or the optional .divider above)
   already separates this area, so a border here would double the line. */
.pi-page #cartAdd,
.pi-page .pi-cta {
  display: block;
  margin: 4px 0 0;
  padding: 14px 0 0;
}

.pi-page #cartAdd>*,
.pi-page .pi-cta>* {
  margin: 0;
}

.pi-page .max-qty {
  display: flex !important;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  font: 700 10.5px/1 var(--font-body) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft) !important;
  margin: 12px auto 0 !important;
  padding: 7px 12px !important;
  background: var(--bg);
  border-radius: 999px;
  border: 1px solid var(--line);
}

.pi-page .max-qty::before {
  content: "\f1ec";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 10px;
  color: var(--brand-deep);
}

/* Collapse wrapper when there's no min/units to show */
.pi-page .max-qty:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

.pi-page .qty-text {
  display: none !important;
}

/* Wrap the qty buttons + input as a connected pill */
.pi-page .pi-cta {
  position: relative;
}

.pi-page .pi-cta .cart-qty-modify,
.pi-page .pi-cta button.cart-qty-modify {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: var(--bg) !important;
  border: 1.5px solid var(--line) !important;
  color: var(--ink) !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .12s ease;
  margin: 0 6px 0 0 !important;
  vertical-align: middle;
}

.pi-page .pi-cta .cart-qty-modify+input.qty+.cart-qty-modify {
  margin: 0 0 0 6px !important;
}

.pi-page .pi-cta .cart-qty-modify:hover {
  border-color: var(--brand) !important;
  background: var(--surface) !important;
  color: var(--brand) !important;
}

.pi-page .pi-cta .cart-qty-modify:active {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  transform: scale(.96);
}

.pi-page .pi-cta input.qty {
  width: 70px !important;
  height: 42px !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 12px !important;
  background: var(--surface) !important;
  text-align: center !important;
  font: 700 16px/1 var(--font-display) !important;
  color: var(--ink) !important;
  vertical-align: middle;
  appearance: textfield;
}

.pi-page .pi-cta input.qty::-webkit-outer-spin-button,
.pi-page .pi-cta input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pi-page .pi-cta input.qty:focus {
  outline: 0 !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(255, 90, 60, .16) !important;
}

.pi-page .pi-cta button.button_add_to_cart,
.pi-page .pi-cta .cssButton.button_add_to_cart,
.pi-page button.button_add_to_cart,
.pi-page .button_add_to_cart {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  padding: 16px 28px !important;
  margin-top: 16px !important;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%) !important;
  background-image: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%) !important;
  background-color: var(--brand) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 14px !important;
  font: 800 14px/1 var(--font-body) !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: 0 8px 22px -6px rgba(214, 62, 34, .50), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  opacity: 1 !important;
  filter: none;
}

#productPrices .productDisplayPrice {
  color: #f8563c;
}

.pi-page .pi-cta button.button_add_to_cart i,
.pi-page button.button_add_to_cart i {
  color: #fff !important;
}

.pi-page .pi-cta button.button_add_to_cart:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 12px 28px -6px rgba(214, 62, 34, .60), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

.pi-page .pi-cta__preorder {
  background: linear-gradient(135deg, #1FB57A 0%, #0B8B5B 100%) !important;
  box-shadow: 0 8px 22px -6px rgba(15, 157, 122, .50), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.pi-page .pi-cta__preorder:hover {
  box-shadow: 0 12px 28px -6px rgba(15, 157, 122, .60), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

.pi-page .pi-cta .remind-text {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin: 10px auto 0 !important;
  padding: 7px 12px !important;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 500 12px/1 var(--font-body) !important;
  color: var(--ink-soft) !important;
  width: max-content;
}

.pi-page .pi-cta .remind-text:empty {
  display: none !important;
}

.pi-page .pi-cta .remind-text::before {
  content: "\f05a";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: var(--ink-mute);
  font-size: 11px;
  flex-shrink: 0;
}

/* In-cart display — server only renders the div when qty > 0, with the
   .show class. JS removes .show when cart_quantity hits 0, so hide
   accordingly. */

.pi-page .pi-cta .quanityInCartDisplay,
.pi-page .pi-cta .quanityleftDisplay {
  font: 600 12px/1 var(--font-body) !important;
  color: var(--mint) !important;
  margin: 10px 0 0 !important;
  padding: 8px 12px !important;
  background: #DCF3E8;
  border-radius: 999px;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
}

.pi-page .pi-cta .quanityInCartDisplay:not(.show) {
  display: none !important;
}

.pi-page .pi-cta .quanityInCartDisplay:empty,
.pi-page .pi-cta .quanityleftDisplay:empty {
  display: none !important;
}

.pi-page .pi-cta .quanityInCartDisplay::before {
  content: "\f217";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 11px;
}

.pi-page .pi-cta .quanityInCartDisplay i.count {
  font-style: normal;
  font-weight: 800;
  color: var(--brand-deep);
}

/* Main image area inside the new media card.
   #productMainImage holds the main image (via inline document.write) +
   thumb-strip. Force the legacy imgSubContent banner and "click to
   enlarge" text out of the layout entirely. */
.pi-page #productMainImage {
  position: relative !important;
  padding: 0 !important;
  background: var(--surface) !important;
  margin: 0 !important;
  display: block !important;
  text-align: center;
  width: 100% !important;
}

/* HARD HIDE everything legacy in this card except the main image + thumbs */
.pi-page #productMainImage>br,
.pi-page #productMainImage .imgLink,
.pi-page #productMainImage img.imgSubContent,
.pi-page #productMainImage .imgSubContent,
#productMainImage img.imgSubContent,
#productMainImage .imgSubContent {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  pointer-events: none !important;
}

/* The MAIN image (id=SBA_ProductImage, class=img_view) — big, fills card */
.pi-page #productMainImage>img:not(.imgSubContent),
.pi-page #productMainImage img.img_view,
.pi-page #productMainImage img#SBA_ProductImage,
#productMainImage>img:not(.imgSubContent),
#productMainImage img#SBA_ProductImage {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  padding: 18px !important;
  background: var(--surface) !important;
  margin: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  position: static !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Thumb-strip (additional images / attribute variations) under the image */
/* Flex layout: [left arrow] [scroll-wrap with strip inside] [right arrow].
   min-width:0 on the scroll-wrap is critical — it lets the flex child
   actually shrink so the inner .img-scroll can detect overflow. */
.pi-page #productMainImage .img-list {
  margin: 0 !important;
  padding: 12px 8px !important;
  background: var(--surface);
  border-top: 1px solid var(--line);
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 6px;
}

.pi-page #productMainImage .img-list .scroll-btn {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0 !important;
}

.pi-page #productMainImage .img-list .scroll-btn .scroll-left,
.pi-page #productMainImage .img-list .scroll-btn .scroll-right {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pi-page #productMainImage .img-scroll-wrap {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

/* Override legacy stylesheet.css .img-scroll rules — must use !important
   because the legacy rule sets overflow-y (wrong axis), width:calc,
   margin, height:65px — all of which would block horizontal scrolling. */
.pi-page #productMainImage .img-scroll {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth;
  padding: 2px !important;
  margin: 0 !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 64px;
  white-space: nowrap;
  box-sizing: border-box !important;
}

.pi-page #productMainImage .img-scroll::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}

.pi-page #productMainImage .img-scroll-img {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
  position: relative;
  padding: 0;
  box-sizing: border-box;
}

.pi-page #productMainImage .img-scroll-img.selected {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.pi-page #productMainImage .img-scroll-img:hover {
  border-color: var(--brand);
}

.pi-page #productMainImage .img-scroll-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  padding: 4px;
  background: var(--surface);
  display: block;
  box-sizing: border-box;
}

.pi-page #productMainImage .scroll-btn {
  text-align: center;
}

.pi-page #productMainImage .scroll-btn .scroll-left,
.pi-page #productMainImage .scroll-btn .scroll-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pi-page #productMainImage .scroll-btn span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 12px !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.pi-page #productMainImage .scroll-btn span:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.pi-page #productMainImage .scroll-btn span i {
  font-size: 12px !important;
  line-height: 1;
}

.pi-page #productMainImage .imgLink {
  display: none !important;
}

.pi-page #productMainImage .img_view {
  cursor: zoom-in;
}

@media (max-width: 640px) {
  .pi-page #productMainImage .img-scroll-img {
    width: 56px;
    height: 56px;
  }

  .pi-page #productMainImage .scroll-btn span {
    width: 26px;
    height: 26px;
  }
}

/* Description / extra section */
.pi-page .pi-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  margin: 0 0 22px;
  overflow: hidden;
}

.pi-page .pi-section__head {
  padding: 16px 22px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.pi-page .pi-section__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font: 700 17px/1.2 var(--font-display) !important;
  color: var(--ink) !important;
  text-align: left !important;
  border: 0 !important;
}

.pi-page .pi-section__title i {
  color: var(--brand-deep);
  font-size: 15px;
}

.pi-page .pi-section__body {
  padding: 22px 26px;
}

.pi-page #productDescription,
.pi-page .productDescriptionText {
  font: 400 14.5px/1.7 var(--font-body) !important;
  color: var(--ink) !important;
  background: transparent !important;
}

.pi-page #productDescription p {
  margin: 0 0 10px;
  font-size: unset !important;
}

.pi-page #productDescription img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.pi-page .pi-desc-images {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

.pi-page .pi-desc-images img,
.pi-page .productDescriptionImage {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

/* Related-product carousels */
.pi-related {
  margin: 0 0 22px;
}

.pi-related__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 14px;
  padding: 0 4px;
}

.pi-related__title {
  margin: 0 !important;
  padding: 0 0 10px !important;
  background: transparent !important;
  font: 700 18px/1.2 var(--font-display) !important;
  color: var(--ink) !important;
  text-align: left !important;
  position: relative;
  border: 0 !important;
}

.pi-related__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  background: var(--brand);
  border-radius: 3px;
}

.pi-related__rail {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  padding: 6px 4px 16px !important;
  margin: 0 -4px !important;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  justify-content: unset !important;
}

.pi-related__rail::-webkit-scrollbar {
  height: 8px;
}

.pi-related__rail::-webkit-scrollbar-track {
  background: transparent;
}

.pi-related__rail::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}

.pi-related__rail::-webkit-scrollbar-thumb:hover {
  background: var(--brand);
}

/* Compact related-product cards for the product info page rails — smaller
   than the homepage carousel cards since the rails sit in narrower
   sections below the hero. */
.pi-page .pi-related__card {
  flex: 0 0 auto !important;
  width: 190px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px !important;
  scroll-snap-align: start;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md, 14px) !important;
  box-shadow: none !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  text-align: center !important;
}

.pi-page .pi-related__card:hover {
  transform: translateY(-3px);
  border-color: transparent !important;
  box-shadow: var(--shadow-md) !important;
}

.pi-related__image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg);
  border-radius: var(--r-sm, 10px);
  overflow: hidden;
}

.pi-related__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
  padding: 8px;
  background: var(--surface);
  transition: transform .35s ease;
}

.pi-page .pi-related__card:hover .pi-related__image img {
  transform: scale(1.04);
}

.pi-page .pi-related__card a.column-product-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  font: 500 12.5px/1.4 var(--font-body) !important;
  color: var(--ink-soft) !important;
  background: transparent !important;
  margin: 4px auto 0 !important;
  padding: 0 4px !important;
  text-decoration: none !important;
  text-align: center !important;
  min-height: calc(12.5px * 1.4 * 2);
  letter-spacing: 0;
}

.pi-page .pi-related__card:hover a.column-product-name {
  color: var(--brand) !important;
}

.pi-page .pi-related__card .list-price {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 2px;
  margin: auto auto 0 !important;
  padding: 8px 0 0 !important;
  font: 500 13px/1.3 var(--font-body) !important;
  color: var(--ink-soft) !important;
  background: transparent !important;
}

.pi-page .pi-related__card .list-price>* {
  text-align: center !important;
  align-self: center !important;
}

.pi-page .pi-related__card .normalprice,
.pi-page .pi-related__card s.productSpecialPriceSale {
  font: 500 12px/1 var(--font-body) !important;
  color: var(--ink-mute) !important;
  text-decoration: line-through !important;
}

.pi-page .pi-related__card .productSpecialPrice,
.pi-page .pi-related__card i.priceshown,
.pi-page .pi-related__card span.productSpecialPrice {
  font: 800 15px/1.1 var(--font-display) !important;
  color: var(--brand-deep) !important;
  font-style: normal !important;
  text-decoration: none !important;
}

.pi-page .pi-related__card .productPriceDiscount {
  display: inline-flex !important;
  align-items: center;
  align-self: center !important;
  padding: 3px 9px !important;
  background: #FFEDE5 !important;
  color: var(--brand-deep) !important;
  border: 1px solid rgba(214, 62, 34, .20) !important;
  border-radius: 999px !important;
  font: 700 10.5px/1 var(--font-body) !important;
  letter-spacing: .04em !important;
  margin: 4px auto 0 !important;
  white-space: nowrap;
}

/* SALE pill on related-product cards — top-right corner so the
   left side stays free for the feature prod-tag. */
.pi-page .pi-related__card>.prod-tag--sale {
  position: absolute !important;
  top: 8px;
  right: 8px;
  left: auto;
  z-index: 3;
  padding: 4px 9px !important;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font: 800 9.5px/1 var(--font-body) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 10px -2px rgba(214, 62, 34, .45) !important;
  white-space: nowrap;
}

.pi-page .pi-related__card>.prod-tag--sale::before {
  content: none !important;
}

@media (max-width: 900px) {
  .pi-hero {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pi-hero__media {
    position: static;
  }

  body#productinfoBody .pi-page #productName,
  .pi-page .pi-name {
    font-size: 22px !important;
  }

  .pi-page #productPrices,
  .pi-page .pi-price {
    font-size: 24px !important;
  }

  .pi-hero__info {
    padding: 20px 18px;
  }
}

/* =========================================================================
   PRODUCT INFO — MOBILE (≤720px) full redo
   ========================================================================= */
@media (max-width: 720px) {

  /* Page shell — tighter gutters, no horizontal scroll */
  .pi-page {
    padding: 0px 2px 80px !important;
    overflow-x: hidden;
  }

  .pi-page,
  .pi-page * {
    min-width: 0;
  }

  /* Hero stack — already 1-col from the 900px breakpoint; tighten the gap */
  .pi-hero {
    gap: 12px !important;
  }

  /* Image card — keep a clean square ratio so it feels consistent
     across products with very different image aspect ratios */
  .pi-hero__media {
    border-radius: 16px;
    overflow: hidden;
  }

  .pi-page #productMainImage>img:not(.imgSubContent),
  .pi-page #productMainImage img.img_view,
  .pi-page #productMainImage img#SBA_ProductImage {
    aspect-ratio: 1 / 1 !important;
    padding: 12px !important;
    max-height: 360px;
  }

  /* Prod tag (HOT SELLING / BEST QUALITY etc.) — float clear of the title  */
  .pi-page #productMainImage>.prod-tag {

    left: 8px;
    padding: 4px 8px !important;
    font-size: 10.5px !important;
    width: fit-content;
  }

  .pi-page #productMainImage>.prod-tag::before {
    font-size: 11px !important;
  }

  /* Thumb strip — slightly smaller thumbs and tighter padding */
  .pi-page #productMainImage .img-list {
    padding: 10px 6px !important;
  }

  .pi-page #productMainImage .img-scroll-img {
    width: 54px;
    height: 54px;
    border-radius: 9px;
  }

  .pi-page #productMainImage .img-list .scroll-btn {
    width: 24px;
    height: 24px;
  }

  .pi-page #productMainImage .img-list .scroll-btn .scroll-left,
  .pi-page #productMainImage .img-list .scroll-btn .scroll-right {
    width: 24px;
    height: 24px;
  }

  .pi-page #productMainImage .scroll-btn span {
    width: 24px;
    height: 24px;
    font-size: 11px !important;
  }

  .pi-page #productMainImage .scroll-btn span i {
    font-size: 11px !important;
  }

  /* Info panel — tighter padding, smaller radius */
  .pi-hero__info {
    padding: 18px 14px !important;
    border-radius: 16px;
    gap: 0;
  }

  /* Title — allow wrapping and break long product names instead of clipping */
  body#productinfoBody .pi-page #productName,
  .pi-page .pi-name {
    font-size: 19px !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    hyphens: auto;
    margin: 0 0 10px !important;
    padding-right: 0 !important;
  }

  /* Stock / model chips */
  .pi-meta {
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 12px;
  }

  .pi-meta__chip {
    font-size: 11.5px !important;
    padding: 5px 9px !important;
    border-radius: 99px;
    max-width: 100%;
    white-space: normal;
  }

  /* Price block — focal but proportional on small screens */
  .pi-page #productPrices,
  .pi-page .pi-price {
    font-size: 22px !important;
    padding: 12px 0 !important;
    margin: 0 0 6px !important;
    text-align: left !important;
    word-break: break-word;
  }

  .pi-page .pi-price__call {
    font-size: 14px !important;
  }

  .pi-page .pi-price .normalprice,
  .pi-page .pi-price s,
  .pi-page .pi-price s.productSpecialPriceSale {
    font-size: 14px !important;
  }

  .pi-page .pi-price .productSpecialPrice {
    font-size: 22px !important;
  }

  .pi-page .pi-price .productPriceDiscount {
    font-size: 10.5px !important;
    padding: 3px 7px !important;
  }

  /* Attribute variation pills — force wrap, allow buttons to size to content */
  .pi-page table.productAttributes,
  .pi-page .productAttributes.pi-attrs {
    display: block !important;
    width: 100% !important;
  }

  .pi-page table.productAttributes tbody,
  .pi-page table.productAttributes tr {
    display: block !important;
    width: 100% !important;
  }

  .pi-page table.productAttributes th,
  .pi-page table.productAttributes td {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
  }

  .pi-page table.productAttributes th.optionNm {
    font-size: 11.5px !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft) !important;
    padding: 12px 0 6px !important;
  }

  .pi-page .products_variationTD {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .pi-page .btnProductsVariation {
    margin: 0 !important;
  }

  .pi-page button.products_variation,
  .pi-page .products_variation {
    padding: 6px 12px !important;
    font-size: 12.5px !important;
    border-radius: 99px !important;
    white-space: nowrap;
    /* keep one variant name on one line */
    min-height: 32px;
    min-width: 0 !important;
    /* override desktop 80px that prevents wrap */
    line-height: 1.2 !important;
  }

  /* Notice / promo callout — force text to wrap, no horizontal overflow */
  .pi-page .pi-notice,
  .pi-page .productNoticeWithinBox,
  .pi-page .attributesOptionText {
    padding: 12px 12px 12px 42px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    border-radius: 12px;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
  }

  .pi-page .pi-notice::before,
  .pi-page .productNoticeWithinBox::before {
    left: 10px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
    top: 12px !important;
  }

  /* CTA — qty stepper + add to cart on tighter spacing */
  .pi-page #cartAdd {
    padding: 12px 0 !important;
  }

  .pi-page .cart-qty-modify {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }

  .pi-page input[name="cart_quantity"] {
    width: 56px !important;
    height: 36px !important;
    font-size: 15px !important;
  }

  .pi-page .max-qty {
    font-size: 11.5px !important;
    margin-top: 8px !important;
  }

  .pi-page button.button_add_to_cart,
  .pi-page .pi-cta .cssButton.button_add_to_cart,
  .pi-page input[type="submit"].button_add_to_cart {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 14.5px !important;
    border-radius: 14px !important;
    letter-spacing: .03em !important;
  }

  .pi-page .quanityInCartDisplay {
    margin-top: 10px !important;
    font-size: 12.5px !important;
    padding: 6px 12px !important;
  }

  /* Description / sub-sections */
  .pi-page .pi-section {
    border-radius: 14px;
    margin: 0 0 14px;
  }

  .pi-page .pi-section__head {
    padding: 12px 14px !important;
  }

  .pi-page .pi-section__title {
    font-size: 14.5px !important;
  }

  .pi-page .pi-section__body {
    padding: 14px 14px !important;
  }

  .pi-page #productDescription,
  .pi-page .productDescriptionText {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .pi-page #productDescription img,
  .pi-page .productDescriptionText img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* "Specials" / "You May Also Like" / "What's New" carousels under product */
  .pi-page .pi-related,
  .pi-page .pi-related__carousel {
    margin: 0 -10px;
    /* let the strip bleed to the screen edges  */
    padding-left: 10px;
    padding-right: 10px;
  }

  .pi-page .pi-related__carousel {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .pi-page .pi-related__carousel::-webkit-scrollbar {
    display: none;
    height: 0;
  }

  .pi-page .pi-related__card {
    width: 150px !important;
    padding: 10px !important;
    scroll-snap-align: start;
  }

  .pi-page .pi-related__card a.column-product-name {
    font-size: 12px !important;
  }

  .pi-page .pi-related__card .productSpecialPrice,
  .pi-page .pi-related__card i.priceshown {
    font-size: 14px !important;
  }
}

@media (max-width: 380px) {
  .pi-page {
    padding: 6px 8px 80px !important;
  }

  body#productinfoBody .pi-page #productName,
  .pi-page .pi-name {
    font-size: 17.5px !important;
  }

  .pi-page #productPrices,
  .pi-page .pi-price {
    font-size: 20px !important;
  }

  .pi-page .pi-hero__info {
    padding: 14px 12px !important;
  }

  .pi-page .products_variation {
    padding: 5px 10px !important;
    font-size: 12px !important;
    min-height: 30px;
  }

  .pi-page .pi-related__card {
    width: 134px !important;
    padding: 8px !important;
  }

  .pi-page #productMainImage>img:not(.imgSubContent),
  .pi-page #productMainImage img.img_view,
  .pi-page #productMainImage img#SBA_ProductImage {
    max-height: 300px;
    padding: 10px !important;
  }
}

/* =========================================================================
   SPECIALS PAGE  (.sp-page #specialsListing)
   ========================================================================= */
.sp-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 18px 80px;
  font-family: var(--font-body);
  color: var(--ink);
  box-sizing: border-box;
}

.sp-page * {
  box-sizing: border-box;
}

/* Clean page head — title + count chip (no hero) */
body#specialsBody .sp-page #specialsListingHeading,
body#productsnewBody .sp-page #newProductsDefaultHeading,
body#featuredproductsBody .sp-page #featuredDefaultHeading,
body#productsallBody .sp-page #allProductsDefaultHeading,
.sp-head h1#specialsListingHeading,
.sp-head h1#newProductsDefaultHeading,
.sp-head h1#featuredDefaultHeading,
.sp-head h1#allProductsDefaultHeading,
.sp-head>h1 {
  background: transparent !important;
  color: var(--ink) !important;
  padding: 0 !important;
  text-align: left !important;
  font: 700 28px/1.15 var(--font-display) !important;
  margin: 0 !important;
  letter-spacing: -.01em !important;
  border-radius: 0 !important;
}

.sp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.sp-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 56px;
  height: 3px;
  background: var(--brand);
  border-radius: 3px;
}

.sp-head__count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  border-radius: 999px;
  font: 700 12px/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px -2px rgba(214, 62, 34, .35);
  white-space: nowrap;
}

.sp-head__count i {
  font-size: 11px;
  color: #FFE4B0;
}

/* =========================================================================
   SPECIALS — product card redesign (scoped to .sp-page #productListing)
   Grid is locked to fixed column counts so a per-page count rounded
   to a multiple of 4 always fills every row on desktop (4-col),
   tablet (4-col) and mobile (2-col).
   ========================================================================= */
.sp-page #productListing {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sp-page #productListing>*,
.sp-page #productListing .centerBoxContentsSpecials,
.sp-page #productListing .centerBoxContentsProducts {
  width: 100% !important;
  float: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  position: relative;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease !important;
  display: flex !important;
  flex-direction: column;
}

.sp-page #productListing>*:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px);
  border-color: rgba(214, 62, 34, .30) !important;
}

/* Image area — Specials uses .specialsListBoxContents .inner-box > a:first-of-type
   to wrap the image; clip + lock aspect-ratio so the hover-scale doesn't bleed
   over the price tag / name / prod-tag below. */
.sp-page #productListing .list-image,
.sp-page #productListing .specialsListBoxContents .inner-box>a:first-of-type,
.sp-page #productListing .specialsListBoxContents>a:first-of-type,
.sp-page #productListing .centerBoxContentsSpecials>a:first-of-type,
.sp-page #productListing .centerBoxContentsSpecials .inner-box>a:first-of-type {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bg) !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1;
}

.sp-page #productListing img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  padding: 14px !important;
  background: var(--surface) !important;
  transition: transform .35s ease;
}

.sp-page #productListing>*:hover img {
  transform: scale(1.04);
}

/* "SALE" ribbon top-RIGHT — only on the specials page
   (top-left is reserved for the .prod-tag feature pill) */
#specialsListing.sp-page #productListing>*::before {
  content: "SALE";
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  z-index: 2;
  padding: 5px 11px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  border-radius: 8px;
  font: 800 10.5px/1 var(--font-body);
  letter-spacing: .14em;
  box-shadow: 0 4px 10px -2px rgba(214, 62, 34, .45);
}

/* Hard block: never render the ribbon on new / featured / all pages */
#newProductsDefault.sp-page #productListing>*::before,
#featuredDefault.sp-page #productListing>*::before,
#allProductsDefault.sp-page #productListing>*::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Inner content padding */
.sp-page #productListing .inner-box,
.sp-page #productListing .centerBoxContentsSpecials>*:not(a:first-of-type):not(.list-image):not(.prod-tag) {
  padding: 12px 14px 14px !important;
  text-align: left !important;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 0;
}

/* Product name — match side-column style: 13.5px, 500, ink-soft, 2-line clamp.
   Specials cards render the title via `.specialsListBoxContents .product-name`
   (not `h3.itemTitle`) — target both with high specificity to beat legacy. */
.sp-page #productListing .specialsListBoxContents .product-name,
.sp-page #productListing .centerBoxContentsSpecials .product-name,
.sp-page #productListing .specialsListBoxContents h3.itemTitle,
.sp-page #productListing .centerBoxContentsSpecials h3.itemTitle,
.sp-page #productListing .specialsListBoxContents .itemTitle,
.sp-page #productListing .centerBoxContentsSpecials .itemTitle {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  word-break: break-word !important;
  margin: 6px 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: calc(13.5px * 1.45 * 2) !important;
  max-height: calc(13.5px * 1.45 * 2) !important;
  font: 500 13.5px/1.45 var(--font-body) !important;
  font-size: 13.5px !important;
  color: var(--ink-soft) !important;
  background: transparent !important;
  text-decoration: none !important;
  text-align: left !important;
  letter-spacing: 0 !important;
}

.sp-page #productListing>*:hover .product-name,
.sp-page #productListing>*:hover h3.itemTitle,
.sp-page #productListing>*:hover .itemTitle {
  color: var(--brand-deep) !important;
}

/* Price row — centered, normal strike + sale prominent */
.sp-page #productListing .list-price {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 2px;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  font: 500 13px/1.3 var(--font-body) !important;
  color: var(--ink-soft) !important;
  background: transparent !important;
}

.sp-page #productListing .list-price>* {
  text-align: center !important;
  align-self: center !important;
}

.sp-page #productListing .normalprice,
.sp-page #productListing s.productSpecialPriceSale {
  font: 500 12px/1 var(--font-body) !important;
  color: var(--ink-mute) !important;
  text-decoration: line-through !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sp-page #productListing .productSpecialPrice,
.sp-page #productListing span.productSpecialPrice,
.sp-page #productListing i.priceshown {
  font: 800 18px/1.1 var(--font-display) !important;
  color: var(--brand-deep) !important;
  font-style: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -.01em;
}

.sp-page #productListing .productPriceDiscount {
  display: inline-flex !important;
  align-items: center;
  align-self: center !important;
  padding: 3px 9px !important;
  background: #FFEDE5 !important;
  color: var(--brand-deep) !important;
  border: 1px solid rgba(214, 62, 34, .20) !important;
  border-radius: 999px !important;
  font: 700 11px/1 var(--font-body) !important;
  letter-spacing: .04em !important;
  margin: 4px auto 0 !important;
  white-space: nowrap;
}

.sp-page #productListing .productPriceDiscount::before {
  content: "\f02b";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 10px;
  margin-right: 5px;
  color: var(--brand);
}

/* Cart / buy-now button if rendered */
.sp-page #productListing .button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 0 !important;
  padding: 9px 14px !important;
  background: var(--ink) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font: 700 11.5px/1 var(--font-body) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background .18s ease, transform .18s ease !important;
}

.sp-page #productListing .button:hover {
  background: var(--brand) !important;
  transform: translateY(-1px);
  color: #fff !important;
}

/* Sold-out variant — only on the specials page (where the SALE ribbon lives) */
#specialsListing.sp-page #productListing>*:has(.button_sold_out_sm),
#specialsListing.sp-page #productListing>*:has(.button_sold_out) {
  opacity: .85;
}

#specialsListing.sp-page #productListing>*:has(.button_sold_out_sm)::before,
#specialsListing.sp-page #productListing>*:has(.button_sold_out)::before {
  content: "SOLD OUT";
  background: #5B5247;
  color: #fff;
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .25);
}

.sp-page-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
  margin: 0 0 14px;
}

.sp-page-info .navSplitPagesResult {
  font: 600 12.5px/1.3 var(--font-body);
  color: var(--ink-mute);
}

.sp-empty {
  margin: 0 auto;
  max-width: 520px;
  padding: 60px 28px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.sp-empty>i {
  font-size: 38px;
  color: var(--ink-mute);
  opacity: .55;
  margin-bottom: 10px;
}

.sp-empty strong {
  font: 700 17px/1.3 var(--font-display);
  color: var(--ink);
}

.sp-empty span {
  font: 500 13.5px/1.5 var(--font-body);
  color: var(--ink-soft);
  margin-bottom: 14px;
}

.sp-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  border-radius: 999px;
  font: 700 12.5px/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 6px 16px -4px rgba(214, 62, 34, .40);
}

.sp-empty__cta i {
  font-size: 11px;
  transition: transform .2s ease;
}

.sp-empty__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -4px rgba(214, 62, 34, .50);
  color: #fff;
}

/* =========================================================
   Add On Deals dialog — compact-row redesign (2026-06-26)
   Shared style language: white panel, slim rows, pill stepper.
   ========================================================= */
#add-on-deals-dialog {
  max-width: 560px;
  width: 92vw;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px -12px rgba(16, 24, 40, .35);
}
#add-on-deals-dialog .pop-up-dialog-content,
#add-on-deals-dialog .pop-up-dialog-content .container {
  padding: 0;
  height: auto;
}

/* header */
#add-on-deals-dialog .flex-space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* title bar — dark, high-contrast */
#add-on-deals-dialog .aod-head {
  padding: 13px 18px;
  background: #0a1f44;
}
#add-on-deals-dialog h4.title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
#add-on-deals-dialog h4.title i {
  color: #ffb020;
  font-size: 14px;
}
#add-on-deals-dialog .close-dialog {
  background: rgba(255, 255, 255, .1);
  border: none;
  color: #cfd6e4;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#add-on-deals-dialog .close-dialog:hover {
  color: #fff;
  background: #e2342f;
}
/* totals strip — two stat blocks */
#add-on-deals-dialog .aod-stats {
  display: flex;
  align-items: stretch;
  padding: 0;
  background: #eef1f6;
  border-bottom: 1px solid #dfe3e8;
}
#add-on-deals-dialog .aod-stat {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 18px;
}
#add-on-deals-dialog .aod-stat--addon {
  text-align: right;
  align-items: flex-end;
}
#add-on-deals-dialog .aod-stat__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #5b6573;
}
#add-on-deals-dialog .aod-stat__divider {
  width: 1px;
  background: #d4dae3;
  margin: 8px 0;
}
#add-on-deals-dialog .currentTotal {
  font-size: 15px;
  font-weight: 800;
  color: #ff7a00;
}
#add-on-deals-dialog .addOnTotal {
  font-size: 15px;
  font-weight: 800;
  color: #04245b;
}
#add-on-deals-dialog hr {
  display: none;
}

/* list container */
#add-on-deals-dialog .items-table {
  height: auto;
  max-height: 58vh;
  overflow: auto;
  padding: 2px 0 6px;
}
#add-on-deals-dialog table {
  width: 100%;
  border-collapse: collapse;
}
#add-on-deals-dialog table tbody tr:nth-child(even) {
  background-color: transparent;
}

/* compact row */
#add-on-deals-dialog table tbody td {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid #dfe3e8;
}
#add-on-deals-dialog table tbody tr:last-child td {
  border-bottom: none;
}
#add-on-deals-dialog table tbody .items_list {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
}
#add-on-deals-dialog table tbody .items_list img {
  width: 48px;
  height: 48px;
  min-width: 48px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 2px;
}
#add-on-deals-dialog table tbody .items_details {
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
}
#add-on-deals-dialog table h6.item_name {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #0a1f44;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#add-on-deals-dialog .items_details a {
  color: #04245b;
  text-decoration: none;
}
#add-on-deals-dialog .items_details a:hover h6.item_name {
  text-decoration: underline;
}
#add-on-deals-dialog .items_details .pOption {
  display: block;
  font-size: 11px;
  color: #4b5563;
  margin: 1px 0 0;
}
#add-on-deals-dialog .mt-2 {
  margin: 3px 0 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
div#add-on-deals-dialog .normalPrice {
  margin: 0;
  font-size: 12px;
  color: #8a93a0;
}
div#add-on-deals-dialog .specialPrice {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #e23;
}

/* pill stepper */
#add-on-deals-dialog .ddQty {
  display: inline-flex;
  align-items: center;
  margin: 0;
  flex: 0 0 auto;
  border: 1px solid #aab2bd;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
#add-on-deals-dialog .ddQty .cart-qty-modify {
  border: none;
  background: #e7ebf1;
  color: #0a1f44;
  width: 28px;
  height: 30px;
  cursor: pointer;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#add-on-deals-dialog .ddQty .cart-qty-modify:hover {
  background: #04245b;
  color: #fff;
}
#add-on-deals-dialog table tbody .ditemQty {
  border: none;
  border-left: 1px solid #aab2bd;
  border-right: 1px solid #aab2bd;
  width: 42px;
  height: 30px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #0a1f44;
  padding: 0;
  margin: 0;
}

/* min-order tag */
div#add-on-deals-dialog label.min-order {
  float: none;
  flex: 0 0 auto;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: #5b6573;
  white-space: nowrap;
  min-width: 78px;
  text-align: right;
}
div#add-on-deals-dialog label.min-order.danger {
  color: #e23;
}

/* locked rows (cart under min order) */
div#add-on-deals-dialog td.unavailable {
  opacity: .55;
}
div#add-on-deals-dialog td.unavailable .ddQty input,
div#add-on-deals-dialog td.unavailable .ddQty button {
  pointer-events: none;
  color: #8e8e8e;
}

/* empty state */
#add-on-deals-dialog .aod-empty {
  display: block;
  padding: 32px 18px;
  text-align: center;
  color: #8a93a0;
  font-size: 13px;
}

@media (max-width: 480px) {
  #add-on-deals-dialog table tbody td {
    flex-wrap: wrap;
  }
  div#add-on-deals-dialog label.min-order {
    width: 100%;
    min-width: 0;
    text-align: left;
    order: 5;
  }
}

.sp-empty__cta:hover i {
  transform: translateX(3px);
}

@media (max-width: 1024px) {
  .sp-page #productListing {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 720px) {
  .sp-page {
    padding: 8px 2px 60px;
  }

  body#specialsBody .sp-page #specialsListingHeading,
  body#productsnewBody .sp-page #newProductsDefaultHeading,
  body#featuredproductsBody .sp-page #featuredDefaultHeading,
  body#productsallBody .sp-page #allProductsDefaultHeading,
  .sp-head h1#specialsListingHeading,
  .sp-head h1#newProductsDefaultHeading,
  .sp-head h1#featuredDefaultHeading,
  .sp-head h1#allProductsDefaultHeading,
  .sp-head>h1 {
    font-size: 22px !important;
  }

  .sp-head {
    padding-bottom: 12px;
    margin-bottom: 14px;
  }

  .sp-head__count {
    font-size: 10.5px;
    padding: 6px 11px;
    letter-spacing: .06em;
  }

  /* Mobile: 2 columns — 4-multiple per-page still fills (4=2×2, 8=2×4, ...) */
  .sp-page #productListing {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .sp-page #productListing .inner-box,
  .sp-page #productListing .centerBoxContentsSpecials>*:not(a:first-of-type):not(.list-image):not(.prod-tag) {
    padding: 10px 12px 12px !important;
  }

  .sp-page #productListing h3.itemTitle a,
  .sp-page #productListing .itemTitle a {
    font-size: 12.5px !important;
  }

  .sp-page #productListing .productSpecialPrice,
  .sp-page #productListing span.productSpecialPrice,
  .sp-page #productListing i.priceshown {
    font-size: 16px !important;
  }

  .sp-page #productListing img {
    padding: 10px !important;
  }

  #specialsListing.sp-page #productListing>*::before {
    top: 8px;
    right: 8px;
    left: auto;
    padding: 4px 9px;
    font-size: 9.5px;
  }

  .sp-empty {
    padding: 40px 18px;
  }
}

/* =========================================================================
   ACCOUNT SUBPAGES  (.ax-page)
   Used by account_edit, account_password, address_book, address_book_process
   ========================================================================= */
.ax-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 14px 18px 80px;
  font-family: var(--font-body);
  color: var(--ink);
  box-sizing: border-box;
}

.ax-page * {
  box-sizing: border-box;
}

body#accounteditBody .ax-page hr,
body#accountpasswordBody .ax-page hr,
body#addressbookBody .ax-page hr,
body#addressbookprocessBody .ax-page hr {
  display: none !important;
}

body#accounteditBody .ax-page label,
body#accountpasswordBody .ax-page label,
body#addressbookBody .ax-page label,
body#addressbookprocessBody .ax-page label {
  background: transparent !important;
  padding: 0;
}

body#accounteditBody .ax-page table,
body#accountpasswordBody .ax-page table,
body#addressbookBody .ax-page table,
body#addressbookprocessBody .ax-page table {
  background: transparent !important;
  border: 0 !important;
  width: 100% !important;
  border-collapse: separate !important;
}

body#accounteditBody .ax-page fieldset,
body#accountpasswordBody .ax-page fieldset,
body#addressbookprocessBody .ax-page fieldset {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

body#addressbookBody .ax-page .alert,
body#accounteditBody .ax-page .alert,
body#accountpasswordBody .ax-page .alert,
body#addressbookprocessBody .ax-page .alert {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
}

body#addressbookBody .ax-page .HeadingTitleGrey,
body#accounteditBody .ax-page .HeadingTitleGrey,
body#accountpasswordBody .ax-page .HeadingTitleGrey,
body#addressbookprocessBody .ax-page .HeadingTitleGrey {
  display: none !important;
}

/* Kill legacy red/banded backgrounds on inherited heading IDs that
   we now repurpose as <span>s inside .ax-card__head */
.ax-page #addressBookDefaultPrimary,
.ax-page #SavedAddressHeading,
.ax-page #NewAddressHeading,
.ax-page #titleHeading {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  font: inherit !important;
  text-align: left !important;
  border-radius: 0 !important;
  letter-spacing: inherit !important;
  display: inline !important;
}

/* Page h1 — block flex, even though legacy CSS targets these IDs */
.ax-page h1#addressBookDefaultHeading,
.ax-page h1#addressBookProcessDefaultHeading,
.ax-page h1#accountEditHeading,
.ax-page h1#accountPasswordHeading {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font: 700 26px/1.2 var(--font-display) !important;
  color: var(--ink) !important;
  background: transparent !important;
  margin: 0 0 10px !important;
  padding: 0 0 12px !important;
  letter-spacing: -.01em !important;
  text-align: left !important;
  border-radius: 0 !important;
  position: relative;
}

/* Restore the brand bar under the title for these specific IDs */
.ax-page h1#addressBookDefaultHeading::after,
.ax-page h1#addressBookProcessDefaultHeading::after,
.ax-page h1#accountEditHeading::after,
.ax-page h1#accountPasswordHeading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  background: var(--brand);
  border-radius: 3px;
}

/* HEAD (page heading + back chip) ------------------------------------ */
.ax-head {
  margin: 0 0 16px;
}

.ax-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 600 11.5px/1 var(--font-body);
  letter-spacing: .04em;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 12px;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.ax-back i {
  font-size: 10px;
}

.ax-back:hover {
  background: var(--bg);
  border-color: var(--ink);
  color: var(--ink);
  transform: translateX(-2px);
}

.ax-head__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 26px/1.2 var(--font-display);
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 10px;
  padding-bottom: 12px;
  position: relative;
}

.ax-head__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  background: var(--brand);
  border-radius: 3px;
}

.ax-head__title i {
  color: var(--brand-deep);
  font-size: 22px;
}

.ax-head__sub {
  margin: 6px 0 0;
  font: 500 13px/1.4 var(--font-body);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.ax-req {
  display: inline-block;
  color: var(--brand);
  font-weight: 700;
  margin: 0 2px;
}

/* CARD shell --------------------------------------------------------- */
.ax-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin: 0 0 14px;
}

.ax-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: #FFE1C4;
  border-bottom: 1px solid rgba(214, 62, 34, .16);
  font: 700 13.5px/1 var(--font-display);
  color: var(--ink);
  letter-spacing: .02em;
}

.ax-card__head i {
  color: var(--brand-deep);
  font-size: 14px;
}

.ax-card__head>span:first-of-type {
  flex: 1;
  min-width: 0;
}

.ax-card__count,
.ax-card__lock {
  margin-left: auto;
  padding: 4px 10px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(214, 62, 34, .18);
  border-radius: 999px;
  font: 600 11px/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-deep);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ax-card__lock {
  background: rgba(255, 255, 255, .85);
}

.ax-card__lock i {
  font-size: 10px;
}

.ax-card__body {
  padding: 18px 20px;
}

/* FORM grid ---------------------------------------------------------- */
.ax-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.ax-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ax-field--full {
  grid-column: 1 / -1;
}

.ax-page .ax-field label,
.ax-page .ax-field>label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 12.5px/1.3 var(--font-body) !important;
  color: var(--ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Inputs ------------------------------------------------------------- */
.ax-page input[type="text"],
.ax-page input[type="email"],
.ax-page input[type="tel"],
.ax-page input[type="password"],
.ax-page input[type="number"],
.ax-page input[type="date"],
.ax-page select,
.ax-page textarea {
  display: block;
  width: 100%;
  height: 32px !important;
  padding: 0px 14px !important;
  margin: 0 !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  font: 500 14px/1.3 var(--font-body) !important;
  color: var(--ink) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.ax-page input::placeholder {
  color: var(--ink-mute);
  opacity: 1;
}

.ax-page input:hover,
.ax-page select:hover {
  border-color: #DFD9CB !important;
}

.ax-page input:focus,
.ax-page select:focus,
.ax-page textarea:focus {
  outline: 0 !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(255, 90, 60, .14) !important;
  background: var(--surface) !important;
}

.ax-page input:disabled,
.ax-page select:disabled {
  background: var(--bg) !important;
  color: var(--ink-mute) !important;
  cursor: not-allowed;
  border-style: dashed !important;
}

.ax-page select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5B5B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
  padding-right: 38px !important;
}

.ax-page .ax-field--password {
  position: relative;
}

/* Radio + Check ------------------------------------------------------ */
.ax-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ax-page label.ax-radio,
.ax-page label.ax-check,
.ax-radio,
.ax-check {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  padding: 10px 16px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  font: 600 13px/1 var(--font-body) !important;
  color: var(--ink-soft) !important;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.ax-radio>span,
.ax-check>span,
.ax-check__text {
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
  font: inherit !important;
  color: inherit !important;
  background: transparent !important;
  padding: 0 !important;
}

.ax-page .ax-radio input[type="radio"],
.ax-page .ax-check input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid var(--line) !important;
  background: var(--surface) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
  flex-shrink: 0;
  box-shadow: none !important;
  vertical-align: middle;
}

.ax-page .ax-radio input[type="radio"] {
  border-radius: 50% !important;
}

.ax-page .ax-check input[type="checkbox"] {
  border-radius: 5px !important;
}

.ax-page .ax-radio input[type="radio"]:checked,
.ax-page .ax-check input[type="checkbox"]:checked {
  border-color: var(--brand) !important;
  background: var(--brand) !important;
}

.ax-page .ax-radio input[type="radio"]:checked::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

.ax-page .ax-check input[type="checkbox"]:checked::after {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 10px;
  color: #fff;
}

.ax-page .ax-radio input[type="radio"]:focus,
.ax-page .ax-check input[type="checkbox"]:focus {
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(255, 90, 60, .18) !important;
}

.ax-radio:has(input:checked),
.ax-check:has(input:checked) {
  color: var(--brand-deep) !important;
  border-color: var(--brand) !important;
  background: #FFF6F1 !important;
}

.ax-check__text i {
  color: var(--brand);
  margin-right: 4px;
}

/* Tip block ---------------------------------------------------------- */
.ax-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 0 0;
  padding: 14px 16px;
  background: #FFFCF1;
  border: 1px solid #F5E2B0;
  border-left: 3px solid #F5C04A;
  border-radius: 12px;
  font: 500 13px/1.5 var(--font-body);
  color: var(--ink-soft);
}

.ax-tip>i {
  font-size: 18px;
  color: #B8741E;
  margin-top: 2px;
  flex-shrink: 0;
}

.ax-tip>div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ax-tip strong {
  font: 700 13.5px/1.4 var(--font-body);
  color: var(--ink);
}

.ax-tip span {
  color: var(--ink-soft);
  font-size: 12.5px;
}

.ax-tip--warn {
  background: #FFEEDC;
  border-color: #F0BC79;
  border-left-color: #E5A33B;
}

.ax-tip--danger {
  background: #FFEBE5;
  border-color: rgba(214, 62, 34, .30);
  border-left-color: var(--brand-deep);
}

.ax-tip--danger>i {
  color: var(--brand-deep);
}

.ax-tip--danger strong {
  color: #8B2812;
}

/* Button row --------------------------------------------------------- */
.ax-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  flex-wrap: wrap;
}

.ax-actions--single {
  justify-content: flex-start;
}

.ax-btn,
.ax-page .ax-btn,
.ax-page button.ax-btn,
.ax-page input.ax-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px !important;
  min-width: auto !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 999px !important;
  font: 700 13px/1 var(--font-body) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ax-btn i {
  font-size: 12px;
}

.ax-btn--primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px -4px rgba(214, 62, 34, .45), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.ax-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -4px rgba(214, 62, 34, .55), inset 0 1px 0 rgba(255, 255, 255, .20) !important;
}

.ax-btn--ghost {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}

.ax-btn--ghost:hover {
  background: var(--bg) !important;
  border-color: var(--ink) !important;
}

.ax-btn--danger {
  background: #FFEBE5 !important;
  color: var(--brand-deep) !important;
  border: 1px solid rgba(214, 62, 34, .28) !important;
}

.ax-btn--danger:hover {
  background: var(--brand-deep) !important;
  color: #fff !important;
  border-color: var(--brand-deep) !important;
}

.ax-btn--sm {
  padding: 8px 14px !important;
  font-size: 11.5px !important;
}

.ax-btn--sm i {
  font-size: 10px;
}

/* Address book ------------------------------------------------------- */
.ax-page .ax-addr__lines {
  font: 500 14px/1.6 var(--font-body) !important;
  font-style: normal;
  color: var(--ink) !important;
  margin: 0;
  padding: 0 !important;
  background: transparent !important;
}

.ax-addr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ax-addr {
  position: relative;
  padding: 16px 18px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.ax-addr:hover {
  box-shadow: var(--shadow-md);
  border-color: #DFD9CB;
  transform: translateY(-1px);
}

.ax-addr--primary {
  border-color: var(--brand);
  box-shadow: 0 4px 16px -4px rgba(255, 90, 60, .25);
  background: linear-gradient(180deg, #FFF6F1 0%, var(--surface) 60%);
}

.ax-addr--review {
  background: var(--bg);
  border-style: dashed;
}

.ax-addr__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--brand);
  color: #fff !important;
  border-radius: 999px;
  font: 700 10.5px/1 var(--font-body) !important;
  letter-spacing: .10em;
  text-transform: uppercase;
  margin: 0 0 10px !important;
  position: static !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.ax-addr__pill i {
  font-size: 9px;
}

.ax-addr__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.ax-addr--primary .ax-addr__actions {
  border-top-color: rgba(255, 90, 60, .20);
}

.ax-addr-add {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 14px 18px;
  background: var(--bg);
  border: 1.5px dashed #D8CDB4;
  border-radius: 14px;
  font: 600 13.5px/1 var(--font-body);
  color: var(--ink-soft);
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.ax-addr-add>i:first-child {
  font-size: 18px;
  color: var(--brand-deep);
}

.ax-addr-add span {
  flex: 1;
}

.ax-addr-add__chev {
  font-size: 11px;
  color: var(--ink-mute);
  transition: transform .18s ease, color .18s ease;
}

.ax-addr-add:hover {
  background: #FFF6F1;
  border-color: var(--brand);
  color: var(--ink);
}

.ax-addr-add:hover .ax-addr-add__chev {
  transform: translateX(3px);
  color: var(--brand);
}

/* Mobile ------------------------------------------------------------- */
@media (max-width: 720px) {
  .ax-page {
    padding: 8px 2px 60px;
  }

  .ax-page h1#addressBookDefaultHeading,
  .ax-page h1#addressBookProcessDefaultHeading,
  .ax-page h1#accountEditHeading,
  .ax-page h1#accountPasswordHeading,
  .ax-head__title {
    font-size: 21px !important;
    padding-bottom: 10px !important;
  }

  .ax-head__title i {
    font-size: 18px;
  }

  .ax-head__sub {
    font-size: 12px;
    line-height: 1.45;
  }

  .ax-card {
    border-radius: 14px;
    margin-bottom: 12px;
  }

  .ax-card__head {
    padding: 12px 14px;
    font-size: 12.5px;
    gap: 8px;
  }

  .ax-card__head>span:first-of-type {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ax-card__count,
  .ax-card__lock {
    font-size: 10px;
    padding: 3px 8px;
    letter-spacing: .04em;
  }

  .ax-card__body {
    padding: 14px 14px;
  }

  .ax-form {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ax-page input[type="text"],
  .ax-page input[type="email"],
  .ax-page input[type="tel"],
  .ax-page input[type="password"],
  .ax-page input[type="number"],
  .ax-page input[type="date"],
  .ax-page select,
  .ax-page textarea {
    padding: 0px 12px !important;
    font-size: 14px !important;
  }

  /* Radio pills wrap and grow */
  .ax-radio-group {
    gap: 6px;
  }

  .ax-page label.ax-radio,
  .ax-page label.ax-check {
    padding: 9px 14px !important;
    font-size: 12.5px !important;
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Bottom action row */
  .ax-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    margin: 16px 0 0;
    padding-top: 16px;
  }

  .ax-actions--single {
    flex-direction: row;
  }

  .ax-actions .ax-btn:not(.ax-btn--sm) {
    width: 100% !important;
    padding: 13px 18px !important;
    font-size: 12.5px !important;
  }

  .ax-actions--single .ax-btn {
    width: auto !important;
  }

  /* Address book grid → single column. Edit/Delete buttons stay inline. */
  .ax-addr-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ax-addr {
    padding: 14px 14px 12px;
    border-radius: 12px;
  }

  .ax-addr__lines {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .ax-addr__pill {
    font-size: 10px !important;
    padding: 4px 9px !important;
  }

  .ax-addr__actions {
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
  }

  .ax-addr__actions .ax-btn--sm {
    flex: 1;
    padding: 8px 10px !important;
    font-size: 11px !important;
    width: auto !important;
  }

  .ax-addr-add {
    padding: 12px 14px;
    font-size: 12.5px;
  }

  .ax-addr-add>i:first-child {
    font-size: 16px;
  }

  /* Tip + delete-confirm card */
  .ax-tip {
    padding: 12px 14px;
    gap: 10px;
  }

  .ax-tip strong {
    font-size: 13px;
  }

  .ax-tip span {
    font-size: 12px;
  }

  /* Back chip a touch smaller */
  .ax-back {
    font-size: 11px;
    padding: 5px 11px 5px 9px;
  }
}

@media (max-width: 380px) {

  .ax-page h1#addressBookDefaultHeading,
  .ax-page h1#addressBookProcessDefaultHeading,
  .ax-page h1#accountEditHeading,
  .ax-page h1#accountPasswordHeading,
  .ax-head__title {
    font-size: 19px !important;
  }

  .ax-addr__actions {
    flex-wrap: wrap;
  }

  .ax-addr__actions .ax-btn--sm {
    flex: 1 1 100%;
  }
}

/* =========================================================================
   ACCOUNT LANDING PAGE  (.ac-page #accountDefault)
   Hero greeting · quick actions · latest order
   ========================================================================= */
.ac-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 18px 80px;
  font-family: var(--font-body);
  color: var(--ink);
  box-sizing: border-box;
}

.ac-page * {
  box-sizing: border-box;
}

body#accountBody .ac-page hr,
body#accountBody #accountLinksWrapper {
  display: none !important;
}

body#accountBody .ac-page label {
  background: transparent !important;
}

/* HERO — clean light card ------------------------------------------- */
.ac-hero {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  margin: 0 0 16px;
  box-shadow: var(--shadow-sm);
}

.ac-hero__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 22px/1 var(--font-display);
  letter-spacing: .02em;
  box-shadow: 0 6px 16px -6px rgba(214, 62, 34, .45);
}

.ac-hero__avatar i {
  font-size: 20px;
}

.ac-hero__intro {
  min-width: 0;
}

.ac-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 10.5px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}

.ac-hero__eyebrow i {
  color: var(--brand);
  font-size: 11px;
}

#accountDefault #accountDefaultHeading {
  font: 700 22px/1.2 var(--font-display) !important;
  color: var(--ink) !important;
  margin: 0 0 2px !important;
  letter-spacing: -.01em;
}

.ac-hero__sub {
  margin: 0;
  font: 500 12.5px/1.4 var(--font-body);
  color: var(--ink-mute);
}

.ac-hero__stats {
  display: flex;
  gap: 8px;
}

.ac-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 14px;
  min-width: 70px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.ac-stat:hover {
  background: #FFF1E8;
  border-color: rgba(214, 62, 34, .20);
  transform: translateY(-1px);
  color: var(--ink);
}

.ac-stat__num {
  font: 800 17px/1 var(--font-display);
  letter-spacing: -.01em;
  color: var(--brand-deep);
}

.ac-stat__num i {
  font-size: 16px;
}

.ac-stat__lbl {
  font: 600 9.5px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Optional flash message host */
.ac-msg-host {
  margin: 0 0 14px;
}

/* QUICK ACTIONS ------------------------------------------------------ */
.ac-quick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.ac-quick__card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-decoration: none !important;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.ac-quick__card,
.ac-quick__card *,
.ac-quick__card *:hover {
  text-decoration: none !important;
}

.ac-quick__card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: #DFD9CB;
  color: var(--ink);
}

.ac-quick__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
}

.ac-quick__icon--info {
  background: linear-gradient(135deg, #4A6FE1 0%, #2D4FB8 100%);
  box-shadow: 0 4px 12px rgba(74, 111, 225, .30);
}

.ac-quick__icon--addr {
  background: linear-gradient(135deg, #1FB57A 0%, #0B8B5B 100%);
  box-shadow: 0 4px 12px rgba(15, 157, 122, .30);
}

.ac-quick__icon--pwd {
  background: linear-gradient(135deg, #6E5CE3 0%, #4A38B8 100%);
  box-shadow: 0 4px 12px rgba(110, 92, 227, .30);
}

.ac-quick__icon--ref {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  box-shadow: 0 4px 12px rgba(214, 62, 34, .30);
}

.ac-quick__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ac-quick__body strong {
  font: 700 14px/1.3 var(--font-body);
  color: var(--ink);
}

.ac-quick__body span {
  font: 500 12px/1.3 var(--font-body);
  color: var(--ink-mute);
}

.ac-quick__chev {
  font-size: 12px;
  color: var(--ink-mute);
  transition: transform .2s ease, color .2s ease;
}

.ac-quick__card:hover .ac-quick__chev {
  transform: translateX(3px);
  color: var(--brand);
}

/* SECTION (latest order, GV) ----------------------------------------- */
.ac-section {
  margin: 0 0 18px;
}

.ac-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 0 2px;
}

#accountDefault .ac-section__title {
  font: 700 17px/1.2 var(--font-display) !important;
  color: var(--ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent !important;
}

.ac-section__title i {
  color: var(--brand-deep);
  font-size: 15px;
}

.ac-section__more,
a.ac-section__more,
a.show-all-order.ac-section__more {
  display: inline-flex !important;
  width: auto !important;
  align-items: center;
  gap: 7px;
  padding: 0 0 2px !important;
  background: transparent !important;
  border: 0;
  border-bottom: 2px solid transparent;
  font: 700 12.5px/1 var(--font-body) !important;
  letter-spacing: .02em;
  color: var(--brand-deep) !important;
  text-decoration: none !important;
  text-align: left !important;
  flex: 0 0 auto;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}

.ac-section__more i {
  font-size: 11px;
  transition: transform .2s ease;
}

.ac-section__more:hover {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.ac-section__more:hover i {
  transform: translateX(4px);
}

/* Empty state for no orders */
.ac-empty {
  padding: 50px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ac-empty i {
  font-size: 36px;
  color: var(--ink-mute);
  opacity: .55;
  margin-bottom: 8px;
}

.ac-empty strong {
  font: 700 15px/1.3 var(--font-display);
  color: var(--ink);
}

.ac-empty span {
  font: 500 13px/1.5 var(--font-body);
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.ac-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  font: 600 12.5px/1 var(--font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 4px 10px rgba(255, 90, 60, .20);
}

.ac-empty__cta i {
  font-size: 11px;
  transition: transform .2s ease;
}

.ac-empty__cta:hover {
  background: var(--brand-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 90, 60, .32);
  color: #fff;
}

.ac-empty__cta:hover i {
  transform: translateX(3px);
}

/* GV card wrapper */
.ac-card--gv {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}

/* MOBILE ------------------------------------------------------------- */
@media (max-width: 720px) {
  .ac-page {
    padding: 8px 2px 60px;
  }

  .ac-hero {
    grid-template-columns: 48px 1fr;
    grid-template-areas:
      "av intro"
      "stats stats";
    padding: 16px 18px;
    gap: 12px;
  }

  .ac-hero__avatar {
    grid-area: av;
    width: 48px;
    height: 48px;
    font-size: 18px;
  }

  .ac-hero__intro {
    grid-area: intro;
  }

  .ac-hero__stats {
    grid-area: stats;
    margin-top: 4px;
  }

  #accountDefault #accountDefaultHeading {
    font-size: 18px !important;
  }

  .ac-hero__eyebrow {
    font-size: 10px;
    margin-bottom: 2px;
  }

  .ac-hero__sub {
    font-size: 12px;
  }

  .ac-stat {
    flex: 1;
    min-width: 0;
    padding: 9px 10px;
  }

  .ac-stat__num {
    font-size: 15px;
  }

  .ac-quick {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ac-quick__card {
    padding: 14px 14px;
    gap: 12px;
  }

  .ac-quick__icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .ac-quick__body strong {
    font-size: 13.5px;
  }

  .ac-quick__body span {
    font-size: 11.5px;
  }

  .ac-section__head {
    flex-wrap: wrap;
    gap: 8px;
  }

  #accountDefault .ac-section__title {
    font-size: 15px !important;
  }

  .ac-section__more {
    font-size: 12px;
  }

  .ac-empty {
    padding: 36px 18px;
  }
}

/* =========================================================================
   DISCOUNT WALLET PAGE  (.dw-page #discountWalletDefault)
   ========================================================================= */
.dw-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 18px 80px;
  font-family: var(--font-body);
  color: var(--ink);
  box-sizing: border-box;
}

.dw-page * {
  box-sizing: border-box;
}

/* Reset legacy backgrounds/borders that leak in for this page */
body#discountwalletBody #discountWalletDefault hr {
  display: none !important;
}

body#discountwalletBody #discountWalletDefault label,
body#discountwalletBody #discountWalletDefault h1,
body#discountwalletBody #discountWalletDefault h2 {
  background: transparent !important;
  padding: 0 !important;
}

body#discountwalletBody #discountWalletDefault .dWHTable {
  width: auto !important;
}

body#discountwalletBody #discountWalletDefault .dWHTable td {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* HERO ---------------------------------------------------------------- */
/* GREEN THEME (light variant) — was warm-orange + dark-ink, briefly
   tried deep-forest, now a soft cream-mint surface. The mint balance
   card (below) pops against this lighter ground. All text reverts to
   ink-black so it's readable on the pale background. */
.dw-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 360px);
  gap: 22px;
  align-items: center;
  padding: 26px 28px;
  background: linear-gradient(135deg, #F2FBF7 0%, #E2F2EA 100%);
  color: var(--ink, #161616);
  border-radius: 22px;
  margin: 0 0 18px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(15, 157, 122, .15);
}

.dw-hero::before {
  content: "";
  position: absolute;
  inset: -60% -20% auto auto;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(15, 157, 122, .18) 0%, transparent 60%);
  z-index: -1;
  pointer-events: none;
}

.dw-hero__intro {
  min-width: 0;
}

.dw-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11.5px/1 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(22, 22, 22, .55);
  margin-bottom: 12px;
}

.dw-hero__eyebrow i {
  color: var(--mint);
  font-size: 13px;
}

#discountWalletDefault #discountWalletHeading {
  font: 700 30px/1.15 var(--font-display) !important;
  color: var(--ink, #161616) !important;
  margin: 0 0 10px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
}

.dw-hero__sub {
  margin: 0;
  font: 500 14px/1.5 var(--font-body);
  color: rgba(22, 22, 22, .65);
  max-width: 460px;
}

/* Balance card -------------------------------------------------------- */
/* Mint → forest gradient (was brand-orange → brand-deep). Drop shadow
   also retinted to a mint-tinged green so the cast colour matches. */
#discountWalletDefault .dw-hero__balance {
  position: relative;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--mint) 0%, #0B7559 100%);
  border-radius: 18px;
  color: #fff !important;
  font-size: revert !important;
  font-weight: 400 !important;
  box-shadow: 0 12px 32px -8px rgba(15, 157, 122, .55), inset 0 1px 0 rgba(255, 255, 255, .20);
  overflow: hidden;
  isolation: isolate;
}

.dw-balance__glow {
  position: absolute;
  inset: auto -30% -50% auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%);
  pointer-events: none;
  z-index: -1;
}

.dw-balance__label {
  display: block;
  font: 600 11px/1 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  margin-bottom: 6px;
}

.dw-balance__value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-display);
}

.dw-balance__cur {
  font: 600 16px/1 var(--font-display);
  color: rgba(255, 255, 255, .85);
  margin-top: -4px;
}

.dw-balance__num {
  font: 800 38px/1 var(--font-display);
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

#discountWalletDefault .dw-hero__balance .discountWallet {
  position: absolute;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  margin: 0 !important;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  backdrop-filter: blur(6px);
}

#discountWalletDefault .dw-hero__balance .discountWallet i {
  font-size: 22px;
}

/* Banner image ------------------------------------------------------- */
.dw-page .dw-banner {
  margin: 0 0 18px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}

.dw-page .dw-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* Generic card ------------------------------------------------------- */
.dw-page .dw-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin: 0 0 16px;
}

.dw-page .dw-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: #FFE1C4;
  border-bottom: 1px solid rgba(214, 62, 34, .16);
  font: 700 13.5px/1 var(--font-display);
  color: var(--ink);
  letter-spacing: .02em;
}

.dw-page .dw-card__head i {
  color: var(--brand-deep);
  font-size: 14px;
}

.dw-page .dw-card__head .tHHeading {
  font: inherit;
  color: inherit;
  padding: 0 !important;
  margin: 0;
}

.dw-page .dw-card__count {
  margin-left: auto;
  padding: 4px 10px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(214, 62, 34, .18);
  border-radius: 999px;
  font: 600 11px/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-deep);
}

.dw-page .dw-card__body {
  padding: 18px 20px;
}

#discountWalletDefault .discountWalletParagraph {
  font: 500 14.5px/1.7 var(--font-body) !important;
  color: var(--ink-soft);
  margin: 0 !important;
}

#discountWalletDefault .discountWalletParagraph p:first-child {
  margin-top: 0;
}

#discountWalletDefault .discountWalletParagraph p:last-child {
  margin-bottom: 0;
}

#discountWalletDefault .discountWalletParagraph strong {
  color: var(--ink);
}

/* Transaction list --------------------------------------------------- */
.dw-history {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 480px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.dw-history::-webkit-scrollbar {
  width: 8px;
}

.dw-history::-webkit-scrollbar-track {
  background: transparent;
}

.dw-history::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
  border: 2px solid var(--surface);
}

.dw-history::-webkit-scrollbar-thumb:hover {
  background: var(--ink-mute);
}

.dWHistory.dw-card {
  position: relative;
}

/* Fade the bottom edge so cut-off rows hint at "more below" */
.dWHistory.dw-card::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 9px;
  bottom: 1px;
  height: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--surface) 90%);
  pointer-events: none;
  border-bottom-left-radius: 17px;
  border-bottom-right-radius: 17px;
}

.dw-history__item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}

.dw-history__item:first-child {
  border-top: 0;
}

.dw-history__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}

.dw-history__item--credit .dw-history__icon {
  background: linear-gradient(135deg, #1FB57A 0%, var(--mint) 100%);
  box-shadow: 0 4px 10px rgba(15, 157, 122, .30);
}

.dw-history__item--debit .dw-history__icon {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  box-shadow: 0 4px 10px rgba(214, 62, 34, .30);
}

.dw-history__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#discountWalletDefault .dw-history__desc {
  font: 600 14px/1.4 var(--font-body) !important;
  color: var(--ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

#discountWalletDefault .dw-history__date {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 var(--font-body) !important;
  color: var(--ink-mute) !important;
  margin: 0 !important;
  padding: 0 !important;
}

#discountWalletDefault .dw-history__date i {
  font-size: 11px;
  opacity: .8;
}

#discountWalletDefault .dw-history__amount {
  font: 700 16px/1 var(--font-display) !important;
  white-space: nowrap;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.dw-history__item--credit .dw-history__amount {
  color: var(--mint) !important;
}

.dw-history__item--debit .dw-history__amount {
  color: var(--brand-deep) !important;
}

/* Empty state -------------------------------------------------------- */
.dw-empty {
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  background: var(--surface);
}

.dw-empty i {
  font-size: 32px;
  color: var(--ink-mute);
  opacity: .55;
  margin-bottom: 8px;
}

.dw-empty strong {
  font: 700 15px/1.3 var(--font-display);
  color: var(--ink);
}

.dw-empty span {
  font: 500 13px/1.4 var(--font-body);
  color: var(--ink-soft);
}

/* Mobile ------------------------------------------------------------- */
@media (max-width: 720px) {
  .dw-page {
    padding: 8px 2px 60px;
  }

  .dw-hero {
    grid-template-columns: 1fr;
    padding: 22px 20px;
    gap: 18px;
  }

  #discountWalletDefault #discountWalletHeading {
    font-size: 24px !important;
  }

  #discountWalletDefault .dw-hero__balance {
    padding: 18px 22px;
  }

  #discountWalletDefault .dw-hero__balance .discountWallet {
    width: 46px;
    height: 46px;
    right: 16px;
  }

  .dw-balance__num {
    font-size: 30px;
  }

  .dw-page .dw-card__head {
    padding: 12px 14px;
    font-size: 12.5px;
  }

  .dw-history__item {
    padding: 12px 14px;
    grid-template-columns: 38px 1fr auto;
    gap: 10px;
  }

  .dw-history__icon {
    width: 36px;
    height: 36px;
  }

  #discountWalletDefault .dw-history__amount {
    font-size: 14.5px !important;
  }

  .dw-history {
    max-height: 60vh;
  }
}

/* =========================================================================
   MESSAGE STACK  (.messageStack and variants)
   Matches the theme's existing .co-note pattern — flat tinted box, 1px
   hairline border, small inline icon, no left bar, no shadow. Sits cleanly
   inside any container without looking like a nested card.
   Markup: <table class="messageStack messageStackCaution">
             <tr><td class="messageStackImg"><img></td>
                 <td>… message …</td></tr>
           </table>
   ========================================================================= */
.messageStack,
.messageStackError,
.messageStackWarning,
.messageStackCaution,
.messageStackSuccess {
  display: table !important;
  width: 100%;
  margin: 0 0 12px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 1px solid var(--line);
  background-color: var(--surface-warm) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  font: 500 13.5px/1.5 var(--font-body) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.messageStack tr,
.messageStack tbody,
.messageStack td {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

.messageStack td.messageStackImg {
  padding-right: 10px !important;
  width: 1px;
  white-space: nowrap;
}

.messageStack td.messageStackImg img {
  display: none !important;
}

.messageStack td.messageStackImg::before {
  content: "";
  display: inline-block;
  font: 900 14px/1 "Font Awesome 5 Free";
}

/* Caution / Warning — warm amber */
.messageStackCaution,
.messageStackWarning {
  background-color: rgba(229, 163, 59, .08) !important;
  border-color: rgba(229, 163, 59, .25) !important;
  color: #6E4A0B !important;
}

.messageStackCaution td.messageStackImg::before,
.messageStackWarning td.messageStackImg::before {
  content: "\f071";
  color: #B47A1F;
}

/* Error — coral */
.messageStackError {
  background-color: rgba(214, 62, 34, .08) !important;
  border-color: rgba(214, 62, 34, .20) !important;
  color: var(--brand-deep) !important;
}

.messageStackError td.messageStackImg::before {
  content: "\f06a";
  color: var(--brand-deep);
}

/* Success — mint */
.messageStackSuccess {
  background-color: rgba(15, 157, 122, .08) !important;
  border-color: rgba(15, 157, 122, .22) !important;
  color: #0B5A45 !important;
}

.messageStackSuccess td.messageStackImg::before {
  content: "\f00c";
  color: var(--mint);
}

/* Inline links inside message stacks */
.messageStack a {
  color: inherit !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.messageStack a:hover {
  text-decoration-thickness: 2px;
}

@media (max-width: 720px) {
  .messageStack,
  .messageStackError,
  .messageStackWarning,
  .messageStackCaution,
  .messageStackSuccess {
    padding: 9px 12px !important;
    font-size: 13px !important;
  }

  .messageStack td.messageStackImg {
    padding-right: 8px !important;
  }

  .messageStack td.messageStackImg::before {
    font-size: 13px;
  }
}


/* =========================================================================
   PAGINATION — modern pill-style numbers, prev/next chevrons.
   Targets the legacy <nav class="pagination"><ul class="pagination">…</ul>
   structure used on product-listing pages.
   ========================================================================= */

.prod-list-wrap {
  margin: 18px 0 8px;
}

nav.pagination,
ul.pagination {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

nav.pagination ul.pagination {
  margin: 0 !important;
  padding: 0 !important;
}

ul.pagination li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex;
}

ul.pagination li a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  background: var(--surface-warm) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  color: var(--ink) !important;
  font: 600 13px/1 var(--font-body) !important;
  letter-spacing: .01em;
  text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

ul.pagination li a:hover,
ul.pagination li a:focus {
  background: var(--brand-tint) !important;
  border-color: var(--brand) !important;
  color: var(--brand-deep) !important;
  transform: translateY(-1px);
}

/* Current page — solid coral pill */
ul.pagination li.current,
ul.pagination li.current.active,
ul.pagination li.current a,
ul.pagination li.current.active a {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  cursor: default;
  pointer-events: none;
  box-shadow: 0 4px 12px -6px rgba(255, 90, 60, .55);
  border-radius: var(--r-pill) !important;
}

ul.pagination li.current a:hover {
  transform: none;
}

/* Prev / Next chevron buttons — solid coral, slightly darker on hover */
ul.pagination li.pagination-prev a,
ul.pagination li.pagination-next a {
  width: 36px;
  min-width: 36px;
  padding: 0;
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}

ul.pagination li.pagination-prev a:hover,
ul.pagination li.pagination-next a:hover {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

ul.pagination li.pagination-prev a i,
ul.pagination li.pagination-next a i {
  font-size: 11px;
}

/* Disabled prev/next (Zen Cart adds .disabled when at first/last page) */
ul.pagination li.disabled a,
ul.pagination li.pagination-prev.disabled a,
ul.pagination li.pagination-next.disabled a {
  background: var(--surface-warm) !important;
  border-color: var(--line) !important;
  color: var(--ink-mute) !important;
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

ul.pagination li.disabled a:hover {
  transform: none;
}

/* Ellipsis (…) when many pages */
ul.pagination li.disabled span,
ul.pagination li.ellipsis,
ul.pagination li.ellipsis a {
  background: transparent !important;
  border: 0 !important;
  color: var(--ink-mute) !important;
  pointer-events: none;
}

/* Sub-results count text alongside pagination */
.navSplitPagesResult,
#productsListingTopNumber,
#productsListingBottomNumber {
  font: 500 12.5px/1.4 var(--font-body) !important;
  color: var(--ink-mute) !important;
  text-align: center;
  margin: 0 0 8px;
}

/* Wrapper alignment */
.prod-list-wrap.group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.navSplitPagesLinks {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Mobile — slightly tighter */
@media (max-width: 720px) {
  ul.pagination li a {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    font-size: 12.5px !important;
  }

  ul.pagination li.pagination-prev a,
  ul.pagination li.pagination-next a {
    width: 32px;
    min-width: 32px;
  }
}


/* =========================================================================
   CATEGORY-OF-CATEGORIES PAGE — #indexCategories (e.g. cPath=190)
   Pages where the category itself contains other categories (each rendered
   as a section with its own product carousel).
   ========================================================================= */

#indexCategories {
  max-width: 1280px;
  margin: 0;
  padding: 16px 18px;
}

#indexCategories .cBreadCrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font: 500 12.5px/1 var(--font-body);
  color: var(--ink-mute);
  margin: 0 0 16px;
  padding: 8px 14px;
  background: var(--surface-warm);
  border-radius: var(--r-pill);
  width: fit-content;
  max-width: 100%;
}

#indexCategories .cBreadCrumb a.breadCrumbText,
#indexCategories .cBreadCrumb label.breadCrumbText {
  color: var(--ink-soft) !important;
  text-decoration: none !important;
  font: 500 12.5px/1 var(--font-body) !important;
  letter-spacing: .01em;
}

#indexCategories .cBreadCrumb a.breadCrumbText:hover {
  color: var(--brand) !important;
}

#indexCategories .cBreadCrumb label.breadCrumbText {
  color: var(--ink) !important;
  font-weight: 700 !important;
}

#indexCategories .cBreadCrumb .breadcrumbRight {
  color: var(--ink-mute);
  font-size: 11px;
  opacity: .55;
}

#indexCategories .cBreadCrumb a.breadCrumbText i.fa-home {
  color: var(--ink) !important;
  font-size: 12px;
}

#indexCategoriesHeading {
  font: 700 clamp(28px, 3vw, 38px)/1.1 var(--font-display) !important;
  color: var(--ink) !important;
  margin: 0 0 22px !important;
  letter-spacing: -.02em !important;
  position: relative;
  padding-bottom: 12px;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
}

#indexCategoriesHeading::after {
  content: "";
  position: absolute;
  left: 8px;
  bottom: 0;
  width: 44px;
  height: 4px;
  border-radius: 4px;
  background: var(--brand);
}

@media (max-width: 1024px) {
  #indexCategories {
    padding: 0 16px;
  }
}

@media (max-width: 720px) {
  #indexCategories {
    padding: 0 2px;
    margin: 0px auto 40px;
  }

  #indexCategoriesHeading {
    font-size: 24px !important;
    padding-left: 8px !important;
  }
}


/* =========================================================================
   FLUID CENTER COLUMN — category browsing pages (#indexBody)
   The legacy grid fixes the center at .col670{width:1000px} (responsive.css),
   so on wide screens the center is narrower than the available space between
   the two fixed 220px sidebars. Switch #contentMainWrapper to flex on desktop
   so the center fills the remaining width while the sidebars keep their size.
   Scoped to #indexBody so home / product / cart layouts are untouched.
   Desktop only — the <=1024px rules already stack/hide the sidebars.
   ========================================================================= */
@media (min-width: 1025px) {
  #indexBody #contentMainWrapper {
    display: flex !important;
    align-items: flex-start;
    gap: 16px;
  }

  #indexBody #contentMainWrapper > div[class*="col"] {
    float: none !important;
    margin-left: 0 !important;
  }

  /* sidebars keep their fixed width */
  #indexBody #contentMainWrapper > div[class*="col"]:first-child,
  #indexBody #contentMainWrapper > div[class*="col"]:last-child {
    flex: 0 0 auto;
  }

  /* center column fills the rest */
  #indexBody #contentMainWrapper > div[class*="col"]:nth-child(2) {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0;
  }

  #indexBody #indexCategories,
  #indexBody #indexProductList {
    max-width: none !important;
  }
}


/* =========================================================================
   DESKTOP TOP-BAR HAMBURGER — appears only at ≤1024px (when sidebars hide).
   Triggers the always-loaded mmenu nav.
   ========================================================================= */

.desktop-menu-bars {
  display: none;
  /* hidden at >1024px */
  width: 38px;
  height: 38px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--r-md);
  background: var(--surface-warm);
  border: 1px solid var(--line);
  flex: 0 0 38px;
  margin-right: 10px;
  text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease;
  cursor: pointer;
}

.desktop-menu-bars:hover {
  background: var(--brand-tint);
  border-color: var(--brand);
}

.desktop-menu-bars .bar {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: background .18s ease, width .25s cubic-bezier(.4, 0, .2, 1);
}

.desktop-menu-bars .bar1 {
  width: 16px;
}

.desktop-menu-bars .bar2 {
  width: 12px;
}

.desktop-menu-bars .bar3 {
  width: 16px;
}

.desktop-menu-bars:hover .bar {
  background: var(--brand-deep);
}

.desktop-menu-bars:hover .bar2 {
  width: 16px;
}

@media (max-width: 1024px) {
  .desktop-menu-bars {
    display: inline-flex !important;
  }

  /* Slim the desktop logo + spacing when the hamburger is alongside */
  #navMain>div:first-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
}


/* =========================================================================
   DESKTOP TOP BAR AT NARROW WIDTHS (<=720px) — desktop UA users on small
   viewports get a wrap-down search row under the icon row, plus tighter
   cart/profile icons so nothing feels oversized.
   ========================================================================= */

@media (max-width: 720px) {

  /* Allow the navMain row to wrap so the search drops to its own line */
  #navMainWrapper {
    padding: 8px 2px !important;
  }

  #navMain {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #navMain>div:first-child {
    flex: 1 1 auto;
    justify-content: flex-start;
  }

  #navMain>div:last-child {
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  /* Push search to its own full-width row below the icons */
  #navMainSearch {
    order: 99 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin: 4px 0 0 !important;
  }

  #navMainSearch form,
  #navMainSearch form[name="quick_find_header"] {
    height: 36px !important;
  }

  #navMainSearch .search-bar-input,
  #navMainSearch input[type="text"] {
    height: 34px !important;
    font-size: 13px !important;
    padding: 0 16px !important;
  }

  #navMainSearch .search-box-submit {
    width: 28px !important;
    height: 28px !important;
  }

  /* Slim every icon button in the top row to 34px so cart no longer looks oversized */
  .desktop-menu-bars,
  .profileBtn,
  .topBarNav .profileBtn,
  .profileDropDown .profileBtn,
  .shoppingCartDropDownBtn {
    width: 34px !important;
    height: 34px !important;
  }

  .shopping-cart-badge.badge {
    min-width: 16px !important;
    height: 16px !important;
    font-size: 9px !important;
    border-width: 1.5px !important;
    top: -3px !important;
    right: -3px !important;
  }

  .dm-logo img {
    height: 32px !important;
  }

  /* Slightly larger body padding to clear the now-two-row top bar */
  body {
    /* padding-top: calc(var(--header-h, 60px) + 12px + 38px) !important; */
    margin-top: 0px;
  }

}

@media (min-width: 481px) and (max-width: 767px) {
  #navMain i {
    font-size: 80%;
    padding: 0px;
  }

  #navMainSearch {
    display: inline-block;
    visibility: visible;
    order: unset !important;
  }
}


/* =========================================================================
   Breadcrumb back-button icon (fa-reply replaces the legacy fa-home).
   Sized larger than the surrounding crumb text — only the icon grows, the
   crumb labels stay at their inherited size. Colour-controllable via CSS
   since it's a font glyph: inherits ink (near-black) by default and
   switches to brand orange on hover of the anchor.
   ========================================================================= */
.cBreadCrumb .breadCrumbText i.fa-reply,
a.breadCrumbText i.fa-reply,
label.breadCrumbText i.fa-reply {
  font-size: 1.6em;
  vertical-align: -2px;
  margin-right: 4px;
  color: var(--ink, #161616);
  transition: color .12s ease;
}
a.breadCrumbText:hover i.fa-reply {
  color: var(--brand, #FF5A3C);
}