/* ==========================================================
   AMBINDI — faqja publike
   Tekstil shtëpie & Baby Shop · Rahovec · që nga 1994

   CSS vanilla, pa build step. Ngjyrat kryesore dhe fonti i tekstit
   vijnë nga Tema (Admin → Pamja) si variabla në <head>; vlerat këtu
   janë vetëm parazgjedhjet.

   Gjuha vizuale:
   - letër e ngrohtë (#FBF8F3) në vend të së bardhës së ftohtë
   - blu mbretërore + e verdhë gjalpi, direkt nga logoja
   - harqe (si dritare) për fotot dhe buzë dantelle mes seksioneve
   - Fraunces për titujt, me italik si shkronjat e logos
   ========================================================== */

:root {
    /* Tema (mbivendosen nga Theme::cssVariables) */
    --accent: #2F4596;
    --accent-dark: #22347A;
    --accent-soft: #D6DCEE;
    --accent-tint: #EEF1F8;
    --on-accent: #FFFFFF;
    --ink: #1B2346;
    --ink-2: #474E6F;
    --ink-3: #7B8098;
    --ink-4: #A9ACBC;
    --line: #E4E1DA;
    --line-2: #EEEBE4;
    --soft: #F6F3EE;
    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 24px;
    --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Ambindi */
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --paper: #FBF8F3;
    --paper-2: #F3EDE3;
    --linen: #ECE3D5;
    --butter: #F2EC7C;
    --butter-2: #E4D94A;
    --butter-soft: #FBF8D8;
    --blush: #F4DFD7;
    --blush-2: #FAEFEA;
    --rose: #B14A5F;

    --ok: #2E7D5B;
    --ok-soft: #E3F2EA;
    --warn: #A3670F;
    --warn-soft: #FBF1DC;
    --danger: #BF3A2B;
    --danger-soft: #FBE7E3;

    --shadow-sm: 0 1px 2px rgba(27, 35, 70, .05), 0 4px 14px -6px rgba(27, 35, 70, .08);
    --shadow: 0 14px 34px -16px rgba(27, 35, 70, .28);
    --shadow-lg: 0 30px 70px -28px rgba(27, 35, 70, .42);
    --ease: cubic-bezier(.2, .7, .2, 1);

    --wrap: 1320px;
    --gutter: clamp(16px, 4vw, 32px);
    --sticky-top: 150px;
}

/* ==========================================================
   BAZA
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 160px;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, video { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; vertical-align: -0.15em; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.015em;
    margin: 0 0 .5em;
    color: var(--ink);
    font-optical-sizing: auto;
}

p { margin: 0 0 1em; }

em { font-style: italic; }

::selection { background: var(--butter); color: var(--ink); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- Ndihmësat ---------- */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.flex { display: flex; align-items: center; gap: .75rem; }
.grow { flex: 1 1 auto; }
.muted { color: var(--ink-3); }
.small { font-size: .875rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.serif { font-family: var(--serif); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 1rem; }
.rot180 { transform: rotate(180deg); }

.hr { height: 1px; background: var(--line); margin: 1.1rem 0; }

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

@media (max-width: 767px) { .hide-sm { display: none !important; } }
@media (min-width: 768px) { .hide-lg { display: none !important; } }

.skip-link {
    position: fixed;
    left: 1rem; top: -100px;
    z-index: 999;
    padding: .7rem 1.1rem;
    background: var(--ink); color: #fff;
    border-radius: 10px;
    font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px; width: 0;
    z-index: 300;
    background: linear-gradient(90deg, var(--accent), var(--butter-2));
    pointer-events: none;
}

/* Etiketa e vogël me shkronja të mëdha mbi tituj */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
}
.eyebrow--light { color: var(--butter); }

/* Forma e harkut — si dritaret e vjetra, për fotot e koleksioneve.
   999px në krye zvogëlohet vetë në gjysmën e gjerësisë. */
.arch {
    border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
    overflow: hidden;
}

/* ==========================================================
   BUTONAT
   ========================================================== */

.btn {
    --h: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--h);
    padding: 0 1.35rem;
    border-radius: 999px;
    border: 1.5px solid transparent;
    background: transparent;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .15s;
}
.btn:active { transform: translateY(1px); }

.btn--sm { --h: 38px; padding: 0 1rem; font-size: .86rem; }
.btn--lg { --h: 54px; padding: 0 1.7rem; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-dark); box-shadow: 0 10px 22px -12px var(--accent); }

/* E verdha e logos — për veprimin kryesor të blerjes. */
.btn--accent { background: var(--butter); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(27, 35, 70, .07); }
.btn--accent:hover { background: var(--butter-2); box-shadow: 0 10px 22px -12px rgba(140, 128, 0, .7); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--accent); }

.btn--ghost { border-color: var(--line); color: var(--ink); background: rgba(255, 255, 255, .55); }
.btn--ghost:hover { border-color: var(--ink); background: #fff; }

.btn--soft { background: var(--accent-tint); color: var(--accent); }
.btn--soft:hover { background: var(--accent-soft); }

.btn--danger { background: var(--danger-soft); color: var(--danger); }
.btn--danger:hover { background: var(--danger); color: #fff; }

.btn--outline-light { border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn--outline-light:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }

.btn--wa { background: #1FAF5B; color: #fff; }
.btn--wa:hover { background: #178A47; box-shadow: 0 10px 22px -12px #1FAF5B; }

.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .93rem;
    color: var(--ink);
    padding-bottom: 2px;
    border-bottom: 1.5px solid var(--butter-2);
    transition: color .2s, gap .2s;
}
.link-arrow:hover { color: var(--accent); gap: .6rem; }

.icon-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--ink);
    transition: background .2s, color .2s;
}
.icon-btn:hover { background: #fff; color: var(--accent); }

.icon-btn__badge {
    position: absolute;
    top: 3px; right: 1px;
    min-width: 19px; height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--paper);
}
.icon-btn__badge.is-bump { animation: bump .6s var(--ease); }

@keyframes bump {
    30% { transform: scale(1.45); background: var(--butter-2); color: var(--ink); }
    100% { transform: scale(1); }
}

/* ==========================================================
   ETIKETAT, BADGE, ALARMET
   ========================================================== */

.tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .32rem .62rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 2px 8px -3px rgba(27, 35, 70, .25);
}
.tag--sale { background: var(--rose); color: #fff; }
.tag--new { background: var(--butter); color: var(--ink); }
.tag--out { background: #5D6178; color: #fff; }
.tag--store { background: var(--ink); color: var(--butter); }

.badge {
    display: inline-flex;
    align-items: center;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    background: var(--paper-2);
    color: var(--ink-2);
}
.badge--brand  { background: var(--accent); color: #fff; }
.badge--amber  { background: #FCEFD3; color: #8A5800; }
.badge--blue   { background: #E5EBFA; color: #2843A3; }
.badge--indigo { background: #E8E7FB; color: #4338CA; }
.badge--violet { background: #F1E8FB; color: #6D28D9; }
.badge--green  { background: #E1F3EA; color: #1F7A4F; }
.badge--red    { background: #FBE4E1; color: #B42318; }
.badge--gray   { background: var(--paper-2); color: var(--ink-2); }

.alert {
    position: relative;
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .9rem 1rem;
    border-radius: 14px;
    border: 1px solid transparent;
    margin-bottom: 1rem;
    font-size: .92rem;
    line-height: 1.5;
}
.alert svg { flex: none; margin-top: .12rem; }
.alert--success { background: var(--ok-soft); color: #1F5E43; border-color: #CBE7D8; }
.alert--error { background: var(--danger-soft); color: #8F2A1F; border-color: #F3CDC7; }
.alert--warn { background: var(--warn-soft); color: #74490B; border-color: #F1DFB5; }
.alert--info { background: var(--accent-tint); color: var(--accent-dark); border-color: var(--accent-soft); }

.alert__close {
    margin-left: auto;
    border: 0; background: none;
    font-size: 1.35rem; line-height: 1;
    color: inherit; opacity: .55;
}
.alert__close:hover { opacity: 1; }

.stars { display: inline-flex; align-items: center; gap: 2px; color: #D39E1A; }
.stars svg { display: block; }
.stars__count { margin-left: .35rem; font-size: .75rem; color: var(--ink-3); }

/* ==========================================================
   SHIRITI I NJOFTIMIT + HEADER
   ========================================================== */

.announce {
    background: var(--ink);
    color: rgba(255, 255, 255, .86);
    font-size: .8rem;
    letter-spacing: .01em;
}
.announce__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-height: 38px;
    padding-block: .4rem;
    position: relative;
}
.announce__text { display: inline-flex; align-items: center; gap: .5rem; text-align: center; }
.announce__text svg { color: var(--butter); }
.announce__social {
    position: absolute;
    right: var(--gutter);
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}
.announce__social a {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    color: rgba(255, 255, 255, .8);
    transition: background .2s, color .2s;
}
.announce__social a:hover { background: var(--butter); color: var(--ink); }
.announce__sep { margin: 0 .15rem; color: var(--butter); }

@media (max-width: 1023px) { .announce__social { display: none; } }

@media (max-width: 767px) {
    .announce__inner { min-height: 34px; }
    .announce__text { display: grid; grid-template-columns: auto 1fr; font-size: .76rem; white-space: nowrap; }
    .announce__sep { display: none; }
    .announce__part { grid-area: 1 / 2; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s var(--ease); }
    .announce__part.is-active { opacity: 1; transform: none; }
}

.header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--line-2);
    transition: box-shadow .3s;
}
/* Mjegulla e qelqit rri në një pseudo-element: `backdrop-filter` mbi vetë
   koka do ta bënte atë bazë për elementet `position:fixed` brenda saj, dhe
   paneli i kërkimit në telefon do të dilte i ngecur lart. */
.header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(251, 248, 243, .9);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
}
.header.is-stuck { box-shadow: 0 10px 30px -22px rgba(27, 35, 70, .55); }

.header__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo search actions";
    align-items: center;
    gap: clamp(1rem, 3vw, 2.75rem);
    padding-block: .75rem;
}

.burger { grid-area: burger; display: none; }

.logo {
    grid-area: logo;
    display: flex;
    align-items: center;
}
.logo__img { height: 56px; width: auto; transition: transform .3s var(--ease); }
.logo:hover .logo__img { transform: rotate(-2deg) scale(1.03); }
.logo__since {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--accent);
    font-style: italic;
}

.header__actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .15rem;
}

.search-toggle { display: none; }

/* ---------- Kërkimi ---------- */

.hsearch { grid-area: search; position: relative; justify-self: center; max-width: 620px; width: 100%; }

.hsearch__form {
    display: flex;
    align-items: center;
    height: 46px;
    padding: 0 .3rem 0 1rem;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    transition: border-color .2s, box-shadow .2s;
}
.hsearch__form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }

.hsearch__icon { color: var(--ink-3); }

.hsearch__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 .6rem;
    border: 0; outline: 0;
    background: transparent;
    font-size: .92rem;
}
.hsearch__input::placeholder { color: var(--ink-4); }
.hsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.hsearch__btn {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 0;
    background: var(--ink);
    color: #fff;
    transition: background .2s;
}
.hsearch__btn:hover { background: var(--accent); }

.hsearch__close { display: none; }

/* ---------- Sugjerimet ---------- */

.suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: max(100%, 380px);
    max-height: 70vh;
    overflow: auto;
    display: none;
    padding: .4rem;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    z-index: 80;
}
.suggest.is-open { display: block; }

.suggest__label {
    padding: .6rem .7rem .3rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.suggest__item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .7rem;
    border-radius: 10px;
}
.suggest__item:hover, .suggest__item.is-active { background: var(--paper); }
.suggest__item img {
    width: 40px; height: 50px;
    flex: none;
    object-fit: cover;
    border-radius: 8px;
    background: var(--paper-2);
}
.suggest__name { flex: 1; font-size: .9rem; line-height: 1.3; }
.suggest__price { font-weight: 700; font-size: .88rem; white-space: nowrap; }
.suggest__empty { padding: 1rem; text-align: center; color: var(--ink-3); font-size: .9rem; }

/* ---------- Llogaria ---------- */

.acct { position: relative; }

.acct__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 220px;
    padding: .4rem;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 70;
}
.acct__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.acct:hover .acct__menu, .acct:focus-within .acct__menu { opacity: 1; visibility: visible; transform: none; }

.acct__name { padding: .55rem .75rem .6rem; margin-bottom: .3rem; font-weight: 700; border-bottom: 1px solid var(--line-2); }
.acct__menu a, .acct__menu button {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .55rem .75rem;
    border: 0; background: none;
    border-radius: 9px;
    font-size: .9rem;
    text-align: left;
}
.acct__menu a:hover, .acct__menu button:hover { background: var(--paper); color: var(--accent); }
.acct__menu form { margin: 0; }

/* ---------- Shporta në kokë ----------
   Butoni me totalin, dhe kutia që hapet poshtë tij si flluskë mesazhi. */

.cartbox { position: relative; }

.cartbtn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    height: 48px;
    margin-left: .35rem;
    padding: 0 1rem 0 .4rem;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    transition: border-color .2s, box-shadow .2s;
}
.cartbtn:hover, .cartbox.is-open .cartbtn { border-color: var(--ink); box-shadow: var(--shadow-sm); }

.cartbtn__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--butter);
    color: var(--ink);
}
.cartbtn__icon .icon-btn__badge { top: -7px; right: -9px; }
.cartbtn__icon.is-hit { animation: cart-hit .65s var(--ease); }

@keyframes cart-hit {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.28) rotate(-12deg); background: var(--ink); color: var(--butter); }
    60%  { transform: scale(.92) rotate(7deg); }
    100% { transform: none; }
}

