/* Complex Art – "Premium Atelier" effects. CSS only (no JavaScript): upload as Site Settings > Design Settings > "Additional CSS file".
   Keeps the existing layout, logo, fonts and colours. Removing the file restores the site exactly as it was.
   Scroll effects use CSS scroll-driven animations (Chrome, Edge, Opera, Samsung, newer Safari); other browsers simply show the page as today. */
:root{
  --cx-g:#114a44;--cx-g2:#1f6b62;--cx-r:#e2231a;--cx-y:#f6b400;--cx-b:#1f5fbf;--cx-p:#c2337a;
  --cx-ease:cubic-bezier(.22,.9,.25,1);
  --cx-soft:0 22px 44px -22px rgba(17,74,68,.38),0 4px 12px -6px rgba(0,0,0,.08);
  --cx-brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M4 24c40-12 90-16 140-13s70 9 120 6 88-12 132-9c2 0 3 4 0 5-46 4-84 12-136 14s-74-6-124-6S38 31 6 33c-4 0-6-7-2-9z'/%3E%3C/svg%3E");
}
html{scroll-behavior:smooth}

/* ---------- 1. ambience: very soft watercolour light in the page margins + painted ribbon on load ---------- */
html:before{content:"";position:fixed;inset:-10vmax;z-index:-1;pointer-events:none;opacity:.6;
  background:radial-gradient(38vmax 30vmax at 0% 18%,rgba(246,180,0,.16),transparent 70%),radial-gradient(34vmax 28vmax at 100% 30%,rgba(31,95,191,.12),transparent 70%),
             radial-gradient(30vmax 26vmax at 92% 92%,rgba(226,35,26,.10),transparent 70%),radial-gradient(28vmax 24vmax at 6% 88%,rgba(31,107,98,.12),transparent 70%);
  animation:cx-wash 30s ease-in-out infinite alternate}
@keyframes cx-wash{to{transform:translate3d(1.5vmax,-1vmax,0) rotate(2deg)}}
body:before{content:"";position:fixed;left:0;top:0;height:4px;width:100%;z-index:99999;pointer-events:none;
  background:linear-gradient(90deg,var(--cx-r),var(--cx-y) 30%,var(--cx-b) 60%,var(--cx-g2) 85%,var(--cx-p));background-size:200% 100%;
  -webkit-mask:var(--cx-brush) 0 0/100% 100% no-repeat;mask:var(--cx-brush) 0 0/100% 100% no-repeat;
  clip-path:inset(0 100% 0 0);animation:cx-ribbon 1.3s var(--cx-ease) .1s forwards,cx-flow 12s linear 1.4s infinite}
@keyframes cx-ribbon{to{clip-path:inset(0 0 0 0)}}
@keyframes cx-flow{to{background-position:200% 0}}

/* ---------- 2. header: gains a soft shadow and frosted glass as you scroll ---------- */
@supports (animation-timeline:scroll()){
  #hdr_nav{animation:cx-hdr linear both;animation-timeline:scroll(root);animation-range:0 120px}
  @keyframes cx-hdr{from{box-shadow:0 0 0 rgba(17,74,68,0)}to{box-shadow:0 10px 28px -14px rgba(17,74,68,.35);background-color:rgba(255,255,255,.94)}}
}

/* ---------- 3. search ---------- */
#search-field{border-radius:999px!important;transition:box-shadow .3s var(--cx-ease),border-color .3s ease}
#search-field:focus{outline:none;border-color:var(--cx-g)!important;box-shadow:0 0 0 4px rgba(17,74,68,.12),0 8px 22px -10px rgba(17,74,68,.45)}
#search_button{transition:transform .3s var(--cx-ease)}
#search_button:hover{transform:rotate(-12deg) scale(1.12)}

/* ---------- 4. category menu: a watercolour dab blooms behind the hovered item ---------- */
#mm_control li a{position:relative;z-index:0;transition:color .25s ease,padding-left .3s var(--cx-ease)}
#mm_control li a:before{content:"";position:absolute;z-index:-1;left:-6px;top:50%;width:70%;height:150%;transform:translateY(-50%) scale(.2,.6);opacity:0;
  border-radius:45% 55% 60% 40%/50% 45% 55% 50%;background:radial-gradient(circle at 30% 50%,rgba(246,180,0,.42),rgba(226,35,26,.16) 60%,transparent 72%);filter:blur(2px);
  transition:transform .45s var(--cx-ease),opacity .3s ease}
