/* =========================================================
   LUMIERE ARC — READY PLANS
   Page-specific styling
   ========================================================= */


/* =========================================================
   SHARED PAGE EYEBROW
   ========================================================= */

.catalog-eyebrow {

  margin:
    0 0 8px;

  color: var(--brass);

  font-size: 9px;

  font-weight: 500;

  letter-spacing: 0.17em;

  text-transform: uppercase;

}


/* =========================================================
   STYLE BROWSER / INTERIOR HEADER
   ========================================================= */

.style-browser {

  position: relative;

  min-height: 390px;

  padding:
    145px
    clamp(40px, 7vw, 135px)
    42px;

  display: flex;

  align-items: flex-end;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #faf6f0 0%,
      #f7f1e9 52%,
      #faf7f2 100%
    );

  border-bottom:
    1px solid
    rgba(96, 73, 40, 0.12);

}


/* =========================================================
   HEADER BACKGROUND ART
   ========================================================= */

.style-browser-art {

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  overflow: hidden;

}


.style-browser-art img {

  position: absolute;

  top: 0;
  right: 0;

  width: 45%;
  height: auto;

  object-fit: cover;

  object-position: center;

  opacity: 0.34;

}


/* =========================================================
   IMAGE FADE
   ========================================================= */

.style-browser-art::after {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,

      rgba(250, 247, 242, 1) 0%,

      rgba(250, 247, 242, 1) 38%,

      rgba(250, 247, 242, 0.96) 46%,

      rgba(250, 247, 242, 0.76) 57%,

      rgba(250, 247, 242, 0.40) 70%,

      rgba(250, 247, 242, 0.12) 84%,

      rgba(250, 247, 242, 0) 100%
    );

}


/* =========================================================
   STYLE BROWSER CONTENT
   ========================================================= */

.style-browser-inner {

  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 1180px;

  margin: 0 auto;

  text-align: center;

}


.style-browser h1 {

  margin: 0;

  color: #403a34;

  font-family: var(--serif);

  font-size:
    clamp(
      38px,
      3.15vw,
      52px
    );

  font-weight: 500;

  line-height: 1;

}


.style-browser-description {

  max-width: 650px;

  margin:
    15px auto 28px;

  color: #5e5851;

  font-size: 11px;

  line-height: 1.75;

}


/* =========================================================
   STYLE TABS
   ========================================================= */

.style-tabs {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 9px;

}


.style-tab {

  min-height: 39px;

  padding:
    0 18px;

  border:
    1px solid
    rgba(168, 121, 42, 0.38);

  background:
    rgba(250, 247, 242, 0.72);

  color: #514b44;

  font-family: var(--sans);

  font-size: 8.5px;

  font-weight: 500;

  letter-spacing: 0.075em;

  text-transform: uppercase;

  cursor: pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;

}


.style-tab:hover {

  border-color: var(--brass);

  color: var(--brass-dark);

}


.style-tab.active {

  border-color: var(--brass);

  background:
    linear-gradient(
      135deg,
      var(--brass-light),
      var(--brass-dark)
    );

  color: #ffffff;

}


/* =========================================================
   CATALOG SECTION
   ========================================================= */

.catalog-section {

  padding:
    28px
    clamp(40px, 6.5vw, 125px)
    75px;

  background:
    linear-gradient(
      180deg,
      #f2ede6 0%,
      #f5f0e9 100%
    );

}


.catalog-layout {

  max-width: 1500px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    255px
    minmax(0, 1fr);

  gap:
    clamp(
      34px,
      4vw,
      65px
    );

  align-items: start;

}


/* =========================================================
   FILTER PANEL
   ========================================================= */

.filter-panel {

  position: sticky;

  top: 24px;

  padding:
    25px 22px 24px;

  background:
    rgba(250, 247, 242, 0.94);

  border:
    1px solid
    rgba(168, 121, 42, 0.24);

}


.filter-heading-row {

  margin-bottom: 23px;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 15px;

}


.filter-heading-row h2 {

  margin: 0;

  color: #49423a;

  font-family: var(--serif);

  font-size: 26px;

  font-weight: 500;

}


.clear-filters {

  padding: 0;

  border: none;

  background: transparent;

  color: var(--brass);

  font-family: var(--sans);

  font-size: 8px;

  font-weight: 500;

  letter-spacing: 0.09em;

  text-transform: uppercase;

  cursor: pointer;

}


.clear-filters:hover {

  color: var(--brass-dark);

}


/* =========================================================
   FILTER GROUPS
   ========================================================= */

.filter-group {

  margin-top: 19px;

  padding-top: 18px;

  border-top:
    1px solid
    rgba(96, 73, 40, 0.12);

}


.filter-group > label {

  display: block;

  margin-bottom: 8px;

  color: #565049;

  font-size: 8.5px;

  font-weight: 500;

  letter-spacing: 0.04em;

  text-transform: uppercase;

}


