/* Jaknest — shared styles (every page).
   Tokens follow the "Broadsheet" design system from the Claude Design file.
   Direction-agnostic: logical properties only, so Arabic (rtl) and English
   (ltr) share every rule. Components are jk- prefixed and carry their own
   resets, so they also hold up on pages still styled by WoodMart. */

:root {
	--jk-bg: #f3f2f2;
	--jk-surface: #eae9e9;
	--jk-text: #262a37;
	--jk-divider: color-mix(in srgb, #262a37 14%, transparent);

	--jk-n100: #f8f4f4;
	--jk-n400: #bab6b6;
	--jk-n500: #9b9797;
	--jk-n600: #7d7979;
	--jk-n700: #605d5d;
	--jk-n800: #444141;
	--jk-n900: #2d2b2b;

	/* v3 palette: brand pink accent, navy secondary (design "Jaknest Store v3") */
	--jk-accent: #e8356a;
	--jk-accent-100: #fff0f3;
	--jk-accent-400: #f889a6;
	--jk-accent-600: #d42a5e;
	--jk-accent-700: #ac1a4a;
	--jk-accent-800: #7d1537;
	--jk-accent-900: #4d1225;
	/* Filled buttons: #e8356a with white text is 4.1:1 (below AA for 15px text);
	   #d42a5e is visually the same pink at 4.9:1. */
	--jk-accent-fill: #d42a5e;
	--jk-on-accent: #fff;

	--jk-a2: #262a37;
	--jk-a2-100: #eceef3;
	--jk-a2-700: #343a4b;
	--jk-a2-800: #262a37;
	--jk-a2-900: #1a1d27;

	--jk-shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
	--jk-shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
	--jk-shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

	--jk-radius: 20px;   /* media, cards, panels (v3) */
	--jk-radius-sm: 4px; /* inputs and the few flat blocks v3 kept square */
	--jk-font: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
	--jk-head: "Readex Pro", var(--jk-font);
	--jk-gutter: 16px;
	--jk-max: 1440px;
}
@media (min-width: 768px) { :root { --jk-gutter: 32px; } }
@media (min-width: 1024px) { :root { --jk-gutter: 56px; } }

/* WoodMart-rendered pages (cart, account, blog) pick up the same palette/type. */
:root:root {
	--wd-primary-color: var(--jk-accent);
	--wd-alternative-color: var(--jk-a2);
	--wd-link-color: var(--jk-accent-700);
	--wd-link-color-hover: var(--jk-accent-600);
	--wd-text-font: var(--jk-font);
	--wd-title-font: var(--jk-head);
	--wd-entities-title-font: var(--jk-font);
	--wd-widget-title-font: var(--jk-head);
	--wd-header-el-font: var(--jk-font);
	--btn-accented-bgcolor: var(--jk-accent-fill);
	--btn-accented-bgcolor-hover: var(--jk-accent-700);
}
body.jk-woodmart { background: var(--jk-bg); }

/* ---- base (our templates only) ---------------------------------------- */
body.jk-lean {
	margin: 0;
	background: var(--jk-bg);
	color: var(--jk-text);
	font: 400 16px/1.6 var(--jk-font);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
/* :where() keeps these at zero specificity so component classes always win.
   The WordPress admin bar is left out: it is built for the default box model. */
:where(.jk-lean :not(#wpadminbar, #wpadminbar *)), :where(.jk-lean :not(#wpadminbar, #wpadminbar *))::before, :where(.jk-lean :not(#wpadminbar, #wpadminbar *))::after { box-sizing: border-box; }
:where(.jk-lean img:not(#wpadminbar *)) { max-width: 100%; height: auto; display: block; }
:where(.jk-lean a:not(#wpadminbar *)) { color: inherit; }
:where(.jk-lean :is(h1, h2, h3, h4, p):not(#wpadminbar *)) { margin: 0; }
:where(.jk-lean :is(button, input, select, textarea):not(#wpadminbar *)) { font: inherit; color: inherit; }
.jk-lean :focus-visible:not(#wpadminbar *) { outline: 2px solid var(--jk-accent); outline-offset: 2px; }
.jk-lean ::selection { background: color-mix(in srgb, var(--jk-accent) 30%, transparent); }

/* component-level resets, so WoodMart's global element styles can't leak in */
.jk-topbar, .jk-header, .jk-drawer, .jk-footer, .jk-tabbar, .jk-card, .jk-grid, .jk-empty, .jk-coheader {
	font-family: var(--jk-font);
	color: var(--jk-text);
	box-sizing: border-box;
}
:is(.jk-header, .jk-drawer, .jk-footer, .jk-tabbar, .jk-card, .jk-coheader) :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(.jk-header, .jk-drawer, .jk-footer, .jk-tabbar, .jk-card, .jk-coheader) a { text-decoration: none; color: inherit; }
:where(.jk-header, .jk-drawer, .jk-footer, .jk-tabbar, .jk-card) button {
	background: none; border: 0; padding: 0; margin: 0; min-height: 0; box-shadow: none;
	font: inherit; color: inherit; text-transform: none; letter-spacing: normal; cursor: pointer;
}
:is(.jk-header, .jk-footer, .jk-card) :is(h1, h2, h3, p) { margin: 0; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.jk-hidden, .jk-hp { display: none !important; }
.jk-skip { position: absolute; inset-inline-start: 8px; top: -100px; z-index: 2000; background: var(--jk-text); color: var(--jk-bg); padding: 8px 14px; border-radius: var(--jk-radius-sm); }
.jk-skip:focus { top: 8px; }

.jk-wrap { max-width: var(--jk-max); margin-inline: auto; padding-inline: var(--jk-gutter); }
@media (max-width: 1023px) { .jk-only-d { display: none !important; } }
@media (min-width: 1024px) { .jk-only-m { display: none !important; } }

.jk-i { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: middle; }
html:not([dir="rtl"]) .jk-flip, [dir="rtl"] .jk-flip-rtl { transform: scaleX(-1); }

/* ---- primitives -------------------------------------------------------- */
.jk-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 10px 24px; border: 1px solid transparent; border-radius: 24px;
	background: transparent; color: var(--jk-text);
	font: 600 15px/1.2 var(--jk-font); text-decoration: none; text-align: center;
	cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.jk-btn .jk-i { font-size: 1.25em; }
.jk-btn--primary { background: var(--jk-accent-fill); color: var(--jk-on-accent); }
.jk-btn--primary:hover { background: var(--jk-accent-700); color: var(--jk-on-accent); }
.jk-btn--primary:active { background: var(--jk-accent-700); }
.jk-btn--secondary { border-color: var(--jk-divider); }
.jk-btn--secondary:hover { background: color-mix(in srgb, var(--jk-text) 7%, transparent); }
.jk-btn--ghost { color: var(--jk-accent-700); padding-inline: 8px; }
.jk-btn--lg { min-height: 52px; padding: 14px 28px; font-size: 16px; border-radius: 27px; }
.jk-btn--block { width: 100%; }
.jk-btn:disabled, .jk-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.jk-link { color: var(--jk-accent-700); font-size: 14px; text-decoration: none; }
.jk-link:hover { text-decoration: underline; }

.jk-input {
	width: 100%; min-height: 48px; padding: 8px 16px;
	background: var(--jk-surface); color: var(--jk-text);
	border: 1px solid var(--jk-divider); border-radius: var(--jk-radius-sm);
	font: 400 15px var(--jk-font); caret-color: var(--jk-accent);
}
.jk-input::placeholder { color: color-mix(in srgb, var(--jk-text) 65%, transparent); opacity: 1; }
.jk-input:hover { border-color: color-mix(in srgb, var(--jk-text) 45%, transparent); }
.jk-input:focus { border-color: var(--jk-accent); outline: none; }

.jk-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.jk-chip {
	display: inline-flex; align-items: center; gap: 6px; flex: none;
	min-height: 40px; padding: 6px 18px; border: 1px solid var(--jk-divider); border-radius: 20px;
	color: var(--jk-text); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
	transition: background-color .15s, color .15s;
}
.jk-chip:hover { background: color-mix(in srgb, var(--jk-text) 7%, transparent); }
.jk-chip[aria-pressed="true"], .jk-chip[aria-current] { background: var(--jk-text); border-color: var(--jk-text); color: var(--jk-bg); }
.jk-chip--on { background: var(--jk-accent-100); border-color: transparent; color: var(--jk-accent-800); font-size: 13px; min-height: 32px; padding: 4px 12px; }
.jk-chip--on .jk-i { font-size: 12px; }
@media (max-width: 767px) {
	.jk-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--jk-gutter) * -1); padding-inline: var(--jk-gutter); scrollbar-width: none; }
	.jk-chips::-webkit-scrollbar { display: none; }
}

.jk-tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; line-height: 1.5; }
.jk-tag--sale, .jk-tag--new { background: var(--jk-a2-100); color: var(--jk-a2-800); }
.jk-tag--muted { background: var(--jk-n100); color: var(--jk-n800); }

.jk-count {
	position: absolute; top: 2px; inset-inline-end: 2px;
	display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px;
	border-radius: 9px; background: var(--jk-a2); color: var(--jk-bg);
	font-size: 11px; font-weight: 600; line-height: 1;
}
.jk-count[hidden] { display: none; }
.jk-count--inline { position: static; background: var(--jk-accent-fill); color: var(--jk-on-accent); }

.jk-iconbtn {
	position: relative; display: inline-grid; place-items: center; flex: none;
	width: 44px; height: 44px; border-radius: 50%; font-size: 22px; color: inherit;
}
/* explicit, so WoodMart's element-level button styles can't leak in on its pages */
.jk-iconbtn, .jk-card__fav, .jk-card__add {
	margin: 0; border: 0; box-shadow: none; min-height: 0; line-height: 1.2;
	text-transform: none; letter-spacing: normal; font-family: var(--jk-font); cursor: pointer;
}
.jk-iconbtn, .jk-card__fav { padding: 0; }
button.jk-iconbtn:not(.jk-iconbtn--solid) { background: transparent; }
.jk-iconbtn:hover { background: color-mix(in srgb, var(--jk-text) 7%, transparent); }
.jk-iconbtn--solid { background: var(--jk-bg); font-size: 20px; }

.jk-h2 { font: 600 34px/1.15 var(--jk-head); letter-spacing: -0.01em; margin: 0; }

/* v3 brand marks — pure CSS, no extra requests.
   Ring before section headings; halftone dot patch (.jk-dots) as decoration. */
.jk-h2, .jk-co__h { display: flex; align-items: center; gap: .45em; }
.jk-h2::before, .jk-co__h::before {
	content: ""; flex: none; width: .46em; height: .46em; border-radius: 50%;
	border: .13em solid var(--jk-accent);
}
.jk-dots {
	position: absolute; pointer-events: none;
	background-image: radial-gradient(circle, var(--jk-accent) 0 1.7px, transparent 2.1px);
	background-size: 9px 9px;
	-webkit-mask-image: radial-gradient(circle, transparent 18%, #000 22%, #000 38%, transparent 72%);
	mask-image: radial-gradient(circle, transparent 18%, #000 22%, #000 38%, transparent 72%);
}
@media (max-width: 767px) { .jk-h2 { font-size: 22px; letter-spacing: 0; } }
.jk-kicker { font-size: 14px; font-weight: 500; color: var(--jk-a2-700); }

.jk-section { padding-bottom: 88px; }
.jk-section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.jk-more { display: inline-flex; gap: 6px; align-items: center; color: var(--jk-accent-700); font-size: 15px; text-decoration: none; }
.jk-more:hover { color: var(--jk-accent-600); }
@media (max-width: 767px) {
	.jk-section { padding-bottom: 36px; }
	.jk-section__head { margin-bottom: 14px; }
}

.jk-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--jk-n700); }
.jk-crumbs li { display: flex; gap: 8px; align-items: center; }
.jk-crumbs a { text-decoration: none; }
.jk-crumbs a:hover { color: var(--jk-text); }
.jk-crumbs .jk-i { font-size: 12px; }
.jk-crumbs [aria-current] { color: var(--jk-text); }

.jk-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 16px; text-align: center; }
.jk-empty .jk-i { font-size: 40px; color: var(--jk-n600); }
.jk-empty p { font-size: 18px; font-weight: 600; margin: 0; }

/* ---- header ------------------------------------------------------------ */
.jk-topbar { background: var(--jk-text); color: var(--jk-bg); text-align: center; font-size: 14px; line-height: 1.4; padding: 9px 16px; }
.jk-topbar::before {
	content: ""; display: inline-block; vertical-align: -1px; margin-inline-end: 10px;
	width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--jk-accent-400); box-sizing: border-box;
}
.jk-header { position: relative; z-index: 50; background: var(--jk-bg); }
.jk-header__row { display: flex; align-items: center; gap: 40px; padding-block: 14px; }
.jk-logo { display: inline-flex; flex: none; }
.jk-logo img, .jk-logo__img { height: 64px; width: auto; mix-blend-mode: multiply; }
.jk-nav { flex: 1; min-width: 0; }
.jk-nav__list { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 16px; font-weight: 500; }
.jk-nav__list a { transition: color .15s; }
.jk-nav__list a:hover, .jk-nav__list .current-menu-item > a, .jk-nav__list [aria-current] { color: var(--jk-accent); }
.jk-nav__list .jk-menu-offers a { color: var(--jk-a2-700); }
/* dropdowns (second menu level): open on hover and on keyboard focus */
.jk-nav__list > li { position: relative; }
.jk-nav__list .menu-item-has-children > a { display: inline-flex; align-items: center; gap: 6px; }
.jk-nav__list .menu-item-has-children > a::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s; }
.jk-nav__list .sub-menu {
	position: absolute; z-index: 70; top: 100%; inset-inline-start: -16px;
	display: grid; gap: 2px; min-width: 230px; margin: 12px 0 0; padding: 8px; list-style: none;
	background: var(--jk-bg); border-radius: var(--jk-radius-sm); box-shadow: var(--jk-shadow-lg);
	font-size: 15px; font-weight: 400; opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .15s, transform .15s, visibility 0s .15s;
}
.jk-nav__list .sub-menu:has(> li:nth-child(9)) { grid-template-columns: repeat(2, minmax(180px, 1fr)); column-gap: 8px; }
.jk-nav__list .sub-menu::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: 14px; }
.jk-nav__list .sub-menu a { display: block; padding: 9px 12px; border-radius: var(--jk-radius-sm); white-space: nowrap; }
.jk-nav__list .sub-menu a:hover, .jk-nav__list .sub-menu a:focus-visible { background: color-mix(in srgb, var(--jk-text) 6%, transparent); }
.jk-nav__list .sub-menu .sub-menu { display: none; }
.jk-nav__list li:hover > .sub-menu, .jk-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s; }
.jk-nav__list li:hover > a::after, .jk-nav__list li:focus-within > a::after { transform: rotate(225deg); margin-top: 3px; }
@media (prefers-reduced-motion: reduce) { .jk-nav__list .sub-menu { transition: none; transform: none; } }
.jk-search {
	display: flex; align-items: center; gap: 10px; width: 280px; height: 44px; padding: 0 16px;
	background: var(--jk-surface); border-radius: 24px; color: var(--jk-n700); font-size: 18px;
}
.jk-search .jk-search__input {
	flex: 1; min-width: 0; height: 100%; padding: 0; margin: 0;
	background: transparent; border: 0; box-shadow: none; border-radius: 0;
	color: var(--jk-text); font: 400 15px var(--jk-font);
}
.jk-search .jk-search__input::placeholder { color: var(--jk-n700); opacity: 1; }
.jk-search .jk-search__input:focus { outline: none; }
.jk-search:focus-within { box-shadow: 0 0 0 2px var(--jk-accent); }
.jk-actions { display: flex; align-items: center; gap: 4px; }
.jk-lang a { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding-inline: 10px; font-size: 14px; font-weight: 500; border-radius: 22px; }
.jk-lang a:hover { background: color-mix(in srgb, var(--jk-text) 7%, transparent); }
.jk-lang .jk-i { font-size: 18px; }

.jk-msearch { padding-bottom: 12px; }
.jk-msearch .jk-search { width: 100%; }

@media (max-width: 1023px) {
	.jk-topbar { font-size: 12px; padding: 7px 12px; }
	.jk-header__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; padding-block: 8px; padding-inline: 12px; }
	.jk-logo img, .jk-logo__img { height: 44px; }
	.jk-header__row > .jk-logo { justify-self: center; }
	.jk-actions { justify-content: flex-end; }
}

/* drawer */
.jk-drawer { position: fixed; inset: 0; z-index: 1000; }
.jk-drawer[hidden] { display: none; }
.jk-drawer__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--jk-n900) 50%, transparent); }
.jk-drawer__panel {
	position: absolute; inset-block: 0; inset-inline-start: 0; width: min(86vw, 360px);
	display: flex; flex-direction: column; background: var(--jk-bg); box-shadow: var(--jk-shadow-lg);
	animation: jk-slide .2s ease-out;
}
@keyframes jk-slide { from { transform: translateX(var(--jk-slide-from, 100%)); } }
html:not([dir="rtl"]) .jk-drawer__panel { --jk-slide-from: -100%; }
.jk-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; }
.jk-drawer__nav { flex: 1; overflow-y: auto; padding: 8px 20px; }
.jk-drawer__list > li > a { display: block; padding: 14px 0; border-bottom: 1px solid var(--jk-divider); font-size: 17px; font-weight: 500; }
.jk-drawer__list .sub-menu a { display: block; padding: 10px 16px; font-size: 15px; color: var(--jk-n800); }
.jk-drawer__foot { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px 24px; border-top: 1px solid var(--jk-divider); }
.jk-drawer__foot > a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; }
.jk-drawer__foot .jk-i { font-size: 20px; }
.jk-drawer__foot .jk-lang a { padding-inline: 0; }
html.jk-locked, html.jk-locked body { overflow: hidden; }

