/* ABCXYZ JoomShopping Mobile Experience v1.0
   Scope: public com_jshopping pages only via body.abcxyz-jshop.
   Does not alter prices, cart state, checkout logic, payment logic or desktop layout. */

body.abcxyz-jshop {
  --abc-shop-navy:#123f63;
  --abc-shop-blue:#1f6f9f;
  --abc-shop-blue-2:#208fbd;
  --abc-shop-ink:#183b54;
  --abc-shop-muted:#6f7f8b;
  --abc-shop-line:#dde7ef;
  --abc-shop-soft:#f2f7fb;
  --abc-shop-card:#ffffff;
  --abc-shop-danger:#a83e3e;
  --abc-shop-success:#198754;
}

body.abcxyz-jshop .abcxyz-js-checkout-steps {
  direction:rtl;
}

@media (max-width: 820px) {
  body.abcxyz-jshop {
    overflow-x:hidden!important;
    padding-bottom:max(118px, calc(96px + env(safe-area-inset-bottom)))!important;
  }

  body.abcxyz-jshop main,
  body.abcxyz-jshop [role="main"],
  body.abcxyz-jshop #content,
  body.abcxyz-jshop .component-content,
  body.abcxyz-jshop .container-component {
    max-width:100%!important;
    overflow-x:clip!important;
  }

  /* Cart table -> real mobile cards. JS only marks tables that actually have cart columns. */
  body.abcxyz-jshop .abcxyz-js-cart-table {
    display:block!important;
    width:100%!important;
    min-width:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.abcxyz-jshop .abcxyz-js-cart-table thead,
  body.abcxyz-jshop .abcxyz-js-cart-table .abcxyz-js-cart-header-row {
    display:none!important;
  }
  body.abcxyz-jshop .abcxyz-js-cart-table tbody {
    display:grid!important;
    gap:18px!important;
    width:100%!important;
  }
  body.abcxyz-jshop .abcxyz-js-cart-table tr.abcxyz-js-cart-row {
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
    margin:0!important;
    padding:18px!important;
    background:var(--abc-shop-card)!important;
    border:1px solid var(--abc-shop-line)!important;
    border-radius:24px!important;
    box-shadow:0 12px 30px rgba(20,61,88,.08)!important;
  }
  body.abcxyz-jshop .abcxyz-js-cart-table tr.abcxyz-js-cart-row > td {
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    margin:0!important;
    padding:13px 14px!important;
    border:0!important;
    border-radius:16px!important;
    background:var(--abc-shop-soft)!important;
    color:var(--abc-shop-ink)!important;
    text-align:start!important;
    vertical-align:middle!important;
  }
  body.abcxyz-jshop .abcxyz-js-cart-table tr.abcxyz-js-cart-row > td::before {
    content:attr(data-abcxyz-label);
    flex:0 0 auto;
    color:var(--abc-shop-muted)!important;
    font-weight:700!important;
    white-space:nowrap;
  }

  body.abcxyz-jshop .abcxyz-js-cart-table td[data-abcxyz-role="image"] {
    justify-content:center!important;
    background:#fff!important;
    padding:4px!important;
  }
  body.abcxyz-jshop .abcxyz-js-cart-table td[data-abcxyz-role="image"]::before,
  body.abcxyz-jshop .abcxyz-js-cart-table td[data-abcxyz-role="product"]::before,
  body.abcxyz-jshop .abcxyz-js-cart-table td[data-abcxyz-role="remove"]::before {
    display:none!important;
  }
  body.abcxyz-jshop .abcxyz-js-cart-table td[data-abcxyz-role="image"].abcxyz-js-empty {
    display:none!important;
  }
  body.abcxyz-jshop .abcxyz-js-cart-table td[data-abcxyz-role="image"] img {
    display:block!important;
    width:auto!important;
    max-width:min(100%,240px)!important;
    height:auto!important;
    max-height:220px!important;
    object-fit:contain!important;
    margin-inline:auto!important;
    border-radius:14px!important;
  }

  body.abcxyz-jshop .abcxyz-js-cart-table td[data-abcxyz-role="product"] {
    display:block!important;
    padding:6px 4px 14px!important;
    background:#fff!important;
    border-radius:0!important;
    font-size:1.03rem!important;
    font-weight:700!important;
    line-height:1.85!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  body.abcxyz-jshop .abcxyz-js-cart-table td[data-abcxyz-role="product"] a,
  body.abcxyz-jshop .abcxyz-js-cart-table td[data-abcxyz-role="product"] strong {
    color:var(--abc-shop-ink)!important;
    font-weight:800!important;
    text-decoration:none!important;
  }

  body.abcxyz-jshop .abcxyz-js-cart-table td[data-abcxyz-role="price"],
  body.abcxyz-jshop .abcxyz-js-cart-table td[data-abcxyz-role="total"] {
    font-size:1.02rem!important;
    font-weight:800!important;
  }
  body.abcxyz-jshop .abcxyz-js-cart-table td[data-abcxyz-role="total"] {
    background:#eaf4fb!important;
  }

  body.abcxyz-jshop .abcxyz-js-cart-table td[data-abcxyz-role="quantity"] {
    min-height:74px!important;
  }
  body.abcxyz-jshop .abcxyz-js-cart-table td[data-abcxyz-role="quantity"] input[type="number"],
  body.abcxyz-jshop .abcxyz-js-cart-table td[data-abcxyz-role="quantity"] input[type="text"] {
    width:92px!important;
    min-width:92px!important;
    max-width:92px!important;
    height:50px!important;
    padding:8px 10px!important;
    border:1px solid #cbd9e4!important;
    border-radius:14px!important;
    background:#fff!important;
    color:#183b54!important;
    font-size:1.15rem!important;
    font-weight:800!important;
    text-align:center!important;
    box-shadow:none!important;
  }
  body.abcxyz-jshop .abcxyz-js-cart-table td[data-abcxyz-role="quantity"] .abcxyz-js-qty-update {
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    margin-inline-start:8px!important;
    padding:0!important;
    border:1px solid #cbd9e4!important;
    border-radius:12px!important;
    background:#fff!important;
    color:var(--abc-shop-blue)!important;
    font-size:1.25rem!important;
    line-height:1!important;
  }

  body.abcxyz-jshop .abcxyz-js-cart-table td[data-abcxyz-role="remove"] {
    justify-content:flex-end!important;
    padding:8px 0 0!important;
    background:#fff!important;
  }
  body.abcxyz-jshop .abcxyz-js-cart-table td[data-abcxyz-role="remove"] a,
  body.abcxyz-jshop .abcxyz-js-cart-table td[data-abcxyz-role="remove"] button,
  body.abcxyz-jshop .abcxyz-js-cart-table td[data-abcxyz-role="remove"] input[type="submit"],
  body.abcxyz-jshop .abcxyz-js-cart-table td[data-abcxyz-role="remove"] input[type="button"] {
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:118px!important;
    min-height:48px!important;
    padding:10px 18px!important;
    border:1px solid #edcaca!important;
    border-radius:14px!important;
    background:#fff6f6!important;
    color:var(--abc-shop-danger)!important;
    font-weight:800!important;
    text-decoration:none!important;
    box-shadow:none!important;
  }

  /* Long title and links must never be squeezed into a narrow pseudo-column. */
  body.abcxyz-jshop .abcxyz-js-cart-table td,
  body.abcxyz-jshop .abcxyz-js-cart-table a,
  body.abcxyz-jshop .abcxyz-js-cart-table span,
  body.abcxyz-jshop .abcxyz-js-cart-table div {
    max-width:100%!important;
  }

  /* Checkout actions: readable touch targets without touching href/form actions. */
  body.abcxyz-jshop .abcxyz-js-shop-actions {
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    width:100%!important;
    margin-block:16px!important;
  }
  body.abcxyz-jshop .abcxyz-js-shop-actions > * {
    min-width:0!important;
    width:100%!important;
  }
  body.abcxyz-jshop .abcxyz-js-shop-actions a,
  body.abcxyz-jshop .abcxyz-js-shop-actions button,
  body.abcxyz-jshop .abcxyz-js-shop-actions input[type="submit"],
  body.abcxyz-jshop .abcxyz-js-shop-actions input[type="button"] {
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-height:54px!important;
    padding:12px 14px!important;
    border-radius:16px!important;
    white-space:normal!important;
    text-align:center!important;
    line-height:1.5!important;
  }

  /* Checkout/address/payment forms. */
  body.abcxyz-jshop form input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
  body.abcxyz-jshop form select,
  body.abcxyz-jshop form textarea {
    max-width:100%!important;
  }
  body.abcxyz-jshop .abcxyz-js-checkout-form-row {
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    width:100%!important;
  }
  body.abcxyz-jshop .abcxyz-js-checkout-choice {
    display:flex!important;
    align-items:flex-start!important;
    gap:10px!important;
    width:100%!important;
    padding:14px!important;
    margin-block:8px!important;
    border:1px solid var(--abc-shop-line)!important;
    border-radius:16px!important;
    background:#fff!important;
  }

  /* The 4-step checkout indicator stays on one clean row on phones. */
  body.abcxyz-jshop .abcxyz-js-checkout-steps {
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:4px!important;
    width:100%!important;
    overflow:visible!important;
  }
  body.abcxyz-jshop .abcxyz-js-checkout-steps > * {
    min-width:0!important;
  }

  /* General JoomShopping product/category resilience. */
  body.abcxyz-jshop :is(.jshop_list_product,.jshop_list_products,.products,.list_products,.product_list,.block_product) {
    max-width:100%!important;
  }
  body.abcxyz-jshop :is(.jshop_list_product,.jshop_list_products,.products,.list_products) img {
    max-width:100%!important;
    height:auto!important;
  }

  /* Prevent fixed mobile navigation from covering cart controls/content. */
  body.abcxyz-jshop .abcxyz-js-shop-main-tail {
    height:18px!important;
    width:100%!important;
    pointer-events:none!important;
  }
}

@media (max-width: 430px) {
  body.abcxyz-jshop .abcxyz-js-shop-actions {
    grid-template-columns:1fr!important;
  }
  body.abcxyz-jshop .abcxyz-js-cart-table tr.abcxyz-js-cart-row {
    padding:15px!important;
    border-radius:20px!important;
  }
  body.abcxyz-jshop .abcxyz-js-cart-table tr.abcxyz-js-cart-row > td {
    padding:12px!important;
  }
}