/* Deal Groups Landing Page Styles */
.landing {
    font-family: 'Rubik', sans-serif;
    background: #f9f9f9;
    color: #333;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    margin-top: 0;
    color: #333;
    text-align: center;
    line-height: 1.2;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 1.4;
}

.landing__hero {
    background-image: url('../img/hero.png'), linear-gradient(135deg, #ff9a3d, #ff6f61);
    background-repeat: repeat, no-repeat;
    background-size: contain;
    background-blend-mode: overlay;
    color: white;
    padding: 3rem 1rem;
    text-align: center;
}

.landing__logo {
    max-width: 200px;
    margin-bottom: 1rem;
    border-radius: 100%;
    border: 2px solid white;
}

.landing__title {
    margin: 0;
    font-size: 3.5rem;
}

.landing__subtitle {
    font-size: 1.2rem;
    margin-top: 1rem;
}

.landing__container {
    max-width: 1100px;
    margin: auto;
    padding: 2rem;
}

.landing__section-title {
    text-align: center;
    margin-bottom: 2rem;
}

.landing__group-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    align-items: stretch;
}

.landing__group-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.landing__group-title {
    font-size: 1.3rem;
    margin: 0 0 0.2rem 0;
}

.landing__cta-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.landing__group-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.landing__category-logo {
    width: 90px;
    height: 90px;
    border-radius: 100%;
    border: 4px solid #ff6600bc;
    margin-bottom: 0.5rem;
}

.landing__group-description {
    flex: 1;
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
    text-align: center;
}

.landing__cta-button {
    text-align: center;
    background: #ff6600;
    color: white;
    border: none;
    padding: 0.7rem 1rem;
    font-size: 1rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s;
}

.landing__cta-button:hover {
    background: #e65c00;
}

/* Hot Deals Section */
.hot-deals-section {
    /* margin-bottom: 3rem; */
    padding: 0;
}

.hot-deals-slider-wrapper {
    margin-top: 2rem;
}

/* Slider Controls Container */
.slider-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.slider-nav {
    background: #ff6600;
    color: white;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 24px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.slider-nav:hover {
    background: rgba(255, 255, 255, 0.95);
    color: #ff6600;
    transform: scale(1.1);
}

.hot-deals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.2rem;
    overflow: visible;
    padding: 0 0 16px 0;
}

/* Desktop slider (>5 products) */
.hot-deals-grid.has-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 1.2rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hot-deals-grid.has-slider::-webkit-scrollbar {
    display: none;
}

.hot-deals-grid.has-slider .hot-deal-card {
    flex: 0 0 calc(20% - 1rem);
    min-width: 180px;
    scroll-snap-align: start;
}

/* Show controls when slider is active */
.hot-deals-grid.has-slider ~ .slider-controls .slider-nav,
.hot-deals-grid.has-slider ~ .slider-controls {
    display: flex;
}

/* Slider Pagination */
.slider-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 12px;
}

.pagination-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pagination-dot.active {
    background: #ff6600;
    width: 24px;
    border-radius: 4px;
}

.pagination-dot:hover {
    background: #ff9a3d;
}

/* Flow Divider */
.flow-divider {
    background-image: url('../img/hero.png'), linear-gradient(135deg, #ff9a3d, #ff6f61);
    background-repeat: repeat, no-repeat;
    background-size: contain;
    background-blend-mode: overlay;
    padding: 2.5rem 1rem;
    margin: 3rem 0;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(255, 102, 0, 0.2);
}

.flow-divider-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    color: white;
}

.flow-divider-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.flow-divider-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

.flow-divider-subtitle {
    font-size: 1.1rem;
    margin: 0 0 1.5rem 0;
    opacity: 0.95;
    line-height: 1.4;
}

.flow-divider-arrow {
    font-size: 2rem;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}

.hot-deal-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
    cursor: pointer;
}

.hot-deal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(255, 102, 0, 0.15);
    border: 2px solid rgba(255, 102, 0, 0.3);
}

.hot-deal-image-container {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f5f5, #fafafa);
}

