/*
Theme Name: Meliora Mobile Luxury 2.2 Navigation Fix Gallery Row
Theme URI: https://meliorahair.co
Author: Meliora
Description: Meliora emerald-and-gold website with WooCommerce product, cart, and checkout support.
Version: 2.2.1
*/

body{margin:0;background:oklch(96.5% 0.012 90);color:oklch(23% 0.02 150);font-family:'Jost',sans-serif;}
a{color:oklch(38% 0.08 155);text-decoration:none;}
a:hover{color:oklch(65% 0.13 85);}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:500;margin:0;}
::selection{background:oklch(80% 0.12 85 / 0.4);}


/* Standard WordPress and WooCommerce pages */
.meliora-page,
.meliora-woocommerce {
  max-width: 1180px;
  margin: 0 auto;
  padding: 70px 30px;
  min-height: 55vh;
}
.entry-title,
.woocommerce-products-header__title,
.woocommerce div.product .product_title {
  font-family: 'Cormorant Garamond', serif;
  color: #123c2c;
  font-weight: 500;
  line-height: 1.15;
}
.entry-title { font-size: clamp(34px, 5vw, 54px); margin-bottom: 30px; }
.entry-content { font-size: 16px; line-height: 1.8; }
.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  width: 100%;
  float: none;
  margin: 0;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: #9b7629;
  font-size: 25px;
}
.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}
.woocommerce .quantity .qty {
  min-height: 48px;
  width: 76px;
  border: 1px solid #c9b98e;
  padding: 8px;
}
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce .button,
.wc-block-components-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
  background: #123c2c !important;
  color: #e2c873 !important;
  border: 1px solid #b69542 !important;
  border-radius: 0 !important;
  padding: 15px 28px !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce .button:hover,
