/* Hide the Eskil/Qode theme header */
#qodef-page-header,
#qodef-page-mobile-header {
    display: none !important;
}

/* Remove space reserved for the original header */
#qodef-page-outer {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* Elementor replacement header */
.elementor-location-header {
    width: 100%;
    position: relative;
    z-index: 9999;
}

/* Remove Qode theme width and spacing interference */
.elementor-location-header .e-con,
.elementor-location-header .elementor-section,
.elementor-location-header .elementor-container {
    max-width: none;
}

/* Prevent theme typography and link styles overriding header */
.elementor-location-header a {
    text-decoration: none;
}

/* Remove spacing before page content */
#qodef-page-outer,
#qodef-page-inner {
    margin-top: 0 !important;
    padding-top: 0;
}
/* Force the DTC slider and its Elementor wrapper to full width */
.elementor-widget-dtc-topbar-slider,
.elementor-widget-dtc-topbar-slider > .elementor-widget-container,
.elementor-element:has(.dtc-topbar-slider),
.elementor-element:has(.dtc-topbar-slider) > .elementor-widget-container,
.dtc-topbar-slider {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
}

.dtc-topbar-slider__inner {
    width: 100% !important;
    max-width: 760px;
    margin-inline: auto;
}
.elementor .e-flexbox-base {
  padding: 0;
}
nav svg.qodef-svg--menu-arrow {
	display:none !important;
}
.dtc-ch-menu .menu-item-has-children > a::after {
	content: "" !important;
    display: inline-block;
    width: 10px;
    height: 7px;
    margin-left: 8px;
    background-image: url("https://designertile.dpdev.com.au/wp-content/uploads/2026/07/arrow-dwn.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
nav a {
	font-size: 17px;
  font-weight: 500;
}
.dtc-ch-menu .menu-item-has-children > a::after {
	margin-left: 2px;
	position:relative;
	top:1px
}
/* ==========================================
   Clearance Menu Button
   ========================================== */

#menu-item-14365 {
    position: relative;
    padding: 0 !important;
    overflow: visible !important;
}

/* Red pill is applied to the link itself */
#menu-item-14365 > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    color: #ffffff !important;
    background: #c9003d !important;
    border-radius: 50px !important;

    padding: 8px 16px !important;
    min-height: auto !important;
    line-height: 1 !important;
}

/* Hover */
#menu-item-14365:hover > a,
#menu-item-14365 > a:hover {
    color: #ffffff !important;
    background: #bb003b !important;
}

/* Hide the original theme arrow */
#menu-item-14365 > a > svg {
    display: none !important;
}

/* Add custom white arrow */
#menu-item-14365 > a::after {
    content: "" !important;
    display: inline-block !important;

    width: 10px !important;
    height: 10px !important;
    margin-left: 2px !important;
    flex: 0 0 10px !important;

    background-image: url("https://designertile.dpdev.com.au/wp-content/uploads/2026/07/whiteArrow.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* ==========================================
   Clearance Dropdown
   ========================================== */

/* Position the dropdown */
#menu-item-14365 > .sub-menu {
    top: calc(100% + 14px) !important;
    left: 0 !important;
    margin: 0 !important;
    z-index: 99999 !important;
}

/* Invisible hover bridge between the button and dropdown */
#menu-item-14365::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px;
    background: transparent;
    z-index: 99998;
}
ul.sub-menu a {
  font-size: 15px;
  font-weight: 400;
}
/* Remove the existing arrow */
.dtc-topbar-slider__arrow span {
    display: none !important;
}

/* Previous (left) arrow */
.dtc-topbar-slider__arrow--prev {
    width: 38px !important;
    height: 38px !important;

    background: url("https://designertile.dpdev.com.au/wp-content/uploads/2026/07/slider-left.jpg") center center no-repeat !important;
    background-size: 12px auto !important;
    border: none !important;
}