.cartbtn__text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.cartbtn__label { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.cartbtn__total { font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.cartdrop {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    z-index: 90;
    display: flex;
    flex-direction: column;
    width: 400px;
    max-height: min(580px, calc(100vh - 130px));
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.97);
    transform-origin: top right;
    transition: opacity .2s, transform .28s var(--ease), visibility .2s;
}
/* Bishti i flluskës, që tregon te butoni. */
.cartdrop::before {
    content: "";
    position: absolute;
    right: 34px; top: -8px;
    width: 15px; height: 15px;
    background: #fff;
    border-left: 1px solid var(--line-2);
    border-top: 1px solid var(--line-2);
    transform: rotate(45deg);
}
/* Ura e padukshme: miu kalon nga butoni te kutia pa e mbyllur. */
.cartdrop::after { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.cartbox.is-open .cartdrop { opacity: 1; visibility: visible; transform: none; }

.cartdrop__body { display: flex; flex-direction: column; min-height: 0; padding: 1.1rem; }
.cartdrop__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .85rem; }
.cartdrop__head strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.cartdrop__head span { font-size: .8rem; color: var(--ink-3); }
.cartdrop .mini-items { max-height: 310px; overflow: auto; padding-right: .2rem; overscroll-behavior: contain; }
.cartdrop__foot { margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--line); }
.cartdrop__sum { display: flex; align-items: baseline; justify-content: space-between; }
.cartdrop__sum span { font-size: .9rem; color: var(--ink-2); }
.cartdrop__sum strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.cartdrop__note { margin: .15rem 0 .85rem; font-size: .76rem; color: var(--ink-3); }
.cartdrop__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

.cartdrop__empty { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.1rem .5rem .6rem; text-align: center; }
.cartdrop__empty-icon {
    display: grid;
    place-items: center;
    width: 60px; height: 60px;
    margin-bottom: .45rem;
    border-radius: 50%;
    background: var(--butter-soft);
    color: var(--ink);
}
.cartdrop__empty p { margin: 0 0 .75rem; font-size: .86rem; color: var(--ink-3); }

.mini-item__opts { margin-top: .12rem; font-size: .74rem; font-weight: 600; color: var(--accent); }

@media (max-width: 1023px) {
    .cartbtn { height: 44px; margin-left: 0; padding: 0; border: 0; background: none; }
    .cartbtn:hover, .cartbox.is-open .cartbtn { box-shadow: none; }
    .cartbtn__text { display: none; }
    .cartbtn__icon { width: 40px; height: 40px; }
    .cartdrop { width: calc(100vw - 2 * var(--gutter)); max-height: calc(100vh - 110px); }
    .cartdrop::before { right: 13px; }
}

/* ---------- Fluturimi i produktit te shporta ---------- */

.fly { position: fixed; z-index: 600; pointer-events: none; }
.fly__inner {
    width: 100%; height: 100%;
    border: 3px solid #fff;
    border-radius: 18px;
    background: var(--paper-2) center / cover no-repeat;
    box-shadow: 0 14px 30px -10px rgba(27, 35, 70, .55);
}
.fly__inner--dot { display: grid; place-items: center; background: var(--butter); color: var(--ink); font-weight: 800; font-size: 1.3rem; }

.btn.is-loading, .p-card__add.is-loading { cursor: progress; }
.btn > svg:not([width]) { width: 18px; height: 18px; }
.btn.is-added, .p-card__add.is-added { background: var(--ok); color: #fff; box-shadow: none; }
.p-card__add.is-added .p-card__add-label { max-width: 70px; opacity: 1; margin-left: .3rem; display: inline; }

/* ---------- Navigimi ---------- */

.nav { border-top: 1px solid var(--line-2); }

.nav-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .15rem;
    margin: 0; padding: 0;
    list-style: none;
}

.nav-item { position: relative; }

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .9rem 1.15rem;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ink-2);
    transition: color .2s;
}
.nav-link::after {
    content: "";
    position: absolute;
    left: 1.15rem; right: 1.15rem; bottom: .55rem;
    height: 2px;
    border-radius: 2px;
    background: var(--butter-2);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease);
}
.nav-link:hover, .nav-link.is-active { color: var(--ink); }
.nav-link:hover::after, .nav-link.is-active::after, .nav-item:hover > .nav-link::after { transform: scaleX(1); }

.nav-link__caret { color: var(--ink-4); transition: transform .25s; }
.nav-item:hover .nav-link__caret { transform: rotate(180deg); color: var(--accent); }

.nav-link--highlight { color: var(--rose); }
.nav-link--highlight::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--rose);
    box-shadow: 0 0 0 3px rgba(177, 74, 95, .16);
}

.nav-drop {
    position: absolute;
    top: 100%;
    left: 50%;
    padding-top: 6px;
    transform: translate(-50%, 8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s, transform .22s var(--ease), visibility .22s;
    z-index: 60;
}
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.nav-drop__inner {
    min-width: 310px;
    padding: .55rem;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

.nav-drop__lead {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .75rem .8rem;
    border-radius: 12px;
    background: var(--blush-2);
    transition: background .2s;
}
.nav-drop__lead:hover { background: var(--blush); }
.nav-drop__lead > span:nth-child(2) { flex: 1; }
.nav-drop__lead-icon {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}
.nav-drop__lead-title { display: block; font-family: var(--serif); font-size: 1.08rem; font-weight: 600; line-height: 1.2; }
.nav-drop__lead-sub { display: block; font-size: .78rem; color: var(--ink-3); }

.nav-drop__links { display: grid; padding-top: .35rem; }

.nav-drop__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .58rem .8rem;
    border-radius: 10px;
    font-size: .92rem;
    color: var(--ink-2);
}
.nav-drop__link:hover { background: var(--paper); color: var(--accent); }
.nav-drop__count {
    padding: .05rem .5rem;
    border-radius: 999px;
    background: var(--paper-2);
    font-size: .72rem;
    color: var(--ink-3);
}

/* ---------- Tableti dhe telefoni ---------- */

@media (max-width: 1023px) {
    :root { --sticky-top: 90px; }

    .nav { display: none; }
    .burger, .search-toggle { display: inline-grid; }

    .header__inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "burger logo actions";
        gap: .5rem;
        padding-block: .5rem;
    }
    .logo { justify-self: start; }
    .logo__img { height: 44px; }
    .logo__since { display: none; }

    /* Kërkimi bëhet panel që zbret nga lart. */
    .hsearch {
        position: fixed;
        top: 0; left: 0; right: 0;
        max-width: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem;
        padding: .9rem var(--gutter);
        background: var(--paper);
        box-shadow: var(--shadow-lg);
        transform: translateY(-110%);
        transition: transform .35s var(--ease);
        z-index: 120;
    }
    .hsearch.is-open { transform: none; }
    .hsearch__form { flex: 1; }
    .hsearch__close { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; border-radius: 50%; }
    .suggest { position: static; width: 100%; max-height: 65vh; box-shadow: none; }
}

/* ==========================================================
   PANELET: menuja mobile, shporta, sfondi
   ========================================================== */

.backdrop {
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(27, 35, 70, .42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}
.backdrop.is-open { opacity: 1; visibility: visible; }

.mobile-nav, .drawer {
    position: fixed;
    top: 0; bottom: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    box-shadow: var(--shadow-lg);
    transition: transform .4s var(--ease);
}

.mobile-nav { left: 0; width: min(370px, 90vw); transform: translateX(-105%); }
.mobile-nav.is-open { transform: none; }

.mobile-nav__head, .drawer__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1.1rem;
    background: #fff;
    border-bottom: 1px solid var(--line-2);
}

.mobile-nav__body { flex: 1; overflow: auto; padding: .25rem 1.1rem 1rem; }

.mnav-label {
    padding: 1.1rem 0 .35rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.mnav-item { border-bottom: 1px solid var(--line-2); }
.mnav-row { display: flex; align-items: center; }
.mnav-link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 0;
    font-weight: 600;
}
.mnav-contact { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.mnav-contact .btn--ghost { width: 46px; padding: 0; }
.mnav-link--soft { padding: .62rem 0; font-weight: 500; font-size: .93rem; color: var(--ink-2); }
.mnav-icon {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #fff;
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}
.mnav-toggle {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border: 0; background: none;
    color: var(--ink-3);
    transition: transform .25s;
}
.mnav-toggle[aria-expanded="true"] { transform: rotate(180deg); color: var(--accent); }
.mnav-sub { display: none; padding: 0 0 .7rem 3rem; }
.mnav-sub.is-open { display: grid; }
.mnav-sub a { display: flex; justify-content: space-between; padding: .45rem 0; color: var(--ink-2); font-size: .93rem; }
.mnav-sub a:hover { color: var(--accent); }

.mobile-nav__foot, .drawer__foot {
    padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--line-2);
}

.drawer { right: 0; width: min(420px, 100vw); transform: translateX(105%); }
.drawer.is-open { transform: none; }
.drawer__eyebrow { font-size: .64rem; font-weight: 700; letter-spacing: .26em; color: var(--accent); }
.drawer__head h2 { margin: 0; font-size: 1.35rem; }
.drawer__body { flex: 1; overflow: auto; padding: 1.25rem; }

/* ==========================================================
   SEKSIONET
   ========================================================== */

.section { padding-block: clamp(1.9rem, 3.6vw, 3.4rem); }
.section--tight { padding-block: clamp(1rem, 2vw, 1.75rem); }

/* Brezat me ngjyrë kanë buzë dantelle lart e poshtë — harqe të vegjël. */
.section--soft, .section--blush, .section--tint {
    position: relative;
    --band: #fff;
    background: var(--band);
}
.section--blush, .section--tint { --band: var(--blush-2); }

.section--soft::before, .section--blush::before, .section--tint::before,
.section--soft::after, .section--blush::after, .section--tint::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 12px;
    pointer-events: none;
}
.section--soft::before, .section--blush::before, .section--tint::before {
    top: -11px;
    background: radial-gradient(circle at 12px 12px, var(--band) 11.5px, transparent 12px) 0 0 / 24px 12px repeat-x;
}
.section--soft::after, .section--blush::after, .section--tint::after {
    bottom: -11px;
    background: radial-gradient(circle at 12px 0, var(--band) 11.5px, transparent 12px) 0 0 / 24px 12px repeat-x;
    z-index: 1;
}

.section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-bottom: clamp(1rem, 2.2vw, 1.6rem);
}
.section__head > h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); }
.section__head--center { justify-content: center; text-align: center; }
.section__titles { display: flex; flex-direction: column; }
.section__head--center .section__titles { align-items: center; }

.section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .55rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
}
.section__eyebrow::before { content: ""; width: 24px; height: 1.5px; background: currentColor; }
.section__head--center .section__eyebrow::after { content: ""; width: 24px; height: 1.5px; background: currentColor; }

.section__title { margin: 0; font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
.section__title em { font-weight: 500; color: var(--accent); }
.section__sub { color: var(--ink-3); font-size: .95rem; }

.section__actions { display: flex; align-items: center; gap: 1.25rem; }

/* ==========================================================
   HERO
   ========================================================== */

.hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.25rem, 5vw, 4.5rem) clamp(2.5rem, 6vw, 4.5rem);
}

.hero__blob {
    position: absolute;
    right: -14%; top: -28%;
    width: 64vw; height: 64vw;
    max-width: 900px; max-height: 900px;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--blush) 0%, rgba(244, 223, 215, .55) 55%, transparent 74%);
    pointer-events: none;
}
.hero::after {
    /* Pika si qëndisje, poshtë majtas. */
    content: "";
    position: absolute;
    left: -40px; bottom: -40px;
    width: 280px; height: 280px;
    background: radial-gradient(var(--linen) 1.6px, transparent 1.8px) 0 0 / 18px 18px;
    -webkit-mask: radial-gradient(closest-side, #000 40%, transparent);
    mask: radial-gradient(closest-side, #000 40%, transparent);
    pointer-events: none;
}

.hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.hero__title {
    margin: 1rem 0 1.1rem;
    font-size: clamp(2.6rem, 5.6vw, 4.7rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 600;
}
.hero__title em {
    font-weight: 400;
    color: var(--accent);
    background: linear-gradient(transparent 64%, rgba(242, 236, 124, .85) 64%, rgba(242, 236, 124, .85) 90%, transparent 90%);
    padding: 0 .06em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.hero__lead { max-width: 33em; font-size: clamp(1.02rem, 1.4vw, 1.17rem); color: var(--ink-2); }

.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.7rem 0 2.2rem; }

.hero__facts {
    display: flex;
    flex-wrap: wrap;
    margin: 0; padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}
.hero__facts li { flex: 1 1 0; min-width: 120px; padding: 1.05rem 1.2rem 0 0; }
.hero__facts li + li { padding-left: 1.2rem; border-left: 1px solid var(--line); }
.hero__facts strong {
    display: block;
    font-family: var(--serif);
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.15;
}
.hero__facts span { font-size: .82rem; color: var(--ink-3); }

.hero__visual { position: relative; }

/* ---------- Kolazhi i fotove ---------- */

.collage { position: relative; height: clamp(440px, 48vw, 620px); }

.collage__item {
    position: absolute;
    display: block;
    background: var(--paper-2);
    box-shadow: var(--shadow-lg);
}
.collage__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.collage__item:hover img { transform: scale(1.05); }

.collage--3 .collage__item--1, .collage--2 .collage__item--1 { left: 16%; top: 0; width: 52%; height: 90%; z-index: 2; }
.collage--3 .collage__item--2, .collage--2 .collage__item--2 { right: 0; top: 14%; width: 33%; height: 54%; z-index: 1; }
.collage--3 .collage__item--3 { left: 0; bottom: 0; width: 30%; height: 44%; z-index: 3; border: 6px solid var(--paper); }
.collage--1 .collage__item--1 { left: 12%; right: 12%; top: 0; bottom: 0; }

.collage--empty {
    display: grid;
    place-items: center;
    height: clamp(380px, 44vw, 560px);
    max-width: 440px;
    margin-inline: auto;
    background: var(--butter-soft);
    box-shadow: var(--shadow);
}

.collage__label {
    position: absolute;
    left: .7rem; right: .7rem; bottom: .7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .55rem .8rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .93);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: .8rem;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s, transform .3s var(--ease);
}
.collage__label span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.collage__label strong { white-space: nowrap; }
.collage__item--1 .collage__label, .collage__item:hover .collage__label { opacity: 1; transform: none; }
/* Fotoja e tretë mbulon cepin majtas-poshtë të së parës — etiketa i largohet. */
.collage--3 .collage__item--1 .collage__label { left: 30%; }

/* ==========================================================
   HERO ME SLIDER (+ koleksionet anash)
   ========================================================== */

.hero-slider-section { padding-block: clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 2vw, 1.5rem); }

.hero-slider { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.hero-slider--cats { grid-template-columns: 290px minmax(0, 1fr); }

.hero__slider {
    position: relative;
    height: clamp(440px, 38vw, 540px);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--paper-2);
    box-shadow: var(--shadow);
    isolation: isolate;
}
.hero-slider--cats .hero__slider { height: clamp(420px, 34vw, 500px); }

.slider__track {
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }

.slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; overflow: hidden; }

