@font-face {
  font-family: "PPNeueMontreal-Medium";
  src: url("PPNeueMontreal-Medium.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}



:root {
  --mob-1: 9vw;       
  --dt-1: 8vw;    
  --mob-2: 6.2vw;       
  --dt-2: 5vw;    
  --mob-3: 4.8vw;    
    --mob-4a: 4.1vw;      
  --mob-4: 3.4vw;    
  --mob-5: 2.4vw;       
  --dt-3: 2vw;    
  --dt-4: 1.7vw;       
  --dt-5: 1.4vw;    




/* Existing */
--accord-fruity: #F59E0B;        /* orange */
--accord-citrus: #FCD34D;        /* yellow */
--accord-fresh: #60A5FA;         /* light blue */
--accord-aquatic: #38BDF8;       /* cyan */
--accord-aromatic: #34D399;      /* green */
--accord-floral-green: #6EE7B7;
--accord-green: #22C55E;         /* green */
--accord-woody: #A16207;         /* brown */
--accord-smoky: #6B7280;         /* gray */
--accord-leather: #7C2D12;       /* deep brown */
--accord-amber: #F97316;         /* amber-orange */
--accord-saffron: #F4B400;       /* saffron gold */
--accord-vanilla: #FDE68A;       /* vanilla cream */
--accord-sweet: #FB7185;         /* pink */
--accord-tobacco-honey: #B45309; /* honeyed tobacco */
--accord-floral: #F472B6;        /* magenta-pink */
--accord-white-floral: #F9A8D4;  /* pale pink */
--accord-spicy: #EF4444;         /* red */
--accord-warm-spicy: #DC2626;    /* deep red */
--accord-fresh-spicy: #FB923C;   /* orange-red */
--accord-earthy: #78716C;        /* stone */
--accord-mineral: #94A3B8;       /* slate */
--accord-musky: #A78BFA;         /* purple */
--accord-tobacco: #92400E;       /* dark amber-brown */

/* Added (missing from your dataset) */
--accord-aldehydic: #E5E7EB;      /* airy silver */
--accord-almond: #FBCFE8;         /* soft almond-pink */
--accord-animalic: #4B5563;       /* deep gray */
--accord-boozy: #7C3AED;          /* rich violet */
--accord-creamy: #FEF3C7;         /* creamy custard */
--accord-dark-floral: #BE185D;    /* deep magenta */
--accord-gourmand: #EC4899;       /* candy pink */
--accord-iris: #C4B5FD;           /* iris lavender */
--accord-oud: #3F2A1D;            /* dark resin wood */
--accord-powdery: #E9D5FF;        /* powder lilac */
--accord-resinous: #B45309;       /* resin/amber (pairs well w tobacco-honey) */
--accord-rose: #F43F5E;           /* rose red */
--accord-smooth-spicy: #F97316;   /* smooth spice (ties to amber-orange) */
--accord-solar: #FDBA74;          /* warm sun peach */
--accord-soapy: #BAE6FD;          /* clean sky */
--accord-tea: #84CC16;            /* green tea leaf */
--accord-tropical: #34D399;       /* tropical green (works w aromatic) */
--accord-vetiver: #166534;        /* deep vetiver green */
--accord-violet: #8B5CF6;         /* violet purple */

  /* fallback */
  --accord-default: #9CA3AF;
}
 
 * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
  font-family: "PPNeueMontreal-Medium";
      background: #fff; /* overall pink background */
      color: #111;
    }



    .wrap {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
}

	a {
		color: inherit;
		text-decoration: none;
	}

    .page {
      display: grid;
      /* grid-template-columns: 1fr 1fr 1fr 1fr;
          grid-template-rows: 1fr 1fr 1fr 1fr; */
      min-height: 100vh;
    }



.navbar-wrapper {
  position: relative;
  height: 35px;
  width: 96%;
  /* max-width: 800px; */
  margin: 20px auto 0;
  display: flex;
  gap: 8px;
  align-items: stretch;
  /* max-width: 600px; */
}

.navleftlist {
  display: none;
  position: absolute;
  top: 10px;
  left: 0;
  font-size: 15px;
}

  @media (min-width: 990px) {
	.navleftlist {
    display: block;
	}
}

.navleftlist li {
  display: inline;
  margin-right: 1vw;
}

.navleftlist li a {
  color: black;
}

/* Logo card block on the left */
.nav-logo-card {
      /* background: #d6d6d6; */
      
  padding: 12px 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  /* box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); */
}

.nav-logo {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  font-family: "PPNeueMontreal-Medium";
  font-size: 20px;
}

@media (min-width: 990px) {
.nav-logo {
  font-size: 27px;
}
}





.secNavBurger {
  /* background: green; */
  display: block;
  border: 0;
  border-radius: 0;
  position: absolute;
  top: 8px;
  height: 13px;
  width: 40px;
  left: 20px;
  font-size: 40px;
  z-index: 3;
  padding: 20px;
}
@media only screen and (min-width: 990px) {
  .secNavBurger {
    display: none;
  }
}


.secNavBurger:hover {
	cursor: pointer;
}


.secNavBurger .navtopdiv {
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  height: 3px;
  padding: 0;
  background: #000;
}

.secNavBurger .navbotdiv {
  position: absolute;
  bottom: 24px;
  left: 0;
  width: 100%;
  height: 3px;
  padding: 0;
  background: #000;
}


#modalOverlay {
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(132, 132, 132, 0.8);
	text-align: center;
	overflow-y: scroll;
	z-index: 50;
	cursor: pointer;
	opacity: 0;
  }

.nav-container-off-screen {
	position: fixed;
	right: -100%;
	top: 0;
	width: 80%;
	height: 100%;
	z-index: 99;
  background: #1a1818;
	/* color: white; */
	margin: 0;
	padding: 0;	
}

.nav-container-flex-wrap {
	position: relative;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	right: 20px;
	height: 100%;
	width: 100%;
  
}

.nav-container-centered-vertical {
	position: absolute;
	top: 10vh;
  /* transform: translateY(-50%); */
	left: 15%;
  width: 100%;
}


.nav-close {
	position: absolute;
	top: 13px !important;
	right: 22px !important;
	text-align: right;
	padding: 12px;
  /* background: green; */
	height: 10vw;
  width: 10vw;
	cursor: pointer;
	/* color: #a7a7a7; */
  font-size: var(--mob-2);
	z-index: 59;
  color: #f1f1f1;
}


