@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

/* =============================================================================
   MOBILE FIRST STYLES (Applies to all screen sizes unless overridden below)
   ========================================================================== */

.h1-hero h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; /* Bold */
  font-size: 40px;
  line-height: 110%;
  letter-spacing: 0;
  text-align: center;
  margin-bottom:12px;
}

.h1-hero mark {
  background: none;
  color: red;
}

.hero-bg {
  position: relative;
  min-height:85vh!important;
  text-align:center;
  padding:0px 10px;
}

.hero-bg::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url("https://www.mason.com.sg/wp-content/uploads/2025/09/Ellipse-1-1.svg") no-repeat center;
  background-size: contain;
  z-index: 1;
}


.hero-desc {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500; /* Medium */
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0;
  text-align: center;
}


.hero-btn {
  font-family: 'Montserrat', sans-serif;
  width:100%;
  font-weight: 600; /* Medium */
  font-size: 16px;
  letter-spacing: 0;
  padding:8px;
  text-align: center;
  text-transform: uppercase;
}

.hero-stars {
  margin:0 auto;
  width:120px!important;
}

.below-stars {
  margin-top:4px!important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500; /* Regular */
  font-size: 14px;
  line-height: 150%;
  letter-spacing: 0;
  text-align: center;
}

.logo-section .section-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap:42px;
}

.why-us-section {
  padding-left: 24px;
  padding-right: 24px;
}

.why-text-h2 h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700!important; /* Bold */
  font-size: 28px;
  line-height: 120%;
  letter-spacing: 0;
  margin-bottom:42px
}

.tagline-text p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500; /* Medium */
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-top:24px;
  margin-bottom:12px;
}

.below-tagline-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; /* Bold */
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0;
}

.normal-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500; /* Medium */
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0;
}

.normal-text ul {
 margin-left:15px;
}

.see-more-btn {
  font-family: 'Montserrat', sans-serif;
  width:100%;
  font-weight: 600; /* Medium */
  font-size: 16px;
  letter-spacing: 0;
  padding:8px;
  text-align: center;
  text-transform: uppercase;
  background:transparent!important;
  border:1px solid #355612;
  color:#355612!important;
  margin-bottom:32px;
}


/* KARTA / TŁO / OBRAMOWANIA */
.accordion.accordion-first{
  background: #35561214;        /* BG */
  border: 1px solid #3556121F;  /* zewnętrzna ramka */
  border-radius: 18px;
  padding: 16px 20px;
  overflow: hidden;
}

/* POZYCJONOWANIE, SEPARATORY */
.accordion-first .accordion-item{
  padding: 16px 0;
}
.accordion-first .accordion-item + .accordion-item{
  border-top: 1px solid #D0D0D0; /* wewnętrzne linie */
}

/* NAGŁÓWEK AKORDEONU */
.accordion-first .accordion-title{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color: inherit;
}

/* Typografia tytułu */
.accordion-first .accordion-title span{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;       /* Bold */
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
}

/* Ikona – chowamy domyślną i podmieniamy na nasze SVG */
.accordion-first .accordion-title .toggle i{ display:none; }

