/* ==========================================================================
   SofaSet.pk — Premium Polish Stylesheet
   Loaded globally. Adds: lightbox, scroll reveal, sticky product bar,
   refined hover states, premium micro-interactions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SCROLL REVEAL ANIMATIONS
   -------------------------------------------------------------------------- */
.sofa-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}
.sofa-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger child elements in grids — adds 80ms delay per item */
.product-grid .sofa-reveal:nth-child(1) { transition-delay: 0ms; }
.product-grid .sofa-reveal:nth-child(2) { transition-delay: 80ms; }
.product-grid .sofa-reveal:nth-child(3) { transition-delay: 160ms; }
.product-grid .sofa-reveal:nth-child(4) { transition-delay: 240ms; }
.product-grid .sofa-reveal:nth-child(5) { transition-delay: 80ms; }
.product-grid .sofa-reveal:nth-child(6) { transition-delay: 160ms; }
.product-grid .sofa-reveal:nth-child(7) { transition-delay: 240ms; }
.product-grid .sofa-reveal:nth-child(8) { transition-delay: 320ms; }

.why-grid .sofa-reveal:nth-child(1) { transition-delay: 0ms; }
.why-grid .sofa-reveal:nth-child(2) { transition-delay: 100ms; }
.why-grid .sofa-reveal:nth-child(3) { transition-delay: 200ms; }
.why-grid .sofa-reveal:nth-child(4) { transition-delay: 0ms; }
.why-grid .sofa-reveal:nth-child(5) { transition-delay: 100ms; }
.why-grid .sofa-reveal:nth-child(6) { transition-delay: 200ms; }

.cat-grid .sofa-reveal:nth-child(1) { transition-delay: 0ms; }
.cat-grid .sofa-reveal:nth-child(2) { transition-delay: 60ms; }
.cat-grid .sofa-reveal:nth-child(3) { transition-delay: 120ms; }
.cat-grid .sofa-reveal:nth-child(4) { transition-delay: 180ms; }
.cat-grid .sofa-reveal:nth-child(5) { transition-delay: 240ms; }
.cat-grid .sofa-reveal:nth-child(6) { transition-delay: 0ms; }
.cat-grid .sofa-reveal:nth-child(7) { transition-delay: 60ms; }
.cat-grid .sofa-reveal:nth-child(8) { transition-delay: 120ms; }
.cat-grid .sofa-reveal:nth-child(9) { transition-delay: 180ms; }
.cat-grid .sofa-reveal:nth-child(10) { transition-delay: 240ms; }

.process-steps .sofa-reveal:nth-child(1) { transition-delay: 0ms; }
.process-steps .sofa-reveal:nth-child(2) { transition-delay: 100ms; }
.process-steps .sofa-reveal:nth-child(3) { transition-delay: 200ms; }
.process-steps .sofa-reveal:nth-child(4) { transition-delay: 300ms; }
.process-steps .sofa-reveal:nth-child(5) { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
    .sofa-reveal,
    .sofa-reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}
/* Safety net: if JS is disabled, show all reveal elements immediately */
.no-js .sofa-reveal {
    opacity: 1 !important;
    transform: none !important;
}

/* --------------------------------------------------------------------------
   2. LIGHTBOX
   -------------------------------------------------------------------------- */
.sofa-lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
}
.sofa-lightbox.is-open { display: flex; }

.sofa-lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 12, 10, 0.92);
    backdrop-filter: blur(8px);
    animation: lbFadeIn 0.3s ease-out;
}
@keyframes lbFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.sofa-lightbox__close,
.sofa-lightbox__nav {
    position: absolute;
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast);
    cursor: pointer;
    backdrop-filter: blur(10px);
}
.sofa-lightbox__close:hover,
.sofa-lightbox__nav:hover { background: rgba(255, 255, 255, 0.2); }

.sofa-lightbox__close {
    top: 20px;
    right: 20px;
}
.sofa-lightbox__nav--prev { left: 20px;  top: 50%; transform: translateY(-50%); }
.sofa-lightbox__nav--next { right: 20px; top: 50%; transform: translateY(-50%); }

