/* GrillMind – Sărbători. Less is more: title, one line, three facts, products. Site colours plus a holiday red. */
.gms,
.gms-note {
	--gms-gold: #cf9529;
	--gms-gold-soft: rgba(207, 149, 41, .3);
	--gms-cream: #f4e1c1;
	--gms-soft: rgba(244, 225, 193, .68);
	--gms-red: #9b2226;
	--gms-head: "Bebas Neue", Impact, "Arial Black", sans-serif;
}

/*
 * The page has its own dark background: a plain WordPress page is white, and the theme's dark
 * smoke only comes with Elementor sections. The box-shadow + clip-path pair paints it edge to edge.
 */
.gms {
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
	padding: 96px 20px 110px;
	color: var(--gms-cream);
	box-sizing: border-box;
	/* Same as the homepage product section: near-black with the Smoker.jpg photo at 11%. */
	background: #020402;
	box-shadow: 0 0 0 100vmax #020402;
	clip-path: inset(0 -100vmax);
}
.gms::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	z-index: 0;
	background: url("/wp-content/uploads/2025/10/Smoker.jpg") center / cover no-repeat;
	opacity: .11;
	pointer-events: none;
}
/* The rest of the page goes dark too, and the full-width background never adds a sideways scroll. */
html:has(.gms),
body:has(.gms) { background-color: #020402; overflow-x: clip; }

/* ---------- Decoration: hanging baubles and big faint snowflakes ---------- */
.gms-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.gms-baubles { position: absolute; top: 0; width: 240px; height: 300px; overflow: visible; }
.gms-baubles--l { left: -10px; }
.gms-baubles--r { right: -10px; }
.gms-swing { animation: gms-swing 5s ease-in-out infinite alternate; }
@keyframes gms-swing {
	from { transform: rotate(-3deg); }
	to { transform: rotate(3deg); }
}
.gms-flake { position: absolute; opacity: .09; }
.gms-flake--1 { width: 260px; top: 420px; right: -60px; }
.gms-flake--2 { width: 200px; top: 760px; left: -50px; }
.gms-flake--3 { width: 140px; top: 120px; left: 26%; opacity: .06; }
@media (prefers-reduced-motion: reduce) {
	.gms-swing { animation: none; }
}
.gms *,
.gms *::before,
.gms *::after { box-sizing: border-box; }
.gms > *:not(.gms-snow):not(.gms-deco) { position: relative; z-index: 1; }

/* ---------- Snow: two slow layers of small dots, off for reduced motion ---------- */
.gms-snow,
.gms-snow::after {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, .55) 1.2px, transparent 1.6px),
		radial-gradient(circle, rgba(255, 255, 255, .35) 1px, transparent 1.4px);
	background-size: 140px 160px, 90px 110px;
	background-position: 10px 0, 50px 40px;
	animation: gms-snow 28s linear infinite;
	opacity: .5;
}
.gms-snow::after {
	content: "";
	background-size: 210px 230px, 170px 190px;
	background-position: 80px 20px, 130px 90px;
	animation-duration: 46s;
	opacity: .6;
}
@keyframes gms-snow {
	from { background-position: 10px 0, 50px 40px; }
	to { background-position: 40px 640px, 70px 700px; }
}
@media (prefers-reduced-motion: reduce) {
	.gms-snow,
	.gms-snow::after { animation: none; }
}

/* ---------- Title ---------- */
.gms-hero { text-align: center; max-width: 820px; margin: 0 auto 36px; }
/* Like "DELICATESE PENTRU CARE BAG MÂNA ÎN FOC" above "SMOKED MEATS" on the homepage. */
.gms-eyebrow {
	margin: 0 0 6px;
	color: #e0dcc9;
	font-family: "DM Sans", sans-serif;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .4px;
	text-transform: uppercase;
}
.gms-h1 {
	margin: 0 0 14px !important;
	color: #cc9c48 !important;
	font-family: var(--gms-head) !important;
	font-size: clamp(40px, 5.5vw, 64px) !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: .5px;
	text-transform: uppercase;
}
.gms-lead { margin: 0 0 6px; color: var(--gms-cream); font-size: 19px; line-height: 1.5; }
.gms-deadline { margin: 0; min-height: 1.4em; color: var(--gms-gold); font-size: 15px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }

