/*
Theme Name: Need Peacoat
Description: Naval-heritage child theme for Storefront. White base, spec-led product cards.
Author: Need Peacoat
Template: storefront
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: needpeacoat
*/

:root {
  --np-ink: #172236;
  --np-navy: #1B2A44;
  --np-brass: #8A6B2F;
  --np-slate: #5C6672;
  --np-rule: #DDE0E4;
  --np-paper: #FFFFFF;
}

body,
body.woocommerce,
.site,
.site-content {
  background-color: var(--np-paper);
  color: var(--np-ink);
}

body, button, input, select, textarea {
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: var(--np-ink);
}

h1, h2, h3, h4, .site-title, .storefront-product-section .section-title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--np-ink);
}

a { color: var(--np-navy); }
a:hover, a:focus { color: var(--np-brass); }

.site-header {
  background-color: var(--np-paper);
  border-bottom: 1px solid var(--np-ink);
  padding-top: 1.4em;
  padding-bottom: 1.1em;
}

.site-header .site-title a {
  font-family: Georgia, serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--np-ink);
}

.storefront-primary-navigation,
.main-navigation ul.menu > li > a {
  background-color: var(--np-paper);
  color: var(--np-ink);
  font-size: 0.82em;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.main-navigation ul.menu > li > a:hover { color: var(--np-brass); }

.site-header-cart .cart-contents { color: var(--np-brass); }

ul.products li.product {
  border: 1px solid var(--np-rule);
  padding: 0;
  text-align: left;
}

ul.products li.product img {
  margin: 0;
  border-bottom: 1px solid var(--np-rule);
}

ul.products li.product .woocommerce-loop-product__title {
  font-family: Georgia, serif;
  font-size: 1em;
  padding: 0.7em 0.9em 0.3em;
  margin: 0;
  color: var(--np-ink);
}

ul.products li.product .price {
  display: block;
  padding: 0 0.9em 0.9em;
  font-family: Georgia, serif;
  font-size: 1.1em;
  color: var(--np-brass);
}

ul.products li.product .button {
  margin: 0 0.9em 1em;
}

.np-spec {
  padding: 0 0.9em;
  margin: 0 0 0.6em;
  font-size: 0.76em;
  line-height: 1.9;
  color: var(--np-slate);
}

.np-spec div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--np-rule);
}

.np-spec div:last-child { border-bottom: 0; }
.np-spec .np-spec-value { color: var(--np-ink); }

.np-single-spec {
  margin: 1.4em 0;
  border-top: 1px solid var(--np-ink);
  font-size: 0.88em;
}

.np-single-spec div {
  display: flex;
  justify-content: space-between;
  padding: 0.5em 0;
  border-bottom: 1px solid var(--np-rule);
}

.np-single-spec .np-spec-label {
  color: var(--np-slate);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.86em;
}

.np-filter {
  margin: 0 0 1.6em;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--np-rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
}

.np-filter .np-filter-label {
  font-size: 0.74em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--np-slate);
  margin-right: 0.4em;
}

.np-filter a {
  font-size: 0.8em;
  padding: 0.25em 0.85em;
  border: 1px solid var(--np-rule);
  color: var(--np-slate);
  text-decoration: none;
}

.np-filter a:hover,
.np-filter a.is-active {
  background: var(--np-brass);
  border-color: var(--np-brass);
  color: #fff;
}

.woocommerce-breadcrumb {
  font-size: 0.78em;
  letter-spacing: 0.04em;
  color: var(--np-slate);
}

button.button, input.button, a.button,
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button {
  background-color: var(--np-ink);
  color: #fff;
  border-radius: 0;
  font-size: 0.84em;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 400;
}

button.button:hover, a.button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce input.button:hover {
  background-color: var(--np-brass);
  color: #fff;
}

.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: var(--np-brass);
}

.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: var(--np-ink);
}

.single-product div.product .price {
  font-family: Georgia, serif;
  color: var(--np-brass);
}

.site-footer {
  background-color: var(--np-ink);
  color: #C6CCD4;
}

.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--np-brass); }

.site-info { border-top: 1px solid rgba(255,255,255,0.14); }

@media (max-width: 767px) {
  .np-spec { font-size: 0.8em; }
  .np-filter { gap: 0.4em; }
}

.np-hero {
  border-bottom: 1px solid var(--np-rule);
  padding: 4.2em 0 3.6em;
}

.np-hero-eyebrow {
  font-size: 0.72em;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--np-brass);
  margin: 0 0 1.1em;
}

.np-hero-heading {
  font-family: Georgia, serif;
  font-size: 3.1em;
  line-height: 1.08;
  margin: 0 0 0.5em;
  color: var(--np-ink);
  max-width: 14em;
}

.np-hero-sub {
  font-size: 1.05em;
  line-height: 1.7;
  color: var(--np-slate);
  max-width: 34em;
  margin: 0 0 1.8em;
}

.np-hero-cta { margin: 0; }

.np-marks {
  border-bottom: 1px solid var(--np-rule);
  padding: 2.2em 0;
}

.np-marks .col-full {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4em;
}

.np-mark-title {
  display: block;
  font-family: Georgia, serif;
  font-size: 1.02em;
  color: var(--np-ink);
  margin-bottom: 0.35em;
}

.np-mark-body {
  display: block;
  font-size: 0.88em;
  line-height: 1.65;
  color: var(--np-slate);
}

.np-home-products { padding-top: 3em; }

.np-section-title {
  font-family: Georgia, serif;
  font-size: 1.5em;
  margin: 0 0 1.1em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--np-ink);
}

.np-home-copy { margin-bottom: 2.6em; }

.np-empty { color: var(--np-slate); font-style: italic; }

@media (max-width: 767px) {
  .np-hero { padding: 2.6em 0 2.2em; }
  .np-hero-heading { font-size: 2.05em; }
  .np-marks .col-full { grid-template-columns: 1fr; gap: 1.4em; }
}