body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    font-family: 'regular', '"neo sans arabic"', sans-serif;
    overflow-x: hidden;
    background-color: var(--global_colorPrimaryDark);
}

.App {
    direction: var(--runtime_direction, var(--global_enable_rtl, ltr));
}

input, label, select, option, textarea {
    font-family: 'regular', '"neo sans arabic"', sans-serif;
}

a {
    text-decoration: none;
}

/* Anything clickable shows the hand. */
a, button:not(:disabled), .button, [role="button"]:not([aria-disabled="true"]), select, summary {
    cursor: pointer;
}

/* Android TextViews have no paragraph margins; block spacing comes from
   the builder's margin and padding keys only. */
p {
    margin: 0px;
}

/* Android's Toast (src/utils/toast.js). */
.global_toast {
    position: fixed;
    left: 50%;
    bottom: 64px;
    transform: translateX(-50%);
    z-index: 2000;
    max-width: calc(100% - 64px);
    width: max-content;
    box-sizing: border-box;
    padding: 12px 16px;
    border-radius: 24px;
    background: rgba(50, 50, 50, 0.92);
    color: #fff;
    font-family: 'regular', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
}

.App{
    position: relative;
    width: 100%;
}



.App *{
    scrollbar-width: none;
}

.app_holder .cover {
    display: none;
}

.flex_1 {
    flex: 1;
    overflow: hidden;
}
.flex_2 {
    flex: 2;
    overflow: hidden;

}

.flex_3 {
    flex: 3;
    overflow: hidden;
}

.flex {
    display: flex;
    align-items: center;
}

.space_between {
    justify-content: space-between;
}

.grid {
    display: grid;
}

.pointer {
    cursor: pointer;
}

.bold {
    font-weight: bold;
    font-family:  'black', '"neo sans arabic"', sans-serif;;
}

.line-through {
    text-decoration: line-through;
}

.center_crop{
    object-fit: cover;
    object-position: center;
}


.button {
    display: flex;
    align-content: center;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
}


.button_text {
    width: -webkit-fill-available;
    text-align: center;
}
.slick-arrow {
    display: none !important;
}


.text-start {
    text-align: start;
}


.text-end {
    text-align: end;
}

.text-center {
    text-align: center;
}



.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1000;
}

.toolbar_center {
     flex: 2;
}

.toolbar_start, .toolbar_end {
    flex: 1;
}

.toolbar_center {
    display: flex;
    justify-content: center;
    text-align: center;
}

.toolbar_start, .toolbar_end {
    display: flex;
    justify-content: flex-start;
}

.toolbar_end {
    justify-content: flex-end;
}

.p10 {
    padding: 10px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--global_colorAccent);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--global_colorAccent);
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* custom tabs */
.rts___tabs___container {
    height: 100%;
    width: 100%;
    padding: 0px;
}

.rts___tabs {
    padding: 0px;
    background-color:var(--product_catalog_layout_tabs_background);
}
.rts___btn {
    border-radius: 0px;
    border: none;
    font-family: 'black';
    margin: 0px;
    padding: 10px 20px;
    background-color:var(--product_catalog_layout_tabs_background);
    color: var(--product_catalog_layout_tabs_item_textColor);
    font-size: var(--product_catalog_layout_tabs_item_textSize);
    box-shadow: none;
}
/* product_catalog_layout_tabs_scrollable off (Android MODE_FIXED): the tabs share the width. */
.product_catalog_layout_tabs_fixed .rts___tabs > .rts___tab {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
    white-space: normal;
}
.rts___tab___selected {
    background-color:var(--product_catalog_layout_tabs_background);
    border-bottom: 2px solid var(--product_catalog_layout_tabs_indicator_color);
    color: var(--product_catalog_layout_tabs_item_selected_textColor);
}

.branches_layout {
    height: 100vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
}
/* Android branches_layout: the title centred in the bar; back and the
   switcher take only their width. */
