/* Допълнителни стилове за магазин, кошница и меню — върху шаблона Story */
:root { --acc:#c96f3f; --acc2:#6fb0b6; --card:#faf6f0; --line:#e3d9ca; }
#drawer { --line:rgba(255,255,255,.18); }
.pcard .thumb, .pcard img { border-bottom:1px solid var(--line); }
html { scroll-behavior:smooth; }
#topbar { position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 20px; background:rgba(0,0,0,.82); backdrop-filter:blur(6px); }
#topbar .logo { color:#fff; font-size:1.3rem; text-decoration:none; border:0; }
#topbar nav { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
#topbar nav a { color:#fff; border:0; font-size:.95rem; text-decoration:none; }
#topbar nav a:hover { color:var(--acc); }
.cartbtn { background:var(--acc); color:#000; border:0; border-radius:20px; padding:6px 16px; cursor:pointer; font:inherit; font-size:.9rem; }
.menu-toggle { display:none; background:none; border:1px solid var(--line); color:#fff; border-radius:8px; padding:4px 10px; font-size:1.2rem; cursor:pointer; }
@media (max-width:1180px) {
  .menu-toggle { display:block; }
  #topbar nav { display:none; position:absolute; top:100%; left:0; right:0; background:rgba(0,0,0,.95); flex-direction:column; align-items:flex-start; padding:16px 20px; }
  #topbar nav.open { display:flex; }
}
.banner { padding-top:52px; }
section[id] { scroll-margin-top:56px; }
.filters { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:0 0 28px; }
.chip { border:1px solid var(--acc); background:transparent; color:var(--acc); padding:6px 16px; border-radius:20px; cursor:pointer; font:inherit; font-size:.9rem; }
.chip.on { background:var(--acc); color:#000; }
.pgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; text-align:left; }
.pcard { background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.pcard .body { padding:16px; display:flex; flex-direction:column; flex:1; }
.pcard h3 { margin:0 0 6px; font-size:1.15rem; }
.pcard p { margin:0 0 12px; font-size:.95rem; opacity:.8; flex:1; }
.thumb { height:170px; display:flex; align-items:center; justify-content:center; font-size:3.4rem; position:relative; }
.tag { display:inline-block; font-size:.75rem; background:var(--acc2); color:#000; padding:2px 10px; border-radius:12px; margin-bottom:8px; align-self:flex-start; }
.price { font-weight:700; color:var(--acc); margin-bottom:10px; }
.pcard .button, .pcard .btn { width:100%; text-align:center; }
.play { position:absolute; width:56px; height:56px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.video .thumb { cursor:pointer; }
.video iframe { width:100%; height:170px; border:0; }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; counter-reset:s; text-align:left; margin-top:20px; }
.steps div { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; }
.steps div::before { counter-increment:s; content:counter(s); display:inline-flex; width:32px; height:32px; border-radius:50%; background:var(--acc); color:#000; align-items:center; justify-content:center; margin-bottom:8px; }
details { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 16px; margin:0 auto 10px; max-width:760px; text-align:left; }
summary { cursor:pointer; font-weight:700; }
.inner.wide { max-width:1100px; margin:0 auto; }
.contactcols { display:grid; grid-template-columns:1fr 1fr; gap:36px; text-align:left; }
@media (max-width:760px) { .contactcols { grid-template-columns:1fr; } }
.contactcols form select, form select { width:100%; }
/* кошница */
#drawer { position:fixed; top:0; right:0; bottom:0; width:min(400px,100%); background:#111; color:#fff; border-left:1px solid var(--line); box-shadow:-8px 0 30px rgba(0,0,0,.5); transform:translateX(100%); transition:transform .25s; z-index:60; display:flex; flex-direction:column; }
#drawer.open { transform:none; }
#drawer .dh { padding:16px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
#items { flex:1; overflow:auto; padding:0 16px; }
.item { display:flex; justify-content:space-between; gap:8px; padding:10px 0; border-bottom:1px solid var(--line); align-items:center; }
.item button { border:1px solid var(--line); background:transparent; color:#fff; border-radius:6px; width:28px; height:28px; cursor:pointer; }
#checkout { padding:16px; border-top:1px solid var(--line); display:grid; gap:8px; }
.row { display:flex; justify-content:space-between; align-items:center; gap:10px; }
#toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--acc2); color:#000; padding:10px 20px; border-radius:20px; opacity:0; transition:opacity .3s; pointer-events:none; z-index:70; }
#toast.show { opacity:1; }
