/* ==========================================================================
   Product lists and cards — shop, categories, home rows, related, wishlist
   ========================================================================== */
ul.products {
  --cols: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--tf-gap);
}
@media (min-width: 768px) { ul.products { --cols: 3; } }
@media (min-width: 1024px) {
  ul.products { --cols: 4; }
  ul.products.columns-3 { --cols: 3; }
  ul.products.columns-5 { --cols: 5; }
  .tf-products--home { --cols: 5; }
}
@media (min-width: 1024px) and (max-width: 1199px) { .tf-products--home, ul.products.columns-5 { --cols: 4; } }

/* Swipe rows: always for "slider" rows; on phones for home rows and (optionally) shop pages.
   Cards are always whole: the gap equals the side gutter, so the next card starts exactly
   at the screen edge instead of peeking in half cut. */
ul.products.tf-products--slider,
.tf-m-swipe-home ul.products.tf-products--home,
.tf-m-swipe-shop .tf-shop > ul.products,
.upsells ul.products,
.tf-reviews-track,
.tf-cats__track {
  --pv: var(--tf-pv, 2);
  --sg: var(--tf-gutter);
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--sg) * (var(--pv) - 1)) / var(--pv));
  gap: var(--sg);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--tf-gutter);
  margin-inline: calc(var(--tf-gutter) * -1);
  padding: 2px var(--tf-gutter) 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tf-products--slider::-webkit-scrollbar, .tf-m-swipe-home .tf-products--home::-webkit-scrollbar,
.tf-m-swipe-shop .tf-shop > ul.products::-webkit-scrollbar,
.upsells ul.products::-webkit-scrollbar, .tf-reviews-track::-webkit-scrollbar, .tf-cats__track::-webkit-scrollbar { display: none; }
.tf-products--slider > li, .tf-m-swipe-home .tf-products--home > li, .tf-m-swipe-shop .tf-shop > ul.products > li,
.upsells ul.products > li, .tf-reviews-track > *, .tf-cats__track > li { scroll-snap-align: start; }

/* Shop and category pages on phones (only when "Swipe row" is chosen): two rows swipe together */
.tf-m-swipe-shop .tf-shop > ul.products { grid-template-rows: auto auto; }

@media (min-width: 768px) {
  .tf-m-swipe-shop .tf-shop > ul.products { grid-template-rows: none; }
  ul.products.tf-products--slider, .upsells ul.products { --pv: 3; }
  /* Grids again on tablets and up */
  .tf-m-swipe-home ul.products.tf-products--home, .tf-m-swipe-shop .tf-shop > ul.products {
    grid-auto-flow: row;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    gap: var(--tf-gap);
    overflow: visible;
    margin-inline: 0;
    padding: 0;
  }
}
@media (min-width: 1024px) {
  ul.products.tf-products--slider, .upsells ul.products, .tf-reviews-track, .tf-cats__track { --sg: var(--tf-gap); margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
  ul.products.tf-products--slider, .upsells ul.products { --pv: 4; }
}
@media (min-width: 1200px) { ul.products.tf-products--slider { --pv: 5; } }

/* Trust badges and the home features strip: a swipe row of whole cards on phones */
@media (max-width: 767px) {
  ul.tf-features, ul.tf-trust {
    --sg: 10px;
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--sg)) / 2);
    gap: var(--sg);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: none;
  }
  .tf-features::-webkit-scrollbar, .tf-trust::-webkit-scrollbar { display: none; }
  ul.tf-features li, ul.tf-trust li {
    scroll-snap-align: start;
    padding: 10px !important;
    border: 1px solid var(--tf-line) !important;
    border-radius: 12px;
    background: #fff;
    gap: 10px;
  }
}

/* Card --------------------------------------------------------------------------- */
.tf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  background: #fff;
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
@media (hover: hover) {
  .tf-card:hover { border-color: #cfdcd2; box-shadow: 0 14px 30px -22px rgba(17, 20, 17, .45); }
}
.tf-card__media { position: relative; aspect-ratio: 1; background: var(--tf-soft); overflow: hidden; }
.tf-card__img { display: block; position: absolute; inset: 0; }
.tf-card__pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s, transform .5s var(--tf-ease); }
.tf-card__pic--alt { opacity: 0; }
/* Phones can't hover: hide the second photo so the browser never downloads it (lazy + display:none). */
@media (hover: none) { .tf-card__pic--alt { display: none; } }
@media (hover: hover) {
  .tf-card:hover .tf-card__pic--alt { opacity: 1; }
  .tf-card:hover .tf-card__pic:only-child { transform: scale(1.04); }
}
.tf-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--tf-red);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
}
.tf-badge--out { background: var(--tf-ink); }

