/*
 * Shared responsive polish for storefront themes 1001–1015.
 * This file deliberately does not define a new palette: every theme keeps
 * its existing colors, typography, and component language.
 */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

button,
a,
.btn {
    min-width: 0;
}

/* Prevent an uninitialised Owl carousel from painting every slide at once. */
.header-carousel:not(.owl-loaded) > .header-carousel-item:not(:first-child),
.header-carousel:not(.owl-loaded) > .owl-carousel-item:not(:first-child) {
    display: none;
}

@media (max-width: 991.98px) {
    .frontend-slider-frame,
    .frontend-slider-image,
    .carousel-item,
    .carousel-img,
    .carousel-content,
    .carousel-caption,
    .hero-header,
    .header-carousel-item {
        max-width: 100%;
    }

    .header-carousel .owl-nav .owl-prev,
    .header-carousel .owl-nav .owl-next {
        top: 50% !important;
        transform: translateY(-50%);
    }

    .frontend-slider-frame h1,
    .frontend-slider-frame h2,
    .frontend-slider-frame h3,
    .frontend-slider-frame h4,
    .frontend-slider-frame h5,
    .frontend-slider-frame p,
    .carousel-caption h1,
    .carousel-caption h2,
    .carousel-caption h3,
    .carousel-caption h4,
    .carousel-caption h5,
    .carousel-caption p {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal !important;
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: 0.96rem;
    }

    .container,
    .container-fluid {
        max-width: 100%;
    }

    .row > * {
        min-width: 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a,
    .btn {
        overflow-wrap: anywhere;
    }

    .btn {
        white-space: normal;
    }

    body.theme-1001 #header-carousel h1,
    body.theme-1001 #header-carousel h2,
    body.theme-1002 .slide-contain h2,
    body.theme-1002 .slide-contain h3,
    body.theme-1003 #header-carousel h1,
    body.theme-1003 #header-carousel h2,
    body.theme-1004 .hero-header h1,
    body.theme-1004 .hero-header h2,
    body.theme-1005 .header-carousel-item .carousel-content h1,
    body.theme-1005 .header-carousel-item .carousel-content h2,
    body.theme-1006 .header-carousel h1,
    body.theme-1006 .header-carousel h2,
    body.theme-1007 .header-carousel h1,
    body.theme-1007 .header-carousel h2,
    body.theme-1008 .header-carousel h1,
    body.theme-1008 .header-carousel h2,
    body.theme-1009 .header-carousel h1,
    body.theme-1009 .header-carousel h2,
    body.theme-1010 .header-carousel h1,
    body.theme-1010 .header-carousel h2,
    body.theme-1011 .hero-header h1,
    body.theme-1011 .hero-header h2,
    body.theme-1012 .edu-hero h1,
    body.theme-1013 .campus-hero h1,
    body.theme-1014 .quran-hero h1,
    body.theme-1015 .motion-hero h1 {
        width: 100% !important;
        max-width: calc(100vw - 32px) !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    /* Keep floating actions inside the viewport without hiding them. */
    #floating-cart,
    .frontend-floating-cart,
    .frontend-dashboard-shortcut {
        max-width: calc(100vw - 24px);
    }

    #floating-cart a,
    .frontend-floating-cart a,
    .frontend-dashboard-shortcut {
        max-width: calc(100vw - 24px);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .frontend-floating-cart a,
    .frontend-dashboard-shortcut {
        box-sizing: border-box;
        width: auto;
    }

    /* Theme 1001 — commerce layout */
    body.theme-1001 .site-header .row.bg-secondary {
        display: none !important;
    }

    body.theme-1001 .site-header .container-fluid.bg-dark {
        margin-bottom: 0 !important;
    }

    body.theme-1001 .site-header .container-fluid.bg-dark > .row {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body.theme-1001 .site-header .container-fluid.bg-dark .col-lg-3 {
        display: none !important;
    }

    body.theme-1001 .site-header .container-fluid.bg-dark .col-lg-9 {
        width: 100%;
    }

    body.theme-1001 .site-header .navbar {
        padding: 0.65rem 0.8rem !important;
    }

    body.theme-1001 .site-header .navbar-brand {
        min-width: 0;
        max-width: calc(100% - 58px);
    }

    body.theme-1001 .site-header .navbar-brand img {
        max-height: 38px;
        width: auto;
    }

    body.theme-1001 .site-header .navbar-collapse {
        flex-basis: 100%;
        padding-top: 0.65rem;
    }

    body.theme-1001 #header-carousel .carousel-item,
    body.theme-1001 #header-carousel .frontend-slider-frame {
        min-height: 360px;
    }

    body.theme-1001 #header-carousel .carousel-caption {
        padding: 1rem;
    }

    body.theme-1001 #header-carousel .carousel-content {
        width: 100%;
        padding: 0 !important;
    }

    body.theme-1001 #header-carousel h1,
    body.theme-1001 #header-carousel h2 {
        font-size: clamp(1.9rem, 8vw, 3rem) !important;
        line-height: 1.12;
    }

    body.theme-1001 #header-carousel p {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.95rem;
    }

    body.theme-1001 #header-carousel .btn {
        margin: 0.45rem 0.15rem 0 !important;
    }

    body.theme-1001 .biz-hero h1 {
        font-size: clamp(2.1rem, 10vw, 3rem) !important;
    }

    body.theme-1001 .biz-hero p {
        font-size: 1rem;
    }

    body.theme-1001 .biz-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    body.theme-1001 .biz-hero-actions .btn {
        width: 100%;
    }

    /* Theme 1002 — marketplace layout */
    body.theme-1002 #stickyheader .custom-container {
        width: 100%;
        padding-right: 12px;
        padding-left: 12px;
    }

    body.theme-1002 #stickyheader .header-contain {
        flex-wrap: wrap;
        gap: 0.7rem;
    }

    body.theme-1002 #stickyheader .logo-block {
        min-width: 0;
        max-width: calc(100% - 54px);
    }

    body.theme-1002 #stickyheader .brand-logo {
        max-width: 100%;
    }

    body.theme-1002 #stickyheader .brand-logo img {
        max-height: 42px;
        width: auto;
    }

    body.theme-1002 #stickyheader .header-search {
        order: 3;
        flex: 1 1 100%;
        width: 100%;
    }

    body.theme-1002 .megastore-slide {
        padding: 1rem 0 2rem !important;
    }

    body.theme-1002 .slide-main {
        min-height: 420px;
    }

    body.theme-1002 .slide-contain {
        right: 0;
        left: 0;
        width: 100%;
        padding: 1.25rem !important;
    }

    body.theme-1002 .slide-contain h2 {
        font-size: clamp(1.9rem, 8vw, 3rem) !important;
        line-height: 1.12;
    }

    body.theme-1002 .slide-contain h3 {
        font-size: 1rem;
        line-height: 1.45;
    }

    body.theme-1002 .slide-contain .btn {
        width: 100%;
        margin: 0.4rem 0 0 !important;
    }

    /* Themes 1003–1011 — Bootstrap/Owl layouts */
    body.theme-1003 .navbar-toggler,
    body.theme-1004 .navbar-toggler,
    body.theme-1005 .navbar-toggler,
    body.theme-1006 .navbar-toggler,
    body.theme-1007 .navbar-toggler,
    body.theme-1008 .navbar-toggler,
    body.theme-1009 .navbar-toggler,
    body.theme-1010 .navbar-toggler,
    body.theme-1011 .navbar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative;
        z-index: 5;
    }

    body.theme-1003 .navbar-brand,
    body.theme-1004 .navbar-brand,
    body.theme-1005 .navbar-brand,
    body.theme-1006 .navbar-brand,
    body.theme-1007 .navbar-brand,
    body.theme-1008 .navbar-brand,
    body.theme-1009 .navbar-brand,
    body.theme-1010 .navbar-brand,
    body.theme-1011 .navbar-brand {
        min-width: 0;
        max-width: calc(100% - 58px);
    }

    body.theme-1003 .navbar-collapse,
    body.theme-1004 .navbar-collapse,
    body.theme-1005 .navbar-collapse,
    body.theme-1006 .navbar-collapse,
    body.theme-1007 .navbar-collapse,
    body.theme-1008 .navbar-collapse,
    body.theme-1009 .navbar-collapse,
    body.theme-1010 .navbar-collapse,
    body.theme-1011 .navbar-collapse {
        flex-basis: 100%;
        width: 100%;
        margin-top: 0.65rem;
        padding: 0.75rem;
        border-radius: 0.75rem;
    }

    body.theme-1003 .navbar-nav .nav-link,
    body.theme-1004 .navbar-nav .nav-link,
    body.theme-1005 .navbar-nav .nav-link,
    body.theme-1006 .navbar-nav .nav-link,
    body.theme-1007 .navbar-nav .nav-link,
    body.theme-1008 .navbar-nav .nav-link,
    body.theme-1009 .navbar-nav .nav-link,
    body.theme-1010 .navbar-nav .nav-link,
    body.theme-1011 .navbar-nav .nav-link {
        white-space: normal;
    }

    body.theme-1003 #header-carousel .carousel-item {
        min-height: 420px;
    }

    body.theme-1003 #header-carousel .carousel-caption {
        padding: 1.2rem;
    }

    body.theme-1003 #header-carousel .carousel-caption > div {
        width: 100%;
        max-width: 100% !important;
        padding: 0 !important;
    }

    body.theme-1004 .hero-header {
        padding: 3.5rem 0 !important;
    }

    body.theme-1004 .hero-header .container {
        padding-right: 20px;
        padding-left: 20px;
    }

    body.theme-1004 .hero-header .display-1 {
        font-size: clamp(2.2rem, 9vw, 4rem) !important;
        line-height: 1.08;
    }

    body.theme-1004 .hero-header .btn {
        display: flex;
        width: 100%;
        margin: 0.5rem 0 !important;
    }

    body.theme-1005 .header-carousel {
        padding: 2rem 0 !important;
    }

    body.theme-1005 .header-carousel-item {
        padding: 0 0.75rem;
    }

    body.theme-1005 .header-carousel-item .carousel-content {
        min-width: 0;
        padding: 1rem !important;
    }

    body.theme-1005 .header-carousel-item .carousel-content h2 {
        font-size: clamp(2rem, 9vw, 3.2rem) !important;
        line-height: 1.1;
    }

    body.theme-1005 .header-carousel-item .carousel-content .btn {
        display: flex;
        width: 100%;
        margin: 0.45rem 0 !important;
    }

    body.theme-1005 .header-carousel-item .carousel-img {
        margin-bottom: 1rem;
    }

    body.theme-1006 .header-carousel {
        padding: 2rem 0 !important;
    }

    body.theme-1006 .header-carousel > .container {
        padding-right: 20px;
        padding-left: 20px;
    }

    body.theme-1006 .header-carousel h1,
    body.theme-1006 .header-carousel h2 {
        font-size: clamp(2rem, 9vw, 3.3rem) !important;
        line-height: 1.1;
    }

    body.theme-1006 .header-carousel .btn {
        margin: 0.45rem 0.2rem 0 0 !important;
    }

    body.theme-1007 .header-carousel .owl-carousel-item,
    body.theme-1008 .header-carousel .header-carousel-item,
    body.theme-1009 .header-carousel .header-carousel-item,
    body.theme-1010 .header-carousel .header-carousel-item {
        min-height: 430px;
    }

    body.theme-1007 .header-carousel .frontend-slider-image,
    body.theme-1008 .header-carousel .frontend-slider-image,
    body.theme-1009 .header-carousel .frontend-slider-image,
    body.theme-1010 .header-carousel .frontend-slider-image {
        min-height: 430px;
        height: 430px;
        object-fit: cover;
    }

    body.theme-1007 .header-carousel .container,
    body.theme-1008 .header-carousel .container,
    body.theme-1009 .header-carousel .container,
    body.theme-1010 .header-carousel .container {
        padding-right: 20px;
        padding-left: 20px;
    }

    body.theme-1007 .header-carousel h1,
    body.theme-1007 .header-carousel h2,
    body.theme-1008 .header-carousel h1,
    body.theme-1008 .header-carousel h2,
    body.theme-1009 .header-carousel h1,
    body.theme-1009 .header-carousel h2,
    body.theme-1010 .header-carousel h1,
    body.theme-1010 .header-carousel h2 {
        font-size: clamp(2rem, 8.5vw, 3.4rem) !important;
        line-height: 1.1;
    }

    body.theme-1007 .header-carousel .btn,
    body.theme-1008 .header-carousel .btn,
    body.theme-1009 .header-carousel .btn,
    body.theme-1010 .header-carousel .btn {
        margin: 0.45rem 0.2rem 0 0 !important;
    }

    body.theme-1008 .header-carousel .carousel-caption .carousel-caption-content,
    body.theme-1009 .header-carousel .carousel-caption .carousel-caption-content,
    body.theme-1010 .header-carousel .carousel-caption .carousel-caption-content {
        width: 100% !important;
        padding: 0 !important;
    }

    body.theme-1011 .hero-header {
        padding: 3rem 0 !important;
    }

    body.theme-1011 .hero-header .container {
        padding-right: 20px;
        padding-left: 20px;
    }

    body.theme-1011 .hero-header .display-1,
    body.theme-1011 .hero-header .display-5 {
        font-size: clamp(2rem, 9vw, 3.5rem) !important;
        line-height: 1.1;
    }

    body.theme-1011 .hero-header .btn {
        margin: 0.4rem 0.2rem 0 0 !important;
    }

    /* Themes 1012–1015 — premium layouts */
    body.theme-1012 .edu-header .container,
    body.theme-1013 .campus-header .container,
    body.theme-1014 .quran-header .container,
    body.theme-1015 .motion-header .container {
        padding-right: 12px;
        padding-left: 12px;
    }

    body.theme-1012 .edu-brand,
    body.theme-1013 .campus-brand,
    body.theme-1014 .quran-brand,
    body.theme-1015 .motion-brand {
        min-width: 0;
        max-width: calc(100% - 58px);
        margin-right: 0;
    }

    body.theme-1012 .edu-brand__logo,
    body.theme-1013 .campus-brand__logo,
    body.theme-1014 .quran-brand__logo,
    body.theme-1015 .motion-brand__logo {
        max-width: 160px;
        max-height: 44px;
        height: auto;
    }

    body.theme-1012 .edu-nav-toggle,
    body.theme-1013 .campus-nav-toggle,
    body.theme-1014 .quran-nav-toggle,
    body.theme-1015 .motion-nav-toggle {
        display: inline-flex !important;
        flex: 0 0 auto;
        margin-left: auto;
        width: 44px !important;
        height: 44px !important;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 5;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body.theme-1012 .edu-header .navbar,
    body.theme-1013 .campus-header .navbar,
    body.theme-1014 .quran-header .navbar,
    body.theme-1015 .motion-header .navbar {
        flex-wrap: wrap;
        position: relative;
        width: 100%;
    }

    body.theme-1012 .edu-header .navbar > .edu-nav-toggle,
    body.theme-1013 .campus-header .navbar > .campus-nav-toggle,
    body.theme-1014 .quran-header .navbar > .quran-nav-toggle,
    body.theme-1015 .motion-header .navbar > .motion-nav-toggle {
        position: absolute;
        top: 50%;
        right: 0;
        z-index: 3;
        transform: translateY(-50%);
    }

    body.theme-1012 .edu-header .navbar-collapse,
    body.theme-1013 .campus-header .navbar-collapse,
    body.theme-1014 .quran-header .navbar-collapse,
    body.theme-1015 .motion-header .navbar-collapse {
        flex-basis: 100%;
        width: 100%;
    }

    body.theme-1012 .edu-hero h1,
    body.theme-1013 .campus-hero h1,
    body.theme-1014 .quran-hero h1,
    body.theme-1015 .motion-hero h1 {
        max-width: 100%;
        width: 100%;
        font-size: clamp(2.15rem, 10vw, 3.6rem) !important;
        line-height: 1.08;
        overflow-wrap: anywhere;
        white-space: normal !important;
        display: block;
        color: #fff !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.theme-1012 .edu-hero__copy,
    body.theme-1013 .campus-hero__copy,
    body.theme-1014 .quran-hero__copy,
    body.theme-1015 .motion-hero__copy {
        width: 100% !important;
        max-width: 100% !important;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    body.theme-1012 .edu-hero__actions,
    body.theme-1013 .campus-hero__actions,
    body.theme-1014 .quran-hero__actions,
    body.theme-1015 .motion-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    body.theme-1012 .edu-hero__actions .btn,
    body.theme-1013 .campus-hero__actions .btn,
    body.theme-1014 .quran-hero__actions .btn,
    body.theme-1015 .motion-hero__actions .btn {
        width: 100%;
    }

    body.theme-1012 .edu-hero,
    body.theme-1013 .campus-hero,
    body.theme-1014 .quran-hero,
    body.theme-1015 .motion-hero {
        min-height: 0;
    }

    body.theme-1012 .edu-topbar__contacts,
    body.theme-1012 .edu-topbar__social,
    body.theme-1013 .campus-ribbon,
    body.theme-1015 .motion-topbar__contact {
        max-width: 100%;
        overflow: hidden;
    }

    body.theme-1012 .edu-topbar__social a:nth-child(n + 4),
    body.theme-1013 .campus-social a:nth-child(n + 4) {
        display: none;
    }

    body.theme-1013 .campus-hero__statline,
    body.theme-1014 .quran-hero__statline,
    body.theme-1014 .quran-hero__highlights,
    body.theme-1015 .motion-hero__highlights {
        grid-template-columns: 1fr;
        display: grid;
    }

    body.theme-1015 .motion-hero__slide {
        min-width: 0;
    }

    body.theme-1015 .motion-hero-visual {
        min-height: 300px;
    }

    body.theme-1015 .motion-hero-visual__frame {
        width: 88%;
        margin-left: 4%;
    }
}

@media (max-width: 575.98px) {
    .frontend-floating-cart--left,
    #floating-cart.frontend-floating-cart--left {
        left: 12px;
    }

    .frontend-floating-cart--right,
    #floating-cart.frontend-floating-cart--right {
        right: 12px;
    }

    .frontend-floating-cart--right a,
    #floating-cart.frontend-floating-cart--right a {
        width: min(100%, calc(100vw - 24px));
        justify-content: center;
    }

    body.theme-1001 #header-carousel .btn,
    body.theme-1003 #header-carousel .btn,
    body.theme-1007 .header-carousel .btn,
    body.theme-1008 .header-carousel .btn,
    body.theme-1009 .header-carousel .btn,
    body.theme-1010 .header-carousel .btn,
    body.theme-1011 .hero-header .btn {
        display: flex;
        width: 100%;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    body.theme-1012 .edu-hero,
    body.theme-1013 .campus-hero,
    body.theme-1014 .quran-hero,
    body.theme-1015 .motion-hero {
        padding-top: 3rem;
        padding-bottom: 3.5rem;
    }

    body.theme-1012 .edu-hero h1,
    body.theme-1013 .campus-hero h1,
    body.theme-1014 .quran-hero h1,
    body.theme-1015 .motion-hero h1 {
        font-size: clamp(2rem, 10.5vw, 3rem) !important;
    }
}

/* Bootstrap's navbar-expand-xl breakpoint is 1200px. Keep the mobile
 * control visible throughout the entire collapsed range, including tablets. */
@media (max-width: 1199.98px) {
    body.theme-1012 .edu-header .navbar > .edu-nav-toggle,
    body.theme-1013 .campus-header .navbar > .campus-nav-toggle,
    body.theme-1014 .quran-header .navbar > .quran-nav-toggle,
    body.theme-1015 .motion-header .navbar > .motion-nav-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute;
        top: 50%;
        right: 0;
        z-index: 3;
        transform: translateY(-50%);
        width: 44px !important;
        height: 44px !important;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 0;
    }

    body.theme-1012 .edu-header .navbar > .edu-brand,
    body.theme-1013 .campus-header .navbar > .campus-brand,
    body.theme-1014 .quran-header .navbar > .quran-brand,
    body.theme-1015 .motion-header .navbar > .motion-brand {
        max-width: calc(100% - 64px);
        min-width: 0;
    }
}