/*!
 * Mart24 Design System — Milestone 1 (Design System Foundation)
 * --------------------------------------------------------------
 * Additive stylesheet. Does not modify theme.css.
 * Extends the existing --tp-theme-* / --primary-color token system
 * (see partials/header-meta.blade.php) rather than replacing it, so
 * admin-configured brand colors (Theme Options) keep controlling
 * every component defined here.
 *
 * Mobile-first: base rules target mobile (<768px); tablet rules are
 * gated behind (min-width: 768px), desktop behind (min-width: 1280px),
 * matching the breakpoints used in the Homepage Blueprint (Ch. 2).
 */

:root {
  /* Spacing scale */
  --mart24-space-1: 4px;
  --mart24-space-2: 8px;
  --mart24-space-3: 12px;
  --mart24-space-4: 16px;
  --mart24-space-5: 24px;
  --mart24-space-6: 32px;
  --mart24-space-7: 48px;

  /* Radius scale */
  --mart24-radius-sm: 6px;
  --mart24-radius-md: 10px;
  --mart24-radius-lg: 16px;
  --mart24-radius-pill: 999px;

  /* Shadow scale */
  --mart24-shadow-sm: 0 2px 6px rgba(1, 15, 28, 0.06);
  --mart24-shadow-md: 0 8px 20px rgba(1, 15, 28, 0.10);
  --mart24-shadow-lg: 0 16px 40px rgba(1, 15, 28, 0.14);

  /* Color aliases — extend existing theme tokens, never hardcode a new brand color */
  --mart24-primary: var(--tp-theme-primary, var(--primary-color, #0989ff));
  --mart24-secondary: var(--tp-theme-secondary, var(--secondary-color, #821f40));
  --mart24-success: #1aa053;
  --mart24-danger: #e0483e;
  --mart24-warning: #ffb342;
  --mart24-ink: var(--tp-common-black, #010f1c);
  --mart24-muted: var(--tp-text-1, #767a7d);
  --mart24-surface: #ffffff;
  --mart24-surface-alt: var(--tp-grey-1, #f6f7f9);
  --mart24-border: var(--tp-border-primary, #eaebed);

  /* Typography — Noto Sans Bengali is loaded site-wide via config.php (BaseHelper/Google Fonts asset) */
  --mart24-font-bn: "Noto Sans Bengali", var(--primary-font, sans-serif);
  --mart24-fs-xs: 12px;
  --mart24-fs-sm: 13px;
  --mart24-fs-base: 15px;
  --mart24-fs-md: 17px;
  --mart24-fs-lg: 20px;
  --mart24-fs-xl: 26px;
}

/* ---------------------------------------------------------------- */
/* Section Header component                                          */
/* ---------------------------------------------------------------- */

.mart24-section-header {
  gap: var(--mart24-space-3);
  margin-bottom: var(--mart24-space-5);
  /*
   * Opt-in centering hook (default: unchanged space-between layout).
   * Set --mart24-section-header-align: center; via a shortcode instance's
   * custom_css attribute to center this specific section's header without
   * affecting any other .mart24-section-header instance on the site.
   * !important is required here because the Blade partial also carries
   * Bootstrap's `.justify-content-between` utility class inline, which is
   * itself !important and would otherwise always win.
   */
  justify-content: var(--mart24-section-header-align, space-between) !important;
}

.mart24-section-header__text {
  text-align: var(--mart24-section-header-align, left);
}

.mart24-section-header__title {
  /*
   * Opt-in font-size hook (default: unchanged --mart24-fs-lg / --mart24-fs-xl
   * responsive pair below). Set --mart24-section-header-title-size via a
   * shortcode instance's custom_css attribute to resize just that section's
   * title without affecting any other .mart24-section-header instance.
   */
  font-size: var(--mart24-section-header-title-size, var(--mart24-fs-lg));
  font-weight: 700;
  /*
   * Opt-in color hook (default: unchanged --mart24-ink). Set
   * --mart24-section-header-title-color via a shortcode instance's
   * custom_css attribute to recolor just that section's title.
   */
  color: var(--mart24-section-header-title-color, var(--mart24-ink));
  margin: 0;
  font-family: var(--mart24-font-bn);
}

.mart24-section-header__subtitle {
  font-size: var(--mart24-fs-sm);
  color: var(--mart24-muted);
  margin: var(--mart24-space-1) 0 0;
}

.mart24-section-header__view-all {
  font-size: var(--mart24-fs-sm);
  font-weight: 600;
  color: var(--mart24-primary);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--mart24-space-1);
}

.mart24-section-header__view-all:hover {
  color: var(--mart24-secondary);
}

.mart24-tabs {
  list-style: none;
  display: flex;
  gap: var(--mart24-space-2);
  padding: 0;
  margin: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}

.mart24-tabs::-webkit-scrollbar {
  display: none;
}

.mart24-tabs__item {
  border: 1px solid var(--mart24-border);
  background: var(--mart24-surface);
  color: var(--mart24-muted);
  border-radius: var(--mart24-radius-pill);
  padding: var(--mart24-space-2) var(--mart24-space-4);
  font-size: var(--mart24-fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.mart24-tabs__item.active,
.mart24-tabs__item:hover {
  background: var(--mart24-primary);
  border-color: var(--mart24-primary);
  color: #fff;
}

@media (min-width: 768px) {
  .mart24-section-header__title {
    font-size: var(--mart24-section-header-title-size, var(--mart24-fs-xl));
  }
}

/* ---------------------------------------------------------------- */
/* Product Card component                                            */
/* ---------------------------------------------------------------- */

.mart24-product-card {
  background: var(--mart24-surface);
  border-radius: var(--mart24-radius-md);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mart24-product-card:hover {
  box-shadow: var(--mart24-shadow-md);
  transform: translateY(-2px);
}

.mart24-product-card__media {
  position: relative;
  display: block;
  background: var(--mart24-surface-alt);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--mart24-radius-md);
}

.mart24-product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mart24-product-card__badge {
  position: absolute;
  top: var(--mart24-space-2);
  left: var(--mart24-space-2);
  z-index: 2;
  font-size: var(--mart24-fs-xs);
  font-weight: 700;
  padding: 3px var(--mart24-space-2);
  border-radius: var(--mart24-radius-pill);
  color: #fff;
  background: var(--mart24-primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mart24-product-card__badge--sale { background: var(--mart24-danger); }
.mart24-product-card__badge--new { background: var(--mart24-success); }
.mart24-product-card__badge--trending { background: var(--mart24-warning); color: var(--mart24-ink); }

.mart24-product-card__title {
  font-size: var(--mart24-fs-base);
  font-weight: 600;
  margin: var(--mart24-space-3) 0 var(--mart24-space-1);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mart24-product-card__title a {
  color: var(--mart24-ink);
  text-decoration: none;
}

.mart24-product-card__title a:hover {
  color: var(--mart24-primary);
}

.mart24-product-card__rating {
  color: var(--mart24-warning);
  font-size: var(--mart24-fs-xs);
  margin-bottom: var(--mart24-space-2);
}

.mart24-product-card__review-count {
  color: var(--mart24-muted);
  margin-left: var(--mart24-space-1);
}

.mart24-product-card__price {
  font-size: var(--mart24-fs-md);
  font-weight: 700;
  color: var(--mart24-ink);
  margin-bottom: var(--mart24-space-2);
}

.mart24-product-card__price--sale { color: var(--mart24-danger); }

.mart24-product-card__price--old {
  font-size: var(--mart24-fs-sm);
  font-weight: 400;
  color: var(--mart24-muted);
  text-decoration: line-through;
  margin-left: var(--mart24-space-2);
}

.mart24-product-card__cod {
  display: inline-flex;
  align-items: center;
  gap: var(--mart24-space-1);
  font-size: var(--mart24-fs-xs);
  font-weight: 600;
  color: var(--mart24-success);
}

/* ---------------------------------------------------------------- */
/* Countdown component                                                */
/* ---------------------------------------------------------------- */

.mart24-countdown {
  display: flex;
  align-items: center;
  gap: var(--mart24-space-2);
}

.mart24-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--mart24-ink);
  color: #fff;
  border-radius: var(--mart24-radius-sm);
  min-width: 44px;
  padding: var(--mart24-space-1) var(--mart24-space-2);
}

.mart24-countdown__value {
  font-size: var(--mart24-fs-md);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.mart24-countdown__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
}

.mart24-countdown__sep {
  font-weight: 700;
  color: var(--mart24-muted);
}

@media (min-width: 768px) {
  .mart24-countdown__unit {
    min-width: 56px;
    padding: var(--mart24-space-2) var(--mart24-space-3);
  }

  .mart24-countdown__value {
    font-size: var(--mart24-fs-lg);
  }
}

/* ---------------------------------------------------------------- */
/* Progress Bar component                                             */
/* ---------------------------------------------------------------- */

.mart24-progress__label {
  display: flex;
  justify-content: space-between;
  font-size: var(--mart24-fs-xs);
  color: var(--mart24-muted);
  margin-bottom: var(--mart24-space-1);
}

.mart24-progress__track.progress {
  height: 8px;
  border-radius: var(--mart24-radius-pill);
  background: var(--mart24-surface-alt);
  overflow: hidden;
}

.mart24-progress__bar.progress-bar {
  background: var(--mart24-primary);
  border-radius: var(--mart24-radius-pill);
}

.mart24-progress__bar.mart24-progress__bar--success { background: var(--mart24-success); }
.mart24-progress__bar.mart24-progress__bar--warning { background: var(--mart24-warning); }
.mart24-progress__bar.mart24-progress__bar--danger { background: var(--mart24-danger); }

.mart24-progress__percent {
  font-size: var(--mart24-fs-xs);
  font-weight: 600;
  color: var(--mart24-ink);
  margin-top: var(--mart24-space-1);
  text-align: right;
}

/* ---------------------------------------------------------------- */
/* Milestone 3 — Trust Bar layout (site-features shortcode)           */
/* ---------------------------------------------------------------- */
/*
 * Scoped entirely via [data-block-id="site-features"], which Botble's
 * shortcode compiler stamps on the wrapper <section> unconditionally
 * (see Compilers/Shortcode.php::htmlAttributes()) — no Blade/PHP edit
 * needed, and no other element on the site is affected.
 *
 * Business rule (not a generic "any quantity" utility — intentionally
 * scoped to this shortcode's expected 4-6 item range):
 *   4 items -> 4 equal columns
 *   5 items -> 5 equal columns
 *   6 items -> 3 + 3 grid (two rows of 3)
 *   Tablet  -> always 3 columns, regardless of item count
 *   Mobile  -> horizontal swipe, scroll-snap
 *
 * Bootstrap's own .row/.col-* classes stay untouched sitewide; within
 * this one scoped selector, Grid takes over and the inherited
 * Bootstrap flex/width/gutter rules on the children are neutralized.
 */

section[data-block-id="site-features"] > .container > .row {
  gap: var(--mart24-space-4, 16px);
  margin: 0;
}

section[data-block-id="site-features"] > .container > .row > * {
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
  margin: 0;
}

/* Mobile (default): horizontal swipe strip, card width from its own content */
section[data-block-id="site-features"] > .container > .row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

section[data-block-id="site-features"] > .container > .row::-webkit-scrollbar {
  display: none;
}

section[data-block-id="site-features"] > .container > .row > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Tablet: fixed 3 columns regardless of item count (4, 5, or 6) */
@media (min-width: 768px) and (max-width: 1279px) {
  section[data-block-id="site-features"] > .container > .row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
  }

  section[data-block-id="site-features"] > .container > .row > * {
    scroll-snap-align: none;
  }
}

/* Desktop: item-count-driven equal columns (4, 5, or 3+3 for 6) */
@media (min-width: 1280px) {
  section[data-block-id="site-features"] > .container > .row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow-x: visible;
  }

  section[data-block-id="site-features"] > .container > .row > * {
    scroll-snap-align: none;
  }

  /* Exactly 5 items -> 5 equal columns, single row */
  section[data-block-id="site-features"] > .container > .row:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(5, 1fr);
  }

  /* 6 or more items -> 3 columns (renders as a clean 3+3 for exactly 6) */
  section[data-block-id="site-features"] > .container > .row:has(> :nth-child(6)) {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------------------------------------------------------------- */
/* Milestone 6 — Premium Header Enhancement                          */
/* ---------------------------------------------------------------- */
/*
 * Scoped to the new elements added in partials/header/styles/header-1.blade.php,
 * partials/header/actions.blade.php, and partials/header/group-buy-button.blade.php.
 * Loads after theme.css (see config.php dependency), so it can safely extend
 * existing classes like .tp-header-search-wrapper without an !important war.
 */

/* Group Buy CTA — reused in both the nav-row (desktop) and the mobile
   action-icon cluster via the shared group-buy-button partial.
   Blue, box-shaped (not pill) per follow-up request. */
:root {
  --mart24-groupbuy-bg: #1d4ed8;
  --mart24-groupbuy-bg-hover: #1a3fb8;
}

.mart24-header-groupbuy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--mart24-space-2);
  background: var(--mart24-groupbuy-bg);
  color: #fff;
  font-size: var(--mart24-fs-base);
  font-weight: 800;
  white-space: nowrap;
  border-radius: var(--mart24-radius-sm);
  padding: 10px 20px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.45);
  animation: mart24-groupbuy-pulse 2.4s ease-in-out infinite;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.mart24-header-groupbuy-btn:hover,
.mart24-header-groupbuy-btn:focus-visible {
  background: var(--mart24-groupbuy-bg-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(29, 78, 216, 0.55);
  animation-play-state: paused;
}

.mart24-header-groupbuy-btn svg,
.mart24-header-groupbuy-btn .ti {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Gentle attention pulse so Group Buy stands out as the header's one CTA,
   without being distracting (subtle shadow breathing, no movement/scale). */
@keyframes mart24-groupbuy-pulse {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.45);
  }
  50% {
    box-shadow: 0 4px 20px rgba(29, 78, 216, 0.75);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mart24-header-groupbuy-btn {
    animation: none;
  }
}

/* Compact variant used inside the mobile action-icon cluster (icon-only,
   fits alongside wishlist/cart icons at that size).
   Mobile UI Fix (Aug 2026): selector changed from the single class
   `.mart24-header-groupbuy-btn--compact` to the two-class combo below.
   Both selectors have the SAME specificity (0,1,0) as the plain
   `.mart24-header-groupbuy-btn { padding: 11px 22px }` rule added later
   in the "Premium Header Polish" section — with equal specificity the
   rule that appears LAST in the file wins, which was the plain rule,
   silently reverting the compact button back to full (11px 22px)
   padding on mobile (62px wide instead of the intended ~38px icon-only
   size). Combining both classes bumps specificity to (0,2,0) so this
   rule always wins regardless of source order. */
.mart24-header-groupbuy-btn.mart24-header-groupbuy-btn--compact {
  padding: 8px 10px;
}

.mart24-header-groupbuy-btn--compact span {
  display: none;
}

@media (min-width: 992px) {
  .mart24-header-groupbuy-btn--compact span {
    display: inline;
  }
}

/* Be Partner CTA — orange, sits next to Group Buy (blue) so the two premium
   header actions read as visually distinct. Two sub-options (Seller/Investor
   Partner) via a small dropdown, opened by click/tap (event-delegated JS in
   be-partner-button.blade.php) so it also works on touch, not just :hover. */
:root {
  --mart24-partner-bg: #f97316;
  --mart24-partner-bg-hover: #ea6a0c;
}

.mart24-header-partner-wrapper {
  position: relative;
  display: inline-block;
}

.mart24-header-partner-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--mart24-space-2);
  background: var(--mart24-partner-bg);
  color: #fff;
  font-size: var(--mart24-fs-base);
  font-weight: 800;
  white-space: nowrap;
  border: none;
  border-radius: var(--mart24-radius-md);
  padding: 11px 20px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.mart24-header-partner-btn:hover,
.mart24-header-partner-btn:focus-visible {
  background: var(--mart24-partner-bg-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.5);
}

.mart24-header-partner-btn svg,
.mart24-header-partner-btn .ti {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.mart24-header-partner-btn__caret {
  width: 14px !important;
  height: 14px !important;
  transition: transform 0.2s ease;
}

.mart24-header-partner-wrapper.is-open .mart24-header-partner-btn__caret {
  transform: rotate(180deg);
}

.mart24-header-partner-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: var(--mart24-surface);
  border: 1px solid var(--mart24-border);
  border-radius: var(--mart24-radius-md);
  box-shadow: var(--mart24-shadow-lg);
  padding: var(--mart24-space-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 60;
}

.mart24-header-partner-wrapper.is-open .mart24-header-partner-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mart24-header-partner-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--mart24-space-2);
  padding: var(--mart24-space-3);
  border-radius: var(--mart24-radius-sm);
  color: var(--mart24-ink);
  font-size: var(--mart24-fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mart24-header-partner-dropdown__item:hover {
  background: var(--mart24-surface-alt);
  color: var(--mart24-partner-bg);
}

.mart24-header-partner-dropdown__item .ti {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--mart24-partner-bg);
}

/* Compact variant used inside the mobile action-icon cluster (icon-only,
   dropdown right-aligns within the viewport). */
.mart24-header-partner-wrapper--compact .mart24-header-partner-btn {
  padding: 8px 10px;
}

.mart24-header-partner-wrapper--compact .mart24-header-partner-btn span:not(.visually-hidden) {
  display: none;
}

.mart24-header-partner-wrapper--compact .mart24-header-partner-btn__caret {
  display: none;
}

.mart24-header-partner-wrapper--compact .mart24-header-partner-dropdown {
  right: -8px;
}

/* ---------------------------------------------------------------- */
/* Premium Header Polish                                             */
/* ---------------------------------------------------------------- */
/*
 * Scoped to partials/header/styles/header-1.blade.php (the logo/search/
 * actions row now merged into one line) and the nav row below it. Purely
 * additive on top of theme.css and the Milestone 6 rules above — no
 * selector here duplicates an existing rule, they extend the same classes.
 */

/* Row 1 (logo + search + actions) — tighter than the theme default
   (was 27px top/bottom) so the header reads compact, BDShop-style. */
.tp-header-main,
.tp-header-sticky-area{
  padding-top: var(--mart24-space-3);
  padding-bottom: var(--mart24-space-3);
}

/* Logo — scaled up via transform (not the logo_height Theme Option, which
   stays untouched, and not the row's padding/height). Targets a rendered
   height of ~60-70px from the default 35px logo_height, i.e. ~1.83x —
   transform doesn't affect layout flow, so the row does not grow taller;
   transform-origin's "center" keeps it vertically centered with the
   search bar exactly as before, just visually bigger. */
.tp-header-main .logo,
.tp-header-sticky-area .logo{
  transform: scale(1.83);
  transform-origin: left center;
}

/* Search now lives inline in row 1 (see header-1.blade.php) instead of a
   separate row underneath — this is what actually puts the logo, search
   bar and action icons on one visual baseline. Cap removed (was 640px)
   so it fills most of the row's width, BDShop-style, instead of leaving
   empty space next to the action icons. */
.tp-header-mega-search {
  max-width: none;
  width: 100%;
}

.tp-header-mega-search .tp-header-search-wrapper {
  border: 1px solid var(--mart24-border);
  border-radius: var(--mart24-radius-pill);
  box-shadow: var(--mart24-shadow-sm);
  min-height: 46px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.tp-header-mega-search .tp-header-search-wrapper:focus-within {
  border-color: var(--mart24-primary);
  box-shadow: var(--mart24-shadow-md);
}

.tp-header-mega-search .tp-header-search-box input {
  height: 46px;
  padding-left: var(--mart24-space-5);
}

.tp-header-mega-search .tp-header-search-btn button {
  width: 52px;
  height: 46px;
  line-height: 46px;
}

/* Header actions (Wishlist/Cart/mobile menu) — even spacing, equal icon
   size, and a soft hover treatment instead of a bare color swap. */
.tp-header-action-item:not(:first-child) {
  margin-left: var(--mart24-space-4);
}

.tp-header-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--mart24-radius-pill);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.tp-header-action-btn:hover {
  background-color: var(--mart24-surface-alt);
}

/* Group Buy CTA — slightly larger radius/height so it reads as a premium
   pill-box instead of a sharp rectangle; hover motion kept as-is. */
.mart24-header-groupbuy-btn {
  border-radius: var(--mart24-radius-md);
  padding: 11px 22px;
}

/* Nav row — tighter vertical padding than the theme default, and more
   breathing room between links to match the BDShop-style reference. */
.tp-header-bottom {
  padding-top: var(--mart24-space-2);
  padding-bottom: var(--mart24-space-2);
}

.tp-header-bottom .tp-header-category .tp-category-menu-btn {
  white-space: nowrap;
}

/* Hotline — relocated beside Shop by Category (was a wide column at the
   far right of the row, which overflowed/wrapped below the nav on some
   widths). Single-line, compact, vertically centered with the row. */
.tp-header-bottom .tp-header-contact {
  white-space: nowrap;
}

.tp-header-bottom .tp-header-contact-content h5,
.tp-header-bottom .tp-header-contact-content p {
  white-space: nowrap;
}

/* "Shop by Category" reads as the primary nav action — filled, bolder,
   with its own soft shadow, matching the BDShop-style reference. */
.tp-header-bottom .tp-category-menu-btn {
  background: var(--mart24-primary);
  color: #fff;
  font-weight: 700;
  border-radius: var(--mart24-radius-sm);
  box-shadow: var(--mart24-shadow-sm);
  padding: 12px 20px;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.tp-header-bottom .tp-category-menu-btn:hover {
  box-shadow: var(--mart24-shadow-md);
  transform: translateY(-1px);
}

/* Nav links — bigger/bolder than the theme default (14px/500), more
   spacing between items, plus hover and active-page states (the active
   class is set per-link in header-1.blade.php). Selector is one level
   more specific than theme.css's .main-menu.menu-style-1>nav>ul>li>a,
   so it wins regardless of load order. */
.tp-header-bottom .main-menu.menu-style-1 > nav > ul > li {
  margin-inline-end: var(--mart24-space-5);
}

.tp-header-bottom .main-menu.menu-style-1 > nav > ul > li > a {
  position: relative;
  font-size: 15px;
  font-weight: 600;
  padding-bottom: var(--mart24-space-2);
}

.tp-header-bottom .main-menu.menu-style-1 > nav > ul > li > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--mart24-primary);
  transition: right 0.2s ease;
}

.tp-header-bottom .main-menu.menu-style-1 > nav > ul > li:hover > a::after,
.tp-header-bottom .main-menu.menu-style-1 > nav > ul > li.active > a::after {
  right: 0;
}

.tp-header-bottom .main-menu.menu-style-1 > nav > ul > li.active > a {
  color: var(--mart24-primary);
}

/* Trust Badges Banner — 6-block rectangular strip below the header.
   Each block is either a photo (uploaded via the shortcode's admin config)
   with a glowing headline overlay, or — while no photo has been uploaded
   yet — the original solid-gradient + icon look, so nothing breaks during
   the transition to real photography. See partials/shortcodes/trust-badges-banner.

   Carousel conversion: manual prev/next navigation, 9:16 tiles matching the
   Category Showcase slider — see public/js/mart24-trust-banner.js.
   `.swiper-container` itself already gets `overflow: hidden` +
   `.swiper-wrapper { display:flex }` from swiper-bundle.css, so
   `.mart24-trust-banner-row` (== .swiper-wrapper) no longer needs its own
   display/wrap rules — Swiper positions slides via inline transforms
   instead. */
.mart24-trust-banner {
  /* A little breathing room below the sticky header/nav — previously the
     slider sat flush against it. */
  padding-top: var(--mart24-space-5);
  padding-bottom: var(--mart24-space-5);
}

.mart24-trust-banner-slider {
  position: relative;
}

/* Each block renders as a real <a> (see the shortcode partial) so the whole
   photo/gradient area is clickable — override link UA defaults (blue/visited
   color, underline) so it keeps looking identical to the non-linked state. */
a.mart24-trust-banner-item,
a.mart24-trust-banner-item:hover,
a.mart24-trust-banner-item:visited,
a.mart24-trust-banner-item:focus {
  color: #fff;
  text-decoration: none;
}

.mart24-trust-banner-item {
  position: relative;
  /*
   * 9:16 (portrait) tiles, matching the reference design — width comes from
   * Swiper's slide sizing (see data-items-per-view / breakpoints in
   * mart24-trust-banner.js, deliberately mirroring the Category Showcase
   * slider's breakpoints so tiles here are the same width as its product
   * cards), height follows automatically via aspect-ratio.
   */
  aspect-ratio: 9 / 16;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 16px 24px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  /* Rounded-rectangle tiles, per request — overflow:hidden below (already
     present) clips the background photo to this same radius. */
  border-radius: var(--mart24-radius-lg);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Missing positioned ancestor for the absolutely-positioned nav buttons
   below: without this, .mart24-trust-banner__nav's `position: absolute;
   top: 50%` resolves against the initial containing block (the whole
   document) instead of this wrap, so the buttons render ~50% down the
   ENTIRE page — effectively invisible. Category Showcase's equivalent
   wrap already has this (see .mart24-category-showcase__slider-wrap). */
.mart24-trust-banner__slider-wrap {
  position: relative;
}

/* Prev/Next nav (replaces the old autoplay + pagination-dots carousel —
   manual navigation only, matching the Category Showcase slider's nav
   buttons). Visual treatment intentionally mirrors
   .mart24-category-showcase__nav so the two "banner" rows look related. */
.mart24-trust-banner__nav {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: var(--mart24-radius-pill);
  background: var(--mart24-surface);
  border: 1px solid var(--mart24-border);
  box-shadow: var(--mart24-shadow-md);
  color: var(--mart24-ink);
  z-index: 3;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.mart24-trust-banner__nav:hover {
  background: var(--mart24-primary);
  color: #fff;
  box-shadow: var(--mart24-shadow-lg);
}

.mart24-trust-banner__nav.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.mart24-trust-banner__nav--prev {
  left: -20px;
}

.mart24-trust-banner__nav--next {
  right: -20px;
}

@media (min-width: 992px) {
  .mart24-trust-banner__nav {
    display: inline-flex;
  }
}

/* Darken the top of the photo so the glowing headline stays readable,
   fading out toward the bottom so the photo itself stays visible. */
.mart24-trust-banner-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0) 60%);
  z-index: 1;
}

/* Gradient-only fallback (no photo yet) keeps the original centered
   icon + text layout — no dark overlay needed since it's a flat color. */
.mart24-trust-banner-item--gradient-only {
  justify-content: center;
  padding: 50px 16px 66px;
  box-shadow: inset 0 -28px 22px -14px rgba(0, 0, 0, 0.18);
}

.mart24-trust-banner-item--gradient-only::before {
  display: none;
}

.mart24-trust-banner-content {
  position: relative;
  z-index: 2;
}

.mart24-trust-banner-icon svg,
.mart24-trust-banner-icon .ti {
  width: 52px;
  height: 52px;
  color: #fff;
}

.mart24-trust-banner-title {
  margin: 18px 0 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  font-family: 'Noto Sans Bengali', sans-serif;
}

/* Photo blocks get the neon glow treatment matching the reference design;
   gradient-only fallback blocks keep a plain solid-white title (no glow —
   would look odd without a photo behind it). */
.mart24-trust-banner-item:not(.mart24-trust-banner-item--gradient-only) .mart24-trust-banner-title {
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.85), 0 0 26px rgba(56, 189, 248, 0.55), 0 2px 10px rgba(0, 0, 0, 0.7);
}

/* ------------------------------------------------------------------
 * Premium Category Cards — "premium" style for ecommerce-categories
 * ------------------------------------------------------------------
 * Scoped entirely to .mart24-premium-category-* classes so it cannot
 * affect any other style (grid/compact-grid/slider/list/table) of the
 * same shortcode, or any other section. All animation/overlay rules
 * live here only, per milestone requirement. Categories, images, and
 * copy are fully admin-driven — nothing here is category-specific.
 */
.mart24-premium-category-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 420px;
  border-radius: var(--mart24-radius-lg);
  overflow: hidden;
  box-shadow: var(--mart24-shadow-sm);
  background-color: var(--mart24-surface-alt, #f4f6f8);
  transition: box-shadow 0.25s ease;
}

.mart24-premium-category-item:hover {
  box-shadow: var(--mart24-shadow-lg);
}

.mart24-premium-category-thumb {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.mart24-premium-category-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.mart24-premium-category-item:hover .mart24-premium-category-thumb img {
  transform: scale(1.08);
}

.mart24-premium-category-thumb .tp-category-icon-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  color: var(--mart24-primary);
}

.mart24-premium-category-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 15, 28, 0) 30%, rgba(1, 15, 28, 0.78) 100%);
  z-index: 1;
  pointer-events: none;
}

.mart24-premium-category-content {
  position: relative;
  z-index: 2;
  padding: var(--mart24-space-5);
  color: #fff;
}

.mart24-premium-category-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.mart24-premium-category-title a {
  color: #fff;
}

.mart24-premium-category-tagline {
  margin: var(--mart24-space-2) 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.mart24-premium-category-count {
  display: block;
  margin-top: var(--mart24-space-2);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.mart24-premium-category-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--mart24-space-2);
  width: fit-content;
  margin-top: var(--mart24-space-4);
  padding: 10px 20px;
  border-radius: var(--mart24-radius-pill);
  background-color: #fff;
  color: var(--mart24-primary);
  font-weight: 700;
  font-size: 14px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, color 0.2s ease;
}

.mart24-premium-category-item:hover .mart24-premium-category-btn {
  opacity: 1;
  transform: translateY(0);
}

.mart24-premium-category-btn:hover {
  background-color: var(--mart24-primary);
  color: #fff;
}

.mart24-premium-category-btn .ti {
  font-size: 16px;
}

@media (max-width: 767px) {
  /* Keep the CTA visible on touch devices where :hover doesn't apply */
  .mart24-premium-category-item {
    min-height: 320px;
  }

  .mart24-premium-category-btn {
    opacity: 1;
    transform: none;
  }
}

/* No-image fallback (category has only an icon, no uploaded photo yet):
 * the dark gradient + white text scheme only works over a real photo, so
 * this variant switches to a light card with dark text instead. Admin can
 * upload a category image at any time to get the full photo treatment. */
.mart24-premium-category-item--no-image {
  min-height: 300px;
  border: 1px solid var(--mart24-border);
}

.mart24-premium-category-item--no-image .mart24-premium-category-thumb::after {
  display: none;
}

.mart24-premium-category-item--no-image .mart24-premium-category-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #eef2f6 0%, #e3e8ee 100%);
}

.mart24-premium-category-item--no-image .mart24-premium-category-content {
  color: inherit;
}

.mart24-premium-category-item--no-image .mart24-premium-category-title,
.mart24-premium-category-item--no-image .mart24-premium-category-title a {
  color: var(--mart24-text, #1a1a1a);
}

.mart24-premium-category-item--no-image .mart24-premium-category-tagline {
  color: var(--mart24-text-muted, rgba(0, 0, 0, 0.6));
}

.mart24-premium-category-item--no-image .mart24-premium-category-count {
  color: var(--mart24-text-muted, rgba(0, 0, 0, 0.5));
}

.mart24-premium-category-item--no-image .mart24-premium-category-btn {
  opacity: 1;
  transform: none;
  background-color: var(--mart24-primary);
  color: #fff;
}

.mart24-premium-category-item--no-image .mart24-premium-category-btn:hover {
  background-color: var(--mart24-secondary, var(--mart24-primary));
}

/* ------------------------------------------------------------------
 * Premium Flash Sale Section — "premium" style for ecommerce-flash-sale
 * ------------------------------------------------------------------
 * Scoped entirely to .mart24-flashsale-* classes. Does not touch the
 * native .tp-product-offer*/.tp-deal-* rules used by style-1/2, or the
 * inline-styled .tp-groupbuy-card used by style-3 (Group Buy page).
 * .mart24-countdown*, .mart24-progress*, and .mart24-section-header*
 * (all above) are reused as-is by this section — no changes to them.
 */

.mart24-flashsale-premium {
  padding-top: var(--mart24-space-7);
  padding-bottom: var(--mart24-space-7);
}

.mart24-flashsale-premium__countdown-row {
  display: flex;
  align-items: center;
  gap: var(--mart24-space-3);
  margin-bottom: var(--mart24-space-5);
}

.mart24-flashsale-premium__countdown-label {
  font-size: var(--mart24-fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mart24-danger);
}

.mart24-flashsale-premium__slider-wrap {
  position: relative;
}

.mart24-flashsale-premium__nav {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: var(--mart24-radius-pill);
  background: var(--mart24-surface);
  border: 1px solid var(--mart24-border);
  box-shadow: var(--mart24-shadow-md);
  color: var(--mart24-ink);
  z-index: 2;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.mart24-flashsale-premium__nav:hover {
  background: var(--mart24-primary);
  color: #fff;
  box-shadow: var(--mart24-shadow-lg);
}

.mart24-flashsale-premium__nav.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.mart24-flashsale-premium__nav--prev {
  left: -22px;
}

.mart24-flashsale-premium__nav--next {
  right: -22px;
}

.mart24-flashsale-premium__dots {
  display: flex;
  justify-content: center;
  gap: var(--mart24-space-2);
  margin-top: var(--mart24-space-5);
}

.mart24-flashsale-slide {
  height: auto;
  display: flex;
}

/* Card */

.mart24-flashsale-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--mart24-surface);
  border: 1px solid var(--mart24-border);
  border-radius: var(--mart24-radius-lg);
  overflow: hidden;
  box-shadow: var(--mart24-shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.mart24-flashsale-card:hover {
  box-shadow: var(--mart24-shadow-lg);
  transform: translateY(-4px);
}

.mart24-flashsale-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--mart24-surface-alt);
}

.mart24-flashsale-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.mart24-flashsale-card:hover .mart24-flashsale-card__thumb img {
  transform: scale(1.08);
}

/* Reposition the native badge (top:16px;right:20px by default) to a
   premium top-left placement — scoped override only, badges.blade.php
   itself is untouched. */
.mart24-flashsale-card__thumb .tp-product-badge {
  left: var(--mart24-space-3);
  right: auto;
  top: var(--mart24-space-3);
}

.mart24-flashsale-card__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--mart24-space-4) var(--mart24-space-4) var(--mart24-space-5);
}

.mart24-flashsale-card__title {
  font-size: var(--mart24-fs-base);
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 var(--mart24-space-2);
  min-height: calc(var(--mart24-fs-base) * 1.4 * 2);
}

.mart24-flashsale-card__title a {
  color: var(--mart24-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mart24-flashsale-card__price-new {
  font-size: var(--mart24-fs-md);
  font-weight: 700;
  color: var(--mart24-primary);
}

.mart24-flashsale-card__price-old-text {
  font-size: var(--mart24-fs-sm);
  color: var(--mart24-muted);
  text-decoration: line-through;
}

.mart24-flashsale-card__progress {
  margin-top: var(--mart24-space-3);
}

.mart24-flashsale-card__cta {
  margin-top: auto;
  padding-top: var(--mart24-space-4);
}

.mart24-flashsale-card__btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mart24-space-2);
  background: var(--mart24-primary);
  color: #fff;
  border: none;
  border-radius: var(--mart24-radius-md);
  padding: var(--mart24-space-3) var(--mart24-space-4);
  font-size: var(--mart24-fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.mart24-flashsale-card__btn:hover {
  background: var(--mart24-secondary, var(--mart24-primary));
  box-shadow: var(--mart24-shadow-md);
}

.mart24-flashsale-card__btn:disabled {
  background: var(--mart24-muted);
  cursor: not-allowed;
}

@media (min-width: 992px) {
  .mart24-flashsale-premium__nav {
    display: inline-flex;
  }
}

/* ------------------------------------------------------------------
 * Premium Featured Products — "premium" style for ecommerce-products
 * ------------------------------------------------------------------
 * Scoped entirely to .mart24-featured-* classes. Does not touch the
 * native .tp-product-arrival-*/.tp-product-item-3 rules used by
 * grid/slider/simple/slider-full-width. The native .tp-product-action
 * (compare/quick-view/wishlist) and .tp-product-add-cart-btn-large-wrapper
 * hover-reveal rules already key off `.tp-product-item:hover`, which the
 * premium card keeps as an outer class specifically so those keep
 * working with zero new CSS/JS for that behaviour.
 */

.mart24-featured-products {
  padding-top: var(--mart24-space-7);
  padding-bottom: var(--mart24-space-7);
}

.mart24-featured-products__slider-wrap {
  position: relative;
}

.mart24-featured-products__nav {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: var(--mart24-radius-pill);
  background: var(--mart24-surface);
  border: 1px solid var(--mart24-border);
  box-shadow: var(--mart24-shadow-md);
  color: var(--mart24-ink);
  z-index: 2;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.mart24-featured-products__nav:hover {
  background: var(--mart24-primary);
  color: #fff;
  box-shadow: var(--mart24-shadow-lg);
}

.mart24-featured-products__nav.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.mart24-featured-products__nav--prev {
  left: -22px;
}

.mart24-featured-products__nav--next {
  right: -22px;
}

.mart24-featured-products__dots {
  display: flex;
  justify-content: center;
  gap: var(--mart24-space-2);
  margin-top: var(--mart24-space-5);
}

.mart24-featured-products__slide {
  height: auto;
  display: flex;
}

@media (min-width: 992px) {
  .mart24-featured-products__nav {
    display: inline-flex;
  }
}

/* Card */

.mart24-featured-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--mart24-surface);
  border: 1px solid var(--mart24-border);
  border-radius: var(--mart24-radius-lg);
  overflow: hidden;
  box-shadow: var(--mart24-shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.mart24-featured-card:hover {
  box-shadow: var(--mart24-shadow-lg);
  transform: translateY(-4px);
}

.mart24-featured-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--mart24-surface-alt);
}

.mart24-featured-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.mart24-featured-card:hover .mart24-featured-card__thumb img {
  transform: scale(1.08);
}

.mart24-featured-card__featured-badge {
  position: absolute;
  top: var(--mart24-space-3);
  left: var(--mart24-space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--mart24-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--mart24-ink);
  background: #fff;
  padding: 4px var(--mart24-space-2);
  border-radius: var(--mart24-radius-pill);
  box-shadow: var(--mart24-shadow-sm);
}

.mart24-featured-card__featured-badge .ti {
  color: var(--mart24-warning);
  font-size: 13px;
}

.mart24-featured-card__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--mart24-space-4) var(--mart24-space-4) var(--mart24-space-5);
}

.mart24-featured-card__title {
  font-size: var(--mart24-fs-base);
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 var(--mart24-space-2);
  min-height: calc(var(--mart24-fs-base) * 1.4 * 2);
}

.mart24-featured-card__title a {
  color: var(--mart24-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mart24-featured-card .tp-product-rating {
  margin-bottom: var(--mart24-space-2);
}

.mart24-featured-card .tp-product-price-wrapper {
  margin-top: auto;
  font-size: var(--mart24-fs-md);
}

/* ------------------------------------------------------------------
 * Premium Group Buy — "premium-group-buy" style for ecommerce-flash-sale
 * ------------------------------------------------------------------
 * Scoped entirely to .mart24-groupbuy-premium* classes. Does not touch
 * .mart24-flashsale-premium* (Milestone 6), .mart24-featured-* (Milestone 7),
 * or the inline-styled .tp-groupbuy-card used by style-3 (still available as
 * the non-premium Group Buy fallback). .mart24-countdown*, .mart24-progress*,
 * and .mart24-section-header* are reused as-is — no changes to them.
 */

.mart24-groupbuy-premium {
  padding-top: var(--mart24-space-7);
  padding-bottom: var(--mart24-space-7);
}

.mart24-groupbuy-premium__countdown-row {
  display: flex;
  align-items: center;
  gap: var(--mart24-space-3);
  margin-bottom: var(--mart24-space-5);
}

.mart24-groupbuy-premium__countdown-label {
  font-size: var(--mart24-fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mart24-danger);
}

.mart24-groupbuy-premium__slider-wrap {
  position: relative;
}

.mart24-groupbuy-premium__nav {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: var(--mart24-radius-pill);
  background: var(--mart24-surface);
  border: 1px solid var(--mart24-border);
  box-shadow: var(--mart24-shadow-md);
  color: var(--mart24-ink);
  z-index: 2;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.mart24-groupbuy-premium__nav:hover {
  background: var(--mart24-primary);
  color: #fff;
  box-shadow: var(--mart24-shadow-lg);
}

.mart24-groupbuy-premium__nav.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.mart24-groupbuy-premium__nav--prev {
  left: -22px;
}

.mart24-groupbuy-premium__nav--next {
  right: -22px;
}

.mart24-groupbuy-premium__dots {
  display: flex;
  justify-content: center;
  gap: var(--mart24-space-2);
  margin-top: var(--mart24-space-5);
}

.mart24-groupbuy-premium-slide {
  height: auto;
  display: flex;
}

/* Card */

.mart24-groupbuy-premium-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--mart24-surface);
  border: 1px solid var(--mart24-border);
  border-radius: var(--mart24-radius-lg);
  overflow: hidden;
  box-shadow: var(--mart24-shadow-sm);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.mart24-groupbuy-premium-card:hover {
  box-shadow: var(--mart24-shadow-lg);
  transform: translateY(-6px);
}

.mart24-groupbuy-premium-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--mart24-surface-alt);
}

.mart24-groupbuy-premium-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.mart24-groupbuy-premium-card:hover .mart24-groupbuy-premium-card__thumb img {
  transform: scale(1.08);
}

/* Reposition the native badge (top:16px;right:20px by default) to a
   premium top-left placement, stacked above the dynamic badge below it —
   scoped override only, badges.blade.php itself is untouched. */
.mart24-groupbuy-premium-card__thumb .tp-product-badge {
  left: var(--mart24-space-3);
  right: auto;
  top: var(--mart24-space-3);
}

.mart24-groupbuy-premium-card__dynamic-badge {
  position: absolute;
  top: calc(var(--mart24-space-3) + 30px);
  left: var(--mart24-space-3);
  background: var(--mart24-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: var(--mart24-radius-pill);
  white-space: nowrap;
  z-index: 1;
}

.mart24-groupbuy-premium-card__verified {
  position: absolute;
  top: var(--mart24-space-3);
  right: var(--mart24-space-3);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: var(--mart24-radius-pill);
  box-shadow: var(--mart24-shadow-sm);
  color: var(--mart24-success);
}

.mart24-groupbuy-premium-card__status {
  position: absolute;
  bottom: var(--mart24-space-3);
  left: var(--mart24-space-3);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--mart24-radius-pill);
  background: rgba(13, 148, 136, 0.95);
}

.mart24-groupbuy-premium-card__status--sold-out {
  background: rgba(107, 114, 128, 0.95);
}

.mart24-groupbuy-premium-card__status--low {
  background: rgba(224, 72, 62, 0.95);
}

.mart24-groupbuy-premium-card__status--limited {
  background: rgba(255, 179, 66, 0.95);
  color: #1f2937;
}

.mart24-groupbuy-premium-card__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--mart24-space-4) var(--mart24-space-4) var(--mart24-space-5);
}

.mart24-groupbuy-premium-card__title {
  font-size: var(--mart24-fs-base);
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 var(--mart24-space-2);
  min-height: calc(var(--mart24-fs-base) * 1.4 * 2);
}

.mart24-groupbuy-premium-card__title a {
  color: var(--mart24-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mart24-groupbuy-premium-card .tp-product-rating {
  margin-bottom: var(--mart24-space-2);
}

.mart24-groupbuy-premium-card__price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mart24-space-2);
  margin-bottom: var(--mart24-space-2);
}

.mart24-groupbuy-premium-card__price-new {
  font-size: var(--mart24-fs-lg);
  font-weight: 800;
  color: var(--mart24-primary);
}

.mart24-groupbuy-premium-card__price-old-text {
  font-size: var(--mart24-fs-sm);
  color: var(--mart24-muted);
  text-decoration: line-through;
}

.mart24-groupbuy-premium-card__save {
  font-size: 11px;
  font-weight: 700;
  color: var(--mart24-success);
  background: rgba(22, 163, 74, 0.1);
  padding: 3px 9px;
  border-radius: var(--mart24-radius-pill);
  white-space: nowrap;
}

.mart24-groupbuy-premium-card__joined-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mart24-space-2);
  font-size: var(--mart24-fs-sm);
  margin-bottom: var(--mart24-space-2);
}

.mart24-groupbuy-premium-card__joined {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--mart24-ink);
}

.mart24-groupbuy-premium-card__joined .ti {
  color: var(--mart24-primary);
  font-size: 14px;
}

.mart24-groupbuy-premium-card__seats-left {
  font-size: var(--mart24-fs-xs);
  font-weight: 700;
  color: var(--mart24-danger);
  animation: mart24-groupbuy-seats-pulse 2s ease-in-out infinite;
}

@keyframes mart24-groupbuy-seats-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mart24-groupbuy-premium-card__seats-left {
    animation: none;
  }
}

.mart24-groupbuy-premium-card__progress {
  margin-bottom: var(--mart24-space-3);
}

.mart24-groupbuy-premium-card__cta {
  margin-top: auto;
  padding-top: var(--mart24-space-2);
}

.mart24-groupbuy-premium-card__btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mart24-space-2);
  background: var(--mart24-primary);
  color: #fff;
  border: none;
  border-radius: var(--mart24-radius-md);
  padding: var(--mart24-space-3) var(--mart24-space-4);
  font-size: var(--mart24-fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.mart24-groupbuy-premium-card__btn:hover {
  background: var(--mart24-secondary, var(--mart24-primary));
  box-shadow: var(--mart24-shadow-md);
}

.mart24-groupbuy-premium-card__btn:disabled {
  background: var(--mart24-muted);
  cursor: not-allowed;
}

@media (min-width: 992px) {
  .mart24-groupbuy-premium__nav {
    display: inline-flex;
  }
}

/* ------------------------------------------------------------------
 * Premium Brands Section — "premium" style for ecommerce-brands
 * ------------------------------------------------------------------
 * Scoped entirely to .mart24-brands-premium* classes. Does not touch
 * .tp-brand-area/.tp-brand-item (style-default.blade.php, still used as-is
 * by the dedicated /brands page). Deliberately a static grid — no Swiper,
 * no JS, no animation beyond a CSS hover lift/zoom.
 * .mart24-section-header* is reused as-is — no changes to it.
 */

.mart24-brands-premium {
  padding-top: var(--mart24-space-7);
  padding-bottom: var(--mart24-space-7);
}

.mart24-brands-premium__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mart24-space-4);
}

@media (min-width: 576px) {
  .mart24-brands-premium__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .mart24-brands-premium__grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.mart24-brands-premium-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--mart24-space-2);
  background: var(--mart24-surface);
  border: 1px solid var(--mart24-border);
  border-radius: var(--mart24-radius-lg);
  box-shadow: var(--mart24-shadow-sm);
  padding: var(--mart24-space-5) var(--mart24-space-3);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.mart24-brands-premium-card:hover {
  box-shadow: var(--mart24-shadow-lg);
  transform: translateY(-4px);
}

.mart24-brands-premium-card__featured-badge {
  position: absolute;
  top: var(--mart24-space-2);
  right: var(--mart24-space-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--mart24-warning);
  padding: 3px 8px;
  border-radius: var(--mart24-radius-pill);
}

.mart24-brands-premium-card__featured-badge .ti {
  font-size: 11px;
}

.mart24-brands-premium-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 64px;
  overflow: hidden;
}

.mart24-brands-premium-card__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.35s ease;
}

.mart24-brands-premium-card:hover .mart24-brands-premium-card__logo img {
  transform: scale(1.08);
}

.mart24-brands-premium-card__name {
  font-size: var(--mart24-fs-base);
  font-weight: 600;
  color: var(--mart24-ink);
  text-decoration: none;
}

.mart24-brands-premium-card__name:hover {
  color: var(--mart24-primary);
}

.mart24-brands-premium-card__official {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--mart24-fs-xs);
  font-weight: 600;
  color: var(--mart24-success);
}

.mart24-brands-premium-card__official .ti {
  font-size: 13px;
}

/* ------------------------------------------------------------------
 * Brand Slider — "slider" style for ecommerce-brands (Milestone 12)
 * ------------------------------------------------------------------
 * Scoped entirely to .mart24-brands-slider* classes. Reuses
 * .mart24-brands-premium-card (unmodified, see above) for the per-brand
 * card look — only the container (grid vs. Swiper) differs from the
 * Premium style, which stays a deliberately static grid (Milestone 9).
 * Nav-button styling mirrors .mart24-category-showcase__nav (same visual
 * language, new class names so the two stay independent).
 */
.mart24-brands-slider {
  padding-top: var(--mart24-space-7);
  padding-bottom: var(--mart24-space-7);
}

.mart24-brands-slider__slider-wrap {
  position: relative;
}

.mart24-brands-slider__nav {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: var(--mart24-radius-pill);
  background: var(--mart24-surface);
  border: 1px solid var(--mart24-border);
  box-shadow: var(--mart24-shadow-md);
  color: var(--mart24-ink);
  z-index: 2;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.mart24-brands-slider__nav:hover {
  background: var(--mart24-primary);
  color: #fff;
  box-shadow: var(--mart24-shadow-lg);
}

.mart24-brands-slider__nav.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.mart24-brands-slider__nav--prev {
  left: -20px;
}

.mart24-brands-slider__nav--next {
  right: -20px;
}

.mart24-brands-slider__slide {
  height: auto;
  display: flex;
}

@media (min-width: 992px) {
  .mart24-brands-slider__nav {
    display: inline-flex;
  }
}

/* ------------------------------------------------------------------
 * Premium Testimonials Section — "premium" style for testimonials
 * ------------------------------------------------------------------
 * Scoped entirely to .mart24-testimonials-premium* classes. Does not touch
 * .tp-testimonial-area/.tp-testimonial-item/etc. (style-1/2/3, unmodified).
 * Deliberately keeps the native .tp-testimonial-slider-active class on the
 * slider element so the existing Swiper init in theme.js applies with zero
 * new JavaScript. .mart24-section-header* is reused as-is.
 */

.mart24-testimonials-premium {
  padding-top: var(--mart24-space-7);
  padding-bottom: var(--mart24-space-7);
}

.mart24-testimonials-premium-slider {
  padding-bottom: var(--mart24-space-2);
}

.mart24-testimonials-premium__slide {
  height: auto;
  display: flex;
}

.mart24-testimonials-premium-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--mart24-surface);
  border: 1px solid var(--mart24-border);
  border-radius: var(--mart24-radius-lg);
  box-shadow: var(--mart24-shadow-sm);
  padding: var(--mart24-space-6) var(--mart24-space-5) var(--mart24-space-5);
  text-align: center;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.mart24-testimonials-premium-card:hover {
  box-shadow: var(--mart24-shadow-lg);
  transform: translateY(-4px);
}

.mart24-testimonials-premium-card__quote {
  width: 32px;
  height: auto;
  opacity: 0.85;
  margin: 0 auto var(--mart24-space-3);
}

.mart24-testimonials-premium-card__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--mart24-border);
  font-size: 15px;
  margin-bottom: var(--mart24-space-3);
}

.mart24-testimonials-premium-card__rating.tp-testimonial-rating-filled {
  color: var(--mart24-warning);
}

.mart24-testimonials-premium-card__content {
  font-size: var(--mart24-fs-md);
  line-height: 1.6;
  color: var(--mart24-ink);
  margin: 0 0 var(--mart24-space-5);
  flex: 1;
}

.mart24-testimonials-premium-card__user {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mart24-space-3);
}

.mart24-testimonials-premium-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.mart24-testimonials-premium-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mart24-testimonials-premium-card__user-info {
  text-align: left;
}

.mart24-testimonials-premium-card__name {
  font-size: var(--mart24-fs-base);
  font-weight: 700;
  color: var(--mart24-ink);
  margin: 0;
}

.mart24-testimonials-premium-card__company {
  font-size: var(--mart24-fs-sm);
  color: var(--mart24-muted);
}

.mart24-testimonials-premium-card__meta {
  display: block;
  font-size: var(--mart24-fs-xs, 12px);
  color: var(--mart24-muted);
  margin-top: 2px;
}

@media (max-width: 575.98px) {
  .mart24-testimonials-premium-card {
    padding: var(--mart24-space-5) var(--mart24-space-4) var(--mart24-space-4);
  }
}

/* ------------------------------------------------------------------
 * Category Showcase — reusable multi-row category product spotlight
 * ------------------------------------------------------------------
 * Scoped entirely to .mart24-category-showcase* classes. The per-row
 * header reuses components.section-header unmodified — its default
 * space-between/left-aligned look (no --mart24-section-header-align/
 * -title-color overrides here) is already the row-header style needed
 * ("Solar Package  ................  See More"), so nothing new is
 * needed there. Nav-button styling mirrors .mart24-featured-products__nav
 * (same visual language, new class names so the two stay independent).
 */

.mart24-category-showcase {
  padding-top: var(--mart24-space-7);
  padding-bottom: var(--mart24-space-7);
}

.mart24-category-showcase__title {
  text-align: center;
  font-size: var(--mart24-fs-xl);
  font-weight: 800;
  font-family: var(--mart24-font-bn);
  color: var(--mart24-ink);
  margin: 0 0 var(--mart24-space-6);
  display: flex;
  align-items: center;
  gap: var(--mart24-space-4);
}

.mart24-category-showcase__title::before,
.mart24-category-showcase__title::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--mart24-border);
}

.mart24-category-showcase__row {
  margin-bottom: var(--mart24-space-6);
}

.mart24-category-showcase__row:last-child {
  margin-bottom: 0;
}

.mart24-category-showcase__row-header .mart24-section-header {
  margin-bottom: var(--mart24-space-3);
}

.mart24-category-showcase__row-header .mart24-section-header__title {
  font-size: var(--mart24-fs-md);
}

.mart24-category-showcase__slider-wrap {
  position: relative;
}

.mart24-category-showcase__nav {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: var(--mart24-radius-pill);
  background: var(--mart24-surface);
  border: 1px solid var(--mart24-border);
  box-shadow: var(--mart24-shadow-md);
  color: var(--mart24-ink);
  z-index: 2;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.mart24-category-showcase__nav:hover {
  background: var(--mart24-primary);
  color: #fff;
  box-shadow: var(--mart24-shadow-lg);
}

.mart24-category-showcase__nav.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.mart24-category-showcase__nav--prev {
  left: -20px;
}

.mart24-category-showcase__nav--next {
  right: -20px;
}

.mart24-category-showcase__slide {
  height: auto;
  display: flex;
}

@media (min-width: 992px) {
  .mart24-category-showcase__nav {
    display: inline-flex;
  }
}

/* Sticky Category/Nav Bar — pairs with public/js/mart24-sticky-nav.js.
   Pins .tp-header-bottom (Shop by Category, Hotline, Home/All Products/
   Deals/Brands/Track Order/Contact, Group Buy, Be Partner) in place while
   scrolling instead of it disappearing with the rest of the page. `top`
   is set inline by the JS (measured live against #header-sticky-2's
   actual bottom edge) so it always stacks directly under the compact
   sticky header rather than overlapping it. Desktop-only, matching this
   bar's own d-none d-lg-block visibility. */
@media (min-width: 992px) {
  .tp-header-bottom.mart24-header-bottom--pinned {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 90;
    box-shadow: 0 4px 10px rgba(3, 4, 28, 0.08);
  }

  .mart24-header-bottom-spacer {
    display: block;
  }
}

.mart24-header-bottom-spacer {
  display: none;
}

/* Header search bar: stretch it to fill the space Bootstrap's `col` already
   reserves for it (.tp-header-mega-search, between the logo and account/
   wishlist/cart icons in header-1.blade.php's top row). The search
   component's own markup (<form class="bb-form-quick-search tp-header-search">
   > .tp-header-search-wrapper > .tp-header-search-box/-category/-btn) never
   claimed that width — .tp-header-search-box already has width:100% in
   theme.css, but that's 100% of its own auto flex-basis, not of the row, so
   the whole search bar rendered narrow with unused space after it. Desktop
   -only, matching .tp-header-mega-search's own d-none d-lg-flex visibility. */
@media (min-width: 992px) {
  .tp-header-mega-search .tp-header-search {
    width: 100%;
  }

  .tp-header-mega-search .tp-header-search-box {
    flex: 1 1 auto;
  }
}

/* Sticky header search bar (partials/header/sticky.blade.php's middle
   column) — reuses .tp-header-mega-search above for width/flex, this only
   shortens it to fit the sticky bar's tighter 15px/15px vertical padding
   (theme.css) so it doesn't stretch the bar taller than the logo/action
   icons beside it. Desktop-only, matching the column's own
   d-none d-lg-flex visibility. */
@media (min-width: 992px) {
  .mart24-sticky-search .tp-header-search-wrapper {
    min-height: 40px;
  }

  .mart24-sticky-search .tp-header-search-box input {
    height: 40px;
  }

  .mart24-sticky-search .tp-header-search-btn button {
    width: 44px;
    height: 40px;
    line-height: 40px;
  }
}

/* ------------------------------------------------------------------
 * Milestone 17 — Recently Purchased toast
 * ------------------------------------------------------------------
 * Real completed-order social proof (mart24/recently-purchased-feed),
 * replacing the deactivated fake "Sale Popup" plugin. Bottom-left so it
 * never collides with the bottom-right WhatsApp/Messenger floats; bottom
 * offset on mobile clears the sticky bottom nav the same way
 * whatsapp-float.blade.php already does.
 */

.mart24-rpt {
  position: fixed;
  left: 20px;
  bottom: 30px;
  z-index: 99998;
  max-width: 320px;
  width: calc(100% - 40px);
  display: flex;
  align-items: center;
  gap: var(--mart24-space-3);
  background: #fff;
  border-radius: var(--mart24-radius-md);
  box-shadow: var(--mart24-shadow-lg);
  padding: var(--mart24-space-3);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.mart24-rpt--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mart24-rpt__close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--mart24-muted);
  cursor: pointer;
  padding: 4px;
}

.mart24-rpt__link {
  display: flex;
  align-items: center;
  gap: var(--mart24-space-3);
  text-decoration: none;
  width: 100%;
}

.mart24-rpt__img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: var(--mart24-radius-sm);
  flex: 0 0 auto;
}

.mart24-rpt__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mart24-rpt__title {
  font-size: var(--mart24-fs-sm);
  font-weight: 600;
  color: var(--mart24-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mart24-rpt__meta {
  font-size: var(--mart24-fs-xs, 12px);
  color: var(--mart24-muted);
}

.mart24-rpt__ago {
  font-size: var(--mart24-fs-xs, 12px);
  color: var(--mart24-muted);
}

@media (max-width: 767.98px) {
  .mart24-rpt {
    left: 10px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    max-width: none;
    width: calc(100% - 20px);
  }
}

/* ------------------------------------------------------------------
 * Milestone 17 — Cart icon added to the sticky mobile bottom nav
 * ------------------------------------------------------------------
 * Scoped to this one badge only — does not touch .tp-header-action-badge
 * (the equivalent badge in the desktop/mobile top header, unmodified).
 */
.mart24-bottom-nav-cart-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--mart24-radius-pill);
  background: var(--tp-theme-primary, #0989ff);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

/* ------------------------------------------------------------------
 * Milestone 19 — Order tracking progress stepper
 * ------------------------------------------------------------------
 * Shared by guest Track Order and the logged-in My Orders detail page
 * (platform/plugins/ecommerce/resources/views/themes/includes/
 * order-tracking-detail.blade.php). Only ever reflects real order/
 * shipment status values reached — never a simulated in-between step.
 */
.mart24-order-tracker {
  margin-bottom: 24px;
  padding: 20px 16px;
  background: #fff;
  border-radius: var(--mart24-radius-md, 8px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.mart24-order-tracker__steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}

.mart24-order-tracker__step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.mart24-order-tracker__step::before {
  content: '';
  position: absolute;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--mart24-border, #e4e7ec);
  z-index: 0;
}

.mart24-order-tracker__step:first-child::before {
  display: none;
}

.mart24-order-tracker__step.is-done::before {
  background: var(--tp-theme-primary, #0989ff);
}

.mart24-order-tracker__dot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--mart24-border, #e4e7ec);
  color: var(--mart24-muted, #667085);
  font-size: 13px;
  font-weight: 600;
}

.mart24-order-tracker__step.is-done .mart24-order-tracker__dot {
  background: var(--tp-theme-primary, #0989ff);
  border-color: var(--tp-theme-primary, #0989ff);
  color: #fff;
}

.mart24-order-tracker__step.is-current .mart24-order-tracker__dot {
  border-color: var(--tp-theme-primary, #0989ff);
  color: var(--tp-theme-primary, #0989ff);
}

.mart24-order-tracker__label {
  font-size: var(--mart24-fs-xs, 12px);
  color: var(--mart24-muted, #667085);
}

.mart24-order-tracker__step.is-done .mart24-order-tracker__label,
.mart24-order-tracker__step.is-current .mart24-order-tracker__label {
  color: var(--mart24-text, #1d2939);
  font-weight: 600;
}

.mart24-order-tracker--cancelled {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mart24-danger, #d92d20);
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .mart24-order-tracker__label {
    font-size: 10px;
  }

  .mart24-order-tracker__dot {
    width: 26px;
    height: 26px;
  }
}

/* ==================================================================
 * Mobile UI Fixes — Aug 2026
 * ------------------------------------------------------------------
 * Three reported issues, all scoped to <576px (phones) unless noted:
 *
 * 1. Header logo too small / too much empty vertical space around it.
 * 2. Header area had more empty vertical space than the content needed.
 * 3. Homepage product carousels (Featured Products, Recently Viewed,
 *    Flash Sale — the swiper-based sections) showed one full-width card
 *    per screen on phones instead of two side by side. The real fix for
 *    that is the `slidesPerView` breakpoint in mart24-featured-products.js
 *    and mart24-flash-sale.js (was hard-coded to 1 below 576px); this
 *    file only adds the matching *compact* card sizing so a card built
 *    for a ~280px desktop column still reads cleanly at ~140-180px.
 *
 * Nothing here touches tablet (>=768px) or desktop layout, and the
 * standard Botble/Bootstrap product grid (category, search, brand,
 * related, cross-sell, up-sell — all built on Bootstrap's `row-cols-*`
 * or already have a working 2-up mobile breakpoint) is left untouched
 * since it already renders 2 columns on phones.
  *
 * Round 2 (still Aug 2026) — two more reports after the above shipped:
 *
 * 4. The blue "Group Buy" icon in the mobile header actions cluster was
 *    effectively dead space / looked "empty": `.tp-header-main .logo`
 *    gets `transform: scale(1.83)` (see Premium Header Polish above) to
 *    work around an inline `style="max-height:35px !important"` on the
 *    <img> that no external CSS can out-specificity. That transform
 *    scales the WHOLE `.logo` box, not just the ~42px-wide image inside
 *    it — theme.css gives `.logo` a ~128px box (empty space around the
 *    small image, presumably sized for a wider desktop wordmark), so
 *    the scaled box balloons to ~299px. `transform` also promotes the
 *    element to its own stacking context, so that oversized (mostly
 *    invisible/transparent) box paints and hit-tests OVER the Group Buy
 *    button next to it — confirmed via elementFromPoint() at the Group
 *    Buy button's center returning the logo <img>. Fixed below by
 *    shrinking `.logo`'s own box to its content before the scale is
 *    applied, so the transformed box matches the visible logo instead
 *    of ballooning into the neighbouring column.
 * 5. `.mart24-header-groupbuy-btn--compact` (icon-only mobile variant,
 *    padding 8px 10px) was being silently overridden back to the full
 *    11px/22px padding by a later same-specificity `.mart24-header-
 *    groupbuy-btn` rule in the "Premium Header Polish" section — fixed
 *    at that rule's definition above, not here (not phone-specific).
 * 6. Category Showcase ("Solar & Green Energy" etc., shares the same
 *    `.mart24-featured-card` markup as Featured Products) showed
 *    `slidesPerView: 1.5` on phones — a "peek" carousel that read as
 *    "only one product." Real fix is in mart24-category-showcase.js
 *    (same breakpoint change as Featured Products/Flash Sale); the
 *    compact card CSS below already covers it since it's the same card
 *    component.
* ================================================================== */

@media (max-width: 575.98px) {
  /* --- 1 & 2: Header logo + vertical spacing -----------------------
     The 1.83x logo scale and 12px row padding themselves are handled
     sitewide by the ".tp-header-main, .tp-header-sticky-area" rules
     above (Premium Header Polish, just extended to cover the sticky
     header too) — this block only adds phone-specific extra tightening
     on top of that shared baseline. */

  /* Original `.logo { margin: 10px 0; }` (theme.css) is still the
     largest remaining contributor to a tall header row on narrow
     phones once the row padding above is already tight. Tightened here
     instead of overridden with a negative margin hack. */
  .tp-header-main .logo,
.tp-header-sticky-area .logo {
  margin: 4px 0;
  /* Round 2 fix (see file header comment, item 4): shrink the box to
     its content BEFORE the 1.83x scale is applied, so the scaled
     (and stacking-context-promoted) box stops overlapping/blocking
     clicks on the Group Buy button to its right. */
  width: max-content;
}

  /* The "customer support" / announcement message above the main header
     row (header/top.blade.php) wraps to two lines on narrow phones at
     its desktop font size, which is what actually inflates that bar's
     height — not empty space, just oversized type for the column width.
     Compacting the text tightens the bar without hiding real content. */
  .tp-header-top .tp-header-top-menu-item,
  .tp-header-top-2 .tp-header-top-menu-item {
    padding: 4px 0;
  }

  .tp-header-top [class*="mart24"],
  .tp-header-top .position-relative {
    font-size: 12px;
    line-height: 1.4;
  }

  /* --- 3: Compact 2-up product cards ------------------------------- */

  .mart24-featured-card__content,
  .mart24-flashsale-card__content {
    padding: var(--mart24-space-3) var(--mart24-space-3) var(--mart24-space-4);
  }

  .mart24-featured-card__title,
  .mart24-flashsale-card__title {
    font-size: 13px;
    min-height: calc(13px * 1.4 * 2);
  }

  .mart24-featured-card .tp-product-price-wrapper,
  .mart24-flashsale-card__price-new {
    font-size: 14px;
  }

  .mart24-featured-card__featured-badge {
    font-size: 10px;
    padding: 3px 6px;
  }

  .mart24-flashsale-card__btn {
    padding: 8px var(--mart24-space-3);
    font-size: 12px;
  }

  /* Recently Viewed / Featured Products slides stretch to fill their
     swiper-slide via `.mart24-featured-products__slide { display: flex }`
     already in this file — at 2-up they just need a touch less internal
     gap so the pair doesn't crowd the 320-360px screens. */
  .mart24-featured-products-slider,
  .mart24-flashsale-premium-slider {
    padding-bottom: 2px;
  }
}


/* Group Buy mobile title legibility fix, scoped to this page only */
@media (max-width: 767px) {
  .breadcrumb__area:has(+ .tp-page-area .mart24-groupbuy-landing) {
    position: relative;
    overflow: hidden;
  }
  .breadcrumb__area:has(+ .tp-page-area .mart24-groupbuy-landing)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    z-index: 1;
  }
  .breadcrumb__area:has(+ .tp-page-area .mart24-groupbuy-landing) .breadcrumb__content {
    position: relative;
    z-index: 2;
  }
}