/*
Theme Name: JMJ Bazaar
Theme URI: https://jmjbazaar.com
Author: JMJ Bazaar
Description: Lean, self-contained theme for jmjbazaar.com. Covers the whole site (pages, blog, shop, product pages, basket, checkout, account) with no page builder or add-on plugins. Works with the JMJ Cow Share plugin's built-in shop.
Version: 1.3.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: jmj-bazaar
*/
@font-face { font-family: "Young Serif"; src: url("assets/fonts/young-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("assets/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 400 900; font-style: normal; font-display: swap; }

:root {
	--cs-green: #186038; --cs-green-press: #0f4528; --cs-green-tint: #e4efe7;
	--cs-orange: #f09820; --cs-orange-ink: #8a5300; --cs-orange-tint: #fcf0dc;
	--cs-ink: #17201a; --cs-muted: #59615a; --cs-line: #d9d6cc; --cs-paper: #f1efe7; --cs-surface: #fbfaf6;
	--cs-bad: #9b2c22; --cs-bad-tint: #f8e4e1; --cs-info: #24507a; --cs-info-tint: #e3ecf5; --cs-on-primary: #fff;
	--cs-focus: 0 0 0 3px color-mix(in srgb, var(--cs-orange) 55%, transparent);
	--jb-serif: "Young Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--jb-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--cs-serif: var(--jb-serif); --cs-sans: var(--jb-sans);
	--jb-wrap: 1180px; --jb-gutter: clamp(1.1rem, .6rem + 2.2vw, 2.25rem);
}
html[data-theme="dark"] {
	--cs-green: #82cc9b; --cs-green-press: #a3dcb5; --cs-green-tint: #1c3024;
	--cs-orange: #f2a43a; --cs-orange-ink: #f5b866; --cs-orange-tint: #352711;
	--cs-ink: #ece9e1; --cs-muted: #a8afa7; --cs-line: #303832; --cs-paper: #111512; --cs-surface: #181d19;
	--cs-bad: #f0a097; --cs-bad-tint: #3a1d1a; --cs-info: #a9c8ea; --cs-info-tint: #1c2a3a; --cs-on-primary: #0b1a10;
	color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.jb { margin: 0; background: var(--cs-paper); color: var(--cs-ink); font-family: var(--jb-sans); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.jb :where(img, video, iframe) { max-width: 100%; }
.jb :where(img) { height: auto; }
.jb :where(a) { color: var(--cs-green); text-underline-offset: 3px; }
.jb a:focus-visible, .jb button:focus-visible, .jb summary:focus-visible { outline: none; box-shadow: var(--cs-focus); border-radius: 4px; }
.jb :where(h1, h2, h3, h4) { font-family: var(--jb-serif); font-weight: 400; line-height: 1.12; letter-spacing: -.01em; margin: 2rem 0 .75rem; text-wrap: balance; }
.jb :where(h1) { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.1rem); margin-top: 0; }
.jb :where(h2) { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem); }
.jb :where(h3) { font-size: 1.3rem; }
.jb :where(p, ul, ol) { margin: 0 0 1.1rem; }
.jb :where(blockquote) { margin: 1.5rem 0; padding: .5rem 0 .5rem 1.25rem; border-left: 4px solid var(--cs-orange); font-family: var(--jb-serif); font-size: 1.2rem; }
.jb :where(table) { border-collapse: collapse; }
.jb :where(hr) { border: 0; border-top: 1px solid var(--cs-line); margin: 2rem 0; }
.jb .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jb-skip { position: absolute; left: -999px; top: 0; z-index: 100; padding: .75rem 1rem; background: var(--cs-green); color: #fff !important; }
.jb-skip:focus { left: 0; }
.jb-wrap { width: min(100% - 2 * var(--jb-gutter), var(--jb-wrap)); margin-inline: auto; }
.jb-narrow { max-width: 760px; margin-inline: auto; }

/* Header */
.jb-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--cs-paper) 92%, transparent); border-bottom: 1px solid var(--cs-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.jb-header__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.jb-brand { display: inline-flex; align-items: center; text-decoration: none; font-family: var(--jb-serif); font-size: 1.4rem; color: var(--cs-green); }
.jb-brand img { display: block; height: 40px; width: auto; max-width: 180px; object-fit: contain; }
html[data-theme="dark"] .jb-brand img { background: #f1efe7; padding: 3px 8px; border-radius: 6px; }
.jb-nav { display: none; }
.jb-nav ul, .jb-menu ul, .jb-footer ul { list-style: none; margin: 0; padding: 0; }
.jb-nav ul { display: flex; gap: .15rem; }
.jb-nav a { display: block; padding: .5rem .8rem; border-radius: 999px; color: var(--cs-ink); font-weight: 600; font-size: .98rem; text-decoration: none; }
.jb-nav a:hover, .jb-nav .current-menu-item > a { background: var(--cs-green-tint); color: var(--cs-green); }
.jb-nav .sub-menu { display: none; }
.jb-tools { display: flex; align-items: center; gap: .15rem; }
.jb-icon { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--cs-ink) !important; cursor: pointer; }
.jb-icon:hover { background: var(--cs-green-tint); color: var(--cs-green) !important; }
.jb-count { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--cs-orange); color: #17201a; font-size: .72rem; font-weight: 750; line-height: 20px; text-align: center; }
html:not([data-theme="dark"]) .jb-sun, html[data-theme="dark"] .jb-moon { display: none; }
@media (min-width: 960px) { .jb-nav { display: block; } .jb-menu-btn { display: none; } }

/* Slide-in menu */
.jb-menu { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: flex-end; background: rgba(12, 18, 14, .45); }
.jb-menu[hidden] { display: none; }
.jb-menu__panel { width: min(88vw, 380px); height: 100%; overflow-y: auto; padding: 1rem 1.5rem 2rem; background: var(--cs-paper); animation: jb-in .25s ease-out; }
@keyframes jb-in { from { transform: translateX(40px); opacity: 0; } }
.jb-menu__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.jb-menu a { display: block; padding: .9rem .25rem; border-bottom: 1px solid var(--cs-line); color: var(--cs-ink); font-family: var(--jb-serif); font-size: 1.35rem; text-decoration: none; }
.jb-menu .sub-menu a { padding-left: 1.25rem; font-family: var(--jb-sans); font-size: 1.05rem; }
@media (prefers-reduced-motion: reduce) { .jb-menu__panel { animation: none; } }

/* Main */
.jb-main { padding: clamp(1.75rem, 1rem + 3vw, 3.5rem) 0 clamp(3rem, 2rem + 4vw, 5.5rem); min-height: 55vh; }
.jb-pagehead { margin-bottom: 1.75rem; }
.jb-pagehead p { color: var(--cs-muted); max-width: 60ch; }
.jb-eyebrow { margin: 0 0 .4rem; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-orange-ink); }
.jb-content > *:first-child { margin-top: 0; }
.jb-content .alignwide { width: 100%; }
.jb-content .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.jb-content .aligncenter { display: block; margin-inline: auto; text-align: center; }
.jb-content figure { margin: 1.5rem 0; }
.jb-content figcaption { color: var(--cs-muted); font-size: .9rem; }
.jb-content .wp-block-button__link, .jb-btn, .jb input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .7rem 1.3rem; border: 0; border-radius: 6px; background: var(--cs-green); color: var(--cs-on-primary) !important; font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; }
.jb-content .wp-block-button__link:hover, .jb-btn:hover { background: var(--cs-green-press); }
.jb input[type="text"], .jb input[type="email"], .jb input[type="search"], .jb input[type="url"], .jb input[type="tel"], .jb input[type="password"], .jb input[type="number"], .jb textarea, .jb select { max-width: 100%; min-height: 46px; padding: .6rem .75rem; border: 1px solid var(--cs-line); border-radius: 6px; background: var(--cs-surface); color: var(--cs-ink); font: inherit; font-size: 16px; }
.jb-featured { margin: 0 0 2rem; }
.jb-featured img { width: 100%; border-radius: 10px; display: block; }

