.sales-mode-cart-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
}

.sales-mode-cart-inner .navigation-cart {
    display: inline-flex;
    align-items: center;
    min-width: max-content;
}

.sales-mode-group-divider {
    display: none;
}

@media screen and (min-width: 981px) {
    .navigation-container > div:first-child > .sales-mode-cart {
        width: 1px;
        white-space: nowrap;
    }

    .navigation-container > div:first-child > .sales-mode-external-divider {
        display: none;
    }

    .sales-mode-group-divider {
        display: block;
        flex: none;
        width: 24px;
        height: 24px;
        background: url(../assets/ic_header_divider.svg) center center no-repeat;
        background-size: contain;
    }

}

.sales-header-selection {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    box-sizing: border-box;
    color: #28272b;
    font-family: opensans-semibold, sans-serif;
    font-size: 11px;
    line-height: 18px;
    white-space: nowrap;
    text-decoration: none;
}

.sales-selection-icon {
    flex: none;
    width: 24px;
    height: 24px;
    background: url(../assets/ic_sales_selection.svg) center center / contain no-repeat;
}

.sales-header-selection .sales-selection-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Oswald, sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.sales-header-selection:hover {
    color: #f93e3c;
}

.sales-header-selection:focus-visible,
.sales-selection-bar:focus-visible {
    outline: 2px solid #ff5452;
    outline-offset: 2px;
}

.sales-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    color: #28272b;
    cursor: pointer;
    font-family: opensans-semibold, sans-serif;
    font-size: 12px;
    line-height: 1.2;
    min-height: 40px;
    padding: 8px 16px;
    text-transform: uppercase;
    transition: border-color .2s, color .2s, background-color .2s;
}

.sales-mode-toggle:hover:not(:disabled) {
    border-color: #ff5452;
    color: #ff5452;
}

.sales-mode-toggle[aria-pressed="true"] {
    border-color: #ff5452;
    background: #fff4f3;
    color: #ff5452;
}

.sales-mode-toggle[aria-pressed="true"]:hover:not(:disabled) {
    background: #ffe7e5;
}

.sales-mode-toggle:disabled {
    cursor: default;
    opacity: .6;
}

.sales-mode-profile-settings {
    max-width: 560px;
    box-sizing: border-box;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    background: #fafafa;
    margin: 24px 0;
    padding: 22px 24px;
}

.sales-mode-profile-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.sales-mode-profile-intro {
    min-width: 0;
}

.sales-mode-profile-intro > .title {
    margin: 0;
}

.sales-mode-profile-intro p {
    margin: 6px 0 0;
    color: #68666a;
    font-size: 13px;
    line-height: 1.5;
}

.sales-mode-profile-toggle {
    min-height: 40px;
    min-width: 82px;
    flex: none;
    font-size: 12px;
}

.sales-mode-profile-whatsapp {
    border-top: 1px solid #e8e8e8;
    padding-top: 18px;
}

.sales-mode-profile-whatsapp label {
    display: block;
    margin-bottom: 8px;
    color: #28272b;
    font-family: opensans-semibold, sans-serif;
    font-size: 13px;
}

.sales-mode-profile-whatsapp .input-error {
    display: block;
}

.sales-mode-profile-whatsapp input {
    max-width: 100%;
    box-sizing: border-box;
}

@media screen and (max-width: 980px) {
    .sales-mode-cart-inner {
        display: block;
        padding: 0;
    }

    .sales-mode-cart-inner .navigation-cart {
        display: block;
    }

    .sales-header-selection {
        display: grid;
        grid-template-columns: 24px auto;
        justify-content: center;
        column-gap: 6px;
        row-gap: 1px;
        font-size: 9px;
        line-height: 12px;
        min-height: 64px;
        padding: 6px 2px;
        border: 0;
        border-radius: 0;
        border-right: 1px solid #e9e9e9;
    }

    .sales-header-label {
        grid-column: 1 / -1;
        grid-row: 2;
        text-align: center;
    }

    .sales-header-selection .sales-selection-count {
        grid-column: 2;
        grid-row: 1;
    }

    .sales-mode-profile-settings {
        padding: 18px;
    }

    .sales-mode-profile-heading {
        flex-wrap: wrap;
        gap: 14px;
    }
}

@media screen and (max-width: 600px) {
    .sales-mode-profile-heading {
        flex-direction: column;
        align-items: flex-start;
    }
}

