/* ==========================================================
 Damatech.eu — Danfoss Sensing Solutions — styly kategorií
 Přidejte k obsahu souboru damatech-frekvencni-menice.css
 (do stejného pole Vlastní CSS v Shoptetu), nebo nahrajte
 jako druhý CSS soubor - obojí funguje.
 ========================================================== */

.ss-page {
 --ink:#26292C; --muted:#6B7280; --paper:#ffffff; --tint:#F3F6F7;
 --accent:#35586E; --line:#E5E7E8; --radius:8px;
 line-height:1.65; color:var(--ink);
}
.ss-page *, .ss-page *::before, .ss-page *::after { box-sizing:border-box; }

.ss-page a { text-decoration:none; color:inherit; }
.ss-page-foot a { color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line); }
.ss-page-foot a:hover { border-bottom-color:var(--accent); }

.ss-page h1, .ss-page h2, .ss-page h3 { font-weight:600; margin:0; letter-spacing:-.01em; }

.ss-label { font-family:ui-monospace,'SFMono-Regular','Consolas','Menlo',monospace; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }

/* HERO — parent */
.ss-hero { padding:6px 0 34px; border-bottom:1px solid var(--line); margin-bottom:36px; }
.ss-hero h1 { font-size:clamp(26px,3.4vw,34px); margin:8px 0 16px; }
.ss-hero p { font-size:15.5px; color:var(--muted); max-width:640px; margin:0 0 18px; }

.ss-facts { display:flex; flex-wrap:wrap; gap:6px 0; font-size:13px; color:var(--muted); }
.ss-facts span:not(:last-child)::after { content:"·"; margin:0 10px; color:var(--line); }
.ss-facts strong { color:var(--ink); font-weight:600; }

/* SECTION generic */
.ss-section { margin:44px 0; }
.ss-section > .ss-label { display:block; margin-bottom:8px; }
.ss-section h2 { font-size:21px; margin-bottom:6px; }
.ss-section-sub { font-size:14px; color:var(--muted); max-width:600px; margin:0 0 26px; }

/* SUBCATEGORY ROW LIST — parent */
.ss-rows { border-top:1px solid var(--line); }
.ss-row { display:grid; grid-template-columns:220px 1fr auto; gap:24px; align-items:center; padding:22px 4px; border-bottom:1px solid var(--line); transition:background .12s ease; }
.ss-row:hover { background:var(--tint); }
.ss-row h3 { font-size:16.5px; }
.ss-row .ss-row-desc { font-size:13.5px; color:var(--muted); max-width:480px; }
.ss-row .ss-row-spec { font-family:ui-monospace,'SFMono-Regular','Consolas','Menlo',monospace; font-size:11.5px; color:var(--muted); margin-top:6px; display:block; }
.ss-row .ss-arrow { font-family:ui-monospace,'SFMono-Regular','Consolas','Menlo',monospace; font-size:13px; color:var(--accent); white-space:nowrap; }
.ss-row .ss-arrow svg { width:13px; height:13px; vertical-align:-2px; margin-left:4px; transition:transform .12s ease; }
.ss-row:hover .ss-arrow svg { transform:translateX(3px); }

/* BENEFITS — parent */
.ss-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.ss-benefit .ss-b-num { font-family:ui-monospace,'SFMono-Regular','Consolas','Menlo',monospace; font-size:12px; color:var(--muted); display:block; margin-bottom:8px; }
.ss-benefit h3 { font-size:15px; margin-bottom:8px; }
.ss-benefit p { font-size:13.5px; color:var(--muted); margin:0; }

/* STEPS — parent foot */
.ss-page-foot .ss-steps { border-top:1px solid var(--line); }
.ss-page-foot .ss-step { display:grid; grid-template-columns:44px 1fr; gap:18px; padding:20px 0; border-bottom:1px solid var(--line); }
.ss-page-foot .ss-step-num { font-family:ui-monospace,'SFMono-Regular','Consolas','Menlo',monospace; font-size:14px; color:var(--muted); }
.ss-page-foot .ss-step h3 { font-size:15.5px; margin:0 0 6px; font-weight:600; }
.ss-page-foot .ss-step p { font-size:13.5px; color:var(--muted); margin:0; }

