/* ==========================================================================
   JLS Computers — Homepage skin (shared account/PDP/cart style)
   Loaded on the front page only (inc/jls-ui.php). CSS-only: works on the
   existing markup (GP hero Element, page 41 content, inc/home-sections.php).
   "html body" prefixes out-rank style.css and the Customizer's Additional CSS.
   Product cards + category tiles come from jls-shop.css.
   ========================================================================== */

/* ---------- Hero (GP Element: section.jls-hero) ---------- */
html body .jls-hero { min-height: 500px; }
html body .jls-hero__overlay { background: linear-gradient(100deg, rgba(21, 32, 58, .92) 0%, rgba(31, 51, 97, .72) 42%, rgba(21, 32, 58, .05) 78%); }
html body .jls-hero__content { max-width: 620px; padding: 64px 0 64px max(24px, calc((100vw - 1280px) / 2 + 24px)); }
html body .jls-hero__badge { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; backdrop-filter: blur(6px); }
html body .jls-hero__title { margin: 0 0 14px; font-size: clamp(34px, 4.6vw, 54px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; text-transform: none; color: #fff; }
html body .jls-hero__title span { color: #7FB2FF; }
html body .jls-hero__description { max-width: 480px; margin-bottom: 28px; font-size: 17px; line-height: 1.6; color: #D6DEEE; }
html body .jls-hero__actions { gap: 10px; }
html body .jls-hero .jls-btn-primary, html body .jls-hero .jls-btn-outline { min-height: 50px; padding: 0 24px; border-radius: 12px; font: 600 15px/1 var(--jls-font, "Inter", sans-serif); text-transform: none; letter-spacing: 0; }
html body .jls-hero .jls-btn-primary { background: #fff; color: var(--a-navy) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
html body .jls-hero .jls-btn-primary:hover { background: var(--a-navy-50); transform: translateY(-1px); }
html body .jls-hero .jls-btn-outline { background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(255, 255, 255, .35); color: #fff !important; }
html body .jls-hero .jls-btn-outline:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .6); }

/* ---------- Value bar (overlaps the hero) ---------- */
html body .jls-value-bar { max-width: 1232px; margin: -44px auto 8px; border: 1px solid var(--a-line); border-radius: var(--a-radius-lg); background: #fff; box-shadow: var(--a-shadow-lg); }
html body .jls-value-bar__item { gap: 12px; padding: 18px 20px; border-right: 1px solid var(--a-line-2); }
html body .jls-value-bar__item:hover { background: var(--a-soft); }
html body .jls-value-bar__icon { width: 42px; height: 42px; border-radius: 12px; background: var(--a-navy-50); color: var(--a-navy); }
html body .jls-value-bar__text h4 { font: 700 14px/1.3 var(--jls-font, "Inter", sans-serif); color: var(--a-ink); text-transform: none; letter-spacing: 0; }
html body .jls-value-bar__text p { font-size: 12.5px; color: var(--a-muted); }

/* ---------- Partner strip ---------- */
html body .jls-home-brands { background: transparent; border-top: 0; }
html body .jls-home-brands .jls-brand-logos-section { padding: 40px 24px 8px; }
html body .jls-brand-logos__title { margin-bottom: 18px; font: 600 12px/1.3 var(--jls-font, "Inter", sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--a-muted); }
html body .jls-brand-logo-card { box-sizing: border-box; min-height: 76px; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: #fff; box-shadow: var(--a-shadow); }
html body .jls-brand-logo-card:hover { border-color: #D5DDEB; box-shadow: var(--a-shadow-lg); transform: translateY(-2px); }

/* ---------- Section shell + headings ---------- */
html body .jls-home-section { padding-block: 64px; }
html body .jls-home-section--alt { background: var(--a-soft); }
html body .jls-home-section__inner, html body .jls-dept .jls-home-section__inner { max-width: 1280px; padding-inline: 24px; }
html body .jls-section-head { align-items: flex-end; margin-bottom: 24px; padding-bottom: 0; border-bottom: 0; }
html body .jls-section-head h2 { font-size: clamp(24px, 2.6vw, 30px); font-weight: 800; letter-spacing: var(--jls-heading-tracking); text-transform: none; color: var(--a-ink); }
html body .jls-section-head--center h2 { font-size: clamp(26px, 3vw, 34px); }
html body .jls-section-head--center p { margin-top: 6px; font-size: 16px; color: var(--a-muted); }
html body .jls-section-head__link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--a-line); background: #fff; font-size: 13.5px; font-weight: 600; color: var(--a-navy) !important; text-decoration: none !important; }
html body .jls-section-head__link:hover { border-color: var(--a-navy); background: var(--a-navy-50); }

/* ---------- Product rails ---------- */
html body .jls-rail ul.products { padding: 6px 4px 14px; }
html body .jls-rail__arrow { width: 44px; height: 44px; border: 1px solid var(--a-line); box-shadow: var(--a-shadow-lg); color: var(--a-ink); }
html body .jls-rail__arrow:hover { background: var(--a-navy); border-color: var(--a-navy); color: #fff; }

/* ---------- Promo tiles (deals fallback) ---------- */
html body .jls-promo-split { gap: 16px; }
html body .jls-promo { min-height: 210px; padding: 30px; border-radius: var(--a-radius-lg); box-shadow: var(--a-shadow); }
html body .jls-promo:hover { transform: translateY(-2px); box-shadow: var(--a-shadow-lg); }
html body .jls-promo--build { background: radial-gradient(120% 160% at 100% 0%, #2C5697 0%, #1F3361 50%, #15203A 100%); }
html body .jls-promo--quote { background: linear-gradient(135deg, #fff 40%, var(--a-navy-50)); border: 1px solid var(--a-line); color: var(--a-ink); }
html body .jls-promo__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; opacity: 1; color: #9FB0D3; }
html body .jls-promo--quote .jls-promo__eyebrow { color: var(--a-muted); }
html body .jls-promo__title { font: 800 24px/1.2 var(--jls-font-heading); letter-spacing: var(--jls-heading-tracking); }
html body .jls-promo--build .jls-promo__title { color: #fff; }
html body .jls-promo__sub { font-size: 15px; opacity: 1; color: inherit; }
html body .jls-promo--build .jls-promo__sub { color: #C9D3E8; }
html body .jls-promo__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; }
html body .jls-promo--build .jls-promo__cta { background: #fff; color: var(--a-navy); }
html body .jls-promo--quote .jls-promo__cta { background: var(--a-navy); color: #fff; }

/* ---------- Department blocks ---------- */
html body .jls-dept { padding: 32px 0 !important; }
html body .jls-dept--alt { background: var(--a-soft) !important; }
html body .jls-dept .jls-dept__inner { gap: 18px; }
html body .jls-dept__panel { padding: 24px 22px; border-radius: var(--a-radius-lg); background: radial-gradient(130% 120% at 100% 0%, #2C5697 0%, #1F3361 48%, #15203A 100%) !important; box-shadow: 0 10px 30px rgba(21, 32, 58, .18); }
html body .jls-dept__icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .12) !important; }
html body .jls-dept .jls-dept__title { margin: 16px 0 6px !important; font-family: var(--jls-font-heading) !important; font-size: 22px !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: var(--jls-heading-tracking); text-transform: none !important; }
html body .jls-dept .jls-dept__blurb { color: #C9D3E8 !important; font-size: 13.5px !important; }
html body .jls-dept .jls-dept__links { border-top-color: rgba(255, 255, 255, .1); }
html body .jls-dept .jls-dept__links li { border-bottom-color: rgba(255, 255, 255, .1); }
html body .jls-dept .jls-dept__links a { font-size: 14px; color: #E6ECF7 !important; }
html body .jls-dept .jls-dept__links a:hover { color: #fff !important; }
html body .jls-dept .jls-dept__all { padding: 12px 14px; border-radius: 11px; font-size: 14px; font-weight: 600; }
html body .jls-dept__products { padding: 16px; border: 1px solid var(--a-line); border-radius: var(--a-radius-lg); box-shadow: var(--a-shadow); }
html body .jls-dept__products ul.products li.product { box-shadow: none !important; }
html body .jls-dept__products ul.products li.product:hover { box-shadow: var(--a-shadow-lg) !important; }

/* ---------- Brand grid ---------- */
html body .jls-brand-grid { gap: 12px; }
html body .jls-brand-grid__item { min-height: 72px; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: #fff; box-shadow: var(--a-shadow); font: 700 15px/1.2 var(--jls-font-heading); letter-spacing: var(--jls-heading-tracking); color: var(--a-text); }
html body .jls-brand-grid__item:hover { color: var(--a-navy); border-color: #D5DDEB; box-shadow: var(--a-shadow-lg); }

/* ---------- Why choose JLS ---------- */
html body .jls-home-about { max-width: 1280px; padding: 72px 24px 56px !important; }
html body .jls-home-about__grid { gap: 48px; }
html body .jls-home-about__text h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: var(--jls-heading-tracking); text-transform: none; color: var(--a-ink); }
html body .jls-home-about__text h2 .jls-text-blue { color: var(--a-navy); }
html body .jls-home-about__text p { font-size: 16px; color: var(--a-text); }
html body .jls-home-about__features { gap: 12px; }
html body .jls-home-about__feature { padding: 14px; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: #fff; }
html body .jls-home-about__feature-icon { width: 38px; height: 38px; border-radius: 11px; background: var(--a-navy-50); color: var(--a-navy); }
html body .jls-home-about__feature h4 { font: 700 14px/1.3 var(--jls-font, "Inter", sans-serif); text-transform: none; letter-spacing: 0; color: var(--a-ink); }
html body .jls-home-about__feature p { font-size: 13px; color: var(--a-muted); }
html body .jls-home-about__stats { gap: 14px; }
html body .jls-home-about__stat { padding: 28px 20px; border: 1px solid var(--a-line); border-radius: var(--a-radius-lg); background: #fff; box-shadow: var(--a-shadow); }
html body .jls-home-about__stat:first-child { background: radial-gradient(130% 120% at 100% 0%, #2C5697 0%, #1F3361 50%, #15203A 100%); border-color: transparent; }
html body .jls-home-about__stat:first-child .number { color: #fff; }
html body .jls-home-about__stat:first-child .label { color: #C9D3E8; }
html body .jls-home-about__stat .number { font: 800 40px/1 var(--jls-font-heading); letter-spacing: -.02em; color: var(--a-ink); }
html body .jls-home-about__stat .label { margin-top: 6px; font-size: 13.5px; color: var(--a-muted); }

/* ---------- Quote banner ---------- */
html body .jls-home-cta { padding: 0; background: radial-gradient(100% 160% at 100% 0%, #2C5697 0%, #1F3361 45%, #15203A 100%); }
html body .jls-home-cta__inner { padding: 64px 24px; }
html body .jls-home-cta h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: var(--jls-heading-tracking); text-transform: none; }
html body .jls-home-cta p { font-size: 16px; color: #C9D3E8; }
html body .jls-home-cta .jls-btn-primary { min-height: 50px; padding: 0 26px; border-radius: 12px; background: #fff; color: var(--a-navy) !important; font-size: 15px; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
html body .jls-home-cta .jls-btn-primary:hover { background: var(--a-navy-50); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	html body .jls-value-bar { margin: -30px 16px 8px; }
}
@media (max-width: 768px) {
	html body .jls-hero { min-height: 0; }
	html body .jls-hero__overlay { background: linear-gradient(180deg, rgba(21, 32, 58, .85) 0%, rgba(21, 32, 58, .55) 100%); }
	html body .jls-hero__content { padding: 44px 20px 64px; }
	html body .jls-home-section { padding-block: 44px; }
	html body .jls-home-section__inner, html body .jls-dept .jls-home-section__inner { padding-inline: 16px; }
	html body .jls-section-head__link { padding: 7px 12px; font-size: 12.5px; }
	html body .jls-home-about { padding: 48px 16px 36px !important; }
	html body .jls-home-about__stat .number { font-size: 32px; }
}
@media (max-width: 640px) {
	html body .jls-value-bar { margin: -28px 12px 4px; }
	html body .jls-value-bar__item { padding: 12px 14px; }
	html body .jls-value-bar__item:last-child { grid-column: 1 / -1; }
}