/*
Theme Name: Petelka
Theme URI: https://petelka.co.il
Author: Petel Studio
Description: Кастомная тема магазина вязаных изделий Petelka (стиль 1B «игривый детский»). WooCommerce + Polylang, RTL для иврита. Палитра малина/зелень.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: petelka
*/

/* ============ базовые ============ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#fff6f0;font-family:'Nunito',sans-serif;color:#3a2030;min-height:100vh}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}
::selection{background:#f6b3d6;color:#7a1456}

/* ============ анимации из макета ============ */
@keyframes petelFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes petelSpin{to{transform:rotate(360deg)}}
@keyframes petelBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes petelSnow{0%{transform:translateY(-30px) translateX(0) rotate(0deg);opacity:0}12%{opacity:.95}100%{transform:translateY(400px) translateX(26px) rotate(320deg);opacity:.12}}
/* бегущая киноплёнка на странице «О нас» (28 кадров = 7×4, сдвиг на 25% = один набор) */
@keyframes filmScroll{from{transform:translateX(0)}to{transform:translateX(-25%)}}
.ab-film:hover{animation-play-state:paused}

/* ============ шрифты по языку ============ */
/* заголовки/акценты: латиница Comfortaa, иврит Fredoka */
.petel-h{font-family:'Comfortaa','Fredoka',cursive}
body.rtl{font-family:'Heebo','Nunito',sans-serif}
body.rtl .petel-h{font-family:'Fredoka',cursive}

/* ============ контейнер ============ */
/* дизайн полноширинный (edge-to-edge, 100%) — как в макетах Claude Design */
.petel-page{width:100%;margin:0 auto}
.petel-container{width:100%;margin:0 auto}
.petel-main{width:100%;margin:0 auto}

