/* Sänkykauppa.com preview — Jonku Digital Oy */
:root{
  --bg:#faf8f5;
  --panel:#f3eee6;
  --sand:#e9e1d3;
  --sand-dark:#ded3c0;
  --line:#e5decf;
  --ink:#211d18;
  --muted:#7a7166;
  --accent:#a98a68;
  --accent-dark:#8f7354;
  --green:#33523f;
  --dark:#161513;
  --star:#b58b4c;
  --ok:#4f7d5c;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,sans-serif;font-size:15px;line-height:1.6;color:var(--ink);background:var(--bg)}
h1,h2,h3,.serif{font-family:'Playfair Display',Georgia,serif;font-weight:600;line-height:1.2}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
body{overflow-x:hidden}
.cat-card,.prod-card,.m-card,.usp-item,.why-item{min-width:0}
.prod-body h3,.cat-body h3{overflow-wrap:break-word}
.btn{display:inline-block;border:0;cursor:pointer;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:14px 26px;border-radius:4px;transition:opacity .15s}
.btn:hover{opacity:.85}
.btn-accent{background:var(--accent);color:#fff}
.btn-dark{background:var(--dark);color:#fff}
.btn-outline{background:transparent;border:1px solid var(--ink);color:var(--ink)}
.arrow::after{content:"  →";letter-spacing:0}

/* top utility bar */
.topbar{background:var(--sand);font-size:12px;color:#544c42}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:9px;padding-bottom:9px}
.topbar span{display:flex;align-items:center;gap:8px;white-space:nowrap}
.topbar svg{width:16px;height:16px;stroke:#6d6355}

/* header */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;gap:28px;height:72px}
.logo{font-family:'Playfair Display',Georgia,serif;font-size:21px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.nav{display:flex;gap:22px;font-size:13.5px;margin:0 auto}
.nav a{padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover,.nav a.active{border-color:var(--ink);font-weight:600}
.hicons{display:flex;gap:18px;align-items:center}
.hicons a{position:relative;display:flex}
.hicons svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.7}
.cart-badge{position:absolute;top:-7px;right:-9px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center}

/* placeholder "photos" */
.ph{background:linear-gradient(145deg,#efe7da 0%,#f8f4ec 55%,#eae1d2 100%);border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.ph svg{width:58%;max-width:260px;opacity:.85}
.ph .st{stroke:#b3a288;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ph .fl{fill:#d9cbb4;opacity:.5}
.ph-note{position:absolute;bottom:10px;right:12px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#a4947c}

/* hero */
.hero{background:var(--panel)}
.hero .wrap{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:center;padding-top:0;padding-bottom:0;min-height:430px}
.hero-txt{padding:48px 0}
.hero-txt h1{font-size:46px;margin-bottom:18px}
.hero-txt p{color:var(--muted);max-width:340px;margin-bottom:26px}
.hero-ph{height:430px;border-radius:0}
.hero-dots{display:flex;gap:8px;justify-content:center;padding:0 0 18px}
.hero-dots i{width:7px;height:7px;border-radius:50%;background:var(--sand-dark)}
.hero-dots i.on{background:var(--accent-dark)}

/* sections */
.section{padding:64px 0}
.section-title{text-align:center;font-size:30px;margin-bottom:38px}
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:28px}
.section-head h2{font-size:26px}
.link-arrow{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}

/* category grid */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cat-card{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.cat-card .ph{height:150px;border-radius:0}
.cat-icon{position:absolute;top:10px;left:10px;width:34px;height:34px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.cat-icon svg{width:18px;height:18px;stroke:var(--accent-dark);fill:none;stroke-width:1.8;opacity:1}
.cat-body{padding:16px 18px 18px}
.cat-body h3{font-size:18px;margin-bottom:4px}
.cat-body p{font-size:13px;color:var(--muted);margin-bottom:10px;min-height:40px}
.cat-body a{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* USP band */
.usp{background:var(--panel);padding:30px 0}
.usp .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.usp-item{display:flex;align-items:center;gap:14px;justify-content:center}
.usp-item svg{width:30px;height:30px;stroke:var(--accent-dark);fill:none;stroke-width:1.6;flex:none}
.usp-item b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.usp-item small{font-size:12px;color:var(--muted)}

/* product cards */
.prod-row{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.prod-card{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;position:relative;display:flex;flex-direction:column}
.prod-card .ph{height:150px;border-radius:0}
.prod-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod-body h3{font-family:'Inter',sans-serif;font-size:14px;font-weight:600;line-height:1.35}
.prod-sub{font-size:12.5px;color:var(--muted)}
.price{font-size:16px;font-weight:700}
.stars{color:var(--star);font-size:12px;letter-spacing:2px}
.stars small{color:var(--muted);letter-spacing:0;margin-left:4px}
.badge{position:absolute;top:12px;left:12px;background:var(--green);color:#fff;font-size:10px;font-weight:700;letter-spacing:.1em;padding:5px 10px;border-radius:3px;z-index:2}
.badge-dark{background:#2b2b2b}
.heart{position:absolute;top:10px;right:10px;width:32px;height:32px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.1);z-index:2}
.heart svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.7}
.checks{list-style:none;font-size:12.5px;color:#4c463e;display:flex;flex-direction:column;gap:3px}
.checks li::before{content:"✓";color:var(--ok);font-weight:700;margin-right:7px}
.delivery{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.delivery::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.swatches{display:flex;gap:6px}
.sw{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}
.sw.on{outline:2px solid var(--ink);outline-offset:2px}
.sw-beige{background:#e2d5c0}.sw-greige{background:#cfc8bd}.sw-grey{background:#9d9d9d}.sw-dgrey{background:#5b5b5b}.sw-white{background:#f6f4f0}.sw-black{background:#232323}.sw-taupe{background:#b8a58c}

/* split banner */
.split{background:var(--panel)}
.split .wrap{display:grid;grid-template-columns:1fr 2fr;gap:40px;align-items:stretch;padding-top:0;padding-bottom:0}
.split .ph{border-radius:0;min-height:280px}
.split-body{padding:44px 0;display:grid;grid-template-columns:1fr 1.6fr;gap:36px}
.split-body h2{font-size:24px;margin-bottom:12px}
.split-body p{font-size:13.5px;color:var(--muted);margin-bottom:18px}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.why h3{font-size:20px;grid-column:1/-1;margin-bottom:2px}
.why-item{text-align:center;font-size:12.5px;color:var(--muted)}
.why-item svg{width:30px;height:30px;stroke:var(--accent-dark);fill:none;stroke-width:1.5;margin-bottom:8px}
.why-item b{display:block;color:var(--ink);font-size:13px;margin-bottom:3px}

/* newsletter */
.newsletter{background:var(--sand);padding:22px 0}
.newsletter .wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.newsletter b{font-size:14px}
.newsletter small{display:block;color:#6d6355;font-size:12px}
.nl-form{display:flex;margin-left:auto;gap:0}
.nl-form input{border:1px solid #cfc4b1;background:#fff;padding:11px 16px;font-size:13px;width:260px;border-radius:4px 0 0 4px;font-family:inherit}
.nl-form button{border-radius:0 4px 4px 0;padding:11px 22px}
.socials{display:flex;gap:14px}
.socials svg{width:18px;height:18px;stroke:#544c42;fill:none;stroke-width:1.6}

/* breadcrumb */
.crumbs{font-size:12.5px;color:var(--muted);padding:18px 0}
.crumbs a:hover{text-decoration:underline}
.crumbs b{color:var(--ink);font-weight:500}

/* collection hero */
.coll-hero{position:relative}
.coll-hero .ph{border-radius:0;height:380px}
.coll-hero-inner{position:absolute;inset:0}
.coll-hero-inner .wrap{padding-top:56px;max-width:1240px}
.coll-hero h1{font-size:44px;margin-bottom:14px}
.coll-hero p{max-width:360px;color:#5d564c;font-size:14px}

/* mallisto cards */
.mallisto{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:-90px;position:relative;z-index:5}
.m-card{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 6px 24px rgba(40,32,20,.07)}
.m-card .ph{height:210px;border-radius:0}
.m-tag{position:absolute;top:12px;left:12px;background:#fff;font-size:10px;font-weight:700;letter-spacing:.12em;padding:5px 12px;border-radius:3px}
.m-body{padding:22px 24px 26px}
.m-body h3{font-size:22px;margin-bottom:4px}
.m-lead{font-size:13.5px;font-weight:600;margin-bottom:8px}
.m-body p{font-size:13px;color:var(--muted);margin-bottom:14px;min-height:60px}
.m-price{font-size:14px;font-weight:700;margin-bottom:14px}

/* compare banner */
.compare{background:var(--panel);border-radius:8px;display:flex;align-items:center;gap:22px;padding:26px 30px;margin:44px 0}
.compare-icon{width:56px;height:56px;border:1px solid var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.compare-icon svg{width:26px;height:26px;stroke:var(--accent-dark);fill:none;stroke-width:1.6}
.compare h3{font-size:19px;margin-bottom:3px}
.compare p{font-size:13px;color:var(--muted)}
.compare .btn{margin-left:auto;white-space:nowrap}

/* compare table */
.table-wrap{overflow-x:auto;margin-top:18px}
table.cmp{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);font-size:13.5px}
table.cmp th,table.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.cmp th{background:var(--panel);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.pill{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;padding:5px 12px;border-radius:3px;color:#fff}
.pill-classic{background:#b3a284}.pill-premium{background:#3d3a35}.pill-natural{background:#8b9178}

/* listing page */
.list-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.list-top h1{font-size:36px;margin-right:6px}
.count{font-size:13px;color:var(--muted);width:100%;margin-top:-8px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;font-size:13px;padding:8px 14px;border-radius:20px}
.chip .x{font-weight:700;cursor:pointer;opacity:.6}
.clear-all{font-size:13px;text-decoration:underline;margin-left:4px}
.sort{margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:4px;padding:9px 14px;font-size:13px;color:var(--ink)}
.quick-filters{display:flex;gap:34px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px 22px;margin-bottom:22px;align-items:flex-end;flex-wrap:wrap}
.qf-label{font-size:11px;font-weight:700;letter-spacing:.1em;margin-bottom:8px;display:block}
.size-chips,.mall-chips{display:flex;gap:8px;flex-wrap:wrap}
.szc{border:1px solid var(--line);background:#fff;font-size:13px;padding:8px 14px;border-radius:4px;cursor:pointer}
.szc.on{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
.more-filters{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:4px;padding:9px 16px;font-size:13px;background:#fff}
.listing{display:grid;grid-template-columns:250px 1fr;gap:24px;align-items:start}
.filters{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px}
.filters h2{font-family:'Inter',sans-serif;font-size:15px;font-weight:700;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.filters h2 a{font-size:12px;font-weight:500;text-decoration:underline;color:var(--muted)}
.fgroup{border-top:1px solid var(--line);padding:16px 0}
.fgroup:last-child{padding-bottom:4px}
.fgroup>b{font-size:11px;font-weight:700;letter-spacing:.1em;display:flex;justify-content:space-between;margin-bottom:12px}
.fgroup label{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:4px 0;color:#4c463e}
.fgroup input[type=checkbox]{width:16px;height:16px;accent-color:var(--green)}
.range{position:relative;height:4px;background:var(--sand-dark);border-radius:2px;margin:18px 6px 6px}
.range i{position:absolute;left:0;width:45%;height:100%;background:var(--green);border-radius:2px}
.range b{position:absolute;top:50%;width:14px;height:14px;background:var(--green);border-radius:50%;transform:translate(-50%,-50%)}
.range b:first-of-type{left:0}.range b:last-of-type{left:45%}
.range-vals{font-size:12.5px;color:var(--muted);margin:0 0 4px}
.fcolor label span.sw{margin-right:2px}
.fcount{color:#a49a8c}
.chev::after{content:"⌄";font-size:14px;color:var(--muted)}

/* product page */
.pdp{display:grid;grid-template-columns:7fr 5fr;gap:48px;padding:10px 0 40px}
.gallery .ph{height:460px}
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.thumbs .ph{height:74px;cursor:pointer}
.thumbs .ph.on{outline:2px solid var(--ink)}
.pdp h1{font-size:32px;margin-bottom:8px}
.pdp .stars{font-size:13px}
.pdp-price{font-size:26px;font-weight:700;margin:14px 0 2px}
.vat{font-size:12px;color:var(--muted);margin-bottom:16px}
.pdp-desc{font-size:14px;color:#4c463e;margin-bottom:22px}
.opt-label{font-size:11px;font-weight:700;letter-spacing:.1em;margin-bottom:8px;display:block}
.opt-label small{font-weight:500;color:var(--muted);letter-spacing:0}
.opt-row{margin-bottom:18px}
.buy-row{display:flex;gap:12px;margin:24px 0 14px}
.qty{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.qty button{width:42px;border:0;background:#fff;font-size:16px;cursor:pointer}
.qty span{width:44px;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--line);border-right:1px solid var(--line);font-weight:600}
.buy-row .btn{flex:1;text-align:center;font-size:13px}
.wishlist{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.wishlist svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.7}
.pdp-usp{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:8px;margin:14px 0 34px}
.pdp-usp div{padding:18px 12px;text-align:center;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#4c463e;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:8px}
.pdp-usp div:last-child{border-right:0}
.pdp-usp svg{width:24px;height:24px;stroke:var(--accent-dark);fill:none;stroke-width:1.6}
.tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:24px;flex-wrap:wrap}
.tabs a{font-size:13.5px;padding:12px 2px;border-bottom:2px solid transparent;color:var(--muted)}
.tabs a.on{border-color:var(--ink);color:var(--ink);font-weight:600}
.tabpane{display:grid;grid-template-columns:3fr 2fr;gap:36px;align-items:start;margin-bottom:30px}
.tabpane .ph{height:230px}
.tabpane p{font-size:14px;color:#4c463e;margin-bottom:16px}

/* help cta (category page bottom) */
.help{background:var(--panel)}
.help .wrap{display:grid;grid-template-columns:1fr 1.2fr 1.2fr 1fr;gap:36px;align-items:center;padding-top:0;padding-bottom:0}
.help .ph{border-radius:0;min-height:240px}
.help h2{font-size:22px;margin-bottom:8px}
.help p{font-size:13px;color:var(--muted);margin-bottom:14px}
.help h4{font-size:14px;margin-bottom:10px}
.help .checks li{padding:2px 0}
.paylogos{display:flex;gap:10px;flex-wrap:wrap}
.paylogo{background:#fff;border:1px solid var(--line);border-radius:4px;padding:6px 12px;font-size:12px;font-weight:700;color:#3a3a3a}

/* preview ribbon */
.ribbon{background:var(--dark);color:#cfc8bd;text-align:center;font-size:11.5px;letter-spacing:.06em;padding:7px 14px}
.ribbon b{color:#fff}

/* responsive */
@media (max-width:1000px){
  .cat-grid,.prod-grid{grid-template-columns:repeat(2,1fr)}
  .prod-row{grid-template-columns:repeat(2,1fr)}
  .usp .wrap,.pdp-usp{grid-template-columns:repeat(2,1fr)}
  .pdp-usp div:nth-child(2){border-right:0}
  .hero .wrap,.pdp,.split .wrap,.listing{grid-template-columns:1fr}
  .hero-ph{height:280px}
  .split-body,.help .wrap{grid-template-columns:1fr;padding:36px 28px}
  .help .ph{display:none}
  .mallisto{grid-template-columns:1fr;margin-top:24px}
  .nav{display:none}
  .topbar span:nth-child(2),.topbar span:nth-child(3){display:none}
  .hero-txt h1{font-size:34px}
  .filters{order:2}
  .why{grid-template-columns:1fr}
  .nl-form{margin-left:0;width:100%}
  .nl-form input{flex:1;width:auto}
  .logo{font-size:17px}
  .site-header .wrap{gap:14px}
  .hicons{gap:14px}
}