/*
Theme Name: CyboBuy DE
Theme URI: https://cybobuy.de
Author: CyboBuy
Description: CyboBuy.de — Feinschmuck-Theme. Teil der CyboBuy-Markenfamilie (Near-Black, Silber, Eis-Cyan) mit warmer Gold-Note für Massivgold- und Silberschmuck. Gebaut für WooCommerce.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: cybobuy-de
Tags: e-commerce, dark, custom-colors, full-width-template
*/

/* ===== Design tokens: CyboBuy brand family — jewelry branch ===== */
:root {
  --cy-black:        #05070a;   /* near-black base */
  --cy-black-2:      #0a0e14;   /* raised surface */
  --cy-surface:      #111722;   /* card surface */
  --cy-surface-2:    #18202e;   /* hover surface */
  --cy-silver:       #d8dee8;   /* cool silver text */
  --cy-silver-dim:   #8b95a3;   /* muted silver */
  --cy-ice:          #6fe3ff;   /* electric ice-cyan accent */
  --cy-ice-strong:   #22d3ee;   /* strong ice */
  --cy-ice-glow:     rgba(111, 227, 255, 0.35);
  /* Jewelry branch adds a warm precious-metal note */
  --cy-gold:         #e8c37a;   /* warm gold accent */
  --cy-gold-dim:     #b8924a;
  --cy-gold-glow:    rgba(232, 195, 122, 0.30);
  --cy-line:         rgba(111, 227, 255, 0.14);
  --cy-line-soft:    rgba(216, 222, 232, 0.10);
  --cy-line-gold:    rgba(232, 195, 122, 0.20);
  --cy-radius:       14px;
  --cy-radius-sm:    9px;
  --cy-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cy-font-mono:    "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  --cy-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cy-maxw:         1240px;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cy-black);
  color: var(--cy-silver);
  font-family: var(--cy-font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambient backdrop: ice + warm gold bloom */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(34, 211, 238, 0.09), transparent 60%),
    radial-gradient(700px 420px at 95% 0%,  rgba(232, 195, 122, 0.06), transparent 55%);
}

