/*
 * Hity týždňa — the page dressing.
 *
 * The product grid is WooCommerce's own [products] output, so the Arkáda
 * buttons, sale badges and CZK prices apply on their own; this file paints the
 * world around them and numbers the tiles. No webfont is requested: the brand
 * faces are named first and fall back to a real stack, so the page never costs
 * a Google Fonts round trip (and never trips the GDPR TODO the profile plugin
 * still carries).
 */

:root {
	--hph-deep:  #0b0c1e;
	--hph-mid:   #171634;
	--hph-violet:#241a44;
	--hph-gold:  #ffc200;
	--hph-gold-hi:#ffe27a;
	--hph-magenta:#ff7ad9;
	--hph-ink:   #f4f2ff;
	--hph-ink-dim: rgba(244, 242, 255, .66);
	--hph-display: "Sanchez", "Domine", Georgia, "Times New Roman", serif;
}

/* ---------- the ground ---------- */
body.hp-hits-page { background: var(--hph-deep); }
/* fixed so the blooms stay put while the grid scrolls past them */
body.hp-hits-page::before {
	content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(90% 55% at 50% -10%, rgba(255, 194, 0, .13), transparent 62%),
		radial-gradient(120% 70% at 50% 108%, rgba(255, 122, 217, .22), transparent 62%),
		radial-gradient(70% 50% at 85% 30%, rgba(139, 123, 255, .16), transparent 60%),
		linear-gradient(180deg, var(--hph-deep) 0%, var(--hph-mid) 45%, var(--hph-violet) 100%);
}
/* a whisper of grain so the large flat gradients do not band on a phone */
body.hp-hits-page::after {
	content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.hp-hits-page #content, body.hp-hits-page .site-main { position: relative; z-index: 1; }
body.hp-hits-page #content, body.hp-hits-page .site-main,
body.hp-hits-page .elementor-section, body.hp-hits-page .e-con { background-color: transparent; }
/* the site header is an overlay (~192px desktop, ~112px phone) and a bare page
   template starts its content at y=0 — the title rendered UNDER the nav */
body.hp-hits-page #content, body.hp-hits-page .site-main { padding-top: 208px; }
@media (max-width: 767px) { body.hp-hits-page #content, body.hp-hits-page .site-main { padding-top: 138px; } }
/* our hero replaces it — one heading per page */
body.hp-hits-page .page-content > h1:first-child,
body.hp-hits-page .entry-title,
body.hp-hits-page .page-header { display: none; }

/* ---------- hero ---------- */
.hp-hits-hero { position: relative; text-align: center; margin: 0 0 40px; }
.hp-hits-eyebrow {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 17px; border-radius: 999px; margin-bottom: 18px;
	font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: #ffe9b0;
	background: rgba(255, 194, 0, .1);
	background-color: rgba(255, 194, 0, .1); /* Elementor lazy-load blanks background-image */
	border: 1px solid rgba(255, 194, 0, .42);
	box-shadow: 0 4px 18px rgba(255, 194, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.hp-hits-title {
	font-family: var(--hph-display);
	/* background-clip:text clips to the LINE BOX, so a tight line-height ate the
	   descenders of ý/ž/ň — Slovak diacritics need the room above too */
	font-size: clamp(38px, 6.2vw, 74px); line-height: 1.28; font-weight: 700;
	padding-bottom: .08em; letter-spacing: -.015em; margin: 0; text-wrap: balance;
	/* the gradient is the decoration; the solid colour underneath is what a
	   browser that drops background-clip still shows */
	color: var(--hph-gold-hi);
	background: linear-gradient(178deg, #fff6d8 4%, var(--hph-gold-hi) 38%, var(--hph-gold) 68%, #e39a00 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 4px 22px rgba(255, 194, 0, .3));
}
.hp-hits-sub {
	max-width: 54ch; margin: 16px auto 0; font-size: 15.5px; line-height: 1.65;
	color: var(--hph-ink-dim);
}
/* art-deco rule: two hairlines with a gold lozenge between them */
.hp-hits-rule {
	display: block; width: min(280px, 62%); height: 12px; margin: 26px auto 0;
	background:
		linear-gradient(90deg, transparent, rgba(255, 194, 0, .55) 22%, rgba(255, 194, 0, .55) 40%, transparent 46%),
		linear-gradient(90deg, transparent 54%, rgba(255, 194, 0, .55) 60%, rgba(255, 194, 0, .55) 78%, transparent);
	background-size: 100% 1px, 100% 1px;
	background-position: center, center;
	background-repeat: no-repeat;
	position: relative;
}
.hp-hits-rule::before {
	content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
	margin: -4.5px 0 0 -4.5px; transform: rotate(45deg);
	background: linear-gradient(160deg, var(--hph-gold-hi), #d99a00);
	box-shadow: 0 0 12px rgba(255, 194, 0, .6);
}

/* ---------- rank chips, in the titles ----------
   NOT on the image: that corner already belongs to the Doručenie / BEST SELLER
   / Zľava badges and a fifth sticker there is a pile-up. */
.hp-hits-grid ul.products { counter-reset: hphit; }
.hp-hits-grid ul.products li.product .woocommerce-loop-product__title::before {
	content: counter(hphit); counter-increment: hphit;
	display: inline-grid; place-items: center; vertical-align: text-bottom;
	width: 24px; height: 24px; margin-right: 8px; border-radius: 50%;
	font-size: 13px; font-weight: 700; line-height: 1; font-style: normal;
	background: linear-gradient(160deg, #4a4a68, #2e2e48); color: #fff;
	border: 1.5px solid rgba(255, 255, 255, .3);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.hp-hits-grid ul.products li.product:nth-child(1) .woocommerce-loop-product__title::before {
	background: linear-gradient(160deg, var(--hph-gold-hi), #f5b301 60%, #d99a00); color: #2a1a00;
	border-color: rgba(255, 255, 255, .6); box-shadow: 0 2px 10px rgba(245, 179, 1, .6);
}
.hp-hits-grid ul.products li.product:nth-child(2) .woocommerce-loop-product__title::before {
	background: linear-gradient(160deg, #f2f2f6, #bfc3cf 60%, #9aa0b0); color: #22243a;
}
.hp-hits-grid ul.products li.product:nth-child(3) .woocommerce-loop-product__title::before {
	background: linear-gradient(160deg, #e8a06a, #b96d35 60%, #94511f); color: #2a1200;
}
/* ---------- the grid ----------
   Woo lays this out with FLOATS (display:block ul, float:left li), so tiles in
   a row are whatever height their own name needs and the buttons never line
   up. Real grid instead — and the ul's ::before/::after clearfixes MUST die
   with it, or those invisible pseudo-elements become grid ITEMS and shift
   every product one cell along. */
body.hp-hits-page .hp-hits-grid ul.products {
	display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 18px; margin: 0 !important; padding: 0 !important; list-style: none;
}
body.hp-hits-page .hp-hits-grid ul.products::before,
body.hp-hits-page .hp-hits-grid ul.products::after { content: none !important; display: none !important; }
body.hp-hits-page .hp-hits-grid ul.products li.product {
	float: none !important; width: auto !important; margin: 0 !important; clear: none !important;
}
@media (max-width: 1100px) { body.hp-hits-page .hp-hits-grid ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { body.hp-hits-page .hp-hits-grid ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* ---------- the tiles ----------
   A bare page gives the grid no card of its own, so the products floated on
   the gradient. One quiet glass tile each, and ONE title colour: the theme's
   magenta link colour on some rows and white on others read as a mistake. */
body.hp-hits-page .hp-hits-grid ul.products li.product {
	box-sizing: border-box; padding: 14px 14px 18px; border-radius: 18px; text-align: center;
	background: rgba(255, 255, 255, .045);
	background-color: rgba(255, 255, 255, .045); /* Elementor lazy-load blanks background-image */
	border: 1px solid rgba(255, 255, 255, .09);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.hp-hits-page .hp-hits-grid ul.products li.product:hover {
	transform: translateY(-4px); border-color: rgba(255, 194, 0, .35);
	box-shadow: 0 16px 38px rgba(0, 0, 0, .42), 0 0 26px rgba(255, 194, 0, .1);
}
body.hp-hits-page .hp-hits-grid ul.products li.product .woocommerce-loop-product__title {
	color: var(--hph-ink) !important; font-size: 15px; line-height: 1.4;
}
body.hp-hits-page .hp-hits-grid ul.products li.product a { text-decoration: none; }
/* tiles in a row are different heights because names are different lengths —
   pin the CTA to the bottom so the buttons form one line across the grid */
body.hp-hits-page .hp-hits-grid ul.products li.product { display: flex; flex-direction: column; }
/* Woo nests the image, the title AND the price inside the product LINK, so
   margin-top:auto on the price did nothing — it was not a flex child of the
   tile. Make the link the column that stretches, and push the price to ITS
   bottom; the button is the tile's own last child and follows underneath. */
body.hp-hits-page .hp-hits-grid ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex; flex-direction: column; flex: 1 1 auto;
}
/* Pushing only the BUTTON down aligned the buttons but left the prices
   floating at whatever height a 1-, 2- or 3-line product name ended at. Push
   the PRICE instead and the price+button block travels together, so both lines
   are straight across the row. */
body.hp-hits-page .hp-hits-grid ul.products li.product .price { margin: auto 0 12px; }
body.hp-hits-page .hp-hits-grid ul.products li.product .button,
body.hp-hits-page .hp-hits-grid ul.products li.product .hp-gramaz-wrap { margin-top: 0; }
/* reserve two lines for the name so short names do not shove the price up */
body.hp-hits-page .hp-hits-grid ul.products li.product .woocommerce-loop-product__title {
	min-height: 2.8em; margin: 0 0 6px;
}
/* the podium keeps a warm tint so the ranking reads without a second colour */
body.hp-hits-page .hp-hits-grid ul.products li.product:nth-child(-n+3) {
	background: rgba(255, 194, 0, .05);
	background-color: rgba(255, 194, 0, .05);
	border-color: rgba(255, 194, 0, .22);
}

/* the grid has no dark-page styles of its own on a bare page — pin what must
   stay legible, colours declared separately from any gradient */
body.hp-hits-page .hp-hits-grid .price { color: var(--hph-ink); font-size: 15px; }
body.hp-hits-page .hp-hits-grid .price del { color: rgba(244, 242, 255, .5); }
body.hp-hits-page .hp-hits-grid .price ins { color: var(--hph-gold); text-decoration: none; font-weight: 700; }

/* ---------- footer link ---------- */
.hp-hits-all { text-align: center; margin: 34px 0 0; }
.hp-hits-shop {
	display: inline-block; padding: 13px 30px; border-radius: 999px; text-decoration: none;
	font-weight: 700; letter-spacing: .02em; color: #2a1a00;
	background: linear-gradient(160deg, #ffd75e, #f5b301 60%, #d99a00);
	background-color: #f5b301; /* Elementor lazy-load blanks background-image — the colour must survive alone */
	box-shadow: 0 8px 22px rgba(245, 179, 1, .28), inset 0 1px 0 rgba(255, 255, 255, .5);
	transition: transform .15s ease, filter .15s ease;
}
.hp-hits-shop, .hp-hits-shop:hover { text-decoration: none !important; }
.hp-hits-shop:hover { filter: saturate(1.08); transform: translateY(-2px); color: #2a1a00; }

@media (prefers-reduced-motion: reduce) {
	body.hp-hits-page .hp-hits-grid ul.products li.product,
	.hp-hits-shop { transition: none; }
}