.hot-deal-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.hot-deal-card:hover .hot-deal-image-container img {
    transform: scale(1.08);
}

/* Price Badges */
.price-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    color: white;
    z-index: 5;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.discount-badge {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

/* Hot Badge */
.hot-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    background: linear-gradient(135deg, #ff6600, #ff9a3d);
    color: white;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(255, 102, 0, 0.4);
}

.hot-deal-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hot-deal-title {
    font-size: 0.9rem;
    margin: 0;
    color: #333;
    line-height: 1.3;
    min-height: 2.4em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: center;
    overflow: hidden;
}

/* Product Benefit Microcopy */
.product-benefit {
    font-size: 0.75rem;
    color: #27ae60;
    text-align: center;
    font-weight: 600;
    padding: 0.25rem 0;
    margin-bottom: 0.5rem;
}

.hot-deal-buy-link {
    text-align: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #ff9a3d, #e65c00);
    color: white;
    border: none;
    text-decoration: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(230, 92, 0, 0.28);
    position: relative;
    overflow: hidden;
}

.hot-deal-buy-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(230, 92, 0, 0.35);
}

.hot-deal-buy-link:active {
    transform: translateY(0);
}

.landing__section {
    padding: 2rem 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .landing__title {
        font-size: 2rem;
    }

    .landing__hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2rem 1rem;
    }

    .landing__hero-text {
        padding: 0 16px;
    }

    .landing__logo {
        max-width: 80px;
        height: 80px;
    }

    .section-title {
        font-size: 1.7rem;
        margin-bottom: 1rem;
    }

    .landing__subtitle {
        font-size: 1rem;
    }

    .landing__container {
        padding: 1rem;
    }

    .landing__group-list {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .landing__cta-wrapper {
        flex-direction: column;
        width: 100%;
    }

    .landing__section {
        padding: 1rem 0;
    }

    /* Always show slider on tablet/mobile */
    .hot-deals-grid {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 1rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .hot-deals-grid::-webkit-scrollbar {
        display: none;
    }

    .hot-deals-grid .hot-deal-card {
        flex: 0 0 calc(50% - 0.5rem);
        min-width: calc(50% - 0.5rem);
        scroll-snap-align: start;
    }

    /* Always show slider controls on mobile/tablet */
    .slider-controls {
        display: flex !important;
    }

    .slider-controls .slider-nav {
        display: flex !important;
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .hot-deal-image-container {
        height: 140px;
    }

    /* Flow divider responsive */
    .flow-divider {
        padding: 2rem 1rem;
        margin: 2rem 0;
    }

    .flow-divider-title {
        font-size: 1.4rem;
    }

    .flow-divider-subtitle {
        font-size: 1rem;
    }

    .flow-divider-icon {
        font-size: 2.5rem;
    }
}

/* ==========================================================================
   Design pass (Aphrodite, 2026-08-15)
   The page used to shout on every element — a 🔥 badge on every product card,
   "דילים חדשים כל שעה!" on every group card, fire in both section titles and
   both dividers. When everything is urgent nothing is, and it contradicted the
   H1's promise, which is about restraint. Replaced the noise with proof:
   real bestsellers per niche, taken from the affiliate order data.
   ========================================================================== */

/* --- Hero CTA ----------------------------------------------------------- */
.hero-cta {
    display: inline-block;
    margin-top: 1.75rem;
    padding: 1.05rem 2.5rem;
    background: #fff;
    color: #e2452f;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

.hero-cta--onDark {
    background: #ff6600;
    color: #fff;
}

.hero-note {
    margin: 0.9rem 0 0;
    font-size: 0.95rem;
    opacity: 0.85;
}

/* --- Bestseller cards --------------------------------------------------- */
.rank-badge {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    min-width: 28px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.82);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    z-index: 5;
}

.deal-niche {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #a2521f;
    background: #fff1e6;
    border-radius: 4px;
    padding: 2px 7px;
}

.hot-deal-card .product-benefit {
    color: #6b6b6b;
    font-size: 0.8rem;
    font-weight: 500;
}

/* --- Group cards -------------------------------------------------------- */
.landing__group-card {
    align-items: stretch;
    text-align: center;
    border: 1px solid #ececec;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.landing__group-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

/* Amber, not green. Green on this page means WhatsApp — it is the join
   button's colour, and a green pill three lines above a green button reads as
   a second control. A status badge must never wear an action's colour. */
.group-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #8a4b00;
    background: #fdf0dc;
    border-radius: 999px;
    padding: 3px 10px;
}

/* A COOL hue, not a paler amber. Same-hue-lighter would read as a weaker
   grade of the same badge — bronze under gold — and re-encode the ranking we
   just removed from the sort. A different temperature reads as a different
   KIND of group, which is the truth: newer, not lesser. Same size, same
   weight, same padding as its sibling, so neither pill outranks the other. */
.group-badge--new {
    color: #2f5673;
    background: #e8f0f6;
}

/* Proof strip: what this niche's members actually buy. Deliberately NOT
   clickable — the job of this page is a group join, not an outbound click,
   and no prices are shown because AliExpress prices drift and a stale price
   reads as a lie. */
.group-proof {
    margin: 0 0 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
}

.group-orders {
    margin: 0.5rem 0 0.9rem;
    font-size: 0.9rem;
    color: #5a5a5a;
}

/* 1.05rem, down from 1.15. That size was set for the numeral "5,956" —
   digits carry small optical size and need the bump. The phrase that replaced
   it ("מאות הזמנות") is two words of Hebrew text and reads a full step larger
   at the same point size; at 1.15 it was competing with the 1.3rem group
   title for the first fixation. */
.group-orders strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ff6f61;
}

/* The young-group status line. Same box, same margins, same size as the proof
   line above — the point of the whole exercise is that all eight cards share
   one skeleton, so a reader can never locate the "real" groups by scanning for
   which row is missing.

   Faint, but NOT apologetic: no italics, no smaller type, no grey-on-grey.
   And the emphasis lands on the second half — "נבנית עכשיו" is the concession,
   "אותו סינון" is the promise, and the promise is what earns the join. Ink,
   not coral: coral is the proof colour and belongs to verified volume only. */
.group-orders--new {
    color: #6b6b6b;
}

.group-orders--new strong {
    font-size: inherit;
    font-weight: 600;
    color: #2f5673;
}

.group-proof__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #8a8a8a;
    margin-bottom: 0.6rem;
}

