/* Masonry */
.masonry{
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  padding: 10px 0 0;
  align-items: start;
}

/* JavaScript-enhanced masonry mode */
.masonry.js-masonry{
  position: relative;
  display: block;
}

/* Reset margin-top in JS mode (JavaScript handles positioning) */
.masonry.js-masonry > .card{
  margin-top: 0 !important;
}

@media (min-width: 760px){
  .masonry{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1120px){
  .masonry{
    grid-template-columns: repeat(3, 1fr);
  }

  /* Offset columns vertically - ONLY for non-JS fallback */
  .masonry:not(.js-masonry) > .card:nth-child(3n+1){
    margin-top: 20px;
  }

  .masonry:not(.js-masonry) > .card:nth-child(3n+3){
    margin-top: 40px;
  }

  /* Reduce margin-top for product and tool cards - ONLY for non-JS fallback */
  .masonry:not(.js-masonry) > .card.cat-products:nth-child(3n+1),
  .masonry:not(.js-masonry) > .card.cat-tools:nth-child(3n+1){
    margin-top: 10px;
  }

  .masonry:not(.js-masonry) > .card.cat-products:nth-child(3n+3),
  .masonry:not(.js-masonry) > .card.cat-tools:nth-child(3n+3){
    margin-top: 20px;
  }
}

/* Cards */
.card{
  margin: 0;
  border-radius: var(--radius);
  border: var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  transform-origin: 45% 22%;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease), background var(--ease);
  will-change: transform;
}
.card{ transform: rotate(var(--tilt, 0deg)) translateY(var(--lift, 0px)); }
.card:hover{
  transform: translateY(-8px) rotate(0.25deg);
  box-shadow: var(--shadow2);
  border-color: rgba(207,92,54,.35);
  background: var(--overlay-light);
  z-index: 30;
}

/* Slight deterministic tilt */
.masonry > .card:nth-child(6n+1){ --tilt:-0.2deg; --lift: 1px; }
.masonry > .card:nth-child(6n+2){ --tilt:-0.3deg; --lift: 1px; }
.masonry > .card:nth-child(6n+3){ --tilt:-0.7deg; --lift: 2px; }
.masonry > .card:nth-child(6n+4){ --tilt: 0.3deg; --lift: 1px; }
.masonry > .card:nth-child(6n+5){ --tilt:-0.4deg; --lift: 1px; }
.masonry > .card:nth-child(6n+6){ --tilt: 0.8deg; --lift: 1px; }

/* Category-colored title bars */
.card.cat-tools    { --cat-bg: var(--cat-tools-bg); --cat-fg: var(--cat-tools-fg); }
.card.cat-article  { --cat-bg: var(--cat-article-bg);  --cat-fg: var(--cat-article-fg); }
.card.cat-guides   { --cat-bg: var(--cat-guides-bg);  --cat-fg: var(--cat-guides-fg); }
.card.cat-shop     { --cat-bg: var(--cat-shop-bg);   --cat-fg: var(--cat-shop-fg); }
.card.cat-oneshots { --cat-bg: var(--cat-oneshots-bg);  --cat-fg: var(--cat-oneshots-fg); }
.card.cat-products { --cat-bg: var(--cat-products-bg);   --cat-fg: var(--cat-products-fg); }

/* Mini hero image (now at top of card) */
.mini-hero{
  height: 220px;
  border-bottom: 1px solid var(--text-border-soft);
  background:
    radial-gradient(520px 220px at 18% 25%, rgba(184,213,184,.40), transparent 60%),
    radial-gradient(520px 260px at 82% 18%, rgba(207,92,54,.16), transparent 64%),
    linear-gradient(135deg, rgba(94,101,114,.18), rgba(94,101,114,.06));
}

/* Card body (contains subtitle + excerpt) */
.card-body{
  padding: 12px 16px 16px;
  background: var(--overlay-medium);
}

/* Card meta row: title + category label (with category color) */
.card-meta{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px 14px;
  margin-bottom: 0;
  border-bottom: var(--border-soft);
  background: var(--cat-bg, rgba(94,101,114,.15));
  color: var(--cat-fg, var(--text-primary));
}

.card-title{
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.2;
  letter-spacing: -.22px;
  font-weight: var(--font-weight-ultra);
  color: var(--text-primary);
}

.cat-label{
  font-size: .74rem;
  font-weight: var(--font-weight-ultra);
  letter-spacing: .32px;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(24,22,22,.72);
  opacity: .95;
  flex-shrink: 0;
}

