/** Shopify CDN: Minification failed

Line 1129:0 All "@import" rules must come first

**/
/* ==========================================================================
   MERGED custom-css.css
   - Combined css2 + css3
   - Restored Ingredients, Signup, Footer blocks
   - Kept HOME breakout rules for headings
   - Fixed stray tokens, extra braces, invalid font-style uses
   - No debug outlines
   ========================================================================== */

/* ---------------------------
   Root variables
   --------------------------- */
:root{
  --footer-bg: #032a22;
  --footer-text: #f6f6f6;
  --footer-max-width: 1200px;
  --footer-inner-vertical: 18px;
  --logo-size-desktop: 300px;
  --logo-size-tablet: 220px;
  --logo-size-mobile: 120px;
  --footer-columns-gap: 48px;
  --margin-top-logo: 12px;
}

/* ---------------------------
   Font-face (Jost-Regular used in many blocks)
   --------------------------- */
@font-face {
  font-family: 'Jost-Regular';
  src: url('/fonts/Jost-Regular.woff2') format('woff2'),
       url('/fonts/Jost-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------
   Main Menu / Basic typographic defaults
   --------------------------- */
.hdt-block,
.hdt-line-clamp {
  font-family: 'Jost-Regular', serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
}

/* ---------------------------
  BEST SELLER &  Product page title & IvyMode headings
   (Global font, but no global left margin to avoid moving product pages)
   --------------------------- */


/* Product title underline (black) */
.hdt-product-info__item.hdt-product__title {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
.hdt-product-info__item.hdt-product__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
  border-radius: 2px;
}

/* ---------------------------
   Price and compare strike-through
   --------------------------- */
.hdt-compare-at-price {
  text-decoration: none;
  .hdt-money {
  text-decoration: line-through;
  }
}
.hdt-price,
.hdt-money {
   margin-top: 14px;
  font-family: 'Jost-Regular', serif !important;
  color: #000 !important;
  font-weight: 600 !important;
  font-size: clamp(36px, 2vw, 36px) !important;
}

.hdt-price__sale .hdt-price__list {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

/* Remove Shopify’s default strike-through completely */
.hdt-price__sale .hdt-compare-at-price,
.hdt-price__sale .hdt-compare-at-price .hdt-money,
.hdt-price__sale .hdt-compare-at-price .hdt-money * {
  text-decoration: none !important;
  color: #000 !important;
  position: relative;
}

/* Add ONE clean strike-through line */
.hdt-price__sale .hdt-compare-at-price .hdt-money::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  background: #000;
  border-radius: 2px;
  pointer-events: none;
}


.hdt-price__sale .hdt-price .hdt-money {
  color: #000 !important;
  font-weight: 700 !important;
  font-size: clamp(30px, 2vw, 30px) !important;
}







/* ---------------------------
   Benefits shield (reverted to 15px)
   --------------------------- */
.benefits-shield {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Jost-light', Jost, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #000;
  font-size: 22px;
  line-height: 1.25;
}
.benefits-shield-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.benefits-shield-item span {
  display: inline-block;
  line-height: 1.25;
  vertical-align: middle;
}
.benefits-shield-icon {
  width: 25px;
  height: 25px;
  display: block;
  flex: 0 0 25px;
  color: #000;
  
}
.benefits-shield-item { color: #000; }
.benefits-shield-item:hover { color: #000; }
@media (max-width:420px) {
  .benefits-shield { font-size: 15px; }
  .benefits-shield-icon { width: 15px; height: 15px; flex: 0 0 15px; }
}

/* ---------------------------
   Benefits list ticks
   --------------------------- */
.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0;
  padding: 0;
  font-family: 'Jost-Light', serif !important;
  font-size: 20px !important;
}
.benefits-list div {
  position: relative;
  padding-left: 20px;
  font-family: 'Jost-Light', serif;
  font-size: 14px;
  color: rgb(7, 7, 7);
  line-height: .8;
  font-family: 'Jost-Light', serif !important;
  font-size: 20px !important;
}
.benefits-list div::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: rgb(10, 10, 10);
  font-weight: 400;
  font-size: 14px;
  line-height: .8;
}

/* ---------------------------
   Accordion / Buttons / Form labels
   --------------------------- */
.hdt-flex, .hdt-align-center, .hdt-accordion-title,
.shopify-payment-button__button, .shopify-payment-button__button--unbranded,
.hdt-accordion-content, .hdt-text-base, .hdt-font-normal, .hdt-rte
{
  font-family: 'Jost-Light', serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 20px !important;
 /* color: #000 !important; */
  
}
/* ------------------------------------------------------------------
   Form: label on first line, select (value) on second line — responsive
   Scoped to .form-row to avoid affecting global .hdt-* utilities
   ------------------------------------------------------------------ */
.form-row {
  display: flex;
  flex-direction: column;      /* stack label above control */
  align-items: flex-start;
  gap: 6px;                    /* space between label and select */
  margin: 0 0 12px 0;
  width: 100%;
  box-sizing: border-box;
}

/* Label: Size (first line) */
.form-row .field-label {
  display: block !important;   /* ensure it is a block */
  margin: 0;
  padding: 0;
  font-family: 'Jost-Regular', sans-serif !important;
  font-size: 18px !important;  /* label size (edit to taste) */
  font-weight: 500 !important;
  color: #000 !important;
  line-height: 1.1 !important;
}

/* Select wrapper: keep position for the arrow icon */
.form-row .select-wrap {
  display: block !important;
  position: relative;
  width: 100%;                 /* let select fill container on small screens */
  max-width: 360px;            /* limit width on larger screens */
  box-sizing: border-box;
}

/* Select: placed on its own (second line) */
.form-row .custom-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block !important;           /* ensure select is on its own line */
  width: 100% !important;              /* full width within wrapper (responsive) */
  min-width: 140px !important;         /* fallback min width */
  padding: 8px 28px 8px 0 !important;  /* keep room for arrow (right) */
  font-family: 'Jost-Regular', sans-serif !important;
  font-size: 16px !important;          /* selected-value size (edit to taste) */
  color: rgb(10,10,10) !important;
  background: transparent !important;
  border: 0 !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

/* Underline visual element stays under select */
.form-row .select-underline {
  display: block !important;
  height: 2px !important;
  width: 62px !important;
  background-color: rgb(7,7,7) !important;
  margin-top: 8px !important;
  border-radius: 2px !important;
}

/* Arrow indicator positioning (no change from your base, just ensure it's inside wrapper) */
.form-row .select-wrap::after {
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 12px !important;
  height: 12px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

/* Small screens: tighten spacing & font-sizes */
@media (max-width: 420px) {
  .form-row {
    gap: 6px;
  }
  .form-row .field-label {
    font-size: 16px !important;
  }
  .form-row .custom-select {
    font-size: 15px !important;
    min-width: 120px !important;
    padding-right: 28px !important;
  }
  .form-row .select-underline { width: 54px !important; }
}

/* Larger screens: keep the label + select aligned, but allow more width */
@media (min-width: 641px) {
  .form-row {
    max-width: 460px;    /* controls width of the select area on desktop */
  }
  .form-row .field-label {
    font-size: 18px !important;
  }
  .form-row .custom-select {
    font-size: 16px !important;
  }
}


/* ---------------------------
   Ingredients Section (restored from css2)
   --------------------------- */
/* Start Product Page - Ingredient List */
.ingredients-section {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 10px 0;
  max-width: 800px;
  margin: 0 auto;
  border-bottom: 1px solid #ccc;
  font-family: 'Jost-Regular', sans-serif;
  font-size: 20px !important;
   margin-left:30px !important;
    margin-right:10px !important;
}
.amla-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}
.amla-text {
  flex: 1;
  color: #333;
  line-height: 1.5;
  margin: 0;
  font-family: 'Jost-Light', sans-serif !important;
  font-size: 20px !important;
}
@media (max-width: 640px) {
  .ingredients-section {
    flex-direction: row !important;   /* keep image + text side-by-side */
    align-items: center !important;
    text-align: left !important;      /* keep text left-aligned */
    gap: 12px !important;             /* slightly smaller gap */
    margin-left:10px !important;
    margin-right:10px !important;
  }

  .amla-image {
    width: 80px !important;
    height: 80px !important;          /* scale down for mobile */
  }

  .amla-text {
    font-size: 15px !important;
    text-align: left !important;
  }
}

.key-ingredients-title {
  font-family: 'IvyMode', sans-serif !important;
  font-size: 50px !important;
  color: #000 !important;
  font-weight:600;
  margin-left:20px;
}

.week-change,
.week-change-header {
  display: inline-block;
  margin: 0;        /* remove spacing */
  padding: 0;
}

.week-change-header {
  font-family: 'EditorialNew-Italic', sans-serif !important;
  font-size: 60px !important;
  color: #000 !important;
  font-weight:600;
}

.week-change {
  font-family: 'IvyMode', sans-serif !important;
  font-size: 60px !important;
  color: #000 !important;
  font-weight:600;
  margin-left: 5px;   /* adjust spacing the way YOU want */
}

.custom-banner1-change,
.custom-banner1-header {
  display: inline-block;
  margin: 0;        /* remove spacing */
  padding: 0;
}

.custom-banner1-header {
  font-family: 'EditorialNew-Italic', sans-serif !important;
  font-size: 60px !important;
  color: #000 !important;
  font-weight:400;
}

.custom-banner1-change {
  font-family: 'IvyMode', sans-serif !important;
  font-size: 60px !important;
  color: #000 !important;
  font-weight:400;
  margin-left: 5px;   /* adjust spacing the way YOU want */
}
/* --- Global Reset (Removed the problematic shared block) --- */
/* We will define the display property separately for each class */
.custom-banner2-header,
.custom-banner2-change {
  margin: 0; 
  padding: 0;
  /* Removed the display: inline-block; from the shared selector */
}

/* ---------------------------------------------------------------- */
/* --- DESKTOP STYLES (Default) --- */
/* ---------------------------------------------------------------- */

/* --- First Line: A VERY MERRY HAIRCARE, --- */
.custom-banner2-change {
  font-family: 'EditorialNew-Italic', sans-serif !important;
  font-size: 50px !important;
  color: #ffffff !important;
  font-weight: 400;
  
  /* FIX FOR TWO LINES: Make this a block element so the next P tag starts on a new line */
  display: block; 
  
  /* The margin-left: 5px; is not needed when it's a block element */
  margin-left: 0; 
  margin-bottom: -20px;
}

/* --- Second Line: POWERED BY BOTANICAL SCIENCE --- */
.custom-banner2-header {
  font-family: 'IvyMode', sans-serif !important;
  font-size: 50px !important;
  color: #ffffff !important;
  font-weight: 400;
  
  /* Make sure this is also a block element */
  display: block; 
}


/* ---------------------------------------------------------------- */
/* --- MOBILE STYLES (Max-width 768px) --- */
/* This block ensures text shrinks and wraps properly on small screens */
/* ---------------------------------------------------------------- */
@media (max-width: 768px) {
  
  /* Apply responsive font size to both lines */
  .custom-banner2-header,
  .custom-banner2-change {
    /* Smaller font size to prevent horizontal overflow */
    font-size: 28px !important; 
    
    /* Ensure the text can wrap if the line is long */
    white-space: normal !important; 
    
    /* Ensure they are stacked and take full width */
    display: block;
  }
  
  /* Optional: Adjust vertical spacing between the stacked lines */
  .custom-banner2-change {
    margin-bottom: 5px; 
  }
}
/* ---------------------------
   Newsletter / Signup (restored from css2)
   --------------------------- */
.hdt-newsletter,
.newsletter__wrapper,
form[action*="contact"] {
  max-width: 520px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.hdt-newsletter input[type="email"],
.newsletter__wrapper input[type="email"],
form[action*="contact"] input[type="email"] {
  width: 100% !important;
  padding: 14px 18px !important;
  border-radius: 6px !important;
  border: 1px solid #ccc !important;
  font-size: 16px !important;
  font-family: 'Jost-Regular', sans-serif !important;
  box-sizing: border-box !important;
}
.hdt-newsletter button,
.newsletter__wrapper button,
form[action*="contact"] button {
  width: 100% !important;
  margin-top: 12px !important;
  padding: 14px 18px !important;
  background: #032a22 !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  font-size: 16px !important;
  border: none !important;
  cursor: pointer !important;
}
.hdt-newsletter input::placeholder,
.newsletter__wrapper input::placeholder {
  color: #888 !important;
  opacity: 1 !important;
}
@media (max-width: 640px) {
  .hdt-newsletter input[type="email"],
  .newsletter__wrapper input[type="email"],
  form[action*="contact"] input[type="email"] {
    font-size: 15px !important;
    padding: 12px !important;
  }
  .hdt-newsletter button,
  .newsletter__wrapper button,
  form[action*="contact"] button {
    font-size: 15px !important;
    padding: 12px !important;
  }
}

/* ---------------------------
   HOME breakout rules (keep, page-scoped)
   --------------------------- */
/* Break BEST SELLERS out to viewport-left + 2.5vw */
body.hdt-page-type-index .hdt-row-grid.hdt-section-heading_block .hdt-h_custom {
  position: relative !important;
  display: inline-block !important;
  margin-left: 0 !important;
  left: calc(50% - 50vw + 2.5vw) !important;
  max-width: none !important;
  transform: none !important;
}
/* Break SUB-HEADING out to match and change font to Jost-Regular */
body.hdt-page-type-index .hdt-row-grid.hdt-section-heading_block .hdt-subheading-block {
  position: relative !important;
  display: inline-block !important;
  margin-left: 0 !important;
  left: calc(50% - 50vw + 2.5vw) !important;
  max-width: none !important;
  font-family: 'Jost-Regular', serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  }

/* ---------------------------
   Footer (restored from css2)
   --------------------------- */
/* =============================================================
   1. GLOBAL & DESKTOP STYLES
   ============================================================= */

/* Main Footer Container */
footer .hdt-container-full.hdt-footer-collapse-false,
footer .hdt-container-full.hdt-relative {
  background: var(--footer-bg) !important;
  padding-inline: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Row Setup - Keeps columns side-by-side on Desktop */
footer .hdt-container-full .hdt-row {
  max-width: var(--footer-max-width);
  margin: 0 auto;
  padding: var(--footer-inner-vertical) 18px;
  display: flex !important;
  justify-content: space-between !important; /* Spreads columns out */
  gap: var(--footer-columns-gap) !important;
  flex-wrap: nowrap !important; /* Keeps them in one line on wide screens */
  align-items: flex-start !important;
}

/* BOLD HEADINGS (Shop All, Customer Care, Legal) */
footer .hdt-footer-heading-text {
  font-family: 'Jost-Regular', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important; /* Bold for beauty and hierarchy */
  text-align: left !important;
  display: block !important;
  margin-bottom: 15px !important;
  color: #fff8e5 !important;
  text-transform: uppercase !important; /* Matching Image 2 style */
  letter-spacing: 1px !important;
}

/* Footer Content & Links */
footer .hdt-col-content,
footer .hdt-col-content a,
.footer-styling a {
  font-family: 'Jost-Regular', sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  text-align: left !important;
  display: block !important;
  margin: 8px 0 !important;
  color: #fff8e5 !important;
  text-decoration: none !important; /* Clean look without underlines */
  transition: opacity 0.3s ease;
}

footer .hdt-col-content a:hover {
  opacity: 0.7;
}

/* Logo Section */
.footer-logo-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  margin: 50px auto !important;
}

.footer-logo-text {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 150px !important; /* Adjusted for desktop */
  color: #fff8e5 !important;
  line-height: 1 !important;
}

/* =============================================================
   2. UNIVERSAL MOBILE STYLES (Targets most phones)
   ============================================================= */

@media screen and (max-width: 767px) {
  /* Force columns to stack like Image 2 */
  footer .hdt-container-full .hdt-row { 
    flex-direction: column !important; 
    flex-wrap: wrap !important;
    gap: 40px !important; /* Generous space between blocks */
    padding: 40px 25px !important;
    align-items: flex-start !important;
  }

  /* Make each block take the full width */
  footer .hdt-footer-col-block {
    width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Heading size adjustment for mobile */
  footer .hdt-footer-heading-text {
    font-size: 20px !important;
    margin-bottom: 12px !important;
  }

  /* Link size adjustment for mobile */
  footer .hdt-col-content a,
  .footer-styling a {
    font-size: 18px !important;
    padding: 6px 0 !important;
    margin: 4px 0 !important;
  }

  /* Responsive Logo Size */
  .footer-logo-text {
    font-size: 80px !important;
  }
  
  .footer-copyright {
    white-space: normal !important;
    font-size: 13px !important;
    text-align: center !important;
  }
}


/* ---------------------------
  END Footer (restored from css2)
   --------------------------- */


.ego-title, .ego-radio-label, .ego-price {
  font-family: 'Jost-Regular', serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: #000 !important;
}









/* ===== Footer text styling (narrow targets, excludes logo) ===== */

/* Apply to common text elements in footer (NOT everything) */
.shopify-section-group-footer-group
  .hdt-footer-heading-text,
.shopify-section-group-footer-group
  .hdt-col-content,
.shopify-section-group-footer-group
  .hdt-col-content a,
.shopify-section-group-footer-group
  .hdt-col-content p,
.shopify-section-group-footer-group
  .hdt-col-content li,
.shopify-section-group-footer-group
  .hdt-col-content span {
  color: #fff8e5 !important;
  font-family: 'Jost-Regular', sans-serif !important;
  font-style: normal !important;
  font-size: clamp(18px, 2vw, 18px) !important;
  text-decoration: none !important;
}

/* ===== Explicitly restore logo sizing & family (must come AFTER the generic footer rules) ===== */
/* =============================================================
   FOOTER LOGO (RO|OT) & COPYRIGHT STYLING
   ============================================================= */

/* Container for the logo and copyright */
/* --- Wrapper --- */
.footer-logo-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  margin: 60px auto 40px !important;
}

/* --- The Logo Text Container --- */
.footer-logo-text {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(60px, 18vw, 200px) !important; 
  color: #fff8e5 !important;
  line-height: 1 !important;
  
  /* Flexbox forces the letters and the bar to share the same middle line */
  display: inline-flex !important;
  align-items: center !important; 
  justify-content: center !important;
  white-space: nowrap !important;
}

/* --- The Vertical Bar "|" Fix --- */
.logo-divider {
  /* This forces the bar to match the exact size of the capital letters */
  font-size: 1.1em !important; 
  font-weight: 200 !important; /* Makes it thinner and more elegant */
  color: #fff8e5 !important;
  margin: 0 0.05em !important;
  
  /* Centering Logic */
  display: inline-flex !important;
  align-items: center !important;
  line-height: 0 !important;
  
  /* Nudge: This pulls the bar up to match the top of the letters */
  transform: translateY(-4%) !important; 
}

/* --- Copyright --- */
.footer-copyright {
  font-family: 'Jost-Regular', sans-serif !important;
  font-size: 14px !important;
  color: #fff8e5 !important;
  opacity: 0.6 !important;
  margin-top: 20px !important;
  text-transform: uppercase !important;
}

/* --- Mobile Fix --- */
@media screen and (max-width: 767px) {
  .footer-logo-text {
    font-size: 80px !important; /* Scaled for mobile */
  }
}
/* END */






/* ==========================================================================
   CLEANED & CONSOLIDATED: headings & product-title sizing
   - Removes duplicates and conflicting rules
   - Page-scoped: HOME vs PRODUCT
   - Explicit mobile / tablet / desktop sizes
   ========================================================================== */

/* -------------------------
   Baseline for .hdt-h_custom (neutral)
   Used only when a page-scoped rule does not override it
   ------------------------- */
.hdt-h_custom,
.hdt-container .hdt-h_custom,
.hdt-product-info__item.hdt-product__title {
  font-family: 'IvyMode', serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: clamp(50px, 3vw, 50px) !important; /* baseline */
  margin: 0 !important;
  line-height: 1.06 !important;
  
}

/* -------------------------
   HOME (BEST SELLERS, section headings)
   Larger on desktop, slightly smaller on mobile
   ------------------------- */
body.hdt-page-type-index .hdt-row-grid.hdt-section-heading_block .hdt-h_custom,
body.hdt-page-type-index .hdt-h_custom {
  font-size: clamp(48px, 4vw, 50px) !important;
  margin-top: 24px !important;
  margin-bottom: 22px !important;
}





/* -------------------------
   Keep mobile-hide utility working (strong)
   ------------------------- */
@media (max-width: 640px) {
  .hdt-hide-mobile,
  .hdt-br-hidden {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}



















/* ===========================
   HOME HERO: Sale / Headline / Button — stable overrides
   Put this at the VERY END of custom-css (7).css
   =========================== */

/* ---------- Small heading: "SALE OFF UP TO 70%" ---------- */
/* Targets the small h5-like block inside the content-inner on homepage */
body.hdt-page-type-index .hdt-content-inner > .hdt-h5.hdt-font-medium,
body.hdt-page-type-index .hdt-content-inner > .hdt-h5.hdt-font-medium p {
  font-family: 'Jost-Regular', sans-serif !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-size: 16px !important;            /* <-- change this to control small heading desktop size */
  margin: 0 0 6px 0 !important;
  line-height: 1.1 !important;
}

/* Mobile tweak for the small heading */
@media (max-width: 640px) {
  body.hdt-page-type-index .hdt-content-inner > .hdt-h5.hdt-font-medium,
  body.hdt-page-type-index .hdt-content-inner > .hdt-h5.hdt-font-medium p {
    font-size: 14px !important;          /* <-- mobile size for small heading */
    letter-spacing: 0.04em !important;
  }
}

/* ---------- Main hero headline Title: "SS 2025 New Arrival" ---------- */
/* Stable selector: the big text-4xl block inside the same content-inner */
body.hdt-page-type-index .hdt-content-inner > .hdt-text-4xl.hdt-font-normal,
body.hdt-page-type-index .hdt-content-inner > .hdt-text-4xl.hdt-font-normal p {
  font-family: 'IvyMode', serif !important; 
  color: #ffffff !important;
  font-weight: 400 !important;
  font-size: clamp(48px, 4.2vw, 48px) !important; /* <-- desktop & responsive max */
  margin: 0 0 18px 0 !important;
  line-height: 1.02 !important;
  text-align: center;                         /* keep centered inside content-inner */
  color: #ffffff !important;
}
/* Banner Desktop Text */
/* If you want a different fixed desktop size, replace clamp() with e.g. 48px */
@media (min-width: 1200px) {
  body.hdt-page-type-index .hdt-content-inner > .hdt-text-4xl.hdt-font-normal,
  body.hdt-page-type-index .hdt-content-inner > .hdt-text-4xl.hdt-font-normal p {
    font-size: 52px !important;               /* adjust desktop headline size */
    color: #ffffff !important
  }
}

/* Mobile headline — smaller, prevents overflow */
@media (max-width: 640px) {
  body.hdt-page-type-index .hdt-content-inner > .hdt-text-4xl.hdt-font-normal,
  body.hdt-page-type-index .hdt-content-inner > .hdt-text-4xl.hdt-font-normal p {
    font-size: clamp(40px, 6.5vw, 40px) !important; /* mobile sizing */
    margin-bottom: 12px !important;
  }
}

/* ---------- Shop now button (center/spacing/style) ---------- */
/* Targets the button block inside the same content-inner. */
body.hdt-page-type-index .hdt-content-inner > .hdt-button-block.hdt-btn,
body.hdt-page-type-index .hdt-content-inner > .hdt-button-block.hdt-btn .hdt-btn {
  display: inline-block !important;
  margin-top: 18px !important;
  
  padding: 12px 30px !important;
  background: rgba(3,42,34,0.95) !important; /* dark background */
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
  opacity: 1 !important;
}

/* Button text size, responsive */
body.hdt-page-type-index .hdt-content-inner > .hdt-button-block.hdt-btn span {
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Button mobile adjustments */
@media (max-width: 640px) {
  body.hdt-page-type-index .hdt-content-inner > .hdt-button-block.hdt-btn,
  body.hdt-page-type-index .hdt-content-inner > .hdt-button-block.hdt-btn .hdt-btn {
    padding: 10px 20px !important;
  }
  body.hdt-page-type-index .hdt-content-inner > .hdt-button-block.hdt-btn span {
    font-size: 15px !important;
  }
}

/* ---------- vertical spacing control: move whole content block up/down ---------- */
/* If hero content sits too low or too high, adjust the top offset on content wrapper */
body.hdt-page-type-index .hdt-content {
  margin-top: 0 !important;            /* default, change to push up/down */
  padding-top: 0 !important;
}

/* Example: add more top spacing on desktop (uncomment/edit) */
/* body.hdt-page-type-index .hdt-content { margin-top: 40px !important; } */

/* Example: reduce top spacing on mobile */
/* @media (max-width:640px) { body.hdt-page-type-index .hdt-content { margin-top: 8px !important; } } */


/* target the custom element directly HERO BANNER */
custom-title-hero {
  display: block;                     /* make it behave like a block element */
  font-family: 'IvyMode', serif !important;
  color: #ffffff !important;
  font-weight: 400 !important;
  font-size: clamp(36px, 4.2vw, 56px) !important; /* adjust min / vw / max to taste */
  margin: 0 0 18px 0 !important;
  line-height: 1.02 !important;
  text-align: center !important;
  text-transform: none !important;
  box-sizing: border-box;
  padding-inline: 8px;                /* small horizontal padding to avoid touching edges */
  word-break: keep-all;
  margin-bottom: 18px !important;
}


/* Product Page Size: */
.hdt-product-form__label, .hdt-s-text, .hdt-font-bold , .hdt-product-form_value,  .is-type-circle, .shopify-payment-button__more-options
{
   font-family: 'Jost-Regular', serif !important;
}





/* Cookies Code */

/* --- Cookie Bar Main Wrapper --- */
.cookie-bar-wrap {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1000px;
  background-color: #ffffff; /* Clean white background */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Soft professional shadow */
  border-radius: 8px;
  z-index: 9999;
  padding: 20px 30px;
  border: 1px solid #f0f0f0;
}

/* --- Layout Container --- */
.cookie-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

/* --- Text Content --- */
.cookie-content p {
  margin: 0;
  font-family: 'Jost-Regular', sans-serif !important;
  font-size: 14px;
  color: #333333;
  line-height: 1.5;
}

.cookie-content a {
  color: #000;
  text-decoration: underline;
  font-weight: 600;
}

/* --- Button Group --- */
.cookie-buttons {
  display: flex;
  gap: 12px;
  white-space: nowrap;
}

/* --- Professional Button Styling --- */
.cookie-buttons button {
  padding: 10px 24px;
  font-family: 'Jost-Regular', sans-serif !important;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: #000; /* Matches your brand buttons */
  color: #fff;
  border: 1px solid #000;
}

.btn-primary:hover {
  background-color: #333;
}

.btn-secondary {
  background-color: transparent;
  color: #666;
  border: 1px solid #ccc;
}

.btn-secondary:hover {
  background-color: #f9f9f9;
  border-color: #999;
}

/* --- Responsive Mobile Layout --- */
@media screen and (max-width: 767px) {
  .cookie-bar-wrap {
    bottom: 10px;
    padding: 20px;
  }
  
  .cookie-container {
    flex-direction: column; /* Stacks text and buttons on mobile */
    text-align: center;
    gap: 20px;
  }

  .cookie-buttons {
    width: 100%;
    flex-direction: column;
  }

  .cookie-buttons button {
    width: 100%;
  }
}
/*End Cookies Code */


/* Hair Oil Page How to Use video*/

/* Import a clean font similar to the image (optional, but recommended) */
/* Import a clean font similar to the image */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

/* --- Base Styles (Mobile First) --- */
.howtouse-card {
  font-family: 'Poppins', sans-serif;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  max-width: 100%;
  box-sizing: border-box;
  
  /* FORCE LEFT ALIGNMENT */
  text-align: left; 
  
  /* Text Color from image */
  color: #58687a; 
}

.howtouse-title {
  font-weight: 700;   /* Bold */
  font-size: 18px;
  margin-bottom: 8px;
  color: #6c7a89;     /* Title color */
}

.howtouse-text {
  font-weight: 400;   /* Regular */
  font-size: 16px;
  line-height: 1.5;   /* Spacing between lines */
}

/* --- Desktop Styles (Media Query) --- */
@media (min-width: 768px) {
  .howtouse-card {
    padding: 24px;
    max-width: 350px;
  }

  .howtouse-title {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .howtouse-text {
    font-size: 18px;
  }
}



/* Hair Oil Page How to Use video*/

/* =========================================
   1. HIDE QUANTITY BOX
   ========================================= */
.hdt-quantity-wrapp.hdt-relative {
    display: none !important;
}

/* =========================================
   2. BUNDLE WIDGET STYLING
   ========================================= */

/* Main Container Reset */
.amp-bundles__volume-discount-bundles {
    font-family: 'Jost-Regular', sans-serif !important;
    max-width: 100%;
    margin: 20px auto;
    box-sizing: border-box;
}

/* The Headline */
.amp-bundles__volume-discount-bundles__headline {
  font-family: 'Jost-Regular', sans-serif !important;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #000;
}

/* --- THE CARDS (TIER OPTIONS) --- */
.amp-bundles__volume-discount-bundles__tier-option {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    
    /* Box Styling */
    background: #fff;
    border: 1px solid #C4A485 !important; /* Gold/Brown Border */
    border-radius: 12px !important;
    padding: 15px 20px !important;
    margin-bottom: 12px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Selected Card State */
.amp-bundles__volume-discount-bundles__tier-option--selected {
    border: 2px solid #5C4033 !important; /* Darker Brown for selection */
    background-color: #fff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* --- RADIO BUTTON --- */
.amp-bundles__volume-discount-bundles__tier-radio {
    /* Use accent-color for a native look that matches the theme */
    accent-color: #5C4033; 
    width: 20px;
    height: 20px;
    margin-right: 15px !important;
    flex-shrink: 0;
    cursor: pointer;
}

/* --- CONTENT LAYOUT --- */
.amp-bundles__volume-discount-bundles__tier-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: nowrap; /* Prevents wrapping on desktop */
}

/* Text Information Section (Buy 1, Save 10%) */
.amp-bundles__volume-discount-bundles__tier-info {
    display: flex;
    flex-direction: column !important; /* Stacks "Buy 1" and "Save 10%" vertically */
    align-items: flex-start !important;
    justify-content: center;
    text-align: left !important;
    margin-right: 10px;
}

/* "Buy 1" Text */
.amp-bundles__volume-discount-bundles__tier-text {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin-bottom: 4px;
    line-height: 1.2;
}

/* "Save 10%" Badge - Styled as text to match your image */
.amp-bundles__volume-discount-bundles__tier-badge {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.amp-bundles__volume-discount-bundles__tier-badge div {
    font-size: 13px !important;
    color: #8C6A4B !important; /* Brown text color */
    font-weight: 400 !important;
    background: transparent !important;
    padding: 0 !important;
}

/* --- PRICING --- */
.amp-bundles__volume-discount-bundles__tier-prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0; /* Ensures price doesn't get squashed */
}

/* Original Price (Red strikethrough) */
.amp-bundles__volume-discount-bundles__tier-prices__original {
    font-size: 13px !important;
    color: #D32F2F !important; /* Red */
    text-decoration: line-through;
    margin-bottom: 2px;
}

/* Final Price (Bold Black) */
.amp-bundles__volume-discount-bundles__tier-prices__discounted {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #000 !important;
}

/* --- POPULAR RIBBON --- */
/* Positioning it absolutely to the top right of the card */
.amp-bundles__volume-discount-bundles__highlight-ribbon {
    position: absolute;
    top: -10px;
    right: 15px;
    background-color: #6d4c41 !important; /* Brown background */
    color: #fff !important;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    z-index: 5
    line-height: 1;
    letter-spacing: 0.5px;
}

/* --- BOTTOM SUMMARY SECTION --- */
.amp-bundles__volume-discount-bundles__summary {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.amp-bundles__volume-discount-bundles__totals {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
}

.amp-bundles__volume-discount-bundles__benefit-text {
    color: #D32F2F; /* Red for "You Save" text */
    font-weight: 700;
    text-align: right;
    display: block;
    width: 100%;
    margin-bottom: 5px;
}

/* Hide the icon next to "You save" if you want a cleaner look like the image */
.amp-bundles__volume-discount-bundles__benefit-icon {
    display: none; 
}

/* --- MOBILE RESPONSIVENESS --- */
@media only screen and (max-width: 480px) {
    .amp-bundles__volume-discount-bundles__tier-option {
        padding: 12px !important;
    }

    .amp-bundles__volume-discount-bundles__tier-text {
        font-size: 14px;
    }

    .amp-bundles__volume-discount-bundles__tier-prices__discounted {
        font-size: 16px !important;
    }
    
    .amp-bundles__volume-discount-bundles__tier-radio {
         margin-right: 10px !important;
    }
}
/* END AMP Bundle Code */



/* This code is for video Banner to set the mobile margin 10px */
@media (max-width: 1149px) {
    /* We use the exact ID to match the theme's specificity */
  .hdt-media-overlap-content {
        --media-overlap-content-gap-r: 10px !important;
        --media-overlap-content-gap-c: 10px !important;
        
        /* Just in case the theme uses direct margins instead of variables later on */
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
}

/* END - This code is for video Banner to set the mobile margin 10px */


.custom-progress-section {
  margin-inline: 10px !important;
}