.accordion-first .accordion-title .toggle{
  order: 2;                 /* przycisk po prawej */
  margin-left: auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: center / 24px no-repeat;
  cursor: pointer;
  /* PLUS (domyślnie zamknięte) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 8V16M8 12H16M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z' stroke='%23212121' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* MINUS (po rozwinięciu) – działa na aria-expanded i/lub klasę .active */
.accordion-first .accordion-title[aria-expanded="true"] .toggle,
.accordion-first .accordion-title.active .toggle{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 12H16M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z' stroke='%23212121' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* OPIS (treść) */
.accordion-first .accordion-inner{
  padding-top: 12px;
}
.accordion-first .accordion-inner p{
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;       /* Medium */
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0;
}

.accordion-title {
  border-top:0px!important;
  padding:0px;
}

.accordion .toggle {
 position:relative;
  top:auto;
}

.accordion-inner {
 padding-left:0px;
}

.green-section {
  padding-left:24px;
}

.green-text h2 {
  margin-bottom:8px!important;
  padding-right:24px;
}

#text-947739519 {
    padding-right:24px;
}


/**tabs***/
.tabs .uppercase {
  text-transform:math-auto;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400; /* Regular */
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 0;
  text-align: center;
  color:#fff;
  margin-top:12px;
  margin-bottom:16px;
}

.tab span {
  font-family: Montserrat;
  font-weight: 500;
  font-style: Medium;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 0%;
  text-align: center;
  padding:8px 16px;
}

.tab.active span {
  padding:8px 16px;
}

.tab.active a {
  background-color:#FFFFFF1F!important;
}

.tab span {
  color:#fff;
}

.tab a {
 border:1px solid #FFFFFF1F;
}

.nav.nav-pills {
  display: flex;
  flex-wrap: nowrap;       /* keep items in one line */
  overflow-x: auto;        /* horizontal scroll */
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  scrollbar-width: none;   /* hide scrollbar (Firefox) */
}

.nav.nav-pills::-webkit-scrollbar {
  display: none;           /* hide scrollbar (Webkit) */
}

.nav.nav-pills .tab {
  flex: 0 0 auto;          /* don’t shrink, stay natural width */
  margin-right: 8px;      /* spacing between tabs */
}


.tab-content-1 .col {
  padding:0px;
}


.tab-content-1 .col-inner {
  padding:24px;
}


.tab-content-1 .boxer {
  display:flex;
  border:1px solid #FFFFFF1F;
  border-radius:100px;
  justify-content:space-between;
}
.tab-content-1 .item {
  font-family: Montserrat;
  font-weight: 400;
  font-style: Regular;
  font-size: 16px;
  color:#fff;
  line-height: 16px;
  letter-spacing: 0%;
  text-align: center;
  padding:4px 14px;
}

.entry-content {
  padding-right:24px!important;
}

.radiused-img {
  border-radius:12px;
}

.normal-text.no-margin ul {
 margin-left:0px;
}

.image-below-tabs img {
  border-radius:16px;
}

.green-section #col-1062504235 {
 padding-left:0px;
 margin-top:16px;
}


.sizing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  color: #fff; /* white text */
  max-width: 900px;
  padding: 20px;
  font-family: 'Montserrat', sans-serif;
}

/* --- Bookmark chip --- */
.sizing-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #212121;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 12px 6px 32px; /* extra left padding for icon */
  border-radius: 8px;
  position: relative;
    width: fit-content;
}

/* Bookmark SVG via CSS background */
.sizing-tag::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M3.33333 5.2C3.33333 4.0799 3.33333 3.51984 3.55132 3.09202C3.74307 2.71569 4.04903 2.40973 4.42535 2.21799C4.85317 2 5.41323 2 6.53333 2H9.46667C10.5868 2 11.1468 2 11.5746 2.21799C11.951 2.40973 12.2569 2.71569 12.4487 3.09202C12.6667 3.51984 12.6667 4.0799 12.6667 5.2V14L8 11.3333L3.33333 14V5.2Z' stroke='%23212121' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center;
  background-size: contain;
}

/* --- Main content --- */
.sizing-content {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sizing-content h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  max-width: 80%;
}

