/* Rocken Power homepage.
   Deep green and gold, taken from the pack and the approved design. */

.rp-home {
	--green: #24421f;
	--green-d: #1a3016;
	--green-l: #3d6234;
	--gold: #c9a227;
	--gold-d: #a8851b;
	--ink: #17200f;
	--body: #5b6356;
	--line: #e6e3d8;
	--paper: #ffffff;
	--cream: #f8f7f1;

	color: var(--body);
	font-size: 16px;
	line-height: 1.65;
	overflow-x: clip;
}

.rp-home h1,
.rp-home h2,
.rp-home h3 {
	color: var(--ink);
	line-height: 1.15;
	margin: 0;
	text-wrap: balance;
}

.rp-home p { margin: 0; }
.rp-home img { display: block; height: auto; max-width: 100%; }
.rp-home ul { list-style: none; margin: 0; padding: 0; }
.rp-home .rp-i { flex: none; }

.rp-wrap {
	margin: 0 auto;
	max-width: 1200px;
	padding: 0 24px;
	width: 100%;
}

.rp-eyebrow {
	color: var(--gold-d);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.rp-center { text-align: center; }

/* ---------- buttons ---------- */

.rp-home .rp-btn {
	align-items: center;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 700;
	gap: 8px;
	letter-spacing: 0.06em;
	line-height: 1;
	padding: 15px 26px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.18s ease, color 0.18s ease;
}

/* Dark text on gold: white on #c9a227 is 2.4:1 and fails. */
.rp-home .rp-btn-gold { background: var(--gold); color: var(--ink); }
.rp-home .rp-btn-gold:hover,
.rp-home .rp-btn-gold:focus { background: var(--ink); color: #fff; }

.rp-home .rp-btn-green { background: var(--green); color: #fff; }
.rp-home .rp-btn-green:hover,
.rp-home .rp-btn-green:focus { background: var(--green-d); color: #fff; }

.rp-home .rp-btn-outline { background: transparent; border: 1.5px solid var(--gold); color: var(--ink); }
.rp-home .rp-btn-outline:hover { background: var(--gold); color: var(--ink); }

.rp-home .rp-btn-block { justify-content: center; width: 100%; }

.rp-home a:focus-visible,
.rp-home button:focus-visible,
.rp-home input:focus-visible { outline: 2px solid var(--gold-d); outline-offset: 3px; }

/* ---------- hero ---------- */

.rp-hero {
	background: linear-gradient(120deg, #f4f6ef 0%, #fbfaf5 46%, #f1f4ea 100%);
	overflow: hidden;
	/* The site header is an overlay and takes no layout space, so this padding
	   is the only thing holding the copy clear of its 87px. Do not rely on the
	   grid's min-height to do it: once the copy is taller than that min-height
	   the centring offset goes to zero and the pill lands under the logo. */
	padding: 150px 0 96px;
	position: relative;
}

.rp-hero-grid {
	align-items: center;
	display: grid;
	gap: 40px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	min-height: 460px;
}

/* The copy occupies the left column; the photograph is positioned against the
   section, not the grid, so it can bleed off the right edge of the viewport. */
.rp-hero-copy {
	grid-column: 1;
	position: relative;
	z-index: 2;
}

.rp-home .rp-pill {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--green);
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin-bottom: 22px;
	padding: 7px 16px;
	text-transform: uppercase;
}

.rp-hero h1 {
	color: var(--green);
	font-size: clamp(34px, 5vw, 56px);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.rp-home .rp-lede { font-size: 17px; margin: 20px 0 28px; max-width: 42ch; }

.rp-home .rp-hero-points {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 30px;
	margin-top: 38px;
}

.rp-hero-points li { align-items: center; color: var(--gold-d); display: flex; gap: 10px; }

/* The comp rings the first two marks and leaves the third bare. */
.rp-hero-points li.is-ringed .rp-i {
	border: 1.5px solid currentColor;
	border-radius: 50%;
	box-sizing: content-box;
	flex: none;
	padding: 4px;
}

.rp-hero-points span {
	color: var(--body);
	display: flex;
	flex-direction: column;
	font-size: 12px;
	line-height: 1.35;
}

.rp-hero-points b { color: var(--ink); font-size: 13px; }

/* The hero photograph. It runs the full height of the section and off the
   right edge of the viewport, as in the design. The left edge is masked so the
   greenery dissolves into the cream background instead of ending on a seam. */
.rp-hero-art {
	bottom: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	width: min(60%, 1000px);
	z-index: 1;
}

/* The photograph is cropped by the section, which leaves a straight edge along
   the bottom where the promises band does not cover it. Fade it out into the
   hero's own background colour instead of ending on a cut. */
.rp-hero-art::after {
	background: linear-gradient(to bottom, rgba(241, 244, 234, 0) 72%, #f1f4ea 100%);
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

.rp-hero-art img {
	border-radius: 0;
	height: 100%;
	object-fit: cover;
	object-position: 62% 60%;
	width: 100%;
	-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 15%, #000 34%);
	mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 15%, #000 34%);
}

.rp-hero-tab {
	background: var(--green);
	border-radius: 6px 0 0 6px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	padding: 14px 9px;
	position: absolute;
	right: 0;
	text-transform: uppercase;
	top: 38%;
	writing-mode: vertical-rl;
	z-index: 3;
}

/* ---------- promises ---------- */

.rp-promises {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(3, 1fr);
	margin-top: -52px;
	position: relative;
	z-index: 2;
}

.rp-promise {
	align-items: center;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 34px rgba(23, 32, 15, 0.09);
	color: var(--gold-d);
	display: flex;
	gap: 14px;
	padding: 24px 26px;
}

.rp-promise div { display: flex; flex-direction: column; }
.rp-promise b { color: var(--ink); font-size: 16px; }
.rp-promise span { color: var(--body); font-size: 13px; }

.rp-promise.is-featured { background: var(--green); color: var(--gold); }
.rp-promise.is-featured b { color: #fff; }
.rp-promise.is-featured span { color: rgba(255, 255, 255, 0.78); }

/* ---------- about ---------- */

.rp-about {
	align-items: center;
	display: grid;
	gap: 56px;
	grid-template-columns: 1fr 1fr;
	padding-bottom: 90px;
	padding-top: 90px;
}

.rp-about-art { position: relative; }
.rp-about-art img { border-radius: 12px; }

.rp-years {
	align-items: center;
	background: var(--green);
	border-radius: 50%;
	color: #fff;
	display: flex;
	flex-direction: column;
	font-size: 11px;
	height: 108px;
	justify-content: center;
	left: -26px;
	line-height: 1.2;
	position: absolute;
	text-align: center;
	top: -26px;
	width: 108px;
}

.rp-years b { color: var(--gold); font-size: 26px; font-weight: 800; }

.rp-about-copy h2 { font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; margin: 12px 0 18px; }
.rp-about-copy p { margin-bottom: 26px; }

/* ---------- why ---------- */

.rp-why {
	background-color: var(--green);
	background-position: center;
	background-size: cover;
	position: relative;
}

.rp-why::before {
	background: linear-gradient(90deg, rgba(26, 48, 22, 0.96) 0%, rgba(26, 48, 22, 0.86) 52%, rgba(26, 48, 22, 0.35) 100%);
	content: "";
	inset: 0;
	position: absolute;
}

.rp-why-inner { padding: 74px 24px; position: relative; }
.rp-why-copy { max-width: 56ch; }
.rp-why-copy h2 { color: #fff; font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: 0.01em; }
.rp-why-copy p { color: rgba(255, 255, 255, 0.82); margin: 18px 0 34px; }

.rp-why-points { display: flex; flex-wrap: wrap; gap: 26px 44px; }

.rp-why-points li {
	align-items: center;
	color: var(--gold);
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: center;
}

.rp-why-points span { color: #fff; font-size: 13px; font-weight: 600; line-height: 1.35; }

/* ---------- offer ---------- */

.rp-offer { padding: 90px 24px; }
.rp-offer > h2 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 700; margin: 12px auto 44px; max-width: 22ch; }

.rp-offer-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, 1fr);
}

.rp-offer-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	color: var(--green);
	padding: 32px 28px;
}

.rp-offer-card h3 { font-size: 19px; font-weight: 700; margin: 16px 0 12px; }
.rp-offer-card p { color: var(--body); font-size: 14px; }

.rp-offer-card.is-featured { background: var(--green); border-color: var(--green); }
.rp-offer-card.is-featured h3 { color: #fff; margin-top: 0; }
.rp-offer-card.is-featured p { color: rgba(255, 255, 255, 0.82); margin-bottom: 22px; }

.rp-contactbar {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 0;
	justify-content: center;
	margin: 40px auto 0;
	max-width: 100%;
	padding: 16px 12px;
	width: fit-content;
}

/* Each item carries its own side padding so the rule between them lands
   midway between the two, the way the design draws it. */
.rp-contactbar a {
	align-items: center;
	border-radius: 8px;
	color: var(--green-l);
	display: flex;
	gap: 14px;
	padding: 6px 34px;
	text-decoration: none;
	transition: background-color 0.18s ease;
}

.rp-contactbar a + a { border-left: 1px solid var(--line); color: var(--gold); }
.rp-contactbar a:hover,
.rp-contactbar a:focus-visible { background: var(--cream); }

.rp-contactbar span { color: var(--ink); display: flex; flex-direction: column; font-size: 17px; font-weight: 700; gap: 3px; }
.rp-contactbar b { color: var(--body); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; }

/* ---------- products ---------- */

.rp-products { padding-bottom: 80px; }

.rp-products-head {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 30px;
}

.rp-products-head h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; }
.rp-products-head p { color: var(--body); font-size: 14px; margin-top: 6px; }

.rp-product-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(5, 1fr);
}

.rp-product {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	padding: 16px;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.rp-product:hover { box-shadow: 0 14px 30px rgba(23, 32, 15, 0.1); transform: translateY(-3px); }

.rp-product-media {
	background: var(--cream);
	border-radius: 8px;
	display: block;
	margin-bottom: 16px;
	padding: 10px;
	position: relative;
}

.rp-product-media img { margin: 0 auto; mix-blend-mode: multiply; }

.rp-sale {
	background: var(--gold);
	border-radius: 3px;
	color: var(--ink);
	font-size: 10px;
	font-weight: 700;
	left: 10px;
	letter-spacing: 0.08em;
	padding: 4px 8px;
	position: absolute;
	text-transform: uppercase;
	top: 10px;
	z-index: 1;
}

.rp-product h3 { font-size: 14px; font-weight: 600; line-height: 1.4; margin-bottom: 10px; }
.rp-product h3 a { color: var(--ink); text-decoration: none; }
.rp-product h3 a:hover { color: var(--green-l); }

.rp-product .star-rating { font-size: 12px; margin-bottom: 8px; }

.rp-product-price { font-size: 15px; margin: auto 0 14px; }
.rp-product-price ins { background: none; color: var(--ink); font-weight: 700; text-decoration: none; }
.rp-product-price del { color: #949a8e; font-size: 13px; margin-right: 6px; }
.rp-product-price .amount { color: var(--ink); }
.rp-product-price del .amount { color: #949a8e; }

/* ---------- offer band ---------- */

.rp-offerband {
	align-items: center;
	background-color: var(--green);
	background-position: right center;
	background-size: cover;
	border-radius: 12px;
	display: grid;
	gap: 30px;
	grid-template-columns: auto 1fr auto;
	overflow: hidden;
	padding: 40px 44px;
	position: relative;
}

.rp-offerband::before {
	background: linear-gradient(90deg, rgba(26, 48, 22, 0.97) 0%, rgba(26, 48, 22, 0.88) 60%, rgba(26, 48, 22, 0.35) 100%);
	content: "";
	inset: 0;
	position: absolute;
}

.rp-offerband > * { position: relative; }

.rp-offerband-figure { align-items: baseline; color: var(--gold); display: flex; gap: 10px; }
.rp-offerband-figure b { font-size: 52px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.rp-offerband-figure span { color: #fff; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }

.rp-offerband-copy h2 { color: #fff; font-size: clamp(20px, 2.4vw, 27px); font-weight: 700; }
.rp-offerband-copy p { color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-top: 8px; }

/* ---------- trust row ---------- */

.rp-trustrow {
	display: grid;
	gap: 26px;
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: 70px;
	margin-top: 60px;
}

.rp-trustrow > div { align-items: flex-start; color: var(--gold-d); display: flex; gap: 14px; }
.rp-trustrow b { color: var(--ink); display: block; font-size: 14px; }
.rp-trustrow span { color: var(--body); font-size: 13px; line-height: 1.5; }

/* ---------- newsletter ---------- */

.rp-news {
	align-items: center;
	background: var(--green);
	border-radius: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
	margin-bottom: 70px;
	padding: 32px 52px;
}

.rp-news h2 { color: #fff; font-size: 26px; font-weight: 700; }
.rp-news p { color: rgba(255, 255, 255, 0.78); font-size: 14px; margin-top: 6px; }

.rp-news-form { align-items: center; display: flex; flex: 1; gap: 18px; justify-content: flex-end; min-width: 280px; }

/* The comp seats the submit inside the white pill rather than beside it, so
   the field is the pill and the input itself is transparent. */
.rp-news-field {
	align-items: center;
	background: #fff;
	border-radius: 999px;
	display: flex;
	flex: 1;
	max-width: 420px;
	padding: 5px;
}

.rp-news-form input {
	background: transparent;
	border: 0;
	color: var(--ink);
	flex: 1;
	font-size: 14px;
	min-width: 0;
	padding: 10px 16px;
}

/* Focus belongs on the pill; an outline on the transparent input would be
   drawn inside it and clipped by the radius. */
.rp-home .rp-news-form input:focus-visible { outline: 0; }
.rp-news-field:focus-within { box-shadow: 0 0 0 3px rgba(168, 133, 27, 0.6); }

.rp-news-form .rp-btn { flex: none; padding: 11px 20px; }

/* Decorative: the form already has its submit, so this is a mark, not a
   second control that would read as a duplicate button. */
.rp-news-mark {
	align-items: center;
	background: rgba(201, 162, 39, 0.3);
	border-radius: 50%;
	color: var(--gold);
	display: flex;
	flex: none;
	height: 46px;
	justify-content: center;
	width: 46px;
}

/* ---------- footer ---------- */

.rp-footer { background: var(--cream); border-top: 1px solid var(--line); }

.rp-footer-grid {
	display: grid;
	gap: 40px;
	grid-template-columns: 1.5fr repeat(3, 1fr) 1.3fr;
	padding-bottom: 46px;
	padding-top: 62px;
}

/* The mark is 476x123 and mostly wordmark, so it is capped on width rather than
   height; height:auto keeps it from being squashed by the grid. */
.rp-home .rp-footer-logo { height: auto; max-width: 190px; width: 100%; }
.rp-footer-word { color: var(--green); font-size: 22px; font-weight: 800; letter-spacing: 0.02em; }
.rp-footer-brand p { color: var(--body); font-size: 14px; margin-top: 16px; max-width: 30ch; }

.rp-footer-col h3 {
	color: var(--ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	margin-bottom: 18px;
	text-transform: uppercase;
}

.rp-footer-col li { margin-bottom: 10px; }
.rp-footer-col a { color: var(--body); font-size: 14px; text-decoration: none; }
.rp-footer-col a:hover { color: var(--green); text-decoration: underline; }

.rp-footer-contact li { align-items: flex-start; color: var(--gold-d); display: flex; gap: 10px; }
.rp-footer-contact span,
.rp-footer-contact address { color: var(--body); font-size: 14px; }

/* The postal address is marked up as <address>, which browsers italicise. */
.rp-home .rp-footer-contact address { font-style: normal; line-height: 1.55; margin: 0; }

.rp-footer-bar { border-top: 1px solid var(--line); padding: 18px 0; }

.rp-footer-bar .rp-wrap {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
}

.rp-footer-bar p { color: var(--body); font-size: 13px; }
.rp-pay { display: flex; flex-wrap: wrap; gap: 6px; }

/* Fixed tiles, contained marks: the six logos run from 1.3:1 (Mastercard) to
   3.8:1 (RuPay), so they are fitted rather than stretched. */
.rp-pay li {
	align-items: center;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 4px;
	display: flex;
	height: 34px;
	justify-content: center;
	padding: 5px 7px;
	width: 54px;
}

.rp-home .rp-pay img {
	height: 100%;
	object-fit: contain;
	width: 100%;
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
	.rp-hero-art { width: 56%; }
	/* Narrower crop: pull the framing left so the pack does not sit under the tab. */
	.rp-hero-art img { object-position: 50% 62%; }
	.rp-home .rp-lede { max-width: 34ch; }
	.rp-product-grid { grid-template-columns: repeat(3, 1fr); }
	.rp-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* Below 900px the copy needs the full width, so the photograph stops being a
   backdrop and becomes a band under it — masked at the top instead of the left. */
@media (max-width: 900px) {
	.rp-hero-grid,
	.rp-about { grid-template-columns: 1fr; }
	/* The site header is an overlay (see the header-overlay block in the
	   Customizer's Additional CSS), so it takes no layout space and the hero
	   starts underneath it. Both this and the desktop rule above clear the
	   87px header with their own top padding. */
	.rp-hero { padding: 118px 0 80px; }
	.rp-hero-grid { gap: 32px; min-height: 0; }
	.rp-hero-tab { display: none; }

	.rp-hero-art {
		bottom: auto;
		margin-top: 36px;
		position: relative;
		right: auto;
		top: auto;
		width: 100%;
	}

	.rp-hero-art::after { display: none; }

	.rp-hero-art img {
		height: clamp(240px, 46vw, 380px);
		object-position: 60% 62%;
		-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 24%, #000 82%, rgba(0, 0, 0, 0) 100%);
		mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 24%, #000 82%, rgba(0, 0, 0, 0) 100%);
	}
	.rp-about { gap: 40px; padding: 64px 24px; }
	.rp-promises { grid-template-columns: 1fr; margin-top: -40px; }
	.rp-offer-grid,
	.rp-trustrow { grid-template-columns: 1fr 1fr; }
	.rp-offerband { grid-template-columns: 1fr; text-align: left; }
	.rp-news { flex-direction: column; align-items: flex-start; }
	.rp-news-form { justify-content: flex-start; width: 100%; }
}

@media (max-width: 640px) {
	.rp-hero h1 br { display: none; }
	.rp-home .rp-hero-points { gap: 12px 22px; }
	.rp-product-grid,
	.rp-offer-grid,
	.rp-trustrow,
	.rp-footer-grid { grid-template-columns: 1fr; }
	.rp-why-inner { padding: 56px 24px; }
	.rp-why-points { gap: 22px 30px; }
	.rp-years { height: 88px; left: -12px; top: -12px; width: 88px; }
	.rp-years b { font-size: 22px; }
	.rp-offer { padding: 64px 24px; }
	.rp-news-form { width: 100%; }
	.rp-news-field { max-width: none; }
	.rp-news { padding: 28px 24px; }
	.rp-contactbar { width: auto; }
	.rp-contactbar a { padding: 8px 14px; width: 100%; }
	.rp-contactbar a + a { border-left: 0; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.rp-home * { transition: none !important; }
	.rp-product:hover { transform: none; }
}