/*
 * Cross-cutting responsive + accessibility layer for storefront and admin.
 * Loaded last so it can correct vendor themes (Molla demo-7, posdash) without forking them.
 *
 * Breakpoints: mobile <=575.98, small tablet <=767.98, tablet <=1024, desktop above.
 */

:root {
    --pm-tap: 44px;
    --pm-focus: #0f6efd;
}

/* ------------------------------------------------------------------ *
 * 1. Nothing may exceed its container
 * ------------------------------------------------------------------ */

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

/* Long words, URLs and SKUs must wrap rather than widen the page. */
p,
li,
dd,
td,
th,
figcaption,
blockquote,
.admin-page-sub,
.pm-dash-card-sub {
    overflow-wrap: break-word;
}

pre,
code {
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

/* Wide data tables scroll inside their own card, never the whole document. */
.admin-table-wrap,
.table-responsive,
.pm-dash-table-card > div,
.pm-inv-variants-box {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------------ *
 * 2. Visible focus for keyboard and switch users (all viewports)
 * ------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--pm-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

/* The themes strip outlines on several controls; restore them. */
.btn:focus-visible,
.admin-btn:focus-visible,
.pm-inv-btn:focus-visible,
.pmuk-size-tile-btn:focus-visible {
    outline: 2px solid var(--pm-focus);
    outline-offset: 2px;
    box-shadow: none;
}

/* ------------------------------------------------------------------ *
 * 3. Touch targets (mobile and tablet, i.e. every touch viewport)
 * ------------------------------------------------------------------ */

@media (max-width: 1024px) {

    /* Buttons and form controls get a comfortable tap height.
       Carousel dots/arrows are excluded: they are decorative and sized by the theme. */
    button:not(.owl-dot):not([class*="owl-"]):not(.mobile-menu-close),
    .btn,
    .admin-btn,
    .pm-inv-btn,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    select,
    textarea,
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    input:not([type]) {
        min-height: var(--pm-tap);
    }

    /* Icon-only buttons also need width. */
    button:not(.owl-dot):not([class*="owl-"]),
    .btn,
    .admin-btn,
    .pm-inv-btn {
        min-width: var(--pm-tap);
    }

    /* Header utility icons (account, wishlist, cart, search). */
    .header-right .dropdown-toggle,
    .header-right .wishlist > a,
    .header-right .account > a,
    .header-middle .search-toggle,
    .header-right .top-menu > li > a {
        min-width: var(--pm-tap);
        min-height: var(--pm-tap);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Hamburger: was 33x33. */
    .mobile-menu-toggler {
        min-width: var(--pm-tap);
        min-height: var(--pm-tap);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .mobile-menu-close {
        min-width: var(--pm-tap);
        min-height: var(--pm-tap);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Drawer menu rows: were 39px. */
    .mobile-menu li > a,
    .mobile-cats-menu li > a {
        min-height: var(--pm-tap);
        display: flex;
        align-items: center;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }

    .mobile-menu .mmenu-btn {
        min-width: var(--pm-tap);
        min-height: var(--pm-tap);
    }

    /* Social icons: were 7x13 / 11x13. */
    .social-icon {
        min-width: var(--pm-tap);
        min-height: var(--pm-tap);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Shop toolbar: grid/list switches, the filter drawer toggle, filter reset. */
    .btn-layout,
    .sidebar-toggler,
    .sidebar-filter-clear,
    .toolbox .toolbox-item > a,
    .toolbox-sort .select-custom {
        min-width: var(--pm-tap);
        min-height: var(--pm-tap);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Tab strips (product detail tabs, drawer Menu/Categories tabs). */
    .nav-link,
    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        min-height: var(--pm-tap);
        display: inline-flex;
        align-items: center;
    }

    /* Pagination, banner CTAs and small inline actions. */
    .page-link,
    .pm-dash-pill-link,
    .admin-topnav-live,
    .pmuk-banner-cta,
    .btn-more,
    .read-more {
        min-height: var(--pm-tap);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Brand lockup in both headers. */
    .header-logo,
    .logo {
        min-height: var(--pm-tap);
        display: inline-flex;
        align-items: center;
    }

    /* Standalone nav lists: footer columns, breadcrumbs, account menu.
       Inline links inside prose are deliberately excluded (WCAG 2.5.8 exception). */
    .footer .widget-list li > a,
    .footer .links li > a,
    .widget-categories li > a,
    .breadcrumb-item > a,
    .nav-list li > a,
    .mobile-cats-nav a {
        min-height: var(--pm-tap);
        display: inline-flex;
        align-items: center;
    }

    /* Carousel dots are tiny by design; grow the hit area, not the dot. */
    .owl-dots .owl-dot {
        padding: 0.7rem 0.45rem;
        min-height: 0;
        min-width: 0;
    }

    /* Checkboxes and radios: were 13x13. 24px is the WCAG 2.5.8 floor. */
    input[type="checkbox"],
    input[type="radio"] {
        width: 1.5rem;
        height: 1.5rem;
        min-height: 0;
        min-width: 0;
    }

    /* The row around a checkbox becomes the real target. */
    label:has(> input[type="checkbox"]),
    label:has(> input[type="radio"]),
    .form-check,
    .custom-control {
        min-height: var(--pm-tap);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .form-check,
    .admin-check-row {
        min-height: var(--pm-tap);
        display: flex;
        align-items: center;
    }

    /* Storefront: primary links that are not inline prose.
       Product card titles, filters, banner CTAs, contact details, footer nav. */
    .product-title > a,
    .footer-menu li > a,
    .widget-about-info a,
    .widget-collapsible .widget-title > a,
    .filter-items .filter-item > a,
    .banner-content .banner-title > a,
    .banner-content .banner-subtitle > a,
    .banner-content .banner-link,
    .size-guide,
    .forgot-link,
    .product-gallery-item,
    .btn-product-gallery {
        min-height: var(--pm-tap);
        display: inline-flex;
        align-items: center;
    }

    .btn-product-gallery,
    .product-gallery-item {
        min-width: var(--pm-tap);
        justify-content: center;
    }

    /* Quantity field inside the size stepper. */
    .pmuk-size-qty,
    .pmuk-qty-input {
        min-width: var(--pm-tap);
    }

    /*
     * Admin action buttons carry explicit heights (and some inline `style="height:..."`),
     * so min-height alone loses the cascade here.
     */
    a.admin-btn,
    button.admin-btn,
    .pm-inv-btn,
    .pm-pl-action,
    .pm-pe-btn,
    .pm-pe-back,
    .admin-table td a,
    .admin-table td button,
    .pm-dash-table td a,
    .pm-pl-table td a,
    .pm-inv-prod-name,
    .pm-pl-title,
    a.badge {
        min-height: var(--pm-tap) !important;
        min-width: var(--pm-tap);
        display: inline-flex;
        align-items: center;
    }

    .pm-inv-btn,
    .pm-pl-action,
    .pm-pe-back,
    a.badge {
        justify-content: center;
    }

    /* Carousel dots: theme resets padding at a deeper specificity. */
    .owl-simple .owl-dots .owl-dot,
    .owl-carousel .owl-dots .owl-dot {
        padding: 0.7rem 0.45rem !important;
        min-height: 0;
        min-width: 0;
    }

    /*
     * Bootstrap custom controls hide the real input and paint the label,
     * so size the label row rather than the 15px hidden input.
     */
    input.custom-control-input {
        width: auto;
        height: auto;
    }

    .custom-control-label {
        min-height: var(--pm-tap);
        display: inline-flex;
        align-items: center;
    }
}

/* ------------------------------------------------------------------ *
 * 4. iOS auto-zoom: form text must be >=16px when focused.
 * !important is required: theme rules reach these controls through deeper
 * selectors (e.g. `.admin-topnav-search .admin-topnav-search-input`) and would
 * otherwise keep their 12-14px desktop sizing.
 * ------------------------------------------------------------------ */

@media (max-width: 1024px) {

    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="time"],
    input:not([type]),
    select,
    textarea,
    .form-control,
    .admin-form,
    .pm-pe-input,
    .pm-pe-select,
    .pm-pl-input,
    .pm-pl-select,
    .pm-inv-search-input,
    .pm-inv-select,
    .pm-ml-search,
    .admin-topnav-search-input,
    .admin-picker-search,
    .pmuk-size-qty,
    .pmuk-qty-input {
        font-size: 16px !important;
    }
}

/* ------------------------------------------------------------------ *
 * 5. Stack multi-column sections on tablet and below
 * ------------------------------------------------------------------ */

@media (max-width: 1024px) {

    /* Shop: filter sidebar above the grid instead of a cramped 25% column. */
    #shop-category-sidebar,
    .shop-sidebar,
    aside.col-lg-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    aside.col-lg-3 + .col-lg-9,
    .col-lg-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 991.98px) {

    /* Product detail: gallery and buy-box stack so neither is squeezed. */
    .product-details-top > .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Any admin card grid collapses to one column. */
    .admin-grid-2,
    .admin-grid-3,
    .admin-form-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 575.98px) {

    /* Auto-fit grids: drop the min track so nothing forces a second column. */
    .pm-dash-kpis,
    .pm-inv-strip,
    .admin-cards-grid {
        grid-template-columns: 1fr !important;
    }

    /* Flex items with desktop min-widths become fluid. */
    .pm-inv-toolbar-left,
    .pm-inv-search-wrap,
    .pm-pl-product,
    .admin-topnav-search {
        min-width: 0 !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
    }

    /* Button rows wrap instead of overflowing. */
    .admin-page-actions,
    .pm-inv-toolbar,
    .pm-dash-table-bar,
    .toolbox {
        flex-wrap: wrap;
    }
}

/* ------------------------------------------------------------------ *
 * 6. Typography scale and spacing on small screens
 * ------------------------------------------------------------------ */

@media (max-width: 767.98px) {

    .page-header .page-title,
    .page-title {
        font-size: 1.75rem;
        line-height: 1.25;
        overflow-wrap: break-word;
    }

    .product-title,
    h1 {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    h2,
    .title,
    .admin-page-title {
        font-size: 1.25rem;
        line-height: 1.3;
    }

    /* Molla stacks generous desktop padding; halve it to cut scrolling. */
    .page-header {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .page-content {
        padding-top: 1.5rem;
    }

    .footer .footer-middle {
        padding-top: 3rem;
        padding-bottom: 0.5rem;
    }

    .footer .widget {
        margin-bottom: 2rem;
    }

    .admin-card,
    .pm-dash-table-card {
        padding: 1rem;
    }

    .pm-inv-negative-alert {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

@media (max-width: 575.98px) {

    .page-header .page-title,
    .page-title {
        font-size: 1.5rem;
    }

    .product-title,
    h1 {
        font-size: 1.35rem;
    }

    /* Section rhythm: Molla uses 5-7rem gaps that read as dead space on a phone. */
    .mb-6,
    .mb-5 {
        margin-bottom: 2rem !important;
    }

    .pt-6,
    .pt-5 {
        padding-top: 2rem !important;
    }

    .pb-6,
    .pb-5 {
        padding-bottom: 2rem !important;
    }
}

/* ------------------------------------------------------------------ *
 * 7. Admin off-canvas navigation
 *
 * The theme ships the `body.sidebar-main` CSS but not the JS that sets it,
 * so admin-mobile-nav.js drives it. These rules add the pieces the theme
 * has no styles for: an accessible toggle button and a dismiss overlay.
 * ------------------------------------------------------------------ */

.wrapper-menu {
    background: none;
    border: 0;
    padding: 0.5rem;
    line-height: 1;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pm-tap);
    min-height: var(--pm-tap);
    border-radius: 6px;
}

.wrapper-menu:hover,
.wrapper-menu:focus-visible {
    background: rgba(15, 110, 253, 0.08);
}

.wrapper-menu i {
    font-size: 1.375rem;
}

#pm-admin-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(17, 24, 39, 0.5);
    border: 0;
}

#pm-admin-nav-overlay[hidden] {
    display: none;
}

body.pm-admin-nav-locked {
    overflow: hidden;
}

@media (max-width: 1299px) {

    /* Slide rather than jump, and sit above the overlay. */
    .iq-sidebar {
        transition: left 0.25s ease-in-out;
    }

    body.sidebar-main .iq-sidebar {
        box-shadow: 0 0 2rem rgba(17, 24, 39, 0.25);
    }
}

@media (min-width: 1300px) {

    /* The rail toggle is hidden on wide screens by the theme; no overlay needed. */
    #pm-admin-nav-overlay {
        display: none;
    }
}

/* ------------------------------------------------------------------ *
 * 8. Respect reduced-motion preferences
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}