/* =========================================================================
   Timberkids — product card (tk-cards.css)
   Scoped to .tk-card and its children only. No global/element resets, no
   theme-header/nav/footer styles. Brand tokens are --tk-* (prefixed to avoid
   any collision) and defined on the catalog/PDP/card wrappers so nothing leaks.
   Targets WooCommerce's real loop output (img.wp-post-image, .price, .button…).
   ========================================================================= */

/* ---- shared brand tokens (live on the wrappers; children inherit) ---- */
.tk-card,
.tk-catalog,
.tk-pdp {
  --tk-paper:#FAF7F2; --tk-paper-2:#F4EEE4; --tk-surface:#FFFFFF;
  --tk-ink:#241D15; --tk-ink-soft:#5B5249; --tk-muted:#6E6458;
  --tk-line:rgba(36,29,21,.09); --tk-line-strong:rgba(36,29,21,.16);
  --tk-brand:#2FC500; --tk-brand-press:#28A800;
  --tk-brand-ink:#1C7A00; --tk-brand-ink-press:#155F00; --tk-brand-tint:rgba(47,197,0,.12);
  --tk-wood:#B07A45; --tk-wood-deep:#8C5C2E; --tk-wood-soft:#F1E6D6;
  --tk-terracotta:#C0512F;
  --tk-r-card:20px; --tk-r-img:14px; --tk-r-item:12px; --tk-r-tag:9px;
  --tk-sh-rest:0 1px 2px rgba(36,29,21,.05),0 1px 1px rgba(36,29,21,.03);
  --tk-sh-hover:0 18px 36px -12px rgba(36,29,21,.18),0 6px 14px -8px rgba(36,29,21,.12);
  --tk-ease:cubic-bezier(.32,.72,0,1); --tk-dur:260ms;
  --tk-font:"Nunito",-apple-system,system-ui,sans-serif;
}

/* ---- the card (li.product.tk-card) ---- */
li.product.tk-card {
  font-family:var(--tk-font);
  display:flex; flex-direction:column;
  background:var(--tk-surface); border-radius:var(--tk-r-card);
  box-shadow:var(--tk-sh-rest); padding:10px 10px 14px; margin:0; list-style:none;
  transition:transform var(--tk-dur) var(--tk-ease),box-shadow var(--tk-dur) var(--tk-ease);
}
li.product.tk-card::before { display:none; } /* kill WC clearfix artifacts */
.tk-card:hover { transform:translateY(-5px); box-shadow:var(--tk-sh-hover); }

/* ---- media ---- */
.tk-card__media {
  position:relative; border-radius:var(--tk-r-img); overflow:hidden;
  aspect-ratio:4/5; background:var(--tk-wood-soft);
}
.tk-card__link { display:block; width:100%; height:100%; }
.tk-card__link img,
.tk-card__media img {
  width:100% !important; height:100% !important; max-width:none !important;
  object-fit:cover !important; object-position:center; display:block; margin:0; border-radius:0;
  transition:transform 600ms var(--tk-ease);
}
.tk-card:hover .tk-card__media img { transform:scale(1.045); }

