/* --- Engagement Rings Page Styles --- */

/* Page Background */
body {
  background-color: #f6ebd8; /* Matches the soft beige/cream from the image */
  margin: 0;
  padding: 0;
}

.er-page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  color: #5c4b41; /* Soft brown text color */
}

/* ========================================================= */
/* --- ELEGANT GLASS BREADCRUMBS --- */
/* ========================================================= */

.breadcrumb {
  margin: 20px 5% 15px 5%; /* Aligns perfectly to the left side */
  padding: 10px 20px;

  /* THE GLASS EFFECT */
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Forces the text to match your glass navbar */
.breadcrumb,
.breadcrumb a,
.breadcrumb span {
  font-family: "Instrument Sans", sans-serif !important;
  font-size: 0.8rem !important;
  letter-spacing: 2px !important;
  color: #333333 !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.breadcrumb a:hover {
  color: #d4af37 !important;
}

/* Headers */
.er-header {
  text-align: center;
  margin-bottom: 40px;
}
.ornament {
  width: 60px;
  display: block;
  margin: 10px auto;
}
.er-title {
  font-family: "Fraunces", serif;
  font-size: 3.5rem;
  font-weight: 400;
  margin: 10px 0;
  letter-spacing: 2px;
}
.er-subtitle {
  /* Note: If you named your font 'Instrument Sans' earlier, use that here instead! */
  font-family: "Instrument Sans", sans-serif;
  font-weight: 300; /* This number makes the text nice and thin! */
  font-size: 1.1rem;
  line-height: 1.6;
  margin-top: 20px;
  color: #5c4b41;
}

/* Choose Your Diamond Header */
.choose-diamond-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 50px 0;
}
.horizontal-line {
  height: 1px;
  background-color: #b5a494;
  width: 200px;
}
.choose-diamond-header h2 {
  font-family: "Fraunces", serif;
  font-size: 1.8rem;
  letter-spacing: 4px;
  margin: 0;
}

/* Two-Column Cards */
.diamond-choices {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 50px;
  margin-bottom: 60px;
}
.choice-card {
  flex: 1;
  max-width: 450px;
  background-color: #f1e9df; /* Soft semi-transparent white */
  border: 1px solid #e2d5c3;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}
.choice-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  /* This magically erases the white background! */
  mix-blend-mode: multiply;
}
.card-content {
  padding: 30px 20px;
}
.card-content h3 {
  font-family: "Fraunces", serif;
  font-size: 1.6rem;
  margin: 0 0 10px 0;
  letter-spacing: 2px;
}
.star-accent {
  color: #cda873;
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.card-content p {
  font-family: "Instrument Sans", sans-serif;
  font-size: 0.85rem;
  line-height: 1.8;
  margin-bottom: 25px;
}

/* Explore Buttons */
.explore-btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #b5a494;
  border-radius: 4px;
  text-decoration: none;
  font-family: "Instrument Sans", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #5c4b41;
  letter-spacing: 2px;
  transition: 0.3s ease;
}
.explore-btn:hover {
  background-color: #b5a494;
  color: white;
}

/* Vertical Line Separator */
.vertical-divider {
  position: relative;
  width: 1px;
  background-color: #b5a494;
  margin: 0 20px;
}
.diamond-shape {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background-color: #cda873;
}

/* Features Footer Bar */





/* --- Global Font Rules for Engagement Rings Page --- */

/* All Titles will be Fraunces */
.er-page-container h1,
.er-page-container h2,
.er-page-container h3,
.er-page-container h4 {
  font-family: "Fraunces", serif;
  font-weight: 400; /* Keeps the titles elegant and not overly thick */
}

/* All Descriptions, Subtitles, and Buttons will be Instrument Sans */
.er-page-container p,
.er-page-container a,
.er-page-container span {
  font-family: "Instrument Sans", sans-serif;
}

/* ========================================================= */
/* --- ELEGANT GLASS BACK BUTTON --- */
/* ========================================================= */

