/* ========================================
   CSS RESET & BASE STYLES
   ======================================== */
   *,
   *::before,
   *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   *:focus,
   *:focus-visible,
   *:focus-within {
     outline: none !important;
   }
   
   html {
     font-size: 16px;
     scroll-behavior: smooth;
     /* Improve text rendering */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
   }
   
   body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     line-height: 1.6;
     color: #333;
     background-color: #1A2236;
     overflow-x: hidden;
     /* Improve performance */
     will-change: scroll-position;
   }

   a {
    text-decoration: none !important;
   }
   
   /* Focus styles for accessibility */
   :focus {
     outline: 2px solid #00B6F0;
     outline-offset: 2px;
   }
   
   /* Skip link for accessibility */
   .skip-link {
     position: absolute;
     top: -45px;
     left: 6px;
     background: #00B6F0;
     color: white;
     padding: 8px;
     text-decoration: none;
     border-radius: 4px;
     z-index: 10000;
   }
   
   .skip-link:focus {
     top: 6px;
   }
   
   img {
     max-width: 100%;
     height: auto;
     display: block;
   }
   
   button {
     cursor: pointer;
     border: none;
     background: none;
     font-family: inherit;
   }
   
   a {
     text-decoration: none;
     color: inherit;
   }
   
   ul {
     list-style: none;
   }


