/* ============================================================
   World Wide Wo — global design system
   Black & gold. Music. Culture. Movement.
   ============================================================ */

:root {
  --wwo-black: #0a0a0a;
  --wwo-black-2: #111111;
  --wwo-black-3: #161616;
  --wwo-card: #141414;
  --wwo-card-2: #1a1a1a;
  --wwo-gold: #d9a441;
  --wwo-gold-2: #c8922f;
  --wwo-gold-soft: #e6b95c;
  --wwo-gold-dim: rgba(217, 164, 65, 0.35);
  --wwo-line: rgba(217, 164, 65, 0.18);
  --wwo-line-2: rgba(255, 255, 255, 0.07);
  --wwo-white: #f5f0e8;
  --wwo-grey: #9b968e;
  --wwo-grey-2: #6f6a63;
  --wwo-font-display: "Playfair Display", Georgia, serif;
  --wwo-font-body: "Poppins", "Segoe UI", sans-serif;
  --wwo-radius: 14px;
  --wwo-radius-sm: 8px;
}

html { scroll-behavior: smooth; }

body.wwo-theme {
  background-color: var(--wwo-black);
  color: var(--wwo-grey);
  font-family: var(--wwo-font-body);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

body.wwo-theme h1,
body.wwo-theme h2,
body.wwo-theme h3 {
  font-family: var(--wwo-font-display);
  color: var(--wwo-white);
  line-height: 1.12;
  margin: 0 0 0.5em;
}

body.wwo-theme h4,
body.wwo-theme h5,
body.wwo-theme h6 {
  font-family: var(--wwo-font-body);
  color: var(--wwo-white);
  letter-spacing: 0.06em;
  margin: 0 0 0.5em;
}

body.wwo-theme a { color: var(--wwo-gold); text-decoration: none; transition: color 0.25s ease; }
body.wwo-theme a:hover { color: var(--wwo-gold-soft); }

.wwo-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.wwo-content-area { padding: 64px 24px; }

/* ---------- Reusable utility classes (used inside Elementor too) ---------- */

.wwo-eyebrow {
  color: var(--wwo-gold);
  font-family: var(--wwo-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.wwo-card {
  background: linear-gradient(180deg, var(--wwo-card-2) 0%, var(--wwo-card) 100%);
  border: 1px solid var(--wwo-line);
  border-radius: var(--wwo-radius);
}

.wwo-gold-text { color: var(--wwo-gold) !important; }

/* ---------- Buttons (global + Elementor button widget harmony) ---------- */

.wwo-btn,
body.wwo-theme .elementor-button,
body.wwo-theme button,
body.wwo-theme input[type="submit"] {
  font-family: var(--wwo-font-body);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 13px;
  border-radius: var(--wwo-radius-sm);
  transition: all 0.25s ease;
  cursor: pointer;
}

body.wwo-theme button,
body.wwo-theme input[type="submit"] {
  background: linear-gradient(180deg, var(--wwo-gold-soft), var(--wwo-gold-2));
  color: #141005;
  border: none;
  padding: 14px 30px;
}

body.wwo-theme button:hover,
body.wwo-theme input[type="submit"]:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ---------- Fallback footer widgets ----------------------------------------
   The fallback header and footer now print the same markup as the Elementor
   templates (see inc/header-footer.php, styled by wwo-hf.css). The only piece
   left here is the Footer widget area, which footer.php renders above that
   markup so widgets already placed there do not disappear.
   ------------------------------------------------------------------------- */

.wwo-fallback-footer__widgets {
  border-top: 1px solid var(--wwo-line);
  padding: 40px 0;
  color: var(--wwo-grey);
  font-size: 14px;
}

/* ---------- Global form controls ----------
   CF7 and WooCommerce style their own inputs below, but WordPress core also
   prints unstyled ones (search forms, comment fields, bbPress). Without this
   they render as raw white browser boxes on the black page. */

body.wwo-theme input[type="text"],
body.wwo-theme input[type="search"],
body.wwo-theme input[type="email"],
body.wwo-theme input[type="url"],
body.wwo-theme input[type="tel"],
body.wwo-theme input[type="number"],
body.wwo-theme input[type="password"],
body.wwo-theme select,
body.wwo-theme textarea {
  background: #1c1c1c;
  border: 1px solid var(--wwo-line-2);
  border-radius: var(--wwo-radius-sm);
  color: var(--wwo-white);
  font-family: var(--wwo-font-body);
  font-size: 14px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

body.wwo-theme input:focus,
body.wwo-theme select:focus,
body.wwo-theme textarea:focus {
  border-color: var(--wwo-gold);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.14);
}

body.wwo-theme ::placeholder { color: var(--wwo-grey-2); opacity: 1; }

/* Search form — core prints label + input + submit inline with no styling. */
body.wwo-theme .search-form,
body.wwo-theme .wp-block-search__inside-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: 460px;
}

body.wwo-theme .search-form .search-field { flex: 1; min-width: 0; }
body.wwo-theme .search-form .screen-reader-text { position: absolute; left: -9999px; }

/* ---------- Contact Form 7 — styled to the WWO design ---------- */

body.wwo-theme .wpcf7 { color: var(--wwo-grey); }

body.wwo-theme .wpcf7 .wwo-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}

body.wwo-theme .wpcf7 .wwo-form-grid .wwo-span-2 { grid-column: span 2; }

@media (max-width: 767px) {
  body.wwo-theme .wpcf7 .wwo-form-grid { grid-template-columns: 1fr; }
  body.wwo-theme .wpcf7 .wwo-form-grid .wwo-span-2 { grid-column: span 1; }
}

body.wwo-theme .wpcf7 input[type="text"],
body.wwo-theme .wpcf7 input[type="email"],
body.wwo-theme .wpcf7 input[type="tel"],
body.wwo-theme .wpcf7 input[type="date"],
body.wwo-theme .wpcf7 input[type="url"],
body.wwo-theme .wpcf7 select,
body.wwo-theme .wpcf7 textarea {
  width: 100%;
  box-sizing: border-box;
  background: #1c1c1c;
  border: 1px solid var(--wwo-line-2);
  border-radius: var(--wwo-radius-sm);
  color: var(--wwo-white);
  font-family: var(--wwo-font-body);
  font-size: 14px;
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

body.wwo-theme .wpcf7 input:focus,
body.wwo-theme .wpcf7 select:focus,
body.wwo-theme .wpcf7 textarea:focus {
  border-color: var(--wwo-gold);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.14);
}

body.wwo-theme .wpcf7 ::placeholder { color: var(--wwo-grey-2); }

body.wwo-theme .wpcf7 select { appearance: none; }

body.wwo-theme .wpcf7 input[type="submit"] { width: auto; }

body.wwo-theme .wpcf7 form .wpcf7-response-output {
  border-color: var(--wwo-gold);
  border-radius: var(--wwo-radius-sm);
  color: var(--wwo-white);
  margin: 18px 0 0;
}

body.wwo-theme .wpcf7-not-valid-tip { color: #e07b5a; font-size: 12px; }

/* ---------- Search form (core widget + get_search_form()) ---------- */

body.wwo-theme .search-form,
body.wwo-theme form[role="search"] {
  display: flex;
  gap: 10px;
  align-items: stretch;
  max-width: 460px;
}

body.wwo-theme .search-form label { flex: 1; min-width: 0; margin: 0; }

body.wwo-theme input[type="search"],
body.wwo-theme .search-form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  background: #1c1c1c;
  border: 1px solid var(--wwo-line-2);
  border-radius: var(--wwo-radius-sm);
  color: var(--wwo-white);
  font-family: var(--wwo-font-body);
  font-size: 14px;
  padding: 13px 16px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  -webkit-appearance: none;
  appearance: none;
}

body.wwo-theme input[type="search"]:focus {
  border-color: var(--wwo-gold);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.14);
}

