/*
Theme Name: Street Fish
Description: Child theme of Blocksy for the Street Fish webshop. Presentation only; business logic lives in the street-fish-core plugin.
Author: Street Fish
Template: blocksy
Version: 0.1.0
Requires at least: 6.7
Requires PHP: 8.3
Text Domain: street-fish
Domain Path: /languages
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Custom styles go below. Prefer Blocksy Customizer settings first; use CSS only for what the Customizer can't do. */

:root {
	/* brand colors from the store sign (palette itself: theme-setup.php) */
	--sf-navbar-bg: #2f3d1c;     /* dark green nav bar (also set in theme-setup.php) */
	--sf-navbar-hover: #243016;
	--sf-green-light: #8a9a4b;
	--sf-yellow: #e3ac24;        /* mustard, like "FISH" on the sign */
	--sf-yellow-hover: #cf9a17;
	--sf-charcoal: #1f2120;      /* like "STREET" on the sign */
	--sf-search-radius: 6px;
}

/* ---------- Header search box ---------- */
.sf-search {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 620px;
	height: 48px;
}

/* input and button share the same fixed height (Blocksy's form styles set their own height) */
.sf-search .sf-search__input {
	flex: 1;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0 18px;
	box-sizing: border-box;
	border: 2px solid var(--sf-navbar-bg);
	border-right: 0;
	border-radius: var(--sf-search-radius) 0 0 var(--sf-search-radius);
	background: #fff;
	font-size: 15px;
}

.sf-search .sf-search__input:focus {
	outline: none;
	border-color: var(--sf-navbar-bg);
	box-shadow: inset 0 0 0 1px var(--sf-navbar-bg);
}

.sf-search .sf-search__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: 0;
	border-radius: 0 var(--sf-search-radius) var(--sf-search-radius) 0;
	background: var(--sf-navbar-bg);
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease;
}

.sf-search .sf-search__button:hover {
	background: var(--theme-palette-color-1);
}

/* the header Text element (search) follows the logo and takes the free space up to the right-hand items */
.ct-header [data-row*="middle"] [data-column="start"] {
	flex: 1;
	min-width: 0;
}

.ct-header [data-id="text"] {
	flex: 1;
	min-width: 0;
	margin-inline: 40px 32px;
}

@media (max-width: 999.98px) {
	.sf-search {
		width: 100%;
	}

	/* mobile: logo only, no tagline */
	.ct-header .site-description {
		display: none;
	}
}

/* ---------- Nav bar (bottom header row) ---------- */
/* white text in every state (normal, hover, current page, current ancestor), never the accent color */
.ct-header [data-row*="bottom"] [data-id="menu"] > ul > li > a {
	--theme-link-initial-color: #fff;
	--theme-link-hover-color: #fff;
	--theme-link-active-color: #fff;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.ct-header [data-row*="bottom"] [data-id="menu"] > ul > li:not(.sf-catalog):hover > a,
.ct-header [data-row*="bottom"] [data-id="menu"] > ul > li:not(.sf-catalog)[class*="current"] > a {
	background: var(--sf-navbar-hover);
}

/* catalog button: orange block with hamburger icon, text and a down arrow, padded on both sides
   (Blocksy removes the first item's left padding, hence the long selector) */
.ct-header [data-row*="bottom"] [data-column="start"] [data-items="primary"] [data-menu] > ul > li.sf-catalog > a.ct-menu-link {
	--theme-link-initial-color: var(--sf-charcoal);
	--theme-link-hover-color: var(--sf-charcoal);
	--theme-link-active-color: var(--sf-charcoal);
	gap: 12px;
	padding-inline: 26px 22px;
	background: var(--sf-yellow);
	color: var(--sf-charcoal);
	font-weight: 700;
}

.ct-header [data-row*="bottom"] [data-id="menu"] > ul > li.sf-catalog:hover > a {
	background: var(--sf-yellow-hover);
}

.ct-header .sf-catalog .sf-catalog__icon,
.ct-header .sf-catalog .sf-catalog__arrow {
	flex-shrink: 0;
}

.ct-header .sf-catalog .sf-catalog__arrow {
	transition: transform 0.15s ease;
}

.ct-header .sf-catalog:hover .sf-catalog__arrow,
.ct-header .sf-catalog:focus-within .sf-catalog__arrow {
	transform: rotate(180deg);
}

/* no Blocksy hover underline on the catalog button */
.ct-header .sf-catalog > .ct-menu-link::before,
.ct-header .sf-catalog > .ct-menu-link::after {
	display: none;
}

/* ---------- Accent font (self-hosted, SIL Open Font License: assets/fonts/OFL.txt) ---------- */
/* tall condensed capitals like "STREET" in the logo; used only for short accents (titles, labels, badges) */
@font-face {
	font-family: "Bebas Neue";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/bebas-neue-latin-ext.woff2") format("woff2");
	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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Bebas Neue";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/bebas-neue-latin.woff2") format("woff2");
	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;
}

