/*
Theme Name: GreenRex Theme v1
Theme URI: https://greenrexfilament.com
Author: GreenRex Filament
Description: Нормальная WooCommerce-тема GreenRex Filament: редактируемое меню WordPress, главная, каталог, B2B, контакты, аккаунт, корзина, оформление заказа.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: greenrex
*/

:root {
  --grx-bg: #050505;
  --grx-card: rgba(255,255,255,.065);
  --grx-card-2: rgba(255,255,255,.095);
  --grx-line: rgba(255,255,255,.16);
  --grx-text: #ffffff;
  --grx-muted: rgba(255,255,255,.72);
  --grx-green: #36ff55;
  --grx-red: #ff3b32;
  --grx-yellow: #ffe14a;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 28% -10%, rgba(54,255,85,.16), transparent 34%),
    radial-gradient(circle at 80% 10%, rgba(255,59,50,.08), transparent 30%),
    var(--grx-bg);
  color: var(--grx-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

a { color: inherit; }

.grx-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.grx-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px);
  background: rgba(5,5,5,.76);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.grx-header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}

.grx-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 950;
  letter-spacing: -.04em;
  font-size: 20px;
}

.grx-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--grx-green), #0b8f24);
  box-shadow: 0 0 24px rgba(54,255,85,.35);
}

.grx-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.grx-nav a {
  display: inline-flex;
  padding: 10px 12px;
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-size: 14px;
  font-weight: 750;
}

.grx-nav a:hover,
.grx-nav .current-menu-item > a,
.grx-nav .current_page_item > a {
  color: #fff;
  background: rgba(255,255,255,.09);
}

.grx-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.grx-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  text-decoration: none;
  font-weight: 850;
  font-size: 13px;
}

.grx-header-btn--green {
  background: var(--grx-green);
  color: #041107;
  border-color: var(--grx-green);
}

.grx-main { flex: 1; }

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

.grx-hero {
  min-height: 640px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
}

.grx-kicker {
  display: inline-flex;
  color: var(--grx-green);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 950;
  margin-bottom: 16px;
}

.grx-hero h1,
.grx-page-hero h1 {
  font-size: clamp(54px, 8.5vw, 112px);
  line-height: .9;
  letter-spacing: -.075em;
  margin: 0 0 24px;
}

.grx-hero p,
.grx-page-hero p,
.grx-section-head p {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5;
  color: var(--grx-muted);
  margin: 0;
}

.grx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.grx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
  text-decoration: none;
  font-weight: 900;
}

.grx-btn--primary {
  background: var(--grx-green);
  border-color: var(--grx-green);
  color: #041107;
}

.grx-hero-visual {
  min-height: 420px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% 35%, rgba(54,255,85,.24), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.16);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.grx-spool-symbol {
  width: min(76%, 430px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 46px solid rgba(164,111,58,.78);
  background: conic-gradient(from 90deg, #171717, #333, #101010, #303030, #171717);
  position: relative;
  box-shadow: inset 0 0 40px rgba(0,0,0,.6), 0 30px 80px rgba(0,0,0,.45);
}

.grx-spool-symbol::before {
  content: "GREENREX";
  position: absolute;
  inset: 39%;
  border-radius: 50%;
  background: #0c0c0c;
  color: var(--grx-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -.04em;
}

.grx-section-head {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 28px;
}

.grx-section-head h2,
.grx-panel h2 {
  font-size: clamp(40px, 6vw, 78px);
  line-height: .92;
  letter-spacing: -.065em;
  margin: 0;
}

.grx-material-grid,
.grx-project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.grx-material-card,
.grx-project-card,
.grx-panel,
.grx-content-card {
  border-radius: 28px;
  background: var(--grx-card);
  border: 1px solid var(--grx-line);
}

.grx-material-card {
  min-height: 310px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  transition: .2s ease;
}

.grx-material-card:hover {
  transform: translateY(-4px);
  border-color: rgba(54,255,85,.65);
  background: var(--grx-card-2);
}

.grx-chip {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  margin-bottom: auto;
  box-shadow: 0 0 32px rgba(255,255,255,.25);
}

.grx-chip--green { background: var(--grx-green); }
.grx-chip--yellow { background: var(--grx-yellow); }
.grx-chip--red { background: var(--grx-red); }

.grx-material-card h3 {
  font-size: 42px;
  letter-spacing: -.05em;
  margin: 24px 0 12px;
}

.grx-material-card p {
  color: var(--grx-muted);
  line-height: 1.45;
  margin: 0 0 22px;
}

.grx-material-card strong {
  display: inline-flex;
  width: fit-content;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--grx-green);
  color: #041107;
}

.grx-panel {
  padding: 34px;
  margin-top: 18px;
}

.grx-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 26px;
}

.grx-stat {
  padding: 20px;
  border-radius: 20px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.1);
}

