@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f3f5fa;
  --bg-alt:#eef1f8;
  --ink:#161a2b;
  --ink-soft:#20263a;
  --muted:#5c6478;
  --line:#e2e6f0;
  --line-strong:#c9d0de;
  --accent:#4a6cf7;
  --accent-dark:#3450c9;
  --accent-soft:rgba(74,108,247,.12);
  --mint:#2fd0b4;
  --mint-soft:rgba(47,208,180,.14);
  --pink:#ff6fa5;
  --pink-soft:rgba(255,111,165,.14);
  --card:rgba(255,255,255,.68);
  --card-solid:#ffffff;
  --glass-border:rgba(255,255,255,.75);
  --danger:#e14b62;
  --ok:#1fa88a;
  --radius:12px;
  --radius-lg:22px;
  --shadow-sm:0 6px 18px rgba(22,26,43,.06);
  --shadow-md:0 20px 50px rgba(22,26,43,.10);
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Inter', Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--sans); color:var(--ink); font-size:15.5px; line-height:1.62; -webkit-font-smoothing:antialiased;
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 8% 12%, rgba(74,108,247,.18), transparent 32%),
    radial-gradient(circle at 92% 6%, rgba(255,111,165,.15), transparent 30%),
    radial-gradient(circle at 62% 88%, rgba(47,208,180,.16), transparent 34%),
    radial-gradient(circle at 12% 82%, rgba(74,108,247,.10), transparent 30%);
  background-size:cover;
}
body{transition:background-color .2s ease, color .2s ease;}

/* ---------- Тёмная тема (переключается покупателем, светлая — по умолчанию) ---------- */
body.dark-theme{
  --bg:#12141c;
  --bg-alt:#171a24;
  --ink:#eef0f6;
  --ink-soft:#dde1ec;
  --muted:#b3b8cc;
  --line:#282c3a;
  --line-strong:#363c4e;
  --accent:#6d8bff;
  --accent-dark:#8fa5ff;
  --accent-soft:rgba(109,139,255,.16);
  --mint:#3fe0c2;
  --mint-soft:rgba(63,224,194,.14);
  --pink:#ff8ab3;
  --pink-soft:rgba(255,138,179,.14);
  --card:rgba(28,31,42,.68);
  --card-solid:#1b1e28;
  --glass-border:rgba(255,255,255,.08);
  --danger:#ff6b81;
  --ok:#33c99f;
  --shadow-sm:0 6px 18px rgba(0,0,0,.28);
  --shadow-md:0 20px 50px rgba(0,0,0,.40);
}
body.dark-theme{
  background-image:
    radial-gradient(circle at 8% 12%, rgba(109,139,255,.12), transparent 32%),
    radial-gradient(circle at 92% 6%, rgba(255,138,179,.10), transparent 30%),
    radial-gradient(circle at 62% 88%, rgba(63,224,194,.10), transparent 34%),
    radial-gradient(circle at 12% 82%, rgba(109,139,255,.08), transparent 30%);
}
body.dark-theme img{filter:brightness(.94) contrast(1.02);}
body.dark-theme #site-footer{background-color:var(--bg-alt);}
body.dark-theme .announce{background:#05060a; color:#dde1ec;}

.theme-mode-toggle{position:relative; flex:none; display:inline-flex; align-items:center; width:44px; height:24px; border-radius:999px; background:var(--bg-alt); border:1px solid var(--line-strong); padding:0; cursor:pointer; transition:background-color .2s, border-color .2s;}
.theme-mode-toggle:hover{border-color:var(--accent);}
.theme-mode-toggle .theme-mode-knob{position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--card); box-shadow:0 1px 3px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; font-size:11px; line-height:1; transition:transform .22s ease;}
.theme-mode-toggle .theme-mode-knob:before{content:'☀';}
.theme-mode-toggle.is-on{background:var(--ink);}
.theme-mode-toggle.is-on .theme-mode-knob{transform:translateX(20px);}
.theme-mode-toggle.is-on .theme-mode-knob:before{content:'🌙';}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none; margin:0; padding:0;}
button{font-family:inherit; cursor:pointer;}
input, select, textarea{font-family:inherit;}

.container{max-width:1320px; margin:0 auto; padding:0 56px;}
@media (max-width:900px){ .container{padding:0 20px;} }

h1,h2,h3,h4{font-family:var(--serif); font-weight:600; margin:0; color:var(--ink);}

.glass{background:var(--card); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--glass-border);}

