@media (max-width:992px){.hero_area{min-height:50vh}#demo .carousel-item{height:50vh}#navbarSupportedContent{background:#000000e6!important}.custom_nav-container .navbar-nav{background:#000000e6;padding-top:15px;padding-left:0;align-items:center}.user_option{justify-content:center;margin-top:15px}.custom_nav-container .navbar-nav .nav-item .nav-link{padding:5px 25px;margin:5px 0}.slider_section .carousel-indicators{margin-top:45px}.offer_section .box{flex-direction:column;align-items:center;text-align:center}.offer_section .box .img-box{margin-right:0;margin-bottom:15px}}@media (max-width:767px){.about_section .detail-box,.book_section .form_container{margin-bottom:45px}.about_section .row{flex-direction:column-reverse}.offer_section .box{flex-direction:row;text-align:left}.offer_section .box .img-box{margin-right:15px;margin-bottom:0}}@media (max-width:430px){.hero_area{min-height:50vh!important}#demo .carousel-item{height:50vh!important}.offer_section .box{flex-direction:column;text-align:center}.offer_section .box .img-box{margin-right:0;margin-bottom:15px}}@media (max-width:376px){.hero_area{min-height:30vh!important}#demo .carousel-item{height:30vh!important}.slider_section .detail-box h1{font-size:3rem}}@media (max-width:768px){img.img-logo{width:60px!important}.hero_area{min-height:30vh!important}#demo .carousel-item{height:30vh!important}.about-section-img{height:235px}}@media (min-width:1200px){.container{max-width:1170px}}@media (min-width:576px) and (max-width:991px){.hero_area{min-height:50vh!important}#demo .carousel-item{height:50vh!important}.rent_solution_container .col-md-4.col-sm-6{float:left;width:50%}}

/* =============================================================================
   CHECKOUT — mobile-first layer
   =============================================================================

   Everything below is written phone-first: the unprefixed rules ARE the mobile
   design, and a single `@media (min-width: 992px)` block at the very bottom hands
   desktop back the values it had before this rewrite.

   Two deliberate constraints:

   1. This file is the only place checkout styling lives. `style.css` has an
      orphaned `style.scss` sibling with no build script in package.json, so a
      direct edit there is one `sass` run away from being lost. `responsive.css`
      loads after `style.css` (see _partials/head.blade.php), which is all the
      specificity leverage this layer needs.

   2. Desktop must stay pixel-identical. That is why almost every value here is a
      custom property: the desktop block re-declares the token instead of fighting
      the rule, and only genuinely structural things (sticky bar, segmented
      control, section numbering) need explicit desktop counterparts.

   Load-bearing invariants inherited from the earlier phases — do not "clean up":
   - `.checkout-page .affix-cart { position: static }` on mobile. `sticky` creates
     a stacking context that traps the fixed CTA's z-index; with the flexbox order
     swap the form column then paints over the bar and swallows its taps.
   - `#cart-items` / `#cart-coupon` / `#cart-tip` / `#cart-totals` / `#cart-buttons`
     are AJAX targets in CartBox::fetchPartials.
   - Every `[data-cart-total]` holds ONLY the formatted total (checkout.js reads
     `$('[data-cart-total]').first().text()`).
   ========================================================================== */

body.checkout-page {
    --ck-page-bg: #f6f4f1;
    --ck-surface: #fff;
    --ck-border: #e6e0da;
    --ck-border-strong: #cec3b7;
    --ck-text: #1b1714;
    --ck-muted: #6f6862;
    --ck-brand: #583000;
    --ck-brand-tint: #f6efe6;
    --ck-danger: #b3261e;

    --ck-radius: 12px;
    --ck-radius-sm: 10px;
    --ck-panel-shadow: 0 1px 2px rgba(24, 16, 8, .05), 0 8px 24px rgba(24, 16, 8, .06);

    --ck-control-h: 48px;
    --ck-control-pad-y: 12px;
    --ck-control-pad-x: 14px;
    /* 16px is not a taste call: anything smaller makes iOS Safari zoom the whole
       page when the field takes focus, and it never zooms back out. */
    --ck-control-font: 16px;
    --ck-label-font: 13px;
    --ck-title-font: 15px;

    --ck-gap: 12px;
    --ck-block-gap: 16px;

    background-color: var(--ck-page-bg);
    color: var(--ck-text);
}

.checkout-page-title {
    margin: 4px 0 14px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ck-text);
}

/* ---------------------------------------------------------------------------
   Surfaces
   --------------------------------------------------------------------------- */
.checkout-page .card,
.checkout-page .panel-cart {
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    box-shadow: var(--ck-panel-shadow);
}

