/* ==========================================================================
   shop.jaycotech.pk: UI layer 2026-11 ("ui-next")
   Same refinement as jaycotech.pk/css/ui.css, adapted to the shop's own
   class names. Loaded only when <html class="ui-next"> (preview cookie).
   ========================================================================== */
.ui-next {
  --blue: #2C90CD; --blue-dk: #1F78AE; --blue-50: #EEF6FC;
  --dark: #20262B; --dark2: #161B1F; --ink-2: #3A434B; --mid: #5E6B78;
  --light: #F6F8FB; --border: #E4E9F0; --border-strong: #D3DBE5;
  --r: 12px; --r-lg: 16px; --r-xl: 22px;
  --shadow-xs: 0 1px 2px rgba(16,24,40,.05);
  --shadow-md: 0 2px 4px rgba(16,24,40,.04), 0 12px 32px rgba(16,24,40,.10);
  --shadow-hover: 0 2px 4px rgba(16,24,40,.04), 0 18px 40px -8px rgba(31,120,174,.22);
  --ring: 0 0 0 4px rgba(44,144,205,.18);
  --ease-out: cubic-bezier(.16,1,.3,1);
}
.ui-next body { -webkit-font-smoothing: antialiased; font-feature-settings: "cv11","ss01","ss03"; }
.ui-next ::selection { background: rgba(44,144,205,.22); }
.ui-next :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.ui-next h1, .ui-next h2, .ui-next h3 { text-wrap: balance; }
.ui-next .skip-link { position: fixed; left: 16px; top: -60px; z-index: 3000; background: var(--dark); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 14px; transition: top .28s var(--ease-out); }
.ui-next .skip-link:focus { top: 12px; }

