/* ============================================================================
   wp.css — WooCommerce / WordPress ke APNE markup ke liye.

   🔴 YE FILE main.css SE ALAG KYUN HAI

   `main.css` client-approved design system hai (262 `ma-` classes, 22 rounds ka
   feedback). Us mein Woo ke markup ke liye rules daalne ka matlab hota ke design
   source aur plugin integration ek hi jagah mil jayein — aur agli design rev par
   koi na koi cheez galti se hat jaye.

   Ye file plain CSS hai, Tailwind nahi: ye compile nahi hoti, isliye ismein
   `@apply` nahi chalega. Tokens hardcode hain aur unke saamne token ka naam
   likha hua hai.

   `inc/enqueue.php` isay `build.css` ke BAAD load karti hai, taake ye jeete.
   `!important` ki zaroorat isi order se khatam ho jati hai — aur brief usay
   mana karta hai.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. PDP — variation selects
   ---------------------------------------------------------------------------
   🔴 Woo ki `<table class="variations">` visually chhupi hui hai, HATAYI NAHI
   gayi. Wajah: uske andar ke `<select>` hi variation ka asli ID, price aur
   availability chalate hain (`assets/js/variations.js` ka docblock dekho).
   Table remove karne par swatches dikhte rahenge magar cart mein kuch nahi
   jayega.

   `display: none` jaan-boojh kar use hua hai (`ma-vh` clip-path ke bajaye):
   ye controls keyboard se reachable nahi hone chahiye — unka kaam hamare radios
   karte hain, aur do sets of controls tab order ko tor dete hain.
   --------------------------------------------------------------------------- */
.ma-pdp .variations,
.ma-pdp .reset_variations,
.ma-pdp .woocommerce-variation-price {
	display: none;
}

/* ---------------------------------------------------------------------------
   🔴 AVAILABILITY AB DIKHTI HAI (R7-5)
   ---------------------------------------------------------------------------
   Client: "user jo select kare us ka stock show hona chahiye".

   ⚠️ YAHAN PEHLE `.woocommerce-variation-availability` BHI CHHUPI HUI THI. Us
   waqt wajah ye thi ke price aur stock hamare apne markup se aate hain — magar
   stock ka hamara koi markup nahi tha, yani wo information poori tarah gayab
   thi. Customer ko pata hi nahi chalta ke chuni hui variation mil sakti hai ya
   nahi (add-to-cart button ke disabled hone ke ilawa, jo ek khaamosh ishara hai).

   Ab wo Woo ka apna markup dikhata hai. Faida: text bhi Woo ka hi hai, yani
   store ki "Stock display format" setting (Woo -> Settings -> Products ->
   Inventory) khud kaam karti hai — "12 in stock" / "Only 2 left" / sirf
   "In stock", jo client chune.
   --------------------------------------------------------------------------- */
.ma-pdp .woocommerce-variation-availability {
	display: block;
}

.ma-pdp .woocommerce-variation-availability p.stock,
.ma-pdp p.stock {
	margin: 0.75rem 0 0;
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 0.75rem;                           /* text-micro */
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #1F8A5B;                               /* token: success */
}

.ma-pdp .woocommerce-variation-availability p.out-of-stock,
.ma-pdp p.stock.out-of-stock {
	color: #C0392B;                               /* token: error */
}

/* Variation ka price/stock hamare apne `.ma-pdp__price` / badge se aata hai,
   magar out-of-stock ka message dikhna chahiye — wo asli information hai.

   🔴 `:not(:empty)` ZAROORI HAI — R6-2 ("colour select karne par buttons apni
   jagah se upar-neeche hote hain").

   Woo `.single_variation` ke andar TEEN div hamesha banata hai — description,
   price, availability — chahe unme kuch ho ya na ho. Price aur availability
   `display: none` par hain, magar description par ye rule `display: block` +
   `margin-top: 0.75rem` laga deta tha. Khali div ki height 0, magar us ka 12px
   margin parent ki height ban jata tha; upar se `.single_variation_wrap` ka
   `gap: 1rem` (16px) bhi lag jata tha.

   Nateeja: variation mukammal hote hi `.single_variation` chhup ke `block` ho
   jata aur add-to-cart + Buy now **28px neeche** kood jate thay (naapa gaya:
   button top 655 -> 683). Ek khali div ki wajah se.

   Ab margin sirf tab lagti hai jab andar asal mein kuch ho, aur khali div
   layout se poori tarah gayab. */
.ma-pdp .woocommerce-variation-description:not(:empty),
.ma-pdp .stock.out-of-stock:not(:empty) {
	display: block;
	margin: 0.75rem 0;
	font-size: 0.875rem;      /* text-small */
	line-height: 1.5;
	color: #C0392B;           /* token: error */
}

/* Khali description layout se bahar. */
.ma-pdp .woocommerce-variation-description:empty {
	display: none;
}

/* 🔴 AUR `gap` BHI HATANA PADTA HAI — warna aadha bug baqi reh jata hai.

   `.single_variation_wrap` ek flex column tha `gap: 1rem` ke saath. Flex ka gap
   items ke DARMIYAN lagta hai, chahe item ki height 0 ho — yani khali
   `.single_variation` ka 12px margin theek karne ke baad bhi 16px ka gap
   baqi rehta aur button phir bhi hilta (28px se 16px reh gaya tha).

   ⚠️ `.single_variation` par `display: none` NAHI laga sakte: Woo usay apni JS
   se inline `style="display: block"` deta hai, aur inline style kisi bhi class
   rule se jeet jati hai. Isliye gap hataya gaya hai aur spacing un cheezon ki
   apni margin se aati hai jo asal mein dikhti hain.

   🔴 GAP KI ASLI VALUE SECTION 10 MEIN HAI. Wahan wahi selector dobara aata
   hai aur baad mein hone ki wajah se jeet jata hai — pehli koshish yahan
   `gap: 0` likhne ki thi aur wo chup-chaap haar gayi. Dono jagah ek hi baat
   likhi hui hai, magar badalni SECTION 10 mein hai. */

.ma-pdp .ma-pdp__error {
	margin-bottom: 1rem;
}

/* ⚠️ ROUND 5 KE BAAD YE RULE AAM HAALAT MEIN NAHI CHALTA — jaan-boojh kar.

   Pehle `variations.js` un options ko `disabled` kar deti thi jo maujooda
   selection ke saath namumkin thin. Us se user PHANS jata tha: is store ke data
   mein colour aur cut bandhe hue hain (light-pink sirf female, natural sirf
   male), yani "Natural" chunne ke baad "Female" ki chip mari hui hoti thi aur
   click ka koi jawab nahi tha — R5-7.

   Ab bridge KABHI disable nahi karti; namumkin option par `.ma-opt--unavailable`
   lagti hai (`main.css`) aur click us option ko laga deta hai (baqi larne wale
   attributes khud clear ho jate hain).

   Rule phir bhi yahan hai: agar kabhi koi plugin ya Woo khud select ki option
   par `disabled` lagaye, to UI chup-chaap jhoot na bole. */
.ma-swatch-input:disabled + .ma-swatch,
.ma-chip-input:disabled + .ma-chip {
	opacity: 0.35;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   2. Woo ke selects (sort dropdown, checkout ke country/state)
   ---------------------------------------------------------------------------
   Ye SelectWoo (Select2 ka fork) par chalte hain, jo Woo khud load karta hai.
   Faisla `07-DESIGN-BUILD-STATUS.md` PART 9 (option b): Tom Select in par nahi
   lagti — ek library ka wazan bachta hai — aur inhe hamare tokens se style
   kiya jata hai.
   --------------------------------------------------------------------------- */
.woocommerce-ordering select.ma-select-woo {
	min-height: 2.5rem;
	padding: 0.375rem 2rem 0.375rem 0.75rem;
	border: 1px solid rgba(11, 11, 12, 0.12);   /* token: line */
	border-radius: 4px;                          /* token: rounded-sm */
	background-color: #FFFFFF;                   /* token: surface */
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 0.75rem;                          /* text-micro */
	letter-spacing: 0.12em;                      /* tracking-micro */
	text-transform: uppercase;
	color: #0B0B0C;                              /* token: ink */
}

.woocommerce-ordering select.ma-select-woo:focus-visible {
	outline: 2px solid #1E3FA0;                  /* token: blue */
	outline-offset: 2px;
}

/* SelectWoo apna wrapper banata hai — usay hamari field ki shakl deni hai. */
.select2-container--default .select2-selection--single {
	height: auto;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid rgba(11, 11, 12, 0.12);
	border-radius: 4px;
	background-color: #FFFFFF;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.6;
	color: #0B0B0C;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #1E3FA0;                   /* token: blue — vendor ka apna neela nahi */
	color: #FAF8F4;                              /* token: paper */
}

/* ---------------------------------------------------------------------------
   SELECT2 KA ARROW — AUR EK GHALAT TASHKHEES KA SABAQ (R8-7)
   ---------------------------------------------------------------------------
   ⚠️ YAHAN PEHLE SELECT2 KA BORDER-TRIANGLE WAPAS BANAYA GAYA THA (R6-9). WO
   GHALAT THA, AUR US SE EK ASLI BUG PAIDA HUA: har SelectWoo dropdown par DO
   arrow aane lage — ek bhara hua triangle aur us ke neeche ek chevron
   (screenshot: checkout ka Country / Region).

   Us waqt ka hisaab ye tha: "arrow ke `<b>` par `border-width: 0px` hai, yani
   triangle banta hi nahi — Tailwind ki preflight ne usay maar diya". Border ke
   bare mein ye baat SAHI thi, magar natija GHALAT tha, kyunki sirf border naapa
   gaya aur `background-image` dekha hi nahi.

   Asal mein WooCommerce 11.x KHUD apna arrow deta hai:

       :where(.woocommerce) .select2-container .select2-selection--single
       .select2-selection__arrow b {
           border-style: none;
           background-image: url("data:image/svg+xml;base64,…");   <- chevron
       }

   Yani Woo jaan-boojh kar select2 ka purana triangle hataata hai aur us ki jagah
   ek SVG chevron rakhta hai. Preflight ne jo border maara wo Woo bhi maar raha
   tha. Hamare "fix" ne us SVG ke UPAR ek aur triangle bana diya.

   🔴 SABAQ: kisi cheez ko "ghayab" kehne se pehle DEKHNA hoga, sirf ek property
   naapna kaafi nahi. Us waqt agar cart ka screenshot dekh liya jata to do arrow
   foran nazar aa jate.

   Ab arrow poori tarah Woo ka hai. Yahan sirf uski JAGAH theek ki gayi hai:
   hamari field 2.9375rem lambi hai aur select2 ka default `top: 1px; height:
   26px` us mein oopar chipak jata hai.
   --------------------------------------------------------------------------- */
.select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 0.5rem;
	height: 100%;
	width: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Field ki lambai baqi inputs ke barabar (47px), aur text beech mein.

   Pehle select2 ki height 44px thi jab ke `input.input-text` 47px — ek hi form
   mein do alag lambai ki fields saaf nazar aati hain. */
.woocommerce form .form-row .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	min-height: 2.9375rem;
}

/* ---------------------------------------------------------------------------
   🔴 CART KA "CHANGE ADDRESS" FORM 194px MEIN NICHUR RAHA THA (R6-9)
   ---------------------------------------------------------------------------
   Client: "right side mein change address mein country/region wale inputs ki
   width 100% karo".

   Wajah: shipping calculator `.cart_totals` ki table ke `<td>` ke andar hai, aur
   wo cell panel ka 58% hai (section 25 ki 42/58 widths). 24rem ke panel mein us
   ka matlab tha ~194px — country, province, city aur postcode sab us patli si
   patti mein.

   Isliye SIRF shipping wali row ke cells stack kiye gaye hain: label upar, uska
   content neeche poori chaudai par. Baqi rows (subtotal, total) label-value ki
   shakl mein waise hi hain.
   --------------------------------------------------------------------------- */
/* 🔴 TABLE KO CHHOD KAR GRID — do koshishon ke baad wahi saaf hal nikla.

   Pehli koshish: sirf `th`/`td` ko `display: block`. Nateeja ulta — form 194px
   se 140px par aa gaya.
   Doosri koshish: row ko bhi `block`. Phir bhi 140px.

   Wajah: `display: block` wali row `<tbody>` (table-row-group) ke andar rehti
   hai, aur CSS us ke gird ek ANONYMOUS TABLE CELL bana deta hai. Us cell ki
   chaudai content se tay hoti hai, isliye `width: 100%` ka matlab "poora panel"
   nahi bal ke "jitna content maange" reh jata hai.

   Isliye poori totals table hi table-layout se bahar nikal di gayi hai: table
   aur tbody block, aur har row ek GRID. Ab sab kuch hamare qaboo mein hai —
   aam rows label/value ke do column, aur shipping wali row ek hi column (poori
   chaudai), jahan calculator ko asal mein jagah chahiye.

   ⚠️ Section 25 ki 42%/58% widths ab is grid se aati hain, cells se nahi. */
.woocommerce .cart_totals table.shop_table,
.woocommerce .cart_totals table.shop_table tbody {
	display: block;
	width: 100%;
}

.woocommerce .cart_totals table.shop_table tr {
	display: grid;
	grid-template-columns: 42% 1fr;
	align-items: baseline;
	gap: 0 0.75rem;
}

.woocommerce .cart_totals table.shop_table tr th,
.woocommerce .cart_totals table.shop_table tr td {
	display: block;
	width: auto;
}

/* Shipment ki row poori chaudai par — us mein methods, pata aur "Change
   address" ka form sab aata hai. */
.woocommerce .cart_totals table.shop_table tr.shipping {
	grid-template-columns: 1fr;
}

.woocommerce .cart_totals table.shop_table tr.shipping th,
.woocommerce .cart_totals table.shop_table tr.shipping td {
	text-align: left;
}

.woocommerce .cart_totals table.shop_table tr.shipping th {
	padding-bottom: 0.25rem;
}

.woocommerce .shipping-calculator-form {
	width: 100%;
	margin-top: 0.75rem;
}

.woocommerce .shipping-calculator-form .form-row {
	margin-bottom: 0.75rem;
}

/* Shipping ke methods ki list — radio ke saath label ek line par. */
.woocommerce .cart_totals #shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce .cart_totals #shipping_method li {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 0 0.25rem;
}

.woocommerce .cart_totals #shipping_method li label {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   3. Woo notices
   ---------------------------------------------------------------------------
   "Product added to cart", "Coupon applied", validation errors. Design mein
   inka koi component nahi tha (static build par server nahi tha), isliye ye
   `.ma-help` ke andaz par hain.
   --------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin: 0 0 1.5rem;
	padding: 0.875rem 1.25rem;
	border: 1px solid rgba(11, 11, 12, 0.12);    /* token: line */
	border-left: 2px solid #1E3FA0;              /* token: blue — SYSTEM colour */
	border-radius: 4px;                          /* token: rounded-sm */
	background-color: #FFFFFF;                   /* token: surface */
	list-style: none;
	font-size: 0.875rem;                         /* text-small */
	line-height: 1.5;
	color: #0B0B0C;
}

/* Woo notice ke andar ka "View cart" / "Continue shopping" link — wo ek
   `.button` hai, magar notice ke andar ek pill button bohot bhaari lagta hai.
   Design ka `.ma-link` andaz behtar baithta hai. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	min-height: 0;
	margin: 0 0 0 auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 0.75rem;                          /* text-micro */
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: #1E3FA0;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
	background: none;
	color: #E63329;                              /* token: accent */
}

.woocommerce-error {
	border-left-color: #C0392B;                  /* token: error */
}

/* 🔴 WOO KE ICON GLYPH — checkout par ek toota hua chauk-khana dikhata tha.

   woocommerce.css har notice par ek pseudo-element rakhta hai:

       .woocommerce-info::before { content: "\e028"; font-family: WooCommerce }

   Wo "WooCommerce" naam ke icon font ka code point hai. Us font ki `@font-face`
   `woocommerce-layout.css` mein hai, aur wo sheet hum dequeue karte hain
   (`inc/cleanup.php` — uska blanket `img { height: auto }` saari images tod deta
   tha). Font gayab, magar `content` maujood — nateeja: har notice ke shuru mein
   ek "missing glyph" ka dabba, jo checkout ke "Have a coupon?" ke "H" ke upar
   chadha hua nazar aata tha (screenshot `checkout.png` ke baad wala apna
   screenshot).

   Design mein in notices ki pehchan baayin taraf ki rangeen patti hai
   (`border-left`), icon nahi. Isliye glyph poori tarah band. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none;
	display: none;
}

.woocommerce-notices-wrapper li {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   4. Woo forms — cart, checkout, account
   ---------------------------------------------------------------------------
   Woo apne fields khud render karta hai (`woocommerce_form_field()`), aur unke
   markup par hamari `.ma-input` class lagana har field par filter chahta. Yahan
   Woo ki apni classes ko design ke mutabiq kiya gaya hai — kam code, aur Woo
   update par kuch nahi tootta.
   --------------------------------------------------------------------------- */
