/* ==========================================================================
   Jungleaf: global styles (every page)

   1. Fonts
   2. Design tokens  ← change colours, font sizes, spacing, radii here
   3. Base
   4. Buttons & links
   5. Header (utility row, floating bar, navigation, search, mobile drawer)
   6. Footer (trust list, photo strip, footer)
   7. Forms (inquiry form)
   8. WooCommerce: product cards, category pages, product page
   9. Search
   ========================================================================== */

/* 1. Fonts (self-hosted, no Google requests) */
@font-face {
	font-family: "Figtree";
	src: url("fonts/figtree-latin.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Figtree";
	src: url("fonts/figtree-latin-ext.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Design tokens ======================================================== */
:root {
	/* Brand greens (from the logo) */
	--jl-green-50:  #eef6ea;
	--jl-green-100: #dcecd3;
	--jl-green-300: #54b948;
	--jl-green-400: #39b54a;
	--jl-green-500: #00a651;
	--jl-green-600: #008a43;
	--jl-green-800: #005826;
	--jl-green-900: #00401c;

	/* Neutrals (warm greige, lanavitta-like) */
	--jl-white:      #ffffff;
	--jl-greige-50:  #f6f4ef;
	--jl-greige-100: #ebe8e1;
	--jl-greige-200: #e0dcd2;
	--jl-greige-300: #cfc9bc;
	--jl-ink:        #141a16;
	--jl-ink-soft:   #575c56;

	/* Roles. Components use these, not the raw values above */
	--jl-bg:          var(--jl-greige-100);
	--jl-surface:     var(--jl-white);
	--jl-surface-alt: var(--jl-greige-50);
	--jl-text:        var(--jl-ink);
	--jl-muted:       var(--jl-ink-soft);
	--jl-line:        var(--jl-greige-300);
	--jl-brand:       var(--jl-green-400);
	--jl-brand-dark:  var(--jl-green-800);
	--jl-brand-deep:  var(--jl-green-900);
	--jl-brand-soft:  var(--jl-green-100);
	--jl-link:        var(--jl-green-800);
	--jl-link-hover:  var(--jl-ink);
	--jl-on-dark:     var(--jl-white);

	/* Call-to-action buttons */
	--jl-cta:       var(--jl-green-500);
	--jl-cta-hover: var(--jl-green-600);
	--jl-cta-text:  var(--jl-white);

	/* Typography: everything scales from --jl-text-base (18px desktop, 17px mobile) */
	--jl-font: "Figtree", "Helvetica Neue", Arial, sans-serif;
	--jl-text-xs:   14px;
	--jl-text-sm:   16px;
	--jl-text-base: 18px;
	--jl-text-lg:   21px;
	--jl-text-xl:   24px;
	--jl-text-nav:  17px;
	--jl-h1: clamp(44px, 6vw, 88px);          /* hero headings */
	--jl-h1-page: clamp(36px, 4.4vw, 60px);   /* page / product / category titles */
	--jl-h2: clamp(34px, 4vw, 56px);
	--jl-h3: clamp(24px, 2.2vw, 30px);
	--jl-weight-head: 500;
	--jl-weight-strong: 600;
	--jl-tracking-head: -0.025em;
	--jl-leading: 1.6;

	/* Layout */
	--jl-max: 1440px;
	--jl-gutter: 32px;
	--jl-section: clamp(72px, 9vw, 128px);
	--jl-radius: 20px;
	--jl-radius-lg: 32px;
	--jl-radius-sm: 12px;
	--jl-radius-btn: 14px;
	--jl-shadow: 0 8px 30px rgba(20, 26, 22, .08);
	--jl-header-h: 76px;
	--jl-header-gap: 14px;
	--jl-page-top: clamp(32px, 4.5vw, 64px);   /* space between header and page title */
	--jl-admin-bar: var(--wp-admin--admin-bar--height, 0px);

	/* Legacy aliases (older CSS in style.css uses these) */
	--jl-paper: var(--jl-surface-alt);
	--jl-cream: var(--jl-greige-50);
	--jl-sand: var(--jl-greige-200);
	--jl-green: var(--jl-green-400);
	--jl-green-dark: var(--jl-green-500);
	--jl-green-light: var(--jl-green-300);
	--jl-accent: var(--jl-green-800);
	--jl-deep: var(--jl-green-900);
}
@media (max-width: 640px) {
	:root {
		--jl-gutter: 16px;
		--jl-text-xs: 13px;
		--jl-text-sm: 15px;
		--jl-text-base: 17px;
		--jl-text-lg: 19px;
		--jl-text-xl: 21px;
		--jl-header-h: 60px;
		--jl-header-gap: 8px;
	}
}

/* 3. Base ================================================================= */
html body.jl-site {
	background: var(--jl-bg);
	color: var(--jl-text);
	font-family: var(--jl-font);
	font-size: var(--jl-text-base);
	line-height: var(--jl-leading);
	-webkit-font-smoothing: antialiased;
}
body.jl-site button,
body.jl-site input,
body.jl-site select,
body.jl-site textarea,
body.jl-site .entry-content,
body.jl-site h1, body.jl-site h2, body.jl-site h3,
body.jl-site h4, body.jl-site h5, body.jl-site h6 {
	font-family: var(--jl-font);
}
body.jl-site h1, body.jl-site h2, body.jl-site h3, body.jl-site h4 {
	color: var(--jl-text);
	font-weight: var(--jl-weight-head);
	letter-spacing: var(--jl-tracking-head);
}
body.jl-site h1 { font-size: var(--jl-h1-page); line-height: 1.08; }
body.jl-site h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.15; }
body.jl-site h3 { font-size: var(--jl-h3); line-height: 1.25; }
body.jl-site .entry-content { color: var(--jl-text); font-size: var(--jl-text-base); }
body.jl-site a { color: var(--jl-link); }
body.jl-site a:hover { color: var(--jl-link-hover); }
body.jl-site #page,
body.jl-site .site-content { background: transparent; }
/* One container for header, content and footer */
body.jl-site .col-full,
.jl-wrap { box-sizing: border-box; width: 100%; max-width: var(--jl-max); margin-left: auto; margin-right: auto; padding-left: var(--jl-gutter); padding-right: var(--jl-gutter); }
body.jl-site ::selection { background: var(--jl-brand-soft); color: var(--jl-text); }

.jl-skip {
	position: absolute; left: 12px; top: -60px; z-index: 1000;
	padding: 10px 16px; border-radius: var(--jl-radius-sm);
	background: var(--jl-text); color: var(--jl-on-dark) !important;
}
.jl-skip:focus { top: 12px; }
.jl-icon { display: block; width: 20px; height: 20px; flex: none; }

/* Old theme bits that don't belong to the new layout */
body.jl-site .site-header,
body.jl-site .col-full-nav,
body.jl-site .header-widget-region,
body.jl-site .mobile-overlay,
body.jl-site .shoptimizer-mobile-menu,
body.jl-site footer.site-footer,
body.jl-site .below-content { display: none; }

/* 4. Buttons & links ====================================================== */
.jl-btn,
body.jl-site a.jl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	min-height: 54px;
	padding: 0 28px;
	border: 1.5px solid transparent;
	border-radius: var(--jl-radius-btn);
	font-family: var(--jl-font);
	font-size: var(--jl-text-base);
	font-weight: var(--jl-weight-strong);
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.jl-btn:focus-visible,
.jl-icon-btn:focus-visible,
.jl-round-btn:focus-visible { outline: 2px solid var(--jl-text); outline-offset: 3px; }
.jl-btn .jl-icon { width: 18px; height: 18px; }

body.jl-site .jl-btn--primary { background: var(--jl-cta); color: var(--jl-cta-text); }
body.jl-site .jl-btn--primary:hover { background: var(--jl-cta-hover); color: var(--jl-cta-text); }
body.jl-site .jl-btn--light { background: var(--jl-surface); color: var(--jl-text); border-color: var(--jl-surface); }
body.jl-site .jl-btn--light:hover { background: var(--jl-greige-50); color: var(--jl-text); }
body.jl-site .jl-btn--outline { border-color: var(--jl-text); color: var(--jl-text); background: transparent; }
body.jl-site .jl-btn--outline:hover { background: var(--jl-text); color: var(--jl-on-dark); }
body.jl-site .jl-btn--ghost { border-color: rgba(255, 255, 255, .7); color: var(--jl-on-dark); }
body.jl-site .jl-btn--ghost:hover { background: var(--jl-on-dark); color: var(--jl-text); }
.jl-btn--sm,
body.jl-site a.jl-btn--sm { min-height: 48px; padding: 0 22px; font-size: var(--jl-text-sm); }
.jl-btn--lg,
body.jl-site a.jl-btn--lg { min-height: 60px; padding: 0 34px; font-size: var(--jl-text-base); }

/* WooCommerce / theme buttons follow the CTA colours */
body.jl-site .button,
body.jl-site button.button,
body.jl-site input[type="submit"] { border-radius: var(--jl-radius-btn); font-family: var(--jl-font); }

.jl-round-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1.5px solid var(--jl-text);
	border-radius: 50%;
	background: transparent;
	color: var(--jl-text);
	cursor: pointer;
}
.jl-round-btn:hover { background: var(--jl-text); color: var(--jl-on-dark); }

body.jl-site .jl-link {
	color: var(--jl-text);
	font-weight: var(--jl-weight-strong);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 5px;
	white-space: nowrap;
}
body.jl-site .jl-link:hover { color: var(--jl-brand-dark); }

/* 5. Header =============================================================== */
.jl-utility { font-size: var(--jl-text-xs); color: var(--jl-muted); }
.jl-utility__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 36px; }
.jl-utility__tag { margin: 0; }
.jl-utility__links { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
body.jl-site .jl-utility a { color: var(--jl-text); text-decoration: none; }
body.jl-site .jl-utility a:hover { text-decoration: underline; }

.jl-header {
	position: sticky;
	top: var(--jl-admin-bar);
	z-index: 500;
	padding: var(--jl-header-gap) 0;
	pointer-events: none;
}
.jl-header__bar,
.jl-search { pointer-events: auto; }
.jl-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	height: var(--jl-header-h);
	padding: 0 14px 0 26px;
	border-radius: var(--jl-radius);
	background: var(--jl-surface);
	box-shadow: var(--jl-shadow);
}
.jl-logo { display: block; flex: none; line-height: 0; }
.jl-logo img { width: auto; height: 46px; }

