/* ============================================================
   FUSHA & CO — FLAGSHIP DESIGN SYSTEM
   Campton-first typography · brand-only palette · luxury motion
   ============================================================ */

@font-face { font-family:'Campton'; src:local('Campton'); } /* falls back gracefully */

:root {
  /* ---- Brand palette (official only) ---- */
  --blue:#034EFF;         /* action / highlight ONLY */
  --blue-600:#0038D6;
  --blue-050:#EAF0FF;
  --navy:#061538;         /* ink + dark surfaces */
  --navy-800:#0C1E48;
  --white:#FFFFFF;
  --ivory:#F7F5F0;        /* soft ivory */
  --grey:#F1F2F5;         /* very light grey */
  --line:#E7E8EC;
  --ink-2:#5A6076;        /* secondary text */
  --ink-3:#9AA0B0;        /* tertiary / captions */

  /* ---- Type ---- */
  --font:'Campton','Montserrat',-apple-system,system-ui,sans-serif;
  --w-book:400; --w-medium:500; --w-semi:600; --w-extra:800;

  /* ---- Spacing scale (8pt) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:160px;

  /* ---- Radius ---- */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-full:999px;

  /* ---- Shadows (luxury, soft) ---- */
  --sh-1:0 1px 2px rgba(6,21,56,.04), 0 2px 6px rgba(6,21,56,.04);
  --sh-2:0 4px 12px rgba(6,21,56,.06), 0 12px 28px rgba(6,21,56,.06);
  --sh-3:0 10px 30px rgba(6,21,56,.08), 0 30px 60px rgba(6,21,56,.10);
  --sh-blue:0 8px 24px rgba(3,78,255,.28);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.6s;

  /* ---- Container ---- */
  --maxw:1320px;
  --gutter:40px;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:var(--font);
  color:var(--navy);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-weight:var(--w-book);
  line-height:1.5;
}
img { display:block; max-width:100%; }
button { font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
input,select,textarea { font-family:inherit; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--blue); color:#fff; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:rgba(6,21,56,.16); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:rgba(6,21,56,.3); }

/* ============================================================
   TYPOGRAPHY — Campton is the hero
   ============================================================ */
.display { font-weight:var(--w-extra); letter-spacing:-.04em; line-height:.94; }
.d-hero { font-size:clamp(52px,8.5vw,132px); }
.d-1 { font-size:clamp(40px,6vw,88px); }
.d-2 { font-size:clamp(32px,4.4vw,60px); }
.h-1 { font-size:clamp(28px,3.4vw,44px); font-weight:var(--w-extra); letter-spacing:-.03em; line-height:1.05; }
.h-2 { font-size:clamp(22px,2.4vw,32px); font-weight:var(--w-semi); letter-spacing:-.02em; line-height:1.1; }
.h-3 { font-size:20px; font-weight:var(--w-semi); letter-spacing:-.01em; }
.body-lg { font-size:clamp(16px,1.3vw,19px); line-height:1.65; color:var(--ink-2); font-weight:var(--w-book); }
.body { font-size:15px; line-height:1.6; color:var(--ink-2); }
.small { font-size:13px; line-height:1.5; color:var(--ink-2); }
.eyebrow { font-size:11px; letter-spacing:.28em; text-transform:uppercase; font-weight:var(--w-semi); color:var(--blue); }
.eyebrow-muted { font-size:11px; letter-spacing:.28em; text-transform:uppercase; font-weight:var(--w-semi); color:var(--ink-3); }
.mono-price { font-weight:var(--w-semi); font-variant-numeric:tabular-nums; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container { max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.section { padding-block:var(--s10); }
.section-sm { padding-block:var(--s9); }
.stack > * + * { margin-top:var(--s5); }
.grid { display:grid; gap:var(--s5); }
@media(max-width:900px){ :root{ --gutter:20px; } .section{ padding-block:var(--s8); } .section-sm{ padding-block:var(--s7); } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:var(--w-semi); font-size:14px; letter-spacing:.01em;
  padding:16px 28px; border-radius:var(--r-full); cursor:pointer;
  transition:transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
  white-space:nowrap; }
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--navy); color:#fff; }
.btn-primary:hover { background:var(--navy-800); transform:translateY(-2px); box-shadow:var(--sh-2); }
.btn-blue { background:var(--blue); color:#fff; }
.btn-blue:hover { background:var(--blue-600); transform:translateY(-2px); box-shadow:var(--sh-blue); }
.btn-ghost { background:transparent; color:var(--navy); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { box-shadow:inset 0 0 0 1.5px var(--navy); transform:translateY(-2px); }
.btn-light { background:#fff; color:var(--navy); box-shadow:var(--sh-1); }
.btn-light:hover { transform:translateY(-2px); box-shadow:var(--sh-2); }
.btn-sm { padding:11px 18px; font-size:13px; }
.btn-lg { padding:19px 36px; font-size:15px; }
.btn-block { width:100%; }
.btn-icon { width:44px; height:44px; padding:0; border-radius:var(--r-full); }

/* Link with arrow */
.link-arrow { display:inline-flex; align-items:center; gap:8px; font-weight:var(--w-semi); font-size:14px; color:var(--navy); transition:gap .3s var(--ease); }
.link-arrow:hover { gap:14px; color:var(--blue); }

/* ============================================================
   CARDS
   ============================================================ */
.card { background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden; }
.card-pad { padding:var(--s6); }
.surface { background:#fff; border-radius:var(--r-lg); border:1px solid var(--line); }

/* Product card */
.pcard { position:relative; background:transparent; border-radius:20px; overflow:hidden; cursor:pointer;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out); }
.pcard:hover { transform:translateY(-6px); box-shadow:0 14px 32px rgba(6,21,56,.08), 0 3px 10px rgba(6,21,56,.04); }
.pcard-media { position:relative; aspect-ratio:1/1; background:#FCFBF9; border-radius:20px; overflow:hidden; }
.pcard-media::after { content:''; position:absolute; inset:0; border-radius:20px; box-shadow:inset 0 0 0 1px rgba(6,21,56,.05); pointer-events:none; }
.pcard-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:9%;
  mix-blend-mode:multiply; transition:transform .8s var(--ease-out); }
.pcard:hover .pcard-media img { transform:scale(1.06); }
.pcard-sym { position:absolute; right:14px; bottom:14px; width:34px; height:34px; opacity:0; transition:opacity .5s var(--ease); pointer-events:none; }
.pcard:hover .pcard-sym { opacity:.05; }
.pcard-body { padding:18px 6px 6px; }
.pcard-cat { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:9px; }
.pcard-name { font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--navy); line-height:1.3; margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
.pcard-foot { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; row-gap:4px; }
.pcard-prices { display:flex; align-items:baseline; gap:7px; min-width:max-content; flex-wrap:wrap; row-gap:2px; }
.pcard-old { font-size:12px; color:var(--ink-3); text-decoration:line-through; flex-shrink:0; }
.pcard-price { font-size:21px; letter-spacing:-.02em; white-space:nowrap; }
@media(max-width:1080px){ .pcard-price { font-size:18px; } }
.pcard-rate { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--navy); font-weight:600; flex-shrink:0; white-space:nowrap; }
.pcard-star { color:var(--blue); font-size:12px; }
.pcard-rev { color:var(--ink-3); font-weight:400; }
/* Butonat në rresht të vetin NËN foto — s'e mbulojnë kurrë imazhin.
   max-height 0→X për hapje pa layout-shift; kartat mbeten të rreshtuara. */
.pcard-quick {
  display:flex; gap:10px; max-height:0; opacity:0; margin:0; padding:0 10px; overflow:hidden;
  transition:max-height .35s var(--ease), opacity .3s var(--ease), margin .35s var(--ease);
}
.pcard-cta-add { flex:1.35; }
.pcard-cta-view { flex:1; }
.pcard:hover .pcard-quick, .pcard:focus-within .pcard-quick {
  max-height:60px; opacity:1; margin:12px 0 2px;
}
.pcard-cta-add, .pcard-cta-view { padding:10px 12px; font-size:12.5px; border-radius:12px; white-space:nowrap; min-width:0; }
.pcard-cta-view { background:#fff; color:var(--navy); box-shadow:inset 0 0 0 1.5px var(--line); }
.pcard-cta-view:hover { box-shadow:inset 0 0 0 1.5px var(--navy); }
/* Pajisjet me prekje (telefon/tablet) — s'ka hover, tregoji gjithmonë */
@media (hover:none) {
  .pcard-quick { max-height:60px; opacity:1; margin:10px 0 2px; }
}
.wish { position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:var(--r-full);
  background:rgba(255,255,255,.7); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--navy); box-shadow:0 1px 3px rgba(6,21,56,.08);
  transition:transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), box-shadow .4s; z-index:2; }
.wish:hover { transform:scale(1.14); background:#fff; box-shadow:0 4px 14px rgba(6,21,56,.14); }
.wish.on { background:var(--blue); color:#fff; animation:pop .5s var(--ease); box-shadow:var(--sh-blue); }
@keyframes pop { 0%{transform:scale(1);} 40%{transform:scale(1.4);} 70%{transform:scale(.92);} 100%{transform:scale(1);} }

/* Collection (editorial) card */
.ccard { position:relative; display:block; border-radius:var(--r-xl); overflow:hidden; cursor:pointer;
  background:var(--grey); transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.ccard:hover { transform:translateY(-6px); box-shadow:var(--sh-3); }
.ccard img { transition:transform .9s var(--ease-out); }
.ccard:hover img { transform:scale(1.06); }

/* ============================================================
   BADGES
   ============================================================ */
.badge { white-space:nowrap; display:inline-flex; align-items:center; gap:6px; font-size:9.5px; font-weight:var(--w-semi);
  letter-spacing:.14em; padding:5px 10px; border-radius:var(--r-full); text-transform:uppercase; line-height:1; }
.badge-blue { background:var(--blue); color:#fff; }
.badge-navy { background:var(--navy); color:#fff; }
.badge-light { background:rgba(255,255,255,.9); backdrop-filter:blur(6px); color:var(--navy); }
.badge-soft { background:var(--blue-050); color:var(--blue); }
.badge-dot::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ============================================================
   INPUTS / FORMS
   ============================================================ */
.field { display:block; }
.field .lbl { display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:var(--w-semi); color:var(--ink-3); margin-bottom:8px; }
.input { width:100%; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:15px 16px; font-size:15px; color:var(--navy); transition:border-color .25s, box-shadow .25s; }
.input::placeholder { color:var(--ink-3); }
.input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-050); }
/* Checkout option rows (delivery / payment) */
.opt-row { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--r-md); cursor:pointer; transition:border-color .2s var(--ease), background .2s var(--ease); }
.opt-row[data-on="true"] { border-color:var(--blue); background:var(--blue-050); }
.opt-radio { width:18px; height:18px; border-radius:50%; border:2px solid var(--ink-3); flex-shrink:0; position:relative; transition:border-color .2s; }
.opt-radio[data-on="true"] { border-color:var(--blue); }
.opt-radio[data-on="true"]::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--blue); }
.select { appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23061538' stroke-width='1.5' fill='none'/></svg>");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }

/* Toggle */
.toggle { width:44px; height:26px; border-radius:var(--r-full); background:var(--line); position:relative; transition:background .25s; flex-shrink:0; cursor:pointer; }
.toggle.on { background:var(--blue); }
.toggle i { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .25s var(--ease); box-shadow:var(--sh-1); }
.toggle.on i { left:21px; }

/* ============================================================
   EDITORIAL HOME — bento, lifestyle band, bestsellers feature
   ============================================================ */
/* Bento collections — mixed heights */
.bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:210px; gap:16px; }
.bento-card { position:relative; overflow:hidden; border-radius:var(--r-lg); cursor:pointer; display:block; box-shadow:var(--sh-1);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.bento-card:hover { transform:translateY(-5px); box-shadow:var(--sh-2); }
.bento-0 { grid-column:span 2; grid-row:span 2; }
.bento-1 { grid-column:span 2; }
.bento-2 { grid-column:span 1; grid-row:span 1; }
.bento-3 { grid-column:span 1; grid-row:span 1; }
.bento-img--cover { padding:0 !important; object-fit:cover !important; object-position:center 32% !important; mix-blend-mode:normal !important; }
/* Scrim i lehtë poshtë kartave me foto të plotë — titulli navy lexohet gjithmonë */
.bento-card:has(.bento-img--cover)::after { content:''; position:absolute; left:0; right:0; bottom:0; height:55%; background:linear-gradient(to top, rgba(255,255,255,.92), rgba(255,255,255,.55) 45%, transparent); pointer-events:none; z-index:1; }
.bento-body { z-index:2; }
.bento-img--collage { padding:5% !important; object-fit:contain; }
.bento-0 .bento-img--collage { padding:7% !important; }
.bento-img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:12%; mix-blend-mode:multiply;
  transition:transform .8s var(--ease-out); }
.bento-card:hover .bento-img { transform:scale(1.05); }
.bento-body { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:18px; }
.bento-count { align-self:flex-start; }
.bento-foot { }
.bento-name { color:var(--navy); }
.bento-1 .bento-foot, .bento-2 .bento-foot, .bento-3 .bento-foot { }
.bento-1 .bento-name, .bento-2 .bento-name, .bento-3 .bento-name { font-size:20px; }
.bento-tag { margin:2px 0 8px; }
.bento-2 .bento-tag, .bento-3 .bento-tag { display:none; }
.bento-link { font-size:13px; }

/* Lifestyle band */
.life-band { background:var(--navy); color:#fff; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:0; overflow:hidden; position:relative; }
.life-media { position:relative; height:100%; min-height:440px; display:flex; align-items:center; justify-content:center; }
.life-media img { position:relative; z-index:1; height:76%; width:auto; max-width:74%; object-fit:contain; filter:drop-shadow(0 40px 60px rgba(0,0,0,.5)); }
.life-card { position:relative; z-index:1; width:76%; max-width:440px; aspect-ratio:4/5; border-radius:var(--r-xl); overflow:hidden; background:radial-gradient(circle at 50% 40%,#fff,#EFE9DC); box-shadow:0 40px 80px rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; }
.life-card img { position:static !important; height:80% !important; width:auto !important; max-width:82% !important; object-fit:contain; filter:none !important; }
.life-glow { position:absolute; width:60%; height:60%; left:50%; top:52%; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(3,78,255,.4),transparent 64%); filter:blur(40px); }
.life-copy { padding:80px 72px; }

/* Bestsellers curated */
.best-layout { display:grid; grid-template-columns:1.15fr 1fr; gap:28px; align-items:stretch; }
.best-feature { position:relative; display:flex; flex-direction:column; background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1); cursor:pointer;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.best-feature:hover { transform:translateY(-5px); box-shadow:var(--sh-2); }
.best-feature-media { position:relative; flex:1; min-height:320px; background:radial-gradient(circle at 50% 38%,#fff,#EFE9DC); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.best-feature-media img { position:relative; z-index:1; height:78%; width:auto; max-width:72%; object-fit:contain; filter:drop-shadow(0 24px 34px rgba(0,0,0,.18)); }
.best-feature-glow { position:absolute; width:70%; height:70%; left:50%; top:52%; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(3,78,255,.14),transparent 64%); filter:blur(34px); }
.best-feature-body { padding:30px 32px 32px; }
.best-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }

@media(max-width:900px){
  .bento { grid-template-columns:1fr 1fr; grid-auto-rows:180px; gap:12px; }
  .bento-0 { grid-column:span 2; grid-row:span 1; }
  .bento-1 { grid-column:span 2; }
  .life-band { grid-template-columns:1fr; }
  .life-media { min-height:auto; order:-1; padding:20px 0; }
  /* foto "Dritë, emocion" — safe zone: kartë më e ulët, foto me hapësirë brenda */
  .life-card { width:min(88%,340px); aspect-ratio:1/1; }
  .life-card img { height:74% !important; max-width:74% !important; }
  .life-copy { padding:36px 20px 44px; }
  .best-layout { grid-template-columns:1fr; gap:20px; }
  .best-feature-media { min-height:300px; }
  .best-grid { gap:12px; }
  /* Vlerësimet — rrëshqitëse horizontale (swipe), me pamje të kartës tjetër */
  .reviews-grid { display:flex !important; grid-template-columns:none !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; padding:4px 0 14px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .reviews-grid::-webkit-scrollbar { display:none; }
  .reviews-grid > * { scroll-snap-align:center; flex:0 0 84%; }
}

/* Editorial campaign section — floating transparent product */
.edit-stage { position:relative; display:flex; align-items:center; justify-content:center; min-height:440px; }
.edit-stage .evid { width:100%; max-width:460px; }
.edit-glow { position:absolute; width:78%; height:78%; left:50%; top:48%; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(3,78,255,.42),rgba(3,78,255,.12) 42%,transparent 66%); filter:blur(38px); z-index:0; }
.edit-float { position:relative; z-index:1; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  animation:editFloat 7s ease-in-out infinite; will-change:transform; }
.edit-prod { width:auto; height:400px; max-width:96%; object-fit:contain; filter:drop-shadow(0 44px 42px rgba(0,0,0,.55)); }
.edit-reflect { display:block; width:70%; height:120px; margin-top:-6px; background-repeat:no-repeat; background-position:center top; background-size:contain;
  transform:scaleY(-1); -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.28),transparent 62%); mask-image:linear-gradient(to bottom,rgba(0,0,0,.28),transparent 62%); opacity:.4; filter:blur(1px); }
@keyframes editFloat { 0%,100%{ transform:translateY(0) rotate(-1.5deg); } 50%{ transform:translateY(-6px) rotate(1.5deg); } }
@media (prefers-reduced-motion:reduce){ .edit-float{ animation:none; } }
/* Elegant CTA hover: lift + soft glow + arrow shift */
.btn-glow .btn-arrow { display:inline-block; transition:transform .35s var(--ease-out); }
.btn-glow:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(3,78,255,.45); }
.btn-glow:hover .btn-arrow { transform:translateX(4px); }
@media(max-width:900px){
  .edit-section .edit-grid { grid-template-columns:1fr !important; gap:8px !important; }
  .edit-section .reveal:first-child { order:1; }
  .edit-stage { order:2; min-height:0; margin-top:8px; }
  .edit-prod { height:300px; }
  .edit-reflect { height:90px; }
}


.table { width:100%; border-collapse:collapse; }
.table th { text-align:left; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:var(--w-semi); padding:0 12px 12px; border-bottom:1px solid var(--line); }
.table td { padding:16px 12px; border-bottom:1px solid var(--line); font-size:14px; }

/* ============================================================
   MOTION — reveal on scroll
   ============================================================ */
/* Si "motion-wake" i fourzed: elementi del nga mjegulla (blur + dritë) te i qartë */
@keyframes reveal { from{ opacity:0; transform:translateY(28px); filter:blur(12px) brightness(1.3);} to{ opacity:1; transform:none; filter:blur(0) brightness(1);} }
/* Si "motion-haze-out": teksti i videos turbullohet dhe ikën lart kur zbret */
@keyframes hazeOut { to{ opacity:0; filter:blur(8px); transform:translate3d(0,-14vh,0);} }
.hero-haze { animation:hazeOut cubic-bezier(.55,0,1,.45) both; animation-timeline:scroll(root); animation-range:0 85vh; }
@supports not (animation-timeline:scroll()){ .hero-haze{ animation:none; } }
@media (prefers-reduced-motion:reduce){ .hero-haze{ animation:none; } }
.reveal { animation:reveal .9s var(--ease-out) both; animation-timeline:view(); animation-range:entry 0% cover 26%; }
@supports not (animation-timeline:view()){ .reveal{ animation:reveal .9s var(--ease-out) both; } }
@media (prefers-reduced-motion:reduce){ .reveal{ animation:none; } }

@keyframes floaty { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }
.floaty { animation:floaty 6s ease-in-out infinite; }

/* ---- Cinematic hero video ---- */
.hero-cine { background:#040B20; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; animation:heroKen 26s ease-in-out infinite alternate; }
@keyframes heroKen { from{ transform:scale(1.06); } to{ transform:scale(1.14); } }
@media (prefers-reduced-motion:reduce){ .hero-video{ animation:none; transform:scale(1.08); } }

/* Featured collection showcase (right column) */
.hero-feat-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-xl); padding:22px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 30px 80px rgba(0,0,0,.4); }
.hero-feat-all { background:none; border:none; color:rgba(255,255,255,.75); font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:color .25s var(--ease); }
.hero-feat-all:hover { color:#fff; }
.hero-feat-hero { position:relative; aspect-ratio:16/11; border-radius:var(--r-lg); background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.16),rgba(255,255,255,.02) 62%); display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; }
.hero-feat-hero img { width:80%; height:80%; object-fit:contain; transition:transform .7s var(--ease); }
.hero-feat-hero:hover img { transform:scale(1.05); }
.hero-feat-thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
.hero-thumb { aspect-ratio:1; border-radius:14px; background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.2); cursor:pointer; padding:8px; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.hero-thumb img { width:100%; height:100%; object-fit:contain; }
.hero-thumb:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.28); }
@media(max-width:900px){
  /* Celulari: videoja mbush gjithë ekranin deri në cepa (si fourzed), teksti ulet poshtë
     dhe shiriti i poshtëm rri transparent mbi të. Karta "Koleksioni i zgjedhur" fshihet. */
  .hero-cine{ min-height:100vh; min-height:100svh; align-items:flex-end !important; padding-bottom:calc(104px + env(safe-area-inset-bottom, 0px)); }
  .hero-grid{ grid-template-columns:1fr !important; gap:0 !important; padding-top:24px !important; padding-bottom:0 !important; }
  .hero-feat, .hero-scroll{ display:none !important; }
  .hero-stats{ margin-top:32px !important; gap:28px !important; }
  .hero-ctas{ margin-top:28px !important; }
}

