/* =========================================================
   EcoShea Launch Fixes v0.1.3
   Scope: launch-stability overrides for groups 1-5 and 7-10.
   Important: this file deliberately does not remove or change the
   existing global image mask/fade rule.
   ========================================================= */

/* ---------------------------------------------------------
   1. Header/mobile nav structure support
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: clip;
  }

  @supports not (overflow-x: clip) {
    html,
    body {
      overflow-x: hidden !important;
    }
  }

  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    overflow: visible !important;
  }

  .admin-bar .site-header {
    top: 32px !important;
  }

  .site-header .header-inner,
  .site-header .site-header-inner,
  .site-header .container,
  .site-header .wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 74px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .site-header .site-branding,
  .site-header .custom-logo-link,
  .site-header .site-logo {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10030 !important;
    min-width: 0 !important;
  }

  .site-header .site-branding img,
  .site-header .site-logo img,
  .site-header .custom-logo,
  .site-header img.custom-logo {
    width: 96px !important;
    max-width: 96px !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  .site-header .main-navigation {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10020 !important;
  }

  .site-header .main-navigation > ul,
  .site-header .main-navigation .primary-menu,
  .site-header .main-navigation .menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 14px !important;
    left: auto !important;
    width: min(74vw, 280px) !important;
    max-width: calc(100vw - 28px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 22px !important;
    margin: 0 !important;
    padding: 24px !important;
    list-style: none !important;
    background: rgba(255, 253, 248, 0.16) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 24px !important;
    box-shadow: 0 22px 56px rgba(23, 19, 13, 0.10) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0, -8px, 0) !important;
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease !important;
    z-index: 10021 !important;
  }

  .site-header .main-navigation.is-open > ul,
  .site-header .main-navigation.is-open .primary-menu,
  .site-header .main-navigation.is-open .menu,
  .site-header.is-mobile-menu-open .main-navigation > ul,
  .site-header.is-mobile-menu-open .main-navigation .primary-menu,
  .site-header.is-mobile-menu-open .main-navigation .menu,
  .site-header:has(.mobile-menu-toggle[aria-expanded="true"]) .main-navigation > ul,
  .site-header:has(.mobile-menu-toggle[aria-expanded="true"]) .main-navigation .primary-menu,
  .site-header:has(.mobile-menu-toggle[aria-expanded="true"]) .main-navigation .menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
  }

  .site-header .main-navigation li {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .site-header .main-navigation li a {
    display: block !important;
    text-align: right !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    text-decoration: none !important;
    color: #151515 !important;
  }

  .site-header .main-navigation a::after {
    display: none !important;
  }

  .site-header .mobile-menu-toggle,
  .site-header .menu-toggle,
  .site-header .nav-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10040 !important;
  }
}

@media (max-width: 600px) {
  .admin-bar .site-header {
    top: 46px !important;
  }
}

/* ---------------------------------------------------------
   2. Header action alignment: flag + bag, separate from nav
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .site-header .header-actions {
    position: absolute !important;
    top: 50% !important;
    right: 62px !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10038 !important;
  }

  .site-header .ecoshea-lang-switcher,
  .site-header .ecoshea-language-switcher,
  .site-header .ecoshea-lang,
  .site-header .language-switcher,
  .site-header .ecoshea-lang-current,
  .site-header .cart-bag,
  .site-header .header-actions > a,
  .site-header .header-actions > button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  .site-header .ecoshea-lang-switcher {
    order: 1 !important;
    position: relative !important;
    overflow: visible !important;
  }

  .site-header .cart-bag {
    order: 2 !important;
    position: relative !important;
    top: 0 !important;
  }

  .site-header .cart-bag svg,
  .site-header .header-actions svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    transform: none !important;
  }

  .site-header .ecoshea-lang-current img,
  .site-header .ecoshea-lang-current svg {
    width: 22px !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  .site-header .cart-count {
    right: -4px !important;
    top: -4px !important;
    min-width: 17px !important;
    height: 17px !important;
    font-size: 10px !important;
    line-height: 17px !important;
  }
}

/* ---------------------------------------------------------
   3. Language dropdown stability; keep centred flag dropdown
   --------------------------------------------------------- */
.site-header .ecoshea-lang-switcher,
.site-header .ecoshea-language-switcher,
.site-header .ecoshea-lang,
.site-header .language-switcher {
  overflow: visible !important;
  z-index: 10060 !important;
}

.site-header .ecoshea-lang-dropdown,
.site-header .ecoshea-lang-menu,
.site-header .ecoshea-lang-options,
.site-header .language-switcher ul,
.site-header .language-switcher .sub-menu {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  z-index: 10061 !important;
}

.site-header .ecoshea-lang-dropdown[hidden] {
  display: none !important;
}

.site-header .ecoshea-lang-dropdown:not([hidden]) {
  display: flex !important;
}

.site-header .ecoshea-lang-dropdown a,
.site-header .ecoshea-lang-menu a,
.site-header .ecoshea-lang-options a,
.site-header .language-switcher ul a,
.site-header .language-switcher .sub-menu a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