.sales-selection-bar[hidden],
.sales-selection-bar[data-sales-selection-page="true"],
.sales-header-selection[hidden],
.sales-mode-cart-inner .navigation-cart[hidden],
.sales-selection-footer[hidden],
.sales-selection-empty[hidden] {
    display: none !important;
}

.sales-selection-bar {
    position: fixed;
    right: 24px;
    bottom: 20px;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, .16);
    font-family: opensans-semibold, sans-serif;
    color: #28272b;
    text-decoration: none;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
    box-sizing: border-box;
}

.sales-selection-bar:hover {
    color: #28272b;
    background: #fafafa;
}

.sales-selection-bar-summary {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sales-selection-bar-title {
    color: #28272b;
    font-size: 14px;
}

.sales-selection-bar .button {
    margin-left: 8px;
    min-height: 40px;
    padding: 8px 12px;
    box-sizing: border-box;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8d8d8;
    background: transparent;
    color: #28272b;
}

.sales-selection-bar:hover .button {
    border-color: #ff5452;
    background: transparent;
    color: #ff5452;
    box-shadow: none;
}

.sales-mode-active .cart-float-box {
    display: none !important;
    pointer-events: none !important;
}

.sales-mode-active .ic-winebox-add {
    white-space: normal;
    max-width: calc(100% - 40px);
    box-sizing: border-box;
    text-align: center;
    overflow-wrap: anywhere;
}

.sales-mode-active .sales-in-selection {
    background-color: #ff5452;
    color: #fff;
}

.sales-mode-active .preview-wineset.techsheet-focus .ic-winebox-add {
    width: auto;
    height: auto;
    padding: 8px 16px 9px;
    font-size: 12px;
    line-height: normal;
}

.sales-mode-active .preview-wineset.techsheet-focus .ic-winebox-add::before {
    display: none;
}

.sales-mode-active .ic-winebox-icon-add > div,
.sales-mode-active .ic-winebox-icon-add:hover > div,
.sales-mode-active .button.icon > div.ic-btn-cart,
.sales-mode-active .button.icon > div.ic-btn-addbox,
.sales-mode-active .button.icon:hover > div.ic-btn-addbox {
    background: none;
    text-align: center;
}

.sales-mode-active .ic-winebox-icon-add > div::before,
.sales-mode-active .button.icon > div.ic-btn-cart::before,
.sales-mode-active .button.icon > div.ic-btn-addbox::before {
    content: "+";
    display: block;
    font-size: 24px;
    line-height: 24px;
}

.sales-mode-active .sales-in-selection > div::before {
    content: "✓";
}

.sales-mode-active .buttom-tooltip.addbox > div:first-child {
    display: none;
}

.sales-mode-active .wine-header-price .buttom-tooltip.addbox[hidden] {
    display: none;
}

.sales-mode-active .wine-header-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.sales-mode-active .wine-header-price > div:first-child {
    flex: 0 0 auto;
}

.sales-mode-active .wine-header-price > div:first-child > span {
    display: inline-block;
    white-space: nowrap;
}

.sales-mode-active .wine-header-price > div:nth-child(2) {
    flex: 1 1 230px;
    min-width: 0;
}

.sales-mode-active .wine-header-price .sales-detail-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    max-width: 100%;
    min-height: 48px;
    height: auto;
    padding: 12px;
    text-align: center;
    margin: 0 !important; /* Legacy mobile detail buttons add a 24px top margin. */
}

.sales-mode-active .wine-header-price .sales-detail-action > div {
    flex: 0 0 24px;
    margin: 0;
}

.sales-mode-active .wine-header-price .sales-detail-action > span {
    margin: 0;
    white-space: normal;
}

.sales-mode-active .wine-header-price .sales-detail-action.sales-in-selection {
    background: #fff4f3;
    color: #d53d3b;
    box-shadow: inset 0 0 0 1px #ffd0cf;
}

.sales-mode-active .wine-header-price .sales-detail-action.sales-in-selection > div::before {
    content: "✓";
}

.sales-selection-page {
    padding: 36px 0 120px;
    min-height: 50vh;
    color: #28272b;
}

.sales-selection-shell {
    width: calc(100% - 48px);
    max-width: 1160px;
    margin: 0 auto;
    box-sizing: border-box;
}

.sales-selection-page h1 {
    margin-bottom: 28px;
}

