/* =========================================================================
   WW1AHT MASTER — WIDGETS
   The theme's custom widgets, brought onto the tokens. Wrapper markup comes
   from setup-widget-areas.php (.content-widget / .widget-header /
   .widget-title.ribbon / .ribbon-line / .trench-widget).
   ========================================================================= */

.content-widget {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-lg); margin-bottom: var(--space-lg);
}
.widget-header { margin-bottom: var(--space-md); }
.widget-title, .widget-title.ribbon {
  font-family: var(--font-heading); font-weight: var(--fw-heading); color: var(--primary);
  font-size: 1.4rem; margin: 0;
}
.ribbon-line { height: 2px; width: 56px; background: var(--accent); margin-top: 6px; }
.content-widget a { color: var(--accent-ink); text-decoration: none; }
.content-widget a:hover { color: var(--primary); }
.content-widget ul { list-style: none; margin: 0; padding: 0; }
.content-widget li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.content-widget li:last-child { border-bottom: 0; }
.content-widget img { border-radius: var(--radius); }
.full-width-widget { grid-column: 1 / -1; }

/* Footer "trench" widgets (dark background) */
.trench-widget { color: var(--bg); }
.trench-widget .widget-title { color: var(--accent); }
.trench-widget .ribbon-line { background: var(--accent); }
.trench-widget a { color: var(--accent); }
.trench-widget li { border-bottom-color: rgba(255, 255, 255, 0.14); }

/* YouTube / Facebook feed embeds */
.content-widget iframe { max-width: 100%; border-radius: var(--radius); }

/* =========================================================================
   YOUTUBE FEED WIDGET
   The widget emits its own markup; these are the styles the theme was
   missing, which is why it previously rendered as an unstyled stack of
   full-size thumbnails. Token-driven, so it re-skins with the palette and
   matches the card grid used elsewhere.
   ========================================================================= */

/* Homepage widget band — full-width blocks stacked one above the other. */
.home-widgets { padding-block: var(--space-xl); }
.home-widget { min-width: 0; }
.home-widget + .home-widget { margin-top: var(--space-xl); }
.home-widgets .section-head { margin-bottom: var(--space-md); }
.home-widgets .section-head h2 { font-size: 1.4rem; margin: 0; }

.youtube-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
}

.youtube-mini {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur-menu) var(--ease), box-shadow var(--dur-menu) var(--ease);
}
.youtube-mini:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12); }

/* Widget hides overflow items with this class until Load More is pressed. */
.youtube-mini.hidden,
.youtube-mini[style*="display: none"] { display: none; }

.youtube-mini a { text-decoration: none; color: inherit; display: block; }

.youtube-mini img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.youtube-mini-title {
  margin: 0;
  padding: 12px 14px 14px;
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--primary);
}
.youtube-mini a:hover .youtube-mini-title { color: var(--accent-ink); }

.youtube-loadmore-wrap { margin-top: var(--space-md); text-align: center; }

/* Match the system ghost button without touching the widget's markup. */
.youtube-loadmore {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  line-height: 1.2;
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 16px;
  cursor: pointer;
  transition: background var(--dur-menu) var(--ease), color var(--dur-menu) var(--ease);
}
.youtube-loadmore:hover { background: var(--bg); }

/* -------------------------------------------------------------------------
   TOP POSTS (Latest News) WIDGET
   Another widget the theme carried over without any styles.
   ------------------------------------------------------------------------- */

.ww1-top-posts-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-md); }

.ww1-top-post-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur-menu) var(--ease), box-shadow var(--dur-menu) var(--ease);
}
.ww1-top-post-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12); }

.ww1-top-post-thumb { display: block; }
.ww1-top-post-thumb img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
}

.ww1-top-post-title { margin: 0; padding: 12px 14px 0; font-size: 1rem; line-height: 1.35; }
.ww1-top-post-title a { color: var(--primary); text-decoration: none; }
.ww1-top-post-title a:hover { color: var(--accent-ink); }

.ww1-top-post-excerpt {
  margin: 6px 0 0; padding: 0 14px 14px;
  font-size: 0.86rem; line-height: 1.55; color: var(--muted);
}

/* Shared "Load More" button used by both the top-posts and youtube widgets. */
.ww1-top-posts-loadmore {
  display: inline-block; margin-top: var(--space-md);
  font-family: var(--font-body); font-size: 0.95rem; font-weight: var(--fw-semibold);
  letter-spacing: 0.02em; line-height: 1.2;
  background: var(--surface); color: var(--primary);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 16px; cursor: pointer;
  transition: background var(--dur-menu) var(--ease), color var(--dur-menu) var(--ease);
}
.ww1-top-posts-loadmore:hover { background: var(--bg); }

/* -------------------------------------------------------------------------
   WOOCOMMERCE PRODUCTS LIST (Shop Items)
   WC_Widget_Products emits ul.product_list_widget.
   ------------------------------------------------------------------------- */

.home-widget .product_list_widget { list-style: none; margin: 0; padding: 0; }
.home-widget .product_list_widget li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.home-widget .product_list_widget li:last-child { border-bottom: 0; }
.home-widget .product_list_widget img {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: var(--radius); flex: 0 0 auto;
}
.home-widget .product_list_widget a {
  color: var(--primary); text-decoration: none;
  font-size: 0.92rem; line-height: 1.35; font-weight: var(--fw-semibold);
}
.home-widget .product_list_widget a:hover { color: var(--accent-ink); }
.home-widget .product_list_widget .amount { color: var(--accent-ink); font-weight: var(--fw-semibold); }
.home-widget .product_list_widget del .amount { color: var(--muted); font-weight: 400; }


/* -------------------------------------------------------------------------
   SHOP ITEMS WIDGET
   Carries the curation the old theme hardcoded into front-page.php, restyled
   from the theme's tokens to match the card system.
   ------------------------------------------------------------------------- */

.ww1-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

.ww1-shop-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur-menu) var(--ease), box-shadow var(--dur-menu) var(--ease);
}
.ww1-shop-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12); }

.ww1-shop-card__img { display: block; }
.ww1-shop-card__img img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
}

.ww1-shop-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }

.ww1-shop-card__title { margin: 0; font-size: 0.98rem; line-height: 1.35; }
.ww1-shop-card__title a { color: var(--primary); text-decoration: none; }
.ww1-shop-card__title a:hover { color: var(--accent-ink); }

.ww1-shop-card__price { margin-top: auto; color: var(--accent-ink); font-weight: var(--fw-semibold); font-size: 0.92rem; }
.ww1-shop-card__price del { color: var(--muted); font-weight: 400; margin-right: 5px; }
.ww1-shop-card__price ins { text-decoration: none; }

.ww1-shop-footer { margin-top: var(--space-md); }