/* === Welcome User Flow Styles === */
/* Author: Your Name
   Description: CSS styles for the 7-step New User (First-Time Visitor) flow
   This stylesheet controls layout, navigation, and highlight of selections. */
.wrapper__step-user-visitor {
    margin-bottom: 200px;
    margin-top: 50px;
}

/* Hide/show step sections */
.wrapper__step-user-visitor h2, .wrapper__step-user-visitor h2 span {
    color: #2B4211;
    text-align: center;
    font-family: 'GT Walsheim Condensed Black Trial', Sans-serif;
    font-size: 60px;
    font-style: normal;
    font-weight: 800;
    line-height: 60px;
    text-transform: uppercase;
    margin-bottom: 0;
}

.wrapper__step-user-visitor h3 {
    color: #2B4211;
    text-align: center;
    font-size: 34px;
    font-style: normal;
    font-weight: 800;
    line-height: 34px;
    text-transform: uppercase;
    margin: 0;
}

.wrapper__step-user-visitor h4 {
    color: #2B4211;
    font-size: 22px;
    font-style: normal;
    font-weight: 800;
    line-height: 24px;
    text-transform: uppercase;
}

.wrapper__step-user-visitor p {
    color: #2B4211;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: -0.5px;
}

.wrapper__step-user-visitor label {
    color: rgba(0, 0, 0, 0.80);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.5px;
}

.wrapper__step-user-visitor .step {
    display: none;
    max-width: 1145px;
    margin: 0 auto;
}

.wrapper__step-user-visitor .step.active {
    display: block;
}

.wrapper__step-user-visitor .welcome-container {
    display: block;
}

.wrapper__step-user-visitor .is-hidden {
    display: none;
}

/* Option, Box, Addon cards */
.option, .box-card, .addon-card {
    cursor: pointer;
}

/* Step navigation bar */
.steps-nav {
    display: flex;
    justify-content: center;
    margin: 40px 0;
}

.steps-nav span {
    color: rgba(0, 40, 49, 0.20);
    text-align: center;
    font-family: revert-layer;
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: 40px;
    text-transform: uppercase;
    width: 152px;
    height: 67px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.steps-nav span.active {
    background: url(/wp-content/uploads/2025/09/bg-step.png) no-repeat center;
    background-size: 100% 100%;
    color: #2B4211;
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: 40px;
    text-transform: uppercase;
}

.steps-nav span.done-step {
    color: #2B4211;
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: 40px;
}

.steps-nav a {
    text-decoration: underline;
    cursor: pointer;
}

/* Navigation buttons */
.nav-btns {
    margin-top: 24px;
    display: flex;
    gap: 10px;
}

.checkout-btn, .next-btn, .prev-btn, .btn-select, .btn-selected {
    padding: 10px 14px;
    border-radius: 8px;
    background: #2e7d32;
    color: #fff;
    cursor: pointer;
}

.prev-btn {
    border-color: #777;
    background: #777;
}

.btn-select {
    background: #fff;
    color: #2e7d32;
}

.btn-selected {
    background: #2e7d32;
    color: #fff;
}

/* Essentials table */
.essentials-table {
    width: 100%;
    border-collapse: collapse;
}

.essentials-table th, .essentials-table td {
    border-bottom: 0px solid #eee;
    padding: 10px 8px;
}

.amount-control button {
    margin: 0 6px;
}

/* Order summary */
.wrapper__step-user-visitor .order-summary {
    display: grid;
    gap: 12px;
    margin: 0;
}

.wrapper__step-user-visitor .order-item {
    display: flex;
    gap: 50px;
    align-items: center;
    border-radius: 0;
    background: url(/wp-content/uploads/2025/09/bg-add-on.png) no-repeat center;
    background-size: 100% 100%;
    padding: 15px;
    position: relative;
}

.wrapper__step-user-visitor .order-item img {
    width: 110px;
    height: 110px;
    object-fit: contain;
}

.wrapper__step-user-visitor .order-item h4 {
    color: #2B4211;
    font-family: 'GT Walsheim Condensed Black Trial', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: 20px;
    text-transform: uppercase;
}

.addons-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}

.addons-list li {
    display: flex;
    justify-content: space-between;
    padding: 0;
    width: 100%;
    margin: 0;
}

p.browse-more.small {
    color: rgba(43, 66, 17, 0.50);
    text-align: center;
    font-family: 'GT Walsheim Condensed Black Trial', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 27.36px;
    letter-spacing: 0.4px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-transform: uppercase;
    margin-top: 30px;
}

