/* ============================================================================
   Storefront update — 2026-11-13
   1. sticky header fix (mobile navigation no longer scrolls away)
   2. mobile-only category rail that switches category
   3. language switch button + Bangla typography
   Loaded after daraz-theme.css so it can correct rules from that sheet.
   ========================================================================= */

:root {
  --site-header-h: 76px;
  --brand: #f85606;
  --brand-soft: #fff2ec;
}
@media (max-width: 992px) {
  :root { --site-header-h: 64px; }
}
@media (max-width: 700px) {
  :root { --site-header-h: 58px; }
}

/* ---------------------------------------------------------------------------
   1. Sticky header
   `overflow-x:hidden` on html/body turns the body into the scroll container,
   which silently disables `position:sticky` on the header. `clip` clips
   horizontally without creating a scroll container, so the header now stays
   pinned while scrolling. Browsers without `clip` keep the old behaviour.
   ------------------------------------------------------------------------ */
/**
 * Two legacy rules were breaking `position:sticky` on the header, and both need
 * to be answered here with matching specificity:
 *
 *   style.css   @media(max-width:767px){ .app-home { overflow-x:hidden } }
 *   site-fixes  body:not(.scroll-lock-active), html:not(.scroll-lock-active)
 *               { overflow-y:auto !important }
 *
 * `overflow:hidden` and `overflow-y:auto` each turn the element into a scroll
 * container, so the sticky header sticks to a container that never scrolls —
 * it looks like the bar simply scrolls away. `clip` clips horizontally without
 * creating a scroll container, and `visible` keeps body out of the way while
 * the page still scrolls normally on the root element.
 *
 * The drawer/modal scroll lock keeps working: every selector below excludes
 * `.scroll-lock-active`, which still forces `overflow:hidden !important`.
 */
html:not(.scroll-lock-active),
body:not(.scroll-lock-active),
body.app-home:not(.scroll-lock-active),
.app-home:not(.scroll-lock-active) {
  overflow-x: clip !important;
  overflow-y: visible !important;
  max-width: 100%;
}

.site-header.market-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 240;
}

/* `top: var(--notice-height)` from the legacy sheet resolves to `auto` when the
   ticker is hidden, which also lets the bar scroll away — pin it to the top. */

/* The drawer must still be able to scroll on its own. */
.main-nav {
  overscroll-behavior: contain;
}

