/**
 * Dakhli — phones and touch screens.
 *
 * Loaded last, on every page (inc/assets.php), so these corrections sit in one
 * place instead of being scattered through each section's stylesheet. Every
 * rule here answers something measured by the mobile audit at 390px:
 *
 *   - form fields under 16px, which make iOS zoom the page on focus
 *   - tap targets under ~44px
 *   - 11px mono labels, hard to read on a phone
 *   - product cards and category tiles one-per-row, which made the homepage
 *     12 700px and the shop 16 600px long
 *   - hover effects that stick after a tap on a touch screen
 */

/* ===============================================================
 * Touch screens (any width): no sticky hover
 *
 * A touch screen fires :hover on tap and keeps it until the next tap
 * elsewhere, so "lift on hover" effects leave cards stuck half-raised.
 * ============================================================= */

@media (hover: none) {
	ul.products li.product:hover,
	.dk-cat__link:hover,
	.dk-card:hover { transform: none; }
	li.product:hover .dk-card__media img,
	.dk-cat__link:hover .dk-cat__img,
	.dk-line:hover .dk-line__media img { transform: none; }
	.dk-cat__link:hover .dk-cat__go { transform: none; }
	.dk-btn:hover .dk-btn__arrow { transform: none; }
	.dk-line:hover { background: transparent; }

	/* Press feedback instead: visible while the finger is down. */
	ul.products li.product:active,
	.dk-cat__link:active { transform: scale(0.985); transition-duration: 80ms; }
}

/* ===============================================================
 * Form fields: 16px on phones
 *
 * iOS Safari zooms the whole page in when a field under 16px takes focus,
 * and leaves it zoomed — the most common "the site went weird" report on
 * phones. !important is deliberate: the fields are styled from several
 * sheets at different specificities, and this is a platform constraint
 * that must win everywhere.
 * ============================================================= */

@media (max-width: 760px), (pointer: coarse) {
	input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']),
	select,
	textarea,
	.select2-container .select2-selection__rendered,
	.select2-search__field {
		font-size: 16px !important;
	}
}

/* ===============================================================
 * Phones
 * ============================================================= */

@media (max-width: 760px) {

	/* Mono micro-labels: 11px → 12px. The token drives most of them. */
	:root { --dk-t-2xs: 0.75rem; }
	.dk-steps__label { font-size: 11px; letter-spacing: 0.04em; }

	/* --- tap targets ------------------------------------------------- */

	.dk-head__more,
	.dk-cart__continue,
	.dk-checkout__back,
	.dk-footer__contact a,
	.dk-store__facts a,
	.showlogin,
	.showcoupon {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.dk-footer__list { gap: 0; }
	.dk-footer__list a { display: flex; align-items: center; min-height: 44px; }

	.dk-footer__legal { gap: 0 var(--dk-s2); }
	.dk-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }

	.dk-footer__social a { width: 44px; height: 44px; }

	.dk-crumbs a { display: inline-flex; align-items: center; min-height: 32px; }

	/* Quantity steppers, the bin, sort select, card buttons. */
	.dk-qty { min-height: 44px; }
	.dk-qty button { width: 44px; }
	.dk-qty input { min-height: 44px; }
	.dk-commerce a.remove { width: 44px; height: 44px; }
	select.orderby { min-height: 44px; }
	li.product .button,
	li.product .add_to_cart_button { min-height: 44px; }

	/* --- product grid: two per row ------------------------------------ */

	ul.products,
	ul.products.dk-productgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	ul.products li.product { border-radius: 12px; }

	.dk-card__body { padding: 10px 10px 12px; gap: 3px; }
	.dk-card__cat { font-size: 11px; letter-spacing: 0.06em; }
	.dk-card__title {
		font-size: 0.875rem;
		line-height: 1.3;
		/* Long names ("Perceuse-visseuse sans fil 18 V — 2 batteries") would
		   otherwise make one card much taller than its neighbour. */
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.dk-card__body .dk-ref { display: none; }

	/* Price and stock stack: side by side they overflow a 165px card. */
	.dk-card__foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		padding-top: 8px;
	}
	.dk-card__price .woocommerce-Price-amount { font-size: 1.125rem; }
	.dk-card__price del .woocommerce-Price-amount { font-size: 0.75rem; }
	.dk-card__stock { font-size: 0.75rem; }

	li.product .button,
	li.product .add_to_cart_button {
		margin-top: 10px;
		padding: 0.55em 0.5em;
		font-size: 0.875rem;
		border-radius: 10px;
	}
	/* "Voir le panier" link WooCommerce adds after an AJAX add. */
	li.product .added_to_cart {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 36px;
		margin-top: 6px;
		font-size: 0.8125rem;
		font-weight: 600;
		text-align: center;
	}

	.dk-card__flags { top: 8px; left: 8px; }
	.dk-plate__icon svg { width: 34px; height: 34px; }

	/* --- category tiles: two per row --------------------------------- */

	.dk-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.dk-cat__link { aspect-ratio: 4 / 5; border-radius: 12px; }
	.dk-cat__body { padding: 12px; gap: 6px; }
	.dk-cat__name { font-size: 1.0625rem; line-height: 1.1; }
	.dk-cat__count { font-size: 11px; }
	.dk-cat__go { width: 30px; height: 30px; }
	.dk-cat__go svg { width: 15px; height: 15px; }
	.dk-cat__mark { width: 84px; }
}