/* ---------------------------------------------------------
   4. Mobile store/product carousel overflow correction
   --------------------------------------------------------- */
@media (max-width: 900px) {
  body.page:has(.ecoshea-product-carousel) {
    --eso-store-hero-lift: -28px !important;
    --eso-store-carousel-top: -20px !important;
    --eso-store-carousel-x: 0px !important;
  }

  body.page:has(.ecoshea-product-carousel) #bde-main .bde-section:first-of-type .section-container,
  body.page:has(.ecoshea-product-carousel) .breakdance .bde-section:first-of-type .section-container {
    transform: translateY(var(--eso-store-hero-lift)) !important;
  }

  body.page:has(.ecoshea-product-carousel) .ecoshea-product-carousel,
  .ecoshea-product-carousel {
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    overflow: hidden !important;
    --eso-card-width: min(86vw, 360px);
    --eso-card-height: clamp(505px, 136vw, 590px);
    --eso-card-image-min-height: clamp(250px, 76vw, 340px);
    --eso-card-image-scale: 1.04;
    --eso-card-title-size: clamp(22px, 6vw, 28px);
    --eso-card-text-size: clamp(11px, 3.2vw, 12px);
    --eso-card-price-size: clamp(24px, 7vw, 31px);
  }

  body.page:has(.ecoshea-product-carousel) .ecoshea-product-carousel__stage,
  .ecoshea-product-carousel__stage {
    min-height: calc(var(--eso-card-height) + 42px) !important;
    overflow: hidden !important;
    perspective: 1000px !important;
  }

  .ecoshea-product-card {
    max-width: calc(100vw - 38px) !important;
  }

  .ecoshea-product-card__link {
    border-radius: 32px !important;
  }

  .ecoshea-product-card__content--header {
    padding: 24px 24px 8px !important;
  }

  .ecoshea-product-card__image-wrap {
    margin-left: 12px !important;
    margin-right: 12px !important;
    border-radius: 28px !important;
  }

  .ecoshea-product-card__content--footer {
    padding: 10px 24px 22px !important;
  }
}

/* ---------------------------------------------------------
   5. Mobile single-product layout and gallery stabilisation
   --------------------------------------------------------- */
