/* =====================================================================
* EXIM Marketplace — Responsive / Mobile & Tablet optimizations
* ---------------------------------------------------------------------
* ===================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
min-width: 0;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product {
min-width: 0 !important; /* allow grid tracks to shrink evenly */
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
ul.products li.product .woocommerce-loop-product__title,
.products .product h2,
.product-short-description {
overflow-wrap: anywhere;
word-break: break-word;
}
/* Respect the theme's chosen column count but with shrinkable tracks so
desktop columns are even too. */
ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
/* Tablet: 3 clean columns (source-ordered AFTER the columns-N rules so it
wins at equal specificity). */
@media (max-width: 767px) {
ul.products:not(.slick-slider) {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 15px !important;
}
.woocommerce-products-header .page-title{
font-size: 30px;
}
ul.products .product .woocommerce-loop-product__title{
font-size: 16px !important;
}
}
.woocommerce nav.woocommerce-pagination ul{
display: flex !important;
gap: 5px 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* =====================================================================
* 2. SHOP / CATEGORY FILTER — full-screen LEFT drawer on tablet & phones
* ---------------------------------------------------------------------
* Desktop keeps the filter as a .col-md-3 sidebar beside the products.
* On tablet AND phone (<=991px) it becomes a FULL-SCREEN slide-in drawer
* from the LEFT: a "Filters" button (injected by js/responsive.js) opens
* it; products use the full width underneath. Close by the X or Esc.
*
* The sidebar is `display:none` on load and only shown once JS arms the
* drawer (adds body.exim-filter-ready) — this avoids a flash of the tall
* filter rendering in normal flow before the script hides it. The filter
* needs JS to function (AJAX), so hiding it when JS is absent is fine.
* ===================================================================== */
@media (max-width: 991px) {
.products-sidebar .mpd-filter-container{
border: none;
}
/* Products span the full row (the sidebar is taken out of flow). */
.products-section .products-main,
.products-main.col-md-9 {
flex: 0 0 100%;
max-width: 100%;
width: 100%;
}
/* Hidden on load — no in-flow flash before the drawer is armed. */
.products-section .products-sidebar,
.products-sidebar.col-md-3 {
display: none;
}
/* --- The full-screen drawer (only once JS arms it) --- */
body.exim-filter-ready .products-section .products-sidebar,
body.exim-filter-ready .products-sidebar.col-md-3 {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 100%;
margin: 0 !important;
padding: 0;
z-index: 100000;
background: #fff;
transform: translateX(-100%);
transition: transform .28s ease;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
body.exim-filter-ready.exim-filter-open .products-sidebar {
transform: translateX(0);
}
body.exim-filter-ready .mpd-filter-container {
margin: 0 !important;
width: 100% !important;
max-width: 100% !important; /* theme caps this at 300px — fill the drawer */
}
body.exim-filter-ready .mpd-filter-body {
width: 100% !important;
max-width: 100% !important;
}
/* Drawer title bar sticks to the top while the body scrolls. */
body.exim-filter-ready .products-sidebar .mpd-filter-header {
position: sticky;
top: 0;
z-index: 2;
}
/* --- Trigger button (injected into .products-main) --- */
.exim-filter-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 16px;
padding: 10px 18px;
min-height: 44px;
border: 0;
border-radius: 8px;
background: #005daa;
color: #fff;
font-size: 15px;
font-weight: 600;
line-height: 1;
cursor: pointer;
}
.exim-filter-trigger svg { width: 18px; height: 18px; fill: currentColor; }
.exim-filter-trigger .exim-filter-count {
background: #78D648;
color: #063;
border-radius: 20px;
padding: 1px 8px;
font-size: 12px;
}
/* --- Close (X) button injected into the drawer header --- */
.exim-filter-close {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .18);
color: inherit;
font-size: 22px;
line-height: 1;
cursor: pointer;
color: #fff;
}
/* --- Backdrop --- */
.exim-filter-backdrop {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(0, 0, 0, .5);
opacity: 0;
visibility: hidden;
transition: opacity .28s ease, visibility .28s ease;
}
body.exim-filter-open .exim-filter-backdrop {
opacity: 1;
visibility: visible;
}
/* Lock the page behind the open drawer. */
body.exim-filter-open {
overflow: hidden;
}
}
/* Desktop: hide the mobile-only trigger/close/backdrop if they linger. */
@media (min-width: 992px) {
.exim-filter-trigger,
.exim-filter-close,
.exim-filter-backdrop {
display: none !important;
}
}
/* =====================================================================
* 3. CART — totals rows & item name
* ---------------------------------------------------------------------
* The Cart Totals table (.cart_totals table.shop_table.shop_table_responsive)
* collapses on mobile so the
label and
value touch with no
* gap — rendering "SubtotalUS$43.50" / "GSTUS$3.92" / "TotalUS$47.42".
* Lay each row out as a flex row: label left, value right.
* Totals fix runs to <=991 (tablet hit the same run-together bug); the
* item-card rebuild below is phone-only (<=767) — the tablet cart row has
* room to stay a horizontal line.
* ===================================================================== */
@media (max-width: 991px) {
/* Force the de-table layout with !important — the theme's cart CSS sets
tr{display:flex}, which would otherwise turn each td into a shrinking
flex item instead of a full-width row. */
.cart_totals table.shop_table,
.cart_totals table.shop_table tbody {
display: block !important;
width: 100% !important;
}
.cart_totals table.shop_table tr {
display: block !important;
width: 100% !important;
padding: 10px 0;
border-bottom: 1px solid #eef0f3;
}
.cart_totals table.shop_table tr:last-child {
border-bottom: 0;
}
/* WooCommerce's .shop_table_responsive hides
and prints the label
from td[data-title] via ::before — so the label AND value both live in
the
. Flex the td: label (::before) left, value right. */
.cart_totals table.shop_table th {
display: none !important;
}
.cart_totals table.shop_table td {
display: flex !important;
justify-content: space-between;
align-items: baseline;
gap: 12px;
width: 100% !important;
padding: 0 !important;
border: 0 !important;
text-align: right;
}
.cart_totals table.shop_table td::before {
content: attr(data-title);
font-weight: 600;
text-align: left;
white-space: nowrap;
color: #333;
}
/* The shipping row can hold a whole calculator form — stack it instead
of squashing the form into a flex value. */
.cart_totals table.shop_table tr.shipping td {
display: block;
text-align: left;
}
.cart_totals table.shop_table tr.shipping td::before {
display: block;
margin-bottom: 6px;
}
.cart_totals .shipping-calculator-form .form-row {
width: 100%;
}
.e-shop-table.e-cart-section,
.e-cart-totals.e-cart-section {
padding: 0 !important;
}
}
/* ===== Cart item card — phones only (<=767) ===== */
@media (max-width: 767px) {
/* ---------------------------------------------------------------
* Cart item card. The theme forces `tr.cart_item{display:flex}`, so
* all 6 table columns cram into ~375px and the part-number name cell
* collapses to ~31px — rendering one letter per line (U/S/B/-/B...).
* Rebuild each row as a compact 2-column grid card instead:
*
* [ img ] Product name (×)
* [ img ] S$1.1136 / unit
* [ qty ] SUBTOTAL
* S$55.68
* ------------------------------------------------------------- */
.woocommerce-cart-form table.cart tr.cart_item {
display: grid !important;
grid-template-columns: 76px 1fr;
grid-template-areas:
"thumb name"
"thumb price"
"qty subtotal";
column-gap: 14px;
row-gap: 6px;
align-items: center;
position: relative;
padding: 16px 4px;
border-bottom: 1px solid #eef0f3;
}
.woocommerce-cart-form table.cart tr.cart_item:last-of-type {
border-bottom: 0;
}
.woocommerce-cart-form table.cart tr.cart_item > td {
display: block;
width: auto !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
text-align: left !important;
}
/* Drop the shop_table_responsive "data-title" pseudo-labels (except the
subtotal cell, which we restyle into a label just below). */
.woocommerce-cart-form table.cart tr.cart_item > td:not(.product-subtotal)::before {
display: none !important;
}
.cart_item .product-thumbnail {
grid-area: thumb;
align-self: start;
}
.cart_item .product-thumbnail img {
width: 76px !important;
height: 76px !important;
max-width: none;
object-fit: contain;
border: 1px solid #eef0f3;
border-radius: 8px;
}
.cart_item .product-name {
grid-area: name;
align-self: end;
}
.cart_item .product-name a {
font-weight: 600;
font-size: 15px;
line-height: 1.3;
color: #101828;
overflow-wrap: anywhere;
}
.cart_item .product-price {
grid-area: price;
align-self: start;
color: #667085;
font-size: 14px;
}
.cart_item .product-price::after {
content: " / unit";
color: #98a2b3;
font-size: 12px;
}
.cart_item .product-quantity {
grid-area: qty;
}
.cart_item .product-quantity input.qty {
width: 76px !important;
min-height: 44px;
}
.cart_item .product-subtotal {
grid-area: subtotal;
justify-self: end;
text-align: right !important;
font-weight: 700;
font-size: 16px;
color: #101828;
}
.woocommerce-cart-form table.cart tr.cart_item td.product-subtotal::before {
content: "Subtotal";
display: block !important;
font-weight: 400;
font-size: 10px;
letter-spacing: .05em;
text-transform: uppercase;
color: #98a2b3;
}
.cart_item .product-remove {
position: absolute;
top: 10px;
right: 2px;
width: auto !important;
}
.cart_item .product-remove .remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
font-size: 20px;
line-height: 1;
color: #b42318 !important;
border-radius: 50%;
}
}
/* =====================================================================
* 4. TAP TARGETS & iOS ZOOM — forms, quantity, buttons
* ---------------------------------------------------------------------
* Cart qty inputs were 28px tall and 8 checkout fields under 40px — below
* the ~44px comfortable touch target. Sub-16px font also makes iOS Safari
* auto-zoom on focus. Bump both on phones.
* ===================================================================== */
@media (max-width: 767px) {
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-account input.input-text,
.select2-container .select2-selection--single {
font-size: 16px !important; /* prevents iOS zoom-on-focus */
min-height: 44px !important;
line-height: 1.3;
}
.select2-container .select2-selection--single .select2-selection__rendered {
line-height: 42px !important;
}
.select2-container .select2-selection--single .select2-selection__arrow {
height: 42px !important;
}
/* Quantity steppers on cart / product */
.woocommerce .quantity input.qty,
.woocommerce div.product form.cart .quantity input.qty {
font-size: 16px !important;
min-height: 44px !important;
width: 72px !important;
}
}
/* =====================================================================
* 5. CHECKOUT — kill phantom horizontal overflow
* ---------------------------------------------------------------------
* 56px of horizontal scroll came from two INVISIBLE helper elements, not
* from visible content:
* a) select2's hidden