/* ---------- Top announcement bar ---------- */
.announce{background:var(--ink); color:#eef1f8; text-align:center; font-size:12px; letter-spacing:.09em; padding:9px 12px; font-family:var(--sans); font-weight:500;}

/* ---------- Header ---------- */
#site-header{background:transparent; position:sticky; top:14px; z-index:50; padding:0 24px; will-change:transform;}
#site-header .header-row{background:var(--card); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--glass-border); border-radius:20px; box-shadow:var(--shadow-sm); padding:16px 28px; display:flex; align-items:center; justify-content:flex-start; gap:28px; max-width:1480px; margin:0 auto;}
.logo{font-family:var(--serif); font-size:26px; letter-spacing:.02em; font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:8px;}
.logo b{color:var(--accent); font-weight:600;}
.logo svg{flex:none;}
.main-nav{display:flex; gap:16px; align-items:center; flex-wrap:nowrap; flex:none;}
.main-nav a{font-size:13px; font-weight:500; letter-spacing:.02em; color:var(--ink-soft); padding:6px 0; border-bottom:1px solid transparent; transition:.2s;}
.main-nav a:hover, .main-nav a.active{color:var(--accent-dark); border-color:var(--accent);}

.nav-drop{position:relative;}
.nav-drop > a .chev{font-size:10px; margin-left:3px; display:inline-block; transition:.2s;}
.nav-drop:hover > a .chev{transform:rotate(180deg);}
.nav-drop-menu{position:absolute; top:100%; left:50%; margin-top:14px; transform:translateX(-50%) translateY(0); min-width:200px; padding:10px; display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s, visibility .18s; z-index:40;
  background:var(--card); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--glass-border); border-radius:16px; box-shadow:var(--shadow-md);}
.nav-drop-menu:before{content:''; position:absolute; left:0; right:0; top:-14px; height:14px;}
.nav-drop:hover .nav-drop-menu{opacity:1; visibility:visible; pointer-events:auto;}
.nav-drop-menu a{padding:9px 12px; border-radius:10px; border-bottom:none; white-space:nowrap;}
.nav-drop-menu a:hover{background:var(--accent-soft); color:var(--accent-dark);}
.nav-drop-menu .nav-drop-all{border-top:1px solid var(--line); margin-top:4px; padding-top:11px; font-size:12px; color:var(--muted);}
.nav-drop-menu .nav-drop-all:hover{color:var(--accent-dark);}
.header-search{display:flex; align-items:center; gap:0; background:var(--bg-alt); border:1px solid var(--line); border-radius:999px; padding:2px 4px 2px 14px; margin-left:auto; flex:none;}
.header-search input{border:none; background:transparent; outline:none; font-size:13px; width:110px; color:var(--ink); font-family:inherit;}
.header-search input::placeholder{color:var(--muted);}
.header-search button{background:none; border:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--muted);}
.header-search button:hover{color:var(--accent-dark); background:var(--accent-soft);}
.header-search button svg{width:16px; height:16px;}
.mobile-search-toggle{display:none; background:none; border:1px solid var(--line-strong); border-radius:50%; width:34px; height:34px; align-items:center; justify-content:center; color:var(--ink);}
.mobile-search-toggle svg{width:16px; height:16px;}

@media (max-width:1080px){
  .header-search{display:none;}
  .mobile-search-toggle{display:flex;}
  /* Развёрнутый поиск на мобильных — отдельная строка на всю ширину шапки под основным контентом */
  .header-search.mobile-open{display:flex; width:100%; margin:10px 0 0; order:5;}
}