/* Shop */
.jb-cats { display: flex; gap: .5rem; margin: 0 0 1.5rem; padding: 0 0 .25rem; overflow-x: auto; list-style: none; }
.jb-cats a { display: block; padding: .5rem 1rem; border: 1px solid var(--cs-line); border-radius: 999px; background: var(--cs-surface); color: var(--cs-ink); font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap; }
.jb-cats a:hover, .jb-cats a.is-on { border-color: var(--cs-green); background: var(--cs-green); color: var(--cs-on-primary); }
.jb-shopbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; color: var(--cs-muted); font-size: .95rem; }
.jb-shopbar select { min-height: 40px; padding: .35rem .6rem; }

/* Blog */
.jb-posts { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.jb-post { display: flex; flex-direction: column; gap: .6rem; }
.jb-post__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 8px; background: var(--cs-green-tint); }
.jb-post__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jb-post h2 { margin: 0; font-size: 1.35rem; }
.jb-post h2 a { color: var(--cs-ink); text-decoration: none; }
.jb-post p { margin: 0; color: var(--cs-muted); }
.jb-meta { color: var(--cs-muted); font-size: .9rem; }
.jb-pagination { margin-top: 2.5rem; }
.jb-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.jb-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .75rem; border: 1px solid var(--cs-line); border-radius: 6px; color: var(--cs-ink); text-decoration: none; }
.jb-pagination .page-numbers.current { border-color: var(--cs-green); background: var(--cs-green); color: var(--cs-on-primary); }
.jb-comments { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--cs-line); }
.jb-comments ol { list-style: none; padding: 0; }
.jb-comments .comment-body { margin-bottom: 1.25rem; padding: 1rem; border: 1px solid var(--cs-line); border-radius: 8px; background: var(--cs-surface); }
.jb-comments textarea, .jb-comments input[type="text"], .jb-comments input[type="email"], .jb-comments input[type="url"] { width: 100%; }
.jb-comments label { display: block; font-weight: 600; }