.back-btn {
  display: flex; /* Forces it to drop down to a new line */
  width: fit-content; /* Keeps the glass bubble tight around the text */
  align-items: center;
  text-decoration: none;

  /* Typography */
  font-family: "Instrument Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  color: #333333 !important;

  /* Matching Glass Effect! */
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);

  /* Positioning */
  padding: 8px 20px;
  margin: 0 5% 40px 5%; /* Tucks it perfectly underneath the breadcrumb */

  transition: all 0.3s ease !important;
}

.back-btn:hover {
  color: #d4af37 !important;
  background: rgba(255, 255, 255, 0.7); /* Brightens up slightly */
  transform: translateX(
    -5px
  ); /* Gives it that signature slide-left animation */
}

/* --- MOBILE STACKING FOR 'CHOOSE YOUR DIAMOND' SECTION --- */
@media (max-width: 768px) {
  /* Compact mobile card grid: same visual scale as product cards. */
  .diamond-choices {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    gap: 20px 12px !important;
  }

  .choice-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .vertical-divider {
    display: none !important;
  }

  .choice-card img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 4/5 !important;
    object-fit: cover !important;
    margin: 0 !important;
  }

  .choice-card .card-content {
    padding: 9px 0 0 !important;
    text-align: center !important;
  }

  .choice-card h3 {
    margin: 0 0 7px !important;
    font-size: .86rem !important;
    line-height: 1.25 !important;
  }

  .choice-card p {
    display: none !important;
  }

  .choice-card .explore-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 34px !important;
    margin: 7px 0 0 !important;
    padding: 0 7px !important;
    border: 1px solid var(--mm-teal) !important;
    background: var(--mm-teal) !important;
    color: #fff !important;
    font-size: .50rem !important;
    letter-spacing: .10em !important;
    box-sizing: border-box !important;
  }
}
/* --- FIX MAIN TITLE SIZE ON MOBILE --- */
@media (max-width: 768px) {
  .er-title {
    font-size: 2.2rem !important; /* Shrinks the font so it fits on the screen */
    letter-spacing: 3px !important; /* Slightly reduces the space between letters */
    line-height: 1.3 !important; /* Keeps it looking clean if it needs to drop to two lines */
    text-align: center !important;
    width: 100% !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }
}
/* --- FIX 'CHOOSE YOUR DIAMOND' (KEEP LINES, ONE LINE OF TEXT) --- */
@media (max-width: 768px) {
  .choose-diamond-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important; /* Forces everything to stay on one horizontal row */
  }

  /* Brings the lines back, but lets them shrink so they don't squish the text */
  .choose-diamond-header .horizontal-line {
    display: block !important;
    flex-grow: 1 !important; /* Lets the lines stretch to fill the edges */
    min-width: 20px !important; /* Ensures at least a small line is always visible */
  }

  /* Shrinks the font slightly and forces all 3 words onto exactly one line */
  .choose-diamond-header h2 {
    font-size: 1.1rem !important; /* Smaller font to ensure it fits on small phones */
    letter-spacing: 2px !important;
    white-space: nowrap !important; /* This is the magic rule that prevents the words from stacking! */
    margin: 0 15px !important; /* Adds beautiful breathing room between the text and the lines */
    text-align: center !important;
  }
}
/* ===================================================================== */
/* --- FIX FOR EXCESSIVE EMPTY SPACE AT BOTTOM OF DESKTOP/MOBILE VIEW --- */
/* ===================================================================== */

html,
body {
  height: auto !important;
  min-height: fit-content !important;
}

.er-page-container {
  min-height: fit-content !important;
  height: auto !important;

  /* This adds just a perfect small amount of breathing room at the very bottom */
  padding-bottom: 40px !important;
  margin-bottom: 0 !important;
}


/* ===== NAVBAR ADDITION ===== */






















@media (max-width: 768px) {
  .nav-container {
    padding: 15px 20px;
  }
  .nav-menu {
    display: none;
  }
  .logo-text {
    font-size: 22px;
  }
}

/* ========================================================= */
/* CATEGORY MOBILE BREATHING ROOM + DIVIDERS                 */
/* ========================================================= */