.addons-list span.qty {
    display: inline-flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #68C300;
    color: #2B4211;
    font-family: 'GT Walsheim Condensed Black Trial', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: 26px;
    text-transform: uppercase;
}

.addons-list span.price {
    color: #2B4211;
    font-family: 'GT Walsheim Condensed Black Trial', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
    text-transform: uppercase;
}

.ss-deliver h4.title {
    font-size: 34px;
    font-style: normal;
    font-weight: 800;
    line-height: 34px;
    margin-bottom: 30px;
    margin-top: 40px;
}

.total-row {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    margin-top: 12px;
}

.step .badge {
    font-family: 'GT Walsheim Condensed Black Trial', sans-serif;
    border-radius: 4px;
    background: #68C300;
    display: inline-flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #2B4211;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: 26px;
    position: absolute;
    top: -17px;
    left: 50%;
    transform: translateX(-50%);
}

.bottom-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-top: 16px;
}

.bottom-bar img {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    object-fit: cover;
}

.step .options-grid {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 40px;
}

.step .options-grid .option {
    background: url(/wp-content/uploads/2025/09/bg-product-step.png) no-repeat center;
    background-size: 100% 100%;
    text-align: center;
    width: calc(100% / 4);
    position: relative;
    padding: 20px;
}

.step .options-grid .option img {
    width: auto;
    height: 181px;
    margin: 0 auto;
}

.step .options-grid .option.selected {
    background: url(/wp-content/uploads/2025/09/bg-product-step-active.png) no-repeat center;
    background-size: 100% 100%;
}

.step .options-grid .option button svg {
    display: none;
}

.step .options-grid .option button {
    color: rgba(43, 66, 17, 0.50);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
    text-transform: uppercase;
    background: transparent;
}

.step .options-grid .option.selected button {
    background: url(/wp-content/uploads/2025/07/btn-active.png) no-repeat;
    background-size: 100% 100%;
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
    text-transform: uppercase;
    width: 100%;
    height: 44px;
}

.step .options-grid .option h4 {
    text-align: left;
    margin: 17px 0 12px 0;
}

.step .options-grid .option p {
    text-align: left;
}

.extra-option {
    margin-top: 40px;
}

.extra-option h4 {
    color: #2B4211;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.extra-option label.instr {
    max-width: 100%;
    margin: 0;
}

.step .options-grid .option.selected button svg {
    display: block;
}

.steps-nav .link-change {
    color: rgba(0, 0, 0, 0.50);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-transform: uppercase;
}

form#dietary-form {
    display: flex;
    fill: #FFF;
    filter: drop-shadow(0 0 50px rgba(0, 0, 0, 0.10));
    background: url(/wp-content/uploads/2025/09/bg-step-2.png) no-repeat center;
    background-size: 100% 100%;
    padding: 80px 100px;
    gap: 40px;
}

form#dietary-form .item {
    width: calc(100% / 2);
}

form#dietary-form label {
    color: #2B4211;
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: 20px;
    text-transform: uppercase;
}

textarea#other_info {
    color: rgba(0, 40, 49, 0.20);
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: 20px;
    text-transform: uppercase;
    font-family: 'GT Walsheim Condensed Black Trial', sans-serif;
    background: url(/wp-content/uploads/2025/09/Primary-Button.png) no-repeat center;
    background-size: 100% 100%;
    border: 0;
    height: 285px;
}

.other-dietary.item label {
    color: #2B4211;
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: 20px;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-family: 'GT Walsheim Condensed Black Trial', sans-serif;
}

table#essentials-table button.remix svg {
    width: 25.3px;
    height: 22px;
}

table#essentials-table button.remix {
    background: transparent;
}

.dietary-options label.instr input[type="radio"] {
    opacity: 0;
}

.dietary-options .sub-item-option {
    padding-left: 30px;
}

.dietary-options .sub-item-option label span {
    padding-left: 13px;
}

.essentials-table th {
    color: rgba(43, 66, 17, 0.50);
    text-align: center;
    font-family: 'GT Walsheim Condensed Bold Trial', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 30px;
    text-transform: uppercase;
    text-align: left;
}

.essentials-table tr th:last-child img {
    max-width: 126px;
}

.essentials-table tbody td:nth-child(2) img {
    height: 60px;
    width: 60px;
    object-fit: contain;
    margin-right: 20px;
}

.essentials-table td {
    color: rgba(0, 0, 0, 0.80);
    font-family: 'GT Walsheim Condensed Bold Trial', sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 800;
    line-height: 24px;
    text-transform: uppercase;
}