.wc-block-components-button:hover {
  background: #0b2b20 !important;
  color: #f0d88d !important;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error { border-top-color: #b69542; }
.woocommerce-message::before,
.woocommerce-info::before { color: #123c2c; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
  border: 1px solid #d4c79f;
  border-radius: 0;
  background: #fffdf8;
}
.woocommerce table.shop_table,
.wc-block-components-order-summary,
.wc-block-cart-items {
  border-color: #d9cfb4;
}
@media (max-width: 800px) {
  .woocommerce div.product { grid-template-columns: 1fr; gap: 30px; }
  .meliora-page, .meliora-woocommerce { padding: 42px 20px; }
  .woocommerce div.product form.cart { flex-wrap: wrap; }
}

/* Direct checkout button on the product page */
.woocommerce div.product .meliora-buy-now {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  background: #b69542 !important;
  color: #102f23 !important;
  border-color: #8f702d !important;
  font-weight: 600;
}
.woocommerce div.product .meliora-buy-now:hover {
  background: #d6bd70 !important;
  color: #082018 !important;
}

/* Make Afterpay, Klarna and installment messaging readable on light backgrounds */
.woocommerce div.product [class*="afterpay"],
.woocommerce div.product [id*="afterpay"],
.woocommerce div.product [class*="klarna"],
.woocommerce div.product [id*="klarna"],
.woocommerce-checkout [class*="afterpay"],
.woocommerce-checkout [id*="afterpay"],
.woocommerce-checkout [class*="klarna"],
.woocommerce-checkout [id*="klarna"],
.wc-block-checkout [class*="afterpay"],
.wc-block-checkout [class*="klarna"],
.wcpay-payment-methods,
.wcpay-payment-methods label,
.wcpay-payment-methods span,
.wc-block-components-payment-method-label,
.wc-block-components-payment-method-label span {
  color: #173d2e !important;
}

/* Preserve brand logos while fixing adjacent payment text */
.woocommerce-checkout [class*="afterpay"] svg,
.woocommerce-checkout [class*="klarna"] svg,
.wc-block-checkout [class*="afterpay"] svg,
.wc-block-checkout [class*="klarna"] svg {
  color: initial !important;
}


/* 1.4: Force product purchase controls to remain clickable above plugin overlays */
.single-product .woocommerce div.product .summary,
.single-product .woocommerce div.product form.cart,
.single-product .woocommerce div.product form.cart .button,
.single-product .woocommerce div.product .meliora-cart-actions,
.single-product .woocommerce div.product .meliora-cart-actions a {
  position: relative !important;
  z-index: 50 !important;
  pointer-events: auto !important;
}
.single-product .woocommerce div.product form.cart .single_add_to_cart_button {
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.meliora-cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  clear: both;
}
.meliora-fallback-cart {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #123c2c !important;
  color: #e2c873 !important;
  border: 1px solid #b69542 !important;
  padding: 15px 28px !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  cursor: pointer !important;
}
.meliora-fallback-cart:hover {
  background: #0b2b20 !important;
  color: #f0d88d !important;
}

/* 1.4: Force Afterpay/Klarna installment copy to dark emerald. */
.single-product [class*="afterpay"],
.single-product [id*="afterpay"],
.single-product [class*="klarna"],
.single-product [id*="klarna"],
.single-product .afterpay-payment-info,
.single-product .afterpay-paragraph,
.single-product .afterpay-text1,
.single-product .wc-klarna-product-message,
.single-product .klarna-product-message,
.woocommerce-checkout [class*="afterpay"],
.woocommerce-checkout [id*="afterpay"],
.woocommerce-checkout [class*="klarna"],
.woocommerce-checkout [id*="klarna"],
.wc-block-checkout [class*="afterpay"],
.wc-block-checkout [id*="afterpay"],
.wc-block-checkout [class*="klarna"],
.wc-block-checkout [id*="klarna"] {
  color: #173d2e !important;
  -webkit-text-fill-color: #173d2e !important;
  opacity: 1 !important;
}
.single-product [class*="afterpay"] *,
.single-product [id*="afterpay"] *,
.single-product [class*="klarna"] *,
.single-product [id*="klarna"] *,
.woocommerce-checkout [class*="afterpay"] *,
.woocommerce-checkout [id*="afterpay"] *,
.woocommerce-checkout [class*="klarna"] *,
.woocommerce-checkout [id*="klarna"] *,
.wc-block-checkout [class*="afterpay"] *,
.wc-block-checkout [id*="afterpay"] *,
.wc-block-checkout [class*="klarna"] *,
.wc-block-checkout [id*="klarna"] * {
  color: #173d2e !important;
  -webkit-text-fill-color: #173d2e !important;
  text-shadow: none !important;
}
/* Do not recolor the actual provider logos. */
.single-product [class*="afterpay"] svg,
.single-product [class*="klarna"] svg,
.woocommerce-checkout [class*="afterpay"] svg,
.woocommerce-checkout [class*="klarna"] svg,
.wc-block-checkout [class*="afterpay"] svg,
.wc-block-checkout [class*="klarna"] svg {
  -webkit-text-fill-color: initial !important;
}


/* 1.5 — one quantity selector and one checkout button only. */
.single-product .woocommerce div.product form.cart {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  position: relative !important;
  z-index: 100 !important;
}
.single-product .woocommerce div.product form.cart .single_add_to_cart_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #123c2c !important;
  color: #f4e8bd !important;
  border: 1px solid #b69542 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  min-height: 50px !important;
  padding: 15px 28px !important;
  font-weight: 600 !important;
}
.single-product .woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: #0b2b20 !important;
  color: #fff4cf !important;
}
/* Remove the older custom action row, if cached markup remains. */
.single-product .meliora-cart-actions,
.single-product .meliora-fallback-cart,
.single-product .meliora-buy-now {
  display: none !important;
}

