.cba35{max-width:760px;margin:0 auto}
.cba35-h{font-size:18px;margin:0 0 6px}
.cba35-muted{opacity:.78}
.cba35-small{font-size:12px}

.cba35-progress{background:rgba(0,0,0,.03);border-radius:18px;padding:14px 16px;margin-bottom:14px}
.cba35-progress-top{display:flex;justify-content:space-between;font-size:12px}
.cba35-bar{height:8px;background:rgba(0,0,0,.10);border-radius:999px;overflow:hidden;margin-top:10px}
#cba35-bar-fill{height:100%;width:25%;background:#111;border-radius:999px;transition:width .25s ease}

.cba35-screen{display:none;background:#fff;border-radius:18px;box-shadow:0 10px 26px rgba(0,0,0,.06);padding:18px; text-align:left;}
.cba35-screen.is-active{display:block}

.cba35-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
@media (max-width:560px){.cba35-tiles{grid-template-columns:1fr}}
.cba35-tile{border:1px solid rgba(0,0,0,.10);border-radius:16px;padding:14px;text-align:left;background:#fff;cursor:pointer}
.cba35-tile.is-selected{border-color:rgba(0,0,0,.55);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.cba35-tile-title{display:block;font-weight:600}



.cba35-field{margin-top:12px}
.cba35-label{display:block;font-size:14px;opacity:.82;margin-bottom:6px}

#wrapper_pet_allergies .cba35-label{
    margin-bottom: 12px;
}
.cba35 select,
.cba35 input,
.cba35 textarea{
width:100%;
border:1px solid rgba(0,0,0,.12);
border-radius:12px;
padding:12px 14px;
background:#fff;
box-shadow:0 6px 18px rgba(0,0,0,.04);
}

.cba35 select {
    -webkit-appearance: auto !important;
    appearance: auto !important;
}


.cba35 textarea{
min-height:30px!important;margin-bottom:10px;

}
.cba35 input[type="checkbox"] {
width:20px;
}
.cba35 select:focus,.cba35 input:focus,.cba35 textarea:focus{
outline:none;border-color:rgba(0,0,0,.35);
box-shadow:0 0 0 4px rgba(0,0,0,.06);
}

.cba35-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.cba35-grid{grid-template-columns:1fr}}

.cba35-actions{display:flex;gap:10px;margin-top:16px}
@media (max-width:640px){.cba35-actions{flex-direction:column}}
.cba35-btn{border:0;border-radius:12px;padding:12px 14px;background:rgba(0,0,0,.06);cursor:pointer}
.cba35-btn--primary{background:#111;color:#fff}
.cba35-btn--back
{
padding: 5px 15px;
background: none;
color: #000;
text-decoration: underline;
}
.cba35-btn.cba35-btn--primary:hover{
background:#000!important;
    color:#fff!important;
}

.cba35-review{margin-top:14px;background:#fff;border-radius:18px;box-shadow:0 10px 26px rgba(0,0,0,.06);padding:18px}
.cba35-card, .cba35-card-messages{background:rgba(0,0,0,.03);border-radius:8px;padding:14px;
display: block;
max-height: unset;
height: auto;
    align-self: baseline;
}


.cba35 { max-width: 900px; margin: 0 auto; }
.cba35-screen { display:none; }
.cba35-screen.is-active { display:block; }
.cba35-cards {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:16px;
margin:20px 0;
}
.cba35-cards{
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}


.cba35-cards.recipient-cards{
grid-template-columns:1fr 1fr 1fr 1fr;
}

.cba35-card, .cba35-card-messages {
border-radius:18px;
overflow:hidden;
border:1px solid #ddd;
background:#fff;
cursor:pointer;
text-align:center;
}

.cba35-cards-messages{
display:grid;
grid-template-columns:1fr;
gap:8px;
margin-top:15px;
}
.cba35-cards-messages .cba35-card-messages{
/*padding:8px;*/
padding:0px;
}

#cba35-delivery-status{
    margin-top: 15px;
    text-align: center;
    color: red;
    font-weight: 600;

    margin-top:15px;
}
.cba35-card img, .cba35-card .icon-wrapper {
    width:auto;
    max-width:100%;
    /*130px;*/
    /*height:180px;*/
    object-fit:cover;
    text-align: center;
    margin: 0px auto;
}
.cba35-card span, .cba35-card-messages span {
    display:block;
    padding:12px;
    padding:0px;
    font-weight:600;
    text-align:center;
    line-height:1.5;
    min-height: 50px;
    align-content: center;
}

.cba35-card span.cba35-hint, .cba35-card-messages span.cba35-hint{
    min-height: 90px;
    align-content: baseline;
}
.cba35-cards-messages .cba35-card-messages span{
    padding:6px;
    text-align:left;
    font-weight:300;

}

.cba35-card-messages.selectedMessage
{
    /*background:#000;*/
    /*color:#fff;*/

    box-shadow:0 10px 30px rgba(0,0,0,.15);
    border-color:#000;
    align-self: start;
}

.cba35-card.is-selected {
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    border-color:#000;
}


#load_suggestions_block{
    display:flex;margin-top:10px;gap:16px;
}
.cba35-type_message{
    display:flex;margin-top:0px;
    gap:16px;
}
.cba35-type_message input {
    display:none;
}
.cba35-type_message label {
    margin-bottom: 0px;
    padding: 2px 15px;
    border: 1px solid #ddd;
    border-radius: 18px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
}
.cba35-type_message label.active-loadmessage {
    background: #000;
    color: #fff;
}
.recipient-icon {
    width: 48px;
    height: 48px;
}
.occasion-icon{

}

.individual { color: #F59E0B; }   /* warm gift gold */
.couple     { color: #E11D48; }   /* romantic rose */
.team       { color: #2563EB; }   /* strong blue */
.him        { color: #374151; }   /* charcoal */
.her        { color: #DB2777; }   /* elegant pink */
.family     { color: #16A34A; }   /* cozy green */
.client     { color: #4B5563; }   /* professional gray */

.recipient-cards{
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}

.wrapper-custom-widget{
    display:none;
    width:100%;
}
#wrapper-custom-widget{
    width:100%;
    overflow: auto;
    /*overflow-y: scroll;*/
    /*min-height: 500px;*/
    /*height:auto;*/
}

.icon-wrapper{
    text-align:center;
    height:auto;
}

.icon { color: #5F6368; } /* neutral gray */

.icon-wrapper.recipient-icon{
    width:128px;
    height:128px;

    background-image:url('IconsRecipient.png');

    display: inline-block;

    background-size: 100%;
    background-repeat: no-repeat;

}
.icon-wrapper.recipient-icon.mother
{

}

.icon-wrapper.occasion-icon{
    width:100%;
    height:130px;
    height:175px;
    background-size: 100%;
    background-repeat: no-repeat;
    display: inline-block;

}
.icon-wrapper.primary_gift-icon{
    display: inline-block;
    width:100%;
    height:auto;
    max-width:100%;
}
.icon-wrapper.recipient-icon.mother, .icon-wrapper.recipient-icon.newMother{
    /*background-position:-50px -88px;*/
    background-image:url('newMom.png');
}
.icon-wrapper.recipient-icon.newFamily {
    background-image:url('familyChild.png');
}
.icon-wrapper.recipient-icon.motherBaby{
    /*background-position:-50px -88px;*/
    background-image:url('mamChild.png');
}
.icon-wrapper.recipient-icon.newMotherBaby{
    background-image:url('mamChild.png');
 }


.icon-wrapper.recipient-icon.newBaby{
    background-image:url('baby.png');
}
.icon-wrapper.recipient-icon.couple{
    background-position:-50px -266px;
}
.icon-wrapper.recipient-icon.family{
    background-position:-158px -266px;
}
.icon-wrapper.recipient-icon.him{
    background-position:-158px -88px;
}
.icon-wrapper.recipient-icon.her{
    background-position:-266px -88px;
}
.icon-wrapper.recipient-icon.team{
    background-position:-268px -266px;
}
.icon-wrapper.recipient-icon.pet{
    background-position:-376px -88px;
}
.icon-wrapper.recipient-icon.client{
    background-position:-376px -266px;
}


.cba35-progress .progress-wrapper {
    position: relative;
    width: 100%;
    padding: 30px 10px 10px;
}

.cba35-progress .progress-wrapper::before {
    content: "";
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    height: 4px;
    background: #e5e7eb;
    z-index: 0;
}

.cba35-progress .progress-line-fill {
    position: absolute;
    top: 42px;
    left: 0;
    height: 4px;
    width: 0%;
    background: #111827;
    z-index: 1;
    transition: width 0.4s ease;
}

.cba35-progress .progress-steps {
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 2;
}

.cba35-progress .step {
    text-align: center;
    width: 100%;
    font-size: 12px;
    color: #6b7280;
    cursor:pointer;
}

.cba35-progress .icon {
    width: 38px;
    height: 38px;
    margin: 0 auto 6px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.cba35-progress .icon svg {
    width: 18px;
    height: 18px;
}

.cba35-progress .step.completed .icon {
    background: #111827;
    color: #fff;
}
.cba35-progress .step.inactive {
    display:none;
}
.cba35-progress .step.active .icon {
    background: #fff;
    color: #111827;
    box-shadow: 0 0 0 3px #111827;
}

.cba35-progress .step.completed .label,
.cba35-progress .step.active .label {
    color: #111827;
    font-weight: 600;
}

/*
.progress-wrapper {
    position: relative;
    width: 100%;
    padding: 30px 10px 10px;
}

.progress-steps {
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 2;
}


.progress-wrapper::before {
    content: "";
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    height: 4px;
    background: #e5e7eb;
    z-index: 0;
}


.progress-line-fill {
    position: absolute;
    top: 42px;
    left: 0;
    height: 4px;
    width: 0%;
    background: #111827;
    z-index: 1;
    transition: width 0.4s ease;
}

.step {
    text-align: center;
    font-size: 12px;
    width: 100%;
    color: #6b7280;
    position: relative;
}

.icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto 6px;
    border-radius: 50%;
    background: #e5e7eb;
    font-size: 16px;
    transition: all 0.3s ease;
}

.label {
    display: block;
    font-size: 12px;
}


.step.completed .icon {
    background: #111827;
    color: white;
}

.step.completed .label {
    color: #111827;
}


.step.active .icon {
    background: white;
    box-shadow: 0 0 0 3px #111827;
    color: #111827;
}

.step.active .label {
    color: #111827;
    font-weight: 600;
}*/

.cba35-card .cba35-hint{
    color: gray;
    font-weight: 300;
    font-size:14px;
    margin-top:5px;
}
.cba35-hint{

}

.cba35-fields-fromto{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:16px;
}
#cba35-greeting_message{
    height:120px;
}
.cba35-greeting_message-wrapper{
    display:grid;grid-template-columns:40% 58%;gap:16px;
}

.sub_navigation{
    display:none;
}
.sub_navigation button
{

}
.error_field{
    border:1px solid red;
}

.hide_card{
    display:none;
}
.show_card{
    display:block;
}
.cba35-tile-sub{display:block;font-size:12px;opacity:.75;margin-top:4px; padding:0px!important;color:dodgerblue; font-weight:400!important;;}

.allergies-wrapper{
    display:grid; grid-template-columns: 1fr 1fr;gap:15px;
}

.allergy-wrapper{
    padding:15px;
    display:flex;
    border:1px solid #ececec;
    border-radius:10px;
    cursor:pointer;
    color:#000;
    align-items: center;
}
.cba35-field.allergy-wrapper{
    margin-top:0px;
}
.allergy-wrapper.activeAllergy{
    border:1px solid black;
    background:#ececec;
    color:#000;
}
.navigation_buttons{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-range input[type="range"] {
    width: 100%;
    /*margin: 10px 0;*/
    margin:0px;
    padding: 0px;
    padding-top: 0px;
    padding-bottom: 8px;

    border:none;
    box-shadow:none;
}


.wrapper_body_step {
    display: grid;
    grid-template-columns: 20% 1fr;
    grid-template-columns: 1fr;
    gap: 20px;



}
.leftColumnStepBody{
    border-right: 1px dotted #ccc;
    padding: 10px;
}

.imageMainStep {
    margin-bottom: 10px;
}
.imageMainStep img{
    width:100%

}

.review_add_ons_options{
    list-style:none;
    margin-left:0px;
    padding-left:0px;
    text-align:left;
    width: 100%;
    margin: 0px;
}
.review_add_ons_options li{
    display:flex;
}
.review_add_ons_options li span{
    text-align:left;
}
.review_add_ons_options tr td{
    padding:5px;
    border:0.5px grey dotted;
}
.card-review-block div{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 0.5px grey dotted;
    margin-top:5px;
    margin-bottom:5px;
}

.card-review-block .valueNamePreviewTable{
    display:grid;
    grid-template-columns: 60px 1fr;
    border-bottom:none;
    align-items: center;
}
.card-review-block .valueNamePreviewTable div{
    border-bottom:none;
}
.card-review-block .valueNamePreviewTable img{
    width:100%;
    max-width:60px;
}

.titleSubResipients.hide,.titleResipients.hide{
    display:none;
}
.copyMainStep {
    text-align: left;
    font-size: 12px;
    margin-bottom:15px;
}

.dietaryCheckboxesGroup{

}
.dietaryCheckboxesGroup ul, .ColourPreferenceCheckboxesGroup ul{
    padding:0px; margin:0px; list-style:none;
    display:grid; grid-template-columns: 1fr 1fr 1fr 1fr;
}

.SettingsCheckboxesGroup ul{
    padding:0px; margin:0px;
    list-style:none;
    display:grid; grid-template-columns: 1fr;
    gap:15px;
}
.SettingsCheckboxesGroup ul li{
    display:grid; gap:10px;
}
.SettingsCheckboxesGroup ul li div{
    display:flex; gap:10px;
}


.SettingsCheckboxesGroup ul li{
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    text-align: left;
    width:100%;


    padding: 14px;
    display: block;
    max-height: unset;
    height: auto;
    align-self: baseline;

}
.SettingsCheckboxesGroup ul li p{
    padding:0px;
    margin:0px;
    font-size:12px;
    margin-top:10px;
}
.SettingsCheckboxesGroup ul li input{
    display:none;
}
.SettingsCheckboxesGroup ul li{
    width:100%;


}

.SettingsCheckboxesGroup ul li label{
    display: block;
    padding: 12px;
    padding: 0px;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
    /*min-height: 50px;*/
    align-content: center;
}


.dietaryCheckboxesGroup ul li, .ColourPreferenceCheckboxesGroup ul li{
    display:flex; gap:10px;

}
.textarea-wrapper textarea {
    width: 100%;
    min-height: 40px;
    max-height: 300px;
    resize: none;
    overflow: hidden;
    padding: 10px;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
    /*border: none;*/
    /*border-radius: 0px;*/
    background: none;
    box-shadow: none;
    cursor: pointer;
    /*border: 1px dotted rgba(0, 0, 0, .35);*/
}
.cba35-geetingCardImage{
    width:100%;display:grid;
    grid-template-columns: 30% 1fr;
    gap:10px
}
#imageGreetingCard{
    /*min-height:350px; */
    width:100%;
    background-size:100%!important;
}
.cba35-leave_message_blank_wrapper{
    display:flex;
    margin-top:15px;
}

.slider-dots{
    display:none;
}

.shopify-block.shopify-app-block[data-block-handle="custom_basket_product"]
{
    width:100%!important;
}
.selectDeliveryDateCustomBasket{
    cursor:pointer;
    height:20px;
    width:100%;padding:5px;
}

.sliderTheme .sliderList{
    gap:15px!important;
}
.sliderTheme .sliderTrack
{
    border:none!important;
}
.cba35-card-messages .messageSuggestionsText
{
    display:block;
}

.cba35-card-messages .messageSuggestionsTextarea{
    display:none;
    overflow: hidden;

    resize: none; /* prevents manual resizing */
}
.cba35-card-messages.selectedMessage .messageSuggestionsTextarea
{
    display:block!important;
    border:none!important;
    padding: 10px!important;
    background: initial!important;
    height:100%;
    margin-bottom:0px!important;

}
.cba35-card-messages.selectedMessage .messageSuggestionsText
{
    display:none;
    padding: 5px;
}

#wrapper-custom-widget input[type=range]
{
    /*-webkit-appearance: auto!important;*/
    /*appearance: auto!important;*/
}


/*#wrapper-custom-widget input[type="range"] {*/
/*    -webkit-appearance: none; */
/*    appearance: none;*/
/*    width: 100%;*/
/*    height: 10px;*/
/*    background: linear-gradient(to right, #ff7e5f, #feb47b); */
/*    border-radius: 5px;*/
/*    outline: none;*/
/*}*/


/*#wrapper-custom-widget input[type="range"]::-webkit-slider-thumb {*/
/*    -webkit-appearance: none;*/
/*    appearance: none;*/
/*    width: 20px;*/
/*    height: 20px;*/
/*    background: #333;*/
/*    border-radius: 50%;*/
/*    cursor: pointer;*/
/*}*/


#cba35-greeting-card-suggestions{
    grid-template-columns: 1fr 1fr;
}
.cba35-details{
    margin-bottom:15px;
}
.wrapperDetails{
    display:grid; grid-template-columns: 1fr 1fr; gap:15px;
}
.cba35-card.card-review-block
{
    width:100%;
}
.review_one_line{
    display:flex; justify-content:space-between; gap:12px;

}
.card-review-block .cw-review-total{
    align-items:center;
    margin-top:18px;
    padding:16px 0 8px;
    border-top:2px solid currentColor;
    border-bottom:0;
    font-size:20px;
    font-weight:700;
}
.cw-review-total strong{
    font:inherit;
    white-space:nowrap;
}

/* Compact, theme-native review summary */
.cba35-review{
    max-width:920px;
    margin:14px auto 0;
    padding:20px 26px;
    border:0;
    border-radius:0;
    background:#fff;
    box-shadow:none;
}
.cba35-review > .cba35-h{
    margin:0 0 18px;
    font-size:clamp(27px,3vw,36px);
    line-height:1.15;
    text-transform:none!important;
}
.cw-review-section-title{
    margin:18px 0 8px;
    font-size:16px;
    font-weight:700;
    color:#172f43;
    text-align:center;
}
.cw-review-section-title:first-child{
    margin-top:0;
}
.cba35-card.card-review-block{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 34px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}
.card-review-block > .review_one_line{
    display:grid;
    align-content:start;
    gap:4px;
    margin:0;
    min-height:64px;
    padding:10px 4px 12px;
    border:0;
    border-bottom:1px solid #d8e0e5;
    border-radius:0;
    background:transparent;
    justify-items:center;
    text-align:center;
}
.card-review-block > .review_one_line > span:first-child{
    color:#567082;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    line-height:1.25;
    text-transform:uppercase;
}
.card-review-block > .review_one_line > span:last-child,
.card-review-block > .review_one_line > strong:last-child{
    color:#172f43;
    font-size:16px;
    font-weight:700;
    line-height:1.3;
    text-align:center;
}
.card-review-block > .review_one_line--stacked{
    grid-column:1 / -1;
    min-height:auto;
    padding-top:13px;
    padding-bottom:14px;
    border-color:#b9d7e7;
    background:transparent;
}
.card-review-block > .review_one_line--stacked > strong{
    text-align:center;
}
.cw-review-subheading{
    grid-column:1 / -1;
    margin:14px 0 7px!important;
    padding:0!important;
    border:0!important;
    color:#172f43;
    font-size:15px;
    font-weight:700;
    text-align:center;
}
.cw-review-table-wrap{
    grid-column:1 / -1;
    display:block!important;
    margin:0!important;
    padding:0 0 6px!important;
    overflow-x:auto;
    border:0!important;
}
.review_add_ons_options{
    display:block;
    width:100%;
    border:0;
    border-radius:0;
    overflow:hidden;
}
.review_add_ons_options thead{
    display:none;
}
.review_add_ons_options tbody{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
}
.review_add_ons_options tbody tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) 30px 66px;
    align-items:center;
    min-width:0;
    border-bottom:1px solid #d8e0e5;
}
.review_add_ons_options tbody tr:nth-child(odd){border-right:0;}
.review_add_ons_options tr td{
    padding:7px 9px;
    border:0;
    font-size:13px;
    text-align:center;
}
.review_add_ons_options .valueNamePreviewTable{
    gap:7px;
    text-align:left;
}
.review_add_ons_options .valueNamePreviewTable img{
    width:34px;
    height:40px;
    object-fit:contain;
}
.card-review-block .cw-review-total{
    grid-column:1 / -1;
    display:flex;
    min-height:auto;
    margin:9px 0 0;
    padding:15px 4px 6px;
    border:0;
    border-top:2px solid #6aadd5;
    border-radius:0;
    background:transparent;
    color:#17384d;
    font-size:17px;
    justify-content:center;
    gap:20px;
}
.card-review-block .cw-review-total > span:first-child,
.card-review-block .cw-review-total > strong:last-child{
    color:#17384d;
    font-size:18px;
}

@media(max-width:640px){
    .cba35-review{padding:18px 12px;}
    .cba35-card.card-review-block{grid-template-columns:1fr;padding:0;}
    .card-review-block > .review_one_line,
    .card-review-block > .review_one_line--stacked{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:4px;
        min-height:auto;
        padding:14px 15px;
        margin:0;
    }
    .card-review-block > .review_one_line > span:last-child,
    .card-review-block > .review_one_line > strong:last-child{
        text-align:left;
    }
    .card-review-block .cw-review-total{
        display:flex!important;
        margin:2px 0 0;
    }
    .review_add_ons_options tbody{grid-template-columns:1fr;}
    .review_add_ons_options tbody tr:nth-child(odd){border-right:0;}
}
.selectDeliveryDateCustomBasket{
    height:50px;
}
#wrapper-custom-widget{
    position:relative;
}
.loadingbox{

    display:block!important;
    /*background:#fff url('https://thegiftgroup.s3.ca-central-1.amazonaws.com/custombaskets/loading.gif') no-repeat center center;*/
    /*width:100%; height:100%;*/

    /*position:absolute;*/
    /*opacity:0.6;*/
    /*min-height:50px;*/

    background: #fff url(https://thegiftgroup.s3.ca-central-1.amazonaws.com/custombaskets/loading.gif) no-repeat center center;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.6;
    min-height: 50px;
    top: 0px;
    left: 0px;
}
.loadingbox.hide{
    display:none!important;
}





:root {
    --accent:      #2563eb;
    --track-bg:    #e2e8f0;
    --track-h:     5px;
    --thumb-size:  20px;
    --dot-size:    8px;
    --text:        #0f172a;
    --muted:       #94a3b8;
    --bg:          #f1f5f9;
    --card-bg:     #ffffff;
    --card-border: #e2e8f0;
    --font:        'DM Sans', sans-serif;
}
/* ── Card ── */
/* ── Card ── */
.price-range .card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 1.75rem 2rem 2rem;
}

.price-range .card-title {
    font-size: 13px;
    color: var(--muted);
    font-weight: 400;
    margin-bottom: 2.5rem; /* space above tooltip area */
}

/* ── Slider shell ── */
/* padding-top  = tooltip(26px) + gap(8px) = 34px          */
/* padding-bottom = arrow(8px) + gap(3px) + label(16px) = 28px */
.price-range .slider-shell {
    position: relative;
    padding-top: 34px;
    padding-bottom: 28px;
}

/* vertical centre of the thumb within the shell */
/* = padding-top + thumb-size/2                   */
/* = 34 + 10 = 44px from shell top               */

/* ── Track layers ── */
.price-range .track-bg-layer,
.price-range .track-fill-layer {
    position: absolute;
    height: var(--track-h);
    border-radius: 999px;
    pointer-events: none;
    /* vertically centred on the thumb */
    top: calc(34px + var(--thumb-size)/2 - var(--track-h)/2);
}

.price-range .track-bg-layer {
    left: 0; right: 0;
    background: var(--track-bg);
    z-index: 0;
}

.price-range .track-fill-layer {
    left: 0;
    background: var(--accent);
    z-index: 1;
    width: 0%;
    transition: width .12s ease;
}

/* ── Native input ── */
.price-range input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: var(--thumb-size);
    background: transparent;
    outline: none;
    cursor: pointer;
    position: relative;
    z-index: 4;
}

.price-range input[type="range"]::-webkit-slider-runnable-track {
    height: var(--track-h);
    background: transparent;
    border-radius: 999px;
}
.price-range input[type="range"]::-moz-range-track {
    height: var(--track-h);
    background: var(--track-bg);
    border-radius: 999px;
}
.price-range input[type="range"]::-moz-range-progress {
    height: var(--track-h);
    background: var(--accent);
    border-radius: 999px;
}

.price-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--thumb-size);
    height: var(--thumb-size);
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--accent);
    box-shadow: 0 1px 6px rgba(37,99,235,.3);
    margin-top: calc(var(--thumb-size)/-2 + var(--track-h)/2);
    transition: transform .15s, box-shadow .15s;
}
.price-range input[type="range"]::-moz-range-thumb {
    width: var(--thumb-size);
    height: var(--thumb-size);
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--accent);
    box-shadow: 0 1px 6px rgba(37,99,235,.3);
    transition: transform .15s, box-shadow .15s;
}
.price-range input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.18);
    box-shadow: 0 2px 14px rgba(37,99,235,.4);
}
.price-range input[type="range"]:active::-moz-range-thumb {
    transform: scale(1.18);
    box-shadow: 0 2px 14px rgba(37,99,235,.4);
}



