/**
 * Laptop, tablet and mobile layouts.
 */

/* ---------- Laptop ---------- */
@media (max-width: 1366px) {
	:root {
		--hs-gutter: 28px;
	}

	.hs-rail .hs-carousel > .hs-carousel__arrow--prev {
		inset-inline-start: -38px;
	}

	.hs-rail .hs-carousel > .hs-carousel__arrow--next {
		inset-inline-end: -38px;
	}
}

@media (max-width: 1280px) {
	.hs-masthead__inner {
		gap: 20px;
	}

	.hs-actions {
		gap: 18px;
	}

	.hs-action {
		font-size: 13.5px;
	}

	.hs-nav__link,
	.hs-feature {
		font-size: 13.5px;
	}

	.hs-nav__link {
		padding-inline: 6px;
	}

	.hs-footer__brand,
	.hs-footer__news {
		flex-basis: 100%;
		padding-inline: 0;
		border: 0;
	}

	.hs-footer__news {
		max-width: 560px;
	}
}

@media (max-width: 1180px) {
	.hs-action--wishlist .hs-action__label,
	.hs-action--account .hs-action__label {
		display: none;
	}

	.hs-rail__slide {
		width: calc((100% - (min(var(--rail-cols, 5), 4) - 1) * var(--hs-card-gap)) / min(var(--rail-cols, 5), 4));
	}

	.hs-nav__featured .hs-feature__icon {
		display: none;
	}
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	:root {
		--hs-gutter: 20px;
		--hs-card-gap: 12px;
		--hs-section-gap: 22px;
	}

	html {
		scroll-padding-top: 16px;
	}

	/* Header scrolls with the page on small screens. */
	.hs-header {
		position: relative;
		inset: auto;
	}

	.admin-bar .hs-header {
		inset-block-start: 0;
	}

	.hs-masthead__inner {
		flex-wrap: wrap;
		gap: 10px 14px;
		min-height: 0;
		padding-block: 10px 12px;
	}

	.hs-menu-toggle {
		display: inline-flex;
	}

	.hs-logo .hs-logo__img {
		height: 44px;
	}

	.hs-deliver {
		display: none;
	}

	.hs-search {
		order: 5;
		flex: 1 0 100%;
		max-width: none;
		height: 44px;
	}

	.hs-actions {
		gap: 16px;
	}

	.hs-action__label,
	.hs-action--lang > svg:last-child {
		display: none;
	}

	.hs-action--lang .hs-action__label {
		display: inline;
		font-size: 13px;
	}

	/* Navigation: one swipeable row, no dropdowns (the drawer has the full tree). */
	.hs-nav__inner {
		min-height: 44px;
		padding-inline: 0;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.hs-nav__inner::-webkit-scrollbar {
		display: none;
	}

	.hs-allcats,
	.hs-nav__link > svg,
	.hs-nav__sub {
		display: none;
	}

	.hs-nav__list {
		flex: none;
		justify-content: flex-start;
		padding-inline-start: var(--hs-gutter);
	}

	.hs-nav__featured {
		margin-inline-start: 4px;
	}

	.hs-hero__slide {
		height: clamp(360px, 52vw, 480px);
	}

	.hs-hero__copy {
		padding-inline: 24px 0;
		max-width: 460px;
	}

	.hs-cats__item {
		width: 92px;
		min-width: 92px;
	}

	.hs-cats__thumb {
		width: 88px;
		height: 88px;
	}

	.hs-cats > .hs-carousel__arrow {
		display: none;
	}

	.hs-rail {
		padding: 18px 16px 20px;
	}

	.hs-rail__slide {
		width: calc((100% - 2 * var(--hs-card-gap)) / 3.15);
	}

	.hs-carousel > .hs-carousel__arrow {
		display: none;
	}

	.hs-section-head__title {
		font-size: 24px;
	}

	.hs-promo__copy {
		padding-inline: 22px 10px;
		width: 66%;
	}

	.hs-footer__grid {
		gap: 28px;
		padding-block: 36px 28px;
	}

	.hs-floating {
		bottom: 16px;
		inset-inline-end: 16px;
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	:root {
		--hs-gutter: 16px;
		--hs-card-gap: 10px;
		--hs-section-gap: 18px;
	}

	/* Announcement: one message at a time (header.js rotates them). */
	.hs-announcement {
		font-size: 12.5px;
	}

	.hs-announcement__inner {
		min-height: 36px;
	}

	.hs-announcement__list {
		justify-content: center;
	}

	.hs-announcement__item {
		display: none;
		padding-inline: 0;
		text-align: center;
	}

	.hs-announcement__item.is-active {
		display: inline-flex;
		animation: hs-fade 0.4s ease;
	}

	.hs-announcement__item + .hs-announcement__item {
		border: 0;
	}

	.hs-logo .hs-logo__img {
		height: 40px;
		max-width: 140px;
	}

	.hs-menu-toggle {
		width: 36px;
		height: 36px;
	}

	.hs-actions {
		gap: 14px;
	}

	.hs-action--wishlist,
	.hs-action--lang {
		display: none;
	}

	.hs-nav__link,
	.hs-feature {
		font-size: 13.5px;
	}

	.hs-feature.is-highlight {
		padding-inline: 16px;
	}

	/* Hero: portrait crop, copy at the bottom over a bottom-up wash. */
	.hs-hero__slide {
		height: min(118vw, 500px);
	}

	.hs-hero__slide.has-copy .hs-hero__media::after,
	[dir="ltr"] .hs-hero__slide.has-copy .hs-hero__media::after {
		background: linear-gradient(to top, rgba(26, 22, 16, 0.72) 0%, rgba(26, 22, 16, 0.4) 38%, rgba(26, 22, 16, 0) 64%);
	}

	.hs-hero__content {
		align-items: flex-end;
		padding-bottom: 46px;
	}

	.hs-hero__copy {
		padding-inline: 0;
		gap: 8px;
	}

	.hs-hero__title {
		font-size: 30px;
	}

	.hs-hero__text {
		font-size: 15.5px;
	}

	.hs-hero__btn {
		margin-top: 6px;
		min-height: 42px;
	}

	.hs-hero > .hs-carousel__arrow {
		display: none;
	}

	.hs-cats {
		margin-top: 18px;
		margin-bottom: 20px;
	}

	.hs-cats__track {
		gap: 8px;
	}

	.hs-cats__item {
		width: 80px;
		min-width: 80px;
	}

	.hs-cats__thumb {
		width: 74px;
		height: 74px;
	}

	.hs-cats__link {
		gap: 8px;
	}

	.hs-cats__label {
		font-size: 12.5px;
	}

	/* Rails bleed to the screen edge so the next card peeks in. */
	.hs-rail {
		margin-inline: calc(-1 * var(--hs-gutter));
		padding: 16px var(--hs-gutter) 18px;
		border-radius: 0;
		border-inline: 0;
	}

	.hs-section-head {
		margin-bottom: 12px;
	}

	.hs-section-head__title {
		font-size: 20px;
	}

	.hs-section-head__more {
		font-size: 13.5px;
	}

	.hs-rail__slide {
		width: calc((100% - var(--hs-card-gap)) / var(--rail-cols-m, 2.15));
	}

	.hs-card__body {
		padding: 10px 10px 12px;
		gap: 5px;
	}

	.hs-card__title {
		font-size: 13.5px;
	}

	.hs-card__rating {
		font-size: 12px;
	}

	.hs-price__amount {
		font-size: 16.5px;
	}

	.hs-price__currency {
		font-size: 12.5px;
	}

	.hs-card__foot {
		flex-direction: column;
		align-items: stretch;
	}

	.hs-card__actions,
	.hs-card .hs-card__cart {
		width: 100%;
	}

	.hs-card .hs-card__cart {
		font-size: 13px;
		padding-inline: 8px;
	}

	.hs-card__badge {
		font-size: 11.5px;
		padding: 2px 8px;
	}

	/* Banners stack, mobile crop. */
	.hs-promos {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.hs-promo {
		aspect-ratio: 10 / 7;
	}

	.hs-promo__media::after,
	[dir="ltr"] .hs-promo__media::after {
		background: linear-gradient(to top, rgba(40, 28, 18, 0.78) 0%, rgba(40, 28, 18, 0.35) 45%, rgba(40, 28, 18, 0) 70%);
	}

	.hs-promo__copy {
		inset-block: auto 0;
		width: 100%;
		padding: 18px;
	}

	.hs-promo__text {
		font-size: 14px;
	}

	.hs-promo__btn {
		margin-top: 6px;
	}

	.hs-footer {
		margin-top: 28px;
	}

	.hs-footer__grid {
		gap: 26px 18px;
	}

	.hs-footer__col {
		flex-basis: calc(50% - 9px);
	}

	.hs-footer__logo .hs-footer__logo-img {
		height: 52px;
	}

	.hs-footer__bottom-inner {
		justify-content: center;
		text-align: center;
	}

	.hs-floating__btn {
		width: 48px;
		height: 48px;
	}
}

@media (max-width: 380px) {
	.hs-rail__slide {
		width: calc((100% - var(--hs-card-gap)) / max(1.15, calc(var(--rail-cols-m, 2.15) - 0.3)));
	}

	.hs-actions {
		gap: 10px;
	}

	.hs-logo .hs-logo__img {
		height: 36px;
	}
}

@keyframes hs-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.hs-carousel__track,
	.hs-hero__track {
		scroll-behavior: auto;
	}
}

/* Kleft 1.3: contained hero on phones. */
@media (max-width: 767px) {
	.hs-hero {
		margin-top: 10px;
		border-radius: var(--hs-radius-md);
		box-shadow: none;
	}

	.hs-hero__slide {
		height: min(112vw, 470px);
	}
}

/* ======================================================================
 * Kleft 1.3.1 — density pass: the same design at a calmer scale so more
 * products and categories fit on each screen (product rails appear sooner).
 * ==================================================================== */

@media (min-width: 1025px) {
	:root {
		--hs-section-gap: 20px;
	}

	/* Hero: still the main event, but no longer the whole first screen. */
	.hs-hero {
		margin-top: 12px;
	}

	.hs-hero__slide {
		height: clamp(300px, 26vw, 400px);
	}

	.hs-hero__title {
		font-size: clamp(30px, 2.9vw, 44px);
	}

	/* Category circles. */
	.hs-cats {
		margin-top: 18px;
		margin-bottom: 20px;
	}

	.hs-cats__thumb {
		width: 92px;
		height: 92px;
	}

	.hs-cats__item {
		min-width: 96px;
	}

	.hs-cats__link {
		gap: 9px;
	}

	.hs-cats__label {
		font-size: 14px;
	}

	.hs-cats > .hs-carousel__arrow {
		top: 46px;
	}

	/* Section panels and headings. */
	.hs-rail,
	.hs-group {
		padding: 16px 20px 20px;
	}

	.hs-section-head {
		margin-bottom: 12px;
	}

	.hs-section-head__title {
		font-size: 23px;
	}

	.hs-section-head__sub {
		font-size: 14px;
	}

	.hs-rail .hs-carousel > .hs-carousel__arrow--prev {
		inset-inline-start: -40px;
	}

	.hs-rail .hs-carousel > .hs-carousel__arrow--next {
		inset-inline-end: -40px;
	}

	/* Product cards: same design, tighter body. */
	.hs-card__body {
		gap: 4px;
		padding: 10px 12px 12px;
	}

	.hs-card__title {
		font-size: 14.5px;
		line-height: 1.4;
	}

	/* Category groups: compact photo + tiles. */
	.hs-group__body {
		gap: 12px;
	}

	.hs-group__feature {
		min-height: 0;
	}

	.hs-group__tiles {
		gap: 12px;
	}

	.hs-tile__media {
		aspect-ratio: 2 / 1;
	}

	.hs-tile__body {
		padding: 8px 10px 10px;
		padding-inline-end: 40px;
	}

	.hs-tile__label {
		font-size: 14px;
	}

	.hs-tile__count {
		font-size: 12.5px;
	}

	.hs-tile__go {
		bottom: 10px;
		width: 26px;
		height: 26px;
	}

	.hs-group__copy {
		gap: 4px;
		padding: 18px 22px;
	}

	.hs-group__title {
		font-size: clamp(20px, 1.6vw, 25px);
	}

	.hs-group__text {
		font-size: 14px;
	}

	.hs-group__btn {
		margin-top: 8px;
		min-height: 36px;
		padding-inline: 18px;
		font-size: 14px;
	}

	.hs-group--banner .hs-group__feature {
		aspect-ratio: 5.4 / 1;
	}

	.hs-group--banner .hs-group__title {
		font-size: clamp(22px, 1.9vw, 28px);
	}

	.hs-group--mosaic .hs-tile__media {
		aspect-ratio: 3 / 2;
	}

	/* Banners. */
	.hs-promos {
		gap: 14px;
	}

	.hs-promo {
		aspect-ratio: 3.1 / 1;
	}

	.hs-promos--1 .hs-promo {
		aspect-ratio: 4.6 / 1;
	}

	.hs-promo__title {
		font-size: clamp(20px, 1.7vw, 26px);
	}

	.hs-promo__text {
		font-size: 14.5px;
	}

	.hs-promo__btn {
		margin-top: 8px;
		min-height: 36px;
	}

	/* Service highlights. */
	.hs-features__item {
		padding: 14px 18px;
	}

	.hs-features__icon {
		width: 42px;
		height: 42px;
	}

	.hs-features__icon svg {
		width: 21px;
		height: 21px;
	}
}

@media (max-width: 1024px) {
	.hs-hero__slide {
		height: clamp(300px, 44vw, 400px);
	}

	.hs-group__feature {
		aspect-ratio: 2.4 / 1;
	}

	.hs-tile__media {
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 767px) {
	:root {
		--hs-section-gap: 14px;
	}

	.hs-hero__slide {
		height: min(104vw, 430px);
	}

	.hs-group__feature,
	.hs-group--banner .hs-group__feature,
	.hs-group--mosaic .hs-group__feature {
		aspect-ratio: 16 / 10;
	}

	.hs-promo,
	.hs-promos--1 .hs-promo {
		aspect-ratio: 16 / 9;
	}

	.hs-tile__media {
		aspect-ratio: 4 / 3;
	}

	.hs-group--mosaic .hs-tile__media {
		aspect-ratio: 1 / 1;
	}
}

/* ======================================================================
 * Kleft 1.5 — rhythm: deliberate breathing room between blocks, more
 * before each chapter (a new part of the store), rails kept compact.
 * ==================================================================== */
:root {
	--hs-section-gap: 28px;
}

.hs-chapter {
	margin-top: 48px;
	padding-top: 6px;
}

.hs-chapter__head {
	margin-bottom: 16px;
}

.hs-crow {
	margin-bottom: 30px;
}

@media (max-width: 1024px) {
	:root {
		--hs-section-gap: 24px;
	}
}

@media (max-width: 767px) {
	:root {
		--hs-section-gap: 18px;
	}

	.hs-chapter {
		margin-top: 32px;
	}

	.hs-crow {
		margin-bottom: 20px;
	}
}