/** Shopify CDN: Minification failed

Line 13:19 Expected identifier but found whitespace
Line 13:21 Unexpected "{"
Line 13:31 Expected ":"
Line 2712:15 Expected identifier but found whitespace
Line 2712:21 Unexpected ";"
Line 3241:11 Expected identifier but found whitespace
Line 3241:12 Unexpected "0"

**/
:root {
--exp-border-color: {{ settings.exp_border_color }};
}
@font-face {
    font-family: 'Myriad Pro';
    src: url('/cdn/shop/files/MyriadPro-Bold.woff?v=1791898501' ) format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('/cdn/shop/files/MyriadPro-Regular.woff?v=1791898501') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('/cdn/shop/files/MyriadPro-Semibold.woff?v=1791898501') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
.pro_price_inner {
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 10px;
}
.selected_step_2.selected_items ul {
    overflow: hidden;
}
.bauble-bar-exprience .list-of-babies.list-of-selected-items {
    list-style: none;
    margin-top: 20px;
    display: block;
   border: 1px solid #000;
   min-height: 430px;
   position:relative;
}
.bauble-bar-exprience .selected_step_3.breads_change.selected_items ul li, .bauble-bar-exprience .selected_step_2.breads_change.selected_items.without_faq.brio ul li {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    padding: 0;
    border: 1px dotted #d2d2d2;
    line-height: normal;
    min-width: 32px;
    /* gap: 8px; */
}
.bauble-bar-exprience .list-of-babies.list-of-selected-items .selected_items {
   background: transparent;
    border: none;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    max-width: 100%;
    width: 100%;
    min-height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}
.bauble-bar-exprience .selected_items h4 {
    font-weight: normal;
}
.interview_text.ccc ul li:before {
    display: none;
}
.interview_text.ccc li p {
    text-transform: initial !important;
    font-size: 16px;
    letter-spacing: 0;
}
.bauble-bar-exprience .selected_step_3.breads_change.selected_items.without_faq, .brio-experience .selected_step_2.breads_change.selected_items.without_faq {
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    bottom: 0;
    display: block;
    text-align: left;
}
.bauble-bar-exprience .list-of-babies.list-of-selected-items .selected_items .change-button, .brio-experience .list-of-babies.list-of-selected-items .selected_items .change-button {
    position: static;
    margin: 0;
    background: #fff;
    font-weight: bold;
}
.bauble-bar-exprience .selected_step_2.selected_items li img {
    display: none;
}
.bauble-bar-exprience .selected_step_4.selected_items.hidden_product, .brio-experience .selected_step_4.selected_items.hidden_product, .bag-experience .selected_step_5.selected_items.hidden_product {
    display: flex;
    gap: 13px;
    margin-top: 16px;
}
.bottom_area {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bottom_area .box-btn {
    margin: 0;
}

.bauble-bar-exprience .selected_step_4.selected_items.hidden_product ul, .brio-experience .selected_step_4.selected_items.hidden_product ul, .bag-experience .selected_step_5.selected_items.hidden_product ul {
    list-style: none;
    margin: 0;
    gap: 13px;
    text-align: center;
    display: flex;
}
.bauble-bar-exprience .breads_pro_area, .brio-experience .breads_pro_area {
    display: flex;
    gap: 8px;
}

.bauble-bar-exprience .selected_step_4.selected_items.hidden_product ul li img, .brio-experience .selected_step_4.selected_items.hidden_product ul li img, .bag-experience .selected_step_5.selected_items.hidden_product ul li img {
    border: 1px solid #0000001A;
    width: 100%;
}
.also_include {
    background: #AE1F2B;
    /* height: auto; */
    /* min-height: auto; */
    max-height: fit-content;
    color: #fff;
    font-size: 12px;
    padding: 5px 15px;
    border-radius: 50px;
}
.bauble-bar-exprience .also_include, .brio-experience .also_include, .bag-experience .also_include {
    border-radius: 0;
    height: 100%;
    min-height: 102px;
        align-content: center;
}
.bag-experience .also_include {
    padding: 5px 12px;
}
.bauble-bar-exprience .selected_step_4.selected_items.hidden_product ul li h4, .brio-experience .selected_step_4.selected_items.hidden_product ul li h4, .bag-experience .selected_step_5.selected_items.hidden_product ul li h4 {
    text-align: center;
    font-size: 12px;
    margin-top: 5px;
    line-height: normal;
    font-weight: bold;
}

.bauble-bar-exprience .selected_step_4.selected_items.hidden_product ul li, .brio-experience .selected_step_4.selected_items.hidden_product ul li, .bag-experience .selected_step_5.selected_items.hidden_product ul li {
    text-align: center;
    max-width: 125px;
}



.stiff .step-2-content.no-chnage.step-content.active_position .content-inner.type_name {
    background: transparent;
    padding-left: 0;
    padding-right: 0;
}
.bag-experience .step-4-content ul {
   list-style: none;
}
.desktop_hover-over_text, .mobile_hover-over_text {
    display: none;
}
.bag-experience .step-4-content.no-chnage.step-content.active_position {
    position: fixed;
    max-width: 550px;
    width: 90%;
    z-index: 999;
    top: 25%;
    left: 0;
    right: 0;
    min-height: 400px;
    border-radius: 8px;
    margin: 0 auto;
    z-index: 9;
    padding: 20px;
    gap: 24px;
    box-shadow: 0 8px 24px #0009;
    display: block;
    z-index: 99;
    background: #fff;
}
.static_img {
    display: block;
    margin: 25px 0 0 0;
}

.bag-experience .selected_step_4.selected_items li {
border: none !important;
}

.bag-experience .step-4-content.no-chnage.step-content.active_position .static_img {
    display: none;
}

.static_img img {
    width: 100%;
}
.bag-experience .selected_step_4.selected_items label div {
    font-size: 19px;
    letter-spacing: 0;
    text-transform: capitalize;
    position: relative;

}

.bag-experience .selected_step_4.selected_items ul {
 overflow: initial !important;
 
}
.bag-experience .selected_step_4.selected_items label div:after {
    content: ":";
    padding-right: 3px;
}
.bag-experience .selected_step_4.selected_items ul li {
    margin: 0;
    padding: 0;
}
.bag-experience .selected_step_4.selected_items label {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
.bag-experience .selected_step_4.selected_items label input {
    background: transparent !important;
    padding: 0 !important;
    border: none;
    text-transform: none !important;
    font-size: 19px;
    min-height: initial;
    height: initial;
}

.bag-experience .list-of-babies.list-of-selected-items {
    flex-direction: column;
        min-height: 431px;
    position: relative;
    justify-content: space-between;
}
.bag-experience .list-of-babies.list-of-selected-items .bottom_selected_items {
    display: flex;
    gap: 18px;
    justify-content: flex-start;
    padding: 16px;
}
.bag-experience .list-of-babies.list-of-selected-items .bottom_selected_items .selected_items li h4 {
    display: none;
}
.bag-experience .list-of-babies.list-of-selected-items .selected_items .change-button, .bag-experience .selected_step_4.selected_items .change-button {
    position: relative;
    top: initial;
    bottom: initial;
    background: #fff;
    border: 1px solid #efefef;
    font-weight: bold;
    margin: 0;
}
.bag-experience .list-of-babies.list-of-selected-items .selected_items h4 {
    color: #fff;
    font-weight: 500;
}
.bag-experience .list-of-babies.list-of-selected-items .bottom_selected_items .selected_items {
    width: auto;
    max-width: initial;
    padding: 0;
}
.step-4-content.no-chnage.step-content.active_position .header_bottom {
    display: none;
}


.product-info__block-item.schleich {
    margin-top: 20px;
}

select.interview_ques {
    width: 100%;
    display: flex;
    width: 500px;
    height: 50px;
    padding: 10px;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #CCC;
    background: #FFF;
    color: #CCC;
    text-align: left;
    /* font-family: "VAG Rounded Next"; */
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    appearance: none;
    background: url(/cdn/shop/files/keyboard_arrow.png?v=1791898514);
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 24px;
}
button.play-button svg {
   filter: drop-shadow(10px 10px 50px rgba(0, 0, 0, .75));
}
.prose .play-button {
    margin: 3rem auto;
   
    border-radius: 50%;
   
      filter: drop-shadow(10px 10px 50px rgba(0, 0, 0, .75));
}
button.replay-button {
      filter: drop-shadow(10px 10px 50px rgba(0, 0, 0, .75));
}
.video-controls button.replay-button svg {
    width: 80px;
    height: 80px;
     filter: drop-shadow(-10px -10px 50px rgba(0, 0, 0, .75));
}

.video-controls button.replay-button svg path {
    fill: #fff;
}
.stiff .selected_step_3.selected_items.without_faq label, .selected_step_3.selected_items.brio.without_faq li label {
    display: flex;
    /* justify-content: center; */
    align-items: center;
}
.selected-value::after {
    display: none;
} 
.popup_inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center;
}
 /* #29675 focus-visible correction, 2026-09-16. This block previously selected
   button:focus-visible, input:focus-visible, textarea:focus-visible and set outline none important,
   with the comment below. The comment states the intent and the selector did the opposite:
   :focus-visible IS the keyboard case, so it removed the focus ring from every button, input and
   textarea in all seven experiences precisely when a keyboard user needed it. Measured: a real Tab
   onto any control painted nothing. This is the same form theme.css already uses. */
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none !important; /* show only for keyboard navigation */
}
.brio-experience .selected_step_3.selected_items.brio.without_faq ul {
    gap: 2px;
    display: none;
}
.stiff .selected_step_3.selected_items.without_faq label input, .selected_step_3.selected_items.brio.without_faq li label input, .selected_step_3.selected_items.brio.without_faq li label textarea {
    background: transparent !important;
    padding: 0 !important;
    border: none;
    text-transform: none !important;
    font-size: 19px;
    min-height: initial;
    height: initial;
}

.stiff .selected_step_3.selected_items.without_faq ul li {
    margin: 0;
    padding: 0;
}

.selected_items li {
    padding: 0 !important;
}

.stiff .selected_step_3.selected_items.without_faq label div, .selected_step_3.selected_items.brio.without_faq label div {
    font-size: 17px;
    letter-spacing: 0;
    text-transform: capitalize;
    position: relative;
}

.stiff .selected_step_3.selected_items.without_faq label div:after, .selected_step_3.selected_items.brio.without_faq label div:after {
    content: ':';
    padding-right: 3px;
}


.message_area.intial_message.positon_act {
    display: none;
}
li.image-item img {
    margin-bottom: 20px !important;
}
/* .start_from.product-info__block-item {
    padding-top: 15px;
} */
.stiff .step-2-content.no-chnage.step-content.active_position .content-inner.type_name ul,
.stiff .step-2-content.no-chnage.step-content.active .content-inner.type_name ul {
    margin: 0;
}
/* .stiff .step-2-content.no-chnage.step-content.active .content-inner.type_name {
   min-height: 200px;
} */
.hidden_product {
    max-height: auto;
    min-height: auto !important;
    padding: 0;
}
/* .start_from.product-info__block-item {
    margin-top: -55px !important;
    display: flex;
} */
.content-inner.type_name label span.active {
    clear: both;
    display: flex;
    padding-top: 10px;
}
.content-inner.type_name ul li:last-child {
    margin-bottom: 0;
}
.hidden_product li {
   border: none !important;
}
line-item.line-item.experience-name quantity-selector.quantity-selector {
    display: none;
}
/* li.qty-zero {
    pointer-events: none;
} */
.list-of-babies ul li.qty-zero .select {
    background: #d9d9d9 !important;
    color: #000 !important;
}
li.qty-zero button.quantity-selector__button, li.qty-zero quantity-selector.quantity-selector_breads quantity-input input {
    pointer-events: none;
    opacity: 0.2;
}
.step-2-content.no-chnage.step-content.active_position .list-of-babiess.babies-contents ul li,
.step-1-content.brio.no-chnage.step-content.active_position .list-of-babiess.babies-contents ul li {
    width: 90px;
    flex: 0 0 90px;
    padding: 0;
}
.selected_step_3.breads_change.selected_items.without_faq button.remove-btn,
.selected_step_2.breads_change.selected_items.without_faq.brio button.remove-btn {
    display: none;
}
.step-2-content.no-chnage.step-content.active_position button.quantity-selector__button.minus_button,
.step-2-content.no-chnage.step-content.active_position quantity-selector.quantity-selector_breads quantity-input ,
.step-2-content.no-chnage.step-content.active_position button.quantity-selector__button.plus_button,
step-1-content.brio.no-chnage.step-content.active_position button.quantity-selector__button.minus_button,
.step-1-content.brio.no-chnage.step-content.active_position quantity-selector.quantity-selector_breads quantity-input ,
.step-1-content.brio.no-chnage.step-content.active_position button.quantity-selector__button.plus_button  {
    width: 30px;
}
.header_bottom {
    margin-top: 15px;
}
.close_button {
    display: flex
;
    align-items: center;
    gap: 20px;
}
.selected_step_3.breads_change.selected_items ul li quantity-selector {
    display: none;
}
.changes_confirm {
    background: #AE1F2B;
    color: #fff;
    font-size: 14px;
    min-width: 100px;
    height: 32px;
    text-align: center;
    align-items: center;
    line-height: 32px;
    padding: 0 10px;
    cursor: pointer;
}
.show_normal {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.show_in_popup {
    display: none;
}
.step-2-content.brio.step-content.active_position input,
.step-2-content.brio.step-content.active_position textarea,
.step-3-content.schlech.step-content.active_position input,
.step-3-content.schlech.step-content.active_position select {
max-width: 100%;
}

.step-2-content.brio.grid.step-content.active_position,
.step-3-content.schlech.step-content.active_position {
    background: #f6f4dc;
}
.active_position .show_normal {
    display: none;
}
.active_position .show_in_popup {
  display: flex;
    width: 100%;
    justify-content: space-between;
  
}
.step-2-content.brio.grid.step-content.active_position .prev_next,
.step-3-content.schlech.step-content.active_position  .prev_next {
    display: none;
}
.step-2-content.no-chnage.step-content.active_position,
.step-1-content.brio.no-chnage.step-content.active_position,
.step-2-content.brio.step-content.active_position,
.step-3-content.schlech.step-content.active_position
 {
    position: fixed;
    max-width: 550px;
    width: 90%;
    z-index: 999;
    top: 25%;
    left: 0;
    right: 0;
    min-height: 400px;
    border-radius: 8px;
    margin: 0 auto;
    z-index: 9;
    background: #fff;
    padding: 20px;
    gap: 24px;
    box-shadow: 0 8px 24px #0009;
    display: block;
    z-index: 99;
    background: #fff;
}
.selected_step_3.breads_change .breads_inner {
    flex-wrap: wrap;
}
.selected_step_3.breads_change .breads_inner button, .selected_step_3.breads_change .breads_items {
    display: none;
}
.selected_step_3.breads_change .breads_items[data-src] {
    display: flex;
}
.selected_step_2.breads_change.brio .breads_items[data-src] {
    display: flex;
}
.selected_step_3.breads_change .breads_items[data-src]:hover:after,
.selected_step_2.breads_change.brio .breads_items[data-src]:hover:after {
    display: none;
}
.selected_step_3.breads_change.selected_items ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex
;
    flex-wrap: wrap;
    gap: 10px;
    /* min-height: 178px; */
    line-height: normal;
}
.selected_step_3.breads_change.selected_items ul li, .selected_step_2.breads_change.selected_items.without_faq.brio ul li {
    width: 50px;
    height: 45px;
    flex: 0 0 45px;
    padding: 0;
    border: 1px dotted #d2d2d2;
    line-height: normal;
}
.selected_step_3.breads_change.selected_items ul li img, .selected_step_2.breads_change.selected_items.without_faq.brio ul li img {
    width: 100%;
    height: 100%;
}
.prev_next .next.active {
    background: #ae1f2b;
    color: #fff;
}
.breads_items {
    width: 50px;
    height: 50px;
    border: 1px dotted #d2d2d2;
    display: flex;
    min-width: 50px;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-inline-start: 0 !important;
    transition: transform .2s 
ease, box-shadow .2s 
ease;
}
.breads_items[data-src] {
     border: 1px solid #f3f3f3;
}

.breads_items img {
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
}

.breads_items.dragging {
  opacity: 0.9;
  transform: scale(1);
  z-index: 100;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.bread-placeholder {
  background: rgba(243, 243, 243, 0.5);
  border: 2px dashed #ccc;
  border-radius: 0px;
  visibility: visible !important;
   flex: 0 0 40px;
  width: 40px !important;
  height: 40px;
  min-width: 40px !important;
  min-height: 40px;
  padding: 2px;
 
}
.breads_items[data-src]:hover::after { 
    content: '';
    background: rgba(243, 243, 243, 0.8);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    top: 0;
}
ul.text-subdued li {
    font-size: 13px;
}
.remove-btn {
    position: absolute;
    width: 10px;
    height: 10px;
    line-height: 0px;
    border-radius: 0;
    border: none;
    background: #000;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s 
ease;
    z-index: 5;
    /* display: flex
; */
    /* justify-content: center; */
    /* align-items: center; */
    right: 2px;
    top: 2px;
    padding: 2px 0 4px 1px;
}

.breads_items:hover .remove-btn {
  opacity: 1;
}

/* .list-of-babiess.babies-contents {
    height: 320px;
    overflow-y: scroll;
} */

.message_area {
    color: #000;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.Breads_message {
    margin-bottom: 0px;
}
.list-of-babiess.babies-contents ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 6px;
    flex-wrap: wrap;
}
quantity-selector.quantity-selector_breads {
    display: flex;
    width: 100px;
}

button.quantity-selector__button.minus_button {
    width: 32px;
    border: 1px solid #f3f3f3;
    height: 33px;
}

quantity-selector.quantity-selector_breads quantity-input {
    width: 33px;
    height: 33px;
}

quantity-selector.quantity-selector_breads quantity-input input {
    padding: 0;
    width: 100%;
    height: 33px;
}

button.quantity-selector__button.plus_button {
    width: 32px;
    border: 1px solid #f3f3f3;
    height: 33px;
}
.list-of-babiess.babies-contents ul li {
    width: 98px;
    flex: 0 0 98px;
    padding: 0;
}
.breads_inner {
    display: flex;
    width: 100%;
    overflow-y: scroll;          
    /* enable scrolling */
    scrollbar-width: none;   
    /* for Firefox */
    -ms-overflow-style: none;
    gap: 6px; 
    margin: 0;
    overflow-x: hidden;
}


.product-infos {
   
   
    max-width: 647px;
    padding-right: 0 !important;
    width: 100%;
}

.selected_breads {
    display: block;
    width: 100%;
    margin: 0 0 10px 0;
    font-size: 14px;
}


.interview_text ul li:before {content: '';
    width: 8px;
    height: 8px;
    background: #000;
    border-radius: 50%;
    position: absolute;
    top: 9px;
    left: 0;
}
.interview_text {
    margin-bottom: 10px;
}

.interview_text ul li {
    position: relative;
    padding-left: 20px;
    line-height: 25px !important;
}
.doll-experince-header {
    background: #F6F4DC;
    width: 100%;
    text-align: center;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 500;
    width: 100%;
}
.selected_step_1.selected_items.interview {
    display: none;
}
safe-sticky.product-infos {
    padding-right: 40px;
}

.step-2-content.step-content.change_bg .content-inner.type_name {
    background: transparent;
}
.prev_next > div {
    background: #f5f5f5;
    min-width: 110px;
    text-align: center;
    color: #D2D2D2;
    height: 32px;
    line-height: 32px;
     font-size: 12px;
  
}

.prev_next > div.active {
    background: transparent;
    color: #AE1F2B;
    border: 1px solid #AE1F2B;
   
}
.play-button svg path {
    fill: #fff;
}
.step_1_videos {
   
    width: 100%;
}
div#youtube-player-container {
    width: 100%;
}
.product .video {
    width: 100%;
    height: auto;
}
.product iframe {
    width: 100%;
    min-height: 500px;
}
.contBtn {
    text-align: center;
    max-width: max-content;
    margin: 0 auto;
    background: #d32929;
    color: #fff;
    padding: 10px 15px;
    margin-top: 20px;
}
.contBtn {
    display: none;
}
.steps-title ul li:last-child:after{
    display: none;
}
.steps-title ul {
    display: flex;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin-left: 0;
}
.steps-title ul { /* Or use body for the entire page */
  -ms-overflow-style: none;    /* IE and Edge */
  scrollbar-width: none;       /* Firefox */
  overflow-y: scroll;          /* Ensures vertical scroll exists */
}