@media (max-width: 992px) {
  .site-header.market-header {
    position: sticky !important;
    top: 0 !important;
  }
  /* Legacy category chips are replaced by the new rail. */
  .mobile-category-scroll {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
   2. Mobile category rail
   Hidden from 701px up: the desktop category section is unchanged.
   ------------------------------------------------------------------------ */
.mobile-cat-tabs {
  display: none;
}

@media (max-width: 700px) {
  .mobile-cat-tabs {
    display: flex;
    align-items: stretch;
    position: relative;
    background: #fff;
    border-bottom: 1px solid #efefef;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }
  .mobile-cat-tabs.is-sticky {
    position: sticky;
    top: var(--site-header-h);
    z-index: 200;
  }

  .mct-track {
    display: flex;
    flex: 1 1 auto;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: 6px 4px 4px;
    /* Vertical page scrolling stays with the browser; horizontal swipes are
       handled by the pointer drag in MobileCategoryTabs, which works the same
       on iOS and Android and can be flinged in either direction. */
    touch-action: pan-y;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
  }
  .mct-track.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
  }
  .mct-track.is-dragging .mct-tab {
    scroll-snap-align: none;
  }

  /* Swiping the products (not the rail) flips to the next category feed. The
     browser keeps vertical scrolling; horizontal drags are read by the page. */
  .mobile-swipe-zone {
    touch-action: pan-y;
  }

  /* A swipe slides the new feed in from the side the finger came from, so the
     page turn is visible rather than an instant swap. */
  .mobile-cat-feed[data-slide="next"] {
    animation: mct-slide-next 0.22s ease-out;
  }
  .mobile-cat-feed[data-slide="prev"] {
    animation: mct-slide-prev 0.22s ease-out;
  }
  @keyframes mct-slide-next {
    from { transform: translateX(7%); opacity: 0.35; }
    to { transform: none; opacity: 1; }
  }
  @keyframes mct-slide-prev {
    from { transform: translateX(-7%); opacity: 0.35; }
    to { transform: none; opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mobile-cat-feed[data-slide] { animation: none; }
  }
  .mct-track::-webkit-scrollbar {
    display: none;
  }

  .mct-tab {
    flex: 0 0 auto;
    width: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: #3f3f3f;
    text-decoration: none !important;
    font: inherit;
    cursor: pointer;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
  }

  .mct-thumb {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f7f7f7;
    border: 2px solid transparent;
    color: var(--brand);
    font-size: 19px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .mct-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
  }
  .mct-tab.is-active .mct-thumb {
    border-color: var(--brand);
    box-shadow: 0 2px 8px rgba(248, 86, 6, 0.22);
  }

  .mct-name {
    font-size: 10.5px;
    line-height: 1.15;
    text-align: center;
    max-width: 72px;
    min-height: 24px;
    color: #4a4a4a;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mct-tab.is-active .mct-name {
    color: var(--brand);
    font-weight: 700;
  }

  .mct-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: #555;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    z-index: 3;
    cursor: pointer;
  }
  .mct-prev { left: 2px; }
  .mct-next { right: 2px; }
  .mct-arrow:active {
    transform: translateY(-50%) scale(0.94);
  }

  /* The selected category replaces the desktop feed on mobile only. */
  .mobile-cat-feed {
    display: block;
    padding: 8px 0 4px;
  }
  .home-feed.is-mobile-hidden {
    display: none !important;
  }

  /* One category section is enough on a phone. */
  .market-category-showcase {
    display: none !important;
  }
  .app-home .market-category-showcase {
    display: none !important;
  }
}

@media (min-width: 701px) {
  .mobile-cat-feed {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
   3. Language switch
   ------------------------------------------------------------------------ */
.lang-switch {
  /* The button reads "বাংলা" while the site is in English, so it always needs
     a Bengali-capable face (Hind Siliguri ships with the site). */
  font-family: 'Hind Siliguri', 'Noto Sans Bengali', 'Segoe UI', Roboto, system-ui, sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.lang-switch:hover,
.lang-switch:focus-visible {
  background: rgba(255, 255, 255, 0.26);
  color: #fff;
}
.lang-switch i {
  font-size: 12px;
}

.lang-switch-drawer {
  font-family: 'Hind Siliguri', 'Noto Sans Bengali', 'Segoe UI', Roboto, system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 12px 16px;
  padding: 10px 12px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fafafa;
  color: #333;
  cursor: default;
}
.lang-switch-drawer .lang-switch-label {
  font-size: 13px;
  font-weight: 600;
  color: #444;
}
.lang-switch-drawer .lang-switch-options {
  display: inline-flex;
  border: 1px solid #e2e2e2;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.lang-switch-drawer .lang-opt {
  border: 0;
  background: transparent;
  color: #555;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
}
.lang-switch-drawer .lang-opt.is-active {
  background: var(--brand);
  color: #fff;
}

@media (max-width: 700px) {
  /* Give the header room for the language button beside the cart. */
  .market-header-inner {
    grid-template-columns: 34px 78px minmax(0, 1fr) auto !important;
  }
  .app-home .market-header-inner {
    grid-template-columns: 34px 78px minmax(0, 1fr) auto !important;
  }
  .lang-switch {
    font-size: 10px;
    padding: 3px 7px;
    gap: 4px;
  }
  .lang-switch i {
    font-size: 11px;
  }
}
@media (max-width: 420px) {
  .market-header-inner,
  .app-home .market-header-inner {
    grid-template-columns: 30px 64px minmax(0, 1fr) auto !important;
  }
  .lang-switch i {
    display: none;
  }
  .lang-switch-code {
    font-size: 10px;
  }
  .lang-switch {
    padding: 5px 8px;
  }
}

/* Bangla typography: the bundled Hind Siliguri face covers Bengali glyphs. */
.mct-name,
.lang-switch-drawer .lang-opt,
html.lang-bn body,
html.lang-bn .mct-name,
html.lang-bn button,
html.lang-bn input,
html.lang-bn select,
html.lang-bn textarea {
  font-family: 'Hind Siliguri', 'Noto Sans Bengali', 'Segoe UI', Roboto, system-ui, sans-serif;
}
html.lang-bn body {
  letter-spacing: 0;
}

/* ============================================================================
   Cart page (rewritten): tick boxes, quantity steppers and a bottom bar that
   carries the running subtotal into checkout. Mobile is a flat Daraz-style
   list; from 701px up it is the same list beside the order summary card.
   ========================================================================= */
:root {
  --cart2-line: #ececec;
  --cart2-muted: #7a7a7a;
  --cart2-accent: var(--primary, #ff4b0b);
  /* FloatingWidgets measures the real nav height into --bottom-nav-h */
  --cart2-bottom-nav: var(--bottom-nav-h, 79px);
}

.cart-page {
  background: #f5f5f5;
  padding-bottom: 24px;
}
.cart-page .container {
  max-width: 1180px;
}

.cart2 {
  padding: 12px 0 0;
}
.cart2-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px 12px;
}
.cart2-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: #111;
}
.cart2-count {
  font-size: 12px;
  color: var(--cart2-muted);
  background: #fff;
  border-radius: 999px;
  padding: 3px 10px;
  z-index: 0;
}
.cart2-clear {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  color: var(--cart2-muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.cart2-clear .fa-square-check {
  color: var(--cart2-accent);
}

.cart2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 18px;
  align-items: start;
}

.cart2-list-wrap,
.cart2-summary-card,
.cart2-empty {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.cart2-list-wrap {
  overflow: hidden;
}
.cart2-list {
  display: block;
}

/* ---- one line ------------------------------------------------------------ */
.cart2-item {
  display: grid;
  grid-template-columns: 26px 96px minmax(0, 1fr);
  gap: 10px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--cart2-line);
  background: #fff;
}
.cart2-item:last-child {
  border-bottom: 0;
}
.cart2-item.is-picked {
  background: #fffdfb;
}

/* tick box: a real checkbox hidden behind a drawn box, so it stays accessible */
.cart2-check {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  align-self: start; /* never stretch over the rows below */
  width: 20px;
  height: 22px;
  cursor: pointer;
  margin-top: 2px;
}
/* The real input sits exactly on top of the drawn box and nowhere else, so a
   tap can only ever hit the row it belongs to. */
.cart2-check input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 20px;
  height: 22px;
  margin: 0;
  cursor: pointer;
}
.cart2-check-box {
  width: 20px;
  height: 20px;
  border: 1.5px solid #c9c9c9;
  border-radius: 4px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.cart2-check-box i {
  font-size: 11px;
  color: #fff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.cart2-check input:checked + .cart2-check-box {
  background: var(--cart2-accent);
  border-color: var(--cart2-accent);
}
.cart2-check input:checked + .cart2-check-box i {
  opacity: 1;
  transform: none;
}
.cart2-check input:indeterminate + .cart2-check-box {
  background: var(--cart2-accent);
  border-color: var(--cart2-accent);
}
.cart2-check input:indeterminate + .cart2-check-box i {
  opacity: 0;
}
.cart2-check input:indeterminate + .cart2-check-box::after {
  content: '';
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
}
.cart2-check input:focus-visible + .cart2-check-box {
  outline: 2px solid var(--cart2-accent);
  outline-offset: 2px;
}

.cart2-thumb {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 8px;
  overflow: hidden;
  background: #f7f7f7;
}
.cart2-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart2-info {
  min-width: 0;
}
.cart2-name {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  color: #111;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart2-brand {
  margin-top: 3px;
  font-size: 12px;
  color: var(--cart2-muted);
}
.cart2-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.cart2-variants span {
  font-size: 11.5px;
  color: #555;
  background: #f4f4f4;
  border-radius: 4px;
  padding: 2px 6px;
}
.cart2-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}
.cart2-price {
  font-size: 17px;
  font-weight: 700;
  color: var(--cart2-accent);
}
.cart2-old {
  font-size: 12.5px;
  color: #9a9a9a;
  text-decoration: line-through;
}

.cart2-line-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.cart2-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cart2-line);
  border-radius: 6px;
  overflow: hidden;
  height: 32px;
}
.cart2-qty button {
  width: 30px;
  height: 100%;
  border: 0;
  background: #fff;
  color: #333;
  font-size: 11px;
  cursor: pointer;
}
.cart2-qty button:disabled {
  color: #cfcfcf;
  cursor: default;
}
.cart2-qty input {
  width: 42px;
  height: 100%;
  border: 0;
  border-left: 1px solid var(--cart2-line);
  border-right: 1px solid var(--cart2-line);
  text-align: center;
  font: inherit;
  font-size: 13px;
  -moz-appearance: textfield;
}
.cart2-qty input::-webkit-outer-spin-button,
.cart2-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cart2-remove {
  border: 0;
  background: none;
  color: #9a9a9a;
  font-size: 13px;
  cursor: pointer;
  padding: 6px;
}
.cart2-remove:hover {
  color: #d33;
}

/* ---- view more / coupon -------------------------------------------------- */
.cart2-more {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-top: 1px solid var(--cart2-line);
  background: #fff;
  color: #333;
  font: inherit;
  font-size: 13px;
  padding: 11px 0;
  cursor: pointer;
}
.cart2-more i {
  font-size: 10px;
}

.cart2-coupon {
  border-top: 1px solid var(--cart2-line);
  padding: 12px 14px 14px;
}
.cart2-coupon-row {
  display: flex;
  gap: 8px;
}
.cart2-coupon-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  border: 1px solid var(--cart2-line);
  border-radius: 6px;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
}
.cart2-coupon-btn {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--cart2-accent);
  background: #fff;
  color: var(--cart2-accent);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cart2-coupon-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.cart2-coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: #1a7f37;
  background: #f0fdf4;
  border: 1px solid #cdeed8;
  border-radius: 6px;
  padding: 9px 12px;
}
.cart2-coupon-applied button {
  border: 0;
  background: none;
  color: #b42318;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

/* ---- summary ------------------------------------------------------------- */
.cart2-summary {
  position: sticky;
  top: 76px;
}
.cart2-summary-card {
  padding: 14px 16px 16px;
}
.cart2-summary-card h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.cart2-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: #444;
  padding: 6px 0;
}
.cart2-summary-row small {
  display: block;
  font-size: 11px;
  color: var(--cart2-muted);
}
.cart2-summary-row.is-discount {
  color: #1a7f37;
}
.cart2-summary-row.is-grand {
  border-top: 1px solid var(--cart2-line);
  margin-top: 8px;
  padding-top: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #111;
}
.cart2-summary-row.is-grand span:last-child {
  color: var(--cart2-accent);
  font-size: 20px;
}
.cart2-checkout {
  display: block;
  margin-top: 14px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  border-radius: 6px;
  background: var(--cart2-accent);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none !important;
}
.cart2-checkout.is-disabled {
  background: #e2e2e2;
  color: #9a9a9a !important;
  pointer-events: none;
}
.cart2-trust {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--cart2-muted);
}
.cart2-trust span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---- empty --------------------------------------------------------------- */
.cart2-empty {
  text-align: center;
  padding: 54px 20px;
}
.cart2-empty i {
  font-size: 40px;
  color: #d6d6d6;
}
.cart2-empty p {
  margin: 14px 0 18px;
  color: #666;
}
.cart2-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border-radius: 6px;
  background: var(--cart2-accent);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none !important;
}

