/** Shopify CDN: Minification failed

Line 492:0 Expected "}" to go with "{"

**/
/* === CUSTOM.CSS for Dawn Theme (KHHairEnhancers) === */

/* ------------------------------
   Buttons (Global Gold Style)
--------------------------------*/
.button,
.button--secondary {
  background-color: var(--color-button, #d4af37); /* gold */
  color: var(--color-button-text, #fff);
  border: none;
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
  font-size: 1.5rem;
}

.button:hover,
.button--secondary:hover {
  background-color: #b9962f; /* darker gold hover */
}

/* ------------------------------
   Reset / Typography Scaling
--------------------------------*/
html {
  font-size: 62.5% !important; /* 1rem = 10px baseline */
}

body {
  font-size: 1.6rem !important;
}

h1 {
  font-size: 3.2rem !important;
  line-height: 1.2;
}
h2 {
  font-size: 2.4rem !important;
  line-height: 1.3;
}
h3 {
  font-size: 1.8rem !important;
  line-height: 1.3;
}

/* ------------------------------
   Header (Logo + Menu)
--------------------------------*/
:root {
  --font-body-scale: 1 !important;
  --font-heading-scale: 1 !important;
}

.header__heading,
.header__heading-link {
  font-size: 1.8rem !important;  /* shop name/logo */
  line-height: 1.3 !important;
  font-weight: 600 !important;
}

.header__menu-item a {
  font-size: 1.5rem !important;  /* nav links */
  line-height: 1.3 !important;
  padding: 4px 10px !important;
  font-weight: 500 !important;
}

.header__inline-menu {
  gap: 14px !important;
}

.header__icon {
  font-size: 1.6rem !important;
}

/* === Clean Fixed Header Styling === */
.header-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  background: #f5f5f5; /* light grey */
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);

  height: auto; /* let Shopify control height */
  display: flex;
  align-items: center;
}

/* Darker on hover */
.header-wrapper:hover {
  background: #e0e0e0;
}

/* Remove scroll-hide behavior */
.header-wrapper.scroll-down,
.header-wrapper.scroll-up {
  transform: none !important;
}

/* ------------------------------
   Text with 4 Images Section
--------------------------------*/
.text-4-images__inner {
  display: grid;
  grid-template-columns: 40% 60%; /* text vs images */
  gap: 24px;
  align-items: center; /* vertically center text */
}

@media (max-width: 749px) {
  .text-4-images__inner {
    grid-template-columns: 1fr;  /* stack on mobile */
    align-items: start;
  }
}

.text-4-images__heading {
  font-size: 2.6rem !important;
  line-height: 1.3 !important;
  margin-bottom: 16px;
  font-weight: 700;
}

.text-4-images__text {
  font-size: 1.7rem !important;
  line-height: 1.6 !important;
  margin-bottom: 20px;
  color: rgba(var(--color-foreground), 0.9);
}

.text-4-images__buttons {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.text-4-images__buttons .button,
.text-4-images__buttons .button--secondary {
  flex: 1;
  min-width: 160px;
  font-size: 1.3rem !important;
  padding: 8px 16px !important;
}

@media (max-width: 749px) {
  .text-4-images__buttons {
    flex-direction: column;
  }
  .text-4-images__buttons .button,
  .text-4-images__buttons .button--secondary {
    width: 100%;
    min-width: unset;
  }
}

.text-4-images__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 95%;
  margin: 0 auto;
  transform: scale(0.75);    /* shrink images to 75% */
  transform-origin: center;
}

.text-4-images__item img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: contain; /* no cropping, keep full detail */
  display: block;
}

.text-4-images__caption {
  margin-top: 6px;
  font-size: 1.3rem;
  color: rgba(var(--color-foreground), 0.7);
  text-align: center;
}
/* === Footer Social Links Left Column === */
.footer__content-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* left, middle, right */
  gap: 20px;
  align-items: start;
}

.footer-block--social {
  grid-column: 1;     /* force into left column */
  justify-self: start;
}

.footer-block--menu {
  grid-column: 2;     /* menus in the middle */
}

.footer-block--newsletter,
.footer-block--text {
  grid-column: 3;     /* newsletter or text on the right */
}

/* Make sure icons are neatly aligned */
.footer-block--social .list-social {
  display: flex;
  gap: 12px;
}

.footer-block--social .list-social__link {
  font-size: 1.6rem;
  color: rgba(var(--color-foreground), 0.85);
  transition: color 0.2s ease;
}