/* Footer (phones first) */
.jb-footer { padding: 2rem 0 calc(1.5rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--cs-line); background: var(--cs-surface); font-size: .95rem; }
.jb-footer__in { display: grid; gap: 1.5rem; }
.jb-footer__brand { display: grid; gap: .4rem; justify-items: start; }
.jb-footer__tag { margin: .25rem 0 0; max-width: 34ch; font-weight: 600; }
.jb-footer address { font-style: normal; color: var(--cs-muted); }
.jb-footer__contact { color: var(--cs-ink); font-weight: 600; text-decoration: none; }
.jb-footer__links ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; border-top: 1px solid var(--cs-line); }
.jb-footer__links li { margin: 0; border-bottom: 1px solid var(--cs-line); }
.jb-footer__links a { display: flex; align-items: center; min-height: 46px; color: var(--cs-ink); font-weight: 600; text-decoration: none; }
.jb-footer__links a:hover, .jb-footer__legal a:hover { color: var(--cs-green); }
.jb-footer__cta { display: grid; gap: .6rem; }
.jb-footer__cta .jmjcs-wa, .jb-footer__app { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 48px; margin: 0; padding: .6rem 1rem; border: 1px solid var(--cs-line); border-radius: 8px; background: var(--cs-paper); color: var(--cs-ink); font: inherit; font-weight: 650; text-decoration: none; box-shadow: none; cursor: pointer; }
.jb-footer__cta .jmjcs-wa:hover, .jb-footer__app:hover { border-color: var(--cs-green); color: var(--cs-green); }
.jb-footer__legal { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: center; margin: 1.5rem 0 0; color: var(--cs-muted); font-size: .85rem; }
.jb-footer__legal a { display: inline-flex; align-items: center; min-height: 40px; color: var(--cs-muted); }
@media (min-width: 800px) {
	.jb-footer { padding-top: 3rem; }
	.jb-footer__in { grid-template-columns: 1.2fr 1.4fr 1fr; gap: 3rem; align-items: start; }
	.jb-footer__links ul { border-top: 0; }
	.jb-footer__links li { border-bottom: 0; }
	.jb-footer__links a { min-height: 36px; font-weight: 500; }
}
.jb-toast { position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); z-index: 80; transform: translateX(-50%); display: flex; gap: .9rem; align-items: center; max-width: calc(100vw - 2rem); padding: .8rem 1.1rem; border-radius: 999px; background: var(--cs-ink); color: var(--cs-paper); font-weight: 600; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); }
.jb-toast[hidden] { display: none; }
.jb-toast a { color: var(--cs-orange); white-space: nowrap; }