/* ---------- Three facts, one row ---------- */
.gms-facts {
	list-style: none !important;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 960px;
	margin: 0 auto 56px !important;
	padding: 0 !important;
	border-top: 1px solid var(--gms-gold-soft);
	border-bottom: 1px solid var(--gms-gold-soft);
}
.gms-facts li {
	margin: 0 !important;
	padding: 18px 16px;
	text-align: center;
	line-height: 1.35;
}
.gms-facts li + li { border-left: 1px solid var(--gms-gold-soft); }
.gms-facts span { display: block; margin-bottom: 4px; color: var(--gms-soft); font-size: 13px; text-transform: uppercase; letter-spacing: .6px; }
.gms-facts strong { color: var(--gms-cream); font-size: 17px; }

/* ---------- Products ---------- */
.gms-grid {
	list-style: none !important;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 22px;
	margin: 0 !important;
	padding: 0 !important;
}
.gms-card {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	border: 1px solid var(--gms-gold-soft);
	background: #111;
	min-width: 0;
}
.gms-card-img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #0b0b0b; }
.gms-card-img img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .4s; }
.gms-card:hover .gms-card-img img { transform: scale(1.03); }
.gms-badge {
	position: absolute;
	top: 14px;
	left: 0;
	padding: 6px 12px 6px 14px;
	background: var(--gms-red);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .8px;
	text-transform: uppercase;
}
.gms-card-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 18px 20px; }
.gms-card-title { margin: 0 !important; font-size: 18px !important; line-height: 1.3 !important; font-weight: 700 !important; }
.gms-card-title a { color: var(--gms-cream) !important; text-decoration: none !important; overflow-wrap: anywhere; }
.gms-price { margin: 0 0 6px; color: var(--gms-cream); font-size: 18px; font-weight: 700; }
.gms-price del { opacity: .55; font-weight: 400; margin-right: 6px; }
.gms-price ins { text-decoration: none; }
.gms-empty { text-align: center; color: var(--gms-soft); margin: 0; }

/* ---------- Products drawn by the homepage's Elementor template (#103), spaced like its Loop Grid ---------- */
.gms-loop { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; max-width: 1140px; margin: 0 auto; }
.gms-loop-item { min-width: 0; }

/* Holiday ribbon across the top-right corner of each product photo (the discount circle stays top-left). */
.gms-loop .gm-stockimg__wrap::after {
	content: "Precomandă Sărbători";
	position: absolute;
	z-index: 3;
	top: 72px;
	right: -65px;
	width: 300px;
	transform: rotate(45deg);
	padding: 9px 0 9px 22px;
	text-align: center;
	background: #9b2226 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2026%22%3E%3Cline%20x1%3D%2210%22%20y1%3D%220%22%20x2%3D%2210%22%20y2%3D%226%22%20stroke%3D%22%23cf9529%22%20stroke-width%3D%221.5%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%225%22%20width%3D%226%22%20height%3D%224%22%20rx%3D%221%22%20fill%3D%22%23cf9529%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2217%22%20r%3D%228%22%20fill%3D%22%23cf9529%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2214.5%22%20r%3D%222%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.45%22%2F%3E%3C%2Fsvg%3E") no-repeat 52px 50% / 13px 17px;
	border-top: 2px solid #cf9529;
	border-bottom: 2px solid #cf9529;
	color: #fff;
	font: 700 11px/1 "DM Sans", sans-serif;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
	pointer-events: none;
}
@media (max-width: 767px) {
	.gms-loop .gm-stockimg__wrap::after { top: 60px; right: -71px; width: 290px; font-size: 10px; padding: 7px 0 7px 20px; background-position: 52px 50%; }
}