@media (max-width: 940px) {
  body.single-product .eso-product-flow__hero {
    min-height: auto !important;
    padding-top: calc(var(--eso-header-height) + 24px) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    overflow: hidden !important;
  }

  body.single-product .eso-product-flow__inner {
    width: min(100%, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  body.single-product .eso-product-flow__summary,
  body.single-product .eso-product-flow__media,
  body.single-product .eso-product-flow__details-inner {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.single-product .eso-product-flow__image-card {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 0.94 !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
  }

  body.single-product .eso-product-flow__image-card .woocommerce-product-gallery,
  body.single-product .eso-product-flow__image-card .woocommerce-product-gallery__wrapper,
  body.single-product .eso-product-flow__image-card .woocommerce-product-gallery__image,
  body.single-product .eso-product-flow__image-card .woocommerce-product-gallery__image a {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    place-items: center !important;
  }

  body.single-product .eso-product-flow__main-image,
  body.single-product .eso-product-flow__image-card img,
  body.single-product .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: clamp(8px, 3vw, 18px) !important;
    margin: 0 auto !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  body.single-product .eso-product-flow__summary {
    padding: 24px !important;
    border-radius: 28px !important;
  }

  body.single-product .eso-product-flow__title {
    max-width: 100% !important;
    font-size: clamp(38px, 11vw, 58px) !important;
  }

  body.single-product .eso-product-flow__purchase form.cart {
    max-width: 100% !important;
  }

  body.single-product .eso-product-flow__purchase .single_add_to_cart_button.button {
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  .eso-product-showcase {
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    overflow: hidden !important;
  }

  .eso-product-showcase__inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .eso-product-showcase__image-card,
  .eso-product-showcase__summary {
    max-width: 100% !important;
  }
}

/* ---------------------------------------------------------
   7. Mobile/tablet hero viewport safety
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .eso-hero,
  .eso-hero .bde-section-container,
  .eso-hero .section-container {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .eso-hero h1,
  .eso-hero .bde-heading,
  .eso-hero p,
  .eso-hero .bde-text,
  .eso-hero .bde-rich-text {
    overflow-wrap: anywhere;
  }
}

/* ---------------------------------------------------------
   8. Tight image-row section guard; no global image-mask edits
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  #shea-image-row-tight,
  #shea-image-row-tight > *,
  #shea-image-row-tight .section-container,
  #shea-image-row-tight .bde-section-container,
  #shea-image-row-tight .breakdance-section-content,
  #shea-image-row-tight .bde-columns,
  #shea-image-row-tight .bde-div,
  #shea-image-row-tight .bde-column {
    min-height: 0 !important;
    height: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ---------------------------------------------------------
   9. Footer menu bullets, luxury type and Brevo form skin
   --------------------------------------------------------- */
.eso-footer-final__menu,
.eso-footer-final__menu ul,
.eso-footer-v2__menu,
.eso-footer-v2__menu ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.eso-footer-final__menu li,
.eso-footer-v2__menu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.eso-footer-final,
.eso-footer-final p,
.eso-footer-final a,
.eso-footer-final input,
.eso-footer-final button,
.eso-footer-v2,
.eso-footer-v2 p,
.eso-footer-v2 a,
.eso-footer-v2 input,
.eso-footer-v2 button {
  font-family: "Nunito Sans", "Montserrat", Arial, sans-serif !important;
}

.eso-footer-final__brand h2,
.eso-footer-final__newsletter h3,
.eso-footer-v2__brand h2,
.eso-footer-v2__newsletter h3 {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

.ecoshea-brevo-form,
.ecoshea-brevo-form form,
.eso-footer-final__newsletter form,
.eso-footer-v2__newsletter form {
  width: 100% !important;
}

.ecoshea-brevo-form input[type="email"],
.ecoshea-brevo-form input[type="text"],
.ecoshea-brevo-form .sib-email-area input,
.eso-footer-final__newsletter input[type="email"],
.eso-footer-final__newsletter input[type="text"] {
  width: 100% !important;
  max-width: 320px !important;
}

@media (max-width: 767px) {
  .eso-footer-final__links,
  .eso-footer-final__menu,
  .eso-footer-v2__links,
  .eso-footer-v2__menu {
    justify-items: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .eso-footer-final__newsletter,
  .eso-footer-v2__newsletter {
    transform: none !important;
  }
}

/* ---------------------------------------------------------
   10. Checkout/cart spacing and embedded Stripe mount collapse
   --------------------------------------------------------- */
.ecoshea-embedded-checkout {
  min-height: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: opacity 240ms ease, max-height 320ms ease !important;
}

.ecoshea-stripe-shell.is-preparing-checkout .ecoshea-embedded-checkout,
.ecoshea-stripe-shell.is-checkout-mounted .ecoshea-embedded-checkout {
  height: auto !important;
  max-height: none !important;
  min-height: 540px !important;
  overflow: visible !important;
  opacity: 1 !important;
}

@media (max-width: 720px) {
  .ecoshea-stripe-shell,
  .ecoshea-stripe-result {
    width: min(100%, calc(100vw - 22px)) !important;
    margin-top: 44px !important;
    margin-bottom: 52px !important;
  }

  .ecoshea-stripe-shell__inner,
  .ecoshea-stripe-result__card {
    padding: 24px 14px !important;
    border-radius: 28px !important;
  }

  .ecoshea-stripe-shell.is-preparing-checkout .ecoshea-embedded-checkout,
  .ecoshea-stripe-shell.is-checkout-mounted .ecoshea-embedded-checkout {
    min-height: 620px !important;
  }

  body.woocommerce-cart .wc-block-cart,
  body.woocommerce-checkout .wc-block-checkout,
  body.woocommerce-cart .woocommerce,
  body.woocommerce-checkout .woocommerce {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 26px !important;
    padding: 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .main-navigation > ul,
  .site-header .main-navigation .primary-menu,
  .site-header .main-navigation .menu,
  .ecoshea-embedded-checkout {
    transition: none !important;
  }
}


/* ---------------------------------------------------------
   11. v0.1.1 hotfix: keep language selector independent
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .site-header .header-actions,
  .site-header .ecoshea-lang-switcher,
  .site-header .ecoshea-lang-current,
  .site-header .ecoshea-lang-dropdown {
    z-index: 10090 !important;
  }

  .site-header .mobile-menu-toggle,
  .site-header .menu-toggle,
  .site-header .nav-toggle {
    z-index: 10080 !important;
  }

  .site-header .main-navigation,
  .site-header .main-navigation > ul,
  .site-header .main-navigation .primary-menu,
  .site-header .main-navigation .menu {
    z-index: 10050 !important;
  }

  .site-header .ecoshea-lang-switcher,
  .site-header .ecoshea-lang-current {
    pointer-events: auto !important;
    touch-action: manipulation;
  }
}


/* ---------------------------------------------------------
   12. v0.1.3 desktop restore: pull flag + bag back to page-body width
   ---------------------------------------------------------
   The header.php structural patch moved .header-actions outside the nav.
   The existing desktop Additional CSS places .header-actions in the far-right
   grid column of a full-width header. A margin correction was not strong enough
   in all cached/CSS-order combinations, so this version uses a direct transform
   to pull the actions back from the viewport edge to the 1280px page-body line.
   Mobile/tablet rules above are unchanged.
*/
@media (min-width: 1025px) {
  .site-header {
    --eso-desktop-actions-pull-left: max(
      0px,
      calc(((100vw - 1280px) / 2) - clamp(32px, 6vw, 110px))
    );
  }

  .site-header .header-actions {
    margin-right: 0 !important;
    transform: translateX(calc(-1 * var(--eso-desktop-actions-pull-left))) !important;
  }
}