/* ==========================================================================
   Used iPhone Store — Front Page
   ========================================================================== */


/* ==========================================================================
   Shared Section Helpers
   ========================================================================== */

.used-iphone-home-container {
    overflow: clip;
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 7px;

    color: var(--used-primary-blue);

    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.section-heading-centered {
    max-width: 720px;
    margin: 0 auto 28px;

    text-align: center;
}

.section-heading-centered h2 {
    margin: 0;

    color: var(--used-text-main);

    font-size: 28px;
    font-weight: 900;
    line-height: 1.45;
}

.section-heading-centered .section-subtitle {
    max-width: 620px;
    margin: 8px auto 0;
}

.view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    flex: 0 0 auto;

    color: var(--used-primary-blue);

    font-size: 13px;
    font-weight: 800;

    text-decoration: none !important;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.view-all-link:hover {
    color: var(--used-primary-blue-dark);
    transform: translateX(-2px);
}

.view-all-link > span,
.view-all-link > svg {
    width: 16px;
    height: 16px;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.hero-showcase-section {
    position: relative;

    padding: 68px 0 58px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(56, 189, 248, 0.18),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #f0f9ff 0%,
            #ffffff 100%
        );

    border-bottom: 1px solid #e0f2fe;
}

.hero-showcase-section::before {
    position: absolute;

    width: 420px;
    height: 420px;

    inset-block-start: -180px;
    inset-inline-start: -180px;

    background: rgba(186, 230, 253, 0.22);

    border-radius: 50%;

    content: "";

    pointer-events: none;
}

.hero-grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, 0.92fr);

    gap: 52px;

    align-items: center;
}

.hero-content,
.hero-visual {
    min-width: 0;
}

.front-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 17px;

    padding: 7px 13px;

    color: var(--used-primary-blue);

    background: rgba(224, 242, 254, 0.8);

    border: 1px solid var(--used-sky-border);

    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;
}

.hero-badge-icon {
    display: inline-flex;

    width: 16px;
    height: 16px;
}

.hero-badge-icon svg {
    width: 100%;
    height: 100%;
}

.hero-title {
    max-width: 720px;

    margin: 0 0 18px;

    color: var(--used-text-main);

    font-size: clamp(30px, 4vw, 43px);

    font-weight: 950;

    line-height: 1.4;

    letter-spacing: -0.02em;
}

.hero-title .highlight-text {
    color: var(--used-primary-blue);
}

@supports (
    (-webkit-background-clip: text)
    or
    (background-clip: text)
) {

    .hero-title .highlight-text {
        background:
            linear-gradient(
                120deg,
                #0284c7 0%,
                #38bdf8 100%
            );

        background-clip: text;
        -webkit-background-clip: text;

        -webkit-text-fill-color: transparent;
    }
}

.hero-desc {
    max-width: 690px;

    margin: 0 0 27px;

    color: #475569;

    font-size: 15px;

    line-height: 1.95;
}

.hero-cta-group {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}

.hero-trust-points {
    display: flex;
    flex-wrap: wrap;

    gap: 16px;

    margin-top: 21px;

    color: var(--used-text-muted);

    font-size: 11px;
    font-weight: 700;
}

.hero-trust-points span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.hero-trust-points span > span {
    display: inline-flex;

    width: 15px;
    height: 15px;

    color: var(--used-success);
}

.hero-trust-points svg {
    width: 100%;
    height: 100%;
}

.hero-image-wrapper {
    position: relative;

    width: 100%;
    max-width: 560px;

    margin-inline: auto;

    text-align: center;
}

.hero-image-glow {
    position: absolute;

    z-index: 0;

    width: 78%;
    height: 78%;

    inset: 11%;

    background:
        radial-gradient(
            circle,
            rgba(56, 189, 248, 0.28),
            rgba(56, 189, 248, 0)
        );

    filter: blur(12px);
}

.hero-image-wrapper > img {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    height: auto;

    border-radius: 30px;

    filter:
        drop-shadow(
            0 24px 45px rgba(2, 132, 199, 0.18)
        );
}

