/* Mangwao child theme — components, ported from the original Blogger theme source
   (b:skin classes: .mg-pdp*, .cart-panel*, .sl-*, .mg-wish-*, .mg-field/.mg-pay,
   .mg-modal*, .mg-stickybar). Class names follow the source wherever the theme
   generates the markup itself; WooCommerce-generated markup is styled to the
   same source values. See BUILD-REPORT.md. */

/* ============ Woo views: full width, no blog sidebar (source store has none).
   functions.php unhooks the sidebar actions and adds the
   .storefront-full-width-content body class on Woo views; this is the
   CSS safety net + Storefront's content-area widening for that class. ============ */
body.storefront-full-width-content #secondary{display:none!important}
body.storefront-full-width-content .content-area{width:100%;float:none;margin-left:0;margin-right:0}

/* ============ Loop card reset (v1.2.0, V3-AUDIT.md §24-C2; CORRECTED v1.2.9) ============
   Storefront's woocommerce.css — which loads AFTER this file on live, so the
   v1.2.0 "child prints after it" claim is FALSE on live (the dependency in
   functions.php never attaches: Storefront registers its stylesheet after
   the child's priority-20 enqueue) — sets, on full-width WooCommerce pages
   (a class the theme itself adds, see functions.php),
   .storefront-full-width-content .site-main ul.products.columns-N li.product
   at (0,5,2): columns-5 = 16.9%, columns-3 = 30.43%. Inside the child's CSS
   grid the float is ignored but the width/margin are NOT, so every loop card
   was squeezed to 16.9%/30.43% of its grid cell — the narrow clipped strips
   the 14:41 rendered re-check caught. The old (0,3,2) reset tied Storefront's
   base rule and lost to every columns rule on order. These (0,6,3)/(0,6,4)
   selectors beat (0,5,2) outright, so the fix is order-independent and needs
   no !important. Scoped to the two grid contexts ONLY (.mg-listing archives,
   PDP related) — float-layout loops elsewhere keep Storefront's widths,
   which are correct for floats. */
.site-main ul.products li.product,ul.products li.product{width:auto;float:none;margin:0}
body.woocommerce .site-main .mg-listing ul.products[class*="columns-"] li.product,
body.storefront-full-width-content .site-main .mg-listing ul.products[class*="columns-"] li.product,
body.single-product .site-main section.related ul.products[class*="columns-"] li.product,
body.storefront-full-width-content.single-product .site-main section.related ul.products[class*="columns-"] li.product{width:auto;float:none;margin:0}
/* v1.2.8 (empty first cell, global): WooCommerce serves
   ul.products::before/::after{content:"";display:table} as a clearfix; inside a
   CSS grid those pseudos become items and ::before IS the blank first cell.
   The theme floats no products, so the clearfix is dead weight — killed. */
ul.products::before,ul.products::after{content:none!important;display:none!important}

/* ============ PDP layout — SOURCE: .mg-pdp/.mg-crumb/.mg-pdp-grid ============ */
/* v1.2.2 (rendered audit): on single product pages the original shows ONLY
   the breadcrumb above the product — the main nav row is hidden there. */
