/* =============================================================================
   REMEDA - home page layer
   -----------------------------------------------------------------------------
   Sits on top of assets/css/brand.css, which carries the design tokens and every
   shared component. Linked after it on index.html only. Anything that turned out
   to be shared with the shop, product, cart or blog pages has moved to brand.css;
   what remains here is genuinely home-page-only - the hero, the brand story, the
   section banding and the blog carousel.
   ========================================================================== */

/* The stock 100/150px rhythm is outsized next to everything else on the page.
   (.product-section is a coloured band and takes padding instead - see below.) */
.index-blog-section.mt-100 { margin-top: 84px !important; }
.index-blog-section.mb-150 { margin-bottom: 84px !important; }
.instagram-feed-section { margin-top: 84px !important; margin-bottom: 0 !important; padding-bottom: 84px; }

/* -----------------------------------------------------------------------------
   2. Section rhythm
   Alternating cream bands. Previously every section sat on pure white back to
   back, so the page read as one undifferentiated scroll and the cards' shadows
   had nothing to sit against.
   -------------------------------------------------------------------------- */
/* Order down the page: trust bar (cream-deep) → story → products → blog →
   Instagram. The story leads, so it takes white to separate it from the
   cream-deep trust bar directly above, and the products take the cream band -
   which also gives the white product cards something to sit against. */
.brand-story-section { background: var(--r-white); }
.product-section     { background: var(--r-cream); }
.index-blog-section  { background: var(--r-white); }
.instagram-feed-section { background: var(--r-cream); }

/* Bands must reach the viewport edge; the sections are plain divs in normal
   flow, so they already do - this just pads them off their neighbours. */
.brand-story-section,
.instagram-feed-section { padding-top: 84px; }
.brand-story-section { padding-bottom: 84px; }

/* The product section is a coloured band now, so its spacing has to be padding.
   As margins it would leave the page background showing above and below the
   cream, splitting the band away from its own whitespace. */
.product-section.mt-100 { margin-top: 0 !important; padding-top: 84px; }
.product-section.mb-150 { margin-bottom: 0 !important; padding-bottom: 84px; }

/* -----------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */
/* A flat 40% wash left the white headline fighting the bright honeycomb
   photography. A directional scrim keeps the type legible without dulling the
   whole image the way a heavier flat overlay would. */
.single-homepage-slider:after {
	opacity: 1;
	background: linear-gradient(
		100deg,
		rgba(20, 13, 7, 0.78) 0%,
		rgba(20, 13, 7, 0.55) 38%,
		rgba(20, 13, 7, 0.22) 68%,
		rgba(20, 13, 7, 0.34) 100%
	);
}
/* Slides 2 and 3 centre and right-align their text, so the dark end of the
   scrim has to follow it. */
.homepage-bg-2:after {
	background: linear-gradient(
		180deg,
		rgba(20, 13, 7, 0.30) 0%,
		rgba(20, 13, 7, 0.62) 50%,
		rgba(20, 13, 7, 0.30) 100%
	);
}
.homepage-bg-3:after {
	background: linear-gradient(
		260deg,
		rgba(20, 13, 7, 0.78) 0%,
		rgba(20, 13, 7, 0.55) 38%,
		rgba(20, 13, 7, 0.22) 68%,
		rgba(20, 13, 7, 0.34) 100%
	);
}

.hero-text p.subtitle {
	color: var(--r-honey);
	letter-spacing: 4.5px;
	font-size: 13px;
	margin-bottom: 18px;
}
.hero-text h1 {
	font-size: 58px;
	line-height: 1.12;
	letter-spacing: -1px;
	max-width: 15ch;
	text-shadow: 0 2px 24px rgba(20, 13, 7, 0.45);
}
.homepage-bg-2 .hero-text h1 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.homepage-bg-3 .hero-text h1 { max-width: 20ch; margin-left: auto; }

/* The stagger used to be applied as inline styles from main.js, which is what
   made the text impossible to recover once the animation failed to restart.
   It belongs here. */
.hero-text-tablecell h1.animated { animation-delay: 0.15s; }
.hero-btns.animated { animation-delay: 0.3s; }

/* --- Hero call to action ---
   The single biggest gap in the old page: the most valuable space on a shop
   had no action in it at all. */
