/*
Theme Name: CyboBuy
Theme URI: https://cybobuy.com
Author: CyboBuy
Description: Premium luminous-ice cyber commerce theme — near-black surfaces, cool silver, electric ice-cyan AI accent. Built for 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
Tags: e-commerce, dark, custom-colors, full-width-template
*/

/* ===== Design tokens: luminous-ice cyber palette ===== */
: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:       #c7d0dc;   /* cool silver text */
  --cy-silver-dim:   #7d8998;   /* muted silver */
  --cy-ice:          #6fe3ff;   /* electric ice-cyan accent */
  --cy-ice-strong:   #22d3ee;   /* strong ice */
  --cy-ice-glow:     rgba(111, 227, 255, 0.35);
  --cy-line:         rgba(111, 227, 255, 0.14);
  --cy-line-soft:    rgba(199, 208, 220, 0.10);
  --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-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 ice glow backdrop */
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.10), transparent 60%),
    radial-gradient(700px 420px at 95% 0%,  rgba(111, 227, 255, 0.07), transparent 55%);
}
body > * { position: relative; z-index: 1; }

a { color: var(--cy-ice); text-decoration: none; transition: color .18s ease, opacity .18s ease; }
a:hover { color: #fff; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cy-font-mono);
  color: #eef4fb;
  letter-spacing: -0.01em;
  font-weight: 650;
  line-height: 1.2;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(1.9rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }

p { margin: 0 0 1em; }

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--cy-ice); color: #04121a; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cy-black-2); }
::-webkit-scrollbar-thumb { background: #22303f; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--cy-ice-strong); }

/* ===== Layout ===== */
.cy-wrap { max-width: var(--cy-maxw); margin: 0 auto; padding: 0 22px; }
.cy-section { padding: 64px 0; }

/* ===== 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);
}
.cy-header .cy-wrap { display: flex; align-items: center; gap: 26px; min-height: 68px; }
.cy-brand { display: flex; align-items: center; gap: 10px; font-family: var(--cy-font-mono); font-weight: 700; font-size: 1.22rem; color: #fff; letter-spacing: -0.02em; }
.cy-brand .cy-logo-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--cy-ice);
  box-shadow: 0 0 12px var(--cy-ice-glow), 0 0 26px var(--cy-ice-glow);
}
.cy-brand b { color: var(--cy-ice); }
.cy-nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.cy-nav a { font-size: .94rem; color: var(--cy-silver); font-weight: 500; }
.cy-nav a:hover { color: var(--cy-ice); }
.cy-nav li { list-style: none; display: inline-block; }
.cy-nav ul { margin: 0; padding: 0; display: flex; gap: 22px; align-items: center; }

/* Buttons */
.cy-btn, button.cy-btn, .wp-block-button__link, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--cy-font-mono); font-weight: 600; font-size: .92rem;
  padding: 13px 24px; border-radius: var(--cy-radius-sm);
  border: 1px solid var(--cy-ice);
  background: linear-gradient(180deg, rgba(111,227,255,0.16), rgba(111,227,255,0.06));
  color: #eafbff; cursor: pointer;
  transition: all .18s ease; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(111,227,255,0.06), 0 8px 24px -12px var(--cy-ice-glow);
}
.cy-btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover {
  background: linear-gradient(180deg, rgba(111,227,255,0.28), rgba(111,227,255,0.14));
  color: #fff; transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(111,227,255,0.25), 0 14px 34px -14px var(--cy-ice-glow);
}
.cy-btn.cy-btn-solid { background: var(--cy-ice-strong); color: #04121a; border-color: var(--cy-ice-strong); }
.cy-btn.cy-btn-solid:hover { background: #6ff0ff; color: #04121a; }
.cy-btn.cy-btn-ghost { background: transparent; border-color: var(--cy-line); color: var(--cy-silver); }

/* ===== Hero ===== */
.cy-hero { padding: 92px 0 76px; text-align: center; position: relative; }
.cy-hero .cy-eyebrow {
  display: inline-block; font-family: var(--cy-font-mono); font-size: .76rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--cy-ice);
  border: 1px solid var(--cy-line); border-radius: 999px; padding: 7px 16px; margin-bottom: 24px;
  background: rgba(111,227,255,0.05);
}
.cy-hero h1 { max-width: 900px; margin: 0 auto .5em; }
.cy-hero h1 .cy-glow { color: var(--cy-ice); text-shadow: 0 0 24px var(--cy-ice-glow); }
.cy-hero p.cy-lead { max-width: 640px; margin: 0 auto 34px; color: var(--cy-silver-dim); font-size: 1.12rem; }
.cy-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ===== Cards / grid ===== */
.cy-grid { display: grid; gap: 22px; }
.cy-grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.cy-grid.cols-4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.cy-card {
  background: linear-gradient(180deg, var(--cy-surface), var(--cy-black-2));
  border: 1px solid var(--cy-line-soft);
  border-radius: var(--cy-radius);
  padding: 26px; position: relative; overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cy-card:hover { border-color: var(--cy-line); transform: translateY(-3px); box-shadow: 0 18px 44px -24px rgba(0,0,0,.9); }
.cy-card h3 { margin-bottom: .4em; }
.cy-card p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cy-card p { color: var(--cy-silver-dim); margin: 0; font-size: .95rem; }

/* ===== WooCommerce product loop ===== */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; margin: 0; padding: 0; }
.woocommerce ul.products li.product {
  background: linear-gradient(180deg, var(--cy-surface), var(--cy-black-2));
  border: 1px solid var(--cy-line-soft);
  border-radius: var(--cy-radius);
  padding: 0 0 20px; overflow: hidden; margin: 0 !important; width: auto !important;
  float: none !important; list-style: none;
  display: flex !important; flex-direction: column;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  position: relative;
}
.woocommerce ul.products li.product:hover { border-color: var(--cy-ice); transform: translateY(-4px); box-shadow: 0 22px 50px -26px var(--cy-ice-glow); }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1; }
.woocommerce ul.products li.product a img { width: 100%; aspect-ratio: 4/3; object-fit: cover; margin: 0 0 16px; border-bottom: 1px solid var(--cy-line-soft); background: var(--cy-black-2); display: block; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--cy-font-mono); font-size: .97rem; color: #eef4fb; padding: 0 18px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.9em; text-overflow: ellipsis;
}
.woocommerce ul.products li.product { display: flex; flex-direction: column; }
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link { flex: 1; }
.woocommerce ul.products li.product .button { margin-top: auto; align-self: flex-start; }
.woocommerce ul.products li.product .price { padding: 6px 18px 0; color: var(--cy-ice); font-family: var(--cy-font-mono); font-weight: 700; }
.woocommerce ul.products li.product .price del { color: var(--cy-silver-dim); }
.woocommerce ul.products li.product .button { margin: 10px 18px 0; }
.woocommerce ul.products li.product .onsale {
  background: var(--cy-ice-strong); color: #04121a; border-radius: 999px;
  font-family: var(--cy-font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px; min-height: auto; line-height: 1.4;
}
.woocommerce .star-rating span::before, .woocommerce .star-rating::before { color: var(--cy-ice); }

/* Single product */
.woocommerce div.product { color: var(--cy-silver); }
.woocommerce div.product .product_title { font-family: var(--cy-font-mono); color: #eef4fb; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--cy-ice); font-family: var(--cy-font-mono); font-weight: 700; }
.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--cy-radius); border: 1px solid var(--cy-line-soft); }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: var(--cy-surface); border-color: var(--cy-line-soft); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--cy-surface-2); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--cy-silver); font-family: var(--cy-font-mono); }
.woocommerce div.product form.cart div.quantity .qty,
.woocommerce .quantity input.qty {
  background: var(--cy-black-2); border: 1px solid var(--cy-line); color: var(--cy-silver); border-radius: var(--cy-radius-sm); padding: 10px;
}
.woocommerce table.shop_table { border: 1px solid var(--cy-line-soft); border-radius: var(--cy-radius); background: var(--cy-black-2); color: var(--cy-silver); }
.woocommerce table.shop_table th { font-family: var(--cy-font-mono); color: #eef4fb; }
.woocommerce-cart .cart-collaterals .cart_totals { background: var(--cy-surface); border: 1px solid var(--cy-line-soft); border-radius: var(--cy-radius); padding: 22px; }
.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register,
.woocommerce-checkout #customer_details, .woocommerce-checkout #order_review {
  background: var(--cy-surface); border: 1px solid var(--cy-line-soft); border-radius: var(--cy-radius); padding: 22px;
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .woocommerce .select2-container--default .select2-selection--single {
  background: var(--cy-black-2) !important; border: 1px solid var(--cy-line) !important; color: var(--cy-silver) !important; border-radius: var(--cy-radius-sm) !important; padding: 11px 13px !important;
}
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error {
  background: var(--cy-surface); border-top-color: var(--cy-ice); color: var(--cy-silver); border-radius: var(--cy-radius-sm);
}
.woocommerce-info::before, .woocommerce-message::before { color: var(--cy-ice); }

/* ===== Forms ===== */
input[type=text], input[type=email], input[type=search], input[type=tel], input[type=url], input[type=number], textarea, select {
  width: 100%; background: var(--cy-black-2); border: 1px solid var(--cy-line); color: var(--cy-silver);
  border-radius: var(--cy-radius-sm); padding: 12px 14px; font-family: var(--cy-font-body); font-size: .95rem;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--cy-ice); box-shadow: 0 0 0 3px rgba(111,227,255,0.12); }

