/* ------------------------------------------------------------------ */
/* Catalogue design templates                                           */
/* Loaded after app.css. Each template is scoped under                  */
/* body[data-theme="..."] and only overrides what it needs.             */
/* "classic" = base app.css, no overrides.                              */
/* ------------------------------------------------------------------ */

/* ================================================================== */
/* MODERN — clean white surfaces, cool grays, generous radii           */
/* ================================================================== */
body[data-theme="modern"] {
  --paper: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --ink: #16212e;
  --ink-soft: #5a6b7d;
  --ink-faint: #8b99a8;
  --line: #e4e8ef;
  --line-strong: #d3dae4;
  --brand-soft: #eaf1f6;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 18px;
  --shadow-1: 0 1px 2px rgba(22, 33, 46, 0.04), 0 8px 24px rgba(22, 33, 46, 0.07);
  --shadow-2: 0 2px 8px rgba(22, 33, 46, 0.06), 0 18px 44px rgba(22, 33, 46, 0.13);
}
body[data-theme="modern"] .btn { border-radius: 999px; }
body[data-theme="modern"] .cat-search .input { border-radius: 999px; }
body[data-theme="modern"] .product-card,
body[data-theme="modern"] .cat-tile { box-shadow: var(--shadow-1); border-color: transparent; }
body[data-theme="modern"] .product-card:hover,
body[data-theme="modern"] .cat-tile:hover { box-shadow: var(--shadow-2); }
body[data-theme="modern"] .cat-hero { background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
body[data-theme="modern"] .cat-nav a.is-active { background: var(--brand-soft); border-bottom-color: transparent; border-radius: 999px; }
body[data-theme="modern"] .section-label h2::after {
  content: ""; display: inline-block; width: 34px; height: 3px;
  margin-left: 10px; vertical-align: middle; border-radius: 2px; background: var(--accent);
}

/* ================================================================== */
/* BOLD — rugged industrial: squared corners, thick borders,           */
/* hard offset shadows, uppercase labels                               */
/* ================================================================== */
body[data-theme="bold"] {
  --paper: #efe9dc;
  --surface: #fbf8f1;
  --surface-2: #f3eee1;
  --line-strong: #c9c0aa;
  --radius-s: 0px;
  --radius-m: 0px;
  --radius-l: 0px;
}
body[data-theme="bold"] h1,
body[data-theme="bold"] h2,
body[data-theme="bold"] .brand__name { letter-spacing: 0.02em; }
body[data-theme="bold"] .cat-nav a {
  text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.08em;
  border-bottom-width: 3px;
}
body[data-theme="bold"] .product-card__code,
body[data-theme="bold"] .section-label a { text-transform: uppercase; letter-spacing: 0.09em; }
body[data-theme="bold"] .product-card,
body[data-theme="bold"] .cat-tile {
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(28, 42, 48, 0.85);
}
body[data-theme="bold"] .product-card:hover,
body[data-theme="bold"] .cat-tile:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(28, 42, 48, 0.85);
}
body[data-theme="bold"] .btn { border-radius: 0; border-width: 2px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; }
body[data-theme="bold"] .btn--brand { box-shadow: 3px 3px 0 rgba(28, 42, 48, 0.85); }
body[data-theme="bold"] .btn--brand:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(28, 42, 48, 0.85); }
body[data-theme="bold"] .cat-hero { border-bottom: 5px solid var(--accent); }
body[data-theme="bold"] .cat-hero img.cat-hero__bg { opacity: 0.18; mix-blend-mode: luminosity; }
body[data-theme="bold"] .cat-hero h1 { text-transform: uppercase; letter-spacing: 0.03em; }
body[data-theme="bold"] .search-bar .input,
body[data-theme="bold"] .input { border-width: 2px; border-color: var(--ink); border-radius: 0; }
body[data-theme="bold"] .spec-table th { text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.07em; }

