@charset "utf-8";
/* ============================================================
   PALEO — MOBILE STYLESHEET
   Applies at viewport widths <= 1150px (matches paleo.css, which hides the
   desktop-only .opi-nomobile content at <=1150 — so the mobile layout must
   cover that whole range, otherwise 769–1150px is a broken "dead zone").
   Desktop design (>1150px) untouched; mobile layout lives here.
   Palette used: #65818c, #758b94, #8299a2, #aae9f2, #f2f2f2, #333.
   Fonts used:   paleo, paleothin, Nunito.
   ============================================================ */

/* ============================================================
   SHARED (all widths): product link rows (BOX / COLONNE / PIATTI DOCCIA).
   The original markup uses a margin-top:-60px hack + a 50%-wide label column,
   which made "COLONNE DOCCIA" wrap to two overlapping lines on desktop. Lay the
   row out with flexbox instead: label + arrow on one line, vertically centred,
   the 1px divider on its own full-width line below. Mobile @media tunes sizes.
   ============================================================ */

/* The site sets no body background, so transparent gaps between sections render
   dark in some contexts (e.g. behind the slog2/lostile text strips). Pin white. */
html, body {
    background: #fff !important;
}

div[style*="background-color: #f2f2f2"] {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}
div[style*="background-color: #f2f2f2"] .opi-50 {
    margin: 0 !important;
    padding: 10px 46px !important;
    line-height: 1 !important;
}
div[style*="background-color: #f2f2f2"] .opi-50:first-of-type {
    flex: 1 1 auto !important;
    white-space: nowrap !important;
    text-align: left !important;
}
div[style*="background-color: #f2f2f2"] .opi-50:nth-of-type(2) {
    flex: 0 0 auto !important;
    text-align: right !important;
}
div[style*="background-color: #f2f2f2"] .opi-pad {
    flex: 1 0 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

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

    /* ========== Base ========== */
    html, body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    html body {
        font-size: 15px !important;
        line-height: 22px !important;
        font-family: 'Nunito', sans-serif !important;
    }

    /* Re-enable content hidden by the desktop 1150px breakpoint */
    .opi-nomobile {
        display: block !important;
    }

    /* Neutralise generic .opi-container inline-block which leaves stray gaps */
    .opi-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Safety net: no image may exceed the viewport width (kills right-edge cropping
       of slogan / slog2 / lostile / paleo-logo-bg watermark, etc.). */
    img {
        max-width: 100% !important;
    }

    /* ========== Fixed top bar (logo + burger) ========== */
    /* Stick to the very top — no extra offset */
    div.clearfix[style*="position: fixed"] {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        height: 56px !important;
        box-shadow: 0 1px 4px rgba(0,0,0,.08);
    }
    div.clearfix[style*="position: fixed"] img[src*="logo-paleo"] {
        height: 36px !important;
        margin-top: 0 !important;
        display: block !important;
    }
    /* vertically centre the logo box within the 56px top bar */
    div.clearfix[style*="position: fixed"] > div[style*="float: left"] {
        top: 50% !important;
        bottom: auto !important;
        margin-top: 0 !important;
        transform: translateY(-50%) !important;
    }
    .opi-menu-burger {
        right: 15px !important;
        margin-top: 8px !important;
    }
    .opi-menu-burger img {
        margin-left: 0 !important;
        margin-bottom: 0 !important;
        width: 30px !important;
        height: auto !important;
    }

    /* ========== Hero / main banner ==========
       Works for both the homepage (slideshow + figure + slogan)
       and the subpages (background image + page title + slogan).
       Selectors use inline-style fingerprints instead of nth-child
       so the same rules apply correctly to every page. */

    #opi-header {
        height: 620px !important;
        margin-top: 0 !important;
        padding-top: 56px !important;
        overflow: hidden !important;
        position: relative !important;
        width: 100% !important;
    }

    /* All 40px-wide vertical accent bars — hide on every page */
    #opi-header > div[style*="width:40px"],
    #opi-header > div[style*="width: 40px"] {
        display: none !important;
    }

    /* Homepage-only: 300px-wide green block at bottom-left — hide */
    #opi-header > div[style*="width:300px"],
    #opi-header > div[style*="width: 300px"] {
        display: none !important;
    }

    /* ---------- Subpages ---------- */
    /* Left 140px green bar with rotated page title → flatten into a
       horizontal band pinned to the top of the hero (under fixed bar) */
    #opi-header > div[style*="width:140px"][style*="background:#65818c"],
    #opi-header > div[style*="width: 140px"][style*="background:#65818c"],
    #opi-header > div[style*="width:140px"][style*="background: #65818c"] {
        position: absolute !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 66px !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        background: #65818c !important;
        z-index: 15 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Un-rotate the page-title text inside that bar */
    #opi-header > div[style*="width:140px"][style*="background:#65818c"] > div[style*="rotate(-90deg)"],
    #opi-header > div[style*="width: 140px"][style*="background:#65818c"] > div[style*="rotate(-90deg)"],
    #opi-header > div[style*="width:140px"][style*="background: #65818c"] > div[style*="rotate(-90deg)"] {
        position: static !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 30px !important;
        line-height: 1.15 !important;
        color: #fff !important;
        text-align: center !important;
        font-family: 'paleo' !important;
        letter-spacing: 1px !important;
        text-transform: lowercase !important;
    }
    /* Left 140px bottom accent (below the green bar) — hide */
    #opi-header > div[style*="width:140px"][style*="margin-top: 840px"],
    #opi-header > div[style*="width: 140px"][style*="margin-top: 840px"] {
        display: none !important;
    }

    /* Subpage slogan image (left:220px; margin-top:160px) → centered on the hero image, bigger */
    #opi-header > div[style*="left:220px"][style*="margin-top:160px"],
    #opi-header > div[style*="left: 220px"][style*="margin-top: 160px"] {
        left: 0 !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        bottom: auto !important;
        margin: 0 !important;
        text-align: center !important;
        z-index: 20 !important;
    }
    #opi-header > div[style*="left:220px"][style*="margin-top:160px"] img,
    #opi-header > div[style*="left: 220px"][style*="margin-top: 160px"] img {
        width: 88% !important;
        max-width: 420px !important;
        height: auto !important;
    }

    /* Subpage background-image wrapper (height:800px wrapper) → cover the hero */
    #opi-header > div[style*="height:800px"],
    #opi-header > div[style*="height: 800px"] {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 1 !important;
    }
    #opi-header > div[style*="height:800px"] > div[style*="background:url"],
    #opi-header > div[style*="height: 800px"] > div[style*="background:url"],
    #opi-header > div[style*="height:800px"] > div[style*="background: url"],
    #opi-header > div[style*="height: 800px"] > div[style*="background: url"] {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        background-size: cover !important;
        background-position: center !important;
    }

    /* ---------- Homepage-only ---------- */
    /* Homepage figure image (bottom-left — `margin-top:800px`) */
    #opi-header > div[style*="margin-top:800px"],
    #opi-header > div[style*="margin-top: 800px"] {
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        margin: 0 !important;
        text-align: center !important;
        z-index: 20 !important;
    }
    #opi-header > div[style*="margin-top:800px"] img,
    #opi-header > div[style*="margin-top: 800px"] img {
        height: 280px !important;
        max-width: 100% !important;
    }

    /* Homepage slogan image (right:120px; margin-top:300px) — bigger, lower (100px) */
    #opi-header > div[style*="right:120px"],
    #opi-header > div[style*="right: 120px"] {
        left: 0 !important;
        right: 0 !important;
        top: 100px !important;
        bottom: auto !important;
        margin: 0 !important;
        text-align: center !important;
        z-index: 25 !important;
    }
    #opi-header > div[style*="right:120px"] img,
    #opi-header > div[style*="right: 120px"] img {
        width: 88% !important;
        max-width: 420px !important;
        height: auto !important;
    }

    /* Homepage slideshow fills the hero as background */
    #opi-header .cycle-slideshow {
        height: 620px !important;
        max-width: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1 !important;
    }
    #opi-header .cycle-slideshow opi {
        height: 620px !important;
        background-size: cover !important;
        background-position: center !important;
    }
    #opi-header .cycle-overlay {
        display: none !important;
    }
    #opi-header .cycle-pager {
        bottom: 10px !important;
        right: 15px !important;
    }
    #opi-header .cycle-pager span {
        font-size: 40px !important;
    }

    /* ========== Subpage common body blocks ========== */

    /* Intro text column (width:700px, margin-left:102px) */
    div[style*="width:700px"][style*="margin-left:102px"],
    div[style*="width: 700px"][style*="margin-left: 102px"],
    div[style*="width:700px"][style*="margin-left: 102px"],
    div[style*="width: 700px"][style*="margin-left:102px"] {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 24px 20px !important;
        box-sizing: border-box !important;
        display: block !important;
        line-height: 24px !important;
        font-size: 15px !important;
    }

    /* Intro text column (width:500px, margin-left:266px) — collezioni variant */
    div[style*="width:500px"][style*="margin-left:266px"],
    div[style*="width: 500px"][style*="margin-left: 266px"] {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 24px 20px !important;
        box-sizing: border-box !important;
        display: block !important;
        line-height: 24px !important;
        font-size: 15px !important;
    }

    /* Black page-title box on the right (min-width: 775px) */
    div[style*="min-width: 775px"] {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        float: none !important;
        display: block !important;
        height: auto !important;
        line-height: 1.1 !important;
        margin: 0 !important;
        right: auto !important;
        padding: 18px 20px !important;
        font-size: 38px !important;
        font-family: 'paleo' !important;
        color: #fff !important;
        background: #000 !important;
        text-align: center !important;
        letter-spacing: 1px !important;
        box-sizing: border-box !important;
    }
    div[style*="min-width: 775px"] br {
        display: none !important;
    }

    /* Generic percentage-width column blocks → stack full-width on mobile.
       Covers width / max-width / min-width variants used across pages. */
    div[style*="width: 49%"],
    div[style*="width:49%"],
    div[style*="max-width: 49%"],
    div[style*="max-width:49%"],
    div[style*="min-width: 49%"],
    div[style*="min-width:49%"],
    div[style*="width: 29%"],
    div[style*="width:29%"],
    div[style*="min-width: 29%"],
    div[style*="min-width:29%"],
    div[style*="min-width: 30%"],
    div[style*="min-width:30%"],
    div[style*="max-width: 30%"],
    div[style*="max-width:30%"],
    div[style*="width: 30%"],
    div[style*="width:30%"],
    div[style*="max-width: 50%"],
    div[style*="max-width:50%"],
    div[style*="min-width: 50%"],
    div[style*="min-width:50%"],
    div[style*="width: 60%"],
    div[style*="width:60%"],
    div[style*="min-width: 60%"],
    div[style*="max-width:66%"],
    div[style*="max-width: 66%"],
    div[style*="min-width: 66%"],
    div[style*="min-width:66%"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto 10px !important;
        padding: 10px 20px !important;
        display: block !important;
        box-sizing: border-box !important;
        float: none !important;
        height: auto !important;
        margin-top: 0 !important;
        line-height: 1.5 !important;
    }
    /* Images inside percentage columns stay fully responsive */
    div[style*="width: 49%"] img,
    div[style*="width:49%"] img,
    div[style*="max-width: 49%"] img,
    div[style*="max-width:49%"] img,
    div[style*="max-width:66%"] img,
    div[style*="max-width: 66%"] img,
    div[style*="max-width: 50%"] img,
    div[style*="max-width: 30%"] img,
    div[style*="max-width:30%"] img {
        max-width: 100% !important;
        height: auto !important;
        margin: 8px 0 !important;
    }

    /* Images in these blocks */
    div[style*="max-width: 49%"] img,
    div[style*="max-width:66%"] img,
    div[style*="max-width: 66%"] img,
    div[style*="max-width: 50%"] img,
    div[style*="max-width: 30%"] img {
        max-width: 100% !important;
        height: auto !important;
        margin: 10px 0 !important;
    }

    /* Kill dangerous negative top margins used for overlapping on desktop */
    div[style*="margin-top: -400px"],
    div[style*="margin-top:-400px"],
    div[style*="margin-top: -246px"],
    div[style*="margin-top:-246px"],
    div[style*="margin-top: -100px"],
    div[style*="margin-top:-100px"],
    div[style*="margin-top: -80px"],
    div[style*="margin-top:-80px"],
    div[style*="margin-top: -60px"],
    div[style*="margin-top:-60px"] {
        margin-top: 20px !important;
    }

    /* ========== Azienda / Qualità — hardcoded heights & absurd margins ==========
       Desktop uses fixed-pixel heights (310/566/666) + big margin-left/right
       (102/150/160/266) + margin-top: 450px to place rotated text inside
       black overlap boxes. Reset all of it for mobile. */
    div[style*="height: 310px"],
    div[style*="height:310px"],
    div[style*="height: 566px"],
    div[style*="height:566px"],
    div[style*="height: 666px"],
    div[style*="height:666px"] {
        height: auto !important;
        min-height: 0 !important;
    }

    /* Inner title inside black overlap box (margin-top:450px pushes the
       text way off-screen in the desktop layout) */
    div[style*="margin-top:450px"],
    div[style*="margin-top: 450px"] {
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        height: auto !important;
        float: none !important;
        display: block !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* Desktop-only big side margins — reset so nothing is pushed off-screen */
    div[style*="margin-left: 102px"],
    div[style*="margin-left:102px"],
    div[style*="margin-left: 150px"],
    div[style*="margin-left:150px"],
    div[style*="margin-left: 266px"],
    div[style*="margin-left:266px"],
    div[style*="margin-right: 150px"],
    div[style*="margin-right:150px"],
    div[style*="margin-right: 160px"],
    div[style*="margin-right:160px"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Defloat anything that's floating right/left on desktop */
    div[style*="float: right"],
    div[style*="float:right"],
    div[style*="float: left"],
    div[style*="float:left"] {
        float: none !important;
    }

    /* Hide empty "spacer" columns used only to push floats around on desktop
       (they are 29%/30% wide with height 666px and no content) */
    div[style*="height: 666px"][style*="min-width: 29%"],
    div[style*="height:666px"][style*="min-width: 29%"],
    div[style*="height: 666px"][style*="min-width:29%"],
    div[style*="height:666px"][style*="min-width:29%"] {
        display: none !important;
    }

    /* Grey #f4f4f4 content blocks — tame the padding-top:150px/padding:60px */
    div[style*="background:#f4f4f4"],
    div[style*="background: #f4f4f4"] {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 10px 0 !important;
        padding: 24px 20px !important;
        box-sizing: border-box !important;
    }
    div[style*="padding-top:150px"],
    div[style*="padding-top: 150px"],
    div[style*="padding-top:180px"],
    div[style*="padding-top: 180px"] {
        padding-top: 24px !important;
    }

    /* Images inside any of these recovered blocks should fit the viewport */
    div img[src*="AZIENDA-paleod"],
    div img[src*="az2.jpg"],
    div img[src*="lostile.jpg"],
    div img[src*="slog2.jpg"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 10px 0 !important;
    }

    /* The standalone last image container (az2.jpg with float:right, margin-top:-100px) */
    div[style*="margin-top: -100px"] img,
    div[style*="margin-top:-100px"] img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* The full-width wrapper `width: 60%` grey box on azienda third section */
    div[style*="width: 60%"][style*="background:#f4f4f4"],
    div[style*="width: 60%"][style*="background: #f4f4f4"] {
        width: 100% !important;
        padding: 24px 20px !important;
        padding-top: 24px !important;
    }

    /* Rotated large titles inside black side-boxes on subpages
       (Profilo / Visione / Tailor-made / Certificazioni) — make horizontal */
    div[style*="font-size: 70px"][style*="font-family:paleo"],
    div[style*="font-size:70px"][style*="font-family:paleo"] {
        font-size: 40px !important;
        margin: 0 !important;
        padding: 20px !important;
        text-align: center !important;
        line-height: 1.1 !important;
        height: auto !important;
        float: none !important;
    }

    /* Collection tiles on paleo-collezioni.php (360x360 squares) */
    /* Collection tiles on paleo-collezioni.php — keep them SQUARE with the rotated
       name ON the tile, exactly like desktop (just scaled to the phone width).
       position:relative makes each tile its own positioning context, so the rotated
       names stay inside their own tile instead of piling up on top of each other. */
    div[style*="height: 360px"][style*="width: 360px"],
    div[style*="height:360px"][style*="width:360px"] {
        display: block !important;
        position: relative !important;
        width: 92% !important;
        max-width: 360px !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        margin: 16px auto !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    /* keep the name rotated (desktop look) but force it onto ONE line, smaller,
       so two-word names like "Easy Line" don't wrap and overlap themselves */
    div[style*="height: 360px"][style*="width: 360px"] > div[style*="rotate(-90deg)"],
    div[style*="height:360px"][style*="width:360px"] > div[style*="rotate(-90deg)"] {
        white-space: nowrap !important;
        font-size: 34px !important;
        line-height: 1 !important;
    }
    div[style*="height: 360px"][style*="width: 360px"] > div[style*="rotate(-90deg)"] a,
    div[style*="height:360px"][style*="width:360px"] > div[style*="rotate(-90deg)"] a {
        white-space: nowrap !important;
    }
    /* Make the WHOLE collection tile a real tappable link on mobile (the JS
       onClick is unreliable on touch and some tiles lack it, so only the name
       was clickable). The tile is position:relative above, so this transparent
       overlay anchor fills it. */
    div[style*="height: 360px"][style*="width: 360px"] > a.tilelink,
    div[style*="height:360px"][style*="width:360px"] > a.tilelink {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 5 !important;
        display: block !important;
    }

    /* Download page catalog block (96% width, #efece8 bg) */
    div[style*="background: #efece8"] {
        width: 100% !important;
        padding: 20px 15px !important;
        font-size: 28px !important;
        box-sizing: border-box !important;
    }

    /* Contatti / Azienda grey side content (f4f4f4 bg block with paragraph) */
    div[style*="background:#f4f4f4"],
    div[style*="background: #f4f4f4"] {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 10px 0 !important;
        padding: 24px 20px !important;
        box-sizing: border-box !important;
    }

    /* Separator bars (ECECEC) used as spacers in product grids */
    div[style*="background: #ECECEC"],
    div[style*="background:#ECECEC"] {
        margin: 20px 0 !important;
    }

    /* ========== Interno-collezioni product loop ==========
       The tall grey box (#f8f8f8) with big paleo title + inner two-column
       product detail (product image/info on one side, specs table on the other). */
    div[style*="background: #f8f8f8"][style*="min-height: 750px"],
    div[style*="background:#f8f8f8"][style*="min-height: 750px"] {
        min-height: 0 !important;
        height: auto !important;
        padding: 20px !important;
        font-size: 26px !important;
        line-height: 1.2 !important;
    }
    /* Internal collection pages: force every product-detail panel full-width.
       The alternating "DX" panel uses max-width:56%/min-width:58% + margin-left:83px,
       which the generic percentage-stacking rules missed — it was left as a narrow
       offset column. This makes all panels stack edge-to-edge on mobile. */
    div[style*="background: #f8f8f8"],
    div[style*="background:#f8f8f8"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* Internal pages: product box image always ABOVE its title/spec panel.
       The "DX" layout puts the panel first in the source; lay the product wrapper
       out as a flex column and pull the image (admin/col/...) to the top. */
    .opi-container:has(> div[style*="background: #f8f8f8"]) {
        display: flex !important;
        flex-direction: column !important;
    }
    .opi-container:has(> div[style*="background: #f8f8f8"]) > div:has(img[src*="admin/col/"]) {
        order: -1 !important;
    }

    /* Cristalli (glass-type) swatches → 3 per row on mobile */
    img[src*="boxdoccia/cri"] {
        width: 30% !important;
        max-width: 30% !important;
        height: auto !important;
        margin: 1.5% !important;
        display: inline-block !important;
        vertical-align: top !important;
    }

    /* Piatti doccia FINITURE colour swatches (f1–f4) → ~half size, all 4 in one row.
       Kill the inline-block whitespace on the gallery wrapper so 4 actually fit. */
    div[style*="width: 90%"] {
        font-size: 0 !important;
    }
    img[src*="boxdoccia/piatti/f"] {
        width: 23% !important;
        max-width: 23% !important;
        height: auto !important;
        margin: 0 1% !important;
        display: inline-block !important;
        /* bottom-align so the colour squares line up in a row (the GRIGIO image is
           taller because it carries the "FINITURE DISPONIBILI" title); top-align
           dropped its swatch below the others. Matches the desktop alignment. */
        vertical-align: bottom !important;
    }

    /* Contatti: the hero background is the map (map.jpg); the centred slogan sits on
       top of the map's location pin. Push it down 100px so the pin stays visible. */
    #opi-header:has(div[style*="map.jpg"]) > div[style*="left:220px"][style*="margin-top:160px"],
    #opi-header:has(div[style*="map.jpg"]) > div[style*="left: 220px"][style*="margin-top: 160px"] {
        top: calc(50% + 100px) !important;
    }

    /* Rotated vertical labels inside product-spec tables — horizontal */
    table div[style*="rotate(-90deg)"] {
        position: relative !important;
        transform: none !important;
        margin: 0 0 6px 0 !important;
        font-size: 15px !important;
        line-height: 18px !important;
        color: #65818c !important;
    }

    /* "Richiedi info" button (150px wide black box) */
    div[style*="background:#000"][style*="width:150px"],
    div[style*="background: #000"][style*="width:150px"],
    div[style*="background:#000"][style*="width: 150px"],
    div[style*="background: #000"][style*="width: 150px"] {
        width: 100% !important;
        max-width: 240px !important;
        margin: 10px auto !important;
        text-align: center !important;
        padding: 12px !important;
    }

    /* "info tecniche" / "cristalli" / "profili" labels */
    span[style*="font-family: paleothin"][style*="color:#65818c"],
    span[style*="font-family:paleothin"][style*="color:#65818c"] {
        display: block !important;
        margin: 12px 0 6px !important;
        font-size: 22px !important;
    }

    /* collezioni link strip (`background:#f3f3f3`, font 60px) */
    div[style*="background:#f3f3f3"] a,
    div[style*="background: #f3f3f3"] a {
        font-size: 30px !important;
        padding: 10px 20px !important;
        display: block !important;
    }
    div[style*="background:#f3f3f3"],
    div[style*="background: #f3f3f3"] {
        height: auto !important;
        padding: 8px !important;
    }

    /* ========== Generic column stacking ========== */
    .opi-50 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px 20px !important;
        display: block !important;
        margin: 0 !important;
    }

    /* ========== Logo-bg + Identità intro block ========== */
    .opi-50 img[src*="paleo-logo-bg.png"] {
        margin-top: 10px !important;
        max-width: 85% !important;
        height: auto !important;
    }

    /* Identità card */
    div[style*="min-width: 575px"] {
        min-width: 0 !important;
        /* full-bleed: break out of the .opi-50 side padding so the card reaches both edges */
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 10px 0 10px calc(-50vw + 50%) !important;
        height: auto !important;
        right: auto !important;
        line-height: 24px !important;
        padding: 24px 20px !important;
        background: #8299a2 !important;
    }
    /* Rotated "identita'" label → horizontal */
    div[style*="min-width: 575px"] > div:first-child {
        position: relative !important;
        transform: none !important;
        right: auto !important;
        top: auto !important;
        margin: 0 0 6px 0 !important;
        padding: 0 !important;
        font-family: 'paleo' !important;
        font-size: 34px !important;
        line-height: 38px !important;
        text-align: left !important;
        color: #fff !important;
        letter-spacing: 1px !important;
    }
    div[style*="min-width: 575px"] > .opi-nomobile {
        padding: 0 !important;
        line-height: 23px !important;
        font-size: 15px !important;
        color: #fff !important;
        text-align: left !important;
    }
    /* kill the stack of empty <br>s that create dead space */
    div[style*="min-width: 575px"] > .opi-nomobile br {
        display: none !important;
    }

    /* ========== Product link rows (BOX DOCCIA / COLONNE / PIATTI) ==========
       Use flex so label + arrow sit on a single, well-aligned row,
       and text scales to the viewport width. */
    div[style*="background-color: #f2f2f2"] {
        height: auto !important;
        min-height: 0 !important;
        margin-top: 14px !important;
        padding: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        position: relative !important;
    }
    div[style*="background-color: #f2f2f2"] .opi-50 {
        margin: 0 !important;
        padding: 14px 18px !important;
        font-family: 'paleo' !important;
        letter-spacing: 1px !important;
        line-height: 1.1 !important;
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        display: inline-block !important;
    }
    /* Label column — scales 28–44px */
    div[style*="background-color: #f2f2f2"] .opi-50:first-of-type {
        font-size: clamp(26px, 8vw, 44px) !important;
        text-align: left !important;
    }
    div[style*="background-color: #f2f2f2"] .opi-50:first-of-type a {
        color: #333 !important;
    }
    /* Arrow column */
    div[style*="background-color: #f2f2f2"] .opi-50:nth-of-type(2) {
        font-size: 36px !important;
        text-align: right !important;
        flex: 0 0 50px !important;
        right: auto !important;
    }
    div[style*="background-color: #f2f2f2"] .opi-pad {
        flex: 1 0 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 1px !important;
        background: #333 !important;
    }

    /* ========== Black blocks ("cerca la tua doccia", "scegli il tuo stile") ========== */
    div[style*="background: #000"] {
        height: auto !important;
        padding: 26px 18px !important;
        margin-top: 18px !important;
    }
    div[style*="background: #000"] .opi-50 {
        width: 100% !important;
        font-size: 28px !important;
        line-height: 34px !important;
        padding: 8px 0 !important;
        font-family: 'paleothin' !important;
    }
    div[style*="background: #000"] table {
        width: 100% !important;
    }
    div[style*="background: #000"] table td {
        display: block !important;
        width: 100% !important;
        padding: 6px 0 !important;
    }
    div[style*="background: #000"] table span {
        font-size: 18px !important;
        font-family: 'paleothin' !important;
    }
    div[style*="background: #000"] select,
    div[style*="background: #000"] input[type="submit"] {
        width: 100% !important;
        margin: 6px 0 !important;
        box-sizing: border-box !important;
        font-family: 'Nunito', sans-serif !important;
        background: transparent !important;
        color: #fff !important;
    }
    /* The closed select is white-on-black (good), but the open dropdown list is
       rendered on white by the browser — force dark option text so it's readable. */
    div[style*="background: #000"] select option {
        color: #222 !important;
        background: #fff !important;
    }
    div[style*="background: #000"] input[type="submit"] {
        background: #65818c !important;
        border: 1px solid #65818c !important;
        cursor: pointer !important;
    }
    div[style*="background: #000"] br {
        display: none !important;
    }

    /* ========== Collections carousel (Easy Line / Cube / Style / Elegance) ========== */
    div[data-cycle-carousel-visible="4"] {
        max-width: 100% !important;
    }
    div[data-cycle-carousel-visible="4"] opi {
        width: 240px !important;
        height: 240px !important;
        margin-left: 12px !important;
        background-size: cover !important;
        position: relative !important;
    }
    /* Un-rotate the tile label and pin it horizontally at the bottom-left */
    div[data-cycle-carousel-visible="4"] opi div {
        transform: none !important;
        position: absolute !important;
        margin: 0 !important;
        left: 14px !important;
        bottom: 12px !important;
        top: auto !important;
        font-size: 30px !important;
        line-height: 1 !important;
        color: #fff !important;
        text-shadow: 0 1px 4px rgba(0,0,0,.55) !important;
    }

    /* ========== Tailor-made block ==========
       On mobile: outer wrapper transparent (so carousel is full-width on white),
       the green band sits only behind the title, thin — just the title height. */
    div[style*="background: #758b94"] {
        background: transparent !important;
        padding: 0 !important;
        margin-top: 18px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Green title bar — tight around "Tailor-made" */
    div[style*="background: #758b94"] .opi-pad {
        background: #758b94 !important;
        font-family: 'paleo' !important;
        font-size: 40px !important;
        line-height: 44px !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 12px 20px !important;
        color: #fff !important;
    }
    /* Kill every <br> inside the tailor-made section — removes the gap */
    div[style*="background: #758b94"] br {
        display: none !important;
    }
    /* Remove margins on inner containers (carousel wrapper) */
    div[style*="background: #758b94"] .opi-container {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }
    /* Mobile tailor-made carousel renders 1 slide. The mod (N).jpg files are small
       188px catalog thumbnails, so stretching them to full width is blurry and leaves a
       tall near-white block. Cap the height and use object-fit:contain so each slide
       shows sharp and centered on white instead. */
    div[data-cycle-carousel-visible="1"] {
        max-width: 100% !important;
        width: 100% !important;
        background: #eceeef !important;
        padding: 12px 0 !important;
    }
    /* The mod (N).jpg catalog images are tall, low-contrast light-grey diagrams.
       Contain them in a capped band, centered, and lift the contrast so the line
       drawing + caption text actually read against the page. */
    div[data-cycle-carousel-visible="1"] img {
        width: 100% !important;
        height: 430px !important;
        max-height: 430px !important;
        object-fit: contain !important;
        background: transparent !important;
        display: block !important;
        filter: contrast(1.45) brightness(0.96) !important;
    }
    /* Fallback if server still renders 9 (non-mobile UA at mobile width) */
    div[data-cycle-carousel-visible="9"] {
        max-width: 100% !important;
    }
    div[data-cycle-carousel-visible="9"] img {
        max-height: 220px !important;
        width: auto !important;
    }

    /* ========== "Le possibilità di personalizzazione..." block ==========
       Full width, text gets 20px side padding, image/decori below. */
    div[style*="background: #fff"][style*="width:100%"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 10px !important;
        padding: 0 !important;
    }
    div[style*="background: #fff"][style*="width:100%"] .opi-50 {
        padding: 10px 20px !important;
    }
    div[style*="background: #fff"][style*="width:100%"] .opi-50 > div[data-aos="fade-up"] {
        max-width: 100% !important;
        padding: 0 !important;
        font-size: 15px !important;
        line-height: 26px !important;
    }

    /* ========== Personalization text + Decori carousel ========== */
    .opi-50 img[src*="logo-graf.png"] {
        margin-left: 0 !important;
        max-width: 80% !important;
        height: auto !important;
        display: block;
        margin-top: 18px !important;
    }
    .opi-50 > table {
        width: 100% !important;
        max-width: 100% !important;
    }
    .opi-50 > table tr,
    .opi-50 > table tbody {
        display: block !important;
        width: 100% !important;
    }
    .opi-50 > table td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    /* Rotated "DECORI" → horizontal headline */
    .opi-50 table td div[style*="rotate(-90deg)"] {
        position: relative !important;
        transform: none !important;
        margin: 10px 0 !important;
        font-family: 'paleothin' !important;
        font-size: 40px !important;
        text-align: center !important;
        color: #333 !important;
    }
    .opi-50 table td img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ========== Burger menu overlay (paleo-mainmenu.php) ========== */
    #myNav {
        background: #78909a !important;
    }
    #myNav .opi-33 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 20px !important;
    }
    #myNav .opi-33 > div {
        height: auto !important;
        display: block !important;
        text-align: center !important;
        padding: 12px 0 !important;
    }
    #myNav .opi-33 > div > div[style*="width:400px"],
    #myNav .opi-33 > div > div[style*="width: 400px"] {
        width: 80% !important;
        max-width: 280px !important;
        margin: 10px auto !important;
    }
    #myNav .opi-33 a.opi-menu-main {
        font-size: 26px !important;
        line-height: 48px !important;
    }
    #myNav .opi-33 img[src*="slogan-menu"] {
        /* viewport-relative so it can never overflow the screen, even if the
           menu column is wider than the viewport (the .opi-33 class is 558px). */
        max-width: 84vw !important;
        width: auto !important;
        height: auto !important;
    }

    /* ========== Footer (paleo-footer.php) ========== */
    #richiediinfo {
        padding: 10px 20px 30px !important;
    }
    #richiediinfo span {
        font-size: 28px !important;
        font-family: 'paleothin' !important;
        display: inline-block !important;
        margin-bottom: 26px !important;
    }
    #richiediinfo input[type="text"],
    #richiediinfo input[type="email"],
    #richiediinfo textarea {
        width: 100% !important;
        max-width: 420px !important;
        box-sizing: border-box !important;
        font-family: 'Nunito', sans-serif !important;
        padding: 14px !important;
        margin-bottom: 18px !important;
    }
    #richiediinfo input[name="invia"] {
        font-family: 'paleothin' !important;
        letter-spacing: 1px !important;
        cursor: pointer !important;
        margin-top: 10px !important;
        padding: 14px !important;
    }

    /* "Conteniamo tutti i colori dell'acqua" banner */
    /* "CONTENIAMO…" footer banner — 50px breathing room top & bottom */
    div[style*="background-color: #65818c"] {
        padding: 50px 0 !important;
    }
    div[style*="background-color: #65818c"] .opi-100 {
        font-size: 30px !important;
        line-height: 38px !important;
        margin-top: 0 !important;
        padding: 0 20px !important;
    }
    div[style*="background-color: #65818c"] .opi-100 br + br {
        display: none !important;
    }

    /* Fixed-width footer slideshow → full width */
    .cycle-slideshow[style*="width: 1000px"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    .cycle-slideshow[style*="width: 1000px"] img {
        width: 100% !important;
        height: auto !important;
    }

    /* Footer full-bleed background with menu */
    div[style*="footer-paleo.jpg"] {
        height: auto !important;
        min-height: 420px !important;
        margin-top: -60px !important;
        background-size: cover !important;
        background-position: center !important;
        padding: 60px 0 40px !important;
    }
    div[style*="footer-paleo.jpg"] .opi-container {
        margin-top: 20px !important;
    }
    div[style*="footer-paleo.jpg"] .opi-50 {
        width: 100% !important;
        text-align: center !important;
        padding: 10px 15px !important;
        font-family: 'paleothin' !important;
        line-height: 32px !important;
    }
    /* Footer nav links → one clean line each (only this block has anchors) */
    div[style*="footer-paleo.jpg"] br {
        display: none !important;
    }
    div[style*="footer-paleo.jpg"] .opi-50 a {
        display: block !important;
        line-height: 2.1 !important;
        font-size: 18px !important;
        letter-spacing: 1px !important;
    }

    /* P.IVA legal line */
    .opi-nomobile.opi-container[style*="font-size: 14px"] {
        padding: 22px 15px !important;
        line-height: 22px !important;
        font-size: 13px !important;
        background: #1c1c1c !important;
        color: #fff !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        box-sizing: border-box !important;
    }

    /* ========== Cookie banner ========== */
    .gdpr-cookie {
        max-width: 95% !important;
        left: 2.5% !important;
        right: 2.5% !important;
        box-sizing: border-box !important;
    }

    /* ========== Homepage: stop the "cerca la tua doccia" box swallowing the page ==========
       That box (uniquely height:250px inline) is mis-nested in the source and contains
       every section below it. On desktop its fixed height clips the black background, so
       it looks fine; on mobile the height:auto override makes the black bleed over the
       tailor-made + personalization + footer. Make the wrapper transparent (so it no
       longer paints black over those sections) and keep just the search form on black.
       Scoped to mobile only — desktop is untouched. */
    div[style*="background: #000"][style*="height: 250px"] {
        background: transparent !important;
        padding: 0 !important;
        margin-top: 18px !important;
    }
    div[style*="background: #000"][style*="height: 250px"] > .opi-50 {
        background: #000 !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    /* join the title + form into one black panel (no seam between the two columns) */
    div[style*="background: #000"][style*="height: 250px"] > .opi-50:first-of-type {
        padding-bottom: 0 !important;
    }
    div[style*="background: #000"][style*="height: 250px"] > .opi-50:nth-of-type(2) {
        padding-top: 0 !important;
    }

    /* Product link rows (BOX/COLONNE/PIATTI DOCCIA): the inline height lock was removed
       in the PHP, so the row now hugs its content. Keep the label + arrow on one line
       (COLONNE DOCCIA was wrapping the arrow onto a second line). */
    div[style*="background-color: #f2f2f2"] .opi-50:first-of-type {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        font-size: clamp(20px, 6.4vw, 40px) !important;
    }
    div[style*="background-color: #f2f2f2"] .opi-50:nth-of-type(2) {
        flex: 0 0 44px !important;
    }

    /* Safety net: images inside the stacked percentage content blocks must never
       overflow the viewport. Several blocks use plain `width:NN%` (not max-width),
       which the earlier image rules missed — e.g. paleo-qualita.jpg (CE mark +
       certification table) lives in a width:30% block and was being clipped. */
    div[style*="width: 30%"] img,
    div[style*="width:30%"] img,
    div[style*="width: 60%"] img,
    div[style*="width:60%"] img,
    div[style*="width: 50%"] img,
    div[style*="width:50%"] img,
    div[style*="width: 49%"] img,
    div[style*="width:49%"] img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ================ Narrow phones (<=420px) fine-tune ================ */
@media only screen and (max-width: 420px) {
    #opi-header {
        height: 520px !important;
    }
    #opi-header .cycle-slideshow,
    #opi-header .cycle-slideshow opi {
        height: 520px !important;
    }
    /* Homepage figure image */
    #opi-header > div[style*="margin-top:800px"] img,
    #opi-header > div[style*="margin-top: 800px"] img {
        height: 220px !important;
    }
    /* Homepage slogan image */
    #opi-header > div[style*="right:120px"],
    #opi-header > div[style*="right: 120px"] {
        top: 100px !important;
    }
    /* Subpage slogan image — keep big, just cap a touch on very narrow phones */
    #opi-header > div[style*="left:220px"][style*="margin-top:160px"] img,
    #opi-header > div[style*="left: 220px"][style*="margin-top: 160px"] img {
        width: 86% !important;
        max-width: 320px !important;
    }
    #opi-header > div[style*="right:120px"] img,
    #opi-header > div[style*="right: 120px"] img {
        max-width: 320px !important;
    }
    /* Subpage title band — slightly smaller */
    #opi-header > div[style*="width:140px"][style*="background:#65818c"] > div[style*="rotate(-90deg)"],
    #opi-header > div[style*="width: 140px"][style*="background:#65818c"] > div[style*="rotate(-90deg)"] {
        font-size: 26px !important;
    }
    /* Subpage black title box */
    div[style*="min-width: 775px"] {
        font-size: 32px !important;
        padding: 14px 16px !important;
    }

    div[data-cycle-carousel-visible="4"] opi {
        width: 200px !important;
        height: 200px !important;
    }
    div[data-cycle-carousel-visible="4"] opi div {
        font-size: 26px !important;
        left: 12px !important;
        bottom: 10px !important;
    }
    div[data-cycle-carousel-visible="9"] img {
        max-height: 180px !important;
    }

    /* Collection tiles on narrow phones */
    /* Collection tiles stay square (aspect-ratio handles height); shrink the rotated
       name a little so it fits comfortably on narrow phones. */
    div[style*="height: 360px"][style*="width: 360px"] > div[style*="rotate(-90deg)"],
    div[style*="height:360px"][style*="width:360px"] > div[style*="rotate(-90deg)"] {
        font-size: 30px !important;
        white-space: nowrap !important;
    }
}