/* ============================================================
   ALO Shell – Global Header / Footer Styles
   Targets Astra Builder output to match aloyoga.com official site
   ============================================================ */

/* --- Shared font stack ------------------------------------ */
.alo-shell .alo-topbar,
.alo-shell .alo-rewardsbar,
.alo-shell header.site-header,
.alo-shell footer.site-footer {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Shared container width ------------------------------- */
.alo-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 18px;
}
@media (min-width: 834px)  { .alo-container { padding: 0 24px; } }
@media (min-width: 1280px) { .alo-container { padding: 0 40px; } }

/* Match site content container width to header/footer */
.alo-shell .site-content .ast-container {
  max-width: 1440px;
}
@media (min-width: 834px) {
  .alo-shell .site-content .ast-container { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1280px) {
  .alo-shell .site-content .ast-container { padding-left: 40px; padding-right: 40px; }
}


/* ============================================================
   ABOVE HEADER – Pink promo bar (FREE SHIPPING & FREE RETURNS)
   ============================================================ */
.alo-shell .ast-above-header-wrap,
.alo-shell .ast-above-header-bar {
  background: #f7c9d6 !important;
  border-bottom: none !important;
}

/* Reset Astra above-header padding so our topbar controls spacing */
.alo-shell .ast-above-header-bar .site-above-header-wrap {
  padding: 0 !important;
  min-height: auto !important;
}

/* Topbar inner styling */
.alo-topbar {
  text-align: center;
  padding: 8px 0;
  position: relative;
}
.alo-topbar__promo {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: #111;
  line-height: 1.4;
}
.alo-topbar__cta {
  color: inherit;
  text-decoration: underline;
  margin-left: 10px;
  white-space: nowrap;
}
.alo-topbar__cta:hover { text-decoration: none; }
.alo-topbar__text {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: #111;
  line-height: 1.8;
}

/* Pause button on the right (like official) */
.alo-topbar__pause {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #111;
  padding: 4px;
  display: flex;
  align-items: center;
}
.alo-topbar__pause svg {
  width: 14px;
  height: 14px;
}


/* ============================================================
   PRIMARY HEADER – White bar with logo, menu, actions
   ============================================================ */

/* Sticky + base styling */
.alo-shell header.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
}

/* Primary header row */
.alo-shell .ast-primary-header-bar,
.alo-shell .main-header-bar {
  background: #fff !important;
}

.alo-shell .site-primary-header-wrap {
  padding-top: 0;
  padding-bottom: 0;
}

/* Hide below header row completely */
.alo-shell .ast-below-header-wrap,
.alo-shell .ast-below-header-bar {
  display: none !important;
}


/* ============================================================
   LOGO – "alo" text styled to match official wordmark
   ============================================================ */
.alo-shell .site-branding {
  display: flex;
  align-items: center;
}