.header-actions{display:flex; align-items:center; gap:14px; font-size:13px; flex:none;}
.header-actions a{display:flex; align-items:center; gap:6px; color:var(--ink-soft); font-weight:500;}
.header-actions a:hover{color:var(--accent-dark);}
.cart-pill, .wish-link{position:relative;}
.cart-count{position:absolute; top:-9px; right:-14px; background:var(--accent); color:#fff; font-size:10px; font-weight:700; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.icon-btn{background:none; border:1px solid var(--line-strong); border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:var(--ink);}

.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0;}
.nav-toggle span{display:block; width:100%; height:2px; background:var(--ink); border-radius:2px; transition:.25s;}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:900px){
  #site-header .header-row{flex-wrap:wrap; padding:14px 20px;}
  .nav-toggle{display:flex; order:2;}
  .header-actions{order:3; gap:14px; font-size:12px;}
  .main-nav{display:none; width:100%; order:4; flex-direction:column; align-items:stretch; gap:2px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
  .main-nav.open{display:flex;}
  .nav-drop{width:100%;}
  .nav-drop > a{display:flex; justify-content:space-between; padding:10px 2px;}
  .nav-drop-menu{position:static; opacity:1; visibility:visible; pointer-events:auto; transform:none; margin:0 0 6px 14px; padding:0; box-shadow:none; border:none; background:transparent; backdrop-filter:none; display:flex; flex-direction:column;}
  .nav-drop-menu:before{display:none;}
  .nav-drop-menu a{padding:8px 6px;}
  .main-nav > a{padding:10px 2px;}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 30px; font-size:12.5px; letter-spacing:.03em; border-radius:var(--radius); border:1px solid transparent; font-weight:700; transition:.2s; background:none;}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 14px 30px rgba(74,108,247,.28);}
.btn-primary:hover{background:var(--accent-dark);}
.btn-outline{border-color:var(--ink); color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:#fff;}
.btn-accent{background:var(--ink); color:#fff;}
.btn-accent:hover{background:var(--accent-dark);}
.btn-sm{padding:9px 18px; font-size:11px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.45; cursor:not-allowed;}
.link-btn{background:none; border:none; padding:0; font-size:13px; color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px;}

/* ---------- Hero ---------- */
.hero{padding:60px 0 40px; }
.hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center;}
.eyebrow{font-family:var(--sans); display:inline-block; background:var(--card); backdrop-filter:blur(14px); border:1px solid var(--glass-border); font-size:11.5px; letter-spacing:.04em; color:var(--ink-soft); padding:8px 16px; border-radius:30px; margin-bottom:22px; font-weight:700; box-shadow:var(--shadow-sm);}
.hero h1{font-size:56px; line-height:1.1; margin-bottom:24px;}
.hero p.lead{color:var(--muted); font-size:15.5px; max-width:440px; margin-bottom:34px; line-height:1.75;}
.hero-visual{position:relative; background:
    radial-gradient(circle at 25% 20%, var(--accent-soft), transparent 55%),
    radial-gradient(circle at 80% 85%, var(--pink-soft), transparent 50%),
    var(--card);
  backdrop-filter:blur(18px); border:1px solid var(--glass-border); border-radius:var(--radius-lg); height:440px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); overflow:hidden;}
.hero-visual img{width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:1;}

/* ---------- Section heading ---------- */
.section{padding:56px 0;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:34px;}
.section-head h2{font-size:32px;}
.section-head .all-link{font-size:12.5px; letter-spacing:.02em; font-weight:700; color:var(--accent-dark);}
.section-head.center{flex-direction:column; align-items:center; text-align:center; gap:10px;}
.section-head.center .rule{width:60px; height:2px; background:var(--accent); border-radius:2px;}

/* ---------- Category tiles ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.cat-card{background:var(--card-solid); border:1px solid var(--glass-border); border-radius:var(--radius-lg); overflow:hidden; transition:.3s; display:block; box-shadow:var(--shadow-sm);}
.cat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-5px);}
.cat-card .cat-visual{height:190px; display:flex; align-items:center; justify-content:center;}
.cat-card .cat-info{padding:18px 22px 22px;}
.cat-card .cat-info .t{font-family:var(--serif); font-size:19px; font-weight:600; margin-bottom:5px;}
.cat-card .cat-info .c{font-size:12px; color:var(--muted); letter-spacing:.02em;}
@media (max-width:1000px){ .cat-grid{grid-template-columns:repeat(2,1fr);} }

/* ---------- Product grid / card ---------- */
.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px 22px;}
@media (max-width:1100px){ .product-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){ .product-grid{grid-template-columns:repeat(2,1fr);} }

