/*
Theme Name: Natalya Koregina
Theme URI:
Author: Natalya Koregina
Description: Авторская тема для сайта мастер-классов по вязанию
Version: 1.0
Text Domain: natalya_koregina
*/

/* ── Custom colors ── */
:root {
  --rose-50:  #f0f3ee;
  --rose-100: #dfe5da;
  --rose-200: #c5d0be;
  --rose-400: #a8b89a;
  --rose-500: #8fa07e;
  --rose-600: #738568;
}

/* ── Keyframes ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-14px) rotate(4deg); }
  66%       { transform: translateY(-6px) rotate(-3deg); }
}
@keyframes floatAlt {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-18px) rotate(-5deg); }
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
@keyframes sparkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8) rotate(0deg); }
  50%       { opacity: 1;   transform: scale(1.25) rotate(18deg); }
}
@keyframes yarn-sway {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%       { transform: translateY(-16px) rotate(4deg); }
}
@keyframes yarn-sway-alt {
  0%, 100% { transform: translateY(0) rotate(6deg); }
  50%       { transform: translateY(-12px) rotate(-5deg); }
}
@keyframes blobPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%       { transform: scale(1.12); opacity: 0.8; }
}
@keyframes blobPulseAlt {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%       { transform: scale(1.08); opacity: 0.7; }
}
@keyframes diamond-spin {
  0%   { transform: rotate(0deg) scale(1); opacity: 0.15; }
  50%  { transform: rotate(180deg) scale(1.1); opacity: 0.3; }
  100% { transform: rotate(360deg) scale(1); opacity: 0.15; }
}
@keyframes shimmer-sweep {
  0%   { left: -70%; }
  100% { left: 140%; }
}

/* ── Hero ── */
.hero-bg {
  background: linear-gradient(135deg, #f0f3ee 0%, #e2ead9 30%, #e8ede3 60%, #f0f3ee 100%);
  background-size: 300% 300%;
  animation: gradientShift 8s ease infinite;
}
.hero-badge  { animation: fadeUp 0.6s ease both; animation-delay: 0.1s; }
.hero-title  { animation: fadeUp 0.7s ease both; animation-delay: 0.3s; }
.hero-desc   { animation: fadeUp 0.7s ease both; animation-delay: 0.5s; }
.hero-cta    { animation: fadeUp 0.7s ease both; animation-delay: 0.65s; }

/* ── Gradient text ── */
.gradient-text {
  background: linear-gradient(135deg, #8fa07e 0%, #738568 50%, #a8b89a 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}

/* ── Floating decorations ── */
.float-1 { animation: float    3.8s ease-in-out infinite; }
.float-2 { animation: floatAlt 4.5s ease-in-out infinite; animation-delay: 0.6s; }
.float-4 { animation: floatAlt 3.2s ease-in-out infinite; animation-delay: 0.3s; }
.yarn-svg-1 { animation: yarn-sway     5.2s ease-in-out infinite; }
.yarn-svg-2 { animation: yarn-sway-alt 6.8s ease-in-out infinite; animation-delay: 0.8s; }
.blob-1 { animation: blobPulse    9s ease-in-out infinite; }
.blob-2 { animation: blobPulseAlt 12s ease-in-out infinite; animation-delay: 4s; }
.diamond-spin     { animation: diamond-spin 12s linear infinite; }
.diamond-spin-alt { animation: diamond-spin 16s linear infinite reverse; animation-delay: 2s; }
.sparkle-1 { animation: sparkle 2.4s ease-in-out infinite; }
.sparkle-2 { animation: sparkle 3.1s ease-in-out infinite; animation-delay: 0.4s; }
.sparkle-3 { animation: sparkle 2.7s ease-in-out infinite; animation-delay: 0.9s; }
.sparkle-4 { animation: sparkle 3.4s ease-in-out infinite; animation-delay: 1.4s; }
.sparkle-5 { animation: sparkle 2.1s ease-in-out infinite; animation-delay: 0.7s; }
.sparkle-6 { animation: sparkle 2.9s ease-in-out infinite; animation-delay: 1.8s; }

/* ── Button shimmer ── */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}
.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: -70%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  animation: shimmer-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
}

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.is-visible { opacity: 1; transform: none; }
.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right.is-visible { opacity: 1; transform: none; }

/* ── Stagger delays ── */
.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: 0.1s; }
.stagger > *:nth-child(3) { transition-delay: 0.2s; }

