/*
Theme Name: Alriqa Sport — الرقة سبورت
Theme URI: https://alriqasport.ly
Author: الرقة سبورت
Description: قالب متجر رياضي عربي (RTL) مبني خصيصاً لـ WooCommerce بدون أي إضافات خارجية. يطابق تصميم "الرقة سبورت" 100%: هيرو متحرك، شريط علامات، قوائم ميجا، سلة منبثقة، عرض سريع، شحن حسب المدينة، ومصادقة عبر رقم الهاتف. Arabic-first RTL WooCommerce theme — no external plugins required.
Version: 1.5.7
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alriqa
Tags: rtl-language-support, e-commerce, full-width-template, custom-menu, featured-images
WC requires at least: 7.0
WC tested up to: 9.0
*/

/*
  The full design system lives in assets/css/design-system.css and is enqueued
  by functions.php. This file only carries the theme header that WordPress
  requires, plus a couple of WordPress-core block overrides.
*/

.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}

/* -------------------------------------------------------------------------
   Mega-menu layout fix
   The prototype injected ".mega-promos + .mega-cols" straight into the flex
   container ".mega-inner". The WordPress port wraps each menu in an extra
   ".mega-panel" (so all five panels can be pre-rendered and toggled), which
   absorbed the flex children and made promos stack above the columns. Re-apply
   the flex layout on the panel itself so promos sit beside the columns again.
   ".mega-panel[hidden]" must stay display:none — an explicit display on the
   element otherwise defeats the browser's default [hidden] rule.
   ------------------------------------------------------------------------- */
.mega-panel{flex:1;display:flex;gap:0;align-items:flex-start;min-width:0;width:100%}
.mega-panel[hidden]{display:none}

/* -------------------------------------------------------------------------
   Branches page — store-location cards inside .policy-body.
   Uses the design tokens so it sits naturally within the policy layout.
   ------------------------------------------------------------------------- */
.policy-body .branch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:18px 0}
.policy-body .branch-card{border:1px solid var(--line);border-radius:14px;padding:22px 24px;background:#fff;transition:border-color .18s,box-shadow .18s}
.policy-body .branch-card:hover{border-color:var(--navy);box-shadow:0 14px 30px rgba(20,26,82,.08)}
.policy-body .branch-card .b-tag{display:inline-block;background:var(--orange-50);color:var(--orange-600);font-weight:900;font-size:12px;padding:4px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.3px}
.policy-body .branch-card h3{font-size:18px;font-weight:900;color:var(--ink);margin:11px 0 13px}
.policy-body .branch-card .b-row{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;color:var(--slate);margin-bottom:9px;line-height:1.55;padding:0}
.policy-body .branch-card .b-row::before{display:none}
.policy-body .branch-card .b-row svg{width:17px;height:17px;color:var(--orange);flex-shrink:0;margin-top:2px}
.policy-body .branch-card .b-map{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-weight:800;font-size:13.5px;color:var(--navy)}
.policy-body .branch-card .b-map svg{width:16px;height:16px}
.policy-body .branch-card .b-map:hover{gap:10px}
@media(max-width:680px){.policy-body .branch-grid{grid-template-columns:1fr}}

/* -------------------------------------------------------------------------
   WooCommerce pages (cart / checkout / my-account) — on-brand styling.
   These pages render WooCommerce's own shortcode markup; we align buttons,
   tables and the account navigation with the theme without breaking layout.
   ------------------------------------------------------------------------- */
.woocommerce-page-content{max-width:var(--maxw);margin:0 auto}
.woocommerce-page-content a{color:var(--navy)}

/* Buttons */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit{
	background:var(--navy);color:#fff;border-radius:10px;font-weight:800;
	padding:12px 22px;border:none;transition:.16s;font-family:inherit;text-transform:none}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{background:var(--navy-900);color:#fff}
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce #place_order{background:var(--orange);color:#fff}
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,.woocommerce #place_order:hover{background:var(--orange-600);color:#fff}

/* Tables (cart, order details) */
.woocommerce table.shop_table{border:1px solid var(--line);border-radius:14px;border-collapse:separate;overflow:hidden}
.woocommerce table.shop_table th{background:var(--bg-soft);color:var(--ink);font-weight:800}
.woocommerce table.shop_table td,.woocommerce table.shop_table th{padding:14px 16px}
.woocommerce .cart_totals h2,.woocommerce-checkout h3{color:var(--ink);font-weight:900}

/* Quantity + form fields */
.woocommerce .quantity .qty,.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,.woocommerce form .form-row select,
.woocommerce-cart .coupon input[type="text"]{
	border:2px solid var(--line);border-radius:10px;padding:10px 12px;font-family:inherit}

/* Notices */
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-radius:12px;border-top-color:var(--orange)}
.woocommerce-message{border-top-color:var(--orange)}

/* My-account: navigation as a sidebar card */
/* Account uses the design's .account-wrap / .acc-side / .acc-panel layout
   (output by the overridden myaccount templates); the shortcode wrapper is
   just a block so it doesn't fight the grid. */
.woocommerce-account .woocommerce{display:block}
.woocommerce-MyAccount-content{min-width:0}

/* Wishlist grid (inside the account endpoint) */
.alriqa-wish-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:18px}