/* When site title is used as logo */
.alo-shell .ast-site-title-wrap .site-title {
  margin: 0 !important;
  padding: 0 !important;
}
.alo-shell .ast-site-title-wrap .site-title a,
.alo-shell .site-title a {
  font-family: Georgia, "Times New Roman", Times, serif !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  color: #111 !important;
  text-transform: lowercase !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

/* Hide the white-fill SVG custom logo; rely on site-title "alo" text */
.alo-shell .site-logo-img,
.alo-shell .custom-logo-link {
  display: none !important;
}

/* Gap between logo and menu */
.alo-shell .ast-builder-layout-element.ast-flex.site-header-focus-item[data-section="title_tagline"] {
  margin-right: 16px;
}


/* ============================================================
   PRIMARY MENU – Uppercase, bold, clean horizontal nav
   ============================================================ */
.alo-shell .main-header-menu > .menu-item > .menu-link {
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: #111 !important;
  padding: 0.65rem 0.5rem !important;
  line-height: 1.4 !important;
}
.alo-shell .main-header-menu > .menu-item > .menu-link:hover {
  text-decoration: underline;
}

/* Tighten top-level menu spacing */
.alo-shell .main-header-menu {
  gap: 4px;
}
.alo-shell .main-header-menu > .menu-item {
  margin: 0 !important;
}

/* Remove Astra dropdown arrows on desktop top-level */
@media (min-width: 922px) {
  .alo-shell .main-header-menu > .menu-item > .menu-link .ast-header-navigation-arrow,
  .alo-shell .main-header-menu > .menu-item > .menu-link .ast-icon.icon-arrow {
    display: none !important;
  }
}

/* Submenu dropdown (desktop) */
@media (min-width: 922px) {
  .alo-shell .main-header-menu .sub-menu {
    background: #fff;
    border: 1px solid rgba(17, 17, 17, 0.08);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
    padding: 12px 20px;
    min-width: 240px;
    border-radius: 0;
  }
  .alo-shell .main-header-menu .sub-menu .menu-link {
    display: block;
    padding: 7px 0 !important;
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    font-weight: 400 !important;
    color: rgba(17, 17, 17, 0.72) !important;
  }
  .alo-shell .main-header-menu .sub-menu .menu-link:hover {
    color: #111 !important;
    text-decoration: underline;
  }
  /* Remove Astra submenu top border */
  .alo-shell .main-header-menu .sub-menu {
    border-top: none;
  }
  .alo-shell .submenu-with-border .sub-menu {
    border-top: none !important;
  }
}


/* ============================================================
   RIGHT SIDE ACTIONS – Search, Sign In, Wishlist, Cart
   ============================================================ */

/* Astra Search icon – match official magnifying glass */
.alo-shell .ast-header-search .astra-search-icon,
.alo-shell .ast-header-search .search-field,
.alo-shell .ast-header-search svg {
  color: #111 !important;
}
.alo-shell .ast-header-search svg {
  width: 18px;
  height: 18px;
}
.alo-shell .ast-header-search .ast-search-icon {
  display: flex;
  align-items: center;
}
.alo-shell .ast-header-search .ast-search-icon a {
  display: flex;
  align-items: center;
  padding: 4px;
}
/* When search is expanded (slide) */
.alo-shell .ast-search-menu-icon.ast-inline-search .search-form {
  border: 1px solid rgba(17,17,17,0.12);
  border-radius: 4px;
  background: #fff;
}
.alo-shell .ast-search-menu-icon .search-form .search-field {
  font-size: 12px;
  color: #111;
  letter-spacing: 0.04em;
}
.alo-shell .ast-search-menu-icon .search-form .search-field::placeholder {
  color: rgba(17,17,17,0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* "SIGN IN TO GET REWARDS" link */
.alo-signin-rewards {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: #111;
  text-decoration: none;
  white-space: nowrap;
  padding: 0 4px;
}
.alo-signin-rewards:hover {
  text-decoration: underline;
  color: #111;
}
/* Person icon via CSS (since WP KSES strips inline SVG) */
.alo-signin-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.5'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}
/* Hide "SIGN IN" text on smaller screens, keep icon */
@media (max-width: 1100px) {
  .alo-signin-rewards .alo-signin-text {
    display: none;
  }
}

/* Heart / Wishlist icon (via CSS background) */
.alo-wishlist-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  color: #111;
  text-decoration: none;
}
.alo-heart-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.alo-wishlist-icon:hover .alo-heart-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}

/* WooCommerce Cart icon */
.alo-shell .ast-cart-menu-wrap .ast-cart-icon {
  color: #111;
}
.alo-shell .ast-cart-menu-wrap svg,
.alo-shell .ast-header-woo-cart svg {
  width: 18px !important;
  height: 18px !important;
  color: #111;
}
.alo-shell .ast-header-woo-cart .ast-woo-header-cart-info-wrap {
  display: none;
}

/* Cart badge count */
.alo-shell .ast-cart-menu-wrap .count,
.alo-shell .ast-header-woo-cart .count {
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
}

/* Align right-side elements with consistent spacing */
.alo-shell .ast-builder-layout-element.ast-flex.site-header-focus-item {
  align-items: center;
}

/* Right group spacing */
.alo-shell .site-header-primary-section-right .ast-builder-layout-element {
  margin-left: 4px;
  margin-right: 4px;
}

/* Account icon (Astra component) */
.alo-shell .ast-header-account,
.alo-shell .ast-header-account a {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #111;
}
.alo-shell .ast-header-account-text {
  color: rgba(17, 17, 17, 0.72);
}
.alo-shell .ast-header-account-wrap svg {
  width: 18px;
  height: 18px;
}


/* ============================================================
   MOBILE HEADER ADJUSTMENTS
   ============================================================ */
@media (max-width: 921px) {
  /* Mobile: center logo */
  .alo-shell .ast-site-title-wrap .site-title a,
  .alo-shell .site-title a {
    font-size: 26px !important;
  }

  /* Hamburger icon */
  .alo-shell .ast-mobile-menu-trigger-minimal {
    color: #111;
  }
  .alo-shell .ast-button-wrap .menu-toggle {
    color: #111 !important;
    background: transparent !important;
    border: none !important;
    padding: 4px !important;
  }
  .alo-shell .ast-button-wrap .menu-toggle svg,
  .alo-shell .ast-mobile-menu-trigger-minimal svg {
    fill: #111;
    width: 22px;
    height: 22px;
  }
}


/* ============================================================
   WooCommerce product list / button ALO style
   ============================================================ */
.alo-shell.woocommerce-page .woocommerce a.button,
.alo-shell.woocommerce-page .woocommerce button.button,
.alo-shell.woocommerce-page .woocommerce input.button,
.alo-shell.woocommerce-page .woocommerce #respond input#submit,
.alo-shell .woocommerce a.button,
.alo-shell .woocommerce button.button,
.alo-shell .woocommerce input.button,
.alo-shell .woocommerce #respond input#submit {
  border-radius: 2px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 14px 18px;
  line-height: 1;
  background: #111;
  color: #fff;
  border: 1px solid #111;
}
.alo-shell .woocommerce a.button:hover,
.alo-shell .woocommerce button.button:hover,
.alo-shell .woocommerce input.button:hover,
.alo-shell .woocommerce #respond input#submit:hover {
  background: #fff;
  color: #111;
}

