/*
Theme Name: Soundplume
Theme URI: https://www.soundplume.com
Author: Soundplume
Author URI: https://www.soundplume.com
Description: Native block theme for Soundplume. Deep black canvas, editorial serif display, mint-green accent. WooCommerce-ready. Built to eliminate Elementor dependency.
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.0
License: Proprietary
Text Domain: soundplume
Tags: full-site-editing, block-theme, editor-style, wide-blocks, woocommerce
*/

/* ---------- @font-face ---------- */

@font-face {
  font-family: 'Aime';
  src: url('assets/fonts/aime/Aime-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aime';
  src: url('assets/fonts/aime/Aime-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Aime';
  src: url('assets/fonts/aime/Aime-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aime';
  src: url('assets/fonts/aime/Aime-SemiBoldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Aime';
  src: url('assets/fonts/aime/Aime-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aime';
  src: url('assets/fonts/aime/Aime-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Graphik';
  src: url('assets/fonts/graphik/Graphik-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('assets/fonts/graphik/Graphik-RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('assets/fonts/graphik/Graphik-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('assets/fonts/graphik/Graphik-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('assets/fonts/graphik/Graphik-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('assets/fonts/graphik/Graphik-SemiboldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('assets/fonts/graphik/Graphik-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('assets/fonts/graphik/Graphik-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Modern Era';
  src: url('assets/fonts/modernera/ModernEra-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Modern Era';
  src: url('assets/fonts/modernera/ModernEra-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Modern Era';
  src: url('assets/fonts/modernera/ModernEra-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Modern Era';
  src: url('assets/fonts/modernera/ModernEra-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Modern Era';
  src: url('assets/fonts/modernera/ModernEra-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Modern Era';
  src: url('assets/fonts/modernera/ModernEra-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, video, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ---------- Soundplume primitives ---------- */

.sp-section-marker {
  font-family: 'Graphik', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A8A8A;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1rem;
  margin: 4rem 0 1.5rem;
}
.sp-section-marker::before { content: "/// "; }

.sp-category-tag,
.wp-block-post-terms a,
.wc-block-product-categories a {
  font-family: 'Graphik', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1DA867;
  font-weight: 500;
}

.sp-date,
.wp-block-post-date {
  font-family: 'Graphik', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A8A8A;
}

/* ---------- Typographic defaults for block content ---------- */

h1, h2, h3, h4,
.wp-block-post-title,
.wp-block-heading,
.woocommerce-loop-product__title {
  font-family: 'Aime', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.wp-block-post-title a:hover,
.woocommerce-loop-product__title:hover { color: #1DA867; }

/* ---------- WooCommerce reskin ---------- */

.woocommerce-products-header { display: none; }
.woocommerce ul.products li.product { text-align: left; margin-bottom: 3rem; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .price { display: none; }
.woocommerce ul.products li.product a img {
  margin: 0 0 1rem;
  background: #0A0A0A;
  aspect-ratio: 4/5;
  object-fit: cover;
  transition: opacity .3s ease;
}
.woocommerce ul.products li.product a:hover img { opacity: 0.75; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  padding: 0;
  margin: 0.5rem 0 0.25rem;
  color: #FFFFFF;
}

.woocommerce-result-count,
.woocommerce-ordering,
.woocommerce .woocommerce-breadcrumb { font-family: 'Graphik', sans-serif; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8A8A8A; }

.single-product div.product .product_title {
  font-family: 'Aime', Georgia, serif;
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  font-weight: 400;
  margin: 0 0 1.5rem;
}
.single-product div.product .price,
.single-product div.product .woocommerce-Price-amount {
  font-family: 'Graphik', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: #FFFFFF;
}
.single-product .woocommerce-product-gallery__image img { background: #0A0A0A; }

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.button.alt,
.wc-block-components-button {
  background: #1DA867;
  color: #000000 !important;
  font-family: 'Graphik', sans-serif;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  padding: 1rem 2rem;
  border: 0;
  border-radius: 0;
  transition: background .15s ease;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button:hover { background: #FFFFFF; color: #000000 !important; }

/* Cart / checkout tables */
.woocommerce table.shop_table,
.woocommerce-cart table.cart,
.woocommerce-checkout .woocommerce-checkout-review-order-table {
  background: transparent;
  border: 0;
  font-family: 'Graphik', sans-serif;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  background: transparent;
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 1.25rem 0.75rem;
}
.woocommerce table.shop_table th {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8A8A8A;
  font-weight: 500;
}

/* Form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
  background: #0A0A0A;
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0;
  padding: 0.85rem 1rem;
  font-family: 'Graphik', sans-serif;
}
.woocommerce form .form-row label,
.woocommerce-checkout h3 {
  font-family: 'Graphik', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A8A8A;
}

/* My account nav */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(255,255,255,0.08); }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid rgba(255,255,255,0.08); }
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 1rem 0;
  font-family: 'Graphik', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { color: #1DA867; }

/* My account addresses page — make the two address panels read like a
   left-aligned 2-column layout with normal-weight headings, not the
   centered Aime giants the default WC stylesheet ships. */
.woocommerce-account .woocommerce-MyAccount-content .u-columns,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-top: 1.5rem;
}
@media (max-width: 720px) {
  .woocommerce-account .woocommerce-MyAccount-content .u-columns,
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
  width: auto !important;
  float: none !important;
  text-align: left;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  text-align: left;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3 {
  font-family: 'Aime', Georgia, serif !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  text-align: left !important;
  color: #FFFFFF;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit {
  font-family: 'Graphik', sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #8A8A8A !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 2px;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover {
  color: #1DA867 !important;
  border-bottom-color: #1DA867;
}
.woocommerce-account .woocommerce-MyAccount-content address {
  font-family: 'Graphik', sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #D0D0D0;
  font-style: normal;
}
.woocommerce-account .woocommerce-MyAccount-content > p {
  font-family: 'Graphik', sans-serif;
  font-size: 0.95rem;
  color: #B8B8B8;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: #0A0A0A;
  color: #FFFFFF;
  border-top: 2px solid #1DA867;
  border-radius: 0;
  font-family: 'Graphik', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

/* Hide WooCommerce star ratings per Soundplume brand (no commercial signaling) */
.woocommerce .star-rating,
.woocommerce-product-rating,
.wc-block-components-product-rating { display: none !important; }

/* Product quantity + variations */
.woocommerce .quantity .qty {
  background: #0A0A0A;
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0;
  padding: 0.75rem;
  width: 5rem;
  font-family: 'Graphik', sans-serif;
  font-size: 0.95rem;
  line-height: 1.2;
  height: auto;
}

/* Variation dropdowns on the single product page.
   The TH label cell is hidden — the dropdown's first <option> carries the
   label (e.g. "COLOR", "SIZE") via the woocommerce_dropdown_variation_attribute_options_args filter. */
.woocommerce div.product form.cart .variations {
  width: 100%;
  border: 0;
  margin-bottom: 1.25rem;
}
.woocommerce div.product form.cart .variations tr {
  display: block;
  margin-bottom: 0.85rem;
}
.woocommerce div.product form.cart .variations th.label,
.woocommerce div.product form.cart .variations td.label {
  display: none;
}
.woocommerce div.product form.cart .variations td.value {
  padding: 0;
  background: transparent;
  display: block;
  width: 100%;
}

.woocommerce .variations select,
.woocommerce div.product form.cart .variations select {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 0 !important;
  padding: 0.85rem 2.5rem 0.85rem 1rem !important;
  font-family: 'Graphik', sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.3 !important;
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M6 8 0 0h12z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 10px 7px !important;
  cursor: pointer;
  box-shadow: none;
  outline: 0;
}
.woocommerce .variations select option,
.woocommerce div.product form.cart .variations select option {
  background: #0A0A0A;
  color: #FFFFFF;
}
.woocommerce .variations select:focus,
.woocommerce div.product form.cart .variations select:focus {
  border-color: #1DA867 !important;
  outline: 0;
}

.woocommerce .reset_variations {
  font-family: 'Graphik', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8A8A8A;
  text-decoration: none;
  margin-top: 0.5rem;
  display: inline-block;
}
.woocommerce .reset_variations:hover { color: #1DA867; }

.woocommerce .single_variation_wrap .price {
  font-family: 'Graphik', sans-serif;
  font-size: 1rem;
  color: #FFFFFF;
  margin: 1rem 0;
}

/* Size Guide and other WooCommerce side links.
   The selector net is wide because various plugins (Printful, PFSG, Aelia, etc.)
   inject a "Size Guide" link inside the cart form with their own class. */
.woocommerce div.product form.cart a,
.woocommerce div.product .summary a,
.woocommerce .product_meta a,
.woocommerce .pfsg-size-guide-toggle,
.woocommerce .single-product a.size-guide,
a.pfsg-size-guide-toggle,
a.printful-size-guide-button {
  color: #8A8A8A !important;
  font-family: 'Graphik', sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 2px;
  display: inline-block;
  margin-bottom: 0.75rem;
}
.woocommerce div.product form.cart a:hover,
.woocommerce div.product .summary a:hover,
.woocommerce .product_meta a:hover,
.woocommerce .pfsg-size-guide-toggle:hover,
a.pfsg-size-guide-toggle:hover,
a.printful-size-guide-button:hover {
  color: #1DA867 !important;
  border-bottom-color: #1DA867;
}

/* Nav hover underline */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation a { transition: color .15s ease; }
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation a:hover { color: #1DA867; }

/* ========== Long-form article polish ========== */
.single-post .wp-block-post-content {
  font-family: 'Graphik', sans-serif;
  font-size: 1.125rem;
  line-height: 1.7;
  color: #E4E4E4;
}
.single-post .wp-block-post-content p { margin: 0 0 1.5rem; }
.single-post .wp-block-post-content > p:first-of-type::first-letter {
  font-family: 'Aime', Georgia, serif;
  float: left;
  font-size: 5rem;
  line-height: 0.85;
  padding: 0.5rem 0.75rem 0 0;
  color: #fff;
  font-weight: 400;
}

/* Heading hierarchy inside article body.
   h1 = article title (in cover, not body)
   h2 = major section — italic serif, smaller than title
   h3 = subsection — Graphik all-caps, spaced, green
   h4 = minor break — Aime small, muted
*/
.single-post .wp-block-post-content h2,
.single-post .wp-block-post-content .wp-block-heading.is-style-default:not(h3):not(h4):not(h5):not(h6) {
  font-family: 'Aime', Georgia, serif !important;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: #FFFFFF;
  margin: 3.5rem 0 1rem !important;
}

.single-post .wp-block-post-content h3 {
  font-family: 'Graphik', sans-serif !important;
  font-style: normal;
  font-weight: 500;
  font-size: 0.8rem !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #1DA867;
  margin: 3rem 0 1rem !important;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.single-post .wp-block-post-content h4 {
  font-family: 'Aime', Georgia, serif !important;
  font-weight: 400;
  font-size: 1.25rem !important;
  line-height: 1.3;
  color: #B8B8B8;
  margin: 2.5rem 0 0.75rem !important;
}

.single-post .wp-block-post-content blockquote,
.single-post .wp-block-post-content .wp-block-quote {
  margin: 3rem 0;
  padding: 0.5rem 0 0.5rem 1.25rem;
  border-left: 2px solid #1DA867;
  font-family: 'Aime', Georgia, serif;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.35;
  color: #fff;
}
.single-post .wp-block-post-content a {
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.3);
}
.single-post .wp-block-post-content a:hover {
  color: #1DA867;
  border-bottom-color: #1DA867;
}

/* ========== Cart / checkout refinements ========== */
.wc-block-cart,
.wc-block-checkout { color: #FFFFFF; }
.wc-block-cart .wc-block-cart-items__header,
.wc-block-cart-items .wc-block-cart-items__header {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #8A8A8A;
  font-family: 'Graphik', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.wc-block-cart-items__row,
.wc-block-components-order-summary__content,
.wc-block-checkout__main,
.wc-block-components-sidebar {
  background: transparent;
}
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
  background: #0A0A0A;
  display: block;
  width: 100%;
  height: auto;
}
/* Hide only duplicate <img>/<picture> siblings — never any other element
   (quantity badge etc.). Wide selector covers full cart, checkout
   order summary, and the mini-cart drawer (each uses a different class). */
[class*="cart-item__image"] img ~ img,
[class*="cart-item__image"] img ~ picture,
[class*="cart-item__image"] picture ~ img,
[class*="cart-item__image"] picture ~ picture,
[class*="order-summary-item__image"] img ~ img,
[class*="order-summary-item__image"] picture ~ picture,
.wc-block-mini-cart img ~ img,
.wc-block-mini-cart picture ~ picture,
.wc-block-mini-cart-items img ~ img,
.wc-block-mini-cart-items picture ~ picture,
.wc-block-mini-cart__drawer img ~ img,
.wc-block-mini-cart__drawer picture ~ picture,
/* Belt: also catch any image past the first via :nth-of-type — covers cases
   where the duplicates aren't direct siblings but nested in spans/divs. */
.wc-block-mini-cart img:nth-of-type(n+2),
.wc-block-mini-cart picture:nth-of-type(n+2),
.wc-block-mini-cart__drawer img:nth-of-type(n+2),
.wc-block-mini-cart__drawer picture:nth-of-type(n+2) {
  display: none !important;
}
[class*="cart-item__image"] picture > source,
[class*="order-summary-item__image"] picture > source,
.wc-block-mini-cart picture > source {
  display: none !important;
}
/* Suspenders: clamp the image cell in the mini-cart drawer to a single
   thumbnail's height with overflow:hidden, so even if duplicate images
   slip through any selector, only the first is visible. */
.wc-block-mini-cart .wc-block-cart-items td:first-child,
.wc-block-mini-cart [class*="cart-item__image"],
.wc-block-mini-cart-items [class*="cart-item__image"],
.wc-block-mini-cart__drawer [class*="cart-item__image"],
.wc-block-mini-cart__drawer .wc-block-cart-items td:first-child {
  width: 84px !important;
  height: 84px !important;
  max-height: 84px !important;
  overflow: hidden !important;
  display: block !important;
  position: relative;
}
.wc-block-mini-cart .wc-block-cart-items td:first-child img,
.wc-block-mini-cart [class*="cart-item__image"] img,
.wc-block-mini-cart-items [class*="cart-item__image"] img,
.wc-block-mini-cart__drawer [class*="cart-item__image"] img,
.wc-block-mini-cart__drawer .wc-block-cart-items td:first-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.wc-block-components-product-name,
.wc-block-cart-item__name,
.wc-block-components-order-summary-item__description h2 {
  font-family: 'Aime', Georgia, serif;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.2;
  color: #FFFFFF;
}
.wc-block-components-totals-wrapper,
.wc-block-components-totals-item {
  border-color: rgba(255,255,255,0.08);
  color: #FFFFFF;
}
.wc-block-components-totals-item__label {
  font-family: 'Graphik', sans-serif;
  font-size: 0.85rem;
  color: #B8B8B8;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: 'Aime', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 400;
  color: #FFFFFF;
}
.wc-block-components-text-input input,
.wc-block-components-text-input textarea {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 0 !important;
  font-family: 'Graphik', sans-serif !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus {
  border-color: #1DA867 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.wc-block-components-text-input label,
.wc-block-components-checkout-step__description {
  color: #8A8A8A !important;
  font-family: 'Graphik', sans-serif !important;
}

/* Select dropdowns and combobox (Country, State, City). WC Blocks renders
   these as white-bg by default — we override with high specificity. */
body .wc-block-components-form select,
body .wc-block-components-combobox,
body .wc-block-components-combobox-control,
body .wc-block-components-combobox input,
body .wc-block-components-combobox-control input,
body .wc-block-components-country-input select,
body .wc-block-components-state-input select,
body .wc-block-components-checkout-step select,
body .wc-blocks-components-select__select,
body .wc-blocks-components-select,
body input.wc-block-components-combobox-control__input {
  background-color: transparent !important;
  background: transparent !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 0 !important;
  font-family: 'Graphik', sans-serif !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
body .wc-block-components-form select,
body .wc-block-components-checkout-step select,
body .wc-blocks-components-select__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M6 8 0 0h12z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 10px 7px !important;
  padding-right: 2.5rem !important;
}
body .wc-block-components-form select option,
body .wc-block-components-checkout-step select option,
body .wc-blocks-components-select__select option {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
}
body .wc-block-components-combobox-control input::placeholder,
body input.wc-block-components-combobox-control__input::placeholder {
  color: rgba(255,255,255,0.45) !important;
}
body .wc-block-components-form select:focus,
body .wc-block-components-combobox input:focus,
body .wc-block-components-combobox-control input:focus,
body .wc-block-components-checkout-step select:focus,
body .wc-blocks-components-select__select:focus,
body input.wc-block-components-combobox-control__input:focus {
  border-color: #1DA867 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
/* Combobox autocomplete suggestion list */
body .wc-block-components-combobox-list,
body .components-form-token-field__suggestions-list,
body .wc-block-components-combobox__list,
body .components-popover .components-form-token-field__suggestions-list {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}
body .components-form-token-field__suggestion,
body .wc-block-components-combobox-list__option {
  color: #FFFFFF !important;
  background: transparent !important;
}
body .components-form-token-field__suggestion:hover,
body .components-form-token-field__suggestion.is-selected,
body .wc-block-components-combobox-list__option:hover,
body .wc-block-components-combobox-list__option--is-highlighted {
  background: #1DA867 !important;
  color: #FFFFFF !important;
}
/* Native select <option> rendering forced */
select option { background: #0A0A0A !important; color: #FFFFFF !important; }

/* Nuclear override for any combobox/select inside the WC Blocks Checkout.
   Uses [class*="combobox"] to catch every namespace variant the WC team
   has shipped (wc-block-, wc-blocks-, components-, etc.) without having
   to chase each one. Solid #000 bg so dropdowns are visible even when
   our other transparent rules don't catch them. */
body .wp-block-woocommerce-checkout [class*="combobox"],
body .wp-block-woocommerce-checkout [class*="combobox"] input,
body .wp-block-woocommerce-checkout [class*="combobox"] select,
body .wp-block-woocommerce-checkout input[type="text"],
body .wp-block-woocommerce-checkout input[type="email"],
body .wp-block-woocommerce-checkout input[type="tel"],
body .wp-block-woocommerce-checkout input[type="number"],
body .wp-block-woocommerce-checkout select,
body .wc-block-checkout [class*="combobox"],
body .wc-block-checkout [class*="combobox"] input,
body .wc-block-checkout [class*="combobox"] select {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 0 !important;
  font-family: 'Graphik', sans-serif !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
body .wp-block-woocommerce-checkout [class*="combobox"] input::placeholder,
body .wc-block-checkout [class*="combobox"] input::placeholder {
  color: rgba(255,255,255,0.5) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.5) !important;
}
/* Suggestions popover (the floating list of countries / states) */
body [class*="combobox"] [class*="suggestions"],
body [class*="combobox"] [role="listbox"],
body .components-popover [class*="suggestions"] {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}
body [class*="combobox"] [class*="suggestion"],
body [class*="combobox"] [role="option"] {
  color: #FFFFFF !important;
  background: transparent !important;
}
body [class*="combobox"] [class*="suggestion"]:hover,
body [class*="combobox"] [role="option"][aria-selected="true"],
body [class*="combobox"] [class*="suggestion"][aria-selected="true"] {
  background: #1DA867 !important;
  color: #FFFFFF !important;
}

/* Express payment area: keep the surrounding container transparent so the
   PayPal/Venmo/Apple Pay buttons sit on the black canvas with no white box. */
.wc-block-components-express-payment,
.wc-block-components-express-payment__content,
.wc-block-components-express-payment__event-buttons,
.wc-block-components-express-payment-continue-rule {
  background: transparent !important;
  border-color: rgba(255,255,255,0.1) !important;
}
.wc-block-components-express-payment__title-container,
.wc-block-components-express-payment-continue-rule {
  color: #8A8A8A !important;
  font-family: 'Graphik', sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

.wc-block-components-checkout-step__title,
.wc-block-components-title {
  font-family: 'Graphik', sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #8A8A8A !important;
  font-weight: 500 !important;
}
.wc-block-components-radio-control__option--checked { border-color: #1DA867 !important; }

/* ========== Product single polish ========== */
.single-product .breadcrumbs,
.wc-block-components-breadcrumbs {
  font-family: 'Graphik', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8A8A8A;
}
.single-product .product_meta {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-family: 'Graphik', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #8A8A8A;
}
.single-product .product_meta .sku_wrapper,
.single-product .product_meta .posted_in,
.single-product .product_meta .tagged_as {
  display: block;
  margin-bottom: 0.35rem;
}

/* Archive page header */
.wp-block-query .wp-block-post-title a:hover { color: #1DA867; }

/* ========== Classic WooCommerce checkout + cart (shortcode output) ========== */
.woocommerce-checkout,
.woocommerce-cart {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 2rem;
}
.woocommerce-checkout .entry-title,
.woocommerce-cart .entry-title,
.woocommerce-checkout h1.wp-block-post-title,
.woocommerce-cart h1.wp-block-post-title {
  font-family: 'Aime', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  padding: 1rem 0 2rem;
  margin: 0 0 3rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Checkout grid */
.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .woocommerce-checkout form.checkout { grid-template-columns: 1fr; gap: 3rem; }
}
.woocommerce-checkout #customer_details { grid-column: 1; }
.woocommerce-checkout h3#order_review_heading,
.woocommerce-checkout #order_review { grid-column: 2; }
.woocommerce-checkout h3#order_review_heading { margin-top: 0; }

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
.woocommerce-checkout h3#order_review_heading,
.woocommerce .cart_totals h2,
.woocommerce-cart h2.wc-bacs-bank-details-heading,
.woocommerce-shipping-fields__field-wrapper + * h3,
.woocommerce-checkout-review-order-table caption {
  font-family: 'Graphik', sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #8A8A8A !important;
  font-weight: 500 !important;
  margin: 0 0 1.5rem !important;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Form rows + inputs (classic) */
.woocommerce form .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
}
.woocommerce form .form-row label {
  font-family: 'Graphik', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8A8A8A;
  font-weight: 500;
}
.woocommerce form .form-row .required { color: #8A8A8A; text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout form.checkout .select2-container .select2-selection--single,
.select2-container--default .select2-selection--single {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 0 !important;
  padding: 0.75rem 0 !important;
  font-family: 'Graphik', sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.3 !important;
  height: auto !important;
  width: 100% !important;
  box-shadow: none !important;
  outline: 0 !important;
  transition: border-color .15s ease;
}
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder { color: rgba(255,255,255,0.3); }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { border-bottom-color: #1DA867 !important; }

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #FFFFFF !important;
  padding-left: 0 !important;
  line-height: 1.4 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  right: 0 !important;
}
.select2-dropdown {
  background: #0A0A0A !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #FFFFFF !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #1DA867 !important;
  color: #000000 !important;
}
.select2-search--dropdown .select2-search__field {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}

.woocommerce-form__label-for-checkbox,
.woocommerce form .form-row label.checkbox,
.woocommerce-billing-fields__field-wrapper .form-row label.checkbox,
.woocommerce-form-coupon-toggle a,
.showcoupon {
  font-family: 'Graphik', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8A8A8A;
}
.woocommerce-form__label-for-checkbox:hover,
.showcoupon:hover { color: #1DA867; }
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"] { accent-color: #1DA867; }

/* Order review table */
.woocommerce-checkout-review-order-table,
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: 'Graphik', sans-serif;
}
.woocommerce-checkout-review-order-table thead th,
.woocommerce table.shop_table thead th,
.woocommerce table.shop_table th {
  background: transparent !important;
  color: #8A8A8A !important;
  font-family: 'Graphik', sans-serif !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  padding: 0.85rem 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.woocommerce-checkout-review-order-table td,
.woocommerce table.shop_table td,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
  background: transparent !important;
  color: #FFFFFF;
  padding: 1rem 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  border-top: 0 !important;
  font-size: 0.95rem;
}
.woocommerce table.shop_table tfoot td .woocommerce-Price-amount,
.woocommerce table.shop_table tfoot th,
.woocommerce-checkout-review-order-table tfoot .order-total .woocommerce-Price-amount {
  font-family: 'Aime', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 400;
}
.woocommerce ul#shipping_method li { list-style: none; padding: 0.25rem 0; }

/* Coupon */
.woocommerce-form-coupon .form-row-first input {
  border: 1px solid rgba(255,255,255,0.2) !important;
  padding: 0.85rem 1rem !important;
}
.woocommerce-form-coupon button,
.woocommerce button.button.apply_coupon,
.woocommerce input[type="submit"].button,
.woocommerce button[name="apply_coupon"] {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  padding: 0.85rem 1.5rem !important;
  font-family: 'Graphik', sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  cursor: pointer;
}
.woocommerce-form-coupon button:hover { background: #FFFFFF !important; color: #000000 !important; }

/* Payment area */
.woocommerce-checkout #payment,
#payment {
  background: transparent !important;
  border: 0 !important;
  padding: 1.5rem 0 0;
}
#payment ul.payment_methods {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  list-style: none;
  margin: 0 0 1.5rem;
}
#payment ul.payment_methods li {
  background: transparent;
  padding: 1rem 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
#payment ul.payment_methods li > label {
  font-family: 'Graphik', sans-serif;
  font-size: 0.9rem;
  color: #FFFFFF;
}
#payment ul.payment_methods li img { margin-left: 0.5rem; }
#payment div.payment_box {
  background: transparent !important;
  color: #B8B8B8;
  font-family: 'Graphik', sans-serif;
  font-size: 0.85rem;
  padding: 1rem 0 !important;
  margin: 0.5rem 0 0 !important;
  border: 0 !important;
}
#payment div.payment_box::before { display: none !important; }

/* Place order */
#place_order,
.woocommerce #payment #place_order,
.woocommerce-checkout button[name="woocommerce_checkout_place_order"],
.woocommerce-checkout #place_order {
  background: #1DA867 !important;
  color: #000000 !important;
  font-family: 'Graphik', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
  padding: 1.15rem 2.5rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
  cursor: pointer;
  transition: background .15s ease;
  margin-top: 1.5rem !important;
}
#place_order:hover { background: #FFFFFF !important; }

/* Cart page (classic) */
.woocommerce-cart .cart-collaterals { margin-top: 3rem; }
.woocommerce-cart table.cart img {
  width: 80px;
  aspect-ratio: 4/5;
  object-fit: cover;
  background: #0A0A0A;
}
.woocommerce-cart table.cart td.product-name a {
  font-family: 'Aime', Georgia, serif;
  font-size: 1.1rem;
  color: #FFFFFF;
}
.woocommerce-cart table.cart td.product-name a:hover { color: #1DA867; }
.woocommerce-cart table.cart td.actions .coupon input.input-text {
  border-bottom: 1px solid rgba(255,255,255,0.2) !important;
  padding: 0.5rem 0 !important;
}
.woocommerce a.remove {
  color: #8A8A8A !important;
  font-family: 'Graphik', sans-serif;
  text-decoration: none;
  font-size: 1.2rem;
}
.woocommerce a.remove:hover { color: #CF2E2E !important; background: transparent !important; }

/* WC notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  border-top: 2px solid #1DA867 !important;
  border-radius: 0 !important;
  padding: 1rem 1.5rem !important;
  font-family: 'Graphik', sans-serif !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.04em;
}
.woocommerce-error { border-top-color: #CF2E2E !important; }
.woocommerce-message a, .woocommerce-info a { color: #1DA867 !important; }

/* WC Blocks notice banners — target deeply to beat WC core CSS order */
body .wc-block-components-notices .wc-block-components-notice-banner,
body div.wc-block-components-notice-banner,
body .wc-block-components-notice-banner.is-info,
body .wc-block-components-notice-banner.is-success,
body .wc-block-components-notice-banner.is-warning,
body .wc-block-components-notice-banner.is-error,
body .woocommerce-notices-wrapper .wc-block-components-notice-banner {
  background: #0A0A0A !important;
  background-color: #0A0A0A !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-top: 2px solid #1DA867 !important;
  border-radius: 0 !important;
  padding: 1rem 1.5rem !important;
  font-family: 'Graphik', sans-serif !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.02em !important;
  box-shadow: none !important;
}
body .wc-block-components-notice-banner.is-error { border-top-color: #CF2E2E !important; }
body .wc-block-components-notice-banner.is-warning { border-top-color: #FCB900 !important; }
body .wc-block-components-notice-banner * { color: #FFFFFF !important; }
body .wc-block-components-notice-banner__content {
  color: #FFFFFF !important;
  font-family: 'Graphik', sans-serif !important;
}
body .wc-block-components-notice-banner > svg,
body .wc-block-components-notice-banner .wc-block-components-notice-banner__content + svg {
  fill: #1DA867 !important;
  color: #1DA867 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
body .wc-block-components-notice-banner.is-error > svg { fill: #CF2E2E !important; color: #CF2E2E !important; }
body .wc-block-components-notice-banner a,
body .wc-block-components-notice-banner .wc-block-components-button {
  color: #1DA867 !important;
  background: transparent !important;
  text-decoration: none !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(29,168,103,0.4) !important;
  border-radius: 0 !important;
  padding: 0 0 2px !important;
  font-family: 'Graphik', sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
body .wc-block-components-notice-banner a:hover,
body .wc-block-components-notice-banner .wc-block-components-button:hover {
  color: #FFFFFF !important;
  border-bottom-color: #FFFFFF !important;
}
body .wc-block-components-notices,
body .woocommerce-notices-wrapper { margin: 1.5rem 0 !important; }

/* "No order / no products" empty-state message fallbacks */
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-orders-table__cell-order-actions,
.woocommerce-message .button,
.woocommerce-info .button {
  background: transparent !important;
  color: #1DA867 !important;
  border: 0 !important;
  padding: 0 !important;
  font-family: 'Graphik', sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(29,168,103,0.4) !important;
}

/* ========== Header utility (Search + Account + Mini Cart) ========== */
.sp-header-utility a:hover { color: #1DA867; }

.sp-header-search-icon {
  display: inline-flex;
  align-items: center;
  color: #FFFFFF;
  padding: 0;
  line-height: 0;
  transition: color .15s ease;
}
.sp-header-search-icon:hover { color: #1DA867; }
.sp-header-search-icon svg { display: block; }

/* Big search input on the /search/ results page */
.sp-search-hero { margin: 0; max-width: 680px; }
.sp-search-hero .wp-block-search__inside-wrapper {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  transition: border-color .15s ease;
}
.sp-search-hero .wp-block-search__inside-wrapper:focus-within {
  border-bottom-color: #1DA867 !important;
}
.sp-search-hero .wp-block-search__input {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 1rem 0 !important;
  font-family: 'Aime', Georgia, serif !important;
  font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
  font-style: italic;
  font-weight: 400 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.sp-search-hero .wp-block-search__input::placeholder {
  color: rgba(255,255,255,0.35);
  font-family: 'Aime', Georgia, serif;
  font-style: italic;
}
.sp-search-hero .wp-block-search__button {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 0 !important;
  padding: 0 1rem !important;
  transition: color .15s ease;
}
.sp-search-hero .wp-block-search__button:hover { color: #1DA867 !important; }
.sp-search-hero .wp-block-search__button svg { fill: currentColor; }

/* ========== Archive filter + sort ========== */
.sp-archive-toolbar {
  max-width: 1440px;
  margin: 0 auto 3rem;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.sp-archive-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.sp-archive-filters a {
  font-family: 'Graphik', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.65rem 1.25rem;
  border: 1px solid rgba(255,255,255,0.15);
  color: #FFFFFF;
  text-decoration: none;
  transition: all .15s ease;
}
.sp-archive-filters a:hover { border-color: #FFFFFF; }
.sp-archive-filters a.current,
.sp-archive-filters a.is-active,
.sp-archive-filters .current > a,
body.category .sp-archive-filters a[href*="/category/"][aria-current],
.sp-archive-filters p:has(> a.current) {
  background: #FFFFFF !important;
  color: #000000 !important;
  border-color: #FFFFFF !important;
}

/* Mobile: single horizontally-scrollable row of chips, edge-bleed so the
   user can tell there's more to scroll. No wrapping, no awkward orphans. */
@media (max-width: 781px) {
  .sp-archive-toolbar {
    padding: 0 !important;
    margin-bottom: 2rem !important;
    gap: 0.75rem !important;
  }
  .sp-archive-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    padding: 0 1rem 0.5rem;
    gap: 0.5rem;
    scroll-padding: 1rem;
  }
  .sp-archive-filters::-webkit-scrollbar { display: none; }
  .sp-archive-filters p { margin: 0; flex-shrink: 0; }
  .sp-archive-filters a {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.55rem 1rem;
    font-size: 0.65rem;
  }
}

/* Shop "sort by" (WooCommerce select) */
.woocommerce-ordering {
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.woocommerce-ordering::before {
  content: "Sort";
  font-family: 'Graphik', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8A8A8A;
}
.woocommerce-ordering select.orderby {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 0 !important;
  padding: 0.4rem 1.4rem 0.4rem 0 !important;
  font-family: 'Graphik', sans-serif !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M6 8 0 0h12z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0 center !important;
  cursor: pointer;
  outline: 0;
}
.woocommerce-ordering select.orderby option { background: #0A0A0A; color: #FFFFFF; }
.woocommerce .woocommerce-result-count { display: none; }
header .wc-block-mini-cart__button {
  background: transparent !important;
  padding: 0 !important;
  color: #FFFFFF !important;
}
header .wc-block-mini-cart__button:hover { color: #1DA867 !important; }
header .wc-block-mini-cart__badge {
  background: #1DA867 !important;
  color: #FFFFFF !important;
  font-family: 'Graphik', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  padding: 0 0.4rem !important;
  border-radius: 999px !important;
}

/* Mobile: kill WC Blocks Cart/Checkout's internal width caps so they
   fill the same horizontal space as the rest of the site templates. */
@media (max-width: 781px) {
  .wp-block-woocommerce-cart,
  .wp-block-woocommerce-checkout,
  .wc-block-cart,
  .wc-block-checkout,
  .wc-block-checkout__main,
  .wc-block-cart-items,
  .wc-block-components-sidebar-layout,
  .wc-block-components-main,
  .wc-block-components-sidebar {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Mini cart drawer matches the rest of the theme */
.wc-block-mini-cart__drawer {
  background: #000000;
  color: #FFFFFF;
}
.wc-block-mini-cart__title {
  font-family: 'Aime', Georgia, serif;
  font-weight: 400;
  font-size: 1.75rem;
  color: #FFFFFF;
}
.wc-block-mini-cart__footer {
  border-top: 1px solid rgba(255,255,255,0.08);
  background: transparent;
}

/* ========== Single article header (image-then-centered-title layout) ========== */
.sp-article-hero-image img,
.sp-article-hero-image .wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 80vh;
  object-fit: cover;
}
.sp-article-header .wp-block-post-title {
  font-size: clamp(2.25rem, 5.5vw, 4.75rem);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* ========== Single product layout ========== */
/* Constrain the product columns to wideSize and center on large screens.
   The main wrapper uses contentSize:100% (so child blocks can go full-bleed
   when needed), which means alignwide doesn't auto-center. We do it here. */
body.single-product main.wp-block-group.alignfull > .alignwide {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* ========== Responsive show/hide helpers ========== */
/* Mobile (<782px): hide things only meant for desktop. */
@media (max-width: 781px) {
  .sp-desktop-only,
  header .sp-desktop-only,
  header.wp-block-group .sp-desktop-only { display: none !important; }
  /* Mobile bar: logo + hamburger + cart icon (the cart stays reachable so
     users can always tap through to /cart/ after adding items). The empty
     "0" badge is hidden via JS so the icon only shows a count when > 0. */
  header .sp-header-search-icon,
  header .sp-header-account { display: none !important; }
  header .wp-block-woocommerce-mini-cart,
  header .wc-block-mini-cart {
    display: inline-flex !important;
  }
}
/* Desktop (≥782px): hide things only meant for the mobile overlay. */
@media (min-width: 782px) {
  .sp-mobile-only { display: none !important; }
}

/* ========== Custom desktop nav (raw HTML, bypasses wp:navigation) ========== */
.sp-desktop-nav {
  display: flex;
  gap: 2.5rem;
  align-items: center;
}
.sp-desktop-nav a {
  font-family: 'Graphik', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  color: #FFFFFF;
  text-decoration: none;
  transition: color .15s ease;
}
.sp-desktop-nav a:hover { color: #1DA867; }

/* Hamburger button (mobile-only). Three-line icon built from spans. */
.sp-hamburger-btn {
  background: transparent;
  border: 0;
  padding: 0.4rem;
  margin: 0;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 0;
}
.sp-hamburger-btn span {
  display: block;
  height: 2px;
  width: 100%;
  background: #FFFFFF;
  transition: transform .2s ease, opacity .2s ease;
}
.sp-hamburger-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.sp-hamburger-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sp-hamburger-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile cart link (icon + count badge) */
.sp-header-cart-link {
  position: relative;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 0.25rem;
}
.sp-header-cart-link:hover { color: #1DA867; }
.sp-header-cart-count {
  position: absolute;
  top: -2px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #1DA867;
  color: #FFFFFF;
  font-family: 'Graphik', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.sp-header-cart-count[data-sp-cart-count="0"],
.sp-header-cart-count:empty { display: none; }

/* Mobile overlay menu (full-screen black, big Aime links) */
.sp-mobile-menu {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 9999;
  padding: 5rem clamp(1.5rem, 5vw, 4rem) 3rem;
  overflow-y: auto;
}
.sp-mobile-menu[hidden] { display: none; }
.sp-mobile-menu__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: transparent;
  border: 0;
  color: #FFFFFF;
  font-size: 2.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.75rem;
}
.sp-mobile-menu__close:hover { color: #1DA867; }
.sp-mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2rem;
}
.sp-mobile-menu__nav a {
  font-family: 'Aime', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 400;
  color: #FFFFFF;
  text-decoration: none;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: color .15s ease;
}
.sp-mobile-menu__nav a:hover { color: #1DA867; }
.sp-mobile-menu__nav a:last-child { border-bottom: 0; }

/* When menu is open, prevent body scroll */
body.sp-menu-open { overflow: hidden; }

/* Mobile nav overlay: full-bleed black, big readable links, generous spacing.
   Affects only the responsive overlay state of wp:navigation. */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  padding: 5rem clamp(1.5rem, 5vw, 4rem) 3rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1.5rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 1.25rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
  border-bottom: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: 'Aime', Georgia, serif !important;
  font-size: 1.75rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 400 !important;
  color: #FFFFFF !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
  color: #1DA867 !important;
}
/* Hamburger trigger (icon button) and close button */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  color: #FFFFFF !important;
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
  fill: #FFFFFF;
  width: 28px;
  height: 28px;
}

/* ========== Featured hero ========== */
/* Full-bleed cover that fills the viewport beneath the (sticky) header.
   The header takes ~116px of vertical space, so the hero must be that much
   shorter to render fully on first paint with content visible at the bottom. */
:root { --sp-header-h: 116px; }
@media (max-width: 781px) { :root { --sp-header-h: 96px; } }

.sp-hero.wp-block-cover {
  height: calc(100vh - var(--sp-header-h)) !important;
  height: calc(100svh - var(--sp-header-h)) !important;
  min-height: 32rem !important;
  max-height: calc(100svh - var(--sp-header-h)) !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
  display: block !important;
}
/* Subtle uniform dim across the whole image (helps text legibility on
   bright photos like the CBS shot). Sits behind the inner-container. */
.sp-hero.wp-block-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0.22);
  pointer-events: none;
  z-index: 1;
}
/* Inner container is absolute, anchored to the bottom of the cover with a
   tall padding-top so its own background-image gradient fades into the
   image above it. Text lives inside this container — naturally above the
   gradient with zero stacking-context drama. */
.sp-hero .wp-block-cover__inner-container {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(8rem, 22vh, 16rem) clamp(1.5rem, 5vw, 5rem) clamp(2.5rem, 6vh, 5rem) !important;
  background-image: linear-gradient(180deg,
    rgba(0,0,0,0)   0%,
    rgba(0,0,0,0.5) 55%,
    rgba(0,0,0,0.95) 100%) !important;
  z-index: 2 !important;
}
.sp-hero .wp-block-cover__inner-container > .wp-block-group {
  max-width: 1440px;
  margin: 0 auto !important;
  padding: 0;
  text-align: left;
}
/* Force every text block inside the hero to left-align and start from the
   left edge — overrides the constrained-layout centering that WP applies
   when nested groups have layout:constrained. */
.sp-hero .wp-block-cover__inner-container .sp-hero-text,
.sp-hero .wp-block-cover__inner-container .sp-hero-text > * {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.sp-hero .wp-block-cover__inner-container .sp-hero-text .wp-block-post-title {
  max-width: 22ch;
  margin: 1rem 0 1.25rem !important;
}
.sp-hero .wp-block-cover__inner-container .sp-hero-text .wp-block-post-title a {
  color: #FFFFFF;
  text-decoration: none;
}
.sp-hero .wp-block-cover__inner-container .sp-hero-text .wp-block-post-terms {
  margin: 0 !important;
}

/* Kill the gap between the sticky header and the hero. The wp:query and
   wp:post-template wrappers each contribute default top margins; zero
   them all the way down to the cover. */
body.home main.wp-block-group,
body.home main.wp-block-group > *,
body.home main.wp-block-group > .wp-block-query,
body.home main.wp-block-group > .wp-block-query > .wp-block-post-template,
body.home main.wp-block-group > .wp-block-query > .wp-block-post-template > li,
body.home main.wp-block-group > .wp-block-query .sp-hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.home main.wp-block-group > .wp-block-query > .wp-block-post-template {
  list-style: none;
  padding-left: 0 !important;
}
.sp-hero .wp-block-post-title {
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 1;
  margin: 1rem 0 1.25rem;
  max-width: 18ch;
}
.sp-hero .wp-block-post-title a {
  color: #FFFFFF;
  text-decoration: none;
}
.sp-hero .wp-block-post-title a:hover { color: #FFFFFF; }
@media (max-width: 600px) {
  .sp-hero .wp-block-post-title { font-size: clamp(2.25rem, 9vw, 3.5rem); }
}