/*
Theme Name: Velvet Noire Child
Theme URI: https://velvet-noire.com
Description: Child theme for Twenty Twenty-Five — Velvet Noire
Author: Velvet Noire
Template: twentytwentyfive
Version: 1.0
*/

/* =========================
   Velvet Noire — TOKENS
   ========================= */
:root{
  --vn-choco-1:#2a1b12;
  --vn-choco-2:#120b08;
  --vn-choco-3:#060404;

  --vn-text:#f5f1ea;
  --vn-muted:rgba(245,241,234,.72);

  --vn-gold-1:#5a3513;
  --vn-gold-2:#ffd88a;
  --vn-gold-3:#b98337;

  --vn-card:#0a0604;
  --vn-border:rgba(255,255,255,.08);

  --vn-glow-1: rgba(255,216,138,.55);
  --vn-glow-2: rgba(210,160,95,.45);
  --vn-glow-3: rgba(255,220,170,.18);
}

/* =========================
   GLOBAL — Woo background
   ========================= */
body.woocommerce,
body.woocommerce-page{
  background: radial-gradient(circle at top, var(--vn-choco-1) 0%, var(--vn-choco-2) 55%, var(--vn-choco-3) 100%) !important;
  color: var(--vn-text) !important;
  font-family: "Georgia", serif !important;
}

/* мягкий ореол сверху (как в твоём HTML) */
body.woocommerce::before,
body.woocommerce-page::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;
  background:
    radial-gradient(1200px 620px at 50% -14%,
      rgba(255, 210, 140, .22) 0%,
      rgba(169, 118, 63, .18) 36%,
      rgba(11, 7, 6, 0) 72%),
    radial-gradient(980px 520px at 18% -18%,
      rgba(255, 226, 160, .12) 0%,
      rgba(11, 7, 6, 0) 70%);
}

/* Контент поверх ореола */
body.woocommerce .wp-site-blocks,
body.woocommerce-page .wp-site-blocks,
body.woocommerce .site,
body.woocommerce-page .site,
body.woocommerce #page,
body.woocommerce-page #page{
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* Убираем “белые” ограничения block-темы */
body.woocommerce .wp-site-blocks > *{
  max-width: none !important;
}

/* Если надо скрыть стандартный header/footer темы на Woo-страницах */
body.woocommerce .wp-site-blocks > header,
body.woocommerce .wp-site-blocks > footer,
body.woocommerce footer.wp-block-template-part,
body.woocommerce .wp-block-site-footer{
  display: none !important;
}

/* =========================
   SHOP LAYOUT
   ========================= */
.woocommerce main,
.woocommerce .site-main,
.woocommerce-page main,
.woocommerce-page .site-main{
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 56px 24px 96px !important;
}

/* Заголовок категории/магазина */
.woocommerce-products-header__title,
.woocommerce .page-title{
  font-family: "Cinzel", serif !important;
  font-size: 52px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #f6e3b1 !important;
  margin: 0 0 16px !important;
  text-shadow: 0 0 18px rgba(0,0,0,.85) !important;
}

/* Хлебные крошки */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a{
  color: rgba(246,227,177,.78) !important;
}

/* Кол-во товаров */
.woocommerce-result-count{
  color: var(--vn-muted) !important;
}

/* Сортировка */
.woocommerce-ordering select,
.wc-block-sort-select select{
  background: rgba(255,255,255,.06) !important;
  color: var(--vn-text) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  outline: none !important;
}

/* =========================
   PRODUCT GRID — Classic + Blocks
   ========================= */

/* classic */
.woocommerce ul.products{
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 28px !important;
  margin-top: 32px !important;
  padding: 0 !important;
}

/* blocks */
.wc-block-grid__products,
.wp-block-woocommerce-product-template{
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 28px !important;
  margin-top: 32px !important;
  padding: 0 !important;
}

@media (max-width: 980px){
  .woocommerce ul.products,
  .wc-block-grid__products,
  .wp-block-woocommerce-product-template{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px){
  .woocommerce ul.products,
  .wc-block-grid__products,
  .wp-block-woocommerce-product-template{
    grid-template-columns: 1fr !important;
  }
}

/* =========================
   PRODUCT CARD — base + HOVER GLOW (ВАЖНО)
   (поддержка li.product и wc-block-grid__product)
   ========================= */

.woocommerce ul.products li.product,
.wc-block-grid__product,
.wp-block-woocommerce-product-template li{
  position: relative !important;
  overflow: visible !important;

  background: radial-gradient(circle at top left, rgba(255, 210, 140, 0.07), var(--vn-card)) !important;
  border-radius: 28px !important;
  padding: 20px !important;
  text-align: center !important;
  border: 1px solid var(--vn-border) !important;

  box-shadow: 0 18px 45px rgba(0,0,0,.85) !important;
  transform: translateY(0);
  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease, border-color .28s ease;
}

/* мягкая подсветка по умолчанию (чтобы выглядело “дорого”, но не кричаще) */
.woocommerce ul.products li.product::before,
.wc-block-grid__product::before,
.wp-block-woocommerce-product-template li::before{
  content:"";
  position:absolute;
  inset:-26px;
  border-radius: 36px;
  pointer-events:none;
  opacity: .35;
  background: radial-gradient(700px 260px at 50% 0%,
    rgba(255,216,138,.20) 0%,
    rgba(210,160,95,.10) 35%,
    rgba(0,0,0,0) 70%);
  filter: blur(12px);
  z-index: 0;
}

.woocommerce ul.products li.product > *,
.wc-block-grid__product > *,
.wp-block-woocommerce-product-template li > *{
  position: relative;
  z-index: 1;
}

/* ===== ВОТ ОНО: контур + яркий ореол при наведении ===== */
.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover,
.wp-block-woocommerce-product-template li:hover{
  transform: translateY(-6px) !important;
  border-color: rgba(255,216,138,.35) !important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.88),
    0 0 0 1px rgba(255,216,138,.22),
    0 0 36px rgba(255,216,138,.22),
    inset 0 0 34px rgba(255,220,170,.14) !important;
}

