/*
 * 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 + home-v2 canary — do NOT apply contain:paint on checkout */
.home .ci-background,
.benjaruk-home-v2 .ci-background {
    min-height: clamp(220px, 42vw, 520px);
    /* auto: gradient must fill the row. contain warped the 45% blue/cream split */
    background-size: auto !important;
    background-position: center top !important;
    /*
     * WPBakery columns are float:left. contain:content used to clearfix them, but
     * also fought full-bleed. flow-root clears floats so hero grows with content
     * (keeps white headline inside the blue band) without layout containment.
     */
    display: flow-root;
    contain: none;
}

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

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

/*
 * Home lean pages dequeue wpb_composer_front_js + js_composer_front CSS.
 * Ohio only full-bleeds [data-vc-full-width]:not([data-vc-stretch-content=true]).
 * Hero .ci-background uses stretch-content=true → stuck at page-container width.
 * Mirror Ohio full-bleed for stretch-content rows on home / home-v2.
 */
@media screen and (min-width: 1181px) {
    .home .page-container:not(.-full-w) .vc_row[data-vc-full-width="true"][data-vc-stretch-content="true"],
    .page-container.benjaruk-home-v2:not(.-full-w) .vc_row[data-vc-full-width="true"][data-vc-stretch-content="true"] {
        width: 100vw !important;
        max-width: 100vw !important;
        left: calc(var(--clb-container-offset) * -1) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* js_composer_front dequeued on home — restore centered single images */
.home .wpb_single_image.vc_align_center,
.benjaruk-home-v2 .wpb_single_image.vc_align_center {
    text-align: center !important;
}

/*
 * VC parallax columns rely on wpb_composer_front_js to paint data-vc-parallax-image.
 * Lean home dequeues that JS — PHP injects background-image; keep cover sizing here.
 */
.home .vc_parallax[data-vc-parallax-image],
.benjaruk-home-v2 .vc_parallax[data-vc-parallax-image] {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Creating Happiness Within — mobile stacked text column was flush to edges */
@media (max-width: 767px) {
    .home .vc_custom_1726477945796 > .wpb_column.full-height > .vc_column-inner,
    .benjaruk-home-v2 .vc_custom_1726477945796 > .wpb_column.full-height > .vc_column-inner {
        padding: 1.5rem 1.25rem !important;
    }

    /*
     * Text + logo columns use full-height / vh80 / 100vh empty_space for desktop
     * side-by-side. On xs they stack and leave a huge empty blue board.
     */
    .home .vc_custom_1726477945796 > .wpb_column.full-height,
    .benjaruk-home-v2 .vc_custom_1726477945796 > .wpb_column.full-height {
        height: auto !important;
        min-height: 0 !important;
    }

    .home .vc_custom_1726477945796 .vh80,
    .home .vc_custom_1726477945796 .vh20,
    .benjaruk-home-v2 .vc_custom_1726477945796 .vh80,
    .benjaruk-home-v2 .vc_custom_1726477945796 .vh20 {
        min-height: 0 !important;
        height: auto !important;
    }

    .home .vc_custom_1726477945796 > .wpb_column.full-height .vc_empty_space,
    .benjaruk-home-v2 .vc_custom_1726477945796 > .wpb_column.full-height .vc_empty_space {
        height: 0.75rem !important;
    }

    /* Image column: keep a tall cover photo without a second full viewport */
    .home .vc_custom_1726477945796 > .vc_parallax .vc_empty_space,
    .benjaruk-home-v2 .vc_custom_1726477945796 > .vc_parallax .vc_empty_space {
        height: min(70vh, 520px) !important;
    }
}

.home .wpb_single_image.vc_align_center .vc_single_image-wrapper,
.benjaruk-home-v2 .wpb_single_image.vc_align_center .vc_single_image-wrapper,
.home .wpb_single_image.vc_align_center figure,
.benjaruk-home-v2 .wpb_single_image.vc_align_center figure {
    display: inline-block !important;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}

.home .wpb_single_image.vc_align_center img,
.benjaruk-home-v2 .wpb_single_image.vc_align_center img {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 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"],
/* Home lean pages also dequeue ohio-main — AOS never reveals hero banner */
html:not(.no-js) body.home [data-aos],
html:not(.no-js) body.home [data-aos^="fade"],
html:not(.no-js) body.home [data-aos^="slide"],
html:not(.no-js) .benjaruk-home-v2 [data-aos],
html:not(.no-js) .benjaruk-home-v2 [data-aos^="fade"],
html:not(.no-js) .benjaruk-home-v2 [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,
.home .ohio-widget.content-box,
.home .content-box[data-aos],
.benjaruk-home-v2 .ohio-widget.content-box,
.benjaruk-home-v2 .content-box[data-aos],
.home .ci-background .vc_figure,
.benjaruk-home-v2 .ci-background .vc_figure {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !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;
}

.home img[src*="happiness-begins"],
.benjaruk-home-v2 img[src*="happiness-begins"] {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !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: 5px !important;
        padding-right: 5px !important;
    }
}

/*
 * Checkout product list: square thumbnails on ALL viewports.
 * Page-builder CSS sets `.product-image img { height: 88px }` (no width) → desktop
 * stretches to ~80×88 with object-fit:fill. Mobile used to be OK only because of a
 * max-width:767 media query; lift that so desktop stays 1:1 too.
 */
.benjaruk-checkout .product-image,
.benjaruk-checkout .upsell-image,
.products-container .product-image {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 9px;
}

.benjaruk-checkout .product-image img,
.benjaruk-checkout .upsell-image img,
.products-container .product-image img {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    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 4.5px 8px;
  box-sizing: border-box;
}

/*
 * Side inset: Ohio `.page-container` uses --clb-container-side-gutter (~11.2px).
 * Halved once, then cut another 25% → 0.5 * 0.75 = 0.375 of theme gutter.
 */
body.benjaruk-checkout .page-container {
  padding-left: calc(var(--clb-container-side-gutter, 0.7rem) * 0.375) !important;
  padding-right: calc(var(--clb-container-side-gutter, 0.7rem) * 0.375) !important;
}

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;
  }
}