.node-detail ul{
   padding-left: 20px;
}
.node-detail ul li{
   list-style: disc;
}

/* ===============================
   SOCIAL MEDIA BLOCK — FLEX LAYOUT
   =============================== */

   .penci-socials {
      width: 100%;
      font-size: 15px;
      font-family: inherit;
      line-height: 1.4;
    }
    
    /* Row layout */
    .penci-socials .social-item {
      border-bottom: 1px solid #eee;
      padding: 6px 0;
    }
    
    .penci-socials .social-content a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      text-decoration: none;
      color: inherit;
    }
    
    /* Icon column */
    .penci-socials .icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      flex-shrink: 0;
    }
    
    .penci-socials .icon i {
      font-size: 16px;
      color: inherit;
    }
    
    /* Platform name */
    .penci-socials .social-name {
      flex-grow: 1;
      text-align: left;
      font-weight: 500;
      white-space: nowrap;
    }
    
    /* Action button (Subscribe, Follow, etc.) */
    .penci-socials .social-btn {
      text-align: right;
      white-space: nowrap;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
    }
    
    .penci-socials .social-btn i {
      color: inherit;
      margin-right: 4px;
    }
    
    /* Optional hover effect */
    .penci-socials a:hover .social-btn {
      text-decoration: underline;
      opacity: 0.85;
    }
    
    /* ===============================
       PLATFORM COLORS
       =============================== */
    
    /* YouTube */
.penci-socials .social-item.social-youtube .social-btn {
   color: #FF0000;
 }
 .penci-socials .social-item.social-youtube .social-btn i {
   color: #FF0000;
 }
 
 /* X (Twitter) */
 .penci-socials .social-item.social-x .social-btn {
   color: #1DA1F2;
 }
 .penci-socials .social-item.social-x .social-btn i {
   color: #1DA1F2;
 }
 
 /* Instagram */
 .penci-socials .social-item.social-instagram .social-btn {
   color: #d210e4;
 }
 .penci-socials .social-item.social-instagram .social-btn i {
   color: #d210e4;
 }
 
 /* TikTok */
 .penci-socials .social-item.social-tiktok .social-btn {
   color: #000000;
 }
 .penci-socials .social-item.social-tiktok .social-btn i {
   color: #000000;
 }
 
 /* Facebook */
 .penci-socials .social-item.social-facebook .social-btn {
   color: #1877F2;
 }
 .penci-socials .social-item.social-facebook .social-btn i {
   color: #1877F2;
 }
 
 /* Rumble */
 .penci-socials .social-item.social-rumble .social-btn {
   color: #18dd18;
 }
 .penci-socials .social-item.social-rumble .social-btn i {
   color: #18dd18;
 }
 
 /* Patreon */
 .penci-socials .social-item.social-patreon .social-btn {
   color: #ff5741;
 }
 .penci-socials .social-item.social-patreon .social-btn i {
   color: #ff5741;
 }
 
 /* Locals */
 .penci-socials .social-item.social-locals .social-btn {
   color: #F47F1F;
 }
 .penci-socials .social-item.social-locals .social-btn i {
   color: #F47F1F;
 }
 
 /* Buy Me a Coffee */
 .penci-socials .social-item.social-bmc .social-btn {
   color: #8f7b0a;
 }
 .penci-socials .social-item.social-bmc .social-btn i {
   color: #8f7b0a;
 }

/* =============================================================================
   DIY ELECTRONICS MEGA DROPDOWN — Two-column layout with auto-expanded level 3
   No gva_layout needed. Uses the 3-level menu structure:
     DIY Electronics > Content/Topics (section headers) > actual items
   Level 2 shows on hover (theme default). CSS below forces:
     - Level 2 items side-by-side as columns
     - Level 3 items always visible when level 2 is showing
     - Section header links styled as column titles
   ============================================================================= */
@media (min-width: 991px) {
  /* Make the dropdown a flex row so Content and Topics sit side-by-side.
     :has() scopes this to ONLY dropdowns containing section headers (3-level menus),
     so normal 2-level dropdowns (3D Models, More) are unaffected. */
  .menu-hover .navigation .gva_menu > li.menu-hover-intent > ul.sub-menu:has(> li.menu-item--expanded) {
    display: flex;
    flex-wrap: wrap;
  }

  /* Only apply column layout when the parent has expanded children (3-level items) */
  .menu-hover .navigation .gva_menu > li.menu-hover-intent > ul.sub-menu > li.menu-item--expanded {
    flex: 1 1 0;
    min-width: 180px;
    border-bottom: none;
  }

  /* Force level 3 sub-menus to always show when parent dropdown is open */
  .menu-hover .navigation .gva_menu > li.menu-hover-intent > ul.sub-menu > li.menu-item--expanded > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    min-width: unset !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    transform: none !important;
  }

  /* Force level 3 list items visible */
  .menu-hover .navigation .gva_menu > li.menu-hover-intent > ul.sub-menu > li.menu-item--expanded > ul.sub-menu > li {
    visibility: visible !important;
    z-index: 11;
    border-bottom: none;
    margin-bottom: 2px;
    padding-bottom: 2px;
  }

  /* Style section headers (Content, Topics) as column titles */
  .menu-hover .navigation .gva_menu > li.menu-hover-intent > ul.sub-menu > li.menu-item--expanded > a {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    color: #999;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 6px;
    margin-bottom: 6px;
    pointer-events: none;
  }

  /* Hide the caret arrow on section headers */
  .menu-hover .navigation .gva_menu > li.menu-hover-intent > ul.sub-menu > li.menu-item--expanded > a .icaret {
    display: none;
  }
}

/* =============================================================================
   MAIN NAV — Hover highlight
   ============================================================================= */
/* Top-level menu items — subtle highlight on dark bar */
.menu-hover .navigation .gva_menu > li > a:hover,
.menu-hover .navigation .gva_menu > li.menu-hover-intent > a {
  background-color: rgba(135, 206, 250, 0.25);
  color: #fff !important;
  font-weight: 700;
}

/* Dropdown child items — light blue highlight */
.menu-hover .navigation .gva_menu .sub-menu > li > a:hover {
  background-color: rgba(135, 206, 250, 0.3) !important;
  color: #333 !important;
  font-weight: 700 !important;
}

 /* Popular 3D Printable Model View */
 .model-title {
   font-weight: 700;
   font-size: 1.1em;
   margin: 4px 0;
   line-height: 1.3;
   color: #9A30D8
 }

 .model-3d-image {
   border: 1px solid #000; /* 1px black border */
   padding: 4px;           /* Optional: spacing inside the border */
   display: inline-block;  /* Ensures border wraps tightly around inline images */
   box-sizing: border-box; /* Makes padding not expand the width */
 }

 /* ============================================================
   ARTICLE BODY — CODE STYLING
   Scoped to: node--type-article > field--name-body
   Targets: inline <code> elements only (not inside <pre>)
   Does NOT affect: pre > code blocks (Prism/HLJS handles those)
   ============================================================ */

.node--type-article .field--name-body img {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}

/* =============================================================================
   TMWB ARTICLE GITHUB BUTTON
   Used in: Arduino I2C Scanner (and future articles with GitHub repos)
   Selector: .github-btn
   ============================================================================= */

.github-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #24292e;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
}

.github-btn:hover {
    background-color: #3a3f45;
    color: #ffffff;
    text-decoration: none;
}
/* =============================================================================
   TMWB GITHUB DOWNLOAD SECTION
   Reusable section block appearing before the conclusion in all articles
   that have an associated GitHub repository.
   Selectors: .tmwb-github-section, .tmwb-github-btn, .tmwb-coffee-btn
   ============================================================================= */

.tmwb-github-section {
    background-color: #f5f7fa;
    border: 1px solid #dde2ea;
    border-left: 4px solid #24292e;
    border-radius: 6px;
    padding: 24px 28px;
    margin: 36px 0;
}

.tmwb-github-section h2 {
    margin-top: 0;
}

.tmwb-github-section p {
    margin: 10px 0;
    font-size: 15px;
    line-height: 1.6;
}

