/*
Theme Name: JakartaPompa
Theme URI: https://jakartapompa.com
Author: JakartaPompa Digital
Author URI: https://jakartapompa.com/kontak
Description: Tema WordPress + WooCommerce untuk toko pompa air JakartaPompa.com. Katalog bersih bergaya premium, palet resmi JakartaPompa (Primary Blue #0066CC, Navy #002D5B, Light Blue #3399FF, Light Gray #F2F5F9, White), kompatibel Elementor & Elementor Pro Theme Builder, banner/header/footer dapat diubah dari Customizer.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jakartapompa
Tags: e-commerce, woocommerce, custom-colors, custom-logo, custom-menu, editor-style, featured-images, translation-ready, block-styles, wide-blocks, three-columns
WC requires at least: 8.0
WC tested up to: 9.4
*/

/* ===== 1. TOKENS (palet resmi JakartaPompa.com) ===== */
:root {
  --jp-primary: #0066CC;
  --jp-primary-dark: #004C99;
  --jp-navy: #002D5B;
  --jp-light-blue: #3399FF;
  --jp-light-gray: #F2F5F9;
  --jp-white: #FFFFFF;
  --jp-text: #0F1A2B;
  --jp-muted: #56657A;
  --jp-line: #E2E7EE;
  --jp-line-strong: #C9D2DE;
  --jp-soft: #EAF1FA;
  --jp-danger: #C8102E;
  --jp-sale-bg: #FDECEE;
  --jp-star: #E8A200;
  --jp-wa: #0E7A3D;
  --jp-wa-dark: #0A6331;
  --jp-radius: 4px;
  --jp-radius-lg: 6px;
  --jp-container: 1200px;
  --jp-gap: 16px;
  --jp-section: 40px;
  --jp-shadow: 0 1px 2px rgba(0, 45, 91, .05), 0 12px 28px -16px rgba(0, 45, 91, .28);
  --jp-ease: cubic-bezier(.16, 1, .3, 1);
  --jp-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ===== 2. BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--jp-line-strong) transparent; }
body {
  margin: 0; font-family: var(--jp-font); font-size: 15px; line-height: 1.6;
  color: var(--jp-text); background: var(--jp-light-gray); -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums; caret-color: var(--jp-primary);
}
body.jp-lock { overflow: hidden; }
::selection { background: var(--jp-navy); color: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--jp-primary); text-decoration: none; text-underline-offset: .2em; }
a:hover { color: var(--jp-primary-dark); }
h1, h2, h3, h4, h5 { color: var(--jp-navy); line-height: 1.25; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
h2 { font-size: 1.3rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--jp-primary); outline-offset: 2px; border-radius: 2px; }
.jp-icon { flex-shrink: 0; }
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; width: 1px;
  margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important;
}
.skip-link:focus {
  background: #fff; color: var(--jp-navy); clip: auto; clip-path: none; display: block;
  height: auto; left: 12px; padding: 10px 16px; top: 12px; width: auto; z-index: 99999; border-radius: var(--jp-radius);
}
.jp-container { max-width: calc(var(--jp-container) + 32px); margin: 0 auto; padding: 0 16px; }
.jp-muted { color: var(--jp-muted); }
.jp-small { font-size: 13px; }
.jp-hide { display: none !important; }
.jp-center { text-align: center; }