.tf-wish {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .92);
  color: var(--tf-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
  transition: color .15s, transform .15s;
}
.tf-wish .tf-i { width: 17px; height: 17px; }
.tf-wish:hover { color: var(--tf-red); }
.tf-wish[aria-pressed="true"] { color: var(--tf-red); }
.tf-wish[aria-pressed="true"] svg { fill: currentColor; }
.tf-wish.is-pop { animation: tf-bump .4s var(--tf-ease); }

.tf-card__body { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 12px; flex: 1; }
@media (min-width: 768px) { .tf-card__body { padding: 12px 14px 14px; } }
.tf-card__cat { font-size: 11.5px; color: var(--tf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-card__title {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em; /* every card keeps two lines, so cards stay equal */
  color: var(--tf-ink);
}
@media (min-width: 768px) { .tf-card__title { font-size: 14px; } }
.tf-card__title a:hover { color: var(--tf-green); }
.tf-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card is clickable */
.tf-card__rating { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--tf-muted); }
.tf-card__rating .tf-stars { font-size: 12px; letter-spacing: 1px; }
.tf-card__price { font-size: 15px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; margin-top: auto; padding-top: 2px; }
.tf-card__price del { order: 2; font-size: 12.5px; margin: 0; }
.tf-card__price ins { order: 1; }
.tf-card__actions { position: relative; z-index: 2; margin-top: 8px; }
.tf-card__add, .tf-card__actions .button {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  font-size: 13px;
  background: #fff;
  color: var(--tf-green);
  border-color: var(--tf-green);
}
.tf-card__add:hover, .tf-card__actions .button:hover { background: var(--tf-green); color: #fff; }
.tf-card__add.added { background: var(--tf-green); color: #fff; }
.tf-card__add.loading::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tf-spin .7s linear infinite; }
@keyframes tf-spin { to { transform: rotate(360deg); } }
.tf-card__actions .added_to_cart { display: none; }

/* Card styles (Customize → Colors & Style) */
.tf-cards-shadow .tf-card { border-color: transparent; box-shadow: 0 10px 28px -18px rgba(17, 20, 17, .35); }
.tf-cards-flat .tf-card { border-color: transparent; background: transparent; }
.tf-cards-flat .tf-card__media { border-radius: var(--tf-r); }
.tf-cards-flat .tf-card__body { padding-inline: 2px; }

/* Shop and category pages ------------------------------------------------------------ */
.tf-shop { padding-bottom: 48px; }
.woocommerce-products-header { padding-block: 6px 12px; }
.woocommerce-products-header__title { font-size: 24px; margin: 0; }
@media (min-width: 768px) { .woocommerce-products-header__title { font-size: 30px; } }
.term-description, .page-description { color: var(--tf-muted); max-width: 720px; font-size: 14px; margin-top: 6px; }
.term-description p:last-child { margin: 0; }

.tf-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(var(--tf-gutter) * -1) 14px;
  padding: 2px var(--tf-gutter);
}
.tf-chips::-webkit-scrollbar { display: none; }
.tf-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--tf-line);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--tf-ink);
  background: #fff;
  transition: border-color .15s, background .15s, color .15s;
}
.tf-chip small { color: var(--tf-muted); font-size: 11.5px; }
.tf-chip:hover { border-color: var(--tf-green); color: var(--tf-green); }
.tf-chip.is-active { background: var(--tf-green); border-color: var(--tf-green); color: #fff; }
.tf-chip.is-active small { color: #d6e9dc; }

.tf-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.woocommerce-result-count { margin: 0; font-size: 13.5px; color: var(--tf-muted); }
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select { min-height: 40px; width: auto; max-width: 52vw; padding: 6px 36px 6px 12px; font-size: 14px; border-radius: 10px; }
.woocommerce-no-products-found .woocommerce-info { margin-top: 10px; }

/* Wishlist page -------------------------------------------------------------------------- */
.tf-wishlist ul.products { margin: 0; padding: 0; }
.tf-wishlist .tf-wishlist__grid:empty { display: none; }
.tf-wishlist .tf-card__remove { position: absolute; top: 6px; right: 6px; z-index: 3; }

/* Review cards (home row and reviews page) ------------------------------------------------- */
.tf-reviews-track { --pv: 1; }
@media (min-width: 768px) { .tf-reviews-track { --pv: 2; } }
@media (min-width: 1024px) { .tf-reviews-track { --pv: 3; } }
.tf-review {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  background: #fff;
}
.tf-review__head { display: flex; align-items: center; gap: 10px; }
.tf-review__head b { display: block; color: var(--tf-ink); font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.tf-review__head small { color: var(--tf-muted); font-size: 12px; }
.tf-review__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--tf-green-tint); color: var(--tf-green); display: grid; place-items: center; font-weight: 600; flex: none; }
.tf-review__text { margin: 0; font-size: 14px; color: var(--tf-text); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.tf-review-photo { display: inline-block; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid var(--tf-line); margin-top: 6px; }
.tf-review-photo img { width: 100%; height: 100%; object-fit: cover; }
.tf-review__product { margin-top: auto; display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--tf-line); font-size: 12.5px; color: var(--tf-muted); }
.tf-review__product img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex: none; }
.tf-review__product span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-review__product:hover { color: var(--tf-green); }

