/*
Theme Name: Mangwao (Storefront Child)
Theme URI: https://mangwao.shop
Description: Mangwao Shop — Storefront child theme. Faithful WordPress port of the original Mangwao Blogger theme; every design value in this theme is transcribed from the original theme source (blogger-theme-source/mangwao-blogger-theme.xml, b:skin + markup + JS templates). See BUILD-REPORT.md for the value-by-value source table and the short list of justified deviations.
Author: Mangwao
Version: 1.2.51
Template: storefront
Text Domain: mangwao-storefront-child
*/

/* ============ Design tokens — SOURCE: b:skin :root (exact) ============ */
:root{
  --purple:#875ff5;
  --purple2:#a17af0;
  --ink:#29272d;
  --muted:#77747d;
  --line:#efedf2;
  --pink:#fde7ef;
  --soft:#faf9fc;
  --dark:#1e1e1e;
  --red:#dc2626;
  --green:#16a34a;
  --green2:#1a9e54;
}
/* SOURCE: body{margin:0;background:#fff;color:var(--ink);font:14px/1.45 "Poppins","Arial",sans-serif} */
body{margin:0;background:#fff;color:var(--ink);font:14px/1.45 "Poppins","Arial",sans-serif;overflow-x:clip}
/* v1.2.2 (sticky-header fix): Storefront sets .site{overflow-x:hidden} — any
   non-visible overflow on an ancestor turns that ancestor into the sticky
   constraint, so .header{position:sticky} scrolled away with the page.
   overflow-x:clip clips the same horizontal overflow WITHOUT creating a
   scroll container, so the header pins to the viewport exactly like the
   original (whose header is position:sticky;top:0). */
.site{overflow-x:clip}
a{color:var(--purple);text-decoration:none}
button,input,select,textarea,optgroup{font-family:"Poppins","Arial",sans-serif}
button{cursor:pointer}
/* SOURCE: .wrap{max-width:1440px;margin:auto} — applied to Storefront's content wrapper.
   v1.2.0: Storefront also puts ~42px side padding + media-query margins on
   .col-full, which inset every section vs the source grid — neutralised. */
.site-content .col-full{max-width:1440px;padding:0;margin-left:auto;margin-right:auto}

/* ============ Top line — SOURCE: .top{height:5px;background:var(--purple)} ============ */
.top{height:5px;background:var(--purple)}

/* ============ Header — SOURCE: .header/.brand/.search/.icons/.icon/.count ============ */
.header{height:92px;border-bottom:1px solid #f6f4f8;display:flex;align-items:center;gap:22px;padding:0 3%;background:#fff;position:sticky;top:0;z-index:100;max-width:1440px;margin:0 auto}
.brand{display:flex;align-items:center;min-width:110px;color:var(--purple);font-weight:800;font-size:23px;line-height:.8;letter-spacing:-1px;text-decoration:none}
.brand small{display:block;font-size:7px;letter-spacing:2px;margin-top:6px}
.brand img{height:56px;width:auto;margin-right:10px}
.brand .custom-logo{height:56px;width:auto}
.hamb{display:none}
.search{display:flex;align-items:center;flex:1;max-width:620px;margin-left:auto;border:1px solid #e8e4ef;border-radius:30px;height:42px;background:#fff;position:relative}
.search input{border:0;outline:0;flex:1;min-width:0;padding:0 18px;font-size:13px;color:#555;background:transparent;box-shadow:none!important;margin:0}
.search input::placeholder{color:#a09da8}
.search>button,.search .search-btn{border:0;background:var(--purple);color:#fff;border-radius:22px;padding:7px 18px;margin:3px;font-size:13px;font-weight:500}
/* v1.2.2 (search-button centering): the live render showed the purple Search
   button riding HIGH inside the pill although .search{align-items:center}
   is served. No competing align-items rule was found in any served sheet
   (child style.css + mangwao.css + Storefront + WooCommerce were all read),
   so the fix forces centering at the ITEM level, which wins over any form
   alignment value: the button is now vertically centered with equal space
   above/below, exactly like the original. */
.header .search{align-items:center}
.search>button{align-self:center}
/* v1.2.6 (H1): the owner still saw Search riding HIGH — the earlier
   item-level fix was not enough, so alignment is now forced at the
   ROW level (every header child centres itself) and the button gets
   a deterministic box (34px = 42px bar minus 2x3px margins) with no
   line-height dependence. Placeholder text and label unchanged. */
.header .brand,.header .search,.header .mg-seller-hdr,.header .icons{align-self:center}
/* v1.2.8 (owner screenshot): Search still sat HIGH vs Seller Center. Root cause
   is structural, not alignment: a <form> carries UA/parent bottom margin, and
   align-self:center centres the MARGIN box, so the border box rides high by
   half that margin. Kill vertical margins on EVERY header child so the
   border boxes share one centre line; horizontal margins are untouched. */
.header>*{margin-top:0;margin-bottom:0}
.header .search{margin-left:auto}
.header .brand,.header .mg-seller-hdr,.header .icons,.header .search>button{flex:none}
.search>button,.search .search-btn{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 18px}
.search input{align-self:center}
/* v1.2.6 (F17): live search MODAL (replaces the .mg-ac dropdown, which the
   rendered audit never saw trigger) — "Results for 'X'" card grid, like
   the original's search modal; form submit still goes to the search page. */
.mg-search-box{background:#fff;border-radius:16px;max-width:860px;width:100%;max-height:92vh;overflow:auto;position:relative;padding:26px}
.mg-search-box h2{margin:0 0 18px;font-size:20px;font-weight:700;color:var(--ink)}
.mg-smodal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mg-smodal-grid .product{flex:none}
.mg-smodal-grid .product .phover{max-height:none;opacity:1;margin-top:12px}
.mg-smodal-grid .product .pqv{display:none}
.mg-smodal-grid .mg-smodal-empty{grid-column:1/-1;color:#777;font-size:14px;padding:20px 0;text-align:center}
.mg-smodal-foot{margin:18px 0 0;text-align:center}
.mg-smodal-foot a{color:#875ff5;font-weight:600;font-size:14px}
@media(max-width:760px){.mg-smodal-grid{grid-template-columns:repeat(2,1fr)}}
/* SOURCE: .mg-seller-hdr */
.mg-seller-hdr{display:inline-flex;align-items:center;gap:7px;background:#875ff5;color:#fff;border:0;padding:0 20px;height:42px;border-radius:30px;font-size:13px;font-weight:600;cursor:pointer;margin-left:16px;font-family:Poppins,Arial,sans-serif;text-decoration:none;white-space:nowrap}
.mg-seller-hdr svg{flex:0 0 auto}
.icons{display:flex;align-items:center;gap:19px;font-size:20px;margin-left:15px}
/* SOURCE: .icon{border:0;background:none;padding:0;position:relative} — the
   42px outline box belongs ONLY to .icons .icon in the source. v1.2.0 applied
   the box to .icon globally, so the mobile hamburger (also .icon) rendered as
   a bordered 42px square the source does not have (V4-HEADER-AUDIT F-H1). */
.icon{border:0;background:none;padding:0;position:relative}
.icons .icon{width:42px;height:42px;border:1px solid #e8e4ef;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:#fff;cursor:pointer}
.count{position:absolute;top:-7px;right:-9px;border-radius:50%;background:var(--purple);color:#fff;font-size:9px;width:16px;height:16px;display:grid;place-items:center}
/* SOURCE: header cart total text */
.cart-total-head{font-size:13px;font-weight:500;color:#333;margin-left:6px;white-space:nowrap}
.mg-search-toggle{display:none}

/* ============ Nav — SOURCE: .mania-nav/.mania-nav-inner/.all-cats/.mania-menu ============ */
.mania-nav{background:#fff;border-bottom:1px solid #f6f4f8}
.mania-nav-inner{display:flex;align-items:center;gap:30px;max-width:1440px;margin:auto;height:54px;padding:0 3%}
.all-cats{background:#875ff5;color:#fff;border:0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px;cursor:pointer;white-space:nowrap;font-family:"Poppins","Arial",sans-serif}
.all-cats:hover{background:#7c4de0}
.mania-menu{display:flex;gap:30px;align-items:center}
.mania-menu ul{display:flex;gap:30px;align-items:center;list-style:none;margin:0;padding:0}
.mania-menu li{list-style:none}
.mania-menu a{font-size:14px;color:#333;font-weight:500;white-space:nowrap;text-decoration:none}
.mania-menu a.active{color:#875ff5;font-weight:600}
/* v1.2.6 (F2): wp_nav_menu marks the current item .current-menu-item /
   .current_page_item, not .active — the original's purple Home. */
.mania-menu .current-menu-item>a,.mania-menu .current_page_item>a{color:#875ff5;font-weight:600}
.mania-menu a:hover{color:#875ff5}
/* SOURCE: @media(max-width:900px){.mania-menu{gap:18px}.mania-menu a{font-size:13px}}
   (missing in v1.2.0 — V4-HEADER-AUDIT F-H5). The ul rule covers the WP-menu
   rendering; the source menu is bare anchors inside .mania-menu. */
@media(max-width:900px){
  .mania-menu{gap:18px}
  .mania-menu ul{gap:18px}
  .mania-menu a{font-size:13px}
}

/* ============ Category drawer — SOURCE: .mg-drawer/.mg-scrim/.mg-cat-* ============ */
.mg-scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:205;display:none}
.mg-scrim.open{display:block}
.mg-drawer{position:fixed;top:0;left:-300px;width:280px;height:100%;background:#fff;z-index:210;transition:left .25s;box-shadow:8px 0 30px rgba(0,0,0,.12);padding:20px;overflow:auto;box-sizing:border-box}
.mg-drawer.open{left:0}
.mg-drawer a{display:block;padding:10px 4px;border-bottom:1px solid #f6f4f8;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none}
.mg-drawer .mg-drawer-seller{display:flex;align-items:center;justify-content:center;gap:7px;width:92%;margin:0 auto 12px;box-sizing:border-box;height:38px;background:#875ff5;color:#fff;padding:0 14px;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none}
.mg-drawer form{margin:0}
.mg-drawer-search{display:block;width:92%;margin:0 auto 12px;box-sizing:border-box;height:38px;padding:0 14px;border:1px solid #e8e4ef;border-radius:10px;font-size:14px}
.mg-drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.mg-drawer-head strong{font-size:16px;font-weight:700;color:var(--ink)}
.mg-cat-row{display:flex;justify-content:space-between;align-items:center}
.mg-cat-row .mg-cat-link{flex:1}
.mg-cat-link{display:block;padding:7px 4px;font-size:13.5px;font-weight:500;border-bottom:1px solid #faf8fc;color:var(--ink);text-decoration:none}
.mg-cat-exp{background:#f4f1fa;border:0;color:#875ff5;font-size:17px;font-weight:700;width:30px;height:30px;border-radius:50%;cursor:pointer;line-height:1;flex:none;margin-left:6px;display:flex;align-items:center;justify-content:center;padding:0;box-sizing:border-box;aspect-ratio:1/1;min-width:30px;min-height:30px;max-width:30px;max-height:30px;align-self:center}
.mg-cat-kids{margin:2px 0 6px 12px;border-left:2px solid #efeaf7;padding-left:10px;display:none}
.mg-cat-kids.open{display:block}
.mg-cat-kids .mg-cat-link{display:block;padding:7px 4px;font-size:13.5px;font-weight:500;border-bottom:1px solid #faf8fc}

/* v1.2.8: My Account is a store page, not a blog post — the blog sidebar
   ("Recent Posts/Comments/Archives/Categories" with "No..." entries) does not
   belong here. Full-width account area, no sidebar, on account pages only. */
body.woocommerce-account #secondary{display:none!important}
body.woocommerce-account .content-area{width:100%!important;float:none!important;margin:0!important}
body.woocommerce-account .site-main{width:100%}

/* v1.2.10: default-template store pages (Top Deals etc.) have no page.php
   in this child theme, so Storefront's parent page template rendered its
   blog sidebar — empty Search/Recent Posts/Comments/Archives/Categories
   widgets (the 15:39 comparison's "sidebar leak"). A store page is not a
   blog post: hide the widget area and go full-width on every static page.
   Seller/admin/my-account pages keep their own templates/rules; shop and
   product archives are already full-width via the Woo rules above. */
body.page #secondary{display:none!important}
body.page .content-area{width:100%!important;float:none!important;margin:0!important}
body.page .site-main{width:100%}

/* v1.2.10 (comparison defect 7): the live PDP HTML already prints
   "SKU: <span>" WITH a space — the "no space" reading is not reproduced
   in markup (likely tight font rendering). This margin guarantees a
   visible gap regardless, without touching any markup. */
.product_meta .sku_wrapper .sku{margin-left:4px}

/* ============ Hero — SOURCE: .mania-hero grid; tiles carry the source's own
   extracted banner <img>s (assets/img/hero-*.jpg — see FIX-REPORT.md) ============ */
.mg-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mania-hero{display:grid;grid-template-columns:1.506fr .578fr .584fr;gap:14px;padding:22px 1% 0;max-width:1440px;margin:auto;align-items:start}
.mania-hero-left{aspect-ratio:699/464;background:#f9c2d4;border-radius:14px;position:relative;overflow:hidden;cursor:pointer;padding:0;margin:0}
.mania-hero-left img,.mania-face img,.mania-hyal img,.mania-night img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border:0}
.mania-face{aspect-ratio:273/472;background:#dde7e5;border-radius:14px;position:relative;overflow:hidden;cursor:pointer;padding:0;margin:0}
.mania-stack{display:grid;gap:14px;grid-template-rows:auto auto;min-width:0;margin:0;padding:0}
.mania-hyal{aspect-ratio:270/228;background:#eae3f7;border-radius:14px;position:relative;overflow:hidden;cursor:pointer;padding:0;margin:0}
.mania-night{aspect-ratio:273/224;background:#fbe3da;border-radius:14px;position:relative;overflow:hidden;cursor:pointer;padding:0;margin:0}
.mania-hero-left.mg-grad{background:linear-gradient(135deg,#875ff5,#a17af0)}
.mania-face.mg-grad{background:linear-gradient(135deg,#a17af0,#875ff5)}
.hero-txt{position:absolute;z-index:2;font-family:Poppins,sans-serif}
.hero-txt h2{margin:0 0 8px;font-weight:800;line-height:1.15}
.hero-txt p{margin:0 0 6px;font-weight:500}
.hero-btn{pointer-events:auto;display:inline-block;margin-top:10px;padding:10px 24px;border-radius:8px;font-weight:600;font-size:14px;text-decoration:none;cursor:pointer;font-family:Poppins,sans-serif}
.hero-btn-white{background:#fff;color:#1e1e1e;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.hero-btn-white:hover{background:#f5f5f5}
.hero-pill{display:inline-block;border:1.5px solid #1e1e1e;border-radius:20px;padding:5px 14px;font-size:12px;font-weight:600;margin-bottom:12px;color:#1e1e1e}
.hero-txt-glow{left:6%;top:50%;transform:translateY(-50%);max-width:52%;color:#fff}
.hero-txt-glow h2{font-size:clamp(24px,3.2vw,42px);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.hero-txt-glow p{font-size:clamp(13px,1.4vw,16px);color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.hero-txt-glow .hero-pill{border-color:#fff;color:#fff}
/* v1.2.2 (hero, rendered audit): the original hero is the baked pink photo
   with DARK copy — dark-outlined "New Beauty Essentials" pill, dark headline,
   dark subtext, PURPLE Shop Now button. v1.2.1 rendered the clean HD photo
   with a WHITE overlay + white button, which is not the original. The $69.00
   demo price baked into the original artwork stays OUT (standing owner
   decision); the rest of the copy renders as a dark HTML overlay on the
   clean photo, at the original's geometry (left 6%, vertically centred,
   max-width 52%). */
.hero-btn-purple{background:#875ff5;color:#fff}
.hero-btn-purple:hover{background:#6f4de0}
.hero-txt-dark{left:6%;top:50%;transform:translateY(-50%);max-width:52%;color:#1e1e1e}
.hero-txt-dark h2{font-size:clamp(24px,3.2vw,42px);color:#1e1e1e}
.hero-txt-dark p{font-size:clamp(13px,1.4vw,16px);color:#1e1e1e}
/* Side-banner overlay copy (Mania demo, verified: clean photos + HTML
   overlay — title + OFF badge + white Shop Now button per tile). The
   banner anchors are already position:relative + overflow:hidden. */
.mania-banner-txt{position:absolute;z-index:2;left:8%;top:8%;right:auto;text-align:left;font-family:Poppins,sans-serif;color:#1e1e1e;text-shadow:none}
.mania-banner-txt .mbt-title{display:block;font-weight:800;font-size:clamp(18px,2vw,28px);line-height:1.15;margin-bottom:6px;color:#1e1e1e}
.mania-banner-txt .mbt-badge{display:block;font-size:clamp(12px,1.2vw,14px);font-weight:500;margin-bottom:10px;color:#1e1e1e}
.mania-banner-txt .hero-btn{margin-top:0;padding:8px 20px;font-size:13px}

/* ============ Benefits — SOURCE: .benefits/.benefit/.bi ============ */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:34px 6% 48px;max-width:1440px;margin:0 auto}
.benefit{display:flex;align-items:center;gap:13px;min-width:0}
.benefit .bi{font-size:30px;color:var(--purple);line-height:1;display:inline-flex}
.benefit strong{display:block;font-size:13px}
.benefit small{display:block;color:#888;font-size:11px;margin-top:2px}

/* ============ Sections — SOURCE: .section/.section-title/.mg-sec-head/.mg-arrow ============ */
.section{padding:0 1% 40px;max-width:1440px;margin:0 auto}
.section-title{font-size:19px;font-weight:700;margin:0 0 18px;color:var(--ink)}
.mg-sec-head{display:flex;align-items:center;justify-content:space-between}
.mg-sec-head .section-title{margin:0 0 18px}
.mg-arrows{display:flex;gap:8px}
.mg-arrow{width:34px;height:34px;border-radius:50%;border:1px solid #efedf2;background:#fff;color:#875ff5;font-size:16px;display:grid;place-items:center;cursor:pointer}
.mg-arrow:hover{background:#875ff5;color:#fff;border-color:#875ff5}

/* ============ Categories circles — SOURCE: .categories/.category ============ */
.categories{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;text-align:center}
.category{text-decoration:none;color:var(--ink);display:block}
.category img{width:min(100%,185px);aspect-ratio:1;object-fit:cover;border-radius:50%;display:block;margin:0 auto 8px}
.category .mg-circle-mono{width:min(100%,185px);aspect-ratio:1;border-radius:50%;display:flex;margin:0 auto 8px;align-items:center;justify-content:center;background:var(--pink);color:var(--purple);font-size:44px;font-weight:700}
.category span{font-size:14px}

/* ============ Product cards — SOURCE: .products/.product family (b:skin, final cascade) ============ */
.products{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:8px}
.products::-webkit-scrollbar{display:none}
.product{border:1px solid #efedf1;border-radius:12px;background:#fff;position:relative;text-align:center;padding:0 0 20px;min-width:0;flex:0 0 210px}
/* Homepage section rows — SOURCE: .products is a 5-column GRID (not a scroll
   strip); the arrows page through it in windows of 15 with the mgpgin
   animation (JS in mangwao.js hides items outside the current window). */
.mg-rowp{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;overflow:visible;padding-bottom:0}
.mg-rowp .product{flex:none}
.mg-rowp.mg-pgin{animation:mgpgin .3s ease}
@keyframes mgpgin{from{opacity:.3;transform:translateX(16px)}to{opacity:1;transform:none}}
/* Card image presentation (v2, per the Mania-demo look the owner asked for):
   ONE consistent square crop on a plain white card, centred product, no
   distortion, no blurred filler — the image itself is whatever clean photo
   the catalog pipeline supplies (see V2-COMPARISON.md, IMAGE PRESENTATION). */
.product .pimg{display:block;background:#fff;padding:0;position:relative;overflow:hidden;border-radius:12px 12px 0 0;aspect-ratio:1/1}
.product .pimg img{width:100%;height:100%;display:block;margin:auto}
.pimg img.pimg-fg{position:relative;z-index:1;object-fit:cover;object-position:center;background:#fff}
.product h3{font-size:15px;font-weight:500;color:#29272d;margin:12px 16px 8px;min-height:44px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product h3 a{color:#29272d;text-decoration:none}
/* Price block — SOURCE final cascade (b:skin override layer 1378, applies at
   ALL widths): a grid — price top-left, struck old price BELOW it, % OFF pill
   top-right, Free Delivery bottom-right. */
.product .pprice{font-size:16px;font-weight:700;color:#1e1e1e;margin:0 8px;display:grid;grid-template-columns:1fr auto;column-gap:6px;row-gap:0;align-items:center;text-align:left}
.product .pprice .pmain{grid-column:1;grid-row:1;white-space:nowrap;letter-spacing:-.3px}
.product .pprice .old{grid-column:1;grid-row:2;color:#b9b5c0;font-weight:500;text-decoration:line-through;margin-right:0;font-size:14px;white-space:nowrap}
.product .pprice .poff{grid-column:2;grid-row:1;justify-self:end}
.product .pprice .pfree{grid-column:2;grid-row:2;justify-self:end;text-align:right;margin:0;font-size:11px}
.poff{background:#875ff5;color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:12px;white-space:nowrap}
.pfree{text-align:center;color:#1a9e54;font-size:12.5px;font-weight:600;margin:5px 16px 0}
/* Sale badge — SOURCE: .pdisc (top-right pill on the card image; emitted only
   for real WooCommerce sale prices, like the source's own sale block). */
.pdisc{position:absolute;top:12px;right:12px;background:#875ff5;color:#fff;font-size:11px;font-weight:600;padding:5px 12px;border-radius:20px;z-index:3;line-height:1.3}
/* v1.2.6 (F3): the original shows OFF once, in the body (.poff) — the
   image-overlay .pdisc is hidden with CSS ONLY; the card file is untouched. */
.product .pdisc{display:none}
.product .pqv{position:absolute;left:50%;top:118px;transform:translate(-50%,-50%);background:#875ff5;color:#fff;border:0;border-radius:30px;padding:8px 18px;font-size:12px;font-weight:600;letter-spacing:.4px;cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s;z-index:4;white-space:nowrap;box-shadow:0 6px 18px rgba(135,95,245,.35)}
.product:hover .pqv{opacity:1;visibility:visible;pointer-events:auto}
.product .pqv:hover{background:#7c4de0}
.product .phover{max-height:0;opacity:0;overflow:hidden;margin:0 18px;text-align:center;transition:max-height .3s ease,opacity .3s ease,margin .3s ease}
.product:hover .phover,.product:active .phover,.product:focus-within .phover{max-height:130px;opacity:1;margin-top:12px}
.product .padd{display:inline-block;width:auto;background:#875ff5;color:#fff;border:0;border-radius:25px;padding:9px 26px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
.product .padd:hover{background:#7c4de0;color:#fff}
.product .pwish{display:block;width:100%;background:none;border:0;font-size:12px;color:#77747d;margin-top:10px;cursor:pointer}
.product .pwish.on{color:#875ff5;font-weight:700}
/* v1.2.9 (owner 14:44): WooCommerce appends <a class="added_to_cart wc-forward">
   ("View cart") inside .phover right after the Add to cart button whenever an
   AJAX add-to-cart succeeds. Storefront's customiser CSS paints it as a black
   rectangle (.added_to_cart background #333 at (0,1,0)); this (0,3,1) rule
   repaints it as the theme's own purple pill, same metrics as .padd, so the
   card never shows a black button. While the link is present the wishlist
   hides (:has(), no JS state): the card shows Add to cart + View cart only,
   tidy. On reload WooCommerce drops .added_to_cart, so the wishlist returns
   on its own. The side cart drawer's Checkout is untouched — both paths stay.
   (Old browsers without :has() simply keep the wishlist visible too — the
   pill styling still applies.) */
.product .phover a.added_to_cart{display:inline-block;width:auto;background:#875ff5;color:#fff;border:0;border-radius:25px;padding:9px 26px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;margin-top:10px}
.product .phover a.added_to_cart:hover{background:#7c4de0;color:#fff}
.product .phover:has(> a.added_to_cart) .pwish{display:none}
/* v1.2.6 (F23): the card markup already has a space after the heart;
   the visible gap was rendering tightness — a small right margin. */
.mg-heart{margin-right:6px}
/* v1.2.10: widened 4px → 6px — the 15:39 comparison still read the card
   button as "♡Wishlist" (spaceless), so the gap is made unmistakable.
   Markup untouched: the space after the heart was already there. */
.pink-band{background:#fde7ef;padding:25px 1% 28px;margin:0 0 40px}
.pink-band-inner{max-width:1440px;margin:0 auto}
.pink-band .product{border:0}

/* Shop / archive / search grids (WooCommerce loop markup in card dress) */
ul.products{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;overflow:visible}
ul.products li.product{flex:none}
ul.products li.product .woocommerce-loop-product__link{display:block}
ul.products li.product img.attachment-woocommerce_thumbnail{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;margin:auto;background:#fff}
ul.products li.product .woocommerce-loop-product__title{font-size:15px;font-weight:500;color:#29272d;margin:12px 16px 8px;min-height:44px;line-height:1.4;padding:0}
ul.products li.product .price{font-size:16px;font-weight:700;color:#1e1e1e;margin:0 16px;display:block;text-align:center}
ul.products li.product .price del{color:#b9b5c0;font-weight:500;font-size:14px}
ul.products li.product .price ins{text-decoration:none;background:none;color:#1e1e1e;font-weight:700}
ul.products li.product .onsale{position:absolute;top:12px;right:12px;left:auto;background:#875ff5;color:#fff;font-size:11px;font-weight:600;padding:5px 12px;border-radius:20px;z-index:3;width:auto;height:auto;line-height:1.3}
ul.products li.product .button{margin:12px auto 0;display:table}
/* v1.2.6 (F14): shop/archive/search cards use the homepage title clamp
   (identical values — the audit's heavier truncation was longer shop
   titles hitting the same 2-line clamp; this rule pins parity). */
ul.products li.product h3{font-size:15px;font-weight:500;color:#29272d;margin:12px 16px 8px;min-height:44px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ============ Products in Action — SOURCE: .action-grid/.action-card/.action-label/.round-cart ============ */
.action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.action-card{aspect-ratio:9/16;position:relative;overflow:hidden;border-radius:12px;background:#000;width:100%;min-height:480px}
.action-card video{width:100%;height:100%;object-fit:cover;display:block;border-radius:12px}
/* v1.2.5 (Products in Action exact port): tiles are ALWAYS the original's 4
   autoplay videos — the v1.2.2 photo-tile fallback is gone. */
/* Action label bar — SOURCE rendered values (inline styles in the source's
   mgRenderAll video-card builder): frosted white bar inset 8px, blur(10px),
   28px product thumb (radius 8px), 14px/600 name, purple price with struck
   compare, 28px round purple cart button. */
.action-label{position:absolute;left:8px;right:8px;bottom:8px;border-radius:12px;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:10px 12px;display:flex;align-items:center;gap:10px;font-size:12px}
.action-label .al-link{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none}
.action-label .al-link img{width:28px;height:28px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:#f3f0ff}
.action-label .al-texts{flex:1;min-width:0;line-height:1.3}
.action-label .al-name{display:block;font-weight:600;color:#1e1e1e;font-size:14px;line-height:1.2}
.action-label .al-price{font-weight:700;color:#875ff5;font-size:13px;white-space:nowrap}
.action-label .al-old{color:#999;text-decoration:line-through;font-weight:400;margin-right:6px}
.round-cart{background:var(--purple);color:#fff;border:0;border-radius:50%;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:16px;flex:0 0 auto;cursor:pointer}

/* ============ Offer — SOURCE: .offer-imgwrap (image-only wrap; the banner is
   the source's extracted offer image, assets/img/offer-banner-v2.jpg — renamed
   in v1.2.3 so no stale cached copy of the old filename can be served) ============ */
.offer-imgwrap{display:block;border-radius:14px;overflow:hidden}
.offer-imgwrap img{transition:transform .3s}
.offer-imgwrap:hover img{transform:scale(1.01)}

/* ============ Testimonials — SOURCE: .testimonials/.review/.reviewer-photo ============ */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.review{border:1px solid #eee;border-radius:10px;padding:18px;font-size:12px;color:#666;background:linear-gradient(180deg,#fff,#f6eafa)}
.reviewer-photo{width:60px;height:60px;border-radius:50%;object-fit:cover;display:flex;margin:0 auto 8px;border:2px solid #875ff5;align-items:center;justify-content:center;background:var(--pink);color:var(--purple);font-size:20px;font-weight:700}
.review strong{display:block;color:#333;margin-top:15px}
.review span{color:#888}

/* ============ Newsletter — SOURCE: .nl-card family ============ */
.nl-card{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#F1E8F8;border-radius:15px;padding:30px 20px 30px 25px}
.nl-left{display:flex;align-items:center;gap:15px;width:40%;min-width:0}
.nl-icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;min-width:72px;border-radius:50%;background:#875FF5}
.nl-icon svg{width:40px;height:40px;fill:#fff}
.nl-text h3{font-family:Poppins,sans-serif;font-size:20px;font-weight:600;line-height:30px;color:#222222;margin:0}
.nl-text p{margin:6px 0 0;font-size:14px;color:#555555}
.nl-right{width:50%;min-width:0}
.nl-form h2{font-family:Poppins,sans-serif;font-size:18px;font-weight:600;color:#222222;margin:0 0 10px}
.nl-row{display:flex;gap:10px}
.nl-row input[type=email]{flex:1;min-width:0;background:#FFFFFF;border:1px solid #e5e5e5;border-radius:30px;padding:12px 18px;font-family:Poppins,sans-serif;font-size:16px;font-weight:400;color:#333333;outline:none;margin:0;box-shadow:none!important}
.nl-row input[type=submit]{background:#8760F5;color:#FFFFFF;border-style:none;border-radius:30px;width:110px;font-family:Poppins,sans-serif;font-size:16px;font-weight:500;text-transform:uppercase;cursor:pointer;padding:12px 0}
.nl-thanks{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;border-radius:10px;padding:10px 14px;font-size:13.5px;margin-top:12px}

/* ============ Footer — SOURCE: .footer/.footer-grid/.copy ============ */
.footer{margin-top:35px;background:#f8f7fa;border-top:1px solid #eee;padding:38px 4% 20px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:25px;max-width:1440px;margin:0 auto}
.footer h3{font-size:15px;margin:0 0 13px;color:var(--ink)}
.footer h3 small{letter-spacing:2px;font-size:10px;margin-left:0}
.footer p,.footer a{font-size:12px;color:#777;display:block;margin:7px 0}
.footer a{text-decoration:none}
.footer a:hover{color:#875ff5}
.copy{border-top:1px solid #e7e3eb;margin:25px auto 0;padding-top:16px;font-size:11px;color:#888;display:flex;justify-content:space-between;max-width:1440px}

/* ============ Floating buttons — SOURCE: #mgFloatBtns/#mgFloatCart/#mgFloatCount/#mgBackTop ============ */
#mgFloatBtns{position:fixed;right:16px;bottom:24px;z-index:160;display:flex;flex-direction:column;gap:12px;align-items:center;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease,bottom .25s ease}
#mgFloatBtns.on{opacity:1;pointer-events:auto;transform:none}
/* v1.2.2 (floating-button overlap): when the newsletter card is on screen,
   JS adds .mg-float-suppress so the floating cart/back-to-top stack can
   never cover the newsletter SUBMIT button (on the original it is fully
   visible at every scroll position). */
#mgFloatBtns.mg-float-suppress{opacity:0!important;pointer-events:none!important}
#mgFloatCart{position:relative;width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid #eee;box-shadow:0 4px 14px rgba(0,0,0,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
#mgFloatCount{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:#1e1e1e;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;line-height:1}
#mgBackTop{position:relative;width:48px;height:48px;border-radius:50%;background:#7B61FF;border:0;box-shadow:0 4px 14px rgba(135,95,245,.45);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;color:#fff;font-size:19px}

/* ============ Toast — SOURCE: .toast ============ */
.toast{position:fixed;bottom:78px;left:50%;transform:translate(-50%,20px);opacity:0;background:#28252d;color:#fff;padding:12px 18px;border-radius:9px;z-index:400;transition:.2s;pointer-events:none;font-size:13.5px}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast a{color:#fff;font-weight:700;text-decoration:underline}

/* ============ Loading — SOURCE: .mg-loading/.mg-spin ============ */
.mg-loading{min-height:180px;display:flex;align-items:center;justify-content:center;color:#77747d;font-size:13px}
.mg-spin{width:26px;height:26px;border:3px solid #efedf2;border-top-color:#875ff5;border-radius:50%;animation:mgsp .8s linear infinite;margin-right:10px;display:inline-block}
@keyframes mgsp{to{transform:rotate(360deg)}}

/* (v2: the v1 "View All" link in section heads was removed — the source's
   section heads carry only the title and the two paging arrows.) */

/* ============ v1.2.7: Listing pages (shop / category archives / search) — Blogger section chrome ============ */
/* The loop itself renders the frozen card (woocommerce/content-product.php);
   this block only supplies Blogger's listing chrome. Base .section /
   .section-title values above already match Blogger exactly
   (.section{padding:0 1% 40px}, .section-title{19px/700, margin 0 0 18px});
   the scoped rules below pin them for listings at every width. Scoping to
   .mg-listing (specificity 0,2,0 / 0,2,1) is deliberate: it beats the
   theme's older ≤1024px 4-column rule and the ≤768px section rules for
   listing grids WITHOUT changing any other section's behaviour.
   Blogger values: .products{display:grid;grid-template-columns:
   repeat(5,minmax(0,1fr));gap:18px}; ≤760px .section .products =
   repeat(2,1fr)/gap 10px and .section padding 0 2% 26px; ≤500px section
   side padding 7px and title 18px. (Blogger's horizontal-scroll .products
   rules belong to its homepage carousel tracks, not to section grids,
   so they are NOT used here.) */
.mg-listing.section{padding:0 1% 40px}
.mg-listing .section-title{font-size:19px;font-weight:700;margin:6px 0 2px}
.mg-listing-count{color:#777;margin:0 0 14px;font-size:14px}
.mg-listing ul.products{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;overflow:visible;clear:both}
/* v1.2.8 (empty first cell): WooCommerce's ul.products::before/::after clearfix
   becomes grid items in a grid container — ::before IS the blank first cell.
   Neutralised here (and globally in mangwao.css) so row 1 shows 5 cards. */
.mg-listing ul.products::before,.mg-listing ul.products::after{content:none!important;display:none!important}
.mg-listing ul.products li.product{width:auto;float:none;margin:0}
/* Sort / count / pagination — DISCLOSED: Blogger has no shop/archive
   pages (its homepage sections paged with arrows, not with sort, count,
   or pagination), so these three controls have no Blogger original.
   They are kept FULLY FUNCTIONAL and styled in the theme combination
   (purple #875ff5, Poppins, rounded); removing them would break browsing
   and SEO for a 40,000-product store. */
.mg-listing .woocommerce-result-count{display:none}
.mg-listing .woocommerce-ordering{float:right;margin:0 0 18px}
.mg-listing .woocommerce-ordering select{border:1px solid #efedf2;border-radius:10px;padding:10px 12px;font-size:13px;font-family:Poppins,Arial,sans-serif;color:#29272d;background:#fff;outline:none;cursor:pointer}
.mg-listing .woocommerce-ordering select:focus{border-color:#875ff5}
.mg-listing .woocommerce-pagination{margin:24px 0 6px;text-align:center;clear:both}
.mg-listing .woocommerce-pagination ul{list-style:none;margin:0;padding:0;display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:center}
.mg-listing .woocommerce-pagination ul li{margin:0}
.mg-listing .woocommerce-pagination ul li a,.mg-listing .woocommerce-pagination ul li span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;padding:8px 10px;border:1px solid #e5e1ec;border-radius:10px;background:#fff;color:#333;font-size:13px;font-weight:600;text-decoration:none}
.mg-listing .woocommerce-pagination ul li a:hover{border-color:#875ff5;color:#875ff5}
.mg-listing .woocommerce-pagination ul li span.current{background:#875ff5;border-color:#875ff5;color:#fff}
.mg-listing .woocommerce-pagination ul li span.dots{border:0;min-width:0}
@media(max-width:760px){
  .mg-listing.section{padding:0 2% 26px}
  .mg-listing ul.products{grid-template-columns:repeat(2,1fr);gap:10px}
}
@media(max-width:500px){
  .mg-listing.section{padding-left:7px;padding-right:7px}
  .mg-listing .section-title{font-size:18px}
}

/* ============ v1.2.21 — dedicated search layout ============ */
/* Search pages render through .mg-searchpage (see archive-product.php
   search branch + search.php): full-width, min-width 0, overflow
   hidden, so no archive float or wide descendant can push the page.
   The .col-full clip on search contains the same overflow inside the
   Storefront content wrapper. */
.mg-searchpage{width:100%;min-width:0;overflow:hidden}
body.search .site-content .col-full{overflow:hidden!important}
.mg-search-row{padding:14px 0;border-bottom:1px solid #efedf2}
.mg-search-row-title{font-size:16px;font-weight:700;margin:0 0 6px}
.mg-search-row-title a{color:#29272d;text-decoration:none}
.mg-search-row-excerpt{color:#77747d;font-size:14px}

/* ============ v1.2.46 — Mobile homepage rows: horizontal carousel ============
   Mobile par har homepage product section (.mg-rowp) vertical grid ki bajaye
   horizontal carousel ban jata hai: 15 products ka window (jaisa desktop par),
   aik waqt ~2 cards nazar aate hain, baqi swipe + left/right arrows se —
   MANUAL ONLY, koi autoplay nahi. Desktop (769px+) par 5-column grid
   waisa ka waisa rehta hai. */
@media (max-width:768px){
	.mg-rowp{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px;padding-bottom:8px;scrollbar-width:none}
	.mg-rowp::-webkit-scrollbar{display:none}
	.mg-rowp .product{flex:0 0 210px;scroll-snap-align:start}
	.mg-arrow{width:42px;height:42px;font-size:20px}
}

/* ============ v1.2.47 — Post description: Read more pink+bold, headings bold ============
   Product description tab mein "Read more" summary pink (#e91e63) aur bold;
   description ke headings (h2/h3/h4) bold. Sirf description panel par laagu —
   baqi headings (section titles, card titles) ko haath nahi lagaya. */
.woocommerce-Tabs-panel--description h2,
.woocommerce-Tabs-panel--description h3,
.woocommerce-Tabs-panel--description h4{font-weight:700}
.woocommerce-Tabs-panel--description details > summary{color:#e91e63;font-weight:700;cursor:pointer}