.alo-shell .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(17, 17, 17, 0.86);
}
.alo-shell .woocommerce ul.products li.product .price {
  font-size: 12px;
  font-weight: 800;
  color: #111;
}


/* ============================================================
   REWARDS BAR (below header, mobile only)
   ============================================================ */
.alo-rewardsbar { background: #111; color: #fff; }
.alo-rewardsbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; }
.alo-rewardsbar__text { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.95; }
.alo-rewardsbar__brand { font-weight: 900; letter-spacing: -0.02em; text-transform: lowercase; }
.alo-rewardsbar__cta { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-decoration: none; }
.alo-rewardsbar__cta:hover { text-decoration: underline; }
@media (min-width: 1024px) { .alo-rewardsbar { display: none; } }


/* ============================================================
   FOOTER – Clean, minimal styling matching aloyoga.com
   ============================================================ */
.alo-shell footer.site-footer {
  border-top: 1px solid rgba(17, 17, 17, 0.1);
  background: #fff;
  padding: 0;
}
.alo-shell footer.site-footer h1,
.alo-shell footer.site-footer h2,
.alo-shell footer.site-footer h3,
.alo-shell footer.site-footer h4 {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #111;
  font-size: 12px;
}
.alo-shell footer.site-footer a {
  color: rgba(17, 17, 17, 0.72);
  letter-spacing: 0.02em;
  text-decoration: none;
}
.alo-shell footer.site-footer a:hover {
  color: #111;
  text-decoration: underline;
}

/* Remove Astra footer default separator */
.alo-shell .site-below-footer-wrap,
.alo-shell .ast-footer-row-inline {
  border: none !important;
}

/* Astra footer builder row overrides */
.alo-shell .site-primary-footer-wrap,
.alo-shell .site-below-footer-wrap {
  background: #fff !important;
}


/* ============================================================
   FOOTER COLUMNS (Shortcode output)
   ============================================================ */
.alo-footcol {
  padding-bottom: 20px;
}

.alo-footcol__title {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #111;
  margin: 0 0 14px;
  line-height: 1.4;
}

.alo-footlink {
  display: block;
  text-decoration: none;
  color: rgba(17, 17, 17, 0.65);
  font-size: 13px;
  padding: 4px 0;
  line-height: 1.5;
  transition: color 0.15s ease;
}
.alo-footlink:hover {
  text-decoration: underline;
  color: #111;
}