.tmwb-github-section .tmwb-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.tmwb-github-btn {
    display: inline-block;
    padding: 11px 22px;
    background-color: #24292e;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 6px;
    letter-spacing: 0.3px;
}

.tmwb-github-btn:hover {
    background-color: #3a3f45;
    color: #ffffff;
    text-decoration: none;
}

.tmwb-coffee-btn {
    display: inline-block;
    padding: 11px 22px;
    background-color: #635bff;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 6px;
    letter-spacing: 0.3px;
}

.tmwb-coffee-btn:hover {
    background-color: #4f49cc;
    color: #ffffff;
    text-decoration: none;
}

/* =============================================================================
   3D MODELS LANDING PAGE — /3d-models
   Slider rows with arrow navigation, and category browse section.
   ============================================================================= */

/* Section titles */
.section-title {
    margin: 30px 0 16px;
    font-size: 22px;
    font-weight: 700;
    color: #333;
    border-bottom: 2px solid #822EF5;
    padding-bottom: 8px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.section-title__view-all {
    font-size: 14px;
    font-weight: 500;
    color: #822EF5;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 16px;
}

.section-title__view-all:hover {
    color: #6b1ee0;
    text-decoration: underline;
}

/* =============================================================================
   MODELS SLIDER — Horizontal scroll with arrow navigation
   Views html_list outputs: div.models-slider > ul > li
   JS adds: .models-slider--init, arrow buttons
   ============================================================================= */

.models-slider {
    position: relative;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow: visible;
}
.models-slider::-webkit-scrollbar {
    display: none;
}

/* The scrollable list — scrollbar hidden, arrows handle navigation */
.models-slider > ul,
.models-slider ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.models-slider > ul::-webkit-scrollbar,
.models-slider ul::-webkit-scrollbar,
.models-slider *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

.models-slider > ul > li {
    list-style: none;
    flex: 0 0 220px;
    scroll-snap-align: start;
}

/* Arrow buttons */
.models-slider__arrow {
    position: absolute;
    top: 30%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #666;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s, opacity 0.2s;
}

.models-slider__arrow:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    border-color: #822EF5;
}

.models-slider__arrow svg {
    width: 20px;
    height: 20px;
    fill: #555;
}

.models-slider__arrow:hover svg {
    fill: #822EF5;
}

.models-slider__arrow--prev {
    left: -16px;
}

.models-slider__arrow--next {
    right: -16px;
}

.models-slider__arrow--hidden {
    opacity: 0;
    pointer-events: none;
}

/* =============================================================================
   BROWSE BY CATEGORY — Modern card grid
   Views html_list outputs: div.categories-grid > ul > li
   ============================================================================= */

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.categories-grid > ul {
    display: contents;
}

.categories-grid > ul > li {
    list-style: none;
    min-width: 0;
    box-sizing: border-box;
}

.category-card {
    min-width: 0;
    box-sizing: border-box;
    background: linear-gradient(135deg, #f8f8ff 0%, #f0ecff 100%);
    border: 1px solid #e4ddf7;
    border-radius: 12px;
    padding: 24px 20px;
    text-align: left;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    position: relative;
    overflow: hidden;
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #822EF5;
    opacity: 0;
    transition: opacity 0.2s;
}

.category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(130, 46, 245, 0.15);
    border-color: #c4a8f5;
}

.category-card:hover::before {
    opacity: 1;
}

.category-card__name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.category-card__link {
    color: #333;
    text-decoration: none;
    display: block;
}

.category-card__link::after {
    content: '\f105';
    font-family: FontAwesome;
    font-size: 18px;
    color: #bbb;
    transition: color 0.2s, transform 0.2s;
    margin-left: 8px;
    flex-shrink: 0;
}

.category-card:hover .category-card__link {
    color: #822EF5;
}

.category-card:hover .category-card__link::after {
    color: #822EF5;
    transform: translateX(3px);
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 768px) {
    .models-slider > ul > li {
        flex: 0 0 200px;
    }

    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .models-slider__arrow {
        width: 34px;
        height: 34px;
    }

    .models-slider__arrow--prev {
        left: -8px;
    }

    .models-slider__arrow--next {
        right: -8px;
    }
}

@media (max-width: 480px) {
    .models-slider > ul > li {
        flex: 0 0 180px;
    }

    .categories-grid {
        grid-template-columns: 1fr;
    }

    .models-slider__arrow {
        display: none;
    }
}

/* =============================================================================
   FEATURED MODELS HERO — Height cap, no overlay, text-level legibility
   Scoped to: .view-slider-hero
   ============================================================================= */

/* Cap the hero height */
.view-slider-hero .node--view-mode-slider-2 {
    max-height: 400px;
    overflow: hidden;
    background: #111;
}

/* Image scales to fit — full image visible, no cropping */
.view-slider-hero .node--view-mode-slider-2 .post-thumbnail img {
    width: 100%;
    height: 400px;
    object-fit: contain;
    display: block;
    background: #111;
}

/* Remove the theme's dark overlay — images stay fully visible */
.view-slider-hero .node--view-mode-slider-2:after {
    display: none;
}

/* Re-center the content overlay for the shorter hero */
.view-slider-hero .node--view-mode-slider-2 .post-content {
    margin-top: -100px;
}

/* Hero title — heavy layered text-shadow + stroke for legibility */
.view-slider-hero .post-title a {
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 1),
        0 0 8px rgba(0, 0, 0, 0.95),
        0 3px 12px rgba(0, 0, 0, 0.8),
        1px 1px 0 rgba(0, 0, 0, 0.8),
        -1px -1px 0 rgba(0, 0, 0, 0.8),
        1px -1px 0 rgba(0, 0, 0, 0.8),
        -1px 1px 0 rgba(0, 0, 0, 0.8);
    -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.3);
}

/* Hero category pill badge */
.view-slider-hero .post-categories a {
    background: rgba(0, 0, 0, 0.55) !important;
    color: #fff !important;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: none;
    display: inline-block;
    line-height: 1.4;
}

/* Override the theme's triangle pseudo on the category badge */
.view-slider-hero .post-categories a:after {
    display: none;
}

/* Hero date pill badge */
.view-slider-hero .post-created {
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    display: inline-block;
    line-height: 1.4;
    margin-left: 6px;
    text-shadow: none;
}

/* "Read more" button — already btn-theme, just ensure it pops */
.view-slider-hero .post-action .btn-theme {
    text-shadow: none;
}

@media (max-width: 991px) {
    .view-slider-hero .node--view-mode-slider-2 {
        max-height: 340px;
    }
    .view-slider-hero .node--view-mode-slider-2 .post-thumbnail img {
        height: 340px;
    }
    .view-slider-hero .node--view-mode-slider-2 .post-content {
        margin-top: -80px;
    }
}

@media (max-width: 767px) {
    .view-slider-hero .node--view-mode-slider-2 {
        max-height: 280px;
    }
    .view-slider-hero .node--view-mode-slider-2 .post-thumbnail img {
        height: 280px;
    }
    .view-slider-hero .node--view-mode-slider-2 .post-content {
        margin-top: -60px;
    }
}

/* =============================================================================
   FEATURED MODELS CAROUSEL — Square cards, text overlay, legibility
   Scoped to: .view-slider-featured-carousel
   ============================================================================= */

/* Remove the theme's gradient overlay — images stay fully visible */
.view-slider-featured-carousel .node--view-mode-slider-1.post-block:after {
    display: none;
}

/* Square card — aspect-ratio driven, positioning parent */
.view-slider-featured-carousel .node--view-mode-slider-1.post-block {
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    background: #111;
    height: auto;
}

/* post-inner fills the card */
.view-slider-featured-carousel .node--view-mode-slider-1 .post-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Thumbnail fills the entire card */
.view-slider-featured-carousel .node--view-mode-slider-1 .post-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Image scales to fit — full image visible, no cropping */
.view-slider-featured-carousel .node--view-mode-slider-1 .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #111;
}

/* Meta-wrap overlaid at bottom of card on top of image */
.view-slider-featured-carousel .node--view-mode-slider-1.post-block .post-meta-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 12px;
    box-sizing: border-box;
    z-index: 9;
}