.sales-selection-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 110px 125px auto;
    align-items: center;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid #e5e5e5;
}

.sales-selection-row > img,
.sales-selection-image,
.sales-selection-image img {
    width: 76px;
    height: 92px;
    object-fit: contain;
}

.sales-selection-image { display: block; }
.sales-selection-title { color: inherit; text-decoration: none; }
a.sales-selection-title:hover { color: #ff5452; }

.sales-selection-title {
    font-family: opensans-semibold, sans-serif;
    font-size: 16px;
    overflow-wrap: anywhere;
}

.sales-selection-unit-price,
.sales-selection-line-total {
    margin-top: 8px;
    font-family: opensans-semibold, sans-serif;
}

.sales-selection-quantity > label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
}

.sales-selection-quantity input {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    padding: 6px;
    border: 1px solid #ccc;
    font-size: 16px;
    appearance: textfield;
}

.sales-selection-quantity input::-webkit-inner-spin-button,
.sales-selection-quantity input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sales-quantity-control { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 4px; width: 108px; }
.sales-quantity-arrows { display: grid; }
.sales-selection-quantity-step {
    width: 24px; height: 24px; padding: 0; border: 0; cursor: pointer;
    background: transparent url(../assets/ic_cart_winecount_up.svg) center / contain no-repeat;
    opacity: .3;
}
.sales-selection-quantity-step[data-step="-1"] { background-image: url(../assets/ic_cart_winecount_down.svg); }
.sales-selection-quantity-step:hover:not(:disabled) { opacity: 1; }
.sales-selection-quantity-step:disabled { opacity: .1; cursor: default; }
.sales-selection-quantity input[aria-busy="true"] { border-color: #ff5452; background: #fff4f3; }
.sales-selection-quantity input[aria-invalid="true"] { border-color: #d53d3b; outline: 1px solid #d53d3b; }

.sales-selection-remove {
    min-height: 40px;
    border: 0;
    background: transparent;
    color: #ff5452;
    cursor: pointer;
    font-family: opensans-semibold, sans-serif;
    font-size: 14px;
}

.sales-selection-remove:hover {
    text-decoration: underline;
}

.sales-selection-footer {
    padding: 20px 0;
}

.sales-selection-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.sales-selection-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 9px 18px;
    border: 1px solid #ff5452;
    border-radius: 2px;
    background: #ff5452;
    color: #fff;
    cursor: pointer;
    font-family: opensans-semibold, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    text-decoration: none;
    text-transform: uppercase;
    box-sizing: border-box;
    max-width: 100%;
    text-align: center;
    transition: background-color .2s, border-color .2s, color .2s;
}

.sales-selection-action:hover:not(:disabled) {
    border-color: #f93e3c;
    background: #f93e3c;
    color: #fff;
}

.sales-selection-action:focus-visible {
    outline: 2px solid #28272b;
    outline-offset: 2px;
}

.sales-selection-action:disabled {
    cursor: default;
    opacity: .5;
}

.sales-selection-action[aria-busy="true"]::before {
    content: "";
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    flex: none;
    animation: sales-saving-spin .8s linear infinite;
}

@keyframes sales-saving-spin {
    to { transform: rotate(360deg); }
}

.sales-selection-clear,
.sales-selection-catalog {
    border-color: #d8d8d8;
    background: #fff;
    color: #68666a;
}

.sales-selection-clear:hover:not(:disabled),
.sales-selection-catalog:hover:not(:disabled) {
    border-color: #ff5452;
    background: #fff4f3;
    color: #ff5452;
}

.sales-selection-copy-link {
    background: #fff;
    color: #ff5452;
}

.sales-selection-copy-link:hover:not(:disabled) {
    background: #fff4f3;
    color: #ff5452;
}

.sales-selection-manual-link[hidden] { display: none !important; }
.sales-selection-manual-link input { display: block; width: 100%; max-width: 520px; margin-top: 8px; }

.public-selection-page {
    min-height: 100vh;
    padding: 48px 0 72px;
    background: #f6f5f5;
    box-sizing: border-box;
}

.public-selection-page .sales-selection-shell {
    padding: 36px 40px 44px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(40, 39, 43, .08);
}

.public-selection-header {
    padding-bottom: 24px;
    border-bottom: 2px solid #ff5452;
}

.public-selection-logo {
    display: block;
    float: none;
    width: 126px;
    max-width: 100%;
    height: auto;
    margin-bottom: 32px;
}

.public-selection-home {
    display: block;
    width: fit-content;
    max-width: 100%;
}

.public-selection-header h1 {
    margin: 0;
    font-size: 32px;
    line-height: 1.2;
}

.public-selection-row {
    grid-template-columns: 80px minmax(0, 1fr) auto;
    gap: 18px;
    padding: 20px 0;
}

.public-selection-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 96px;
    background: #fafafa;
}