.product-card{display:block; background:var(--card-solid); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:16px; transition:.25s; box-shadow:var(--shadow-sm);}
.product-card:hover{box-shadow:var(--shadow-md); transform:translateY(-4px);}
.product-card .thumb{position:relative; background:rgba(255,255,255,.5); border-radius:var(--radius); height:190px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; overflow:hidden;}
.product-card .thumb svg{width:78%;}
.badge-stack{position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:6px; z-index:2;}
.badge{font-size:10px; letter-spacing:.03em; font-weight:800; padding:6px 11px; border-radius:20px; color:#fff; white-space:nowrap; width:fit-content;}
.badge.new{background:var(--accent);}
.badge.sale{background:var(--pink);}
.pd-tags{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.pd-tags .badge{position:static;}
.wishlist-btn{display:none;}
.wishlist-btn.active{background:var(--pink); border-color:var(--pink); color:#fff;}
.product-card .name{font-size:14px; margin-bottom:5px; color:var(--ink-soft); font-weight:600;}
.product-card .meta{font-size:11.5px; color:var(--muted); margin-bottom:8px;}
.product-card .price-row{font-size:15px; font-weight:800; color:var(--accent-dark);}
.product-card .price-row .old{color:var(--muted); text-decoration:line-through; font-weight:400; margin-left:8px; font-size:12.5px;}
.stars{color:var(--pink); font-size:12px; letter-spacing:1px;}

/* ---------- Benefits strip ---------- */
.strip{background:var(--card); backdrop-filter:blur(18px); border:1px solid var(--glass-border); border-radius:var(--radius-lg); max-width:1480px; margin:0 auto; margin-left:max(24px, calc((100% - 1480px)/2)); margin-right:max(24px, calc((100% - 1480px)/2)); box-shadow:var(--shadow-sm);}
.strip .container{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:44px 40px; max-width:none;}
@media (max-width:1100px){ .strip .container{grid-template-columns:repeat(2,1fr);} }
@media (max-width:900px){ .strip .container{grid-template-columns:1fr; padding:36px 24px;} }
.strip .item{position:relative; padding-left:0;}
.strip .item .ic{display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; margin-bottom:16px;}
.strip .item .ic svg{width:22px; height:22px;}
.strip .item .ic-shield{background:var(--accent-soft); color:var(--accent-dark);}
.strip .item .ic-truck{background:var(--mint-soft); color:var(--mint);}
.strip .item .ic-chat{background:var(--pink-soft); color:var(--pink);}
.strip .item .ic-clock{background:var(--accent-soft); color:var(--accent);}
.strip .item .t{font-family:var(--serif); font-size:18px; font-weight:600; margin-bottom:6px; color:var(--ink);}
.strip .item .d{font-size:12.5px; color:var(--muted); line-height:1.5;}

/* ---------- Footer ---------- */
#site-footer{border-top:1px solid var(--line); background:var(--bg-alt); margin-top:20px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding:64px 0 30px;}
.footer-grid h4{font-size:12px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; color:var(--ink-soft);}
.footer-grid ul li{margin-bottom:10px; font-size:13.5px; color:var(--muted);}
.footer-about p{color:var(--muted); font-size:13.5px; max-width:280px; line-height:1.7; margin-top:14px;}
.footer-bottom{border-top:1px solid var(--line); padding:20px 0; display:flex; justify-content:space-between; font-size:12px; color:var(--muted);}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} }

/* ---------- Breadcrumbs / page head ---------- */
.page-head{padding:32px 0 8px;}
.breadcrumbs{font-size:12px; color:var(--muted); margin-bottom:10px;}
.breadcrumbs a:hover{color:var(--accent-dark);}
.page-head h1{font-size:34px;}
.result-count{color:var(--muted); font-size:13px; margin-top:6px;}

/* ---------- Catalog layout ---------- */
.catalog-layout{display:grid; grid-template-columns:250px 1fr; gap:40px; padding-bottom:80px;}
.filters{background:var(--card-solid); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:24px; position:sticky; top:104px;}
.filter-group{margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid var(--line);}
.filter-group:last-child{margin-bottom:0; padding-bottom:0; border-bottom:none;}
.filter-group h4{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; color:var(--muted);}
.filter-opt{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-soft); margin-bottom:2px; cursor:pointer; padding:7px 8px; margin-left:-8px; margin-right:-8px; border-radius:10px; transition:background-color .15s;}
.filter-opt:hover{background:var(--accent-soft); color:var(--accent-dark);}
.filter-opt input[type="radio"], .filter-opt input[type="checkbox"]{accent-color:var(--accent); width:16px; height:16px; flex:none; cursor:pointer;}
.filter-cat-group{margin-bottom:2px;}
.filter-opt-parent{font-weight:700; color:var(--ink);}
.filter-opt-child{margin-left:18px; font-size:13px;}
.swatch{width:16px; height:16px; border-radius:50%; border:1px solid var(--line-strong); display:inline-block; box-shadow:0 0 0 2px var(--card-solid) inset;}
.range-row{display:flex; gap:10px; align-items:center;}
.range-row input{width:80px; padding:9px 10px; border:1px solid var(--line-strong); border-radius:var(--radius); font-size:12.5px; background:var(--bg-alt); color:var(--ink);}
.range-row input:focus{outline:none; border-color:var(--accent);}
.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:26px;}
.toolbar select{padding:10px 14px; border:1px solid var(--line-strong); border-radius:999px; font-size:12.5px; background:var(--card-solid); color:var(--ink); cursor:pointer;}
.empty-state{padding:60px 0; text-align:center; color:var(--muted);}
.filter-opt-disabled{opacity:.4; cursor:not-allowed;}
.filter-opt-disabled:hover{background:none; color:var(--ink-soft);}
.filter-opt-disabled input{cursor:not-allowed;}
.opt-count{color:var(--muted); font-size:11.5px; margin-left:auto;}
@media (max-width:900px){ .filters{position:static;} }
.filter-chips{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:18px;}
.chip{display:inline-flex; align-items:center; gap:6px; background:var(--accent-soft); color:var(--accent-dark); font-size:12px; font-weight:600; padding:6px 8px 6px 12px; border-radius:20px;}
.chip-x{background:none; border:none; color:var(--accent-dark); font-size:14px; line-height:1; padding:2px 4px; border-radius:50%; cursor:pointer;}
.chip-x:hover{background:rgba(74,108,247,.22);}
.chip-reset{background:none; border:none; color:var(--muted); font-size:12px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:6px 0;}
@media (max-width:900px){ .catalog-layout{grid-template-columns:1fr;} }