/* Carousel title — same heavy text-shadow as hero */
.view-slider-featured-carousel .post-title a {
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 1),
        0 0 8px rgba(0, 0, 0, 0.95),
        0 3px 12px rgba(0, 0, 0, 0.8),
        1px 1px 0 rgba(0, 0, 0, 0.8),
        -1px -1px 0 rgba(0, 0, 0, 0.8),
        1px -1px 0 rgba(0, 0, 0, 0.8),
        -1px 1px 0 rgba(0, 0, 0, 0.8);
    -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.3);
}

/* Clamp title to 2 lines */
.view-slider-featured-carousel .post-title {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Carousel category pill badge */
.view-slider-featured-carousel .category-background .post-categories a {
    background: rgba(0, 0, 0, 0.55) !important;
    color: #fff !important;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: none;
    display: inline-block;
    line-height: 1.4;
}

/* Override the theme's triangle pseudo on carousel category badge */
.view-slider-featured-carousel .category-background .post-categories a:after {
    display: none;
}

/* Carousel date pill badge */
.view-slider-featured-carousel .post-created {
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    display: inline-block;
    line-height: 1.4;
    margin-left: 4px;
    text-shadow: none;
}

/* =============================================================================
   TMWB AD ZONES
   Structural containers for display ad slots. No visual styling — ad network
   markup renders inside. Always present in layout even when empty.
   ============================================================================= */

.tmwb-ad-zone {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.tmwb-ad-leaderboard {
    min-height: 90px;
    margin: 16px 0;
}

.tmwb-ad-sidebar {
    position: sticky;
    top: 80px;
    min-height: 250px;
    width: 300px;
}

.tmwb-ad-ingrid {
    min-height: 250px;
    width: 300px;
}

.tmwb-ad-midcontent {
    min-height: 90px;
    margin: 32px 0;
}

.tmwb-ad-footer {
    min-height: 90px;
    margin: 24px 0;
}

@media (max-width: 768px) {
    .tmwb-ad-leaderboard,
    .tmwb-ad-midcontent,
    .tmwb-ad-footer {
        min-height: 50px;
    }
    .tmwb-ad-sidebar {
        position: static;
        width: 100%;
        min-height: 250px;
    }
}

/* =============================================================================
   TMWB AFFILIATE PRODUCT SHELF
   Horizontal scroll row for gear/affiliate product cards.
   ============================================================================= */

.tmwb-product-shelf {
    overflow-x: auto;
    display: flex;
    gap: 16px;
    padding: 12px 0 20px;
    scrollbar-width: thin;
}

.tmwb-product-shelf::-webkit-scrollbar {
    height: 4px;
}

.tmwb-product-shelf .product-card {
    flex: 0 0 200px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    font-size: 13px;
}

/* =============================================================================
   TMWB LANDING PAGE LAYOUT
   Template: node--page--landing.html.twig
   ============================================================================= */

/* Hero */
.tmwb-landing-hero {
    position: relative;
    background-color: #1a1a2e;
    background-size: cover;
    background-position: center;
    min-height: 320px;
    display: flex;
    align-items: center;
    padding: 60px 24px;
    overflow: hidden;
}

.tmwb-landing-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 720px;
}

.tmwb-landing-hero__title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    margin: 0 0 16px;
    line-height: 1.15;
}

.tmwb-landing-hero__intro {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.88);
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    margin: 0 0 24px;
    max-width: 560px;
    line-height: 1.6;
}

.tmwb-landing-hero__cta {
    display: inline-block;
    padding: 12px 28px;
    background: #e85d24;
    color: #fff;
    border-radius: 4px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: background 0.2s;
}

.tmwb-landing-hero__cta:hover {
    background: #c94e1e;
    color: #fff;
    text-decoration: none;
}

/* Featured content — 1 wide + 2 stacked */
.tmwb-landing-featured {
    padding: 40px 0 24px;
}

.tmwb-landing-featured__layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: start;
}

.tmwb-landing-featured__stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Content grid + sidebar */
.tmwb-landing-body {
    padding: 32px 0;
}

.tmwb-landing-body__layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    align-items: start;
}

/* Filter bar */
.tmwb-landing-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.tmwb-landing-filter-bar__label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 4px;
}

.tmwb-landing-filter-bar__btn {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    font-size: 13px;
    color: #374151;
    text-decoration: none;
    transition: all 0.15s;
}

.tmwb-landing-filter-bar__btn:hover,
.tmwb-landing-filter-bar__btn--active {
    background: #e85d24;
    border-color: #e85d24;
    color: #fff;
    text-decoration: none;
}

/* Article grid */
.tmwb-landing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    position: relative;
}

/* In-grid ad: card-sized slot, not full-width strip */
.tmwb-landing-grid .tmwb-ad-ingrid {
    min-height: 250px;
    width: 100%;
    background: #f8fafc;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Article card inside landing grid */
.tmwb-article-card {
    min-width: 0;
}

.tmwb-article-card .post-block {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.tmwb-article-card .post-block:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.tmwb-article-card .post-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.tmwb-article-card .post-content {
    padding: 14px 16px;
}

.tmwb-article-card .post-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 8px;
}

.tmwb-article-card .post-title a {
    color: #1a1a2e;
    text-decoration: none;
}

.tmwb-article-card .post-title a:hover {
    color: #e85d24;
}

.tmwb-article-card .cat-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #e85d24;
    margin-bottom: 6px;
}

.tmwb-article-card .post-meta {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
}

.tmwb-article-card .post-body {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Sidebar shortcuts */
.tmwb-landing-sidebar-shortcuts {
    margin-top: 24px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.tmwb-landing-sidebar-shortcuts__heading {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #374151;
    margin: 0 0 12px;
}

.tmwb-landing-sidebar-shortcuts__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tmwb-landing-sidebar-shortcuts__list li {
    border-bottom: 1px solid #e2e8f0;
}

.tmwb-landing-sidebar-shortcuts__list li:last-child {
    border-bottom: none;
}

.tmwb-landing-sidebar-shortcuts__list a {
    display: block;
    padding: 8px 4px;
    font-size: 14px;
    color: #374151;
    text-decoration: none;
    transition: color 0.15s;
}

.tmwb-landing-sidebar-shortcuts__list a:hover {
    color: #e85d24;
}

/* Product shelf */
.tmwb-landing-product-shelf {
    padding: 32px 0;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.tmwb-landing-product-shelf__heading {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 20px;
}

/* Additional content rows */
.tmwb-landing-more {
    padding: 40px 0;
}

.tmwb-landing-more__layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    align-items: start;
}

.tmwb-landing-section-heading {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e85d24;
    display: inline-block;
}

/* Cross-links */
.tmwb-landing-crosslinks {
    padding: 32px 0;
    background: #1a1a2e;
    color: #fff;
}

.tmwb-landing-crosslinks__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
}

.tmwb-landing-crosslinks h3 {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tmwb-landing-crosslinks ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tmwb-landing-crosslinks ul li {
    margin-bottom: 8px;
}

.tmwb-landing-crosslinks ul a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: 14px;
}

.tmwb-landing-crosslinks ul a:hover {
    color: #e85d24;
}

/* Half-page ad zone */
.tmwb-ad-halfpage {
    min-height: 600px;
    width: 300px;
    position: sticky;
    top: 80px;
}

/* Mobile responsive — landing pages */
@media (max-width: 1024px) {
    .tmwb-landing-body__layout,
    .tmwb-landing-more__layout {
        grid-template-columns: 1fr;
    }
    .tmwb-landing-body__sidebar {
        display: none;
    }
}

@media (max-width: 768px) {
    .tmwb-landing-featured__layout {
        grid-template-columns: 1fr;
    }
    .tmwb-landing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .tmwb-landing-hero {
        min-height: 240px;
        padding: 40px 16px;
    }
}

/* =============================================================================
   HOMEPAGE POLISH — consistent card heights, brand-color arrows, newsletter CTA
   ============================================================================= */

/* Make every slider card the same height regardless of title length. */
.models-slider > ul > li {
    display: flex;
}
.cults3d-card-square__title {
    min-height: 2.6em;
}

/* Arrow buttons use the site's brand blue instead of the default accent. */
.models-slider__arrow {
    border-color: #105EFB;
    background: #105EFB;
}
.models-slider__arrow svg {
    fill: #fff;
}
.models-slider__arrow:hover {
    background: #0a3fc4;
    border-color: #0a3fc4;
    box-shadow: 0 4px 12px rgba(16, 94, 251, 0.4);
}
.models-slider__arrow:hover svg {
    fill: #fff;
}

/* Category tiles — image cards with consistent aspect-ratio cropping,
   same visual grammar as the 3D model cards (rounded, shadow, hover lift). */
.category-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}
.category-tile {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
}
.category-tile:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}
.category-tile__thumbnail {
    aspect-ratio: 4 / 3;
    width: 100%;
    overflow: hidden;
    background: #f5f5f5;
}
.category-tile__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.category-tile__content {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.category-tile__name {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    color: #333;
}
.category-tile__arrow {
    color: #105EFB;
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.2s;
}
.category-tile:hover .category-tile__name {
    color: #105EFB;
}
.category-tile:hover .category-tile__arrow {
    transform: translateX(4px);
}

/* Newsletter call-to-action card (homepage placement only). */
.homepage-newsletter-cta {
    background: linear-gradient(135deg, #105EFB 0%, #0a2f6b 100%);
    border-radius: 16px;
    padding: 48px 40px;
    text-align: center;
}
.homepage-newsletter-cta .block-title {
    border: none;
    margin-bottom: 12px;
}
.homepage-newsletter-cta .block-title span {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
}
.homepage-newsletter-cta .content.block-content {
    max-width: 640px;
    margin: 0 auto;
}
.homepage-newsletter-cta #edit-message--2,
.homepage-newsletter-cta #edit-message--2 * {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 16px;
}
.homepage-newsletter-cta .simplenews-subscriber-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}
.homepage-newsletter-cta .btn-theme {
    background: #fff;
    color: #105EFB;
    font-size: 14px;
    padding: 12px 32px;
    padding-left: 40px;
}
.homepage-newsletter-cta .btn-theme:after {
    color: #105EFB;
}
.homepage-newsletter-cta .btn-theme:hover {
    background: #f0f4ff;
}
.homepage-newsletter-cta a:not(.btn-theme) {
    color: #cfe0ff;
}

