.product-card{transition:transform .15s ease, box-shadow .15s ease}
  .product-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
  .product-img{aspect-ratio:1/1;object-fit:cover;width:100%;background:var(--mk-slate-100)}
  /* Header category button + dropdown */
  .sf-catwrap{position:relative;}
  .sf-catbtn{display:inline-flex;align-items:center;gap:6px;background:var(--mk-white);border:1px solid var(--mk-slate-200);border-radius:999px;padding:8px 12px;font-size:13px;font-weight:600;color:var(--mk-slate-800-2);cursor:pointer;}
  .sf-catbtn:hover{border-color:var(--mk-blue-300);color:var(--mk-blue-500-2);}
  .sf-catbtn .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;}
  .sf-catmenu{display:none;position:absolute;left:0;top:calc(100% + 8px);z-index:40;background:var(--mk-white);border:1px solid var(--mk-slate-200);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.12);min-width:220px;max-height:340px;overflow-y:auto;padding:6px;}
  .sf-catmenu a{display:block;padding:9px 14px;border-radius:8px;color:var(--mk-slate-800-2);text-decoration:none;font-size:14px;}
  .sf-catmenu a:hover{background:var(--mk-blue-100-2);color:var(--mk-blue-500-2);}
  .sf-catmenu a.active{background:var(--mk-blue-100-3);color:var(--mk-blue-500-2);font-weight:700;}

  /* ── Phone pass ────────────────────────────────────────────────────────────
     The storefront was typed for a desktop window: 13–14px body, 12–13px labels,
     tap targets under 40px. On a phone that reads as "everything is tiny", and
     the customer app is now something people reach mainly by scanning a laundry
     ticket — i.e. always on a phone. This raises the whole scale at ≤600px
     rather than editing forty inline styles, so the desktop view is untouched. */
  @media (max-width: 600px) {
    body { font-size: 16px; }
    /* Anything set small INLINE is what makes the page look shrunk; lift the
       floor without flattening a deliberate hierarchy. */
    [style*="font-size:12px"], [style*="font-size: 12px"],
    [style*="font-size:13px"], [style*="font-size: 13px"] { font-size: 14px !important; }
    [style*="font-size:14px"], [style*="font-size: 14px"] { font-size: 15px !important; }
    [style*="font-size:15px"], [style*="font-size: 15px"] { font-size: 16px !important; }
    /* Tailwind's own small scales — text-xs is 12px and text-sm 12–14px in this
       build, which is where the rest of the shrunk text was coming from. */
    .text-xs { font-size: 13px !important; }
    .text-sm { font-size: 15px !important; }
    h1, .sf-title { font-size: 22px !important; }
    /* A finger is about 9mm across: nothing tappable smaller than 44px. */
    a[class*="btn"], button, .sf-hbtn, .sf-catbtn, .sf-chip {
      min-height: 44px; }
    .sf-hbtn { width: 44px !important; height: 44px !important; font-size: 20px !important; }
    /* Cards get room to breathe instead of hugging their text. */
    .bg-white { border-radius: 16px; }
    table { font-size: 14px; }
    /* A five-column invoice table at 15px will not fit 390px. Let the cells WRAP
       and keep every column on screen — a customer checking a laundry bill wants the
       price, and hiding it behind a sideways scroll on a phone is how it gets missed.
       overflow-x stays as a safety net for a table that still cannot fit. */
    table { display: block; overflow-x: auto; }
    table th, table td { padding: 10px 6px !important; white-space: normal; }
    table { font-size: 14px !important; }
  }