/* badges (top-left) — sit over opaque fills; no backdrop-filter inside the grid */
.tk-badges { position:absolute; top:12px; left:12px; z-index:2; display:flex; flex-direction:column; gap:6px; }
.tk-badge {
  font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:var(--tk-r-tag); line-height:1.2;
}
.tk-badge--new { background:rgba(36,29,21,.88); color:#fff; }
.tk-badge--sale { background:var(--tk-terracotta); color:#fff; }

/* favorites slot (top-right) — wraps the Favorites plugin button */
.tk-fav {
  position:absolute; top:11px; right:11px; z-index:3;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.92); box-shadow:0 3px 10px -3px rgba(36,29,21,.25);
  display:grid; place-items:center;
  transition:transform var(--tk-dur) var(--tk-ease);
}
.tk-fav:hover { transform:scale(1.1); }
.tk-fav .simplefavorite-button,
.tk-fav a { margin:0; padding:0; background:none; border:0; line-height:0; display:inline-flex; }
.tk-fav .simplefavorite-button .simplefavorite-button-count { display:none; }
.tk-fav i, .tk-fav svg { font-size:18px; width:19px; height:19px; }

/* attribute tag (bottom-left) */
.tk-attr {
  position:absolute; left:12px; bottom:12px; z-index:2; max-width:calc(100% - 24px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--tk-r-tag);
  background:rgba(255,255,255,.92); color:var(--tk-wood-deep);
  box-shadow:0 2px 8px -2px rgba(36,29,21,.2);
}

/* ---- body ---- */
.tk-card__body { display:flex; flex-direction:column; flex:1; padding:14px 6px 10px; }
.tk-card__title-link { display:block; }
/* Title: clamp to 3 lines so long names show IN FULL (the reported "Măsuță
   Dreptunghiulară Clasică" needs 3 lines); only truly long names get a clean "…".
   The live theme pins this to display:flow-root + font-size:16px at HIGH specificity,
   which disables -webkit-line-clamp AND made the old 2-line box clip a 3rd line
   mid-glyph (the "cut"). We out-specify it with a 5-class selector via
   .tk-card__title-link so the clamp actually takes effect. No min-height — the CTA
   is pinned to the card bottom (margin-top:auto) so cards stay aligned. */
.tk-catalog .tk-card .tk-card__body .tk-card__title-link .woocommerce-loop-product__title,
.tk-related-wrap .tk-card .tk-card__body .tk-card__title-link .woocommerce-loop-product__title,
.tk-card .woocommerce-loop-product__title {
  font-weight:700; line-height:1.34; color:var(--tk-ink); margin:0; padding:0;
  overflow:hidden !important; font-size:15px !important;
  /* Natural-height title, clamped to 2 lines (DESKTOP) / 3 lines (MOBILE, below) with a
     clean ellipsis. Replaces the old FIXED-height box, which reserved a full 2-3 lines even
     for short names and left dead space between the name and the price (the reported "lower
     the padding between the name and price"). -webkit-line-clamp needs display:-webkit-box;
     the theme pins display:flow-root, so we out-specify with the 5-class selector +
     !important (verified to win, nothing clipped at the current catalog's longest names).
     Cards are now natural height (grid uses align-items:start), so price/CTA no longer
     force-align across a row in exchange for tight, consistent name->price->CTA spacing. */
  display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important;
  /* height:auto + min-height:0 => short names collapse (no dead space); max-height caps long
     names at 2 lines and — unlike -webkit-line-clamp — works even where the theme forces
     display:flow-root (e.g. the PDP related-products loop), so titles never run uncapped. */
  height:auto !important; min-height:0 !important; max-height:2.68em !important;
  transition:color var(--tk-dur) var(--tk-ease);
}
.tk-card:hover .woocommerce-loop-product__title { color:var(--tk-brand-ink); }

.tk-card .star-rating { font-size:12px; margin:8px 0 0; color:var(--tk-wood); }

.tk-card .price {
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  margin:4px 0 0; color:var(--tk-brand-ink) !important; font-weight:900 !important; font-size:22px !important;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.tk-card .price .woocommerce-Price-amount { font-weight:900; }
.tk-card .price del { color:var(--tk-muted); font-weight:700; font-size:13.5px; text-decoration:line-through; opacity:1; }
.tk-card .price ins { text-decoration:none; }
.tk-card .price .woocommerce-Price-currencySymbol { font-weight:700; }

/* ---- add-to-cart — PRESERVED .tk-loop-atc wrapper, in the card BODY below the image ----
   The title box is a fixed 3-line height, so price + CTA already line up across cards
   with a simple fixed gap (no flex auto-margin needed — the theme's combined CSS made
   that unreliable). */
/* Reduced to 3px (price top-margin 9 -> 6, body bottom-pad 14 -> 10): the reported
   "too much space between the product name and the green button". NOTE the EFFECTIVE
   value is set by the timberkids-storefront plugin's inline `.tk-loop-atc{margin:...}`
   (wp_head pri 99, so it loads after this file and wins on equal specificity) — kept
   in sync there. Title box stays a fixed height so cards still line up across the row. */
.tk-loop-atc { margin-top:3px; }
/* !important: the live theme/Elementor + WooCommerce + visited-link colour all try to
   restyle this <a>, turning it violet/transparent — force the brand green + white. */
.tk-card .tk-loop-atc a.button,
.tk-card .tk-loop-atc a.button:link,
.tk-card .tk-loop-atc a.button:visited,
.tk-card .tk-loop-atc a.added_to_cart,
.tk-card .tk-loop-atc .button {
  display:flex !important; align-items:center; justify-content:center; gap:9px; width:100% !important; height:auto !important; min-width:0; box-sizing:border-box;
  background:var(--tk-brand-ink) !important; color:#fff !important; font-family:var(--tk-font); font-weight:800; font-size:14px;
  padding:12px 16px !important; border-radius:999px !important; letter-spacing:.01em; border:0 !important; text-transform:none;
  box-shadow:0 6px 16px -8px rgba(28,122,0,.55);
  transition:background var(--tk-dur) var(--tk-ease),transform var(--tk-dur) var(--tk-ease),box-shadow var(--tk-dur) var(--tk-ease);
}
.tk-card .tk-loop-atc a.button::before {
  content:""; flex:0 0 auto; width:18px; height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h3l2.4 12.4a2 2 0 0 0 2 1.6h8.2a2 2 0 0 0 2-1.6L23 7H6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.tk-card .tk-loop-atc a.button:hover { background:var(--tk-brand-ink-press) !important; color:#fff !important; box-shadow:0 10px 22px -8px rgba(28,122,0,.7); }
.tk-card .tk-loop-atc a.button:active { transform:scale(.975); }
.tk-card .tk-loop-atc a.button.loading { opacity:.85; }
.tk-card .tk-loop-atc a.added_to_cart::before { display:none; } /* "Vezi coșul" link after ajax add */
.tk-card .tk-loop-atc a.added_to_cart { background:var(--tk-surface); color:var(--tk-brand-ink); box-shadow:inset 0 0 0 1.5px var(--tk-line-strong); margin-top:8px; }

/* keyboard focus ring (scoped) */
.tk-card a:focus-visible,
.tk-card button:focus-visible { outline:2.5px solid var(--tk-brand); outline-offset:2px; border-radius:8px; }

@media (max-width:560px) {
  li.product.tk-card { padding:8px 8px 12px; }
  /* high-spec to beat the theme's font-size:16px (see title rule above); allow UP TO 3
     lines on narrow phone cards (longest names wrap to 3), natural height + clean ellipsis. */
  .tk-catalog .tk-card .tk-card__body .tk-card__title-link .woocommerce-loop-product__title {
    font-size:13.5px !important; -webkit-line-clamp:3 !important; height:auto !important; min-height:0 !important; max-height:4.02em !important;
  }
  .tk-card .price { font-size:16.5px; }
  /* 2-up phone cards give the CTA only ~95-110px of inner width. Drop the cart
     glyph here and keep the label on ONE readable line ("Adaugă în coș"). The
     icon returns >=561px where cards are wide enough. Higher specificity
     (li.product.tk-card) + !important is required: the base ATC rule pins padding
     !important and the theme forces font-size:15px. (<360px is 1-up, so even long
     RU labels stay a full-width pill, never a circle.) */
  li.product.tk-card .tk-loop-atc a.button { font-size:12.5px !important; padding:11px 8px !important; gap:0 !important; }
  li.product.tk-card .tk-loop-atc a.button::before { display:none !important; }
}
@media (prefers-reduced-motion:reduce) {
  .tk-card, .tk-card * { transition-duration:1ms !important; }
}

/* fix: kill mobile tap-highlight on cards */
.tk-card a,.tk-card button,.tk-loop-atc a,.tk-loop-atc button{-webkit-tap-highlight-color:transparent !important;}

/* ---- header no-wrap at very narrow widths (<360px) ----
   The Elementor header's .e-con-inner has flex-wrap:wrap set by the theme's
   responsive CSS. At <360px the cart widget (order:4) overflows onto a second
   row making the header 122px tall instead of 70px. Force nowrap + allow
   flex-shrink so every widget stays on the same row. */
@media (max-width:359px) {
  [data-elementor-type="header"] .e-con-inner { flex-wrap:nowrap !important; align-items:center !important; }
  [data-elementor-type="header"] .elementor-widget { flex-shrink:1 !important; min-width:0 !important; }
}

/* WooCommerce breadcrumb (shop + product) — on-brand restyle. Scoped to the WC
   breadcrumb class only (literal colours: this sits outside the --tk-* token scope). */
.woocommerce-breadcrumb {
  font-family:"Nunito",-apple-system,system-ui,sans-serif !important;
  max-width:1280px; margin:0 auto 16px !important; padding:14px clamp(16px,3vw,32px) 0 !important;
  font-size:12.5px !important; font-weight:700 !important; color:#6E6458 !important;
  display:flex; flex-wrap:wrap; align-items:center; gap:7px; line-height:1.5;
}
.woocommerce-breadcrumb a { color:#8C5C2E !important; text-decoration:none !important; transition:color .2s ease; }
.woocommerce-breadcrumb a:hover { color:#1C7A00 !important; }

/* Small screens: a deep trail (Acasă / Magazin / categorie / subcategorie / produs)
   wraps into a tall cramped block. Keep it on ONE tidy line that scrolls horizontally
   instead, with a soft right-edge fade to hint the overflow. The current page repeats
   as the H1 just below, so fading its tail costs nothing. */
@media (max-width:768px) {
  .woocommerce-breadcrumb {
    flex-wrap:nowrap !important; white-space:nowrap;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    gap:5px !important; font-size:11.5px !important; line-height:1.4 !important;
    padding-top:12px !important; margin-bottom:10px !important;
    scrollbar-width:none; -ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
  }
  .woocommerce-breadcrumb::-webkit-scrollbar { display:none; }
  .woocommerce-breadcrumb a { white-space:nowrap; }
}