/* ═══════════════════════════════════════════════════
   LONDON BIKES UAE — Minimal Mobile E-Commerce
   ═══════════════════════════════════════════════════ */

:root {
  --primary:    #111111;
  --secondary:  #1E1E1E;
  --accent:     #D62828;
  --accent-dk:  #b52222;
  --bg:         #F7F7F7;
  --gray:       #6B6B6B;
  --white:      #FFFFFF;
  --border:     #EBEBEB;
  --border-lt:  #F0F0F0;

  --font:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --display:    'Space Grotesk', var(--font);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-full: 100px;

  --ease: cubic-bezier(.16,1,.3,1);
  --nav-h: 68px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--font);background:var(--bg);color:var(--primary);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100dvh}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{border:none;background:none;cursor:pointer;font-family:inherit;color:inherit}
input{font-family:inherit;border:none;outline:none;background:none}
ul,ol{list-style:none}

/* ═══════════════════════════
   LOADER
   ═══════════════════════════ */
.loader{position:fixed;inset:0;z-index:9999;background:var(--primary);display:flex;align-items:center;justify-content:center;transition:opacity .6s var(--ease),visibility .6s}
.loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:24px}

.loader__wheel{width:72px;height:72px;animation:spin 1.5s linear infinite}
.wheel-svg{width:100%;height:100%}
.wheel-rim{fill:none;stroke:var(--white);stroke-width:2.5;opacity:.2}
.wheel-hub{fill:var(--accent)}
.wheel-spoke{stroke:rgba(255,255,255,.15);stroke-width:1.5}
@keyframes spin{to{transform:rotate(360deg)}}

.loader__brand{display:flex;gap:8px;font-family:var(--display);overflow:hidden}
.loader__london{font-size:26px;font-weight:700;color:var(--white);letter-spacing:5px;animation:up .7s var(--ease) .3s both}
.loader__bikes{font-size:26px;font-weight:300;color:var(--white);letter-spacing:5px;animation:up .7s var(--ease) .5s both}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

.loader__tagline{font-size:11px;letter-spacing:3px;color:var(--gray);text-transform:uppercase;animation:fade .8s var(--ease) .8s both}
@keyframes fade{from{opacity:0}to{opacity:1}}

.loader__progress{width:160px;height:2px;background:rgba(255,255,255,.08);border-radius:var(--r-full);overflow:hidden;animation:fade .5s var(--ease) 1s both}
.loader__bar{height:100%;width:0%;background:var(--accent);border-radius:var(--r-full);animation:load 2.5s var(--ease) .5s forwards}
@keyframes load{0%{width:0}20%{width:25%}50%{width:60%}80%{width:85%}100%{width:100%}}

/* ═══════════════════════════
   APP SHELL
   ═══════════════════════════ */
.app{max-width:480px;margin:0 auto;background:var(--bg);min-height:100dvh;position:relative}
.app.visible{display:block!important;animation:reveal .7s var(--ease) both}
@keyframes reveal{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.safe-top{height:env(safe-area-inset-top,6px)}

/* ═══════════════════════════
   HEADER
   ═══════════════════════════ */
.header{
  padding:14px 20px 10px;
  background:rgba(247,247,247,.88);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  position:sticky;top:0;z-index:100;
}

.header__row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}

.header__loc{font-size:11px;color:var(--gray);font-weight:500;display:flex;align-items:center;gap:4px;margin-bottom:1px}
.header__loc i{font-size:9px;color:var(--accent)}

.header__title{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.3px}

