/**
 * Italivo Professional Mobile Navigation & Theme
 */

/* 0. STRICT DESKTOP RULE: Mobile bottom nav & drawer MUST NEVER SHOW ON DESKTOP */
@media screen and (min-width: 769px) {
  #italivo-bottom-nav,
  .italivo-bottom-nav,
  #italivo-drawer,
  .italivo-drawer-overlay,
  .italivo-drawer-panel,
  .italivo-drawer-header,
  .italivo-drawer-body {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
  }
}

#italivo-bottom-nav,
.italivo-bottom-nav,
#italivo-drawer,
.italivo-drawer-overlay {
  display: none;
}

/* 1. HIDE DESKTOP HEADER NAV ON MOBILE & PREVENT OVERLAPPING */
@media only screen and (max-width: 768px) {
  #italivo-bottom-nav,
  .italivo-bottom-nav {
    display: flex !important;
  }
  #italivo-drawer,
  .italivo-drawer-overlay {
    display: block !important;
  }

  header .bottom-area,
  header .bottom-area.text-nowrap {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Modern footer responsive styling is unified at the bottom of stylesheet */

  /* HIDE UNWANTED / DUPLICATE NATIVE WHATSAPP BUTTON (Circled in yellow) */
  .whatsapp-btn-wrap,
  .whatsapp-btn-wrap *,
  a.whatsapp-btn-wrap {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
  }

  /* Professional top spacing on mobile: sits cleanly 6px-8px below search bar */
  main {
    padding-top: 156px !important;
  }

  .no-banner ~ main,
  header.no-banner ~ main {
    padding-top: 124px !important;
  }

  /* Remove any extra stacked top margins/paddings on home slider and first sections */
  main .main-slider,
  main .main-slider:first-child,
  main .home-section:first-child,
  .container-fluid > .home-section:first-child,
  .slider-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Cart page and inner pages have a neat 8px breathing space */
  .cart-wrapper,
  .cart-section {
    margin-top: 8px !important;
  }

  /* CART PAGE HEADER ALIGNMENT (Fixes "Shopping cart" colliding with "No item Selected / Select all items") */
  .checkout-detail .detail-left > .b-b.flex.sided,
  .detail-left > .b-b.flex.sided {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
  }

  .detail-left > .b-b.flex.sided > h5,
  .detail-left > .b-b.flex.sided > h5.bold {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 !important;
    width: 100% !important;
    line-height: 1.25 !important;
  }

  .detail-left > .b-b.flex.sided > p {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    font-size: 0.85rem !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    flex-wrap: nowrap !important;
  }

  .detail-left > .b-b.flex.sided > p .link {
    font-weight: 600 !important;
    color: #e51a24 !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    margin-left: auto !important;
    text-decoration: underline !important;
    cursor: pointer !important;
  }

  /* FLASH SALE & SECTION HEADERS (Fixes "Special Offers & Deals" colliding with countdown timer & "Show all") */
  .flash-slider .title,
  .home-section .title,
  .flash-slider .flex.sided.title,
  .home-section > .flex.sided.title {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding-bottom: 12px !important;
  }

  .flash-slider .title > .flex.gap-10,
  .home-section .title > .flex.gap-10 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    max-width: calc(100% - 80px) !important;
  }

  .flash-slider .title > .flex.gap-10 > h4,
  .home-section .title > .flex.gap-10 > h4,
  .home-section .title h4 {
    margin: 0 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    line-height: 1.25 !important;
  }

  .flash-slider .title > .flex.gap-10 > h5,
  .home-section .title > .flex.gap-10 > h5,
  .flash-slider .title h5 {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #e51a24 !important;
    background: #fff1f2 !important;
    border: 1px solid #fecdd3 !important;
    border-radius: 6px !important;
    padding: 2px 7px !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0.5px !important;
  }

  .flash-slider .title > .link,
  .home-section .title > .link,
  .flash-slider .title .link,
  .home-section .title .link {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #e51a24 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    padding-top: 2px !important;
    margin-left: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .flash-slider .title > .link:after,
  .home-section .title > .link:after {
    content: " \203A" !important;
    font-size: 1.1rem !important;
    margin-left: 3px !important;
    line-height: 1 !important;
  }

  /* Space for bottom navigation bar so no content is covered */
  body {
    padding-bottom: 75px !important;
  }
}

/* 2. DRAGGABLE FLOATING WHATSAPP BUTTON */
.italivo-floating-whatsapp {
  position: fixed;
  bottom: 74px;
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.42), 0 2px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99998;
  text-decoration: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  animation: italivo-wa-pulse 2.8s infinite;
  -webkit-tap-highlight-color: transparent;
}

.italivo-floating-whatsapp:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.55);
}

.italivo-floating-whatsapp.is-dragging {
  cursor: grabbing !important;
  transform: scale(1.12) !important;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.65) !important;
  animation: none !important;
  transition: none !important;
}

.italivo-floating-whatsapp svg {
  width: 30px;
  height: 30px;
  fill: #ffffff;
  pointer-events: none;
}

@keyframes italivo-wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@media only screen and (min-width: 769px) {
  .italivo-floating-whatsapp {
    bottom: 24px;
    right: 24px;
  }
}

/* 3. PROFESSIONAL BOTTOM NAVIGATION BAR (Blue marked area) */
.italivo-bottom-navbar {
  display: none;
}

@media only screen and (max-width: 768px) {
  .italivo-bottom-navbar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #ffffff;
    border-top: 1px solid #eef2f6;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.05);
    z-index: 9999;
    align-items: center;
    justify-content: space-around;
    padding: 0 4px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
  }

  .italivo-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #64748b;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
    padding: 4px 0;
  }

  .italivo-bottom-nav-item:active {
    transform: scale(0.94);
  }

  .italivo-bottom-nav-item.active {
    color: #e51a24;
  }

  .italivo-nav-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
  }

  .italivo-bottom-nav-item svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.15s ease;
  }

  .italivo-bottom-nav-item.active svg {
    stroke: #e51a24;
  }

  .italivo-nav-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1px;
    line-height: 1.2;
    margin-top: 3px;
    color: inherit;
    font-family: inherit;
  }

  .italivo-bottom-nav-item.active .italivo-nav-label {
    font-weight: 600;
  }

  /* Cart Badge */
  .italivo-nav-cart-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    background: #e51a24;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 999px;
    padding: 0 4px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border: 1.5px solid #ffffff;
  }

  /* 4. PROFESSIONAL CATEGORY DRAWER (ACCORDION DROPDOWN - NO EMOJIS) */
  .italivo-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  .italivo-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  .italivo-drawer-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 84%;
    max-width: 330px;
    background: #ffffff;
    z-index: 10001;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
  }

  .italivo-drawer-overlay.active .italivo-drawer-panel {
    transform: translateX(0);
  }

  .italivo-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
  }

  .italivo-drawer-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
  }

  .italivo-drawer-close {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 22px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
  }

  .italivo-drawer-close:active {
    background: #fee2e2;
    color: #e51a24;
  }

  .italivo-drawer-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 20px 0;
  }

  /* Category Accordion Group */
  .italivo-drawer-cat-group {
    border-bottom: 1px solid #f1f5f9;
  }

  .italivo-drawer-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #ffffff;
    color: #1e293b;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .italivo-drawer-cat-header:active {
    background: #f8fafc;
  }

  .italivo-drawer-cat-name {
    font-family: inherit;
    letter-spacing: -0.15px;
  }

  .italivo-drawer-cat-arrow {
    width: 16px;
    height: 16px;
    stroke: #94a3b8;
    transition: transform 0.25s ease, stroke 0.25s ease;
    flex-shrink: 0;
  }

  /* Active / Expanded Category Header */
  .italivo-drawer-cat-group.active .italivo-drawer-cat-header {
    color: #0f172a;
    background: #fafafa;
  }

  .italivo-drawer-cat-group.active .italivo-drawer-cat-arrow {
    transform: rotate(180deg);
    stroke: #e51a24;
  }

  /* Subcategories Panel */
  .italivo-drawer-subcat-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
  }

  .italivo-drawer-cat-group.active .italivo-drawer-subcat-panel {
    max-height: 800px;
  }

  /* Indented subcategory list with vertical guideline matching Screenshot 2 */
  .italivo-drawer-subcat-list {
    margin: 4px 16px 12px 24px;
    padding: 4px 0 4px 14px;
    border-left: 2px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .italivo-drawer-subcat-link {
    display: block;
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 450;
    color: #475569;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.15s ease;
    line-height: 1.35;
    -webkit-tap-highlight-color: transparent;
  }

  .italivo-drawer-subcat-link:hover,
  .italivo-drawer-subcat-link:active {
    background: #f8fafc;
    color: #e51a24;
    font-weight: 600;
    padding-left: 15px;
  }

  .italivo-drawer-subcat-link.italivo-subcat-all {
    color: #e51a24;
    font-weight: 600;
    font-size: 13.5px;
    background: #fff5f5;
    margin-bottom: 2px;
  }

  .italivo-drawer-extra {
    margin-top: 14px;
    padding: 12px 16px 4px 16px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .italivo-drawer-extra-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s ease;
  }

  .italivo-drawer-extra-link:active {
    background: #f8fafc;
    color: #0f172a;
  }
}

/* 5. USER ADDRESS MODAL & POP-OVER FIXES */
.pop-over-content {
  max-height: 90vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.pop-over-content .input-wrap,
.pop-over-content input,
.pop-over-content select,
.pop-over-content textarea {
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
}

.pop-over-content .flex.gap-15,
.pop-over-content .flex.gap-10,
.pop-over-content .flex.sided,
.user-address .flex {
  flex-wrap: wrap !important;
}

.state-dd,
.pop-over-content .state-dd {
  min-width: 140px !important;
  white-space: nowrap !important;
}

.state-dd .button,
.pop-over-content .state-dd button {
  white-space: nowrap !important;
}

/* 6. KOKO PDP & CART SECTION ALIGNMENT */
.koko-pdp-section,
.detail-right .koko-pdp-section {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 14px 0 !important;
  padding: 12px 14px !important;
  background: #f8fafc !important;
  border: 1px dashed #c7d2fe !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  clear: both !important;
}

.koko-pdp-installment-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  font-size: 13.5px !important;
  color: #1e293b !important;
  font-weight: 500 !important;
}

.koko-pdp-amount {
  font-weight: 700 !important;
  color: #0f172a !important;
  font-size: 14px !important;
}

.koko-pdp-wa-connect {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 8px !important;
  font-size: 13px !important;
  color: #475569 !important;
}

.koko-pdp-wa-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #25D366 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(37, 211, 102, 0.28) !important;
}

.koko-pdp-shipping-note {
  margin-top: 6px !important;
  font-size: 11.5px !important;
  color: #64748b !important;
  text-align: center !important;
}

