/*
 * Theme 2 homepage responsive consolidation.
 * Loaded last and scoped to .phase1-home so other storefront/admin pages are untouched.
 */

.phase1-home,
.phase1-home .page-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.phase1-home *,
.phase1-home *::before,
.phase1-home *::after {
    box-sizing: border-box;
}

.phase1-home img,
.phase1-home video,
.phase1-home svg {
    max-width: 100%;
}

.phase1-home .stx-header-container,
.phase1-home .pdf1-hero-container,
.phase1-home .pdf2-section-container,
.phase1-home .pdf3-section > .container,
.phase1-home .pdf3-showcase-section > .container,
.phase1-home .pdf4-home-container {
    width: min(100% - 32px, 1320px);
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: 0;
}

/* Header: allow the search box to shrink instead of forcing horizontal overflow. */
.phase1-home .stx-mainbar__inner,
.phase1-home .stx-search,
.phase1-home .stx-search__box,
.phase1-home .stx-actions,
.phase1-home .stx-category-list {
    min-width: 0;
}

.phase1-home .stx-search {
    flex: 1 1 360px;
    width: auto;
    max-width: none;
}

.phase1-home .stx-search input {
    width: 100%;
    min-width: 0;
}

.phase1-home .stx-categorybar__mobile {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.phase1-home .stx-categorybar__mobile::-webkit-scrollbar {
    display: none;
}

.phase1-home .stx-categorybar__mobile > a {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Hero: retain the image ratio and remove legacy fixed-height stretching. */
.phase1-home .pdf1-hero,
.phase1-home .pdf1-hero-frame,
.phase1-home .pdf1-hero-slide,
.phase1-home .pdf1-hero-media,
.phase1-home .phase6-banner-picture {
    width: 100%;
    min-width: 0;
}

.phase1-home .pdf1-hero-frame,
.phase1-home .pdf1-hero-slide,
.phase1-home .pdf1-hero-media {
    height: auto;
    min-height: 0;
}

.phase1-home .phase6-banner-picture {
    display: block;
}

.phase1-home .pdf1-hero-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 5;
    object-fit: cover;
    object-position: center;
}

.phase1-home .pdf1-hero-copy-wrap {
    inset: 0;
    width: 100%;
    max-width: 100%;
}

.phase1-home .banner-six-card {
    max-width: min(46%, 560px);
}

/* Every horizontal rail remains inside the viewport and is touch-scrollable. */
.phase1-home .pdf2-scroll-track,
.phase1-home .pdf3-scroll-track,
.phase1-home .pdf4-partner-track {
    max-width: 100%;
    touch-action: manipulation !important;
    overscroll-behavior-y: auto;
}

/* The marquee intentionally uses a 200%/300%/600% track. Never constrain it
   to the viewport or its repeated banner groups collapse into tiny columns. */
.phase1-home .pdf1-promo-track {
    max-width: none;
    touch-action: manipulation !important;
}

/* Carousel gestures must never trap vertical page scrolling on touch screens.
   Swiper handles horizontal movement itself; native rails can pan both axes. */
.phase1-home :where(.swiper, .swiper-container, .slick-slider, .owl-carousel) {
    touch-action: pan-y pinch-zoom !important;
}

.phase1-home .pdf2-category-track.is-auto-carousel {
    scroll-snap-type: none !important;
}

/* Give the promotional banner strip enough visual weight below the hero. */
@media (min-width: 768px) {
    .phase1-home .pdf1-promo-section {
        padding-block: 16px 14px;
    }

    .phase1-home .pdf1-promo-card {
        height: auto;
        min-height: 0;
        aspect-ratio: 2.72 / 1;
    }

    .phase1-home .pdf1-promo-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #f5f6f7;
    }
}

.phase1-home .pdf2-scroll-shell,
.phase1-home .pdf3-scroll-shell,
.phase1-home .pdf3-section-card,
.phase1-home .pdf3-category-rail,
.phase1-home .pdf3-spotlight {
    min-width: 0;
    max-width: 100%;
}