.grx-stat strong {
  display: block;
  font-size: 28px;
  letter-spacing: -.04em;
}

.grx-stat span {
  display: block;
  color: var(--grx-muted);
  margin-top: 4px;
}

.grx-page-hero {
  max-width: 980px;
  margin-bottom: 42px;
}

.grx-content-card {
  padding: 28px;
}

.grx-content-card p,
.grx-content-card li {
  color: var(--grx-muted);
  line-height: 1.55;
}

.grx-footer {
  border-top: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.4);
}

.grx-footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 34px 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: rgba(255,255,255,.62);
  font-size: 14px;
}

/* WooCommerce base */
.woocommerce div.product {
  max-width: 1240px;
  margin: 0 auto;
  padding: 50px 24px;
}

.woocommerce div.product .product_title {
  font-size: clamp(42px, 6vw, 74px);
  letter-spacing: -.06em;
  line-height: .92;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--grx-green);
  font-size: 28px;
  font-weight: 950;
}

.woocommerce div.product form.cart .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--grx-green) !important;
  color: #041107 !important;
  border-radius: 999px !important;
  min-height: 46px;
  font-weight: 950 !important;
  border: none !important;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: rgba(255,255,255,.08);
  border-top-color: var(--grx-green);
  color: #fff;
}

/* Variation image buttons */
.variable-items-wrapper[data-attribute_name*="color"] {
  display: grid !important;
  grid-template-columns: repeat(4, 90px) !important;
  gap: 10px !important;
}

.variable-items-wrapper[data-attribute_name*="color"] .variable-item {
  width: 90px !important;
  height: 90px !important;
  padding: 4px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #111 !important;
  border: 1px solid rgba(255,255,255,.35) !important;
}

.variable-items-wrapper[data-attribute_name*="color"] .variable-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.variable-items-wrapper[data-attribute_name*="color"] .variable-item.selected {
  border: 3px solid var(--grx-green) !important;
  box-shadow: 0 0 18px rgba(54,255,85,.35) !important;
}

/* Weight buttons */
.variable-items-wrapper[data-attribute_name*="weight"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.variable-items-wrapper[data-attribute_name*="weight"] .variable-item {
  background: #1b1b1b !important;
  color: #fff !important;
  border: 1px solid #666 !important;
  width: auto !important;
  min-width: 80px !important;
  height: 42px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.variable-items-wrapper[data-attribute_name*="weight"] .variable-item span,
.variable-items-wrapper[data-attribute_name*="weight"] .variable-item .variable-item-span {
  display: block !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.variable-items-wrapper[data-attribute_name*="weight"] .variable-item.selected {
  border: 2px solid var(--grx-green) !important;
  background: #202820 !important;
}

/* Remove variation loading spinner */
.woo-variation-swatches .wvs-loading,
.woo-variation-swatches .wvs-loaded::before,
.woo-variation-swatches .variable-items-wrapper::before,
.woo-variation-swatches .variable-items-wrapper::after,
.variations_form .blockUI,
.variations_form .blockOverlay,
.single_variation_wrap .blockUI,
.single_variation_wrap .blockOverlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: transparent !important;
}

.woocommerce-product-gallery__trigger {
  display: none !important;
}

@media (max-width: 900px) {
  .grx-header-inner {
    grid-template-columns: 1fr;
  }

  .grx-nav ul {
    justify-content: flex-start;
  }

  .grx-hero,
  .grx-section-head,
  .grx-material-grid,
  .grx-project-grid,
  .grx-stats {
    grid-template-columns: 1fr;
  }

  .grx-hero {
    min-height: auto;
  }

  .variable-items-wrapper[data-attribute_name*="color"] {
    grid-template-columns: repeat(3, 82px) !important;
  }

  .variable-items-wrapper[data-attribute_name*="color"] .variable-item {
    width: 82px !important;
    height: 82px !important;
  }
}