/* Hide product-page provider widgets that render white text or inaccessible iframe content. */
.single-product [class*="afterpay"],
.single-product [id*="afterpay"],
.single-product [class*="klarna"],
.single-product [id*="klarna"],
.single-product iframe[src*="afterpay"],
.single-product iframe[src*="klarna"],
.single-product afterpay-placement,
.single-product klarna-placement,
.single-product klarna-product-placement,
.single-product .wc-klarna-product-message,
.single-product .klarna-product-message,
.single-product .afterpay-payment-info,
.single-product .afterpay-paragraph {
  display: none !important;
}

/* Our readable replacement message. */
.single-product .meliora-installment-note {
  display: block !important;
  margin: 10px 0 18px !important;
  color: #123c2c !important;
  -webkit-text-fill-color: #123c2c !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}


/* 1.6 — one dependable quantity-aware checkout link. */
.single-product form.cart .single_add_to_cart_button {
  display: none !important;
}
.single-product form.cart {
  position: relative !important;
  z-index: 2147483000 !important;
  isolation: isolate !important;
  overflow: visible !important;
}
.single-product .meliora-checkout-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 50px !important;
  padding: 15px 28px !important;
  background: #123c2c !important;
  color: #f4e8bd !important;
  border: 1px solid #b69542 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2147483647 !important;
  text-decoration: none !important;
}
.single-product .meliora-checkout-link:hover,
.single-product .meliora-checkout-link:focus {
  background: #0b2b20 !important;
  color: #fff4cf !important;
}

/* Remove product-page financing promotions; methods remain available at checkout. */
.single-product afterpay-placement,
.single-product klarna-placement,
.single-product klarna-product-placement,
.single-product iframe[src*="afterpay" i],
.single-product iframe[src*="klarna" i],
.single-product [class*="afterpay" i],
.single-product [id*="afterpay" i],
.single-product [class*="klarna" i],
.single-product [id*="klarna" i] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Keep checkout controls interactive; theme must not block payment selection. */
.woocommerce-checkout form.checkout,
.woocommerce-checkout #payment,
.woocommerce-checkout #payment *,
.wc-block-checkout,
.wc-block-checkout * {
  pointer-events: auto;
}


/* 1.7 — fully remove financing placeholders that can flash as empty white boxes. */
.single-product .afterpay-paragraph,
.single-product .afterpay-payment-info,
.single-product .wc-klarna-product-message,
.single-product .klarna-product-message,
.single-product .payment-method-messaging,
.single-product .payment-method-message,
.single-product .wc-block-components-product-badge,
.single-product [data-payment-method*="afterpay" i],
.single-product [data-payment-method*="klarna" i],
.single-product [data-testid*="afterpay" i],
.single-product [data-testid*="klarna" i],
.single-product [aria-label*="afterpay" i],
.single-product [aria-label*="klarna" i] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
  transition: none !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden !important;
}

.single-product .meliora-financing-placeholder-removed {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}