.jl-nav { flex: 1; display: flex; justify-content: center; }
.jl-nav__list,
.jl-nav__sub { margin: 0; padding: 0; list-style: none; }
.jl-nav__list { display: flex; align-items: center; gap: 2px; }
.jl-nav__item { position: relative; display: flex; align-items: center; margin: 0; }
body.jl-site .jl-nav a {
	display: block;
	padding: 9px 12px;
	border-radius: 10px;
	color: var(--jl-text);
	font-size: var(--jl-text-nav);
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}
body.jl-site .jl-nav a:hover { background: var(--jl-greige-50); color: var(--jl-text); }
body.jl-site .jl-nav a[aria-current="page"] { color: var(--jl-brand-dark); }
.jl-nav__list > .jl-nav__item--parent > a { padding-right: 2px; }
.jl-nav__toggle {
	display: grid;
	place-items: center;
	width: 26px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--jl-text);
	cursor: pointer;
}
.jl-nav__toggle .jl-icon { width: 16px; height: 16px; transition: transform .2s ease; }
.jl-nav__toggle[aria-expanded="true"] .jl-icon { transform: rotate(180deg); }

/* Desktop dropdowns */
@media (min-width: 1101px) {
	.jl-nav__list > .jl-nav__item > .jl-nav__panel {
		position: absolute;
		top: calc(100% + 18px);
		left: 50%;
		min-width: 240px;
		padding: 10px;
		border-radius: 18px;
		background: var(--jl-surface);
		box-shadow: 0 18px 50px rgba(20, 26, 22, .14);
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, 6px);
		transition: opacity .18s ease, transform .18s ease, visibility .18s;
	}
	.jl-nav__list > .jl-nav__item > .jl-nav__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
	.jl-nav__list > .jl-nav__item:hover > .jl-nav__panel,
	.jl-nav__list > .jl-nav__item:focus-within > .jl-nav__panel,
	.jl-nav__list > .jl-nav__item.is-open > .jl-nav__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

	/* "Tooted": categories with their sub-categories in columns */
	.jl-nav__item--mega > .jl-nav__panel { width: min(760px, 90vw); padding: 22px; }
	.jl-nav__item--mega > .jl-nav__panel > .jl-nav__sub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; }
	.jl-nav__item--mega .jl-nav__sub .jl-nav__item { display: block; }
	body.jl-site .jl-nav__item--mega > .jl-nav__panel > .jl-nav__sub > .jl-nav__item > a { font-weight: var(--jl-weight-strong); }
	.jl-nav__panel .jl-nav__panel { position: static; opacity: 1; visibility: visible; transform: none; padding: 0 0 0 12px; box-shadow: none; }
	.jl-nav__panel .jl-nav__toggle { display: none; }
	body.jl-site .jl-nav__panel .jl-nav__panel a { padding: 5px 12px; color: var(--jl-muted); font-size: var(--jl-text-xs); }
	.jl-nav__extra { display: none; }
}