:root {
	--sf-font-accent: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
	--sf-tile-bg: #eceee0;
}

/* ---------- Top bar: store status · info links · "Întreabă un pescar" (inc/store-info.php) ---------- */
.ct-header [data-row*="top"] .ct-menu-link {
	font-size: 13px;
}

.ct-header [data-row*="top"] [data-id="menu-secondary"],
.ct-header [data-row*="top"] [data-id="menu-secondary"] > ul {
	width: 100%;
}

.ct-header [data-row*="top"] [data-id="menu-secondary"] > ul > li.sf-topbar-store {
	margin-right: auto;
}

.sf-store,
.sf-ask {
	gap: 7px;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.sf-store__icon {
	color: var(--theme-palette-color-1);
}

.sf-store__name {
	font-weight: 600;
}

.sf-store-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 4px;
	font-weight: 400;
	opacity: 0.85;
}

.sf-store-status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #b0412e;
}

.sf-store-status.is-open::before {
	background: #3d9a4b;
	box-shadow: 0 0 0 3px rgba(61, 154, 75, 0.18);
}

.ct-header [data-row*="top"] .sf-topbar-ask {
	margin-left: 10px;
}

.ct-header [data-row*="top"] .sf-ask.ct-menu-link {
	height: auto;
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--sf-navbar-bg);
	color: #fff;
}

.ct-header [data-row*="top"] .sf-ask.ct-menu-link:hover {
	background: var(--sf-navbar-hover);
	color: #fff;
}

.sf-ask__phone {
	color: var(--sf-yellow);
	font-weight: 700;
}

/* mobile off-canvas menu: same block on top */
.sf-offcanvas-store {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
	font-size: 14px;
}

.sf-offcanvas-store a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
}

.sf-offcanvas-store .sf-ask {
	align-self: flex-start;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--sf-yellow);
	color: var(--sf-charcoal);
	font-weight: 600;
}

.sf-offcanvas-store .sf-ask__phone {
	color: var(--sf-charcoal);
}

/* ---------- Nav bar: lake depth-contour texture + a mustard line under it ---------- */
.ct-header [data-row*="bottom"] {
	position: relative;
}

.ct-header [data-row*="bottom"]::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("assets/images/contours.svg") center / 1600px auto repeat-x;
	pointer-events: none;
}

.ct-header [data-row*="bottom"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 2;
	height: 1px;
	background: var(--sf-yellow);
	pointer-events: none;
}

/* catalog button label in the accent font */
.ct-header .sf-catalog > .ct-menu-link > span {
	font-family: var(--sf-font-accent);
	font-size: 22px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0.04em;
	line-height: 1;
}

/* ---------- Catalog mega menu (inc/catalog-menu.php) ---------- */
/* the panel is positioned against the nav bar container, so it spans the full content width */
.ct-header [data-row*="bottom"] .ct-container {
	position: relative;
}

.ct-header [data-row*="bottom"] nav,
.ct-header [data-row*="bottom"] .menu,
.ct-header [data-row*="bottom"] .menu > li.sf-catalog {
	position: static;
}

.sf-mega {
	--sf-mega-h: 500px;
	--sf-season-h: 0px;
	position: absolute;
	top: calc(100% + 1px);
	left: 0;
	right: 0;
	z-index: 60;
	background: #fff;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 22px 48px rgba(31, 33, 32, 0.22);
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	transform: translateY(6px);
	/* small delay before hiding, so moving the mouse into the panel doesn't close it */
	transition: opacity 0.15s ease 0.12s, transform 0.15s ease 0.12s, visibility 0s linear 0.27s;
}

