/*
Theme Name: Meridian Vivid
Template: meridian
Description: Bold, conversion-focused storefront layout on top of Meridian: announcement bar, two-tier hero slider, category tiles, featured products, how-to-order and why-us sections. All copy, colours and the display font are editable in Appearance → Customize → Storefront content.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
License: GPL v2 or later
Text Domain: meridian
*/

/* ==========================================================================
   Self-hosted fonts
   ========================================================================== */

/* Get Schwifty — decorative display face for headings. Licence: Freeware,
   https://www.fontspace.com/get-schwifty-font-f136345 */
@font-face {
	font-family: 'Get Schwifty';
	src: url('assets/fonts/get-schwifty.woff2') format('woff2');
	font-display: swap;
	font-weight: 400;
	font-style: normal;
}

/* ==========================================================================
   Tokens — re-pointed from the parent, so the parent's structural CSS
   (product page grid, spec table, cart form) picks up this look for free.
   --brand, --brand-2, --night and the derived --on-brand / --brand-2-ink
   are set inline from the Customizer (see meridian_vivid_token_css).
   ========================================================================== */

:root {
  --paper:       #ffffff;
  --paper-2:     #f3f4f6;
  --ink:         #111318;
  --muted:       #5f6672;
  --line:        #e5e7eb;
  --line-strong: #cfd3da;
  --accent:      var(--brand);
  --accent-soft: color-mix(in srgb, var(--brand) 12%, #ffffff);
  --band-film:   40%;

  --font-sans:    "Barlow", ui-sans-serif, system-ui, sans-serif;
  --font-serif:   var(--font-display);
  --night-2:      color-mix(in srgb, var(--night) 82%, #ffffff);
  --radius:       6px;
}

body { font-size: 15px; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; line-height: 1.05; }

.label { letter-spacing: 0.14em; font-weight: 600; }

.btn,
.single-product form.cart button[type="submit"],
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background: var(--brand) !important; color: var(--on-brand) !important; border-radius: var(--radius);
  font-family: var(--font-display); font-size: 1.125rem; letter-spacing: 0.04em;
  text-transform: uppercase; font-weight: 400; padding: 0.85rem 1.75rem;
}
.btn:hover,
.single-product form.cart button[type="submit"]:hover { background: color-mix(in srgb, var(--brand) 85%, #000); color: var(--on-brand); }

/* Variable product add-to-cart — matches simple product form.cart layout */
/* form.cart wraps both .quantity + .woocommerce-variation-add-to-cart;
   flex-direction: column keeps them stacking (not side-by-side). */
.woocommerce.single-product div.product form.cart {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.woocommerce.single-product div.product form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
}

.woocommerce.single-product div.product form.cart .woocommerce-variation-add-to-cart .quantity {
  flex: 0 0 auto;
}

.woocommerce.single-product div.product form.cart .woocommerce-variation-add-to-cart .quantity .input-text {
  width: 4rem;
  margin: 0;
  border-radius: var(--radius) 0 0 var(--radius);
}

.woocommerce.single-product div.product form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button {
  flex: 1;
}

.woocommerce.single-product div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce.single-product div.product form.cart .single_add_to_cart_button.wc-variation-selection-needed {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn--dark { background: var(--night); color: #fff; }
.btn--dark:hover { background: var(--night-2); color: #fff; }

/* ==========================================================================
   Announcement bar + header
   ========================================================================== */

.announce { background: color-mix(in srgb, var(--night) 85%, transparent); border-bottom: 1px solid rgba(255,255,255,0.12); }
.announce p { margin: 0; padding: 0.6rem var(--gutter); text-align: center; color: var(--brand); font-size: 0.75rem; }
.announce a { color: inherit; }
.announce a:hover { color: #fff; }

.site-header { background: color-mix(in srgb, var(--night) 85%, transparent); backdrop-filter: none; border-bottom: 0; }
.site-header .wrap { height: 4.5rem; max-width: 80rem; }
.brand__name { color: #fff; font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.02em; }
.brand__tag { color: rgba(255,255,255,0.55); }
.brand img { max-height: 3rem; width: auto; }

.nav a { color: rgba(255,255,255,0.85); font-size: 0.75rem; }
.nav a:hover, .nav .current-menu-item > a { color: var(--brand); }
.nav .menu-item-has-children { position: relative; }
.nav .menu-item-has-children > a::after { content: " ▾"; font-size: 0.6rem; }
.nav .sub-menu {
  display: none; position: absolute; top: 100%; left: -1rem; z-index: 50;
  min-width: 13rem; margin: 0; padding: 0.75rem 0; list-style: none;
  background: color-mix(in srgb, var(--night) 85%, transparent); border-top: 2px solid var(--brand);
  flex-direction: column; gap: 0;
}
.nav .sub-menu a { display: block; padding: 0.5rem 1rem; }
.nav li:hover > .sub-menu, .nav li:focus-within > .sub-menu { display: flex; }
.nav ul { gap: 1.75rem; flex-wrap: wrap; }

.header-actions { color: #fff; }
.header-actions a, .nav-toggle { color: #fff; }
.icon-link { display: inline-flex; align-items: center; gap: 0.35rem; }
.icon-link svg { width: 1.35rem; height: 1.35rem; }
.cart-link .count {
  margin-left: -0.5rem; margin-top: -1rem; min-width: 1.1rem; height: 1.1rem; padding: 0 0.25rem;
  border-radius: 999px; background: var(--brand); color: var(--on-brand);
  font-size: 0.625rem; line-height: 1.1rem; text-align: center;
}

.nav-mobile { background: color-mix(in srgb, var(--night) 85%, transparent); border-top-color: rgba(255,255,255,0.12); }
.nav-mobile a { color: #fff; }
.nav-mobile .sub-menu { list-style: none; padding: 0.5rem 0 0 1rem; display: flex; flex-direction: column; gap: 0.75rem; }

/* ==========================================================================
   Hero: main slider + thumbnail strip, both scroll-snapped and kept in sync
   ========================================================================== */

.hero-v { background: color-mix(in srgb, var(--night) 85%, transparent); padding: 1rem 0 1.5rem; }
.hero-v .wrap { max-width: 80rem; padding-inline: 1rem; }

.slider { position: relative; }
.slider__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; border-radius: var(--radius);
}
.slider__track::-webkit-scrollbar { display: none; }

.slide {
  position: relative; flex: 0 0 100%; scroll-snap-align: start;
  display: grid; place-items: center; text-align: center;
  min-height: clamp(22rem, 52vw, 34rem); padding: 3rem 4rem;
  background: var(--slide-bg, linear-gradient(135deg, var(--brand), var(--night)));
  background-size: cover; background-position: center; color: #fff; overflow: hidden;
}
.slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.45)); }
.slide > div { position: relative; max-width: 46rem; }
.slide h1, .slide h2 { font-size: clamp(2.5rem, 7vw, 5rem); color: var(--slide-accent, #fff); text-shadow: 0 3px 0 rgba(0,0,0,0.25); }
.slide p { margin: 1.25rem auto 0; max-width: 36rem; font-size: clamp(1rem, 2vw, 1.4rem); font-weight: 500; line-height: 1.35; }
.slide .btn { margin-top: 2rem; }

.slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 2.75rem; height: 2.75rem; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(0,0,0,0.35); color: #fff; font-size: 1.25rem; line-height: 1;
}
.slider__arrow:hover { background: var(--brand); }
.slider__arrow--prev { left: 0.75rem; }
.slider__arrow--next { right: 0.75rem; }

.thumbs {
  display: flex; gap: 0.75rem; margin-top: 0.75rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.thumbs::-webkit-scrollbar { display: none; }
.thumb {
  flex: 0 0 calc((100% - 0.75rem) / 2); scroll-snap-align: start;
  display: grid; place-items: end start; aspect-ratio: 16 / 7; padding: 0.9rem 1rem;
  border: 2px solid transparent; border-radius: var(--radius); cursor: pointer;
  background: var(--slide-bg, linear-gradient(135deg, var(--brand), var(--night)));
  background-size: cover; background-position: center;
  color: #fff; font-family: var(--font-display); font-size: 1.25rem; text-align: left;
  opacity: 0.6; transition: opacity 0.2s, border-color 0.2s;
}
.thumb:hover { opacity: 0.9; }
.thumb[aria-current="true"] { opacity: 1; border-color: var(--brand); }
@media (min-width: 768px) { .thumb { flex-basis: calc((100% - 1.5rem) / 3); } }

/* ==========================================================================
   Landing sections
   ========================================================================== */

.band { padding-block: 4.5rem; }
.band--dark { background: color-mix(in srgb, var(--night) var(--band-film), transparent); color: #fff; }
.band--dark .muted { color: rgba(255,255,255,0.7); }
.band__title { text-align: center; font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--brand); }
.band--light .band__title { color: var(--ink); }
.band .wrap { max-width: 80rem; }

/* Category tiles */
.tiles { display: grid; gap: 1rem; }
@media (min-width: 640px)  { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tiles--3, .tiles--5, .tiles--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile {
  position: relative; display: grid; place-items: center; min-height: 13rem; padding: 1.5rem;
  border-radius: var(--radius); overflow: hidden; color: #fff; text-align: center;
  background: linear-gradient(155deg, var(--tint-a, #3c4a4e), var(--tint-b, #171d1f));
  background-size: cover; background-position: center;
  box-shadow: 0 0 0 0 var(--brand); transition: box-shadow 0.25s, transform 0.25s;
  background-color: color-mix(in srgb, var(--night) var(--band-film), transparent) !important;
}
.tile::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.15); transition: background 0.25s; }
.tile:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 0 0 3px var(--brand), 0 12px 30px rgba(0,0,0,0.35); }
.tile:hover::before { background: rgba(0,0,0,0.1); }
.tile > span { position: relative; }
.tile__eyebrow { display: block; font-size: 0.8rem; letter-spacing: 0.25em; text-transform: uppercase; font-weight: 600; }
.tile__name { display: block; margin-top: 0.35rem; font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1; text-shadow: 0 3px 0 rgba(0,0,0,0.3); }

/* Featured products */
.pill-title {
  display: table; margin: 0 auto; padding: 0.6rem 1.5rem;
  border: 2px solid var(--brand-2-ink); border-radius: var(--radius);
  font-size: 1.5rem; color: var(--night);
}
.band--light .product-grid { margin-top: 3rem; }
.band__cta { margin-top: 3.5rem; text-align: center; }

/* Steps + reasons */
.features { display: grid; gap: 2.5rem; margin-top: 3rem; text-align: center; }
@media (min-width: 768px) {
  .features--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .features--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .features--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.feature svg { width: 3rem; height: 3rem; color: #fff; }
.feature h3 { margin-top: 1rem; font-size: 1.6rem; color: var(--brand); }
.feature p { margin-top: 0.75rem; font-size: 0.9rem; line-height: 1.6; }
.band--rule { border-top: 1px solid rgba(255,255,255,0.12); }

/* ==========================================================================
   Product cards — white, image-led, category label, price in second colour
   ========================================================================== */

.card__media { border-radius: var(--radius); }
.card__media--placeholder { display: grid; place-items: center; }
.card__media--placeholder .card__initial {
  font-family: var(--font-display); font-size: 3.5rem; color: rgba(255,255,255,0.18);
}
.card__section { margin-top: 1rem; color: var(--muted); font-size: 0.625rem; }
.card__head { display: block; margin-top: 0.4rem; }
.card__title { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 500; line-height: 1.35; letter-spacing: 0; }
.card__price { display: block; margin-top: 0.35rem; color: var(--brand-2-ink); font-weight: 800; font-size: 0.95rem; }
.card:hover .card__title { color: var(--brand); }

/* Category/archive pages — dark cards with readable text */
.woocommerce-products-header { display: none; }

.archive.woocommerce .loop-column .card,
.archive.woocommerce div.product,
.tax-product_cat .loop-column .card {
  background: color-mix(in srgb, var(--night) 80%, transparent);
  border-radius: var(--radius);
}

.archive .card__section,
.woocommerce-archive .card__section {
  color: rgba(255,255,255,0.5) !important;
}

.archive .card__title,
.woocommerce-archive .card__title {
  color: #fff !important;
}

.archive .card__price,
.woocommerce-archive .card__price {
  color: var(--brand-2-ink) !important;
}

.archive .out-of-stock,
.woocommerce-archive .out-of-stock {
  color: #fff !important;
  background: var(--ink) !important;
}

.product-grid { row-gap: 3rem; }

/* Single product + listings take the display face for headings */
.page-head { background: color-mix(in srgb, var(--night) var(--band-film), transparent); color: #fff; border-bottom: 0; }
.page-head .muted, .page-head .intro { color: rgba(255,255,255,0.7); }
.page-head h1 { color: #fff; }
.product_title { font-size: clamp(2rem, 4vw, 3rem); }
.single-product .price { color: var(--brand-2-ink) !important; font-weight: 800; }
.product-notice {
  border-left: 3px solid var(--brand);
  background: color-mix(in srgb, var(--night) 70%, transparent);
  color: #fff;
}

.product-notice p {
  color: rgba(255,255,255,0.85);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { margin-top: 0; background: var(--night); color: rgba(255,255,255,0.75); border-top: 3px solid var(--brand); }
.site-footer .brand__name { color: #fff; }
.site-footer .muted { color: rgba(255,255,255,0.55); }
.footer-cols a { color: rgba(255,255,255,0.85); }
.footer-cols a:hover { color: var(--brand); }
.footer-legal { border-top-color: rgba(255,255,255,0.12); }
.footer-legal p { color: rgba(255,255,255,0.55); }

.footer-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-nav a { font-size: 0.875rem; color: rgba(255,255,255,0.75); }
.footer-nav a:hover { color: var(--brand); }
.footer-social { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; gap: 1rem; }
.footer-social a { color: rgba(255,255,255,0.6); transition: color 0.2s; }
.footer-social a:hover { color: var(--brand); }
.footer-social svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .slider__track, .thumbs { scroll-behavior: auto; }
  .tile { transition: none; }
}

/* ==========================================================================
   Landing — dark sections let the galaxy show through; product band is solid white.
   ========================================================================== */

.band--light {
  background: var(--paper);
  color: var(--ink);
}
.band--light .band__title { color: var(--ink); }
.band--light .pill-title { color: var(--night); border-color: var(--ink); }
.band--light .muted { color: var(--muted); }
.band--light .card__section { color: var(--muted); }
.band--light .card__title { color: var(--ink); }
.band--light .card__price { color: var(--brand-2-ink); }

/* Galaxy background ------------------------------------------------------
 * Bottom layer: dark base, static stars and nebula glow (also the fallback
 * if the script doesn't run). Top layer: the animated canvas from
 * assets/galaxy.js. Colours follow the Customizer (--night, --brand, --brand-2).
 */
body {
  background-color: var(--night);
}

body::before {
  --stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='37' cy='52' r='.8'/%3E%3Ccircle cx='151' cy='19' r='.8'/%3E%3Ccircle cx='263' cy='88' r='.8'/%3E%3Ccircle cx='412' cy='41' r='.8'/%3E%3Ccircle cx='529' cy='127' r='.8'/%3E%3Ccircle cx='608' cy='63' r='.8'/%3E%3Ccircle cx='88' cy='171' r='.8'/%3E%3Ccircle cx='197' cy='236' r='.8'/%3E%3Ccircle cx='341' cy='199' r='.8'/%3E%3Ccircle cx='466' cy='263' r='.8'/%3E%3Ccircle cx='583' cy='214' r='.8'/%3E%3Ccircle cx='23' cy='318' r='.8'/%3E%3Ccircle cx='139' cy='377' r='.8'/%3E%3Ccircle cx='287' cy='331' r='.8'/%3E%3Ccircle cx='398' cy='402' r='.8'/%3E%3Ccircle cx='512' cy='356' r='.8'/%3E%3Ccircle cx='627' cy='431' r='.8'/%3E%3Ccircle cx='61' cy='489' r='.8'/%3E%3Ccircle cx='176' cy='548' r='.8'/%3E%3Ccircle cx='309' cy='507' r='.8'/%3E%3Ccircle cx='451' cy='571' r='.8'/%3E%3Ccircle cx='562' cy='498' r='.8'/%3E%3Ccircle cx='243' cy='612' r='.8'/%3E%3Ccircle cx='377' cy='629' r='.8'/%3E%3Ccircle cx='19' cy='601' r='.8'/%3E%3Ccircle cx='224' cy='141' r='1.2'/%3E%3Ccircle cx='493' cy='187' r='1.2'/%3E%3Ccircle cx='106' cy='286' r='1.2'/%3E%3Ccircle cx='356' cy='468' r='1.2'/%3E%3Ccircle cx='601' cy='559' r='1.2'/%3E%3C/g%3E%3Cg fill='%23f6d77a'%3E%3Ccircle cx='318' cy='23' r='1.3'/%3E%3Ccircle cx='47' cy='433' r='1.3'/%3E%3Ccircle cx='548' cy='301' r='1.3'/%3E%3Ccircle cx='169' cy='604' r='1.3'/%3E%3C/g%3E%3Cg fill='%239fe9e1'%3E%3Ccircle cx='433' cy='113' r='1.1'/%3E%3Ccircle cx='262' cy='401' r='1.1'/%3E%3Ccircle cx='586' cy='22' r='1.1'/%3E%3Ccircle cx='121' cy='77' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--stars) 0 0 / 640px 640px,
    var(--stars) 211px 97px / 448px 448px,
    radial-gradient(ellipse 60% 45% at 18% 20%, color-mix(in srgb, var(--brand-2) 55%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 65%, color-mix(in srgb, var(--brand) 28%, transparent), transparent 70%),
    radial-gradient(ellipse 80% 50% at 50% 110%, color-mix(in srgb, var(--brand-2) 45%, transparent), transparent 70%),
    color-mix(in srgb, var(--night) 75%, #000);
}

.galaxy-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ==========================================================================
   Single product page — dark background overrides
   ========================================================================== */

/* Dark backdrop over entire product page to tame galaxy glow */
.single-product .woocommerce-product-gallery {
  background: color-mix(in srgb, var(--night) 85%, transparent);
  border-radius: 0;
  margin-bottom: 0;
}

.single-product .woocommerce-product-gallery__wrapper {
  background: color-mix(in srgb, var(--night) 85%, transparent);
}

.single-product .woo-content {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.single-product .summary {
  background: color-mix(in srgb, var(--night) 85%, transparent);
  border-radius: 0;
  padding: 2rem 2.5rem;
  margin-top: 0;
}

/* SKU / categories line */
.single-product .product_meta {
  color: rgba(255,255,255,0.7);
}

.single-product .product_meta a {
  color: var(--brand);
}

/* Related products section */
.single-product .related.products {
  background: color-mix(in srgb, var(--night) 85%, transparent);
  border-radius: 0;
  padding: 2rem 2.5rem;
  margin-top: 0;
}

.single-product .related.products h2,
.single-product .related.products .woocommerce-loop-category__title {
  color: var(--brand) !important;
}

.single-product .related .card__section {
  color: rgba(255,255,255,0.5);
}

.single-product .related .card__title {
  color: #fff;
}

.single-product .related .card__price {
  color: var(--brand-2-ink);
}

.single-product .related .out-of-stock {
  color: #fff;
  background: var(--ink);
}

.single-product .product_title,
.single-product h1.product_title {
  color: var(--brand) !important;
}

.single-product .description,
.single-product .woocommerce-Tabs-panel > p,
.single-product .woocommerce-Tabs-panel > ul,
.single-product .woocommerce-Tabs-panel > div {
  color: #fff;
}

.single-product .description a {
  color: var(--brand);
}

.single-product .spec-table dt {
  color: var(--brand);
}

.single-product .spec-table dd {
  color: #fff;
}

.single-product .product-notice p {
  color: #fff;
}

.single-product .woocommerce-variations-label,
.single-product .label.variation-label {
  color: var(--brand) !important;
}

/* Variation select dropdown */
.single-product select {
  color: #fff;
  background-color: color-mix(in srgb, var(--night) 60%, transparent);
}

.single-product select option {
  color: #fff;
  background-color: var(--night);
}

/* Quantity input */
.single-product .quantity input.input-text {
  color: #fff;
  background-color: color-mix(in srgb, var(--night) 60%, transparent);
}

/* Price display */
.single-product .woocommerce-Price-amount {
  color: var(--brand-2-ink) !important;
}

/* Clear button next to variation select */
.single-product .reset_variations {
  color: var(--brand);
}

/* ==========================================================================
   B. Variation options — labels, selects, clear link, variation price/avail
   ========================================================================== */

/* Variation table labels */
.single-product table.variations label {
  color: #fff;
}

.single-product table.variations .value select {
  color: #fff;
  background-color: var(--night);
  border: 1px solid var(--brand-2);
}

.single-product table.variations .value select option {
  color: #fff;
  background-color: var(--night);
}

/* Clear link */
.single-product .woocommerce-variation-clear-link a {
  color: var(--brand);
}

/* Variation price / availability shown after add-to-cart */
.single-product .woocommerce-variation-price,
.single-product .woocommerce-variation-availability,
.wc-block-components-product-option__price {
  color: #fff;
}

/* ==========================================================================
   C. Cart & Checkout block pages — dark panels, white text, gold buttons
   ========================================================================== */

/* Solid dark panel over galaxy */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  background: color-mix(in srgb, var(--night) 85%, transparent);
  color: #fff;
  border-radius: var(--radius);
  padding: 2rem 2.5rem;
}

/* All text inside blocks */
.wp-block-woocommerce-cart *,
.wp-block-woocommerce-checkout * {
  color: #fff;
}

/* Links */
.wp-block-woocommerce-cart a,
.wp-block-woocommerce-checkout a {
  color: var(--brand-2);
}

/* Cart / Checkout buttons — gold main button */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--brand) !important;
  color: var(--on-brand) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-display) !important;
  font-size: 1.125rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  padding: 0.85rem 1.75rem !important;
}

/* Checkout form inputs — dark bg, white text */
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-order-meta__value input,
.wc-block-components-checkout-step input {
  color: #fff !important;
  background-color: color-mix(in srgb, var(--night) 60%, transparent) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Checkout selects */
.wc-block-components-address-form select,
.wc-block-components-order-meta__value select {
  color: #fff !important;
  background-color: color-mix(in srgb, var(--night) 60%, transparent) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Quantity steppers */
.wc-block-components-quantity-controls__button {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Remove (bin) icon */
.wc-block-cart-items .wc-block-cart-item__remove {
  color: rgba(255, 255, 255, 0.5);
}

.wc-block-cart-items .wc-block-cart-item__remove:hover {
  color: var(--brand);
}

/* Dividers / borders */
.wp-block-woocommerce-cart hr,
.wp-block-woocommerce-checkout hr {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Empty cart page */
.wp-block-woocommerce-empty-cart-block {
  color: #fff;
}

.wp-block-woocommerce-empty-cart-block a {
  color: var(--brand-2);
}

/* ==========================================================================
   Heading glow — Get Schwifty decorative font
   ========================================================================== */

h1,
h2,
.section-title {
  color: var(--brand-2);
  text-shadow:
    0 0 2px var(--glow, #9cff3a),
    0 0 6px var(--glow, #9cff3a),
    0 0 16px color-mix(in srgb, var(--glow, #9cff3a) 60%, transparent);
  letter-spacing: 0.02em;
}

/* Responsive: switch to normal display font under ~480 px
   (decorative faces get hard to read below ~28 px). */
@media (max-width: 480px) {
  h1,
  h2,
  .section-title {
    font-family: var(--font-display);
    text-shadow: none;
  }
}

/* Respect prefers-reduced-motion — keep glow static. */
@media (prefers-reduced-motion: reduce) {
  h1,
  h2,
  .section-title {
    text-shadow:
      0 0 4px var(--glow, #9cff3a),
      0 0 8px color-mix(in srgb, var(--glow, #9cff3a) 40%, transparent);
  }
}