.woocommerce ul.products li.product:hover::before,
.wc-block-grid__product:hover::before,
.wp-block-woocommerce-product-template li:hover::before{
  opacity: .95;
  background: radial-gradient(760px 300px at 50% 0%,
    rgba(255,216,138,.45) 0%,
    rgba(210,160,95,.22) 38%,
    rgba(0,0,0,0) 72%);
  filter: blur(10px);
}

/* Фото */
.woocommerce ul.products li.product a img,
.wc-block-grid__product img,
.wp-block-woocommerce-product-template img{
  border-radius: 22px !important;
  box-shadow: 0 20px 45px rgba(0,0,0,.75) !important;
  margin-bottom: 14px !important;
}

/* Название */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title,
.wp-block-woocommerce-product-template .wc-block-components-product-title{
  font-family: "Georgia", serif !important;
  font-size: 18px !important;
  color: #ffe2a0 !important;
  margin: 14px 0 8px !important;
}

/* Цена — больше и жирнее */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price *,
.wc-block-grid__product-price,
.wc-block-grid__product-price *{
  color: rgba(246,227,177,.98) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  margin: 6px 0 14px !important;
}

/* =========================
   BUTTONS — GOLD VELVET (classic + blocks)
   ========================= */

/* classic */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.add_to_cart_button,
.woocommerce a.product_type_simple,
.woocommerce a.product_type_variable,

/* blocks */
.wc-block-grid__product-add-to-cart a,
.wc-block-grid__product-add-to-cart .wp-element-button,
.wp-block-woocommerce-product-template .wp-element-button{
  display: inline-block !important;
  padding: 12px 30px !important;
  border-radius: 999px !important;
  border: none !important;
  background: linear-gradient(135deg, var(--vn-gold-1), var(--vn-gold-2), var(--vn-gold-3)) !important;
  color: #1f1006 !important;
  font-family: "Cinzel", serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.70) !important;
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-block-grid__product-add-to-cart a:hover,
.wc-block-grid__product-add-to-cart .wp-element-button:hover,
.wp-block-woocommerce-product-template .wp-element-button:hover{
  transform: translateY(-2px) !important;
  filter: brightness(1.06) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.85) !important;
}

/* =========================
   SINGLE PRODUCT — sizing
   ========================= */
body.single-product .woocommerce div.product div.images{
  width: 44% !important;
  max-width: 520px !important;
}
body.single-product .woocommerce div.product div.summary{
  width: 50% !important;
}

body.single-product .woocommerce div.product div.images img,
body.single-product .woocommerce div.product div.images .wp-post-image{
  width: 100% !important;
  max-height: 520px !important;
  object-fit: cover !important;
  border-radius: 22px !important;
  box-shadow:
    0 22px 70px rgba(210,160,95,.25),
    0 18px 45px rgba(0,0,0,.75) !important;
}

body.single-product .product_title{
  font-family: "Cinzel", serif !important;
  color: #f6e3b1 !important;
  letter-spacing: .08em !important;
}

@media (max-width: 980px){
  body.single-product .woocommerce div.product div.images,
  body.single-product .woocommerce div.product div.summary{
    width: 100% !important;
    max-width: none !important;
  }
  body.single-product .woocommerce div.product div.images img{
    max-height: 520px !important;
  }
}

/* =========================================================
   VN — CATEGORY DESCRIPTION (term description)
   1) шире "в стороны" + по центру
   2) убрать огромный зазор под сортировкой
   ========================================================= */

/* 0) На всякий: снимаем ограничения ширины у block-layout внутри Woo */
body.woocommerce .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
  max-width: none !important;
}

/* 1) Контейнер описания категории */
body.woocommerce .wp-block-term-description{
  width: 100% !important;
  max-width: none !important;
  margin: 18px auto 28px !important;      /* сверху меньше, снизу норм */
  padding: 0 24px !important;
  text-align: center !important;
}

/* 2) Сам текст (растягиваем строку шире) */
body.woocommerce .wp-block-term-description > p{
  max-width: 1280px !important;           /* вот это и даёт "в стороны" */
  margin: 0 auto !important;
  font-family: "Cinzel", serif !important;
  font-size: 18px !important;             /* если хочешь мельче: 22px */
  line-height: 1.55 !important;
  letter-spacing: .08em !important;       /* лёгкая “дорогая” растяжка */
  color: #f6e3b1 !important;
  text-shadow:
    0 0 10px rgba(255,216,138,.18),
    0 0 22px rgba(0,0,0,.75) !important;
}

/* 3) Убираем лишний воздух вокруг хлебных крошек/сортировки */
body.woocommerce .woocommerce-breadcrumb{
  margin: 6px 0 10px !important;
}

body.woocommerce .woocommerce-ordering,
body.woocommerce .wc-block-sort-select{
  margin: 6px 0 10px !important;          /* было слишком много */
}

/* 4) Если тема/блок добавляет огромный верхний отступ у main — прижмём */
body.woocommerce main,
body.woocommerce .site-main,
body.woocommerce-page main,
body.woocommerce-page .site-main{
  padding-top: 1px !important;           /* было у нас 56px — уменьшаем */
}