/* ---- bottom bar: mobile only -------------------------------------------- */
.cart2-bar {
  display: none;
}

@media (max-width: 700px) {
  .cart-page {
    padding-bottom: calc(var(--cart2-bottom-nav) + 74px + env(safe-area-inset-bottom));
  }
  .cart2 {
    padding-top: 0;
  }
  .cart2-head {
    padding: 10px 12px 10px;
    background: #fff;
    border-bottom: 1px solid var(--cart2-line);
  }
  .cart2-title {
    font-size: 17px;
  }
  .cart2-grid {
    display: block;
  }
  .cart2-list-wrap,
  .cart2-summary-card,
  .cart2-empty {
    border-radius: 0;
    box-shadow: none;
  }
  .cart2-list-wrap {
    margin-top: 8px;
  }
  .cart2-summary {
    position: static;
    margin-top: 8px;
  }
  .cart2-summary-card {
    border-radius: 0;
  }
  .cart2-item {
    grid-template-columns: 24px 84px minmax(0, 1fr);
    gap: 9px;
    padding: 12px;
  }
  .cart2-thumb {
    width: 84px;
    height: 84px;
  }
  .cart2-name {
    font-size: 13px;
  }
  .cart2-price {
    font-size: 16px;
  }
  .cart2-line-tools {
    margin-top: 8px;
  }
  .cart2-trust {
    display: none;
  }
  .cart2-checkout {
    display: none; /* the pinned bar carries the button on mobile */
  }

  .cart2-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--cart2-bottom-nav) + env(safe-area-inset-bottom));
    z-index: 290;
    background: #fff;
    border-top: 1px solid var(--cart2-line);
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.07);
    padding: 8px 10px;
  }
  /* The bar's tick box carries its "All" label, so it must be free to size
     itself; the drawn box stays exactly 20x20 instead of being squeezed. */
  .cart2-bar .cart2-check {
    align-items: center;
    padding-top: 0;
    margin-top: 0;
    flex: 0 0 auto;
    width: auto;
    height: 32px;
    gap: 7px;
  }
  .cart2-bar .cart2-check-box {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
  }
  .cart2-bar .cart2-check-box i {
    font-size: 11px;
  }
  .cart2-bar-label {
    font-size: 12.5px;
    color: #444;
    white-space: nowrap;
  }
  .cart2-bar-totals {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    line-height: 1.25;
  }
  .cart2-bar-total {
    font-size: 12.5px;
    color: #333;
    white-space: nowrap;
  }
  .cart2-bar-total strong {
    color: var(--cart2-accent);
    font-size: 15px;
  }
  .cart2-bar-shipping {
    font-size: 11px;
    color: var(--cart2-muted);
  }
  .cart2-bar-btn {
    flex: 0 0 auto;
    height: 40px;
    line-height: 40px;
    padding: 0 16px;
    border-radius: 5px;
    background: var(--cart2-accent);
    color: #fff !important;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none !important;
    white-space: nowrap;
  }
  .cart2-bar-btn.is-disabled {
    background: #e9e9e9;
    color: #9d9d9d !important;
  }
}

