/* ==========================================================================
   Parsonal Digital — Frontend Stylesheet
   কোনো এক্সটার্নাল CSS ফ্রেমওয়ার্ক ব্যবহার করা হয়নি (অফলাইনেও কাজ করবে)
   ========================================================================== */

:root {
    /* --- brand ------------------------------------------------------- */
    --primary: #1447e6;          /* হেডার, বাটন, দাম, সেকশন টাইটেল */
    --primary-dark: #0f37b8;
    --primary-light: #eaefff;
    --accent: #f5a524;           /* স্টার রেটিং */
    --header-bg: #1447e6;
    --footer-bg: #08080d;
    --announce-bg: #4a5bd4;      /* টপ অফার বার — হেডারের চেয়ে হালকা ইন্ডিগো */

    /* ফুটারের চার কলামের আলাদা হেডিং কালার */
    --footer-brand: #3b82f6;
    --footer-h2: #60a5fa;
    --footer-h3: #f472b6;
    --footer-h4: #fb923c;

    /* --- neutrals ---------------------------------------------------- */
    --ink: #101828;
    --ink-soft: #475467;
    --ink-mute: #98a2b3;
    --line: #e4e7ec;
    --bg: #ffffff;
    --bg-soft: #f7f9fc;

    /* --- shape ------------------------------------------------------- */
    --radius-sm: 6px;            /* বাটন */
    --radius: 8px;               /* কার্ড */
    --radius-lg: 14px;           /* বড় প্যানেল */
    --radius-xl: 20px;           /* প্রমো ব্যানার */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow: 0 4px 14px rgba(16, 24, 40, .08);
    --shadow-lg: 0 16px 44px rgba(16, 24, 40, .14);
    --container: 1320px;

    /* --- type -------------------------------------------------------- */
    /* Poppins ইংরেজি/সংখ্যার জন্য, বাংলা গ্লিফ অটো Hind Siliguri-তে পড়বে */
    --font: 'Poppins', 'Hind Siliguri', 'Noto Sans Bengali', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-bn: 'Hind Siliguri', 'Noto Sans Bengali', sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, h5 { margin: 0 0 .5rem; line-height: 1.32; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }

/* বাংলা প্যারাগ্রাফে লাইন-হাইট একটু বেশি লাগে (মাত্রা + যুক্তাক্ষর) */
:lang(bn), .bn { font-family: var(--font-bn); line-height: 1.85; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 16px; }

/*
   গ্রিড/ফ্লেক্স আইটেমের ডিফল্ট min-width: auto কনটেন্টের চাপে ট্র্যাক
   ছাড়িয়ে যায় — মোবাইলে এতেই পেজ ডান দিকে কেটে যায়। তাই লেআউট
   কনটেইনারগুলোকে সরাসরি ছোট হতে দেওয়া হয়।
*/
.summary > *, .acct > *, .pdetail > *, .plans > *, .stats > * { min-width: 0; }
.table-wrap, .prose, .card { max-width: 100%; }
.prose img, .prose iframe, .prose table { max-width: 100%; }
.ico { flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ------------------------------------------------------------ announcement */
.announce {
    position: relative; z-index: 61;
    /* অ্যাডমিনের সেট করা রঙই ভিত্তি — এটি সব ব্রাউজারে কাজ করে */
    background: var(--announce-bg, #4a5bd4);
    color: var(--announce-fg, #fff);
    font-size: 12px; line-height: 1.35;
    padding: 4px 0;
    overflow: hidden;
}
/* গভীরতা দিতে rgba ওভারলে — color-mix() নয়, তাই পুরনো ব্রাউজারেও নিরাপদ */
.announce::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(0,0,0,.14), transparent 45%, rgba(255,255,255,.1));
}
/* খুব হালকা আলোর রেখা ডান দিকে সরে যায় */
.announce::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 42%, rgba(255,255,255,.13) 50%, transparent 58%);
    transform: translateX(-100%);
    animation: pd-sheen 8s ease-in-out infinite;
}

.announce__inner {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    min-width: 0; min-height: 22px;
}

/* অফার ও চলমান লেখা — একই জায়গায় পালা করে দেখায় */
.announce__offer {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; flex-wrap: nowrap; min-width: 0; width: 100%;
    transition: opacity .4s, transform .4s cubic-bezier(.22, .8, .3, 1);
}
.announce__offer[hidden] { display: none; }
.announce.is-swapping .announce__offer { opacity: 0; transform: translateY(-8px); }

/* ------------------------------------------------------ চলমান বার্তা */
.announce__ticker {
    position: relative; width: 100%; overflow: hidden;
    display: flex; align-items: center;
}
.announce__ticker[hidden] { display: none; }
.announce__ticker-line {
    display: inline-flex; align-items: center; gap: 7px;
    white-space: nowrap; font-weight: 500; letter-spacing: .01em;
    will-change: transform;
}
/* ডান কিনারা থেকে শুরু করে বাঁ দিকে পুরোপুরি বেরিয়ে যায় */
.announce__ticker-line.is-running {
    animation: pd-marquee var(--marquee-dur, 14s) linear;
}
/* লেখার আগে ছোট একটা আলোকিত বিন্দু */
.announce__ticker-line::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none;
    background: currentColor; opacity: .75;
    box-shadow: 0 0 8px currentColor;
}

.announce__msg {
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 0; overflow: hidden;
}
.announce__emoji { flex: none; font-size: 13px; }
.announce__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.announce__price { font-weight: 700; white-space: nowrap; flex: none; }
.announce__old {
    text-decoration: line-through; opacity: .55;
    font-size: 11px; font-weight: 400; margin-inline-start: 5px;
}

/* কাউন্টডাউন — প্রতিটি সংখ্যা ছোট চিপে */
.announce__timer {
    display: inline-flex; align-items: center; gap: 3px;
    flex: none; font-variant-numeric: tabular-nums;
}
.announce__timer b {
    background: rgba(255, 255, 255, .19);
    border-radius: 4px; padding: 1px 4px;
    font-size: 11.5px; font-weight: 700; line-height: 1.3;
    min-width: 20px; text-align: center;
}
.announce__timer i {
    font-style: normal; font-size: 9.5px; opacity: .7;
    margin-inline-end: 3px;
}
.announce__timer i:last-of-type { margin-inline-end: 0; }

.announce__btn {
    flex: none;
    /* লেখার রঙ বারের রঙ থেকেই আসে — অ্যাডমিন যে রঙই দিক, মানানসই থাকে */
    background: #fff; color: var(--announce-bg, var(--primary)); border: 0;
    padding: 2.5px 13px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; white-space: nowrap; line-height: 1.5;
    transition: background .16s, transform .14s, box-shadow .16s;
}
.announce__btn:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.22); }
.announce__btn:active { transform: scale(.96); }

/* ----------------------------------------------------------------- header */
.header {
    background: var(--header-bg);
    color: #fff;
    position: sticky; top: 0; z-index: 60;
}
.header__inner {
    display: flex; align-items: center; gap: 30px;
    min-height: 64px;
}
/* লোগো — ডেস্কটপ, ট্যাব, মোবাইল সব জায়গায় একই সাইজ ও অনুপাত */
.brand {
    display: flex; align-items: center; gap: 10px; flex: none;
    font-size: 21px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap;
}
.brand__mark {
    width: 36px; height: 36px; border-radius: 10px; flex: none;
    background: #fff; color: var(--primary);
    display: grid; place-items: center;
    font-weight: 700; font-size: 20px;
}
.brand img {
    height: 40px; width: auto; max-width: 190px;
    object-fit: contain;
}

.nav { display: flex; align-items: center; gap: 26px; margin-inline-start: 6px; }
.nav a {
    font-size: 15px; font-weight: 400; opacity: .96;
    padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .16s;
}
.nav a:hover, .nav a.is-active { border-bottom-color: #fff; }

.header__tools { margin-inline-start: auto; display: flex; align-items: center; gap: 22px; }
.icon-btn {
    background: none; border: 0; color: #fff; padding: 4px;
    display: inline-flex; align-items: center; gap: 8px;
    position: relative; font-size: 15px;
}
.icon-btn:hover { opacity: .85; }
.cart-badge {
    position: absolute; top: -6px; right: -8px;
    background: var(--accent); color: #fff;
    min-width: 18px; height: 18px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
    display: grid; place-items: center; padding: 0 4px;
}
/* ----------------------------------------------- বার্গার → ✕ অ্যানিমেশন */
.burger { display: none; padding: 6px 2px; }
.burger__box {
    position: relative; display: block;
    width: 24px; height: 17px;
}
.burger__line {
    position: absolute; inset-inline: 0; height: 2.4px; border-radius: 3px;
    background: currentColor;
    transition: transform .32s cubic-bezier(.22, .8, .3, 1), opacity .2s;
}
.burger__line:nth-child(1) { top: 0; }
.burger__line:nth-child(2) { top: 7.3px; }
.burger__line:nth-child(3) { top: 14.6px; }

.burger.is-open .burger__line:nth-child(1) { transform: translateY(7.3px) rotate(45deg); }
.burger.is-open .burger__line:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.burger.is-open .burger__line:nth-child(3) { transform: translateY(-7.3px) rotate(-45deg); }

/* ----------------------------------------------- অ্যাকাউন্ট ড্রপডাউন */
.accmenu { position: relative; }
.accmenu__avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.accmenu__drop {
    position: absolute; inset-inline-end: 0; top: calc(100% + 12px);
    min-width: 244px; background: #fff; color: var(--ink);
    border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .18);
    padding: 6px; z-index: 80;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .18s, transform .18s, visibility .18s;
}
.accmenu.is-open .accmenu__drop { opacity: 1; visibility: visible; transform: none; }
.accmenu__head {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 10px 12px; margin-bottom: 5px; border-bottom: 1px solid var(--line);
}
.accmenu__head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.accmenu__head b { display: block; font-size: 14.5px; line-height: 1.3; }
.accmenu__head small { color: var(--ink-mute); font-size: 12.5px; word-break: break-all; }
.accmenu__drop a,
.accmenu__logout button {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; border-radius: 8px; font-size: 14.5px;
    color: var(--ink-soft); background: none; border: 0; text-align: start;
    font-family: inherit; transition: background .15s, color .15s;
}
.accmenu__drop a:hover { background: var(--bg-soft); color: var(--primary); }
.accmenu__logout { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line); }
.accmenu__logout button { color: #dc2626; cursor: pointer; }
.accmenu__logout button:hover { background: #fef2f2; }

/* header search overlay */
.searchbar {
    background: #fff; border-top: 1px solid rgba(255,255,255,.15);
    padding: 12px 0; display: none;
}
.searchbar.is-open { display: block; }
.searchbar form { display: flex; gap: 8px; }
.searchbar input {
    flex: 1; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 10px 14px; font-size: 15px; font-family: inherit;
}
.searchbar input:focus { outline: 2px solid var(--primary); outline-offset: -1px; }

/* --------------------------------------------------------------- sections */
.section { padding: 34px 0; }
.section--soft { background: var(--bg-soft); }
.section__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 18px;
}
.section__title { font-size: 22px; font-weight: 600; color: var(--primary); margin: 0; letter-spacing: -.015em; }
.section__title--dark { color: var(--ink); }
.section__sub { color: var(--ink-soft); margin: 6px 0 0; font-size: 14.5px; }
.section__center { text-align: center; margin-bottom: 22px; }

/* ------------------------------------------------------------- hero slider */
.hero { padding-top: 22px; }
.slider {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    background: var(--bg-soft); box-shadow: var(--shadow-sm);
}
.slider__track { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.slider__slide { min-width: 100%; position: relative; }
.slider__slide img { width: 100%; aspect-ratio: 1400 / 500; object-fit: cover; }
.slider__caption {
    position: absolute; inset-inline-start: 6%; top: 50%; transform: translateY(-50%);
    color: #fff; max-width: 44%;
}
.slider__caption h2 { font-size: clamp(20px, 3vw, 40px); text-shadow: 0 2px 14px rgba(0,0,0,.3); }
.slider__badge {
    display: inline-block; background: #fff; color: var(--primary);
    padding: 4px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; margin-bottom: 10px;
}
.slider__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.92); color: var(--ink);
    border: 0; display: grid; place-items: center; box-shadow: var(--shadow);
}
.slider__nav--prev { inset-inline-start: 14px; }
.slider__nav--next { inset-inline-end: 14px; }
.slider__dots { display: flex; gap: 7px; justify-content: center; margin-top: 14px; }
.slider__dots button {
    width: 26px; height: 4px; border-radius: 999px; border: 0;
    background: var(--line); padding: 0;
}
.slider__dots button.is-active { background: var(--primary); }

