/* ============================================================
   Steel Shakti — Global Design System (Minimal Light Theme)
   ------------------------------------------------------------
   Tokens -> base -> spacing -> breadcrumb/banner -> components
   Single accent: emerald green on white / light-gray surfaces.
   Compact by design: smaller type, tighter buttons and cards.
   ============================================================ */

/* ------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------ */
:root {
  /* Brand accent */
  --primary-color: #16a34a;
  --primary-dark: #15803d;
  --primary-darker: #166534;
  --primary-light: #bbf7d0;
  --primary-100: #dcfce7;
  --primary-50: #f0fdf4;

  /* Neutrals */
  --ink: #0f172a;
  --text: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --line-soft: #f1f5f9;
  --bg: #ffffff;
  --bg-soft: #f8fafc;

  /* Radius & shadow */
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow: 0 6px 18px rgba(15, 23, 42, .07);
  --shadow-lg: 0 16px 34px rgba(15, 23, 42, .12);

  /* Compact spacing scale (replaces the old 5px clamps) */
  --section-space: .75rem;
  --section-space-sm: .5rem;
  --heading-space: .5rem;
  --gap-sm: .5rem;
  --gap-md: .75rem;
  --footer-top-space: 0;

  /* Page backgrounds used by breadcrumb wrappers and light sections */
  --bg-light: #f8fafc;
}

/* ------------------------------------------------------------
   2. Base
   ------------------------------------------------------------ */
html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.25;
}

p { margin-top: 0; margin-bottom: var(--gap-md); }
ul, ol { margin-top: 0; margin-bottom: var(--gap-md); }
a { color: var(--primary-dark); }
a:hover { color: var(--primary-darker); }

::selection { background: var(--primary-100); color: var(--primary-darker); }

img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------
   3. Compact spacing normalization (site-wide safety net)
   Keeps sections, headings and grid gutters tight without the
   old destructive 5px !important clamping.
   ------------------------------------------------------------ */
section,
.section {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

/* Clamp Bootstrap vertical padding/margin utilities to the scale */
.py-5, .py-4, .py-3, .py-2, .py-1 { padding-top: var(--section-space) !important; padding-bottom: var(--section-space) !important; }
.my-5, .my-4, .my-3, .my-2, .my-1 { margin-top: var(--gap-sm) !important; margin-bottom: var(--gap-sm) !important; }
.mt-5, .mt-4, .mt-3, .mt-2, .mt-1 { margin-top: var(--gap-sm) !important; }
.mb-5, .mb-4, .mb-3, .mb-2, .mb-1 { margin-bottom: var(--gap-sm) !important; }
.pt-5, .pt-4, .pt-3, .pt-2, .pt-1 { padding-top: var(--section-space) !important; }
.pb-5, .pb-4, .pb-3, .pb-2, .pb-1 { padding-bottom: var(--section-space) !important; }

/* Grid gutters: tighter than Bootstrap defaults */
.row { --bs-gutter-y: var(--gap-md); }
.row.g-2 { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
.row.g-3 { --bs-gutter-y: var(--gap-md); }
.row.g-4 { --bs-gutter-y: var(--gap-md); }
.row.g-5 { --bs-gutter-y: var(--gap-md); }

/* Heading + paragraph rhythm */
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: var(--heading-space); }
p, ul, ol, .lead { margin-bottom: var(--gap-md); }

/* Neutral light/white containers: no extra vertical bulk */
.bg-light, .bg-white { padding-top: var(--section-space); padding-bottom: var(--section-space); }

/* Navbar tightening (header handles its own look) */
.navbar { padding-top: var(--section-space-sm); padding-bottom: var(--section-space-sm); }
.navbar .nav-link { padding-top: var(--section-space-sm); padding-bottom: var(--section-space-sm); }
.navbar.shadow { box-shadow: none !important; }

/* No-gap between header and first section */
header + main { padding-top: 0 !important; }
main { padding-top: 0 !important; margin-top: 0 !important; }
main > *:first-child { margin-top: 0 !important; }

.footer { margin-top: var(--footer-top-space); }

@media (max-width: 767.98px) {
  section, .section { padding-top: var(--section-space-sm); padding-bottom: var(--section-space-sm); }
}

/* ------------------------------------------------------------
   4. Buttons — compact, single accent, modern
   ------------------------------------------------------------ */
.btn {
  --bs-btn-padding-y: .45rem;
  --bs-btn-padding-x: 1.05rem;
  --bs-btn-font-size: .9rem;
  --bs-btn-border-radius: var(--radius-sm);
  font-weight: 600;
  line-height: 1.4;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.btn-lg {
  --bs-btn-padding-y: .6rem;
  --bs-btn-padding-x: 1.4rem;
  --bs-btn-font-size: 1rem;
}

.btn-sm {
  --bs-btn-padding-y: .3rem;
  --bs-btn-padding-x: .75rem;
  --bs-btn-font-size: .8rem;
}

.btn-primary,
.btn-success {
  --bs-btn-bg: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-bg: var(--primary-dark);
  --bs-btn-hover-border-color: var(--primary-dark);
  --bs-btn-active-bg: var(--primary-darker);
  --bs-btn-active-border-color: var(--primary-darker);
  --bs-btn-disabled-bg: var(--primary-color);
  --bs-btn-disabled-border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(22, 163, 74, .18);
}

.btn-outline-primary,
.btn-outline-success {
  --bs-btn-color: var(--primary-dark);
  --bs-btn-border-color: var(--primary-dark);
  --bs-btn-hover-bg: var(--primary-color);
  --bs-btn-hover-border-color: var(--primary-color);
  --bs-btn-active-bg: var(--primary-darker);
  --bs-btn-active-border-color: var(--primary-darker);
}

.btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(22, 163, 74, .2); }
.btn-primary:hover, .btn-success:hover { transform: translateY(-1px); }

/* ------------------------------------------------------------
   5. Cards — light, subtle border, soft shadow
   ------------------------------------------------------------ */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--bg);
}