.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0;
}

.woocommerce form .form-row label {
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #45454B;                              /* token: ink-soft */
}

.woocommerce form .form-row .required {
	color: #C0392B;
	text-decoration: none;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce table.cart td.actions .coupon input.input-text {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.625rem 0.875rem;
	border: 1px solid rgba(11, 11, 12, 0.12);
	border-radius: 4px;
	background-color: #FFFFFF;
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: #0B0B0C;
}

.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible,
.woocommerce form .form-row select:focus-visible {
	outline: 2px solid #1E3FA0;
	outline-offset: 2px;
}

/* Validation state — Woo ye classes JS se lagata hai. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: #C0392B;
}

/* ---------------------------------------------------------------------------
   5. Woo ke buttons -> `.ma-btn` ka look
   ---------------------------------------------------------------------------
   Cart, checkout aur account par kai buttons Woo ke templates se aate hain
   (`Update cart`, `Apply coupon`, `Place order`, `Save address`). Un sab par
   PHP se class lagana mumkin hai magar har template override chahta; ek CSS
   rule sasta hai.

   🔴 Colour roles: `Place order` aur `Proceed to checkout` **red** hain (flow ka
   forward action), baqi outline. `07-DESIGN-BUILD-STATUS.md` ka table.
   --------------------------------------------------------------------------- */
/* 🔴 `.alt` bhi zaroori hai.
   Woo add-to-cart / place-order jaise "primary" buttons par class `button alt`
   lagata hai, aur uski apni rule `.woocommerce button.button.alt` (0,3,0) hai —
   jo sirf `.woocommerce button.button` (0,2,0) se ZYADA specific hai. Isi liye
   PDP ka add-to-cart Woo ke BAINGANI (#7f54b3) par atka hua tha, chahe hamari
   rule baad mein load ho rahi thi. Load order specificity ko nahi harata. */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	/* 40px / 8px — wahi naap jo `main.css` mein `.ma-btn` ka hai (round 9).
	   Pehle ye 2.75rem/0.625rem thi, yani Woo ke buttons hamare buttons se ek
	   qadam bare. Ek hi page par do naap saaf nazar aate the. */
	min-height: 2.5rem;
	padding: 0.5rem 1.25rem;
	border: 1px solid #0B0B0C;
	border-radius: 999px;
	background-color: transparent;
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: #0B0B0C;
	cursor: pointer;
	transition: background-color 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
		color 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button.alt:hover {
	background-color: #0B0B0C;
	color: #FAF8F4;
}

/* ---------------------------------------------------------------------------
   5b. Add to cart — 🔴 BLUE, aur full width
   ---------------------------------------------------------------------------
   Colour-roles table (`07-DESIGN-BUILD-STATUS.md`): `blue` SYSTEM colour hai
   aur "Add to cart" **har jagah** blue hai — cards par, quick view mein, aur
   PDP par. Red sirf flow ke forward action ke liye hai (Checkout, Place order).

   PDP par ye button Woo ke template se aata hai, isliye us par hamari
   `.ma-btn--blue` class nahi lag sakti — yahan usay wahi shakl di jati hai.
   --------------------------------------------------------------------------- */
.woocommerce button.single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button.alt,
.woocommerce .single_add_to_cart_button {
	width: 100%;
	border-color: #1E3FA0;                       /* token: blue */
	background-color: #1E3FA0;
	color: #FAF8F4;                              /* token: paper */
}

.woocommerce button.single_add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button.alt:hover,
.woocommerce .single_add_to_cart_button:hover {
	border-color: #E63329;                       /* token: accent — wahi hover jo .ma-btn--blue par hai */
	background-color: #E63329;
	color: #FFFFFF;
}

/* Woo ka `.added_to_cart` link (button ke baad "View cart") — design mein wo
   nahi hai; cart drawer aur toast wahi kaam karte hain. */
.woocommerce a.added_to_cart {
	display: none;
}

/* 🔴 `a.checkout-button.button.alt` — POORA SELECTOR CHAHIYE, aur wajah wahi hai
   jo upar `.alt` wale comment mein likhi hai.

   Naapa gaya tha: "Proceed to checkout" red ke bajaye OUTLINE aa raha tha
   (bg `transparent`, color `#0B0B0C`), jab ke `Place order` theek red tha.

   Wajah: cart ka button ek `<a class="checkout-button button alt wc-forward">`
   hai. Upar wali base rule mein `.woocommerce a.button.alt` maujood hai — (0,3,1).
   Yahan pehle sirf `.woocommerce .checkout-button` likha tha — (0,2,0). Base
   rule pehle aati hai phir bhi jeet jati hai, kyunki zyada specific hai.
   `Place order` bach gaya tha kyunki wo ID (`#place_order`) se aata hai.

   Colour-roles table (`07-DESIGN-BUILD-STATUS.md`): red SIRF flow ke forward
   action par — Proceed to checkout aur Place order. Yehi wo do hain. */
.woocommerce a.checkout-button.button.alt,
.woocommerce .checkout-button,
.woocommerce button.button[name="woocommerce_checkout_place_order"],
.woocommerce #place_order {
	border-color: #E63329;                       /* token: accent */
	background-color: #E63329;
	color: #FFFFFF;                              /* token: accent-ink */
}

.woocommerce a.checkout-button.button.alt:hover,
.woocommerce .checkout-button:hover,
.woocommerce button.button[name="woocommerce_checkout_place_order"]:hover,
.woocommerce #place_order:hover {
	border-color: #0B0B0C;
	background-color: #0B0B0C;
	color: #FAF8F4;
}

.woocommerce .button:disabled,
.woocommerce button.button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   6. Cart / checkout / account tables
   --------------------------------------------------------------------------- */
.woocommerce table.shop_table,
.woocommerce table.cart {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.woocommerce table.shop_table th,
.woocommerce table.cart th {
	padding: 0.75rem 0.5rem;
	border-bottom: 1px solid rgba(11, 11, 12, 0.12);
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #45454B;
}

.woocommerce table.shop_table td,
.woocommerce table.cart td {
	padding: 1rem 0.5rem;
	border-bottom: 1px solid rgba(11, 11, 12, 0.12);
	font-size: 1rem;
	line-height: 1.6;
	vertical-align: top;
}

.woocommerce table.shop_table .amount,
.woocommerce table.cart .amount {
	font-family: 'Space Mono', ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
}

.woocommerce table.cart img {
	width: 72px;
	height: auto;
	border-radius: 4px;
}

/* 🔴 Tables mobile par overflow karti hain. Wrapper na hone par wo poore page
   ko horizontally scroll kara deti hain — brief ka rule: page body kabhi
   horizontally scroll na kare. */
.woocommerce .cart-collaterals,
.woocommerce-cart-form,
.woocommerce-checkout-review-order,
.woocommerce-orders-table,
.woocommerce-order-details {
	overflow-x: auto;
}

/* ---------------------------------------------------------------------------
   7. My account navigation
   --------------------------------------------------------------------------- */
.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.5rem 0;
	font-size: 0.875rem;
	text-decoration: none;
	color: #45454B;
	transition: color 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
	color: #1E3FA0;                              /* token: blue — "kahan hoon" state */
}

/* ---------------------------------------------------------------------------
   8. Woo ke wo wrappers jo layout tod dete hain
   ---------------------------------------------------------------------------
   `display: contents` — wrapper apne aap ko grid/flex se hata deta hai aur uske
   children parent ke seedhe children ban jate hain. Iske baghair Woo ka extra
   `<div>` hamare grid ka ek cell kha jata hai.
   --------------------------------------------------------------------------- */
.ma-pdp .woocommerce-product-details__short-description,
.ma-cart .woocommerce,
.ma-checkout .woocommerce {
	display: contents;
}

/* ---------------------------------------------------------------------------
   9. WOO LAYOUT — sirf wo hissa jo `woocommerce-layout` se chahiye tha
   ---------------------------------------------------------------------------
   Wo poori sheet dequeue hai (`inc/cleanup.php` — wajah wahan likhi hai:
   uska blanket `img { height: auto }` hamari saari images tod deta tha).

   Us mein se sirf teen cheezein asal mein kaam ki thin, aur wo yahan hain —
   apne tokens ke saath, floats ke bajaye grid par.
   --------------------------------------------------------------------------- */

/* Checkout ka billing/shipping aur my-account ka address — Woo `col2-set`
   deta hai aur us par float lagata hai. Grid saaf hai aur mobile par khud
   ek column ho jata hai. */
.woocommerce .col2-set,
.woocommerce-page .col2-set {
	display: grid;
	gap: 2rem;
}

