/* Mangwao child theme — v1.2.32 mobile fixes ONLY.
   Loads after mangwao.css + mangwao-1.2.30.css + mangwao-1.2.31.css.
   Scope: (1) mobile header icons into the logo row, (2) PDP cut-price
   strikethrough centred. Everything else is untouched by this file. */

/* ------------------------------------------------------------------ */
/* FIX 1 — MOBILE HEADER ICONS (user phone screenshot 2026-10-25):     */
/* Root cause, code-proven: row 1 could not fit, so .icons wrapped.    */
/* style.css:78 sets .header .brand AND .header .icons to flex:none;   */
/* .icons .icon is 42x42 (style.css:103) and .brand min-width 112px    */
/* (mangwao.css ≤760). At a 360-390px phone: hamburger ~26 + gaps +     */
/* brand ~135 (40px logo + 16px "Mangwao") + icons 4x42 + 3x10 gaps =   */
/* ~198, + 24px header padding = ~403px > viewport, so the whole       */
/* .icons container dropped to its own row. Fix: shrink row-1 items    */
/* (never the search bar — it keeps flex:1 1 100% + order:10, so it    */
/* stays a full-width row below) until row 1 fits with room to spare.  */
/* Math at 360px: 20 padding + 22 hamb + 8 gap + ~102 brand + 8 gap +   */
/* 162 icons = 322px. At 320px (≤360 block): 16 + 20 + 6 + ~98 + 6 +     */
/* 151 = 297px. Desktop is untouched: every rule here is ≤760px.       */
/* ------------------------------------------------------------------ */
@media(max-width:760px){
  .header{padding:8px 10px!important;gap:8px!important}
  .header .hamb{flex:none!important;font-size:20px!important}
  .header .brand{flex:0 1 auto!important;min-width:0!important}
  .brand img,.brand .custom-logo{height:34px!important;margin-right:6px!important}
  .brand span{font-size:14px!important}
  .header .icons{flex:none!important;margin-left:auto!important;gap:6px!important}
  .icons .icon{width:36px!important;height:36px!important;border-radius:9px!important}
  .icons .icon svg{width:20px!important;height:20px!important}
}
@media(max-width:360px){
  .header{padding:8px 8px!important;gap:6px!important}
  .brand span{font-size:13px!important}
  .header .icons{gap:5px!important}
  .icons .icon{width:34px!important;height:34px!important}
}

/* ------------------------------------------------------------------ */
/* FIX 3 — QUICK VIEW SPINNER (JS mg-qv-loading class ke saath):       */
/* Image ke load hone tak spinner dikhta hai (desktop: image column    */
/* ka center; mobile: single column mein image area ka center).        */
/* Close button (z-index 2) spinner se upar rehta hai.                 */
/* ------------------------------------------------------------------ */
#mgQv.mg-qv-loading .mg-modal-box::after{content:"";position:absolute;z-index:1;left:25%;top:50%;width:40px;height:40px;border:3px solid #e8e4ef;border-top-color:#875ff5;border-radius:50%;animation:mgQvSpin .8s linear infinite}
@keyframes mgQvSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
#mgQv.mg-qv-loading .mg-modal-box::after{transform:translate(-50%,-50%)}
@media(max-width:760px){
  #mgQv.mg-qv-loading .mg-modal-box::after{left:50%;top:110px}
}

/* ------------------------------------------------------------------ */
/* FIX 2 — PDP CUT-PRICE LINE CENTRE (user phone report 2026-10-25):   */
/* Root cause, code-proven: @media(max-width:768px) in mangwao.css     */
/* sets .price del to 16px, but the amount span INSIDE del to 20px.     */
/* WooCommerce renders <del><span class="woocommerce-Price-amount">,    */
/* and the line-through is drawn from del's own 16px font metrics      */
/* while the visible glyphs are 20px — so the line sits ABOVE the      */
/* visual centre of the grey text. On desktop both are 20px, which is   */
/* why desktop never reproduced it. Fix: make del match its content    */
/* (20px, line-height 1.2) at every width — desktop is already 20px,   */
/* so this is a no-op there; only the strike line moves, down to the   */
/* centre. The glyph size itself does not change, so no layout shift.  */
/* Cards are untouched: this selector is .single-product PDP only.     */
/* ------------------------------------------------------------------ */
.single-product div.product .price del{font-size:20px!important;line-height:1.2!important}
.single-product div.product .price del .woocommerce-Price-amount{font-size:20px!important;line-height:1.2!important}