/* Abu Kamel storefront -- grid consistency, buy controls, mobile simplification.
   Layered on top of Martfury; loaded from an mu-plugin so it survives theme
   updates and theme switches. */

:root { --ak-navy:#10163f; --ak-navy-dark:#0a0e2b; --ak-line:#e6e6ec; --ak-r:6px; }

/* ---------- 1. Product grid: equal-height, aligned cards ----------
   The stock grid let each card size to its own image, so titles and
   prices sat at different heights across a row and the page looked
   untidy. Pin the image box to a fixed ratio and push the buy controls
   to the bottom of every card. */
.products .product-inner,
.woocommerce ul.products li.product .product-inner,
.mf-product-item .product-inner {
	display:flex; flex-direction:column; height:100%;
	border:1px solid var(--ak-line); border-radius:var(--ak-r);
	padding:10px; background:#fff;
	transition:box-shadow .2s ease, transform .2s ease;
}
.products .product-inner:hover { box-shadow:0 6px 18px rgba(16,22,63,.10); transform:translateY(-2px); }

.products .product-thumbnail,
.woocommerce ul.products li.product .product-thumbnail {
	position:relative; width:100%; aspect-ratio:1/1;
	display:flex; align-items:center; justify-content:center;
	overflow:hidden; background:#fff; margin-bottom:10px;
}
.products .product-thumbnail img,
.woocommerce ul.products li.product .product-thumbnail img {
	max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
}

.products .product-details,
.woocommerce ul.products li.product .product-details {
	display:flex; flex-direction:column; flex:1 1 auto;
}
.products .product-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size:14px; line-height:1.45; min-height:2.9em;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
	overflow:hidden; margin:0 0 6px;
}
.products .price,
.woocommerce ul.products li.product .price {
	font-size:15px; font-weight:700; margin:0 0 10px;
}
.products .ak-buy-row { margin-top:auto; }

/* ---------- 2. Buy row: quantity stepper + add to cart ---------- */
.ak-buy-row { display:flex; align-items:stretch; gap:8px; width:100%; }