@media (min-width: 768px) {
	.woocommerce .col2-set,
	.woocommerce-page .col2-set {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2 {
	width: auto;
	float: none;
}

/* Cart ke totals ka block — Woo usay 48% par float karta hai. */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
	width: 100%;
	float: none;
}

/* ⚠️ YAHAN PEHLE `.cart-collaterals` KHUD EK 2-COLUMN GRID THI (`1fr 24rem`).

   Us waqt totals items ke NEECHE aati thi, aur us grid ka maqsad tha ke wo poori
   chaudai na le — baayin taraf ek khali column chhod kar daayin taraf baithe.

   Round 5 (R5-10) mein client ne totals ko asal mein right side par aur sticky
   maanga, aur wo `.woocommerce` par ek grid se hua (section 25). Us ke baad ye
   andar wali grid ULTA kaam karti hai: `.cart-collaterals` ko 24rem ka column
   mila hua hota hai aur wo apne andar phir `1fr 24rem` maang leti hai, yani
   panel apne hi column se bahar nikalne lagta hai.

   Isliye ye grid hata di gayi hai. `float: none; width: 100%` wale rules upar
   hain aur wahi ab bhi zaroori hain (Woo ka `float: right; width: 48%`). */

/* 🔴 `max-width: 100%` wapas — wo us blanket rule ka wahi hissa tha jo asal
   mein kaam ka hai (images apne container se bahar na jayein). Tailwind ki
   preflight bhi yehi karti hai, magar Woo ke apne markup ki images (cart
   table, order review) preflight ke daayre mein aati hain — ye rule un ke
   liye ek safety net hai. Height ko HAATH NAHI lagata. */
.woocommerce img,
.woocommerce-page img {
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
   10. PDP — quantity stepper (pehle chhupaya gaya tha, ab wapas)
   ---------------------------------------------------------------------------
   TAAREEKH:

   round 17 — client: "quantity stepper PDP se hata do — ek tap ek tee add
              karta hai, quantity bag mein badalti hai jahan cart line ke
              steppers pehle se hain."
              Us waqt yahan `display: none` tha.

   round 29 — client / Wasif ne reference design ke saath stepper WAPAS maanga:
              "ab us ki quantitiy plus minus wle button kha ha jse detail page
               refernece me hn size ky neeche"
              Naya faisla purane par bhaari hai; `display: none` chala gaya.

   🔴 Round 17 wala HIDE dobara mat lagana bina ye poochhe ke stepper ka kya
   karna hai — is file mein wo faisla do bar palat chuka hai.

   Pill ki shakl `main.css` ke `.ma-qty__btn` block mein hai; buttons
   `inc/woo.php` se Woo ke apne hooks par aate hain
   (`woocommerce_before/after_quantity_input_field`). Yahan sirf Woo ke apne
   input ko us pill ke andar bithana hai.
   --------------------------------------------------------------------------- */
.ma-pdp .quantity .qty,
.woocommerce table.cart .quantity .qty {
	width: 2.75rem;
	min-height: auto;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
	font-family: 'Space Mono', ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
	font-size: 0.9375rem;
	color: #0B0B0C;
	-moz-appearance: textfield;
}

/* Browser ke apne up/down arrows — ab unki jagah hamare buttons hain. */
.ma-pdp .quantity .qty::-webkit-outer-spin-button,
.ma-pdp .quantity .qty::-webkit-inner-spin-button,
.woocommerce table.cart .quantity .qty::-webkit-outer-spin-button,
.woocommerce table.cart .quantity .qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

.ma-pdp .quantity .qty:focus-visible,
.woocommerce table.cart .quantity .qty:focus-visible {
	outline: 2px solid #1E3FA0;                   /* token: blue */
	outline-offset: 4px;
}

/* Woo ka apna `form.cart .quantity { float: left }` pill ko line se nikal deta
   hai — wahi ilaj jo section 11 mein button ke float ka hai. */
.woocommerce div.product form.cart .quantity {
	float: none;
	margin: 0;
}

/* Woo ka variation wrap ek extra block hai — usay grid ka hissa banne se roko,
   warna add-to-cart button aur summary row ke darmiyan ek khali gap aata hai.

   🔴 `gap: 0` — R6-2 ka doosra hissa. Poori wajah section 1 mein likhi hai
   (khali `.single_variation` ke 12px margin ke saath ye 16px ka gap mil kar
   button ko 28px neeche pheink deta tha).

   ⚠️ Ye rule section 1 ke `gap: 0` se BAAD mein aata hai, isliye gap ki asli
   value YAHIN se aati hai — dono jagah likhne par ye wala jeetta hai. Spacing
   ab un cheezon ki apni margin se aati hai jo asal mein dikhti hain
   (`.ma-pdp__error`, aur variation ki description). */
.ma-pdp .single_variation_wrap {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Woo ka apna form spacing hamare stack se larta hai. */
.ma-pdp form.cart {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: 1.75rem 0 0;
}

/* ---------------------------------------------------------------------------
   11. 🔴 WOO KA FLOAT — add-to-cart ke saath text usi line par
   ---------------------------------------------------------------------------
   woocommerce.css:
       .woocommerce div.product form.cart .button { vertical-align:middle; float:left }

   Us float ki wajah se add-to-cart button ke BAAD ka content (hamari summary +
   free-shipping row) button ke daayin taraf, ek tang column mein tut kar aa
   raha tha — screenshot `product-detail-issue.png`.

   Specificity 0,3,2 hai, isliye counter bhi utni hi honi chahiye.
   --------------------------------------------------------------------------- */
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button.button {
	float: none;
	width: 100%;
}

.woocommerce div.product form.cart {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Float clear karne ke baad bhi Woo ka `::after` clearfix jagah leta hai. */
.woocommerce div.product form.cart::after {
	content: none;
}

/* ---------------------------------------------------------------------------
   12. 🔴 DISABLED ADD TO CART — blue ka light shade, opacity nahi
   ---------------------------------------------------------------------------
   Woo ka rule disabled buttons par `opacity: .5` lagata hai. Hamara blue
   #1E3FA0 aadhi opacity par safed ke upar #8F9FCF ban jata hai — ek lavender
   jo brand ka rang nahi lagta (screenshot: product-detail-issue).

   Iske bajaye ek ASLI light shade: blue-light se thoda gehra, taake button
   disabled lage magar rang wahi rahe. Opacity 1 par wapas, warna dono lag jate
   hain.
   --------------------------------------------------------------------------- */
.woocommerce button.single_add_to_cart_button:disabled,
.woocommerce button.single_add_to_cart_button.disabled,
.woocommerce button.single_add_to_cart_button:disabled[disabled],
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled[disabled] {
	opacity: 1;
	border-color: #A8B8DC;      /* blue #1E3FA0 ka light shade */
	background-color: #A8B8DC;
	color: #FFFFFF;
	cursor: not-allowed;
}

/* Hover par bhi wahi — disabled button hover par jeevit nahi lagna chahiye. */
.woocommerce button.single_add_to_cart_button:disabled:hover,
.woocommerce button.single_add_to_cart_button.disabled:hover,
.woocommerce button.button.alt:disabled:hover,
.woocommerce button.button.alt.disabled:hover {
	border-color: #A8B8DC;
	background-color: #A8B8DC;
	color: #FFFFFF;
	transform: none;
}

/* ---------------------------------------------------------------------------
   13. PDP gallery — stage ka size
   ---------------------------------------------------------------------------
   ⚠️ YAHAN PEHLE STAGE PAR DO CAPS THIN (30rem / lg:26rem). Round 29 mein wo
   HATA DI GAYI HAIN.

   Wajah: ab `main.css` mein stage khud `aspect-square` hai aur wahi flex line
   ki height tay karta hai. Us par width ki cap lagane ka matlab tha height bhi
   cap ho jati — aur thumb rail (jo stage ke barabar hota hai) us se choti ho
   kar reference se mel nahi khati. Poori gallery ki hadd ab column layout se
   aati hai, stage se nahi.

   Ab hadd POORI GALLERY par hai, har breakpoint par ek hi:

     - Mobile par 100vw ka murabba poora screen kha jata hai.
     - Desktop par gallery ka column ~745px hai. Bina cap ke, ek hi image wale
       products par (yani catalogue ke 51 mein se 51) stage 745px ka murabba ban
       jata tha — garment copy se do guna bara, aur page bewajah lamba.

   34rem = 544px. Us ke andar:
       rail ke saath : 544 − 88 (rail) − 20 (gap) = ~436px ka stage
       rail ke baghair: 544px ka stage
   Dono sahi lagte hain, aur 436px par paanch thumbs (88px har ek) rail mein
   poore nahi aate — yani thumb slider asal mein zinda ho jata hai, jo client ne
   maanga tha.
   --------------------------------------------------------------------------- */
.ma-pdp .ma-pdp__gallery {
	max-width: 34rem;
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   14. CART — actions row (coupon + apply + update) EK LINE MEIN
   ---------------------------------------------------------------------------
   Woo ka markup:
       <td class="actions">
         <div class="coupon">
           <label class="screen-reader-text">Coupon:</label>
           <input name="coupon_code" class="input-text">
           <button name="apply_coupon">Apply coupon</button>
         </div>
         <button name="update_cart">Update cart</button>
       </td>

   Default styling ye teenon ko alag alag lines par chhod deti hai. Markup theek
   hai — sirf `<td>` ko ek flex row banana hai. Template override ki zaroorat
   nahi.
   --------------------------------------------------------------------------- */
.woocommerce table.cart td.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	padding: 1.25rem 0.5rem;
}

.woocommerce table.cart td.actions .coupon {
	display: flex;
	flex: 1 1 20rem;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
}

.woocommerce table.cart td.actions .coupon input.input-text {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	margin: 0;
}

/* Coupon aur update dono SECONDARY actions hain — cart ka asli forward action
   "Proceed to checkout" hai (red). Isliye ye outline rehte hain. */
.woocommerce table.cart td.actions .button {
	flex: 0 0 auto;
	width: auto;
	white-space: nowrap;
}

/* Woo `update_cart` ko tab tak disabled rakhta hai jab tak quantity na badle. */
.woocommerce table.cart td.actions .button[name="update_cart"]:disabled {
	opacity: 0.35;
}

/* ---------------------------------------------------------------------------
   15. CART TOTALS — design ke tokens par
   ---------------------------------------------------------------------------
   Woo ki default totals table ek boxy 2010-era grid hai. Design mein ye ek
   saada panel hai: mono numbers, baareek lines, aur ek red checkout button.
   --------------------------------------------------------------------------- */
.woocommerce .cart_totals {
	padding: 1.5rem;
	border: 1px solid rgba(11, 11, 12, 0.12);    /* token: line */
	border-radius: 12px;                          /* token: rounded-card */
	background-color: #FFFFFF;                    /* token: surface */
}

.woocommerce .cart_totals h2 {
	margin: 0 0 1.25rem;
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-size: 1.25rem;                           /* text-h3 */
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #0B0B0C;                               /* token: ink */
}

.woocommerce .cart_totals table.shop_table {
	margin: 0;
	border: 0;
}

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
	padding: 0.875rem 0;
	border: 0;
	border-bottom: 1px solid rgba(11, 11, 12, 0.12);
	vertical-align: top;
}

.woocommerce .cart_totals table.shop_table th {
	width: 40%;
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 0.75rem;                           /* text-micro */
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #45454B;                               /* token: ink-soft */
}

.woocommerce .cart_totals table.shop_table td {
	text-align: right;
	font-family: 'Space Mono', ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
	font-size: 0.9375rem;
	color: #0B0B0C;
}

/* Order total — sab se ahem line, isliye bari aur bina border ke. */
.woocommerce .cart_totals table.shop_table tr.order-total th,
.woocommerce .cart_totals table.shop_table tr.order-total td {
	border-bottom: 0;
	padding-top: 1.25rem;
	font-size: 1.125rem;                          /* text-body-l */
}

.woocommerce .cart_totals table.shop_table tr.order-total th {
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
	color: #0B0B0C;
}

/* Shipping ke radio/method list — Woo ek `<ul>` deta hai. */
.woocommerce .cart_totals .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

.woocommerce .cart_totals .woocommerce-shipping-methods li {
	margin: 0 0 0.375rem;
}

.woocommerce .cart_totals .woocommerce-shipping-methods label {
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-size: 0.875rem;
	text-transform: none;
	letter-spacing: 0;
	color: #0B0B0C;
}

.woocommerce .cart_totals .woocommerce-shipping-destination,
.woocommerce .cart_totals .shipping-calculator-button {
	display: block;
	margin-top: 0.5rem;
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-size: 0.8125rem;
	color: #45454B;
}

/* Checkout button — RED (flow ka forward action), full width. */
.woocommerce .cart_totals .wc-proceed-to-checkout {
	padding: 1.25rem 0 0;
}

.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	margin: 0;
}

/* ---------------------------------------------------------------------------
   16. CART TABLE — thumbs aur remove
   --------------------------------------------------------------------------- */
/* R6-5 — client: "cross ki jagah delete ka icon rakho".

   Woo `&times;` (×) chhapta hai. `×` ka matlab "band karo" hai; ek cart line
   HAMESHA ke liye hatana us se alag kaam hai. Icon ab `ma_cart_remove_link()`
   (`inc/woo.php`) se aata hai — ek trash SVG.

   Button ka size 2.25rem: 44px se thoda chhota magar mobile par bhi tap karne
   ke qabil, aur `stroke` icon ke liye 1.5rem tang tha. */
.woocommerce table.cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background-color: #EFEAE1;                    /* token: paper-2 */
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	color: #45454B;
}

.woocommerce table.cart td.product-remove a.remove svg {
	width: 1.125rem;
	height: 1.125rem;
}

.woocommerce table.cart td.product-remove a.remove:hover {
	background-color: #C0392B;                    /* token: error */
	color: #FFFFFF;
}

.woocommerce table.cart td.product-name a {
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-weight: 600;
	text-decoration: none;
	color: #0B0B0C;
}

.woocommerce table.cart td.product-name a:hover {
	color: #E63329;                               /* token: accent */
}

/*
 * Variation list ("BERRY · MALE · S") ab SECTION 18 mein hai — yahan se hata di
 * gayi.
 *
 * 🔴 Ye ek asli bug tha, sirf safai nahi. Yahan wale selectors
 * (`.woocommerce table.cart td.product-name dl.variation dt` = 0,4,3) section 18
 * ke selectors (0,3,2) se ZYADA specific thay, aur un mein `dt { display: inline }`
 * likha tha. Nateeja: section 18 ka `dt { display: none }` kabhi chala hi nahi
 * aur cart mein "COLOUR: NATURAL  CUT: MALE  SIZE: XL" poore labels ke saath
 * chhapta raha — jab ke design mein sirf "NATURAL · MALE · XL" chahiye.
 *
 * Sabaq: ek hi cheez ke do maalik mat banao. Cart, order aur email — teenon ki
 * variation list ka ek hi malik hai, section 18 / 21.
 */

/* ---------------------------------------------------------------------------
   17. CART TABLE — column widths aur alignment
   ---------------------------------------------------------------------------
   🔴 Woo ki cart table ke chhe columns hain:
       product-remove · product-thumbnail · product-name
       product-price  · product-quantity  · product-subtotal

   `woocommerce-layout.css` dequeue hone ke baad (wajah section 9) in ka koi
   width nahi bacha tha, aur browser ne apna hisaab lagaya: remove ka column
   aadhi table kha gaya aur product ka naam daayin kinare par chala gaya.
   Screenshot `cart-design.png` mein wahi bari khali jagah dikhti hai.

   Widths yahan se aati hain. Paise wale columns mono + tabular-nums hain taake
   decimals ek doosre ke neeche align hon.
   --------------------------------------------------------------------------- */
/* R6-7 — client: "yeh acha nahi lag raha, is par poore par background white
   karo jaise cart detail wale mein hai".

   Items ki table paper (off-white page) par khadi thi aur us ke saath wali
   "Cart totals" ek SAFED card thi — do alag surfaces, ek hi row mein, aur table
   wala hissa dhandhla lagta tha. Ab dono ek jaisi hain: safed card, wahi border,
   wahi radius. `overflow: hidden` isliye ke pehli/aakhri row ke corners radius
   se bahar na nikal jayein. */
.woocommerce table.cart {
	table-layout: fixed;
	border: 1px solid rgba(11, 11, 12, 0.12);     /* token: line */
	border-radius: 12px;                           /* token: rounded-card */
	background-color: #FFFFFF;                     /* token: surface */
	overflow: hidden;
}

/* R6-6 — client: "left side me dekho space bhi nahi hai, border ke saath hai".

   `padding-left: 0` ki wajah se remove ka button table ke baayin border se chipka
   hua tha (screenshot `cart-details2.png`). Ab usay saans mili hai; column bhi
   thoda chaura, taake 2.25rem ka button aaram se beth jaye. */
.woocommerce table.cart th.product-remove,
.woocommerce table.cart td.product-remove {
	width: 4rem;
	padding-left: 1rem;
	text-align: left;
}

.woocommerce table.cart th.product-thumbnail,
.woocommerce table.cart td.product-thumbnail {
	width: 6rem;
}

/* Naam ka column baqi saari jagah le leta hai — koi width nahi. */
.woocommerce table.cart td.product-name {
	width: auto;
}

.woocommerce table.cart th.product-price,
.woocommerce table.cart td.product-price,
.woocommerce table.cart th.product-subtotal,
.woocommerce table.cart td.product-subtotal {
	width: 7rem;
	text-align: right;
	font-family: 'Space Mono', ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
	font-size: 0.9375rem;
}

/* 🔴 10rem, 7rem nahi. Round 29 mein yahan ek stepper pill aa gayi
   (minus + input + plus = ~134px). 7rem = 112px par wo column se bahar nikal
   kar SUBTOTAL ke upar chadh jati thi. */
.woocommerce table.cart th.product-quantity,
.woocommerce table.cart td.product-quantity {
	width: 10rem;
	text-align: center;
}

/* Cart ki line PDP se tang hoti hai — wahan buttons thode chhote. */
.woocommerce table.cart .ma-qty__btn {
	height: 2rem;
	width: 2rem;
}

.woocommerce table.cart .quantity {
	margin: 0 auto;
}

.woocommerce table.cart td {
	vertical-align: middle;
}

.woocommerce table.cart td.product-thumbnail img {
	width: 4.5rem;
	height: auto;
	border-radius: 12px;                          /* token: rounded-card */
	background-color: #FFFFFF;                    /* token: surface */
}

/* Quantity input — sirf number, koi apna box nahi (section 34 dekho).

   ⚠️ YE RULE US ZAMANE KA HAI JAB CART MEIN STEPPER THA HI NAHI. Tab ye input
   akela khada hota tha, isliye us par apna border, radius, safed background aur
   padding tha — ek field ki tarah. Ab us ke dono taraf +/− buttons hain, yani
   wo box ek pill ke andar doosra box tha.

   🔴 Yahi rule jeetta hai (`td.product-quantity` ki wajah se ye upar wale
   `.quantity .qty` se ZYADA specific hai), isliye tabdeeli yahin ki gayi hai —
   ek aur override upar lagane se sirf teen rules aapas mein larte. */
.woocommerce table.cart td.product-quantity .qty {
	width: 2.25rem;
	min-height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	text-align: center;
	font-family: 'Space Mono', ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
	font-size: 0.875rem;
	color: #0B0B0C;
}

.woocommerce table.cart td.product-quantity .qty:focus-visible {
	outline: 2px solid #1E3FA0;                   /* token: blue */
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   18. 🔴 VARIATION LIST — "Maroon · Male · M"
   ---------------------------------------------------------------------------
   Woo ka markup ek definition list hai:
       <dl class="variation">
         <dt>Colour:</dt><dd><p>Light Blue</p></dd>
         <dt>Cut:</dt>   <dd><p>Male</p></dd>
         <dt>Size:</dt>  <dd><p>S</p></dd>
       </dl>

   Default styling us ko teen lambi lines bana deti hai ("Colour:" apni line
   par, phir value…). Screenshot mein wahi "Colour:Maroon Male M / Cut: / Size:"
   wala bikhra hua nateeja tha.

   Design mein ye ek hi chhoti line hai, jaise cart drawer mein:
       Maroon · Male · M

   Labels chhupa diye jate hain (values khud bata deti hain ke kya hain) aur
   values ke darmiyan `·` CSS se aata hai.
   --------------------------------------------------------------------------- */
/*
 * 🔴 SELECTORS MEIN `td.product-name` ZAROORI HAI.
 *
 * `woocommerce.css` mein ye rules hain:
 *     .woocommerce td.product-name dl.variation dt { display: inline-block; float: left; }
 *     .woocommerce td.product-name dl.variation dd { margin: 0 0 .25em; }
 * Unki specificity 0,3,2 hai. Pehle yahan sirf `.woocommerce dl.variation dt`
 * (0,2,1) tha — Woo jeet jata tha aur "COLOUR:" / "CUT:" / "SIZE:" labels cart
 * mein poore dikhte rehte thay.
 *
 * 🔴 SEPARATOR `dd + dd` SE KABHI NAHI CHALTA.
 *
 * `<dl>` ka order hai dt, dd, dt, dd, dt, dd — do `dd` kabhi aapas mein sibling
 * nahi hote, beech mein hamesha ek `dt` hota hai. `dt` ko `display:none` karne
 * se wo DOM se nahi jata, sirf nazar nahi aata — adjacency phir bhi tuti rehti
 * hai. Isliye ab `:not(:first-of-type)` hai, jo `dd` walon ko aapas mein ginta
 * hai.
 */
.woocommerce dl.variation,
.woocommerce td.product-name dl.variation {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.5rem;
	margin: 0.375rem 0 0;
	padding: 0;
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 0.75rem;                           /* text-micro */
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #45454B;                               /* token: ink-soft */
}

/* Label chhupa — "COLOUR:" likhne ki zaroorat nahi jab value "MAROON" hai. */
.woocommerce dl.variation dt,
.woocommerce td.product-name dl.variation dt {
	display: none;
}

.woocommerce dl.variation dd,
.woocommerce td.product-name dl.variation dd {
	display: flex;
	align-items: baseline;
	margin: 0;
	padding: 0;
	float: none;
}

/* Woo har value ko ek `<p>` mein lapetta hai — usay inline karna zaroori hai,
   warna har value apni line par chali jati hai. */
.woocommerce dl.variation dd p,
.woocommerce td.product-name dl.variation dd p {
	display: inline;
	margin: 0;
	padding: 0;
}

/* Separator — pehli value se pehle nahi (wajah upar). */
.woocommerce dl.variation dd:not(:first-of-type)::before,
.woocommerce td.product-name dl.variation dd:not(:first-of-type)::before {
	content: "·";
	margin-right: 0.5rem;
	color: rgba(11, 11, 12, 0.35);
}

/* ---------------------------------------------------------------------------
   19. CHECKOUT — "Your order" review
   ---------------------------------------------------------------------------
   Ye do-column table hai (product · subtotal) aur us ka `tfoot` totals rakhta
   hai. Design mein ye cart totals jaisa ek panel hai — isi liye dono ek jaise
   dikhte hain, aur customer ko cart se checkout par aate hue kuch naya seekhna
   nahi padta.
   --------------------------------------------------------------------------- */
.woocommerce .woocommerce-checkout-review-order {
	padding: 1.5rem;
	border: 1px solid rgba(11, 11, 12, 0.12);
	border-radius: 12px;
	background-color: #FFFFFF;
}

.woocommerce table.woocommerce-checkout-review-order-table {
	width: 100%;
	margin: 0;
	border: 0;
	table-layout: fixed;
}

.woocommerce table.woocommerce-checkout-review-order-table th,
.woocommerce table.woocommerce-checkout-review-order-table td {
	padding: 0.875rem 0;
	border: 0;
	border-bottom: 1px solid rgba(11, 11, 12, 0.12);
	vertical-align: top;
}

.woocommerce table.woocommerce-checkout-review-order-table thead th {
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #45454B;
}

.woocommerce table.woocommerce-checkout-review-order-table thead th.product-total,
.woocommerce table.woocommerce-checkout-review-order-table td.product-total {
	width: 7rem;
	text-align: right;
	font-family: 'Space Mono', ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
}

.woocommerce table.woocommerce-checkout-review-order-table td.product-name {
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-size: 0.9375rem;
	color: #0B0B0C;
}

/* "× 2" — quantity ko naam se alag pehchana jana chahiye. */
.woocommerce table.woocommerce-checkout-review-order-table .product-quantity {
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 0.8125rem;
	font-weight: 400;
	color: #45454B;
}

/* tfoot — subtotal, shipping, total. */
.woocommerce table.woocommerce-checkout-review-order-table tfoot th {
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #45454B;
}

.woocommerce table.woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
	font-family: 'Space Mono', ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
	font-size: 0.9375rem;
	color: #0B0B0C;
}

.woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
	border-bottom: 0;
	padding-top: 1.25rem;
	font-size: 1.125rem;
}

.woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total th {
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
	color: #0B0B0C;
}

/* Shipping ke options review ke andar. */
.woocommerce table.woocommerce-checkout-review-order-table #shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

.woocommerce table.woocommerce-checkout-review-order-table #shipping_method li {
	margin: 0 0 0.375rem;
}

.woocommerce table.woocommerce-checkout-review-order-table #shipping_method label {
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-size: 0.875rem;
	text-transform: none;
	letter-spacing: 0;
	color: #0B0B0C;
}

/* Payment box — design mein iske liye `.ma-payment-wrap` markad hai; Woo ka
   apna box usi andaz mein. */
.woocommerce #payment {
	margin-top: 1.5rem;
	border-radius: 12px;
	background: none;
}

.woocommerce #payment ul.payment_methods {
	margin: 0;
	padding: 0 0 1.25rem;
	border-bottom: 1px solid rgba(11, 11, 12, 0.12);
	list-style: none;
}

.woocommerce #payment ul.payment_methods li {
	margin: 0 0 0.75rem;
}

.woocommerce #payment ul.payment_methods label {
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-size: 0.9375rem;
	text-transform: none;
	letter-spacing: 0;
	color: #0B0B0C;
}

.woocommerce #payment div.payment_box {
	margin: 0.75rem 0 0;
	padding: 0.875rem 1rem;
	border-radius: 4px;
	background-color: #EFEAE1;                    /* token: paper-2 */
	font-size: 0.875rem;
	color: #45454B;
}

/* Woo us box par ek chhota teer (arrow) banata hai — hamare flat design mein
   wo ajeeb lagta hai. */
.woocommerce #payment div.payment_box::before {
	content: none;
}

.woocommerce #payment .place-order {
	padding: 1.25rem 0 0;
}

.woocommerce #payment #place_order {
	width: 100%;
}

/* ---------------------------------------------------------------------------
   20. ORDER PAGES — har line par product ki image
   ---------------------------------------------------------------------------
   Markup `woocommerce/order/order-details-item.php` ke override se aata hai:
   thumbnail aur text ek hi `product-name` cell ke andar ek flex row hain (naya
   column NAHI — `order-details.php` mein sirf do `<th>` hain, teesra `<td>`
   daalne par table tut jati).

   Ye order-received (thank you) page aur my-account -> view order, dono par
   chalta hai.
   --------------------------------------------------------------------------- */
.ma-order-item {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
}

.ma-order-item__media {
	flex: 0 0 auto;
	width: 3.5rem;
	overflow: hidden;
	border-radius: 12px;                          /* token: rounded-card */
	background-color: #EFEAE1;                    /* token: paper-2 */
	isolation: isolate;
}

/* Wahi trick jo PDP stage par hai: product photos safed background par shoot
   hui hain, `multiply` us safed ko tint mein ghol deta hai. */
.ma-order-item__img {
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: multiply;
}

.ma-order-item__body {
	min-width: 0;
	flex: 1 1 auto;
}

.ma-order-item__body a {
	color: #0B0B0C;
}

.ma-order-item .product-quantity {
	font-family: 'Space Mono', ui-monospace, monospace;
	font-weight: 400;
	color: #45454B;                               /* token: ink-soft */
}

/* ---------------------------------------------------------------------------
   21. ORDER — variation list "BERRY · MALE · S"
   ---------------------------------------------------------------------------
   🔴 Cart aur order DO ALAG markup use karte hain:
       cart  -> <dl class="variation">          (section 18)
       order -> <ul class="wc-item-meta">       (yahan)
   Dono ko ek jaisa dikhna chahiye, warna customer ko lagta hai ke cart aur
   order do alag site hain.
   --------------------------------------------------------------------------- */
/*
 * 🔴 HAR SELECTOR MEIN `td.product-name` ZAROORI HAI — WAJAH SPECIFICITY KA
 * EK BAAREEK FARQ.
 *
 * Woo ka rule:
 *     .woocommerce td.product-name .wc-item-meta .wc-item-meta-label
 *         -> 4 class + 1 element = (0,4,1)
 * Hamara pehla rule tha:
 *     .woocommerce ul.wc-item-meta li strong.wc-item-meta-label
 *         -> 3 class + 3 element = (0,3,3)
 *
 * Element kitne bhi ho, ek extra CLASS un sab par bhaari hai. Isliye Woo jeeta
 * aur order page par "COLOUR:" / "CUT:" / "SIZE:" labels poore chhapte rahe.
 *
 * ⚠️ Aur ek jaal: Woo un labels par `float: left` bhi lagata hai. Float kisi
 * bhi inline element ka computed `display` BLOCK bana deta hai — isliye
 * DevTools mein `display: block` nazar aata tha aur lagta tha ke koi teesra
 * rule kahin se aa raha hai. Wo Woo ka apna float tha.
 */
.woocommerce ul.wc-item-meta,
.woocommerce td.product-name ul.wc-item-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.5rem;
	margin: 0.375rem 0 0;
	padding: 0;
	list-style: none;
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 0.75rem;                           /* text-micro */
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #45454B;                               /* token: ink-soft */
}

.woocommerce ul.wc-item-meta li,
.woocommerce td.product-name ul.wc-item-meta li {
	display: flex;
	align-items: baseline;
	margin: 0;
	padding: 0;
	float: none;
}

/* Label chhupa — value khud bata deti hai ke kya hai (jaise cart mein). */
.woocommerce ul.wc-item-meta li strong.wc-item-meta-label,
.woocommerce td.product-name ul.wc-item-meta li strong.wc-item-meta-label {
	display: none;
}

.woocommerce ul.wc-item-meta li p,
.woocommerce td.product-name ul.wc-item-meta li p {
	display: inline;
	margin: 0;
	padding: 0;
}

.woocommerce ul.wc-item-meta li + li::before,
.woocommerce td.product-name ul.wc-item-meta li + li::before {
	content: "\00b7";
	margin-right: 0.5rem;
	color: rgba(11, 11, 12, 0.35);
}

/* ---------------------------------------------------------------------------
   22. PDP — jo option chuni nahi gayi us par halka highlight
   ---------------------------------------------------------------------------
   `variations.js` ye class tab lagati hai jab user bina option chune add to
   cart dabata hai. Woo ka native `window.alert()` rok diya gaya hai (wajah usi
   file mein likhi hai); us ki jagah design ka toast aur ye highlight aata hai —
   alert sirf rokta tha, ye batata hai ke karna kya hai.

   Class option chunte hi hat jati hai, isliye transition dono taraf chalti hai.
   --------------------------------------------------------------------------- */
.ma-opt-group {
	scroll-margin-top: 7rem;                      /* sticky header ke neeche na chhupe */
	border-radius: 12px;
	transition: box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * 🔴 RING NAHI, WASH.
 *
 * Pehle yahan `box-shadow: 0 0 0 2px accent` tha. Group ek `<fieldset>` hai aur
 * us ka `<legend>` bilkul upar wale kinare par baithta hai — line seedhi
 * "COLOUR" ke beech se guzarti thi (screenshot `r4-toast.png`). Upar se teen
 * groups ek saath ghere mein aa kar page ko cheekhta hua bana dete thay.
 *
 * Ek halka sa red wash wahi baat kehta hai bina kisi lakeer ke: 8px ka spread
 * group ke chaaron taraf rang phaila deta hai, aur legend saaf padha jata hai.
 */
.ma-opt-group--missing {
	background-color: rgba(230, 51, 41, 0.07);       /* token: accent */
	box-shadow: 0 0 0 8px rgba(230, 51, 41, 0.07);
}

@media (prefers-reduced-motion: reduce) {
	.ma-opt-group {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   23. PDP — QUANTITY + ADD TO CART EK ROW MEIN, AUR BUY NOW (R5-6)
   ---------------------------------------------------------------------------
   Client: "quantity ky sath add to cart ka button bhi show kroo, or buy now bhi
   show krwao". Reference (`detail-page-referenec.png`) mein wahi shakl hai:
   stepper baayin taraf, add-to-cart baqi chaudai, aur us ke neeche full-width
   outline "BUY NOW".

   🔴 SECTION 11 KO YAHAN JEETNA PADTA HAI. Wahan Woo ke float ka ilaj karte
   hue add-to-cart par `width: 100%` lagaya gaya tha — us ke saath button aur
   stepper ek row mein aa hi nahi sakte. Isliye neeche ki rules zyada specific
   hain (do class + element), aur `width: auto` wapas deti hain. Section 11 ka
   `float: none` bilkul barqarar hai — wo asli bug ka fix tha.

   DOM (variable product):
       .single_variation_wrap                       <- flex column
         p.ma-pdp__error                            <- red line (R5-9)
         .woocommerce-variation                     <- price/stock (chhupa)
         .woocommerce-variation-add-to-cart         <- YE ROW hai
           .quantity  +  button.single_add_to_cart_button  +  button.ma-buy-now
           (aur teen hidden inputs)

   Simple product par wahi teen cheezein seedha `form.cart` ke andar hoti hain,
   isliye do jagah rule chahiye.
   --------------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 0.75rem;
}

/* Stepper apni asli chaudai par — sikudna nahi chahiye. */
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity,
.woocommerce div.product form.cart:not(.variations_form) .quantity {
	flex: 0 0 auto;
}

/* Add to cart baqi jagah le le. `width: auto` section 11 ke `100%` ko palatta
   hai; `min-width` isliye ke lamba label ("Add to cart — $24.99") do lafzon
   mein na toote. */
.woocommerce div.product .woocommerce-variation-add-to-cart button.single_add_to_cart_button,
.woocommerce div.product form.cart:not(.variations_form) button.single_add_to_cart_button {
	flex: 1 1 12rem;
	width: auto;
	min-width: 12rem;
}

/* Buy now apni poori line par — reference ki tarah. */
.woocommerce div.product .woocommerce-variation-add-to-cart .ma-buy-now,
.woocommerce div.product form.cart:not(.variations_form) .ma-buy-now {
	flex: 1 0 100%;
	width: 100%;
}

/* ---------------------------------------------------------------------------
   DONO BUTTON EK HI NAAP KE, AUR CHHOTE (round 9)
   ---------------------------------------------------------------------------
   Client: "add to cart ka button thora chhota karo, bahut bara lag raha hai —
   aur product detail mein jo buy now hai us ka size bhi kam karo, padding kam
   karo bahut zyada hai, same karo".

   Pehle naapa gaya tha:
       Add to cart   44px lamba · padding 10px 20px · font 14px
       Buy now       56px lamba · padding 14px 40px · font 16px   <- `ma-btn--lg`
       stepper       46px

   Teen alag lambaiyan ek hi jagah par. `ma-btn--lg` markup se hat chuka hai
   (`ma_pdp_buy_now()`), aur ab teenon 40px par hain.

   ⚠️ BUTTONS KA NAAP YAHAN NAHI LIKHA. Wo do jagah se aata hai, aur dono ab ek
   hi baat kehti hain:
       `main.css`  ->  `.ma-btn`              (Buy now)
       `wp.css` 5  ->  `.woocommerce .button` (Add to cart)
   Yahan dobara likhne se ek teesra sach ban jata, jo kal in dono se alag ho
   jata. Sirf stepper yahan hai, kyunki wo in mein se kisi ka hissa nahi.

   🔴 Stepper ko saath lana zaroori tha: us ke baghair buttons 40px ke ho jate
   aur pill 46px ki reh jati — wahi be-tartibi doosri shakl mein. */

/* Stepper ki pill bhi wahi 40px — buttons 2rem + 4px padding dono taraf. */
.ma-pdp .woocommerce-variation-add-to-cart .quantity .ma-qty__btn,
.ma-pdp form.cart:not(.variations_form) .quantity .ma-qty__btn {
	height: 2rem;
	width: 2rem;
}

/* Woo ke hidden inputs bhi is flex row ke bachche hain. `display: none` unhe
   layout se poori tarah nikaal deta hai — warna `gap` un ke liye bhi jagah
   chhodta hai aur row mein ek khali khala nazar aata hai.

   ⚠️ `[type="hidden"]` par hi — `.variation_id` bhi hidden input hai aur Woo
   usay padhta/likhta hai, chhupane se us par koi asar nahi padta. */
.woocommerce div.product .woocommerce-variation-add-to-cart input[type="hidden"],
.woocommerce div.product form.cart:not(.variations_form) input[type="hidden"] {
	display: none;
}

/* Buy now ka disabled look.

   🔴 Woo ki convention `disabled` CLASS hai, attribute nahi — taake click event
   aata rahe aur wo apna message dikha sake. Hum bhi wahi karte hain (R5-9 ka
   red message usi click par chalta hai), isliye `[disabled]` wala selector
   yahan kaam nahi karega. */
.ma-buy-now.disabled {
	border-color: rgba(11, 11, 12, 0.25);         /* token: line se gehra */
	color: rgba(11, 11, 12, 0.4);
	cursor: not-allowed;
}

.ma-buy-now.disabled::before {
	transform: scaleX(0);                          /* hover ka fill band */
}

/* ---------------------------------------------------------------------------
   24. PDP — GALLERY JAB SIRF EK IMAGE HO (R5-1)
   ---------------------------------------------------------------------------
   ⚠️ YE EK DATA MASLE KA COSMETIC ILAJ HAI, ASLI HAL NAHI.

   Client: "sb se pehle cheeez thumbnails iamges kha gy hn?"

   Wajah code mein nahi: CSV export ke 54 products mein se 52 ke paas SIRF EK
   image hai, aur 1034 variations mein se kisi ke paas apni image nahi. Rail
   sirf tab print hoti hai jab do ya zyada images hon (`pdp-gallery.php`),
   isliye zyadatar products par wo maujood hi nahi hoti.

   Jab tak client per-colour photos na de, itna kar sakte hain: stage ko rail ki
   khali jagah bhi de do, taake tasveer aur bari lage aur layout adhoora na
   dikhe. Photos aane par rail khud wapas aa jayegi — koi CSS badalni nahi
   padegi, kyunki ye rule sirf us surat mein lagta hai jab rail DOM mein na ho
   (`:not(:has())`).
   --------------------------------------------------------------------------- */
.ma-pdp__gallery:not(:has(.ma-pdp__rail)) .ma-pdp__stage {
	width: 100%;
}

/* ---------------------------------------------------------------------------
   25. CART — SUMMARY RIGHT SIDE, STICKY (R5-10)
   ---------------------------------------------------------------------------
   Client: "cart wla totla hmare wle me bhi right side pe rakhoo or sticky pe
   rakhoo" (reference: `cart-refernce.png`).

   Abhi tak items ki table poori chaudai leti thi aur "Cart totals" us ke NEECHE
   aata tha — total dekhne ke liye scroll karna padta tha.

   🔴 `cart/cart.php` FORK NAHI KI. Woo ka apna markup pehle se do sibling deta
   hai:

       .woocommerce
         .woocommerce-notices-wrapper
         form.woocommerce-cart-form   -> items ki table
         .cart-collaterals            -> .cart_totals

   Do siblings ka do column banana ek grid ka kaam hai, template ka nahi. Isi
   liye yahan sirf CSS hai aur cart ki logic ko haath nahi laga.

   Mobile par ek hi column (grid declare hi nahi hoti), yani summary items ke
   neeche — jo chhoti screen par sahi tarteeb hai.
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	/* ⚠️ `main` zaroori hai (R8-1): quick view ka modal `</main>` ke BAAD
	   render hota hai aur ab us par bhi `.woocommerce` class hai. Us ke baghair
	   cart page par khula modal bhi ek 2-column grid ban jata. */
	body.woocommerce-cart main .woocommerce {
		display: grid;
		/*
		 * ⚠️ 24rem, 22rem nahi. 22rem (352px) par teen cheezein toot rahi thin:
		 * "Standard shipping: $12.00" do lines mein, shipping ka address chaar
		 * lines mein, aur "Proceed to checkout" teen lines mein. Panel ka andar
		 * ka padding 3rem le leta hai, isliye asli jagah 22rem par sirf 304px
		 * bachti thi.
		 */
		grid-template-columns: minmax(0, 1fr) 24rem;
		align-items: start;
		gap: 2.5rem;
	}

	/* Notices poori chaudai par — wo dono column ki khabar dete hain. */
	body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	body.woocommerce-cart .cart-collaterals {
		position: sticky;
		/* 7rem = sticky header ki collapsed height + saans. */
		top: 7rem;
	}
}

/* 🔴 Woo ka apna float hatana ZAROORI hai.

   woocommerce.css:
       .woocommerce .cart-collaterals .cart_totals { float: right; width: 48% }

   Grid ke andar float ka koi matlab nahi, magar `width: 48%` zinda rehti hai —
   summary column ke andar aadhi chaudai ka ek patla panel ban jata hai. */
.woocommerce .cart-collaterals,
.woocommerce .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
}