/* ---- v1.1.0: content pages (About, Contact and similar) ---- */
.jb-page .jb-content > :where(p, h2, h3, h4, ul, ol, blockquote, form, dl) { max-width: 68ch; }
.jb-content :where(svg):not([width]) { width: 1.35em; height: 1.35em; flex: none; vertical-align: -.28em; color: var(--cs-green); }
.jb-content :where(ul):has(> li > svg) { list-style: none; padding: 0; display: grid; gap: .6rem; }
.jb-content :where(li):has(> svg) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .15rem .75rem; padding: .85rem 1rem; border: 1px solid var(--cs-line); border-radius: 8px; background: var(--cs-surface); }
.jb-content :where(li):has(> svg) > :where(svg) { width: 1.5em; height: 1.5em; }
.jb-content :where(a):has(> svg) { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; margin: 0 .5rem .5rem 0; padding: .6rem 1.1rem; border: 1px solid var(--cs-green); border-radius: 6px; font-weight: 650; text-decoration: none; }
.jb-content :where(a):has(> svg):hover { background: var(--cs-green-tint); }
.jb-content :where(li) :where(a) { margin-left: .3em; }
.jb-content :where(li) > :where(strong:first-child) { margin-right: .3em; }
.jb-content :where(form:not(.woocommerce *)) { display: grid; gap: 1rem; max-width: 560px; }
.jb-content :where(form:not(.woocommerce *)) :where(p) { margin: 0; }
.jb-content :where(form:not(.woocommerce *)) :where(label) { display: block; font-weight: 600; font-size: .95rem; }
.jb-content :where(form:not(.woocommerce *)) :where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"]), textarea, select) { display: block; width: 100%; margin-top: .3rem; }
.jb-content :where(form:not(.woocommerce *)) :where(textarea) { min-height: 140px; }
.jb-content :where(form:not(.woocommerce *)) :where(button, input[type="submit"]) { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .7rem 1.4rem; border: 0; border-radius: 6px; background: var(--cs-green); color: var(--cs-on-primary); font: inherit; font-weight: 650; cursor: pointer; }
.jb-content :where(form:not(.woocommerce *)) :where(input[tabindex="-1"], [aria-hidden="true"]) { position: absolute; left: -9999px; }
.jb-main :where(input, textarea, select):focus { outline: none; border-color: var(--cs-green); box-shadow: var(--cs-focus); }
/* Small screens first: comfortable tap targets, no sideways scroll. */
.jb { overflow-wrap: break-word; }
.jb-header__in { gap: .5rem; }
@media (max-width: 480px) { .jb-brand img { height: 34px; max-width: 140px; } .jb-icon { width: 42px; height: 42px; } }
.jb-content :where(li):has(> svg) > :where(:not(svg)) { grid-column: 2; margin-left: 0; }
.jb-content :where(li):has(> svg) > :where(svg) { grid-row: 1 / span 4; align-self: start; margin-top: .1em; }