/*
Theme Name: PUSK CMS
Description: Minimal dark commerce theme for cms.pusk.uz — matches the pusk.uz design system (void background, ignition accent, editorial type). Serves the WooCommerce surfaces (shop, product, cart, checkout, account); everything else lives on pusk.uz.
Version: 1.0
Author: PUSK
*/

/* ============ TOKENS (mirror app/globals.css) ============ */
:root {
  --void: #07080a;
  --panel: #111317;
  --ignition: #00e5ff;
  --depth: #0a5c9e;
  --crew: #ffffff;
  --readout: #9aa4b2;
  --edge: rgba(255, 255, 255, 0.09);
  --edge-bright: rgba(255, 255, 255, 0.16);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(20px, 5vw, 96px);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--void); }

body {
  margin: 0;
  background: var(--void);
  color: var(--crew);
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .pusk-display {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--crew);
}

a { color: var(--crew); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--ignition); }
::selection { background: var(--ignition); color: var(--void); }
:focus-visible { outline: 2px solid var(--ignition); outline-offset: 4px; border-radius: 4px; }

/* ============ HEADER ============ */
.pusk-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter);
  border-bottom: 1px solid var(--edge);
}
.pusk-logo {
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: 1.15rem; letter-spacing: 0.35em; text-indent: 0.35em;
}
.pusk-nav { display: flex; gap: clamp(14px, 2.5vw, 30px); flex-wrap: wrap; align-items: center; }
.pusk-nav a { font-size: 0.9rem; color: var(--readout); }
.pusk-nav a:hover, .pusk-nav a.current { color: var(--crew); }
.pusk-lang { font-family: "Space Grotesk", monospace; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--readout); display: inline-flex; gap: 6px; }
.pusk-lang a { color: var(--readout); }
.pusk-lang a.current { color: var(--crew); }

/* ============ MAIN ============ */
.pusk-main {
  max-width: 1080px; margin: 0 auto;
  padding: clamp(40px, 8vh, 80px) var(--gutter) 12vh;
  min-height: 60vh;
}
.pusk-main h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 0 0 32px; }

/* ============ FOOTER ============ */
.pusk-footer {
  border-top: 1px solid var(--edge);
  padding: 24px var(--gutter);
  display: flex; flex-wrap: wrap; gap: 24px 40px;
  align-items: center; justify-content: space-between;
  color: var(--readout); font-size: 0.85rem;
}
.pusk-footer a { color: var(--readout); font-size: 0.85rem; }
.pusk-footer a:hover { color: var(--crew); }
.pusk-foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.pusk-pay { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.pusk-pay img { display: block; filter: brightness(0) invert(1); opacity: 0.72; }

/* ============ WOOCOMMERCE — dark overrides ============ */
/* Blocks and classic templates ship light surfaces; pull everything onto the palette. */

.pusk-main :is(p, li, td, th, label, span, div) { color: inherit; }
.pusk-main .woocommerce, .pusk-main .wp-block-group { color: var(--crew); }

/* Buttons: primary = ignition */
.pusk-main :is(button, .button, .wc-block-components-button, input[type="submit"], a.checkout-button, .single_add_to_cart_button) {
  background: var(--ignition) !important;
  color: var(--void) !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 12px 22px !important;
  transition: opacity 0.2s;
  text-transform: none;
}
.pusk-main :is(button, .button, .wc-block-components-button, input[type="submit"]):hover { opacity: 0.85; }
.pusk-main .wc-block-components-button:disabled { opacity: 0.4; }

/* Quantity steppers and small controls shouldn't turn cyan */
.pusk-main :is(.wc-block-components-quantity-selector button, .quantity .qty) {
  background: transparent !important; color: var(--crew) !important;
}

/* Inputs */
.pusk-main :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], textarea, select, .wc-block-components-text-input input, .wc-block-components-combobox-control input) {
  background: var(--panel) !important;
  color: var(--crew) !important;
  border: 1px solid var(--edge-bright) !important;
  border-radius: 10px !important;
}
.pusk-main .wc-block-components-text-input label,
.pusk-main .wc-block-components-combobox-control label,
.pusk-main .wc-block-components-checkbox__label,
.pusk-main .wc-block-components-radio-control__label { color: var(--readout) !important; }

/* Cards, panels, tables, totals */
.pusk-main :is(.wc-block-components-sidebar, .wc-block-cart-items, .cart_totals, .wc-block-components-totals-wrapper, .wc-block-components-order-summary, .woocommerce-checkout-review-order, table.shop_table) {
  background: transparent !important;
  color: var(--crew) !important;
  border-color: var(--edge) !important;
}
.pusk-main table.shop_table { border: 1px solid var(--edge) !important; border-radius: 14px; }
.pusk-main table.shop_table :is(td, th) { border-color: var(--edge) !important; background: transparent !important; }
.pusk-main :is(.wc-block-cart-item__wrap, .wc-block-components-order-summary-item) { color: var(--crew); }
.pusk-main :is(.wc-block-components-product-name, .wc-block-components-product-metadata__description, .wc-block-components-formatted-money-amount) { color: var(--crew) !important; }
.pusk-main .wc-block-components-product-metadata__description { color: var(--readout) !important; }
.pusk-main :is(.wc-block-components-panel, .wc-block-components-totals-item) { border-color: var(--edge) !important; }

/* Section titles inside blocks */
.pusk-main :is(.wc-block-components-title, .wc-block-components-checkout-step__title, .wc-block-components-sidebar .wp-block-heading) { color: var(--crew) !important; }
.pusk-main .wc-block-components-checkout-step__description { color: var(--readout) !important; }

/* Links inside commerce content */
.pusk-main .woocommerce a:not(.button), .pusk-main .wc-block-components-product-name { color: var(--crew); }
.pusk-main .woocommerce a:not(.button):hover { color: var(--ignition); }

/* Notices */
.pusk-main :is(.woocommerce-message, .woocommerce-info, .wc-block-components-notice-banner) {
  background: var(--panel) !important; color: var(--crew) !important;
  border-color: var(--edge-bright) !important; border-radius: 12px;
}

/* Product grid (shop archive). WooCommerce's own stylesheet floats li.product at
   percentage widths (columns-N) — neutralize that so the grid controls layout. */
.pusk-main ul.products { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.pusk-main ul.products li.product { width: 100% !important; float: none !important; margin: 0 !important; background: var(--panel); border: 1px solid var(--edge); border-radius: 18px; padding: 18px; text-align: left; }
.pusk-main ul.products li.product img { border-radius: 12px; width: 100% !important; height: auto; max-width: none; }
.pusk-main ul.products .woocommerce-loop-product__title { font-family: "Space Grotesk", sans-serif; font-size: 1.05rem; }
.pusk-main .price { color: var(--readout); }
.pusk-main .price bdi { color: var(--crew); }
@media (max-width: 900px) { .pusk-main ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pusk-main ul.products { grid-template-columns: 1fr; } }

/* Single product */
.pusk-main .woocommerce-product-gallery img { border-radius: 18px; }
.pusk-main .woocommerce-Tabs-panel, .pusk-main .woocommerce-tabs ul.tabs li a { color: var(--crew); }
.pusk-main .related.products > h2 { margin-top: 48px; }

/* My account */
.pusk-main .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.pusk-main .woocommerce-MyAccount-navigation a { color: var(--readout); }
.pusk-main .woocommerce-MyAccount-navigation a:hover { color: var(--crew); }

/* Kill stray light backgrounds anywhere in commerce content */
.pusk-main :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .woocommerce) {
  background: transparent !important;
}