/* Summary ke andar label baayin, value daayin — ek line par.

   Woo ki totals table apne cells ko content ke hisaab se chaudai deti hai, aur
   shipping ka cell (jis mein "Standard shipping", address aur "Change address"
   sab hote hain) baqi sab ko nichor deta hai. Fixed percentage se har row ek
   jaisi lagti hai. */
.woocommerce .cart_totals table.shop_table th {
	width: 42%;
	text-align: left;
}

.woocommerce .cart_totals table.shop_table td {
	width: 58%;
	text-align: right;
}

/* Checkout button — panel ki poori chaudai, aur ek hi line par.

   `.ma-btn` ka `px-7` (28px) 24rem ke column mein "PROCEED TO CHECKOUT" ko teen
   lines mein tor deta tha. Padding kam, tracking apni jagah. */
.woocommerce .cart_totals .checkout-button {
	display: flex;
	width: 100%;
	padding-inline: 1rem;
	text-align: center;
	white-space: nowrap;
}

/* Cart update hone ke dauran (R5-11) — halka fade, aur clicks band taake user
   ek hi waqt do requests na bheje. */
.ma-cart--busy {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 150ms linear;
}

/* Khali actions row.

   Coupon cart se hat gaya (R5-12) aur "Update cart" JS chalte hi chhup jata hai
   (R5-11) — us surat mein `td.actions` mein kuch bachta hi nahi aur table ke
   neeche ek khali patti reh jati hai (screenshot mein saaf dikhti thi).

   🔴 `:has()` se ye khud nahi pakda ja sakta: shart "aisa cell jis ka koi
   bachcha visible na ho" hoti, yani `:has()` ke andar `:has()` — jo CSS mein
   mana hai. Isliye row ko `cart.js` khud `hidden` kar deti hai (wo pehle se jaan
   rahi hai ke button chhupa raha hai), aur ye rule sirf Woo ke table rules se
   jeetne ke liye hai. JS band ho to row apni jagah rehti hai — wahan Update
   cart hi cart update karne ka waahid rasta hai. */
.woocommerce table.cart tr[hidden],
.woocommerce table.cart tbody tr[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
   26. CHECKOUT — "YOUR ORDER" RIGHT SIDE, STICKY (R5-13)
   ---------------------------------------------------------------------------
   Client: "chekc out kka desing is tarha ka kroo / your order wle items ko
   right side pe kro" (reference: `checkout.png`).

   🔴 SIRF DESIGN KA REFERENCE — client ne khud saaf kiya:
   "checkout sirf refercen ky toor par ha, same wsa nhi chye, nhi hi wsa logic".

   Isliye reference ke 01/02/03 LOCKED STEPS nahi banaye gaye. Woo ke checkout
   ki validation, payment aur totals ko chhua bhi nahi gaya — sirf do column ka
   layout aur order review ka look.

   DOM (`form.checkout`):
       #customer_details        -> billing/shipping fields
       h3#order_review_heading  -> "Your order"
       #order_review            -> review table + payment box

   Woo in teenon ko ek hi column mein rakhta hai. Grid se review daayin taraf.
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.woocommerce form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 24rem;
		align-items: start;
		gap: 3rem;
	}

	.woocommerce form.checkout #customer_details {
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 100%;
	}

	/* 🔴 COLUMN 2 MEIN SIRF EK ITEM — R6-10.

	   Pehle heading row 1 mein thi aur review row 2 mein, aur `#customer_details`
	   dono rows par phaila hua tha. Us surat mein browser spanning item ki height
	   rows mein baant deta hai: row 2 ko review ki height milti hai aur BACHA HUA
	   SAB row 1 ko — yani heading ke neeche sekron pixel ka khala. Shipping fields
	   khulne par khala aur barh jata tha.

	   Ab review apne panel ke andar apna heading rakhta hai
	   (`ma_review_heading()`), aur column 2 mein ek hi item hai. Woo ka
	   hardcoded `<h3>` neeche chhupa diya gaya hai. */
	.woocommerce form.checkout #order_review {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: 7rem;
	}

	.woocommerce form.checkout #customer_details {
		grid-row: 1;
	}
}

/* Woo ka apna "Your order" heading — hamara wala panel ke andar hai (R6-10).
   Markup se hataya nahi ja sakta (`form-checkout.php` mein hardcoded hai, koi
   filter nahi), isliye screen se chhupa hai magar screen reader ke liye DOM mein
   maujood — is ka `id` par Woo ki apni JS bhi nazar rakhti hai. */
.woocommerce form.checkout #order_review_heading {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Panel ke andar ka heading — reference ka "IN YOUR BAG / ORDER REVIEW". */
.ma-review__head {
	margin-bottom: 1.25rem;
}

.ma-review__title {
	margin: 0.5rem 0 0;
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: #0B0B0C;                               /* token: ink */
}

/* 🔴 BILLING BLOCK AB EK COLUMN.

   Woo `#customer_details` ko `.col2-set` deta hai, aur section 9 usay 768px se
   upar `1fr 1fr` grid bana deti hai. Wo faisla us waqt ka hai jab checkout ka
   poora page EK column tha — do barabar column wahan theek lagte thay.

   Ab (R5-13) page khud do column hai: fields baayin, order review daayin. Us
   ke andar fields ko phir do hisson mein baantne se do masle hote hain —
   fields tang ho jate hain, aur daayin hissa (jis mein sirf "Ship to a
   different address" aur order notes hote hain) aadha khali para rehta hai.
   Screenshot mein wahi khala saaf nazar aa raha tha.

   Isliye SIRF checkout ke us breakpoint par jahan hamara page-grid chalta hai,
   `col2-set` ek column par wapas. My-account ke address block par koi asar
   nahi — wo `form.checkout` ke andar nahi hai. */
@media (min-width: 1024px) {
	.woocommerce form.checkout #customer_details.col2-set {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   CHECKOUT KE FIELDS — DO COLUMN (6/6), TAAKE FORM CHHOTA HO (R8-7)
   =========================================================================
   Client: "country street address in ko 6-6 col mein karo … aise hi select ko
   6-6 rows mein karo, abhi to bahut lengthy form hai".

   Woo apni classes se batata hai kya kis ke saath jud sakta hai:

       form-row-first / form-row-last  -> aadhi chaudai (first + last name)
       form-row-wide                   -> poori chaudai (address, city, email …)

   Woo un par FLOAT lagata hai (`width: 47%`), magar hamare `.form-row` khud flex
   column hain aur float ke saath spacing bikhar jata hai. Grid saaf hai aur
   mobile par khud ek column reh jata hai.

   🔴 `form-row-wide` KO ANDHA-DHUND DO COLUMN MEIN NAHI DAALA.

   Pehle har wide row poori chaudai leti thi aur form bahut lamba tha (10 fields,
   8 poori chaudai par). Ab wo fields jinki jori banti hai un ko `:nth-of-type()`
   se nahi, NAAM se jora gaya hai:

       City      + Province     ek row
       Postcode  + Phone        ek row

   Naam se kyun: `nth-of-type` us waqt toot jata hai jab Woo fields ki ginti ya
   tarteeb badle — aur wo har MULK par badalti hai (locale). Country badalne par
   Woo poora wrapper dobara render karta hai; ID se jori hui fields us surat mein
   bhi apni jagah rehti hain, aur jo field us mulk mein hai hi nahi wo chup-chaap
   ghayab ho jati hai bina layout tore.

   ⚠️ Street address (`address_1`) aur email jaan-boojh kar POORI chaudai par
   hain — pata lamba hota hai aur aadhi chaudai mein us ka padhna mushkil hai.
   Yehi wajah `address_2` (apartment) ki bhi hai. */
/* ⚠️ Yehi layout my-account ke address form par bhi lagta hai
   (`.woocommerce-address-fields__field-wrapper`). Wahan Woo bilkul wahi fields
   aur wahi classes deta hai, aur customer ke liye dono ek hi form hain — ek jagah
   6/6 aur doosri jagah poori chaudai dekhna ajeeb lagta hai. */
@media (min-width: 640px) {
	.woocommerce form.checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce form.checkout .woocommerce-shipping-fields__field-wrapper,
	.woocommerce .woocommerce-address-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1.25rem;
	}

	/* Default: har wide field poori chaudai par. */
	.woocommerce form.checkout .woocommerce-billing-fields__field-wrapper .form-row-wide,
	.woocommerce form.checkout .woocommerce-shipping-fields__field-wrapper .form-row-wide,
	.woocommerce .woocommerce-address-fields__field-wrapper .form-row-wide {
		grid-column: 1 / -1;
	}

	/* …siwaye in chaar ke, jo aadhi chaudai par jore gaye hain. */
	.woocommerce form.checkout #billing_city_field,
	.woocommerce form.checkout #billing_state_field,
	.woocommerce form.checkout #billing_postcode_field,
	.woocommerce form.checkout #billing_phone_field,
	.woocommerce form.checkout #shipping_city_field,
	.woocommerce form.checkout #shipping_state_field,
	.woocommerce form.checkout #shipping_postcode_field,
	.woocommerce .woocommerce-address-fields #billing_city_field,
	.woocommerce .woocommerce-address-fields #billing_state_field,
	.woocommerce .woocommerce-address-fields #billing_postcode_field,
	.woocommerce .woocommerce-address-fields #billing_phone_field,
	.woocommerce .woocommerce-address-fields #shipping_city_field,
	.woocommerce .woocommerce-address-fields #shipping_state_field,
	.woocommerce .woocommerce-address-fields #shipping_postcode_field {
		grid-column: span 1;
	}

	/* Grid ke andar float ka koi kaam nahi, aur Woo ki 47% width column ko
	   adhoora chhod deti hai. */
	.woocommerce form.checkout .form-row-first,
	.woocommerce form.checkout .form-row-last,
	.woocommerce .woocommerce-address-fields .form-row-first,
	.woocommerce .woocommerce-address-fields .form-row-last {
		float: none;
		width: auto;
	}
}

/* ---------------------------------------------------------------------------
   27. CHECKOUT — REVIEW KI HAR LINE PAR IMAGE (R5-14)
   ---------------------------------------------------------------------------
   Markup `ma_review_item_name()` se aata hai (`inc/woo.php`) — ek filter, koi
   template fork nahi.

   🔴 FLOAT, GRID NAHI. Cell ke andar teen cheezein aati hain aur unme se do
   Woo ke apne template se hain:

       <span class="ma-review-item__media">  <- hamari (image + qty badge)
       <span class="ma-review-item__name">   <- hamari
       <dl class="variation">                <- Woo ki (cart-item-data.php)

   Grid par teesri cheez ko jagah dena us template par bharosa maangta hai (aaj
   `<dl>`, kal kuch aur, aur plugin apna markup bhi wahin daalte hain). Float
   ke saath name aur variation dono khud image ke daayin taraf beh jate hain —
   chahe wahan kitni cheezein hon. Yehi float ka asal kaam hai.
   --------------------------------------------------------------------------- */
.woocommerce table.woocommerce-checkout-review-order-table td.product-name {
	overflow: hidden;                             /* float ko cell ke andar rakho */
}

.ma-review-item__media {
	position: relative;
	float: left;
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 0.875rem 0.25rem 0;
	border: 1px solid rgba(11, 11, 12, 0.12);     /* token: line */
	border-radius: 4px;                           /* token: rounded-sm */
	background-color: #EFEAE1;                    /* token: paper-2 */
	/* ⚠️ `overflow: hidden` NAHI — qty badge jaan-boojh kar kinare se bahar
	   nikalta hai (reference jaisa). Image ka apna radius neeche hai. */
}

.ma-review-item__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Product ki tasveerein safed background par shoot hui hain; paper-2 ke
	   upar `multiply` unka kinara chhupa deta hai — wahi tareeqa jo PDP ke
	   stage par hai (round 4, R4-1). */
	mix-blend-mode: multiply;
}

/* Quantity ka badge — reference (`checkout.png`) mein image ke kone par. Isi
   liye Woo ka alag "× 2" hata diya gaya hai (`ma_review_item_quantity()`),
   warna ek hi number do jagah aata. */
.ma-review-item__qty {
	position: absolute;
	top: -0.375rem;
	right: -0.375rem;
	display: inline-flex;
	min-width: 1.25rem;
	height: 1.25rem;
	align-items: center;
	justify-content: center;
	padding: 0 0.25rem;
	border-radius: 999px;
	background-color: #12275F;                    /* token: navy */
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 0.6875rem;
	line-height: 1;
	color: #FAF8F4;                               /* token: paper */
}

.ma-review-item__name {
	display: block;
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: #0B0B0C;                               /* token: ink */
}

.ma-review-item__img {
	border-radius: 3px;
}

/* ---------------------------------------------------------------------------
   28. `hidden` ATTRIBUTE — YAHAN BHI (wajah main.css ke aakhir mein)
   ---------------------------------------------------------------------------
   Ye file `build.css` ke BAAD load hoti hai, isliye is mein likhi koi bhi
   `display` rule wahan ke `[hidden][hidden]` ko haraa degi. Woo ke buttons aur
   forms par yahan kaafi rules hain, isliye wahi guard is file ke aakhir mein
   dobara.
   --------------------------------------------------------------------------- */
[hidden][hidden] {
	display: none;
}

/* 🔴 WOO KE BUTTONS KO ALAG SE PAKADNA PADTA HAI.

   Is file ka section 5 Woo ke buttons ko hamara look deta hai:

       .woocommerce button.button { display: inline-flex }        (0,2,1)

   Wo `[hidden][hidden]` (0,2,0) se ZYADA specific hai — ek element selector ka
   farq. Nateeja: cart ka "Update cart" button `hidden` hone ke bawajood dikhta
   raha (R5-11 mein pakda gaya: `hidden === true`, magar `display: flex`).

   `!important` se bachne ke liye yahan wahi rule ek attribute ke saath dobara
   (0,3,1) — Woo ke apne `woocommerce-smallscreen.css` wale (0,3,1) se ties
   jeetne ke liye ye file baad mein load hoti hai.

   ⚠️ Section 5 mein naya button selector add karo to yahan bhi uska `[hidden]`
   jora likhna hoga. Isi wajah se dono rules ek doosre ke qareeb rakhi gayi hain
   — do jagah nahi. */
