/*
Theme Name: Nova Noir
Theme URI: https://example.com/nova-noir
Author: Studio Nova
Author URI: https://example.com
Description: A dark, editorial WooCommerce storefront theme for fashion, beauty, nightlife, and lifestyle shops. Built with isolated theme tokens and Customizer controls so store owners can change the look without unsafe CSS overrides.
Version: 1.0.0
Requires at least: 6.1
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nova-noir
Tags: e-commerce, dark, custom-logo, featured-images, translation-ready
*/

:root {
  --nn-ink: #0d0a12;
  --nn-surface: #17111d;
  --nn-surface-2: #211628;
  --nn-line: rgba(255, 239, 231, .14);
  --nn-text: #f8e9df;
  --nn-muted: #b6a4ad;
  --nn-accent: #e7a47c;
  --nn-accent-2: #c23874;
  --nn-radius: 2px;
  --nn-heading: "Playfair Display", Georgia, serif;
  --nn-body: "DM Sans", Arial, sans-serif;
  --nn-max: 1360px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--nn-ink);
  color: var(--nn-text);
  font-family: var(--nn-body);
  font-size: 16px;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--nn-accent); }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip: auto !important;
  clip-path: none;
  height: auto;
  width: auto;
  left: 10px;
  top: 10px;
  padding: 12px 16px;
  background: var(--nn-accent);
  color: var(--nn-ink);
  z-index: 9999;
}
.nn-container { width: min(calc(100% - 48px), var(--nn-max)); margin-inline: auto; }
.nn-eyebrow {
  color: var(--nn-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.nn-display { font-family: var(--nn-heading); font-weight: 400; line-height: .98; }
.nn-button, .button, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--nn-radius);
  padding: 12px 18px;
  background: var(--nn-accent);
  color: var(--nn-ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.nn-button:hover, .button:hover, button:hover { background: var(--nn-text); color: var(--nn-ink); transform: translateY(-2px); }
.nn-button--ghost { border-color: var(--nn-line); background: transparent; color: var(--nn-text); }
.nn-button--ghost:hover { border-color: var(--nn-accent); color: var(--nn-accent); background: transparent; }
.nn-announcement {
  padding: 8px 20px;
  background: var(--nn-accent);
  color: var(--nn-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .17em;
  text-align: center;
  text-transform: uppercase;
}
.nn-header { border-bottom: 1px solid var(--nn-line); background: rgba(13,10,18,.96); }
.nn-header--left .nn-nav { margin-left: 32px; margin-right: auto; }
.nn-header__row { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.nn-brand { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.nn-brand__name { font-family: var(--nn-heading); font-size: 25px; font-style: italic; }
.nn-brand__tag { color: var(--nn-accent); font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.nn-nav { display: flex; justify-content: center; gap: 26px; margin: 0 auto; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.nn-nav a { color: var(--nn-muted); }
.nn-nav a:hover, .current-menu-item > a { color: var(--nn-text); }
.nn-header__actions { display: flex; align-items: center; gap: 14px; }
.nn-search { display: flex; align-items: center; border-bottom: 1px solid var(--nn-line); }
.nn-search input { width: 155px; border: 0; outline: 0; padding: 8px 0; background: transparent; color: var(--nn-text); font-size: 12px; }
.nn-search button { padding: 7px 0 7px 10px; border: 0; background: transparent; color: var(--nn-muted); letter-spacing: 0; }
.nn-icon-link { color: var(--nn-muted); font-size: 12px; white-space: nowrap; }
.nn-cart-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin-left: 4px; padding: 2px 5px; border-radius: 50%; background: var(--nn-accent-2); color: #fff; font-size: 10px; }
.nn-menu-toggle { display: none; border: 0; padding: 8px; background: transparent; color: var(--nn-text); }
.nn-hero { display: grid; grid-template-columns: 1.35fr .8fr; gap: 18px; padding: 18px 0 110px; }
.nn-hero__main, .nn-tile { position: relative; overflow: hidden; min-height: 560px; background: radial-gradient(circle at 70% 20%, #43204b 0, #20142e 35%, #17111d 73%); }
.nn-hero__main::after, .nn-tile::after { content: ""; position: absolute; inset: 9%; border: 1px solid rgba(231,164,124,.28); border-radius: 50%; transform: rotate(-12deg); pointer-events: none; }
.nn-hero__copy { position: absolute; z-index: 1; left: 7%; bottom: 9%; max-width: 570px; }
.nn-hero h1 { margin: 20px 0; font-size: clamp(58px, 8vw, 116px); }
.nn-hero h1 em { color: var(--nn-accent); }
.nn-hero p { max-width: 450px; color: var(--nn-muted); }
.nn-hero__side { display: grid; grid-template-rows: 1.15fr .85fr; gap: 18px; }
.nn-tile { min-height: 270px; background: #d4a3a3; color: #211526; }
.nn-tile--dark { background: #24182f; color: var(--nn-text); }
.nn-tile__copy { position: absolute; inset: auto 9% 9%; z-index: 1; }
.nn-tile h2 { max-width: 390px; margin: 14px 0; font-size: clamp(32px, 4vw, 58px); }
.nn-tile--dark h2 { font-size: 29px; }
.nn-section { padding: 0 0 110px; }
.nn-section__head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.nn-section h2 { margin: 7px 0 0; font-size: clamp(38px, 5vw, 62px); }
.nn-link { border-bottom: 1px solid var(--nn-accent); color: var(--nn-accent); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.nn-moods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.nn-mood { display: flex; align-items: end; min-height: 280px; padding: 24px; background: linear-gradient(135deg, #69153e, #25122d); }
.nn-mood:nth-child(2) { background: linear-gradient(135deg, #3d2560, #17111d); }
.nn-mood:nth-child(3) { background: linear-gradient(135deg, #59401d, #221723); }
.nn-mood h3 { margin: 6px 0 0; font-family: var(--nn-heading); font-size: 34px; font-weight: 400; }
.nn-product-grid { display: grid; grid-template-columns: repeat(var(--nn-columns, 4), 1fr); gap: 16px; }
.nn-product { position: relative; min-width: 0; }
.nn-product__media { position: relative; min-height: 320px; overflow: hidden; background: linear-gradient(150deg, #502040, #1e172e); }
.nn-product:nth-child(2n) .nn-product__media { background: linear-gradient(150deg, #312453, #18141e); }
.nn-product:nth-child(3n) .nn-product__media { background: linear-gradient(150deg, #59421f, #1d1720); }
.nn-product__media::after { content: ""; position: absolute; inset: 15%; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
.nn-product__quick { position: absolute; right: 14px; bottom: 14px; z-index: 1; opacity: 0; transform: translateY(6px); }
.nn-product:hover .nn-product__quick { opacity: 1; transform: none; }
.nn-product__meta { padding: 14px 0 0; }
.nn-product__meta h3 { margin: 0 0 5px; font-size: 14px; font-weight: 500; }
.nn-product__price { color: var(--nn-accent); font-size: 13px; }
.nn-product__rating { color: var(--nn-accent); font-size: 12px; letter-spacing: .1em; }
.nn-journal { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; align-items: center; padding: 38px; background: var(--nn-surface); }
.nn-journal__art { min-height: 300px; background: radial-gradient(circle at 50% 40%, #b84b76, #321a46 47%, #17111d 74%); }
.nn-journal h2 { max-width: 510px; margin: 16px 0 24px; font-size: clamp(44px, 6vw, 80px); }
.nn-journal p { max-width: 470px; color: var(--nn-muted); }
.nn-footer { border-top: 1px solid var(--nn-line); padding: 60px 0 32px; background: #100c15; }
.nn-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; }
.nn-footer h3 { margin: 0 0 14px; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; }
.nn-footer p, .nn-footer li { color: var(--nn-muted); font-size: 13px; }
.nn-footer ul { list-style: none; margin: 0; padding: 0; }
.nn-footer li + li { margin-top: 8px; }
.nn-footer__bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 60px; padding-top: 18px; border-top: 1px solid var(--nn-line); color: var(--nn-muted); font-size: 11px; }
.nn-page { padding: 80px 0 120px; }
.nn-page__heading { margin-bottom: 48px; }
.nn-page__heading h1 { margin: 8px 0 0; font-size: clamp(50px, 7vw, 100px); }
.nn-breadcrumb { color: var(--nn-muted); font-size: 12px; }
.woocommerce .woocommerce-breadcrumb, .woocommerce .woocommerce-result-count { color: var(--nn-muted); font-size: 12px; }
.woocommerce span.onsale { min-height: auto; min-width: auto; padding: 8px 11px; border-radius: 0; background: var(--nn-accent-2); color: #fff; font-size: 10px; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
.woocommerce ul.products { display: grid; grid-template-columns: repeat(var(--nn-columns, 4), 1fr); gap: 26px 16px; margin: 30px 0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product { float: none; width: auto; margin: 0; }
.woocommerce ul.products li.product a img { margin: 0 0 14px; background: var(--nn-surface); }
.woocommerce ul.products li.product .price { color: var(--nn-accent); }
.woocommerce ul.products li.product .button { margin-top: 12px; }
.woocommerce div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.woocommerce div.product div.images, .woocommerce div.product div.summary { width: auto; float: none; }
.woocommerce div.product div.images img { background: var(--nn-surface); }
.woocommerce div.product .product_title { font-family: var(--nn-heading); font-size: clamp(42px, 5vw, 76px); font-weight: 400; line-height: 1; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--nn-accent); font-size: 20px; }
.woocommerce div.product form.cart { display: flex; gap: 12px; }
.woocommerce div.product form.cart .quantity .qty { width: 70px; height: 44px; border: 1px solid var(--nn-line); background: transparent; color: var(--nn-text); text-align: center; }
.woocommerce div.product form.cart .button { height: 44px; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--nn-accent); background: var(--nn-surface); color: var(--nn-text); }
.woocommerce-cart-form, .cart-collaterals, .woocommerce-checkout #customer_details, .woocommerce-checkout-review-order { color: var(--nn-text); }
.woocommerce table.shop_table { border-color: var(--nn-line); border-radius: 0; }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-color: var(--nn-line); }
input, select, textarea { border: 1px solid var(--nn-line); border-radius: 0; padding: 12px; background: var(--nn-surface); color: var(--nn-text); }
@media (max-width: 900px) {
  .nn-nav { display: none; position: absolute; top: 84px; right: 24px; left: 24px; z-index: 10; flex-direction: column; gap: 0; padding: 18px; background: var(--nn-surface); border: 1px solid var(--nn-line); }
  .nn-nav.is-open { display: flex; }
  .nn-nav a { padding: 11px 0; border-bottom: 1px solid var(--nn-line); }
  .nn-menu-toggle { display: inline-flex; }
  .nn-search { display: none; }
  .nn-hero { grid-template-columns: 1fr; padding-bottom: 80px; }
  .nn-hero__main { min-height: 520px; }
  .nn-hero__side { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .nn-tile { min-height: 250px; }
  .nn-product-grid, .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .nn-journal { grid-template-columns: 1fr; }
  .nn-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .woocommerce div.product { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 560px) {
  .nn-container { width: min(calc(100% - 30px), var(--nn-max)); }
  .nn-header__row { min-height: 70px; }
  .nn-brand__name { font-size: 21px; }
  .nn-brand__tag { display: none; }
  .nn-header__actions { gap: 8px; }
  .nn-hero__side, .nn-moods, .nn-footer__grid { grid-template-columns: 1fr; }
  .nn-hero h1 { font-size: 58px; }
  .nn-hero__main { min-height: 460px; }
  .nn-tile { min-height: 230px; }
  .nn-section { padding-bottom: 75px; }
  .nn-product-grid, .woocommerce ul.products { gap: 24px 10px; }
  .nn-product__media { min-height: 230px; }
  .nn-journal { padding: 20px; }
  .nn-footer__bottom { flex-direction: column; margin-top: 40px; }
}