/* Washkr-specific overrides, loaded after style.css so these rules win the cascade.
   Keeps product thumbnails a uniform square everywhere, regardless of the source image's
   original aspect ratio (Shopify-imported photos vary widely in shape). */

/* Generic avatar thumbnails (product-list, low-stocks, manage-stocks, expired-products,
   product-report, sold-stock, stock-adjustment, sub-categories, and user/employee avatars
   elsewhere) are already fixed-size squares via .avatar { width/height }; they just stretched
   non-square images to fill that square. object-fit: cover crops instead of distorting. */
.avatar img {
    object-fit: cover;
}

/* POS product grid: give every card's image area a fixed square instead of sizing to each
   image's natural dimensions. */
.pos-products .product-info .pro-img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.pos-products .product-info .pro-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* POS category sidebar: .tab-wrap stretches to the full height of the product grid (which can be
   tens of thousands of px with a large catalogue), while the category list inside it is a fixed
   400px box pinned to the top — so scrolling the products left the sidebar as blank space. Stick
   the sidebar to the top of the .pos-categories scroll container and size it to that container
   (calc(100vh - 132px), from style.css's .pos-five .pos-categories) so the categories stay in view
   and scroll on their own. */
@media (min-width: 992px) {
    .pos-five .pos-categories .tab-wrap {
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: calc(100vh - 132px);
    }
    .pos-five .pos-categories .tab-wrap .pos-category5 {
        height: 100%;
    }
}

/* Product details page image gallery. */
.slider-product img {
    width: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* POS cart (Phase 3.1 A10): the template gives every .form-control in the cart a 98px width, so
   the qty box (98px + the −/+ buttons) pushed the amount column out of the panel and amounts like
   ₹12,345.00 were clipped at 1366px. Keep the qty box narrow, never wrap an amount, and let the
   item name wrap instead. */
#pos-cart-wrap table { width: 100%; }
#pos-cart-wrap .qty-item { width: auto; }
/* Wide enough for the absolutely placed - / + buttons not to cover the number. */
#pos-cart-wrap .qty-item .form-control { width: 80px; min-width: 80px; }
#pos-cart-wrap th:last-child,
#pos-cart-wrap td:last-child { white-space: nowrap; min-width: 92px; text-align: right; }
/* The template sets white-space: nowrap on every table cell, so a long item name kept the
   first column wide and pushed the amounts out (found in the Phase 3.1 browser re-check). */
#pos-cart-wrap td:first-child, #pos-cart-wrap td:first-child * { white-space: normal; }
#pos-cart-wrap td:first-child { word-break: break-word; width: 100%; }
#pos-cart-wrap td:first-child input[data-line-discount] { width: 100%; max-width: 110px; }

/* POS grid (Phase 3.1 A11): products that cannot be billed (no stock at this branch, no GST rate). */
.pos-card-blocked { opacity: .55; filter: grayscale(.8); cursor: not-allowed; }
.pos-card-blocked a[data-set-gst] { cursor: pointer; opacity: 1; }
.pos-card-badge { position: absolute; top: 6px; left: 6px; font-style: normal; z-index: 2; }

/* POS at phone width (Phase 3.1 A20/B3): not a redesign (that is Phase 5) - only stop the page
   from scrolling sideways. Bootstrap row gutters and the fixed-width header items were wider
   than a 360-400px screen. */
@media (max-width: 767.98px) {
    body.pos-page, .pos-five { overflow-x: hidden; max-width: 100vw; }
    .pos-five .page-wrapper, .pos-five .content { max-width: 100vw; }
    .pos-five .row { --bs-gutter-x: .75rem; margin-left: 0; margin-right: 0; }
    .pos-five img { max-width: 100%; height: auto; }
}

/* Quick billing at phone width (Phase 5 Step 12): the POS pages are the phone experience; this
   only keeps the counter screen usable. The category list becomes one scrollable row of small
   chips instead of a wall of 160+ big tiles above the products. */
@media (max-width: 767.98px) {
    .pos-five .pos-categories .tabs { display: flex !important; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 6px; transform: none !important; }
    .pos-five .pos-categories .tabs li { flex: 0 0 auto; width: auto !important; min-width: 0; padding: 6px 10px !important; margin: 0 !important; }
    .pos-five .pos-categories .tabs li img, .pos-five .pos-categories .tabs li .avatar { display: none !important; }
    .pos-five .pos-categories .tabs li h6 { font-size: 12px; margin: 0; white-space: nowrap; }
}