/* Dudu storefront styles (served by mu-plugin dudu-site-css.php) */
/* == homepage hero == */
.dudu-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 78% 40%,#ffffff 0%,#E6FAF3 38%,#CDF3E7 100%);padding:48px 20px 40px}
.dudu-hero:before{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-200px;border-radius:50%;background:#17BE9B;opacity:.09}
.dudu-hero:after{content:"";position:absolute;width:300px;height:300px;left:-120px;bottom:-140px;border-radius:50%;background:#F6C453;opacity:.18}
.dh-wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:24px;align-items:center}
.dh-eyebrow{display:inline-block;background:#fff;color:#0f9678;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:8px 16px;border-radius:999px;box-shadow:0 4px 14px rgba(14,59,51,.08)}
.dudu-hero h1{margin:18px 0 14px;color:#0E3B33;font-weight:800;font-size:clamp(40px,5.4vw,72px);line-height:1.02;letter-spacing:-.02em}
.dudu-hero h1 span{color:#17BE9B}
.dudu-hero p{color:#2f5f55;font-size:18px;line-height:1.6;max-width:540px;margin:0 0 26px}
.dh-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.dh-btn{display:inline-block;background:#17BE9B;color:#fff!important;font-weight:700;padding:15px 30px;border-radius:999px;text-decoration:none;box-shadow:0 10px 22px rgba(23,190,155,.32);transition:transform .15s,background .15s}
.dh-btn:hover{background:#0f9678;transform:translateY(-2px)}
.dh-ghost{background:#fff;color:#0E3B33!important;box-shadow:0 6px 16px rgba(14,59,51,.10)}.dh-ghost:hover{background:#fff}
.dh-points{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 20px;color:#0E3B33;font-weight:600;font-size:15px}
.dh-points li:before{content:"\2713";color:#17BE9B;margin-right:7px;font-weight:800}
.dh-art img{width:100%;height:auto;display:block}
@media (max-width:900px){.dh-wrap{grid-template-columns:1fr;text-align:center}.dudu-hero p{margin-left:auto;margin-right:auto}.dh-cta,.dh-points{justify-content:center}.dh-art{max-width:520px;margin:0 auto}}
@media (max-width:600px){.dh-eyebrow{font-size:11px;letter-spacing:.04em;padding:7px 12px}.dudu-hero{padding:32px 16px 28px}}
/* == area:print-your-own == */
/* print-your-own (page 17377): hero headings were white-on-pale-mint (theme "background dark" mode on a recoloured gradient) -> teal ink */
.dudu-print-your-own-ink .haru-heading-title,
.dudu-print-your-own-ink .background-dark .haru-heading-title{color:#0E3B33 !important}
.dudu-print-your-own-ink .haru-heading-title--sub-heading-8{color:#0f9678 !important}
/* == /area:print-your-own == */
/* == area:home-imagery == */
/* home-imagery: retint the "Fan Favourites" band from the theme's lavender/pink demo gradient to Dudu mint/sky */
.dudu-home-imagery-fanband.section-bg-gradient-gray{background:linear-gradient(269.88deg,#DFF3FA 6.75%,#EEFBF6 95.85%)!important}
/* == /area:home-imagery == */
/* == area:header-footer == */
/* == header-footer: header 9357, footer 7284, mobile toolbar 17406 == */

/* Search buttons: the global rule paints every submit button mint AND paints every phosphor icon mint,
   so the magnifier on the desktop header search (and popup/toolbar search submits) is mint-on-mint = invisible.
   Make icons that sit inside submit buttons white. */
button[type="submit"] i.phosphor,
button[type="submit"] i[class*="phosphor-"]{-webkit-text-fill-color:#fff!important;color:#fff!important}
.haru-woo-search--minimal .haru-woo-search__submit{border-radius:12px!important}

/* Cart badge: theme-demo red -> Dudu coral (still reads as a badge, on-palette). */
.haru-cart .haru-cart-number{background:#FF8E7A!important;color:#fff!important}

/* Footer column 4 (was the empty Instagram feed) -> soft-mint "Ready to make it roar?" card.
   The dino illustration is the container's background image (set by op on 15bdb1e). */
.elementor-7284 .elementor-element.elementor-element-15bdb1e{
  background-color:#E9FBF6!important;border-radius:24px;padding:30px 30px 30px 30px!important;
  background-repeat:no-repeat!important;background-position:right 10px bottom 0!important;background-size:210px auto!important;
  min-height:250px;align-self:flex-start;width:calc(40% - 15px)!important;margin-right:15px!important}
.elementor-7284 .elementor-element-15bdb1e .elementor-element-dd5c3db,
.elementor-7284 .elementor-element-15bdb1e .elementor-element-09d3ab8{max-width:calc(100% - 200px)!important}
.dudu-header-footer-cta,.dudu-header-footer-cta *,.dudu-header-footer-tagline{font-family:Outfit,sans-serif!important}
.dudu-header-footer-cta p{margin:0 0 18px;color:#2f5f55;font-size:15px;line-height:1.6}
.dudu-header-footer-cta .dudu-header-footer-btns{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:0}
.dudu-header-footer-btn{display:inline-block;background:#17BE9B;color:#fff!important;font-weight:700;font-size:15px;
  padding:11px 22px;border-radius:999px;text-decoration:none;box-shadow:0 8px 18px rgba(23,190,155,.28);transition:background .15s,transform .15s}
.dudu-header-footer-btn:hover{background:#0f9678;color:#fff!important;transform:translateY(-1px)}
.dudu-header-footer-link{color:#0E3B33!important;font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:3px}
@media (max-width:1024px){
  .elementor-7284 .elementor-element.elementor-element-15bdb1e{background-size:170px auto!important}
  .elementor-7284 .elementor-element-15bdb1e .elementor-element-dd5c3db,
  .elementor-7284 .elementor-element-15bdb1e .elementor-element-09d3ab8{max-width:calc(100% - 150px)!important}}
@media (max-width:767px){
  .elementor-7284 .elementor-element.elementor-element-15bdb1e{padding:24px 20px 190px!important;background-position:right 12px bottom 0!important;background-size:180px auto!important;width:calc(100% - 30px)!important;margin:10px 15px 0!important}
  .elementor-7284 .elementor-element-15bdb1e .elementor-element-dd5c3db,
  .elementor-7284 .elementor-element-15bdb1e .elementor-element-09d3ab8{max-width:100%!important}}

/* Footer contact links: keep the theme's text colours (they become <a> for tap-to-call / mailto). */
.elementor-7284 .elementor-element-17b32af a{color:inherit;text-decoration:none}
.elementor-7284 .elementor-element-17b32af a:hover{color:#0f9678!important}

/* Footer col 1: tagline that replaces the demo social icons (all pointed to "#"). */
.dudu-header-footer-tagline{margin:0;color:#2f5f55;font-size:15px;line-height:1.6;max-width:240px}
/* == /area:header-footer == */
/* == area:shop-chrome == */
/* shop-chrome: page-title banners, 404, empty states, leftover theme red (#dd1d26) in WooCommerce chrome.
   Every url(<uploaded url>) below = URL of the uploaded media/<file>; main session substitutes after upload. */

/* --- page-title bars (Shop, product categories, products, Cart/Checkout/Account) --- */
.haru-page-title{background-color:#EEFBF7;background-position:center center;background-repeat:no-repeat}
.haru-page-title:not(.has-heading){padding:30px 0}
@media (max-width:767px){.haru-page-title:not(.has-heading){padding:18px 0}}
/* theme lays a 50% black wash + white text over any title bg image; our art is light, so keep dark ink */
.haru-page-title.has-bg-image:before{background-color:transparent!important}
.haru-page-title.has-bg-image .haru-page-title__heading--main{color:#0E3B33}
.haru-page-title.has-bg-image .haru-page-title__breadcrumbs .haru-breadcrumb,
.haru-page-title.has-bg-image .haru-page-title__breadcrumbs a{color:#2f5f55}
.haru-page-title.has-bg-image .haru-page-title__breadcrumbs a:hover{color:#0f9678}
.haru-page-title.has-bg-image .haru-page-title__breadcrumbs span.current{color:#0E3B33}
.haru-page-title.has-bg-image .haru-page-title__breadcrumbs .delimiter:before{background-color:rgba(14,59,51,.35)}

/* --- 404: swap the red "404" for Dudu painting the zero (heading text stays in the DOM for screen readers) --- */
.haru-content-404 .page-content .haru-title-404{
  font-size:0!important;line-height:0;color:transparent;
  width:min(560px,88vw);aspect-ratio:900/520;margin:0 auto;
  background:url(https://dudu.sg/wp-content/uploads/2026/10/dudu-shop-chrome-404.webp) center/contain no-repeat}
.haru-content-404 .page-content p.txt2{color:#0E3B33;font-weight:700}
.haru-content-404 .page-content p.txt3{color:#2f5f55}

/* --- empty cart (WooCommerce Cart block): sad-face mask icon -> Dudu with a shopping bag --- */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon:before{
  content:"";display:block;
  -webkit-mask-image:none!important;mask-image:none!important;
  background:url(https://dudu.sg/wp-content/uploads/2026/10/dudu-shop-chrome-empty-cart.webp) center/contain no-repeat!important;
  width:260px!important;height:200px!important;max-width:80vw;margin:0 auto 24px!important}
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title{color:#0E3B33;font-size:24px;font-weight:700}
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots{color:#17BE9B}
/* "Compare" buttons in the block product grid render as big red labels — hide them there */
.wc-block-grid__product .product-button--compare{display:none!important}

/* --- no search results: product search / empty category + blog search --- */
.woocommerce-no-products-found{text-align:center;padding:10px 0 40px}
.woocommerce-no-products-found:before,
.haru-archive-blog .content-none:before{
  content:"";display:block;width:260px;height:200px;max-width:80vw;margin:0 auto 18px;
  background:url(https://dudu.sg/wp-content/uploads/2026/10/dudu-shop-chrome-no-results.webp) center/contain no-repeat}
.woocommerce-no-products-found .woocommerce-info{display:block;max-width:640px;margin:0 auto;padding:16px 22px;
  background:#E9FBF6;border:0;border-radius:14px;color:#0E3B33;font-size:16px;text-align:center}
.woocommerce-no-products-found .woocommerce-info:before{display:none}
.haru-archive-blog .content-none{text-align:center}
.haru-archive-blog .content-none p.search-not-found{color:#0E3B33;font-size:16px}

/* --- leftover theme red in WooCommerce chrome -> Dudu mint --- */
.woocommerce-error,.woocommerce-info,.woocommerce-message,
.wc-block-components-notice-banner__content{border-top-color:#17BE9B!important}
.woocommerce-info:before,.woocommerce-message:before,
.wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__content:before{color:#17BE9B!important}
.woocommerce-error a:not(.button),.woocommerce-info a:not(.button),.woocommerce-message a:not(.button),
.wc-block-components-notice-banner a:not(.button),.wc-block-components-totals-coupon-link{color:#0f9678!important}
.wc-block-grid .amount,.wc-block-cart-item__wrap .wc-block-components-product-price,
.wc-block-components-totals-footer-item-tax-value{color:#0f9678!important}
.wc-block-grid__product-add-to-cart a,
.wc-block-cart__submit-container .wc-block-components-button{background-color:#17BE9B!important;color:#fff!important}
.wc-block-grid__product-add-to-cart a:hover,
.wc-block-cart__submit-container .wc-block-components-button:hover{background-color:#0f9678!important}
.wc-block-product-search .wc-block-product-search__button:hover{color:#0f9678!important}
.product-item .product-actions .product-button--compare a.added,
.single-product-top .product-button--compare a.button.added,
.single-product-top .product-button--compare a.button:hover{color:#0f9678!important}
/* == /area:shop-chrome == */
/* == area:product-gallery == */
/* zoom button sat over the tile title (bottom-left) - move it top-right */
.single-product .product-images-actions{left:auto!important;bottom:auto!important;top:16px!important;right:16px!important}
/* == /area:product-gallery == */
/* == area:hero-slider == */
/* full-bleed hero slider: slides stack in one grid cell (height = tallest), crossfade + slide-up */
.dh-slider{padding:56px 20px 92px;border-radius:0 0 40px 40px;outline:none}
.dh-slider .dh-track{display:grid}
.dh-slider .dh-slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s}
.dh-slider .dh-slide.is-active{opacity:1;visibility:visible;transition:opacity .7s ease,visibility 0s}
.dh-slider .dh-copy>*{transform:translateY(18px);opacity:0;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s}
.dh-slider .is-active .dh-copy>*{transform:none;opacity:1}
.dh-slider .is-active .dh-copy>*:nth-child(2){transition-delay:.08s}
.dh-slider .is-active .dh-copy>*:nth-child(3){transition-delay:.16s}
.dh-slider .is-active .dh-copy>*:nth-child(4){transition-delay:.24s}
.dh-slider .is-active .dh-copy>*:nth-child(5){transition-delay:.32s}
.dh-slider .dh-art img{transform:scale(.94) translateY(16px);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.dh-slider .is-active .dh-art img{transform:none;animation:dh-float 6s ease-in-out 1s infinite}
@keyframes dh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.dudu-hero h2{margin:18px 0 14px;color:#0E3B33;font-weight:800;font-size:clamp(40px,5.4vw,72px);line-height:1.02;letter-spacing:-.02em}
.dudu-hero h2 span{color:#17BE9B}
.dh-slider .dh-copy{min-height:400px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.dh-nav{position:absolute;z-index:3;left:50%;bottom:26px;transform:translateX(-50%);display:flex;align-items:center;gap:14px}
.dh-arrow{width:44px;height:44px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;background:#fff;color:#0E3B33;cursor:pointer;box-shadow:0 6px 16px rgba(14,59,51,.12);transition:background .15s,color .15s,transform .15s}
.dh-arrow:hover,.dh-arrow:focus-visible{background:#17BE9B;color:#fff;transform:translateY(-1px)}
.dh-dots{display:flex;gap:8px}
.dh-dot{width:12px;height:12px;border-radius:999px;border:0;padding:0;background:rgba(14,59,51,.18);cursor:pointer;overflow:hidden;position:relative;transition:width .35s ease,background .2s}
.dh-dot.is-active{width:44px;background:rgba(23,190,155,.25)}
.dh-dot i{position:absolute;left:0;top:0;bottom:0;width:0;background:#17BE9B;border-radius:999px}
.dh-dot.is-active i{width:100%}
.dh-slider.is-playing .dh-dot.is-active i{animation:dh-progress 6.5s linear forwards}
@keyframes dh-progress{from{width:0}to{width:100%}}
.dh-arrow:focus-visible,.dh-dot:focus-visible{outline:3px solid #0E3B33;outline-offset:2px}
@media (max-width:900px){.dh-slider .dh-copy{min-height:0;align-items:center}.dh-slider{padding:36px 16px 84px}}
@media (max-width:600px){.dh-arrow{width:38px;height:38px}.dh-slider .dh-art{max-width:360px}}
@media (prefers-reduced-motion:reduce){.dh-slider *{transition:none!important;animation:none!important}}
.dh-arrow:before{content:"";width:10px;height:10px;border:solid currentColor;border-width:0 0 3px 3px;border-radius:1px;transform:translateX(2px) rotate(45deg)}
.dh-next:before{transform:translateX(-2px) rotate(-135deg)}
@media (max-width:600px){.dh-slider .dh-wrap{gap:4px}.dh-slider .dh-art{order:-1;max-width:290px}.dh-slider .dh-points{display:none}.dudu-hero h1,.dudu-hero h2{font-size:38px;margin:12px 0 10px}.dudu-hero.dh-slider p{font-size:15.5px;margin-bottom:18px}.dh-slider .dh-btn{padding:13px 22px}.dh-slider{padding:20px 16px 76px;border-radius:0 0 28px 28px}.dh-nav{bottom:20px}}
/* == /area:hero-slider == */
/* == area:checkout == */
.dudu-paynow{max-width:560px;margin:8px 0 40px;padding:28px;border-radius:20px;background:#E9FBF6;border:2px solid #CDF3E7}
.dudu-paynow h2{margin:0 0 6px;color:#0E3B33}
.dudu-paynow p{color:#2f5f55;margin:0 0 14px}
#dudu-paynow-qr{display:inline-block;background:#fff;padding:14px;border-radius:14px;margin:4px 0 16px;box-shadow:0 6px 16px rgba(14,59,51,.08)}
#dudu-paynow-qr canvas{display:block}
.dudu-paynow dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 16px;color:#0E3B33}
.dudu-paynow dt{font-weight:600}.dudu-paynow dd{margin:0}
.dudu-collect{max-width:560px;margin:8px 0 32px;padding:22px 28px;border-radius:20px;background:#FDF3D7;border:2px solid #F6E2A6}
.dudu-collect h2{margin:0 0 6px;color:#0E3B33}.dudu-collect p{margin:0;color:#4a4a2f}
.dudu-express-note{margin:14px 0 0;padding:10px 14px;border-radius:12px;background:#E9FBF6;color:#0E3B33;font-size:14.5px;line-height:1.5}
.wc-block-components-checkout-place-order-button,.wc-block-cart__submit-button{background:#17BE9B!important;border-color:#17BE9B!important;color:#fff!important;border-radius:999px!important}
.wc-block-components-checkout-place-order-button:hover,.wc-block-cart__submit-button:hover{background:#0f9678!important;border-color:#0f9678!important}
/* == /area:checkout == */
/* == area:header-fit == */
/* laptop widths: the 4 left menu items overflowed their box and ran under the centred logo (1200-1440px) */
@media (min-width:1025px) and (max-width:1499px){
  .elementor-element-ec41c81 .haru-item--main,.elementor-element-e8be0ad .haru-item--main{padding-left:9px!important;padding-right:9px!important;font-size:15px!important}
}
@media (min-width:1025px) and (max-width:1279px){
  .elementor-element-ec41c81 .haru-item--main,.elementor-element-e8be0ad .haru-item--main{padding-left:5px!important;padding-right:5px!important;font-size:14px!important}
  .elementor-element-a9a6587 img{max-width:84px!important;height:auto!important}
}
/* == /area:header-fit == */
/* == area:newsletter == */
.dudu-ml{margin-top:18px;max-width:340px;width:100%}
.dudu-ml-title{display:block;font-weight:700;color:#0E3B33;font-size:16px;margin-bottom:2px}
.dudu-ml-sub{margin:0 0 10px;color:#4F6F68;font-size:14px;line-height:1.45}
.dudu-ml-row{display:flex;gap:8px}
.dudu-ml-row input{flex:1;min-width:0;height:44px;padding:0 14px;border:1.5px solid #CDE7DF;border-radius:999px;background:#fff;color:#0E3B33;font-size:15px}
.dudu-ml-row input:focus{outline:none;border-color:#17BE9B;box-shadow:0 0 0 3px rgba(23,190,155,.18)}
.dudu-ml-row button{height:44px;padding:0 20px;border:0;border-radius:999px;background:#17BE9B;color:#fff;font-weight:700;cursor:pointer}
.dudu-ml-row button:hover{background:#0f9678}.dudu-ml-row button:disabled{opacity:.6;cursor:wait}
.dudu-ml-msg{margin:8px 0 0;font-size:14px;color:#0f9678;min-height:1em}
.dudu-ml-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
/* == /area:newsletter == */