/**
 * AnA Beauty Store Builder Pro — mobile hardening.
 *
 * Loaded last. Everything here corrects a rendering fault seen on real
 * devices rather than adding new design.
 */

/* ---------------------------------------------------------------
 * 1. Selects were clipping their own text on iOS.
 *
 * Mobile Safari applies its own control height and line-height to
 * <select>, which cut "Greater Accra" in half vertically. Resetting the
 * appearance and setting an explicit line-height and min-height fixes it.
 * A flat inline caret replaces the native arrow that appearance:none removes.
 * ------------------------------------------------------------ */
.ana-sb select,
.ana-co select,
.ana-delivery select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	line-height: 1.4;
	min-height: 52px;
	height: auto;
	padding-right: 42px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 13px 8px;
	text-overflow: ellipsis;
}

.ana-sb select::-ms-expand { display: none; }

/* Native option text must stay legible in the OS picker. */
.ana-sb select option,
.ana-co select option { color: #2b2b2b; background: #fff; }

/* ---------------------------------------------------------------
 * 2. Product card action buttons were rendering as wide ovals.
 *
 * Theme button rules were adding their own padding and min-width, so the
 * 36px circle stretched. These need to win.
 * ------------------------------------------------------------ */
.ana-sb .ana-product__action {
	flex: 0 0 auto;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	min-height: 38px !important;
	max-width: 38px;
	padding: 0 !important;
	margin: 0;
	border-radius: 50% !important;
	box-sizing: border-box;
	line-height: 1;
}

.ana-sb .ana-qty__btn {
	flex: 0 0 auto;
	min-width: 44px;
	padding: 0 !important;
	border-radius: 0 !important;
	box-sizing: border-box;
}

.ana-sb .ana-stars__btn {
	width: auto !important;
	min-width: 0 !important;
	padding: 2px !important;
	border-radius: 0 !important;
}

/* ---------------------------------------------------------------
 * 3. Horizontal overflow.
 *
 * The mega-menu panel and the product slider are wider than the viewport
 * on phones, which let the whole page slide sideways.
 * ------------------------------------------------------------ */
.ana-sb { overflow-x: clip; }

.ana-sb img,
.ana-sb video,
.ana-sb iframe { max-width: 100%; }

@media (max-width: 900px) {
	.ana-mega__panel { display: none !important; }
}

@media (max-width: 782px) {
	.ana-slider {
		grid-auto-columns: minmax(160px, 68vw);
		max-width: 100%;
		-webkit-overflow-scrolling: touch;
	}

	.ana-gallery__thumbs { max-width: 100%; -webkit-overflow-scrolling: touch; }
	.ana-tabs__nav { max-width: 100%; -webkit-overflow-scrolling: touch; }
	.ana-compare__scroll { -webkit-overflow-scrolling: touch; }
}

/* ---------------------------------------------------------------
 * 4. Sticky add-to-cart bar was covering the footer copyright and
 * colliding with the floating WhatsApp button.
 * ------------------------------------------------------------ */
body:has(.ana-sticky-cart:not([hidden])) .ana-footer { padding-bottom: 96px; }
body:has(.ana-sticky-cart:not([hidden])) .ana-wa { bottom: 88px; }

@media (max-width: 782px) {
	.ana-sticky-cart__inner { gap: 12px; }
	.ana-sticky-cart__info { flex: 1 1 auto; min-width: 0; }
	.ana-sticky-cart__info img { flex: none; }

	.ana-sticky-cart__title {
		display: block !important;
		font-size: 13px;
		line-height: 1.3;
		max-height: 2.6em;
		overflow: hidden;
	}

	.ana-sticky-cart__price { display: block !important; font-size: 13px; }
	.ana-sticky-cart .ana-btn { flex: none; white-space: nowrap; padding: 12px 18px; }
}

/* ---------------------------------------------------------------
 * 5. Long product titles on the single product page.
 * ------------------------------------------------------------ */
@media (max-width: 782px) {
	.ana-summary__title { overflow-wrap: anywhere; }
	.ana-summary__buy { gap: 10px; }
	.ana-summary__buy .ana-btn--block { flex: 1 1 100%; }
	.ana-summary__meta-actions { gap: 14px 20px; }
}

/* ---------------------------------------------------------------
 * 6. Checkout on phones.
 * ------------------------------------------------------------ */
@media (max-width: 782px) {
	.ana-co__field textarea { min-height: 96px; }
	.ana-co__label { font-size: 10.5px; letter-spacing: 0.06em; }
	.ana-payment > label { padding: 14px 14px; gap: 12px; }
	.ana-payment input[type="radio"] { flex: none; }
	.ana-co__terms-check { align-items: flex-start; gap: 10px; }
	.ana-co__terms-check input { margin-top: 3px; flex: none; }
}

/* ---------------------------------------------------------------
 * 7. The buy row on the single product page.
 *
 * Flex was letting the quantity stepper claim the row and squeeze the
 * Add to Cart button down to a sliver that pushed off-screen. Grid is
 * used instead: the tracks are declared, so neither child can steal
 * width from the other, and there is nothing to overflow.
 * ------------------------------------------------------------ */
.ana-sb .ana-summary__buy {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 100%;
}

.ana-sb .ana-summary__buy > * { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* Buy Now and the variations block always take a full row of their own. */
.ana-sb .ana-summary__buy > .ana-btn--outline,
.ana-sb .ana-summary__buy > .ana-variations,
.ana-sb .ana-summary__buy > .ana-small { grid-column: 1 / -1; }

.ana-sb .ana-summary__buy .ana-qty { width: auto; }
.ana-sb .ana-summary__buy .ana-btn { width: 100%; }

@media (max-width: 782px) {
	/* Single column on phones — stepper on top, buttons full width below. */
	.ana-sb .ana-summary__buy { grid-template-columns: minmax(0, 1fr); }
	.ana-sb .ana-summary__buy .ana-qty { width: 100%; justify-content: space-between; }
}

/* Nothing on the product page may extend past the viewport. */
.ana-sb .ana-single,
.ana-sb .ana-single__top,
.ana-sb .ana-summary { min-width: 0; max-width: 100%; }

/* ---------------------------------------------------------------
 * 8. Product card buttons must stay clickable.
 *
 * When a card is narrow the Add to Cart label was overflowing its own
 * card, leaving only a sliver of the button inside the clickable area.
 * ------------------------------------------------------------ */
.ana-sb .ana-product { min-width: 0; max-width: 100%; overflow: hidden; }
.ana-sb .ana-product__body { min-width: 0; }

.ana-sb .ana-product__cart {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding-left: 10px;
	padding-right: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ana-sb .ana-product__title,
.ana-sb .ana-product__brand { overflow-wrap: anywhere; }

/* Grid tracks must be allowed to shrink or the last column overflows. */
.ana-sb .ana-shop__grid { min-width: 0; max-width: 100%; }
.ana-sb .ana-shop__grid > * { min-width: 0; }
.ana-sb .ana-shop__main,
.ana-sb .ana-shop__results { min-width: 0; max-width: 100%; }

/* ---------------------------------------------------------------
 * 9. The cart icon must never be hidden or squeezed out.
 *
 * It is the single most important control in the header, so it is
 * pinned visible and given a guaranteed footprint. Wishlist and account
 * yield space before it does.
 * ------------------------------------------------------------ */
.ana-sb .ana-header__cart {
	display: inline-flex !important;
	flex: 0 0 auto;
	order: 10;
}

.ana-sb .ana-header__actions { flex-wrap: nowrap; min-width: 0; }

@media (max-width: 480px) {
	/* On the narrowest phones only the cart and account survive. */
	.ana-sb .ana-header__action--wishlist { display: none; }
	.ana-sb .ana-header__action { width: 34px; height: 34px; font-size: 18px; }
}

/* ---------------------------------------------------------------
 * 10. Cart page rows on phones.
 *
 * The five-column grid was overflowing before the mobile template took
 * over, hiding the remove control off the right edge.
 * ------------------------------------------------------------ */
.ana-sb .ana-cart,
.ana-sb .ana-cart__layout,
.ana-sb .ana-cart__items { min-width: 0; max-width: 100%; }

.ana-sb .ana-cart__row > * { min-width: 0; }

@media (max-width: 782px) {
	.ana-sb .ana-cart__row { gap: 10px 12px; }
	.ana-sb .ana-cart__name { overflow-wrap: anywhere; }
	.ana-sb .ana-cart__remove { padding: 4px; }
	.ana-sb .ana-cart__qty .ana-qty { width: 100%; justify-content: space-between; }
	.ana-sb .ana-cart__line { white-space: nowrap; }
}

/* ---------------------------------------------------------------
 * 11. Product cards were squeezed and wildly uneven on phones.
 *
 * Cause: nothing bounded the title. A supplier name like "Cerave Daily
 * Moisturizing Lotion 237ml, Cera Ve Daily Moisturizer, Face Hydrator,
 * Gentle daily moisturizer, Non Fragrance daily lotion, Moisturizer,
 * Face Cream, Paraben Free" ran to nine lines, stretching its grid row
 * so the neighbouring card became mostly empty space, and pushing the
 * image area down to a sliver.
 *
 * Fix: clamp the title to three lines, give the image a fixed square,
 * and pin the button to the bottom of every card so all four align.
 * ------------------------------------------------------------ */
.ana-sb .ana-shop__grid { align-items: stretch; }

.ana-sb .ana-product {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* The media box is a fixed square, so every image sits on the same line */
.ana-sb .ana-product__media {
	flex: none;
	aspect-ratio: 1 / 1;
	width: 100%;
}

.ana-sb .ana-product__media .ana-product__link { display: block; height: 100%; }

.ana-sb .ana-product__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Body fills the rest, button pinned to the base */
.ana-sb .ana-product__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.ana-sb .ana-product__cart { margin-top: auto; }

/* Three lines is enough to identify a product; the full name is on the
   product page. Without this one card dictates the height of the row. */
.ana-sb .ana-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ana-sb .ana-product__title a { text-decoration: none; }

@media (max-width: 782px) {
	/* Wider gutters and more breathing room inside each card */
	.ana-sb .ana-shop__grid { gap: 14px 12px !important; }

	.ana-sb .ana-product { border-radius: 14px; }

	.ana-sb .ana-product__img { padding: 12px; }

	.ana-sb .ana-product__body {
		padding: 14px 12px 16px;
		gap: 7px;
	}

	.ana-sb .ana-product__title {
		font-size: 13.5px;
		line-height: 1.4;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		min-height: calc(2 * 1.4 * 13.5px);
	}

	.ana-sb .ana-product__brand { font-size: 10px; letter-spacing: 0.07em; }

	.ana-sb .ana-product__rating { font-size: 12px; gap: 1px; }
	.ana-sb .ana-product__reviews { font-size: 11px; margin-left: 3px; }

	.ana-sb .ana-product__price { font-size: 15px; }

	.ana-sb .ana-product__cart {
		padding: 11px 8px;
		font-size: 12.5px;
		border-radius: 10px;
	}

	/* The icon costs width that the label needs at this size */
	.ana-sb .ana-product__cart i { display: none; }

	.ana-sb .ana-product__action { width: 32px; height: 32px; font-size: 15px; }
	.ana-sb .ana-product__actions { gap: 6px; top: 8px; right: 8px; }
	.ana-sb .ana-product__badges { top: 8px; left: 8px; gap: 5px; }
	.ana-sb .ana-badge { padding: 4px 8px; font-size: 9.5px; letter-spacing: 0.04em; }
}

@media (max-width: 380px) {
	.ana-sb .ana-shop__grid { gap: 10px 8px !important; }
	.ana-sb .ana-product__body { padding: 12px 10px 14px; }
	.ana-sb .ana-product__title { font-size: 12.5px; }
	.ana-sb .ana-product__price { font-size: 14px; }
	.ana-sb .ana-product__cart { font-size: 11.5px; padding: 10px 6px; }
}