/*  ========================================
    ACCESSIBILITY & UTILITIES
    ======================================== */
    [hidden] {
    display: none !important;
    }
    
    /* Focus styles for accessibility */
    button:focus,
    input:focus,
    a:focus {
    outline: 2px solid #00B6F0;
    outline-offset: 2px;
    }
    
    /* Reduced motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }


/* ========================================
   ELEMENT
   ======================================== */

   
   /* ========================================
      UTILITY CLASSES
      ======================================== */
      .container {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 1rem;
      }
      
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      
    /* ========================================
        NAVBAR
        ======================================== */
        .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: transparent;
        padding: 2rem 0;
        transition: all 0.3s ease;
        }
        
        .navbar.is-scrolled {
        background: #121638;
        padding: 1rem 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .navbar__container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 1.5rem;
        }
        
        .navbar__logo-img {
        height: 2.5rem;
        width: auto;
        transition: height 0.3s ease;
        }
        
        .navbar.is-scrolled .navbar__logo-img {
        height: 2rem;
        }
        
        .navbar__right {
        display: flex;
        align-items: center;
        gap: 1rem;
        }
        
        .navbar__menu {
        display: flex;
        }
        
        .navbar__menu ul {
        display: flex;
        align-items: center;
        gap: 2rem;
        list-style: none;
        margin: 0;
        padding: 0;
        }
        
        .navbar__menu-link {
        color: white;
        text-decoration: none;
        font-weight: 500;
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: color 0.3s ease;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        }
        
        .navbar__menu-link:hover {
        color: #00B6F0;
        }
        
        .navbar.is-scrolled {
        font-size: 14px;
        }
        
        .dropdown-arrow {
        width: 12px;
        height: 9px;
        transition: transform 0.3s ease;
        }
        
        .dropdown-parent:hover .dropdown-arrow {
        transform: rotate(180deg);
        }
        
        .navbar__dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        background: #181c3a;
        border-radius: 0.5rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        min-width: 180px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        z-index: 100;
        padding: 0.5rem 0;
        margin-top: 0.5rem;
        }
        
        .dropdown-parent {
        position: relative;
        }
        
        .dropdown-parent:hover .navbar__dropdown,
        .dropdown-parent:focus-within .navbar__dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        }
        
        .dropdown-link {
        display: block;
        padding: 0.75rem 1rem;
        color: white;
        text-decoration: none;
        font-size: 16px;
        transition: all 0.3s ease;
        }
        
        .dropdown-link:hover {
        background: rgba(0, 182, 240, 0.1);
        color: #00B6F0;
        }
        
        .navbar__icons {
        display: flex;
        align-items: center;
        gap: 1rem;
        }
        
        .navbar__search-btn,
        .navbar__hamburger {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        }
        
        .navbar__search-btn:hover,
        .navbar__hamburger:hover {
        opacity: 0.8;
        }
        
        .navbar__search-icon,
        .navbar__hamburger-icon {
        width: 20px;
        height: 20px;
        filter: brightness(0) invert(1);
        }

        .navbar__hamburger {
        display: none;
        z-index: 1100;
        }


    /* ========================================
            HERO SECTION
        ======================================== */
        .hero-slider {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        }
        
        .slide {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transition: opacity 1s;
        z-index: 1;
        }
        
        .slide.active {
        opacity: 1;
        z-index: 2;
        }
        
        .slider-indicator {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        border: none;
        transition: all 0.2s ease;
        cursor: pointer;
        }
        
        .slider-indicator.active {
        width: 1.5rem;
        height: 1.5rem;
        background: #199ada;
        position: relative;
        }
        
        .slider-indicator.active::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 1rem;
        height: 1rem;
        background: #33b6f0;
        border-radius: 50%;
        }
        
    /* ========================================
            MULTIVERSE BUILDER PALETTE
        ======================================== */
        .multiverse-builder-palette {
        background: linear-gradient(90deg, #F5F5F5 0%, #8F8F8F 100%);
        position: relative;
        width: 100%;
        overflow: hidden;
        min-height: 280px;
        }
        
        .multiverse-palette-img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0;
        object-fit: contain;
        }
        
        #multiverse-title {
            line-height: 1.2;
            font-weight: 400;
            font-size: 4rem;
        }
        
    /* ========================================
            ABOUT US SECTION
        ======================================== */

        .aboutus-stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        }
        
        .aboutus-stat-number {
        color: #353A45;
        min-width: 80px;
        }
        
    /* ========================================
            FEATURES SECTION
        ======================================== */
        .features-section {
        background: #121638;
        width: 100%;
        }
        
        .features-section__container {
        max-width: 1280px;
        margin: 0 auto;
        padding: 2.5rem 1rem;
        }
        
        .features-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 2.5rem 1.5rem;
        align-items: start;
        }
        
        .feature-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        color: #fff;
        }
        
        .feature-item__icon {
        width: 104px;
        height: 106px;
        margin-bottom: 1.25rem;
        object-fit: contain;
        }
        
        .feature-item__text {
        font-size: 0.85rem;
        font-weight: 400;
        line-height: 1.4;
        color: #fff;
        letter-spacing: 0.02em;
        margin-top: 0.25rem;
        }
        
    /* ========================================
            FOOTER
        ======================================== */
        .footer {
        background: #1A2236;
        padding: 2rem 0;
        text-align: center;
        color: white;
        font-size: 0.875rem;
        }
        
        .footer__container {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 1rem;
        }
        
    /* ========================================
            SEARCH POPUP
        ======================================== */
        .search-popup {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2000;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        }
        
        .search-popup[style*="display: block"],
        .search-popup.active {
        display: flex !important;
        pointer-events: auto;
        }
        
        .search-popup__backdrop {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(18, 22, 56, 0.7);
        backdrop-filter: blur(4px);
        z-index: 0;
        }
        
        .search-popup__content {
        position: relative;
        z-index: 1;
        background: rgba(30, 40, 80, 0.85);
        border-radius: 2rem;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
        padding: 2rem 2rem 1.5rem 2rem;
        min-width: 320px;
        max-width: 90vw;
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        animation: popup-fadein 0.2s ease-out;
        }
        
        @keyframes popup-fadein {
        from {
            opacity: 0;
            transform: scale(0.98);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
        }
        
        .search-popup__close {
        position: absolute;
        top: -3rem;
        right: -1rem;
        background: none;
        border: none;
        color: white;
        font-size: 2rem;
        cursor: pointer;
        z-index: 2;
        opacity: 0.7;
        transition: opacity 0.2s;
        }
        
        .search-popup__close:hover {
        opacity: 1;
        }
        
        .search-popup__form {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        position: relative;
        }
        
        .search-popup__input {
        flex: 1;
        background: transparent;
        border: 1.5px solid #B6E0F7;
        color: white;
        font-size: 1.25rem;
        border-radius: 2rem;
        padding: 0.75rem 1.25rem;
        outline: none;
        transition: border-color 0.2s;
        }
        

        .search-popup__input::placeholder {
        color: #B6E0F7;
        opacity: 0.8;
        }
        
        .search-popup__input:focus {
        border-color: #00B6F0;
        }
        
        .search-popup__button {
        background: #00B6F0;
        border: none;
        border-radius: 50%;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: absolute;
        right: 10px;
        transition: background-color 0.2s;
        }
        

        
        .search-popup__button:hover {
        background: #0099cc;
        }
        
        .search-popup__button svg {
        width: 24px;
        height: 24px;
        display: block;
        }
        

    /* ========================================
            MOBILE MENU OVERLAY
        ======================================== */
        .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        }
        

        .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
        }
        
        .mobile-menu-close {
        display: none;
        }
        
        .mobile-menu-logo {
        display: none;
        padding: 1rem 1.5rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .mobile-menu-logo img {
        height: 2rem;
        width: auto;
        }

    /* ========================================
        Parallax background base
    ======================================== */
    .parallax-bg {
        background-attachment: fixed;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 400px;
    }
    
    .bg-solid {
        background-image: url('../imgs/bg-solid.jpg');
    }
    .bg-eternawood {
        background-image: url('../imgs/bg-eternawood.png');
    }
    .bg-cosmolore {
        background-image: url('../imgs/bg-cosmolore.jpg');
    }
    .bg-nebula {
        background-image: url('../imgs/bg-nebula.jpg');
    }

    .parallax-bg a {
        transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
        color: inherit;
    }
    .parallax-bg a:hover {
        text-shadow: 0px 8px 15px black;
    }
      
  
    /* ========================================
        Lookbook Section Responsive
    ======================================== */
    .lookbook-section {
        background: #fff;
        width: 100%;
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .lookbook-header {
        margin-bottom: 2.5rem;
    }
    .lookbook-share-text {
        color: #616161;
    }
    .lookbook-title {
        color: #3A3A3A;
    }
    .lookbook-image-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .lookbook-image {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100vw;
    }

    /* ========================================
        Services Contact Section
    ======================================== */
    .services-contact-section {
        position: relative;
        min-height: 420px;
        overflow: hidden;
    }
    .services-contact-section .absolute {
        z-index: 1;
    }
    .services-contact-section .relative {
        z-index: 2;
    }
    .services-contact-section h2 {
        letter-spacing: 2px;
    }
    .services-contact-section .min-w-\[220px\] {
        min-width: 220px;
    }
    .add-line-btn {
        background: #1CA924;
        color: #fff;
        border: none;
        border-radius: 9999px;
        font-size: 1.5rem;
        font-weight: 600;
        padding: 1rem 3rem;
        box-shadow: 0 4px 24px 0 rgba(28, 169, 36, 0.15);
        transition: background 0.2s, box-shadow 0.2s;
        cursor: pointer;
        outline: none;
        display: inline-block;
        border: 1px solid #188e1e;
    }
    .add-line-btn:hover, .add-line-btn:focus {
        background: #188e1e;
        box-shadow: 0 6px 32px 0 rgb(28 169 36 / 50%);
        border: 1px solid #00ff0e;
    }
    
    .parallax-bg.bg-services-contact {
        background-image: url('../imgs/bgseccontact.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    /* ========================================
       DREAM SPACE SECTION (DDS)
       ======================================== */
    .dds-section {
      position: relative;
      overflow: hidden;
      background: #121638;
    }
    .dds-section__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
      position: relative;
      z-index: 1;
    }
    .dds-section__row {
      display: flex;
      align-items: stretch;
    }
    
    /* Row 1: Top Section with 2 Columns */
    .dds-section__row--top {
        gap: 3rem;
    }
    .dds-section__col {
      flex: 1;
      position: relative;
    }

    /* Col 1: Left Column with Text and Image */
    .dds-section__col--left {
      display: flex;
      position: relative;
    }
    .dds-section__content {
      position: relative;
      z-index: 10;
      width: 582px;
    }
    .dds-section__text-image,
    .dds-section__showcase-image {
      max-width: 100%;
      height: auto;
    }
    .dds-section__showcase {
      position: relative;
      margin: 0;
    }
    .dds-section__header {

    }
    .dds-section__navigation {
    }

    .dds-section__subtitle {
      font-size: 1.25rem;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 400;
      line-height: 1.4;
    }

    /* Col 2: Right Column with Arrow Link */
    .dds-section__col--right {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 0 40px 0;
        text-align: left;
    }
    .dds-section__title {
      margin-bottom: 1.5rem;
    }
    .dds-section__title-design {
      font-size: 3rem;
      font-weight: 900;
      background: linear-gradient(135deg, #FFFFFF 0%, #BABBC5 50%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 0.9;
      letter-spacing: -0.02em;
      margin-bottom: 0;
    }
    .dds-section__title-dreamspace {
      font-size: 3rem;
      font-weight: 900;
      background: linear-gradient(135deg, #FFFFFF 0%, #BABBC5 50%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 0.9;
      letter-spacing: -0.02em;
      margin-bottom: 0;
    }
    .dds-section__subtitle {
      color: rgba(255, 255, 255, 0.9);
      font-size: 1rem;
      margin-bottom: 0;
      line-height: 0.5;
    }
    .dds-section__link {
      display: inline-block;
      transition: all 0.3s ease;
    }
    .dds-section__link:hover {
      transform: scale(1.05);
      filter: brightness(0) invert(1);
    }
    .dds-section__icon {
        max-width: 100px;
      width: 100px;
      height: 100px;
    }

    /* Row 2: Bottom Section with Background */
    .dds-section__row--bottom {
      position: relative;
    }
    .dds-section__bg-area {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
    }

    /* Click Button */
    .dds-section__click-btn {
      --mouse-x: 50%;
      --mouse-y: 100%;
      position: relative;
      z-index: 2;
      padding: 1rem 3rem;
      border-radius: 50px;
      font-size: 1.125rem;
      font-weight: 600;
      color: #333;
      background: linear-gradient(135deg, #F5F5F5 0%, #8F8F8F 100%);
      transition: all 0.3s ease;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      border: none;
      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    }
    .dds-section__click-btn:hover {
      background: #121638;
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(0,0,0,0.3);
    }
    .dds-section__click-btn span {
      position: relative;
      z-index: 1;
    }

    .whitebar.sec_dds {
        background: #ffffff;
        width: 100%;
        height: 20px;
    }

    /* ========================================
        BFM Footer Custom Styles
    ======================================== */
    .footer-bfm {
        background: #121638;
        color: #fff;
        padding-top: 3.5rem;
        padding-bottom: 2rem;
    }
    .footer-bfm__container {
        max-width: 1280px;
        margin: 0 auto;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }
    .footer-bfm__row {
        width: 100%;
        display: flex;
        align-items: center;
    }
    .footer-bfm__row--logo {
        justify-content: center;
    }
    .footer-bfm__logo {
        width: 308px;
        height: auto;
        display: block;
    }
    .footer-bfm__laminates {
        display: block;
        font-size: 1.25rem;
        margin-left: 1rem;
        letter-spacing: 0.1em;
    }
    .footer-bfm__row--contact {
        justify-content: space-between;
        gap: 2rem;
    }
    .footer-bfm__col {
        flex: 1;
        min-width: 200px;
        text-align: center;
        font-size: 1rem;
    }
    .footer-bfm__link {
        color: #fff;
        text-decoration: underline;
        transition: color 0.2s;
    }
    .footer-bfm__link:hover {
        color: #33b6f0;
    }
    .footer-bfm__row--bottom {
        justify-content: space-between;
        gap: 2rem;
    }
    .footer-bfm__copyright {
        font-size: 1rem;
        opacity: 0.85;
        text-align: left;
        flex: 1;
        min-width: 200px;
    }
    .footer-bfm__social {
        display: flex;
        gap: 14px;
        justify-content: flex-end;
        flex: 1;
        min-width: 200px;
    }
    .footer-bfm__social a {
        transition: all 0.3s ease;
    }
    .footer-bfm__social a:hover {
        opacity: 0.8;
        transform: scale(1.1);
    }
    .footer-bfm__icon {
        width: 32px;
        height: auto;
        display: inline-block;
    }
    .footer-bfm__copyright-links {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        font-size: 1rem;
        opacity: 0.85;
        text-align: left;
        flex: 1;
        min-width: 200px;
      }
      .footer-bfm__footerlink {
        color: #fff;
        text-decoration: underline;
        opacity: 0.85;
        font-size: 1rem;
        transition: color 0.2s;
      }
      .footer-bfm__footerlink:hover {
        color: #33b6f0;
      }

      /* Breadcrumb Navigation */
      ol.breadcrumb.gap-2.text-gray-400 li {
        display: inline-block;
        margin-right: 0.5rem;
      }


/* ========================================
    RESPONSIVE DESIGN
    ======================================== */
    
    @media screen and (max-width: 1123px) and (min-width: 992px) {
        .dds-section__title-design,
        .dds-section__title-dreamspace {
            font-size: 2.3rem;
        }
        .dds-section__row--top {
            gap: 1rem;
        }
        .dds-section__icon {
            max-width: 70px;
            width: 70px;
            height: 70px;
        }
        .dds-section__subtitle {
            font-size: 0.9rem;
        }
        .dds-section__title {
            margin-bottom: 1rem;
        }
    }
    
    @media only screen and (max-width: 991px) {
    /* Tablet styles */
        .navbar__menu {
            display: block;
        }
        
        .navbar__hamburger {
        display: flex;
        z-index: 1100;
        padding: 0.25rem;
        }
        
        .mobile-menu-logo {
        display: none;
        }
        
        .mobile-menu-close {
        position: absolute;
        top: 10px;
        right: 0.5rem;
        background: none;
        border: none;
        color: white;
        font-size: 2rem;
        cursor: pointer;
        padding: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.3s ease;
        }
        .mobile-menu-close:hover {
        color: #00B6F0;
        }
        
        .navbar__menu ul.open .mobile-menu-close {
        display: flex;
        }
        
        .multiverse-builder-palette {
        min-height: 380px;
        }
        
        
        .multiverse-palette-img {
            position: static !important;
            margin-top: 2rem !important;
            margin-bottom: 0 !important;
            width: 100% !important;
            left: auto !important;
            bottom: auto !important;
        }

        .navbar__logo-img {
        height: 2rem;
        }
        
        .navbar.is-scrolled .navbar__logo-img {
        height: 1.75rem;
        }

        /* Mobile Menu Structure */
        .navbar__menu ul {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #121638;
        height: auto;
        min-height: auto;
        max-height: none;
        flex-direction: column;
        z-index: 1000;
        transform: translateY(-100%);
        transition: transform 0.3s ease;
        width: 100%;
        overflow-y: visible;
        padding: 0;
        margin: 0;
        gap: 0;
        }
        
        .navbar__menu ul.open {
        transform: translateY(0);
        z-index: 9999;
        }
        
        /* Mobile Menu Items */
        .navbar__menu ul li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        margin: 0;
        width: 100%;
        }

        .navbar__dropdown {
        position: static;
        background: #181c3a;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out, padding 0.3s ease;
        width: 100%;
        padding: 0;
        border: none;
        }

        .navbar__dropdown.show {
        max-height: 250px;
        padding: 0.25rem 0;
        }

        .navbar__dropdown a {
        color: white;
        padding: 0.5rem 1.5rem;
        font-size: 13px;
        border-bottom: none;
        }

        .navbar__dropdown a:hover {
        background: rgba(0, 182, 240, 0.15);
        color: #00B6F0;
        }

        .mobile-menu-logo {
        display: block;
        padding: 0.75rem 1rem !important;
        }
        
        .navbar__icons {
        gap: 0;
        }
        .navbar__hamburger-icon {
        width: 24px;
        height: 24px;
        }
        .navbar__menu-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 1rem 1.5rem;
        color: white;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        }
        .navbar__menu-link svg {
        margin-left: auto;
        transition: transform 0.3s ease;
        width: 8px;
        height: 6px;
        }

        #multiverse-title {
            font-size: 3em;
        }

        .parallax-bg {
            background-attachment: scroll;
            background-size: 125% auto;
        }

        .lookbook-image {
            max-width: 1024px !important;
            width: 1024px !important;
        }

        .services-contact-section .flex-col.md\:flex-row {
            flex-direction: row !important;
            gap: 2.5rem !important;
        }
        .services-contact-section > .relative > div {
            flex: 1 1 0%;
            min-width: 0;
        }
        
        .parallax-bg.bg-services-contact {
            background-attachment: scroll;
            background-size: 2000px !important;
        }

        .footer-bfm__row--contact {
            flex-direction: column;
            gap: 1.25rem;
          }
          .footer-bfm__col {
            min-width: 0;
          }
          .footer-bfm__row--bottom {
            flex-direction: column;
            gap: 1.25rem;
            align-items: center;
            text-align: center;
          }
          .footer-bfm__copyright {
            text-align: center;
          }
          .footer-bfm__social {
            justify-content: center;
          }

          .footer-bfm__copyright-links {
            flex-direction: column;
            gap: 0.5rem;
            align-items: center;
            text-align: center;
          }

          .footer-bfm__social {
            position: absolute;
            right: 1.5rem;
            bottom: 3.5rem;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: flex-end;
            min-width: 32px !important;
        }

        .dds-section__row--top {
            flex-direction: column;
            min-height: auto;
        }
        .dds-section__row--top {
            gap: 0;
        }
        .dds-section__content {
            max-width: 100%;
            width: 100%;
        }
        .dds-section__col--right {
            margin-top: 2rem;
        }
        .dds-section__row.dds-section__row--bottom.mt-\[-42px\] {
            margin-top: 0px;
        }
    }
  

  @media only screen and (max-width: 767px) {
    /* Mobile Large styles */
        .multiverse-builder-palette .navbar__container {
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 0 !important;
        }
        .multiverse-builder-palette .order-1 {
            order: 1 !important;
        }
        .multiverse-builder-palette .order-2 {
            order: 2 !important;
        }
        
        .multiverse-builder-palette .navbar__container {
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 0 !important;
        }
        .multiverse-builder-palette .order-1 {
            order: 1 !important;
        }
        .multiverse-builder-palette .order-2 {
            order: 2 !important;
        }
        .multiverse-palette-img {
            position: static !important;
            margin-top: 2rem !important;
            margin-bottom: 0 !important;
            width: 100% !important;
            left: auto !important;
            bottom: auto !important;
        }
        .parallax-bg {
            background-attachment: scroll;
            background-size: 1200px auto;
        }
        .services-contact-section .min-w-\[220px\] {
            min-width: 0;
        }

        .footer-bfm__row--logo {
        flex-direction: column;
            gap: 0.5rem;
        }
        .footer-bfm__row--contact {
            gap: 0.75rem;
        }
        .footer-bfm__row--bottom {
            gap: 0.75rem;
        }

        .footer-bfm__copyright-links {
            gap: 0.25rem;
        }

    }

  @media only screen and (max-width: 629px) {
    img.dds-section__text-imag.mt-\[-20px\] {
        margin-top: -3.1vw;
    }
  }

  @media only screen and (max-width: 529px) {
    .dds-section__title-design,
        .dds-section__title-dreamspace {
            font-size: 2.3rem;
        }
        .dds-section__row--top {
            gap: 1rem;
        }
        .dds-section__icon {
            max-width: 70px;
            width: 70px;
            height: 70px;
        }
        .dds-section__subtitle {
            font-size: 0.9rem;
        }
        .dds-section__title {
            margin-bottom: 1rem;
        }
        .dds-section__col--right {
            margin-top: 1rem;
        }
        .dds-section__text-image, .dds-section__showcase-image {
            aspect-ratio: 1 / 1.2;
            object-fit: cover;
        }
        .dds-section__click-btn {
            padding: 0.8rem 1.5rem;
            font-size: 1rem;
        }
  }
  
  @media only screen and (max-width: 479px) {
    /* Mobile styles */
        .navbar__hamburger {
        padding: 0.25rem;
        }
        .navbar__icons {
        gap: 0;
        }
        .navbar__hamburger-icon {
        width: 24px;
        height: 24px;
        }
        .navbar__menu ul li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        .navbar__menu ul li:last-child {
        border-bottom: none;
        }
        
        .navbar__menu-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 1rem 1.5rem;
        color: white;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        }

        .navbar__menu-link svg {
        margin-left: auto;
        transition: transform 0.3s ease;
        width: 8px;
        height: 6px;
        }

        #multiverse-title {
            font-size: 2rem;
        }

        .feature-item__text {
        font-size: 0.875rem;
        }

        .feature-item__icon {
        width: 90px;
        height: auto;
        }

        .lookbook-image {
            max-width: 768px !important;
            width: 768px !important;
        }
        .services-contact-section .flex-col.md\:flex-row {
            flex-direction: column !important;
            gap: 2.5rem !important;
        }

    }

/* ============================== *
   ELEMENT (NEWS Section)
   ============================== */
.news-section {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: url(../imgs/bg-news.jpg) center center / cover no-repeat !important;
    background-position: 50% 20% !important;
    background-size: 150% !important;
}
.news-section__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.news-section__heading {
  color: #fff;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  margin-bottom: 2rem;
  text-shadow: 0 4px 24px rgba(0,0,0,0.25);
}
.news-section__grid {
  display: flex;
  flex-direction: row;
  gap: 2.5rem;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  margin-bottom: 2.5rem;
}
.news-card {
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 350px;
  aspect-ratio: 1/1.5;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.news-card__content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-radius: 1rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  padding: 1.25rem 1rem 1rem 1rem;
  margin: 1.5rem;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.news-card__title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #222;
}
.news-card__subtitle {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 0.75rem;
}
.news-card__desc {
  font-size: 0.8rem;
  color: #444;
  line-height: 1.4;
}
.news-section__seemore-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}
.news-section__seemore {
  --mouse-x: 50%;
  --mouse-y: 100%;
  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), #F5F5F5 0%, #F5F5F5 25%, #8F8F8F 65%);
  color: #222;
  font-size: 1.35rem;
  font-weight: 600;
  border: none;
  border-radius: 2rem;
  padding: 0.75rem 2.5rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}
