/*
 * Beauty blog presentation layer.
 *
 * This file is intentionally scoped to ybc_blog markup. It changes only the
 * presentation and leaves the module's links, forms, data attributes and
 * JavaScript hooks untouched.
 */

/*
 * Shared geometry.
 *
 * The breadcrumb is rendered by the theme layout (hummingbird
 * templates/_partials/breadcrumb.tpl) inside its own Bootstrap .container,
 * i.e. OUTSIDE the module markup. Both boxes are horizontally centred, but
 * they used to have different widths (1320 vs 1539) and gutters, which made
 * "Home / Blog" visibly out of line with the content below. Everything that
 * must line up reads these two variables.
 */
body.ybc_blog {
  --beauty-blog-maxw: 1539px;
  --beauty-blog-gutter: 30px;
}

/* Breadcrumb box == content box (blog list, category, tag, detail pages) */
body.ybc_blog .breadcrumb__wrapper {
  margin-bottom: 0;
}

body.ybc_blog .breadcrumb__wrapper > .container {
  box-sizing: border-box;
  width: min(var(--beauty-blog-maxw), 100%);
  max-width: none;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--beauty-blog-gutter);
  padding-left: var(--beauty-blog-gutter);
}

body.ybc_blog .breadcrumb-item + .breadcrumb-item::before {
  content: ">" !important;
}

/* The article title is already the page H1; keep detail breadcrumbs concise. */
body.ybc_blog.ybc-blog-detail-page .breadcrumb-item:last-child,
body.ybc_blog:has(.ybc-blog-wrapper-detail) .breadcrumb-item:last-child {
  display: none;
}

.ybc-blog-wrapper,
.ybc-blog-wrapper-detail,
.page_home,
.page_home_gallery {
  --beauty-pink: #eba2ab;
  --beauty-pink-strong: #c34f67;
  --beauty-blush: #fff5f6;
  --beauty-hero-bg: #ffe9ee;
  --beauty-rose-soft: #ffd6e1;
  --beauty-border: #f0dadd;
  --beauty-text: #222428;
  --beauty-muted: #777;
  color: var(--beauty-text);
  font-family: "Josefin Sans", sans-serif;
}