.steps-title ul::-webkit-scrollbar {
  display: none;               /* Chrome, Safari, Opera */
}

.steps-title ul li span, .steps-title ul li {
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
        min-width: max-content;
}
.steps-title ul li span {
    width: 32px;
    height: 32px;
    background: #F2F2F2;
    border-radius: 50%;
    color: #1C1D1D;
    font-size: 14px;
    font-weight: 800;
    border: 1px solid #F2F2F2;
    position:relative;
}
.step-1-content .top-header {
    padding-right: 0;

}
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    padding-right: 0px;
}
.steps-title ul li.selected span {
    background: #000;
    position: relative;
}

.steps-title ul li.selected span:after {
    content: '';
    background: url('/cdn/shop/files/checkmark-1.svg?v=1760425444');
    position: absolute;
    background-size: contain;
    width: 16px;
    height: 16px;
}
.list-of-babies.list-of-selected-items {
    list-style: none;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}
.list-of-babies.list-of-selected-items .selected_items {
   
    max-width: 48.2%;
   
}
@media screen and (min-width: 18001px) {
.list-of-babies.list-of-selected-items .selected_items {
   
    max-width: 49.2%;
   
}

}
.list-of-babies.list-of-selected-items .selected_items {
    flex: 0 0 auto;
    background: #fafafa;
    border: 1px solid #00000008;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    max-width: 49.2%;
    width: 100%;
}

@media screen and (min-width: 801px) and (max-width: 1400px ) { 
.list-of-babies.list-of-selected-items .selected_items {
     max-width: 100%;
}
}
.selected_items li.active {
    border: none;
}
.selected_items li.active {
    border: none;
}

.selected_step_1.selected_items li.active span:before {
    content: "";
    border: 1px solid #000;
    border-radius: 0;
    margin: 0 8px 0 0;
    height: 18px;
    width: 18px;
    display: inline-block;
    color: #ccc;
}
.selected_step_1.selected_items {
    text-align: center;
    display: flex
;
    flex-direction: column;
    align-items: center;
}
   
.selected_items .select {
    display: none !important;
}
.selected_items li {
    padding-bottom: 0 !important;
}
.selected_step_1.selected_items li.active span:after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border: 0;
    margin-top: 0;
    margin-left: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 10px;
    height: 5px;
    background: transparent;
    top: 4px;
    left: 4px;
    border: 2px solid #000;
    border-top: 0;
    border-right: 0;
    border-radius: 0;
}
.change_bg .top-header {
    padding-top: 0;
}
.video-controls {
  position: absolute;
    z-index: 1;
    top: initial;
    /* transform: translate(-50%); */
    color: #fff;
    left: 0;
    margin: 0 auto;
    right: 0;
    width: 100%;
    bottom: 20px;
    justify-content: center;
}

.video-controls button {
   background: #ae1f2b;
    min-width: 50px;
    text-transform: capitalize;
    height: 50px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
}
.video-controls button.replay-button {
    background: transparent;
    color: #000;
}
.list-of-babies.list-of-selected-items {}

.list-of-babies.list-of-selected-items .certificate_fields {
    padding: 0;
    background: transparent;
    margin: 0;
}
.step-vidoes.active .prose {
    position: absolute;
    z-index: 1;
    top: 39%;
    /* left: 0; */
    /* right: 0; */
    margin: 0 auto;
    transform: translate(-50%);
}

.video-container {
    position: relative;
}

.list-of-babies.list-of-selected-items .certificate_fields div {
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.list-of-babies.list-of-selected-items .certificate_fields div label {
    padding: 0;
    min-width: 80px;
}
.close_button {
    cursor: pointer;
}
.change_bg {
    position: fixed;
    max-width: 550px;
    width: 100%;
    z-index: 999;
    top: 15%;
    left: 0;
    right: 0;
    min-height: 400px;
    border-radius: 8px;
    
    margin: 0 auto;
   
    background: #fff;
    padding: 24px;
    gap: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.60);
}
.selected_step_1.selected_items li.active span {
    position: relative;
}