/* ============================================================
   FOOTER NEWSLETTER COLUMN
   ============================================================ */
.alo-footcol--newsletter {
  max-width: 360px;
}

.alo-newsletter {
  margin-top: 4px;
}
.alo-newsletter__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  margin: 8px 0 8px;
}
.alo-input {
  height: 42px;
  border: 1px solid rgba(17, 17, 17, 0.15);
  border-radius: 999px;
  padding: 0 16px;
  font-size: 13px;
  outline: none;
  background: #fff;
  color: #111;
  transition: border-color 0.15s ease;
}
.alo-input::placeholder {
  color: rgba(17, 17, 17, 0.45);
}
.alo-input:focus {
  border-color: rgba(17, 17, 17, 0.35);
}
.alo-submit {
  height: 42px;
  min-width: 42px;
  border-radius: 999px;
  border: 1px solid rgba(17, 17, 17, 0.15);
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.alo-submit:hover {
  background: #f5f5f5;
}

.alo-fineprint {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(17, 17, 17, 0.55);
}
.alo-fineprint a {
  color: rgba(17, 17, 17, 0.55);
  text-decoration: underline;
}
.alo-fineprint a:hover {
  color: #111;
}


/* ============================================================
   FOOTER SOCIAL ICONS
   ============================================================ */
.alo-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  align-items: center;
}
.alo-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(17, 17, 17, 0.6);
  text-decoration: none;
  transition: color 0.15s ease;
}
.alo-social__link:hover {
  color: #111;
  text-decoration: none;
}
.alo-social__link svg {
  width: 20px;
  height: 20px;
}

/* App Store badge */
.alo-appstore {
  display: inline-block;
  margin-top: 4px;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}
.alo-appstore:hover {
  opacity: 1;
  text-decoration: none;
}


/* ============================================================
   FOOTER BOTTOM BAR (copyright + legal)
   ============================================================ */
.alo-footer__bottom {
  padding: 0 0 10px;
}

.alo-footer__duties {
  font-size: 11px;
  line-height: 1.5;
  color: rgba(17, 17, 17, 0.45);
  margin: 0 0 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}

.alo-footer__bottombar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}
@media (min-width: 834px) {
  .alo-footer__bottombar {
    justify-content: flex-start;
  }
}

.alo-footer__legal {
  font-size: 12px;
  color: rgba(17, 17, 17, 0.55);
}

.alo-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.alo-footer__links .alo-footlink {
  display: inline;
  font-size: 12px;
  padding: 0;
  color: rgba(17, 17, 17, 0.55);
}
.alo-footer__links .alo-footlink:hover {
  color: #111;
}


/* ============================================================
   SEARCH FIELD (shared / overlay)
   ============================================================ */