/* ---------- Product rows, built from the theme's own shortcodes like the homepage ---------- */
.gms-list { display: grid; gap: 64px; max-width: 1140px; margin: 0 auto; }
.gms-row {
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}
.gms-row-media { position: relative; min-width: 0; }
.gms-row-media img { display: block; width: 100%; height: auto; border-radius: 8px; }
.gms-row-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gms-row-info > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.gms-row-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gms-row-tags > * { margin: 0 !important; }
.gms-pill,
.gm-tags .gm-tag.gms-tag-red {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--gms-red);
	color: #fff;
	font-family: "DM Sans", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	white-space: nowrap;
}
.gms-row-title {
	margin: 0 !important;
	font-family: var(--gms-head) !important;
	font-size: 36px !important;
	font-weight: 400 !important;
	line-height: 1.05 !important;
	text-transform: uppercase;
}
.gms-row-title a { color: #fff !important; text-decoration: none !important; overflow-wrap: anywhere; }
.gms-row-price { margin: 0; font-family: var(--gms-head); font-size: 35px; line-height: 1; color: #cf9529; }
.gms-row-price del { color: #cf9529; opacity: .85; margin-right: 6px; }
.gms-row-price ins { color: #cf9529; text-decoration: underline; text-underline-offset: 4px; }
.gms-row-cta .gms-btn { width: 100%; }

/* ---------- Buttons ---------- */
.gms .gms-btn,
.gms .gms-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	margin-top: auto;
	padding: 12px 16px !important;
	border: 1px solid var(--gms-gold) !important;
	border-radius: 0 !important;
	background: var(--gms-gold) !important;
	color: #0b0b0b !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	letter-spacing: .5px;
	text-transform: uppercase;
	text-decoration: none !important;
	line-height: 1.2 !important;
	white-space: normal;
	text-align: center;
	cursor: pointer;
	transition: filter .15s;
}
.gms .gms-btn:hover { filter: brightness(1.08); }
.gms .gms-btn--off,
.gms .gms-btn--off:hover {
	background: transparent !important;
	color: var(--gms-soft) !important;
	border-color: var(--gms-gold-soft) !important;
	cursor: default;
	filter: none;
}
.gms .gms-btn.loading { opacity: .6; }
.gms a.added_to_cart {
	display: block;
	margin-top: 10px;
	color: var(--gms-gold) !important;
	text-align: center;
	font-size: 14px;
	text-decoration: underline;
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
	.gms { padding: 150px 16px 64px; }
	.gms-baubles { width: 140px; height: 175px; }
	.gms-flake--1 { width: 170px; top: 380px; right: -50px; }
	.gms-flake--2 { width: 140px; top: 900px; }
	.gms-flake--3 { display: none; }
	.gms-hero { margin-bottom: 26px; }
	.gms-lead { font-size: 17px; }
	.gms-facts { grid-template-columns: 1fr; margin-bottom: 32px !important; }
	.gms-facts li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 2px; text-align: left; }
	.gms-facts li + li { border-left: 0; border-top: 1px solid var(--gms-gold-soft); }
	.gms-facts span { margin: 0; font-size: 12px; white-space: nowrap; }
	.gms-facts strong { font-size: 15px; text-align: right; }
	.gms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.gms-list { gap: 48px; }
	.gms-row { grid-template-columns: 1fr; gap: 20px; }
	.gms-row-title { font-size: 32px !important; }
	.gms-row-price { font-size: 30px; }
	.gms-card-body { padding: 12px 12px 14px; gap: 6px; }
	.gms-card-title { font-size: 15px !important; }
	.gms-price { font-size: 16px; }
	.gms .gms-btn { min-height: 44px; padding: 10px 8px !important; font-size: 13px !important; }
	.gms-badge { top: 10px; font-size: 10px; padding: 4px 8px 4px 10px; letter-spacing: .4px; }
}

/* ---------- Box on the product page ---------- */
.gms-note {
	margin: 18px 0;
	padding: 16px 18px;
	border: 1px solid var(--gms-gold-soft);
	border-left: 3px solid var(--gms-red);
	background: rgba(207, 149, 41, .06);
	color: var(--gms-cream);
}
.gms-note-title { margin: 0 0 8px !important; color: var(--gms-gold); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.gms-note ul { margin: 0 !important; padding-left: 18px !important; }
.gms-note li { margin: 0 0 4px; line-height: 1.5; }
.gms-note strong { color: var(--gms-gold); }
.gms-note-closed { margin: 10px 0 0 !important; color: #ff8a7a; font-weight: 700; }

/* The holiday pill sits inside the theme's tag row; keep it red over the theme's own tag colours. */
.gm-tags .gm-tag.gms-tag-red { border: 0 !important; background: var(--gms-red, #9b2226) !important; color: #fff !important; line-height: 1; }