.news-section__seemore:hover {
  color: #000;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  transform: translateY(-2px);
}
.news-section__seemore span {
  position: relative;
  z-index: 1;
}

/* Animation for news-card hover effect (applies to all grid posts) */
.news-card {
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.08);
}
.news-card:hover, .news-card:focus-within {
  transform: scale(1.035);
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.18);
  z-index: 2;
}

/* ============================== *
   RESPONSIVE DESIGN (NEWS Section)
   ============================== */
@media only screen and (max-width: 991px) {
  .news-section__grid {
    gap: 1.5rem;
  }
  .news-card {
    aspect-ratio: 1/2;
  }
}
@media only screen and (max-width: 767px) {
  .news-section {
        background-size: cover !important;
  }
  .news-section__heading {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
  }
  .news-section__grid {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .news-card {
    max-width: 479px;
    width: 100%;
    aspect-ratio: 1/1;
  }
  .news-card__content {
    min-height: 120px;
    padding: 1rem 0.75rem 0.75rem 0.75rem;
    margin: 1rem;
  }
}
@media only screen and (max-width: 479px) {
  .news-section__heading {
    font-size: 1.8rem;
  }
  .news-card__content {
    min-height: 100px;
    padding: 0.75rem 0.5rem 0.5rem 0.5rem;
    margin: 0.75rem;
  }
  .news-section__seemore {
    font-size: 1.1rem;
    padding: 0.6rem 1.8rem;
  }
  .news-card {
    aspect-ratio: 1/1.2;
  }
}


/* ============================== *
   Project Slider
   ============================== */
/* ====== proslide: RESET & CONTAINER ====== */
.proslide-section * { box-sizing: border-box; }
.proslide-section {
  background: #fff;
  padding-bottom: 48px;
  position: relative;
  font-family: 'Sarabun', sans-serif;
}
.proslide-slider {
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  position: relative;
  background: #fff;
}
.proslide-track {
  display: flex;
  height: 65vh; /* ปรับความสูง column เป็น vh ตามต้องการ */
  min-height: 420px;
  max-height: 800px;
  width: max-content;
  overflow: hidden;
}
/* ====== proslide: SLIDE ITEM ====== */
.proslide-slide {
  min-width: 260px;
  width: 20vw;
  flex: 0 0 20vw;
  position: relative;
  transition: width 0.5s cubic-bezier(.4,1.3,.5,1),
              flex-basis 0.5s cubic-bezier(.4,1.3,.5,1),
              min-width 0.5s cubic-bezier(.4,1.3,.5,1),
              max-width 0.5s cubic-bezier(.4,1.3,.5,1),
              z-index 0.3s;
  will-change: width, flex-basis, min-width, max-width, z-index;
  overflow: hidden;
  box-shadow: -10px 0 20px 0px rgba(0,0,0,0.18), 10px 0 20px 15px rgba(0,0,0,0.18);
  z-index: 1;
  border-radius: 0;
  margin-right: 0;
  background: #222;
}
.proslide-slider:hover .proslide-slide {
  width: 18vw;
  flex-basis: 18vw;
}
.proslide-slider .proslide-slide:hover {
  width: 45vw; /* ขยายกว้างขึ้นเมื่อ hover (desktop) */
  flex-basis: 45vw;
  z-index: 2;
  cursor: pointer;
}
.proslide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.82);
  transition: filter 0.3s;
}
.proslide-slide:hover .proslide-img {
  filter: brightness(1);
}
/* ====== proslide: LABEL & LINK ====== */
.proslide-label {
  position: absolute;
  top: 32px;
  left: 28px;
  color: #fff;
  font-size: 1.9em;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.32);
  line-height: 1.1;
  text-transform: uppercase;
  max-width: 80%;
  z-index: 2;
  white-space: pre-line;
  word-break: break-word;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.proslide-slide:hover .proslide-label,
