/*
Theme Name: Spooki
Theme URI: https://spooki.co.uk
Author: Nick Wolfe
Description: A dark Victorian gothic WooCommerce theme for SPOOKI — professional fake blood and special-effects props for Halloween, theatre, film and TV production. Built to replicate the client's approved Shopify design in WordPress + WooCommerce.
Version: 2.8
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: spooki
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
  --spooki-bg: #0b0a09;
  --spooki-bg-panel: #121010;
  --spooki-red: #9c1c1c;
  --spooki-red-bright: #b3241f;
  --spooki-red-dark: #4a0a0a;
  --spooki-bar-bg: linear-gradient(180deg, #6e1414, #4a0a0a);
  --spooki-gold: #c9a961;
  --spooki-gold-soft: #d4af6a;
  --spooki-gold-line: #7a6230;
  --spooki-cream: #e9ddc4;
  --spooki-cream-dim: #b9ab8e;
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: Georgia, 'Times New Roman', serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --container-width: 1200px;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--spooki-bg); }
body {
  margin: 0;
  background: var(--spooki-bg);
  color: var(--spooki-cream);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--spooki-gold-soft); text-decoration: none; }
a:hover { color: var(--spooki-cream); }
ul { list-style: none; margin: 0; padding: 0; }
button, input, textarea, select { font-family: var(--font-body); }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 32px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
}

/* Visible keyboard focus (accessibility floor) */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--spooki-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* =========================================================
   ANNOUNCEMENT BAR
   ========================================================= */
.spooki-announcement {
  background: var(--spooki-bar-bg);
  color: var(--spooki-cream);
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-bottom: 1px solid #2a0808;
}

/* =========================================================
   SITE HEADER
   ========================================================= */
.spooki-header {
  padding: 28px 0 24px;
  border-bottom: 1px solid var(--spooki-gold-line);
}
.spooki-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.spooki-badge {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 1px solid var(--spooki-gold);
  outline: 1px solid var(--spooki-gold-line);
  outline-offset: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--spooki-gold-soft);
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
  flex: 0 0 auto;
}
.spooki-badge span.diamond { color: var(--spooki-red-bright); font-size: 12px; }

.spooki-wordmark {
  text-align: center;
  flex: 1 1 420px;
  max-width: 620px;
}
.spooki-wordmark a { display: block; }
.spooki-header-logo-img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .spooki-wordmark { max-width: 360px; }
}

.spooki-header-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.spooki-account-cart {
  display: flex;
  gap: 22px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--spooki-cream);
}
.spooki-account-cart a { color: var(--spooki-cream); }
.spooki-account-cart a:hover { color: var(--spooki-gold-soft); }

.spooki-search-form {
  display: flex;
  border: 1px solid var(--spooki-gold-line);
  background: var(--spooki-bg-panel);
}
.spooki-search-form input[type="search"] {
  background: transparent;
  border: 0;
  color: var(--spooki-cream);
  padding: 9px 12px;
  min-width: 220px;
  font-size: 15px;
}
.spooki-search-form input[type="search"]::placeholder { color: var(--spooki-cream-dim); }
.spooki-search-form button {
  background: var(--spooki-red-dark);
  border: 0;
  color: var(--spooki-gold-soft);
  padding: 0 16px;
  cursor: pointer;
}
.spooki-search-form button:hover { background: var(--spooki-red); }