.selected_step_1.selected_items li.active label {
    display: flex;
}
.selected_items {
    position: relative;
    min-height: 285px;
}
.change-button {
    border: 1px solid #0000001A;
    max-width: 100px;
    min-width: 100px;
    margin: 0 auto;
    height: 32px;
    line-height: 32px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    text-transform: capitalize;
    margin-top: 15px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px
}
.prev_next {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    
}
samp {
    font-family: var(--heading-font-family);
}
span.pro_price sup, .pro_price-total sup {
    padding-left: 5px;
    font-size: 22px;
    letter-spacing: 1px;
}
.product .product-infos [data-block-id=price] sale-price, .product .product-infos [data-block-id=price] compare-at-price {
    font-size: 26px;
}
.prev_next div.active {
     opacity: 1;
    /* pointer-events: none; */
    cursor: pointer;
   
}
.prev_next div.disable,
/* #31643 N1/N2 (2026-09-28): this rule only ever matched a plain .prev_next wrapper. Steiff's
   and Handbag's visible Continue/Prev is a `.block_prev_next` div instead (never covered here),
   so a real mouse click on a disabled Continue relied only on each experience's own JS check.
   STEIFF-BRIO/HANDBAG now guard it in JS too, but this closes the same CSS-level gap already
   closed for `.prev_next`, for defense-in-depth and consistency. Revert: delete the added
   `.block_prev_next div.disable` selector below. */
.block_prev_next div.disable {
    opacity: 1;
    /* pointer-events: none; */
    cursor: not-allowed;
    pointer-events: none;
}
.step-1-content.step-content.change_bg .content-inner {
    background: transparent;
}
.step-1-content.step-content li.active span::before,
.step-1-content.step-content li:hover span::before  {
  background: url('/cdn/shop/files/checkout_active.png?v=1791898514');
}


.step-1-content.step-content li span:before {
     content: "";
    background: url('/cdn/shop/files/check_out_bg.png?v=1791898514');
   margin-top: 3px;
    margin-right: 5px;
    height: 18px;
    width: 18px;
    display: inline-block;
    background-repeat: no-repeat !important;
    background-size: 100% !important;
    
   
}
.step-1-content.step-content li span {
    display: flex;
     position: relative;
}
   

.steps-title ul li.active span {
    background: #AE1F2B1A;
    border: 1px solid #AE1F2B;
    color: #AE1F2B;
}
.doll-experience input[type="radio"] {
 visibility: hidden;
 display: none;
}


.selected_step_3.selected_items li {
    border: none;
    width: 100%;
}

.selected_step_3.selected_items li input {
    width: 100%;
}

.selected_step_3.selected_items li textarea {
    width: 100%;
}

.steps-title ul li.active {color: #AE1F2B; cursor: default;}

.steps-title ul li {
    color: #1C1D1D;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    cursor:pointer;
}
button.quantity-selector__button.plus_button.disabled, button.quantity-selector__button.plus_button:disabled {
    /* cursor: alias; */
    opacity: 0.5;
}
.step-1-content .content-inner {
    background: #f6f4dc;
    margin: 20px 0;
    padding: 20px;
}

.step-1-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
product-form {
    display: none;
}
.certificate_fields input {
    background: transparent !important;
    border-bottom: 1px solid;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    padding: 2px 5px;
}
.certificate_fields input:focus-visible, .certificate_fields input:focus {
    background: transparent !important;
    border-bottom: 1px solid;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    padding: 2px 5px;
    box-shadow: none;
}
.doll-experience .shopify-section--main-product>.section-spacing {
    padding-top: 0;
    padding-left: 0;
}
span.moneySymol, span.pro_price, .pro_price-total {
    font-weight: normal;
    color: #554E4E;
    font-size: 34px;
}
.start_from.product-info__block-item {
    font-size: 24px;
     color: #000;
}
.checkout-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px !important;
}
.box-btn {
   text-align: center;
    background: #ae1f2b;
    color: #fff;
    text-transform: uppercase;
    max-width: 230px;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    padding: 0;
    margin-right: 0;
    /* position: absolute; */
    right: 0;
    width: 100%;
}
.top-fields, .middle-fields  {
   margin-bottom: 25px;
    display: flex;
    gap: 28px;
    align-items: center;
    justify-content: start;
}
.last-fields div {
    margin-bottom: 25px;
    display: block; 
}

.step-1-content ul li {
    display: block;
    align-items: center;
    line-height: 38px;
}

.step-1-content ul li label {
    display: flex;
    gap: 6px;
    align-items: center;
}

.step-1-content ul li label input {
    width: 20px;
   
}
form#add-multiple-to-cart {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}

.steps-based-content h3 {
    
    display: flex;
    gap: 10px;
    text-transform: capitalize;
    color: #000;
    font-size: 16px;
    line-height: normal;
}

.steps-based-content h3 span {
    color: #000;
    opacity: 40%;
    display: none;
}
.steps-title {
    border-bottom: 1px solid #0000000D;
    padding-bottom: 24px;
    padding-top: 24px;
    height: 80px;
}
.steps-based-content .step-content {
    display: none;
}
.steps-based-content .step-content.active {
    display: block;
}
.list-of-babies ul {
    list-style: none;
    margin: 0;
    display: flex;
/* max-height: 500px; */
    overflow: auto;
    flex-wrap: wrap;
    gap: 10px;
}
.list-of-babies ul li.active .select {
    background: #ECECEC;
    box-shadow: none;
    border: none;
    color: #A5A5A5;
}
.list-of-babies {
    margin-top: 20px;
}
.list-of-babies ul li.active {
    border-color: #ae1f2b;
    pointer-events: none;
}
.list-of-babies ul li {
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    max-width: 49%;
    width: 100%;
}

.change_bg .list-of-babies ul li {
     max-width: 48%;
}

.list-of-babies ul li img {
    /* max-width: 100px; */
    margin: 0 auto;
    height: 100px;
    object-fit: cover;
}
.list-of-babies.list-of-selected-items .selected_items li {
    width: 100%;
    max-width: 100%;
}

.list-of-babies ul li h4 {
    font-size: 14px;
    margin-top: 15px;
    margin-bottom: 10px;
    line-height: normal;
}

.list-of-babies ul li .select {
    background: #AE1F2B;
    text-align: center;
    color: #fff;
    font-size: 12px;
    max-width: 100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0;
    min-height: 32px;
    line-height: 32px;
    cursor: pointer;
    border: none;
}
#continueBtn {
      margin-top: 10px;
      display: none;
    }
    .step-1-video {
    display: block;
    width: 100%;
}
.step-1-video {
    display: block;
    width: 100%;
}
.viemo_video {
    width: 100%;
}
.step-vidoes.active {
display: block;
}
.step-vidoes {
    display: none;
}
.steps-title ul li:after {
    content: '';
    background: url(/cdn/shop/files/chevron-right-small.svg?v=1760425442);
    width: 24px;
    height: 24px;
    position: relative;
}
.certificate_fields label {
    display: block;
    padding-bottom: 8px;
}

.certificate_fields div {
    display: flex;
    margin-bottom: 21px;
    flex-direction: column;
    /* width: 40%; */
}