/* --- Circle button with arrow --- */
.sizing-arrow {
  background: #fff url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4 12H20M20 12L14 6M20 12L14 18' stroke='%23212121' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center;
  background-size: 24px;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.images-cta-sec {
    padding:0px 24px;
    margin-top:-1px;
}
.banner-bg {
 border-radius:16px;
}

.images-cta-sec .banner {
    background-color: transparent!important;
}

.bnr-2 {
  margin-top:16px;
  margin-bottom:48px;
}

.sizing-arrow2 {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'><rect width='48' height='48' rx='24' fill='%23FF3D3D'/><path d='M33.4286 23.0102C34.1905 23.4501 34.1905 24.5498 33.4286 24.9897L19.7143 32.9077C18.9524 33.3476 18 32.7977 18 31.9179L18 16.082C18 15.2023 18.9524 14.6524 19.7143 15.0923L33.4286 23.0102Z' fill='white'/></svg>") no-repeat center;
  background-size: 48px; /* match SVG circle */
  border-radius: 50%;
  width: 56px;
  height: 56px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  outline:none;
}

.starter-icon .icon-box-text {
  text-align:left;
}

.section-kits {
  padding-left:24px;
  padding-right:24px;
}

.starter-icon .icon-box-img {
 margin-top:-5px;
}

.guesswork {
  font-family: Montserrat;
  font-weight: 500;
  font-style: Medium;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0%;
  color:#355612;
  margin-top:4px;
}

.guesswork p {
  margin-bottom:8px;
}

.product-section {
    border-top: 0px;
}

.section-kits {
 padding-bottom:0px!important;
}

.product-section .element {
  margin-bottom:48px;
  padding:20px;
  border:1px solid #DDDDDD;
  width:80%;
  border-radius:24px;
}

.product-section .element .box-image {
  border-radius:12px
}

.product-section .element .title h4{
  font-family: Montserrat;
  font-weight: 700;
  font-style: Bold;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0%;
}

.product-section .element .box-text {
  padding:0px;
  margin-top:16px;
}

.product-section .stars .icon-box-img {
 width:120px!important;
}

.product-section .stars .icon-box-text {
  align-items: center!important;
  display:flex;
  padding-left:4px;
}

.product-section .stars .icon-box-text h5 {
  font-family: Montserrat;
  font-weight: 500;
  font-size: 14px!important;
  line-height: 20px;
  letter-spacing: 0%;
}

.product-section .stars {
 margin-top:8px;
}


.product-section .price {
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    margin-top: 8px;
}

.product-section .price h3, .product-section .price p {
  display:flex;
  font-family: Montserrat;
  font-weight: 700;
  font-style: Bold;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0%;
  width:auto;
}

.product-section .price h3 {
 margin-left:5px;
}

.product-section .price .deliver {
  display: flex;
  width: -webkit-fill-available;
  justify-content: flex-end;
}


.product-section .section-content {
  display: flex;
  padding-left:10px;
  flex-wrap: nowrap;       /* keep items in one line */
  overflow-x: auto;        /* horizontal scroll */
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  scrollbar-width: none;   /* hide scrollbar (Firefox) */
}

.product-section .section-content::-webkit-scrollbar {
  display: none;           /* hide scrollbar (Webkit) */
}

.product-section .section-content .element {
  flex: 0 0 auto;          /* don’t shrink, stay natural width */
  margin-right: 16px;      /* spacing between tabs */
}


.red-one {
  padding-top:48px;
  padding-bottom:48px;
}

.red-one .icon-box,.red-one .guesswork,.red-one .normal-text {
 padding:0px 24px;
}

.red-one .stars {
  padding:0px;
}

.scroller .col-inner {
  display: flex;
  padding-left:10px;
  flex-wrap: nowrap;       /* keep items in one line */
  overflow-x: auto;        /* horizontal scroll */
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  scrollbar-width: none;   /* hide scrollbar (Firefox) */
}

.scroller .col-inner::-webkit-scrollbar {
  display: none;           /* hide scrollbar (Webkit) */
}

.scroller .col-inner .element {
  flex: 0 0 auto;          /* don’t shrink, stay natural width */
  margin-right: 16px;      /* spacing between tabs */
}


.scroller {
    border-top: 0px;
}


.scroller .element {
  margin-bottom:48px;
  padding:20px;
  width:80%;
  border-radius:24px;
  background: #FF3D3DE0
}

.scroller .element .box-image {
  border-radius:12px
}

.scroller .element .title h4{
  font-family: Montserrat;
  font-weight: 700;
  font-style: Bold;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0%;
}

.scroller .element .box-text {
  padding:0px;
  margin-top:16px;
}

.scroller .stars .icon-box-img {
 width:120px!important;
}

.scroller .stars .icon-box-text {
  align-items: center!important;
  display:flex;
  padding-left:4px;
}

.scroller .stars .icon-box-text h5 {
  font-family: Montserrat;
  font-weight: 500;
  font-size: 14px!important;
  line-height: 20px;
  letter-spacing: 0%;
  color:#fff;
}

.scroller .stars {
 margin-top:8px;
}


.scroller .price {
  display:flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  margin-top: 8px;
}

.scroller .price h3, .scroller .price p {
  display:flex;
  font-family: Montserrat;
  font-weight: 700;
  font-style: Bold;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0%;
  width:auto;
}


.scroller .price h3 {
 margin-left:5px;
}

.scroller .price del {
 color:#fff;
}

.scroller .price .deliver {
  display: flex;
  width: -webkit-fill-available;
  justify-content: flex-end;
}

.red-one .section-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3); /* black overlay with 50% opacity */
  z-index: 1;
}

