/*
 * Cookie notice (Ohio .notification > .alert.-fixed)
 *
 * Root cause of "can't close on mobile": wrapper was position:fixed while the
 * .alert child is also position:fixed (out of flow), so the wrapper collapses
 * to height:0. Combined with pointer-events:none, iOS Safari often fails touch
 * hit-testing on the Close button.
 *
 * Fix: leave wrapper static/non-blocking; let .alert.-fixed own stacking + taps.
 */
.notification {
    position: static !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    overflow: visible !important;
}

.notification .alert,
.notification .alert.-fixed,
.notification .alert.-small.-fixed {
    pointer-events: auto !important;
    z-index: 2147483000 !important;
    margin-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
}

.notification [data-js="close-alert"] {
    pointer-events: auto !important;
    position: relative;
    z-index: 2;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
}

:not(.is-mobile-menu) .notification .alert {
    margin-left: 0 !important;
}

/* Hero / LCP area: homepage only — do NOT apply contain:paint on checkout */
.home .ci-background {
    min-height: clamp(220px, 42vw, 520px);
    background-size: contain !important;
    background-position: center top !important;
    contain: layout style paint;
}

.home .hero-message,
.home .sub-hero {
    min-height: 2.8em;
}

@media (max-width: 767px) {
    .home .ci-background {
        min-height: clamp(180px, 55vw, 320px);
    }
}

/* Checkout hero: never clip/paint-contain children (causes flash-then-white) */
.benjaruk-checkout .ci-background,
.benjaruk-checkout .vc_row.ci-background.vc_hidden {
    contain: none !important;
    background-size: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    display: flow-root !important;
}