.header__cart{width:42px;height:42px;border-radius:var(--r-md);background:var(--white);display:flex;align-items:center;justify-content:center;font-size:17px;position:relative;border:1px solid var(--border);transition:transform .15s}
.header__cart:active{transform:scale(.92)}
.header__badge{position:absolute;top:5px;right:5px;width:16px;height:16px;border-radius:50%;background:var(--accent);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* Search */
.search{display:flex;align-items:center;gap:8px;background:var(--white);border-radius:var(--r-full);height:44px;padding:0 18px;border:1px solid var(--border);transition:border .2s}
.search:focus-within{border-color:var(--primary)}
.search__icon{font-size:13px;color:var(--gray)}
.search__input{flex:1;height:100%;font-size:13px;color:var(--primary)}
.search__input::placeholder{color:#aaa;font-weight:400}

/* ═══════════════════════════
   SECTION HEADS
   ═══════════════════════════ */
.sec-head{display:flex;align-items:center;justify-content:space-between;padding:0 20px;margin-bottom:14px}
.sec-head h2{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.2px}
.sec-head a{font-size:12px;font-weight:600;color:var(--gray);display:flex;align-items:center;gap:4px;transition:color .2s}
.sec-head a:active{color:var(--accent)}
.sec-head a i{font-size:8px}

/* ═══════════════════════════
   HERO
   ═══════════════════════════ */
.hero{padding:16px 20px 0;margin-bottom:24px}

.hero__track{position:relative;border-radius:var(--r-xl);overflow:hidden;height:200px}

.hero__slide{
  position:absolute;inset:0;
  opacity:0;transform:translateX(20px);
  transition:all .5s var(--ease);pointer-events:none;
}
.hero__slide.active{opacity:1;transform:translateX(0);pointer-events:all}
.hero__slide.prev{opacity:0;transform:translateX(-20px)}

.hero__slide img{width:100%;height:100%;object-fit:cover}

.hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(17,17,17,.85) 0%,rgba(17,17,17,.3) 50%,transparent 100%);
}

.hero__text{position:absolute;bottom:0;left:0;padding:20px;z-index:2}

.hero__tag{
  display:inline-block;font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);background:rgba(214,40,40,.15);padding:3px 10px;border-radius:var(--r-full);margin-bottom:8px;
}

.hero__text h2{font-family:var(--display);font-size:28px;font-weight:700;color:#fff;line-height:1.05;margin-bottom:4px;letter-spacing:-.5px}
.hero__text h2 em{font-style:normal;color:var(--accent)}

.hero__text p{font-size:12px;color:rgba(255,255,255,.65);margin-bottom:14px}
.hero__text p strong{color:#fff}

.hero__cta{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--white);color:var(--primary);
  font-size:12px;font-weight:600;padding:9px 20px;border-radius:var(--r-full);
  transition:all .15s var(--ease);
}
.hero__cta:active{transform:scale(.95);background:#eee}
.hero__cta i{font-size:10px;transition:transform .2s}
.hero__cta:hover i{transform:translateX(3px)}

.hero__dots{display:flex;gap:5px;justify-content:center;margin-top:14px}
.hero__dot{width:5px;height:5px;border-radius:50%;background:var(--border);transition:all .35s var(--ease)}
.hero__dot.active{width:22px;border-radius:var(--r-full);background:var(--primary)}

/* ═══════════════════════════
   CATEGORIES
   ═══════════════════════════ */
.cats{margin-bottom:20px}
.cats__row{
  display:flex;gap:8px;overflow-x:auto;padding:0 20px;
  scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x mandatory;margin-left: 20px;
}
.cats__row::-webkit-scrollbar{display:none}

.chip{
  display:flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:var(--r-full);
  background:var(--white);border:1px solid var(--border);
  font-size:12px;font-weight:600;white-space:nowrap;
  scroll-snap-align:start;transition:all .2s var(--ease);
}
.chip i{font-size:13px}
.chip:active{transform:scale(.95)}
.chip.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* ═══════════════════════════
   DEAL RIBBON
   ═══════════════════════════ */
.deal{padding:0 20px;margin-bottom:24px}
.deal__inner{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--primary);border-radius:var(--r-lg);padding:14px 18px;
}
.deal__tag{font-size:10px;font-weight:700;color:var(--accent);letter-spacing:.5px;display:block;margin-bottom:2px}
.deal__inner p{font-size:12px;color:rgba(255,255,255,.7)}
.deal__inner p strong{color:#fff}

.deal__clock{
  font-family:var(--display);font-size:18px;font-weight:700;
  color:#fff;letter-spacing:1px;flex-shrink:0;
  background:rgba(255,255,255,.08);padding:6px 12px;border-radius:var(--r-sm);
}

/* ═══════════════════════════
   PRODUCTS
   ═══════════════════════════ */
.products{margin-bottom:28px}

.products__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:12px;padding:0 20px;
}

/* Product Card */
.p-card{
  background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--border-lt);transition:all .25s var(--ease);
}
.p-card:active{transform:scale(.97)}

.p-card__img{
  position:relative;aspect-ratio:1;background:var(--white);
  display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden;
}
.p-card__img img{width:100%;height:100%;object-fit:contain;transition:transform .4s var(--ease),opacity .4s ease}
.p-card__img img[loading]{animation:imgPulse 1.5s ease-in-out infinite}
@keyframes imgPulse{0%,100%{opacity:.6}50%{opacity:.3}}
.p-card__img img.loaded{animation:none;opacity:1}
.p-card:active .p-card__img img{transform:scale(1.04)}

