/**
 * Buttons, chips and tab pills — the design's shared interactive vocabulary.
 * Every value and hover state is lifted from the mockups' style / style-hover pairs.
 *
 * @package Geras_Custom
 */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var( --space-10 );
	padding: var( --space-12 ) var( --space-24 );
	border-radius: var( --radius-pill );
	font-family: var( --font-body );
	font-size: var( --fs-14-5 );
	font-weight: var( --fw-black );
	line-height: 1;
	cursor: pointer;
	transition: transform .22s, background .22s, box-shadow .22s;
}

.btn svg {
	flex: 0 0 auto;
}

.btn--lg {
	padding: var( --space-13 ) var( --space-26 );
}

.btn--xl {
	padding: var( --space-14 ) var( --space-30 );
}

/* Honey gradient — the main call to action. */
.btn--primary {
	background: var( --gradient-honey );
	color: var( --c-cocoa-900 );
	box-shadow: var( --shadow-btn );
}

.btn--primary:hover {
	color: var( --c-cocoa-900 );
	transform: translateY( -2px );
}

/* Cocoa solid — the secondary action (form submit, "Dohodnúť odber"). */
.btn--dark {
	background: var( --c-cocoa-700 );
	color: var( --c-sand-100 );
	box-shadow: var( --shadow-btn-dark );
}

.btn--dark:hover {
	background: var( --c-cocoa-900 );
	color: var( --c-sand-100 );
	transform: translateY( -2px );
}

/* Outlined — sits next to a primary button. */
.btn--ghost {
	color: var( --color-heading );
	box-shadow: var( --ring-cocoa-soft );
}

.btn--ghost:hover {
	color: var( --color-heading );
	box-shadow: var( --ring-cocoa );
	transform: translateY( -2px );
}

/* Filter / category pills under a hero. */
.chip {
	display: inline-flex;
	align-items: center;
	gap: var( --space-6 );
	padding: var( --space-6 ) var( --space-13 );
	border-radius: var( --radius-pill );
	background: var( --c-white-a75 );
	box-shadow: var( --ring-hairline );
	font-size: var( --fs-12-5 );
	font-weight: var( --fw-bold );
	color: var( --color-heading );
	transition: background .2s, box-shadow .2s, transform .2s;
}

.chip:hover {
	background: var( --c-white );
	color: var( --color-heading );
	box-shadow: var( --ring-honey );
	transform: translateY( -2px );
}

.chip--solid {
	padding: var( --space-9 ) var( --space-16 );
	background: var( --c-white-a80 );
	font-size: var( --fs-13 );
	font-weight: var( --fw-black );
}

.chip--solid:hover {
	background: var( --c-white );
	box-shadow: var( --ring-hairline );
	transform: none;
}

/* Highlighted stat chip: "100 % Poctivá ručná výroba". */
.chip--stat {
	gap: var( --space-10 );
	padding: var( --space-10 ) var( --space-18 );
	background: var( --c-white );
	box-shadow: var( --shadow-card ), var( --ring-hairline );
	font-size: var( --fs-13-5 );
}

.chip__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var( --space-34 );
	padding: var( --space-3 ) var( --space-8 );
	border-radius: var( --radius-pill );
	background: var( --c-honey-100 );
	color: var( --color-accent-deep );
	font-size: var( --fs-11 );
	font-weight: var( --fw-black );
}

/* Segmented tab / sort control. */
.tabs {
	display: inline-flex;
	align-items: center;
	gap: var( --space-4 );
	padding: var( --space-5 );
	border-radius: var( --radius-pill );
	background: var( --c-sand-a55 );
	box-shadow: var( --ring-hairline );
}

.tabs__btn {
	padding: var( --space-11 ) var( --space-26 );
	border-radius: var( --radius-pill );
	font-size: var( --fs-15 );
	font-weight: var( --fw-black );
	color: var( --color-heading );
	transition: background .25s, box-shadow .25s;
}

.tabs__btn:hover {
	background: var( --c-white-a75 );
	color: var( --color-heading );
}

.tabs__btn[data-active="true"],
.tabs__btn[aria-selected="true"],
.tabs__btn.is-active {
	background: var( --surface-page );
	color: var( --c-cocoa-900 );
	box-shadow: var( --shadow-tab-active ), var( --ring-honey );
}

.tabs--sm .tabs__btn {
	padding: var( --space-10 ) var( --space-20 );
	font-size: var( --fs-14 );
}

/* Round icon button — the scroller arrows and the product prev/next pair. */
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --space-44 );
	height: var( --space-44 );
	border-radius: var( --radius-circle );
	background: var( --c-white );
	color: var( --color-heading );
	box-shadow: var( --shadow-card ), var( --ring-hairline );
	transition: background .2s, box-shadow .2s, transform .2s;
}

.icon-btn:hover {
	color: var( --color-heading );
	box-shadow: var( --shadow-card ), var( --ring-honey );
	transform: translateY( -2px );
}

.icon-btn[disabled],
.icon-btn.is-disabled {
	opacity: .35;
	pointer-events: none;
}

/* Tap targets stay reachable on touch (responsive.md gate). */
@media ( max-width: 767px ) {

	.btn {
		min-height: var( --space-44 );
	}

	.tabs__btn {
		min-height: var( --space-44 );
	}
}