.sofa-lightbox__stage {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 80px 80px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: lbZoomIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes lbZoomIn {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}
.sofa-lightbox__image {
    max-width: 100%;
    max-height: calc(90vh - 100px);
    object-fit: contain;
    border-radius: var(--r-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.sofa-lightbox__caption {
    color: #D4C5AA;
    font-size: var(--fs-sm);
    margin-top: var(--s-3);
    text-align: center;
}

.sofa-lightbox__count {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 14px;
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: 500;
    backdrop-filter: blur(10px);
}

@media (max-width: 640px) {
    .sofa-lightbox__close,
    .sofa-lightbox__nav { width: 40px; height: 40px; }
    .sofa-lightbox__close { top: 12px; right: 12px; }
    .sofa-lightbox__nav--prev { left: 12px; }
    .sofa-lightbox__nav--next { right: 12px; }
    .sofa-lightbox__stage { padding: 60px 16px 56px; }
}

/* --------------------------------------------------------------------------
   3. STICKY PRODUCT ACTION BAR (mobile, on single product pages)
   -------------------------------------------------------------------------- */
.sofa-sticky-product {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 140;
    background: #fff;
    border-top: 1px solid var(--c-line);
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    transform: translateY(100%);
    transition: transform var(--t-base);
    box-shadow: 0 -4px 20px rgba(31, 27, 22, 0.08);
}
.sofa-sticky-product.is-visible {
    transform: translateY(0);
}

.sofa-sticky-product__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--t-fast);
}
.sofa-sticky-product__btn--call {
    flex: 0 0 90px;
    background: var(--c-surface-alt);
    color: var(--c-ink);
    border: 1px solid var(--c-line);
}
.sofa-sticky-product__btn--call:active { background: var(--c-muted); }
.sofa-sticky-product__btn--wa {
    background: var(--c-whatsapp);
    color: #fff;
}
.sofa-sticky-product__btn--wa:active { background: var(--c-whatsapp-dk); }

/* Hide on larger screens — buy box is always visible there */
@media (min-width: 881px) {
    .sofa-sticky-product { display: none; }
}

/* Push the WhatsApp sticky bubble up when sticky product bar is showing */
.sofa-sticky-product.is-visible ~ .wa-sticky,
body:has(.sofa-sticky-product.is-visible) .wa-sticky {
    bottom: 80px;
}

/* --------------------------------------------------------------------------
   4. ENHANCED PRODUCT CARD POLISH
   -------------------------------------------------------------------------- */
.product-card {
    position: relative;
    overflow: hidden;
}

/* Premium hover sheen overlay */
.product-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-100%);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.product-card:hover .product-card__media::after {
    transform: translateX(100%);
}

/* Subtle gold bottom-bar accent on hover */
.product-card::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-gold), var(--c-brown), var(--c-gold));
    background-size: 200% 100%;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}