/* ---- footer ------------------------------------------------------------ */
.jk-footer { margin-top: 24px; padding-top: 48px; border-top: 1px solid var(--jk-divider); font-size: 15px; }
.jk-lean.home .jk-footer { border-top: 0; margin-top: 0; padding-top: 32px; } /* newsletter band already separates it */
.jk-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 32px; }
.jk-footer__about { display: flex; flex-direction: column; gap: 12px; }
.jk-footer__about .jk-logo img { height: 60px; }
.jk-footer__about p { max-width: 300px; line-height: 1.8; color: var(--jk-n700); }
.jk-footer__col { display: flex; flex-direction: column; gap: 10px; }
.jk-footer__col strong { font-weight: 600; }
.jk-footer__list { display: flex; flex-direction: column; gap: 10px; }
.jk-footer__list a:hover { color: var(--jk-accent-700); }
.jk-footer__social { display: flex; gap: 6px; margin-inline-start: -10px; }
.jk-footer__copy {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px;
	padding-top: 20px; padding-bottom: 28px; border-top: 1px solid var(--jk-divider);
	font-size: 13px; color: var(--jk-n700);
}
.jk-footer__copy .jk-lang a { height: 36px; padding-inline: 0; font-size: 13px; }
/* WPML's own footer switcher — ours sits in the header, drawer and footer */
.wpml-ls-statics-footer { display: none !important; }
@media (max-width: 1023px) {
	.jk-footer { padding-top: 32px; }
	.jk-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-bottom: 24px; }
	.jk-footer__about { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; }
	.jk-footer__about .jk-logo img { height: 48px; }
	.jk-footer__about p { font-size: 14px; line-height: 1.7; }
	.jk-footer__col { gap: 8px; font-size: 14px; }
	.jk-footer__list { gap: 8px; }
	.jk-footer__col:last-child:nth-child(even) { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
	.jk-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* mobile tab bar */
.jk-tabbar { display: none; }
@media (max-width: 1023px) {
	.jk-tabbar {
		position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
		display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		padding: 6px 0 calc(10px + env(safe-area-inset-bottom));
		background: var(--jk-bg); box-shadow: 0 -3px 10px color-mix(in srgb, #2d2b2b 12%, transparent);
	}
	.jk-tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; justify-content: center; font-size: 12px; font-weight: 500; }
	.jk-tabbar .jk-i { font-size: 24px; }
	.jk-tabbar [aria-current] { color: var(--jk-accent); }
	.jk-tabbar .jk-count { top: 2px; inset-inline-end: auto; inset-inline-start: calc(50% + 6px); }
}

/* ---- product card + grids --------------------------------------------- */
.jk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
@media (min-width: 768px) {
	.jk-grid { gap: 40px 24px; }
	.jk-grid--3, .jk-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.jk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.jk-grid[aria-busy="true"] { opacity: .5; transition: opacity .2s; }

/* position: relative anchors WooCommerce's absolutely-positioned screen-reader
   price text, which otherwise escapes horizontal scrollers and widens the page */
.jk-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.jk-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--jk-radius); background: var(--jk-surface); }
.jk-card__img, .jk-card__img img { display: block; width: 100%; height: 100%; }
.jk-card__img img { object-fit: cover; transition: transform .5s ease; }
@media (hover: hover) { .jk-card:hover .jk-card__img img { transform: scale(1.03); } }
.jk-card__badge { position: absolute; top: 12px; inset-inline-start: 12px; }
.jk-card__fav {
	position: absolute; top: 10px; inset-inline-end: 10px;
	display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
	background: var(--jk-bg); font-size: 18px;
}
:is(.jk-card__fav, .jk-iconbtn) .jk-fav-on { display: none; color: var(--jk-a2); }
[aria-pressed="true"] > .jk-fav-on { display: inline-block; }
[aria-pressed="true"] > .jk-fav-off { display: none; }
.jk-card .jk-card__add {
	position: absolute; bottom: 12px; inset-inline: 12px;
	display: flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 42px; padding: 10px; border-radius: 21px;
	background: var(--jk-accent-fill); color: var(--jk-on-accent); font-size: 14px; font-weight: 600;
	transition: background-color .15s;
}
.jk-card .jk-card__add:hover { background: var(--jk-accent-700); color: var(--jk-on-accent); }
.jk-card .jk-card__add.is-added { background: var(--jk-accent-700); }
.jk-card .jk-card__add.is-loading { opacity: .7; pointer-events: none; }
.jk-toast { position: fixed; z-index: 200; inset-inline: 12px; bottom: calc(12px + var(--jk-toast-lift, env(safe-area-inset-bottom, 0px))); margin-inline: auto; max-width: 440px; display: flex; align-items: center; gap: 10px; padding-block: 10px; padding-inline: 14px 8px; background: var(--jk-text); color: var(--jk-bg); border-radius: var(--jk-radius-sm); box-shadow: 0 8px 28px rgba(0,0,0,.22); font-size: 15px; font-weight: 600; opacity: 0; transform: translateY(16px); visibility: hidden; transition: opacity .2s, transform .2s, visibility 0s .2s; }
.jk-toast.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity .2s, transform .2s; }
.jk-toast__i { flex: none; font-size: 22px; color: var(--jk-accent-400); }
.jk-toast__t { flex: 1; min-width: 0; }
.jk-toast .jk-toast__go { flex: none; min-height: 40px; padding: 8px 16px; font-size: 14px; }
.jk-toast__go[hidden] { display: none; }
.jk-toast .jk-toast__x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 18px; cursor: pointer; box-shadow: none; }
.jk-count.is-bump { animation: jk-bump .45s ease; }
@keyframes jk-bump { 40% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .jk-toast, .jk-toast.is-on { transition: none; } .jk-count.is-bump { animation: none; } }
.jk-card__add-i { display: none; font-size: 20px; }
.jk-card__meta { font-size: 13px; color: var(--jk-n700); }
.jk-card__title { font-size: 17px; font-weight: 500; line-height: 1.4; }
.jk-card__title a:hover { color: var(--jk-accent-700); }
@media (max-width: 767px) {
	.jk-card { gap: 6px; }
	.jk-card__badge { top: 8px; inset-inline-start: 8px; font-size: 11px; }
	.jk-card__fav { top: 4px; inset-inline-end: 4px; width: 44px; height: 44px; background: transparent; font-size: 20px; }
	.jk-card .jk-card__add { inset-inline: auto 8px; bottom: 8px; width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; }
	.jk-card__add-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.jk-card__add-i { display: inline-block; }
	.jk-card__meta { display: none; }
	.jk-card__title { font-size: 14px; }
}