/* ================================================================== */
/* SLEEK — modern dark interface                                       */
/* ================================================================== */
body[data-theme="sleek"] {
  --paper: #0e1318;
  --surface: #161d25;
  --surface-2: #1c242e;
  --ink: #e8edf2;
  --ink-soft: #9db0bf;
  --ink-faint: #66788a;
  --line: #263140;
  --line-strong: #33445a;
  --brand-soft: rgba(255, 255, 255, 0.06);
  --accent-soft: rgba(232, 113, 10, 0.14);
  --wa-soft: rgba(31, 175, 85, 0.14);
  --danger-soft: rgba(179, 55, 44, 0.18);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.4), 0 18px 44px rgba(0, 0, 0, 0.5);
}
body[data-theme="sleek"] a { color: var(--accent); }
body[data-theme="sleek"] a:hover { color: #ff8f2e; }
body[data-theme="sleek"] .cat-header { background: rgba(14, 19, 24, 0.92); backdrop-filter: blur(10px); border-bottom-color: var(--line); }
body[data-theme="sleek"] .cat-search .input { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
body[data-theme="sleek"] .cat-nav a.is-active { color: var(--accent); border-bottom-color: var(--accent); }
body[data-theme="sleek"] .cat-hero { background: radial-gradient(120% 160% at 80% -20%, rgba(var(--brand-rgb), 0.55), transparent 60%), linear-gradient(180deg, #131a21, #0e1318); }
body[data-theme="sleek"] .cat-hero img.cat-hero__bg { opacity: 0.16; }
body[data-theme="sleek"] .product-card,
body[data-theme="sleek"] .cat-tile { background: var(--surface); }
body[data-theme="sleek"] .product-card:hover { border-color: var(--line-strong); }
body[data-theme="sleek"] .pd-gallery__main,
body[data-theme="sleek"] .pd-thumbs button { background: var(--surface-2); }
body[data-theme="sleek"] .cat-footer { background: var(--surface); }
body[data-theme="sleek"] .float-enq { background: var(--wa); color: #fff; }
body[data-theme="sleek"] .toast { background: #e8edf2; color: #10161c; }
body[data-theme="sleek"] .empty-state svg { opacity: 0.5; }

/* ================================================================== */
/* ELEGANT — ivory paper, serif headings, hairline rules               */
/* ================================================================== */
body[data-theme="elegant"] {
  --paper: #f6f1e7;
  --surface: #fffdf7;
  --surface-2: #faf6ec;
  --ink: #2b2620;
  --ink-soft: #6d6355;
  --ink-faint: #998e7d;
  --line: #e6ddca;
  --line-strong: #d8ccb2;
  --radius-s: 2px;
  --radius-m: 3px;
  --radius-l: 4px;
  --shadow-1: 0 1px 2px rgba(43, 38, 32, 0.05), 0 10px 28px rgba(43, 38, 32, 0.07);
  --shadow-2: 0 2px 6px rgba(43, 38, 32, 0.07), 0 20px 48px rgba(43, 38, 32, 0.13);
}
body[data-theme="elegant"] h1,
body[data-theme="elegant"] h2,
body[data-theme="elegant"] h3,
body[data-theme="elegant"] .brand__name,
body[data-theme="elegant"] .section-label h2,
body[data-theme="elegant"] .cat-hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: 0.005em;
}
body[data-theme="elegant"] .product-card__code { letter-spacing: 0.14em; }
body[data-theme="elegant"] .cat-header { border-bottom: 1px solid var(--line-strong); }
body[data-theme="elegant"] .cat-nav a { font-size: 0.86rem; letter-spacing: 0.03em; }
body[data-theme="elegant"] .cat-nav a.is-active { border-bottom-color: var(--accent); }
body[data-theme="elegant"] .cat-hero { background: linear-gradient(120deg, var(--brand) 0%, var(--brand-2) 100%); }
body[data-theme="elegant"] .cat-hero img.cat-hero__bg { opacity: 0.22; filter: sepia(0.3); }
body[data-theme="elegant"] .product-card { transition: transform 200ms ease-out, box-shadow 200ms ease-out; }
body[data-theme="elegant"] .product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
body[data-theme="elegant"] .product-card__foot { border-top-style: double; border-top-width: 3px; }
body[data-theme="elegant"] .btn { border-radius: 2px; }
body[data-theme="elegant"] .spec-table td,
body[data-theme="elegant"] .spec-table th { border-color: var(--line); }