/* =========================================================================
 * CatalogoSorriso — Classic Header + Design System (cs-* prefix)
 *
 * Mobile-first. Breakpoints:
 *   < 601px           = mobile (hamburger + compact)
 *   601-900px         = tablet (smile photo small + full toolbar)
 *   > 900px           = desktop (12-col virtual: 1/6 logo + 4/6 utils + 1/6 photo)
 *
 * Visual baseline: 2014-era catalogosorriso.it (white band + green toolbar).
 * ========================================================================= */

/* Self-hosted Open Sans (variable font, weights 300-800, latin subset). */
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/open-sans-variable-latin.woff2') format('woff2-variations'),
	     url('../fonts/open-sans-variable-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 {
	--cs-green:        #42ac52;
	--cs-green-dark:   #008833;
	--cs-green-darker: #138125;
	--cs-green-light:  #69d381;
	--cs-green-tint:   #e0f3e0;
	--cs-green-gradient:        linear-gradient(to bottom, #69d381 0%, #43b155 100%);
	--cs-green-gradient-hover:  linear-gradient(to bottom, #43b155 0%, #138125 100%);

	--cs-orange:       #f6b30f;
	--cs-orange-alt:   #fdaa02;

	--cs-text:         #333333;
	--cs-text-body:    #777777;
	--cs-text-light:   #515151;
	--cs-gray-mid:     #999999;
	--cs-gray-border:  #d6d4d4;
	--cs-gray-light:   #f7f7f7;
	--cs-white:        #fff;

	--cs-radius-sm:    3px;
	--cs-radius-md:    4px;
	--cs-radius-lg:    6px;
	--cs-radius-pill:  999px;

	--cs-h-input:      32px;
	--cs-h-btn:        32px;
	--cs-h-toolbar:    64px;
	--cs-h-header:     68px;   /* mobile baseline */

	--cs-shadow-pill:  0 1px 2px rgba(0, 0, 0, 0.12);
	--cs-shadow-drawer: 0 0 24px rgba(0, 0, 0, 0.2);

	--cs-font:         Arial, Helvetica, sans-serif;
	--cs-font-display: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--cs-content-max:    100%;
	--cs-content-gutter: 12px;          /* mobile gutter */

	--cs-z-toolbar:      30;
	--cs-z-drawer:       100;
	--cs-z-overlay:      90;
}

/* ----- Kill parent .col-full caps on full-bleed bars ----- */
body.cs-classic .col-full,
body.cs-classic .col-full-nav,
body.cs-classic .shoptimizer-archive,
body.cs-classic .archive-header .col-full {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Body content capped + centered (gutter scales with breakpoint via media queries) */
body.cs-classic #content.site-content,
body.cs-classic .site-footer,
body.cs-classic .site-info,
body.cs-classic .footer-widgets {
	max-width: var(--cs-content-max) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--cs-content-gutter) !important;
	padding-right: var(--cs-content-gutter) !important;
	box-sizing: border-box;
}

body.cs-classic {
	font-family: var(--cs-font);
	font-size: 13px;
	line-height: 1.42857;
	color: var(--cs-text-body);
	background: #f0f0f0;
}

/* Display font for headings + product titles + block headings (PS-classic parity) */
body.cs-classic h1,
body.cs-classic h2,
body.cs-classic h3,
body.cs-classic h4,
body.cs-classic h5,
body.cs-classic h6,
body.cs-classic .price,
body.cs-classic .product_price,
body.cs-classic .product_title,
body.cs-classic .woocommerce-loop-product__title,
body.cs-classic .block .title_block {
	font-family: var(--cs-font-display);
	color: var(--cs-text);
}

/* Show/hide helpers */
.cs-mobile-only { display: none; }

/* ========== HEADER — mobile = flat white; tablet+ = PS-classic bg ========== */
#cs-header {
	background: #fff;
	border: none;
	border-bottom: 1px solid var(--cs-gray-border);
	position: relative;
}

#cs-header-inner {
	background: none;
}

#cs-header-photo { display: none !important; }