/* ── Tooltip ── */
.price-range .tooltip {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 7px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 6;
    transition: left .06s linear;
    letter-spacing: .01em;
}
.price-range .tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--accent);
}

/* ── Orientation markers row ── */
/* positioned just below the track line */
.price-range .markers-row {
    position: absolute;
    left: 0; right: 0;
    top: calc(36px + var(--thumb-size)/2 + var(--track-h)/2 + 4px);
    pointer-events: none;
    z-index: 2;
}

.price-range .marker {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

/* downward arrow tick */
.price-range .marker-arrow {
    width: 0; height: 0;
    border-left:  5px solid transparent;
    border-right: 5px solid transparent;
    border-top:   6px solid var(--muted-light);
}

.price-range .marker-label {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
}

/* highlight the nearest marker to current value */
.price-range .marker.near .marker-arrow  { border-top-color: var(--accent); }
.price-range .marker.near .marker-label  { color: var(--accent); font-weight: 600; }


#load_suggestions_block .cba35-field-tone
{
    display: flex;gap: 16px;
}

@media (max-width:560px){

    .price-range .card{

    }
    .price-range .card-title{
        margin-bottom:0px;
    }
    .price-range .slider-shell{
        padding-bottom:0px;
    }
    .price-range .markers-row{
        display:none;
    }
    .cba35-type_message label{
        font-size:13px;
    }
    #load_suggestions_block .cba35-field-tone
    {
        display: grid
    }
    /*#wrapper-custom-widget .sliderList*/
    /*{*/
    /*    grid-template-columns: 1fr 1fr;*/
    /*}*/
    .cba35-cards.recipient-cards{
        grid-template-columns:1fr 1fr;
    }
    .cba35-card span, .cba35-card-messages span,
    .cba35-card span.cba35-hint, .cba35-card-messages span.cba35-hint
    {
        min-height:auto;
    }

    .cba35-btn--primary{
        font-size:14px;
    }
    .review_one_line{
        display:grid!important; grid-template-columns: 1fr!important;
        margin-bottom:15px;padding-bottom:5px;
    }
    .wrapperDetails{
        display:grid; grid-template-columns: 1fr; gap:15px;
    }
    #cba35-greeting-card-suggestions{
        grid-template-columns: 1fr;
        gap:15px;
    }

    .tiles-slider {
        overflow: hidden;
    }

    .tiles-track {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 0 16px;
        scroll-padding-left: 16px;
        -webkit-overflow-scrolling: touch;
    }

    .tile {
        flex: 0 0 85%;              /* 👈 Shows 1 full + part of next */
        scroll-snap-align: start;
        border-radius: 16px;
        /*background: #f5f5f5;*/
        /*padding: 20px;*/
    }

    /* Hide scrollbar */
    .tiles-track::-webkit-scrollbar {
        display: none;
    }
    .tiles-track {
        scrollbar-width: none;
    }


    .slider-dots {
        display: flex;
        justify-content: center;
        margin-top: 12px;
        gap: 8px;
    }

    .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ccc;
        border: none;
    }

    .dot.active {
        background: #000;
    }


    .cba35-greeting_message-wrapper{
        grid-template-columns:1fr ;
    }
    .cba35-progress .progress-steps {
        display:grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .wrapper_body_step{
        grid-template-columns: 1fr;
        display:block;

    }
    .leftColumnStepBody{
        display: grid;
        grid-template-columns: 20% 1fr;
        border: none;
        gap:10px;
    }
    .blockCardsSlides,#main_occasions{
        width: 100%;
        /*overflow-x: scroll;*/
    }

    /*.cba35-cards .occasion-cards*/
    /*.cba35-cards, .blockCardsSlides {*/
    /*    display:grid;*/
    /*    grid-template-columns: 1fr 1fr;*/
    /*}*/
    .cba35-cards .cba35-card{
        /*width: 140px;*/
    }
    .icon-wrapper.occasion-icon{
        height:115px;
        height:220px;
    }
    .cba35-geetingCardImage{
        grid-template-columns: 1fr;
    }
    .template_wrapper.customBasket .optionSetSecondColumnWrapper .sub_menus{
        grid-template-columns: 1fr;
    }
    .cba35-review{
        padding:0px;
    }
    .review_one_line span{text-align:left;}

    .dietaryCheckboxesGroup ul, .ColourPreferenceCheckboxesGroup ul{
        grid-template-columns: 1fr 1fr;
    }

    .bold-options-head-flat, .bold-options-custom-head-flat{
        font-size: 16px;
    }
    .cba35-screen{
        padding:15px;
    }

    .cba35-progress .step {

        font-size: 10px;
    }
    .cba35-progress .progress-wrapper{
        padding:5px;
    }
    .cba35-progress{
        padding:5px;
    }
    .cba35-progress .progress-wrapper::before{
        top:12px;
    }
    .cba35-progress .progress-line-fill{
        top:12px;
    }
    .cba35-progress .icon{
        width:28px;
        height:28px;
    }
    #imageGreetingCard{
        height:300px
    }
}