.card-body { padding: 1rem 1.1rem; }
.card-title { font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.card-text { color: var(--muted); font-size: .9rem; }

/* ------------------------------------------------------------
   6. Forms — compact and consistent
   ------------------------------------------------------------ */
.form-control,
.form-select {
  border-color: var(--line);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  padding: .45rem .7rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 .2rem rgba(22, 163, 74, .12);
}

.form-label { font-size: .82rem; font-weight: 600; color: var(--text); margin-bottom: .3rem; }
.form-text { font-size: .78rem; color: var(--muted); }

/* ------------------------------------------------------------
   7. Badges
   ------------------------------------------------------------ */
.badge {
  font-size: .72rem;
  font-weight: 600;
  padding: .35em .7em;
  line-height: 1.1;
}

/* ------------------------------------------------------------
   8. Breadcrumb
   ------------------------------------------------------------ */
div.breadcrumb {
  background: var(--bg-light);
  padding: var(--gap-sm) 0;
  margin: 0;
}

ol.breadcrumb {
  background: transparent !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

nav[aria-label="breadcrumb"] ol.breadcrumb,
nav[aria-label="breadcrumb"] .breadcrumb-item,
nav[aria-label="breadcrumb"] .breadcrumb-item a {
  font-size: 12.5px !important;
  line-height: 1.4;
}

nav[aria-label="breadcrumb"] { margin: 0 !important; }

.breadcrumb-item.active { color: var(--muted); }
.breadcrumb-item a { color: var(--primary-dark); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--line); }

/* ------------------------------------------------------------
   9. Hero / banner pages — compact vertical rhythm
   ------------------------------------------------------------ */
.hero-section,
.banner,
.page-hero,
.page-banner {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

/* ------------------------------------------------------------
   10. Admin banner carousel
   ------------------------------------------------------------ */
.ss-admin-banners {
  position: relative;
  background: transparent;
  border: 0;
}

.ss-admin-banners .carousel { border: 0; }
.ss-admin-banners .carousel-inner { line-height: 0; }
.ss-admin-banners img.banner-img { display: block; width: 100%; height: auto; }

.ss-admin-banners .banner-caption {
  position: absolute;
  z-index: 3;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  padding: 8px 12px;
  max-width: 60%;
}

.ss-admin-banners .banner-title { margin: 0 0 8px; font-weight: 800; }
.ss-admin-banners .banner-cta-wrap { margin-top: 6px; }
.ss-admin-banners .banner-cta { box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }

.ss-admin-banners .pos-left { left: 3%; top: 50%; transform: translateY(-50%); text-align: left; }
.ss-admin-banners .pos-right { right: 3%; top: 50%; transform: translateY(-50%); text-align: right; }
.ss-admin-banners .pos-center { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.ss-admin-banners .pos-left-top { left: 3%; top: 6%; transform: none; text-align: left; }
.ss-admin-banners .pos-right-top { right: 3%; top: 6%; transform: none; text-align: right; }
.ss-admin-banners .cta-left .banner-cta-wrap { text-align: left; }
.ss-admin-banners .cta-right .banner-cta-wrap { text-align: right; }

@media (max-width: 991.98px) {
  .ss-admin-banners .banner-caption { max-width: 86%; padding: 6px 10px; }
}

/* ------------------------------------------------------------
   11. Category marquee strip (category quick-nav)
   ------------------------------------------------------------ */
.cat-marquee-section { padding: 0 !important; margin: 0 !important; }
.cat-marquee { width: 100%; overflow: hidden; background: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cat-track { display: inline-flex; white-space: nowrap; gap: 24px; animation: catScroll var(--cat-speed, 30s) linear infinite; padding: 10px 14px; }
.cat-marquee:hover .cat-track { animation-play-state: paused; }
.cat-item { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--bg-soft); gap: 6px; }
.cat-img { width: 64px; height: 64px; border-radius: 50%; background-color: var(--primary-50); background-position: center; background-repeat: no-repeat; background-size: cover; border: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.cat-name { font-size: 11px; line-height: 1; background: var(--bg-soft); border: 1px solid var(--line); padding: 5px 8px; border-radius: 6px; color: var(--text); }
@keyframes catScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------------------------------------------------------
   12. Compact "About" band (used on content pages)
   ------------------------------------------------------------ */
.about-mini { background: transparent; color: var(--text); padding: 12px 0; }
.about-mini-wrap { display: flex; align-items: center; gap: 14px; justify-content: space-between; flex-wrap: wrap; }
.about-mini-left { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.about-mini-left i { color: var(--primary-color); }
.about-mini-desc { flex: 1 1 100%; color: var(--muted); font-size: 13px; line-height: 1.4; margin: 2px 0 4px; }
.about-mini-items { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; flex-wrap: wrap; }
.about-mini .mini-item { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink); padding: 6px 10px; border-radius: 8px; font-size: 12px; white-space: nowrap; }
.about-mini .mini-item i { color: var(--primary-color); }
.about-mini-cta .btn { padding: 6px 12px; font-size: 12px; }

/* ------------------------------------------------------------
   13. Shared helpers
   ------------------------------------------------------------ */
.text-accent { color: var(--primary-dark) !important; }
.bg-accent-soft { background: var(--primary-50); }
.text-dark { color: var(--ink); }

/* Sticky footer layout */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
footer.footer { margin-top: auto; }

/* Compact product card baseline (pages may refine) */
.product-card { display: flex; flex-direction: column; }