/* skeletons: a soft pulse on placeholder cards and on any image still loading.
   Only with JS (.jk-js), since the JS is what marks images as loaded. Opacity
   (not background-position) so the animation stays on the compositor. */
@keyframes jk-pulse { 50% { opacity: .55; } }
.jk-skel .jk-card__media,
.jk-skel__line,
.jk-js .jk-card__media:has(img:not(.is-loaded)),
.jk-js .jk-pd__shot:has(img:not(.is-loaded):not([fetchpriority="high"])),
.jk-js .jk-cat__img:has(img:not(.is-loaded)) {
	background: color-mix(in srgb, var(--jk-surface) 85%, var(--jk-n400));
	animation: jk-pulse 1.4s ease-in-out infinite;
}
/* gallery images parked until swipe: hidden until the JS runs (noscript shows the real one) */
html:not(.jk-js) img[data-jk-src] { display: none; }
.jk-skel__line { display: block; height: 14px; width: 80%; border-radius: var(--jk-radius-sm); }
.jk-skel__line--short { width: 45%; }
.jk-js :is(.jk-card__img, .jk-cat__img) img, .jk-js .jk-pd__shot img:not([fetchpriority="high"]) { opacity: 0; transition: opacity .35s ease; }
.jk-js :is(.jk-card__img, .jk-cat__img, .jk-pd__shot) img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.jk-skel .jk-card__media, .jk-skel__line, .jk-js .jk-card__media, .jk-js .jk-pd__shot, .jk-js .jk-cat__img { animation: none !important; }
	.jk-js :is(.jk-card__img, .jk-cat__img, .jk-pd__shot) img { transition: none; }
}

.jk-price { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 17px; font-weight: 600; }
.jk-price ins { order: 1; text-decoration: none; background: none; }
.jk-price del { order: 2; font-size: 13px; font-weight: 400; color: var(--jk-n600); }
.jk-price .screen-reader-text { order: 3; }
@media (max-width: 767px) { .jk-price { font-size: 14px; gap: 2px 8px; } .jk-price del { font-size: 12px; } }

/* ---- WooCommerce notices on our pages ---------------------------------- */
.jk-lean :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	list-style: none; margin: 0 0 20px; padding: 14px 18px; border-radius: var(--jk-radius);
	background: var(--jk-accent-100); color: var(--jk-accent-900); font-size: 15px;
	display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
}
.jk-lean .woocommerce-error { background: var(--jk-accent-100); color: var(--jk-accent-900); display: block; }
.jk-lean .woocommerce-error li + li { margin-top: 4px; }
.jk-lean :is(.woocommerce-message, .woocommerce-info) .button { order: 2; color: var(--jk-accent-700); font-weight: 600; text-decoration: underline; background: none; border: 0; padding: 0; }
.jk-lean .woocommerce-notices-wrapper:empty { display: none; }