/* ---------- Sllajdi i ndarë: teksti + fotoja në hark ---------- */

.slide--split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 4vw, 3.5rem);
    background: var(--tone, var(--blush-2));
}
.slide--tone-0 { --tone: linear-gradient(120deg, var(--blush-2), #FFF 85%); }
.slide--tone-1 { --tone: linear-gradient(120deg, var(--butter-soft), #FFF 85%); }
.slide--tone-2 { --tone: linear-gradient(120deg, var(--accent-tint), #FFF 85%); }
.slide--tone-3 { --tone: linear-gradient(120deg, var(--paper-2), #FFF 85%); }

/* Pika qëndisjeje në sfond, poshtë majtas. */
.slide__dots {
    position: absolute;
    left: -30px; bottom: -30px;
    width: 260px; height: 260px;
    background: radial-gradient(var(--linen) 1.6px, transparent 1.8px) 0 0 / 18px 18px;
    -webkit-mask: radial-gradient(closest-side, #000 35%, transparent);
    mask: radial-gradient(closest-side, #000 35%, transparent);
    pointer-events: none;
}

.slide__body { position: relative; z-index: 1; max-width: 520px; }
.slide__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
}
.slide__title {
    margin: .9rem 0 .7rem;
    font-size: clamp(2rem, 3.8vw, 3.3rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
}
.slide__title em { font-weight: 400; color: var(--accent); }
.slide__text { max-width: 30em; margin: 0 0 1.5rem; font-size: clamp(.98rem, 1.3vw, 1.1rem); color: var(--ink-2); }

.slide__media {
    position: relative;
    z-index: 1;
    display: block;
    justify-self: center;
    width: min(100%, 360px);
    height: 100%;
    max-height: 420px;
    background: #fff;
    border: 6px solid #fff;
    box-shadow: var(--shadow-lg);
    transform: rotate(2deg);
    transition: transform .6s var(--ease);
}
.slide__media picture, .slide__media img { display: block; width: 100%; height: 100%; }
.slide__media img { object-fit: cover; }
.slide.is-active .slide__media { transform: rotate(0); }

/* ---------- Sllajdi me foto të plotë ---------- */

.slide--image picture, .slide--image img { display: block; width: 100%; height: 100%; }
.slide--image img { object-fit: cover; }

/* ---------- Pikat dhe shigjetat ---------- */

.slider__dots {
    position: absolute;
    left: clamp(1.5rem, 4vw, 3.5rem); bottom: 1.3rem;
    z-index: 3;
    display: flex;
    gap: 6px;
}
.slider__dot {
    width: 9px; height: 9px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: rgba(27, 35, 70, .22);
    transition: width .3s, background .3s;
}
.slider__dot.is-active { width: 28px; background: var(--ink); }

.slider__arrow {
    position: absolute;
    bottom: 1rem;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    transition: background .2s, color .2s, border-color .2s;
}
.slider__arrow:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.slider__arrow--prev { right: 4.4rem; }
.slider__arrow--next { right: 1rem; }

/* ---------- Koleksionet anash ---------- */

.cat-list {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    padding: .55rem;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.cat-list__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .75rem .6rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
}

.cat-list__items { display: grid; gap: 2px; }

.cat-list__item { position: relative; }

.cat-list__link {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 16px;
    align-items: center;
    gap: .7rem;
    padding: .5rem .6rem;
    border-radius: 12px;
    transition: background .2s;
}
.cat-list__item:hover > .cat-list__link, .cat-list__link:focus-visible { background: var(--paper); }

.cat-list__icon {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--accent);
    transition: background .2s, color .2s;
}
.cat-list__item:hover .cat-list__icon { background: var(--accent); color: #fff; }

.cat-list__name { display: flex; flex-direction: column; font-weight: 600; font-size: .93rem; line-height: 1.25; }
.cat-list__name small { font-size: .74rem; font-weight: 400; color: var(--ink-3); }
.cat-list__arrow { color: var(--ink-4); }

.cat-list__sub {
    position: absolute;
    left: calc(100% + 10px);
    top: -.5rem;
    z-index: 10;
    display: grid;
    min-width: 250px;
    padding: .55rem;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity .2s, transform .2s var(--ease), visibility .2s;
}
.cat-list__sub::before { content: ""; position: absolute; left: -14px; top: 0; bottom: 0; width: 14px; }
.cat-list__item:hover .cat-list__sub, .cat-list__item:focus-within .cat-list__sub { opacity: 1; visibility: visible; transform: none; }

.cat-list__sub-title { padding: .45rem .7rem .55rem; font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
.cat-list__sub a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem .7rem;
    border-radius: 9px;
    font-size: .9rem;
    color: var(--ink-2);
}
.cat-list__sub a:hover { background: var(--paper); color: var(--accent); }
.cat-list__sub-count { padding: .02rem .45rem; border-radius: 999px; background: var(--paper-2); font-size: .72rem; color: var(--ink-3); }
.cat-list__sub a.cat-list__sub-all { justify-content: flex-start; gap: .35rem; margin-top: .25rem; font-weight: 600; color: var(--accent); }

.cat-list__call {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: auto;
    padding: .75rem;
    border-radius: 14px;
    background: var(--ink);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    transition: background .2s;
}
.cat-list__call:hover { background: var(--accent); }
.cat-list__call small { display: block; font-size: .7rem; font-weight: 500; color: rgba(255, 255, 255, .7); }
.cat-list__call-icon {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    flex: none;
    border-radius: 50%;
    background: #1FAF5B;
    color: #fff;
}

/* ---------- Rresht që rrëshqet anash, me shigjeta ----------
   Shigjetat rrinë jashtë rreshtit, në të dy anët — kartat mes tyre. Kur
   rreshti nxë krejt, shigjetat fshihen. */

.hscroll { display: flex; align-items: center; gap: .5rem; }
.hscroll > [data-hscroll-track] { flex: 1 1 auto; min-width: 0; }

.hscroll__btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink);
    transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.hscroll__btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
.hscroll__btn:disabled { opacity: .35; cursor: default; }
.hscroll.no-overflow .hscroll__btn { display: none; }

/* ---------- Koleksionet si rresht (telefon) ---------- */

.hero-cats { display: none; }

@media (max-width: 1023px) {
    .hero-slider--cats { grid-template-columns: minmax(0, 1fr); }
    .hero-slider--cats .cat-list { display: none; }

    .hero-cats-wrap { margin-top: .9rem; }
    .hero-cats {
        display: flex;
        gap: .5rem;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: .2rem;
    }
    .hero-cats::-webkit-scrollbar { display: none; }
    .hero-cats__item {
        display: inline-flex;
        align-items: center;
        flex: none;
        gap: .5rem;
        padding: .4rem .9rem .4rem .4rem;
        border-radius: 999px;
        background: #fff;
        border: 1px solid var(--line-2);
        font-size: .88rem;
        font-weight: 600;
        white-space: nowrap;
    }
    .hero-cats__icon {
        display: grid;
        place-items: center;
        width: 32px; height: 32px;
        border-radius: 50%;
        background: var(--accent-tint);
        color: var(--accent);
    }
}

@media (max-width: 767px) {
    .hero__slider, .hero-slider--cats .hero__slider { height: auto; }
    .slider__track { align-items: stretch; }
    .slide { height: auto; }

    .slide--split {
        grid-template-columns: 1fr;
        align-content: start;
        gap: 1.1rem;
        padding: 1.1rem 1.1rem 4.5rem;
    }
    .slide--split .slide__media {
        order: -1;
        width: 100%;
        height: 330px;
        max-height: none;
        transform: none;
    }
    .slide__title { margin-top: .6rem; }
    .slide__text { margin-bottom: 1.1rem; }
    .slide--image { aspect-ratio: 4 / 5; }

    .slider__dots { left: 1.1rem; bottom: 1.6rem; }
    .slider__arrow { bottom: 1.1rem; width: 40px; height: 40px; }
    .slider__arrow--prev { right: 3.9rem; }
}

/* ---------- Vula „since 1994" ---------- */

.seal {
    position: absolute;
    right: 3%; bottom: 7%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 122px; height: 122px;
    border-radius: 50%;
    background: var(--butter);
    box-shadow: var(--shadow);
}
.seal > svg { position: absolute; inset: 0; animation: spin 24s linear infinite; }
.seal text {
    font-family: var(--font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    fill: var(--ink);
}
.seal__core {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--butter);
}

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

@media (max-width: 1023px) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero__visual { max-width: 640px; width: 100%; margin-inline: auto; }
    .collage, .hero__slider { height: clamp(380px, 80vw, 540px); }
}

@media (max-width: 560px) {
    .hero__cta .btn { flex: 1 1 100%; }
    .hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hero__facts li { min-width: 0; padding-right: .6rem; }
    .hero__facts li + li { padding-left: .7rem; }
    .hero__facts strong { font-size: .95rem; white-space: nowrap; }
    .hero__facts span { display: block; font-size: .74rem; line-height: 1.35; }
    .collage__label { display: none; }
    .seal { width: 92px; height: 92px; right: 0; bottom: 2%; }
    .seal text { font-size: 10px; }
    .seal__core { width: 38px; height: 38px; }
}

/* ==========================================================
   BANERI I APLIKACIONIT (poshtë sliderit)
   ========================================================== */

.app-banner-section { padding-bottom: clamp(.75rem, 1.6vw, 1.2rem); }

.app-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 1.1rem 1.4rem;
    overflow: hidden;
    color: #fff;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(rgba(255, 255, 255, .07) 1.3px, transparent 1.5px) 0 0 / 16px 16px,
        linear-gradient(110deg, var(--ink), var(--accent));
    box-shadow: var(--shadow);
}

.app-banner__phone {
    display: grid;
    place-items: center;
    flex: none;
    width: 74px; height: 74px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.app-banner__phone img { width: 58px; height: 58px; border-radius: 14px; }

.app-banner__text { display: flex; flex: 1; flex-direction: column; gap: .15rem; min-width: 0; }
.app-banner__eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--butter); }
.app-banner__title { font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.2; }
.app-banner__sub { font-size: .88rem; color: rgba(255, 255, 255, .75); }

.app-banner__stores { display: flex; flex: none; flex-wrap: wrap; gap: .6rem; }

.store-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-width: 160px;
    padding: .5rem 1rem .5rem .8rem;
    border-radius: 12px;
    background: #0B0D17;
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
    transition: transform .2s, background .2s;
}
.store-badge:hover { transform: translateY(-2px); background: #000; }
.store-badge span { display: flex; flex-direction: column; font-size: 1.05rem; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.store-badge small { font-size: .66rem; font-weight: 500; opacity: .8; }

@media (max-width: 900px) {
    .app-banner { flex-wrap: wrap; }
    .app-banner__text { flex-basis: calc(100% - 100px); }
    .app-banner__stores { width: 100%; }
    .store-badge { flex: 1 1 0; justify-content: center; }
}
@media (max-width: 420px) {
    .app-banner__phone { width: 58px; height: 58px; border-radius: 16px; }
    .app-banner__phone img { width: 44px; height: 44px; border-radius: 11px; }
    .app-banner__text { flex-basis: calc(100% - 80px); }
    .store-badge { min-width: 0; padding: .5rem .7rem; }
    .store-badge span { font-size: .92rem; }
}

/* ==========================================================
   RRIPI I BESIMIT
   ========================================================== */

.trust-band { padding-bottom: clamp(.5rem, 1.5vw, 1rem); }

.trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.trust__item { display: flex; align-items: center; gap: .9rem; padding: 1.2rem 1.35rem; }
.trust__item + .trust__item { border-left: 1px dashed var(--line); }

.trust__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--accent);
}
.trust__item:nth-child(2) .trust__icon { background: var(--blush-2); color: var(--rose); }
.trust__item:nth-child(3) .trust__icon { background: var(--butter-soft); color: #7A700A; }
.trust__item:nth-child(4) .trust__icon { background: var(--paper-2); color: var(--ink); }

.trust__title { font-weight: 700; font-size: .95rem; line-height: 1.3; }

.flags { display: inline-flex; align-items: center; gap: .4rem; vertical-align: middle; }
/* Përmasë e njëjtë për çdo flamur — Maqedonia (1:2) dhe Kosova (5:7) nuk
   kanë të njëjtin format, prandaj priten njësoj me object-fit. */
.flag {
    display: block;
    width: 26px; height: 18px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(27, 35, 70, .14), 0 2px 5px -2px rgba(27, 35, 70, .3);
}
.trust__text .flags { margin-top: .35rem; }
.assure__flags { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.assure__flags .flag { width: 23px; height: 16px; }
.trust__text { font-size: .82rem; line-height: 1.4; color: var(--ink-3); }

@media (max-width: 1023px) {
    .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trust__item:nth-child(3) { border-left: 0; }
    .trust__item:nth-child(n+3) { border-top: 1px dashed var(--line); }
}
@media (max-width: 560px) {
    .trust { grid-template-columns: 1fr; }
    .trust__item + .trust__item { border-left: 0; border-top: 1px dashed var(--line); }
}

/* ==========================================================
   KOLEKSIONET — kategoritë si harqe
   ========================================================== */

.rooms {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(.9rem, 2vw, 1.6rem);
}

.room { display: flex; flex-direction: column; align-items: center; text-align: center; }

.room__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: var(--blush-2);
    box-shadow: var(--shadow-sm);
    transition: transform .45s var(--ease), box-shadow .45s;
}
.room__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.room:hover .room__media { transform: translateY(-5px); box-shadow: var(--shadow); }
.room:hover .room__media img { transform: scale(1.07); }

.room__ph {
    display: grid;
    place-items: center;
    width: 100%; height: 100%;
    color: var(--accent);
    background: radial-gradient(var(--linen) 1.4px, transparent 1.6px) 0 0 / 16px 16px, var(--blush-2);
}

.room__name { margin-top: .85rem; font-family: var(--serif); font-size: 1.12rem; font-weight: 600; line-height: 1.25; }
.room__count {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .15rem;
    font-size: .8rem;
    color: var(--ink-3);
    transition: color .2s, gap .2s;
}
.room:hover .room__count { color: var(--accent); gap: .5rem; }

@media (max-width: 1023px) { .rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================
   KARTA E PRODUKTIT
   ========================================================== */

.p-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.4rem, 2.4vw, 2rem) clamp(.9rem, 1.6vw, 1.35rem);
}
.p-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1199px) { .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .p-grid, .p-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.p-card { position: relative; display: flex; flex-direction: column; min-width: 0; }

.p-card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius);
    background: var(--paper-2);
}
.p-card__link { display: block; height: 100%; }
.p-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.p-card:hover .p-card__media img { transform: scale(1.05); }

/* Pa foto: monogrami i logos mbi pëlhurë me pika. */
.p-card__ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    width: 100%; height: 100%;
    background: radial-gradient(var(--linen) 1.5px, transparent 1.7px) 0 0 / 18px 18px, var(--paper-2);
}
.p-card__ph-mark {
    display: grid;
    place-items: center;
    width: 76px; height: 50px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: var(--butter-soft);
    color: var(--accent);
    font: italic 700 1.7rem/1 "Times New Roman", Times, serif;
}
.p-card__ph-text { font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }

.p-card__tags {
    position: absolute;
    top: .7rem; left: .7rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    pointer-events: none;
}

.p-card__add {
    position: absolute;
    right: .7rem; bottom: .7rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-width: 44px;
    padding: 0 .7rem;
    border: 0;
    border-radius: 999px;
    background: var(--butter);
    color: var(--ink);
    font-size: .86rem;
    font-weight: 700;
    box-shadow: 0 10px 20px -10px rgba(27, 35, 70, .55);
    transition: background .2s, color .2s, transform .2s;
}
.p-card__add svg { width: 18px; height: 18px; }
.p-card__add-label {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    transition: max-width .3s var(--ease), opacity .2s, margin .3s;
}
.p-card:hover .p-card__add-label, .p-card__add:focus-visible .p-card__add-label {
    max-width: 60px;
    opacity: 1;
    margin-left: .3rem;
}
.p-card__add:hover { background: var(--ink); color: var(--butter); }
.p-card__add:disabled { opacity: 1; }

.p-card__body { display: flex; flex-direction: column; gap: .2rem; flex: 1; padding: .85rem .1rem 0; }

.p-card__kicker {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.p-card__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--serif);
    font-size: 1.04rem;
    font-weight: 500;
    line-height: 1.3;
    transition: color .2s;
}
.p-card__name:hover { color: var(--accent); }

.p-card__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    margin-top: auto;
    padding-top: .3rem;
}
.p-card__price { display: flex; align-items: baseline; gap: .45rem; }
.p-card__now { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.p-card__was { font-size: .84rem; color: var(--ink-3); text-decoration: line-through; }

.p-card__stock { font-size: .72rem; font-weight: 700; }
.p-card__stock--low { color: var(--warn); }
.p-card__stock--out { color: var(--danger); }
.p-card__stock--store { color: var(--accent); }

@media (hover: none), (max-width: 767px) {
    .p-card__add-label, .p-card:hover .p-card__add-label, .p-card__add.is-added .p-card__add-label { display: none; }
}

@media (max-width: 560px) {
    .p-card__add { width: 40px; height: 40px; min-width: 40px; padding: 0; right: .5rem; bottom: .5rem; }
    .p-card__tags { top: .5rem; left: .5rem; }
    .p-card__name { font-size: .96rem; }
}

/* ==========================================================
   KARUSELI (rail)
   ========================================================== */

.rail { position: relative; }

.rail__track {
    --gap: clamp(.9rem, 1.6vw, 1.35rem);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * var(--gap)) / 4);
    column-gap: var(--gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 4px 2px 1rem;
    margin: -4px -2px 0;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { scroll-snap-align: start; }

@media (max-width: 1199px) { .rail__track { grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); } }
@media (max-width: 767px)  { .rail__track { grid-auto-columns: 46%; } }

