/**
 * The offers strip under the header.
 *
 * Built on scroll-snap rather than a slider library: the track is a real
 * horizontally scrolling element, so it swipes natively on a phone, keeps
 * working with JavaScript off, and the arrows and dots only drive the scroll
 * position.
 */

.diwan-offers {
	color: var(--diwan-text, #000);
	/* The space around the strip, per screen, is set in Offers -> Banner
	   settings and written onto the strip. */
	margin-block: var(--diwan-offers-above, 15px) var(--diwan-offers-below, 24px);
	position: relative;
}

/* Named on the one element that needs it rather than on every link in the
   strip. A blanket ".diwan-offers a" outranks a single class, so it reaches
   past the banner link and repaints any button that lands in here later. That
   is how the same black-on-black button keeps coming back. */
.diwan-offers__link {
	color: inherit;
}

/* The arrows are positioned against this, so it is here whether or not the
   strip is also carrying the site's box. */
.diwan-offers__frame {
	position: relative;
}

/* Square: the strip runs the full width of the screen, and a rounded corner
   against the glass reads as a card that did not quite fit. */
.diwan-offers__track {
	-ms-overflow-style: none;
	display: flex;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.diwan-offers__track::-webkit-scrollbar {
	display: none;
}

.diwan-offers__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

/* The strip's height lives here, on the slide itself, and the artwork fills it.
   Putting it on the picture instead does not hold: Elementor's own stylesheet
   says `.elementor img { height: auto }`, which outranks a single class on the
   image and leaves it at its natural proportions, overflowing the band. */
.diwan-offers__link {
	display: block;
	block-size: var(--diwan-offers-height, 56px);
	overflow: hidden;
}

/* A height rather than a ratio, because the strip's height is a decision the
   shop makes — it sits above the hero and the two share one screen — and a
   ratio makes that decision differently at every width. Set in Offers → Banner
   settings and written onto the strip; object-fit centres whatever does not
   fit rather than squashing it. */
.diwan-offers picture,
.diwan-offers .diwan-offers__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
}

/* --- arrows --- */

/* The square, the chevron and the colours are in arrows.css, shared with the
   hero slider and both loop carousels. What is left here is only where this
   strip puts them and when it shows them, which is the strip's business and
   nobody else's. */
.diwan-offers__arrow {
	box-shadow: var(--diwan-shadow-soft, 0 1px 3px rgba(0, 0, 0, 0.06));
	inset-block-start: 50%;
	opacity: 0;
	position: absolute;
	transform: translateY(-50%);
	z-index: 2;
}

.diwan-offers__arrow--prev {
	inset-inline-start: 32px;
}

.diwan-offers__arrow--next {
	inset-inline-end: 32px;
}

/* The arrows stay out of the way of the artwork until the pointer is on the
   strip; on touch there is no hover, so they are shown there instead. */
.diwan-offers:hover .diwan-offers__arrow,
.diwan-offers__arrow:focus-visible {
	opacity: 1;
}

/* An arrow at the end of the run has nothing to do. */
.diwan-offers__arrow[disabled] {
	cursor: default;
	opacity: 0;
}

/* --- dots --- */

/*
 * Each dot is a 24 x 24 button (the least a finger can be asked to hit,
 * WCAG 2.2 target size) with the small dot drawn in its middle, so the row
 * looks as it did with dots that were easy to miss on a phone.
 */
/* Inside the strip, along its foot (Diwan, October 2026), rather than in a
   row of white under it: the strip ends where the hero begins. */
.diwan-offers__dots {
	display: flex;
	gap: 0;
	inset-block-end: 2px;
	inset-inline: 0;
	justify-content: center;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}

.diwan-offers__dots > * {
	pointer-events: auto;
}

.diwan-offers__dot {
	align-items: center;
	background: none;
	border: 0;
	block-size: 24px;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	min-inline-size: 24px;
	padding: 0;
}

/* On the artwork now, so each dot carries its own outline: white with a dark
   ring reads on a light banner and on a dark one alike. */
.diwan-offers__dot::before {
	background: rgba(255, 255, 255, 0.72);
	border-radius: 999px;
	block-size: 7px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
	content: "";
	inline-size: 7px;
	transition: background-color 0.16s ease, inline-size 0.16s ease;
}

.diwan-offers__dot.is-current::before {
	background: var(--diwan-white, #fff);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
	inline-size: 20px;
}

.diwan-offers__dot:focus-visible {
	outline: 2px solid var(--diwan-white, #fff);
	outline-offset: -2px;
}

.diwan-offers.is-single .diwan-offers__dots {
	display: none;
}

/* Below this width the browser has swapped in the editor's taller phone crop,
   which is drawn to its own proportions, so the band changes shape with it.
   The breakpoint matches the source element's media attribute exactly.

   The ratio is stated rather than left to the image: every slide after the
   first is lazy-loaded, and an image that has not arrived yet has no shape to
   size its box from. Without this the unloaded slides claimed the full width
   as height and the strip opened fifteen times too tall before settling. */
@media (max-width: 1024px) {
	.diwan-offers {
		margin-block: var(--diwan-offers-above-tablet, 10px) var(--diwan-offers-below-tablet, 17px);
	}

	.diwan-offers__link {
		block-size: var(--diwan-offers-height-tablet, 64px);
	}
}

@media (max-width: 720px) {
	.diwan-offers {
		margin-block: var(--diwan-offers-above-phone, 10px) var(--diwan-offers-below-phone, 17px);
	}

	.diwan-offers__link {
		block-size: var(--diwan-offers-height-phone, 70px);
	}
}

@media (max-width: 900px) {
	/* Touch swipes the track directly; arrows over a small image are in the way.
	   Named through the frame, so the arrows' own display (arrows.css) does
	   not bring them back on the pages where it happened to be read later
	   (3.6.0: the book page and the shelves showed them, the home page not). */
	.diwan-offers__frame .diwan-offers__arrow {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.diwan-offers__track {
		scroll-behavior: auto;
	}
}