.scroller .col {
  padding:0px;
}



.section-kits .image-bnr-1 {
  border-radius:16px;
  margin-bottom:16px;
}

.section-kits .image-bnr-1 h2 {
  opacity:1;
}

.section-kits .starter-icon .icon-box-img {
    margin-top: 0px;
}



.small-categories .col {
 padding:0px;
}

.small-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.small-categories .col {
  flex: 1 1 calc(50% - 12px); /* two per row, accounting for gap */
  box-sizing: border-box;
}

.small-categories .text-cats h6 {
  font-family: Montserrat;
  font-weight: 700;
  font-style: Bold;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: 0%;
  text-transform:math-auto;
  opacity:1;
  margin-top:0px;
  margin-bottom:10px;
}


.small-categories .text-cats p {
  font-family: Montserrat;
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  text-transform:math-auto;
  opacity:1;
  margin-top:0px;
  margin-bottom:0px;
}


.small-categories .text-cats {
  padding-left:16px;
  padding-bottom:16px;
}

.faqs {
  padding:24px;
  margin-bottom:48px;
}

.services .why-text-h2 h2 {
  margin-bottom:8px;
}

.services {
 padding:0px 24px;
}

.services-icon-box {
 padding:24px;
 padding-bottom:16px;
}

.services-icon-box h3 {
  font-family: Montserrat;
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0%;
  margin-bottom:4px;
}

.services-icon-box p {
  font-family: Montserrat;
  font-weight: 500;
  font-size: 14px;
  line-height: 130%;
  letter-spacing: 0%;
}

.services-icon-box .icon-box-text {
    padding-left: 12px!important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.services .normal-text {
  padding-top:16px;
  border-top:1px solid rgba(0, 0, 0, 0.04);
}

.services .buttons-stack {
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap:8px;
  padding-left:24px;
  padding-right:24px;
  padding-bottom:24px;
}

.services .buttons-stack .button {
  width:50%;
}

.services .btn-2 {
  font-family: Montserrat;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  border:1px solid #355612;
  color:#355612;
  display: flex;
    align-items: center;
    justify-content: center;

}

.services .col {
 padding-bottom:16px;
      padding-left:0px;
  padding-right:0px;
}

.photos-section {
 padding:0px 24px;
}

.photos-section img {
 border-radius:16px;
}

.photos-section h6 {
  font-family: Montserrat;
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0%;
  text-align: center;
  text-transform:math-auto;
  margin-bottom:16px;
}

.photos-section .small-categories {
  margin-top:16px;
  gap:16px;
}

.visit h6 {
  font-family: Montserrat;
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0%;
  text-align: center;
  text-transform:math-auto;
  margin-bottom:16px;
}

.product-subtitle {
 color:#fff!important;
  text-decoration:underline;
}

.countdown-section .section-content {
  display:flex;
  background-color:#FF3D3D;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-top:8px;
  padding-bottom:8px;
  padding-left:8px;
}


.countdown-section .text,.countdown-section .ux-timer-text {
 flex: 0 0 auto;
}

.countdown-section p {
  margin-bottom:0px;
  font-family: Montserrat;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0%;
  align-items: center!important;
  margin-top:1px;
}


.ux-timer-text span {
  color:#FF3D3D!important;
  background:#fff;
  padding:4px 6px;
  border-radius:4px;
  font-family: Montserrat;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0%;
  vertical-align: middle;
  text-transform: uppercase;
  margin-right:0px!important;
}


.ms-breadcrumbs {
 display:none;
}

#image_a5 {
  width:10%!important;
}