.hero-btns {
	margin-top: 34px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
.homepage-bg-2 .hero-btns { justify-content: center; }
.homepage-bg-3 .hero-btns { justify-content: flex-end; }

.hero-btns a {
	font-family: 'Poppins', sans-serif;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 30px;
	border-radius: var(--r-radius);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
/* Ink on honey is 7.7:1 - a white-on-amber button would have scraped past AA
   at 4.58:1, and dark type on gold reads far more premium besides. */
.hero-btns a.boxed-btn {
	background-color: var(--r-honey);
	color: var(--r-ink);
	border: 2px solid var(--r-honey);
	box-shadow: 0 6px 20px rgba(20, 13, 7, 0.28);
}
.hero-btns a.boxed-btn:hover {
	background-color: var(--r-honey-deep);
	border-color: var(--r-honey-deep);
	color: var(--r-ink);
	transform: translateY(-2px);
}
.hero-btns a.bordered-btn {
	background-color: rgba(255, 255, 255, 0.06);
	border: 2px solid rgba(255, 255, 255, 0.75);
	color: #fff;
	margin-left: 0;
	backdrop-filter: blur(2px);
}
.hero-btns a.bordered-btn:hover {
	background-color: #fff;
	border-color: #fff;
	color: var(--r-ink);
	transform: translateY(-2px);
}

/* Slider arrows: the template's bare 48px chevrons floated unanchored over the
   photograph. */
.homepage-slider .owl-prev,
.homepage-slider .owl-next {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(20, 13, 7, 0.34) !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	color: #fff !important;
	font-size: 20px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.2s ease;
}
.homepage-slider .owl-prev:hover,
.homepage-slider .owl-next:hover {
	background: var(--r-honey) !important;
	border-color: var(--r-honey) !important;
	color: var(--r-ink) !important;
	transform: scale(1.06);
}

/* -----------------------------------------------------------------------------
   4. Product cards
   The old card inverted its own hierarchy: a black full-bleed "Saznaj više" bar
   was the loudest element while the actual buy action was a thin outlined icon
   floating over the text. Buying is now the primary action and the detail link
   is a quiet secondary.
   -------------------------------------------------------------------------- */
/* Only the padding is home-page-specific: the secondary link below is
   full-bleed and cancels it with a negative margin. */
.product-section .single-product-item {
	padding: 18px 18px 0;
}

.product-section .product-image {
	padding: 10px 20px 0;
	background: transparent;
}
.product-section .product-image img {
	width: auto;
	max-width: 100%;
	margin-bottom: 14px;
	transition: transform 0.35s ease;
}

.product-section .index-product-card .product-info-inner h3 {
	font-size: 17px;
	font-weight: 600;
	color: var(--r-ink);
	margin-bottom: 6px;
}
/* Price used to be 30px/700 against a 20px/600 product name - the number was
   shouting louder than the thing being sold. */
.product-section .index-product-card .product-price {
	font-size: 19px !important;
	font-weight: 700;
	color: var(--r-amber-text);
	line-height: 1.4;
}
/* The span inside .product-price is the size/volume sub-label ("20ml", "50ml"). */
.product-section .index-product-card .product-price span {
	display: block;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--r-ink-soft);
	opacity: 1;
	letter-spacing: 0.2px;
}
/* Except on the honey card, where the span IS the price - the weight selector
   above it already states the size, and the figure is rewritten by JS when the
   shopper switches between 465 g and 950 g. */
.product-section .index-product-card .product-price #med-price-display {
	display: inline;
	font-size: inherit;
	font-weight: 700;
	color: inherit;
	letter-spacing: inherit;
}
/* The cart icon no longer floats over the centred text. */
.product-section .index-product-card .product-info-row {
	margin-bottom: 16px;
	padding: 0;
}

/* Primary action.
   The card is a flex column whose children are ordered explicitly (image 1,
   variant selector 2, title/price 3). The buy button now sits between the price
   and the detail link rather than floating over the text. */
.product-section .index-product-card .product-cart-icon { order: 4; }
.product-section .index-product-card .btn-saznaj-vise { order: 5; }

.product-section .index-product-card .product-cart-icon {
	position: static;
	transform: none;
	width: 100%;
	height: auto;
	border-radius: var(--r-radius);
	border: 2px solid var(--r-honey);
	background: var(--r-honey);
	color: var(--r-ink);
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding: 12px 16px;
	gap: 9px;
	margin-bottom: 12px;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.product-section .index-product-card .product-cart-icon:hover {
	background: var(--r-honey-deep);
	border-color: var(--r-honey-deep);
	color: var(--r-ink);
}
.product-section .index-product-card .product-cart-icon i { font-size: 15px; }

/* Secondary action - was a heavy black full-bleed bar, now a quiet link. */
.product-section .index-product-card .btn-saznaj-vise {
	margin: 0 -18px;
	padding: 13px 20px;
	background: transparent;
	border-top: 1px solid var(--r-line);
	border-radius: 0;
	color: var(--r-amber-text) !important;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.7px;
	transition: background 0.2s ease, color 0.2s ease;
}
.product-section .index-product-card .btn-saznaj-vise:hover {
	background: var(--r-cream);
	color: var(--r-ink) !important;
}

/* The candle card is the only one with six variants; letting them wrap keeps
   it aligned with its neighbour instead of overflowing at narrow widths. */
.product-section .color-buttons { flex-wrap: wrap !important; }

/* -----------------------------------------------------------------------------
   5. Brand story
   The reason someone buys artisanal honey over supermarket honey - the farm,
   the altitude, the twenty years - previously appeared once, in small text, in
   the footer.
   -------------------------------------------------------------------------- */
.brand-story-inner {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 60px;
	align-items: center;
}
.brand-story-media {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var(--r-shadow-lg);
	aspect-ratio: 4 / 3;
}
.brand-story-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.brand-story-eyebrow {
	color: var(--r-amber-text);
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 3.4px;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.brand-story-title {
	font-size: 36px;
	line-height: 1.18;
	letter-spacing: -0.6px;
	color: var(--r-ink);
	margin-bottom: 18px;
}
.brand-story-text {
	color: var(--r-ink-soft);
	font-size: 16px;
	line-height: 1.85;
	margin-bottom: 26px;
}
.brand-story-facts {
	display: flex;
	gap: 34px;
	margin-bottom: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--r-line);
	flex-wrap: wrap;
}
.brand-story-fact strong {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 27px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--r-amber-text);
}
.brand-story-fact span {
	display: block;
	font-size: 12.5px;
	color: var(--r-ink-soft);
	letter-spacing: 0.4px;
	margin-top: 4px;
}
.brand-story-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--r-ink);
	border-bottom: 2px solid var(--r-honey);
	padding-bottom: 5px;
	transition: gap 0.2s ease, color 0.2s ease;
}
.brand-story-link:hover { color: var(--r-amber-text); gap: 15px; }