.p-card__badge{
  position:absolute;top:10px;left:10px;font-size:9px;font-weight:700;
  padding:3px 9px;border-radius:var(--r-full);z-index:2;line-height:1.2;
}
.p-card__badge--sale{background:var(--accent);color:#fff}
.p-card__badge--new{background:var(--primary);color:#fff}

.p-card__fav{
  position:absolute;top:10px;right:10px;width:30px;height:30px;
  border-radius:50%;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--gray);box-shadow:0 2px 8px rgba(0,0,0,.1);z-index:2;
  transition:all .15s;
}
.p-card__fav:active{transform:scale(1.2)}
.p-card__fav.active{color:var(--accent)}
.p-card__fav.active i{font-weight:900}

.p-card__body{padding:12px 12px 14px}
.p-card__brand{font-size:9px;font-weight:600;color:var(--gray);text-transform:uppercase;letter-spacing:1px;margin-bottom:1px}
.p-card__name{font-size:12px;font-weight:600;line-height:1.35;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.p-card__row{display:flex;align-items:center;justify-content:space-between}
.p-card__pricing{display:flex;flex-direction:column}
.p-card__price{font-family:var(--display);font-size:14px;font-weight:700}
.p-card__old{font-size:10px;color:var(--gray);text-decoration:line-through;display:block;margin-top:1px}

.p-card__add{
  width:30px;height:30px;border-radius:var(--r-sm);
  background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:13px;transition:all .15s var(--ease);flex-shrink:0;
}
.p-card__add:active{transform:scale(.88);background:var(--accent)}

.p-card__rating{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--gray);margin-top:6px}
.p-card__rating i{color:#FFC107;font-size:9px}
.p-card__reviews{opacity:.6}

/* ═══════════════════════════
   SERVICES
   ═══════════════════════════ */
.services{margin-bottom:28px}
.services__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 20px}

.svc{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 4px;background:var(--white);border-radius:var(--r-md);border:1px solid var(--border-lt);text-align:center}
.svc__ic{width:36px;height:36px;border-radius:var(--r-sm);background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--accent)}
.svc span{font-size:10px;font-weight:600;line-height:1.2}

/* ═══════════════════════════
   BRANDS
   ═══════════════════════════ */
.brands{margin-bottom:28px;overflow:hidden}
.brands__strip{
  display:flex;gap:28px;padding:0 20px;
  animation:marquee 20s linear infinite;white-space:nowrap;
}
.brands__strip span{
  font-family:var(--display);font-size:14px;font-weight:700;
  letter-spacing:3px;color:var(--primary);opacity:.35;flex-shrink:0;
}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ═══════════════════════════
   REVIEWS
   ═══════════════════════════ */
.reviews{margin-bottom:28px}
.reviews__scroll{
  display:flex;gap:12px;overflow-x:auto;padding:0 20px;
  scroll-snap-type:x mandatory;scrollbar-width:none;margin-left: 20px;
}
.reviews__scroll::-webkit-scrollbar{display:none}

