:root { --navy:#071725; --cyan:#31d7c8; --cyan-bright:#62eee0; --white:#fff; --line:rgba(255,255,255,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--navy); color:var(--white); font:16px/1.55 "DM Sans",sans-serif; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
.site-header { position:fixed; inset:0 0 auto; z-index:20; height:82px; padding:0 clamp(22px,5vw,74px); display:flex; align-items:center; justify-content:space-between; background:rgba(7,23,37,.76); border-bottom:1px solid rgba(255,255,255,.09); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
.scroll-fade { position:fixed; z-index:19; top:82px; left:0; right:0; height:140px; opacity:0; pointer-events:none; background:linear-gradient(to bottom,rgba(7,23,37,.38),transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); mask-image:linear-gradient(#000,transparent); -webkit-mask-image:linear-gradient(#000,transparent); transition:opacity .3s ease; }
body.scrolled .scroll-fade { opacity:1; }
.brand { display:inline-flex; align-items:center; gap:12px; line-height:1; }
.brand>span:last-child { display:grid; gap:5px; }
.brand strong { font:800 18px/1 "Manrope",sans-serif; letter-spacing:.12em; }
.brand small { color:#8da5b2; font-size:9px; letter-spacing:.2em; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(49,215,200,.55); border-radius:10px; transform:rotate(45deg); }
.brand-mark i { width:15px; height:3px; background:var(--cyan); box-shadow:0 0 16px var(--cyan); transform:rotate(-45deg); }
.header-buy { display:flex; align-items:center; gap:9px; color:var(--cyan); font-weight:700; }
.header-buy span { font-size:19px; }
.product-page { min-height:calc(100vh - 96px); padding-top:82px; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr); background:radial-gradient(circle at 22% 40%,rgba(35,116,255,.16),transparent 30%),linear-gradient(135deg,#071725,#0a1d2c 68%,#06131f); }
.product-gallery { position:sticky; top:82px; height:calc(100vh - 82px); min-height:690px; overflow:hidden; padding:clamp(38px,5vw,72px); display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--line); }
.product-gallery:before { content:"MD—358"; position:absolute; left:3%; bottom:-4%; color:rgba(255,255,255,.025); font:800 clamp(120px,18vw,290px)/.8 "Manrope"; letter-spacing:-.08em; white-space:nowrap; }
.gallery-glow { position:absolute; left:10%; top:10%; width:75%; height:75%; border-radius:50%; background:radial-gradient(circle,rgba(49,215,200,.16),rgba(32,119,255,.06) 45%,transparent 72%); filter:blur(15px); }
.product-badge { position:absolute; top:clamp(30px,4vw,58px); left:clamp(30px,5vw,72px); display:flex; align-items:center; gap:10px; color:var(--cyan); font:700 11px "Manrope"; letter-spacing:.18em; }
.product-badge span { width:25px; height:1px; background:currentColor; }
.main-image-wrap { position:relative; z-index:2; width:min(73vh,680px); max-width:92%; aspect-ratio:1; margin:0 auto 16px; overflow:hidden; border-radius:34px; background:#fff; box-shadow:0 40px 90px rgba(0,0,0,.36); }
.main-image-wrap img { width:100%; height:100%; object-fit:cover; transition:opacity .18s ease; }
.main-image-wrap[data-view="device"] img { transform:scale(1.3); }
.main-image-wrap[data-view="accessories"]>img { display:none; }
.accessory-grid { position:absolute; inset:13px; display:none; grid-template-columns:repeat(6,1fr); grid-template-rows:.9fr 1.1fr; gap:10px; }
.main-image-wrap[data-view="accessories"] .accessory-grid { display:grid; }
.accessory-card { position:relative; overflow:hidden; grid-column:span 2; display:grid; grid-template-rows:minmax(0,1fr) auto; border:1px solid #dfe7ea; border-radius:16px; background:linear-gradient(145deg,#fff,#f2f6f7); box-shadow:0 8px 20px rgba(7,23,37,.08); }
.accessory-card:nth-child(n+4) { grid-column:span 3; }
.accessory-card img { width:100%; height:100%; min-height:0; padding:10px 12px 5px; object-fit:contain; filter:drop-shadow(0 8px 8px rgba(7,23,37,.15)); }
.accessory-card span { padding:8px 11px 9px; color:#102a38; background:rgba(255,255,255,.86); border-top:1px solid rgba(7,23,37,.08); font:700 10px/1.2 "Manrope"; }
.accessory-slippers img { padding:6px 9px 2px; }
.accessory-adapter img { padding:10px 18px 4px; }
.accessory-cables img { padding:8px 18px 3px; }
.accessory-pads img { padding:8px 22px 3px; }
.accessory-case img { padding:7px 15px 2px; }
.image-tabs { position:relative; z-index:3; display:flex; justify-content:center; gap:10px; }
.image-tab { min-width:116px; padding:7px 12px 7px 7px; display:flex; align-items:center; gap:9px; border:1px solid rgba(255,255,255,.13); border-radius:12px; background:rgba(7,23,37,.62); cursor:pointer; transition:.2s ease; }
.image-tab:hover,.image-tab.active { border-color:var(--cyan); background:rgba(49,215,200,.09); }
.image-tab:focus-visible { outline:3px solid rgba(49,215,200,.45); outline-offset:3px; }
.thumb { position:relative; overflow:hidden; width:42px; height:42px; flex:0 0 42px; display:block; border-radius:8px; background-color:#fff; background-position:center; background-size:cover; background-repeat:no-repeat; }
.thumb-device { background-image:url("../assets/medilix-md358-cihaz.jpg"); }
.thumb-accessories { background-image:url("../assets/accessory-electrode-pads-black.png"); background-size:92%; }
.image-tab>span:last-child { font-size:12px; font-weight:700; }
.product-info { align-self:center; max-width:720px; padding:clamp(48px,5vw,82px) clamp(26px,4vw,72px); }
.availability { width:fit-content; margin-bottom:30px; padding:8px 13px; color:#b8fff6; background:rgba(49,215,200,.08); border:1px solid rgba(49,215,200,.25); border-radius:100px; font-size:12px; font-weight:700; letter-spacing:.03em; }
.availability i { width:7px; height:7px; margin-right:8px; display:inline-block; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.model { margin:0 0 12px; color:var(--cyan); font:700 12px "Manrope"; letter-spacing:.18em; }
h1 { max-width:660px; margin:0; font:700 clamp(42px,4.8vw,72px)/1.03 "Manrope",sans-serif; letter-spacing:-.055em; }
.intro { max-width:650px; margin:22px 0 26px; color:#a7bac4; font-size:17px; }
.price-block { padding:22px 0; display:flex; align-items:center; justify-content:space-between; gap:25px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.price-block>div:first-child { display:flex; align-items:baseline; gap:13px; }
.price-block strong { color:var(--cyan-bright); font:800 clamp(46px,5vw,68px)/1 "Manrope"; letter-spacing:-.055em; }
.price-block sup { font-size:.37em; letter-spacing:0; vertical-align:top; }
.price-block>div:first-child span { color:#8da3af; font-size:12px; }
.guarantee { display:flex; align-items:center; gap:9px; }
.guarantee b { color:white; font:800 35px/1 "Manrope"; }
.guarantee span { color:#91a7b2; font:700 10px/1.25 "Manrope"; letter-spacing:.1em; }
.buy-button { min-height:70px; margin-top:22px; padding:0 22px; display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:18px; color:#052129; background:var(--cyan); border-radius:14px; box-shadow:0 20px 45px rgba(49,215,200,.14); transition:.2s ease; }
.buy-button:hover { transform:translateY(-2px); background:var(--cyan-bright); box-shadow:0 25px 55px rgba(49,215,200,.22); }
.buy-button span { align-self:end; font:800 20px/1.3 "Manrope"; }
.buy-button small { grid-column:1; align-self:start; opacity:.66; font-size:11px; }
.buy-button b { grid-column:2; grid-row:1/3; font-size:24px; }
.payment-note { margin:10px 0 25px; color:#778f9b; font-size:11px; }
.details { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); }
summary { padding:18px 0; display:flex; align-items:center; justify-content:space-between; cursor:pointer; list-style:none; font:700 15px "Manrope"; }
summary::-webkit-details-marker { display:none; }
summary span { color:var(--cyan); transition:transform .2s ease; }
details[open] summary span { transform:rotate(45deg); }
.feature-list,.box-list { margin:0; padding:0 0 18px; list-style:none; display:grid; gap:8px; }
.feature-list li { display:grid; grid-template-columns:100px 1fr; gap:12px; color:#91a6b2; font-size:13px; }
.feature-list b { color:#d8e5e9; }
.box-list { grid-template-columns:1fr 1fr; }
.box-list li { position:relative; padding-left:17px; color:#a0b4be; font-size:13px; }
.box-list li:before { content:""; position:absolute; left:0; top:.65em; width:6px; height:6px; border-radius:50%; background:var(--cyan); }
.delivery-copy { padding-bottom:14px; color:#91a6b2; font-size:13px; }
.delivery-copy p { margin:0 0 9px; }
.delivery-copy b,.delivery-copy a { color:#d8e5e9; }
footer { min-height:96px; padding:25px clamp(22px,5vw,74px); display:flex; align-items:center; justify-content:space-between; gap:20px; color:#66808d; background:#05111b; font-size:11px; }
@media (max-width:760px) { .product-page { grid-template-columns:1fr; } .product-gallery { position:relative; top:auto; height:auto; min-height:680px; border-right:0; border-bottom:1px solid var(--line); } .main-image-wrap { width:min(560px,82vw); } .product-info { max-width:820px; justify-self:center; } }
@media (max-width:620px) { .site-header { height:70px; padding:0 18px; } .scroll-fade { top:70px; } .brand strong { font-size:15px; } .brand small { font-size:8px; } .brand-mark { width:30px; height:30px; } .header-buy { font-size:13px; } .product-page { padding-top:70px; } .product-gallery { min-height:580px; padding:72px 16px 28px; } .product-badge { top:25px; left:20px; } .main-image-wrap { width:min(460px,92vw); border-radius:24px; } .image-tabs { gap:6px; } .image-tab { min-width:0; padding:6px 9px 6px 6px; } .thumb { width:36px; height:36px; flex-basis:36px; } .image-tab>span:last-child { font-size:10px; } .product-info { padding:54px 22px 64px; } h1 { font-size:clamp(39px,12vw,54px); } .intro { font-size:16px; } .price-block { align-items:flex-end; } .price-block>div:first-child { display:grid; gap:2px; } .price-block strong { font-size:48px; } .guarantee b { font-size:30px; } .box-list { grid-template-columns:1fr; } footer { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { transition-duration:.01ms!important; } }