.jl-header__actions { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.jl-icon-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--jl-text);
	cursor: pointer;
}
.jl-icon-btn:hover,
.jl-icon-btn[aria-expanded="true"] { background: var(--jl-greige-50); color: var(--jl-text); }
.jl-burger { display: none; }
.jl-burger__close { display: none; }
.jl-burger[aria-expanded="true"] .jl-burger__open { display: none; }
.jl-burger[aria-expanded="true"] .jl-burger__close { display: block; }

/* Search panel */
.jl-search {
	margin-top: 8px;
	padding: 14px;
	border-radius: var(--jl-radius);
	background: var(--jl-surface);
	box-shadow: var(--jl-shadow);
}
.jl-search[hidden] { display: none; }
.jl-search form { display: flex; gap: 8px; margin: 0; }
body.jl-site .jl-search input[type="search"] {
	flex: 1;
	height: 50px;
	padding: 0 18px;
	border: 1.5px solid var(--jl-line);
	border-radius: var(--jl-radius-btn);
	background: var(--jl-surface);
	font-size: var(--jl-text-sm);
	box-shadow: none;
}
body.jl-site .jl-search input[type="search"]:focus { border-color: var(--jl-brand-dark); outline: none; }
body.jl-site .jl-search button[type="submit"] {
	height: 50px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--jl-radius-btn);
	background: var(--jl-cta);
	color: var(--jl-cta-text);
	font-weight: var(--jl-weight-strong);
}

/* Mobile / tablet: drawer */
@media (max-width: 1100px) {
	.jl-burger { display: grid; }
	.jl-nav {
		position: fixed;
		left: var(--jl-gutter);
		right: var(--jl-gutter);
		top: calc(var(--jl-admin-bar) + var(--jl-header-h) + var(--jl-header-gap) * 2);
		bottom: var(--jl-gutter);
		z-index: 499;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: 24px;
		padding: 16px;
		overflow-y: auto;
		border-radius: var(--jl-radius);
		background: var(--jl-surface);
		box-shadow: var(--jl-shadow);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .2s ease, transform .2s ease, visibility .2s;
	}
	body.jl-nav-open .jl-nav { opacity: 1; visibility: visible; transform: none; }
	body.jl-nav-open { overflow: hidden; }
	.jl-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.jl-nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--jl-greige-200); }
	.jl-nav__item > a { flex: 1; }
	body.jl-site .jl-nav a { padding: 14px 8px; font-size: var(--jl-text-base); }
	.jl-nav__toggle { width: 48px; height: 48px; }
	.jl-nav__panel { display: none; width: 100%; padding: 0 0 10px 12px; }
	.jl-nav__panel.is-open { display: block; }
	.jl-nav__panel .jl-nav__item { border: 0; }
	body.jl-site .jl-nav__panel a { padding: 10px 8px; font-size: var(--jl-text-sm); }
	.jl-nav__extra { display: flex; flex-direction: column; gap: 18px; }
	.jl-nav__extra ul { margin: 0; padding: 0; list-style: none; }
	body.jl-site .jl-nav__extra li a { padding: 6px 8px; font-size: var(--jl-text-sm); color: var(--jl-muted); }
	.jl-utility { display: none; }
}
@media (max-width: 560px) {
	.jl-header__cta { display: none !important; }
	.jl-logo img { height: 32px; }
	.jl-header__bar { padding-left: 16px; gap: 8px; }
}

