/* ============ Arel Store — storefront stylesheet ============ */
:root{
  --cream:#FAF7F1; --cream2:#F4EDE2; --ink:#2F2925; --brown:#4A3D35;
  --taupe:#A8907E; --body:#5A4E45; --body2:#6B5E54; --rose:#D8AAA0;
  --sage:#A8B5A0; --border:#EAE0D2; --border2:#E2D4C0; --imgbg:#EFE7DA; --field:#FAFAF8;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:var(--cream);}
body{font-family:'Nunito Sans',sans-serif;color:var(--ink);font-size:15px;line-height:1.6;overflow-x:hidden;}
::selection{background:#E8D8C3;color:var(--ink);}
input,button,textarea,select{font-family:inherit;}
a{color:inherit;}
img{max-width:100%;}
.serif{font-family:'Cormorant Garamond',serif;}

@keyframes arelFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes arelDrawer{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes arelDrawerL{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes arelSheet{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes arelBackdrop{from{opacity:0}to{opacity:1}}
@keyframes arelToast{0%{opacity:0;transform:translateY(16px)}12%{opacity:1;transform:none}88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
@keyframes arelPop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes arelMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.arel-scroll::-webkit-scrollbar{height:0;width:0;}
.arel-scroll{scrollbar-width:none;}

/* hover / interaction helpers */
.btn-dark{transition:background .2s,transform .2s;}
.btn-dark:hover{background:var(--ink)!important;}
.btn-cream{transition:background .2s,transform .2s;}
.btn-cream:hover{background:#fff!important;transform:translateY(-1px);}
.btn-outline{transition:background .2s,color .2s;}
.btn-outline:hover{background:var(--brown)!important;color:var(--cream)!important;}
.foot-link{transition:color .15s;}
.foot-link:hover{color:var(--cream)!important;}
.nav-chip{transition:background .15s,color .15s;}
.nav-chip:hover{background:var(--cream2);}
.link-u{text-decoration:underline;text-underline-offset:4px;}

/* product card hover */
.arel-card .img1{opacity:1;transition:opacity .5s;}
.arel-card .img2{transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.arel-card .quickadd{opacity:0;transition:opacity .25s;}
.arel-card:hover .img1{opacity:0;}
.arel-card:hover .img2{transform:scale(1.05);}
.arel-card:hover .quickadd{opacity:1;}
.cat-card img{transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.cat-card:hover img{transform:scale(1.06);}
.social-tile img{transition:transform .5s;}
.social-tile:hover img{transform:scale(1.05);}

/* 'Populair nu' slider */
.featured-slide{width:230px;}
@media (max-width:640px){ .featured-slide{width:min(66vw,260px);} }
.slider-arrows{display:none;gap:8px;}
@media (min-width:768px){ .slider-arrows{display:flex;} }
.slider-arrow{width:38px;height:38px;border-radius:50%;border:1px solid #E2D4C0;background:#fff;color:#4A3D35;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,border-color .2s;}
.slider-arrow:hover{background:#4A3D35;color:#FAF7F1;border-color:#4A3D35;}

/* productgalerij: alleen sticky als de layout 2 kolommen is (desktop) — voorkomt
   dat de foto op mobiel over de tekst heen blijft hangen bij scrollen */
@media (min-width:680px){ .pdp-gallery{position:sticky;top:118px;} }

/* footer: gestapeld op mobiel, merk links naast de menu's op desktop */
.footer-grid{display:grid;gap:34px 24px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
@media (min-width:860px){ .footer-grid{grid-template-columns:1.8fr 1fr 1fr 1fr;} }

/* categorie-navigatie: links + horizontaal slidend op mobiel, gecentreerd op desktop */
.nav-chips{justify-content:flex-start;scroll-snap-type:x proximity;}
.nav-chips > *{scroll-snap-align:start;flex:0 0 auto;}
@media (min-width:768px){ .nav-chips{justify-content:center;} }

/* responsive visibility */
.only-mobile{display:none;}
@media (max-width:767px){
  .only-mobile{display:grid;}
  .only-mobile.flexm{display:flex;}
  .only-desktop{display:none;}
  body.has-bottomnav{padding-bottom:64px;}
}

/* search input placeholder */
input::placeholder,textarea::placeholder{color:#A89C8E;}
.field:focus{border-color:var(--brown);}

/* ============ Verfijning — frontend-design pass ============ */
html{scroll-behavior:smooth;}

/* Warme atmosfeer + filmische korrel (subtiel, op de gevoelige-huidjes-toon) */
body{background:
  radial-gradient(128% 66% at 50% -14%, rgba(216,170,160,.13), rgba(168,181,160,.05) 42%, transparent 66%),
  var(--cream);}
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* Scroll-onthulling — alleen actief als JS .js-reveal zet (veilige fallback: altijd zichtbaar) */
.js-reveal .reveal{opacity:0;transform:translateY(22px) scale(.995);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .85s cubic-bezier(.2,.7,.2,1) var(--d,0s);}
.js-reveal .reveal.in{opacity:1;transform:none;}

/* Hero-entree: gelaagde fade-up + trage settle-zoom op de foto */
@keyframes heroUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes heroZoom{from{transform:scale(1.09)}to{transform:scale(1)}}
.hero-in{animation:heroUp 1s cubic-bezier(.2,.7,.2,1) both;}
.hero-img{animation:heroZoom 7.5s cubic-bezier(.18,.6,.2,1) both;will-change:transform;}

/* Micro-interacties */
.arel-card{transition:transform .45s cubic-bezier(.2,.7,.2,1);}
.arel-card:hover{transform:translateY(-5px);}
.cat-card{transition:transform .42s cubic-bezier(.2,.7,.2,1);}
.cat-card:hover{transform:translateY(-3px);}
.btn-dark:active,.btn-cream:active,.btn-outline:active{transform:scale(.972);}

/* Verfijnde focus + groeiende link-onderlijn */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--brown);outline-offset:3px;border-radius:6px;}
.link-u{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .45s cubic-bezier(.2,.7,.2,1);padding-bottom:2px;}
.link-u:hover{background-size:100% 1.5px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .js-reveal .reveal{opacity:1!important;transform:none!important;transition:none;}
  .hero-in,.hero-img{animation:none;}
  .arel-card:hover,.cat-card:hover{transform:none;}
}