body.wwo-theme input[type="search"]::placeholder { color: var(--wwo-grey-2); }

body.wwo-theme .search-form input[type="submit"],
body.wwo-theme .search-form button[type="submit"] { flex: none; padding: 13px 26px; }

body.wwo-theme input[type="search"]::-webkit-search-cancel-button { filter: invert(1) opacity(0.45); }

/* ---------- WooCommerce — styled to the WWO design ---------- */

body.wwo-theme.woocommerce-page,
body.wwo-theme .woocommerce { color: var(--wwo-grey); }

.wwo-woo-wrap { padding-top: 48px; padding-bottom: 88px; }

/* Archive header — Woo prints the page title raw, so give it the display face
   and the same gold rule the Elementor templates use. */
body.wwo-theme .woocommerce-products-header { margin: 0 0 30px; }

body.wwo-theme .woocommerce-products-header__title,
body.wwo-theme .woocommerce .page-title {
  font-family: var(--wwo-font-display);
  color: var(--wwo-white);
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.12;
  margin: 0;
}

body.wwo-theme .woocommerce-products-header__title::after,
body.wwo-theme .woocommerce .page-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: var(--wwo-gold);
  margin-top: 16px;
}

body.wwo-theme .woocommerce-breadcrumb {
  color: var(--wwo-grey-2);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 20px;
}