/* Primary nav — shown on every page, below the header row */
.spooki-simple-nav {
  text-align: center;
  margin: 0 0 22px;
  font-size: 15px;
  letter-spacing: 0.06em;
  padding-top: 8px;
}
.spooki-simple-nav__list {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.spooki-simple-nav__list li { display: inline-flex; align-items: center; }
.spooki-simple-nav__list li:not(:last-child)::after {
  content: "·";
  color: var(--spooki-gold-line);
  margin: 0 10px;
}
.spooki-simple-nav a { text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   HERO (front page)
   ========================================================= */
.spooki-hero {
  border: 1px solid var(--spooki-gold-line);
  outline: 1px solid var(--spooki-gold-line);
  outline-offset: -6px;
  margin: 48px auto;
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.spooki-hero-media img { border: 1px solid var(--spooki-gold-line); }
.spooki-hero-copy { text-align: left; }
.spooki-eyebrow {
  font-family: var(--font-body);
  color: var(--spooki-gold-soft);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 15px;
  margin: 0 0 8px;
}
.spooki-hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 72px;
  line-height: 1;
  color: var(--spooki-red-bright);
  margin: 0 0 18px;
  text-transform: uppercase;
}
.spooki-hero-subtitle {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--spooki-gold-soft);
  margin: 0 0 22px;
  line-height: 1.35;
}
.spooki-hero-desc {
  font-size: 19px;
  color: var(--spooki-cream-dim);
  max-width: 46ch;
  margin: 0 0 30px;
}

@media (max-width: 860px) {
  .spooki-hero { grid-template-columns: 1fr; padding: 32px 24px; }
  .spooki-hero-title { font-size: 48px; }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.spooki-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button,
.woocommerce-page a.button,
.woocommerce-page button.button {
  display: inline-block;
  background: var(--spooki-red-dark) !important;
  color: var(--spooki-gold-soft) !important;
  border: 1px solid var(--spooki-gold-line) !important;
  padding: 14px 30px !important;
  font-family: var(--font-ui) !important;
  font-size: 12.6px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  border-radius: 0 !important;
  transition: background 0.2s ease, color 0.2s ease;
}
.spooki-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce input.button:hover {
  background: var(--spooki-red) !important;
  color: var(--spooki-cream) !important;
}

/* =========================================================
   SECTIONS (collections / best sellers / newsletter)
   ========================================================= */
.spooki-section { margin: 64px auto; }
.spooki-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--spooki-gold-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 26px;
  text-align: left;
  margin: 0 0 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--spooki-gold-line);
}

.spooki-collection-grid,
.spooki-product-grid,
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* WooCommerce wraps ul.products in an old float-clearfix using invisible
   ::before/::after pseudo-elements (content:" "; display:table;) to contain
   floated li's in its legacy layout. Pseudo-elements like this never show
   up in page source (they're pure CSS, not real DOM nodes) — but once the
   parent becomes display:grid, they still count as real grid items and the
   ::before claims the very first cell, silently bumping every real product
   into the next slot (this is what looked like an "empty first cell" with
   products shifted one column over on every category page). Neither
   pseudo-element is needed once we're on Grid instead of floats, so drop
   them entirely. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
  content: none !important;
}
@media (max-width: 900px) {
  .spooki-collection-grid,
  .spooki-product-grid,
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .spooki-collection-grid,
  .spooki-product-grid,
  .woocommerce ul.products { grid-template-columns: 1fr !important; }
}

.spooki-card,
.woocommerce ul.products li.product {
  list-style: none;
  border: 1px solid var(--spooki-gold-line);
  background: var(--spooki-bg-panel);
  padding: 0 0 20px;
  text-align: center;
  position: relative;
}
/* WooCommerce core CSS still ships legacy float-based grid rules (width:
   ~32%, float:left) on li.product/li.product-category for its old
   1/2/3/4-column layout. Since this theme uses CSS Grid instead, that
   leftover width/float made each card render at ~1/3 of its actual grid
   column width ("narrow strips"), and threw off placement enough to look
   like an empty leading cell. Neutralise it so the card fills its track. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product-category,
.woocommerce-page ul.products li.product-category {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

.spooki-card img,
.woocommerce ul.products li.product img {
  border-bottom: 1px solid var(--spooki-gold-line);
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.spooki-card-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  color: var(--spooki-cream);
  font-size: 19px;
  margin: 18px 16px 6px;
}
.spooki-card-caption {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spooki-gold-soft);
  margin: 0 16px 14px;
}
.woocommerce ul.products li.product .price {
  color: var(--spooki-gold-soft) !important;
  font-size: 18px;
}
.woocommerce ul.products li.product .button {
  margin-top: 14px;
}

.spooki-view-all {
  text-align: right;
  margin-bottom: 20px;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Newsletter */
.spooki-newsletter {
  text-align: center;
  border-top: 1px solid var(--spooki-gold-line);
  border-bottom: 1px solid var(--spooki-gold-line);
  padding: 48px 24px;
}
.spooki-newsletter p {
  color: var(--spooki-cream-dim);
  margin: 0 0 20px;
}
.spooki-newsletter-form {
  display: flex;
  justify-content: center;
  gap: 0;
  max-width: 420px;
  margin: 0 auto;
}
.spooki-newsletter-form input[type="email"] {
  flex: 1;
  background: var(--spooki-bg-panel);
  border: 1px solid var(--spooki-gold-line);
  border-right: 0;
  color: var(--spooki-cream);
  padding: 12px 14px;
  font-size: 15px;
}