@media (max-width: 480px) {
    .tmwb-landing-grid {
        grid-template-columns: 1fr;
    }
}

/* Landing page (Basic page) layout: full-width breadcrumbs/title/hero
 * regions, then an 80% main / 20% sidebar-right-only row underneath.
 * See templates/page/parts/main--page.html.twig */
.breadcrumbs--full-width,
.page-title-region-full-width,
.page-hero-region-full-width {
    margin-bottom: 20px;
}
.landing-page-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.landing-page-main {
    width: calc(80% - 24px);
    box-sizing: border-box;
}
.landing-page-sidebar {
    width: 20%;
    box-sizing: border-box;
}
.landing-page-row--no-sidebar .landing-page-main {
    width: 100%;
}
@media (max-width: 991px) {
    .landing-page-row {
        display: block;
    }
    .landing-page-main,
    .landing-page-sidebar {
        width: 100%;
    }
}

/* Reusable arrow-controlled card slider rows (see card_slider_arduino view).
   Uses the dedicated "Card Slider" node view mode (node--article--card-slider
   .html.twig), separate from slider_1 (the hero/Mastering-series carousel),
   so this never affects those. field_card_image is a purpose-made, already
   server-side-cropped image (see the card_slider image style); this CSS is
   just a safety-net crop for the field_image fallback case, which isn't
   pre-cropped to this taller ratio. Applies to every row duplicated from
   card_slider_arduino, since they all carry the shared .card-slider class. */
.card-slider .node--view-mode-card-slider.post-block .post-thumbnail {
    overflow: hidden;
}
.card-slider .node--view-mode-card-slider.post-block .post-thumbnail img {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

/* Vertical variant (node--article--card-slider-vertical.html.twig), used by
   the Mastering Arduino card slider. The source cards are 940x1672 portrait,
   so the frame follows that ratio instead of the fixed 280px landscape crop;
   object-fit keeps the field_image fallback in the same tall frame. */
.card-slider .node--view-mode-card-slider-vertical.post-block .post-thumbnail {
    overflow: hidden;
}
.card-slider .node--view-mode-card-slider-vertical.post-block .post-thumbnail img {
    width: 100%;
    height: auto;
    aspect-ratio: 940 / 1672;
    object-fit: cover;
}

/* Square variant for layouts that have a 1:1 image slot, including the
   Mastering Arduino row on Homepage 3. */
.card-slider .node--view-mode-card-slider-square.post-block .post-thumbnail {
    overflow: hidden;
}
.card-slider .node--view-mode-card-slider-square.post-block .post-thumbnail img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Latest slider (Homepage 3): the cover art carries the title, so the category
   flags, date and title under each card are hidden. Visually hidden rather
   than display:none so screen readers still get them. */
#block-gavias-sancy-home-v3-latest .node--view-mode-card-slider-square .post-meta-wrap {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =============================================================================
   SPONSORED CONTENT CARD
   Template: node--article--sponsored-card.html.twig
   Horizontal card: teaser image left, title + trimmed body teaser right,
   red "Sponsored Content" flag overlaying the image's top-right corner.
   ============================================================================= */
.sponsored-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.sponsored-card__image {
    position: relative;
    flex: 0 0 480px;
    aspect-ratio: 16 / 9;
}
.sponsored-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sponsored-card__flag {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #d32f2f;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 12px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.sponsored-card__body {
    flex: 1 1 auto;
    padding: 28px 32px 28px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.sponsored-card__title {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.3;
}
.sponsored-card__title a {
    color: #1a1a2e;
    text-decoration: none;
}
.sponsored-card__title a:hover {
    color: #e85d24;
}
.sponsored-card__teaser {
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
}
@media (max-width: 767px) {
    .sponsored-card {
        flex-direction: column;
    }
    .sponsored-card__image {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 16 / 9;
    }
    .sponsored-card__body {
        padding: 16px 20px;
    }
}

/* =============================================================================
   MASTERING SIDEBAR CARD
   Template: node--article--mastering-sidebar-card.html.twig
   Compact vertical card for the narrow sidebar column: image on top,
   title below.
   ============================================================================= */
.mastering-sidebar-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.mastering-sidebar-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.mastering-sidebar-card__link:hover {
    text-decoration: none;
    color: inherit;
}
.mastering-sidebar-card__image {
    aspect-ratio: 16 / 9;
}
.mastering-sidebar-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mastering-sidebar-card__title {
    margin: 0;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a2e;
}
.mastering-sidebar-card__link:hover .mastering-sidebar-card__title {
    color: #e85d24;
}

/* =============================================================================
   BACK TO PARENT CARD (sidebar)
   Block content: "DIY Electronics Landing Page Card"
   ============================================================================= */
.back-to-parent-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #1a1a2e;
}
.back-to-parent-card a {
    display: block;
    padding: 16px 18px;
    text-decoration: none;
}
.back-to-parent-card a:hover {
    text-decoration: none;
}
.back-to-parent-card__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 4px;
}
.back-to-parent-card__title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.back-to-parent-card a:hover .back-to-parent-card__title {
    color: #e85d24;
}

/* Reduce unused whitespace around the primary site logo. */
.header-v1 .header-main {
    padding: 12px 0;
}

.header-v1 .header-main .site-branding {
    padding: 0;
}

/* Keep header variant 2's logo and navigation in separate full-width rows. */
.header-v2 .header-main {
    padding: 12px 0;
}

.header-v2 .header-main .site-branding {
    padding: 0;
}

/* Virtual Workbench call-to-action in the open header-right region. */
.header-v2 .header-main-inner > .row {
    align-items: stretch;
    display: flex;
}

.header-main .header-right,
.header-main .header-right-inner {
    align-items: flex-end;
    display: flex !important;
    justify-content: flex-end !important;
    min-height: 100%;
}