.essentials-table tbody td span.dot {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    background: #AC6DFF;
    display: inline-block;
    border-radius: 100%;
    margin-right: 14px;
}

.essentials-table tbody td:nth-child(3) {
    color: rgba(0, 0, 0, 0.80);
    text-align: center;
    font-family: "Azeret Mono", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: -0.5px;
}

.essentials-table tbody td.amount-control button {
    background: transparent;
    color: rgba(0, 0, 0, 0.80);
    font-family: 'GT Walsheim Condensed Black Trial', sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    text-transform: uppercase;
    margin: 0;
}

.essentials-table tbody tr td {
    position: relative;
}

.essentials-table tbody tr td:before {
    content: '';
    background: url(/wp-content/uploads/2025/09/Line-9.png) no-repeat center;
    position: absolute;
    height: 2px;
    width: 100%;
    bottom: 0;
    left: 0;
}

.ss-hm-people p {
    max-width: 790px;
    margin: 0 auto;
    color: #2B4211;
    text-align: center;
    font-family: "Azeret Mono", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}

.people-select {
    display: flex;
    gap: 30px;
    margin-top: 40px;
}

.people-select .select-block {
    width: calc(100% / 2);
}

.people-select .select-block label {
    color: #2B4211;
    font-family: 'GT Walsheim Condensed Bold Trial', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: 16px;
    text-transform: uppercase;
    text-align: left;
    margin-bottom: 12px;
}

.people-select .select-block select {
    color: #2B4211;
    font-family: 'GT Walsheim Condensed Bold Trial', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 40px;
    text-transform: uppercase;
    border: 0;
    transition: border-color 0.2s;
    background: url(/wp-content/uploads/2025/07/bg-input-welcome.png) no-repeat;
    background-size: 100% 100%;
    height: 78px;
}

.people-select .select-block .wraper_select:before {
    content: '';
    background: url(/wp-content/uploads/2025/09/Group-317.svg) no-repeat center;
    width: 16px;
    height: 10px;
    position: absolute;
    right: 34px;
    top: 50%;
    display: flex;
    z-index: 2;
    transform: translateY(-50%);
}

.wraper_select {
    position: relative;
}

.wrapper__step-user-visitor .title-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 17px;
    margin-bottom: 40px;
}

.boxes-grid .box-card {
    background: url(/wp-content/uploads/2025/09/bg-product-step.png) no-repeat center;
    background-size: 100% 100%;
    padding: 30px;
    min-width: 371px;
    text-align: center;
    position: relative;
}

.boxes-grid .box-card h4 {
    color: #2B4211;
    text-align: center;
    font-family: 'GT Walsheim Condensed Bold Trial';
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 28px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 8px;
}

.boxes-grid .box-card .price {
    color: #2B4211;
    text-align: center;
    font-family: "Azeret Mono", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: -0.5px;
    margin: 0;
}

.boxes-grid .box-card .desc {
    color: #2B4211;
    font-family: "Azeret Mono", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
    margin-top: 5px;
    white-space: normal;
}

.boxes-grid .box-card button {
    width: 100%;
    height: 43px;
    background: url(/wp-content/uploads/2025/09/bg-button.png) no-repeat center;
    color: #2B4211;
    font-family: 'GT Walsheim Condensed Bold Trial', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
    text-transform: uppercase;
    background-size: 100% 100%;
}

.boxes-grid .box-card.selected {
    background: url(/wp-content/uploads/2025/09/bg-product-step-active.png) no-repeat center;
    background-size: 100% 100%;
}

.boxes-grid .box-card img {
    height: 200px;
    width: auto;
}

.boxes-grid .box-card .badge {
    color: #2B4211;
    font-family: 'GT Walsheim Condensed Bold Trial', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: 26px;
    text-transform: uppercase;
    display: block;
    border-radius: 0;
    left: 10px;
    transform: rotateX(0);
    top: 10px;
}

.boxes-swiper {
    position: relative;
}

.boxes-viewport {
    overflow: hidden;
    padding: 0 10px;
}

.boxes-grid {
    display: flex;
    gap: 10px;
    scroll-behavior: smooth;
    white-space: nowrap;
}

.boxes-swiper .boxes-nav {
    position: absolute;
    bottom: -25px;
    z-index: 2;
    background: #FFD000;
}

.boxes-prev {
    left: 122px;
    transform: rotate(-15deg);
}

.boxes-next {
    right: 122px;
    transform: rotate(15deg);
}