/* 6. Footer =============================================================== */
.jl-trust-wrap { padding: 40px 0; border-top: 1px solid var(--jl-line); }

.jl-strip { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 0; }
.jl-strip__item { aspect-ratio: 1; overflow: hidden; background: var(--jl-greige-200); }
.jl-strip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.jl-strip__item:hover img { transform: scale(1.04); }

.jl-footer { padding: 56px 0 28px; background: var(--jl-bg); color: var(--jl-text); font-size: var(--jl-text-sm); }
.jl-footer__box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	padding: 28px 32px;
	border: 1.5px solid var(--jl-text);
	border-radius: 28px;
}
.jl-footer__title { margin: 0 0 4px; font-size: clamp(22px, 2.2vw, 30px); font-weight: var(--jl-weight-head); letter-spacing: var(--jl-tracking-head); line-height: 1.2; }
.jl-footer__pitch p:last-child { margin: 0; color: var(--jl-muted); }
.jl-footer__box-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }
.jl-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin: 52px 0 40px; }
.jl-footer__heading { margin: 0 0 12px; font-weight: var(--jl-weight-strong); }
.jl-footer ul { margin: 0; padding: 0; list-style: none; }
.jl-footer li { margin: 0 0 8px; }
body.jl-site .jl-footer a { color: var(--jl-text); text-decoration: none; }
body.jl-site .jl-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.jl-footer__social { display: flex; gap: 16px; margin-top: 16px !important; }
.jl-footer__mark { margin: 0 0 24px; line-height: 0; }
.jl-footer__mark img { width: min(520px, 100%); height: auto; }
.jl-footer__legal { padding-top: 20px; border-top: 1px solid var(--jl-line); color: var(--jl-muted); font-size: var(--jl-text-xs); }
.jl-footer__legal p { margin: 0; }

@media (max-width: 900px) {
	.jl-footer__box { flex-direction: column; align-items: flex-start; }
	.jl-footer__cols { grid-template-columns: 1fr 1fr; }
	.jl-strip { grid-template-columns: repeat(3, 1fr); }
}

/* Trust list */
.jl-trust { color: var(--jl-text); }
.jl-trust__list { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.jl-trust__list li { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0 24px; border-left: 1px solid var(--jl-line); }
.jl-trust__list li:first-child { padding-left: 0; border-left: 0; }
.jl-trust__list strong { font-size: var(--jl-text-lg); font-weight: var(--jl-weight-strong); line-height: 1.3; }
.jl-trust__list span { font-size: var(--jl-text-xs); line-height: 1.4; color: var(--jl-muted); }
.jl-trust--compact { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--jl-line); }
.jl-trust--compact .jl-trust__list { grid-template-columns: 1fr 1fr; gap: 14px 0; }
.jl-trust--compact .jl-trust__list li { padding: 0 0 0 12px; border-left: 2px solid var(--jl-brand); }
.jl-trust--compact .jl-trust__list strong { font-size: var(--jl-text-sm); }
.jl-trust--compact .jl-trust__list span { font-size: var(--jl-text-xs); }
@media (max-width: 860px) {
	.jl-trust__list { grid-template-columns: 1fr 1fr; gap: 20px 0; }
	.jl-trust__list li:nth-child(3) { padding-left: 0; border-left: 0; }
	.jl-trust--compact .jl-trust__list li:nth-child(3) { padding-left: 12px; border-left: 2px solid var(--jl-brand); }
}

/* Contact list (icons) */
.jl-contact-list { margin: 0; padding: 0; list-style: none; }
.jl-contact-list li { margin: 6px 0; }
body.jl-site .jl-contact-list a { display: inline-flex; align-items: center; gap: 10px; color: inherit; font-weight: var(--jl-weight-strong); text-decoration: none; }
body.jl-site .jl-contact-list a:hover { text-decoration: underline; }