/* ---------- Product detail ---------- */
.product-detail{display:grid; grid-template-columns:1fr 1fr; gap:56px; padding:40px 0 80px;}
.pd-gallery-main{background:var(--card); backdrop-filter:blur(16px); border:1px solid var(--glass-border); border-radius:var(--radius-lg); height:440px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; box-shadow:var(--shadow-sm);}
.pd-gallery-main svg{width:70%;}
.pd-gallery-thumbs{display:flex; gap:10px;}
.pd-gallery-thumbs .t{width:76px; height:76px; border:1px solid var(--glass-border); border-radius:var(--radius); background:var(--card-solid); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.pd-info .cat-tag{font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-dark); margin-bottom:12px; display:block; font-weight:700;}
.pd-info h1{font-size:32px; margin-bottom:10px;}
.pd-info .rating-row{display:flex; gap:10px; align-items:center; margin-bottom:20px; font-size:12.5px; color:var(--muted);}
.pd-info .price-block{font-size:26px; font-weight:800; color:var(--accent-dark); margin-bottom:24px;}
.pd-info .price-block .old{font-size:16px; color:var(--muted); text-decoration:line-through; margin-left:10px; font-weight:400;}
.pd-info p.desc{color:var(--muted); line-height:1.75; margin-bottom:26px; font-size:14px;}
.pd-specs{width:100%; border-collapse:collapse; margin-bottom:28px;}
.pd-specs td{padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.pd-specs td:first-child{color:var(--muted); width:180px;}
.color-select{display:flex; gap:10px; margin-bottom:26px;}
.color-select .sw{width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer;}
.color-select .sw.active{border-color:var(--accent);}
.qty-row{display:flex; align-items:center; gap:16px; margin-bottom:20px;}
.qty-control{display:flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--card-solid);}
.qty-control button{width:38px; height:42px; background:none; border:none; font-size:16px;}
.qty-control input{width:44px; text-align:center; border:none; font-size:14px;}
.stock-note{font-size:12.5px; color:var(--ok); margin-bottom:22px; font-weight:600;}
.stock-note.low{color:var(--danger);}
.pd-actions{display:flex; gap:14px;}
.price-note{font-size:12px; font-weight:600; color:var(--muted); vertical-align:middle; margin-left:4px;}
.price-note-sm{font-size:10.5px; font-weight:600; color:var(--muted);}

