/* ================================================================
   TRIJAL MART — MOBILE FIX  (max-width 768px only)
   Desktop styles are NOT touched.
   ================================================================ */

/* Utility bar: hide on mobile */
@media (max-width: 768px) {
  .utility-bar, .utility-bar-clean { display: none !important; }
}

/* ================================================================
   HEADER — CSS Grid replaces Flexbox to avoid order/wrap conflicts
   Row 1 : [ ☰ 44px ] [ Logo 1fr centred ] [ Icons auto ]
   Row 2 : [ Search — spans full width ]
   ================================================================ */
@media (max-width: 768px) {

  .store-header, .ref-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 300 !important;
    background: #fff !important;
    border-bottom: 1px solid #dde3f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
  }

  /* Grid container */
  .header-main, .ref-header-main, .ref-header-main-clean {
    display: grid !important;
    grid-template-columns: 44px 1fr auto !important;
    grid-template-rows: 52px auto !important;
    align-items: center !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* Hamburger — col 1 row 1 */
  .mobile-nav-toggle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    font-size: 22px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: #1a3c6e !important;
    margin: 0 !important;
  }

  /* Logo — col 2 row 1  (overrides inline position:absolute) */
  .site-brand, .site-text-logo {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-decoration: none !important;
    z-index: auto !important;
  }
  .site-brand-logo, .site-logo-img {
    height: 36px !important;
    width: auto !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* Icons — col 3 row 1 */
  .header-actions, .ref-header-actions, .header-actions-clean {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
  }
  .header-action-cta, #enquire-btn { display: none !important; }
  .header-action {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 6px !important;
    min-width: 34px !important;
    gap: 0 !important;
    color: #0f1f38 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
  }
  .header-action svg { width: 22px !important; height: 22px !important; }
  .header-action span { display: none !important; }

  /* Search — spans all cols, row 2  (overrides inline flex:0 1 55%) */
  .search-shell, .ref-search-shell {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    flex: unset !important;
    width: 100% !important;
    padding: 0 0 10px !important;
    position: relative !important;
    order: unset !important;
  }
  .search-form-main, .ref-search-form {
    height: 42px !important;
    border-radius: 10px !important;
    background: #f4f6fb !important;
    border: 1.5px solid #dde3f0 !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  .search-form-main:focus-within, .ref-search-form:focus-within {
    border-color: #1a3c6e !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(26,60,110,.1) !important;
  }
  .search-category-select { display: none !important; }
  .ref-search-form input[name="q"], .search-form-main input[name="q"] {
    flex: 1 !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    color: #0f1f38 !important;
  }
  .ref-search-form button[type="submit"], .search-form-main button[type="submit"] {
    width: 46px !important;
    height: 42px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #1a3c6e !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }
}

/* ================================================================
   MOBILE NAV DRAWER
   ================================================================ */
@media (max-width: 768px) {
  .mega-nav, .ref-nav {
    display: block !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 280px !important; max-width: 85vw !important;
    z-index: 500 !important;
    background: #fff !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transform: translateX(-100%) !important;
    visibility: hidden !important;
    transition: transform .25s cubic-bezier(.4,0,.2,1), visibility .25s !important;
    box-shadow: none !important;
    border-top: none !important;
  }
  .mega-nav.nav-open, .ref-nav.nav-open {
    transform: translateX(0) !important;
    visibility: visible !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.22) !important;
  }
  body.nav-open::after {
    content: '';
    position: fixed !important; inset: 0 !important;
    background: rgba(0,0,0,.5) !important; z-index: 499 !important;
  }
  body.nav-open { overflow: hidden !important; }
  .mega-nav-row, .ref-nav-row {
    flex-direction: column !important; align-items: stretch !important;
    gap: 0 !important; padding-bottom: 60px !important;
  }
  .mega-nav-row::before, .ref-nav-row::before {
    content: 'Categories' !important;
    display: block !important; padding: 16px 18px 14px !important;
    font-size: 16px !important; font-weight: 800 !important;
    color: #1a3c6e !important; border-bottom: 2px solid #1a3c6e !important;
    background: #f4f6fb !important;
    position: sticky !important; top: 0 !important; z-index: 2 !important;
  }
  .mega-item { width: 100% !important; flex: none !important; }
  .mega-link, .ref-nav-link {
    display: flex !important; justify-content: space-between !important;
    align-items: center !important; padding: 13px 18px !important;
    font-size: 14px !important; font-weight: 600 !important;
    border-bottom: 1px solid #eef2f7 !important; color: #0f1f38 !important;
    width: 100% !important;
    border-top: none !important; border-left: none !important; border-right: none !important;
  }
  .home-item .mega-link, .home-item .ref-nav-link {
    background: #eef2ff !important; color: #1a3c6e !important; font-weight: 700 !important;
  }
  .mega-dropdown {
    display: block !important; position: static !important;
    max-height: 0 !important; overflow: hidden !important;
    border: none !important; box-shadow: none !important; padding: 0 !important;
    background: #f7f9fc !important; transition: max-height .28s ease !important;
  }
  .mega-item:hover > .mega-dropdown { max-height: 0 !important; }
  .mega-item.open > .mega-dropdown  { max-height: 1400px !important; }
  .mega-dropdown-grid { display: flex !important; flex-direction: column !important; }
  .mega-col { width: 100% !important; padding: 0 18px !important; border: none !important; background: transparent !important; }
  .mega-col h4 { font-size: 10px !important; color: #5a6a82 !important; text-transform: uppercase !important; letter-spacing: .08em !important; padding: 10px 0 4px !important; margin: 0 !important; }
  .mega-col a { display: block !important; padding: 11px 0 !important; font-size: 14px !important; color: #0f1f38 !important; border-bottom: 1px solid #eef2f7 !important; font-weight: 500 !important; border-left: none !important; }
  .mega-col a:last-child { border-bottom: none !important; }
  .mega-promo { display: none !important; }
}

/* ================================================================
   PRODUCT PAGE — mobile layout
   ================================================================ */
@media (max-width: 768px) {
  .tm-product-layout { display: block !important; padding-bottom: 80px !important; }
  .tm-product-gallery-col { margin: 0 -16px !important; width: calc(100% + 32px) !important; }
  .tm-product-gallery-sticky { position: static !important; }
  .tm-gallery-inner { flex-direction: column !important; }
  .tm-product-main-media {
    width: 100% !important; height: 320px !important;
    border-radius: 0 !important; background: #f4f6fb !important;
    overflow: hidden !important; position: relative !important;
  }
  .tm-product-main-media img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; }
  .gallery-nav { width: 36px !important; height: 36px !important; font-size: 22px !important; background: rgba(255,255,255,.9) !important; box-shadow: 0 2px 8px rgba(0,0,0,.15) !important; }
  .tm-product-thumbs {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    overflow-x: auto !important; gap: 8px !important; padding: 10px 16px !important;
    scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important;
    width: 100% !important; height: auto !important;
  }
  .tm-product-thumbs::-webkit-scrollbar { display: none !important; }
  .tm-product-thumb { width: 60px !important; height: 60px !important; flex-shrink: 0 !important; border-radius: 10px !important; }
  .tm-product-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .tm-product-info-col { padding-top: 16px !important; }
  .tm-product-title { font-size: 20px !important; line-height: 1.3 !important; }
  .tm-product-price { font-size: 28px !important; }
  .tm-product-panel { padding: 14px !important; border-radius: 12px !important; }
  .tm-qty-row { display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px 0 !important; margin-bottom: 0 !important; }
  .tm-qty-row label { font-size: 14px !important; font-weight: 600 !important; margin-bottom: 0 !important; white-space: nowrap !important; }
  .tm-qty-row input[type="number"] { width: 80px !important; text-align: center !important; font-size: 16px !important; font-weight: 700 !important; border: 1.5px solid #dde3f0 !important; border-radius: 10px !important; padding: 8px 12px !important; }
  .tm-product-action-buttons { display: none !important; }
  .tm-product-cart-col { display: none !important; }
  .tm-reviews-wrap { padding-bottom: 80px !important; }
}

/* ================================================================
   STICKY BOTTOM ACTION BAR (product page, mobile only)
   Controlled entirely by CSS — no JS needed
   ================================================================ */

/* Hidden everywhere by default */
.mobile-product-actions {
  display: none !important;
}

/* Shown fixed at bottom on mobile */
@media (max-width: 768px) {
  .mobile-product-actions {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 250 !important;
    background: #fff !important;
    border-top: 1px solid #dde3f0 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.12) !important;
    padding: 10px 16px !important;
    gap: 10px !important;
    align-items: center !important;
  }
  .mobile-product-actions form {
    display: flex !important;
    flex: 1 !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .mobile-action-wishlist {
    width: 48px !important; height: 48px !important; flex-shrink: 0 !important;
    border-radius: 12px !important; background: #f0f4f8 !important;
    color: #1a3c6e !important; border: 1.5px solid #dde3f0 !important;
    cursor: pointer !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
  }
  .mobile-action-cart {
    flex: 1 !important; height: 48px !important;
    font-size: 15px !important; font-weight: 700 !important;
    border-radius: 12px !important; background: #1a3c6e !important;
    color: #fff !important; border: none !important; cursor: pointer !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; gap: 8px !important; white-space: nowrap !important;
  }
  .mobile-action-buynow {
    flex: 1 !important; height: 48px !important;
    font-size: 15px !important; font-weight: 700 !important;
    border-radius: 12px !important; background: #2563EB !important;
    color: #fff !important; border: none !important; cursor: pointer !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; gap: 8px !important; white-space: nowrap !important;
  }
}

/* ================================================================
   MISC
   ================================================================ */
@media (max-width: 768px) {
  body { overflow-x: hidden !important; }
  .site-main { overflow-x: hidden !important; }
  section.section, .page-section { padding-top: 20px !important; padding-bottom: 20px !important; }
  .ref-breadcrumb, .tm-product-breadcrumb { font-size: 12px !important; margin-bottom: 10px !important; }
  .fmain { grid-template-columns: 1fr !important; gap: 24px !important; }
  .site-footer { padding-bottom: 70px !important; }
}

/* ================================================================
   SEARCH BAR EXTRA FIX — belt-and-suspenders for category select
   and search button inline style overrides
   ================================================================ */
@media (max-width: 768px) {

  /* Hide category select — double selector in case class selector misses */
  .search-category-select,
  .ref-search-form select,
  .search-form-main select,
  select[name="cat"] {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }

  /* Search input: fills remaining space after button */
  .ref-search-form input[type="text"],
  .search-form-main input[type="text"],
  .ref-search-form input[data-search-input],
  .search-form-main input[data-search-input] {
    flex: 1 1 auto !important;
    height: 42px !important;
    border: none !important;
    background: transparent !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    width: 0 !important;
    color: #0f1f38 !important;
    display: block !important;
  }

  /* Search submit button */
  .ref-search-form button[type="submit"],
  .search-form-main button[type="submit"],
  .ref-search-form .btn-accent,
  .search-form-main .btn-accent {
    width: 46px !important;
    height: 42px !important;
    min-width: 46px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 8px 8px 0 !important;
    background: #1a3c6e !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }

  /* Search suggest dropdown */
  .search-suggest {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important; right: 0 !important;
    z-index: 400 !important;
    background: #fff !important;
    border: 1px solid #dde3f0 !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  }
}

/* ================================================================
   LOGIN PAGE — MOBILE (max-width 600px)
   ================================================================ */
@media (max-width: 600px) {
  .auth-shell-clean {
    padding: 0 !important;
    background: #f4f6fb !important;
    min-height: 100dvh !important;
  }
  .auth-clean-wrap {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .auth-card-clean {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 100dvh !important;
  }

  /* Blue branding strip — compact on mobile */
  .auth-side-copy {
    padding: 28px 24px 24px !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    order: 0 !important;
  }
  .auth-side-copy h1 {
    font-size: 1.7rem !important;
    margin: 6px 0 8px !important;
  }
  .auth-side-copy .muted,
  .auth-side-copy p.muted {
    font-size: 13px !important;
    margin: 0 !important;
  }
  .auth-feature-list {
    display: none !important; /* hide bullet list on small screens */
  }
  .auth-side-copy img {
    height: 38px !important;
  }

  /* Form side — fills remaining space */
  .auth-form-clean,
  .apple-auth-form {
    padding: 28px 20px 36px !important;
    background: #fff !important;
    flex: 1 !important;
    order: 1 !important;
    gap: 16px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .apple-auth-form input[type="email"],
  .apple-auth-form input[type="password"],
  .auth-form-clean input[type="email"],
  .auth-form-clean input[type="password"],
  .auth-form-clean input[type="text"] {
    height: 50px !important;
    font-size: 16px !important; /* prevents iOS zoom */
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .auth-form-clean .btn-dark,
  .apple-auth-form .btn-dark {
    height: 52px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
    width: 100% !important;
  }
  .auth-form-clean .auth-alt-link,
  .apple-auth-form .auth-alt-link {
    text-align: center !important;
    font-size: 14px !important;
  }

  /* Grid-2 inside register page — stack to single column */
  .auth-form-grid-2 {
    grid-template-columns: 1fr !important;
  }
  .auth-form-grid-2 .full {
    grid-column: 1 !important;
  }
}

/* ================================================================
   CART PAGE — MOBILE (max-width 768px)
   ================================================================ */
@media (max-width: 768px) {

  /* Override the inline grid style on the cart section */
  section.cart-grid,
  .cart-grid.refined-cart-grid,
  .apple-cart-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  /* Order summary first on mobile */
  .apple-order-summary,
  aside.summary-card {
    order: -1 !important;
    position: static !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    padding: 20px 16px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
  }

  /* Cart items panel */
  .cart-panel,
  .refined-cart-panel {
    padding: 0 !important;
    background: transparent !important;
  }
  .apple-cart-list {
    gap: 12px !important;
    padding: 0 12px 80px !important;
  }

  /* Each cart item — stack image top, content below */
  .apple-cart-item,
  .refined-cart-item {
    display: grid !important;
    grid-template-columns: 90px 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 12px !important;
    position: relative !important;
  }

  /* Shrink image */
  .apple-cart-image-wrap {
    width: 90px !important;
    height: 90px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
  }

  /* Content column */
  .apple-cart-content {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .apple-cart-content h3 {
    font-size: 14px !important;
    line-height: 1.35 !important;
    margin: 0 0 4px !important;
  }
  .apple-cart-meta {
    font-size: 11px !important;
    margin-bottom: 3px !important;
  }

  /* Price — inline with title row, smaller */
  .apple-cart-content .price-line strong {
    font-size: 15px !important;
    font-weight: 800 !important;
  }
  .apple-cart-content .price-line .mrp {
    font-size: 12px !important;
  }
  .apple-cart-content .price-line {
    text-align: right !important;
  }

  /* Discount badge */
  .apple-cart-content .discount {
    font-size: 11px !important;
    padding: 2px 6px !important;
    margin-bottom: 10px !important;
  }

  /* Action buttons row — qty + remove */
  .apple-cart-actions {
    gap: 10px !important;
    flex-wrap: nowrap !important;
    margin-top: 8px !important;
  }
  .apple-cart-actions .apple-inline-form input[type="number"] {
    width: 44px !important;
    font-size: 14px !important;
    padding: 6px 0 !important;
  }
  .apple-cart-actions .btn-ghost {
    font-size: 13px !important;
    padding: 6px 10px !important;
  }

  /* Order summary internals */
  .apple-order-summary h3 {
    font-size: 16px !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
  }
  .apple-order-summary .summary-row {
    margin-bottom: 10px !important;
    font-size: 14px !important;
  }
  .apple-order-summary .summary-row.total {
    font-size: 17px !important;
    margin-bottom: 18px !important;
  }
  .apple-order-summary .btn-primary {
    padding: 14px 16px !important;
    font-size: 15px !important;
  }
}

/* ================================================================
   CHECKOUT / ADDRESS PAGE — MOBILE (max-width 600px)
   ================================================================ */
@media (max-width: 600px) {

  /* Main wrapper */
  .co-wrap {
    padding: 0 0 80px !important;
  }

  /* Header */
  .co-header {
    padding: 16px 16px 12px !important;
  }
  .co-header-logo {
    height: 30px !important;
  }

  /* Steps bar */
  .co-steps {
    padding: 10px 12px !important;
    gap: 4px !important;
  }
  .co-step span {
    display: none !important;
  }
  .co-step.is-active span {
    display: inline !important;
    font-size: 11px !important;
  }
  .co-step-num {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
  }
  .co-step-line {
    margin: 0 4px !important;
  }

  /* Two-column grid → single column, summary on top */
  .co-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  /* Summary panel floats to top */
  .co-summary {
    order: -1 !important;
    position: static !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    padding: 16px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.05) !important;
    margin-bottom: 0 !important;
  }

  /* Panels */
  .co-panel {
    padding: 18px 16px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: none !important;
  }
  .co-panel + .co-panel {
    margin-top: 0 !important;
  }

  /* Form rows — always single column on mobile */
  .co-row-2 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* All inputs — full width, no zoom trigger */
  .co-field input,
  .co-field textarea,
  .co-field select {
    width: 100% !important;
    font-size: 16px !important; /* prevents iOS zoom-in */
    height: 50px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
  }
  .co-field textarea {
    height: auto !important;
    min-height: 80px !important;
    padding: 12px 14px !important;
  }
  .co-field label {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }

  /* Pincode row — input + button side by side */
  .co-pincode-row {
    display: flex !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .co-pincode-row input {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .co-verify-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 0 14px !important;
    height: 50px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

  /* Payment method cards — stack vertically */
  .co-pay-methods {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .co-pay-method {
    width: 100% !important;
    padding: 14px 16px !important;
  }

  /* Summary items list */
  .co-items {
    max-height: 180px !important;
    overflow-y: auto !important;
  }
  .co-item {
    gap: 10px !important;
  }
  .co-item-img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }
  .co-item-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .co-item-price {
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* Summary totals */
  .co-summary-row {
    font-size: 13px !important;
    padding: 8px 0 !important;
  }
  .co-summary-row.is-total {
    font-size: 17px !important;
  }

  /* Trust badges */
  .co-trust {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    padding-top: 14px !important;
  }
  .co-trust-item {
    font-size: 11px !important;
  }

  /* Place Order button */
  .co-place-btn,
  button[data-place-order] {
    height: 54px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
    width: 100% !important;
  }

  /* Coupon row */
  .co-coupon {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .co-coupon input {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 14px !important;
    height: 44px !important;
  }
  .co-coupon button {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    height: 44px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }

  /* Section headings */
  .co-section-head h2 {
    font-size: 14px !important;
  }
  .co-section-num {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }
}

/* ================================================================
   SMALL SCREENS (max-width: 360px) — extra tightening
   ================================================================ */
@media (max-width: 360px) {
  .apple-cart-item,
  .refined-cart-item {
    grid-template-columns: 72px 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .apple-cart-image-wrap {
    width: 72px !important;
    height: 72px !important;
  }
  .auth-side-copy {
    padding: 20px 16px 18px !important;
  }
  .auth-form-clean,
  .apple-auth-form {
    padding: 20px 16px 28px !important;
  }
  .co-panel {
    padding: 14px 12px !important;
  }
}

/* ================================================================
   CHECKOUT — HARD OVERFLOW LOCK (all screen sizes)
   Prevents any content from causing horizontal scroll
   ================================================================ */
.co-wrap {
  overflow-x: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.co-item {
  overflow: hidden !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.co-item-info {
  min-width: 0 !important;
  overflow: hidden !important;
  flex: 1 !important;
}
.co-item-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
.co-item-price {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  max-width: 38% !important;
  text-align: right !important;
}
.co-promo {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.co-promo input {
  min-width: 0 !important;
  width: 0 !important;
  flex: 1 !important;
  box-sizing: border-box !important;
}
.co-promo button {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.co-summary-row {
  min-width: 0 !important;
  overflow: hidden !important;
  gap: 8px !important;
}
.co-summary-row > span:first-child {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  flex: 1 !important;
}
.co-summary-row .val {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.co-summary {
  overflow: hidden !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}
.co-panel {
  box-sizing: border-box !important;
  overflow: hidden !important;
  max-width: 100% !important;
}
/* Pay card description text — allow wrap */
.co-pay-desc {
  white-space: normal !important;
  word-break: break-word !important;
}
.co-pay-info {
  min-width: 0 !important;
  overflow: hidden !important;
  flex: 1 !important;
}

@media (max-width: 768px) {
  /* Force the entire page into viewport width */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .co-wrap {
    width: 100vw !important;
    padding: 0 0 80px !important;
  }
  .co-grid {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  /* Co-item — strict flex with no overflow */
  .co-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px !important;
    max-width: 100% !important;
  }
  .co-item-thumb {
    width: 46px !important;
    height: 46px !important;
    flex-shrink: 0 !important;
  }
  .co-item-name {
    font-size: 12.5px !important;
  }
  .co-item-price {
    font-size: 12.5px !important;
    max-width: 36% !important;
  }
  /* Promo row */
  .co-promo {
    display: flex !important;
    gap: 8px !important;
  }
  .co-promo input {
    font-size: 14px !important;
    height: 44px !important;
  }
  .co-promo button {
    height: 44px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }
  /* Summary totals */
  .co-summary-row {
    font-size: 13px !important;
  }
  .co-summary-row.is-total {
    font-size: 15px !important;
  }
  /* Pay card */
  .co-pay-card {
    padding: 12px 10px !important;
    gap: 10px !important;
    overflow: hidden !important;
  }
  .co-pay-badge { display: none !important; }
}