.header-v2 .header-main .header-right {
    align-self: stretch;
    float: none;
}

.header-v2 .header-main .header-right-inner {
    margin-top: auto;
    width: 100%;
}

.header-main .header-right-inner > div,
.header-main .header-right-inner .block {
    text-align: right;
    width: 100%;
}

.tmwb-virtual-workbench-cta {
    background: #fff;
    border: 1px solid #d7e0eb;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(17, 32, 51, .12);
    color: #172230;
    display: inline-grid;
    grid-template-columns: minmax(230px, 1.15fr) minmax(180px, .85fr);
    margin: auto 0 0;
    max-width: 540px;
    min-height: 150px;
    overflow: hidden;
    text-align: left;
    text-decoration: none !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    width: 100%;
}

.header-main .header-right a.tmwb-virtual-workbench-cta,
.header-main .header-right a.tmwb-virtual-workbench-cta:visited,
.header-main .header-right a.tmwb-virtual-workbench-cta:hover,
.header-main .header-right a.tmwb-virtual-workbench-cta:focus,
.tmwb-virtual-workbench-cta * {
    text-decoration: none !important;
}

.tmwb-virtual-workbench-cta:hover,
.tmwb-virtual-workbench-cta:focus {
    border-color: #2468e8;
    box-shadow: 0 14px 34px rgba(17, 32, 51, .18);
    color: #172230;
    text-decoration: none;
    transform: translateY(-2px);
}

.tmwb-virtual-workbench-cta__media {
    background: #111923;
    display: block;
    min-height: 150px;
    overflow: hidden;
}

.tmwb-virtual-workbench-cta__media img {
    height: 100%;
    object-fit: cover;
    object-position: 67% center;
    transition: transform .35s ease;
    width: 100%;
}

.tmwb-virtual-workbench-cta:hover .tmwb-virtual-workbench-cta__media img,
.tmwb-virtual-workbench-cta:focus .tmwb-virtual-workbench-cta__media img {
    transform: scale(1.035);
}

.tmwb-virtual-workbench-cta__body {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 17px 20px;
}

.tmwb-virtual-workbench-cta__kicker {
    color: #2468e8 !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.tmwb-virtual-workbench-cta__title {
    color: #172230 !important;
    font-size: clamp(17px, 1.1vw, 21px);
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1.16;
}

.tmwb-virtual-workbench-cta__credit {
    background: #2468e8;
    border-radius: 6px;
    color: #fff !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1.4;
    margin-top: 13px;
    padding: 8px 13px;
    text-transform: uppercase;
    transition: background .2s ease, transform .2s ease;
}

.tmwb-virtual-workbench-cta:hover .tmwb-virtual-workbench-cta__credit,
.tmwb-virtual-workbench-cta:focus .tmwb-virtual-workbench-cta__credit {
    background: #174fb9;
    transform: translateY(-1px);
}

@media (max-width: 991px) {
    .header-v2 .header-main-inner > .row { display: block; }

    .header-main .header-right,
    .header-main .header-right-inner {
        justify-content: center;
    }

    .tmwb-virtual-workbench-cta {
        margin-top: 12px;
        max-width: 520px;
    }
}

@media (max-width: 600px) {
    .tmwb-virtual-workbench-cta {
        grid-template-columns: 1fr;
    }

    .tmwb-virtual-workbench-cta__media {
        min-height: 145px;
    }
}

/* Builder-free homepage sections. */
.home-v2__section {
    padding-top: 42px;
}

.home-v2__hero {
    padding-top: 0;
}

.home-v2__section:last-child {
    padding-bottom: 42px;
}

.home-v2__section-title {
    margin: 0 0 24px;
    color: #111;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
}

@media (max-width: 767px) {
    .home-v2__section {
    }
}

/* Make inline links in body content visibly look like links (theme base style is black, no underline). */
.field--name-body a {
    color: #105EFB;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.field--name-body a:hover,
.field--name-body a:focus {
    color: #0A3FA8;
    text-decoration: underline;
}

/* Affiliate Product Card: buy card and product overview. */
.tmwb-buy-card {
    margin: 24px 0;
    padding: 20px;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    background: #fff;
}

.tmwb-buy-card__eyebrow {
    margin: 0 0 12px;
    color: #6b7280;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tmwb-buy-card__main {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.tmwb-buy-card__photo {
    flex: 0 0 180px;
    max-width: 100%;
}

.tmwb-buy-card__photo img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.tmwb-buy-card__details {
    flex: 1;
    min-width: 220px;
}

.tmwb-buy-card__name {
    margin: 0 0 6px;
    color: #111;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.tmwb-buy-card__summary {
    margin: 0;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.55;
}

.tmwb-buy-card__buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e3e6ea;
}

.tmwb-buy-card__button {
    flex: 1 1 150px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
}

.tmwb-buy-card .tmwb-buy-card__button--amazon {
    background: #ff9900;
    color: #131a22;
}

.tmwb-buy-card .tmwb-buy-card__button--sparkfun {
    background: #e4002b;
    color: #fff;
}

.tmwb-buy-card .tmwb-buy-card__button--seeed {
    background: #8fc31f;
    color: #1b2a05;
}

.tmwb-buy-card a.tmwb-buy-card__button:hover,
.tmwb-buy-card a.tmwb-buy-card__button:focus {
    filter: brightness(0.92);
}

.tmwb-buy-card__button--unavailable {
    border: 1px solid #e3e6ea;
    background: #f4f5f7;
    color: #9ca3af;
    cursor: not-allowed;
}

.tmwb-buy-card__official,
.tmwb-buy-card__disclosure,
.tmwb-buy-card__legacy-note {
    margin: 10px 0 0;
    font-size: 12px;
    color: #6b7280;
}

.tmwb-buy-card__legacy-note {
    padding-top: 12px;
    border-top: 1px solid #e3e6ea;
    font-size: 14px;
}

.tmwb-product-overview {
    margin: 32px 0;
}