/* The checkout page's own pinned bar sits on the app nav too, instead of
   covering it or hiding behind it. */
@media (max-width: 767px) {
  .ck-mobile-bar {
    bottom: calc(var(--bottom-nav-h, 79px) + env(safe-area-inset-bottom, 0px));
  }
}

/* Floating buttons must not sit on top of the cart's pinned bar, which they
   otherwise cover exactly where the Check Out button is. */
@media (max-width: 767px) {
  body:has(.cart2-bar) .ls-toggle {
    bottom: calc(var(--cart2-bottom-nav) + 74px + env(safe-area-inset-bottom));
  }
  body:has(.cart2-bar) .ls-panel {
    bottom: calc(var(--cart2-bottom-nav) + 136px + env(safe-area-inset-bottom));
  }
  body:has(.cart2-bar) .market-whatsapp {
    bottom: calc(var(--cart2-bottom-nav) + 74px + env(safe-area-inset-bottom));
  }
}

/* ============================================================================
   Mobile menu drawer (hamburger), all pages.
   The drawer was assembled from three stylesheets that disagreed: a flex column
   with justify-content:center floated the title and links into the middle of the
   screen, the head lost its padding off the home page, and the overlay never
   appeared. One block now owns the whole layout below 993px.
   ========================================================================= */