.floating-stat-box {
    position: absolute;
    z-index: 3;

    display: flex;
    align-items: center;
    gap: 10px;

    max-width: 280px;

    padding: 11px 14px;

    text-align: start;

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid rgba(186, 230, 253, 0.95);

    border-radius: 15px;

    box-shadow:
        0 14px 32px rgba(15, 23, 42, 0.08);

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.floating-stat-box > .stat-icon {
    display: flex;
    flex: 0 0 38px;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    color: var(--used-primary-blue);

    background: var(--used-primary-blue-light);

    border-radius: 11px;
}

.floating-stat-box .stat-icon svg {
    width: 20px;
    height: 20px;
}

.floating-stat-box strong {
    display: block;

    color: var(--used-text-main);

    font-size: 12px;
    line-height: 1.55;
}

.floating-stat-box small {
    display: block;

    color: var(--used-text-muted);

    font-size: 9px;
    line-height: 1.55;
}

.battery-stat {
    inset-inline-end: -12px;
    inset-block-end: 25px;
}

.grade-stat {
    inset-block-start: 25px;
    inset-inline-start: -12px;
}


/* ==========================================================================
   QUICK CATEGORY
   ========================================================================== */

.quick-category-section {
    padding: 42px 0;
}

.section-heading-clean {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}

.section-heading-clean > * {
    min-width: 0;
}

.section-heading-clean h2 {
    margin: 0;

    overflow-wrap: anywhere;

    color: var(--used-text-main);

    font-size: 22px;
    font-weight: 900;

    line-height: 1.5;
}

.section-subtitle {
    margin: 5px 0 0;

    color: var(--used-text-muted);

    font-size: 12px;

    line-height: 1.75;
}

.used-iphone-chips-wrapper {
    display: flex;

    gap: 12px;

    padding: 9px 4px;

    overflow-x: auto;

    cursor: grab;

    scrollbar-width: none;

    overscroll-behavior-inline: contain;

    -webkit-overflow-scrolling: touch;
}

.used-iphone-chips-wrapper.active {
    cursor: grabbing;
    user-select: none;
}

.used-iphone-chips-wrapper::-webkit-scrollbar {
    display: none;
}

.iphone-chip-card {
    display: flex;

    flex: 0 0 auto;

    align-items: center;

    gap: 10px;

    min-height: 46px;

    padding: 11px 17px;

    color: inherit;

    background: #ffffff;

    border: 1px solid var(--used-border);

    border-radius: var(--used-radius-md);

    box-shadow:
        0 3px 12px rgba(15, 23, 42, 0.035);

    text-decoration: none !important;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.iphone-chip-card:hover {
    background: var(--used-primary-blue-light);

    border-color: #38bdf8;

    box-shadow:
        0 8px 18px rgba(2, 132, 199, 0.08);

    transform: translateY(-2px);
}

.chip-tag {
    padding: 2px 8px;

    color: var(--used-primary-blue-dark);

    background: #e0f2fe;

    border-radius: 12px;

    font-size: 9px;
    font-weight: 800;

    line-height: 1.6;
}

.chip-title {
    color: #1e293b;

    font-size: 12px;
    font-weight: 800;

    white-space: nowrap;
}

.chip-arrow {
    color: #94a3b8;

    font-size: 13px;
}


/* ==========================================================================
   MODEL SHOWCASE
   ========================================================================== */

.model-showcase-section {
    padding: 54px 0 64px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        );
}

.model-showcase-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    grid-auto-rows: 235px;

    gap: 16px;
}

.model-showcase-card {
    position: relative;

    display: block;

    min-width: 0;

    overflow: hidden;

    color: #ffffff;

    background: #e2e8f0;

    border-radius: 22px;

    box-shadow:
        0 7px 24px rgba(15, 23, 42, 0.06);

    text-decoration: none !important;

    isolation: isolate;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.model-showcase-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.12);
}

.model-card-large {
    grid-column: span 2;
    grid-row: span 2;
}

.model-showcase-card > img {
    position: absolute;

    z-index: -2;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.45s ease;
}

.model-showcase-card:hover > img {
    transform: scale(1.055);
}

.model-card-overlay {
    position: absolute;

    z-index: -1;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(15, 23, 42, 0.04) 0%,
            rgba(15, 23, 42, 0.22) 40%,
            rgba(15, 23, 42, 0.86) 100%
        );
}

.model-card-content {
    position: absolute;

    inset-inline: 20px;
    inset-block-end: 20px;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
}

.model-card-count {
    display: inline-flex;

    margin-bottom: 7px;

    padding: 4px 8px;

    color: #ffffff;

    background: rgba(2, 132, 199, 0.82);

    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;
}

.model-card-title {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-size: 20px;
    font-weight: 900;

    line-height: 1.35;
}

