/* Toolspot4u Child Theme — Cards Component
   All card, tile, chip, grid, and list components from Paper & Ember.
   Source: Redesign Mockup_2/assets/styles.css (extracted and organised). */

/* ── Base card ───────────────────────────────────────────────────────────── */

.card {
  background:    var(--linen);
  border-radius: var(--r-xl);
  padding:       28px;
  border:        1px solid transparent;
  transition:    transform 0.2s var(--ease-out),
                 border-color 0.2s,
                 box-shadow 0.2s;
}
.card:hover { transform: translateY(-4px); border-color: var(--ember); }

/* ── Tile (icon square) ──────────────────────────────────────────────────── */

.tile {
  width:           44px;
  height:          44px;
  border-radius:   var(--r-md);
  background:      var(--ink);
  color:           var(--paper);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--disp);
  font-weight:     700;
  font-size:       1.15rem;
  flex:            0 0 auto;
}

/* ── Category label ──────────────────────────────────────────────────────── */

.cat {
  font-family:    var(--mono);
  font-size:      0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--ink-60);
}

/* ── Chip (filter tag) ───────────────────────────────────────────────────── */

.chip {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  font-family:    var(--mono);
  font-size:      0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background:     var(--linen);
  border:         1px solid var(--ink-12);
  border-radius:  var(--r-pill);
  padding:        6px 14px;
  color:          var(--ink-60);
  cursor:         pointer;
  transition:     all var(--dur-std);
  white-space:    nowrap;
}
.chip:hover,
.chip.on         { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.ember      { background: var(--ember); border-color: var(--ember); color: #fff; }
.chip:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* ── Star icon ───────────────────────────────────────────────────────────── */

.star { color: var(--ember); }

/* ── Tool directory card (rich, .tgc) ────────────────────────────────────── */

.tgc {
  background:    var(--linen);
  border-radius: var(--r-xl);
  padding:       24px;
  border:        1px solid transparent;
  transition:    transform 0.2s var(--ease-out),
                 border-color 0.2s,
                 box-shadow 0.2s;
  display:       flex;
  flex-direction: column;
  cursor:        pointer;
  text-decoration: none;
  color:         inherit;
  position:      relative;
  transition-timing-function: var(--ease-out);
}
.tgc:hover {
  transform:   translateY(-4px);
  border-color: var(--ember);
  box-shadow:   0 16px 40px -16px rgba(255,92,0,.18);
}

.tgc .tgc-head {
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
  margin-bottom: 12px;
}
.tgc .tgc-info { flex: 1; min-width: 0; }
.tgc h3 {
  font-weight:  600;
  font-size:    1.02rem;
  line-height:  1.3;
  margin-bottom: 3px;
  font-family:  var(--body);
}
.tgc .cat-line {
  font-family:    var(--mono);
  font-size:      0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--ink-60);
}
.tgc .d {
  color:         var(--ink-60);
  font-size:     0.9rem;
  line-height:   1.55;
  flex:          1;
  margin-bottom: 14px;
}
.tgc .tgc-ft {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-top:      auto;
  padding-top:     14px;
  border-top:      1px solid var(--ink-12);
}
.tgc .score {
  display:     flex;
  align-items: center;
  gap:         5px;
  font-family: var(--mono);
  font-size:   0.8rem;
}
.tgc .score b    { color: var(--ink); font-size: 0.88rem; }
.tgc .score .star { color: var(--ember); }
.tgc .cta-hint {
  font-family:    var(--mono);
  font-size:      0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          var(--ink-60);
  transition:     color var(--dur-std);
}
.tgc:hover .cta-hint { color: var(--ember-deep); }

/* ── Pricing badge ───────────────────────────────────────────────────────── */

.pbadge {
  display:        inline-flex;
  align-items:    center;
  font-family:    var(--mono);
  font-size:      0.6rem;
  font-weight:    500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius:  var(--r-pill);
  padding:        4px 10px;
  border:         1px solid;
  white-space:    nowrap;
  flex:           0 0 auto;
}
.pbadge-free     { background: rgba(34,197,94,.1);  color: #16a34a; border-color: rgba(34,197,94,.25); }
.pbadge-freemium { background: rgba(245,158,11,.1); color: #b45309; border-color: rgba(245,158,11,.25); }
.pbadge-paid     { background: var(--ink-12);       color: var(--ink-60); border-color: var(--ink-12); }

/* ── Insight card (.icard) ───────────────────────────────────────────────── */

.icard {
  background:      var(--linen);
  border-radius:   22px;
  overflow:        hidden;
  border:          1px solid var(--ink-12);
  transition:      transform 0.28s var(--ease-out),
                   border-color 0.28s,
                   box-shadow 0.28s;
  display:         flex;
  flex-direction:  column;
  position:        relative;
  text-decoration: none;
  color:           inherit;
}
.icard:hover {
  transform:   translateY(-5px);
  border-color: var(--ember);
  box-shadow:   0 18px 44px -18px rgba(255,92,0,.22);
}

.icard .img-wrap {
  position:   relative;
  overflow:   hidden;
  aspect-ratio: 16/9;
  flex:       0 0 auto;
}
.icard .img-wrap img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.65s var(--ease-out);
}
.icard:hover .img-wrap img { transform: scale(1.08); }

.icard .img-grad {
  position:   absolute;
  inset:      0;
  background: linear-gradient(180deg, transparent 30%, rgba(29,27,22,.5));
  transition: opacity 0.3s;
}
.icard:hover .img-grad { opacity: 0.75; }

.icard .img-action {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  backdrop-filter: blur(2px);
  background:      rgba(242,239,233,.06);
  transition:      opacity 0.3s;
}
.icard:hover .img-action { opacity: 1; }

.img-tags {
  position: absolute;
  bottom:   12px;
  left:     12px;
  display:  flex;
  gap:      7px;
}
.img-tags span {
  background:      rgba(242,239,233,.88);
  backdrop-filter: blur(10px);
  color:           var(--ink);
  font-family:     var(--mono);
  font-size:       0.6rem;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  border-radius:   var(--r-pill);
  padding:         5px 12px;
  border:          1px solid rgba(29,27,22,.08);
}

.icard .ibody {
  padding:        22px 22px 10px;
  display:        flex;
  flex-direction: column;
  gap:            8px;
  flex:           1;
}
.icard .ibody h3 {
  font-family: var(--disp);
  font-size:   1.18rem;
  line-height: 1.3;
  transition:  color 0.22s;
  margin:      0;
}
.icard:hover .ibody h3 { color: var(--ember-deep); }

.imeta {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         12px 22px 18px;
  border-top:      1px solid var(--ink-12);
  margin-top:      auto;
}
.iauthor { display: flex; align-items: center; gap: 10px; }
.iavatar {
  width:           30px;
  height:          30px;
  border-radius:   50%;
  background:      var(--ink);
  color:           var(--paper);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--disp);
  font-size:       0.78rem;
  font-weight:     700;
  flex:            0 0 auto;
  border:          2px solid var(--linen-deep);
}
.iauthor-name { font-size: 0.82rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.iauthor-date { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.03em; color: var(--ink-60); }
.iread-time  { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.04em; color: var(--ink-60); }

/* ── Testimonial card (.tcard-q) ─────────────────────────────────────────── */

.tcard-q {
  background:     var(--linen);
  border-radius:  var(--r-xl);
  padding:        28px 28px 24px;
  display:        flex;
  flex-direction: column;
  gap:            20px;
  border:         1px solid transparent;
  transition:     border-color 0.2s;
}
.tcard-q:hover { border-color: var(--ember); }
.tcard-q blockquote {
  font-family:    var(--disp);
  font-weight:    700;
  font-size:      1.1rem;
  line-height:    1.4;
  letter-spacing: -0.01em;
  color:          var(--ink);
}
.tcard-q blockquote::before {
  content:       '\201C';
  color:         var(--ember);
  font-size:     1.4rem;
  line-height:   1;
  display:       block;
  margin-bottom: 6px;
}
.tcard-q .tat { display: flex; align-items: center; gap: 12px; }
.tcard-q .tav {
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      var(--ink);
  color:           var(--paper);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--disp);
  font-weight:     700;
  font-size:       0.9rem;
  flex:            0 0 auto;
}
.tcard-q .tname { font-size: 0.9rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.tcard-q .trole { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.05em; color: var(--ink-60); }

/* ── Stat tile ───────────────────────────────────────────────────────────── */

.stat {
  background:    var(--linen);
  border-radius: var(--r-xl);
  padding:       34px 30px;
}
.stat .n {
  font-family:    var(--disp);
  font-weight:    700;
  font-size:      clamp(2.4rem, 4.5vw, 3.4rem);
  letter-spacing: -0.03em;
}
.stat .n em    { font-style: normal; color: var(--ember); }
.stat .l {
  font-family:    var(--mono);
  font-size:      0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--ink-60);
  margin-top:     8px;
}

/* ── Leaderboard row ─────────────────────────────────────────────────────── */

.lb-row {
  display:               grid;
  grid-template-columns: 64px 1fr auto auto;
  gap:                   22px;
  align-items:           center;
  padding:               20px 8px;
  border-bottom:         1px solid var(--ink-12);
  transition:            background 0.18s;
}
.lb-row:hover { background: var(--linen); }
.lb-row .rank {
  font-family:    var(--disp);
  font-weight:    700;
  font-size:      1.9rem;
  letter-spacing: -0.02em;
  color:          var(--ink-30);
}
.lb-row:first-child .rank         { color: var(--ember); }
.lb-row:first-child .tile         { background: var(--ember); color: #fff; }
.lb-row .who { display: flex; align-items: center; gap: 14px; }
.lb-row .mv  { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.05em; }
.mv.up       { color: var(--ember); }
.mv.dn       { color: var(--ink-30); }
.mv.new      { background: var(--ink); color: var(--paper); border-radius: 6px; padding: 3px 8px; }

/* Leaderboard hover CTA */
.lb-cta-hint {
  font-family:    var(--mono);
  font-size:      0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          transparent;
  transition:     color var(--dur-std);
}
.lb-row:hover .lb-cta-hint { color: var(--ember-deep); }

/* ── Editorial rows ──────────────────────────────────────────────────────── */

.rows { border-top: 1px solid var(--ink-30); }

.row {
  display:               grid;
  grid-template-columns: 1fr auto auto;
  align-items:           center;
  gap:                   24px;
  padding:               24px 8px;
  border-bottom:         1px solid var(--ink-30);
  transition:            background 0.18s;
}
.row:hover { background: var(--linen); }
.row .name {
  font-family:    var(--disp);
  font-weight:    700;
  font-size:      clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: -0.02em;
}
.row:hover .name { color: var(--ember-deep); }
.row .meta { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-60); }
.row .arrow { font-size: 1.3rem; transition: transform 0.18s; }
.row:hover .arrow { transform: translateX(6px); color: var(--ember); }

/* ── Marquee wall (scrolling tcard strip) ────────────────────────────────── */

.wall { padding: 30px 0 80px; overflow: hidden; }

.lane {
  display:   flex;
  gap:       20px;
  width:     max-content;
  animation: drift 55s linear infinite;
}
.lane.rev {
  animation: drift-rev 65s linear infinite;
  margin-top: 20px;
}
.wall:hover .lane { animation-play-state: paused; }

@keyframes drift     { from { transform: translateX(0); }   to { transform: translateX(-50%); } }
@keyframes drift-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.tcard {
  flex:          0 0 auto;
  width:         250px;
  background:    var(--linen);
  border:        1px solid transparent;
  border-radius: 24px;
  padding:       20px;
  transition:    transform 0.2s, border-color 0.2s;
}
.tcard:hover { transform: translateY(-4px); border-color: var(--ember); }
.tcard .art {
  width:         100%;
  aspect-ratio:  16/10;
  object-fit:    cover;
  border-radius: 14px;
  margin-bottom: 14px;
  background:    var(--ink);
}
.tcard h3 { font-family: var(--body); font-weight: 600; font-size: 1.05rem; margin-bottom: 3px; }
.tcard .rate { margin-top: 10px; font-size: 0.85rem; color: var(--ink-60); }
.tcard .rate b { color: var(--ink); }

/* ── Featured product (shop page) ───────────────────────────────────────── */

.feat-prod {
  display:         grid;
  grid-template-columns: 1fr 1fr;
  gap:             0;
  background:      var(--ink);
  border-radius:   var(--r-3xl);
  overflow:        hidden;
  text-decoration: none;
  color:           inherit;
  transition:      box-shadow 0.28s;
}
.feat-prod:hover { box-shadow: 0 20px 60px -20px rgba(29,27,22,.4); }

.feat-prod-img {
  min-height:      380px;
  background-size: cover;
  background-position: center;
  position:        relative;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  padding:         36px;
}
.feat-prod-img::after {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     linear-gradient(180deg, rgba(18,14,8,.2) 0%, rgba(18,14,8,.7) 100%);
  pointer-events: none;
}
.feat-prod-img-label {
  position:       relative;
  z-index:        1;
  font-family:    var(--mono);
  font-size:      0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.6);
  margin-bottom:  10px;
}
.feat-prod-img-title {
  position:       relative;
  z-index:        1;
  font-family:    var(--disp);
  font-weight:    700;
  font-size:      1.8rem;
  line-height:    1.1;
  letter-spacing: -0.02em;
  color:          #fff;
}
.feat-prod-img-title em { font-style: normal; color: var(--ember); }