.certificate_fields input {
    display: block;
    height: 41px;
    padding: 10px 12px;
    color: #000;
    background: transparent !important;
    border-radius: 2px;
    font-size: var(--gfb-form-default-font-size);
    position: relative;
    flex: 1 1 auto;
    margin-bottom: 0;
    width: 100%;
    box-shadow: 0 1px 3px rgba(50,50,93,.15),0 1px 0 rgba(0,0,0,.02);
    transition: box-shadow .15s ease;
    outline: none;
    background-image: none !important;
    border: none;
}
.video-container.content-over-media .video-controls {
    position: absolute !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.step-content.slider.active ul {
            display: flex;
             flex-wrap: nowrap;
             overflow-x: auto;
             -webkit-overflow-scrolling: initial;
}


.step-content.slider.active ul li {
    flex: 0 0 auto;
    width: 33.33%;
    margin-right: 10px;
    padding: 20px;
    text-align: center;
}
/* body .cart-drawer__items {
    display: flex;
    flex-direction: column-reverse;
} */
.mob_image {
    display: none;
}

.doll-experince-header.image h4 {
    position: absolute;
}

.doll-experince-header.image img {
    width: 100%;
    object-fit: cover;
}
.content-inner.type_name ul {
    margin: 0;
}
.step-2-content.brio.step-content.active_position .content-inner.type_name {
    background: transparent;
    padding: 0;
}
@media screen and (max-width: 800px) {
    body .selected_train_initial ul {
    flex-direction: column !important;
}

body .selected_train_initial ul li {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
    .step-3-content.schlech.step-content.active .content-inner.type_name, .step-4-content.schlech.step-content.active .content-inner {
  padding: 70px 40px 20px;
}
.step-3-content.schlech.step-content.active .prev_next {
    justify-content: center;
}
    .list-of-babies ul li h4,
    .selected_step_3.selected_items.brio.without_faq label div {
        font-size: 13px;
    }
    body .start_from.product-info__block-item {
    font-size: 18px;
    color: #000;
}
.bottom-footer {
    padding-left: 20px;
    padding-right: 20px;
}
    /* .list-of-babiess.babies-contents {
    height: 200px;
    overflow-y: scroll;
} */
    body .selected_step_3.breads_change.selected_items ul li, body .selected_step_2.breads_change.selected_items.without_faq.brio ul li {
    width: 69px;
    height: 45px;
    flex: 0 0 69px;
   
}
    span.moneySymol, span.pro_price, .pro_price-total {
        font-size: 30px;
    }
    ul.jj li {
    padding-left: 0 !important;
}


    body .step-content.active {
        padding: 0 20px;
    }
    body .steps-title ul, .steps-title ul li span, .steps-title ul li {
        gap: 8px;
    }
    .step-2-content.no-chnage.step-content.active_position .top-header {
    padding: 0 !important;
}
.product .product-infos [data-block-id=price] {
        margin: 1.5rem 0 0 0;
    }
body .list-of-babies.babies-content {
    padding: 0;
    display: block;
}
body .list-of-babies ul li {
    padding: 10px 5px;
}
    body .selected_items {
    position: relative;
    min-height: 250px;
} 
body .list-of-babies ul li {
    max-width: 48%;
}
.list-of-babies.list-of-selected-items {
    padding: 0;
}
.list-of-babies.list-of-selected-items .selected_items {
    padding: 10px 10px;
}
.list-of-babies.list-of-selected-items .selected_items {
  
    max-width: 100%;
    width: 100%;
    flex: 0 0 100%;
}
    body .selected_step_2.selected_items li {
    border: none;
    padding: 0;
}
    body safe-sticky.product-infos {
    padding-right: 0px;
}
    body .mob_image {
    display: block;
}
body .desktop_image {
    display: none;
}
.doll-experience .shopify-section--main-product>.section-spacing {
    
    background: #f7f7f7;
}
    body .doll-experince-header {
    text-align: left;
     justify-content: left;
    font-size: 20px;
   padding: 0px;
}
body .doll-experince-header h4 {
    padding: 0 20px;
}
body .shopify-section--main-product>.section-spacing {
    padding-right: 0;
}
    body  .shopify-section--main-product product-rerender .product {
        gap: 0px;
    }
    body .steps-title {
    border-bottom: 1px solid #0000000D;
    padding-bottom: 20px;
    padding-top: 20px;
   background: #fff;
    height: auto;
    padding-left: 20px;
    padding-right: 20px;
}
.product-info__block-item {
    margin-bottom: 0 !important;
}
.product-info__block-item.steps-based-content {
    margin-top: 0 !important;
}
body .prev_next {
    gap: 15px;
}
body .content-inner.type_name li {
    padding-left: 0;
}
body .show_normal {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: initial;
    align-items: flex-start;
    flex-direction: column;
}
.step-content.active {
    /* background: #F7F7F7; */
    /* padding-bottom: 25px; */
        margin-bottom: 20px;
}
.step-1-content ul li {
   line-height: normal !important;
        margin-bottom: 15px;
        padding: 0px 15px ;
}

body .box-btn {
        max-width: 185px;
        margin-left: 0 !important;

}
ul.breads_inner.ui-sortable li {
    padding: 0 !important;
    margin: 0;
}
.stiff .step-2-content.no-chnage.step-content.active .content-inner.type_name {
  padding-left: 0px;
    padding-right: 0px;
    margin-top: 10px;
}
.interview_text {
    margin-bottom: 20px;
}
.step-1-content ul li:last-child {
   
    margin-bottom: 0px;
}
.interview_text ul li:before {
    top: 6px;
}
.top-header {
       
        align-items: initial;
        flex-direction: column;
        padding-top: 15px;
}
.steps-based-content h3 {
   justify-content: start;
}
.prev_next {
          justify-content: left;
        margin-top: 10px;
   
}
.v-stack, .prose {
    padding-left: 20px;
    padding-right: 20px;
}
body .change_bg {
    position: fixed;
    max-width: 550px;
    width: 98%;
    z-index: 999;
    top: 18%;
    left: 0;
    right: 0;
    min-height: 400px;
    border-radius: 8px;
    margin: 0 auto;
    z-index: 9;
    background: #fff;
    padding: 10px;
    gap: 24px;
}
.step-content.change_bg .top-header {
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}
.box-btn {
    margin-left: 20px;
}
    
}

@media screen and (min-width: 768px) {
   
    .mobile_only_train_ticket {
    display: none;
}
    .video_area video {
    max-height: 720px;
    min-height: 720px;
    position: relative;
    object-fit: cover;
}
.content-over-media {
    height: 720px;
}
.desktop_hover-over_text {
    display: flex;
    text-align: center;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    font-size: 14px;
}
}



 .video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
/* 
  display: flex; */
  justify-content: space-between;
  align-items: center;

  /* ✅ gradient background */
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.controls-left {
  display: flex;
  align-items: center;
  gap: 6px; /* ✅ reduced spacing */
}

.controls-right {
  display: flex;
}

button {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.hidden {
  display: none;
}

/* ✅ SLIDER STYLE */

/*
Source - https://stackoverflow.com/a/38163892
Posted by deathangel908, modified by community. See post 'Timeline' for change history
Retrieved 2026-04-03, License - CC BY-SA 3.0
*/

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .volume-control {
   
        width: 100px;
        -webkit-appearance: none;
        background-color: rgba(255, 255, 255, 0.2);
        padding: 0;
        border: none;
        border-radius: 10px;
    }
    
    .volume-control::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: #fff;
      margin-top: -1px;
      border-radius: 10px;
    }
    
    .volume-control::-webkit-slider-thumb {
       width: 20px;
      -webkit-appearance: none;
      height:  20px;
      cursor: ew-resize;
      background: #fff;
     margin-top: -4.5px;
    
      border-radius: 50%;
    }

}
/** FF*/
.volume-control::-moz-range-progress {
  background-color: #fff; 
}
.volume-control::-moz-range-track {  
  background-color: rgba(255, 255, 255, 0.4);
}
/* IE*/
.volume-control::-ms-fill-lower {
  background-color: #fff; 
}
.volume-control::-ms-fill-upper {  
  background-color: rgba(255, 255, 255, 0.4);
}
.video-container.controls-hidden .video-controls {
    background: none;
}
.top_heading {
    font-weight: 500;
    font-size: 32px;
    line-height: 20px;
    font-family: var(--experience_heading_font);
    text-transform: var(--heading-text-transform);
}

.brio-experience .also_include, .bag-experience .also_include {
    color: #000000;
    background: rgba(0, 0, 0, 0);
    border: 1px solid #e5e5e5;
    min-height: 125px;
}
li.selected.active_selected {
    color: #000;
}
.bottom-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 0px;
        align-items: center;
}
.bottom-footer .box-btn {
    display: none;
}
    body .start_from.product-info__block-item {
        font-size: 30px;
    }
    .steps-based-content .step-4-content.no-chnage.step-content.active ul {
    width: 100%;
}
.barbie-experience .step-3-content.step-content.active .box-btn {
    margin-top: 20px;
        margin-left: auto;
}
.bag-experience .included_products {
    display: flex;
    gap: 13px;
}
.bottom-footer .box-btn {
    text-transform: capitalize;
}
.bag-experience .also_include {
    min-width: 14.5%;
    text-align: center;
    padding: 0;
}
.bag-experience .selected_step_4.selected_items li input {
    font-size: 14px;
    text-transform: uppercase !important;
}
.hover_grid.active .pro_info_area img {
    width: 100%;
    object-fit: cover;
    align-items: center;
    display: flex;
    justify-content: center;
    height: 100%;
}
/* ✅ MOBILE OPTIMIZATION */
@media (max-width: 768px) {
         .brio-experience .mobile_only_train_ticket .train_faq_nyc {
            position: relative;
            right: 10px;
    }
    .brio-experience .mobile_only_train_ticket .train_faq_logo, .train_faq_nyc {
    width: 30%;
}
    .brio-experience .train_content_area h3 {
    font-size: 27px;
    margin-top: 10px;
    }
    .brio-experience .mobile_only_train_ticket .train_faq_logo img {
    max-width: 115px;
}
.brio-experience .mobile_only_train_ticket .mob_tag_image {
    width: 40%;
}
    .brio-experience .mobile_only_train_ticket .train_faq_logo {
        top: 20px;
        position: relative;
        left: 20px;
    }
    .brio-experience .step-2-content.brio.step-content.active .content-inner.type_name {
    background: initial !important;
    }
    .brio-experience .step-2-content.brio.step-content.active {
     background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 0;
}
    .live_heading.desktop_only, .live_content.desktop_only {
    display: none;
}
.brio-experience .selected_train_initial {
  top: 74%;
    left: 74%;
    max-width: 115px;
}
.brio-experience .selected_step_4.selected_items.hidden_product {
    padding: 0 20px;
}
.brio-experience .selected_train_initial li:first-child input {
    font-size: 13px;
}
.brio-experience .selected_train_initial li:last-child textarea {
    font-size: 9px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: initial;
    text-align: center;
}
    .brio-experience .selected_train_tag img {
    max-width: 180px;
}
 .brio-experience .train_content_area {
    padding-right: 38px; 
    padding-left: 38px;
}
    .brio-experience .step-2-content.brio.step-content.active .prev_next {
        justify-content: center;
    }
    body .tran_logo_area, .tag_train_desktop {
    display: none;
}
.mob_tag_image {
    position: relative;
}
.mob_tag_image img {
    width: 200px;
}
body .live_heading {
    left: 44%;
    top: 74%;
    width: 105px;
    text-align: center;
    justify-content: center;
}
.mob_tag_image span.main_name, .mob_tag_image .post_text {
    font-size: 13px;
}
body .live_content {
   left: 42.2%;
        font-size: 9px;
        top: 81%;
       min-width: 105px;
        max-width: 105px;
        display: flex;
        justify-content: center;
}
.train_faq_logo {
    display: flex;
    justify-content: center;
    align-items: self-start;
}

.train_faq_nyc {
    display: flex;
    justify-content: center;
    align-items: center;
}
.ticket_content_area {
    flex-direction: column;
}
body .train_content_area, body .train-ticket {
  width: 100%;
}
.mobile_only_train_ticket {
    display: flex;
    justify-content: center;
    /* align-items: center; */
}
    .brio-experience .step-3-content.step-content.active {
    padding: 0;
}
.selected_train_initial li:last-child textarea {
    font-size: 9px;
  
}
.brio-experience .step-3-content.step-content.active .top-header {
    padding-left: 20px;
    padding-right: 20px;
}
.selected_train_initial li:first-child input {
    font-size: 13px;
}
.selected_train_initial {
    
    top: 73%;
    left: 74%;
    
    width: 110px;
}
.selected_train_tag img {
    max-width: 160px;
}


    .bag-experience .also_include {
        max-width: 106px !important;
         min-width: initial;
         min-height: initial;
    }
    .bag-experience .included_products {
    flex-wrap: wrap;
}
.bag-experience .bottom-footer .product-info__block-item.pro_price {
    margin: 0;
}
    .bag-experience .selected_step_5.selected_items.hidden_product ul {
    width: calc(33.333% - 10px);
}
    .step-4-content.schlech.step-content .list-of-babies.list-of-selected-items {
   flex-wrap: wrap !important;
}
    .step-4-content.schlech.step-content.active .list-of-babies .selected_step_2.selected_items, .step-4-content.schlech.step-content.active .list-of-babies .selected_step_3.selected_items {
    width: 100% !important;
    max-width: 100% !important;
}
    .bauble-bar-exprience .also_include, .brio-experience .also_include {
    min-height: initial;
    max-width: fit-content !important;
    }
    .bauble-bar-exprience .selected_step_4.selected_items.hidden_product, .brio-experience .selected_step_4.selected_items.hidden_product, .brio-experience .breads_pro_area,
    .bag-experience .selected_step_5.selected_items.hidden_product {
   flex-direction: column;
}
.brio-experience .also_include, .bag-experience .also_include {
         max-width: 125px;
        text-align: center;
    }
    .interview_text.ccc li p {
        font-size: 14px;
    }
    .interview_text.ccc ul li {
    padding: 0;
    margin: 5px;
}
.bottom_area .prev_next {
    margin-top: 0;
}

    .mobile_hover-over_text {
    display: flex;
    text-align: center;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    font-size: 14px;
}
  .video-controls {
    padding: 6px;
  }

  button {
    font-size: 12px; /* smaller icons */
  }

  .volume-control {
    width: 80px;
  }
}

/* ✅ FOLD STATE */
.video-container.controls-hidden .controls-left, .video-container.controls-hidden .video-progress-wrap {
 opacity: 0;
 visibility: hidden;
}
.user-info {
  
    text-align: center;
    margin: 10px 0;
}
.video-controls .controls-right button svg {
    width: 34px;
    height: 34px;
}
.video-container.controls-hidden button.toggle-fold svg {
    transform: rotate(180deg);
}
button.quantity-selector__button.plus_button svg path, button.quantity-selector__button.minus_button  svg path {
    stroke: #000;
}
body .video-controls button.toggle-fold {
    background: transparent !important;
}

.video-progress-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.bottom-control {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 10px;
}
.video-progress-bars {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 10px;
  background: rgba(255,255,255,0.3);
  outline: none;
  cursor: pointer;
  padding: 0;
  border: none
}

/* Chrome / Safari */
.video-progress-bars::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: transparent;
}

.video-progress-bars::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: #fff;
  margin-top: -4px;
  cursor: pointer;
}

/* Firefox */
.video-progress-bars::-moz-range-track {
  height: 4px;
  background: transparent;
}

.video-progress-bars::-moz-range-thumb {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.breads_area {
    position: sticky;
    top: 0px;
    width: 100%;
    background: #fff;
    padding: 10px 0;
    z-index: 1;
}


/* age varification css */


.otAgeVerifier.otAgeVerifier h1,.otAgeVerifier.otAgeVerifier h2,.otAgeVerifier.otAgeVerifier h3,.otAgeVerifier.otAgeVerifier h4,.otAgeVerifier.otAgeVerifier h5,.otAgeVerifier.otAgeVerifier h6,.otAgeVerifier.otAgeVerifier p {
    color: #fff
}

.otAgeVerifier.otAgeVerifier #av-overlay-wrap {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999
}

.otAgeVerifier.otAgeVerifier #av-overlay-form {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translate(-50%) translateY(-50%);
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: none !important;
    margin: 0;
    padding: 24px;
    z-index: 99999999999!important;
    text-align: center;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    width: 96%;
    max-width: 800px
}

.otAgeVerifier.otAgeVerifier .headline_text {
        font-weight: 700;
    margin-bottom: 12px;
    font-size: 36px;
    line-height: normal;
}

.otAgeVerifier.otAgeVerifier select.av_datepicker {
    display: inline-block;
    width: auto;
    margin: 0 4px 2px 0;
    font-size: 16px;
    padding: 4px;
    border-radius: 4px;
    background: #fff;
    height: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    color: #000
}

.otAgeVerifier.otAgeVerifier .av_date_submit_form {
    width: 90%;
    max-width: 300px;
    margin: 0 auto;
    overflow: hidden
}

.otAgeVerifier.otAgeVerifier .av_date_submit,.otAgeVerifier.otAgeVerifier .av_date_cancel {
    width: 100%;
    padding: 12px 0 0
}

.otAgeVerifier.otAgeVerifier .av_date_submit {
    float: left
}

.otAgeVerifier.otAgeVerifier .av_date_submit>a,.otAgeVerifier.otAgeVerifier .av_date_cancel>a {
    display: block;
    padding: 10px 0;
    text-decoration: none;
    cursor: pointer;
    color: #fff;
    font-weight: normal
}

#av_submit_form:hover,#av_cancel_form:hover {
    opacity: .8;
    transition: all .2s ease
}

.otAgeVerifier.otAgeVerifier .av_date_cancel {
    float: right
}