.checkout-page .card {
    margin-bottom: var(--ck-block-gap);
}

.checkout-page .card-body,
.checkout-page .panel-cart .panel-body {
    padding: var(--ck-block-gap);
}

/* Visual separation between the stacked sections inside the form card. */
.checkout-block + .checkout-block {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--ck-border);
}

/* ---------------------------------------------------------------------------
   Section headings + step numbers
   --------------------------------------------------------------------------- */
.checkout-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--ck-title-font);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-bottom: 6px;
    margin: 0 0 14px;
    border-bottom: 1px solid var(--ck-border);
}

.panel-cart .checkout-section-title {
    text-align: left;
}

/* Step numbers are counted, not hard-coded: the delivery-address block only
   exists in delivery mode, so "Payment" is step 3 for pick-up and 4 for delivery.
   Step 1 (How & when) lives in the cart panel and carries a literal number. */
#checkout-form {
    counter-reset: ck-step 1;
}

.checkout-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ck-brand);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

#checkout-form .checkout-step::before {
    counter-increment: ck-step;
    content: counter(ck-step);
}

/* ---------------------------------------------------------------------------
   Form controls
   --------------------------------------------------------------------------- */
#checkout-form .form-group {
    margin-bottom: var(--ck-gap);
}

#checkout-form label {
    display: block;
    margin-bottom: 5px;
    font-size: var(--ck-label-font);
    font-weight: 600;
    color: var(--ck-muted);
}

#checkout-form .form-control {
    min-height: var(--ck-control-h);
    padding: var(--ck-control-pad-y) var(--ck-control-pad-x);
    font-size: var(--ck-control-font);
    color: var(--ck-text);
    background-color: var(--ck-surface);
    border: 1px solid var(--ck-border-strong);
    border-radius: var(--ck-radius-sm);
    box-shadow: none;
}

#checkout-form textarea.form-control {
    min-height: 96px;
    resize: vertical;
}

#checkout-form .form-control::placeholder {
    color: #a9a29b;
}

/* One visible focus treatment for every control on the page. */
.checkout-page #checkout-form .form-control:focus,
.checkout-page .panel-cart .form-control:focus,
.checkout-page .btn:focus-visible,
.checkout-page .form-check-input:focus-visible,
.checkout-page .btn-check:focus-visible + .btn,
.checkout-page .cart-summary-toggle:focus-visible {
    outline: none;
    border-color: var(--ck-brand);
    box-shadow: 0 0 0 3px rgba(88, 48, 0, .18);
}

#checkout-form .text-danger {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--ck-danger) !important;
}

/* The phone field is an input-group with a country-code dropdown glued to it. */
#checkout-form .iti,
#checkout-form .intl-tel-input {
    width: 100%;
}

/* Character counter under the note field reads as helper text, not a stat. */
.checkout-charcount {
    margin: 5px 0 0;
    font-size: 12px;
    text-align: right;
    color: var(--ck-muted);
}

/* Terms row: a real target, and the copy no longer collides with the box. */
#checkout-form .checkout-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 0;
    padding: var(--ck-gap);
    background: var(--ck-brand-tint);
    border-radius: var(--ck-radius-sm);
}

#checkout-form #terms-condition {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    accent-color: var(--ck-brand);
}

#checkout-form #terms-condition + .form-check-label {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--ck-text);
    text-transform: none;
    letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
   Payment methods — the whole row is the target, selection is unmistakable
   --------------------------------------------------------------------------- */
.payments .list-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payments .list-group-item {
    padding: 0;
    overflow: hidden;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border-strong);
    border-radius: var(--ck-radius-sm);
}

/* .bg-light is what the blade adds to the selected row; the brand tint and the
   left accent bar replace that grey wash, which read as "disabled". */
.payments .list-group-item.bg-light {
    background: var(--ck-brand-tint) !important;
    border-color: var(--ck-brand);
    box-shadow: inset 3px 0 0 var(--ck-brand);
}

.payments .list-group-item.disabled {
    opacity: .55;
}

/* Direct child only. A gateway's own form is a SIBLING of this row and can contain
   its own .form-check (Stripe's "save this card"), which must not be dressed up as
   a 56px payment row. */
.payments .list-group-item > .form-check {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 10px 14px 10px 44px;
    cursor: pointer;
}

.payments .list-group-item > .form-check > .form-check-input {
    width: 22px;
    height: 22px;
    margin-left: -32px;
    margin-top: 0;
    accent-color: var(--ck-brand);
}