/* invisible bridge over the line under the nav bar, so the mouse can move from the button into the panel */
.sf-mega::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	right: 0;
	height: 2px;
}

.sf-catalog:hover > .sf-mega,
.sf-catalog:focus-within > .sf-mega {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

.sf-mega__methods {
	width: 290px;
	min-height: var(--sf-mega-h);
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background: var(--theme-palette-color-6);
}

.sf-mega__method {
	position: static;
}

.sf-mega__method-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 18px;
	color: var(--theme-palette-color-4);
	font-size: 15px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

.sf-mega__method-link::after {
	content: "›";
	margin-left: auto;
	font-size: 18px;
	line-height: 1;
	opacity: 0.5;
}

.sf-mega__method-icon {
	display: grid;
	flex: 0 0 34px;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	color: var(--theme-palette-color-2);
	overflow: hidden;
	transition: background 0.15s ease, color 0.15s ease;
}

.sf-mega__method-icon .sf-mega__svg {
	width: 22px;
	height: 22px;
}

.sf-mega__method--all .sf-mega__method-link {
	margin-top: 4px;
	padding-left: 64px;
	color: var(--theme-palette-color-1);
	font-weight: 600;
}

.sf-mega__method--all .sf-mega__method-link::after {
	content: "→";
}

.sf-mega__method:hover > .sf-mega__method-link,
.sf-mega__method:focus-within > .sf-mega__method-link,
.sf-mega__methods:not(:hover):not(:focus-within) > .sf-mega__method:first-child > .sf-mega__method-link {
	background: #fff;
	color: var(--theme-palette-color-1);
}

.sf-mega__method:hover .sf-mega__method-icon,
.sf-mega__method:focus-within .sf-mega__method-icon,
.sf-mega__methods:not(:hover):not(:focus-within) > .sf-mega__method:first-child .sf-mega__method-icon {
	background: var(--sf-yellow);
	color: var(--sf-charcoal);
}

.sf-mega__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: var(--sf-season-h, 0px); /* stops above the seasonal message */
	left: 290px;
	display: none;
	flex-direction: column;
}

/* the hovered/focused method shows its panel; with nothing hovered, the first one is shown */
.sf-mega__method:hover > .sf-mega__panel,
.sf-mega__method:focus-within > .sf-mega__panel,
.sf-mega__methods:not(:hover):not(:focus-within) > .sf-mega__method:first-child > .sf-mega__panel {
	display: flex;
}

/* banner: category image (Produse → Categorii → Miniatură) or the method icon on the depth contours */
.sf-mega__banner {
	position: relative;
	display: flex;
	flex: 0 0 96px;
	align-items: center;
	gap: 20px;
	padding: 0 32px;
	background: var(--sf-navbar-bg) url("assets/images/contours.svg") 30% 40% / 1200px auto;
	color: #fff;
	overflow: hidden;
}

.sf-mega__banner.has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(31, 33, 32, 0.78) 0%, rgba(31, 33, 32, 0.35) 60%, rgba(31, 33, 32, 0.1) 100%);
}

.sf-mega__banner-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sf-mega__banner-icon {
	position: absolute;
	right: 190px;
	top: 50%;
	width: 150px;
	height: 150px;
	color: #fff;
	opacity: 0.13;
	transform: translateY(-50%) rotate(-8deg);
	stroke-width: 1.2;
}

.sf-mega__banner-text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
}

.sf-mega .sf-mega__title {
	color: #fff;
	font-family: var(--sf-font-accent);
	font-size: 42px;
	font-weight: 400;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0.02em;
}

.sf-mega__count {
	margin-top: 4px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 13px;
}

.sf-mega .sf-mega__all {
	position: relative;
	z-index: 1;
	margin-left: auto;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--sf-yellow);
	color: var(--sf-charcoal);
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.sf-mega .sf-mega__all:hover {
	background: var(--sf-yellow-hover);
	color: var(--sf-charcoal);
}