.alo-searchform {
  display: flex;
  align-items: center;
  position: relative;
  background: #fff;
  border-radius: 4px;
  padding: 0 12px;
  border: 1px solid rgba(17, 17, 17, 0.12);
}
.alo-searchform:focus-within {
  border-color: rgba(17, 17, 17, 0.22);
}
.alo-searchform input {
  border: 0;
  background: transparent;
  height: 36px;
  padding: 0;
  font-size: 12px;
  width: 220px;
  outline: none;
  color: #111;
  letter-spacing: 0.04em;
}
.alo-searchform input::placeholder {
  color: rgba(17, 17, 17, 0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (min-width: 1280px) {
  .alo-searchform input { width: 260px; }
}
.alo-searchform button {
  border: 0;
  background: transparent;
  padding: 0 0 0 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #111;
}
.alo-searchform svg { width: 16px; height: 16px; }


/* ============================================================
   ASTRA OVERRIDES – Fine-tuning builder output
   ============================================================ */

/* Full-width header inner */
.alo-shell .ast-builder-header-astra-inner {
  max-width: 100%;
}

/* Remove extra padding from primary header section */
.alo-shell .ast-primary-header-bar .site-primary-header-wrap {
  min-height: auto;
}

/* Align left group items inline (logo + menu) */
.alo-shell .site-header-primary-section-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.alo-shell .site-header-primary-section-left > .ast-builder-layout-element {
  margin: 0;
}

/* Right group alignment */
.alo-shell .site-header-primary-section-right {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.alo-shell .site-header-primary-section-right > .ast-builder-layout-element {
  margin: 0;
}

/* Remove Astra's default extra gaps between header components */
.alo-shell .ast-builder-grid-row {
  align-items: center;
}

/* Above header full-width override */
.alo-shell .ast-above-header-bar .ast-builder-grid-row {
  max-width: 100%;
}

/* Ensure search overlay doesn't break layout */
.alo-shell .ast-search-menu-icon .search-form {
  background: #fff;
}

/* Remove Astra cart outline/border style */
.alo-shell .ast-menu-cart-none .ast-cart-menu-wrap,
.alo-shell .ast-site-header-cart .ast-cart-menu-wrap {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}
.alo-shell .ast-site-header-cart a.cart-container {
  display: flex;
  align-items: center;
  padding: 4px;
}
.alo-shell .ast-site-header-cart .ast-addon-cart-wrap {
  padding: 0;
}

/* Astra above header: remove inner container max-width for full-bleed pink */
.alo-shell .ast-above-header-bar .site-above-header-wrap.ast-container {
  max-width: 100%;
  padding: 0;
}

/* Kill any extra Astra header spacing */
.alo-shell .ast-above-header {
  border-bottom: none !important;
}

/* Desktop header: ensure proper vertical centering */
@media (min-width: 922px) {
  .alo-shell .ast-builder-grid-row-container .ast-builder-grid-row {
    min-height: 56px;
  }
}

/* Remove Astra's transparent header interference */
.alo-shell .ast-theme-transparent-header header.site-header {
  background: #fff !important;
}

/* Ensure right side HTML blocks don't add unwanted p tags */
.alo-shell .ast-header-html .ast-builder-html-element p {
  margin: 0;
  padding: 0;
  line-height: inherit;
}

/* Fix Astra grid row alignment */
.alo-shell .ast-builder-grid-row-has-sides {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ============================================================
   MOBILE OFF-CANVAS MENU – Simple white drawer, black text
   ============================================================ */

/* ---- Popup drawer: ensure white background, high z-index ---- */
#ast-mobile-popup.ast-mobile-popup-drawer .ast-mobile-popup-inner,
body.ast-theme-transparent-header #ast-mobile-popup .ast-mobile-popup-inner,
.alo-shell .ast-mobile-popup-drawer .ast-mobile-popup-inner {
  background: #ffffff !important;
  background-color: #ffffff !important;
  z-index: 999999 !important;
}

/* ---- Overlay fix ---- */
#ast-mobile-popup .ast-mobile-popup-overlay {
  z-index: 999998 !important;
}

/* ---- Close button: black ---- */
#ast-mobile-popup .menu-toggle-close,
body.ast-theme-transparent-header #ast-mobile-popup .menu-toggle-close,
.alo-shell .ast-mobile-popup-drawer .menu-toggle-close {
  color: #111111 !important;
}

/* ---- Menu links: black text on white, override transparent header ---- */
#ast-mobile-popup .main-header-menu .menu-link,
#ast-mobile-popup .main-header-menu a,
#ast-mobile-popup .ast-nav-menu a,
body.ast-theme-transparent-header #ast-mobile-popup .main-header-menu .menu-link,
body.ast-theme-transparent-header #ast-mobile-popup .main-header-menu .menu-item > .menu-link,
body.ast-theme-transparent-header #ast-mobile-popup [class*="ast-builder-menu"] .main-header-menu .menu-item > .menu-link,
body.ast-theme-transparent-header #ast-mobile-popup .ast-builder-menu .main-header-menu .menu-link,
.alo-shell .ast-mobile-popup-drawer .main-header-menu a,
.alo-shell .ast-mobile-popup-drawer .ast-nav-menu a {
  color: #111111 !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: transparent !important;
  background-color: transparent !important;
}

/* ---- Menu text span ---- */
#ast-mobile-popup .menu-link .menu-text {
  color: #111111 !important;
}

/* ---- SVG arrow icon color ---- */
#ast-mobile-popup .ast-icon svg,
#ast-mobile-popup .ast-arrow-svg,
#ast-mobile-popup .ast-header-navigation-arrow,
body.ast-theme-transparent-header #ast-mobile-popup .ast-icon svg,
body.ast-theme-transparent-header #ast-mobile-popup .ast-header-navigation-arrow {
  fill: #111111 !important;
  color: #111111 !important;
}

/* ---- Hide the inline arrow icon inside .menu-link (before menu-text) ---- */
#ast-mobile-popup .menu-link > .ast-icon.icon-arrow {
  display: none;
}