.payments .list-group-item > .form-check > .form-check-label {
    padding-left: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.payments .list-group-item > .form-check > p {
    flex: 1 0 100%;
    padding-left: 6px;
    color: var(--ck-muted);
}

/* ---------------------------------------------------------------------------
   Gateway forms rendered inside the selected payment row (Stripe, Square, …).
   renderPaymentForm() injects .payment-form as a bare sibling of the row with no
   padding of its own, so without this it bleeds to the card's edges.
   --------------------------------------------------------------------------- */
.payments .list-group-item .payment-form {
    width: 100%;
    padding: 0 14px 14px;
    margin: 0;
}

.payments .list-group-item .payment-form > .form-group:last-child,
.payments .list-group-item .payment-form > div:last-child {
    margin-bottom: 0;
}

.payments .list-group-item .payment-form label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--ck-label-font);
    font-weight: 600;
    color: var(--ck-muted);
}

/* The Stripe card element is an iframe that sizes to its container — it needs a
   real field box around it or it reads as loose text on the row background. */
.payments .list-group-item .stripe-card-element,
.payments .list-group-item .payment-form .form-control {
    min-height: 48px;
    padding: 13px 14px;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border-strong);
    border-radius: var(--ck-radius-sm);
}

.payments .list-group-item .payment-form .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0;
    margin: 10px 0 0;
}

.payments .list-group-item .payment-form .form-check .form-check-input {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--ck-brand);
}

.payments .list-group-item .payment-form .form-check .form-check-label {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--ck-text);
}

/* ---------------------------------------------------------------------------
   Order type + time — segmented control
   --------------------------------------------------------------------------- */
.local-control .btn-group-toggle {
    padding: 4px;
    background: #efe9e3;
    border-radius: var(--ck-radius-sm);
    gap: 4px;
}

.local-control .btn-group-toggle .btn {
    min-height: 48px;
    display: flex;
    /* column, not row: each button stacks a name over a "starts ..." line and a
       row here squashes both onto two cramped lines. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ck-muted);
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
}

.local-control .btn-group-toggle .btn.active,
.local-control .btn-check:checked + .btn {
    background: var(--ck-surface);
    color: var(--ck-text);
    box-shadow: 0 1px 3px rgba(24, 16, 8, .18);
}

.local-control .btn-group-toggle .btn small,
.local-control .btn-group-toggle .btn span {
    font-weight: 400;
    font-size: 12px;
    opacity: .8;
}

/* Minimum-order note: quiet, and hidden entirely when the minimum is zero
   (the blade only renders it when > 0 now, this is belt and braces). */
.local-control > p.text-muted {
    margin: 8px 0 0 !important;
    font-size: 12px;
}

.btn-timepicker,
#orderTimePicker {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: 1px solid var(--ck-border-strong);
    border-radius: var(--ck-radius-sm);
    background: var(--ck-surface);
    font-size: 15px;
    font-weight: 600;
    color: var(--ck-text);
}

/* ---------------------------------------------------------------------------
   Cart panel internals
   --------------------------------------------------------------------------- */
.panel-cart .cart-btn,
.panel-cart .btn-sm,
#cart-coupon .btn,
.cart-item-options .btn {
    min-width: 44px;
    min-height: 44px;
}

#cart-coupon .form-control,
.panel-cart .form-control {
    min-height: 44px;
    font-size: var(--ck-control-font);
}

.checkout-page .affix-cart {
    /* See the invariant note at the top of this file. */
    position: static;
    margin: 0 0 var(--ck-block-gap);
}

/* ---------------------------------------------------------------------------
   Collapsible order summary
   --------------------------------------------------------------------------- */
.cart-summary-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    margin: var(--ck-gap) 0 0;
    border: 1px solid var(--ck-border-strong);
    border-radius: var(--ck-radius-sm);
    background: var(--ck-surface);
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    color: var(--ck-text);
}

.cart-summary-toggle[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: -1px;
}

.cart-summary-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cart-summary-count {
    font-weight: 400;
    color: var(--ck-muted);
}

.cart-summary-caret {
    transition: transform .2s ease;
    font-size: 12px;
    color: var(--ck-muted);
}

.cart-summary-toggle[aria-expanded="true"] .cart-summary-caret {
    transform: rotate(180deg);
}

.checkout-page #cart-summary.show,
.checkout-page #cart-summary.collapsing {
    padding-top: 4px;
}

/* ---------------------------------------------------------------------------
   Sticky Confirm bar
   --------------------------------------------------------------------------- */
.cart-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: var(--ck-gap);
    margin: 0;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--ck-border);
    box-shadow: 0 -6px 24px rgba(24, 16, 8, .12);
}