.sf-mega__body {
	display: grid;
	flex: 1;
	grid-template-columns: minmax(0, 1fr) 230px;
	gap: 28px;
	padding: 24px 30px;
	overflow-y: auto;
}

.sf-mega__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	align-content: start;
	gap: 20px 22px;
}

.sf-mega__tile-head {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--theme-palette-color-4);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: 0;
}

.sf-mega__tile-icon {
	display: grid;
	flex: 0 0 48px;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--sf-tile-bg);
	color: var(--theme-palette-color-2);
	overflow: hidden;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.sf-mega__tile-icon .sf-mega__svg {
	width: 30px;
	height: 30px;
}

.sf-mega__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sf-mega__tile-head:hover {
	color: var(--theme-palette-color-1);
}

.sf-mega__tile-head:hover .sf-mega__tile-icon {
	background: var(--sf-yellow);
	color: var(--sf-charcoal);
	transform: rotate(-6deg);
}

.sf-mega__links {
	margin: 6px 0 0;
	padding: 0 0 0 60px;
	list-style: none;
}

.sf-mega__links a {
	display: block;
	padding: 2px 0;
	color: var(--theme-palette-color-3);
	font-size: 13.5px;
	text-transform: none;
	letter-spacing: 0;
}

.sf-mega__links a:hover {
	color: var(--theme-palette-color-1);
}

.sf-mega__more {
	font-weight: 600;
}

/* right column: top brands + one recommended product */
.sf-mega__side {
	padding-left: 24px;
	border-left: 1px solid #ecebe3;
}

.sf-mega__side-title {
	margin: 0 0 10px;
	color: var(--theme-palette-color-3);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.sf-mega .sf-mega__brands {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.sf-mega__brands a {
	display: block;
	padding: 4px 12px;
	border: 1px solid #d9dccb;
	border-radius: 999px;
	color: var(--theme-palette-color-4);
	font-size: 13px;
	text-transform: none;
	letter-spacing: 0;
}

.sf-mega__brands a:hover {
	border-color: var(--theme-palette-color-1);
	color: var(--theme-palette-color-1);
}

.sf-mega__product {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--theme-palette-color-4);
	text-transform: none;
	letter-spacing: 0;
}

.sf-mega__product img {
	width: 100%;
	height: 110px;
	border-radius: 8px;
	background: var(--theme-palette-color-6);
	object-fit: contain;
}

.sf-mega__product-name {
	display: -webkit-box;
	overflow: hidden;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.sf-mega__product-price {
	font-size: 14px;
	font-weight: 700;
}

.sf-mega__product-price del {
	margin-right: 4px;
	font-weight: 400;
	opacity: 0.6;
}

.sf-mega__product:hover .sf-mega__product-name {
	color: var(--theme-palette-color-1);
}

/* seasonal message (Customizer → Street Fish – Store), one line of fixed height */
.sf-mega.has-season {
	--sf-season-h: 46px;
}

.sf-season {
	display: flex;
	align-items: center;
	gap: 12px;
	height: var(--sf-season-h);
	margin: 0;
	padding: 0 24px;
	overflow: hidden;
	white-space: nowrap;
	border-top: 1px solid #efe3bd;
	background: #fbf4df;
	color: var(--sf-charcoal);
	font-size: 14px;
}

.sf-season__label {
	color: var(--theme-palette-color-2);
	font-family: var(--sf-font-accent);
	font-size: 21px;
	line-height: 1;
	letter-spacing: 0.04em;
}

.sf-mega .sf-season__link {
	margin-left: auto;
	color: var(--theme-palette-color-1);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

/* smaller desktops / laptops: keep the top bar on one line and the tiles in columns */
@media (max-width: 1199.98px) {
	.sf-store__name,
	.sf-mega__side {
		display: none;
	}

	.sf-mega__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.sf-mega__tiles {
		grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	}
}

/* ---------- Sale badge: a slightly tilted "sticker" ---------- */
.woocommerce .onsale,
.onsale {
	font-family: var(--sf-font-accent);
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: none;
	transform: rotate(-4deg);
	box-shadow: 2px 3px 0 rgba(31, 33, 32, 0.18);
}

/* mobile off-canvas: indent catalog sub-levels so the hierarchy is visible */
#offcanvas .sub-menu .ct-menu-link {
	padding-left: 14px;
	font-size: 16px;
	font-weight: 500;
}

#offcanvas .sub-menu .sub-menu .ct-menu-link {
	padding-left: 28px;
	font-size: 15px;
	font-weight: 400;
	opacity: 0.85;
}

/* ---------- Header account + cart (labels set in theme-setup.php) ---------- */
.ct-header [data-id="account"],
.ct-header [data-id="cart"] {
	--theme-icon-color: var(--theme-palette-color-4);
	--theme-icon-hover-color: var(--theme-palette-color-1);
}

.ct-header [data-id="cart"] {
	margin-left: 28px;
}

/* two-line label: bold title + small grey subtitle / cart total */
.ct-header [data-id="account"] .ct-label,
.ct-header [data-id="cart"] .ct-label {
	white-space: nowrap;
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.2;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
}

.sf-hi__title {
	color: var(--theme-palette-color-4);
	font-size: 14px;
	font-weight: 700;
}

.sf-hi__sub,
.ct-header [data-id="cart"] .ct-label .ct-amount {
	color: var(--theme-palette-color-3);
	font-size: 12.5px;
	font-weight: 400;
}

.ct-header [data-id="account"]:hover .sf-hi__title,
.ct-header [data-id="cart"]:hover .sf-hi__title {
	color: var(--theme-palette-color-1);
}

/* count badge on the cart icon */
.ct-header [data-id="cart"] .ct-dynamic-count-cart {
	min-width: 18px;
	height: 18px;
	font-size: 11px;
	font-weight: 700;
}

.ct-header [data-id="account"] > a,
.ct-header [data-id="account"] .ct-account-item {
	gap: 10px;
}

/* Blocksy places the cart label after the icon with `order`, so space it with a margin */
.ct-header [data-id="cart"] [data-label="right"] .ct-label {
	margin-inline-start: 10px;
}

/* ---------- Shop sidebar filters (WooCommerce core widgets) ---------- */
#sidebar .widget-title {
	margin-bottom: 12px;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

#sidebar .ct-widget {
	padding-bottom: 22px;
	border-bottom: 1px solid var(--theme-palette-color-5);
}