#cs-header-inner {
	max-width: var(--cs-content-max);
	margin: 0 auto;
	padding: 0 var(--cs-content-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: var(--cs-h-header);
	box-sizing: border-box;
}

/* Hamburger button (mobile-only, lives in white band, left of logo) */
#cs-hamburger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
	min-width: 44px;
	min-height: 44px;
	color: var(--cs-green-dark);
	padding: 0;
	border-radius: var(--cs-radius-md);
	transition: background 0.12s, color 0.12s;
}
#cs-hamburger:hover { background: var(--cs-green-tint); color: var(--cs-green-darker); }
#cs-hamburger svg { display: block; }

/* Logo (centered, full-width on white band) */
#cs-logo {
	display: block;
	text-decoration: none;
	color: inherit;
	line-height: 0;
	flex: 1 1 auto;
	text-align: center;
	min-width: 0;
}
#cs-logo:hover { text-decoration: none; }
#cs-logo .cs-logo-img {
	display: inline-block;
	height: 42px;
	width: auto;
	max-width: 80%;
	user-select: none;
}

/* Mobile cart icon (lives in white band, right of logo) */
#cs-cart-mobile {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 0 8px;
	color: var(--cs-green-dark);
	text-decoration: none;
	font-weight: bold;
	font-size: 13px;
	flex-shrink: 0;
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
	border-radius: var(--cs-radius-md);
	position: relative;
}
#cs-cart-mobile:hover { background: var(--cs-green-tint); color: var(--cs-green-darker); text-decoration: none; }
#cs-cart-mobile .cs-cart-icon-svg {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
#cs-cart-mobile .cs-cart-count-mobile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--cs-green-dark);
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	border-radius: 9px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: 2px;
}

/* Header right (utils + links) — hidden on mobile */
#cs-header-right { display: none; }

/* Smile photo — hidden on mobile */
#cs-header-photo { display: none; }

/* ========== MOBILE-FIRST: TOOLBAR (green band) ========== */
/* On mobile, the green toolbar is hidden entirely — search lives only in drawer. */
#cs-toolbar { display: none; }
#cs-toolbar-inner {
	max-width: var(--cs-content-max);
	margin: 0 auto;
	padding: 0 var(--cs-content-gutter);
	display: flex;
	align-items: center;
	gap: 0;
	height: var(--cs-h-toolbar);
	box-sizing: border-box;
}

/* On mobile: hide CATEGORIE pill + cart pill + icons. Toolbar = hamburger + search + cart icon. */
#cs-cat-label,
#cs-toolbar-icons,
#cs-cart-btn { display: none; }

/* Mobile search: between hamburger (left) and cart icon (right) */
#cs-search {
	flex: 1;
	display: flex;
	align-items: stretch;
	gap: 0;
	min-width: 0;
	margin: 0;
	padding: 0 6px;
}
#cs-search input[type="search"] {
	flex: 1;
	width: auto;
	height: var(--cs-h-input);
	min-width: 0;
	border: 1px solid #ccc;
	border-right: none;
	padding: 0 12px;
	font-size: 14px;
	font-family: var(--cs-font);
	outline: none;
	color: var(--cs-text-light);
	background: var(--cs-gray-light);
	border-radius: var(--cs-radius-md) 0 0 var(--cs-radius-md);
	box-sizing: border-box;
}
#cs-search input[type="search"]::placeholder { color: var(--cs-gray-mid); }
#cs-search input[type="search"]:focus {
	border-color: var(--cs-green);
	color: var(--cs-text);
	background: #fff;
}
#cs-search button[type="submit"] {
	flex-shrink: 0;
	width: 42px;
	height: var(--cs-h-input);
	background: var(--cs-green-dark);
	border: 1px solid var(--cs-green-darker);
	border-left: none;
	border-radius: 0 var(--cs-radius-md) var(--cs-radius-md) 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 0;
}
#cs-search button[type="submit"]:hover { background: var(--cs-green-darker); }

