/**
 * "New Theme" (extension code: new_theme)
 *
 * OC4-native recreation of the OC3 "new" custom storefront theme's visual
 * design (colors, typography, spacing, component look). This is a genuine
 * re-creation against OC4's own Bootstrap 5 markup/classes -- it is NOT a
 * copy of the OC3 theme's Bootstrap 3/4 CSS (see
 * /home/fabricmedia/migration-audit/THEME_OC3_TO_OC4_MIGRATION.md for the
 * full asset-by-asset breakdown of what was ported vs. recreated vs. left
 * as stock "basic").
 *
 * Brand values below were extracted directly from the OC3 theme's
 * assets/css/main.css (frequency analysis of hex colors actually used on
 * buttons/links/accents, not the bundled Bootstrap framework defaults that
 * also live in that file):
 *   - primary brand blue: #2959D3 (190 occurrences on buttons/links/accents)
 *   - secondary accent blue: #8fd2ee (214 occurrences, backgrounds/hovers)
 *   - accent red (sale/special): #bf3334
 *   - body text: #333333 / headings: #121212
 * Typography: OC3 header referenced Google Fonts "Poppins" -- self-hosted
 * here via the Poppins .woff2 files already copied from the OC3 theme's
 * assets/fonts/ (no external Google Fonts dependency, which matters for a
 * multi-tenant SaaS storefront that must not depend on a third-party CDN
 * being reachable for every page render).
 */

/* ---------- Fonts (self-hosted from ported OC3 asset files) ---------- */
@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Poppins-Regular.woff2') format('woff2'),
       url('../fonts/Poppins-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Poppins-Medium.woff2') format('woff2'),
       url('../fonts/Poppins-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'),
       url('../fonts/Poppins-SemiBold.woff') format('woff');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Poppins-Bold.woff2') format('woff2'),
       url('../fonts/Poppins-Bold.woff') format('woff');
}

:root {
  --nt-primary: #2959D3;
  --nt-primary-dark: #1e46ac;
  --nt-accent: #8fd2ee;
  --nt-sale: #bf3334;
  --nt-heading: #121212;
  --nt-body: #333333;
  --nt-muted: #888888;
  --nt-border: #e5e5e5;
  --nt-bg-soft: #f5f8fe;
  --nt-radius: 10px;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--nt-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--nt-heading);
}

a { color: var(--nt-primary); }
a:hover { color: var(--nt-primary-dark); }

/* ---------- Buttons ---------- */
.btn-primary {
  background-color: var(--nt-primary);
  border-color: var(--nt-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--nt-primary-dark) !important;
  border-color: var(--nt-primary-dark) !important;
}
.btn-light {
  background-color: #fff;
  border: 1px solid var(--nt-border);
}
.btn-light:hover {
  background-color: var(--nt-bg-soft);
  border-color: var(--nt-accent);
}

/* ---------- Top utility bar + header (id="top" / <header>, common/header.twig) ---------- */
#top {
  background: var(--nt-heading);
  color: #fff;
  font-size: .85rem;
  padding: .4rem 0;
}
#top a { color: #fff; }
#top a:hover { color: var(--nt-accent); }

header {
  padding: 1rem 0;
  border-bottom: 1px solid var(--nt-border);
  background: #fff;
}
header #logo img { max-height: 46px; }
header #logo h1 a { color: var(--nt-heading); font-weight: 700; text-decoration: none; }

/* ---------- Nav / mega menu (common/menu.twig -- classes reused as-is) ---------- */
#menu.navbar {
  background: var(--nt-primary) !important;
  border-radius: var(--nt-radius);
  margin-bottom: 1.25rem;
}
#menu .nav-link,
#menu .navbar-nav .nav-item > a {
  color: #fff !important;
  font-weight: 500;
}
#menu .nav-link:hover { color: var(--nt-accent) !important; }
#menu .dropdown-menu {
  border: none;
  border-radius: 0 0 var(--nt-radius) var(--nt-radius);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
}
#menu .dropdown-item:hover { background: var(--nt-bg-soft); color: var(--nt-primary); }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  background: transparent;
  padding: .75rem 0;
  font-size: .9rem;
}

