/* Meson Direct - phone fixes (2026-09-24). Loaded last by novamira-sandbox/meson-mobile.php.
   ROLLBACK: disable meson-mobile.php. */

/* ---------- Global (all sizes) ---------- */
/* Contact Form 7 6.x wraps hidden inputs in a fieldset that the theme draws as an empty box */
.wpcf7 fieldset.hidden-fields-container{display:none!important;border:0!important;padding:0!important;margin:0!important}
/* WhatsApp bubble must not sit on top of the menu, filters or side cart */
body:has(.wd-side-hidden.wd-opened) .ht-ctc,
body:has(.wd-side-hidden.wd-opened) #ht-ctc-chat{display:none!important}

/* ---------- Tablet + phone ---------- */
@media (max-width:1024px){
  .wd-toolbar .wd-toolbar-label{font-size:12px!important}
  /* mobile menu drawer */
  .mobile-nav{background:#fff!important}
  .mobile-nav .wd-nav-mob-tab{border-bottom:1px solid #E3E8F1;margin:0!important}
  .mobile-nav .wd-nav-mob-tab>li>a{font-family:"Sora",sans-serif!important;font-size:14px!important;font-weight:700!important;text-transform:none!important;letter-spacing:0!important;color:#5B6478!important;padding:16px 10px!important;background:transparent!important}
  .mobile-nav .wd-nav-mob-tab>li.wd-active>a{color:#0C2548!important;box-shadow:inset 0 -3px 0 #F26721}
  .mobile-nav .wd-nav-mob-tab .nav-link-text:after{display:none!important}
  .mobile-nav .wd-nav-mobile>li{border-bottom:1px solid #EEF2F8!important}
  .mobile-nav .wd-nav-mobile li>a{font-family:"Cabin",Arial,sans-serif!important;font-size:16px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important;color:#0C2548!important;min-height:52px;padding:14px 20px!important;display:flex!important;align-items:center}
  .mobile-nav .wd-nav-mobile li.current-menu-item>a,.mobile-nav .wd-nav-mobile li.wd-active>a{color:#C94E14!important}
  .mobile-nav .wd-nav-mobile .wd-nav-opener{min-height:52px}
  .mobile-nav .wd-nav-mobile .sub-menu li>a{font-size:15px!important;font-weight:500!important;padding-left:34px!important;min-height:46px}
  .mm-contact{margin:18px 16px 28px;padding:18px;border-radius:18px;background:#0C2548;color:#C9D2E3;font-family:"Cabin",Arial,sans-serif}
  .mm-contact strong{display:block;font-family:"Sora",sans-serif;color:#fff;font-size:16px;margin-bottom:4px}
  .mm-contact p{margin:0 0 14px!important;font-size:14px;line-height:1.45;color:#C9D2E3}
  .mm-contact a.mm-wa{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:12px;background:#25D366;color:#0B2E1A!important;font-weight:700;font-size:15px}
  .mm-contact a.mm-store{display:block;text-align:center;margin-top:10px;color:#FF9A62!important;font-weight:700;font-size:14px;padding:6px 0}
}

/* ---------- Phone ---------- */
@media (max-width:767px){
  /* 1. Use the full phone width: was 35px dead space each side (theme gutter + container padding) */
  :root{--wd-container-w:var(--m-vw,100vw)}
  .container{max-width:100%!important}
  .page-title{max-width:none!important;margin-left:15px!important;margin-right:15px!important}

  /* 2. iPhone zooms into any field under 16px - stop that */
  input[type=text],input[type=email],input[type=tel],input[type=password],input[type=search],input[type=number],input[type=url],input.s,input.qty,select,textarea{font-size:16px!important}

  /* 3. Product card buttons: "Add to c..." / "View det..." were cut off */
  .wd-add-btn>.button>span,.wd-add-btn .add-to-cart-loop>span,.product-grid-item .wd-add-btn a>span{padding-left:0!important;padding-right:0!important;text-overflow:clip!important}
  .product-grid-item .wd-add-btn>.button{padding-left:8px!important;padding-right:8px!important}

  /* 4. Bigger tap targets */
  .mft-link{padding:6px 0}
  .mft-bottom a{display:inline-block;padding:6px 0}
  .wd-products-nav{display:none!important}
  .ms-sort-b{min-height:38px!important;display:inline-flex!important;align-items:center}
  .woocommerce-widget-layered-nav-list .layered-nav-link,.wd-filter-list a{display:inline-block;padding:8px 0!important}

  /* 5. Footer: keep the WhatsApp bubble off the copyright line */
  body:not(.single-product) .footer-container{padding-bottom:170px!important}

  /* 6. Cart order summary: WooCommerce's phone table hid the labels (Subtotal, You save, Delivery, Total) */
  .cart_totals table.shop_table_responsive{width:100%!important;display:table!important}
  .cart_totals .shop_table_responsive tbody{display:table-row-group!important}
  .cart_totals .shop_table_responsive tr{display:table-row!important}
  .cart_totals .shop_table_responsive th{display:table-cell!important;text-align:left!important;vertical-align:middle;padding-right:10px!important}
  .cart_totals .shop_table_responsive td{display:table-cell!important;text-align:right!important;vertical-align:middle;white-space:nowrap}
  .cart_totals .shop_table_responsive td::before{display:none!important}
  /* checkout delivery card: "Rs 300" split over two lines */
  .mc-deliv-row b,.mc-deliv-row strong{white-space:nowrap}

  /* 7. Category description tables (e.g. New laptops) ran off the screen */
  .wd-term-desc table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* 8. Homepage */
  .mh-home{margin-top:-36px}
  .mh-cats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important;overflow:visible!important;padding-bottom:0!important}
  .mh-cats>.mh-tile{flex:none!important;height:150px!important}
  .mh-cats>.mh-cat-used{grid-column:1/-1;height:210px!important}
  .mh-cats>.mh-cat-new{grid-column:1/-1;height:170px!important}
  .mh-cat-new img.mh-pair{width:180px!important;height:146px!important;right:8px!important;bottom:8px!important}
  .mh-cta{padding:18px!important}
  .mh-cta strong{font-size:22px!important;line-height:1.15!important}
  .mh-cta .mh-cta-foot span{font-size:14px}
  .mh-hot{height:auto!important;aspect-ratio:4/3}
  .mh-hot .mh-hot-img,.mh-hot .mh-hot-img img{width:100%;height:100%}

  /* 9. Brand store + Visit store "why" cards: compact rows instead of tall boxes */
  .mv-why-c{display:grid!important;grid-template-columns:48px 1fr;column-gap:14px;row-gap:2px;align-items:start;padding:18px!important}
  .mv-why-c .mv-why-ic{grid-row:span 2;width:48px!important;height:48px!important;margin:0!important}
  .mv-why-c .mv-why-t{margin:2px 0 0!important;font-size:17px!important}
  .mv-why-c .mv-why-d{margin:0!important}

  /* 10. My account: breathing room under the title band, both cards the same width */
  .woocommerce-account .wd-registration-page{padding-top:18px}
  .woocommerce-account .wd-registration-page .row{margin-left:0!important;margin-right:0!important}
  .woocommerce-account .wd-registration-page .row>[class*=col-]{padding-left:0!important;padding-right:0!important}
}

/* ---------- Phone, round 2 ---------- */
@media (max-width:767px){
  /* checkout ran 18px past the right edge (grid column sized to its widest child) */
  form.checkout.woocommerce-checkout{grid-template-columns:minmax(0,1fr)!important}
  /* carousel arrows half off-screen; swiping works on phones */
  .related-products .wd-nav-arrows,.upsells-products .wd-nav-arrows,.wd-products-element .wd-nav-arrows{display:none!important}
  /* less empty space above the title band (cart, checkout, account, wishlist, compare) */
  .page-title{margin-top:6px!important}
}
@media (max-width:767px){
  .mh-cats{grid-template-rows:none!important;grid-auto-rows:auto!important}
  .mh-cats>.mh-cat-used,.mh-cats>.mh-cat-new{grid-row:auto!important}
  .mh-cats .mh-cat-label.mh-ink{background:rgba(255,255,255,.88);padding:4px 10px;border-radius:999px;left:12px;bottom:12px}
}
@media (max-width:767px){
  .mh-hot .mh-dot[aria-label="Ports check"]{left:80%!important}
}
@media (max-width:767px){
  .woocommerce-account .wd-registration-page .row>.col-register-text{padding:26px 20px!important}
  .mbs-page{padding-top:14px}
}

/* ---------- Speed (all sizes, 2026-09-24) ---------- */
/* Entrance animations never start fully invisible: Chrome skips opacity:0 elements when timing Largest Contentful Paint. */
@keyframes m-rise{from{opacity:.2;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes mh-rise{from{opacity:.2;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes ms-rise{from{opacity:.2;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes mpg-rise{from{opacity:.2;transform:translateY(22px)}to{opacity:1;transform:none}}
/* The first 4 product cards and page headings appear immediately (no fade). */
.wd-products .wd-product:nth-child(-n+4),.products .wd-product:nth-child(-n+4){animation:none!important}
.ms-bc,.ms-page .ms-h1,.ms-lead,.ms-chips,.mb-hero .mb-h1,.ma-eyebrow,.ma-page .ma-h1,.ma-lead,.ma-btns{animation:none!important}

/* ---------- Tablet + laptop hero (2026-09-24 device check): text column was taller than the banner,
   the eyebrow got clipped and the second button sat on the slide dots ---------- */
@media (min-width:768px) and (max-width:1200px){
  .mh-slide-text{width:56%;padding:40px 0 66px 40px;gap:16px}
  .mh-hero-title{font-size:clamp(36px,4.4vw,48px)!important}
  .mh-slide-text p{font-size:16px;line-height:1.5}
  .mh-btn{height:50px;padding:0 20px;font-size:15px}
  .mh-dots{left:40px;bottom:26px}
}
@media (min-width:768px) and (max-width:900.98px){
  .mh-slide-text .mh-btn-ghost{display:none}
}
@media (min-width:1200.02px) and (max-width:1799.98px){
  .mh-slide-text{width:54%;padding:42px 0 68px 48px;gap:18px}
  .mh-hero-title{font-size:clamp(40px,3.5vw,50px)!important}
  .mh-slide-text p{font-size:16px;line-height:1.5}
  .mh-btn{height:50px;padding:0 20px;font-size:15px}
  .mh-dots{left:48px;bottom:28px}
}

/* Hero photos ran past the right edge of the banner (up to 100px cut off on tablets). Scale the photo group to the space available. */
@media (min-width:768px) and (max-width:899.98px){.mh-slide-art{transform:scale(.74);transform-origin:left center}}
@media (min-width:900px) and (max-width:1100.98px){.mh-slide-art{transform:scale(.86);transform-origin:left center}}
@media (min-width:1200.02px) and (max-width:1499.98px){.mh-slide-art{transform:scale(.84);transform-origin:left center}}
@media (min-width:1500px) and (max-width:1799.98px){.mh-slide-art{transform:scale(.92)!important;transform-origin:left center}}
@media (min-width:768px) and (max-width:1024.98px){.mh-home{margin-top:-30px}}
@media (min-width:1200.02px) and (max-width:1299.98px){.mh-slide-art{transform:scale(.8)}}