.desktop-gallery, .showroom-desc {
  display:none;
}

/* =============================================================================
   DESKTOP STYLES (Applies only to screens 1025px and wider)
   ========================================================================== */
@media (min-width: 1025px) {

  /* Product Grid Container - Glassmorphism */
  /* Size Selection Buttons - Compact Single Row with Wrap */
  .variable-items-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
  }

  .woo-variation-swatches .wvs-archive-variations-wrapper .variable-items-wrapper .variable-item:not(.radio-variable-item) {
   height:30px;
  }

  .variable-item {
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    color: white;
    flex: 0 0 auto;
    min-width: fit-content;
    line-height: 1.2;
  }

  .variable-item:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
  }

  .variable-item.selected,
  .variable-item:focus,
  .variable-item[aria-checked="true"] {
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.25);
    color: white;
    outline: none;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2);
  }

  .variable-item-span {
    display: block;
    white-space: nowrap;
    font-size: 12px;
  }

  .archive-variable-items {
    display:flex;
  }


  .col-inner {
    position: relative;
  }

  .badge-circle .onsale {
    color: white;
    font-weight: bold;
    font-size: 16px;
  }

  /* Product Image Container - Glass with Rounded Border */
  .box-image {
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 10px;
    text-align: center;
    margin-bottom: 20px;
  }

  .box-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 12px;
  }

  /* Product Info Section - Glass Effect */
  .box-text-products {
    padding: 16px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    margin-bottom: 16px;
  }

  /* Product Title */
  .product-title a {
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
    line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  .product-title a:hover {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
  }

  /* Product Subtitle (Delivery Info) */
  .product-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-style: italic;
    margin-bottom: 12px;
    display: block;
  }

  /* Price Wrapper */
  .price-wrapper {
    margin-bottom: 0;
  }

  .price {
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  .woocommerce-Price-amount {
    color: white;
  }

  .woocommerce-Price-currencySymbol {
    font-size: 16px;
  }

  /* Week Purchases Text */
  .week-purchases {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    margin-top: 8px;
    margin-bottom: 0;
  }

  /* Variation Options Container - Glass Effect */
  .wvs-archive-variations-wrapper {
    padding: 16px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
  }

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

  /* Size Selection Buttons - Glass Effect */
  .variable-items-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .variable-item {
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    color: white;
  }

  /* Product Grid Layout */
  .products-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    max-width: 1400px;
    margin: 0 auto;
  }

  .countdown-section {
    padding:0px!important;
  }

  .countdown-section .section-content {
    gap:16px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    padding-top:12px;
    padding-bottom:12px;
  }

  .countdown-section .section-content .ux-timer-text {
   font-size:100%!important;
  }

  .hero-bg {
    min-height:75vh!important;
  }

  .hero-bg::before {
      background: url(https://www.mason.com.sg/wp-content/uploads/2025/09/Ellipse-1-2.svg) no-repeat center;
      background-size: auto;
      z-index: 1;
  }

  .h1-hero h1 {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 80px;
    line-height: 110%;
    letter-spacing: 0%;
    text-align: center;
  }

  .hero-desc p {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 20px;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;
  }

  .hero-btn {
   width:233px;
  }

  .why-element .col {
    padding:0px;
    padding-bottom:30px;
  }

  .why-text-h2 {
    width:100%;
  }

  .why-text-h2 h2 {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 48px;
    line-height: 120%;
    letter-spacing: 0%;
    text-align: center;
    padding-top:50px;
  }

  .why-us-section .section-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    margin:0 auto;
    width:1440px;
  }

  .why-us-section .why-element {
    width: 24%;
  }

  .why-us-section .why-element img {
    height:350px;
    width:100%!important;
    object-fit:cover;
    object-position:center center;
    border-radius:16px
  }

  .why-element h3 {
   font-family: Montserrat;
    font-weight: 700;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: 0%;
  }

  .why-element .tagline-text p{
    font-family: Montserrat;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
  }

  .why-element .normal-text p {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 20px;
    line-height: 150%;
    letter-spacing: 0%;
  }

  .why-element .col {
   max-width:100%;
    flex-basis:100%;
  }

  .why-us-section .why-element .img-inner {
    height:350px;
  }

  .why-element .img-inner {
    padding-top:0px!important;
  }

  .why-element .normal-text ul {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 20px;
    line-height: 150%;
    letter-spacing: 0%;
  }

  .see-more-btn {
    width:294px!important;
    font-family: Montserrat;
    font-weight: 500;
    font-size: 16px;
    line-height: 250%;
    letter-spacing: 0%;
    text-align: center;
    text-transform: uppercase;
  }

  .accordion-first {
   width:90%;
  }

  .accordion-inner {
   padding-left:0px;
  }


  .green-section .nav-pills {
        justify-content: center;
  }

  .green-section .boxer {
   width:33%;
    justify-content: center;
    margin:0 auto;
  }

  .green-section .text {
    text-align:center;
  }

  .images-cta-sec .section-content {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap:24px;
    width:1440px;
    margin:0 auto;
  }

  .images-cta-sec .section-content .banner {
   width:49%;
  }

  .images-cta-sec .section-content .banner .banner-link {
   height:600px;
  }

  .bnr-2  {
    margin-top:0px;
    margin-bottom: 0px;
  }

  .images-cta-sec .banner .text-box{
     top:75%;
    left:35%;
  }

  .images-cta-sec .banner .sizing-content h2{
    font-family: Montserrat;
    font-weight: 700;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: 0%;
  }

  .section-kits {
    display: flex;
    justify-content: center;
  }

  .section-kits .section-content {
    text-align:center;
    width:1240px;
    display:flex;
    flex-direction: column;
  }

  .section-kits h3 {
    text-align:center;
    font-family: Montserrat;
    font-weight: 700;
    font-size: 48px;
    line-height: 120%;
    letter-spacing: 0%;
  }

  .section-kits .guesswork p {
    margin-right:35px;
  }

  .section-kits .normal-text p, .red {
    margin-right:35px;
  }

  .product-section, .red-one {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
  }

  .product-section .element, .red-one .element {
    width:33%;
    margin-right:0px!important;
  }

  .product-section .section-content,.red-one .section-content {
    padding-left:0px;
    width:1340px;
    gap:0px;
  }


  .red-one .section-content {
   text-align:center;
  }

  .red-one .section-content h3{
   text-align:center;
  }

  .red-one p{
    margin-right:35px;
  }

  .red-one .section-content .scroller .col-inner {
    display: flex;
    padding-left: 10px;
    flex-wrap: nowrap;
    overflow-x: visible;
    gap:0px;
  }


  .red-one .section-content .scroller .col-inner .element {
    width:23%;
  }


  .section-kits h2 {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 32px;
    line-height: 48px;
    letter-spacing: 0%;
  }

  .section-kits .text-box {
    top:80%;
    left:35%;
  }

  .small-categories .text h6 {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: 0%;
  }

  .faqs .section-content {
    text-align:center;
    display:flex;
    justify-content: center;
  }

  .services .section-content .row {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:20px;
  }

  .services .section-content .col {
    width:32%;
    flex-basis: 32%;
    max-width: 32%;
    align-items: stretch;
  }

  .services .col-inner {
    align-items:stretch;
    height:100%;
  }

  .mobile {
    display:none;
  }

  .desktop-gallery {
    display:flex;
  }

  .desktop-gallery img {
   border-radius:16px;
  }

  .showroom-mob {
   display:none;
  }

  .showroom-desc {
   display:flex;
  }

  .faqs ul, .green-section ul {
    list-style-position: inside;
    text-align: center;
    padding-left: 0;
  }

  .faqs ul li, .green-section ul li {
    display: list-item;
  }

} /* THIS IS THE CORRECTED CLOSING BRACE for @media */