/* ============================================================
   tt-pages.css  —  styles for the Ten Thousand content pages
   (shipping-delivery, brand-facts, streetwear-lagos,
    detty-december, gift-guide, journal)

   Every class here starts with tt- except the Bootstrap
   "container", so it cannot clash with your theme.
   ============================================================ */

:root{
  --tt-ink:#000;
  --tt-body:#1c1c1c;
  --tt-muted:#6b6b6b;
  --tt-line:#e5e5e5;
  --tt-bg-soft:#f7f7f7;
  --tt-accent:#db1215;      /* same red as your theme's --primary */
  --tt-sale:#db1215;
}

/* ---------- page heading band ---------- */
.tt-pagehead{
  border-bottom:1px solid var(--tt-line);
  padding:28px 0;
  margin-bottom:8px;
  text-align:center;
}
.tt-pagehead h1{
  margin:0;
  font-size:30px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--tt-ink);
}
@media (min-width:768px){
  .tt-pagehead{padding:44px 0}
  .tt-pagehead h1{font-size:40px}
}

/* ---------- section wrapper ---------- */
.tt-section{padding:32px 0 56px}
@media (min-width:768px){.tt-section{padding:44px 0 80px}}

/* ---------- body text ---------- */
.tt-prose{max-width:820px;margin:0 auto;color:var(--tt-body)}
.tt-prose h2{
  font-size:22px;line-height:1.3;font-weight:600;
  margin:40px 0 14px;color:var(--tt-ink);
}
.tt-prose h2:first-child{margin-top:0}
.tt-prose h3{
  font-size:17px;line-height:1.4;font-weight:600;
  margin:26px 0 8px;color:var(--tt-ink);
}
.tt-prose p{font-size:16px;line-height:1.75;margin:0 0 16px}
.tt-prose ul{padding-left:22px;margin:0 0 18px}
.tt-prose li{font-size:16px;line-height:1.75;list-style:disc;margin-bottom:7px}
.tt-prose a{color:var(--tt-ink);text-decoration:underline;text-underline-offset:2px}
.tt-prose a:hover{color:var(--tt-accent)}
.tt-lead{font-size:18px;line-height:1.7}
.tt-note{font-size:14px;line-height:1.6;color:var(--tt-muted)}
.tt-prose strong{font-weight:600;color:var(--tt-ink)}
@media (min-width:768px){
  .tt-prose h2{font-size:26px}
  .tt-lead{font-size:19px}
}

/* ---------- fact tables (scroll sideways on phones) ---------- */
.tt-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 26px}
.tt-table{width:100%;border-collapse:collapse;min-width:460px}
.tt-table th,.tt-table td{
  border:1px solid var(--tt-line);
  padding:11px 13px;
  text-align:left;
  vertical-align:top;
  font-size:15px;
  line-height:1.6;
}
.tt-table th{background:var(--tt-bg-soft);font-weight:600;width:34%;color:var(--tt-ink)}

/* ---------- button ---------- */
.tt-btn{
  display:inline-block;
  padding:13px 30px;
  background:var(--tt-ink);
  color:#fff;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:3px;
  transition:opacity .25s ease;
}
.tt-prose .tt-btn{text-decoration:none;color:#fff}
.tt-btn:hover{opacity:.82;color:#fff}
.tt-cta{margin:30px 0 0}

/* ---------- product grid ---------- */
.tt-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:16px 0 30px;
}
@media (min-width:768px){.tt-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
.tt-card{display:flex;flex-direction:column}
.tt-card-img{display:block;overflow:hidden;background:var(--tt-bg-soft);border-radius:3px}
.tt-card-img img{
  display:block;width:100%;height:auto;aspect-ratio:3/4;
  object-fit:cover;transition:transform .5s ease;
}
.tt-card:hover .tt-card-img img{transform:scale(1.04)}
.tt-card-title{
  display:block;margin:10px 0 4px;
  font-size:14px;line-height:1.45;font-weight:500;
  color:var(--tt-ink);text-decoration:none;
}
.tt-prose .tt-card-title{text-decoration:none}
.tt-card-title:hover{color:var(--tt-accent)}
.tt-price{font-size:14px;font-weight:600;color:var(--tt-ink)}
.tt-price-old{font-size:14px;color:var(--tt-muted);text-decoration:line-through;margin-right:5px}
.tt-price-sale{color:var(--tt-sale)}

/* ---------- article meta ---------- */
.tt-byline{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--tt-muted);margin:0 0 18px}

/* ---------- journal list ---------- */
.tt-entry{padding:22px 0;border-bottom:1px solid var(--tt-line)}
.tt-entry:last-child{border-bottom:0}
.tt-entry h2{margin:0 0 6px}
.tt-entry p{margin:0 0 6px}