.card-subtitle{
  margin: 0 0 8px;
  color: rgba(24,22,22,.62);
  font-weight: var(--font-weight-bold);
  font-size: .92rem;
}

.card-excerpt{
  margin: 0;
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 7.5em;
}

/* Legacy support for old card-body p styling */
.card-body p:not(.card-subtitle):not(.card-excerpt){ margin:0; color: var(--muted); font-size:.96rem; }

/* =========================
   CARD CTA BUTTON
   ========================= */

.card-cta {
  margin-top: auto;
  padding: 12px 20px;
  border-top: 1px solid rgba(184, 213, 184, 0.25);
  text-align: center;
}

.card-cta-button {
  display: inline-block;
  padding: 10px 24px;
  background: linear-gradient(135deg, #85ba85, #a8d0a8);
  color: white;
  font-size: 0.88rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(133, 186, 133, 0.25);
  transition: all 0.2s ease;
}

.card:hover .card-cta-button {
  background: linear-gradient(135deg, #6fa76f, #85ba85);
  box-shadow: 0 4px 10px rgba(133, 186, 133, 0.35);
  transform: translateY(-1px);
}

/* DEPRECATED: card-head (no longer used, kept for backwards compatibility) */
.card-head{
  padding: 14px 16px 12px;
  border-bottom: var(--border-soft);
  background:
    linear-gradient(180deg, var(--overlay-subtle), rgba(255,255,255,0)),
    var(--cat-bg, rgba(94,101,114,.10));
  color: var(--cat-fg, var(--text-primary));
}
.head-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 8px;
}

/* =========================
   PRODUCT CARD STYLING (Mixed Grid)
   ========================= */

.masonry .card .card-price {
  color: var(--spicy-paprika);
  font-weight: var(--font-weight-black);
  font-size: 1rem;
  margin: 0;
}

.masonry .card .free-shipping-badge {
  display: inline-block;
  padding: 4px 10px;
  margin: 8px 0;
  font-size: 0.8rem;
  font-weight: var(--font-weight-bold);
  color: var(--celadon);
  background: rgba(184, 213, 184, 0.25);
  border: 1px solid var(--celadon);
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.masonry .card .add-to-cart-text {
  display: block;
  margin-top: 8px;
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
  font-size: 0.95rem;
  text-decoration: underline;
}

/* =========================
   FEATURED RIBBON (Sticky Posts)
   ========================= */

/* Corner ribbon for featured/sticky posts */
.featured-ribbon {
  position: absolute;
  top: 12px;
  right: -8px;
  z-index: 20;
  padding: 6px 16px 6px 12px;
  background: linear-gradient(135deg, var(--spicy-paprika, #cf5c36), #d97350);
  color: white;
  font-size: 0.74rem;
  font-weight: var(--font-weight-ultra);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(207, 92, 54, 0.3);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%);
}

/* Add subtle glow on card hover */
.card:hover .featured-ribbon {
  box-shadow: 0 4px 12px rgba(207, 92, 54, 0.5);
}

/* Newest and Popular ribbons (green versions for generator/tool cards) */
.newest-ribbon,
.popular-ribbon {
  position: absolute;
  top: 12px;
  right: -8px;
  z-index: 20;
  padding: 6px 16px 6px 12px;
  background: linear-gradient(135deg, #85ba85, #a8d0a8);
  color: white;
  font-size: 0.74rem;
  font-weight: var(--font-weight-ultra);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(133, 186, 133, 0.3);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%);
}

/* Add subtle glow on card hover for green badges */
.card:hover .newest-ribbon,
.card:hover .popular-ribbon {
  box-shadow: 0 4px 12px rgba(133, 186, 133, 0.5);
}

/* =========================
   FEATURED ARTICLES CAROUSEL
   ========================= */

/* Carousel section wrapper */
.featured-articles {
  margin-bottom: 48px;
}

/* Carousel wrapper with navigation positioning context */
.featured-carousel-wrapper {
  position: relative;
  margin-top: 24px;
}

/* Horizontal scroll container */
.featured-carousel-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 34px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 56px 4px 4px;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar for cleaner appearance */
.featured-carousel-container::-webkit-scrollbar {
  display: none;
}

.featured-carousel-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Cards in carousel: fixed width instead of masonry */
.featured-carousel-container > .card {
  flex: 0 0 auto;
  width: 320px;
  scroll-snap-align: start;
  position: static; /* Override masonry positioning */
  transform: rotate(0deg) translateY(0px); /* Reset tilt for horizontal scroll */
}

/* Maintain hover state */
.featured-carousel-container > .card:hover {
  transform: translateY(-8px) rotate(0deg);
}

/* Navigation arrow buttons */
.featured-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: all 0.2s ease;
  color: var(--charcoal-grey, #5E6572);
}

.featured-nav:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  color: var(--spicy-paprika, #cf5c36);
}

.featured-nav-prev {
  left: -8px;
}

.featured-nav-next {
  right: -8px;
}

.featured-nav svg {
  width: 22px;
  height: 22px;
}

/* Responsive adjustments */
@media (max-width: 760px) {
  .featured-carousel-container > .card {
    width: 280px;
  }

  .featured-carousel-container {
    padding: 4px 48px 4px 4px;
  }

  .featured-nav {
    width: 38px;
    height: 38px;
  }

  .featured-nav svg {
    width: 18px;
    height: 18px;
  }
}

@media (min-width: 1120px) {
  .featured-carousel-container > .card {
    width: 360px;
  }
}

/* =========================
   ARTICLES FILTER SECTION
   ========================= */

.articles-filter-section {
  margin-bottom: 32px;
}

.filter-details {
  border: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--overlay-medium);
  overflow: hidden;
}

.filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--ease);
}