/* ========== DRAWER (off-canvas mobile menu) ========== */
#cs-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: var(--cs-z-overlay);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
#cs-drawer-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}
#cs-drawer {
	position: fixed;
	top: 0;
	left: 0;
	height: 100dvh;
	width: 85%;
	max-width: 340px;
	background: #fff;
	z-index: var(--cs-z-drawer);
	box-shadow: var(--cs-shadow-drawer);
	transform: translateX(-100%);
	transition: transform 0.25s ease;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
#cs-drawer.is-open { transform: translateX(0); }
#cs-drawer[hidden],
#cs-drawer-overlay[hidden] {
	display: none !important;
}

.cs-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 2px solid var(--cs-green);
	gap: 12px;
}
.cs-drawer-brand {
	font-family: var(--cs-font);
	font-size: 18px;
	font-weight: bold;
	color: var(--cs-text);
	text-decoration: none;
	letter-spacing: -0.5px;
}
.cs-drawer-brand .cs-drawer-brand-suffix {
	color: var(--cs-green);
}
#cs-drawer-close {
	background: transparent;
	border: none;
	font-size: 28px;
	line-height: 1;
	color: var(--cs-text-light);
	cursor: pointer;
	padding: 0 8px;
	min-width: 44px;
	min-height: 44px;
}
#cs-drawer-close:hover { color: var(--cs-green-dark); }

#cs-drawer-search {
	padding: 14px 16px;
	border-bottom: 1px solid var(--cs-gray-border);
}
#cs-drawer-search input {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--cs-gray-border);
	border-radius: var(--cs-radius-md);
	background: var(--cs-gray-light);
	font-size: 14px;
	font-family: var(--cs-font);
	outline: none;
	box-sizing: border-box;
}
#cs-drawer-search input:focus { border-color: var(--cs-green); background: #fff; }