/* 7. Forms ================================================================ */
.jl-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.jl-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.jl-field { display: flex; flex-direction: column; gap: 6px; }
.jl-field--wide { grid-column: 1 / -1; }
.jl-field label { font-size: var(--jl-text-sm); font-weight: var(--jl-weight-strong); color: var(--jl-text); }
body.jl-site .jl-field input,
body.jl-site .jl-field select,
body.jl-site .jl-field textarea {
	width: 100%;
	min-height: 50px;
	padding: 12px 14px;
	border: 1.5px solid var(--jl-line);
	border-radius: var(--jl-radius-sm);
	background: var(--jl-surface);
	color: var(--jl-text);
	font-size: var(--jl-text-sm);
	box-shadow: none;
}
body.jl-site .jl-field textarea { min-height: 120px; resize: vertical; }
body.jl-site .jl-field :focus { outline: 2px solid var(--jl-brand-dark); outline-offset: 0; border-color: var(--jl-brand-dark); }
.jl-consent { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0; font-size: var(--jl-text-xs); color: var(--jl-muted); }
.jl-consent input { margin-top: 4px; flex: none; accent-color: var(--jl-cta); }
body.jl-site .jl-consent a { color: inherit; text-decoration: underline; }
.jl-form .jl-btn { width: 100%; }
.jl-form-notice { margin-bottom: 20px; padding: 16px 18px; border-radius: var(--jl-radius-sm); }
.jl-form-notice p { margin: 4px 0 0; }
.jl-form-notice--ok { background: var(--jl-green-50); color: var(--jl-brand-deep); }
.jl-form-notice--error { background: #fbe9e7; color: #7a1f12; }
@media (max-width: 640px) {
	.jl-form__grid { grid-template-columns: 1fr; }
}

/* OEKO-TEX badge */
body.jl-site a.jl-oeko {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 16px;
	padding: 10px 14px;
	border: 1.5px solid var(--jl-brand-dark);
	border-radius: var(--jl-radius-sm);
	color: var(--jl-text);
	font-size: var(--jl-text-xs);
	text-decoration: none;
}
.jl-oeko strong { color: var(--jl-brand-dark); font-size: var(--jl-text-xs); letter-spacing: .02em; }
.jl-oeko--small {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 8px;
	border: 1px solid var(--jl-brand-dark);
	border-radius: 999px;
	color: var(--jl-brand-dark);
	font-size: 11px;
	font-weight: var(--jl-weight-strong);
	letter-spacing: .03em;
}

/* 8. WooCommerce ========================================================== */

/* Breadcrumb row */
body.jl-site .archive-header { background: transparent; border: 0; }
body.jl-site .woocommerce-breadcrumb { font-size: var(--jl-text-xs); color: var(--jl-muted); }
body.jl-site .woocommerce-breadcrumb a { color: var(--jl-muted); }

/* Product cards in theme loops */
/* Gutter via a transparent border, so the theme's column widths stay intact */
body.jl-site ul.products { align-items: stretch; margin-left: -8px; margin-right: -8px; }
body.jl-site ul.products li.product {
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
	padding: 0 0 18px;
	overflow: hidden;
	border: 8px solid transparent;
	border-radius: calc(var(--jl-radius) + 8px);
	background: var(--jl-surface);
	background-clip: padding-box;
}
body.jl-site ul.products li.product .woocommerce-image__wrapper,
body.jl-site ul.products li.product .shoptimizer-plp-image-wrapper { margin: 0 0 14px; overflow: hidden; border-radius: var(--jl-radius) var(--jl-radius) 0 0; background: var(--jl-surface); }
body.jl-site ul.products li.product img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 0; background: var(--jl-surface); transition: transform .5s ease; }
body.jl-site ul.products li.product:hover img { transform: scale(1.03); }
body.jl-site ul.products li.product .woocommerce-card__header { padding: 0 18px; }
body.jl-site ul.products li.product .woocommerce-loop-product__title,
body.jl-site ul.products li.product h2 { margin: 0 0 4px; color: var(--jl-text); font-size: var(--jl-text-base); font-weight: 500; line-height: 1.35; letter-spacing: 0; }
body.jl-site ul.products li.product .price { color: var(--jl-text); font-size: var(--jl-text-base); font-weight: var(--jl-weight-strong); }
body.jl-shop-off ul.products li.product .button,
body.jl-shop-off ul.products li.product .added_to_cart,
body.jl-shop-off .shoptimizer-sticky-add-to-cart,
body.jl-shop-off .commercekit-wishlist,
body.jl-shop-off .shoptimizer-mini-cart-wrap { display: none !important; }

/* Category header + promo */
body.jl-site .woocommerce-products-header__title,
body.jl-site .term-description { color: var(--jl-text); }
body.jl-site .shoptimizer-category-banner,
body.jl-site .term-description { border-radius: var(--jl-radius); }
.jl-cat-promo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	margin: 0 0 28px;
	padding: 22px 26px;
	border-radius: var(--jl-radius);
	background: var(--jl-brand-soft);
}
.jl-cat-promo p { margin: 0; color: var(--jl-muted); font-size: var(--jl-text-sm); }
.jl-cat-promo .jl-cat-promo__title { margin: 0 0 2px; color: var(--jl-text); font-size: var(--jl-text-lg); font-weight: var(--jl-weight-strong); }
.jl-cat-promo__actions { display: flex; align-items: center; gap: 18px; flex: none; }
@media (max-width: 760px) {
	.jl-cat-promo { flex-direction: column; align-items: flex-start; }
}

/* Product page */
body.jl-site.single-product div.product .product_title { font-size: clamp(28px, 3vw, 40px); font-weight: var(--jl-weight-head); letter-spacing: var(--jl-tracking-head); }
body.jl-site.single-product div.product p.price,
body.jl-site.single-product div.product span.price { color: var(--jl-text); font-weight: var(--jl-weight-strong); }
body.jl-site.single-product .woocommerce-product-gallery img { border-radius: var(--jl-radius); background: var(--jl-surface); }
body.jl-site.single-product .woocommerce-tabs ul.tabs li a span { background-color: var(--jl-brand-dark); }

