/* Halfskull: offer marketing (marquee highlight, checkout discount state, home hook + accordion) */

:root {
	--hs-of-red: var(--m3-primary, #e3001c);
	--hs-of-ink: var(--m3-ink, #131316);
	--hs-of-green: #0b7a3b;
}

/* ---------------------------------------------------------------
 * Marquee: the "Flat ₹49 OFF" line is highlighted
 * ------------------------------------------------------------- */
.hs-marquee__item--hot {
	background: var(--hs-of-red);
	color: #fff !important;
	padding: 3px 12px;
	border-radius: 999px;
	font-weight: 800;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
	animation: hs-of-glow 2.4s ease-in-out infinite;
}
@keyframes hs-of-glow {
	50% { box-shadow: 0 0 0 5px rgba(227, 0, 28, 0.35); }
}

/* ---------------------------------------------------------------
 * Checkout / cart banner: offer state, then "discount applied"
 * ------------------------------------------------------------- */
.hs-pay-offer { position: relative; overflow: hidden; transition: background 0.35s ease, box-shadow 0.35s ease, color 0.35s ease; }
.hs-pay-offer__text { font-weight: 700; }
.hs-pay-offer.is-applied {
	background: linear-gradient(100deg, #e6f7ec 0%, #f4fff8 50%, #e6f7ec 100%);
	box-shadow: inset 0 0 0 2px rgba(11, 122, 59, 0.55);
	color: #064d26;
}
.hs-pay-offer.is-applied .hs-pay-offer__icon { color: var(--hs-of-green); animation: hs-of-pop 0.6s cubic-bezier(0.34, 1.7, 0.64, 1); }
.hs-pay-offer.is-applied .hs-pay-offer__text b { color: var(--hs-of-green); }
.hs-pay-offer.is-applied::after {
	content: '';
	position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
	transform: skewX(-18deg);
	animation: hs-of-shine 1.1s ease 0.15s 1 both;
	pointer-events: none;
}
.hs-pay-offer.is-pop { animation: hs-of-bump 0.55s ease; }
@keyframes hs-of-pop { 0% { transform: scale(0.2) rotate(-40deg); } 100% { transform: none; } }
@keyframes hs-of-shine { to { left: 120%; } }
@keyframes hs-of-bump { 40% { transform: scale(1.03); } }

.hs-of-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hs-of-confetti i {
	position: absolute; top: 50%; left: 14%; width: 7px; height: 10px; border-radius: 2px; opacity: 0;
	animation: hs-of-fly 0.95s ease-out forwards;
}
@keyframes hs-of-fly {
	0% { opacity: 1; transform: translate(0, 0) rotate(0); }
	100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
}

/* the discount row in the order summary reads like a discount */
.wc-block-components-totals-fees .wc-block-components-totals-item__label,
.wc-block-components-totals-fees .wc-block-components-totals-item__value { color: var(--hs-of-green); font-weight: 800; }
.wc-block-components-totals-fees { animation: hs-of-rowin 0.5s ease; }
@keyframes hs-of-rowin { from { opacity: 0; transform: translateY(-6px); } }

/* ---------------------------------------------------------------
 * Home hook + accordion
 * ------------------------------------------------------------- */
.hs-hook { max-width: 1320px; margin: 0 auto; padding: 18px 15px; }
.hs-hook * { box-sizing: border-box; }
.hs-hook__card {
	position: relative; overflow: hidden; color: #fff; border-radius: 36px; padding: 34px 22px 22px;
	background: radial-gradient(900px 340px at 8% -10%, rgba(227, 0, 28, 0.55), transparent 60%), linear-gradient(160deg, #1b1b20, var(--hs-of-ink));
	box-shadow: 0 24px 50px -28px rgba(19, 19, 22, 0.7);
	display: grid; gap: 26px;
}
.hs-hook__eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #ff7a89; }
.hs-hook__title { margin: 0 0 10px; font-size: clamp(30px, 6vw, 52px); line-height: 1.04; letter-spacing: -0.025em; color: #fff; font-weight: 800; }
.hs-hook__at {
	display: inline-block; margin-top: 6px; padding: 2px 16px 6px; border-radius: 20px; background: var(--hs-of-red); color: #fff;
	transform: rotate(-2deg); box-shadow: 0 6px 0 #7d000f;
}
.hs-hook__sub { margin: 14px 0 20px; max-width: 520px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }
.hs-hook__sub b { color: #fff; background: rgba(227, 0, 28, 0.55); padding: 1px 8px; border-radius: 8px; }
.hs-hook__btn {
	display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 999px; background: #fff; color: var(--hs-of-ink);
	font-weight: 800; font-size: 16px; text-decoration: none; box-shadow: 0 5px 0 rgba(255, 255, 255, 0.35); transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.hs-hook__btn:hover { color: var(--hs-of-red); }
.hs-hook__btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }

.hs-acc { display: grid; gap: 10px; align-content: start; }
.hs-acc__item { border-radius: 22px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); transition: background 0.25s ease, box-shadow 0.25s ease; }
.hs-acc__item.is-open { background: rgba(255, 255, 255, 0.13); box-shadow: inset 0 0 0 2px var(--hs-of-red); }
.hs-acc__h { margin: 0; font-size: inherit; }
.hs-acc__btn {
	display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 12px; width: 100%; padding: 16px 16px; border: 0; background: none;
	color: #fff; font: inherit; font-size: 17px; font-weight: 700; text-align: left; cursor: pointer; border-radius: 22px;
}
.hs-acc__btn:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.hs-acc__num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: rgba(255, 255, 255, 0.15); transition: all 0.25s ease; }
.hs-acc__item.is-open .hs-acc__num { background: var(--hs-of-red); transform: rotate(-8deg) scale(1.08); }
.hs-acc__icon { position: relative; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); }
.hs-acc__icon::before, .hs-acc__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: #fff; border-radius: 2px; transition: transform 0.3s ease; }
.hs-acc__icon::after { transform: rotate(90deg); }
.hs-acc__item.is-open .hs-acc__icon::after { transform: rotate(0); }
.hs-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.hs-acc__item.is-open .hs-acc__panel { grid-template-rows: 1fr; }
.hs-acc__clip { overflow: hidden; min-height: 0; }
.hs-acc__body { padding: 0 18px 18px 62px; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.88); opacity: 0; transform: translateY(-4px); transition: opacity 0.3s ease 0.08s, transform 0.3s ease 0.08s; }
.hs-acc__item.is-open .hs-acc__body { opacity: 1; transform: none; }
.hs-acc__body p { margin: 0; }
.hs-acc__steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.hs-hook__tc { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.hs-hook__tc a { color: #fff; text-decoration: underline; }

@media (min-width: 900px) {
	.hs-hook__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); padding: 46px 44px 28px; gap: 40px; align-items: center; }
	.hs-hook__tc { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.hs-hook__card { border-radius: 28px; padding: 28px 16px 18px; }
	.hs-acc__body { padding-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.hs-marquee__item--hot, .hs-pay-offer *, .hs-pay-offer, .hs-acc__panel, .hs-acc__body, .hs-of-confetti i,
	.wc-block-components-totals-fees { animation: none !important; transition: none !important; }
}

.hs-pay-offer__sub { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; opacity: 0.8; }
.hs-acc__note { margin-top: 10px !important; font-size: 13px; opacity: 0.85; }

/* Photo fan inside the home hook */
.hs-tees { display: flex; justify-content: center; align-items: flex-end; margin: 26px 0 0; padding: 0 10px; min-height: 250px; }
.hs-tee {
	position: relative; display: block; flex: 0 0 auto; width: clamp(110px, 29vw, 178px); aspect-ratio: 3 / 4; margin: 0 -14px;
	border-radius: 22px; overflow: hidden; background: #2a2a31; border: 4px solid #fff; color: #fff; text-decoration: none;
	box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.7); transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.hs-tee--0 { transform: rotate(-7deg) translateY(8px); z-index: 1; }
.hs-tee--1 { transform: translateY(-10px); z-index: 3; }
.hs-tee--2 { transform: rotate(7deg) translateY(8px); z-index: 2; }
.hs-tee:hover, .hs-tee:focus-visible { transform: translateY(-16px) rotate(0) scale(1.04); z-index: 5; }
.hs-tee__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-tee__tag {
	position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 10px; border-radius: 999px;
	background: var(--hs-of-red); color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 3px 0 #7d000f;
}
.hs-tee__cap {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 10px 8px; font-size: 12px; font-weight: 700; line-height: 1.2;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.78)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 900px) { .hs-tees { justify-content: flex-start; padding-left: 14px; } }

/* Hook without the accordion: text left, photos right (stacked on phones) */
.hs-hook__card { align-items: center; }
.hs-hook .hs-tees { margin: 0; min-height: 0; justify-content: center; padding: 8px 6px 14px; }
@media (min-width: 900px) {
	.hs-hook .hs-tees { padding: 8px 10px 18px; }
	.hs-hook .hs-tee { width: clamp(150px, 15vw, 200px); }
}
@media (max-width: 899px) {
	.hs-hook__head { text-align: center; }
	.hs-hook__sub { margin-left: auto; margin-right: auto; }
	.hs-hook__tc { text-align: center; }
}