/* merre.me · prototipi i klikueshëm · shtresa e ndërveprimit, animacioneve dhe responsivitetit */
:root{color-scheme:light;--ease:cubic-bezier(.2,.7,.2,1);--sh:0 18px 40px rgba(34,31,28,.10)}
html,body{background:var(--cream);margin:0}
body{overflow-x:hidden}
.pg{animation:pgIn .45s var(--ease) both}
@keyframes pgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* fokus i dukshëm */
.pg a:focus-visible,.pg button:focus-visible,.pg .chip:focus-visible,.pg [tabindex]:focus-visible{outline:2px solid var(--clay-strong);outline-offset:3px;border-radius:10px}

/* butonat, çipet, kartat */
.btn{transition:transform .15s var(--ease),background-color .2s,box-shadow .2s,color .2s}
.btn:hover{box-shadow:0 8px 20px rgba(34,31,28,.14)}
.btn-clay:hover{background:#8F4C38}.btn-ink:hover{background:#3A3530}
.btn-soft:hover,.btn-ghost:hover{background:var(--sand)}
.btn:active,.chip:active,.icobtn:active{transform:scale(.96)}
.chip{transition:background-color .2s,color .2s,border-color .2s,transform .15s}
.chip:hover{border-color:var(--ink)}
.icobtn{transition:background-color .2s,transform .15s}.icobtn:hover{background:var(--sand)}
a.card,.pc{transition:transform .25s var(--ease),box-shadow .25s}
a.card:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.pc .img img{transition:transform .6s var(--ease)}
.pc:hover .img img{transform:scale(1.045)}
.pc .ptag{transition:transform .25s var(--ease)}.pc:hover .ptag{transform:translateY(-2px)}
.side a{transition:background-color .2s,color .2s}.side a:not(.on):hover{background:var(--sand)}
.tbl tr{transition:background-color .2s}.tbl tr:hover td{background:#FBF7F1}
.seg2 a,.seg2 span{cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.cal span:not(.hd):not(:empty):not(.x){cursor:pointer;transition:background-color .15s}
.cal span:not(.hd):not(:empty):not(.x):not(.sel):not(.mid):hover{background:var(--sand)}

/* favorit */
.fav{cursor:pointer;transition:transform .2s}
.fav.on{color:var(--clay-strong)}.fav.on svg{fill:currentColor}
.fav.pop{animation:pop .35s var(--ease)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
.bump{animation:pop .3s var(--ease)}

/* shfaqja gjatë scroll-it (vetëm kur JS e shënon) */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}

/* menuja: fade + slide në hover (desktop) */
.mega{display:grid;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s;pointer-events:none}
.nv .dd:hover>.mega,.nv .dd:focus-within>.mega,.mega.open{opacity:1;visibility:visible;transform:none;transition-delay:0s;pointer-events:auto}
.nv .dd>a .cv{transition:transform .2s}.nv .dd:hover>a .cv{transform:rotate(180deg)}

/* butoni ☰ dhe sirtari mobile */
.burger{display:none}
.drawer{position:fixed;inset:0;z-index:100;visibility:hidden}
.drawer .scrim{position:absolute;inset:0;background:rgba(34,31,28,.45);opacity:0;transition:opacity .25s}
.drawer .panel{position:absolute;top:0;bottom:0;left:0;width:min(88vw,380px);background:var(--paper);transform:translateX(-102%);transition:transform .3s var(--ease);overflow-y:auto;padding:16px 0 32px;font-family:var(--sans);color:var(--ink)}
.drawer.open{visibility:visible}.drawer.open .scrim{opacity:1}.drawer.open .panel{transform:none}
.drawer .dhead{display:flex;align-items:center;justify-content:space-between;padding:0 20px 12px}
.drawer details{border-top:1px solid var(--line)}
.drawer summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;font-weight:600;cursor:pointer}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary:after{content:"+";font-size:20px;transition:transform .2s}
.drawer details[open] summary:after{transform:rotate(45deg)}
.drawer .dbody{padding:0 20px 14px;display:grid;grid-template-columns:1fr 1fr;gap:2px 16px}
.drawer .dbody h6{grid-column:1/-1;margin:10px 0 4px;font:700 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.drawer .dbody a{padding:6px 0;font-size:14px}
.drawer .dbody b{grid-column:1/-1;font-size:12px;margin-top:4px}
.drawer .dbody .promo,.drawer .dbody span{display:none}
.drawer .dlinks{display:flex;flex-direction:column;gap:10px;padding:18px 20px;border-top:1px solid var(--line)}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--paper);font:500 14px var(--sans);padding:12px 18px;border-radius:999px;box-shadow:var(--sh);opacity:0;transition:opacity .25s,transform .25s var(--ease);z-index:200;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* butoni i prototipit */
.pbtn{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:150;display:flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:10px 16px;font:600 13px var(--sans);cursor:pointer;box-shadow:var(--sh)}
.pbtn:hover{background:#3A3530}
.pmenu{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(68px + env(safe-area-inset-bottom,0px));z-index:150;width:min(340px,calc(100vw - 32px));max-height:min(70vh,620px);overflow-y:auto;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 60px rgba(34,31,28,.2);padding:14px;font-family:var(--sans);color:var(--ink);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s var(--ease),visibility 0s .2s}
.pmenu.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.pmenu h6{margin:12px 6px 4px;font:700 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pmenu a{display:flex;justify-content:space-between;padding:7px 8px;border-radius:8px;font-size:14px;color:var(--ink);text-decoration:none}
.pmenu a:hover{background:var(--sand)}.pmenu a.cur{background:var(--ink);color:var(--paper)}
.pmenu .hub{display:block;text-align:center;background:var(--clay-strong);color:#fff;font-weight:700;margin-bottom:4px}

/* ekranet mobile: telefon në qendër në desktop, ekran i plotë në telefon */
body.ph{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;gap:40px;padding:40px 16px;box-sizing:border-box;background:var(--sand) url(img/pattern.webp) repeat;background-size:520px auto}
body.ph:before{content:"";position:fixed;inset:0;background:rgba(241,231,220,.88);z-index:-1}
body.ph .phone{border-radius:44px;box-shadow:0 0 0 10px #221F1C,0 40px 80px rgba(34,31,28,.3);flex:none}
.phone .scr{overflow-y:auto;scrollbar-width:none}.phone .scr::-webkit-scrollbar{display:none}
.flowp{width:280px;font-family:var(--sans);color:var(--ink);display:flex;flex-direction:column;gap:6px;position:sticky;top:40px}
.flowp h2{font:500 30px var(--display);margin:0 0 4px}
.flowp p{margin:0 0 10px;font-size:13px;color:var(--muted)}
.flowp a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;font-size:14px;color:var(--ink);text-decoration:none}
.flowp a i{font-style:normal;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:var(--paper)}
.flowp a:hover{background:rgba(255,253,249,.7)}.flowp a.cur{background:var(--ink);color:var(--paper)}.flowp a.cur i{background:var(--clay-strong);border-color:var(--clay-strong);color:#fff}
.flowp .nav2{display:flex;gap:8px;margin-top:10px}
@media (max-width:860px){.flowp{display:none}}
@media (max-width:480px){
  body.ph{padding:0;display:block;background:var(--cream)}
  body.ph:before{display:none}
  body.ph .phone{width:100%;height:100vh;height:100dvh;border-radius:0;box-shadow:none}
}

/* shtresa responsive për faqet desktop */
@media (max-width:900px){
  .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .hdr .wrap{gap:10px;min-height:64px}
  .hdr .wrap>.row{gap:6px}
  .hdr .wrap>.row .btn-soft{display:none}
  .burger{display:inline-flex}
  .pg [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  .pg [style*="repeat(6"],.pg [style*="repeat(4"],.pg [style*="repeat(5"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pg .ob{grid-template-columns:minmax(0,1fr)!important}
  .pg [style*="position: sticky"]{position:static!important}
  .pg [style*="height: 760px"]{height:auto!important;aspect-ratio:3/4}
  .pg [style*="height: 520px"]{height:380px!important}
  .pg [style*="padding: 64px 72px"],.pg [style*="padding: 64px 80px"],.pg [style*="padding: 64px;"]{padding:40px 16px!important}
  .pg [style*="min-width: 0; gap: 22px"]{min-width:0}
  .pg aside[style*="max-width"]{max-width:none!important}
  .h-xl{font-size:clamp(44px,13vw,64px)}
  .sbar{border-radius:20px}
  .app{flex-direction:column;flex-wrap:nowrap}
  .app>.side,.app>.main{width:100%;max-width:100%;box-sizing:border-box}
  .side{max-width:none;flex:none;flex-direction:row;align-items:center;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:10px 12px;gap:6px;position:sticky;top:0;z-index:5}
  .side>a[href="Main.html"],.side>.row,.side .grp{display:none}
  .side a{flex:none;min-height:38px;white-space:nowrap}
  .main{padding:20px 16px 72px}
  .topbar>*{margin-left:0!important}
  .tblw{overflow-x:auto}
  .tblw .tbl{min-width:640px}
  .kpi .v{font-size:34px}
}
@media (max-width:560px){
  .pg [style*="repeat(6"],.pg [style*="repeat(4"],.pg [style*="repeat(5"],.g4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .g4{gap:14px}
  .pc .name{font-size:19px}
  .pg:not(.phone) .row{flex-wrap:wrap}
  .hdr .row{flex-wrap:nowrap!important}
  .hdr .wrap>.row .icobtn[aria-label="Kërko"]{display:none}
  .pg:not(.phone) .badge{white-space:normal}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
/* header-i me dy nivele në ekrane të ngushta */
@media (max-width:900px){
  .hdr2 .top{grid-template-columns:auto minmax(0,1fr) auto;min-height:60px;gap:10px}
  .hdr2 .hl,.hdr2 .bot{display:none!important}
  .hdr2 .brand{justify-self:start}
  .hdr2 .acct span{display:none}.hdr2 .acct{padding:0 11px}
  .hdr2 .hr .icobtn[aria-label^="Të preferuarat"]{display:none}
  .ft .fgrid{grid-template-columns:1fr 1fr!important}
}
@media (max-width:900px){
  .pg [style*="repeat(7"]{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:3px!important}
  .pg [style*="repeat(7"]>.card{min-height:54px!important;padding:3px!important;overflow:hidden}
  .pg [style*="repeat(7"]>.card .badge{font-size:0!important;padding:0!important;width:8px;height:8px;border-radius:50%}
}