.rail__nav { display: flex; gap: .5rem; }

.rail__btn {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink);
    transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.rail__btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
.rail__btn:disabled { opacity: .35; cursor: default; }

/* Në telefon shigjetat mbeten — jo të gjithë e dinë që karuseli rrëshqet me
   gisht. Lidhja „Shiko të gjitha" majtas, shigjetat djathtas. */
@media (max-width: 767px) {
    .section__head .section__actions { width: 100%; justify-content: space-between; }
    .rail__btn { width: 40px; height: 40px; }
}

/* ==========================================================
   KATEGORIA NË FOKUS
   ========================================================== */

.spotlight {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 2fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: center;
}

.spotlight__media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    background: #fff;
    box-shadow: var(--shadow);
    border: 6px solid #fff;
}
.spotlight__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.spotlight__media:hover img { transform: scale(1.05); }

.spotlight__body .section__title { margin: .7rem 0 .8rem; }
.spotlight__body p { margin-bottom: 0; }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.2rem 0 1.5rem; }
.chip {
    padding: .42rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: .83rem;
    font-weight: 500;
    transition: border-color .2s, color .2s;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }

.spotlight__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(.9rem, 1.6vw, 1.35rem);
}
.spotlight__grid > :nth-child(n+3) { display: none; }

@media (max-width: 1199px) {
    .spotlight { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
    .spotlight__grid { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .spotlight__grid > :nth-child(n+3) { display: flex; }
}
@media (max-width: 767px) {
    .spotlight { grid-template-columns: 1fr; }
    .spotlight__media { max-width: 320px; width: 100%; margin-inline: auto; }
    .spotlight__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spotlight__grid > :nth-child(n+3) { display: none; }
}

/* ==========================================================
   BANERI PROMO
   ========================================================== */

.promo {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(220px, 28vw, 340px);
    padding: clamp(1.5rem, 4vw, 3.5rem);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--blush);
}
.promo + .promo { margin-top: 1rem; }
.promo__bg { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; }
.promo__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(27, 35, 70, .78), rgba(27, 35, 70, .25) 60%, transparent); }
.promo__body { position: relative; max-width: 540px; }
.promo__eyebrow { margin-bottom: .6rem; font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.promo__title { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.6rem); }
.promo__cta { margin-top: 1.3rem; }
.promo--dark .promo__title { color: #fff; }
.promo--dark .promo__eyebrow { color: var(--butter); }

/* ==========================================================
   HISTORIA & DYQANI
   ========================================================== */

.story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.story__years { display: flex; align-items: flex-end; gap: .9rem; margin-bottom: 1.1rem; }
.story__num {
    font-family: var(--serif);
    font-size: clamp(5.2rem, 11vw, 8.8rem);
    font-weight: 600;
    line-height: .82;
    letter-spacing: -0.05em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.story__unit {
    padding-bottom: .5rem;
    font-family: var(--serif);
    font-size: 1.3rem;
    font-style: italic;
    line-height: 1.15;
    color: var(--ink-2);
}

.story__lead { max-width: 34em; margin: 1rem 0 1.5rem; font-size: 1.08rem; color: var(--ink-2); }

.story__facts { display: grid; gap: .75rem; margin: 0 0 1.7rem; padding: 0; list-style: none; }
.story__facts li { display: flex; align-items: flex-start; gap: .8rem; color: var(--ink-2); }
.story__facts svg { flex: none; margin-top: .2rem; color: var(--accent); }
.story__facts strong, .story__facts a { color: var(--ink); font-weight: 600; }
.story__facts a:hover { color: var(--accent); }

.story__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.story__visual { position: relative; max-width: 520px; width: 100%; justify-self: center; }

.story__map {
    aspect-ratio: 4 / 5;
    background: var(--paper-2);
    border: 8px solid #fff;
    box-shadow: var(--shadow-lg);
}
.story__map iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.85) contrast(1.02); }
.story__map--logo { display: grid; place-items: center; background: var(--butter-soft); }
.story__map--logo img { width: 70%; }

.story__stamp {
    position: absolute;
    left: -1.25rem; bottom: 2.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: .8rem 1.1rem .7rem;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transform: rotate(-4deg);
}
.story__stamp img { height: 44px; width: auto; }
.story__stamp span { font-size: .62rem; font-weight: 600; font-style: italic; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }

@media (max-width: 1023px) {
    .story { grid-template-columns: 1fr; }
    .story__stamp { left: .5rem; }
}

/* ==========================================================
   ÇKA PO KËRKOHET — renditja me numra të mëdhenj
   ========================================================== */

.trending__note {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: var(--blush-2);
    color: var(--rose);
    font-size: .78rem;
    font-weight: 700;
}

.top-track {
    --gap: clamp(1rem, 2vw, 1.75rem);
    grid-auto-columns: calc((100% - 2 * var(--gap)) / 3);
    padding-top: .6rem;
}
@media (max-width: 1023px) { .top-track { grid-auto-columns: calc((100% - var(--gap)) / 2); } }
@media (max-width: 600px)  { .top-track { grid-auto-columns: 86%; } }

/* Çdo artikull: hapësirë fikse majtas për numrin (38%), karta djathtas.
   Numri vizatohet sa lartësia e fotos dhe shkallëzohet me gjerësinë e
   artikullit (cqw), që të mbetet i madh e i lexueshëm në çdo ekran. */
.top-item {
    position: relative;
    container-type: inline-size;
    min-width: 0;
    padding-left: 38%;
}

.top-item__num {
    position: absolute;
    top: 0; left: 0;
    z-index: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: 46%;
    padding-right: 4%;
    /* lartësia = lartësia e fotos: (100% − 38%) × 5/4 e gjerësisë */
    aspect-ratio: 46 / 77.5;
    font-family: var(--serif);
    font-size: 98cqw;
    font-weight: 700;
    line-height: .74;
    letter-spacing: -0.06em;
    color: transparent;
    -webkit-text-stroke: 2px var(--accent-soft);
    user-select: none;
    transition: -webkit-text-stroke-color .3s, transform .4s var(--ease);
}
.top-item:hover .top-item__num { -webkit-text-stroke-color: var(--accent); transform: translateX(-4px); }

.top-item--first .top-item__num {
    color: var(--butter);
    -webkit-text-stroke: 2px var(--ink);
    text-shadow: 5px 5px 0 rgba(27, 35, 70, .08);
}

.top-item__card { position: relative; z-index: 1; min-width: 0; }
.top-item__card .p-card__media { box-shadow: var(--shadow); }

.top-item__medal {
    position: absolute;
    top: -.55rem; right: .6rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .28rem .6rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--butter);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .04em;
    box-shadow: 0 6px 14px -6px rgba(27, 35, 70, .55);
}
.top-item--first .top-item__medal { background: var(--butter); color: var(--ink); }

@media (max-width: 767px) {
    .top-item__num { -webkit-text-stroke-width: 1.5px; }
    .trending__note { display: none; }
}

/* ==========================================================
   CTA
   ========================================================== */

.cta-block {
    position: relative;
    overflow: hidden;
    padding: clamp(2.8rem, 6vw, 4.8rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
    color: #fff;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(rgba(255, 255, 255, .07) 1.3px, transparent 1.5px) 0 0 / 18px 18px,
        radial-gradient(120% 90% at 85% 0%, rgba(47, 69, 150, .9), transparent 60%),
        var(--ink);
}
/* Kafshimet e dantellës lart e poshtë. */
.cta-block::before, .cta-block::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 12px;
}
.cta-block::before { top: 0; background: radial-gradient(circle at 12px 0, var(--paper) 11.5px, transparent 12px) 0 0 / 24px 12px repeat-x; }
.cta-block::after { bottom: 0; background: radial-gradient(circle at 12px 12px, var(--paper) 11.5px, transparent 12px) 0 0 / 24px 12px repeat-x; }

.cta-block h2 { max-width: 18em; margin: .9rem auto .8rem; font-size: clamp(1.9rem, 3.8vw, 2.9rem); color: #fff; }
.cta-block h2 em { font-weight: 400; color: var(--butter); }
.cta-block p { max-width: 36em; margin: 0 auto 1.9rem; color: rgba(255, 255, 255, .78); font-size: 1.04rem; }
.cta-block__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/* ==========================================================
   FOOTER
   ========================================================== */

.footer {
    position: relative;
    margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
    padding-top: clamp(2.4rem, 4.5vw, 3.6rem);
    background: var(--ink);
    color: rgba(255, 255, 255, .72);
    font-size: .93rem;
}
.footer__lace {
    position: absolute;
    left: 0; right: 0; top: -11px;
    height: 12px;
    background: radial-gradient(circle at 12px 12px, var(--ink) 11.5px, transparent 12px) 0 0 / 24px 12px repeat-x;
}

.footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.3fr);
    gap: clamp(1.75rem, 4vw, 3rem);
    padding-bottom: 2.6rem;
}

.footer__brand { display: inline-block; }
.footer__about { max-width: 30em; margin: 1.1rem 0 1.3rem; line-height: 1.65; }

.social { display: flex; flex-wrap: wrap; gap: .5rem; }
.social a {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    transition: background .2s, color .2s, transform .2s;
}
.social a:hover { background: var(--butter); color: var(--ink); transform: translateY(-2px); }

.app-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.app-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
}
.app-badge:hover { background: rgba(255, 255, 255, .16); }