/* 7. PROFESSIONAL USER PROFILE MOBILE STYLING (Screenshot 3) */
@media only screen and (max-width: 768px) {
  .user-profile-wrapper,
  .user-account-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .user-profile-wrapper .card {
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #e2e8f0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    margin-bottom: 20px !important;
  }

  .user-profile-wrapper .card h5 {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    padding: 16px 18px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin: 0 !important;
    background: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .user-profile-wrapper .card h5 > span {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
  }

  /* Compact danger pill for Delete account */
  .user-profile-wrapper .card h5 .primary-btn,
  .user-profile-wrapper .card h5 button {
    width: auto !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 12px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #dc2626 !important;
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
  }

  .user-profile-wrapper .card > div.align-start,
  .user-profile-wrapper .card > div:last-child {
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .user-profile-wrapper .card > div.align-start > div:first-child {
    width: 100% !important;
  }

  /* Info tiles for Email and Logged In With */
  .user-profile-wrapper .card .input-wrap:not(.user-form .input-wrap) {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .user-profile-wrapper .card .input-wrap:not(.user-form .input-wrap) label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #64748b !important;
    margin: 0 !important;
  }

  .user-profile-wrapper .card .input-wrap:not(.user-form .input-wrap) span,
  .user-profile-wrapper .card .input-wrap:not(.user-form .input-wrap) p {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    word-break: break-all !important;
  }

  /* Form Title: Update Profile */
  .user-profile-wrapper .form-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 16px 0 12px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px dashed #e2e8f0 !important;
    display: block !important;
  }

  .user-profile-wrapper .user-form {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 100% !important;
  }

  .user-profile-wrapper .user-form .input-wrap {
    margin-bottom: 16px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .user-profile-wrapper .user-form .input-wrap label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 6px !important;
    display: block !important;
  }

  .user-profile-wrapper .user-form .icon-input {
    position: relative !important;
    width: 100% !important;
  }

  .user-profile-wrapper .user-form .icon-input input {
    width: 100% !important;
    height: 48px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding-left: 48px !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }

  .user-profile-wrapper .user-form .icon-input input:focus {
    border-color: #e51a24 !important;
    box-shadow: 0 0 0 3px rgba(229, 26, 36, 0.12) !important;
    outline: none !important;
  }

  .user-profile-wrapper .user-form .icon-input .icon {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
  }

  .user-profile-wrapper .user-form .flex.j-end {
    width: 100% !important;
    margin: 0 !important;
  }

  .user-profile-wrapper .user-form .primary-btn {
    width: 100% !important;
    height: 48px !important;
    border-radius: 10px !important;
    background: #e51a24 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(229, 26, 36, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    margin-top: 6px !important;
  }
}



/* ========================================================
   8. MODERN TIDY MOBILE USER PROFILE & ACCOUNT STYLING
   ======================================================== */
@media only screen and (max-width: 768px) {
  .order-wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 14px !important;
    padding: 0 !important;
  }

  /* Horizontal Pill Tab Navigation for Account Menu */
  .order-wrapper .left-sidebar {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 6px 4px 12px 4px !important;
    margin-bottom: 4px !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    -webkit-overflow-scrolling: touch !important;
    list-style: none !important;
  }

  .order-wrapper .left-sidebar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .order-wrapper .left-sidebar li {
    flex-shrink: 0 !important;
    display: inline-block !important;
    margin: 0 !important;
  }

  .order-wrapper .left-sidebar li a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 16px !important;
    border-radius: 9999px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: 1px solid #cbd5e1 !important;
    transition: all 0.2s ease !important;
  }

  .order-wrapper .left-sidebar li.active a,
  .order-wrapper .left-sidebar li a.router-link-active,
  .order-wrapper .left-sidebar li a.router-link-exact-active {
    background: #e51a24 !important;
    color: #ffffff !important;
    border-color: #e51a24 !important;
    box-shadow: 0 2px 8px rgba(229, 26, 36, 0.3) !important;
  }

  .order-wrapper .right-area {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Beautiful, Tidy Card Layout */
  .order-wrapper .card {
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    padding: 20px 16px !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
  }

  .order-wrapper .card h5 {
    font-size: 16.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .order-wrapper form {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .order-wrapper .input-wrap {
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    box-sizing: border-box !important;
  }

  .order-wrapper .input-wrap label,
  .order-wrapper .form-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 6px !important;
    display: block !important;
  }

  .order-wrapper .input-wrap input {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    background: #f8fafc !important;
    box-sizing: border-box !important;
  }

  /* Crisp clearance for input icons (Screenshot 1) */
  .icon-input {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
  }

  .icon-input > i.icon:first-child,
  .icon-input > .icon:not(.eye-icon):not(.eye-close-icon) {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    opacity: 0.65 !important;
    margin: 0 !important;
  }

  .order-wrapper .input-wrap .icon-input input,
  .user-profile-wrapper .input-wrap .icon-input input,
  .user-form .icon-input input,
  .icon-input input {
    padding-left: 48px !important; /* Fully clears left icon with neat margin */
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  .order-wrapper .input-wrap .icon-input.right-icon input,
  .user-profile-wrapper .input-wrap .icon-input.right-icon input,
  .user-form .icon-input.right-icon input,
  .icon-input.right-icon input {
    padding-left: 48px !important;
    padding-right: 48px !important; /* Fully clears right eye toggle icon */
  }

  .icon-input .eye-icon,
  .icon-input .eye-close-icon,
  .icon-input.right-icon i:last-child {
    position: absolute !important;
    right: 14px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
    cursor: pointer !important;
    opacity: 0.7 !important;
    margin: 0 !important;
  }

  .order-wrapper .input-wrap input:focus {
    border-color: #e51a24 !important;
    background: #ffffff !important;
    outline: none !important;
  }

  .order-wrapper .primary-btn {
    width: 100% !important;
    padding: 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    background: #e51a24 !important;
    color: #ffffff !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(229, 26, 36, 0.25) !important;
    margin-top: 8px !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* Compact & Modern "Add new address" button (Screenshot 2) */
  .order-wrapper .right-area > div > button.primary-btn.mb-15,
  .order-wrapper button.primary-btn.mb-15,
  .user-addresses button.primary-btn,
  .address-wrapper .primary-btn {
    width: auto !important;
    max-width: 280px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 10px 0 16px 0 !important;
    padding: 11px 26px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    background: #e51a24 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(229, 26, 36, 0.28) !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  }
}

/* =========================================================
   6. COOKIE BANNER MOBILE FIX (Screenshot 4)
   Position above bottom navbar & make "Got it" button easily clickable
   ========================================================= */
.cookie-banner {
  position: relative !important;
  z-index: 100001 !important;
}

@media only screen and (max-width: 768px) {
  .cookie-banner .pop-over-inner {
    position: fixed !important;
    bottom: 72px !important;
    left: 12px !important;
    right: 12px !important;
    max-width: calc(100% - 24px) !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.08) !important;
    z-index: 100001 !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .cookie-banner .pop-over-content {
    padding: 0 !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .cookie-banner .outline-btn,
  .cookie-banner button,
  .cookie-banner .primary-btn {
    background: #e51a24 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    min-height: 40px !important;
    padding: 8px 24px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 3px 8px rgba(229, 26, 36, 0.3) !important;
    width: auto !important;
    align-self: flex-end !important;
  }
}

/* =========================================================
   7. ADDRESS MODAL & SAVE BUTTON MOBILE FIX (Screenshot 2)
/* =========================================================
   7. ADDRESS MODAL & SAVE/CANCEL BUTTONS MOBILE FIX (Screenshot 3)
   Ensure modal scrolls smoothly and SAVE/CANCEL buttons are professional and clean
   ========================================================= */
/* Hide bottom navigation bar and WhatsApp button whenever ANY modal dialog is active */
body.no-scroll #italivo-bottom-nav,
body.no-scroll .italivo-bottom-navbar,
body.no-scroll #italivo-floating-wa,
body.no-scroll .italivo-floating-whatsapp,
body.italivo-modal-active #italivo-bottom-nav,
body.italivo-modal-active .italivo-bottom-navbar,
body.italivo-modal-active #italivo-floating-wa,
body.italivo-modal-active .italivo-floating-whatsapp,
body.has-active-dialog #italivo-bottom-nav,
body.has-active-dialog .italivo-bottom-navbar,
body.has-active-dialog #italivo-floating-wa,
body.has-active-dialog .italivo-floating-whatsapp,
body:has(.pop-over.has-layer) #italivo-bottom-nav,
body:has(.pop-over.has-layer) .italivo-bottom-navbar,
body:has(.pop-over.has-layer) #italivo-floating-wa,
body:has(.pop-over.has-layer) .italivo-floating-whatsapp,
body.no-scroll #italivo-floating-dark,
body.no-scroll .italivo-floating-darkmode,
body.italivo-modal-active #italivo-floating-dark,
body.italivo-modal-active .italivo-floating-darkmode,
body.has-active-dialog #italivo-floating-dark,
body.has-active-dialog .italivo-floating-darkmode,
body:has(.pop-over.has-layer) #italivo-floating-dark,
body:has(.pop-over.has-layer) .italivo-floating-darkmode {
  display: none !important;
}

/* Modal overlay above all headers and navbars */
.pop-over.has-layer,
.address-popup,
.address-form {
  z-index: 1000000 !important;
}

@media only screen and (max-width: 768px) {
  /* Center modal card with safe max-height */
  .pop-over.has-layer .layer + .pop-over-inner,
  .address-form .pop-over-inner,
  .address-popup .pop-over-inner,
  .pop-over.has-layer .pop-over-inner {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    bottom: auto !important;
    right: auto !important;
    width: 92% !important;
    max-width: 440px !important;
    max-height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45) !important;
    background: #ffffff !important;
    z-index: 1000001 !important;
  }

  .pop-heading {
    flex-shrink: 0 !important;
    padding: 14px 18px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .pop-heading h3,
  .pop-heading h5 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
  }

  /* Form content area scrolls smoothly */
  .pop-over-content,
  .pop-over .pop-over-inner .pop-over-content,
  .has-layer .pop-over-content,
  .address-form .pop-over-content,
  .address-popup .pop-over-content {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(80vh - 125px) !important;
    padding: 16px 18px 20px 18px !important;
    box-sizing: border-box !important;
  }

  /* Clean, professional modal footer holding CANCEL and SAVE buttons */
  .pop-footer,
  .address-form .pop-footer,
  .address-popup .pop-footer {
    flex-shrink: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
    padding: 12px 18px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    z-index: 30 !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .pop-footer .flex.j-end,
  .pop-footer .flex.j-end.gap-10 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 1. CANCEL BUTTON - Sleek, professional secondary outline button */
  .pop-footer button.outline-btn,
  .pop-footer .outline-btn,
  .pop-footer button:not(.primary-btn):not(.ajax-btn):not([type="submit"]) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1.5px solid #cbd5e1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
  }

  .pop-footer button.outline-btn:hover,
  .pop-footer .outline-btn:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
  }

  /* 2. SAVE BUTTON - High-impact, crisp primary button */
  .pop-footer button.primary-btn,
  .pop-footer .primary-btn,
  .pop-footer .ajax-btn,
  .pop-footer input[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 24px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    background: #e51a24 !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(229, 26, 36, 0.3) !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
  }

  .pop-footer button.primary-btn:hover,
  .pop-footer .primary-btn:hover {
    background: #dc2626 !important;
    box-shadow: 0 6px 16px rgba(229, 26, 36, 0.42) !important;
  }
}

/* =========================================================
   8. HIDE FAKE REVIEWS ON PRODUCT TILES & CARDS (Screenshot 2)
   ========================================================= */
.p-tile .rating-star,
.p-tile .rating-stars,
.p-tile .color-lite,
.p-tile span.block.mtb-5:has(.rating-star),
.p-tile .rating-wrap {
  display: none !important;
}

/* =========================================================
   9. PRODUCT DETAILS & DELIVERY BADGE (Screenshot 3)
   ========================================================= */
.italivo-delivery-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0;
  font-size: 13px;
  color: #334155;
  line-height: 1.5;
}
.italivo-delivery-box .badge-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}
.italivo-delivery-box ul {
  margin: 0;
  padding-left: 18px;
}
.italivo-delivery-box li {
  margin-bottom: 4px;
}

/* Clean up awkward Delete account button in user profile */
.user-profile-wrapper .card h5 {
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.user-profile-wrapper .card h5 .primary-btn {
  background: transparent !important;
  border: 1px solid #fca5a5 !important;
  color: #ef4444 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  height: auto !important;
  min-height: 28px !important;
  margin-left: auto !important;
}

.user-profile-wrapper .card h5 .primary-btn:hover {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}

/* =========================================================
   10. DARAZ-INSPIRED MOBILE ACCOUNT HUB (Screenshots 4 & 5)
   ========================================================= */
.italivo-profile-hub {
  display: none;
}
@media only screen and (max-width: 768px) {
  .italivo-profile-hub {
    display: block !important;
    background: #f8fafc;
    min-height: calc(100vh - 120px);
    padding-bottom: 90px;
    margin: -10px -15px 0 -15px;
  }
  .italivo-profile-header {
    background: linear-gradient(135deg, #e51a24 0%, #b91c1c 100%);
    padding: 24px 20px 28px 20px;
    color: #ffffff;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 4px 16px rgba(229, 26, 36, 0.25);
  }
  .italivo-profile-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }
  .italivo-profile-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .italivo-profile-user-card {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .italivo-profile-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ffffff;
    color: #e51a24;
    font-size: 22px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  .italivo-profile-info h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
  }
  .italivo-profile-info p {
    margin: 2px 0 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.88);
  }
  .italivo-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    margin-top: 4px;
    font-weight: 600;
  }

  /* Quick Actions Grid (Orders, Refunds, Track, Wishlist) */
  .italivo-profile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: -16px 14px 16px 14px;
    background: #ffffff;
    padding: 16px 8px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border: 1px solid #f1f5f9;
  }
  .italivo-profile-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: #334155;
    gap: 6px;
    cursor: pointer;
  }
  .italivo-profile-grid-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fef2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e51a24;
  }
  .italivo-profile-grid-icon svg {
    width: 22px;
    height: 22px;
  }
  .italivo-profile-grid-label {
    font-size: 11px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.2;
  }

  /* Daraz Style Menu List */
  .italivo-profile-menu {
    background: #ffffff;
    margin: 0 14px 16px 14px;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    border: 1px solid #f1f5f9;
    overflow: hidden;
  }
  .italivo-profile-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    text-decoration: none;
    color: #1e293b;
    border-bottom: 1px solid #f8fafc;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
  }
  .italivo-profile-menu-item:last-child {
    border-bottom: none;
  }
  .italivo-profile-menu-item:active {
    background: #f8fafc;
  }
  .italivo-profile-menu-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .italivo-profile-menu-left svg {
    width: 20px;
    height: 20px;
    stroke: #64748b;
  }
  .italivo-profile-menu-right {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
  }
  .italivo-profile-menu-right svg {
    width: 16px;
    height: 16px;
    stroke: #94a3b8;
  }

  /* Profile Logout & Delete Account Actions */
  .italivo-profile-actions {
    margin: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  .italivo-profile-logout-btn {
    width: 100%;
    padding: 12px 20px;
    background: #ffffff;
    border: 1.5px solid #ef4444;
    color: #ef4444;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
  }
  .italivo-profile-delete-link {
    font-size: 12.5px;
    color: #94a3b8;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    margin-top: 4px;
  }
}

/* =========================================================
   11. REFUND TRACKING SYSTEM MODAL STYLES
   ========================================================= */
.italivo-refund-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 100002;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.italivo-refund-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.italivo-refund-drawer {
  background: #ffffff;
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.italivo-refund-modal-overlay.open .italivo-refund-drawer {
  transform: translateY(0);
}
.italivo-refund-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.italivo-refund-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}
.italivo-refund-close {
  background: #f1f5f9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
}
.italivo-refund-body {
  padding: 16px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

/* Stepper styles */
.refund-tracker-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.refund-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.refund-order-num {
  font-weight: 700;
  font-size: 14.5px;
  color: #0f172a;
}
.refund-amount {
  font-weight: 700;
  font-size: 15px;
  color: #e51a24;
}
.refund-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin: 18px 0;
}
.refund-stepper::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 20px;
  right: 20px;
  height: 3px;
  background: #e2e8f0;
  z-index: 1;
}
.refund-step {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.refund-step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 2px solid #cbd5e1;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.refund-step.completed .refund-step-circle {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
}
.refund-step.active .refund-step-circle {
  background: #e51a24;
  border-color: #e51a24;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(229, 26, 36, 0.2);
}
.refund-step-label {
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
  text-align: center;
}
.refund-step.active .refund-step-label {
  color: #e51a24;
  font-weight: 700;
}
.refund-status-box {
  background: #f8fafc;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: #475569;
  margin-top: 12px;
  border-left: 3px solid #e51a24;
}

/* Feature bar spacing when placed below Special Offers & Deals */
.static-container {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}
@media (max-width: 768px) {
  .static-container {
    margin-top: 16px !important;
    margin-bottom: 20px !important;
  }
}

/* ========================================================
   HELPLINE WHATSAPP LOGO (Desktop & Tablet Header)
   ======================================================== */
header .phone-icon,
.top-wrapper .phone-icon,
.icon.phone-icon,
.icon.whatsapp-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2325D366' d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  width: 17px !important;
  height: 17px !important;
  display: inline-block !important;
  mask: none !important;
  -webkit-mask: none !important;
  vertical-align: -3px !important;
}

/* ========================================================
   CENTER @SOSMOO TECHNOLOGIES & FOOTER CREDITS (Desktop & Mobile)
   ======================================================== */
footer .bottom-area,
footer .bottom-area .container,
footer .bottom-area .ptb-15,
footer .bottom-area .center-text,
footer .bottom-area p,
footer [class*="copyright"],
footer [class*="developer"],
footer [class*="sosmoo"] {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

footer a[href*="sosmoo"],
footer a[href*="sosmootech"],
a[href*="sosmoo.com"],
a[href*="sosmoo"],
.sosmoo-credit,
.developer-credit,
.dev-credit {
  display: block !important;
  text-align: center !important;
  margin: 6px auto 0 auto !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  color: #e51a24 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}




/* --- Name-Wise Categories Display (No Emojis) --- */
.category-tile-wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  gap: 14px !important;
  padding: 10px 0 !important;
}

.category-tile-wrapper .category-tile {
  width: 100% !important;
  margin: 0 !important;
}

.category-tile-wrapper .category-tile a.page-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 58px !important;
  padding: 12px 18px !important;
  background: #ffffff !important;
  border: 1.5px solid #edf0f5 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
}

.category-tile-wrapper .category-tile a.page-link:hover {
  border-color: #2b7a4b !important;
  background: #f7fbf8 !important;
  box-shadow: 0 4px 14px rgba(43, 122, 75, 0.12) !important;
  transform: translateY(-2px) !important;
}

.category-tile-wrapper .category-tile h5.item-title {
  margin: 0 !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.35 !important;
  letter-spacing: -0.2px !important;
}

.category-tile-wrapper .category-tile a.page-link:hover h5.item-title {
  color: #2b7a4b !important;
}

/* Only hide icons on Category pages (keep Name-wise categories text-only), NOT on Brand pages */
.category-tile-wrapper .category-tile a:not([href*="/brand"]):not(.brand-tile-link) .img-wrapper {
  display: none !important;
}

/* Deactivate Featured Categories Bar on Home Page */
.category-wrapper,
.home-section.category-wrapper,
section.category-wrapper {
  display: none !important;
}



/* --- Logo & Brand Styling (ITALIVO Cropped Tight Emblem + Professional Text Alignment) --- */
header .left-area {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: 250px !important;
  margin-right: 22px !important;
  flex-shrink: 0 !important;
}

header .logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

header .logo img {
  height: 48px !important;
  max-height: 50px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0 !important;
}

header .logo .logo-text {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  color: #111827 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  top: 1px !important;
  white-space: nowrap !important;
}

/* --- Header Top-Bar Alignment (Professional, Clean, No Language Dropdown) --- */
header .top-wrapper {
  background: #fbfbfb !important;
  border-bottom: 1px solid #ededed !important;
  padding: 2px 0 !important;
}

header .top-wrapper .lang-dropdown {
  display: none !important;
}

header .top-wrapper .left-side {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
}

header .top-wrapper .left-side a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

header .top-wrapper .left-side a:hover {
  color: #2b7a4b !important;
}

header .top-wrapper .right-side a {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  text-decoration: none !important;
}

header .top-wrapper .right-side a:hover {
  color: #2b7a4b !important;
}

/* --- Hide Customer Reviews & Shipping Options from Sidebar --- */
.star-filter,
.sidebar-section.star-filter,
.sidebar-section:has(input[name="shipping"]),
.sidebar-section:has(label[for^="cb-"]) {
  display: none !important;
}

/* --- Responsive Alignment for Mobile & Tablet --- */
@media (max-width: 768px) {
  /* Clean, professional 2-line top-bar on mobile */
  header .top-wrapper {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 6px 10px !important;
  }
  header .top-wrapper .wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 3px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  header .top-wrapper .left-side {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    margin: 0 auto !important;
    text-align: center !important;
    line-height: 1 !important;
  }
  header .top-wrapper .left-side a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: auto !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  header .top-wrapper .left-side a:hover,
  header .top-wrapper .left-side a:active {
    color: #2b7a4b !important;
  }
  header .top-wrapper .left-side i.icon,
  header .top-wrapper .left-side .email-icon,
  header .top-wrapper .left-side .phone-icon {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  header .top-wrapper .left-side > span,
  header .top-wrapper .right-side span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #cbd5e1 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    margin: 0 4px !important;
    width: auto !important;
    user-select: none !important;
  }

  /* Center LOGIN | REGISTER (Row 2) - Tightly grouped in the center, not stretched */
  header .top-wrapper .right-side {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 2px !important;
    line-height: 1 !important;
  }
  header .top-wrapper .right-side > div {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
    margin: 0 auto !important;
  }
  header .top-wrapper .right-side a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: auto !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  header .top-wrapper .right-side a:hover,
  header .top-wrapper .right-side a:active {
    color: #2b7a4b !important;
  }
  header .top-wrapper .right-side i.icon,
  header .top-wrapper .right-side .login-icon,
  header .top-wrapper .right-side .register-icon,
  header .top-wrapper .right-side .user-icon {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Center & nicely align cropped logo + ITALIVO text on mobile */
  header .left-area {
    display: flex !important;
    align-items: center !important;
    min-height: 38px !important;
    margin-right: 8px !important;
    width: auto !important;
  }
  header .logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    text-decoration: none !important;
    line-height: 1 !important;
  }
  header .logo img {
    height: 36px !important;
    max-height: 38px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }
  header .logo .logo-text {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    color: #111827 !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 1px !important;
    white-space: nowrap !important;
  }

  /* Right Area (My Account + Cart) - Exact Previous Position and Styling */
  header .container-fluid.flex .right-area,
  header .right-area {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    position: absolute !important;
    right: 15px !important;
    top: -4px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  header .right-area .pos-rel > button:first-child {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    line-height: 1 !important;
  }
  header .right-area .pos-rel > button:first-child .arrow-down,
  header .right-area .pos-rel > button:first-child .icon.arrow-down,
  header .right-area .pos-rel > button:first-child i.arrow-down {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    vertical-align: middle !important;
    opacity: 0.9 !important;
    visibility: visible !important;
  }

  /* Account Dropdown Menu Items - Precise Identical Alignment for Links & Logout */
  header .dropdown a,
  header .dropdown button.clear-btn,
  header .right-area .dropdown button.clear-btn {
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    height: auto !important;
    line-height: 1.4 !important;
    padding: 12px 20px !important;
    text-align: left !important;
    width: 100% !important;
    color: #1f2937 !important;
    background: transparent !important;
    border: none !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease !important;
  }
  header .dropdown a:hover,
  header .dropdown button.clear-btn:hover {
    background: #f8fafc !important;
    color: #e51a24 !important;
  }
  header .right-area .cart-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
  }
  header .right-area .cart-btn .cart-icon {
    width: 24px !important;
    height: 24px !important;
    display: inline-block !important;
    color: #111827 !important;
  }
  header .right-area .cart-btn .title {
    display: none !important;
  }
  header .right-area .cart-badge {
    background: #e51a24 !important;
    border: 1px solid #ffffff !important;
    border-radius: 100% !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    height: 18px !important;
    min-width: 18px !important;
    line-height: 16px !important;
    position: absolute !important;
    text-align: center !important;
    top: -2px !important;
    right: -6px !important;
    left: auto !important;
    z-index: 1 !important;
  }
}

@media (max-width: 380px) {
  header .top-wrapper .left-side a {
    font-size: 10px !important;
    gap: 3px !important;
  }
  header .top-wrapper .left-side {
    gap: 4px !important;
  }
  header .top-wrapper .right-side a {
    font-size: 10px !important;
  }
  header .logo {
    gap: 5px !important;
  }
  header .logo img {
    height: 32px !important;
    max-height: 34px !important;
    width: auto !important;
    max-width: none !important;
  }
  header .logo .logo-text {
    font-size: 13.5px !important;
    letter-spacing: 0.8px !important;
  }
  header .right-area .pos-rel > button:first-child {
    font-size: 13px !important;
  }
}

/* =========================================================================
   17. SHOP BY CATEGORY MEGA DROPDOWN (RED THEME COMPACT & CLICK-TO-OPEN)
   ========================================================================= */