.cs-drawer-section {
	padding: 12px 0;
	border-bottom: 1px solid var(--cs-gray-border);
}
.cs-drawer-section:last-of-type { border-bottom: none; }
.cs-drawer-h {
	margin: 0;
	padding: 8px 16px;
	font-size: 11px;
	font-weight: bold;
	color: var(--cs-gray-mid);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.cs-drawer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cs-drawer-list li { border-top: 1px solid var(--cs-gray-light); }
.cs-drawer-list li:first-child { border-top: none; }
.cs-drawer-list a {
	display: block;
	padding: 12px 16px;
	color: var(--cs-text);
	text-decoration: none;
	font-size: 15px;
	min-height: 44px;
	line-height: 1.4;
	box-sizing: border-box;
}
.cs-drawer-list a:hover,
.cs-drawer-list a:active {
	background: var(--cs-green-tint);
	color: var(--cs-green-darker);
	text-decoration: none;
}
.cs-drawer-all a {
	font-weight: bold;
	color: var(--cs-green-dark);
}

/* Cat accordion items with sub-categories */
.cs-drawer-cat-item.has-children {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: stretch;
}
.cs-drawer-cat-item.has-children .cs-drawer-cat-link {
	grid-column: 1;
}
.cs-drawer-cat-toggle {
	grid-column: 2;
	background: transparent;
	border: none;
	font-size: 14px;
	color: var(--cs-text-light);
	cursor: pointer;
	padding: 0 16px;
	min-width: 44px;
	min-height: 44px;
	border-left: 1px solid var(--cs-gray-light);
	transition: transform 0.18s ease, background 0.12s;
}
.cs-drawer-cat-toggle[aria-expanded="true"] {
	transform: rotate(180deg);
	background: var(--cs-green-tint);
	color: var(--cs-green-darker);
}
.cs-drawer-cat-children {
	grid-column: 1 / -1;
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--cs-gray-light);
	border-top: 1px solid var(--cs-gray-light);
}
.cs-drawer-cat-children[hidden] { display: none; }
.cs-drawer-cat-children li { border-top: 1px solid #eee; }
.cs-drawer-cat-children li:first-child { border-top: none; }
.cs-drawer-cat-children a {
	display: block;
	padding: 10px 16px 10px 32px;
	font-size: 14px;
	color: var(--cs-text-light);
	text-decoration: none;
	min-height: 40px;
	line-height: 1.4;
	box-sizing: border-box;
}
.cs-drawer-cat-children a:hover {
	background: var(--cs-green-tint);
	color: var(--cs-green-darker);
}

/* Body lock when drawer is open */
body.cs-drawer-open { overflow: hidden; }

/* ========== TABLET (601-900px) — mockup classic layout ========== */
@media (min-width: 601px) {
	:root {
		--cs-h-header: 72px;
		--cs-content-gutter: 2%;
	}

	.cs-mobile-only { display: none !important; }

	/* Toolbar — grey gradient band (old-site look). Theme asset
	 * catalogosorriso-menu-1200-64_A.png is a 10x64 grey vertical-gradient strip
	 * tiled horizontally; it matches the 64px band height 1:1 (no scaling).
	 * #e6e6e6 kept as fallback color. PENDING Andrea confirm this is the asset. */
	#cs-toolbar {
		display: block;
		background-color: #e6e6e6;
		background-image: url('../img/catalogosorriso-menu-1200-64_A.png');
		background-repeat: repeat-x;
		background-position: left top;
		height: 64px;
		z-index: var(--cs-z-toolbar);
		position: sticky;
		top: 0;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	}
	#cs-toolbar-inner {
		gap: 0;
		padding: 0 var(--cs-content-gutter);
		height: var(--cs-h-toolbar);
	}

	#cs-header {
		overflow: hidden;
		background: url('https://cs-wp.ikwaba.com/wp-content/uploads/2026/05/cs-header-background-left-8-160.png') repeat-x left top;
		background-size: auto;
	}
	#cs-header-inner {
		padding: 44px var(--cs-content-gutter) 36px;
		align-items: flex-start;
		background: url('../img/header-bgr-1200px.jpg') no-repeat right top;
		background-size: auto 160px;
	}

	#cs-logo {
		flex: 0 0 auto;
		text-align: left;
	}
	#cs-logo .cs-logo-img { height: 48px; max-width: none; }

	/* Right block: utils + links stacked, room for photo */
	#cs-header-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		align-self: center;
		gap: 4px;
		padding-right: 220px;
		padding-top: 0;
		flex: 1 1 auto;
		min-width: 0;
	}
	#cs-header-utils,
	#cs-header-utils .cs-utils-menu {
		display: flex;
		gap: 8px;
		font-size: 18px;
		list-style: none;
		margin: 0;
		padding: 0;
		align-items: center;
	}
	#cs-header-utils a { color: #444; font-weight: 500; text-decoration: none; }
	#cs-header-utils a:hover { text-decoration: underline; }
	#cs-header-utils .cs-link-accent { color: #14a407; }
	#cs-header-utils li + li::before {
		content: "·";
		color: var(--cs-gray-mid);
		margin-right: 4px;
		font-weight: normal;
	}
	#cs-header-utils .sep { display: none; }

	#cs-header-links,
	#cs-header-links .cs-links-menu {
		display: flex;
		gap: 8px;
		font-size: 15px;
		color: var(--cs-gray-mid);
		list-style: none;
		margin: 0;
		padding: 0;
		align-items: center;
		flex-wrap: wrap;
		justify-content: flex-end;
	}
	#cs-header-links a { color: var(--cs-gray-mid); font-weight: 500; text-decoration: none; }
	#cs-header-links a:hover { color: var(--cs-text-light); }
	#cs-header-links li + li::before {
		content: "·";
		color: #ccc;
		margin-right: 4px;
	}

	/* Smile photo — absolute right, PS-classic wide crop covering bands */
	#cs-header-photo {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 200px;
		height: auto;
		overflow: hidden;
		pointer-events: none;
		z-index: 2;
	}
	#cs-header-photo picture,
	#cs-header-photo img {
		width: 100%;
		height: 100%;
		display: block;
	}
	#cs-header-photo img {
		object-fit: contain;
		object-position: right center;
	}

	/* Toolbar three-block layout: 16.66% / flex / 16.66% */
	#cs-cat-label,
	#cs-cart-btn { display: inline-flex; }

	#cs-cat-label {
		background: transparent;
		color: #333;
		font-weight: bold;
		font-size: 14px;
		padding: 0 24px;
		height: 100%;
		margin: 0;
		align-items: center;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		width: 16.66%;
		flex-shrink: 0;
		border: none;
		border-radius: 0;
		box-shadow: none;
		text-decoration: none;
	}
	#cs-cat-label::before { display: none; }
	#cs-cat-label:hover { background: transparent; color: #333; text-decoration: none; }

	#cs-search {
		flex: 1;
		padding: 0 10px;
		justify-content: center;
		align-items: center;
		gap: 8px;
		position: relative;
	}
	#cs-search input[type="search"] {
		flex: 0 0 400px;
		width: 400px;
		max-width: 100%;
		height: 38px;
		min-width: 0;
		border: 1px solid #d0d0d0;
		padding: 0 14px;
		font-size: 14px;
		color: #999;
		background: #fff;
		border-radius: 6px;
	}
	#cs-search input[type="search"]:focus {
		border-color: var(--cs-green);
		color: var(--cs-text);
		background: #fff;
	}
	#cs-search button[type="submit"] {
		width: 50px;
		height: 38px;
		background: var(--cs-green-gradient);
		border: 1px solid var(--cs-green-dark);
		border-radius: 6px;
	}
	#cs-search button[type="submit"]:hover { background: var(--cs-green-gradient-hover); }

	.cs-cart-wrap {
		width: 16.66%;
		height: 100%;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		padding: 0 12px;
		box-sizing: border-box;
	}
	#cs-cart-btn {
		background: var(--cs-green-gradient);
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		padding: 0 18px;
		height: 44px;
		width: 100%;
		margin: 0;
		align-items: center;
		justify-content: center;
		gap: 8px;
		white-space: nowrap;
		border: 1px solid var(--cs-green-dark);
		border-radius: 6px;
		box-shadow: none;
		flex-shrink: 0;
		text-decoration: none;
	}
	#cs-cart-btn:hover { background: var(--cs-green-gradient-hover); color: #fff; text-decoration: none; }
	#cs-cart-btn .cs-cart-icon {
		display: inline-flex;
		align-items: center;
		line-height: 0;
	}
	#cs-cart-btn .cs-cart-icon svg { display: block; }
	#cs-cart-btn .cs-cart-label { display: none; }
	#cs-cart-btn .cs-cart-count {
		background: transparent;
		color: rgba(255,255,255,0.9);
		border-radius: 0;
		padding: 0;
		font-size: 13px;
		font-weight: normal;
	}
	#cs-cart-btn .cs-cart-arrow {
		font-size: 10px;
		margin-left: 4px;
		color: rgba(255,255,255,0.85);
	}
}