/* -------------------------------------------------------------------------
   Checkout & account form fields — match the design's .field inputs exactly,
   plus payment box, shipping methods and the co-card layout. These bridge
   WooCommerce's native markup onto the approved look (no template rewrite of
   the field logic, so validation / gateways / AJAX keep working).
   ------------------------------------------------------------------------- */

/* Two-column field grid inside the checkout card (matches .form-grid) */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .form-row.notes,
.woocommerce-checkout .form-row.address-field{grid-column:1/-1}
@media(max-width:560px){
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-additional-fields__field-wrapper{grid-template-columns:1fr}
}

/* Field appearance — identical to .field / .field input */
.woocommerce-checkout .form-row,
.woocommerce-MyAccount-content .form-row,
.woocommerce form.checkout .form-row{display:flex;flex-direction:column;gap:7px;margin:0 0 4px}
.woocommerce-checkout .form-row label,
.woocommerce-MyAccount-content .form-row label{font-size:13.5px;font-weight:700;color:var(--ink)}
.woocommerce-checkout .form-row .woocommerce-input-wrapper,
.woocommerce-MyAccount-content .form-row .woocommerce-input-wrapper{display:block;width:100%}
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-MyAccount-content .input-text,
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea{
	width:100%;border:1.5px solid var(--line);border-radius:12px;padding:15px 16px;
	font-size:15px;background:#fff;transition:.16s;font-family:inherit;color:var(--ink)}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-MyAccount-content .input-text:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus{border-color:var(--black);outline:none}
.woocommerce-checkout textarea,.woocommerce-MyAccount-content textarea{min-height:90px;resize:vertical}

/* select2 (country/state) to match */
.woocommerce-checkout .select2-container--default .select2-selection--single,
.woocommerce-checkout .select2-container .select2-selection{
	border:1.5px solid var(--line)!important;border-radius:12px!important;height:auto!important;min-height:53px!important;padding:13px 16px!important;background:#fff;display:flex;align-items:center}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:1.5;padding:0;color:var(--ink)}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{height:100%}

/* Match the reference design: neutral borders regardless of validation state. */
.woocommerce-checkout .form-row.woocommerce-validated .input-text,
.woocommerce-checkout .form-row.woocommerce-validated select,
.woocommerce-checkout .form-row.woocommerce-validated textarea,
.woocommerce-checkout .form-row.woocommerce-validated .select2-container--default .select2-selection--single{border-color:var(--line)!important;box-shadow:none!important}
.woocommerce-checkout .form-row.woocommerce-invalid .input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout .form-row.woocommerce-invalid textarea,
.woocommerce-checkout .form-row.woocommerce-invalid .select2-container--default .select2-selection--single{border-color:#e7c3c3!important}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single{border-color:var(--navy,#1f2a6b)!important;box-shadow:0 0 0 3px rgba(31,42,107,.10)!important;outline:none}
.woocommerce-checkout .form-row .woocommerce-input-wrapper{position:relative}
.woocommerce-checkout input::placeholder,
.woocommerce-checkout textarea::placeholder{color:#9aa0ad;opacity:1}

/* Hide WooCommerce's own "Billing details" heading — the co-card supplies one */
.co-card-billing .woocommerce-billing-fields > h3{display:none}
.co-card-billing .woocommerce-shipping-fields > h3,
.co-card-billing #ship-to-different-address{font-size:14.5px;font-weight:800;color:var(--ink);margin:18px 0 10px;text-transform:none;letter-spacing:0}
.co-card-billing #ship-to-different-address label{display:inline-flex;align-items:center;gap:9px;cursor:pointer}
.co-card-billing .woocommerce-additional-fields > h3{font-size:14.5px;font-weight:800;color:var(--ink);margin:6px 0 10px}

/* Order-review heading (we render our own .summary h3) */
.co-summary #order_review_heading{display:none}

/* Shipping methods inside the order review */
.co-shipping{padding:9px 0;border-top:1px solid var(--line-2);font-size:14px;color:var(--slate)}
.co-shipping #shipping_method{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.co-shipping #shipping_method li{display:flex;align-items:center;gap:9px}
.co-shipping #shipping_method li input{accent-color:var(--orange);width:17px;height:17px}
.co-shipping .woocommerce-shipping-totals{display:flex;justify-content:space-between}

/* Payment box */
#payment{background:transparent;border-radius:12px;margin-top:6px}
#payment ul.payment_methods{border:1px solid var(--line);border-radius:12px;padding:6px;list-style:none;margin:0 0 16px}
#payment ul.payment_methods li{padding:8px 10px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
#payment ul.payment_methods li input[type=radio]{accent-color:var(--orange);width:18px;height:18px}
#payment ul.payment_methods li label{font-weight:800;font-size:14.5px;color:var(--ink);margin:0;flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap}
#payment .payment_box{flex:1 1 100%;background:var(--bg-softer);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--slate);margin-top:6px}
#payment .payment_box::before{display:none}
#payment .woocommerce-terms-and-conditions-wrapper{margin:10px 0}
#payment #place_order{width:100%;margin-top:6px}

/* Order-received / thank-you + view-order tables reuse the brand table style */
.woocommerce-order .woocommerce-order-overview{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;padding:0;margin:0 0 24px}
.woocommerce-order .woocommerce-order-overview li{background:var(--bg-soft);border-radius:12px;padding:14px 16px;font-size:13px;color:var(--muted);font-weight:700;border:none}
.woocommerce-order .woocommerce-order-overview li strong{display:block;font-size:16px;color:var(--ink);margin-top:4px}

/* -------------------------------------------------------------------------
   Account layout hardening — WooCommerce's default account CSS floats and
   widths the navigation/content, which fights the design's .account-wrap grid
   and collapses the sidebar. Force the grid and neutralise the float/width.
   ------------------------------------------------------------------------- */
.woocommerce-account .account-wrap{display:grid !important;grid-template-columns:268px 1fr !important;gap:34px;align-items:start}
.woocommerce-account .account-wrap > .acc-side,
.woocommerce-account .account-wrap > .woocommerce-MyAccount-navigation{float:none !important;width:auto !important;max-width:none !important;margin:0 !important}
.woocommerce-account .account-wrap > .woocommerce-MyAccount-content{float:none !important;width:auto !important;max-width:none !important;margin:0 !important;min-width:0}
.acc-side .acc-nav a{white-space:nowrap}
@media(max-width:900px){
	.woocommerce-account .account-wrap{grid-template-columns:1fr !important}
	.acc-side{position:static !important}
}

/* -------------------------------------------------------------------------
   Mega-menu — align the dropdown's content edges with the header container.
   The promo column sits flush to the (RTL) right edge like the header nav, and
   the outermost link column aligns flush to the left edge.
   ------------------------------------------------------------------------- */
.mega-inner{padding-left:30px;padding-right:30px}
.mega-promos{margin-right:0;margin-left:30px}
.mega-cols > .mega-col:last-child{padding-left:0}

/* -------------------------------------------------------------------------
   Shop pagination (AJAX filter) — not in the base design system.
   ------------------------------------------------------------------------- */
.shop-pagination{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.shop-pagination .page-numbers{min-width:40px;height:40px;display:inline-grid;place-items:center;padding:0 12px;border:1.5px solid var(--line);border-radius:10px;font-weight:800;font-size:14px;color:var(--ink);background:#fff;cursor:pointer;transition:.15s;text-decoration:none}
.shop-pagination .page-numbers:hover{border-color:var(--navy);color:var(--navy)}
.shop-pagination .page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff;cursor:default}
.shop-pagination .page-dots{color:var(--muted);padding:0 4px}
.grid-products{transition:opacity .15s ease}

/* -------------------------------------------------------------------------
   Delivery method (normal / express) shown as selectable radio-cards inside
   the checkout order review — matches the design's .radio-card treatment.
   ------------------------------------------------------------------------- */
.co-shipping{padding:12px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);margin:6px 0}
.co-shipping > .woocommerce-shipping-totals{display:block}
.co-shipping th{display:block;font-size:13px;font-weight:800;color:var(--ink);margin-bottom:10px;text-align:right}
.co-shipping td{display:block}
.co-shipping #shipping_method{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.co-shipping #shipping_method li{display:flex;align-items:center;gap:12px;border:2px solid var(--line);border-radius:10px;padding:13px 14px;cursor:pointer;transition:.16s;margin:0}
.co-shipping #shipping_method li:hover{border-color:var(--black)}
.co-shipping #shipping_method li input[type=radio]{accent-color:var(--orange);width:18px;height:18px;margin:0;flex-shrink:0}
.co-shipping #shipping_method li:has(input:checked){border-color:var(--black);background:var(--bg-softer)}
.co-shipping #shipping_method li label{margin:0;font-weight:800;font-size:14px;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;cursor:pointer}
.co-shipping #shipping_method li label .woocommerce-Price-amount,
.co-shipping #shipping_method li label bdi{color:var(--navy);font-weight:900;white-space:nowrap}
.co-shipping .woocommerce-shipping-destination{font-size:12.5px;color:var(--muted);margin-top:8px}

/* Same treatment for the cart-page shipping options, if any. */
.summary #shipping_method{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.summary #shipping_method li{display:flex;align-items:center;gap:10px}
.summary #shipping_method li input[type=radio]{accent-color:var(--orange);width:17px;height:17px}

/* -------------------------------------------------------------------------
   Checkout — 4 design sections (contact / address / delivery / payment).
   ------------------------------------------------------------------------- */
.co-page-title{font-size:30px;font-weight:900;color:var(--navy);letter-spacing:-.4px;margin:0 0 18px}

/* Field grid inside the contact / address cards (matches .form-grid) */
.co-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
/* Larger, airier fields to match the reference design (high specificity + !important to beat caching/overrides). */
#customer_details .co-fields .input-text,
#customer_details .co-fields select,
#customer_details .co-fields textarea,
#customer_details .co-fields .select2-container--default .select2-selection--single,
#customer_details .co-notes .input-text,
#customer_details .co-notes textarea{
	min-height:53px!important;height:auto!important;padding:14px 18px!important;
	font-size:16px!important;border-radius:12px!important;border-width:1.5px!important;box-sizing:border-box!important}
#customer_details .co-fields .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:24px!important;font-size:16px!important}
#customer_details .co-notes textarea,#customer_details .co-fields textarea{min-height:96px!important}
#customer_details .co-fields .form-row label,#customer_details .co-notes label{font-size:14px!important;font-weight:800!important;margin-bottom:2px}
.co-fields .form-row{margin:0}
.co-fields .form-row-wide,
.co-fields .form-row[id*="address_1"]{grid-column:1/-1}
#customer_details .co-fields .form-row[id*="city"]{grid-column:1!important}
#customer_details .co-fields .form-row[id*="district"]{grid-column:2!important}
@media(max-width:560px){#customer_details .co-fields .form-row[id*="city"],#customer_details .co-fields .form-row[id*="district"]{grid-column:1/-1!important}}
.co-fields .form-row-first{grid-column:1}
.co-fields .form-row-last{grid-column:2}
@media(max-width:560px){.co-fields .form-row-first,.co-fields .form-row-last{grid-column:1/-1}}
.co-notes{margin-top:14px}
.co-notes .form-row{margin:0}
@media(max-width:560px){.co-fields{grid-template-columns:1fr}}

/* Section titles inside the summary */
.co-sec-title{font-size:15px;font-weight:900;color:var(--ink);margin:20px 0 12px;padding-top:18px;border-top:1px solid var(--line-2)}
.co-sec-title.first{margin-top:0;padding-top:0;border-top:none;font-size:18px}

/* Delivery method radio-cards */
.ship-cards{display:flex;flex-direction:column;gap:10px}
.ship-card{display:flex;align-items:center;gap:12px;border:2px solid var(--line);border-radius:12px;padding:13px 14px;cursor:pointer;transition:.16s}
.ship-card:hover{border-color:var(--black)}
.ship-card.active{border-color:var(--navy);background:var(--orange-50)}
.ship-card input[type=radio]{accent-color:var(--orange);width:19px;height:19px;flex-shrink:0;margin:0}
.ship-card .sc-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ship-card .sc-title{font-weight:800;font-size:14.5px;color:var(--ink)}
.ship-card .sc-desc{font-size:12px;color:var(--muted)}
.ship-card .sc-price{font-weight:900;color:var(--navy);white-space:nowrap}
.ship-empty{font-size:13px;color:var(--muted);padding:6px 0}

/* Payment as radio-cards (طريقة الدفع) */
#order_review #payment{background:transparent}
#order_review #payment ul.payment_methods{border:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:10px}
#order_review #payment ul.payment_methods li{border:2px solid var(--line);border-radius:12px;padding:13px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;transition:.16s}
#order_review #payment ul.payment_methods li:hover{border-color:var(--black)}
#order_review #payment ul.payment_methods li input[type=radio]{accent-color:var(--orange);width:19px;height:19px}
#order_review #payment ul.payment_methods li label{font-weight:800;font-size:14.5px;color:var(--ink);margin:0;flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap}
#order_review #payment ul.payment_methods li label img,
#payment ul.payment_methods li label img{max-height:24px!important;width:auto!important;margin:0!important;flex:0 0 auto;vertical-align:middle}
#order_review #payment ul.payment_methods li label img.mmlt-pay-logo,
#payment ul.payment_methods li label img.mmlt-pay-logo{max-height:26px!important;max-width:150px!important}
/* Footer payment badges that hold wide logos (Moamalat / Tadawul). */
.pay-badges .pb.pb-wide{min-width:76px}
.pay-badges .pb.pb-wide img{height:auto!important;max-height:24px!important;max-width:108px!important}
#order_review #payment .payment_box{flex:1 1 100%;background:var(--bg-softer);border-radius:10px;padding:11px 13px;font-size:12.5px;color:var(--slate);margin:4px 0 0}
#order_review #payment .payment_box::before{display:none}
#order_review #payment .place-order{padding:0;margin-top:8px}
#order_review #payment #place_order{width:100%}
.co-summary .woocommerce-terms-and-conditions-wrapper{font-size:12.5px;color:var(--muted);margin:6px 0}

/* -------------------------------------------------------------------------
   Sports-deals heading alignment — the design padded .deals-head with
   var(--gutter) ON TOP of being max-width + centred, double-indenting it
   (a visible gap on the right) so it didn't line up with the other homepage
   section headings (which sit inside .wrap at 28px). Match .wrap exactly.
   ------------------------------------------------------------------------- */
.deals-sec .deals-head{padding-left:28px;padding-right:28px}

/* -------------------------------------------------------------------------
   Product-card size chips are informational only (not selectable): they show
   which sizes are available vs out of stock. No pointer, no hover/selected
   state; unavailable sizes are struck through and muted.
   ------------------------------------------------------------------------- */
.pcard .variants .szchip{cursor:default}
.pcard .variants .szchip:hover{border-color:var(--line);background:#fff;color:var(--ink)}
.pcard .variants .szchip.oos{
	color:var(--muted);
	border-color:var(--line-2);
	background:var(--bg-soft);
	text-decoration:line-through;
	text-decoration-thickness:1.5px;
	opacity:.7;
}

/* Brand name in the product card links to that brand's products page. */
.pcard .brandname-link{display:inline-block;text-decoration:none;margin-bottom:3px}
.pcard .brandname-link .brandname{margin-bottom:0}
.pcard .brandname-link:hover .brandname{color:var(--orange);text-decoration:underline}

/* Hero overlay — lighter gradient (overrides design-system default). */
.hero-overlay{
	position:absolute;
	inset:0;
	z-index:1;
	background:radial-gradient(ellipse at center, rgba(0,0,0,.42), rgb(0 0 0 / 11%) 75%), linear-gradient(to top, rgb(0 0 0 / 0%), transparent 38%);
}

/* Live stock-count line under the size grid (product page + quick-view). */
.sizestock{margin-top:9px;min-height:18px;font-size:13px;font-weight:800;color:var(--muted);letter-spacing:.1px}
.sizestock.show{color:var(--navy)}
.sizestock.low{color:var(--orange)}
.sizestock.out{color:#c0392b}
.qv-body .sizestock{margin-top:7px;font-size:12.5px}

/* Checkout mini-item quantity badge — nudge inside the thumbnail corner. */
.co-mini-item .m .qb{top:3px;left:4px}

/* Brand name inside the quick-view popup links to that brand's products. */
.qv-body a.qbrand-link{text-decoration:none;cursor:pointer}
.qv-body a.qbrand-link:hover{color:var(--orange);text-decoration:underline}

/* ===== Featured shoes circle marquee (الأحذية الرياضية المميزة) ===== */
.circ-sec{padding:42px 0 10px;overflow:hidden}
.circ-lane{overflow:hidden;direction:ltr;padding:26px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.circ-lane+.circ-lane{margin-top:2px}
.circ-track{display:flex;gap:26px;width:max-content;align-items:center;direction:ltr}
.circ-item{flex-shrink:0;width:172px;height:172px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:visible;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;position:relative}
.circ-item:hover{transform:scale(1.08);box-shadow:0 6px 16px rgba(20,26,82,.08);border-color:#dfe1ea}
.circ-item img{width:78%;height:78%;object-fit:contain;border-radius:50%;transition:transform .4s ease}
.circ-tip{position:absolute;top:50%;right:calc(100% + 12px);left:auto;bottom:auto;transform:translateY(-50%) translateX(6px);background:#0f1638;color:#fff;padding:7px 11px;border-radius:9px;font-size:11px;font-weight:600;line-height:1.3;width:max-content;max-width:170px;text-align:right;opacity:0;visibility:hidden;transition:.2s;z-index:20;pointer-events:none;box-shadow:0 8px 20px rgba(11,15,42,.28)}
.circ-tip b{display:block;color:var(--orange);font-weight:900;font-size:10px;text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px}
.circ-tip .pr{display:block;color:#fff;font-weight:900;font-size:12px;margin-top:3px}
.circ-tip .pr s{color:rgba(255,255,255,.55);font-weight:700;font-size:11px;margin-left:4px}
.circ-badge{position:absolute;top:6px;right:6px;z-index:5;background:var(--sale);color:#fff;font-weight:900;font-size:11px;padding:3px 8px;border-radius:999px;box-shadow:0 2px 6px rgba(230,35,31,.35)}
.circ-tip::after{content:"";position:absolute;top:50%;right:-10px;left:auto;transform:translateY(-50%);border:5px solid transparent;border-right-color:#0f1638;border-left:0}
.circ-item:hover .circ-tip{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
.circ-item:hover img{transform:scale(1.08) rotate(-4deg)}
.circ-item.viewall{background:var(--orange);border-color:var(--orange);color:#fff;font-weight:900;font-size:16px;letter-spacing:.3px;overflow:hidden;text-decoration:none}
.circ-item.viewall:hover{background:var(--orange-600)}
@media(max-width:600px){.circ-track{gap:16px}.circ-item{width:120px;height:120px}}

/* ===== Homepage: unified 46px section titles + consistent spacing ===== */
.home .sec-head h2,
.home .deals-head h2,
.home .odeals-head h2{font-size:46px;line-height:1.06;letter-spacing:0}
@media(max-width:820px){
	.home .sec-head h2,
	.home .deals-head h2,
	.home .odeals-head h2{font-size:32px}
}
@media(max-width:480px){
	.home .sec-head h2,
	.home .deals-head h2,
	.home .odeals-head h2{font-size:26px}
}

/* Consistent vertical rhythm between all homepage sections */
.home .sec,
.home .circ-sec,
.home .deals-sec,
.home .odeals-sec,
.home .home-banner-sec{padding-top:56px;padding-bottom:56px}
@media(max-width:820px){
	.home .sec,
	.home .circ-sec,
	.home .deals-sec,
	.home .odeals-sec,
	.home .home-banner-sec{padding-top:38px;padding-bottom:38px}
}

/* Account-linked (locked) checkout fields — name & phone after registration. */
.woocommerce-checkout .alriqa-locked input{background:#f3f4f7;color:#5b6276;cursor:not-allowed;border-color:#e5e7eb}
.woocommerce-checkout .alriqa-locked input:focus{border-color:#e5e7eb;box-shadow:none}
.woocommerce-checkout .alriqa-locked .description{font-size:11.5px;color:#9aa0ad;margin-top:4px}

/* ============================================================
 * Smart faceted shop filter — chips, swatches, AJAX pagination
 * ============================================================ */
.af-chips{display:flex;flex-wrap:wrap;gap:8px}
.af-chip{position:relative;cursor:pointer;display:inline-flex}
.af-chip input{position:absolute;opacity:0;width:0;height:0}
.af-chip span{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:36px;padding:0 12px;border:1.5px solid var(--line);border-radius:9px;font-size:13px;font-weight:700;color:var(--navy);background:#fff;transition:.15s ease;user-select:none}
.af-chip input:checked + span{background:var(--navy);border-color:var(--navy);color:#fff}
.af-chip:hover span{border-color:var(--navy)}
.af-empty{color:var(--muted);font-size:13px;padding:4px 0;margin:0}
.af-pages{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:center}
.af-page{min-width:40px;height:40px;padding:0 12px;border:1.5px solid var(--line);background:#fff;border-radius:10px;font-weight:700;color:var(--navy);cursor:pointer;font-family:inherit;font-size:14px;transition:.15s ease}
.af-page:hover{border-color:var(--navy)}
.af-page.active{background:var(--navy);border-color:var(--navy);color:#fff;cursor:default}
#af-grid{transition:opacity .15s ease}