.ak-qty {
	display:flex; align-items:stretch; flex:0 0 auto;
	border:1px solid var(--ak-line); border-radius:var(--ak-r); overflow:hidden; background:#fff;
}
.ak-qty button {
	width:32px; min-height:40px; border:0; background:#f4f4f7; color:var(--ak-navy);
	font-size:18px; line-height:1; cursor:pointer; padding:0;
	display:flex; align-items:center; justify-content:center;
}
.ak-qty button:hover { background:#e9e9f0; }
.ak-qty button:active { background:#dedee8; }
.ak-qty-input {
	width:38px; min-height:40px; border:0; text-align:center;
	font-size:15px; font-weight:700; color:var(--ak-navy);
	background:#fff; padding:0; box-shadow:none;
}
.ak-qty-input:focus { outline:none; }

.ak-buy-row .button,
.ak-buy-row .add_to_cart_button {
	flex:1 1 auto; min-height:40px;
	display:flex; align-items:center; justify-content:center; text-align:center;
	background:var(--ak-navy) !important; color:#fff !important; border:0 !important;
	border-radius:var(--ak-r); font-size:14px; font-weight:700;
	padding:0 10px; margin:0 !important; white-space:nowrap;
}
.ak-buy-row .button:hover { background:var(--ak-navy-dark) !important; }
.ak-buy-row .added_to_cart { display:none !important; }

/* ---------- 3. Currency control in the header ---------- */
.ak-currency-item { display:flex !important; align-items:center; }
.ak-currency-select {
	background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.28);
	border-radius:var(--ak-r); padding:4px 8px; font-size:13px; line-height:1.4;
	min-height:32px; cursor:pointer; appearance:auto;
}
.ak-currency-select option { color:#111; background:#fff; }
.ak-approx-note { font-size:12px; color:#777; margin-top:4px; font-weight:400; }

/* ---------- 4. Add-to-cart confirmation ---------- */
.ak-added-msg { font-weight:700; }
.woocommerce-message .ak-go-cart {
	background:var(--ak-navy) !important; color:#fff !important; border-radius:var(--ak-r);
}

/* ---------- 5. Mobile: fewer columns, bigger tap targets ----------
   The owner's customers are mostly on phones and many are buying online
   for the first time, so the phone layout is deliberately plainer than
   the desktop one: two columns, stacked buy controls, no cramped rows. */
@media (max-width:767px) {
	.products .product-title,
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size:13px; min-height:2.8em;
	}
	.products .price,
	.woocommerce ul.products li.product .price { font-size:14px; }

	.ak-buy-row { flex-direction:column; gap:6px; }
	.ak-qty { width:100%; }
	.ak-qty button { flex:1 1 auto; min-height:42px; width:auto; font-size:20px; }
	.ak-qty-input { flex:1 1 auto; width:auto; min-height:42px; font-size:16px; }
	.ak-buy-row .button,
	.ak-buy-row .add_to_cart_button { width:100%; min-height:44px; font-size:14px; }

	/* Any tappable header control gets a real 44px target. */
	.site-header .header-icon,
	.site-header .btn-search,
	.main-navigation .menu-toggle,
	.mf-navigation-mobile .navigation-icon { min-height:44px; min-width:44px; }

	.ak-currency-select { min-height:38px; font-size:14px; }

	/* Checkout: one field per row, nothing cramped. */
	.woocommerce-checkout .form-row { width:100% !important; float:none !important; margin-bottom:14px; }
	.woocommerce-checkout .form-row input.input-text,
	.woocommerce-checkout .form-row textarea,
	.woocommerce-checkout .form-row select,
	.woocommerce-checkout .select2-container .select2-selection {
		min-height:46px !important; font-size:16px !important; /* 16px stops iOS zoom-on-focus */
	}
	.woocommerce-checkout label { font-size:15px; font-weight:600; }
}

/* ---------- 6. Checkout, both breakpoints ---------- */
.woocommerce-checkout .form-row label { display:block; margin-bottom:6px; }
.woocommerce-checkout #place_order {
	width:100%; min-height:52px; font-size:17px; font-weight:700;
	background:var(--ak-navy) !important; color:#fff !important; border-radius:var(--ak-r);
}


/* ---------- 7. Martfury-specific corrections ----------
   Martfury names its card parts .mf-product-thumbnail / .mf-product-details
   (not the WooCommerce defaults), and it hides the buy controls in a
   .footer-button block that only appears on :hover. Hover does not exist on
   a phone, which is where most of this shop's customers are -- so the buy
   row is made permanently visible instead. */
.products .mf-product-thumbnail,
.woocommerce ul.products li.product .mf-product-thumbnail {
	position:relative; width:100%; aspect-ratio:1/1;
	display:flex; align-items:center; justify-content:center;
	overflow:hidden; background:#fff; margin-bottom:10px;
}
.products .mf-product-thumbnail img,
.woocommerce ul.products li.product .mf-product-thumbnail img {
	max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
}
.products .mf-product-details,
.woocommerce ul.products li.product .mf-product-details {
	display:flex; flex-direction:column; flex:1 1 auto;
}

/* Always show the buy controls -- no hover required. */
.products .footer-button,
.woocommerce ul.products li.product .footer-button,
.mf-product-item .footer-button {
	display:block !important;
	opacity:1 !important;
	visibility:visible !important;
	position:static !important;
	transform:none !important;
	height:auto !important;
	margin-top:auto;
	padding-top:8px;
}

/* Martfury's own hover-reveal actions (wishlist/compare/quick view) stay
   hover-only on desktop but are simply hidden on phones, where they crowd
   the card and are not what a first-time buyer is looking for. */
@media (max-width:767px) {
	.products .mf-product-thumbnail .footer-button-2,
	.products .group-action,
	.products .mf-product-thumbnail .product-group-button { display:none !important; }
}


/* ---------- 8. Buy-row containment ----------
   Martfury renders two .footer-button blocks per card: one holds the
   wishlist/compare icons, the other holds the add-to-cart. Both were
   absolutely positioned inside a 50px box, so once they were forced
   visible the buy row spilled out of the card. Give the block real width,
   and drop the secondary icon row entirely -- wishlist and compare are
   noise for a customer who has never bought online before. */
.products .footer-button,
.woocommerce ul.products li.product .footer-button {
	width:100% !important;
	max-width:100% !important;
	left:auto !important; right:auto !important; bottom:auto !important;
	box-sizing:border-box;
}
.products .footer-button:not(:has(.ak-buy-row)),
.woocommerce ul.products li.product .footer-button:not(:has(.ak-buy-row)) {
	display:none !important;
}

.ak-buy-row { max-width:100%; box-sizing:border-box; }
.ak-buy-row .button,
.ak-buy-row .add_to_cart_button {
	white-space:normal !important;
	line-height:1.25;
	font-size:13px;
	padding:6px 8px;
	min-width:0;
}
.ak-buy-row .button i,
.ak-buy-row .add_to_cart_button i { display:none !important; }

/* Keep the hover-reveal icons on the image itself out of the way. */
.products .mf-product-thumbnail .group-action,
.products .mf-product-thumbnail .product-group-button { z-index:2; }


/* ---------- 9. Stack the buy controls at every width ----------
   Product cards are ~196px wide in a 4-column grid, which is not enough
   room for a stepper and a button side by side -- the Arabic label was
   being clipped to "أضف". Stacking is also the clearer layout for a
   first-time buyer, so it is used on desktop as well as phones. */
.ak-buy-row {
	flex-direction:column !important;
	gap:6px !important;
	align-items:stretch !important;
}
.ak-qty { width:100% !important; flex:0 0 auto !important; }
.ak-qty button { flex:1 1 auto !important; width:auto !important; min-height:38px !important; }
.ak-qty-input { flex:1 1 auto !important; width:auto !important; min-height:38px !important; }

.ak-buy-row .button,
.ak-buy-row .add_to_cart_button {
	width:100% !important;
	min-height:42px !important;
	font-size:14px !important;
	white-space:nowrap !important;
	overflow:hidden;
	text-overflow:ellipsis;
	padding:6px 6px !important;
	letter-spacing:0;
}


/* ---------- 10. Stepper sizing + stray action row ----------
   The <input> kept its intrinsic ~215px size because flex-basis:auto
   defers to it, squeezing the +/- buttons down to 11px. flex:1 1 0 plus
   min-width:0 makes the input actually shrink to its share of the row.
   The wishlist/compare links live in .action-button (not .footer-button),
   which is why they were still showing under the buy button. */
.ak-qty { display:flex !important; width:100% !important; box-sizing:border-box; }
.ak-qty button {
	flex:0 0 40px !important;
	width:40px !important;
	min-width:40px !important;
	font-size:20px !important;
	font-weight:700;
}
.ak-qty-input {
	flex:1 1 0 !important;
	width:100% !important;
	min-width:0 !important;
	max-width:none !important;
	box-sizing:border-box;
}

.products .action-button,
.woocommerce ul.products li.product .action-button,
.products .mf-compare-button,
.products .wcboost-wishlist-button {
	display:none !important;
}