/* =========================================================
   SHOP / ARCHIVE / SINGLE PRODUCT (WooCommerce overrides)
   ========================================================= */
.woocommerce-page .spooki-page-title,
.woocommerce .page-title {
  font-family: var(--font-display);
  color: var(--spooki-gold-soft);
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--spooki-gold-line);
  padding-bottom: 16px;
  margin: 40px 0 32px;
}

/* Generic page content typography (page.php / single.php) — used for plain
   WordPress Pages such as Terms & Conditions, About Us, etc. so headings,
   paragraphs and lists pasted into the block editor pick up the theme's
   look instead of unstyled browser defaults. */
.spooki-page-content {
  max-width: 78ch;
}
.spooki-page-content .spooki-page-intro {
  font-family: var(--font-body);
  color: var(--spooki-gold-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 14px;
  margin: 0 0 18px;
}
.spooki-page-content .spooki-page-meta {
  color: var(--spooki-cream-dim);
  font-size: 14px;
  margin: 0 0 32px;
}
.spooki-page-content p {
  color: var(--spooki-cream-dim);
  margin: 0 0 18px;
  line-height: 1.7;
}
.spooki-page-content h2 {
  font-family: var(--font-display);
  color: var(--spooki-gold-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 24px;
  border-bottom: 1px solid var(--spooki-gold-line);
  padding-bottom: 12px;
  margin: 48px 0 20px;
}
.spooki-page-content h3 {
  font-family: var(--font-display);
  color: var(--spooki-cream);
  font-size: 19px;
  margin: 28px 0 12px;
}
.spooki-page-content ul,
.spooki-page-content ol {
  list-style: disc outside;
  padding-left: 24px;
  margin: 0 0 20px;
  color: var(--spooki-cream-dim);
}
.spooki-page-content ol { list-style: decimal outside; }
.spooki-page-content li {
  margin-bottom: 10px;
  line-height: 1.6;
}
.spooki-page-content a {
  color: var(--spooki-gold-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.spooki-page-content a:hover { color: var(--spooki-cream); }
.spooki-page-content strong { color: var(--spooki-cream); }

/* Single product layout: image column + summary column, image always contained */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 48px;
  align-items: start;
  margin-top: 8px;
}
/* Give the single product page a little extra breathing room so the
   enlarged gallery has more room to work with, without affecting any
   other page's container width. */
body.single-product .container {
  max-width: 1360px;
}
/* Grid items default to min-width:auto, which lets oversized content (like
   WooCommerce's flexslider, which sets its own wide inline pixel width when a
   product has multiple images) force the whole grid to stretch. Pinning
   min-width to 0 and clipping overflow stops that from ever happening. */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .summary {
  min-width: 0;
}
.woocommerce div.product .woocommerce-product-gallery {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery__image {
  border: 1px solid var(--spooki-gold-line);
}
.woocommerce div.product .woocommerce-product-gallery__wrapper {
  overflow: hidden;
}
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 0 !important;
}
/* Thumbnail strip shown under the main image when a product has 2+ images */
.woocommerce div.product .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce div.product .flex-control-thumbs li {
  width: auto;
  margin: 0;
}
.woocommerce div.product .flex-control-thumbs img {
  width: 100px !important;
  height: 100px !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--spooki-gold-line) !important;
  cursor: pointer;
  opacity: 0.65;
}
.woocommerce div.product .flex-control-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--spooki-gold) !important;
}
.woocommerce div.product .summary {
  max-width: 100%;
}
.woocommerce div.product .summary h1.product_title {
  font-family: var(--font-display);
  color: var(--spooki-cream);
  font-size: 32px;
  margin: 0 0 12px;
}
/* Tabs, related products, and upsells are siblings of the gallery/summary
   inside the SAME grid container — without this they'd get auto-placed into
   the narrow 2nd grid column and squeezed, exactly like the "Related
   products" block was. Span them across the full width instead. */
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related.products,
.woocommerce div.product > .upsells.products,
.woocommerce div.product > .up-sells {
  grid-column: 1 / -1;
}
.related.products > h2,
.upsells.products > h2 {
  font-family: var(--font-display);
  color: var(--spooki-gold-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 24px;
  border-bottom: 1px solid var(--spooki-gold-line);
  padding-bottom: 14px;
  margin: 0 0 28px;
}
@media (max-width: 860px) {
  .woocommerce div.product { grid-template-columns: 1fr; }
  body.single-product .container { max-width: var(--container-width); }
}

.woocommerce div.product .summary .price {
  color: var(--spooki-red-bright);
  font-family: var(--font-display);
  font-size: 26px;
}
.woocommerce div.product p.stock { color: var(--spooki-gold-soft); }

/* WooCommerce notices ("Added to basket" / errors / info) */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-message {
  background: var(--spooki-bg-panel) !important;
  color: var(--spooki-cream) !important;
  border: 1px solid var(--spooki-gold-line) !important;
  border-top: 3px solid var(--spooki-gold) !important;
  border-radius: 0 !important;
  padding: 20px 24px !important;
  margin: 32px 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  list-style: none !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--spooki-gold-soft) !important;
  position: static !important;
  margin-right: 12px;
  float: none !important;
}
.woocommerce-error {
  border-top-color: var(--spooki-red-bright) !important;
}
.woocommerce-error::before {
  color: var(--spooki-red-bright) !important;
}
.woocommerce-message a,
.woocommerce-error a {
  color: var(--spooki-gold-soft);
}