/* ---- Category hero (editorial split) ---- */
.cat-hero { padding-top:52px; padding-bottom:52px; }
.cat-hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; min-height:340px; }
.cat-hero-copy { animation:catFade .9s var(--ease-out) both; }
.cat-crumb { display:flex; align-items:center; gap:9px; font-size:12px; letter-spacing:.04em; color:rgba(255,255,255,.55); margin-bottom:22px; }
.cat-crumb span[onclick], .cat-crumb > span:first-child { cursor:pointer; transition:color .25s var(--ease); }
.cat-crumb > span:first-child:hover { color:#fff; }
.cat-crumb-sep { color:rgba(255,255,255,.3); }
.cat-crumb-cur { color:#9DBAFF; font-weight:600; }
.cat-hero-title { font-size:clamp(44px,6vw,76px); line-height:.98; }
.cat-hero-sub { color:rgba(255,255,255,.72); max-width:400px; margin:0 0 26px; }
.cat-hero-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,.7); }
.cat-hero-meta b { color:#fff; font-weight:700; }
.cat-hero-dot { color:rgba(255,255,255,.3); }

.cat-hero-stage { position:relative; height:360px; animation:catFade 1.1s var(--ease-out) both; }
.cat-stage-glow { position:absolute; width:74%; height:74%; left:50%; top:52%; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(3,78,255,.32),transparent 64%); filter:blur(34px); z-index:0; }
.cat-stage-solo { position:absolute; inset:4% 6%; z-index:2; display:flex; align-items:center; justify-content:center; will-change:transform; }
.cat-stage-solo img { max-width:100%; max-height:100%; width:auto; height:100%; object-fit:contain; filter:drop-shadow(0 40px 60px rgba(0,0,0,.5)); }
@keyframes catFade { from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){ .cat-hero-copy,.cat-hero-stage{ animation:none; } }
@media(max-width:900px){
  .cat-hero-grid{ grid-template-columns:1fr; gap:24px; min-height:0; }
  .cat-hero-stage{ height:230px; order:-1; }
}