.proslide-slide:focus-within .proslide-label {
  -webkit-line-clamp: unset;
  white-space: nowrap;
  overflow: visible;
  display: block;
}
.proslide-link {
  position: absolute;
  left: 28px;
  bottom: 32px;
  color: #fff;
  font-size: 1.1em;
  font-weight: 400;
  z-index: 2;
  background: none;
  padding: 0;
  border-radius: 0;
  text-decoration: none;
  transition: color 0.35s cubic-bezier(.4,1.3,.5,1);
}
.proslide-link:hover, .proslide-link:focus {
  color: #00B6F0; /* สีลิงก์หลักของ BFM */
  text-decoration: none;
}
/* ====== proslide: DOTS (ใช้ style เดียวกับ hero section) ====== */
.proslide-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  margin-top: 28px;
}
.proslide-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: rgb(0 0 0 / 40%);
  border: none;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  box-shadow: none;
  outline: none;
  display: inline-block;
}
.proslide-dot.active {
  width: 1.5rem;
  height: 1.5rem;
  background: #199ada;
  position: relative;
}
.proslide-dot.active::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1rem;
  height: 1rem;
  background: #33b6f0;
  border-radius: 50%;
}
/* ====== proslide: RESPONSIVE ====== */
@media (max-width: 900px) {
  .proslide-track { height: 340px; }
  .proslide-label { font-size: 1.2em; top: 18px; left: 14px; }
  .proslide-link { left: 14px; bottom: 18px; font-size: 0.95em; }
  .proslide-slide { min-width: 180px; }
}
@media (max-width: 600px) {
  .proslide-track { height: 220px; }
  .proslide-label { font-size: 1em; top: 1.5rem; left: 1rem; }
  .proslide-link { left: 8px; bottom: 10px; font-size: 0.85em; }
  .proslide-slide { min-width: 120px; }
}
/* Responsive columns: 4/3/2 */
@media (max-width: 991px) {
  .proslide-slide { min-width: 180px; width: 25vw; flex-basis: 25vw; }
  .proslide-slider:hover .proslide-slide { width: 22vw; flex-basis: 22vw; }
  .proslide-slider .proslide-slide:hover, .proslide-slider .proslide-slide:focus-within {
    width: 40vw;
    flex-basis: 40vw;
    z-index: 2;
  }
  .proslide-dot { width: 0.85rem; height: 0.85rem; }
  .proslide-dot.active { width: 1.1rem; height: 1.1rem; }
  .proslide-dot.active::after { width: 0.7rem; height: 0.7rem; }
}
@media (max-width: 767px) {
  .proslide-slide { min-width: 120px; width: 33.33vw; flex-basis: 33.33vw; }
  .proslide-dot { width: 0.7rem; height: 0.7rem; }
  .proslide-dot.active { width: 0.95rem; height: 0.95rem; }
  .proslide-dot.active::after { width: 0.55rem; height: 0.55rem; }
  .proslide-slider:hover .proslide-slide { width: 30vw; flex-basis: 30vw; }
  .proslide-slider .proslide-slide:hover, .proslide-slider .proslide-slide:focus-within {
    width: 60vw;
    flex-basis: 60vw;
    z-index: 2;
  }
}
@media (max-width: 479px) {
  .proslide-slide { min-width: 100px; width: 50vw; flex-basis: 50vw; }
  .proslide-dot { width: 0.55rem; height: 0.55rem; }
  .proslide-dot.active { width: 0.75rem; height: 0.75rem; }
  .proslide-dot.active::after { width: 0.38rem; height: 0.38rem; }
  .proslide-slider:hover .proslide-slide { width: 45vw; flex-basis: 45vw; }
  .proslide-slider .proslide-slide:hover, .proslide-slider .proslide-slide:focus-within {
    width: 90vw;
    flex-basis: 90vw;
    z-index: 2;
  }
}