/* ========== DESKTOP (>= 901px) — mockup pixel match ========== */
@media (min-width: 901px) {
	:root {
		--cs-h-header: 72px;
		--cs-content-gutter: 2%;
	}

	#cs-header-inner {
		padding: 30px var(--cs-content-gutter) 36px;
		justify-content: space-between;
	}

	#cs-logo .cs-logo-img { height: 90px; }

	#cs-header-right {
		padding-right: 300px;
		padding-top: 0;
		align-self: center;
		justify-content: center;
	}

	#cs-header-photo { width: 280px; }

	#cs-cart-btn .cs-cart-label { display: inline; }
}

/* ========== DESIGN SYSTEM — buttons, inputs (site-wide on cs-classic) ========== */
body.cs-classic input[type="text"],
body.cs-classic input[type="email"],
body.cs-classic input[type="password"],
body.cs-classic input[type="search"],
body.cs-classic input[type="tel"],
body.cs-classic input[type="number"],
body.cs-classic textarea,
body.cs-classic select {
	height: var(--cs-h-input);
	border: 1px solid var(--cs-gray-border);
	border-radius: var(--cs-radius-md);
	padding: 0 12px;
	font-family: var(--cs-font);
	font-size: 13px;
	color: var(--cs-text);
	background: var(--cs-gray-light);
	outline: none;
	box-shadow: none;
	box-sizing: border-box;
}
body.cs-classic textarea { height: auto; min-height: 80px; padding: 8px 12px; }
body.cs-classic input:focus,
body.cs-classic textarea:focus,
body.cs-classic select:focus {
	border-color: var(--cs-green);
	background: #fff;
	color: var(--cs-text);
}