.footer__title { margin-bottom: 1rem; font-family: var(--serif); font-size: 1.18rem; font-weight: 600; color: #fff; }

.footer__list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.footer__list a { transition: color .2s; }
.footer__list a:hover { color: var(--butter); }

.footer__contact { display: grid; gap: .9rem; }
.footer__contact-row { display: flex; align-items: flex-start; gap: .7rem; line-height: 1.5; }
.footer__contact-row svg { flex: none; margin-top: .2rem; color: var(--accent); }
.footer__contact-row strong { color: var(--ink); }
.footer__contact a:hover { color: var(--accent); }

.footer .footer__contact-row svg { color: var(--butter); }
.footer .footer__contact-row strong { color: #fff; }
.footer .footer__contact a:hover { color: var(--butter); }

.footer__map { display: inline-flex; align-items: center; gap: .25rem; font-size: .85rem; font-weight: 600; color: var(--butter); }

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.4rem;
    padding-block: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .8rem;
    color: rgba(255, 255, 255, .5);
}

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding-block: 1.2rem 1.7rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .82rem;
    color: rgba(255, 255, 255, .55);
}
.footer__bottom a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1023px) {
    .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer__brandcol { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .footer__top { grid-template-columns: 1fr; }
}

/* ==========================================================
   BREADCRUMB, KOKAT E FAQEVE, BOSH
   ========================================================== */

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    padding-block: 1.1rem .5rem;
    font-size: .82rem;
    color: var(--ink-3);
}
.crumbs a:hover { color: var(--accent); }
.crumbs__sep { color: var(--ink-4); }
.crumbs__current { color: var(--ink); font-weight: 500; }

.page-head { padding: .9rem 0 1.5rem; }
.page-head h1 { margin: 0 0 .3rem; font-size: clamp(2rem, 3.8vw, 2.9rem); }
.page-head p { margin: 0; color: var(--ink-3); }

.empty { max-width: 540px; margin: 0 auto; padding: 3rem 1rem; text-align: center; }
.empty__icon {
    display: grid;
    place-items: center;
    width: 86px; height: 86px;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    background: var(--blush-2);
    color: var(--rose);
}
.empty h2 { font-size: 1.55rem; }
.empty p { color: var(--ink-3); }

/* ==========================================================
   KATALOGU
   ========================================================== */

.catalog {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
    padding: .75rem 0 3rem;
}
.catalog .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.catalog__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .2rem 1rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem 1.3rem;
    background: linear-gradient(115deg, var(--blush-2), #fff 75%);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
}
.catalog__icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: #fff;
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}
.catalog__title { display: flex; flex-direction: column; }
.catalog__title { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 .8rem; }
.catalog__title .eyebrow { flex-basis: 100%; }
.catalog__title h1 { margin: .1rem 0 0; font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.catalog__count { font-size: .85rem; color: var(--ink-3); }
.catalog__desc { grid-column: 2; max-width: 60em; color: var(--ink-2); font-size: .9rem; line-height: 1.5; }

.subcat-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem .8rem; margin: .2rem 0 .8rem; }
.subcat-head h2 { margin: 0; font-size: 1.18rem; }
.subcat-head span { font-size: .85rem; color: var(--ink-3); }

.subcat-head { display: none; }

.subcat-cards {
    display: flex;
    gap: .55rem;
    margin: 0;
    padding: .15rem 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.subcat-cards::-webkit-scrollbar { display: none; }
.catalog .hscroll { margin-bottom: 1rem; }
.subcat-card {
    display: grid;
    flex: none;
    grid-template-columns: auto auto;
    column-gap: .6rem;
    align-items: center;
    padding: .45rem 1rem .45rem .45rem;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    white-space: nowrap;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.subcat-card:hover { border-color: var(--accent-soft); background: var(--accent-tint); }
.subcat-card:hover .subcat-card__icon { background: var(--accent); color: #fff; }
.subcat-card__icon { transition: background .2s, color .2s; }
.subcat-card.is-empty { opacity: .6; }
.subcat-card__icon, .subcat-card__img {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--accent-tint);
    color: var(--accent);
}
.subcat-card__name { font-weight: 600; font-size: .88rem; line-height: 1.2; }
.subcat-card__count { font-size: .72rem; color: var(--ink-3); }

.subcats { display: flex; flex-wrap: wrap; gap: .5rem; }
.subcat {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .5rem .4rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: .86rem;
    font-weight: 600;
}
.subcat:hover { border-color: var(--accent); color: var(--accent); }
.subcat__count { padding: .05rem .5rem; border-radius: 999px; background: var(--paper-2); font-size: .74rem; color: var(--ink-3); }

.ctoolbar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem; }
.ctoolbar form { margin: 0; }
.ctoolbar__spacer { flex: 1; }
.filter-toggle { display: none; }

.active-filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.1rem; }
.afilter {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .55rem .38rem .85rem;
    border-radius: 999px;
    background: var(--accent-tint);
    color: var(--accent);
    font-size: .82rem;
    font-weight: 600;
}
.afilter:hover { background: var(--accent-soft); }
.afilter--clear { background: transparent; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Filtrat ---------- */

/* Në desktop kolona rri e plotë, pa scroll të vetin: grupet e tjera janë
   të mbledhura dhe hapen me një klikim, pra lista mbetet e shkurtër. */
.filters {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
}
.filters__head { display: none; }
.filters__scroll { flex: 1; padding: .4rem 1.15rem; }

.fgroup { padding: .55rem 0; border-bottom: 1px solid var(--line-2); }
.fgroup:last-child { border-bottom: 0; }

.fgroup__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .5rem 0;
    border: 0;
    background: none;
    font-weight: 700;
    font-size: .88rem;
    text-align: left;
}
.fgroup__title { display: inline-flex; align-items: center; gap: .45rem; }
.fgroup__head svg { color: var(--ink-3); transition: transform .2s; }
.fgroup__head[aria-expanded="false"] svg { transform: rotate(-90deg); }
.fgroup__head[aria-expanded="false"] ~ .fgroup__body,
.fgroup__head[aria-expanded="false"] ~ .fgroup__more { display: none; }

.fgroup__body { display: grid; gap: .1rem; padding-bottom: .25rem; }

.fopt {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .38rem .3rem;
    border-radius: 8px;
    font-size: .9rem;
    color: var(--ink-2);
    cursor: pointer;
}
.fopt:hover { background: var(--paper); }
.fopt input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.fopt__label { flex: 1; }
.fopt__count { padding: .05rem .45rem; border-radius: 999px; background: var(--paper-2); font-size: .74rem; color: var(--ink-3); }

.fgroup__more { padding: .3rem 0; border: 0; background: none; color: var(--accent); font-weight: 600; font-size: .82rem; }

.price-range { display: flex; align-items: center; gap: .5rem; }
.price-range input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 .65rem;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    outline: 0;
}
.price-range input:focus { border-color: var(--accent); background: #fff; }
.price-range__sep { color: var(--ink-3); }
.price-hint { margin-top: .4rem; font-size: .75rem; color: var(--ink-3); }

.filters__actions {
    display: flex;
    justify-content: space-between;
    gap: .6rem;
    padding: .9rem 1.15rem;
    border-top: 1px solid var(--line-2);
}

@media (max-width: 1199px) { .catalog .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 1023px) {
    /* minmax(0, …): rreshti i nënkategorive që rrëshqet nuk guxon ta zgjerojë kolonën. */
    .catalog { grid-template-columns: minmax(0, 1fr); }
    .catalog .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .filter-toggle { display: inline-flex; }

    .filters {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        z-index: 100;
        width: min(370px, 90vw);
        max-height: none;
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
        transform: translateX(-105%);
        transition: transform .4s var(--ease);
    }
    .filters.is-open { transform: none; }
    .filters__scroll { overflow: auto; }
    .filters__head { display: flex; align-items: center; padding: .9rem 1.15rem; border-bottom: 1px solid var(--line-2); }
}
@media (max-width: 767px) {
    .catalog .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalog__head { padding: .9rem 1rem; grid-template-columns: 1fr; }
    .catalog__icon { display: none; }
    .catalog__desc { display: none; }
}

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: 2.6rem; }
.pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px; height: 42px;
    padding: 0 .6rem;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: #fff;
    font-weight: 600;
    font-size: .9rem;
}
.pagination a:hover { border-color: var(--ink); }
.pagination .is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.pagination .is-disabled { opacity: .35; }
.pagination .is-gap { border: 0; background: none; }

/* ==========================================================
   FANCY SELECT
   ========================================================== */

.fsel { position: relative; display: inline-block; }
.fsel--block { display: block; }

.fsel__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.fsel__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    min-height: 44px;
    padding: 0 .95rem 0 1.05rem;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    font-weight: 600;
    font-size: .9rem;
    text-align: left;
    transition: border-color .2s, box-shadow .2s;
}
.fsel--block .fsel__btn { min-height: 48px; border-radius: 12px; font-weight: 500; font-size: .95rem; }
.fsel__btn::after {
    content: "";
    flex: none;
    width: 8px; height: 8px;
    border-right: 2px solid var(--ink-3);
    border-bottom: 2px solid var(--ink-3);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s;
}
.fsel.is-open .fsel__btn::after { transform: rotate(-135deg) translate(-2px, -2px); }
.fsel.is-open .fsel__btn, .fsel__btn:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); outline: 0; }
.fsel__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.fsel__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 70;
    min-width: 100%;
    max-height: 300px;
    overflow: auto;
    padding: .35rem;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .18s, transform .18s, visibility .18s;
}
.fsel__panel--right { left: auto; right: 0; }
.fsel.is-open .fsel__panel { opacity: 1; visibility: visible; transform: none; }

.fsel__opt {
    display: block;
    width: 100%;
    padding: .55rem .8rem;
    border: 0;
    border-radius: 9px;
    background: none;
    font-size: .9rem;
    text-align: left;
    white-space: nowrap;
}
.fsel__opt:hover, .fsel__opt.is-cursor { background: var(--paper); }
.fsel__opt[aria-selected="true"] { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.fsel__opt:disabled { opacity: .4; }
.fsel__group { padding: .6rem .8rem .25rem; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* ==========================================================
   FAQJA E PRODUKTIT
   ========================================================== */

.product {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: start;
    padding: .75rem 0 1rem;
}

.gallery { position: sticky; top: var(--sticky-top); }

.gallery__main {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--paper-2);
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__main .p-card__tags { top: 1rem; left: 1rem; }
.gallery__main .p-card__ph-mark { width: 110px; height: 72px; font-size: 2.4rem; }

.gallery__zoom {
    position: absolute;
    right: 1rem; bottom: 1rem;
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--shadow-sm);
}
.gallery__zoom:hover { background: var(--butter); }

.gallery__thumbs { display: flex; gap: .6rem; margin-top: .8rem; overflow-x: auto; scrollbar-width: none; }
.gallery__thumb {
    flex: 0 0 78px;
    height: 98px;
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
    border: 2px solid transparent;
    background: var(--paper-2);
    opacity: .7;
    transition: opacity .2s, border-color .2s;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active, .gallery__thumb:hover { opacity: 1; border-color: var(--accent); }

.pinfo { padding-top: .4rem; }
.pinfo__top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-bottom: 1rem; }
.pinfo__cat {
    display: inline-flex;
    padding: .34rem .85rem;
    border-radius: 999px;
    background: var(--accent-tint);
    color: var(--accent);
    font-size: .78rem;
    font-weight: 700;
}
.pinfo__cat:hover { background: var(--accent-soft); }
.pinfo__brand { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }

.pinfo__title { margin: 0 0 .5rem; font-size: clamp(1.85rem, 3.4vw, 2.7rem); line-height: 1.1; }

.pprice { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .9rem; margin: 1.1rem 0 .65rem; }
.pprice__now { font-family: var(--serif); font-size: 2.3rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.pprice__was { font-size: 1.1rem; color: var(--ink-3); text-decoration: line-through; }
.pprice__save { padding: .25rem .65rem; border-radius: 999px; background: var(--blush-2); color: var(--rose); font-size: .8rem; font-weight: 700; }

.pstock { display: inline-flex; align-items: center; gap: .55rem; font-size: .88rem; font-weight: 600; }
.pstock .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(46, 125, 91, .15); }
.pstock--in { color: var(--ok); }
.pstock--low { color: var(--warn); }
.pstock--low .dot { box-shadow: 0 0 0 4px rgba(163, 103, 15, .15); }
.pstock--out { color: var(--danger); }
.pstock--out .dot { box-shadow: 0 0 0 4px rgba(191, 58, 43, .14); }
.pstock--store { color: var(--accent); }
.pstock--store .dot { box-shadow: 0 0 0 4px var(--accent-tint); }

.pquick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 1.35rem 0 0; }
.pquick div { padding: .65rem .9rem; background: #fff; border: 1px solid var(--line-2); border-radius: 12px; }
.pquick dt { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.pquick dd { margin: .12rem 0 0; font-size: .93rem; font-weight: 600; }

.buybox {
    margin-top: 1.35rem;
    padding: 1.2rem;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.buybox__row { display: flex; align-items: stretch; gap: .75rem; }
.buybox__wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin-top: .95rem;
    font-size: .86rem;
    font-weight: 600;
    color: #1C8A52;
}
.buybox__wa:hover { text-decoration: underline; text-underline-offset: 3px; }

.qty {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 54px;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 999px;
}
.qty button {
    display: grid;
    place-items: center;
    width: 44px; height: 100%;
    border: 0;
    background: none;
    color: var(--ink);
}
.qty button:disabled { opacity: .3; }
.qty input {
    width: 40px;
    border: 0; outline: 0;
    background: none;
    text-align: center;
    font-weight: 700;
    -moz-appearance: textfield;
    appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Galeria: shigjetat dhe numëruesi ---------- */

.gallery__main img[data-gallery-main] { transition: opacity .25s; }
.gallery__main img.is-swapping { opacity: .35; }

.gallery__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    margin-top: -22px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transition: opacity .2s, background .2s;
}
.gallery__nav--prev { left: 1rem; }
.gallery__nav--next { right: 1rem; }
.gallery__main:hover .gallery__nav, .gallery__nav:focus-visible { opacity: 1; }
.gallery__nav:hover { background: var(--butter); }

.gallery__count {
    position: absolute;
    left: 1rem; bottom: 1rem;
    z-index: 2;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(27, 35, 70, .78);
    color: #fff;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
}

@media (hover: none) { .gallery__nav { opacity: 1; width: 38px; height: 38px; margin-top: -19px; } }

/* ---------- Përmasat e setit (S / M / L) ---------- */

.dims {
    margin-top: 1rem;
    padding: .9rem 1rem 1rem;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 14px;
}
.dims__title {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .75rem;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.dims__grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: .55rem; }
.dims__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
    padding: .8rem .5rem .75rem;
    border-radius: 12px;
    background: var(--paper);
    text-align: center;
}
.dims__icon { display: grid; place-items: end center; height: 40px; color: var(--accent); }
.dims__icon svg { transform: scale(var(--s, 1)); transform-origin: bottom center; }
.dims__label {
    display: grid;
    place-items: center;
    min-width: 32px; height: 32px;
    padding: 0 .5rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--butter);
    font-weight: 800;
    font-size: .9rem;
}
.dims__value { font-size: .84rem; font-weight: 600; line-height: 1.35; font-variant-numeric: tabular-nums; }