#mm_control li a:hover{padding-left:8px;color:var(--cx-g)}
#mm_control li a:hover:before{opacity:1;transform:translateY(-50%) scale(1)}

/* ---------- 5. pictures: slow cinematic zoom on banners, slider and category tiles ---------- */
.slide .slide_bg,.slide img,.mosaic-big img,.mosaic-small img,.home_usp img{transition:transform 1.6s var(--cx-ease),filter .8s ease}
.mosaic-big,.mosaic-small,.slide{overflow:hidden;position:relative}
.slide:hover .slide_bg,.mosaic-big:hover img,.mosaic-small:hover img{transform:scale(1.045)}
.mosaic-big:hover img,.mosaic-small:hover img{filter:saturate(1.12) contrast(1.03)}
.mosaic-big:after,.mosaic-small:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s ease;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 45%,transparent 60%);background-size:250% 100%;background-position:120% 0}
.mosaic-big:hover:after,.mosaic-small:hover:after{opacity:1;animation:cx-gloss 1.2s var(--cx-ease) forwards}
@keyframes cx-gloss{to{background-position:-60% 0}}

/* ---------- 6. section titles: hand-painted brush stroke under the heading ---------- */
.section_title h2{position:relative;display:inline-block;z-index:0}
.section_title h2:after{content:"";position:absolute;left:-10px;right:-14px;bottom:-1px;height:.6em;z-index:-1;opacity:.55;
  background:linear-gradient(90deg,var(--cx-y),#ff8a5b 55%,var(--cx-r));
  -webkit-mask:var(--cx-brush) 0 0/100% 100% no-repeat;mask:var(--cx-brush) 0 0/100% 100% no-repeat}
@supports (animation-timeline:view()){
  .section_title h2:after{animation:cx-paint linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
  @keyframes cx-paint{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
}

/* ---------- 7. product cards (home rows + category listings) ---------- */
.product_card:not(.product_card_megamenu)>.__i{position:relative;isolation:isolate;overflow:hidden;background:#fff;border-radius:14px;transition:transform .45s var(--cx-ease),box-shadow .45s var(--cx-ease)}
.product_card:not(.product_card_megamenu)>.__i:before{content:"";position:absolute;z-index:-1;pointer-events:none;width:90%;height:55%;right:-38%;top:28%;opacity:0;
  border-radius:42% 58% 55% 45%/48% 42% 58% 52%;filter:blur(4px);transform:scale(.3) rotate(-25deg);
  background:radial-gradient(circle at 40% 45%,rgba(246,180,0,.7),rgba(255,138,91,.45) 45%,rgba(226,35,26,.2) 62%,transparent 72%);
  transition:opacity .45s ease,transform .8s var(--cx-ease)}
.product_card:not(.product_card_megamenu):nth-child(3n+2)>.__i:before{background:radial-gradient(circle at 40% 45%,rgba(31,107,98,.55),rgba(246,180,0,.35) 50%,transparent 72%)}
.product_card:not(.product_card_megamenu):nth-child(3n)>.__i:before{background:radial-gradient(circle at 40% 45%,rgba(31,95,191,.5),rgba(194,51,122,.28) 50%,transparent 72%)}
.product_card:not(.product_card_megamenu):hover>.__i{transform:translateY(-8px);box-shadow:var(--cx-soft)}
.product_card:not(.product_card_megamenu):hover>.__i:before{opacity:.6;transform:scale(1) rotate(6deg)}
.product_card .figure{overflow:hidden;border-radius:10px}
.product_card .figure img{transition:transform .9s var(--cx-ease)}
.product_card:hover .figure img{transform:scale(1.07)}
.product_card .title{transition:color .25s ease}
.product_card:hover .title{color:var(--cx-g)}
.product_card .fav,.product_card .quick_view{transition:opacity .3s ease,transform .4s var(--cx-ease),background-color .25s ease}
@media (hover:hover){
  .product_card .fav,.product_card .quick_view{opacity:0;transform:translateX(8px)}
  .product_card:hover .fav,.product_card:hover .quick_view{opacity:1;transform:none}
}
.product_card .fav:hover{background-color:var(--cx-r)!important}
.product_card .quick_view:hover{background-color:var(--cx-g)!important}

/* ---------- 8. badges ---------- */
.overlays .o2 span{display:inline-block;animation:cx-breathe 3.2s ease-in-out infinite}
@keyframes cx-breathe{50%{transform:scale(1.07)}}
.overlays .o1 span{position:relative;overflow:hidden;display:inline-block}
.overlays .o1 span:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);animation:cx-shine 3.6s ease-in-out infinite}
@keyframes cx-shine{0%,62%{left:-60%}100%{left:130%}}

/* ---------- 9. buttons: rounded, light sweep, lift; paint floods in on hover ---------- */
.product_card .action .button button,#btnAddAll,._td_buy button,.nl_button,.hero_caption a{
  position:relative;overflow:hidden;isolation:isolate;border-radius:999px!important;transition:transform .25s var(--cx-ease),box-shadow .3s ease,filter .25s ease}
.product_card .action .button button:after,._td_buy button:after,.hero_caption a:after{content:"";position:absolute;z-index:1;top:0;left:-75%;width:50%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .7s var(--cx-ease)}
.product_card .action .button button:hover,#btnAddAll:hover,._td_buy button:hover,.nl_button:hover,.hero_caption a:hover{transform:translateY(-2px);box-shadow:0 12px 22px -10px rgba(17,74,68,.6);filter:brightness(1.07)}
.product_card .action .button button:hover:after,._td_buy button:hover:after,.hero_caption a:hover:after{left:130%}
.product_card .action .button button:active,#btnAddAll:active,._td_buy button:active{transform:scale(.95)}
#btnAddAll{background-image:linear-gradient(100deg,transparent 0 40%,rgba(255,255,255,.35) 50%,transparent 60% 100%);background-size:250% 100%;background-position:120% 0;transition:background-position .8s var(--cx-ease),transform .25s var(--cx-ease),box-shadow .3s ease}
#btnAddAll:hover{background-position:-20% 0}
.product_card .qty input,._td_qty input{border-radius:999px;transition:box-shadow .25s ease}
.product_card .qty input:focus{outline:none;box-shadow:0 0 0 3px rgba(17,74,68,.15)}

/* ---------- 10. product page: gallery fades in, thumbnails lift ---------- */
#product_gallery_main img{animation:cx-fade .8s var(--cx-ease) both}
@keyframes cx-fade{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
#product_gallery img{transition:transform .35s var(--cx-ease),box-shadow .35s ease}
#product_gallery [class*=thumb] img:hover{transform:translateY(-3px);box-shadow:0 8px 16px -8px rgba(17,74,68,.45)}

/* ---------- 11. stock: small live dot ---------- */
.stock_label_ok{position:relative;padding-left:15px!important}
.stock_label_ok:before{content:"";position:absolute;left:5px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#fff;animation:cx-live 2.2s ease-out infinite}
@keyframes cx-live{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}100%{box-shadow:0 0 0 6px rgba(255,255,255,0)}}

/* ---------- 12. scroll reveal: sections rise in, banners are painted open ---------- */
@supports (animation-timeline:view()){
  .page_section,.mosaic,.home_usp{animation:cx-rise linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  @keyframes cx-rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
  .mosaic-big img,.mosaic-small img{animation:cx-open linear both;animation-timeline:view();animation-range:entry 5% cover 35%}
  @keyframes cx-open{from{clip-path:inset(0 100% 0 0 round 14px)}to{clip-path:inset(0 0 0 0 round 0)}}
}

/* ---------- 13. carousel arrows + footer ---------- */
.slick-arrow{transition:transform .3s var(--cx-ease),box-shadow .3s ease}
.slick-arrow:hover{transform:scale(1.12);box-shadow:0 8px 18px -6px rgba(17,74,68,.5)}
#ftr a{background:linear-gradient(90deg,var(--cx-y),var(--cx-r)) 0 100%/0 2px no-repeat;transition:background-size .35s var(--cx-ease),color .25s ease}
#ftr a:hover{background-size:100% 2px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  body:before{clip-path:none}
}