@supports (padding: max(0px)) {
    .cart-sticky-bar {
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}

.cart-sticky-bar .cart-sticky-total {
    flex: 0 0 auto;
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1;
}

.cart-sticky-bar #cart-buttons {
    flex: 1 1 auto;
    margin: 0 !important;
}

.cart-sticky-bar .checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    margin: 0;
    border-radius: var(--ck-radius-sm);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
}

.checkout-page .checkout-btn:disabled,
.checkout-page .checkout-btn.disabled {
    opacity: .65;
}

/* Clear the fixed bar so nothing is ever trapped underneath it. */
body.checkout-page {
    padding-bottom: 88px;
}

/* ---------------------------------------------------------------------------
   Page chrome: a checkout should not offer eight ways to leave it
   --------------------------------------------------------------------------- */
/* A phone checkout that ends in a three-column marketing footer invites the
   customer to leave mid-order. Keep the legal links and the copyright line,
   drop the address/logo/social columns. Desktop keeps the full footer. */
body.checkout-page .footer_section .footer-col {
    display: none;
}

/* style.css still carries `#page-wrapper { padding-bottom: 120px }` and a matching
   `.footer_section { padding-bottom: 120px !important }` below 992px — clearance for
   the `#mobile-order-controls` bar that phase 1 deleted. Nothing is down there any
   more, so on checkout it is just a slab of empty brown under the copyright. The
   !important is only here to beat that !important; the rule is scoped to checkout,
   the dead style.css block is flagged in implementation-notes.md. */
body.checkout-page #page-wrapper {
    padding-bottom: 0;
}

body.checkout-page .footer_section {
    padding: 16px 0 8px !important;
    font-size: 12px;
}

body.checkout-page .footer_section .footer-info p {
    margin-bottom: 0;
}

/* =============================================================================
   Desktop (>= 992px) — hand back exactly what was there before this rewrite.
   Values below are the ones measured on the live page at 1440px pre-change.
   ========================================================================== */
