/* =========================================================================
   TOUBKAL-MAROC — Shop / product archives
   Custom "sort" dropdown, styled like the header language / currency
   switchers (trigger + panel). The native <select> is kept as a no-JS
   fallback; shop.js swaps in the custom control and hides the select.
   ========================================================================= */

/* --- Native <select> fallback (no JS) ------------------------------------- */
/* The Shop Archive template styles the control with a `background` shorthand
   (#shop-toolbar .woocommerce-ordering select), which resets background-image
   and removes the dropdown arrow. Re-draw the chevron. */
#shop-toolbar .woocommerce-ordering select,
.woocommerce-ordering select,
.brxe-woocommerce-products-orderby select,
select.orderby {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 40px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23292929' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 16px 16px !important;
	cursor: pointer;
}

/* --- Enhanced (JS) custom dropdown ---------------------------------------- */
/* Hide the native select once the custom control is in place. */
.woocommerce-ordering.tbk-ordering--enhanced > select {
	display: none !important;
}

.tbk-select {
	position: relative;
	display: inline-block;
	font-family: "Ubuntu", sans-serif;
}

.tbk-select__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.75rem;
	border-radius: 0.5rem;
	border: 1px solid black;
	background: #fff;
	color: var(--tbk-ink);
	font-family: inherit;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: color .15s ease;
}

.tbk-select__toggle:hover,
.tbk-select.is-open .tbk-select__toggle {
	color: var(--tbk-primary);
}

.tbk-select__toggle::after {
	content: "\25be";
	font-size: 0.7em;
	line-height: 1;
	color: inherit;
}

.tbk-select__menu {
	position: absolute;
	top: calc(100% + 0.55rem);
	right: 0;
	min-width: 12rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	padding: 0.4rem;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(var(--tbk-ink-rgb), 0.10);
	border-radius: 0.6rem;
	box-shadow: 0 14px 32px rgba(var(--tbk-ink-rgb), 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
	z-index: 50;
}

.tbk-select.is-open .tbk-select__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.tbk-select__option {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0.5rem 0.75rem;
	border-radius: calc(0.6rem - 0.4rem - 1px);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--tbk-ink);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.tbk-select__option:hover,
.tbk-select__option.is-selected {
	background: #f7f3ee;
	color: var(--tbk-primary);
}

/* -------------------------------------------------------------------------
   Product cards: same hover as the home tour cards. The card stays put and
   the photo zooms inside its frame (span added in inc/product-display.php).
   ---------------------------------------------------------------------- */
#shop #shop-grid .product .tbk-card-media {
	display: block;
	overflow: hidden;
	border-radius: max(0px, calc(var(--tbk-r-card) - 0.75rem - 1px));
}

#shop #shop-grid .product .tbk-card-media img {
	transition: transform .35s;
	will-change: transform;
}

#shop #shop-grid .product:hover .tbk-card-media img {
	transform: scale(1.06);
}

/* -------------------------------------------------------------------------
   Product cards: identical layout whatever the title length.
   Every grid row is as tall as the tallest card, titles reserve two lines
   (so prices line up) and the button sits at the bottom of the card.
   #shop raises specificity over the template's custom CSS.
   ---------------------------------------------------------------------- */
#shop #shop-grid .products {
	grid-auto-rows: 1fr;
}

#shop #shop-grid .product .woocommerce-loop-product__title {
	box-sizing: content-box;
	min-height: 2.8em; /* two lines at line-height 1.4 */
	line-height: 1.4;
}

#shop #shop-grid .product a.woocommerce-LoopProduct-link {
	margin-bottom: 0.9rem;
}

#shop #shop-grid .product .button {
	margin-top: auto;
}

/* Narrow 4-column range: the longest French titles wrap to three lines. */
@media (min-width: 992px) and (max-width: 1099px) {
	#shop #shop-grid .product .woocommerce-loop-product__title {
		min-height: 4.2em;
	}
}