/* ---------- Product cards (product/thumb.twig) ---------- */
.product-thumb {
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius);
  overflow: hidden;
  background: #fff;
  transition: box-shadow .2s ease, transform .2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.product-thumb:hover {
  box-shadow: 0 10px 26px rgba(41, 89, 211, .14);
  transform: translateY(-3px);
}
.product-thumb .image {
  background: var(--nt-bg-soft);
  text-align: center;
  padding: 1rem;
}
.product-thumb .image img { max-height: 190px; object-fit: contain; }
.product-thumb .content { padding: 1rem; display: flex; flex-direction: column; flex: 1; }
.product-thumb .description h4 { font-size: 1rem; margin-bottom: .35rem; }
.product-thumb .description h4 a { color: var(--nt-heading); text-decoration: none; }
.product-thumb .description p { color: var(--nt-muted); font-size: .85rem; }
.product-thumb .price { margin-top: auto; padding-top: .5rem; }
.price-new { color: var(--nt-primary); font-weight: 700; font-size: 1.05rem; }
.price-old { color: var(--nt-muted); text-decoration: line-through; font-size: .85rem; margin-right: .35rem; }
.product-thumb .rating { color: var(--nt-accent); }
.product-thumb form .button {
  display: flex;
  gap: .4rem;
  margin-top: .6rem;
}
.product-thumb form .button button {
  flex: 1;
  border: 1px solid var(--nt-border);
  background: #fff;
  border-radius: 6px;
  padding: .4rem;
  color: var(--nt-primary);
}
.product-thumb form .button button:hover { background: var(--nt-primary); color: #fff; border-color: var(--nt-primary); }

/* ---------- Category / listing (product/category.twig) ---------- */
#product-category h1,
#product-info h1 { font-weight: 700; }

/* ---------- Product info page (CSS-only re-skin, core product.twig markup unchanged) ---------- */
#product-info .price-new { font-size: 1.6rem; }
#product-info .nav-tabs .nav-link.active { color: var(--nt-primary); border-color: var(--nt-border) var(--nt-border) #fff; }
#product-info .rating .fa-solid { color: #f4b400; }

/* ---------- Alerts ---------- */
.alert-success { border-left: 4px solid var(--nt-primary); }
.alert-danger { border-left: 4px solid var(--nt-sale); }

/* ---------- Footer (common/footer.twig) ---------- */
footer {
  background: #14171f;
  color: #cfd3dc;
  padding: 3rem 0 1.5rem;
  margin-top: 2rem;
}
footer h5 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1rem; }
footer a { color: #cfd3dc; }
footer a:hover { color: var(--nt-accent); }
footer hr { border-color: rgba(255, 255, 255, .12); }

/* ---------- New-theme-specific structural blocks (header.twig / footer.twig / home.twig overrides) ---------- */
.nt-announce {
  background: var(--nt-primary);
  color: #fff;
  text-align: center;
  font-size: .8rem;
  padding: .45rem 0;
}
.nt-social a {
  color: #fff;
  margin-left: .6rem;
  font-size: .9rem;
}
.nt-hero {
  background: linear-gradient(135deg, var(--nt-bg-soft), #fff);
  border-radius: var(--nt-radius);
  padding: 3rem 2rem;
  margin: 1.5rem 0;
  text-align: center;
}
.nt-hero h2 { font-size: 2rem; margin-bottom: .5rem; }
.nt-hero p { color: var(--nt-muted); margin-bottom: 1.25rem; }
.nt-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2rem 0 1rem;
}
.nt-section-title h3 { margin: 0; }
.nt-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.nt-feature {
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius);
  padding: 1.25rem;
  text-align: center;
}
.nt-feature i { color: var(--nt-primary); font-size: 1.5rem; margin-bottom: .5rem; display: block; }
.nt-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 2rem;
  padding-top: 1rem;
  font-size: .8rem;
  text-align: center;
  color: #8891a3;
}