/* Product tabs (Description / Reviews) */
.woocommerce-tabs.wc-tabs-wrapper { margin-top: 48px; }
.woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--spooki-gold-line);
  padding: 0;
  margin: 0;
  display: flex;
  gap: 4px;
}
.woocommerce-tabs ul.tabs li {
  background: var(--spooki-bg-panel) !important;
  border: 1px solid var(--spooki-gold-line) !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 12px 22px;
  color: var(--spooki-cream-dim) !important;
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 0.04em;
  text-decoration: none !important;
}
.woocommerce-tabs ul.tabs li.active {
  background: var(--spooki-bg) !important;
  border-bottom: 1px solid var(--spooki-bg) !important;
  margin-bottom: -1px !important;
}
.woocommerce-tabs ul.tabs li.active a {
  color: var(--spooki-gold-soft) !important;
}
.woocommerce-tabs .panel,
.woocommerce-Tabs-panel {
  background: transparent !important;
  color: var(--spooki-cream-dim) !important;
  border: 1px solid var(--spooki-gold-line);
  border-top: none;
  padding: 32px 28px !important;
}
.woocommerce-Tabs-panel h2 {
  font-family: var(--font-display);
  color: var(--spooki-gold-soft);
  font-size: 24px;
  margin-top: 0;
}
.woocommerce-Reviews-title { color: var(--spooki-gold-soft); font-family: var(--font-display); }
.woocommerce-noreviews { color: var(--spooki-cream-dim); }
#review_form input[type="text"],
#review_form input[type="email"],
#review_form textarea,
#review_form select {
  background: var(--spooki-bg) !important;
  border: 1px solid var(--spooki-gold-line) !important;
  color: var(--spooki-cream) !important;
  border-radius: 0 !important;
}
.comment-form-rating label,
.comment-form-comment label,
.comment-form-author label,
.comment-form-email label {
  color: var(--spooki-cream-dim);
}

