/* LQ Decor Image Control CSS Document */
/*Resets for Safari Fonts*/
html {
  font-size: 18px;
  overflow-y: scroll;
  -webkit-text-size-adjust: 18px;
  -ms-text-size-adjust: 18px; }

/* Variables for SD */
/* Basic Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

/*       body {
            font-family: sans-serif;
            background-color: #f4f4f9;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 20px;
        } */
/* Top Section: Image Windows */
.window-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  width: 100%;
  padding: 10px;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }

/* Wrapper for each window + label combo */
.window-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; }

@media (min-width: 768px) {
  .window-wrapper h3 {
    margin-bottom: 10px;
    color: #dkgray; }

  .image-window {
    width: 150px;
    height: 150px;
    border: 3px solid #dkgray;
    border-radius: 8px;
    background-color: #bab7b6;
    /* Fallback empty color */
    transition: transform 0.2s ease;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center; }

  .LQDecor-nav a {
    font-size: 1.25em; } }
@media (max-width: 767px) {
  .window-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 5px;
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }

  .window-wrapper h3 {
    font-size: 1em;
    margin-bottom: 5px;
    color: #dkgray; }

  .image-window {
    width: 50px;
    height: 150px;
    border: 3px solid #dkgray;
    border-radius: 8px;
    background-color: #bab7b6;
    /* Fallback empty color */
    transition: transform 0.2s ease;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center; }

  .LQDecor-nav a {
    font-size: .9em;
    padding: 3px 6px; }

  h2.collectionTitle {
    font-size: 1.5em; } }
.image-window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }

.finish-label {
  margin-top: 10px;
  font-size: 14px;
  color: #655f5d;
  font-weight: bold;
  text-align: center;
  min-height: 20px; }

.image-control-area {
  margin: 40px auto 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  max-width: 1000px;
  width: 100%; }

/* Filter Controls Styling */
.filter-controls {
  background: #fff;
  padding: 15px 25px;
  border-radius: 10px;
  border: 1px solid #bab7b6;
  display: flex;
  gap: 20px;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 800px;
  justify-content: space-between;
  /* Spreads out the filters and print button */ }

.filter-group {
  display: flex;
  gap: 15px;
  align-items: center; }

.filter-controls span {
  font-weight: bold;
  color: #655f5d; }

.filter-controls label {
  cursor: pointer;
  font-size: 14px;
  color: #655f5d;
  display: flex;
  align-items: center;
  gap: 5px; }

.groups-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  width: 100%; }

.button-group {
  background: #ffffff;
  padding: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px; }

.button-group h3 {
  font-size: 0.9rem;
  color: #655f5d;
  margin-bottom: 5px; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px; }

button.btn-Decor {
  padding: 8px 12px;
  cursor: pointer;
  margin-top: 30px;
  background-color: #aca6a4;
  border-color: #403b39;
  border-radius: 4px;
  transition: border-color 0.3s, box-shadow 0.3s; }

@media (min-width: 768px) {
  button.btn-Decor {
    min-width: 200px; } }
@media (max-width: 767px) {
  button.btn-Decor {
    min-width: none; } }
button.btn-Decor span {
  position: relative;
  top: -35px; }

button.btn-Decor:hover, button.btn-Decor:focus {
  background-color: #bab7b6;
  border-color: #655f5d;
  box-shadow: 0 0 0 0.1rem rgba(225, 83, 97, 0.6); }

button.btn-Decor:active {
  background-color: #bab7b6;
  border-color: #ef6223;
  box-shadow: 0 0 0 0.1rem rgba(225, 83, 97, 0.6); }

button.btn-print {
  padding: 8px 12px;
  cursor: pointer;
  color: #ffffff;
  background-color: #aca6a4;
  border-color: #655f5d;
  border-radius: 4px;
  transition: background 0.2s, transform 0.1s; }

button.btn-print:hover, button.btn-print:focus {
  color: #403b39;
  text-shadow: 0 0 0 0.3rem rgba(239, 98, 35, 0.8);
  background-color: #bab7b6;
  border-color: #ef6223; }

button.btn-print:active {
  color: #403b39;
  text-shadow: 0 0 0 0.3rem rgba(0, 0, 0, 0.5);
  background-color: #bab7b6;
  border-color: #aca6a4;
  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.8);
  transform: scale(0.95); }

/* Hide buttons when filtered out */
.hidden-btn {
  display: none !important; }

/* =========================================
   NEW: PRINT STYLES
   ========================================= */
@media print {
  /* Hide everything in the control area */
  .image-control-area, #displayCollections, .SD-metal-nav, .SD-dark-container, footer, #decorCTA {
    display: none !important; }

  /* Remove background colors and shadows for a clean paper print */
  body {
    background-color: white;
    padding-top: 0; }

  .window-container {
    box-shadow: none;
    padding: 0;
    gap: 20px; }

  /* Ensure windows don't get split awkwardly across page breaks */
  .window-wrapper {
    page-break-inside: avoid;
    break-inside: avoid; }

  .image-window {
    width: 150px;
    height: 150px; } }