/* --------------------------------------------------------- category strip */
.catrail { position: relative; }

/* উপর-নিচে প্যাডিং না দিলে overflow-x কার্ডের শ্যাডো কেটে ফেলে */
.catrail__scroll {
    display: flex; gap: 18px; overflow-x: auto;
    scroll-behavior: smooth;
    padding: 14px 4px 20px;
    margin: -14px -4px -20px;
    scrollbar-width: none;
}
.catrail__scroll::-webkit-scrollbar { display: none; }

.catcard {
    flex: 0 0 auto;
    width: 182px;
    background: #fff;
    border: 1px solid #eef1f6;
    border-radius: 12px;
    padding: 26px 16px 22px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
    transition: transform .2s cubic-bezier(.4, 0, .2, 1),
                box-shadow .2s cubic-bezier(.4, 0, .2, 1),
                border-color .2s;
}
.catcard:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: 0 14px 30px rgba(20, 71, 230, .16), 0 4px 10px rgba(16, 24, 40, .07);
}

.catcard__icon {
    width: 68px; height: 68px; border-radius: 50%;
    background: linear-gradient(145deg, #2a5cf0, var(--primary));
    color: #fff;
    display: grid; place-items: center;
    margin: 0 auto 16px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(20, 71, 230, .28);
    transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s;
}
.catcard:hover .catcard__icon {
    transform: scale(1.06);
    box-shadow: 0 8px 20px rgba(20, 71, 230, .38);
}
.catcard__icon img { width: 100%; height: 100%; object-fit: cover; }

/* নাম ১ বা ২ লাইন যাই হোক, সব কার্ডের উচ্চতা সমান থাকে */
.catcard__name {
    display: flex; align-items: center; justify-content: center;
    min-height: 42px; overflow: hidden;
    font-weight: 500; font-size: 15px; color: var(--ink);
    line-height: 1.4; letter-spacing: -.005em;
    transition: color .16s;
}
.catcard:hover .catcard__name { color: var(--primary); }

/* All Products পেজে যে ক্যাটাগরিটা চলছে সেটা হাইলাইট থাকে */
.catcard.is-active { border-color: var(--primary); box-shadow: 0 8px 22px rgba(20, 71, 230, .18); }
.catcard.is-active .catcard__name { color: var(--primary); font-weight: 600; }

.catrail__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid #eef1f6; background: #fff; color: var(--ink-soft);
    display: grid; place-items: center; z-index: 3;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .12);
    transition: background .16s, color .16s, box-shadow .16s;
}
.catrail__nav:hover {
    background: var(--primary); color: #fff; border-color: var(--primary);
    box-shadow: 0 6px 18px rgba(20, 71, 230, .32);
}
.catrail__nav--prev { inset-inline-start: -14px; }
.catrail__nav--next { inset-inline-end: -14px; }

/* --------------------------------------------------------- product grid */
.pgrid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.pcard {
    position: relative; z-index: 0;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform .2s cubic-bezier(.22,.8,.3,1), box-shadow .2s, border-color .2s;
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/*
   কার্ডের চারপাশে ঘোরানো রঙিন আলো।
   ::before একটা বড় বর্গক্ষেত্র — ভেতরে conic গ্রেডিয়েন্ট, ঘুরতে থাকে।
   ::after সাদা চাদর হয়ে মাঝখানটা ঢেকে দেয়, ফলে শুধু কিনারায় ২px রঙ দেখা যায়।
   overflow:hidden থাকায় ঘূর্ণনটা কার্ডের গোল কোণেই আটকে থাকে।
*/
.pcard::before {
    content: ''; position: absolute; z-index: 0;
    top: 50%; inset-inline-start: 50%;
    width: 190%; aspect-ratio: 1;
    margin: -95% 0 0 -95%;
    background: conic-gradient(from 0deg,
        transparent 0 48%,
        var(--primary) 60%,
        #22d3ee 70%,
        #a855f7 78%,
        transparent 88%);
    opacity: 0; pointer-events: none;
    transition: opacity .35s;
}
.pcard::after {
    content: ''; position: absolute; z-index: 1;
    inset: 2px; border-radius: calc(var(--radius) - 1px);
    background: #fff; pointer-events: none;
    opacity: 0; transition: opacity .35s;
}
/* কার্ডের ভেতরের সব কিছু আলো ও চাদরের উপরে থাকে */
.pcard > * { position: relative; z-index: 2; }

/* হোভার, ট্যাপ (:active) ও কীবোর্ড ফোকাস — তিনটাতেই চালু */
.pcard:hover::before,
.pcard:active::before,
.pcard:focus-within::before {
    opacity: 1;
    animation: pd-spin 2.6s linear infinite;
}
.pcard:hover::after,
.pcard:active::after,
.pcard:focus-within::after { opacity: 1; }
.pcard:hover, .pcard:focus-within { border-color: transparent; }
.pcard__media { position: relative; display: block; background: var(--bg-soft); }
/* সব প্রোডাক্ট ছবি ১৬:৯ — গ্রিডে কার্ডগুলো সমান উচ্চতার থাকে */
.pcard__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* ছবির উপর চোখ আইকন — হোভার/ট্যাপে ফুটে ওঠে */
.pcard__peek {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: rgba(16, 24, 40, .42);
    opacity: 0; pointer-events: none;
    transition: opacity .3s cubic-bezier(.22, .8, .3, 1);
}
.pcard__peek-btn {
    width: 46px; height: 46px; border-radius: 50%;
    background: #fff; color: var(--primary);
    display: grid; place-items: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    transform: scale(.5) translateY(10px);
    transition: transform .34s cubic-bezier(.34, 1.4, .5, 1);
}
/* চারপাশে ছড়িয়ে পড়া রিং */
.pcard__peek-btn::after {
    content: ''; position: absolute; inset: 0;
    border-radius: 50%; border: 2px solid #fff;
    opacity: 0;
}
.pcard:hover .pcard__peek,
.pcard:active .pcard__peek,
.pcard:focus-within .pcard__peek { opacity: 1; }

.pcard:hover .pcard__peek-btn,
.pcard:active .pcard__peek-btn,
.pcard:focus-within .pcard__peek-btn { transform: scale(1) translateY(0); }

.pcard:hover .pcard__peek-btn::after,
.pcard:focus-within .pcard__peek-btn::after {
    animation: pd-peek-ring 1.6s cubic-bezier(.22, .8, .3, 1) infinite;
}
.pcard__off {
    position: absolute; top: 10px; inset-inline-end: 10px;
    background: #ef4444; color: #fff;
    font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}
.pcard__body { padding: 13px 13px 0; flex: 1; }
.pcard__title {
    font-size: 14.5px; font-weight: 500; color: var(--ink); margin: 0 0 7px;
    line-height: 1.45; letter-spacing: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 42px;
}
.pcard__title:hover { color: var(--primary); }
.stars { display: inline-flex; gap: 1px; color: var(--accent); }
.stars .ico { width: 13px; height: 13px; }
.pcard__meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin: 7px 0 11px;
}
.pcard__price { color: var(--primary); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.pcard__price del { color: var(--ink-mute); font-weight: 400; font-size: 13px; margin-inline-start: 5px; }
.pcard__views {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--ink-mute); font-size: 12.5px;
}
/* Buy Now চওড়া ও চ্যাপ্টা, পাশে ছোট চোখ আইকন */
.pcard__actions { display: flex; gap: 7px; padding: 0 13px 13px; }
.pcard__actions form { flex: 1; min-width: 0; }
.pcard__actions .btn {
    width: 100%; padding: 8px 12px; font-size: 14px;
    border-radius: var(--radius-sm); letter-spacing: -.005em;
}
.pcard__actions .btn--icon {
    width: 34px; height: 34px; flex: none; padding: 0;
    align-self: center;
}
.pcard__actions .btn--icon .ico { width: 16px; height: 16px; }

/* ------------------------------------------------- shop (সাইডবার + গ্রিড) */
.shop { display: grid; gap: 24px; grid-template-columns: 258px minmax(0, 1fr); align-items: start; }

/*
   গ্রিড আইটেমের ডিফল্ট min-width: auto — ভেতরের কনটেন্ট চওড়া হলে
   আইটেমটা ট্র্যাক ছাড়িয়ে বেড়ে যায়। ক্যাটাগরি স্ক্রলারে ১৩টা কার্ড
   থাকায় সাইডবার স্ক্রিনের বাইরে চলে যাচ্ছিল, আর body-র overflow-x:hidden
   সেটাকে কেটে ফেলছিল। দুই কলামেই min-width: 0 বাধ্যতামূলক।
*/
.shop__side, .shop__main { min-width: 0; }

/* সাইডবার থাকায় এই গ্রিডে ৫ নয়, ৪ কলাম */
.pgrid--shop { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.shop__box {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px; margin-bottom: 18px; box-shadow: var(--shadow-sm);
}
.shop__box-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 600; color: var(--ink);
    padding-bottom: 11px; margin-bottom: 11px; border-bottom: 1px solid var(--line);
}
.shop__box-title .ico { color: var(--primary); }
.shop__filter .input { font-size: 14px; padding: 8px 11px; }

