/* ═══════════════════════════════════════════
   Home Page Styles
   ═══════════════════════════════════════════ */

/* ── Hero Slider ── */
.hero-slider { height: 420px; }

@media (min-width: 480px)  { .hero-slider { height: 500px; } }
@media (min-width: 640px)  { .hero-slider { height: 580px; } }
@media (min-width: 768px)  { .hero-slider { height: 660px; } }
@media (min-width: 1024px) { .hero-slider { height: calc(100dvh - 64px); min-height: 560px; max-height: 820px; } }
@media (min-width: 1280px) { .hero-slider { height: calc(100dvh - 64px); min-height: 600px; max-height: 900px; } }

.hero-logo   { position: absolute; left: 16px; top: 16px; }
.hero-plabel {
    position: absolute;
    right: 16px;
    top: 18px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.5;
    text-transform: capitalize;
    color: rgba(255,255,255,0.65);
}
.hero-arrows { position: absolute; bottom: 14px; right: 14px; display: flex; gap: 10px; z-index: 30; }

/* Split layout (slide 0) */
.hero-split-text { position: absolute; left: 16px; top: clamp(72px, 18vw, 200px); max-width: min(88vw, 440px); }
.hero-split-text h1 {
    font-family: 'Radio Canada', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 5.5vw, 42px);
    line-height: 1.18;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 12px;
    white-space: pre-line;
}
.hero-split-text p {
    font-family: 'Inter', sans-serif;
    font-size: clamp(11px, 2.6vw, 13px);
    color: #9ca3af;
    max-width: min(240px, 76vw);
    letter-spacing: 0.04em;
    line-height: 1.7;
    margin: 0 0 18px;
}

/* Card overlay (slides 1 & 2) */
.hero-card {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 12px;
    border-radius: 14px;
}
.hero-card h1 {
    font-family: 'Radio Canada', sans-serif;
    font-weight: 600;
    font-size: clamp(18px, 5vw, 42px);
    line-height: 1.18;
    white-space: pre-line;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}