.public-selection-image span { color: #aaa; }
.public-selection-image > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.public-selection-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.public-selection-row .sales-selection-description { min-width: 0; }
.public-selection-row .sales-selection-unit-price { color: #68666a; font-size: 13px; }

.public-selection-meta {
    display: grid;
    grid-template-columns: 110px 140px;
    align-items: center;
    gap: 18px;
}

.public-selection-quantity { color: #68666a; font-size: 13px; }
.public-selection-meta .sales-selection-line-total { margin: 0; text-align: right; }

.public-selection-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
    padding-top: 28px;
}

.public-selection-total { font-family: opensans-semibold, sans-serif; font-size: 18px; text-align: right; }
.public-selection-total strong { margin-left: 12px; color: #ff5452; }
.sales-whatsapp-hint { margin: 8px 0 20px; font-size: 13px; }
.sales-whatsapp-link { border-color: #1ba93a; background: #1ba93a; }
.sales-whatsapp-link:hover:not(:disabled) { border-color: #168d30; background: #168d30; }

.sales-selection-toast {
    top: auto;
    right: auto;
    bottom: calc(36px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    max-width: calc(100vw - 32px);
    margin: 0;
    box-sizing: border-box;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1200;
    animation: none;
}

.sales-selection-empty {
    padding: 28px 0;
}

.sales-selection-empty p {
    margin-bottom: 20px;
}

@media screen and (max-width: 980px) {
    .sales-selection-bar {
        left: 0;
        right: 0;
        bottom: 0;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 4% calc(8px + env(safe-area-inset-bottom, 0px));
        font-size: 13px;
        border-width: 2px 0 0;
        border-radius: 0;
    }

    .sales-selection-bar-summary {
        flex: 1;
    }

    .sales-selection-bar .button {
        margin-left: 0;
    }

    .sales-menu-open .sales-selection-bar {
        display: none;
    }

    .sales-mode-active #nav-phone-id {
        bottom: var(--sales-selection-bar-height, 0px);
    }

    .sales-selection-page {
        padding: 24px 0 120px;
    }

    .sales-selection-shell { width: calc(100% - 32px); }
    .public-selection-page { padding: 24px 0 48px; }
    .public-selection-page .sales-selection-shell { padding: 24px; }

    .sales-selection-row {
        grid-template-columns: 68px minmax(0, 1fr) auto;
        gap: 10px;
    }

    .sales-selection-row > img,
    .sales-selection-image,
    .sales-selection-image img {
        grid-row: span 2;
        width: 68px;
        height: 90px;
    }

    .sales-selection-quantity {
        grid-column: 2;
    }

    .sales-selection-line-total {
        grid-column: 3;
        grid-row: 1;
        white-space: nowrap;
    }

    .sales-selection-remove {
        grid-column: 3;
        grid-row: 2;
    }

    .public-selection-row {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 12px;
    }
    .public-selection-image { width: 68px; height: 90px; grid-row: span 2; }
    .public-selection-meta {
        grid-column: 2;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px 16px;
    }
    .public-selection-meta .sales-selection-line-total {
        grid-column: auto;
        grid-row: auto;
        white-space: normal;
    }
    .public-selection-header h1 { font-size: 27px; }
    .sales-selection-toast {
        bottom: calc(88px + env(safe-area-inset-bottom, 0px));
        width: calc(100vw - 32px);
    }
}

@media screen and (max-width: 600px) {
    body[tab="sales-selection"] .sales-selection-remove {
        grid-column: 2 / -1;
        grid-row: 3;
        justify-self: start;
    }

    .public-selection-page .sales-selection-shell { padding: 20px 16px 28px; }
    .public-selection-summary { align-items: stretch; }
    .public-selection-total { text-align: left; }
    .sales-selection-actions { justify-content: stretch; }
    .sales-selection-action { width: 100%; }
}