/** Shopify CDN: Minification failed

Line 100:14 Expected ":"

**/
/* vd-pdp.css
   Layout-only styles for the vd-* product-page sections
   (vd-key-ingredients, vd-directions). Scoped under .vd-section.

   Fonts and colors are NOT set here: headings and text inherit the Be Yours
   theme's fonts and color scheme. Lines, tinted boxes and muted text are
   derived from the inherited text color (currentColor), so they adapt to
   whatever color scheme the page uses. Page width and side gutters come
   from the theme's .page-width class. */

.vd-section {
  --vd-pad-top: 80px;
  --vd-pad-bottom: 80px;
  --vd-line: color-mix(in srgb, currentColor 18%, transparent);
  --vd-tint: color-mix(in srgb, currentColor 5%, transparent);
  padding: var(--vd-pad-top) 0 var(--vd-pad-bottom);
}

.vd-section *,
.vd-section *::before,
.vd-section *::after { box-sizing: border-box; }

/* LAYOUT: two columns, media + content */
.vd-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.vd-section--media-left .vd-section__media-col { order: -1; }

/* HEADINGS (font and size come from the theme's h2 styles) */
.vd-label {
  font-size: 1.4rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 0 0 .8rem;
  opacity: .75;
}
.vd-heading { margin: 0 0 2.8rem; }

/* MEDIA (image, video file, or YouTube/Vimeo) */
.vd-media { position: relative; overflow: hidden; }
.vd-media--sticky { position: sticky; top: 96px; }
.vd-media__frame { position: relative; width: 100%; aspect-ratio: var(--vd-ratio, 4 / 5); background: var(--vd-tint); }
.vd-media__frame--adapt { aspect-ratio: auto; }
.vd-media__frame > img,
.vd-media__frame > video,
.vd-media__frame > iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block; border: 0;
}
.vd-media__frame--adapt > img,
.vd-media__frame--adapt > video { position: static; height: auto; }
.vd-media__caption { 
    /*background: var(--vd-tint); 
    border: 1px solid var(--vd-line); 
    border-top: 0;*/ 
    background-color: #191e35;
    color: #fff;
    padding: 2rem 4rem 4rem 4rem; 
}
.vd-media__caption-heading { 
    /*margin: 0 0 .5rem; 
    font-size: 1.7rem;*/
    color: #fff; 
}
.vd-media__caption p { 
    margin: 0; 
    /*opacity: .75;*/
}

/* KEY INGREDIENTS */
.vd-ing-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 1.4rem;
  align-items: start;
  padding: 1.8rem 0;
  /*border-bottom: 1px solid var(--vd-line);*/
}
/*.vd-ing-item:first-of-type { border-top: 1px solid var(--vd-line); }*/
.vd-ing-item--no-icon { grid-template-columns: 1fr; }
.vd-ing-item__icon img { width: 40px; height: 40px; object-fit: contain; display: block; }
.vd-ing-item__name {
  font-family: inherit;
  /*font-size: 1.2rem;*/ 
  font-weight: 600;
  font-size: inherit;
  letter-spacing: .08em; text-transform: uppercase;
  margin: 0 0 .4rem; line-height: 1.4;
}
.vd-ing-item__desc { 
    margin-top 14.4px; 
    opacity: .75; 
}

/* DIRECTIONS / STEPS */
.vd-step {
  display: flex; gap: 2rem; align-items: flex-start;
  padding: 2rem 0;
  /*border-bottom: 1px solid var(--vd-line);*/
}
/*.vd-step:first-of-type { border-top: 1px solid var(--vd-line); }*/
.vd-step__n { 
    /*font-size: 2.8rem; 
    line-height: 1;*/ 
    width: 3.4rem; 
    flex-shrink: 0; 
    font-weight: 600;
    /*opacity: .35;*/ 
}
.vd-step__body > :first-child { margin-top: 0; }
.vd-step__body > :last-child { margin-bottom: 0; }
.vd-note {
  /*background: var(--vd-tint);
  border: 1px solid var(--vd-line);
  border-left: 3px solid currentColor;
  padding: 1.4rem 1.6rem; margin-top: 2.2rem;*/
  border-left: 2px solid #4b666d;
  padding: 20px;
  margin-top: 10px;
  background-color: #e5e4e1;
}
.vd-note > :first-child { margin-top: 0; }
.vd-note > :last-child { margin-bottom: 0; }

/* Theme-editor-only notice when no metaobject is connected */
.vd-empty { padding: 40px 20px; text-align: center; border: 1px dashed #ccc; }

/* RESPONSIVE */
@media (max-width: 989px) {
  .vd-section { padding: calc(var(--vd-pad-top) * .6) 0 calc(var(--vd-pad-bottom) * .6); }
  .vd-section__inner { grid-template-columns: 1fr; gap: 32px; }
  .vd-section--media-left .vd-section__media-col { order: 0; }
  .vd-section--mobile-media-first .vd-section__media-col { order: -1; }
  .vd-media--sticky { position: relative; top: 0; }
}