.phase1-home .pdf3-explore-grid,
.phase1-home .pdf4-testimonial-grid {
    min-width: 0;
}

/* Prevent long product/content text from expanding a card or grid column. */
.phase1-home .pdf2-product-card,
.phase1-home .pdf3-product-card,
.phase1-home .pdf3-explore-group,
.phase1-home .pdf3-explore-item,
.phase1-home .pdf3-rail-item,
.phase1-home .pdf4-testimonial-card {
    min-width: 0;
}

.phase1-home .pdf2-product-card *,
.phase1-home .pdf3-product-card *,
.phase1-home .pdf3-explore-item-title,
.phase1-home .pdf3-rail-item-title,
.phase1-home .pdf4-testimonial-quote {
    overflow-wrap: anywhere;
}

/* Desktop refinement. */
@media (min-width: 1200px) {
    .phase1-home .stx-mainbar__inner {
        gap: clamp(18px, 2vw, 34px);
    }

    .phase1-home .stx-logo {
        flex: 0 0 clamp(150px, 14vw, 210px);
    }

    .phase1-home .stx-actions {
        flex: 0 1 auto;
        gap: clamp(10px, 1.25vw, 20px);
    }

    .phase1-home .pdf3-explore-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Laptop/tablet: keep useful density without clipped content. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .phase1-home .pdf1-hero-image {
        aspect-ratio: 16 / 5.6;
    }

    .phase1-home .pdf3-explore-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .phase1-home .pdf4-testimonial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile/tablet header and homepage. */
@media (max-width: 991.98px) {
    .phase1-home .stx-mainbar__inner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px 12px;
        padding-block: 10px;
    }

    .phase1-home .stx-mobile-menu-btn {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
    }

    .phase1-home .stx-logo {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
        min-width: 0;
    }

    .phase1-home .stx-logo img {
        width: auto;
        max-width: min(180px, 42vw);
        height: clamp(36px, 7vw, 48px);
        object-fit: contain;
    }

    .phase1-home .stx-mobile-actions {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        gap: 5px;
    }

    .phase1-home .stx-search {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        margin: 0;
    }

    .phase1-home .stx-search__box {
        width: 100%;
    }

    .phase1-home .stx-categorybar__mobile {
        justify-content: flex-start;
    }

    .phase1-home .pdf2-scroll-btn,
    .phase1-home .pdf3-scroll-btn {
        display: none;
    }

    .phase1-home .pdf2-scroll-track,
    .phase1-home .pdf3-scroll-track {
        scroll-snap-type: x proximity;
    }

    .phase1-home .pdf2-category-track.is-auto-carousel {
        scroll-snap-type: none !important;
    }

    .phase1-home .pdf3-explore-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .phase1-home .stx-header-container,
    .phase1-home .pdf1-hero-container,
    .phase1-home .pdf2-section-container,
    .phase1-home .pdf3-section > .container,
    .phase1-home .pdf3-showcase-section > .container,
    .phase1-home .pdf4-home-container {
        width: min(100% - 24px, 100%);
    }

    .phase1-home .pdf1-hero-section {
        padding-block: 10px 4px;
    }

    .phase1-home .pdf1-hero-frame {
        border-radius: 10px;
    }

    .phase1-home .pdf1-hero-image {
        aspect-ratio: 4 / 3;
        object-position: center;
    }

    .phase1-home .banner-six-card {
        max-width: min(72%, 340px);
        padding: 12px;
    }

    .phase1-home .banner-six-title {
        font-size: clamp(18px, 6vw, 30px);
        line-height: 1.12;
    }

    .phase1-home .banner-six-subtitle {
        font-size: clamp(11px, 3vw, 14px);
    }

    .phase1-home .banner-six-card .create-btn-base {
        min-height: 38px;
        padding: 8px 13px;
        font-size: 12px;
    }

    .phase1-home .pdf2-category-section,
    .phase1-home .pdf2-quick-deal-section,
    .phase1-home .pdf3-section,
    .phase1-home .pdf4-testimonials,
    .phase1-home .pdf4-partners {
        padding-block: 10px;
    }

    .phase1-home .pdf2-section-heading,
    .phase1-home .pdf2-quick-deal-titlebar,
    .phase1-home .pdf3-section-head,
    .phase1-home .pdf3-section-head-plain,
    .phase1-home .pdf3-spotlight-head {
        min-height: 48px;
        padding: 10px 12px;
        gap: 8px;
    }

    .phase1-home .pdf2-section-heading h2,
    .phase1-home .pdf2-quick-deal-titlebar h2,
    .phase1-home .pdf3-section-head h2,
    .phase1-home .pdf3-section-head-plain h2,
    .phase1-home .pdf3-spotlight-title,
    .phase1-home .pdf4-section-heading h2 {
        font-size: clamp(16px, 4.8vw, 20px);
        line-height: 1.25;
    }

    .phase1-home .pdf2-category-track {
        justify-content: flex-start;
        gap: 10px;
        padding-inline: 12px;
    }

    .phase1-home .pdf2-category-item {
        flex-basis: clamp(84px, 27vw, 106px);
    }

    .phase1-home .pdf2-product-track,
    .phase1-home .pdf3-product-track,
    .phase1-home .pdf3-rail-track {
        gap: 10px;
        padding: 12px;
    }

    .phase1-home .pdf2-product-card,
    .phase1-home .pdf3-product-card {
        flex-basis: min(44vw, 190px);
    }

    .phase1-home .pdf3-rail-item {
        flex-basis: min(32vw, 130px);
    }

    .phase1-home .pdf3-explore-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
    }

    .phase1-home .pdf3-explore-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .phase1-home .pdf4-testimonial-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .phase1-home .footer-eight-top .row > [class*="col-"] {
        width: 100%;
        margin-bottom: 12px;
        text-align: center;
    }

    .phase1-home .footer-eight-top form,
    .phase1-home .footer-eight-top .input-group {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .phase1-home .stx-mainbar__inner {
        gap: 8px;
    }

    .phase1-home .stx-logo img {
        max-width: 38vw;
        height: 36px;
    }

    .phase1-home .stx-mobile-action {
        width: 36px;
        height: 36px;
    }

    .phase1-home .stx-search input {
        min-height: 42px;
        padding-inline: 12px 46px;
        font-size: 14px;
    }

    .phase1-home .pdf1-hero-image {
        aspect-ratio: 1 / 1;
    }

    .phase1-home .pdf1-promo-card {
        height: auto;
        min-height: 0;
        aspect-ratio: 2.72 / 1;
    }

    .phase1-home .pdf1-promo-image {
        object-fit: contain;
        background: #f5f6f7;
    }

    .phase1-home .banner-six-card {
        max-width: 78%;
    }

    .phase1-home .pdf2-product-card,
    .phase1-home .pdf3-product-card {
        flex-basis: calc((100vw - 46px) / 2);
        max-width: 180px;
    }

    .phase1-home .pdf3-view-all {
        min-height: 32px;
        padding: 6px 10px;
        font-size: 11px;
    }

    /* Override the old phone-only horizontal card carousel. Each category
       becomes a full-width row, so no second card is cut off at the right. */
    .phase1-home .pdf3-explore-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        overflow: visible !important;
        gap: 12px !important;
        padding: 10px !important;
    }

    .phase1-home .pdf3-explore-group {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: none !important;
        padding: 12px !important;
    }

    .phase1-home .pdf3-explore-items {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    /* Three category items fit evenly across the phone instead of leaving
       the third item partially outside the viewport. */
    .phase1-home .pdf3-category-rail {
        padding-inline: 10px !important;
    }

    .phase1-home .pdf3-rail-track {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
        overflow: visible !important;
        gap: 8px !important;
        padding: 10px 2px 4px !important;
    }

    .phase1-home .pdf3-rail-item {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: none !important;
    }

    .phase1-home .pdf3-rail-image-wrap {
        width: clamp(68px, 22vw, 92px) !important;
        height: clamp(68px, 22vw, 92px) !important;
        margin-inline: auto;
    }

    .phase1-home .pdf3-rail-item-title {
        width: 100%;
        min-height: 32px;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* Explore by Products: compact mobile card rail with a next-card preview. */
@media (max-width: 575.98px) {
    .phase1-home .pdf3-explore-section {
        padding-block: 10px 12px;
    }

    .phase1-home .pdf3-explore-card {
        overflow: hidden;
        padding: 0 0 12px !important;
        border-radius: 14px;
        background: linear-gradient(180deg, #fff 0%, #f7fafc 100%);
    }

    .phase1-home .pdf3-explore-card .pdf3-section-head {
        min-height: 50px;
        margin: 0 0 12px !important;
        padding: 11px 14px;
        background: linear-gradient(90deg, #f2f9fe 0%, #fff 88%);
    }

    .phase1-home .pdf3-explore-card .pdf3-section-head h2 {
        font-size: 16px;
        line-height: 1.25;
        letter-spacing: .01em;
    }

    .phase1-home .pdf3-explore-grid {
        display: flex !important;
        width: 100% !important;
        gap: 12px !important;
        padding: 2px 14px 10px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-padding-inline: 14px;
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: manipulation !important;
        scrollbar-width: none;
    }

    .phase1-home .pdf3-explore-grid::-webkit-scrollbar {
        display: none;
    }

    .phase1-home .pdf3-explore-group {
        flex: 0 0 min(calc(100vw - 62px), 350px) !important;
        width: min(calc(100vw - 62px), 350px) !important;
        max-width: 350px !important;
        min-width: 250px !important;
        padding: 13px !important;
        scroll-snap-align: start;
        border: 1px solid #e0e9ef;
        border-radius: 13px;
        background: #fff;
        box-shadow: 0 6px 18px rgba(28, 62, 88, .09);
    }

    .phase1-home .pdf3-explore-group h3 {
        position: relative;
        min-height: 0;
        margin: 0 0 11px;
        padding: 0 0 9px 11px;
        border-bottom: 1px solid #edf2f5;
        color: #172b3a;
        font-size: 14px;
        font-weight: 750;
        line-height: 1.3;
        white-space: normal;
    }

    .phase1-home .pdf3-explore-group h3::before {
        content: "";
        position: absolute;
        left: 0;
        top: 2px;
        width: 4px;
        height: 17px;
        border-radius: 4px;
        background: #3185c5;
    }

    .phase1-home .pdf3-explore-items {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 10px !important;
    }

    .phase1-home .pdf3-explore-item {
        min-width: 0;
        border-radius: 9px;
    }

    .phase1-home .pdf3-explore-image-wrap {
        width: 100%;
        aspect-ratio: 1.24 / 1 !important;
        border: 1px solid rgba(34, 75, 103, .05);
        border-radius: 9px;
    }

    .phase1-home .pdf3-explore-image {
        padding: 4px;
        object-fit: contain;
    }

    .phase1-home .pdf3-explore-item-title {
        display: -webkit-box;
        min-height: 34px;
        margin-top: 6px;
        overflow: hidden;
        color: #344755;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.35;
        white-space: normal !important;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .phase1-home .pdf3-see-more {
        width: 100%;
        min-height: 38px;
        margin-top: 12px;
        align-items: center;
        justify-content: center;
        border: 1px solid #b9d8eb;
        border-radius: 8px;
        background: #eff8fd;
        color: #176fa7;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
    }
}

@media (max-width: 359.98px) {
    .phase1-home .pdf3-explore-group {
        flex-basis: calc(100vw - 50px) !important;
        width: calc(100vw - 50px) !important;
        min-width: 238px !important;
    }
}

@supports not (overflow: clip) {
    .phase1-home,
    .phase1-home .page-wrapper {
        overflow-x: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .phase1-home .pdf1-promo-track,
    .phase1-home .pdf2-scroll-track,
    .phase1-home .pdf3-scroll-track {
        scroll-behavior: auto;
    }
}