body.wwo-theme .woocommerce-breadcrumb a { color: var(--wwo-grey); }
body.wwo-theme .woocommerce-breadcrumb a:hover { color: var(--wwo-gold); }

body.wwo-theme .woocommerce ul.products li.product,
body.wwo-theme .woocommerce-page ul.products li.product {
  background: linear-gradient(180deg, var(--wwo-card-2) 0%, var(--wwo-card) 100%);
  border: 1px solid var(--wwo-line);
  border-radius: var(--wwo-radius);
  padding: 18px 18px 22px;
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.wwo-theme .woocommerce ul.products li.product:hover {
  transform: translateY(-5px);
  border-color: var(--wwo-gold-dim);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

body.wwo-theme .woocommerce ul.products li.product img {
  border-radius: var(--wwo-radius-sm);
  margin-bottom: 14px;
}

body.wwo-theme .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wwo-font-body);
  color: var(--wwo-white);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0;
}

body.wwo-theme .woocommerce ul.products li.product .price {
  color: var(--wwo-gold);
  font-family: var(--wwo-font-body);
  font-weight: 600;
  font-size: 15px;
}

body.wwo-theme .woocommerce ul.products li.product .price del { color: var(--wwo-grey-2); }

body.wwo-theme .woocommerce ul.products li.product .button,
body.wwo-theme .woocommerce a.button,
body.wwo-theme .woocommerce button.button,
body.wwo-theme .woocommerce input.button,
body.wwo-theme .woocommerce #respond input#submit,
body.wwo-theme .woocommerce a.button.alt,
body.wwo-theme .woocommerce button.button.alt {
  background: linear-gradient(180deg, var(--wwo-gold-soft), var(--wwo-gold-2));
  color: #141005;
  border-radius: var(--wwo-radius-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 11px 22px;
  transition: filter 0.25s ease, transform 0.25s ease;
}

body.wwo-theme .woocommerce a.button:hover,
body.wwo-theme .woocommerce button.button:hover {
  background: linear-gradient(180deg, var(--wwo-gold-soft), var(--wwo-gold-2));
  color: #141005;
  filter: brightness(1.08);
  transform: translateY(-1px);
}

body.wwo-theme .woocommerce span.onsale {
  background: var(--wwo-gold);
  color: #141005;
  font-weight: 700;
  border-radius: 999px;
  min-height: auto;
  line-height: 1;
  padding: 8px 12px;
}

body.wwo-theme .woocommerce .star-rating span::before { color: var(--wwo-gold); }

body.wwo-theme .woocommerce nav.woocommerce-pagination ul {
  border: none;
}

body.wwo-theme .woocommerce nav.woocommerce-pagination ul li {
  border: none;
  margin: 0 4px;
}

body.wwo-theme .woocommerce nav.woocommerce-pagination ul li a,
body.wwo-theme .woocommerce nav.woocommerce-pagination ul li span {
  background: var(--wwo-card);
  border: 1px solid var(--wwo-line);
  border-radius: var(--wwo-radius-sm);
  color: var(--wwo-white);
  padding: 10px 16px;
}

body.wwo-theme .woocommerce nav.woocommerce-pagination ul li span.current,
body.wwo-theme .woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--wwo-gold);
  color: #141005;
}