.model-card-description {
    display: -webkit-box;

    max-width: 92%;

    margin-bottom: 10px;

    overflow: hidden;

    color: rgba(255, 255, 255, 0.84);

    font-size: 10px;

    line-height: 1.65;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.model-card-link {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: #ffffff;

    font-size: 10px;
    font-weight: 800;
}

.model-card-link > span {
    display: inline-flex;

    width: 15px;
    height: 15px;
}

.model-card-link svg {
    width: 100%;
    height: 100%;
}


/* ==========================================================================
   TRUST
   ========================================================================== */

.trust-features-section {
    padding: 40px 0;

    background: var(--used-surface-muted);

    border-block:
        1px solid var(--used-border-light);
}

.trust-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;
}

.trust-card {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    min-width: 0;

    padding: 20px;

    background: #ffffff;

    border: 1px solid var(--used-border-light);

    border-radius: 18px;

    box-shadow:
        0 4px 15px rgba(15, 23, 42, 0.025);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.trust-card:hover {
    border-color: var(--used-sky-border);

    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.06);

    transform: translateY(-3px);
}

.trust-icon {
    display: flex;

    flex: 0 0 45px;

    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    color: var(--used-primary-blue);

    background:
        linear-gradient(
            135deg,
            #e0f2fe,
            #f0f9ff
        );

    border-radius: 13px;
}

.trust-icon svg {
    width: 22px;
    height: 22px;
}

.trust-info {
    min-width: 0;
}

.trust-info h3 {
    margin: 0 0 4px;

    overflow-wrap: anywhere;

    color: var(--used-text-main);

    font-size: 13px;
    font-weight: 900;

    line-height: 1.55;
}

.trust-info p {
    margin: 0;

    color: var(--used-text-muted);

    font-size: 10px;

    line-height: 1.7;
}


/* ==========================================================================
   FEATURED PRODUCTS
   ========================================================================== */

.featured-products-section {
    padding: 58px 0;
}

.front-page-products-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;
}

.front-page-product-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid var(--used-border);

    border-radius: 20px;

    box-shadow:
        0 5px 18px rgba(15, 23, 42, 0.035);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.front-page-product-card:hover {
    border-color: var(--used-sky-border);

    box-shadow:
        0 15px 35px rgba(15, 23, 42, 0.09);

    transform: translateY(-4px);
}

.front-page-product-image {
    position: relative;

    display: block;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            #f8fafc 72%
        );

    text-decoration: none !important;
}

.front-page-product-image img {
    display: block;

    width: 100%;
    height: 100%;

    padding: 18px;

    object-fit: contain;

    transition:
        transform 0.35s ease;
}

.front-page-product-card:hover
.front-page-product-image img {
    transform: scale(1.045);
}

.product-image-badge {
    position: absolute;

    inset-block-start: 12px;
    inset-inline-start: 12px;

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 5px 8px;

    color: #047857;

    background: rgba(236, 253, 245, 0.94);

    border: 1px solid #a7f3d0;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 900;
}

.product-image-badge > span {
    display: inline-flex;

    width: 12px;
    height: 12px;
}

.product-image-badge svg {
    width: 100%;
    height: 100%;
}

.front-page-product-content {
    padding: 17px;
}

.front-page-product-category {
    margin-bottom: 5px;

    color: var(--used-primary-blue);

    font-size: 9px;
    font-weight: 900;
}

.front-page-product-title {
    min-height: 46px;

    margin: 0 0 10px;

    font-size: 13px;
    font-weight: 900;

    line-height: 1.65;
}

.front-page-product-title a {
    color: var(--used-text-main);

    text-decoration: none !important;
}

.front-page-product-title a:hover {
    color: var(--used-primary-blue);
}

.front-page-product-meta {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 10px;
}

.product-stock-label {
    padding: 4px 8px;

    color: #047857;

    background: #ecfdf5;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 900;
}

.product-arrow {
    display: inline-flex;

    color: #94a3b8;
}

.product-arrow svg {
    width: 16px;
    height: 16px;
}

.front-page-product-price {
    min-height: 27px;

    margin-bottom: 13px;

    color: var(--used-text-main);

    font-size: 14px;
    font-weight: 950;
}

.front-page-product-price del {
    margin-inline-end: 5px;

    color: #94a3b8;

    font-size: 9px;
    font-weight: 500;
}

.front-page-product-price ins {
    color: var(--used-primary-blue);

    text-decoration: none;
}

