/* ==========================================================
   SvetHome — Brand Design Tokens
   Замените HEX-значения на точные из файла «svethome ВВ-5»
   ========================================================== */

:root {
  /* ── Backgrounds ── */
  --svh-paper:       #FAF8F4;
  --svh-paper-2:     #F4EFE5;
  --svh-mist:        #EFEBE2;
  --svh-surface:     #FFFFFF;

  /* ── Text ── */
  --svh-ink:         #161616;
  --svh-ink-2:       #2A2A2A;
  --svh-stone:       #6B6B6B;
  --svh-stone-2:     #9A958A;

  /* ── Lines & Borders ── */
  --svh-line:        #E6E2D8;
  --svh-line-2:      #D6D1C3;

  /* ── Accent (Amber) ── */
  --svh-accent:      #E8A22A;
  --svh-accent-2:    #C8861A;
  --svh-accent-soft: #FBEBC7;
  --svh-accent-hover:#D69420;

  /* ── Semantic ── */
  --svh-ok:          #2E7D5B;
  --svh-ok-soft:     #DDEFE3;
  --svh-warn:        #B57B14;
  --svh-warn-soft:   #F8EAC6;
  --svh-bad:         #B23A3A;
  --svh-bad-soft:    #F8DADA;

  /* ── Radii ── */
  --svh-radius:      14px;
  --svh-radius-sm:   8px;
  --svh-radius-lg:   22px;

  /* ── Shadows ── */
  --svh-shadow-1:    0 1px 0 rgba(20,18,12,.04), 0 1px 2px rgba(20,18,12,.04);
  --svh-shadow-2:    0 1px 0 rgba(20,18,12,.04), 0 12px 30px -16px rgba(20,18,12,.18);
  --svh-shadow-card: 0 2px 8px rgba(20,18,12,.06);

  /* ── Layout ── */
  --svh-max:         1280px;
  --svh-gutter:      clamp(20px, 4vw, 56px);

  /* ── Typography ── */
  --svh-font-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --svh-font-body:    "Manrope", system-ui, sans-serif;
  --svh-font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --svh-font-logo:    "Oswald", "Arial Narrow", sans-serif;

  /* ── Transitions ── */
  --svh-ease:        cubic-bezier(.4, 0, .2, 1);
  --svh-duration:    0.2s;
}

/* ── Google Fonts import ── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Oswald:wght@600;700&family=Unbounded:wght@400;700;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   Global overrides for Blocksy
   ============================================================ */

body {
  font-family: var(--svh-font-body);
  background-color: var(--svh-paper);
  color: var(--svh-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6,
.entry-title,
.woocommerce-loop-product__title {
  font-family: var(--svh-font-display);
  color: var(--svh-ink);
  letter-spacing: -0.02em;
}

/* ── Links ── */
a {
  color: var(--svh-accent-2);
  transition: color var(--svh-duration) var(--svh-ease);
}
a:hover {
  color: var(--svh-accent-hover);
}

/* ── Selection ── */
::selection {
  background: var(--svh-accent-soft);
  color: var(--svh-ink);
}

/* ============================================================
   Header / Topbar
   ============================================================ */

.site-header,
header[data-id="type-1"] {
  background: rgba(250, 248, 244, 0.88) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--svh-line);
}

/* ── Brand logo ── */
.svh-brandmark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.svh-brandmark__sun {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
.svh-brandmark__text {
  font-family: var(--svh-font-logo);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--svh-ink);
  transform: scaleX(0.72);
  transform-origin: left center;
}

/* ============================================================
   Buttons (WooCommerce + global)
   ============================================================ */

.wp-element-button,
.wc-block-components-button,
button.button,
.button,
input[type="submit"],
.wp-block-button__link,
.ct-button,
.added_to_cart {
  font-family: var(--svh-font-body) !important;
  font-weight: 600 !important;
  background: var(--svh-accent) !important;
  color: var(--svh-ink) !important;
  border: none !important;
  border-radius: var(--svh-radius-sm) !important;
  padding: 12px 28px !important;
  transition: all var(--svh-duration) var(--svh-ease);
  text-transform: none !important;
  letter-spacing: 0;
}
.wp-element-button:hover,
.wc-block-components-button:hover,
button.button:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.ct-button:hover,
.added_to_cart:hover {
  background: var(--svh-accent-hover) !important;
  transform: translateY(-1px);
  box-shadow: var(--svh-shadow-2);
}

/* Secondary / outline buttons */
.button.alt,
.wp-element-button.is-style-outline,
.woocommerce a.button.alt {
  background: transparent !important;
  border: 2px solid var(--svh-line) !important;
  color: var(--svh-ink) !important;
}
.button.alt:hover,
.wp-element-button.is-style-outline:hover {
  border-color: var(--svh-accent) !important;
  background: var(--svh-accent-soft) !important;
}

/* ============================================================
   Product Cards (WooCommerce grid)
   ============================================================ */

.woocommerce ul.products li.product,
.wc-block-grid__product {
  background: var(--svh-surface);
  border: 1px solid var(--svh-line);
  border-radius: var(--svh-radius);
  padding: 16px;
  transition: all var(--svh-duration) var(--svh-ease);
  position: relative;
}
.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
  box-shadow: var(--svh-shadow-2);
  border-color: var(--svh-accent);
  transform: translateY(-2px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product .wc-block-grid__product-title {
  font-family: var(--svh-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--svh-ink);
}

.woocommerce ul.products li.product .price,
.wc-block-grid__product .wc-block-grid__product-price {
  font-family: var(--svh-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--svh-ink);
}

.woocommerce ul.products li.product .price del {
  color: var(--svh-stone-2);
  font-weight: 400;
  font-size: 0.85rem;
}

.woocommerce ul.products li.product .price ins {
  color: var(--svh-bad);
  text-decoration: none;
}

/* Sale badge */
.woocommerce span.onsale,
.onsale {
  background: var(--svh-bad) !important;
  color: #fff !important;
  border-radius: var(--svh-radius-sm) !important;
  font-family: var(--svh-font-body);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 4px 10px;
}

/* ============================================================
   Product Images
   ============================================================ */

.woocommerce ul.products li.product img,
.wc-block-grid__product-image img {
  border-radius: var(--svh-radius-sm);
}

.woocommerce div.product div.images img {
  border-radius: var(--svh-radius);
  border: 1px solid var(--svh-line);
}

/* ============================================================
   Single Product
   ============================================================ */

.woocommerce div.product .product_title {
  font-family: var(--svh-font-display);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.2;
}

.woocommerce div.product p.price {
  font-family: var(--svh-font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--svh-ink);
}

/* SKU / meta mono */
.woocommerce div.product .product_meta,
.woocommerce div.product .sku_wrapper {
  font-family: var(--svh-font-mono);
  font-size: 0.85rem;
  color: var(--svh-stone);
}

/* Stock indicator */
.woocommerce div.product .stock.in-stock {
  color: var(--svh-ok);
  font-weight: 600;
}
.woocommerce div.product .stock.out-of-stock {
  color: var(--svh-bad);
  font-weight: 600;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--svh-accent);
  border-bottom-color: var(--svh-accent);
}

/* ============================================================
   Cart & Checkout
   ============================================================ */

.woocommerce-cart table.cart,
.woocommerce-checkout #order_review {
  border: 1px solid var(--svh-line);
  border-radius: var(--svh-radius);
  overflow: hidden;
}