/* ---- Dropdown toggle arrow button ---- */
#ast-mobile-popup .ast-menu-toggle,
body.ast-theme-transparent-header #ast-mobile-popup .ast-menu-toggle,
.alo-shell .ast-mobile-popup-drawer .ast-menu-toggle {
  color: #111111 !important;
  background: transparent !important;
  border: none !important;
  padding: 8px 12px;
}

/* ---- Hover states ---- */
#ast-mobile-popup .main-header-menu a:hover,
#ast-mobile-popup .ast-nav-menu a:hover {
  background: rgba(0,0,0,0.03) !important;
}

/* ---- Sub-menu styling ---- */
#ast-mobile-popup .sub-menu {
  background: #ffffff !important;
  border-top: none !important;
  padding-left: 0 !important;
}
#ast-mobile-popup .sub-menu .menu-link,
#ast-mobile-popup .sub-menu a,
body.ast-theme-transparent-header #ast-mobile-popup .sub-menu .menu-link,
.alo-shell .ast-mobile-popup-drawer .sub-menu a {
  font-weight: 400 !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding-left: 32px !important;
  color: #333333 !important;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

/* ---- Popup header background ---- */
#ast-mobile-popup .ast-mobile-popup-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* ---- Popup content area ---- */
#ast-mobile-popup .ast-mobile-popup-content {
  background: #ffffff !important;
}

/* ---- Remove any inherit/transparent color from transparent header on popup ---- */
body.ast-theme-transparent-header #ast-mobile-popup .ast-masthead-custom-menu-items,
body.ast-theme-transparent-header #ast-mobile-popup .ast-masthead-custom-menu-items a {
  color: #111111 !important;
}

/* ============================================================
   GLOBAL WooCommerce STYLE OVERRIDES
   ============================================================ */
/* Consistent button styling across shop/cart/checkout */
.alo-shell .woocommerce a.button,
.alo-shell .woocommerce button.button,
.alo-shell .woocommerce input.button,
.alo-shell .woocommerce #respond input#submit {
  background: #111 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 28px;
  transition: background 0.2s, color 0.2s;
}
.alo-shell .woocommerce a.button:hover,
.alo-shell .woocommerce button.button:hover,
.alo-shell .woocommerce input.button:hover,
.alo-shell .woocommerce #respond input#submit:hover {
  background: #333 !important;
  color: #fff !important;
}
/* Product titles on archive/shop pages */
.alo-shell .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #111;
}
/* Product prices on archive/shop pages */
.alo-shell .woocommerce ul.products li.product .price {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 13px;
  color: #111;
}
/* Remove default star ratings width issue */
.alo-shell .woocommerce .star-rating {
  color: #111;
}

/* ============================================================
   RESPONSIVE – Tablet (iPad)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Header: tighter spacing on tablet */
  .alo-shell .site-header-primary-section-left {
    gap: 6px;
  }
  .alo-shell .site-header-primary-section-right {
    gap: 4px;
  }
  /* Footer columns: 2-column layout on tablet */
  .alo-shell .ast-footer-row-inline .ast-builder-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* ============================================================
   RESPONSIVE – Mobile (iPhone)
   ============================================================ */
@media (max-width: 767px) {
  /* Footer: single column on mobile */
  .alo-shell .alo-footcol {
    margin-bottom: 20px;
  }
  /* Footer bottom bar: stack on mobile */
  .alo-footer__bottombar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  /* Mobile promo bar text smaller */
  .alo-shell .alo-topbar__text {
    font-size: 10px;
    letter-spacing: 0.08em;
  }
  /* Ensure footer newsletter input is full width */
  .alo-shell .alo-newsletter .alo-newsletter__row {
    width: 100%;
  }
  .alo-shell .alo-newsletter .alo-input {
    width: 100%;
    min-width: 0;
  }
}