.tmwb-product-overview__photos {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.tmwb-product-overview__photos img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.tmwb-product-overview__credit {
    margin: 6px 0 12px;
    color: #666;
    font-size: 0.85em;
}

/* Homepage 3: editorial homepage assembled from View and custom blocks. */
.home-v3__main {
    background: #fff;
}

.home-v3__section {
    padding: 24px 0;
}

/* Home 3 owns its vertical rhythm; Drupal's global block margin otherwise
   stacks with section padding and creates oversized blank bands. */
.home-v3__main .block {
    margin-bottom: 0;
}

.home-v3__heading {
    margin-bottom: 20px;
}

.home-v3__heading > span,
.home-v3__heading > div > span {
    display: block;
    color: #1261f5;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.home-v3__heading h2 {
    margin: 0;
    color: #16191e;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
}

.home-v3__heading--split {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

.home-v3__heading--split > a {
    color: #1261f5;
    font-size: 12px;
    font-weight: 700;
}

.home-v3__heading--split > a,
.home-v3__section-links a,
.home-v3__empty-feed a {
    text-decoration: none;
}

.home-v3__heading--split > a:hover,
.home-v3__heading--split > a:focus,
.home-v3__empty-feed a:hover,
.home-v3__empty-feed a:focus {
    text-decoration: underline;
}

.home-v3__section-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.home-v3__section-links a {
    padding: 7px 11px;
    border: 1px solid #505966;
    border-radius: 999px;
    color: #dce6f5;
    font-size: 11px;
    font-weight: 700;
}

.home-v3__section-links a:hover,
.home-v3__section-links a:focus {
    border-color: #78aaff;
    background: #22314a;
    color: #fff;
}

.home-v3__hero {
    background: #1b2f60;
}

.home-v3__hero .container {
    padding-left: 0;
    padding-right: 0;
}

.home-v3__hero .view-homepage-featured,
.home-v3__hero .view-homepage-featured .owl-carousel {
    position: relative;
}

.home-v3__hero .view-homepage-featured .slider-2 {
    display: grid;
    grid-template-columns: minmax(0, 56%) minmax(0, 44%);
    min-height: 560px;
    height: auto;
    position: relative;
    background: #1b2f60;
}

/* The base slider_2 mode adds an 80% black veil over the whole slide. */
.home-v3__hero .view-homepage-featured .slider-2::after {
    content: none;
    display: none;
}

.home-v3__hero .view-homepage-featured .post-thumbnail,
.home-v3__hero .view-homepage-featured .post-thumbnail > div,
.home-v3__hero .view-homepage-featured .post-thumbnail img {
    width: 100%;
    height: 100%;
}

.home-v3__hero .view-homepage-featured .post-thumbnail {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #102b65;
}

.home-v3__hero .view-homepage-featured .post-thumbnail > .field--name-field-image,
.home-v3__hero .view-homepage-featured .post-thumbnail > .field--name-field-square-card {
    position: absolute;
    inset: 0;
}

.home-v3__hero .view-homepage-featured .post-thumbnail img {
    object-fit: contain;
}

.home-v3__hero .view-homepage-featured .post-thumbnail:after {
    display: none;
}

.home-v3__hero .view-homepage-featured .post-content {
    position: relative;
    z-index: 2;
    grid-column: 2;
    grid-row: 1;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    min-height: 560px;
    height: auto;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    background: #1b2f60;
    color: #fff;
    text-align: left;
}

.home-v3__hero .view-homepage-featured .content-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(38px, 3vw, 54px) clamp(32px, 3vw, 54px) 94px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-v3__hero .view-homepage-featured .post-meta {
    margin-bottom: 22px;
    color: #73a1ff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-v3__hero .view-homepage-featured .post-meta .post-created {
    display: none;
}

.home-v3__hero .view-homepage-featured .post-meta .post-categories:not(:first-child) {
    display: none;
}

.home-v3__hero .view-homepage-featured .post-meta::after {
    content: ' · Featured this week';
}

.home-v3__hero .view-homepage-featured .post-title {
    margin: 0 0 20px;
    font-size: clamp(28px, 2.1vw, 40px);
    font-weight: 400;
    line-height: 1.16;
}

.home-v3__hero .view-homepage-featured .post-content .post-title a {
    font-size: inherit;
    line-height: inherit;
}

.home-v3__hero .view-homepage-featured .post-title a,
.home-v3__hero .view-homepage-featured .post-body,
.home-v3__hero .view-homepage-featured .post-meta,
.home-v3__hero .view-homepage-featured .post-meta a {
    color: #fff;
}

.home-v3__hero .view-homepage-featured .post-body {
    max-height: none;
    overflow: visible;
    color: #dce5f5;
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.55;
    opacity: 1;
}

.home-v3__hero .view-homepage-featured .post-action {
    margin-top: 28px;
}

.home-v3__hero .view-homepage-featured .post-action .btn-theme {
    padding: 15px 22px;
    border-radius: 0;
    background: #4662ee;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-v3__hero .view-homepage-featured .post-action .btn-theme::before,
.home-v3__hero .view-homepage-featured .post-action .btn-theme::after {
    display: none;
}

.home-v3__hero .view-homepage-featured .owl-nav {
    display: block;
    opacity: 1;
}

.home-v3__hero .view-homepage-featured .owl-nav > div {
    z-index: 8;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
    background: rgba(20, 28, 66, 0.82);
    color: #fff !important;
    font-size: 20px;
    line-height: 48px;
}

.home-v3__hero .view-homepage-featured .owl-nav > div:hover,
.home-v3__hero .view-homepage-featured .owl-nav > div:focus {
    border-color: #fff;
    background: #4662ee;
    color: #fff !important;
    outline: 3px solid rgba(255, 255, 255, 0.35);
    outline-offset: 2px;
}

.home-v3__hero .view-homepage-featured .owl-dots {
    position: absolute;
    z-index: 6;
    right: clamp(32px, 3vw, 54px);
    bottom: clamp(38px, 3.4vw, 58px);
    width: calc(44% - clamp(64px, 6vw, 108px));
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    text-align: left;
}

.home-v3__hero .view-homepage-featured .owl-dots .owl-dot {
    width: 10px;
    height: 10px;
    margin: 0;
    border-radius: 50%;
    background: #73819d;
}

.home-v3__hero .view-homepage-featured .owl-dots .owl-dot span {
    display: none;
}

.home-v3__hero .view-homepage-featured .owl-dots .owl-dot.active {
    width: 28px;
    border-radius: 999px;
    background: #fff;
}

.home-v3-hero-counter {
    margin-left: 8px;
    color: #bdc9df;
    font-size: 13px;
    letter-spacing: 0.08em;
}

.home-v3__topic-jump {
    border-bottom: 1px solid #e5e8ed;
    background: #fff;
}

.home-v3__topic-jump .container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 12px;
}

.home-v3__topic-jump strong {
    color: #1261f5;
    text-transform: uppercase;
}

.home-v3__topic-jump a {
    color: #343a43;
    font-weight: 600;
}

.home-v3__latest {
    padding-top: 34px;
}

.home-v3__latest .view-slider-large {
    margin-top: 4px;
}

.home-v3__electronics {
    background: #eef5ff;
}

.home-v3__rail + .home-v3__rail {
    margin-top: 34px;
}

.home-v3__rail > h3,
.home-v3__fabrication .row h3 {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
}

.home-v3__empty-feed {
    display: none;
    min-height: 110px;
    padding: 24px;
    border: 1px dashed #b8c3d1;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.62);
    color: #596574;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    line-height: 1.55;
}

.home-v3__empty-feed strong {
    color: inherit;
    font-size: 15px;
}

.home-v3__empty-feed a {
    display: inline-block;
    margin-top: 8px;
    color: #1261f5;
    font-weight: 700;
}

.home-v3__view-slot:not(:has(.item, .views-row, article, .node)) > .home-v3__empty-feed {
    display: flex;
}

.home-v3__view-slot--latest .home-v3__empty-feed {
    min-height: 180px;
    background: linear-gradient(135deg, #f3f6fa, #e8eef7);
}

.home-v3__fabrication .home-v3__empty-feed {
    border-color: #3b424d;
    background: #22262d;
    color: #aeb8c5;
}

.home-v3__ad {
    padding: 18px 0;
}

.home-v3-ad-slot {
    width: min(760px, 100%);
    min-height: 92px;
    margin: 0 auto;
    border: 1px solid #dfe3e8;
    background: #f5f6f8;
    color: #7a838e;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 3px;
}

.home-v3-ad-slot span {
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-v3-ad-slot strong {
    color: #343a43;
}

.home-v3-ad-slot small {
    font-size: 10px;
}

.home-v3__reviews {
    background: #f4f6f8;
    padding: 24px;
}

.home-v3-review-feed {
    counter-reset: home-v3-review;
}

.home-v3-review-feed__item {
    counter-increment: home-v3-review;
    position: relative;
    min-height: 62px;
    padding: 15px 0 15px 46px;
    border-top: 1px solid #dce1e7;
}

.home-v3-review-feed__item:first-child {
    border-top: 0;
    padding-top: 0;
}

.home-v3-review-feed__item::before {
    content: counter(home-v3-review, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 15px;
    color: #1261f5;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}

.home-v3-review-feed__item:first-child::before {
    top: 0;
}

.home-v3-review-feed .post-thumbnail,
.home-v3-review-feed .field--name-field-image {
    display: none;
}

.home-v3-review-feed .post-title,
.home-v3-review-feed h2,
.home-v3-review-feed h3 {
    margin: 0 0 5px;
    font-size: 15px;
    line-height: 1.35;
}

.home-v3-review-feed .post-body,
.home-v3-review-feed .field--name-body {
    display: none;
}

.home-v3__fabrication {
    background: #191c21;
    color: #fff;
}

.home-v3__fabrication .home-v3__heading h2,
.home-v3__fabrication h3,
.home-v3__fabrication .post-title a,
.home-v3__fabrication .post-meta,
.home-v3__fabrication .post-meta a {
    color: #fff;
}

.home-v3__fabrication .home-v3__heading > span,
.home-v3__fabrication .home-v3__heading > div > span {
    color: #78aaff;
}

.home-v3__fabrication .home-v3__empty-feed a {
    color: #78aaff;
}

.home-v3__models-briefing aside .block {
    background: #f4f6f8;
    padding: 24px;
}

.home-v3-briefing h2 {
    font-size: 24px;
    margin: 4px 0 16px;
}

.home-v3-briefing > span {
    color: #e84142;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.home-v3-briefing ul {
    margin: 0;
    padding-left: 18px;
}

.home-v3-briefing li {
    padding: 9px 0;
    border-bottom: 1px solid #dfe3e8;
}

.home-v3__video {
    background: #171a1f;
    color: #fff;
}

.home-v3__video .home-v3__heading h2,
.home-v3__video .post-title a {
    color: #fff;
}

.home-v3__newsletter {
    padding-top: 34px;
    padding-bottom: 46px;
}

.home-v3__newsletter .block {
    border-radius: 10px;
    background: linear-gradient(120deg, #185fec, #12377c);
    color: #fff;
    padding: 38px 30px;
    text-align: center;
}

.home-v3__newsletter .block h2,
.home-v3__newsletter .block p,
.home-v3__newsletter .block .description,
.home-v3__newsletter .block label {
    color: #fff;
}

.home-v3__newsletter input[type="text"],
.home-v3__newsletter input[type="email"] {
    max-width: 620px;
}

.home-v3-promo {
    min-height: 190px;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.home-v3-promo__slide {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 24px 30px;
    opacity: 0;
    animation: home-v3-promo-cycle 40s infinite;
}

.home-v3-promo__slide:nth-child(1) { animation-delay: 0s; }
.home-v3-promo__slide:nth-child(2) { animation-delay: 10s; }
.home-v3-promo__slide:nth-child(3) { animation-delay: 20s; }
.home-v3-promo__slide:nth-child(4) { animation-delay: 30s; }
.home-v3-promo__slide--sparkfun {
    display: grid;
    grid-template-columns: 165px minmax(0, 1fr) 225px;
    gap: 24px;
    padding: 15px 24px;
    border-top: 5px solid #5aa4b3;
    background: #f1f3f2;
    color: #243f46;
}
.home-v3-promo__slide--sparkfun::before {
    content: '';
    position: absolute;
    inset: 0 0 0 auto;
    width: 25%;
    background: #22434b;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
.home-v3-promo__sparkfun-brand,
.home-v3-promo__sparkfun-copy,
.home-v3-promo__sparkfun-product {
    position: relative;
    z-index: 1;
}
.home-v3-promo__sparkfun-brand img {
    display: block;
    width: 100%;
    height: auto;
}
.home-v3-promo__sparkfun-copy small {
    color: #447984;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}
.home-v3-promo__slide--sparkfun .home-v3-promo__sparkfun-copy strong {
    margin: 4px 0 7px;
    color: #243f46;
    font-size: clamp(19px, 2vw, 26px);
    line-height: 1.12;
}
.home-v3-promo__sparkfun-offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 5px;
}
.home-v3-promo__sparkfun-offer code {
    display: inline-block;
    padding: 4px 8px;
    border: 1px dashed #c7483f;
    border-radius: 3px;
    background: #fff;
    color: #a92e2c;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .04em;
    user-select: all;
}
.home-v3-promo__sparkfun-offer a {
    display: inline-block;
    padding: 6px 11px;
    border-radius: 3px;
    background: #243f46;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}
.home-v3-promo__sparkfun-offer a:hover,
.home-v3-promo__sparkfun-offer a:focus {
    background: #bd3b35;
    color: #fff;
}
.home-v3-promo__sparkfun-copy p {
    margin: 0;
    color: #40545a;
    font-size: 11px;
    line-height: 1.4;
}
.home-v3-promo__sparkfun-product {
    display: block;
    width: 100%;
    max-height: 145px;
    object-fit: contain;
}
.home-v3-promo__slide--jlc3dp { background: linear-gradient(120deg, #164f82, #198bd1); }
.home-v3-promo__slide--pcbway { background: linear-gradient(120deg, #155b42, #3ca269); }
.home-v3-promo__slide--seeed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 41%;
    gap: 22px;
    padding: 17px 28px;
    border-top: 5px solid #94c91a;
    background: radial-gradient(circle at 75% 20%, #1461ad 0, transparent 42%), linear-gradient(110deg, #001925, #07365d 75%, #105294);
    color: #fff;
}
.home-v3-promo__slide--seeed::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .17;
    background: repeating-radial-gradient(circle at 68% 10%, transparent 0 16px, #79bbd9 17px 18px, transparent 19px 32px);
    pointer-events: none;
}
.home-v3-promo__seeed-copy,
.home-v3-promo__seeed-product {
    position: relative;
    z-index: 1;
}
.home-v3-promo__seeed-copy small {
    color: #b5dc57;
    font-weight: 800;
}
.home-v3-promo__slide--seeed .home-v3-promo__seeed-copy strong {
    margin: 4px 0 7px;
    color: #fff;
    font-size: clamp(22px, 2.2vw, 29px);
    line-height: 1.12;
}
.home-v3-promo__seeed-copy > span {
    max-width: 580px;
    color: #d7e7f1;
    font-size: 13px;
    line-height: 1.4;
}
.home-v3-promo__seeed-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 12px;
}
.home-v3-promo__seeed-actions a {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    background: #95cc1f;
    color: #102331;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}
.home-v3-promo__seeed-actions a:hover,
.home-v3-promo__seeed-actions a:focus {
    background: #b8e457;
    color: #102331;
}
.home-v3-promo__seeed-actions span {
    color: #c6d5df;
    font-size: 10px;
}
.home-v3-promo__seeed-product {
    display: block;
    width: 100%;
    max-height: 150px;
    object-fit: contain;
    object-position: center;
}

.home-v3-promo__slide small,
.home-v3-promo__slide strong,
.home-v3-promo__slide span {
    display: block;
}

.home-v3-promo__slide small {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-v3-promo__slide strong {
    font-size: 28px;
    margin: 2px 0;
}

.home-v3-promo__cta {
    flex: 0 0 auto;
    background: #fff;
    color: #20242a;
    padding: 12px 18px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 3px;
}

.home-v3-promo__cta:hover,
.home-v3-promo__cta:focus {
    color: #1261f5;
    text-decoration: none;
}

@keyframes home-v3-promo-cycle {
    0%, 24.9% { opacity: 1; }
    25%, 100% { opacity: 0; }
}

.home-v3-promo:hover .home-v3-promo__slide,
.home-v3-promo:focus-within .home-v3-promo__slide {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .home-v3-promo__slide { animation: none; opacity: 0; }
    .home-v3-promo__slide:first-child { opacity: 1; }
}

@media (max-width: 991px) {
    .home-v3-promo { min-height: 235px; }
    .home-v3-promo__slide--sparkfun {
        grid-template-columns: 115px minmax(0, 1fr) 140px;
        gap: 16px;
    }
    .home-v3-promo__slide--seeed { grid-template-columns: minmax(0, 1fr) 35%; }
    .home-v3__hero .view-homepage-featured .slider-2 {
        grid-template-columns: minmax(0, 50%) minmax(0, 50%);
    }
    .home-v3__hero .view-homepage-featured .post-content {
        width: auto;
    }
    .home-v3__learn-review .home-v3__reviews,
    .home-v3__models-briefing aside {
        margin-top: 28px;
    }
}

@media (max-width: 767px) {
    .home-v3__section { padding: 20px 0; }
    .home-v3__heading--split { align-items: flex-start; flex-direction: column; }
    .home-v3__hero .view-homepage-featured .slider-2 {
        grid-template-columns: 1fr;
        grid-template-rows: 260px auto;
        min-height: 0;
        height: auto;
    }
    .home-v3__hero .view-homepage-featured .post-thumbnail,
    .home-v3__hero .view-homepage-featured .post-thumbnail > div,
    .home-v3__hero .view-homepage-featured .post-thumbnail img {
        min-height: 260px;
        height: 260px;
    }
    .home-v3__hero .view-homepage-featured .post-thumbnail {
        grid-column: 1;
        grid-row: 1;
    }
    .home-v3__hero .view-homepage-featured .post-content {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        min-height: 0;
    }
    .home-v3__hero .view-homepage-featured .slider-2::before {
        top: 18px;
        left: 18px;
        padding: 10px 12px;
        font-size: 10px;
    }
    .home-v3__hero .view-homepage-featured .content-inner {
        padding: 32px 26px 110px;
    }
    .home-v3__hero .view-homepage-featured .post-meta {
        margin-bottom: 16px;
        font-size: 11px;
    }
    .home-v3__hero .view-homepage-featured .post-title { font-size: clamp(25px, 7vw, 31px); }
    .home-v3__hero .view-homepage-featured .post-body {
        display: block;
        max-height: none;
        font-size: 15px;
    }
    .home-v3__hero .view-homepage-featured .post-action {
        display: block;
    }
    .home-v3__hero .view-homepage-featured .owl-dots {
        right: auto;
        bottom: 34px;
        left: 26px;
        width: calc(100% - 52px);
    }
    .home-v3-promo__slide { align-items: flex-start; flex-direction: column; gap: 10px; padding: 18px; }
    .home-v3-promo { min-height: 350px; }
    .home-v3-promo__slide--sparkfun {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 120px;
        grid-template-rows: 95px auto;
        align-content: start;
        gap: 10px 14px;
        padding: 16px;
    }
    .home-v3-promo__slide--sparkfun::before {
        inset: 0 0 auto auto;
        width: 42%;
        height: 126px;
    }
    .home-v3-promo__sparkfun-brand { grid-column: 1; grid-row: 1; width: 140px; }
    .home-v3-promo__sparkfun-copy { grid-column: 1 / -1; grid-row: 2; }
    .home-v3-promo__sparkfun-product { grid-column: 2; grid-row: 1; height: 95px; }
    .home-v3-promo__slide--sparkfun .home-v3-promo__sparkfun-copy strong { font-size: 21px; }
    .home-v3-promo__slide--seeed {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 115px;
        gap: 12px;
        padding: 16px;
    }
    .home-v3-promo__slide--seeed .home-v3-promo__seeed-copy strong { font-size: 22px; }
    .home-v3-promo__seeed-copy > span { font-size: 12px; }
    .home-v3-promo__seeed-actions { margin-top: 9px; }
    .home-v3-promo__seeed-product { height: 115px; max-height: 115px; }
    .home-v3__section-links { margin-top: 2px; }
}

/* Product overview photo gallery: photos side by side, hover to enlarge, click for full size. */
.node--type-article .field--name-body .tmwb-product-overview__photos .field__items {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.node--type-article .field--name-body .tmwb-product-overview__photos .field__item {
    position: relative;
    flex: 1 1 260px;
    max-width: calc(50% - 8px);
}

.node--type-article .field--name-body .tmwb-product-overview__photos .field__item:only-child {
    flex: 0 1 480px;
    max-width: 480px;
}

.node--type-article .field--name-body .tmwb-product-overview__photos img,
.node--type-article .field--name-body .tmwb-buy-card__photo img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 8px;
    background: #fff;
}

.node--type-article .field--name-body .tmwb-product-overview__photos a {
    display: block;
    text-decoration: none;
}

.node--type-article .field--name-body .tmwb-product-overview__photos img {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.node--type-article .field--name-body .tmwb-product-overview__photos .field__item:first-child {
    transform-origin: left center;
}

.node--type-article .field--name-body .tmwb-product-overview__photos .field__item:last-child:not(:first-child) {
    transform-origin: right center;
}

@media (hover: hover) and (min-width: 601px) {
    .node--type-article .field--name-body .tmwb-product-overview__photos .field__item:hover {
        z-index: 5;
    }

    .node--type-article .field--name-body .tmwb-product-overview__photos .field__item:first-child:hover img {
        transform: scale(1.7);
        transform-origin: left center;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    }

    .node--type-article .field--name-body .tmwb-product-overview__photos .field__item:last-child:not(:first-child):hover img {
        transform: scale(1.7);
        transform-origin: right center;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    }

    .node--type-article .field--name-body .tmwb-product-overview__photos .field__item:only-child:hover img {
        transform: scale(1.35);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    }
}

@media (max-width: 600px) {
    .node--type-article .field--name-body .tmwb-product-overview__photos .field__item,
    .node--type-article .field--name-body .tmwb-product-overview__photos .field__item:only-child {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Pinout diagram sub-heading under each board in the board guide. */
.node--type-article .field--name-body h4.tmwb-pinout-heading {
    margin: 28px 0 14px;
    color: #111;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

.node--type-article .field--name-body img[src*="/pinouts/"] {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 0 8px;
}

/* Datasheet button shown above each board's pinout in the board guide. */
.node--type-article .field--name-body p.tmwb-datasheet {
    margin: 18px 0;
}

.node--type-article .field--name-body a.tmwb-datasheet__button {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 8px;
    background: #105efb;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.node--type-article .field--name-body a.tmwb-datasheet__button:hover,
.node--type-article .field--name-body a.tmwb-datasheet__button:focus {
    background: #0a3fa8;
    color: #fff;
    text-decoration: none;
}

/* Legacy board photos in the board guide: side by side, hover to enlarge. */
.node--type-article .field--name-body .tmwb-legacy-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    margin: 12px 0 4px;
}

.node--type-article .field--name-body .tmwb-legacy-photos img {
    display: block;
    flex: 0 1 calc(50% - 8px);
    width: auto;
    max-width: calc(50% - 8px);
    max-height: 420px;
    height: auto;
    margin: 0;
    border-radius: 8px;
    background: #fff;
    object-fit: contain;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.node--type-article .field--name-body .tmwb-legacy-photos img:only-child {
    flex: 0 1 480px;
    max-width: 480px;
}

@media (hover: hover) and (min-width: 601px) {
    .node--type-article .field--name-body .tmwb-legacy-photos img:hover {
        position: relative;
        z-index: 5;
        transform: scale(1.5);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    }
}

@media (max-width: 600px) {
    .node--type-article .field--name-body .tmwb-legacy-photos img,
    .node--type-article .field--name-body .tmwb-legacy-photos img:only-child {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   Contact form layout fixes.
   template.css forces #edit-name, #edit-mail and .js-form-item-mail to a fixed
   45px grey bar. That suits a bare input, but the email wrapper holds a label
   plus an input (visitors), and for logged-in users the name/email wrappers
   hold a label plus plain text, so content overflowed into the next field.
   ========================================================================== */
body .contact-message-form .js-form-item-mail {
  height: auto;
  line-height: inherit;
  background: none;
  padding-left: 0;
}
body .contact-message-form div#edit-name,
body .contact-message-form div#edit-mail {
  height: auto;
  line-height: 1.6;
  padding: 12px 15px;
  background: #F6F6F6;
}
body .contact-message-form div#edit-name label,
body .contact-message-form div#edit-mail label {
  margin-bottom: 4px;
}

/* Intro copy above the form (tmwb_contact). */
.tmwb-contact-intro {
  margin-bottom: 30px;
}
.tmwb-contact-intro p {
  margin-bottom: 14px;
}
.tmwb-contact-intro ul {
  list-style: disc;
  margin: 0 0 14px;
  padding-left: 22px;
}
.tmwb-contact-intro li {
  margin-bottom: 8px;
}


/* "Yellow" category tags (Workshop & Tools): the theme's #F4EC4D fails contrast on white and under white flag text.
   Use a deep amber everywhere (flags and text on light backgrounds) and a light amber for text on dark backgrounds. */
.post-block .post-categories.yellow,
.post-block .post-categories.yellow a { color: #b45309; }
.post-block .post-categories.yellow:after { background: #b45309; color: #b45309; }
.category-background .post-categories.yellow a { background: #b45309; color: #fff; }
.category-background .post-categories.yellow a:after { border-bottom-color: #b45309; border-right-color: #b45309; }
.tmwb-news-archive .post-block .post-categories.yellow,
.tmwb-news-archive .post-block .post-categories.yellow a,
.home-v3__fabrication .post-block .post-categories.yellow,
.home-v3__fabrication .post-block .post-categories.yellow a { color: #fdba74; }