/* ==========================================================================
   eclat-mobile.css — PHASE 1, mobile-only UI/UX
   --------------------------------------------------------------------------
   Loaded LAST in the cascade, after eclat-ui / eclat-shop / eclat-home /
   eclat-shop-page. Every rule in this file is inside a `max-width` media query
   so the approved desktop header, footer and homepage layouts cannot be
   touched: at 769px and above this stylesheet contributes nothing, with the one
   documented exception in section 5.

   1.  off-canvas drawer — kill the horizontal scroll
   2.  product cards — same design system as desktop, without hover
   3.  product grids — always two columns, whatever the item count
   4.  promo slider — every slide exactly the same size
   5.  newsletter placeholder — right in RTL, left in LTR
   6.  footer contact rows — icon and text on one centred line
   ========================================================================== */


/* ==========================================================================
   1.  OFF-CANVAS MENU — no horizontal scroll
   --------------------------------------------------------------------------
   The drawer is `width: min(330px, 86vw)` with `overflow-y: auto` and no
   overflow-x rule, so anything wider than the panel produced a sideways
   scrollbar inside it. The widest offender is the "Need Help?" button: it
   inherits `.eclat-btn { padding: 15px 32px; border: 1px }` and is then given
   `width: 100%`, which under content-box sizing measures 100% + 66px. Border-box
   sizing, an explicit max-width at every level of the drawer, and text that
   wraps instead of pushing, remove the overflow at its source; the
   `overflow-x: hidden` on the wrapper is the backstop, not the fix.
   ========================================================================== */
