/*
 * form-mobile.css — /product_form/product on phones (≤767px).
 *
 * The form is desktop-only markup (a 1224px min-width column of KO-bound
 * sections, laid out with the !important generalStyle utilities and inline
 * styles). Everything here sits inside the media query, so desktop is
 * untouched; overriding the utilities and inline styles needs !important.
 *
 * Also wired to the phone-only section bar (#m_section_nav in product.php):
 * hidden by its `hidden` attribute everywhere else.
 *
 * Plain CSS on purpose, with no sibling .less: FileResolver compiles a .less on
 * request, and www-data cannot write into assets/stylesheets/ on B3/C, so a new
 * .less there is served as a 404 (FIX-1843). No nesting either — iOS Safari
 * before 16.5 cannot read native CSS nesting.
 */

@media (max-width: 767px) {

  /* ── Page frame ──────────────────────────────────────────────────────────
     Save / Cancel move from the fixed top bar to a bottom bar under the thumb. */
  #action_btn_bar {
    top: auto !important;
    bottom: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  }

  #action_btn_bar > div {
    display: flex;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  }

  #action_btn_bar .btn {
    flex: 1 1 0;
    width: auto !important;
    margin: 0 !important;
    padding: 10px 6px;
  }

  /* floating scroll-up / scroll-down chips: the section bar replaces them */
  #action_btn_bar ~ .pos-fix {
    display: none;
  }

  #form_body {
    margin-top: 0 !important;
    overflow: visible !important;
    padding-bottom: 76px !important; /* clear the bottom bar (.no-padding is !important) */
  }

  #form_body > .min-width-1224 {
    min-width: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* breadcrumb "All Product > Product Form" */
  #form_body .p-t-40.p-b-40.size-20-px {
    padding: 14px 2px 10px !important;
    font-size: 17px !important;
  }

  /* main column (72%) and side column (28%) stack */
  #form_body .width-72-pct.pull-left,
  #form_body .width-28-pct.pull-left {
    float: none !important;
    width: 100% !important;
  }

  /* max-content helper text/links wrap inside the screen */
  #form_body .contentWidth {
    width: fit-content !important;
    max-width: 100%;
  }

  /* two-halves rows (label + control pairs) stack */
  #form_body .inline-block.width-47-pct {
    display: block;
    width: 100% !important;
    float: none !important;
  }

  #form_body .inline-block.width-47-pct + .inline-block.width-47-pct {
    margin-top: 14px;
  }

  /* the "? Learn more" help boxes at the page foot */
  #form_body #learn_more .width-30-pct {
    width: 100% !important;
  }

  /* file inputs whose button is already hidden (::-webkit-file-upload-button)
     print a stray "No file chosen"; keep them clickable from script, off screen */
  #variationImageUpload,
  #fileToUpload {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    overflow: hidden;
  }

  /* ── Section bar ───────────────────────────────────────────────────────── */
  #m_section_nav {
    display: flex;
    gap: 6px;
    position: sticky;
    top: 0;
    z-index: 9;
    margin: 0 -10px;
    padding: 8px 10px;
    background: #eee;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #m_section_nav::-webkit-scrollbar {
    display: none;
  }

  #m_section_nav button {
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid #d5d9de;
    border-radius: 16px;
    background: #fff;
    color: #333;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
  }

  #m_section_nav button.active {
    border-color: #337ab7;
    background: #337ab7;
    color: #fff;
  }

  #version_info,
  #product_info,
  #variation,
  #title_item_spec,
  #html_des,
  #images,
  #pricing,
  #inventory,
  #policy,
  #create_listing {
    scroll-margin-top: 58px;
  }

  /* ── Version information ───────────────────────────────────────────────── */
  #version_info > .width-100-pct:first-child > .width-50-pct {
    width: 72% !important;
  }

  #version_info > .width-100-pct:first-child > .width-49-pct {
    width: 27% !important;
  }

  /* version picker / "or" / create-new-version: one block each */
  #version_info .m-t-10.m-b-10 > .width-100-pct > .inline-block {
    display: block;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
  }

  #version_info .m-t-10.m-b-10 > .width-100-pct > .color-blacka {
    text-align: center;
  }

  #version_info .btn.width-80-pct {
    width: 100% !important;
  }

  /* ── Product information ───────────────────────────────────────────────── */
  #product_info .input-group-btn select {
    width: 104px !important;
  }

  /* ── Variation ─────────────────────────────────────────────────────────── */
  /* "Variation Detail  [select-variation 25%]  Add": label / picker / button, one per line */
  #variation .inline-block.m-l-20.width-25-pct {
    display: block;
    width: 100% !important;
    margin: 0 !important;
  }

  #variation .inline-block.m-l-20.width-25-pct + .inline-block.m-l-20 {
    margin: 8px 0 0 !important;
  }

  /* the "type a new value" box at the end of the chips (80px wide) */
  #variation .inline-block.pull-left.m-l-10.m-t-10[style*="80px"] {
    width: 132px !important;
  }

  /* an attribute's value chips (80%) + its Remove button (20%) */
  #variation .width-100-pct.m-t-10 > .width-80-pct.pull-left {
    float: none !important;
    width: 100% !important;
  }

  #variation .width-100-pct.m-t-10 > .width-20-pct.pull-left {
    float: right !important;
    width: auto !important;
    margin-top: 8px;
    padding-left: 0 !important;
  }

  #variation .width-100-pct.m-t-10 > .width-20-pct.pull-left .btn {
    padding: 5px 18px;
  }

  /* variant grid (checkbox / variation / images / SKU / price …): scroll sideways */
  #variationProductArea {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #variationProductArea > div:not(:first-child) {
    min-width: 680px;
  }

  /* the bulk-edit box (700×440, absolute) would be clipped by the scroller */
  #variationProductArea .pos-abs[style*="700px"] {
    position: fixed !important;
    top: 60px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    height: auto !important;
    max-height: 75vh;
    overflow-y: auto;
    z-index: 1001 !important;
  }

  /* ── Title / item specifics ────────────────────────────────────────────── */
  /* each specific: label and value on one row instead of a half-width card */
  #title_item_spec .size-13-px.color-black5 > .width-100-pct > .width-50-pct {
    display: block;
    float: none !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
  }

  #title_item_spec .size-13-px.color-black5 > .width-100-pct > .width-50-pct > .width-100-pct {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  #title_item_spec .size-13-px.color-black5 > .width-100-pct > .width-50-pct > .width-100-pct > div:first-child {
    flex: 0 0 38%;
    min-width: 0;
    min-height: 0 !important;
    padding-top: 0 !important;
  }

  #title_item_spec .size-13-px.color-black5 > .width-100-pct > .width-50-pct > .width-100-pct > .m-t-10 {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0 !important;
  }

  /* eBay catalog picker: a fixed 1200px box inside a full-screen overlay */
  #title_item_spec .catalogListForm {
    overflow-y: auto;
  }

  #title_item_spec .catalogListForm > div[style*="1200px"] {
    width: 100% !important;
    padding-top: 0 !important;
    overflow-x: auto;
  }

  /* eBay Motors fitment table (only for fitment categories): scroll sideways */
  #platform_fitment {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Images ────────────────────────────────────────────────────────────── */
  #images .ko_container {
    margin: 0 -4px;
  }

  #images .imageUploaded {
    width: calc(33.333% - 8px) !important;
    height: auto !important;
    aspect-ratio: 1;
    margin: 4px !important;
    padding: 3px !important;
  }

  /* remove button is hover-only on desktop; touch has no hover */
  #images .imageUploaded .hoverDisplay {
    display: block;
    top: 4px !important;
    right: 4px !important;
  }

  /* "Main photo" ribbon */
  #images .imageUploaded > .pos-abs {
    bottom: 0 !important;
    padding: 2px !important;
    font-size: 11px !important;
  }

  /* the "+ add" tile */
  #images .imageUploaded .size-40-px {
    margin-top: 18% !important;
    font-size: 26px !important;
  }

  #images .imageUploaded .size-25-px {
    margin-top: 6px !important;
    font-size: 13px !important;
  }

  /* empty state (picture + links) and the add-by-URL rows */
  #images .width-34-pct.pull-left,
  #images .width-66-pct.pull-left,
  #images .inline-block.width-50-pct.pull-left {
    float: none !important;
    width: 100% !important;
  }

  #images .width-66-pct .m-t-70 {
    margin-top: 0 !important;
  }

  /* ── Pricing: W × H × D + unit row (22/5/22/5/22/24%) — widen the three inputs ── */
  #pricing .table-cell.width-22-pct {
    width: 27% !important;
  }

  #pricing .table-cell.width-22-pct .input-group-addon {
    padding-left: 7px;
    padding-right: 3px;
  }

  #pricing .table-cell.width-22-pct .form-control {
    padding-left: 3px;
    padding-right: 5px;
  }

  #pricing .table-cell.width-5-pct {
    width: 4% !important;
  }

  #pricing .table-cell.width-24-pct {
    width: 11% !important;
    min-width: 58px;
    padding-left: 6px !important;
  }

  #pricing .table-cell.width-24-pct .btn {
    padding-left: 6px;
    padding-right: 4px;
  }

  /* ── Inventory ─────────────────────────────────────────────────────────── */
  /* location / zip code, and the 25/30/45% warehouse details: stack */
  #inventory .table > .width-60-pct.table-cell,
  #inventory .table > .width-40-pct.table-cell,
  #inventory .table > .width-25-pct.table-cell,
  #inventory .table > .width-30-pct.table-cell,
  #inventory .table > .width-45-pct.table-cell {
    display: block;
    width: 100% !important;
    margin-bottom: 8px;
    padding-left: 0 !important;
  }

  /* quantity grid (SKU / Quantity / Safety line / Additional cost): scroll sideways */
  #inventory .border-b-2-e.no-margin {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #inventory .border-b-2-e.no-margin > .table {
    min-width: 460px;
  }

  /* ── Tag management (side column) ──────────────────────────────────────── */
  #tag_management {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ── Create listing ────────────────────────────────────────────────────── */
  /* marketplace / site / ID pickers + Add: one per row */
  #create_listing .table > .table-cell.width-75-pct,
  #create_listing .table > .table-cell.width-25-pct,
  #create_listing .table > .table-cell.width-33-pct,
  #create_listing .table > .table-cell.width-34-pct,
  #create_listing .table > .table-cell.width-67-pct {
    display: block;
    width: 100% !important;
    margin-bottom: 10px;
  }

  #create_listing .width-80-pct {
    width: 100% !important;
  }

  #create_listing .table-cell.width-25-pct .btn {
    display: block;
    width: 100%;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* the create-listing intro text */
  #create_listing .width-50-pct.m-t-30 {
    width: 100% !important;
  }

  /* existing listings table: scroll sideways */
  #create_listing .p-t-10.p-b-10.bk-color-white {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #create_listing .p-t-10.p-b-10.bk-color-white > div {
    min-width: 640px;
  }

  /* ── Bottom buttons ────────────────────────────────────────────────────── */
  #confirm_btn_group {
    display: block;
  }

  #confirm_btn_group > .table-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100% !important;
    margin-bottom: 8px;
  }

  #confirm_btn_group .btn {
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 9px 6px !important;
  }

  /* ── Overlays with fixed desktop widths ────────────────────────────────────
     width is inline `610px !important`, which no stylesheet can beat;
     max-width still clamps it. */
  #lockAlert,
  #deleteForm,
  #confirmForm {
    max-width: calc(100vw - 24px) !important;
    top: 64px !important;
    left: 12px !important;
    right: 12px !important;
  }

  /* (#lockAlert keeps its height: its OK button is pinned to the bottom) */
  #deleteForm,
  #confirmForm {
    height: auto !important;
    padding: 24px 18px !important;
  }

  #sse_message_box {
    left: 8px !important;
    right: 8px !important;
    bottom: 84px !important;
    width: auto !important;
  }

  /* ── Footer (a bootstrap .row: its -15px gutters overflow the screen) ───── */
  #footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden;
  }

  #footer footer > div {
    padding: 0 14px !important;
  }
}