/* ============================================================
   DEL MONACO V213
   Mobile hero full-composition + responsive hardening
   Scope: homepage only, activated by JS-added classes.
   ============================================================ */

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

.dm213-mobile-hero-visual {
    display: none;
}

.dm213-home-hero,
.dm213-home-hero * {
    box-sizing: border-box;
}

.dm213-home-hero {
    position: relative !important;
    overflow: hidden !important;
}

/* Reduce below-fold render cost without changing layout or content. */
@supports (content-visibility: auto) {
    .dm213-belowfold {
        content-visibility: auto;
        contain-intrinsic-size: 900px;
    }
}

/* ---------------- TABLET ---------------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .dm213-home-hero {
        min-height: clamp(590px, 74svh, 760px) !important;
    }

    .dm213-hero-copy {
        max-width: min(52vw, 560px) !important;
    }

    .dm213-hero-title {
        font-size: clamp(38px, 4.7vw, 54px) !important;
        line-height: 1.04 !important;
        text-wrap: balance;
    }

    .dm213-hero-text {
        max-width: 52ch !important;
        font-size: clamp(14px, 1.55vw, 17px) !important;
        line-height: 1.65 !important;
    }

    .dm213-hero-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
}

/* ---------------- MOBILE ---------------- */
@media (max-width: 767.98px) {
    body.dm213-ready .dm213-home-hero,
    body.dm213-ready .dm213-home-hero.dm213-hero-bg {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background:
            radial-gradient(circle at 90% 8%, rgba(235, 180, 71, .22), transparent 28%),
            linear-gradient(180deg, #f6eedf 0%, #f3ead9 62%, #f7f0e5 100%) !important;
        background-image:
            radial-gradient(circle at 90% 8%, rgba(235, 180, 71, .22), transparent 28%),
            linear-gradient(180deg, #f6eedf 0%, #f3ead9 62%, #f7f0e5 100%) !important;
        overflow: hidden !important;
    }

    body.dm213-ready .dm213-hero-bg:not(.dm213-home-hero) {
        background-image: none !important;
        background: transparent !important;
    }

    .dm213-mobile-hero-visual {
        display: block !important;
        position: relative !important;
        z-index: 4 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #050805 !important;
        line-height: 0 !important;
        overflow: hidden !important;
    }

    .dm213-mobile-hero-visual::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 18%;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(246,238,223,0), rgba(246,238,223,.16));
    }

    .dm213-mobile-hero-visual img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        object-fit: contain !important;
        object-position: center center !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        filter: none !important;
    }

    body.dm213-ready .dm213-hero-copy {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        z-index: 8 !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: clamp(22px, 5.6vw, 34px) clamp(18px, 5vw, 34px) clamp(26px, 7vw, 42px) !important;
        transform: none !important;
        opacity: 1 !important;
        background:
            linear-gradient(180deg, rgba(246,238,223,.98), rgba(246,238,223,1) 55%, rgba(247,240,229,1)) !important;
        text-align: left !important;
    }

    body.dm213-ready .dm213-hero-eyebrow {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 0 clamp(10px, 2.5vw, 14px) !important;
        font-size: clamp(9px, 2.15vw, 12px) !important;
        line-height: 1.35 !important;
        letter-spacing: .17em !important;
        white-space: normal !important;
    }

    body.dm213-ready .dm213-hero-title {
        width: 100% !important;
        max-width: 15ch !important;
        margin: 0 !important;
        font-size: clamp(29px, 7.3vw, 43px) !important;
        line-height: 1.035 !important;
        letter-spacing: -.035em !important;
        text-wrap: balance;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    body.dm213-ready .dm213-hero-text {
        display: block !important;
        width: 100% !important;
        max-width: 52ch !important;
        margin: clamp(14px, 3.5vw, 20px) 0 0 !important;
        font-size: clamp(12px, 2.65vw, 15px) !important;
        line-height: 1.62 !important;
        text-align: left !important;
    }

    body.dm213-ready .dm213-hero-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 520px !important;
        margin: clamp(18px, 4.5vw, 26px) 0 0 !important;
        align-items: stretch !important;
    }

    body.dm213-ready .dm213-hero-actions > a,
    body.dm213-ready .dm213-hero-actions > button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 13px 15px !important;
        font-size: clamp(9px, 2vw, 11px) !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        border-radius: 14px !important;
    }
}