.nav-container-centered-vertical ul {
	list-style: none;
}

.nav-container-centered-vertical li {
	text-align: left;
	padding: .6vh 5px;
	font-size: var(--mob-2);
	color: #f1f1f1;
}


.contactnavblock {
  margin-top: 20vh;
  background: red;
  width: 100%;
}

.contactinfodiv {
  height: 20vh;
  width: 100%;
}

.contactnavdivone {
  height: 100%;
  background: blue;
  width: 50%;
}




/* RIGHT */
.nav-right {
  position: absolute;
top: 10px;
right: 0;
  gap: 14px;
  font-size: 15px;
}

.nav-right ul {
  display: flex;
  align-items: center;
  gap: 1.5rem; /* space between About and auth */
  list-style: none;
  margin: 0;
  padding: 0;
}

.navabout {
  display: none;
}


@media (min-width: 990px) {
.navabout {
  display: block;
}
}


.nav-right li {
  display: flex;
  align-items: center;
}

.nav-auth {
  border-radius: 20px;
  /* padding: 10px 20px; */
  color: blue;
  font-size: 12px;
  border: none;
  cursor: pointer;
}

@media (min-width: 990px) {

.nav-auth {
  font-size: 15px;
}
}





.tophomeblock {
  position: relative;
  height: 36vw;
  width: 100%;
}

@media (min-width: 990px) {
.tophomeblock  {
  height: 35vh;
}
}

.bighomecont {
  padding: 0 20px;
}




/* Search box */
.filter-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 10px;
  background: #f0f0f0;          /* darker */
  padding: 12px 18px;
  border-radius: 20px;
  background: #f0f0f0;
  border: 1px solid #cfcfcf;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05),
              inset 0 1px 2px rgba(255,255,255,0.5);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  max-width: 580px;
  flex: 1;
}

@media (min-width: 990px) {
.filter-search {
  margin-bottom: 20px;
}
}

.filter-search:focus-within {
  border-color: #c9c9c9;
  background: #e9e9e9;
}

.search-icon {
  opacity: 0.55;
  font-size: 17px;
}

.filter-search-input {
  border: none;
  outline: none;
  font-size: 15px;
  flex: 1;
  background: transparent;
}
/* ROW styling */
.filter-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  white-space: nowrap;
  padding: 5px 0;
  scrollbar-width: none;
}

.filter-row::-webkit-scrollbar {
  display: none;
}

/* Pill buttons */
/* --------------------------- */
/* BASE PILL STYLE (non-All)  */
/* --------------------------- */


.pill {
  padding: 6px 11px;
  background: #f3f3f3;         /* normal pill color */
  border: 1px solid #e5e5e5;
  color: black;
  border-radius: 30px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border 0.2s ease;
}

@media (min-width: 990px) {
.pill {
  padding: 10px 18px;
}
}


.pill:hover {
  background: #eaeaea;
}

/* “ALL” BUTTONS ALWAYS WHITE (even when active) */
.pill[data-house="all"],
.pill[data-note="all"] {
  background: #ffffff;
  border-color: #e5e5e5;
}

/* HOUSE ACTIVE = PURPLE (except All) */
.pill.filter-btn-house.active:not([data-house="all"]) {
  background: #8b5cf6;
  color: #fff;
  border-color: #8b5cf6;
}

/* NOTE ACTIVE = YELLOW (except All) */
.pill.filter-btn-note.active:not([data-note="all"]) {
  background: #facc15;
  color: #000;
  border-color: #facc15;
}
    /* ───────────────────────────────────────────────
       MAIN GRID
    ─────────────────────────────────────────────── */


/* Wrapper */
.sort-dropdown {
  display: inline-block;
  position: relative;
  margin-top: 5px;
  margin-bottom: 3vw;
}

@media (min-width: 990px) {
  .sort-dropdown {
    margin-top: 10px;
    margin-bottom: 0;
  }
}

/* Make the select look like the pills */
.sort-dropdown select {
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  display: inline-block;
  width: auto;
  padding: 7px 28px 7px 14px;

  background: #f3f3f3;
  border: 1px solid #e5e5e5;
  border-radius: 999px;

  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  transition: background 0.2s ease, border 0.2s ease;
}

.sort-dropdown select:hover {
  background: #eaeaea;
}

/* Custom arrow */
.sort-dropdown::after {
  content: "▾";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-size: 12px;
  opacity: 0.6;
  pointer-events: none;
}

/* Keep text color explicit */
#sortSelect {
  color: black;
}