.footer-block--social .list-social__link:hover {
  color: var(--color-accent, #b9962f);
}
/* === Header Height Adjustment === */
.header-wrapper {
  height: 80px !important;   /* increase from 64px */
  display: flex;
  align-items: center;
}

.header__inline-menu {
  align-items: center; /* keep menu links centered vertically */
}

.header__heading,
.header__heading-link {
  line-height: 80px;   /* match new header height */
}
/* Fix Image-with-Text overlap */
.image-with-text {
  margin-bottom: 40px; /* push section down */
}

@media (max-width: 749px) {
  .image-with-text {
    margin-bottom: 30px;
  }
}
/* --- Make text-4-images buttons larger --- */
.text-4-images__buttons .button,
.text-4-images__buttons .button--secondary {
  font-size: 1.6rem !important;   /* bigger text */
  padding: 12px 24px !important;  /* larger clickable area */
  min-width: 180px !important;    /* make them wider */
  font-weight: 600;               /* bold text for impact */
}

/* Space them evenly */
.text-4-images__buttons {
  gap: 16px !important;
  justify-content: flex-start; /* align neatly left */


/* Pedigree Section - Image control */
.image-with-text__media img.responsive-img {
  max-width: 500px;   /* increase image size */
  height: auto;
  display: block;
  margin: 0 auto;
}
/* --- Safety Net: Always show product images --- */
.card__media img,
.card__inner img,
.product-card-wrapper img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.shop-section__heading {
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 24px;
  text-align: center;
}

.shop-section__grid {
  gap: 24px;
}
/* Force product grid into proper layout */
#MainCollectionProductGrid .grid {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: -10px !important;
}

#MainCollectionProductGrid .grid__item {
  flex: 0 0 25% !important;   /* 4 per row on desktop */
  max-width: 25% !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}

@media (max-width: 990px) {
  #MainCollectionProductGrid .grid__item {
    flex: 0 0 33.333% !important; /* 3 per row on tablet */
    max-width: 33.333% !important;
  }
}

@media (max-width: 749px) {
  #MainCollectionProductGrid .grid__item {
    flex: 0 0 50% !important; /* 2 per row on mobile */
    max-width: 50% !important;
  }
}

/* Limit product card image size */
#MainCollectionProductGrid .card__media img {
  width: 100% !important;
  height: auto !important;
  max-height: 300px !important; /* adjust */
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Center align title, price, description */
#MainCollectionProductGrid .card__information {
  text-align: center !important;
}
/* Fix oversized product images in collection grid */
#MainCollectionProductGrid .grid__item .card__media img {
  width: 100% !important;
  height: auto !important;
  max-height: 250px !important;   /* adjust as needed */
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Ensure grid layout */
#MainCollectionProductGrid .grid {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: -10px !important;
}

#MainCollectionProductGrid .grid__item {
  flex: 0 0 25% !important;   /* 4 per row desktop */
  max-width: 25% !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}

@media (max-width: 990px) {
  #MainCollectionProductGrid .grid__item {
    flex: 0 0 33.33% !important;
    max-width: 33.33% !important;
  }
}

@media (max-width: 749px) {
  #MainCollectionProductGrid .grid__item {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}
/* Force product grid to behave correctly */
.collection .grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.collection .grid__item {
  margin: 0 !important;
}
/* Force collection products into grid layout */
.grid.grid--view-items {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

.card-wrapper {
  border: 1px solid #eee;
  padding: 12px;
  border-radius: 6px;
  background: #fff;
  text-align: center;
}
/* Collection product grid layout */
.grid.grid--view-items {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
}

.grid__item {
  display: flex;
}
/* Force 3 products per row in collection grid */
.grid.grid--view-items {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);  /* always 3 across */
  gap: 24px;
}

.grid__item {
  display: flex;
}
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin: 40px 0;
}

.testimonial-video iframe {
  width: 100%;
  height: 100%;
  min-height: 250px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.h2 {
  font-size: 2.6rem !important;
  line-height: 1.3 !important;
  margin-bottom: 16px;
  font-weight: 700;
  color: rgba(var(--color-foreground), 0.9);
}
/* Force equal button sizing everywhere in text-4-images */
.text-4-images__buttons a.button,
.text-4-images__buttons a.button--secondary {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 200px !important;
  max-width: 200px !important;
  height: 48px !important;
  padding: 0 20px !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.text-4-images__buttons {
  display: flex !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

@media (max-width: 749px) {
  .text-4-images__buttons {
    flex-direction: column !important;
    align-items: center !important;
  }
  .text-4-images__buttons a.button,
  .text-4-images__buttons a.button--secondary {
    width: 100% !important;
    max-width: 280px !important;
  }