@-webkit-keyframes form_shake {
    0%,to {
        margin-left: 0
    }

    10%,30%,50%,70%,90% {
        margin-left: -10px
    }

    20%,40%,60%,80% {
        margin-left: 10px
    }
}

@keyframes form_shake {
    0%,to {
        margin-left: 0
    }

    10%,30%,50%,70%,90% {
        margin-left: -10px
    }

    20%,40%,60%,80% {
        margin-left: 10px
    }
}

.otAgeVerifier.otAgeVerifier .form_shake {
    -webkit-animation-name: form_shake!important;
    animation-name: form_shake!important
}

.otAgeVerifier.otAgeVerifier .logo-image {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
}

.otAgeVerifier.otAgeVerifier .logo-image img {
    max-width: 50%
}

@media (min-width: 992px) {
    .otAgeVerifier.otAgeVerifier #av-overlay-form {
        max-width:40%
    }
}

.otAgeVerifier.otAgeVerifier .av_checkbox_form {
    display: flex;
    align-items: center;
    justify-content: center
}

.otAgeVerifier.otAgeVerifier .av_checkbox_form label {
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,1)
}

.otAgeVerifier.otAgeVerifier #av_datepicker_form {
    margin-top: 18px;
    margin-bottom: 6px;
}

@media (max-width: 767px) {
    body .list-of-babiess.babies-contents ul li {
    width: 32%;
    flex: 0 0 32%;
  
}
    body .breads_items {
    width: 55px;
    height: 55px;
   
    min-width: 55px;
    }
    .otAgeVerifier.otAgeVerifier .av_date_submit_form {
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }
    .otAgeVerifier.otAgeVerifier .headline_text {
        font-size: 25px;
    }
}

.otAgeVerifier.otAgeVerifier .av-compliance-checkboxes {
    text-align: left;
    margin: 16px auto;
    width: 90%;
    max-width: 500px
}

.otAgeVerifier.otAgeVerifier .av-compliance-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: #fffffff2;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    line-height: 1.5
}

.otAgeVerifier.otAgeVerifier .av-compliance-item input[type=checkbox] {
    min-width: 18px;
    min-height: 18px;
    margin-top: 3px;
    cursor: pointer;
    accent-color: #333
}

.otAgeVerifier.otAgeVerifier .av-compliance-label {
    color: #333;
    font-size: 14px
}

.otAgeVerifier.otAgeVerifier .av-compliance-label a {
    color: #5c6ac4;
    text-decoration: underline
}

.otAgeVerifier.otAgeVerifier .av-compliance-label a:hover {
    color: #3f4eae
}
.stiff_static_image {
    margin: 25px 0 20px 0;
}
.product .product-info [data-block-id=price] {
    margin: 20px 0;
}

/* grid hover */
.hover_grid.active ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    overflow-x: scroll;
    padding-top: var(--spacing-between-title-and-cards-mobile);
    padding-bottom: 1.25rem;
    z-index: 2;
    gap: 0;
}
 .hover_grid.active ul li { 
    display: block;
    margin: 0 .875rem 0 0;
    min-width: 13.375rem;
    overflow: hidden;
    position: relative;
    width: 13.375rem;
     }
.tall-panel__card-inner {
    height: 100%;
    margin: 0 auto;
    position: relative;
    width: 100%;
}
.tall-panel__card-image-wrapper {
    padding-bottom: 200%;
}
.tall-panel__card-image-wrapper .hover-grid-image {
    height: 100%;
    left: 50%;
    width: auto;
    position: absolute;
    top: 0;
    -webkit-transform: translateX(-50%);
    transform: translate(-50%);
    -o-object-fit: cover;
    object-fit: cover;
}
.pro_info_area {
    position: absolute;
    height: 100%;
    /* left: 50%; */
    width: 100%;
    /* transform: translate(-50%); */
    top: 0;
    display: none;
    width: 100%;
    left: 0;
    right: 0;
    padding: 0 !important;
}
.pro_info_area img.pro_image {
    width: 100%;
    max-width: 100%;
    height: 100%;
}
.pro_info_inner {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.75) 100%);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    padding-bottom: 18px;
    /* max-width: 244px; */
}

.pro_info_inner h4 {
    max-width: 215px;
    margin: 0 auto;
    left: 0;
    right: 0;
    /* position: absolute; */
}
.brio-experience .selected_step_3.breads_change.selected_items ul li, .brio-experience .selected_step_2.breads_change.selected_items.without_faq.brio ul li,
.bag-experience .list-of-babies.list-of-selected-items .bottom_selected_items .selected_items li {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    padding: 0;
    border: 1px dotted #d2d2d2;
    line-height: normal;
    min-width: 32px;
}
.brio-experience .selected_step_3.breads_change.selected_items ul, .brio-experience .selected_step_2.breads_change.selected_items.without_faq.brio ul,
 .bag-experience .list-of-babies.list-of-selected-items .bottom_selected_items .selected_items {
    gap: 4px;
}
.brio-experience .selected_step_3.breads_change.selected_items ul li img, .brio-experience .selected_step_2.breads_change.selected_items.without_faq.brio ul li img,
 .bag-experience .list-of-babies.list-of-selected-items .bottom_selected_items .selected_items li img {
     object-fit: contain;
}
.bag-experience .list-of-babies.list-of-selected-items .bottom_selected_items .selected_items li img {
    width: 100%;
    height: 100%;
}
.brio-experience .step-3-content .list-of-babies.list-of-selected-items {
    display: block;
    min-height: 431px;
    position: relative;
}
.brio-experience .breads_pro_area {
    gap: 4px;
}
.bag-experience .selected_step_4.selected_items {
    padding: 21px 0 5px;
    min-height: initial;
        display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.bag-experience .selected_step_4.selected_items li div {
    font-weight: 800;
}
.bag-experience .selected_step_4.selected_items li input, .bag-experience .selected_step_4.selected_items li div {
    font-size: 14px;
}
.bag-experience .selected_step_4.selected_items ul {
    list-style: none;
    margin: 0;
}
.brio-experience .selected_breads, .bag-experience .selected_breads, .luggage_tag {
    margin-bottom: 4px;
    color: #fff;
}
.bag-experience .list-of-babies.list-of-selected-items .selected_step_1.selected_items {
    flex-direction: row;
}
.bag-experience .list-of-babies.list-of-selected-items .selected_step_1.selected_items li img {
    display: none;
}
.brio-experience .list-of-babies.list-of-selected-items .selected_items, .bag-experience .list-of-babies.list-of-selected-items .selected_items {
    background: transparent;
    border: none;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    max-width: 100%;
    width: 100%;
    min-height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}
.brio-experience .selected_step_3.breads_change.selected_items.without_faq {
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    bottom: 0;
    display: block;
    text-align: left;
}
.brio-experience .list-of-babies.list-of-selected-items .selected_items .change-button {
    color: #000000;
    background: #ffffff;
    border: 1px solid #efefef;
}



@media only screen and (min-width: 960px) {
    .schleich-experience .step-2-content.hover_grid.active ul li {
    width: 20%;
}
    .schleich-experience .step-1-content.hover_grid.active ul li {
    width: 25%;
}
.schleich-experience .step-2-content.hover_grid.active .list-of-babies ul li.not-hover {
    width: 15.5% !important;
}
.schleich-experience .step-1-content.hover_grid.active .list-of-babies ul li.not-hover {
        width: calc(20.5%) !important;
    }
    .schleich-experience .step-1-content.hover_grid.active .list-of-babies ul li.active, .schleich-experience .step-2-content.hover_grid.active .list-of-babies ul li.active {
    width: 38% !important;
}
    .hover_grid.active ul {
        overflow: hidden;
       
    }
     .hover_grid.active ul li:first-child {
        margin-left: 0;
     }
     .hover_grid.active ul li:last-child {
        margin-right: 0;
     }
     .hover_grid.active ul li { 
     margin: 0;
        min-width: unset;
        -webkit-transition: width .2s ease-in-out;
        transition: width .2s ease-in-out;
        width: calc(16.67%);
        height: 430px;
        padding: 0;
        border: none;

     }
    
    .hover_grid.active .list-of-babies ul li.hover-active {
        width: calc(38%) !important;
   
}
.hover_grid.active .list-of-babies ul li.not-hover {
    width: calc(12.5%) !important;
   
}

}
/* .hover_grid.active .list-of-babies ul li {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    padding: 0px;
    text-align: center;
    cursor: pointer;
    max-width: 105px;
    width: 100%;
    min-height: 430px;
    height: 430px;
   transition: all 0.8s ease;
    
    
} */
.hover_grid.active .list-of-babies ul li h4 {
    display: none;
 
}
.hover_grid.active .list-of-babies ul li .select {
    display: none;
}
/* .hover_grid.active .list-of-babies ul li img {
    max-width: 100%;
    margin: 0 auto;
    height: auto;
    object-fit: cover;
} */
/* .hover_grid.active .list-of-babies ul li img.hover-grid-image {
 display: block;

    padding: 0;
    /* width: 100%; */
    object-fit: cover;
    height: 100%;
   
} */
.hover_grid.active .list-of-babies ul li img.pro_image {
  display: none;
    
  
}

.hover_grid.active .list-of-babies ul li.hover-active img.pro_image, .hover_grid.active .list-of-babies ul li.active img.pro_image, .hover_grid.active .list-of-babies ul li.active .pro_info_area,
.hover_grid.active .list-of-babies ul li.hover-active .pro_info_area  {
  display:block;
}
.hover_grid.active .list-of-babies ul li.hover-active img.hover-grid-image, .hover_grid.active .list-of-babies ul li.active img.hover-grid-image {
 display: none;
}

.hover_grid.active .list-of-babies ul li.active .pro_info_area, .hover_grid.active .list-of-babies ul li.hover-active .pro_info_area {
    padding: 30px 15px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
}
.hover_grid.active .list-of-babies ul li.active {
   
    width: 38% !important;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: end;
     transition: none !important;
    
}
.hover_grid.active .list-of-babies ul li.active img.pro_image {
    width: 100%;
    object-fit: cover;
    align-items: center;
    display: flex;
    justify-content: center;
    height: 100%;
}
.selected_step_2.selected_items .tall-panel__card-image-wrapper, .selected_step_3.selected_items .tall-panel__card-image-wrapper {
    padding-bottom: 0;
}
.selected_step_2.selected_items .pro_info_area img.pro_image, .selected_step_3.selected_items .pro_info_area img.pro_image {
    width: 100px;
    max-width: 100%;
    height: auto;
}
.selected_step_2.selected_items .pro_info_inner, .selected_step_3.selected_items .pro_info_inner {
    position: static;
    bottom: 0px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: none;
    box-shadow: none;
    padding-bottom: 0;
    max-width: 244px;
}
.selected_step_2.selected_items .pro_info_area, .selected_step_3.selected_items .pro_info_area {
    position: static;
    height: auto;
    /* left: 50%; */
    width: 100%;
    /* transform: translate(-50%); */
    top: 0;
    display: block;
    width: 100%;
    left: 0;
    right: 0;
    padding: 0;
}



.hover_grid.active .list-of-babies ul li.active h4, .hover_grid.active .list-of-babies ul li.hover-active h4 {
 display: block;
   
}

.hover_grid.active .list-of-babies ul li.active .select, .hover_grid.active .list-of-babies ul li.hover-active .select {
   display: block;
    
}
.list-of-babies.list-of-selected-items li img.hover-grid-image {
    display: none;
}
.product-info__block-item.steps-based-content {
    position: relative;
}
.change_bg img.hover-grid-image {
    display: none;
}
.selected_items li {
    background: none !important;
}






.brio quantity-selector.quantity-selector_breads button.quantity-selector__button.minus_button,
.brios quantity-selector.quantity-selector_breads button.quantity-selector__button.minus_button {
    display: none;
}

.brio quantity-selector.quantity-selector_breads quantity-input.quantity-selector__input-wrapper,
.brios quantity-selector.quantity-selector_breads quantity-input.quantity-selector__input-wrapper {
    display: none;
}

