/**
 * Storefront header and footer. Colors and fonts come from the brand variables
 * (--fdk-*) printed from the plugin settings; nothing about the business lives here.
 * Loaded only on store screens (home, cart, checkout, policies).
 *
 * Layering note: the header must NOT create its own stacking context (no z-index on it),
 * so the delivery card (z-index 6) paints above the wine background while the tab panels
 * (z-index 20) paint above the card.
 */

:root {
	--fdk-ink: #1B1011;
	--fdk-muted: #3A2C2E;
	--fdk-line: #EADFDC;
	--fdk-outline: #111111;
	--fdk-card: #FFFFFF;
	--fdk-radius-card: 24px;
}

/* The theme's own header/footer are replaced on store screens. */
body.fdk-store #masthead,
body.fdk-store .site-header,
body.fdk-store #colophon,
body.fdk-store .site-footer {
	display: none !important;
}

body.fdk-home .entry-header {
	display: none;
}

body.fdk-store {
	background: var(--fdk-surface);
	color: var(--fdk-ink);
	font-family: var(--fdk-font-text);
}

/* ---------- Header ---------- */
.fdk-header {
	position: relative;
	box-sizing: border-box;
	background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--fdk-brand) 82%, #fff) 0%, var(--fdk-brand) 55%, color-mix(in srgb, var(--fdk-brand) 85%, #000) 100%);
	background-color: var(--fdk-brand);
	color: var(--fdk-on-brand);
	font-family: var(--fdk-font-text);
	padding: 24px 16px 68px;
	text-align: center;
}

.fdk-header *,
.fdk-header *::before,
.fdk-header *::after {
	box-sizing: border-box;
}

.fdk-header__brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	text-decoration: none;
	padding: 6px 0 10px;
}

.fdk-header__brand img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(78vw, 420px);
	max-height: 150px;
}

.fdk-header__name {
	font-family: var(--fdk-font-title);
	font-weight: 800;
	font-size: clamp(38px, 8vw, 58px);
	letter-spacing: 0.06em;
	line-height: 1.05;
}

/* ---------- Tabs ---------- */
.fdk-nav {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 4px;
	max-width: 640px;
	margin: 0 auto;
}

.fdk-tab {
	position: relative;
}

.fdk-tab__button {
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	font-family: var(--fdk-font-text);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 10px 18px;
	transition: background 0.15s;
}

.fdk-tab__button:hover,
.fdk-tab__button[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.18);
}

.fdk-tab__button:focus-visible {
	outline: 2px solid var(--fdk-accent);
	outline-offset: 2px;
}

/* ---------- Panels (open right under their tab, above the delivery card) ---------- */
.fdk-panel {
	position: absolute;
	z-index: 20;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	width: 300px;
	background: var(--fdk-card);
	color: var(--fdk-ink);
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(40, 0, 10, 0.28);
	padding: 18px;
	text-align: left;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
}

.fdk-panel[hidden] {
	display: none;
}

.fdk-panel::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 50%;
	width: 14px;
	height: 14px;
	background: var(--fdk-card);
	transform: translateX(-50%) rotate(45deg);
}

.fdk-panel__title {
	margin: 0 0 8px;
	font-family: var(--fdk-font-title);
	font-weight: 800;
	font-size: 16px;
	color: var(--fdk-brand);
}

.fdk-panel p {
	margin: 0 0 8px;
	color: var(--fdk-muted);
}

.fdk-panel__list,
.fdk-panel__contact {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fdk-panel__list li a {
	display: block;
	padding: 10px 0;
	border-top: 1px solid var(--fdk-line);
	color: var(--fdk-brand);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
}

.fdk-panel__list li:first-child a {
	border-top: 0;
}

.fdk-panel__contact li {
	padding: 4px 0;
}

.fdk-panel__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fdk-muted);
}

.fdk-panel a {
	color: var(--fdk-brand);
	font-weight: 700;
}

/* Anchors land with a little air above the section. */
.fdk-section,
[id^="categoria-"] {
	scroll-margin-top: 16px;
}

/* ---------- Footer ---------- */
.fdk-footer {
	background: var(--fdk-brand);
	color: var(--fdk-on-brand);
	text-align: center;
	padding: 28px 16px 36px;
	margin-top: 48px;
	font-family: var(--fdk-font-text);
}

.fdk-footer__link {
	color: inherit;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-decoration: underline;
}

.fdk-footer__copy {
	margin: 10px 0 0;
	font-weight: 500;
	font-size: 12px;
	opacity: 0.85;
}

/* ---------- Phones ---------- */
@media (max-width: 859px) {
	.fdk-tab {
		position: static;
	}

	.fdk-tab__button {
		padding: 9px 12px;
		font-size: 12px;
		letter-spacing: 0.1em;
	}

	/* Full-width panel under the whole menu. */
	.fdk-panel {
		left: 0;
		right: 0;
		width: auto;
		transform: none;
		margin-top: 0;
		top: calc(100% + 6px);
	}

	.fdk-panel::before {
		display: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}