.jl-pdp-cta { margin: 22px 0 0; }
.jl-pdp-cta__lead { margin: 0 0 14px; font-size: var(--jl-text-sm); }
.jl-pdp-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.jl-pdp-cta__actions .jl-btn--primary { flex: 1 1 200px; }
.jl-pdp-cta__note { margin: 12px 0 0; color: var(--jl-muted); font-size: var(--jl-text-xs); }

.jl-pdp-work { clear: both; margin: 56px 0 0; }
.jl-pdp-work__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
body.jl-site .jl-pdp-work h2 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); }
.jl-pdp-work__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.jl-pdp-work__list li { position: relative; margin: 0; overflow: hidden; border-radius: var(--jl-radius); }
.jl-pdp-work__list img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.jl-pdp-work__list span {
	position: absolute; left: 10px; bottom: 10px; right: 10px;
	padding: 4px 10px; border-radius: 8px;
	background: rgba(255, 255, 255, .92);
	font-size: var(--jl-text-xs); font-weight: 500; line-height: 1.35;
}

.jl-pdp-inquiry {
	clear: both;
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 48px;
	margin: 56px 0;
	padding: clamp(24px, 4vw, 48px);
	border-radius: var(--jl-radius-lg);
	background: var(--jl-surface);
	scroll-margin-top: calc(var(--jl-admin-bar) + var(--jl-header-h) + 32px);
}
body.jl-site .jl-pdp-inquiry h2 { margin: 0 0 12px; font-size: var(--jl-h2); }
.jl-pdp-inquiry__intro p { color: var(--jl-muted); }
.jl-pdp-inquiry__intro strong { color: var(--jl-text); }
@media (max-width: 900px) {
	.jl-pdp-inquiry { grid-template-columns: 1fr; gap: 24px; }
	.jl-pdp-work__list { grid-template-columns: 1fr 1fr; }
}

