/* BodySolution – nova naslovnica. Ideja: boje olimpijskih utega (članarine su ploče na šipci). */

:root {
	--yellow: #ffcb05;   /* brand žuta (logotip) */
	--ink: #000;
	--rubber: #1c1c1c;   /* gumeni pod */
	--chalk: #f2f2ee;    /* magnezij */
	--steel: #9a9a95;
	--red: #c8231a;
	--blue: #1d4fa8;
	--green: #187a34;
	--display: "Big Shoulders Display", "Arial Narrow", sans-serif;
	--text: "Archivo", system-ui, sans-serif;
	--wrap: 1200px;
	--gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.bs {
	margin: 0;
	overflow-x: clip;
	background: var(--chalk);
	color: var(--ink);
	font: 400 17px/1.55 var(--text);
	-webkit-font-smoothing: antialiased;
}
/* osnovna pravila bez specifičnosti (:where), da ne gaze klase komponenti */
:where(.bs) img { max-width: 100%; height: auto; display: block; }
:where(.bs) a { color: inherit; }
:where(.bs) :is(h1, h2, h3, p) { margin: 0; }
.bs :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.bs-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.bs-small { font-size: 14px; color: #55554f; }

.bs-skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--yellow); padding: 10px 14px; z-index: 10; }
.bs-skip:focus { left: 8px; }

