/* ==========================================================================
   ROYAL-ONE — Product Tabs Mobile Fixes (TSG Brands LLC)
   Overrides assets/product.css, which lives in a directory this session
   cannot write to directly. Loaded after it so these rules win.
   ========================================================================== */

/* The 3 tabs previously relied on horizontal scrolling below 640px, with no
   visual hint that "Shipping & Delivery" was off-screen — easy to miss
   entirely on a phone. Equal-width tabs that always fit on one row removes
   the problem instead of just hiding it better. */
@media (max-width: 640px) {
  .us-p-tab-nav.us-p-tab-nav {
    overflow-x: visible;
    flex-wrap: nowrap;
    gap: 4px;
  }

  .us-p-tab-btn.us-p-tab-btn {
    flex: 1 1 0;
    flex-shrink: 1;
    min-width: 0;
    padding: 10px 6px;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    word-break: normal;
  }

  .us-p-tab-content-wrap.us-p-tab-content-wrap {
    padding: 20px 16px;
  }

  
}

@media (max-width: 380px) {
  .us-p-tab-btn.us-p-tab-btn {
    font-size: 11px;
    padding: 9px 4px;
  }
}

/* Empty state: the tabs can all be closed until the customer picks one. A blank padded box before
   that first tap reads as broken, especially on a small screen, so show a
   plain prompt whenever no panel is open. Pure CSS, no JS needed. */
@supports selector(:has(a)) {
  .us-p-tab-content-wrap:not(:has(.us-p-tab-panel.is-active))::before {
    content: "Tap a tab above to see details.";
    display: block;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    padding: 12px 0;
  }
}