.cart-saved-money-wrap {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    background-color: #f7f7f7;
    color: #1b9f35;
    font-size: 1.125em;
    font-weight: 700;
}

.cart-campaign-saving {
    color: #1b9f35;
}

.cart-dynamic-discount-row td {
    border-top: 1px solid #e9eee9;
    background-color: #fbfdfb;
}

.cart-dynamic-discount-label,
.cart-dynamic-discount-amount {
    color: #1b9f35;
    font-weight: 700;
}

.cart-dynamic-saving-pill,
.cart-dynamic-summary-saving {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid #d9e7d9;
    border-radius: 5px;
    background-color: #f0f7ed;
    color: #1b9f35;
    font-weight: 600;
    line-height: 1.2;
}

.cart-dynamic-summary-row {
    color: #666;
}

.cart-dynamic-summary-saving {
    width: 100%;
    margin-bottom: 12px;
}

.cart-dynamic-summary-saving-compact {
    display: flex;
    width: max-content;
    margin-left: auto;
}

@media (max-width: 767px) {
    .cart-dynamic-discount-row td {
        white-space: nowrap;
    }

    .cart-dynamic-saving-pill {
        padding-right: 10px;
        padding-left: 10px;
    }
}

/* Neutral product content blocks (landing-page types rendered outside the beauty template) */
.pcb { padding: 40px 0; }
.pcb .pcb-eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; margin-bottom: 8px; opacity: .75; text-transform: uppercase; }
.pcb .pcb-title { font-size: 28px; margin: 0 0 12px; }
.pcb .pcb-text { margin: 0 0 16px; }
.pcb .pcb-text-muted { opacity: .75; }
.pcb .pcb-grid { display: grid; gap: 16px; }
.pcb .pcb-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcb .pcb-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pcb .pcb-card { background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; padding: 18px; }
.pcb .pcb-card-icon { flex-direction: row; gap: 12px; }
.pcb .pcb-card-center { align-items: center; text-align: center; }
.pcb .pcb-card small { display: block; opacity: .75; }
.pcb .pcb-icon { align-items: center; display: inline-flex; flex: 0 0 40px; height: 40px; justify-content: center; width: 40px; }
.pcb .pcb-icon svg { height: 24px; width: 24px; }
.pcb .pcb-stat-value { font-size: 32px; }
.pcb .pcb-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 12px; padding: 0; }
.pcb .pcb-chips li { background: rgba(0, 0, 0, .06); border-radius: 999px; font-size: 13px; padding: 4px 12px; }
.pcb .pcb-bullets { list-style: disc; margin: 0 0 12px; padding-left: 20px; }
.pcb .pcb-split { display: grid; gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcb-split-feature-reverse .pcb-split-image { order: -1; }
.pcb .pcb-split-image img { border-radius: 12px; display: block; height: auto; width: 100%; }
.pcb .pcb-steps { counter-reset: none; display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0 0 16px; padding: 0; }
.pcb .pcb-steps li { background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px; padding: 18px; }
.pcb .pcb-step-number { display: inline-block; font-weight: 700; margin-bottom: 6px; }
.pcb .pcb-notice { border: 1px solid rgba(0, 0, 0, .15); border-radius: 12px; padding: 16px; }
.pcb .pcb-details { border-bottom: 1px solid rgba(0, 0, 0, .1); padding: 10px 0; }
.pcb .pcb-table table { border-collapse: collapse; width: 100%; }
.pcb .pcb-table td { border-bottom: 1px solid rgba(0, 0, 0, .08); padding: 8px 0; }
.pcb .pcb-table td:last-child { font-weight: 700; text-align: right; }
@media (max-width: 991.98px) {
    .pcb .pcb-grid-3, .pcb .pcb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pcb .pcb-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pcb .pcb-split { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .pcb .pcb-grid-3, .pcb .pcb-steps, .pcb .pcb-grid-6 { grid-template-columns: 1fr; }
}

/* Product variants switch on the page (assets/front/js/product-variants.js): the wrappers of the parts that
   change with the variant do not take part in the layout, and the parameter values are buttons that keep
   the look their templates give them. */
[data-variant-region] {
    display: contents;
}

:where(button[data-variant-option]) {
    appearance: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
    width: 100%;
}

/* Label pill on a parameter value (Book Nook, default): rounder on the chosen value. */
.variant-option-label {
    border-radius: 8px;
}

.selected > [data-variant-option] .variant-option-label {
    border-radius: 20px;
}

/* Product gallery before its slider starts (theme.js runs after the scripts at the end of the page, slick.min.css
   keeps a slider transparent until then): the first photo shows at once in the place the slider gives it and the
   thumbnails sit in their row of five, so nothing stacks, stays hidden or jumps when the slider starts. */
.galleries-product .slick-slider:not(.slick-initialized) {
    opacity: 1;
}

.galleries-product .slider-for:not(.slick-initialized) > :not(:first-child),
.galleries-product .slider-nav:not(.slick-initialized) > :nth-child(n+6) {
    display: none;
}

.galleries-product .slider-nav:not(.slick-initialized) {
    display: flex;
}

.galleries-product .slider-nav:not(.slick-initialized) > * {
    flex: 0 0 20%;
    max-width: 20%;
}

/* Video preview in a description (EmbeddedMedia): the picture of a YouTube video with a play button; the player
   loads only when the visitor plays it (assets/front/js/video-facade.js). */
a.video-facade {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 0 1rem;
    overflow: hidden;
    background: #000;
}

a.video-facade > img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100% !important;
    object-fit: cover;
}

.video-facade-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 68px;
    height: 48px;
    margin: -24px 0 0 -34px;
    border-radius: 14px;
    background: rgba(33, 33, 33, 0.8);
    transition: background-color 0.2s;
}

.video-facade-play::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 14px;
    border-style: solid;
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent #fff;
}

a.video-facade:hover .video-facade-play,
a.video-facade:focus-visible .video-facade-play {
    background: #f00;
}

.video-facade-frame {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0 0 1rem;
    border: 0;
}

/* The hand-written invitation beside the story video button (products/blocks/story.tpl), drawn as inline SVG so
   its words come from the language files. */
.story-yt-decoration-text {
    font-family: 'Caveat', cursive;
    font-size: 28px;
    fill: #824d35;
}