.boxes-viewport::-webkit-scrollbar {
    display: none;
}

.ss-your-box .nav-btns {
    margin-top: 100px;
}

.addons-grid .addon-col article.addon-card {
    background: url(/wp-content/uploads/2025/09/bg-add-on.png) no-repeat center;
    background-size: 100% 100%;
    padding: 19px 15px;
}

.addon-card .addon-cta button {
    width: 100%;
    height: 43px;
    background: url(/wp-content/uploads/2025/09/bg-button.png) no-repeat center;
    color: #2B4211;
    font-family: 'GT Walsheim Condensed Bold Trial', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
    text-transform: uppercase;
    background-size: 100% 100%;
}

.boxes-grid .box-card.selected button {
    background: url(/wp-content/uploads/2025/09/bg-btn-active.png) no-repeat center;
    background-size: 100% 100%;
    color: #FFF;
}

.boxes-grid .box-card button svg {
    display: none;
}

.boxes-grid .box-card.selected button svg {
    display: block;
}

.addons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(273px, 1fr));
    gap: 16px;
}

.addons-grid .addon-col .addon-heading {
    margin-bottom: 10px;
    color: #2B4211;
    font-family: 'GT Walsheim Condensed Black Trial';
    font-size: 22px;
    font-style: normal;
    font-weight: 800;
    line-height: 24px;
    text-transform: uppercase;
    text-align: left;
}

.addons-grid .addon-col article.addon-card .addon-inner {
    display: flex;
    gap: 8px;
}

.addons-grid .addon-col article.addon-card .addon-inner figure.addon-media img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.addons-grid .addon-col article .addon-title {
    color: #2B4211;
    font-family: 'GT Walsheim Condensed Black Trial', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 16px;
    text-transform: uppercase;
    margin-bottom: 9px;
}

.addons-grid .addon-col article .addon-meta {
    color: #2B4211;
    font-family: 'GT Walsheim Condensed Bold Trial', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
    text-transform: uppercase;
    margin-bottom: 0;
}

.addons-grid .addon-col article .addon-meta .price {
    color: #2B4211;
}

.addons-grid .addon-col article button.addon-remix {
    color: #2B4211;
    font-family: 'GT Walsheim Condensed Bold Trial', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-transform: uppercase;
    background: transparent;
    margin-top: 3px;
    padding: 0;
}

.addon-card.selected .addon-cta button {
    background: url(/wp-content/uploads/2025/09/bg-btn-active.png) no-repeat center;
    background-size: 100% 100%;
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
    text-transform: uppercase;
}

.addon-card .addon-cta svg {
    display: none;
}

.addon-card.selected .addon-cta svg {
    display: block;
}

/*returning user*/
.wrapper__step-user-visitor .wizard-step {
    max-width: 820px;
    padding: 0 15px;
}

.wrapper__step-user-visitor .wizard-step .option-card p {
    color: #2B4211;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 28px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.wrapper__step-user-visitor .wizard-step .card-content img {
    width: 219px;
    height: 219px;
    object-fit: cover;
}

.welcome-header p {
    color: #2B4211;
    text-align: center;
    font-family: "Azeret Mono", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: -0.5px;
}

.wizard-step-thanks figure {
    text-align: center;
}

.wrapper__step-user-visitor .wizard-step-thanks {
    max-width: 754px;
    padding: 0 15px;
}

.wrapper__step-user-visitor .wizard-step-thanks figure img {
    max-width: 399px;
    margin-top: -30px;
}

.wrapper__step-user-visitor .wizard-step-thanks h3 {
    color: #2B4211;
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    line-height: 40px;
    text-transform: uppercase;
    margin: 30px 0;
}

.ss-delivery p.sub-title {
    color: #2B4211;
    text-align: center;
    font-family: "Azeret Mono", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    text-transform: none;
}

.ss-delivery .time-choice .label {
    color: #2B4211;
    text-align: center;
    font-family: "Azeret Mono", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    text-transform: none;
    margin: 30px 0;
}

.text-browse {
    color: rgba(43, 66, 17, 0.50);
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 27.36px;
    letter-spacing: 0.4px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-transform: uppercase;
    margin: 0;
    margin-top: 30px;
}

.wrapper_delivery {
    max-width: 540px;
    margin: 0 auto;
}

.ss-delivery .special-instructions .group_instr {
    flex-direction: column;
}

.ss-delivery .special-instructions .group_instr label.instr {
    max-width: 100%;
}

.wrapper__step-user-visitor .wizard-step.ss-delivery {
    max-width: 1012px;
}