/* ============ липкая шапка + кнопка «наверх» (все страницы) ============ */
.petel-topbar{position:sticky;top:0;z-index:90;box-shadow:0 3px 14px -9px rgba(58,32,48,.35)}
#petel-totop:hover{background:#951a63}
body.rtl #petel-totop{right:auto!important;left:24px}
@media(max-width:560px){#petel-totop{width:46px;height:46px;bottom:18px;right:18px}body.rtl #petel-totop{left:18px}}

/* ============ hover-состояния (замена style-hover из макета) ============ */
.p-card{transition:transform .3s ease, box-shadow .3s ease}
.p-card:hover{transform:translateY(-6px);box-shadow:0 26px 42px -20px rgba(58,32,48,.7)}
.p-swap .p-top{transition:opacity .45s ease, transform .6s ease}
.p-swap:hover .p-top{opacity:0;transform:scale(1.05)}
.p-zoom img{transition:transform .6s ease}
.p-zoom:hover img{transform:scale(1.08)}
.cat-bubble{transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease}
.cat-bubble:hover{transform:translateY(-8px)}
.pill-nav a{transition:background .2s ease,color .2s ease}
.pill-nav a:hover{color:#b5247a}

/* ============ переключатель языков ============ */
.lang-switch a{padding:4px 11px;border-radius:999px;color:#6a4358;font-weight:700;line-height:1}
.lang-switch a.active{background:#b5247a;color:#fff}

/* ============ RTL для иврита ============ */
body.rtl{direction:rtl}
body.rtl .petel-nav{direction:rtl}
/* зеркалим hero-декор и бейджи (важно: !important — сбрасываем инлайн right:*) */
body.rtl .hero-deco-1{right:auto!important;left:28%}
body.rtl .hero-deco-2{right:auto!important;left:30%}
body.rtl .hero-media{padding-right:0!important;padding-left:40px}
body.rtl .hero-price{right:auto!important;left:0;transform:rotate(-8deg)!important}
body.rtl .hero-badge{transform:rotate(2deg)!important}
body.rtl .cart-badge{right:auto!important;left:-6px}
body.rtl .hit-badge{left:auto!important;right:10px}
body.rtl .ny-badge{transform:rotate(2deg)!important}
body.rtl .cta-phone{direction:ltr}
body.rtl .contact-line{direction:ltr}

/* ============ отзывы (кастомный блок в стиле 1B, данные WooCommerce) ============ */
#pg-thumb-rail::-webkit-scrollbar{display:none}
.petel-tag:hover{border-color:#b5247a;color:#b5247a}
.petel-star:hover{transform:scale(1.12)}
@media(max-width:860px){
  .petel-rev-grid{grid-template-columns:1fr!important}
  .petel-rev-summary{position:static!important}
}
/* RTL: инициалы/бейджи уже логические (margin-inline-start), сетка симметрична */

/* ============ страница «О нас» ============ */
body.rtl .ab-deco-1{left:auto!important;right:32%}
body.rtl .ab-deco-2{right:auto!important;left:14%}
@media(max-width:860px){
  .ab-hero{grid-template-columns:1fr!important;padding:34px 24px!important}
  .ab-hero .petel-h{font-size:34px!important}
  .ab-story{grid-template-columns:1fr!important}
  .ab-timeline{grid-template-columns:repeat(2,1fr)!important}
  .ab-make{grid-template-columns:1fr!important}
  .ab-gallery{grid-template-columns:1fr!important}
  .ab-values{grid-template-columns:1fr!important}
}

/* ============ сетки ============ */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;min-height:440px}
.ny-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center;position:relative;z-index:2}
.yarn-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:36px;align-items:center;position:relative;z-index:2}
.cat-bubble-item{flex:0 0 calc(20% - 18px);text-align:center}

/* ============ адаптив ============ */
@media(max-width:1024px){
  .cat-bubble-item{flex:0 0 calc(25% - 18px)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .petel-hide-mobile{display:none!important}
  .hero-grid{grid-template-columns:1fr}
  .hero-media{display:none!important}
  .hero-deco-1,.hero-deco-2{display:none!important}
  .ny-grid,.yarn-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .cat-bubble-item{flex:0 0 calc(33.333% - 16px)}
}
@media(max-width:560px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .cat-bubble-item{flex:0 0 calc(50% - 12px)}
}

/* ============ страницы Контакты / Сказки / Пряжа / Новый год ============ */
@media(max-width:860px){
  .ct-grid{grid-template-columns:1fr!important}
  .st-feature{grid-template-columns:1fr!important}
  .st-heroes{grid-template-columns:repeat(2,1fr)!important}
  .st-soon{grid-template-columns:repeat(2,1fr)!important}
  .yarn-hero{grid-template-columns:1fr!important}
  .yarn-swatches{grid-template-columns:repeat(4,1fr)!important}
  .yarn-steps{grid-template-columns:1fr!important}
  .ny-hero{grid-template-columns:1fr!important;text-align:center}
  .ny-highlights{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:560px){
  .st-heroes{grid-template-columns:1fr!important}
  .st-soon{grid-template-columns:1fr!important}
  .yarn-swatches{grid-template-columns:repeat(3,1fr)!important}
  .ny-highlights{grid-template-columns:1fr!important}
}
/* RTL: зеркалим декор контактов */
body.rtl .ct-deco-1{right:auto!important;left:30px}
body.rtl .ct-deco-2{right:auto!important;left:150px}

/* ============ WooCommerce: корзина + оформление (стиль 1B) ============ */
.woocommerce, .woocommerce-page{padding:26px 34px 50px}
.woocommerce .page-title, .woocommerce-cart h1, .woocommerce-checkout h1{font-family:'Comfortaa','Fredoka',cursive;font-weight:700}
/* сообщения */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews{
  position:relative;border-radius:16px;border:none;padding:16px 22px 16px 52px;font-weight:700;box-shadow:0 10px 26px -22px rgba(58,32,48,.6);line-height:1.4}
body.rtl .woocommerce-message, body.rtl .woocommerce-info, body.rtl .woocommerce-error, body.rtl .woocommerce-noreviews{padding:16px 52px 16px 22px}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before{position:absolute;top:16px;left:20px;margin:0;font-size:16px}
body.rtl .woocommerce-message::before, body.rtl .woocommerce-info::before, body.rtl .woocommerce-error::before{left:auto;right:20px}
.woocommerce-message::before, .woocommerce-info::before{color:#2e8c2a}
.woocommerce-message{background:#e8f6e4;color:#2e8c2a}
.woocommerce-message .button, .woocommerce-message a.button, .woocommerce-message .wc-forward,
.woocommerce-info .button, .woocommerce-info a.button{background:#b5247a!important;color:#fff!important;border:none!important;border-radius:999px!important;padding:11px 22px!important;font-size:14px!important;font-weight:800!important;box-shadow:0 6px 0 #951a63!important;float:none!important;margin-inline-start:12px}
.woocommerce-message .button:hover, .woocommerce-message a.button:hover{background:#951a63!important;color:#fff!important}
.woocommerce-info{background:#fdeef6;color:#8a5a72}
.woocommerce-error{background:#fdecef;color:#b5247a;list-style:none}
/* таблицы корзины / итога */
.woocommerce table.shop_table{border-radius:22px;border:none;overflow:hidden;background:#fff;box-shadow:0 16px 34px -26px rgba(58,32,48,.7);border-collapse:separate;border-spacing:0}
.woocommerce table.shop_table th{background:#fdeef6;color:#8a5a72;font-weight:800;border:none;padding:14px 16px}
.woocommerce table.shop_table td{border-top:1px solid #f6e3ee;padding:16px;font-weight:600;color:#5a3a4c}
.woocommerce table.cart img{width:72px;border-radius:14px}
.woocommerce .cart_item .product-name a{font-weight:800;color:#3a2030}
.woocommerce .amount, .woocommerce .price{color:#b5247a;font-weight:800}
/* поля количества и ввода */
.woocommerce .quantity input.qty, .woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea, .woocommerce-checkout input[type=text],
.woocommerce-checkout input[type=email], .woocommerce-checkout input[type=tel],
.woocommerce-checkout textarea, .woocommerce .select2-container .select2-selection{
  border:2px solid #f6dceb;border-radius:14px;padding:11px 14px;font-family:inherit;font-weight:700;color:#3a2030;background:#fff;outline:none}
.woocommerce .quantity input.qty{width:70px;text-align:center}
/* кнопки */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .woocommerce #place_order{
  background:#b5247a;color:#fff;border:none;border-radius:999px;padding:13px 26px;font-weight:800;
  font-family:inherit;cursor:pointer;box-shadow:0 8px 0 #951a63;transition:transform .12s}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #place_order:hover{background:#951a63;transform:translateY(-1px)}
.woocommerce .checkout-button, .woocommerce #place_order{background:#3aa835;box-shadow:0 9px 0 #2e8c2a;font-size:16px;width:100%;text-align:center}
.woocommerce .checkout-button:hover, .woocommerce #place_order:hover{background:#2e8c2a}
/* блок «Итого» и оформление */
.woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order{background:#fff;border-radius:24px;padding:24px;
  box-shadow:0 18px 40px -26px rgba(58,32,48,.7)}
.woocommerce-checkout #order_review_heading, .woocommerce .cart_totals h2{font-family:'Comfortaa','Fredoka',cursive;font-weight:700}
.woocommerce-checkout #payment{background:#fdeef6;border-radius:18px}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:2px dashed #f6cce2}
/* поле купона / формы */
.woocommerce .cart .actions .coupon .input-text{width:180px}
.woocommerce-form-login, .woocommerce-form-coupon{border-radius:18px!important;border-color:#f6dceb!important}
/* RTL: количество слева */
body.rtl .woocommerce .quantity input.qty{text-align:center}

/* ---- кастомная корзина Petelka ---- */
.petel-cart-item .pq-input::-webkit-outer-spin-button,
.petel-cart-item .pq-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ci-remove:hover{color:#b5247a}
@media(max-width:860px){
  .cart-grid{grid-template-columns:1fr!important}
  .petel-cart-summary{position:static!important}
}
@media(max-width:560px){
  .petel-cart-item{grid-template-columns:72px 1fr!important}
  .petel-cart-item>div:last-child{grid-column:1/-1;text-align:left!important}
}

/* ---- оформление заказа: шапка шагов + карточки оплаты ---- */
.petel-co-head{padding-left:0;padding-right:0}
/* способы оплаты как карточки */
.woocommerce-checkout #payment ul.payment_methods li{background:#fff;border:2px solid #f6dceb;border-radius:18px;padding:14px 16px;margin-bottom:12px;list-style:none}
.woocommerce-checkout #payment ul.payment_methods li input[type=radio]:checked+label{color:#b5247a}
.woocommerce-checkout #payment ul.payment_methods{padding:16px}
.woocommerce-checkout #payment div.payment_box{background:#fdeef6;border-radius:14px;color:#8a5a72}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:#fdeef6}
/* карточки-секции формы */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .woocommerce-shipping-fields{background:#fff;border-radius:24px;padding:24px;box-shadow:0 14px 30px -24px rgba(58,32,48,.6);margin-bottom:18px}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3{font-family:'Comfortaa','Fredoka',cursive;font-weight:700;color:#3a2030}
@media(max-width:860px){
  .woocommerce-checkout form.checkout{display:block}
}
/* сводка заказа на оформлении */
.petel-review-table{width:100%;border:none;box-shadow:none;background:transparent;border-collapse:collapse}
.petel-review-table th{background:transparent;padding:9px 0;border:none;border-top:2px dashed #f6cce2;font-weight:700;color:#6a4358;text-align:start}
.petel-review-table td{border:none}
.petel-review-table tfoot .order-total th,.petel-review-table tfoot .order-total td{font-size:17px;font-weight:800;color:#3a2030}
.petel-review-table tfoot .order-total td{color:#b5247a}
.woocommerce-checkout #order_review .shop_table td.product-name{text-align:start}
/* прячем пустой заголовок таблицы, если остался */
.petel-review-table thead{display:none}

/* ---- выпадающее меню каталога в шапке ---- */
.petel-nav-item.has-dropdown {
  position: relative;
}
.petel-nav-item.has-dropdown > a::after {
  content: " ▾";
  font-size: 11px;
  vertical-align: middle;
  margin-left: 4px;
}
body.rtl .petel-nav-item.has-dropdown > a::after {
  margin-left: 0;
  margin-right: 4px;
}
.petel-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  min-width: 220px;
  box-shadow: 0 14px 34px -14px rgba(58,32,48,.35);
  border-radius: 18px;
  padding: 10px 0;
  z-index: 200;
  margin-top: 8px;
  border: 2px solid #fdeef6;
  animation: petelFadeIn 0.2s ease-out;
}
.petel-dropdown-menu::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  z-index: 201;
}
.petel-dropdown-menu::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #fdeef6 transparent;
  z-index: 199;
}
.petel-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  color: #6a4358;
  font-size: 14.5px;
  font-weight: 700;
  transition: background .2s ease, color .2s ease;
  white-space: nowrap;
}
.petel-dropdown-menu a:hover {
  background: #fdeef6;
  color: #b5247a;
}
.petel-nav-item:hover .petel-dropdown-menu {
  display: block;
}
@keyframes petelFadeIn {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}