.woocommerce .button[hidden],
.woocommerce button.button[hidden],
.woocommerce input.button[hidden],
.woocommerce a.button[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
   29. CART — MOBILE PAR EK ASLI CARD (R6-8)
   ---------------------------------------------------------------------------
   Client: "mobile mein product ki image hi show nahi ho rahi hai aur iska
   design bhi better karo" + reference `mobile-prouct-desing.png`.

   🔴 IMAGE KAHAN GAYI: Woo ki apni `woocommerce-smallscreen.css` mein ye rule
   hai —

       .woocommerce table.cart .product-thumbnail { display: none }

   Woo mobile par table ko "label: value" ki shakl mein stack karta hai, aur us
   layout mein thumbnail ki jagah nahi banti — isliye wo usay chhupa deta hai.
   Hamara bug nahi, magar hamare design mein image sab se ehem cheez hai.

   Ab har row ek CARD hai (reference jaisa): image baayin, naam + variation
   daayin, uske neeche price aur line total, aur sab se neeche stepper.

   ⚠️ WOO KA `text-align: right !important` — smallscreen sheet har `td` par
   lagati hai, aur `!important` ko sirf `!important` se haraya ja sakta hai (jo
   brief mein mana hai). Isliye alignment cell ke ANDAR wale element par set ki
   gayi hai (`display: block` + `text-align`) — `!important` sirf us `td` par
   lagta hai, uske bachchon par nahi. Yehi wajah hai ke neeche kuch selectors
   ghair-zaroori lambe lagte hain.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {

	/* Row = card */
	.woocommerce table.cart tbody tr.cart_item {
		display: grid;
		/* ⚠️ Teesra column `auto`, `2.25rem` NAHI. Pehli koshish mein wo remove
		   button ke naap par fix tha, aur line total usi column mein tha — 36px
		   ki jagah mein "$149.94" kat kar "$149.9" reh jata tha (naapa gaya:
		   width 36px, scrollWidth 64px). `auto` column ko us ke sab se chaure
		   item ke mutabiq barha deta hai. */
		grid-template-columns: 5.5rem minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name  remove"
			"thumb price total"
			"thumb qty   qty";
		align-items: start;
		column-gap: 0.875rem;
		row-gap: 0.5rem;
		padding: 1rem;
	}

	/* Woo ke stacked layout ke nishan — card mein in ki zaroorat nahi:
	   `data-title` wale labels ("Price: ", "Total: ") aur har doosri row ka
	   halka grey background (`tr:nth-child(2n) td`), jo ab card ke andar ek
	   adhoori si patti ki tarah nazar aata tha. */
	.woocommerce table.cart tbody tr.cart_item td::before {
		display: none;
	}

	.woocommerce table.cart tbody tr.cart_item:nth-child(2n) td {
		background-color: transparent;
	}

	/* Card ke darmiyan ek baareek line — border-bottom `td` par nahi, row par. */
	.woocommerce table.cart tbody tr.cart_item + tr.cart_item {
		border-top: 1px solid rgba(11, 11, 12, 0.12);   /* token: line */
	}

	.woocommerce table.cart tbody tr.cart_item td {
		padding: 0;
		border: 0;
	}

	/* 🔴 Image wapas. Woo ka `display: none` (0,2,1) hai; ye selector (0,3,3)
	   us se zyada specific hai, isliye `!important` ki zaroorat nahi. */
	.woocommerce table.cart tbody tr.cart_item td.product-thumbnail {
		display: block;
		grid-area: thumb;
		width: 5.5rem;
	}

	.woocommerce table.cart tbody tr.cart_item td.product-thumbnail img {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		object-fit: cover;
		border-radius: 4px;                        /* token: rounded-sm */
		background-color: #EFEAE1;                 /* token: paper-2 */
		mix-blend-mode: multiply;
	}

	.woocommerce table.cart tbody tr.cart_item td.product-name {
		grid-area: name;
	}

	/* Naam baayin — `td` ka right-align sirf `td` par hai, is block bachche par
	   nahi. */
	.woocommerce table.cart tbody tr.cart_item td.product-name a {
		display: block;
		text-align: left;
	}

	/* ⚠️ Variation list par `display: block` NAHI. Pehli koshish mein yahan bhi
	   `block` tha aur "ORCHID · FEMALE · L" teen alag lines mein toot gayi thi
	   (har `dd` khud block-level flex hai — section 18). Container ko flex hi
	   rehna chahiye; sirf uski simt baayin karni hai. */
	.woocommerce table.cart tbody tr.cart_item td.product-name dl.variation {
		justify-content: flex-start;
		text-align: left;
	}

	.woocommerce table.cart tbody tr.cart_item td.product-remove {
		grid-area: remove;
		width: auto;
		padding: 0;
	}

	/* Per-item price — chhoti, halki, naam ke neeche. */
	.woocommerce table.cart tbody tr.cart_item td.product-price {
		grid-area: price;
		width: auto;
	}

	.woocommerce table.cart tbody tr.cart_item td.product-price .woocommerce-Price-amount {
		display: block;
		text-align: left;
		font-size: 0.875rem;
		color: #45454B;                            /* token: ink-soft */
	}

	/* Line total — daayin, bhari. */
	.woocommerce table.cart tbody tr.cart_item td.product-subtotal {
		grid-area: total;
		width: auto;
		font-weight: 700;
	}

	/* Stepper poori chaudai par, baayin se shuru.
	   `display: flex` Woo ke `text-align: right !important` ko chakma deta hai —
	   flex mein items ki jagah `justify-content` se tay hoti hai, text-align se
	   nahi. */
	.woocommerce table.cart tbody tr.cart_item td.product-quantity {
		grid-area: qty;
		display: flex;
		justify-content: flex-start;
		width: auto;
		margin-top: 0.25rem;
	}

	/* Mobile par summary items ke neeche — sticky ka koi matlab nahi. */
	body.woocommerce-cart .cart-collaterals {
		margin-top: 2rem;
	}
}

/* ---------------------------------------------------------------------------
   30. ORDER TRACKING KA FORM (R7-8)
   ---------------------------------------------------------------------------
   Client: "website mein ek aur page banao order tracking ka, user apna order
   add kare aur wahan par order track bhi ho".

   Page ka content do hisson ka hai — hamara `page-head` block aur Woo ka
   `[woocommerce_order_tracking]` shortcode. Shortcode ka markup Woo ka hai
   (`form.track_order`), isliye us ki styling yahan hai, `main.css` mein nahi.

   Form ke fields `.form-row` par hain, yani section 4 ki styling pehle se lag
   jati hai. Yahan sirf teen baatein: form ko ek panel ki shakl dena, do fields
   ko ek row mein rakhna, aur nateeje (order ki details) ko saans dena.
   --------------------------------------------------------------------------- */
/* ⚠️ Round 9 mein client ne is form ko chaura karne aur fields ko saans dene ko
   kaha: "width ziada karo, order id aur billing email ke upar space add karo".

   Pehle form 34rem (544px) ka tha jab ke us ke upar notice poore container par
   phaili hoti thi — form us ke neeche ek chhote se dabbe jaisa lagta tha. Aur
   Woo ka intro paragraph seedha labels se chipka hua tha, is liye "ORDER ID"
   aur "BILLING EMAIL" text ke saath juri hui lag rahi thin. */
.woocommerce form.track_order {
	max-width: 44rem;
	margin: 0;
	padding: 1.75rem;
	border: 1px solid rgba(11, 11, 12, 0.12);     /* token: line */
	border-radius: 12px;                           /* token: rounded-card */
	background-color: #FFFFFF;                     /* token: surface */
}

/* Intro aur labels ke darmiyan asli faasla — yehi wo "space" hai jo client ne
   maanga. Sirf yahan lagta hai, baqi rows apni normal spacing par rehti hain. */
.woocommerce form.track_order p:first-child {
	margin-top: 0;
	margin-bottom: 1.75rem;
	font-size: 0.9375rem;
	color: #45454B;                                /* token: ink-soft */
}

/* Woo `form-row-first` / `-last` deta hai aur un par float lagata hai; grid
   saaf hai aur mobile par khud ek column ho jata hai. */
@media (min-width: 640px) {
	.woocommerce form.track_order {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1.25rem;
	}

	/* Poori chaudai wali rows.

	   ⚠️ `p:last-child` NAHI chal sakta: Woo form ke aakhir mein do
	   `<input type="hidden">` daalta hai (nonce aur action), isliye aakhri
	   bachcha ek input hota hai — submit wala `<p>` nahi. Isi wajah se pehli
	   koshish mein TRACK button aadhi chaudai par, email field ke neeche khada
	   tha. `:not()` se wo row pehchani jati hai: form-row jo na first ho na
	   last. */
	.woocommerce form.track_order > p:first-child,
	.woocommerce form.track_order p.form-row-wide,
	.woocommerce form.track_order p.form-row:not(.form-row-first):not(.form-row-last) {
		grid-column: 1 / -1;
	}

	/* Woo ka float clearfix — grid mein wo ek khali cell kha jata hai. */
	.woocommerce form.track_order > div.clear {
		display: none;
	}

	/* Chhupe hue fields bhi grid ke bachche hain; `gap` un ke liye bhi jagah
	   chhod deta hai. */
	.woocommerce form.track_order > input[type="hidden"] {
		display: none;
	}

	.woocommerce form.track_order .form-row-first,
	.woocommerce form.track_order .form-row-last {
		float: none;
		width: auto;
	}
}

/* Track ka button — apni chaudai par, baayin taraf.

   ⚠️ Pehle ye `width: 100%` tha. Wo 34rem ke form par theek lagta tha, magar
   44rem par ek 700px chaura button sirf "Track" kehne ke liye bahut bara hai.
   Form ka ek hi action hai, is liye wo numaya to rehna chahiye — magar apni
   qudrati chaudai par. */
.woocommerce form.track_order p:has(button.button) {
	justify-self: start;
}

.woocommerce form.track_order button.button {
	min-width: 12rem;
}

/* ---------------------------------------------------------------------------
   🔴 NATEEJE WALI LINE PAR BROWSER KA PEELA HIGHLIGHT (round 9)
   ---------------------------------------------------------------------------
   Order track karne ke baad jo line aati hai wo aisi lagti thi jaise kisi ne
   text par highlighter pher diya ho:

       Order #[5423] was placed on [September 9, 2026] and is currently
       [Processing].          <- teenon peele

   Wajah: Woo un teen hisson ko `<mark>` mein lapetta hai (`tracking.php`), aur
   `<mark>` ka browser default `background: yellow` hota hai. Hamari CSS mein us
   ke liye kuch tha hi nahi, is liye default nazar aa raha tha.

   ⚠️ Tailwind ki preflight `<mark>` ko haath nahi lagati — wo sirf margins,
   borders waghera reset karti hai. Is tarah ke "browser ka apna" element hamesha
   khud dekhne padte hain.

   Ab: highlight ki jagah wazan (bold), aur status ek asli badge — kyunki user is
   page par SIRF yehi jaanne aaya hai ke us ka order kahan hai. */
.woocommerce mark,
.woocommerce mark.order-number,
.woocommerce mark.order-date {
	background: none;
	color: #0B0B0C;                                /* token: ink */
	font-weight: 600;
}

/* Status line ki sab se ehem cheez hai, is liye rang bhi — magar SIRF rang aur
   wazan, pill nahi.

   ⚠️ Pehle isay ek badge (pill) banaya gaya tha. Screen par dekha to Woo ka
   jumla us ke baad ek full stop rakhta hai (`… is currently %s.`), aur pill ke
   andar ka padding us nuqte ko door dhakel deta tha:

       … and is currently ( PROCESSING ) .

   Wo galti lagti hai. Badge us jagah theek hai jahan wo akela khara ho (misaal:
   account ka order history table), jumle ke beech nahi. */
.woocommerce mark.order-status {
	background: none;
	color: #1E3FA0;                                /* token: blue */
	font-weight: 600;
}

/* Us poori line ko thora wazan — ye page ka jawab hai, ek aam paragraph nahi.

   ⚠️ Pehle ye `body.woocommerce-order-tracking-page` par likha gaya tha. Wo class
   maujood hi NAHI hai — is page par body sirf `page-id-5424` deti hai (naapa gaya),
   aur page ID par CSS likhna us din tut jata hai jab page dobara banaya jaye.
   Isliye nishani wo cheez hai jo sirf isi line par hoti hai: status ka badge. */
.woocommerce p:has(mark.order-status) {
	margin-bottom: 2rem;
	font-size: 1.0625rem;
}

/* Nateeja: Woo order ki details isi page par chhapta hai (`order-details.php`),
   yani wahi table jo thank-you page par hai — us ki styling section 20 se aati
   hai. Yahan sirf form se faasla. */
.woocommerce .woocommerce-order-details,
.woocommerce .woocommerce-order-downloads,
.woocommerce .woocommerce-customer-details {
	margin-top: 2.5rem;
}

/* ---------------------------------------------------------------------------
   31. WOO KE FORMS KE CHECKBOXES — EK HI SHAKL, HAR JAGAH (R8-7, R8-B2)
   ---------------------------------------------------------------------------
   Ye client ki list mein nahi tha — screenshot dekhte hue nazar aaya. Do jagah,
   ek hi masla:

       checkout    "Ship to a different address?"   (R8-7)
       my-account  "Remember me"                    (R8-B2)

   Dono jagah poore form mein har control design ke mutabiq tha siwaye is ek
   checkbox ke, jo browser ka default tha — chhota, neela, system font ka.

   Woo ka markup dono jagah alag hai:

       <h3 id="ship-to-different-address">
         <label class="checkbox"><input id="ship-to-…-checkbox" type="checkbox"> <span>…</span></label>
       </h3>

       <label class="woocommerce-form__label-for-checkbox">
         <input class="woocommerce-form__input-checkbox" type="checkbox"> <span>Remember me</span>
       </label>

   🔴 DONO KO EK HI RULE MEIN RAKHA GAYA HAI, do alag blocks mein nahi. Woo ki
   `woocommerce-form__input-checkbox` class login, register, "create an account"
   aur terms — sab par lagti hai, isliye ek jagah likhne se wo saare aap hi theek
   ho jate hain. Alag-alag likhte to agla checkbox phir se bhoola hua nikalta.

   🔴 `appearance: none` ke saath box khud banana padta hai — warna har browser
   apna alag checkbox dikhata hai aur design har jagah alag lagta hai.
   --------------------------------------------------------------------------- */
.woocommerce form.checkout h3#ship-to-different-address {
	margin: 0.5rem 0 1.5rem;
	font-size: inherit;
	font-weight: 400;
}

.woocommerce form.checkout h3#ship-to-different-address label,
.woocommerce .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	cursor: pointer;
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 0.75rem;                            /* text-micro */
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #45454B;                                /* token: ink-soft */
}

.woocommerce form.checkout input#ship-to-different-address-checkbox,
.woocommerce input.woocommerce-form__input-checkbox {
	appearance: none;
	-webkit-appearance: none;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	flex: 0 0 auto;
	border: 1px solid rgba(11, 11, 12, 0.35);      /* token: line se gehra */
	border-radius: 4px;                            /* token: rounded-sm */
	background-color: #FFFFFF;                     /* token: surface */
	cursor: pointer;
	transition: background-color 150ms linear, border-color 150ms linear;
}