/* ========================================
   BFM Responsive Container Utility
   ======================================== */
.container-bfm {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.collection-grid-solid__container {
  min-width: 1200px;
}
.scrollbar-hide {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Webkit */
}
.scroll-btn {
  /* ปรับตำแหน่งปุ่ม scroll ซ้าย/ขวา */
}

/* Popup color dropdown custom border & shadow */
#color-dropdown-list {
  border: 1.5px solid #B6E0F7;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
  background: #10153a;
  min-width: 180px;
  padding: 0.25rem 0;
}
#color-dropdown-list button {
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: transparent;
  transition: background 0.2s;
  border-radius: 0;
}
#color-dropdown-list button:last-child {
  border-bottom: none;
}
#color-dropdown-list button:hover {
  background: rgba(0,182,240,0.10);
  color: #00B6F0;
}
#color-dropdown-list span {
  border-radius: 0.5rem;
  border: 1.5px solid #fff;
}
@media (max-width: 480px) {
  #color-dropdown-list {
    min-width: 140px;
    border-radius: 0.5rem;
  }
  #color-dropdown-list button {
    font-size: 13px;
    padding: 0.5rem 1rem;
  }
}
@media (min-width: 1200px) {
  .collection-grid-solid__wrapper {
    overflow-x: hidden !important;
    scrollbar-width: none !important; /* Firefox */
  }
  .collection-grid-solid__wrapper::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari */
  }
}


