/* Merrix Customer R130 — tablet portrait should behave like the mobile experience.
   This layer intentionally mirrors the phone shell for tablet portrait (600–839px).
   Desktop and phone rules remain untouched. */

@media (min-width: 600px) and (max-width: 1199px) and (orientation: landscape) {
  body.mobile-landscape-lock { overflow: hidden; }
  .mobile-rotate-guard { display: grid !important; }
  .mobile-bottom-nav,
  .mobile-bottom-spacer { display: none !important; }
}

@media (min-width: 600px) and (max-width: 839px) and (orientation: portrait) {
  :root {
    --header-h: 50px;
    --logo-w: 132px;
    --mobile-nav-h: 48px;
    --mobile-safe-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px));
    --mobile-shell-top: 47px;
    --mobile-shell-bottom: var(--mobile-safe-bottom);
    --mobile-page-top-gap: 36px;
    --mobile-page-margin: 24px;
    --mobile-shell-height: calc(100dvh - var(--mobile-shell-top) - var(--mobile-shell-bottom));
    --tablet-canvas-width: min(760px, calc(100% - (var(--mobile-page-margin) * 2)));
  }

  html, body { overflow-x: hidden !important; }
  body {
    padding-bottom: var(--mobile-safe-bottom) !important;
    background: var(--bg);
  }
  body.mobile-landscape-lock { overflow: hidden !important; }
  body.drawer-open,
  body.language-sheet-open,
  body.search-panel-open,
  body.login-panel-open,
  body.order-drawer-open,
  body.panel-scroll-lock { overflow: hidden !important; }
  .page-main { padding-top: 0 !important; }

  .site-header,
  .mobile-bottom-nav,
  .home-browser,
  .catalog-page,
  .order-shell--invoice,
  .recommended-shell,
  .submit-shell,
  .login-shell,
  .search-shell,
  .about-shell,
  .info-shell,
  .footer-stage,
  .footer-cover,
  .footer-inner {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  /* Header: same mobile identity */
  .site-header {
    height: var(--header-h) !important;
    padding: 0 16px !important;
    grid-template-columns: 1fr !important;
    background: rgba(241,240,236,.96) !important;
    background-color: rgba(241,240,236,.96) !important;
    backdrop-filter: blur(6px) saturate(110%) !important;
    z-index: 121 !important;
  }
  .site-header__left { justify-content: center !important; }
  .site-search,
  .site-header__right,
  .menu-btn,
  .edge-trigger { display: none !important; }

  .brand {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: var(--logo-w) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    transform: translate3d(-50%, calc(-50% + 4px), 0) !important;
    transition: transform .42s cubic-bezier(.22,1,.36,1), left .42s cubic-bezier(.22,1,.36,1) !important;
    will-change: transform, left;
    transform-origin: left center;
  }
  .brand__logo {
    width: var(--logo-w) !important;
    max-width: none !important;
    display: block !important;
    flex: 0 0 auto !important;
  }
  body.drawer-open .brand {
    left: var(--mobile-page-margin) !important;
    transform: translate3d(0, calc(-50% + 4px), 0) !important;
  }
  body.language-sheet-open .brand,
  body.search-panel-open .brand,
  body.login-panel-open .brand,
  body.order-drawer-open .brand {
    left: 50% !important;
    transform: translate3d(-50%, calc(-50% + 4px), 0) !important;
  }

  /* Bottom nav: exactly mobile treatment, not a tablet reinterpretation */
  .mobile-bottom-nav {
    display: grid !important;
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 120 !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    min-height: var(--mobile-nav-h) !important;
    height: var(--mobile-safe-bottom) !important;
    gap: 0 !important;
    padding: 2px max(12px, env(safe-area-inset-left, 0px)) calc(2px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-right, 0px)) !important;
    background: rgba(247,246,242,.96) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
    border-top: 1px solid rgba(17,17,17,.08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: auto !important;
    left: 0 !important;
    bottom: 0 !important;
  }
  .mobile-bottom-nav__item {
    width: 100% !important;
    min-height: 44px !important;
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 3px !important;
    color: rgba(17,17,17,.58) !important;
    font-size: 7px !important;
    letter-spacing: .1em !important;
  }
  .mobile-bottom-nav__item svg { width: 20px !important; height: 20px !important; display: block !important; }
  .mobile-bottom-nav__label { display: block !important; font-size: 7px !important; letter-spacing: .1em !important; white-space: nowrap !important; }
  .mobile-bottom-nav__item.is-active { color: #111 !important; }
  #mobileMenuToggle { order: 1 !important; }
  #mobileLanguageToggle { order: 2 !important; }
  #mobileSearchToggle { order: 3 !important; }
  #mobileLoginToggle { order: 4 !important; }
  #mobileOrderToggle { order: 5 !important; }
  .mobile-bottom-nav__call,
  .mobile-bottom-nav__item--call-slot { display: none !important; }
  .mobile-bottom-spacer { display: block !important; height: var(--mobile-safe-bottom) !important; }

  .drawer-overlay {
    z-index: 117 !important;
    top: var(--mobile-shell-top) !important;
    bottom: var(--mobile-shell-bottom) !important;
  }

  /* Tablet portrait uses the full Order List page instead of the injected right drawer. */
  .order-drawer,
  .order-drawer__inner,
  .order-drawer__inner--page {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .language-sheet,
  .mobile-platform-panel {
    left: 0 !important;
    right: 0 !important;
    transform: translate3d(0, 100%, 0) !important;
  }
  body.language-sheet-open .language-sheet,
  body.search-panel-open .mobile-search-panel,
  body.login-panel-open .mobile-login-panel { transform: translate3d(0, 0, 0) !important; }

  .side-drawer__inner,
  .language-sheet__panel,
  .mobile-platform-panel__inner {
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: auto !important;
    padding: var(--mobile-page-top-gap) var(--mobile-page-margin) calc(var(--mobile-safe-bottom) + 18px) var(--mobile-page-margin) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .language-sheet__hero,
  .search-hero,
  .login-hero,
  .side-drawer__hero { margin-bottom: 16px !important; }
  .language-sheet__hero,
  .mobile-search-panel .search-hero,
  .mobile-login-panel .login-hero { justify-items: center !important; text-align: center !important; }
  .side-drawer__hero h1,
  .language-sheet__hero h1,
  .mobile-search-panel .search-hero h1,
  .mobile-login-panel .login-hero h1 {
    margin: 0 !important;
    font-size: 40px !important;
    line-height: .94 !important;
    letter-spacing: -.05em !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
  }

  /* Shared page canvas: mobile structure with tablet room */
  .home-browser,
  .catalog-page,
  .order-shell--invoice,
  .recommended-shell,
  .submit-shell,
  .login-shell,
  .search-shell,
  .about-shell,
  .info-shell {
    width: var(--tablet-canvas-width) !important;
    max-width: var(--tablet-canvas-width) !important;
    margin: 0 auto !important;
    padding-top: calc(var(--header-h) + 34px) !important;
    padding-bottom: 18px !important;
  }

  /* Home remains mobile-like */
  .category-strip {
    position: sticky !important;
    top: var(--header-h) !important;
    z-index: 30 !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding: 10px 44px 10px 0 !important;
    margin-bottom: 16px !important;
    scrollbar-width: none !important;
    background: var(--bg) !important;
  }
  .category-strip::-webkit-scrollbar { display: none !important; }
  .index-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }

  /* Product detail follows phone rhythm */
  .catalog-group-box { min-height: 112px !important; padding: 12px 0 10px !important; }
  .products-page .model-stories-wrap { gap: 10px !important; padding-bottom: 18px !important; }
  .products-page .model-stories-sticky {
    top: var(--header-h) !important;
    padding: 12px 0 14px !important;
    margin-bottom: 0 !important;
  }
  .products-page .model-selector-shell .model-stories,
  .products-page .size-selector__options {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .products-page .model-selector-shell .model-stories::-webkit-scrollbar,
  .products-page .size-selector__options::-webkit-scrollbar { display: none !important; }
  .products-page .model-stories { gap: 16px !important; padding: 6px 2px 12px !important; }
  .products-page .model-story { flex: 0 0 88px !important; min-width: 88px !important; }
  .products-page .model-story__thumb { width: 72px !important; height: 72px !important; }
  .products-page .model-story::after { bottom: -8px !important; }
  .products-page .size-selector {
    top: calc(var(--header-h) + var(--stories-sticky-h, 96px)) !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    margin-bottom: 20px !important;
  }
  .products-page .size-selector__label { justify-items: start !important; text-align: left !important; }
  .products-page .size-selector__options { gap: 8px !important; }
  .products-page .model-main { grid-template-columns: 1fr !important; gap: 24px !important; padding: 24px 0 !important; }
  .products-page .design-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
  .products-page .design-card__action--mobile,
  .products-page .design-card__qty--mobile { display: grid !important; }
  .products-page .design-card__action--desktop,
  .products-page .design-card__qty--desktop { display: none !important; }
  .products-page .design-card__action--mobile {
    width: 100% !important;
    min-height: 36px !important;
    margin-top: 8px !important;
  }
  .products-page .design-card__qty--mobile {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 8px !important;
  }
  .products-page .design-card__qty-control {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 34px 1fr 34px !important;
  }

  /* Order list on tablet mirrors the desktop invoice logic, scaled to the portrait canvas */
  .orderlist-page {
    --tablet-order-title-strip-h: 72px;
    --tablet-order-panel-title-strip-h: 68px;
  }
  .orderlist-page .order-shell--invoice {
    width: var(--tablet-canvas-width) !important;
    max-width: var(--tablet-canvas-width) !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
  }
  .orderlist-page .order-hero--center {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    margin: 0 !important;
    padding: 0 0 18px !important;
    background: var(--bg) !important;
    border-bottom: 1px solid var(--line-soft) !important;
  }
  .orderlist-page .order-hero--center h1 {
    font-size: 40px !important;
    line-height: .94 !important;
    letter-spacing: -.05em !important;
  }
  .orderlist-page .order-invoice {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    border-top: 0 !important;
  }
  .orderlist-page .order-invoice__head {
    display: grid !important;
    position: sticky !important;
    z-index: 43 !important;
    grid-template-columns: 34px 64px minmax(0, 1.7fr) 72px 90px 102px 60px !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--line-soft) !important;
    background: var(--bg) !important;
    font-size: 9px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
  }
  .orderlist-page .order-invoice__head { top: calc(var(--header-h) - 1px) !important; }
  .orderlist-page .order-invoice__head span {
    min-width: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .orderlist-page .invoice-row {
    display: grid !important;
    grid-template-columns: 34px 64px minmax(0, 1.7fr) 72px 90px 102px 60px !important;
    gap: 8px !important;
    width: 100% !important;
    align-items: center !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(17,17,17,.08) !important;
  }
  .orderlist-page .invoice-row__cell { min-width: 0 !important; width: 100% !important; }
  .orderlist-page .invoice-row__rowno { grid-column: 1 !important; justify-self: center !important; text-align: center !important; }
  .orderlist-page .invoice-row__media { grid-column: 2 !important; width: 64px !important; max-width: 64px !important; margin: 0 auto !important; }
  .orderlist-page .invoice-row__main { grid-column: 3 !important; justify-items: center !important; text-align: center !important; gap: 2px !important; }
  .orderlist-page .invoice-row__group { grid-column: 4 !important; justify-self: center !important; text-align: center !important; }
  .orderlist-page .invoice-row__xcode { grid-column: 5 !important; justify-self: center !important; text-align: center !important; }
  .orderlist-page .invoice-row__footer { display: contents !important; }
  .orderlist-page .invoice-row__qty { grid-column: 6 !important; justify-content: center !important; }
  .orderlist-page .invoice-row__action { grid-column: 7 !important; justify-content: center !important; }
  .orderlist-page .invoice-row__title {
    text-align: center !important;
    justify-self: center !important;
    font-size: 11px !important;
    line-height: 1.24 !important;
    letter-spacing: .07em !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .orderlist-page .invoice-row__group,
  .orderlist-page .invoice-row__xcode strong,
  .orderlist-page .invoice-row__rowno {
    font-size: 9px !important;
    line-height: 1.2 !important;
    letter-spacing: .1em !important;
    white-space: nowrap !important;
  }
  .orderlist-page .invoice-row__xcode strong { text-align: center !important; }
  .orderlist-page .invoice-row__rowno,
  .orderlist-page .invoice-row__media,
  .orderlist-page .invoice-row__group,
  .orderlist-page .invoice-row__xcode,
  .orderlist-page .invoice-row__qty,
  .orderlist-page .invoice-row__action {
    justify-self: center !important;
    justify-items: center !important;
    text-align: center !important;
    align-self: center !important;
  }
  .orderlist-page .invoice-row__xcode {
    display: grid !important;
    place-items: center !important;
  }
  .orderlist-page .invoice-row__media {
    justify-self: center !important;
  }
  .orderlist-page .invoice-row__qty .qty-control {
    justify-content: center !important;
    min-width: 102px !important;
    width: 102px !important;
  }
  .orderlist-page .invoice-row__qty .qty-control button {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
  }
  .orderlist-page .invoice-row__qty .qty-control span {
    min-width: 36px !important;
    font-size: 10px !important;
  }
  .orderlist-page .invoice-row__action .cart-remove {
    font-size: 8px !important;
    letter-spacing: .12em !important;
    white-space: nowrap !important;
  }
  .orderlist-page .order-invoice__footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
  }
  .orderlist-page .order-invoice__summary {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
  .orderlist-page .order-next-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  .orderlist-page .order-next-actions .primary-action,
  .orderlist-page .order-next-actions .secondary-action {
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    padding-inline: 16px !important;
  }

  .orderlist-page .order-invoice__head span,
  .orderlist-page .invoice-row__cell {
    place-self: center !important;
    text-align: center !important;
  }
  /* Recommended / submit / search keep mobile patterns with tablet room */
  .recommended-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
  .submit-form,
  .submit-form--guest,
  .submit-form--login,
  .info-form,
  .search-results { grid-template-columns: 1fr !important; }
  .submit-form__actions,
  .submit-form__actions--split,
  .info-form__actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .submit-form__actions .primary-action,
  .submit-form__actions--split .primary-action,
  .submit-form__actions--split .secondary-action,
  .info-form__actions .primary-action,
  .info-form__actions .secondary-action { width: 100% !important; }

  /* Footer keeps the mobile language, but takes a full tablet screen at the end */
  .footer-stage {
    min-height: calc(100dvh - var(--mobile-safe-bottom)) !important;
    height: auto !important;
    margin-top: 24px !important;
    display: block !important;
  }
  .footer-cover {
    position: relative !important;
    top: auto !important;
    min-height: calc(100dvh - var(--mobile-safe-bottom)) !important;
    height: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: stretch !important;
  }
  .footer-inner {
    width: var(--tablet-canvas-width) !important;
    min-height: calc(100dvh - var(--mobile-safe-bottom)) !important;
    margin: 0 auto !important;
    padding: 64px 0 !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  .footer-phone {
    order: 1 !important;
    width: 100% !important;
    margin: 0 auto 72px !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .footer-newsletter {
    order: 2 !important;
    width: min(336px, 100%) !important;
    margin: 0 auto 26px !important;
    justify-items: center !important;
    text-align: center !important;
  }
  .footer-newsletter__form,
  .footer-newsletter__field {
    width: min(288px, 100%) !important;
    margin: 0 auto !important;
  }
  .footer-social {
    order: 3 !important;
    width: 100% !important;
    margin: 0 auto 40px !important;
    justify-content: center !important;
  }
  .footer-columns {
    order: 4 !important;
    width: 100% !important;
    margin: 0 auto !important;
    justify-content: center !important;
  }
  .footer-columns > div {
    text-align: center !important;
  }

  /* Empty states */
  .order-empty-state,
  .submit-success,
  .info-success {
    min-height: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* R118 root overflow repair: keep every tablet surface inside the viewport without masking issues. */
@media (min-width: 600px) and (max-width: 839px) and (orientation: portrait) {
  html, body {
    width: 100%;
    max-width: 100%;
  }

  .page-main,
  .site-header,
  .mobile-bottom-nav,
  .drawer-overlay,
  .side-drawer,
  .order-drawer,
  .language-sheet,
  .mobile-platform-panel,
  .home-browser,
  .catalog-page,
  .order-shell--invoice,
  .recommended-shell,
  .submit-shell,
  .login-shell,
  .search-shell,
  .about-shell,
  .info-shell,
  .footer-stage,
  .footer-cover,
  .footer-inner {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .orderlist-page .order-shell--invoice,
  .order-drawer .order-shell--panel,
  .order-drawer .order-drawer__inner--page,
  .orderlist-page .order-invoice,
  .order-drawer .order-invoice,
  .orderlist-page .order-invoice__head,
  .order-drawer .order-invoice__head,
  .orderlist-page .invoice-row {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .orderlist-page .invoice-row__main,
  .order-drawer .invoice-row__main,
  .orderlist-page .invoice-row__title,
  .order-drawer .invoice-row__title,
  .orderlist-page .invoice-row__xcode {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
}


/* R119 Firefox/tablet overflow fix:
   On tablet portrait, Order List is the canonical cart surface.
   Keep the off-canvas order drawer out of layout on the order-list page
   so Firefox does not expose a blank horizontal region to the right. */
@media (min-width: 600px) and (max-width: 839px) and (orientation: portrait) {
  .orderlist-page .order-drawer {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
  }

  .orderlist-page .drawer-overlay {
    display: none !important;
  }

  .orderlist-page .order-shell--invoice,
  .orderlist-page .order-invoice,
  .orderlist-page .order-invoice__body,
  .orderlist-page .order-invoice__footer {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
  }
}


/* R123 tablet order-list refinements */
@media (min-width: 600px) and (max-width: 839px) and (orientation: portrait) {
  html, body { overflow-x: clip !important; }

  /* Re-enable a real right-side order drawer for tablet portrait without affecting page width. */
  .order-drawer {
    position: fixed !important;
    inset: var(--mobile-shell-top) 0 var(--mobile-shell-bottom) auto !important;
    left: auto !important;
    right: 0 !important;
    width: min(420px, calc(100% - var(--mobile-page-margin))) !important;
    max-width: calc(100% - var(--mobile-page-margin)) !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    background: var(--bg) !important;
    transform: translate3d(100%,0,0) !important;
    transition: transform .42s cubic-bezier(.22,1,.36,1) !important;
    will-change: transform !important;
    contain: paint !important;
    border-left: 1px solid var(--line-soft) !important;
    z-index: 118 !important;
  }
  body.order-drawer-open .order-drawer { transform: translate3d(0,0,0) !important; }
  .order-drawer .order-drawer__inner--page {
    min-height: 0 !important;
    height: 100% !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    padding: calc(var(--mobile-page-top-gap) - 4px) var(--mobile-page-margin) calc(var(--mobile-safe-bottom) + 18px) var(--mobile-page-margin) !important;
  }
  .order-drawer .order-hero--panel { top: 0 !important; }
  .order-drawer .order-invoice__head { top: 0 !important; }

  /* Page canvas should use the same side margins as products on tablet. */
  .orderlist-page .order-shell--invoice {
    width: var(--tablet-canvas-width) !important;
    max-width: var(--tablet-canvas-width) !important;
    margin-inline: auto !important;
    padding-top: calc(var(--header-h) + 34px) !important;
    padding-bottom: 18px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .orderlist-page .order-invoice {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Sticky table header under the global logo header, inside the same margins as products. */
  .orderlist-page .order-invoice__head {
    width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns: 36px 70px minmax(0, 1.7fr) 78px 94px 108px 68px !important;
    gap: 10px !important;
    padding: 12px 0 !important;
    margin: 0 !important;
  }
  .orderlist-page .order-invoice__head { top: calc(var(--header-h) - 1px) !important; }

  .orderlist-page .invoice-row {
    grid-template-columns: 36px 70px minmax(0, 1.7fr) 78px 94px 108px 68px !important;
    gap: 10px !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 18px 0 !important;
  }

  /* Center all content within each invoice cell on both axes while preserving desktop column logic. */
  .orderlist-page .invoice-row__rowno,
  .orderlist-page .invoice-row__media,
  .orderlist-page .invoice-row__main,
  .orderlist-page .invoice-row__group,
  .orderlist-page .invoice-row__xcode,
  .orderlist-page .invoice-row__qty,
  .orderlist-page .invoice-row__action,
  .order-drawer .invoice-row__rowno,
  .order-drawer .invoice-row__media,
  .order-drawer .invoice-row__main,
  .order-drawer .invoice-row__group,
  .order-drawer .invoice-row__xcode,
  .order-drawer .invoice-row__qty,
  .order-drawer .invoice-row__action {
    display: grid !important;
    place-items: center !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    text-align: center !important;
  }
  .orderlist-page .invoice-row__cell,
  .order-drawer .invoice-row__cell {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .orderlist-page .invoice-row__title,
  .order-drawer .invoice-row__title,
  .orderlist-page .invoice-row__xcode strong,
  .order-drawer .invoice-row__xcode strong,
  .orderlist-page .invoice-row__group,
  .order-drawer .invoice-row__group,
  .orderlist-page .invoice-row__rowno,
  .order-drawer .invoice-row__rowno {
    text-align: center !important;
    justify-self: center !important;
    align-self: center !important;
  }
  .orderlist-page .invoice-row__main,
  .order-drawer .invoice-row__main { gap: 4px !important; }
  .orderlist-page .invoice-row__media {
    width: 70px !important;
    max-width: 70px !important;
    margin: 0 auto !important;
  }
  .orderlist-page .invoice-row__qty .qty-control {
    min-width: 108px !important;
    width: 108px !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
  .orderlist-page .invoice-row__action .cart-remove {
    justify-self: center !important;
    margin: 0 auto !important;
  }

  /* Summary centered; actions stay inside the page box. */
  .orderlist-page .order-invoice__footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
  }
  .orderlist-page .order-invoice__summary {
    width: 100% !important;
    display: grid !important;
    grid-auto-flow: column !important;
    justify-content: center !important;
    align-items: start !important;
    gap: 28px !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
  .orderlist-page .order-invoice__summary .summary-row,
  .order-drawer .order-invoice__summary .summary-row {
    display: grid !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 4px !important;
    text-align: center !important;
    min-width: 96px !important;
  }
  .orderlist-page .order-next-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }
  .orderlist-page .order-next-actions .primary-action,
  .orderlist-page .order-next-actions .secondary-action {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap !important;
    padding-inline: 14px !important;
  }
}


/* R124 — tablet order drawer + invoice centering repairs */
@media (min-width: 600px) and (max-width: 839px) and (orientation: portrait) {
  /* Re-enable the order drawer on tablet portrait. Earlier hard-stop rules from R121 are intentionally overridden here. */
  .order-drawer,
  .order-drawer__inner,
  .order-drawer__inner--page {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .order-drawer {
    position: fixed !important;
    top: var(--mobile-shell-top) !important;
    right: 0 !important;
    bottom: var(--mobile-shell-bottom) !important;
    left: auto !important;
    width: min(420px, calc(100% - (var(--mobile-page-margin) * 2))) !important;
    max-width: calc(100% - (var(--mobile-page-margin) * 2)) !important;
    height: auto !important;
    overflow: hidden !important;
    background: var(--bg) !important;
    transform: translate3d(100%, 0, 0) !important;
    transition: transform .42s cubic-bezier(.22,1,.36,1) !important;
    z-index: 118 !important;
    border-left: 1px solid var(--line-soft) !important;
  }

  body.order-drawer-open .order-drawer {
    transform: translate3d(0, 0, 0) !important;
  }

  body.order-drawer-open .drawer-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .order-drawer .order-drawer__inner--page {
    display: block !important;
    height: 100% !important;
    overflow: auto !important;
    padding: calc(var(--mobile-page-top-gap) - 4px) var(--mobile-page-margin) calc(var(--mobile-safe-bottom) + 18px) var(--mobile-page-margin) !important;
    box-sizing: border-box !important;
  }

  /* Keep table rows vertically centered like desktop. */
  .orderlist-page .invoice-row {
    align-items: center !important;
  }

  .orderlist-page .invoice-row__cell,
  .order-drawer .invoice-row__cell {
    align-self: center !important;
    justify-self: stretch !important;
    min-height: 100% !important;
  }

  .orderlist-page .invoice-row__main,
  .order-drawer .invoice-row__main,
  .orderlist-page .invoice-row__group,
  .order-drawer .invoice-row__group,
  .orderlist-page .invoice-row__xcode,
  .order-drawer .invoice-row__xcode,
  .orderlist-page .invoice-row__qty,
  .order-drawer .invoice-row__qty,
  .orderlist-page .invoice-row__action,
  .order-drawer .invoice-row__action,
  .orderlist-page .invoice-row__rowno,
  .order-drawer .invoice-row__rowno {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    min-height: 100% !important;
  }

  .orderlist-page .invoice-row__main,
  .order-drawer .invoice-row__main {
    flex-direction: column !important;
    gap: 4px !important;
  }

  /* Summary values should stay inline: Selected lines 2   Total units 3 */
  .orderlist-page .order-invoice__summary {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 28px !important;
    width: 100% !important;
    text-align: center !important;
  }

  .orderlist-page .order-invoice__summary .summary-row,
  .order-drawer .order-invoice__summary .summary-row {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .orderlist-page .order-invoice__summary .summary-row span,
  .order-drawer .order-invoice__summary .summary-row span,
  .orderlist-page .order-invoice__summary .summary-row strong,
  .order-drawer .order-invoice__summary .summary-row strong {
    display: inline !important;
    margin: 0 !important;
  }
}


/* R125 — tablet portrait order drawer reopening fix.
   Earlier R121 hard-stop rules are removed. Keep drawer off-canvas when closed
   and visible only when body.order-drawer-open is active. */
@media (min-width: 600px) and (max-width: 839px) and (orientation: portrait) {
  body .order-drawer,
  body .order-drawer__inner,
  body .order-drawer__inner--page {
    display: block !important;
    visibility: visible !important;
  }

  body .order-drawer {
    pointer-events: none !important;
    transform: translate3d(100%, 0, 0) !important;
  }

  body.order-drawer-open .order-drawer {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
  }

  body.order-drawer-open .order-drawer__inner,
  body.order-drawer-open .order-drawer__inner--page {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body .drawer-overlay {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.order-drawer-open .drawer-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}


/* R127 — tablet portrait final behavior.
   Order must behave like a full page (route to order-list.html), not a sidebar.
   Menu must lock the background and cover the page with its own scroll surface. */
@media (min-width: 600px) and (max-width: 839px) and (orientation: portrait) {
  /* Tablet order uses the canonical page, never the off-canvas drawer. */
  .order-drawer,
  .order-drawer__inner,
  .order-drawer__inner--page,
  body.order-drawer-open .order-drawer,
  body.order-drawer-open .order-drawer__inner,
  body.order-drawer-open .order-drawer__inner--page {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: none !important;
  }

  /* Make the menu a true page-covering sheet with its own scroll. */
  .side-drawer {
    position: fixed !important;
    top: var(--mobile-shell-top) !important;
    right: 0 !important;
    bottom: var(--mobile-shell-bottom) !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    border-inline: 0 !important;
    background: var(--surface-0) !important;
    transform: translate3d(-100%, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    overflow: hidden !important;
    z-index: 150 !important;
    box-shadow: none !important;
    will-change: transform;
    overscroll-behavior: contain;
  }

  body.drawer-open .side-drawer {
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
  }

  .side-drawer__inner {
    height: 100% !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    background: var(--surface-0) !important;
    padding-bottom: calc(var(--mobile-shell-bottom) + 24px) !important;
  }

  body.drawer-open .drawer-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: rgba(241, 240, 236, 0.82) !important;
  }

  body.panel-scroll-lock,
  body.drawer-open,
  body.search-panel-open,
  body.language-sheet-open,
  body.login-panel-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  .mobile-platform-panel,
  .language-sheet,
  .mobile-search-panel,
  .mobile-login-panel {
    overscroll-behavior: contain !important;
  }

  .mobile-platform-panel__inner,
  .language-sheet__panel,
  .mobile-panel-shell,
  .mobile-search-panel .mobile-platform-panel__inner,
  .mobile-login-panel .mobile-platform-panel__inner {
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    background: var(--surface-0) !important;
  }
}

/* R128 — tablet portrait must mirror the mobile panel model.
   Order opens as a full-page drawer with its own scroll. Menu is opaque and owns the scroll surface.
   The order table uses the desktop column logic, but with tighter tablet proportions. */
@media (min-width: 600px) and (max-width: 839px) and (orientation: portrait) {
  /* Restore the mobile-like order drawer for tablet portrait. */
  .order-drawer,
  .order-drawer__inner,
  .order-drawer__inner--page,
  body.order-drawer-open .order-drawer,
  body.order-drawer-open .order-drawer__inner,
  body.order-drawer-open .order-drawer__inner--page {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .order-drawer {
    position: fixed !important;
    top: var(--mobile-shell-top) !important;
    right: 0 !important;
    bottom: var(--mobile-shell-bottom) !important;
    left: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    background: var(--bg) !important;
    border-left: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: translate3d(100%, 0, 0) !important;
    transition: transform .56s cubic-bezier(.25,.8,.25,1) !important;
    pointer-events: none !important;
    z-index: 150 !important;
    will-change: transform;
  }

  body.order-drawer-open .order-drawer {
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
  }

  .order-drawer__inner--page {
    height: 100% !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    background: var(--bg) !important;
    padding: 0 0 calc(var(--mobile-safe-bottom) + 8px) 0 !important;
  }

  .order-drawer .order-shell--panel {
    width: var(--tablet-canvas-width) !important;
    max-width: var(--tablet-canvas-width) !important;
    margin: 0 auto !important;
    padding: 0 0 18px !important;
  }

  .order-drawer .order-hero--panel {
    position: relative !important;
    top: auto !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: calc(var(--header-h) + 34px) 0 14px !important;
    background: var(--bg) !important;
    border-bottom: 1px solid var(--line-soft) !important;
  }

  .order-drawer .order-hero--panel h1,
  .orderlist-page .order-hero--center h1 {
    font-size: 40px !important;
    line-height: .94 !important;
    letter-spacing: -.05em !important;
    font-weight: 300 !important;
  }

  /* The menu must behave like the phone version: solid surface, full-page cover, internal scroll only. */
  .side-drawer {
    position: fixed !important;
    top: var(--mobile-shell-top) !important;
    right: 0 !important;
    bottom: var(--mobile-shell-bottom) !important;
    left: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    background: var(--bg) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-inline: 0 !important;
    transform: translate3d(-100%, 0, 0) !important;
    transition: transform .56s cubic-bezier(.25,.8,.25,1) !important;
    pointer-events: none !important;
    overflow: hidden !important;
    z-index: 151 !important;
    will-change: transform;
  }

  body.drawer-open .side-drawer {
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
  }

  .side-drawer__inner {
    height: 100% !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    background: var(--bg) !important;
    padding-bottom: calc(var(--mobile-shell-bottom) + 24px) !important;
  }

  .drawer-overlay {
    background: var(--bg) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.drawer-open .drawer-overlay,
  body.order-drawer-open .drawer-overlay,
  body.language-sheet-open .drawer-overlay,
  body.search-panel-open .drawer-overlay,
  body.login-panel-open .drawer-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: var(--bg) !important;
  }

  body.drawer-open,
  body.order-drawer-open,
  body.language-sheet-open,
  body.search-panel-open,
  body.login-panel-open,
  body.panel-scroll-lock {
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* Desktop-style invoice columns, tightened for tablet and used in both the page and the drawer. */
  .orderlist-page .order-invoice,
  .order-drawer .order-invoice {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    border-top: 0 !important;
  }

  .orderlist-page .order-invoice__head,
  .order-drawer .order-invoice__head {
    display: grid !important;
    position: sticky !important;
    z-index: 43 !important;
    grid-template-columns: 30px 56px minmax(0, 1.7fr) 70px 82px 96px 58px !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--line-soft) !important;
    background: var(--bg) !important;
    font-size: 8.5px !important;
    line-height: 1.1 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
  }

  .orderlist-page .order-invoice__head { top: calc(var(--header-h) - 1px) !important; }
  .order-drawer .order-invoice__head { top: 0 !important; }

  .orderlist-page .order-invoice__head span,
  .order-drawer .order-invoice__head span {
    min-width: 0 !important;
    text-align: center !important;
    align-self: center !important;
    justify-self: center !important;
    white-space: nowrap !important;
  }

  .orderlist-page .invoice-row,
  .order-drawer .invoice-row {
    display: grid !important;
    grid-template-columns: 30px 56px minmax(0, 1.7fr) 70px 82px 96px 58px !important;
    gap: 6px !important;
    width: 100% !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(17,17,17,.08) !important;
  }

  .orderlist-page .invoice-row__cell,
  .order-drawer .invoice-row__cell {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    text-align: center !important;
  }

  .orderlist-page .invoice-row__rowno,
  .order-drawer .invoice-row__rowno { grid-column: 1 !important; }
  .orderlist-page .invoice-row__media,
  .order-drawer .invoice-row__media {
    grid-column: 2 !important;
    width: 56px !important;
    max-width: 56px !important;
    margin: 0 auto !important;
  }
  .orderlist-page .invoice-row__main,
  .order-drawer .invoice-row__main {
    grid-column: 3 !important;
    flex-direction: column !important;
    gap: 3px !important;
    justify-items: center !important;
    justify-self: stretch !important;
  }
  .orderlist-page .invoice-row__group,
  .order-drawer .invoice-row__group { grid-column: 4 !important; }
  .orderlist-page .invoice-row__xcode,
  .order-drawer .invoice-row__xcode { grid-column: 5 !important; }
  .orderlist-page .invoice-row__footer,
  .order-drawer .invoice-row__footer { display: contents !important; }
  .orderlist-page .invoice-row__qty,
  .order-drawer .invoice-row__qty { grid-column: 6 !important; }
  .orderlist-page .invoice-row__action,
  .order-drawer .invoice-row__action { grid-column: 7 !important; }

  .orderlist-page .invoice-row__title,
  .order-drawer .invoice-row__title {
    font-size: 10px !important;
    line-height: 1.22 !important;
    letter-spacing: .07em !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;
  }

  .orderlist-page .invoice-row__group,
  .order-drawer .invoice-row__group,
  .orderlist-page .invoice-row__xcode strong,
  .order-drawer .invoice-row__xcode strong,
  .orderlist-page .invoice-row__rowno,
  .order-drawer .invoice-row__rowno {
    font-size: 8.5px !important;
    line-height: 1.2 !important;
    letter-spacing: .1em !important;
    white-space: nowrap !important;
  }

  .orderlist-page .invoice-row__qty .qty-control,
  .order-drawer .invoice-row__qty .qty-control {
    justify-content: center !important;
    min-width: 96px !important;
    width: 96px !important;
  }

  .orderlist-page .invoice-row__qty .qty-control button,
  .order-drawer .invoice-row__qty .qty-control button {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
  }

  .orderlist-page .invoice-row__qty .qty-control span,
  .order-drawer .invoice-row__qty .qty-control span {
    min-width: 32px !important;
    font-size: 9px !important;
  }

  .orderlist-page .invoice-row__action .cart-remove,
  .order-drawer .invoice-row__action .cart-remove {
    font-size: 7.5px !important;
    letter-spacing: .12em !important;
    white-space: nowrap !important;
  }
}


/* R130 tablet portrait refinements: keep customer index aligned to products and make filters sticky exactly under header */
@media (min-width: 600px) and (max-width: 839px) and (orientation: portrait) {
  .home-page .home-browser {
    display: block !important;
    width: var(--tablet-canvas-width) !important;
    max-width: var(--tablet-canvas-width) !important;
    margin: 0 auto !important;
    padding-top: calc(var(--header-h) + 34px) !important;
    padding-bottom: 18px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .home-page .home-browser h1 {
    margin: 0 0 18px !important;
  }

  .home-page .category-strip {
    position: sticky !important;
    top: var(--header-h) !important;
    z-index: 43 !important;
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 10px 44px 10px 0 !important;
    box-sizing: border-box !important;
    background: var(--bg) !important;
    border-bottom: 1px solid rgba(17,17,17,.08) !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  .home-page .category-strip::-webkit-scrollbar {
    display: none !important;
  }

  .home-page .index-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  .home-page .index-tile {
    width: 100% !important;
  }
}