.tf-reviews-page { display: grid; gap: 18px; }
.tf-reviews-grid { display: grid; gap: var(--tf-gap); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tf-review-write { border: 1px solid var(--tf-line); border-radius: var(--tf-r); padding: 0; }
.tf-review-write > summary { list-style: none; margin: 14px; width: auto; }
.tf-review-write > summary::-webkit-details-marker { display: none; }
.tf-review-write[open] > summary { background: #fff; color: var(--tf-green); }
.tf-review-form { padding: 0 16px 18px; max-width: 640px; }
.tf-form-row { display: grid; gap: 0 14px; }
@media (min-width: 640px) { .tf-form-row { grid-template-columns: 1fr 1fr; } }
.tf-review-form small { display: block; color: var(--tf-muted); font-size: 12px; margin-top: 4px; }
.tf-hp { position: absolute; left: -9999px; }

/* Star picker: radios in reverse order so hover fills from the left */
.tf-rate { border: 0; padding: 0; margin: 0 0 14px; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.tf-rate legend { width: 100%; font-weight: 500; font-size: 14px; color: var(--tf-ink); margin-bottom: 6px; float: left; }
.tf-rate input { position: absolute; opacity: 0; pointer-events: none; }
.tf-rate label { margin: 0; cursor: pointer; color: #d8ddd9; }
.tf-rate label .tf-i { width: 30px; height: 30px; fill: currentColor; }
.tf-rate input:checked ~ label, .tf-rate label:hover, .tf-rate label:hover ~ label { color: var(--tf-star); }
.tf-rate input:focus-visible + label { outline: 2px solid var(--tf-green); border-radius: 6px; }

/* Category cards (home page, shop and category pages) ----------------------------- */
.tf-cats__track { --pv: 3; list-style: none; }
@media (min-width: 560px) { .tf-cats__track { --pv: 4; } }
@media (min-width: 768px) { .tf-cats__track { --pv: 5; } }
@media (min-width: 1024px) { .tf-cats__track { --pv: 6; } }
.tf-cats__track > li { min-width: 0; }
.tf-cat {
  --cat-bg: #eaf3ed;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cat-bg);
  transition: transform .3s var(--tf-ease), box-shadow .3s;
}
.tf-cats__track > li:nth-child(4n+2) .tf-cat { --cat-bg: #f8f2e7; }
.tf-cats__track > li:nth-child(4n+3) .tf-cat { --cat-bg: #f4ede6; }
.tf-cats__track > li:nth-child(4n+4) .tf-cat { --cat-bg: #eef1f4; }
.tf-cat:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -22px rgba(17, 20, 17, .5); }
.tf-cat__img {
  margin: 6px 6px 0;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--tf-green);
}
.tf-cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--tf-ease); }
.tf-cat:hover .tf-cat__img img { transform: scale(1.06); }
.tf-cat__foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px; flex: 1; }
.tf-cat__text { display: grid; min-width: 0; flex: 1; text-align: left; }
.tf-cat__name { font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--tf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-cat__count { font-size: 11px; color: var(--tf-muted); }
.tf-cat__go { display: none; width: 30px; height: 30px; border-radius: 50%; background: var(--tf-green); color: #fff; place-items: center; flex: none; transition: transform .2s var(--tf-ease); }
.tf-cat__go .tf-i { width: 15px; height: 15px; }
.tf-cat:hover .tf-cat__go { transform: translateX(2px); }
@media (min-width: 560px) {
  .tf-cat__img { margin: 8px 8px 0; }
  .tf-cat__foot { padding: 10px 12px 12px; }
  .tf-cat__name { font-size: 14px; }
  .tf-cat__count { font-size: 12px; }
  .tf-cat__go { display: grid; }
}

/* Shop / category page: categories as photo cards above the products */
.tf-shop-cats { margin-bottom: 16px; }
.tf-shop-cats .tf-cats__track { padding-bottom: 6px; }
.tf-shop-cats li.is-active .tf-cat { box-shadow: inset 0 0 0 2px var(--tf-green); }

/* Category text under the product grid (inc/category-seo.php) ------------------------- */
.tf-cat-seo { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--tf-line); max-width: 860px; font-size: 14.5px; line-height: 1.75; color: var(--tf-muted, #4a504c); }
.tf-cat-seo h2 { font-size: 20px; color: var(--tf-ink); margin-top: 1.4em; }
.tf-cat-seo h2:first-child { margin-top: 0; }
.tf-cat-seo h3 { font-size: 16px; color: var(--tf-ink); margin-top: 1.2em; }
.tf-cat-seo ul { padding-left: 1.2em; }
.tf-cat-seo a { color: var(--tf-green); text-decoration: underline; text-underline-offset: 3px; }