/*
Theme Name: MST International B2B Wholesale Pro v11
Theme URI: https://mstwp.aronawebstudio.com
Author: MST International General Trading LLC
Author URI: https://mstwp.aronawebstudio.com
Description: Premium B2B Mobile Accessories Wholesale WordPress Theme with distinct button colors (WhatsApp Green & Sapphire Blue), mobile responsive toast notifications, compact cart buttons, individual HD product photos, PayBy QR payment, and Dubai AED pricing.
Version: 11.0.1
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: mst-international-v11
*/

:root{--blue:#0068d9;--navy:#072b61;--cyan:#009cee;--ink:#152237;--muted:#637082;--line:#e6ecf3;--soft:#f5f7fb;font-family:'DM Sans',sans-serif;color:var(--ink);background:#fff;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:140px}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a,button,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #00a0ed;outline-offset:5px}.wrap{width:min(1280px,calc(100% - 96px));margin:auto}.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-definitions{position:absolute;width:0;height:0;overflow:hidden}.topbar{background:#f0f6fd;border-bottom:1px solid #e6eff9;color:#355677;font-size:12px}.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:35px;gap:16px}.topbar a{display:flex;align-items:center;gap:7px}.topbar .icon{width:13px;height:13px}header{position:sticky;top:0;z-index:20;background:#ffffffef;backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.nav{display:flex;align-items:center;justify-content:space-between;gap:35px;height:118px}.brand{height:64px;width:auto;max-width:180px;display:inline-flex;align-items:center;position:relative;flex-shrink:0;overflow:visible}.brand img{position:static;height:56px;width:auto;max-height:56px;max-width:170px;object-fit:contain;display:block;mix-blend-mode:multiply}nav{display:flex;gap:38px;font-size:14px;font-weight:600;margin-left:auto;margin-right:28px}nav a{padding:12px 0}nav a:hover{color:var(--blue)}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:14px 23px;border:1px solid transparent;border-radius:7px;background:var(--blue);color:white;font-size:14px;font-weight:600;line-height:1.4;transition:background .2s,transform .2s}.button:hover{background:#0055b5;transform:translateY(-2px)}.button-white{background:white;color:var(--ink);border-color:#d9e3ef}.button-white:hover{background:#edf5ff}.menu-toggle{display:none}.hero{margin-top:30px;display:grid;grid-template-columns:1fr 1.04fr;background:#f0f5fb;border-radius:15px;overflow:hidden;min-height:430px}.hero-copy{padding:56px 0 50px 48px;position:relative;z-index:1}.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.3px;color:var(--blue);margin:0 0 18px;line-height:1.6}h1,h2,h3{font-family:'Manrope',sans-serif;margin-top:0}h1{font-size:clamp(35px,3.65vw,52px);font-weight:750;letter-spacing:-2px;line-height:1.19;margin-bottom:21px}h1 span{color:var(--blue)}.hero-copy>p:not(.eyebrow){font-size:16px;line-height:1.8;color:var(--muted);margin:0 0 26px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-tags{display:flex;align-items:center;gap:16px;font-size:12px;color:#60758c;margin-top:28px}.hero-tags i{height:3px;width:3px;background:#7391b1;border-radius:50%}.hero-visual{overflow:hidden;position:relative;min-width:0}.hero-visual img{width:100%;height:100%;object-fit:cover;object-position:center;mix-blend-mode:multiply;display:block}.hero-visual:before{content:'';position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,#f0f5fb 0%,transparent 19%);pointer-events:none}.catalogue{padding-top:64px;padding-bottom:58px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:28px}.section-heading .eyebrow{margin-bottom:11px}h2{font-size:34px;font-weight:700;line-height:1.25;letter-spacing:-1.25px;margin-bottom:0}.section-heading>p{font-size:14px;color:var(--muted);margin-bottom:3px}.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:29px}.filters button{border:1px solid var(--line);background:white;border-radius:6px;padding:11px 18px;font-size:14px;font-weight:500;transition:all .18s;min-height:43px}.filters button:hover{color:var(--blue);border-color:#97bdea}.filters button.selected{background:var(--blue);border-color:var(--blue);color:white}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 22px}.product-card{min-width:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:white;transition:box-shadow .2s,transform .2s}.product-card:hover{box-shadow:0 9px 30px #0b34700d;transform:translateY(-3px)}.product-view{padding:0;border:0;width:100%;display:block;position:relative;background:var(--soft);overflow:hidden}.product-image{display:block;width:100%;aspect-ratio:1;background-size:300% 200%;background-repeat:no-repeat;background-color:var(--soft)}.view-label{position:absolute;bottom:14px;left:50%;transform:translate(-50%,5px);background:#ffffffed;border:1px solid #e5ebf2;padding:7px 12px;font-size:12px;white-space:nowrap;border-radius:5px;opacity:0;transition:all .2s}.product-view:hover .view-label,.product-view:focus-visible .view-label{opacity:1;transform:translate(-50%,0)}.product-info{padding:20px}.product-info>p{font-size:12px;color:var(--muted);margin:0 0 7px}.product-info h3{font-size:17px;letter-spacing:-.4px;margin:0 0 18px;line-height:1.5}.product-info h3 button{padding:0;text-align:left;border:0;background:transparent;font:inherit}.product-info h3 button:hover{color:var(--blue)}.product-enquire{border-top:1px solid var(--line);padding-top:14px;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--blue);font-weight:600}.product-enquire .icon{width:17px;height:17px}.product-enquire:hover{text-decoration:underline;text-underline-offset:3px}.catalogue-note{font-size:12px;color:var(--muted);text-align:center;margin:27px 0 0;line-height:1.7}.visit{display:grid;grid-template-columns:1fr 1fr;gap:70px;background:#eff6ff;border:1px solid #e3eefa;border-radius:12px;padding:44px 50px;margin-bottom:55px}.visit-heading h2{font-size:30px;margin-bottom:14px}.visit-heading>p:not(.eyebrow){font-size:16px;color:var(--muted);margin:0 0 23px;line-height:1.6}.visit-heading .eyebrow{margin-bottom:12px}.contact-details{display:flex;flex-direction:column;gap:23px;border-left:1px solid #d4e3f3;padding-left:45px}.contact-details>div{display:flex;gap:16px}.contact-details>.icon,.contact-details .icon{color:var(--blue);margin-top:2px}.contact-details h3{font-size:14px;margin-bottom:8px}.contact-details p{font-size:14px;line-height:1.7;color:var(--muted);margin:0}.phone-number{font-size:21px;display:inline-block;margin:0 0 6px;font-weight:600;color:var(--navy)}footer{border-top:1px solid var(--line)}.footer-inner{display:flex;justify-content:space-between;gap:25px;align-items:center;padding-top:15px;padding-bottom:15px}.footer-brand{width:124px;height:91px}.footer-brand img{width:124px;height:124px;top:-18px}.footer-inner p{font-size:12px;color:var(--muted)}.footer-inner>a:last-child{font-size:14px;color:var(--blue)}dialog{border:0;border-radius:12px;width:min(820px,calc(100% - 32px));max-height:90vh;padding:28px;color:var(--ink);box-shadow:0 30px 120px #0004}dialog::backdrop{background:#071c3a80;backdrop-filter:blur(5px)}.dialog-layout{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}.dialog-layout>.product-image{border-radius:8px}.dialog-copy{padding:25px 0}.dialog-copy .eyebrow{margin-bottom:10px}.dialog-copy h2{font-size:29px;margin-bottom:18px}.dialog-copy>p:not(.eyebrow){font-size:16px;line-height:1.7;color:var(--muted)}.dialog-copy .availability-note{font-size:14px!important}.dialog-copy .button{margin-top:10px}.dialog-close{position:absolute;top:12px;right:12px;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:#edf2f7;z-index:1}.skip{position:fixed;top:-60px;left:16px;z-index:100;background:var(--blue);color:#fff;padding:12px}.skip:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){.hero{min-height:470px}.hero-copy{padding-top:66px}.hero-visual img{object-position:center 58%}}
@media(max-width:1100px){.wrap{width:calc(100% - 56px)}.nav{gap:25px}nav{gap:25px;margin-right:0}.hero-copy{padding:40px 0 40px 32px}.hero{min-height:390px;grid-template-columns:1.1fr 1fr}h1{font-size:40px;letter-spacing:-1.6px}.hero-actions .button{padding:12px 16px}.product-grid{gap:22px 16px}.product-info{padding:16px}.product-info h3{font-size:16px}.visit{padding:36px;gap:35px}.contact-details{padding-left:30px}}
@media(max-width:800px){.wrap{width:calc(100% - 40px)}html{scroll-padding-top:112px}.nav{height:98px;gap:20px}.brand{width:133px;height:94px}.brand img{width:133px;height:133px;top:-20px}nav{display:none;position:absolute;top:98px;left:0;right:0;background:white;padding:18px 25px;box-shadow:0 15px 24px #1231;flex-direction:column;gap:6px}nav.open{display:flex}.menu-toggle{display:flex;flex-direction:column;gap:6px;border:0;background:none;padding:10px 0 10px 8px}.menu-toggle span{width:23px;height:2px;background:var(--navy)}.header-cta{margin-left:auto}.hero{margin-top:22px;grid-template-columns:1.1fr 1fr;min-height:340px}.hero-copy{padding:31px 0 31px 26px}h1{font-size:33px;letter-spacing:-1.2px}.hero-copy .eyebrow{font-size:10px}.hero-copy>p:not(.eyebrow){font-size:14px}.hero-actions{gap:8px}.hero-actions .button{font-size:12px;padding:11px 13px;min-height:43px}.hero-tags{font-size:11px;margin-top:21px}.hero-visual img{object-position:45% center}.catalogue{padding-top:44px}.section-heading h2{font-size:29px}.section-heading>p{font-size:12px}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 14px}.product-info{padding:14px}.product-info h3{font-size:15px}.product-info>p{font-size:12px}.product-enquire{font-size:14px}.filters button{padding:10px 14px;font-size:14px}.visit{gap:30px;padding:29px}.visit-heading h2{font-size:26px}.contact-details{padding-left:25px}.phone-number{font-size:19px}.footer-brand{width:115px;height:85px}.footer-brand img{width:115px;height:115px;top:-17px}.footer-inner p{max-width:240px;line-height:1.7}.dialog-layout{gap:20px}.dialog-copy h2{font-size:26px}}
@media(max-width:580px){.wrap{width:calc(100% - 32px)}.topbar{font-size:10px}.topbar .wrap{min-height:31px;gap:6px}.topbar .icon{display:none}.nav{height:91px;gap:14px}.brand{width:125px;height:89px}.brand img{width:125px;height:125px;top:-19px}.header-cta{padding:11px 12px;min-height:42px;font-size:12px;gap:6px}.header-cta .icon{width:17px;height:17px}.menu-toggle{padding-left:0}nav{top:91px}.hero{grid-template-columns:1fr;margin-top:16px;border-radius:11px}.hero-copy{padding:30px 24px 8px}.hero-copy .eyebrow{font-size:10px;letter-spacing:1.1px;margin-bottom:16px}h1{font-size:clamp(30px,8.8vw,43px);letter-spacing:-1.5px;line-height:1.2;margin-bottom:17px}.hero-copy>p:not(.eyebrow){font-size:15px;line-height:1.7;margin-bottom:22px}.hero-actions .button{font-size:13px;min-height:45px;padding:12px 15px}.hero-tags{display:none}.hero-visual{height:265px}.hero-visual img{object-fit:cover;object-position:center 58%}.hero-visual:before{background:linear-gradient(180deg,#f0f5fb 0%,transparent 24%)}.catalogue{padding-top:36px;padding-bottom:36px}.section-heading{display:block;margin-bottom:21px}.section-heading .eyebrow{font-size:10px;margin-bottom:10px}.section-heading h2{font-size:28px}.section-heading>p{font-size:12px;margin:11px 0 0}.filters{gap:7px;margin-bottom:22px}.filters button{font-size:12px;padding:9px 12px;min-height:38px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 11px}.product-info{padding:13px 12px}.product-info h3{font-size:14px;letter-spacing:-.3px;margin-bottom:13px;min-height:42px}.product-info>p{font-size:11px}.product-enquire{font-size:12px;gap:6px;padding-top:12px}.product-enquire .icon{width:15px;height:15px}.product-card{border-radius:8px}.catalogue-note{font-size:12px;text-align:left;margin-top:22px}.visit{grid-template-columns:1fr;padding:28px 24px;gap:28px;margin-bottom:34px}.visit-heading .eyebrow{font-size:10px}.visit-heading h2{font-size:27px}.visit-heading>p:not(.eyebrow){font-size:15px}.contact-details{border-left:0;border-top:1px solid #d4e3f3;padding:25px 0 0;gap:23px}.phone-number{font-size:22px}.contact-details p{font-size:14px}.footer-inner{display:grid;grid-template-columns:1fr auto;gap:6px 15px;padding:16px 0 24px}.footer-brand{grid-column:1;grid-row:1;width:115px;height:84px}.footer-brand img{width:115px;height:115px;top:-17px}.footer-inner>a:last-child{grid-column:2;grid-row:1;font-size:12px}.footer-inner p{max-width:none;font-size:11px;margin:8px 0 0;grid-column:1/-1}.dialog-layout{grid-template-columns:1fr;gap:20px}.dialog-layout>.product-image{width:min(100%,290px);margin:auto}.dialog-copy{padding:0}.dialog-copy h2{font-size:25px}dialog{padding:25px 21px}.dialog-copy>p:not(.eyebrow){font-size:15px}.dialog-copy .button{width:100%}.dialog-copy .eyebrow{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
/* Keep catalogue controls readable on compact screens. */
.filters button,.product-enquire{font-size:14px}.product-info>p{font-size:12px}
@media(max-width:580px){.hero-copy>p:not(.eyebrow){font-size:16px}.hero-actions{gap:8px}.header-cta{font-size:13px}.filters button{padding:9px 11px}.product-enquire{gap:5px}.product-info{padding:13px 11px}}
/* Store details and Google Map */
.visit{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:stretch;gap:38px;padding:38px}
.visit-information{min-width:0;padding:5px 0}
.visit-information .contact-details{border:0;padding:0;margin-top:27px;gap:20px}
.store-map{min-width:0;min-height:430px;border:1px solid #d5e3f2;border-radius:9px;overflow:hidden;background:#e6eef8;display:flex;flex-direction:column}
.store-map iframe{display:block;width:100%;height:100%;flex:1;min-height:375px;border:0}
.store-map>a{display:block;text-align:center;padding:14px 16px;background:white;color:var(--blue);font-size:14px;font-weight:600;border-top:1px solid var(--line)}
.store-map>a:hover{background:#f5f9ff}
@media(max-width:800px){.visit{padding:28px;gap:25px;grid-template-columns:1fr}.store-map{min-height:340px}.store-map iframe{height:320px;min-height:320px;flex:auto}.visit-information .contact-details{display:grid;grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:580px){.visit{padding:25px 20px;gap:26px}.visit-information .contact-details{display:flex;gap:22px}.store-map{min-height:310px}.store-map iframe{height:280px;min-height:280px}}
/* Product-led category highlights */
.category-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:23px}
.category-feature{position:relative;display:flex;align-items:center;text-align:left;min-height:182px;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#f5f7fb;padding:24px;transition:box-shadow .2s,border-color .2s}
.category-feature:hover{border-color:#9ac5ef;box-shadow:0 8px 24px #0b34700d}
.feature-copy{position:relative;z-index:1;display:flex;flex-direction:column;width:65%;gap:11px}
.feature-copy .eyebrow{margin:0;font-size:10px}
.feature-copy strong{font-family:'Manrope',sans-serif;font-size:18px;font-weight:700;line-height:1.5;letter-spacing:-.5px}
.feature-caption{font-size:12px;color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.feature-image{position:absolute;width:46%;right:-3%;bottom:9%;mix-blend-mode:multiply;opacity:.95}
.product-help{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:25px 29px;background:#f3f7fc;border:1px solid #e5eef8;border-radius:9px;margin-top:29px}
.product-help h3{font-size:18px;letter-spacing:-.4px;margin:0 0 8px}
.product-help p{font-size:14px;line-height:1.7;color:var(--muted);margin:0}
.product-help .button{flex-shrink:0}
.visit{grid-template-columns:minmax(0,.95fr) minmax(0,.85fr) minmax(0,1.1fr);gap:27px;padding:32px;align-items:center}
.visit-heading h2{font-size:28px}.visit>.contact-details{border-left:1px solid #d4e3f3;padding-left:24px;gap:25px}
.store-map{height:350px;min-height:350px;align-self:stretch}
.store-map iframe{flex:1 1 auto;width:100%;height:300px;min-height:0}.store-map>a{flex:0 0 auto;font-size:14px}
@media(max-width:1100px){.category-feature{padding:19px;min-height:174px}.feature-copy strong{font-size:16px}.visit{grid-template-columns:1fr 1fr;gap:27px;padding:30px}.store-map{grid-column:1/-1;height:330px;min-height:330px}.visit-heading h2{font-size:29px}}
@media(max-width:800px){.category-highlights{gap:11px}.category-feature{padding:17px 15px;min-height:198px;align-items:flex-start}.feature-copy{width:100%;gap:8px}.feature-copy strong{font-size:14px}.feature-image{width:43%;right:1%;bottom:4%}.feature-caption{margin-top:23px;font-size:11px}.product-help{padding:23px;gap:18px}.product-help h3{font-size:17px}.product-help .button{padding:12px 16px;font-size:13px}}
@media(max-width:580px){.category-highlights{grid-template-columns:1fr;gap:10px;margin-top:16px}.category-feature{padding:18px 21px;min-height:144px;align-items:center}.feature-copy{width:70%;gap:8px}.feature-copy strong{font-size:18px;line-height:1.4}.feature-caption{margin-top:0;font-size:12px}.feature-image{width:35%;max-width:140px;right:3%;bottom:0}.product-help{flex-direction:column;align-items:flex-start;padding:22px;gap:18px}.product-help p{font-size:14px}.visit{grid-template-columns:1fr;padding:25px 20px;gap:25px}.visit>.contact-details{border-left:0;border-top:1px solid #d4e3f3;padding:24px 0 0;display:flex;gap:23px}.store-map{grid-column:auto;height:325px;min-height:325px}.store-map iframe{height:280px;min-height:0}}
.language-switch{display:flex;flex-shrink:0;direction:ltr;border:1px solid #d8e5f4;border-radius:6px;overflow:hidden;background:#fff}.language-switch button{border:0;background:none;font-size:13px;font-weight:600;padding:10px 11px;min-height:42px}.language-switch button[aria-pressed="true"]{background:var(--blue);color:#fff}.language-switch button[lang="ar"]{font-family:'Noto Sans Arabic',Tahoma,sans-serif}.nav{gap:20px}nav{margin-right:0;gap:26px}a[href^="tel:"]{direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] body,html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{font-family:'Noto Sans Arabic',Tahoma,sans-serif;letter-spacing:0}html[dir="rtl"] .eyebrow{letter-spacing:0}html[dir="rtl"] h1{line-height:1.55;font-size:clamp(32px,3.3vw,46px)}html[dir="rtl"] h2,html[dir="rtl"] h3{line-height:1.65}html[dir="rtl"] nav{margin-left:0;margin-right:auto}html[dir="rtl"] .hero-copy{padding-left:0;padding-right:48px}html[dir="rtl"] .hero-visual:before{background:linear-gradient(270deg,#f0f5fb 0%,transparent 19%)}html[dir="rtl"] .product-info h3 button,html[dir="rtl"] .category-feature{text-align:right}html[dir="rtl"] .feature-image{right:auto;left:-3%}html[dir="rtl"] .visit>.contact-details{border-left:0;border-right:1px solid #d4e3f3;padding-left:0;padding-right:24px}html[dir="rtl"] .dialog-close{right:auto;left:12px}
@media(max-width:1100px){html[dir="rtl"] .hero-copy{padding-right:32px}}
@media(max-width:800px){.nav{gap:14px}.header-cta{margin-left:auto}.header-cta span{display:none}.header-cta{padding:11px}.language-switch button{padding:9px}.nav .brand{width:125px}html[dir="rtl"] .header-cta{margin-left:0;margin-right:auto}html[dir="rtl"] nav{margin:0}html[dir="rtl"] .hero-copy{padding-right:26px}html[dir="rtl"] .feature-image{left:1%}}
@media(max-width:580px){.nav{gap:9px}.nav .brand{width:105px;height:80px}.nav .brand img{width:105px;height:105px;top:-12px}.language-switch button{font-size:12px;padding:8px;min-height:40px}html[dir="rtl"] .hero-copy{padding:30px 24px 8px}html[dir="rtl"] .hero-visual:before{background:linear-gradient(180deg,#f0f5fb 0%,transparent 24%)}html[dir="rtl"] .feature-image{left:3%}html[dir="rtl"] .visit>.contact-details{border-right:0;padding:24px 0 0}html[dir="rtl"] .catalogue-note{text-align:right}html[dir="rtl"] h1{font-size:32px}}


/* =============================================================================
   ENHANCED MENU HOVER EFFECTS & ANIMATIONS
   ============================================================================= */

/* Brand Logo Smooth Hover */
.brand img {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}
.brand:hover img {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 12px rgba(0, 104, 217, 0.15));
}

/* Nav Links - Modern Sliding Gradient Underline & Soft Pill Highlight */
nav a {
  padding: 8px 16px;
  border-radius: 8px;
  position: relative;
  transition: color 0.25s ease, background-color 0.25s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 16px;
  right: 16px;
  height: 2.5px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

nav a:hover {
  color: var(--blue);
  background-color: rgba(0, 104, 217, 0.06);
  transform: translateY(-1.5px);
}

nav a:hover::after {
  transform: scaleX(1);
}

nav a:active {
  transform: translateY(0);
}

/* Topbar Call Link Hover */
.topbar a {
  transition: color 0.2s ease, transform 0.2s ease;
}
.topbar a:hover {
  color: var(--blue);
  transform: translateY(-0.5px);
}

/* Language Switcher Animated Hover */
.language-switch button {
  transition: all 0.25s ease;
}
.language-switch button:not([aria-pressed="true"]):hover {
  background: var(--soft);
  color: var(--blue);
}

/* WhatsApp Header CTA Breathing Glow on Hover */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(0, 104, 217, 0.3); }
  50% { box-shadow: 0 6px 22px rgba(0, 104, 217, 0.55); }
}

.header-cta {
  box-shadow: 0 4px 14px rgba(0, 104, 217, 0.25);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-cta:hover {
  animation: glowPulse 2s infinite;
  transform: translateY(-2px);
}

.header-cta .icon {
  transition: transform 0.25s ease;
}

.header-cta:hover .icon {
  transform: scale(1.15) rotate(-5deg);
}

/* =============================================================================
   HERO SECTION ENTRANCE & FLOATING ANIMATIONS
   ============================================================================= */

@keyframes heroFadeUp {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-copy {
  animation: heroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Gentle Organic Float for Hero Essentials Visual */
@keyframes floatHeroVisual {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.008);
  }
}

.hero-visual img {
  animation: floatHeroVisual 6s ease-in-out infinite;
  transition: transform 0.5s ease;
}

.hero:hover .hero-visual img {
  animation-play-state: paused;
  transform: scale(1.025);
}

/* Hero Action Buttons Hover */
.hero-actions .button {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-actions .button:hover {
  transform: translateY(-2.5px);
  box-shadow: 0 8px 22px rgba(0, 104, 217, 0.25);
}

.hero-actions .button-white:hover {
  border-color: #97bdea;
  box-shadow: 0 6px 18px rgba(7, 43, 97, 0.08);
}

.hero-actions .button .icon {
  transition: transform 0.25s ease;
}

.hero-actions .button:hover .icon {
  transform: translateY(-1.5px);
}

/* Hero Tags Hover Pill Effect */
.hero-tags span {
  padding: 3px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.hero-tags span:hover {
  background: rgba(0, 104, 217, 0.08);
  color: var(--blue);
  cursor: default;
}

/* =============================================================================
   CATEGORY HIGHLIGHT CARDS - 3D LIFT & ZOOM
   ============================================================================= */

.category-feature {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.category-feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 38px rgba(7, 43, 97, 0.09);
  border-color: #9ac5ef;
}

.category-feature .feature-image {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.category-feature:hover .feature-image {
  transform: scale(1.08) rotate(1deg);
  opacity: 1;
}

.category-feature .feature-caption {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.25s ease, color 0.25s ease;
}

.category-feature:hover .feature-caption {
  gap: 8px;
  color: #004fb0;
}

/* =============================================================================
   CATALOGUE & PRODUCT CARDS - DYNAMIC ANIMATIONS
   ============================================================================= */

/* Filter Buttons Interactive Polish */
.filters button {
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.filters button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 104, 217, 0.12);
}

.filters button.selected {
  box-shadow: 0 4px 16px rgba(0, 104, 217, 0.32);
  transform: translateY(-1.5px);
}

/* Staggered Smooth Entrance when Filtered */
@keyframes cardEnter {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-card {
  animation: cardEnter 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(11, 52, 112, 0.11);
  border-color: #bcd7f5;
}

.product-view .product-image {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-view:hover .product-image {
  transform: scale(1.065);
}

.product-info h3 button {
  transition: color 0.2s ease;
}

/* Add to Cart Card Button Micro-Interaction */
.btn-card-add {
  position: relative;
  overflow: hidden;
}

.btn-card-add::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}

.btn-card-add:hover::before {
  transform: translateX(100%);
}

.btn-card-add:active {
  transform: scale(0.95);
}

.btn-card-add .icon {
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-card-add:hover .icon {
  transform: scale(1.2) translateY(-1px);
}

.product-enquire {
  transition: color 0.2s ease, transform 0.2s ease;
}

.product-enquire:hover {
  color: #004fb0;
  transform: translateX(3px);
}

html[dir="rtl"] .product-enquire:hover {
  transform: translateX(-3px);
}

.product-enquire .icon {
  transition: transform 0.2s ease;
}

.product-enquire:hover .icon {
  transform: scale(1.15);
}

/* Product Help Banner Hover */
.product-help {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-help:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(7, 43, 97, 0.05);
}

/* =============================================================================
   STORE SECTION & MAP ANIMATIONS
   ============================================================================= */

.contact-details > div {
  padding: 10px 14px;
  border-radius: 8px;
  transition: all 0.25s ease;
}

.contact-details > div:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: translateX(5px);
  box-shadow: 0 3px 12px rgba(7, 43, 97, 0.04);
}

html[dir="rtl"] .contact-details > div:hover {
  transform: translateX(-5px);
}

.store-map {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.store-map:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(11, 52, 112, 0.12);
}

/* =============================================================================
   SCROLL REVEAL UTILITY (SMOOTH SCROLL FADE-IN)
   ============================================================================= */

.reveal-fade-up {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-fade-up.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================================================
   SHOPPING CART & ADD-TO-CART ENHANCEMENTS
   ============================================================================= */

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.header-cart-btn {
  background: white;
  border: 1px solid #d9e3ef;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 11px 18px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  cursor: pointer;
}

.header-cart-btn:hover {
  background: var(--soft);
  border-color: #97bdea;
  color: var(--blue);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 14px rgba(0, 104, 217, 0.1);
}

.header-cart-btn:active {
  transform: translateY(0);
}

.header-cart-btn .icon {
  width: 18px;
  height: 18px;
  color: var(--blue);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.header-cart-btn:hover .icon {
  transform: scale(1.15) rotate(-6deg);
}

.cart-badge {
  background: var(--blue);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  min-width: 19px;
  text-align: center;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.badge-pop {
  animation: badgePulse 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes badgePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* Product Card Actions */
.product-card-bottom {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-card-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #edf5ff;
  border: 1px solid #d0e4fa;
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.btn-card-add:hover {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px rgba(0, 104, 217, 0.2);
}

.btn-card-add .icon {
  width: 15px;
  height: 15px;
}

.product-card-bottom .product-enquire {
  border-top: 0;
  padding-top: 0;
  font-size: 13px;
}

/* Modal Dialog Actions */
.dialog-actions-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.dialog-actions-row .button {
  margin-top: 0;
}

/* Cart Overlay & Drawer */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 28, 58, 0.45);
  backdrop-filter: blur(4px);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cart-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(450px, 100%);
  background: white;
  z-index: 100;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

html[dir="rtl"] .cart-drawer {
  right: auto;
  left: 0;
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.15);
  transform: translateX(-100%);
}

.cart-drawer.open {
  transform: translateX(0);
}

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
  background: #fcfdfe;
}

.cart-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-header-title h2 {
  font-size: 20px;
  margin: 0;
  font-family: 'Manrope', sans-serif;
  letter-spacing: -0.4px;
}

.cart-header-title .icon {
  width: 22px;
  height: 22px;
  color: var(--blue);
}

.cart-count-pill {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.cart-close-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  background: #f1f5f9;
  border-radius: 50%;
  color: #475569;
  transition: all 0.2s;
  cursor: pointer;
}

.cart-close-btn:hover {
  background: #e2e8f0;
  color: var(--ink);
  transform: rotate(90deg);
}

.cart-close-btn .icon {
  width: 18px;
  height: 18px;
}

.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Empty Cart State */
.cart-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  gap: 14px;
  margin: auto;
}

.cart-empty-icon {
  width: 64px;
  height: 64px;
  stroke: #94a3b8;
  fill: none;
  stroke-width: 1.5;
  margin-bottom: 6px;
  animation: floatHeroVisual 4s ease-in-out infinite;
}

.cart-empty-state h3 {
  font-size: 19px;
  margin: 0;
  color: var(--ink);
}

.cart-empty-state p {
  font-size: 14px;
  color: var(--muted);
  max-width: 280px;
  margin: 0 0 10px;
  line-height: 1.6;
}

/* Cart Item */
.cart-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfe;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.cart-item:hover {
  border-color: #cbdcf2;
  box-shadow: 0 3px 12px rgba(11, 52, 112, 0.04);
  transform: translateY(-1px);
}

.cart-item-img {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  border-radius: 8px;
  background-color: var(--soft);
  background-size: 300% 200%;
  border: 1px solid #e3edf8;
  transition: transform 0.3s ease;
}

.cart-item:hover .cart-item-img {
  transform: scale(1.04);
}

.cart-item-details {
  flex: 1;
  min-width: 0;
}

.cart-item-category {
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cart-item-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Manrope', sans-serif;
}

.cart-item-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-qty-control {
  display: flex;
  align-items: center;
  border: 1px solid #d4e2f2;
  background: white;
  border-radius: 6px;
  overflow: hidden;
}

.btn-qty {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  background: white;
  color: var(--ink);
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
}

.btn-qty:hover {
  background: #edf5ff;
  color: var(--blue);
}

.btn-qty:active {
  transform: scale(0.9);
}

.btn-qty .icon {
  width: 12px;
  height: 12px;
}

.qty-display {
  min-width: 32px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.btn-remove-item {
  border: 0;
  background: transparent;
  color: #94a3b8;
  padding: 6px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  transition: all 0.2s;
  cursor: pointer;
}

.btn-remove-item:hover {
  color: #ef4444;
  background: #fee2e2;
  transform: scale(1.1);
}

.btn-remove-item .icon {
  width: 16px;
  height: 16px;
}

/* Cart Footer */
/* Cart Footer */
.cart-footer {
  border-top: 1px solid var(--line);
  padding: 14px 18px;
  background: #fbfcfe;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex-shrink: 0;
}

.cart-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.cart-summary-row strong {
  font-size: 16px;
  color: var(--blue);
}

.cart-total-amount-row .cart-grand-amount {
  font-size: 18px;
  font-weight: 800;
  color: #0068d9;
}

.cart-notes-field {
  width: 100%;
}

.cart-note-input {
  width: 100%;
  height: 36px;
  padding: 8px 12px;
  font-size: 12.5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cart-note-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 104, 217, 0.12);
}

.cart-actions-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.cart-checkout-btn {
  flex: 1;
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  background: linear-gradient(135deg, #25D366 0%, #1EBE5D 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px;
  box-shadow: 0 3px 10px rgba(37, 211, 102, 0.25) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  cursor: pointer;
}

.cart-checkout-btn:hover {
  background: linear-gradient(135deg, #20BD5A 0%, #17A34E 100%) !important;
  transform: translateY(-1.5px);
  box-shadow: 0 5px 14px rgba(37, 211, 102, 0.35) !important;
}

.cart-checkout-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
  box-shadow: none;
}

.cart-checkout-btn .icon {
  width: 16px !important;
  height: 16px !important;
}

.btn-payby-qr {
  flex: 1;
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  background: linear-gradient(135deg, #0068d9 0%, #0052ad 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px;
  box-shadow: 0 3px 10px rgba(0, 104, 217, 0.28) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  cursor: pointer;
}

.btn-payby-qr:hover {
  background: linear-gradient(135deg, #0056b3 0%, #00438c 100%) !important;
  transform: translateY(-1.5px);
  box-shadow: 0 5px 14px rgba(0, 104, 217, 0.38) !important;
}

.btn-payby-qr .icon {
  width: 15px !important;
  height: 15px !important;
}

.btn-payby-qr:disabled {
  opacity: 0.5;
  pointer-events: none;
  box-shadow: none;
}

.cart-secondary-actions-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.btn-share-image {
  flex: 1;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  background: #072b61 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  box-shadow: 0 2px 8px rgba(7, 43, 97, 0.2) !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  cursor: pointer;
}

.btn-share-image:hover {
  background: #0b3d88 !important;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px rgba(7, 43, 97, 0.3) !important;
}

.btn-share-image .icon {
  width: 15px !important;
  height: 15px !important;
}

.cart-clear-btn {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--muted) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  cursor: pointer;
}

.cart-clear-btn:hover {
  color: #ef4444 !important;
  border-color: #fca5a5 !important;
  background: #fef2f2 !important;
}

@media (max-width: 640px) {
  .cart-footer {
    padding: 10px 14px !important;
    gap: 7px !important;
  }
  .cart-checkout-btn {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 11.5px !important;
    padding: 0 8px !important;
    gap: 5px !important;
    background: linear-gradient(135deg, #25D366 0%, #1EBE5D 100%) !important;
    color: #ffffff !important;
  }
  .btn-payby-qr {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 11.5px !important;
    padding: 0 8px !important;
    gap: 5px !important;
    background: linear-gradient(135deg, #0068d9 0%, #0052ad 100%) !important;
    color: #ffffff !important;
  }
  .cart-checkout-btn .icon,
  .btn-payby-qr .icon {
    width: 14px !important;
    height: 14px !important;
  }
  .btn-share-image {
    min-height: 34px !important;
    height: 34px !important;
    font-size: 11.5px !important;
    padding: 0 8px !important;
  }
  .cart-clear-btn {
    min-height: 34px !important;
    height: 34px !important;
    font-size: 11.5px !important;
    padding: 0 10px !important;
  }
  .cart-note-input {
    height: 32px !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
  .cart-summary-row {
    font-size: 12px !important;
  }
  .cart-summary-row strong {
    font-size: 14px !important;
  }
  .cart-total-amount-row .cart-grand-amount {
    font-size: 15.5px !important;
  }
}

/* Toast Notification with Fluid Responsive Entrance */
.toast-notification {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  width: auto;
  min-width: 320px;
  max-width: min(92vw, 460px);
  background: #072b61;
  color: white;
  padding: 10px 16px 10px 18px;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 12px 32px rgba(7, 43, 97, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  box-sizing: border-box;
}

.toast-notification.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.toast-content-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
}

.toast-check-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #22c55e;
  color: white;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#toast-message {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toast-btn {
  background: #0068d9;
  color: white;
  border: 0;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap !important;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.2s;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 104, 217, 0.3);
}

.toast-btn:hover {
  background: #0056b3;
  transform: scale(1.04);
}

@media (max-width: 640px) {
  .toast-notification {
    bottom: 84px !important;
    left: 16px !important;
    right: 16px !important;
    transform: translateY(80px) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    gap: 10px !important;
  }
  .toast-notification.visible {
    transform: translateY(0) !important;
  }
  #toast-message {
    font-size: 12.5px !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    line-height: 1.35 !important;
  }
  .toast-btn {
    font-size: 11.5px !important;
    padding: 7px 13px !important;
    min-height: 32px !important;
  }
}

/* Responsive tweaks */
@media(max-width: 800px) {
  .header-actions {
    gap: 8px;
  }
  .header-cart-btn {
    padding: 9px 12px;
    min-height: 42px;
    font-size: 13px;
  }
  .header-cart-btn .cart-btn-text {
    display: none;
  }
  nav a {
    padding: 10px 14px;
  }
}

@media(max-width: 580px) {
  .cart-drawer {
    width: 100%;
  }
  .product-card-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .btn-card-add, .product-card-bottom .product-enquire {
    width: 100%;
    justify-content: center;
  }
}

/* =============================================================================
   PAYBY QR PURCHASE & CHECKOUT MODAL
   ============================================================================= */

.cart-payby-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  margin-bottom: 2px;
}

.payby-pill-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: #15803d;
}

.payby-green-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
  animation: badgePulse 2s infinite;
}

.btn-view-qr-link {
  border: 0;
  background: transparent;
  color: #16a34a;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 4px;
  transition: all 0.2s;
}

.btn-view-qr-link:hover {
  background: #dcfce7;
  color: #15803d;
}

.btn-view-qr-link .icon {
  width: 14px;
  height: 14px;
}

.btn-payby-qr {
  flex: 1;
  background: linear-gradient(135deg, #0068d9 0%, #0052ad 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 3px 10px rgba(0, 104, 217, 0.28) !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer;
}

.btn-payby-qr:hover {
  background: linear-gradient(135deg, #0056b3 0%, #00438c 100%) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 5px 14px rgba(0, 104, 217, 0.38) !important;
}

.btn-payby-qr .icon {
  width: 16px;
  height: 16px;
}

.btn-payby-qr:disabled {
  opacity: 0.5;
  pointer-events: none;
  box-shadow: none;
}

/* Modal Dialog Buy Now with QR */
.button-payby {
  background: #00A859;
  color: white;
  border-color: #00A859;
}
.button-payby:hover {
  background: #008444;
}

/* Payment Dialog Modal */
dialog.payment-dialog {
  border: 0;
  border-radius: 14px;
  width: min(860px, calc(100% - 32px));
  max-height: 92vh;
  padding: 28px;
  color: var(--ink);
  box-shadow: 0 25px 80px rgba(7, 28, 58, 0.35);
  overflow-y: auto;
}

dialog.payment-dialog::backdrop {
  background: rgba(7, 28, 58, 0.6);
  backdrop-filter: blur(6px);
}

.payment-dialog-header {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.payby-tag-badge {
  display: inline-block;
  background: #dcfce7;
  color: #166534;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 6px;
}

.payment-dialog-header h2 {
  font-size: 24px;
  margin: 0;
  font-family: 'Manrope', sans-serif;
  color: var(--ink);
}

.payment-grid-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  align-items: start;
}

.payment-qr-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.payby-qr-frame {
  background: white;
  border: 2px solid #00A859;
  border-radius: 12px;
  padding: 8px;
  display: inline-block;
  box-shadow: 0 8px 24px rgba(0, 168, 89, 0.15);
  margin-bottom: 12px;
}

.payby-qr-img {
  width: 100%;
  max-width: 250px;
  height: auto;
  border-radius: 8px;
  display: block;
}

.payby-qr-caption .payby-steps {
  font-size: 13px;
  color: #0f172a;
  margin: 6px 0 4px;
}

.payby-qr-caption .payby-account {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 14px;
}

.payby-qr-caption .payby-account strong {
  color: #00A859;
}

.btn-download-qr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 14px;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  transition: all 0.2s;
}

.btn-download-qr:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

.btn-download-qr .icon {
  width: 14px;
  height: 14px;
}

/* Payment Info Column */
.payment-info-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.payment-summary-box {
  background: #f1f6fd;
  border: 1px solid #d9e7f8;
  border-radius: 10px;
  padding: 16px 18px;
}

.payment-summary-box h3 {
  font-size: 15px;
  margin: 0 0 10px;
  font-family: 'Manrope', sans-serif;
  color: var(--navy);
}

.payment-items-list {
  max-height: 140px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  padding-right: 6px;
}

.pay-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #334155;
  padding: 4px 0;
  border-bottom: 1px dashed #dbe6f4;
}

.pay-summary-item strong {
  color: var(--blue);
}

.payment-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  padding-top: 8px;
  border-top: 1px solid #cfdff4;
  color: var(--ink);
}

.payment-total-row strong {
  font-size: 16px;
  color: var(--blue);
}

.payment-instructions-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

.instruction-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.instruction-item .step-num {
  width: 22px;
  height: 22px;
  background: var(--blue);
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.instruction-item p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #334155;
}

.payment-confirm-action {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-whatsapp-confirm {
  width: 100%;
  background: linear-gradient(135deg, #25D366 0%, #1EBE5D 100%);
  color: white;
  border: 0;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
  font-size: 14px;
  font-weight: 700;
  padding: 13px 20px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-whatsapp-confirm:hover {
  background: linear-gradient(135deg, #20BD5A 0%, #17A34E 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.45);
}

.payment-help-note {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

@media(max-width: 760px) {
  .payment-grid-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .payment-qr-card {
    max-width: 320px;
    margin: 0 auto;
    width: 100%;
  }
}

/* =============================================================================
   DUBAI AED PRICING STYLES
   ============================================================================= */

/* Catalogue Card Price Bar */
.product-price-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 6px 0 14px;
}

.product-price-group {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.product-price-amount {
  font-family: 'Manrope', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.4px;
}

.product-price-unit {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.product-wholesale-tag {
  font-size: 10px;
  font-weight: 700;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Modal Price Banner */
.dialog-price-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f0f7ff;
  border: 1px solid #d0e4fa;
  padding: 10px 16px;
  border-radius: 8px;
  margin: 8px 0 16px;
  flex-wrap: wrap;
}

.dialog-price-label {
  font-size: 13px;
  color: #475569;
  font-weight: 600;
}

.dialog-price-amount {
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--blue);
}

.dialog-price-tag {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: #15803d;
  background: #dcfce7;
  padding: 3px 8px;
  border-radius: 4px;
}

html[dir="rtl"] .dialog-price-tag {
  margin-left: 0;
  margin-right: auto;
}

/* Cart Item Price */
.cart-item-price-wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 4px 0 10px;
}

.cart-unit-price {
  font-size: 12px;
  color: var(--muted);
}

.cart-subtotal-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
  font-family: 'Manrope', sans-serif;
}

/* Cart Footer Total Row */
.cart-total-amount-row {
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}

.cart-grand-amount {
  font-size: 20px !important;
  color: var(--blue);
  font-weight: 800 !important;
  font-family: 'Manrope', sans-serif;
}

/* Payment Modal Grand Row */
.payment-grand-row {
  border-top: 2px solid #bfdbfe !important;
  padding-top: 10px !important;
  margin-top: 4px;
}

.pay-grand-amount {
  font-size: 20px !important;
  color: #00A859 !important;
  font-weight: 800 !important;
  font-family: 'Manrope', sans-serif;
}

.pay-instruction-highlight {
  color: #00A859;
  font-size: 14px;
}

/* =============================================================================
   CLIENT REQUIREMENTS: B2B WHOLESALE, ABOUT, ENQUIRY FORM & FLOATING WHATSAPP
   ============================================================================= */

/* B2B Wholesale Section */
.wholesale-section {
  padding: 64px 0 50px;
  border-top: 1px solid var(--line);
}

.wholesale-header {
  max-width: 820px;
  margin-bottom: 36px;
}

.wholesale-header h2 {
  font-size: 34px;
  margin-bottom: 14px;
}

.wholesale-header p:not(.eyebrow) {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}

/* Who We Serve Badges */
.serve-badges-wrap {
  margin-bottom: 34px;
}

.serve-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: block;
  margin-bottom: 12px;
}

.serve-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.serve-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f0f6ff;
  border: 1px solid #cbe0fa;
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 30px;
  transition: all 0.2s ease;
}

.serve-badge:hover {
  background: var(--blue);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 104, 217, 0.15);
}

/* Wholesale Layout (Grid: Features vs Form) */
.wholesale-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 40px;
  align-items: start;
}

/* Why Partner Cards */
.why-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.why-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.why-card:hover {
  border-color: #9ac5ef;
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(7, 43, 97, 0.08);
}

.why-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #eff6ff;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.why-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--ink);
}

.why-card p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* Wholesale Enquiry Form Card */
.wholesale-form-card {
  background: #f8fbfe;
  border: 1px solid #d9e7f7;
  border-radius: 14px;
  padding: 32px 30px;
  box-shadow: 0 8px 30px rgba(7, 43, 97, 0.04);
}

.wholesale-form-card h3 {
  font-size: 21px;
  margin-bottom: 8px;
  color: var(--navy);
}

.wholesale-form-card > p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 22px;
  line-height: 1.6;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #355677;
  margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cfdeee;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  background: white;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 104, 217, 0.15);
}

.form-group textarea {
  resize: vertical;
  min-height: 75px;
}

.btn-submit-wholesale {
  width: 100%;
  margin-top: 6px;
}

.wholesale-direct-wa {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #d5e3f2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
}

.link-wa-direct {
  color: #16a34a;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.link-wa-direct:hover {
  text-decoration: underline;
}

/* About MST Section */
.about-section {
  padding: 60px 0;
  background: #fbfcfe;
  border-top: 1px solid var(--line);
}

.about-card {
  background: linear-gradient(135deg, #ffffff 0%, #f1f7fd 100%);
  border: 1px solid #d4e4f7;
  border-radius: 14px;
  padding: 44px 48px;
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.about-content h2 {
  font-size: 30px;
  margin-bottom: 16px;
  line-height: 1.3;
}

.about-content p {
  font-size: 16px;
  line-height: 1.8;
  color: #4b5d73;
  margin: 0 0 24px;
}

.about-highlights {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: white;
  border: 1px solid #e1ecf8;
  padding: 16px 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.highlight-item .icon {
  color: var(--blue);
  width: 22px;
  height: 22px;
  margin-top: 2px;
}

.highlight-item strong {
  font-size: 15px;
  display: block;
  margin-bottom: 3px;
  color: var(--navy);
}

.highlight-item span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* Floating WhatsApp Button */
.floating-whatsapp {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 99;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: white;
  padding: 12px 18px 12px 14px;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  text-decoration: none;
}

.floating-whatsapp:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.55);
  color: white;
}

.floating-whatsapp .icon {
  width: 24px;
  height: 24px;
  stroke: white;
}

/* RTL Adjustments */
html[dir="rtl"] .floating-whatsapp {
  right: auto;
  left: 28px;
  padding: 12px 14px 12px 18px;
}

html[dir="rtl"] .wholesale-form-card,
html[dir="rtl"] .about-content {
  text-align: right;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .wholesale-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-card {
    grid-template-columns: 1fr;
    padding: 32px 26px;
  }
}

@media (max-width: 640px) {
  .why-cards-grid {
    grid-template-columns: 1fr;
  }
  .form-row-2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .wholesale-form-card {
    padding: 24px 18px;
  }
  .about-card {
    padding: 26px 18px;
  }
  .floating-whatsapp span {
    display: none;
  }
  .floating-whatsapp {
    padding: 14px;
    border-radius: 50%;
    bottom: 20px;
    right: 20px;
  }
  html[dir="rtl"] .floating-whatsapp {
    left: 20px;
  }
}

/* =============================================================================
   LUXURY COLORED GRADIENTS ON CONTAINERS FOR PERFECT HIGH-END LOOK
   ============================================================================= */

/* 1. Hero Section Container Gradient */
.hero {
  background: linear-gradient(135deg, #f0f6ff 0%, #e4effd 42%, #d8ebfe 75%, #ecf5fe 100%) !important;
  border: 1px solid rgba(191, 219, 254, 0.8) !important;
  box-shadow: 0 18px 46px rgba(0, 104, 217, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  position: relative;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 25%, rgba(0, 156, 238, 0.16) 0%, transparent 55%),
              radial-gradient(circle at 12% 80%, rgba(0, 104, 217, 0.09) 0%, transparent 45%);
  pointer-events: none;
  border-radius: inherit;
}

/* 2. Category Highlight Cards - Distinct Vibrant Theme Gradients */
.category-feature[data-highlight="Audio"] {
  background: linear-gradient(135deg, #f0f7ff 0%, #e2effe 50%, #d0e5fd 100%) !important;
  border: 1px solid #bfdbfe !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.07) !important;
}

.category-feature[data-highlight="Audio"]:hover {
  border-color: #60a5fa !important;
  box-shadow: 0 18px 42px rgba(37, 99, 235, 0.16) !important;
  transform: translateY(-6px);
}

.category-feature[data-highlight="Charging"] {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #cbf5db 100%) !important;
  border: 1px solid #bbf7d0 !important;
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.07) !important;
}

.category-feature[data-highlight="Charging"]:hover {
  border-color: #4ade80 !important;
  box-shadow: 0 18px 42px rgba(22, 163, 74, 0.16) !important;
  transform: translateY(-6px);
}

.category-feature[data-highlight="Protection"] {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 50%, #ebd8fd 100%) !important;
  border: 1px solid #e9d5ff !important;
  box-shadow: 0 8px 24px rgba(147, 51, 234, 0.07) !important;
}

.category-feature[data-highlight="Protection"]:hover {
  border-color: #c084fc !important;
  box-shadow: 0 18px 42px rgba(147, 51, 234, 0.16) !important;
  transform: translateY(-6px);
}

/* 3. Product Cards - Subtle Pearl Gradient Surface & Soft Glow */
.product-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%) !important;
  border: 1px solid #e2edf8 !important;
  box-shadow: 0 6px 20px rgba(7, 43, 97, 0.04) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.25s ease !important;
}

.product-card:hover {
  border-color: #9ec6f2 !important;
  box-shadow: 0 18px 40px rgba(0, 104, 217, 0.12) !important;
  transform: translateY(-4px) !important;
}

.product-view {
  background: linear-gradient(135deg, #f4f8fd 0%, #eaf2fc 100%) !important;
}

/* 4. Product Help Banner - Electric Royal Blue Aurora Gradient */
.product-help {
  background: linear-gradient(135deg, #072b61 0%, #0d468e 52%, #0077e3 100%) !important;
  border: 1px solid #1a5fa9 !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 42px rgba(7, 43, 97, 0.2) !important;
  color: #ffffff !important;
  position: relative;
  overflow: hidden;
}

.product-help::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -10%;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(0, 156, 238, 0.32) 0%, transparent 68%);
  pointer-events: none;
}

.product-help h3 {
  color: #ffffff !important;
  font-weight: 750;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.product-help p {
  color: #dbeafe !important;
}

.product-help .button-white {
  background: #ffffff !important;
  color: #072b61 !important;
  border-color: transparent !important;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.product-help .button-white:hover {
  background: #eff6ff !important;
  color: #0056b3 !important;
  transform: translateY(-2px);
}

/* 5. Why Partner Cards - Clean Gradient Glass Feel */
.why-card {
  background: linear-gradient(145deg, #ffffff 0%, #f4f8fe 100%) !important;
  border: 1px solid #d9e6f5 !important;
  box-shadow: 0 4px 16px rgba(7, 43, 97, 0.03) !important;
}

.why-card:hover {
  background: linear-gradient(145deg, #ffffff 0%, #edf5fe 100%) !important;
  border-color: #9ac5ef !important;
  box-shadow: 0 14px 34px rgba(0, 104, 217, 0.1) !important;
}

.why-icon-box {
  background: linear-gradient(135deg, #e0f0fe 0%, #bfdbfe 100%) !important;
  color: #0056b3 !important;
  box-shadow: 0 4px 12px rgba(0, 104, 217, 0.14) !important;
}

/* 6. Wholesale Enquiry Form Card Gradient */
.wholesale-form-card {
  background: linear-gradient(145deg, #ffffff 0%, #f3f8fe 42%, #e6f2fd 100%) !important;
  border: 1px solid #c7dff8 !important;
  box-shadow: 0 18px 44px rgba(0, 104, 217, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  position: relative;
}

/* 7. About MST International Section Card Gradient */
.about-card {
  background: linear-gradient(135deg, #f0f7ff 0%, #e4f0fd 45%, #d6ebfe 80%, #eaf4ff 100%) !important;
  border: 1px solid #bfdcfa !important;
  box-shadow: 0 20px 52px rgba(0, 104, 217, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  position: relative;
  overflow: hidden;
}

.about-card::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(0, 156, 238, 0.18) 0%, transparent 68%);
  pointer-events: none;
}

.highlight-item {
  background: linear-gradient(145deg, #ffffff 0%, #f6faff 100%) !important;
  border: 1px solid #d4e5f7 !important;
  box-shadow: 0 4px 14px rgba(7, 43, 97, 0.04) !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.highlight-item:hover {
  transform: translateY(-2px) !important;
  border-color: #9bc5f0 !important;
  box-shadow: 0 10px 24px rgba(0, 104, 217, 0.11) !important;
}

/* 8. Visit Store & Location Section Container Gradient */
.visit {
  background: linear-gradient(135deg, #f2f7fd 0%, #e7f2fc 50%, #dbeafe 100%) !important;
  border: 1px solid #c7dff8 !important;
  box-shadow: 0 18px 46px rgba(7, 43, 97, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

/* 9. Buttons Gradient Polish */
.button:not(.button-white):not(.btn-card-add):not(.button-payby):not(.btn-payby-qr):not(.cart-checkout-btn):not(.btn-share-image) {
  background: linear-gradient(135deg, #0068d9 0%, #008be6 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 104, 217, 0.25);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}

.button:not(.button-white):not(.btn-card-add):not(.button-payby):not(.btn-payby-qr):not(.cart-checkout-btn):not(.btn-share-image):hover {
  background: linear-gradient(135deg, #0056b3 0%, #0076cc 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 104, 217, 0.35);
  transform: translateY(-2px);
}

.button.button-white {
  background: #ffffff !important;
  color: #072b61 !important;
  border: 1.5px solid #cbdff7 !important;
  box-shadow: 0 4px 14px rgba(7, 43, 97, 0.08) !important;
  font-weight: 700 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.button.button-white span {
  color: #072b61 !important;
}

.button.button-white .icon {
  color: #0068d9 !important;
  stroke: #0068d9 !important;
}

.button.button-white:hover {
  background: #f4f8fe !important;
  color: #0068d9 !important;
  border-color: #0068d9 !important;
  box-shadow: 0 8px 22px rgba(0, 104, 217, 0.18) !important;
  transform: translateY(-2px) !important;
}

.button.button-white:hover span {
  color: #0068d9 !important;
}

.button.button-white:hover .icon {
  color: #0056b3 !important;
  stroke: #0056b3 !important;
}

.button-payby {
  background: linear-gradient(135deg, #00A859 0%, #00c768 100%) !important;
  box-shadow: 0 4px 14px rgba(0, 168, 89, 0.25);
}

.button-payby:hover {
  background: linear-gradient(135deg, #008f4c 0%, #00ab5b 100%) !important;
  box-shadow: 0 8px 24px rgba(0, 168, 89, 0.35);
}

.btn-payby-qr {
  background: linear-gradient(135deg, #0068d9 0%, #0052ad 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(0, 104, 217, 0.28) !important;
}

.btn-payby-qr:hover {
  background: linear-gradient(135deg, #0056b3 0%, #00438c 100%) !important;
  box-shadow: 0 5px 14px rgba(0, 104, 217, 0.38) !important;
}

.cart-checkout-btn {
  background: linear-gradient(135deg, #25D366 0%, #1EBE5D 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(37, 211, 102, 0.28) !important;
}

.cart-checkout-btn:hover {
  background: linear-gradient(135deg, #20ba5a 0%, #179b4b 100%) !important;
  box-shadow: 0 5px 14px rgba(37, 211, 102, 0.38) !important;
}

/* 10. Drawer & Dialog Header Gradients */
.cart-header {
  background: linear-gradient(180deg, #f4f8fe 0%, #ffffff 100%);
  border-bottom: 1px solid var(--line);
}

.cart-payby-banner {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 60%, #e0f2fe 100%) !important;
  border: 1px solid #bbf7d0 !important;
}

.dialog-price-banner {
  background: linear-gradient(135deg, #f0f7ff 0%, #e2effe 100%) !important;
  border: 1px solid #c0daf8 !important;
}

/* =============================================================================
   MOBILE VIEW POLISH & PERFECT ALIGNMENT (<= 768px and <= 640px)
   ============================================================================= */

@media (max-width: 768px) {
  /* 1. Sleek Mobile Sticky Header */
  header {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  }

  .nav {
    height: 64px !important;
    padding: 0 14px !important;
    gap: 8px !important;
  }

  .brand {
    height: 48px !important;
    width: auto !important;
    max-width: 140px !important;
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }

  .brand img {
    position: static !important;
    height: 40px !important;
    width: auto !important;
    max-height: 40px !important;
    max-width: 130px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
    mix-blend-mode: multiply !important;
  }

  .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .header-cart-btn {
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }

  .header-cart-btn .cart-btn-text {
    display: none !important;
  }

  .header-cart-btn .cart-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    min-width: 17px !important;
    height: 17px !important;
    font-size: 10px !important;
    padding: 0 4px !important;
  }

  .header-cta {
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .header-cta span {
    display: none !important;
  }

  .header-cta .icon {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
  }

  .language-switch {
    height: 32px !important;
    border-radius: 6px !important;
  }

  .language-switch button {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 8px !important;
    min-height: 32px !important;
  }

  .menu-toggle {
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
  }

  .menu-toggle span {
    width: 18px !important;
    height: 2px !important;
    background: #072b61 !important;
    border-radius: 2px !important;
  }

  /* Navigation drawer on mobile */
  nav {
    top: 64px !important;
    border-top: 1px solid #e2e8f0 !important;
  }
}

@media (max-width: 640px) {
  /* 2. Container Breathing Room */
  .wrap {
    width: calc(100% - 28px) !important;
    margin: auto !important;
  }

  /* 3. Hero Section Alignment */
  .hero {
    margin-top: 14px !important;
    border-radius: 14px !important;
  }

  .hero-copy {
    padding: 24px 18px 16px !important;
  }

  .hero-copy h1 {
    font-size: 28px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.8px !important;
    margin-bottom: 12px !important;
  }

  .hero-copy > p:not(.eyebrow) {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin-bottom: 20px !important;
  }

  /* 4. Full-width, Symmetric Button Stacks */
  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .hero-actions .button,
  .hero-actions .button-white {
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
    padding: 12px 18px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* 5. Smooth Horizontal Scrolling Filter Pills */
  .catalogue {
    padding-top: 36px !important;
    padding-bottom: 40px !important;
  }

  .filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    margin-bottom: 20px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .filters::-webkit-scrollbar {
    display: none !important;
  }

  .filters button {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 8px 15px !important;
    font-size: 13px !important;
    min-height: 38px !important;
    border-radius: 8px !important;
  }

  /* 6. Product Grid 2-Column Equal Heights */
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 10px !important;
  }

  .product-card {
    display: flex !important;
    flex-direction: column !important;
    border-radius: 12px !important;
  }

  .product-info {
    padding: 12px 10px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
  }

  .product-info > p {
    font-size: 11px !important;
    margin-bottom: 4px !important;
  }

  .product-info h3 {
    font-size: 13.5px !important;
    line-height: 1.35 !important;
    margin: 0 0 8px !important;
    min-height: 36px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .product-price-bar {
    margin-top: auto !important;
    padding-top: 6px !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
  }

  .product-price-amount {
    font-size: 14.5px !important;
  }

  .product-wholesale-tag {
    font-size: 9.5px !important;
    padding: 2px 5px !important;
  }

  .product-card-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }

  .btn-card-add {
    width: 100% !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    justify-content: center !important;
    border-radius: 6px !important;
  }

  .product-enquire {
    width: 100% !important;
    padding-top: 4px !important;
    font-size: 12px !important;
    justify-content: center !important;
  }

  /* 7. Product Help Box */
  .product-help {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
    padding: 24px 18px !important;
    gap: 16px !important;
    border-radius: 12px !important;
  }

  .product-help .button-white {
    width: 100% !important;
    justify-content: center !important;
  }

  /* 8. Who We Serve Badges - Neat 2-Column Grid */
  .serve-badges-wrap {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 22px !important;
  }

  .serve-badges {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .serve-badge {
    justify-content: center !important;
    padding: 9px 10px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    width: auto !important;
  }

  /* 9. Why Cards Mobile */
  .why-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .why-card {
    padding: 20px 18px !important;
    border-radius: 12px !important;
  }

  /* 10. Wholesale Form Mobile Alignment */
  .wholesale-form-card {
    padding: 22px 16px !important;
    border-radius: 14px !important;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 15px !important;
    padding: 11px 13px !important;
    border-radius: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .btn-submit-wholesale {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 14px !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }

  /* 11. About & Store Visit Alignment */
  .about-card {
    padding: 24px 18px !important;
    border-radius: 14px !important;
  }

  .about-card h2 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  .store-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .store-card,
  .map-card {
    padding: 22px 18px !important;
    border-radius: 14px !important;
  }

  .store-card .btn-directions,
  .map-card .btn-directions {
    width: 100% !important;
    justify-content: center !important;
  }

  /* 12. Footer & Bottom Spacing for Floating WhatsApp */
  footer {
    padding-bottom: 85px !important;
  }

  .floating-whatsapp {
    width: 50px !important;
    height: 50px !important;
    bottom: 20px !important;
    right: 16px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 20px rgba(0, 168, 89, 0.4) !important;
    z-index: 99 !important;
  }

  .floating-whatsapp span {
    display: none !important;
  }

  .floating-whatsapp .icon {
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
  }

  html[dir="rtl"] .floating-whatsapp {
    left: 16px !important;
    right: auto !important;
  }
}