.divider {
  opacity: 0.3;
}

    .grid-wrapper {
      /* background: #ffe3eb; */
      /* padding: 20px 32px; */
    }

    .cards-grid {
		margin-top: 2vw;
      display: grid;
        grid-template-columns: 1fr;
      gap: 1.5vw;
    }

        @media (min-width: 990px) {
      .cards-grid {
              grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }


    .cards-grid a {
      position: relative;
    }

    .card {
      /* background: #ffffff; */
      border-radius: 6px;
      margin-bottom: 4vw;
      /* padding: 10px; */
      /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06); */
      display: flex;
      flex-direction: column;
	  text-align: left;
      gap: 6px;
	  color: black;
    }


      @media (min-width: 990px) {
	.card {
    margin-bottom: 1vw;
    
  
	}
}

    /* .card:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
    } */

    .card-block {
      border-radius: 4px;
      height: auto;
	  display: flex;
	  justify-content: center;
	  align-items: center;
    }

	.card-block img {
		max-height: 100%;
		max-width: 100%;
	}

    /* Color blocks acting as image placeholders */
    .block-1 { background: #151820; }
    .block-2 { background: #dde1e7; }
    .block-3 { background: #15c68a; }
    .block-4 { background: #f1b230; }
    .block-5 { background: #f36b7f; }
    .block-6 { background: #5664ff; }
    .block-7 { background: #000000; }
    .block-8 { background: #e8e8e8; }
    .block-9 { background: #f45b39; }
    .block-10 { background: #0d8cb8; }
    .block-11 { background: #7940ff; }
    .block-12 { background: #222222; }

	.card-house {
    display: block;
		margin-top: 2vw;
                  font-size: var(--mob-4);
      color: gray;
  
	}

  @media (min-width: 990px) {
	.card-house {
    margin-top: 10px;
      font-size: var(--dt-5);
    
  
	}
}

    .card-title {
		margin-top: 1vw;
      font-size: var(--mob-3);
      font-weight: 500;
    }
@media (min-width: 990px) {
    .card-title {
      margin-top: 5px;
      font-size: var(--dt-4);
    }
}

    .card-rating {
		margin-top: 1.3vw;
      font-size: var(--mob-5);
      font-weight: 500;
    }
@media (min-width: 990px) {
    .card-rating {
      margin-top: 5px;
      font-size: var(--dt-5);
    }
}

    


    /* .homenotes {
      font-style: italic;
      text-transform: capitalize;
    } */

    .card-meta {
		margin-top: 8px;
      font-size: 12px;
      color: #7d7d7d;
    }

    .card.hidden {
      display: none;
    }











    .fragmaincont {
      width: 90%;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 50% 50%;
      grid-template-rows: auto auto;
      grid-template-areas: 
      "fragnavblocks fragnavblocks"
      "fragtopblock fragtopblock"
      "fraglefttop fraglefttop"
      "fragimagecont fragimagecont"
      "accordscont accordscont"
      "infocont infocont"
      "fragratingscont fragratingscont"
      "fragleftreview fragleftreview";
    }


    .fragnavblocks {
      grid-area: fragnavblocks;
      position: relative;
      width: 100%;
    }

    .fragnavblocks ul {
      margin: 4vw auto 0;
      text-align: center;
    }

    .fragnavblocks ul li {
      display: inline;
      padding: 5px 12px;
      margin: 0 .4vw;
      border: 1px solid gray;
      border-radius: 10px;
      background: rgb(238, 238, 238);
    }

    /* .fragnavblocks ul li a {
            color: white;
    } */

  


    .fragtopblock {
      height: calc(30px + 4vw);
      width: 100%;
    }

    @media (min-width: 990px) {
.fragtopblock  {
      height: 80px;
}
}

    .fraglefttop {
      position: relative;
      grid-area: fraglefttop;
      width: calc(100% - 40px);
      margin-left: 20px;
      text-align: center;
    }

    .fragleftblock {
      position: relative;

    }


            .fraghouse {
                  font-size: var(--mob-4);
    }

            @media (min-width: 990px) {
            .fraghouse {
       font-size: var(--dt-5);
    }
}

    .fraghouse a {
              padding: .4vw 1vw;
              margin: 0 .2vw;
              border: 1px solid #cbcbcb;
              border-radius: 10px;
              /* background: #e8e8e8; */
    }


    .fragtitle {
      margin: 0 auto;
      margin-top: 5vw;
      font-size: var(--mob-1);
      font-weight: 700;
      width: 90%;
  text-transform: uppercase;
    }

        @media (min-width: 990px) {
.fragtitle  {
        margin-top: 3vw;
      font-size: var(--dt-1);
}
}


    .rating {
      margin-top: 3vw;
          color: #555;
                  font-size: var(--mob-4);
    }

            @media (min-width: 990px) {
    .rating {
            margin-top: 1.5vw;
      font-size: var(--dt-5);
    }
}


        .fragimagecont {
      grid-area: fragimagecont;
      position: relative;
      margin-top: 8vw;
    }

                @media (min-width: 990px) {

        .fragimagecont {
      margin-top: 7vw;
    }
}



.fragimage {
  width: 100%;
  height: auto;      /* REQUIRED for cover to work */
  overflow: hidden;
}

.fragimage img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 🔑 this is the magic */
  display: block;
}



    .accordscont {
      grid-area: accordscont;
      margin-top: 16vw;
    }

        @media (min-width: 990px) {
.accordscont {
  margin-top: 9.5vw;
}
}




/* Existing */
.accord--fruity { background-color: var(--accord-fruity); }
.accord--citrus { background-color: var(--accord-citrus); }
.accord--fresh { background-color: var(--accord-fresh); }
.accord--aquatic { background-color: var(--accord-aquatic); }
.accord--aromatic { background-color: var(--accord-aromatic); }
.accord--floral-green { background-color: var(--accord-floral-green); }
.accord--green { background-color: var(--accord-green); }
.accord--woody { background-color: var(--accord-woody); }
.accord--smoky { background-color: var(--accord-smoky); }
.accord--leather { background-color: var(--accord-leather); }
.accord--amber { background-color: var(--accord-amber); }
.accord--saffron { background-color: var(--accord-saffron); }
.accord--vanilla { background-color: var(--accord-vanilla); }
.accord--sweet { background-color: var(--accord-sweet); }
.accord--tobacco-honey { background-color: var(--accord-tobacco-honey); }
.accord--floral { background-color: var(--accord-floral); }
.accord--white-floral { background-color: var(--accord-white-floral); }
.accord--spicy { background-color: var(--accord-spicy); }
.accord--warm-spicy { background-color: var(--accord-warm-spicy); }
.accord--fresh-spicy { background-color: var(--accord-fresh-spicy); }
.accord--earthy { background-color: var(--accord-earthy); }
.accord--mineral { background-color: var(--accord-mineral); }
.accord--musky { background-color: var(--accord-musky); }
.accord--tobacco { background-color: var(--accord-tobacco); }

/* Added – missing accords */
.accord--aldehydic { background-color: var(--accord-aldehydic); }
.accord--almond { background-color: var(--accord-almond); }
.accord--animalic { background-color: var(--accord-animalic); }
.accord--boozy { background-color: var(--accord-boozy); }
.accord--creamy { background-color: var(--accord-creamy); }
.accord--dark-floral { background-color: var(--accord-dark-floral); }
.accord--gourmand { background-color: var(--accord-gourmand); }
.accord--iris { background-color: var(--accord-iris); }
.accord--oud { background-color: var(--accord-oud); }
.accord--powdery { background-color: var(--accord-powdery); }
.accord--resinous { background-color: var(--accord-resinous); }
.accord--rose { background-color: var(--accord-rose); }
.accord--smooth-spicy { background-color: var(--accord-smooth-spicy); }
.accord--solar { background-color: var(--accord-solar); }
.accord--soapy { background-color: var(--accord-soapy); }
.accord--tea { background-color: var(--accord-tea); }
.accord--tropical { background-color: var(--accord-tropical); }
.accord--vetiver { background-color: var(--accord-vetiver); }
.accord--violet { background-color: var(--accord-violet); }



/* Container */
.bubble-pack {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  gap: 1vw;
}

/* Bubble base */
.bubble {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;

  display: grid;
  place-items: center;

  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14);
}

.bubble-pack{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap: 1vw;
}

/* invisible line break item */
.bubble-break{
  display:none;
  width:100%;
  height:0;
  padding:0;
  margin:0;
}

/* show the break below 990px so it forces a new row after 2 items */
@media (max-width: 989px){
  .bubble-break{ display:block; }
}


  .bubble-pack {
    max-width: 94vw;
  }


 .bubble.p-50 { width: 71.28vw; }     /* 49.5 × 1.44 */
  .bubble.p-45 { width: 67.716vw; }    /* 47.025 × 1.44 */
  .bubble.p-40 { width: 64.152vw; }    /* 44.55 × 1.44 */
  .bubble.p-35 { width: 57.024vw; }    /* 39.6 × 1.44 */
  .bubble.p-30 { width: 49.896vw; }    /* 34.65 × 1.44 */
  .bubble.p-25 { width: 42.768vw; }    /* 29.7 × 1.44 */
  .bubble.p-20 { width: 39.204vw; }    /* 27.225 × 1.44 */
  .bubble.p-18 { width: 37.7784vw; }   /* 26.235 × 1.44 */
  .bubble.p-15 { width: 35.64vw; }     /* 24.75 × 1.44 */
  .bubble.p-12 { width: 33.264vw; }    /* 23.1 × 1.44 */
  .bubble.p-10 { width: 32.076vw; }    /* 22.275 × 1.44 */
  .bubble.p-8  { width: 30.456vw; }    /* 21.15 × 1.44 */
  .bubble.p-7  { width: 29.376vw; }    /* 20.4 × 1.44 */
  .bubble.p-5  { width: 27.828vw; }    /* 19.35 × 1.44 */

@media (min-width: 990px) {
  .bubble.p-50 { width: 49.5vw; }
  .bubble.p-45 { width: 47.025vw; }
  .bubble.p-40 { width: 44.55vw; }
  .bubble.p-35 { width: 39.6vw; }
  .bubble.p-30 { width: 34.65vw; }
  .bubble.p-25 { width: 29.7vw; }
  .bubble.p-20 { width: 27.225vw; }
  .bubble.p-18 { width: 26.235vw; }
  .bubble.p-15 { width: 24.75vw; }
  .bubble.p-12 { width: 23.1vw; }
  .bubble.p-10 { width: 22.275vw; }
  .bubble.p-8  { width: 21.15vw; }
  .bubble.p-7  { width: 20.4vw; }
  .bubble.p-5  { width: 19.35vw; }
}



.bubble-inner {
  text-align: center;
  color: rgba(0, 0, 0, 0.7);
  text-transform: capitalize;
}



/* 50% */
  .bubble.p-50 .bubble-name  { font-size: 6.80vw; } /* 5.04 × 1.35 */
  .bubble.p-50 .bubble-pct   { font-size: 5.35vw; } /* 3.30 × 1.62 */
  .bubble.p-50 .bubble-notes { font-size: 4.49vw; } /* 2.77 × 1.62 */

  /* 45% */
  .bubble.p-45 .bubble-name  { font-size: 6.48vw; }
  .bubble.p-45 .bubble-pct   { font-size: 5.11vw; } /* 3.15 × 1.62 */
  .bubble.p-45 .bubble-notes { font-size: 4.29vw; }

  /* 40% */
  .bubble.p-40 .bubble-name  { font-size: 6.16vw; }
  .bubble.p-40 .bubble-pct   { font-size: 4.86vw; } /* 3.00 × 1.62 */
  .bubble.p-40 .bubble-notes { font-size: 4.08vw; }

  /* 35% */
  .bubble.p-35 .bubble-name  { font-size: 5.67vw; }
  .bubble.p-35 .bubble-pct   { font-size: 4.50vw; } /* 2.78 × 1.62 */
  .bubble.p-35 .bubble-notes { font-size: 3.79vw; }

  /* 30% */
  .bubble.p-30 .bubble-name  { font-size: 5.18vw; }
  .bubble.p-30 .bubble-pct   { font-size: 4.13vw; } /* 2.55 × 1.62 */
  .bubble.p-30 .bubble-notes { font-size: 3.48vw; }

  /* 25% */
  .bubble.p-25 .bubble-name  { font-size: 4.70vw; }
  .bubble.p-25 .bubble-pct   { font-size: 3.77vw; } /* 2.33 × 1.62 */
  .bubble.p-25 .bubble-notes { font-size: 3.18vw; }

  /* 20% */
  .bubble.p-20 .bubble-name  { font-size: 4.21vw; }
  .bubble.p-20 .bubble-pct   { font-size: 3.40vw; } /* 2.10 × 1.62 */
  .bubble.p-20 .bubble-notes { font-size: 2.85vw; }

  /* 18% */
  .bubble.p-18 .bubble-name  { font-size: 4.02vw; }
  .bubble.p-18 .bubble-pct   { font-size: 3.24vw; } /* 2.00 × 1.62 */
  .bubble.p-18 .bubble-notes { font-size: 2.72vw; }

  /* 15% */
  .bubble.p-15 .bubble-name  { font-size: 3.73vw; }
  .bubble.p-15 .bubble-pct   { font-size: 3.05vw; } /* 1.88 × 1.62 */
  .bubble.p-15 .bubble-notes { font-size: 2.56vw; }

  /* 12% */
  .bubble.p-12 .bubble-name  { font-size: 3.51vw; }
  .bubble.p-12 .bubble-pct   { font-size: 2.88vw; } /* 1.78 × 1.62 */
  .bubble.p-12 .bubble-notes { font-size: 2.43vw; }

  /* 10% */
  .bubble.p-10 .bubble-name  { font-size: 3.24vw; }
  .bubble.p-10 .bubble-pct   { font-size: 2.55vw; } /* 1.65 × 1.62 */
  .bubble.p-10 .bubble-notes { font-size: 2.25vw; }

  /* 8% */
  .bubble.p-8 .bubble-name  { font-size: 3.02vw; }
  .bubble.p-8 .bubble-pct   { font-size: 2.51vw; } /* 1.55 × 1.62 */
  .bubble.p-8 .bubble-notes { font-size: 2.12vw; }

  /* 7% */
  .bubble.p-7 .bubble-name  { font-size: 2.86vw; }
  .bubble.p-7 .bubble-pct   { font-size: 2.40vw; } /* 1.48 × 1.62 */
  .bubble.p-7 .bubble-notes { font-size: 2.03vw; }

  /* 5% */
  .bubble.p-5 .bubble-name  { font-size: 2.59vw; }
  .bubble.p-5 .bubble-pct   { font-size: 2.18vw; } /* 1.35 × 1.62 */
  .bubble.p-5 .bubble-notes { font-size: 1.85vw; }



  @media (min-width: 990px) {

/* 50% */
.bubble.p-50 .bubble-name  { font-size: 5.04vw; } /* 6.3 × 0.8 */
.bubble.p-50 .bubble-pct   { font-size: 3.3vw; }
.bubble.p-50 .bubble-notes { font-size: 2.77vw; } /* 2.31 × 1.2 */

/* 45% */
.bubble.p-45 .bubble-name  { font-size: 4.8vw; }
.bubble.p-45 .bubble-pct   { font-size: 3.15vw; }
.bubble.p-45 .bubble-notes { font-size: 2.65vw; }

/* 40% */
.bubble.p-40 .bubble-name  { font-size: 4.56vw; }
.bubble.p-40 .bubble-pct   { font-size: 3.0vw; }
.bubble.p-40 .bubble-notes { font-size: 2.52vw; }

/* 35% */
.bubble.p-35 .bubble-name  { font-size: 4.2vw; }
.bubble.p-35 .bubble-pct   { font-size: 2.78vw; }
.bubble.p-35 .bubble-notes { font-size: 2.34vw; }

/* 30% */
.bubble.p-30 .bubble-name  { font-size: 3.84vw; }
.bubble.p-30 .bubble-pct   { font-size: 2.55vw; }
.bubble.p-30 .bubble-notes { font-size: 2.15vw; }

/* 25% */
.bubble.p-25 .bubble-name  { font-size: 3.48vw; }
.bubble.p-25 .bubble-pct   { font-size: 2.33vw; }
.bubble.p-25 .bubble-notes { font-size: 1.96vw; }

/* 20% */
.bubble.p-20 .bubble-name  { font-size: 3.12vw; }
.bubble.p-20 .bubble-pct   { font-size: 2.1vw; }
.bubble.p-20 .bubble-notes { font-size: 1.76vw; }

/* 18% */
.bubble.p-18 .bubble-name  { font-size: 2.98vw; }
.bubble.p-18 .bubble-pct   { font-size: 2.0vw; }
.bubble.p-18 .bubble-notes { font-size: 1.68vw; }

/* 15% */
.bubble.p-15 .bubble-name  { font-size: 2.76vw; }
.bubble.p-15 .bubble-pct   { font-size: 1.88vw; }
.bubble.p-15 .bubble-notes { font-size: 1.58vw; }

/* 12% */
.bubble.p-12 .bubble-name  { font-size: 2.6vw; }
.bubble.p-12 .bubble-pct   { font-size: 1.78vw; }
.bubble.p-12 .bubble-notes { font-size: 1.5vw; }

/* 10% */
.bubble.p-10 .bubble-name  { font-size: 2.4vw; }
.bubble.p-10 .bubble-pct   { font-size: 1.65vw; }
.bubble.p-10 .bubble-notes { font-size: 1.39vw; }

/* 8% */
.bubble.p-8 .bubble-name  { font-size: 2.24vw; }
.bubble.p-8 .bubble-pct   { font-size: 1.55vw; }
.bubble.p-8 .bubble-notes { font-size: 1.31vw; }

/* 7% */
.bubble.p-7 .bubble-name  { font-size: 2.12vw; }
.bubble.p-7 .bubble-pct   { font-size: 1.48vw; }
.bubble.p-7 .bubble-notes { font-size: 1.25vw; }

/* 5% */
.bubble.p-5 .bubble-name  { font-size: 1.92vw; }
.bubble.p-5 .bubble-pct   { font-size: 1.35vw; }
.bubble.p-5 .bubble-notes { font-size: 1.14vw; }
  }


.bubble-name {
  font-weight: 700;
}

.bubble-pct {
  margin-top: 3px;
}

.bubble-notes {
  margin-top: 5px;
}
        .infocont {
      grid-area: infocont;
      margin-top: 16vw;
    }

        @media (min-width: 990px) {
        .infocont {
      margin-top: 9.5vw;
    }
}


/* ===== Notes layout (centered), label right, values left ===== */



.notes-grid{
  display: grid;
  margin: 0 auto;
  /* ONE grid => consistent column widths for every row */
grid-template-columns: 1fr;
  column-gap: 3vw;
  row-gap: 2vw;
  width: 80vw;
  /* center the whole block */
  justify-content: center;
  align-items: start;
}
        @media (min-width: 990px) {
.notes-grid{
    width: 50vw;
  grid-template-columns: max-content 1fr;
    row-gap: 1vw;
  column-gap: 1vw;
}
}

/* left column */
.note-label{
  font-weight: 800;
                  font-size: var(--mob-4a);
  margin-top: 2vw;
  color: #000;
  text-align: center;     /* right aligned */
  
}

        @media (min-width: 990px) {
.note-label{
  margin-top: 0;
  text-align: right;
      font-size: var(--dt-4);
}

}

.note-label-white-space {
  display: none;
}

        @media (min-width: 990px) {
.note-label-white-space {
  display: inline;
}
}

/* right column */
.note-values{
  text-align: center;
}

        @media (min-width: 990px) {
.note-values{
  text-align: left;
}
}


.note-value{
                  font-size: var(--mob-4a);
  line-height: 1.1;
  color: #9a9a9a;
  margin-bottom: .4vw;
    /* max-width: 40vw; */
}

   @media (min-width: 990px) {
.note-value{
    margin-bottom: .2vw;
      font-size: var(--dt-4);
    max-width: 35vw;
}
}

.note-values .note-value:last-child{
  margin-bottom: 0;
}



       .fragleftreview {
      grid-area: fragleftreview;
            width:100%;
    }

    .no-reviews-yet {
      text-align: center;
      margin-top: 6vw;
          color: #555;
                  font-size: var(--mob-4a);
          margin-bottom: 20vw;
    }

            @media (min-width: 990px) {
    .no-reviews-yet {
      font-size: var(--dt-3);
    }
}






           .fragratingscont {
      grid-area: fragratingscont;
      width: 100%;
    }












.rating-grid {
  display: grid;
  margin-top: 4vw;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

    @media (min-width: 990px) {
.rating-grid {
  display: grid;
  margin-top: 4vw;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}
}

.rating-finished-category {
  width: 100%;
  border-radius: 8px;
  padding: 0.75rem;
  background-color: #ececec;
}


.rating-grid-leave-rating {
  display: grid;
  margin-top: 4vw;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}


    @media (min-width: 990px) {
.rating-grid-leave-rating {
  display: grid;
  margin-top: 4vw;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

}


.rating-category {
  width: 100%;
  text-align: center;
  border-radius: 8px;
  padding: 0.75rem;
  background-color: #ececec;
}

.rating-category-title {
  text-align: center;
  margin-top: .6vw;
  margin-bottom: 2.8vw;
      font-size: var(--mob-3);
  font-weight: 600;
}

    @media (min-width: 990px) {
.rating-category-title {
  text-align: center;
  margin-top: .6vw;
  margin-bottom: 2vw;
      font-size: var(--dt-3);
  font-weight: 600;
}

}


.rating-subtitle {
  text-align: center;
  margin-top: .6vw;
  margin-bottom: 4vw;
      font-size: var(--mob-3);
  font-weight: 600;
}

    @media (min-width: 990px) {
.rating-subtitle {
  text-align: center;
  margin-top: .6vw;
  margin-bottom: 2vw;
      font-size: var(--dt-3);
  font-weight: 600;
}

}




.season-rating {
  position: relative;
  /* max-width: 480px; */
  margin: 16vw 0 0;
}

    @media (min-width: 990px) {
.season-rating {
  position: relative;
  /* max-width: 480px; */
  margin: 10vw 0 0;
  
}
}



.season-rating h3 {
  font-size: var(--mob-2);
  text-align: center;
  font-weight: 600;
    margin-bottom: 10vw;
}

    @media (min-width: 990px) {
.season-rating h3 {
  font-size: var(--dt-2);
  margin-bottom: 7vw;
  text-align: center;
  font-weight: 600;
}

}

.season-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
  gap: 0.75rem;
}

    @media (min-width: 990px) {
.season-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
  gap: 0.75rem;
}

}

.season-label {
  text-align: left;
  margin-left: 4vw;
  width: 20vw;
                  font-size: var(--mob-4);
  font-weight: 600;
}


    @media (min-width: 990px) {
.season-label {
  text-align: left;
  margin-left: 2vw;
  width: 13vw;
      font-size: var(--dt-3);
  font-weight: 600;
}
}


.season-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.season-scale label {
  position: relative;
  cursor: pointer;
}

.season-scale input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.season-scale span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4vw;
  height: 4vw;
  border-radius: 999px;
      font-size: var(--mob-5);
  border: 2px solid #ccc;
  background-color: #f7f7f7;
  color: #333;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    @media (min-width: 990px) {
.season-scale span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2vw;
  height: 2vw;
  border-radius: 999px;
      font-size: var(--dt-5);
  border: 1px solid #ccc;
  background-color: #f7f7f7;
  color: #333;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
}


/* Hover */
.season-scale label:hover span {
  border-color: #999;
}

/* Selected state */
.season-scale input:checked + span {
  background-color: #111;
  color: #fff;
  border-color: #111;
}



/* --- Season & Time Ratings --- */

.season-rating-block {
  margin-top: 16vw;
}

    @media (min-width: 990px) {
.season-rating-block {
  margin-top: 9.5vw;
}
}

.rating-section-title {
  text-transform: uppercase;
  font-size: var(--mob-2);
  text-align: center;
  font-weight: 600;
    margin-bottom: 7vw;
}

    @media (min-width: 990px) {
.rating-section-title {
  font-size: var(--dt-2);
  margin-bottom: 4vw;
  text-align: center;
  font-weight: 600;
}

}

.season-averages {
  margin-bottom: 1.25rem;
}

.season-average-row {
  display: flex;
  align-items: center;
  margin-bottom: .7vw;
}

.rating-label {
  font-size: var(--mob-4);
  font-weight: 600;
  margin-top: .8vw;
}

    @media (min-width: 990px) {
.rating-label {
  margin-top: .1vw;
  font-size:1.4vw;
  font-weight: 600;
}

}

.rating-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1vw 1vw;
  margin-top: 1vw;
  margin-left: 1.3vw;
  border-radius: 4px;
                    font-size: var(--mob-4);
  font-weight: 600;
  background: #151414;
  color: #fff;
}

    @media (min-width: 990px) {
.rating-pill {
  padding: .5vw;
    margin-top: .3vw;
  margin-left: .6vw;
  border-radius: 4px;
      font-size: var(--dt-5);
}

}


/* Colors per season/time */
.rating-pill--spring { background-color: #177245; }
.rating-pill--summer { background-color: #8B2F32; }
.rating-pill--fall   { background-color: #5A3825; }
.rating-pill--winter { background-color: #2C3E4F; }
.rating-pill--all    { background-color: #151414; }
.rating-pill--day    { background-color: #A67C00; }
.rating-pill--night  { background-color: #2B133D; }

.rating-form-title {
      font-size: var(--mob-5);
  margin-bottom: 7vw;
}

                    @media (min-width: 990px) {
.rating-form-title {
      font-size: var(--dt-4);
}

  }


.season-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.season-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Colored circle (can inherit color per row if you want later) */
.rating-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background-color: #111;
  margin-right: 3px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

/* Number pill */
.rating-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid #ccc;
  background-color: #f7f7f7;
      font-size: var(--mob-5);
  font-weight: 600;
  color: #333;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

                    @media (min-width: 990px) {
.rating-number {
      font-size: var(--dt-5);
}

  }
/* Hover */
.season-option:hover .rating-number {
  border-color: #999;
}

/* Selected (animates & inverts) */
.season-option input:checked + .rating-dot + .rating-number {
  background-color: #111;
  color: #fff;
  border-color: #111;
  transform: translateY(-1px) scale(1.03);
}

.season-option input:checked + .rating-dot {
  transform: scale(1.15);
}




.login-to-rate {
    text-align: center;
    width: 80%;
      margin: 6vw auto 0;
                  font-size: var(--mob-4a);
    }

                    @media (min-width: 990px) {
.login-to-rate {
      margin: 4vw auto 0;
      font-size: var(--dt-3);
    }

  }
    .reviewlogindiv a{
      color: blue;
    }


.login-to-rate a {
  color: blue;
}



/* #seasonal-ratings button {
  position: absolute;
  bottom: -12vw;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  margin: 0 auto;
}

    @media (min-width: 990px) {
#seasonal-ratings button {
  position: absolute;
  bottom: -7vw;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  margin: 0 auto;
}

} */


.season-submit {
  display: block;
  margin: 0 auto;
  text-align: center;
  /* margin-top: 2vw; */
  padding: 2vw 4vw;
                  font-size: var(--mob-4);
  border-radius: 999px;
  border: none;
  background-color: #111;
  color: #fff;
  cursor: pointer;
}

    @media (min-width: 990px) {
.season-submit {
  margin: 0 auto;
  text-align: center;
  margin-top: 3vw;
  padding: 1vw 2vw;
      font-size: var(--dt-4);
  border-radius: 999px;
  border: none;
  background-color: #111;
  color: #fff;
  cursor: pointer;
}
}





    #reviews {
      margin: 14vw auto 3vw;
      text-align: center;
      width: calc(100% - 20px);
    }


        @media (min-width: 990px) {
    #reviews {
      margin: 10vw auto 3vw;
      text-align: center;
    }

}

    .leavereview {
      margin: 2vw 0 6vw;
                  font-size: var(--mob-4a);
    }

                    @media (min-width: 990px) {
    .leavereview {
      margin: 2vw 0 4vw;
      font-size: var(--dt-3);
    }

  }
    .reviewlogindiv a{
      color: blue;
    }


            .reviewratingdiv{
      margin: 0 auto;
            margin-top: 1vw;
                  font-size: var(--mob-4);
      width:98%;
      padding: 2vw;
    }

                    @media (min-width: 990px) {
        .reviewratingdiv  {
      margin: 0 auto;
            margin-top: 1vw;
      font-size: var(--dt-3);
      width: 70%;
      padding: 1vw;
    }
}

    .reviewratingdiv input {
      padding: .4vw;
      padding-right: 0;
      border: 1px solid black;
    }

                        @media (min-width: 990px) {
    .reviewratingdiv input {
      padding: .4vw;
      padding-right: 0;
      border: 3px solid black;
    }
}

    .reviewtitlediv {
                 margin-top: 3vw;
      font-size: var(--mob-3);
    }

            @media (min-width: 990px) {
    .reviewtitlediv {
                 margin-top: 2vw;
      font-size: var(--dt-3);
    }

}



    


    .reviewtitlediv label {
      width: 100%;
     margin-bottom: 0;
     font-weight: 700;
    }

                @media (min-width: 990px) {
    .reviewtitlediv label {
      width: 100%;

    }

}
    

    .reviewtitlediv input{
      margin: 0 auto;
      margin-top: 2vw;
      border-radius: 30px;
      width:98%;
                  font-size: var(--mob-4);
      padding: 2vw 4vw;
            border: 1px solid black;
    }

                    @media (min-width: 990px) {
    .reviewtitlediv input{
      margin: 0 auto;
      font-size: var(--dt-3);
      margin-top:2vw;
      width: 70%;
      padding: 1vw 2vw;
            border: 3px solid black;
    }
}


    .reviewtextdiv {
                 margin-top: 5vw;
      font-size: var(--mob-3);
    }

            @media (min-width: 990px) {
    .reviewtextdiv {
                 margin-top: 2vw;
      font-size: var(--dt-3);
    }

}


    .reviewtextdiv label {
      width: 100%;
     margin-bottom: 0;
     font-weight: 700;
    }

                @media (min-width: 990px) {
    .reviewtextdiv label {
      width: 100%;
     margin-bottom: 1vw;
    }

}
    
    /* .reviewtextdiv input{
      margin: 0 auto;
      width: 40%;
      padding: 1vw;
            border: 3px solid black;
    } */



        .reviewtextdiv textarea {
      margin: 0 auto;
            margin-top: 2vw;
                  border-radius: 30px;
                  height: 60vw;
                  font-size: var(--mob-4a);
      width:98%;
      padding: 4vw;
            border: 1px solid black;
    }

                    @media (min-width: 990px) {
        .reviewtextdiv textarea {
      margin: 0 auto;
      height: 20vw;
            margin-top: 1vw;
      font-size: var(--dt-3);
      width: 70%;
      padding: 1vw 2vw;
            border: 3px solid black;
    }
}



  
    .reviewbody {
      border-radius: 20px;
      font-size: var(--mob-5);
            margin-top: 20px;
    }

                        @media (min-width: 990px) {
    .reviewbody {
      font-size: var(--dt-3);
      margin: 0 auto;
      width: 84%;
    }
}


    #reviews button  {
  margin: 0 auto;
  text-align: center;
    margin-top: 3vw;
  /* margin-top: 2vw; */
  padding: 2vw 4vw;
                  font-size: var(--mob-4);
  border-radius: 999px;
  border: none;
  background-color: #111;
  color: #fff;
  cursor: pointer;
}

    @media (min-width: 990px) {
    #reviews button  {
  margin: 0 auto;
      margin-top: 2vw;
  text-align: center;
  /* margin-top: 2vw; */
  padding: 1vw 2vw;
      font-size: var(--dt-4);
  border-radius: 999px;
  border: none;
  background-color: #111;
  color: #fff;
  cursor: pointer;
}
}

.reviewbody li {
  position: relative;
  margin-bottom: 3vw;
  border-radius: 30px;
  padding-top: 5vw;
  padding-left: 3vw;
  background: rgba(238, 233, 234, 0.9);
}

@media (min-width: 990px) {
  .reviewbody li {
    margin-bottom: 3vw;
    padding-top: 2vw;
    padding-left: 2vw;
  }
}

/* --- NEW: review header left/right layout --- */
.review-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vw;
}

@media (min-width: 990px) {
  .review-header-row {
    margin-bottom: 1vw;
  }
}

.reviewdate small {
      font-size: var(--mob-5);
  padding-right: 3vw;
  color: #555;
}

@media (min-width: 990px) {
  .reviewdate small {
      font-size: var(--dt-5);
  }
}
/* ------------------------------------------- */

/* Star rating display (read-only) */
.star-rating {
  position: relative;
  display: inline-block;
                  font-size: var(--mob-4);
  line-height: 1;
}

@media (min-width: 990px) {
  .star-rating {
    position: relative;
    display: inline-block;
      font-size: var(--dt-3);
    line-height: 1;
  }
}

.star-rating-base,
.star-rating-fill {
  letter-spacing: 2px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.star-rating-base {
  color: #ddd;
}

.star-rating-fill {
  color: #f6b30a;
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
}

.star-rating-number {
  margin-left: 6px;
                  font-size: var(--mob-4);
  color: #555;
}

@media (min-width: 990px) {
  .star-rating-number {
    margin-left: 6px;
      font-size: var(--dt-5);
    color: #555;
  }
}


.reviewtitle {
  font-size: var(--mob-2);
  text-align: center;
    text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 7vw;
}

@media (min-width: 990px) {
  .reviewtitle {
  font-size: var(--dt-2);
    margin-bottom: 5vw;
    text-align: center;
    font-weight: 600;
  }
}


.reviewtext {
                  font-size: var(--mob-4a);
  line-height: 4.1vw;
  margin-top: 6vw;
  width: 90%;
}

@media (min-width: 990px) {
  .reviewtext {
      font-size: var(--dt-3);
    line-height: 2.4vw;
    margin-top: 4vw;
  }
}

.reviewuserinfo {
  position: relative;
  margin-top: 5vw;
  padding-bottom: 5vw;
}

@media (min-width: 990px) {
  .reviewuserinfo {
    position: relative;
    margin-top: 3vw;
    padding-bottom: 3vw;
  }
}

.reviewphoto {
  background: green;
  height: 7vw;
  width: 7vw;
  border-radius: 50px;
}

.reviewnamedivblock {
  position: relative;
  display: block;
  margin-top: 1vw;
}

.reviewname {
  position: relative;
  width: 100%;
                  font-size: var(--mob-4);
}

@media (min-width: 990px) {
  .reviewname {
      font-size: var(--dt-3);
  }
}

.reviewcountry {
  position: relative;
  margin-top: 2vw;
  width: 100%;
      font-size: var(--mob-5);
}

@media (min-width: 990px) {
  .reviewcountry {
    margin-top: 1vw;
    width: 100%;
      font-size: var(--dt-5);
  }
}








































/* ===== Houses Index (All Projects style) ===== */

.houses-wrap{
  width: 90%;
  /* max-width: 1100px; */
  margin: 0 auto;
  /* padding: 48px 20px 80px; */
}

.houses-header{
  margin-top: 4vw;
  text-align: center;
}

.houses-title{
  text-align: center;
  font-size: var(--mob-2);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

@media (min-width: 990px) {
.houses-title{
  font-size: var(--dt-2);
}
}


.houses-list{
  display: flex;
  margin-top: 8vw;
  flex-direction: column;
}

/* ===== Generic row ===== */

.house-row{
  position: relative;
  display: grid;
  gap: 2vw;
  padding: 2vw 1vw;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid rgba(0,0,0,0.12);
}

.house-row:first-child {
  border-top: none;
}

.house-row:last-child{
  border-bottom: 1px solid rgba(0,0,0,0.12);

}

/* Layout variants */

.house-row--4cols {
  grid-template-columns: 2fr 1.4fr 1fr 0.6fr;
}

.house-row--3cols {
  grid-template-columns: 1.4fr 1fr 1.6fr;
}

.house-row--2cols {
  grid-template-columns: 1.2fr 1fr;
}

/* Header row */

.house-row--header {
  pointer-events: none;  /* header isn't clickable */
  background: transparent;
  color: rgba(0,0,0,0.55);
}

.house-row--header .house-arrow {
  visibility: hidden;    /* hide the ↗ in header */
}

/* Hover black bar */

.house-row::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 1px;
  bottom: 1px;
  background: #0b0b0b;
  opacity: 0;
  transform: scaleY(0.92);
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 0;
}

/* bring text above hover bar */
.house-row > *{
  position: relative;
  z-index: 1;
}


.house-row--2cols .house-col:last-child {
  text-align: left;
}

 .house-col:last-child {
  text-align: right;
}

/* Typography */

.house-name{
      font-size: var(--mob-5);
}

        @media (min-width: 990px) {
.house-name{
      font-size: var(--dt-4);
}

}

.house-sub{
      font-size: var(--mob-5);
}

        @media (min-width: 990px) {
.house-sub{
      font-size: var(--dt-4);
}
}



.house-right{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}


.dot{ opacity: 0.7; }

/* Hover states */

.house-row:hover::before,
.house-row:focus-visible::before{
  opacity: 1;
  transform: scaleY(1);
}

.house-row:hover,
.house-row:focus-visible{
  outline: none;
  color: #fff;
}

.house-row:hover .house-sub,
.house-row:focus-visible .house-sub,
.house-row:hover .house-meta,
.house-row:focus-visible .house-meta,
.house-row:hover .house-arrow,
.house-row:focus-visible .house-arrow{
  opacity: 0.92;
}

/* OPTIONAL hover preview bubble (only shows if you render .house-preview) */

.house-preview{
  position: absolute;
  left: 42%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 2;
}

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

.house-row:hover .house-preview{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.02);
}

/* responsive */






.secondary-title {
  text-transform: uppercase;
  font-size: var(--mob-2);
  text-align: center;
  font-weight: 600;
    margin-bottom: 4vw;
}

    @media (min-width: 990px) {
.secondary-title {
  font-size: var(--dt-2);
  margin-bottom: 4vw;
  text-align: center;
  font-weight: 600;
}

}

.yearwhitespace {
  position: relative;
  margin-top: 8vw;
}

        @media (min-width: 990px) {
.yearwhitespace {
  position: relative;
  margin-top: 5vw;
}
}

.secondarynotewhitespace {
  display: none;
}

        @media (min-width: 990px) {
.secondarynotewhitespace {
  display: inline-block;
}
}



.showcontpad  {
 margin-top: 6vw;
     padding: 0 20px;
}

@media (min-width: 990px) {
.showcontpad  {
 margin-top: 3vw;
}
}





/* ============================
   AUTH PAGES (LOGIN / REGISTER)
   ============================ */

.auth-page {
  min-height: calc(100vh - 80px); /* leaves room for nav */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 32px 28px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
}

/* Headings already use your global font sizing */
.auth-card h1 {
  text-align: center;
  margin-bottom: 24px;
}

/* Fields */
.auth-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}

.auth-field label {
  margin-bottom: 6px;
}

.auth-field input {
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #bbb;
  font-family: inherit;
}

/* Button — minimal, matches site */
.auth-card button {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border-radius: 999px;
  border: none;
  background: #111;
  color: #fff;
  cursor: pointer;
}

/* Footer links */
.auth-footer {
  margin-top: 20px;
  text-align: center;
}

.auth-footer a {
  color: blue;
}

/* Error */
.auth-error {
  color: red;
  text-align: center;
  margin-bottom: 14px;
}



.auth-social {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}

.auth-social-link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;
  color: #111;
  text-align: center;
  cursor: pointer;
}

.auth-social-link:hover {
  background: #f3f3f3;
}