/* FAQ — parent foot */
.ss-page-foot .ss-faq-item { border-bottom:1px solid var(--line); }
.ss-page-foot details { padding:15px 0; }
.ss-page-foot summary { font-weight:600; font-size:15px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.ss-page-foot summary::-webkit-details-marker { display:none; }
.ss-page-foot summary::after { content:"+"; font-family:ui-monospace,monospace; font-size:18px; color:var(--muted); flex:none; }
.ss-page-foot details[open] summary::after { content:"–"; }
.ss-page-foot details p { font-size:13.5px; color:var(--muted); margin:10px 0 0; padding-right:26px; border-bottom:none; }

/* RELATED PILLS — parent foot */
.ss-page-foot .ss-related { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.ss-page-foot .ss-related a { border:1px solid var(--line); border-radius:999px; padding:7px 15px; font-size:12.5px; font-family:ui-monospace,'SFMono-Regular','Consolas','Menlo',monospace; color:var(--ink); }
.ss-page-foot .ss-related a:hover { border-color:var(--accent); color:var(--accent); }

/* BREADCRUMB — subcategories */
.ss-crumb { display:flex; gap:8px; align-items:center; font-family:ui-monospace,'SFMono-Regular','Consolas','Menlo',monospace; font-size:12px; color:var(--muted); margin-bottom:20px; }
.ss-crumb a { border-bottom:1px solid var(--line); }
.ss-crumb a:hover { color:var(--accent); border-color:var(--accent); }

/* HERO — subcategories (2-col with image) */
.ss-hero-sub { display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:center; padding-bottom:30px; border-bottom:1px solid var(--line); margin-bottom:30px; }
.ss-hero-sub h1 { font-size:clamp(24px,3vw,30px); margin:8px 0 12px; }
.ss-hero-sub p { font-size:14.5px; color:var(--muted); margin:0 0 16px; max-width:480px; }
.ss-hero-img { border-radius:var(--radius); overflow:hidden; background:var(--tint); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); }
.ss-hero-img img { width:100%; height:100%; object-fit:cover; display:block; }
.ss-img-note { font-family:ui-monospace,'SFMono-Regular','Consolas','Menlo',monospace; font-size:11px; color:var(--muted); text-align:center; padding:10px; }

/* CATEGORY ROWS — subcategories */
.ss-cat-rows { border-top:1px solid var(--line); }
.ss-cat-row { display:grid; grid-template-columns:220px 1fr; gap:20px; padding:20px 4px; border-bottom:1px solid var(--line); }
.ss-cat-row h3 { font-size:15.5px; }
.ss-cat-row p { font-size:13.5px; color:var(--muted); margin:0; }

/* CONFIG GRID — subcategories */
.ss-config-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.ss-config-item { padding:16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.ss-c-label { font-family:ui-monospace,'SFMono-Regular','Consolas','Menlo',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.ss-config-item h3 { font-size:14px; margin:6px 0 6px; font-weight:600; }
.ss-config-item p { font-size:12.5px; color:var(--muted); margin:0; }

/* SIBLINGS NAV — subcategories */
.ss-siblings { display:flex; gap:8px; flex-wrap:wrap; margin-top:30px; }
.ss-siblings a { border:1px solid var(--line); border-radius:999px; padding:7px 15px; font-size:12.5px; font-family:ui-monospace,'SFMono-Regular','Consolas','Menlo',monospace; }
.ss-siblings a:hover { border-color:var(--accent); color:var(--accent); }

/* RESPONSIVE */
@media (max-width:760px) {
.ss-row { grid-template-columns:1fr; gap:6px; }
.ss-benefits { grid-template-columns:1fr; gap:22px; }
.ss-hero-sub { grid-template-columns:1fr; }
.ss-config-grid { grid-template-columns:1fr 1fr; }
.ss-cat-row { grid-template-columns:1fr; gap:4px; }
}
@media (max-width:560px) {
.ss-page-foot .ss-step { grid-template-columns:32px 1fr; }
}
@media (max-width:480px) {
.ss-config-grid { grid-template-columns:1fr; }
}