/* Gumbi */
.bs-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 24px;
	font: 700 16px/1 var(--text); text-decoration: none;
	border: 2px solid transparent; border-radius: 4px;
	transition: background-color .15s, color .15s;
}
.bs-btn--dark { background: var(--ink); color: var(--yellow); }
.bs-btn--dark:hover { background: var(--rubber); }
.bs-btn--line { border-color: currentColor; }
.bs-btn--line:hover { background: var(--ink); color: var(--yellow); border-color: var(--ink); }
.bs-btn--yellow { background: var(--yellow); color: var(--ink); }
.bs-btn--yellow:hover { background: #fff; }

/* Zaglavlje */
.bs-top {
	position: absolute; inset: 0 0 auto; z-index: 5;
	display: flex; align-items: center; gap: 32px;
	padding: 18px var(--gutter);
}
.bs-logo { display: block; flex: none; width: 116px; height: 55px; overflow: hidden; color: var(--ink); }
.bs-logo svg { display: block; width: 100%; height: 100%; }
.bs-nav { display: flex; gap: 28px; margin-right: auto; }
.bs-nav a, .bs-account a { font-weight: 600; font-size: 15px; text-decoration: none; }

.bs-account { display: flex; gap: 22px; }

/* Hero */
.bs-hero {
	position: relative; z-index: 0;   /* vlastiti stacking context: krug (z -1) ide iznad pozadine heroja, a ispod sprave */
	background: var(--chalk);
	display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: end;
	min-height: min(92vh, 880px);
	padding: 120px 0 0 var(--gutter);
	overflow: hidden;
}
.bs-hero__text { padding-bottom: clamp(48px, 8vh, 96px); max-width: 720px; }
.bs-hero h1 {
	font: 900 clamp(60px, 9.2vw, 140px)/.86 var(--display);
	letter-spacing: -.01em;
	text-transform: uppercase;
}
.bs-hero__lead { margin-top: 36px; max-width: 34ch; font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; }
.bs-hero__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.bs-hero__machine { margin: 0; align-self: end; justify-self: end; position: relative; }
.bs-hero__machine::before {   /* žuta ploča utega iza sprave – jedini žuti element u heroju */
	content: ""; position: absolute; z-index: -1;
	width: 86%; aspect-ratio: 1; left: 8%; top: 4%;
	border-radius: 50%;
	background: radial-gradient(circle, transparent 0 46%, rgb(0 0 0 / .07) 46.2% 47.2%, transparent 47.4%), var(--yellow);
}
.bs-hero__machine img {
	width: min(52vw, 760px);
	mix-blend-mode: multiply;      /* bijela pozadina rendera nestaje u podlozi */
	margin-bottom: -4%;
	margin-right: -6%;
}

/* Članarine kao ploče na šipci */
.bs-plans { padding: clamp(72px, 10vw, 128px) 0 clamp(64px, 8vw, 104px); }
.bs-plans h2, .bs-entry h2, .bs-padel h2 {
	font: 800 clamp(48px, 6.4vw, 88px)/.9 var(--display);
	text-transform: uppercase;
}
.bs-plans__hint { margin-top: 14px; max-width: 46ch; color: #3d3d39; }
.bs-plans__discount { margin-top: 18px; max-width: 60ch; padding: 12px 16px; background: #fff; border-left: 8px solid var(--yellow); }

.bs-bar { --axis: 160px; position: relative; max-width: 1280px; margin: 56px auto 0; padding: 0 var(--gutter); }
.bs-bar::before {   /* šipka */
	content: ""; position: absolute; left: 0; right: 0; top: calc(var(--axis) - 11px); height: 22px;
	background: linear-gradient(#c9c9c4, var(--steel) 45%, #6f6f6b);
	border-radius: 11px;
}
.bs-plates {
	position: relative; list-style: none; margin: 0; padding: 0;
	display: flex; justify-content: center; align-items: flex-start; gap: clamp(12px, 2.4vw, 36px);
}
.bs-plate { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.bs-plate__disc {
	--size: 236px;
	width: var(--size); height: var(--size);
	margin: calc(var(--axis) - var(--size) / 2) 0;   /* centrirano na šipku, ista ukupna visina -> gumbi u liniji */
	position: relative;
	border-radius: 50%;
	background:
		radial-gradient(circle, #d9d9d4 0 13px, #4d4d49 14px 17px, transparent 18px),           /* glavina */
		radial-gradient(circle, transparent 0 calc(var(--size) / 2 - 14px), rgb(0 0 0 / .22) calc(var(--size) / 2 - 13px) calc(var(--size) / 2 - 11px), transparent calc(var(--size) / 2 - 10px)),
		var(--plate);
	color: #fff;
	text-align: center;
	box-shadow: inset 0 0 0 6px rgb(0 0 0 / .14);
}
.bs-plate.is-green  { --plate: var(--green); }
.bs-plate.is-yellow { --plate: var(--yellow); }
.bs-plate.is-yellow .bs-plate__disc { color: var(--ink); }
.bs-plate.is-blue   { --plate: var(--blue); }
.bs-plate.is-red    { --plate: var(--red); }
.bs-plate.is-green  .bs-plate__disc { --size: 236px; }
.bs-plate.is-yellow .bs-plate__disc { --size: 262px; }
.bs-plate.is-blue   .bs-plate__disc { --size: 290px; }
.bs-plate.is-red    .bs-plate__disc { --size: 320px; }

.bs-plate__price, .bs-plate__months, .bs-plate__per { position: absolute; left: 0; right: 0; }
.bs-plate__price  { bottom: calc(50% + 24px); font: 900 calc(var(--size) * .25)/.9 var(--display); }
.bs-plate__months { top: calc(50% + 26px); font: 700 15px/1.2 var(--text); }
.bs-plate__per    { top: calc(50% + 46px); font: 500 13px/1.2 var(--text); opacity: .9; }
.bs-plate__buy { min-width: 132px; }

/* jedini pokret: ploče se otkotrljaju na šipku */
.bs-bar.is-waiting .bs-plate__disc { transform: translateX(-60px) rotate(-100deg); opacity: 0; }
.bs-bar.is-in .bs-plate__disc {
	transform: none; opacity: 1;
	transition: transform .75s cubic-bezier(.2, .9, .25, 1.05), opacity .3s;
	transition-delay: calc(var(--i) * 110ms);
}

.bs-more { margin-top: clamp(64px, 8vw, 96px); }
.bs-more h3 { font: 800 clamp(30px, 3.4vw, 40px)/1 var(--display); text-transform: uppercase; }
.bs-more__list { list-style: none; margin: 20px 0 18px; padding: 0; border-top: 2px solid var(--ink); }
.bs-more__list li {
	display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto auto;
	align-items: baseline; gap: 8px 24px;
	padding: 14px 0; border-bottom: 1px solid #cfcfc9;
}
.bs-more__name { font-weight: 700; }
.bs-more__note { color: #55554f; font-size: 15px; }
.bs-more__price { font: 800 26px/1 var(--display); text-align: right; min-width: 72px; }
.bs-more__buy { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bs-more__buy:hover { background: var(--yellow); }

/* Ulaz */
.bs-entry { background: #fff; padding: clamp(72px, 10vw, 120px) 0; }
.bs-steps {
	list-style: none; counter-reset: step; margin: 48px 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px);
}
.bs-steps li { counter-increment: step; }
.bs-steps li::before {
	content: counter(step);
	display: block; margin-bottom: 12px;
	font: 900 104px/.8 var(--display);
	color: var(--yellow);
	-webkit-text-stroke: 2px var(--ink);
}
.bs-steps h3 { font: 700 22px/1.2 var(--text); margin-bottom: 8px; }
.bs-steps p { max-width: 32ch; color: #2f2f2b; }
.bs-stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.bs-store {
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 52px; padding: 7px 16px 7px 12px;
	background: #000; color: #fff; border: 1px solid #000; border-radius: 9px;
	text-decoration: none; transition: background-color .15s;
}
.bs-store svg { width: 24px; height: 24px; flex: none; }
.bs-store span { display: grid; font: 600 17px/1.05 var(--text); letter-spacing: -.01em; }
.bs-store small { font: 500 11px/1.2 var(--text); letter-spacing: 0; opacity: .85; }
.bs-store:hover { background: #262626; }
.bs-stores--dark .bs-store { border-color: #8a8a85; }
.bs-stores--dark .bs-store:hover { border-color: var(--yellow); }
.bs-stores--stack { flex-direction: column; align-items: flex-start; margin-top: 12px; }
.bs-stores--stack .bs-store { min-width: 190px; }

.bs-ms {
	margin-top: clamp(48px, 6vw, 72px);
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px 40px; align-items: baseline;
	background: var(--rubber); color: var(--chalk);
	padding: clamp(24px, 4vw, 40px);
	border-left: 10px solid var(--yellow);
}
.bs-ms h3 { font: 800 clamp(30px, 3.4vw, 42px)/1 var(--display); text-transform: uppercase; color: var(--yellow); }
.bs-ms p { max-width: 60ch; }

/* Padel */
.bs-padel { background: var(--ink); color: var(--chalk); padding: clamp(64px, 8vw, 104px) 0; }
.bs-padel__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.bs-padel p { margin-top: 16px; max-width: 46ch; color: #c9c9c3; }

/* Podnožje */
.bs-foot { background: var(--rubber); color: var(--chalk); padding: 56px 0 28px; }
.bs-foot__grid { display: grid; grid-template-columns: 1fr 1fr 1.1fr 1fr; gap: 32px; align-items: start; }
.bs-foot__label { font-weight: 700; }
.bs-logo--foot { color: var(--yellow); width: 140px; height: 66px; }
.bs-foot__contact { font-style: normal; display: grid; gap: 10px; }
.bs-foot__links { display: grid; gap: 10px; }
.bs-foot a { text-decoration: none; }
.bs-foot a.bs-store:hover { color: #fff; }
.bs-foot a:hover { color: var(--yellow); }
.bs-foot__bar { margin-top: 40px; padding-top: 22px; border-top: 1px solid #3a3a37; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; font-size: 14px; color: #b4b4ad; }
.bs-foot__bar a { color: #fff; }
.bs-foot__bar img { height: 20px; width: auto; }

/* Aplikacija */
.bs-app { background: #0d0d0c; color: var(--chalk); padding: clamp(72px, 10vw, 120px) 0 clamp(48px, 6vw, 72px); overflow: hidden; }
.bs-app h2 { font: 800 clamp(48px, 6.4vw, 88px)/.9 var(--display); text-transform: uppercase; color: var(--yellow); max-width: 12ch; }
.bs-app__head > p:not(.bs-stores) { margin-top: 18px; max-width: 44ch; color: #cfcfc8; font-size: 18px; }
.bs-app .bs-stores { margin-top: 26px; }
.bs-phones {
	list-style: none; margin: clamp(40px, 6vw, 72px) auto 0; padding: 0 var(--gutter);
	max-width: 1360px;
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px);
}
.bs-phone:nth-child(even) { margin-top: 56px; }   /* lagani ritam, kao telefoni na stolu */
.bs-phone picture { display: block; }
.bs-phone img { width: 100%; filter: drop-shadow(0 0 1px rgb(255 255 255 / .35)) drop-shadow(0 24px 40px rgb(0 0 0 / .5)); }
.bs-phone h3 { margin-top: 22px; font: 700 18px/1.25 var(--text); color: #fff; }
.bs-phone p { margin-top: 6px; font-size: 15px; color: #b4b4ad; max-width: 26ch; }
.bs-app__powered { margin-top: clamp(40px, 5vw, 64px); }
.bs-app__powered a { display: inline-flex; align-items: center; gap: 10px; color: #9a9a93; font-size: 14px; text-decoration: none; }
.bs-app__powered img { width: 96px; height: auto; opacity: .9; }
.bs-app__powered a:hover img { opacity: 1; }

/* Treneri i prehrana */
.bs-coach { background: var(--yellow); padding: clamp(72px, 10vw, 128px) 0; }
.bs-coach__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.bs-coach h2 { font: 800 clamp(48px, 6.4vw, 88px)/.9 var(--display); text-transform: uppercase; max-width: 11ch; }
.bs-coach__lead { margin-top: 20px; max-width: 46ch; font-size: 18px; font-weight: 500; }
.bs-coach__list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; max-width: 54ch; }
.bs-coach__list li { padding-left: 22px; position: relative; }
.bs-coach__note { margin-top: 22px; max-width: 54ch; font-size: 14px; color: #3d3d39; }
.bs-coach__cta { margin-top: 28px; }
.bs-coach__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; background: var(--ink); border-radius: 50%; }
.bs-coach__phone { margin: 0; justify-self: center; width: min(100%, 340px); transform: rotate(3deg); }
.bs-coach__phone img { width: 100%; filter: drop-shadow(0 30px 40px rgb(0 0 0 / .28)); }

/* ===== Ostale stranice: zaglavlje kao traka, naslov stranice, tekst ===== */
.bs-top--bar { position: relative; inset: auto; background: #fff; border-bottom: 1px solid #e3e3de; }
.bs-top, .bs-foot { font-family: var(--text); }
.bs-nav a, .bs-account a { color: var(--ink); }

.bs-foot a { color: inherit; }
.bs-foot p, .bs-foot address { margin: 0; }
.bs-foot .bs-foot__label { margin: 0 0 4px; }

.bs-pagehead { background: var(--yellow); padding: clamp(40px, 7vw, 88px) 0 clamp(28px, 4vw, 48px); }
.bs-pagehead h1 { font: 900 clamp(48px, 7.4vw, 104px)/.88 var(--display); text-transform: uppercase; color: var(--ink); margin: 0; }

.bs-prose { max-width: 760px; padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(56px, 8vw, 96px); font-size: 17px; line-height: 1.65; }
.bs-prose > * + * { margin-top: 1em; }
.bs-prose h2, .bs-prose h3, .bs-prose h4 { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 1; margin-top: 1.6em; }
.bs-prose h2 { font-size: clamp(30px, 3.6vw, 40px); }
.bs-prose h3, .bs-prose h4 { font-size: clamp(22px, 2.4vw, 28px); }
.bs-prose ul, .bs-prose ol { padding-left: 1.3em; }
.bs-prose li + li { margin-top: .35em; }
.bs-prose a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bs-prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.bs-prose th, .bs-prose td { padding: 10px 8px; border-bottom: 1px solid #d8d8d2; text-align: left; vertical-align: top; }
.bs-prose th { border-bottom: 2px solid var(--ink); }
.bs-prose img { max-width: 100%; height: auto; }

/* Kontakt */
.bs-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 88px); padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); }
.bs-contact h2, .bs-faq h2, .bs-about h2 { font: 800 clamp(30px, 3.4vw, 42px)/1 var(--display); text-transform: uppercase; margin: 0 0 18px; }
.bs-contact address { font-style: normal; display: grid; gap: 14px; margin-bottom: 24px; font-size: 18px; }
.bs-contact address a { font-weight: 600; }
.bs-contact__form { background: #fff; padding: clamp(22px, 3vw, 36px); border: 1px solid #e3e3de; border-top: 10px solid var(--yellow); border-radius: 6px; }
.bs-contact__form p { margin: 0 0 14px; }
.bs-contact__form label { display: block; font-weight: 600; font-size: 15px; }
.bs-contact__form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.bs-contact__form textarea {
	display: block; width: 100%; margin-top: 6px; padding: 12px 14px;
	font: 400 16px/1.4 var(--text); color: var(--ink);
	background: var(--chalk); border: 1px solid #cfcfc9; border-radius: 4px;
}
.bs-contact__form textarea { min-height: 150px; resize: vertical; }
.bs-contact__form input:focus, .bs-contact__form textarea:focus { outline: 3px solid var(--yellow); outline-offset: 0; border-color: var(--ink); }
.bs-contact__form input[type="submit"] {
	min-height: 50px; padding: 0 28px; cursor: pointer;
	background: var(--ink); color: var(--yellow); border: 0; border-radius: 4px; font: 700 16px/1 var(--text);
}
.bs-contact__form .wpcf7-not-valid-tip { color: var(--red); font-size: 14px; margin-top: 4px; }
.bs-contact__form .wpcf7-response-output { margin: 14px 0 0; padding: 10px 14px; border-radius: 4px; }

.bs-faq { padding-bottom: clamp(56px, 8vw, 96px); max-width: 900px; }
.bs-faq details { border-top: 1px solid #cfcfc9; }
.bs-faq details:last-of-type { border-bottom: 1px solid #cfcfc9; }
.bs-faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font: 700 18px/1.35 var(--text); }
.bs-faq summary::-webkit-details-marker { display: none; }
.bs-faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font: 800 28px/1 var(--display); }
.bs-faq details[open] summary::after { content: "–"; }
.bs-faq details p { margin: 0 0 20px; max-width: 70ch; color: #2f2f2b; }

/* O nama */
.bs-about { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); }
.bs-about .bs-prose { padding-bottom: 24px; }
.bs-about__facts { margin-top: clamp(40px, 6vw, 72px); background: #fff; border: 1px solid #e3e3de; border-left: 10px solid var(--yellow); padding: 24px 26px; align-self: start; }
.bs-about__facts h2 { font-size: 26px; margin: 0 0 10px; }
.bs-about__facts p { margin: 0 0 18px; }
.bs-about__app { padding-bottom: clamp(56px, 8vw, 96px); }

/* Akcija i sidrena cijena: uvijek sitno, u fontu stranice */
.bs-price-extras { display: grid; gap: 2px; font: 500 12px/1.35 var(--text); color: #55554f; text-align: center; max-width: 24ch; }
.bs-price-extras del { opacity: .9; }
.bs-price-extras .amount, .bs-price-extras bdi { font: inherit; color: inherit; }
.sidrena-cijena { display: block; font: 500 12px/1.35 var(--text) !important; color: #55554f; opacity: 1; letter-spacing: 0; text-transform: none; }
.sidrena-cijena .amount, .sidrena-cijena bdi { font: inherit !important; color: inherit !important; }
.bs-more__list .bs-price-extras { grid-column: 1 / -1; text-align: left; max-width: none; }
.bs-pricelist__price del { font-size: 15px; opacity: .7; margin-right: 6px; }
.bs-pricelist__price ins { text-decoration: none; }
.bs-pricelist__price .sidrena-cijena { margin-top: 4px; white-space: normal; }
.bs-app .bs-price-extras, .bs-padel .bs-price-extras { color: #b4b4ad; }

/* Cjenik */
.bs-pricelist table td:first-child { font-weight: 600; }
.bs-pricelist__price { font: 800 22px/1 var(--display); white-space: nowrap; }
.bs-pricelist td:last-child { text-align: right; }
.bs-pricelist td:last-child a { font-weight: 700; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Gumb kontakt obrasca (jači od Woodmartova inline stila) */
.bs-contact__form input[type="submit"].wpcf7-submit {
	background: var(--ink) !important; color: var(--yellow) !important; border-radius: 4px !important;
	text-transform: none !important; font: 700 16px/1 var(--text) !important; min-height: 50px; padding: 0 28px !important;
}

/* Naslov na stranicama trgovine (košarica, blagajna, moj račun): bez stock fotografije */
body.bs-chrome .wd-page-title .wd-page-title-bg { background: #0d0d0c !important; }
body.bs-chrome .wd-page-title .wd-page-title-bg img,
body.bs-chrome .wd-page-title .wd-page-title-bg picture { display: none !important; }
body.bs-chrome .wd-page-title .entry-title,
body.bs-chrome .wd-page-title .title { font-family: var(--display) !important; font-weight: 900 !important; text-transform: uppercase; color: var(--yellow) !important; }

/* ===== Zaglavlje: žuti naglasci, izbornik i ikone ===== */
.bs-top--bar { border-bottom: 4px solid var(--yellow); }
.bs-nav { gap: 6px; }
.bs-nav a {
	padding: 9px 13px; border-radius: 4px; text-decoration: none !important;
	transition: background-color .15s;
}
@media (hover: hover) { .bs-nav a:hover { background: var(--yellow); } }
.bs-nav a[aria-current="page"] { background: var(--yellow); }
.bs-hero ~ * .bs-nav a:hover, .bs-top--hero @media (hover: hover) { .bs-nav a:hover { background: var(--yellow); } }
.bs-account { gap: 8px; align-items: center; }
.bs-icon {
	position: relative; display: inline-grid; place-items: center;
	width: 44px; height: 44px; border-radius: 50%;
	color: var(--ink); text-decoration: none !important;
	transition: background-color .15s;
}
.bs-icon svg { width: 24px; height: 24px; }
.bs-icon[aria-current="page"] { background: var(--yellow); }
@media (hover: hover) { .bs-icon:hover { background: var(--yellow); } }
.bs-menu-btn { display: none; border: 0; background: none; cursor: pointer; padding: 0; }
.bs-menu-btn__close { display: none; }
.bs-cart__count {
	position: absolute; top: 2px; right: 0;
	min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
	background: var(--yellow); color: var(--ink); border: 2px solid #fff;
	font: 700 11px/16px var(--text); text-align: center;
}
.bs-icon[aria-current="page"] .bs-cart__count { background: var(--ink); color: var(--yellow); }
@media (max-width: 860px) {
	.bs-account { margin-left: auto; gap: 4px; }
	.bs-icon { width: 44px; height: 44px; }
	/* bez JS-a: linkovi u dva reda, dovoljno veliki za prst */
	.bs-nav { display: flex; flex-wrap: wrap; gap: 4px; }
	.bs-nav a { padding: 10px 12px; font-size: 15px !important; white-space: nowrap; }
	/* s JS-om: gumb otvara popis velikih linkova ispod zaglavlja */
	.bs-top--js .bs-menu-btn { display: inline-grid; }
	.bs-top--js .bs-nav { display: none; }
	.bs-top--js.is-open .bs-nav {
		display: grid; gap: 0; order: 3; width: calc(100% + 2 * var(--gutter)); margin: 4px calc(-1 * var(--gutter)) -18px;
		background: #fff; border-top: 1px solid #e3e3de; border-bottom: 4px solid var(--yellow);
		box-shadow: 0 18px 30px rgb(0 0 0 / .12);
	}
	.bs-top--js.is-open .bs-nav a { padding: 0 var(--gutter); min-height: 52px; display: flex; align-items: center; font-size: 18px !important; font-weight: 700; border-bottom: 1px solid #efefea; border-radius: 0; }
	.bs-top--js.is-open .bs-nav a:last-child { border-bottom: 0; }
	.bs-top--js.is-open .bs-nav a[aria-current="page"] { background: var(--yellow); }
	.bs-top--js.is-open .bs-menu-btn { background: var(--yellow); }
	.bs-top--js.is-open .bs-menu-btn__open { display: none; }
	.bs-top--js.is-open .bs-menu-btn__close { display: inline; }
	.bs-top--hero.is-open { background: var(--chalk); }
}
@media (prefers-reduced-motion: reduce) { .bs-nav a, .bs-icon { transition: none; } }

/* ===== WooCommerce stranice: Woodmartovo zaglavlje/podnožje zamijenjeno našim ===== */
body.bs-chrome .whb-header,
body.bs-chrome .whb-sticky-header,
body.bs-chrome footer.wd-footer,
body.bs-chrome .wd-toolbar,
body.bs-chrome .scrollToTop { display: none !important; }
body.bs-chrome .bs-chrome-top .bs-top { z-index: 50; }
body.bs-chrome .bs-chrome-foot { margin-top: 0; }
body.bs-chrome .wd-page-title { margin-top: 0 !important; }

@media (max-width: 860px) {
	.bs-contact, .bs-about { grid-template-columns: 1fr; }
	.bs-about__facts { margin-top: 0; }
}

/* Tablet */
@media (max-width: 1100px) {
	.bs-bar { --axis: 130px; }
	.bs-plate.is-green  .bs-plate__disc { --size: 190px; }
	.bs-plate.is-yellow .bs-plate__disc { --size: 210px; }
	.bs-plate.is-blue   .bs-plate__disc { --size: 232px; }
	.bs-plate.is-red    .bs-plate__disc { --size: 256px; }
	.bs-plate__per { font-size: 12px; }
}

/* Mobitel */
@media (max-width: 860px) {
	.bs-top { flex-wrap: wrap; gap: 12px 20px; }
	.bs-nav { order: 3; width: 100%; }
	.bs-account a { font-size: 14px; }
	.bs-logo { width: 92px; height: 44px; }
	.bs-hero { grid-template-columns: 1fr; padding: 104px var(--gutter) 0; min-height: 0; }
	.bs-hero__text { padding-bottom: 8px; }
	.bs-hero__machine { justify-self: center; }
	.bs-hero__machine img { width: min(92vw, 520px); margin: 0 0 -6%; }

	.bs-bar::before { display: none; }
	.bs-plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
	.bs-plate .bs-plate__disc,
	.bs-plate.is-green .bs-plate__disc, .bs-plate.is-yellow .bs-plate__disc,
	.bs-plate.is-blue .bs-plate__disc, .bs-plate.is-red .bs-plate__disc { --size: min(42vw, 180px); margin: 0; }
	.bs-plate__months { font-size: 13px; top: calc(50% + 22px); }
	.bs-plate__per { font-size: 11px; top: calc(50% + 38px); }
	.bs-plate__price { bottom: calc(50% + 20px); }
	.bs-plate__buy { min-width: 0; width: min(42vw, 180px); }

	.bs-more__list li { grid-template-columns: minmax(0, 1fr) auto auto; }
	.bs-more__note { grid-column: 1 / -1; grid-row: 2; font-size: 14px; }
	.bs-steps { grid-template-columns: 1fr; }
	.bs-steps li::before { font-size: 80px; }
	.bs-ms { grid-template-columns: 1fr; }
	.bs-foot__grid { grid-template-columns: 1fr; }
	.bs-phones {
		display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
		padding: 0 var(--gutter) 8px; scroll-padding: 0 var(--gutter);
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.bs-phones::-webkit-scrollbar { display: none; }
	.bs-phone { flex: 0 0 68vw; max-width: 300px; scroll-snap-align: start; }
	.bs-phone:nth-child(even) { margin-top: 0; }
	.bs-coach__grid { grid-template-columns: 1fr; }
	.bs-coach__phone { width: min(70vw, 300px); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.bs-btn { transition: none; }
}