/* price slider: WooCommerce's own stylesheet isn't loaded with Blocksy, so style the jQuery UI slider */
.price_slider_wrapper .price_slider {
	position: relative;
	height: 4px;
	margin: 10px 8px 22px;
	border-radius: 2px;
	background: var(--theme-palette-color-5);
}

.price_slider_wrapper .ui-slider-range {
	position: absolute;
	top: 0;
	height: 100%;
	border-radius: 2px;
	background: var(--theme-palette-color-1);
}

.price_slider_wrapper .ui-slider-handle {
	position: absolute;
	top: -7px;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	border: 3px solid var(--theme-palette-color-1);
	border-radius: 50%;
	background: #fff;
	cursor: ew-resize;
}

.price_slider_wrapper .price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.price_slider_wrapper .price_slider_amount .price_label {
	order: -1;
	font-size: 14px;
}

/* ---------- Product cards ---------- */
.woocommerce .products .product .button {
	width: 100%;
	justify-content: center;
}

/* ---------- Tablet/mobile: filters behind the "Filtre" button ---------- */
.woocommerce .button.sf-filters-toggle {
	display: none;
}

@media (max-width: 999.98px) {
	.woocommerce .button.sf-filters-toggle {
		display: flex;
		justify-content: center;
		width: 100%;
		margin-bottom: 20px;
	}

	body:not(.sf-filters-open) #sidebar {
		display: none;
	}
}

/* ---------- Header wishlist link (Blocksy Button element, class set in theme-setup.php) ---------- */
/* shown like account/cart: heart icon + two-line label, no button background */
.ct-header .sf-wishlist-link {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--theme-palette-color-4);
	font-size: 14px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.2;
}