@media (max-width: 768px) {

	.eclat-hd-mobile {
		max-width: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		box-sizing: border-box;
	}

	.eclat-hd-mobile *,
	.eclat-hd-mobile *::before,
	.eclat-hd-mobile *::after {
		box-sizing: border-box;
	}

	.eclat-hd-mobile > *,
	.eclat-hd-mobile__head,
	.eclat-hd-mtabs,
	.eclat-hd-mpane,
	.eclat-hd-mobile__nav,
	.eclat-hd-mobile__list,
	.eclat-hd-mobile__cats,
	.eclat-hd-mobile__foot {
		max-width: 100%;
		min-width: 0;
		overflow-x: hidden;
	}

	/* the button that caused it: inside the padded foot, never wider than it */
	.eclat-hd-mobile__foot {
		box-sizing: border-box;
		padding: 16px;
	}

	.eclat-hd-mobile__help {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		padding-inline: 12px;
	}

	.eclat-hd-mobile__help span {
		min-width: 0;
		overflow-wrap: anywhere;
		text-align: center;
	}

	/* a long category or menu label wraps rather than widening the panel */
	.eclat-hd-mobile__list a,
	.eclat-hd-mobile__cats a,
	.eclat-hd-mtab {
		max-width: 100%;
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.eclat-hd-mobile__cats a > span:first-of-type {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.eclat-hd-mobile__cats a > .eclat-hd-browse__n {
		flex: 0 0 auto;
	}
}


/* ==========================================================================
   2.  PRODUCT CARDS — one design system across desktop and mobile
   --------------------------------------------------------------------------
   The desktop card is deliberately plain: white ground, no border, a square
   white image box, centred Poppins title, muted category, accent price, and a
   126x36 uppercase button that only appears on hover. A phone has no hover, so
   the panel is already static — but it was inheriting the panel's padding and a
   full-bleed stretched button, which read as a different component. These rules
   restate the desktop measurements at mobile scale so the two match.
   ========================================================================== */
@media (max-width: 768px) {

	.eclat-pc {
		background: #fff;
		border: 0;
		padding: 0 0 10px;
		text-align: center;
		box-sizing: border-box;
	}

	/* the square image box, exactly as on desktop */
	.eclat-pc__media {
		margin-bottom: 12px;
		padding: 0;
		border: 0;
		background: #fff;
		aspect-ratio: 1 / 1;
		overflow: hidden;
	}

	.eclat-pc__imglink { padding: 8px; }

	.eclat-pc__imglink img {
		width: auto;
		max-width: 100%;
		max-height: 100%;
		height: auto;
		object-fit: contain;
		mix-blend-mode: normal;
	}

	/* the badge keeps its circle, one size down for a half-width card */
	.eclat-pc__badge {
		top: 8px;
		inset-inline-start: 8px;
		width: 34px;
		height: 34px;
		font-size: 9px;
	}

	.eclat-pc__body {
		padding: 0 8px;
		box-sizing: border-box;
	}

	.eclat-pc__title {
		font-family: var(--wd-font-head);
		font-size: 14px;
		font-weight: 500;
		line-height: 1.4;
		margin: 0 0 3px;
	}

	.eclat-pc__cat {
		font-size: 12px;
		margin-bottom: 4px;
	}

	.eclat-pc__stars {
		font-size: 11px;
		margin-bottom: 4px;
	}

	.eclat-pc__price {
		font-family: var(--wd-font-head);
		font-size: 14px;
		font-weight: 600;
		color: var(--wd-accent);
	}

	/* --------------------------------------------------------------------
	   The hover panel is permanently open on touch. Strip it back to just
	   the action row so it does not read as a second surface stuck to the
	   card: no shadow, no side padding, and a hairline separating it from
	   the price the way the panel's shadow separates it on desktop.
	   ------------------------------------------------------------------ */
	.eclat-pc__hover {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		background: transparent;
		box-shadow: none;
		padding: 10px 0 0;
		margin-top: 10px;
		border-top: 1px solid var(--wd-line-soft);
	}

	.eclat-pc__swatches,
	.eclat-pc__desc,
	.eclat-pc__act { display: none; }

	.eclat-pc__row {
		display: flex;
		justify-content: center;
		gap: 0;
	}

	/* desktop typography and height, mobile width */
	.eclat-pc__row .eclat-pc__btn {
		box-sizing: border-box;
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		max-width: 100%;
		height: 36px;
		padding: 0 10px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--wd-green);
		color: #fff;
		font-family: var(--wd-font-head);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.7px;
		text-transform: uppercase;
		line-height: 1;
		border: 0;
		border-radius: 0;
		transform: none;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* touch feedback stands in for the hover state the card cannot have */
	.eclat-pc:active { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10); }
	.eclat-pc__row .eclat-pc__btn:active { background: var(--wd-green-dk); }

	/* the archive card's own action row never doubles up with the panel */
	.eclat-pc__actions:empty { display: none; }
}


/* ==========================================================================
   3.  PRODUCT GRIDS — two columns on mobile, whatever the item count
   --------------------------------------------------------------------------
   Three rules used to decide this between them: `.eclat-pgrid` collapsed to a
   single column below 420px, the row-carousel dropped to one column below
   360px, and a tab holding one or three products let the flex track size itself
   — so the Offers tab could render one card the width of the screen. Every
   product grid is now the same two-column grid, and the carousels that wrap one
   stop scrolling sideways and wrap instead, which is what removes the
   dependency on item count.
   ========================================================================== */
@media (max-width: 768px) {

	.eclat-pgrid,
	.eclat-carousel .eclat-pgrid,
	.eclat-carousel--rows .eclat-pgrid,
	.eclat-tabpane .eclat-pgrid,
	.eclat-products {
		display: grid !important;
		grid-auto-flow: row !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-auto-columns: auto !important;
		grid-template-rows: none !important;
		grid-auto-rows: 1fr;
		align-items: stretch;
		gap: 12px;
		width: auto;
		max-width: 100%;
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}

	/* the wrappers that paired cards into columns step out of the box tree */
	.eclat-carousel--rows .eclat-pgrid > .eclat-pcol { display: contents; }

	/* a card is a grid cell now, not a flex track item */
	.eclat-pgrid > .eclat-pc,
	.eclat-pcol > .eclat-pc,
	.eclat-carousel .eclat-pgrid > .eclat-pc,
	.eclat-carousel--rows .eclat-pgrid .eclat-pc,
	.eclat-products > .product {
		flex: none !important;
		width: auto !important;
		max-width: none !important;
		min-width: 0;
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.eclat-pc__body { flex: 1 1 auto; display: flex; flex-direction: column; }
	.eclat-pc__price { margin-top: auto; }
	.eclat-pc__hover { flex: 0 0 auto; }

	/* Nothing scrolls sideways any more, so the arrows have nothing to do —
	   but only in the PRODUCT carousels this section just converted to a grid.
	   The blog rail is still a rail and keeps its arrows. */
	.eclat-carousel:not(.eclat-carousel--posts) .eclat-carousel__nav { display: none !important; }
}

/* the two-column rule holds all the way down; no single-column fallback */
@media (max-width: 359px) {
	.eclat-pgrid,
	.eclat-carousel .eclat-pgrid,
	.eclat-carousel--rows .eclat-pgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-auto-columns: auto !important;
		gap: 8px;
	}

	.eclat-pc__row .eclat-pc__btn { font-size: 10px; letter-spacing: 0.4px; }
}


/* ==========================================================================
   4.  PROMO SLIDER — every slide exactly the same size
   --------------------------------------------------------------------------
   The slider stacked its slides with `position: absolute` for the inactive ones
   and `position: relative` for the active one, and the track's 420px floor is
   lifted on mobile — so the section's height was whatever the current slide's
   headline and image happened to need, and it jumped on every advance. All
   slides are placed in one grid cell instead: the track takes the height of the
   tallest slide once, and each slide fills that cell exactly. The media box is
   given a fixed ratio with `object-fit: contain` so an unusually tall or wide
   product image cannot change the measurement either.
   ========================================================================== */
@media (max-width: 768px) {

	.eclat-showcase__track {
		display: grid;
		grid-template-columns: 1fr;
		grid-auto-rows: 1fr;
		align-items: stretch;
		min-height: 0;
	}

	.eclat-showcase__slide,
	.eclat-showcase__slide.is-active {
		grid-area: 1 / 1;
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
	}

	.eclat-showcase__slide { opacity: 0; visibility: hidden; }
	.eclat-showcase__slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

	.eclat-showcase__inner {
		width: 100%;
		min-height: 0;
		box-sizing: border-box;
		grid-template-columns: 1fr;
		align-content: center;
		gap: 18px;
		padding: 34px 20px 52px;
		text-align: center;
	}

	/* one fixed picture box, whatever the source image measures */
	.eclat-showcase__media {
		order: -1;
		width: 100%;
		aspect-ratio: 4 / 3;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.eclat-showcase__media img {
		width: auto;
		max-width: 100%;
		max-height: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* the copy block is the other half of the equation: clamp the headline so
	   a long product name cannot add a third line to one slide only */
	.eclat-showcase__title {
		font-size: 24px;
		line-height: 1.25;
		margin: 0 0 14px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.eclat-showcase__copy {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.eclat-showcase__meta,
	.eclat-showcase__buy { justify-content: center; }

	.eclat-showcase__dots { z-index: 3; }
}

/* the promo bands beside it already share one height; keep their media boxes
   uniform too so the two halves of the section agree */
@media (max-width: 768px) {
	.eclat-band__media {
		width: 100%;
		aspect-ratio: 4 / 3;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.eclat-band__media img {
		width: auto;
		max-width: 100%;
		max-height: 100%;
		height: 100%;
		object-fit: contain;
	}
}


/* ==========================================================================
   5.  NEWSLETTER PLACEHOLDER — follows the page direction
   --------------------------------------------------------------------------
   style.css forces `direction: ltr` on every email input so an address never
   reorders its characters inside an RTL paragraph. That is correct for the
   value, but it also dragged the placeholder to the left edge of an Arabic
   form. `direction` stays; `text-align` is set per direction, which moves the
   placeholder and the caret to the side the reader starts from while leaving
   the Latin run itself in logical order. This is the one section not scoped to
   mobile — the same bug is on the desktop form and the fix has no layout
   consequence there.
   ========================================================================== */
html[dir="rtl"] .eclat-news__input,
html[dir="rtl"] .eclat-news .eclat-news__form input[type="email"],
html[dir="rtl"] input.eclat-news__input {
	direction: ltr;
	text-align: right;
}

html[dir="rtl"] .eclat-news__input::placeholder,
html[dir="rtl"] .eclat-news .eclat-news__form input[type="email"]::placeholder {
	direction: rtl;
	text-align: right;
	unicode-bidi: plaintext;
}

html[dir="ltr"] .eclat-news__input,
html[dir="ltr"] .eclat-news .eclat-news__form input[type="email"],
html[dir="ltr"] input.eclat-news__input {
	direction: ltr;
	text-align: left;
}

html[dir="ltr"] .eclat-news__input::placeholder,
html[dir="ltr"] .eclat-news .eclat-news__form input[type="email"]::placeholder {
	direction: ltr;
	text-align: left;
}


/* ==========================================================================
   6.  FOOTER CONTACT — icon on the text's line, mobile only
   --------------------------------------------------------------------------
   The desktop widget is a two-track grid (15px icon column, text column) with
   each `li` set to `display: contents`, so the icons share one vertical line
   however many lines the text beside them runs to. That is the right answer on
   a wide column and the wrong one on a phone, where each row is short and the
   icon sat a few pixels above the text it belongs to. Inside the mobile query
   only, the list becomes a stack of flex rows and each row centres its icon
   against its text. The desktop grid is untouched.
   ========================================================================== */
@media (max-width: 768px) {

	.eclat-ft-contact {
		display: flex;
		flex-direction: column;
		grid-template-columns: none;
		gap: 14px;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none;
	}

	.eclat-ft-contact li {
		display: flex;
		align-items: center;
		gap: 11px;
		min-height: 44px;
	}

	.eclat-ft-contact__ico {
		grid-column: auto;
		flex: 0 0 15px;
		width: 15px;
		height: 15px;
		margin-top: 0;
		align-self: center;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.eclat-ft-contact__t {
		grid-column: auto;
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		align-content: center;
		min-height: 0;
		line-height: 1.5;
	}

	.eclat-ft-contact__t address,
	.eclat-ft-contact .eclat-ft-address {
		margin: 0;
		min-height: 0;
		line-height: 1.5;
	}

	.eclat-ft-contact a {
		display: inline-flex;
		align-items: center;
		min-height: 0;
	}
}

/* ==========================================================================
   TASK 5 — MOBILE TOUCH TARGETS
   --------------------------------------------------------------------------
   The header icons, footer social row and drawer links were already 44px. The
   audit found the remaining primary controls below that: the product card's
   add-to-cart at 36px, pagination at 36px, the shop toolbar's view switcher at
   34px, the product page's secondary actions at 34px, and the mini-cart's
   remove control at 30px.
   All of those are PRIMARY actions and are raised to 44px here.

   Tertiary controls in dense rows — the post card's comments/share links, the
   share icon row in a post footer — are taken to 32-40px rather than 44px on
   purpose: 44px each would force those rows to wrap and push the content they
   annotate off the first screen. 32px still clears the WCAG 2.5.8 minimum of
   24px comfortably.

   Everything here is inside the mobile query. Desktop is untouched.
   ========================================================================== */
@media (max-width: 768px) {

	/* --- product card: the single most-tapped control on the site -------- */
	.eclat-pc__row .eclat-pc__btn {
		height: 44px;
		min-height: 44px;
		font-size: 11.5px;
	}

	/* --- pagination ------------------------------------------------------- */
	.eclat-pager .page-numbers {
		min-width: 44px;
		height: 44px;
		font-size: 13px;
		padding: 0 12px;
	}

	/* --- shop toolbar ----------------------------------------------------- */
	.eclat-shop__view {
		width: 44px;
		height: 44px;
		min-width: 44px;
	}

	.eclat-shop__filter-btn {
		min-height: 44px;
		padding-inline: 16px;
	}

	.eclat-shop__sort select,
	.woocommerce-ordering select {
		min-height: 44px;
	}

	/* --- product page secondary actions ----------------------------------- */
	.eclat-sp-act,
	.single-product .tinvwl_add_to_wishlist_button {
		min-height: 44px;
		padding-block: 10px;
	}

	.eclat-sp-swatch__v { min-height: 40px; }

	/* --- quantity steppers, cart and product ------------------------------ */
	.single-product form.cart .quantity,
	.woocommerce-cart .quantity,
	.wc-block-components-quantity-selector {
		height: 48px;
	}

	.single-product form.cart .quantity .is-form,
	.woocommerce-cart .quantity .is-form,
	.wc-block-components-quantity-selector__button {
		width: 46px;
		min-height: 46px;
	}

	/* --- remove controls --------------------------------------------------- */
	.woocommerce a.remove,
	.woocommerce-cart a.remove,
	.eclat-drawer li.mini_cart_item a.remove {
		width: 40px;
		height: 40px;
		font-size: 19px;
	}

	/* the mini-cart row re-flows to fit the wider remove control */
	.eclat-drawer li.mini_cart_item,
	.eclat-drawer li.woocommerce-mini-cart-item {
		grid-template-columns: 64px minmax(0, 1fr) 40px;
		gap: 12px;
	}

	.eclat-drawer li.mini_cart_item > a:not(.remove) { width: 64px; height: 64px; }

	/* --- FAQ accordion: the whole summary row is the target ---------------- */
	.eclat-faq2__q { min-height: 48px; }

	/* --- tertiary controls: comfortable, not oversized -------------------- */
	.eclat-postcard__m {
		min-height: 32px;
		padding-block: 5px;
	}

	.eclat-post__share a,
	.eclat-post__copy,
	.eclat-sp-share a,
	.eclat-sp-share button {
		width: 40px;
		height: 40px;
	}

	.eclat-post__tags a { min-height: 36px; }

	/* --- account and forms ------------------------------------------------- */
	.woocommerce-account .woocommerce-MyAccount-navigation a { min-height: 46px; display: flex; align-items: center; }
	.woocommerce-account .woocommerce-form-login__submit,
	.woocommerce-account .woocommerce-form-register__submit { min-height: 48px; }

	/* --- page-header category rail ----------------------------------------- */
	.eclat-ph__cat { min-height: 96px; }
}

/* ==========================================================================
   TASK 5 — OVERFLOW HARDENING
   --------------------------------------------------------------------------
   `html, body { overflow-x: hidden }` in eclat-home.css hides a horizontal
   scrollbar but does not prevent the overflow that causes it — content can
   still be pushed outside the viewport and become unreachable. These rules
   address the specific patterns that overflow on a narrow screen, so the clamp
   is a safety net rather than the mechanism.
   ========================================================================== */
@media (max-width: 768px) {

	/* long unbroken strings: SKUs, emails, URLs pasted into content */
	.eclat-post__body,
	.eclat-legal,
	.eclat-plain #content,
	.woocommerce-MyAccount-content,
	.eclat-sp-meta__v,
	.eclat-faq2__a { overflow-wrap: anywhere; }

	/* any table that cannot shrink scrolls inside its own box */
	.eclat-post__body table,
	.eclat-legal table,
	.eclat-plain #content table,
	.woocommerce-MyAccount-content table.shop_table,
	.single-product .woocommerce-product-attributes {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* embeds and iframes never exceed the column */
	.eclat-post__body iframe,
	.eclat-legal iframe,
	.eclat-plain #content iframe,
	.eclat-contact__map iframe { max-width: 100%; }

	/* pre/code blocks in an article */
	.eclat-post__body pre,
	.eclat-post__body code { white-space: pre-wrap; word-break: break-word; }

	/*
	 * The full-bleed bands use `margin-inline: calc(50% - 50vw); width: 100vw`.
	 * That is self-correcting, but 100vw includes the scrollbar gutter on any
	 * platform that reserves one, which pushes exactly that many pixels past the
	 * viewport. Clamping to 100% of the containing block removes the overhang
	 * without changing how the band reads.
	 */
	.eclat-news,
	.eclat-bands,
	.eclat-about__band,
	.eclat-stats { max-width: 100vw; overflow-x: clip; }
}

/* ==========================================================================
   ROUND 32 — MY ACCOUNT NAVIGATION ON A PHONE
   --------------------------------------------------------------------------
   The tabs were laid out as a horizontal scroller from 992px down. Reported
   from the live site: labels cut mid-word — "Account details" rendering as
   "ails". A horizontal scroller only works if the user can reach the overflow,
   and on this page they cannot: the row sits inside `#content`, the document
   carries `html, body { overflow-x: hidden }`, and in RTL the row starts at the
   right edge so the overflow runs off the LEFT — which is exactly the end of
   the word that was missing.

   Under 768px the row is abandoned for a plain vertical list. Nothing to
   scroll, nothing to clip, no direction-dependent behaviour, every label fully
   readable. The scroller is kept for the 769-992px band, where the row does fit
   and reads better than a tall stack.
   ========================================================================== */
@media (max-width: 768px) {

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: block;
		overflow: visible;
		border: 1px solid var(--wd-line);
		background: #fff;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li {
		display: block;
		flex: none;
		width: 100%;
		border-inline-end: 0;
		border-bottom: 1px solid var(--wd-line);
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }

	.woocommerce-account .woocommerce-MyAccount-navigation a {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-height: 50px;
		padding: 13px 16px;
		white-space: normal;
		overflow-wrap: anywhere;
		box-sizing: border-box;
	}

	/* a chevron on the trailing edge, mirrored automatically in RTL */
	.woocommerce-account .woocommerce-MyAccount-navigation a::after {
		content: "";
		flex: 0 0 auto;
		width: 7px;
		height: 7px;
		margin-inline-start: auto;
		border-top: 1.5px solid currentColor;
		border-inline-end: 1.5px solid currentColor;
		transform: rotate(45deg);
		opacity: 0.45;
	}

	html[dir="rtl"] .woocommerce-account .woocommerce-MyAccount-navigation a::after {
		transform: rotate(-135deg);
	}

	.woocommerce-account .woocommerce-MyAccount-content { padding: 20px 16px; }
}

/* ==========================================================================
   ROUND 32 — CART ITEMS ON A PHONE
   --------------------------------------------------------------------------
   The generic "table becomes cards" rule stacked every cell as its own labelled
   row, so a single line item occupied six rows: a 96px image on one, then
   Product, Price, Quantity, Subtotal, each with its own caption. Tall, and the
   remove control landed in the flow wherever WooCommerce happened to emit it.

   Replaced with an explicit card: the image column on the leading edge, name,
   price and quantity beside it, the line total across the foot, and the remove
   control pinned to the top trailing corner where it cannot collide with
   anything. Written with grid-template-areas so the source order of the cells
   does not matter and with logical properties so RTL mirrors on its own.
   ========================================================================== */
@media (max-width: 768px) {

	.woocommerce-cart table.shop_table tr.cart_item {
		position: relative;
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr);
		grid-template-areas:
			"img  name"
			"img  price"
			"img  qty"
			"sub  sub";
		column-gap: 14px;
		row-gap: 0;
		align-items: center;
		padding: 14px;
		padding-inline-end: 46px;
	}

	.woocommerce-cart table.shop_table tr.cart_item td {
		border-bottom: 0;
		padding: 3px 0;
		min-width: 0;
	}

	.woocommerce-cart table.shop_table tr.cart_item td.product-thumbnail {
		grid-area: img;
		align-self: start;
		justify-content: start;
		padding: 0;
	}

	.woocommerce-cart table.shop_table tr.cart_item td.product-thumbnail img {
		width: 84px;
		height: 84px;
		object-fit: contain;
		background: var(--wd-alt);
		border: 1px solid var(--wd-line-soft);
	}

	.woocommerce-cart table.shop_table tr.cart_item td.product-name {
		grid-area: name;
		display: block;
		text-align: start;
		font-size: 14px;
		line-height: 1.45;
		overflow-wrap: anywhere;
	}

	.woocommerce-cart table.shop_table tr.cart_item td.product-price {
		grid-area: price;
		justify-content: flex-start;
		gap: 8px;
		font-size: 13.5px;
		color: var(--wd-soft);
	}

	.woocommerce-cart table.shop_table tr.cart_item td.product-quantity {
		grid-area: qty;
		justify-content: flex-start;
		padding-top: 8px;
	}

	.woocommerce-cart table.shop_table tr.cart_item td.product-subtotal {
		grid-area: sub;
		justify-content: space-between;
		margin-top: 12px;
		padding-top: 11px;
		border-top: 1px solid var(--wd-line);
		font-family: var(--wd-font-head);
		font-weight: 700;
		color: var(--wd-head);
	}

	/*
	 * The remove control leaves the flow entirely. `padding-inline-end` on the
	 * card reserves its column, so it overlaps nothing at any text length.
	 */
	.woocommerce-cart table.shop_table tr.cart_item td.product-remove {
		position: absolute;
		inset-block-start: 8px;
		inset-inline-end: 6px;
		padding: 0;
		margin: 0;
		border: 0;
		background: none;
	}

	.woocommerce-cart table.shop_table tr.cart_item td.product-remove::before,
	.woocommerce-cart table.shop_table tr.cart_item td.product-thumbnail::before,
	.woocommerce-cart table.shop_table tr.cart_item td.product-name::before { display: none; }

	.woocommerce-cart table.shop_table tr.cart_item td.product-remove a.remove {
		position: static;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		font-size: 17px;
		line-height: 1;
	}

	/* the coupon / update row spans the card and stacks */
	.woocommerce-cart table.shop_table tr td.actions {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		padding: 14px;
	}

	.woocommerce-cart table.shop_table tr td.actions::before { display: none; }

	.woocommerce-cart table.shop_table td.actions .coupon {
		display: flex;
		flex: 1 1 100%;
		gap: 8px;
	}

	.woocommerce-cart table.shop_table td.actions .coupon .input-text {
		flex: 1 1 auto;
		min-width: 0;
		min-height: 46px;
	}

	.woocommerce-cart table.shop_table td.actions .button {
		flex: 1 1 auto;
		min-height: 46px;
	}
}

/* ==========================================================================
   ROUND 32 — THE STICKY CHECKOUT BAR
   --------------------------------------------------------------------------
   Rendered on the cart page for every viewport (inc/checkout.php) and revealed
   here only under 768px, so the decision lives with the layout rather than with
   a user-agent string. `env(safe-area-inset-bottom)` keeps it clear of the home
   indicator on a notched phone.
   ========================================================================== */
@media (max-width: 768px) {

	.eclat-cartbar {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 900;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid var(--wd-line);
		box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.09);
	}

	.eclat-cartbar__sum {
		flex: 0 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 1px;
		line-height: 1.2;
	}

	.eclat-cartbar__k {
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: 0.6px;
		text-transform: uppercase;
		color: var(--wd-soft);
	}

	.eclat-cartbar__v {
		font-family: var(--wd-font-head);
		font-size: 16px;
		font-weight: 700;
		color: var(--wd-head);
		white-space: nowrap;
	}

	.eclat-cartbar__btn {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 50px;
		padding-inline: 18px;
		background: var(--wd-accent);
		color: #fff;
		font-family: var(--wd-font-head);
		font-size: 14px;
		font-weight: 700;
		text-align: center;
	}

	.eclat-cartbar__btn:hover,
	.eclat-cartbar__btn:focus { color: #fff; opacity: 0.92; }

	/* the bar must not cover the last thing on the page */
	body.eclat-has-cartbar #main,
	body.eclat-has-cartbar #content { padding-bottom: 92px; }

	/* the in-page button stays, full width, for anyone who scrolls that far */
	.woocommerce-cart .wc-proceed-to-checkout { padding: 0; }

	.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 52px;
		margin: 0;
		box-sizing: border-box;
	}
}

/* ==========================================================================
   ROUND 32 — ACCOUNT DASHBOARD PANEL
   ========================================================================== */
@media (max-width: 768px) {
	.eclat-acct-hello__k { font-size: 19px; }
	.eclat-acct-hello__desc { font-size: 14px; }
}

/* ==========================================================================
   ROUND 33 — ACCOUNT SCREENS ON A PHONE
   ========================================================================== */
@media (max-width: 768px) {

	/* login and register stack; each stays a card, full-bleed inputs */
	.woocommerce-account:not(.logged-in) .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.woocommerce-account form.login,
	.woocommerce-account form.register { padding: 20px 18px; }

	.woocommerce-account form.login .input-text,
	.woocommerce-account form.register .input-text {
		min-height: 50px;
		font-size: 16px; /* under 16px iOS zooms the page on focus */
	}

	.woocommerce-account form.login .button,
	.woocommerce-account form.register .button { min-height: 52px; font-size: 14px; }

	.woocommerce-account .lost_password { text-align: center; }

	/* the password toggle gets a full touch target */
	.woocommerce form .show-password-input,
	.woocommerce-account .show-password-input,
	.woocommerce-checkout .show-password-input {
		width: 44px;
		height: 44px;
		inset-inline-end: 3px;
	}

	.woocommerce form .password-input > input,
	.woocommerce-account .password-input > input,
	.woocommerce-checkout .password-input > input { padding-inline-end: 50px; }

	/* addresses: one card per row */
	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.woocommerce-account .woocommerce-Address { padding: 16px; }

	.woocommerce-account .woocommerce-MyAccount-content fieldset { padding: 16px; }

	/* order actions wrap to their own full-width row rather than crowding */
	.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
		justify-content: flex-start;
	}

	.woocommerce-account .woocommerce-orders-table .button { flex: 1 1 auto; min-height: 42px; }

	/* a notice and its button never share a line on a narrow column */
	.woocommerce .woocommerce-message,
	.woocommerce .woocommerce-info,
	.woocommerce .woocommerce-error { padding: 14px 15px; font-size: 13.5px; }

	.woocommerce .woocommerce-message .button,
	.woocommerce .woocommerce-info .button,
	.woocommerce .woocommerce-error .button {
		margin-inline-start: 0;
		width: 100%;
	}
}

/* ==========================================================================
   ROUND 33 — PRODUCT TABS AS A SWIPEABLE ROW
   --------------------------------------------------------------------------
   Four tabs — description, reviews, brand, shipping — were wrapping onto three
   cramped lines on a phone and the active one was hard to pick out. They now
   sit on one line that scrolls horizontally with a snap.

   Deliberately NOT rebuilt as a JavaScript accordion: WooCommerce already
   prints every panel into the page and toggles them with its own script, so
   the whole of the description and every review is in the served HTML either
   way. Rewriting the structure would have put that content behind our own
   code for no gain in what a crawler sees.
   ========================================================================== */
@media (max-width: 768px) {

	.woocommerce-tabs ul.tabs,
	.eclat-sp-tabs ul.tabs {
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
		margin: 0;
		padding: 0 14px;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
		border-bottom: 1px solid var(--wd-line);
		justify-content: flex-start;
	}

	.woocommerce-tabs ul.tabs::-webkit-scrollbar,
	.eclat-sp-tabs ul.tabs::-webkit-scrollbar { display: none; }

	.woocommerce-tabs ul.tabs li,
	.eclat-sp-tabs ul.tabs li {
		flex: 0 0 auto;
		min-width: max-content;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		scroll-snap-align: start;
	}

	.woocommerce-tabs ul.tabs li::before,
	.woocommerce-tabs ul.tabs li::after,
	.eclat-sp-tabs ul.tabs li::before,
	.eclat-sp-tabs ul.tabs li::after { content: none; display: none; }

	.woocommerce-tabs ul.tabs li a,
	.eclat-sp-tabs ul.tabs li a {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 12px 15px;
		border-bottom: 2px solid transparent;
		font-size: 13.5px;
		font-weight: 600;
		white-space: nowrap;
		color: var(--wd-soft);
	}

	.woocommerce-tabs ul.tabs li.active a,
	.eclat-sp-tabs ul.tabs li.active a {
		border-bottom-color: var(--wd-accent);
		color: var(--wd-accent);
	}

	.woocommerce-tabs .panel,
	.eclat-sp-tabs .panel { padding: 20px 14px; font-size: 14.5px; line-height: 1.8; }
}

/* ==========================================================================
   ROUND 33 — FREQUENTLY BOUGHT TOGETHER ON A PHONE
   --------------------------------------------------------------------------
   The desktop layout puts the thumbnail strip and the checkbox list side by
   side. On a phone they were being squeezed into the same row, so the
   thumbnails shrank to nothing and the checkbox, name and price of each line
   fell out of alignment with each other.

   Now: the thumbnail strip scrolls on its own line, and each list row is a
   three-column grid — checkbox, name, price — so the checkbox column and the
   price column line up down the list no matter how long a product name runs.
   ========================================================================== */
@media (max-width: 768px) {

	.eclat-fbt { padding: 18px 14px; }
	.eclat-fbt__title { font-size: 17px; margin-bottom: 14px; }

	.eclat-fbt__inner {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.eclat-fbt__row {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		padding-bottom: 4px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.eclat-fbt__row::-webkit-scrollbar { display: none; }

	.eclat-fbt__item {
		flex: 0 0 84px;
		width: 84px;
		height: 84px;
		display: block;
		border: 1px solid var(--wd-line);
		background: #fff;
	}

	.eclat-fbt__item img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.eclat-fbt__plus {
		flex: 0 0 auto;
		font-size: 17px;
		line-height: 1;
		color: var(--wd-soft);
	}

	.eclat-fbt__panel { width: auto; padding: 0; }

	.eclat-fbt__list { margin: 0; padding: 0; list-style: none; }

	.eclat-fbt__list li {
		margin: 0;
		padding: 0;
		list-style: none;
		border-bottom: 1px solid var(--wd-line-soft);
	}

	.eclat-fbt__list li:last-child { border-bottom: 0; }

	/*
	 * The label is the alignment grid. `align-items: start` keeps the checkbox
	 * on the first line of a name that wraps to three, and the price column has
	 * its own track so it cannot be pushed out by a long title.
	 */
	.eclat-fbt__list label {
		display: grid;
		grid-template-columns: 24px minmax(0, 1fr) auto;
		align-items: start;
		gap: 10px;
		width: 100%;
		margin: 0;
		padding: 12px 0;
		cursor: pointer;
	}

	.eclat-fbt__list label input[type="checkbox"] {
		grid-column: 1;
		width: 20px;
		height: 20px;
		margin: 1px 0 0;
		accent-color: var(--wd-accent);
	}

	.eclat-fbt__name {
		grid-column: 2;
		min-width: 0;
		font-size: 13.5px;
		line-height: 1.5;
		overflow-wrap: anywhere;
	}

	.eclat-fbt__this {
		display: block;
		margin-top: 2px;
		font-size: 11.5px;
		font-style: normal;
		color: var(--wd-accent);
	}

	.eclat-fbt__price {
		grid-column: 3;
		align-self: start;
		padding-top: 1px;
		font-size: 13.5px;
		font-weight: 700;
		white-space: nowrap;
		color: var(--wd-head);
	}

	.eclat-fbt__foot {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid var(--wd-line);
	}

	.eclat-fbt__total {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
	}

	.eclat-fbt__total-v { font-size: 19px; font-weight: 700; color: var(--wd-head); }

	.eclat-fbt__btn { width: 100%; min-height: 52px; }
}

/* ==========================================================================
   ROUND 33 — SHOP: CATEGORY CARDS AND TOOLBAR
   --------------------------------------------------------------------------
   The category rail at the top of the shop was a wrapping grid, so on a phone
   the cards were squashed into narrow squares two or three to a row with the
   labels clipped. It is a snap-scrolling row now: each card keeps a readable
   width and the row shows the edge of the next one, which is what tells a
   thumb there is more to the side.
   ========================================================================== */
@media (max-width: 768px) {

	.eclat-ph__cats-list {
		display: flex;
		flex-wrap: nowrap;
		gap: 10px;
		margin: 0;
		padding: 2px 14px 6px;
		list-style: none;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.eclat-ph__cats-list::-webkit-scrollbar { display: none; }

	.eclat-ph__cats-list > li {
		flex: 0 0 auto;
		width: 116px;
		margin: 0;
		padding: 0;
		list-style: none;
		scroll-snap-align: start;
	}

	.eclat-ph__cat {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
		width: 100%;
		min-height: 108px;
		height: 100%;
		padding: 14px 8px;
		box-sizing: border-box;
		text-align: center;
	}

	.eclat-ph__cat-ico {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
	}

	.eclat-ph__cat-label,
	.eclat-ph__cat > span:not(.eclat-ph__cat-ico) {
		display: block;
		font-size: 12px;
		line-height: 1.35;
		overflow-wrap: anywhere;
	}

	/*
	 * Toolbar: the view switcher and the filter button hold one line, the sort
	 * select takes the rest, and the count drops to its own line. Previously the
	 * four grid icons wrapped under the select and stacked two-and-two.
	 */
	.eclat-shop__tools {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
		padding-inline: 0;
	}

	.eclat-shop__views {
		order: 1;
		flex: 0 0 auto;
		display: flex;
		flex-wrap: nowrap;
		gap: 2px;
	}

	.eclat-shop__filter-btn {
		order: 2;
		flex: 1 1 auto;
		justify-content: center;
		min-height: 44px;
	}

	.eclat-shop__sort {
		order: 3;
		flex: 1 1 100%;
		margin-inline: 0;
	}

	.eclat-shop__sort select,
	.woocommerce-ordering select {
		width: 100%;
		min-height: 46px;
		font-size: 14px;
	}

	.eclat-shop__count {
		order: 4;
		flex: 1 1 100%;
		margin: 0;
		font-size: 12.5px;
	}

	/* only the two narrowest views are worth offering on a phone */
	.eclat-shop__view[data-eclat-view="3"],
	.eclat-shop__view[data-eclat-view="4"] { display: none; }
}

/* ==========================================================================
   ROUND 33 — STICKY ADD TO CART
   --------------------------------------------------------------------------
   Revealed under 768px only. It is rendered into the page by
   inc/single-product.php for every viewport, so the price and the button are in
   the server HTML rather than being written by script.

   Clearance is the point of the numbers below. The compare bar already lives at
   `bottom: 92px` and The7 puts its back-to-top control in the same corner, so
   the bar reserves 68px and both of those are lifted above it. Nothing sits on
   top of anything.
   ========================================================================== */
@media (max-width: 768px) {

	.eclat-sp-stickybar {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 880;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid var(--wd-line);
		box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.09);
		transform: translateY(110%);
		transition: transform 0.25s ease;
	}

	.eclat-sp-stickybar.is-visible { transform: translateY(0); }

	.eclat-sp-stickybar__media {
		flex: 0 0 46px;
		width: 46px;
		height: 46px;
		border: 1px solid var(--wd-line);
		background: #fff;
	}

	.eclat-sp-stickybar__media img { width: 100%; height: 100%; object-fit: contain; }

	.eclat-sp-stickybar__txt {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 1px;
	}

	.eclat-sp-stickybar__name {
		font-size: 12.5px;
		line-height: 1.3;
		color: var(--wd-soft);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.eclat-sp-stickybar__price {
		font-family: var(--wd-font-head);
		font-size: 15px;
		font-weight: 700;
		color: var(--wd-head);
	}

	.eclat-sp-stickybar__price del { font-weight: 400; font-size: 12.5px; color: var(--wd-soft); }
	.eclat-sp-stickybar__price ins { text-decoration: none; }

	.eclat-sp-stickybar__btn {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 46px;
		padding-inline: 20px;
		background: var(--wd-accent);
		border: 0;
		color: #fff;
		font-family: var(--wd-font-head);
		font-size: 13.5px;
		font-weight: 700;
		cursor: pointer;
	}

	.eclat-sp-stickybar__btn:hover { color: #fff; opacity: 0.92; }

	/* clearance for everything else that lives in that corner */
	body.single-product .eclat-sp-cmpbar { bottom: 84px; }
	body.single-product #dt-btn-back-to-top,
	body.single-product .dt-back-to-top,
	body.single-product .scroll-top { bottom: 84px !important; }
	body.single-product #main { padding-bottom: 78px; }
}

/* ==========================================================================
   ROUND 33 — FAQ ACCORDION SPACING
   ========================================================================== */
@media (max-width: 768px) {

	.eclat-faq2 { gap: 14px; }
	.eclat-faq2__col { gap: 10px; }

	.eclat-faq2__q {
		gap: 12px;
		min-height: 52px;
		padding: 14px 16px;
		font-size: 14px;
		line-height: 1.45;
		align-items: flex-start;
	}

	.eclat-faq2__ico { margin-top: 2px; }

	.eclat-faq2__a {
		padding: 0 16px 16px;
		font-size: 14px;
		line-height: 1.8;
	}

	.eclat-faq2__a p { margin: 0; }

	.eclat-faq2__h { font-size: 16px; margin-bottom: 4px; }
}

/* ==========================================================================
   ROUND 33 — PRODUCT BUNDLES ON A PHONE
   ========================================================================== */
@media (max-width: 768px) {

	.eclat-bundle__head { padding: 15px 16px; }
	.eclat-bundle__title { font-size: 17px; }

	.eclat-bundle__body { grid-template-columns: minmax(0, 1fr); }

	/* the members scroll on one line, the summary sits under them */
	.eclat-bundle__items {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.eclat-bundle__items::-webkit-scrollbar { display: none; }

	.eclat-bundle__item {
		flex: 0 0 138px;
		width: 138px;
		padding: 14px 12px;
		scroll-snap-align: start;
	}

	.eclat-bundle__name { font-size: 12.5px; }
	.eclat-bundle__price { font-size: 13px; }

	.eclat-bundle__side {
		border-inline-start: 0;
		border-top: 1px solid var(--wd-line);
		padding: 16px;
	}

	.eclat-bundle__btn { min-height: 52px; }
}