@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fredoka:wght@500;600;700&display=swap');
:root{--cream:#fff8e8;--paper:#fffdf8;--ink:#27372e;--green:#3f7655;--sage:#d8f0d5;--peach:#ffbd8d;--yellow:#ffe17d;--pink:#f6b5c6;--blue:#a9d9e8;--purple:#cdb8e8;--coral:#f58f79;--line:#e3ddcf;--red:#8c1d18;--shadow:0 18px 50px #24352b18}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.6 "DM Sans",sans-serif}button,input{font:inherit}button,a{transition:.2s}a{text-decoration:none;color:inherit}
.topbar{height:78px;position:sticky;top:0;z-index:20;display:flex;align-items:center;padding:0 max(24px,calc((100vw - 1160px)/2));gap:40px;background:#fff8e8ed;backdrop-filter:blur(12px);border-bottom:1px solid #0000000b}.logo{font:700 22px Fredoka;display:flex;align-items:center;gap:10px;margin-right:auto}.logo span{width:42px;height:42px;border-radius:48% 52% 45% 55%;display:grid;place-items:center;background:var(--green);color:white;font-size:12px}.topbar nav{display:flex;gap:28px;font-weight:600}.cart-btn{border:0;border-radius:999px;background:var(--ink);color:white;padding:11px 17px;cursor:pointer}.cart-btn b{background:white;color:var(--ink);border-radius:50%;padding:2px 7px;margin-left:6px}
.hero{min-height:610px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px;max-width:1160px;margin:auto;padding:70px 20px}.kicker{font-size:12px;font-weight:700;letter-spacing:.17em;color:#66806e}.hero h1,.heading h2,.about h2,.how h2{font:600 clamp(42px,5.2vw,72px)/.98 Fredoka;margin:12px 0 22px;letter-spacing:-.035em}.hero h1 i{color:#b75e3c;font-style:normal}.lead{font-size:19px;color:#5e6c64;max-width:570px;margin-bottom:30px}.btn{display:inline-block;border:0;border-radius:999px;padding:14px 21px;font-weight:700;cursor:pointer}.primary{background:var(--green);color:white}.primary:hover{background:#304c3b}.hero-stack{position:relative;height:470px}.hero-stack img{position:absolute;width:330px;border:9px solid white;border-radius:10px;box-shadow:var(--shadow)}.hero-stack img:first-child{right:40px;top:15px;transform:rotate(7deg)}.hero-stack img:last-child{left:10px;bottom:5px;width:270px;transform:rotate(-8deg)}
.benefits{background:linear-gradient(90deg,#3f7655,#4f8b68);color:white;display:grid;grid-template-columns:repeat(3,1fr);padding:24px max(20px,calc((100vw - 1100px)/2));gap:30px}.benefits div{display:grid;grid-template-columns:35px 1fr;align-items:center}.benefits small{grid-column:2;opacity:.75}.section{max-width:1160px;margin:auto;padding:105px 20px}
#material{position:relative}
#material:before{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:var(--yellow);opacity:.28;left:-90px;top:80px;z-index:-1}
#material:after{content:"";position:absolute;width:130px;height:130px;border-radius:42% 58% 55% 45%;background:var(--pink);opacity:.25;right:-65px;bottom:80px;z-index:-1}.heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:34px}.heading h2,.about h2,.how h2{font-size:48px}.heading>p{max-width:440px;color:#69756e}
.toolbar{display:flex;justify-content:space-between;gap:20px;margin-bottom:32px}.toolbar button{border:1px solid var(--line);background:transparent;padding:9px 16px;border-radius:999px;cursor:pointer;margin:3px}.toolbar button.active{background:var(--ink);color:white}.toolbar input{border:1px solid var(--line);background:white;border-radius:999px;padding:10px 18px;min-width:220px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.card{background:var(--paper);border-top:6px solid var(--peach);border:1px solid #e4e2d9;border-radius:22px;overflow:hidden;box-shadow:0 8px 30px #25362d0a;display:flex;flex-direction:column}.card-img{aspect-ratio:1/1;overflow:hidden;background:#f1dfc0}.card img{width:100%;height:100%;object-fit:cover;transition:.35s}.card:hover img{transform:scale(1.035)}.card-body{padding:18px;display:flex;flex-direction:column;flex:1}.tag{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#768278}.card h3{font:600 21px Fredoka;margin:6px 0}.card p{font-size:14px;color:#68736d;margin:0 0 16px}.card-bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between}.price{font:600 20px Fredoka}.add{border:0;background:var(--sage);color:var(--ink);border-radius:999px;padding:9px 13px;cursor:pointer;font-weight:700}.add:hover{background:#cadcc8}
.about{display:grid;grid-template-columns:.8fr 1fr;gap:90px;align-items:center}.about-art{min-height:430px;background:#dce7dc;border-radius:45% 55% 48% 52%;display:grid;place-items:center}.about-art div{font:700 62px/1 Fredoka;text-align:center;transform:rotate(-5deg)}.about-art span{color:#bb6c49}.about p{color:#637069}.about blockquote{font:600 24px Fredoka;border-left:3px solid #c47b57;margin:28px 0;padding-left:20px}
.how{text-align:center}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:45px}.steps article{background:white;border:1px solid var(--line);border-radius:24px;padding:30px}.steps article>b{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin:auto;background:var(--sage);font:600 20px Fredoka}.steps h3{font:600 22px Fredoka;margin-bottom:6px}.steps p{color:#6b766f}
footer{background:var(--ink);color:white;min-height:150px;padding:45px max(20px,calc((100vw - 1160px)/2));display:flex;gap:30px;align-items:center}footer b{font:700 24px Fredoka;margin-right:auto}footer span{opacity:.75}
.overlay{position:fixed;inset:0;background:#14201988;z-index:49;opacity:0;pointer-events:none;transition:.25s}.overlay.open{opacity:1;pointer-events:auto}.drawer{position:fixed;z-index:50;right:0;top:0;height:100dvh;width:min(460px,100%);background:var(--paper);transform:translateX(105%);transition:.3s;box-shadow:-20px 0 60px #0002;padding:25px;display:flex;flex-direction:column}.drawer.open{transform:none}.drawer-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.drawer-head h2{font:600 32px Fredoka;margin:0 0 18px}.drawer-head small{letter-spacing:.14em}.drawer-head button,.dialog-close{border:0;background:transparent;font-size:34px;cursor:pointer}.cart-line{display:grid;grid-template-columns:64px 1fr auto;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);align-items:center}.cart-line img{width:64px;height:64px;object-fit:cover;border-radius:12px}.cart-line h4{margin:0}.cart-line small{color:#778078}.remove{border:0;background:transparent;color:#9b4d42;cursor:pointer}.cart-footer{margin-top:auto;border-top:1px solid var(--line);padding-top:20px}.total{display:flex;justify-content:space-between;font-size:20px;margin-bottom:16px}.swish{width:100%;background:#542b83;color:white;font-size:17px}.cart-footer>small{display:block;text-align:center;color:#788079;margin-top:10px}
dialog{width:min(520px,calc(100% - 30px));border:0;border-radius:28px;padding:32px;box-shadow:0 30px 90px #0005;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#17231caa}.dialog-close{position:absolute;right:18px;top:12px}.paybox{background:#f0e9f6;border-radius:18px;padding:18px;margin:22px 0}.paybox small,.payrow small{display:block;letter-spacing:.12em;color:#746c79}.paybox strong{font:600 30px Fredoka;display:block}.paybox em{font-size:11px;color:#9c4c44}.payrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}.payrow div{border:1px solid var(--line);border-radius:16px;padding:14px}.payrow strong{font:600 22px Fredoka}.fine{font-size:12px;color:#788078}.check{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:var(--sage);font-size:32px;margin:auto}#thanks{text-align:center}#thanks h2{font:600 34px Fredoka}
@media(max-width:850px){.topbar nav{display:none}.hero{grid-template-columns:1fr;padding-top:45px}.hero-stack{height:390px}.benefits{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}.heading{display:block}.about{grid-template-columns:1fr;gap:45px}.steps{grid-template-columns:1fr}footer{flex-direction:column;align-items:flex-start}footer b{margin:0}.toolbar{flex-direction:column}.toolbar input{width:100%}}
@media(max-width:520px){.grid{grid-template-columns:1fr}.hero h1{font-size:48px}.hero-stack img{width:260px}.hero-stack img:last-child{width:210px}.section{padding:75px 18px}.heading h2,.about h2,.how h2{font-size:39px}.payrow{grid-template-columns:1fr}}

.card:nth-child(4n+1){border-top-color:var(--coral)}
.card:nth-child(4n+2){border-top-color:var(--yellow)}
.card:nth-child(4n+3){border-top-color:var(--blue)}
.card:nth-child(4n+4){border-top-color:var(--purple)}
.card:nth-child(4n+1) .add{background:#ffe0d7}.card:nth-child(4n+2) .add{background:#fff0b4}
.card:nth-child(4n+3) .add{background:#d9f0f6}.card:nth-child(4n+4) .add{background:#eadff5}
.about{position:relative;background:linear-gradient(135deg,#fff1c7 0%,#ffe6ea 48%,#e5f4ef 100%);max-width:none;padding-left:max(20px,calc((100vw - 1120px)/2));padding-right:max(20px,calc((100vw - 1120px)/2))}
.about-art{box-shadow:0 18px 45px #765e4b20;background:linear-gradient(145deg,var(--blue),var(--sage),var(--yellow))}
.about blockquote{background:#ffffff9c;padding:18px 20px;border-radius:0 18px 18px 0}
.how article:nth-child(1){background:#fff1bd}.how article:nth-child(2){background:#e6f3df}.how article:nth-child(3){background:#f7dfe8}
.hero{position:relative}
.hero:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:var(--yellow);opacity:.22;left:-120px;top:60px;z-index:-1}
.hero:after{content:"";position:absolute;width:250px;height:250px;border-radius:45% 55%;background:var(--pink);opacity:.22;right:-90px;bottom:20px;z-index:-1}

.about-copy{max-width:680px}
.about-copy p{margin:0 0 15px}
.about-copy h2{max-width:650px}
@media(max-width:850px){.about-copy{max-width:none}}

.intro-story{background:linear-gradient(135deg,#fff1c8 0%,#ffe8ec 48%,#e2f3ed 100%);padding:90px 20px;position:relative;overflow:hidden}
.intro-story:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:#a9d9e8;opacity:.22;left:-80px;bottom:-80px}
.intro-story:after{content:"";position:absolute;width:190px;height:190px;border-radius:45% 55%;background:#f6b5c6;opacity:.25;right:-65px;top:-55px}
.intro-story-inner{width:min(1080px,100%);margin:auto;display:grid;grid-template-columns:210px 1fr;gap:65px;position:relative;z-index:1}
.intro-label{padding-top:10px}.intro-flower{display:block;font-size:72px;color:#d76f54;margin-top:24px;transform:rotate(-10deg)}
.intro-text{max-width:790px}.intro-text h2{font:600 clamp(38px,5vw,58px)/1.03 Fredoka;margin:0 0 24px;letter-spacing:-.03em}
.intro-text p{color:#56675d;font-size:17px}.intro-text .intro-lead{font-size:20px;color:#3f5147}
.statement{font:600 30px Fredoka!important;color:#b75e3c!important;margin:28px 0!important}
.topic-row{display:flex;flex-wrap:wrap;gap:9px;margin:25px 0}.topic-row span{background:#fff9;border:1px solid #fff;border-radius:999px;padding:7px 13px;font-weight:700;font-size:13px}
.intro-highlight{background:#fffaf2;border-radius:24px;padding:27px 30px;margin:30px 0;border-left:7px solid #f1a36e;box-shadow:0 12px 35px #5b493713}
.intro-highlight small{font-weight:700;letter-spacing:.14em;color:#708074}.intro-highlight h3{font:600 30px/1.15 Fredoka;margin:8px 0 12px;color:#314b3b}.intro-highlight p{margin:0}
.intro-text>.btn{margin-top:18px}
@media(max-width:760px){.intro-story{padding:65px 18px}.intro-story-inner{grid-template-columns:1fr;gap:15px}.intro-flower{display:none}.intro-text h2{font-size:39px}.intro-text .intro-lead{font-size:18px}}

/* Klickbara produktbilder */
.card-img{position:relative;display:block;width:100%;padding:0;border:0;cursor:zoom-in;text-align:left}
.card-img:focus-visible{outline:4px solid #42634f;outline-offset:-4px}
.zoom-hint{position:absolute;right:10px;bottom:10px;background:#fffdf8e8;color:#27372e;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700;box-shadow:0 4px 14px #0002;opacity:0;transform:translateY(5px);transition:.2s}
.card-img:hover .zoom-hint,.card-img:focus-visible .zoom-hint{opacity:1;transform:none}

/* Fullskärmsvisare */
.no-scroll{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(20,28,23,.94);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,55px);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox-figure{margin:0;max-width:min(1100px,88vw);max-height:92vh;display:flex;flex-direction:column;align-items:center;gap:14px}
.lightbox-figure img{display:block;max-width:100%;max-height:calc(92vh - 90px);width:auto;height:auto;object-fit:contain;border-radius:14px;background:white;box-shadow:0 25px 80px #0007}
.lightbox-figure figcaption{color:white;text-align:center;max-width:760px;display:grid;gap:3px}
.lightbox-figure figcaption strong{font:600 clamp(20px,2vw,28px) Fredoka}
.lightbox-figure figcaption span{font-size:14px;color:#dce4df}
.lightbox-close,.lightbox-nav{position:absolute;border:0;background:#fffdf8e8;color:#27372e;cursor:pointer;display:grid;place-items:center;box-shadow:0 5px 20px #0003}
.lightbox-close{right:clamp(14px,3vw,38px);top:clamp(14px,3vw,30px);width:48px;height:48px;border-radius:50%;font-size:32px;z-index:2}
.lightbox-nav{top:50%;transform:translateY(-50%);width:52px;height:70px;border-radius:18px;font-size:42px}
.lightbox-prev{left:clamp(10px,2.5vw,35px)}.lightbox-next{right:clamp(10px,2.5vw,35px)}
.lightbox button:hover{background:white}.lightbox button:focus-visible{outline:4px solid #ffe17d;outline-offset:3px}

/* Större skärmar */
@media(min-width:1400px){
 .topbar{padding-left:max(36px,calc((100vw - 1360px)/2));padding-right:max(36px,calc((100vw - 1360px)/2))}
 .hero,.section{max-width:1360px}.hero{grid-template-columns:1.05fr .95fr;min-height:690px}
 .hero h1{font-size:78px}.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
 .intro-story-inner{width:min(1240px,100%)}.intro-text{max-width:900px}
}
@media(min-width:1800px){
 .hero,.section{max-width:1500px}.grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .card h3{font-size:23px}.card p{font-size:15px}
}

/* Mobil */
@media(max-width:650px){
 .topbar{height:66px;padding:0 14px}.logo{font-size:19px}.logo span{width:36px;height:36px}.cart-btn{padding:9px 12px;font-size:14px}
 .hero{min-height:auto;padding:42px 18px 55px;gap:25px}.hero h1{font-size:44px}.lead{font-size:17px}
 .hero-stack{height:330px}.hero-stack img:first-child{right:5px;width:235px}.hero-stack img:last-child{left:0;width:190px}
 .benefits{padding:20px 18px;gap:18px}
 .grid{gap:18px}.card{border-radius:18px}.card-body{padding:16px}
 .zoom-hint{opacity:1;transform:none;font-size:11px;padding:5px 8px}
 .drawer{padding:18px}
 .lightbox{padding:60px 10px 20px}
 .lightbox-figure{max-width:96vw;max-height:88vh}.lightbox-figure img{max-height:calc(88vh - 100px);border-radius:9px}
 .lightbox-nav{top:auto;bottom:18px;width:48px;height:48px;border-radius:50%;font-size:34px}
 .lightbox-prev{left:18px}.lightbox-next{right:18px}
 .lightbox-close{width:44px;height:44px;right:12px;top:10px}
 .lightbox-figure figcaption{padding:0 52px 42px}.lightbox-figure figcaption span{display:none}
}