body.single-product .mania-nav{display:none!important}
.single-product div.product{max-width:1200px;margin:0 auto}
.woocommerce-breadcrumb{font-size:14px;color:#777;margin:20px 0}
.woocommerce-breadcrumb a{color:#777;text-decoration:none}
.woocommerce-breadcrumb a:hover{color:#875ff5}
/* SOURCE: .mg-crumb — the theme prints its own crumb (functions.php:
   mangwao_pdp_crumb) because no breadcrumb element is output otherwise. */
.mg-crumb{font-size:14px;color:#777;margin:20px 0;clear:both;text-align:left}
.mg-crumb a{color:#777;text-decoration:none}
.mg-crumb a:hover{color:#875ff5}
.mg-crumb .sep{margin:0 8px;color:#ccc}
.mg-crumb>span:last-child{color:#1e1e1e}
.single-product div.product .woocommerce-product-gallery{border:1px solid #eee;border-radius:12px;overflow:hidden;background:#fff;position:relative}
/* SOURCE: .mg-gal-main is a 1/1 stage with the photo contained on it (v2 image
   presentation: one consistent ratio, clean white stage, no distortion). */
.single-product div.product .woocommerce-product-gallery img{border-radius:0}
/* v1.2.6 (F7): WooCommerce's 'View full-screen image gallery' trigger,
   restyled as the original's .mg-zoom-icon (36px white circle, top-right). */
.single-product div.product .woocommerce-product-gallery__trigger{position:absolute;top:14px;right:14px;width:36px;height:36px;background:#fff;border:1px solid #eee;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:#666;z-index:2;box-sizing:border-box}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image{position:relative}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff}
/* v1.2.9 (gallery safety net): if FlexSlider never builds a viewport, the
   stage still shows the first image instead of staying blank. Only active
   while .mg-gal-static is present (JS removes it the moment a viewport
   appears); never touches the normal slider path. */
.single-product div.product .woocommerce-product-gallery.mg-gal-static .woocommerce-product-gallery__image:not(:first-of-type){display:none}
.single-product .flex-control-thumbs{display:flex;gap:12px;margin-top:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px;position:static}
.single-product .flex-control-thumbs li{width:145px!important;height:145px;float:none!important;margin:0!important;flex:0 0 auto}
.single-product .flex-control-thumbs li img{width:145px;height:145px;object-fit:cover;border:1px solid #eee;border-radius:8px;padding:4px;background:#fff;opacity:1}
.single-product .flex-control-thumbs li img.flex-active{border:2px solid #875ff5}
/* SOURCE: .mg-gal-badge */
.single-product .onsale{position:absolute;top:14px;left:14px;background:#875ff5;color:#fff;font-size:12px;font-weight:600;padding:6px 14px;border-radius:20px;z-index:2;width:auto;height:auto;line-height:1.3;border:0;text-transform:none}
/* v1.2.2: WooCommerce's .onsale{text-transform:uppercase} rendered the
   theme's "-Rs 400" pill as "-RS 400"; text-transform:none restores the
   original's lowercase-s format. */
/* v1.2.2: PDP star-rating row under the title (functions.php:
   mangwao_pdp_rating_row) — always visible: gray stars + purple review
   link at 0 reviews, real filled stars otherwise. */
.mg-pdp-rating{display:flex;align-items:center;gap:8px;margin:0 0 14px}
.mg-pdp-stars{letter-spacing:2px;font-size:15px;line-height:1}
.mg-pdp-stars .mg-star{color:#ccc}
.mg-pdp-stars .mg-star.on{color:#f5a623}
.mg-pdp-review-link{color:#875ff5;font-size:13px;text-decoration:none}
/* SOURCE: .mg-pdp-brand/.mg-pdp-title/.mg-pdp-price/.mg-pdp-short */
.mg-pdp-brand{font-size:14px;color:#999;margin:0 0 8px}
.single-product div.product .product_title{font-size:32px;font-weight:700;color:#1e1e1e;margin:0 0 12px;line-height:1.3}
.single-product div.product .woocommerce-product-rating{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.single-product div.product .woocommerce-review-link{color:#875ff5;font-size:13px;text-decoration:none}
.single-product div.product p.price,.single-product div.product span.price{font-size:28px;font-weight:800;color:#875ff5;margin:0 0 16px}
.single-product div.product .price del{color:#999;font-weight:400;font-size:20px;margin-right:12px}
.single-product div.product .price ins{text-decoration:none;background:none;color:#875ff5}
.single-product div.product .woocommerce-product-details__short-description{color:#666;font-size:14px;line-height:1.7;margin:0 0 22px}
.mg-pdp-short-title{display:block;font-weight:700;color:#1e1e1e;margin-bottom:6px}
/* SOURCE: .mg-var (variation selects, the original theme's variant UI) */
.single-product table.variations th.label label{display:block;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#666;margin-bottom:6px}
.single-product table.variations td.value select{width:100%;padding:11px 12px;border:1.5px solid #ddd;border-radius:10px;font-size:14px;background:#fff;color:#222;outline:none;cursor:pointer}
.single-product table.variations td.value select:focus{border-color:#875ff5}
/* SOURCE: .mg-qty + .mg-addcart + .mg-wishbtn */
.single-product form.cart{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.single-product form.cart .quantity .qty{border:1px solid #ddd;border-radius:25px;background:#fff;width:112px;height:50px;text-align:center;font-weight:700;font-size:15px;color:#875ff5;padding:0}
/* v1.2.2 (rendered audit): the quantity control must show VISIBLE − / +
   buttons in an outlined pill — v1.2.1 left only the number input (native
   spinners, often invisible). JS (mangwao.js) injects the buttons; the pill
   below styles them. Native spinners are hidden so only the pill buttons
   show. */
.single-product form.cart .quantity.mg-qty-enhanced{display:inline-flex;align-items:stretch;border:1px solid #ddd;border-radius:25px;overflow:hidden;background:#fff;height:50px;width:auto}
.single-product form.cart .quantity.mg-qty-enhanced .qty{border:0;border-radius:0;width:56px;height:100%;margin:0}
.single-product form.cart .quantity.mg-qty-enhanced .qty::-webkit-outer-spin-button,.single-product form.cart .quantity.mg-qty-enhanced .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.single-product form.cart .quantity.mg-qty-enhanced .qty{-moz-appearance:textfield;appearance:textfield}
.mg-qty-btn{flex:0 0 38px;border:0;background:#fff;font-size:18px;font-weight:600;line-height:1;color:#1e1e1e;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.mg-qty-btn:hover{background:#875ff5;color:#fff}
.single-product .single_add_to_cart_button{background:#875ff5!important;color:#fff;border:0;border-radius:8px;width:205px;height:52px;font-size:15px;font-weight:600;cursor:pointer;float:none!important}
.single-product .single_add_to_cart_button:hover{background:#7c4de0!important}
.mg-wishbtn{width:48px;height:52px;border:1px solid #ddd;border-radius:6px;background:#fff;font-size:20px;cursor:pointer;color:#999;display:inline-flex;align-items:center;justify-content:center;padding:0}
.mg-wishbtn.on{color:#875ff5;border-color:#875ff5}
/* SOURCE: .mg-meta */
.single-product .product_meta{border-top:1px solid #eee;padding-top:16px;font-size:14px;color:#666}
.single-product .product_meta>span{display:block;margin-bottom:8px}
.single-product .product_meta>span .sku,.single-product .product_meta>span a{color:#875ff5}
.single-product .product_meta a{text-decoration:none}
/* SOURCE: .mg-share */
.mg-share{margin-top:14px;font-size:13px;color:#999;display:flex;gap:12px;align-items:center}
.mg-share a{color:#875ff5;text-decoration:none;font-weight:600}
/* SOURCE: .mg-love/.mg-ck */
.mg-love{background:#faf9fc;border:1px solid #eee9f5;border-radius:12px;padding:16px 18px;margin:18px 0}
.mg-love h4{margin:0 0 10px;font-size:16px;font-weight:700;color:#1e1e1e}
.mg-love ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mg-love li{font-size:14px;color:#444;display:flex;align-items:center;gap:8px}
.mg-ck{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#875ff5;color:#fff;font-size:12px;flex:0 0 auto}
/* SOURCE: .mg-paysecure/.mg-paybadges/.mg-payb */
.mg-paysecure{margin:18px 0}
.mg-paysecure h4{margin:0 0 10px;font-size:16px;font-weight:700;color:#1e1e1e}
.mg-paybadges{display:flex;flex-wrap:nowrap;gap:8px;align-items:center}
.mg-payb{border:1px solid #e5e0ee;border-radius:8px;padding:6px 10px;background:#fff;display:flex;align-items:center;justify-content:center;min-width:78px;height:44px;font-size:12px;font-weight:700;color:#1e1e1e;text-align:center;box-shadow:0 1px 3px rgba(30,30,30,.06)}
.mg-payb svg{width:28px;height:28px;display:block}
.mg-payb img{height:28px;width:auto;display:block}
.mg-payb .mg-ep{color:#43b02a;font-weight:700;font-size:13px}
/* SOURCE: .mg-tabs/.mg-tablist */
.single-product div.product .woocommerce-tabs{margin:40px 0 50px;background:#fff}
/* v1.2.9: the old (0,2,0) selector lost to Storefront's
   .storefront-full-width-content .woocommerce-tabs ul.tabs at (0,3,1), which
   sets width:30.43% + float:left — so the tabs centred inside a narrow
   left-floated box and LOOKED left-aligned. This (0,5,2) selector restores
   full width and kills the float, so centring is page-wide. */
.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs{display:flex;list-style:none;margin:0;padding:0;border-bottom:1px solid #eee;justify-content:center;flex-wrap:wrap;width:100%;float:none}
.single-product .wc-tabs li{padding:12px 24px;font-size:16px;font-weight:600;color:#1e1e1e;border-bottom:3px solid transparent;margin-bottom:-1px;background:none!important;border-top:0;border-left:0;border-right:0;border-radius:0}
.single-product .wc-tabs li.active{color:#875ff5;border-bottom-color:#875ff5}
.single-product .wc-tabs li a{color:inherit}
.single-product .woocommerce-Tabs-panel{padding:28px;font-size:14px;line-height:1.8;color:#444;text-align:left}
.single-product .woocommerce-Tabs-panel ul,.single-product .woocommerce-Tabs-panel ol{text-align:left}

/* v1.2.2 (rendered audit): related-products cards show ONLY Add to cart +
   Wishlist — no Quick View. Scoped to the PDP related section ONLY, so the
   homepage card (frozen) is untouched: its files and rules are unchanged.
   v1.2.18 (deep audit P1#10): Blogger related cards DO carry Quick View —
   the hiding rule is removed, so related cards match the card template. */
/* SOURCE: .mg-related */
.single-product .related.products{margin:60px 0 20px}
.single-product .related.products>h2,.single-product section.related>h2{font-size:28px;font-weight:700;color:#1e1e1e;margin:0 0 24px;text-align:center}
/* v1.2.8: Blogger's related section IS its .products grid (mgRelatedGrid) —
   the scroll track was the mismatch (tall/clipped edge cards). Grid, all
   cards fully inside, same proportions as the shop grid. */
.single-product .related ul.products{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;overflow:visible;padding-bottom:8px}
.single-product .related ul.products li.product{flex:none;width:auto;float:none;margin:0}
/* v1.2.6 (F11): the original's fixed left share rail — restored (the
   v1.2.2 removal was wrong: the rendered audit confirms the rail on the
   original PDP). Inline "Share:" links stay too. */
.mg-socrail{position:fixed;left:12px;top:50%;transform:translateY(-50%);z-index:900;display:flex;flex-direction:column;gap:10px;background:#fff;border-radius:24px;padding:10px 8px;box-shadow:0 2px 12px rgba(0,0,0,.1)}
.mg-socrail a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid #eee;box-shadow:0 1px 6px rgba(30,30,30,.08);opacity:.9;color:#555}
.mg-socrail a:hover{opacity:1}
@media(max-width:900px){.mg-socrail{display:none}}
/* SOURCE: .mg-stickybar (mobile PDP sticky add-to-cart) */
.mg-stickybar{position:fixed;bottom:0;left:0;right:0;background:#fff;box-shadow:0 -2px 12px rgba(0,0,0,.12);padding:10px 14px;z-index:120;display:flex;align-items:center;gap:12px;transform:translateY(110%);transition:transform .3s ease}
.mg-stickybar.show{transform:translateY(0)}
.mg-sb-img{width:46px;height:46px;object-fit:cover;border-radius:8px}
.mg-sb-info{flex:1;min-width:0}
.mg-sb-title{font-size:14px;font-weight:600;color:#1e1e1e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-sb-price{font-size:15px;font-weight:700;color:#1a9e54;margin-top:2px}
.mg-sb-add{background:#875ff5;color:#fff;border:0;border-radius:8px;padding:0 18px;height:46px;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;white-space:nowrap;font-weight:600;cursor:pointer;font-size:14px}
/* v1.2.2: sticky-bar stepper — the original's own .mg-qty/.mg-sb-qty
   (source PDP markup): outlined pill, − / + buttons, purple count. */
.mg-qty{display:inline-flex;align-items:stretch;border:1px solid #ddd;border-radius:25px;overflow:hidden;background:#fff;height:38px}
.mg-qty button{flex:0 0 32px;width:32px;height:100%;border:0;background:#fff;font-size:16px;font-weight:600;line-height:1;color:#1e1e1e;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.mg-qty button:hover{background:#875ff5;color:#fff}
.mg-qty>span{flex:1;display:flex;align-items:center;justify-content:center;min-width:28px;padding:0 4px;font-weight:700;font-size:14px;color:#875ff5}
.mg-sb-qty{width:92px;height:44px;flex:0 0 auto}

/* ============ Swatch enhancement (user's explicit swatch requirement, layered
   over the source's .mg-var selects — selects stay functional underneath) ============ */
.mg-swatches{display:flex;flex-wrap:wrap;gap:9px;margin:2px 0 8px}
.mg-native-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mg-swatch{width:36px;height:36px;border-radius:50%;border:2px solid #ddd;background:#eee;cursor:pointer;padding:0;flex:0 0 auto}
.mg-swatch:hover{border-color:#875ff5}
.mg-swatch.active{border-color:#875ff5;box-shadow:0 0 0 2px #fff,0 0 0 4.5px #875ff5}
.mg-pill-btn{border:1.5px solid #ddd;background:#fff;color:#222;border-radius:10px;padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer}
.mg-pill-btn:hover{border-color:#875ff5;color:#875ff5}
.mg-pill-btn.active{background:#875ff5;border-color:#875ff5;color:#fff}
.mg-pill-btn.disabled,.mg-swatch.disabled{opacity:.32;pointer-events:none}

/* ============ Cart panel — SOURCE: .cart-panel family ============ */
.cart-panel{position:fixed;z-index:300;right:0;top:0;width:min(470px,100%);height:100vh;background:#f8f9fc;box-shadow:-10px 0 35px rgba(0,0,0,.13);transform:translateX(105%);transition:.3s;display:flex;flex-direction:column}
.cart-panel.open{transform:none}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;background:#fff;font-size:22px;font-weight:600;color:var(--ink)}
.cart-head .close{border:0;background:none;font-size:28px;cursor:pointer;line-height:1;color:var(--ink)}
/* v1.2.6 (F20): ONE close spec for every popup/drawer — the original's
   .mg-modal-close 32px #f6f4f8 circle. Drawer/cart closes sit inline in
   their header rows (same circle look, not absolute); modal closes keep
   the absolute top-right placement from .mg-modal-close. Item-remove x
   stays its own small circle (.mg-cart-remove); .mg-arrow is untouched
   for carousel arrows. */
.mg-drawer-head .mg-drawer-close{width:32px;height:32px;border-radius:50%;background:#f6f4f8;border:0;font-size:16px;color:#1e1e1e;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;line-height:1;cursor:pointer;padding:0;box-sizing:border-box;aspect-ratio:1/1;min-width:32px;min-height:32px;max-width:32px;max-height:32px}
/* v1.2.8 (per-popup specs): the cart drawer head close is Blogger's plain
   .close — black x, NO circle — so it is deliberately NOT in the circle rule
   above; the base .cart-head .close rule (background:none, 28px) governs it. */
.cart-body{padding:18px;overflow:auto;flex:1}
/* v1.2.2 cart rows — the original's .cart-row shape (source skin values),
   rendered by the theme's own drawer markup (helpers.php), NOT WooCommerce's
   mini-cart: 88px thumb, name, .qty stepper pill, right-aligned price,
   small outlined × remove + "Remove" text button. */
.mg-cart-row{display:grid;grid-template-columns:88px 1fr;gap:16px;background:#fff;border-radius:22px;padding:14px;margin-bottom:14px;box-shadow:0 2px 5px rgba(0,0,0,.03);position:relative}
.mg-cart-row img{width:88px;height:88px;object-fit:contain;border-radius:17px;background:#f8f8fa}
.mg-cart-main{min-width:0}
.mg-cart-main h3{margin:4px 0 8px;font-size:16px;line-height:1.3}
.mg-cart-main h3 a{color:var(--ink);text-decoration:none;font-weight:600}
.mg-cart-main .variation{font-size:12px;color:#875ff5;font-weight:600;margin:2px 0 0}
.mg-cart-main .variation dt,.mg-cart-main .variation dd{display:inline;margin:0}
.mg-cart-main .variation dd{margin-right:8px}
.mg-cart-row .qty{display:inline-flex;align-items:stretch;border:1px solid #ddd;border-radius:25px;overflow:hidden;background:#fff;height:38px;margin:10px 0}
.mg-cart-row .qty button{flex:0 0 32px;width:32px;height:100%;border:0;background:#fff;font-size:16px;font-weight:600;line-height:1;color:#1e1e1e;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.mg-cart-row .qty button:hover{background:#875ff5;color:#fff}
.mg-cart-row .qty span{flex:1;display:flex;align-items:center;justify-content:center;min-width:28px;padding:0 4px;font-weight:700;font-size:14px;color:#875ff5}
.mg-cart-row .row-price{font-size:19px;font-weight:700;text-align:right}
.mg-cart-row .mg-arrow{width:26px;height:26px;font-size:12px}
/* v1.2.8: remove sits at the card's BOTTOM-LEFT like Blogger (was top-right in
   the third grid column). Faint circle kept; absolute so it never stretches. */
.mg-cart-remove{position:absolute;left:14px;bottom:10px;border:1px solid #efedf2;background:#f6f4f8;color:#875ff5;border-radius:50%;cursor:pointer;display:grid;place-items:center;padding:0;line-height:1;width:26px;height:26px;box-sizing:border-box;aspect-ratio:1/1}
.mg-cart-remove:hover{background:#875ff5;color:#fff;border-color:#875ff5}
.mg-cart-remove-text{display:block;background:none;border:0;color:#999;font-size:12px;cursor:pointer;padding:2px 0 0;margin-top:2px}
.mg-cart-remove-text:hover{color:#dc2626}
.cart-body .empty{text-align:center;color:#777;padding:40px 10px;font-size:14px}
.cart-bottom{padding:18px 24px;background:#fff;border-top:1px solid #eee}
.cart-total{font-weight:bold;text-align:center;font-size:20px;padding:10px;color:var(--ink)}
.checkout-btn{display:block;width:100%;border:0;border-radius:18px;background:#111;color:#fff!important;padding:17px;font-size:17px;text-align:center;font-weight:600;text-decoration:none;cursor:pointer}
.checkout-btn:hover{background:#000}
.powered{text-align:center;color:#aaa;margin-top:18px;font-size:12.5px}

/* ============ Checkout page — SOURCE: .mg-field/.mg-pay values on WC checkout ============ */
.woocommerce-checkout form.checkout{max-width:860px;margin:0 auto}
.woocommerce-checkout .col2-set{width:100%;float:none;margin-right:0}
.woocommerce-checkout #order_review,.woocommerce-checkout #order_review_heading{width:100%;float:none}
.woocommerce-checkout form .form-row label{font-size:12px;font-weight:700;margin-bottom:4px;color:#29272d;display:block}
.woocommerce-checkout form .form-row input.input-text,.woocommerce-checkout form .form-row textarea,.woocommerce-checkout form .form-row select{width:100%;border:1px solid #efedf2;border-radius:10px;padding:10px 12px;font-size:13px;outline:none;background:#fff;box-shadow:none!important}
.woocommerce-checkout form .form-row input.input-text:focus,.woocommerce-checkout form .form-row textarea:focus{border-color:#875ff5}
.woocommerce-checkout #payment .wc_payment_methods li{border:1px solid #efedf2;border-radius:10px;padding:10px;margin-bottom:8px;background:#fff}
.woocommerce-checkout #place_order{display:block;width:100%;border:0;border-radius:18px;background:#875ff5!important;color:#fff;padding:17px;font-size:17px;font-weight:600;float:none}
.woocommerce-checkout #place_order:hover{background:#6f4de0!important}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{background:#111;border-radius:18px;padding:17px;font-size:17px}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{background:#000}

/* ============ Quick View modal — SOURCE: .mg-modal family ============ */
.mg-modal{position:fixed;inset:0;background:rgba(20,16,30,.55);z-index:350;display:none;align-items:center;justify-content:center;padding:16px}
.mg-modal.open{display:flex}
.mg-modal-box{background:#fff;border-radius:16px;max-width:760px;width:100%;max-height:92vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;position:relative}
.mg-modal-close{position:absolute;top:10px;right:12px;border:0;background:#f6f4f8;width:32px;height:32px;border-radius:50%;font-size:16px;cursor:pointer;z-index:2;padding:0;box-sizing:border-box;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;line-height:1}
.mg-modal-img{width:100%;height:100%;min-height:320px;object-fit:cover}
.mg-modal-info{padding:26px}
.mg-modal-info h2{margin:0 0 8px;font-size:20px;color:var(--ink)}
.mg-qv-stars{color:#f5a623;font-size:15px;letter-spacing:2px;margin-top:6px}
.mg-modal-price{color:#875ff5;font-size:22px;font-weight:800;margin:10px 0}
.mg-qv-old{color:#b9b5c0;font-size:16px;font-weight:500;text-decoration:line-through}
.mg-qv-stock{color:#1a9e54;font-weight:600;font-size:13px;margin:2px 0 6px}
.mg-qv-acc{border-top:1px solid #efedf2;margin-top:10px}
.mg-qv-acc-h{width:100%;background:none;border:0;text-align:left;font-family:Poppins,sans-serif;font-weight:600;font-size:13.5px;padding:10px 0;cursor:pointer;display:flex;justify-content:space-between;color:#29272d}
.mg-qv-acc-c{font-size:13px;color:#55525c;line-height:1.65;padding:0 0 10px;max-height:170px;overflow:auto;white-space:pre-line}
.mg-qv-meta{font-size:12.5px;color:#77747d;margin:10px 0;line-height:1.7}
.mg-qv-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;align-items:center}
.mg-qv-actions .padd{display:inline-block;background:#875ff5;color:#fff;border:0;border-radius:22px;padding:11px 30px;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer}
.mg-qv-actions .padd:hover{background:#7c4de0}
.mg-qv-actions .mg-qv-view{display:inline-block;border:1.5px solid #875ff5;color:#875ff5;border-radius:25px;padding:8px 20px;font-size:13px;font-weight:600;text-decoration:none}
/* SOURCE: quick view carries the PDP .mg-qty stepper + a wishlist button */
.mg-qv-qty{display:inline-flex;align-items:center;border:1px solid #ddd;border-radius:25px;height:44px;background:#fff}
.mg-qv-qty button{width:34px;height:100%;border:0;background:none;font-size:17px;color:#29272d;cursor:pointer;padding:0}
.mg-qv-qty button:hover{color:#875ff5}
.mg-qv-qty .qv-n{min-width:26px;text-align:center;color:#875ff5;font-weight:700;font-size:14px}
/* v1.2.2: Quick View variation selectors reuse the PDP swatch classes
   (.mg-swatches/.mg-swatch/.mg-pill-btn); the QV group label matches the
   PDP variation label style. */
.mg-qv-swatches{margin:12px 0 4px}
.mg-qv-swatches .mg-qv-var-label{display:block;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#666;margin-bottom:6px}
.mg-qv-wishrow{margin-top:10px}
.mg-qv-wishrow .pwish{display:inline-block;width:auto;background:none;border:0;font-size:12px;color:#77747d;cursor:pointer;padding:0}
.mg-qv-wishrow .pwish.on{color:#875ff5;font-weight:700}

/* ============ Seller landing — SOURCE: .slp-* (the Blogger theme's own
   seller page, shown when the Seller Center opens; ported verbatim) ============ */
.slp-wrap{max-width:1440px;margin:0 auto}
.slp-hero{background:linear-gradient(120deg,#875ff5 0%,#875ff5 55%,#b3a0f8 100%);color:#fff;padding:56px 3%;position:relative;overflow:hidden;border-radius:14px;margin-top:18px}
.slp-hin{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;position:relative;z-index:2}
.slp-eyebrow{display:inline-block;background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.35);font-size:12px;font-weight:800;letter-spacing:2px;padding:7px 18px;border-radius:20px;margin-bottom:16px}
.slp-hero h1{font-size:40px;line-height:1.15;font-weight:800;color:#fff;margin:0}
.slp-hero p{color:#f3f0ff;font-size:15.5px;margin:14px 0 24px;line-height:1.65;max-width:460px}
.slp-cta{background:#ff9f00;color:#fff;border:0;padding:15px 48px;font-size:16.5px;font-weight:800;border-radius:12px;cursor:pointer;box-shadow:0 10px 28px rgba(200,110,0,.4);text-decoration:none;display:inline-block}
.slp-cta:hover{background:#f08c00;color:#fff}
.slp-login{display:inline-block;background:#fff;color:#1B2A4A;border:2px solid #1B2A4A;padding:12px 30px;font-size:15px;font-weight:700;border-radius:8px;text-decoration:none;margin-left:10px;vertical-align:middle}
.slp-fee{font-size:12.5px;color:#d8ecff;margin-top:12px}
.slp-hcard{background:#fff;border-radius:20px;padding:8px;box-shadow:0 24px 60px rgba(15,70,130,.3)}
.slp-hc-in{background:linear-gradient(150deg,#f0f8ff,#e4f2fe);border-radius:14px;padding:22px}
.slp-hstat{display:flex;justify-content:space-between;align-items:center;padding:12px 4px;border-bottom:1px dashed #c4def5}
.slp-hstat:last-child{border:0}
.slp-hstat b{font-size:22px;color:#143a66}
.slp-hstat b span{color:#ff9f00}
.slp-hstat small{color:#64748b;font-size:12px;text-align:right;max-width:150px}
.slp-sec{padding:52px 0}
.slp-sec h2{font-size:28px;font-weight:800;color:#143a66;text-align:center;margin:0}
.slp-sub{text-align:center;color:#64748b;margin:10px auto 30px;max-width:560px;font-size:14.5px}
.slp-bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.slp-bcard{background:#fff;border-radius:18px;padding:28px 24px;box-shadow:0 8px 28px rgba(46,155,230,.08);border:1px solid #f3f0ff;text-align:center}
.slp-ic{width:60px;height:60px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 14px}
.slp-bcard h3{font-size:16.5px;margin:0 0 8px;color:#143a66}
.slp-bcard p{font-size:13.5px;color:#64748b;line-height:1.65;margin:0}
.slp-stepswrap{background:#fff;border-top:1px solid #f3f0ff;border-bottom:1px solid #f3f0ff}
.slp-strow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.slp-st{background:#f4f8fc;border-radius:18px;padding:26px 22px;border:1px solid #f3f0ff}
.slp-n{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#9d7ff7,#875ff5);color:#fff;font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;box-shadow:0 8px 18px rgba(46,155,230,.35)}
.slp-st h3{font-size:16px;margin:0 0 8px;color:#143a66}
.slp-st p{font-size:13px;color:#64748b;line-height:1.65;margin:0}
.slp-trust{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:30px 0}
.slp-tchip{background:#fff;border:1px solid #f3f0ff;font-size:13px;font-weight:600;color:#334155;padding:10px 18px;border-radius:26px;box-shadow:0 3px 10px rgba(46,155,230,.07)}
.slp-tchip b{color:#16a34a;margin-right:6px}
.slp-fcta{background:linear-gradient(120deg,#875ff5,#9d7ff7);border-radius:24px;padding:48px 28px;text-align:center;color:#fff;box-shadow:0 20px 50px rgba(46,155,230,.3)}
.slp-fcta h2{font-size:29px;margin:0 0 10px;color:#fff}
.slp-fcta p{color:#f3f0ff;margin:0 0 24px;font-size:14.5px}

/* ============ Seller Center — SOURCE: .sl-* overlay ported to a page ============ */
.sl-wrap{max-width:640px;margin:26px auto}
.sl-box{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 30px 80px rgba(15,70,130,.18);border:1px solid #eee}
.sl-head{background:linear-gradient(120deg,#875ff5,#9d7ff7);color:#fff;padding:22px 24px;display:flex;justify-content:space-between;align-items:center}
.sl-head h2{font-size:20px;margin:0;color:#fff}
.sl-head small{color:#f3f0ff;font-size:12px}
.sl-pbar{height:6px;background:#f3f0ff}
.sl-pbar i{display:block;height:100%;background:linear-gradient(90deg,#ff9f00,#ffc14d);width:33%;transition:width .4s}
.sl-slabels{display:flex;border-bottom:1px solid #f3f0ff;background:#fbfdff}
.sl-slabels div{flex:1;text-align:center;padding:11px 4px;font-size:12px;font-weight:700;color:#9ca3af}
.sl-slabels div.on{color:#875ff5}
.sl-slabels div.done{color:#16a34a}
.sl-body{padding:26px 24px}
.sl-pane{display:none}
.sl-pane.on{display:block}
.sl-fld{margin-bottom:14px}
.sl-fld label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:#143a66}
.sl-fld label i{color:#dc2626;font-style:normal}
.sl-fld input,.sl-fld textarea,.sl-fld select{width:100%;padding:12px 13px;border:1.5px solid #dbe7f3;border-radius:12px;font-size:14px;background:#fbfdff;box-sizing:border-box;margin:0;box-shadow:none!important}
.sl-fld input:focus,.sl-fld textarea:focus{border-color:#875ff5;outline:none}
.sl-helper{font-size:12px;color:#64748b;margin-top:5px}
.sl-ferr{color:#dc2626;font-size:12px;margin-top:5px;display:none;font-weight:600}
.sl-f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sl-paybox{background:#fff7ed;border:1.5px solid #fdba74;border-radius:14px;padding:14px;font-size:13px;margin-bottom:15px;line-height:1.7}
.sl-paybox b{color:#c2410c}
.sl-docgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sl-docbox{border:2px dashed #b9d4ec;border-radius:14px;padding:16px 10px;text-align:center;cursor:pointer;background:#f6fbff;min-height:136px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.sl-docbox:hover{border-color:#875ff5;background:#eef7ff}
.sl-docbox input{display:none}
.sl-dic{font-size:30px}
.sl-docbox b{font-size:12.5px;display:block;margin:6px 0 3px;color:#143a66}
.sl-docbox small{color:#64748b;font-size:11px}
.sl-docbox .sl-fname{font-size:11px;color:#16a34a;font-weight:600;margin-top:4px;word-break:break-all}
.sl-docbox .sl-prev{max-width:100%;max-height:105px;border-radius:10px;margin-top:8px;display:none}
.sl-docbox.has .sl-prev{display:block}
.sl-docbox.has .sl-dic,.sl-docbox.has small{display:none}
.sl-docbox.has{border-style:solid;border-color:#16a34a;background:#f0fdf4}
.sl-agreebox{border:1px solid #e5e7eb;border-radius:14px;max-height:210px;overflow-y:auto;padding:15px;font-size:13px;line-height:1.7;background:#fafbfc;margin-bottom:14px}
.sl-agreebox h4{margin:0 0 8px;font-size:13px;color:#143a66}
.sl-agreebox ol{padding-left:19px;margin:0}
.sl-agreebox li{margin-bottom:8px}
.sl-chk{display:flex;gap:10px;align-items:flex-start;background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:14px;padding:14px;margin-bottom:14px;cursor:pointer;font-size:13px}
.sl-nav{display:flex;gap:10px;margin-top:16px}
.sl-nav button{flex:1;padding:13px;border-radius:12px;font-size:14.5px;font-weight:800;cursor:pointer;border:0}
.sl-back{background:#f3f0ff;color:#475569}
.sl-next{background:linear-gradient(120deg,#ff9f00,#ffab1f);color:#fff;box-shadow:0 6px 18px rgba(255,159,0,.35)}
.sl-notice{display:none;background:#fff7ed;border:1.5px solid #fdba74;border-radius:14px;padding:14px;font-size:13.5px;line-height:1.7;margin-bottom:16px}
.sl-notice.show{display:block}
.sl-ok{text-align:center;padding:12px 0}
.sl-big{width:82px;height:82px;border-radius:50%;background:#f0fdf4;display:flex;align-items:center;justify-content:center;font-size:40px;margin:0 auto;box-shadow:0 10px 26px rgba(22,163,74,.25);color:#16a34a}
.sl-ok h3{font-size:20px;margin:14px 0 8px;color:#143a66}
.sl-sid{display:inline-block;background:#f0fdf4;border:2px dashed #16a34a;color:#15803d;font-weight:800;font-size:18px;padding:10px 26px;border-radius:14px;margin:12px 0;letter-spacing:1px}


/* v1.2.6 (F21): checkout modal — the original's #mgCo look: overlay
   rgba(20,16,30,.55) (from .mg-modal), white box radius 16px, max-width
   520px, padding 26px, x close top-right (.mg-modal-close spec), fields
   with 12px/700 labels, inputs border #efedf2 radius 10px padding 10-12px
   font 13px, focus border #875ff5, COD-only payment row, Place Order
   full-width radius 18px padding 17px font 17px in theme purple #875ff5
   (deliberate: the original's button is #111, the WP theme combination
   is purple). COD ONLY — honest scope: it is the store's only enabled
   gateway; JazzCash/EasyPaisa are NOT offered because they are not
   configured gateways and offering them would be fake. */
.mg-co-box{background:#fff;border-radius:16px;max-width:520px;width:100%;max-height:92vh;overflow:auto;position:relative;padding:26px}
.mg-co-box h2{margin:0 0 6px;font-size:20px;font-weight:700;color:var(--ink)}
.mg-co-box h3{margin:18px 0 10px;font-size:15px;font-weight:700;color:var(--ink)}
.mg-co-sub{color:#777;font-size:13px;margin:0 0 14px}
.mg-co-items{border:1px solid #efedf2;border-radius:12px;padding:6px 14px;margin-bottom:6px}
.mg-co-item{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #f6f4f8;font-size:13.5px}
.mg-co-item:last-child{border-bottom:0}
.mg-co-item .mg-co-qty{color:#999}
.mg-co-totals{font-size:14px}
.mg-co-totals .mg-co-row{display:flex;justify-content:space-between;padding:6px 0}
.mg-co-totals .mg-co-total{font-weight:700;font-size:16px;border-top:1px solid #efedf2;margin-top:6px;padding-top:12px}
.mg-co-field{margin-bottom:12px}
.mg-co-field label{display:block;font-size:12px;font-weight:700;margin-bottom:4px;color:#29272d}
.mg-co-field input,.mg-co-field textarea{width:100%;border:1px solid #efedf2;border-radius:10px;padding:10px 12px;font-size:13px;outline:none;box-sizing:border-box;box-shadow:none!important}
.mg-co-field input:focus,.mg-co-field textarea:focus{border-color:#875ff5}
.mg-co-field .mg-co-err{color:#dc2626;font-size:12px;margin-top:5px;display:none;font-weight:600}
.mg-co-pay{display:flex;gap:10px;margin:12px 0}
.mg-co-pay label{flex:1;border:1px solid #efedf2;border-radius:10px;padding:10px;text-align:center;font-size:12px;font-weight:700;cursor:pointer}
.mg-co-pay input{display:none}
.mg-co-pay input:checked+span{color:#875ff5}
.mg-co-pay label:has(input:checked){border-color:#875ff5;background:#faf8ff}
/* v1.2.8: Blogger's Place Order is a BLACK pill (.checkout background #111). */
.mg-co-submit{display:block;width:100%;border:0;border-radius:18px;background:#111;color:#fff;padding:17px;font-size:17px;font-weight:600;cursor:pointer}
.mg-co-submit:hover{background:#000}
.mg-co-total-line{text-align:center;font-size:16px;font-weight:700;color:#1e1e1e;margin:16px 0 4px}
.mg-co-submit:disabled{opacity:.55;cursor:default}
.mg-co-error{display:none;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:10px;padding:10px 14px;font-size:13px;margin-bottom:14px}
.mg-co-error.show{display:block}
.mg-co-success{text-align:center;padding:10px 0}
.mg-co-success h3{font-size:19px}
.mg-co-success p{color:#555;font-size:14px;line-height:1.7}
.mg-co-fallback{text-align:center;color:#999;font-size:12.5px;margin:16px 0 0}
.mg-co-fallback a{color:#875ff5;font-weight:600}


/* v1.2.6 (H2): seller choice + dashboard shell. Choice buttons mirror the
   original's mgSellerChoice (primary + ghost). Dashboard reuses the
   original's dark sdb- stat/card language, on the seller's own real data. */
.sl-choice{text-align:center;padding:12px 0}
.sl-choice p{color:#64748b;font-size:14px;margin:0 0 18px}
.mg-sc-btn{display:block;width:100%;padding:14px;border-radius:12px;font-size:15px;font-weight:800;cursor:pointer;text-decoration:none;margin-bottom:10px;border:0;box-sizing:border-box;text-align:center}
.mg-sc-btn.primary{background:#875ff5;color:#fff}
.mg-sc-btn.ghost{background:#fff;color:#875ff5;border:2px solid #875ff5}
.sdb-wrap{max-width:860px;margin:26px auto}
.sdb-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.sdb-stat{background:#111c38;border:1px solid #1e2c52;border-radius:14px;padding:16px}
.sdb-stat small{font-size:11px;color:#8b98b8;display:block;margin-bottom:7px}
.sdb-stat b{font-size:22px;color:#fff}
.sdb-card{background:#111c38;border:1px solid #1e2c52;border-radius:14px;overflow:hidden;margin-bottom:16px}
.sdb-chead{padding:13px 18px;border-bottom:1px solid #1b2745;font-size:14px;color:#fff;font-weight:700}
.sdb-body{padding:16px 18px;color:#cbd5e1;font-size:13.5px;line-height:1.7}
.sdb-body a{color:#a78bfa;font-weight:600}

/* v1.2.6 (H3): front-end Admin dashboard — the original's #mg-dashboard
   stat-card language (radius 16, padding 18, 24px/700 values) on real
   WooCommerce data only; empty states show "—", never invented numbers. */
.mg-admin-wrap{max-width:1100px;margin:26px auto}
.mg-admin-wrap h1{font-size:26px;font-weight:700;color:#1e1e1e;margin:0 0 18px}
.mg-admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.mg-admin-card{background:#fff;border-radius:16px;padding:18px;box-shadow:0 1px 3px rgba(0,0,0,.04);border:1px solid #efedf2}
.mg-admin-label{font-size:12.5px;color:#64748b;font-weight:500}
.mg-admin-value{font-size:24px;font-weight:700;color:#1e1e1e;margin-top:6px}
.mg-admin-note{font-size:12px;color:#999;margin-top:4px}
.mg-admin-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #efedf2;border-radius:12px;overflow:hidden}
.mg-admin-table th,.mg-admin-table td{padding:12px 14px;text-align:left;border-bottom:1px solid #f3f0ff;font-size:13.5px}
.mg-admin-table th{background:#faf9fc;font-weight:600}
.mg-admin-login{background:#fff;border:1px solid #efedf2;border-radius:14px;padding:30px;text-align:center}
.mg-admin-login a{color:#875ff5;font-weight:700}
.mg-admin-wrap h2{font-size:19px;font-weight:700;color:#1e1e1e;margin:0 0 14px}
.mg-admin-wrap p a{color:#875ff5;font-weight:600}
@media(max-width:760px){.sdb-stats{grid-template-columns:repeat(2,1fr)}.mg-admin-stats{grid-template-columns:repeat(2,1fr)}}

/* ============ Wishlist page — SOURCE: .mg-wish-page/.mg-wish-table ============ */
.mg-wish-page{max-width:1200px;margin:0 auto;padding:0 20px 60px}
.mg-wish-page h1{font-size:28px;font-weight:700;color:#1e1e1e;margin:20px 0}
.mg-wish-scroll{overflow-x:auto;border:1px solid #efedf1;border-radius:8px}
.mg-wish-table{width:100%;min-width:640px;border-collapse:collapse;background:#fff}
.mg-wish-table th,.mg-wish-table td{padding:14px 16px;text-align:left;border-bottom:1px solid #efedf1;font-size:14px;color:#1e1e1e}
.mg-wish-table thead th{font-weight:600;background:#faf9fc}
.mg-wish-table img{width:64px;height:64px;object-fit:cover;border-radius:8px;display:block}
.mg-wish-table .mg-wt-name{color:#1e1e1e;text-decoration:none;font-weight:600}
.mg-wish-table .mg-wt-name:hover{color:#875ff5}
.mg-stock-in{color:#22a355;font-weight:600;white-space:nowrap}
.mg-stock-out{color:#dc2626;font-weight:600;white-space:nowrap}
.mg-wish-add{background:#f2f0f5;color:#1e1e1e;border:0;border-radius:8px;padding:10px 22px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block}
.mg-wish-add:hover{background:#875ff5;color:#fff}
.mg-wish-remove{background:none;border:0;color:#dc2626;font-size:17px;cursor:pointer}
.mg-wish-empty{text-align:center!important;padding:40px!important;color:#777}

/* ============ Info pages ============ */
.mg-info-page{max-width:860px;margin:26px auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px 34px}
.mg-info-page h1{font-size:25px;font-weight:700;color:#1e1e1e;margin-top:0}
.mg-contact-form label{display:block;font-weight:600;font-size:13px;margin:14px 0 5px;color:#29272d}
.mg-contact-form input,.mg-contact-form textarea{width:100%;padding:10px 12px;border:1px solid #efedf2;border-radius:10px;font-size:13px;box-shadow:none!important}
.mg-contact-form button{background:#875ff5;color:#fff;border:0;border-radius:8px;padding:12px 26px;font-weight:600;cursor:pointer;margin-top:16px}

/* ============ Responsive — SOURCE breakpoints: 1100 / 1024 / 900 / 820 / 768 / 760 / 600 / 500 ============ */
@media(max-width:1100px){
}
@media(max-width:1024px){
  /* v1.2.24: Blogger shows 5 columns at 761–1024px (was 4). */
  ul.products{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:900px){
  /* v1.2.24: benefits 2-col moved to the ≤760 block (Blogger's breakpoint). */
}
@media(max-width:820px){
  .single-product div.product{padding:0 12px 40px}
  /* v1.2.24: PDP single column pinned (Blogger ≤820 layer: 1fr, gap 20) —
     gallery + summary stack full-width instead of depending on
     Storefront float stacking. */
  .single-product div.product .woocommerce-product-gallery{float:none;width:100%;margin:0 0 20px}
  .single-product div.product .summary{float:none;width:100%}
}
@media(max-width:767px){
  /* v1.2.24: newsletter collapses at Blogger's 767px breakpoint (was 820). */
  .nl-card{flex-direction:column;text-align:center;padding:25px 18px}
  .nl-left{width:100%;justify-content:center;text-align:left}
  .nl-right{width:100%}
  .nl-row{flex-direction:column}
  .nl-row input[type=submit]{width:100%;padding:12px}
}
@media(max-width:768px){
  .single-product div.product .product_title{font-size:24px}
  .single-product div.product p.price{font-size:24px}
  .single-product .flex-control-thumbs li,.single-product .flex-control-thumbs li img{width:84px!important;height:84px}
  .single-product .related.products>h2{font-size:22px}
  /* v1.2.8: related is a grid now — the old 148px flex basis is dead in a
     grid context; mobile related follows the listing's 2-column step. */
  .single-product .related ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mg-wish-page h1{font-size:22px}
  .mg-wish-table th,.mg-wish-table td{padding:10px 12px;font-size:13px}
  .mg-wish-table img{width:48px;height:48px}
  .single-product .wc-tabs li{padding:12px 16px;font-size:14px}
  .single-product .flex-control-thumbs{gap:8px;margin-top:10px}
  .single-product .flex-control-thumbs li img{padding:3px}
  .single-product div.product .woocommerce-product-gallery{margin-bottom:20px}
}
@media(max-width:760px){
  /* v1.2.5: SOURCE ≤760px action layer — the grid becomes a vertical flex
     column (no horizontal scroll row). */
  .action-grid{display:flex!important;flex-direction:column!important;gap:16px!important}
  /* v1.2.26: video-card label bar geometry — Blogger base values
     (left/right 6%, bottom 7%, padding 10px), scoped to mobile so the
     desktop label is untouched. */
  .action-label{left:6%;right:6%;bottom:7%;padding:10px}
  /* v1.2.26: side-card text follows Blogger's h2/p clamp minimums at
     phone widths (face title 20px, hyal/night titles 16px, hyal/night
     badges 11px) and the base .hero-btn (10px 24px, 14px). Scoped to
     mobile; desktop overlay sizes are untouched. Note: Blogger's hero
     text is baked into its banner images, so these are the closest
     CSS analogues, not pixel-identical baked text. */
  .mania-face .mbt-title{font-size:20px}
  .mania-hyal .mbt-title,.mania-night .mbt-title{font-size:16px}
  .mania-hyal .mbt-badge,.mania-night .mbt-badge{font-size:11px}
  .mania-banner-txt .hero-btn{padding:10px 24px;font-size:14px}
  /* SOURCE final mobile layer (b:skin override 1369): the search bar is
     always visible as a full-width second row — the header wraps and
     grows. (v1 hid the bar behind a toggle. The toggle button itself
     stays visible on mobile — see the corrected note at
     .mg-search-toggle below, v1.2.26.) */
  .header{height:auto;padding:10px 12px;gap:10px;flex-wrap:wrap}
  .brand{font-size:21px;min-width:112px}
  .brand img,.brand .custom-logo{height:40px!important;margin-right:6px!important}
  /* SOURCE ≤760px block: .brand span{font-size:16px!important} (the span's
     inline 20px is overridden in the source too — V4-HEADER-AUDIT F-H8). */
  .brand span{font-size:16px!important}
  .mg-seller-hdr{display:none}
  /* SOURCE ≤760px final cascade: .icons{gap:13px;margin-left:0;font-size:18px}
     with the earlier block's .header .icons{margin-left:auto!important}
     winning over the margin-left:0 — icons sit at the right edge
     (V4-HEADER-AUDIT F-H7). v1.2.0 had gap:10px and margin-left:0. */
  .icons{gap:13px;margin-left:auto;font-size:18px}
  .icons .count{top:-5px}
  /* v1.2.26: the search toggle IS visible on mobile in the original.
     The late .mg-search-toggle display:none rules are (0,1,0) and lose
     to the early ≤760px .icons .mg-search-toggle display:inline-flex
     !important rule (0,2,0) — and the reference video shows the
     magnifier as the first icon. The v1.2.2 "toggle is GONE" comment
     misread the cascade. Base style.css keeps it hidden on desktop. */
  .mg-search-toggle{display:inline-flex!important}
  .search{display:flex;position:relative;top:auto;left:auto;right:auto;flex:1 1 100%;order:10;box-shadow:none;padding:0;height:42px;margin:6px 0 2px}
  /* SOURCE ≤760px block: .search input{height:40px;padding:0 9px;font-size:12px}
     (the block's second input rule wins its font-size) and
     .search button{padding:7px 12px;font-size:12px} (V4-HEADER-AUDIT F-H9). */
  .search input{height:40px;padding:0 9px;font-size:12px}
  .search button{padding:7px 12px;font-size:12px}
  .header{position:sticky}
  .slp-hin{grid-template-columns:1fr}
  .slp-bgrid,.slp-strow{grid-template-columns:1fr}
  .slp-hero h1{font-size:30px}
  .slp-login{margin:10px 0 0}
  /* SOURCE ≤760px: .mania-nav{display:none!important} — on mobile the whole
     nav row is hidden in the original; the drawer opens from the hamburger.
     The ≤600px nav-inner tweaks live in the 600 block below, as in the
     source (V4-HEADER-AUDIT F-H10). v1.2.0 wrongly showed a stripped nav
     row (All Categories only) at every mobile width. */
  .mania-nav{display:none!important}
  .hamb{display:flex;align-items:center;justify-content:center;font-size:22px;color:#1e1e1e}
  /* v1.2.26: Blogger stacks .mania-hero to 1fr ONLY at ≤600px — at
     601–760px the base 3-column grid stays (v1.2.24 wrongly stacked at
     ≤760). The 1fr rule now lives in the ≤600 block below. The old
     padding-top:12px override is also dropped (base 22px has no mobile
     override in the source). The old .mania-face height:190px override
     is dropped too — Blogger keeps the 273/472 aspect on mobile, which
     is why the video's Face Serum card is so tall. */
  /* v1.2.26: dark hero text (main banner) on mobile follows Blogger's
     face-text geometry — max-width 70% (no mobile override in the
     source), h2 20px (the clamp minimum at phone widths). Glow keeps
     its base 52% max-width at 601–760px and its base clamp h2 (24px+);
     the ≤600 block below sets glow to Blogger's ≤600 values. */
  .hero-txt-dark{max-width:70%}
  .hero-txt-dark h2{font-size:20px}
  .categories{grid-template-columns:repeat(3,1fr);gap:14px 10px;margin-bottom:34px}
  /* v1.2.26: category label stays 14px (base) at 501–760px — Blogger
     drops it to 13px ONLY at ≤500 (rule moved to the ≤500 block). */
  .products{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;overflow:visible}
  .product{flex:none;padding:0 0 14px}
  /* v1.2.24 (card auto-fit): mobile image box back to square — the 140px
     fixed height sliced ~23% off square thumbnails with cover. Square box
     shows the whole thumbnail edge-to-edge: no crop, no bars, no blur. */
  .product .pimg{aspect-ratio:1/1}
  .product .pimg img{height:100%}
  /* v1.2.24: row paging is gone on mobile (all products shown), so the
     row arrows — used only by .mg-rowp paging — are hidden here. */
  .mg-arrows{display:none}
  .product h3{font-size:13px;line-height:1.3;min-height:34px;margin:10px 10px 6px}
  .product .pprice{display:grid;grid-template-columns:1fr auto;column-gap:6px;row-gap:0;align-items:center;text-align:left;margin:0 8px;font-size:14px}
  /* v1.2.26: Blogger's late mobile rule for the main price line — grid
     col 1 row 1, no wrap, tighter letter-spacing (was missing in WP). */
  .product .pprice .pmain{grid-column:1;grid-row:1;white-space:nowrap;letter-spacing:-.3px}
  .product .pprice .old{grid-column:1;grid-row:2;margin-right:0;white-space:nowrap;font-size:11px}
  .product .pprice .poff{grid-column:2;grid-row:1;justify-self:end}
  /* v1.2.24: OFF badge at Blogger's ≤760 size (was 11px / 3x9). */
  .poff{font-size:10px;padding:2px 6px}
  .product .pprice .pfree{grid-column:2;grid-row:2;justify-self:end;text-align:right;margin:0;font-size:11px}
  /* SOURCE final mobile layer: hover actions stay hidden until the card is
     tapped/focused (the always-visible rule applies only above 760px). */
  .product .phover{max-height:0;opacity:0;margin:0 10px}
  .product:active .phover,.product:focus-within .phover{max-height:130px;opacity:1;margin-top:12px}
  .product .pqv{top:70px}
  .product:active .pqv,.product:focus-within .pqv{opacity:1;visibility:visible;pointer-events:auto}
  .product .padd{padding:8px 20px;font-size:12.5px}
  .product .pwish{font-size:11px;margin-top:6px}
  .section{padding:0 2% 26px}
  /* v1.2.24: section-title 18px, testimonials scroll and copy stacking
     moved to the ≤500 block (Blogger applies them only at ≤500). */
  .footer-grid{grid-template-columns:1fr 1fr;gap:18px}
  .single-product div.product .woocommerce-product-gallery{max-width:100%}
  .mg-modal-box{grid-template-columns:1fr}
  .mg-modal-img{min-height:220px}
  .sl-f2,.sl-docgrid{grid-template-columns:1fr}
  /* v1.2.24: benefits 2-col at Blogger's ≤760 breakpoint (was ≤900). */
  .benefits{grid-template-columns:repeat(2,1fr);padding:27px 7% 42px;row-gap:20px}
  .benefit .bi{font-size:27px}
  ul.products{grid-template-columns:repeat(2,1fr);gap:10px}
}
@media(max-width:600px){
  /* v1.2.24: sticky bar compacts at Blogger's ≤600 breakpoint (was ≤760). */
  .mg-sb-title{font-size:12px}
  .mg-sb-price{font-size:13px}
  .mg-sb-add{padding:0 12px;height:42px;font-size:13px}
  .mg-sb-img{width:44px;height:44px}
  .mg-sb-qty{width:78px;height:38px}
  /* v1.2.24: main hero h2 at Blogger's ≤600 dark-text value (was 22px).
     Glow variant stays 22px — Blogger's ≤600 glow value. */
  .hero-txt-dark h2{font-size:20px}
  /* SOURCE: @media(max-width:600px){.mania-nav-inner{gap:14px;height:48px}
     .all-cats{padding:9px 14px;font-size:12px}.mania-menu{display:none}} —
     placed here (not in the 760 block) as in the source (F-H10). */
  .mania-nav-inner{gap:14px;height:48px}
  .all-cats{padding:9px 14px;font-size:12px}
  .mania-menu{display:none}
  /* v1.2.26: Blogger stacks the hero ONLY here (≤600px) — moved from
     the ≤760 block, where it wrongly stacked tablet widths too. */
  .mania-hero{grid-template-columns:1fr}
  /* Blogger ≤600: .hero-txt-glow max-width 60%, h2 22px. Dark keeps its
     ≤760 max-width 70% (no ≤600 override in the source). */
  .hero-txt-glow{max-width:60%}
  .hero-txt-glow h2{font-size:22px}
}
@media(max-width:500px){
  /* SOURCE ≤500px: .header{gap:8px}.brand{min-width:110px;font-size:20px}
     .icons{gap:10px}.search button{padding:7px 10px} (F-H11)
     + .section{padding-left:7px;padding-right:7px} (source ≤500 layer;
     with the ≤760 layer this renders 0 7px 26px, as on the original). */
  .section{padding-left:7px;padding-right:7px}
  .header{gap:8px}
  .brand{min-width:110px;font-size:20px}
  .icons{gap:10px}
  .search button{padding:7px 10px}
  /* v1.2.26: the old ≤500 glow/dark 65% rule is dropped — glow keeps
     the ≤600 block's 60% and dark keeps the ≤760 block's 70%, exactly
     as the source cascade renders them. */
  /* v1.2.24: rules Blogger applies ONLY at ≤500 (moved from ≤760/≤600). */
  .section-title{font-size:18px}
  .testimonials{grid-template-columns:repeat(3,220px);overflow-x:auto}
  .copy{display:block}
  .copy span{display:block;margin:7px 0}
  .categories{gap:12px 8px}
  /* Brand SHOP small: 10px → 6px at ≤500. !important is required — the
     header renders it with an inline 10px style. */
  .brand small{font-size:6px!important}
  .benefits{padding:25px 7% 42px}
  .benefit strong{font-size:12px}
  .benefit small{font-size:10px}
  /* v1.2.26 (moved from ≤760): Blogger ≤500 category label 13px. */
  .category span{font-size:13px}
}
@media(hover:none) and (min-width:761px),(pointer:coarse) and (min-width:761px){
  .product .phover{max-height:none;opacity:1;margin-top:12px}
  .product .pqv{display:none}
}

/* ================= v1.2.8 ================= */
/* ACCOUNT POPUP (Blogger spec: centered tabbed popup; close = plain grey x,
   NO circle — unlike modal closes. Google button OMITTED: no installed plugin
   provides a real Google login route, and a dead button would be fake.) */
.mg-account-box{background:#fff;border-radius:16px;max-width:420px;width:100%;max-height:92vh;overflow:auto;position:relative;padding:26px;box-sizing:border-box}
.mg-account-close{position:absolute;top:12px;right:14px;border:0;background:none;font-size:22px;color:#999;cursor:pointer;line-height:1;padding:0}
.mg-account-close:hover{color:#1e1e1e}
.mg-ac-tabs{display:flex;gap:6px;align-items:center;margin:0 0 18px}
.mg-ac-tab{border:0;background:none;font-family:Poppins,Arial,sans-serif;font-size:15px;font-weight:600;color:#999;padding:10px 22px;border-radius:25px;cursor:pointer}
.mg-ac-tab.on{background:#875ff5;color:#fff}
.mg-ac-pane{display:none}
.mg-ac-pane.on{display:block}
.mg-ac-field{margin-bottom:12px}
.mg-ac-field label{display:block;font-size:12px;font-weight:700;margin-bottom:4px;color:#29272d}
.mg-ac-field input{width:100%;border:1px solid #efedf2;border-radius:10px;padding:10px 12px;font-size:13px;outline:none;box-sizing:border-box;box-shadow:none!important}
.mg-ac-field input:focus{border-color:#875ff5}
.mg-ac-submit{display:block;width:100%;border:0;border-radius:18px;background:#875ff5;color:#fff;padding:14px;font-size:16px;font-weight:600;cursor:pointer;margin-top:6px}
.mg-ac-submit:hover{background:#6f4de0}
.mg-ac-submit:disabled{opacity:.55;cursor:default}
.mg-ac-forgot{display:block;text-align:center;color:#875ff5;font-size:13px;font-weight:600;text-decoration:none;margin-top:12px}
.mg-ac-error{display:none;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:10px;padding:10px 14px;font-size:13px;margin-bottom:12px}
.mg-ac-error.show{display:block}
.mg-ac-note{font-size:12.5px;color:#999;text-align:center;margin-top:12px}

/* ================= v1.2.23 ================= */
/* ACCOUNT POPUP = Blogger spec. Every rule below is scoped to #mgAccount so
   the seller/admin login cards that reuse .mg-ac-field/.mg-ac-submit/
   .mg-ac-error/.mg-ac-note keep their own styling untouched. The shared
   .mg-modal overlay rule is NOT changed — the account modal's own
   background/z-index come from the #mgAccount rule here. */
#mgAccount{background:rgba(15,40,70,.55);z-index:2000}
#mgAccount .mg-account-box{max-width:380px;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.25);max-height:none;overflow:visible}
#mgAccount .mg-account-close{top:10px;font-size:26px;color:#77747d}
#mgAccount .mg-account-close:hover{color:#77747d}
#mgAccount .mg-ac-tabs{gap:8px;align-items:stretch;margin:0 0 20px}
#mgAccount .mg-ac-tab{flex:1;background:#FDFBF7;font-weight:700;padding:10px;border-radius:10px;color:inherit}
#mgAccount .mg-ac-tab.on{background:#875ff5;color:#fff}
#mgAccount .mg-ac-field{margin-bottom:10px}
#mgAccount .mg-ac-field input{font-size:15px;border-color:#dadce0;padding:12px 14px}
#mgAccount .mg-ac-submit{border-radius:10px;padding:13px;font-weight:700;margin-top:0}
#mgAccount .mg-ac-submit:hover{background:#7449e6}
#mgAccount .mg-ac-forgot{margin-top:10px}
/* Per-pane errors (Blogger .aerr): plain red text below the inputs, above
   the button; green only for the forgot-password success line. */
.mg-ac-perr{color:#d93025;font-size:13px;min-height:18px;margin-bottom:6px}
.mg-ac-perr.mg-ok{color:#16a34a}
/* Signed-in account dropdown (Blogger #mgAcctDrop). */
.mg-acct-chip{width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid #eee9f5;color:#875ff5;font-family:Poppins,Arial,sans-serif;font-size:16px;font-weight:800;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.mg-acct-drop{position:fixed;top:64px;right:14px;background:#fff;border:1px solid #eee9f5;border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.16);padding:14px;z-index:400;width:230px;box-sizing:border-box;display:none}
.mg-acct-drop.open{display:block}
.mg-acct-name{font-weight:700;font-size:14px;color:#1e1e1e}
.mg-acct-email{font-size:12px;color:#888;word-break:break-all;margin:2px 0 12px}
.mg-acct-seller{display:block;width:100%;background:#f4f1fa;color:#875ff5;border:0;border-radius:9px;padding:10px;font-weight:600;font-size:inherit;text-align:center;text-decoration:none;margin-bottom:8px;box-sizing:border-box}
.mg-acct-logout{display:block;width:100%;background:#875ff5;color:#fff;border:0;border-radius:9px;padding:10px;font-weight:600;font-size:inherit;cursor:pointer}

/* SELLER CENTER — NEW professional design (owner 14:02: new + nice, functions
   like Blogger). Structure/IDs kept so the wizard JS keeps working; only the
   skin is new. Real facts kept: Rs 1,000 fee, 12% commission, Monday payouts,
   24h dispatch, WhatsApp orders, 7-day returns. */
.slp-hero{background:linear-gradient(115deg,#2b1a5e 0%,#875ff5 58%,#a78bfa 100%);border-radius:20px}
.slp-hcard{box-shadow:0 24px 60px rgba(20,10,60,.35)}
.slp-hc-in{background:#fff;border-radius:14px;padding:10px 22px;display:grid;grid-template-columns:repeat(2,1fr);gap:4px 20px}
.slp-hstat{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 4px;border-bottom:1px solid #f3f0ff}
.slp-hstat b{font-size:24px;color:#1e1e1e}
.slp-hstat b span{color:#875ff5}
.slp-hstat small{color:#64748b;font-size:12px;text-align:left;max-width:none}
.sl-box{box-shadow:0 20px 60px rgba(30,20,80,.14)}
.sl-head{position:relative}
.sl-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.22);border:0;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;box-sizing:border-box;aspect-ratio:1/1}
.sl-close:hover{background:rgba(255,255,255,.35)}
.sl-choice{text-align:center;padding:10px 0}
.sl-choice p{color:#475569;font-size:14px;margin:0 0 18px}
.mg-sc-btn{display:inline-block;padding:13px 26px;border-radius:12px;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;border:0}
.mg-sc-btn.primary{background:#875ff5;color:#fff}
.mg-sc-btn.ghost{background:#f3f0ff;color:#875ff5;margin-left:10px}
.sl-login-form{border-top:1px solid #f3f0ff;margin-top:16px;padding-top:16px}
.sl-login-form h3{font-size:16px;margin:0 0 12px;color:#1e1e1e}
.sdb-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 16px}
.sdb-stat{background:#fff;border:1px solid #eee9f5;border-radius:16px;padding:18px;box-shadow:0 4px 18px rgba(30,20,80,.06)}
.sdb-stat small{display:block;color:#64748b;font-size:12px;margin-bottom:6px}
.sdb-stat b{font-size:20px;color:#1e1e1e}
.sdb-card{background:#fff;border:1px solid #eee9f5;border-radius:16px;box-shadow:0 4px 18px rgba(30,20,80,.06);overflow:hidden}
.sdb-chead{background:#f8f7ff;padding:14px 20px;font-weight:700;color:#1e1e1e;border-bottom:1px solid #eee9f5}
.sdb-body{padding:18px 20px;font-size:14px;color:#444;line-height:1.7}
.mg-chart-bars{display:flex;align-items:flex-end;gap:10px;height:130px;padding:10px 4px 0;border-bottom:1px solid #eee9f5}
.mg-chart-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.mg-chart-bar i{display:block;width:100%;max-width:34px;background:linear-gradient(180deg,#a78bfa,#875ff5);border-radius:6px 6px 0 0}
.mg-chart-bar span{font-size:11px;color:#64748b}
.mg-chart-bar b{font-size:11px;color:#1e1e1e}
.mg-data-table{width:100%;border-collapse:collapse;font-size:13.5px}
.mg-data-table th{text-align:left;color:#64748b;font-size:12px;padding:10px 8px;border-bottom:1px solid #eee9f5}
.mg-data-table td{padding:10px 8px;border-bottom:1px solid #f6f4f8;color:#334155}
.mg-data-table td a{color:#875ff5;text-decoration:none;font-weight:600}
@media(max-width:760px){.sdb-stats{grid-template-columns:repeat(2,1fr)}.slp-hc-in{grid-template-columns:1fr}}

/* ADMIN DASHBOARD — NEW professional design (owner 14:02: better than Blogger,
   graphs + reports, REAL data only — no demo numbers anywhere). */
.mg-admin-wrap{max-width:1200px;margin:0 auto;padding:10px 0 40px}
.mg-admin-wrap h1{font-size:26px;font-weight:800;color:#1e1e1e;margin:0 0 20px}
.mg-admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 16px}
.mg-admin-card{background:#fff;border:1px solid #eee9f5;border-radius:16px;padding:20px;box-shadow:0 4px 18px rgba(30,20,80,.06)}
.mg-admin-label{color:#64748b;font-size:12.5px;margin-bottom:8px}
.mg-admin-value{font-size:26px;font-weight:800;color:#1e1e1e}
.mg-admin-note{color:#94a3b8;font-size:12px;margin-top:6px}
.mg-admin-charts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0 0 16px}
.mg-admin-chart{background:#fff;border:1px solid #eee9f5;border-radius:16px;padding:18px 20px;box-shadow:0 4px 18px rgba(30,20,80,.06)}
.mg-admin-chart h3{font-size:15px;margin:0 0 12px;color:#1e1e1e}
.mg-admin-chart .mg-chart-empty{color:#94a3b8;font-size:13px;padding:30px 0;text-align:center}
.mg-admin-login{max-width:420px;margin:40px auto;background:#fff;border:1px solid #eee9f5;border-radius:20px;padding:28px;box-shadow:0 20px 60px rgba(30,20,80,.12);text-align:center}
.mg-admin-login .mg-admin-m{width:56px;height:56px;border-radius:14px;background:#875ff5;color:#fff;font-size:28px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.mg-admin-login h2{font-size:20px;margin:0 0 4px;color:#1e1e1e}
.mg-admin-login .mg-admin-lock{color:#64748b;font-size:13px;margin:0 0 18px}
@media(max-width:760px){.mg-admin-stats,.mg-admin-charts{grid-template-columns:1fr}}

/* v1.2.8: admin tables (recent orders) — same clean skin as the seller tables. */
.mg-admin-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #eee9f5;border-radius:16px;overflow:hidden;font-size:13.5px;box-shadow:0 4px 18px rgba(30,20,80,.06)}
.mg-admin-table th{text-align:left;color:#64748b;font-size:12px;padding:12px;border-bottom:1px solid #eee9f5}
.mg-admin-table td{padding:12px;border-bottom:1px solid #f6f4f8;color:#334155}

/* ============ v1.2.10: Sales toast — Blogger #mgSalesToast geometry ============
   Fixed bottom-left card, 48x48 image, bold line + product line + time ago,
   x close. Look/timing match Blogger exactly; the DATA comes from
   MangwaoData.salesToast (see functions.php mangwao_sales_toast_data):
   transitional placeholder pairs now, real WooCommerce orders after the
   10-order threshold — never a fabricated real order. */
#mgSalesToast{position:fixed;left:16px;bottom:16px;z-index:9000;background:#fff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.15);padding:12px 14px;display:flex;align-items:center;gap:10px;max-width:300px;transform:translateY(150%);transition:transform .4s ease}
#mgSalesToast.show{transform:translateY(0)}
#mgSalesToast img{width:48px;height:48px;object-fit:cover;border-radius:8px;flex:none}
#mgSalesToast b{font-size:13px;color:#1e1e1e}
#mgSalesToastBody div{font-size:12px;color:#555}
#mgSalesToastBody small{font-size:11px;color:#999}
#mgSalesToastClose{cursor:pointer;color:#999;font-size:18px;margin-left:4px;line-height:1}

/* v1.2.10 (comparison defect 10): the live-search dropdown now matches
   Blogger's suggestion pattern — thumbnail + title + SKU + purple price.
   The SKU line and the modal-scoped purple price are modal-only; cards,
   QV and PDP prices are untouched. */
.mg-smodal-sku{font-size:11px;color:#999;text-align:center;margin:0 8px 2px}
.mg-search-modal .product .pprice .pmain{color:#875ff5}

/* v1.2.11 (PDP left alignment, first piece of A-to-Z exact Blogger PDP):
   Blogger post detail is LEFT-aligned throughout; WP single-product
   inherited text-align:center from the generic .product card rule, which
   centred the summary title/price/short-desc and tab headings. Scope is
   strictly the single-product summary + tabs inside div.product, so shop
   cards and related cards (outside div.product) keep their centred card
   text, and the related heading stays centred like Blogger. */
.single-product div.product .summary,
.single-product div.product .entry-summary,
.single-product div.product .product_title,
.single-product div.product p.price,
.single-product div.product span.price,
.single-product div.product .woocommerce-product-details__short-description,
.single-product div.product .mg-pdp-short-title,
.single-product div.product .product_meta,
.single-product div.product .mg-love,
.single-product div.product .mg-love h4,
.single-product div.product .mg-paysecure,
.single-product div.product .mg-paysecure h4,
.single-product div.product .mg-share,
.single-product div.product .woocommerce-Tabs-panel,
.single-product div.product .woocommerce-Tabs-panel h2,
.single-product div.product .woocommerce-Tabs-panel h3,
.single-product div.product .woocommerce-Tabs-panel p{text-align:left}

/* v1.2.12 (PDP lower part, owner 17:50: description panel + related still not Blogger-like):
   - Description panel: force FULL width, no float, and LEFT for every text
     element inside it (headings, paragraphs, lists, spans) with !important,
     so no inherited centre rule and no inline centre on a text element can
     win. Image containers keep their own inline centre (images are centred
     in the Blogger post body too) because this rule does not target img
     wrappers with !important on divs.
   - Related: heading CENTRE, full width, no float; section full width;
     card title / Add to cart / Wishlist explicitly centre inside related
     only (shop cards untouched — they already share .product centre). */
.single-product div.product .woocommerce-tabs{width:100%!important;float:none!important;clear:both!important}
.single-product div.product .woocommerce-Tabs-panel{width:100%!important;float:none!important;margin-left:0!important;margin-right:0!important;text-align:left!important}
.single-product div.product .woocommerce-Tabs-panel h1,.single-product div.product .woocommerce-Tabs-panel h2,.single-product div.product .woocommerce-Tabs-panel h3,.single-product div.product .woocommerce-Tabs-panel h4,.single-product div.product .woocommerce-Tabs-panel p,.single-product div.product .woocommerce-Tabs-panel li,.single-product div.product .woocommerce-Tabs-panel ul,.single-product div.product .woocommerce-Tabs-panel ol,.single-product div.product .woocommerce-Tabs-panel span{text-align:left!important}
body.single-product section.related.products{width:100%!important;float:none!important;clear:both!important;text-align:center}
body.single-product section.related.products>h2,body.single-product .related.products>h2,body.single-product section.related>h2{display:block!important;width:100%!important;float:none!important;text-align:center!important;margin-left:auto!important;margin-right:auto!important}
body.single-product section.related ul.products li.product .woocommerce-loop-product__title,body.single-product section.related ul.products li.product h3{text-align:center}
body.single-product section.related ul.products li.product .padd,body.single-product section.related ul.products li.product .pwish{text-align:center}

/* v1.2.13 (owner 17:52-17:53: side social rail + purchase toast size):
   - Social rail: Blogger rail links are BARE 18px brand-colour icons
     (Facebook #1877f2, X #111, Pinterest #e60023, WhatsApp #25d366),
     no 40px white circles, no border/shadow. WP had added 40px circles
     with grey icons — that is why the rail looked bigger. This rule
     removes the circles and restores 18px brand icons, container
     geometry (left 12px, pill, gap 10px, padding 10px 8px) unchanged.
   - Purchase toast: Blogger geometry (48px image, padding 12/14,
     max-width 300px, fonts 13/12/11) was already copied, but WP
     product titles are long, so they wrapped to 2-3 lines and made
     the box taller/wider than Blogger's short-name toasts. Keep the
     geometry, but stop the title wrapping: single line + ellipsis,
     so the box stays at Blogger height (~72px). */
.mg-socrail a{width:auto!important;height:auto!important;border:0!important;background:transparent!important;box-shadow:none!important;opacity:.85}
.mg-socrail a:hover{opacity:1}
.mg-socrail a svg{width:18px!important;height:18px!important}
.mg-socrail a:nth-child(1){color:#1877f2}
.mg-socrail a:nth-child(2){color:#111}
.mg-socrail a:nth-child(3){color:#e60023}
.mg-socrail a:nth-child(4){color:#25d366}
#mgSalesToastBody{min-width:0;flex:1}
#mgSalesToastBody b,#mgSalesToastBody div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* v1.2.14 (verification 18:03: related heading + pagination current/Next still not Blogger-like):
   Previous centre/purple rules were in the file but did not win on screen,
   so these are !important and use the broadest matching selectors:
   related heading by element + class, pagination current by both
   span.current and .page-numbers.current. No other element is touched. */
.single-product section.related h2,.single-product .related h2,body.single-product section.related.products h2{text-align:center!important;display:block!important;width:100%!important;float:none!important;margin-left:auto!important;margin-right:auto!important}
.mg-listing .woocommerce-pagination ul li span.current,.mg-listing .woocommerce-pagination ul li .page-numbers.current,.mg-listing .woocommerce-pagination ul li span.page-numbers.current{background:#875ff5!important;border-color:#875ff5!important;color:#fff!important}

/* v1.2.15 (owner 18:50, 3 pieces):
   (a) PDP PRICE EXACT — rendered comparison 18:50 (CeraVe, same product both
   sites): Blogger price ~26-28px bold/extra-bold vivid purple Poppins;
   WP rendered only ~18-20px normal/medium despite code 28px/800, so the
   price now gets !important + explicit Poppins on every price node.
   Struck del stays (WP sale info; Blogger info column has no struck price
   — disclosed deviation, size kept proportional at 20px/16px mobile).
   (b) SALES TOAST STAYS — CORRECTION 18:53: the 18:50 removal is reverted;
   toast markup/JS/geometry from v1.2.13 remain untouched.
   (c) RELATED MOBILE + RAIL MOBILE — user screenshot 18:50 (Lipstick Set
   MG-00983, phone): related cards cut off on the right and heading left;
   side rail icons overlapped description text on mobile despite the
   ≤900px display:none rule, so both get !important mobile rules:
   related grid forced to 2 columns min-width:0 with section overflow
   hidden, heading centre !important, rail hidden !important ≤900px. */
.single-product div.product p.price,.single-product div.product span.price,.single-product div.product .price ins,.single-product div.product .price .woocommerce-Price-amount{font-size:28px!important;font-weight:800!important;font-family:Poppins,Arial,sans-serif!important;color:#875ff5!important;line-height:1.2}
.single-product div.product .price del{font-size:20px!important;font-weight:400!important;color:#999!important}
/* v1.2.19 (cut-price fix, 10 PDPs par verify): v1.2.15 ka price rule
   .price .woocommerce-Price-amount{...28px/800/#875ff5!important} del ke
   ANDAR wale amount span par bhi lagta tha aur del rule se jeet jata tha —
   isi liye struck price halki purple aur current jitni bari render hoti thi.
   Ye rule amount span ko wapas Blogger del values par lata hai
   (grey #999, 20px, 400); current price ka vivid purple 28px/800 untouched. */
.single-product div.product .price del .woocommerce-Price-amount{font-size:20px!important;font-weight:400!important;color:#999!important}
@media(max-width:900px){.mg-socrail{display:none!important}}
@media(max-width:768px){
  .single-product div.product p.price,.single-product div.product span.price,.single-product div.product .price ins,.single-product div.product .price .woocommerce-Price-amount{font-size:24px!important}
  .single-product div.product .price del{font-size:16px!important}
  .single-product div.product .price del .woocommerce-Price-amount{font-size:20px!important}
  body.single-product section.related.products{width:100%!important;max-width:100%!important;overflow:hidden!important}
  body.single-product section.related.products>h2,body.single-product .related.products>h2{text-align:center!important;width:100%!important}
  .single-product .related ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;overflow:hidden!important}
  .single-product .related ul.products li.product{min-width:0!important}
}

/* v1.2.16 (owner A-Z 18:56, no rush — side strips + related heading + Next text):
   (a) SIDE STRIPS GONE — Storefront's .storefront-product-pagination is the
   fixed prev/next product strip peeking from both screen edges on PDP
   (V3-AUDIT R2-4f; user screenshot 18:50 + clarification 18:54). That rule
   was LOST in rebuilds work-125..135 (grep 0), so slivers returned. Restore
   it, plus the accessibility-labelled "More products" nav as a second
   selector for the same element. Social rail (.mg-socrail) and sales toast
   are NOT touched — both stay, Blogger has both.
   (b) RELATED HEADING CENTRE — strongest container + heading rules: section
   is block/full-width/centred container, h2 is block/full-width/centred.
   Previous !important h2 rules alone failed on screen three times, so the
   container is fixed too (a narrow/floated container centres text inside
   itself while looking left on the page).
   (c) NEXT/PREV TEXT VISIBLE — investigation 18:59 found "« Prev" / "Next »"
   ARE present in the page structure (accessible names), but visually only
   arrows show, so the filter is NOT the problem — the buttons are visually
   clipping/hiding the words. Force prev/next buttons to auto width, nowrap,
   visible overflow, normal text indent, so the words render. */
body.single-product .storefront-product-pagination,body.single-product nav.storefront-product-pagination,body.single-product nav[aria-label="More products"]{display:none!important;visibility:hidden!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important}
body.single-product section.related.products{display:block!important;width:100%!important;max-width:1200px!important;margin:60px auto 20px!important;float:none!important;clear:both!important;text-align:center!important}
body.single-product section.related.products>h2,body.single-product .related.products>h2,body.single-product main section.related h2,body.single-product .site-main section.related h2{text-align:center!important;display:block!important;width:100%!important;float:none!important;margin-left:auto!important;margin-right:auto!important}
.woocommerce-pagination ul.page-numbers li a.prev,.woocommerce-pagination ul.page-numbers li a.next,.mg-listing .woocommerce-pagination ul.page-numbers li a.prev,.mg-listing .woocommerce-pagination ul.page-numbers li a.next{font-size:14px!important;width:auto!important;min-width:84px!important;padding:10px 16px!important;white-space:nowrap!important;overflow:visible!important;text-indent:0!important}

/* v1.2.17 (A-Z check 19:13, no rush):
   (a) PDP TABS stray ">" — "Description>" / "Reviews (0)>" seen on screen;
   no ">" text exists in mangwao.css content rules or description.php, so
   the prime suspect is a Storefront/WooCommerce ::before/::after on tab
   links/items. Kill ALL tab pseudo content (real tab text is unaffected).
   If ">" survives this, it is real DOM text and needs a PHP title filter
   next — do NOT claim this fixed it until screen-verified.
   (b) SEARCH PAGE overflow guard — search results screenshots rendered
   horizontally displaced repeatedly (header/footer shifted right, grid
   off-screen). Whether artefact or a wide element, a search-page
   max-width + overflow-x guard stops any wide listing element from
   shifting the page; shop/category use the same .mg-listing and are
   unaffected in practice (their grids already fit).
   (c) COD box readable — Pay Securely COD box was icon-only (aria-label
   only), so visitors could not read it; visible "COD" text added in
   functions.php next to the icon. JazzCash/easypaisa were already readable. */
.single-product .woocommerce-tabs ul.tabs li::before,.single-product .woocommerce-tabs ul.tabs li::after,.single-product .woocommerce-tabs ul.tabs li a::before,.single-product .woocommerce-tabs ul.tabs li a::after{content:none!important;display:none!important}
body.search .site-main,body.search .content-area,body.search .mg-listing{max-width:100%!important;overflow-x:hidden!important}
body.search .mg-listing ul.products{max-width:100%!important}
/* (c) SEARCH FIX v1.2.20 — user ijazat 21:28 "fix kro jese bhi": search pages par poora page right shift hota tha; CSS layers (child live, parent Storefront, WooCommerce) mein koi shift rule nahi mila, is liye containment fix: search par page ke har wrapper ko clip + centre force kiya gaya hai taake koi bhi andar ka element page ko dhakel na sake. Agar ye kaam na aaya to pusher CSS se bahar (JS/DOM) hai, wo agla step hoga. */
body.search{overflow-x:clip!important}
body.search #page{overflow-x:clip!important}
body.search #secondary{display:none!important}
body.search .content-area{width:100%!important;float:none!important;margin-left:0!important;margin-right:0!important}
body.search .site-content .col-full{max-width:1440px!important;margin-left:auto!important;margin-right:auto!important}
body.search .header{max-width:1440px!important;margin-left:auto!important;margin-right:auto!important}

/* ================= v1.2.28 — MOBILE HARDENING (phone-only, appended LAST) =================
   PROBLEM (user, fresh browser, NOT cache — 2026-10-25 00:06): on a real phone the
   site still shows desktop layout — 5-column squeezed grids, unstacked hero with
   right edge cut, visible Featured arrows, search bar painting over content below,
   cramped trust badges — although the earlier ≤760/≤600 rules in this file LOOK
   correct on code-reading.
   AUDIT (this build, files read, not guessed):
   - Grids: style.css:243 .products{display:flex} + .product{flex:0 0 210px} (0,1,0);
     style.css:312 ul.products{repeat(5,minmax(0,1fr))} (0,1,1);
     mangwao.css:502 @media(1024px) ul.products{repeat(5)} (0,1,1);
     mangwao.css:166 .single-product .related ul.products{repeat(5)} (0,2,1) — this
     BEATS mangwao.css:656 ul.products{repeat(2)} (0,1,1) for related rows, which is
     why related could stay 5-col on mobile;
     Storefront/WooCommerce columns-5 li.product widths (li width, not grid cols);
     JS mgInitRows/mgRowShow sets inline display:none on row items outside the
     15-window on desktop (assets/js/mangwao.js:273-296) — any path that leaves an
     inline hide on mobile must lose to an author !important rule.
   - Hero: style.css:178 .mania-hero{1.506fr .578fr .584fr} (0,1,0); mangwao.css:676
     ≤600 .mania-hero{1fr} (0,1,0, later file) should win, but a 3-col grid that
     survives at ≤600 cuts the right edge because children keep min content width.
   - Arrows: style.css:231 .mg-arrows{display:flex} (0,1,0); mangwao.css:626
     .mg-arrows{display:none} (0,1,0, later file) should win — hardened anyway.
   - Search overlap: style.css:46 .header{height:92px;position:sticky;top:0} vs
     mangwao.css:562 ≤760 .header{height:auto} and :588 .header{position:sticky}
     WITHOUT top — if the 92px height survives, the wrapped second-row search bar
     overflows the header box and paints over the hero/content below. No negative
     margin or fixed-position search rule was found in either sheet, so the fix
     pins height:auto + sticky top + in-flow search in the mobile layer itself.
   - Badges: style.css:220 .benefits{repeat(4,1fr)} vs mangwao.css:654 ≤760
     repeat(2,1fr); base .benefit is already flex, but the text span has no
     min-width:0/flex basis, so long text collides with the 27px icon in a
     narrow 2-col cell.
   METHOD: this layer is LAST in mangwao.css, which functions.php enqueues AFTER
   style.css and after Storefront/WooCommerce, so its !important rules beat every
   competing rule above (including earlier !important related rule at line 960,
   beaten by the higher-specificity body.single-product prefix + later position).
   SCOPE: ONLY @media(max-width:760px) and @media(max-width:600px). Desktop,
   cards, front-page.php, QV JS, $69-absence and SEO surface are untouched.
   Bare ".products" is deliberately NOT used: section.related.products is a
   <section> wrapper, and forcing display:grid on it would break its h2+ul
   layout — only real row containers (div.products.mg-rowp, ul.products) are hit. */
@media(max-width:760px){
  /* 1. GRIDS — forced 2-column, every row form. */
  div.products.mg-rowp,.section div.products.mg-rowp,ul.products,.mg-listing ul.products,body.woocommerce ul.products,body.woocommerce-page ul.products,body.search ul.products{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;overflow:visible!important}
  body.single-product .related ul.products,body.single-product section.related ul.products{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;overflow:visible!important}
  ul.products li.product,body.woocommerce ul.products li.product,body.single-product .related ul.products li.product{width:auto!important;float:none!important;flex:none!important;min-width:0!important;max-width:100%!important;margin:0!important}
  .mg-rowp>.product,.products.mg-rowp>.product{display:block!important;flex:none!important;min-width:0!important;max-width:100%!important;width:auto!important}
  /* 3. ARROWS — forced hidden on mobile rows. */
  .mg-arrows,.section .mg-arrows,div.mg-arrows{display:none!important;visibility:hidden!important}
  /* 4. SEARCH OVERLAP — sticky header pinned in-flow, search as a normal
     second row that cannot overflow the header box onto content below. */
  .header{position:sticky!important;top:0!important;z-index:100!important;height:auto!important;flex-wrap:wrap!important;overflow:visible!important}
  .header .search,.header form.search,form.search{display:flex!important;position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;float:none!important;flex:1 1 100%!important;order:10!important;max-width:100%!important;margin:6px 0 2px!important}
  /* 5. TRUST BADGES — 2-col, icon never collides with text. */
  .benefits,section.benefits{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .benefit{display:flex!important;align-items:flex-start!important;gap:10px!important;min-width:0!important}
  .benefit .bi{flex:none!important;flex-shrink:0!important}
  .benefit span:not(.bi){min-width:0!important;flex:1 1 auto!important;overflow-wrap:anywhere!important}
  .benefit strong,.benefit small{min-width:0!important;overflow-wrap:anywhere!important}
}
@media(max-width:600px){
  /* 2. HERO STACKING — 601-760px base 3-col grid untouched; only ≤600 stacks. */
  section.mania-hero,.mania-hero{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;max-width:100%!important;overflow:hidden!important}
  .mania-hero>*{grid-column:1/-1!important;width:100%!important;max-width:100%!important;min-width:0!important}
  .mania-hero-left,.mania-face,.mania-stack,.mania-hyal,.mania-night{min-width:0!important;max-width:100%!important}
  .mania-stack>*{min-width:0!important;max-width:100%!important}
}