.filter-group select {

  width: 100%;
  height: 39px;

  padding:
    0 31px 0 11px;

  border:
    1px solid
    rgba(168, 121, 42, 0.25);

  border-radius: 0;

  background: #ffffff;

  color: #5b554e;

  font-family: var(--sans);

  font-size: 9px;

  outline: none;

}


.filter-group select:focus {

  border-color: var(--brass);

}


.filter-note {

  margin:
    24px 0 0;

  color: #847b71;

  font-size: 8.5px;

  line-height: 1.65;

}


/* =========================================================
   RANGE FILTERS
   ========================================================= */

.range-filter-heading {

  margin-bottom: 13px;

  display: flex;

  flex-direction: column;

  gap: 5px;

}


.range-filter-heading label {

  color: #565049;

  font-size: 8.5px;

  font-weight: 500;

  letter-spacing: 0.04em;

  text-transform: uppercase;

}


.range-current {

  color: var(--brass-dark);

  font-family: var(--serif);

  font-size: 15px;

  line-height: 1;

}


/* =========================================================
   DUAL RANGE CONTROL
   ========================================================= */

.dual-range {

  position: relative;

  height: 26px;

}


.range-track,
.range-selected {

  position: absolute;

  top: 12px;

  left: 0;

  width: 100%;
  height: 2px;

}


.range-track {

  background:
    rgba(96, 73, 40, 0.16);

}


.range-selected {

  background: var(--brass);

}


.dual-range input[type="range"] {

  position: absolute;

  top: 2px;
  left: 0;

  width: 100%;
  height: 22px;

  margin: 0;

  padding: 0;

  background: transparent;

  pointer-events: none;

  appearance: none;

  -webkit-appearance: none;

}


.dual-range input[type="range"]::-webkit-slider-runnable-track {

  height: 2px;

  background: transparent;

  border: none;

}


.dual-range input[type="range"]::-webkit-slider-thumb {

  width: 15px;
  height: 15px;

  margin-top: -6.5px;

  border:
    1px solid
    var(--brass);

  border-radius: 50%;

  background: #faf7f2;

  box-shadow:
    0 1px 4px
    rgba(49, 42, 32, 0.12);

  cursor: pointer;

  pointer-events: auto;

  appearance: none;

  -webkit-appearance: none;

}


.dual-range input[type="range"]::-moz-range-track {

  height: 2px;

  background: transparent;

  border: none;

}


.dual-range input[type="range"]::-moz-range-thumb {

  width: 15px;
  height: 15px;

  border:
    1px solid
    var(--brass);

  border-radius: 50%;

  background: #faf7f2;

  box-shadow:
    0 1px 4px
    rgba(49, 42, 32, 0.12);

  cursor: pointer;

  pointer-events: auto;

}


.dual-range input[type="range"]:focus-visible::-webkit-slider-thumb {

  outline:
    2px solid
    rgba(168, 121, 42, 0.25);

  outline-offset: 3px;

}


.dual-range input[type="range"]:focus-visible::-moz-range-thumb {

  outline:
    2px solid
    rgba(168, 121, 42, 0.25);

  outline-offset: 3px;

}


/* =========================================================
   RANGE ENDPOINTS
   ========================================================= */

.range-endpoints {

  margin-top: 1px;

  display: flex;

  justify-content: space-between;

  color: #958c82;

  font-size: 7px;

  letter-spacing: 0.035em;

}


/* =========================================================
   RESULTS TOOLBAR
   ========================================================= */

.results-toolbar {

  min-height: 62px;

  margin-bottom: 20px;

  padding-bottom: 18px;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 30px;

  border-bottom:
    1px solid
    rgba(168, 121, 42, 0.28);

}


.results-toolbar h2 {

  margin: 0;

  color: #49423a;

  font-family: var(--serif);

  font-size:
    clamp(
      30px,
      2.4vw,
      40px
    );

  font-weight: 500;

}


.results-actions {

  display: flex;

  align-items: center;

  gap: 22px;

  color: #777067;

  font-size: 8.5px;

  letter-spacing: 0.05em;

  text-transform: uppercase;

}


.sort-control {

  display: flex;

  align-items: center;

  gap: 9px;

}


.sort-control select {

  height: 34px;

  padding:
    0 28px 0 10px;

  border:
    1px solid
    rgba(168, 121, 42, 0.25);

  border-radius: 0;

  background: #faf7f2;

  color: #5d574f;

  font-family: var(--sans);

  font-size: 8.5px;

  text-transform: none;

  outline: none;

}


.sort-control select:focus {

  border-color: var(--brass);

}


/* =========================================================
   PLAN GRID
   ========================================================= */

.plan-grid {

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    30px 22px;

}


/* =========================================================
   PLAN CARD
   ========================================================= */

.plan-card {

  min-width: 0;

  background: var(--cream-light);

  border:
    1px solid
    rgba(168, 121, 42, 0.16);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

}


.plan-card:hover {

  transform:
    translateY(-3px);

  box-shadow:
    0 13px 30px
    rgba(50, 42, 31, 0.08);

}