@media screen and (min-width: 769px) {
  header .bottom-area,
  header .bottom-area > div,
  header .bottom-area .flex.sided,
  header .bottom-area .container-fluid {
    overflow: visible !important;
  }

  header .bottom-area .flex.sided {
    display: flex !important;
    align-items: center !important;
  }

  header .bottom-area .flex.sided > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    overflow: visible !important;
  }

  /* Hide the old plain categories link in bottom area since Shop by Category button replaces it */
  header .bottom-area a[href="/categories"],
  header .bottom-area a[href*="/categories"]:not(.italivo-cat-item) {
    display: none !important;
  }

  .italivo-mega-cat-wrapper {
    position: relative !important;
    display: inline-block !important;
    vertical-align: middle !important;
    z-index: 1000 !important;
    font-family: inherit !important;
    margin-right: 6px !important;
  }

  .italivo-shop-cat-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #e51a24 !important;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    padding: 7px 15px !important;
    border-radius: 6px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    cursor: pointer !important;
    box-shadow: 0 3px 10px rgba(229, 26, 36, 0.25) !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
    height: 38px !important;
    white-space: nowrap !important;
    text-transform: none !important;
  }

  .italivo-shop-cat-btn:hover,
  .italivo-shop-cat-btn.active {
    background: #c8101e !important;
    box-shadow: 0 5px 14px rgba(229, 26, 36, 0.35) !important;
  }

  .italivo-shop-cat-btn svg.cat-chevron {
    transition: transform 0.25s ease !important;
  }

  .italivo-shop-cat-btn.active svg.cat-chevron {
    transform: rotate(180deg) !important;
  }

  .italivo-cat-dropdown-menu {
    display: none;
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14) !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 3px solid #e51a24 !important;
    z-index: 99999 !important;
    width: 440px !important;
    max-width: 440px !important;
    overflow: hidden !important;
  }

  .italivo-cat-dropdown-menu.open {
    display: flex !important;
    animation: italivoFadeIn 0.18s ease forwards !important;
  }

  @keyframes italivoFadeIn {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Left Column: Categories List */
  .italivo-cat-col-left {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    background: #ffffff !important;
    border-right: 1px solid #f1f5f9 !important;
    padding: 6px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 420px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 transparent !important;
  }

  .italivo-cat-col-left::-webkit-scrollbar {
    width: 4px !important;
  }
  .italivo-cat-col-left::-webkit-scrollbar-thumb {
    background: #e2e8f0 !important;
    border-radius: 4px !important;
  }

  .italivo-cat-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px 8px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.12s ease !important;
    user-select: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
  }

  .italivo-cat-item span {
    color: inherit !important;
    font-size: 13px !important;
    font-weight: inherit !important;
    text-transform: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    padding-right: 4px !important;
  }

  .italivo-cat-item svg {
    color: #94a3b8 !important;
    stroke: currentColor !important;
    transition: transform 0.12s ease, color 0.12s ease !important;
    flex-shrink: 0 !important;
  }

  .italivo-cat-item:hover,
  .italivo-cat-item.active {
    background: #e51a24 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
  }

  .italivo-cat-item:hover svg,
  .italivo-cat-item.active svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    transform: translateX(2px) !important;
  }

  /* Right Column: Subcategories Flyout */
  .italivo-cat-col-right {
    width: 225px !important;
    min-width: 225px !important;
    max-width: 225px !important;
    background: #ffffff !important;
    padding: 6px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 420px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: #e2e8f0 transparent !important;
    box-sizing: border-box !important;
  }

  .italivo-cat-col-right::-webkit-scrollbar {
    width: 4px !important;
  }

  .italivo-cat-col-right::-webkit-scrollbar-thumb {
    background: #e2e8f0 !important;
    border-radius: 4px !important;
  }

  .italivo-subcat-item {
    display: flex !important;
    align-items: center !important;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: #334155 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f8fafc !important;
    transition: all 0.12s ease !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
  }

  .italivo-subcat-item span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
  }

  .italivo-subcat-item:last-child {
    border-bottom: none !important;
  }

  .italivo-subcat-item:hover {
    background: #fff5f5 !important;
    color: #e51a24 !important;
    font-weight: 600 !important;
    padding-left: 18px !important;
  }
}

/* Hide on mobile screens */
@media screen and (max-width: 768px) {
  .italivo-mega-cat-wrapper,
  #italivo-mega-cat-wrapper {
    display: none !important;
  }
}

/* ============================================================
   FIX 1: PRODUCT DETAIL OVERLAPPING STORE TILE & SHARE (Screenshot 3)
   ============================================================ */
.product-detail {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  padding-right: 0 !important;
  position: relative !important;
  gap: 30px !important;
}

.product-detail .detail-left {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  padding-right: 0 !important;
}

.product-detail .detail-right {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  right: auto !important;
  width: 320px !important;
  min-width: 320px !important;
  max-width: 320px !important;
  flex: 0 0 320px !important;
  z-index: 5 !important;
}

.product-detail .detail-right .sticky-right {
  position: sticky !important;
  top: 90px !important;
  z-index: 5 !important;
}