.filter-toggle::-webkit-details-marker {
  display: none;
}

.filter-toggle:hover {
  background: rgba(255,255,255,.96);
}

.filter-toggle-text {
  font-size: 1.05rem;
  font-weight: var(--font-weight-ultra);
  letter-spacing: -0.2px;
  color: var(--text-primary);
}

.filter-toggle-icon {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
  transition: transform var(--ease);
}

.filter-details[open] .filter-toggle-icon {
  transform: rotate(180deg);
}

.filter-content {
  padding: 0 20px 20px;
  border-top: var(--border-soft);
  background: rgba(255,255,255,.60);
}

.filter-row {
  margin-bottom: 18px;
}

.filter-row:last-child {
  margin-bottom: 0;
}

.filter-label {
  display: block;
  margin-bottom: 8px;
  font-weight: var(--font-weight-extra-bold);
  color: rgba(24,22,22,.88);
  font-size: .95rem;
}

.filter-search {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: var(--border-soft);
  background: var(--overlay-medium);
  font-weight: var(--font-weight-bold);
  font-family: inherit;
  font-size: .95rem;
  transition: all var(--ease);
}

.filter-search:focus {
  outline: none;
  border-color: rgba(94,101,114,.32);
  background: rgba(255,255,255,.96);
  box-shadow: 0 0 0 3px rgba(94,101,114,.10);
}

.filter-search::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

.filter-sort {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: var(--border-soft);
  background: var(--overlay-medium);
  font-weight: var(--font-weight-bold);
  font-family: inherit;
  font-size: .95rem;
  cursor: pointer;
  transition: all var(--ease);
}

.filter-sort:focus {
  outline: none;
  border-color: rgba(94,101,114,.32);
  background: rgba(255,255,255,.96);
  box-shadow: 0 0 0 3px rgba(94,101,114,.10);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--text-border);
  background: var(--overlay-medium);
  color: var(--text-secondary);
  font-size: .85rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all var(--ease);
  white-space: nowrap;
}

.filter-chip:hover {
  background: rgba(255,255,255,.96);
  border-color: rgba(94,101,114,.32);
  transform: translateY(-1px);
}

.filter-chip.active,
.filter-chip[aria-pressed="true"] {
  background: rgba(184,213,184,.40);
  border-color: rgba(184,213,184,.70);
  color: var(--text-primary);
}

.filter-chip.active:hover,
.filter-chip[aria-pressed="true"]:hover {
  background: rgba(184,213,184,.55);
  border-color: rgba(184,213,184,.85);
}

.chip-count {
  font-size: .74rem;
  opacity: 0.7;
}

.filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: var(--border-soft);
}

.filter-summary-text {
  font-size: .92rem;
  font-weight: var(--font-weight-bold);
  color: var(--text-secondary);
}

.filter-clear {
  padding: 6px 12px;
  border-radius: 8px;
  border: var(--border-soft);
  background: var(--overlay-medium);
  color: var(--spicy-paprika);
  font-size: .85rem;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all var(--ease);
  white-space: nowrap;
}

.filter-clear:hover {
  background: rgba(255,255,255,.96);
  border-color: var(--spicy-paprika);
  transform: translateY(-1px);
}

@media (min-width: 760px) {
  .filter-content {
    padding: 0 24px 24px;
  }

  .filter-row {
    margin-bottom: 20px;
  }
}