a { color: var(--cy-ice); text-decoration: none; }
a:hover { color: #a8eeff; }
img { max-width: 100%; height: auto; }

.cy-wrap { max-width: var(--cy-maxw); margin: 0 auto; padding: 0 22px; position: relative; z-index: 1; }

/* ===== Header ===== */
.cy-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5, 7, 10, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cy-line-soft);
}
.cy-header .cy-wrap { display: flex; align-items: center; gap: 22px; min-height: 70px; }
.cy-logo { display: flex; align-items: center; gap: 10px; font-family: var(--cy-font-mono); font-weight: 700; font-size: 1.12rem; letter-spacing: .02em; color: #eef4fb; }
.cy-logo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cy-ice); box-shadow: 0 0 10px var(--cy-ice-glow); }
.cy-logo .cy-de { color: var(--cy-gold); font-weight: 600; }
.cy-nav { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.cy-nav a { color: var(--cy-silver-dim); font-size: .93rem; }
.cy-nav a:hover { color: var(--cy-silver); }

/* ===== Hero ===== */
.cy-hero { padding: 84px 0 64px; position: relative; }
.cy-eyebrow {
  display: inline-block; font-family: var(--cy-font-mono); font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cy-gold); border: 1px solid var(--cy-line-gold);
  padding: 6px 13px; border-radius: 999px; margin-bottom: 22px;
}
.cy-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.1; margin: 0 0 20px; font-weight: 700; letter-spacing: -0.02em; color: #f3f7fc; }
.cy-glow { color: var(--cy-ice); text-shadow: 0 0 26px var(--cy-ice-glow); }
.cy-lead { font-size: 1.12rem; color: var(--cy-silver-dim); max-width: 620px; margin: 0 0 30px; }
.cy-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ===== Buttons ===== */
.cy-btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--cy-font-body);
  font-size: .95rem; font-weight: 600; padding: 12px 22px; border-radius: var(--cy-radius-sm);
  border: 1px solid var(--cy-line); background: transparent; color: var(--cy-silver);
  cursor: pointer; transition: all .15s ease;
}
.cy-btn:hover { border-color: var(--cy-ice); color: #fff; }
.cy-btn-solid { background: var(--cy-ice-strong); border-color: var(--cy-ice-strong); color: #04121a; }
.cy-btn-solid:hover { background: #67e8f9; border-color: #67e8f9; color: #04121a; }
.cy-btn-gold { background: var(--cy-gold); border-color: var(--cy-gold); color: #1a1206; }
.cy-btn-gold:hover { background: #f0d19a; border-color: #f0d19a; color: #1a1206; }

/* ===== Feature grid ===== */
.cy-features { padding: 40px 0 70px; }
.cy-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.cy-feature {
  background: var(--cy-surface); border: 1px solid var(--cy-line-soft); border-radius: var(--cy-radius);
  padding: 24px;
}
.cy-feature h3 { margin: 0 0 8px; font-size: 1.02rem; color: #eef4fb; }
.cy-feature p { margin: 0; color: var(--cy-silver-dim); font-size: .94rem; }

/* ===== Sections ===== */
.cy-section { padding: 56px 0; }
.cy-section-head { margin-bottom: 28px; }
.cy-section-head h2 { font-size: 1.7rem; margin: 0 0 8px; color: #f3f7fc; letter-spacing: -0.01em; }
.cy-section-head p { margin: 0; color: var(--cy-silver-dim); }

/* ===== Product cards ===== */
.cy-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.cy-product { background: var(--cy-surface); border: 1px solid var(--cy-line-soft); border-radius: var(--cy-radius); overflow: hidden; transition: border-color .15s ease, transform .15s ease; }
.cy-product:hover { border-color: var(--cy-line-gold); transform: translateY(-2px); }
.cy-product img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: var(--cy-black-2); }
.cy-product-body { padding: 16px; }
.cy-product-body h3 { margin: 0 0 6px; font-size: .99rem; color: #eef4fb; }
.cy-product-price { font-family: var(--cy-font-mono); color: var(--cy-gold); font-size: .95rem; }

/* ===== Footer ===== */
.cy-footer { border-top: 1px solid var(--cy-line-soft); padding: 40px 0; margin-top: 40px; color: var(--cy-silver-dim); font-size: .9rem; }
.cy-footer .cy-wrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.cy-footer a { color: var(--cy-silver-dim); }
.cy-footer a:hover { color: var(--cy-silver); }

/* ===== Legal pages ===== */
.cy-legal { max-width: 780px; margin: 0 auto; }
.cy-legal h1 { color: #f3f7fc; font-size: 1.9rem; }
.cy-legal h2 { color: #eef4fb; font-size: 1.15rem; margin-top: 34px; }
.cy-legal p, .cy-legal li { color: var(--cy-silver-dim); }

/* ===== WooCommerce light integration ===== */
.woocommerce ul.products li.product { background: var(--cy-surface); border: 1px solid var(--cy-line-soft); border-radius: var(--cy-radius); padding: 14px; }
.woocommerce ul.products li.product a img { border-radius: var(--cy-radius-sm); }
.woocommerce .price, .woocommerce-Price-amount { color: var(--cy-gold) !important; font-family: var(--cy-font-mono); }
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background: var(--cy-ice-strong); color: #04121a; border-radius: var(--cy-radius-sm); font-weight: 600;
}
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--cy-gold); color: #1a1206; }
.woocommerce a.button:hover, .woocommerce button.button:hover { background: #67e8f9; color: #04121a; }
.woocommerce-message, .woocommerce-info { border-top-color: var(--cy-ice); }

/* ===== GPSR product meta (Art. 19) ===== */
.cy-gpsr { margin-top: 22px; padding: 14px 16px; border: 1px solid var(--cy-line-soft); border-radius: var(--cy-radius-sm); background: var(--cy-black-2); font-size: .84rem; color: var(--cy-silver-dim); }
.cy-gpsr dt { font-family: var(--cy-font-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cy-silver-dim); }
.cy-gpsr dd { margin: 2px 0 10px; color: var(--cy-silver); }

@media (max-width: 640px) {
  .cy-hero { padding: 56px 0 40px; }
  .cy-nav { gap: 14px; }
}