/* ======================================
Decor Button Backgrounds
====================================== */
.hutchCashmere {
  background-image: url("../LQDecor/images/Thumbs/T-HutchCashmere.jpg");
  background-size: cover;
  color: #111110; }

.keystoneCashmere {
  background-image: url("../LQDecor/images/Thumbs/T-Keystone-Cashmere.jpg");
  background-size: cover;
  color: #111110; }

.verbanaSpalding {
  background-image: url("../LQDecor/images/Thumbs/T-VerbanaSpalding.jpg");
  background-size: cover;
  color: #111110; }

.hamptonGray {
  background-image: url("../LQDecor/images/Thumbs/T-HamptonGray.jpg");
  background-size: cover;
  color: #111110; }

.greyMemorial {
  background-image: url("../LQDecor/images/Thumbs/T-GreyMemorial.jpg");
  background-size: cover;
  color: #111110; }

.cherry {
  background-image: url("../LQDecor/images/Thumbs/T-Cherry.jpg");
  background-size: cover;
  color: #111110; }

.liteMaple {
  background-image: url("../LQDecor/images/Thumbs/T-Lite-Maple.jpg");
  background-size: cover;
  color: #111110; }

.maxTeak {
  background-image: url("../LQDecor/images/Thumbs/T-Max-teak.jpg");
  background-size: cover;
  color: #111110; }

.harmonyRussett {
  background-image: url("../LQDecor/images/Thumbs/T-Harmony-Russet.jpg");
  background-size: cover;
  color: #111110; }

.hickory {
  background-image: url("../LQDecor/images/Thumbs/T-Hickory.jpg");
  background-size: cover;
  color: #111110; }

.embark {
  background-image: url("../LQDecor/images/Thumbs/T-EmbarkHickory.jpg");
  background-size: cover;
  color: #111110; }

.cappucino {
  background-image: url("../LQDecor/images/Thumbs/T-Cappucino.jpg");
  background-size: cover;
  color: #111110; }

.whiteAlder {
  background-image: url("../LQDecor/images/Thumbs/T-Simply-White-Alder.jpg");
  background-size: cover;
  color: #111110; }

.americanAlder {
  background-image: url("../LQDecor/images/Thumbs/T-AlderEarlyAmerican.jpg");
  background-size: cover;
  color: #111110; }

.englishAlder {
  background-image: url("../LQDecor/images/Thumbs/T-AlderEnglishChestnut.jpg");
  background-size: cover;
  color: #111110; }

.provincialAlder {
  background-image: url("../LQDecor/images/Thumbs/T-AlderProvincial.jpg");
  background-size: cover;
  color: #111110; }

.sWalnutAlder {
  background-image: url("../LQDecor/images/Thumbs/T-Alder-special-walnut-light.jpg");
  background-size: cover;
  color: #111110; }

.dWalnutAlder {
  background-image: url("../LQDecor/images/Thumbs/T-AlderDarkWalnut.jpg");
  background-size: cover;
  color: #111110; }

.eAmericanOak {
  background-image: url("../LQDecor/images/Thumbs/T-OakEarlyAmerican.jpg");
  background-size: cover;
  color: #111110; }

.englishOak {
  background-image: url("../LQDecor/images/Thumbs/T-OakEnglishChestnut.jpg");
  background-size: cover;
  color: #111110; }

.provincialOak {
  background-image: url("../LQDecor/images/Thumbs/T-Oak-Provincial.jpg");
  background-size: cover;
  color: #111110; }

.sWalnutOak {
  background-image: url("../LQDecor/images/Thumbs/T-OakSpecialWalnut.jpg");
  background-size: cover;
  color: #111110; }

.dWalnutOak {
  background-image: url("../LQDecor/images/Thumbs/T-OakDarkWalnut.jpg");
  background-size: cover;
  color: #111110; }

.americanMaple {
  background-image: url("../LQDecor/images/Thumbs/T-MapleEarlyAmerican.jpg");
  background-size: cover;
  color: #111110; }

.provincialMaple {
  background-image: url("../LQDecor/images/Thumbs/T-MapleProvincial.jpg");
  background-size: cover;
  color: #111110; }

.englishMaple {
  background-image: url("../LQDecor/images/Thumbs/T-MapleEnglishChestnut.jpg");
  background-size: cover;
  color: #111110;
  width: 200px; }

.dWalnutMaple {
  background-image: url("../LQDecor/images/Thumbs/T-MapleDarkWalnut.jpg");
  background-size: cover;
  color: #111110; }

.cascade {
  background-image: url("../LQDecor/images/Thumbs/T-White-Cascade.jpg");
  background-size: cover;
  color: #111110; }

.royale {
  background-image: url("../LQDecor/images/Thumbs/T-Taj-Royale.jpg");
  background-size: cover;
  color: #111110; }

.bosco {
  background-image: url("../LQDecor/images/Thumbs/T-Roco-Bosco.jpg");
  background-size: cover;
  color: #111110; }

.bordeaux {
  background-image: url("../LQDecor/images/Thumbs/T-Bordeaux-Juparana.jpg");
  background-size: cover;
  color: #111110; }

.desert {
  background-image: url("../LQDecor/images/Thumbs/T-Desert-Springs.jpg");
  background-size: cover;
  color: #111110; }

.dolce {
  background-image: url("../LQDecor/images/Thumbs/T-Dolce-Vito.jpg");
  background-size: cover;
  color: #111110; }

.soapstone {
  background-image: url("../LQDecor/images/Thumbs/T-Pearl-Soapstone.jpg");
  background-size: cover;
  color: #111110; }

.phantom {
  background-image: url("../LQDecor/images/Thumbs/T-Phantom-Pearl.jpg");
  background-size: cover;
  color: #111110; }

.sedona {
  background-image: url("../LQDecor/images/Thumbs/T-Sedona-Trail.jpg");
  background-size: cover;
  color: #111110; }

.carnival {
  background-image: url("../LQDecor/images/Thumbs/T-Summer-Carnival.jpg");
  background-size: cover;
  color: #111110; }

.magnata {
  background-image: url("../LQDecor/images/Thumbs/T-Magnata.jpg");
  background-size: cover;
  color: #111110; }

.trinidad {
  background-image: url("../LQDecor/images/Thumbs/T-Trinidad-Lapidus.jpg");
  background-size: cover;
  color: #111110; }

.fumedOak {
  background-image: url("../LQDecor/images/Thumbs/T-Fumed-Oak.jpg");
  background-size: cover;
  color: #111110; }

.scrubHickory {
  background-image: url("../LQDecor/images/Thumbs/T-Scrub-Hickory.jpg");
  background-size: cover;
  color: #111110; }

.heartwood {
  background-image: url("../LQDecor/images/Thumbs/T-Heartwood.jpg");
  background-size: cover;
  color: #111110; }

.limeOak {
  background-image: url("../LQDecor/images/Thumbs/T-Lime-Oak.jpg");
  background-size: cover;
  color: #111110; }

.patio {
  background-image: url("../LQDecor/images/Thumbs/T-Patio.jpg");
  background-size: cover;
  color: #111110; }

.parma {
  background-image: url("../LQDecor/images/Thumbs/T-Parma.jpg");
  background-size: cover;
  color: #111110; }

.wroughtIron {
  background-image: url("../LQDecor/images/Thumbs/T-Wrought-Iron.jpg");
  background-size: cover;
  color: #111110; }

.greystone {
  background-image: url("../LQDecor/images/Thumbs/T-Greystone-Dune.jpg");
  background-size: cover;
  color: #111110; }

.canyon {
  background-image: url("../LQDecor/images/Thumbs/T-Atessa-Canyon.jpg");
  background-size: cover;
  color: #111110; }

.sumatra {
  background-image: url("../LQDecor/images/Thumbs/T-Switchbacksumatra.jpg");
  background-size: cover;
  color: #111110; }

.copper {
  background-image: url("../LQDecor/images/Thumbs/T-Atessa-Copper.jpg");
  background-size: cover;
  color: #111110; }

.oxfordTan {
  background-image: url("../LQDecor/images/Thumbs/T-OxfordTan.jpg");
  background-size: cover;
  color: #111110; }

.tovar {
  background-image: url("../LQDecor/images/Thumbs/T-Tovar-Cafe.jpg");
  background-size: cover;
  color: #111110; }

.eloise {
  background-image: url("../LQDecor/images/Thumbs/T-Eloise_Seal.jpg");
  background-size: cover;
  color: #111110; }

.stout {
  background-image: url("../LQDecor/images/Thumbs/T-StoutSeal.jpg");
  background-size: cover;
  color: #111110; }

.driftwood {
  background-image: url("../LQDecor/images/Thumbs/T-SwitchbackDriftwood.jpg");
  background-size: cover;
  color: #111110; }

.latte {
  background-image: url("../LQDecor/images/Thumbs/T-GalardiaLatte.jpg");
  background-size: cover;
  color: #111110; }

.reptile {
  background-image: url("../LQDecor/images/Thumbs/T-ReptileSaddle.jpg");
  background-size: cover;
  color: #111110; }

/* ++++++++++++++++++++++++++++++++++++++++++
   MEDIA STYLE TEMPLATES

@media (min-width: 768px) {
.class {
	item:setting;
}
}


@media (max-width: 767px) {
.class {
	item:setting;
}
}

   ++++++++++++++++++++++++++++++++++++++++++ */