/* ক্যাটাগরি তালিকা — ডেস্কটপে উল্লম্ব */
.catlist { display: flex; flex-direction: column; gap: 3px; }
.catlist a {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; border-radius: 9px;
    font-size: 14.5px; color: var(--ink-soft);
    transition: background .18s, color .18s, transform .18s;
}
/* বাম পাশে সরু নীল দাগ — হোভার ও সিলেক্টে বেড়ে ওঠে */
.catlist a::before {
    content: ''; position: absolute; inset-inline-start: 0; top: 50%;
    width: 3px; height: 0; border-radius: 3px;
    background: var(--primary); transform: translateY(-50%);
    transition: height .2s cubic-bezier(.4, 0, .2, 1);
}
.catlist a:hover { background: var(--bg-soft); color: var(--primary); }
.catlist a:hover::before { height: 40%; }
.catlist a.is-active {
    background: var(--primary-light); color: var(--primary); font-weight: 600;
}
.catlist a.is-active::before { height: 62%; }

.catlist__icon {
    width: 34px; height: 34px; border-radius: 9px; flex: none;
    background: var(--bg-soft); color: var(--primary);
    display: grid; place-items: center; overflow: hidden;
    transition: background .18s, color .18s, transform .18s, box-shadow .18s;
}
.catlist__icon img { width: 100%; height: 100%; object-fit: cover; }
.catlist a:hover .catlist__icon { transform: scale(1.08); }
.catlist a.is-active .catlist__icon {
    background: linear-gradient(145deg, #2a5cf0, var(--primary));
    color: #fff; box-shadow: 0 4px 10px rgba(20, 71, 230, .3);
}

.catlist__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catlist__count {
    font-size: 11.5px; font-weight: 600; color: var(--ink-mute);
    background: var(--bg-soft); border: 1px solid var(--line);
    min-width: 26px; text-align: center;
    padding: 1px 7px; border-radius: 999px; flex: none;
    transition: background .18s, color .18s, border-color .18s;
}
.catlist a.is-active .catlist__count {
    background: #fff; color: var(--primary); border-color: transparent;
}

/* ---------------------------------------------------------------- buttons */
.btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    padding: 9px 18px; font-size: 14.5px; font-weight: 500;
    background: var(--primary); color: #fff;
    -webkit-tap-highlight-color: transparent;
    transition: background .18s, color .18s, border-color .18s,
                transform .14s cubic-bezier(.22, .8, .3, 1), box-shadow .18s;
}

/* ক্লিক করলে ভেতর থেকে আলোর ঢেউ ছড়ায় */
.btn::after {
    content: ''; position: absolute; inset: 0; margin: auto;
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    opacity: 0; transform: scale(1); pointer-events: none;
}
.btn:active::after { animation: pd-ripple .5s ease-out; }
.btn--outline::after, .btn--ghost::after, .btn--light::after { background: rgba(20, 71, 230, .3); }