.hero-card p {
    font-family: 'Inter', sans-serif;
    font-size: clamp(11px, 2.8vw, 14px);
    line-height: 1.6;
    color: rgba(255,255,255,0.75);
    margin: 0;
    text-transform: capitalize;
}
.hero-card.white-text p { color: #fff; }

.hero-card-dark  { background: linear-gradient(294.59deg, rgba(255,96,50,0.5) -32.45%, rgba(0,0,0,0.5) 251.02%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-card-light { background: rgba(15,8,4,0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

.hero-gradient-split { background: linear-gradient(to right, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.72) 30%, rgba(0,0,0,0.28) 55%, transparent 72%); }

.hero-split-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    align-self: flex-start;
    height: 44px;
    padding: 10px 18px;
    background: #FF6032;
    border-radius: 999px;
    box-shadow: 0px 1px 2px rgba(16,24,40,0.05);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
}

@media (min-width: 640px) {
    .hero-logo       { left: 32px; top: 28px; }
    .hero-plabel     { right: 32px; top: 30px; font-size: 13px; }
    .hero-card       { left: 32px; right: auto; bottom: 28px; width: 360px; padding: 18px 16px; gap: 18px; }
    .hero-split-text { left: 32px; top: clamp(88px, 20vw, 210px); }
    .hero-arrows     { bottom: 20px; right: 28px; }
}

@media (min-width: 1024px) {
    .hero-logo            { left: 52px; top: 44px; }
    .hero-plabel          { right: 52px; top: 44px; font-size: 16px; }
    .hero-card            { left: 52px; bottom: 44px; width: 420px; padding: 26px 20px; gap: 24px; }
    .hero-card h1         { font-size: 38px; }
    .hero-card p          { font-size: 16px; line-height: 19px; }
    .hero-split-text      { left: 52px; top: 199px; max-width: 494px; display: flex; flex-direction: column; gap: 40px; }
    .hero-split-text h1   { font-size: 40px; line-height: 48px; margin: 0; }
    .hero-split-text p    { font-size: 16px; line-height: 24px; text-transform: uppercase; color: rgba(255,255,255,0.75); margin: 0; max-width: 457px; }
    .hero-arrows          { bottom: 36px; right: 44px; gap: 12px; }
}

@media (min-width: 1280px) {
    .hero-logo            { left: 64px; top: 52px; }
    .hero-plabel          { right: 64px; top: 52px; font-size: 18px; }
    .hero-card            { left: 64px; bottom: 52px; width: 460px; padding: 32px 24px; gap: 28px; }
    .hero-card h1         { font-size: 42px; }
    .hero-card p          { font-size: 16px; line-height: 19px; }
    .hero-split-text      { left: 64px; top: 199px; max-width: 494px; }
    .hero-split-text h1   { font-size: 40px; }
    .hero-split-text p    { font-size: 16px; }
    .hero-arrows          { bottom: 44px; right: 52px; }
}

/* ── Shop By Category ── */
.cat-card       { display: flex; flex-direction: column; }
.cat-item-wrap  { background: #F6F6F6; flex: 1; }
.cat-img-wrap   { height: 288px; }

/* ── Hear How Sound Should Sound ── */
.feature-text   { display: flex; flex-direction: column; gap: 32px; }
.feature-title {
    font-family: 'Radio Canada', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    text-transform: capitalize;
    color: #000;
    margin: 0;
}
.feature-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-transform: capitalize;
    color: rgba(0,0,0,0.75);
    margin: 0;
}

/* ── Shop By Category ── */
#cat-container { gap: 30px; }

/* ── Shop Best Sellers ── */
#best-container { gap: 30px; }
.best-seller-card {
    border: 1px solid #E4E4E4;
    border-radius: 9.41px;
    overflow: hidden;
    padding: 20px;
}
.best-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FF500B;
    border: 1px solid #FF500B;
    border-radius: 999px;
    padding: 4px 14px;
    font-family: 'Radio Canada', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.03em;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
    align-self: flex-start;
    box-shadow: 0px 1px 2px rgba(16,24,40,0.05);
}
.best-img-wrap  { display: flex; align-items: center; justify-content: center; height: 260px; margin: 16px 0; }
.best-img-wrap img { max-width: 200px; max-height: 200px; width: 100%; height: auto; object-fit: contain; }
.best-text      { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.best-name {
    font-family: 'Radio Canada', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 29px;
    text-transform: capitalize;
    color: #000;
    margin: 0;
}
.best-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    text-transform: capitalize;
    color: rgba(0,0,0,0.75);
    margin: 0;
}
.best-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    border: 1px solid #FF500B;
    border-radius: 999px;
    filter: drop-shadow(0px 1px 2px rgba(16,24,40,0.05));
    font-family: 'Radio Canada', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    margin-top: auto;
}

/* ── Play Your Way ── */
#pyw-track.pyw-snap .pyw-slide,
#pyw-track.pyw-snap .pyw-card { transition: none !important; }
#pyw-track          { display: flex; align-items: center; will-change: transform; }
.pyw-slide          { flex-shrink: 0; width: 58vw; max-width: 700px; padding: 0 12px; box-sizing: border-box; transition: opacity 0.5s ease, transform 0.5s ease; }
.pyw-card           { width: 100%; transform-origin: top center; transition: transform 0.5s ease, opacity 0.5s ease; }
.pyw-img-wrap       { border-radius: 16px; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; }
.pyw-img-wrap img   { width: 100%; height: 100%; object-fit: cover; display: block; }
.pyw-info           { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pyw-info-text      { display: flex; flex-direction: column; gap: 8px; }
.pyw-info h3 {
    font-family: 'Radio Canada', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    text-transform: capitalize;
    color: #fff;
    margin: 0;
}
.pyw-info p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    text-transform: capitalize;
    color: rgba(255,255,255,0.65);
    margin: 0;
}
.pyw-shop-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 28px;
    background: #FF500B;
    border-radius: 999px;
    font-family: 'Radio Canada', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    text-decoration: none;
}
/* active = full size; left/right side = scaled toward center edge */
.pyw-card                        { transition: transform 0.5s ease, opacity 0.5s ease; }
.pyw-slide.pyw-active .pyw-card  { transform: scale(1);    opacity: 1;    pointer-events: auto; }
.pyw-slide.pyw-left   .pyw-card  { transform: scale(0.82); opacity: 0.55; pointer-events: none; transform-origin: center right; }
.pyw-slide.pyw-right  .pyw-card  { transform: scale(0.82); opacity: 0.55; pointer-events: none; transform-origin: center left; }
.pyw-slide:not(.pyw-active):not(.pyw-left):not(.pyw-right) .pyw-card { opacity: 0; pointer-events: none; }