.lens-config{background:var(--card); backdrop-filter:blur(14px); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:22px; margin-bottom:24px; box-shadow:var(--shadow-sm);}
.lens-config h4{font-size:15px; margin-bottom:16px;}
.origin-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.origin-opt{border:1.5px solid var(--line-strong); border-radius:var(--radius); padding:14px 16px; cursor:pointer; transition:.15s;}
.origin-opt:hover{border-color:var(--accent);}
.origin-opt.active{border-color:var(--accent); background:var(--accent-soft);}
.origin-opt .o-label{font-weight:700; font-size:13.5px; margin-bottom:4px;}
.origin-opt .o-note{font-size:11.5px; color:var(--muted);}
.photo-status{font-size:12px; margin-top:8px; min-height:16px;}
.rx-mode-tabs{display:flex; gap:8px; margin-bottom:10px;}
.rx-mode-tab{flex:1; padding:9px 10px; font-size:12.5px; border:1.5px solid var(--line-strong); border-radius:var(--radius); background:var(--card-solid); color:var(--ink); cursor:pointer; transition:.15s;}
.rx-mode-tab:hover{border-color:var(--accent);}
.rx-mode-tab.active{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-dark); font-weight:600;}
.rx-hint{font-size:12px; color:var(--ink); background:var(--accent-soft); border-radius:var(--radius); padding:10px 12px; margin-bottom:10px; line-height:1.45;}

/* Кастомная обёртка нативного input[type=file], чтобы он не был белым
   прямоугольником поверх тёмной темы — стилизуем и сам инпут, и системную
   кнопку выбора файла через ::file-selector-button. */
input[type="file"]{
  display:block; width:100%; font-size:12.5px; color:var(--muted);
  background:var(--card-solid); border:1.5px dashed var(--line-strong);
  border-radius:var(--radius); padding:10px 12px; cursor:pointer; transition:border-color .15s;
}
input[type="file"]:hover{border-color:var(--accent);}
input[type="file"]::file-selector-button{
  font: inherit; font-weight:600; font-size:12.5px; color:#fff; cursor:pointer;
  background:var(--accent); border:none; border-radius:999px; padding:7px 16px;
  margin-right:12px; transition:background-color .15s;
}
input[type="file"]::file-selector-button:hover{background:var(--accent-dark);}
.rx-manual-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:8px 10px; align-items:center;}
.rx-manual-grid label{font-size:12px; color:var(--muted);}
.rx-manual-grid input{width:100%; padding:9px 10px; border:1px solid var(--line-strong); border-radius:var(--radius); font-size:13px;}
.rx-col-label{font-size:11.5px; color:var(--muted); text-align:center; font-weight:600;}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.lead-thanks{background:var(--mint-soft); color:#187a68; border-radius:var(--radius); padding:16px; font-size:13.5px; margin-top:16px; line-height:1.6;}

.pd-benefits{margin-top:30px; border-top:1px solid var(--line); padding-top:22px;}
.pd-benefits li{font-size:13px; color:var(--muted); margin-bottom:8px; padding-left:18px; position:relative;}
.pd-benefits li:before{content:'—'; position:absolute; left:0; color:var(--accent);}

.pd-steps{margin:0; padding-left:20px; counter-reset:none;}
.pd-steps li{font-size:13.5px; color:var(--ink-soft); margin-bottom:10px; line-height:1.6;}
.pd-steps li:last-child{margin-bottom:0;}

.faq-item{border-bottom:1px solid var(--line); padding:14px 0;}
.faq-item:first-child{padding-top:0;}
.faq-item:last-child{border-bottom:none; padding-bottom:0;}
.faq-item summary{cursor:pointer; font-weight:600; font-size:14.5px; color:var(--ink); list-style:none; display:flex; align-items:center; gap:8px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:before{content:'+'; color:var(--accent); font-weight:800; font-size:16px; width:16px;}
.faq-item[open] summary:before{content:'−';}
.faq-item .desc{margin:10px 0 0 24px;}

.face-shape-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:12px; margin-top:16px;}
.face-shape-card{display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 10px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card-solid); cursor:pointer; font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); font-weight:600; transition:border-color .15s, box-shadow .15s;}
.face-shape-card:hover{border-color:var(--accent);}
.face-shape-card.active{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft);}
.face-shape-icon{width:56px; height:66px; display:block;}
.face-shape-icon-sm{width:44px; height:52px; flex:none;}
.face-quiz-result{margin-top:20px; padding-top:20px; border-top:1px solid var(--line);}
.face-quiz-shapes{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.face-shape-row{display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line);}
.face-shape-row:last-child{border-bottom:none; padding-bottom:0;}
.face-shape-row:first-child{padding-top:0;}