/* Compact phones */
@media (max-width: 390px) {
    body.dm213-ready .dm213-hero-copy {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body.dm213-ready .dm213-hero-title {
        max-width: 14ch !important;
        font-size: clamp(27px, 7.7vw, 31px) !important;
    }

    body.dm213-ready .dm213-hero-actions {
        grid-template-columns: 1fr !important;
    }

    body.dm213-ready .dm213-hero-actions > a,
    body.dm213-ready .dm213-hero-actions > button {
        min-height: 46px !important;
    }
}

/* Mobile landscape */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
    .dm213-mobile-hero-visual img {
        width: 100% !important;
        height: auto !important;
    }

    body.dm213-ready .dm213-hero-copy {
        padding-top: 18px !important;
        padding-bottom: 22px !important;
    }

    body.dm213-ready .dm213-hero-title {
        max-width: 22ch !important;
        font-size: clamp(28px, 4.8vw, 38px) !important;
    }
}

/* Large desktop / ultrawide: preserve the approved desktop composition,
   only prevent accidental overflow and keep typography fluid. */
@media (min-width: 1024px) {
    .dm213-home-hero {
        overflow: hidden !important;
    }

    .dm213-hero-title {
        text-wrap: balance;
    }

    .dm213-hero-actions {
        flex-wrap: wrap;
    }
}

/* Respect reduced motion to keep the page lighter and more accessible. */
@media (prefers-reduced-motion: reduce) {
    .dm213-home-hero *,
    .dm213-home-hero *::before,
    .dm213-home-hero *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================
   DEL MONACO V214
   MOBILE/TABLET HERO WIDTH CONTAINMENT HOTFIX

   Scope:
   - Homepage hero only
   - <= 1024px only

   Does NOT alter:
   - desktop
   - shared header
   - shared footer
   - product catalogue
   - typography
   - hero artwork
   - buttons
   ========================================================== */

@media only screen and (max-width: 1024px) {

    /*
     * Prevent any old desktop flex/grid rule from keeping
     * the homepage hero at approximately 50% viewport width.
     */
    html body .dm180-home-hero,
    html body .dm189-home-hero,
    html body section.dm180-home-hero,
    html body section.dm189-home-hero {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        flex-basis: 100% !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;

        grid-column: 1 / -1 !important;

        float: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /*
     * Keep generated hero layers inside the REAL hero width.
     * We deliberately do NOT remove the layers, gradients
     * or approved image treatment.
     */
    html body .dm180-home-hero::before,
    html body .dm180-home-hero::after,
    html body .dm189-home-hero::before,
    html body .dm189-home-hero::after {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    /*
     * Stop internal hero wrappers from creating horizontal
     * overflow without changing their approved visual layout.
     */
    html body .dm180-home-hero > *,
    html body .dm189-home-hero > * {
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /*
     * Existing copy sizing and typography remain untouched.
     * Only prevent copy blocks from forcing the viewport wider.
     */
    html body .dm180-home-hero .dm180-hero-copy,
    html body .dm189-home-hero .dm189-description,
    html body .dm189-home-hero .dm189-title {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* Extra protection for real phones / narrow tablets */
@media only screen and (max-width: 900px) {

    html body .dm180-home-hero,
    html body .dm189-home-hero {
        margin-inline: 0 !important;
        max-inline-size: 100% !important;
        inline-size: 100% !important;
    }
}


/* Very narrow phones */
@media only screen and (max-width: 600px) {

    html body .dm180-home-hero,
    html body .dm189-home-hero {
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* DM_V214_MOBILE_HERO_WIDTH_FIX_END */