/* ── Why Buy From Flyball ── */
.why-grid   { align-items: flex-start; }
.why-item   { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 228px; }
.why-icon   { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.why-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    text-transform: capitalize;
    color: #000;
    margin: 0;
    align-self: stretch;
}
.why-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-transform: capitalize;
    color: rgba(0,0,0,0.75);
    margin: 0;
    align-self: stretch;
}

/* ═══════════════════════════════════════════
   Mobile  (≤ 767px)
   ═══════════════════════════════════════════ */
@media (max-width: 767px) {
    .sec-py     { padding-top: 40px; padding-bottom: 40px; }
    .sec-pt     { padding-top: 40px; }
    .sec-pb     { padding-bottom: 40px; }
    .sec-h2     { margin-bottom: 24px; }

    /* Category */
    .cat-img-wrap     { height: 160px; }
    .cat-img-wrap img { max-height: 140px; }
    #cat-container    { gap: 16px; }

    /* Features */
    .feature-title { font-size: 20px; line-height: 26px; }
    .feature-desc  { font-size: 14px; line-height: 20px; }
    .feature-row   { gap: 16px; padding-top: 28px; padding-bottom: 28px; }
    .feature-text  { gap: 14px; }

    /* Best Sellers */
    .best-img-wrap { height: 160px; margin: 12px 0; }
    .best-name     { font-size: 24px; line-height: 29px; }
    .best-desc     { font-size: 13px; line-height: 19px; }
    .best-btn      { font-size: 13px; height: 42px; }
    #best-container { gap: 16px; }
    #best-prev, #best-next { display: flex !important; width: 36px; height: 36px; }
    #best-prev { left: 0 !important; }
    #best-next { right: 0 !important; }
    #best-track-wrap { margin: 0 44px; }

    /* Play Your Way */
    .pyw-slide    { width: 84vw; max-width: 84vw; }
    .pyw-info     { margin-top: 16px; flex-direction: column; align-items: flex-start; gap: 12px; }
    .pyw-info h3  { font-size: 20px; line-height: 26px; }
    .pyw-info p   { font-size: 13px; line-height: 18px; }
    .pyw-shop-btn { height: 38px; padding: 0 16px; font-size: 12px; }
    .pyw-slide.pyw-side .pyw-card { transform: scale(0.88); }

    /* Why Buy */
    .why-grid  { gap: 28px; }
    .why-item  { width: 100%; gap: 14px; }
    .why-title { font-size: 16px; line-height: 24px; }
    .why-desc  { font-size: 13px; line-height: 18px; }
}

/* ═══════════════════════════════════════════
   Tablet  (768px–1023px)
   ═══════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
    .sec-py        { padding-top: 56px; padding-bottom: 56px; }
    .cat-img-wrap  { height: 220px; }
    .cat-img-wrap img { max-height: 200px; }
    .feature-title { font-size: 26px; line-height: 32px; }
    .feature-desc  { font-size: 16px; line-height: 24px; }
    .why-grid      { gap: 40px; }
    .why-item      { width: auto; }
}