@media only screen and (max-width: 991px) {
	.brand-story-inner { grid-template-columns: 1fr; gap: 34px; }
	.brand-story-title { font-size: 29px; }
	.brand-story-media { aspect-ratio: 16 / 10; }
}

/* -----------------------------------------------------------------------------
   6. Blog cards + Instagram
   -------------------------------------------------------------------------- */
.index-blog-card {
	border: 1px solid var(--r-line);
	border-radius: 10px;
	box-shadow: var(--r-shadow-sm);
}
.index-blog-card:hover {
	box-shadow: var(--r-shadow-md);
	border-color: rgba(192, 122, 30, 0.35);
}
.index-blog-card-body h3 { color: var(--r-ink); font-size: 1.1rem; }
.index-blog-card-link:hover .index-blog-card-body h3 { color: var(--r-amber-text); }
.index-blog-date {
	color: var(--r-ink-soft);
	font-size: 0.78rem;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}
.index-blog-excerpt { color: var(--r-ink-soft); }
.index-blog-read-more { color: var(--r-amber-text); }
.index-blog-card-link:hover .index-blog-read-more { color: var(--r-ink); }

/* Bootstrap's default grey was another stray hue. */
.index-blog-section .owl-prev,
.index-blog-section .owl-next {
	background: var(--r-white) !important;
	border: 1px solid var(--r-line) !important;
	color: var(--r-ink) !important;
	box-shadow: var(--r-shadow-md);
}
.index-blog-section .owl-prev:hover,
.index-blog-section .owl-next:hover {
	background: var(--r-honey) !important;
	border-color: var(--r-honey) !important;
	color: var(--r-ink) !important;
}

.ig-feed-item { border-radius: 6px; background: var(--r-cream-deep); }
.ig-follow-btn { background: var(--r-ink); }
.ig-follow-btn:hover { background: var(--r-amber-text); }

/* -----------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
	.hero-text h1 { font-size: 42px; }
	.section-title h3, .section-title h1 { font-size: 30px; }
	.section-title { margin-bottom: 40px; }
	.index-blog-section.mt-100 { margin-top: 60px !important; }
	.index-blog-section.mb-150 { margin-bottom: 60px !important; }
	.product-section.mt-100 { padding-top: 60px; }
	.product-section.mb-150 { padding-bottom: 60px; }
	.brand-story-section,
	.instagram-feed-section { padding-top: 60px; }
	.brand-story-section { padding-bottom: 60px; }
}

@media only screen and (max-width: 767px) {
	.hero-text h1 { font-size: 33px; max-width: none; }
	.hero-text p.subtitle { letter-spacing: 3px; font-size: 12px; }
	.hero-btns { margin-top: 26px; gap: 10px; }
	.hero-btns a { padding: 12px 22px; font-size: 13px; }
	/* Side by side while both labels fit, then full-width stacked - which is
	   what actually happens for most of this range, and is the right target
	   size for a thumb either way. */
	.hero-btns a.boxed-btn,
	.hero-btns a.bordered-btn { flex: 1 1 auto; justify-content: center; }

	/* The strip ran edge to edge with 2px of padding, so the text touched the
	   screen edge. */
	.promo-strip .container { padding-left: 18px; padding-right: 18px; }
	.promo-column { padding: 12px 0; }
	.promo-column:first-child {
		border-right: none;
		border-bottom: 1px solid var(--r-line);
	}
	.brand-story-facts { gap: 24px; }
	.brand-story-fact strong { font-size: 23px; }
}

/* -----------------------------------------------------------------------------
   8. Reduced motion (home-page additions; the global reset is in brand.css)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.index-blog-card:hover { transform: none; }
}