/* ===== Footer ===== */
.cy-footer { border-top: 1px solid var(--cy-line); margin-top: 72px; padding: 44px 0 30px; background: var(--cy-black-2); }
.cy-footer .cy-wrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.cy-footer .cy-fine { color: var(--cy-silver-dim); font-size: .86rem; font-family: var(--cy-font-mono); }
.cy-footer nav a { margin-left: 18px; font-size: .88rem; color: var(--cy-silver-dim); }
.cy-footer nav a:hover { color: var(--cy-ice); }

/* ===== AI concierge widget ===== */
.cy-concierge {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9ff0ff, var(--cy-ice-strong));
  box-shadow: 0 0 0 1px rgba(111,227,255,.4), 0 0 26px var(--cy-ice-glow);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: none; transition: transform .2s ease;
}
.cy-concierge:hover { transform: scale(1.07); }
.cy-concierge svg { width: 26px; height: 26px; fill: #04121a; }
.cy-concierge-panel {
  position: fixed; right: 22px; bottom: 92px; z-index: 91;
  width: min(370px, calc(100vw - 44px));
  max-height: min(560px, calc(100vh - 130px));
  background: linear-gradient(180deg, var(--cy-surface), var(--cy-black-2));
  border: 1px solid var(--cy-line); border-radius: var(--cy-radius);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(111,227,255,.08);
  display: none; flex-direction: column; overflow: hidden;
}
.cy-concierge-panel.open { display: flex; }
.cy-concierge-head { padding: 15px 18px; border-bottom: 1px solid var(--cy-line-soft); display: flex; align-items: center; gap: 10px; }
.cy-concierge-head .cy-logo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cy-ice); box-shadow: 0 0 10px var(--cy-ice-glow); }
.cy-concierge-head strong { font-family: var(--cy-font-mono); font-size: .92rem; color: #eef4fb; }
.cy-concierge-head button { margin-left: auto; background: none; border: none; color: var(--cy-silver-dim); cursor: pointer; font-size: 1.1rem; }
.cy-concierge-log { padding: 16px 18px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.cy-msg { max-width: 88%; padding: 10px 14px; border-radius: 12px; font-size: .9rem; line-height: 1.5; }
.cy-msg.bot { background: var(--cy-surface-2); border: 1px solid var(--cy-line-soft); color: var(--cy-silver); align-self: flex-start; }
.cy-msg.user { background: rgba(111,227,255,.14); border: 1px solid var(--cy-line); color: #eafbff; align-self: flex-end; }
.cy-concierge-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--cy-line-soft); }
.cy-concierge-form input { flex: 1; }
.cy-concierge-form button { padding: 0 16px; }

/* Utility */
.cy-mono { font-family: var(--cy-font-mono); }
.cy-ice { color: var(--cy-ice); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

body { padding-bottom: 90px; }

@media (max-width: 782px) {
  .cy-nav { display: none; }
  .cy-section { padding: 44px 0; }
  .cy-hero { padding: 60px 0 48px; }
}