.dimline { display: block; padding: .1rem 0; }
.dimline b {
    display: inline-grid;
    place-items: center;
    min-width: 24px; height: 22px;
    margin-right: .45rem;
    padding: 0 .35rem;
    border-radius: 6px;
    background: var(--paper-2);
    font-size: .75rem;
    color: var(--ink);
}

@media (max-width: 420px) {
    .dims__grid { grid-template-columns: 1fr; }
    .dims__item { flex-direction: row; justify-content: flex-start; gap: .7rem; padding: .6rem .75rem; text-align: left; }
    .dims__icon { height: auto; }
}

/* ---------- Zgjedhja e ngjyrës dhe madhësisë ---------- */

.poptions { display: grid; gap: 1rem; margin-bottom: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px dashed var(--line); }

.pchoice { margin: 0; padding: 0; border: 0; min-width: 0; }
.pchoice__legend { margin-bottom: .55rem; padding: 0; font-size: .86rem; font-weight: 700; }
.pchoice__legend span { font-weight: 500; color: var(--ink-3); }
.pchoice__opts { display: flex; flex-wrap: wrap; gap: .5rem; }

.pchoice__opt { position: relative; cursor: pointer; }
.pchoice__opt input { position: absolute; opacity: 0; pointer-events: none; }

.pchoice__swatch {
    display: block;
    width: 38px; height: 38px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(27, 35, 70, .18), 0 0 0 3px #fff, 0 0 0 4px var(--line);
    transition: box-shadow .2s, transform .2s;
}
.pchoice__opt:hover .pchoice__swatch { transform: scale(1.06); }
.pchoice__opt input:checked + .pchoice__swatch { box-shadow: inset 0 0 0 1px rgba(27, 35, 70, .18), 0 0 0 3px #fff, 0 0 0 5px var(--accent); }
.pchoice__opt input:focus-visible + .pchoice__swatch { outline: 2px solid var(--accent); outline-offset: 6px; }

.pchoice__pill {
    display: grid;
    place-items: center;
    min-width: 48px; height: 42px;
    padding: 0 .9rem;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: #fff;
    font-weight: 700;
    font-size: .9rem;
    transition: border-color .2s, background .2s, color .2s;
}
.pchoice__opt:hover .pchoice__pill { border-color: var(--ink-4); }
.pchoice__opt input:checked + .pchoice__pill { border-color: var(--ink); background: var(--ink); color: #fff; }
.pchoice__opt input:focus-visible + .pchoice__pill { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Kur klienti shtyp „Shto" pa zgjedhur: grupi dridhet dhe skuqet. */
.pchoice.is-missing .pchoice__legend { color: var(--danger); }
.pchoice.is-missing .pchoice__legend span { color: var(--danger); }
.pchoice.is-missing .pchoice__opts { animation: shake .45s var(--ease); }
.pchoice.is-missing .pchoice__pill { border-color: var(--danger); }

@keyframes shake {
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

/* ---------- Karta: fotoja e dytë në hover ---------- */

.p-card__img2 {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .45s var(--ease), transform .8s var(--ease) !important;
}
.p-card:hover .p-card__img2 { opacity: 1; }

.store-only { display: flex; align-items: flex-start; gap: .9rem; }
.store-only__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--butter);
}
.store-only__title { font-family: var(--serif); font-size: 1.18rem; font-weight: 600; line-height: 1.25; }
.store-only__text { margin: .3rem 0 0; font-size: .9rem; color: var(--ink-2); }

.assure { display: grid; gap: .75rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.assure li { display: flex; align-items: flex-start; gap: .7rem; font-size: .88rem; line-height: 1.45; color: var(--ink-2); }
.assure svg { flex: none; margin-top: .1rem; color: var(--accent); }
.assure strong { color: var(--ink); }

.pdetails {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--line);
}
.pdetails > :only-child { grid-column: 1 / -1; max-width: 820px; }
.pdetails h2 { font-size: 1.55rem; }
.pdesc__body { font-size: 1rem; line-height: 1.8; color: var(--ink-2); }

.specs {
    width: 100%;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    font-size: .92rem;
}
.specs th, .specs td { padding: .72rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }
.specs th { width: 42%; font-weight: 600; color: var(--ink-3); background: var(--paper); }
.specs a { color: var(--accent); font-weight: 600; }
.specs a:hover { text-decoration: underline; }

.sticky-buy {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line-2);
    transform: translateY(110%);
    transition: transform .35s var(--ease);
}
.sticky-buy.is-visible { transform: none; }
.sticky-buy__price { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }

@media (min-width: 1024px) { .sticky-buy { display: none; } }

@media (max-width: 1023px) {
    .product { grid-template-columns: 1fr; }
    .gallery { position: static; max-width: 620px; width: 100%; margin-inline: auto; }
    .pdetails { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .buybox__row { flex-wrap: wrap; }
    .buybox__row .qty { width: 100%; justify-content: space-between; }
}

/* ==========================================================
   SHPORTA, MINI-SHPORTA, PËRMBLEDHJA
   ========================================================== */

.cart-layout, .checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: start;
    padding-bottom: 3rem;
}

.cart-list { display: grid; gap: .75rem; }

.citem {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    padding: .9rem;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
}
.citem--dead { opacity: .65; }
.citem__media { display: block; width: 96px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: var(--paper-2); }
.citem__media img { width: 100%; height: 100%; object-fit: cover; }
.citem__name { font-family: var(--serif); font-size: 1.06rem; font-weight: 600; line-height: 1.3; }
.citem__name:hover { color: var(--accent); }
.citem__meta { margin-top: .15rem; font-size: .8rem; color: var(--ink-3); }
.citem__opts {
    display: inline-block;
    margin-top: .3rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--accent-tint);
    color: var(--accent);
    font-size: .76rem;
    font-weight: 600;
}
.citem__unit { margin-top: .35rem; font-size: .88rem; }
.citem__controls { display: flex; align-items: center; gap: .6rem; margin-top: .75rem; }
.citem__controls .qty { height: 40px; }
.citem__controls .qty button { width: 36px; }
.citem__remove {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink-3);
}
.citem__remove:hover { border-color: var(--danger); color: var(--danger); }
.citem__warn { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; font-size: .82rem; font-weight: 600; color: var(--warn); }
.citem__total { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }

.summary {
    position: sticky;
    top: var(--sticky-top);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.summary__head {
    padding: 1rem 1.25rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line-2);
    font-family: var(--serif);
    font-size: 1.22rem;
    font-weight: 600;
}
.summary__body { padding: 1.1rem 1.25rem; }
.summary__row { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; font-size: .93rem; }
.summary__row--total { margin-top: .5rem; padding-top: .85rem; border-top: 1px dashed var(--line); font-size: 1.15rem; font-weight: 700; }
.summary__row--total span:last-child { font-family: var(--serif); font-size: 1.35rem; }
.summary__foot { padding: 0 1.25rem 1.25rem; }
.summary__free { color: var(--ok); }

.mini-items { display: grid; gap: .85rem; max-height: 340px; overflow: auto; }
.mini-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: .75rem; align-items: start; }
.mini-item__img { width: 56px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; background: var(--paper-2); }
.mini-item__img img { width: 100%; height: 100%; object-fit: cover; }
.mini-item__name { display: block; font-weight: 600; font-size: .88rem; line-height: 1.3; }
a.mini-item__name:hover { color: var(--accent); }
.mini-item__qty { margin-top: .15rem; font-size: .78rem; color: var(--ink-3); }
.mini-item__total { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.mini-item__side { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }

.mini-qty {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin-top: .45rem;
    padding: 2px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: #fff;
}
.mini-qty button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; }
.mini-qty button:hover:not(:disabled) { background: var(--paper); }
.mini-qty button:disabled { opacity: .3; }
.mini-qty span { min-width: 22px; text-align: center; font-size: .85rem; font-weight: 700; }

.mini-remove { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--ink-3); }
.mini-remove:hover { background: var(--danger-soft); color: var(--danger); }

@media (max-width: 1023px) {
    .cart-layout, .checkout { grid-template-columns: 1fr; }
    .summary { position: static; }
}
@media (max-width: 560px) {
    .citem { grid-template-columns: 76px minmax(0, 1fr); }
    .citem__media { width: 76px; }
    .citem__total { grid-column: 2; }
}

/* ==========================================================
   FORMULARËT, KARTAT, CHECKOUT
   ========================================================== */

/* Kyçja e shpejtë mbi formularin e porosisë */
.quick-login {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem 1.2rem;
    background: linear-gradient(115deg, var(--accent-tint), #fff 80%);
    border: 1px solid var(--accent-soft);
    border-radius: var(--radius-lg);
}
.quick-login__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
}
.quick-login__text { display: flex; flex: 1; flex-direction: column; gap: .15rem; font-size: .86rem; line-height: 1.45; color: var(--ink-2); }
.quick-login__text strong { font-size: 1rem; color: var(--ink); }
.quick-login__actions { display: flex; flex: none; gap: .5rem; }

@media (max-width: 640px) {
    .quick-login { flex-wrap: wrap; }
    .quick-login__text { flex-basis: calc(100% - 62px); }
    .quick-login__actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
}

.card {
    margin-bottom: 1rem;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card__head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--line-2); }
.card__head h2 { margin: 0; font-size: 1.22rem; }
.card__num {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--butter);
    color: var(--ink);
    font-weight: 700;
    font-size: .9rem;
}
.card__body { padding: 1.3rem; }
.card__foot {
    padding: 1rem 1.3rem;
    border-top: 1px solid var(--line-2);
    background: var(--paper);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.fgrid { display: grid; gap: 1rem; }
.fgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fgrid--addr { grid-template-columns: minmax(0, 1fr) 170px; }

.field { display: flex; flex-direction: column; gap: .4rem; }
.label { font-size: .85rem; font-weight: 600; }
.req { color: var(--rose); }
.opt { font-weight: 400; color: var(--ink-3); }

.input, .select, .textarea {
    width: 100%;
    min-height: 48px;
    padding: .7rem .95rem;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    font-size: .95rem;
    outline: 0;
    transition: border-color .2s, box-shadow .2s;
}
.textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.input:disabled { background: var(--paper); color: var(--ink-3); }
.input--error, .select--error, .textarea--error { border-color: var(--danger); }
.field__error { font-size: .8rem; font-weight: 600; color: var(--danger); }
.field__hint { font-size: .8rem; color: var(--ink-3); }

.check { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--accent); }
.check__text { font-size: .92rem; font-weight: 600; }
.check__hint { display: block; margin-top: .15rem; font-size: .82rem; font-weight: 400; color: var(--ink-3); }

.opt-cards { display: grid; gap: .7rem; }
.opt-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.opt-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.opt-card:hover { border-color: var(--ink-4); }
.opt-card:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 3px var(--accent-tint); }
.opt-card input { flex: none; width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--accent); }
.opt-card.is-disabled { opacity: .5; cursor: not-allowed; }
.opt-card__title { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .95rem; }
.opt-card__desc { display: block; margin-top: .25rem; font-size: .84rem; line-height: 1.45; color: var(--ink-2); }
.opt-card__price {
    display: inline-block;
    margin-top: .45rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--ok-soft);
    color: var(--ok);
    font-size: .78rem;
    font-weight: 700;
}
.opt-card__map { display: inline-flex; align-items: center; gap: .25rem; margin-top: .2rem; font-weight: 600; color: var(--accent); }

@media (max-width: 640px) {
    .fgrid--2, .fgrid--addr, .opt-cards--2 { grid-template-columns: 1fr; }
}

/* ==========================================================
   POROSIA U REGJISTRUA
   ========================================================== */

.success { max-width: 640px; margin: 0 auto; padding: 2.5rem 0 2rem; text-align: center; }
.success__icon {
    display: grid;
    place-items: center;
    width: 86px; height: 86px;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    background: var(--ok-soft);
    color: var(--ok);
    box-shadow: 0 0 0 10px rgba(46, 125, 91, .07);
}
.success h1 { font-size: clamp(2rem, 4vw, 2.7rem); }
.success__number {
    display: inline-block;
    margin: 1.2rem 0 .5rem;
    padding: .8rem 1.4rem;
    border: 2px dashed var(--accent);
    border-radius: 14px;
    background: var(--accent-tint);
    color: var(--accent);
    font: 700 1.4rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .06em;
    cursor: copy;
}

.acct-offer { max-width: 900px; margin: 0 auto 1.5rem; }
.acct-offer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; }
@media (max-width: 767px) { .acct-offer__grid { grid-template-columns: 1fr; } }

.timeline { display: grid; margin-bottom: 1rem; }
.tl-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .9rem; }
.tl-step__marker { display: flex; flex-direction: column; align-items: center; }
.tl-step__dot {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: #fff;
    font-size: .8rem;
    font-weight: 700;
    color: var(--ink-3);
}
.tl-step__line { flex: 1; width: 2px; min-height: 18px; margin: .2rem 0; background: var(--line); }
.tl-step.is-done .tl-step__dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.tl-step.is-done .tl-step__line { background: var(--ok); }
.tl-step.is-current .tl-step__dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 5px var(--accent-tint); }
.tl-step__body { padding-bottom: 1.1rem; }
.tl-step__title { font-weight: 700; }
.tl-step__time, .tl-step__note { font-size: .84rem; color: var(--ink-3); }