/* =============================
       Section: Collection Hero Button
       ============================= */
       .collection__ecatalog-btn {
        box-shadow: 0 0 10px 2px rgba(255,255,255,0.7), 0 2px 8px 0 rgba(0,0,0,0.10) !important;
        border: none !important;
        outline: none;
        position: relative;
        font-weight: 500;
    }
    .collection__ecatalog-btn:hover,
    .collection__ecatalog-btn:focus {
        background: #3A3A3A !important;
        color: #fff !important;
        box-shadow: 0 0 10px 2px rgba(255,255,255,0.9), 0 2px 8px 0 rgba(0,0,0,0.10) !important;
    }
    .collection__ecatalog-btn:hover .collection__ecatalog-icon,
    .collection__ecatalog-btn:focus .collection__ecatalog-icon {
        filter: brightness(0) invert(1);
        /* ทำให้ icon-download เป็นสีขาว */
    }

/* ===== Section: Filter Bar (BEM Custom) ===== */
.filter-bar__radio {
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 0.2rem;
  border: 2px solid #A3A3A3;
  background: transparent;
  display: inline-block;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
  vertical-align: middle;
  margin: 0;
  cursor: pointer;
}
.filter-bar__radio:checked {
  border-color: #1DA1F2;
  background: #1DA1F2;
}
.filter-bar__radio:focus {
  outline: none;
  box-shadow: 0 0 0 2px #1DA1F233;
}
.filter-bar__radio:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  background: #fff;
  border-radius: 0.1rem;
  display: block;
}
.filter-bar__item input[type="radio"]:checked + .filter-bar__text {
  color: #1DA1F2;
}
.filter-bar__text { color: #fff; transition: color 0.2s; }

/* ===== Section: Tab Content Animation ===== */
.tab-contents {
  position: relative;
}
.tab-content {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
  will-change: opacity;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
.tab-content.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  position: relative;
}
.tab-content.tab-hidden {
  display: none !important;
}


/* ===== Section: Collection Grid Solid Header/QR/Title ===== */
.collection-grid-solid__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}
.collection-grid-solid__qr {
  box-sizing: border-box;
}
.collection-grid-solid__title {
  /* ใช้ Tailwind class แทน custom font-size/font-weight/color */
}