@keyframes spin-slow { to { transform:rotate(360deg); } }

/* ============================================================
   SYMBOL / PATTERN as brand texture
   ============================================================ */
.symbol-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.symbol-bg img { position:absolute; opacity:.05; }
.range{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:pointer;touch-action:pan-y;padding:0;margin:0}
.range::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:var(--line)}
.range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-12px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 2px 10px rgba(3,78,255,.4);cursor:grab;transition:transform .12s var(--ease)}
.range:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.12)}
.range::-moz-range-track{height:6px;border-radius:6px;background:var(--line)}
.range::-moz-range-progress{height:6px;border-radius:6px;background:var(--blue)}
.range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 2px 8px rgba(3,78,255,.35);cursor:grab}
.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(3,78,255,.2)}
.pslider{position:relative;height:34px;display:flex;align-items:center;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;outline:none}
.pslider-track{width:100%;height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.pslider-fill{height:100%;background:var(--blue);border-radius:6px}
.pslider-thumb{position:absolute;top:50%;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 2px 10px rgba(3,78,255,.4);transform:translateY(-50%);transition:transform .12s var(--ease);pointer-events:none}
.pslider.dragging .pslider-thumb{transform:translateY(-50%) scale(1.14)}
.pslider:focus-visible .pslider-thumb{box-shadow:0 0 0 5px rgba(3,78,255,.22)}
/* footer links — calm hover, no selection/tap flash */
.flink{font-size:14px;color:rgba(255,255,255,.7);padding:6px 0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:color .22s var(--ease),transform .22s var(--ease)}
.flink:hover{color:#fff;transform:translateX(3px)}
.flink:active{color:#9DBAFF}
/* ===== Auth / Login page ===== */
.auth-page{min-height:82vh;display:grid;place-items:center;padding:64px 20px;position:relative;overflow:hidden;background:linear-gradient(180deg,#FBF9F5 0%,#F6F4EF 100%)}
.auth-glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.auth-glow.g1{width:520px;height:520px;left:-140px;top:-160px;background:radial-gradient(circle,rgba(3,78,255,.10),transparent 65%)}
.auth-glow.g2{width:460px;height:460px;right:-120px;bottom:-160px;background:radial-gradient(circle,rgba(3,78,255,.08),transparent 65%)}
.auth-shape{position:absolute;border:1.5px solid rgba(6,21,56,.07);pointer-events:none}
.auth-shape.s1{width:180px;height:180px;border-radius:32px;transform:rotate(18deg);left:8%;bottom:12%}
.auth-shape.s2{width:120px;height:120px;border-radius:50%;right:10%;top:14%}
.auth-card{max-width:460px;width:100%;padding:44px 40px;position:relative;background:#fff;border:1px solid rgba(6,21,56,.07);border-radius:var(--r-xl);box-shadow:0 1px 2px rgba(6,21,56,.04),0 24px 60px rgba(6,21,56,.09)}
.auth-seg{display:flex;background:var(--grey);border-radius:var(--r-full);padding:4px;margin-bottom:26px}
.auth-seg-btn{flex:1;padding:11px;border-radius:var(--r-full);font-weight:600;font-size:13px;background:transparent;color:var(--ink-2);border:none;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.auth-seg-btn.on{background:#fff;color:var(--navy);font-weight:700;box-shadow:0 1px 3px rgba(6,21,56,.1),0 4px 12px rgba(6,21,56,.07)}
.ifield{position:relative;display:block}
.ifield .input{padding-left:42px;padding-right:42px}
.ifield .ii{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-3);display:inline-flex;pointer-events:none;transition:color .25s var(--ease)}
.ifield:focus-within .ii{color:var(--blue)}
.ieye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:none;background:none;color:var(--ink-3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;transition:color .2s,background .2s}
.ieye:hover{color:var(--navy);background:var(--grey)}
.auth-cta{position:relative;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
.auth-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(3,78,255,.35)}
.auth-cta:active{transform:translateY(0);box-shadow:0 4px 12px rgba(3,78,255,.3)}
.auth-cta .auth-arrow{display:inline-block;margin-left:6px;transition:transform .3s var(--ease-out)}
.auth-cta:hover .auth-arrow{transform:translateX(4px)}
.auth-b2b{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding:15px 18px;background:var(--ivory);border:1px solid rgba(6,21,56,.08);border-radius:var(--r-lg);cursor:pointer;transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.auth-b2b:hover{border-color:rgba(3,78,255,.35);transform:translateY(-1px);box-shadow:0 6px 18px rgba(6,21,56,.06)}
.auth-b2b-arrow{color:var(--blue);font-weight:700;font-size:17px;transition:transform .3s var(--ease-out)}
.auth-b2b:hover .auth-b2b-arrow{transform:translateX(4px)}
@media(max-width:520px){.auth-card{padding:32px 22px}.auth-page{padding:36px 14px}}
.pattern-tile { background-image:url("../brand/fusha-symbol.png"); background-size:64px 64px; opacity:.05; }
.pattern-tile.on-dark { filter:brightness(0) invert(1); }

/* Utilities */
.tag-strike { color:var(--ink-3); text-decoration:line-through; }
.center { text-align:center; }
.muted { color:var(--ink-2); }
.hairline { height:1px; background:var(--line); border:0; }
.spread { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.row { display:flex; align-items:center; gap:12px; }
.hide-mobile { }
@media(max-width:900px){ .hide-mobile{ display:none !important; } }
.only-mobile { display:none; }
@media(max-width:900px){ .only-mobile{ display:block; } }