/* ==========================================================
   LLOGARIA IME
   Koka blu si perde me buzë dantelle, pllakat e shpejta, porositë
   si karta që hapen, dhe anash të dhënat + fjalëkalimi.
   Harqet (999px lart) janë i njëjti motiv si fotot e koleksioneve.
   ========================================================== */

.me { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ---------- Koka ---------- */

.me-hero {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2.5rem;
    margin: .5rem 0 calc(12px + clamp(1.25rem, 2.6vw, 1.75rem));
    padding: clamp(1.4rem, 3.4vw, 2.5rem) clamp(1.15rem, 3.4vw, 2.6rem) clamp(1.6rem, 3.4vw, 2.5rem);
    color: #fff;
    background: var(--ink);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    filter: drop-shadow(0 18px 26px rgba(27, 35, 70, .18));
}

/* Buza poshtë: harqe të vegjël si dantella e një perdeje. */
.me-hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -11px;
    height: 12px;
    background: radial-gradient(circle at 12px 0, var(--ink) 11.5px, transparent 12px) 50% 0 / 24px 12px repeat-x;
    pointer-events: none;
}

.me-hero__deco {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    background:
        radial-gradient(rgba(255, 255, 255, .07) 1.3px, transparent 1.5px) 0 0 / 16px 16px,
        /* poshtë mbetet blu e errët, që dantella të vazhdojë pa shenjë */
        linear-gradient(180deg, transparent 50%, var(--ink) 100%),
        radial-gradient(ellipse 75% 130% at 90% -15%, var(--accent) 0%, rgba(47, 69, 150, .55) 45%, transparent 78%),
        radial-gradient(circle at 6% 35%, rgba(242, 236, 124, .1), transparent 28%);
    pointer-events: none;
}
/* Dy dritare-harqe në të djathtë; e brendshmja me qepje (vijë me ndërprerje). */
.me-hero__deco::before,
.me-hero__deco::after {
    content: "";
    position: absolute;
    bottom: -40px;
    border-radius: 999px 999px 0 0;
}
.me-hero__deco::before {
    right: 4%;
    width: 300px; height: 300px;
    border: 1.5px solid rgba(242, 236, 124, .2);
}
.me-hero__deco::after {
    right: calc(4% + 22px);
    width: 256px; height: 266px;
    border: 1.5px dashed rgba(255, 255, 255, .13);
}

.me-hero__id { position: relative; display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 1.6rem); min-width: 0; }

.me-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: clamp(70px, 7.5vw, 88px);
    aspect-ratio: 5 / 6;
    padding-top: .2em;
    border-radius: 999px 999px 18px 18px;
    background: var(--butter);
    color: var(--ink);
    font-family: var(--serif);
    font-size: clamp(1.6rem, 2.8vw, 2.15rem);
    font-style: italic;
    font-weight: 600;
    letter-spacing: -.02em;
    box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .55);
    /* qepje rreth harkut */
    outline: 1.5px dashed rgba(242, 236, 124, .5);
    outline-offset: 5px;
}

.me-hero__text { display: flex; flex-direction: column; min-width: 0; }
.me-hero__eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--butter); }
.me-hero__title { margin: .25rem 0 .45rem; font-size: clamp(1.65rem, 3.4vw, 2.55rem); color: #fff; }
.me-hero__title em { font-weight: 500; color: var(--butter); }
.me-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.15rem; font-size: .88rem; color: rgba(255, 255, 255, .72); }
.me-hero__meta > span { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; overflow-wrap: anywhere; }
.me-hero__meta svg { color: rgba(242, 236, 124, .85); }
.me-hero__staff {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .65rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    transition: background .2s, border-color .2s;
}
.me-hero__staff:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }

.me-stats { position: relative; display: grid; grid-template-columns: repeat(3, auto); gap: .6rem; margin: 0; }
.me-stat {
    min-width: 120px;
    padding: .85rem 1.15rem .8rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.me-stat dt { font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.me-stat dd { margin: .25rem 0 0; font-family: var(--serif); font-size: 1.65rem; font-weight: 600; line-height: 1.1; white-space: nowrap; color: #fff; }
.me-stat:last-child dd { color: var(--butter); }

/* ---------- Pllakat e shpejta ---------- */

.me-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
    margin-bottom: clamp(1.25rem, 2.6vw, 1.75rem);
}

.me-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.05rem;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.me-tile:hover { transform: translateY(-3px); border-color: var(--accent-soft); box-shadow: var(--shadow); }

.me-tile__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px; height: 50px;
    border-radius: 999px 999px 12px 12px;
}
.me-tile__icon--blush { background: var(--blush-2); color: var(--rose); }
.me-tile__icon--butter { background: var(--butter); color: var(--ink); }
.me-tile__icon--blue { background: var(--accent-tint); color: var(--accent); }
.me-tile__icon--wa { background: #E2F5EA; color: #1A8F4C; }

.me-tile__text { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.3; }
.me-tile__text strong { font-size: .97rem; }
.me-tile__text span { overflow: hidden; font-size: .8rem; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.me-tile__go { color: var(--ink-4); transition: transform .25s var(--ease), color .25s; }
.me-tile:hover .me-tile__go { color: var(--accent); transform: translateX(3px); }

/* ---------- Rrjeta dhe panelet ---------- */

.me-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
    align-items: start;
}
.me-side { display: grid; gap: 1rem; min-width: 0; }

.me-panel {
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.me-panel__head {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.05rem 1.3rem;
    border-bottom: 1px solid var(--line-2);
}
.me-panel__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px; height: 46px;
    border-radius: 999px 999px 11px 11px;
    background: var(--accent-tint);
    color: var(--accent);
}
.me-panel__icon--butter { background: var(--butter); color: var(--ink); }
.me-panel__icon--blush { background: var(--blush-2); color: var(--rose); }
.me-panel__titles { flex: 1; min-width: 0; }
.me-panel__titles h2 { margin: 0; font-size: 1.25rem; }
.me-panel__titles p { margin: .1rem 0 0; font-size: .82rem; color: var(--ink-3); }
.me-panel__body { padding: 1.3rem; }

.me-form { display: grid; gap: 1.05rem; }

/* Email-i: vetëm për lexim, jo fushë — që shfletuesi të mos e marrë për
   emër përdoruesi dhe ta derdhë te telefoni. */
.me-static {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 48px;
    padding: .6rem .8rem .6rem .95rem;
    background: var(--paper);
    border: 1.5px dashed var(--line);
    border-radius: 12px;
    font-size: .95rem;
    color: var(--ink-2);
}
.me-static > svg { color: var(--ink-3); }
.me-static__value { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.me-static__lock {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--ok-soft);
    color: var(--ok);
}

/* Paneli i fjalëkalimit hapet e mbyllet si sirtar. */
.me-pass > summary { list-style: none; cursor: pointer; border-bottom-color: transparent; border-radius: var(--radius-lg); transition: background .2s; }
.me-pass > summary::-webkit-details-marker { display: none; }
.me-pass > summary:hover { background: var(--paper); }
.me-pass[open] > summary { border-bottom-color: var(--line-2); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.me-pass__chev { flex: none; color: var(--ink-3); transition: transform .25s var(--ease); }
.me-pass[open] .me-pass__chev { transform: rotate(180deg); }

.me-logout { margin: 0; }
.me-logout__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 48px;
    border: 1.5px dashed var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .6);
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink-2);
    transition: background .2s, border-color .2s, color .2s;
}
.me-logout__btn:hover { border-style: solid; border-color: var(--rose); background: var(--blush-2); color: var(--rose); }

/* ---------- Pa porosi ---------- */

.me-empty { max-width: 600px; margin: 0 auto; padding: clamp(1.25rem, 3.5vw, 2.4rem) 0 .25rem; text-align: center; }
.me-empty__art { position: relative; width: 150px; height: 164px; margin: 0 auto 1.4rem; }
.me-empty__arch {
    position: absolute;
    inset: 0 16px;
    display: grid;
    place-items: center;
    border-radius: 999px 999px 22px 22px;
    background: linear-gradient(180deg, var(--blush), var(--blush-2));
    color: var(--rose);
}
.me-empty__arch::before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1.5px dashed rgba(177, 74, 95, .32);
    border-radius: inherit;
}
.me-empty__dot { position: absolute; border-radius: 50%; }
.me-empty__dot--a { top: 14px; right: 0; width: 28px; height: 28px; background: var(--butter); }
.me-empty__dot--b { bottom: 26px; left: 0; width: 15px; height: 15px; background: var(--accent-soft); }
.me-empty h3 { margin-bottom: .4rem; font-size: 1.5rem; }
.me-empty p { max-width: 390px; margin: 0 auto 1.3rem; color: var(--ink-3); }
.me-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }

.me-perks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 1.75rem 0 0;
    padding: 1.2rem 0 0;
    border-top: 1px dashed var(--line);
    list-style: none;
}
.me-perks li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .8rem;
    border-radius: 999px;
    background: var(--paper);
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-2);
}
.me-perks svg { color: var(--accent); }
.me-perks .flags { gap: .25rem; }

/* ---------- Porositë ---------- */

.me-orders { display: grid; gap: .85rem; }

/* ---------- Gjurmo porosinë ---------- */
.track { display: grid; gap: 1rem; max-width: 720px; margin: 0 auto 2.5rem; }
.track__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .8rem; align-items: end; }
.track__form .field { margin: 0; }
.track__msg { margin: 0 0 1rem; font-weight: 600; color: var(--ink); }
.track__msg.is-cancelled { color: var(--ink-3); }
@media (max-width: 640px) {
    .track__form { grid-template-columns: minmax(0, 1fr); }
    .track__form .btn { width: 100%; justify-content: center; }
}

.me-order {
    background: var(--paper);
    border: 1px solid var(--line-2);
    border-radius: 18px;
    transition: background .2s, border-color .2s, box-shadow .2s;
}
.me-order[open] { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); }

.me-order__head {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1rem;
    border-radius: 18px;
    list-style: none;
    cursor: pointer;
}
.me-order__head::-webkit-details-marker { display: none; }
.me-order__head:hover .me-order__num { color: var(--accent); }

.me-order__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px; height: 48px;
    border-radius: 999px 999px 12px 12px;
    background: var(--accent-tint);
    color: var(--accent);
}
.me-order.is-cancelled .me-order__icon { background: var(--paper-2); color: var(--ink-3); }

.me-order__id { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.me-order__num { font: 700 .95rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; transition: color .2s; }
.me-order__date { font-size: .8rem; color: var(--ink-3); }

.me-order__thumbs { display: flex; flex: none; padding-left: 8px; }
.me-order__thumb {
    display: grid;
    place-items: center;
    width: 34px; height: 42px;
    margin-left: -8px;
    overflow: hidden;
    border-radius: 999px 999px 8px 8px;
    background: var(--paper-2);
    color: var(--ink-4);
    box-shadow: 0 0 0 2px #fff;
    font-size: .72rem;
    font-weight: 700;
}
.me-order__thumb img { width: 100%; height: 100%; object-fit: cover; }
.me-order__thumb--more { background: var(--ink); color: #fff; }

.me-order__side { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: .35rem; min-width: 92px; }
.me-order__total { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; line-height: 1; white-space: nowrap; }
.me-order__chev { flex: none; color: var(--ink-3); transition: transform .25s var(--ease); }
.me-order[open] .me-order__chev { transform: rotate(180deg); }

.me-order__body { margin: 0 1rem; padding: 1rem 0; border-top: 1px dashed var(--line); }

.me-order__note {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .9rem;
    padding: .65rem .9rem;
    border-radius: 12px;
    background: var(--danger-soft);
    font-size: .86rem;
    font-weight: 600;
    color: var(--danger);
}

/* Hapat e porosisë: pika të lidhura me vijë, e gjelbër deri te hapi aktual. */
.me-steps { display: grid; grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr)); margin: .15rem 0 1.1rem; padding: 0; list-style: none; }
.me-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; }
.me-step::before {
    content: "";
    position: absolute;
    top: 10px; right: 50%;
    width: 100%; height: 2px;
    background: var(--line);
}
.me-step:first-child::before { display: none; }
.me-step.is-done::before, .me-step.is-current::before { background: var(--ok); }
.me-step__dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border: 2px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: #fff;
}
.me-step.is-done .me-step__dot { background: var(--ok); border-color: var(--ok); }
.me-step.is-current .me-step__dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-tint); }
.me-step.is-current:not(:last-child) .me-step__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.me-step.is-current:last-child .me-step__dot { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 0 5px var(--ok-soft); }
.me-step__label { font-size: .74rem; font-weight: 600; line-height: 1.2; color: var(--ink-4); }
.me-step.is-done .me-step__label { color: var(--ink-2); }
.me-step.is-current .me-step__label { font-weight: 700; color: var(--accent); }
.me-step.is-current:last-child .me-step__label { color: var(--ok); }

.me-items { display: grid; gap: .3rem; }
.me-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: .8rem;
    align-items: center;
    padding: .45rem;
    border-radius: 12px;
    transition: background .2s;
}
a.me-item:hover { background: var(--paper); }
a.me-item:hover .me-item__name { color: var(--accent); }
.me-item.is-gone { opacity: .6; }
.me-item__img {
    display: grid;
    place-items: center;
    width: 48px; height: 60px;
    overflow: hidden;
    border-radius: 999px 999px 10px 10px;
    background: var(--paper-2);
    color: var(--ink-4);
}
.me-item__img img { width: 100%; height: 100%; object-fit: cover; }
.me-item__body { display: flex; flex-direction: column; align-items: flex-start; gap: .12rem; min-width: 0; }
.me-item__name { font-size: .92rem; font-weight: 600; line-height: 1.3; transition: color .2s; }
.me-item__opts { padding: .08rem .5rem; border-radius: 999px; background: var(--accent-tint); font-size: .72rem; font-weight: 600; color: var(--accent); }
.me-item__meta { font-size: .78rem; color: var(--ink-3); }
.me-item__total { font-size: .92rem; font-weight: 700; white-space: nowrap; }

