/* ==========================================================================
   JLS Computers — Shop / category / brand / search grids + product cards
   Shared account/PDP style. Loaded site-wide (product cards also appear on
   the homepage). "html body" prefixes out-rank the Customizer's Additional
   CSS, which loads after theme stylesheets and uses !important.
   ========================================================================== */

/* ---------- Category header ---------- */
html body .jls-category-header { border-radius: var(--a-radius-lg); padding: 28px 30px 26px; background: radial-gradient(120% 160% at 100% 0%, #2C5697 0%, #1F3361 45%, #15203A 100%); box-shadow: 0 10px 30px rgba(21, 32, 58, .18); }
html body .jls-category-header::after { display: none; }
html body .jls-category-header h1 { margin: 0 0 6px; font-size: 32px; font-weight: 800; letter-spacing: var(--jls-heading-tracking); text-transform: none; }
html body .jls-category-header p { color: #C9D3E8; font-size: 15px; max-width: 640px; }
html body .jls-category-header .jls-breadcrumbs { margin-bottom: 10px; font-size: 13px; color: #8FA0C4; }
html body .jls-category-header .jls-breadcrumbs a { color: #C9D3E8; }
html body .jls-category-header .jls-breadcrumbs span { color: #5E73A0; }
html body .jls-category-header__count { margin-top: 14px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #fff; font-size: 12px; font-weight: 600; }

/* ---------- Subcategory chips ---------- */
html body .jls-subcategory-chips { gap: 8px; margin-bottom: 18px; padding: 0 0 18px; border-bottom: 1px solid var(--a-line-2); }
html body .jls-subcategory-chips a { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--a-line); background: #fff; color: var(--a-ink); font-size: 13px; font-weight: 600; }
html body .jls-subcategory-chips a:hover { border-color: var(--a-navy); background: var(--a-navy-50); color: var(--a-navy); }

/* ---------- Sidebar filters ---------- */
html body .jls-sidebar-widget { padding: 18px; margin-bottom: 14px; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: #fff; box-shadow: var(--a-shadow); }
html body .jls-sidebar-widget__title { display: block; margin: 0 0 10px; padding: 0; border: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--a-muted); font-family: var(--jls-font, "Inter", sans-serif); }
html body .jls-sidebar-widget ul li { margin: 0; }
html body .jls-sidebar-widget ul li a { padding: 7px 10px; margin: 0 -10px; border-radius: 8px; font-size: 14px; color: var(--a-text); }
html body .jls-sidebar-widget ul li a:hover { background: var(--a-soft); color: var(--a-navy); }
html body .jls-sidebar-widget ul li.active a { background: var(--a-navy-50); color: var(--a-navy); font-weight: 600; box-shadow: inset 3px 0 0 var(--a-navy); }
html body .jls-sidebar-widget ul li .count { color: #A7B0C4; }
html body .jls-sidebar-widget .jls-sidebar-back a { color: var(--a-navy); font-weight: 600; }
html body .jls-sidebar-widget .price_slider_wrapper .ui-slider { background: var(--a-line); }
html body .jls-sidebar-widget .price_slider_wrapper .ui-slider .ui-slider-range, html body .jls-sidebar-widget .price_slider_wrapper .ui-slider .ui-slider-handle { background: var(--a-navy); }
html body .jls-sidebar-widget .price_slider_amount { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--a-text); }
html body .jls-sidebar-widget .price_slider_amount .button { order: 2; padding: 7px 14px; border-radius: 9px; background: var(--a-navy-50) !important; color: var(--a-navy) !important; font-weight: 600; }
html body .jls-sidebar-widget .price_slider_amount .button:hover { background: var(--a-navy) !important; color: #fff !important; }
html body .jls-checkbox-filter .jls-checkbox-box { border-radius: 5px; }
html body .jls-checkbox-filter.checked .jls-checkbox-box { background: var(--a-navy); border-color: var(--a-navy); }
html body .jls-toggle-switch.active { background: var(--a-navy); }

/* ---------- Toolbar ---------- */
html body .woocommerce-result-count { margin: 0 0 16px; font-size: 14px; color: var(--a-muted); line-height: 42px; }
html body .woocommerce-ordering { margin: 0 0 16px; }
html body .woocommerce-ordering select { height: 42px; padding: 0 36px 0 14px; border: 1.5px solid var(--a-line); border-radius: 11px; background-color: #fff; font-size: 14px; color: var(--a-ink); cursor: pointer; }
html body .woocommerce-ordering select:focus { outline: none; border-color: var(--a-navy); box-shadow: 0 0 0 3px var(--a-navy-50); }

/* ---------- Product cards (every loop: shop, category, brand, search, homepage) ---------- */
html body ul.products { gap: 16px !important; }
html body ul.products li.product {
	background: #fff !important; border: 1px solid var(--a-line) !important; border-radius: var(--a-radius) !important;
	box-shadow: var(--a-shadow) !important; overflow: hidden; transition: box-shadow .18s, transform .18s, border-color .18s;
}
html body ul.products li.product:hover { transform: translateY(-2px) !important; box-shadow: var(--a-shadow-lg) !important; border-color: #D5DDEB !important; }
html body ul.products li.product .woocommerce-LoopProduct-link img {
	margin: 12px 12px 10px !important; width: calc(100% - 24px) !important; padding: 14px !important;
	border-radius: 10px !important; background: var(--a-soft) !important; border: 0 !important; mix-blend-mode: multiply;
}
html body ul.products li.product .jls-product-brand, html body ul.products li.product .jls-loop-brand {
	padding: 0 16px !important; margin: 0 0 4px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .05em !important; color: var(--a-navy) !important;
}
html body ul.products li.product .woocommerce-loop-product__title {
	padding: 0 16px !important; font-family: var(--jls-font, "Inter", sans-serif) !important; font-size: 14.5px !important; font-weight: 600 !important; line-height: 1.4 !important; color: var(--a-ink) !important;
}
html body ul.products li.product:hover .woocommerce-loop-product__title { color: var(--a-navy) !important; }
html body ul.products li.product .price { padding: 0 16px !important; margin: auto 0 6px !important; padding-top: 10px !important; }
html body ul.products li.product .price, html body ul.products li.product .price .amount, html body ul.products li.product .price bdi {
	font-family: var(--jls-font-heading) !important; font-size: 1.2rem !important; font-weight: 800 !important; letter-spacing: var(--jls-heading-tracking); color: var(--a-ink) !important;
}
html body ul.products li.product .price .woocommerce-price-suffix { font: 500 11px/1 var(--jls-font, "Inter", sans-serif) !important; color: var(--a-muted) !important; }
html body ul.products li.product .price del, html body ul.products li.product .price del .amount, html body ul.products li.product .price del bdi { font-size: .85rem !important; font-weight: 500 !important; color: var(--a-muted) !important; }
html body ul.products li.product .price ins, html body ul.products li.product .price ins .amount, html body ul.products li.product .price ins bdi { text-decoration: none; color: var(--a-red) !important; }

/* Stock line → pill */
html body ul.products li.product .jls-stock-badge { display: flex !important; padding: 0 16px !important; margin: 0 0 12px !important; min-height: 0 !important; }
html body ul.products li.product .jls-stock-badge.in-stock { color: var(--a-green) !important; font-size: 12px !important; font-weight: 600; gap: 5px; }
html body ul.products li.product .jls-stock-badge.out-of-stock { color: var(--a-muted) !important; font-size: 12px !important; font-weight: 600; text-transform: none; }

/* Button: soft brand, sentence case */
html body ul.products li.product a.button, html body ul.products li.product .button {
	display: flex !important; align-items: center; justify-content: center; gap: 6px;
	margin: auto 16px 16px !important; padding: 10px 14px !important; min-height: 42px; border-radius: 10px !important; border: 0 !important;
	background: var(--a-navy) !important; color: #fff !important; font: 600 14px/1.2 var(--jls-font, "Inter", sans-serif) !important; text-transform: none !important; letter-spacing: 0 !important;
}
html body ul.products li.product a.button:hover, html body ul.products li.product .button:hover { background: var(--a-navy-600) !important; }
html body ul.products li.product a.button.loading { opacity: .7; }
html body ul.products li.product a.button.added { background: var(--a-green) !important; }
html body ul.products li.product a.button.product_type_variable,
html body ul.products li.product a.button:not(.add_to_cart_button) { background: var(--a-navy-50) !important; color: var(--a-navy) !important; }
html body ul.products li.product .onsale { top: 22px !important; left: 22px !important; padding: 4px 10px !important; border-radius: 999px !important; background: var(--a-red) !important; font: 700 11px/1.4 var(--jls-font, "Inter", sans-serif) !important; text-transform: none !important; }

/* Category tiles */
html body ul.products li.product-category img { margin: 12px 12px 0 !important; width: calc(100% - 24px) !important; background: var(--a-soft) !important; }
html body ul.products li.product-category .woocommerce-loop-category__title { font-size: 14px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: var(--jls-heading-tracking); color: var(--a-ink) !important; }

/* ---------- Pagination ---------- */
html body .woocommerce nav.woocommerce-pagination ul li a, html body .woocommerce nav.woocommerce-pagination ul li span { width: 42px; height: 42px; border-radius: 11px; border: 1.5px solid var(--a-line); font-weight: 600; color: var(--a-ink); }
html body .woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--a-navy); color: var(--a-navy); background: var(--a-navy-50); }
html body .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--a-navy); border-color: var(--a-navy); color: #fff; }

/* ---------- No results ---------- */
html body.woocommerce-page .woocommerce-no-products-found .woocommerce-info { border-radius: var(--a-radius-lg); border: 1px dashed #CBD4E4; background: #fff; }

@media (max-width: 600px) {
	html body .jls-category-header { padding: 22px 18px; border-radius: var(--a-radius); }
	html body .jls-category-header h1 { font-size: 23px; }
	html body ul.products { gap: 10px !important; }
	html body ul.products li.product .woocommerce-LoopProduct-link img { margin: 8px 8px 8px !important; width: calc(100% - 16px) !important; padding: 8px !important; }
	html body ul.products li.product .jls-product-brand, html body ul.products li.product .woocommerce-loop-product__title, html body ul.products li.product .price, html body ul.products li.product .jls-stock-badge { padding-left: 10px !important; padding-right: 10px !important; }
	html body ul.products li.product .woocommerce-loop-product__title { font-size: 13.5px !important; }
	html body ul.products li.product a.button, html body ul.products li.product .button { margin: auto 10px 10px !important; font-size: 13px !important; }
}
html body ul.products li.product a, html body ul.products li.product a:hover { text-decoration: none !important; }

/* ---------- Homepage category tiles ([jls_category_tiles]) ----------
   Every image box is locked to the same 4:3 frame (portrait or very wide
   catalogue photos used to stretch their tile), and each tile fills its row. */
html body .jls-cat-grid { align-items: stretch; gap: 14px; }
html body .jls-cat-tile { height: 100%; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: #fff; box-shadow: var(--a-shadow); }
html body .jls-cat-tile:hover { border-color: #D5DDEB; box-shadow: var(--a-shadow-lg); transform: translateY(-2px); }
html body .jls-cat-tile__media { position: relative; display: block; aspect-ratio: 4 / 3; min-height: 0; height: auto; overflow: hidden; margin: 10px 10px 0; border-radius: 10px; background: var(--a-soft); }
html body .jls-cat-tile__media img { box-sizing: border-box; position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: contain; padding: 12px; mix-blend-mode: multiply; }
html body .jls-cat-tile.is-imageless .jls-cat-tile__media { background: linear-gradient(135deg, var(--a-navy-50), var(--a-navy-100)); }
html body .jls-cat-tile__body { flex: 1; padding: 12px 14px 14px; border-top: 0; }
html body .jls-cat-tile__name { font-size: 14.5px; font-weight: 700; color: var(--a-ink); }
html body .jls-cat-tile:hover .jls-cat-tile__name { color: var(--a-navy); }
html body .jls-cat-tile__count { font-size: 12.5px; color: var(--a-muted); }