.front-page-product-button {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 41px;

    color: var(--used-primary-blue) !important;

    background: #f0f9ff;

    border: 1px solid var(--used-sky-border);

    border-radius: 11px;

    font-size: 10px;
    font-weight: 900;

    text-decoration: none !important;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.front-page-product-button:hover {
    color: #ffffff !important;

    background: var(--used-primary-blue);

    border-color: var(--used-primary-blue);
}


/* ==========================================================================
   TRADE-IN BANNER
   ========================================================================== */

.tradein-promo-section {
    padding: 0 0 60px;
}

.promo-banner-card {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(280px, 0.8fr);

    align-items: center;

    gap: 30px;

    min-height: 310px;

    padding: 42px;

    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(125, 211, 252, 0.35),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #0284c7 0%,
            #0369a1 100%
        );

    border-radius: 26px;

    box-shadow:
        0 18px 42px rgba(2, 132, 199, 0.24);
}

.promo-banner-card::before {
    position: absolute;

    width: 360px;
    height: 360px;

    inset-inline-end: -180px;
    inset-block-end: -220px;

    background: rgba(255, 255, 255, 0.11);

    border-radius: 50%;

    content: "";

    pointer-events: none;
}

.promo-banner-card > * {
    position: relative;

    z-index: 1;

    min-width: 0;
}

.promo-text {
    max-width: 700px;
}

.promo-tag {
    display: inline-flex;

    margin-bottom: 10px;

    padding: 5px 10px;

    color: #ffffff;

    background: rgba(255, 255, 255, 0.15);

    border: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: 999px;

    font-size: 9px;
    font-weight: 900;
}

.promo-text h2 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 27px;
    font-weight: 950;

    line-height: 1.45;
}

.promo-text p {
    max-width: 650px;

    margin: 0 0 21px;

    color: rgba(255, 255, 255, 0.88);

    font-size: 13px;

    line-height: 1.85;
}

.promo-visual {
    position: relative;

    min-height: 220px;

    display: flex;

    align-items: center;
    justify-content: center;
}

.promo-visual img {
    display: block;

    width: 100%;
    max-width: 430px;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 20px 28px rgba(15, 23, 42, 0.18)
        );
}

.promo-badge-graphic {
    position: absolute;

    inset-inline-start: 12%;
    inset-block-end: 5%;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    color: var(--used-primary-blue);

    background: #ffffff;

    border: 7px solid rgba(255, 255, 255, 0.18);

    border-radius: 50%;

    box-shadow:
        0 12px 25px rgba(15, 23, 42, 0.14);
}

.exchange-icon {
    display: flex;

    width: 28px;
    height: 28px;
}

.exchange-icon svg {
    width: 100%;
    height: 100%;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {

    .model-showcase-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .front-page-products-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .trust-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 900px) {

    .hero-grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 40px;

        text-align: center;
    }

    .hero-content {
        display: flex;

        flex-direction: column;

        align-items: center;
    }

    .hero-desc {
        max-width: 700px;
    }

    .hero-trust-points {
        justify-content: center;
    }

    .hero-image-wrapper {
        max-width: 520px;
    }

    .promo-banner-card {
        grid-template-columns:
            minmax(0, 1fr);

        text-align: center;
    }

    .promo-text {
        margin-inline: auto;
    }

    .promo-text p {
        margin-inline: auto;
    }

    .promo-visual {
        min-height: 190px;
    }

}


@media (max-width: 768px) {

    .hero-showcase-section {
        padding: 45px 0 42px;
    }

    .hero-title {
        font-size: 29px;
    }

    .hero-desc {
        font-size: 13px;
    }

    .hero-cta-group {
        justify-content: center;
    }

    .hero-trust-points {
        gap: 10px 14px;
    }

    .floating-stat-box {
        max-width: 235px;

        padding: 9px 11px;
    }

    .floating-stat-box strong {
        font-size: 10px;
    }

    .floating-stat-box small {
        font-size: 8px;
    }

    .battery-stat {
        inset-inline-end: 0;
        inset-block-end: 10px;
    }

    .grade-stat {
        inset-inline-start: 0;
        inset-block-start: 10px;
    }

    .section-heading-clean {
        align-items: flex-start;
    }

    .section-heading-clean h2 {
        font-size: 19px;
    }

    .section-heading-centered h2 {
        font-size: 23px;
    }

    .model-showcase-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-auto-rows: 190px;

        gap: 11px;
    }

    .model-card-large {
        grid-column: span 2;
        grid-row: span 1;
    }

    .model-card-content {
        inset-inline: 14px;
        inset-block-end: 14px;
    }

    .model-card-title {
        font-size: 16px;
    }

    .model-card-description {
        font-size: 9px;
    }

    .front-page-products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    .front-page-product-content {
        padding: 13px;
    }

    .front-page-product-title {
        min-height: 42px;

        font-size: 11px;
    }

    .front-page-product-price {
        font-size: 12px;
    }

    .promo-banner-card {
        padding: 30px 20px;

        border-radius: 21px;
    }

    .promo-text h2 {
        font-size: 21px;
    }

}