.group-proof__list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.group-proof__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

/* `contain` on a white tile, not `cover`. Seller photos arrive at every
   aspect ratio and background; cover was slicing the product out of its own
   thumbnail — a bit set was cropped to a red rectangle. A uniform white tile
   also stops the strip reading as three unrelated stock photos. */
.group-proof__item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 4px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #f0f0f0;
}

.group-proof__item span {
    font-size: 0.66rem;
    line-height: 1.3;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.landing__cta-wrapper {
    width: 100%;
}

/* Join buttons carry their platform's colour and real glyph rather than two
   identical orange bars with 📱/💬 emoji. Two equal primaries force a choice;
   a green button and a blue button are recognised before they are read, so the
   card stops asking "which one" and starts asking "do you have WhatsApp". */
.group-join-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-size: 1.05rem;
    padding: 0.9rem 1.25rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.group-join-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.group-join-button--telegram {
    background: #229ed9;
}

.group-join-button--telegram:hover {
    background: #1d8dc2;
}

.group-join-button--whatsapp {
    background: #1eb457;
}

.group-join-button--whatsapp:hover {
    background: #199c4a;
}

.join-glyph {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
}

/* The 4px orange ring fought every niche logo that already has its own border
   (Tactical, TechPlay, Blokia). A neutral hairline lets each brand read. */
.landing__category-logo {
    border: 1px solid #ececec;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* --- Niche jump bar ------------------------------------------------------
   The page's spine. Ordered by real attributed demand, so the row is itself an
   honest ranking, and it turns the H1's promise ("we sort") into something the
   layout actually performs. Sticky on mobile: at 6,271px of scroll, a jump bar
   that scrolls away is a jump bar you can't reach when you need it. */
.niche-bar {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid #ececec;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.niche-bar__list {
    list-style: none;
    display: flex;
    gap: 0.5rem;
    margin: 0 auto;
    padding: 0.6rem 1rem;
    max-width: 1200px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
}

.niche-bar__list::-webkit-scrollbar {
    display: none;
}

.niche-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    scroll-snap-align: start;
    padding: 0.4rem 0.85rem 0.4rem 0.5rem;
    border: 1px solid #e6e6e6;
    border-radius: 999px;
    background: #fff;
    color: #333;
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.niche-chip img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.niche-chip:hover,
.niche-chip:focus-visible {
    border-color: #ff6f61;
    color: #d1432c;
    transform: translateY(-1px);
}

/* Anchored cards must clear the sticky bar, and announce themselves when
   jumped to — otherwise the click lands silently and reads as a dead link. */
.landing__group-card {
    scroll-margin-top: 76px;
}

.landing__group-card:target {
    border-color: #ffc9a3;
    box-shadow: 0 0 0 3px rgba(255, 111, 97, 0.14);
}

/* --- Guide link ----------------------------------------------------------
   Sits above the join buttons, deliberately not styled as a button: it is the
   honest-broker note, not a third competing CTA. */
.group-guide {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.9rem;
    padding: 0.65rem 0.85rem;
    border: 1px dashed #e2d6c9;
    border-radius: 10px;
    background: #fffaf4;
    text-decoration: none;
    text-align: start;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.group-guide:hover {
    border-color: #ffb387;
    background: #fff4e9;
}

.group-guide__label {
    flex-shrink: 0;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #a2521f;
    background: #fff1e6;
    border-radius: 4px;
    padding: 2px 7px;
}

.group-guide__text {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: #3d3d3d;
    line-height: 1.35;
}

.group-guide__arrow {
    flex-shrink: 0;
    color: #ff6f61;
    font-weight: 700;
}

@media (max-width: 768px) {
    .hero-cta {
        padding: 0.95rem 2rem;
        font-size: 1.1rem;
    }

    .group-proof__item span {
        font-size: 0.62rem;
    }

    .group-join-button {
        font-size: 1rem;
    }

    .niche-bar__list {
        padding: 0.5rem 0.75rem;
        gap: 0.4rem;
    }

    .niche-chip {
        font-size: 0.8rem;
        padding: 0.35rem 0.7rem 0.35rem 0.4rem;
    }

    .niche-chip img {
        width: 20px;
        height: 20px;
    }

    .landing__group-card {
        scroll-margin-top: 64px;
    }

    .group-guide__text {
        font-size: 0.8rem;
    }

    /* --- Mobile card compaction ----------------------------------------
       Measured on production at 390×844 before this block: cards ran
       397–729px tall — one card ≈ one full viewport. Eight options that
       can never be seen two at a time is not a catalogue, it is a
       corridor. This page converts by SELF-IDENTIFICATION, and a reader
       cannot identify herself among options she has to remember rather
       than compare. Everything below buys scan length back.

       The proof strip is hidden here, and not for length alone: it
       renders on exactly the four established groups and on none of the
       four young ones — a 174px present/absent binary. We removed the
       ranking from the copy, from the sort and from the JSON-LD, and it
       came straight back as geometry. A reader scrolling this page on a
       phone reads "four real groups, four filler" from shape alone,
       without a word. On mobile the floor claim carries the proof; the
       thumbnails are a desktop enrichment, not the argument. */
    .group-proof {
        display: none;
    }

    /* 92px was a desktop logo doing desktop work. At 56 it still
       identifies the group instantly — these are colour-and-mark logos,
       not detail illustrations — and returns 36px per card. */
    .landing__category-logo {
        width: 56px;
        height: 56px;
    }

    .landing__group-header {
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .landing__group-title {
        font-size: 1.15rem;
        line-height: 1.35;
    }

    .landing__group-description {
        margin-bottom: 0.6rem;
    }

    .group-orders {
        margin: 0.35rem 0 0.7rem;
    }

    .landing__group-card {
        padding: 1.1rem 1rem 1.2rem;
    }
}