/* ============================================================
   Squishyuy — Homepage sections
   Hero → product carousels → category tiles → promo blocks
   ============================================================ */

/* ---------- Hero ---------- */
.sy-hero {
    position: relative;
    padding: var(--sy-sp-12) 0 var(--sy-sp-16);
    background: linear-gradient(180deg, var(--sy-bg) 0%, var(--sy-bg-alt) 100%);
    overflow: hidden;
}
.sy-hero__slider {
    position: relative;
    border-radius: var(--sy-r-xl);
    overflow: hidden;
    background: var(--sy-bg-alt);
    aspect-ratio: 16 / 7;
    box-shadow: var(--sy-shadow-md);
}
.sy-hero__slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    opacity: 0;
    transition: opacity 600ms var(--sy-ease);
    pointer-events: none;
}
.sy-hero__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}
.sy-hero__slide-content {
    padding: clamp(2rem, 5vw, 4rem);
    z-index: 2;
}
.sy-hero__eyebrow {
    display: inline-block;
    background: var(--sy-accent);
    color: #fff;
    font-size: var(--sy-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.375rem 0.875rem;
    border-radius: var(--sy-r-pill);
    margin-bottom: var(--sy-sp-4);
}
.sy-hero__title {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    line-height: 1.05;
    margin: 0 0 var(--sy-sp-4);
    letter-spacing: -0.025em;
}
.sy-hero__lede {
    font-size: var(--sy-fs-md);
    color: var(--sy-text-muted);
    margin: 0 0 var(--sy-sp-6);
    max-width: 460px;
}
.sy-hero__cta-row {
    display: flex;
    gap: var(--sy-sp-3);
    flex-wrap: wrap;
}
.sy-hero__media {
    position: relative;
    width: 100%;
    height: 100%;
}
.sy-hero__media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sy-hero__placeholder {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    background: repeating-linear-gradient(45deg, var(--sy-border-soft) 0 12px, var(--sy-bg) 12px 24px);
    color: var(--sy-text-muted);
    font-size: var(--sy-fs-sm);
}

/* Hero dots */
.sy-hero__dots {
    position: absolute;
    bottom: var(--sy-sp-5);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--sy-sp-2);
    z-index: 3;
}
.sy-hero__dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(31, 27, 22, 0.25);
    border: 0;
    cursor: pointer;
    transition: all var(--sy-dur) var(--sy-ease);
}
.sy-hero__dot.is-active {
    background: var(--sy-primary);
    width: 28px;
    border-radius: var(--sy-r-pill);
}

@media (max-width: 768px) {
    .sy-hero__slide { grid-template-columns: 1fr; }
    .sy-hero__media { display: none; }
    .sy-hero__slider { aspect-ratio: auto; min-height: 380px; }
}

/* ---------- Quick category strip (right under hero) ---------- */
.sy-quick-cats {
    padding-block: var(--sy-sp-10);
}
.sy-quick-cats__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--sy-sp-4);
}
.sy-quick-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sy-sp-2);
    padding: var(--sy-sp-4) var(--sy-sp-2);
    border-radius: var(--sy-r-md);
    transition: transform var(--sy-dur) var(--sy-ease);
}
.sy-quick-cat:hover { transform: translateY(-3px); }
.sy-quick-cat__icon {
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--sy-surface);
    display: grid; place-items: center;
    box-shadow: var(--sy-shadow-sm);
    overflow: hidden;
}
.sy-quick-cat__icon img { width: 100%; height: 100%; object-fit: cover; }
.sy-quick-cat__label {
    font-size: var(--sy-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
@media (max-width: 768px) {
    .sy-quick-cats__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Category tiles (big image cards) ---------- */
.sy-tiles {
    padding-block: var(--sy-sp-16);
}
.sy-tiles__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sy-sp-5);
}
.sy-tile {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--sy-r-lg);
    overflow: hidden;
    background: var(--sy-bg-alt);
    box-shadow: var(--sy-shadow-sm);
}
.sy-tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--sy-ease);
}
.sy-tile:hover img { transform: scale(1.05); }
.sy-tile__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--sy-sp-6);
    background: linear-gradient(180deg, rgba(31,27,22,0) 50%, rgba(31,27,22,0.6) 100%);
    color: #fff;
}
.sy-tile__title {
    font-size: var(--sy-fs-2xl);
    margin: 0 0 var(--sy-sp-2);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.sy-tile__cta {
    font-size: var(--sy-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fff;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    align-self: flex-start;
}
.sy-tile__placeholder {
    width: 100%; height: 100%;
    background: repeating-linear-gradient(135deg, var(--sy-border-soft) 0 14px, var(--sy-bg) 14px 28px);
}
@media (max-width: 900px) {
    .sy-tiles__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .sy-tiles__grid { grid-template-columns: 1fr; }
}

/* ---------- Promo blocks (2-3 col equal-height cards) ---------- */
.sy-promos {
    padding-block: var(--sy-sp-16);
    background: var(--sy-bg-alt);
}
.sy-promos__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sy-sp-5);
}
.sy-promo {
    background: var(--sy-surface);
    border-radius: var(--sy-r-lg);
    padding: var(--sy-sp-8);
    display: flex;
    flex-direction: column;
    gap: var(--sy-sp-3);
    border: 1px solid var(--sy-border-soft);
    transition: transform var(--sy-dur) var(--sy-ease), box-shadow var(--sy-dur) var(--sy-ease);
}
.sy-promo:hover { transform: translateY(-3px); box-shadow: var(--sy-shadow-md); }
.sy-promo__icon {
    width: 56px; height: 56px;
    border-radius: var(--sy-r-md);
    background: var(--sy-bg);
    display: grid; place-items: center;
    color: var(--sy-accent);
    margin-bottom: var(--sy-sp-3);
}
.sy-promo__icon svg { width: 28px; height: 28px; }
.sy-promo__title {
    font-size: var(--sy-fs-xl);
    margin: 0;
}
.sy-promo__desc {
    color: var(--sy-text-muted);
    font-size: var(--sy-fs-sm);
    line-height: 1.7;
    margin: 0;
    flex: 1;
}
.sy-promo__link {
    margin-top: var(--sy-sp-4);
    align-self: flex-start;
    font-weight: 600;
    font-size: var(--sy-fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
@media (max-width: 900px) { .sy-promos__grid { grid-template-columns: 1fr; } }

/* ---------- Trust strip ---------- */
.sy-trust {
    padding: var(--sy-sp-10) 0;
    border-top: 1px solid var(--sy-border-soft);
    border-bottom: 1px solid var(--sy-border-soft);
}
.sy-trust__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sy-sp-6);
}
.sy-trust__item {
    display: flex;
    align-items: center;
    gap: var(--sy-sp-3);
    text-align: left;
}
.sy-trust__icon {
    width: 40px; height: 40px;
    color: var(--sy-accent);
    flex-shrink: 0;
}
.sy-trust__title {
    font-size: var(--sy-fs-sm);
    font-weight: 700;
    margin: 0 0 2px;
}
.sy-trust__sub {
    font-size: var(--sy-fs-xs);
    color: var(--sy-text-muted);
    margin: 0;
}
@media (max-width: 768px) { .sy-trust__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .sy-trust__grid { grid-template-columns: 1fr; } }