/* Salon inquiry form feedback and spam protection */
.meliora-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important;}
.meliora-form-notice{margin:0 0 28px;padding:18px 22px;border:1px solid;font-size:15px;line-height:1.6;text-align:center;}
.meliora-form-success{background:#eef5ef;border-color:#9ab19f;color:#123c2c;}
.meliora-form-error{background:#fff2f0;border-color:#c98a82;color:#762a22;}
.meliora-form-error a{color:#123c2c;text-decoration:underline;}


/* 2.0 — mobile-responsive homepage without changing the desktop design */
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

@media (max-width: 767px) {
  html, body { overflow-x: hidden; }

  .meliora-site-header { position: relative; }
  .meliora-header-inner {
    padding: 16px 18px !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 14px !important;
  }
  .meliora-header-inner > div:first-child { min-width: 0; }
  .meliora-header-inner > div:first-child > div {
    font-size: 22px !important;
    white-space: nowrap !important;
  }
  .meliora-header-inner > a:last-child {
    padding: 10px 14px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  .meliora-main-nav {
    grid-column: 1 / -1 !important;
    order: 3 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 18px !important;
    width: 100% !important;
    overflow-x: auto !important;
    padding: 10px 0 3px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .meliora-main-nav::-webkit-scrollbar { display: none; }
  .meliora-main-nav a {
    flex: 0 0 auto !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  .meliora-hero {
    padding: 52px 22px 56px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 38px !important;
  }
  .meliora-hero h1 {
    font-size: clamp(42px, 13vw, 58px) !important;
    line-height: 1.02 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .meliora-hero p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    max-width: none !important;
  }
  .meliora-hero > div:first-child > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .meliora-hero > div:first-child > div:last-child a {
    width: 100% !important;
    text-align: center !important;
    padding: 15px 18px !important;
  }
  .meliora-hero > div:last-child { margin: 0 8px; }

  .meliora-benefits { padding: 46px 22px !important; }
  .meliora-benefits-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .meliora-benefits-grid > div {
    padding: 26px 8px !important;
    border-right: 0 !important;
    border-bottom: 1px solid oklch(40% 0.03 155) !important;
  }
  .meliora-benefits-grid > div:last-child { border-bottom: 0 !important; }
  .meliora-benefits-grid p { max-width: 310px; margin: 0 auto; }

  .meliora-ingredients,
  .meliora-reviews,
  .meliora-partner-form {
    padding: 58px 22px !important;
  }
  .meliora-ingredients h2,
  .meliora-reviews h2,
  .meliora-partner-form h2 { font-size: 32px !important; }
  .meliora-ingredients-grid,
  .meliora-reviews-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }
  .meliora-ingredients-grid > div,
  .meliora-reviews-grid > div { min-width: 0 !important; }
  .meliora-ingredients-grid h3 { font-size: 28px !important; }
  .meliora-ingredients-grid p,
  .meliora-reviews-grid p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    overflow-wrap: break-word !important;
  }

  .meliora-gallery { padding: 0 12px 46px !important; }
  .meliora-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .meliora-gallery-grid img {
    width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    border-radius: 3px;
  }

  .meliora-salons {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .meliora-salons-copy { padding: 58px 24px !important; }
  .meliora-salons-copy h2 { font-size: 38px !important; }
  .meliora-salons-copy p {
    font-size: 16px !important;
    line-height: 1.72 !important;
    max-width: none !important;
  }
  .meliora-salons > img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    object-position: center top !important;
  }

  .meliora-salon-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .meliora-salon-form > div,
  .meliora-form-submit { grid-column: 1 !important; }
  .meliora-salon-form input,
  .meliora-salon-form select { min-height: 48px !important; }
  .meliora-form-submit button { width: 100% !important; }

  .meliora-reviews-grid > div { padding: 26px 22px !important; }

  .meliora-footer { padding: 54px 24px 28px !important; }
  .meliora-footer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }
  .meliora-footer-grid > div { min-width: 0 !important; }
  .meliora-footer-grid p { max-width: none !important; }
  .meliora-footer-grid a,
  .meliora-footer-grid span,
  .meliora-footer-grid p {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .meliora-header-inner { padding: 18px 26px !important; flex-wrap: wrap !important; }
  .meliora-main-nav { order: 3; width: 100%; justify-content: center; gap: 20px !important; }
  .meliora-hero { padding: 70px 30px 60px !important; gap: 42px !important; }
  .meliora-benefits-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 28px 0; }
  .meliora-benefits-grid > div { border-right: 0 !important; }
  .meliora-ingredients-grid,
  .meliora-reviews-grid { grid-template-columns: 1fr !important; }
  .meliora-gallery-grid { gap: 14px !important; }
  .meliora-footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}


/* 2.2 navigation destinations and responsive content */
html { scroll-behavior: smooth; }
#how-to-use, #ingredients, #reviews, #salons, #partner-form, #faq, #contact { scroll-margin-top: 24px; }
@media (max-width: 760px) {
  .meliora-how-to-use, .meliora-faq { padding-left: 20px !important; padding-right: 20px !important; }
  .meliora-use-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .meliora-faq details { padding: 18px !important; }
}