.product-detail .detail-right .store-info {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-top: 16px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.product-detail .detail-right .social-share {
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid #f1f5f9 !important;
}

@media only screen and (max-width: 992px) {
  .product-detail {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .product-detail .detail-right {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    position: static !important;
  }
  .product-detail .detail-right .sticky-right {
    position: static !important;
  }
}

/* ============================================================
   FIX 2: DESKTOP FOOTER CATEGORIES CLEAN ALIGNMENT (Screenshot 4)
   ============================================================ */
@media screen and (min-width: 769px) {
  footer .top-area.section {
    padding-top: 40px !important;
    padding-bottom: 35px !important;
    background: #fafafa !important;
    border-top: 1px solid #eef2f6 !important;
  }

  footer .table-tree {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 32px 28px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  footer .table-tree > .tree-node {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  footer .table-tree > .tree-node > .node-data {
    display: block !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #e51a24 !important;
  }

  footer .table-tree > .tree-node > .node-data a {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    letter-spacing: -0.2px !important;
    transition: color 0.15s ease !important;
  }

  footer .table-tree > .tree-node > .node-data a:hover {
    color: #e51a24 !important;
  }

  footer .table-tree > .tree-node > ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  footer .table-tree > .tree-node > ul > .tree-node {
    width: 100% !important;
    display: block !important;
  }

  footer .table-tree > .tree-node > ul > .tree-node .node-data a {
    font-size: 13.5px !important;
    font-weight: 450 !important;
    color: #475569 !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    transition: all 0.15s ease !important;
    display: inline-block !important;
  }

  footer .table-tree > .tree-node > ul > .tree-node .node-data a:hover {
    color: #e51a24 !important;
    transform: translateX(3px) !important;
  }
}

/* ============================================================
   FIX 3: MOBILE FOOTER CATEGORIES CENTERED & ALIGNED (Screenshot 5)
   ============================================================ */
@media screen and (max-width: 768px) {
  footer .top-area.section {
    padding-top: 28px !important;
    padding-bottom: 24px !important;
    background: #fbfcfe !important;
    border-top: 1px solid #f1f5f9 !important;
  }

  footer .table-tree {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    padding: 0 16px !important;
    margin: 0 auto !important;
    width: 100% !important;
    text-align: center !important;
  }

  footer .table-tree > .tree-node {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  footer .table-tree > .tree-node > .node-data {
    display: block !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    width: 100% !important;
  }

  footer .table-tree > .tree-node > .node-data a {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    letter-spacing: -0.2px !important;
    display: inline-block !important;
    position: relative !important;
    padding-bottom: 4px !important;
  }

  footer .table-tree > .tree-node > .node-data a::after {
    content: "" !important;
    display: block !important;
    width: 32px !important;
    height: 2px !important;
    background: #e51a24 !important;
    margin: 4px auto 0 auto !important;
    border-radius: 2px !important;
  }

  footer .table-tree > .tree-node > ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px 8px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    list-style: none !important;
    width: 100% !important;
    text-align: center !important;
  }

  footer .table-tree > .tree-node > ul > .tree-node {
    display: inline-flex !important;
    width: auto !important;
  }

  footer .table-tree > .tree-node > ul > .tree-node .node-data a {
    display: inline-block !important;
    padding: 5px 12px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.15s ease !important;
  }

  footer .table-tree > .tree-node > ul > .tree-node .node-data a:active {
    background: #fee2e2 !important;
    color: #e51a24 !important;
    border-color: #fca5a5 !important;
  }
}


/* ==========================================================================
   PRODUCT DETAIL PAGE (PDP) MODAL OVERLAP & RIGHT COLUMN ALIGNMENT FIXES
   ========================================================================== */

/* ==========================================================================
   PRODUCT DETAIL PAGE (PDP) IMAGE SLIDER (MOBILE) & LIGHTBOX ZOOM MODAL (DESKTOP)
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. MOBILE & TABLET (<= 992px): Inline Image Carousel
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 992px) {
  /* On mobile, .image-popup-wrapper (and .stacked) is the inline image carousel */
  .image-popup-wrapper,
  .stacked.image-popup-wrapper,
  .product-detail .image-popup-wrapper,
  .product-detail .stacked.image-popup-wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    z-index: 5 !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* No dark backdrop layer on mobile inline carousel */
  .image-popup-wrapper > .layer,
  .stacked.image-popup-wrapper > .layer {
    display: none !important;
  }

  /* No close button on mobile inline carousel */
  .image-popup-wrapper .image-popup .close-btn,
  .stacked.image-popup-wrapper .image-popup .close-btn,
  .image-popup-wrapper .close-btn,
  .stacked.image-popup-wrapper .close-btn {
    display: none !important;
  }

  .image-popup-wrapper .image-popup,
  .stacked.image-popup-wrapper .image-popup {
    position: relative !important;
    z-index: 1 !important;
    background: #ffffff !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: none !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: none !important;
    height: auto !important;
    padding: 16px 12px 24px 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .image-popup-wrapper .image-popup .product-slider,
  .stacked.image-popup-wrapper .image-popup .product-slider,
  .image-popup-wrapper .image-popup .product-slider .embla,
  .stacked.image-popup-wrapper .image-popup .product-slider .embla,
  .image-popup-wrapper .image-popup .product-slider .embla__viewport,
  .stacked.image-popup-wrapper .image-popup .product-slider .embla__viewport {
    width: 100% !important;
    height: auto !important;
    max-height: 420px !important;
    min-height: 280px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .image-popup-wrapper .image-popup .product-slider .embla__container,
  .stacked.image-popup-wrapper .image-popup .product-slider .embla__container {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    max-height: 420px !important;
    width: 100% !important;
  }

  .image-popup-wrapper .image-popup .product-slider .embla__container li,
  .stacked.image-popup-wrapper .image-popup .product-slider .embla__container li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    max-height: 420px !important;
    min-height: 280px !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .image-popup-wrapper .image-popup img,
  .stacked.image-popup-wrapper .image-popup img,
  .image-popup-wrapper .image-popup img.full-dimen,
  .stacked.image-popup-wrapper .image-popup img.full-dimen,
  .image-popup-wrapper .image-popup img.opacity-0,
  .stacked.image-popup-wrapper .image-popup img.opacity-0,
  .image-popup-wrapper .image-popup .product-slider img,
  .stacked.image-popup-wrapper .image-popup .product-slider img {
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
    max-width: 90% !important;
    max-height: 380px !important;
    min-height: 250px !important;
    margin: 0 auto !important;
    display: block !important;
    border-radius: 8px !important;
    opacity: 1 !important;
    visibility: visible !important;
    aspect-ratio: auto !important;
  }

  /* Hide redundant title in mobile carousel */
  .stacked.image-popup-wrapper h5.title,
  .stacked.image-popup-wrapper .title,
  .stacked.image-popup-wrapper .image-popup h5.title {
    display: none !important;
  }

  .stacked.image-popup-wrapper .image-popup {
    position: relative !important;
    padding: 0 0 16px 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* Wishlist (Heart) & Share icons alignment on mobile inline slider */
  .image-popup-icons,
  .stacked.image-popup-wrapper .image-popup-icons {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 20 !important;
    pointer-events: none !important;
  }

  .image-popup-icons .fav-btn,
  .image-popup-icons .share-btn,
  .image-popup-wrapper .image-popup .fav-btn,
  .image-popup-wrapper .image-popup .share-btn {
    position: static !important;
    pointer-events: auto !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  .image-popup-icons .fav-btn:active,
  .image-popup-icons .share-btn:active {
    transform: scale(0.92) !important;
  }

  /* CRISP MODERN VECTOR SVG ICONS - Zero sprite misalignment */
  .image-popup-icons .share-btn .icon,
  .share-btn .icon.share-icon,
  .share-btn i.share-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'%3E%3C/circle%3E%3Ccircle cx='6' cy='12' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='19' r='3'%3E%3C/circle%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'%3E%3C/line%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'%3E%3C/line%3E%3C/svg%3E") !important;
    background-size: 18px 18px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: inline-block !important;
    margin: 0 !important;
    opacity: 1 !important;
  }

  .image-popup-icons .fav-btn .icon,
  .fav-btn .icon.heart-icon,
  .fav-btn i.heart-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'%3E%3C/path%3E%3C/svg%3E") !important;
    background-size: 18px 18px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: inline-block !important;
    margin: 0 !important;
    opacity: 1 !important;
  }

  .image-popup-icons .fav-btn .heart-fill-icon,
  .image-popup-icons .fav-btn i.heart-fill-icon,
  .fav-btn .icon.heart-fill-icon,
  .fav-btn i.heart-fill-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23e51a24' stroke='%23e51a24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'%3E%3C/path%3E%3C/svg%3E") !important;
    background-size: 18px 18px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: inline-block !important;
    margin: 0 !important;
    opacity: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   B. DESKTOP (> 992px): High-Performance Lightbox Zoom Modal
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 993px) {
  /* When image lightbox is active on desktop, elevate detail-left and subordinate detail-right */
  body.pdp-popup-active .product-detail .detail-left,
  body.no-scroll .product-detail .detail-left,
  .product-detail:has(.image-popup-wrapper) .detail-left {
    position: relative !important;
    z-index: 100005 !important;
  }

  body.pdp-popup-active .product-detail .detail-right,
  body.no-scroll .product-detail .detail-right,
  .product-detail:has(.image-popup-wrapper) .detail-right,
  body.pdp-popup-active .detail-right,
  body.no-scroll .detail-right {
    position: relative !important;
    z-index: 1 !important;
    opacity: 0.12 !important;
    pointer-events: none !important;
    filter: blur(2px) !important;
    transition: opacity 0.2s ease, filter 0.2s ease !important;
  }

  body.pdp-popup-active .product-detail .detail-right .sticky-right,
  body.no-scroll .product-detail .detail-right .sticky-right,
  .product-detail:has(.image-popup-wrapper) .detail-right .sticky-right {
    z-index: 1 !important;
  }

  /* On desktop, ANY .image-popup-wrapper is a fixed modal overlay */
  .image-popup-wrapper,
  .stacked.image-popup-wrapper,
  .product-detail .image-popup-wrapper,
  .product-detail .stacked.image-popup-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 100005 !important;
    background: rgba(15, 23, 42, 0.88) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 24px !important;
    box-sizing: border-box !important;
  }

  /* Full screen backdrop layer to capture clicks to dismiss */
  .image-popup-wrapper > .layer,
  .stacked.image-popup-wrapper > .layer {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: transparent !important;
    z-index: 1 !important;
    cursor: pointer !important;
  }

  /* Centered white modal popup card */
  .image-popup-wrapper .image-popup,
  .stacked.image-popup-wrapper .image-popup {
    position: relative !important;
    z-index: 2 !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
    max-width: 720px !important;
    width: 90vw !important;
    max-height: 88vh !important;
    height: auto !important;
    padding: 28px 24px 24px 24px !important;
    margin: auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .image-popup-wrapper .image-popup .product-slider,
  .stacked.image-popup-wrapper .image-popup .product-slider,
  .image-popup-wrapper .image-popup .product-slider .embla,
  .stacked.image-popup-wrapper .image-popup .product-slider .embla,
  .image-popup-wrapper .image-popup .product-slider .embla__viewport,
  .stacked.image-popup-wrapper .image-popup .product-slider .embla__viewport {
    height: auto !important;
    max-height: 70vh !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .image-popup-wrapper .image-popup .product-slider .embla__container,
  .stacked.image-popup-wrapper .image-popup .product-slider .embla__container {
    height: auto !important;
    max-height: 70vh !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .image-popup-wrapper .image-popup .product-slider .embla__container li,
  .stacked.image-popup-wrapper .image-popup .product-slider .embla__container li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    max-height: 70vh !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .image-popup-wrapper .image-popup img,
  .stacked.image-popup-wrapper .image-popup img,
  .image-popup-wrapper .image-popup img.full-dimen,
  .stacked.image-popup-wrapper .image-popup img.full-dimen,
  .image-popup-wrapper .image-popup img.opacity-0,
  .stacked.image-popup-wrapper .image-popup img.opacity-0,
  .image-popup-wrapper .image-popup .product-slider img,
  .stacked.image-popup-wrapper .image-popup .product-slider img {
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 65vh !important;
    margin: 0 auto !important;
    display: block !important;
    border-radius: 8px !important;
    opacity: 1 !important;
    visibility: visible !important;
    aspect-ratio: auto !important;
  }

  /* Close button (X) on desktop modal */
  .image-popup-wrapper .image-popup .close-btn,
  .stacked.image-popup-wrapper .image-popup .close-btn,
  .image-popup-wrapper .close-btn,
  .stacked.image-popup-wrapper .close-btn {
    display: flex !important;
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 25 !important;
    width: 38px !important;
    height: 38px !important;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 50% !important;
    color: #1e293b !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  .image-popup-wrapper .image-popup .close-btn:hover,
  .stacked.image-popup-wrapper .image-popup .close-btn:hover,
  .image-popup-wrapper .close-btn:hover,
  .stacked.image-popup-wrapper .close-btn:hover {
    background: #fee2e2 !important;
    color: #e51a24 !important;
    transform: scale(1.08) !important;
  }

  /* Fav and share on desktop modal */
  .image-popup-wrapper .image-popup-icons,
  .stacked.image-popup-wrapper .image-popup-icons {
    position: absolute !important;
    top: 14px !important;
    left: 16px !important;
    display: flex !important;
    gap: 8px !important;
    z-index: 25 !important;
    pointer-events: auto !important;
  }

  .image-popup-wrapper .image-popup-icons .fav-btn,
  .stacked.image-popup-wrapper .image-popup-icons .fav-btn,
  .image-popup-wrapper .image-popup-icons .share-btn,
  .stacked.image-popup-wrapper .image-popup-icons .share-btn {
    position: static !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #1e293b !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.2s ease !important;
  }

  .image-popup-wrapper .image-popup-icons .fav-btn:hover,
  .stacked.image-popup-wrapper .image-popup-icons .fav-btn:hover,
  .image-popup-wrapper .image-popup-icons .share-btn:hover,
  .stacked.image-popup-wrapper .image-popup-icons .share-btn:hover {
    transform: scale(1.08) !important;
    background: #ffffff !important;
  }
}

.image-popup-wrapper .image-popup .thumb-wrapper {
  display: none !important;
}

/* 2. Right Column (.detail-right) Spacing and Clean Alignment */
.product-detail .detail-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

.product-detail .detail-right .price-wrapper,
.product-detail .detail-right .price-wrapper-inner {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 4px 0 !important;
}

/* Koko PDP Installment Box Isolation */
.koko-pdp-section,
.detail-right .koko-pdp-section {
  width: 100% !important;
  max-width: 480px !important;
  box-sizing: border-box !important;
  margin: 8px 0 14px 0 !important;
  padding: 12px 16px !important;
  background: #f8fafc !important;
  border: 1px dashed #c7d2fe !important;
  border-radius: 10px !important;
  clear: both !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Shipping fee & Islandwide Delivery Box */
.detail-right .shipping-fee-wrap,
.detail-right .delivery-breakdown,
.detail-right .islandwide-delivery-card {
  width: 100% !important;
  max-width: 480px !important;
  box-sizing: border-box !important;
  margin: 6px 0 !important;
  clear: both !important;
}

/* Buttons / Actions Area */
.detail-right .quantity-wrapper,
.detail-right .cart-btn-wrap,
.detail-right .buy-now-wrap {
  width: 100% !important;
  max-width: 480px !important;
  margin-top: 4px !important;
}

/* ==========================================================================
   3. CART ITEM RIGHT COLUMN (PRICE & QUANTITY) ALIGNMENT (Desktop & Mobile)
   ========================================================================== */

/* DESKTOP CART (Min-width: 769px) */
@media only screen and (min-width: 769px) {
  .checkout-detail .detail-left {
    box-sizing: border-box !important;
    padding: 20px 24px !important;
  }

  .cart-product-tile {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .cart-product-tile .content-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 20px !important;
  }

  .cart-product-tile .right-text,
  .cart-item .right-text,
  .right-text.mt-sm-10 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    text-align: right !important;
    min-width: 140px !important;
    width: 140px !important;
    max-width: 140px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }

  .cart-product-tile .right-text h5,
  .cart-product-tile .right-text h5.price,
  .cart-item .right-text h5 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    text-align: right !important;
    width: 100% !important;
    display: block !important;
    white-space: nowrap !important;
    letter-spacing: -0.2px !important;
  }

  .cart-product-tile .right-text p,
  .cart-product-tile .right-text p.inl-b-sm,
  .cart-item .right-text p {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    margin: 3px 0 0 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    text-align: right !important;
    width: 100% !important;
    display: block !important;
    white-space: nowrap !important;
  }

  .cart-product-tile .right-text p:empty,
  .cart-product-tile .right-text p.inl-b-sm:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Subtotal row - perfectly matched 140px right column with identical right margin and typography */
  .detail-left .flex.sided.pb-5 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 0 10px 0 !important;
    border-top: 1.5px solid #e2e8f0 !important;
    margin: 10px 0 0 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .detail-left .flex.sided.pb-5 h5.price {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .detail-left .flex.sided.pb-5 h4.price {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    min-width: 140px !important;
    width: 140px !important;
    max-width: 140px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    white-space: nowrap !important;
  }
}

/* MOBILE CART (Max-width: 768px) - Professional, neat, zero cut-off */
@media only screen and (max-width: 768px) {
  /* Cart container sizing & spacing */
  .container-fluid.mtb-20,
  .container-fluid.mtb-sm-15 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 16px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .checkout-detail {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 12px !important;
    overflow: hidden !important;
  }

  .checkout-detail .detail-left {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #eef2f6 !important;
  }

  /* "Shopping cart" header & "Deselect all" row */
  .checkout-detail .detail-left > .b-b.flex.sided,
  .detail-left > .b-b.flex.sided {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 12px !important;
    margin-bottom: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }

  .checkout-detail .detail-left > .b-b.flex.sided h4,
  .detail-left > .b-b.flex.sided h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
  }

  .checkout-detail .detail-left > .b-b.flex.sided button,
  .checkout-detail .detail-left > .b-b.flex.sided .link-btn,
  .detail-left > .b-b.flex.sided .link-btn {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #e51a24 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
  }

  /* Cart product tile */
  .cart-product-tile {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    position: relative !important;
    padding: 14px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }

  .cart-product-tile > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    width: auto !important;
    padding-top: 4px !important;
  }

  .cart-product-tile .img-wrapper {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    border: 1px solid #f1f5f9 !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  .cart-product-tile .img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .cart-product-tile .content-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: calc(100% - 105px) !important;
    gap: 6px !important;
  }

  .cart-product-tile .content-wrap > .grow {
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .cart-product-tile .content-wrap h5 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.35 !important;
    margin: 0 0 6px 0 !important;
    word-break: break-word !important;
  }

  /* Quantity Stepper and Delete Button Row */
  .cart-product-tile .flex.gap-10.start.wrap.mt-10,
  .cart-product-tile .content-wrap .flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 8px !important;
    width: 100% !important;
  }

  /* Sleek modern DELETE button */
  .cart-product-tile button.outline-btn,
  .cart-product-tile .outline-btn {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #dc2626 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    height: 34px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
  }

  .cart-product-tile button.outline-btn:hover {
    background: #fee2e2 !important;
    border-color: #f87171 !important;
  }

  /* Subtotal Row */
  .detail-left .flex.sided.pb-5 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 2px 12px 2px !important;
    border-top: 1.5px solid #e2e8f0 !important;
    margin-top: 14px !important;
  }

  .detail-left .flex.sided.pb-5 h5.price {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .detail-left .flex.sided.pb-5 h4.price {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    text-align: right !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Hide floating WhatsApp button on Cart and Checkout pages to prevent blocking */
  body:has(.checkout-detail) #italivo-floating-wa,
  body:has(.checkout-detail) .italivo-floating-wa,
  body:has(.cart-product-tile) #italivo-floating-wa,
  body:has(.cart-product-tile) .italivo-floating-wa {
    display: none !important;
  }
}

/* ==========================================================================
   4. HOME HERO BANNER SLIDER - EXACT 1550x880 RATIO FIT (Screenshot 4)
   ========================================================================== */
.main-slider,
.main-slider > div,
.main-slider .slider-wrapper,
.main-slider .slider-wrapper .left,
.main-slider .embla,
.main-slider .embla__viewport,
.main-slider .embla__container,
.main-slider .embla__container li,
.main-slider .slider-content,
.main-slider .slider-content-inner {
  height: auto !important;
  max-height: none !important;
}

.main-slider .slider-wrapper .left .pos-rel {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1550 / 880 !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  height: auto !important;
  max-height: none !important;
}

.main-slider .slider-content,
.main-slider .slider-content-inner,
.main-slider .embla__container li a,
.main-slider .embla__container li div {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1550 / 880 !important;
  display: block !important;
  position: relative !important;
}

.main-slider img:not(.koko-inline-logo),
.main-slider .slider-content img:not(.koko-inline-logo),
.main-slider .slider-content-inner img:not(.koko-inline-logo),
.main-slider .placeholder-img,
.main-slider img.full-dimen:not(.koko-inline-logo) {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1550 / 880 !important;
  object-fit: fill !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media only screen and (max-width: 768px) {
  .main-slider,
  .main-slider .slider-wrapper,
  .main-slider .slider-wrapper .left,
  .main-slider .slider-wrapper .left .pos-rel,
  .main-slider .slider-content,
  .main-slider .slider-content-inner,
  .main-slider img:not(.koko-inline-logo),
  .main-slider .placeholder-img {
    aspect-ratio: 1550 / 880 !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* Bulletproof Global Protection for Koko Inline Logo */
img.koko-inline-logo,
.koko-inline-logo,
.koko-tile-installment img,
.koko-pdp-section img,
.koko-pdp-installment-row img {
  height: 15px !important;
  max-height: 15px !important;
  min-height: 15px !important;
  width: auto !important;
  max-width: 55px !important;
  aspect-ratio: auto !important;
  display: inline-block !important;
  vertical-align: middle !important;
  object-fit: contain !important;
  margin: 0 4px !important;
}

/* ==========================================================================
   CHECKOUT 3 PAYMENT SYSTEMS RESPONSIVE STYLING (Card, Koko, Bank)
   ========================================================================== */
.payment-popup .pop-over-inner,
#pay-now-pop-over {
  width: 620px !important;
  max-width: 95vw !important;
}

.heading-tab-wrapper .payment-options-row,
.tab-heading.payment-options-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  clear: both !important;
}

.payment-method-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 8px 14px 8px !important;
  border-radius: 12px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  position: relative !important;
  min-height: 108px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  user-select: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
}

.payment-method-tile:hover {
  border-color: #94a3b8 !important;
  transform: translateY(-2px) !important;
}

/* BLUE ACTIVE LINE - IDENTICAL FOR ALL 3 TABS */
.payment-method-tile.active {
  border: 2px solid #2563eb !important;
  background: #eff6ff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18) !important;
  transform: translateY(-1px) !important;
}

.payment-method-tile .pmt-radio {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: 1.5px solid #cbd5e1 !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
}

.payment-method-tile.active .pmt-radio {
  border-color: #2563eb !important;
  background: #2563eb !important;
}

.payment-method-tile .pmt-radio-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  display: none !important;
}

.payment-method-tile.active .pmt-radio-dot {
  display: block !important;
}

.payment-method-tile .pmt-title {
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  color: #1e293b !important;
  margin-top: 3px !important;
  display: block !important;
}

.payment-method-tile.active .pmt-title {
  color: #1d4ed8 !important;
}

.payment-method-tile .pmt-sub {
  font-size: 10px !important;
  color: #64748b !important;
  margin-top: 2px !important;
  display: block !important;
  line-height: 1.2 !important;
}

.payment-method-tile img {
  height: 23px !important;
  max-height: 23px !important;
  width: auto !important;
  max-width: calc(100% - 28px) !important;
  object-fit: contain !important;
  margin: 3px auto 8px auto !important;
  display: block !important;
}

@media (max-width: 768px) {
  .payment-popup .pop-over-inner,
  #pay-now-pop-over {
    width: 95vw !important;
    min-width: 0 !important;
  }
  .heading-tab-wrapper .payment-options-row,
  .tab-heading.payment-options-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .payment-method-tile {
    flex-direction: row !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 12px 14px !important;
    min-height: 68px !important;
  }
  .payment-method-tile img {
    margin: 0 14px 0 0 !important;
    max-width: 100px !important;
    height: 22px !important;
  }
  .payment-method-tile .pmt-radio {
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* 4-ROW ALIGNED BANK DETAILS & COPY BUTTONS */
.bank-details-card {
  background: #ffffff !important;
  border: 1px solid #d1fae5 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
  box-sizing: border-box !important;
}

.bank-detail-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 14px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  box-sizing: border-box !important;
}

.bank-detail-row.bank-account-row {
  background: #f0fdf4 !important;
  border: 1.5px dashed #10b981 !important;
  margin-bottom: 0 !important;
}

.bank-detail-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  text-align: left !important;
}

.bank-detail-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: block !important;
  line-height: 1.2 !important;
}

.bank-account-row .bank-detail-label {
  color: #047857 !important;
  font-weight: 800 !important;
}

.bank-detail-value {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
  display: block !important;
}

.bank-account-row .bank-detail-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: 16.5px !important;
  font-weight: 800 !important;
  color: #059669 !important;
  letter-spacing: 1px !important;
}

.bank-copy-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 76px !important;
  min-width: 76px !important;
  height: 32px !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  text-align: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.bank-copy-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

.bank-copy-btn.copied {
  background: #059669 !important;
  color: #ffffff !important;
  border-color: #059669 !important;
}

/* DYNAMIC GATEWAY CHARGES ROW AT CHECKOUT SIDEBAR */
.gateway-fee-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 10px !important;
  animation: fadeIn 0.2s ease !important;
}

.gateway-fee-row h5 {
  margin: 0 !important;
  font-size: 14px !important;
}

.gateway-fee-row .gateway-fee-title {
  color: #475569 !important;
  font-weight: 500 !important;
}

.gateway-fee-row .gateway-fee-amount {
  color: #0f172a !important;
  font-weight: 700 !important;
}



/* ==============================================================
   5 CUSTOMER REQUEST FIXES (SS1 - SS5)
   ============================================================== */

/* 1. ORDER STATUS STEPPER REMOVAL (1st SS) */
.order-status,
.order-details .order-status,
.order-status-wrapper,
.mb-15 > .order-status {
  display: none !important;
}

/* 3. EMPTY CART CHECKOUT HIDE (3rd SS) */
.cart-empty-hide-checkout .checkout-detail .detail-right {
  display: none !important;
}

/* 4. DETAILS DROPDOWN ARROW REMOVAL (4th SS) */
.detail-right button[data-ignore="price-pop-over"] i.icon,
button[data-ignore="price-pop-over"] i.icon,
button[data-ignore="price-pop-over"] .arrow-down,
button[data-ignore="price-pop-over"] .arrow-up {
  display: none !important;
}

/* 5. CART ITEM ROW KOKO BADGE REMOVAL (5th SS) */
.checkout-detail .koko-tile-installment,
.cart-product-tile .koko-tile-installment,
.cart-item .koko-tile-installment,
.detail-left .koko-tile-installment {
  display: none !important;
}


/* ==============================================================
   PROFESSIONAL MOBILE & UI ENHANCEMENTS (SS1 - SS5)
   ============================================================== */

/* --- 2nd SS: COUNTRY LOCKED TO SRI LANKA IN ADDRESS MODAL --- */
.address-form .input-wrap:first-child .custom-dropdown,
.address-popup .input-wrap:first-child .custom-dropdown {
  pointer-events: none !important;
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  opacity: 0.95 !important;
  cursor: default !important;
}
.address-form .input-wrap:first-child .custom-dropdown i.icon,
.address-popup .input-wrap:first-child .custom-dropdown i.icon {
  display: none !important;
}

/* --- 3rd SS: CART PRODUCT TILE MOBILE ALIGNMENT --- */
@media only screen and (max-width: 768px) {
  .cart-product-tile,
  .cart-item {
    padding: 14px 10px !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }

  .cart-product-tile .content-wrap,
  .cart-item .content-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Cart product title */
  .cart-product-tile .content-wrap h5,
  .cart-item .content-wrap h5 {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #1e293b !important;
    margin: 0 !important;
  }

  /* Action row: Quantity & Delete aligned neatly */
  .cart-product-tile .flex.gap-10.start.wrap,
  .cart-item .flex.gap-10.start.wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 6px 0 0 0 !important;
    width: 100% !important;
  }

  .cart-product-tile .quantity-area,
  .cart-item .quantity-area {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    height: 34px !important;
    margin: 0 !important;
  }

  .cart-product-tile .quantity-area button,
  .cart-item .quantity-area button {
    width: 32px !important;
    height: 34px !important;
    background: #f8fafc !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .cart-product-tile .quantity-area .no-control,
  .cart-item .quantity-area .no-control {
    width: 36px !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
  }

  /* Delete action button */
  .cart-product-tile button.outline-btn,
  .cart-item button.outline-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 34px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    background: #fff1f2 !important;
    color: #e11d48 !important;
    border: 1px solid #fecdd3 !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
  }

  /* Price line */
  .cart-product-tile .right-text,
  .cart-item .right-text {
    width: 100% !important;
    margin-top: 6px !important;
    text-align: left !important;
  }

  .cart-product-tile .right-text h5.price,
  .cart-item .right-text h5.price {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
  }
}

/* --- 4th SS: PROFESSIONAL CENTERED MOBILE CHECKOUT CARD --- */
@media only screen and (max-width: 768px) {
  .checkout-detail .detail-right {
    margin: 20px auto 16px auto !important;
    max-width: calc(100% - 24px) !important;
    width: calc(100% - 24px) !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    background: #ffffff !important;
    padding: 18px 16px !important;
    clear: both !important;
  }

  .checkout-detail .detail-right > div:first-child {
    width: 100% !important;
  }

  /* Checkout card header */
  .checkout-detail .detail-right h5:first-child,
  .checkout-detail .detail-right .b-b h5 {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-align: center !important;
    padding-bottom: 12px !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.2px !important;
  }

  /* Summary rows (Subtotal, Shipping, Total) */
  .checkout-detail .detail-right .flex.sided {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 7px 0 !important;
    font-size: 14px !important;
  }

  .checkout-detail .detail-right .flex.sided h5 {
    font-size: 14px !important;
    margin: 0 !important;
  }

  /* Total row */
  .checkout-detail .detail-right .flex.sided.bold,
  .checkout-detail .detail-right .flex.sided:has(h4),
  .checkout-detail .detail-right .flex.sided.pb-5 {
    border-top: 1px dashed #cbd5e1 !important;
    margin-top: 6px !important;
    padding-top: 10px !important;
  }

  .checkout-detail .detail-right .flex.sided.bold h5,
  .checkout-detail .detail-right .flex.sided.pb-5 h4 {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
  }

  /* Proceed button */
  .checkout-detail .detail-right button.btn.primary-btn,
  .checkout-detail .detail-right button.primary-btn {
    width: 100% !important;
    height: 44px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    background: #e11d48 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.28) !important;
    cursor: pointer !important;
    margin-top: 14px !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
    text-align: center !important;
  }

  .checkout-detail .detail-right button.primary-btn:active {
    transform: scale(0.98) !important;
  }
}