/* 9. Search =============================================================== */
.jl-search-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 24px;
	padding: 16px 20px;
	border-radius: var(--jl-radius);
	background: var(--jl-brand-soft);
}
.jl-search-banner strong { display: block; color: var(--jl-text); }
.jl-search-banner span { color: var(--jl-muted); font-size: var(--jl-text-sm); }
.jl-search-banner .jl-btn { flex: none; }
.jl-search-empty { margin: 8px 0 32px; }
.jl-search-empty ul { margin: 8px 0 0 1.2em; }
body.jl-site .jl-search-empty a { color: var(--jl-link); text-decoration: underline; }
.jl-search-b2b .smart-search-post-title { font-weight: var(--jl-weight-strong); color: var(--jl-brand-dark); }
@media (max-width: 640px) {
	.jl-search-banner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* 404 */
.jl-404 { max-width: 720px; margin: 40px auto 80px; float: none; }
.jl-404__search { margin: 28px 0; }
.jl-404__search form { display: flex; gap: 8px; }
body.jl-site .jl-404__search input[type="search"] { flex: 1; height: 50px; padding: 0 18px; border: 1.5px solid var(--jl-line); border-radius: var(--jl-radius-btn); background: var(--jl-surface); }
body.jl-site .jl-404__search button { height: 50px; padding: 0 22px; border: 0; border-radius: var(--jl-radius-btn); background: var(--jl-cta); color: var(--jl-cta-text); }
.jl-404__links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
body.jl-site .jl-404__links a { display: inline-block; padding: 10px 16px; border-radius: 999px; background: var(--jl-surface); color: var(--jl-text); text-decoration: none; font-weight: 500; }
body.jl-site .jl-404__links a:hover { background: var(--jl-brand-soft); }

/* Product cards on phones: two tight columns */
@media (max-width: 640px) {
	body.jl-site ul.products { margin-left: -4px; margin-right: -4px; }
	body.jl-site ul.products li.product { padding-bottom: 14px; border-width: 4px; border-radius: calc(var(--jl-radius-sm) + 4px); }
	body.jl-site ul.products li.product .woocommerce-image__wrapper,
	body.jl-site ul.products li.product .shoptimizer-plp-image-wrapper { margin-bottom: 10px; border-radius: var(--jl-radius-sm) var(--jl-radius-sm) 0 0; }
	body.jl-site ul.products li.product .woocommerce-card__header { padding: 0 12px; }
	body.jl-site ul.products li.product .woocommerce-loop-product__title,
	body.jl-site ul.products li.product h2 { font-size: var(--jl-text-sm); }
	body.jl-site ul.products li.product .price { font-size: var(--jl-text-sm); }
}

/* Social icons */
.jl-social { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jl-social li { margin: 0 !important; }
body.jl-site .jl-social a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--jl-line);
	border-radius: 50%;
	color: var(--jl-text);
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
body.jl-site .jl-social a:hover { border-color: var(--jl-text); background: var(--jl-text); color: var(--jl-on-dark); text-decoration: none; }

/* OEKO-TEX statement (span or link) */
body.jl-site .jl-oeko:not(.jl-oeko--small) {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 16px;
	padding: 10px 14px;
	border: 1.5px solid var(--jl-brand-dark);
	border-radius: var(--jl-radius-sm);
	color: var(--jl-text);
	font-size: var(--jl-text-xs);
	text-decoration: none;
}

/* Product description: rounded card, hide the tab bar when there is only one tab */
body.jl-site.single-product .woocommerce-tabs { border-radius: var(--jl-radius-lg); overflow: hidden; }
body.jl-site.single-product .woocommerce-tabs ul.tabs:has(> li:only-child) { display: none; }
body.jl-site.single-product .woocommerce-tabs .panel { font-size: var(--jl-text-base); }

/* Search fields: the theme's magnifier icon is drawn for a shorter field; centre it */
.jl-search form,
.jl-404__search form { position: relative; }
.jl-search form::before,
.jl-404__search form::before { left: 18px !important; top: 50% !important; transform: translateY(-50%); z-index: 1; pointer-events: none; }
body.jl-site .jl-search input[type="search"],
body.jl-site .jl-404__search input[type="search"] { padding-left: 48px; }

/* Related products: cards on the page background, like the category pages */
body.jl-site.single-product .related-wrapper { background: transparent; border: 0; }
body.jl-site.single-product section.related > h2,
body.jl-site.single-product section.upsells > h2 { font-size: var(--jl-h3); margin-bottom: 20px; }
/* Space between the related cards and the photo strip above the footer */
body.jl-site.single-product section.related.products { padding-bottom: clamp(48px, 6vw, 88px); }

/* Small OEKO-TEX tag inside cards: as wide as its text */
.jl-oeko--small { align-self: flex-start; width: auto !important; max-width: max-content; }
body.jl-site ul.products li.product .jl-oeko--small { margin: 8px 18px 0; }
@media (max-width: 640px) { body.jl-site ul.products li.product .jl-oeko--small { margin: 6px 12px 0; } }
body.jl-shop-off .product-out-of-stock { display: none !important; }

/* Sticky inquiry bar on product pages (phones) */
.jl-sticky-cta { display: none; }
@media (max-width: 760px) {
	.jl-sticky-cta:not([hidden]) {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 400;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px var(--jl-gutter) calc(10px + env(safe-area-inset-bottom));
		background: var(--jl-surface);
		box-shadow: 0 -6px 24px rgba(20, 26, 22, .1);
	}
	.jl-sticky-cta__name { flex: 1; overflow: hidden; font-size: var(--jl-text-xs); font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
	.jl-sticky-cta .jl-btn { flex: none; min-height: 48px; }
	body.single-product.jl-shop-off { padding-bottom: 72px; }
}

/* Buttons keep their own text colour inside areas that style links (footer, content, etc.) */
body.jl-site a.jl-btn--primary,
body.jl-site a.jl-btn--primary:hover,
body.jl-site .jl-footer a.jl-btn--primary,
body.jl-site .jl-footer a.jl-btn--primary:hover { color: var(--jl-cta-text); text-decoration: none; }
body.jl-site a.jl-btn--light,
body.jl-site .jl-footer a.jl-btn--light { color: var(--jl-text); text-decoration: none; }
body.jl-site .jl-footer a.jl-btn--primary:hover { background: var(--jl-cta-hover); }

/* Product search page */
body.jl-site.search .woocommerce-products-header { display: block; margin: 8px 0 24px; }
body.jl-site.search .woocommerce-products-header__title { display: block !important; margin: 0 0 18px; font-size: var(--jl-h1-page); }
.jl-search-refine { max-width: 640px; margin: 0 0 28px; }
.jl-search-refine form { position: relative; display: flex; gap: 8px; }
.jl-search-refine form::before { left: 18px !important; top: 50% !important; transform: translateY(-50%); z-index: 1; pointer-events: none; }
body.jl-site .jl-search-refine input[type="search"] { flex: 1; height: 54px; padding: 0 18px 0 48px; border: 1.5px solid var(--jl-line); border-radius: var(--jl-radius-btn); background: var(--jl-surface); font-size: var(--jl-text-base); box-shadow: none; }
body.jl-site .jl-search-refine input[type="search"]:focus { border-color: var(--jl-brand-dark); outline: none; }
body.jl-site .jl-search-refine button[type="submit"] { height: 54px; padding: 0 24px; border: 0; border-radius: var(--jl-radius-btn); background: var(--jl-cta); color: var(--jl-cta-text); font-weight: var(--jl-weight-strong); }
body.jl-site.search-no-results #primary,
body.jl-site.post-type-archive-product:not(:has(.jlf-sidebar)) #primary,
body.jl-site.tax-product_cat:not(:has(.jlf-sidebar)) #primary { width: 100%; float: none; }

/* Empty results */
.jl-empty { max-width: 760px; padding: clamp(24px, 4vw, 40px); border-radius: var(--jl-radius-lg); background: var(--jl-surface); }
.jl-empty__title { margin: 0 0 8px; font-size: var(--jl-h3); font-weight: var(--jl-weight-head); letter-spacing: var(--jl-tracking-head); line-height: 1.2; }
.jl-empty > p { color: var(--jl-muted); }
.jl-empty__cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; padding: 0; list-style: none; }
.jl-empty__cats li { margin: 0; }
body.jl-site .jl-empty__cats a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--jl-line); border-radius: 999px; color: var(--jl-text); font-weight: 500; text-decoration: none; }
body.jl-site .jl-empty__cats a:hover { border-color: var(--jl-text); }
.jl-empty__cta { margin: 0 0 14px; }
.jl-search-banner + .jl-search-banner { margin-top: -12px; }
body.jl-site .woocommerce-no-products-found { display: none; }