.ct-header .sf-wishlist-link::before {
	content: "";
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.7 4.5c2.1 0 3.6 1.1 4.3 2.4h2c.7-1.3 2.2-2.4 4.3-2.4 3.7 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.7 4.5c2.1 0 3.6 1.1 4.3 2.4h2c.7-1.3 2.2-2.4 4.3-2.4 3.7 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ct-header .sf-wishlist-link:hover {
	background: none;
	color: var(--theme-palette-color-1);
}

/* Blocksy's button hover turns all text white; keep our colors */
.ct-header .sf-wishlist-link:hover .ct-button-text {
	color: var(--theme-palette-color-1);
}

.ct-header .sf-wishlist-link:hover .ct-button-secondary-text {
	color: var(--theme-palette-color-3);
}

.ct-header .sf-wishlist-link .ct-button-secondary-text {
	color: var(--theme-palette-color-3);
	font-size: 12.5px;
	font-weight: 400;
}

.ct-header [data-id="button"] {
	margin-right: 28px;
}

/* wishlist count badge on the heart, same look as the cart badge; empty (0) = hidden */
.ct-header .sf-wishlist-link {
	position: relative;
}

.ct-header .sf-wishlist-count {
	position: absolute;
	top: -7px;
	left: 14px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: #e02b2b;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.ct-header .sf-wishlist-count:empty {
	display: none;
}

.ct-header .sf-wishlist-link .ct-button-text {
	white-space: nowrap;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* ---------- Wishlist heart on product cards (TI Wishlist, "above thumbnail") ---------- */
/* top-right corner of the image, so it doesn't cover the sale badge (top-left) */
.products .tinv-wraper.tinv-wishlist.tinvwl-above_thumb-add-to-cart {
	top: 12px;
	right: 12px;
	left: auto;
}

/* wishlist page: the page already has the title "Favorite", hide the plugin's duplicate heading */
.tinv-wishlist .tinv-header {
	display: none;
}

/* narrower desktops: icons only for favorites/account/cart, so the search keeps enough room */
@media (max-width: 1199.98px) {
	.ct-header [data-id="account"] .ct-label,
	.ct-header [data-id="cart"] .ct-label,
	.ct-header .sf-wishlist-link .ct-button-secondary-text {
		display: none;
	}

	/* hide the "Favorite" word but keep the count badge inside it */
	.ct-header .sf-wishlist-link .ct-button-text {
		font-size: 0;
	}

	.ct-header [data-id="text"] {
		margin-inline: 24px 16px;
	}

	.ct-header [data-id="button"],
	.ct-header [data-id="cart"] {
		margin-inline: 12px 0;
	}
}

/* ---------- Home page (page "Acasă", block classes set in theme-setup.php) ---------- */
/* hero banners: colored placeholders; can be replaced in the editor with a Cover block + photo */
.sf-heroes {
	gap: 24px;
	margin-bottom: 24px;
}

.sf-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	min-height: 300px;
	padding: 40px;
	border-radius: 10px;
	color: #fff;
}

.sf-hero--catalog {
	background: linear-gradient(135deg, var(--sf-navbar-bg) 0%, var(--theme-palette-color-1) 60%, var(--sf-green-light) 100%);
}

/* mustard banner: charcoal text for contrast */
.sf-hero--promo {
	background: linear-gradient(135deg, var(--sf-yellow) 0%, #f0c55a 100%);
	color: var(--sf-charcoal);
}

.sf-hero.sf-hero--promo .wp-block-heading {
	color: var(--sf-charcoal);
}

.sf-hero.sf-hero--promo .wp-block-button__link {
	background: var(--sf-charcoal);
	color: #fff;
}

.sf-hero.sf-hero--promo .wp-block-button__link:hover {
	background: var(--sf-navbar-bg);
}

.sf-hero .wp-block-heading {
	margin-bottom: 10px;
	color: #fff;
	font-size: clamp(26px, 3vw, 38px);
}

.sf-hero p {
	max-width: 420px;
	font-size: 17px;
	opacity: 0.95;
}

.sf-hero .wp-block-button__link {
	background: #fff;
	color: var(--theme-palette-color-4);
	font-weight: 700;
}

.sf-hero .wp-block-button__link:hover {
	background: var(--theme-palette-color-4);
	color: #fff;
}

/* trust tiles */
.sf-usps {
	gap: 16px;
	margin-bottom: 56px;
}

.sf-usp {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 18px 20px;
	border: 1px solid var(--theme-palette-color-5);
	border-radius: 10px;
	background: #fff;
}

.sf-usp::before {
	content: "";
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	background: var(--theme-palette-color-1);
	-webkit-mask: var(--sf-usp-icon) center / contain no-repeat;
	mask: var(--sf-usp-icon) center / contain no-repeat;
}

.sf-usp p {
	margin: 0;
	line-height: 1.25;
}

.sf-usp__small {
	display: block;
	color: var(--theme-palette-color-3);
	font-size: 13px;
}

.sf-usp__big {
	display: block;
	color: var(--theme-palette-color-4);
	font-size: 18px;
}

.sf-usp--price { --sf-usp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.5'/%3E%3C/svg%3E"); }
.sf-usp--phone { --sf-usp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M5 3h4l2 5-2.5 1.5a11 11 0 0 0 6 6L16 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.sf-usp--delivery { --sf-usp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M2 6h12v10H2zM14 9h4l3 3v4h-7z'/%3E%3Ccircle cx='6' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); }
.sf-usp--return { --sf-usp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h11a5 5 0 0 1 0 10H8'/%3E%3Cpath d='M8 5 4 9l4 4'/%3E%3C/svg%3E"); }

/* product section headings: title left, "vezi toate →" right */
.sf-section-head {
	align-items: baseline;
	margin-top: 48px;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--theme-palette-color-5);
}

.sf-section-head .wp-block-heading {
	margin: 0;
	font-size: 26px;
}

.sf-section-head p {
	margin: 0;
	font-weight: 600;
}

@media (max-width: 781.98px) {
	.sf-hero {
		min-height: 220px;
		padding: 28px;
	}

	.sf-usps {
		margin-bottom: 32px;
	}
}

/* ---------- Shop title area (river banner set in theme-setup.php) ---------- */
/* category names in white on the dark river banner */
.woocommerce .hero-section[data-type="type-2"] .page-title {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	color: #fff;
	font-size: clamp(22px, 2.4vw, 30px);
	text-shadow: 0 2px 10px rgba(31, 33, 32, 0.6);
}

/* main shop page: the logo, centered, instead of the "Magazin" text (the h1 stays for SEO/screen readers) */
.woocommerce-shop .hero-section[data-type="type-2"] .page-title {
	width: 65px;
	height: 64px;
	margin: 0 auto;
	overflow: hidden;
	background: url("assets/images/logo.png") center / contain no-repeat;
	color: transparent;
	text-shadow: none;
	font-size: 0;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}

/* ---------- Contact page map + legal page notes ---------- */
.sf-map {
	margin-top: 32px;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid var(--theme-palette-color-5);
}

.sf-map iframe {
	display: block;
}

/* "Model de document" / "De completat" notes on the legal pages */
.sf-legal-note {
	padding: 12px 16px;
	border-left: 4px solid var(--sf-yellow);
	border-radius: 4px;
	background: #fbf3dc;
	font-size: 14px;
}

/* "show more / show less" under long filter lists (assets/js/shop-filters.js) */
#sidebar .sf-filter-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--theme-palette-color-1);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

#sidebar .sf-filter-more::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

#sidebar .sf-filter-more[aria-expanded="true"]::after {
	margin-top: 3px;
	transform: rotate(-135deg);
}

#sidebar .sf-filter-more:hover {
	color: var(--theme-palette-color-2);
	text-decoration: underline;
}

/* collapsible filter groups: heading = button with a chevron (assets/js/shop-filters.js) */
#sidebar .sf-filter-group-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	text-transform: inherit;
	cursor: pointer;
}

#sidebar .sf-filter-group-toggle::after {
	content: "";
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	margin: -4px 4px 0 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-135deg);
	transition: transform 0.15s ease;
}

#sidebar .is-collapsed .sf-filter-group-toggle::after {
	margin-top: -2px;
	transform: rotate(45deg);
}

#sidebar .sf-filter-group-toggle:hover {
	color: var(--theme-palette-color-1);
}

/* collapsed groups take only one line */
#sidebar .ct-widget.is-collapsed {
	padding-bottom: 14px;
}

#sidebar .ct-widget.is-collapsed .widget-title {
	margin-bottom: 0;
}