/* ===== Section: Collection Tile Info/Meta/Code/Icons ===== */
.collection-tile-info {
  padding: 8px 10px 10px 10px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.collection-tile-meta {
  font-size: 0.95rem;
  color: #ff632d;
  font-weight: 600;
  line-height: 1.1;
}
.collection-tile-code {
  font-size: 0.82em;
  color: #ff632d;
  font-weight: 400;
  letter-spacing: 0.01em;
  opacity: 0.85;
}
.collection-tile-icons {
  margin-top: 2px;
  width: 60px;
  height: 16px;
  object-fit: contain;
  opacity: 0.85;
  display: block;
}

/* ===== Section: Collection Grid Solid Wrapper/Scrollbar ===== */
.collection-grid-solid__wrapper {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-color: #ff632d #ff632d; /* thumb, track for Firefox */
  scrollbar-width: thin; /* Firefox */
}
.collection-grid-solid__wrapper::-webkit-scrollbar {
  height: 12px;
  background: #fff;
}
.collection-grid-solid__wrapper::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 8px;
}
.collection-grid-solid__wrapper::-webkit-scrollbar-thumb {
  background: #ff632d;
  border-radius: 8px;
  border: 2px solid #fff;
}

/* ===== Section: Collection Grid Solid Container ===== */
.collection-grid-solid__container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(100px, auto);
  gap: 16px;
  min-width: 1200px;
}