.notif-bell{position:relative; display:inline-flex; align-items:center;}
.notif-bell .cart-count{position:absolute; top:-8px; right:-10px;}
.status-timeline{list-style:none; margin:0; padding:0;}
.status-timeline li{padding:6px 0; border-bottom:1px solid var(--line); font-size:12.5px;}
.status-timeline li:last-child{border-bottom:none;}
.t-date{color:var(--muted); font-size:11.5px;}
.t-note{color:var(--muted); font-size:11.5px; margin-top:2px;}
.notif-log-panel{margin-top:14px; font-size:12.5px;}
.notif-log-item{padding:8px 0; border-bottom:1px solid var(--line);}
.notif-log-item:last-child{border-bottom:none;}
.notif-log-hint{color:var(--muted); font-size:11.5px; margin:0 0 10px;}
@media (max-width:900px){ .product-detail{grid-template-columns:1fr;} }
@media (max-width:640px){
  .form-grid{grid-template-columns:1fr;}
  .hero-grid{grid-template-columns:1fr; text-align:center;}
  .hero-grid .hero-visual{order:-1;}
  .product-grid{grid-template-columns:repeat(2,1fr) !important;}
  .cat-grid{grid-template-columns:1fr !important;}
  .checkout-layout, .cart-layout, .account-layout{grid-template-columns:1fr !important;}
  .origin-row{grid-template-columns:1fr !important;}
  .header-actions{gap:10px;}
  .header-actions a:not(.cart-pill){display:none;}
}

/* ---------- Cart ---------- */
.cart-layout{display:grid; grid-template-columns:1fr 360px; gap:50px; padding:40px 0 80px;}
.cart-line{display:grid; grid-template-columns:96px 1fr auto auto auto; gap:20px; align-items:center; padding:18px; margin-bottom:12px; background:var(--card-solid); border:1px solid var(--glass-border); border-radius:var(--radius-lg);}
.cart-line .thumb{width:96px; height:80px; background:rgba(255,255,255,.5); border-radius:var(--radius); display:flex; align-items:center; justify-content:center;}
.cart-line .thumb svg{width:80%;}
.cart-line .name{font-size:14px; font-weight:600;}
.cart-line .meta{font-size:12px; color:var(--muted); margin-top:4px;}
.cart-line .price{font-size:14px; font-weight:700;}
.cart-line .remove{color:var(--danger); font-size:12px; background:none; border:none;}
.summary-box{background:var(--card); backdrop-filter:blur(16px); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:28px; height:fit-content; box-shadow:var(--shadow-sm);}
.summary-box h3{font-size:18px; margin-bottom:20px;}
.summary-row{display:flex; justify-content:space-between; font-size:13.5px; color:var(--muted); margin-bottom:12px;}
.summary-row.total{color:var(--ink); font-weight:800; font-size:16px; border-top:1px solid var(--line); padding-top:16px; margin-top:6px;}
.promo-row{display:flex; gap:8px; margin:18px 0;}
.promo-row input{flex:1; padding:11px; border:1px solid var(--line-strong); border-radius:var(--radius); font-size:12.5px;}
.empty-cart{text-align:center; padding:80px 0; color:var(--muted);}
@media (max-width:900px){ .cart-layout{grid-template-columns:1fr;} }

/* ---------- Forms (checkout/account/admin) ---------- */
.form-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px;}
.form-field{margin-bottom:18px; min-width:0;}
.form-field.full{grid-column:1/-1;}
.form-field label{display:block; font-size:12px; color:var(--muted); margin-bottom:7px; letter-spacing:.02em;}
.form-field input:not([type="checkbox"]):not([type="radio"]), .form-field select, .form-field textarea{width:100%; min-width:0; max-width:100%; box-sizing:border-box; padding:12px 14px; border:1px solid var(--line-strong); border-radius:var(--radius); font-size:13.5px; background:var(--card-solid); color:var(--ink);}
.form-field input::placeholder, .form-field textarea::placeholder{color:var(--muted); opacity:.7;}
.form-field textarea{resize:vertical; min-height:90px;}
/* Чекбоксы/радио внутри .form-field — не растягиваем и не обнуляем нативный вид, только выравниваем с текстом */
.form-field label:has(input[type="checkbox"]), .form-field label:has(input[type="radio"]){display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-soft); margin-bottom:0; cursor:pointer;}
input[type="checkbox"], input[type="radio"]{width:16px; height:16px; flex:none; accent-color:var(--accent); cursor:pointer; margin:0;}
#f-color-new-wrap{align-items:stretch;}
#f-colorName-new{flex:1; min-width:0; width:auto;}
#f-color-new-wrap input[type="color"]{flex:0 0 56px; width:56px; padding:4px;}
.radio-row{display:flex; gap:20px;}
.radio-opt{display:flex; align-items:center; gap:8px; font-size:13.5px; border:1px solid var(--line-strong); border-radius:var(--radius); padding:12px 16px; flex:1; cursor:pointer; background:var(--card-solid); color:var(--ink);}
.radio-opt.active{border-color:var(--accent); background:var(--accent-soft);}
.checkout-layout{display:grid; grid-template-columns:1fr 380px; gap:50px; padding:40px 0 80px;}
.mini-summary{background:var(--card); backdrop-filter:blur(16px); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-sm);}
.mini-line{display:flex; justify-content:space-between; font-size:13px; padding:10px 0; border-bottom:1px solid var(--line);}