/* "Alates 2020" stamp */
.jl-since {
	display: inline-grid;
	place-items: center;
	align-content: center;
	width: 128px;
	height: 128px;
	border: 2px solid var(--jl-brand-dark);
	border-radius: 50%;
	outline: 1px solid var(--jl-brand-dark);
	outline-offset: -9px;
	background: var(--jl-surface);
	color: var(--jl-brand-dark);
	text-align: center;
	line-height: 1;
	transform: rotate(-8deg);
}
.jl-since__top,
.jl-since__bottom { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.jl-since__year { margin: 4px 0; font-size: 36px; font-weight: 700; letter-spacing: -.02em; }
.jl-footer__mark { display: inline-block; vertical-align: middle; margin-right: 28px; }
.jl-since--footer { vertical-align: middle; margin-bottom: 24px; background: transparent; }
@media (max-width: 640px) {
	.jl-since { width: 104px; height: 104px; }
	.jl-since__year { font-size: 28px; }
	.jl-footer__mark { display: block; margin-right: 0; }
}

/* Blog without sidebar: comfortable reading width */
body.jl-site.blog .content-area,
body.jl-site.single-post .content-area { float: none; width: 100%; max-width: 860px; margin-left: auto; margin-right: auto; }

/* Live search: no SKU line (products have no SKUs) */
.smart-search-post-sku { display: none !important; }

/* OEKO-TEX tag in cards: aligned with the text, inside the card padding */
body.jl-site ul.products li.product .jl-oeko--small { margin: 10px 0 0; }
body.jl-site ul.products li.product { padding-bottom: 22px; }
@media (max-width: 640px) { body.jl-site ul.products li.product .jl-oeko--small { margin: 8px 0 0; } }

/* Product description card: even padding */
body.jl-site.single-product .woocommerce-tabs { padding: 0; }
body.jl-site.single-product .woocommerce-tabs .panel { margin: 0; padding: clamp(28px, 4vw, 56px) clamp(24px, 5vw, 72px); }
body.jl-site.single-product .woocommerce-tabs .panel > :first-child { margin-top: 0; }
body.jl-site.single-product .woocommerce-tabs .panel > :last-child { margin-bottom: 0; }

/* Space between the floating header and the page title (all non-hero pages) */
body.jl-site:not(.jl-hero-page) .site-content > .shoptimizer-archive { padding-top: var(--jl-page-top); }
body.jl-site:not(.jl-hero-page) .archive-header { padding-top: 0; margin-top: 0; }
body.jl-site:not(.jl-hero-page) .archive-header .col-full:empty { display: none; }
body.jl-site .woocommerce-breadcrumb { margin-bottom: 18px; }

/* The theme's own container width (customizer) must not narrow some pages */
body.jl-site .col-full,
body.jl-site .shoptimizer-archive > .col-full,
body.jl-site.single-product .col-full { max-width: var(--jl-max) !important; }
body.jl-hero-page .site-content > .shoptimizer-archive > .col-full { max-width: none !important; }
/* Product grid edges line up with the header/content (cards keep their 8px gutter) */
body.jl-site ul.products { width: auto !important; margin-left: -8px !important; margin-right: -8px !important; }
@media (max-width: 640px) { body.jl-site ul.products { margin-left: -4px !important; margin-right: -4px !important; } }

/* Category intro card (below the products, lanavitta-style pastel card) */
.jl-cat-intro {
	clear: both;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
	margin: 56px 0 24px;
	padding: clamp(24px, 4vw, 56px);
	border-radius: var(--jl-radius-lg);
	background: var(--jl-brand-soft);
}
.jl-cat-intro--text { grid-template-columns: 1fr; }
.jl-cat-intro__text { max-width: 38em; }
body.jl-site .jl-cat-intro__text h2,
body.jl-site .jl-cat-intro__text h3 { margin: 0 0 14px; font-size: var(--jl-h3); }
.jl-cat-intro__text p { margin: 0 0 14px; color: var(--jl-text); }
.jl-cat-intro__text > :last-child { margin-bottom: 0; }
.jl-cat-intro__cta { margin-top: 22px !important; }
.jl-cat-intro__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--jl-radius); }

/* Longer SEO text under it */
body.jl-site .below-woocommerce-category { clear: both; max-width: 820px; margin: 32px 0 56px; padding: 0; color: var(--jl-muted); font-size: var(--jl-text-base); }
body.jl-site .below-woocommerce-category h2,
body.jl-site .below-woocommerce-category h3 { color: var(--jl-text); font-size: var(--jl-h3); margin: 28px 0 10px; }

/* Bottom pagination spacing */
body.jl-site .woocommerce-pagination { margin: 32px 0 0; }

@media (max-width: 900px) {
	.jl-cat-intro { grid-template-columns: 1fr; }
	.jl-cat-intro__media { order: -1; }
}

/* OEKO-TEX tag: one consistent spot sitewide, top-left corner of the product photo */
body.jl-site ul.products li.product,
.jl-card { position: relative; }
body.jl-site ul.products li.product .jl-oeko--small,
.jl-card .jl-oeko--small,
.jl-card__link .jl-oeko--small {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	margin: 0 !important;
	padding: 4px 10px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 1px 4px rgba(20, 26, 22, .12);
	color: var(--jl-brand-dark);
	font-size: 11px;
	line-height: 1.2;
	pointer-events: none;
}
body.jl-site ul.products li.product { padding-bottom: 18px; }

/* Equal card heights in every product grid (category, search, tags, related):
   the theme pins cards to the top of the row and adds a bottom margin. */
body.jl-site ul.products li.product { align-self: stretch !important; height: auto !important; margin-bottom: 0 !important; }