/* ===== Section: Collection Tile BFM/BG/Size ===== */
.collection-tile-bfm {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  cursor: pointer;
}
.collection-tile-bg {
  flex: 1 1 auto;
  background-size: cover;
  background-position: center;
  min-height: 163px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.collection-tile-size {
  font-size: 1.1rem;
  font-weight: 500;
  color: #222;
  padding: 2px 8px;
  border-radius: 4px;
}

/* ===== Section: Scroll Button & Nav ===== */
.scroll-btn {
  background: #ff632d;
  color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.08);
  opacity: 0.8;
  transition: opacity 0.2s;
  border: none;
  cursor: pointer;
}
.scroll-btn:hover { opacity: 1; }
.collection-grid-solid__nav { display: none !important; }
.collection-grid-solid__nav.active { display: flex !important; }

/* ===== Section: Switch Toggle ===== */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
}
.switch input { display: none; }
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #ff632d;
}
input:checked + .slider:before {
  transform: translateX(20px);
}

/* Collection Grid Solid Background */
.collection-grid-solid--gray {
  background-color: #C5C7C6;
}

/* Features Section Background */

/* ========================================
   LOOKBOOK GALLERY THUMBNAILS
   ======================================== */

/* Desktop layout from 992px and up */
@media (min-width: 992px) {
  .lookbook-gallery-container {
    flex-direction: row !important;
  }
  
  .lookbook-roomscene__thumbsbox {
    flex-direction: column !important;
    order: 1 !important;
  }
  
  .lookbook-roomscene__mainimg {
    order: 2 !important;
    width: 40%;
  }
  
  .lookbook-roomscene__info {
    order: 3 !important;
  }
}

@media (max-width: 767px) {
  .lookbook-roomscene__thumbsbox {
    height: auto; /* Mobile: horizontal layout */
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* Main image styling with smooth transitions */
.lookbook-roomscene__mainimg img {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Individual thumbnail button styling */
.lookbook-roomscene__thumb {
  position: relative;
  display: block;
  width: 4.5rem;  /* 72px */
  height: 4.5rem; /* 72px */
  border-radius: 0.75rem; /* 12px */
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  background: #f8f9fa;
}

.lookbook-roomscene__thumb:hover {
  border-color: #0189cf;
  transform: scale(1.05);
}

.lookbook-roomscene__thumb.selected,
.lookbook-roomscene__thumb.border-active {
  border-color: #0189cf;
  box-shadow: 0 0 0 1px #0189cf;
}

.lookbook-roomscene__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile responsive thumbnails */
@media (max-width: 767px) {
  .lookbook-roomscene__thumb {
    width: 3rem;  /* 48px for mobile */
    height: 3rem; /* 48px for mobile */
  }
}

/* Overlay text for "ดูเพิ่มเติม" button */
.lookbook-roomscene__thumb .overlay-text {
  position: absolute;
  inset: 0;
  background: rgba(75, 85, 99, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.75rem;
  text-align: center;
  line-height: 1.2;
  padding: 0.25rem;
}

@media (max-width: 767px) {
  .lookbook-roomscene__thumb .overlay-text {
    font-size: 0.625rem; /* Even smaller on mobile */
  }
}

/* Custom lightbox styles */
.custom-lightbox__img {
  max-width: 80%;
  max-height: 70vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.custom-lightbox__img.fade-out {
  opacity: 0;
  transform: scale(0.95);
}

.custom-lightbox__img.fade-in {
  opacity: 1;
  transform: scale(1);
}

.custom-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.custom-lightbox__nav:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-50%) scale(1.1);
}

.custom-lightbox__nav--prev {
  left: 20px;
}

.custom-lightbox__nav--next {
  right: 20px;
}

.custom-lightbox__thumbs {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 12px;
  overflow-x: auto;
  max-width: 90vw;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.custom-lightbox__thumbs::-webkit-scrollbar {
  display: none;
}

/* Custom lightbox thumbnail styles */
.custom-lightbox__thumb {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 3px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  background: #333;
}

.custom-lightbox__thumb:hover,
.custom-lightbox__thumb.active {
  border-color: white;
  transform: scale(1.05);
}

.custom-lightbox__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Lookbook tabs styling */
.lookbook-tabs__tab {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  transition: all 0.3s ease;
}

.lookbook-tabs__tab.border-black {
  border-bottom-color: #000000;
}

.lookbook-tabs__tab.border-transparent {
  border-bottom-color: transparent;
}

/* Design Dream Space Button Icon Hover Effect */
.design-dream-space-btn:hover .dds-section__icon {
  transform: scale(1.05);
  filter: brightness(0) invert(1);
}

/* Tab content animations */
.lookbook-tabs__panel {
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 1;
  transform: translateY(0);
}

.lookbook-tabs__panel.hidden {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.lookbook-tabs__panel.fade-in {
  animation: tabFadeIn 0.4s ease forwards;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.action-buttons button {
  border: 1px solid currentColor;
  border-radius: 10px;
}
.action-buttons button:hover {
  border: 1px solid rgb(189, 189, 189);
}