.ybc-blog-wrapper-blog-list {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.ybc-blog-wrapper-blog-list .page-heading.product-listing {
  margin: 0;
  padding: 48px 24px 10px;
  color: var(--beauty-text);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: .02em;
  text-align: center;
  text-transform: none;
}

/* The legacy slideshow is rendered before the post list. Hide it on the blog
 * landing page so its fallback slides cannot create a duplicate hero; the
 * themed hero below takes over. */
.ybc-blog-wrapper-blog-list.ybc-page-home > .bybc-blog-slider {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ybc-blog-wrapper-blog-list .blog-category-desc {
  max-width: 760px;
  margin: 0 auto 38px;
  padding: 0 24px 54px;
  color: var(--beauty-muted);
  font-size: 17px;
  line-height: 1.75;
  text-align: center;
}

.ybc-blog-wrapper-blog-list .blog-category .ybc_item_img {
  overflow: hidden;
  border-radius: 18px;
}

.ybc-blog-wrapper-blog-list .blog-category .ybc_item_img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.ybc-blog-wrapper-blog-list .blog-category.has-blog-image .page-heading.product-listing {
  padding-top: 26px;
}

/* ------------------------------------------------------------------ *
 * Blog landing composition (hero + featured + grid).
 * Theme-only layer: the module still supplies the post loop, links,
 * metadata and interaction data attributes.
 * ------------------------------------------------------------------ */
/* Blog pages run full width, matching the homepage sections
 * (the homepage blocks span the whole viewport width). */
body.ybc_blog .columns-container.container {
  max-width: none;
}

.beautys-blog-list {
  width: min(var(--beauty-blog-maxw), 100%);
  max-width: none;
  box-sizing: border-box;
  /* module CSS resets margins to 0 — force the auto centering back */
  margin-left: auto !important;
  margin-right: auto !important;
  /*
   * modules/ybc_blog/views/css/author.css sets
   *   #content-wrapper .ybc-blog-wrapper { padding: 30px }
   * which outranks this rule and would flatten the vertical rhythm to 30px
   * on all four sides — pin our values.
   *
   * No top padding at all: the breadcrumb sits in its own box directly
   * above, so the hero starts right where the breadcrumb ends.
   */
  padding: 0 var(--beauty-blog-gutter) 72px !important;
}

/* Hero banner */
.beautys-blog-list .beautys-blog-hero {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  min-height: 380px;
  overflow: hidden;
  margin: 0 0 64px;
  border-radius: 4px;
  background: var(--beauty-hero-bg);
}

.beautys-blog-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(34px, 5vw, 72px);
}

.beautys-blog-hero__copy h1 {
  max-width: 400px;
  margin: 0;
  color: var(--beauty-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 3.6vw, 50px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.beautys-blog-hero__tagline {
  max-width: 380px;
  margin: 20px 0 30px;
  color: #6b6d73;
  font-size: 16px;
  line-height: 1.6;
}

.beautys-blog-hero__button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  border-radius: 3px;
  background: var(--beauty-pink-strong);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .2s ease, transform .2s ease;
}

.beautys-blog-hero__button:hover {
  background: #a83c55;
  color: #fff;
  transform: translateY(-1px);
}

.beautys-blog-hero__image {
  display: block;
  min-height: 380px;
  overflow: hidden;
}

.beautys-blog-hero__image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

/* Category filter row below the journal hero.  Links remain the module's
 * native category URLs; this layer only gives them the compact tab treatment
 * used by the reference layout. */
.beautys-blog-category-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 42px;
  margin: 0 0 58px;
  border-bottom: 1px solid #f2e8ea;
  padding: 0 0 14px;
}

.beautys-blog-category-nav__link {
  position: relative;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  color: var(--beauty-text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.beautys-blog-category-nav__link:hover,
.beautys-blog-category-nav__link:focus-visible,
.beautys-blog-category-nav__link.is-active {
  color: var(--beauty-pink-strong);
  text-decoration: none;
}

.beautys-blog-category-nav__link.is-active::after {
  position: absolute;
  right: 0;
  bottom: -15px;
  left: 0;
  height: 2px;
  background: var(--beauty-pink-strong);
  content: "";
}

@media (max-width: 575px) {
  .beautys-blog-category-nav {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0 28px;
    overflow-x: auto;
    margin: 0 -16px 42px;
    padding: 0 16px 12px;
    scrollbar-width: none;
  }

  .beautys-blog-category-nav::-webkit-scrollbar {
    display: none;
  }

  .beautys-blog-category-nav__link {
    flex: 0 0 auto;
    font-size: 12px;
  }
}

/* Centred section heading + lotus divider, matching the
 * "Find your beauty match" / "Special Collection" pattern on the homepage.
 * The wrapper centres everything; the title is a flex row with a bold lead
 * ("FEATURED" / "LATEST") followed by a lighter word; the divider is the
 * same SVG the homepage uses, kept in the theme's own assets/img. */
.beautys-blog-section-heading {
  display: block;
  margin: 0 0 40px;
  text-align: center;
}

.beautys-blog-section-heading__title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 17px;
  margin: 0;
  color: var(--beauty-text);
  font-family: "Josefin Sans", sans-serif;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.beautys-blog-section-heading__title strong {
  font-weight: 600;
}

.beautys-blog-section-heading__divider {
  display: block;
  width: 275px;
  max-width: 80%;
  height: 30px;
  margin: 16px auto 0;
}

.beautys-blog-list > .beautys-blog-section-heading--latest {
  margin: 56px 0 40px;
}

/* Sort dropdown (kept from the module) */
.beautys-blog-list .beautys-blog-sort {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 20px;
  color: var(--beauty-muted);
  font-size: 13px;
}

.beautys-blog-list .beautys-blog-sort select {
  min-height: 36px;
  min-width: 170px;
  padding: 0 12px;
  border: 1px solid var(--beauty-border);
  border-radius: 3px;
  background: #fff;
  color: var(--beauty-text);
}

/* Featured article card: image left, copy right. */
.beautys-featured-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: stretch;
  margin: 0 0 14px;
}

.beautys-featured-card__media {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 773 / 348;
  background: var(--beauty-blush);
}

.beautys-featured-card__media img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  transition: transform .35s ease;
}

.beautys-featured-card:hover .beautys-featured-card__media img {
  transform: scale(1.02);
}

.beautys-featured-card__body {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.beautys-featured-card__cat {
  margin: 0 0 20px;
  color: var(--beauty-pink-strong);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.beautys-featured-card__cat a {
  color: inherit;
  text-decoration: none;
}

.beautys-featured-card__cat a + a::before {
  margin: 0 6px;
  color: var(--beauty-pink);
  content: ",";
}

.beautys-featured-card__title {
  margin: 0 0 20px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 500;
  line-height: 1.18;
}

.beautys-featured-card__title a {
  color: var(--beauty-text);
  text-decoration: none;
}

.beautys-featured-card__title a:hover {
  color: var(--beauty-pink-strong);
}

.beautys-featured-card__meta {
  margin: 0 0 20px;
  color: var(--beauty-muted);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.beautys-featured-card__excerpt {
  max-width: 480px;
  margin: 0 0 24px;
  color: #55575d;
  font-size: 15px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.beautys-featured-card__more {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  color: var(--beauty-pink-strong);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}

.beautys-featured-card__more:hover {
  color: #a83c55;
  text-decoration: none;
}

/* Latest articles grid: three equal cards on desktop, then two and one on
 * narrower screens. */
.beautys-blog-list > .ybc-blog-list {
  display: flex !important;
  flex-wrap: wrap;
  /*
   * flex-start, not center: with fewer cards than columns (the home page
   * reserves the newest post for the Featured card) centring leaves them
   * floating in the middle and reads as a "two column" layout.
   */
  justify-content: flex-start;
  gap: 44px 26px;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ybc-blog-list > li {
  float: none !important;
  /* three cards per row */
  width: calc(33.333% - 17.33px) !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.ybc-blog-list .post-wrapper {
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.ybc-blog-list .post-wrapper > .ybc_item_img {
  float: none !important;
  display: block !important;
  height: auto !important;
  width: 100% !important;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  background: var(--beauty-blush);
}

/* The module's lazy-load CSS sets img{position:absolute;height:0} and relies
 * on an inline SVG placeholder; the grid relies on aspect-ratio instead. */
.ybc-blog-list .post-wrapper > .ybc_item_img svg {
  display: none !important;
}

.ybc-blog-list .post-wrapper > .ybc_item_img img {
  position: static !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  opacity: 1 !important;
  object-fit: cover;
  transition: transform .35s ease;
}

.ybc-blog-list .post-wrapper:hover > .ybc_item_img img {
  transform: scale(1.03);
}

.ybc-blog-list .ybc-blog-wrapper-content {
  float: none !important;
  clear: both;
  display: block;
  height: auto !important;
  min-height: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 100% !important;
  padding: 16px 0 0 !important;
}

/* Give the copy inside each article card a comfortable inset. The image can
   stay edge-to-edge while the category, title, metadata and Read More link
   no longer sit directly against the hover border. */
.beautys-blog-list .ybc-blog-list .ybc-blog-wrapper-content {
  padding: 16px 16px 20px !important;
  box-sizing: border-box;
}

/* AJAX load-more cards use the module's lazy-load class as well.  The module
 * stylesheet gives that image link height:100%, which can push the title
 * below the visible card.  Keep the same square media and visible copy for
 * both the initial render and cards appended by the load-more request. */
.beautys-blog-list .ybc-blog-list > li .post-wrapper > .ybc_item_img + .ybc-blog-wrapper-content {
  clear: both;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.ybc-blog-list .ybc-blog-categories {
  margin: 0 0 8px;
  color: var(--beauty-pink-strong);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ybc-blog-list .ybc-blog-categories .be-label {
  display: none;
}

.ybc-blog-list .ybc-blog-categories a {
  color: inherit;
  text-decoration: none;
}

.ybc-blog-list .ybc-blog-categories a + a::before {
  margin: 0 6px;
  color: var(--beauty-pink);
  content: ",";
}

.ybc-blog-list .ybc_title_block {
  display: block;
  float: none !important;
  min-height: 46px; /* two title lines keep the meta rows aligned across cards */
  color: var(--beauty-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  text-transform: none !important;
  text-decoration: none !important;
}

.ybc-blog-list .ybc_title_block:hover {
  color: var(--beauty-pink-strong);
}

.ybc-blog-list .ybc-blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 10px 0 0;
  color: var(--beauty-muted);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ybc-blog-list .ybc-blog-card-meta > span {
  white-space: nowrap;
}

.ybc-blog-list .ybc-blog-card-rating {
  color: var(--beauty-pink-strong);
}

/* Like button keeps the module's JS hooks; presentation only. */
.ybc-blog-list .ybc-blog-like-span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 10px 0 0;
  color: var(--beauty-pink-strong);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.ybc-blog-list .ybc-blog-like-span.active {
  color: #a83c55;
}

.ybc-blog-list .ybc-blog-like-span svg {
  fill: currentColor;
}

.ybc-blog-list .ybc-blog-like-span .blog-post-like-text span {
  display: none;
}

/* Editorial card footer: keep the Latest Articles action as a compact
   uppercase link with the same pink arrow treatment as the featured card. */
.beautys-blog-list .ybc-blog-list .beautys-blog-card-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: var(--beauty-pink-strong);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.beautys-blog-list .ybc-blog-list .beautys-blog-card-more:hover,
.beautys-blog-list .ybc-blog-list .beautys-blog-card-more:focus-visible {
  color: #a83c55;
  text-decoration: none;
}

.beautys-blog-list .ybc-blog-list .beautys-blog-card-more span {
  font-size: 15px;
  letter-spacing: 0;
  transition: transform .18s ease;
}

.beautys-blog-list .ybc-blog-list .beautys-blog-card-more:hover span,
.beautys-blog-list .ybc-blog-list .beautys-blog-card-more:focus-visible span {
  transform: translateX(3px);
}

/* Keep the four pieces of card copy on one rhythm. A fixed two-line title
   slot made one-line titles leave an awkward gap before the date/read-time
   row, so let each title use its natural height instead. */
.beautys-blog-list .ybc-blog-list .ybc-blog-categories {
  margin-bottom: 14px;
}

.beautys-blog-list .ybc-blog-list .ybc_title_block {
  min-height: 0;
  margin-bottom: 14px;
}

.beautys-blog-list .ybc-blog-list .ybc-blog-card-meta {
  margin-top: 0;
  margin-bottom: 14px;
}

.beautys-blog-list .ybc-blog-list .beautys-blog-card-more {
  margin-top: 0;
}

/*
 * Pagination.
 * The module's page strip is kept in the DOM — both ybc_blog's loader and the
 * theme's "load more" button read the "next" link from it — but is hidden: the
 * design shows a single rectangular button instead.
 */
.beautys-blog-list .blog-paggination {
  display: none;
}

/* Scoped, not global: head.tpl loads this stylesheet on every page. */
.beautys-blog-list [hidden] {
  display: none !important;
}

.beautys-blog-more {
  margin: 48px 0 0;
  text-align: center;
}

/* Keep the next homepage section from crowding the load-more control.  The
 * Shop the Look block has its own top padding, so this additional bottom
 * space creates a deliberate editorial pause without affecting inner-page
 * pagination or the article grid. */
.beautys-blog-list.ybc-page-home .beautys-blog-more {
  margin-bottom: 40px;
}

/* The homepage's final section should finish close to the site footer.  Keep
 * the generous spacing between content sections, but avoid an oversized blank
 * band after Shop The Look. */
.beautys-blog-list.ybc-page-home {
  padding-bottom: 24px !important;
}

.beautys-blog-list.ybc-page-home .beautys-blog-shoplook-target .beautys-featured-products {
  padding-bottom: 24px;
}

/* Category pages use the same Shop The Look product band as the homepage,
   with a clear pause after the article grid and a compact tail before the
   site footer. */
.beautys-blog-list.ybc-page-category .beautys-blog-shoplook-target {
  margin-top: 56px;
}

.beautys-blog-list.ybc-page-category .beautys-blog-shoplook-target .beautys-featured-products {
  padding-bottom: 24px;
}

.beautys-blog-list.ybc-page-category {
  padding-bottom: 24px !important;
}

/* The breadcrumb already provides the page-level separation. Keep the
   category name close to it instead of repeating the large listing offset. */
.beautys-blog-list.ybc-page-category .blog-category .page-heading.product-listing {
  padding-top: 20px;
}

.beautys-blog-list.ybc-page-category .blog-category-desc {
  margin-bottom: 0;
  padding-bottom: 8px;
}

.beautys-blog-list.ybc-page-category .blog-category {
  margin-bottom: 0;
}

.beautys-blog-list.ybc-page-category > .beautys-blog-section-heading--latest {
  margin-top: 8px;
  margin-bottom: 24px;
}

.beautys-blog-list.ybc-page-category > .beautys-blog-section-heading--latest .beautys-blog-section-heading__divider {
  margin-top: 0;
}

.beautys-blog-more__button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 42px;
  border: 0;
  border-radius: 3px;
  background: #eba2ab;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}

.beautys-blog-more__button:hover {
  background: #d77f8c;
  color: #fff;
  transform: translateY(-1px);
}

.beautys-blog-more__button:disabled,
.beautys-blog-more__button.is-loading {
  opacity: .65;
  cursor: progress;
  transform: none;
}

.beautys-blog-list .blog-paggination a,
.beautys-blog-list .blog-paggination button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin: 0 4px;
  padding: 0 26px;
  border: 1px solid var(--beauty-pink-strong);
  border-radius: 24px;
  background: var(--beauty-pink-strong);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}

.beautys-blog-list .blog-paggination a:hover,
.beautys-blog-list .blog-paggination button:hover {
  background: #a83c55;
  border-color: #a83c55;
  color: #fff;
}

/* Legacy fallback for non-home list pages (category/tag/search): same flex
 * centered layout as the home grid. */
.ybc-blog-wrapper-blog-list .ybc-blog-list {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 44px 26px;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Category pages use the same three-column card grid as the homepage. Keep a
 * short final row anchored to the first column; the legacy list rule above is
 * intentionally centered for older layouts but is not appropriate here. */
.beautys-blog-list.ybc-page-category > .ybc-blog-list {
  justify-content: flex-start;
}

/* Article detail */
.ybc-blog-wrapper-detail {
  width: min(var(--beauty-blog-maxw), 100%);
  max-width: none;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 var(--beauty-blog-gutter) 72px;
  /* author.css wins on the shorthand — keep the gutters in sync anyway
     (top padding is left to the module's 30px so the layout stays as-is) */
  padding-right: var(--beauty-blog-gutter) !important;
  padding-left: var(--beauty-blog-gutter) !important;
}

.ybc-blog-wrapper-detail .ybc_blog_img_wrapper {
  margin: 0 0 42px;
}

.ybc-blog-wrapper-detail .ybc_blog_img_wrapper img {
  display: block;
  width: 100%;
  max-height: 560px;
  border-radius: 18px;
  object-fit: cover;
}

/* Give the article hero enough presence on wide screens. */
@media (min-width: 768px) {
  .ybc-blog-wrapper-detail .ybc_blog_img_wrapper {
    width: min(100%, 1180px);
    margin-right: auto;
    margin-left: auto;
  }
}

.ybc-blog-wrapper-detail .ybc-blog-wrapper-content {
  float: none;
  width: min(100%, 1180px);
  margin: 0 auto;
}

.ybc-blog-wrapper-detail .page-heading.product-listing {
  margin: 0 0 18px;
  color: var(--beauty-text);
  font-size: 42px;
  font-weight: 600;
  line-height: 1.12;
  text-align: left;
  text-transform: none;
}

.ybc-blog-wrapper-detail .page-heading.product-listing .title_cat {
  text-transform: none !important;
}

.ybc-blog-wrapper-detail .post-details {
  margin-bottom: 34px;
}

.ybc-blog-wrapper-detail .blog-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  color: var(--beauty-muted);
  font-size: 13px;
}

.ybc-blog-wrapper-detail .blog_description {
  color: #404248;
  font-size: 17px;
  line-height: 1.8;
}

.ybc-blog-wrapper-detail .blog_description h2,
.ybc-blog-wrapper-detail .blog_description h3 {
  margin: 38px 0 14px;
  color: var(--beauty-text);
  font-weight: 600;
  line-height: 1.25;
}

.ybc-blog-wrapper-detail .blog_description blockquote {
  margin: 36px 0;
  padding: 28px 30px;
  border: 0;
  border-radius: 16px;
  background: var(--beauty-blush);
  color: var(--beauty-text);
  font-size: 22px;
  line-height: 1.5;
}

.ybc-blog-wrapper-detail .form-polls {
  margin-top: 42px;
  padding: 24px;
  border: 1px solid var(--beauty-border);
  border-radius: 16px;
  background: var(--beauty-blush);
}

.ybc-blog-wrapper-detail .polls-title {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 0;
}

.ybc-blog-wrapper-detail .polls-title > span:first-child {
  flex: 1 1 100%;
  color: var(--beauty-text);
  font-size: 17px;
  font-weight: 600;
}

.ybc-blog-wrapper-detail .polls-title label {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 22px;
  border: 1px solid var(--beauty-pink-strong);
  border-radius: 22px;
  background: var(--beauty-pink-strong);
  color: #fff;
  cursor: pointer;
}

.ybc-blog-wrapper-detail .polls-title label[for="polls_post_0"] {
  background: #fff;
  color: var(--beauty-pink-strong);
}

.ybc-blog-wrapper-detail .polls-title input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Homepage blog blocks keep the module's carousel and links, but gain the same rhythm. */
.page_home.ybc-blog,
.page_home_gallery.ybc-blog {
  padding: 30px 24px 44px;
  background: #fff;
}

.page_home .title_blog,
.page_home_gallery .title_blog {
  margin: 0 0 28px;
  color: var(--beauty-text);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .08em;
  text-align: center;
}

.page_home .title_blog::after,
.page_home_gallery .title_blog::after {
  display: block;
  width: 42px;
  height: 2px;
  margin: 13px auto 0;
  background: var(--beauty-pink);
  content: "";
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */
/* Width is capped at 1539px for both the blog home and detail pages;
 * smaller screens fall back to 100% naturally, no extra breakpoints needed. */

@media (max-width: 991px) {
  .beautys-blog-list > .ybc-blog-list,
  .ybc-blog-wrapper-blog-list .ybc-blog-list {
    gap: 38px 22px;
  }

  .beautys-blog-list > .ybc-blog-list > li,
  .ybc-blog-wrapper-blog-list .ybc-blog-list > li {
    width: calc(50% - 11px) !important;
  }

  .beautys-featured-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  }

  .beautys-blog-section-heading__title {
    font-size: 34px;
  }

  .beautys-blog-section-heading__divider {
    width: 220px;
    margin-top: 14px;
  }
}

@media (max-width: 575px) {
  .beautys-blog-list {
    padding: 20px 16px 50px;
  }

  .beautys-blog-list .beautys-blog-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    margin-bottom: 38px;
  }

  .beautys-blog-hero__copy {
    padding: 32px 24px 34px;
  }

  .beautys-blog-hero__copy h1 {
    font-size: 32px;
  }

  .beautys-blog-hero__tagline {
    font-size: 15px;
  }

  .beautys-blog-hero__image {
    min-height: 230px;
  }

  .beautys-featured-card {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .beautys-featured-card__title {
    font-size: 24px;
  }

  .beautys-blog-section-heading__title {
    gap: 7px 12px;
    font-size: 28px;
  }

  .beautys-blog-section-heading__divider {
    width: 220px;
    margin-top: 12px;
  }

  .beautys-blog-list > .ybc-blog-list,
  .ybc-blog-wrapper-blog-list .ybc-blog-list {
    gap: 34px;
  }

  .beautys-blog-list > .ybc-blog-list > li,
  .ybc-blog-wrapper-blog-list .ybc-blog-list > li {
    width: 100% !important;
  }

  .ybc-blog-list .ybc_title_block {
    min-height: 0;
  }

  .ybc-blog-wrapper-blog-list .page-heading.product-listing {
    padding: 34px 16px 10px;
    font-size: 30px;
  }

  .ybc-blog-wrapper-blog-list .blog-category-desc {
    margin-bottom: 24px;
    padding: 0 16px 36px;
    font-size: 15px;
  }

  .ybc-blog-list .ybc_title_block {
    font-size: 18px;
  }

  .ybc-blog-list .beautys-blog-sort {
    justify-content: space-between;
  }

  .ybc-blog-wrapper-detail {
    padding: 0 16px 50px;
  }

  .ybc-blog-wrapper-detail .ybc_blog_img_wrapper {
    margin-bottom: 28px;
  }

  .ybc-blog-wrapper-detail .ybc_blog_img_wrapper img {
    max-height: 300px;
    border-radius: 14px;
  }

  .ybc-blog-wrapper-detail .page-heading.product-listing {
    font-size: clamp(32px, 5vw, 44px);
  }

  .ybc-blog-wrapper-detail .blog_description {
    font-size: 16px;
    line-height: 1.72;
  }

  .ybc-blog-wrapper-detail .form-polls {
    padding: 18px;
  }

  .ybc-blog-wrapper-detail .polls-title label {
    flex: 1 1 calc(50% - 6px);
    padding: 0 14px;
  }

  .page_home,
  .page_home_gallery {
    padding-right: 16px;
    padding-left: 16px;
  }
}

/* ------------------------------------------------------------------ *
 *  Article detail — Beautys redesign (v6)
 *  Order follows the editorial design: category → title → date/read time →
 *  hero image → compact share row → body (drop cap, numbered h3,
 *  centred h2) → polls →
 *  shop-the-look band → related posts → comment form.
 * ------------------------------------------------------------------ */

/* The hero image sits inside the content column, before the compact share row. */
.ybc-blog-wrapper-detail .ybc_blog_img_wrapper.beautys-post-hero {
  margin: 8px 0 46px;
}

.ybc-blog-wrapper-detail .beautys-post-hero img {
  max-height: 620px;
  border-radius: 24px;
}

/* --- Meta row: material icons instead of the module's inline SVGs --- */
.ybc-blog-wrapper-detail .blog-extra .ybc-blog-latest-toolbar,
.ybc-blog-wrapper-detail .blog-extra .post-date,
.ybc-blog-wrapper-detail .blog-extra .author-block,
.ybc-blog-wrapper-detail #estimated-reading-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8a8a8f;
  font-size: 13.5px;
  letter-spacing: 0.01em;
}

.ybc-blog-wrapper-detail .blog-extra .ets_svg {
  display: none; /* replaced by material-icons ::before */
}

.ybc-blog-wrapper-detail .ybc-blog-latest-toolbar-views::before,
.ybc-blog-wrapper-detail .post-date .be-label::before,
.ybc-blog-wrapper-detail .author-block .post-author-label::before,
.ybc-blog-wrapper-detail #estimated-reading-time > span::before {
  font-family: 'Material Icons';
  font-size: 17px;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  color: #c34f67;
  margin-right: 5px;
}

.ybc-blog-wrapper-detail .ybc-blog-latest-toolbar-views::before { content: 'visibility'; }
.ybc-blog-wrapper-detail .post-date .be-label::before { content: 'calendar_today'; }
.ybc-blog-wrapper-detail .author-block .post-author-label::before { content: 'person_outline'; }
.ybc-blog-wrapper-detail #estimated-reading-time > span::before { content: 'schedule'; }

.ybc-blog-wrapper-detail .post-date .be-label {
  display: inline-flex;
  align-items: center;
}

.ybc-blog-wrapper-detail .post-date .be-label i.ets_svg {
  display: none;
}

.ybc-blog-wrapper-detail .author-block .post-author-label {
  display: inline-flex;
  align-items: center;
}

.ybc-blog-wrapper-detail .ybc-blog-like-span .ets_svg {
  display: none;
}

.ybc-blog-wrapper-detail .ybc-blog-like-span {
  display: inline-flex;
  align-items: center;
}

.ybc-blog-wrapper-detail .ybc-blog-like-span::before {
  font-family: 'Material Icons';
  content: 'favorite_border';
  font-size: 16px;
  color: #c34f67;
  margin-right: 5px;
}

.ybc-blog-wrapper-detail .ybc-blog-like-span.active::before {
  content: 'favorite';
}

.ybc-blog-wrapper-detail .blog-extra .blog_rating_reviews .ets_svg,
.ybc-blog-wrapper-detail .blog-extra .blog_rating_reviews i {
  display: none;
}

.ybc-blog-wrapper-detail .blog-extra .blog_rating_reviews .total_views {
  display: inline-flex;
  align-items: center;
}

.ybc-blog-wrapper-detail .blog-extra .blog_rating_reviews .total_views::before {
  font-family: 'Material Icons';
  content: 'chat_bubble_outline';
  font-size: 16px;
  color: #c34f67;
  margin-right: 5px;
}

/* Meta row: hide the "Posted on:" / "By " label words, keep values */
.ybc-blog-wrapper-detail .post-date .be-label,
.ybc-blog-wrapper-detail .author-block .post-author-label {
  color: transparent;
  position: relative;
  width: 0;
  overflow: visible;
  white-space: nowrap;
}

/* The material icon still shows via ::before on the label */
.ybc-blog-wrapper-detail .post-date .be-label::before,
.ybc-blog-wrapper-detail .author-block .post-author-label::before {
  position: absolute;
  left: 0;
}

/* Align the desktop article metadata on one shared baseline. The legacy
   stylesheet floats the date and positions its icon absolutely, which can
   detach the calendar from the date value. Give every item a fixed icon slot
   and keep the calendar immediately before the date text. */
.ybc-blog-wrapper-detail .blog-extra {
  align-items: center;
}

.ybc-blog-wrapper-detail .blog-extra .ybc-blog-latest-toolbar,
.ybc-blog-wrapper-detail .blog-extra .post-date,
.ybc-blog-wrapper-detail .blog-extra .author-block {
  float: none !important;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  line-height: 20px;
  white-space: nowrap;
}

.ybc-blog-wrapper-detail .blog-extra .ybc-blog-latest-toolbar-views {
  display: inline-flex;
  align-items: center;
  line-height: 20px;
}

/* Keep the three visible meta items evenly spaced. The module inserts an
   empty rating container when no rating/comment count is available; remove
   that placeholder so it cannot create an extra gap before the date. */
.ybc-blog-wrapper-detail .blog-extra .ybc-blog-latest-toolbar {
  gap: 18px;
}

.ybc-blog-wrapper-detail .blog-extra .ybc-blog-latest-toolbar > span:not(:last-child) {
  margin-right: 0;
}

.ybc-blog-wrapper-detail .blog-extra .ybc-blog-latest-toolbar .blog_rating_wrapper {
  display: none;
  margin: 0;
}

.ybc-blog-wrapper-detail .blog-extra .post-date {
  margin-right: 0;
}

.ybc-blog-wrapper-detail .blog-extra .ybc-blog-latest-toolbar-views > span,
.ybc-blog-wrapper-detail .blog-extra .post-date > span:not(.be-label),
.ybc-blog-wrapper-detail .blog-extra .author-block > a {
  display: inline-flex;
  align-items: center;
  line-height: 20px;
}

/* The date font's built-in metrics sit slightly higher than the other
   metadata values; nudge only the date value down to share their baseline. */
.ybc-blog-wrapper-detail .blog-extra .post-date > span:not(.be-label) {
  transform: translateY(2px);
}

.ybc-blog-wrapper-detail .post-date .be-label,
.ybc-blog-wrapper-detail .author-block .post-author-label {
  position: static;
  display: inline-flex;
  float: none;
  flex: 0 0 17px;
  align-items: center;
  width: 17px;
  min-width: 17px;
  height: 17px;
  margin-right: 5px;
  overflow: visible;
  text-indent: 0;
}

.ybc-blog-wrapper-detail .post-date .be-label::before,
.ybc-blog-wrapper-detail .author-block .post-author-label::before {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin: 0;
}

/* --- Share row: round pink-ringed icon buttons --- */
.ybc-blog-wrapper-detail .ybc-blog-tags-social .blog-extra-facebook-share ul {
  display: flex;
  gap: 10px;
  margin: 6px 0 18px;
  padding: 0;
  list-style: none;
}

.ybc-blog-wrapper-detail .ybc-blog-tags-social li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #f0c7ce;
  border-radius: 50%;
  background: #fff;
  color: #c34f67;
  font-size: 0;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.ybc-blog-wrapper-detail .ybc-blog-tags-social li a::before {
  font-family: 'Material Icons';
  font-size: 18px;
  line-height: 1;
}

.ybc-blog-wrapper-detail .ybc-blog-tags-social li.facebook a::before { content: 'facebook'; }
.ybc-blog-wrapper-detail .ybc-blog-tags-social li.twitter a::before { content: 'tag'; }
.ybc-blog-wrapper-detail .ybc-blog-tags-social li.pinterest a::before { content: 'push_pin'; }
.ybc-blog-wrapper-detail .ybc-blog-tags-social li.linkedin a::before { content: 'work'; }
.ybc-blog-wrapper-detail .ybc-blog-tags-social li.tumblr a::before { content: 'edit'; }

.ybc-blog-wrapper-detail .ybc-blog-tags-social li a:hover {
  background: #c34f67;
  border-color: #c34f67;
  color: #fff;
}

.ybc-blog-wrapper-detail .ybc-blog-tags-social li a .ets_svg {
  display: none;
}

/* --- Body typography --- */
.ybc-blog-wrapper-detail .blog_description {
  counter-reset: beautys-step;
}

/* Drop cap on the opening paragraph */
.ybc-blog-wrapper-detail .blog_description > p:first-of-type::first-letter {
  display: block;
  float: left;
  margin: 6px 14px 0 0;
  color: var(--beauty-text, #303030);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 58px;
  font-weight: 600;
  line-height: 0.85;
}

/* Numbered step headings (h3 in the post body) */
.ybc-blog-wrapper-detail .blog_description h3 {
  position: relative;
  margin: 44px 0 14px;
  padding-left: 58px;
  counter-increment: beautys-step;
}

.ybc-blog-wrapper-detail .blog_description h3::before {
  position: absolute;
  top: -4px;
  left: 0;
  color: #c34f67;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 40px;
  font-weight: 600;
  font-style: italic;
  line-height: 1;
  content: counter(beautys-step) '.';
}

/* Centred closing statement (h2 in the post body) */
.ybc-blog-wrapper-detail .blog_description h2 {
  margin: 52px 0 18px;
  color: #6d6d72;
  font-size: 24px;
  font-weight: 400;
  font-style: italic;
  text-align: center;
}

.ybc-blog-wrapper-detail .blog_description h2::after {
  display: block;
  margin: 14px auto 0;
  color: #c34f67;
  content: '♥';
}

/* Blockquote: blush panel with a strong pink side bar */
.ybc-blog-wrapper-detail .blog_description blockquote {
  position: relative;
  border-left: 4px solid #c34f67;
  border-radius: 0 16px 16px 0;
}

/* Body images: centred, rounded */
.ybc-blog-wrapper-detail .blog_description img {
  display: block;
  margin: 30px auto;
  max-width: 100%;
  border-radius: 12px;
}

/* --- Compact article helpfulness poll --- */
.ybc-blog-wrapper-detail .form-polls {
  min-height: 60px;
  margin: 44px 0 8px;
  padding: 10px 24px;
  box-sizing: border-box;
  border: 0;
  border-radius: 10px;
  background: #fff7f8;
  text-align: center;
}

.ybc-blog-wrapper-detail .polls-title {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.ybc-blog-wrapper-detail .polls-title > span:first-child {
  flex: 0 1 auto;
  margin: 0 10px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.ybc-blog-wrapper-detail .polls-title label {
  min-width: 60px;
  min-height: 36px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid #c34f67;
  border-radius: 18px;
  background: transparent !important;
  color: #c34f67 !important;
  font-size: 14px;
  font-weight: 500;
}

.ybc-blog-wrapper-detail .polls-title label[for="polls_post_1"] {
  background: transparent !important;
  color: #c34f67 !important;
  opacity: 1 !important;
}

.ybc-blog-wrapper-detail .polls-title label .ets_svg {
  display: none;
}

.ybc-blog-wrapper-detail .polls-title label > span {
  display: none;
}

.ybc-blog-wrapper-detail .polls-title label:hover,
.ybc-blog-wrapper-detail .polls-title label.checked {
  background: #c34f67 !important;
  color: #fff !important;
}

/* --- Shop-the-look band on the detail page ---
   The placeholder lives inside the 1180px reading column; break it out to
   full viewport width so the white product band matches the blog landing
   page. The band's own __inner caps the content at 1539px, centred. */
.ybc-blog-wrapper-detail {
  overflow-x: clip;
}

.ybc-blog-wrapper-detail .beautys-blog-shoplook-target {
  width: 100vw;
  margin: 56px 0 8px;
  margin-left: calc(50% - 50vw);
}

/* Keep the detail page's Shop The Look band from leaving an oversized blank
   tail before the site footer. The product cards keep their own content
   spacing; only the section's outer bottom padding and detail wrapper tail
   are tightened to match the blog homepage rhythm. */
.ybc-blog-wrapper-detail .beautys-blog-shoplook-target .beautys-featured-products {
  padding-bottom: 24px;
}

.ybc-blog-wrapper-detail {
  padding-bottom: 8px !important;
}

/* --- Related posts grid ---
   Like the Shop The Look band, this block breaks out of the 1180px reading
   column to the full page width so the cards have room to breathe. The
   module's detail_post.css hard-codes uppercase on .ybc_title_block; we
   override that here. */
.ybc-blog-wrapper-detail .ybc-blog-related-posts {
  position: relative;
  /* The detail template keeps its article column narrow. Center this band
     against the site's full content column instead of that reading column. */
  left: 50%;
  transform: translateX(-50%);
  width: min(1539px, calc(100vw - 24px));
  margin: 24px 0 0;
  margin-left: 0;
  margin-right: 0;
  padding: 32px 24px 20px;
  background: #faf6f7;
}

.ybc-blog-wrapper-detail .beautys-related-heading {
  margin-bottom: 30px;
  max-width: 1539px;
  margin-left: auto;
  margin-right: auto;
}

/* Override ybc_blog module's flex layout (detail_post.css:1272)
   which loads after this stylesheet and wins the cascade. */
.ybc-blog-wrapper-detail .ybc-blog-related-posts-list,
.ybc-blog-wrapper-detail .ybc-blog-related-posts-list.dt-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  flex-wrap: nowrap !important;
  gap: 30px 28px;
  max-width: 1539px;
  margin: 0 auto !important;
  margin-left: auto !important;
  width: 100%;
  padding: 0;
}

/* The wrapper between our section heading and the grid also needs
   to play nicely — module doesn't style it but let's be explicit. */
.ybc-blog-wrapper-detail .ybc-blog-related-posts-wrapper {
  width: 100%;
  max-width: 1539px;
  margin: 0 auto;
}

.ybc-blog-wrapper-detail .ybc-blog-related-posts-list-li {
  display: flex;
  flex-direction: column;
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* The detail page uses the module's Slick carousel for related posts. Keep
   the track inside the full-width section and let Slick control its offset. */
.ybc-blog-wrapper-detail .ybc-blog-related-posts-list.slick-initialized {
  display: block !important;
  width: 100% !important;
}

.ybc-blog-wrapper-detail .ybc-blog-related-posts-list.slick-initialized .slick-list {
  width: 100% !important;
  overflow: hidden;
}

.ybc-blog-wrapper-detail .ybc-blog-related-posts-list.slick-initialized .slick-track {
  display: flex !important;
  gap: 0;
  width: auto;
}

.ybc-blog-wrapper-detail .ybc-blog-related-posts-list.slick-initialized .slick-slide {
  float: none !important;
  height: auto;
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}

.ybc-blog-wrapper-detail .ybc-blog-related-posts.ybc_blog_carousel .slick-arrow {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #e5b8c1;
  border-radius: 50% !important;
  background: #fff;
  color: #c34f67 !important;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  transform: none;
}

.ybc-blog-wrapper-detail .ybc-blog-related-posts.ybc_blog_carousel .slick-prev {
  left: 4px;
}

.ybc-blog-wrapper-detail .ybc-blog-related-posts.ybc_blog_carousel .slick-next {
  right: 4px;
}

.ybc-blog-wrapper-detail .ybc-blog-related-posts.ybc_blog_carousel .slick-prev::before,
.ybc-blog-wrapper-detail .ybc-blog-related-posts.ybc_blog_carousel .slick-next::before {
  display: block;
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0 !important;
  transform: none !important;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  color: currentColor !important;
  font-family: Arial, sans-serif;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
  opacity: 1;
  text-indent: 0;
}

.ybc-blog-wrapper-detail .ybc-blog-related-posts.ybc_blog_carousel .slick-prev::before {
  content: '‹';
}

.ybc-blog-wrapper-detail .ybc-blog-related-posts.ybc_blog_carousel .slick-next::before {
  content: '›';
}

.ybc-blog-wrapper-detail .ybc-blog-related-posts.ybc_blog_carousel .slick-arrow:hover {
  background: #fff7f8;
}

@media (max-width: 575px) {
  .ybc-blog-wrapper-detail .ybc-blog-related-posts-list.slick-initialized .slick-slide {
    padding: 0;
  }

  .ybc-blog-wrapper-detail .ybc-blog-related-posts.ybc_blog_carousel .slick-arrow {
    width: 36px;
    height: 36px;
  }
}

.ybc-blog-wrapper-detail .ybc-blog-related-posts-list-li .ybc_item_img {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 4 / 3;
  background: #f0e8ea;
}

.ybc-blog-wrapper-detail .ybc-blog-related-posts-list-li .ybc_item_img img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
  transition: transform 320ms ease;
}

.ybc-blog-wrapper-detail .ybc-blog-related-posts-list-li:hover .ybc_item_img img {
  transform: scale(1.04);
}

.ybc-blog-wrapper-detail .beautys-related-card-content {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 16px 20px;
  box-sizing: border-box;
}

.ybc-blog-wrapper-detail .beautys-related-card-content .ybc-blog-categories {
  margin: 0 0 14px;
  color: var(--beauty-pink-strong, #c34f67);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.ybc-blog-wrapper-detail .beautys-related-card-content .ybc-blog-categories a {
  color: inherit;
  text-decoration: none;
}

.ybc-blog-wrapper-detail .beautys-related-card-content .ybc-blog-categories a + a::before {
  margin: 0 6px;
  color: var(--beauty-pink, #e6a3b1);
  content: ",";
}

.ybc-blog-wrapper-detail .ybc_title_block {
  margin: 14px 0 8px;
  color: var(--beauty-text, #303030);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}

.ybc-blog-wrapper-detail .ybc_title_block:hover {
  color: #c34f67;
}

.ybc-blog-wrapper-detail .ybc-blog-related-posts-list-li .ybc_title_block {
  display: block;
  float: none !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

.ybc-blog-wrapper-detail .beautys-related-card-content .ybc_title_block {
  min-height: 0;
  margin: 0 0 14px;
  color: var(--beauty-text, #303030);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  text-transform: none !important;
  text-decoration: none !important;
}

.ybc-blog-wrapper-detail .beautys-related-card-content .ybc_title_block:hover {
  color: var(--beauty-pink-strong, #c34f67);
}

.ybc-blog-wrapper-detail .beautys-related-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 14px;
  color: var(--beauty-muted, #777278);
  font-size: 13px;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.ybc-blog-wrapper-detail .beautys-related-card-meta > span {
  white-space: nowrap;
}

.ybc-blog-wrapper-detail .beautys-related-card-more {
  display: inline-flex;
  width: max-content;
  margin-top: auto;
  align-items: center;
  gap: 8px;
  color: var(--beauty-pink-strong, #c34f67);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.ybc-blog-wrapper-detail .beautys-related-card-more:hover,
.ybc-blog-wrapper-detail .beautys-related-card-more:focus-visible {
  color: #a83c55;
  text-decoration: none;
}

.ybc-blog-wrapper-detail .beautys-related-card-more span {
  font-size: 15px;
  letter-spacing: 0;
  transition: transform .18s ease;
}

.ybc-blog-wrapper-detail .beautys-related-card-more:hover span,
.ybc-blog-wrapper-detail .beautys-related-card-more:focus-visible span {
  transform: translateX(3px);
}

.ybc-blog-wrapper-detail .ybc-blog-sidear-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: #8a8a8f;
  font-size: 12.5px;
}

.ybc-blog-wrapper-detail .ybc-blog-sidear-post-meta .ybc-blog-categories .be-label,
.ybc-blog-wrapper-detail .ybc-blog-sidear-post-meta .post-date {
  display: none;
}

.ybc-blog-wrapper-detail .beautys-related-meta-row {
  display: flex;
  min-height: 20px;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 1px 0 16px;
}

.ybc-blog-wrapper-detail .beautys-related-meta-row .ybc-blog-sidear-post-meta {
  width: auto;
  flex: 0 1 auto;
  align-items: center;
  gap: 12px;
}

.ybc-blog-wrapper-detail .beautys-related-meta-row .ybc-blog-categories {
  margin: 0;
}

.ybc-blog-wrapper-detail .beautys-related-meta-row .post-date {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  float: none;
  margin: 0;
  color: #707077;
  font-size: 13.5px;
  font-weight: 500;
}

.ybc-blog-wrapper-detail .beautys-related-meta-row .post-date::before {
  width: 3px;
  height: 3px;
  flex: 0 0 3px;
  border-radius: 50%;
  background: #d9a4ae;
  content: "";
}

.ybc-blog-wrapper-detail .beautys-related-meta-row .ybc-blog-latest-toolbar {
  display: none;
}

.ybc-blog-wrapper-detail .ybc-blog-related-posts-list-li .ybc-blog-latest-toolbar {
  margin-top: 0;
  font-size: 12.5px;
}

.ybc-blog-wrapper-detail .ybc-blog-related-posts-list-li .blog_description {
  display: none;
}

.ybc-blog-wrapper-detail .beautys-related-meta-row .ybc-blog-latest-toolbar .ets_svg {
  display: none;
}

.ybc-blog-wrapper-detail .ybc-blog-related-posts-list-li .read_more {
  display: inline-flex;
  width: max-content;
  margin-top: auto;
  align-items: center;
  padding: 2px 0 3px;
  border-bottom: 1px solid transparent;
  color: #c34f67;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 160ms ease, color 160ms ease;
}

.ybc-blog-wrapper-detail .ybc-blog-related-posts-list-li .read_more::after {
  margin-left: 7px;
  content: "\2192";
  transition: transform 160ms ease;
}

.ybc-blog-wrapper-detail .ybc-blog-related-posts-list-li .read_more:hover,
.ybc-blog-wrapper-detail .ybc-blog-related-posts-list-li .read_more:focus-visible {
  border-color: currentColor;
  color: #a93d54;
}

.ybc-blog-wrapper-detail .ybc-blog-related-posts-list-li .read_more:hover::after,
.ybc-blog-wrapper-detail .ybc-blog-related-posts-list-li .read_more:focus-visible::after {
  transform: translateX(3px);
}

/* --- Collapsed comments --- */
.ybc-blog-wrapper-detail .ybc-comments-accordion {
  margin: 26px 0 0;
  border-top: 0;
  border-bottom: 1px solid #eadfe2;
}

.ybc-blog-wrapper-detail .ybc-comments-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  padding: 16px 0;
  border: 0;
  background: transparent;
  color: var(--beauty-text, #303030);
  font-family: 'Josefin Sans', Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.ybc-blog-wrapper-detail .ybc-comments-toggle:hover,
.ybc-blog-wrapper-detail .ybc-comments-toggle:focus-visible {
  color: #c34f67;
}

.ybc-blog-wrapper-detail .ybc-comments-toggle:focus-visible {
  outline: 2px solid #e8a7b4;
  outline-offset: 3px;
}

.ybc-blog-wrapper-detail .ybc-comments-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #c34f67;
  font-family: Arial, sans-serif;
  font-size: 23px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

.ybc-blog-wrapper-detail .ybc-comments-panel[hidden] {
  display: none !important;
}

.ybc-blog-wrapper-detail .ybc-comments-panel {
  padding: 0 0 24px;
  display: flow-root;
}

.ybc-blog-wrapper-detail .ybc-comments-empty {
  margin: 0 0 18px;
  color: #77757b;
  font-size: 14px;
}

.ybc-blog-wrapper-detail .ybc-comments-panel .ybc_comment_form_blog {
  margin: 0 0 28px;
  border: 0;
  background: transparent;
}

.ybc-blog-wrapper-detail .ybc-comments-panel .ybc_comment_form_blog .title_blog {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  font-size: 20px;
}

.ybc-blog-wrapper-detail .ybc-comments-panel .ybc_blog-comments-list {
  float: none;
  clear: both;
  margin-top: 32px;
  margin-bottom: 0;
  padding-bottom: 12px;
  border-top: 1px solid #eadfe2;
}

/* Keep the expanded comments section self-contained so its floated legacy
   children cannot overlap the following Shop The Look band. */
.ybc-blog-wrapper-detail .ybc-blog-wrapper-comment {
  display: flow-root;
  clear: both;
  width: 100%;
  margin-bottom: 56px;
}

.ybc-blog-wrapper-detail .blog-comments-list {
  float: none;
  margin-bottom: 0;
}

.ybc-blog-wrapper-detail .blog-comments-list .blog-comment-line {
  float: none;
  display: block;
}

.ybc-blog-wrapper-detail .blog-comments-list .ybc-blog-detail-comment {
  display: flow-root;
}

.ybc-blog-wrapper-detail .blog-comments-list .comment-reply {
  float: none;
  clear: both;
  display: block;
  margin-top: 16px;
}

.ybc-blog-wrapper-detail .blog-comments-list .comment-content {
  margin-top: 14px;
}

/* Give an author's reply its own breathing room below the reply metadata. */
.ybc-blog-wrapper-detail .blog-comments-list .ybc-blog-reply-content {
  display: block;
  margin-top: 10px;
}

/* --- Comment form --- */
.ybc-blog-wrapper-detail .ybc_comment_form_blog {
  margin-top: 12px;
}

.ybc-blog-wrapper-detail .ybc_comment_form_blog .title_blog {
  margin: 0 0 20px;
  color: var(--beauty-text, #303030);
  font-family: 'Josefin Sans', Arial, sans-serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.ybc-blog-wrapper-detail .ybc-blog-form-comment form {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
}

.ybc-blog-wrapper-detail .blog-comment-row {
  flex: 1 1 100%;
}

.ybc-blog-wrapper-detail .blog-comment-row.blog-name,
.ybc-blog-wrapper-detail .blog-comment-row.blog-email {
  flex: 1 1 calc(50% - 9px);
}

.ybc-blog-wrapper-detail .blog-comment-row label {
  display: block;
  margin-bottom: 7px;
  color: #6d6d72;
  font-size: 13.5px;
  font-weight: 500;
}

.ybc-blog-wrapper-detail .ybc-blog-form-comment .form-control,
.ybc-blog-wrapper-detail .ybc-blog-form-comment input[type="text"],
.ybc-blog-wrapper-detail .ybc-blog-form-comment input[type="email"],
.ybc-blog-wrapper-detail .ybc-blog-form-comment textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e9e3e5;
  border-radius: 10px;
  background: #fff;
  font-size: 14.5px;
  color: #303030;
  box-shadow: none;
  transition: border-color 160ms ease;
}

.ybc-blog-wrapper-detail .ybc-blog-form-comment .form-control:focus,
.ybc-blog-wrapper-detail .ybc-blog-form-comment input:focus,
.ybc-blog-wrapper-detail .ybc-blog-form-comment textarea:focus {
  border-color: #c34f67;
  outline: none;
}

.ybc-blog-wrapper-detail .ybc-blog-form-comment textarea {
  min-height: 96px;
  resize: vertical;
}

.ybc-blog-wrapper-detail .blog-comment-row .blog-rate-post label {
  margin: 0 8px 0 0;
}

.ybc-blog-wrapper-detail .blog_rating_box .star {
  color: #c34f67;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: transform 120ms ease;
}

.ybc-blog-wrapper-detail .blog_rating_box .star:hover {
  transform: scale(1.15);
}

.ybc-blog-wrapper-detail .blog-submit input[type="submit"],
.ybc-blog-wrapper-detail .ybc-blog-form-comment input.button[type="submit"] {
  padding: 12px 34px;
  border: 0;
  border-radius: 24px;
  background: #c34f67;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 180ms ease;
}

.ybc-blog-wrapper-detail .blog-submit input[type="submit"]:hover,
.ybc-blog-wrapper-detail .ybc-blog-form-comment input.button[type="submit"]:hover {
  background: #a93d54;
}

.ybc-blog-wrapper-detail .ybc-blog-form-comment .blog-submit {
  float: none;
  clear: both;
  margin-top: 28px;
  text-align: center;
}

.ybc-blog-wrapper-detail .ybc-blog-form-comment .blog-comment-row.flex_space_between {
  flex-wrap: wrap;
}

.ybc-blog-wrapper-detail .ybc-blog-form-comment .blog-submit-form {
  flex: 0 0 100%;
  max-width: 100%;
}

/* --- Responsive --- */
@media (max-width: 991px) {
  .ybc-blog-wrapper-detail .beautys-post-hero img {
    max-height: 420px;
  }

  .ybc-blog-wrapper-detail .blog_description > p:first-of-type::first-letter {
    font-size: 46px;
  }


}

@media (max-width: 575px) {
  .ybc-blog-wrapper-detail .blog-extra {
    gap: 8px 12px;
  }

  .ybc-blog-wrapper-detail .page-heading.product-listing {
    font-size: 32px;
    line-height: 1.15;
  }

  .ybc-blog-wrapper-detail .blog_description > p:first-of-type::first-letter {
    font-size: 40px;
    margin-right: 10px;
  }

  .ybc-blog-wrapper-detail .blog_description h3 {
    padding-left: 44px;
  }

  .ybc-blog-wrapper-detail .blog_description h3::before {
    font-size: 30px;
  }

  .ybc-blog-wrapper-detail .ybc-blog-related-posts-list,
  .ybc-blog-wrapper-detail .ybc-blog-related-posts-list.dt-3 {
    grid-template-columns: 1fr !important;
  }

  .ybc-blog-wrapper-detail .ybc-blog-related-posts-list.slick-initialized .slick-track {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .ybc-blog-wrapper-detail .ybc-blog-related-posts {
    width: calc(100vw - 16px);
    padding: 40px 16px 32px;
  }

  .ybc-blog-wrapper-detail .polls-title label {
    flex: 1 1 100%;
    margin: 4px 0;
  }
}

/* The blog module's legacy stylesheet floats the detail wrapper, which
   disables auto margins and leaves the whole content column left-aligned.
   Restore the same centered column used by the shop homepage. */
.ybc_blog_layout_list.ybc-blog-wrapper-detail {
  float: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(1539px, calc(100vw - 24px));
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 575px) {
  .ybc_blog_layout_list.ybc-blog-wrapper-detail {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0;
    transform: none;
    box-sizing: border-box;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .ybc-blog-wrapper-detail .ybc-blog-wrapper-content,
  .ybc-blog-wrapper-detail .post-details,
  .ybc-blog-wrapper-detail .beautys-post-hero,
  .ybc-blog-wrapper-detail .blog_description {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .ybc-blog-wrapper-detail .blog_description {
    overflow-wrap: anywhere;
  }

  /* Keep article chrome aligned with the wider reading column. */
  .ybc-blog-wrapper-detail .ybc-blog-wrapper-content,
  .ybc-blog-wrapper-detail .post-details,
  .ybc-blog-wrapper-detail .blog_description,
  .ybc-blog-wrapper-detail .ybc-blog-wrapper-comment,
  .ybc-blog-wrapper-detail .ybc_comment_form_blog {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .ybc-blog-wrapper-detail .ybc-blog-form-comment {
    padding: 18px 16px !important;
  }

  .ybc-blog-wrapper-detail .ybc-blog-form-comment .blog-submit-form {
    clear: both !important;
    box-sizing: border-box;
    padding-top: 38px !important;
  }

  .ybc-blog-wrapper-detail .ybc-blog-form-comment .blog-submit {
    margin-top: 0 !important;
  }

  .ybc-blog-wrapper-detail .ybc_comment_form_blog .title_blog {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }
}

/* Use the real inline SVGs from the module for compact, recognisable share
   controls. The legacy rule gives these links a 100px pill width and hides
   their icons, leaving only empty ovals on the article page. */
.ybc-blog-wrapper-detail .ybc-blog-tags-social li a,
.ybc-blog-wrapper-detail .ybc-blog-tags-social li a.text-hide {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #f0c7ce !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #c34f67 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
}

.ybc-blog-wrapper-detail .ybc-blog-tags-social li a::before {
  display: none !important;
  content: none !important;
}

.ybc-blog-wrapper-detail .ybc-blog-tags-social li a .ets_svg {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  line-height: 1 !important;
}

.ybc-blog-wrapper-detail .ybc-blog-tags-social li a .ets_svg svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}

.ybc-blog-wrapper-detail .ybc-blog-tags-social li a:hover,
.ybc-blog-wrapper-detail .ybc-blog-tags-social li a:focus-visible {
  background: #c34f67 !important;
  border-color: #c34f67 !important;
  color: #fff !important;
}

/* Previous/next article navigation */
.ybc-blog-wrapper-detail .beautys-post-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 28px 0 46px;
  padding-top: 0;
  border-top: 0;
}

.ybc-blog-wrapper-detail .beautys-post-navigation__item {
  display: flex;
  min-height: 0;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  color: var(--beauty-text);
  text-decoration: none;
  transition: color 180ms ease;
}

.ybc-blog-wrapper-detail .beautys-post-navigation__item:not(.beautys-post-navigation__item--empty):hover,
.ybc-blog-wrapper-detail .beautys-post-navigation__item:not(.beautys-post-navigation__item--empty):focus-visible {
  background: transparent;
  color: var(--beauty-pink-strong);
}

.ybc-blog-wrapper-detail .beautys-post-navigation__item--next {
  align-items: flex-end;
  text-align: right;
}

.ybc-blog-wrapper-detail .beautys-post-navigation__label {
  color: var(--beauty-pink-strong);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ybc-blog-wrapper-detail .beautys-post-navigation__title {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  color: var(--beauty-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ybc-blog-wrapper-detail .beautys-post-navigation__item--empty {
  visibility: hidden;
  border-color: transparent;
  background: transparent;
}

@media (max-width: 575px) {
  .ybc-blog-wrapper-detail .beautys-post-navigation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    box-sizing: border-box;
    margin: 22px 0 34px;
    margin-left: -6px;
    padding-top: 0;
  }

  .ybc-blog-wrapper-detail .beautys-post-navigation__item--empty {
    display: flex;
  }

  .ybc-blog-wrapper-detail .beautys-post-navigation__item--previous,
  .ybc-blog-wrapper-detail .beautys-post-navigation__item--next {
    align-items: center;
    text-align: center;
  }

  .ybc-blog-wrapper-detail .beautys-post-navigation__title {
    display: none;
  }

  .ybc-blog-wrapper-detail .beautys-post-navigation__item {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px;
    min-height: 42px;
    padding: 0 10px;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
  }

  .ybc-blog-wrapper-detail .beautys-post-navigation__label {
    font-size: 11px;
    white-space: nowrap;
  }
}

/* Final mobile containment pass.
   The original ybc_blog detail stylesheet contains several legacy floats,
   negative margins and fixed-width widgets.  Keep the desktop full-bleed
   presentation, but make every detail-page module fit the phone viewport. */
@media (max-width: 575px) {
  body#ybc_blog_page,
  body#ybc_blog_page #wrapper,
  body#ybc_blog_page #main,
  body#ybc_blog_page .columns-container {
    max-width: 100%;
    overflow-x: hidden;
  }

  .ybc_blog_layout_list.ybc-blog-wrapper-detail,
  .ybc-blog-wrapper-detail .ybc-blog-wrapper-content,
  .ybc-blog-wrapper-detail .post-details {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    overflow-x: clip;
  }

  .ybc-blog-wrapper-detail .beautys-post-hero,
  .ybc-blog-wrapper-detail .beautys-post-hero .ybc_image-single,
  .ybc-blog-wrapper-detail .beautys-post-hero img,
  .ybc-blog-wrapper-detail .blog_description,
  .ybc-blog-wrapper-detail .ybc-blog-wrapper-comment,
  .ybc-blog-wrapper-detail .ybc_comment_form_blog,
  .ybc-blog-wrapper-detail #ybc-blog-related-products,
  .ybc-blog-wrapper-detail .ybc-blog-related-products-wrapper,
  .ybc-blog-wrapper-detail .blog-product-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  .ybc-blog-wrapper-detail .beautys-post-hero img,
  .ybc-blog-wrapper-detail .blog_description img,
  .ybc-blog-wrapper-detail #ybc-blog-related-products img,
  .ybc-blog-wrapper-detail .beautys-blog-shoplook-target img,
  .ybc-blog-wrapper-detail .ybc-blog-related-posts img {
    max-width: 100% !important;
    height: auto;
  }

  /* These two sections were intentionally full-bleed on desktop.  On a
     phone they stay inside the article column, so their internal padding and
     carousel arrows cannot create horizontal scroll. */
  .ybc-blog-wrapper-detail .beautys-blog-shoplook-target,
  .ybc-blog-wrapper-detail .ybc-blog-related-posts {
    position: relative;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  .ybc-blog-wrapper-detail .beautys-blog-shoplook-target .beautys-featured-products {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  .ybc-blog-wrapper-detail .beautys-post-navigation {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .ybc-blog-wrapper-detail .ybc-blog-related-posts-list,
  .ybc-blog-wrapper-detail .ybc-blog-related-posts-list.dt-3,
  .ybc-blog-wrapper-detail .ybc-blog-related-posts-list.slick-initialized,
  .ybc-blog-wrapper-detail .ybc-blog-related-posts-list.slick-initialized .slick-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  .ybc-blog-wrapper-detail .ybc-blog-related-products-wrapper > .row,
  .ybc-blog-wrapper-detail #ybc-blog-related-products .row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  .ybc-blog-wrapper-detail .table_content {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    right: 0 !important;
    box-sizing: border-box;
  }

  .ybc-blog-wrapper-detail .page-heading.product-listing,
  .ybc-blog-wrapper-detail .page-heading.product-listing .title_cat,
  .ybc-blog-wrapper-detail .ybc_title_block,
  .ybc-blog-wrapper-detail .blog_description,
  .ybc-blog-wrapper-detail .blog_description * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

.ybc-blog-wrapper-detail .page-heading.product-listing .title_cat {
    display: block;
    float: none !important;
    width: 100% !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* Editorial polish: keep the module's markup and interactions, while giving
 * cards and article chrome a clearer visual hierarchy. */
.beautys-blog-list .ybc-blog-list > li .post-wrapper {
  border: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.beautys-blog-list .ybc-blog-list > li .post-wrapper:hover {
  border-color: var(--beauty-border);
  box-shadow: 0 12px 28px rgba(48, 34, 38, .08);
  transform: translateY(-3px);
}

.beautys-blog-list .ybc-blog-card-meta {
  min-height: 18px;
  letter-spacing: .04em;
}

.ybc-blog-wrapper-detail .post-details {
  font-size: 14px;
}

.ybc-blog-wrapper-detail .blog_description {
  color: #454247;
  font-size: 17px;
  line-height: 1.85;
}

.ybc-blog-wrapper-detail .blog_description p {
  margin-bottom: 1.35em;
}

.ybc-blog-wrapper-detail .post-details > .blog_description {
  margin-bottom: 12px !important;
}

.ybc-blog-wrapper-detail .post-details > .blog_description > p:last-of-type {
  margin-bottom: 0;
}

/* Keep the module's end marker available to its table-of-contents script
   without letting its non-breaking space create an empty visual line. */
.ybc-blog-wrapper-detail .post-details > .blog_description > .ets_end_heading_table {
  height: 0 !important;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}

.ybc-blog-wrapper-detail .blog_description a {
  color: var(--beauty-pink-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (max-width: 767px) {
  .beautys-blog-list {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .beautys-blog-list .beautys-blog-hero {
    margin-bottom: 42px;
    border-radius: 3px;
  }

  .beautys-blog-list .beautys-blog-section-heading {
    margin-top: 34px;
    margin-bottom: 24px;
  }

  .ybc-blog-wrapper-detail .blog_description {
    font-size: 16px;
    line-height: 1.75;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }

  .ybc-blog-wrapper-detail .blog_description p,
  .ybc-blog-wrapper-detail .blog_description p > span {
    padding-right: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }
}

@media (max-width: 575px) {
  body.ybc_blog .breadcrumb__wrapper > .container {
    padding-right: 10px;
    padding-left: 10px;
  }

  .ybc-blog-wrapper-detail .ybc_blog_img_wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 -0px 24px !important;
  }

  .ybc-blog-wrapper-detail .page-heading.product-listing {
    font-size: 20px !important;
    line-height: 1.12 !important;
  }

  .ybc-blog-wrapper-detail .blog-extra {
    display: block !important;
    width: 100%;
  }

  .ybc-blog-wrapper-detail .blog-extra .ybc-blog-latest-toolbar {
    display: grid !important;
    grid-template-columns: max-content max-content max-content;
    column-gap: 14px;
    width: max-content !important;
    max-width: 100%;
    align-items: center;
  }

  .ybc-blog-wrapper-detail .ybc-blog-latest-toolbar .blog_rating_wrapper {
    display: none !important;
  }

  .ybc-blog-wrapper-detail .blog-extra .ybc-blog-latest-toolbar-views,
  .ybc-blog-wrapper-detail .blog-extra .post-date,
  .ybc-blog-wrapper-detail .blog-extra .author-block {
    display: inline-flex !important;
    flex: none !important;
    width: max-content !important;
    max-width: none !important;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    margin: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    color: #8a8a8f;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .ybc-blog-wrapper-detail .blog-extra .post-date {
    justify-content: flex-start;
  }

  .ybc-blog-wrapper-detail .blog-extra .post-date > span:not(.be-label) {
    transform: none;
  }

  .ybc-blog-wrapper-detail .blog-extra .author-block {
    justify-content: flex-start;
    margin-left: 0 !important;
  }

  .ybc-blog-wrapper-detail .post-date .be-label,
  .ybc-blog-wrapper-detail .author-block .post-author-label {
    flex: 0 0 16px;
    width: 16px;
    min-width: 16px;
    margin-right: 2px;
  }

  .ybc-blog-wrapper-detail .ybc-blog-latest-toolbar-views::before,
  .ybc-blog-wrapper-detail .post-date .be-label::before,
  .ybc-blog-wrapper-detail .author-block .post-author-label::before {
    font-size: 15px;
    margin-right: 0;
  }

  .ybc-blog-wrapper-detail .ybc-blog-tags-social {
    clear: both;
    float: none !important;
    display: block;
    width: 100%;
    margin-top: 22px;
  }

  .ybc-blog-wrapper-detail .ybc-blog-tags-social .blog-extra-facebook-share ul {
    width: 100%;
    justify-content: flex-start;
  }

  .ybc-blog-wrapper-detail .ybc_image-single,
  .ybc-blog-wrapper-detail .ybc_image-single img {
    display: block;
    width: 100% !important;
    max-width: none !important;
  }

  .ybc-blog-wrapper-detail .ybc_blog_img_wrapper.beautys-post-hero {
    position: relative;
    left: 50%;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    transform: translateX(-50%);
  }

  .ybc-blog-wrapper-detail .beautys-post-hero .ybc_image-single.ybc_item_img_ladyload {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    overflow: visible !important;
    background: none !important;
  }

  .ybc-blog-wrapper-detail .beautys-post-hero .ybc_image-single img {
    height: auto !important;
    min-height: 0 !important;
    object-fit: cover;
  }

  .ybc-blog-wrapper-detail .ybc_blog_img_wrapper img {
    width: 100% !important;
    max-width: none !important;
    max-height: none;
    border-radius: 0;
  }

  .ybc-blog-wrapper-detail .post-details {
    margin-bottom: 8px;
  }

  .ybc-blog-wrapper-detail {
    padding-bottom: 8px !important;
  }

  .ybc-blog-wrapper-detail .ybc-blog-related-posts {
    margin-top: 20px !important;
    padding-top: 24px !important;
    padding-bottom: 12px !important;
  }

  .ybc-blog-wrapper-detail .ybc-blog-related-posts-list {
    row-gap: 18px;
  }

  .ybc-blog-wrapper-detail .form-polls {
    margin-top: 28px !important;
    margin-bottom: 0 !important;
    min-height: 58px;
    padding: 10px !important;
  }

  .ybc-blog-wrapper-detail .beautys-blog-shoplook-target,
  .ybc-blog-wrapper-detail .ybc-blog-related-posts {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .ybc-blog-wrapper-detail .beautys-blog-shoplook-target .beautys-featured-products {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  body.ybc_blog .beautys-featured-products {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .ybc-blog-wrapper-detail .beautys-blog-shoplook-target {
    left: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    transform: translateX(-50%) !important;
    margin-top: 42px !important;
  }

  .ybc-blog-wrapper-detail .form-polls {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Compact helpfulness controls: two touch targets on one line. */
  .ybc-blog-wrapper-detail .polls-title {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }

  .ybc-blog-wrapper-detail .polls-title > span:first-child {
    display: inline-block !important;
    flex: 0 1 auto;
    width: auto !important;
    min-width: 0;
    margin-top: 0;
    margin-bottom: 0 !important;
    margin-right: 2px !important;
    margin-left: 0 !important;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .ybc-blog-wrapper-detail .polls-title label,
  .ybc-blog-wrapper-detail .polls-title label[for="polls_post_0"],
  .ybc-blog-wrapper-detail .polls-title label[for="polls_post_1"] {
    flex: 0 0 auto;
    width: auto;
    min-width: 46px;
    height: 36px;
    margin: 0 !important;
    padding: 0 8px;
    border-radius: 18px;
    font-size: 13px;
    line-height: 36px;
  }
}

/* ------------------------------------------------------------------ *
 * Article header cleanup: category -> 46px title -> date / read time.
 * Views and author metadata are intentionally removed from the visual
 * hierarchy; compact sharing controls now sit below the hero image.
 * ------------------------------------------------------------------ */
.ybc-blog-wrapper-detail .beautys-post-category {
  margin: 22px 0 12px;
  color: #c34f67;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.ybc-blog-wrapper-detail .beautys-post-category a {
  color: inherit;
}

.ybc-blog-wrapper-detail .beautys-post-category a:hover {
  color: #a83f56;
}

.ybc-blog-wrapper-detail .post-details {
  margin-bottom: 8px;
}

.ybc-blog-wrapper-detail .blog-extra {
  float: none;
  margin-bottom: 0;
}

.ybc-blog-wrapper-detail .blog-extra .ybc-blog-latest-toolbar-views,
.ybc-blog-wrapper-detail .blog-extra .ybc-blog-like-span,
.ybc-blog-wrapper-detail .blog-extra .blog_rating_wrapper,
.ybc-blog-wrapper-detail .blog-extra .author-block {
  display: none !important;
}

.ybc-blog-wrapper-detail .blog-extra .post-date {
  display: inline-flex !important;
  align-items: center;
  min-height: 20px;
  margin: 0 !important;
  color: #74747b;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 20px;
  text-transform: uppercase;
}

.ybc-blog-wrapper-detail .blog-extra .post-date .be-label {
  display: none !important;
}

.ybc-blog-wrapper-detail .blog-extra .post-date > .beautys-post-date-value {
  display: inline-flex;
  align-items: center;
  line-height: 20px;
  transform: none !important;
}

.ybc-blog-wrapper-detail .beautys-post-meta-divider,
.ybc-blog-wrapper-detail .beautys-post-read-time {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  color: #74747b;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 20px;
  text-transform: uppercase;
}

.ybc-blog-wrapper-detail .beautys-post-meta-divider {
  color: #c0a1a8;
  font-size: 15px;
  letter-spacing: 0;
}

.ybc-blog-wrapper-detail .ybc_blog_img_wrapper.beautys-post-hero {
  margin-top: 0;
  margin-bottom: 16px;
}

.ybc-blog-wrapper-detail .beautys-post-share {
  width: min(100%, 1180px);
  margin: 0 auto 34px;
}

.ybc-blog-wrapper-detail .beautys-post-share .ybc-blog-tags-social {
  clear: both;
  float: none !important;
  display: block;
  width: 100%;
  margin: 0;
}

.ybc-blog-wrapper-detail .beautys-post-share .blog-extra-facebook-share ul {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.ybc-blog-wrapper-detail .beautys-post-share .blog-extra-facebook-share li {
  float: none;
}

.ybc-blog-wrapper-detail .beautys-post-share .ybc-blog-tags-social li a,
.ybc-blog-wrapper-detail .beautys-post-share .ybc-blog-tags-social li a.text-hide {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
}

.ybc-blog-wrapper-detail .beautys-post-share .ybc-blog-tags-social li a .ets_svg,
.ybc-blog-wrapper-detail .beautys-post-share .ybc-blog-tags-social li a .ets_svg svg {
  width: 14px !important;
  height: 14px !important;
}

@media (min-width: 768px) {
  .ybc-blog-wrapper-detail .blog-extra .ybc-blog-latest-toolbar {
    gap: 8px;
  }
}

@media (max-width: 767px) {
  .ybc-blog-wrapper-detail .beautys-post-category {
    margin-top: 8px;
    margin-bottom: 9px;
    font-size: 11px;
  }

  .ybc-blog-wrapper-detail .blog-extra .ybc-blog-latest-toolbar {
    grid-template-columns: max-content max-content max-content;
    column-gap: 6px;
  }

  .ybc-blog-wrapper-detail .blog-extra .post-date,
  .ybc-blog-wrapper-detail .beautys-post-meta-divider,
  .ybc-blog-wrapper-detail .beautys-post-read-time {
    font-size: 11px;
    letter-spacing: .05em;
  }

  .ybc-blog-wrapper-detail .beautys-post-share {
    width: 100%;
    margin-bottom: 18px;
  }

  .ybc-blog-wrapper-detail .beautys-post-share .ybc-blog-tags-social {
    margin-top: 0;
  }
}

/* Section surfaces: keep related posts on the normal page background, while
   giving Shop The Look the same barely-there blush tint on the homepage,
   category pages and article detail pages. */
.ybc-blog-wrapper-detail .ybc-blog-related-posts {
  border-top: 0 !important;
  background: transparent;
}

.beautys-blog-shoplook-target {
  background: #fffbfc;
}

.ybc-blog-wrapper-detail .beautys-blog-shoplook-target {
  clear: both;
}

.beautys-blog-shoplook-target .beautys-featured-products {
  background: transparent;
}

/* Keep Shop The Look cards aligned when product names are long. */
.beautys-blog-shoplook-target .beautys-featured-product__title {
  display: -webkit-box;
  min-height: 2.7em;
  max-height: 2.7em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Let Shop The Look reviews sit directly on the section's blush background. */
.beautys-blog-shoplook-target .product-list-reviews {
  background: transparent;
}

/* The product review module uses its own legacy wrapper for the stars. */
.beautys-blog-shoplook-target .greview_star_wp {
  background: transparent;
}

.ybc-blog-wrapper-detail .beautys-blog-shoplook-target .beautys-featured-products__header {
  margin-bottom: 30px;
}

.ybc-blog-wrapper-detail .beautys-blog-shoplook-target .beautys-featured-products__divider {
  margin-top: 16px;
}

@media (max-width: 575px) {
  .ybc-blog-wrapper-detail .beautys-blog-shoplook-target .beautys-featured-products__header {
    margin-bottom: 22px;
  }

  .ybc-blog-wrapper-detail .beautys-blog-shoplook-target .beautys-featured-products__divider {
    margin-top: 12px;
  }
}

/* Keep the helpfulness poll, previous/next navigation and comments accordion
   on one consistent vertical rhythm. The adjacent margins are collapsed by
   the document flow, so each boundary is defined by one side only. */
.ybc-blog-wrapper-detail .form-polls {
  margin-bottom: 0;
}

.ybc-blog-wrapper-detail .beautys-post-navigation {
  margin-top: 50px;
  margin-bottom: 30px;
}

.ybc-blog-wrapper-detail .ybc-comments-accordion {
  margin-top: 0;
}

@media (max-width: 575px) {
  .ybc-blog-wrapper-detail .beautys-post-navigation {
    margin-top: 50px;
    /* The mobile nav keeps a 42px touch row while its title is hidden. Use a
       shorter trailing margin so the visible label-to-comments gap matches
       the poll-to-label gap above. */
    margin-bottom: 0px;
  }

  /* Anchor each mobile navigation link to its own edge. The legacy mobile
     rule centers both links inside their half-width columns. */
  .ybc-blog-wrapper-detail .beautys-post-navigation__item--previous {
    align-items: flex-start;
    text-align: left;
  }

  .ybc-blog-wrapper-detail .beautys-post-navigation__item--next {
    align-items: flex-end;
    text-align: right;
  }

  /* Remove the legacy 10px inline padding so the labels align with the
     navigation band's actual left and right edges. */
  .ybc-blog-wrapper-detail .beautys-post-navigation__item {
    padding-right: 0;
    padding-left: 0;
  }
}