/* Next (right) arrow */
.dtc-topbar-slider__arrow--next {
    width: 38px !important;
    height: 38px !important;

    background: url("https://designertile.dpdev.com.au/wp-content/uploads/2026/07/slider-left.jpg") center center no-repeat !important;
    background-size: 12px auto !important;
    transform: scaleX(-1) !important;

    border: none !important;
}
#dtc-topbar-40c35df {
	background-color:#bb003b !important;
}
/* Hide the existing SVG */
.dtc-ch-sample-icon {
    display: none !important;
}

/* Replace it with your image */
.dtc-ch-samples {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dtc-ch-samples::before {
    content: "";
    display: block;
    width: 27px;
    height: 30px;

    background: url("https://designertile.dpdev.com.au/wp-content/uploads/2026/07/sample-icon.jpg") center center / contain no-repeat;
}
.elementor-14325 .elementor-element.elementor-element-f6d4953 .dtc-ch-inner {
	max-width:none !important;
}
.dtc-ch-inner {
	max-width:none !important;
}
nav.dtc-ch-desktop-nav ul:not(.wp-block) {
  margin: 0 0 0;
}







/* ==========================================
   Compact Desktop Header — 1370px and below
   ========================================== */

@media (min-width: 1025px) and (max-width: 1370px) {

    /* Main header layout */
    .dtc-ch-main .dtc-ch-main-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 40px !important;
        width: 100% !important;
    }

    /* Logo */
    .dtc-ch-main .dtc-ch-logo {
        order: 1 !important;
        position: static !important;
        transform: none !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    .dtc-ch-main .dtc-ch-logo img {
        display: block !important;
        width: auto !important;
        max-width: 160px !important;
        height: auto !important;
    }

    /* Categories menu */
    .dtc-ch-main .dtc-ch-left-nav {
        order: 2 !important;
        display: flex !important;
        position: static !important;
        transform: none !important;
        margin: 0 0 0 30px !important; /* <-- pushed right */
        flex: 0 1 auto !important;
    }

    .dtc-ch-main .dtc-ch-left-nav > .dtc-ch-menu {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .dtc-ch-main .dtc-ch-left-nav > .dtc-ch-menu > li {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    /* Hide right navigation */
    .dtc-ch-main .dtc-ch-right-nav {
        display: none !important;
    }

    /* Hamburger */
    .dtc-ch-main .dtc-ch-mobile-toggle {
        order: 3 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin-left: auto !important;
        padding: 8px !important;

        background: transparent !important;
        border: 0 !important;
        cursor: pointer !important;
    }

    /* Hide "Menu" text */
    .dtc-ch-main .dtc-ch-mobile-toggle > span:first-child {
        display: none !important;
    }

    .dtc-ch-main .dtc-ch-mobile-toggle .dtc-ch-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .dtc-ch-main .dtc-ch-mobile-toggle svg {
        display: block !important;
        width: 22px !important;
        height: 22px !important;
    }
}
@media (max-width: 1024px) {

    .dtc-ch-mobile-toggle > span:first-child {
        display: none !important;
    }

}



/* ==========================================
   Mobile Accordion Menu
   ========================================== */

@media (max-width: 1370px) {

    /* Parent menu item */
    .dtc-ch-mobile-menu > .menu-item-has-children {
        position: relative;
        overflow: hidden;
    }

    /* Parent link */
    .dtc-ch-mobile-menu > .menu-item-has-children > a {
        display: flex !important;
        align-items: center !important;
        min-height: 54px;
        padding: 14px 55px 14px 20px !important;

        font-weight: 600;
        color: #111;
        background: #fff;
        border-bottom: 0px solid #eeeeee;

        transition:
            color 0.25s ease,
            background-color 0.25s ease;
    }

    /* Smooth parent hover */
    .dtc-ch-mobile-menu > .menu-item-has-children > a:hover {
        color: #c9003d !important;
        background: #f7f7f7 !important;
    }

    /* Hide Qode's original inline arrow */
    .dtc-ch-mobile-menu > .menu-item-has-children > a > svg {
        display: none !important;
    }

    /* New clickable arrow button */
    .dtc-ch-submenu-toggle {
        position: absolute;
        top: 0;
        right: 0;

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

        width: 54px;
        height: 54px;
        padding: 0;

        background: transparent;
        border: 0;
        cursor: pointer;
        z-index: 2;

        transition:
            background-color 0.25s ease,
            opacity 0.25s ease;
    }

    .dtc-ch-submenu-toggle:hover {
        background: #f3f3f3;
    }

    /* Draw arrow */
    .dtc-ch-submenu-toggle::before {
        content: "";
        width: 8px;
        height: 8px;

        border-right: 2px solid #c9003d;
        border-bottom: 2px solid #c9003d;

        transform: rotate(45deg);
        transform-origin: center;
        transition:
            transform 0.3s ease,
            border-color 0.25s ease;
    }

    /* Rotate arrow when open */
    .dtc-ch-mobile-menu > .menu-item-has-children.is-open
        > .dtc-ch-submenu-toggle::before {
        transform: rotate(225deg);
    }

    /* Children closed by default */
    .dtc-ch-mobile-menu .sub-menu {
        display: block !important;
        position: static !important;

        width: 100% !important;
        min-width: 0 !important;
        max-height: 0;
        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden;
        opacity: 0;
        visibility: hidden;

        background: #f7f7f7 !important;
        box-shadow: none !important;

        transform: translateY(-6px) !important;
        pointer-events: none;

        transition:
            max-height 0.4s ease,
            opacity 0.3s ease,
            transform 0.3s ease,
            visibility 0s linear 0.4s;
    }

    /* Children open */
    .dtc-ch-mobile-menu
        > .menu-item-has-children.is-open
        > .sub-menu {
        max-height: 600px;
        opacity: 1;
        visibility: visible;

        transform: translateY(0) !important;
        pointer-events: auto;

        transition:
            max-height 0.45s ease,
            opacity 0.3s ease 0.05s,
            transform 0.3s ease 0.05s,
            visibility 0s linear 0s;
    }

    /* Child links */
    .dtc-ch-mobile-menu .sub-menu > li > a {
        display: block !important;
        padding: 13px 20px 13px 35px !important;

        font-size: 14px !important;
        font-weight: 400 !important;
        color: #333 !important;

        background: #f7f7f7 !important;
        border-bottom: 1px solid #e8e8e8 !important;

        transition:
            color 0.25s ease,
            background-color 0.25s ease,
            padding-left 0.25s ease;
    }

    /* Smooth child hover */
    .dtc-ch-mobile-menu .sub-menu > li > a:hover {
        color: #c9003d !important;
        background: #f1f1f1 !important;
        padding-left: 40px !important;
    }
}

/* ==========================================
   Mobile Clearance Button
   ========================================== */

@media (max-width: 1370px) {

    /* Red parent row */
    .dtc-ch-mobile-menu > li.clearnaceMenu > a {
        background: #c9003d !important;
        color: #ffffff !important;
        font-weight: 600;

        transition:
            background-color 0.25s ease,
            color 0.25s ease;
    }

    /* Clearance hover */
    .dtc-ch-mobile-menu > li.clearnaceMenu > a:hover {
        background: #b50037 !important;
        color: #ffffff !important;
    }

    /* Arrow button */
    .dtc-ch-mobile-menu
        > li.clearnaceMenu
        > .dtc-ch-submenu-toggle {
        background: #c9003d !important;

        transition: background-color 0.25s ease;
    }

    .dtc-ch-mobile-menu
        > li.clearnaceMenu
        > .dtc-ch-submenu-toggle:hover {
        background: #b50037 !important;
    }

    /* White arrow */
    .dtc-ch-mobile-menu
        > li.clearnaceMenu
        > .dtc-ch-submenu-toggle::before {
        border-right-color: #ffffff !important;
        border-bottom-color: #ffffff !important;
    }

    /* Clearance children */
    .dtc-ch-mobile-menu > li.clearnaceMenu .sub-menu {
        background: #ffffff !important;
    }

    .dtc-ch-mobile-menu > li.clearnaceMenu .sub-menu a {
        background: #ffffff !important;
        color: #111111 !important;
    }

    .dtc-ch-mobile-menu > li.clearnaceMenu .sub-menu a:hover {
        background: #f5f5f5 !important;
        color: #c9003d !important;
    }
}




/* ==========================================
   Drawer accordion — compact desktop support
   ========================================== */
@media (min-width: 1025px) and (max-width: 1370px) {
    body > .dtc-ch-drawer .dtc-ch-mobile-menu > .menu-item-has-children {
        position: relative !important;
        overflow: hidden !important;
    }

    body > .dtc-ch-drawer .dtc-ch-mobile-menu > .menu-item-has-children > a {
        padding-right: 55px !important;
    }

    /* Qode may inject its own menu-arrow SVG. The drawer uses our button only. */
    body > .dtc-ch-drawer .dtc-ch-mobile-menu > .menu-item-has-children > a > svg,
    body > .dtc-ch-drawer .dtc-ch-mobile-menu > .menu-item-has-children > a .qodef-menu-item-arrow {
        display: none !important;
    }

    body > .dtc-ch-drawer .dtc-ch-submenu-toggle {
        display: flex !important;
    }
}

/* ==========================================
   Smart Sticky Header
   v1.2.5

   Smart sticky behaviour:
   - once the main nav reaches the top, the COMPLETE header shell stays fixed
   - scrolling down translates the upper rows out of view, leaving only .dtc-ch-main
   - scrolling up smoothly translates the same fixed shell back down

   Keeping one fixed shell for both states avoids the visual jump caused by
   swapping between a fixed child row and a fixed parent header.
   ========================================== */

.dtc-ch-sticky-spacer {
    display: block;
    width: 100%;
    height: 0;
    pointer-events: none;
}

.dtc-ch-main-sticky-spacer {
    display: none !important;
}

.dtc-ch-sticky-shell {
    --dtc-ch-admin-offset: 0px;
    --dtc-ch-main-height: 0px;
    --dtc-ch-upper-height: 0px;
}

/* Once activated, the complete Elementor header stays fixed in one place. */
.dtc-ch-sticky-shell.dtc-ch-sticky-active {
    position: fixed !important;
    top: var(--dtc-ch-admin-offset) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99990 !important;
    transform: translate3d(0, 0, 0);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.08);
}

/* Scrolling DOWN: slide only the rows above the main navigation off-screen. */
.dtc-ch-sticky-shell.dtc-ch-sticky-active.dtc-ch-main-sticky {
    transform: translate3d(0, calc(-1 * var(--dtc-ch-upper-height)), 0);
}

/* Scrolling UP: smoothly reveal the complete header again. */
.dtc-ch-sticky-shell.dtc-ch-sticky-active.dtc-ch-full-sticky {
    transform: translate3d(0, 0, 0);
}

/* The main row never changes positioning mode, preventing the sticky 'snap'. */
.dtc-ch-sticky-shell.dtc-ch-sticky-active .dtc-ch-main {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Keep Elementor editing predictable. */
body.elementor-editor-active .dtc-ch-sticky-shell,
body.elementor-editor-preview .dtc-ch-sticky-shell,
body.elementor-editor-active .dtc-ch-sticky-shell .dtc-ch-main,
body.elementor-editor-preview .dtc-ch-sticky-shell .dtc-ch-main {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .dtc-ch-sticky-shell.dtc-ch-sticky-active {
        transition: none !important;
    }
}

/* ==========================================
   Narrow mobile sticky — 600px and under
   Main row remains visible while scrolling down; upper rows reveal smoothly
   when scrolling back up. Uses the same fixed shell to avoid any jump.
   ========================================== */
@media (max-width: 600px) {
    .dtc-ch-main-sticky-spacer {
        display: none !important;
        height: 0 !important;
    }

    .dtc-ch-sticky-shell.dtc-ch-sticky-active {
        position: fixed !important;
        top: var(--dtc-ch-admin-offset, 0px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 99990 !important;
        transition:
            transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
            clip-path 0.38s cubic-bezier(0.22, 1, 0.36, 1),
            -webkit-clip-path 0.38s cubic-bezier(0.22, 1, 0.36, 1) !important;
        will-change: transform, clip-path;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        isolation: isolate;
    }

    /*
     * iOS Safari can briefly composite the translated promo bar underneath its
     * translucent browser chrome. Clip the hidden upper rows as they move out
     * so the red promo bar is never painted above the visible main nav.
     */
    .dtc-ch-sticky-shell.dtc-ch-sticky-active.dtc-ch-main-sticky {
        transform: translate3d(0, calc(-1 * var(--dtc-ch-upper-height)), 0) !important;
        clip-path: inset(var(--dtc-ch-upper-height) 0 0 0) !important;
        -webkit-clip-path: inset(var(--dtc-ch-upper-height) 0 0 0) !important;
    }

    /* Scroll up: reveal the complete header and its clipped area together. */
    .dtc-ch-sticky-shell.dtc-ch-sticky-active.dtc-ch-full-sticky {
        transform: translate3d(0, 0, 0) !important;
        clip-path: inset(0 0 0 0) !important;
        -webkit-clip-path: inset(0 0 0 0) !important;
    }

    .dtc-ch-sticky-shell.dtc-ch-sticky-active .dtc-ch-main {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        transform: none !important;
    }
}

/* ==========================================
   Off-canvas menu viewport portal — v1.2.13
   The drawer is moved to <body> by header.js so sticky header clipping and
   transforms can never crop the overlay or its menu items.
   ========================================== */
body > .dtc-ch-drawer {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    z-index: 2147483000 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    transform: none !important;
    overflow: visible !important;
    isolation: isolate;
}

body > .dtc-ch-drawer .dtc-ch-drawer-panel {
    height: 100dvh !important;
    min-height: 100vh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@supports not (height: 100dvh) {
    body > .dtc-ch-drawer,
    body > .dtc-ch-drawer .dtc-ch-drawer-panel {
        height: 100vh !important;
        max-height: 100vh !important;
    }
}



/* ==========================================
   Drawer arrow hit-area fix — v1.2.15
   Make the custom arrow button the only visible/clickable arrow control at
   every drawer breakpoint. The whole 54px right-hand area is clickable.
   ========================================== */
@media (max-width: 1370px) {
    body > .dtc-ch-drawer .dtc-ch-mobile-menu > .menu-item-has-children > a::after {
        display: none !important;
        content: none !important;
    }

    body > .dtc-ch-drawer .dtc-ch-mobile-menu > .menu-item-has-children {
        position: relative !important;
    }

    body > .dtc-ch-drawer .dtc-ch-submenu-toggle {
        display: flex !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        touch-action: manipulation;
        z-index: 20 !important;
        -webkit-appearance: none;
        appearance: none;
    }

    body > .dtc-ch-drawer .dtc-ch-submenu-toggle::before {
        display: block !important;
        content: "" !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid #c9003d !important;
        border-bottom: 2px solid #c9003d !important;
        transform: rotate(45deg) !important;
        transform-origin: center !important;
        pointer-events: none !important;
        transition: transform 0.3s ease !important;
    }

    body > .dtc-ch-drawer .dtc-ch-mobile-menu > .menu-item-has-children.is-open > .dtc-ch-submenu-toggle::before {
        transform: rotate(225deg) !important;
    }
}


/* ==========================================
   Full desktop dropdowns — hover only v1.2.16
   Clicking a parent must never pin its submenu open.
   Compact desktop/tablet/mobile drawers are unaffected.
   ========================================== */
@media (min-width: 1371px) {
    .dtc-ch .dtc-ch-desktop-nav .dtc-ch-menu > .menu-item-has-children:not(:hover) > .sub-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .dtc-ch .dtc-ch-desktop-nav .dtc-ch-menu > .menu-item-has-children:hover > .sub-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}