/** Shopify CDN: Minification failed

Line 44:8 Expected identifier but found whitespace
Line 44:10 Unexpected "{"
Line 44:19 Expected ":"
Line 50:8 Expected identifier but found whitespace
Line 50:10 Unexpected "{"
Line 50:19 Expected ":"
Line 104:8 Expected identifier but found whitespace
Line 104:10 Unexpected "{"
Line 104:19 Expected ":"

**/
.left-diamond-cut-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* ===========================
   Right Column
=========================== */
.left-cut-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.left-cut-title h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.4;
  color: inherit;
  font-family: 'Philosopher';
}

/* Content Title & Pro Tip Title */
.left-content-title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: {{ section.settings.content_title_color }};
}
.left-pro-tip-title {
  font-size: 1.3rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: {{ section.settings.pro_tip_title_color }};
}

/* Main text & Pro Tip content */
.left-text-content {
  margin-bottom: 3.2rem;
}
.left-pro-tip {
  margin-top: 1rem;
  font-style: italic;
}

.left-text-content p {
    font-family: 'Istok Web';
    font-size: 15px;
    color: #000;
    line-height: normal;
}

/* ===========================
   Desktop Bar
=========================== */
.left-desktop-button-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 2rem;
  border-bottom: 3px solid #000;
  overflow-x: auto;
}

/* Each block -> 1 "cell" in the bar */
.left-desktop-wrap {
  min-width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  /* padding: 0.5rem; */
  border-right: 1px solid #000;
}
.left-desktop-wrap:last-child {
  border-right: none;
}

/* The button itself:
   - Default background = transparent
   - Hover => navy
   - Active => navy
*/
.left-cut-button {
  width: 100%;
  border: none;
  background: transparent; /* Make non-active buttons transparent */
  color: {{ section.settings.button_text_color }};
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
  text-align: center;
  font-size: 16px;
  padding: 9.6px;
}

.left-cut-button:hover {
  background: #2C2B5C; /* navy on hover */
  color: #fff;
}

.left-cut-button.active {
  background: #2C2B5C; /* navy for active */
  color: #fff !important;
}

/* ===========================
   Left Image Column
=========================== */
.left-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 400px;
  min-height: 400px;
  overflow: hidden;
}
.left-image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.5s ease;
}

/* ===========================
   Mobile Buttons (vertical list)
=========================== */
.left-mobile-button-group {
  display: none; /* hidden on desktop */
}

.left-mobile-button-group .left-cut-button {
  display: block;
  width: 100%;
  position: relative;
  padding: 1rem;
  border-bottom: 1px solid #ccc;
  background: transparent;
  color: #000;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Last mobile button => no bottom border */
.left-mobile-button-group .left-cut-button:last-child {
  border-bottom: none;
}

/* First mobile button => navy w/ arrow */
.left-mobile-button-group .left-cut-button.active {
  background: #2C2B5C;
  color: #fff;
}
.left-mobile-button-group .left-cut-button.active::before {
  content: "▶";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 0.8rem;
}
/* Hover + Active states for other mobile buttons */
.left-mobile-button-group .left-cut-button:not(:first-child):hover {
  background: #2C2B5C;
  color: #fff;
}
.left-mobile-button-group .left-cut-button:not(:first-child).active {
  background: #2C2B5C;
  color: #fff;
}

/* Vertical stack for mobile */
.left-mobile-button-group.vertical-stack {
  display: none;
  flex-direction: column;
}

/* ===========================
   Responsive
=========================== */
@media (max-width: 480px) {
  .left-mobile-button-group.vertical-stack {
    display: flex;
    flex-direction: column;
  }

  .left-diamond-cut-section {
    display: flex;
    gap: 2rem;
    padding: 0.3rem;
    max-width: 1400px;
    margin: 0 auto;
    flex-direction: column-reverse;
  }
  .left-diamond-cut-section {
    grid-template-columns: 1fr;
  }

  /* Hide the desktop bar, show mobile buttons */
  .left-desktop-button-group {
    display: none;
  }
  .left-mobile-button-group {
    display: block;
    margin-bottom: 1rem;
  }

  .left-cut-title h2 {
    font-size: 22px;
  }

  .left-image-container {
    height: 180px;
    min-height: 0px;
  }
  .left-image-container img {
    width: 70%;
  }
  .left-text-content {
    margin-bottom: 0rem;
  }
}