.product-card:hover::before {
    transform: scaleX(1);
    animation: shimmerSlide 2.5s ease-in-out infinite;
}
@keyframes shimmerSlide {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* --------------------------------------------------------------------------
   5. ENHANCED HERO PARALLAX FEEL (subtle)
   -------------------------------------------------------------------------- */
.home-hero__image,
.cat-hero__image,
.page-hero__image {
    transition: transform 8s cubic-bezier(0.4, 0, 0.2, 1);
}
.home-hero:hover .home-hero__image,
.cat-hero:hover .cat-hero__image,
.page-hero:hover .page-hero__image {
    transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   6. BUTTON RIPPLE & PRESS STATES
   -------------------------------------------------------------------------- */
.btn {
    position: relative;
    overflow: hidden;
}
.btn:active {
    transform: translateY(0) scale(0.98);
}

/* --------------------------------------------------------------------------
   7. SECTION ENTRY ANIMATIONS — gentle fade on H2s
   -------------------------------------------------------------------------- */
.section-head {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.section-head.is-visible,
.is-visible .section-head,
body.no-js .section-head {
    opacity: 1;
    transform: translateY(0);
}
/* Always show — JS-driven progressive enhancement via IntersectionObserver
   would be ideal but we keep CSS-only as graceful default */
.section-head { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   8. IMAGE LOAD-IN FADE
   -------------------------------------------------------------------------- */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.4s ease-out;
}
img[loading="lazy"].is-loaded,
img[loading="lazy"][src]:not([src=""]) {
    opacity: 1;
}
/* Safety net: if JS is disabled, never hide images */
.no-js img[loading="lazy"] {
    opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   9. PREMIUM SCROLLBAR (webkit only — graceful for others)
   -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb {
    background: var(--c-muted);
    border-radius: 6px;
    border: 3px solid var(--c-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-brown-light); }

/* --------------------------------------------------------------------------
   10. PRINT STYLES — make pages printable cleanly
   -------------------------------------------------------------------------- */
@media print {
    .site-header,
    .site-footer,
    .pre-footer-cta,
    .wa-sticky,
    .sofa-sticky-product,
    .breadcrumbs,
    .home-hero__actions,
    .cat-hero__actions,
    .page-cta,
    .home-final-cta {
        display: none !important;
    }
    body {
        background: #fff;
        color: #000;
    }
    .container { max-width: 100%; padding: 0; }
    a { text-decoration: underline; }
    h1, h2, h3 { page-break-after: avoid; }
    .product-card, .why-card, .link-card { page-break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   11. UTILITY: SECTION ALT-BACKGROUND CONSISTENCY
   -------------------------------------------------------------------------- */
.section--alt + .section--alt { padding-top: 0; }
.section--alt:has(+ .section--alt) { padding-bottom: var(--s-7); }

/* --------------------------------------------------------------------------
   12. LOADING SKELETON (for future use with AJAX product loads)
   -------------------------------------------------------------------------- */
.sofa-skeleton {
    background: linear-gradient(
        90deg,
        var(--c-surface-alt) 0%,
        var(--c-muted) 50%,
        var(--c-surface-alt) 100%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border-radius: var(--r-md);
}
@keyframes skeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   13. GLOBAL MOBILE RESPONSIVE SAFETY LAYER
   Guarantees no horizontal overflow + readable layouts on all phones.
   ========================================================================== */

/* Never allow horizontal scroll on any device */
html, body { max-width: 100%; overflow-x: hidden; }
* { min-width: 0; }
img, video, iframe { max-width: 100%; height: auto; }

/* Tablet and below */
@media (max-width: 880px) {
    .container { padding-left: 18px; padding-right: 18px; }
    /* Product grid: 2 columns on tablets */
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    /* Internal link cards: 2 columns */
    .links-grid { grid-template-columns: repeat(2, 1fr); }
    /* Why-choose: 2 columns */
    .why-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Phones */
@media (max-width: 600px) {
    .container { padding-left: 16px; padding-right: 16px; }

    /* Headings scale down so they never overflow */
    h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.2; }
    h2 { font-size: clamp(1.3rem, 5.5vw, 1.7rem); line-height: 1.25; }
    h3 { font-size: clamp(1.05rem, 4.5vw, 1.25rem); }

    /* Product grid: single column on small phones, comfortable cards */
    .product-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

    /* Internal links + why-choose stack to single column */
    .links-grid,
    .why-grid,
    .cat-grid { grid-template-columns: 1fr; }

    /* Section vertical padding tightened on phones */
    .cat-intro,
    .cat-guide,
    .cat-links,
    .product-grid-section,
    .cat-why { padding-top: 36px; padding-bottom: 36px; }

    /* Intro content readable on phones */
    .cat-intro .entry-content { font-size: 1rem; line-height: 1.75; }
    .cat-intro .entry-content h2 { font-size: 1.35rem; }

    /* Buttons full-width and tappable on phones */
    .cat-hero__actions,
    .home-hero__actions,
    .home-final-cta__actions { flex-direction: column; }
    .cat-hero__actions .btn,
    .home-hero__actions .btn,
    .home-final-cta__actions .btn { width: 100%; justify-content: center; }

    /* Buying guide narrower padding */
    .cat-guide__content { font-size: 1rem; }
}

/* Very small phones */
@media (max-width: 380px) {
    .product-grid { grid-template-columns: 1fr; }
    .container { padding-left: 14px; padding-right: 14px; }
}