.btn:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20, 71, 230, .28); }
/* ক্লিকের মুহূর্তে চেপে বসে ও গাঢ় হয় */
.btn:active { transform: translateY(0) scale(.97); background: #0b2b96; box-shadow: none; }
.btn:focus-visible { outline: 3px solid rgba(20, 71, 230, .35); outline-offset: 2px; }

.btn--outline { background: #fff; color: var(--primary); border-color: var(--primary); }
.btn--outline:hover { background: var(--primary-light); color: var(--primary-dark); }
.btn--outline:active { background: var(--primary); color: #fff; border-color: var(--primary); }

.btn--ghost { background: var(--bg-soft); color: var(--ink); }
.btn--ghost:hover { background: var(--line); box-shadow: 0 4px 12px rgba(16, 24, 40, .12); }
.btn--ghost:active { background: var(--ink-mute); color: #fff; }

.btn--light { background: #fff; color: var(--primary); }
.btn--light:hover { background: #eaefff; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.btn--light:active { background: var(--primary); color: #fff; }

.btn--danger { background: #ef4444; }
.btn--danger:hover { background: #dc2626; box-shadow: 0 6px 16px rgba(239, 68, 68, .32); }
.btn--danger:active { background: #991b1b; }
.btn--sm { padding: 6px 13px; font-size: 13px; }
.btn--lg { padding: 13px 26px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--icon { width: 38px; padding: 0; height: 38px; flex: none; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* ------------------------------------------------------------ video cards */
.vgrid { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vcard {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    transition: transform .18s, box-shadow .18s;
}
.vcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.vcard__media { position: relative; background: #000; }
.vcard__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .95; }
.vcard__play {
    position: absolute; inset: 0; margin: auto;
    width: 52px; height: 52px; border-radius: 50%;
    background: #ff0000; color: #fff; border: 0;
    display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.vcard__body { padding: 12px 14px 16px; }
.vcard__body h4 { font-size: 15px; margin: 0 0 4px; }
.vcard__body p { font-size: 13px; color: var(--ink-soft); margin: 0; }

/* --------------------------------------------------------------- promo cta */
.promo {
    background: linear-gradient(135deg, #1a3fe0, #2f4be8 55%, #3b5bf0);
    color: #fff; border-radius: var(--radius-xl);
    padding: 46px 28px; text-align: center;
    position: relative; overflow: hidden; z-index: 2;
    box-shadow: var(--shadow-lg);
    background-size: cover; background-position: center;
}
.promo h2 { font-size: clamp(22px, 3vw, 34px); font-weight: 700; margin-bottom: 12px; }
.promo p { max-width: 720px; margin: 0 auto 22px; opacity: .95; line-height: 1.85; }
.promo__features { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.promo__features span {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.2);
    padding: 7px 16px; border-radius: 999px; font-size: 13.5px;
}
.promo-wrap { margin-bottom: -70px; position: relative; z-index: 3; }

/* ---------------------------------------------------------------- footer */
.footer { background: var(--footer-bg); color: #cbd5e1; padding: 110px 0 0; }
.footer--flat { padding-top: 60px; }
.footer__grid {
    display: grid; gap: 30px;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    padding-bottom: 34px;
}
.footer__logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer__logo img { height: 42px; width: auto; }
.footer__logo-mark {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--primary); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: 20px; flex: none;
}
.footer__logo h3 { margin: 0; }
.footer h3 { font-size: 18px; font-weight: 600; margin-bottom: 15px; }
.footer__brand { color: var(--footer-brand); font-size: 22px; font-weight: 700; letter-spacing: .01em; }
.footer__c2 h3 { color: var(--footer-h2); }
.footer__c3 h3 { color: var(--footer-h3); }
.footer__c4 h3 { color: var(--footer-h4); }
.footer p, .footer li { font-size: 14px; line-height: 1.95; }
.footer a { transition: color .16s; }
.footer a:hover { color: #fff; }
.footer__social { display: flex; gap: 10px; margin-top: 16px; }
.footer__social a {
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
}
.footer__social .fb { background: #1877f2; }
.footer__social .yt { background: #ff0000; }
.footer__social .wa { background: #25d366; }
.footer__social .in { background: #0a66c2; }
.footer__social .tg { background: #229ed9; }
.footer__info b { color: #fff; display: block; font-size: 15px; }
.footer__bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 16px 0; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; font-size: 13px;
}
.footer__pay img { max-height: 30px; }

/* ------------------------------------------------------- floating widgets */
.floaters { position: fixed; inset-inline: 16px; bottom: 18px; z-index: 70; pointer-events: none; }
.floaters > * { pointer-events: auto; }
/* শুধু আইকনের গোল বাটন */
.wa-float {
    position: fixed; inset-inline-start: 16px; bottom: 18px; z-index: 70;
    display: grid; place-items: center;
    width: 52px; height: 52px; padding: 0;
    background: #25d366; color: #fff;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(37, 211, 102, .42), 0 2px 6px rgba(0, 0, 0, .16);
    transition: transform .2s cubic-bezier(.22, .8, .3, 1), box-shadow .2s;
}
.wa-float:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 10px 26px rgba(37, 211, 102, .5), 0 3px 8px rgba(0, 0, 0, .2);
}
.wa-float:active { transform: scale(.95); }

/* চারপাশে ধীরে ছড়িয়ে পড়া রিং — নজরে পড়ার জন্য */
.wa-float::before {
    content: ''; position: absolute; inset: 0;
    border-radius: 50%; background: #25d366;
    opacity: .5; z-index: -1;
    animation: pd-pulse 2.4s cubic-bezier(.22, .8, .3, 1) infinite;
}
.askai-float {
    position: fixed; inset-inline-end: 16px; bottom: 18px; z-index: 70;
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--ink); padding: 9px 18px;
    border: 1px solid #c7b9ff; border-radius: 999px; font-weight: 600;
    box-shadow: var(--shadow-lg);
}
.askai-float .ico { color: #7c3aed; }

/* ------------------------------------------------------- mobile bottom nav */
.mobilenav {
    display: none;
    position: fixed; inset-inline: 0; bottom: 0; z-index: 65;
    background: #fff; border-top: 1px solid var(--line);
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
}
.mobilenav ul { display: flex; }
.mobilenav li { flex: 1; }
.mobilenav a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 11.5px; color: var(--ink-soft); padding: 4px 0;
}
.mobilenav a.is-active { color: var(--primary); font-weight: 600; }

/* নেভিগেশন বারের কার্টে লাইভ কাউন্ট */
.mobilenav__icon { position: relative; display: inline-flex; }
.mobilenav__badge {
    position: absolute; top: -5px; inset-inline-end: -8px;
    min-width: 17px; height: 17px; padding: 0 4px;
    background: var(--accent); color: #fff;
    border-radius: 999px; font-size: 10.5px; font-weight: 700;
    display: grid; place-items: center; line-height: 1;
}

/* ------------------------------------------------------------- breadcrumb */
.crumbs { font-size: 13.5px; color: var(--ink-soft); padding: 14px 0; }
.crumbs a:hover { color: var(--primary); }
.crumbs span { color: var(--ink-mute); margin: 0 6px; }

/* ---------------------------------------------------------- single product */
/*
   তিনটি অংশ আলাদা গ্রিড আইটেম, তাই মোবাইলে ক্রম বদলানো যায়।
   ডেস্কটপে: বাঁয়ে গ্যালারি ও নিচে ট্যাব, ডানে প্রাইস বক্স (দুই সারি জুড়ে)।
*/
.pdetail {
    display: grid; gap: 26px;
    grid-template-columns: 1.7fr 1fr;
    grid-template-areas:
        "gallery buy"
        "prose   buy";
    align-items: start;
}
.pdetail__gallery { grid-area: gallery; }
.pdetail__buy { grid-area: buy; }
.pdetail > .prose { grid-area: prose; margin-top: 0; }
.pdetail__gallery {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 16px; box-shadow: var(--shadow-sm);
}
/*
   পুরো ছবিটাই দেখাতে হবে — আগে max-height + object-fit:cover থাকায়
   লম্বা স্ক্রিনশটের উপরের অংশটুকু কেটে যাচ্ছিল, বাকিটা লুকিয়ে থাকত।
   এখন ছবি তার নিজের অনুপাতেই বসে, কিছুই কাটা পড়ে না।
*/
/*
   ডিটেইল পেজেও ১৬:৯ ফ্রেম — কিন্তু object-fit: contain, তাই লম্বা
   স্ক্রিনশটও পুরোটা দেখা যায়, কিছুই কাটা পড়ে না।
*/
.pdetail__main {
    border-radius: var(--radius); overflow: hidden;
    background: var(--bg-soft);
    aspect-ratio: 16 / 9;
    display: grid; place-items: center;
}
.pdetail__main img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}

.pdetail__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pdetail__thumbs img {
    width: 74px; height: 56px; object-fit: cover; border-radius: 7px;
    border: 2px solid transparent; cursor: pointer;
    transition: border-color .18s, transform .18s;
}
.pdetail__thumbs img:hover { transform: translateY(-2px); border-color: #c3d1f8; }
.pdetail__thumbs img.is-active { border-color: var(--primary); }
/* বাঁয়ে TUTORIAL, ডানে LIVE DEMO — সমান চওড়া পিল বাটন */
.pdetail__cta { display: flex; gap: 14px; margin-top: 16px; }
.pdetail__cta .btn {
    flex: 1; border-radius: 999px;
    padding: 11px 18px; font-size: 14px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
}
.pdetail__cta .btn:not(.is-off):hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20, 71, 230, .18); }

/* ---------------------------------------- TUTORIAL (লাল) ও LIVE DEMO (সবুজ) */
.btn--tutorial,
.btn--demo {
    color: #fff; border: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.btn--tutorial { background: linear-gradient(135deg, #e11d48, #f43f5e); }
.btn--demo     { background: linear-gradient(135deg, #15803d, #22c55e); }

.btn--tutorial:hover {
    background: linear-gradient(135deg, #be123c, #e11d48);
    box-shadow: 0 8px 20px rgba(225, 29, 72, .42);
}
.btn--demo:hover {
    background: linear-gradient(135deg, #166534, #16a34a);
    box-shadow: 0 8px 20px rgba(22, 163, 74, .42);
}

/* ক্লিকের মুহূর্তে গাঢ় হয়ে চেপে বসে */
.btn--tutorial:active { background: #9f1239; transform: scale(.96); box-shadow: none; }
.btn--demo:active     { background: #14532d; transform: scale(.96); box-shadow: none; }

/* ঢেউটা সাদা — রঙিন ব্যাকগ্রাউন্ডে ভালো দেখায় */
.btn--tutorial::after,
.btn--demo::after { background: rgba(255, 255, 255, .5); }

.btn--tutorial:focus-visible { outline: 3px solid rgba(225, 29, 72, .4); outline-offset: 2px; }
.btn--demo:focus-visible     { outline: 3px solid rgba(22, 163, 74, .4); outline-offset: 2px; }

/* লিংক এখনো যোগ করা হয়নি — জায়গা ধরে রাখে কিন্তু ক্লিক করা যায় না */
.pdetail__cta .is-off {
    background: var(--bg-soft); color: var(--ink-mute);
    border: 1px solid var(--line); text-shadow: none;
    cursor: not-allowed; box-shadow: none;
}
.pdetail__cta .is-off:hover {
    background: var(--bg-soft); box-shadow: none; transform: none;
}
.pdetail__cta .is-off:active { transform: none; background: var(--bg-soft); }
.pdetail__cta .is-off::after { display: none; }

.pbuy {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 22px; box-shadow: var(--shadow-sm); position: sticky; top: 84px;
}
.pbuy__price { font-size: 17px; font-weight: 600; margin-bottom: 12px; }
.pbuy__price b { color: var(--primary); font-size: 30px; }
.pbuy__price del { color: var(--ink-mute); font-size: 16px; font-weight: 500; margin-inline-start: 8px; }
.pbuy hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.pbuy h1 { font-size: 20px; margin-bottom: 14px; }
.pbuy__features li {
    display: flex; gap: 9px; align-items: flex-start;
    font-size: 14.5px; margin-bottom: 8px; color: var(--ink-soft);
}
.pbuy__features .ico { color: var(--primary); margin-top: 3px; }
.pbuy__timer-label { color: var(--primary); font-weight: 600; margin: 16px 0 8px; }
.countdown { display: flex; gap: 10px; }
.countdown div {
    flex: 1; background: var(--primary); color: #fff;
    border-radius: 9px; padding: 10px 4px; text-align: center;
}
.countdown b { display: block; font-size: 24px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.countdown small { font-size: 11.5px; opacity: .9; }
.pbuy .btn { margin-top: 12px; border-radius: 8px; }
.pshare { display: flex; align-items: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.pshare a {
    width: 34px; height: 34px; border-radius: 7px; color: #fff;
    display: grid; place-items: center;
}

.prose {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 26px; margin-top: 26px; box-shadow: var(--shadow-sm);
}
.prose h2, .prose h3 { color: var(--ink); }
.prose img { border-radius: var(--radius); margin: 14px 0; }
.prose ul { list-style: disc; padding-inline-start: 22px; margin-bottom: 1rem; }
.prose ol { padding-inline-start: 22px; margin-bottom: 1rem; }

.tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--line); margin-bottom: 18px; flex-wrap: wrap; }
.tabs button {
    background: none; border: 0; padding: 10px 16px; font-size: 15px; font-weight: 600;
    color: var(--ink-soft); border-bottom: 2px solid transparent;
}
.tabs button.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.tabpane { display: none; }
.tabpane.is-active { display: block; }

/* ------------------------------------------------------------------ forms */
.card {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.input, .select, .textarea {
    width: 100%; font-family: inherit; font-size: 15px;
    padding: 11px 14px; border: 1px solid var(--line); border-radius: 9px;
    background: #fff; color: var(--ink);
}
.input:focus, .select:focus, .textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(20,71,230,.12);
}
.textarea { min-height: 110px; resize: vertical; }
.input-icon { position: relative; }
.input-icon .ico { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-mute); }
.input-icon .input { padding-inline-start: 42px; }
.checkline { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.help { font-size: 12.5px; color: var(--ink-mute); margin-top: 5px; }
.error { color: #dc2626; font-size: 13px; margin-top: 5px; }

/* ------------------------------------------------------------------ auth */
/*
   উপরের অংশ হেডারের রঙে, নিচের অংশ সাদা — কার্ডটা ঠিক সংযোগস্থলে ভাসে।
   ৫২% পর্যন্ত রঙ, তারপর সাদা (কোনো মিশ্রণ ছাড়া ধারালো ভাগ)।
*/
.authwrap {
    padding: clamp(28px, 6vw, 64px) 0;
    background: linear-gradient(
        to bottom,
        var(--header-bg, var(--primary)) 0,
        var(--header-bg, var(--primary)) 52%,
        #fff 52%,
        #fff 100%
    );
    min-height: calc(100vh - var(--announce-h, 0px) - 64px);
    display: grid; align-items: center;
    position: relative; overflow: hidden;
}
/* গভীরতার জন্য হালকা ওভারলে */
.authwrap > * { position: relative; z-index: 2; }

/* ধীরে ভাসতে থাকা দুটো আলোকবৃত্ত */
.authwrap::before,
.authwrap::after {
    content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 1;
    background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 68%);
}
/* দুটোই উপরের রঙিন অংশে — সাদা অংশে সাদা আভা দেখা যেত না */
.authwrap::before {
    width: 380px; height: 380px; top: -130px; inset-inline-start: -110px;
    animation: pd-float 13s ease-in-out infinite;
}
.authwrap::after {
    width: 300px; height: 300px; top: -60px; inset-inline-end: -100px;
    animation: pd-float 16s ease-in-out infinite reverse;
}

/*
   সব মাপ clamp() দিয়ে — ৩২০px ফোন থেকে বড় মনিটর পর্যন্ত ধাপে ধাপে
   বাড়ে/কমে, কোনো ব্রেকপয়েন্টে হঠাৎ লাফ দেয় না।
*/
.authcard {
    position: relative; z-index: 2;
    width: 100%; max-width: clamp(300px, 92vw, 420px); margin: 0 auto;
    background: #fff; border: 0;
    border-radius: clamp(13px, 3vw, 18px);
    padding: clamp(20px, 5vw, 32px) clamp(16px, 5vw, 30px);
    /*
       তিন স্তরের ছায়া — রঙিন ও সাদা দুই অংশেই কার্ডটা আলাদা হয়ে ভাসে।
       নিচে সাদা ব্যাকগ্রাউন্ড বলে ছায়া না থাকলে কার্ডের কিনারা মিলিয়ে যেত।
    */
    box-shadow:
        0 28px 60px -18px rgba(16, 24, 40, .32),
        0 12px 28px -12px rgba(16, 24, 40, .18),
        0 2px 6px rgba(16, 24, 40, .07);
    animation: pd-zoom-in .45s cubic-bezier(.22, .8, .3, 1) both;
}

/* ঘর ও বাটনের ফাঁক — ছোট স্ক্রিনে টাইট, বড়তে আরামদায়ক */
.authcard .field { margin-bottom: clamp(10px, 2.6vw, 16px); }
.authcard .input { padding: clamp(9px, 2.4vw, 11px) clamp(11px, 3vw, 14px); }
.authcard .input-icon .input { padding-inline-start: clamp(36px, 9vw, 42px); }
.authcard .input-icon .ico { inset-inline-start: clamp(11px, 3vw, 13px); }
.authcard .checkline { font-size: clamp(12.5px, 3.2vw, 14px); }
.authcard .btn--block { padding: clamp(10px, 2.6vw, 12px); }
.auth-alt { margin: clamp(10px, 2.6vw, 14px) 0 clamp(8px, 2vw, 10px); font-size: clamp(12px, 3vw, 13.5px); }
.btn-google { padding: clamp(9px, 2.4vw, 11px); font-size: clamp(13.5px, 3.4vw, 15px); }

/* ইনপুটগুলো একটার পর একটা ফুটে ওঠে */
.authcard .field { animation: pd-fade-up .42s cubic-bezier(.22,.8,.3,1) both; }
.authcard .field:nth-of-type(1) { animation-delay: .1s; }
.authcard .field:nth-of-type(2) { animation-delay: .16s; }
.authcard .field:nth-of-type(3) { animation-delay: .22s; }
.authcard .field:nth-of-type(4) { animation-delay: .28s; }
.authcard .field:nth-of-type(5) { animation-delay: .34s; }
.authcard .btn--block { animation: pd-fade-up .42s cubic-bezier(.22,.8,.3,1) .4s both; }
.authcard .input { transition: border-color .18s, box-shadow .18s, background .18s; }

/* কার্ডের উপরে লোগো */
.authcard__logo {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    margin-bottom: clamp(12px, 3vw, 18px);
    font-size: clamp(17px, 4.4vw, 21px); font-weight: 600; color: var(--ink);
}
.authcard__logo img {
    height: clamp(32px, 8vw, 42px); width: auto;
    max-width: clamp(130px, 45vw, 190px); object-fit: contain;
}
.authcard__mark {
    width: clamp(30px, 7.5vw, 37px); height: clamp(30px, 7.5vw, 37px);
    border-radius: 10px; flex: none;
    background: var(--primary); color: #fff;
    display: grid; place-items: center;
    font-weight: 700; font-size: clamp(17px, 4.4vw, 21px);
}
.authcard h1 {
    text-align: center; font-weight: 700; color: #14357f;
    font-size: clamp(20px, 5.4vw, 26px); margin-bottom: 3px;
}
.authcard__sub {
    text-align: center; color: var(--ink-soft);
    font-size: clamp(11.5px, 3vw, 13.5px);
    margin-bottom: clamp(14px, 3.5vw, 22px);
}
.authcard .input { background: #eef2fb; border-color: #e3e9f6; }
.authcard .input:focus { background: #fff; }
.authcard .btn--block {
    padding: 12px; border-radius: var(--radius-sm);
    letter-spacing: .05em; text-transform: uppercase; font-weight: 600;
    background: linear-gradient(90deg, #1a4fe4, #3b7bf6);
}
.authcard .btn--block:hover { background: linear-gradient(90deg, #143fc4, #2f6ce8); }
.auth-alt { text-align: center; font-size: 13.5px; color: var(--ink-soft); margin: 14px 0 10px; }
.btn-google {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 9px;
    background: #fff; font-weight: 500; font-size: 15px;
}
.btn-google:hover { background: var(--bg-soft); }

/* ----------------------------------------------------------------- alerts */
.alert {
    border-radius: 9px; padding: 12px 16px; margin-bottom: 16px;
    font-size: 14.5px; display: flex; gap: 10px; align-items: flex-start;
}
.alert--success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.alert--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert--info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* ==================================================== চেকআউট পেজ */

/* ধাপ নির্দেশক */
.steps {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin: 0 0 22px; padding: 0; list-style: none;
    font-size: 13.5px; color: var(--ink-mute);
}
.steps li { display: flex; align-items: center; gap: 8px; }
.steps li + li::before {
    content: ''; width: 26px; height: 2px; border-radius: 2px;
    background: var(--line); margin-inline-end: 6px;
}
.steps span {
    width: 25px; height: 25px; border-radius: 50%; flex: none;
    background: var(--line); color: var(--ink-soft);
    display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
}
.steps .is-done { color: #16a34a; }
.steps .is-done span { background: #dcfce7; color: #16a34a; }
.steps .is-current { color: var(--primary); font-weight: 600; }
.steps .is-current span {
    background: var(--primary); color: #fff;
    box-shadow: 0 0 0 4px rgba(20, 71, 230, .16);
}

/* ========================================================= রিওয়ার্ড কার্ড */
.rewards {
    display: grid; gap: clamp(13px, 2.4vw, 18px);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.reward {
    position: relative; overflow: hidden; isolation: isolate;
    background: #fff; border: 0;
    border-radius: clamp(14px, 2.4vw, 18px);
    padding: clamp(16px, 3vw, 22px);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .06),
        0 8px 22px -10px rgba(16, 24, 40, .16);
    transition: transform .26s cubic-bezier(.22, .8, .3, 1), box-shadow .26s;
}

/* উপরে প্রোগ্রামের রঙের পটি */
.reward::after {
    content: ''; position: absolute; inset-inline: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, var(--reward-color, var(--primary)), transparent 92%);
}
/* কোণে রঙের হালকা আভা */
.reward__glow {
    position: absolute; z-index: -1; pointer-events: none;
    width: 190px; height: 190px; border-radius: 50%;
    top: -80px; inset-inline-end: -60px;
    background: var(--reward-color, var(--primary));
    opacity: .09; filter: blur(6px);
    transition: opacity .3s, transform .5s cubic-bezier(.22, .8, .3, 1);
}
.reward:hover {
    transform: translateY(-5px);
    box-shadow:
        0 2px 4px rgba(16, 24, 40, .06),
        0 20px 40px -14px rgba(16, 24, 40, .28);
}
.reward:hover .reward__glow { opacity: .16; transform: scale(1.18); }

/* লক্ষ্য পূর্ণ — রঙিন বর্ডার ও আলোর ঝলক */
.reward.is-ready {
    box-shadow:
        0 0 0 2px var(--reward-color, var(--primary)),
        0 14px 34px -12px rgba(16, 24, 40, .3);
}
.reward.is-ready::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, .6) 50%, transparent 60%);
    transform: translateX(-100%);
    animation: pd-sheen 3.6s ease-in-out infinite;
}
.reward.is-ready .reward__glow { opacity: .2; }

/* ------------------------------------------------------------- হেডার */
.reward__head { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.reward__icon {
    position: relative; flex: none;
    width: clamp(42px, 9vw, 50px); height: clamp(42px, 9vw, 50px);
    border-radius: 14px;
    background: var(--reward-color, var(--primary)); color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 6px 16px -4px var(--reward-color, var(--primary));
    transition: transform .3s cubic-bezier(.34, 1.4, .5, 1);
}
.reward:hover .reward__icon { transform: rotate(-8deg) scale(1.08); }
/* প্রস্তুত হলে আইকনের চারপাশে রিং ছড়ায় */
.reward.is-ready .reward__icon::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    border: 2px solid var(--reward-color, var(--primary));
    animation: pd-peek-ring 2s cubic-bezier(.22, .8, .3, 1) infinite;
}

.reward__title { flex: 1; min-width: 0; }
.reward__title b {
    display: block; font-size: clamp(14.5px, 3.4vw, 16px);
    line-height: 1.32; letter-spacing: -.01em;
}
.reward__title small { color: var(--ink-mute); font-size: clamp(11.5px, 2.8vw, 12.5px); }
.reward__desc {
    font-size: clamp(12.5px, 3vw, 13.5px); color: var(--ink-soft);
    margin: 0 0 14px; line-height: 1.75;
}

/* ------------------------------------------------------ অগ্রগতির বার */
.reward__bar {
    position: relative; height: 10px; border-radius: 999px;
    background: #eef1f6; overflow: hidden; margin-bottom: 9px;
}
.reward__fill {
    display: block; height: 100%; border-radius: 999px; position: relative;
    background: linear-gradient(90deg,
        var(--reward-color, var(--primary)),
        color-mix(in srgb, var(--reward-color, #1447e6) 55%, #fff));
    box-shadow: 0 1px 6px -1px var(--reward-color, var(--primary));
    /* পেজ খুললে বারটা শূন্য থেকে ভরে ওঠে */
    animation: pd-fill 1.1s cubic-bezier(.22, .8, .3, 1) both;
    transition: width .6s cubic-bezier(.22, .8, .3, 1);
}
/* ভেতরে চলমান ডোরা */
.reward__fill::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: translateX(-100%);
    animation: pd-sheen 2.6s ease-in-out infinite;
}

.reward__meta {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; font-size: clamp(11.5px, 2.8vw, 12.5px);
    color: var(--ink-soft); margin-bottom: 13px;
}
.reward__meta b { color: var(--reward-color, var(--primary)); font-size: clamp(14px, 3.4vw, 15.5px); }
.reward__days {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--bg-soft); border-radius: 999px; padding: 2px 9px;
}

/* -------------------------------------------------------- পুরস্কারের ঘর */
.reward__prize {
    display: flex; align-items: flex-start; gap: 9px;
    background: color-mix(in srgb, var(--reward-color, #1447e6) 7%, #fff);
    border: 1px solid color-mix(in srgb, var(--reward-color, #1447e6) 18%, #fff);
    border-radius: 11px; padding: 11px 13px;
    font-size: clamp(12.5px, 3vw, 13.5px); color: var(--ink-soft); line-height: 1.6;
}
.reward__prize .ico { color: var(--reward-color, var(--primary)); flex: none; margin-top: 2px; }
.reward__prize small { color: var(--ink-mute); }

.reward__claim { margin-top: 13px; position: relative; z-index: 2; }
.reward__claim .select { margin-bottom: 0; font-size: 14px; }
.reward__claim .btn {
    background: var(--reward-color, var(--primary));
    box-shadow: 0 6px 16px -5px var(--reward-color, var(--primary));
}
.reward__claim .btn:hover { filter: brightness(.92); }
.reward__claim .btn:active { filter: brightness(.82); }

.reward__hint {
    margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--line);
    font-size: clamp(12px, 2.9vw, 13px); color: var(--ink-mute); text-align: center;
}
.reward__hint b { color: var(--reward-color, var(--primary)); font-size: clamp(14px, 3.4vw, 15.5px); }

.checkout-card { margin-bottom: 18px; animation: pd-fade-up .45s cubic-bezier(.22,.8,.3,1) both; }
.checkout-card:nth-of-type(2) { animation-delay: .07s; }
.checkout-card__title {
    display: flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 600; margin-bottom: 16px;
    padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.checkout-card__title .ico { color: var(--primary); }
.a-grid-2 { display: grid; gap: 0 16px; grid-template-columns: 1fr 1fr; }

/* লগইন করা ইউজারের তথ্য */
.whoami {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-soft); border: 1px solid var(--line);
    border-radius: 11px; padding: 12px 14px;
}
.whoami img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.whoami__text { flex: 1; min-width: 0; }
.whoami__text b { display: block; font-size: 15px; line-height: 1.3; }
.whoami__text small { color: var(--ink-mute); font-size: 12.5px; word-break: break-all; }
.billing { margin-top: 16px; animation: pd-fade-up .3s cubic-bezier(.22,.8,.3,1) both; }

/* পেমেন্ট মেথডের আইকন গ্রিড */
.paygrid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}
.paytile {
    position: relative; cursor: pointer; text-align: center;
    border: 2px solid var(--line); border-radius: 13px; padding: 14px 10px 12px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.paytile input { position: absolute; opacity: 0; pointer-events: none; }
.paytile img, .paytile__fallback {
    width: 52px; height: 52px; border-radius: 14px;
    margin: 0 auto 9px; display: block; object-fit: contain;
}
.paytile__fallback {
    display: grid; place-items: center;
    background: var(--primary-light); color: var(--primary);
}
.paytile__name { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.paytile__tag {
    display: inline-block; margin-top: 5px;
    font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
    background: #fef3c7; color: #92400e;
}
.paytile__tag.is-auto { background: #dcfce7; color: #166534; }
.paytile__check {
    position: absolute; top: 8px; inset-inline-end: 8px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: grid; place-items: center;
    opacity: 0; transform: scale(.5);
    transition: opacity .2s, transform .2s cubic-bezier(.22,.8,.3,1);
}
.paytile:hover { border-color: #c3d1f8; transform: translateY(-2px); }
.paytile.is-picked {
    border-color: var(--primary); background: #fbfcff;
    box-shadow: 0 6px 18px rgba(20, 71, 230, .16);
}
.paytile.is-picked .paytile__check { opacity: 1; transform: scale(1); }

/* বেছে নেওয়া মেথডের প্যানেল */
.paypanel {
    margin-top: 18px; padding-top: 18px;
    border-top: 1px dashed var(--line);
    animation: pd-fade-up .32s cubic-bezier(.22,.8,.3,1) both;
}
.payinfo {
    background: linear-gradient(135deg, #f4f7ff, #eef3ff);
    border: 1px solid #dbe4fb; border-radius: 12px;
    padding: 4px 16px; margin-bottom: 14px;
}
.payinfo__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; padding: 12px 0;
}
.payinfo__row + .payinfo__row { border-top: 1px dashed #d3ddf7; }
.payinfo__label { font-size: 13.5px; color: var(--ink-soft); }
.payinfo__value { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.payinfo__value b { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.payinfo__row--amount .payinfo__value b { font-size: 26px; color: var(--primary); }
.payinfo__cur { font-size: 20px; font-weight: 700; color: var(--primary); margin-inline-start: -4px; }

.copybtn {
    display: inline-flex; align-items: center; gap: 5px;
    background: #fff; border: 1px solid var(--line); border-radius: 7px;
    padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--ink-soft);
    font-family: inherit; transition: background .15s, color .15s, border-color .15s;
}
.copybtn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.copybtn.is-done { background: #dcfce7; border-color: #a7f3d0; color: #166534; }

.paysteps {
    white-space: pre-line; font-size: 13.5px; line-height: 1.9;
    color: var(--ink-soft); background: var(--bg-soft);
    border-radius: 10px; padding: 12px 14px; margin-bottom: 16px;
}

.payauto {
    display: flex; gap: 14px; align-items: flex-start;
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: 16px;
}
.payauto > .ico { color: #16a34a; flex: none; margin-top: 2px; }
.payauto b { display: block; font-size: 15px; margin-bottom: 4px; }
.payauto p { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 9px; }

/* অর্ডার সারাংশ */
.ordersum { position: sticky; top: 84px; }
.ordersum__item {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 0; border-bottom: 1px solid var(--line);
}
.ordersum__item img {
    width: 62px; aspect-ratio: 16 / 9; border-radius: 7px; object-fit: cover; flex: none;
}
.ordersum__icon {
    width: 62px; aspect-ratio: 16 / 9; border-radius: 7px; flex: none;
    background: var(--primary-light); color: var(--primary);
    display: grid; place-items: center;
}
.ordersum__name { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; }
.ordersum__name small { display: block; color: var(--ink-mute); font-size: 12px; }
.ordersum__price { white-space: nowrap; font-weight: 600; font-size: 14.5px; }
.ordersum__note {
    display: flex; align-items: flex-start; gap: 7px;
    font-size: 12.5px; color: var(--ink-mute); margin: 14px 0 0;
}
.ordersum__note .ico { flex: none; margin-top: 2px; }

/* ------------------------------------------------------------ cart/table */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th, .table td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--line); }
.table th { background: var(--bg-soft); font-weight: 600; font-size: 13.5px; color: var(--ink-soft); white-space: nowrap; }
.table tbody tr:hover { background: #fafcff; }
.cart-thumb { width: 72px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.badge--success { background: #dcfce7; color: #166534; }
.badge--warning { background: #fef3c7; color: #92400e; }
.badge--danger { background: #fee2e2; color: #991b1b; }
.badge--info { background: #dbeafe; color: #1e40af; }
.badge--muted { background: var(--bg-soft); color: var(--ink-soft); }

.summary { display: grid; gap: 24px; grid-template-columns: 1.7fr 1fr; align-items: start; }
.summary__row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 15px; }
.summary__row--total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; font-size: 19px; font-weight: 700; color: var(--primary); }

/* --------------------------------------------------------------- account */
.acct { display: grid; gap: 24px; grid-template-columns: 250px 1fr; align-items: start; padding: 26px 0; }
.acct__nav { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.acct__nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.acct__nav a:last-child { border-bottom: 0; }
.acct__nav a.is-active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.acct__nav a:hover { background: var(--bg-soft); }

/* ------------------------------------------------- প্রোফাইল সেকশন */
.acct__profile {
    padding: 22px 18px 18px; text-align: center;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
}
.acct__avatar {
    position: relative; width: 74px; height: 74px; margin: 0 auto 10px;
}
.acct__avatar img {
    width: 74px; height: 74px; border-radius: 50%; object-fit: cover;
    border: 3px solid rgba(255, 255, 255, .5);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}
.acct__avatar .badge-dot {
    position: absolute; inset-inline-end: 3px; bottom: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #22c55e; border: 2.5px solid #fff;
}
.acct__profile b { display: block; font-size: 16px; line-height: 1.3; }
.acct__profile small { display: block; font-size: 12.5px; opacity: .85; word-break: break-all; margin-top: 2px; }
.acct__chip {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 9px;
    background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .28);
    padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 500;
}

/* প্রোফাইল ফর্মের অ্যাভাটার আপলোড */
.avatar-edit { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.avatar-edit__pic {
    width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex: none;
    border: 3px solid var(--line);
}
.avatar-edit__fields { flex: 1; min-width: 220px; }

/* ------------------------------------------------- গ্রেডিয়েন্ট স্ট্যাট কার্ড */
.stats { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); margin-bottom: 20px; }

.stat {
    position: relative; overflow: hidden;
    border-radius: 14px; padding: 18px 18px 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    color: #fff; border: 0;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .12);
    transition: transform .2s cubic-bezier(.22, .8, .3, 1), box-shadow .2s;
}
.stat:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16, 24, 40, .2); }

/* কোণে হালকা বৃত্তের নকশা */
.stat::before,
.stat::after {
    content: ''; position: absolute; border-radius: 50%;
    background: rgba(255, 255, 255, .13); pointer-events: none;
}
.stat::before { width: 130px; height: 130px; inset-inline-end: -34px; bottom: -52px; }
.stat::after  { width: 86px;  height: 86px;  inset-inline-end: 28px;  top: -40px; }

.stat__text { position: relative; z-index: 1; min-width: 0; }
.stat b { display: block; font-size: 27px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.stat span { display: block; font-size: 13px; opacity: .93; margin-top: 3px; }

.stat__icon {
    position: relative; z-index: 1; flex: none;
    width: 46px; height: 46px; border-radius: 12px;
    background: rgba(255, 255, 255, .24);
    display: grid; place-items: center; color: #fff;
}

/* রঙের সেট — অ্যাডমিনের চেয়ে আলাদা, ইউজার ড্যাশবোর্ডের নিজস্ব */
.stat--indigo { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.stat--teal   { background: linear-gradient(135deg, #0d9488, #14b8a6); }
.stat--amber  { background: linear-gradient(135deg, #d97706, #f59e0b); }
.stat--blue   { background: linear-gradient(135deg, #1447e6, #3b82f6); }
.stat--rose   { background: linear-gradient(135deg, #be123c, #f43f5e); }
.stat--green  { background: linear-gradient(135deg, #15803d, #22c55e); }
.stat--cyan   { background: linear-gradient(135deg, #0e7490, #06b6d4); }
.stat--violet { background: linear-gradient(135deg, #6d28d9, #a855f7); }

/* ------------------------------------------------------- দ্রুত অ্যাকশন */
.quickbar {
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 16px 18px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.quickbar__title {
    display: flex; align-items: center; gap: 7px;
    font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 13px;
}
.quickbar__title .ico { color: var(--accent); }
.quickbar__links { display: flex; flex-wrap: wrap; gap: 9px; }
.quickbar__links a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 8px;
    font-size: 13.5px; font-weight: 600; color: #fff;
    transition: transform .16s, box-shadow .16s, opacity .16s;
}
.quickbar__links a:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16, 24, 40, .2); }
.qa-blue   { background: linear-gradient(135deg, #1447e6, #3b82f6); }
.qa-green  { background: linear-gradient(135deg, #15803d, #22c55e); }
.qa-rose   { background: linear-gradient(135deg, #be123c, #f43f5e); }
.qa-violet { background: linear-gradient(135deg, #6d28d9, #a855f7); }
.qa-amber  { background: linear-gradient(135deg, #d97706, #f59e0b); }

/* ------------------------------------------------------------- pagination */
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.pager a, .pager span {
    min-width: 36px; height: 36px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 8px; font-size: 14px; background: #fff;
}
.pager .is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pager .is-disabled { opacity: .45; }

/* ------------------------------------------------------------------ misc */
.empty { text-align: center; padding: 60px 20px; color: var(--ink-soft); }
.empty .ico { color: var(--ink-mute); margin-bottom: 12px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.chip {
    padding: 7px 15px; border: 1px solid var(--line); border-radius: 999px;
    font-size: 13.5px; background: #fff;
}
.chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.plans { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.plan { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; text-align: center; position: relative; }
.plan--popular { border-color: var(--primary); box-shadow: var(--shadow); }
.plan__tag { position: absolute; top: -12px; inset-inline: 0; margin: auto; width: fit-content; background: var(--primary); color: #fff; font-size: 12px; padding: 3px 14px; border-radius: 999px; }
.plan__price { font-size: 34px; font-weight: 800; color: var(--primary); margin: 10px 0; }
.plan__price del { font-size: 17px; color: var(--ink-mute); font-weight: 500; }
.plan ul { text-align: start; margin: 18px 0; }
.plan li { display: flex; gap: 8px; font-size: 14.5px; margin-bottom: 8px; color: var(--ink-soft); }
.plan li .ico { color: #16a34a; margin-top: 3px; }

/* ============================================ মোবাইলে সব দুই-কলাম → এক কলাম */
/*
   ব্লেড ফাইলে অনেক জায়গায় ইনলাইন grid-template-columns দেওয়া আছে
   (চেকআউট, কন্টাক্ট, প্রোফাইল, অর্ডার ডিটেইল)। ছোট স্ক্রিনে সেগুলো
   জোর করে এক কলামে নামানো হয়, নইলে ইনপুট চেপে গিয়ে পড়া যায় না।
*/
@media (max-width: 640px) {
    [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

    /* দামের কম/বেশি ছোট ইনপুট — পাশাপাশিই থাকে, শুধু চাপ কমানো হয় */
    .shop__filter > div[style*="display:flex"] { gap: 8px; }
    .shop__filter .input { min-width: 0; }

    /* কার্ড ও প্যানেলের প্যাডিং কমে */
    .card { padding: 18px 16px; }
    .prose { padding: 18px 16px; }
    .pbuy { padding: 18px 16px; }
    .pdetail__gallery { padding: 12px; }
    .authcard { padding: 26px 20px 24px; }

    /* TUTORIAL ও LIVE DEMO মোবাইলেও পাশাপাশিই থাকে */
    .pdetail__cta { flex-direction: row; gap: 9px; }
    .pdetail__cta .btn {
        padding: 10px 8px; font-size: 12px; letter-spacing: .02em;
        min-width: 0; gap: 5px;
    }
    .pdetail__cta .btn .ico { width: 14px; height: 14px; }
    .countdown { gap: 8px; }
    .countdown div { padding: 9px 3px; }
    .countdown b { font-size: 21px; }
    .countdown small { font-size: 10.5px; }
    .pshare { justify-content: center; }

    /* ট্যাব বেশি হলে পাশে স্ক্রল করে, ভেঙে যায় না */
    .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
    .tabs button { white-space: nowrap; padding: 10px 13px; font-size: 14px; }

    /* সেকশন হেডিং ও ফিল্টার */
    .section__head { flex-direction: column; align-items: stretch; gap: 10px; }
    .section__head .btn { align-self: flex-start; }
    /* সর্ট ড্রপডাউন পুরো প্রস্থে — সরু বাক্স দেখতে বেমানান লাগে */
    .section__head form { width: 100%; }
    .section__head form .select { width: 100% !important; }
    .section__title { font-size: 19px; }
    .filters { gap: 7px; }
    .chip { padding: 6px 13px; font-size: 12.5px; }

    /* সারাংশ বক্স */
    .summary__row { font-size: 14px; }
    .summary__row--total { font-size: 17px; }

    /* --------------------------------------------------- চেকআউট মোবাইল */
    .a-grid-2 { grid-template-columns: 1fr !important; }
    .steps { font-size: 12px; gap: 4px; }
    .steps li + li::before { width: 16px; margin-inline-end: 4px; }
    .steps span { width: 22px; height: 22px; font-size: 11.5px; }

    .checkout-card { padding: 16px 14px; }
    .checkout-card__title { font-size: 15px; margin-bottom: 14px; }

    /* ----------------------------------------- লগইন/রেজিস্ট্রেশন মোবাইলে */
    /* মাপগুলো clamp() থেকেই আসে — এখানে শুধু লেআউটের ব্যাপারগুলো */
    .authwrap {
        padding: 18px 0 26px;
        /* নিচের নেভিগেশন বার থাকায় পুরো ভিউপোর্ট নেওয়া যাবে না */
        min-height: auto;
        align-items: start;
    }
    .authcard .input { font-size: 15px; }   /* ১৬px-এর নিচে iOS জুম করে না — ১৫ নিরাপদ */
    .authwrap::before { width: 230px; height: 230px; top: -85px; inset-inline-start: -75px; }
    .authwrap::after { width: 190px; height: 190px; bottom: -75px; inset-inline-end: -55px; }

    .whoami { padding: 11px 12px; gap: 10px; }
    .whoami img { width: 38px; height: 38px; }
    .whoami__text b { font-size: 14px; }

    /* পেমেন্ট টাইল — ছোট স্ক্রিনে ৩টা পাশাপাশি */
    .paygrid { grid-template-columns: repeat(3, 1fr); gap: 9px; }
    .paytile { padding: 11px 6px 10px; border-radius: 11px; }
    .paytile img, .paytile__fallback { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 7px; }
    .paytile__name { font-size: 12px; }
    .paytile__tag { font-size: 9.5px; padding: 1px 6px; }

    .payinfo { padding: 2px 13px; }
    .payinfo__row { padding: 10px 0; }
    .payinfo__row--amount .payinfo__value b { font-size: 22px; }
    .paysteps { font-size: 13px; padding: 11px 12px; }
    .payauto { padding: 13px; gap: 11px; }

    .ordersum__item img, .ordersum__icon { width: 52px; aspect-ratio: 16 / 9; height: auto; }
    .ordersum__name { font-size: 13.5px; }
}

@media (max-width: 560px) {
    /*
       অফার বার সবসময় এক লাইনে রাখাই লক্ষ্য। জায়গা কমে এলে সেকেন্ড ও
       বার্তার টেক্সট বাদ দিয়ে দাম-কাউন্টডাউন-বাটন টিকিয়ে রাখা হয়।
    */
    .announce__text { display: none; }
    .announce__msg { gap: 0; }
    .announce__inner { gap: 7px; }
}

@media (max-width: 400px) {
    /* খুব সরু ফোনে ২টা টাইল পাশাপাশি */
    .paygrid { grid-template-columns: repeat(2, 1fr); }

    /* সেকেন্ডের ঘরটাও বাদ — বাকিটা তবু এক লাইনে ধরে যায় */
    .announce__timer b:nth-of-type(4),
    .announce__timer i:nth-of-type(4) { display: none; }
    .announce__emoji { display: none; }
    .announce__price { font-size: 11.5px; }
    .announce__btn { padding: 3px 9px; font-size: 10.5px; }
}

/* ==================================================== মোবাইল টেবিল → কার্ড */
/*
   ছোট স্ক্রিনে টেবিল পাশে স্ক্রল না করে প্রতিটি সারি একটা কার্ড হয়ে যায়।
   প্রতিটি সেলের সামনে তার কলামের নাম বসে — <td data-label="..."> থেকে।
*/
@media (max-width: 640px) {
    .table-wrap { overflow: visible; }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table thead { display: none; }

    .table tr {
        background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
        padding: 12px 14px; margin-bottom: 12px; box-shadow: var(--shadow-sm);
    }
    .table tr:last-child { margin-bottom: 0; }
    .table tbody tr:hover { background: #fff; }

    .table td {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 7px 0; border: 0; border-bottom: 1px dashed var(--line);
        text-align: end;
    }
    .table td:last-child { border-bottom: 0; padding-bottom: 0; }
    .table td:first-child { padding-top: 0; }

    .table td::before {
        content: attr(data-label);
        font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
        text-align: start; flex: none;
    }
    /* লেবেল না থাকলে (যেমন ছবি বা বাটনের ঘর) পুরো জায়গা নেয় */
    .table td:not([data-label]) { justify-content: center; }
    .table td .btn { width: 100%; }
    .table td form { width: 100%; }
    .cart-thumb { width: 100%; max-width: 160px; height: auto; aspect-ratio: 16 / 9; }
}

/* ================================================================ এনিমেশন */

@keyframes pd-fade-up   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes pd-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes pd-zoom-in   { from { opacity: 0; transform: scale(.94); }      to { opacity: 1; transform: none; } }
@keyframes pd-slide-in  { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes pd-shimmer   { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
@keyframes pd-nav-item  { to { opacity: 1; transform: none; } }
@keyframes pd-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(24px, 26px) scale(1.08); }
}
/* বাটনে ক্লিকের ঢেউ */
@keyframes pd-ripple {
    0%   { opacity: .9; transform: scale(1); }
    100% { opacity: 0;  transform: scale(46); }
}
/* অফার বারের আলোর রেখা */
@keyframes pd-sheen {
    0%, 62%  { transform: translateX(-100%); }
    100%     { transform: translateX(100%); }
}
/* কার্ডের চারপাশে ঘোরানো আলো */
@keyframes pd-spin {
    to { transform: rotate(1turn); }
}
/* অফার বারের চলমান লেখা — ডান কিনারা থেকে বাঁয়ে বেরিয়ে যায় */
@keyframes pd-marquee {
    from { transform: translateX(100%); }
    to   { transform: translateX(-100%); }
}
/* অগ্রগতির বার শূন্য থেকে ভরে ওঠে */
@keyframes pd-fill {
    from { transform: scaleX(0); transform-origin: left center; }
    to   { transform: scaleX(1); transform-origin: left center; }
}
/* চোখ আইকনের চারপাশে ছড়িয়ে পড়া রিং */
@keyframes pd-peek-ring {
    0%   { transform: scale(1);   opacity: .85; }
    70%  { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
}
/* WhatsApp বাটনের ছড়িয়ে পড়া রিং */
@keyframes pd-pulse {
    0%   { transform: scale(1);    opacity: .5; }
    70%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
}

/* স্ক্রলে এলে সেকশন ফুটে ওঠে (JS ক্লাস বসায়) */
[data-reveal] { opacity: 0; }
[data-reveal].is-in { animation: pd-fade-up .55s cubic-bezier(.22, .8, .3, 1) forwards; }
[data-reveal="fade"].is-in { animation-name: pd-fade-in; }
[data-reveal="zoom"].is-in { animation-name: pd-zoom-in; }
[data-reveal="slide"].is-in { animation-name: pd-slide-in; }

/* গ্রিডের কার্ডগুলো একটার পর একটা আসে */
.pgrid > *, .vgrid > *, .plans > *, .stats > * { animation: pd-fade-up .5s cubic-bezier(.22, .8, .3, 1) both; }
.pgrid > *:nth-child(1),  .vgrid > *:nth-child(1),  .plans > *:nth-child(1),  .stats > *:nth-child(1)  { animation-delay: .04s; }
.pgrid > *:nth-child(2),  .vgrid > *:nth-child(2),  .plans > *:nth-child(2),  .stats > *:nth-child(2)  { animation-delay: .08s; }
.pgrid > *:nth-child(3),  .vgrid > *:nth-child(3),  .plans > *:nth-child(3),  .stats > *:nth-child(3)  { animation-delay: .12s; }
.pgrid > *:nth-child(4),  .vgrid > *:nth-child(4),  .stats > *:nth-child(4)  { animation-delay: .16s; }
.pgrid > *:nth-child(5),  .vgrid > *:nth-child(5)  { animation-delay: .2s; }
.pgrid > *:nth-child(n+6) { animation-delay: .24s; }

/* পেজ লোডে হিরো ও হেডিং */
.hero .slider { animation: pd-zoom-in .6s cubic-bezier(.22, .8, .3, 1) both; }
.section__head, .section__center { animation: pd-fade-up .5s cubic-bezier(.22, .8, .3, 1) both; }
.crumbs { animation: pd-fade-in .4s both; }
.pdetail__gallery { animation: pd-fade-up .5s cubic-bezier(.22, .8, .3, 1) both; }
.pbuy { animation: pd-fade-up .5s cubic-bezier(.22, .8, .3, 1) .1s both; }
.authcard { animation: pd-zoom-in .45s cubic-bezier(.22, .8, .3, 1) both; }
.shop__side { animation: pd-slide-in .5s cubic-bezier(.22, .8, .3, 1) both; }
.alert { animation: pd-fade-up .35s cubic-bezier(.22, .8, .3, 1) both; }

/* ইন্টার‌্যাকশন */
.pcard__media img, .vcard__media img { transition: transform .4s cubic-bezier(.22, .8, .3, 1); }
.pcard:hover .pcard__media img, .vcard:hover .vcard__media img { transform: scale(1.05); }
.btn, .chip, .catlist a, .footer__social a, .pshare a { will-change: transform; }
.footer__social a:hover, .pshare a:hover { transform: translateY(-3px); }
.footer__social a, .pshare a { transition: transform .18s cubic-bezier(.22, .8, .3, 1), opacity .18s; }
.mobilenav a { transition: color .16s, transform .16s; }
.mobilenav a:active { transform: scale(.92); }

/* যাদের মোশনে সমস্যা, তাদের জন্য সব বন্ধ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1200px) {
    .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* সাইডবারসহ পেজে জায়গা কম, তাই এক ধাপ কমে */
    .pgrid--shop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .shop { grid-template-columns: 232px minmax(0, 1fr); gap: 20px; }
}

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

    /* ট্যাব/মোবাইল — সাইডবার উপরে চলে আসে, ক্যাটাগরি এক লাইনে স্ক্রল করে */
    .shop { grid-template-columns: 1fr; gap: 16px; }
    .shop__side { display: flex; flex-direction: column; gap: 12px; }
    .shop__box { margin-bottom: 0; padding: 13px; }
    .pgrid--shop { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* শ্যাডো যেন কাটা না পড়ে সেজন্য ভেতরে প্যাডিং, বাইরে সমান negative margin */
    .catlist {
        flex-direction: row; flex-wrap: nowrap;
        overflow-x: auto; scroll-behavior: smooth;
        gap: 10px;
        padding: 6px 2px 10px;
        margin: -6px -2px -10px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .catlist::-webkit-scrollbar { display: none; }
    .catlist li { flex: 0 0 auto; }
    /* বক্সটা যেন কখনোই স্ক্রিনের চেয়ে চওড়া না হয় */
    .shop__box { min-width: 0; max-width: 100%; overflow: hidden; }
    .shop__box > .catlist { max-width: 100%; }

    /* কার্ড মোডে বাম দিকের নীল দাগটা আর দরকার নেই */
    .catlist a::before { display: none; }

    .catlist a {
        flex-direction: column; justify-content: flex-start; gap: 9px;
        width: 96px; min-height: 108px;
        padding: 14px 7px 12px; text-align: center;
        background: #fff; border: 1px solid var(--line); border-radius: 12px;
        box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
    }
    .catlist a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
    .catlist a.is-active {
        background: #fff; border-color: var(--primary);
        box-shadow: 0 6px 18px rgba(20, 71, 230, .18);
    }

    .catlist__icon { width: 46px; height: 46px; border-radius: 50%; }
    .catlist__icon .ico { width: 22px; height: 22px; }

    .catlist__name {
        flex: 1; width: 100%; font-size: 12.5px; line-height: 1.35;
        white-space: normal; text-overflow: clip;
        display: flex; align-items: center; justify-content: center;
    }
    .catlist__count { display: none; }
    .pdetail { grid-template-columns: 1fr; }
    .pbuy { position: static; }
    .summary, .acct { grid-template-columns: 1fr; }
    .rewards { grid-template-columns: 1fr; }
    /* সারাংশ আর আটকে থাকবে না — এক কলামে ওটা নিচে চলে যায় */
    .ordersum { position: static; }

    /* মোবাইল/ট্যাবে ক্রম: গ্যালারি → প্রাইস বক্স → ট্যাব (সবার শেষে) */
    .pdetail {
        grid-template-columns: 1fr;
        grid-template-areas:
            "gallery"
            "buy"
            "prose";
        gap: 18px;
    }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .plans { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(2, 1fr); gap: 13px; }
    .slider__caption { max-width: 60%; }
}

@media (max-width: 768px) {
    /* মোবাইলে অফার বার + হেডার দুটোই উপরে আটকে থাকে */
    .announce { position: sticky; top: 0; padding: 4px 0; font-size: 11.5px; }
    .announce__inner { gap: 8px; }
    .announce__timer b { font-size: 11px; padding: 1px 4px; min-width: 19px; }
    .announce__timer i { font-size: 9px; margin-inline-end: 2px; }
    .announce__btn { padding: 3px 11px; font-size: 11px; }
    .announce__old { display: none; }        /* কাটা দাম বাদ — জায়গা বাঁচে */
    .header { top: var(--announce-h, 0px); }

    /* --------------------------------------------- মোবাইল মেনু ড্রয়ার */
    .burger { display: inline-flex; }
    .header__inner { gap: 12px; }

    .nav {
        position: fixed; inset-inline: 0;
        top: calc(var(--announce-h, 0px) + 64px);
        background: #fff; color: var(--ink);
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 6px 16px 20px; margin: 0;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 20px 40px rgba(16, 24, 40, .18);
        transform: translateY(-130%); opacity: 0; visibility: hidden;
        transition: transform .34s cubic-bezier(.22,.8,.3,1), opacity .24s, visibility .34s;
        z-index: 59;
        max-height: calc(100vh - var(--announce-h, 0px) - 130px);
        overflow-y: auto;
    }
    .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

    .nav a {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 4px; border-bottom: 1px solid var(--line);
        border-bottom-width: 1px !important; font-size: 15.5px; font-weight: 500;
        /* খোলার সময় আইটেমগুলো একটার পর একটা নেমে আসে */
        opacity: 0; transform: translateY(-8px);
    }
    .nav.is-open a { animation: pd-nav-item .34s cubic-bezier(.22,.8,.3,1) forwards; }
    .nav.is-open a:nth-child(1) { animation-delay: .05s; }
    .nav.is-open a:nth-child(2) { animation-delay: .09s; }
    .nav.is-open a:nth-child(3) { animation-delay: .13s; }
    .nav.is-open a:nth-child(4) { animation-delay: .17s; }
    .nav.is-open a:nth-child(5) { animation-delay: .21s; }
    .nav.is-open a:nth-child(6) { animation-delay: .25s; }
    .nav.is-open a:nth-child(n+7) { animation-delay: .29s; }

    .nav a::after {
        content: ''; width: 7px; height: 7px; flex: none;
        border-top: 2px solid var(--ink-mute); border-inline-end: 2px solid var(--ink-mute);
        transform: rotate(45deg); transition: border-color .16s, transform .16s;
    }
    .nav a:last-child { border-bottom: 0; }
    .nav a:hover, .nav a.is-active { color: var(--primary); border-bottom-color: var(--line); }
    .nav a:hover::after { transform: rotate(45deg) translate(2px, -2px); }
    .nav a.is-active::after { border-color: var(--primary); }

    /* মেনু খোলা থাকলে পেছনের পেজ স্ক্রল হবে না */
    body.menu-open { overflow: hidden; }

    .header__tools { gap: 14px; }
    .header__tools .label { display: none; }
    /* কার্ট ও অ্যাকাউন্ট নিচের নেভিগেশন বারে আছে, তাই হেডার থেকে সরানো */
    .header__tools .cart-link,
    .header__tools .account-link,
    .header__tools .accmenu { display: none; }

    /* অ্যাকাউন্ট ড্রপডাউন মোবাইলে স্ক্রিনের সাথে মানানসই */
    .accmenu__drop { position: fixed; inset-inline: 12px; top: auto; min-width: 0; }
    .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mobilenav { display: block; }
    body.has-mobilenav { padding-bottom: 62px; }
    .wa-float, .askai-float { bottom: 74px; }

    /* ক্যাটাগরি কার্ড — মোবাইলে ছোট কিন্তু একই অনুপাতে */
    .catcard { width: 132px; padding: 18px 10px 15px; border-radius: 11px; }
    .catcard__icon { width: 52px; height: 52px; margin-bottom: 11px; }
    .catcard__icon .ico { width: 24px; height: 24px; }
    .catcard__name { font-size: 13px; min-height: 34px; }
    .catrail__scroll { gap: 12px; }
    .catrail__nav { width: 32px; height: 32px; }
    .catrail__nav--prev { inset-inline-start: -6px; }
    .catrail__nav--next { inset-inline-end: -6px; }

    .slider__caption { max-width: 70%; }
    .promo-wrap { margin-bottom: -40px; }

    /* ----------------------------------------- ফুটার মোবাইলে সব মাঝ বরাবর */
    .footer { padding-top: 80px; text-align: center; }
    .footer__grid { gap: 26px; padding-bottom: 26px; }
    .footer__logo { justify-content: center; }
    .footer__social { justify-content: center; }
    .footer__info p { justify-content: center; }
    .footer__bottom { flex-direction: column; justify-content: center; text-align: center; gap: 12px; }
    .footer__pay img { margin-inline: auto; }
}

@media (max-width: 560px) {
    /* লোগো ছোট স্ক্রিনেও একই চেহারা রাখে */
    .brand { font-size: 19px; gap: 8px; }
    .brand img { height: 36px; max-width: 150px; }
    .brand__mark { width: 33px; height: 33px; font-size: 18px; }
    .footer__logo img { height: 38px; }

    /* প্রোডাক্ট কার্ড — দুই কলাম, টাইট কিন্তু পড়ার মতো */
    .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .pcard__body { padding: 10px 10px 0; }
    .pcard__actions { padding: 0 10px 10px; gap: 6px; }
    .pcard__actions .btn { padding: 7px 8px; font-size: 13px; }
    .pcard__actions .btn--icon { width: 31px; height: 31px; }
    .pcard__actions .btn--icon .ico { width: 15px; height: 15px; }
    .pcard__badge, .pcard__off { font-size: 10.5px; padding: 2px 8px; top: 8px; }
    .stars .ico { width: 12px; height: 12px; }

    /* ক্যাটাগরি — ছোট স্ক্রিনে আরও কমপ্যাক্ট */
    .catcard { width: 116px; padding: 15px 8px 13px; }
    .catcard__icon { width: 46px; height: 46px; margin-bottom: 9px; }
    .catcard__icon .ico { width: 22px; height: 22px; }
    .catcard__name { font-size: 12.5px; min-height: 32px; }

    /* সাইডবার ক্যাটাগরি — ছোট স্ক্রিনেও একই অনুপাত, শুধু ছোট */
    .catlist { gap: 8px; }
    .catlist a { width: 84px; min-height: 96px; padding: 12px 6px 10px; gap: 8px; border-radius: 11px; }
    .catlist__icon { width: 40px; height: 40px; }
    .catlist__icon .ico { width: 20px; height: 20px; }
    .catlist__name { font-size: 11.5px; }
    .footer__grid { grid-template-columns: 1fr; }
    .section { padding: 26px 0; }
    .pcard__title { font-size: 14px; min-height: 40px; }
    .pcard__price { font-size: 15.5px; }
    .announce__inner { font-size: 12.5px; gap: 6px; }
    .authcard { padding: 24px 18px; }
    .countdown b { font-size: 20px; }

    /* স্ট্যাট কার্ড ছোট স্ক্রিনেও দুই কলামে — এক কলামে অনেক লম্বা হয়ে যায় */
    .stats { grid-template-columns: repeat(2, 1fr); gap: 11px; }
    .stat { padding: 14px 12px 12px; border-radius: 12px; }
    .stat b { font-size: 19px; }
    .stat span { font-size: 11px; }
    .stat__icon { width: 36px; height: 36px; border-radius: 10px; }
    .stat__icon .ico { width: 18px; height: 18px; }
    .quickbar { padding: 14px; }
    .quickbar__links a { flex: 1 1 46%; justify-content: center; padding: 9px 10px; font-size: 12.5px; }
}