.center-card{max-width:440px; margin:70px auto; background:var(--card); backdrop-filter:blur(16px); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:44px; box-shadow:var(--shadow-md);}
.center-card h1{font-size:26px; margin-bottom:8px; text-align:center;}
.center-card .sub{text-align:center; color:var(--muted); font-size:13px; margin-bottom:30px;}

/* success page */
.success-box{max-width:560px; margin:70px auto; text-align:center; padding:0 20px 100px;}
.success-icon{width:70px; height:70px; border-radius:50%; background:var(--mint-soft); color:var(--ok); display:flex; align-items:center; justify-content:center; font-size:30px; margin:0 auto 24px;}
.success-box h1{font-size:28px; margin-bottom:12px;}
.success-box p{color:var(--muted); margin-bottom:30px;}

/* toast */
#toast{position:fixed; bottom:26px; right:26px; background:var(--ink); color:#fff; padding:14px 22px; border-radius:var(--radius); font-size:13px; opacity:0; transform:translateY(10px); transition:.25s; z-index:200; box-shadow:var(--shadow-md);}
#toast.show{opacity:1; transform:translateY(0);}

/* ---------- Сравнение товаров ---------- */
.compare-check{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); margin-top:8px; cursor:pointer; user-select:none;}
.compare-check input{cursor:pointer;}
.compare-bar{position:fixed; left:0; right:0; bottom:0; z-index:150; background:var(--card-solid); border-top:1px solid var(--line); box-shadow:0 -10px 30px rgba(22,26,43,.08);}
.compare-bar-inner{max-width:1320px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.compare-bar-label{font-size:12.5px; font-weight:600; color:var(--muted); white-space:nowrap;}
.compare-bar-items{display:flex; gap:8px; flex-wrap:wrap; flex:1;}
.compare-bar-item{display:inline-flex; align-items:center; gap:6px; background:var(--accent-soft); color:var(--accent-dark); padding:5px 10px; border-radius:20px; font-size:12px;}
.compare-bar-item button{background:none; border:none; color:inherit; font-size:13px; line-height:1; cursor:pointer; opacity:.7;}
.compare-bar-item button:hover{opacity:1;}

.compare-table{width:100%; border-collapse:collapse;}
.compare-table th, .compare-table td{padding:14px 16px; border-bottom:1px solid var(--line); text-align:left; font-size:13.5px; vertical-align:top;}
.compare-table th{width:160px; color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em;}
.compare-table td .compare-thumb{width:110px; margin-bottom:10px;}
.compare-table td .compare-remove{font-size:11.5px; color:var(--danger); background:none; border:none; cursor:pointer; margin-top:6px;}

/* account */
.account-layout{display:grid; grid-template-columns:220px 1fr; gap:44px; padding:40px 0 80px;}
.account-nav a{display:block; padding:12px 0; font-size:13.5px; color:var(--muted); border-bottom:1px solid var(--line);}
.account-nav a.active{color:var(--ink); font-weight:700;}
.order-row{background:var(--card-solid); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:18px 20px; margin-bottom:14px; display:flex; justify-content:space-between; align-items:center;}
.status-pill{font-size:11px; padding:5px 12px; border-radius:20px; text-transform:uppercase; letter-spacing:.03em; font-weight:700;}
.status-new{background:#e8edfd; color:#3450c9;}
.status-processing{background:#fdf1e0; color:#a4772b;}
.status-shipped{background:#e2f7f2; color:#1a8a72;}
.status-delivered{background:#e2f7ee; color:#1a8a5c;}
.status-cancelled{background:#fde7ea; color:#c23955;}

.body-lock{overflow:hidden;}