body.cs-classic .button,
body.cs-classic button.shoptimizer-mobile-toggle,
body.cs-classic input[type="submit"],
body.cs-classic input[type="button"],
body.cs-classic a.button,
body.cs-classic .woocommerce-button,
body.cs-classic .wp-block-button__link {
	background: var(--cs-green-gradient);
	color: #fff;
	border: 1px solid var(--cs-green-dark);
	border-radius: var(--cs-radius-md);
	padding: 0 18px;
	height: var(--cs-h-btn);
	font-family: var(--cs-font);
	font-size: 13px;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.12s;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
body.cs-classic .button:hover,
body.cs-classic button.shoptimizer-mobile-toggle:hover,
body.cs-classic input[type="submit"]:hover,
body.cs-classic input[type="button"]:hover,
body.cs-classic a.button:hover,
body.cs-classic .woocommerce-button:hover,
body.cs-classic .wp-block-button__link:hover {
	background: var(--cs-green-gradient-hover);
	color: #fff;
	text-decoration: none;
}
body.cs-classic .button.alt,
body.cs-classic a.button.alt { background: var(--cs-green-gradient-hover); border-color: var(--cs-green-darker); }

/* =========================================================================
 * HERO BANNER — [cs_hero] shortcode (mockup classic)
 * 175px panel: text + check-items + product image + brand badge.
 * ========================================================================= */
.cs-hero {
	display: flex;
	align-items: center;
	background: #fff;
	border: 1px solid var(--cs-gray-border);
	margin-bottom: 8px;
	position: relative;
	overflow: hidden;
	height: 175px;
	text-decoration: none;
	color: inherit;
}
.cs-hero:hover { text-decoration: none; }
.cs-hero-inner {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 12px 16px;
	gap: 16px;
}
.cs-hero-text {
	flex-shrink: 0;
	max-width: 40%;
}
.cs-hero-title {
	font-size: 16px;
	font-weight: bold;
	color: var(--cs-text);
	margin: 0 0 8px;
}
.cs-hero-checks {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cs-hero-checks li {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: bold;
	color: #555;
	margin-bottom: 4px;
}
.cs-hero-chk {
	width: 16px;
	height: 16px;
	background: var(--cs-green);
	border-radius: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 10px;
	flex-shrink: 0;
	font-weight: bold;
}
.cs-hero-product {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 100%;
}
.cs-hero-product img {
	max-width: 100%;
	max-height: 150px;
	object-fit: contain;
}
.cs-hero-brand {
	flex-shrink: 0;
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	max-width: 25%;
}
.cs-hero-brand img {
	max-width: 120px;
	max-height: 70px;
	object-fit: contain;
}
.cs-hero-brand-name {
	font-size: 12px;
	color: #555;
	font-weight: bold;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

@media (max-width: 600px) {
	.cs-hero { height: auto; min-height: 140px; }
	.cs-hero-inner { flex-wrap: wrap; gap: 8px; padding: 10px; }
	.cs-hero-text, .cs-hero-brand { max-width: 100%; }
	.cs-hero-product img { max-height: 100px; }
}

/* =========================================================================
 * BRAND GRID — [cs_brand_grid] shortcode (mockup classic)
 * 4-col tiles, 100px height, hover green border + shadow.
 * ========================================================================= */
.cs-brand-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin: 8px 0;
}
.cs-brand-tile {
	background: #fff;
	border: 1px solid var(--cs-gray-border);
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
	overflow: hidden;
	padding: 18px;
	text-decoration: none;
	box-sizing: border-box;
}
@media (max-width: 900px) {
	.cs-brand-tile { padding: 14px; }
}
@media (max-width: 600px) {
	.cs-brand-tile { padding: 10px; }
}
.cs-brand-tile:hover {
	border-color: var(--cs-green);
	box-shadow: 0 1px 4px rgba(122, 184, 0, 0.2);
	text-decoration: none;
}
.cs-brand-tile img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.cs-brand-tile .cs-brand-name {
	font-size: 13px;
	font-weight: bold;
	color: var(--cs-text);
	text-align: center;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

@media (max-width: 900px) {
	.cs-brand-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.cs-brand-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
 * FOOTER — mockup classic 4-col grid + green band + legal bar
 * ========================================================================= */
#cs-footer {
	background: #f0f0f0;
	border-top: 2px solid #d8d8d8;
	margin-top: 16px;
	font-family: var(--cs-font);
	color: var(--cs-text);
}

/* Green decorative band between cols and legal bar */
#cs-footer-band {
	height: 36px;
	background: linear-gradient(to right,
		#42ac52 0%,
		#69d381 40%,
		#bce5c5 75%,
		#eaf6ec 100%);
}
#cs-footer-inner {
	max-width: 100%;
	margin: 0;
	padding: 28px 2%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	box-sizing: border-box;
}
#cs-footer .cs-footer-col {
	min-width: 0;
}
#cs-footer .cs-fc-title {
	font-size: 14px;
	font-weight: bold;
	color: var(--cs-green-dark);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 14px;
	padding-bottom: 0;
	border-bottom: none;
}
#cs-footer .cs-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#cs-footer .cs-footer-col li {
	margin-bottom: 6px;
}
#cs-footer .cs-footer-col a {
	font-size: 14px;
	color: #999;
	text-decoration: none;
	line-height: 1.45;
}
#cs-footer .cs-footer-col a:hover {
	color: var(--cs-green-dark);
	text-decoration: underline;
}