/* Single product */
body.wwo-theme .woocommerce div.product .product_title { color: var(--wwo-white); }
body.wwo-theme .woocommerce div.product p.price { color: var(--wwo-gold); font-size: 22px; }
body.wwo-theme .woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--wwo-card);
  border-color: var(--wwo-line);
  border-radius: var(--wwo-radius-sm) var(--wwo-radius-sm) 0 0;
}
body.wwo-theme .woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--wwo-grey); }
body.wwo-theme .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--wwo-gold); }

/* Cart / checkout tables */
body.wwo-theme .woocommerce table.shop_table {
  border: 1px solid var(--wwo-line);
  border-radius: var(--wwo-radius);
  background: var(--wwo-card);
}
body.wwo-theme .woocommerce table.shop_table th,
body.wwo-theme .woocommerce table.shop_table td { border-color: var(--wwo-line-2); color: var(--wwo-grey); }
body.wwo-theme .woocommerce table.shop_table th { color: var(--wwo-white); }

body.wwo-theme .woocommerce form .form-row input.input-text,
body.wwo-theme .woocommerce form .form-row textarea,
body.wwo-theme .woocommerce form .form-row select {
  background: #1c1c1c;
  border: 1px solid var(--wwo-line-2);
  border-radius: var(--wwo-radius-sm);
  color: var(--wwo-white);
  padding: 12px 14px;
}

body.wwo-theme .woocommerce-info,
body.wwo-theme .woocommerce-message,
body.wwo-theme .woocommerce-error,
body.wwo-theme .woocommerce-noreviews {
  background: linear-gradient(180deg, var(--wwo-card-2) 0%, var(--wwo-card) 100%);
  border: 1px solid var(--wwo-line);
  border-left: 3px solid var(--wwo-gold);
  border-radius: var(--wwo-radius-sm);
  color: var(--wwo-white);
  font-size: 14px;
  padding: 18px 22px;
  margin: 0 0 24px;
  list-style: none;
}

body.wwo-theme .woocommerce-error { border-left-color: #e07b5a; }

body.wwo-theme .woocommerce-info li,
body.wwo-theme .woocommerce-message li,
body.wwo-theme .woocommerce-error li { list-style: none; margin: 0; padding: 0; }

body.wwo-theme .woocommerce-info a,
body.wwo-theme .woocommerce-message a { color: var(--wwo-gold); }

/* Woo draws these icons from its own webfont. When that font is missing the
   glyph renders as an empty box, so drop the pseudo-element and reclaim the
   3.5em of left padding Woo reserved for it. */
body.wwo-theme .woocommerce-info::before,
body.wwo-theme .woocommerce-message::before,
body.wwo-theme .woocommerce-error::before {
  content: none;
  display: none;
}

/* Breadcrumb + result count + ordering */
body.wwo-theme .woocommerce .woocommerce-result-count { color: var(--wwo-grey-2); }
body.wwo-theme .woocommerce .woocommerce-ordering select {
  background: #1c1c1c;
  border: 1px solid var(--wwo-line-2);
  color: var(--wwo-white);
  border-radius: var(--wwo-radius-sm);
  padding: 10px 14px;
}

/* ---------- Small helpers used by templates ---------- */

.wwo-divider-gold {
  width: 64px;
  height: 2px;
  background: var(--wwo-gold);
  border: none;
}

/* Live pulse dot */
.wwo-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4d4d;
  margin-right: 6px;
  animation: wwo-pulse 1.4s infinite;
}