/* =========================
   HERO (Front Page)
   ========================= */

.hero{
  padding: 0;
  margin-bottom: var(--hero-spacing);
}

.frame{
  border-radius: var(--radius-lg);
  border: 1px solid var(--text-border-soft);
  background: rgba(255,255,255,.55);
  /*box-shadow: 0 24px 80px rgba(0,0,0,.18);*/
  padding: 14px;
  overflow:hidden;
}

.hero-media{
  border-radius: 14px;
  border: 1px solid rgba(24,22,22,.12);
  height: clamp(240px, 30vw, 380px);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;

  /* Gradient placeholder — replace with real hero image later */
  background-image:
    radial-gradient(1100px 520px at 20% 18%, rgba(184,213,184,.50), transparent 60%),
    radial-gradient(900px 520px at 82% 10%, rgba(207,92,54,.22), transparent 62%),
    linear-gradient(135deg, rgba(94,101,114,.22), rgba(94,101,114,.08)),
    linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.10));
  background-size: cover;
  background-position: center;
  background-color: #f5f5f5;
}

.hero-media:after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height: 60%;
  background: linear-gradient(180deg, transparent, rgba(24,22,22,.26));
  pointer-events:none;
}

.hero-content{
  position:absolute;
  left:0;
  right:0;
  bottom: 18px;
  padding: 0 16px;
  color: var(--platinum);
}

.hero-inner{
  max-width: calc(var(--max) - 28px);
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  width:fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(238,241,239,.18);
  background: rgba(238,241,239,.10);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 34px rgba(0,0,0,.14);
  font-weight: var(--font-weight-black);
  letter-spacing:.28px;
  text-transform:uppercase;
  font-size:.74rem;
  color: rgba(255,255,255,.95);
  text-shadow:
    0 2px 4px rgba(0,0,0,0.9),
    0 4px 8px rgba(0,0,0,0.9),
    0 8px 16px rgba(0,0,0,0.85),
    0 12px 24px rgba(0,0,0,0.75),
    0 0 24px rgba(0,0,0,0.7);
}

.eyebrow b{
  color: rgba(184,213,184,.98);
  font-weight: var(--font-weight-ultra);
}

.hero h1{
  margin:0;
  font-size: clamp(1.9rem, 2.2vw + 1rem, 2.7rem);
  line-height:1.05;
  letter-spacing:-.35px;
  text-shadow: 0 18px 46px rgba(0,0,0,.42);
}

.hero .sub{
  margin:0;
  max-width: 72ch;
  font-weight: var(--font-weight-medium);
  color: rgba(238,241,239,.92);
  text-shadow: 0 14px 34px rgba(0,0,0,.32);
}

.hero-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 6px;
}

/* Space between hero and overlapping content - DEPRECATED: use .hero margin-bottom instead */
.hero-gap{
  height: 0;
  display: none;
}

/* =========================
   Section header (used under hero)
   ========================= */

.section-bar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 6px 10px;
}

.section-title h2{
  margin:0;
  font-size: 1.08rem;
  font-weight: var(--font-weight-ultra);
  letter-spacing:-.2px;
}

.section-title p{
  margin: 4px 0 0;
  color: var(--muted);
  font-weight: var(--font-weight-bold);
  font-size:.92rem;
  max-width: 70ch;
}

/* Mobile tuning */
@media (max-width: 760px){
  .hero-gap{ height: 0; display: none; }
  .section-bar{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* =========================
   Archive header + pagination
   ========================= */

.archive-head{
  padding: 22px 6px 10px;
}

.archive-title{
  margin: 0;
  font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.2rem);
  line-height: 1.1;
  letter-spacing: -.3px;
  font-weight: var(--font-weight-ultra);
}

.archive-desc{
  margin-top: 8px;
  color: var(--muted);
  font-weight: var(--font-weight-bold);
  max-width: 80ch;
}

.pagination{
  margin-top: 10px;
  padding: 10px 6px 0;
}

.pagination .nav-links{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

.pagination a,
.pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: var(--border-soft);
  background: rgba(255,255,255,.76);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  font-weight: var(--font-weight-black);
  color: var(--text-secondary);
}

.pagination span.current{
  background: rgba(94,101,114,.12);
  border-color: rgba(94,101,114,.22);
}

.empty-state{
  padding: 22px 6px 0;
}
.empty-state h2{
  margin: 0 0 6px;
  font-weight: var(--font-weight-ultra);
}
.empty-state p{
  margin: 0;
  color: var(--muted);
  font-weight: var(--font-weight-bold);
}

/* =========================
   Single post layout
   ========================= */

.single{
  padding: 0 0 70px;
}

/* Hero */
.post-hero{
  padding: 0;
  margin-top: 0px; /* Add spacing below fixed header */
  margin-bottom: var(--hero-spacing);
}

/* Fix hero image overlap on article pages only */
body.single-post .post-hero {
  margin-top: 160px;
}

.post-media{
  border-radius: 14px;
  border: 1px solid rgba(24,22,22,.12);
  height: clamp(240px, 30vw, 380px);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;

  /* Default gradient if no featured image */
  background-image:
    radial-gradient(1100px 520px at 20% 18%, rgba(184,213,184,.50), transparent 60%),
    radial-gradient(900px 520px at 82% 10%, rgba(207,92,54,.22), transparent 62%),
    linear-gradient(135deg, rgba(94,101,114,.22), rgba(94,101,114,.08)),
    linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.10));
  background-size: cover;
  background-position: center;
  background-color: #f5f5f5;
}

