/* ==========================================================================
   Dhaka Hybrid — site chrome: scroll progress, status top bar, sticky header
   and the mega menu. Driven entirely by the theme custom properties printed
   by resources/views/front/theme.blade.php.
   ========================================================================== */

/* ---------- scroll progress ---------- */

.dh-progress{
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 1100;
    width: 100%;
    height: 3px;
    background: transparent;
    pointer-events: none;
}

.dh-progress > i{
    display: block;
    width: var(--dh-progress, 0%);
    height: 100%;
    background: linear-gradient(90deg, var(--dh-primary), var(--dh-accent, var(--dh-primary)));
    box-shadow: 0 0 12px rgba(var(--dh-primary-rgb), .7);
    transition: width .1s linear;
}

/* ==========================================================================
   TOP BAR
   ========================================================================== */

.dh-topbar{
    background: var(--dh-topbar-bg);
    color: var(--dh-topbar-text);
    font-size: .75rem;
    line-height: 1.4;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.dh-topbar-inner{
    width: 100%;
    max-width: var(--dh-container, 1240px);
    margin-inline: auto;
    padding: 4px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.dh-topbar-group{
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.dh-topbar-group--end{ justify-content: flex-end; }

.dh-topbar-link{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}

.dh-topbar-link i{ color: var(--dh-primary); font-size: .8em; }
.dh-topbar-link:hover{ color: #fff; }

/* phone numbers share one icon, split by a thin rule */
.dh-topbar-phones{ flex-wrap: wrap; row-gap: 2px; }
.dh-topbar-phones a{ color: inherit; text-decoration: none; transition: color .2s ease; }
.dh-topbar-phones a:hover{ color: #fff; }
.dh-topbar-phones a + a{ padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .22); }

.dh-topbar-address strong{ font-weight: 700; color: #fff; }

/* ---------- offer strip ---------- */

.dh-topbar-offer{
    background: var(--dh-primary);
    color: var(--dh-on-primary);
}

.dh-topbar-message{
    max-width: var(--dh-container, 1240px);
    margin: 0 auto;
    padding: 5px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    text-align: center;
    overflow-wrap: anywhere;
}

.dh-topbar-message i{ flex: none; font-size: .9em; }

.dh-topbar-social{
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dh-topbar-social a{
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: inherit;
    font-size: .74rem;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.dh-topbar-social a:hover{
    background: var(--dh-primary);
    color: var(--dh-on-primary);
    transform: translateY(-2px);
}

/* ---------- open / closed pill ---------- */

.dh-status{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 11px 2px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    white-space: nowrap;
}

.dh-status strong{ font-weight: 700; }

.dh-status-detail{
    opacity: .66;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, .16);
}

.dh-status-dot{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: #94a3b8;
}

.dh-status.is-open{ color: #86efac; border-color: rgba(34, 197, 94, .34); background: rgba(34, 197, 94, .12); }
.dh-status.is-open .dh-status-dot{
    background: #22c55e;
    animation: dhPulse 2.2s ease-out infinite;
}

.dh-status.is-closed{ color: #fca5a5; border-color: rgba(239, 68, 68, .28); background: rgba(239, 68, 68, .1); }
.dh-status.is-closed .dh-status-dot{ background: #ef4444; }

@keyframes dhPulse{
    0%{ box-shadow: 0 0 0 0 rgba(34, 197, 94, .65); }
    70%{ box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
    100%{ box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.dh-header{
    position: relative;
    z-index: 1030;
    background:
        radial-gradient(1200px 200px at 50% 0%, rgba(255, 255, 255, .05), transparent 70%),
        var(--dh-header-bg);
    color: var(--dh-header-text);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
    transition: padding .28s ease, background .28s ease, box-shadow .28s ease;
}

/* hairline that picks up the brand colour in the middle */
.dh-header::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--dh-primary-rgb), .55), transparent);
    opacity: .7;
    pointer-events: none;
}

.dh-header.is-sticky{
    position: sticky;
    top: 0;
}

.dh-header.is-scrolled{
    background: color-mix(in srgb, var(--dh-header-bg) 88%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .32);
}

.dh-header-inner{
    width: 100%;
    max-width: var(--dh-container, 1240px);
    margin-inline: auto;
    padding: 9px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    transition: padding .28s ease;
}

.dh-header[data-shrink="1"].is-scrolled .dh-header-inner{ padding-block: 5px; }

/* The mark sits on its own glass plate, cut from the same cloth as the nav
   capsule beside it, so the bar reads as one designed set rather than a logo
   dropped next to a menu. */
.dh-brand{
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    padding: 4px 9px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .015));
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 16px 30px -20px rgba(0, 0, 0, .95);
    overflow: hidden;
    transition:
        transform .3s cubic-bezier(.22, 1, .36, 1),
        border-color .3s ease,
        box-shadow .3s ease;
}

/* brand-coloured bloom rising from under the mark */
.dh-brand::before{
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(82% 118% at 50% 128%, rgba(var(--dh-primary-rgb), .55), transparent 70%);
    opacity: .7;
    pointer-events: none;
    transition: opacity .3s ease;
}

/* a single slow sheen on hover — the same gesture the Book Now button makes */
.dh-brand::after{
    content: "";
    position: absolute;
    top: 0;
    left: -140%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .26), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    transition: left .75s ease;
}

.dh-brand:hover{
    transform: translateY(-1px);
    border-color: rgba(var(--dh-primary-rgb), .42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 20px 36px -20px rgba(var(--dh-primary-rgb), .8);
}

.dh-brand:hover::before{ opacity: 1; }
.dh-brand:hover::after{ left: 150%; }

/* Height still comes from Theme Settings (--dh-logo-h), but the bar caps it
   so a generous setting cannot turn the header into a banner. Width is left
   to the browser, so the logo can never be squashed. */
.dh-brand img{
    position: relative;
    height: min(var(--dh-logo-h, 48px), var(--dh-logo-cap, 60px));
    width: auto;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
    transition: height .28s ease, filter .28s ease;
}

.dh-brand:hover img{ filter: drop-shadow(0 6px 14px rgba(var(--dh-primary-rgb), .5)); }

.dh-header[data-shrink="1"].is-scrolled .dh-brand{ padding: 4px 11px; border-radius: 14px; }
.dh-header[data-shrink="1"].is-scrolled .dh-brand img{ height: min(var(--dh-logo-h, 48px), 40px); }

/* ---------- nav ---------- */

.dh-nav{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
}

/* The links sit in one softly lit capsule so the bar reads as a single
   control instead of six loose words. */
.dh-nav-list{
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 0 0 auto;
    padding: 3px;
    list-style: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    /* No backdrop-filter here: it would make the capsule the containing block
       for the mega panels below it, and they would hang off the links instead
       of centring under the header. */
}

.dh-nav-item{ position: relative; }

/* A mega panel is far wider than the link that opens it, so it hangs off the
   bar when anchored to that link. Anchoring it to the header instead centres
   it under the container. */
.dh-nav-item.has-mega{ position: static; }

.dh-nav-link{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    color: var(--dh-header-text);
    font-family: var(--dh-font-heading);
    font-size: .845rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 999px;
    transition: color .22s ease, background .22s ease, box-shadow .22s ease;
}

/* short brand-coloured marker under the current page */
.dh-nav-link::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--dh-primary), var(--dh-accent, var(--dh-primary)));
    box-shadow: 0 0 10px rgba(var(--dh-primary-rgb), .8);
    transform: translateX(-50%) scaleX(0);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.dh-nav-link:hover,
.dh-nav-link.is-active{ color: var(--dh-primary); }

/* soft glass pill under the pointer */
.dh-nav-link:hover{ background: rgba(255, 255, 255, .08); }

.dh-nav-link.is-active{
    background: rgba(var(--dh-primary-rgb), .12);
    box-shadow: inset 0 0 0 1px rgba(var(--dh-primary-rgb), .26);
}

.dh-nav-link:hover::after,
.dh-nav-link.is-active::after{ transform: translateX(-50%) scaleX(1); }

.dh-caret{
    width: 12px;
    height: 12px;
    opacity: .7;
    transition: transform .28s ease;
}

.dh-nav-item.is-open > .dh-nav-link .dh-caret{ transform: rotate(180deg); opacity: 1; }
.dh-nav-item.is-open > .dh-nav-link{ color: var(--dh-primary); background: rgba(255, 255, 255, .08); }

/* the invisible button only exists for touch/mobile toggling */
.dh-sub-toggle{
    display: none;
    background: none;
    border: 0;
    padding: 0;
}

/* ---------- header CTA ---------- */

.dh-nav-cta{
    display: flex;
    align-items: center;
    gap: 13px;
    flex: none;
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, .1);
}

.dh-nav-phone{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--dh-header-text);
    text-decoration: none;
}

.dh-nav-phone i{
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(var(--dh-primary-rgb), .16);
    color: var(--dh-primary);
    font-size: .82rem;
    transition: transform .25s ease;
}

.dh-nav-phone:hover i{ transform: rotate(-12deg) scale(1.06); }
.dh-nav-phone span{ display: flex; flex-direction: column; line-height: 1.2; }
.dh-nav-phone small{ font-size: .64rem; opacity: .6; text-transform: uppercase; letter-spacing: .08em; }
.dh-nav-phone strong{ font-size: .84rem; font-weight: 700; }

.dh-book-btn{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 19px;
    border-radius: var(--dh-radius-btn);
    background: linear-gradient(135deg, var(--dh-primary), var(--dh-primary-dark));
    color: var(--dh-on-primary);
    font-family: var(--dh-font-heading);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(var(--dh-primary-rgb), .36), inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform .24s cubic-bezier(.22, 1, .36, 1), box-shadow .24s ease, background .24s ease;
}

.dh-book-btn svg{ width: 14px; height: 14px; transition: transform .24s ease; }

.dh-book-btn:hover{
    color: var(--dh-on-primary);
    background: linear-gradient(135deg, var(--dh-primary-dark), var(--dh-primary));
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(var(--dh-primary-rgb), .46), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.dh-book-btn:hover svg{ transform: translateX(4px); }

/* sheen sweep */
.dh-book-btn::before{
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-22deg);
    transition: left .6s ease;
}

.dh-book-btn:hover::before{ left: 130%; }

/* ==========================================================================
   MEGA MENU
   ========================================================================== */

.dh-mega{
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    z-index: 40;
    width: min(760px, calc(100vw - 48px));
    transform: translate(-50%, 12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .26s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility .26s;
}

.dh-mega--split{ width: min(980px, calc(100vw - 48px)); }

.dh-nav-item.is-open > .dh-mega{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

/* keeps the pointer from falling through the gap under the trigger */
.dh-mega::before{
    content: "";
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    height: 20px;
}

.dh-mega-inner{
    position: relative;
    background: var(--dh-page-bg);
    border: 1px solid var(--dh-border);
    border-radius: calc(var(--dh-radius) + 4px);
    box-shadow: 0 40px 90px -26px rgba(var(--dh-dark-rgb), .55), 0 2px 6px rgba(var(--dh-dark-rgb), .08);
    padding: 18px;
    overflow: hidden;
}

/* brand strip across the top of the panel */
.dh-mega-inner::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--dh-primary), var(--dh-accent, var(--dh-primary)), transparent);
}

.dh-mega-head{ margin-bottom: 13px; }

.dh-mega-head h3{
    margin: 6px 0 0;
    color: var(--dh-heading);
    font-family: var(--dh-font-heading);
    font-size: 1.06rem;
    font-weight: 800;
}

.dh-mega-kicker{
    display: inline-block;
    color: var(--dh-primary-dark);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dh-mega-head p{
    margin: 6px 0 0;
    font-size: .84rem;
    line-height: 1.6;
    color: var(--dh-body);
    max-width: 56ch;
}

/* the reassurance row that turns a link list into an informative panel */
.dh-mega-facts{
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 12px;
}

/* In the products panel this row comes after the columns instead of before
   them, so without a top margin the chips sat flush against the product cards. */
.dh-mega-cols + .dh-mega-facts{ margin-top: 16px; }

.dh-mega-facts span,
.dh-mega-facts a{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--dh-muted-bg);
    border: 1px solid var(--dh-border);
    color: var(--dh-body);
    font-size: .76rem;
    font-weight: 600;
    text-decoration: none;
}

.dh-mega-facts i{ color: var(--dh-primary-dark); font-size: .76rem; }

.dh-mega-facts a:hover{
    background: rgba(var(--dh-primary-rgb), .12);
    border-color: rgba(var(--dh-primary-rgb), .4);
    color: var(--dh-primary-dark);
}

.dh-mega-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.dh-mega-card{
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px;
    border-radius: var(--dh-radius-sm);
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.dh-mega-card:hover{ background: var(--dh-muted-bg); transform: translateX(3px); }

.dh-mega-thumb{
    width: 48px;
    height: 48px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(var(--dh-primary-rgb), .14);
    color: var(--dh-primary-dark);
}

.dh-mega-thumb img{ width: 100%; height: 100%; object-fit: cover; }

/* Part photos are usually shot on white, so the tile needs its own edge or
   it dissolves into the panel. */
.dh-mega-product .dh-mega-thumb{
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--dh-border);
}

.dh-mega-text{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dh-mega-text strong{ color: var(--dh-heading); font-size: .9rem; font-weight: 700; line-height: 1.3; }
.dh-mega-text small{ color: var(--dh-body); font-size: .78rem; line-height: 1.45; }

/* Three columns: ways in, what is worth seeing, and why buy it here. Hairlines
   rather than wide gutters, so the panel reads as one counter. */
.dh-mega-cols{
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.24fr) minmax(0, .92fr);
    gap: 0;
    /* A short category list must not be stretched to the height of the product
       grid beside it — that is what left the panel mostly empty. */
    align-items: start;
}

.dh-mega-col{ padding-inline: 18px; }
.dh-mega-col:first-child{ padding-left: 0; }
.dh-mega-col:last-child{ padding-right: 0; }
.dh-mega-col + .dh-mega-col{ border-left: 1px solid var(--dh-border); }
.dh-mega-col--promo{ border-left: 0; }

/* the second kicker in a column, with a rule to part it from the list above */
.dh-mega-kicker--sub{
    display: block;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--dh-border);
}