.feat-prod-body {
  padding:        40px 44px;
  display:        flex;
  flex-direction: column;
  justify-content: center;
  gap:            16px;
}
.feat-prod-body h3 {
  font-family:    var(--disp);
  font-weight:    700;
  font-size:      1.6rem;
  letter-spacing: -0.02em;
  color:          var(--paper);
  line-height:    1.15;
}
.feat-prod-body p { color: rgba(242,239,233,.65); font-size: 0.98rem; line-height: 1.6; }
.feat-prod-price {
  font-family:    var(--disp);
  font-weight:    700;
  font-size:      2.2rem;
  letter-spacing: -0.03em;
  color:          var(--paper);
}
.feat-prod-price sup { font-size: 1.1rem; color: var(--ember); }
.feat-prod-includes { display: flex; flex-direction: column; gap: 10px; margin: 4px 0; }
.feat-prod-includes li {
  list-style:  none;
  font-size:   0.91rem;
  color:       rgba(242,239,233,.72);
  display:     flex;
  align-items: baseline;
  gap:         10px;
  line-height: 1.4;
}
.feat-prod-includes li::before { content: '\2713'; color: var(--ember); font-weight: 700; flex: 0 0 auto; }

/* ── Cart ────────────────────────────────────────────────────────────────── */

.cart-line {
  display:               grid;
  grid-template-columns: 80px 1fr auto auto;
  gap:                   18px;
  align-items:           center;
  padding:               18px 0;
  border-bottom:         1px solid var(--ink-12);
}
.cart-cover { width: 80px; height: 60px; border-radius: 10px; object-fit: cover; display: block; background: var(--ink); }
.cart-qty   { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.88rem; }
.cart-qty button {
  width:         32px;
  height:        32px;
  border-radius: 8px;
  border:        1px solid var(--ink-30);
  background:    transparent;
  font-size:     1rem;
  cursor:        pointer;
  transition:    background 0.15s;
}
.cart-qty button:hover { background: var(--linen); }
.cart-summary {
  background:    var(--linen);
  border-radius: var(--r-xl);
  padding:       28px;
  position:      sticky;
  top:           calc(var(--nav-height) + 24px);
}
.cart-summary .total { font-family: var(--disp); font-weight: 700; font-size: 2rem; letter-spacing: -0.03em; }