@keyframes wwo-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(255, 77, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); }
}

/* Selection color */
::selection { background: var(--wwo-gold); color: #141005; }

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--wwo-black-2); }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--wwo-gold-2); }

/* ============================================================
   Elementor template components (classes used by the WWO kit)
   ============================================================ */

/* ---------- Header ---------- */

.wwo-header { position: sticky; top: 0; z-index: 999; }
body.wwo-scrolled .wwo-header { box-shadow: 0 10px 30px rgba(0,0,0,.55); }

/* HFE / generic nav menu inside header */
.wwo-header .hfe-nav-menu .menu-item a.hfe-menu-item,
.wwo-header nav a {
  color: var(--wwo-white);
  font-family: var(--wwo-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.wwo-header .hfe-nav-menu .menu-item a.hfe-menu-item:hover,
.wwo-header .hfe-nav-menu .menu-item.current-menu-item a.hfe-menu-item,
.wwo-header nav a:hover { color: var(--wwo-gold); }
.wwo-header .hfe-nav-menu .sub-menu {
  background: var(--wwo-black-2);
  border: 1px solid var(--wwo-line);
}

.wwo-header-icons { display: flex; align-items: center; gap: 18px; justify-content: flex-end; }
.wwo-header-icons a { color: var(--wwo-white); display: inline-flex; position: relative; }
.wwo-header-icons a:hover { color: var(--wwo-gold); }
.wwo-header-icons svg { width: 19px; height: 19px; }
.wwo-header-icons .wwo-cart-count {
  position: absolute; top: -7px; right: -9px;
  background: var(--wwo-gold); color: #141005;
  font-size: 10px; font-weight: 700; line-height: 1;
  border-radius: 999px; padding: 3px 5px;
}

/* ---------- Emblem (circular logo) ---------- */

.wwo-emblem {
  width: 230px; height: 230px; border-radius: 50%;
  border: 1px solid var(--wwo-gold-dim);
  display: flex; align-items: center; justify-content: center;
  position: relative; margin: 0 auto;
  background: radial-gradient(circle at 50% 40%, rgba(217,164,65,.08), transparent 65%);
}
.wwo-emblem::before {
  content: ""; position: absolute; inset: -14px;
  border-radius: 50%; border: 1px dashed rgba(217,164,65,.25);
}
.wwo-emblem img { width: 55%; height: auto; }

/* ---------- Feature cards ---------- */

.wwo-feature-card {
  background: linear-gradient(180deg, var(--wwo-card-2), var(--wwo-card));
  border: 1px solid var(--wwo-line);
  border-radius: var(--wwo-radius);
  padding: 38px 26px 30px;
  text-align: center;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  height: 100%;
}
.wwo-feature-card:hover {
  transform: translateY(-6px);
  border-color: var(--wwo-gold-dim);
  box-shadow: 0 20px 44px rgba(0,0,0,.5);
}
.wwo-feature-card .wwo-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-top: 18px;
  border: 1px solid var(--wwo-gold); border-radius: 50%;
  color: var(--wwo-gold); font-size: 14px;
  transition: all .25s ease;
}
.wwo-feature-card:hover .wwo-arrow { background: var(--wwo-gold); color: #141005; }

/* ---------- Stats ---------- */

.wwo-stat { text-align: center; padding: 22px 10px; }
.wwo-stat .elementor-icon-box-title,
.wwo-stat h3 { font-family: var(--wwo-font-body); font-weight: 700; font-size: 30px; color: var(--wwo-white); }
.wwo-stat .elementor-icon-box-description { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--wwo-grey-2); }

/* ---------- Waveform ---------- */

.wwo-waveform { display: flex; align-items: center; gap: 3px; height: 56px; }
.wwo-waveform span {
  flex: 1; min-width: 2px; border-radius: 2px;
  background: var(--wwo-gold);
  height: 30%;
  opacity: .85;
  animation: wwo-eq 1.15s ease-in-out infinite alternate;
}
.wwo-waveform span:nth-child(3n)  { height: 65%; opacity:.6; }
.wwo-waveform span:nth-child(4n)  { height: 90%; }
.wwo-waveform span:nth-child(5n)  { height: 45%; opacity:.5; }
.wwo-waveform span:nth-child(7n)  { height: 75%; opacity:.7; }
.wwo-waveform.wwo-waveform-static span { animation: none; }
@keyframes wwo-eq { from { transform: scaleY(.55); } to { transform: scaleY(1.25); } }

/* ---------- Player card ---------- */

.wwo-player-time { display:flex; justify-content:flex-end; color: var(--wwo-grey); font-size: 13px; letter-spacing:.08em; margin: 10px 0 4px; }
.wwo-player-controls { display: flex; align-items: center; justify-content: center; gap: 26px; }
.wwo-player-controls a { color: var(--wwo-white); display: inline-flex; }
.wwo-player-controls a:hover { color: var(--wwo-gold); }
.wwo-player-controls svg { width: 20px; height: 20px; }
.wwo-player-controls .wwo-play {
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(180deg, var(--wwo-gold-soft), var(--wwo-gold-2));
  color: #141005; align-items: center; justify-content: center;
}
.wwo-player-controls .wwo-play:hover { color:#141005; filter: brightness(1.08); }
.wwo-player-controls .wwo-play svg { width: 22px; height: 22px; }

/* ---------- Track list ---------- */

.wwo-track-list { list-style: none; margin: 0; padding: 0; counter-reset: track; }
.wwo-track-list li {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 6px; border-bottom: 1px solid var(--wwo-line-2);
  color: var(--wwo-white); font-size: 15px;
}
.wwo-track-list li::before {
  counter-increment: track;
  content: counter(track, decimal-leading-zero);
  color: var(--wwo-gold); font-size: 13px; font-weight: 600; letter-spacing:.08em;
}
.wwo-track-list li:hover { color: var(--wwo-gold-soft); cursor: pointer; }
.wwo-track-list .wwo-track-time { margin-left: auto; color: var(--wwo-grey-2); font-size: 13px; }

/* ---------- Live badge & video ---------- */

.wwo-live-row { display: flex; align-items: center; justify-content: space-between; }
.wwo-live-badge {
  display: inline-flex; align-items: center;
  background: var(--wwo-gold); color: #141005;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  border-radius: 6px; padding: 6px 12px; text-transform: uppercase;
}
.wwo-live-badge .wwo-live-dot { background: #141005; animation: none; }
.wwo-viewers { color: var(--wwo-grey); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

.wwo-video { position: relative; border-radius: var(--wwo-radius); overflow: hidden; border: 1px solid var(--wwo-line); }
.wwo-video img { display: block; width: 100%; height: auto; }
.wwo-video .wwo-video-live {
  position: absolute; top: 14px; left: 14px;
}
.wwo-video .wwo-video-viewers { position: absolute; top: 18px; left: 88px; color: #fff; font-size: 12px; letter-spacing:.1em; }
.wwo-video .wwo-video-close { position: absolute; top: 12px; right: 14px; color: #fff; font-size: 18px; opacity:.8; }
.wwo-video-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 16px;
  background: linear-gradient(0deg, rgba(0,0,0,.85), transparent);
  color: #fff;
}
.wwo-video-bar svg { width: 16px; height: 16px; }
.wwo-video-bar a { color: #fff; display: inline-flex; }
.wwo-video-bar a:hover { color: var(--wwo-gold); }
.wwo-video-bar .wwo-live-label { color: #ff4d4d; font-size: 11px; font-weight: 700; letter-spacing: .14em; display: flex; align-items: center; }
.wwo-video-bar .wwo-right { margin-left: auto; display: flex; gap: 16px; }

/* ---------- Chat ---------- */

.wwo-chat { display: flex; flex-direction: column; gap: 0; }
.wwo-chat-msg { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--wwo-line-2); }
.wwo-chat-msg:last-of-type { border-bottom: none; }
.wwo-chat-msg img { width: 34px; height: 34px; border-radius: 50%; }
.wwo-chat-msg .wwo-chat-name { color: var(--wwo-white); font-size: 13px; font-weight: 600; margin: 0; }
.wwo-chat-msg .wwo-chat-text { color: var(--wwo-grey); font-size: 13px; margin: 2px 0 0; }
.wwo-chat-msg .wwo-chat-time { margin-left: auto; color: var(--wwo-grey-2); font-size: 11px; white-space: nowrap; }
.wwo-chat-input { display: flex; gap: 10px; margin-top: 14px; }
body.wwo-theme .wwo-chat-input input {
  flex: 1; min-width: 0; background: #1c1c1c; border: 1px solid var(--wwo-line-2);
  border-radius: 8px; color: var(--wwo-white); padding: 12px 14px; font-family: var(--wwo-font-body); font-size: 13px;
}
body.wwo-theme .wwo-chat-input input:focus { outline: none; border-color: var(--wwo-gold); }
body.wwo-theme .wwo-chat-input button {
  background: linear-gradient(180deg, var(--wwo-gold-soft), var(--wwo-gold-2));
  border: none; border-radius: 8px; color: #141005; padding: 0 16px; cursor: pointer;
  display: flex; align-items: center; flex: none;
}
body.wwo-theme .wwo-chat-input button svg { width: 16px; height: 16px; }

/* ---------- Product cards ---------- */

.wwo-product-card {
  background: linear-gradient(180deg, var(--wwo-card-2), var(--wwo-card));
  border: 1px solid var(--wwo-line);
  border-radius: var(--wwo-radius);
  padding: 18px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  height: 100%;
}
.wwo-product-card:hover { transform: translateY(-5px); border-color: var(--wwo-gold-dim); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.wwo-product-card img { border-radius: var(--wwo-radius-sm); width: 100%; height: auto; display:block; }
.wwo-product-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.wwo-product-name { color: var(--wwo-white); font-size: 14px; font-weight: 500; letter-spacing: .04em; margin: 0; }
.wwo-product-price { color: var(--wwo-gold); font-size: 14px; font-weight: 600; margin: 2px 0 0; }
.wwo-product-cart {
  width: 38px; height: 38px; border-radius: 8px;
  border: 1px solid var(--wwo-gold);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--wwo-gold); flex: none;
}
.wwo-product-cart:hover { background: var(--wwo-gold); color: #141005; }
.wwo-product-cart svg { width: 16px; height: 16px; }

/* ---------- Newsletter ---------- */

.wwo-newsletter { display: flex; margin-top: 12px; }
body.wwo-theme .wwo-newsletter input {
  flex: 1; background: #1c1c1c; border: 1px solid var(--wwo-line-2); border-right: none;
  border-radius: 8px 0 0 8px; color: var(--wwo-white); padding: 12px 14px; font-family: var(--wwo-font-body); font-size: 13px; min-width: 0;
}
body.wwo-theme .wwo-newsletter input:focus { outline: none; border-color: var(--wwo-gold); }
body.wwo-theme .wwo-newsletter button {
  background: linear-gradient(180deg, var(--wwo-gold-soft), var(--wwo-gold-2));
  border: none; border-radius: 0 8px 8px 0; color: #141005; padding: 0 16px; cursor: pointer;
  flex: none;
}

/* ---------- Footer ---------- */

.wwo-footer { border-top: 1px solid var(--wwo-line); }
.wwo-footer h4 { color: var(--wwo-gold); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }
.wwo-footer .elementor-icon-list-item a { color: var(--wwo-grey); font-size: 14px; }
.wwo-footer .elementor-icon-list-item a:hover { color: var(--wwo-gold); }
.wwo-footer-bottom { border-top: 1px solid var(--wwo-line-2); }

/* ---------- Quote ---------- */

.wwo-quote {
  font-family: var(--wwo-font-display);
  font-size: 30px; line-height: 1.4; color: var(--wwo-white);
}
.wwo-quote .wwo-q { color: var(--wwo-gold); font-size: 54px; line-height: 0; vertical-align: -14px; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .wwo-emblem { width: 190px; height: 190px; }
}
@media (max-width: 767px) {
  .wwo-quote { font-size: 22px; }
  .wwo-live-row { flex-wrap: wrap; gap: 8px; }
}

/* ============================================================
   Responsive — mobile & tablet refinements
   ============================================================ */

@media (max-width: 1024px) {
  .wwo-feature-card { padding: 28px 18px 24px; }
  .wwo-header .hfe-nav-menu__toggle { margin-left: auto; }
  .wwo-player-controls { gap: 20px; }
}

@media (max-width: 767px) {
  body.wwo-theme { font-size: 15px; }

  /* Non-Elementor content headings scale down gracefully */
  .wwo-content-area h1 { font-size: clamp(28px, 8vw, 40px); }
  .wwo-content-area h2 { font-size: clamp(24px, 6.5vw, 32px); }

  .wwo-content-area { padding: 40px 18px; }

  /* Header */
  .wwo-header .hfe-nav-menu__toggle,
  .wwo-header .hfe-nav-menu-toggle { margin-left: auto; }
  .wwo-header-icons { gap: 12px; }
  .wwo-header-icons svg { width: 17px; height: 17px; }

  /* Emblem */
  .wwo-emblem { width: 150px; height: 150px; }
  .wwo-emblem::before { inset: -10px; }

  /* Cards breathe less on small screens */
  .wwo-feature-card { padding: 26px 18px 22px; }

  /* Player & waveform */
  .wwo-waveform { height: 44px; }
  .wwo-player-controls { gap: 16px; }
  .wwo-player-controls .wwo-play { width: 50px; height: 50px; }

  /* Track list */
  .wwo-track-list li { font-size: 14px; padding: 11px 4px; }

  /* Video overlay bar */
  .wwo-video-bar { gap: 10px; padding: 8px 10px; }
  .wwo-video-bar svg { width: 14px; height: 14px; }
  .wwo-video .wwo-video-viewers { left: 80px; top: 16px; }

  /* Chat */
  .wwo-chat-msg { gap: 10px; padding: 9px 0; }
  .wwo-chat-msg img { width: 30px; height: 30px; }
  .wwo-chat-input input { padding: 11px 12px; }

  /* Product cards */
  .wwo-product-card { padding: 12px; }
  .wwo-product-name { font-size: 13px; }
  .wwo-product-price { font-size: 13px; }
  .wwo-product-cart { width: 32px; height: 32px; border-radius: 7px; }
  .wwo-product-cart svg { width: 14px; height: 14px; }

  /* Newsletter & quote */
  .wwo-newsletter input { padding: 11px 12px; }
  .wwo-quote { font-size: 21px; }
  .wwo-quote .wwo-q { font-size: 40px; vertical-align: -10px; }

  /* Buttons slightly tighter */
  body.wwo-theme .elementor-button { letter-spacing: .08em; }

  /* WooCommerce: 2-up product grid on phones */
  body.wwo-theme .woocommerce ul.products[class*="columns-"] li.product {
    width: 48% !important;
    float: left;
    clear: none;
    margin: 0 4% 4% 0 !important;
  }
  body.wwo-theme .woocommerce ul.products[class*="columns-"] li.product:nth-child(2n) {
    margin-right: 0 !important;
  }
}

@media (max-width: 380px) {
  .wwo-player-controls { gap: 12px; }
  .wwo-header-icons { gap: 9px; }
}