.dh-mega-quick{ list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }

.dh-mega-quick a{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border-radius: var(--dh-radius-sm);
    color: var(--dh-body);
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.dh-mega-quick i{ width: 15px; text-align: center; color: var(--dh-primary); font-size: .78rem; }
.dh-mega-quick a:hover{ background: var(--dh-muted-bg); color: var(--dh-primary-dark); }

.dh-mega-list{ list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 2px; }

.dh-mega-list a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border-radius: var(--dh-radius-sm);
    color: var(--dh-heading);
    font-size: .89rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.dh-mega-list a:hover{ background: var(--dh-muted-bg); color: var(--dh-primary-dark); }

.dh-mega-list em{
    font-style: normal;
    font-size: .72rem;
    font-weight: 700;
    color: var(--dh-body);
    background: var(--dh-muted-bg);
    border-radius: 999px;
    padding: 2px 8px;
}

/* Rows rather than tiles: a part is worth a price, a stock line and where it
   came from, and none of that fits under a 90px card. */
.dh-mega-products{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    margin-top: 9px;
}

.dh-mega-product{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: var(--dh-radius-sm);
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.dh-mega-product:hover{
    background: var(--dh-muted-bg);
    border-color: rgba(var(--dh-primary-rgb), .35);
    transform: translateX(3px);
    box-shadow: var(--dh-shadow-sm);
}

.dh-mega-product .dh-mega-thumb{ width: 54px; height: 54px; border-radius: 11px; }

.dh-mega-product-text{ display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }

.dh-mega-eyebrow{
    color: var(--dh-body);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    opacity: .72;
}

/* One line: the row carries the detail, the name does not need to wrap. */
.dh-mega-product strong{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dh-heading);
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.3;
}

.dh-mega-meta{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.dh-mega-price{ color: var(--dh-primary-dark); font-size: .86rem; font-weight: 800; }
.dh-mega-was{ color: var(--dh-body); font-size: .74rem; opacity: .65; }

.dh-mega-off{
    font-style: normal;
    font-size: .66rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(var(--dh-primary-rgb), .14);
    color: var(--dh-primary-dark);
}

.dh-mega-stock{ display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 700; }

.dh-mega-stock::before{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.dh-mega-stock.is-in{ color: #16a34a; }
.dh-mega-stock.is-low{ color: #d97706; }
.dh-mega-stock.is-out{ color: #dc2626; }

.dh-mega-go{
    flex: none;
    color: var(--dh-primary);
    font-size: .72rem;
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity .2s ease, transform .2s ease;
}

.dh-mega-product:hover .dh-mega-go{ opacity: 1; transform: none; }

/* ---------- the promise card that closes the panel ---------- */

.dh-mega-promo{
    position: relative;
    overflow: hidden;
    padding: 17px;
    border-radius: calc(var(--dh-radius-sm) + 5px);
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(var(--dh-primary-rgb), .42), transparent 62%),
        linear-gradient(160deg, rgb(var(--dh-dark-rgb)), rgba(var(--dh-dark-rgb), .88));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.dh-mega-promo-kicker{
    display: block;
    color: rgba(255, 255, 255, .6);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dh-mega-promo > strong{
    display: block;
    margin-top: 7px;
    font-family: var(--dh-font-heading);
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.35;
}

.dh-mega-promo ul{ list-style: none; margin: 13px 0 0; padding: 0; display: grid; gap: 8px; }

.dh-mega-promo li{
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: rgba(255, 255, 255, .84);
    font-size: .78rem;
    line-height: 1.42;
}

.dh-mega-promo li i{
    flex: none;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(var(--dh-primary-rgb), .32);
    color: #fff;
    font-size: .58rem;
}

.dh-mega-promo-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    padding: 10px 14px;
    border-radius: var(--dh-radius-btn);
    background: var(--dh-primary);
    color: var(--dh-on-primary);
    font-family: var(--dh-font-heading);
    font-size: .8rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(var(--dh-primary-rgb), .35);
    transition: filter .2s ease, transform .2s ease;
}

.dh-mega-promo-btn svg{ width: 14px; height: 14px; transition: transform .2s ease; }
.dh-mega-promo-btn:hover{ color: var(--dh-on-primary); filter: brightness(1.08); transform: translateY(-1px); }
.dh-mega-promo-btn:hover svg{ transform: translateX(3px); }

.dh-mega-promo-call{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    opacity: .82;
    transition: opacity .2s ease;
}

.dh-mega-promo-call i{ color: var(--dh-primary); }
.dh-mega-promo-call:hover{ color: #fff; opacity: 1; }

.dh-mega-foot{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--dh-border);
}

.dh-mega-all,
.dh-mega-call{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
}

.dh-mega-all{ color: var(--dh-primary-dark); }
.dh-mega-all svg{ width: 15px; height: 15px; transition: transform .22s ease; }
.dh-mega-all:hover svg{ transform: translateX(4px); }
.dh-mega-call{ color: var(--dh-heading); }
.dh-mega-call i{ color: var(--dh-primary); }

/* ==========================================================================
   BURGER + MOBILE DRAWER
   ========================================================================== */

.dh-burger{
    display: none;
    flex: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    cursor: pointer;
}

.dh-burger span{
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px auto;
    border-radius: 2px;
    background: var(--dh-header-text);
    transition: transform .28s ease, opacity .2s ease;
}

.dh-burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.dh-burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.dh-burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.dh-nav-scrim{
    position: fixed;
    inset: 0;
    z-index: 1025;
    background: rgba(2, 6, 16, .55);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
}

body.dh-nav-open .dh-nav-scrim{ opacity: 1; visibility: visible; }
body.dh-nav-open{ overflow: hidden; }

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

@media (max-width: 1199.98px){
    .dh-nav-phone{ display: none; }
    .dh-nav-link{ padding-inline: 10px; font-size: .82rem; }
}

/* Tablet and down: nothing in the top bar is hidden, the rows wrap and
   centre instead so every number, the office and the offer stay readable. */
@media (max-width: 1199.98px){
    .dh-topbar-inner{ flex-wrap: wrap; justify-content: center; row-gap: 6px; padding-block: 6px; }
    .dh-topbar-group,
    .dh-topbar-group--end{ flex-wrap: wrap; justify-content: center; row-gap: 6px; }
    .dh-topbar-address{ white-space: normal; text-align: center; }
}

@media (max-width: 991.98px){
    .dh-burger{ display: block; }

    .dh-nav{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1035;
        width: min(340px, 88vw);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 84px 18px 28px;
        background: var(--dh-header-bg);
        box-shadow: -18px 0 50px rgba(0, 0, 0, .4);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .34s cubic-bezier(.22, 1, .36, 1), visibility .34s;
    }

    body.dh-nav-open .dh-nav{ transform: none; visibility: visible; }

    /* the desktop capsule unwraps into a plain drawer list */
    .dh-nav-list{
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 0;
        width: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
    }

    .dh-nav-link{
        justify-content: space-between;
        padding: 13px 14px;
        font-size: 1rem;
        border-radius: 12px;
    }

    .dh-nav-link::after{ display: none; }
    .dh-nav-link:hover,
    .dh-nav-item.is-open > .dh-nav-link{ background: rgba(255, 255, 255, .07); }

    /* the caret area becomes a real toggle so the link itself still navigates */
    .dh-nav-item.has-mega > .dh-nav-link{ position: relative; padding-right: 56px; }

    .dh-sub-toggle{
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 52px;
        height: 100%;
        cursor: pointer;
    }

    .dh-caret{ position: absolute; right: 18px; width: 15px; height: 15px; }

    /* mega menu flattens into an accordion */
    .dh-mega,
    .dh-mega--split{
        position: static;
        width: 100%;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .32s cubic-bezier(.22, 1, .36, 1);
    }

    .dh-nav-item.is-open > .dh-mega{ grid-template-rows: 1fr; transform: none; }

    .dh-mega::before{ display: none; }

    .dh-mega-inner{
        min-height: 0;
        padding: 6px 0 10px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        visibility: hidden;
        transition: visibility .32s;
    }

    .dh-nav-item.is-open > .dh-mega .dh-mega-inner{ visibility: visible; }

    .dh-mega-head{ display: none; }
    .dh-mega-grid,
    .dh-mega-cols,
    .dh-mega-products{ grid-template-columns: minmax(0, 1fr); }

    /* stacked in the drawer, the column rules and gutters only get in the way */
    .dh-mega-col{ padding-inline: 0; }
    .dh-mega-col + .dh-mega-col{ border-left: 0; margin-top: 14px; }
    .dh-mega-kicker--sub{ border-top-color: rgba(255, 255, 255, .14); }
    .dh-mega-quick a{ color: rgba(255, 255, 255, .74); }
    .dh-mega-quick a:hover{ background: rgba(255, 255, 255, .06); color: var(--dh-primary); }
    .dh-mega-eyebrow,
    .dh-mega-was{ color: rgba(255, 255, 255, .55); }
    .dh-mega-price{ color: var(--dh-primary); }
    .dh-mega-off{ background: rgba(var(--dh-primary-rgb), .22); color: #fff; }
    .dh-mega-go{ display: none; }

    .dh-mega-facts span,
    .dh-mega-facts a{
        background: rgba(255, 255, 255, .06);
        border-color: rgba(255, 255, 255, .13);
        color: rgba(255, 255, 255, .74);
    }
    .dh-mega-kicker{ padding-left: 12px; color: rgba(255, 255, 255, .5); }

    .dh-mega-card:hover{ background: rgba(255, 255, 255, .06); }
    .dh-mega-text strong,
    .dh-mega-list a,
    .dh-mega-product strong,
    .dh-mega-call{ color: var(--dh-header-text); }
    .dh-mega-text small{ color: rgba(255, 255, 255, .55); }
    .dh-mega-list a:hover{ background: rgba(255, 255, 255, .06); color: var(--dh-primary); }
    .dh-mega-list em{ background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); }
    .dh-mega-product{ flex-direction: row; align-items: center; border-color: rgba(255, 255, 255, .12); }
    .dh-mega-product .dh-mega-thumb{ width: 46px; height: 46px; }
    .dh-mega-foot{ border-top-color: rgba(255, 255, 255, .12); padding-inline: 12px; }

    .dh-nav-cta{
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin: 22px 0 0;
        padding: 20px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .dh-nav-phone{ display: inline-flex; justify-content: center; }
    .dh-book-btn{ justify-content: center; }
}

@media (max-width: 575.98px){
    .dh-topbar-inner{ padding-inline: 14px; gap: 6px 10px; }
    .dh-topbar-message{ padding-inline: 14px; }
    .dh-topbar-group{ width: 100%; gap: 6px 12px; }
    .dh-topbar-link{ white-space: normal; }
    .dh-topbar-address{ align-items: flex-start; }
    .dh-topbar-address i{ margin-top: .3em; }
    .dh-header-inner{ padding-inline: 14px; gap: 12px; }
    .dh-brand{ padding: 4px 9px; border-radius: 13px; }
    .dh-brand img{ height: min(var(--dh-logo-h, 48px), 44px); }
    .dh-header[data-shrink="1"].is-scrolled .dh-brand img{ height: min(var(--dh-logo-h, 48px), 36px); }
}

@media (prefers-reduced-motion: reduce){
    .dh-status.is-open .dh-status-dot{ animation: none; }
    .dh-progress > i{ transition: none; }
}