/*
 * NOTE: backdrop-filter must never be set on .page-header itself (or any other
 * ancestor of .header-main). Doing so makes that ancestor the containing block
 * for position:fixed descendants per the CSS spec, which silently breaks the
 * sticky-on-scroll behavior. Blur/background is applied directly on .header-main
 * and .header-bottom instead.
 */
.page-header.type22 .main-panel-top {
    display: none;
}

/*
 * Removes an empty white gap between the header's coral bottom border and
 * whatever comes after it on the page. !important because the original
 * `.page-header.type22 { padding-bottom: 1rem }` rule has identical
 * specificity (same two classes) — without it, whichever of the two files
 * happens to load later in the cascade wins, which isn't reliably this one.
 */
@media (min-width: 992px) {
    .page-header.type22 {
        padding-bottom: 0 !important;
    }
}

/* Porto's theme default is pure #fff; a touch of warm gray keeps white content cards from washing out */
body {
    background-color: #f7f4f2;
}

/*
 * Porto's own type22.css hides .my-account/.wishlist unconditionally and only
 * re-shows them under max-width:991px — desktop was originally meant to use
 * the "Welcome, Guest!" dropdown in .main-panel-top instead, which we removed.
 * Re-enable the plain icons at desktop widths too.
 */
@media (min-width: 992px) {
    .page-header.type22 .header-contact .my-account,
    .page-header.type22 .header-contact .wishlist {
        display: inline-block !important;
    }
}

/*
 * At mobile widths (<992px), .header-bottom.main-menu-wrap (the toggle-drawer
 * bar) and .header-main (logo/search/icons) render as two stacked rows — flat,
 * opaque white on both, edged by one brand-color underline. At >=992px,
 * header-menu-order.js instead relocates the nav into .header-main so
 * everything shares one row (see the "Single-row desktop header" block
 * further down) — these two rules mostly matter for mobile at that point,
 * though nothing here is itself media-gated.
 */
.page-header.type22 .header-bottom.main-menu-wrap,
.page-header.type22 .header-main {
    background-color: #fff;
    margin: 0 auto;
    max-width: 100%;
    border-radius: 0;
    box-shadow: none;
}

.page-header.type22 .header-bottom.main-menu-wrap {
    border-bottom: 1px solid #f1e9e9;
}

.page-header.type22 .header-main {
    border-bottom: 3px solid #ff6b6b;
}

header.page-header.type22.sticky-header .header-bottom.main-menu-wrap,
header.page-header.type22.sticky-header .header-main {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(75, 59, 59, 0.1);
}

/* Home / Shop By Category / Shop By Brand — tie hover/open state to the logo's coral */
.page-header.type22 .header-bottom.main-menu-wrap .sw-megamenu.navigation > ul > li > a,
.page-header.type22 .header-bottom.main-menu-wrap .sw-megamenu.navigation > ul > li > a > span {
    color: #4b3b3b;
}

.page-header.type22 .header-bottom.main-menu-wrap .sw-megamenu.navigation > ul > li:hover > a,
.page-header.type22 .header-bottom.main-menu-wrap .sw-megamenu.navigation > ul > li:hover > a > span,
.page-header.type22 .header-bottom.main-menu-wrap .sw-megamenu.navigation > ul > li.active > a,
.page-header.type22 .header-bottom.main-menu-wrap .sw-megamenu.navigation > ul > li.active > a > span {
    color: #ff6b6b;
}

/* Search box: swap the stock flat gray border for a soft brand-tinted one so it blends with the header instead of reading as a separate boxed widget */
.page-header.type22 .search-area .block.block-search {
    border-color: #f1e9e9;
    box-shadow: none;
}

.page-header.type22 .search-area .block.block-search:focus-within {
    border-color: #ff6b6b;
}

/*
 * Round only the slide viewport (.owl-stage-outer) and the images themselves —
 * NOT the carousel root. The prev/next nav buttons are positioned with negative
 * left/right offsets so they sit partly outside the root's box; putting
 * overflow:hidden on the root clips them.
 */
.home-banner-slider .owl-stage-outer,
.home-banner-slider .porto-ibanner img {
    border-radius: 18px;
    overflow: hidden;
}

/*
 * Desktop: show the horizontal Home / Shop by Category / Shop by Brand bar
 * (.second-menu-block) and hide the old toggle-driven category drawer.
 * Mobile: keep the toggle drawer (real dynamic category tree, already fixed
 * with icons etc.) and hide the horizontal bar to avoid duplicating it.
 */
@media (min-width: 992px) {
    .page-header.type22 #main-toggle-menu {
        display: none;
    }
}

@media (max-width: 991px) {
    .page-header.type22 .second-menu-block {
        display: none;
    }

    /*
     * Porto's own type22.css forces #main-toggle-menu .toggle-menu-wrap to
     * `display: block !important` below 992px (so the real category drawer,
     * normally a hover/click dropdown, stays reachable as the mobile nav) but
     * never resets the `position: absolute; width: 117%;` from its
     * non-mobile-scoped base rule. That 17%-oversized absolutely positioned
     * box has no visible content of its own on mobile (its one child,
     * .nav-sections, is `position: fixed` and manages its own on/off-canvas
     * slide-in independently) but it still contributes to the page's
     * scrollable area, which was forcing a persistent horizontal scrollbar/
     * page shift on every phone-width page. Since type22.css loads after
     * this file, !important is required here too, for the same reason
     * given in the comment above about load order.
     */
    .page-header.type22 .main-toggle-menu .toggle-menu-wrap {
        position: static !important;
        width: auto !important;
        box-shadow: none !important;
    }
}