/* --- 5th SS: PAYMENT METHOD CARDS - FIX RADIO OVERLAPPING & STACK LABELS --- */
.payment-method-tile {
  position: relative !important;
}

@media only screen and (max-width: 768px) {
  .tab-heading.payment-options-row,
  .heading-tab-wrapper .payment-options-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  .payment-method-tile {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 12px 48px 12px 14px !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    position: relative !important;
    gap: 12px !important;
    text-align: left !important;
  }

  .payment-method-tile img {
    flex-shrink: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: 85px !important;
    height: 22px !important;
    object-fit: contain !important;
  }

  /* Vertical container for Title and Subtitle */
  .payment-method-tile .pmt-text-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .payment-method-tile .pmt-title {
    display: block !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #1e293b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .payment-method-tile.active .pmt-title {
    color: #1d4ed8 !important;
  }

  .payment-method-tile .pmt-sub {
    display: block !important;
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    color: #64748b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Radio button strictly aligned on far right */
  .payment-method-tile .pmt-radio {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    z-index: 5 !important;
  }
}


/* ==============================================================
   ROUND 3 ENHANCEMENTS (ITEMS 1 - 4)
   ============================================================== */

/* --- 1. COUPON CODE INPUT & APPLY BUTTON OVERLAP FIX (1st SS) --- */
.btn-input,
.checkout-detail .detail-right .btn-input {
  display: flex !important;
  position: relative !important;
  width: 100% !important;
  align-items: center !important;
  box-sizing: border-box !important;
  margin-top: 14px !important;
}

.btn-input input,
.checkout-detail .detail-right .btn-input input {
  width: 100% !important;
  height: 44px !important;
  padding: 0 92px 0 14px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  background: #ffffff !important;
  outline: none !important;
  transition: border-color 0.15s ease !important;
}

.btn-input input:focus,
.checkout-detail .detail-right .btn-input input:focus {
  border-color: #2563eb !important;
}

.btn-input button.primary-btn,
.checkout-detail .detail-right .btn-input button.primary-btn {
  position: absolute !important;
  right: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  min-width: 78px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: #e11d48 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3 !important;
}

/* --- 2. HIDE CATEGORIES IN LIVE SEARCH POPUP (2nd SS) --- */
.search-popup .category-wrapper,
.search-popup div:has(.category-wrapper) {
  display: none !important;
}

/* --- 3. SORT BY & FILTER TOOLBAR (Screenshot 1 Desktop Alignment & Screenshot 2 Mobile Dropdown Fix) --- */

/* Mobile view: max-width 768px */
@media only screen and (max-width: 768px) {
  .detail-menu {
    overflow: visible !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 6px 0 !important;
  }
  .detail-menu .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .detail-menu .list-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 4px 0 !important;
    gap: 10px !important;
  }
  .detail-menu .list-heading .gap-5 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    height: 44px !important;
    gap: 10px !important;
  }
  /* Hide text label "Sort by" on mobile so cards fit side-by-side */
  .detail-menu .list-heading .gap-5 > span.hide-sm,
  .detail-menu .list-heading .gap-5 > span:first-child:not(.sort-dropdown):not(.filter-btn) {
    display: none !important;
  }
  /* Left button: Featured dropdown card (Screenshot 2 Mobile) */
  .detail-menu .sort-dropdown,
  .sort-dropdown {
    position: relative !important;
    flex: 1 1 auto !important;
    max-width: 160px !important;
    min-width: 120px !important;
    overflow: visible !important;
  }
  .detail-menu .sort-dropdown > span,
  .sort-dropdown > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    box-sizing: border-box !important;
  }
  /* Right button: Filter card */
  .detail-menu .filter-btn {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    padding: 0 20px !important;
    height: 42px !important;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    box-sizing: border-box !important;
    gap: 6px !important;
  }

  /* Screenshot 2 Fix: Prevent dropdown options getting stuck at bottom of screen */
  .sort-dropdown .dropdown-wrapper {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 220px !important;
    max-width: 85vw !important;
    height: auto !important;
    z-index: 999999 !important;
    display: block !important;
    overflow: visible !important;
    transform: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .sort-dropdown .dropdown-wrapper .layer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.35) !important;
    z-index: 999990 !important;
    display: block !important;
    backdrop-filter: blur(2px) !important;
  }

  .sort-dropdown .dropdown-inner,
  .sort-dropdown .dropdown-wrapper .dropdown-inner {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 200px !important;
    max-width: 260px !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    z-index: 999999 !important;
    padding: 6px !important;
    overflow: hidden !important;
    display: block !important;
  }

  .sort-dropdown .dropdown-inner ul,
  .sort-dropdown .dropdown-wrapper ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
  }

  .sort-dropdown .dropdown-inner ul li,
  .sort-dropdown .dropdown-wrapper ul li {
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    white-space: nowrap !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    margin-bottom: 2px !important;
  }

  .sort-dropdown .dropdown-inner ul li:last-child,
  .sort-dropdown .dropdown-wrapper ul li:last-child {
    margin-bottom: 0 !important;
  }

  .sort-dropdown .dropdown-inner ul li.active,
  .sort-dropdown .dropdown-wrapper ul li.active {
    background: #f1f5f9 !important;
    color: #e11d48 !important;
    font-weight: 700 !important;
  }

  .sort-dropdown .dropdown-inner ul li:hover,
  .sort-dropdown .dropdown-inner ul li:active,
  .sort-dropdown .dropdown-wrapper ul li:hover,
  .sort-dropdown .dropdown-wrapper ul li:active {
    background: #f8fafc !important;
    color: #0f172a !important;
  }
}

/* Desktop view: min-width 769px (Screenshot 1 Alignment) */
@media screen and (min-width: 769px) {
  .detail-menu {
    overflow: visible !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 0 !important;
  }
  .detail-menu .container-fluid {
    max-width: 1470px !important;
    margin: 0 auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }
  .detail-menu .list-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 6px 0 !important;
    box-sizing: border-box !important;
  }
  .detail-menu .list-heading > p {
    margin: 0 !important;
    font-size: 14px !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: normal !important;
  }
  .detail-menu .list-heading .gap-5 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    width: auto !important;
    margin: 0 !important;
  }
  .detail-menu .list-heading .gap-5 > span {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    line-height: normal !important;
    margin: 0 !important;
  }
  .detail-menu .sort-dropdown,
  .sort-dropdown {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    min-width: 145px !important;
    width: auto !important;
    overflow: visible !important;
    margin: 0 !important;
  }
  .sort-dropdown > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    box-sizing: border-box !important;
    gap: 10px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
  }
  .sort-dropdown > span:hover {
    border-color: #94a3b8 !important;
    background: #f8fafc !important;
  }
  .sort-dropdown.open > span {
    border-color: #2b7a4b !important;
    box-shadow: 0 0 0 2px rgba(43, 122, 75, 0.15) !important;
  }
  .sort-dropdown .dropdown-wrapper {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    min-width: 180px !important;
    z-index: 99999 !important;
    background: transparent !important;
    transform: none !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  .sort-dropdown .dropdown-inner {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    min-width: 180px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
    padding: 6px 4px !important;
    overflow: hidden !important;
  }
  .sort-dropdown .dropdown-inner ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .sort-dropdown .dropdown-inner ul li {
    padding: 8px 16px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
  }
  .sort-dropdown .dropdown-inner ul li:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
  }
  .sort-dropdown .dropdown-inner ul li.active {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
  }
}