.post-media:after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height: 66%;
  background: linear-gradient(180deg, transparent, rgba(24,22,22,.42));
  pointer-events:none;
}

.post-overlay{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:flex-end;
  padding: 18px 16px;
  color: var(--platinum);
}

.post-hero-inner{
  width: 100%;
  max-width: calc(var(--max) - 28px);
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.post-title{
  margin:0;
  font-size: clamp(2.0rem, 2.3vw + 1rem, 3.0rem);
  line-height: 1.05;
  letter-spacing: -.38px;
  font-weight: var(--font-weight-ultra);
  text-shadow:
    0 2px 4px rgba(0,0,0,0.9),
    0 4px 8px rgba(0,0,0,0.9),
    0 8px 16px rgba(0,0,0,0.85),
    0 12px 24px rgba(0,0,0,0.75),
    0 0 24px rgba(0,0,0,0.7);
}

.post-content-title{
  margin: 32px 0 24px;
  font-size: clamp(1.8rem, 2vw + 1rem, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.32px;
  font-weight: var(--font-weight-black);
  color: var(--carbon-black);
}

@media (max-width: 640px){
  .post-content-title{
    margin: 24px 0 18px;
  }
}

.post-meta{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  font-weight: var(--font-weight-extra-bold);
  color: rgba(255,255,255,.95);
  text-shadow:
    0 2px 4px rgba(0,0,0,0.8),
    0 4px 8px rgba(0,0,0,0.8),
    0 8px 16px rgba(0,0,0,0.7),
    0 0 20px rgba(0,0,0,0.6);
}

.post-deck{
  margin: 0 6px 0;
  max-width: 90ch;
  color: var(--muted);
  font-weight: var(--font-weight-bold);
}

/* Layout: reading column + sidebar */
.post-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items:start;
  padding-top: 10px;
}

@media (min-width: 980px){
  .post-layout{
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
  }
  .post-side{
    position: sticky;
    top: 150px; /* 72px header + 128px spacing */
  }
}

/* Layout: generator page with card sidebar */
.generator-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
  padding-top: 10px;
}

@media (min-width: 980px){
  .generator-layout{
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
  }

  .generator-cards{
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
}

/* Related content section at bottom of generator pages */
.related-content{
  margin-top: 54px;
  margin-bottom: 0;
  padding: 0 var(--pad);
}

.related-content .section-title{
  margin: 0 0 32px;
  text-align: center;
  font-size: var(--text-2xl);
  color: var(--text-primary);
}

.related-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 640px){
  .related-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px){
  .related-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}

/* Sidebar: sources list */
.side-sources-list{
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-weight: var(--font-weight-bold);
}
.side-sources-list li{ margin: 6px 0; }

.side-sources-list a{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Article surface */
.post-card{
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--overlay-medium);
  box-shadow: var(--shadow);
  padding: 20px 18px;
  overflow:hidden;
}

/* Full-width page layout (About, Contact, etc.) — DEPRECATED: Now using .wrap + .frame structure */
/*
.about-layout{
  max-width: calc(var(--max) - 28px);
  margin: 0 auto;
  padding: 0 16px 60px;
}
*/

/* Page body frame — no border, no padding to extend full width */
section.single.page > div.wrap > div.frame {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0;
}

/* Page about-card — keep background/styling, just remove border and shadow */
.single.page .about-card {
  border: none !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  overflow:hidden;
}

