/* SUPER OVERRIDE ─ вбиває все і робить картку правильно */

/* Grid — 3 колонки, кожна = 1 slot */
.products-col .p-grid,
ul.products.p-grid,
.p-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:14px !important;
  padding:0 !important;
  margin:0 !important;
  list-style:none !important;
  grid-auto-flow:row !important;
  grid-auto-rows:auto !important;
}

/* Кожна картка займає рівно 1 колонку 1 ряд */
.p-grid > .p-card,
.p-grid > a.p-card{
  grid-column:span 1 !important;
  grid-row:span 1 !important;
}
@media(max-width:1400px){.p-grid,ul.products.p-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:12px !important}}
@media(max-width:1200px){.p-grid,ul.products.p-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
@media(max-width:900px){.p-grid,ul.products.p-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media(max-width:520px){.p-grid,ul.products.p-grid{grid-template-columns:1fr !important}}

/* Картка — <div>, flex column, max width = grid slot */
.p-card,
div.p-card,
.products-col .p-card{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:auto !important;
  overflow:hidden !important;
  background:#FBF8EF !important;
  border:1.5px solid #DDD8C8 !important;
  border-radius:20px !important;
  color:inherit !important;
  text-decoration:none !important;
  position:relative !important;
  box-sizing:border-box !important;
  float:none !important;
  padding:0 !important;
  margin:0 !important;
  transition:all .3s ease !important;
}
.p-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 20px 40px -20px rgba(30,40,24,.25) !important;
  border-color:#2E4A36 !important;
}

/* .p-nm тепер <a> — прибрати підкреслення */
.p-card a.p-nm,
a.p-nm{
  text-decoration:none !important;
  color:#1E2818 !important;
  display:block !important;
}
.p-card a.p-nm:hover{
  color:#2E4A36 !important;
}

/* .ph тепер <a> */
.p-card a.ph,
a.ph{
  text-decoration:none !important;
  color:inherit !important;
}

/* Фото — 1:1, повна ширина картки */
.p-card > .ph,
.p-card .ph{
  position:relative !important;
  display:block !important;
  width:100% !important;
  aspect-ratio:1 !important;
  overflow:hidden !important;
  background:linear-gradient(160deg,#EDF0E6,#DEE5D4) !important;
  flex-shrink:0 !important;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

/* Картинка в фото — заповнює контейнер, contain, ЦЕНТРОВАНО.
   ВАЖЛИВО: main і hover мають ідентичне позиціонування,
   щоб hover-swap відбувався БЕЗ зміщення в лівий верхній кут. */
.p-card .ph img,
.p-card .ph img.attachment-woocommerce_thumbnail,
.p-card .ph img.wp-post-image,
.p-card .ph .p-img-main,
.p-card .ph .p-img-hover,
.p-card img{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  padding:8% !important;
  box-sizing:border-box !important;
  background:#fff !important;
  display:block !important;
  margin:0 !important;
  transform-origin:center center !important;
  transition:opacity .35s ease !important;
}

/* Інфо-блок — flex column нижче фото, повна ширина картки */
.p-card > .in,
.p-card .in{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  flex:1 !important;
  padding:14px 16px 16px !important;
  gap:6px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

/* Категорія — не виходить за межі */
.p-card .p-cat{
  font:700 10px "JetBrains Mono",monospace !important;
  letter-spacing:.24em !important;
  text-transform:uppercase !important;
  color:#C17A3F !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

/* Назва — 2 рядки максимум, обрізка з ... */
.p-card .p-nm{
  font:700 15px "Cormorant Garamond",serif !important;
  color:#1E2818 !important;
  line-height:1.2 !important;
  letter-spacing:-.005em !important;
  min-height:36px !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  word-break:break-word !important;
}

/* Вага (100 г) — без рамки */
.p-card .p-meta{
  font:500 11.5px "Inter",sans-serif !important;
  color:#6B6858 !important;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  align-items:center !important;
}
.p-card .p-meta b{
  font:italic 600 13px "Cormorant Garamond",serif !important;
  color:#1E2818 !important;
  background:transparent !important;
}

/* Foot — ціна ліворуч, кнопка праворуч */
.p-card .p-foot{
  margin-top:auto !important;
  padding-top:12px !important;
  border-top:1px dashed #DDD8C8 !important;
  display:flex !important;
  flex-direction:row !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  flex-wrap:wrap !important;
  background:transparent !important;
  border-left:0 !important;
  border-right:0 !important;
  border-bottom:0 !important;
}

/* Ціна — без рамки, зелена цифра */
.p-card .p-price,
.p-card .p-price *{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
}
.p-card .p-price{
  display:flex !important;
  flex-direction:column !important;
  line-height:1.1 !important;
  min-width:0 !important;
  flex:1 !important;
}
.p-card .p-price .now,
.p-card .p-price .amount,
.p-card .p-price .price,
.p-card .p-price .woocommerce-Price-amount{
  font:700 15px "Inter",sans-serif !important;
  color:#2E4A36 !important;
  letter-spacing:-.01em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Кнопка "Обрати" — темно-зелена таблетка */
.p-card .p-add,
.p-card a.p-add,
a.p-add{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  width:auto !important;
  max-width:fit-content !important;
  height:auto !important;
  flex-shrink:0 !important;
  background:linear-gradient(140deg,#3F6249 0%,#2E4A36 100%) !important;
  color:#F6F3EA !important;
  border-radius:999px !important;
  padding:8px 14px 8px 12px !important;
  font:700 10.5px "Inter",sans-serif !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  border:0 !important;
  text-decoration:none !important;
  box-shadow:0 4px 10px -4px rgba(46,74,54,.55),inset 0 0 0 1px rgba(217,168,116,.24) !important;
  white-space:nowrap !important;
}
.p-card .p-add svg,
a.p-add svg,
.p-card a.p-add svg{
  width:12px !important;
  height:12px !important;
  min-width:12px !important;
  min-height:12px !important;
  max-width:12px !important;
  max-height:12px !important;
  color:#D9A874 !important;
  stroke:#D9A874 !important;
  flex-shrink:0 !important;
  display:inline-block !important;
}

/* Fav-кнопка — правий верхній кут фото (не перекриває "В кошик") */
.p-card .p-fav,
button.p-fav{
  position:absolute !important;
  right:12px !important;
  top:52px !important;   /* під ієрогліфом-тегом */
  bottom:auto !important;
  left:auto !important;
  width:34px !important;
  height:34px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.94) !important;
  color:#C17A3F !important;
  display:grid !important;
  place-items:center !important;
  border:0 !important;
  cursor:pointer !important;
  z-index:5 !important;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.2) !important;
  padding:0 !important;
  opacity:0 !important;
  transform:translateY(-4px) !important;
  transition:opacity .25s, transform .25s !important;
}
/* Показуємо fav-кнопку тільки при hover на картку */
.p-card:hover .p-fav,
.p-card .p-fav:focus,
.p-card .p-fav.on{
  opacity:1 !important;
  transform:translateY(0) !important;
}
.p-card .p-fav:hover{
  background:#C17A3F !important;
  color:#fff !important;
  transform:scale(1.08) !important;
}
.p-card .p-fav.on{
  background:#C17A3F !important;
  color:#fff !important;
}
.p-card .p-fav svg{
  width:14px !important;
  height:14px !important;
  min-width:14px !important;
  min-height:14px !important;
  max-width:14px !important;
  max-height:14px !important;
  flex-shrink:0 !important;
}

/* Tag зверху зліва (Нове) */
.p-card .p-tag{
  position:absolute !important;
  left:12px !important;
  top:12px !important;
  z-index:5 !important;
}

/* Ієрогліф зверху справа */
.p-card .p-hz{
  position:absolute !important;
  right:12px !important;
  top:12px !important;
  z-index:5 !important;
}

/* КРИТИЧНО: якщо WC обгорнув .p-card в <li class="product">,
   робимо <li> прозорим (display:contents передає grid слот дитині) */
.p-grid > li,
.p-grid > li.product,
li.product,
.woocommerce ul.products li.product,
ul.products li.product,
.p-grid .product{
  display:contents !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  width:auto !important;
  float:none !important;
  clear:none !important;
}

/* Приховуємо WooCommerce фото що дублюється */
.p-grid > li.product > .attachment-woocommerce_thumbnail:first-child,
.p-grid > li.product > .wp-post-image:first-child,
.p-grid > li.product > h2.woocommerce-loop-product__title,
.p-grid > li.product > .price,
.p-grid > li.product > .button:not(.p-add),
.p-grid > li.product > .add_to_cart_button,
.p-grid > li.product > .woocommerce-LoopProduct-link{
  display:none !important;
}

/* Приховуємо стандартну WC-кнопку Buy */
.p-card .add_to_cart_button:not(.p-add),
.p-card .added_to_cart,
.p-card .button.product_type_variable:not(.p-add){
  display:none !important;
}


/* ═══════════════ КАРТКА · білий фон + hover-swap другого фото ═══════════════ */

/* Photo container — суцільний білий, БЕЗ padding, фото contain з внутрішнім масштабом */
.p-card .ph,
a.ph{
  background:#fff !important;
  position:relative !important;
  overflow:hidden !important;
  padding:0 !important;
  aspect-ratio:1 !important;
  display:block !important;
  border-radius:0 !important;
  border:0 !important;
  box-shadow:none !important;
}
/* Hover-swap: main зникає, hover з'являється. Позиції задані вище — тут ТІЛЬКИ opacity. */
.p-card .ph .p-img-hover{
  opacity:0 !important;
  pointer-events:none !important;
  z-index:2 !important;
}
.p-card:hover .ph .p-img-main{opacity:0 !important}
.p-card:hover .ph .p-img-hover{opacity:1 !important}
/* Без zoom — просто fade між фото (без зміщень) */
.p-card:hover .ph img{transform:none !important}

/* Прибираємо gradient overlay ::after який робив тінь-обмежувач */
.p-card .ph::after{display:none !important}

/* Картка — чисто біла, без вкладеного padding */
.p-card{
  background:#fff !important;
  border:1.5px solid #EDE7D3 !important;
  border-radius:16px !important;
  overflow:hidden !important;
  transition:transform .3s, box-shadow .3s, border-color .3s !important;
}
.p-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 24px 40px -20px rgba(30,40,24,.2) !important;
  border-color:#C9C4B2 !important;
}

/* Захист: фон .in (тіло картки) — теж білий (щоб не було сірого проміжку) */
.p-card .in{
  background:#fff !important;
}

/* ═══════════════════════════════════════════════════════════
   CARD v2 — пікер ваги + іконка-кошик
   ═══════════════════════════════════════════════════════════ */

/* Пікер ваги — з'являється на hover, під назвою */
.p-card .p-picker{
  display:flex !important;
  gap:5px !important;
  flex-wrap:wrap !important;
  margin:6px 0 4px !important;
  max-height:0 !important;
  opacity:0 !important;
  overflow:hidden !important;
  transition:max-height .35s cubic-bezier(.2,.7,.2,1), opacity .25s, margin .3s !important;
  pointer-events:none !important;
}
.p-card:hover .p-picker,
.p-card:focus-within .p-picker{
  max-height:80px !important;
  opacity:1 !important;
  margin:8px 0 6px !important;
  pointer-events:auto !important;
}
/* Для simple-товару — завжди видно (statу-текст) */
.p-card .p-picker.single{
  max-height:none !important;
  opacity:1 !important;
  pointer-events:none !important;
  margin:6px 0 4px !important;
}

/* Тапка ваги */
.p-card .p-pk{
  appearance:none !important;
  border:1.5px solid #E1DAC8 !important;
  background:#FBF8EF !important;
  color:#3A3628 !important;
  border-radius:999px !important;
  padding:5px 11px !important;
  font:700 10.5px "JetBrains Mono",monospace !important;
  letter-spacing:.06em !important;
  cursor:pointer !important;
  transition:all .2s !important;
  line-height:1 !important;
  min-height:26px !important;
  display:inline-flex !important;
  align-items:center !important;
  white-space:nowrap !important;
}
.p-card .p-pk:hover:not(.off):not(.static){
  border-color:#2E4A36 !important;
  color:#2E4A36 !important;
}
.p-card .p-pk.on{
  background:linear-gradient(140deg,#C17A3F,#9E5F2A) !important;
  border-color:#9E5F2A !important;
  color:#FBF8EF !important;
  box-shadow:0 4px 10px -4px rgba(158,95,42,.55) !important;
}
.p-card .p-pk.off{
  opacity:.4 !important;
  text-decoration:line-through !important;
  cursor:not-allowed !important;
}
.p-card .p-pk.static{
  background:transparent !important;
  border-color:transparent !important;
  color:#6B6858 !important;
  padding:5px 0 !important;
  font-style:italic !important;
  font-family:"Cormorant Garamond",serif !important;
  font-size:13px !important;
  letter-spacing:0 !important;
  font-weight:600 !important;
}

/* ─── Іконка-кошик (замість текстової кнопки) ─── */
.p-card .p-add.p-add-ic,
.p-card a.p-add.p-add-ic,
.p-card button.p-add.p-add-ic{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  max-width:40px !important;
  padding:0 !important;
  border-radius:50% !important;
  justify-content:center !important;
  gap:0 !important;
  font-size:0 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  flex-shrink:0 !important;
  position:relative !important;
  overflow:visible !important;
}
.p-card .p-add.p-add-ic svg{
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  max-width:16px !important;
  min-height:16px !important;
  max-height:16px !important;
  transition:transform .3s, opacity .25s !important;
}
.p-card .p-add.p-add-ic .p-add-check{
  position:absolute !important;
  top:50% !important;left:50% !important;
  transform:translate(-50%,-50%) scale(.6) !important;
  opacity:0 !important;
  color:#D9A874 !important;
  stroke:#D9A874 !important;
}
.p-card .p-add.p-add-ic.added svg:first-of-type{opacity:0 !important;transform:scale(.6) !important}
.p-card .p-add.p-add-ic.added .p-add-check{opacity:1 !important;transform:translate(-50%,-50%) scale(1) !important}
.p-card .p-add.p-add-ic.loading{pointer-events:none !important;opacity:.8 !important}
.p-card .p-add.p-add-ic.loading svg:first-of-type{animation:vpSpin 1s linear infinite !important}
@keyframes vpSpin{to{transform:rotate(360deg)}}
.p-card .p-add.p-add-ic.off{
  background:#E9E5DB !important;
  color:#8A8778 !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
}
.p-card .p-add.p-add-ic.off svg{color:#8A8778 !important;stroke:#8A8778 !important}

/* Іконка-кошик не має обрізати tooltip і не міняти розмір на hover */
.p-card .p-add.p-add-ic,
.p-card a.p-add.p-add-ic,
.p-card button.p-add.p-add-ic{
  overflow:visible !important;
  isolation:auto !important;
  transform:none !important;
  letter-spacing:0 !important;
}
.p-card .p-add.p-add-ic:hover{
  transform:none !important;
  letter-spacing:0 !important;
  padding:0 !important;
  width:40px !important;
  height:40px !important;
}
.p-card .p-add.p-add-ic:hover svg:first-of-type{
  transform:scale(1.08) !important;
}
/* Гасимо декоративний ::before з базового .p-add який дає overlay */
.p-card .p-add.p-add-ic::before{display:none !important;content:none !important}

/* Tooltip "В кошик" */
.p-card .p-add.p-add-ic .p-add-tip{
  position:absolute !important;
  bottom:calc(100% + 8px) !important;
  right:0 !important;
  background:#1E2818 !important;
  color:#F6F3EA !important;
  padding:5px 10px !important;
  border-radius:6px !important;
  font:600 10px "Inter",sans-serif !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  opacity:0 !important;
  transform:translateY(4px) !important;
  transition:opacity .2s, transform .2s !important;
  pointer-events:none !important;
  z-index:10 !important;
}
.p-card .p-add.p-add-ic .p-add-tip::after{
  content:"" !important;
  position:absolute !important;
  top:100% !important;right:14px !important;
  border:5px solid transparent !important;
  border-top-color:#1E2818 !important;
}
.p-card .p-add.p-add-ic:hover .p-add-tip{
  opacity:1 !important;
  transform:translateY(0) !important;
}

/* Ціна — жирніше і трохи більше в новому layout */
.p-card .p-price .now,
.p-card .p-price .amount,
.p-card .p-price .price,
.p-card .p-price .woocommerce-Price-amount{
  font:800 16px "Inter",sans-serif !important;
  color:#2E4A36 !important;
  letter-spacing:-.01em !important;
}
.p-card .p-price del{
  display:block !important;
  font:500 11.5px "Inter" !important;
  color:#8A8778 !important;
  margin-bottom:1px !important;
  opacity:.8 !important;
}
.p-card .p-price del .amount{
  font:500 11.5px "Inter" !important;
  color:#8A8778 !important;
}
.p-card .p-price ins{background:transparent !important;text-decoration:none !important}