@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.2fr 1fr;
  gap: 40px;
  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: 28px;
}

.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 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-hero__pills li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font: 500 12.5px/1 var(--font-body);
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}

.home-hero__pills i {
  color: var(--brand);
  font-size: 13px;
}

.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: block;
  line-height: 0;
  /* removes the inline-image baseline gap */
  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: 100% !important;
  height: auto !important;
  /* let the image set its own height */
  max-height: 420px;
  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;
  flex-direction: column;
  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;
}

/* =========================================================================
   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 img {
  width: 28px;
}

.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: 96px;
    height: 96px;
    font-size: 26px;
    padding: 10px;
    left: -8px;
    bottom: -8px;
  }

  .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;
}

/* 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 img {
    max-height: 280px;
  }

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

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

  .home-hero__pills {
    justify-content: flex-start;
  }

  .home-hero__pills li {
    flex: 0 1 auto;
    font-size: 12px !important;
    padding: 7px 12px !important;
  }

  /* 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: 86px !important;
    height: 86px !important;
    font-size: 22px !important;
    padding: 8px !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);
}

/* Indicate the card itself is sold out — gently desaturate the image */
#advSearchResultsDefault .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent:has(.button_sold_out_sm)>a:first-of-type img,
#indexProductList .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent:has(.button_sold_out_sm)>a:first-of-type img,
#indexCategories .flexATTRibute.centerBoxContentsProductCategoriesView.centeredContent:has(.button_sold_out_sm)>a:first-of-type img {
  filter: grayscale(.5) opacity(.9);
}

/* 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);
  /* always 4 per row */
  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 var(--line) !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: 600 13px/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;
}

#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;
  }

  /* 2-up at mobile widths */
  #indexProductList .sub-categories-content,
  #indexCategories .sub-categories-content {
    grid-template-columns: repeat(2, 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);
}

#productListing .centerBoxContentsProducts:has(.button_sold_out_sm) .list-image img {
  filter: grayscale(.5) opacity(.9);
}

/* 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. */
#productMainImage>.prod-tag--sale-pi {
  left: auto;
  right: 14px;
  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 */
}

@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 {
  max-width: 1180px;
  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 {
  position: sticky;
  top: calc(var(--header-h, 64px) + 16px);
  align-self: start;
  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;
  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;
}

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

.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 */
.pi-page #cartAdd,
.pi-page .pi-cta {
  display: block;
  margin: 4px 0 0;
  padding: 18px 0 0;
  border-top: 1px dashed var(--line);
}

.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 {
    top: 8px;
    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;
  }
}


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