/* --- 4a. PRICE FILTER INPUTS COMPACT & NO RED GLOW (1st & 2nd SS) --- */
.price-search {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  max-width: 250px !important;
  width: auto !important;
  box-sizing: border-box !important;
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

.price-search .input-wrap {
  flex: 0 0 85px !important;
  width: 85px !important;
  max-width: 85px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.price-search .input-wrap .input-text {
  display: flex !important;
  align-items: center !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  height: 36px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow: none !important;
}

.price-search .input-wrap .input-text:focus-within {
  border-color: #64748b !important;
  box-shadow: 0 0 0 1px #64748b !important;
  outline: none !important;
}

.price-search .input-wrap .input-text > span {
  padding: 0 6px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  background: #f1f5f9 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-right: 1px solid #cbd5e1 !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}

.price-search .input-wrap input,
.price-search .input-wrap input:focus,
.price-search .input-wrap input:active {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  background: transparent !important;
  text-align: left !important;
  -webkit-appearance: none !important;
}

/* Remove number spinner buttons */
.price-search input::-webkit-outer-spin-button,
.price-search input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.price-search input[type=number] {
  -moz-appearance: textfield !important;
}

.price-search button.outline-btn {
  flex: 0 0 auto !important;
  height: 36px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  border: 1.5px solid #cbd5e1 !important;
  background: #f8fafc !important;
  color: #1e293b !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
  outline: none !important;
}

.price-search button.outline-btn:hover {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
}

/* --- 4b. REMOVE RED GLOW ON BRAND CHECKBOX CLICK/UNCLICK --- */
.sidebar input[type="checkbox"],
.sidebar input[type="checkbox"]:focus,
.sidebar input[type="checkbox"]:active,
.sidebar input[type="checkbox"]:focus-visible,
input[type="checkbox"]:focus,
input[type="checkbox"]:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: #cbd5e1 !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* --- 4c. REMOVE COLLECTIONS FROM FILTER SIDEBAR --- */
.filter-collection,
.sidebar .sidebar-section:has(.filter-collection),
.sidebar div:has(> .filter-collection) {
  display: none !important;
}

/* --- 5. BRANDS PAGE LOGOS DISPLAY (5th SS) --- */
/* --- 5. BRANDS PAGE LOGOS DISPLAY (LARGE & PROMINENT) --- */
.category-tile-wrapper .category-tile a[href*="/brand"],
.category-tile-wrapper .category-tile a.brand-tile-link,
a.brand-tile-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 185px !important;
  padding: 18px 14px 14px 14px !important;
  background: #ffffff !important;
  border: 1.5px solid #edf0f5 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.category-tile-wrapper .category-tile a[href*="/brand"]:hover,
.category-tile-wrapper .category-tile a.brand-tile-link:hover,
a.brand-tile-link:hover {
  border-color: #2b7a4b !important;
  background: #f7fbf8 !important;
  box-shadow: 0 6px 18px rgba(43, 122, 75, 0.12) !important;
  transform: translateY(-3px) !important;
}

.category-tile-wrapper .category-tile .img-wrapper,
.category-tile-wrapper .category-tile a[href*="/brand"] .img-wrapper,
.category-tile-wrapper .category-tile a.brand-tile-link .img-wrapper,
.brand-img-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 115px !important;
  min-height: 115px !important;
  margin-bottom: 12px !important;
  background: transparent !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.category-tile-wrapper .category-tile .img-wrapper img,
.category-tile-wrapper .category-tile a[href*="/brand"] .img-wrapper img,
.category-tile-wrapper .category-tile a.brand-tile-link .img-wrapper img,
.brand-img-wrapper img {
  height: 95px !important;
  max-height: 100px !important;
  max-width: 88% !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  transition: transform 0.2s ease !important;
}

.category-tile-wrapper .category-tile a[href*="/brand"]:hover img,
.category-tile-wrapper .category-tile a.brand-tile-link:hover img {
  transform: scale(1.08) !important;
}

.category-tile-wrapper .category-tile a[href*="/brand"] h5.item-title,
.category-tile-wrapper .category-tile a.brand-tile-link h5.item-title {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

/* --- 6. TOAST NOTIFICATION MOBILE VISIBILITY & WRAPPING --- */
.toast-message {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: calc(85px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 99999999 !important;
  background: #1e293b !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  text-align: center !important;
  width: auto !important;
  max-width: min(92vw, 420px) !important;
  min-width: 250px !important;
  box-sizing: border-box !important;
  display: block !important;
  line-height: 1.45 !important;
  pointer-events: auto !important;
}

@media only screen and (max-width: 768px) {
  .toast-message {
    bottom: calc(85px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 11px 18px !important;
    font-size: 13px !important;
    max-width: min(92vw, 390px) !important;
  }
}

.toast-message.error-toast,
.toast-message.error {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.toast-message.error-toast span,
.toast-message.error span {
  font-weight: 800 !important;
  margin-right: 6px !important;
}

/* ============================================================
   PROFESSIONAL FOOTER DESIGN SYSTEM (DESKTOP & MOBILE)
   ============================================================ */

/* 1. TOP CREST AREA */
footer .top-area {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  background: #ffffff !important;
}

footer .top-area .ptb-15 {
  padding-top: 24px !important;
  padding-bottom: 12px !important;
  margin-top: 0 !important;
  border-top: none !important;
}

footer .top-area .logo img {
  height: 44px !important;
  width: auto !important;
  margin: 0 auto !important;
  display: block !important;
  object-fit: contain !important;
}

/* 2. BOTTOM AREA WRAPPER */
footer .bottom-area {
  background: #ffffff !important;
  border-top: 1px solid #eef2f6 !important;
  padding: 44px 0 28px 0 !important;
}

footer .bottom-area .container {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
}

/* 3. DESKTOP 4-COLUMN GRID (>= 769px) */
@media only screen and (min-width: 769px) {
  footer .bottom-area .row {
    display: grid !important;
    grid-template-columns: 1fr 1.15fr 1.4fr 1.1fr !important;
    gap: 44px !important;
    align-items: start !important;
    margin: 0 !important;
  }

  footer .bottom-area .col-lg-3,
  footer .bottom-area .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Headings (Clean, subtle uppercase - NO RED UNDERLINE) */
  footer .bottom-area h4.bold {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    border: none !important;
    display: block !important;
    line-height: 1.2 !important;
  }

  /* Navigation Links (Services & About) */
  footer .bottom-area .col-lg-3:nth-child(1) a,
  footer .bottom-area .col-lg-3:nth-child(2) a {
    display: block !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  footer .bottom-area .col-lg-3:nth-child(1) a:hover,
  footer .bottom-area .col-lg-3:nth-child(2) a:hover {
    color: #e51a24 !important;
    transform: translateX(3px) !important;
  }

  /* Payment Badges (Clean 3x2 Grid) */
  footer .payment-icons {
    display: grid !important;
    grid-template-columns: repeat(3, 68px) !important;
    gap: 8px !important;
    margin-top: 2px !important;
  }

  footer .payment-icons a {
    width: 68px !important;
    height: 36px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 6px !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
  }

  footer .payment-icons a:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-2px) !important;
  }

  footer .payment-icons a img {
    max-width: 50px !important;
    max-height: 20px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Social Links (Clean Vertical Stack with Icons) */
  footer .bottom-area .col-lg-3:last-child a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    padding: 5px 0 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  footer .bottom-area .col-lg-3:last-child a:hover {
    color: #0f172a !important;
    transform: translateX(3px) !important;
  }

  footer .bottom-area .col-lg-3:last-child a img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
  }
}

/* 4. MOBILE LAYOUT (< 768px) */
@media only screen and (max-width: 768px) {
  footer .bottom-area {
    padding: 32px 20px 48px 20px !important; /* Safe 20px edge margins + 48px bottom buffer for floating WhatsApp button */
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
  }

  footer .bottom-area .container {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  footer .bottom-area .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
  }

  /* Columns 1 & 2: Services and About as Side-by-Side balanced 2-column grid */
  footer .bottom-area .col-lg-3:nth-child(1),
  footer .bottom-area .col-lg-3:nth-child(2) {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    padding: 0 12px 0 0 !important;
    margin: 0 0 24px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
  }

  footer .bottom-area .col-lg-3:nth-child(2) {
    padding: 0 0 0 12px !important;
  }

  /* Headings for Services and About (Clean uppercase, NO RED UNDERLINE) */
  footer .bottom-area .col-lg-3:nth-child(1) h4.bold,
  footer .bottom-area .col-lg-3:nth-child(2) h4.bold {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    border: none !important;
    display: block !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  /* Links under Services & About */
  footer .bottom-area .col-lg-3:nth-child(1) a,
  footer .bottom-area .col-lg-3:nth-child(2) a {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  footer .bottom-area .col-lg-3:nth-child(1) a:hover,
  footer .bottom-area .col-lg-3:nth-child(2) a:hover {
    color: #e51a24 !important;
  }

  /* Column 3: PAYMENT (Centered with clean top divider) */
  footer .bottom-area .col-lg-3.payment {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 6px 0 20px 0 !important;
    padding: 22px 0 0 0 !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  footer .bottom-area .col-lg-3.payment h4.bold {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    margin: 0 0 14px 0 !important;
    text-align: center !important;
    display: block !important;
    border: none !important;
    padding: 0 !important;
  }

  /* Payment cards on Mobile: Symmetrical 3x2 Grid */
  footer .payment-icons {
    display: grid !important;
    grid-template-columns: repeat(3, 72px) !important;
    gap: 8px !important;
    margin: 0 auto !important;
    justify-content: center !important;
  }

  footer .payment-icons a {
    width: 72px !important;
    height: 36px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 6px !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    margin: 0 !important;
  }

  footer .payment-icons a img {
    max-width: 52px !important;
    max-height: 20px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Column 4: SOCIAL (Centered full width) */
  footer .bottom-area .col-lg-3:last-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 20px 0 0 0 !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  footer .bottom-area .col-lg-3:last-child h4.bold {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    margin: 0 0 14px 0 !important;
    text-align: center !important;
    display: block !important;
    border: none !important;
    padding: 0 !important;
  }

  /* Social Channels: Centered Sleek Badges */
  footer .bottom-area .col-lg-3:last-child a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 16px !important;
    margin: 4px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    text-decoration: none !important;
  }

  footer .bottom-area .col-lg-3:last-child a img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
  }
}

/* 5. COPYRIGHT & DEVELOPER LINK */
footer .bottom-area p.ptb-15,
footer .bottom-area p.center-text {
  text-align: center !important;
  font-size: 12.5px !important;
  color: #94a3b8 !important;
  margin: 20px 0 0 0 !important;
  padding: 16px 0 0 0 !important;
  border-top: 1px solid #f1f5f9 !important;
  width: 100% !important;
  line-height: 1.6 !important;
}

footer .bottom-area a[href*="sosmoo"],
footer [class*="sosmoo"],
footer [class*="developer"] a {
  color: #94a3b8 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  opacity: 0.8 !important;
  transition: opacity 0.2s ease !important;
}

footer .bottom-area a[href*="sosmoo"]:hover {
  opacity: 1 !important;
  color: #64748b !important;
  text-decoration: none !important;
}

/* ==============================================================
   TRACK ORDER CARD & WAYBILL NUMBER ENHANCEMENT
   ============================================================== */
.it-top-grid {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: 20px !important;
  align-items: stretch !important;
}
@media (max-width: 850px) {
  .it-top-grid {
    grid-template-columns: 1fr !important;
  }
}
.it-wb-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 10px !important;
}
.it-wb-hdr {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}
.it-wb-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #374151 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 0 !important;
}
.it-change-btn {
  background: #e51a24 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}
.it-change-btn:hover {
  background: #c7141d !important;
  transform: translateY(-1px) !important;
}
.it-wb-row {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}
.it-wb-pill {
  width: 100% !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.it-wb-pill.is-pending {
  background: #fffbeb !important;
  border: 1.5px dashed #f59e0b !important;
  color: #b45309 !important;
}
.it-wb-pill.is-linked {
  background: #f0fdf4 !important;
  border: 1.5px solid #86efac !important;
  color: #15803d !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}
.it-meta-wb.wb-pending {
  color: #b45309 !important;
  font-weight: 600 !important;
  background: #fffbeb !important;
  border: 1px dashed #f59e0b !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 12.5px !important;
}
.it-meta-wb.wb-linked {
  color: #16a34a !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   PERFECT ALIGNMENT & CENTERING FOR PAYMENT MODAL BUTTONS (Screenshot 3)
   ========================================================================== */
.payment-popup .primary-btn,
.payment-popup .ajax-btn,
#pay-now-pop-over .primary-btn,
#pay-now-pop-over .ajax-btn,
.pay-now-wrapper .primary-btn,
.pay-now-wrapper .ajax-btn,
button.primary-btn.plr-30,
button.primary-btn.plr-sm-15 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 20px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: normal !important;
  text-align: center !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  margin: 16px 0 0 0 !important;
  vertical-align: middle !important;
  overflow: hidden !important;
}

.payment-popup .primary-btn span,
.payment-popup .ajax-btn span,
#pay-now-pop-over .primary-btn span,
#pay-now-pop-over .ajax-btn span,
.pay-now-wrapper .primary-btn span,
.pay-now-wrapper .ajax-btn span,
button.primary-btn.plr-30 span,
button.primary-btn.plr-sm-15 span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  line-height: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  text-align: center !important;
}

/* Account sidebar: Refund tracking system link (Screenshot 2 / Screenshot 4) */
@media only screen and (min-width: 769px) {
  .order-wrapper .left-sidebar li#desktop-refund-tracking-li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .order-wrapper .left-sidebar li#desktop-refund-tracking-li a,
  .left-sidebar li#desktop-refund-tracking-li a,
  .desktop-refund-link {
    display: block !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    font-weight: 400 !important;
    color: #212529 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    line-height: inherit !important;
    transition: color 0.2s ease !important;
  }
  .order-wrapper .left-sidebar li#desktop-refund-tracking-li a:hover,
  .left-sidebar li#desktop-refund-tracking-li a:hover,
  .desktop-refund-link:hover {
    background: transparent !important;
    color: var(--primary-color, #e51a24) !important;
  }
}

@media only screen and (max-width: 768px) {
  .order-wrapper .left-sidebar li#desktop-refund-tracking-li {
    flex-shrink: 0 !important;
    display: inline-block !important;
    margin: 0 !important;
  }
  .order-wrapper .left-sidebar li#desktop-refund-tracking-li a,
  .left-sidebar li#desktop-refund-tracking-li a,
  .desktop-refund-link {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 16px !important;
    border-radius: 9999px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: 1px solid #cbd5e1 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
  }
  .order-wrapper .left-sidebar li#desktop-refund-tracking-li a:hover,
  .left-sidebar li#desktop-refund-tracking-li a:hover,
  .desktop-refund-link:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
  }
}

/* === SCREENSHOTS 1, 2, 3 ALIGNMENT FIXES === */

/* ==========================================================================
   DESKTOP FEATURED BOX & TOOLBAR ALIGNMENT (SCREENSHOT 1)
   ========================================================================== */
.detail-menu {
  overflow: visible !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  min-height: 52px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.detail-menu .container-fluid {
  max-width: 1470px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.detail-menu .list-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.detail-menu .list-heading > p {
  margin: 0 !important;
  font-size: 14px !important;
  color: #475569 !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: normal !important;
}

.detail-menu .list-heading .gap-5,
.detail-menu .list-heading > div.flex {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.detail-menu .list-heading .gap-5 > span {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  line-height: normal !important;
  margin: 0 !important;
}

.detail-menu .sort-dropdown,
.sort-dropdown {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  min-width: 145px !important;
  width: auto !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sort-dropdown > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 14px !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  box-sizing: border-box !important;
  gap: 10px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  line-height: normal !important;
  margin: 0 !important;
  transition: all 0.2s ease !important;
}

.sort-dropdown > span:hover {
  border-color: #94a3b8 !important;
  background: #f8fafc !important;
}

.sort-dropdown.open > span {
  border-color: #e11d48 !important;
  box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.15) !important;
}

/* ==========================================================================
   MODAL POPUP ACTION BUTTONS & FOOTER ALIGNMENT (SCREENSHOTS 2 & 3)
   Applies globally across Desktop & Mobile for Address Popup, Cancel Order Popup, etc.
   ========================================================================== */
.pop-footer,
.pop-over .pop-footer,
.address-popup .pop-footer,
.cancel-popup .pop-footer,
.rating-popup .pop-footer,
.pop-over-inner .pop-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  padding: 14px 20px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.pop-footer .flex.j-end,
.pop-footer .flex.j-end.gap-10,
.pop-footer > .flex,
.pop-footer > div {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 1. OUTLINE / CANCEL BUTTON (Sleek, modern, matching 42px height & 10px border-radius) */
.pop-footer button.outline-btn,
.pop-footer .outline-btn,
.pop-footer button:not(.primary-btn):not(.ajax-btn):not([type="submit"]),
.address-popup .pop-footer .outline-btn,
.cancel-popup .pop-footer .outline-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  line-height: normal !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  text-transform: none !important;
  transition: all 0.15s ease !important;
}

.pop-footer button.outline-btn:hover,
.pop-footer .outline-btn:hover,
.address-popup .pop-footer .outline-btn:hover,
.cancel-popup .pop-footer .outline-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* 2. PRIMARY / SAVE / SEND MESSAGE BUTTON (Matching 42px height & 10px radius, vibrant red) */
.pop-footer button.primary-btn,
.pop-footer .primary-btn,
.pop-footer .ajax-btn,
.pop-footer .ajax-btn.primary-btn,
.pop-footer input[type="submit"],
.address-popup .pop-footer .primary-btn,
.cancel-popup .pop-footer .primary-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 28px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  background: #e11d48 !important;
  color: #ffffff !important;
  border: 1.5px solid #e11d48 !important;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.25) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  line-height: normal !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  text-transform: none !important;
  transition: all 0.15s ease !important;
}

.pop-footer button.primary-btn:hover,
.pop-footer .primary-btn:hover,
.pop-footer .ajax-btn.primary-btn:hover,
.address-popup .pop-footer .primary-btn:hover,
.cancel-popup .pop-footer .primary-btn:hover {
  background: #be123c !important;
  border-color: #be123c !important;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35) !important;
}


/* === LATEST 4 USER REQUEST FIXES (SS1 - SS4) === */

/* ==========================================================================
   4 USER REQUEST FIXES (SS1 - SS4)
   ========================================================================== */

/* --- 1. MOBILE SORT DROPDOWN FIT TEXT INSIDE BOX (SCREENSHOT 1) --- */
@media only screen and (max-width: 768px) {
  .detail-menu .list-heading .gap-5 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .detail-menu .sort-dropdown,
  .sort-dropdown {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .detail-menu .sort-dropdown > span,
  .sort-dropdown > span {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 10px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: normal !important;
    box-sizing: border-box !important;
    gap: 6px !important;
  }

  .sort-dropdown > span > i.icon {
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  .sort-dropdown .dd-selected-label,
  .custom-dropdown .dd-selected-label {
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
    line-height: normal !important;
  }

  .detail-menu .filter-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 0 16px !important;
    height: 42px !important;
    min-height: 42px !important;
    font-size: 13px !important;
    gap: 6px !important;
  }
}

/* --- 2. CHECKOUT GATEWAY CHARGES ALIGNMENT (SCREENSHOT 2) --- */
.gateway-fee-row,
.detail-right .gateway-fee-row,
.checkout-detail .gateway-fee-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding-bottom: 10px !important;
}

.gateway-fee-row > h5:first-child,
.gateway-fee-row .fw-400 {
  font-size: 13px !important;
  color: #475569 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: normal !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
}

.gateway-fee-row > h5.price,
.gateway-fee-row .price {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  text-align: right !important;
}

@media only screen and (max-width: 576px) {
  .gateway-fee-row > h5:first-child,
  .gateway-fee-row .fw-400 {
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .gateway-fee-row > h5.price,
  .gateway-fee-row .price {
    font-size: 13px !important;
    white-space: nowrap !important;
  }
}

/* --- 3. REMOVE 'FROM LOCATION (RS.475)' RADIO BUTTON (SCREENSHOT 3) --- */
.cart-product-tile .rd-container:has(input[name*="_type"]),
.cart-product-tile input[name*="_type"],
.cart-product-tile input[name^="shipping_"],
.cart-product-tile label.rd-container,
label.rd-container:has(input[name*="shipping_"]),
.cart-product-tile .mr-15.cp.rd-container,
.cart-product-tile div:has(> label > input[name*="shipping_"]) {
  display: none !important;
}

/* --- 4. PROFESSIONAL FOOTER DESIGN IN DESKTOP & MOBILE (SCREENSHOT 4) --- */
footer .top-area,
footer .top-area .container,
footer .table-tree,
footer .table-tree * {
  display: none !important;
}

footer,
footer.link-hover {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  display: block !important;
  width: 100% !important;
  margin-top: 40px !important;
}

footer .bottom-area {
  background: transparent !important;
  border: none !important;
  padding: 50px 0 24px 0 !important;
  width: 100% !important;
}

footer .bottom-area .container {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

/* Desktop 4-column layout */
@media only screen and (min-width: 769px) {
  footer .bottom-area .row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1.35fr 1fr !important;
    gap: 40px !important;
    align-items: start !important;
    margin: 0 !important;
  }

  footer .bottom-area .col-lg-3,
  footer .bottom-area .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Headings */
  footer .bottom-area h4.bold {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    border: none !important;
    display: block !important;
    line-height: 1.2 !important;
  }

  /* Navigation Links */
  footer .bottom-area .col-lg-3:nth-child(1) a,
  footer .bottom-area .col-lg-3:nth-child(2) a {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  footer .bottom-area .col-lg-3:nth-child(1) a:hover,
  footer .bottom-area .col-lg-3:nth-child(2) a:hover {
    color: #e11d48 !important;
    transform: translateX(4px) !important;
    font-weight: 600 !important;
  }

  /* Payment Badges */
  footer .payment-icons {
    display: grid !important;
    grid-template-columns: repeat(3, 76px) !important;
    gap: 10px !important;
    margin-top: 2px !important;
  }

  footer .payment-icons a {
    width: 76px !important;
    height: 42px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 8px !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
  }

  footer .payment-icons a:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px) !important;
  }

  footer .payment-icons a img {
    max-width: 58px !important;
    max-height: 24px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Social Links */
  footer .bottom-area .col-lg-3:last-child a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    padding: 7px 0 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
  }

  footer .bottom-area .col-lg-3:last-child a:hover {
    color: #0f172a !important;
    transform: translateX(4px) !important;
    font-weight: 600 !important;
  }

  footer .bottom-area .col-lg-3:last-child a img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    border-radius: 5px !important;
    flex-shrink: 0 !important;
  }
}

/* Mobile Layout (< 768px) */
@media only screen and (max-width: 768px) {
  footer .bottom-area {
    padding: 36px 16px 50px 16px !important;
  }

  footer .bottom-area .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
  }

  /* 2-Column Grid for Services & About */
  footer .bottom-area .col-lg-3:nth-child(1),
  footer .bottom-area .col-lg-3:nth-child(2) {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    padding: 0 8px 0 0 !important;
    margin: 0 0 28px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
  }

  footer .bottom-area .col-lg-3:nth-child(2) {
    padding: 0 0 0 12px !important;
  }

  footer .bottom-area .col-lg-3:nth-child(1) h4.bold,
  footer .bottom-area .col-lg-3:nth-child(2) h4.bold,
  footer .bottom-area .col-lg-3.payment h4.bold,
  footer .bottom-area .col-lg-3:last-child h4.bold {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    margin-bottom: 14px !important;
  }

  footer .bottom-area .col-lg-3:nth-child(1) a,
  footer .bottom-area .col-lg-3:nth-child(2) a {
    display: inline-flex !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    padding: 5px 0 !important;
    text-decoration: none !important;
  }

  /* Payment Badges full width */
  footer .bottom-area .col-lg-3.payment {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
  }

  footer .bottom-area .col-lg-3.payment .payment-icons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
  }

  footer .bottom-area .col-lg-3.payment .payment-icons a {
    width: 64px !important;
    height: 38px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px 4px !important;
  }

  footer .bottom-area .col-lg-3.payment .payment-icons a img {
    max-width: 50px !important;
    max-height: 22px !important;
    object-fit: contain !important;
  }

  /* Social links row */
  footer .bottom-area .col-lg-3:last-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
  }

  footer .bottom-area .col-lg-3:last-child a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    padding: 5px 0 !important;
    margin-right: 18px !important;
  }

  footer .bottom-area .col-lg-3:last-child a img {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Bottom Copyright Bar */
footer .bottom-area p.ptb-15,
footer .bottom-area p.center-text,
footer .bottom-area .b-t {
  border-top: 1px solid #e2e8f0 !important;
  padding: 20px 0 8px 0 !important;
  margin-top: 30px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #64748b !important;
}

footer .bottom-area a[href*="sosmoo"],
footer [class*="sosmoo"],
footer [class*="developer"] a {
  color: #94a3b8 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
}

/* ============================================================
   PRODUCT SPECIFICATIONS TABLE (Screenshot 5 Alignment)
   Neatly aligns Origin, Category, Suitability, Net Content, Quality in order
   ============================================================ */
.italivo-spec-table {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin: 18px 0 24px 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.italivo-spec-row {
  display: flex !important;
  align-items: center !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid #edf2f7 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  background: #ffffff !important;
  transition: background 0.15s ease !important;
  box-sizing: border-box !important;
}

.italivo-spec-row:nth-child(even) {
  background: #f8fafc !important;
}

.italivo-spec-row:last-child {
  border-bottom: none !important;
}

.italivo-spec-row:hover {
  background: #f1f5f9 !important;
}

.italivo-spec-key {
  font-weight: 700 !important;
  color: #1e293b !important;
  min-width: 125px !important;
  max-width: 145px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  letter-spacing: -0.1px !important;
}

.italivo-spec-val {
  font-weight: 500 !important;
  color: #334155 !important;
  flex: 1 !important;
  word-break: break-word !important;
}

@media (max-width: 768px) {
  .italivo-spec-table {
    margin: 14px 0 18px 0 !important;
    border-radius: 10px !important;
  }
  .italivo-spec-row {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  .italivo-spec-key {
    min-width: 105px !important;
    max-width: 115px !important;
    font-size: 13px !important;
  }
  .italivo-spec-val {
    font-size: 13px !important;
  }
}


/* Hide yellow shocking sale / flash sale banner */
.warning-msg, .flash-sale-badge, [class*="warning-msg"] { display: none !important; }

/* Deactivate savings box */
.discounted-price, .success-msg.discounted-price, [class*="discounted-price"] { display: none !important; }


/* ==========================================================================
   4TH SCREENSHOT FIX: SEARCH PAGE CONTROLS & DROPDOWNS
   ========================================================================== */
@media only screen and (max-width: 768px) {
  /* Hide the duplicate, cramped desktop results text from the controls bar */
  .detail-menu .list-heading > p,
  .detail-menu .list-heading p.hide-sm {
    display: none !important;
  }

  /* Expand controls container to full width with elegant gap */
  .detail-menu .list-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: stretch !important;
    width: 100% !important;
    padding: 6px 0 !important;
  }

  .detail-menu .list-heading .gap-5,
  .detail-menu .list-heading > div.flex {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 12px !important;
  }

  /* Featured box (Left) */
  .detail-menu .sort-dropdown,
  .sort-dropdown {
    flex: 1 1 50% !important;
    width: 50% !important;
    max-width: none !important;
    min-width: 0 !important;
    position: relative !important;
  }

  .detail-menu .sort-dropdown > span,
  .sort-dropdown > span {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }

  /* Prevent inner text/icon clicks from breaking outside-click detection */
  .sort-dropdown span.dd-selected-label,
  .sort-dropdown i.icon {
    pointer-events: none !important;
  }

  /* Filter box (Right) */
  .detail-menu .filter-btn {
    flex: 1 1 50% !important;
    width: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }

  /* Clean professional alignment for single mobile results text */
  .product-list .main-content > .pos-rel > p.block-sm,
  .product-list p.block-sm {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    margin: 12px 0 16px 4px !important;
    line-height: 1.4 !important;
  }

  .product-list .main-content > .pos-rel > p.block-sm span.bold,
  .product-list p.block-sm span.bold {
    color: #0f172a !important;
    font-weight: 700 !important;
  }

  /* Filter Drawer Pop-up Styling (Appears immediately at top z-index) */
  .product-list .left-area[style*="display: none"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
  .product-list .left-area:not([style*="display: none"]) { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 999999 !important; display: block !important; }

  .product-list .left-area .layer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(3px) !important;
    z-index: 1 !important;
    display: block !important;
  }

  .product-list .left-area .sticky {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: 82vh !important;
    background: #ffffff !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.25) !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .product-list .left-area .sticky .close-btn-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #f8fafc !important;
  }

  .product-list .left-area .sticky .close-btn-wrapper button {
    background: #fee2e2 !important;
    color: #ef4444 !important;
    border: none !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
  }

  .product-list .left-area .sticky .sidebar {
    max-height: calc(82vh - 56px) !important;
    overflow-y: auto !important;
    padding: 16px 20px 40px !important;
    -webkit-overflow-scrolling: touch !important;
  }
}


/* ==========================================================================
   DESKTOP SEARCH BAR & CONTROLS ALIGNMENT FIX (Screenshot 3)
   ========================================================================== */
@media screen and (min-width: 769px) {
  .detail-menu {
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }
  .detail-menu .container-fluid {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  .detail-menu .list-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .detail-menu .list-heading > p,
  .detail-menu .list-heading > p.hide-sm {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    line-height: 1.4 !important;
  }
  .detail-menu .list-heading .gap-5 {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
  }
  .detail-menu .list-heading .gap-5 > span {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    line-height: 1 !important;
  }
  .detail-menu .sort-dropdown > span {
    height: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 14px !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
  }
}


/* ==========================================================================
   PRODUCT TITLE DISPLAY IN SLIDERS & TILES (Screenshot 4)
   ========================================================================== */
.p-tile h5.item-title,
.p-tile .item-title,
.p-tile a.page-link h5,
.flash-slider .p-tile h5,
.home-section .p-tile h5 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  line-height: 1.35 !important;
  margin: 8px 0 4px !important;
  min-height: 36px !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* ==========================================================================
   DESKTOP FILTER SIDEBAR PERMANENT DISPLAY & MOBILE MODAL BEHAVIOR (SS 1 & 2)
   ========================================================================== */
@media screen and (min-width: 769px) {
  .product-list .left-area,
  .product-list .left-area[style*="display: none"] {
    display: block !important;
    position: static !important;
    width: 260px !important;
    min-width: 240px !important;
    max-width: 280px !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .product-list .left-area .layer {
    display: none !important;
  }
  .product-list .left-area .sticky .close-btn-wrapper {
    display: none !important;
  }
  .product-list .left-area .sticky {
    position: sticky !important;
    top: 20px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    max-height: none !important;
    width: 100% !important;
  }
  .product-list .left-area .sticky .sidebar {
    max-height: none !important;
    padding: 0 !important;
    overflow-y: visible !important;
  }
}

/* ==========================================================================
   PRODUCT CARDS TYPOGRAPHY & PRICE ALIGNMENT (Screenshot 3 Fix)
   ========================================================================== */
.p-tile .item-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.p-tile h5,
.p-tile h5.ellipsis,
.p-tile h5.item-title,
.p-tile .ellipsis-2,
.p-tile .item-title h5,
.flash-slider .p-tile h5,
.home-section .p-tile h5,
.tile-container .p-tile h5 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  line-height: 1.35 !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  text-align: left !important;
  margin: 8px 0 6px 0 !important;
  padding: 0 !important;
  word-break: break-word !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.p-tile .price-wrapper,
.p-tile .price-wrapper-inner,
.p-tile h4.price-wrapper,
.p-tile .flex.wrap.start {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.p-tile .price {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

.p-tile .koko-tile-installment {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  margin-top: 4px !important;
  margin-bottom: 2px !important;
  font-size: 11px !important;
  color: #64748b !important;
  line-height: 1.3 !important;
  text-align: left !important;
  min-height: 20px !important;
  width: 100% !important;
}

/* PAYMENT METHOD ACTION BUTTON MOBILE WRAPPING & ALIGNMENT */
.heading-tab-wrapper .tab-content .primary-btn,
.heading-tab-wrapper .tab-content .ajax-btn,
.payment-tabs-wrapper .tab-content .primary-btn,
.payment-tabs-wrapper .tab-content .ajax-btn,
.payment-options-row + div .primary-btn,
.payment-options-row + div .ajax-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 48px !important;
  padding: 12px 14px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  word-break: break-word !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}

.heading-tab-wrapper .tab-content .primary-btn span,
.heading-tab-wrapper .tab-content .ajax-btn span,
.payment-tabs-wrapper .tab-content .primary-btn span,
.payment-tabs-wrapper .tab-content .ajax-btn span,
.payment-options-row + div .primary-btn span,
.payment-options-row + div .ajax-btn span {
  display: inline-block !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.35 !important;
  max-width: 100% !important;
}


/* =========================================================================
   2b. DRAGGABLE FLOATING DARK MODE BUTTON (Matches WhatsApp Floating Button)
   ========================================================================= */
.italivo-floating-darkmode {
  position: fixed;
  bottom: 134px; /* Stacks cleanly 8px above WhatsApp on mobile (74px + 52px + 8px) */
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #0f172a;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99998;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  padding: 0;
  margin: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  animation: italivo-dark-pulse 3s infinite;
  -webkit-tap-highlight-color: transparent;
}

@media only screen and (min-width: 769px) {
  .italivo-floating-darkmode {
    bottom: 86px; /* Stacks cleanly 10px above WhatsApp on desktop (24px + 52px + 10px) */
    right: 24px;
  }
}

.italivo-floating-darkmode:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.6);
}

.italivo-floating-darkmode.is-dark {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2);
  animation: italivo-sun-pulse 3s infinite;
}

.italivo-floating-darkmode.is-dark:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 22px rgba(245, 158, 11, 0.65);
}

.italivo-floating-darkmode.is-dragging {
  cursor: grabbing !important;
  transform: scale(1.12) !important;
  animation: none !important;
  transition: none !important;
}

/* Icons */
.italivo-floating-darkmode .dark-icon-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.italivo-floating-darkmode:active .dark-icon-wrap {
  transform: rotate(360deg) scale(0.9);
}

.italivo-floating-darkmode .dark-icon-moon,
.italivo-floating-darkmode .dark-icon-sun {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.italivo-floating-darkmode .dark-icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.italivo-floating-darkmode .dark-icon-sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

.italivo-floating-darkmode.is-dark .dark-icon-moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

.italivo-floating-darkmode.is-dark .dark-icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Tooltip on hover */
.italivo-floating-darkmode .dark-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: #0f172a;
  color: #f8fafc;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: 0.3px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.italivo-floating-darkmode:hover .dark-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.italivo-floating-darkmode.is-dark .dark-tooltip {
  background: #1e293b;
  color: #fbbf24;
}

@keyframes italivo-dark-pulse {
  0% { box-shadow: 0 0 0 0 rgba(15, 23, 42, 0.5); }
  70% { box-shadow: 0 0 0 9px rgba(15, 23, 42, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 23, 42, 0); }
}

@keyframes italivo-sun-pulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
  70% { box-shadow: 0 0 0 9px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* =========================================================================
   36. ITALIVO PROFESSIONAL COMPLETE STOREFRONT DARK MODE THEME
   Unified Single Dark Tone (#0b0f19) & 100% High-Contrast Pure White Texts (#ffffff)
   ========================================================================= */

/* 1. UNIFIED SINGLE DARK BACKGROUND (#0b0f19) THROUGHOUT ENTIRE STOREFRONT */
html.dark-theme,
html.dark-theme body,
html.dark-theme #__layout,
html.dark-theme #__nuxt,
html.dark-theme .body-bg,
html.dark-theme .cart,
html.dark-theme .checkout,
html.dark-theme .flash-sale,
html.dark-theme .index,
html.dark-theme .order-id,
html.dark-theme .shipping,
html.dark-theme div[class^="user-"],
html.dark-theme main,
html.dark-theme header,
html.dark-theme .header-sticky,
html.dark-theme .top-wrapper,
html.dark-theme header .top-wrapper,
html.dark-theme header .bottom-area,
html.dark-theme .area,
html.dark-theme .home-section,
html.dark-theme .home-section .area,
html.dark-theme .area-content,
html.dark-theme .discover-area,
html.dark-theme .tile-container,
html.dark-theme .category-wrapper,
html.dark-theme .category-wrapper.area,
html.dark-theme .brands-wrapper,
html.dark-theme .brands-wrapper .featured-brands.area,
html.dark-theme .featured-brands,
html.dark-theme .flash-slider,
html.dark-theme .section,
html.dark-theme .main-content,
html.dark-theme .container,
html.dark-theme .container-fluid,
html.dark-theme .content,
html.dark-theme .content-wrap,
html.dark-theme .store-container,
html.dark-theme .store-content,
html.dark-theme .static-container,
html.dark-theme .static-area,
html.dark-theme .contact-wrapper,
html.dark-theme .detail-menu,
html.dark-theme .product-list .left-area .sticky,
html.dark-theme .product-list .left-area .sticky .sidebar,
html.dark-theme .sidebar-section,
html.dark-theme .sidebar,
html.dark-theme footer,
html.dark-theme footer .top-area,
html.dark-theme footer .bottom-area {
  background-color: #0b0f19 !important;
  background: #0b0f19 !important;
  border-color: #1e293b !important;
  color: #ffffff !important;
  color-scheme: dark;
}

html.dark-theme body:after {
  background: #0b0f19 !important;
}

html.dark-theme header:after,
html.dark-theme .header-sticky:after {
  display: none !important;
  background: transparent !important;
}

/* 2. UNIVERSAL PURE WHITE TEXT FOR ALL HEADINGS, PARAGRAPHS, SPANS & LABELS */
html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4,
html.dark-theme h5,
html.dark-theme h6,
html.dark-theme b,
html.dark-theme strong,
html.dark-theme .bold,
html.dark-theme .title,
html.dark-theme p,
html.dark-theme span:not(.primary-btn):not(.cart-badge):not(.savings-badge):not(.badge):not(.status-badge):not(.it-wb-pill):not(.dark-icon-moon):not(.dark-icon-sun),
html.dark-theme a:not(.primary-btn):not(.ajax-btn):not(.cart-btn):not(.view-btn),
html.dark-theme label,
html.dark-theme li,
html.dark-theme td,
html.dark-theme th,
html.dark-theme .info,
html.dark-theme .desc,
html.dark-theme .subtitle,
html.dark-theme .text-muted,
html.dark-theme .color-lite {
  color: #ffffff !important;
}

/* Interactive link hover states */
html.dark-theme a:hover,
html.dark-theme .link:hover {
  color: #f87171 !important;
}

/* 3. HEADER, SEARCH BAR, LOGO & NAVIGATION */
html.dark-theme header .top-wrapper {
  background-color: #0b0f19 !important;
  border-bottom: 1px solid #1e293b !important;
}

html.dark-theme header .top-wrapper a,
html.dark-theme header .top-wrapper span,
html.dark-theme .top-wrapper a,
html.dark-theme .top-wrapper span,
html.dark-theme .top-wrapper .left-side a,
html.dark-theme .top-wrapper .right-side a,
html.dark-theme .top-wrapper * {
  color: #ffffff !important;
  font-weight: 500 !important;
}

html.dark-theme header .logo .logo-text,
html.dark-theme header .logo-text,
html.dark-theme .logo-text {
  color: #ffffff !important;
  font-weight: 700 !important;
}

html.dark-theme header .logo img,
html.dark-theme .logo-img {
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.85)) !important;
}

html.dark-theme header .right-area .pos-rel > button:first-child,
html.dark-theme header .right-area .cart-btn,
html.dark-theme header .right-area button,
html.dark-theme header .right-area span,
html.dark-theme header .right-area a,
html.dark-theme header .title {
  color: #ffffff !important;
}

/* Crisp, highly identifiable Search Bar */
html.dark-theme header .search-input input,
html.dark-theme .search-input input,
html.dark-theme input.search-input {
  background-color: #151d2f !important;
  border: 1.5px solid #3b82f6 !important;
  color: #ffffff !important;
  font-size: 14px !important;
}

html.dark-theme header .search-input input::placeholder,
html.dark-theme .search-input input::placeholder {
  color: rgba(255, 255, 255, 0.88) !important;
}

html.dark-theme header .search-input input:focus {
  border-color: #e51a24 !important;
  background-color: #182234 !important;
}

/* Bottom Navigation Bar links */
html.dark-theme header .bottom-area {
  background-color: #0b0f19 !important;
  border-top: 1px solid #1e293b !important;
  border-bottom: 1px solid #1e293b !important;
}

html.dark-theme header .bottom-area a,
html.dark-theme header .bottom-area span,
html.dark-theme header .bottom-area div,
html.dark-theme header .bottom-area li,
html.dark-theme header .bottom-area *,
html.dark-theme header .nav-links a {
  color: #ffffff !important;
  font-weight: 500 !important;
}

html.dark-theme header .bottom-area a:hover,
html.dark-theme header .bottom-area a:hover * {
  color: #e51a24 !important;
}

/* Search suggestions dropdown */
html.dark-theme .search-suggestion,
html.dark-theme .suggestion-item,
html.dark-theme .search-dropdown {
  background-color: #151d2f !important;
  border-color: #243049 !important;
  color: #ffffff !important;
}

html.dark-theme .suggestion-item a,
html.dark-theme .suggestion-item span {
  color: #ffffff !important;
}

html.dark-theme .suggestion-item:hover,
html.dark-theme .suggestion-item a:hover {
  background-color: #1e293b !important;
  color: #38bdf8 !important;
}

/* User Account & General Dropdowns */
html.dark-theme .dropdown,
html.dark-theme header .dropdown,
html.dark-theme .header-dropdown {
  background-color: #151d2f !important;
  border: 1px solid #243049 !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6) !important;
}

html.dark-theme header .dropdown a,
html.dark-theme header .dropdown button.clear-btn,
html.dark-theme header .right-area .dropdown button.clear-btn,
html.dark-theme .dropdown a,
html.dark-theme .dropdown button {
  color: #ffffff !important;
  background-color: transparent !important;
}

html.dark-theme header .dropdown a:hover,
html.dark-theme header .dropdown button.clear-btn:hover,
html.dark-theme .dropdown a:hover {
  color: #38bdf8 !important;
  background-color: #1e293b !important;
}

/* "Shop by Category" Mega Menu Dropdown */
html.dark-theme .italivo-cat-dropdown-menu {
  background-color: #151d2f !important;
  border-color: #243049 !important;
  border-top-color: #e51a24 !important;
}

html.dark-theme .italivo-cat-col-left {
  background-color: #101626 !important;
  border-right-color: #1e293b !important;
}

html.dark-theme .italivo-cat-col-right {
  background-color: #151d2f !important;
}

html.dark-theme .italivo-cat-item,
html.dark-theme .italivo-subcat-item {
  color: #ffffff !important;
}

html.dark-theme .italivo-cat-item svg {
  color: #ffffff !important;
}

/* 4. SECTION TITLES & HEADINGS */
html.dark-theme .area .title,
html.dark-theme .home-section .title,
html.dark-theme .title,
html.dark-theme h4.title,
html.dark-theme .title h4,
html.dark-theme .home-section h4,
html.dark-theme .area h4,
html.dark-theme .discover-area h4,
html.dark-theme .home-section .title > .flex.gap-10 > h4,
html.dark-theme .home-section .title h4,
html.dark-theme .category-wrapper.area .title,
html.dark-theme .brands-wrapper .featured-brands.area .title,
html.dark-theme .flash-slider .title,
html.dark-theme .flash-slider .title > .flex.gap-10 > h4,
html.dark-theme .flash-slider .title h4 {
  color: #ffffff !important;
  border-color: #1e293b !important;
}

/* 5. PRODUCT TILES & CATALOG CARDS */
html.dark-theme .p-tile,
html.dark-theme .product-tile,
html.dark-theme .tile-wrapper,
html.dark-theme .card,
html.dark-theme .category-tile,
html.dark-theme .category-tile-wrapper .category-tile a.page-link,
html.dark-theme .category-tile-wrapper .category-tile a[href*="/brand"],
html.dark-theme a.brand-tile-link,
html.dark-theme .category-wrapper .embla li > a,
html.dark-theme .brands-wrapper .embla__viewport li a,
html.dark-theme .product-card,
html.dark-theme .item-tile,
html.dark-theme .flash-tile,
html.dark-theme .item-wrapper,
html.dark-theme .box-wrapper {
  background-color: #151d2f !important;
  background: #151d2f !important;
  border: 1px solid #243049 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
  color: #ffffff !important;
}

html.dark-theme .p-tile:hover,
html.dark-theme .product-tile:hover,
html.dark-theme .tile-wrapper:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.65) !important;
}

/* Product Titles in all contexts */
html.dark-theme .p-tile h5,
html.dark-theme .p-tile h5.item-title,
html.dark-theme .p-tile .item-title,
html.dark-theme .p-tile a.page-link h5,
html.dark-theme .p-tile h5.ellipsis,
html.dark-theme .p-tile .ellipsis-2,
html.dark-theme .p-tile .item-title h5,
html.dark-theme .flash-slider .p-tile h5,
html.dark-theme .home-section .p-tile h5,
html.dark-theme .tile-container .p-tile h5,
html.dark-theme .product-tile .title,
html.dark-theme .tile-wrapper .title,
html.dark-theme .product-item .title,
html.dark-theme .product-title,
html.dark-theme .item-title,
html.dark-theme .category-tile h5.item-title,
html.dark-theme .category-tile a.brand-tile-link h5.item-title {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Product Prices in all contexts */
html.dark-theme .p-tile .price,
html.dark-theme .p-tile .price-wrapper,
html.dark-theme .p-tile span.price,
html.dark-theme .p-tile h5.price,
html.dark-theme .product-tile .price,
html.dark-theme .tile-wrapper .price,
html.dark-theme .price-wrapper,
html.dark-theme .selling-price,
html.dark-theme .offered-price,
html.dark-theme .discounted-price,
html.dark-theme span.price,
html.dark-theme h4.price,
html.dark-theme h5.price {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Strikethrough original prices */
html.dark-theme .strikethrough-price,
html.dark-theme .original-price,
html.dark-theme .strike-through,
html.dark-theme del {
  color: #94a3b8 !important;
}

/* Koko installment text on cards & PDP */
html.dark-theme .p-tile .koko-tile-installment,
html.dark-theme .koko-tile-installment,
html.dark-theme .koko-tile-installment *,
html.dark-theme .koko-tile-installment span,
html.dark-theme .koko-tile-amount,
html.dark-theme .koko-pdp-section,
html.dark-theme .koko-pdp-section *,
html.dark-theme .koko-pdp-installment-row,
html.dark-theme .koko-pdp-amount,
html.dark-theme .koko-pdp-wa-connect,
html.dark-theme .koko-pdp-shipping-note,
html.dark-theme .koko-checkout-badge {
  color: #ffffff !important;
}

html.dark-theme .koko-pdp-section,
html.dark-theme .koko-pdp-installment-box,
html.dark-theme .koko-pdp-badge,
html.dark-theme .koko-checkout-badge {
  background-color: #151d2f !important;
  border: 1px dashed #243049 !important;
}

html.dark-theme .koko-info-trigger {
  background: #3b82f6 !important;
  color: #ffffff !important;
}

/* Flash Sales Timer Badge */
html.dark-theme .flash-slider .title > .flex.gap-10 > h5,
html.dark-theme .home-section .title > .flex.gap-10 > h5,
html.dark-theme .flash-slider .title h5 {
  background: #3b070c !important;
  border-color: #7f1d1d !important;
  color: #ffffff !important;
}

/* Shimmer Loading State */
html.dark-theme .shimmer-wrapper,
html.dark-theme .shimmer {
  background-color: #151d2f !important;
  color: #ffffff !important;
}

/* 6. PRODUCT DETAIL PAGE (PDP) */
html.dark-theme .detail-left > .b-b.flex.sided > h5,
html.dark-theme .detail-left > .b-b.flex.sided > h5.bold,
html.dark-theme .product-detail .title,
html.dark-theme .product-detail h1,
html.dark-theme h1.title,
html.dark-theme .detail-left h1,
html.dark-theme .detail-left h2,
html.dark-theme .detail-left h3,
html.dark-theme .detail-left h4,
html.dark-theme .detail-left h5 {
  color: #ffffff !important;
  font-weight: 700 !important;
}

html.dark-theme .detail-left > .b-b.flex.sided > p,
html.dark-theme .detail-left p.color-lite,
html.dark-theme .detail-left .desc,
html.dark-theme .detail-left .subtitle,
html.dark-theme .detail-left .unit-text {
  color: #ffffff !important;
}

html.dark-theme .detail-left .flex.sided.pb-5 h5.price,
html.dark-theme .detail-left .flex.sided.pb-5 h4.price,
html.dark-theme .detail-left .price-wrapper .selling-price,
html.dark-theme .detail-left .price-wrapper .price {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Specifications Table */
html.dark-theme .italivo-spec-table {
  background-color: #151d2f !important;
  border-color: #243049 !important;
}

html.dark-theme .italivo-spec-row {
  border-bottom-color: #1e293b !important;
}

html.dark-theme .italivo-spec-key,
html.dark-theme .italivo-spec-val {
  color: #ffffff !important;
}

/* Rich Text & Product Description Content */
html.dark-theme .detail-left .detail,
html.dark-theme .detail-left .detail *,
html.dark-theme .product-detail .detail,
html.dark-theme .product-detail .detail *,
html.dark-theme .tab-content,
html.dark-theme .tab-content *,
html.dark-theme .static-area .detail,
html.dark-theme .static-area .detail * {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* Quantity Box on PDP & Cart */
html.dark-theme .quantity-area,
html.dark-theme .quantity-area input,
html.dark-theme .quantity-input {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}

html.dark-theme .quantity-area button,
html.dark-theme .qty-btn {
  background-color: #1e293b !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}

html.dark-theme .quantity-area button:hover,
html.dark-theme .qty-btn:hover {
  background-color: #334155 !important;
  color: #ffffff !important;
}

/* Tab Headings on PDP */
html.dark-theme .tab-heading,
html.dark-theme .heading-tab-wrapper,
html.dark-theme .detail-menu .list-heading {
  border-bottom-color: #243049 !important;
}

html.dark-theme .tab-heading li,
html.dark-theme .tab-heading a,
html.dark-theme .heading-tab-wrapper a,
html.dark-theme .heading-tab-wrapper button {
  color: #ffffff !important;
  background-color: transparent !important;
}

html.dark-theme .tab-heading li.active,
html.dark-theme .tab-heading a.active,
html.dark-theme .heading-tab-wrapper a.active,
html.dark-theme .heading-tab-wrapper button.active {
  color: #ffffff !important;
  border-bottom: 2px solid #e51a24 !important;
  background-color: transparent !important;
}

/* Vouchers & Discounts */
html.dark-theme .vouchers-wrapper,
html.dark-theme .vouchers-wrapper .card,
html.dark-theme .voucher-code,
html.dark-theme .voucher-wrapper,
html.dark-theme .voucher-item {
  background-color: #151d2f !important;
  border-color: #243049 !important;
  color: #ffffff !important;
}

/* 7. LISTING, FILTERS, SEARCH & BREADCRUMBS */
html.dark-theme .breadcrumb,
html.dark-theme .breadcrumb a,
html.dark-theme .breadcrumb-item,
html.dark-theme .breadcrumb-item a,
html.dark-theme .breadcrumb span,
html.dark-theme .breadcrumb-item span {
  color: #ffffff !important;
}

html.dark-theme .breadcrumb a:hover,
html.dark-theme .breadcrumb-item a:hover {
  color: #f87171 !important;
}

html.dark-theme .product-list .main-content > .pos-rel > p.block-sm,
html.dark-theme .product-list p.block-sm,
html.dark-theme .product-list .main-content > .pos-rel > p.block-sm span.bold,
html.dark-theme .product-list p.block-sm span.bold {
  color: #ffffff !important;
}

html.dark-theme .sidebar-section label,
html.dark-theme .sidebar label {
  color: #ffffff !important;
}

html.dark-theme .detail-menu .list-heading > p,
html.dark-theme .detail-menu .list-heading > p.hide-sm,
html.dark-theme .detail-menu .list-heading .gap-5 > span,
html.dark-theme .detail-menu .filter-btn,
html.dark-theme .filter-btn {
  color: #ffffff !important;
}

/* Sort Dropdown */
html.dark-theme .sort-dropdown,
html.dark-theme .sort-dropdown > span {
  background-color: #151d2f !important;
  border-color: #243049 !important;
  color: #ffffff !important;
}

html.dark-theme .sort-dropdown.open > span {
  border-color: #3b82f6 !important;
}

html.dark-theme .sort-dropdown .dropdown-inner {
  background-color: #151d2f !important;
  border-color: #243049 !important;
}

html.dark-theme .sort-dropdown .dropdown-inner ul li {
  color: #ffffff !important;
}

html.dark-theme .sort-dropdown .dropdown-inner ul li:hover {
  background-color: #1e293b !important;
  color: #ffffff !important;
}

html.dark-theme .sort-dropdown .dropdown-inner ul li.active {
  color: #e51a24 !important;
  background-color: #1e293b !important;
}

/* Price Search Filter */
html.dark-theme .price-search .input-wrap .input-text,
html.dark-theme .price-search .input-wrap input {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}

html.dark-theme .price-search .input-wrap .input-text > span {
  color: #ffffff !important;
}

/* Outline Buttons (including 'Show more' button) */
html.dark-theme .outline-btn,
html.dark-theme .br-primary.outline-btn,
html.dark-theme a.outline-btn,
html.dark-theme .price-search button.outline-btn {
  background-color: #151d2f !important;
  border: 1.5px solid #e51a24 !important;
  color: #ffffff !important;
}

html.dark-theme .outline-btn:hover,
html.dark-theme .br-primary.outline-btn:hover,
html.dark-theme a.outline-btn:hover,
html.dark-theme .price-search button.outline-btn:hover {
  background-color: #e51a24 !important;
  color: #ffffff !important;
}

/* Pagination */
html.dark-theme .pagination {
  background-color: #151d2f !important;
  border: 1px solid #243049 !important;
}

html.dark-theme .pagination li {
  border-right: 1px solid #243049 !important;
  background-color: #151d2f !important;
  color: #ffffff !important;
}

html.dark-theme .pagination li a,
html.dark-theme .pagination li span,
html.dark-theme .page-link {
  background-color: #151d2f !important;
  border-color: #243049 !important;
  color: #ffffff !important;
}

html.dark-theme .pagination li a:hover,
html.dark-theme .pagination li:hover,
html.dark-theme .page-link:hover {
  background-color: #1e293b !important;
  color: #ffffff !important;
  border-color: #3b82f6 !important;
}

html.dark-theme .pagination li.active,
html.dark-theme .pagination li.active a,
html.dark-theme .pagination li.active span,
html.dark-theme .page-item.active .page-link {
  background-color: #e51a24 !important;
  border-color: #e51a24 !important;
  color: #ffffff !important;
}

/* 8. CART & CHECKOUT */
html.dark-theme .cart-product-tile .right-text h5,
html.dark-theme .cart-item .right-text h5,
html.dark-theme .cart-wrapper .title,
html.dark-theme .cart-item-title,
html.dark-theme .cart-product-tile .right-text h5.price,
html.dark-theme .cart-item .right-text h5.price,
html.dark-theme .cart-pricing .price,
html.dark-theme .order-summary .price,
html.dark-theme .cart-product-tile .right-text p,
html.dark-theme .cart-product-tile .right-text p.inl-b-sm,
html.dark-theme .cart-item .right-text p,
html.dark-theme .cart-item-meta,
html.dark-theme .checkout-detail .detail-left > .b-b.flex.sided h4,
html.dark-theme .checkout-detail .detail-left h5,
html.dark-theme .checkout-detail h4,
html.dark-theme .checkout-detail h5,
html.dark-theme .checkout-detail .detail-left p,
html.dark-theme .checkout-detail p,
html.dark-theme .gateway-fee-row > h5:first-child,
html.dark-theme .gateway-fee-row .fw-400,
html.dark-theme .gateway-fee-row > h5.price,
html.dark-theme .gateway-fee-row .price,
html.dark-theme .bank-detail-label,
html.dark-theme .bank-account-row label,
html.dark-theme .bank-detail-value,
html.dark-theme .bank-account-row span,
html.dark-theme .bank-account-row p,
html.dark-theme .bank-detail-info,
html.dark-theme .pmt-title,
html.dark-theme .pmt-sub {
  color: #ffffff !important;
}

html.dark-theme .checkout-detail .detail-left,
html.dark-theme .checkout-detail .detail-right {
  background-color: #151d2f !important;
  border-color: #243049 !important;
}

html.dark-theme .bank-details-card,
html.dark-theme .bank-detail {
  background-color: #101626 !important;
  border-color: #243049 !important;
}

html.dark-theme .payment-method-tile {
  background-color: #151d2f !important;
  border-color: #243049 !important;
}

html.dark-theme .payment-method-tile.active {
  border-color: #e51a24 !important;
  background-color: #1c253b !important;
}

/* 9. FOOTER */
html.dark-theme footer .bottom-area h4.bold,
html.dark-theme footer .bottom-area .col-lg-3:nth-child(1) h4.bold,
html.dark-theme footer .bottom-area .col-lg-3:nth-child(2) h4.bold,
html.dark-theme footer .bottom-area .col-lg-3.payment h4.bold,
html.dark-theme footer .bottom-area .col-lg-3:last-child h4.bold,
html.dark-theme footer h1,
html.dark-theme footer h2,
html.dark-theme footer h3,
html.dark-theme footer h4,
html.dark-theme footer .title,
html.dark-theme footer .bold,
html.dark-theme footer .bottom-area a,
html.dark-theme footer .bottom-area span,
html.dark-theme footer .bottom-area p,
html.dark-theme footer a,
html.dark-theme footer span,
html.dark-theme footer p,
html.dark-theme footer .bottom-area a[href*="sosmoo"],
html.dark-theme footer [class*="sosmoo"],
html.dark-theme footer [class*="developer"] a {
  color: #ffffff !important;
}

html.dark-theme footer a:hover,
html.dark-theme footer .bottom-area a:hover {
  color: #f87171 !important;
}

html.dark-theme footer .newsletter-input {
  background-color: #151d2f !important;
  border-color: #243049 !important;
  color: #ffffff !important;
}

html.dark-theme footer .payment-icons a {
  background-color: #151d2f !important;
  border-color: #243049 !important;
}

/* 10. USER PROFILE, ORDERS & TRACKING */
html.dark-theme .user-dashboard,
html.dark-theme .user-profile,
html.dark-theme .order-history,
html.dark-theme .tracked-result,
html.dark-theme .order-detail,
html.dark-theme .order-track-area {
  background-color: #0b0f19 !important;
  color: #ffffff !important;
}

html.dark-theme .user-card,
html.dark-theme .profile-card,
html.dark-theme .order-card,
html.dark-theme .table-card,
html.dark-theme .address-card,
html.dark-theme .voucher-card {
  background-color: #151d2f !important;
  border-color: #243049 !important;
  color: #ffffff !important;
}

html.dark-theme .order-item,
html.dark-theme .order-row,
html.dark-theme .order-table tr {
  border-color: #1e293b !important;
}

html.dark-theme .order-table th {
  background-color: #101626 !important;
  color: #ffffff !important;
}

html.dark-theme .order-table td {
  color: #ffffff !important;
}

/* 11. MODALS, POPUPS & BUTTONS */
html.dark-theme .modal-content,
html.dark-theme .popup-content,
html.dark-theme .pop-over-content,
html.dark-theme .address-popup,
html.dark-theme .cancel-popup,
html.dark-theme .confirm-popup,
html.dark-theme .login-popup,
html.dark-theme .register-popup,
html.dark-theme .dialog-box {
  background-color: #151d2f !important;
  border: 1px solid #243049 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7) !important;
  color: #ffffff !important;
}

html.dark-theme .pop-footer,
html.dark-theme .pop-over .pop-footer,
html.dark-theme .address-popup .pop-footer,
html.dark-theme .cancel-popup .pop-footer {
  background-color: #101626 !important;
  border-top-color: #1e293b !important;
}

html.dark-theme .pop-over .close-btn,
html.dark-theme .address-popup .close-btn,
html.dark-theme .cancel-popup .close-btn,
html.dark-theme .image-popup-wrapper .close-btn,
html.dark-theme .image-popup-icons .fav-btn,
html.dark-theme .image-popup-icons .share-btn {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}

html.dark-theme .pop-footer button.outline-btn,
html.dark-theme .pop-footer .outline-btn,
html.dark-theme .pop-footer button:not(.primary-btn):not(.ajax-btn):not([type="submit"]),
html.dark-theme .address-popup .pop-footer .outline-btn,
html.dark-theme .cancel-popup .pop-footer .outline-btn {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}

html.dark-theme .pop-footer button.outline-btn:hover,
html.dark-theme .pop-footer .outline-btn:hover,
html.dark-theme .address-popup .pop-footer .outline-btn:hover,
html.dark-theme .cancel-popup .pop-footer .outline-btn:hover {
  background-color: #334155 !important;
  color: #ffffff !important;
}

/* 12. REVIEWS & RATINGS */
html.dark-theme .review-card,
html.dark-theme .review-item,
html.dark-theme .rating-box,
html.dark-theme .review-wrapper {
  background-color: #151d2f !important;
  border-color: #243049 !important;
  color: #ffffff !important;
}

html.dark-theme .review-author,
html.dark-theme .review-date,
html.dark-theme .review-content {
  color: #ffffff !important;
}

/* 13. STATIC & POLICY PAGES */
html.dark-theme .static-container h1,
html.dark-theme .static-container h2,
html.dark-theme .static-container h3,
html.dark-theme .static-container h4,
html.dark-theme .static-container h5,
html.dark-theme .static-container p,
html.dark-theme .static-container li,
html.dark-theme .static-area .detail h1,
html.dark-theme .static-area .detail h2,
html.dark-theme .static-area .detail h3,
html.dark-theme .static-area .detail h4,
html.dark-theme .static-area .detail p,
html.dark-theme .static-area .detail li,
html.dark-theme .contact-wrapper label,
html.dark-theme .contact-wrapper p {
  color: #ffffff !important;
}

/* Inputs, textareas & select elements on all pages */
html.dark-theme input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.dark-theme select,
html.dark-theme textarea {
  background-color: #151d2f !important;
  border: 1px solid #243049 !important;
  color: #ffffff !important;
}

html.dark-theme input::placeholder,
html.dark-theme textarea::placeholder {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* 14. MOBILE DRAWER & BOTTOM NAVIGATION */
html.dark-theme .italivo-mobile-drawer,
html.dark-theme .italivo-drawer-panel {
  background-color: #0b0f19 !important;
  color: #ffffff !important;
}

html.dark-theme .italivo-drawer-header {
  background-color: #101626 !important;
  border-bottom-color: #1e293b !important;
}

html.dark-theme .italivo-drawer-body {
  background-color: #0b0f19 !important;
}

html.dark-theme .italivo-drawer-item {
  border-bottom-color: #1e293b !important;
  color: #ffffff !important;
}

html.dark-theme .italivo-drawer-link,
html.dark-theme .italivo-drawer-cat-btn {
  color: #ffffff !important;
}

html.dark-theme .italivo-drawer-link:hover,
html.dark-theme .italivo-drawer-cat-btn:hover {
  background-color: #151d2f !important;
  color: #e51a24 !important;
}

html.dark-theme .italivo-drawer-sub-menu {
  background-color: #151d2f !important;
  border-left-color: #243049 !important;
}

html.dark-theme .italivo-drawer-sub-link {
  color: #ffffff !important;
}

/* 15. IMAGES & ICONS */
html.dark-theme img {
  filter: brightness(0.96) contrast(1.02);
}
html.dark-theme img.logo-img,
html.dark-theme header img {
  filter: none !important;
}

/* SVG Sprite Icons invert in dark mode to crisp white */
html.dark-theme i.icon:not(.star-icon):not(.facebook-icon):not(.google-icon):not(.twitter-icon):not(.whatsapp-icon) {
  filter: invert(1) brightness(2) !important;
}

html.dark-theme header .icon.cart-icon,
html.dark-theme header .icon.user-icon,
html.dark-theme header .icon.arrow-down {
  filter: invert(1) brightness(2) !important;
}

/* Hide Suggested Search Keywords */
.search-dropdown .mb-15:has(.search-section),
.search-popup .mb-15:has(.search-section),
.search-wrapper .mb-15:has(.search-section),
[class*="searchPopup"] .mb-15:first-child {
  display: none !important;
}