/* ── Category strip ──────────────────────────────────────────────────────── */

.cat-strip {
  display:                  flex;
  gap:                      8px;
  overflow-x:               auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:          none;
  padding-bottom:           2px;
}
.cat-strip::-webkit-scrollbar { display: none; }
.cat-strip .chip { flex: 0 0 auto; }

.cat-strip-wrap { position: relative; }
.cat-strip-wrap::after {
  content:        '';
  position:       absolute;
  right:          0; top: 0; bottom: 0;
  width:          48px;
  background:     linear-gradient(90deg, transparent, var(--paper));
  pointer-events: none;
}

/* ── Shop product count badge ────────────────────────────────────────────── */

#productCount {
  font-size:     0.8rem;
  padding:       6px 14px;
  background:    var(--linen);
  border-radius: 8px;
  border:        1px solid var(--ink-12);
}

/* ── Value band items (shop) ─────────────────────────────────────────────── */

.value-band-list   { display: flex; flex-direction: column; gap: 14px; }
.value-band-item   { display: flex; align-items: flex-start; gap: 14px; }
.vbi-icon {
  width:           36px;
  height:          36px;
  border-radius:   10px;
  background:      var(--ember);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex:            0 0 auto;
}
.vbi-text h4   { font-weight: 600; font-size: 0.98rem; margin-bottom: 2px; }
.vbi-text p    { font-size: 0.88rem; color: var(--ink-60); line-height: 1.5; }

/* ── Responsive fixes ────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .feat-prod { grid-template-columns: 1fr; }
  .feat-prod-img { min-height: 220px; }
}