.rv{
  min-width:260px;background:var(--white);border-radius:var(--r-lg);
  padding:18px;border:1px solid var(--border-lt);scroll-snap-align:start;flex-shrink:0;max-width: 200px;
}
.rv__stars{display:flex;gap:2px;margin-bottom:8px}
.rv__stars i{font-size:11px;color:#FFC107}
.rv__stars .fa-regular{color:var(--border)}
.rv p{font-size:12px;line-height:1.6;color:var(--gray);margin-bottom:14px;font-style:italic}
.rv__who{display:flex;align-items:center;gap:8px}
.rv__av{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.rv__who strong{font-size:12px;display:block}
.rv__who small{font-size:10px;color:var(--gray)}

/* ═══════════════════════════
   NEWSLETTER
   ═══════════════════════════ */
.nl{
  margin:0 20px 28px;padding:28px 20px;
  background:var(--primary);border-radius:var(--r-xl);text-align:center;
}
.nl h3{font-family:var(--display);font-size:18px;font-weight:700;color:#fff;margin-bottom:4px}
.nl p{font-size:12px;color:rgba(255,255,255,.5);margin-bottom:18px}
.nl__form{display:flex;gap:8px}
.nl__input{
  flex:1;height:42px;background:rgba(255,255,255,.08);border-radius:var(--r-full);
  padding:0 16px;font-size:12px;color:#fff;border:1px solid rgba(255,255,255,.1);transition:border .2s;
}
.nl__input::placeholder{color:rgba(255,255,255,.3)}
.nl__input:focus{border-color:var(--accent)}
.nl__btn{
  width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;transition:transform .15s;
}
.nl__btn:active{transform:scale(.9)}

/* ═══════════════════════════
   FOOTER
   ═══════════════════════════ */
.footer{background:var(--primary);padding:28px 20px 16px;border-radius:var(--r-xl) var(--r-xl) 0 0}

.footer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.footer__head h3{font-family:var(--display);font-size:16px;font-weight:700;color:#fff;letter-spacing:1px}
.footer__head h3 span{color:var(--accent)}
.footer__social{display:flex;gap:12px}
.footer__social a{width:34px;height:34px;border-radius:var(--r-sm);background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;transition:all .15s}
.footer__social a:active{background:var(--accent);transform:scale(.9)}

.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.06)}
.footer__cols h4{font-size:11px;font-weight:700;color:#fff;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}
.footer__cols a{display:block;font-size:11px;color:var(--gray);padding:3px 0;transition:color .15s}
.footer__cols a:active{color:#fff}

.footer__end{display:flex;align-items:center;justify-content:space-between}
.footer__end p{font-size:10px;color:var(--gray)}
.footer__end div{display:flex;gap:14px}
.footer__end a{font-size:10px;color:var(--gray)}

/* ═══════════════════════════
   BOTTOM NAV
   ═══════════════════════════ */
.bnav-bar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;height:var(--nav-h);
  background:var(--white);
  border-top:1px solid var(--border-lt);
  display:flex;align-items:center;justify-content:space-around;
  padding:0 8px;padding-bottom:var(--safe-b);z-index:1000;
  transition:transform .3s var(--ease);
}

.bnav{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 14px;font-size:19px;color:var(--gray);
  border-radius:var(--r-md);transition:all .25s var(--ease);position:relative;
}
.bnav span{font-size:10px;font-weight:500}
.bnav.active{color:var(--primary)}
.bnav.active::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:20px;height:2.5px;background:var(--accent);border-radius:0 0 3px 3px;
}
.bnav:active{transform:scale(.88)}

.bottom-spacer{height:var(--nav-h)}

main.main{padding-bottom:calc(var(--nav-h) + 12px)}

/* ═══════════════════════════
   GLASS NAV — iOS Only
   -webkit-touch-callout is
   exclusive to Safari / iOS
   ═══════════════════════════ */
@supports (-webkit-touch-callout: none) {
  .bnav-bar{
    bottom:12px;
    width:calc(100% - 40px);max-width:420px;
    height:62px;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(28px) saturate(1.6);
    -webkit-backdrop-filter:blur(28px) saturate(1.6);
    border:1px solid rgba(255,255,255,.28);
    border-top:1px solid rgba(255,255,255,.35);
    border-radius:100px;
    box-shadow:
      0 8px 32px rgba(0,0,0,.12),
      inset 0 1px 0 rgba(255,255,255,.25);
    padding:0 6px;
    padding-bottom:0;
  }

  .bnav{
    flex:1;
    flex-direction:row;gap:0;
    padding:10px 16px;
    font-size:21px;
    color:rgba(17,17,17,.4);
    border-radius:100px;
    justify-content:center;
  }
  .bnav span{display:none}

  .bnav.active{
    color:var(--white);
    background:var(--primary);
    box-shadow:0 4px 16px rgba(0,0,0,.18);
  }
  .bnav.active::before{display:none}

  .bnav:active{transform:scale(.92)}

  main.main{padding-bottom:calc(62px + 24px)}
}

/* ═══════════════════════════
   SCROLL REVEAL
   ═══════════════════════════ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ═══════════════════════════
   RESPONSIVE
   ═══════════════════════════ */
@media(min-width:390px){
  .hero__track{height:220px}
  .hero__text h2{font-size:30px}
}

@media(min-width:481px){
  body{background:#080808;display:flex;justify-content:center;padding:20px 0}
  .app{border-radius:44px;box-shadow:0 0 0 10px #1a1a1a,0 0 0 12px #333,0 30px 80px rgba(0,0,0,.6);overflow:clip;margin-top:10px;min-height:calc(100dvh - 40px)}
  .bnav-bar{border-radius:0 0 44px 44px}
  .loader{border-radius:44px}
}

@media(max-width:340px){
  .hero__track{height:170px}
  .hero__text h2{font-size:24px}
  .products__grid{gap:8px}
  .services__grid{grid-template-columns:repeat(2,1fr)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}