/*
 * Single-row desktop header: header-menu-order.js moves .second-menu-block out
 * of .header-bottom and into .header-main's .header-left, right after the logo,
 * so Logo | Nav | Search all sit in one flex row alongside the icons on the
 * right. .header-bottom is left empty on desktop (its only other child,
 * #main-toggle-menu, is already hidden above 991px) so it's simplest to hide
 * it outright here instead of leaving a blank strip. Because of that, its
 * `.sticky-header .header-bottom { position: fixed }` rule from type22.css
 * would only fix an invisible element — .header-main is fixed instead, so
 * the merged row keeps working when the page scrolls.
 *
 * "Shop by Category" / "Shop by Brand" open a `.submenu` panel. Its actual
 * full-width positioning (position:fixed, edge-to-edge under the header) is
 * done in header-menu-order.js on mouseenter, using real measured pixel
 * values instead of CSS percentages/vw — those were unreliable against this
 * panel's narrow, arbitrary positioned ancestor (a prior attempt at fixing
 * that with pure CSS broke the whole header live). No `!important` position
 * overrides here on purpose: the JS sets plain inline styles, and any
 * `!important` CSS here would silently outrank and break them.
 */
@media (min-width: 992px) {
    .page-header.type22 .header-bottom.main-menu-wrap {
        display: none;
    }

    .page-header.type22 .header-main .header-left {
        display: flex;
        align-items: center;
        gap: 28px;
    }

    .page-header.type22 .header-main .second-menu-block {
        flex: 0 0 auto;
    }

    .page-header.type22 .header-main .search-area {
        flex: 1 1 auto;
        min-width: 0;
    }

    .page-header.type22 .header-main .search-area .block.block-search {
        max-width: 420px;
        margin-top: 0;
    }

    header.page-header.type22.sticky-header .header-main {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
    }

    /*
     * Base theme rule `header.page-header.sticky-header .minicart-wrapper
     * {position:absolute; right:10px; top:20%}` (styles-l.css) was written
     * for other Porto header types whose sticky mode clones a compact header;
     * it isn't scoped by header type. Now that .header-main (type22) is
     * itself position:fixed above, it becomes the containing block for that
     * rule too, and the repositioned cart icon lands on top of the account
     * icon next to it. Put it back in normal flow for type22.
     */
    header.page-header.type22.sticky-header .minicart-wrapper {
        position: static;
        right: auto;
        top: auto;
    }
}

/*
 * A prior version put .cat-mega-decor as a flex sibling of .category-mega-grid,
 * scoped with a :has() selector — it didn't render as a side-by-side layout
 * live (likely :has() support, or just not worth the fragility). Plain CSS
 * Grid placement is simpler and doesn't depend on a relational pseudo-class:
 * 4 explicit category columns + one dedicated 200px column, with the decor
 * panel pinned there by grid-column so the ~13 category columns auto-flow
 * through columns 1-4 only, wrapping into new rows, while column 5 stays
 * reserved for the photos alongside them.
 */
.category-mega-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 200px;
    gap: 20px 24px;
    padding: 20px 32px;
    max-height: 75vh;
    overflow-y: auto;
}

/*
 * A handful of purely decorative photos, not tied to any one category — just
 * visual flair at the end of the dropdown (content is English/LTR, so the
 * right edge reads as the "end" of the menu). align-self:start keeps it
 * pinned to the top of its grid area instead of stretching to match however
 * tall the category columns happen to run. No card frame (border-radius/
 * shadow/cropping) — these are transparent-background product renders,
 * shown at their natural size so they read as floating objects rather than
 * boxed photo tiles.
 */
.cat-mega-decor {
    grid-column: 5;
    grid-row: span 4;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cat-mega-decor-img {
    width: 100%;
    height: auto;
    transition: transform 0.35s ease;
}

.cat-mega-decor-img:hover {
    transform: scale(1.05);
}

.cat-mega-col .cat-mega-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: #4b3b3b;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid #ffe9e9;
}

.cat-mega-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}

.cat-mega-col .cat-mega-title:hover {
    color: #ff6b6b;
}

.cat-mega-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cat-mega-col ul li a {
    display: block;
    padding: 3px 0;
    font-size: 12.5px;
    color: #6f6262;
}

.cat-mega-col ul li a:hover {
    color: #ff6b6b;
}

/*
 * Sub-category lists vary wildly in length (Mobility has 1 item, Office
 * Equipment has 17) — showing them all made columns wildly different heights
 * in the same row (a staggered, messy look). header-menu-order.js marks
 * anything past the 3rd <li> with .cat-mega-more-item and adds a toggle;
 * capping every column at the same visible height fixes the row-uneveness
 * directly. The extra items collapse via max-height/opacity (not display:
 * none) so expanding is a smooth slide-open instead of an instant jump.
 */
.cat-mega-col ul li.cat-mega-more-item {
    /* Generously larger than any single link ever needs — max-height only
       ever caps, never forces a minimum, so this doesn't add space around
       the always-visible items; it just has to not be smaller than the
       real content or the text gets clipped, which read as uneven spacing. */
    max-height: 100px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease;
}

.cat-mega-col ul li.cat-mega-more-item.cat-mega-more-hidden {
    max-height: 0;
    opacity: 0;
}

/* Plain inline text, not a button at all (a <span>, not a <button> — see header-menu-order.js) */
.cat-mega-more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #ff6b6b;
    cursor: pointer;
}

.cat-mega-more-toggle:hover {
    text-decoration: underline;
}

.cat-mega-more-arrow {
    display: inline-block;
    font-size: 9px;
    transition: transform 0.25s ease;
}

.cat-mega-more-toggle.is-expanded .cat-mega-more-arrow {
    transform: rotate(180deg);
}