@media (min-width: 992px) {
    body.checkout-page {
        --ck-page-bg: #fff;
        --ck-border: rgba(0, 0, 0, .12);
        --ck-border-strong: #e0dcdb;
        --ck-text: #0c0c0c;
        --ck-radius: 4px;
        --ck-radius-sm: 4px;
        --ck-panel-shadow: 0 5px 15px 0 rgba(0, 0, 0, .35);
        --ck-control-h: 35px;
        --ck-control-pad-y: 6px;
        --ck-control-pad-x: 12px;
        --ck-control-font: 14px;
        --ck-label-font: 14px;
        --ck-title-font: 15px;

        padding-bottom: 0;
    }

    /* Surfaces: the form cards carry no border or shadow on desktop, the cart
       panel keeps the theme's heavy drop shadow. */
    .checkout-page .card {
        border: 0;
        border-radius: 4px;
        box-shadow: none;
        margin-bottom: 0;
    }

    .checkout-page .panel-cart {
        border: 0;
    }

    .checkout-page .card-body,
    .checkout-page .panel-cart .panel-body {
        padding: 16px;
    }

    .checkout-block + .checkout-block {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    /* No step chips on desktop — the two-column layout already reads as one form. */
    .checkout-step {
        display: none;
    }

    .checkout-section-title {
        display: block;
    }

    #checkout-form label {
        display: inline-block;
        margin-bottom: 0;
        font-weight: 400;
        color: inherit;
    }

    #checkout-form .form-control {
        min-height: 0;
        color: #333;
        border-color: #e0dcdb;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
    }

    #checkout-form textarea.form-control {
        min-height: 0;
        resize: vertical;
    }

    #checkout-form .form-group {
        margin-bottom: 1rem;
    }

    .checkout-charcount {
        margin: 1rem 0;
        font-size: 14px;
        text-align: left;
        color: inherit;
    }

    #checkout-form .checkout-terms {
        display: block;
        padding: 0;
        margin: 0;
        background: none;
        border-radius: 0;
    }

    #checkout-form #terms-condition {
        width: 14px;
        height: 14px;
        margin-top: .25em;
    }

    #checkout-form #terms-condition + .form-check-label {
        font-size: 14px;
    }

    #checkout-form .text-danger {
        display: inline;
        margin-top: 0;
        font-size: 14px;
    }

    /* Payment rows: back to a plain Bootstrap list group. */
    .payments .list-group {
        display: block;
        gap: 0;
    }

    .payments .list-group-item {
        padding: 0 16px;
        border: 1px solid #e0dcdb;
        border-radius: 0;
        box-shadow: none;
    }

    .payments .list-group-item:first-child {
        border-radius: 4px 4px 0 0;
    }

    .payments .list-group-item:last-child {
        border-radius: 0 0 4px 4px;
    }

    .payments .list-group-item.bg-light {
        background: #dbdbdc !important;
        border-color: #e0dcdb;
        box-shadow: none;
    }

    .payments .list-group-item > .form-check {
        display: block;
        min-height: 0;
        padding: 8px 0 8px 21px;
        margin-bottom: 2px;
    }

    .payments .list-group-item > .form-check > .form-check-input {
        width: 14px;
        height: 14px;
        margin-left: -21px;
        margin-top: .25em;
    }

    .payments .list-group-item > .form-check > .form-check-label {
        padding-left: 0;
        font-size: 14px;
        font-weight: 400;
    }

    .payments .list-group-item > .form-check > p {
        padding-left: 0;
        color: inherit;
    }

    .payments .list-group-item .payment-form {
        padding: 0 0 8px;
    }

    .payments .list-group-item .payment-form label {
        display: inline-block;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: 400;
        color: inherit;
    }

    .payments .list-group-item .stripe-card-element,
    .payments .list-group-item .payment-form .form-control {
        min-height: 0;
        padding: 6px 12px;
        border-radius: 4px;
        border-color: #e0dcdb;
    }

    .payments .list-group-item .payment-form .form-check {
        display: block;
        min-height: 0;
        padding: 0 0 0 1.5em;
        margin: .5rem 0 0;
    }

    .payments .list-group-item .payment-form .form-check .form-check-input {
        width: 14px;
        height: 14px;
        margin: .25em 0 0 -1.5em;
        float: left;
    }

    /* Order type: back to a Bootstrap btn-group with square inner corners. */
    .local-control .btn-group-toggle {
        padding: 0;
        background: none;
        border-radius: 0;
        gap: 0;
    }

    .local-control .btn-group-toggle .btn {
        min-height: 0;
        display: block;
        padding: 6px 12px;
        border: 1px solid #dbdbdc;
        border-radius: 0;
        background: #dbdbdc;
        color: #000;
        font-size: 14px;
        font-weight: 600;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
    }

    .local-control .btn-group-toggle > .btn:first-of-type {
        border-radius: 4px 0 0 4px;
    }

    .local-control .btn-group-toggle > .btn:last-of-type {
        border-radius: 0 4px 4px 0;
    }

    .local-control .btn-group-toggle .btn.active,
    .local-control .btn-check:checked + .btn {
        background: var(--ck-brand);
        border-color: #dfdfe0;
        color: #fff;
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    }

    .local-control .btn-group-toggle .btn small,
    .local-control .btn-group-toggle .btn span {
        font-size: inherit;
        font-weight: inherit;
        opacity: 1;
    }

    .local-control > p.text-muted {
        margin: .5rem 0 !important;
        font-size: 14px;
    }

    .btn-timepicker,
    #orderTimePicker {
        min-height: 0;
        display: inline-block;
        width: auto;
        padding: 6px 12px;
        border: 1px solid #dbdbdc;
        border-radius: 4px;
        background: #dbdbdc;
        color: #000;
        font-size: 14px;
        font-weight: 600;
    }

    .panel-cart .cart-btn,
    .panel-cart .btn-sm,
    #cart-coupon .btn,
    .cart-item-options .btn {
        min-width: 0;
        min-height: 0;
    }

    #cart-coupon .form-control,
    .panel-cart .form-control {
        min-height: 0;
        font-size: 14px;
    }

    /* app.css: .affix-cart { position: sticky; top: 68px } */
    .checkout-page .affix-cart {
        position: sticky;
        top: 68px;
        margin: 0;
    }

    .cart-summary-toggle {
        display: none;
    }

    .cart-sticky-bar {
        position: static;
        display: block;
        padding: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-top: 0;
        box-shadow: none;
    }

    .cart-sticky-bar #cart-buttons {
        margin-top: 1rem !important;
    }

    .cart-sticky-bar .checkout-btn {
        display: inline-block;
        min-height: 0;
        padding: 8px 16px;
        border-radius: 4.8px;
        font-size: 17.5px;
        font-weight: 600;
        letter-spacing: normal;
    }

    body.checkout-page .footer_section .footer-col {
        display: block;
    }

    /* style.css: .footer_section { padding: 75px 0 40px } */
    body.checkout-page .footer_section {
        padding: 75px 0 40px !important;
        font-size: 14px;
    }

    body.checkout-page #page-wrapper {
        padding-bottom: 0;
    }
}