@media (max-width: 480px) {

    .used-iphone-home-container .ct-container {
        padding-inline: 15px;
    }

    .hero-title {
        font-size: 25px;
    }

    .hero-cta-group {
        width: 100%;
    }

    .hero-cta-group .btn-primary-blue,
    .hero-cta-group .btn-outline-blue {
        width: 100%;
    }

    .hero-trust-points {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        width: 100%;
    }

    .floating-stat-box {
        transform: scale(0.88);
        transform-origin: center;
    }

    .model-showcase-grid {
        grid-auto-rows: 170px;
    }

    .model-card-description {
        display: none;
    }

    .model-card-title {
        font-size: 14px;
    }

    .model-card-count {
        font-size: 8px;
    }

    .front-page-product-image img {
        padding: 12px;
    }

    .front-page-product-content {
        padding: 11px;
    }

    .front-page-product-title {
        font-size: 10px;
    }

    .front-page-product-button {
        min-height: 38px;

        font-size: 9px;
    }

    .trust-grid {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .promo-visual {
        min-height: 150px;
    }

}

/* ==========================================================================
   Configurable category showcase and horizontal category product rails
   ========================================================================== */
.home-category-showcase { padding: 34px 0 46px; }
.home-category-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.home-category-card { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; color: inherit; text-align: center; text-decoration: none !important; background: #fff; border: 1px solid var(--used-border, #e2e8f0); border-radius: 18px; transition: transform .2s ease, box-shadow .2s ease; }
.home-category-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15,23,42,.08); }
.home-category-image { display: grid; place-items: center; width: 100%; max-width: 112px; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: #f8fafc; }
.home-category-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.home-category-name { font-size: 13px; font-weight: 800; line-height: 1.5; }
.home-category-count { color: var(--used-text-muted, #64748b); font-size: 11px; }
.home-category-fallback { font-size: 32px; color: #94a3b8; }
.home-category-style-circles .home-category-image { border-radius: 50%; width: min(100%, 104px); }
.home-category-style-circles .home-category-card { background: transparent; border-color: transparent; box-shadow: none; }
.home-category-style-scroll .home-category-list { display: flex; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.home-category-style-scroll .home-category-card { flex: 0 0 150px; scroll-snap-align: start; }
.home-product-rail { padding-top: 24px; }
.home-product-rail-track { display: flex !important; grid-template-columns: none !important; gap: 16px; overflow-x: auto; padding: 4px 2px 18px; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.home-product-rail-track > .front-page-product-card { flex: 0 0 calc((100% - 48px) / 4); scroll-snap-align: start; }
.home-product-rail-track:focus-visible { outline: 2px solid var(--used-primary-blue, #0284c7); outline-offset: 3px; }
@media (max-width: 1100px) { .home-category-list { grid-template-columns: repeat(4, minmax(0,1fr)); } .home-product-rail-track > .front-page-product-card { flex-basis: calc((100% - 32px) / 3); } }
@media (max-width: 700px) { .home-category-list { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; } .home-category-card { padding: 11px 7px; border-radius: 14px; } .home-category-image { max-width: 82px; } .home-category-name { font-size: 11px; } .home-category-count { font-size: 10px; } .home-product-rail-track > .front-page-product-card { flex-basis: 68%; } }
@media (max-width: 420px) { .home-category-list { grid-template-columns: repeat(2, minmax(0,1fr)); } .home-category-style-scroll .home-category-card { flex-basis: 126px; } }


/* Homepage product rails: refined rounded product imagery and cards */
.home-product-rail { padding-block: clamp(28px, 4vw, 54px); }
.home-product-rail .ct-container { width: min(100% - 32px, 1280px); margin-inline: auto; }
.home-product-rail .section-heading-clean { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:20px; }
.home-product-rail .section-heading-clean h2 { margin:4px 0 0; font-size:clamp(20px,2vw,28px); font-weight:800; letter-spacing:-.03em; }
.home-product-rail .section-kicker { display:inline-block; color:#0284c7; font-size:12px; font-weight:750; }
.home-product-rail-track { display:flex !important; grid-template-columns:none !important; gap:clamp(12px,1.5vw,20px); overflow-x:auto; overflow-y:hidden; padding:5px 3px 22px; scroll-snap-type:x mandatory; scroll-padding-inline:3px; overscroll-behavior-inline:contain; scrollbar-width:thin; }
.home-product-rail-track > .front-page-product-card { flex:0 0 calc((100% - 60px)/4); min-width:0; border-radius:24px; overflow:hidden; scroll-snap-align:start; background:#fff; border:1px solid rgba(148,163,184,.22); box-shadow:0 8px 24px rgba(15,23,42,.055); transition:transform .22s ease,box-shadow .22s ease; }
.home-product-rail-track > .front-page-product-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(15,23,42,.12); }
.home-product-rail-track .front-page-product-image { margin:9px 9px 0; border-radius:18px !important; aspect-ratio:1/1; overflow:hidden; }
.home-product-rail-track .front-page-product-image img { border-radius:18px !important; object-fit:contain; }
.home-product-rail-track .front-page-product-content { padding:14px 15px 16px; }
.home-product-rail-track .front-page-product-title { line-height:1.65; }
.home-editorial-insert { width:min(100% - 32px,1280px); margin:20px auto; }
.home-editorial-insert > :first-child { margin-top:0; }
.home-editorial-insert img, .home-editorial-insert figure, .home-editorial-insert .wp-block-cover { border-radius:20px; overflow:hidden; }
@media(max-width:1000px) { .home-product-rail-track > .front-page-product-card { flex-basis:calc((100% - 36px)/3); } }
@media(max-width:700px) { .home-product-rail .ct-container { width:calc(100% - 24px); } .home-product-rail .section-heading-clean { margin-bottom:14px; } .home-product-rail-track { gap:12px; } .home-product-rail-track > .front-page-product-card { flex-basis:72%; border-radius:20px; } .home-product-rail-track .front-page-product-image { margin:7px 7px 0; border-radius:16px !important; } .home-product-rail-track .front-page-product-image img { border-radius:16px !important; } .home-product-rail-track .front-page-product-content { padding:12px; } }


/* Premium responsive product rails: smaller cards, refined framing and autoplay affordance */
.home-product-rail { position:relative; }
.home-product-rail::before { content:""; display:block; height:1px; width:min(100% - 32px,1280px); margin:0 auto clamp(18px,2.4vw,28px); background:linear-gradient(90deg,transparent,rgba(14,165,233,.28),rgba(99,102,241,.2),transparent); }
.home-product-rail .section-heading-clean { position:relative; padding:0 0 13px; border-bottom:1px solid rgba(148,163,184,.22); }
.home-product-rail .section-heading-clean::after { content:""; position:absolute; inset-inline-start:0; bottom:-1px; width:76px; height:3px; border-radius:99px; background:linear-gradient(90deg,#0ea5e9,#6366f1); }
.home-product-rail .home-rail-heading-copy { min-width:0; }
.home-product-rail .section-kicker { padding:4px 10px; border:1px solid rgba(14,165,233,.18); border-radius:999px; background:linear-gradient(135deg,rgba(14,165,233,.08),rgba(99,102,241,.06)); }
.home-product-rail .view-all-link { flex:0 0 auto; padding:9px 13px; border:1px solid rgba(14,165,233,.22); border-radius:999px; background:#fff; box-shadow:0 4px 14px rgba(15,23,42,.04); }
.home-product-rail-track { position:relative; padding:10px 4px 22px; gap:clamp(10px,1.25vw,16px); scroll-behavior:smooth; }
.home-product-rail-track > .front-page-product-card { flex:0 0 clamp(190px,20.5vw,252px); border:1px solid rgba(148,163,184,.28); border-radius:22px; background:linear-gradient(180deg,#fff 0%,#fbfdff 100%); box-shadow:0 7px 20px rgba(15,23,42,.055),inset 0 1px 0 rgba(255,255,255,.9); }
.home-product-rail-track > .front-page-product-card:hover { border-color:rgba(14,165,233,.42); box-shadow:0 14px 30px rgba(15,23,42,.105); }
.home-product-rail-track .front-page-product-image { display:block; position:relative; aspect-ratio:1/1; margin:8px 8px 0; padding:8px; border:1px solid #edf2f7; border-radius:17px !important; background:linear-gradient(145deg,#f8fafc,#fff); }
.home-product-rail-track .front-page-product-image img { width:100%; height:100%; object-fit:contain; border-radius:12px !important; }
.home-product-rail-track .product-image-badge { top:9px; inset-inline-start:9px; border-radius:999px; padding:5px 8px; font-size:10px; box-shadow:0 3px 10px rgba(15,23,42,.08); }
.home-product-rail-track .front-page-product-content { padding:11px 12px 13px; }
.home-product-rail-track .front-page-product-category { font-size:10px; margin-bottom:5px; }
.home-product-rail-track .front-page-product-title { font-size:13px; line-height:1.55; min-height:40px; margin:0 0 8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.home-product-rail-track .front-page-product-meta { font-size:10px; margin-bottom:7px; }
.home-product-rail-track .front-page-product-price { font-size:14px; margin-bottom:9px; }
.home-product-rail-track .front-page-product-button { min-height:34px; border-radius:11px; font-size:11px; }
.home-product-rail-track::-webkit-scrollbar { height:6px; }
.home-product-rail-track::-webkit-scrollbar-track { background:rgba(148,163,184,.12); border-radius:99px; }
.home-product-rail-track::-webkit-scrollbar-thumb { background:linear-gradient(90deg,rgba(14,165,233,.5),rgba(99,102,241,.45)); border-radius:99px; }
@media(max-width:1000px) { .home-product-rail-track > .front-page-product-card { flex-basis:clamp(180px,27vw,225px); } }
@media(max-width:700px) {
 .home-product-rail { padding-block:25px 32px; }
 .home-product-rail .ct-container { width:calc(100% - 20px); }
 .home-product-rail::before { width:calc(100% - 20px); margin-bottom:18px; }
 .home-product-rail .section-heading-clean { align-items:center; gap:10px; margin-bottom:12px; padding-bottom:11px; }
 .home-product-rail .section-heading-clean h2 { font-size:18px; line-height:1.45; }
 .home-product-rail .section-kicker { font-size:10px; padding:3px 8px; }
 .home-product-rail .view-all-link { font-size:11px; padding:7px 9px; }
 .home-product-rail-track { gap:10px; padding:7px 2px 17px; }
 .home-product-rail-track > .front-page-product-card { flex:0 0 46%; min-width:145px; max-width:205px; border-radius:17px; }
 .home-product-rail-track .front-page-product-image { margin:6px 6px 0; padding:5px; border-radius:13px !important; }
 .home-product-rail-track .front-page-product-image img { border-radius:9px !important; }
 .home-product-rail-track .front-page-product-content { padding:9px 9px 10px; }
 .home-product-rail-track .front-page-product-title { font-size:11px; min-height:35px; line-height:1.55; }
 .home-product-rail-track .front-page-product-price { font-size:12px; }
 .home-product-rail-track .front-page-product-button { min-height:31px; font-size:10px; }
}
@media(max-width:380px) { .home-product-rail-track > .front-page-product-card { flex-basis:57%; min-width:138px; } .home-product-rail .section-heading-clean h2 { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { .home-product-rail-track { scroll-behavior:auto; } }


/* Homepage product rail: framed, responsive and touch-friendly */
.home-product-rail {
  box-sizing:border-box; width:calc(100% - 36px); max-width:1600px; margin:clamp(22px,3vw,42px) auto;
  padding:clamp(18px,2.2vw,30px) clamp(12px,1.8vw,26px) 14px;
  border:1px solid #b7c8e6; border-radius:24px;
  background:linear-gradient(145deg,#fbfdff 0%,#f7faff 58%,#fff 100%);
  box-shadow:0 10px 32px rgba(30,64,115,.055),inset 0 1px 0 rgba(255,255,255,.95);
  overflow:hidden;
}
.home-product-rail::before {display:none!important;}
.home-product-rail .ct-container {width:100%!important;max-width:none!important;margin:0!important;padding:0!important;}
.home-product-rail .section-heading-clean {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:0 2px 13px;border-bottom:1px solid #d9e4f4;position:relative;}
.home-product-rail .section-heading-clean::after {content:"";position:absolute;bottom:-1px;inset-inline-start:0;width:64px;height:3px;border-radius:99px;background:linear-gradient(90deg,#2676d2,#7c68df);}
.home-product-rail .home-rail-heading-copy {min-width:0;}
.home-product-rail .section-kicker {display:inline-flex;align-items:center;margin-bottom:5px;padding:4px 10px;border:1px solid #d8e6fa;border-radius:99px;background:#edf5ff;color:#245eaa;font-size:11px;font-weight:750;}
.home-product-rail .section-heading-clean h2 {margin:0;color:#172b4d;font-size:clamp(18px,1.7vw,25px);font-weight:850;line-height:1.45;}
.home-product-rail .view-all-link {flex:0 0 auto;padding:8px 12px;border:1px solid #d5e2f5;border-radius:99px;background:#fff;color:#245eaa;font-size:12px;font-weight:750;white-space:nowrap;box-shadow:0 3px 10px rgba(25,60,110,.04);}
.home-product-rail-track {display:flex!important;flex-flow:row nowrap!important;align-items:stretch;gap:clamp(10px,1.2vw,16px);width:100%;max-width:100%;min-width:0;box-sizing:border-box;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#a8c2e8 #edf3fb;padding:7px 2px 14px;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;}
.home-product-rail-track>.front-page-product-card {display:flex;flex:0 0 clamp(172px,17.4vw,225px);flex-direction:column;min-width:0;max-width:none;overflow:hidden;scroll-snap-align:start;border:1px solid #dbe5f2;border-radius:19px;background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);box-shadow:0 5px 16px rgba(29,55,95,.065);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;}
.home-product-rail-track>.front-page-product-card:hover {border-color:#a9c6ee;box-shadow:0 10px 24px rgba(29,55,95,.12);transform:translateY(-2px);}
.home-product-rail-track .front-page-product-image {display:flex;align-items:center;justify-content:center;position:relative;aspect-ratio:1/1;margin:7px 7px 0;padding:7px;border:1px solid #edf1f7;border-radius:14px!important;background:linear-gradient(145deg,#f6f9fd,#fff);overflow:hidden;}
.home-product-rail-track .front-page-product-image img {display:block;width:100%;height:100%;object-fit:contain;border-radius:9px!important;}
.home-product-rail-track .product-image-badge {top:8px;inset-inline-start:8px;border-radius:99px;padding:4px 7px;font-size:9px;}
.home-product-rail-track .front-page-product-content {display:flex;flex:1;flex-direction:column;padding:10px 11px 12px;}
.home-product-rail-track .front-page-product-category {font-size:10px;color:#68809e;margin-bottom:4px;}
.home-product-rail-track .front-page-product-title {font-size:12px;line-height:1.65;min-height:40px;margin:0 0 7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.home-product-rail-track .front-page-product-meta {font-size:10px;margin-bottom:6px;}
.home-product-rail-track .front-page-product-price {font-size:13px;font-weight:800;color:#172b4d;margin-top:auto;margin-bottom:8px;}
.home-product-rail-track .front-page-product-button {min-height:32px;border:1px solid #c9dcf5;border-radius:10px;background:linear-gradient(135deg,#f1f7ff,#fff);color:#245eaa;font-size:10px;font-weight:750;}
.home-product-rail-track::-webkit-scrollbar {height:5px;}
.home-product-rail-track::-webkit-scrollbar-track {background:#edf3fb;border-radius:99px;}
.home-product-rail-track::-webkit-scrollbar-thumb {background:linear-gradient(90deg,#9cbde9,#b6aceb);border-radius:99px;}
@media(max-width:700px) {
 .home-product-rail {width:calc(100% - 16px);margin:18px auto 24px;padding:14px 9px 9px;border-radius:18px;}
 .home-product-rail .section-heading-clean {gap:8px;margin-bottom:10px;padding:0 2px 10px;}
 .home-product-rail .section-kicker {font-size:9px;padding:3px 7px;margin-bottom:3px;}
 .home-product-rail .section-heading-clean h2 {font-size:16px;line-height:1.45;}
 .home-product-rail .view-all-link {padding:6px 8px;font-size:10px;}
 .home-product-rail-track {gap:9px;padding:5px 1px 11px;scroll-snap-type:x mandatory;}
 .home-product-rail-track>.front-page-product-card {flex-basis:clamp(145px,42vw,178px);border-radius:15px;}
 .home-product-rail-track .front-page-product-image {margin:5px 5px 0;padding:5px;border-radius:11px!important;}
 .home-product-rail-track .front-page-product-image img {border-radius:7px!important;}
 .home-product-rail-track .front-page-product-content {padding:8px 8px 9px;}
 .home-product-rail-track .front-page-product-title {font-size:10px;min-height:33px;line-height:1.55;margin-bottom:5px;}
 .home-product-rail-track .front-page-product-price {font-size:11px;margin-bottom:7px;}
 .home-product-rail-track .front-page-product-button {min-height:29px;font-size:9px;border-radius:8px;}
}
@media(max-width:360px) { .home-product-rail {width:calc(100% - 12px);padding-inline:7px;} .home-product-rail-track>.front-page-product-card {flex-basis:142px;} .home-product-rail .section-heading-clean h2{font-size:14px;} }

/* Autoplay rails: disable native smooth/snap so JS frame animation can move continuously. */
.home-product-rail-track[data-autoplay="true"] { scroll-behavior: auto !important; scroll-snap-type: none !important; }
.home-product-rail-track[data-autoplay="true"] > .front-page-product-card { scroll-snap-align: none !important; }