/*
Theme Name: s.Oliver
Theme URI: https://soliver.lh
Author: Developer
Description: Custom theme based on soliver.de design. Tailwind CSS, WooCommerce ready.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: Private
Text Domain: soliver
*/

/* ============================================================
   Burger Icon Animation (размеры как на главной: 15×16 mobile, 24×30 desktop)
   ============================================================ */
.burger {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 100%;
  background: currentColor;
  transition: all 0.3s ease;
  transform-origin: center;
}
@media (max-width: 767.98px) {
  .burger { width: 16px; height: 15px; }
  .burger span { height: 1px; }
}
@media (min-width: 768px) {
  .burger { width: 30px; height: 24px; }
  .burger span { height: 2px; border-radius: 2px; }
}
.burger--active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.burger--active span:nth-child(2) {
  opacity: 0;
}
.burger--active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
@media (min-width: 768px) {
  .burger--active span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
  .burger--active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }
}

#header .burger {
  top: -3px;
}

#header .burger::after {
  content: 'Menü';
  position: absolute;
  top: 115%;
  line-height: 1;
  font-size: 11px;
  text-transform: uppercase;
  text-indent: -1px;
}

/* ============================================================
   Category teaser cards (grid 3 cols): opacity-0 → visible
   Без JS анимации карточки остаются невидимыми — показываем по умолчанию.
   ============================================================ */
.link-hover-target.opacity-0 {
  opacity: 1;
}

/* ============================================================
   Z-Index Layers
   ============================================================ */
.z-60 { z-index: 60; }
.z-70 { z-index: 70; }

/* ============================================================
   Side nav overlay (burger menu)
   ============================================================ */
#side-nav-overlay.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
  background: rgba(0, 0, 0, 0.35);
}
#side-nav-overlay.is-open .opacity-0 {
  opacity: 1 !important;
}
#side-nav-overlay.is-open .pointer-events-none {
  pointer-events: auto !important;
}
#side-nav-overlay.is-open .translate-x-\[-10px\] {
  transform: translateX(0);
}
#side-nav-overlay .burger--step-2 span:nth-child(2) { opacity: 0; }
#side-nav-overlay .burger--step-2 span:first-child,
#side-nav-overlay .burger--step-2 span:nth-child(3) { transform-origin: center center; }
#side-nav-overlay .burger--step-2 span:first-child { transform: translateY(6px) rotate(45deg); }
#side-nav-overlay .burger--step-2 span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 767.98px) {
  #side-nav-overlay .burger--step-2 span:first-child { transform: translateY(7px) rotate(45deg); }
  #side-nav-overlay .burger--step-2 span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (min-width: 768px) {
  #side-nav-overlay .burger--step-2 span:first-child { transform: translateY(11px) rotate(45deg); }
  #side-nav-overlay .burger--step-2 span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }
}

/* Стили Swiper для героя — в HeroSlider.Cmvqcebp.css (кнопки, пагинация). Глобальные переопределения убраны, чтобы не перебивать герой. */

/* ============================================================
   WooCommerce Product Grid (soliver.de)
   ============================================================ */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
@media (min-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); gap: 8px; }
}
.woocommerce ul.products li.product {
  margin: 0;
  padding: 0;
}
/* Card image aspect & hover */
.woocommerce ul.products li.product .aspect-\[5\/7\] {
  aspect-ratio: 5 / 7;
}
/* Neutral-25 if not in Tailwind */
.bg-neutral-25 { background-color: #f5f5f5; }
.bg-neutral-25\/80 { background-color: rgba(245, 245, 245, 0.9); }

/* ============================================================
   WooCommerce Form Overrides
   ============================================================ */
.woocommerce .quantity .qty {
  width: 60px;
  text-align: center;
  border: 1px solid #e5e5e5;
  padding: 8px;
  font-size: 14px;
}
.woocommerce .single_add_to_cart_button {
  background: #000 !important;
  color: #fff !important;
  border: none !important;
  padding: 14px 32px !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s;
  width: 100%;
}
.woocommerce .single_add_to_cart_button:hover {
  background: #333 !important;
}
.woocommerce form.cart {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.woocommerce form.cart .quantity {
  flex-shrink: 0;
}

/* Hide default WooCommerce elements we've replaced */
.woocommerce-result-count { display: none; }
.woocommerce .variations { display: none; } /* We use custom size/color UI */

/* ============================================================
   Product Sorting Dropdown
   ============================================================ */
.woocommerce-ordering select {
  border: 1px solid #e5e5e5;
  padding: 8px 32px 8px 12px;
  font-size: 14px;
  background: white;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  cursor: pointer;
}

/* ============================================================
   Breadcrumb Styles
   ============================================================ */
.woocommerce-breadcrumb ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.woocommerce-breadcrumb li {
  display: inline;
}
.woocommerce-breadcrumb a {
  color: #666;
  text-decoration: none;
}
.woocommerce-breadcrumb a:hover {
  text-decoration: underline;
}

/* ============================================================
   Accordion chevron rotation
   ============================================================ */
.rotate-180 {
  transform: rotate(180deg);
}

/* ============================================================
   WooCommerce Pagination
   ============================================================ */
.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  justify-content: center;
  gap: 4px;
  list-style: none;
  padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #e5e5e5;
  font-size: 14px;
  text-decoration: none;
  color: #333;
  transition: all 0.2s;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: #000;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* ============================================================
   Animate bounce (for cart feedback)
   ============================================================ */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.animate-bounce {
  animation: bounce 0.5s ease-in-out 2;
}

/* ============================================================
   Scrollbar Hide
   ============================================================ */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================================
   Search input in header
   ============================================================ */
.woocommerce-product-search {
  position: relative;
  display: flex;
  align-items: center;
}
.woocommerce-product-search .search-field {
  background: rgba(255,255,255,0.2);
  border: none;
  border-bottom: 1px solid currentColor;
  padding: 7px 11px;
  outline: none;
  color: inherit;
  font-size: 14px;
  width: 100%;
}
.woocommerce-product-search .search-field::placeholder {
  color: inherit;
  text-transform: uppercase;
}
.woocommerce-product-search button[type="submit"] {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 4px;
}

/* ============================================================
   Hero Animations (soliver.de original)
   ============================================================ */
@keyframes imageZoom {
  0% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes textFade {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes overlayFade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.animate-imageZoom {
  animation: imageZoom 1.2s ease-out forwards;
}
.animate-textFade {
  animation: textFade 0.8s ease-out forwards;
}
.animate-overlayFade {
  animation: overlayFade 0.6s ease-out forwards;
}

/* Только в герое-слайдере база 12px (как ты сказал). Остальная страница не трогается. */
.hero-swiper {
  font-size: 12px;
}

/* text-h1-*, text-h5-* (в т.ч. md:, lg:) — из Tailwind, assets/css/custom.css */

/* ============================================================
   size-full utility (TW v3.4+)
   ============================================================ */
.size-full {
  width: 100%;
  height: 100%;
}

/* ============================================================
   Category card link overlay hover effect
   ============================================================ */
.link-hover-target:hover .animate-on-hover {
  text-decoration: underline;
}

/* ============================================================
   Footer accordion: always show content on desktop (lg+)
   Overrides inline style="grid-template-rows:0fr;opacity:0;"
   ============================================================ */
@media (min-width: 1024px) {
  #footer .footer-accordion-content,
  #footer .grid.ease-out-slow {
    grid-template-rows: 1fr !important;
    opacity: 1 !important;
  }
}