:root {
	--display-font-family: Cardo;
	--body-font-family: Arima Madurai;

	--font-size: 17px

	--logo-padding: 0px;
	--logo-height: 233px;

	--header-width: 100%;
	--header-border-position: bottom;
	--header-border-size: 0;
	--header-bg-color: 0 0 0;
	--header-border-color: 255 255 255;

	--brand-color: 0 0 0;
	--brand-color-inverted: 224 197 1;

	--background-color: 255 15 ;
	--text-color: 61 61 61;
	--link-color: 224 197 1;

	--action-color: 0 0 0;
	--action-color-inverted: 255 255 255;

	--announcement-bar-bg-color: 220 193 1;
	--announcement-bar-text-color: 0 0 0;
	--announcement-bar-link-color: 0 0 0;

	--main-navigation-bg-color: 0 0 0;
	--main-navigation-link-color: 255 255 255;
	--main-navigation-link-color-hover: 255 255 255;
	--main-navigation-link-bg-color: 44 81 112;
	--main-navigation-link-font-size: 20px;
	--main-navigation-link-alignment: center;

	--auxiliary-bg-color: transparent;
	--auxiliary-border-color: transparent;
	--auxiliary-link-color: 233 202 58;

	--order-status-bg-color: 229 229 218;
	--order-status-color: 0 0 0;

	--store-menu-bg_color: 248 248 248;
	--store-menu-color: 119 7 ;

	--footer-bg-color: 32 32 32;
	--footer-color: 255 15 ;
	--footer-link-color: 255 15 ;
}

/*Custom Styles*/
/* =========================================================
   Love Less Sugar — CLEAN HEADER CSS (Desktop + Mobile)
   ========================================================= */

/* ---------- Global spacing knobs ---------- */
:root{
  --lls-pad-m: 16px;     /* mobile header L/R padding */
  --lls-pad-d: 96px;     /* desktop header L/R padding (80–128 ok) */
  --lls-mobile-logo: 128px;  /* mobile logo height you prefer (90–110 ok) */
  --lls-mobile-nav-top: 30px; /* vertical offset for the mobile icon row */
  --lls-mobile-bottom-pad: 12px; /* bottom padding under header on mobile */
}

/* ========================= DESKTOP (>=1024px) ========================= */
@media (min-width:1024px){

  /* Header gutter + slim top lane for Sign In / Create Account */
  .siteHeader__container.siteHeader__container--style2{
    box-sizing: border-box !important;
    padding-left: var(--lls-pad-d) !important;
    padding-right: var(--lls-pad-d) !important;
    padding-top: 14px !important;     /* room for auth links */
    position: relative !important;
  }

  /* Center main nav */
  #mainNavigation .mainNavigation__list{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 28px !important;
    position: static !important;      /* lets auth links anchor to header */
  }

  /* Top-right auth links (Sign In, Create Account) */
  .siteHeader__container.siteHeader__container--style2
  #mainNavigation .mainNavigation__list > li:nth-last-child(2),   /* Sign In */
  .siteHeader__container.siteHeader__container--style2
  #mainNavigation .mainNavigation__list > li:last-child{           /* Create Account */
    position: absolute !important;
    top: 6px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    z-index: 20 !important;
  }
  .siteHeader__container.siteHeader__container--style2
  #mainNavigation .mainNavigation__list > li:last-child{ right: 110px !important; }  /* Create Account */
  .siteHeader__container.siteHeader__container--style2
  #mainNavigation .mainNavigation__list > li:nth-last-child(2){ right: 255px !important; } /* Sign In */

  /* Auth link typography */
  .siteHeader__container.siteHeader__container--style2
  #mainNavigation .mainNavigation__list > li:nth-last-child(2) > a,
  .siteHeader__container.siteHeader__container--style2
  #mainNavigation .mainNavigation__list > li:last-child > a{
    font-size: 16px !important;  /* 15–17px if you like */
    line-height: 1.1 !important;
    font-weight: 500 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  /* Neutralize CTA pill if present */
  .siteHeader__container.siteHeader__container--style2
  #mainNavigation .mainNavigation__list > li:last-child > a.cta{
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* Remove beige "Sign In or Create Account" bar under header */
  .orderStatusBar{ display: none !important; height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
}

/* ========================= MOBILE (<=768px) ========================= */
@media (max-width:768px){

  /* Header: revert to simple block layout, control only padding */
  .siteHeader__container.siteHeader__container--style2{
    position: relative !important;
    display: block !important;
    padding: 10px var(--lls-pad-m) var(--lls-mobile-bottom-pad) !important; /* top, sides, bottom */
    min-height: auto !important;
  }

  /* BIGGER logo (use real height, no scaling) */
  .logo.logo--style2,
  .logo__container.logo__container--style2{
    display: flex !important;
    align-items: center !important;
    height: var(--lls-mobile-logo) !important;
    min-height: var(--lls-mobile-logo) !important;
  }
  .logo.logo--style2 a{ display: flex !important; align-items: center !important; height: 100% !important; }
  .logo.logo--style2 img,
  .logo__img.logo__img--style2,
  .logo__container.logo__container--style2 img{
    height: 100% !important;           /* fills the lane */
    max-height: none !important;
    width: auto !important;
    display: block !important;
    line-height: 0 !important;
    transform: none !important;
  }

  /* Use the real mobile icon row you have: <ul class="mobileNav"> */
  ul.mobileNav{
    position: absolute !important;     /* same row as logo */
    top: var(--lls-mobile-nav-top) !important;   /* you liked 22px */
    right: 16px !important;
    left: auto !important;
    z-index: 50 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 16px !important;

    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    white-space: nowrap !important;
  }
  ul.mobileNav a{ font-size: 17px !important; white-space: nowrap !important; }
  ul.mobileNav i{ font-size: 26px !important; line-height: 1 !important; }

  /* Hide duplicate hamburger inside the logo block (keep the right one) */
  .logo .siteHeader__mobileToggle{ display: none !important; }

  /* Hide desktop-style word nav on mobile (Shop Now / About Us / etc.) */
  #mainNavigation, .mainNavigation, .mainNavigation__list{ display: none !important; }

  /* Hide stray header titles like "Start Shopping" if theme outputs them */
  .siteHeader__container--style2 .pageTitle,
  .siteHeader__container--style2 .headerTitle,
  .siteHeader__container--style2 .page-title,
  .siteHeader__container--style2 .storeTitle,
  .siteHeader__container--style2 .pageHeading{ display: none !important; }
}

/* ========================= TABLET (769–1023px) ========================= */
@media (min-width:769px) and (max-width:1023px){
  .siteHeader__container.siteHeader__container--style2{
    position: relative !important;
    display: block !important;
    padding: 12px var(--lls-pad-m) var(--lls-mobile-bottom-pad) !important;
  }
  .logo.logo--style2, .logo__container.logo__container--style2{
    height: calc(var(--lls-mobile-logo) + 8px) !important; min-height: calc(var(--lls-mobile-logo) + 8px) !important;
  }
  .logo.logo--style2 img, .logo__img.logo__img--style2{ height: 100% !important; max-height: none !important; width: auto !important; }
  ul.mobileNav{ top: calc(var(--lls-mobile-nav-top) + 2px) !important; right: 20px !important; gap: 18px !important; }
}