:root{
    --bg:#f6f7f9;
    --surface:#ffffff;
    --text:#16181d;
    --muted:#6b7280;
    --border:#e6e8ec;
    --accent:#ff6b3d;
    --accent-dark:#e8511f;
    --shadow:0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
}

*{box-sizing:border-box;}

html,body{
    margin:0;
    padding:0;
    background:var(--bg);
    color:var(--text);
    font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}

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

.deals-container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 16px;
}

/* ---------- header ---------- */
.deals-header{
    position:sticky;
    top:0;
    z-index:10;
    border-bottom:1px solid var(--border);
    background:rgba(255,255,255,.85);
    -webkit-backdrop-filter:saturate(160%) blur(10px);
    backdrop-filter:saturate(160%) blur(10px);
}

.deals-header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    height:62px;
}

.deals-brand{
    display:flex;
    align-items:center;
    gap:9px;
    letter-spacing:-.2px;
}

.deals-brand img{
    border-radius:9px;
    object-fit:cover;
}

.brand-name{
    font-weight:800;
    font-size:18px;
    color:var(--text);
}

.brand-accent{
    margin-left:5px;
    font-size:18px;
    font-weight:800;
    background:linear-gradient(120deg, #ff6b3d, #ff9d3d);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.deals-nav{
    display:flex;
    gap:8px;
}

.deals-nav a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 12px;
    border:1px solid var(--border);
    border-radius:999px;
    color:var(--muted);
    font-size:14px;
    font-weight:600;
    transition:border-color .15s ease, color .15s ease, background .15s ease;
}

.deals-nav a:hover{
    border-color:var(--accent);
    color:var(--accent);
    background:rgba(255,107,61,.06);
}

.nav-home svg{display:block;}

/* small screens: drop Telegram + the "Links" label, keep just the home icon */
@media (max-width:520px){
    .deals-nav .nav-tg{display:none;}
    .deals-nav .nav-home-label{display:none;}
    .deals-nav .nav-home{padding:8px 10px;}
}

/* ---------- hero ---------- */
.deals-hero{
    padding:36px 0 22px;
}

.deals-kicker{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-bottom:14px;
    color:var(--accent-dark);
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.8px;
}

.deals-hero h1{
    margin:0 0 14px;
    max-width:24ch;
    font-size:clamp(32px, 6.2vw, 56px);
    font-weight:800;
    line-height:1.06;
    letter-spacing:-1.2px;
}

@media (min-width:880px){
    .deals-hero h1{
        max-width:34ch;
    }
}

.deals-hero h1 .hl{
    /* accent phrase as orange gradient text */
    background:linear-gradient(120deg, #ff6b3d, #ff9d3d);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.deals-hero-sub{
    margin:0;
    max-width:60ch;
    color:var(--muted);
    font-size:clamp(15px, 2.2vw, 18px);
    line-height:1.5;
}

/* ---------- toolbar: search + filters + sort ---------- */
.deals-toolbar{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin:0 0 20px;
}

.deals-controls{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
}

@media (min-width:680px){
    .deals-controls{
        grid-template-columns:minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
        align-items:center;
    }
}

.deals-search,
.deals-select{
    width:100%;
    height:44px;
    padding:0 14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface);
    color:var(--text);
    font:inherit;
    font-size:15px;
    transition:border-color .15s ease, box-shadow .15s ease;
}

.deals-search::placeholder{color:var(--muted);}

.deals-search:focus,
.deals-select:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(255,107,61,.15);
}

.deals-select{
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    padding-right:38px;
    /* chevron */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
}

.deals-count{
    color:var(--muted);
    font-size:13px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.deals-count strong{color:var(--text);font-weight:800;}

/* collapsible filter toggle (mobile only) */
.deals-filtertoggle{
    display:none; /* shown on mobile via media query */
    align-items:center;
    justify-content:space-between;
    gap:8px;
    width:100%;
    height:46px;
    padding:0 14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface);
    color:var(--text);
    font:inherit;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
}

