:root{--pink:#e6007e;--pink2:#ed2690;--black:#0f0c0d;--dark:#1c1719;--teal:#19c1b4;
--paper:#f3efe7;--wood:#efe9df;--ink:#3a3434;--muted:#857c7c;--green:#2e7d32}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Lato','Segoe UI',sans-serif;color:var(--ink);background:var(--wood);line-height:1.6}
a{text-decoration:none;color:var(--pink)}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
/* ---- top black bar ---- */
.topbar{background:#000;color:#fff;font-size:.82rem}
.topbar .container{display:flex;align-items:center;justify-content:space-between;height:36px}
.socials{display:flex;gap:2px}
.socials a{color:#fff;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:.85rem;border-right:1px solid #222}
.socials a:hover{color:var(--pink2)}
.topbar .right a{color:#fff}
.topbar .right a:hover{color:var(--pink2)}
/* ---- header ---- */
header{background:var(--black);position:relative;z-index:40}
.hwrap{display:flex;align-items:center;justify-content:space-between;padding:10px 0;flex-wrap:wrap;gap:12px}
.logo{display:flex;align-items:center;gap:14px}
.diamond{width:84px;height:84px;background:var(--black);border:5px solid var(--pink);transform:rotate(45deg);display:flex;align-items:center;justify-content:center;box-shadow:0 0 14px rgba(230,0,126,.55);margin:6px}
.diamond span{transform:rotate(-45deg);font-family:'Dancing Script',cursive;color:#fff;font-size:1.25rem;line-height:1;text-align:center}
.diamond b{display:block;color:var(--pink2);font-family:'Lato',sans-serif;font-weight:700;font-size:.7rem;letter-spacing:2px}
.mainmenu{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.mainmenu>a{color:#fff;font-weight:600;font-size:.95rem}
.mainmenu>a.hot{color:var(--pink2);font-weight:800;letter-spacing:.5px}
.mainmenu>a:hover{color:var(--pink2)}
.headphone{text-align:right}
.headphone .tel{color:#fff;font-size:1.35rem;font-weight:800}
.headphone .tel:hover{color:var(--pink2)}
.headphone .deliveroo{display:block;color:var(--teal);font-weight:700;font-size:.9rem}
/* ---- mode tabs ---- */
.modes{background:transparent;position:absolute;left:50%;transform:translateX(-50%);top:130px;z-index:30;display:flex;gap:40px}
.modes a{color:#fff;font-weight:700;font-size:.95rem;padding-bottom:6px;border-bottom:3px solid var(--pink);text-shadow:0 1px 4px #000}
.modes a.alt{border-bottom-color:#fff}
/* ---- hero carousel ---- */
.hero{position:relative;height:560px;overflow:hidden;background:#241a14}
.slide{position:absolute;inset:0;opacity:0;animation:fade 16s infinite;display:flex;align-items:center}
.s1{animation-delay:0s}
.s2{animation-delay:4s}
.s3{animation-delay:8s}
.s4{animation-delay:12s}
@keyframes fade{0%{opacity:0;visibility:visible}3%{opacity:1}22%{opacity:1}25%{opacity:0;visibility:hidden}100%{opacity:0;visibility:hidden}}
.slide{visibility:hidden}
.slide{background-size:cover;background-position:center}
.s1{background-image:linear-gradient(rgba(20,10,8,.45),rgba(20,10,8,.45)),url('https://images.unsplash.com/photo-1574071318508-1cdbab80d002?auto=format&fit=crop&w=2000&q=80')}
.s2{background-image:linear-gradient(rgba(20,10,8,.45),rgba(20,10,8,.45)),url('https://images.unsplash.com/photo-1513104890138-7c749659a591?auto=format&fit=crop&w=2000&q=80')}
.s3{background-image:linear-gradient(rgba(20,10,8,.45),rgba(20,10,8,.45)),url('https://images.unsplash.com/photo-1562967914-608f82629710?auto=format&fit=crop&w=2000&q=80')}
.s4{background-image:linear-gradient(rgba(20,10,8,.5),rgba(20,10,8,.5)),url('https://images.unsplash.com/photo-1551024506-0bccd828d307?auto=format&fit=crop&w=2000&q=80')}
.slide .bigicon{position:absolute;right:8%;top:50%;transform:translateY(-50%);font-size:13rem;opacity:.9;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.paper{margin-left:8%;background:var(--paper);border-left:6px solid var(--pink2);border-right:6px solid var(--pink2);padding:30px 44px;max-width:430px;text-align:center;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.paper h2{color:var(--pink);font-size:1.9rem;letter-spacing:1px;font-weight:800}
.paper .script{font-family:'Dancing Script',cursive;color:var(--pink2);font-size:1.7rem;display:block;margin:2px 0 6px}
.paper p{color:#3a3434;font-size:1.12rem;font-weight:600}
.heronote{position:absolute;right:0;bottom:18px;background:var(--pink);color:#fff;font-size:.85rem;font-weight:700;padding:8px 22px}
.dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45)}
.dots i:first-child{background:#fff}
/* ---- page hero (inner pages) ---- */
.pagehero{background:linear-gradient(120deg,var(--black),#33141f 60%,var(--black));color:#fff;text-align:center;padding:46px 20px}
.pagehero h1{font-size:2rem;letter-spacing:1.5px;color:#fff}
.pagehero h1 em{color:var(--pink2);font-style:normal}
/* ---- wood section ---- */
.woodsec{background:var(--wood) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" opacity="0.05"><circle cx="20" cy="20" r="8" fill="%23c0392b"/><circle cx="120" cy="90" r="10" fill="%232e7d32"/><circle cx="70" cy="140" r="6" fill="%23c0392b"/></svg>');padding:48px 0}
h2.sec{font-family:'Dancing Script',cursive;color:var(--pink);text-align:center;font-size:2.3rem;margin-bottom:30px;font-weight:700}
/* ---- product cards ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:20px}
.card{background:var(--paper);border-top:4px solid var(--pink2);padding:22px;text-align:center;box-shadow:0 3px 12px rgba(0,0,0,.1)}
.card h3{color:var(--pink);font-size:1.05rem;letter-spacing:1px;font-weight:800}
.card .desc{color:var(--muted);font-size:.88rem;min-height:2.7em;margin:6px 0 4px}
.sizes{border-top:1px dashed #cfc7ba;padding-top:10px;font-size:.93rem}
.sizes div{display:flex;justify-content:space-between;padding:2.5px 0}
.sizes .price{font-weight:800;color:var(--ink)}
.single{font-size:1.35rem;font-weight:800;color:var(--pink);margin-top:8px}
.card a.more{display:inline-block;margin-top:10px;background:var(--pink);color:#fff;padding:8px 22px;font-weight:700;font-size:.85rem;letter-spacing:.5px}
.card a.more:hover{background:#c4006c}
/* category tiles on home */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
.tile{background:var(--paper);text-align:center;padding:28px 18px;border:1px solid #e2dccf;box-shadow:0 3px 12px rgba(0,0,0,.08)}
.tile .em{font-size:3.2rem;display:block;margin-bottom:8px}
.tile h3{color:var(--ink);letter-spacing:1px;font-size:1rem;font-weight:800}
.tile h3:hover{color:var(--pink)}
/* smartphone band */
.band{background:var(--pink);color:#fff;text-align:center;padding:30px 20px}
.band h3{font-size:1.4rem;letter-spacing:1px}
.band a{color:#fff;text-decoration:underline}
/* info strip */
.strip{background:var(--black);color:#cbc3c3;padding:26px 0}
.strip .container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.strip h4{color:var(--pink2);margin-bottom:4px;letter-spacing:.5px}
.strip a{color:var(--teal)}
/* zones + prose */
.zones{max-width:760px;margin:0 auto}
.zones .card{text-align:left;margin-bottom:16px}
ul.checks{list-style:none}
ul.checks li{padding:5px 0 5px 26px;position:relative}
ul.checks li:before{content:"✓";position:absolute;left:0;color:var(--pink);font-weight:800}
.prose{max-width:800px;margin:0 auto;background:var(--paper);padding:34px;box-shadow:0 3px 12px rgba(0,0,0,.08)}
.prose h3{color:var(--pink);margin:22px 0 6px;letter-spacing:.5px}
.prose p{margin-bottom:8px;font-size:.94rem}
/* footer */
footer{background:#000;color:#9b9292;padding:34px 0 20px}
footer .fwrap{display:flex;flex-direction:column;align-items:center;gap:14px}
footer .fsocial{display:flex;gap:14px}
footer .fsocial a{color:#fff;font-size:1rem;width:36px;height:36px;border:1px solid #2c2c2c;display:flex;align-items:center;justify-content:center;border-radius:50%}
footer .fsocial a:hover{color:var(--pink2);border-color:var(--pink2)}
footer .flinks{text-align:center;font-size:.85rem;line-height:2}
footer .flinks a{color:#cbc3c3;padding:0 7px;border-right:1px solid #333}
footer .flinks a:last-child{border-right:none}
footer .flinks a:hover{color:var(--pink2)}
.copy{text-align:center;font-size:.8rem;border-top:1px solid #1c1c1c;padding-top:14px;margin-top:8px;width:100%}
.copy b{color:var(--pink2)}
a[href*='deliveroo']:not(.btn){color:var(--teal);font-weight:700}
@media(max-width:760px){
.hero{height:480px}.paper{margin:0 auto;max-width:88%}.slide .bigicon{display:none}
.hwrap{justify-content:center;text-align:center}.headphone{text-align:center}
.modes{display:none}}