@media (max-width: 992px) {
  /* ---------------------------------------------------------------------
     Phone menu drawer. This block is the single source of truth for the
     sheet: the legacy `.main-nav` flex/centre rules are neutralised here so
     the panel cannot be re-flowed by style.css or daraz-theme.css.
     --------------------------------------------------------------------- */
  .main-nav {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(348px, 88vw) !important;
    height: 100vh;
    height: 100dvh;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 20px 20px 0;
    box-shadow: 0 0 45px rgba(15, 15, 20, 0.3);
    z-index: 1000 !important;
    overflow: hidden !important;
    transform: translateX(-102%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.3s;
  }
  .main-nav.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  /* ---- Title bar ------------------------------------------------------- */
  .main-nav .drawer-head {
    display: flex !important;
    flex: 0 0 auto !important;
    order: -1;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px;
    min-height: 62px;
    background: linear-gradient(135deg, var(--primary, #ff4b0b) 0%, #ff7f38 100%);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 3;
    box-shadow: 0 2px 10px rgba(255, 75, 11, 0.25);
  }
  .main-nav .drawer-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.2;
  }
  .main-nav .drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
  }
  .main-nav .drawer-close:active {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0.94);
  }

  /* ---- Scrolling body -------------------------------------------------- */
  .main-nav .drawer-links {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 calc(16px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    scrollbar-width: thin;
  }

  /* Groups of links, separated by quiet captions instead of a wall of rows. */
  .main-nav .drawer-section {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 15px 16px 8px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9aa0a6;
    background: #fafbfc;
    border-top: 1px solid #f0f1f3;
    border-bottom: 1px solid #f0f1f3;
  }

  /* `daraz-theme.css` forces `.main-nav.open .drawer-only{display:block}` with
     !important, so these rows have to out-specify it or they collapse to a
     stacked block (icon above the label). */
  .main-nav .drawer-links a.drawer-row,
  .main-nav .drawer-links a.mobile-cat-parent {
    display: flex !important;
    align-items: center;
    gap: 14px;
    min-height: 54px;
    padding: 9px 16px !important;
    margin: 0 !important;
    font-size: 15px;
    font-weight: 600;
    color: #23262b !important;
    text-decoration: none !important;
    background: #fff;
    border: 0 !important;
    border-bottom: 1px solid #f5f6f7 !important;
    transition: background 0.15s ease;
  }
  .main-nav .mobile-cat-parent {
    font-weight: 500;
    min-height: 56px;
  }
  .main-nav .drawer-row:active,
  .main-nav .mobile-cat-parent:active,
  .main-nav .drawer-row:focus-visible,
  .main-nav .mobile-cat-parent:focus-visible {
    background: #fff5ef !important;
  }

  .main-nav .drawer-row-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Chevron on the right of every row. */
  .main-nav .drawer-row::after,
  .main-nav .mobile-cat-parent::after {
    content: '';
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-right: 1.6px solid #cbd0d6;
    border-bottom: 1.6px solid #cbd0d6;
    transform: rotate(-45deg);
  }

  /* Icon chips keep every row on the same rhythm. */
  .main-nav .drawer-ico,
  .main-nav .drawer-cat-ico,
  .main-nav .lang-switch-drawer .lang-switch-label > i {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #fff3ec;
    color: var(--primary, #ff4b0b);
    font-size: 14px;
    line-height: 1;
    overflow: hidden;
  }
  .main-nav .drawer-cat-ico {
    background: #f7f8fa;
    border: 1px solid #eef0f3;
  }
  .main-nav .drawer-cat-ico .side-cat-icon,
  .main-nav .drawer-cat-ico img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
  }

  /* Categories: no double rules, the caption band already separates them. */
  .main-nav .nav-cat-mobile .mobile-cat-group {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .main-nav .nav-cat-mobile .mobile-cat-row {
    display: block !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .main-nav .nav-cat-mobile .mobile-cat-group:last-child .mobile-cat-parent {
    border-bottom: 0 !important;
  }

  /* Language row: label on the left, pill on the right. */
  .main-nav .lang-switch-drawer {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin: 0 !important;
    padding: 10px 16px !important;
    background: #fff;
    border: 0 !important;
    border-bottom: 1px solid #f5f6f7 !important;
  }
  .main-nav .lang-switch-drawer .lang-switch-label {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    font-weight: 600;
    color: #23262b;
  }
  .main-nav .lang-switch-drawer .lang-switch-options {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: #f4f5f7;
    border-radius: 999px;
  }
  .main-nav .lang-switch-drawer .lang-switch-options button {
    min-width: 62px;
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #5f6670;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
  }
  .main-nav .lang-switch-drawer .lang-switch-options button.active,
  .main-nav .lang-switch-drawer .lang-switch-options button[aria-pressed='true'] {
    background: var(--primary, #ff4b0b);
    color: #fff;
  }

  .main-nav .drawer-foot {
    margin: 0;
    padding: 18px 16px 4px;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: #b7bcc2;
    text-align: center;
  }

  /* ---- Dim layer ------------------------------------------------------- */
  .nav-overlay {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(12, 14, 18, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
    z-index: 990 !important;
  }
  .nav-overlay.show {
    opacity: 1;
    visibility: visible;
  }

  /* The drawer lives inside the header, so the header has to rise above the
     dim layer — otherwise the overlay paints over the whole panel. */
  body.menu-open .site-header {
    z-index: 1200 !important;
  }
  body.menu-open,
  body.app-home.menu-open {
    overflow: hidden !important;
    touch-action: none;
  }
  body.menu-open .nav-overlay.show {
    touch-action: auto;
  }
}