/* SuperSexShop — светлый маркетплейс.
   Своя мини-система утилит: row/col/g16/tc и короткие компонентные классы.
   Тема одна, светлая: плотная товарная выдача на тёмном фоне читается хуже,
   а карточки товара на белом — отраслевой стандарт. */

:root {
  --acc: #fb5607;
  --acc-d: #d94804;
  --acc-2: #e63946;
  --ink: #14171a;
  --ink-2: #5b6570;
  --ink-3: #8b95a1;
  --line: #e4e7eb;
  --line-2: #cfd5dc;
  --bg: #fff;
  --bg-2: #f4f5f7;
  --bg-3: #fafbfc;
  --ok: #12a150;
  --r: 10px;
  --r-s: 6px;
  --wr: 1280px;
  --pad: 18px;
  --sh: 0 1px 2px rgba(20, 23, 26, .06), 0 8px 24px -14px rgba(20, 23, 26, .3);
  --f: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 var(--f);
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--acc-d); }

h1 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.02em; }
h2 { font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.25; margin: 1.8em 0 .6em; letter-spacing: -.01em; }
h3 { font-size: 1.05rem; margin: 1.4em 0 .5em; }
p { margin: 0 0 .9em; }

:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 3px; }

/* ---- утилиты ---- */
.wr { width: 100%; max-width: var(--wr); margin-inline: auto; padding-inline: var(--pad); }
.row { display: flex; }
.ac { align-items: center; }
.jc { justify-content: center; }
.wrp { flex-wrap: wrap; }
.fw { width: 100%; }
.tc { text-align: center; }
.g8 { gap: 8px; } .g12 { gap: 12px; } .g16 { gap: 16px; } .g24 { gap: 24px; }
.lead { font-size: 1.05rem; color: var(--ink-2); }
.muted { color: var(--ink-3); }
.sk { position: absolute; left: -9999px; }
.sk:focus { left: 0; top: 0; z-index: 60; background: var(--acc); color: #fff; padding: 10px 14px; }

/* ---- кнопки ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; border: 1px solid transparent; border-radius: var(--r-s);
  background: var(--acc); color: #fff; font: 600 14px/1 var(--f);
  cursor: pointer; white-space: nowrap; transition: background .15s;
}
.btn:hover { background: var(--acc-d); color: #fff; }
.btn-o { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-o:hover { background: var(--bg-2); color: var(--ink); border-color: var(--ink-3); }
.btn-sm { padding: 8px 12px; font-size: 13px; }
.btn-lg { padding: 13px 26px; font-size: 15px; }

/* ---- шапка ---- */
.hd { border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; background: #fff; }
.hd-top { min-height: 62px; }
.lg { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; color: var(--acc); }
.lg-i { width: 34px; height: 34px; }
.lg-t { font: 700 18px/1 var(--f); color: var(--ink); letter-spacing: -.02em; }
.lg-t b { color: var(--acc); font-weight: 700; }

.srch { display: flex; flex: 1 1 auto; max-width: 560px; margin-inline: auto; }
.srch input {
  flex: 1 1 auto; min-width: 0; padding: 9px 13px; font: 14px var(--f);
  border: 1px solid var(--line-2); border-right: 0;
  border-radius: var(--r-s) 0 0 var(--r-s); background: var(--bg-3);
}
.srch input:focus { outline: none; border-color: var(--acc); background: #fff; }
.srch button {
  padding: 9px 16px; border: 0; border-radius: 0 var(--r-s) var(--r-s) 0;
  background: var(--acc); color: #fff; font: 600 14px var(--f); cursor: pointer;
}
.srch button:hover { background: var(--acc-d); }

.hd-side { flex: 0 0 auto; }
.hd-l { font-size: 14px; color: var(--ink-2); }
.cart {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-s);
  background: #fff; font: 600 14px var(--f); cursor: pointer;
}
.cart:hover { border-color: var(--acc); }
.cart-n {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--acc); color: #fff; font-size: 12px; line-height: 20px; text-align: center;
}
.mb { display: none; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: #fff; cursor: pointer; position: relative; }
.mb i, .mb i::before, .mb i::after { position: absolute; left: 11px; width: 16px; height: 2px; background: var(--ink); content: ""; }
.mb i { top: 19px; } .mb i::before { top: -5px; } .mb i::after { top: 5px; }

.cbar { border-top: 1px solid var(--line); background: var(--bg-3); }
.cbar-in { gap: 2px; overflow-x: auto; scrollbar-width: none; }
.cbar-in::-webkit-scrollbar { display: none; }
.cbar-i { flex: 0 0 auto; padding: 11px 14px; font-size: 14px; color: var(--ink-2); border-bottom: 2px solid transparent; }
.cbar-i:hover { color: var(--acc-d); }
.cbar-i.on { color: var(--acc); border-bottom-color: var(--acc); font-weight: 600; }
.cbar-all { margin-left: auto; font-weight: 600; color: var(--acc); }

/* ---- крошки ---- */
.bc { padding: 11px 0; font-size: 13px; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.bc .wr { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.bc a:hover { color: var(--acc-d); }
.bc i { font-style: normal; color: var(--line-2); }
.bc span { color: var(--ink-2); }

/* ---- секции ---- */
.sec { padding: 26px 0; }
.sec-h { justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.sec-h h2 { margin: 0; }
.mr { font-size: 14px; font-weight: 600; color: var(--acc); white-space: nowrap; }
.box { padding: 20px 22px; background: var(--bg-2); border-radius: var(--r); margin: 22px 0; }
.box h2, .box h3 { margin-top: 0; }
.box > :last-child { margin-bottom: 0; }

/* ---- первый экран ---- */
.hero { padding: 26px 0 8px; }
.hero-in { align-items: center; }
.hero-t { flex: 1 1 440px; min-width: 0; }
.hero-m { flex: 1 1 480px; min-width: 0; }
.hero-i { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); }
.hero-b { margin: 18px 0; }
.hero-u { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--ink-2); }
.hero-u li::before { content: "✓"; color: var(--ok); font-weight: 700; margin-right: 6px; }

/* ---- категории ---- */
.gc { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.ct { display: grid; gap: 3px; padding: 15px 16px; background: var(--bg-2); border-radius: var(--r); border: 1px solid transparent; }
.ct:hover { border-color: var(--acc); background: #fff; box-shadow: var(--sh); }
.ct-n { font-weight: 600; font-size: 15px; }
.ct-c { font-size: 13px; color: var(--ink-3); }

/* ---- сетка товаров ---- */
.gp { display: grid; grid-template-columns: repeat(auto-fill, minmax(198px, 1fr)); gap: 12px; }
.pc { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; transition: box-shadow .15s, border-color .15s; }
.pc:hover { border-color: var(--line-2); box-shadow: var(--sh); }
.pc-im { position: relative; display: block; background: var(--bg-3); }
.pc-i { width: 100%; aspect-ratio: 1; object-fit: cover; }
.bdg { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 4px; background: var(--acc-2); color: #fff; font: 700 12px var(--f); }
.pc-b { display: flex; flex-direction: column; gap: 6px; padding: 12px 13px 13px; flex: 1 1 auto; }
.pc-n { font-size: 14px; line-height: 1.35; font-weight: 500; }
.pc-n:hover { color: var(--acc-d); }
.pc-m { font-size: 12.5px; color: var(--ink-3); }
.pc-pr { margin-top: auto; }
.pr { font: 700 17px var(--f); }
.pr-o { font-size: 13px; color: var(--ink-3); }
.pr-l { font-size: 26px; }
.pr-o-l { font-size: 16px; }
.save { padding: 3px 8px; border-radius: 4px; background: #fdece4; color: var(--acc-d); font: 600 13px var(--f); }

/* ---- пагинация ---- */
.pg { display: flex; gap: 6px; margin: 24px 0 0; }
.pg-i { padding: 8px 14px; border: 1px solid var(--line-2); border-radius: var(--r-s); font-size: 14px; }
.pg-i.on { background: var(--acc); border-color: var(--acc); color: #fff; font-weight: 600; }
.pg-i:hover:not(.on) { border-color: var(--acc); color: var(--acc-d); }

/* ---- пилюли ---- */
.pill { display: inline-block; padding: 5px 11px; border-radius: 20px; background: var(--bg-2); font-size: 13px; color: var(--ink-2); }
.pill-l:hover { background: var(--acc); color: #fff; }

/* ---- категория и справка ---- */
.cat-h, .inf-h { align-items: center; margin-bottom: 22px; }
.cat-t, .inf-t { flex: 1 1 400px; min-width: 0; }
.cat-m, .inf-m { flex: 1 1 420px; min-width: 0; }
.cat-i, .inf-i { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); }
.cat-l { margin-top: 20px; }
.upd { font-size: 13px; color: var(--ink-3); margin: 12px 0 0; }
.prose { max-width: 78ch; }
.prose h2:first-child { margin-top: .4em; }

/* ---- карточка товара ---- */
.pd { align-items: flex-start; margin-bottom: 8px; }
.pd-m { flex: 1 1 420px; min-width: 0; }
.pd-im { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-3); }
.pd-i { flex: 1 1 380px; min-width: 0; }
.pd-pr { margin: 10px 0 14px; }
.pd-b { margin: 18px 0; flex-wrap: wrap; }
.pd-u { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 14px; color: var(--ink-2); }
.pd-u li::before { content: "•"; color: var(--acc); font-weight: 700; margin-right: 8px; }

/* ---- таблицы, списки, заметки ---- */
.tw { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); margin: 14px 0 22px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 400px; }
.tbl th, .tbl td { padding: 11px 15px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { background: var(--bg-2); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl code { background: var(--bg-2); padding: 1px 5px; border-radius: 3px; font-size: 13px; }

.ls { margin: 0 0 1.1em; padding-left: 1.3em; }
.ls li { margin-bottom: .4em; }
.ls li::marker { color: var(--acc); }
.note { margin: 18px 0; padding: 14px 16px; border-left: 3px solid var(--acc); background: #fff6f1; border-radius: 0 var(--r-s) var(--r-s) 0; font-size: 14.5px; color: var(--ink-2); }

.faq { display: grid; gap: 8px; margin: 14px 0 22px; max-width: 80ch; }
.q { border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; }
.q summary { cursor: pointer; padding: 13px 16px; font-weight: 600; font-size: 14.5px; list-style: none; display: flex; justify-content: space-between; gap: 14px; }
.q summary::-webkit-details-marker { display: none; }
.q summary::after { content: "+"; color: var(--acc); font-size: 18px; line-height: 1; }
.q[open] summary::after { content: "−"; }
.qa { padding: 0 16px 14px; font-size: 14.5px; color: var(--ink-2); }

/* ---- 18+ шторка снизу ---- */
.ag { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff; border-top: 2px solid var(--acc); box-shadow: 0 -8px 30px -12px rgba(20, 23, 26, .35); }
.ag[hidden] { display: none; }
.ag-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 16px; flex-wrap: wrap; }
.ag-t { display: grid; gap: 2px; }
.ag-t b { font-size: 16px; }
.ag-t span { font-size: 14px; color: var(--ink-2); }

/* ---- подвал ---- */
.ft { margin-top: 34px; border-top: 1px solid var(--line); background: var(--bg-3); padding: 34px 0 26px; }
.ft-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 26px; }
.fc { display: grid; gap: 7px; align-content: start; }
.fc-t { font: 700 12.5px var(--f); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 3px; }
.fc a { font-size: 14px; color: var(--ink-2); }
.fc a:hover { color: var(--acc-d); }
.ft-lg { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.ft-lg p { margin: 0 0 .6em; max-width: 96ch; }
.a18 { display: inline-block; padding: 1px 7px; margin-right: 5px; border-radius: 3px; background: var(--acc-2); color: #fff; font-weight: 700; font-size: 12px; }
.ft-c { color: var(--line-2); }

.e404 { padding: 40px 0; }
.e404 .gc { margin-top: 28px; text-align: left; }

/* ---- адаптив ---- */
@media (max-width: 900px) {
  .hero-in, .cat-h, .inf-h, .pd { flex-wrap: wrap; }
  .hero-m, .cat-m, .inf-m { order: -1; }
  .hd-side .hd-l { display: none; }
}

@media (max-width: 720px) {
  .mb { display: block; }
  .hd-top { flex-wrap: wrap; gap: 10px; }
  .srch { order: 5; flex-basis: 100%; max-width: none; margin: 0 0 12px; }
  .hd-side { margin-left: auto; }
  .cbar { display: none; }
  .cbar.op { display: block; }
  .cbar-in { flex-direction: column; }
  .cbar-all { margin-left: 0; }
  .gp { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
  .pc-m { display: none; }
  .pr-l { font-size: 22px; }
}

@media (max-width: 460px) {
  :root { --pad: 13px; }
  .gc { grid-template-columns: 1fr 1fr; }
  .ag-in { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) { * { transition-duration: 0s !important; } }

@media print {
  .hd, .ft, .ag, .cbar, .srch { display: none; }
  body { color: #000; }
}