.plan-card[hidden] {

  display: none;

}


/* =========================================================
   PLAN IMAGE / THUMBNAIL
   ========================================================= */

.plan-image {

  position: relative;

  width: 100%;

  aspect-ratio: 1.45 / 1;

  display: block;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #d9d1c5,
      #bcb1a1
    );

}


/* Actual project thumbnail */

.plan-image img {

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

  transition:
    transform 0.4s ease;

}


/* Subtle border appears over image on hover */

.plan-image::after {

  content: "";

  position: absolute;

  inset: 0;

  border:
    1px solid
    rgba(168, 121, 42, 0);

  pointer-events: none;

  transition:
    border-color 0.3s ease;

}


.plan-card:hover .plan-image img {

  transform:
    scale(1.02);

}


.plan-card:hover .plan-image::after {

  border-color:
    rgba(168, 121, 42, 0.42);

}


/* =========================================================
   PLAN CARD CONTENT
   ========================================================= */

.plan-card-content {

  padding:
    18px 18px 17px;

}


.plan-card-topline {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

}


.plan-card-topline p,
.plan-card-topline span {

  margin: 0;

  color: var(--brass);

  font-size: 7.5px;

  font-weight: 500;

  letter-spacing: 0.1em;

  text-transform: uppercase;

}


.plan-card h3 {

  margin:
    7px 0 7px;

  color: #49423a;

  font-family: var(--serif);

  font-size: 26px;

  font-weight: 500;

  line-height: 1;

}


.plan-meta {

  margin: 0;

  color: #746d64;

  font-size: 7.7px;

  line-height: 1.55;

  letter-spacing: 0.035em;

  text-transform: uppercase;

}


/* =========================================================
   PLAN CARD FOOTER
   ========================================================= */

.plan-card-footer {

  margin-top: 17px;

  padding-top: 13px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  border-top:
    1px solid
    rgba(96, 73, 40, 0.11);

}


.plan-price {

  color: #554e47;

  font-family: var(--serif);

  font-size: 18px;

}


.plan-card-footer a {

  color: var(--brass);

  font-size: 8px;

  font-weight: 500;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}


.plan-card-footer a:hover {

  color: var(--brass-dark);

}


/* =========================================================
   NO RESULTS
   ========================================================= */

.no-results {

  padding:
    75px 25px;

  text-align: center;

  background:
    rgba(250, 247, 242, 0.7);

  border:
    1px solid
    rgba(168, 121, 42, 0.15);

}


.no-results h3 {

  margin:
    3px 0 8px;

  color: #49423a;

  font-family: var(--serif);

  font-size: 32px;

  font-weight: 500;

}


.no-results p:last-child {

  margin: 0;

  color: #6f675f;

  font-size: 9.5px;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1200px) {


  .style-browser {

    min-height: 360px;

    padding:
      130px
      48px
      38px;

  }


  .style-browser-art img {

    width: 63%;

  }


  .catalog-section {

    padding:
      32px
      42px
      65px;

  }


  .catalog-layout {

    grid-template-columns:
      225px
      minmax(0, 1fr);

    gap: 30px;

  }


  .plan-grid {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

  }


}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {


  .style-browser {

    min-height: 400px;

    padding:
      118px
      24px
      36px;

    align-items: flex-end;

  }


  .style-browser-art img {

    top: 0;

    width: 100%;
    height: 58%;

    opacity: 0.18;

  }


  .style-browser-art::after {

    background:
      linear-gradient(
        180deg,

        rgba(250, 247, 242, 0.10) 0%,

        rgba(250, 247, 242, 0.20) 24%,

        rgba(250, 247, 242, 0.80) 57%,

        rgba(250, 247, 242, 0.98) 78%,

        rgba(250, 247, 242, 1) 100%
      );

  }


  .style-browser-description {

    font-size: 10.5px;

  }


  .catalog-section {

    padding:
      28px
      20px
      50px;

  }


  .catalog-layout {

    grid-template-columns:
      1fr;

  }


  .filter-panel {

    position: static;

  }


  .results-toolbar {

    align-items: flex-start;

    flex-direction: column;

    gap: 15px;

  }


  .results-actions {

    width: 100%;

    justify-content: space-between;

  }


  .plan-grid {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

  }


}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 620px) {


  .style-browser {

    min-height: 425px;

    padding:
      110px
      20px
      30px;

  }


  .style-browser h1 {

    font-size: 32px;

  }


  .style-tabs {

    display: grid;

    grid-template-columns:
      repeat(2, 1fr);

  }


  .style-tab {

    width: 100%;

    padding:
      0 10px;

  }


  .results-actions {

    align-items: flex-start;

    flex-direction: column;

    gap: 10px;

  }


  .sort-control {

    width: 100%;

    justify-content: space-between;

  }


  .sort-control select {

    flex: 1;

  }


  .plan-grid {

    grid-template-columns:
      1fr;

  }


}