/* Compact PDP commerce summary; the detailed builder review remains available below. */
.cw-pdp-order-summary{
    width:100%;
    min-width:0;
    box-sizing:border-box;
    max-width:760px;
    margin:0 auto;
    padding:24px 30px 22px;
    border:1px solid #d8d8d8;
    border-radius:8px;
    background:#fff;
}
.cw-review-columns{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;max-width:1120px;margin:0 auto;align-items:start;}
.cw-review-columns .cw-pdp-order-summary{max-width:none;margin:0;}
.cw-review-secondary{min-width:0;padding:24px 30px 22px;border:1px solid #d8d8d8;border-radius:8px;background:#fff;}
.cw-review-secondary h4{margin:0 0 12px;font-family:var(--cw-heading-font,"Playfair Display",serif);font-size:23px;font-weight:400;line-height:1.25;}
.cw-review-secondary h4:not(:first-child){margin-top:24px;padding-top:20px;border-top:1px solid #e3e3e3;}
.cw-review-addon-list{list-style:none;margin:0;padding:0;}
.cw-review-addon-list li{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #ededed;font-family:var(--cw-body-font,Montserrat,sans-serif);font-size:13px;line-height:1.4;}
.cw-review-addon-list img{width:38px;height:38px;object-fit:contain;}
.cw-review-addon-list strong{font-weight:600;white-space:nowrap;}
.cw-review-addon-list .cw-review-empty{display:block;color:#666;}
.cw-review-addon-total,.cw-review-final-total{display:flex;justify-content:space-between;gap:18px;font-family:var(--cw-body-font,Montserrat,sans-serif);}
.cw-review-addon-total{padding-top:12px;font-size:14px;font-weight:600;}
.cw-review-card-spread{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.cw-review-card-spread figure{margin:0;min-width:0;}
.cw-review-card-spread figcaption{margin-bottom:6px;color:#555;font-family:var(--cw-body-font,Montserrat,sans-serif);font-size:12px;font-weight:600;}
.cw-review-card-spread img,.cw-review-card-inside{width:100%;aspect-ratio:4/5;box-sizing:border-box;border:1px solid #ddd;background:#fff;}
.cw-review-card-spread img{display:block;object-fit:cover;}
.cw-review-card-inside{display:flex;align-items:center;justify-content:center;padding:14px;color:#222;font-family:var(--cw-body-font,Montserrat,sans-serif);font-size:12px;line-height:1.5;text-align:center;overflow-wrap:anywhere;}
.cw-review-card-inside p{margin:0 0 10px!important;text-align:left!important;}
.cw-review-card-inside p:last-child{margin-bottom:0!important;}
.cw-review-final-total{align-items:baseline;margin-top:24px;padding-top:17px;border-top:2px solid #89c4e8;color:#17384d;}
.cw-review-final-total span{font-size:16px;font-weight:600;}
.cw-review-final-total strong{font-size:23px;font-weight:700;white-space:nowrap;}
.cw-pdp-order-summary h4{
    margin:0 0 18px;
    color:#000;
    font-family:var(--cw-heading-font,"Playfair Display",serif);
    font-size:27px;
    font-weight:400;
    line-height:1.25;
    text-align:center;
}
.cw-pdp-summary-list{margin:0;border-top:1px solid #d9d9d9;}
.cw-pdp-summary-list>div{
    display:flex;
    align-items:baseline;
    gap:8px;
    padding:10px 0;
    border-bottom:1px solid #e3e3e3;
}
.cw-pdp-summary-list dt,
.cw-pdp-summary-list dd{
    margin:0;
    font-family:var(--cw-body-font,Montserrat,sans-serif);
    font-size:14px;
    line-height:1.55;
}
.cw-pdp-summary-list dt{color:#555;font-weight:600;white-space:nowrap;}
.cw-pdp-summary-list dt::after{content:":";}
.cw-pdp-summary-list dd{color:#171717;font-weight:500;text-align:left;}
.cw-pdp-summary-list .cw-pdp-summary-wide{display:block;padding:12px 0;}
.cw-pdp-summary-list .cw-pdp-summary-wide dt{margin-bottom:5px;}
.cw-pdp-card-selection{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    padding:12px 0;
    border-bottom:1px solid #e3e3e3;
}
.cw-pdp-card-selection>span{color:#555;font-family:var(--cw-body-font,Montserrat,sans-serif);font-size:14px;font-weight:600;}
.cw-pdp-card-selection>span::after{content:":";}
.cw-pdp-card-selection img{
    width:74px;
    height:92px;
    object-fit:cover;
    border:1px solid #dedede;
    background:#fff;
}
.cw-pdp-card-edit,.cw-pdp-card-add{
    padding:4px 0!important;
    border:0!important;
    border-bottom:1px solid currentColor!important;
    border-radius:0!important;
    background:transparent!important;
    color:#294f68!important;
    font-family:var(--cw-body-font,Montserrat,sans-serif)!important;
    font-size:13px!important;
    font-weight:600!important;
    text-transform:none!important;
}
.cw-pdp-estimated-total{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:20px;
    padding-top:18px;
    border-top:2px solid #89c4e8;
    color:#17384d;
    font-family:var(--cw-body-font,Montserrat,sans-serif);
    min-width:0;
}
.cw-pdp-estimated-total span{font-size:16px;font-weight:600;}
.cw-pdp-estimated-total strong{font-size:24px;font-weight:700;white-space:nowrap;}
.cw-full-review-details{max-width:760px;margin:16px auto 0;border-top:1px solid #d8d8d8;}
.cw-full-review-details>summary{
    padding:14px 0;
    color:#294f68;
    font-family:var(--cw-body-font,Montserrat,sans-serif);
    font-size:13px;
    font-weight:600;
    text-align:center;
    cursor:pointer;
}
.cw-full-review-content{padding-top:4px;}
.cba35-review>.cba35-actions{max-width:760px;margin:18px auto 0;justify-content:center;}
.cba35-review #cba35-confirm{min-width:240px;}
@media(max-width:640px){
    .cw-review-columns{grid-template-columns:minmax(0,1fr);gap:14px;width:100%;max-width:calc(100vw - 24px);margin-inline:auto;overflow:hidden;}
    .cw-review-columns .cw-pdp-order-summary,.cw-review-secondary{width:100%;max-width:100%;box-sizing:border-box;}
    .cw-review-secondary{padding:22px 18px 20px;overflow:hidden;}
    .cw-review-addon-list li{grid-template-columns:32px minmax(0,1fr);gap:8px;}
    .cw-review-addon-list img{width:30px;height:30px;}
    .cw-review-addon-list li strong{grid-column:2;text-align:left;}
    .cw-review-addon-total,.cw-review-final-total{align-items:baseline;}
    .cw-review-final-total span{font-size:14px;}
    .cw-review-final-total strong{font-size:18px;}
    .cw-pdp-order-summary{padding:22px 18px 20px;border-radius:9px;}
    .cw-pdp-order-summary h4{font-size:24px;margin-bottom:13px;}
    .cw-pdp-summary-list>div{gap:6px;padding:9px 0;}
    .cw-pdp-estimated-total{display:grid;grid-template-columns:1fr;gap:3px;text-align:center;}
    .cw-pdp-estimated-total span{font-size:14px;}
    .cw-pdp-estimated-total strong{font-size:18px;}
    .cba35-review>.cba35-actions{display:grid;grid-template-columns:1fr;gap:10px;}
    .cba35-review #cba35-confirm{width:100%;min-width:0;order:-1;}
}

/* =====================================================================
   DESKTOP FIXES — Custom Basket Gift App
   Append this AFTER your existing customBasketGiftApp.css (and after
   mobile-stepper-fixes.css, if you added it). No HTML changes needed —
   everything below is CSS-only.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) Greeting card preview image has no height above 560px
   #imageGreetingCard only gets a background-image; height is only set
   inside your max-width:560px query. On desktop/tablet the div has no
   content and collapses to 0px tall, so the image likely never shows.
   Scoped to min-width:561px so it never fights your existing mobile
   height:300px rule.
   --------------------------------------------------------------------- */
@media (min-width:561px){
    #imageGreetingCard{
        height:340px;
        min-height:340px;
    }
}

/* ---------------------------------------------------------------------
   2) Recipient / sub-recipient cards — locked to 4 per line on desktop
   (Reverted from auto-fit back to a fixed 4 columns per your request.
   Scoped to min-width:561px on purpose — unscoped, this rule loads
   after mobile-stepper-fixes.css and, being equal specificity, would
   win on phones too, forcing 4 cramped columns and clipping text like
   "Corporate" (that's the bug in your screenshot). Mobile keeps the
   1fr 1fr rule from mobile-stepper-fixes.css.
   Note: a set with a different item count — e.g. a 3-item sub-recipient
   group like Girl / Boy / Do Not Know — will leave an empty slot rather
   than reflow. If that becomes a problem later, auto-fit is the fix.)
   --------------------------------------------------------------------- */
@media (min-width:561px){
    .cba35-cards.recipient-cards{
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ---------------------------------------------------------------------
   3) Stepper label contrast
   Inline background on #cba35-progress is rgb(92,92,92); inactive
   step labels are #6b7280 — close enough in lightness to be hard to
   read. Lightened so upcoming step names stay legible against that bar.
   Completed/active labels are untouched (still #111827, set later in
   your stylesheet with higher specificity).
   --------------------------------------------------------------------- */
.cba35-progress .step{
    color:#f1f1f1;
}

/* ---------------------------------------------------------------------
   4) Hover feedback (desktop mouse users get none today)
   --------------------------------------------------------------------- */
.cba35-card:hover{
    border-color:#111827;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.cba35-card.is-selected:hover{
    border-color:#000; /* keep selected look dominant on hover */
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.cba35-btn:not(.cba35-btn--primary):not(.cba35-btn--back):hover{
    background:rgba(0,0,0,.10);
}
.cba35-btn--back:hover{
    opacity:.65;
}
.cba35-btn.cba35-btn--primary:hover{
    cursor:pointer;
}

/* ---------------------------------------------------------------------
   6) Theme slider arrows — broken positioning/styling
   None of .arrow/.prevBtn/.nextBtn/.slider-wrapper/.sliderTrack were
   defined anywhere in your stylesheet. Most likely cause of the red,
   clipped circle overlapping the last card: .slider-wrapper has no
   `position:relative`, so the arrows (position:absolute) are anchoring
   to some unrelated ancestor instead of the slider itself, and
   whatever red/circle look you're seeing is leaking in from the
   theme's global CSS. This gives the arrows their own scoped, contained
   style so they sit cleanly at the edges of the card row instead of on
   top of a card.
   --------------------------------------------------------------------- */
.cba35 .slider-wrapper{
    position:relative;
}
.cba35 .sliderTrack{
    overflow:hidden;
    position:relative;
}
.cba35 .arrow{
    position:absolute;
    top:96px;               /* centred on the circular theme image, not the whole card */
    transform:translateY(-50%);
    width:36px;
    height:36px;
    border-radius:50%;
    background:#ffffff;
    border:1px solid rgba(0,0,0,.15);
    box-shadow:0 4px 12px rgba(0,0,0,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:5;
    transition:background .2s ease, box-shadow .2s ease;
}
.cba35 .arrow svg{
    width:16px;
    height:16px;
    stroke:#111827;
    fill:none;
}
.cba35 .arrow:hover{
    background:#111827;
    box-shadow:0 6px 16px rgba(0,0,0,.28);
}
.cba35 .arrow:hover svg{
    stroke:#fff;
}
.cba35 .arrow.prevBtn{
    left:6px;
}
.cba35 .arrow.nextBtn{
    right:6px;
}
.cba35 .arrow.hidden{
    display:none;
}

/* ---------------------------------------------------------------------
   5) OPTIONAL — a bit more breathing room on large monitors
   Your widget is capped at max-width:900px everywhere. Purely a taste
   call: delete this block if you'd rather keep it at 900px on every
   screen.
   --------------------------------------------------------------------- */
@media (min-width:1400px){
    .cba35{
        max-width:1040px;
    }
}

/* =====================================================================
   CARD HEIGHT FIX — equal-height cards, consistent title space
   Applies everywhere (desktop + mobile), no media queries needed.
   Append after your other stylesheets/patches.
   ===================================================================== */

/* Root cause: your original stylesheet sets align-self:baseline on
   .cba35-card (and .cba35-card-messages). That overrides the flex/grid
   row's default "stretch" behaviour, so instead of every card in a row
   matching the tallest one, each card just sizes to its own content —
   which is exactly why "Classic Floral Arrangement" (2-line title)
   ends up a different height than "Romantic Flowers" (1-line title).
   Restoring stretch fixes this for every card grid in the widget:
   theme slider, recipient cards, add-ons, dietary, etc. */
.cba35-card,
.cba35-card-messages{
    align-self:stretch;
}

/* Belt-and-suspenders: make sure the theme slider row itself stretches
   its children too. */
.sliderList{
    align-items:stretch;
}

/* Reserve the same vertical space for the title whether it wraps to
   1 or 2 lines, so every card's description starts at the same height
   even before the stretch above kicks in. Targets the plain title
   <span> only — the description already has its own min-height via
   .cba35-hint. Raise this if your title font is larger than ~20px. */
.cba35-card span:not(.cba35-hint){
    min-height:64px;
}



/* =====================================================================
   MOBILE FIXES — Custom Basket Gift App
   Append this AFTER your existing customBasketGiftApp.css so these
   rules win the cascade (same selectors, later source order).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) PROGRESS STEPPER — the real bug
   Your existing mobile rule switches .progress-steps to a 4-column
   grid (`grid-template-columns: 1fr 1fr 1fr 1fr`), which wraps 7 steps
   into two rows. But the connecting line (`.progress-wrapper::before`
   and `.progress-line-fill`) is a single absolutely-positioned bar
   sized/positioned for ONE row of icons. On two rows, the line only
   threads through row 1 — row 2's icons end up floating with no line,
   and the fill-% (calculated for a single 7-wide row) no longer lines
   up with where the icons actually sit.

   Fix: drop the single full-width line on mobile and give every step
   its own short connector segment instead. Each segment only needs to
   know about its own cell, so it keeps working correctly no matter how
   many rows the steps wrap into.
   --------------------------------------------------------------------- */
@media (max-width:560px){

    /* Turn off the old single-bar line + fill — they can't span 2 rows */
    .cba35-progress .progress-wrapper::before,
    .cba35-progress .progress-line-fill{
        display:none;
    }

    .cba35-progress .progress-steps{
        grid-template-columns: 1fr 1fr 1fr 1fr;
        row-gap:16px;
    }

    .cba35-progress .step{
        position:relative;     /* anchors the connector below */
    }

    /* Per-step connector: a short line from this icon's centre to the
       next one. Because it belongs to the step itself, it never has to
       stretch across a row wrap. */
    .cba35-progress .step:not(:last-child):not(:nth-child(4n))::after{
        content:"";
        position:absolute;
        top:14px;               /* = half of the 28px mobile icon */
        left:50%;
        width:100%;
        height:2px;
        background:#e5e7eb;
        z-index:0;
    }

    /* Line segment turns dark once that step is completed */
    .cba35-progress .step.completed:not(:last-child):not(:nth-child(4n))::after{
        background:#111827;
    }

    /* Keep the icon circle drawn on top of the line, not behind it */
    .cba35-progress .icon{
        position:relative;
        z-index:1;
    }

    .cba35-progress .label{
        white-space:normal;
        line-height:1.25;
    }
}

/* ---------------------------------------------------------------------
   2) RECIPIENT ICONS — too big for a 2-column mobile grid
   .icon-wrapper.recipient-icon is fixed at 128x128px everywhere. On a
   2-column mobile layout that overwhelms the card. Since these use
   background-size:100%, shrinking the box is safe — the image scales
   down with it.
   --------------------------------------------------------------------- */
@media (max-width:560px){
    .icon-wrapper.recipient-icon{
        width:96px;
        height:96px;
    }
}
@media (max-width:380px){
    .icon-wrapper.recipient-icon{
        width:76px;
        height:76px;
    }
    .cba35-cards.recipient-cards{
        grid-template-columns:1fr 1fr; /* keep 2-up even on very small phones */
    }
}

/* Safety net: a long single word like "Corporate" can't naturally wrap
   and will force its grid column wider than the others, pushing the
   whole row past the screen edge (with the page clipping the overflow
   rather than scrolling — that's what produced the truncated
   "Corpora" text). This lets any card label wrap/break instead of
   forcing overflow, regardless of how many columns end up in play. */
@media (max-width:560px){
    .cba35-cards.recipient-cards > .cba35-card{
        min-width:0;
    }
    .cba35-card span{
        overflow-wrap:break-word;
        word-break:break-word;
    }
}

/* ---------------------------------------------------------------------
   3) STEP HEADINGS — inline font-size:34px is too large on narrow phones
   These headings (e.g. "Who Is This Gift For?") are set with an inline
   style (no !important), so a CSS rule with !important can safely win.
   --------------------------------------------------------------------- */
@media (max-width:560px){
    .cba35-h{
        font-size:22px !important;
        line-height:1.25 !important;
    }
}
@media (max-width:380px){
    .cba35-h{
        font-size:19px !important;
    }
}

/* ---------------------------------------------------------------------
   4) CHECKBOX / RADIO GRIDS — 4-across is too tight under ~380px
   --------------------------------------------------------------------- */
@media (max-width:380px){
    .dietaryCheckboxesGroup ul,
    .ColourPreferenceCheckboxesGroup ul{
        grid-template-columns: 1fr 1fr;
    }
    .allergies-wrapper{
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------
   5) Small polish
   --------------------------------------------------------------------- */
@media (max-width:560px){
    .copyMainStep{
        font-size:14px;
    }
    .cba35-card span{
        font-size:14px;
    }
}