/* page transitions */
@view-transition { navigation: auto; }
.ui-next .header { view-transition-name: shop-header; }
::view-transition-old(root) { animation: 180ms ease both vt-out; }
::view-transition-new(root) { animation: 360ms cubic-bezier(.16,1,.3,1) both vt-in; }
::view-transition-group(shop-header) { animation-duration: 0s; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Top bar + header ---------- */
.ui-next .topbar { background: var(--dark2); font-size: 12.5px; letter-spacing: .01em; padding: 9px 20px; }
.ui-next .topbar::before { animation-duration: 6s; opacity: .7; }
.ui-next .header { background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom-color: transparent; transition: background-color .28s, border-color .28s, box-shadow .28s; }
.ui-next .header.scrolled { background: rgba(255,255,255,.94); border-bottom-color: var(--border); box-shadow: 0 6px 24px -12px rgba(16,24,40,.18); }
.ui-next .header-inner { height: 76px; max-width: 1240px; }
.ui-next .logo img { height: 56px; }
.ui-next .nav a { font-size: 14px; color: var(--ink-2); border-radius: 8px; }
.ui-next .nav a:hover { background: rgba(32,38,43,.05); }
.ui-next .nav a.active { background: transparent; font-weight: 600; }
.ui-next .nav a.active::after { width: 16px; height: 2px; border-radius: 2px; bottom: 2px; }
.ui-next .cart-btn { border-radius: 10px; background: #fff; border: 1px solid var(--border-strong); transition: all .2s var(--ease-out); }
.ui-next .cart-btn:hover { border-color: var(--blue); background: var(--blue-50); }
.ui-next .cart-badge { box-shadow: 0 0 0 2px #fff; animation: badge-pop .5s var(--ease-out); }
@keyframes badge-pop { from { transform: scale(.4); } }
.ui-next .wa-btn { border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(16,24,40,.12); }

/* dropdowns: eased open/close instead of display toggling */
@media (min-width: 901px) {
  .ui-next .nav-dd { display: block; visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .16s ease, transform .28s var(--ease-out), visibility 0s linear .28s; }
  .ui-next .nav-item:hover .nav-dd, .ui-next .nav-item:focus-within .nav-dd { visibility: visible; opacity: 1; transform: none; transition: opacity .16s ease, transform .28s var(--ease-out), visibility 0s; }
  .ui-next .nav-dd-inner { animation: none; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 2px 4px rgba(16,24,40,.04), 0 24px 48px -12px rgba(16,24,40,.22); min-width: 230px; }
  .ui-next .nav-dd a { border-radius: 9px; color: var(--ink-2); }
  .ui-next .nav-dd a .jt-icon { width: 30px; height: 30px; padding: 7px; border-radius: 8px; background: var(--blue-50); color: var(--blue); transition: background-color .16s, color .16s; }
  .ui-next .nav-dd a:hover .jt-icon { background: var(--blue); color: #fff; }
}
/* mobile sheet */
.ui-next .mobile-nav { background: rgba(16,24,40,.45); backdrop-filter: blur(6px); }
.ui-next .mobile-nav-inner { border-radius: 22px 22px 0 0; padding: 10px 22px calc(28px + env(safe-area-inset-bottom)); max-height: 88vh; overflow-y: auto; animation: sheet-up .42s var(--ease-out); }
.ui-next .mobile-nav-inner::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--border-strong); margin: 4px auto 10px; }
@keyframes sheet-up { from { transform: translateY(100%); } }

/* ---------- Buttons ---------- */
.ui-next .btn { position: relative; isolation: isolate; overflow: hidden; border-radius: 10px; transition: all .28s var(--ease-out); }
.ui-next .btn:active { transform: scale(.98); transition-duration: 80ms; }
.ui-next .btn-lg { border-radius: 12px; }
.ui-next .btn-blue { background: linear-gradient(180deg, #3399D6, var(--blue)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(16,24,40,.14), 0 6px 16px -6px rgba(44,144,205,.55); }
.ui-next .btn-blue:hover { background: linear-gradient(180deg, var(--blue), var(--blue-dk)); }
.ui-next .btn-blue::after, .ui-next .btn-dark::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 66%); transform: translateX(-120%); }
.ui-next .btn-blue:hover::after, .ui-next .btn-dark:hover::after { transform: translateX(120%); transition: transform .7s var(--ease-out); }
.ui-next .btn-outline { border-width: 1px; }

/* ---------- Heroes ---------- */
.ui-next .hero { min-height: auto !important; padding: clamp(72px, 9vw, 120px) 24px; background: var(--dark2); }
.ui-next .hero-bg { background: radial-gradient(900px 500px at 15% -10%, rgba(44,144,205,.24), transparent 60%), radial-gradient(700px 420px at 100% 10%, rgba(44,144,205,.10), transparent 60%); }
.ui-next .hero-grid { background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 30%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 30% 30%, #000 30%, transparent 75%); }
.ui-next .hero-inner { max-width: 1240px; }
.ui-next .hero h1 { font-weight: 800; letter-spacing: -.035em; }
.ui-next .hero h1 em { background: linear-gradient(92deg, #5BB4E8, #2C90CD 55%, #7CC6F0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ui-next .hero h1 em::after { background: linear-gradient(90deg, #2C90CD, #7CC6F0); }
.ui-next .hero-sub { color: #A5B2BF; }
.ui-next .hero-stats { padding-top: 24px; border-top: 1px solid rgba(255,255,255,.09); }
.ui-next .hero-stat-lbl { color: #8D9AA8; }
.ui-next .page-hero { background: radial-gradient(800px 420px at 50% -20%, rgba(44,144,205,.24), transparent 65%), var(--dark2); padding: clamp(60px, 8vw, 96px) 24px clamp(52px, 6vw, 80px); }
.ui-next .page-hero::before { top: 0; left: 0; width: 100%; height: 100%; animation: none; background: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0/48px 48px, linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/48px 48px; -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 80% at 50% 0%, #000 20%, transparent 75%); }
.ui-next .page-hero::after { display: none; }
.ui-next .page-hero p { color: #A5B2BF; }

/* ---------- Section rhythm ---------- */
.ui-next .section { padding: clamp(64px, 8vw, 104px) 24px; }
.ui-next .container { max-width: 1240px; }
.ui-next .section-label { display: inline-flex; align-items: center; gap: 8px; color: var(--blue-dk); letter-spacing: .12em; }
.ui-next .section-label::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; }
.ui-next .section-title { font-weight: 750; letter-spacing: -.03em; }
.ui-next .trust-strip { background: #fff; border-bottom: 1px solid var(--border); }
.ui-next .trust-item { color: var(--ink-2); }
.ui-next .trust-item svg { stroke: var(--blue); opacity: 1; }
.ui-next .trust-item span { font-weight: 600; }

/* ---------- Cards ---------- */
.ui-next .card, .ui-next .cat-card, .ui-next .brand-card, .ui-next .product-card, .ui-next .pdp-rel-card {
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .16s;
}
.ui-next .card:hover, .ui-next .cat-card:hover, .ui-next .brand-card:hover { border-color: rgba(44,144,205,.45); box-shadow: var(--shadow-hover); }
.ui-next .spot { position: relative; isolation: isolate; }
.ui-next .spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(44,144,205,.09), transparent 60%); transition: opacity .28s; }
.ui-next .spot:hover::after { opacity: 1; }

/* product cards: image lift + calmer CTA */
.ui-next .product-card:hover { transform: translateY(-4px); border-color: rgba(44,144,205,.35); box-shadow: var(--shadow-hover); }
.ui-next .product-img { background: linear-gradient(180deg, #fff, #F8FAFC); }
.ui-next .product-img img { transition: transform .6s var(--ease-out); }
.ui-next .product-card:hover .product-img img { transform: scale(1.045); }
.ui-next .grade-badge { border-radius: 999px; padding: 3px 10px; background: rgba(32,38,43,.88); backdrop-filter: blur(4px); }
.ui-next .product-brand { color: var(--blue-dk); }
.ui-next .product-name { font-size: 14.5px; letter-spacing: -.01em; }
.ui-next .product-btn { border-radius: 10px; transition: background-color .2s, transform .2s var(--ease-out); }
.ui-next .product-card:hover .product-btn { background: var(--blue); }

.ui-next .cat-card-icon { transition: transform .5s var(--ease-out); }
.ui-next .cat-card:hover .cat-card-icon { transform: translateY(-2px) scale(1.08); }
.ui-next .cat-tab { border-radius: 999px; border-width: 1px; transition: all .2s var(--ease-out); }
.ui-next .cat-tab.active { box-shadow: 0 6px 16px -8px rgba(16,24,40,.5); }

/* ---------- Shop listing: filters ---------- */
.ui-next .shop-sidebar { border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); top: 92px; }
.ui-next .sf-hd { background: #fff; }
.ui-next .sf-group { padding: 14px 18px; }
.ui-next .sf-opt { border-radius: 8px; padding: 6px 8px; margin: 0 -8px; transition: background-color .12s; }
.ui-next .sf-opt:hover { background: var(--light); }
.ui-next .sf-search-wrap { border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-xs); transition: border-color .16s, box-shadow .28s var(--ease-out); }
.ui-next .sf-search-wrap:focus-within { box-shadow: var(--ring); }
.ui-next .sf-chip { border-radius: 999px; animation: chip-in .3s var(--ease-out); }
@keyframes chip-in { from { opacity: 0; transform: scale(.9); } }
.ui-next #sf-sort, .ui-next .sf-sort { border-radius: 10px; }

/* ---------- Product page ---------- */
.ui-next .pdp-main-img { border-radius: var(--r-lg); }
.ui-next .pdp-thumb { border-radius: 10px; transition: border-color .16s, transform .2s var(--ease-out); }
.ui-next .pdp-thumb:hover { transform: translateY(-2px); }
.ui-next .pdp-info-card { border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.ui-next .pdp-pill, .ui-next .pdp-chip { transition: all .2s var(--ease-out); }
.ui-next .pdp-btn-cart, .ui-next .pdp-btn-buy, .ui-next .pdp-btn-wa { border-radius: 12px; transition: transform .2s var(--ease-out), box-shadow .28s var(--ease-out), background-color .16s; }
.ui-next .pdp-btn-cart:hover, .ui-next .pdp-btn-buy:hover, .ui-next .pdp-btn-wa:hover { transform: translateY(-1px); }
.ui-next .pdp-rel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

/* forms (cart, checkout, contact) */
.ui-next input[type=text], .ui-next input[type=email], .ui-next input[type=tel], .ui-next input[type=number], .ui-next select, .ui-next textarea { transition: border-color .16s, box-shadow .28s var(--ease-out); }
.ui-next .fgroup input:focus, .ui-next .fgroup select:focus, .ui-next .fgroup textarea:focus { border-color: var(--blue); box-shadow: var(--ring); outline: none; }

/* FAQ + CTA + footer */
.ui-next .faq-a { transition: max-height .4s var(--ease-out), padding .4s var(--ease-out); }
.ui-next .cta-band { background: radial-gradient(700px 360px at 50% 0%, rgba(44,144,205,.22), transparent 70%), var(--dark2); }
.ui-next .cta-band p { color: #A5B2BF; }
.ui-next .footer { background: var(--dark2); position: relative; }
.ui-next .footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(44,144,205,.6), transparent); }
.ui-next .footer-col a { transition: color .16s, transform .28s var(--ease-out); }
.ui-next .footer-col a:hover { transform: translateX(3px); }

/* reveal: smoother curve, stagger from ui-shop.js */
.ui-next .reveal, .ui-next .reveal-left, .ui-next .reveal-right { transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0ms); }
.ui-next.reveal-all .reveal, .ui-next.reveal-all .reveal-left, .ui-next.reveal-all .reveal-right, .ui-next.reveal-all .stagger > * { opacity: 1 !important; transform: none !important; }

/* back to top (sits above the WhatsApp button) */
.ui-next .to-top { position: fixed; right: 33px; bottom: 100px; z-index: 140; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.92); backdrop-filter: blur(8px); color: var(--dark); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(10px); pointer-events: none; transition: all .28s var(--ease-out); }
.ui-next .to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.ui-next .to-top:hover { color: var(--blue); border-color: var(--blue); }
.ui-next .to-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (hover: none) {
  .ui-next .product-card:hover, .ui-next .card:hover, .ui-next .cat-card:hover, .ui-next .brand-card:hover { transform: none; }
  .ui-next .spot::after { display: none; }
}
@media (max-width: 560px) {
  .ui-next .to-top { right: 22px; bottom: 92px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-next *, .ui-next *::before, .ui-next *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .ui-next .reveal, .ui-next .reveal-left, .ui-next .reveal-right, .ui-next .stagger > * { opacity: 1 !important; transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ---------- Fixes found in testing ---------- */
/* hero laptop mockup: screen grows with its content instead of clipping it; badges sit outside the screen */
.ui-next .laptop-screen { aspect-ratio: auto; min-height: 250px; }
.ui-next .laptop-mockup .float-badge[style*="bottom"] { bottom: -26px !important; left: -36px !important; }
.ui-next .laptop-mockup .float-badge[style*="top"] { top: -22px !important; right: -36px !important; }
.ui-next .laptop-frame { box-shadow: 0 50px 100px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1); }
/* phone: hero stats in one row; card CTA on one line */
@media (max-width: 560px) {
  .ui-next .hero-stats { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 10px !important; }
  .ui-next .hero-stats > [style*="width:1px"] { display: none; }
  .ui-next .hero-stats > * { border: 0 !important; padding: 0 !important; margin: 0 !important; }
  .ui-next .hero-stat-num { font-size: 19px; }
  .ui-next .hero-stat-lbl { font-size: 11px; }
  .ui-next .product-btn[href*='wa.me'] { padding: 11px 6px !important; margin: 10px 10px 12px !important; font-size: 12px !important; gap: 5px !important; white-space: nowrap; letter-spacing: -.01em; }
}

/* ---------- WOW layer ---------- */
.ui-next .hero .aurora { position: absolute; inset: -20% -10%; z-index: 1; pointer-events: none; filter: blur(60px); }
.ui-next .hero .aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.ui-next .hero .aurora i:nth-child(1) { width: 46vw; height: 46vw; left: -6vw; top: -18vw; background: radial-gradient(circle, rgba(44,144,205,.5), transparent 65%); animation: drift1 18s ease-in-out infinite alternate; }
.ui-next .hero .aurora i:nth-child(2) { width: 38vw; height: 38vw; right: -4vw; top: 6vw; background: radial-gradient(circle, rgba(91,180,232,.3), transparent 65%); animation: drift2 22s ease-in-out infinite alternate; }
.ui-next .hero .aurora i:nth-child(3) { width: 30vw; height: 30vw; left: 30vw; bottom: -18vw; background: radial-gradient(circle, rgba(31,120,174,.4), transparent 65%); animation: drift1 26s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(8vw, 6vw) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-6vw, 4vw) scale(.9); } }
.ui-next .hero .hero-spot { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(520px circle at var(--hx, 50%) var(--hy, 50%), rgba(124,198,240,.10), transparent 60%); }
.ui-next .hero:hover .hero-spot { opacity: 1; }
.ui-next .hero h1 .w { display: inline-block; white-space: pre; }
.ui-next .hero h1.split-ready { animation: none; }
.ui-next .hero h1.split-ready .w { animation: word-in 900ms var(--ease-out) both; animation-delay: calc(100ms + var(--wi) * 60ms); }
.ui-next .hero h1 em .w { background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes word-in { from { opacity: 0; transform: translateY(.45em) rotate(2deg); filter: blur(6px); } }
.ui-next .laptop-mockup { transform: perspective(1400px) rotateX(var(--rx, 3deg)) rotateY(var(--ry, -7deg)); transition: transform .9s var(--ease-out); transform-style: preserve-3d; }
.ui-next .laptop-mockup.tilting { transition: transform .12s linear; }
.ui-next .laptop-frame::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--beam-a, 0deg), transparent 0 70%, rgba(91,180,232,.9) 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: beam 6s linear infinite; }
@property --beam-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes beam { to { --beam-a: 360deg; } }
@media (max-width: 860px) { .ui-next .laptop-mockup { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ui-next .laptop-mockup { transform: none; } .ui-next .laptop-frame::after { display: none; } }

/* ---------- Auto-reveal for every module (5 Nov 2026) ---------- */
.ui-next .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), clip-path 1.1s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0ms); }
.ui-next .rv.rv-scale { transform: translateY(18px) scale(.965); clip-path: inset(6% 3% 6% 3% round 18px); }
.ui-next .rv.rv-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 0); }
.ui-next .rv.rv-in:not(.rv-scale) { clip-path: none; }
.ui-next.reveal-all .rv { opacity: 1 !important; transform: none !important; clip-path: none !important; }
@media (prefers-reduced-motion: reduce) { .ui-next .rv { opacity: 1 !important; transform: none !important; clip-path: none !important; } }
@media print { .ui-next .rv { opacity: 1 !important; transform: none !important; clip-path: none !important; } }


/* Phone readability (6 Nov 2026 audit: badges and spec lines were 9 to 10.5px) */
@media (max-width: 560px) {
  .ui-next .grade-badge { font-size: 10.5px !important; padding: 3px 8px; }
  .ui-next .product-brand { font-size: 11px !important; }
  .ui-next .product-spec { font-size: 12px !important; line-height: 1.45; }
  .ui-next .product-card span[style*="font-size:10px"], .ui-next .product-card span[style*="font-size: 10px"] { font-size: 11.5px !important; }
}