/* =========================================================================
   custom.css
   Page-specific CSS merged out of inline <style> blocks on:
     - resources/views/countries/default/pages/outdoor-porcelain-tiles.blade.php
     - resources/views/countries/default/pages/wood-look-porcelain-tiles.blade.php
     - resources/views/countries/default/pages/30x60-porcelain-tiles.blade.php
   Each of those pages loads this one file (see @assetUrl('css/custom.css')
   in each page). Most selectors are scoped by section class (outdoor_*,
   wood_*, p3060_*), so rules for one page do not affect the other; this
   file is shared only to avoid keeping near-identical stylesheets in sync
   by hand. Note the .application_area / .custom-section / .custom-icons
   blocks below are NOT page-scoped, so they apply to every page that links
   this file and uses those classes.
   ========================================================================= */


/* -------------------------------------------------------------------------
   Outdoor Porcelain Tiles page
   ------------------------------------------------------------------------- */

    /* Inverts the theme's FAQ colours (theme: white section, grey accordions).
       The matte page (.pro_faq_sec) is excluded: its FAQ sits directly under the
       .bg-grey inquiry section, so inverting it gave two grey bands in a row.
       It keeps the theme default - white section, grey accordion rows. */
    .porcelain_main_page_faq.faq-one:not(.pro_faq_sec) {
        background-color: var(--floens-white2, #f2eeea);
    }

    .porcelain_main_page_faq.faq-one:not(.pro_faq_sec) .faq-accordion .accordion-title,
    .porcelain_main_page_faq.faq-one:not(.pro_faq_sec) .faq-accordion .accordion-content .inner {
        background-color: var(--floens-white, #ffffff);
    }

    .custom-icons .icon-box {
        border: 1px solid #ded8d3;
        padding: 15px;
        display: inline-block;
    }

    .custom-icons .product__item {
        padding: 50px;
    }

    /* Feature CSS */


    .home_collection-custom {
        background-color: #f8f8f8;
    }

    .custom-bg-color {
        background-color: var(--floens-white2, #f2eeea);
    }

    /* Feature CSS */

    /* Intro ("about-two"): the CDN photos aren't portrait, so crop them to the
       theme's frame shapes instead of stretching the layout. */
    .outdoor_intro_sec .about-two__image__inner > img {
        aspect-ratio: 370 / 488;
        object-fit: cover;
    }

    .outdoor_intro_sec .about-two__image__inner__inner img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .outdoor_intro_sec .about-two__text {
        font-size: 16px;
        line-height: 1.75;
    }

    /* Horizontal tagline like the page's other headings, but left-aligned
       in this two-column layout. */
    .outdoor_intro_sec .sec-title--center {
        text-align: left;
    }

    .outdoor_intro_sec .sec-title__title {
        text-wrap: balance;
    }

    /* Bigger photos than the theme's 370px cap so they balance the text.
       Photo + the frame's overhang (-130px) = the 570px image column. */
    @media (min-width: 1200px) {
        .outdoor_intro_sec .about-two__image__inner {
            max-width: 410px; /* 30px theme margin + 410 + 130 = 570 */
        }

        .outdoor_intro_sec .about-two__image__inner__inner {
            max-width: 290px;
            right: -130px;
        }
    }

    @media (min-width: 1400px) {
        .outdoor_intro_sec .about-two__image__inner {
            max-width: 440px; /* no theme margin here: 440 + 130 = 570 */
        }
    }

    /* 992-1199px: the column is too narrow for a wider photo, and the text
       runs taller, so make the photo taller instead. */
    @media (min-width: 992px) and (max-width: 1199.98px) {
        .outdoor_intro_sec .about-two__image__inner > img {
            aspect-ratio: 370 / 560;
        }
    }

    /* Why-choose: centred intro, then the points beside a photo. */

    /* Two balanced lines like the Features heading, instead of one very
       long line across the whole container. */
    .outdoor_why_sec .sec-title__title {
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
        text-wrap: balance;
    }

    /* Gap between the section heading and the intro text (theme default 50px). */
    .outdoor_why_sec .services-three__top {
        margin-bottom: 30px;
    }

    .outdoor_why_sec__intro {
        max-width: 900px;
        margin: 0 auto 55px;
        text-align: center;
    }

    .outdoor_why_sec__intro p {
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 0;
    }

    .outdoor_why_sec__subtitle {
        font-size: 30px;
        line-height: 1.3;
        margin-bottom: 26px;
        padding-bottom: 22px;
        border-bottom: 1px solid var(--floens-border-color, #ded8d3);
        color: var(--floens-black2, #383838);
    }

    .outdoor_why_image img {
        width: 100%;
        display: block;
        aspect-ratio: 5 / 4;
        object-fit: cover;
    }

    .outdoor_why_list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .outdoor_why_list li {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 7px 0;
        font-size: 16px;
        line-height: 1.6;
        color: var(--floens-black2, #383838);
    }

    .outdoor_why_list .icon-tick {
        flex-shrink: 0;
        position: relative;
        top: 3px;
        font-size: 16px;
        color: var(--floens-base, #406fbb);
    }

    /* Even lines when a point is too long for one, instead of a stray word. */
    .outdoor_why_list li span:last-child {
        text-wrap: pretty;
    }

    @media (max-width: 575px) {
        .outdoor_why_sec__subtitle {
            font-size: 24px;
        }
    }


/* -------------------------------------------------------------------------
   Wood Look Porcelain Tiles page
   ------------------------------------------------------------------------- */

    .custom-section {
        --accent: #c62828;
        --ring: #f3e6e6;
        --text: #0f172a;
        --muted: #6b7280;
    }

    .custom-section {
        box-sizing: border-box
    }


    .custom-section.wrap {
        max-width: 1200px;
        margin: 60px auto;
        padding: 0 20px
    }

    .custom-section.wrap {
        max-width: 1200px;
        margin: 60px auto;
        padding: 0 16px
    }

    .custom-section .why-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 28px 20px;
        justify-items: center;
        align-items: start;
    }

    .custom-section .why-item {
        text-align: center;
        max-width: 240px;
    }

    .custom-section .why-icon {
        width: 84px;
        height: 84px;
        border-radius: 50%;
        border: 2px solid #f1e6e6;
        background: #fff;
        display: grid;
        place-items: center;
        margin: 0 auto 12px;
    }

    .custom-section .why-icon img {
        max-width: 56px;
        height: auto;
        display: block;
    }

    .custom-section .why-title {
        font-size: 16px;
        line-height: 1.35;
        margin: 6px 0 0;
    }

    @media (min-width:480px) {
        .custom-section .why-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .custom-section .why-item {
            max-width: 260px;
        }
    }

    @media (min-width:768px) {
        .custom-section .why-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 36px 28px;
        }

        .custom-section .why-icon {
            width: 96px;
            height: 96px;
        }

        .custom-section .why-icon img {
            max-width: 60px;
        }

        .custom-section .why-title {
            font-size: 18px;
        }
    }

    @media (min-width:992px) {
        .custom-section .why-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    @media (min-width:1280px) {
        .custom-section .why-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }

        .custom-section .why-item {
            grid-column: span 1;
            max-width: none;
        }

        .custom-section .why-icon {
            width: 118px;
            height: 118px;
        }

        .custom-section .why-icon img {
            max-width: 64px;
        }

        .custom-section .why-title {
            font-size: 20px;
        }
    }

    .custom-section .why-item {
        text-align: center;
        max-width: 330px;
    }

    .custom-section .why-icon {
        width: 118px;
        height: 118px;
        border-radius: 50%;
        border: 2px solid var(--ring);
        display: grid;
        place-items: center;
        margin: 0 auto 18px;
        background: #fff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
        transition: transform .25s ease, box-shadow .25s ease;
    }

    .custom-section .why-item:hover .why-icon {
        transform: translateY(-4px);
        box-shadow: 0 14px 40px rgba(0, 0, 0, .10);
    }

    .custom-section .why-icon img {
        width: 64px;
        height: 64px;
        object-fit: contain
    }

    .custom-section .why-title {
        margin: 0 0 6px;
        font-size: 20px;
        line-height: 1.25;
        font-weight: 600;
    }

    .custom-section .why-title strong {
        font-weight: 900;
    }

    .custom-section .why-desc {
        margin: 0;
        color: var(--muted);
        font-size: 15.5px;
        line-height: 1.7;
    }

    /* .home_collection-custom {
        background-color: #f8f8f8;
    } */

    /* .custom-bg-color {
        background-color: var(--floens-white2, #f2eeea);
    } */

    .custom-background .related-product {
        background-color: #f8f8f8;
    }

    /* Intro ("about-two"): the CDN photos aren't portrait, so crop them to the
       theme's frame shapes instead of stretching the layout. */
    .wood_intro_sec .about-two__image__inner > img {
        aspect-ratio: 370 / 488;
        object-fit: cover;
    }

    .wood_intro_sec .about-two__image__inner__inner img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .wood_intro_sec .about-two__text {
        font-size: 16px;
        line-height: 1.75;
    }

    /* Horizontal tagline like the page's other headings, but left-aligned
       in this two-column layout. */
    .wood_intro_sec .sec-title--center {
        text-align: left;
    }

    /* Even lines instead of a lone "Tiles" on line two. */
    .wood_intro_sec .sec-title__title {
        text-wrap: balance;
    }

    /* Bigger photos than the theme's 370px cap so they balance the text.
       Photo + the frame's overhang (-130px) = the 570px image column. */
    @media (min-width: 1200px) {
        .wood_intro_sec .about-two__image__inner {
            max-width: 410px; /* 30px theme margin + 410 + 130 = 570 */
        }

        .wood_intro_sec .about-two__image__inner__inner {
            max-width: 290px;
            right: -130px;
        }
    }

    @media (min-width: 1400px) {
        .wood_intro_sec .about-two__image__inner {
            max-width: 440px; /* no theme margin here: 440 + 130 = 570 */
        }
    }

    /* Applications: the theme's services-one heading is white; use the same
       colours as the Features / FAQ headings. */
    .application_area.services-one .sec-title__tagline {
        color: var(--floens-base2, #59595c);
    }

    .application_area.services-one .sec-title__title {
        color: var(--floens-black2, #383838);
    }

    /* The site sets this section's bottom padding to 1px, which left the dots on
       the edge. Use the same spacing as every other .section-space section. */
    .application_area.services-one {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    @media (max-width: 1599px) {
        .application_area.services-one {
            padding-top: 80px;
            padding-bottom: 80px;
        }
    }

    @media (max-width: 767px) {
        .application_area.services-one {
            padding-top: 60px;
            padding-bottom: 60px;
        }
    }

    /* Prev / next buttons on both sides of the cards (the theme hides the
       arrows for this carousel on wider screens, so force them on). */
    .application_area.services-one .services-one__carousel {
        position: relative;
    }

    .application_area.services-one .services-one__carousel.owl-carousel .owl-nav {
        display: flex !important;
        justify-content: space-between;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin: 0;
        gap: 0;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .application_area.services-one .services-one__carousel.owl-carousel .owl-nav button {
        pointer-events: auto;
    }

    .application_area.services-one .services-one__carousel.owl-carousel .owl-nav button span {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 16px;
        background-color: var(--floens-white, #ffffff);
        color: var(--floens-black2, #383838);
        border: 1px solid var(--floens-border-color, #ded8d3);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        transition: all 300ms ease;
    }

    .application_area.services-one .services-one__carousel.owl-carousel .owl-nav button span:hover {
        background-color: var(--floens-base, #406fbb);
        border-color: var(--floens-base, #406fbb);
        color: var(--floens-white, #ffffff);
    }

    /* Outside the cards where there is room, just inside their edges otherwise. */
    .application_area.services-one .services-one__carousel.owl-carousel .owl-nav .owl-prev {
        margin-left: 10px;
    }

    .application_area.services-one .services-one__carousel.owl-carousel .owl-nav .owl-next {
        margin-right: 10px;
    }

    @media (min-width: 1400px) {
        .application_area.services-one .services-one__carousel.owl-carousel .owl-nav .owl-prev {
            margin-left: -80px;
        }

        .application_area.services-one .services-one__carousel.owl-carousel .owl-nav .owl-next {
            margin-right: -80px;
        }
    }

    /* Application cards: white card, full-width photo, padded text,
       equal heights, lift + blue accent on hover. */
    /* Room inside the carousel's clipping box for the hover lift and shadow,
       pulled back with negative margins so section spacing is unchanged. */
    .application_area.services-one .owl-stage-outer {
        padding: 10px 0 30px;
        margin: -10px 0 -30px;
    }

    .application_area.services-one .owl-stage,
    .application_area.services-one .owl-item,
    .application_area.services-one .owl-item .item {
        display: flex;
    }

    .application_area.services-one .owl-item .item {
        width: 100%;
    }

    .application_area.services-one .service-card {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
        background-color: var(--floens-white, #ffffff);
        border: 1px solid var(--floens-border-color, #ded8d3);
        transition: transform 400ms ease, box-shadow 400ms ease, border-color 400ms ease;
    }

    .application_area.services-one .service-card:hover {
        transform: translateY(-6px);
        border-color: var(--floens-base, #406fbb);
        box-shadow: 0 18px 35px rgba(0, 0, 0, 0.08);
    }

    .application_area.services-one .service-card__bg {
        display: none;
    }

    .application_area.services-one .service-card__top {
        display: block;
        margin: 0;
        overflow: hidden;
    }

    .application_area.services-one .service-card__image img {
        aspect-ratio: 401 / 303;
        object-fit: cover;
        transition: transform 600ms ease;
    }

    .application_area.services-one .service-card:hover .service-card__image img {
        transform: scale(1.05);
    }

    .application_area.services-one .service-card__content {
        flex-grow: 1;
        padding: 26px 28px 30px;
    }

    .application_area.services-one .service-card__content::before {
        content: "";
        display: block;
        width: 40px;
        height: 3px;
        margin-bottom: 18px;
        background-color: var(--floens-base, #406fbb);
        transition: width 400ms ease;
    }

    .application_area.services-one .service-card:hover .service-card__content::before {
        width: 80px;
    }

    .application_area.services-one .service-card__title {
        margin-bottom: 12px;
    }

    .application_area.services-one .service-card__text {
        font-size: 16px;
        line-height: 1.7;
    }

    /* Why-choose section: no images, so a centred intro and a grid of benefit
       cards carry the layout. */
    /* Gap between the section heading and the intro text (theme default 50px). */
    .wood_why_sec .services-three__top {
        margin-bottom: 30px;
    }

    .wood_why_sec__intro {
        max-width: 900px;
        margin: 0 auto 55px;
        text-align: center;
    }

    .wood_why_sec__intro p {
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 18px;
    }

    .wood_why_sec__intro p:last-child {
        margin-bottom: 0;
    }

    .wood_why_sec__subtitle {
        font-size: 30px;
        line-height: 1.3;
        margin-bottom: 26px;
        padding-bottom: 22px;
        border-bottom: 1px solid var(--floens-border-color, #ded8d3);
        color: var(--floens-black2, #383838);
    }

    .wood_why_image img {
        width: 100%;
        display: block;
        aspect-ratio: 5 / 4;
        object-fit: cover;
    }

    .wood_why_list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .wood_why_list li {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 7px 0;
        font-size: 16px;
        line-height: 1.6;
        color: var(--floens-black2, #383838);
    }

    .wood_why_list .icon-tick {
        flex-shrink: 0;
        position: relative;
        top: 3px;
        font-size: 16px;
        color: var(--floens-base, #406fbb);
    }

    /* Even lines when a point is too long for one, instead of a stray word. */
    .wood_why_list li span:last-child {
        text-wrap: pretty;
    }

    @media (max-width: 575px) {
        .wood_why_sec__subtitle {
            font-size: 24px;
        }
    }

    /* 992-1199px: the column is too narrow for a wider photo, and the text
       runs taller, so make the photo taller instead. */
    @media (min-width: 992px) and (max-width: 1199.98px) {
        .wood_intro_sec .about-two__image__inner > img {
            aspect-ratio: 370 / 560;
        }
    }


/* -------------------------------------------------------------------------
   Porcelain Tiles 30x60 CM page
   Same intro treatment as the wood-look / outdoor pages; scoped to
   .p3060_intro_sec so it only affects this page.
   ------------------------------------------------------------------------- */

    /* Intro ("about-two"): the CDN photos aren't portrait, so crop them to the
       theme's frame shapes instead of stretching the layout. */
    .p3060_intro_sec .about-two__image__inner > img {
        aspect-ratio: 370 / 488;
        object-fit: cover;
    }

    /* This page's frame photo is declared 290x343, so crop to that ratio. */
    .p3060_intro_sec .about-two__image__inner__inner img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .p3060_intro_sec .about-two__text {
        font-size: 16px;
        line-height: 1.75;
    }

    /* Horizontal tagline like the page's other headings, but left-aligned
       in this two-column layout. */
    .p3060_intro_sec .sec-title--center {
        text-align: left;
    }

    .p3060_intro_sec .sec-title__title {
        text-wrap: balance;
    }

    /* Bigger photos than the theme's 370px cap so they balance the text.
       Photo + the frame's overhang (-130px) = the 570px image column. */
    @media (min-width: 1200px) {
        .p3060_intro_sec .about-two__image__inner {
            max-width: 410px; /* 30px theme margin + 410 + 130 = 570 */
        }

        .p3060_intro_sec .about-two__image__inner__inner {
            max-width: 290px;
            right: -130px;
        }
    }

    @media (min-width: 1400px) {
        .p3060_intro_sec .about-two__image__inner {
            max-width: 440px; /* no theme margin here: 440 + 130 = 570 */
        }
    }

    /* 992-1199px: the column is too narrow for a wider photo, and the text
       runs taller, so make the photo taller instead. */
    @media (min-width: 992px) and (max-width: 1199.98px) {
        .p3060_intro_sec .about-two__image__inner > img {
            aspect-ratio: 370 / 560;
        }
    }

    /* Why-choose: centred intro, then the points beside a photo. */

    /* Gap between the section heading and the intro text (theme default 50px). */
    .p3060_why_sec .services-three__top {
        margin-bottom: 30px;
    }

    .p3060_why_sec__intro {
        max-width: 900px;
        margin: 0 auto 55px;
        text-align: center;
    }

    .p3060_why_sec__intro p {
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 0;
    }

    .p3060_why_sec__subtitle {
        font-size: 30px;
        line-height: 1.3;
        margin-bottom: 26px;
        padding-bottom: 22px;
        border-bottom: 1px solid var(--floens-border-color, #ded8d3);
        color: var(--floens-black2, #383838);
    }

    .p3060_why_image img {
        width: 100%;
        display: block;
        aspect-ratio: 5 / 4;
        object-fit: cover;
    }

    .p3060_why_list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .p3060_why_list li {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 7px 0;
        font-size: 16px;
        line-height: 1.6;
        color: var(--floens-black2, #383838);
    }

    .p3060_why_list .icon-tick {
        flex-shrink: 0;
        position: relative;
        top: 3px;
        font-size: 16px;
        color: var(--floens-base, #406fbb);
    }

    /* Even lines when a point is too long for one, instead of a stray word. */
    .p3060_why_list li span:last-child {
        text-wrap: pretty;
    }

    @media (max-width: 575px) {
        .p3060_why_sec__subtitle {
            font-size: 24px;
        }
    }


/* -------------------------------------------------------------------------
   Porcelain Tiles 60x60 CM page
   Same intro + why-choose treatment as the other three pages; scoped to
   .p6060_* so it only affects this page.
   ------------------------------------------------------------------------- */

    /* Intro ("about-two"): the CDN photos aren't portrait, so crop them to the
       theme's frame shapes instead of stretching the layout. */
    .p6060_intro_sec .about-two__image__inner > img {
        aspect-ratio: 370 / 488;
        object-fit: cover;
    }

    .p6060_intro_sec .about-two__image__inner__inner img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .p6060_intro_sec .about-two__text {
        font-size: 16px;
        line-height: 1.75;
    }

    /* Horizontal tagline like the page's other headings, but left-aligned
       in this two-column layout. */
    .p6060_intro_sec .sec-title--center {
        text-align: left;
    }

    .p6060_intro_sec .sec-title__title {
        text-wrap: balance;
    }

    /* Bigger photos than the theme's 370px cap so they balance the text.
       Photo + the frame's overhang (-130px) = the 570px image column. */
    @media (min-width: 1200px) {
        .p6060_intro_sec .about-two__image__inner {
            max-width: 410px; /* 30px theme margin + 410 + 130 = 570 */
        }

        .p6060_intro_sec .about-two__image__inner__inner {
            max-width: 290px;
            right: -130px;
        }
    }

    @media (min-width: 1400px) {
        .p6060_intro_sec .about-two__image__inner {
            max-width: 440px; /* no theme margin here: 440 + 130 = 570 */
        }
    }

    /* 992-1199px: the column is too narrow for a wider photo, and the text
       runs taller, so make the photo taller instead. */
    @media (min-width: 992px) and (max-width: 1199.98px) {
        .p6060_intro_sec .about-two__image__inner > img {
            aspect-ratio: 370 / 560;
        }
    }

    /* Why-choose: centred intro, then the points beside a photo. */

    /* Gap between the section heading and the intro text (theme default 50px). */
    .p6060_why_sec .services-three__top {
        margin-bottom: 30px;
    }

    .p6060_why_sec__intro {
        max-width: 900px;
        margin: 0 auto 55px;
        text-align: center;
    }

    .p6060_why_sec__intro p {
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 0;
    }

    .p6060_why_sec__subtitle {
        font-size: 30px;
        line-height: 1.3;
        margin-bottom: 26px;
        padding-bottom: 22px;
        border-bottom: 1px solid var(--floens-border-color, #ded8d3);
        color: var(--floens-black2, #383838);
    }

    .p6060_why_image img {
        width: 100%;
        display: block;
        aspect-ratio: 5 / 4;
        object-fit: cover;
    }

    .p6060_why_list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .p6060_why_list li {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 7px 0;
        font-size: 16px;
        line-height: 1.6;
        color: var(--floens-black2, #383838);
    }

    .p6060_why_list .icon-tick {
        flex-shrink: 0;
        position: relative;
        top: 3px;
        font-size: 16px;
        color: var(--floens-base, #406fbb);
    }

    /* Even lines when a point is too long for one, instead of a stray word. */
    .p6060_why_list li span:last-child {
        text-wrap: pretty;
    }

    @media (max-width: 575px) {
        .p6060_why_sec__subtitle {
            font-size: 24px;
        }
    }


/* -------------------------------------------------------------------------
   Porcelain Tiles 60x120 CM (24x48 inch) page
   Same intro + why-choose treatment as the other pages; scoped to
   .p60120_* so it only affects this page.
   ------------------------------------------------------------------------- */

    /* Intro ("about-two"): the CDN photos aren't portrait, so crop them to the
       theme's frame shapes instead of stretching the layout. */
    .p60120_intro_sec .about-two__image__inner > img {
        aspect-ratio: 370 / 488;
        object-fit: cover;
    }

    .p60120_intro_sec .about-two__image__inner__inner img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .p60120_intro_sec .about-two__text {
        font-size: 16px;
        line-height: 1.75;
    }

    /* Horizontal tagline like the page's other headings, but left-aligned
       in this two-column layout. */
    .p60120_intro_sec .sec-title--center {
        text-align: left;
    }

    .p60120_intro_sec .sec-title__title {
        text-wrap: balance;
    }

    /* Bigger photos than the theme's 370px cap so they balance the text.
       Photo + the frame's overhang (-130px) = the 570px image column. */
    @media (min-width: 1200px) {
        .p60120_intro_sec .about-two__image__inner {
            max-width: 410px; /* 30px theme margin + 410 + 130 = 570 */
        }

        .p60120_intro_sec .about-two__image__inner__inner {
            max-width: 290px;
            right: -130px;
        }
    }

    @media (min-width: 1400px) {
        .p60120_intro_sec .about-two__image__inner {
            max-width: 440px; /* no theme margin here: 440 + 130 = 570 */
        }
    }

    /* 992-1199px: the column is too narrow for a wider photo, and the text
       runs taller, so make the photo taller instead. */
    @media (min-width: 992px) and (max-width: 1199.98px) {
        .p60120_intro_sec .about-two__image__inner > img {
            aspect-ratio: 370 / 560;
        }
    }

    /* Why-choose: centred intro, then the points beside a photo. */

    /* Gap between the section heading and the intro text (theme default 50px). */
    .p60120_why_sec .services-three__top {
        margin-bottom: 30px;
    }

    .p60120_why_sec__intro {
        max-width: 900px;
        margin: 0 auto 55px;
        text-align: center;
    }

    .p60120_why_sec__intro p {
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 0;
    }

    .p60120_why_sec__subtitle {
        font-size: 30px;
        line-height: 1.3;
        margin-bottom: 26px;
        padding-bottom: 22px;
        border-bottom: 1px solid var(--floens-border-color, #ded8d3);
        color: var(--floens-black2, #383838);
    }

    .p60120_why_image img {
        width: 100%;
        display: block;
        aspect-ratio: 5 / 4;
        object-fit: cover;
    }

    .p60120_why_list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .p60120_why_list li {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 7px 0;
        font-size: 16px;
        line-height: 1.6;
        color: var(--floens-black2, #383838);
    }

    .p60120_why_list .icon-tick {
        flex-shrink: 0;
        position: relative;
        top: 3px;
        font-size: 16px;
        color: var(--floens-base, #406fbb);
    }

    /* Even lines when a point is too long for one, instead of a stray word. */
    .p60120_why_list li span:last-child {
        text-wrap: pretty;
    }

    @media (max-width: 575px) {
        .p60120_why_sec__subtitle {
            font-size: 24px;
        }
    }


/* -------------------------------------------------------------------------
   Finish pages: matte-porcelain-tiles and polished-porcelain-tiles
   (the living room page reuses it too, so the rules list all three prefixes)
   Only the "Why Choose Matte Porcelain Tiles" section uses this treatment;
   scoped to .matte_why_* so nothing else on the page is affected.
   ------------------------------------------------------------------------- */

    /* Gap between the section heading and the intro text (theme default 50px). */
    .matte_why_sec .services-three__top,
    .polished_why_sec .services-three__top,
    .plr_why_sec .services-three__top {
        margin-bottom: 30px;
    }

    .matte_why_sec__intro,
    .polished_why_sec__intro,
    .plr_why_sec__intro {
        max-width: 900px;
        margin: 0 auto 55px;
        text-align: center;
    }

    .matte_why_sec__intro p,
    .polished_why_sec__intro p,
    .plr_why_sec__intro p {
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 0;
    }

    /* The polished page closes this section with a line after the points; the
       matte page has no equivalent, so this rule is polished-only. */
    .polished_why_sec__outro {
        max-width: 900px;
        margin: 45px auto 0;
        text-align: center;
    }

    .polished_why_sec__outro p {
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 0;
    }

    /* This page introduces its list with a bold lead-in line rather than a
       second heading, so it is styled like the other pages' subtitle but kept
       as a paragraph - no heading level is invented. */
    .matte_why_sec__lead,
    .polished_why_sec__lead,
    .plr_why_sec__lead {
        font-size: 22px;
        line-height: 1.3;
        margin-bottom: 26px;
        padding-bottom: 22px;
        border-bottom: 1px solid var(--floens-border-color, #ded8d3);
        color: var(--floens-black2, #383838);
    }

    .matte_why_sec__lead strong,
    .polished_why_sec__lead strong,
    .plr_why_sec__lead strong {
        font-weight: 600;
    }

    .matte_why_image img,
    .polished_why_image img,
    .plr_why_image img {
        width: 100%;
        display: block;
        aspect-ratio: 5 / 4;
        object-fit: cover;
    }

    .matte_why_list,
    .polished_why_list,
    .plr_why_list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .matte_why_list li,
    .polished_why_list li,
    .plr_why_list li {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 7px 0;
        font-size: 16px;
        line-height: 1.6;
        color: var(--floens-black2, #383838);
    }

    .matte_why_list .icon-tick,
    .polished_why_list .icon-tick,
    .plr_why_list .icon-tick {
        flex-shrink: 0;
        position: relative;
        top: 3px;
        font-size: 16px;
        color: var(--floens-base, #406fbb);
    }

    /* Even lines when a point is too long for one, instead of a stray word. */
    .matte_why_list li span:last-child,
    .polished_why_list li span:last-child,
    .plr_why_list li span:last-child {
        text-wrap: pretty;
    }

    @media (max-width: 575px) {
    .matte_why_sec__lead,
        .polished_why_sec__lead,
        .plr_why_sec__lead {
            font-size: 20px;
        }
    }


/* -------------------------------------------------------------------------
   Matte page - "Applications of Matte Porcelain Tiles"
   Four fixed cards in a grid (the carousel added dots and a clipped card for
   only four items). Scoped to .matte_apps_*.
   ------------------------------------------------------------------------- */

    /* The theme's services-one__top draws a divider under the heading and
       leaves the tagline vertical; this section uses the centred heading the
       rest of the site's redesigned sections use. */
    .matte_apps_sec .services-three__top,
    .polished_apps_sec .services-three__top,
    .plr_size_sec .services-three__top,
    .plr_finish_sec .services-three__top,
    .plr_color_sec .services-three__top,
    .plr_howto_sec .services-three__top,
    .plr_explore_sec .services-three__top,
    .sl_state_sec .services-three__top {
        margin-bottom: 26px;
    }

    .matte_apps_sec__intro,
    .polished_apps_sec__intro,
    .plr_size_sec__intro,
    .plr_finish_sec__intro,
    .plr_color_sec__intro,
    .plr_howto_sec__intro,
    .plr_explore_sec__intro {
        max-width: 820px;
        margin: 0 auto 50px;
        text-align: center;
    }

    .matte_apps_sec__intro p,
    .polished_apps_sec__intro p,
    .plr_size_sec__intro p,
    .plr_finish_sec__intro p,
    .plr_color_sec__intro p,
    .plr_howto_sec__intro p,
    .plr_explore_sec__intro p {
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 0;
    }

    /* Slider: owl sizes each slide to its own content, so stretch the stage
       and the items to keep every card the same height. */
    .matte_apps_carousel,
    .polished_apps_carousel,
    .plr_size_carousel,
    .plr_explore_carousel {
        position: relative;
    }

    /* owl clips the stage with overflow:hidden to hide the next slide. That
       box also cut off the hover lift and shadow at the top/bottom, and the
       first card's 1px left border, which lands a fraction of a pixel outside
       the box. Bleed the clipping box out on every side and pull it back with
       matching negative margins, so the cards stay exactly where they were and
       section spacing is unchanged. The horizontal bleed (4px) is far smaller
       than the 30px gap between cards, so no neighbouring card shows. Note the
       padding alone would not work: with box-sizing:border-box it shrinks the
       box inward - the negative margin is what widens it. */
    .matte_apps_carousel .owl-stage-outer,
    .polished_apps_carousel .owl-stage-outer,
    .plr_size_carousel .owl-stage-outer,
    .plr_explore_carousel .owl-stage-outer {
        padding: 12px 4px 36px;
        margin: -12px -4px -36px;
    }

    .matte_apps_carousel .owl-stage,
    .polished_apps_carousel .owl-stage,
    .plr_size_carousel .owl-stage,
    .plr_explore_carousel .owl-stage {
        display: flex;
    }

    .matte_apps_carousel .owl-item,
    .polished_apps_carousel .owl-item,
    .plr_size_carousel .owl-item,
    .plr_explore_carousel .owl-item {
        display: flex;
        height: auto;
    }

    /* owl wraps each slide in .item; it has to stretch too or the card inside
       keeps its own content height and the row looks ragged. */
    .matte_apps_carousel .owl-item .item,
    .polished_apps_carousel .owl-item .item,
    .plr_size_carousel .owl-item .item,
    .plr_explore_carousel .owl-item .item {
        display: flex;
        width: 100%;
    }

    /* Prev / next buttons on both sides of the cards (same treatment as the
       Applications carousels on the size pages). */
    .matte_apps_carousel.owl-carousel .owl-nav,
    .polished_apps_carousel.owl-carousel .owl-nav,
    .plr_size_carousel.owl-carousel .owl-nav,
    .plr_explore_carousel.owl-carousel .owl-nav {
        display: flex !important;
        justify-content: space-between;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin: 0;
        gap: 0;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .matte_apps_carousel.owl-carousel .owl-nav button,
    .polished_apps_carousel.owl-carousel .owl-nav button,
    .plr_size_carousel.owl-carousel .owl-nav button,
    .plr_explore_carousel.owl-carousel .owl-nav button {
        pointer-events: auto;
    }

    .matte_apps_carousel.owl-carousel .owl-nav button span,
    .polished_apps_carousel.owl-carousel .owl-nav button span,
    .plr_size_carousel.owl-carousel .owl-nav button span,
    .plr_explore_carousel.owl-carousel .owl-nav button span {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 16px;
        background-color: var(--floens-white, #ffffff);
        color: var(--floens-black2, #383838);
        border: 1px solid var(--floens-border-color, #ded8d3);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        transition: all 300ms ease;
    }

    .matte_apps_carousel.owl-carousel .owl-nav button span:hover,
    .polished_apps_carousel.owl-carousel .owl-nav button span:hover,
    .plr_size_carousel.owl-carousel .owl-nav button span:hover,
    .plr_explore_carousel.owl-carousel .owl-nav button span:hover {
        background-color: var(--floens-base, #406fbb);
        border-color: var(--floens-base, #406fbb);
        color: var(--floens-white, #ffffff);
    }

    /* Just inside the cards by default, outside them where there is room. */
    .matte_apps_carousel.owl-carousel .owl-nav .owl-prev,
    .polished_apps_carousel.owl-carousel .owl-nav .owl-prev,
    .plr_size_carousel.owl-carousel .owl-nav .owl-prev,
    .plr_explore_carousel.owl-carousel .owl-nav .owl-prev {
        margin-left: 10px;
    }

    .matte_apps_carousel.owl-carousel .owl-nav .owl-next,
    .polished_apps_carousel.owl-carousel .owl-nav .owl-next,
    .plr_size_carousel.owl-carousel .owl-nav .owl-next,
    .plr_explore_carousel.owl-carousel .owl-nav .owl-next {
        margin-right: 10px;
    }

    @media (min-width: 1400px) {
    .matte_apps_carousel.owl-carousel .owl-nav .owl-prev,
        .polished_apps_carousel.owl-carousel .owl-nav .owl-prev,
        .plr_size_carousel.owl-carousel .owl-nav .owl-prev,
        .plr_explore_carousel.owl-carousel .owl-nav .owl-prev {
            margin-left: -80px;
        }

    .matte_apps_carousel.owl-carousel .owl-nav .owl-next,
        .polished_apps_carousel.owl-carousel .owl-nav .owl-next,
        .plr_size_carousel.owl-carousel .owl-nav .owl-next,
        .plr_explore_carousel.owl-carousel .owl-nav .owl-next {
            margin-right: -80px;
        }
    }

    .matte_apps_card,
    .polished_apps_card,
    .plr_size_card,
    .plr_color_card {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 38px 30px 34px;
        background-color: var(--floens-white, #ffffff);
        border: 1px solid var(--floens-border-color, #ded8d3);
        transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
    }

    .matte_apps_card:hover,
    .polished_apps_card:hover,
    .plr_size_card:hover,
    .plr_color_card:hover {
        transform: translateY(-6px);
        border-color: var(--floens-base, #406fbb);
        box-shadow: 0 16px 34px rgba(0, 0, 0, .08);
    }

    /* Icon sits in a tinted round badge so the thin line art reads as a
       deliberate element instead of floating in empty space. */
    .matte_apps_card__icon,
    .polished_apps_card__icon {
        width: 84px;
        height: 84px;
        margin-bottom: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: var(--floens-white2, #f2eeea);
        transition: background-color 300ms ease;
    }

    .matte_apps_card:hover .matte_apps_card__icon,
    .polished_apps_card:hover .polished_apps_card__icon {
        background-color: var(--floens-base, #406fbb);
    }

    .matte_apps_card__icon img,
    .polished_apps_card__icon img {
        width: 46px;
        height: 46px;
        object-fit: contain;
        transition: filter 300ms ease;
    }

    /* The icons are dark line art on transparent, so invert them to white
       when the badge turns blue on hover. */
    .matte_apps_card:hover .matte_apps_card__icon img,
    .polished_apps_card:hover .polished_apps_card__icon img {
        filter: brightness(0) invert(1);
    }

    .matte_apps_card__title,
    .polished_apps_card__title,
    .plr_size_card__title,
    .plr_color_card__title {
        font-size: 22px;
        line-height: 1.3;
        margin: 0 0 14px;
        color: var(--floens-black2, #383838);
        text-wrap: balance;
    }

    .matte_apps_card__text,
    .polished_apps_card__text,
    .plr_size_card__text,
    .plr_color_card__text {
        font-size: 16px;
        line-height: 1.7;
        margin: 0;
        text-wrap: pretty;
    }

    @media (max-width: 575px) {
    .matte_apps_card,
        .polished_apps_card,
        .plr_size_card {
            padding: 30px 24px 26px;
        }

    .matte_apps_card__title,
        .polished_apps_card__title,
        .plr_size_card__title {
            font-size: 20px;
        }
    }

    /* Living room page - the Sizes cards use the same card as the Applications
       cards above, but lead with a photo of the size instead of a line-art icon,
       so the padding moves to the text and the image spans the card. */
    .plr_size_card {
        padding: 0 0 30px;
        overflow: hidden;
    }

    .plr_size_card__image {
        margin-bottom: 26px;
        overflow: hidden;
    }

    .plr_size_card__image img {
        width: 100%;
        display: block;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        transition: transform 500ms ease;
    }

    .plr_size_card:hover .plr_size_card__image img {
        transform: scale(1.06);
    }

    .plr_size_card__title,
    .plr_size_card__text {
        padding: 0 30px;
    }

    @media (max-width: 575px) {
        .plr_size_card {
            padding: 0 0 26px;
        }

        .plr_size_card__title,
        .plr_size_card__text {
            padding: 0 24px;
        }
    }

    /* Living room page - "Available Finishes". This layout is the matte page's
       Quality Standards block, where each item's label is a bold <span>. The
       document has these as headings, so they are h3 here; this keeps the
       heading level without letting the theme's h3 size (27px Tenor Sans)
       break the layout. */
    .plr_finish_sec .plr_finish_title {
        font-family: var(--floens-font, "DM Sans"), sans-serif;
        font-size: 18px;
        font-weight: 700;
        line-height: 31.5px;
        margin: 0 0 5px;
        color: inherit;
    }

    /* Living room page - "Popular Colours". Text only, by request: the same card as
       the Applications / Sizes cards but with no icon and no photo, in a plain grid
       rather than a carousel, so it does not read as a repeat of the Sizes row. */
    .plr_color_grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 30px;
    }

    @media (max-width: 991px) {
        .plr_color_grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 575px) {
        .plr_color_grid {
            grid-template-columns: 1fr;
            gap: 20px;
        }
    }

/* -------------------------------------------------------------------------
   Living room page - "Porcelain Tile Designs for Different Living Room Styles"
   Compact two-column list: small square swatch beside the heading and its one
   line of text. The earlier full-width alternating rows ran to 3506px - four
   times every other section on the page - because each row gave a 540x540
   swatch to a single sentence. Panels are WHITE: this section sits on cream.
   ------------------------------------------------------------------------- */

    /* Two across, and because it is flex rather than grid an incomplete last row
       centres itself at normal card width - five items read 2 + 2 + 1 with the
       last centred, four read 2 + 2. No per-count rule needed. */
    .plr_design_grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
    }

    .plr_design_item {
        flex: 0 0 calc((100% - 24px) / 2);
        max-width: calc((100% - 24px) / 2);
    }

    .plr_design_item {
        display: flex;
        align-items: flex-start;
        gap: 22px;
        padding: 22px 26px;
        background-color: var(--floens-white, #ffffff);
        border: 1px solid var(--floens-border-color, #ded8d3);
        transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
    }

    .plr_design_item:hover {
        transform: translateY(-4px);
        border-color: var(--floens-base, #406fbb);
        box-shadow: 0 14px 30px rgba(0, 0, 0, .07);
    }

    /* Hairline edge on the swatch: on the white page the "Plain White" tile is
       an almost pure white image on a white card, so without it the swatch
       reads as an empty gap. Harmless on the darker swatches of the other
       pages, where it just tidies the edge. */
    .plr_design_item__media {
        flex-shrink: 0;
        overflow: hidden;
        border: 1px solid var(--floens-border-color, #ded8d3);
    }

    .plr_design_item__media img {
        display: block;
        width: 110px;
        height: 110px;
        object-fit: cover;
        transition: transform 500ms ease;
    }

    .plr_design_item:hover .plr_design_item__media img {
        transform: scale(1.06);
    }

    .plr_design_item__body {
        min-width: 0;
    }

    .plr_design_item__title {
        margin: 0 0 8px;
        font-family: var(--theme-font, "Tenor Sans", sans-serif);
        font-size: 20px;
        line-height: 1.3;
        color: var(--floens-black2, #383838);
        transition: color 300ms ease;
    }

    .plr_design_item:hover .plr_design_item__title {
        color: var(--floens-base, #406fbb);
    }

    .plr_design_item__text {
        margin: 0;
        font-size: 16px;
        line-height: 1.7;
        color: var(--floens-base2, #59595c);
        text-wrap: pretty;
    }

    /* One per row from 991px down. Two columns at tablet width leaves the text
       only ~147px beside the 110px thumb - the body ran to ten lines and the
       titles wrapped - so the card takes the full width there, as it did before
       the grid became flex. */
    @media (max-width: 991px) {
        .plr_design_grid {
            gap: 18px;
        }

        .plr_design_item {
            flex-basis: 100%;
            max-width: 100%;
        }
    }

    /* On phones the swatch sits ABOVE the text rather than beside it, and keeps
       its own 88x88 size - align-items: flex-start stops the column layout
       stretching the media box to the card width. */
    @media (max-width: 575px) {
        .plr_design_item {
            flex-direction: column;
            align-items: flex-start;
            gap: 14px;
            padding: 18px 20px;
        }

        .plr_design_item__media img {
            width: 88px;
            height: 88px;
        }

        .plr_design_item__title {
            font-size: 18px;
        }
    }

/* -------------------------------------------------------------------------
   Living room page - "Porcelain Tiles for Different Living Room Spaces"
   The theme's service-card carousel (photo, title, text, sliding hover panel),
   the component the seven product pages use for their Applications rows. Not
   used anywhere else on this page.
   ------------------------------------------------------------------------- */

    /* Equal-height cards: owl sizes each slide to its own content. The stage's
       clearfix ::after becomes a flex item once the stage is a flexbox, which
       shaves a fraction of a pixel off every card and clips the first card's
       left border - hence flex-shrink: 0 (same fix as section 20b). */
    /* bundle.css paints .application_area cream. Designs above is already cream,
       so this section has to be white to keep the alternation. */
    .plr_space_sec.application_area {
        background-color: transparent;
    }

    .plr_space_carousel .owl-stage {
        display: flex;
    }

    .plr_space_carousel .owl-item {
        display: flex;
        flex-shrink: 0;
    }

    .plr_space_carousel .owl-item > .item {
        display: flex;
        flex-grow: 1;
    }

    .plr_space_carousel .owl-item > .item > .service-card {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .plr_space_carousel .service-card__content {
        flex-grow: 1;
    }

    /* The clipping box hides the hover lift and the first card's border; bleed
       it out and pull it back, as the Applications carousel above does. */
    .plr_space_carousel .owl-stage-outer {
        padding: 12px 4px 36px;
        margin: -12px -4px -36px;
    }

/* -------------------------------------------------------------------------
   Living room page - "How to Choose Porcelain Tiles for Your Living Room?"
   No panels and no images: each factor is set directly on the cream background
   with the blue left rule the site uses for its takeaway lines, the label above
   its explanation, two columns. Deliberately not a card grid (Popular Colours),
   not a tick list (Why Choose) and not numbered (Available Finishes) - and not
   the ruled label/description table this replaces, which the owner rejected.
   ------------------------------------------------------------------------- */

    .plr_howto_grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 38px 60px;
        max-width: 1040px;
        margin: 0 auto;
    }

    .plr_howto_item {
        padding-left: 22px;
        border-left: 2px solid var(--floens-base, #406fbb);
    }

    .plr_howto_item__label {
        display: block;
        margin-bottom: 10px;
        font-family: var(--theme-font, "Tenor Sans", sans-serif);
        font-size: 20px;
        line-height: 1.3;
        color: var(--floens-black2, #383838);
    }

    .plr_howto_item__text {
        margin: 0;
        font-size: 16px;
        line-height: 1.75;
        color: var(--floens-base2, #59595c);
        text-wrap: pretty;
    }

    @media (max-width: 767px) {
        .plr_howto_grid {
            grid-template-columns: 1fr;
            gap: 28px;
        }

        .plr_howto_item {
            padding-left: 18px;
        }

        .plr_howto_item__label {
            font-size: 18px;
        }
    }

/* -------------------------------------------------------------------------
   Living room page - "Explore Other Porcelain Tile Categories"
   The theme's work-card (related products), which each of these five items
   actually links to. The card shows the category name over the photo and swaps
   to a blue panel with an arrow on hover; the document's description line sits
   under the name. Card titles are <p>, not headings - the document has these as
   list items, not h3s.
   ------------------------------------------------------------------------- */

    /* Equal cards whatever the source image proportions. */
    .plr_explore_card .work-card__image img {
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .plr_explore_card .work-card__title,
    .plr_explore_card .work-card__title a {
        color: var(--floens-white, #ffffff);
    }

    .plr_explore_desc {
        margin: 10px 0 0;
        font-size: 15px;
        line-height: 1.6;
        color: var(--floens-white, #ffffff);
        text-wrap: pretty;
    }

    /* The hover panel repeats the name beside the arrow, as the theme's related
       cards do; it needs no description. */
    .plr_explore_card .work-card__content-hover .plr_explore_desc {
        display: none;
    }

    @media (max-width: 575px) {
        .plr_explore_desc {
            font-size: 14px;
        }
    }

/* -------------------------------------------------------------------------
   Living room page - "Porcelain Tile Manufacturer & Exporter"
   The theme gives .sec-title two shapes: tagline rotated down the left side
   (default) or the whole block centred with the tagline horizontal above
   (--center). This section wants the third combination - left aligned, tagline
   horizontal ABOVE the title - so the tagline is unrotated here without
   centring the block. Offsets for the two small squares are the ones --center
   uses.
   ------------------------------------------------------------------------- */

    .plr_brand_sec .sec-title {
        display: block;
    }

    .plr_brand_sec .sec-title__tagline {
        display: inline-block;
        top: 0;
        margin: 0 0 12px 27px;
        writing-mode: horizontal-tb;
        transform: rotate(0deg);
    }

    .plr_brand_sec .sec-title__tagline::before {
        top: -1px;
        left: -27px;
    }

    .plr_brand_sec .sec-title__tagline::after {
        top: -1px;
        left: -21px;
    }

    .plr_brand_sec .sec-title__title {
        margin-top: 0;
    }

/* -------------------------------------------------------------------------
   Living room page - "Pricing & Export Inquiries"
   One paragraph, so it is set as a contained callout rather than a thin band of
   centred text: a cream panel on the white section, blue rule above the heading,
   everything inside the panel. Every other section on this page runs full width
   on a flat background, so a boxed block reads as the closing note it is.
   ------------------------------------------------------------------------- */

    .plr_price_panel {
        max-width: 1040px;
        margin: 0 auto;
        padding: 64px 70px 68px;
        text-align: center;
        background-color: var(--floens-white2, #f2eeea);
        border: 1px solid var(--floens-white3, #ebe3d9);
    }

    /* The panel has to contrast with whatever it sits on. On a white section it is
       cream (the living room page); on a cream section that would be invisible, so
       it flips to white (the stone page, where the alternation puts this section on
       bg-grey). Keyed off the background class, not the page, so it stays right
       wherever the section lands. */
    .bg-grey .plr_price_panel {
        background-color: var(--floens-white, #ffffff);
    }

    .plr_price_panel .sec-title {
        display: block;
        margin-bottom: 0;
    }

    /* Blue rule centred above the tagline, the accent this site uses to open a
       block. */
    .plr_price_panel .sec-title::before {
        content: "";
        display: block;
        width: 50px;
        height: 3px;
        margin: 0 auto 22px;
        background-color: var(--floens-base, #406fbb);
    }

    .plr_price_panel .sec-title__title {
        margin-top: 6px;
    }

    .plr_price_text {
        max-width: 780px;
        margin: 22px auto 0;
        font-size: 16px;
        line-height: 1.8;
        color: var(--floens-base2, #59595c);
    }

    @media (max-width: 991px) {
        .plr_price_panel {
            padding: 48px 40px 52px;
        }
    }

    @media (max-width: 575px) {
        .plr_price_panel {
            padding: 38px 24px 40px;
        }
    }

/* -------------------------------------------------------------------------
   Living room page - FAQs
   No illustration column: seven questions beside a 700px image made the section
   the tallest on the page. Full width instead, capped for line length, and each
   question is its own white card with a visible edge on the cream section -
   the theme leaves the title white but gives it no border, so on cream the
   items run together.
   ------------------------------------------------------------------------- */

    .plr_faq_list {
        max-width: 1040px;
        margin: 0 auto;
    }

    .plr_faq_sec .faq-accordion .accordion {
        background-color: var(--floens-white, #ffffff);
        border: 1px solid var(--floens-border-color, #ded8d3);
        transition: border-color 300ms ease, box-shadow 300ms ease;
    }

    .plr_faq_sec .faq-accordion .accordion + .accordion {
        margin-top: 16px;
    }

    .plr_faq_sec .faq-accordion .accordion:hover,
    .plr_faq_sec .faq-accordion .accordion.active {
        border-color: var(--floens-base, #406fbb);
        box-shadow: 0 12px 26px rgba(0, 0, 0, .06);
    }

    /* The card paints the background now, so the theme's own white on the title
       and the answer would just sit on top of it. */
    .plr_faq_sec .faq-accordion .accordion-title,
    .plr_faq_sec .faq-accordion .accordion-content .inner {
        background-color: transparent;
    }

    @media (max-width: 575px) {
        .plr_faq_sec .faq-accordion .accordion + .accordion {
            margin-top: 12px;
        }
    }

/* -------------------------------------------------------------------------
   Living room page - slider arrows on phones
   Prev/next centred BELOW the cards at <=767px instead of sitting on top of
   the photo, where the right-hand one also collides with the floating language
   button. Same treatment as the manufacturer, Germany and Ecuador pages.
   Selectors carry the section class so they outrank the desktop nav rules
   (.application_area.services-one ... is five classes deep).
   ------------------------------------------------------------------------- */

    @media (max-width: 767px) {
        .plr_size_sec .plr_size_carousel.owl-carousel .owl-nav,
        .plr_explore_sec .plr_explore_carousel.owl-carousel .owl-nav,
        .plr_space_sec.application_area.services-one .services-one__carousel.owl-carousel .owl-nav {
            position: static;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
            transform: none;
        }

        .plr_size_sec .plr_size_carousel.owl-carousel .owl-nav .owl-prev,
        .plr_size_sec .plr_size_carousel.owl-carousel .owl-nav .owl-next,
        .plr_explore_sec .plr_explore_carousel.owl-carousel .owl-nav .owl-prev,
        .plr_explore_sec .plr_explore_carousel.owl-carousel .owl-nav .owl-next,
        .plr_space_sec.application_area.services-one .services-one__carousel.owl-carousel .owl-nav .owl-prev,
        .plr_space_sec.application_area.services-one .services-one__carousel.owl-carousel .owl-nav .owl-next {
            margin: 0;
        }

        /* The stage-outer bleeds 36px below and pulls it back with a negative
           margin, which would drag the arrows up into the cards. No hover lift
           to protect on a phone, so drop the bleed here. */
        .plr_size_carousel .owl-stage-outer,
        .plr_explore_carousel .owl-stage-outer {
            padding-bottom: 12px;
            margin-bottom: 0;
        }

        /* The Spaces slider's stage-outer is set by the five-class
           .application_area.services-one rule (padding 30px / margin -30px),
           so this needs the section class to outrank it - otherwise the
           negative margin eats the arrows' 30px gap exactly. */
        .plr_space_sec.application_area.services-one .services-one__carousel .owl-stage-outer {
            padding-bottom: 12px;
            margin-bottom: 0;
        }
    }