/* ===== 3. BUTTONS & BADGES ===== */
.jp-btn, .wp-block-button__link, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px;
  background: var(--jp-primary); color: #fff; font-weight: 600; font-size: 14px; line-height: 1.2;
  border: 1px solid transparent; border-radius: var(--jp-radius); padding: 10px 18px; cursor: pointer;
  transition: background-color .2s var(--jp-ease), border-color .2s var(--jp-ease), color .2s var(--jp-ease); text-decoration: none;
}
.jp-btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
  background: var(--jp-primary-dark); color: #fff;
}
.woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled], .woocommerce a.button.disabled { opacity: .5; cursor: not-allowed; }
.woocommerce a.button.loading { opacity: .7; }
.woocommerce a.added_to_cart { display: block; text-align: center; font-size: 13px; font-weight: 600; padding-top: 6px; }
.jp-btn--ghost { background: #fff; color: var(--jp-navy); border-color: var(--jp-line-strong); }
.jp-btn--ghost:hover { background: var(--jp-light-gray); color: var(--jp-navy); border-color: var(--jp-navy); }
.jp-btn--light { background: #fff; color: var(--jp-navy); }
.jp-btn--light:hover { background: var(--jp-soft); color: var(--jp-navy); }
.jp-btn--outline { background: transparent; color: var(--jp-primary); border-color: var(--jp-primary); }
.jp-btn--outline:hover { background: var(--jp-primary); color: #fff; }
.jp-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.jp-btn--outline-light:hover { background: rgba(255,255,255,.08); color: #fff; border-color: #fff; }
.jp-btn--wa { background: var(--jp-wa); color: #fff; }
.jp-btn--wa:hover { background: var(--jp-wa-dark); color: #fff; }
.jp-btn--block { width: 100%; }
.jp-badge { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; line-height: 1; padding: 4px 6px; border-radius: 2px; }
.jp-badge--sale { background: var(--jp-danger); color: #fff; }
.jp-badge--feature { background: var(--jp-navy); color: #fff; }

/* ===== 4. ANNOUNCE, TOPBAR & HEADER ===== */
.jp-announce { background: var(--jp-navy); color: #fff; font-size: 13px; text-align: center; padding: 7px 0; }
.jp-announce a { color: #fff; text-decoration: underline; }
.jp-topbar { background: #fff; border-bottom: 1px solid var(--jp-line); font-size: 13px; color: var(--jp-muted); }
.jp-topbar .jp-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.jp-topbar__info, .jp-topbar ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.jp-topbar__info li { display: inline-flex; align-items: center; gap: 6px; }
.jp-topbar__links { display: flex; align-items: center; gap: 20px; }
.jp-topbar a { color: var(--jp-muted); }
.jp-topbar a:hover { color: var(--jp-primary); }
.jp-topbar .jp-topbar__phone { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--jp-navy); }

.jp-header { position: sticky; top: 0; z-index: 999; background: #fff; border-bottom: 1px solid var(--jp-line); }
.admin-bar .jp-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .jp-header { top: 46px; } }
@media screen and (max-width: 600px) { .admin-bar .jp-header { top: 0; } }
.jp-mainbar__inner { display: flex; align-items: center; gap: 20px; min-height: 72px; }
.jp-logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; color: var(--jp-navy); }
.jp-logo:hover { color: var(--jp-navy); }
.jp-logo__mark { width: 36px; height: 36px; border-radius: var(--jp-radius); background: var(--jp-primary); display: grid; place-items: center; color: #fff; }
.jp-logo__words { display: flex; flex-direction: column; }
.jp-logo__text { font-size: 19px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; white-space: nowrap; }
.jp-logo__jakarta { color: var(--jp-navy); }
.jp-logo__pompa { color: var(--jp-primary); }
.jp-logo__tld { color: var(--jp-muted); font-size: 12px; font-weight: 600; }
.jp-logo__tagline { font-size: 11px; font-weight: 500; color: var(--jp-muted); letter-spacing: .01em; white-space: nowrap; }
.custom-logo-link img { max-height: 48px; width: auto; }

.jp-catmenu { position: relative; }
.jp-catbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--jp-line-strong); background: #fff; border-radius: var(--jp-radius); font-size: 14px; font-weight: 600; color: var(--jp-navy);
  transition: border-color .2s var(--jp-ease), color .2s var(--jp-ease);
}
.jp-catbtn:hover, .jp-catmenu.is-open .jp-catbtn { border-color: var(--jp-navy); }
.jp-catbtn .jp-icon:last-child { transition: transform .25s var(--jp-ease); }
.jp-catmenu.is-open .jp-catbtn .jp-icon:last-child { transform: rotate(180deg); }
.jp-catmenu__panel {
  position: absolute; top: calc(100% + 8px); left: 0; width: 560px; background: #fff; z-index: 50;
  border: 1px solid var(--jp-line); border-radius: var(--jp-radius-lg); box-shadow: 0 24px 48px -20px rgba(0,45,91,.35);
  padding: 8px; display: none;
}
.jp-catmenu.is-open .jp-catmenu__panel { display: block; }
.jp-catmenu__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jp-catmenu__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--jp-radius); color: var(--jp-text); font-size: 14px; font-weight: 500; }
.jp-catmenu__list a:hover { background: var(--jp-light-gray); color: var(--jp-primary); }
.jp-catmenu__count { font-size: 12px; color: var(--jp-muted); font-variant-numeric: tabular-nums; }
.jp-catmenu__all { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding: 12px; border-top: 1px solid var(--jp-line); font-size: 14px; font-weight: 600; }

.jp-mainbar__search { flex: 1; min-width: 0; }
.jp-search { position: relative; display: flex; width: 100%; margin: 0; }
.jp-search input[type="search"] {
  flex: 1; min-width: 0; height: 44px; border: 1px solid var(--jp-line-strong); border-right: 0;
  border-radius: var(--jp-radius) 0 0 var(--jp-radius); padding: 0 12px 0 40px; font-size: 14px; background: #fff;
  -webkit-appearance: none; appearance: none; transition: border-color .2s var(--jp-ease);
}
.jp-search input[type="search"]::placeholder { color: #5F6E82; }
.jp-search input[type="search"]:focus { outline: none; border-color: var(--jp-primary); }
.jp-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.jp-search__icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--jp-muted); pointer-events: none; display: flex; }
.jp-search button {
  flex-shrink: 0; height: 44px; background: var(--jp-primary); color: #fff; border: 0; border-radius: 0 var(--jp-radius) var(--jp-radius) 0;
  padding: 0 22px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .2s var(--jp-ease);
}
.jp-search button:hover { background: var(--jp-primary-dark); }

.jp-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.jp-actions__item {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px;
  color: var(--jp-navy); font-size: 14px; font-weight: 600; border-radius: var(--jp-radius);
}
.jp-actions__item:hover { color: var(--jp-primary); background: var(--jp-light-gray); }
.jp-count {
  position: absolute; top: 4px; left: 22px; background: var(--jp-danger); color: #fff;
  font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px;
  display: grid; place-items: center; padding: 0 5px; font-variant-numeric: tabular-nums; line-height: 1;
}
.jp-count[hidden] { display: none; }

.jp-nav { border-top: 1px solid var(--jp-line); }
.jp-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; }
.jp-nav__menu { display: flex; gap: 4px; list-style: none; margin: 0 0 0 -12px; padding: 0; }
.jp-nav__menu > li { position: relative; }
.jp-nav__menu a { display: block; padding: 11px 12px; font-size: 14px; font-weight: 500; color: var(--jp-text); white-space: nowrap; }
.jp-nav__menu a:hover, .jp-nav__menu .current-menu-item > a, .jp-nav__menu .current-menu-ancestor > a { color: var(--jp-primary); }
.jp-nav__menu .current-menu-item > a { box-shadow: inset 0 -2px 0 var(--jp-primary); }
.jp-nav .sub-menu {
  position: absolute; left: 0; top: 100%; min-width: 220px; background: #fff; border: 1px solid var(--jp-line);
  border-radius: var(--jp-radius); padding: 6px; display: none; z-index: 60; box-shadow: var(--jp-shadow); list-style: none; margin: 0;
}
.jp-nav .sub-menu a { padding: 9px 12px; border-radius: var(--jp-radius); }
.jp-nav .sub-menu a:hover { background: var(--jp-light-gray); }
.jp-nav li:hover > .sub-menu, .jp-nav li:focus-within > .sub-menu { display: block; }
.jp-keywords { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--jp-muted); white-space: nowrap; overflow: hidden; }
.jp-keywords span { font-weight: 600; color: var(--jp-navy); }
.jp-keywords a { color: var(--jp-muted); }
.jp-keywords a:hover { color: var(--jp-primary); }
.jp-menu-toggle { display: none; width: 44px; height: 44px; margin-left: -10px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--jp-navy); align-items: center; justify-content: center; border-radius: var(--jp-radius); }
.jp-menu-toggle:hover { background: var(--jp-light-gray); }

/* ===== 5. MOBILE DRAWER ===== */
.jp-drawer { position: fixed; inset: 0; z-index: 10000; }
.jp-drawer[hidden] { display: none; }
.jp-drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 20, 45, .5); opacity: 0; transition: opacity .3s var(--jp-ease); }
.jp-drawer__panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(88vw, 380px); background: #fff;
  display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .35s var(--jp-ease);
  box-shadow: 24px 0 48px -24px rgba(0, 20, 45, .45);
}
.jp-drawer.is-open .jp-drawer__backdrop { opacity: 1; }
.jp-drawer.is-open .jp-drawer__panel { transform: none; }
.jp-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--jp-line); }
.jp-drawer__head .jp-logo__tagline { display: none; }
.jp-drawer__close { width: 44px; height: 44px; border: 0; background: none; color: var(--jp-navy); cursor: pointer; display: grid; place-items: center; border-radius: var(--jp-radius); }
.jp-drawer__close:hover { background: var(--jp-light-gray); }
.jp-drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 0 24px; }
.jp-drawer__menu, .jp-drawer__cats, .jp-drawer__links, .jp-drawer__menu .sub-menu { list-style: none; margin: 0; padding: 0; }
.jp-drawer__menu > li > a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; font-size: 16px; font-weight: 600; color: var(--jp-navy); border-bottom: 1px solid var(--jp-light-gray); }
.jp-drawer__menu .sub-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 16px 0 32px; font-size: 15px; color: var(--jp-text); border-bottom: 1px solid var(--jp-light-gray); }
.jp-drawer__menu a:hover, .jp-drawer__menu .current-menu-item > a { color: var(--jp-primary); background: var(--jp-light-gray); }
.jp-drawer__group { padding: 20px 16px 0; }
.jp-drawer__title { font-size: 13px; font-weight: 700; color: var(--jp-muted); margin: 0 0 8px; letter-spacing: 0; }
.jp-drawer__cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.jp-drawer__cats a { display: flex; align-items: center; min-height: 40px; font-size: 14px; color: var(--jp-text); line-height: 1.3; }
.jp-drawer__cats a:hover { color: var(--jp-primary); }
.jp-drawer__links a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--jp-text); }
.jp-drawer__contact { display: grid; gap: 8px; padding: 24px 16px 0; }
.jp-drawer__contact p { margin: 4px 0 0; font-size: 13px; color: var(--jp-muted); line-height: 1.55; }