.woocommerce form.checkout input#ship-to-different-address-checkbox:checked,
.woocommerce input.woocommerce-form__input-checkbox:checked {
	border-color: #1E3FA0;                         /* token: blue */
	background-color: #1E3FA0;
	/* Tick — ek inline SVG, taake koi icon font ya extra element na chahiye. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23FAF8F4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5'/%3E%3C/svg%3E");
	background-size: 0.75rem;
	background-position: center;
	background-repeat: no-repeat;
}

.woocommerce form.checkout input#ship-to-different-address-checkbox:focus-visible,
.woocommerce input.woocommerce-form__input-checkbox:focus-visible {
	outline: 2px solid #1E3FA0;
	outline-offset: 2px;
}

/* Shipping ke fields khulne par unhe upar wale block se saans chahiye. */
.woocommerce form.checkout .shipping_address {
	margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------------
   32. MY-ACCOUNT KA LOGIN — CARD 1317px CHAURA THA (R8-B2)
   ---------------------------------------------------------------------------
   Ye bhi client ki list se nahi, `/my-account/` ka screenshot dekhne se mila.
   Teen cheezein ek saath:

       1. page par koi `<h1>` nahi tha — sirf ek chhota saada "Login"
       2. login ka box POORE container par phaila hua tha (naapa gaya: 1317px)
       3. "Remember me" browser ka default checkbox tha

   (1) ab `template-parts/woo/page-head.php` se aata hai, (3) upar section 31
   mein. Yahan (2) hai.

   🔴 Ek naam-password ka form 1317px chaura nahi hona chahiye — aankh ko labels
   se input tak safar karna padta hai aur form khali khali lagta hai. Design
   (`account.html`) mein sign-in do column ke grid ka aadha hissa hai. Yahan
   registration band hai (Woo setting) isliye doosra column hai hi nahi, aur
   grid ke bajaye seedha `max-width` behtar hai.

   ⚠️ Woo ka apna border/padding bhi hata diya gaya: hamare design mein form ek
   card nahi hai. Baqi jagah (cart totals, order review) card hain — wahan wo
   apni jagah theek hai.

   ⚠️ Button JAAN-BOOJH KAR outline hi rakha gaya (design mein wo red hai).
   Colour-roles table ke mutabiq red SIRF flow ke forward action ke liye hai —
   "Proceed to checkout" aur "Place order". Login us mein nahi aata, aur usay red
   karne se in do buttons ka matlab kamzor pad jata hai.
   --------------------------------------------------------------------------- */
.woocommerce form.login {
	max-width: 30rem;
	border: 0;
	padding: 0;
	border-radius: 0;
}

/* Woo ka `<h2>Login</h2>` — ab page ka `<h1>` bhi "Sign in" keh raha hai, yani
   ek hi baat do bar.

   🔴 `display: none` NAHI. Ye ek asli heading hai: screen reader ka user headings
   ki fehrist se page mein safar karta hai, aur usay hata dene se wo raasta band ho
   jata hai. Isliye wo sirf aankh se chhupa hai, a11y tree mein maujood hai.

   ⚠️ Sirf logged-out par — dashboard ke apne headings ka is se koi taalluq nahi. */
body.woocommerce-account:not(.logged-in) .woocommerce > h2 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* "Remember me", nonce aur submit — Woo in sab ko EK `<p class="form-row">`
   mein rakhta hai, isliye unhe khud ek column banana padta hai warna checkbox
   aur button ek doosre se chipak jate hain. */
.woocommerce form.login .form-row:last-of-type {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: stretch;
}

.woocommerce form.login .woocommerce-LostPassword {
	margin-top: 1.25rem;
}

/* ---------------------------------------------------------------------------
   33. MY-ACCOUNT KA DASHBOARD — NAV UPAR, CONTENT NEECHE (R8-B2)
   ---------------------------------------------------------------------------
   Login kar ke dekha to nav ek saada vertical list thi, poori chaudai par, aur
   content us ke NEECHE. Design (`account.html`) mein wo do column ka grid hai:

       nav      lg:col-span-3      Orders · Addresses · Details · Sign out
       content  lg:col-span-9      order history, address form waghera

   Links ki styling section 7 mein pehle se thi — layout hi nahi tha.

   🔴 Grid `.logged-in` par scoped hai. Logged-out par isi jagah login ka form
   hota hai aur us par koi nav nahi — bina is shart ke wo form grid ka pehla
   khaana ban kar aadha reh jata.

   ⚠️ Mobile par nav ek qatar mein lipatti hui chips ki tarah — design bhi wahi
   karta hai (`flex flex-wrap` … `lg:flex-col`). Chhoti screen par ek 6-link ka
   column content ko bahut neeche dhakel deta hai.
   --------------------------------------------------------------------------- */
body.woocommerce-account.logged-in main .woocommerce {
	display: grid;
	gap: 2rem;
}

/* 🔴 `main` KE ANDAR — warna quick view ka modal bhi is grid mein aa jata hai.
   Us ka wrapper bhi `.woocommerce` hai (R8-1 mein jaan-boojh kar, taake PDP ki
   saari styling wahan chale) aur wo HAR page par maujood hota hai. Bina `main`
   ke modal ka product 86px/258px ke do columns mein bant gaya tha — naapa gaya.
   Modal `</main>` ke BAAD render hota hai, isliye ye shart kaafi hai. Yehi
   ilaaj cart ke grid par bhi lagaya gaya tha. */

/* 🔴 WOO KA CLEARFIX GRID KE DO KHAANE KHA JATA HAI.
       .woocommerce::before, .woocommerce::after { content: " "; display: table }
   Grid container ke pseudo-elements bhi GRID ITEM bante hain. Nateeja: `::before`
   ne row 1 ka pehla khaana le liya, nav dayein chali gayi aur content agli row
   ke bayein — nav aur content ulte nazar aaye.

   DOM bilkul theek lag raha tha (do hi children, dono `grid-column: auto`) —
   ye sirf screenshot dekhne se pakda gaya. */
body.woocommerce-account.logged-in main .woocommerce::before,
body.woocommerce-account.logged-in main .woocommerce::after {
	content: none;
}

/* Notice aaye to wo poori chaudai par — warna wo bhi ek column kha leta hai. */
body.woocommerce-account.logged-in main .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

@media (min-width: 1024px) {
	body.woocommerce-account.logged-in main .woocommerce {
		grid-template-columns: 3fr 9fr;
		gap: 2.5rem;
	}
}

.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
	min-width: 0;                                  /* grid child ko sikudne do */
	border-top: 1px solid rgba(11, 11, 12, 0.12);  /* token: line */
	padding-top: 1.5rem;
}

/* Mobile: ek qatar mein lipatte hue links. */
.woocommerce-MyAccount-navigation ul {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0 1.25rem;
}

@media (min-width: 1024px) {
	.woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		gap: 0;
	}
}

/* Addresses page — Woo ka header (`<h2>` + "Add/Edit" link) ek doosre se alag
   jagah gir raha tha, aur `<h2>` baqi text jaisa hi lag raha tha.

   Woo ka markup:
       <header class="woocommerce-Address-title title">
         <h2>Billing address</h2>
         <a class="edit">Add Billing address</a>
       </header>

   Woo us par float lagata hai; float hamare grid ke andar kaam nahi karta aur
   link agli line par apni marzi ki jagah chala jata tha. */
.woocommerce .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 0.75rem;
}

.woocommerce .woocommerce-Address-title h2 {
	margin: 0;
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
}

.woocommerce .woocommerce-Address-title .edit {
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 0.75rem;                            /* text-micro */
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	color: #1E3FA0;                                /* token: blue */
}

/* `<address>` ko browser italic dikhata hai — hamari body copy italic nahi hai. */
.woocommerce .woocommerce-Address address {
	font-style: normal;
	line-height: 1.7;
	color: #45454B;                                /* token: ink-soft */
}

/* Account ke andar ke forms ek padhne laayaq chaudai par — 9-column ke andar wo
   810px tak phail jate thay, jo ek naam ke khaane ke liye bahut hai.

   ⚠️ Ye `form` par nahi lag sakta: Woo address form par koi class nahi deta
   (`<form method="post">`). Wrapper par lagta hai, jis ka naam maujood hai. */
.woocommerce-MyAccount-content .woocommerce-address-fields,
.woocommerce-MyAccount-content .edit-account {
	max-width: 34rem;
}

/* Content ke apne headings ("Billing address", "Recent orders") — Woo inhein
   `<h2>` deta hai magar hamari koi rule un par nahi thi, isliye wo bilkul body
   text jaise (16px) lag rahe thay. */
.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content > h3,
.woocommerce-MyAccount-content > form > h2,
.woocommerce-MyAccount-content > form > h3 {
	margin: 0 0 1.25rem;
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
}

/* ---------------------------------------------------------------------------
   34. CART KA STEPPER — CHHOTA AUR BINA BORDER (round 9)
   ---------------------------------------------------------------------------
   Client: "cart mein jo quantity wala hai, us mein increment/decrement ki jo
   input hai us ka size bhi kam karo, aur border bhi remove karo".

   ⚠️ Sirf CART par. PDP aur quick view ka stepper waisa hi rehta hai — wahan wo
   ek asli control hai jise dhoondna aasan hona chahiye (design ka pill), jab ke
   cart ki line mein har row par ek pill dohrata hai aur table bhari lagti hai.

   Buttons pehle se cart par chhote hain (2rem vs 2.25rem) — section 6 dekho. */
.woocommerce table.cart .quantity {
	gap: 0;
	padding: 0;
	border-color: transparent;
	background: none;
}

/* 🔴 Input ka apna box bhi hata diya gaya — magar wo tabdeeli YAHAN NAHI hai.
   Us par `.woocommerce table.cart td.product-quantity .qty` lagta hai, jo is se
   zyada specific hai (`td.product-quantity`), aur wo section 6 mein hai. Wahi
   badla gaya taake ek hi jagah sach ho.

   Naapa gaya tha: wrapper theek ho gaya (border transparent, padding 0) magar
   input phir bhi 64px chaura, safed, border ke saath — kyunki us purane rule ne
   yahan likhi hui har cheez ko hara diya. */

/* ---------------------------------------------------------------------------
   35. TRACK-ORDER PAGE — NESTED CONTAINER, AUR SAB KUCH BEECH MEIN (round 9)
   ---------------------------------------------------------------------------
   Client: "is text ke left se padding remove karo, aur saari cheezon ko center
   mein karo".

   🔴 (a) CONTAINER DO BAR LAG RAHA THA.

   Is page ka content do hisson ka hai: hamara `page-head` block, jo apna
   `.ma-container` khud laata hai, aur Woo ka shortcode, jo nahi laata. Isi liye
   `page.php` poore page par ek container lagata hai — magar us se heading par wo
   DO BAR lag jata hai.

   Naapa gaya tha: heading x=115px se shuru ho rahi thi jab ke neeche form x=57px
   se. Yehi wo "left ki padding" thi. Neeche wala rule nested container ka padding
   aur max-width dono khatam kar deta hai.

   ⚠️ Ye guard `.ma-woo-page` par hai, kisi page ID par nahi — kal koi doosra
   block+shortcode wala page banega to wo bhi khud theek rahega.

   (b) BEECH MEIN. Is page ka ek hi kaam hai, is liye heading, intro aur form
   teenon beech mein. Nateeja (order ki details) JAAN-BOOJH KAR bahar hai — wo ek
   table hai aur uska text center karna usay parhne mein mushkil bana deta.
   --------------------------------------------------------------------------- */
.ma-woo-page .ma-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* Heading, intro aur form — teenon beech mein. */
.ma-woo-page--track .ma-container > * {
	text-align: center;
}

/* 🔴 `text-align: center` akela kaafi NAHI tha.

   `page-head` ke do bachchon par apni max-width hai — `<h1>` par `max-w-[24ch]`
   aur intro `<p>` par `max-w-measure`. `text-align` un ke ANDAR ka text center
   karta hai, magar dabba khud baayin taraf hi khara rehta hai. Naapa gaya:
   heading x=57 par (630px chaura), jab ke eyebrow poori chaudai par center.
   Screen par heading baayin taraf jhuki hui saaf nazar aati thi.

   `margin-inline: auto` un dabbon ko bhi beech mein le aata hai. */
.ma-woo-page--track .ma-container > * {
	margin-left: auto;
	margin-right: auto;
}