/* Quantity stepper (product page + cart) */
.quantity {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--spooki-gold-line);
  background: var(--spooki-bg-panel);
}
.quantity .qty {
  width: 56px;
  min-width: 56px;
  height: 48px;
  border: none !important;
  background: transparent !important;
  color: var(--spooki-cream) !important;
  font-family: var(--font-ui) !important;
  font-size: 18px !important;
  text-align: center;
  -moz-appearance: textfield;
  padding: 0 !important;
}
.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.spooki-qty-btn {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  background: var(--spooki-red-dark);
  color: var(--spooki-gold-soft);
  border: none;
  font-family: var(--font-ui);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.spooki-qty-btn:hover {
  background: var(--spooki-red);
  color: var(--spooki-cream);
}
.spooki-qty-btn:active {
  background: var(--spooki-red-bright);
}
.spooki-qty-minus { border-right: 1px solid var(--spooki-gold-line); }
.spooki-qty-plus { border-left: 1px solid var(--spooki-gold-line); }

/* Sorting/ordering dropdown (shop page) */
.woocommerce-ordering {
  margin-bottom: 24px;
}
.woocommerce-ordering select {
  background: var(--spooki-bg-panel) !important;
  color: var(--spooki-cream) !important;
  border: 1px solid var(--spooki-gold-line) !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
  font-family: var(--font-body);
  font-size: 16px;
}
.woocommerce-result-count {
  color: var(--spooki-cream-dim);
}

/* Category tiles (when "Shop page display" is set to show categories) */
.woocommerce ul.products li.product-category {
  list-style: none;
  border: 1px solid var(--spooki-gold-line);
  background: var(--spooki-bg-panel);
  padding: 0 0 20px;
  text-align: center;
  overflow: hidden;
}
.woocommerce ul.products li.product-category a { display: block; }
.woocommerce ul.products li.product-category img {
  border-bottom: 1px solid var(--spooki-gold-line);
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* WooCommerce's default placeholder graphic (used until a real category
     thumbnail is uploaded) is a bright white square that clashes hard
     against the dark theme — dim it so it isn't a jarring white box while
     a real photo hasn't been set yet. Once a thumbnail is uploaded, this
     has no visible effect on the real photo beyond a very subtle dim. */
  filter: brightness(0.85) saturate(0.9);
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
  font-family: var(--font-display);
  color: var(--spooki-cream);
  font-size: 19px;
  margin: 18px 16px 6px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title mark {
  background: none;
  color: var(--spooki-gold-soft);
  font-family: var(--font-body);
  font-size: 15px;
}

/* Cart */
.woocommerce-cart table.cart,
.woocommerce-checkout table.cart {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--spooki-gold-line);
}
.woocommerce table.cart td, .woocommerce table.cart th {
  border-bottom: 1px solid var(--spooki-gold-line);
  padding: 16px;
  color: var(--spooki-cream);
}
.woocommerce table.cart th { color: var(--spooki-gold-soft); text-transform: uppercase; font-size: 13px; letter-spacing: 0.08em; }
.cart-collaterals .cart_totals {
  border: 1px solid var(--spooki-gold-line);
  padding: 24px;
  margin-top: 32px;
}
.cart_totals h2 { font-family: var(--font-display); color: var(--spooki-gold-soft); }

/* WooCommerce Blocks Cart & Checkout (the newer block-based cart/checkout
   pages) use entirely different markup from the classic cart table above,
   so none of those rules reach it — it needs its own theming. */
.wc-block-cart,
.wc-block-checkout,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  font-family: var(--font-body);
  color: var(--spooki-cream);
}
.wc-block-cart h1,
.wc-block-checkout h1,
.wc-block-cart .wc-block-components-checkout-step__title,
.wc-block-checkout .wc-block-components-checkout-step__title {
  font-family: var(--font-display);
  color: var(--spooki-gold-soft);
}

/* Cart items table */
.wc-block-cart-items {
  width: 100%;
  border-collapse: collapse;
}
.wc-block-cart-items th {
  color: var(--spooki-gold-soft) !important;
  text-transform: uppercase;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--spooki-gold-line) !important;
  padding-bottom: 12px !important;
}
.wc-block-cart-items td {
  border-bottom: 1px solid var(--spooki-gold-line) !important;
}
/* Normalize the mismatched type sizes in each cart row (title / short
   description / price were all inheriting different default block sizes) */
.wc-block-components-product-name,
.wc-block-components-product-name a {
  font-family: var(--font-body) !important;
  color: var(--spooki-cream) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
}
.wc-block-components-product-metadata,
.wc-block-components-product-metadata * {
  font-family: var(--font-body) !important;
  color: var(--spooki-cream-dim) !important;
  font-size: 15px !important;
}
.wc-block-components-product-price,
.wc-block-components-formatted-money-amount {
  font-family: var(--font-body) !important;
  color: var(--spooki-gold-soft) !important;
  font-size: 17px !important;
}