.deals-filtertoggle .ft-label{
    display:flex;
    align-items:center;
    gap:8px;
}

.deals-filtertoggle .ft-chev{
    color:var(--muted);
    transition:transform .2s ease;
}

.deals-toolbar.is-open .deals-filtertoggle .ft-chev{
    transform:rotate(180deg);
}

@media (max-width:679px){
    .deals-filtertoggle{display:flex;}
    .deals-controls{display:none;}
    .deals-toolbar.is-open .deals-controls{display:grid;}
}

/* back-to-top floating button */
.deals-totop{
    position:fixed;
    right:16px;
    bottom:16px;
    z-index:30;
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border:none;
    border-radius:50%;
    background:linear-gradient(135deg, #ff7d52, var(--accent));
    color:#fff;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(255,107,61,.4);
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, filter .15s ease;
}

.deals-totop.visible{
    opacity:1;
    transform:none;
    pointer-events:auto;
}

.deals-totop:hover{filter:brightness(1.06);}

@media (prefers-reduced-motion: reduce){
    .deals-totop{transition:opacity .2s ease;}
}

.deals-noresults{
    margin:8px 0;
    padding:32px 16px;
    border:1px dashed var(--border);
    border-radius:14px;
    background:var(--surface);
    color:var(--muted);
    text-align:center;
}

/* ---------- pagination ---------- */
.deals-pagination{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:6px;
    margin:24px 0 8px;
}

.deals-pagination:empty{display:none;}

.dp-btn{
    min-width:40px;
    height:40px;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
    color:var(--text);
    font:inherit;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:border-color .15s ease, color .15s ease, background .15s ease;
}

.dp-btn:hover:not(:disabled):not(.active){
    border-color:var(--accent);
    color:var(--accent);
}

.dp-btn.active{
    border-color:transparent;
    background:linear-gradient(135deg, #ff7d52, var(--accent));
    color:#fff;
    cursor:default;
    box-shadow:0 4px 12px rgba(255,107,61,.25);
}

.dp-btn:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.dp-gap{
    padding:0 4px;
    color:var(--muted);
}

.deals-stale{
    margin:12px 0 0;
    padding:8px 12px;
    border:1px solid #f3d9a0;
    border-radius:10px;
    background:#fff7e6;
    color:#8a6100;
    font-size:13px;
}

/* ---------- grid ---------- */
.deals-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
    padding-bottom:8px;
}

@media (min-width:520px){
    .deals-grid{grid-template-columns:repeat(2, 1fr);}
}

@media (min-width:860px){
    .deals-grid{grid-template-columns:repeat(3, 1fr);}
}

@media (min-width:1100px){
    .deals-grid{grid-template-columns:repeat(4, 1fr);}
}

/* ---------- card ---------- */
.deal-card{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--surface);
    box-shadow:var(--shadow);
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.deal-card:hover{
    transform:translateY(-3px);
    border-color:#d7dbe2;
    box-shadow:0 2px 4px rgba(16,24,40,.06), 0 16px 36px rgba(16,24,40,.12);
}

.deal-media{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:190px;
    padding:16px;
    background:#fff;
    border-bottom:1px solid var(--border);
}

.deal-media img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.deal-noimg{
    font-size:46px;
    opacity:.5;
}

.deal-discount{
    position:absolute;
    top:10px;
    left:10px;
    padding:4px 9px;
    border-radius:999px;
    background:var(--accent);
    color:#fff;
    font-size:12px;
    font-weight:800;
    box-shadow:0 4px 10px rgba(255,107,61,.35);
}

.deal-body{
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1 1 auto;
    padding:14px 14px 16px;
}

.deal-shop{
    align-self:flex-start;
    padding:3px 9px;
    border-radius:999px;
    background:#eef1f5;
    color:#475569;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.3px;
}

.deal-title{
    margin:0;
    font-size:15px;
    line-height:1.35;
    font-weight:600;
    /* clamp to 3 lines with ellipsis */
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.deal-title a:hover{color:var(--accent-dark);}

.deal-price-row{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:8px;
    margin-top:2px;
}

.deal-price{
    font-size:22px;
    font-weight:800;
    color:var(--text);
    letter-spacing:-.4px;
}

.deal-orig{
    color:var(--muted);
    font-size:14px;
    text-decoration:line-through;
}

.deal-coupon{
    padding:7px 10px;
    border:1px dashed var(--accent);
    border-radius:10px;
    background:rgba(255,107,61,.06);
    color:var(--accent-dark);
    font-size:13px;
}

.deal-coupon strong{font-weight:800;letter-spacing:.4px;}

/* ---------- buttons ---------- */
.deals-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:11px 16px;
    border:1px solid transparent;
    border-radius:11px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.deals-btn-primary{
    background:linear-gradient(135deg, #ff7d52, var(--accent));
    color:#fff;
    box-shadow:0 6px 16px rgba(255,107,61,.28);
}

.deals-btn-primary:hover{
    transform:translateY(-1px);
    background:linear-gradient(135deg, #ff8a62, var(--accent-dark));
    box-shadow:0 8px 20px rgba(255,107,61,.36);
}

.deal-cta{
    margin-top:auto;
    width:100%;
}

/* ---------- empty state ---------- */
.deals-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin:20px 0 8px;
    padding:48px 20px;
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--surface);
    text-align:center;
}

.deals-empty-icon{font-size:48px;}
.deals-empty h2{margin:0;font-size:20px;}
.deals-empty p{margin:0;max-width:46ch;color:var(--muted);}
.deals-empty .deals-btn{margin-top:8px;}

/* ---------- disclosure + footer ---------- */
.deals-disclosure{
    margin:24px 0 8px;
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface);
    color:var(--muted);
    font-size:12.5px;
    line-height:1.5;
}

.deals-footer{
    margin-top:24px;
    padding:22px 0;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:13px;
}

.deals-footer .deals-container{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px;
}

.deals-footer a:hover{color:var(--accent);}

@media (prefers-reduced-motion: reduce){
    .deal-card,.deals-btn,.deals-nav a{transition:none;}
    .deal-card:hover,.deals-btn-primary:hover{transform:none;}
}

/* ---------- ended deals (slightly blurred, still clickable) ---------- */
.deal-card.is-ended{
    position:relative;
}

/* blur + desaturate the whole offer a touch; the badge stays sharp on top */
.deal-card.is-ended .deal-media,
.deal-card.is-ended .deal-body{
    filter:blur(0.8px) saturate(.5);
}

/* ---------- add-to-home banner ---------- */
.deals-install{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 0 20px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:linear-gradient(135deg, rgba(255,107,61,.10), rgba(255,107,61,.02));
    box-shadow:var(--shadow);
}

.deals-install[hidden]{display:none;}

.di-text{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}

.di-text strong{font-size:15px;}
.di-sub{color:var(--muted);font-size:13px;}

.di-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
}

.di-btn{
    height:40px;
    padding:0 16px;
    white-space:nowrap;
}

.di-close{
    width:34px;
    height:34px;
    border:none;
    border-radius:9px;
    background:transparent;
    color:var(--muted);
    font-size:15px;
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
}

.di-close:hover{background:#eef1f5;color:var(--text);}

@media (max-width:560px){
    .deals-install{flex-wrap:wrap;}
    .di-actions{width:100%;justify-content:space-between;}
    .di-btn{flex:1;}
}

/* iOS variant: no button, instructions + a corner close */
.deals-install.di-ios{
    position:relative;
    padding-right:42px;
}
.deals-install.di-ios .di-btn{display:none;}
.deals-install.di-ios .di-actions{
    position:absolute;
    top:8px;
    right:8px;
    width:auto;
}
.di-share{
    width:15px;
    height:15px;
    vertical-align:-2px;
    margin:0 1px;
}

.deal-ended-badge{
    position:absolute;
    top:10px;
    right:10px;
    z-index:4;
    padding:4px 10px;
    border-radius:999px;
    background:#374151;
    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.2px;
    box-shadow:0 4px 10px rgba(0,0,0,.28);
}