/* ============================================================
   Wolvex — Cards: category tiles, product cards, review cards
   (mockup values; whole-card click via .stretched-link)
   ============================================================ */

/* ---- Generic card primitive used by auth/account/admin pages ---- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
.card-header{padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);}
.card-body{padding:var(--space-6);}

/* ---- Section header row + horizontal product carousel — shared by the
   homepage, error pages, category "related products", product page etc.
   .row-head/.carousel are the older names some copied pages still use. ---- */
.section-head,
.row-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:26px;gap:16px;flex-wrap:wrap;}
.section-head h2,
.row-head h2{font-size:1.7em;margin:0;}
.section-head a,
.row-head a{color:var(--red-deep);font-weight:800;text-decoration:none;white-space:nowrap;font-size:.95em;}
.section-head a:hover,
.row-head a:hover{text-decoration:underline;}
.section-head.centered{justify-content:center;text-align:center;}

.carousel-wrap{position:relative;}
.carousel,
.prod-scroll{display:flex;gap:20px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;scroll-behavior:smooth;}
.carousel-btn{position:absolute;top:calc(50% - 22px);width:44px;height:44px;border-radius:50%;background:var(--paper);border:1px solid var(--line);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5;box-shadow:0 12px 24px -14px rgba(37,52,85,.4);}
.carousel-btn:hover{background:var(--cloud);}
.carousel-btn.prev{left:-18px;}
.carousel-btn.next{right:-18px;}
@media (max-width:720px){
  .carousel-btn{display:none;}
  /* No arrow buttons at this width, so fade the trailing edge to hint
     there's more to scroll to instead of abruptly cutting a card off. */
  .carousel,
  .prod-scroll{
    mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent);
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
}

/* ================= CATEGORY TILES ================= */
.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.tile-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);padding:20px;transition:box-shadow .18s ease, transform .18s ease;}
.tile-card:hover{box-shadow:0 18px 34px -20px rgba(37,52,85,.4);transform:translateY(-4px);}
.tile-card h3{font-size:1.15em;margin-bottom:14px;}
.tile-sub{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.tile-thumb{position:relative;aspect-ratio:1/1;background:var(--cloud);border-radius:var(--radius-s);display:flex;align-items:center;justify-content:center;color:var(--ink);overflow:hidden;}
.tile-thumb img{width:100%;height:100%;object-fit:contain;padding:10px;}
.tile-thumb a{position:absolute;inset:0;z-index:2;}
.tile-thumb a:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;}
.tile-card a.see-more{color:var(--red-deep);font-weight:800;text-decoration:none;font-size:.92em;}
.tile-card a.see-more:hover{text-decoration:underline;}

/* ================= PRODUCT CARDS ================= */
.prod-card{position:relative;scroll-snap-align:start;flex:0 0 240px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s ease;}
.prod-card:hover{box-shadow:0 18px 34px -20px rgba(37,52,85,.4);}
/* The link stays in normal flow (so its text renders where it should);
   a pseudo-element expands the click target to the whole card. */
.prod-card .stretched-link{position:relative;z-index:2;}
.prod-card .stretched-link::after{content:"";position:absolute;inset:0;z-index:1;}

.prod-media{aspect-ratio:1/1;background:var(--cloud);display:flex;align-items:center;justify-content:center;color:var(--ink);position:relative;}
.prod-media a{position:relative;z-index:2;display:block;width:100%;height:100%;}
.prod-media img{width:100%;height:100%;object-fit:contain;padding:14px;}
.prod-tag{position:absolute;top:10px;left:10px;background:var(--red);color:#fff;font-weight:800;font-size:.68em;text-transform:uppercase;letter-spacing:.03em;padding:4px 9px;border-radius:999px;z-index:3;pointer-events:none;}

.prod-body{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1;}
.prod-body h3{
  font-size:.98em;font-family:var(--font-body);font-weight:700;color:var(--ink-deep);margin-bottom:2px;
  /* Clamp real (often long) product names to 2 lines so every card in a
     row stays the same height, matching the mockup's short placeholder titles. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.3;min-height:2.6em;
}
.prod-body h3 a{text-decoration:none;color:inherit;}

.rating{display:flex;align-items:center;gap:2px;color:#B4631A;font-size:.85em;font-weight:700;min-height:1.3em;}
.rating .star{width:14px;height:14px;color:var(--line);flex-shrink:0;}
.rating .star.filled{color:#B4631A;}
.rating .count{color:var(--slate);font-weight:500;margin-left:3px;}

.free-badge{display:inline-flex;align-items:center;gap:5px;font-size:.78em;font-weight:800;color:#2F7D5B;min-height:1.3em;}

.prod-price{font-family:var(--font-display);font-weight:700;font-size:1.3em;color:var(--ink);margin-top:auto;}
.prod-price .was{font-family:var(--font-body);font-size:.5em;color:var(--slate);text-decoration:line-through;font-weight:600;margin-left:6px;}

/* ================= REVIEW CARDS ================= */
.review-strip{display:flex;gap:20px;overflow-x:auto;padding-bottom:8px;align-items:stretch;}
.review-card{
  position:relative;
  flex:0 0 280px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:22px;
  display:flex;
  flex-direction:column;
  /* Fixed height so every card matches regardless of real review length. */
  height:260px;
}
.review-stars{display:flex;gap:2px;color:#B4631A;font-weight:800;margin-bottom:8px;flex-shrink:0;}
.review-stars .star{width:16px;height:16px;color:var(--line);}
.review-stars .star.filled{color:#B4631A;}
.review-card p{
  color:var(--ink-deep);
  font-size:.95em;
  flex:1;
  /* Clamp long real reviews to 5 lines instead of stretching the card. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;
}
.review-name{font-weight:800;color:var(--ink);font-size:.9em;flex-shrink:0;margin-top:auto;}
.review-name a{position:relative;z-index:2;display:block;color:var(--red-deep);text-decoration:none;font-weight:700;margin-top:4px;}
.review-name a:hover{text-decoration:underline;}
.review-name a.stretched-link::after{content:"";position:absolute;inset:0;z-index:1;}