/* Quantity stepper inside the block cart (its own native +/- control) */
.wc-block-components-quantity-selector {
  border: 1px solid var(--spooki-gold-line) !important;
  background: var(--spooki-bg-panel) !important;
}
.wc-block-components-quantity-selector__button {
  color: var(--spooki-gold-soft) !important;
  font-family: var(--font-ui) !important;
}
.wc-block-components-quantity-selector__input {
  background: transparent !important;
  color: var(--spooki-cream) !important;
  font-family: var(--font-ui) !important;
}
.wc-block-cart-item__remove-link {
  color: var(--spooki-cream-dim) !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
}

/* Totals sidebar (coupon panel, "Estimated total") */
.wc-block-components-totals-wrapper,
.wc-block-components-panel {
  border-color: var(--spooki-gold-line) !important;
}
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-panel__button {
  font-family: var(--font-body) !important;
  color: var(--spooki-cream) !important;
  font-size: 17px !important;
}
.wc-block-components-totals-item__value {
  color: var(--spooki-gold-soft) !important;
}

/* Order summary line-item thumbnails show a small quantity badge circle
   overlaid on the top-left corner of the product image (e.g. "×2"). It
   ships with WooCommerce's default light background + light text, which is
   unreadable against this theme's dark panels. */
.wc-block-components-quantity-badge,
.wc-block-components-product-badge,
.wc-block-components-order-summary-item__quantity,
.wc-block-components-product-image .wc-block-components-quantity-badge {
  background: var(--spooki-gold) !important;
  color: var(--spooki-bg) !important;
  border: 1px solid var(--spooki-bg) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* Every WordPress core/block button on the site (this is the root cause of
   the wrongly-styled "Proceed to Checkout" button — it was inheriting the
   generic WordPress default block-button style, #32373c gray, since nothing
   in the theme had overridden it yet) */
.wp-element-button,
.wp-block-button__link,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--spooki-red-dark) !important;
  color: var(--spooki-gold-soft) !important;
  border: 1px solid var(--spooki-gold-line) !important;
  border-radius: 0 !important;
  font-family: var(--font-ui) !important;
  font-size: 12.6px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--spooki-red) !important;
  color: var(--spooki-cream) !important;
}

/* WooCommerce Checkout Block form fields (Contact information, Billing
   address) — these are yet another distinct set of block components from
   the cart items/totals styled above, and were rendering as unstyled
   default-white input boxes. */
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout input[type="number"],
.wc-block-checkout input[type="search"],
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-checkout textarea {
  background: var(--spooki-bg-panel) !important;
  border: 1px solid var(--spooki-gold-line) !important;
  color: var(--spooki-cream) !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  box-shadow: none !important;
}
.wc-block-components-text-input label,
.wc-block-checkout label,
.wc-block-components-checkbox label {
  color: var(--spooki-cream-dim) !important;
  font-family: var(--font-body) !important;
}
.wc-block-checkout select,
.wc-block-components-country-input select,
.wc-block-components-state-input select,
.wc-block-components-dropdown-selector__button,
.components-combobox-control__input,
.wc-block-components-combobox-control input {
  background: var(--spooki-bg-panel) !important;
  border: 1px solid var(--spooki-gold-line) !important;
  color: var(--spooki-cream) !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  box-shadow: none !important;
}
.wc-block-checkout .wc-block-components-checkout-step__title,
.wc-block-checkout .wc-block-components-title,
.wc-block-checkout h2 {
  font-family: var(--font-display) !important;
  color: var(--spooki-gold-soft) !important;
  border: none !important;
}
.wc-block-checkout .wc-block-components-checkout-step__description {
  color: var(--spooki-cream-dim) !important;
}
/* Focused field state — replace the browser's default blue outline */
.wc-block-checkout input:focus,
.wc-block-checkout select:focus,
.wc-block-components-text-input input:focus {
  outline: none !important;
  border-color: var(--spooki-gold) !important;
  box-shadow: 0 0 0 1px var(--spooki-gold) !important;
}

/* =========================================================
   FOOTER
   ========================================================= */
.spooki-footer {
  border-top: 1px solid var(--spooki-gold-line);
  text-align: center;
  padding: 40px 24px 56px;
  color: var(--spooki-cream-dim);
  font-size: 15px;
}
.spooki-footer a { color: var(--spooki-cream-dim); text-decoration: underline; }
.spooki-footer-legal { margin: 10px 0 0; font-size: 14px; }
.spooki-footer .powered { margin-top: 10px; font-size: 13px; letter-spacing: 0.05em; }