.about-card{
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--overlay-medium);
  box-shadow: var(--shadow);
  padding: 32px 28px;
  overflow:hidden;
}

@media (min-width: 640px){
  .about-card{
    padding: 42px 48px;
  }
  .single.page .about-card{
    padding: 42px 48px;
  }
}

@media (min-width: 980px){
  /* .about-layout{ padding: 0 16px 80px; } — DEPRECATED */
  .about-card{
    padding: 52px 64px;
  }
  .single.page .about-card{
    padding: 52px 64px;
  }
}

/* Sidebar cards */
.side-card{
  border: var(--border);
  border-radius: var(--radius);
  background: var(--overlay-medium);
  box-shadow: var(--shadow);
  padding: 14px 14px 16px;
  margin-bottom: 14px;
}
.side-title{
  margin: 0 0 6px;
  font-weight: var(--font-weight-ultra);
  letter-spacing: -.2px;
}
.side-text{
  margin: 0 0 12px;
  color: var(--muted);
  font-weight: var(--font-weight-bold);
}
.side-actions{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.side-content{
  margin-bottom: 12px;
}
.side-list{
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.side-list li{
  margin: 0 0 6px;
}
.side-list a{
  color: rgba(24,22,22,.82);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  transition: color .15s ease;
}
.side-list a:hover{
  color: var(--primary);
  text-decoration: underline;
}

/* Related */
.related{
  padding-top: 16px;
}

/* Content typography (applies to WP blocks too) */
.entry-content{
  max-width: none;
}
.entry-content p{
  margin: 0 0 1.05em;
  color: var(--text-secondary);
  font-size: 1.03rem;
}
.entry-content h2,
.entry-content h3{
  margin: 1.2em 0 .5em;
  font-weight: var(--font-weight-ultra);
  letter-spacing: -.22px;
}
.entry-content ul,
.entry-content ol{
  margin: .8em 0 1.0em 1.2em;
  color: var(--text-secondary);
}
.entry-content blockquote{
  margin: 1.1em 0;
  padding: 14px 14px;
  border-left: 4px solid rgba(184,213,184,.95);
  background: rgba(184,213,184,.14);
  border-radius: 10px;
  color: var(--text-secondary);
  font-weight: var(--font-weight-bold);
}

.entry-content > :last-child{
  margin-bottom: 0.9em;
}

/* =========================
   Single: ACF blocks
   ========================= */

.post-main{ min-width: 0; }

.post-hero-sub{
  margin: 6px 0 0;
  max-width: 72ch;
  color: rgba(255,255,255,.95);
  font-weight: var(--font-weight-bold);
  text-shadow:
    0 2px 4px rgba(0,0,0,0.9),
    0 4px 8px rgba(0,0,0,0.9),
    0 8px 16px rgba(0,0,0,0.85),
    0 12px 24px rgba(0,0,0,0.75),
    0 0 24px rgba(0,0,0,0.7);
}

.acf-box{
  border: var(--border);
  border-radius: var(--radius);
  background: var(--overlay-medium);
  box-shadow: var(--shadow);
  padding: 14px 14px 16px;
  margin-bottom: 0; /* spacing handled by .post-main rhythm */
}

.acf-box-title{
  margin: 0 0 10px;
  font-weight: var(--font-weight-ultra);
  letter-spacing: -.2px;
}

.acf-box-body{
  color: var(--text-secondary);
  font-weight: var(--font-weight-bold);
}

/* Instructions section - more subtle/compact styling */
.acf-instructions {
  background: var(--overlay-light, rgba(255,255,255,.50));
  box-shadow: none;
  border: 1px solid var(--border-light, rgba(94,101,114,.12));
  margin-bottom: 18px;
}

.acf-instructions .acf-box-header {
  padding: 12px 14px;
}

.acf-instructions .acf-box-title {
  font-size: 0.95em;
  font-weight: var(--font-weight-bold, 600);
  margin: 0;
  opacity: 0.85;
}

.acf-instructions .acf-toggle-icon {
  opacity: 0.5;
}

.acf-instructions .acf-box-body {
  color: var(--text-primary, rgba(24,22,22,.88));
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.6;
}

.acf-instructions .acf-box-body h1,
.acf-instructions .acf-box-body h2,
.acf-instructions .acf-box-body h3,
.acf-instructions .acf-box-body h4 {
  margin: 1.2em 0 0.6em;
  line-height: 1.3;
  font-weight: var(--font-weight-ultra, 700);
}

.acf-instructions .acf-box-body h1:first-child,
.acf-instructions .acf-box-body h2:first-child,
.acf-instructions .acf-box-body h3:first-child,
.acf-instructions .acf-box-body h4:first-child {
  margin-top: 0;
}

.acf-instructions .acf-box-body p {
  margin: 0.8em 0;
}

.acf-instructions .acf-box-body ul,
.acf-instructions .acf-box-body ol {
  margin: 0.8em 0;
  padding-left: 2em;
}

.acf-instructions .acf-box-body li {
  margin: 0.4em 0;
}

.acf-instructions .acf-box-body strong {
  font-weight: var(--font-weight-ultra, 700);
}

.acf-instructions .acf-box-body a {
  color: var(--green-primary, #85ba85);
  text-decoration: underline;
}

.acf-instructions .acf-box-body a:hover {
  color: var(--spicy-paprika, #cf5c36);
}

.acf-bullets{
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-weight: var(--font-weight-bold);
}
.acf-bullets li{ margin: 6px 0; }

.acf-sources-list{
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-weight: var(--font-weight-bold);
}
.acf-sources-list a{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Collapsible ACF Box Styles */
.acf-collapsible{
  padding: 0;
  overflow: hidden;
}

.acf-box-header{
  /* Button reset */
  width: 100%;
  border: none;
  background: none;
  padding: 14px 14px 14px;
  margin: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;

  /* Layout */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  /* Hover state */
  transition: background-color 0.2s ease;
}

.acf-box-header:hover{
  background: rgba(24,22,22,.04);
}

.acf-box-header:focus{
  outline: 2px solid rgba(207,92,54,.5);
  outline-offset: -2px;
}

.acf-collapsible .acf-box-title{
  margin: 0;
  flex: 1;
}

.acf-toggle-icon{
  flex-shrink: 0;
  color: var(--carbon-black);
  opacity: 0.6;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.acf-box-header:hover .acf-toggle-icon{
  opacity: 0.9;
}

.acf-box-header[aria-expanded="true"] .acf-toggle-icon{
  transform: rotate(180deg);
}

.acf-collapsible .acf-box-body{
  padding: 0 14px 16px;
  transition: opacity 0.3s ease;
}

.acf-collapsible .acf-box-body[hidden]{
  display: none;
}

.acf-faq-item{
  border-top: 1px solid var(--text-border-soft);
  padding: 10px 0;
}
.acf-faq-item:first-child{ border-top: none; padding-top: 0; }
.acf-faq-item summary{
  cursor: pointer;
  font-weight: var(--font-weight-black);
  color: rgba(24,22,22,.88);
}
.acf-faq-answer{
  margin-top: 8px;
  color: var(--text-secondary);
  font-weight: var(--font-weight-bold);
}

/* ============================================
   Reading Progress Bar
   ============================================ */

.reading-progress-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: rgba(0, 0, 0, 0.08); /* Light gray background track */
  z-index: 101; /* Above header (z-index: 100) */
  pointer-events: none; /* Don't block clicks */
  opacity: 0;
  transition: opacity var(--ease); /* 180ms cubic-bezier(.2,.8,.2,1) */
}

.reading-progress-bar.visible {
  opacity: 1;
}

.reading-progress-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(
    90deg,
    var(--celadon) 0%,
    var(--spicy-paprika) 100%
  );
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.1s linear; /* Smooth but responsive */
  will-change: transform; /* Hint for GPU acceleration */
}

/* Optional: Add subtle shadow for depth */
.reading-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(184, 213, 184, 0.3) 0%,
    rgba(207, 92, 54, 0.3) 100%
  );
  opacity: 0;
  transition: opacity var(--ease);
}

.reading-progress-bar.visible::after {
  opacity: 1;
}

/* Give the main column a consistent rhythm */
.post-main > *{
  margin-top: 0;
}

/* Space between: summary, TL;DR, article, FAQ, etc. */
.post-main > * + *{
  margin-top: 18px; /* adjust 16–24 to taste */
}

/* Ensure the article surface doesn't collapse visually into the next block */
.post-card{
  margin-bottom: 0; /* spacing is handled by the rule above */
}

.page.single{ padding-bottom: 54px; }

/* Search form styling (used on 404 + search results page) */
.search-form{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.search-form label{
  flex: 1 1 240px;
}

.search-form .search-field{
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: var(--border-soft);
  background: var(--overlay-medium);
  padding: 0 12px;
  font-weight: var(--font-weight-bold);
}

.search-form .search-submit{
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--spicy-paprika);
  color: var(--platinum);
  font-weight: var(--font-weight-black);
  cursor: pointer;
  box-shadow: 0 16px 44px rgba(0,0,0,.18);
}
.hero .hero-content h1,
.hero .hero-content .sub,
.hero .hero-content .eyebrow{
  text-shadow:
    0 2px 4px rgba(0,0,0,0.8),
    0 4px 8px rgba(0,0,0,0.8),
    0 8px 16px rgba(0,0,0,0.7),
    0 0 20px rgba(0,0,0,0.6);
}

.hero .hero-content h1{
  text-shadow:
    0 2px 4px rgba(0,0,0,0.9),
    0 4px 8px rgba(0,0,0,0.9),
    0 8px 16px rgba(0,0,0,0.85),
    0 12px 24px rgba(0,0,0,0.75),
    0 0 24px rgba(0,0,0,0.7);
}

/* =========================
   TABLE OF CONTENTS
   ========================= */

.toc-placeholder {
  /* Placeholder will be replaced by JS */
  display: none;
}

.toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc-counter;
}

.toc-item {
  margin: 8px 0;
  counter-increment: toc-counter;
}

.toc-level-2 {
  font-weight: var(--font-weight-extra-bold);
}

.toc-level-2::before {
  content: counter(toc-counter) ". ";
  color: var(--spicy-paprika);
  font-weight: var(--font-weight-black);
}

.toc-sublist {
  margin: 6px 0 6px 20px;
  padding: 0;
  list-style: none;
  counter-reset: toc-sub-counter;
}

.toc-sublist .toc-item {
  counter-increment: toc-sub-counter;
  font-weight: var(--font-weight-bold);
  font-size: 0.95rem;
}

.toc-sublist .toc-item::before {
  content: counter(toc-counter) "." counter(toc-sub-counter) " ";
  color: rgba(94,101,114,.72);
  font-weight: var(--font-weight-bold);
}

.toc-link {
  color: rgba(24,22,22,.82);
  text-decoration: none;
  transition: color 0.15s ease;
  display: inline-block;
}

.toc-link:hover {
  color: var(--spicy-paprika);
  text-decoration: underline;
}

/* =========================
   READING PROGRESS WIDGET
   ========================= */

.reading-progress-widget {
  position: fixed;
  top: 88px; /* Below fixed header */
  right: 24px;
  width: 140px;
  background: var(--overlay-medium);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: 12px 14px;
  z-index: 90;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.reading-progress-widget.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile: Move to top of screen */
@media (max-width: 980px) {
  .reading-progress-widget {
    top: 72px;
    right: 16px;
    width: 120px;
    padding: 10px 12px;
  }

  .reading-progress-percentage {
    font-size: 1rem;
  }

  .reading-progress-label {
    font-size: 0.75rem;
  }
}

/* Very small screens: Make it more compact */
@media (max-width: 640px) {
  .reading-progress-widget {
    width: 100px;
    padding: 8px 10px;
    right: 12px;
    top: 68px;
  }

  .reading-progress-bar {
    height: 6px;
  }

  .reading-progress-percentage {
    font-size: 0.95rem;
  }

  .reading-progress-label {
    font-size: 0.7rem;
  }
}

/* =========================
   Buttons (primary/secondary)
   ========================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: var(--font-weight-black);
  font-size: .95rem;
  cursor: pointer;
  box-shadow: 0 16px 44px rgba(0,0,0,.18);
  transition: transform var(--ease), box-shadow var(--ease);
  text-align: center;
  user-select: none;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 54px rgba(0,0,0,.22);
}

.btn.primary {
  background: var(--spicy-paprika);
  color: var(--platinum);
}

.btn.primary:hover {
  background: rgba(207,92,54,.92);
}

.btn.secondary {
  background: var(--overlay-medium);
  border-color: var(--text-border);
  color: rgba(24,22,22,.88);
}

.btn.secondary:hover {
  background: rgba(255,255,255,.96);
  border-color: rgba(94,101,114,.32);
}

/* =========================
   Minimal Hero (Cart/Account Pages)
   ========================= */

/* Simpler, text-only hero for cart and account pages */
.hero-minimal {
  padding: 32px 0 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--text-border-soft);
  background: rgba(238,241,239,.55);
}

.hero-minimal .hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 16px;
}

.hero-minimal h1 {
  margin: 0 0 8px;
  font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem);
  line-height: 1.1;
  letter-spacing: -.3px;
  font-weight: var(--font-weight-ultra);
  color: var(--text-primary);
}

.hero-minimal .sub {
  margin: 0;
  color: var(--text-secondary);
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
}