/* ===== 6. SECTIONS ===== */
.jp-main { padding: 24px 0 var(--jp-section); }
.jp-section { margin-bottom: var(--jp-section); }
.jp-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.jp-section__titles { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.jp-section__title { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); margin: 0; }
.jp-section__link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.jp-section__link:hover { text-decoration: underline; }
.jp-row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ===== 7. HERO ===== */
.jp-home-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--jp-gap); margin-bottom: var(--jp-gap); }
.jp-home-top > :only-child { grid-column: 1 / -1; }
.jp-hero {
  position: relative; border-radius: var(--jp-radius-lg); overflow: hidden; min-height: 300px;
  display: flex; flex-direction: column; justify-content: center; padding: 48px; color: #fff;
  background: var(--jp-navy) center / cover no-repeat; transition: background-color .5s var(--jp-ease);
}
.jp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 25, 52, .35), rgba(0, 25, 52, 0) 70%); pointer-events: none; }
.jp-hero__slide { display: none; position: relative; z-index: 1; max-width: 560px; }
.jp-hero__slide.is-active { display: block; animation: jp-rise .6s var(--jp-ease) both; }
@keyframes jp-rise { from { opacity: .001; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.jp-hero__title { color: #fff; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 12px; }
.jp-hero p { color: rgba(255,255,255,.9); font-size: 16px; max-width: 46ch; margin: 0 0 24px; }
.jp-hero__cta { display: flex; gap: 8px; flex-wrap: wrap; }
.jp-hero__dots { position: absolute; bottom: 20px; left: 48px; display: flex; gap: 6px; z-index: 2; }
.jp-hero__dots button { width: 24px; height: 24px; border: 0; background: none; cursor: pointer; padding: 0; position: relative; }
.jp-hero__dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: rgba(255,255,255,.4); transition: background-color .3s var(--jp-ease); }
.jp-hero__dots button.is-active::before { background: #fff; }

.jp-hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: var(--jp-gap); }
.jp-hero-side__card {
  background: #fff; border: 1px solid var(--jp-line); border-radius: var(--jp-radius-lg);
  padding: 24px; display: flex; flex-direction: column; justify-content: center; color: var(--jp-text);
  transition: border-color .2s var(--jp-ease);
}
.jp-hero-side__card:hover { border-color: var(--jp-line-strong); color: var(--jp-text); }
.jp-hero-side__card strong { font-size: 17px; font-weight: 700; color: var(--jp-navy); letter-spacing: -.01em; }
.jp-hero-side__card span { font-size: 14px; color: var(--jp-muted); margin-top: 4px; }
.jp-hero-side__card em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 14px; font-weight: 600; color: var(--jp-primary); margin-top: 16px; }
.jp-hero-side__card--dark { background: var(--jp-navy); border-color: var(--jp-navy); }
.jp-hero-side__card--dark:hover { border-color: var(--jp-navy); }
.jp-hero-side__card--dark strong { color: #fff; }
.jp-hero-side__card--dark span { color: #C5D3E8; }
.jp-hero-side__card--dark em { color: #fff; }
.jp-hero-side__card--dark em .jp-icon { color: #4ED98A; }

/* ===== 8. TRUST & STRIP ===== */
.jp-trust { list-style: none; margin: 0 0 var(--jp-section); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--jp-line); border-radius: var(--jp-radius-lg); }
.jp-trust__item { display: flex; align-items: center; gap: 12px; padding: 18px 20px; }
.jp-trust__item + .jp-trust__item { border-left: 1px solid var(--jp-line); }
.jp-trust__icon { color: var(--jp-primary); display: flex; }
.jp-trust__item strong { display: block; font-size: 14px; font-weight: 700; color: var(--jp-navy); }
.jp-trust__item span span { display: block; font-size: 13px; color: var(--jp-muted); line-height: 1.4; }
.jp-strip { display: flex; align-items: center; justify-content: center; gap: 8px; margin: calc(var(--jp-section) * -1 + var(--jp-gap)) 0 var(--jp-section); padding: 14px 20px; border-radius: var(--jp-radius-lg); background: var(--jp-soft); color: var(--jp-navy); font-size: 14px; font-weight: 600; text-align: center; }
a.jp-strip:hover { color: var(--jp-primary); }

/* ===== 9. PRODUK / WOOCOMMERCE ===== */
.jp-products, ul.products {
  display: grid !important; grid-template-columns: repeat(var(--jp-cols, 5), minmax(0, 1fr));
  gap: 12px; list-style: none; margin: 0 !important; padding: 0 !important;
}
ul.products.columns-2 { --jp-cols: 2; } ul.products.columns-3 { --jp-cols: 3; } ul.products.columns-4 { --jp-cols: 4; }
ul.products.columns-5 { --jp-cols: 5; } ul.products.columns-6 { --jp-cols: 6; }
ul.products::before, ul.products::after { display: none !important; }
ul.products li.product, .jp-card {
  width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; background: #fff;
  border: 1px solid var(--jp-line); border-radius: var(--jp-radius); overflow: hidden;
  display: flex; flex-direction: column; position: relative; transition: border-color .2s var(--jp-ease), box-shadow .3s var(--jp-ease);
}
ul.products li.product:hover, .jp-card:hover { border-color: var(--jp-line-strong); box-shadow: var(--jp-shadow); }
.jp-card__media { display: block; position: relative; background: #F7F9FB; aspect-ratio: 1 / 1; overflow: hidden; }
.jp-card__media img, ul.products li.product a img { width: 100%; height: 100%; margin: 0 !important; object-fit: contain; aspect-ratio: 1 / 1; mix-blend-mode: multiply; transition: transform .5s var(--jp-ease); }
.jp-card:hover .jp-card__media img { transform: scale(1.03); }
.jp-card__badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; z-index: 2; }
.jp-card__body { padding: 12px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
.jp-card__brand { font-size: 12px; font-weight: 600; color: var(--jp-muted); }
.jp-card .jp-card__title { font-size: 14px !important; font-weight: 500; line-height: 1.4; color: var(--jp-text); margin: 0 !important; padding: 0 !important; min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: 0; }
.jp-card__title a { color: inherit; }
.jp-card__title a:hover { color: var(--jp-primary); }
.jp-card__price { font-size: 16px; font-weight: 700; color: var(--jp-navy); margin-top: 4px; font-variant-numeric: tabular-nums; line-height: 1.3; }
.jp-card__price del { display: block; font-size: 12.5px; font-weight: 400; color: var(--jp-muted); }
.jp-card__price ins { text-decoration: none; color: var(--jp-danger); }
.jp-card__meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--jp-muted); flex-wrap: wrap; }
.jp-rating { display: inline-flex; align-items: center; gap: 4px; }
.jp-rating .jp-icon { color: var(--jp-star); fill: currentColor; }
.jp-rating strong { color: var(--jp-text); font-weight: 600; }
.jp-rating + .jp-sold::before { content: ""; display: inline-block; width: 1px; height: 10px; background: var(--jp-line-strong); margin-right: 8px; vertical-align: -1px; }
.jp-card .button.jp-card__cta {
  display: flex !important; align-items: center; justify-content: center;
  margin-top: auto !important; width: 100%; min-height: 38px; gap: 6px; background: #fff; color: var(--jp-primary);
  border: 1px solid var(--jp-line-strong); font-size: 13.5px; padding: 8px 10px;
}
.jp-card .button.jp-card__cta:hover { background: var(--jp-primary); border-color: var(--jp-primary); color: #fff; }
.jp-card__body > :nth-last-child(2) { margin-bottom: 10px; }
ul.products li.product .onsale, .woocommerce span.onsale {
  top: 12px; left: 12px; right: auto; margin: 0; background: var(--jp-danger); color: #fff; font-size: 12px; font-weight: 700;
  line-height: 1; padding: 6px 8px; border-radius: 2px; min-height: 0; min-width: 0;
}
.woocommerce .star-rating { color: var(--jp-star); }

/* Shop toolbar & archive */
.woocommerce-products-header { margin-bottom: 16px; }
.woocommerce-products-header__title.page-title { margin: 0 0 4px; }
.term-description { color: var(--jp-muted); max-width: 75ch; }
.jp-shop-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 0 12px; margin-bottom: 16px; border-bottom: 1px solid var(--jp-line); }
.jp-shop-toolbar__count { flex: 1; font-size: 14px; color: var(--jp-muted); }
.jp-shop-toolbar__count p { margin: 0; }
.woocommerce .woocommerce-ordering { margin: 0; }
.woocommerce .woocommerce-ordering select { height: 40px; border: 1px solid var(--jp-line-strong); border-radius: var(--jp-radius); padding: 0 32px 0 12px; background: #fff; font-size: 14px; }
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: 6px; justify-content: center; margin-top: 24px; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { min-width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--jp-line); border-radius: var(--jp-radius); background: #fff; color: var(--jp-navy); font-weight: 600; }
.woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--jp-navy); border-color: var(--jp-navy); color: #fff; }

/* Single product */
.woocommerce div.product { display: flow-root; }
.woocommerce div.product div.images { margin-bottom: 32px; }
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .woocommerce-product-gallery__image { background: #fff; border-radius: var(--jp-radius-lg); }
.woocommerce div.product div.images .woocommerce-product-gallery__image { border: 1px solid var(--jp-line); overflow: hidden; }
.woocommerce div.product div.images .flex-control-thumbs { display: flex; gap: 8px; margin-top: 8px; }
.woocommerce div.product div.images .flex-control-thumbs li { width: 72px !important; }
.woocommerce div.product div.images .flex-control-thumbs img { border: 1px solid var(--jp-line); border-radius: var(--jp-radius); opacity: .7; }
.woocommerce div.product div.images .flex-control-thumbs img.flex-active, .woocommerce div.product div.images .flex-control-thumbs img:hover { opacity: 1; border-color: var(--jp-navy); }
.woocommerce div.product .product_title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.2; margin-bottom: 8px; }
.jp-summary-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: var(--jp-muted); margin: 0 0 8px; }
.jp-summary-meta + .jp-summary-meta { margin-top: -4px; }
.jp-summary-meta__brand { font-weight: 600; color: var(--jp-primary); }
.jp-summary-meta > * + span::before { content: ""; display: inline-block; width: 1px; height: 12px; background: var(--jp-line-strong); margin-right: 12px; vertical-align: -1px; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--jp-navy); font-size: 1.75rem; font-weight: 700; margin: 16px 0; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.woocommerce div.product p.price del { font-size: 1rem; font-weight: 400; color: var(--jp-muted); opacity: 1; display: block; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--jp-danger); }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--jp-text); max-width: 60ch; }
.woocommerce div.product .stock { font-size: 14px; font-weight: 600; }
.woocommerce div.product .stock.in-stock { color: #0B7A3E; }
.woocommerce div.product .stock.out-of-stock { color: var(--jp-danger); }
.woocommerce div.product form.cart { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; margin: 0 0 8px; padding-top: 16px; border-top: 1px solid var(--jp-line); }
.woocommerce div.product form.cart div.quantity { float: none; margin: 0; }
.woocommerce .quantity .qty { width: 72px; height: 48px; border: 1px solid var(--jp-line-strong); border-radius: var(--jp-radius); font-size: 15px; text-align: center; background: #fff; }
.woocommerce div.product form.cart .button { float: none; flex: 1; min-height: 48px; font-size: 15px; }
.woocommerce div.product form.cart.variations_form { display: block; }
.woocommerce div.product form.cart .variations select { height: 44px; border: 1px solid var(--jp-line-strong); border-radius: var(--jp-radius); padding: 0 12px; background: #fff; }
.jp-assure { margin: 8px 0 20px; }
.jp-assure__list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--jp-line); border-radius: var(--jp-radius); background: #fff; }
.jp-assure__list li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--jp-navy); }
.jp-assure__list li + li { border-left: 1px solid var(--jp-line); }
.jp-assure__list .jp-icon { color: var(--jp-primary); }
.woocommerce div.product .product_meta { font-size: 13px; color: var(--jp-muted); display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--jp-line); }
.woocommerce div.product .product_meta > span { display: block; }
.woocommerce div.product .woocommerce-tabs { clear: both; padding-top: 16px; }
.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: 24px; padding: 0 !important; margin: 0 0 24px !important; border-bottom: 1px solid var(--jp-line); overflow-x: auto; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 12px 0 !important; font-weight: 600; color: var(--jp-muted); white-space: nowrap; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--jp-navy); box-shadow: inset 0 -2px 0 var(--jp-primary); }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs .panel { background: #fff; border: 1px solid var(--jp-line); border-radius: var(--jp-radius-lg); padding: 24px; max-width: none; }
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { font-size: 1.15rem; }
.woocommerce div.product .woocommerce-tabs .panel p { max-width: 75ch; }
.woocommerce #reviews #comments ol.commentlist li img.avatar { width: 40px; border: 0; padding: 0; border-radius: 50%; }
.woocommerce table.shop_attributes { border-top-color: var(--jp-line); }
.woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { border-bottom-color: var(--jp-line); padding: 10px 12px; font-style: normal; }
.woocommerce table.shop_attributes tr:nth-child(even) td, .woocommerce table.shop_attributes tr:nth-child(even) th { background: var(--jp-light-gray); }
.woocommerce .related, .woocommerce .upsells { clear: both; padding-top: 24px; }
.woocommerce .related > h2, .woocommerce .upsells > h2 { font-size: 1.3rem; margin-bottom: 16px; }

/* Notices & forms */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top: 0 !important; border: 1px solid var(--jp-line) !important; background: #fff !important; color: var(--jp-navy) !important;
  border-radius: var(--jp-radius); font-size: 14px; box-shadow: inset 3px 0 0 var(--jp-primary);
}
.woocommerce-error { box-shadow: inset 3px 0 0 var(--jp-danger); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--jp-primary) !important; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .select2-container .select2-selection--single, .jp-comments textarea, .jp-comments input[type="text"], .jp-comments input[type="email"], .jp-comments input[type="url"] {
  width: 100%; border: 1px solid var(--jp-line-strong) !important; border-radius: var(--jp-radius) !important; padding: 10px 12px !important; height: auto !important; background: #fff;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .jp-comments textarea:focus { outline: none; border-color: var(--jp-primary) !important; }
.woocommerce table.shop_table { border-color: var(--jp-line); border-radius: var(--jp-radius-lg); background: #fff; }

/* ===== 10. KATEGORI & BRAND ===== */
.jp-cat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.jp-cat { display: flex; align-items: center; gap: 12px; height: 100%; min-height: 72px; padding: 12px 14px; background: #fff; border: 1px solid var(--jp-line); border-radius: var(--jp-radius); color: var(--jp-text); transition: border-color .2s var(--jp-ease); }
.jp-cat:hover { border-color: var(--jp-navy); color: var(--jp-navy); }
.jp-cat > .jp-icon { margin-left: auto; color: var(--jp-line-strong); transition: color .2s var(--jp-ease), transform .3s var(--jp-ease); }
.jp-cat:hover > .jp-icon { color: var(--jp-navy); transform: translateX(2px); }
.jp-cat__media { width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--jp-radius); background: var(--jp-soft); overflow: hidden; }
.jp-cat__media img { width: 100%; height: 100%; object-fit: cover; }
.jp-cat__text { display: flex; flex-direction: column; min-width: 0; }
.jp-cat__name { font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jp-cat__count { font-size: 12.5px; color: var(--jp-muted); margin-top: 2px; }
.jp-brands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.jp-brand { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 100%; min-height: 88px; padding: 16px 20px; background: #fff; border: 1px solid var(--jp-line); border-radius: var(--jp-radius); color: var(--jp-navy); transition: border-color .2s var(--jp-ease); }
.jp-brand:hover { border-color: var(--jp-navy); color: var(--jp-navy); }
.jp-brand__name { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.jp-brand__count { font-size: 13px; color: var(--jp-muted); }

/* ===== 11. FLASH SALE & PROMO ===== */
.jp-flash__timer { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; color: var(--jp-muted); }
.jp-countdown { font-variant-numeric: tabular-nums; font-weight: 700; color: #fff; background: var(--jp-danger); padding: 3px 8px; border-radius: 2px; letter-spacing: .02em; }
.jp-promos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--jp-gap); margin-bottom: var(--jp-section); }
.jp-promo { border-radius: var(--jp-radius-lg); padding: 32px; min-height: 180px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; color: #fff; background: var(--jp-navy); }
.jp-promo__title { color: #fff; font-size: 1.3rem; margin: 0 0 6px; }
.jp-promo p { color: rgba(255,255,255,.88); font-size: 15px; margin: 0; max-width: 42ch; }
.jp-promo .jp-btn { margin-top: 20px; }

/* ===== 12. KONTEN / BLOG / HALAMAN ===== */
.jp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start; }
.jp-layout--full { grid-template-columns: minmax(0, 1fr); }
.jp-page-head { margin-bottom: 20px; }
.jp-page-head__title { margin: 0; }
.jp-page-head__desc { margin: 6px 0 0; color: var(--jp-muted); max-width: 75ch; }
.jp-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jp-gap); }
.jp-layout .jp-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jp-post { background: #fff; border: 1px solid var(--jp-line); border-radius: var(--jp-radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s var(--jp-ease); }
.jp-post:hover { border-color: var(--jp-line-strong); }
.jp-post__thumb { display: block; aspect-ratio: 16 / 9; background: var(--jp-soft); }
.jp-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.jp-post__noimg { width: 100%; height: 100%; display: grid; place-items: center; color: var(--jp-primary); opacity: .5; }
.jp-post__body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.jp-post__cat { align-self: flex-start; font-size: 12.5px; font-weight: 600; color: var(--jp-primary); margin-bottom: 6px; }
.jp-post__title { font-size: 16px; line-height: 1.35; margin: 0 0 6px; }
.jp-post__title a { color: var(--jp-navy); }
.jp-post__title a:hover { color: var(--jp-primary); }
.jp-post__excerpt { font-size: 14px; color: var(--jp-muted); margin: 0 0 12px; }
.jp-post__date { margin-top: auto; font-size: 13px; color: var(--jp-muted); }
.jp-entry { background: #fff; border: 1px solid var(--jp-line); border-radius: var(--jp-radius-lg); padding: clamp(20px, 3vw, 40px); }
.jp-entry--comments { margin-top: var(--jp-gap); }
.jp-entry__header { border-bottom: 1px solid var(--jp-line); padding-bottom: 16px; margin-bottom: 24px; }
.jp-entry__title { margin: 8px 0; }
.jp-entry__meta { font-size: 14px; color: var(--jp-muted); margin: 0; }
.jp-entry__thumb { border-radius: var(--jp-radius); overflow: hidden; margin-bottom: 24px; }
.jp-entry__thumb img { width: 100%; }
.jp-entry .entry-content { font-size: 16px; line-height: 1.75; max-width: 72ch; }
.jp-entry .entry-content > * { max-width: 100%; }
.jp-entry h2, .jp-entry h3 { margin-top: 1.6em; }
.jp-entry blockquote { border-left: 2px solid var(--jp-primary); margin: 1.5em 0; padding: 4px 0 4px 20px; color: var(--jp-navy); font-size: 1.05em; }
.jp-entry table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.jp-entry th, .jp-entry td { border-bottom: 1px solid var(--jp-line); padding: 10px 12px; text-align: left; }
.jp-entry th { color: var(--jp-navy); background: var(--jp-light-gray); }
.jp-entry__tags { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 6px; }
.jp-entry__tags a { font-size: 13px; padding: 4px 10px; border: 1px solid var(--jp-line-strong); border-radius: var(--jp-radius); color: var(--jp-text); }
.jp-entry__tags a:hover { border-color: var(--jp-navy); }
.jp-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--jp-line); font-size: 14px; }
.jp-share strong { color: var(--jp-navy); }
.jp-postnav { display: flex; justify-content: space-between; gap: 16px; margin-top: var(--jp-gap); padding: 16px 20px; background: #fff; border: 1px solid var(--jp-line); border-radius: var(--jp-radius-lg); font-size: 14px; font-weight: 600; }
.jp-pagination, .nav-links { display: flex; gap: 6px; justify-content: center; margin-top: 24px; }
.page-numbers { display: grid; place-items: center; min-width: 40px; height: 40px; border: 1px solid var(--jp-line); border-radius: var(--jp-radius); background: #fff; font-size: 14px; font-weight: 600; color: var(--jp-navy); padding: 0 10px; }
.page-numbers.current, a.page-numbers:hover { background: var(--jp-navy); border-color: var(--jp-navy); color: #fff; }
.jp-sidebar .widget { background: #fff; border: 1px solid var(--jp-line); border-radius: var(--jp-radius-lg); padding: 20px; margin-bottom: var(--jp-gap); }
.jp-sidebar .widget-title { font-size: 15px; color: var(--jp-navy); margin-bottom: 12px; }
.jp-sidebar ul { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.jp-sidebar li { padding: 8px 0; border-bottom: 1px solid var(--jp-light-gray); }
.jp-sidebar li:last-child { border-bottom: 0; }
.jp-sidebar li a { color: var(--jp-text); }
.jp-sidebar li a:hover { color: var(--jp-primary); }
.jp-breadcrumb { font-size: 13px; color: var(--jp-muted); margin: 0 0 16px; }
.jp-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.jp-breadcrumb li { display: inline-flex; align-items: center; }
.jp-breadcrumb li + li::before { content: "/"; margin: 0 8px; color: var(--jp-line-strong); }
.jp-breadcrumb li:last-child { color: var(--jp-text); }
.jp-breadcrumb a { color: var(--jp-muted); }
.jp-breadcrumb a:hover { color: var(--jp-primary); }
.jp-comments__title { font-size: 1.15rem; }
.jp-comments .comment-list { list-style: none; padding: 0; margin: 0 0 24px; }
.jp-empty { background: #fff; border: 1px dashed var(--jp-line-strong); border-radius: var(--jp-radius-lg); padding: 48px 20px; text-align: center; color: var(--jp-muted); margin-bottom: var(--jp-section); }
.jp-empty__search { max-width: 420px; margin: 0 auto 16px; }
.jp-notfound { text-align: center; padding-top: 56px; padding-bottom: 56px; }
.jp-notfound__code { font-size: 72px; font-weight: 800; color: var(--jp-primary); line-height: 1; margin: 0; letter-spacing: -.04em; }
.jp-notfound__text { max-width: 46ch; margin: 0 auto 24px; color: var(--jp-muted); }
.jp-notfound__search { max-width: 440px; margin: 0 auto 32px; }
.jp-notfound .jp-section { text-align: left; }
.jp-search-box { margin-bottom: var(--jp-gap); }

/* SEO text + FAQ */
.jp-home-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; padding-top: 8px; border-top: 1px solid var(--jp-line); }
.jp-seo-text { padding-top: 24px; font-size: 14.5px; color: var(--jp-muted); line-height: 1.75; }
.jp-seo-text h2 { font-size: 1.15rem; }
.jp-seo-text p { max-width: 70ch; }
.jp-faq { margin: 0; padding-top: 24px; }
.jp-faq .jp-section__title { font-size: 1.15rem; }
.jp-faq__list { border-top: 1px solid var(--jp-line); }
.jp-faq__item { border-bottom: 1px solid var(--jp-line); }
.jp-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; cursor: pointer; list-style: none; font-weight: 600; color: var(--jp-navy); font-size: 15px; }
.jp-faq__item summary::-webkit-details-marker { display: none; }
.jp-faq__item summary .jp-icon { transition: transform .25s var(--jp-ease); color: var(--jp-muted); }
.jp-faq__item[open] summary .jp-icon { transform: rotate(180deg); }
.jp-faq__item summary:hover { color: var(--jp-primary); }
.jp-faq__item p { margin: 0 0 16px; font-size: 14.5px; color: var(--jp-muted); max-width: 65ch; }

/* ===== 13. FOOTER ===== */
.jp-footer { background: var(--jp-navy); color: #C5D3E8; font-size: 14px; }
.jp-footer a { color: #C5D3E8; }
.jp-footer a:hover, .jp-footer .jp-btn, .jp-footer .jp-btn:hover { color: #fff; }
.jp-footer__cta { border-bottom: 1px solid rgba(255,255,255,.12); padding: 28px 0; }
.jp-footer__cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.jp-footer__cta-text { display: flex; align-items: center; gap: 16px; }
.jp-footer__cta-icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--jp-radius); background: rgba(255,255,255,.08); display: grid; place-items: center; color: #fff; }
.jp-footer__cta-text strong { color: #fff; font-size: 17px; font-weight: 700; display: block; letter-spacing: -.01em; }
.jp-footer__cta-text span { font-size: 14px; }
.jp-footer__cta-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.jp-footer__cols { padding-top: 40px; padding-bottom: 40px; display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.jp-footer__heading { color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0; margin: 0 0 14px; }
.jp-footer ul { list-style: none; margin: 0; padding: 0; }
.jp-footer__col li { margin-bottom: 10px; }
.jp-footer__logo { font-size: 20px; font-weight: 800; letter-spacing: -.025em; margin: 0 0 12px; }
.jp-footer__logo .a { color: #fff; } .jp-footer__logo .b { color: #7FB8FF; } .jp-footer__logo .c { color: #C5D3E8; font-size: 12px; font-weight: 600; }
.jp-footer__about { line-height: 1.7; max-width: 42ch; }
.jp-footer__contact { font-style: normal; display: grid; gap: 10px; margin-top: 16px; }
.jp-footer__contact > * { display: inline-flex; align-items: flex-start; gap: 10px; }
.jp-footer__contact .jp-icon { margin-top: 2px; color: #7FB8FF; }
.jp-footer__pay { border-top: 1px solid rgba(255,255,255,.12); padding: 16px 0; }
.jp-footer__pay-inner { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.jp-footer__pay-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.jp-footer__pay-group ul { display: flex; flex-wrap: wrap; gap: 6px; }
.jp-footer__pay-label { color: #fff; font-size: 13px; font-weight: 600; }
.jp-footer__pill { display: inline-block; background: #fff; color: var(--jp-navy); font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 2px; }
.jp-footer__pill--ghost { background: transparent; color: #C5D3E8; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.jp-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0; font-size: 13px; color: #A9BAD3; display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.jp-footer__secure { display: inline-flex; align-items: center; gap: 6px; }

.jp-wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 900; background: var(--jp-wa); color: #fff;
  border-radius: var(--jp-radius); height: 48px; padding: 0 18px; font-weight: 600; font-size: 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 16px 32px -12px rgba(0,0,0,.35); display: inline-flex; align-items: center; gap: 8px;
  transition: background-color .2s var(--jp-ease);
}
.jp-wa:hover { background: var(--jp-wa-dark); color: #fff; }
.jp-top {
  position: fixed; right: 20px; bottom: 80px; z-index: 900; width: 44px; height: 44px; border-radius: var(--jp-radius);
  border: 1px solid var(--jp-line); background: #fff; color: var(--jp-navy); cursor: pointer; display: grid; place-items: center;
  box-shadow: var(--jp-shadow); opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .3s var(--jp-ease), transform .3s var(--jp-ease);
}
.jp-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }

/* ===== 14. ELEMENTOR ===== */
.elementor-widget-container .jp-section { margin-bottom: 0; }
.elementor-page .jp-main { padding-top: 0; }
.elementor-editor-active .jp-header { position: relative; }
.jp-elementor-header { background: #fff; }
.elementor-widget-jp-hero .jp-hero { margin-bottom: 0; }
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--jp-container); }

/* ===== 15. RESPONSIVE ===== */
@media (max-width: 1180px) {
  .jp-products, ul.products { --jp-cols: 4 !important; }
  .jp-layout ul.products { --jp-cols: 3 !important; }
  .jp-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .jp-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jp-keywords { display: none; }
}
@media (max-width: 1024px) {
  .jp-home-top { grid-template-columns: minmax(0, 1fr); }
  .jp-hero-side { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jp-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jp-trust__item:nth-child(3) { border-left: 0; }
  .jp-trust__item:nth-child(n+3) { border-top: 1px solid var(--jp-line); }
  .jp-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jp-footer__cols > :first-child { grid-column: 1 / -1; }
  .jp-home-info { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 900px) {
  :root { --jp-section: 32px; }
  .jp-topbar, .jp-nav, .jp-catmenu, .jp-actions__label { display: none; }
  .jp-menu-toggle { display: inline-flex; }
  .jp-mainbar__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "toggle brand actions" "search search search"; gap: 0 4px; min-height: 0; padding-top: 6px; padding-bottom: 10px; }
  .jp-menu-toggle { grid-area: toggle; }
  .jp-mainbar__brand { grid-area: brand; min-width: 0; }
  .jp-actions { grid-area: actions; margin-right: -10px; }
  .jp-actions__item { padding: 0 10px; }
  .jp-mainbar__search { grid-area: search; margin-top: 6px; }
  .jp-layout { grid-template-columns: minmax(0, 1fr); }
  .jp-layout ul.products { --jp-cols: 3 !important; }
  .jp-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jp-promos { grid-template-columns: minmax(0, 1fr); }
  .jp-hero { padding: 36px 32px 56px; min-height: 260px; }
  .jp-hero__dots { left: 32px; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .jp-main { padding-top: 16px; }
  .jp-container { padding: 0 12px; }
  .jp-logo__mark { width: 32px; height: 32px; }
  .jp-logo__text { font-size: 17px; }
  .jp-logo__tagline { display: none; }
  .jp-search input[type="search"] { height: 42px; font-size: 16px; }
  .jp-search button { height: 42px; padding: 0 16px; }
  .jp-announce { font-size: 12.5px; padding: 6px 0; }
  .jp-products, ul.products, .jp-layout ul.products { --jp-cols: 2 !important; gap: 8px; }
  .jp-card__body { padding: 10px; }
  .jp-card .jp-card__title { font-size: 13.5px !important; }
  .jp-flash .jp-products { display: grid !important; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 44%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -12px !important; padding: 0 12px 4px !important; scroll-padding: 0 12px; scrollbar-width: none; }
  .jp-flash .jp-products::-webkit-scrollbar { display: none; }
  .jp-flash .jp-card { scroll-snap-align: start; }
  .jp-card__price { font-size: 15px; }
  .jp-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .jp-cat { padding: 10px 12px; gap: 8px; min-height: 64px; }
  .jp-cat__media { width: 40px; height: 40px; }
  .jp-cat__name { font-size: 13.5px; }
  .jp-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .jp-brand { min-height: 72px; padding: 12px 14px; }
  .jp-brand__name { font-size: 16px; }
  .jp-posts, .jp-layout .jp-posts { grid-template-columns: minmax(0, 1fr); }
  .jp-hero { padding: 28px 20px 52px; min-height: 0; }
  .jp-hero p { font-size: 15px; margin-bottom: 20px; }
  .jp-hero__dots { left: 20px; bottom: 14px; }
  .jp-hero-side { grid-template-columns: minmax(0, 1fr); }
  .jp-hero-side__card { padding: 18px 20px; }
  .jp-hero-side__card em { margin-top: 10px; }
  .jp-trust { grid-template-columns: minmax(0, 1fr); }
  .jp-trust__item { padding: 14px 16px; }
  .jp-trust__item + .jp-trust__item { border-left: 0; border-top: 1px solid var(--jp-line); }
  .jp-section__head { align-items: center; }
  .jp-section__titles { flex-direction: column; align-items: flex-start; gap: 4px; }
  .jp-promo { padding: 24px 20px; min-height: 0; }
  .jp-footer__cta-actions, .jp-footer__cta-actions .jp-btn { width: 100%; }
  .jp-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .jp-footer__bottom { flex-direction: column; }
  .jp-entry .entry-content { font-size: 15.5px; }
  .jp-assure__list li { padding: 12px; font-size: 13.5px; }
  .jp-wa { right: 12px; bottom: 12px; width: 52px; height: 52px; padding: 0; justify-content: center; }
  .jp-wa span { display: none; }
  .jp-top { right: 16px; bottom: 74px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}