/* Very narrow phones (≤ 360px, e.g. older Android): keep two columns but
   tighten the gutters so each card still has room for its price. */
@media (max-width: 360px) {
	ul.products,
	ul.products.dk-productgrid,
	.dk-cats__grid { gap: 8px; }
	.dk-card__body { padding: 8px 8px 10px; }
	.dk-card__price .woocommerce-Price-amount { font-size: 1rem; }
}

/* Second audit pass. */
@media (max-width: 760px) {
	.dk-footer__legal a { min-width: 44px; justify-content: center; }
	.dk-catnav__list a,
	.dk-catnav__sub a,
	.dk-widget .dk-btn,
	.dk-contact__phone,
	.dk-single__cat,
	.woocommerce-message .button { display: inline-flex; align-items: center; min-height: 44px; }
	/* Checkboxes: the whole label is the target, so give it the height. */
	.woocommerce-form__label-for-checkbox,
	.dk-check { min-height: 44px; }

	.dk-card__cat { font-size: 12px; letter-spacing: 0.04em; }
	.dk-cat__count { font-size: 12px; }
}

/* The visually hidden update button still carried the button's padding,
   leaving a 53×29 invisible box in the layout. */
.dk-js .dk-cart__update { padding: 0 !important; border: 0 !important; }

/* ===============================================================
 * Shop & rayon pages: products first on phones
 *
 * The sidebar stacks above the grid once the layout goes single-column,
 * which put ~600–800px of lists between the title and the first product.
 * The aside is flattened (display: contents) so its widgets can be
 * re-ordered individually: the rayon list becomes one swipeable row of
 * chips above the grid, and the other widgets drop below it.
 * ============================================================= */

/* Selectors are scoped under .dk-catnav: shop.css styles `.dk-widget ul` as a
   grid, which outranks a bare `.dk-catnav__list` whatever the load order. */
@media (max-width: 980px) {
	/* align-items must be reset: shop.css sets `start` for its grid, which in a
	   flex column lets the chip row grow to its full content width (1 552px)
	   instead of being held to the screen — so it could not scroll. */
	.dk-shop__layout { display: flex; flex-direction: column; align-items: stretch; gap: var(--dk-s5); }
	.dk-shop__side > * { min-width: 0; }
	.dk-shop__side { display: contents; }
	.dk-shop__main { order: 1; min-width: 0; }
	.dk-shop__side > .dk-widget { order: 2; }
	.dk-shop__side > .dk-catnav { order: 0; }

	/* Chip row. Parents and (on a rayon page) the open rayon's
	   subcategories share one row: list items are flattened too. */
	.dk-catnav {
		padding: 0;
		border: 0;
		background: none;
		margin: 0 calc(-1 * var(--dk-gutter));
	}
	.dk-catnav .dk-widget__title { display: none; }
	.dk-catnav .dk-catnav__list {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		/* Snap chips to the page margin, not the raw edge, where the fade mask
		   would half-hide them. */
		scroll-padding-inline: var(--dk-gutter);
		scrollbar-width: none;
		padding: 2px var(--dk-gutter) 6px;
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--dk-gutter), #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(to right, transparent 0, #000 var(--dk-gutter), #000 calc(100% - 28px), transparent);
	}
	.dk-catnav .dk-catnav__list::-webkit-scrollbar { display: none; }
	.dk-catnav .dk-catnav__list li,
	.dk-catnav .dk-catnav__sub { display: contents; }

	.dk-catnav .dk-catnav__list a {
		flex: none;
		display: inline-flex;
		align-items: center;
		gap: 7px;
		min-height: 44px;
		padding: 0 14px;
		border: 1px solid var(--dk-line-strong);
		border-radius: 99px;
		background: var(--dk-white);
		white-space: nowrap;
		font-size: 0.875rem;
		font-weight: 600;
		color: var(--dk-ink);
		scroll-snap-align: start;
	}
	.dk-catnav .dk-catnav__list .is-active > a {
		background: var(--dk-ink);
		border-color: var(--dk-ink);
		color: var(--dk-white);
	}
	.dk-catnav .dk-catnav__list .is-active > a .dk-icon { color: var(--dk-yellow); }
	.dk-catnav .dk-catnav__count {
		margin-left: 2px;
		font-size: 11px;
		color: var(--dk-ink-400);
	}
	.dk-catnav .dk-catnav__list .is-active > a .dk-catnav__count { color: var(--dk-ink-300); }

	/* Subcategory chips: lighter, so the hierarchy still reads. */
	.dk-catnav .dk-catnav__sub a {
		padding: 0 12px;
		border-style: dashed;
		background: var(--dk-yellow-050);
		font-weight: 500;
	}
	.dk-catnav .dk-catnav__sub .is-active > a {
		border-style: solid;
		background: var(--dk-yellow);
		border-color: var(--dk-yellow);
		color: var(--dk-ink);
	}
}