.me-order__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .8rem;
    padding-top: .9rem;
    border-top: 1px dashed var(--line);
}
.me-order__chips { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.me-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--paper);
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-2);
}
.me-chip svg { color: var(--ink-3); }
.me-chip--ok { border-color: transparent; background: var(--ok-soft); color: var(--ok); }
.me-chip--ok svg { color: currentColor; }

.me-order__sum { display: grid; gap: .15rem; min-width: 190px; margin: 0; }
.me-order__sum > div { display: flex; justify-content: space-between; gap: 1.5rem; font-size: .84rem; color: var(--ink-3); }
.me-order__sum dd { margin: 0; font-weight: 600; color: var(--ink-2); }
.me-order__sum .is-total { margin-top: .2rem; padding-top: .4rem; border-top: 1px solid var(--line-2); font-weight: 700; color: var(--ink); }
.me-order__sum .is-total dd { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }

.me-order__help { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; font-size: .84rem; font-weight: 600; color: #1A8F4C; }
.me-order__help:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Ekranet më të vogla ---------- */

@media (max-width: 1199px) {
    .me-grid { grid-template-columns: minmax(0, 1fr) 350px; }
}

@media (max-width: 1023px) {
    .me-hero { flex-direction: column; align-items: stretch; }
    .me-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .me-stat { min-width: 0; }
    .me-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .me-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .me-hero { gap: 1.2rem; border-radius: 20px 20px 0 0; }
    .me-hero__deco::before { right: -60px; width: 220px; height: 230px; }
    .me-hero__deco::after { right: -40px; width: 180px; height: 196px; }
    .me-hero__meta { font-size: .82rem; }
    .me-stats { gap: .45rem; }
    .me-stat { padding: .65rem .7rem; border-radius: 14px; }
    .me-stat dt { font-size: .6rem; letter-spacing: .08em; }
    .me-stat dd { font-size: 1.2rem; }

    .me-tiles { gap: .6rem; }
    .me-tile { flex-direction: column; align-items: flex-start; gap: .55rem; padding: .85rem; }
    .me-tile__icon { width: 40px; height: 44px; }
    .me-tile__text strong { font-size: .92rem; }
    .me-tile__text span { font-size: .76rem; white-space: normal; }
    .me-tile__go { position: absolute; top: .85rem; right: .8rem; }

    .me-panel__head { padding: .95rem 1rem; }
    .me-panel__body { padding: 1.05rem 1rem; }

    .me-order__head {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: .4rem .75rem;
        padding: .8rem .85rem;
    }
    .me-order__icon { width: 40px; height: 44px; grid-row: 1 / span 2; align-self: start; }
    .me-order__id { grid-column: 2; grid-row: 1; }
    .me-order__side { grid-column: 3; grid-row: 1; min-width: 0; }
    .me-order__thumbs { grid-column: 2; grid-row: 2; }
    .me-order__chev { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; }
    .me-order__body { margin: 0 .85rem; }
    .me-order__sum { width: 100%; }
    .me-step__label { font-size: .66rem; }

    .me-item { grid-template-columns: 42px minmax(0, 1fr) auto; gap: .65rem; padding: .4rem .2rem; }
    .me-item__img { width: 42px; height: 52px; }
}

@media (max-width: 400px) {
    .me-step__label { font-size: .6rem; letter-spacing: -.01em; }
}

.auth-page { max-width: 540px; margin: 0 auto; padding: .5rem 0 3rem; }
.auth-switch { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.auth-terms { margin: 1rem 0 0; font-size: .8rem; text-align: center; color: var(--ink-3); }
.auth-terms a { color: var(--accent); }

/* ---------- Konfirmimi i email-it: kodi 5-shifror ---------- */

.verify { max-width: 460px; margin: 0 auto; padding: .5rem 0 3rem; }
.verify__card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.9rem, 6vw, 2.6rem) clamp(1.15rem, 6vw, 2.5rem) clamp(1.5rem, 5vw, 2.1rem);
    text-align: center;
}
/* Shiriti i verdhë sipër — e njëjta frymë si kutia e kodit te email-i. */
.verify__card::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--butter); }
.verify__icon {
    display: grid;
    place-items: center;
    width: 68px; height: 68px;
    margin: 0 auto 1.15rem;
    border-radius: 50%;
    background: var(--butter);
    color: var(--ink);
    box-shadow: 0 0 0 8px var(--butter-soft);
}
.verify__title {
    margin: 0 0 .45rem;
    font-family: var(--serif);
    font-size: clamp(1.55rem, 5vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -.01em;
}
.verify__lead { margin: 0 auto 1.6rem; max-width: 34ch; color: var(--ink-2); line-height: 1.55; }
.verify__email { display: block; margin-top: .15rem; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }

.code-boxes { display: flex; justify-content: center; gap: clamp(.4rem, 2.2vw, .7rem); min-width: 0; margin: 0; padding: 0; border: 0; }
.code-box {
    width: clamp(46px, 13.5vw, 58px);
    height: clamp(58px, 16.5vw, 68px);
    padding: 0;
    text-align: center;
    font: 700 clamp(1.55rem, 6.5vw, 1.95rem)/1 var(--font);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    caret-color: var(--accent);
    outline: 0;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.code-box:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.code-box.is-filled { background: #fff; border-color: var(--ink); }
.code-boxes.is-error { animation: shake .45s var(--ease); }
.code-boxes.is-error .code-box { border-color: var(--danger); background: var(--danger-soft); }
.code-boxes.is-error .code-box:focus { box-shadow: 0 0 0 4px var(--danger-soft); }

.verify__error { margin-top: .85rem; font-size: .86rem; }
.verify__submit { margin-top: 1.35rem; }
.verify__hint { margin-top: 1.15rem; font-size: .84rem; line-height: 1.55; color: var(--ink-3); }
.verify__hint svg { margin-right: .25rem; vertical-align: -2px; }
/* Fjalitë thyhen të plota, jo „Nuk / e gjen?" në telefon. */
.verify__hint span { display: inline-block; }
.verify__resend { margin-top: .85rem; }
.verify__resend .btn { font-variant-numeric: tabular-nums; }
.verify__form { text-align: left; }
.verify__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem 1.2rem;
    margin-top: 1.1rem;
    font-size: .88rem;
    color: var(--ink-3);
}
.verify__foot a { color: var(--accent); font-weight: 600; }

/* ==========================================================
   FAQET INFORMATIVE
   ========================================================== */

.info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
    padding: .75rem 0 3rem;
}
.info__main {
    padding: clamp(1.4rem, 4vw, 3rem);
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
}
.info__head h1 { font-size: clamp(2rem, 4vw, 3rem); }
.info__note {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: 1.5rem;
    padding: .8rem 1rem;
    border-radius: 12px;
    background: var(--accent-tint);
    color: var(--ink-2);
    font-size: .88rem;
}
.info__note svg { margin-top: .15rem; color: var(--accent); }
.info__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line-2);
}

.info__side { position: sticky; top: var(--sticky-top); display: grid; gap: 1rem; }
.info__side-box { padding: 1.2rem; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); }
.info__side-title { margin-bottom: .7rem; font-family: var(--serif); font-size: 1.12rem; font-weight: 600; }
.info__nav { display: grid; gap: .15rem; }
.info__nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .7rem;
    border-radius: 10px;
    font-size: .92rem;
    color: var(--ink-2);
}
.info__nav a:hover { background: var(--paper); color: var(--ink); }
.info__nav a.is-current { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.info__help { background: var(--blush-2); border-color: var(--blush); }

@media (max-width: 1023px) {
    .info { grid-template-columns: 1fr; }
    .info__side { position: static; }
}

.prose { font-size: 1.03rem; line-height: 1.8; color: var(--ink-2); }
.prose h2 { margin: 2.1rem 0 .7rem; font-size: 1.6rem; color: var(--ink); }
.prose h3 { margin: 1.6rem 0 .5rem; font-size: 1.22rem; }
.prose h4 { margin: 1.3rem 0 .4rem; font-size: 1.05rem; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3rem; }
.prose li { margin: .35rem 0; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--line); }
.prose blockquote {
    margin: 1.6rem 0;
    padding: .4rem 0 .4rem 1.2rem;
    border-left: 3px solid var(--butter-2);
    font-family: var(--serif);
    font-size: 1.18rem;
    font-style: italic;
    color: var(--ink);
}
.prose table { width: 100%; margin: 1.2rem 0; border-collapse: collapse; font-size: .93rem; }
.prose th, .prose td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--line-2); }
.prose th { color: var(--ink); background: var(--paper); }

/* ==========================================================
   DRITARJA E KONFIRMIMIT
   ========================================================== */

.modal {
    position: fixed;
    inset: 0;
    z-index: 700;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(27, 35, 70, .45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .22s;
}
.modal.is-open { opacity: 1; }

.modal__card {
    position: relative;
    width: min(100%, 420px);
    padding: 2rem 1.6rem 1.5rem;
    overflow: hidden;
    text-align: center;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transform: translateY(14px) scale(.96);
    transition: transform .3s var(--ease);
}
.modal.is-open .modal__card { transform: none; }
/* Buza e dantellës sipër, si te footer-i. */
.modal__card::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 10px;
    background: radial-gradient(circle at 10px 0, var(--blush) 9.5px, transparent 10px) 0 0 / 20px 10px repeat-x;
}

.modal__icon {
    display: grid;
    place-items: center;
    width: 64px; height: 64px;
    margin: .3rem auto 1rem;
    border-radius: 50%;
    background: var(--danger-soft);
    color: var(--danger);
    box-shadow: 0 0 0 8px rgba(191, 58, 43, .06);
}
.modal__icon--neutral { background: var(--accent-tint); color: var(--accent); box-shadow: 0 0 0 8px rgba(47, 69, 150, .06); }

.modal__title { margin: 0 0 .45rem; font-size: 1.45rem; }
.modal__text { margin: 0 0 1.5rem; color: var(--ink-2); font-size: .95rem; line-height: 1.55; }

.modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

.btn--danger-solid { background: var(--danger); color: #fff; }
.btn--danger-solid:hover { background: #A22F22; box-shadow: 0 10px 22px -12px var(--danger); }

@media (max-width: 420px) {
    .modal { align-items: end; padding: .75rem; }
    .modal__actions { grid-template-columns: 1fr; }
    .modal__actions [data-modal-ok] { order: -1; }
}

/* ==========================================================
   TOAST, LIGHTBOX, LART
   ========================================================== */

.toasts {
    position: fixed;
    right: 1rem; bottom: 1rem;
    z-index: 400;
    display: grid;
    gap: .5rem;
}
.toast {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 240px;
    max-width: 380px;
    padding: .85rem 1.05rem;
    border-radius: 14px;
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow-lg);
    font-size: .9rem;
    animation: toast-in .35s var(--ease);
}
.toast svg { flex: none; width: 20px; height: 20px; color: var(--butter); }
.toast--error svg { color: #FFB4A8; }

@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

@media (max-width: 767px) {
    .toasts { left: 1rem; right: 1rem; top: 1rem; bottom: auto; }
    .toast { max-width: none; }
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(14, 18, 38, .93);
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; }
.lightbox__close {
    position: absolute;
    top: 1rem; right: 1rem;
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .22); }

/* ---------- Butonat lundrues: WhatsApp + lart ---------- */

.wa-float {
    position: fixed;
    right: 1rem; bottom: 1rem;
    z-index: 35;
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    box-shadow: 0 12px 26px -10px rgba(18, 140, 76, .65), 0 0 0 4px rgba(255, 255, 255, .9);
    transition: transform .25s var(--ease), background .2s;
}
.wa-float:hover { transform: scale(1.07); background: #1EBE5A; }
.wa-float::after {
    /* Valë e lehtë që tërheq syrin, pa u bërë e bezdisshme. */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #25D366;
    animation: wa-pulse 2.6s var(--ease) infinite;
    pointer-events: none;
}

@keyframes wa-pulse {
    0%   { transform: scale(1); opacity: .7; }
    70%  { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}

.to-top {
    position: fixed;
    right: 1.4rem; bottom: 5.1rem;
    z-index: 30;
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 0;
    background: var(--ink);
    color: var(--butter);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .3s, transform .3s, visibility .3s, background .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--accent); }

/* Pa WhatsApp, shigjeta zë vendin e tij. */
body:not(:has(.wa-float)) .to-top { bottom: 1rem; }

@media (max-width: 767px) {
    .wa-float { width: 52px; height: 52px; right: .85rem; bottom: .85rem; }
    .to-top { width: 42px; height: 42px; right: 1.15rem; bottom: 4.6rem; }

    /* Te shporta dhe te porosia butoni mbulonte totalin dhe fushat e formës,
       pikërisht ku klienti po vendos. WhatsApp-i mbetet te fundi i faqes. */
    body:has(.cart-layout, form.checkout) .wa-float { display: none; }
    body:has(.cart-layout, form.checkout) .to-top { bottom: .85rem; }
}

/* Faqja e produktit në telefon ka shiritin e blerjes poshtë — butonat ngrihen mbi të. */
@media (max-width: 1023px) {
    body:has(.sticky-buy.is-visible) .wa-float { bottom: 5.4rem; }
    body:has(.sticky-buy.is-visible) .to-top { bottom: 9.1rem; }
}

/* ==========================================================
   ANIMACIONET E HYRJES
   ========================================================== */

.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .75s var(--ease), transform .75s var(--ease);
    transition-delay: var(--delay, 0ms);
}
.js [data-reveal="left"] { transform: translateX(-26px); }
.js [data-reveal="right"] { transform: translateX(26px); }
.js [data-reveal="zoom"] { transform: scale(.97); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .js [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================
   PRINT
   ========================================================== */

@media print {
    .announce, .header, .footer, .drawer, .mobile-nav, .to-top, .wa-float, .sticky-buy, .toasts, .scroll-progress { display: none !important; }
    body { background: #fff; }
}