/* Contatti column: prefix (e-mail / tel. / fax) + value side by side */
#cs-footer .cs-fc-contact {
	display: flex;
	gap: 8px;
	align-items: baseline;
	font-size: 14px;
	color: #999;
	line-height: 1.45;
}
#cs-footer .cs-fc-contact-prefix {
	color: var(--cs-text);
	font-weight: 400;
	min-width: 42px;
}
#cs-footer .cs-fc-contact a,
#cs-footer .cs-fc-contact .cs-fc-contact-value {
	color: #999;
}
#cs-footer .cs-footer-col a:hover {
	color: var(--cs-green-dark);
	text-decoration: underline;
}

#cs-legal-bar {
	background: #fff;
	border-top: none;
	padding: 18px 0;
}
#cs-legal-inner {
	max-width: 100%;
	margin: 0;
	padding: 0 2%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	font-size: 13px;
	color: #555;
	box-sizing: border-box;
	gap: 24px;
	flex-wrap: wrap;
	line-height: 1.5;
}
#cs-legal-inner strong { color: var(--cs-text); font-weight: 700; }
#cs-legal-inner .cs-legal-left { flex: 1 1 auto; }
#cs-legal-inner .cs-legal-right {
	flex: 0 0 auto;
	text-align: right;
}

/* Mobile footer: stack cols */
@media (max-width: 600px) {
	#cs-footer-inner {
		grid-template-columns: repeat(2, 1fr);
		padding: 22px 12px;
		gap: 20px;
	}
	#cs-footer-band { height: 22px; }
	#cs-legal-inner {
		padding: 0 12px;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	#cs-legal-inner .cs-legal-right {
		text-align: left;
	}
}

/* Show hamburger + mobile cart only on mobile */
@media (max-width: 600px) {
	.cs-mobile-only { display: inline-flex; }
	#cs-header-right { display: none; }
	#cs-header-photo { display: none; }
	#cs-header { margin-bottom: 12px; }
}

/* Match PS theme: pure white body/content background.
   Why: Shoptimizer customizer outputs `.site-content .col-full { background:#f8f8f8 }`. */
body.cs-classic,
body.cs-classic .site-content,
body.cs-classic .site-content .col-full {
	background-color: #fff !important;
}