@media (max-width: 767px) {
    .benjaruk-checkout .ci-background {
        min-height: 0 !important;
    }

    /* WPBakery empty spaces push products below the fold (boxTop > vh) → white lower viewport */
    .benjaruk-checkout .vc_empty_space,
    .benjaruk-checkout .vc_empty_space > span {
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: none !important;
    }

    /* Thank-you copy stays in WPBakery but must not reserve space pre-purchase */
    .benjaruk-checkout .order-success-invisible,
    .benjaruk-checkout .order-success.order-success-invisible {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Keep hero compact so product list enters first viewport */
    .benjaruk-checkout img[src*="happiness-begins"] {
        max-width: 100% !important;
        max-height: 28vh !important;
        width: auto !important;
        object-fit: cover !important;
    }

    .benjaruk-checkout .trusted-reviews {
        margin-top: 0.35rem !important;
        margin-bottom: 0.35rem !important;
    }

    .benjaruk-checkout .trusted-reviews .social-proof {
        display: none !important;
    }
}

/* Order-success placeholders: hide until JS fills content */
.benjaruk-checkout #shiptoAddress:empty,
.benjaruk-checkout #estimatedDelivery:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ohio embeds AOS CSS in style.css; override even if data-aos attrs exist */
html:not(.no-js) body.benjaruk-checkout [data-aos],
html:not(.no-js) body.benjaruk-checkout [data-aos^="fade"],
html:not(.no-js) body.benjaruk-checkout [data-aos^="slide"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.benjaruk-checkout .content-box,
.benjaruk-checkout .vc_figure,
.benjaruk-checkout .vc_single_image-wrapper,
.benjaruk-checkout .vc_single_image-img {
    opacity: 1 !important;
    visibility: visible !important;
}

.benjaruk-checkout img[src*="happiness-begins"] {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    opacity: 1 !important;
}

.benjaruk-checkout .ci-background .content-box {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 600px;
}

@media (min-width: 768px) {
    /* Break out of page-container — full-bleed gradient hero */
    .benjaruk-checkout .vc_row.ci-background {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        left: 0 !important;
        right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .benjaruk-checkout .ci-background .vc_col-sm-8 {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }

    .benjaruk-checkout .ci-background .vc_col-sm-8 > .vc_column-inner {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Checkout product list: keep thumbnail height aligned with product details */
@media (max-width: 767px) {
    .benjaruk-checkout .product-image img,
    .benjaruk-checkout .upsell-image img,
    .products-container .product-image img {
        width: auto !important;
        height: 80px !important;
        max-width: 80px;
        object-fit: cover;
        border-radius: 9px;
    }

    .benjaruk-checkout .product.selected .product-image img,
    .products-container .product.selected .product-image img {
        transform: scale(1.3);
        margin-right: 11px;
    }
}

/*
 * Sticky checkout summary dock — opaque, no backdrop-filter.
 * Frosted blur + translucent white made product cards look covered on mobile Safari.
 */
.benjaruk-checkout .products-container,
body.benjaruk-checkout .products-container {
  padding-bottom: 20px;
  scroll-padding-bottom: 0;
}

body.benjaruk-checkout .rewards-container {
  padding-bottom: 12px;
  scroll-padding-bottom: 0;
}

body.benjaruk-checkout.bj-mini-summary-sticky .rewards-container {
  padding-bottom: calc(220px + env(safe-area-inset-bottom, 0px));
  scroll-padding-bottom: calc(220px + env(safe-area-inset-bottom, 0px));
}

body.benjaruk-checkout.bj-cart-bar-visible .rewards-container {
  padding-bottom: 12px;
  scroll-padding-bottom: 0;
}

body.benjaruk-checkout.bj-cart-bar-sticky .rewards-container {
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

body.benjaruk-checkout .forminator-row-last,
body.benjaruk-checkout .forminator-row-last.forminator-row-visible {
  background-color: #F5F7FF !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 -6px 20px rgba(22, 21, 25, 0.12) !important;
}

body.benjaruk-checkout .forminator-row-last.forminator-row-visible {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  position: static;
  pointer-events: auto;
  max-height: none;
  overflow: visible;
  box-sizing: border-box;
  gap: 8px;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

body.benjaruk-checkout .forminator-row-last.forminator-row-visible.is-sticky {
  position: fixed !important;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  z-index: 1000;
}

body.benjaruk-checkout .forminator-row-last.forminator-row-visible > .forminator-col,
body.benjaruk-checkout .forminator-row-last.forminator-row-visible > div {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  align-self: stretch;
}

body.benjaruk-checkout .forminator-row-last.forminator-row-visible .short-summary {
  margin: 0;
}

body.benjaruk-checkout .forminator-row-last.forminator-row-visible .forminator-button-submit,
body.benjaruk-checkout .forminator-row-last.forminator-row-visible .toggle-summary-btn {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.forminator-row-last.forminator-row-visible {
  display: flex !important;
  pointer-events: auto;
}

.forminator-row-last.forminator-row-visible.is-sticky {
  z-index: 1000;
}

/* Keep sticky mini bar under the full order summary drawer */
body.benjaruk-summary-open .forminator-row-last.forminator-row-visible,
body:has(#summary-details.active) .forminator-row-last.forminator-row-visible {
  display: none !important;
}

body.benjaruk-summary-open {
  overflow: hidden !important;
}

/* Product list skeleton (home + /buynow) */
.product-skeleton {
  pointer-events: none;
  user-select: none;
}

.product-skeleton .product-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.product-skeleton .product-image.skeleton-block {
  width: 80px;
  height: 80px;
  border-radius: 9px;
  flex-shrink: 0;
}

.product-skeleton .product-details {
  flex: 1;
  min-width: 0;
}

.product-skeleton .skeleton-line {
  height: 12px;
  border-radius: 6px;
  margin: 8px 0;
}

.product-skeleton .skeleton-line-title {
  width: 78%;
  height: 14px;
}

.product-skeleton .skeleton-line-price {
  width: 42%;
}

.product-skeleton .skeleton-btn {
  width: 72px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
}

.product-skeleton .skeleton-block,
.product-skeleton .skeleton-line {
  background: linear-gradient(90deg, #ececec 0%, #f5f5f5 45%, #ececec 90%);
  background-size: 200% 100%;
  animation: benjaruk-skeleton-shimmer 1.2s ease-in-out infinite;
}

@keyframes benjaruk-skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.upsell-skeleton-container .special-offer.skeleton-offer {
  min-height: 22px;
  margin: 8px 0 4px;
}

.upsell-skeleton-container .skeleton-offer .skeleton-line {
  background: linear-gradient(90deg, #ececec 0%, #f5f5f5 45%, #ececec 90%);
  background-size: 200% 100%;
  animation: benjaruk-skeleton-shimmer 1.2s ease-in-out infinite;
  height: 12px;
  border-radius: 6px;
}

/* Inline upsell under selected product — avoid browser scroll-anchoring fights */
.upsell-container {
  overflow-anchor: none;
}

.products-container > .product {
  overflow-anchor: none;
}

/* PHP checkout skeleton — centered column, same width as mini-summary */
body.benjaruk-checkout .bj-checkout-app {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 12px 8px;
  box-sizing: border-box;
}

body.benjaruk-checkout .bj-checkout-heading {
  text-align: center;
  margin: 0 0 8px;
}

body.benjaruk-checkout .bj-checkout-pick-title {
  margin: 12px 0 0;
}

body.benjaruk-checkout .bj-checkout-pick-sub {
  margin: 0 0 12px;
  font-weight: 400;
}

/* Space between coupon cards and the “ช้อปง่าย…” heading in products */
body.benjaruk-checkout #coupons-section {
  margin-bottom: 20px;
}

/* Checkout: stop scroll-anchoring from yanking mid-page when coupons/upsells paint */
html.benjaruk-checkout,
body.benjaruk-checkout,
body.benjaruk-checkout #page,
body.benjaruk-checkout .site-content,
body.benjaruk-checkout .products-container,
body.benjaruk-checkout #coupons,
body.benjaruk-checkout .bj-checkout-app,
body.benjaruk-checkout .forminator-row-last {
  overflow-anchor: none;
}

@media (prefers-reduced-motion: reduce) {
  .product-skeleton .skeleton-block,
  .product-skeleton .skeleton-line,
  .upsell-skeleton-container .skeleton-offer .skeleton-line {
    animation: none;
  }
}