.woocommerce-cart table.cart th {
  background: var(--svh-mist);
  font-weight: 600;
  font-family: var(--svh-font-body);
}

.woocommerce table.shop_table {
  border-color: var(--svh-line);
}

/* Checkout form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1px solid var(--svh-line);
  border-radius: var(--svh-radius-sm);
  padding: 10px 14px;
  font-family: var(--svh-font-body);
  transition: border-color var(--svh-duration) var(--svh-ease);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--svh-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--svh-accent-soft);
}

/* ============================================================
   Sidebar / Faceted Filters
   ============================================================ */

.widget-area .widget,
.woocommerce .widget_layered_nav,
.woocommerce .widget_price_filter {
  background: var(--svh-surface);
  border: 1px solid var(--svh-line);
  border-radius: var(--svh-radius);
  padding: 20px;
  margin-bottom: 16px;
}

.widget-area .widget-title,
.woocommerce .widget-title {
  font-family: var(--svh-font-body);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--svh-stone);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--svh-line);
}

/* Price slider */
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
  background: var(--svh-line);
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
  background: var(--svh-accent);
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
  background: var(--svh-accent);
  border: 2px solid var(--svh-surface);
  box-shadow: var(--svh-shadow-1);
}

/* ============================================================
   Breadcrumbs
   ============================================================ */

.woocommerce .woocommerce-breadcrumb {
  font-family: var(--svh-font-mono);
  font-size: 0.82rem;
  color: var(--svh-stone);
}
.woocommerce .woocommerce-breadcrumb a {
  color: var(--svh-stone);
}
.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--svh-accent);
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer,
footer.ct-footer {
  background: var(--svh-ink) !important;
  color: var(--svh-mist);
}
.site-footer a,
footer.ct-footer a {
  color: var(--svh-accent-soft);
}
.site-footer a:hover,
footer.ct-footer a:hover {
  color: var(--svh-accent);
}

/* ============================================================
   My Account (Customer dashboard)
   ============================================================ */

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 10px 16px;
  border-radius: var(--svh-radius-sm);
  font-weight: 500;
  color: var(--svh-ink);
  transition: all var(--svh-duration) var(--svh-ease);
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--svh-accent-soft);
  color: var(--svh-accent-2);
}

/* ============================================================
   Notices / Messages
   ============================================================ */

.woocommerce-message {
  border-top-color: var(--svh-ok) !important;
  background: var(--svh-ok-soft);
}
.woocommerce-info {
  border-top-color: var(--svh-accent) !important;
  background: var(--svh-accent-soft);
}
.woocommerce-error {
  border-top-color: var(--svh-bad) !important;
  background: var(--svh-bad-soft);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --svh-radius: 10px;
    --svh-radius-lg: 16px;
  }
  .svh-brandmark__text {
    font-size: 20px;
  }
  .svh-brandmark__sun {
    width: 30px;
    height: 30px;
  }
}

/* ============================================================
   Utility classes
   ============================================================ */

.svh-section {
  padding: 60px var(--svh-gutter);
  max-width: var(--svh-max);
  margin: 0 auto;
}

.svh-card {
  background: var(--svh-surface);
  border: 1px solid var(--svh-line);
  border-radius: var(--svh-radius);
  box-shadow: var(--svh-shadow-1);
  padding: 24px;
}

.svh-badge {
  display: inline-block;
  font-family: var(--svh-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--svh-mist);
  color: var(--svh-stone);
}

.svh-badge--accent {
  background: var(--svh-accent-soft);
  color: var(--svh-accent-2);
}

.svh-badge--ok {
  background: var(--svh-ok-soft);
  color: var(--svh-ok);
}

.svh-badge--bad {
  background: var(--svh-bad-soft);
  color: var(--svh-bad);
}