/* Product tabs: one swipeable row instead of wrapping onto two ragged lines. */
@media (max-width: 760px) {
	ul.wc-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		/* No edge-to-edge bleed here: negative margins widened the page to 408px
		   on a 390px phone and made it scroll sideways. */
	}
	ul.wc-tabs::-webkit-scrollbar { display: none; }
	ul.wc-tabs li { flex: none; }
	ul.wc-tabs li a { white-space: nowrap; padding-inline: 12px; min-height: 44px; display: flex; align-items: center; }
	.woocommerce-tabs { margin-top: var(--dk-s6); padding-top: var(--dk-s5); }
}

/* Single product, one column: `1fr` cannot shrink below the gallery's
   min-content width, which held the column at 374.9px and pushed the page
   1px wider than a 390px phone. minmax(0, 1fr) lets it fit the screen. */
@media (max-width: 900px) {
	div.product { grid-template-columns: minmax(0, 1fr); }
	div.product > * { min-width: 0; }
}

/* ===============================================================
 * Touch screens of any width (tablets included): finger-sized targets
 *
 * The same tap-target rules as the phone block above, keyed to the input
 * device rather than the width, so a 768px tablet gets them too. Layout
 * changes stay width-based.
 * ============================================================= */

@media (pointer: coarse) {
	/* --- tap targets ------------------------------------------------- */

	.dk-head__more,
	.dk-cart__continue,
	.dk-checkout__back,
	.dk-footer__contact a,
	.dk-store__facts a,
	.showlogin,
	.showcoupon {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.dk-footer__list { gap: 0; }
	.dk-footer__list a { display: flex; align-items: center; min-height: 44px; }

	.dk-footer__legal { gap: 0 var(--dk-s2); }
	.dk-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }

	.dk-footer__social a { width: 44px; height: 44px; }

	.dk-crumbs a { display: inline-flex; align-items: center; min-height: 32px; }

	/* Quantity steppers, the bin, sort select, card buttons. */
	.dk-qty { min-height: 44px; }
	.dk-qty button { width: 44px; }
	.dk-qty input { min-height: 44px; }
	.dk-commerce a.remove { width: 44px; height: 44px; }
	select.orderby { min-height: 44px; }
	li.product .button,
	li.product .add_to_cart_button { min-height: 44px; }

	.dk-footer__legal a { min-width: 44px; justify-content: center; }
	.dk-catnav__list a,
	.dk-catnav__sub a,
	.dk-widget .dk-btn,
	.dk-contact__phone,
	.dk-single__cat,
	.woocommerce-message .button { display: inline-flex; align-items: center; min-height: 44px; }
	/* Checkboxes: the whole label is the target, so give it the height. */
	.woocommerce-form__label-for-checkbox,
	.dk-check { min-height: 44px; }

}

/* Touch screens: mono micro-labels at 12px, as on phones. */
@media (pointer: coarse) { :root { --dk-t-2xs: 0.75rem; } }