/* ── Steps line ── */
.steps-line {
  background: linear-gradient(90deg, transparent, #c5d0be, #8fa07e, #c5d0be, transparent);
  transform: scaleX(0);
  opacity: 0;
  transform-origin: left center;
  transition: transform 1.1s ease-out, opacity 0.4s ease;
}
.steps-line.is-visible {
  transform: scaleX(1);
  opacity: 1;
}

/* ── Social — Footer ── */
.social-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: #f0f3ee;
  transition: background 0.2s, transform 0.2s;
  text-decoration: none;
}
.social-footer:hover { background: #8fa07e; transform: translateY(-2px); }
.icon-footer {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
  filter: brightness(0);
  transition: filter 0.2s;
}
.social-footer:hover .icon-footer { filter: brightness(0) invert(1); }

/* ── Social — Contacts ── */
.social-contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0;
  width: 8rem;
  min-width: 8rem;
  box-sizing: border-box;
  border-radius: 1rem;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  transition: background 0.2s, transform 0.2s;
  text-decoration: none;
}
.social-contacts:hover { background: rgba(255,255,255,0.25); transform: translateY(-4px); }
.icon-contacts {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.social-contacts .label { font-size: 0.875rem; font-weight: 400; color: #fff; }

@media (max-width: 480px) {
  .social-contacts { width: 6.5rem; min-width: 6.5rem; padding: 0.75rem 0; }
}

/* ── Mobile menu ── */
#mobile-menu { transition: opacity 0.2s ease, transform 0.2s ease; }
#mobile-menu.hidden { display: none; }

/* ── line-clamp ── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Details/FAQ ── */
details summary::-webkit-details-marker { display: none; }
details[open] .faq-plus {
  transform: rotate(45deg);
  background: #8fa07e;
  border-color: #8fa07e;
  color: white;
}
.faq-plus { transition: transform 0.3s, background 0.3s, border-color 0.3s, color 0.3s; }

/* ── Scroll to top ── */
#scroll-top { transition: opacity 0.3s, transform 0.3s; }

/* ── Free price ── */
.nk-free-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: linear-gradient(135deg, #10b981 0%, #14b8a6 60%, #06b6d4 100%);
  background-size: 200% auto;
  color: white;
  font-weight: 400;
  font-size: 0.9rem;
  border-radius: 9999px;
  padding: 0.3rem 0.85rem;
  position: relative;
  overflow: hidden;
  animation: gradientShift 4s ease infinite;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
}
.nk-free-badge::after {
  content: '';
  position: absolute;
  top: 0; left: -70%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  animation: shimmer-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
}
.nk-free-label {
  background: linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #06b6d4 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}

/* ── Product card image ── */
.nk-card-img {
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.nk-product-card a:hover .nk-card-img {
  transform: scale(1.07);
}
.nk-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(244, 63, 94, 0.15), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.nk-product-card a:hover .nk-card-overlay { opacity: 1; }

.nk-card-placeholder {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nk-product-card a:hover .nk-card-placeholder {
  transform: scale(1.18) rotate(8deg);
}

/* ── Product card title ── */
.nk-card-title {
  font-weight: 400;
  transition: color 0.2s;
}
.nk-product-card a:hover .nk-card-title {
  color: #f43f5e;
}

/* ── Card footer (price + button row) ── */
.nk-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f3ee;
}

/* ── Price ── */
.nk-price {
  font-size: 1.25rem;
  font-weight: 400;
  color: #2d3520;
  letter-spacing: -0.01em;
}
.nk-price-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.nk-old-price {
  font-size: 0.75rem;
  color: #b0b8a4;
  text-decoration: line-through;
}

/* ── Buy button in card ── */
.nk-buy-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 22px;
  border-radius: 999px;
  background: #8fa07e;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(143, 160, 126, 0.3);
}
.nk-buy-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -70%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  animation: shimmer-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
}
.nk-buy-btn:hover {
  background: #738568;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(143, 160, 126, 0.45);
  color: #fff;
}

/* ── Products grid (центрирование при неполном ряду) ── */
.nk-products-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.nk-products-grid > * { width: 100%; }
@media (min-width: 640px)  { .nk-products-grid > * { width: calc(50% - 0.75rem); } }
@media (min-width: 1024px) { .nk-products-grid > * { width: calc(33.333% - 1rem); } }

/* ── Author bio ── */
.nk-author-bio p { margin-bottom: 1rem; }
.nk-author-bio p:last-child { margin-bottom: 0; }

/* ── Page content (оферта, политика и др.) ── */
.nk-content { color: #374151; line-height: 1.8; font-size: 0.95rem; }
.nk-content h2 { font-size: 1.25rem; font-weight: 400; color: #111827; margin: 2rem 0 0.75rem; }
.nk-content h3 { font-size: 1.05rem; font-weight: 400; color: #111827; margin: 1.5rem 0 0.5rem; }
.nk-content p  { margin-bottom: 1rem; }
.nk-content ul, .nk-content ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.nk-content ul { list-style: disc; }
.nk-content ol { list-style: decimal; }
.nk-content li { margin-bottom: 0.35rem; }
.nk-content strong { font-weight: 400; color: #111827; }
.nk-content a { color: #8fa07e; text-decoration: underline; }
.nk-content a:hover { color: #738568; }
.nk-content hr { border: none; border-top: 1px solid #f3f4f6; margin: 2rem 0; }

/* ── WooCommerce: кнопка купить ── */
.nk-add-to-cart .single_add_to_cart_button {
  display: block;
  width: 100%;
  background: #8fa07e;
  color: white;
  padding: 1rem;
  border-radius: 0.75rem;
  font-size: 1.125rem;
  font-weight: 400;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.nk-add-to-cart .single_add_to_cart_button:hover {
  background: #738568;
}
.nk-add-to-cart .quantity { display: none; }

/* ── Корзина в шапке ── */
.nk-cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #8fa07e;
  color: white;
  font-size: 0.65rem;
  font-weight: 400;
  min-width: 1.1rem;
  height: 1.1rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.2rem;
  line-height: 1;
  border: 1.5px solid white;
}


/* ── WooCommerce: уведомления ── */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  list-style: none;
  padding: 0.875rem 1.25rem;
  border-radius: 0.875rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.6;
}
.woocommerce-error  { background: #f0f3ee; border: 1px solid #c5d0be; color: #9f1239; }
.woocommerce-message{ background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; }
.woocommerce-info   { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.woocommerce-error li, .woocommerce-message li, .woocommerce-info li { margin: 0; }
.woocommerce-error a, .woocommerce-message a, .woocommerce-info a { color: inherit; font-weight: 400; }

/* ── Place order button ── */
.woocommerce #payment #place_order {
  display: block;
  width: 100%;
  background: #8fa07e;
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.875rem;
  font-size: 1.0625rem;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(244, 63, 94, 0.3);
}
.woocommerce #payment #place_order:hover {
  background: #738568;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(244, 63, 94, 0.35);
}
.woocommerce #payment #place_order:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.woocommerce a.button:not(.single_add_to_cart_button),
.woocommerce button.button:not(.single_add_to_cart_button) {
  display: inline-block;
  background: #8fa07e;
  color: white;
  padding: 0.5rem 1.25rem;
  border-radius: 0.625rem;
  font-weight: 400;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}
.woocommerce a.button:not(.single_add_to_cart_button):hover,
.woocommerce button.button:not(.single_add_to_cart_button):hover { background: #738568; color: white; }

/* ── WooCommerce Blocks: кнопки блочного чекаута ── */
.wc-block-cart__submit-button,
.wc-block-components-button:not(.is-link):not(.wc-block-cart__totals-title):not(.wc-block-components-panel__button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #8fa07e;
  color: #fff !important;
  padding: 0.4rem 1rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.25);
  text-decoration: none;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-button:not(.is-link):not(.wc-block-cart__totals-title):not(.wc-block-components-panel__button):hover {
  background: #738568;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
}
.wc-block-components-button__text {
  color: #fff !important;
  font-weight: 400;
  font-size: 0.8125rem;
}

/* ── WooCommerce Blocks: кнопка «Оформить заказ» ── */
.wc-block-components-checkout-place-order-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #8fa07e !important;
  color: #fff !important;
  padding: 0.45rem 1.1rem;
  border: none !important;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.25);
}
.wc-block-components-checkout-place-order-button:hover {
  background: #738568 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
}
.wc-block-components-checkout-place-order-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.wc-block-components-checkout-place-order-button__text {
  color: #fff !important;
  font-weight: 400;
  font-size: 0.8125rem;
}

/* Кнопка «Перейти к оформлению» */
.wc-block-cart__submit-button {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

.wp-block-woocommerce-empty-cart-block .wp-block-button__link {
  background: #8fa07e !important;
  color: #fff !important;
  padding: 0.6rem 1.5rem !important;
  border-radius: 0.625rem !important;
  font-weight: 400 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  transition: background 0.2s;
  box-shadow: 0 3px 10px rgba(244,63,94,0.25);
}
.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover {
  background: #738568 !important;
}

/* Скрываем дефолтный текст WooCommerce про политику */
.wc-block-checkout__privacy-policy { display: none !important; }

/* Скрываем блок условий и блок примечания к заказу */
.wc-block-checkout__terms,
.wc-block-checkout__order-notes { display: none !important; }

/* Фикс: название товара в сводке заказа не схлопывается при скидке */
.wc-block-components-order-summary .wc-block-components-order-summary-item__description {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Фикс: бейдж «Экономия» в узком сайдбаре вытесняет название — скрываем его */
.wc-block-components-order-summary .wc-block-components-product-badge {
  display: none !important;
}