.branches_layout_toolbar {
    flex: 0 0 auto;
}
.branches_layout_header_position_header_start,
.branches_layout_header_position_header_end {
    flex: 0 0 auto;
    min-width: 50px;
    display: flex;
    align-items: center;
}
.branches_layout_header_position_header_end {
    justify-content: flex-end;
}
.branches_layout_header_position_header_center {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
}
.branches_layout_content {
    flex: 1 0 auto;
}
.branches_layout_view_map {
    overflow: hidden;
}
.branches_layout_view_map .branches_layout_content {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.branches_block_branches_loading {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}
.branches_block_branches_loader {
    display: inline-block;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    border: 3px solid var(--global_primary_color, currentColor);
    border-right-color: transparent;
    border-radius: 50%;
    animation: checkout_spin 0.8s linear infinite;
}
.branches_block_branches_empty {
    text-align: center;
    padding: 24px 0;
}

/* branches_block_branches_item.xml: a vertical card. Name (the free width) and
   the status badge; distance then the time hint; the three services, each its
   text then its presence dot; the divider; the buttons at the builder's gravity. */
.branches_block_branches_item {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.branches_block_branches_item_row {
    display: flex;
    align-items: center;
    min-width: 0;
}
.branches_block_branches_item_name {
    flex: 1 1 0;
    min-width: 0;
    text-align: start;
}
.branches_block_branches_item_status {
    flex: 0 0 auto;
    white-space: nowrap;
}
.branches_block_branches_item_line {
    white-space: nowrap;
}
.branches_block_branches_item_services {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.branches_block_branches_item_services_service {
    display: flex;
    align-items: center;
}
.branches_block_branches_item_services_service_icon {
    display: inline-block;
    flex: 0 0 auto;
    border-radius: 50%;
}
/* android.R.drawable.presence_online / presence_offline */
.branches_block_branches_item_services_service_icon_open {
    background-color: #99CC00;
}
.branches_block_branches_item_services_service_icon_closed {
    background-color: #A6A6A6;
}
.branches_block_branches_item_divider {
    height: 1px;
    background-color: var(--branches_block_branches_item_strokeColor, #ededed);
}
.branches_block_branches_item_btns {
    display: flex;
    flex-wrap: wrap;
}
/* Android sets these margins on one side (marginEnd / marginStart), the
   generated rules on both; the divider's margin is the card's vertical padding.
   Android's TextViews keep font padding: a roomier line than the browser's. */
.branches_layout .branches_block_branches_item {
    line-height: 1.4;
}
.branches_layout .branches_block_branches_item_line {
    margin-left: 0;
    margin-right: 0;
    margin-inline-end: var(--branches_block_branches_item_line_marginHorizontal, 0);
}
.branches_layout .branches_block_branches_item_services_service {
    margin-left: 0;
    margin-right: 0;
    margin-inline-end: var(--branches_block_branches_item_services_service_marginHorizontal, 0);
}
.branches_layout .branches_block_branches_item_services_service_icon {
    margin-left: 0;
    margin-right: 0;
    margin-inline-start: var(--branches_block_branches_item_services_service_icon_marginHorizontal, 0);
}
.branches_layout img.branches_block_branches_item_btn_icon {
    margin-left: 0;
    margin-right: 0;
    margin-inline-end: var(--branches_block_branches_item_btn_icon_marginHorizontal, 0);
}
.branches_layout .branches_block_branches_item_divider {
    margin: var(--branches_block_branches_item_paddingVertical, 0) 0;
}
/* The generated rule writes layout_weight as flex: <weight>, which for 0 is a
   0px basis: the button shrank to its padding. Android's weight shares the
   free width over the button's own (wrap_content) width. */
.branches_layout a.branches_block_branches_item_btn {
    flex: var(--branches_block_branches_item_btn_weight, 0) 0 auto;
}
a.branches_block_branches_item_btn {
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    min-width: 0;
}
img.branches_block_branches_item_btn_icon {
    flex: 0 0 auto;
    object-fit: contain;
}
.branches_block_branches_item_btn_text {
    white-space: nowrap;
}

/* branches_block_switcher.xml: two icon buttons in a rounded track. */
.branches_block_switcher {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
button.branches_block_switcher_button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
}
button.branches_block_switcher_button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* branches_block_map.xml: the map takes the height the card leaves; the card
   is the list item, then the counter and previous / next (faded when there is
   no further branch, Android's alpha 0.4). */
.branches_block_map {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.branches_block_map_map {
    flex: 1 1 0;
    min-height: 240px;
}
.branches_block_map_card {
    flex: 0 0 auto;
    box-sizing: border-box;
}
.branches_block_map_pager {
    display: flex;
    align-items: center;
}
.branches_block_map_pager_counter {
    flex: 1 1 0;
    min-width: 0;
}
button.branches_block_map_pager_button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
}
button.branches_block_map_pager_button:disabled {
    opacity: 0.4;
    cursor: default;
}
button.branches_block_map_pager_button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.coupons_layout {
    height:100vh;
    overflow: scroll;
}

/* coupons_block_coupons_item.xml. Android's TextViews keep font padding: a
   roomier line. The divider sits the card's vertical padding from its
   neighbours; the code field is a 10dp-rounded box with a 1dp stroke and
   12dp x 10dp padding, the code taking the width and the copy icon at its end;
   Copy Code follows at copy_marginHorizontal. */
.coupons_block_coupons_item {
    line-height: 1.4;
}
.coupons_block_coupons_item_line {
    height: 1px;
    margin: var(--coupons_block_coupons_item_paddingVertical, 12px) 0;
    background-color: var(--coupons_block_coupons_item_strokeColor, #e7ebe9);
}
.coupons_block_coupons_item_code_row {
    align-items: center;
}
.coupons_layout .coupons_block_coupons_item_code {
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    border-width: 1px;
    margin: 0;
}
.coupons_block_coupons_item_code .coupons_block_coupons_item_text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.coupons_layout .coupons_block_coupons_item_copy {
    margin: 0;
    margin-inline-start: var(--coupons_block_coupons_item_copy_marginHorizontal, 16px);
    white-space: nowrap;
}
img.coupons_block_coupons_item_copy_icon {
    flex: 0 0 auto;
    object-fit: contain;
}



.product_catalog_block_service_type_modal_backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.35);
    z-index: 999999;
    display: flex;
    align-items: top;
    justify-content: center;
}


.product_catalog_block_service_type_modal {
    width: 90% !important;
    max-width: 420px !important;
}


.product_catalog_block_service_type_modal_content {
    overflow: scroll;
    padding: 20px 0px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product_catalog_block_service_type_modal_scroll {
    flex: 1;
    overflow: auto;
}

.product_catalog_block_service_type_modal_footer {
    position: sticky;
    bottom: 0;
    background: var(--product_catalog_block_service_type_modal_background, #ffffff);
    padding: 10px 20px 20px 20px;
}

.product_catalog_block_service_type_empty {
    flex: 1;
    text-align: center;
    padding: 30px 10px;
}

.product_catalog_block_service_type_modal_addresses_item.product_catalog_block_service_type_modal_addresses_item_default {
    background: var(--product_catalog_block_service_type_modal_addresses_item_selected_background, #eeeeee);
}

.product_catalog_block_service_type_modal_addresses_item,
.product_catalog_block_service_type_modal_branches_item {
    position: relative;
}

.product_catalog_block_service_type_selected_icon {
    position: absolute;
    top: 50%;
    inset-inline-end: 12px;
    transform: translateY(-50%);
    color: #2ecc71;
}

.product_catalog_block_service_type_modal_addresses_add {
    height: auto !important;
}


.product_catalog_block_service_type_icon {
    object-fit: contain;
}

.product_catalog_block_service_type_modal_tabs_item.product_catalog_block_service_type_modal_tabs_item_selected {
    border-width: 0px;
    border-bottom-width: 3px;
}

.product_catalog_block_service_type_modal_tabs_item {
    align-items: center;
    display: flex;
}

.product_catalog_block_service_type_modal_tabs_item_name.bold {
    flex: 1;
    text-align: center;
}



.slick-slide div div {
    display: block !important;
}


.no_content {
    text-align: center;
    min-height: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
}


.LoginScreen, .ProductCatalog {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
    text-align: center;
}


.opacity_01 {
    opacity: 0.3
}




/* start cart */

.cart_layout {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Android cart_layout_toolbar: ?attr/actionBarSize (56dp) with the builder's
   padding inside it; never shrunk by a long cart. */
.cart_layout_toolbar {
    display: flex;
    height: 56px;
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: hidden;
}

.cart_layout_content_position_content{
    overflow: hidden;
}
/* Android cart_layout: the footer sits below the content, which scrolls
   above it; sticky keeps it at the bottom without covering the last block
   (the subtotal). */
.cart_layout_content {
    flex: 1 0 auto;
}
.cart_layout_footer_holder {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    width: 100%;
    z-index: 10000;
}
.cart_layout_footer {
    width: auto;
    border-style: solid;
}
.cart_layout_footer_positions {
    display: flex;
}
.cart_layout_footer_position_footer_start {
    text-align: start;
    align-content: center;
}
.cart_layout_footer_position_footer_center {
    flex: 1;
    text-align: center;
    align-content: center;
}
.cart_layout_footer_position_footer_end{
    text-align: end;
    align-content: center;
}
/* Android cart_block_items_item: what the layout XML fixes (the builder
   writes every key: sizes, orientations, weights, colours, fonts). The row
   sits in a FrameLayout with the remove button over its corner. */
.cart_block_items_item_holder {
    position: relative;
}
.cart_block_items_item_image {
    object-fit: cover;
    box-sizing: border-box;
    flex-shrink: 0;
}
.cart_block_items_item_content {
    min-width: 0;
}
.cart_block_items_item_details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.cart_block_items_item_variant_name,
.cart_block_items_item_addon_name {
    flex: 1;
}
.cart_block_items_item_info {
    align-items: center;
}
/* Android nests the bordered box (the builder's background, stroke, radius,
   padding, margins) in a holder (#cart_block_items_item_quantity) of the same
   height and horizontal padding: the box is the height less its vertical
   margins, inset by the padding once more. The number is weighted (1): it
   takes what is left and shrinks, as Android shares a shortfall by weight. */
.cart_block_items_item_info .cart_block_items_item_quantity {
    align-items: center;
    box-sizing: border-box;
    min-width: 0;
    height: calc(var(--cart_block_items_item_quantity_height) - 2 * var(--cart_block_items_item_quantity_marginVertical));
    margin-inline: var(--cart_block_items_item_quantity_paddingHorizontal);
}
.cart_block_items_item_quantity_down,
.cart_block_items_item_quantity_up,
.cart_block_items_item_remove {
    box-sizing: border-box;
    border: none;
    display: flex;
    flex-shrink: 0;
}
.cart_block_items_item_quantity_text {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
}
.cart_block_items_item_remove {
    padding: 0;
    position: absolute;
    top: 0;
    inset-inline-start: 0;
}
.cart_block_items_item_remove_end {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

/* cart_block_items_item_quantity_delete_enable: the down button's delete icon
   in its own colour. */
.cart_block_items_item_quantity_down_icon.cart_block_items_item_quantity_delete_icon {
    color: var(--cart_block_items_item_quantity_delete_icon_color, currentColor);
}
/* cart_layout_empty (Android cart_layout_empty.xml): under the cart's toolbar,
   the icon, title, text and button centred in the rest of the screen. */
.cart_layout_empty_screen .cart_layout_empty {
    flex: 1 0 auto;
}
.cart_layout_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 40px;
}
.cart_layout_empty_icon {
    object-fit: contain;
}
.cart_layout_empty_title {
    max-width: var(--cart_layout_empty_text_width, 250px);
    margin-top: var(--cart_layout_empty_title_marginTop, 12px);
    color: var(--cart_layout_empty_title_textColor);
    font-size: var(--cart_layout_empty_title_textSize, 18px);
    font-family: var(--cart_layout_empty_title_fontFamily);
}
.cart_layout_empty_text {
    max-width: var(--cart_layout_empty_text_width, 250px);
    margin-top: var(--cart_layout_empty_text_marginTop, 6px);
}
.cart_layout_empty_button {
    margin-top: var(--cart_layout_empty_button_marginTop, 15px);
    height: var(--cart_layout_empty_button_height, 48px);
    padding: 0 var(--cart_layout_empty_button_paddingHorizontal, 22px);
    border: 0;
    border-radius: var(--cart_layout_empty_button_radius, 15px);
    background-color: var(--cart_layout_empty_button_background);
    color: var(--cart_layout_empty_button_textColor);
    font-size: var(--cart_layout_empty_button_textSize, 15px);
    font-family: var(--cart_layout_empty_button_fontFamily);
    cursor: pointer;
}

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

/* Android cart_block_service: icon, then name and details stacked. */
.cart_block_service {
    display: flex;
    align-items: center;
}
.cart_block_service_texts {
    flex: 1;
    min-width: 0;
}
.cart_block_total > div,
.cart_block_checkout_button {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.cart_block_checkout_button_icon {
    box-sizing: border-box;
    object-fit: contain;
    flex-shrink: 0;
}
.cart_block_checkout_button_text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cart_block_checkout_button_dimmed {
    opacity: 0.5;
}
/* cart_block_checkout_button_mirror_enable: the icon turns with the mirrored button */
.cart_block_checkout_button_icon_mirrored {
    transform: scaleX(-1);
}
/* start login */

.login_layout {
    display: flex;
    flex-direction: column;
    height:100dvh !important;
    overflow: scroll;
    position: relative;
}
/* Android login_layout_position_background: login_block_background fills the
   screen behind the other positions (match_parent, centerCrop), at the
   builder's login_block_background_alpha. */
.login_layout_position_background {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.login_layout_position_background:empty {
    display: none;
}
img.login_block_background {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: var(--login_block_background_alpha, 1);
}
.login_layout > .login_layout_position_top,
.login_layout > .login_layout_position_content,
.login_layout > .login_layout_position_bottom {
    position: relative;
    z-index: 1;
}

.login_layout_positions_holder {
    padding-top: var(--login_layout_paddingVertical);
    padding-bottom: var(--login_layout_paddingVertical);
    padding-right: var(--login_layout_paddingHorizontal);
    padding-left: var(--login_layout_paddingHorizontal);
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 952px;
    position: absolute !important;
    width: 100%;
}
.login_block_background_holder {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}
img.login_block_background {
    max-width: 100%;
    height: 100%;
    object-fit: cover !important;
    opacity: var(--login_block_background_alpha);
}

.login_center{
    width: 100% !important;
    overflow: auto;
}


.login_block_social {
    width: -webkit-fill-available;
}

.login_block_social_text_holder {
    display: flex;
}

.login_block_social_text {
    flex: 1;
    justify-content: center;
}

.login_block_social_text_background {
    flex: 3;
}


.login_block_social_buttons {
    display: flex;
    flex-direction: var(--login_block_social_orientation);
    margin: 0 auto;
    width: -webkit-fill-available;
}

.login_block_social_button {
    flex: 1;
    justify-content: center;
}


.login_layout_position_content_holder{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login_block_logo img {
    max-width: 100%;
}
.login_block_logo_holder {
    display: flex;
    width: 100%;
    justify-content: var(--login_block_logo_gravity, center);
}


.login_block_phone_input {
    width: -webkit-fill-available;
}

.activation_block_code_inputs {
    display: flex;
    gap: var(--activation_block_code_input_margin);
}
.activation_block_code_inputs_item {
    
    width: 25% !important;
    margin: 0px;
    box-sizing: border-box;
    text-align: center;
}   

.login_layout_position_content {
    align-content: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Android login_layout: weight 1, gravity center. */
    justify-content: center;
}

.login_layout_position_top {
    align-content: center;
    /* Android login_layout: top and bottom wrap their blocks; content takes the rest. */
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login_layout_position_bottom {
    align-content: center;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.login_block_signup {
    display: flex;
}

.login_block_forgot_password a {
    color: var(--login_block_forgot_password_textColor);
    text-decoration: none;
}

.login_block_signup_action a {
    color: var(--login_block_signup_action_textColor);
    text-decoration: none;
}

.login_block_title {
    /* The builder's login_block_title_fontFamily is the face; no synthetic bold. */
    font-weight: normal;
}

.login_block_mail_button {
    font-weight: bold;
    text-align: center;
}

.login_block_social_button {
    font-weight: bold;
    text-align: center;
}


.login_block_social_text_side {
    flex: 3;
}
.login_block_social_text_holder {
    align-items: center;
    justify-content: center;
    text-align:center;
}
.login_block_social_button_holder {
    display: flex;
    flex-direction: var(--login_block_social_orientation);
}
.login_block_forgot_password {
    text-align: end;
}
.login_block_title {
    text-align: center;
}

.login_block_register_error, .login_block_mail_error {
    text-align: center;
    color: red;
}


/* login_block_phone (Android login_block_phone.xml, LoginPhoneCountries):
   layout only; colours, sizes, paddings and radii are the builder's
   (app_style.css). The country button and the number sit side by side, 2:4
   as on Android; grouped, they share one holder split by the divider. */
.login_block_phone_holder {
    display: flex;
    align-items: stretch;
    gap: var(--login_block_phone_input_margin);
    margin: var(--login_block_phone_input_margin);
}
.login_block_phone_holder > .login_block_phone_input,
.login_block_phone_phone_holder > .login_block_phone_input {
    margin: 0;
}
.login_block_phone_input_ccp {
    flex: 2 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: inherit;
    font-size: var(--login_block_phone_input_textSize);
}
.login_block_phone_input_ccp_flag {
    object-fit: contain;
    line-height: 1;
}
.login_block_phone_input_ccp_code {
    margin-inline-start: var(--login_block_phone_input_ccp_code_marginStart);
    white-space: nowrap;
}
.login_block_phone_input_ccp_arrow {
    margin-inline-start: var(--login_block_phone_input_ccp_arrow_marginStart);
    object-fit: contain;
}
.login_block_phone_phone_holder {
    flex: 4 1 0;
    min-width: 0;
    position: relative;
    display: flex;
}
.login_block_phone_input_phone {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.login_block_phone_holder.login_block_phone_holder_grouped {
    gap: 0;
    padding: 0;
    width: auto;
}
.login_block_phone_holder_grouped .login_block_phone_input_ccp {
    flex: 0 0 auto;
    background: transparent;
    border: none;
}
.login_block_phone_holder_grouped .login_block_phone_input_phone {
    background: transparent;
    border: none;
    outline: none;
    color: var(--login_block_phone_input_textColor);
    font-size: var(--login_block_phone_input_textSize);
    padding: var(--login_block_phone_input_paddingVertical) var(--login_block_phone_input_paddingHorizontal);
}
.login_block_phone_input_divider {
    flex: none;
    background-color: var(--login_block_phone_input_divider_color);
}
.login_block_phone_input_clear {
    position: absolute;
    inset-inline-end: var(--login_block_phone_input_clear_marginEnd);
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
}
.login_block_phone_input_clear_icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.login_block_phone_phone_holder:has(.login_block_phone_input_clear) .login_block_phone_input_phone {
    padding-inline-end: calc(var(--login_block_phone_input_clear_size) + var(--login_block_phone_input_clear_marginEnd) * 2);
}
.login_block_phone_helper {
    text-align: start;
    margin-bottom: var(--login_block_phone_helper_marginBottom);
}
/* login_block_phone_label_enable: the label over the number */
.login_block_phone_label {
    display: block;
    margin-top: var(--login_block_phone_label_marginTop, 10px);
    margin-bottom: var(--login_block_phone_label_marginBottom, 6px);
}
/* The field's focused and valid states: the builder's rules for
   login_block_phone_input_focused / _valid carry the colours. */
.login_block_phone_input_focused,
.login_block_phone_input_valid {
    outline: none;
}
/* login_block_phone_channel_enable: WhatsApp or SMS */
.login_block_phone_channel_holder {
    margin-inline: var(--login_block_phone_channel_marginHorizontal, 0);
    margin-bottom: var(--login_block_phone_channel_marginBottom, 10px);
}
.login_block_phone_channel_title {
    margin-top: var(--login_block_phone_channel_title_marginTop, 10px);
    margin-bottom: var(--login_block_phone_channel_title_marginBottom, 6px);
}
.login_block_phone_channel {
    display: flex;
    gap: var(--login_block_phone_channel_options_item_spacing, 10px);
}
.login_block_phone_channel_options_item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--login_block_phone_channel_options_item_icon_marginEnd, 6px);
    border-style: solid;
    cursor: pointer;
}
.login_block_phone_channel_options_item_icon {
    flex: none;
}
.login_block_phone_channel_option_text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* login_block_phone_button_icon_enable: after the text, mirrored right-to-left */
.login_block_phone_button {
    display: flex;
    align-items: center;
    justify-content: center;
}
.login_block_phone_button_icon {
    flex: none;
    margin-inline-start: var(--login_block_phone_button_icon_marginStart, 8px);
}
[dir="rtl"] .login_block_phone_button_icon {
    transform: scaleX(-1);
}

/* The country sheet: a bottom sheet over the page. */
.login_block_phone_countries_sheet_overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
}
.login_block_phone_countries_sheet_overlay .login_block_phone_countries_sheet {
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
}
.login_block_phone_countries_sheet_handle {
    margin: 0 auto;
    border-radius: 999px;
    background-color: var(--login_block_phone_countries_sheet_handle_color);
}
.login_block_phone_countries_sheet_title {
    text-align: start;
    margin-top: var(--login_block_phone_countries_sheet_paddingVertical);
    margin-bottom: var(--login_block_phone_countries_sheet_title_marginBottom);
    padding: 0 var(--login_block_phone_countries_sheet_paddingHorizontal);
}
.login_block_phone_countries_sheet_list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.login_block_phone_countries_sheet_item {
    width: 100%;
    display: flex;
    align-items: center;
    border: none;
    cursor: pointer;
    text-align: start;
    padding-left: var(--login_block_phone_countries_sheet_paddingHorizontal);
    padding-right: var(--login_block_phone_countries_sheet_paddingHorizontal);
}
.login_block_phone_countries_sheet_item_flag {
    object-fit: contain;
    line-height: 1;
}
.login_block_phone_countries_sheet_item_name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-inline-start: var(--login_block_phone_countries_sheet_item_name_marginStart);
}
.login_block_phone_countries_sheet_item_code {
    margin-inline-start: var(--login_block_phone_countries_sheet_item_name_marginStart);
    white-space: nowrap;
}

/* start product catalog */

.product_catalog_layout {
    height:100vh;
    overflow: scroll;
}
.product_catalog_layout_toolbar_position_toolbar {
    display: flex;
    height: 55px;
    overflow: hidden;
}
.product_catalog_layout_toolbar_position_toolbar {
    align-items: center;
    justify-content: center;
}
.product_catalog_layout_toolbar_position_toolbar_start {
    min-width: 50px;
    text-align: start;
}
.product_catalog_layout_toolbar_position_toolbar_center {
    flex: 1 1;
    text-align: center;
    justify-content: center;
    align-content: center;
    display: flex;
}
.product_catalog_layout_toolbar_position_toolbar_end{
    min-width: 50px;
    text-align: end;
}

.product_catalog_layout_header_holder{
    background-color: var(--product_catalog_layout_header_background);
    height: var(--product_catalog_layout_header_height);
    position: relative;
    overflow: hidden;
}

.product_catalog_layout_header {
    background: transparent !important;
    position: relative;
    /* Holds its blocks' margins (a block's margin-top used to collapse through it, moving
       the header and its overlay down and showing the holder's background under the
       toolbar), as Android's header lays its blocks out inside itself. */
    display: flow-root;
}

.product_catalog_layout_header_overlay{
    position: absolute !important;
    width: 100%;
    height:auto;
}
/* The overlay is the header's background (Android draws it behind the
   positions); positioned siblings paint above it. */
.product_catalog_layout_header > :not(.product_catalog_layout_header_overlay) {
    position: relative;
}


.product_catalog_layout_header_position_featured_bottom * {
    z-index: 1000;
}

.product_catalog_layout_header_position_featured {
    width: 100%;
    height: 100%;
    position: relative;
}

.product_catalog_layout_header_position_featured_bottom {
    display: flex;
}

.product_catalog_layout_tabs{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55px;
}
.product_catalog_layout_tabs .product_catalog_layout_tabs_item{
    flex: 1;
    text-align: center;
    font-weight: bold;
}

.product_catalog_layout_tabs .product_catalog_layout_tabs_item_selected{
    border-bottom: 2px solid var(--product_catalog_layout_tabs_indicator_color);
}

.product_catalog_layout_content_position_content{
    flex:var(--product_catalog_layout_content_top_position_content_weight);
    overflow: hidden;
    padding-bottom: 120px;
}

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

img.product_catalog_block_logo {
    object-fit: contain !important;
}

.product_catalog_block_logo img {
    max-width: 100%;
    max-height: 100%;
}

.product_catalog_layout_footer_holder {
    position: fixed !important;
    bottom: 0px;
    width: 100%;
    z-index: 20;
    transition: transform 0.5s;
}
.product_catalog_layout_footer_holder.product_catalog_layout_footer_hidden {
    transform: translateY(100%);
}
.product_catalog_layout_footer {
    width: auto;
    border-style: solid;
}
.product_catalog_layout_footer_positions {
    display: flex;
}
.product_catalog_layout_footer_position_footer_start {
    text-align: start;
}
.product_catalog_layout_footer_position_footer_center {
    text-align: center;
}
.product_catalog_layout_footer_position_footer_end{
    flex: 1;
    text-align: end;
}
input.product_catalog_block_search_input {
    width: -webkit-calc(100% - var(--product_catalog_block_search_input_marginHorizontal));
    border-style: solid;
    background-size: var(--product_catalog_block_search_input_icon_size);
    background-repeat: no-repeat;
    background-position: var(--product_catalog_block_search_input_icon_padding);
}

.product_catalog_block_search_input_text{
    padding: 0 var(--product_catalog_block_search_input_icon_padding);
}

img.product_catalog_block_search_input_icon {
    padding: 0px;
}

.product_catalog_block_items {
    display: grid;
    padding-top:0px !important;
    scrollbar-width: none;
    height: auto !important;
}
.product_catalog_block_items_item {
    overflow: hidden;
    border-style: solid;
    display: grid;
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
}


.product_catalog_block_items div.product_catalog_block_items_item {
    width: auto;
    display: flex;
}

/* Android product_catalog_block_itemes_item: the image with the add-to-cart
   slot over it (_add_to_cart_placement image, in the _image_gravity corner),
   and the reward-points pill over the card's top-start corner. */
.product_catalog_block_items_item_image_holder {
    position: relative;
    display: block;
}
.product_catalog_block_items_item_add_to_cart_image_slot {
    position: absolute;
    z-index: 1;
    display: flex;
    margin: var(--product_catalog_block_items_item_add_to_cart_image_marginVertical, 0) var(--product_catalog_block_items_item_add_to_cart_image_marginHorizontal, 0);
}
.product_catalog_block_items_item_add_to_cart_image_top_start { top: 0; inset-inline-start: 0; }
.product_catalog_block_items_item_add_to_cart_image_top_center { top: 0; left: 50%; transform: translateX(-50%); }
.product_catalog_block_items_item_add_to_cart_image_top_end { top: 0; inset-inline-end: 0; }
.product_catalog_block_items_item_add_to_cart_image_center_start { top: 50%; inset-inline-start: 0; transform: translateY(-50%); }
.product_catalog_block_items_item_add_to_cart_image_center_center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.product_catalog_block_items_item_add_to_cart_image_center_end { top: 50%; inset-inline-end: 0; transform: translateY(-50%); }
.product_catalog_block_items_item_add_to_cart_image_bottom_start { bottom: 0; inset-inline-start: 0; }
.product_catalog_block_items_item_add_to_cart_image_bottom_center { bottom: 0; left: 50%; transform: translateX(-50%); }
.product_catalog_block_items_item_add_to_cart_image_bottom_end { bottom: 0; inset-inline-end: 0; }
.product_catalog_block_items_item_add_to_cart_image_slot .product_catalog_block_items_item_add_to_cart,
.product_catalog_block_items_item_add_to_cart_image_slot .product_catalog_block_items_item_quantity {
    margin: 0;
}
.product_catalog_block_items_item_reward_points {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    z-index: 1;
    white-space: nowrap;
}
.product_catalog_block_items_item_price_tag {
    align-self: var(--product_catalog_block_items_item_price_tag_layout_gravity, flex-start);
    box-sizing: border-box;
}
:where(.product_catalog_block_items_item) button {
    appearance: none;
    font: inherit;
    color: inherit;
    border: 0 solid transparent;
    background: none;
    padding: 0;
}
.product_catalog_block_items_item_offer {
    position: absolute !important;
    top: 0px;
    left: 0px;
}
.product_catalog_block_items_item_name{
    font-weight: bold;
}
.product_catalog_block_items_item_image {
    max-width: 100%;
    object-fit: cover;
}

.product_catalog_block_items_item_price_holder{
    display: flex;
    align-items: center;
    flex-direction: var(--product_catalog_block_items_item_sale_price_orientation);
    justify-content: var(--product_catalog_block_items_item_sale_price_gravity);

}

.product_catalog_block_items_item_sale_price{
    text-decoration: line-through;
}

.product_catalog_block_items_item_add_to_cart {
    height: calc(var(--product_catalog_block_items_item_add_to_cart_height) - 2 * var(--product_catalog_block_items_item_add_to_cart_paddingVertical)) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.product_catalog_block_items_item_info {
    flex: 1 !important;
}
.product_catalog_block_items_item_add_to_cart_text {
    font-weight: bold;
}


.product_catalog_block_items_item_add_to_cart_icon {
    width: calc(var(--product_catalog_block_items_item_add_to_cart_icon_width) - 2 * var(--product_catalog_block_items_item_add_to_cart_icon_padding)) !important;
    height: calc(var(--product_catalog_block_items_item_add_to_cart_icon_height) - 2 * var(--product_catalog_block_items_item_add_to_cart_icon_padding)) !important;
}


.product_catalog_block_items_item_price_quantity_holder {
    align-items: center;
    justify-content: center;
}
.product_catalog_block_items_item_quantity{
    border-style: solid;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product_catalog_block_items_item_quantity_text{
    text-align: center;
    flex:1;
    line-height: var(--product_catalog_block_items_item_quantity_text_height);
}


.product_catalog_block_items_item_quantity img {
    max-width:100%;
}

.product_catalog_block_items_item_quantity_down {
    height: var(--product_catalog_block_items_item_quantity_down_height);
    width: var(--product_catalog_block_items_item_quantity_down_width);
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    padding: 0px !important;
    position: relative;
}

.product_catalog_block_items_item_quantity_down_icon {
    height: var(--product_catalog_block_items_item_quantity_down_height);
    width: var(--product_catalog_block_items_item_quantity_down_width);
    font-size: var(--product_catalog_block_items_item_quantity_down_width);
    line-height: var(--product_catalog_block_items_item_quantity_down_height);
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
}

.product_catalog_block_items_item_quantity_up {
    height: var(--product_catalog_block_items_item_quantity_up_height);
    width: var(--product_catalog_block_items_item_quantity_up_width);
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    padding: 0px !important;
    position: relative;
}

.product_catalog_block_items_item_quantity_up_icon {
    height: var(--product_catalog_block_items_item_quantity_up_height);
    width: var(--product_catalog_block_items_item_quantity_up_width);
    font-size: var(--product_catalog_block_items_item_quantity_up_width);
    line-height: var(--product_catalog_block_items_item_quantity_up_height);
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
}


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

.product_catalog_block_cart, .product_catalog_block_cart * {
    direction: var(--product_catalog_block_cart_direction) !important
}

.product_catalog_block_cart_icon {
    box-sizing: border-box;
    object-fit: contain;
}

.product_catalog_block_account{
    align-items: center;
    justify-content: center;
}
.product_catalog_block_categories {
    margin-top:0px !important;
    overflow: scroll;
    scrollbar-width: none;
}
.product_catalog_block_categories_item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    flex: 0 0 auto;
}


/* Android: the icon and name wrap their content (a wrap_content LinearLayout),
   so a match_parent icon keeps its image's height instead of stretching to the
   tallest card in the row. Over a cover the content fills the card. */
.product_catalog_block_categories_item_content {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: var(--product_catalog_block_categories_item_orientation);
    justify-content: var(--product_catalog_block_categories_item_gravity);
    align-items: center;
}

.product_catalog_block_categories_item_icon {
    max-width: 100%;
}

.product_catalog_block_categories_item_holder {
    position: absolute !important;
}

.product_catalog_block_categories_item_cover {
    max-width: 100%;
}

.product_catalog_block_categories_item_cover + .product_catalog_block_categories_item_content {
    height: 100%;
}



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

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

.product_catalog_block_upload_text {
    text-align: center;
}

.product_catalog_block_branch {
    display: flex;
    align-items: center;
    justify-content: center;
}
.product_catalog_block_branch_name {
    flex: 1;
}
.product_catalog_block_offers img {
    width: 100%;
    max-height: 100%;
}

/* Placeholder while the banners load (Android: product_catalog_block_offers_skeleton). */
.product_catalog_block_offers_skeleton {
    height: var(--product_catalog_block_offers_skeleton_height, 180px);
    margin: var(--product_catalog_block_offers_paddingVertical, 0) var(--product_catalog_block_offers_paddingHorizontal, 0);
}

.product_catalog_block_offers_offer {
    overflow: hidden;
}


.product_catalog_block_offers_dot {
    width: 15px;
    height: 15px;
    border-radius: 10px;
    margin: 5px;
}


/* Android product_catalog_block_offers_dots: a row of rings over the
   banner's bottom edge (TabLayout with the _default / _selected rings,
   3dp and 4dp thick), _dots_paddingVertical above the edge. */
.product_catalog_block_offers {
    position: relative;
}
.product_catalog_block_offers .slick-dots.product_catalog_block_offers_dots {
    position: absolute;
    z-index: 1;
    bottom: calc(var(--product_catalog_block_offers_paddingVertical, 0px) + var(--product_catalog_block_offers_dots_paddingVertical, 14px));
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    line-height: 0;
}
.product_catalog_block_offers .slick-dots.product_catalog_block_offers_dots li {
    width: 6px;
    height: 6px;
    margin: 0;
}
.product_catalog_block_offers .slick-dots.product_catalog_block_offers_dots li button {
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 50%;
    background: var(--product_catalog_block_offers_default_background);
    font-size: 0;
}
.product_catalog_block_offers .slick-dots.product_catalog_block_offers_dots li button:before {
    content: none;
}
.product_catalog_block_offers .slick-dots.product_catalog_block_offers_dots li.slick-active {
    width: 8px;
    height: 8px;
}
.product_catalog_block_offers .slick-dots.product_catalog_block_offers_dots li.slick-active button {
    background: var(--product_catalog_block_offers_selected_background);
}

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

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

.product_catalog_block_cart_details{
    flex: 1;
    align-items: center;
    display: flex;
}

.product_catalog_block_cart_unit {
    flex: 1;
}

.product_catalog_layout_content {
    display: flex;
}

/* Android product_catalog_block_loyalty_program.xml: the background image
   behind; the header (icon, credit, button) in the block's orientation and
   gravity; the divider; the description row with its icon. */
.product_catalog_block_loyalty_program {
    display: block !important;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
.product_catalog_block_loyalty_program_background_image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.product_catalog_block_loyalty_program_content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}
.product_catalog_block_loyalty_program_holder {
    display: flex;
    flex-direction: var(--product_catalog_block_loyalty_program_orientation, row);
    align-items: center;
    justify-content: var(--product_catalog_block_loyalty_program_gravity, flex-start);
    width: 100%;
}
.product_catalog_block_loyalty_program_icon {
    flex-shrink: 0;
    object-fit: contain;
    box-sizing: border-box;
}
.product_catalog_block_loyalty_program_credit {
    flex: 1 1 0;
    min-width: 0;
}
/* A wrap_content row (credit_points_width auto) sits at the start of the
   credit column, so its gravity only moves the points inside a wider row. */
.product_catalog_block_loyalty_program_credit_points_row {
    display: inline-flex;
    vertical-align: top;
    box-sizing: border-box;
    width: var(--product_catalog_block_loyalty_program_credit_points_width, auto);
    align-self: flex-start;
    align-items: baseline;
    justify-content: var(--product_catalog_block_loyalty_program_credit_points_gravity, flex-start);
}
.product_catalog_block_loyalty_program_button {
    appearance: none;
    font: inherit;
    display: flex;
    align-items: center;
    justify-content: center !important;
    flex-shrink: 0;
    cursor: pointer;
}
.product_catalog_block_loyalty_program_divider {
    background-color: var(--product_catalog_block_loyalty_program_divider_color, rgba(0, 0, 0, 0.1));
}
.product_catalog_block_loyalty_program_description_row {
    display: flex;
    align-items: center;
    justify-content: var(--product_catalog_block_loyalty_program_description_gravity, flex-start);
}
.product_catalog_block_loyalty_program_description_icon {
    flex-shrink: 0;
    object-fit: contain;
}


.product_catalog_block_loyalty_items {
    display: grid;
    padding-top:0px !important;
}
.product_catalog_block_loyalty_items_item {
    overflow: hidden;
    border-style: solid;
    display: flex;
    position: relative;
}

.product_catalog_block_loyalty_items_item_name{
    font-weight: bold;
}
.product_catalog_block_loyalty_items_item_image {
    max-width: 100%;
}


.product_catalog_block_loyalty_items_item_redeem {
    display: flex;
    align-items: center;
    justify-content: center;
}
.product_catalog_block_loyalty_items_item_info {
    flex: 1;
}
.product_catalog_block_loyalty_items_item_redeem_text {
    font-weight: bold;
}



div.product_catalog_layout_content {
    min-height: 500px;
}

.mode-sliding-menu {
    display: none;
    font-size: 16px;
    position: absolute !important;
    top: 0px;
    min-height: 100%;
    z-index: 1000000;
    background-color: rgba(0, 0, 0, 0.21);
    width: 100%;
}

.product_catalog_layout_navigation_positions {
  display: flex;
  flex-direction: column;
  height: 100%; /* important */
  overflow:scroll;
}

/* The top lays its blocks across by product_catalog_layout_side_menu_top_gravity
   (ProductCatalog.js sideMenuTopAlign() sets align-items). */
.product_catalog_layout_side_menu_top {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* ProductCatalog.js sets the image; a tenant without one keeps the colour. */
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--product_catalog_layout_side_menu_top_background_image_scaleType, cover);
}
/* At center or end each block keeps its own width, whatever width the builder
   gave it, as Android adds it at wrap_content. */
.product_catalog_layout_side_menu_top.product_catalog_layout_side_menu_top_placed > * {
  width: auto;
  max-width: 100%;
}

.product_catalog_layout_side_menu_bottom {
  margin-top: auto;
}

.product_catalog_block_user_menu_header {
    text-align: center;
}

.product_catalog_block_user_menu ul {
    padding: 0px;
}

.product_catalog_block_user_menu_item {
    padding: 0px !important;
    display: flex;
    text-align: center;
    align-items: center;
    border-bottom: var(--product_catalog_block_user_menu_strokeSize) solid var(--product_catalog_block_user_menu_strokeColor);
    flex: auto;
    text-decoration: none;
}

.product_catalog_block_user_menu_item a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--product_catalog_block_user_menu_item_textColor);
    width:100%;
}

.product_catalog_block_user_menu_item_text {
    padding: var(--product_catalog_block_user_menu_item_paddingVertical) var(--product_catalog_block_user_menu_item_paddingHorizontal);
}

img.product_catalog_block_user_menu_icon {
    padding: 0px;
    margin: var(--product_catalog_block_user_menu_icon_padding);
}

.product_catalog_block_user_menu {
    border: none !important;
}

.product_catalog_block_contact {
    display: flex;
    align-items: center;
}

.product_catalog_block_category_title {
    margin: 0 auto;
}


.mode-overlay {
    display: none;
    position: absolute !important;
    top: 0px;
    width: 100%;
    height: 1500px;
    background: #fff;
}

.product_catalog_layout_overlay {
    height:100vh;
    overflow: scroll;
}

.product_catalog_layout_overlay_toolbar {
    display: flex !important;
    height: 55px;
    overflow: hidden;
    align-items: center;
}

.product_catalog_layout_overlay_position_content {
    height: 100%;
}



/* Android product_catalog_block_listing_group_list: the group's container
   (the builder's background, stroke and radius) with the icon, title and
   description, then the items laid out by the group's _type / _columns /
   _orientation, which the builder writes on the container. */
.product_catalog_block_listing_group .product_catalog_block_listing_group_list {
    display: block !important;
    overflow: hidden;
}
.product_catalog_block_listing_group_list_header,
.cart_block_listing_group_list_header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.product_catalog_block_listing_group_list_icon_holder {
    flex-shrink: 0;
    overflow: hidden;
    display: block;
    box-sizing: border-box;
    width: var(--product_catalog_block_listing_group_list_icon_width, 40px);
    height: var(--product_catalog_block_listing_group_list_icon_height, 40px);
    border-radius: var(--product_catalog_block_listing_group_list_icon_radius, 0);
    background-color: var(--product_catalog_block_listing_group_list_icon_background, transparent);
}
.product_catalog_block_listing_group_list_icon,
.cart_block_listing_group_list_icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.product_catalog_block_listing_group_list_texts,
.cart_block_listing_group_list_texts {
    flex: 1;
    min-width: 0;
}
/* The cart's items list scrolls like a RecyclerView; its type, columns and
   orientation are the builder's (WebCoreResources::MOVED). */
.cart_block_listing_group_list_list {
    overflow-x: auto;
    scrollbar-width: none;
}
.cart_block_listing_group_list_icon_holder {
    flex-shrink: 0;
    overflow: hidden;
    display: block;
}
.product_catalog_block_listing_group_list_list {
    display: var(--product_catalog_block_listing_group_list_type, flex);
    grid-template-columns: var(--product_catalog_block_listing_group_list_columns);
    flex-direction: var(--product_catalog_block_listing_group_list_orientation, row);
    overflow-x: auto;
    scrollbar-width: none;
}
/* A listing group sizes the item cards in it with its own keys
   (<group>_list_items_item_width, _image_width, _image_height), which default
   to the card's product_catalog_block_items_item_* (mobstep_android_core 587c75f). */
.product_catalog_block_listing_group_list_list .product_catalog_block_items_item {
    width: var(--product_catalog_block_listing_group_list_items_item_width, var(--product_catalog_block_items_item_width));
}
.product_catalog_block_listing_group_list_list .product_catalog_block_items_item_image {
    width: var(--product_catalog_block_listing_group_list_items_item_image_width, var(--product_catalog_block_items_item_image_width));
    height: var(--product_catalog_block_listing_group_list_items_item_image_height, var(--product_catalog_block_items_item_image_height));
}
.cart_block_listing_group_list_list .product_catalog_block_items_item {
    width: var(--cart_block_listing_group_list_items_item_width, var(--product_catalog_block_items_item_width));
}
.cart_block_listing_group_list_list .product_catalog_block_items_item_image {
    width: var(--cart_block_listing_group_list_items_item_image_width, var(--product_catalog_block_items_item_image_width));
    height: var(--cart_block_listing_group_list_items_item_image_height, var(--product_catalog_block_items_item_image_height));
}


.toolbar_positions {
    align-items: center;
    justify-content: center;
}
.toolbar_positions_start {
    min-width: 50px;
    text-align: start;
}
.toolbar_positions_center {
    flex: 1;
    text-align: center;
}
.toolbar_positions_end{
    min-width: 50px;
    text-align: end;
}


/* Android: a scrollable TabLayout, added to its position at wrap_content, so it
   is TabLayout's default 48dp and _height has no effect there. A tab is at
   least 72dp with 12dp sides, the indicator spans it, and the text is a custom
   view with one colour, selected or not. */
div.product_catalog_block_subcategories {
    display: flex;
    height: 48px;
    overflow-x: auto;
    scrollbar-width: none;
}

div.product_catalog_block_subcategories::-webkit-scrollbar {
    display: none;
}

.product_catalog_block_subcategories_tab {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 72px;
    padding: 0 12px;
    border: none;
    background: none;
    cursor: pointer;
}

.product_catalog_block_subcategories_tab_selected {
    box-shadow: inset 0 -2px 0 var(--product_catalog_block_subcategories_indicator_color);
}

.product_catalog_block_subcategories_item {
    white-space: nowrap;
}


/* Android: a phone number stays at the row's start; the stylesheet's plaintext
   reads its digits as left-to-right and moved it to the far side in Arabic. */
div.product_catalog_block_contact_number,
div.product_catalog_block_whatsapp_number {
    unicode-bidi: normal;
}

/* Android: a NavigationView at layout_gravity start, as wide as the drawer
   allows (the screen less DrawerLayout's 64dp margin) up to its 280dp. */
.product_catalog_layout_sidebar {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: min(calc(100% - 64px), 280px);
    height: 100%;
    background-color: var(--product_catalog_layout_navigation_background, white);
    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
    z-index: 1000;
    transition: transform 0.3s ease;
}

.product_catalog_layout_side_menu {
    height: max-content !important;
}

.product_catalog_layout_sidebar.hidden {
    transform: translateX(-100%);
}
[dir="rtl"] .product_catalog_layout_sidebar.hidden {
    transform: translateX(100%);
}

.product_catalog_block_menu_icon img {
    max-width: 100%;
}

.product_catalog_block_user_account {
    display: flex;
    align-items: var(--product_catalog_block_user_account_gravity, center);
}


.product_catalog_block_overlay_title {
    text-align: center;
}


.product_catalog_block_footer {
    margin-top: 0px !important;
    margin-bottom: var(--product_catalog_block_footer_padding_vertical);
    text-align: center;
}

a.product_catalog_block_footer_links_link {
    margin: 0px 5px;
}

/* start item details */

.item_details_layout {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100vh;
}

.item_details_layout_toolbar {
    display: flex;
    height: 55px;
    overflow: hidden;
}

/* Pinned while the page scrolls, as Android's collapsing toolbar (pin). */
.item_details_layout_toolbar_holder {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* item_details_layout_toolbar_floating_enable: the toolbar takes no room, so
   the header (the item images) runs to the top under it, in the floating
   colour; once the header has scrolled under it, the toolbar colour (Android's
   contentScrim). Two classes, to win over the builder's toolbar background. */
.item_details_layout_toolbar_holder_floating {
    height: 0;
    overflow: visible;
}
.item_details_layout_toolbar.item_details_layout_toolbar_floating {
    background-color: var(--item_details_layout_toolbar_floating_background);
    box-shadow: none;
    transition: background-color 0.2s;
}
.item_details_layout_toolbar.item_details_layout_toolbar_floating.item_details_layout_toolbar_scrim {
    background-color: var(--item_details_layout_toolbar_background);
}
/* Android's toolbar holders are layoutDirection="ltr": start is always the
   left side and end the right, in Arabic too. */
.item_details_layout_toolbar,
.product_catalog_layout_overlay_toolbar,
.address_layout_toolbar,
.branches_layout_toolbar,
.cart_layout_toolbar,
.checkout_layout_toolbar,
.confirmation_layout_toolbar,
.coupons_layout_toolbar,
.loyalty_layout_toolbar,
.orders_layout_toolbar {
    direction: ltr;
}
.item_details_layout_toolbar_positions {
    align-items: center;
    justify-content: center;
}
.item_details_layout_header_position_header_start {
    min-width: 50px;
    text-align: start;
}
.item_details_layout_header_position_header_center {
    flex: 1;
    text-align: center;
}
.item_details_layout_header_position_header_end{
    min-width: 50px;
    text-align: end;
    align-content: center;
}
.item_details_layout_content_position_content{
    overflow: hidden;
}
/* Sticky, not absolute: it stays at the bottom while the page scrolls, and the
   last block (the note) still scrolls clear of it, as on Android, where the
   footer sits below the content. */
.item_details_layout_footer_holder {
    position: sticky !important;
    bottom: var(--product_catalog_layout_footer_marginVertical);
    width: 100%;
    z-index: 10000;
}
.item_details_layout_footer {
    width: auto;
    border-style: solid;
}
.item_details_layout_footer_positions {
    display: flex;
}
.item_details_layout_footer_position_footer_start {
    text-align: start;
}
.item_details_layout_footer_position_footer_center {
    text-align: center;
}
.item_details_layout_footer_position_footer_end{
    flex: 1;
    text-align: end;
}
.item_details_layout_content_row_top,.item_details_layout_content_row_middle,.item_details_layout_content_row_top{
    display: flex;
}
.item_details_layout_content_row_top_position_start,.item_details_layout_content_row_middle_position_start,.item_details_layout_content_row_bottom_position_start{
    flex: 1;
    overflow: hidden;
}

.item_details_block_back {
    font-size: 25px;
}


.item_details_block_quantity {
    box-sizing: border-box;
}

.item_details_block_add_to_cart {
    box-sizing: border-box;
}


.item_details_block_quantity{
    border-style: solid;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item_details_block_quantity_text{
    text-align: center;
    flex:1;
    line-height: var(--item_details_block_quantity_text_height);
}

.item_details_block_quantity img {
    max-width:100%;
}

.item_details_block_quantity_down {
    display: flex;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}

.item_details_block_quantity_down_icon {
align-items: center;
    font-family: arial;
    box-sizing: border-box;
}



.item_details_block_quantity_up {
    display: flex;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}

.item_details_block_quantity_up_icon {
    align-items: center;
    font-family: arial;
    box-sizing: border-box;
}


.item_details_block_cart {
    align-items: center;
    justify-content: center;
    display: flex;

}

.item_details_block_cart_details {
    align-items: center;
    display: flex;
}

.item_details_block_cart_number {
    justify-content: center;
    align-items: center;
    display: flex;
}
.item_details_block_account{
    display: flex;
    align-items: center;
    justify-content: center;
}
.item_details_block_name {
    font-weight: bold;
}

.item_details_block_images .slick-dots {
    bottom: 25px;
}


.item_details_block_images .slick-dots li button:before {
    font-size: 15px;
    color: var(--item_details_block_images_default_background);
}

.item_details_block_images .slick-dots li.slick-active button:before {
    color: var(--item_details_block_images_selected_background);
}


button.slick-disabled {
    display: none !important;
}



.item_details_block_images_image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}



.item_details_block_price {
    display: flex;
    align-items: center;
}

.item_details_block_price_sale_price {
    flex: 1;
    font-weight: bold;
}

.item_details_block_variants_groups_group {
    flex-direction: column !important;
}

.item_details_block_variants_groups_list {
    display: flex;
    flex-direction: var(--item_details_block_variants_groups_group_orientation);
    overflow: scroll;
    scrollbar-width: none;
}

.item_details_block_variants_groups_group_item {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
}

.item_details_block_variants_groups_group_title {
    font-weight: bold;
}
.item_details_block_variants_groups_group_item_name {
    flex: 1;
}

.item_details_block_variants_groups_group_item_selected .item_details_block_variants_groups_group_item_name {
    color: var(--item_details_block_variants_groups_group_item_name_selected_textColor) !important;
}

.item_details_block_add_to_cart_text {
    width:100%;
    text-align: center;
}

/* Android swaps the text colour too (item_details_block_add_to_cart_no_stock_textColor). */
/* Added, while the next screen opens: a spinner in the icon's place and no
   more taps (item_details_block_add_to_cart.js). */
.item_details_block_add_to_cart_busy {
    pointer-events: none;
    opacity: 0.85;
}
.item_details_block_add_to_cart_spinner {
    display: inline-block;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 2px solid var(--item_details_block_add_to_cart_text_textColor, currentColor);
    border-right-color: transparent;
    border-radius: 50%;
    animation: checkout_spin 0.8s linear infinite;
}
.item_details_block_add_to_cart_no_stock {
    cursor: default;
}
.item_details_block_add_to_cart_no_stock .item_details_block_add_to_cart_text {
    color: var(--item_details_block_add_to_cart_no_stock_textColor);
}

.item_details_block_add_to_cart_price {
    white-space: nowrap;
}

/* The item's HTML description (Android: a WebView), framed without scripts. */
.product_catalog_block_items_item_details_frame {
    display: block;
    width: 100%;
    border: 0;
}
/* product_catalog_block_items_item_specs_item: "label: value" rows. */
.product_catalog_block_items_item_specs_list {
    display: flex;
    flex-direction: var(--product_catalog_block_items_item_specs_orientation, column);
}
.product_catalog_block_items_item_specs_item {
    text-align: start;
}
.item_details_block_details_frame {
    display: block;
    width: 100%;
    border: 0;
}

.item_details_block_note_input {
    box-sizing: border-box;
    display: block;
    resize: none;
}
.item_details_block_note_input::placeholder {
    color: var(--item_details_block_note_input_hintColor);
}

.item_details_block_addons_list {
    display: flex;
    flex-direction: var(--item_details_block_variants_groups_group_item_addons_orientation);
}

.item_details_block_variants_groups_group_item_addons_item {
    display: flex;
    flex-direction: row;
}

.item_details_block_variants_groups_group_item_addons_title {
    font-weight: bold;
}
.item_details_block_variants_groups_group_item_addons_item_name {
    flex: 1;
}

.item_details_block_specs_item * {
    display: inline-block;
}



.item_details_block_availability_holder {
    overflow: scroll;
}


.item_details_block_availability {
    width: fit-content !important;
    align-items: start;
}


.item_details_block_availability_group {
    overflow: hidden;
}


.item_details_layout_content_row_middle_position_start { /* shit need to be fixed */
    overflow: hidden;
}
/* START BUILDER GENERATED CSS */


/* start address */

.address_layout {
    height:100vh;
    overflow: scroll;
}

.address_layout_toolbar {
    display: flex;
    height: 55px;
    overflow: hidden;
}
.address_layout_toolbar_positions {
    align-items: center;
    justify-content: center;
}
/* Android address_layout: the title is centred in the bar (RelativeLayout
   centerInParent), so the start and end slots take only their content and the
   title the rest, instead of three equal thirds that wrapped "My addresses". */
.address_layout_header_position_header_start,
.address_layout_header_position_header_end {
    flex: 0 0 auto;
    min-width: 50px;
}
.address_layout_header_position_header_start {
    text-align: start;
}
.address_layout_header_position_header_center {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
}
.address_layout_header_position_header_center {
    flex: 1;
    text-align: center;
}
.address_layout_header_position_header_end{
    min-width: 50px;
    text-align: end;
}

.address_layout_content {
    padding-bottom: 80px;
}

.address_layout_content_position_content{
    overflow: hidden;
    height: 100%;
}
.address_layout_footer_holder {
    position: absolute  !important;
    bottom: var(--address_layout_footer_marginVertical);
    width: 100%;
    z-index: 10000;
}
.address_layout_footer {
    width: auto;
    border-style: solid;
}
.address_layout_footer_positions {
    display: flex;
}
.address_layout_footer_position_footer_start {
    text-align: start;

}
.address_layout_footer_position_footer_center {
    text-align: center;
    flex: 1;
}
.address_layout_footer_position_footer_end{
    text-align: end;
}
.address_block_addresses {
    border: 0px;
    position: relative;
    padding: var(--address_block_addresses_paddingVertical, 0) var(--address_block_addresses_paddingHorizontal, 0);
    margin: var(--address_block_addresses_marginVertical, 0) var(--address_block_addresses_marginHorizontal, 0);
}
.address_block_addresses_loading {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}
.address_block_addresses_loader,
.address_form_block_save_button_spinner {
    display: inline-block;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    border: 3px solid var(--global_primary_color, currentColor);
    border-right-color: transparent;
    border-radius: 50%;
    animation: checkout_spin 0.8s linear infinite;
}
.address_block_addresses_no_addresses {
    text-align: center;
    color: var(--address_block_addresses_no_addresses_textColor, inherit);
    font-family: var(--address_block_addresses_no_addresses_fontFamily, inherit);
}

/* address_block_addresses_item.xml: a vertical card. Header (icon, label,
   name, default badge), the address line, a 1dp divider, then the actions:
   Set as default takes the free width, Edit and the delete icon follow. */
.address_block_addresses_item {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.address_block_addresses_item_header {
    display: flex;
    align-items: center;
    min-width: 0;
}
.address_block_addresses_item_icon_holder {
    flex: 0 0 auto;
    display: flex;
    width: var(--address_block_addresses_item_icon_width, auto);
    overflow: hidden;
}
img.address_block_addresses_item_icon {
    box-sizing: content-box;
    width: auto;
    height: var(--address_block_addresses_item_icon_height);
    object-fit: contain;
    flex: 0 0 auto;
}
.address_block_addresses_item_label {
    flex: 0 0 auto;
    white-space: nowrap;
}
.address_block_addresses_item_name {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: start;
}
.address_block_addresses_item_default {
    flex: 0 0 auto;
    white-space: nowrap;
}
.address_block_addresses_item_line {
    text-align: start;
    padding-bottom: 0;
}
.address_block_addresses_item_divider {
    height: 1px;
    background-color: var(--address_block_addresses_item_divider_color);
}
.address_block_addresses_item_actions {
    display: flex;
    align-items: center;
    gap: var(--address_block_addresses_item_button_marginHorizontal, 8px);
}
/* Edit and Set default from the start, Delete at the end */
.address_block_addresses_item_actions_spacer {
    flex: 1;
}
button.address_block_addresses_item_set_default {
    color: var(--address_block_addresses_item_set_default_textColor);
}
.address_block_addresses_item_button_icon {
    width: var(--address_block_addresses_item_button_icon_size, 16px);
    height: var(--address_block_addresses_item_button_icon_size, 16px);
    margin-inline-end: 6px;
}
/* As wide as it is tall: the button's vertical padding on every side */
button.address_block_addresses_item_delete_button {
    padding: var(--address_block_addresses_item_button_paddingVertical) !important;
}
button.address_block_addresses_item_button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: normal;
}
button.address_block_addresses_item_button:disabled {
    cursor: default;
    opacity: 0.6;
}
img.address_block_addresses_item_delete {
    display: block;
    object-fit: contain;
}
.global_dialog_button.address_block_addresses_item_button_text {
    color: var(--address_block_addresses_item_button_textColor);
}

/* address_form_block_map.xml: the map at the builder's size, a fixed 50dp marker
   whose tip is the centre, the point while it moves, and Edit Location at the
   bottom end on a translucent white chip (#CCFFFFFF). */
.address_form_block_map {
    position: relative;
    box-sizing: border-box;
    /* The box keys (strokes, corners, padding, margins) come from the builder;
       no stroke until one is set */
    border-style: solid;
    border-width: 0;
    overflow: hidden;
}
.address_form_block_map_map {
    position: relative;
    height: 100%;
    overflow: hidden;
}
.address_form_block_map_marker_holder {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--address_form_block_map_marker_icon_width, 50px);
    height: calc(2 * var(--address_form_block_map_marker_icon_height, 50px) + 30px);
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 500;
}
img.address_form_block_map_marker {
    width: var(--address_form_block_map_marker_icon_width, 50px);
    height: var(--address_form_block_map_marker_icon_height, 50px);
    object-fit: contain;
}
.address_form_block_map_marker_point {
    width: 10px;
    height: 10px;
    margin: 10px;
    border-radius: 50%;
    background: #000;
    visibility: hidden;
}
.address_form_block_map_marker_point_shown {
    visibility: visible;
}
.address_form_block_map_edit_location {
    position: absolute;
    bottom: 12px;
    inset-inline-end: 12px;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}
.address_form_block_map_edit_location input {
    width: 18px;
    height: 18px;
    margin: 0;
}

/* address_form_block_form.xml. The default switch sits at the end with its text
   before it. Each field is a Material outlined box: the builder's input keys
   style the box; the hint floats onto its top border on focus or with a
   value; an error shows under it, in Material's error colour. */
.address_form_block_form {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
/* The default card: title and subtitle, then the toggle in the builder's
   address_form_block_form_default_toggle_* colours */
.address_form_block_form_default {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    border-style: solid;
    border-width: var(--address_form_block_form_default_strokeSize, 0);
    cursor: pointer;
}
.address_form_block_form_default_texts {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    text-align: start;
}
.address_form_block_form_default_text {
    font-size: var(--address_form_block_form_default_textSize);
    font-family: var(--address_form_block_form_default_fontFamily, inherit);
}
.address_form_block_form_default_subtitle {
    color: var(--address_form_block_form_default_subtitle_textColor);
    font-size: var(--address_form_block_form_default_subtitle_textSize);
    font-family: var(--address_form_block_form_default_subtitle_fontFamily, inherit);
}
.address_form_block_form_default_toggle {
    position: relative;
    flex: none;
    width: 44px;
    height: 26px;
}
.address_form_block_form_default_toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.address_form_block_form_default_toggle_track {
    position: absolute;
    inset: 0;
    border-radius: 13px;
    background: var(--address_form_block_form_default_toggle_offColor, #e5e5e5);
    transition: background 0.15s;
}
.address_form_block_form_default_toggle_track::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--address_form_block_form_default_toggle_thumbColor, #ffffff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s;
}
.address_form_block_form_default_toggle input:checked + .address_form_block_form_default_toggle_track {
    background: var(--address_form_block_form_default_toggle_onColor);
}
.address_form_block_form_default_toggle input:checked + .address_form_block_form_default_toggle_track::before {
    transform: translateX(18px);
}
.address_form_block_form_default_toggle input:focus-visible + .address_form_block_form_default_toggle_track {
    outline: 2px solid var(--address_form_block_form_default_toggle_onColor);
    outline-offset: 2px;
}

/* Address label tags (address_form_block_form_fields_label_tags_enable): they share the row; one
   that does not fit keeps its width and the row scrolls (Android) */
.address_form_block_form_fields_label_tags_enable {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}
button.address_form_block_form_fields_label_tag {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-style: solid;
    border-width: var(--address_form_block_form_fields_label_tag_strokeSize, 1px);
    cursor: pointer;
    line-height: normal;
}
.address_form_block_form_fields_label_tag_icon {
    flex: none;
    width: var(--address_form_block_form_fields_label_tag_icon_size, 20px);
    height: var(--address_form_block_form_fields_label_tag_icon_size, 20px);
}
.address_form_block_form_label_tag_text {
    white-space: nowrap;
}

/* The form's delete (address_form_block_delete), in the toolbar */
button.address_form_block_delete {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--address_form_block_delete_icon_color);
}
button.address_form_block_delete:disabled {
    opacity: 0.6;
}
/* A wrap_content height (the core's) is square, as the icon is */
.address_form_block_delete_icon {
    width: var(--address_form_block_delete_width, 20px);
    height: var(--address_form_block_delete_height, 20px);
    aspect-ratio: 1;
}
.builder_icon {
    display: inline-block;
    flex: none;
    background-color: currentColor;
}
.address_form_block_form_field {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    margin-top: 8px;
}
.address_form_block_form .address_form_block_form_input {
    display: block;
    box-sizing: border-box;
    width: calc(100% - 2 * var(--address_form_block_form_input_marginHorizontal, 0px));
    outline: none;
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    resize: none;
}
.address_form_block_form textarea.address_form_block_form_input {
    min-height: calc(3 * 1.4em + 2 * var(--address_form_block_form_input_paddingVertical, 0px));
}
.address_form_block_form .address_form_block_form_input:focus {
    border-width: calc(var(--address_form_block_form_input_strokeSize, 1px) + 0.5px);
    border-color: var(--address_form_block_form_input_textColor, currentColor);
}
.address_form_block_form_input_hint {
    position: absolute;
    inset-inline-start: calc(var(--address_form_block_form_input_marginHorizontal, 0px) + var(--address_form_block_form_input_paddingHorizontal, 0px));
    top: calc(var(--address_form_block_form_input_marginVertical, 0px) + var(--address_form_block_form_input_paddingVertical, 0px));
    max-width: calc(100% - 2 * var(--address_form_block_form_input_paddingHorizontal, 0px) - 32px);
    color: var(--address_form_block_form_input_hint_color);
    font-size: var(--address_form_block_form_input_textSize);
    font-family: var(--address_form_block_form_input_fontFamily, inherit);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    transform-origin: left top;
    transition: transform 0.15s ease, top 0.15s ease;
}
[dir="rtl"] .address_form_block_form_input_hint {
    transform-origin: right top;
}
.address_form_block_form_field:focus-within .address_form_block_form_input_hint,
.address_form_block_form_field_filled .address_form_block_form_input_hint {
    top: calc(var(--address_form_block_form_input_marginVertical, 0px) - 0.7em);
    transform: scale(0.89);
    padding: 0 4px;
    margin-inline-start: -4px;
    background-color: var(--address_form_block_form_background, #fff);
    max-width: none;
}
.address_form_block_form_field_list .address_form_block_form_input {
    padding-inline-end: 44px;
    cursor: pointer;
}
.address_form_block_form_field_arrow {
    position: absolute;
    inset-inline-end: calc(var(--address_form_block_form_input_marginHorizontal, 0px) + 16px);
    top: calc(var(--address_form_block_form_input_marginVertical, 0px) + var(--address_form_block_form_input_paddingVertical, 0px) + 0.7em - 3px);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--global_primary_color, var(--address_form_block_form_input_textColor, #000));
    pointer-events: none;
}
.address_form_block_form_field_error .address_form_block_form_input,
.address_form_block_form_field_error .address_form_block_form_input:focus {
    border-color: #B00020;
}
.address_form_block_form_field_error .address_form_block_form_input_hint {
    color: #B00020;
}
.address_form_block_form_field_error_text {
    color: #B00020;
    font-size: 12px;
    padding: 0 var(--address_form_block_form_input_paddingHorizontal, 16px) 2px;
    text-align: start;
}
.address_form_block_form_rows_flat_building {
    display: flex;
    flex-direction: var(--address_form_block_form_rows_flat_building_orientation, row);
}
.address_form_block_form_rows_postal_area {
    display: flex;
    flex-direction: var(--address_form_block_form_rows_postal_area_orientation, row);
}
.address_form_block_form_rows_city_area:empty,
.address_form_block_form_rows_flat_building:empty,
.address_form_block_form_rows_postal_area:empty {
    display: none;
}

.address_form_block_save_button_saving {
    pointer-events: none;
    opacity: 0.85;
    gap: 8px;
}
.address_form_block_save_button .address_form_block_save_button_spinner {
    width: 18px;
    height: 18px;
    border-width: 2px;
    border-color: currentColor;
    border-right-color: transparent;
}



/* start checkout */

/* Android checkout_layout: a 56dp toolbar, the content scrolling above the
   footer. What the layout XML fixes only; the builder writes every key. */
.checkout_layout {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
}
.checkout_layout_toolbar {
    display: flex;
    height: 56px;
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: hidden;
}
.checkout_layout_header_position_header_start {
    min-width: 50px;
    text-align: start;
}
.checkout_layout_header_position_header_center {
    flex: 1;
    text-align: center;
}
.checkout_layout_header_position_header_end {
    min-width: 50px;
    text-align: end;
}
.checkout_layout_content {
    flex: 1 0 auto;
}
.checkout_layout_footer_holder {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    width: 100%;
    z-index: 10000;
}
.checkout_layout_footer_positions {
    display: flex;
}
.checkout_layout_footer_position_footer_center {
    flex: 1;
}
.checkout_block_account {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* checkout_block_service: icon holder, then title and details stacked. */
.checkout_block_service {
    display: flex;
    align-items: flex-start;
}
.checkout_block_service_icon_holder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}
.checkout_block_service_icon {
    flex-shrink: 0;
}
.checkout_block_service_texts {
    flex: 1;
    min-width: 0;
    align-self: center;
}

/* checkout_block_items_item: image | details and info, by weight
   (src/utils/androidWeights.js). */
.checkout_block_items_item_holder {
    position: relative;
}
.checkout_block_items_item_image {
    object-fit: cover;
    box-sizing: border-box;
    flex-shrink: 0;
    align-self: center;
}
.checkout_block_items_item_content {
    min-width: 0;
    align-self: center;
}
.checkout_block_items_item_details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    align-self: center;
}
.checkout_block_items_item_variant,
.checkout_block_items_item_addon {
    display: flex;
    align-items: center;
}
.checkout_block_items_item_variant_name,
.checkout_block_items_item_addon_name {
    flex: 1;
    min-width: 0;
}
.checkout_block_items_item_info {
    align-items: center;
    justify-content: center;
}
.checkout_block_items_item_quantity {
    align-items: center;
    justify-content: center;
}
.checkout_block_items_item_quantity_text {
    text-align: center;
}

/* checkout_block_coupon: the code field and Apply in a row, the available
   discounts row (icon, texts, arrow). */
.checkout_block_coupon_form {
    display: flex;
    align-items: center;
}
.checkout_block_coupon_code_holder {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.checkout_block_coupon_code {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    color: inherit;
}
.checkout_block_coupon_code_icon,
.checkout_block_coupon_available_arrow {
    flex-shrink: 0;
}
.checkout_block_coupon_button {
    box-sizing: border-box;
    border: none;
    cursor: pointer;
}
.checkout_block_coupon_button_waiting {
    opacity: 0.5;
}
.checkout_block_coupon_checking,
.checkout_block_coupon_available_loading {
    display: flex;
    align-items: center;
    gap: 8px;
}
.checkout_block_coupon_spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: checkout_spin 0.8s linear infinite;
}
@keyframes checkout_spin { to { transform: rotate(360deg); } }
.checkout_block_coupon_available {
    display: flex;
    align-items: center;
}
.checkout_block_coupon_available_icon {
    display: flex;
    flex-shrink: 0;
    box-sizing: border-box;
}
.checkout_block_coupon_available_texts {
    flex: 1;
    min-width: 0;
}

/* The available discounts sheet (Android BottomSheetDialog). */
.checkout_block_coupon_sheet_backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100002;
    display: flex;
    align-items: flex-end;
}
.checkout_block_coupon_sheet {
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
}
/* Handle: a pill in its colour; close: an oval; sections and the AUTO tag
   in capitals (the sheet's XML and drawables). */
.checkout_block_coupon_sheet_handle {
    margin-left: auto;
    margin-right: auto;
    background-color: currentColor;
    border-radius: 999px;
}
.checkout_block_coupon_sheet_section {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.checkout_block_coupon_sheet_item_auto {
    text-transform: uppercase;
    flex-shrink: 0;
}
.checkout_block_coupon_sheet_header {
    display: flex;
    align-items: center;
}
.checkout_block_coupon_sheet_title {
    flex: 1;
}
.checkout_block_coupon_sheet_close {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    flex-shrink: 0;
    box-sizing: border-box;
    cursor: pointer;
}
.checkout_block_coupon_sheet_item {
    display: flex;
    align-items: center;
}
.checkout_block_coupon_sheet_item_badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}
.checkout_block_coupon_sheet_item_texts {
    flex: 1;
    min-width: 0;
}
.checkout_block_coupon_sheet_item_button {
    flex-shrink: 0;
    cursor: pointer;
}
.checkout_block_coupon_sheet_item_button:disabled {
    cursor: default;
}
.checkout_block_coupon_sheet_item_button_disabled {
    opacity: var(--checkout_block_coupon_sheet_item_disabled_alpha);
}

/* checkout_block_payment: vertical LinearLayouts, whose children's margins
   add up (block layout would collapse the title's and the options' 7 + 7
   into 7). Each option a row, texts then the indicator. */
.checkout_block_payment,
.checkout_block_payment_method_group {
    display: flex;
    flex-direction: column;
}
.checkout_block_payment_options_item {
    display: flex;
    align-items: center;
}
/* Android draws an option's stroke (checkout_block_payment_option_border)
   inside its padding; a CSS border adds to it, so the padding gives the
   stroke back. */
.checkout_block_payment .checkout_block_payment_options_item {
    padding: calc(var(--checkout_block_payment_options_item_paddingVertical) - var(--checkout_block_payment_options_item_strokeSize))
        calc(var(--checkout_block_payment_options_item_paddingHorizontal) - var(--checkout_block_payment_options_item_strokeSize));
}
.checkout_block_payment .checkout_block_payment_options_item_selected {
    padding: calc(var(--checkout_block_payment_options_item_paddingVertical) - var(--checkout_block_payment_options_item_selected_strokeSize))
        calc(var(--checkout_block_payment_options_item_paddingHorizontal) - var(--checkout_block_payment_options_item_selected_strokeSize));
}
.checkout_block_payment_option_texts {
    flex: 1;
    min-width: 0;
}
.checkout_block_payment_options_item_indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}
/* The indicator drawables: unchecked an oval (radio) or a 6dp rounded
   square (wallet) stroked as a selected option; checked a filled shape with
   a check mark (a 24-unit vector). */
.checkout_block_payment_options_item_indicator_unchecked {
    border-width: var(--checkout_block_payment_options_item_selected_strokeSize);
    border-radius: 50%;
}
.checkout_block_payment_indicator_box.checkout_block_payment_options_item_indicator_unchecked {
    border-radius: 6px;
}
.checkout_block_payment_options_item_indicator svg {
    width: 100%;
    height: 100%;
    display: block;
}
.checkout_block_payment_indicator_shape {
    fill: currentColor;
}
.checkout_block_payment_options_item_indicator_checkmark {
    fill: currentColor;
}
/* The card logos: fitStart under the title, marginTop the method's
   marginVertical. */
.checkout_block_payment_options_item_icon {
    display: block;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    margin-top: var(--checkout_block_payment_options_item_title_marginVertical);
}

/* checkout_block_note: the title a full-width line, the input three lines
   tall, no resize handle. */
.checkout_block_note {
    display: flex;
    flex-direction: column;
}
.checkout_block_note_title {
    display: block;
}
.checkout_block_note_input {
    display: block;
    box-sizing: border-box;
    resize: none;
    outline: none;
}

/* checkout_block_summary: label at the start, value at the end. */
.checkout_block_summary_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.checkout_block_summary_value {
    text-align: end;
}

/* checkout_block_confirm_button_text: centred both ways (gravity center). */
.checkout_block_confirm_button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* While the order is placed: dimmed, a spinner before the message, no taps. */
.checkout_block_confirm_button_placing {
    pointer-events: none;
    opacity: 0.85;
    gap: 8px;
}
.checkout_block_confirm_button_spinner {
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border: 2px solid var(--checkout_block_confirm_button_textColor, currentColor);
    border-right-color: transparent;
    border-radius: 50%;
    animation: checkout_spin 0.8s linear infinite;
}



/* start orders */

.orders_layout {
    height:100vh;
    overflow: scroll;
}
.orders_layout_toolbar {
    display: flex;
    height: 55px;
    overflow: hidden;
}
.orders_layout_toolbar_positions {
    align-items: center;
    justify-content: center;
}
/* Android orders_layout: the title centred in the bar; the start and end
   slots take only their content. */
.orders_layout_header_position_header_start,
.orders_layout_header_position_header_end {
    flex: 0 0 auto;
    min-width: 50px;
}
.orders_layout_header_position_header_start {
    text-align: start;
}
.orders_layout_header_position_header_end {
    text-align: end;
}
.orders_layout_header_position_header_center {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
}
.orders_block_title {
    overflow: hidden;
    text-overflow: ellipsis;
}
.orders_layout_content_position_content {
    overflow: hidden;
}
.orders_block_orders_loading {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}
.orders_block_orders_loader {
    display: inline-block;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    border: 3px solid var(--global_primary_color, currentColor);
    border-right-color: transparent;
    border-radius: 50%;
    animation: checkout_spin 0.8s linear infinite;
}
.orders_block_orders_no_orders {
    text-align: center;
}

/* orders_block_orders_item.xml: a vertical card. Top row (icon, number taking
   the free width, status badge), the middle rows (date; branch then service at
   the end; item count then total), a 1dp divider, then View details. */
.orders_block_orders_item {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.orders_block_orders_item_holder {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
.orders_block_orders_item_row_top,
.orders_block_orders_item_line {
    display: flex;
    align-items: center;
    min-width: 0;
}
.orders_block_orders_item_row_middle {
    display: flex;
    flex-direction: column;
}
img.orders_block_orders_item_number_icon,
img.orders_block_orders_item_date_icon,
img.orders_block_orders_item_branch_icon {
    flex: 0 0 auto;
    object-fit: contain;
}
.orders_block_orders_item_number,
.orders_block_orders_item_date,
.orders_block_orders_item_branch,
.orders_block_orders_item_count {
    flex: 1 1 0;
    min-width: 0;
    text-align: start;
}
.orders_block_orders_item_status,
.orders_block_orders_item_service_type,
.orders_block_orders_item_total {
    flex: 0 0 auto;
    white-space: nowrap;
}
.orders_block_orders_item_divider {
    height: 1px;
    background-color: var(--orders_block_orders_item_divider_color);
}
.orders_block_orders_item_row_actions {
    display: flex;
}
button.orders_block_orders_item_button {
    flex: 1 1 0;
    cursor: pointer;
    text-align: center;
    line-height: normal;
}

/* The details. The builder writes each block's direction, sizes, weights,
   colours and radii, the icon chips' corners included (_icon_*Radius); these
   add the icons' fill and the rows' alignment. */
.orders_block_icon_round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
}
svg.orders_block_icon_vector,
.orders_block_icon_image {
    width: 100%;
    height: 100%;
}
.order_details_block_header_row,
.order_details_block_address,
.order_details_block_service_type,
.order_details_block_payment,
.order_details_block_items_item_row,
.order_details_block_items_item_addon_row,
.order_details_block_summary_rows_item {
    align-items: center;
}
.order_details_block_header_row_status,
.order_details_block_service_type_note,
.order_details_block_items_item_quantity {
    flex: 0 0 auto;
    white-space: nowrap;
}
.order_details_block_address_text,
.order_details_block_service_type_text,
.order_details_block_payment_text,
.order_details_block_items_item_text {
    min-width: 0;
}
.order_details_block_summary_rows_item_label,
/* The card's number with the service type under it */
.orders_block_orders_item_number_holder {
    flex: 1;
    min-width: 0;
}
/* Pickup and dine-in: directions to the branch */
a.order_details_block_address_text_navigate {
    display: inline-block;
    align-self: flex-start;
    text-decoration: none;
    border-style: solid;
}
.order_details_block_summary_rows_total_label {
    flex: 1 1 0;
    min-width: 0;
}
.order_details_block_summary_divider {
    flex: 0 0 auto;
}
/* order_details_block_tracking.xml: heading, then the card (the notice, the map with
   the ETA at its top end, the courier with Call at the end). The map's size,
   colours and radii are the builder's. Markers are UtilsMapIcon's circle: the
   builder writes its size, padding, rim and colour; the glyph is the tinted PNG. */
.order_details_block_tracking_card {
    overflow: hidden;
}
.order_details_block_tracking_map_holder {
    position: relative;
}
.order_details_block_tracking_map .leaflet-container {
    background: transparent;
}
.order_details_block_tracking_map_eta {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    z-index: 500;
    text-align: center;
}
.order_details_block_tracking_courier {
    align-items: center;
}
.order_details_block_tracking_courier_text {
    min-width: 0;
}
a.order_details_block_tracking_courier_call {
    flex: 0 0 auto;
    text-decoration: none;
    text-align: center;
}
.leaflet-marker-icon.order_details_block_tracking_marker {
    background: none;
    border: 0;
}
.order_details_block_tracking_map_icon {
    display: block;
    box-sizing: border-box;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.order_details_block_tracking_map_glyph {
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
}

/* The generated rules give the card's background, stroke, radius, padding and
   elevation to order_details_block_items / order_details_block_summary (their drawables are
   named after them); on Android those blocks only hold the heading and the
   margins, and the drawable is the list's / the card's. */
.orders_layout .order_details_block_items,
.orders_layout .order_details_block_summary {
    background-color: transparent;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.orders_layout .order_details_block_items_list {
    display: flex;
    flex-direction: column;
    background-color: var(--order_details_block_items_background);
    border: var(--order_details_block_items_strokeSize, 0) solid var(--order_details_block_items_strokeColor, transparent);
    border-radius: var(--order_details_block_items_radius, 0);
    padding: var(--order_details_block_items_paddingVertical, 0) var(--order_details_block_items_paddingHorizontal, 0);
    box-shadow: var(--order_details_block_items_elevation, 0) var(--order_details_block_items_elevation, 0) var(--order_details_block_items_elevation, 0) var(--order_details_block_items_elevation, 0) #eee;
}
.orders_layout .order_details_block_summary_card {
    background-color: var(--order_details_block_summary_background);
    border: var(--order_details_block_summary_strokeSize, 0) solid var(--order_details_block_summary_strokeColor, transparent);
    border-radius: var(--order_details_block_summary_radius, 0);
    padding: var(--order_details_block_summary_paddingVertical, 0) var(--order_details_block_summary_paddingHorizontal, 0);
    box-shadow: var(--order_details_block_summary_elevation, 0) var(--order_details_block_summary_elevation, 0) var(--order_details_block_summary_elevation, 0) var(--order_details_block_summary_elevation, 0) #eee;
}



.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.modal-body {
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 10px;
    text-align: start;
}
.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    border: none;
    background: none;
    font-size: 24px;
    cursor: pointer;
}






@media (min-width: 451px) {

    .App{
        max-width: 450px;
        position: relative;
    }

    .product_catalog_layout_footer_holder{
        max-width: 450px;
    }

    .app_holder {
        display: flex;
        max-height: 100vh;
        overflow: hidden;
        background-color: var(--global_colorPrimaryDark);
    }

    .cover {
        flex: 1;
        min-height: 100%;
        background-color: var(--global_colorPrimaryDark) !important;
        border-right: 2px solid #00000004;
        display: flex !important;
        align-items: center;
        overflow: hidden;
        position: relative;
        justify-content: center;
    }

    .cover-logo img {
        max-width: 250px;
    }

}

/* ── product_catalog_block_service_selection – layout only; colours, sizes,
   paddings, radii and fonts are the builder's (app_style.css) ── */

/* Buttons start bare; :where keeps this below every builder rule. */
:where(.product_catalog_block_service_selection, .product_catalog_block_service_selection_sheet,
       .product_catalog_block_service_selection_picker) button {
    appearance: none;
    background: none;
    border: 0 solid transparent;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
}

/* A tenant PNG tinted as Android's setColorFilter (SRC_ATOP) does: the colour
   over the image, inside the image's shape. A transparent colour leaves the
   image as it is. TintedIcon sets the two layers. */
.product_catalog_block_service_selection_tinted {
    display: inline-block;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.product_catalog_block_service_selection {
    display: flex;
    flex-direction: var(--product_catalog_block_service_selection_orientation, column);
    box-sizing: border-box;
}

.product_catalog_block_service_selection_services {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
}

.product_catalog_block_service_selection_services_item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: var(--product_catalog_block_service_selection_services_item_orientation, column);
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.product_catalog_block_service_selection_services_item:last-child {
    margin-inline-end: 0;
}

.product_catalog_block_service_selection_services_item_text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The card the service selection drew before product_catalog_block_service_card: kept
   for an app that has not placed the card block. */
.product_catalog_block_service_selection_card {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    /* Android layout_marginTop; the builder stylesheet leaves it out. */
    margin-top: var(--product_catalog_block_service_selection_card_marginTop, 0);
}

.product_catalog_block_service_selection_card_icon,
.product_catalog_block_service_selection_card_chevron {
    flex-shrink: 0;
    object-fit: contain;
}

.product_catalog_block_service_selection_card_info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.product_catalog_block_service_selection_card_title,
.product_catalog_block_service_selection_card_subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sheets: bottom sheets over the page (BottomSheetDialog). */
.product_catalog_block_service_selection_backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100001;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.product_catalog_block_service_selection_sheet,
.product_catalog_block_service_selection_picker {
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

.product_catalog_block_service_selection_sheet_header {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 8px;
}

.product_catalog_block_service_selection_sheet_title {
    flex: 1;
    min-width: 0;
}

.product_catalog_block_service_selection_sheet_close {
    flex-shrink: 0;
    display: flex;
}
.product_catalog_block_service_selection_sheet_close img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product_catalog_block_service_selection_sheet_list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.product_catalog_block_service_selection_empty {
    text-align: center;
    padding: 24px 16px;
}

.product_catalog_block_service_selection_sheet_address_item {
    display: flex;
    align-items: flex-start;
    width: auto;
    box-sizing: border-box;
}

.product_catalog_block_service_selection_address_item_info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.product_catalog_block_service_selection_address_item_row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.product_catalog_block_service_selection_sheet_address_item_default {
    flex-shrink: 0;
    white-space: nowrap;
}

.product_catalog_block_service_selection_sheet_address_add {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Branch rows (ServiceSelectionBranchAdapter): a branch that does not serve
   the service now is shown faded and cannot be chosen. */
.product_catalog_block_service_selection_sheet_branch_item {
    display: flex;
    flex-direction: column;
    width: auto;
    box-sizing: border-box;
}
.product_catalog_block_service_selection_branch_item_disabled {
    opacity: 0.5;
    cursor: default;
}

.product_catalog_block_service_selection_branch_item_header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product_catalog_block_service_selection_sheet_branch_item_name {
    flex: 1;
    min-width: 0;
}

.product_catalog_block_service_selection_sheet_branch_item_status {
    flex-shrink: 0;
    white-space: nowrap;
}
.product_catalog_block_service_selection_branch_item_status_unavailable {
    color: #888;
}

.product_catalog_block_service_selection_sheet_branch_item_details {
    display: flex;
}

.product_catalog_block_service_selection_sheet_branch_item_distance,
.product_catalog_block_service_selection_sheet_branch_item_hours {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.product_catalog_block_service_selection_sheet_branch_item_distance_icon,
.product_catalog_block_service_selection_sheet_branch_item_hours_icon {
    flex-shrink: 0;
    width: var(--product_catalog_block_service_selection_sheet_branch_item_distance_icon_size, 14px);
    height: var(--product_catalog_block_service_selection_sheet_branch_item_distance_icon_size, 14px);
}

/* The list/map switcher and the map. */
.product_catalog_block_service_selection_sheet_branch_switcher {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    box-sizing: border-box;
}
.product_catalog_block_service_selection_sheet_branch_switcher_button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.product_catalog_block_service_selection_sheet_branch_switcher_button img,
.product_catalog_block_service_selection_sheet_branch_map_card_pager_button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product_catalog_block_service_selection_map_holder {
    position: relative;
    flex: 1;
    min-height: 60vh;
}
.product_catalog_block_service_selection_map {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.product_catalog_block_service_selection_sheet_branch_map_card {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    box-sizing: border-box;
}
.product_catalog_block_service_selection_map_card_item .product_catalog_block_service_selection_branch_item_header {
    margin: 0;
}
.product_catalog_block_service_selection_sheet_branch_map_card_order_button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.product_catalog_block_service_selection_sheet_branch_map_card_pager {
    display: flex;
    align-items: center;
    gap: 8px;
}
.product_catalog_block_service_selection_sheet_branch_map_card_pager_counter {
    flex: 1;
}
.product_catalog_block_service_selection_sheet_branch_map_card_pager_button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.product_catalog_block_service_selection_sheet_branch_map_card_pager_button:disabled {
    opacity: 0.4;
}

/* The picker ("How do you want it?"). */
.product_catalog_block_service_selection_picker_handle {
    flex-shrink: 0;
    margin: 0 auto;
    border-radius: 999px;
    background-color: var(--product_catalog_block_service_selection_picker_handle_color, #ccc);
    width: var(--product_catalog_block_service_selection_picker_handle_width, 40px);
    height: var(--product_catalog_block_service_selection_picker_handle_height, 4px);
}
.product_catalog_block_service_selection_picker_options {
    gap: var(--product_catalog_block_service_selection_picker_options_spacing, 12px);
}
.product_catalog_block_service_selection_picker_options_item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
}
.product_catalog_block_service_selection_picker_confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 100%;
}

/* Cart-clear confirmation before a branch change. */
.product_catalog_block_service_selection_confirm_backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.product_catalog_block_service_selection_confirm_dialog {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.product_catalog_block_service_selection_confirm_actions {
    display: flex;
    gap: 10px;
}
.product_catalog_block_service_selection_confirm_cancel,
.product_catalog_block_service_selection_confirm_accept {
    flex: 1;
    height: 44px;
    border-radius: 8px;
    border: none;
}
.product_catalog_block_service_selection_confirm_cancel {
    background: #f0f0f0;
    color: #333;
}
.product_catalog_block_service_selection_confirm_accept {
    background: #e41e26;
    color: #fff;
}
/* ── end product_catalog_block_service_selection ── */

/* ── product_catalog_block_service_card – the service selection's card as a block of
   its own; layout only, the rest is the builder's (app_style.css) ── */
:where(.product_catalog_block_service_card) {
    appearance: none;
    background: none;
    border: 0 solid transparent;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
}

.product_catalog_block_service_card {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
}

.product_catalog_block_service_card_icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.product_catalog_block_service_card_icon_image {
    width: 100%;
    height: 100%;
}

.product_catalog_block_service_card_texts {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* The value row; the builder's value_gravity sets its justify-content. */
.product_catalog_block_service_card_value {
    display: flex;
    align-items: center;
    min-width: 0;
}

.product_catalog_block_service_card_label,
.product_catalog_block_service_card_value_line,
.product_catalog_block_service_card_action {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product_catalog_block_service_card_action,
.product_catalog_block_service_card_value_chevron,
.product_catalog_block_service_card_chevron {
    flex-shrink: 0;
}
/* ── end product_catalog_block_service_card ── */

/* product_catalog_block_alert: the message has its own text style (ADR 0015:
   product_catalog_block_alert_message_*); danger and warning still recolour it. */
.product_catalog_block_alert_danger .product_catalog_block_alert_message { color: var(--product_catalog_block_alert_danger_textColor); }
.product_catalog_block_alert_warning .product_catalog_block_alert_message { color: var(--product_catalog_block_alert_warning_textColor); }

/* product_catalog_block_alert: icon and text in a row (colours are the builder's). */
.product_catalog_block_alert {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
}
.product_catalog_block_alert_icon {
    flex-shrink: 0;
    width: var(--product_catalog_block_alert_icon_size, 20px);
    height: var(--product_catalog_block_alert_icon_size, 20px);
}
.product_catalog_block_alert_message {
    flex: 1;
    min-width: 0;
}

/* product_catalog_block_search: the box (colours and sizes are the builder's).
   While searching, the catalog hides the blocks Android hides
   (ProductCatalog search_mode). */
.product_catalog_block_search {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin: 0;
}
.product_catalog_block_search_input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    appearance: none;
    outline: none;
}
/* The icon sits inside the box at its start padding, the text after it
   (drawableStart with drawablePadding). */
.product_catalog_block_search .product_catalog_block_search_input_icon {
    position: absolute;
    inset-inline-start: calc(var(--product_catalog_block_search_input_marginHorizontal, 0px) + var(--product_catalog_block_search_input_strokeSize, 0px) + var(--product_catalog_block_search_input_paddingHorizontal, 0px));
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    background-color: var(--product_catalog_block_search_input_icon_color, currentColor);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    pointer-events: none;
}
.product_catalog_block_search input.product_catalog_block_search_input {
    padding-inline-start: calc(var(--product_catalog_block_search_input_paddingHorizontal, 0px) + var(--product_catalog_block_search_input_icon_size, 0px) + var(--product_catalog_block_search_input_icon_padding, 0px));
}
.product_catalog_block_search_input::-webkit-search-cancel-button {
    display: none;
}
.product_catalog_block_search_button {
    cursor: pointer;
    caret-color: transparent;
}















/* Variation and add-on indicators (src/components/SelectionIndicator.js).
   Size, colours and radius come from the builder's
   <block>_item_indicator rules; these only centre the check mark and keep a
   visible box for apps whose stylesheet predates them. */
.selection_indicator {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 20px;
    min-height: 20px;
    box-sizing: border-box;
}

.selection_indicator_input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* product_catalog_block_categories (Android 766b740): the optional title
   (hidden by default) and the icon card. Defaults are Android's, for apps
   whose stylesheet predates the keys. */
.product_catalog_block_categories_title_holder {
    display: block;
}

.product_catalog_block_categories_title {
    display: block;
    text-align: var(--product_catalog_block_categories_title_alignment, start);
    font-size: var(--product_catalog_block_categories_title_textSize, 18px);
    color: var(--product_catalog_block_categories_title_textColor, inherit);
    background-color: var(--product_catalog_block_categories_title_background, transparent);
    padding: var(--product_catalog_block_categories_title_paddingVertical, 0) var(--product_catalog_block_categories_title_paddingHorizontal, 24px);
    margin: var(--product_catalog_block_categories_title_marginVertical, 0) var(--product_catalog_block_categories_title_marginHorizontal, 0);
}

.product_catalog_block_categories_item_icon {
    box-sizing: border-box;
    padding: var(--product_catalog_block_categories_item_icon_paddingVertical, 0) var(--product_catalog_block_categories_item_icon_paddingHorizontal, 0);
    background-color: var(--product_catalog_block_categories_item_icon_background, transparent);
    border: var(--product_catalog_block_categories_item_icon_strokeSize, 0) solid var(--product_catalog_block_categories_item_icon_strokeColor, transparent);
    border-radius: var(--product_catalog_block_categories_item_icon_radius, 0);
}

/* Placeholder behind an image until it loads (RemoteImage skeleton): Android's
   global_skeleton_shape, in the builder's skeleton colour and radius. */
.image_skeleton {
    background-color: var(--global_skeleton_background, #ebebeb);
    border-radius: var(--global_skeleton_radius, 0);
}
/* Loading rows (Android SkeletonView): the builder's colours and radius. */
.react-loading-skeleton {
    --base-color: var(--global_skeleton_background, #ebebeb);
    --highlight-color: var(--global_skeleton_highlight, #f5f5f5);
    border-radius: var(--global_skeleton_radius, 0.25rem);
}


/* product_catalog_block_customer_support: icon and two lines (toolbar end). */
:where(.product_catalog_block_customer_support, .product_catalog_block_highlights_item,
       .product_catalog_block_popup_image_button, .product_catalog_block_popup_close) {
    appearance: none;
    background: none;
    border: 0 solid transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
}
.product_catalog_block_customer_support {
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
}
.product_catalog_block_customer_support_icon {
    flex-shrink: 0;
    object-fit: contain;
}
.product_catalog_block_customer_support_texts {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.product_catalog_block_customer_support_title,
.product_catalog_block_customer_support_subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* product_catalog_block_add_more: the text and a progress bar (the builder's
   bar colour fills it). */
.product_catalog_block_add_more_bar,
.cart_block_add_more_bar {
    display: block;
    overflow: hidden;
    border-radius: 999px;
}
.product_catalog_block_add_more_bar_fill,
.cart_block_add_more_bar_fill {
    display: block;
    height: 100%;
    background-color: currentColor;
    border-radius: inherit;
    transition: width 0.2s ease;
}

/* product_catalog_block_highlights: a horizontal row. */
.product_catalog_block_highlights {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    box-sizing: border-box;
}
.product_catalog_block_highlights_item {
    flex: 0 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}
.product_catalog_block_highlights_item_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* product_catalog_block_popup: an image over the catalog. */
.product_catalog_block_popup {
    position: fixed;
    inset: 0;
    z-index: 100003;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product_catalog_block_popup_holder {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}
.product_catalog_block_popup_image_button {
    position: relative;
    max-width: min(90vw, 500px);
    max-height: 85vh;
    display: flex;
}
.product_catalog_block_popup_image {
    max-width: 100%;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 16px;
}
.product_catalog_block_popup_close {
    position: absolute;
    top: max(16px, calc(50% - 42vh - 16px));
    inset-inline-end: 16px;
    width: 36px;
    height: 36px;
    display: flex;
}
.product_catalog_block_popup_close img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* A page over the catalog: support chat and games (Android ChatActivity,
   the game overlay). */
.catalog_web_overlay {
    position: fixed;
    inset: 0;
    z-index: 100004;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    padding: 20px;
    box-sizing: border-box;
}
.catalog_web_overlay_frame {
    flex: 1;
    border: 0;
    border-radius: 24px;
    background: #fff;
}
.catalog_web_overlay_close {
    position: absolute;
    top: 24px;
    inset-inline-end: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}


/* Catalog blocks rendered as buttons start bare; builder rules apply on top. */
:where(button.product_catalog_block_cart, button.product_catalog_block_user_account,
       button.product_catalog_block_login_logout) {
    appearance: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
    border: 0 solid transparent;
    background: none;
    padding: 0;
    width: 100%;
}

/* product_catalog_block_cart under the minimum order (Android updateTotal):
   the message in the subtotal's style, the bar dimmed. */
.product_catalog_block_cart_minimum {
    opacity: 0.7;
}
.product_catalog_block_cart_minimum_message {
    flex: 1;
    text-align: center;
    color: var(--product_catalog_block_cart_subtotal_textColor);
    font-size: var(--product_catalog_block_cart_subtotal_textSize);
    font-family: var(--product_catalog_block_cart_subtotal_fontFamily);
    margin: 0 var(--product_catalog_block_cart_subtotal_marginHorizontal, 0);
    /* Android hides only the number's text, so its card keeps the bar at
       full height; iOS pads the message to the same. */
    min-height: var(--product_catalog_block_cart_number_height, auto);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* product_catalog_block_coupons: the count pill at the end of the row. */
.product_catalog_block_coupons_pill {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: var(--product_catalog_block_coupons_pill_minWidth, 20px);
    border-radius: var(--product_catalog_block_coupons_pill_radius, 999px);
}
/* product_catalog_block_rewards: the same row, its pill the points balance. */
.product_catalog_block_rewards_pill {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: var(--product_catalog_block_rewards_pill_minWidth, 20px);
    border-radius: var(--product_catalog_block_rewards_pill_radius, 999px);
}

/* product_catalog_block_user_account: image, then the name and the second line. */
.product_catalog_block_user_account {
    display: flex;
    align-items: var(--product_catalog_block_user_account_gravity, center);
}
.product_catalog_block_user_account_texts {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.product_catalog_block_user_account_sub {
    text-align: var(--product_catalog_block_user_account_sub_alignment, start);
}

/* Android's AlertDialog (src/components/AlertDialog.js): white card, title,
   message, text buttons at the end; the button colours are the builder's. */
.global_dialog_backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.global_dialog {
    background: #fff;
    border-radius: 4px;
    padding: 24px 24px 8px;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    box-shadow: 0 11px 15px rgba(0, 0, 0, 0.2);
}
.global_dialog_title {
    font-size: 20px;
    color: #212121;
    margin-bottom: 12px;
}
.global_dialog_message {
    font-size: 16px;
    color: #757575;
}
.global_dialog_actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}
.global_dialog_button {
    background: none;
    border: none;
    padding: 10px 8px;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--global_colorAccent, #00897b);
}

/* src/components/TintedIcon.js: the PNG as a mask over the element's colour,
   with the PNG under that colour for a transparent tint. */
.global_tinted {
    display: inline-block;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ---- Order confirmation (Android confirmation_layout and its blocks): what
   the layout XML and drawables fix; the builder writes every key. ---- */
.confirmation_layout {
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* The toolbar (?attr/actionBarSize), laid out ltr: start, centre, end. */
.confirmation_layout_toolbar {
    position: relative;
    display: flex;
    align-items: center;
    height: 56px;
    box-sizing: border-box;
    flex-shrink: 0;
    direction: ltr;
}
.confirmation_layout_header_position_header_center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.confirmation_layout_header_position_header_end {
    margin-left: auto;
}
.confirmation_layout_content_holder {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
}
.confirmation_layout_content {
    display: flex;
    flex-direction: column;
}
/* The footer sits over the content's end (alignParentBottom); the content's
   paddingBottom keeps clear of it. */
.confirmation_layout_footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    z-index: 10;
}
.confirmation_layout_footer_position {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.confirmation_layout_footer_position_footer_start { align-items: flex-start; }
.confirmation_layout_footer_position_footer_center { align-items: center; }
.confirmation_layout_footer_position_footer_end { align-items: flex-end; }

/* Android draws these strokes inside the padding (a layer per edge); a CSS
   border adds to it, so the padding gives the stroke back. */
.confirmation_layout .confirmation_layout_footer,
.confirmation_layout .confirmation_block_promise,
.confirmation_layout .confirmation_block_details,
.confirmation_layout .confirmation_block_summary,
.confirmation_layout .confirmation_block_reward,
.confirmation_layout .confirmation_block_directions,
.confirmation_layout .confirmation_block_cancel,
.confirmation_layout .confirmation_block_track_button,
.confirmation_layout .confirmation_block_menu_button {
    box-sizing: border-box;
}
.confirmation_layout .confirmation_layout_footer {
    padding: calc(var(--confirmation_layout_footer_paddingVertical) - var(--confirmation_layout_footer_strokeTop))
        calc(var(--confirmation_layout_footer_paddingHorizontal) - var(--confirmation_layout_footer_strokeRight))
        calc(var(--confirmation_layout_footer_paddingVertical) - var(--confirmation_layout_footer_strokeBottom))
        calc(var(--confirmation_layout_footer_paddingHorizontal) - var(--confirmation_layout_footer_strokeLeft));
}
.confirmation_layout .confirmation_block_promise {
    padding: calc(var(--confirmation_block_promise_paddingVertical) - var(--confirmation_block_promise_strokeTop))
        calc(var(--confirmation_block_promise_paddingHorizontal) - var(--confirmation_block_promise_strokeRight))
        calc(var(--confirmation_block_promise_paddingVertical) - var(--confirmation_block_promise_strokeBottom))
        calc(var(--confirmation_block_promise_paddingHorizontal) - var(--confirmation_block_promise_strokeLeft));
}
.confirmation_layout .confirmation_block_details {
    padding: calc(var(--confirmation_block_details_paddingVertical) - var(--confirmation_block_details_strokeTop))
        calc(var(--confirmation_block_details_paddingHorizontal) - var(--confirmation_block_details_strokeRight))
        calc(var(--confirmation_block_details_paddingVertical) - var(--confirmation_block_details_strokeBottom))
        calc(var(--confirmation_block_details_paddingHorizontal) - var(--confirmation_block_details_strokeLeft));
}
.confirmation_layout .confirmation_block_summary {
    padding: calc(var(--confirmation_block_summary_paddingVertical) - var(--confirmation_block_summary_strokeTop))
        calc(var(--confirmation_block_summary_paddingHorizontal) - var(--confirmation_block_summary_strokeRight))
        calc(var(--confirmation_block_summary_paddingVertical) - var(--confirmation_block_summary_strokeBottom))
        calc(var(--confirmation_block_summary_paddingHorizontal) - var(--confirmation_block_summary_strokeLeft));
}
.confirmation_layout .confirmation_block_reward {
    padding: calc(var(--confirmation_block_reward_paddingVertical) - var(--confirmation_block_reward_strokeTop))
        calc(var(--confirmation_block_reward_paddingHorizontal) - var(--confirmation_block_reward_strokeRight))
        calc(var(--confirmation_block_reward_paddingVertical) - var(--confirmation_block_reward_strokeBottom))
        calc(var(--confirmation_block_reward_paddingHorizontal) - var(--confirmation_block_reward_strokeLeft));
}
.confirmation_layout .confirmation_block_directions {
    padding: calc(var(--confirmation_block_directions_paddingVertical) - var(--confirmation_block_directions_strokeTop))
        calc(var(--confirmation_block_directions_paddingHorizontal) - var(--confirmation_block_directions_strokeRight))
        calc(var(--confirmation_block_directions_paddingVertical) - var(--confirmation_block_directions_strokeBottom))
        calc(var(--confirmation_block_directions_paddingHorizontal) - var(--confirmation_block_directions_strokeLeft));
}
.confirmation_layout .confirmation_block_cancel {
    padding: calc(var(--confirmation_block_cancel_paddingVertical) - var(--confirmation_block_cancel_strokeTop))
        calc(var(--confirmation_block_cancel_paddingHorizontal) - var(--confirmation_block_cancel_strokeRight))
        calc(var(--confirmation_block_cancel_paddingVertical) - var(--confirmation_block_cancel_strokeBottom))
        calc(var(--confirmation_block_cancel_paddingHorizontal) - var(--confirmation_block_cancel_strokeLeft));
}
.confirmation_layout .confirmation_block_track_button {
    padding: calc(var(--confirmation_block_track_button_paddingVertical) - var(--confirmation_block_track_button_strokeTop))
        calc(var(--confirmation_block_track_button_paddingHorizontal) - var(--confirmation_block_track_button_strokeRight))
        calc(var(--confirmation_block_track_button_paddingVertical) - var(--confirmation_block_track_button_strokeBottom))
        calc(var(--confirmation_block_track_button_paddingHorizontal) - var(--confirmation_block_track_button_strokeLeft));
}
.confirmation_layout .confirmation_block_menu_button {
    padding: calc(var(--confirmation_block_menu_button_paddingVertical) - var(--confirmation_block_menu_button_strokeTop))
        calc(var(--confirmation_block_menu_button_paddingHorizontal) - var(--confirmation_block_menu_button_strokeRight))
        calc(var(--confirmation_block_menu_button_paddingVertical) - var(--confirmation_block_menu_button_strokeBottom))
        calc(var(--confirmation_block_menu_button_paddingHorizontal) - var(--confirmation_block_menu_button_strokeLeft));
}

/* close: an oval with the icon centred. */
.confirmation_block_close {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-sizing: border-box;
}

/* header: centred column; the check in its circle inside two rings. */
.confirmation_block_header {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.confirmation_block_header_icon_holder {
    position: relative;
    flex-shrink: 0;
}
.confirmation_block_header_icon_ring {
    position: absolute;
    box-sizing: border-box;
    border-style: solid;
    border-color: currentColor;
    border-radius: 50%;
}
.confirmation_block_header_icon_ring_outer {
    inset: 0;
}
.confirmation_block_header_icon_ring_inner {
    inset: var(--confirmation_block_header_icon_ring_inset);
}
.confirmation_block_header_icon_circle {
    position: absolute;
    inset: var(--confirmation_block_header_icon_circle_inset);
    border-radius: 50%;
}
.confirmation_block_header_icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.confirmation_block_header_title,
.confirmation_block_header_text {
    align-self: stretch;
}

/* promise and reward: icon square, then the texts. */
.confirmation_block_promise,
.confirmation_block_reward {
    display: flex;
    align-items: center;
}
.confirmation_block_promise_icon_holder,
.confirmation_block_reward_icon_holder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.confirmation_block_promise_texts,
.confirmation_block_reward_texts {
    flex: 1;
    min-width: 0;
}

/* details: label, then the value at the end (two lines at most), divided. */
.confirmation_block_details {
    display: flex;
    flex-direction: column;
}
.confirmation_block_details_rows_item {
    display: flex;
    align-items: center;
}
.confirmation_block_details_label {
    flex-shrink: 0;
    margin-inline-end: var(--confirmation_block_details_rows_item_spacing);
}
.confirmation_block_details_value {
    flex: 1;
    min-width: 0;
    text-align: end;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Dividers: full-width Views of the divider size, in the divider colour. */
.confirmation_layout .confirmation_block_details_divider,
.confirmation_layout .confirmation_block_summary_divider {
    width: auto;
    background-color: currentColor;
    flex-shrink: 0;
}

/* summary: items (quantity square, name and variant, price) and amounts. */
.confirmation_block_summary {
    display: flex;
    flex-direction: column;
}
.confirmation_block_summary_items_item {
    display: flex;
    align-items: center;
}
.confirmation_block_summary_items_item_quantity {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.confirmation_block_summary_item_texts {
    flex: 1;
    min-width: 0;
}
.confirmation_block_summary_items_item_price {
    flex-shrink: 0;
}
.confirmation_block_summary_lines_item {
    display: flex;
    align-items: center;
}
.confirmation_block_summary_lines_item_label {
    flex: 1;
    min-width: 0;
}
/* A discount line in its colour, the total larger and in its font, on the
   label and the value (Confirmation.addSummaryLine). */
.confirmation_block_summary_lines_item .confirmation_block_summary_lines_discount {
    color: var(--confirmation_block_summary_lines_discount_textColor);
}
.confirmation_block_summary_lines_item .confirmation_block_summary_lines_total {
    color: var(--confirmation_block_summary_lines_total_textColor);
    font-size: var(--confirmation_block_summary_lines_total_textSize);
    font-family: var(--confirmation_block_summary_lines_total_fontFamily);
}

/* directions, cancel and the footer buttons: centred, one line. */
.confirmation_block_directions,
.confirmation_block_cancel,
.confirmation_block_track_button,
.confirmation_block_menu_button {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
}
.confirmation_block_directions_text,
.confirmation_block_cancel_text,
.confirmation_block_track_button_text,
.confirmation_block_menu_button_text {
    overflow: hidden;
    text-overflow: ellipsis;
}
.confirmation_block_directions_icon {
    flex-shrink: 0;
}
.confirmation_block_cancel[aria-disabled="true"] {
    opacity: 0.5;
}

/* The cancel dialog's reasons (AlertDialog single choice) and Other. */
.confirmation_block_cancel_dialog_choices {
    display: flex;
    flex-direction: column;
}
.confirmation_block_cancel_dialog_choice {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    font-size: 16px;
    color: #212121;
    cursor: pointer;
}
.confirmation_block_cancel_dialog_other {
    width: 100%;
    box-sizing: border-box;
    margin-top: 12px;
    padding: 8px 0;
    border: none;
    border-bottom: 2px solid var(--global_colorAccent, #00897b);
    font-size: 16px;
    outline: none;
}
.confirmation_block_cancel_dialog_other_missing {
    border-bottom-color: #d32f2f;
}

/* Order progress steps (Android UtilsOrderTimeline): the order details header's, under
   order_details_block_header_timeline_*. A circle per step with its own background and stroke, the
   check on reached steps, a pulsing halo on the current one; sizes and colours are the keys. */
.order_timeline {
    display: flex;
    align-items: flex-start;
}
.order_timeline_step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.order_timeline_track {
    display: flex;
    align-items: center;
    width: 100%;
}
.order_timeline_connector {
    flex: 1;
    height: var(--order_details_block_header_timeline_connector_height, 3px);
}
.order_timeline_connector[class*="_connector_hidden"] {
    background-color: transparent !important;
}
.order_timeline_icon {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 50%;
    border-style: solid;
    border-width: var(--order_details_block_header_timeline_step_icon_strokeSize, 0);
}
.order_details_block_header_timeline .order_timeline_icon {
    width: var(--order_details_block_header_timeline_step_icon_size, 22px);
    height: var(--order_details_block_header_timeline_step_icon_size, 22px);
}
.order_timeline_check {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: var(--order_details_block_header_timeline_step_done_icon_padding, 4px);
    background-clip: content-box;
    color: var(--order_details_block_header_timeline_step_done_icon_color);
}
.order_timeline_icon_current::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: -1;
    background: var(--order_details_block_header_timeline_step_icon_current_pulse_color);
    animation: order-step-pulse 1.4s ease-out infinite;
}
@keyframes order-step-pulse {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(1.6); opacity: 0; }
}
.order_details_block_header_timeline_step_label {
    text-align: center;
}

/* The order card's rating row and the details rating block (Android order_details_block_rating) */
.orders_block_orders_item_rating {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    border-style: dashed;
    border-width: var(--orders_block_orders_item_rating_strokeSize, 1px);
}
.orders_block_orders_item_rating[role="button"] {
    cursor: pointer;
}
.orders_block_orders_item_rating_label {
    flex: 1;
    min-width: 0;
    text-align: end;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.orders_block_orders_item_rating_not_rated {
    color: var(--orders_block_orders_item_rating_not_rated_textColor);
}
.rating_stars {
    display: inline-flex;
    gap: 3px;
}
.orders_block_orders_item_rating_star_icon {
    width: var(--orders_block_orders_item_rating_star_icon_size, 16px);
    height: var(--orders_block_orders_item_rating_star_icon_size, 16px);
}
.orders_block_orders_item_rating_star_icon_active { color: var(--orders_block_orders_item_rating_star_icon_active_color); }
.orders_block_orders_item_rating_star_icon_inactive { color: var(--orders_block_orders_item_rating_star_icon_inactive_color); }
.order_details_block_rating_star_icon {
    width: var(--order_details_block_rating_star_icon_size, 24px);
    height: var(--order_details_block_rating_star_icon_size, 24px);
}
.order_details_block_rating_star_icon_active { color: var(--order_details_block_rating_star_icon_active_color); }
.order_details_block_rating_star_icon_inactive { color: var(--order_details_block_rating_star_icon_inactive_color); }
.rating_star_fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* The box is the card under the heading, as Android draws it */
.order_details_block_rating {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
.order_details_block_rating_card {
    box-sizing: border-box;
    background-color: var(--order_details_block_rating_background);
    border: var(--order_details_block_rating_strokeSize, 1px) solid var(--order_details_block_rating_strokeColor);
    border-radius: var(--order_details_block_rating_topLeftRadius) var(--order_details_block_rating_topRightRadius) var(--order_details_block_rating_bottomRightRadius) var(--order_details_block_rating_bottomLeftRadius);
    padding: var(--order_details_block_rating_paddingVertical) var(--order_details_block_rating_paddingHorizontal);
}
.order_details_block_rating_rated_row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.order_details_block_rating_rated_feedback {
    font-style: italic;
    margin-top: 12px;
}
.order_details_block_rating_rated_divider {
    height: 1px;
    margin: 12px 0;
    background-color: var(--order_details_block_rating_rated_divider_color);
}
.order_details_block_rating_rated_lock_icon {
    width: var(--order_details_block_rating_rated_lock_icon_size, 14px);
    height: var(--order_details_block_rating_rated_lock_icon_size, 14px);
    color: var(--order_details_block_rating_rated_lock_icon_color);
}
.order_details_block_rating_form {
    display: flex;
    flex-direction: column;
}
.product_catalog_block_order_rating_questions_item_icons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
button.product_catalog_block_order_rating_questions_item_icons_icon {
    border: 0;
    background: none;
    padding: 0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--product_catalog_block_order_rating_questions_item_icons_icon_inactive_color, #e0e0e0);
}
button.product_catalog_block_order_rating_questions_item_icons_icon_active {
    color: var(--product_catalog_block_order_rating_questions_item_icons_icon_active_color, #e8773e);
}
textarea.order_details_block_rating_form_input {
    margin-top: 10px;
    padding: 12px;
    box-sizing: border-box;
    width: 100%;
    resize: vertical;
    font: inherit;
    border-style: solid;
}
button.order_details_block_rating_form_submit {
    margin-top: 12px;
    width: 100%;
    border-style: solid;
    cursor: pointer;
}
button.order_details_block_rating_form_submit:disabled {
    opacity: 0.5;
    cursor: default;
}
.order_details_block_rating_form_note {
    margin-top: 8px;
    text-align: center;
}
.order_details_block_rating_error {
    margin-top: 8px;
    color: #c62828;
}
/* The rating survey as a sheet from the bottom, for an order card */
.order_rating_sheet_backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
}
.order_rating_sheet {
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    animation: order-rating-sheet-in 0.2s ease-out;
}
.order_rating_sheet_grabber {
    display: block;
    width: 36px;
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.15);
}
button.product_catalog_block_order_rating_actions_dismiss {
    width: 100%;
    margin-top: 8px;
    border-style: solid;
    cursor: pointer;
}
@keyframes order-rating-sheet-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* The active orders card (Android product_catalog_block_active_orders_item): its progress
   steps take the card's own timeline keys */
.product_catalog_block_active_orders_item[role="button"] {
    cursor: pointer;
}
.product_catalog_block_active_orders_item_timeline .order_timeline_icon {
    width: var(--product_catalog_block_active_orders_item_timeline_step_icon_size, 20px);
    height: var(--product_catalog_block_active_orders_item_timeline_step_icon_size, 20px);
    border-width: var(--product_catalog_block_active_orders_item_timeline_step_icon_strokeSize, 0);
}
.product_catalog_block_active_orders_item_timeline .order_timeline_connector {
    height: var(--product_catalog_block_active_orders_item_timeline_connector_height, 2px);
}
.product_catalog_block_active_orders_item_timeline .order_timeline_check {
    padding: var(--product_catalog_block_active_orders_item_timeline_step_done_icon_padding, 4px);
    color: var(--product_catalog_block_active_orders_item_timeline_step_done_icon_color);
}
.product_catalog_block_active_orders_item_timeline .order_timeline_icon_current::before {
    background: var(--product_catalog_block_active_orders_item_timeline_step_icon_current_pulse_color);
}
.product_catalog_block_active_orders_item_timeline_step_label {
    text-align: center;
}
.product_catalog_block_order_rating_header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.product_catalog_block_order_rating_header_title {
    flex: 1;
    min-width: 0;
}

/* The cart's items block (Android cart_block_items_background, _stroke*,
   _radius): its corners clip the rows; the line between rows is
   cart_block_items_divider, 0px high unless the app sets it. */
.cart_block_items {
    overflow: hidden;
}
.cart_block_items_divider {
    height: var(--cart_block_items_divider_height, 0px);
    background-color: var(--cart_block_items_divider_color, transparent);
    margin-inline: var(--cart_block_items_divider_marginHorizontal, 0px);
}

/* item_details_block_variations_list and an add-on group's
   item_details_block_addons_group_list_addons: the builder's rules give each
   list its box; it clips its rows to its corners, and <list>_divider is the
   line between rows (Android ListDivider), 0px high unless the app sets it.
   In a horizontal list the line has no width, so it draws nothing. */
.item_details_block_variations_list,
.item_details_block_addons_group_list_addons {
    overflow: hidden;
}
.item_details_block_variations_list_divider {
    flex: none;
    height: var(--item_details_block_variations_list_divider_height, 0px);
    background-color: var(--item_details_block_variations_list_divider_color, transparent);
    margin-inline: var(--item_details_block_variations_list_divider_marginHorizontal, 0px);
}
.item_details_block_addons_group_list_addons_divider {
    flex: none;
    height: var(--item_details_block_addons_group_list_addons_divider_height, 0px);
    background-color: var(--item_details_block_addons_group_list_addons_divider_color, transparent);
    margin-inline: var(--item_details_block_addons_group_list_addons_divider_marginHorizontal, 0px);
}

/* cart_block_checkout_button_total_enable: the cart's total in the checkout
   button, between the icon and the text; the builder's rules carry its colour,
   size and font. */
.cart_block_checkout_button_total {
    flex: none;
    white-space: nowrap;
    margin-inline: var(--cart_block_checkout_button_total_marginHorizontal, 8px);
}

/* Screens that scroll inside themselves are as tall as the visible screen.
   100vh on a phone is the height with the browser's address bar hidden, so
   while the bar shows, the screen ran below it: its pinned footer (the cart's
   checkout bar, the add to cart bar) sat off screen, and the page scrolled
   behind the screen's own scroll, which made scrolling jumpy. 100dvh follows
   the bar; browsers without it keep the 100vh above. */
.branches_layout,
.coupons_layout,
.product_catalog_block_service_type_modal_backdrop,
.product_catalog_layout,
.product_catalog_layout_overlay,
.item_details_layout,
.address_layout,
.cart_layout,
.checkout_layout,
.orders_layout,
.confirmation_layout {
    height: 100dvh;
}
.cart_layout,
.checkout_layout,
.item_details_layout,
.confirmation_layout,
.product_catalog_layout,
.product_catalog_layout_overlay {
    overscroll-behavior-y: contain;
}

/* ---- Loyalty (Android loyalty_layout and its blocks; docs/specs/loyalty-screen.md
   in mobstep): what the layout XML and drawables fix; the builder writes every
   key. The header does not collapse here: toolbar, balance and tabs over the
   header picture, then the content, in the page's flow. ---- */
.loyalty_layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/* The buttons' reset weighs nothing, so the builder's class rules (font, border) win */
:where(.loyalty_layout) button {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.loyalty_layout_header_holder {
    background-color: var(--loyalty_layout_header_background);
    border-radius: 0 0 var(--loyalty_layout_header_radius) var(--loyalty_layout_header_radius);
    padding-bottom: var(--loyalty_layout_header_paddingBottom);
    overflow: hidden;
    position: relative;
}
/* The header picture fills the whole header (nothing collapses on the web), top end, cropped */
img.loyalty_layout_header_background_image {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.loyalty_layout_header_holder > :not(img) {
    position: relative;
}
.loyalty_layout_toolbar {
    height: 56px;
    box-sizing: border-box;
}
.loyalty_layout_header_position_header_center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.loyalty_layout_header_position_header_end {
    margin-left: auto;
}
.loyalty_layout_summary_position_summary,
.loyalty_layout_tabs_position_tabs {
    padding: 0 var(--loyalty_layout_header_paddingHorizontal);
}
/* Back: block_back with the loyalty keys, its icon in a round holder */
.loyalty_layout .loyalty_block_back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--loyalty_block_back_size);
    height: var(--loyalty_block_back_size);
    margin: 0 var(--loyalty_block_back_marginHorizontal);
    padding: 0;
    border-radius: 50%;
    background-color: var(--loyalty_block_back_background);
}
.loyalty_layout .loyalty_block_back_icon {
    width: var(--loyalty_block_back_icon_size) !important;
    height: var(--loyalty_block_back_icon_size) !important;
}
.loyalty_block_title {
    white-space: nowrap;
}
.loyalty_block_balance_row {
    display: flex;
    align-items: baseline;
}
.loyalty_block_balance_amount {
    line-height: 1;
}
.loyalty_block_balance_unit {
    margin-inline-start: var(--loyalty_block_balance_unit_marginStart);
}
.loyalty_block_balance_description_row {
    display: flex;
    align-items: center;
    justify-content: var(--loyalty_block_balance_description_gravity, flex-start);
    margin-top: var(--loyalty_block_balance_description_marginTop, 8px);
}
.loyalty_block_balance_description_icon {
    flex-shrink: 0;
    object-fit: contain;
    width: var(--loyalty_block_balance_description_icon_size, 18px);
    height: var(--loyalty_block_balance_description_icon_size, 18px);
    margin-inline-end: var(--loyalty_block_balance_description_icon_marginEnd, 8px);
}
.loyalty_block_balance_description {
    flex: 1 1 0;
    min-width: 0;
    color: var(--loyalty_block_balance_description_textColor);
    font-size: var(--loyalty_block_balance_description_textSize);
    text-align: var(--loyalty_block_balance_description_alignment, start);
}
.loyalty_block_tabs {
    display: flex;
    border-radius: var(--loyalty_block_tabs_radius);
}
.loyalty_layout .loyalty_block_tabs_tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.loyalty_layout .loyalty_block_tabs_tab.loyalty_block_tabs_tab_selected {
    background-color: var(--loyalty_block_tabs_tab_selected_background);
    color: var(--loyalty_block_tabs_tab_selected_textColor);
}

/* Rewards: the block is the grid (loyalty_block_rewards_columns); section rows span it */
.loyalty_block_rewards {
    align-items: start;
}
.loyalty_block_rewards_section,
.loyalty_block_rewards_message {
    grid-column: 1 / -1;
}
.loyalty_block_rewards_section {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: var(--loyalty_block_rewards_section_marginTop) var(--loyalty_block_rewards_item_margin) var(--loyalty_block_rewards_section_marginBottom);
}
.loyalty_block_rewards_message {
    margin: var(--loyalty_block_rewards_item_margin);
    text-align: center;
}
.loyalty_block_rewards_item {
    display: flex;
    flex-direction: column;
    border-style: solid;
    min-width: 0;
}
.loyalty_block_rewards_item_image_holder {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    box-sizing: border-box;
}
.loyalty_block_rewards_item_image_holder > img {
    width: 100%;
    height: 100%;
    object-fit: var(--loyalty_block_rewards_item_image_scaleType, contain);
    display: block;
}
.loyalty_block_rewards_item_locked .loyalty_block_rewards_item_image_holder > img {
    opacity: .6;
}
.loyalty_block_rewards_item_cost {
    position: absolute;
    top: var(--loyalty_block_rewards_item_cost_margin);
    inset-inline-start: var(--loyalty_block_rewards_item_cost_margin);
    margin: 0 !important;
}
.loyalty_block_rewards_item_cost.loyalty_block_rewards_item_cost_locked {
    background-color: var(--loyalty_block_rewards_item_cost_locked_background);
    color: var(--loyalty_block_rewards_item_cost_locked_textColor);
}
.loyalty_block_rewards_item_lock {
    position: absolute;
    top: var(--loyalty_block_rewards_item_cost_margin);
    inset-inline-end: var(--loyalty_block_rewards_item_cost_margin);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.loyalty_block_rewards_item_lock .global_tinted {
    background-color: currentColor !important;
}
.loyalty_block_rewards_item_name {
    margin-top: var(--loyalty_block_rewards_item_name_marginTop);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Two lines always, so the cards of a row line up */
.loyalty_block_rewards_item_description {
    margin-top: var(--loyalty_block_rewards_item_description_marginTop);
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.loyalty_layout .loyalty_block_rewards_item_redeem,
.loyalty_layout .loyalty_block_rewards_item_redeemed {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--loyalty_block_rewards_item_redeem_marginTop);
    height: var(--loyalty_block_rewards_item_redeem_height);
    border-radius: var(--loyalty_block_rewards_item_redeem_radius);
}
.loyalty_layout .loyalty_block_rewards_item_redeemed {
    cursor: default;
}
/* The loyalty_block_rewards_item_progress keys style the bar (its track, height, radius) and the text under it */
.loyalty_block_rewards_item_progress_holder {
    margin-top: var(--loyalty_block_rewards_item_redeem_marginTop);
    min-height: var(--loyalty_block_rewards_item_redeem_height);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.loyalty_block_rewards_item_progress_bar {
    overflow: hidden;
}
.loyalty_block_rewards_item_progress_bar i {
    display: block;
    height: 100%;
    background-color: var(--loyalty_block_rewards_item_progress_color);
}
.loyalty_block_rewards_item_progress_text {
    margin-top: var(--loyalty_block_rewards_item_description_marginTop);
    color: var(--loyalty_block_rewards_item_progress_textColor);
    font-size: var(--loyalty_block_rewards_item_progress_textSize);
    font-family: var(--loyalty_block_rewards_item_progress_fontFamily);
}

/* History: tiles, filters, then a card per month */
.loyalty_block_history_summary_tiles {
    display: flex;
    gap: var(--loyalty_block_history_summary_tiles_item_margin);
}
.loyalty_block_history_summary_tiles_item {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
}
.loyalty_block_history_summary_tiles_item_value.loyalty_block_history_summary_tiles_earned_value {
    color: var(--loyalty_block_history_summary_tiles_earned_value_textColor);
}
.loyalty_block_history_summary_tiles_item_value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.loyalty_block_history_summary_filters {
    display: flex;
    gap: var(--loyalty_block_history_summary_filters_item_marginEnd);
    margin-top: var(--loyalty_block_history_summary_filters_marginTop);
}
.loyalty_layout .loyalty_block_history_summary_filters_item {
    display: flex;
    align-items: center;
    border-style: solid;
    white-space: nowrap;
}
.loyalty_layout .loyalty_block_history_summary_filters_item.loyalty_block_history_summary_filters_item_selected {
    background-color: var(--loyalty_block_history_summary_filters_item_selected_background);
    border-color: var(--loyalty_block_history_summary_filters_item_selected_background);
    color: var(--loyalty_block_history_summary_filters_item_selected_textColor);
}
.loyalty_block_history_month {
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: var(--loyalty_block_history_month_marginTop) 0 var(--loyalty_block_history_month_marginBottom);
}
.loyalty_block_history_message {
    margin-top: var(--loyalty_block_history_month_marginTop);
    text-align: center;
}
/* A month's rows share one card: its first and last rows round it */
.loyalty_layout .loyalty_block_history_item {
    border-radius: 0;
    padding: 0;
}
.loyalty_layout .loyalty_block_history_item_first {
    border-top-left-radius: var(--loyalty_block_history_item_radius);
    border-top-right-radius: var(--loyalty_block_history_item_radius);
}
.loyalty_layout .loyalty_block_history_item_last {
    border-bottom-left-radius: var(--loyalty_block_history_item_radius);
    border-bottom-right-radius: var(--loyalty_block_history_item_radius);
}
.loyalty_block_history_item_divider {
    height: var(--loyalty_block_history_item_divider_size);
    background-color: var(--loyalty_block_history_item_divider_color);
}
.loyalty_block_history_item_row {
    display: flex;
    align-items: center;
    padding: var(--loyalty_block_history_item_paddingVertical) var(--loyalty_block_history_item_paddingHorizontal);
}
.loyalty_block_history_item_icon_holder {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--loyalty_block_history_item_icon_holder_size);
    height: var(--loyalty_block_history_item_icon_holder_size);
    border-radius: var(--loyalty_block_history_item_icon_holder_radius);
    margin-inline-end: var(--loyalty_block_history_item_icon_marginEnd);
}
.loyalty_block_history_item_icon_holder .global_tinted {
    width: var(--loyalty_block_history_item_icon_size);
    height: var(--loyalty_block_history_item_icon_size);
    background-color: currentColor !important;
}
.loyalty_block_history_item_texts {
    flex: 1;
    min-width: 0;
}
.loyalty_block_history_item_title,
.loyalty_block_history_item_text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.loyalty_block_history_item_end {
    text-align: end;
    margin-inline-start: var(--loyalty_block_history_item_icon_marginEnd);
}
.loyalty_block_history_item_amount {
    line-height: 1;
}
.loyalty_block_history_more {
    min-height: 24px;
}
/* Loading: a ring in the block's loader colour */
.loyalty_block_rewards_loading,
.loyalty_block_history_loading {
    display: flex !important;
    justify-content: center;
    padding-top: 60px;
}
.loyalty_block_rewards_loader,
.loyalty_block_history_loader {
    width: 28px;
    height: 28px;
    margin: 0 auto;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--loyalty_block_rewards_loader_color, currentColor);
    border-right-color: var(--loyalty_block_rewards_loader_color, currentColor);
    animation: loyalty-spin .8s linear infinite;
}
.loyalty_block_history_loader {
    border-top-color: var(--loyalty_block_history_loader_color, currentColor);
    border-right-color: var(--loyalty_block_history_loader_color, currentColor);
}
@keyframes loyalty-spin {
    to { transform: rotate(360deg); }
}

/* activation: a screen of its own, laid out as the login's (mobstep docs/specs/screen-split.md) */
.activation_layout {
    display: flex;
    flex-direction: column;
    height:100dvh !important;
    overflow: scroll;
    position: relative;
}
.activation_layout_position_background {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.activation_layout_position_background:empty {
    display: none;
}
img.activation_block_background {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: var(--activation_block_background_alpha, 1);
}
.activation_layout > .activation_layout_position_top,
.activation_layout > .activation_layout_position_content,
.activation_layout > .activation_layout_position_bottom {
    position: relative;
    z-index: 1;
}
.activation_layout_positions_holder {
    padding-top: var(--activation_layout_paddingVertical);
    padding-bottom: var(--activation_layout_paddingVertical);
    padding-right: var(--activation_layout_paddingHorizontal);
    padding-left: var(--activation_layout_paddingHorizontal);
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 952px;
    position: absolute !important;
    width: 100%;
}
.activation_block_background_holder {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}
img.activation_block_background {
    max-width: 100%;
    height: 100%;
    object-fit: cover !important;
    opacity: var(--activation_block_background_alpha);
}
.activation_layout_position_content_holder{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.activation_block_logo img {
    max-width: 100%;
}
.activation_block_logo_holder {
    display: flex;
    width: 100%;
    justify-content: var(--activation_block_logo_gravity, center);
}
.activation_layout_position_content {
    align-content: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Android activation_layout: weight 1, gravity center. */
    justify-content: center;
}
.activation_layout_position_top {
    align-content: center;
    /* Android activation_layout: top and bottom wrap their blocks; content takes the rest. */
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.activation_layout_position_bottom {
    align-content: center;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
.activation_block_title {
    /* The builder's activation_block_title_fontFamily is the face; no synthetic bold. */
    font-weight: normal;
}
.activation_block_title {
    text-align: center;
}

/* address_form: a screen of its own, laid out as the address's (mobstep docs/specs/screen-split.md) */
.item_details_layout_toolbar,
.product_catalog_layout_overlay_toolbar,
.address_form_layout_toolbar,
.branches_layout_toolbar,
.cart_layout_toolbar,
.checkout_layout_toolbar,
.confirmation_layout_toolbar,
.coupons_layout_toolbar,
.loyalty_layout_toolbar,
.orders_layout_toolbar {
    direction: ltr;
}
.address_form_layout {
    height:100vh;
    overflow: scroll;
}
.address_form_layout_toolbar {
    display: flex;
    height: 55px;
    overflow: hidden;
}
.address_form_layout_toolbar_positions {
    align-items: center;
    justify-content: center;
}
.address_form_layout_header_position_header_start,
.address_form_layout_header_position_header_end {
    flex: 0 0 auto;
    min-width: 50px;
}
.address_form_layout_header_position_header_start {
    text-align: start;
}
.address_form_layout_header_position_header_center {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
}
.address_form_layout_header_position_header_center {
    flex: 1;
    text-align: center;
}
.address_form_layout_header_position_header_end{
    min-width: 50px;
    text-align: end;
}
.address_form_layout_content {
    padding-bottom: 80px;
}
.address_form_layout_content_position_content{
    overflow: hidden;
    height: 100%;
}
.address_form_layout_footer_holder {
    position: absolute  !important;
    bottom: var(--address_form_layout_footer_marginVertical);
    width: 100%;
    z-index: 10000;
}
.address_form_layout_footer {
    width: auto;
    border-style: solid;
}
.address_form_layout_footer_positions {
    display: flex;
}
.address_form_layout_footer_position_footer_start {
    text-align: start;

}
.address_form_layout_footer_position_footer_center {
    text-align: center;
    flex: 1;
}
.address_form_layout_footer_position_footer_end{
    text-align: end;
}
.branches_layout,
.coupons_layout,
.product_catalog_block_service_type_modal_backdrop,
.product_catalog_layout,
.product_catalog_layout_overlay,
.item_details_layout,
.address_form_layout,
.cart_layout,
.checkout_layout,
.orders_layout,
.confirmation_layout {
    height: 100dvh;
}

/* order_details: a screen of its own, laid out as the orders' (mobstep docs/specs/screen-split.md) */
.item_details_layout_toolbar,
.product_catalog_layout_overlay_toolbar,
.address_layout_toolbar,
.branches_layout_toolbar,
.cart_layout_toolbar,
.checkout_layout_toolbar,
.confirmation_layout_toolbar,
.coupons_layout_toolbar,
.loyalty_layout_toolbar,
.order_details_layout_toolbar {
    direction: ltr;
}
.order_details_layout {
    height:100vh;
    overflow: scroll;
}
.order_details_layout_toolbar {
    display: flex;
    height: 55px;
    overflow: hidden;
}
.order_details_layout_toolbar_positions {
    align-items: center;
    justify-content: center;
}
.order_details_layout_header_position_header_start,
.order_details_layout_header_position_header_end {
    flex: 0 0 auto;
    min-width: 50px;
}
.order_details_layout_header_position_header_start {
    text-align: start;
}
.order_details_layout_header_position_header_end {
    text-align: end;
}
.order_details_layout_header_position_header_center {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
}
.order_details_block_title {
    overflow: hidden;
    text-overflow: ellipsis;
}
.order_details_layout_content_position_content {
    overflow: hidden;
}
.order_details_layout .order_details_block_items,
.order_details_layout .order_details_block_summary {
    background-color: transparent;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.order_details_layout .order_details_block_items_list {
    display: flex;
    flex-direction: column;
    background-color: var(--order_details_block_items_background);
    border: var(--order_details_block_items_strokeSize, 0) solid var(--order_details_block_items_strokeColor, transparent);
    border-radius: var(--order_details_block_items_radius, 0);
    padding: var(--order_details_block_items_paddingVertical, 0) var(--order_details_block_items_paddingHorizontal, 0);
    box-shadow: var(--order_details_block_items_elevation, 0) var(--order_details_block_items_elevation, 0) var(--order_details_block_items_elevation, 0) var(--order_details_block_items_elevation, 0) #eee;
}
.order_details_layout .order_details_block_summary_card {
    background-color: var(--order_details_block_summary_background);
    border: var(--order_details_block_summary_strokeSize, 0) solid var(--order_details_block_summary_strokeColor, transparent);
    border-radius: var(--order_details_block_summary_radius, 0);
    padding: var(--order_details_block_summary_paddingVertical, 0) var(--order_details_block_summary_paddingHorizontal, 0);
    box-shadow: var(--order_details_block_summary_elevation, 0) var(--order_details_block_summary_elevation, 0) var(--order_details_block_summary_elevation, 0) var(--order_details_block_summary_elevation, 0) #eee;
}
.branches_layout,
.coupons_layout,
.product_catalog_block_service_type_modal_backdrop,
.product_catalog_layout,
.product_catalog_layout_overlay,
.item_details_layout,
.address_layout,
.cart_layout,
.checkout_layout,
.order_details_layout,
.confirmation_layout {
    height: 100dvh;
}

/* Android: option and extra rows clip their icons to the row's corners. */
.item_details_block_variations_item,
.item_details_block_addons_group_item {
    overflow: hidden;
}

/* Side by side with Android on Om Hassan. */

/* The side menu's icon padding is CardView contentPadding: inside the size. */
.product_catalog_layout_side_menu img {
    box-sizing: border-box;
}
/* A category's picture starts at the top of its row, whatever its name's length. */
.product_catalog_block_categories {
    align-items: start;
}
/* Android's text view takes its direction from the text, not the bar's. */
.product_catalog_block_cart_subtotal {
    unicode-bidi: plaintext;
}
/* The label takes the row's room and starts at the row's start. */
.cart_block_total_label {
    justify-content: flex-start;
    text-align: start;
}
/* layout_marginEnd: the icon keeps its size, the margin only parts it from the text. */
.cart_block_service .cart_block_service_icon {
    flex-shrink: 0;
    margin: 0;
    margin-inline-end: var(--cart_block_service_icon_margin, 0);
    object-fit: contain;
}
/* The picture fills the slot; left to fill-available it took its own height. */
.item_details_block_images .item_details_block_images_image {
    display: block;
    width: 100%;
    height: var(--item_details_block_images_height);
    object-fit: var(--item_details_block_images_image_scaleType, cover);
}
/* A listing card's width is its slot: the card sits inside it, margin and padding included. */
.product_catalog_block_listing_group_list_list .product_catalog_block_items_item {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: calc(var(--product_catalog_block_listing_group_list_items_item_width, var(--product_catalog_block_items_item_width)) - 2 * var(--product_catalog_block_items_item_margin, 0px));
    margin: var(--product_catalog_block_items_item_margin, 0px);
}
.product_catalog_block_listing_group_list_list .product_catalog_block_items_item_image_holder,
.product_catalog_block_listing_group_list_list .product_catalog_block_items_item_image {
    width: 100%;
}
/* Android keeps 8dp between the name and the number, and sizes both by their padding and text.
   Two classes, because the tenant's app_style.css loads later and sets every
   login_block_phone_input's margin. */
.login_block_phone .login_block_phone_name {
    margin: 0 var(--login_block_phone_input_margin) 8px;
}
.login_block_phone_name,
.login_block_phone_holder {
    box-sizing: border-box;
    min-height: calc(2 * var(--login_block_phone_input_paddingVertical, 16px) + 1.6em);
}
/* The loyalty card: the description takes the row's room, the points only their own. */
.product_catalog_block_loyalty_program_description {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}
.product_catalog_block_loyalty_program_credit_points {
    flex: 0 0 auto;
    width: auto;
}
.product_catalog_block_loyalty_program .product_catalog_block_loyalty_program_background_image {
    height: 100%;
}
/* A banner keeps Android's fixed height and crops to it. */
.product_catalog_block_offers .product_catalog_block_offers_offer img {
    height: var(--product_catalog_block_offers_skeleton_height, auto);
    object-fit: cover;
}
/* Add-ons and the note take the content's width, and their titles start at its start. */
.item_details_block_addons_group,
.item_details_block_addons_groups,
.item_details_block_addons_group_list,
.item_details_block_addons_group_list_addons,
.item_details_block_note {
    width: 100%;
    box-sizing: border-box;
}
.item_details_block_addons_group_item {
    width: 100%;
    box-sizing: border-box;
}
.item_details_block_addons_group_title {
    text-align: var(--item_details_block_addons_group_title_alignment, start);
}
.item_details_block_note_title {
    display: block;
    width: 100%;
    text-align: start;
}
.item_details_block_note .item_details_block_note_input {
    width: 100%;
    margin: 0;
}
/* Android's Arabic lines sit tighter than the site's default 1.4. */
.item_details_block_short_description {
    line-height: 1.2;
}
/* The selector's item margin is horizontal only: the row keeps its own height. */
.product_catalog_block_service_selection .product_catalog_block_service_selection_services_item {
    margin-top: 0;
    margin-bottom: 0;
}
.product_catalog_block_offers img.product_catalog_block_offers_offer {
    height: var(--product_catalog_block_offers_skeleton_height, auto);
    object-fit: cover;
}
.product_catalog_block_login_logout_icon {
    box-sizing: border-box;
}
/* The number sits in the middle of the stepper, as the buttons beside it. */
.cart_block_items_item_quantity_text {
    display: flex;
    align-items: center;
    justify-content: center;
}
.login_block_text {
    line-height: 1.2;
}

/* Android keeps the footer at the screen's bottom: a short item's content takes the rest. */
.item_details_layout {
    display: flex;
    flex-direction: column;
}
.item_details_layout > * {
    flex-shrink: 0;
}
.item_details_layout .item_details_layout_content {
    flex: 1 0 auto;
}

/* A measured item's stepper reads "0.75 kg", wider than the digit the _width
   keys size it for (ADR 0016). Pieces keep their exact layout. */
span.global_quantity_measured {
    flex: none;
    width: auto;
    padding-left: 6px;
    padding-right: 6px;
    white-space: nowrap;
}

/* product_catalog_block_items_feed (Android ProductCatalogItemsFeed): the
   categories in content_top sit outside Android's scroll view, so they stay on
   screen while the list moves. */
.product_catalog_layout_items_feed .product_catalog_layout_content_top_position_content_top {
    position: sticky;
    top: 0;
    z-index: 3;
}
.product_catalog_layout_items_feed .product_catalog_block_categories {
    display: flex;
}
.product_catalog_layout_items_feed .product_catalog_block_categories_item {
    width: auto;
}
.product_catalog_block_items_feed_section_header {
    display: flex;
    align-items: center;
}
.product_catalog_block_items_feed_section_header_title {
    flex: 1;
    min-width: 0;
}
/* A feed row (Android): the info column sits at the card's middle, and the
   add to cart keeps its size at add_to_cart_gravity. */
.product_catalog_layout_items_feed .product_catalog_block_items_item_info {
    align-self: center;
}
.product_catalog_layout_items_feed .product_catalog_block_items_item_add_to_cart {
    align-self: var(--product_catalog_block_items_item_add_to_cart_gravity);
}
.product_catalog_layout_items_feed .product_catalog_block_items_item_image {
    display: block;
}

/* Item details content as a sheet over the picture (Android mobstep_android_core#93):
   item_details_layout_content_overlapTop pulls it up, the top corners round, and its
   background covers the picture's bottom edge. The defaults keep the flat layout. */
.item_details_layout .item_details_layout_content {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * var(--item_details_layout_content_overlapTop, 0px));
    background-color: var(--item_details_layout_content_background, transparent);
    border-top-left-radius: var(--item_details_layout_content_topLeftRadius, 0px);
    border-top-right-radius: var(--item_details_layout_content_topRightRadius, 0px);
}
/* checkout_block_order_options (Android mobstep_android_core#94): a card per
   question. Colours, sizes and spacing come from the tenant stylesheet. */
.checkout_block_order_options {
    display: flex;
    flex-direction: column;
}
.checkout_block_order_options_item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: var(--checkout_block_order_options_item_marginVertical, 6px) var(--checkout_block_order_options_item_marginHorizontal, 6px);
    padding: var(--checkout_block_order_options_item_paddingVertical, 16px) var(--checkout_block_order_options_item_paddingHorizontal, 16px);
    background-color: var(--checkout_block_order_options_item_background, #fff);
    border: var(--checkout_block_order_options_item_strokeSize, 1px) solid var(--checkout_block_order_options_item_strokeColor, #e5e5e5);
    border-radius: var(--checkout_block_order_options_item_radius, 14px);
}
fieldset.checkout_block_order_options_item legend {
    float: left;
    width: 100%;
    padding: 0;
}
.checkout_block_order_options_item_toggle {
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}
.checkout_block_order_options_item_texts {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.checkout_block_order_options_item_title {
    font-weight: 700;
}
.checkout_block_order_options_item_subtitle {
    display: block;
    margin-top: var(--checkout_block_order_options_item_subtitle_marginTop, 2px);
}
.checkout_block_order_options_item_icon_background {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--checkout_block_order_options_item_icon_background_size, 44px);
    height: var(--checkout_block_order_options_item_icon_background_size, 44px);
    margin-inline-end: var(--checkout_block_order_options_item_icon_marginEnd, 10px);
    border-radius: 50%;
    background-color: var(--checkout_block_order_options_item_icon_background, #ebebeb);
}
.checkout_block_order_options_item_icon {
    width: var(--checkout_block_order_options_item_icon_size, 22px);
    height: var(--checkout_block_order_options_item_icon_size, 22px);
    object-fit: contain;
}
.checkout_block_order_options_item_choices {
    display: flex;
    flex-direction: column;
    margin-top: var(--checkout_block_order_options_item_choices_marginTop, 8px);
}
.checkout_block_order_options_item_choices_item {
    display: flex;
    align-items: center;
    gap: var(--checkout_block_order_options_item_choices_item_text_paddingStart, 8px);
    padding: var(--checkout_block_order_options_item_choices_item_paddingVertical, 8px) 0;
    cursor: pointer;
}
.checkout_block_order_options_item_choices_item_radio {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--checkout_block_order_options_item_choices_item_radio_selected_color, #171717);
}
.checkout_block_order_options_item_switch {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    position: relative;
    width: 51px;
    height: 31px;
    margin: 0;
    margin-inline-start: var(--checkout_block_order_options_item_switch_marginStart, 10px);
    border-radius: 999px;
    background-color: var(--checkout_block_order_options_item_switch_trackColor, #e5e5e5);
    cursor: pointer;
    transition: background-color .15s ease;
}
.checkout_block_order_options_item_switch::after {
    content: "";
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background-color: var(--checkout_block_order_options_item_switch_thumbColor, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: inset-inline-start .15s ease;
}
.checkout_block_order_options_item_switch:checked {
    background-color: var(--checkout_block_order_options_item_switch_selected_trackColor, #171717);
}
.checkout_block_order_options_item_switch:checked::after {
    inset-inline-start: 22px;
    background-color: var(--checkout_block_order_options_item_switch_selected_thumbColor, #fff);
}
/* product_catalog_block_greeting (Android mobstep_android_core#92): the time-of-day
   line over a title. Colours, sizes and paddings come from the tenant stylesheet. */
.product_catalog_block_greeting {
    display: flex;
    flex-direction: column;
    align-items: var(--product_catalog_block_greeting_gravity, start);
    text-align: var(--product_catalog_block_greeting_gravity, start);
}
.product_catalog_block_greeting_message {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.product_catalog_block_greeting_title {
    margin: 0;
    margin-top: var(--product_catalog_block_greeting_title_marginTop, 2px);
    line-height: 1.15;
}

/* Add-ons (Android mobstep_android_core c9249b1): an outlined box, rounded
   photos and the "N added" pill at the end of the group title. Defaults are
   Android's: no outline, square photos, pill hidden unless count_enable. */
.item_details_block_addons_group_item_indicator {
    box-sizing: border-box;
    border: var(--item_details_block_addons_group_item_indicator_strokeSize, 0px) solid var(--item_details_block_addons_group_item_indicator_strokeColor, transparent);
}
.item_details_block_addons_group_item_indicator.item_details_block_addons_group_item_indicator_selected {
    border-color: var(--item_details_block_addons_group_item_indicator_selected_strokeColor, transparent);
}
.item_details_block_addons_group_item_icon {
    border-radius: var(--item_details_block_addons_group_item_icon_radius, 0px);
    overflow: hidden;
}
.item_details_block_addons_group_title_row {
    align-items: center;
    width: 100%;
}
.item_details_block_addons_group_count {
    flex-shrink: 0;
    white-space: nowrap;
    color: var(--item_details_block_addons_group_count_textColor, #171717);
    background-color: var(--item_details_block_addons_group_count_background, #f5f5f5);
    border-radius: var(--item_details_block_addons_group_count_radius, 100px);
    font-size: var(--item_details_block_addons_group_count_textSize, 12px);
    font-family: var(--item_details_block_addons_group_count_fontFamily, inherit);
    font-weight: 700;
    padding: var(--item_details_block_addons_group_count_paddingVertical, 2px) var(--item_details_block_addons_group_count_paddingHorizontal, 8px);
}

/* start search -- mirrors mobstep_android_core Search (search_layout and the search_block_*
   layouts, docs/specs/search-screen.md in mobstep). Every value falls back to the core's
   default for tenants published before the builder knew the screen. */
.search_layout {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background-color: var(--search_layout_background, #ffffff);
}
.search_layout_toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: var(--search_layout_toolbar_paddingVertical, 8px) var(--search_layout_toolbar_paddingHorizontal, 8px);
    background-color: var(--search_layout_toolbar_background, #ffffff);
}
.search_layout_toolbar_start, .search_layout_toolbar_end {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
.search_layout_toolbar_start .block_back, .search_layout_toolbar_start button {
    width: var(--search_block_back_width, 40px);
    height: var(--search_block_back_height, 40px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.search_layout_toolbar_center {
    flex: 1 1 auto;
    min-width: 0;
}
.search_layout_content_position_content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin: var(--search_layout_content_marginVertical, 8px) var(--search_layout_content_marginHorizontal, 0px);
}
.search_icon {
    display: inline-block;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.search_block_bar {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: var(--search_block_bar_height, 44px);
    margin: 0 var(--search_block_bar_marginHorizontal, 4px);
    padding: 0 var(--search_block_bar_paddingHorizontal, 10px);
    background-color: var(--search_block_bar_background, #f5f5f5);
    border: var(--search_block_bar_strokeSize, 0px) solid var(--search_block_bar_strokeColor, #e5e5e5);
    border-radius: var(--search_block_bar_radius, 14px);
}
.search_block_bar_icon {
    width: var(--search_block_bar_icon_size, 18px);
    height: var(--search_block_bar_icon_size, 18px);
    color: var(--search_block_bar_icon_color, #737373);
}
.search_block_bar_input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0 var(--search_block_bar_input_marginHorizontal, 8px);
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--search_block_bar_input_textColor, #171717);
    font-size: var(--search_block_bar_input_textSize, 14px);
    font-family: var(--search_block_bar_input_fontFamily, inherit);
}
.search_block_bar_input::placeholder {
    color: var(--search_block_bar_input_hintColor, #737373);
}
.search_block_bar_input::-webkit-search-cancel-button {
    display: none;
}
.search_block_bar_clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}
.search_block_bar_clear_icon {
    width: var(--search_block_bar_clear_icon_size, 18px);
    height: var(--search_block_bar_clear_icon_size, 18px);
    color: var(--search_block_bar_clear_icon_color, #737373);
}

.search_block_recent {
    margin: var(--search_block_recent_marginVertical, 8px) var(--search_block_recent_marginHorizontal, 16px);
}
.search_block_recent_header {
    display: flex;
    align-items: center;
}
.search_block_recent_title {
    flex: 1;
    color: var(--search_block_recent_title_textColor, #171717);
    font-size: var(--search_block_recent_title_textSize, 16px);
    font-family: var(--search_block_recent_title_fontFamily, inherit);
    font-weight: 700;
}
.search_block_recent_clear {
    padding: 4px 0 4px 8px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--search_block_recent_clear_textColor, #171717);
    font-size: var(--search_block_recent_clear_textSize, 14px);
    font-family: var(--search_block_recent_clear_fontFamily, inherit);
}
.search_block_recent_item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--search_block_recent_item_paddingVertical, 10px) 0;
    border: none;
    background: none;
    cursor: pointer;
    text-align: start;
}
.search_block_recent_item_icon {
    width: var(--search_block_recent_item_icon_size, 18px);
    height: var(--search_block_recent_item_icon_size, 18px);
    color: var(--search_block_recent_item_icon_color, #737373);
}
.search_block_recent_item_text {
    flex: 1;
    min-width: 0;
    margin-inline-start: var(--search_block_recent_item_text_marginStart, 10px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--search_block_recent_item_text_textColor, #171717);
    font-size: var(--search_block_recent_item_text_textSize, 14px);
    font-family: var(--search_block_recent_item_text_fontFamily, inherit);
}

.search_block_results {
    display: flex;
    flex-direction: column;
}
.search_block_results_centered {
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 50dvh;
}
.search_block_results_count {
    margin: var(--search_block_results_count_marginVertical, 6px) var(--search_block_results_count_marginHorizontal, 16px);
    color: var(--search_block_results_count_textColor, #737373);
    font-size: var(--search_block_results_count_textSize, 13px);
    font-family: var(--search_block_results_count_fontFamily, inherit);
}
.search_block_results_list {
    display: grid;
    margin: 0 var(--product_catalog_block_items_marginHorizontal, 5px);
    padding-bottom: var(--product_catalog_block_items_paddingVertical, 24px);
}
.search_block_results_loader {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--search_block_results_loader_color, #171717);
    animation: search_block_results_spin 0.8s linear infinite;
}
@keyframes search_block_results_spin {
    to { transform: rotate(360deg); }
}
.search_block_results_message {
    margin: 0 var(--search_block_results_message_marginHorizontal, 32px);
    text-align: center;
}
.search_block_results_message_title {
    color: var(--search_block_results_message_title_textColor, #171717);
    font-size: var(--search_block_results_message_title_textSize, 16px);
    font-family: var(--search_block_results_message_title_fontFamily, inherit);
    font-weight: 700;
}
.search_block_results_message_body {
    margin-top: 4px;
    color: var(--search_block_results_message_body_textColor, #737373);
    font-size: var(--search_block_results_message_body_textSize, 14px);
    font-family: var(--search_block_results_message_body_fontFamily, inherit);
}
/* end search */