.ma-woo-page--track form.track_order {
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

/* Form ke andar sab kuch baayin taraf hi rehta hai — labels aur fields center
   karna form ko parhne mein mushkil bana deta hai (aankh ko har line ka aaghaz
   dobara dhoondna padta hai). Sirf DABBA beech mein hai, us ka content nahi.

   Isi liye button ka `justify-self: start` yahan `center` ho jata hai — warna wo
   ek centred card mein akela baayin kone par latka hua lagta. */
.ma-woo-page--track form.track_order p:has(button.button) {
	justify-self: center;
}

/* Nateeja bhi beech wali chaudai par — warna wo poori screen par phail jata hai
   jab ke us ke upar sab kuch 44rem ke andar hai. */
.ma-woo-page--track .woocommerce > p:has(mark.order-status),
.ma-woo-page--track .woocommerce-order-details,
.ma-woo-page--track .woocommerce-customer-details {
	max-width: 60rem;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

/* ---------------------------------------------------------------------------
   36. CONTACT FORM 7 (round 9)
   ---------------------------------------------------------------------------
   Client: "contact ke liye Contact Form 7 use karo, custom na rakho".

   Form ka markup CF7 ke template mein hamari apni classes par likha hua hai
   (`ma-field`, `ma-input`, `ma-btn`), is liye fields ki styling section 4 se
   pehle hi lag jati hai. Yahan sirf wo cheezein hain jo CF7 KHUD daalta hai
   aur jo hamare layout se larti hain.
   --------------------------------------------------------------------------- */

/* 🔴 CF7 har field ko ek `<span class="wpcf7-form-control-wrap">` mein lapetta
   hai. `.ma-field` ek flex column hai (label upar, input neeche) — us ke andar
   ye span ek flex item ban jata hai aur input span ke andar inline reh kar apni
   poori chaudai kho deta hai.

   `display: contents` span ko layout se hata deta hai aur input ko seedha
   `.ma-field` ka bachcha bana deta hai — bilkul waise jaise pehle tha. */
.wpcf7-form-control-wrap {
	display: contents;
}

/* CF7 apne har form ke aakhir mein ek chhupa hua `<fieldset>` bhi rakhta hai
   (bot detection ke liye). Wo khali hai magar flex column mein `gap` us ke liye
   bhi jagah chhod deta hai — button ke neeche ek khali khala. */
.ma-contact-form fieldset[disabled],
.ma-contact-form .screen-reader-response {
	display: none;
}

/* Jawab wala box: CF7 usay HAMESHA print karta hai, khali bhi, aur us par apna
   border laga deta hai. Khali halat mein wo ek be-matlab dabba nazar aata hai.

   ⚠️ `:empty` par bharosa nahi kiya ja sakta — CF7 us ke andar whitespace bhi
   chhod deta hai. Isliye shart CF7 ki apni status class par hai, jo wo tabhi
   lagata hai jab asal mein kuch kehna ho. */
.wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: 0.875rem 1rem;
	border: 0;
	border-left: 3px solid rgba(11, 11, 12, 0.35);
	border-radius: 0 8px 8px 0;
	background-color: #FFFFFF;                     /* token: surface */
	font-size: 0.9375rem;
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
	display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-left-color: #1E3FA0;                    /* token: blue */
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-left-color: #C0392B;                    /* token: error */
}

/* Field ke neeche wali error line — CF7 ka default surkh border wala box hai. */
.wpcf7-not-valid-tip {
	margin-top: 0.375rem;
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 0.75rem;                            /* text-micro */
	letter-spacing: 0.04em;
	color: #C0392B;                                /* token: error */
}

.ma-input.wpcf7-not-valid {
	border-color: #C0392B;
}

/* Bhejte waqt wala spinner — CF7 usay button ke saath inline rakhta hai. */
.wpcf7-spinner {
	margin: 0 0 0 0.75rem;
	vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   37. ORDER PAGES KA NAYA LOOK — safed cards, border nahi (round 9)
   ---------------------------------------------------------------------------
   Client: "cards pe white background add karo, billing aur shipping ko right
   side mein karo, heading ke neeche space nahi hai, borders remove karo padding
   add karo — mujhe modern look chahiye. Address ke text mein koi space hi nahi."

   Ye teen pages par ek saath lagta hai, kyunki teenon wahi do sections chhapte
   hain (`order/order-details.php` + `order/order-details-customer.php`):

       /checkout/order-received/...    order hone ke baad
       /track-order/                   order dhoondne ke baad
       /my-account/view-order/...      account se

   PURANA LOOK: har cell ke gird ek lakeer, cards ka background page jaisa, aur
   heading seedha table se chipki hui. Nateeja ek spreadsheet jaisa lagta tha.

   NAYA: lakeerein gayin, har hissa apne safed card par, andar khuli padding.
   Sirf totals se pehle ek baareek lakeer bachi hai — us ka kaam hai, wo items
   aur hisaab ko alag karti hai.
   --------------------------------------------------------------------------- */

/* --- 1. Billing aur shipping DAAYIN taraf ------------------------------- */

/* Thank-you page par Woo sab kuch `.woocommerce-order` mein rakhta hai:
       p (thank you) - ul (meta row) - p (staging note)
       section.woocommerce-order-details      <- table
       section.woocommerce-customer-details   <- addresses

   Upar wali teen cheezein poori chaudai par rehti hain; neeche wali do saath
   saath. Auto-placement khud hi doosri ko daayin column mein daal deta hai.

   WARNING: Sirf 1024px se upar. Us se neeche addresses table ke NEECHE hi theek
   hain — narrow column mein pata tor kar do lines ka ho jata hai. */
@media (min-width: 1024px) {
	.woocommerce-order {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 20rem;
		column-gap: 2rem;
		align-items: start;
	}

	.woocommerce-order > p,
	.woocommerce-order > ul.woocommerce-order-overview {
		grid-column: 1 / -1;
	}

	.woocommerce-order > .woocommerce-order-details {
		grid-column: 1;
	}

	/* Woo ka clearfix yahan bhi grid ke khane khata — wahi masla jo account ke
	   dashboard par tha (section 33). Pehle se hi band kar diya jaye. */
	.woocommerce-order::before,
	.woocommerce-order::after {
		content: none;
	}

	/* Daayin column tang hai — addresses ka do-column grid wahan ek column ho
	   jaye (section 9 ka `col2-set` warna unhein 1fr 1fr mein bantata hai). */
	.woocommerce-order .woocommerce-customer-details .col2-set {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

/* --- 2. Headings ko saans ----------------------------------------------- */

/* Client: "heading ke neeche space nahi hai". Woo ke `<h2>` par koi margin nahi
   thi, is liye "Order details" seedha table se chipki hui thi. */
.woocommerce-order-details__title,
.woocommerce-customer-details .woocommerce-column__title,
.woocommerce-customer-details > h2 {
	margin: 0 0 1rem;
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Section ke darmiyan faasla. */
.woocommerce-order-details,
.woocommerce-customer-details {
	margin-top: 2.5rem;
}

/* --- 3. Meta row bhi ek card ------------------------------------------- */

/* Order number - date - email - total - payment: page ka khulasa. */
.woocommerce-order-overview {
	margin: 1.5rem 0 0;
	padding: 1.25rem 1.5rem;
	border: 0;
	border-radius: 16px;
	background-color: #FFFFFF;                     /* token: surface */
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem;
}

.woocommerce-order-overview li {
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #45454B;                                /* token: ink-soft */
	line-height: 1.4;
}

.woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.375rem;
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-size: 0.9375rem;
	letter-spacing: 0;
	text-transform: none;
	color: #0B0B0C;                                /* token: ink */
}

/* --- 4. Order details ki table = ek safed card -------------------------- */

/* WARNING: Padding TABLE par nahi lag sakti (wo cells par hi chalti hai), is
   liye card ki shakl table ko hi di gayi hai aur khuli jagah cells ki padding se
   aati hai. `border-collapse: separate` + `overflow: hidden` — is ke baghair
   kone gol nahi hote. */
.woocommerce-order-details table.order_details,
.woocommerce-order-details table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 16px;
	overflow: hidden;
	background-color: #FFFFFF;                     /* token: surface */
}

.woocommerce-order-details table.order_details th,
.woocommerce-order-details table.order_details td,
.woocommerce-order-details table.shop_table th,
.woocommerce-order-details table.shop_table td {
	border: 0;
	padding: 1.125rem 1.5rem;
	vertical-align: top;
}

.woocommerce-order-details table.order_details thead th {
	padding-bottom: 0.75rem;
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #45454B;                                /* token: ink-soft */
}

/* Items ke darmiyan baareek lakeer — cell ke border se nahi, warna wo gol kone
   ke bahar nikal jati hai. */
.woocommerce-order-details table.order_details tbody tr + tr td {
	box-shadow: inset 0 1px 0 rgba(11, 11, 12, 0.08);
}

/* Sirf yahan ek lakeer bachi hai: items khatam, hisaab shuru. Ye "border" nahi,
   ek taqseem hai — is ke baghair Total items ki aakhri line jaisa lagta hai. */
.woocommerce-order-details table.order_details tfoot tr:first-child th,
.woocommerce-order-details table.order_details tfoot tr:first-child td {
	padding-top: 1.25rem;
	box-shadow: inset 0 1px 0 rgba(11, 11, 12, 0.12);
}

.woocommerce-order-details table.order_details tfoot th,
.woocommerce-order-details table.order_details tfoot td {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.woocommerce-order-details table.order_details tfoot tr:last-child th,
.woocommerce-order-details table.order_details tfoot tr:last-child td {
	padding-bottom: 1.375rem;
}

/* --- 5. Address = safed card, aur text ko saans ------------------------- */

.woocommerce-customer-details address {
	margin: 0;
	padding: 1.375rem 1.5rem;
	border: 0;
	border-radius: 16px;
	background-color: #FFFFFF;                     /* token: surface */
	font-style: normal;
	/* Client: "address ke text mein koi space hi nahi hai." Har line ek alag
	   cheez hai (naam, gali, sheher, phone) — 1.6 un ke liye tang tha. */
	line-height: 1.9;
	color: #0B0B0C;                                /* token: ink */
}

.woocommerce-customer-details address p {
	margin: 0;
}

/* Phone aur email ki lines — Woo un par apni classes deta hai. */
.woocommerce-customer-details address .woocommerce-customer-details--phone,
.woocommerce-customer-details address .woocommerce-customer-details--email {
	margin-top: 0.5rem;
	color: #45454B;                                /* token: ink-soft */
	word-break: break-word;
}

/* --- 6. Woo ki apni lakeerein — inhein poore naam se harana pada ---------- */

/* Upar wali rules likhne ke baad screen par TEEN lakeerein phir bhi bachi hui
   thin. Naapa gaya to teenon Woo ki apni CSS se aa rahi thin, aur teenon meri
   rule se ZYADA SPECIFIC thin:

       address      border: 1px 2px 2px 1px rgba(0,0,0,.1)
                    Woo: `.woocommerce-customer-details .woocommerce-column address`
                    mera tha `.woocommerce-customer-details address` — kam specific

       overview li  border-right: 1px dashed
                    Woo: `.woocommerce ul.order_details li`   (0,2,2)
                    mera tha `.woocommerce-order-overview li` (0,1,1) — haar gaya

       tfoot rows   border-top har row par
                    hamari apni section 6 ki table rules

   Sabaq wahi jo is file mein pehle bhi do bar aaya: baad mein likhi hui rule
   apne aap nahi jeetti — specificity pehle aati hai. Is liye neeche har selector
   utna hi poora likha gaya hai jitna zaroori tha, aur `!important` phir bhi
   kahin nahi. */

.woocommerce .woocommerce-customer-details .woocommerce-column address,
.woocommerce-customer-details .woocommerce-column address {
	border: 0;
	border-width: 0;
}

.woocommerce ul.woocommerce-order-overview.order_details li,
.woocommerce-order-overview.order_details li {
	border: 0;
	border-right: 0;
	padding-right: 0;
}

/* Totals: sirf PEHLI row par lakeer (items aur hisaab ka faasla), baqi saaf. */
.woocommerce .woocommerce-order-details table.order_details tfoot tr th,
.woocommerce .woocommerce-order-details table.order_details tfoot tr td,
.woocommerce-order-details table.order_details tfoot tr th,
.woocommerce-order-details table.order_details tfoot tr td {
	border-top: 0;
}

.woocommerce .woocommerce-order-details table.order_details tbody tr th,
.woocommerce .woocommerce-order-details table.order_details tbody tr td {
	border-top: 0;
	border-bottom: 0;
}

/* Address card ka POORA look isi zyada specific selector par.

   Pehle sirf `border` yahan tha aur baqi (padding, background, radius) upar wali
   kam specific rule mein. Naapa gaya to padding `6px 12px` nikli — yani Woo ki
   apni `.woocommerce .woocommerce-customer-details address` (0,2,1) hamari
   `.woocommerce-customer-details address` (0,1,1) se jeet rahi thi.

   Desktop par ye pakda nahi gaya tha kyunki wahan khuli jagah ka ehsas
   `line-height: 1.9` se aa raha tha, padding se nahi. Mobile par jab card tang
   hua to asli padding saaf nazar aa gayi. */
.woocommerce .woocommerce-customer-details .woocommerce-column address,
.woocommerce .woocommerce-customer-details address,
.woocommerce-customer-details .woocommerce-column address {
	margin: 0;
	padding: 1.375rem 1.5rem;
	border: 0;
	border-width: 0;
	border-radius: 16px;
	background-color: #FFFFFF;                     /* token: surface */
	font-style: normal;
	line-height: 1.9;
	color: #0B0B0C;                                /* token: ink */
}

/* WOO KA CLEARFIX — TEESRI BAR (aur is bar meta row par).

   Naapa gaya: card ke andar pehla item "ORDER NUMBER" baqi sab se theek 40px
   andar shuru ho raha tha —

       ul ka content x=40   ->   li1 "DATE" x=40   ✔
                                 li0 "ORDER NUMBER" x=80   ✘

   40px hamara apna `column-gap` hai. Yani us se pehle koi aur flex item maujood
   tha: `.woocommerce ul.order_details::before`, jo Woo ka clearfix hai
   (`content: " "`). Flex container ke pseudo-elements bhi flex ITEM bante hain,
   is liye wo bina dikhe ek poora gap kha gaya.

   Yehi cheez pehle account ke dashboard (section 33) aur thank-you page ke grid
   (section 37) par bhi mili thi. Jahan bhi Woo ke kisi wrapper ko grid ya flex
   banayein, ye do lines saath likhni hain. */
.woocommerce-order-overview::before,
.woocommerce-order-overview::after,
.woocommerce ul.order_details::before,
.woocommerce ul.order_details::after {
	content: none;
}

/* Har taraf ki lakeer gayi — sirf `border-top` kaafi nahi tha.

   Naapa gaya: totals mein "SUBTOTAL:" aur "$39.90" ke DARMIYAN ek khari lakeer
   bachi hui thi. Wo `th` ke `border-right` se aa rahi thi; upar wali rule sirf
   `border-top` hata rahi thi. */
.woocommerce .woocommerce-order-details table.order_details tbody th,
.woocommerce .woocommerce-order-details table.order_details tbody td,
.woocommerce .woocommerce-order-details table.order_details tfoot th,
.woocommerce .woocommerce-order-details table.order_details tfoot td,
.woocommerce .woocommerce-order-details table.order_details thead th {
	border: 0;
}

/* Mobile: cell ki padding kam.

   360px par 1.5rem (24px) dono taraf ka matlab tha ke product ka naam chaar
   lines mein tootta tha aur "Test payment (staging only)" bhi. Card ka ehsas
   barqarar rehta hai, bas andar ki jagah nap kar. */
@media (max-width: 639px) {
	.woocommerce-order-details table.order_details th,
	.woocommerce-order-details table.order_details td,
	.woocommerce-order-details table.shop_table th,
	.woocommerce-order-details table.shop_table td {
		padding: 0.875rem 1rem;
	}

	.woocommerce-order-overview {
		padding: 1.125rem 1.25rem;
	}

	.woocommerce .woocommerce-customer-details .woocommerce-column address,
	.woocommerce .woocommerce-customer-details address {
		padding: 1.125rem 1.25rem;
	}
}

/* ---------------------------------------------------------------------------
   38. TRACK ORDER — error wala notice form ke NEECHE, aur usi chaudai par
   ---------------------------------------------------------------------------
   Client: "'Sorry, the order could not be found' wali line ko theek karo, jaise
   baqi ki width hai us ke according karo, aur box ke neeche karo."

   Naapa gaya:

       notice   x=101   w=1318   <- poore container par
       form     x=408   w=704    <- 44rem, beech mein

   Yani wo apne form se do guna chaura tha aur us ke UPAR baitha tha. Dono baatein
   ghalat lagti thin: chaudai mel nahi khati thi, aur user ko pehle ghalti dikhti
   thi phir wo khana jahan ghalti hui.

   Woo dono ko ek hi maa-baap (`.woocommerce`) ka bachcha banata hai, notice pehle
   aur form baad mein. DOM badla nahi ja sakta (wo shortcode ka output hai),
   isliye `order` se un ki tarteeb palti gayi hai.

   🔴 `:has(form.track_order)` — ye shart zaroori hai. Order mil jane ke baad form
   ghayab ho jata hai aur usi jagah nateeja aata hai; us waqt kisi notice ko neeche
   dhakelna ghalat hoga. Shart sirf us surat mein lagti hai jab form maujood ho,
   yani jab notice waqai us form ke bare mein ho.
   --------------------------------------------------------------------------- */
.ma-woo-page--track .woocommerce:has(form.track_order) {
	display: flex;
	flex-direction: column;
}

.ma-woo-page--track .woocommerce:has(form.track_order) > .woocommerce-error,
.ma-woo-page--track .woocommerce:has(form.track_order) > .woocommerce-info,
.ma-woo-page--track .woocommerce:has(form.track_order) > .woocommerce-message {
	order: 1;
	width: 100%;
	max-width: 44rem;                              /* wahi jo form ki hai */
	margin: 1.25rem auto 0;
	text-align: left;
}

/* ---------------------------------------------------------------------------
   39. NEWSLETTER PLUGIN KA APNA PAGE (round 9)
   ---------------------------------------------------------------------------
   Footer ka signup form hamara apna hai (`template-parts/newsletter.php`) aur
   wo AJAX se plugin ko jata hai — user wahin rehta hai. Magar plugin ka apna
   page `/newsletter/` bhi maujood hai, aur wo TAALA nahi ja sakta: confirmation
   email ka link customer ko wahin laata hai.

   Naapa gaya tha: us page par "Your subscription has been confirmed" screen ke
   bilkul baayen kinare se chipka hua chhap raha tha, aur us ke neeche plugin ka
   apna form — safed dabba aur gehra bhoora "Subscribe" button, poori tarah
   off-brand.

   Container `page.php` se lag gaya (wahi shart jo track-order par hai). Yahan
   plugin ke apne markup (`.tnp-*`) ko theme ke tokens par laya gaya hai.

   ⚠️ Plugin ka form yahan JAAN-BOOJH KAR chhupaya NAHI gaya. Wo confirmation ke
   baad "already confirmed" jaise haalat mein dobara signup ka rasta deta hai,
   aur kal client is page ka link kahin bhi laga sakta hai.
   --------------------------------------------------------------------------- */

/* Plugin ka paighaam — wahi shakl jo baqi site ke notices ki hai. */
.tnp .tnp-message,
.tnp-subscription-message,
.tnp-message {
	margin: 0 0 2rem;
	padding: 0.875rem 1rem;
	border-left: 3px solid #1E3FA0;                /* token: blue */
	border-radius: 0 8px 8px 0;
	background-color: #FFFFFF;                     /* token: surface */
	font-size: 1rem;
	color: #0B0B0C;                                /* token: ink */
}

.tnp-subscription {
	max-width: 34rem;
	margin: 0;
}

.tnp-subscription form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.tnp-subscription .tnp-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
}

.tnp-subscription .tnp-field label {
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #45454B;                                /* token: ink-soft */
}

/* Inputs — wahi jo hamare `.ma-input` par hai (section 4). */
.tnp-subscription input[type="text"],
.tnp-subscription input[type="email"],
.tnp-subscription select,
.tnp-subscription textarea {
	width: 100%;
	min-height: 2.9375rem;
	padding: 0.625rem 0.875rem;
	border: 1px solid rgba(11, 11, 12, 0.12);      /* token: line */
	border-radius: 8px;
	background-color: #FFFFFF;                     /* token: surface */
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-size: 1rem;
	color: #0B0B0C;
}

.tnp-subscription input[type="email"]:focus-visible,
.tnp-subscription input[type="text"]:focus-visible {
	outline: 2px solid #1E3FA0;
	outline-offset: 2px;
}

/* Button — wahi 40px wala naap jo poori site par hai (section 5 / main.css). */
.tnp-subscription input[type="submit"],
.tnp-subscription .tnp-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-height: 2.5rem;
	padding: 0.5rem 1.25rem;
	border: 1px solid #E63329;                     /* token: accent */
	border-radius: 999px;
	background-color: #E63329;
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #FFFFFF;                                /* token: accent-ink */
	cursor: pointer;
	transition: background-color 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
		border-color 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tnp-subscription input[type="submit"]:hover,
.tnp-subscription .tnp-submit:hover {
	border-color: #0B0B0C;
	background-color: #0B0B0C;
	color: #FAF8F4;                                /* token: paper */
}

/* Privacy/consent wali line — plugin usay checkbox ke saath deta hai. */
.tnp-subscription .tnp-privacy-field label,
.tnp-subscription .tnp-privacy-field {
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-size: 0.875rem;
	letter-spacing: 0;
	text-transform: none;
	color: #45454B;                                /* token: ink-soft */
	line-height: 1.6;
}

/* Plugin ka paighaam ek BARE `<p>` hai — us par koi class nahi.

   Naapa gaya tha: "Your subscription has been confirmed" ek saada `<p>` mein
   aata hai, seedha container ka bachcha. Upar wali `.tnp-message` rules us par
   lagti hi nahi thin kyunki wo class maujood hi nahi.

   `.ma-woo-page--newsletter` (page.php se) us page ko pehchanta hai, aur `> p`
   sirf plugin ke apne paighaam par lagta hai — page-head block apna markup khud
   laata hai aur container ka seedha bachcha nahi hota. */
.ma-woo-page--newsletter > p {
	max-width: 34rem;
	margin: 0 0 2rem;
	padding: 0.875rem 1rem;
	border-left: 3px solid #1E3FA0;                /* token: blue */
	border-radius: 0 8px 8px 0;
	background-color: #FFFFFF;                     /* token: surface */
	font-size: 1rem;
	color: #0B0B0C;                                /* token: ink */
}