/* Short description: the mandatory hook shown after the title and gallery. */ .single-product .waslli-price-card--v2{display:none} .single-product .waslli-product-hook{position:relative;overflow:hidden;margin:16px 0 22px;padding:30px 44px 30px 32px;border:1px solid #ffd878;border-radius:30px;background:linear-gradient(110deg,#fffdf5 0%,#fff4c9 52%,#fff9e7 100%);box-shadow:0 10px 25px rgba(123,65,18,.07);text-align:center} .single-product .waslli-product-hook::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:9px;background:linear-gradient(180deg,#ff9800 0%,#fe6102 65%,#e84a10 100%)} .single-product .waslli-product-hook::after{content:"";position:absolute;inset-inline-end:-56px;inset-block-start:-65px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,190,53,.24),transparent 68%);pointer-events:none} .single-product .waslli-product-hook__inner{position:relative;z-index:1;color:#873319;font-weight:800;line-height:1.6} .single-product .waslli-product-hook__inner p{margin:0 0 10px;font-size:clamp(20px,2.15vw,31px);line-height:1.58;color:#873319;font-weight:800} .single-product .waslli-product-hook__inner p:not(:first-child){font-size:17px;font-weight:600;color:#60301e} .single-product .waslli-product-hook__inner p:last-child{margin-bottom:0} .single-product .waslli-product-hook__inner ul{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none;text-align:right} .single-product .waslli-product-hook__inner li{position:relative;padding-inline-start:25px;color:#60301e;font-size:16px;font-weight:700} .single-product .waslli-product-hook__inner li::before{content:"✓";position:absolute;inset-inline-start:0;color:#00885b;font-weight:900} @media (max-width:720px){.single-product .waslli-product-hook{margin:12px 0 18px;padding:19px 21px 19px 24px;border-radius:24px}.single-product .waslli-product-hook::before{width:6px}.single-product .waslli-product-hook__inner p{font-size:clamp(18px,4.3vw,23px)!important;line-height:1.62}.single-product .waslli-product-hook__inner p:not(:first-child),.single-product .waslli-product-hook__inner li{font-size:14px}.single-product .waslli-product-hook__inner ul{text-align:start}} /* Desktop follows the exact same natural product order as mobile, in one column. */ @media (min-width:921px){ /* This theme puts .woocommerce on , not necessarily on an inner wrapper. */ body.single-product.woocommerce div.product,body.single-product .woocommerce div.product{display:flex!important;flex-direction:column!important;gap:0!important;max-width:940px!important;margin-inline:auto!important} body.single-product.woocommerce div.product>.waslli-product-title-card,body.single-product .woocommerce div.product>.waslli-product-title-card{order:1;align-self:stretch;margin:0 0 20px!important} body.single-product.woocommerce div.product>div.images,body.single-product .woocommerce div.product>div.images{position:static!important;order:2;align-self:center;width:min(100%,760px)!important;margin:0 auto 20px!important;padding:0!important;border:0!important;box-shadow:none!important} body.single-product.woocommerce div.product>.waslli-product-hook,body.single-product .woocommerce div.product>.waslli-product-hook{order:3;align-self:stretch;max-width:820px;margin:0 auto 24px!important;padding:22px 34px!important} body.single-product.woocommerce .waslli-product-hook__inner p,body.single-product .waslli-product-hook__inner p{font-size:clamp(19px,1.7vw,25px)!important;line-height:1.62!important} body.single-product.woocommerce div.product>div.summary,body.single-product .woocommerce div.product>div.summary{display:block!important;order:4;width:100%!important;margin:0!important;padding:0!important;text-align:center} body.single-product.woocommerce div.product>.waslli-product-landing,body.single-product .woocommerce div.product>.waslli-product-landing{order:5;width:100%!important;grid-column:auto!important} body.single-product.woocommerce div.product>.waslli-inline-order,body.single-product .woocommerce div.product>.waslli-inline-order{order:6;width:100%!important;grid-column:auto!important} body.single-product.woocommerce div.product>.waslli-why-us,body.single-product.woocommerce div.product>.waslli-social-reviews,body.single-product.woocommerce div.product>.waslli-faq--v2,body.single-product.woocommerce div.product>.woocommerce-tabs,body.single-product.woocommerce div.product>.related,body.single-product.woocommerce div.product>.up-sells,body.single-product .woocommerce div.product>.waslli-why-us,body.single-product .woocommerce div.product>.waslli-social-reviews,body.single-product .woocommerce div.product>.waslli-faq--v2,body.single-product .woocommerce div.product>.woocommerce-tabs,body.single-product .woocommerce div.product>.related,body.single-product .woocommerce div.product>.up-sells{order:7;width:100%!important;grid-column:auto!important} } /* Tablet-sized windows use the same natural product order (phones stay untouched). */ @media (min-width:641px) and (max-width:920px){ body.single-product.woocommerce div.product,body.single-product .woocommerce div.product{display:flex!important;flex-direction:column!important;gap:0!important} body.single-product.woocommerce div.product>.waslli-product-title-card,body.single-product .woocommerce div.product>.waslli-product-title-card{order:1} body.single-product.woocommerce div.product>div.images,body.single-product .woocommerce div.product>div.images{position:static!important;order:2;width:min(100%,680px)!important;margin:0 auto 20px!important} body.single-product.woocommerce div.product>.waslli-product-hook,body.single-product .woocommerce div.product>.waslli-product-hook{order:3} body.single-product.woocommerce div.product>div.summary,body.single-product .woocommerce div.product>div.summary{display:block!important;order:4;width:100%!important;margin:0!important} body.single-product.woocommerce div.product>.waslli-product-landing,body.single-product .woocommerce div.product>.waslli-product-landing{order:5} body.single-product.woocommerce div.product>.waslli-inline-order,body.single-product .woocommerce div.product>.waslli-inline-order{order:6;width:100%!important} body.single-product.woocommerce div.product>.waslli-why-us,body.single-product.woocommerce div.product>.waslli-social-reviews,body.single-product.woocommerce div.product>.waslli-faq--v2,body.single-product.woocommerce div.product>.woocommerce-tabs,body.single-product.woocommerce div.product>.related,body.single-product.woocommerce div.product>.up-sells,body.single-product .woocommerce div.product>.waslli-why-us,body.single-product .woocommerce div.product>.waslli-social-reviews,body.single-product .woocommerce div.product>.waslli-faq--v2,body.single-product .woocommerce div.product>.woocommerce-tabs,body.single-product .woocommerce div.product>.related,body.single-product .woocommerce div.product>.up-sells{order:7;width:100%!important} } /* One product story everywhere: cancel desktop grid/order rules and let the HTML use its mobile sequence. */ @media (min-width:641px){ body.single-product.woocommerce div.product,body.single-product .woocommerce div.product{display:block!important;max-width:680px!important;margin-inline:auto!important} body.single-product.woocommerce div.product>*,body.single-product .woocommerce div.product>*{order:initial!important;grid-column:auto!important;grid-row:auto!important} body.single-product.woocommerce div.product>div.images,body.single-product .woocommerce div.product>div.images{position:static!important;width:100%!important;max-width:none!important;margin:0 0 18px!important} body.single-product.woocommerce div.product>div.summary,body.single-product .woocommerce div.product>div.summary{display:block!important;width:100%!important;margin:0!important;padding:0!important} body.single-product.woocommerce div.product>.waslli-product-title-card,body.single-product .woocommerce div.product>.waslli-product-title-card{width:auto!important;margin:0 0 14px!important} body.single-product.woocommerce div.product>.waslli-product-hook,body.single-product .woocommerce div.product>.waslli-product-hook{max-width:none!important;margin:10px 0 16px!important;padding:19px 21px 19px 24px!important} body.single-product.woocommerce div.product>.waslli-product-landing,body.single-product.woocommerce div.product>.waslli-inline-order,body.single-product .woocommerce div.product>.waslli-product-landing,body.single-product .woocommerce div.product>.waslli-inline-order{width:100%!important} } /* Smart badges belong to the static gallery itself, not to the title above it. */ .waslli-static-product-gallery__primary{position:relative!important} .waslli-static-product-gallery__primary>.waslli-gallery-badges{position:absolute;top:12px;inset-inline-start:12px;z-index:6} body.single-product.woocommerce .woocommerce-product-gallery.images,body.single-product .woocommerce .woocommerce-product-gallery.images{position:relative!important} /* Badge markup is relocated inline during HTML parsing. If JavaScript is unavailable, hide the fallback rather than allowing it to reserve space above the gallery and move the page. */ body.single-product.woocommerce div.product>.waslli-gallery-badges,body.single-product.woocommerce div.product>.waslli-sale-badge,body.single-product .woocommerce div.product>.waslli-gallery-badges,body.single-product .woocommerce div.product>.waslli-sale-badge{display:none!important} .woocommerce-product-gallery>.waslli-gallery-badges,.woocommerce-product-gallery>.waslli-sale-badge{display:flex} .woocommerce-product-gallery>.waslli-sale-badge{display:inline-flex} /* The visitor count starts as a placeholder and is updated after parsing. Reserve exactly two digit spaces so its first real value never reflows text. */ .waslli-urgency-widget .waslli-urgency-visitors [data-waslli-visitors]{display:inline-block;min-width:2ch;text-align:center;font-variant-numeric:tabular-nums} /* Related products: retain the landing-page cards and only improve their layout. */ body.single-product .related.products{width:min(calc(100% - 32px),1440px)!important;margin-inline:auto!important} body.single-product .related.products>ul.products{display:flex!important;flex-flow:row nowrap!important;align-items:stretch!important;gap:22px!important;width:100%!important;margin:0!important;padding:2px 2px 16px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain} body.single-product .related.products>ul.products::-webkit-scrollbar{display:none} body.single-product .related.products>ul.products>li.product, body.single-product .related.products>ul.products[class*="columns-"]>li.product{float:none!important;clear:none!important;flex:0 0 calc((100% - 44px)/3)!important;width:calc((100% - 44px)/3)!important;margin:0!important;scroll-snap-align:start;scroll-snap-stop:always} @media (max-width:768px){body.single-product .related.products{width:calc(100% - 24px)!important}body.single-product .related.products>ul.products{gap:14px!important;padding:2px 1px 14px!important}body.single-product .related.products>ul.products>li.product,body.single-product .related.products>ul.products[class*="columns-"]>li.product{flex:0 0 min(84vw,330px)!important;width:min(84vw,330px)!important}} /* Gallery overlays belong to the image frame, regardless of landing-page layout order. */ /* The desktop layout resets generic `.images` blocks to static. Restore the gallery's containing block specifically, otherwise WooCommerce's zoom button is positioned against the product title instead of the image. */ body.single-product .woocommerce-product-gallery, body.single-product.woocommerce div.product>div.images.woocommerce-product-gallery, body.single-product .woocommerce div.product>div.images.woocommerce-product-gallery{position:relative!important} body.single-product .woocommerce-product-gallery>.waslli-gallery-badges{position:absolute!important;top:12px!important;inset-inline-start:12px!important;z-index:20!important} body.single-product .woocommerce-product-gallery>.waslli-sale-badge{position:absolute!important;top:12px!important;inset-inline-end:12px!important;z-index:20!important} body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger{position:absolute!important;top:12px!important;right:auto!important;left:12px!important;inset-inline-start:auto!important;inset-inline-end:12px!important;z-index:21!important;transform:none!important} body.single-product .woocommerce-product-gallery:has(>.waslli-sale-badge) .woocommerce-product-gallery__trigger{top:58px!important} /* WooCommerce PhotoSwipe's image sprite can hide its close control on mobile. */ .pswp__top-bar{opacity:1!important} .pswp__button--close{display:block!important;position:absolute!important;top:max(12px,env(safe-area-inset-top))!important;right:12px!important;width:46px!important;height:46px!important;margin:0!important;border:2px solid rgba(255,255,255,.7)!important;border-radius:50%!important;background:#005135!important;background-image:none!important;opacity:1!important} .pswp__button--close::before{content:'×';display:block;color:#fff;font-family:Arial,sans-serif;font-size:34px;font-weight:400;line-height:39px;text-align:center} /* Full-screen gallery controls: keep the phone interface clear and thumb-friendly. */ @media (max-width:720px){ .pswp__top-bar{height:70px!important;padding:12px 16px!important;background:linear-gradient(180deg,rgba(0,32,22,.92),rgba(0,32,22,.2))!important;direction:ltr} /* WooCommerce applies a sprite with a stronger `button` selector. Remove it explicitly so the clean × below is the only close icon. */ button.pswp__button--close{top:max(12px,env(safe-area-inset-top))!important;right:16px!important;z-index:5!important;width:44px!important;height:44px!important;border:1px solid rgba(255,255,255,.42)!important;border-radius:13px!important;background-color:rgba(0,81,53,.94)!important;background-image:none!important;background-position:0 0!important;box-shadow:0 5px 16px rgba(0,0,0,.28)!important;pointer-events:auto!important;touch-action:manipulation!important} .pswp__button--close::before{font-size:31px!important;font-weight:300!important;line-height:39px!important} .pswp__counter{position:absolute!important;top:max(17px,calc(env(safe-area-inset-top) + 5px))!important;right:auto!important;left:16px!important;height:33px!important;padding:0 11px!important;margin:0!important;border:1px solid rgba(255,255,255,.3)!important;border-radius:999px!important;background:rgba(0,0,0,.42)!important;color:#fff!important;font-size:13px!important;font-weight:800!important;line-height:31px!important;direction:ltr!important} .pswp__button--fs,.pswp__button--zoom{display:none!important} button.pswp__button--arrow--left,button.pswp__button--arrow--right{visibility:visible!important;top:50%!important;width:50px!important;height:58px!important;margin-top:-29px!important;border:0!important;border-radius:14px!important;background-color:rgba(0,81,53,.72)!important;background-image:none!important;box-shadow:0 5px 14px rgba(0,0,0,.22)!important;opacity:1!important} .pswp__button--arrow--left{left:14px!important}.pswp__button--arrow--right{right:14px!important} button.pswp__button--arrow--left::before,button.pswp__button--arrow--right::before{top:0!important;right:0!important;bottom:0!important;left:0!important;width:auto!important;height:auto!important;background-image:none!important;background-color:transparent!important;color:#fff!important;font-family:Arial,sans-serif!important;font-size:39px!important;font-weight:300!important;line-height:52px!important;text-align:center!important} .pswp__button--arrow--left::before{content:'‹'!important}.pswp__button--arrow--right::before{content:'›'!important} } body.single-product .waslli-live-toast__close{position:relative;z-index:2;pointer-events:auto!important;touch-action:manipulation!important} /* The summary widget replaces the old mobile deal card, so keep it visible on every screen. */ @media (max-width:1024px){.single-product .waslli-urgency-widget.waslli-urgency--summary{display:flex!important}.single-product .waslli-urgency-widget .waslli-urgency-countdown{flex-direction:row!important}.single-product .waslli-urgency-widget .waslli-urgency-countdown .waslli-urgency-body{width:auto!important}} .single-product .waslli-urgency-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;margin-top:4px;padding:0 24px;border-radius:999px;background:linear-gradient(135deg,#fe6102,#ff8a35);color:#fff!important;font-size:16px;font-weight:900;line-height:1;text-decoration:none!important;box-shadow:0 10px 21px rgba(254,97,2,.28);transition:transform .18s ease,box-shadow .18s ease} .single-product .waslli-urgency-cta:hover{color:#fff;transform:translateY(-2px);box-shadow:0 14px 27px rgba(254,97,2,.36)} .single-product .waslli-urgency-cta:focus-visible{outline:3px solid rgba(0,183,122,.35);outline-offset:3px} .single-product .waslli-urgency-cta svg{width:19px;height:19px;transition:transform .18s ease} .single-product .waslli-urgency-cta:hover svg{transform:translateX(-3px)} @media (max-width:480px){.single-product .waslli-urgency-cta{width:100%;min-height:52px;font-size:15px}} /* Product assurances: a touch-friendly horizontal rail keeps mobile pages compact. */ @media (max-width:1024px){body.single-product .waslli-product-assurances{display:flex!important;flex-wrap:nowrap!important;gap:10px!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-inline:contain;margin:0!important;padding:2px 2px 10px!important;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}body.single-product .waslli-product-assurances::-webkit-scrollbar{display:none}body.single-product .waslli-product-assurances>.waslli-assurance{display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;flex:0 0 min(86vw,410px)!important;min-width:0;min-height:108px!important;margin:0!important;padding:16px!important;border-radius:18px!important;scroll-snap-align:center}body.single-product .waslli-assurance-icon{width:42px;height:42px;border-radius:14px}body.single-product .waslli-assurance strong{font-size:16px}body.single-product .waslli-assurance span{font-size:14px;line-height:1.65}} /* The visible cards are the "why buy from us" group, not .waslli-product-assurances. */ @media (max-width:720px){body.single-product .waslli-why-us__grid{display:flex!important;grid-template-columns:none!important;flex-wrap:nowrap!important;gap:10px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:2px 2px 12px!important;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}body.single-product .waslli-why-us__grid::-webkit-scrollbar{display:none}body.single-product .waslli-why-us__grid>.waslli-why-us__card{flex:0 0 min(87vw,430px)!important;min-width:0;margin:0!important;scroll-snap-align:center}} /* A smaller offer prompt placed between long-content images. */ .single-product .waslli-mid-offer{max-width:650px;margin:22px auto;padding:18px;border:1px solid #cde9dc;border-radius:20px;background:linear-gradient(135deg,#f5fffa,#fffaf4);text-align:center;box-shadow:0 10px 26px rgba(0,81,53,.07)} .single-product .waslli-mid-offer__eyebrow{display:inline-flex;padding:5px 12px;border-radius:999px;background:#fff0df;color:#d65208;font-size:12px;font-weight:900} .single-product .waslli-mid-offer__price{margin:10px 0 6px;color:#005135;font-size:30px;font-weight:900;line-height:1.1} .single-product .waslli-mid-offer__price ins{color:#005135;text-decoration:none}.single-product .waslli-mid-offer__price del{margin-inline:7px;color:#94a3a0;font-size:17px;font-weight:600}.single-product .waslli-mid-offer__price .woocommerce-Price-currencySymbol{color:#00b77a;font-size:.68em} .single-product .waslli-mid-offer__saving{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px}.single-product .waslli-mid-offer__saving span{padding:4px 9px;border-radius:999px;background:#f04438;color:#fff;font-size:12px;font-weight:900}.single-product .waslli-mid-offer__saving strong{color:#00875a;font-size:14px} .single-product .waslli-mid-offer__trust{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-bottom:14px}.single-product .waslli-mid-offer__trust span{padding:5px 9px;border:1px solid #d8e8e2;border-radius:999px;background:#fff;color:#35564a;font-size:12px;font-weight:700} .single-product .waslli-mid-offer__cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:45px;padding:0 25px;border:0;border-radius:12px;background:#005135;color:#fff!important;font:inherit;font-size:15px;font-weight:900;text-decoration:none!important;box-shadow:0 8px 16px rgba(0,81,53,.2);cursor:pointer;transition:transform .18s ease,background .18s ease}.single-product .waslli-mid-offer__cta:hover{background:#007a52;color:#fff;transform:translateY(-1px)} @media (max-width:720px){.single-product .waslli-mid-offer{margin:16px 0;padding:15px;border-radius:17px}.single-product .waslli-mid-offer__price{font-size:26px}.single-product .waslli-mid-offer__cta{width:100%;min-height:48px}} /* Desktop product details: keep the heading above its cards instead of leaving a blank side column. */ @media (min-width:921px){ body.single-product.woocommerce .waslli-spec-story,body.single-product .woocommerce .waslli-spec-story{max-width:940px;margin-inline:auto;padding-inline:18px!important} body.single-product.woocommerce .waslli-description-group,body.single-product .woocommerce .waslli-description-group{grid-template-columns:1fr!important;gap:16px!important;padding:28px 0!important} body.single-product.woocommerce .waslli-description-group h3,body.single-product .woocommerce .waslli-description-group h3{width:100%;margin:0!important;color:#005135!important;font-size:clamp(25px,2.3vw,34px)!important;line-height:1.3!important;text-align:center!important} body.single-product.woocommerce .waslli-description-group ul,body.single-product .woocommerce .waslli-description-group ul{width:100%;max-width:900px;margin-inline:auto!important;gap:14px!important} body.single-product.woocommerce .waslli-description-group li,body.single-product .woocommerce .waslli-description-group li{min-height:0!important;padding:16px 46px 16px 18px!important;border-radius:14px!important;font-size:16px!important;font-weight:700!important;line-height:1.75!important;box-shadow:0 6px 16px rgba(0,81,53,.045)!important} body.single-product.woocommerce .waslli-description-group li::before,body.single-product .woocommerce .waslli-description-group li::before{top:16px!important;right:15px!important} }