.brio .list-of-babiess.babies-contents ul li:hover:after,
.brios .list-of-babiess.babies-contents ul li:hover:after {
    content: '';
    background: rgba(000,000,000,0.2);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

.brio .list-of-babiess.babies-contents ul li,
.brios .list-of-babiess.babies-contents ul li {
    position: relative;
}

/* #31643 F1 (2026-09-28): this was `display:none` until `:hover` below, which means it had
   no box at all outside hover and a real Tab press could never land on the `.plus_button`
   inside it (`display:none` removes an element from the tab order; unlike `.remove-btn` a few
   lines up in this file, which already used opacity for the same hover-reveal and so was
   already reachable). Changed to always render, hidden with opacity+pointer-events instead of
   display, so the button is a normal Tab stop; the mouse `:hover` reveal is unchanged and a
   `:focus-within` reveal is added for keyboard, below. No click handler here is touched
   (assets/brio-experience.js / assets/bauble-bar-exprience.js own that, not this file).
   Revert: restore `display: none;` here and drop the `:focus-within` selectors below. */
.brio .list-of-babiess.babies-contents ul li quantity-selector.quantity-selector_breads,
.brios .list-of-babiess.babies-contents ul li quantity-selector.quantity-selector_breads  {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    top: 50%;
    height: auto;
    z-index: 1;
    transform: translateY(-50%);
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

.brio .list-of-babiess.babies-contents ul li:hover quantity-selector.quantity-selector_breads,
.brios .list-of-babiess.babies-contents ul li:hover quantity-selector.quantity-selector_breads,
.brio .list-of-babiess.babies-contents ul li:focus-within quantity-selector.quantity-selector_breads,
.brios .list-of-babiess.babies-contents ul li:focus-within quantity-selector.quantity-selector_breads {
    opacity: 1;
    pointer-events: auto;
}

/* #31643 F1 (2026-09-28): visible keyboard focus ring for the two native buttons this reveals
   on Tab (the train-car/bead "Add" `.plus_button` above, and the tray's "Remove" `.remove-btn`,
   which was already reachable but invisible off-hover). Same ring color as the shared
   `.exp-kb:focus-visible` rule earlier in this file's companion JS. Revert: delete this rule. */
.plus_button:focus-visible,
.remove-btn:focus-visible {
    outline: 3px solid #1e73ff;
    outline-offset: 2px;
}
.remove-btn:focus-visible {
    opacity: 1;
}
button.quantity-selector__button.plus_button {
    width: 33px !important; 
    border: none;
    height: 33px;
    background: #fff;
    border-radius: 50%;
}

/* schleich css */ 
.step-4-content.schlech.step-content.active .list-of-babies .selected_step_3.selected_items {
    width: 60%;
    max-width: 60%;
}
.step-4-content.schlech.step-content.active .list-of-babies .selected_step_2.selected_items {
    width: 40%;
    max-width: 40%;
}
.step-4-content.schlech.step-content.active .list-of-babies .selected_step_3.selected_items {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.step-4-content.schlech.step-content.active .box-btn {
    text-transform: capitalize;
    max-width: 120px;
    margin-top: 10px;
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
    -webkit-text-fill-color: #000 !important;
}
.step-4-content.schlech.step-content.active .content-inner {
    padding-top: 90px;
}
.step-4-content.schlech.step-content.active .creature_heading {
    text-align: center;
    font-size: 32px;
    font-weight:bold;
      font-family: var(--experience_heading_font);
}
.step-4-content.schlech.step-content.active .list-of-babies .selected_items {
    background: transparent;
    border: none;
    width: auto;
    max-width: 50%;
    min-height: max-content;
    padding: 10px 5px;
}
.step-4-content.schlech.step-content.active .list-of-babies .selected_items .change-button {
    position: relative;
    top: 0;
}
.step-4-content.step-content.active .content-inner {
    place-items: center;
}
.step-4-content.schlech.step-content .list-of-babies.list-of-selected-items {
    justify-content: center;
    flex-wrap: nowrap;
}
.step-3-content.schlech.step-content.active, .step-4-content.schlech.step-content.active {
    background: #de2928;
    padding: 50px 20px 20px;
}
.step-3-content.schlech.step-content.active .content-inner.type_name, .step-4-content.schlech.step-content.active .content-inner {
    width: 100%;
    background: #fff;
    border-radius: 50px;
    padding: 70px 50px 20px;
    position: relative;
}
.step-3-content.schlech.step-content.active .top-header, .step-4-content.schlech.step-content.active .top-header {
    display: none;
}
.step-3-content.schlech.step-content.active .content-inner.type_name::before, .step-4-content.schlech.step-content.active .content-inner::before {
    content: '';
    background-image: url(/cdn/shop/files/stich_logo.png?v=1791898514);
    background-repeat: no-repeat;
    background-position: right top;
    position: absolute;
    top: -32px;
    width: 100%;
    height: 100px;
        left: 50%;
    z-index: 9;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);     
}
.step-3-content.schlech.step-content.active .content-inner.type_name ul li label > div

 {
    display: none;
}
.step-3-content.schlech.step-content.active .content-inner.type_name ul li {
    margin-bottom: 18px;
}

.step-3-content.schlech.step-content.active .content-inner.type_name ul li label input {
    max-width: 100%;
    width: 100%;
    background: transparent !important;
    text-transform: initial !important;
    height: 50px;
    border-radius: 8px;
    border: 1px solid #CCC;
    background: #FFF;
    color: #000;
text-align: left;

font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.step-3-content.schlech.step-content.active .content-inner.type_name ul li label input::-webkit-input-placeholder {
  color: #CCC;
}

.step-3-content.schlech.step-content.active .content-inner.type_name ul li label input::-moz-placeholder {
  color: #CCC;
}

.step-3-content.schlech.step-content.active .content-inner.type_name ul li label input:-ms-input-placeholder {
  color: #CCC;
}

.step-3-content.schlech.step-content.active .content-inner.type_name ul li label input::placeholder {
  color: #CCC;
}

.step-3-content.schlech.step-content.active select {
  background-color: #fff;
  color: #000;
}

.step-3-content.schlech.step-content.active select option {
  background: #fff;
  color: #000;
}

.step-3-content.schlech.step-content.active select option:hover,
.step-3-content.schlech.step-content.active select option:focus,
.step-3-content.schlech.step-content.active select option:checked,
.step-3-content.schlech.step-content.active select option:selected {
  background: red !important;
  color: #fff !important;
}
.interview_ques {
  width: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
 
}

/* Selected Top Area */
.interview_ques .selected {
 height: 50px;
    display: flex;
    align-items: center;
    padding: 0 45px 0 15px !important;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    color: #bdbdbd;
    cursor: pointer;
    text-transform: initial;
    letter-spacing: 0;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    font-size: 18px;
}

/* Dropdown Box */
.dropdown_items {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  box-sizing: border-box;
  z-index: 99;
  display: none;
  max-height: 300px;
  overflow-y: auto;
  padding: 5px 0;
  border-top: none;
  overflow-x: hidden;
}

/* Open Dropdown */
.interview_ques.open .dropdown_items {
  display: block;
}

/* Dropdown Items */
.dropdown_items li {
      padding: 3px 10px 3px 37px !important;
    cursor: pointer;
    position: relative;
    transition: 0.2s;
    margin: 0px 4px !important;
    border-radius: 6px !important;
    width: 98% !important;
}

/* Hover */
.dropdown_items li:hover, .dropdown_items li.active:hover {
  background: #ef2b2d;
  color: #fff;
}

/* Active */
.dropdown_items li.active {
 background: transparent;
    color: inherit;
}
.dropdown_items li.active:hover::before {
color: #fff;
}
/* Checkmark */
.dropdown_items li.active::before {
  content: "✓";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #ef2b2d;
  font-size: 16px;
  font-weight: bold;
}

/* Arrow */
.interview_ques .arrow {
  position: absolute;
  right: 15px;
  top: 14px;
  pointer-events: none;
  transition: 0.3s;
}

/* Rotate Arrow */
.interview_ques.open .arrow {
  transform: rotate(180deg);
}
.step-3-content.schlech.step-content.active .prev_next {
    width: 100%;
    gap: 8px;
}
.step-3-content.schlech.step-content.active h3 {
    display: block;
    font-size: 32px;
    margin-bottom: 18px;
    text-align: center;
}
.step-3-content.schlech.step-content.active .show_normal {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

}
.step-3-content.schlech.step-content.active .bottom_text {
    color: rgba(0, 0, 0, 0.25);
    text-align: center;
    /* font-family: Avenir; */
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.selected_pattern {}

.selected_pattern .tall-panel__card-image-wrapper > img {
    display: none;
    /* padding: 0 !important; */
}

.selected_pattern .tall-panel__card-image-wrapper {
    padding-bottom: 0;
}


.selected_pattern .pro_info_area {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.selected_pattern .pro_info_area .select {
    display: none;
}

.selected_pattern .pro_info_area img {
    width: 100%;
    max-width: 100px;
}

.selected_pattern .pro_info_area h4 {
    font-weight: normal;
}
.selected_pattern .pro_info_inner {
    position: static;
    background: none;
    box-shadow: none;
}


   .step-2-content.brio.step-content.active {
   background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    background-position: center;
    background-color: #028a4a;
    padding: 8px;
}



.step-2-content.brio.step-content.active .content-inner.type_name {
     position: relative;
    margin-top: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 8px;
}
.ticket_content_area {
    display: flex;
    align-items: flex-end;
}

.train-ticket {
    width: 43%;
    /* display: flex; */
}

.train_content_area {
    width: 57%;
    padding-top: 0;
    padding-right: 20px;
    padding-bottom: 40px;
}

/* .train_faq_logo {
  position: absolute;
    left: 0;
    right: 0;
    /* max-width: 150px; */
    margin: 0 auto;
    top: 20px;
    /* transform: translate(-50%); */
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: 100%;
} */

.ticket_content_area {
    width: 100%;
    display: flex;
    /* padding: 20px; */
}

/* .train_faq_nyc {
   position: absolute;
    right: 8px;
    top: 0px;
    transform: translate(-50%);
} */
 .tran_logo_area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: -30px;
}
.train_content_area h3 {
    color: #FFF;
    text-align: center;
    font-family: 'Myriad Pro';
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    width: 100%;
    display: block;
    margin-bottom: 16px;
}
.content-inner.type_name .train_content_area ul li input {
    max-width: 100% !important;
    background: #fff !important;
    height: 50px;
    border: 1px solid #ccc;
    border-radius: 10px;
    color: #000;
    text-align: left;
    text-transform: initial !important;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    font-family: 'Myriad Pro';
}
.content-inner.type_name ul li label textarea {
    font-family: 'Myriad Pro';
}
.content-inner.type_name .train_content_area ul li input::-webkit-input-placeholder,
.content-inner.type_name .train_content_area ul li textarea::-webkit-input-placeholder {
  color: #CCC;
}

.content-inner.type_name .train_content_area ul li input::-moz-placeholder,
.content-inner.type_name .train_content_area ul li textarea::-moz-placeholder {
  color: #CCC;
}

.content-inner.type_name .train_content_area ul li input:-ms-input-placeholder,
.content-inner.type_name .train_content_area ul li textarea:-ms-input-placeholder {
  color: #CCC;
}

.content-inner.type_name .train_content_area ul li input::placeholder,
.content-inner.type_name .train_content_area ul li textarea::placeholder {
  color: #CCC;
}
.bottom_next_prev {
    margin-top: 16px;
}
.bottom_next_prev .prev_next {
    gap: 10px;
}
.bottom_next_prev .prev_next > div.active {
    background: transparent;
    color: #008A4A;
    border: 1px solid #008A4A;
}
.bottom_next_prev .prev_next .next.active {
    border: none;
    background: #AE1F2B;
    color: #fff;
}
.brio_help_text {
    margin-top: 10px;
    color: rgba(0, 0, 0, 0.25);
    text-align: center;
   
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.live_heading {
        position: absolute;
    top: 73%;
    left: 20%;
    transform: rotate(4deg) translate(-50%);
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    display: flex;
    text-align: center;
    align-items: center;
    font-family: 'Myriad Pro';
 
}
.live_content {
    position: absolute;
     font-family: var( --experience_brio_font);
   left: 19.2%;
    transform: rotate(4deg) translate(-50%);
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    text-transform: inherit;
    display: flex;
    text-align: center;
    align-items: center;
    top: 80%;
    max-width: 175px;
    font-family: 'Myriad Pro';
}
.selected_train_initial li:first-child input {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Myriad Pro';
}
.step-2-content.brio.step-content.active_position .tran_logo_area,
.step-2-content.brio.step-content.active_position .bottom_next_prev,
.step-2-content.brio.step-content.active_position .brio_help_text  {
    display: none;
}
.selected_train_tag img {
    max-width: 250px;
}
.selected_train_tag {
    display: flex;
    width: 100%;
    flex-direction: row-reverse;
    position: relative;
    top: -38px;
    right: 0px;
}
.selected_train_initial input, .selected_train_initial textarea {
    border: none;
    padding: 0;
    background: transparent;
    min-height: 0;
    appearance: none;
    -webkit-appearance: none;
}


.step-2-content.brio.step-content.active_position .train-ticket {
    display: none;
}

.step-2-content.brio.step-content.active_position .train_content_area {
    width: 100%;
    padding-right: 0;
    padding-bottom: 0;
}


.selected_train_initial {
    position: absolute;
    top: 74%;
    left: 78%;
    transform: rotate(4deg) translate(-50%);
    width: 165px;
}
.selected_train_initial li:last-child textarea {
  font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: initial;
    text-align: center;
    font-family: 'Myriad Pro';
    appearance: none;
    height: auto !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    resize: none;
    outline: none;
    border: none;
    box-shadow: none;
}
.selected_train_initial li:first-child input {
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    text-align: center;
}
.selected_train_initial ul li {
    padding: 0;
    border: none;
    max-width: 100%;
}

.selected_train_initial ul {
    gap: 1px;

}
.selected_step_1.selected_items.handbag ul {
    overflow: hidden;
}

/* RICO 2026-06-19: reverted the 7-outfit Barbie fashion-pack override (FAO outfit moved to also-includes; back to the default 6-tile grid). */



/* ===== #30266 step-heading mobile polish (2026-06-18, RICO) — proportionate Prev/Next + consistent heading size on mobile. Revert: delete this block. ===== */
@media (max-width: 800px) {
  .top-header, .top-header .show_normal { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 12px; }
  .top-header h3 { flex: 1 1 auto !important; min-width: 0 !important; font-size: clamp(16px, 5vw, 20px) !important; line-height: 1.2 !important; }
  .top-header .prev_next { flex: 0 0 auto !important; margin-top: 0 !important; }
  .prev_next { gap: 12px; }
  .prev_next > div { min-width: 0; padding: 0 16px; height: 38px; line-height: 38px; font-size: 13px; }
  .step-content input[type="text"], .step-content textarea { font-size: 16px !important; } /* input-zoom guard */
}

/* ===== #review-fixes 2026-06-18 (RICO) — experiences review punch-list. Revert: delete this block. ===== */
/* Change modals sit above experience logos */
.change_bg, .step-content.active_position { z-index: 100000 !important; }
/* Change modal: clear, visible close button (round X, top-right of the modal header row) */
.change_bg .close_button { gap: 12px !important; align-items: center !important; }
.change_bg .close_button .close { width: 32px; height: 32px; border-radius: 50%; background: #f2f2f2; display: flex !important; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.change_bg .close_button .close:hover { background: #e3e3e3; }
.change_bg .close_button .close img { width: 14px; height: 14px; filter: brightness(0); }
/* Step tracker: scroll horizontally instead of being cut off (was overflow-y) */
.steps-title ul { overflow-x: auto !important; overflow-y: visible !important; flex-wrap: nowrap !important; padding-bottom: 2px; }

/* #review-fixes 2026-06-18 — hover_grid name/Select always visible on the grid (was only on hover/click) */
.hover_grid.active .list-of-babies:not(.list-of-selected-items) ul li .pro_info_area { display: block !important; }
.hover_grid.active .list-of-babies:not(.list-of-selected-items) ul li .pro_info_inner h4 { display: block !important; }
.hover_grid.active .list-of-babies:not(.list-of-selected-items) ul li .select { display: block !important; }

/* #review-fixes 2026-06-18 — Confirm Change button consistent shape across all modals (color stays per-experience) */
.change_bg .changes_confirm { border-radius: 5px !important; padding: 0 18px !important; height: 36px !important; line-height: 36px !important; font-size: 13px !important; min-width: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }


/* ===== #review-fixes 2026-06-18 batch2 (RICO) — Brio/BaubleBar popup-tray (B4/BB1) + Brio mobile ticket (B5). Revert: delete this block. ===== */
/* B4/BB1: in change/popup mode (.active_position) the #30266 mobile rule forced .show_normal visible via !important, producing a jumbled double header. Hide the normal header in popup mode (show_in_popup is the correct one). */
.active_position .top-header .show_normal { display: none !important; }
/* B4/BB1: let the product/bead tray scroll inside the popup (was no way to scroll). */
.active_position .list-of-babiess.babies-contents, .active_position .list-of-babies.babies-content { max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* B4/BB1: drop the duplicate header instruction in popup mode (popup_bracelet_msg also renders in the tray message area). */
.active_position .show_in_popup .message_areas.intial_messages { display: none !important; }
/* B5: Brio mobile ticket — wrap the live message so it never runs off the ticket. */
.brio-experience .mobile_only_train_ticket .live_content { white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; line-height: 1.15; }


/* ===== #review-fixes 2026-06-18 batch3 (RICO) — CHANGE MODAL CONSISTENCY (match Handbag). Covers standard (.change_bg) AND tray/popup (.active_position) modals. Revert: delete this block. ===== */
/* Modal shell: keep inside the viewport and scroll INSIDE the modal (not the page behind). Fixes Schleich 'can't scroll up' + long-modal/confirm clipping. */
.change_bg, .step-content.active_position {
  top: 6vh !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
/* Header row: consistent padding/height (fixes Steiff tag 'too thin'); heading left, button group right. */
.change_bg .top-header,
.active_position .show_in_popup,
.active_position .popup_inner {
  padding: 12px 16px !important;
  min-height: 52px;
  align-items: center !important;
  gap: 12px !important;
  box-sizing: border-box;
}
.change_bg .top-header > h3,
.active_position .show_in_popup h3 {
  flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important;
  font-size: 16px !important; line-height: 1.25 !important; text-align: left !important;
}
/* Button group (Confirm Change + close X): right, fixed, never cramped/clipped. */
.change_bg .close_button,
.active_position .close_button {
  display: flex !important; align-items: center !important; gap: 10px !important;
  flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important;
}
/* Round close X — consistent on EVERY modal (was only on .change_bg). */
.change_bg .close_button .close,
.active_position .close_button .close {
  width: 32px !important; height: 32px !important; border-radius: 50% !important; background: #f2f2f2 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer; flex: 0 0 auto !important; padding: 0 !important;
}
.change_bg .close_button .close:hover, .active_position .close_button .close:hover { background: #e3e3e3 !important; }
.change_bg .close_button .close img, .active_position .close_button .close img { width: 14px !important; height: 14px !important; filter: brightness(0); margin: 0 !important; }
/* Confirm Change — identical pill on every modal. */
.change_bg .changes_confirm,
.active_position .changes_confirm {
  border-radius: 4px !important; padding: 0 16px !important; height: 34px !important; line-height: 34px !important;
  font-size: 13px !important; font-weight: 600 !important; min-width: auto !important; white-space: nowrap !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important;
}


/* ===== #review-fixes 2026-06-18 brio-conf-ticket (RICO) — Brio CONFIRMATION ticket message fit. Revert: delete this block. ===== */
/* desktop fits at 70 chars; mobile box is narrow/short so the 9px message spilled past the ticket bottom. Shrink + wrap so it stays on the tag. */
@media screen and (max-width: 800px) {
  .brio-experience .selected_train_initial li:last-child textarea,
  .selected_train_initial li:last-child textarea {
    font-size: 7px !important; line-height: 1.12 !important; padding: 0 !important;
    white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important;
    overflow: hidden !important; resize: none !important;
  }
}


/* ===== #review-fixes 2026-06-18 r3 (RICO) — Confirm Change relocated to a pinned footer at the modal bottom (declutters the header; header is now just title + close X). Revert: delete this block + the __confirmToFooter IIFE in step-video.js. ===== */
.modal-confirm-footer {
  position: sticky; bottom: 0; z-index: 6;
  display: flex; justify-content: center; align-items: center;
  padding: 12px 16px; margin-top: 8px;
  background: #fff; border-top: 1px solid #ececec;
}
.modal-confirm-footer .changes_confirm {
  width: 100% !important; max-width: 360px !important;
  height: 44px !important; line-height: 44px !important;
  font-size: 14px !important; font-weight: 600 !important;
  border-radius: 6px !important; white-space: nowrap !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}


/* ===== #review-fixes 2026-06-18 r3b (RICO) — modal grid outline clip + Schleich relocated Prev. Revert: delete this block. ===== */
/* The modal grid li clipped the card-inner's selected outline/box-shadow on mobile (card-inner taller than li). The image is clipped by card-inner's own overflow, so the li can show overflow without the image bleeding. */
.change_bg .list-of-babies:not(.list-of-selected-items) ul li,
.active_position .list-of-babies:not(.list-of-selected-items) ul li,
.change_bg .list-of-babies.babies-content ul li,
.active_position .list-of-babies.babies-content ul li { overflow: visible !important; }

/* Schleich confirmation Prev relocated below the banner (moved into .content-inner by JS) — style as a quiet back link. */
.step-4-content .content-inner > .prev_next.confirm-back-link { margin: 6px 0 10px; display: block; }
.step-4-content .content-inner > .prev_next.confirm-back-link .previous {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent !important; border: none !important; box-shadow: none !important;
  color: #e1251b !important; font-weight: 600; padding: 2px 6px; cursor: pointer; width: auto;
}
.step-4-content .content-inner > .prev_next.confirm-back-link .previous::before { content: "\2039"; font-size: 1.2em; line-height: 1; margin-right: 2px; }


/* ===== #review-fixes 2026-06-18 r3c (RICO) — age verifier full-viewport coverage. 100vh falls short under mobile browser chrome, letting the experience bleed through at the bottom. Fill via insets + dvh. Revert: delete this block. ===== */
.otAgeVerifier.otAgeVerifier #av-overlay-wrap {
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important; height: auto !important; min-height: 100dvh !important;
}


/* ===== #review-fixes 2026-06-19 r5 (RICO) — Brio modal header + double-scroll. Revert: delete this block. ===== */
/* Brio modal heading bar is a PNG banner (background-size:100% 100% on .top-header). batch3's padding+min-height on the nested .show_in_popup AND .popup_inner stretched the bar too tall and distorted the PNG edges. Keep the bar compact (let .top-header's own 10/14 padding size it) and pin the close X to the right. Scoped to Brio so Steiff-tag/BaubleBar headers are unaffected. */
.brio-experience .active_position .show_in_popup { padding: 0 !important; min-height: 0 !important; }
.brio-experience .active_position .show_in_popup .popup_inner {
  padding: 0 !important; min-height: 0 !important; margin: 0 !important;
  width: 100% !important; flex: 1 1 auto !important;
  display: flex !important; flex-direction: row !important; align-items: center !important;
  justify-content: space-between !important; gap: 12px !important;
}
.brio-experience .active_position .show_in_popup .popup_inner h3 { margin: 0 !important; }
.brio-experience .active_position .show_in_popup .close_button { flex: 0 0 auto !important; }

/* Double scrollbar: batch2 gave the tray grid its own overflow scroll AND batch3 made the whole modal scroll. Drop the inner grid scroll so only the modal scrolls. */
.active_position .list-of-babiess.babies-contents,
.active_position .list-of-babies.babies-content { max-height: none !important; overflow-y: visible !important; }


/* ===== #review-fixes 2026-06-19 r5b (RICO) — Brio ticket name auto-fit target. nowrap + bounded width so the JS can shrink "[name]'s Train" to fit instead of clipping. Revert: delete this block + the __brioNameFit IIFE. ===== */
.live_heading { white-space: nowrap !important; }
@media screen and (min-width: 801px) { .live_heading { max-width: 175px; } }
.selected_train_initial li:first-child input { white-space: nowrap !important; }


/* ===== #review-fixes 2026-06-19 r5c (RICO) — Brio modal header (PNG trim) + field centering. Revert: delete this block. ===== */
/* The Brio heading PNG is 1440x144 (10:1); in the narrow modal bar, background-size:100% 100% distorts it and the side frame looks trimmed. Use the brand green as a solid fill in the MODAL header only (the normal full-width step keeps the PNG banner). */

/* Center the change-ticket form fields: the default <ul> left padding pushed the name/message inputs to the right. */
.brio-experience .active_position .train_content_area ul { padding-left: 0 !important; padding-right: 0 !important; margin: 0 auto !important; list-style: none !important; }
.brio-experience .active_position .train_content_area ul li { padding-left: 0 !important; padding-right: 0 !important; }


/* ===== #review-fixes 2026-06-19 r5d (RICO) — center the Brio change-ticket fields (.train_content_area had padding-left:38px). Revert: delete. ===== */
.brio-experience .active_position .train_content_area { padding-left: 0 !important; padding-right: 0 !important; }


/* ===== #review-fixes 2026-06-19 r5e (RICO) — Special Message LIVE ticket. Revert: delete. ===== */
/* mobile name overflowed: .main_name/.post_text had explicit 13px so the name auto-fit (on .live_heading) did not cascade; let them inherit. */
.mob_tag_image span.main_name, .mob_tag_image .post_text { font-size: inherit !important; }


/* ===== #review-fixes 2026-06-19 r5f (RICO) — Special Message live ticket message must wrap (incl. long no-space strings) on desktop too; mobile already wrapped. ===== */
.live_content, .live_content.desktop_only { white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; }


/* ===== #review-fixes 2026-06-19 r7 (RICO) — tray side-scroll. The selected-items tray (.breads_inner: BRIO cars + BaubleBar beads) had overflow-x:hidden + overflow-y:scroll (wrong axis) so it could not scroll sideways when full on mobile. Enable horizontal scroll, single row. Revert: delete. ===== */
.breads_inner { overflow-x: auto !important; overflow-y: hidden !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }


/* #review-fixes 2026-06-19 r8 (RICO): hint the browser to handle horizontal panning on the selected-items tray so it scrolls on touch (paired with the scroll-aware touch-punch). */
.breads_inner { touch-action: pan-x; }
/* marker: r8 — tray touch-action pan-x */


/* ===== #review-fixes 2026-06-19 r9 (RICO) — BRIO sticker-pack also-includes stub placeholder (until the asset lands). Revert: delete. ===== */
.brio-experience .selected_step_4.selected_items.hidden_product .sticker-pack-item { text-align:center; max-width:125px; }
.brio-experience .selected_step_4.selected_items.hidden_product .sticker-pack-placeholder { width:100%; min-height:96px; border:1px dashed #cfcfcf; background:#f6f6f6; display:flex; align-items:center; justify-content:center; color:#999; font-size:11px; text-align:center; padding:8px; box-sizing:border-box; border-radius:4px; }

/* #experiences 2026-07-23: 5px button radius (all experience buttons) */
.step-content .select,
.list-of-babies ul li .select,
.pro_info_area .select,
.prev_next .next,
.prev_next .previous,
.box-btn,
.change-button,
.changes_confirm { border-radius: 5px; }


/* ===== #30279 2026-08-05 — "Also Includes" equal-size SQUARE product boxes (all experiences).
   Blake: "align the Also Includes boxes to be the same size for all products. They should be square."
   Measured before, on the 647px confirmation column: every li was already capped at 125px wide
   (max-width+width:125px), but each <img> rendered at its own natural aspect, so image heights ran
   96.9 / 125 / 135.6 / 139.4 / 148.1 / 174.9px across BaubleBar, BRIO and Handbag. That made the
   tiles visibly different sizes and stretched the whole row (Handbag row was 209.9px tall).
   Fixing the image to a 125px square with object-fit:contain makes every tile identical and square
   without cropping any product, and align-self:flex-start stops the li stretching to the row height.
   Appended to the shared stylesheet deliberately: Blake asked for this across ALL experiences, so one
   rule beats four divergent per-section copies. Revert: delete this block. ===== */
.selected_items.hidden_product ul li img {
  width: 125px;
  height: 125px;
  object-fit: contain;
}
/* Lock the tile box so every product is identical: BRIO's sticker tile was shrinking to 112.1px
   (its own max-width:125px rule leaves width:auto), and li heights ran 145-175px because the h4
   title wrapped to a different number of lines per product. Clamping the title to two lines with a
   matching min-height gives every tile the same total height. Blake is also asking for genuinely
   shorter titles separately (#30279 follow-up), which this clamp then just backstops. */
.selected_items.hidden_product ul li {
  align-self: flex-start;
  flex: 0 0 125px;
  width: 125px;
  min-width: 125px;
  max-width: 125px;
}
.selected_items.hidden_product ul li h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

/* #30279b 2026-08-05 — "Also Includes" LABEL is a caption, not a tile.
   Both RICO design stakeholder agents (interface-design + frontend-design) independently recommended
   removing the box: an outlined empty rectangle sitting in a row of outlined product tiles gets grouped
   by the eye as a peer ITEM rather than a caption for the group, and its silhouette is indistinguishable
   from a genuinely broken tile (Barbie has one today, a product with no delivered image). Matching the
   label to the 125x161.2 tile would make that worse, not better.
   Before: an outlined box sized inconsistently per experience (105x102 BaubleBar/Barbie, 105x125 BRIO,
   93.8x125 Handbag), inheriting the shared red-pill base then overridden to white+#e5e5e5 by theme settings.
   After: unboxed uppercase caption, fixed 110px wide so the tile row starts at the same x on every
   experience even if the label wording is edited, vertically centred against the tile row.
   Neutral #333 deliberately carries no brand colour so it survives BaubleBar's rainbow heading, BRIO's
   red/green and Steiff's royal blue without clashing.
   !important is required to beat the per-section settings-driven rules; Barbie's own rule additionally
   used !important at ID specificity and was neutralised in sections/barbie-main.liquid. */
.selected_items.hidden_product .also_include {
  border: none !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 0 0 16px !important;
  box-sizing: border-box;
  width: 126px;
  min-width: 126px;
  max-width: 126px;
  height: auto !important;
  min-height: 0 !important;
  align-self: center;
  color: #333333 !important;
  font-weight: 400 !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-align: left;
}

/* ===== #31643 R2-2 (2026-09-28) — remove the video keyboard-help line at every width, on all
   seven experiences. This SUPERSEDES the block that used to be here (round 1's N15: reworded
   "Backspace" to "Spacebar" per experience, and hid the line only under 800px). Decision R2-2:
   the Space/M shortcuts are now scoped to the player itself (see assets/step-video.js), which is
   the same pattern YouTube/Vimeo use, and they show no on-page instruction text either, so the
   line is no longer accurate to keep at any width, not just narrow ones.
   Each experience section renders it from the same "Information regarding Keyword Event for
   Videos" setting into one shared wrapper, <div class="user-info">...</div> (verified present in
   all seven experience sections), so one shared, unconditional selector removes it everywhere
   without editing the seven page templates' setting text or leaving an empty gap: display:none
   takes the element out of flow entirely, it does not reserve its old height.
   Revert: delete this rule and restore the "@media (max-width: 800px)" block it replaced (see
   backup R:\Barrett Goldberg\Claude\fao\_backups\assets__doll-experince.css.2026-09-28-pre-uat-r3-VIDEO-KB). ===== */
.user-info { display: none !important; }

/* ===== #31643 N18 (2026-09-28) — step tracker fits on desktop without clipping or scrolling.
   Measured (walk-schleich-D-data.json trackerOverflow): Schleich content 716px in a 647px
   track; Handbag measured ~797px in the same 647px track. The June auto-scroll centering
   (step-video.js) could also leave the track scrolled a few px right of 0, clipping the start
   of the first label ("Select an Animal" -> "lect an Animal"); that centering is now scoped to
   phone widths only (see step-video.js N18 comment). This half tightens the shared tracker
   spacing/size at desktop widths so the full label set fits inside the track with room to
   spare, on every experience (the tracker markup/selectors are identical across all seven).
   Revert: delete this block. ===== */
@media (min-width: 801px) {
  .steps-title ul { gap: 8px; }
  .steps-title ul li span, .steps-title ul li { gap: 6px; }
  .steps-title ul li span { width: 24px; height: 24px; font-size: 12px; }
  .steps-title ul li { font-size: 12px; }
}

/* ===== #31643 R2-2 (2026-09-28) — visible focus ring for the video player container itself.
   assets/step-video.js now gives every ".video-container" tabindex="0" if it does not already
   have one, so a keyboard user can Tab onto "the player" the way YouTube/Vimeo's player frame is
   focusable (Space/M then act on it; see that file's keydown comment). Without this rule the
   container had no outline of its own (only its buttons did), so landing on it showed nothing.
   Same blue used for the tray add/remove focus rings added in A11Y-R2 (assets/doll-experince.css
   .plus_button:focus-visible / .remove-btn:focus-visible), for one consistent keyboard-focus
   color across the experiences. Revert: delete this rule and the tabindex/role/aria-label block
   in assets/step-video.js's containers.forEach init. ===== */
.video-container:focus-visible {
  outline: 3px solid #1e73ff;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===== #31643 R3-4 (2026-09-29), amended R3-4b (2026-09-29 — Barrett/coordinator follow-up: the
   focused pill overlapped page content, e.g. BaubleBar's "Starting from $40.00" text sat under it)
   — skip link, one per step, appended by assets/experience-a11y.js addSkipLinks() as the LAST DOM
   child of each .step-content. Lets a keyboard user who just made a selection reach that step's own
   Next/Continue/Confirm-Change without Tabbing through the rest of the page and wrapping back to
   the top (Barrett, 2026-09-29). `position: relative` on .step-content only gives the UNFOCUSED
   (hidden) state below a positioning context to anchor to — it sets no offsets of its own and has
   no visible effect, so nothing about the existing layout changes while unfocused. The button is
   1x1px and clipped (not just visually hidden — clip-rect makes it non-hit-testable, so a
   mouse/touch user can never land on it) until it is the thing that has keyboard focus; it never
   takes layout space while unfocused, and it changes nothing for mouse or touch users, on any
   viewport (confirmed 0-pixel screenshot diff at 390/360, R3-4's own verification, unaffected by
   this amendment since only the FOCUSED rule changed).
   R3-4b: on focus, the button now goes into NORMAL FLOW (position:static) directly under the
   step's own content, the common skip-link pattern — it pushes whatever comes after it down while
   focused and collapses back the instant it loses focus, so it never sits on top of (or is sat on
   top by) anything. EXCEPTION: Steiff's Personalize-Tag panel (`.step-2-content`, scoped by
   `body.steiff-exprience`) and Handbag's Change-Initials panel (`.step-4-content`, scoped by
   `.bag-experience`) are both fixed-aspect-ratio (545/430), `overflow:hidden` boxes with no natural
   room to grow — an in-flow pill there would be clipped invisible, not just crowded (checked live
   and confirmed before shipping this). Those two get `position:fixed`, anchored to the viewport
   near the bottom of the screen instead, so it is always visible and still covers nothing
   (`position:fixed` escapes an ancestor's `overflow:hidden` unless that ancestor has a transform,
   which neither panel does — confirmed live, not just reasoned, in this round's verification).
   Scoping note: the Steiff exception is scoped by `body.steiff-exprience` rather than the `.stiff`
   class used elsewhere in this file for the same panel — caught live during this round's own
   verification that `.stiff` is a stray, non-unique element present on every experience's page
   (confirmed on Barbie too), so `.stiff .step-2-content` would have wrongly matched Barbie's
   unrelated step 2 and force-fixed its pill for no reason; `body.steiff-exprience` is unique to the
   Steiff page (confirmed live on all seven). `.bag-experience` was checked the same way and is
   already unique to Handbag on all seven, so it did not need changing. Revert: delete this block,
   the .step-content position:relative rule below it, and
   addSkipLinks()/resolveForwardControl()/skipLinkLabel() in assets/experience-a11y.js. ===== */
.step-content { position: relative; }
.exp-skip-next {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  background: none;
}
.exp-skip-next:focus {
  position: static;
  display: block;
  width: auto;
  height: auto;
  max-width: max-content;
  overflow: visible;
  clip: auto;
  white-space: normal;
  margin: 10px auto 0;
  padding: 10px 20px;
  background: #1e73ff;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  outline: 3px solid #0b3d91;
  outline-offset: 2px;
  z-index: 30;
  text-align: center;
}
/* R3-4b exception (see comment above): the two fixed-aspect-ratio/overflow:hidden panels keep an
   overlay placement so the focused pill is never clipped, but anchored to the viewport (not the
   panel) near the bottom, well clear of the panel's own name/initials field and Continue button, so
   it still covers nothing. */
body.steiff-exprience .step-2-content .exp-skip-next:focus,
.bag-experience .step-4-content .exp-skip-next:focus {
  position: fixed;
  left: 50%;
  bottom: 16px;
  top: auto;
  transform: translateX(-50%);
  margin: 0;
}