/* ============================================================
   RK ORDER — MENU CLEAN UI
   Namespace exclusivo: rkm-
   ============================================================ */

:root{
    --rkm-bg:#FAF8F5;
    --rkm-surface:#FFFFFF;
    --rkm-soft:#F4F1ED;

    --rkm-text:#111111;
    --rkm-muted:#767676;

    --rkm-border:#E7E2DC;

    --rkm-accent:#DC6A04;
    --rkm-accent-dark:#BE5903;
    --rkm-accent-soft:#FFF0E2;

    --rkm-danger:#D92D20;

    --rkm-shadow-sm:0 4px 14px rgba(28,22,18,.055);
    --rkm-shadow-md:0 10px 28px rgba(28,22,18,.09);
    --rkm-shadow-lg:0 18px 48px rgba(28,22,18,.16);
}


/* ============================================================
   RESET
   ============================================================ */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    margin:0;
    padding:0;

    background:var(--rkm-bg);

    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;

    min-width:320px;

    background:var(--rkm-bg);

    color:var(--rkm-text);

    font-family:
        Inter,
        "Helvetica Neue",
        Helvetica,
        Arial,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

button,
input,
textarea{
    font:inherit;
}

button{
    cursor:pointer;
}

img{
    display:block;
    max-width:100%;
}

svg{
    display:block;
    width:1em;
    height:1em;
}

a{
    color:inherit;
}

.rkm-app{
    min-height:100vh;

    padding-bottom:155px;

    background:var(--rkm-bg);
}


/* ============================================================
   TOP BAR
   ============================================================ */

.rkm-topbar{
    width:100%;

    overflow:hidden;

    background:var(--rkm-accent);

    color:#FFFFFF;

    font-size:10px;
    font-weight:900;

    letter-spacing:.08em;

    text-transform:uppercase;
}

.rkm-marquee{
    width:100%;

    overflow:hidden;

    white-space:nowrap;
}

.rkm-marquee-track{
    display:inline-flex;

    min-width:max-content;

    gap:28px;

    padding:9px 0;

    animation:rkmMarquee 18s linear infinite;
}

@keyframes rkmMarquee{

    to{
        transform:translateX(-33.333%);
    }

}


/* ============================================================
   HEADER
   MISMA IDENTIDAD DEL HOME
   ============================================================ */

.rkm-header{
    position:relative;

    display:flex;

    width:100%;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    padding:22px 16px 16px;

    background:var(--rkm-bg);

    text-align:center;
}

.rkm-logo-link{
    display:block;

    margin:0 auto;

    text-decoration:none;

    line-height:0;
}

.rkm-logo{
    display:block;

    width:auto;

    max-width:235px;
    max-height:92px;

    margin:0 auto;

    object-fit:contain;

    filter:none;

    opacity:1;
}

.rkm-store-meta{
    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:3px;

    margin-top:7px;
}

.rkm-rating{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:5px;

    color:var(--rkm-text);

    font-size:13px;
}

.rkm-rating strong{
    font-weight:800;
}

.rkm-rating span:last-child{
    font-weight:500;
}

.rkm-star{
    color:var(--rkm-accent);
}

.rkm-store-meta small{
    color:var(--rkm-muted);

    font-size:11px;
}


/* ============================================================
   MAIN CONTAINER
   ============================================================ */

.rkm-main{
    width:min(760px,calc(100% - 28px));

    margin:0 auto;
}


/* ============================================================
   SEARCH
   ============================================================ */

.rkm-search-wrap{
    position:relative;

    z-index:20;

    width:100%;
}

.rkm-search{
    display:flex;

    width:100%;

    min-height:56px;

    align-items:center;

    gap:11px;

    padding:0 16px;

    border:1px solid var(--rkm-border);

    border-radius:18px;

    background:#FFFFFF;

    box-shadow:var(--rkm-shadow-sm);
}

.rkm-search svg{
    width:20px;
    height:20px;

    flex:0 0 auto;

    color:#111111;
}

.rkm-search input{
    width:100%;

    min-width:0;

    padding:0;

    border:0;

    outline:0;

    background:transparent;

    color:var(--rkm-text);

    font-size:14px;
}

.rkm-search input::placeholder{
    color:#929292;
}


/* ============================================================
   INTRO
   ============================================================ */

.rkm-intro{
    padding:24px 2px 14px;
}

.rkm-eyebrow{
    color:var(--rkm-accent);

    font-size:10px;
    font-weight:900;

    letter-spacing:.075em;
}

.rkm-intro h1{
    margin:4px 0 7px;

    color:var(--rkm-text);

    font-size:34px;
    font-weight:800;

    line-height:1.04;

    letter-spacing:-.045em;
}

.rkm-intro p{
    max-width:620px;

    margin:0;

    color:var(--rkm-muted);

    font-size:14px;

    line-height:1.48;
}


/* ============================================================
   CATEGORIES
   ============================================================ */

.rkm-category-shell{
    position:sticky;

    z-index:35;

    top:0;

    margin:6px -14px 0;

    padding:9px 14px;

    background:rgba(250,248,245,.96);

    backdrop-filter:blur(12px);
}

.rkm-categories{
    display:flex;

    gap:8px;

    overflow-x:auto;
    overflow-y:hidden;

    padding-bottom:2px;

    scroll-behavior:smooth;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;
}

.rkm-categories::-webkit-scrollbar{
    display:none;
}

.rkm-categories button{
    display:flex;

    flex:0 0 auto;

    min-height:40px;

    align-items:center;
    justify-content:center;

    gap:6px;

    padding:0 15px;

    border:1px solid var(--rkm-border);

    border-radius:999px;

    background:#FFFFFF;

    color:var(--rkm-text);

    font-size:12px;
    font-weight:800;

    white-space:nowrap;

    box-shadow:0 2px 8px rgba(0,0,0,.025);

    transition:
        background .16s ease,
        color .16s ease,
        border-color .16s ease;
}

.rkm-categories button.is-active{
    border-color:var(--rkm-accent);

    background:var(--rkm-accent);

    color:#FFFFFF;

    box-shadow:0 5px 14px rgba(220,106,4,.18);
}


/* ============================================================
   PRODUCT LIST
   ============================================================ */

.rkm-products{
    display:flex;

    width:100%;

    flex-direction:column;

    gap:11px;

    margin-top:8px;
}

.rkm-product-card{
    width:100%;

    min-width:0;
}

.rkm-product{
    display:grid;

    width:100%;

    grid-template-columns:36% minmax(0,1fr);

    overflow:hidden;

    padding:0;

    border:1px solid var(--rkm-border);

    border-radius:18px;

    background:#FFFFFF;

    color:var(--rkm-text);

    box-shadow:var(--rkm-shadow-sm);

    text-align:left;

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}

.rkm-product:hover{
    transform:translateY(-1px);

    box-shadow:var(--rkm-shadow-md);
}


/* ============================================================
   PRODUCT IMAGE
   ============================================================ */

.rkm-product-image{
    position:relative;

    width:100%;

    min-height:170px;

    overflow:hidden;

    background:#EEEAE5;
}

.rkm-product-image img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.rkm-image-fallback{
    display:grid;

    width:100%;
    height:100%;

    min-height:170px;

    place-items:center;

    background:#EEEAE5;

    color:#AAA39C;

    font-size:19px;
    font-weight:900;
}

.rkm-product-badge{
    position:absolute;

    top:9px;
    left:9px;

    padding:5px 8px;

    border-radius:999px;

    background:var(--rkm-accent);

    color:#FFFFFF;

    font-size:8px;
    font-weight:900;

    letter-spacing:.03em;
}


/* ============================================================
   PRODUCT COPY
   ============================================================ */

.rkm-product-content{
    display:flex;

    min-width:0;

    flex-direction:column;

    padding:15px;
}

.rkm-product-head{
    display:grid;

    width:100%;

    grid-template-columns:minmax(0,1fr) auto;

    align-items:start;

    gap:10px;
}

.rkm-product-head strong{
    overflow:hidden;

    color:var(--rkm-text);

    font-size:16px;
    font-weight:800;

    line-height:1.18;

    text-overflow:ellipsis;
}

.rkm-product-head b{
    color:var(--rkm-text);

    font-size:16px;
    font-weight:800;

    white-space:nowrap;
}

.rkm-product-content p{
    display:-webkit-box;

    overflow:hidden;

    margin:9px 0;

    color:var(--rkm-muted);

    font-size:12px;

    line-height:1.42;

    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.rkm-product-meta{
    display:flex;

    flex-wrap:wrap;

    gap:5px;

    color:#939393;

    font-size:11px;
}

.rkm-add-row{
    display:flex;

    justify-content:flex-end;

    margin-top:auto;

    padding-top:10px;
}

.rkm-add{
    display:grid;

    width:38px;
    height:38px;

    place-items:center;

    border-radius:999px;

    background:var(--rkm-accent);

    color:#FFFFFF;

    font-size:24px;

    line-height:1;

    box-shadow:0 5px 14px rgba(220,106,4,.20);
}


/* ============================================================
   FLOATING CART
   ============================================================ */

.rkm-floating-cart{
    position:fixed;

    z-index:65;

    right:14px;
    bottom:78px;
    left:14px;

    display:flex;

    width:min(730px,calc(100% - 28px));

    min-height:66px;

    align-items:center;
    justify-content:space-between;

    gap:14px;

    margin:0 auto;

    padding:9px 16px;

    border:0;

    border-radius:22px;

    background:
        linear-gradient(
            90deg,
            #DC6A04 0%,
            #E97800 100%
        );

    color:#FFFFFF;

    box-shadow:0 13px 32px rgba(220,106,4,.28);
}

.rkm-floating-left{
    display:flex;

    align-items:center;

    gap:11px;

    min-width:0;

    text-align:left;
}

.rkm-floating-icon{
    display:grid;

    width:42px;
    height:42px;

    flex:0 0 auto;

    place-items:center;

    border-radius:12px;

    background:rgba(255,255,255,.15);
}

.rkm-floating-icon svg{
    width:24px;
    height:24px;
}

.rkm-floating-left>div:last-child{
    display:flex;

    min-width:0;

    flex-direction:column;
}

.rkm-floating-left strong{
    font-size:12px;

    font-weight:800;
}

.rkm-floating-left small{
    color:rgba(255,255,255,.82);

    font-size:10px;
}

.rkm-floating-right{
    display:flex;

    align-items:center;

    gap:7px;
}

.rkm-floating-right strong{
    font-size:12px;

    font-weight:800;

    white-space:nowrap;
}

.rkm-floating-right span{
    font-size:24px;

    line-height:1;
}


/* ============================================================
   BOTTOM NAV
   5 ITEMS
   Inicio / Menú / Órdenes / Alerta / Cuenta
   ============================================================ */

.rkm-bottom-nav{
    position:fixed;

    z-index:60;

    right:0;
    bottom:0;
    left:0;

    display:grid;

    grid-template-columns:repeat(5,1fr);

    min-height:70px;

    padding-bottom:env(safe-area-inset-bottom);

    border-top:1px solid var(--rkm-border);

    background:rgba(255,255,255,.98);

    box-shadow:0 -6px 20px rgba(0,0,0,.04);
}

.rkm-bottom-nav a{
    display:flex;

    min-width:0;

    align-items:center;
    justify-content:center;

    flex-direction:column;

    gap:4px;

    padding:7px 2px 5px;

    color:#898989;

    text-decoration:none;
}

.rkm-bottom-nav svg{
    width:21px;
    height:21px;

    color:currentColor;
}

.rkm-bottom-nav span{
    overflow:hidden;

    max-width:100%;

    color:inherit;

    font-size:10px;
    font-weight:700;

    text-overflow:ellipsis;

    white-space:nowrap;
}

.rkm-bottom-nav a.is-active{
    color:var(--rkm-accent);
}


/* ============================================================
   LAYER / DRAWER
   ============================================================ */

.rkm-layer{
    position:fixed;

    z-index:100;

    inset:0;
}

.rkm-backdrop{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    padding:0;

    border:0;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(2px);
}

.rkm-drawer{
    position:absolute;

    top:0;
    right:0;
    bottom:0;

    display:flex;

    width:min(520px,100%);

    flex-direction:column;

    overflow:hidden;

    background:#FFFFFF;

    box-shadow:-20px 0 60px rgba(0,0,0,.20);
}

.rkm-drawer-scroll{
    flex:1;

    overflow-y:auto;

    overscroll-behavior:contain;
}


/* ============================================================
   DRAWER IMAGE
   ============================================================ */

.rkm-drawer-image{
    position:relative;

    width:100%;

    height:290px;

    overflow:hidden;

    background:#EEEAE5;
}

.rkm-drawer-image img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.rkm-drawer-image-empty{
    display:grid;

    width:100%;
    height:100%;

    place-items:center;

    color:#A8A29E;

    font-size:18px;
    font-weight:900;
}

.rkm-close{
    position:absolute;

    z-index:4;

    top:14px;
    right:14px;

    display:grid;

    width:40px;
    height:40px;

    place-items:center;

    padding:0;

    border:1px solid var(--rkm-border);

    border-radius:999px;

    background:#FFFFFF;

    color:#111111;

    font-size:22px;

    line-height:1;

    box-shadow:var(--rkm-shadow-sm);
}

.rkm-close-static{
    position:static;
}


/* ============================================================
   PRODUCT DETAIL
   ============================================================ */

.rkm-product-detail{
    padding:20px;

    border-bottom:1px solid var(--rkm-border);
}

.rkm-product-detail>div{
    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:15px;
}

.rkm-product-detail h2{
    margin:0;

    color:var(--rkm-text);

    font-size:25px;
    font-weight:800;

    line-height:1.1;

    letter-spacing:-.035em;
}

.rkm-product-detail>div>strong{
    color:var(--rkm-text);

    font-size:17px;
    font-weight:800;

    white-space:nowrap;
}

.rkm-product-detail p{
    margin:8px 0 0;

    color:var(--rkm-muted);

    font-size:12px;

    line-height:1.5;
}


/* ============================================================
   MODIFIERS
   ============================================================ */

.rkm-modifier-group{
    padding:18px 20px;

    border-bottom:1px solid var(--rkm-border);
}

.rkm-modifier-header{
    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:10px;

    margin-bottom:8px;
}

.rkm-modifier-header>div{
    display:flex;

    flex-direction:column;

    gap:2px;
}

.rkm-modifier-header strong{
    color:var(--rkm-text);

    font-size:14px;
    font-weight:800;
}

.rkm-modifier-header small{
    color:var(--rkm-muted);

    font-size:10px;
}

.rkm-modifier-header>span{
    padding:5px 7px;

    border-radius:999px;

    background:var(--rkm-accent-soft);

    color:var(--rkm-accent);

    font-size:8px;
    font-weight:900;
}

.rkm-option{
    display:flex;

    min-height:55px;

    align-items:center;
    justify-content:space-between;

    gap:10px;

    border-bottom:1px solid #F0ECE8;
}

.rkm-option:last-child{
    border-bottom:0;
}

.rkm-option>div{
    display:flex;

    flex-direction:column;

    gap:2px;
}

.rkm-option strong{
    color:var(--rkm-text);

    font-size:12px;
}

.rkm-option small{
    color:var(--rkm-muted);

    font-size:10px;
}

.rkm-option input{
    width:20px;
    height:20px;

    flex:0 0 auto;

    accent-color:var(--rkm-accent);
}


/* ============================================================
   NOTES / FORM
   ============================================================ */

.rkm-notes{
    padding:18px 20px;
}

.rkm-notes label,
.rkm-checkout>label{
    display:flex;

    flex-direction:column;

    gap:6px;
}

.rkm-notes span,
.rkm-checkout>label>span{
    color:var(--rkm-text);

    font-size:11px;
    font-weight:700;
}

.rkm-notes textarea,
.rkm-checkout input,
.rkm-checkout textarea{
    width:100%;

    padding:12px;

    border:1px solid var(--rkm-border);

    border-radius:11px;

    outline:0;

    background:#FFFFFF;

    color:var(--rkm-text);
}

.rkm-notes textarea:focus,
.rkm-checkout input:focus,
.rkm-checkout textarea:focus{
    border-color:var(--rkm-accent);

    box-shadow:0 0 0 3px rgba(220,106,4,.09);
}


/* ============================================================
   PRODUCT FOOTER
   ============================================================ */

.rkm-product-footer{
    display:grid;

    grid-template-columns:auto 1fr;

    gap:12px;

    padding:12px 16px;

    border-top:1px solid var(--rkm-border);

    background:#FFFFFF;
}

.rkm-quantity,
.rkm-mini-qty{
    display:flex;

    align-items:center;

    gap:9px;
}

.rkm-quantity button,
.rkm-mini-qty button{
    display:grid;

    width:36px;
    height:36px;

    place-items:center;

    border:1px solid var(--rkm-border);

    border-radius:999px;

    background:#FFFFFF;

    color:var(--rkm-text);
}

.rkm-primary{
    min-height:46px;

    padding:0 17px;

    border:0;

    border-radius:12px;

    background:var(--rkm-accent);

    color:#FFFFFF;

    font-size:12px;
    font-weight:800;
}

.rkm-primary:hover{
    background:var(--rkm-accent-dark);
}


/* ============================================================
   CART
   ============================================================ */

.rkm-cart-header{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:12px;

    padding:18px 20px;

    border-bottom:1px solid var(--rkm-border);
}

.rkm-cart-header>div{
    display:flex;

    flex-direction:column;

    gap:2px;
}

.rkm-cart-header span{
    color:var(--rkm-accent);

    font-size:9px;
    font-weight:900;
}

.rkm-cart-header h2{
    margin:0;

    color:var(--rkm-text);

    font-size:24px;
    font-weight:800;
}

.rkm-cart-items{
    padding:8px 20px;
}

.rkm-cart-item{
    display:flex;

    flex-direction:column;

    gap:12px;

    padding:15px 0;

    border-bottom:1px solid var(--rkm-border);
}

.rkm-cart-copy{
    display:flex;

    flex-direction:column;

    gap:4px;
}

.rkm-cart-copy>div{
    display:flex;

    justify-content:space-between;

    gap:12px;
}

.rkm-cart-copy strong{
    color:var(--rkm-text);

    font-size:13px;
}

.rkm-cart-copy b{
    color:var(--rkm-text);

    font-size:12px;

    white-space:nowrap;
}

.rkm-cart-copy small{
    color:var(--rkm-muted);

    font-size:10px;
}

.rkm-cart-copy em{
    color:#777;

    font-size:10px;
}

.rkm-cart-actions{
    display:flex;

    align-items:center;
    justify-content:space-between;
}

.rkm-mini-qty button{
    width:30px;
    height:30px;
}

.rkm-remove{
    border:0;

    background:transparent;

    color:var(--rkm-danger);

    font-size:10px;
    font-weight:700;
}


/* ============================================================
   CHECKOUT
   ============================================================ */

.rkm-checkout{
    display:flex;

    flex-direction:column;

    gap:14px;

    padding:18px 20px;
}

.rkm-pickup-box{
    display:flex;

    align-items:center;
    justify-content:space-between;

    padding:14px;

    border:1px solid var(--rkm-border);

    border-radius:13px;

    background:#FFFFFF;
}

.rkm-pickup-box>div{
    display:flex;

    flex-direction:column;

    gap:2px;
}

.rkm-pickup-box span{
    color:var(--rkm-accent);

    font-size:9px;
    font-weight:900;
}

.rkm-payment{
    display:flex !important;

    flex-direction:row !important;

    align-items:flex-start;

    gap:10px;

    padding:14px;

    border:1px solid var(--rkm-border);

    border-radius:13px;

    background:#FFFFFF;
}

.rkm-payment input{
    width:18px !important;
    height:18px;

    flex:0 0 auto;

    padding:0 !important;

    accent-color:var(--rkm-accent);
}

.rkm-payment>div{
    display:flex;

    flex-direction:column;

    gap:3px;
}

.rkm-payment strong{
    font-size:12px;
}

.rkm-payment small{
    color:var(--rkm-muted);

    font-size:10px;
}


/* ============================================================
   TOTALS
   ============================================================ */

.rkm-totals{
    display:flex;

    flex-direction:column;

    gap:9px;

    padding:18px 20px;
}

.rkm-totals>div{
    display:flex;

    justify-content:space-between;

    gap:15px;

    color:var(--rkm-muted);

    font-size:11px;
}

.rkm-totals strong{
    color:var(--rkm-text);
}

.rkm-totals .is-total{
    margin-top:5px;

    padding-top:12px;

    border-top:1px solid var(--rkm-border);

    color:var(--rkm-text);

    font-size:15px;
    font-weight:800;
}


/* ============================================================
   CHECKOUT FOOTER
   ============================================================ */

.rkm-checkout-footer{
    display:flex;

    gap:10px;

    padding:12px 16px;

    border-top:1px solid var(--rkm-border);

    background:#FFFFFF;
}

.rkm-checkout-footer>*{
    flex:1;
}

.rkm-secondary{
    min-height:46px;

    border:1px solid var(--rkm-border);

    border-radius:12px;

    background:#FFFFFF;

    color:var(--rkm-text);

    font-weight:700;
}

.rkm-full{
    width:100%;
}


/* ============================================================
   EMPTY
   ============================================================ */

.rkm-empty{
    display:flex;

    width:100%;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:4px;

    min-height:150px;

    padding:30px 20px;

    border:1px dashed var(--rkm-border);

    border-radius:16px;

    background:#FFFFFF;

    color:var(--rkm-muted);

    text-align:center;
}

.rkm-empty strong{
    color:var(--rkm-text);
}

.rkm-empty span{
    font-size:11px;
}


/* ============================================================
   ERRORS
   ============================================================ */

.rkm-error{
    margin:10px 20px;

    padding:10px 12px;

    border-radius:10px;

    background:#FEF2F2;

    color:#B91C1C;

    font-size:10px;
}

.rkm-error-text{
    color:#B91C1C;

    font-size:9px;
}


/* ============================================================
   SUCCESS
   ============================================================ */

.rkm-success-page{
    display:grid;

    min-height:100vh;

    place-items:center;

    padding:20px;
}

.rkm-success{
    display:flex;

    width:min(440px,100%);

    flex-direction:column;

    align-items:center;

    gap:10px;

    padding:30px;

    border:1px solid var(--rkm-border);

    border-radius:22px;

    background:#FFFFFF;

    box-shadow:var(--rkm-shadow-lg);

    text-align:center;
}

.rkm-success-icon{
    display:grid;

    width:62px;
    height:62px;

    place-items:center;

    border-radius:999px;

    background:#DCFCE7;

    color:#15803D;

    font-size:27px;
}

.rkm-success h1{
    margin:0;

    font-size:28px;
}

.rkm-success p{
    margin:0;

    color:var(--rkm-muted);

    font-size:12px;

    line-height:1.5;
}

.rkm-success-total{
    display:flex;

    width:100%;

    justify-content:space-between;

    padding:12px 0;

    border-top:1px solid var(--rkm-border);

    border-bottom:1px solid var(--rkm-border);
}

.rkm-success-status{
    font-size:11px;
}


/* ============================================================
   BOTTOM SPACE
   ============================================================ */

.rkm-page-bottom{
    height:120px;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:600px){

    .rkm-app{
        padding-bottom:150px;
    }

    .rkm-main{
        width:calc(100% - 20px);
    }

    .rkm-header{
        padding:20px 12px 15px;
    }

    .rkm-logo{
        max-width:220px;

        max-height:86px;
    }

    .rkm-store-meta{
        margin-top:6px;
    }

    .rkm-search{
        min-height:56px;

        border-radius:18px;
    }

    .rkm-intro{
        padding:22px 2px 12px;
    }

    .rkm-intro h1{
        font-size:32px;
    }

    .rkm-intro p{
        font-size:14px;
    }

    .rkm-category-shell{
        margin-right:-10px;

        margin-left:-10px;

        padding-right:10px;

        padding-left:10px;
    }

    .rkm-product{
        grid-template-columns:36% minmax(0,1fr);
    }

    .rkm-product-image{
        min-height:158px;
    }

    .rkm-image-fallback{
        min-height:158px;
    }

    .rkm-product-content{
        padding:13px;
    }

    .rkm-product-head strong,
    .rkm-product-head b{
        font-size:15px;
    }

    .rkm-product-content p{
        margin:7px 0;

        font-size:12px;
    }

    .rkm-product-meta{
        font-size:11px;
    }

    .rkm-floating-cart{
        right:12px;

        bottom:76px;

        left:12px;

        width:calc(100% - 24px);

        min-height:66px;

        padding:9px 14px;

        border-radius:21px;
    }

    .rkm-bottom-nav{
        min-height:68px;
    }

    .rkm-bottom-nav a{
        gap:3px;

        padding-right:1px;
        padding-left:1px;
    }

    .rkm-bottom-nav svg{
        width:20px;
        height:20px;
    }

    .rkm-bottom-nav span{
        font-size:9px;
    }

    .rkm-drawer{
        top:auto;

        width:100%;

        max-height:94vh;

        border-radius:22px 22px 0 0;

        box-shadow:0 -18px 50px rgba(0,0,0,.18);
    }

    .rkm-drawer-image{
        height:245px;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media(max-width:390px){

    .rkm-logo{
        max-width:195px;
    }

    .rkm-rating{
        font-size:12px;
    }

    .rkm-intro h1{
        font-size:29px;
    }

    .rkm-intro p{
        font-size:13px;
    }

    .rkm-categories button{
        min-height:39px;

        padding:0 14px;

        font-size:11px;
    }

    .rkm-product{
        grid-template-columns:37% minmax(0,1fr);
    }

    .rkm-product-image{
        min-height:150px;
    }

    .rkm-image-fallback{
        min-height:150px;
    }

    .rkm-product-content{
        padding:11px;
    }

    .rkm-product-head{
        gap:6px;
    }

    .rkm-product-head strong,
    .rkm-product-head b{
        font-size:14px;
    }

    .rkm-product-content p{
        font-size:11px;
    }

    .rkm-product-meta{
        font-size:10px;
    }

    .rkm-add{
        width:36px;
        height:36px;

        font-size:22px;
    }

    .rkm-floating-left strong,
    .rkm-floating-right strong{
        font-size:11px;
    }

    .rkm-floating-left small{
        font-size:9px;
    }

    .rkm-bottom-nav span{
        font-size:8.5px;
    }

}

/* ============================================================
   PRODUCT DRAWER FOOTER - SCROLL CONTENT
   ============================================================ */

.rkm-product-footer{
    position:static;
    flex-shrink:0;
    margin-top:8px;
    padding:14px 16px calc(110px + env(safe-area-inset-bottom));
    background:#FFFFFF;
}

@media(max-width:768px){
    .rkm-product-footer{
        position:static;
        bottom:auto;
        grid-template-columns:auto minmax(0,1fr);
    }
}

/* ============================================================
   CART / CHECKOUT FOOTER - MOBILE SCROLL CONTENT
   ============================================================ */

.rkm-checkout-footer{
    position:static;
    flex-shrink:0;
    margin-top:4px;
    padding:14px 16px calc(110px + env(safe-area-inset-bottom));
    background:#FFFFFF;
}

@media(max-width:768px){
    .rkm-checkout-footer{
        position:static;
        bottom:auto;
    }
}


/* ============================================================
   SQUARE CHECKOUT
   ============================================================ */
.rkm-square-payment{
    display:grid;
    gap:12px;
    padding:16px;
    border:1px solid #e5e7eb;
    border-radius:18px;
    background:#fff;
}
.rkm-square-payment-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rkm-square-payment-head div{display:grid;gap:3px}
.rkm-square-payment-head span{font-size:11px;font-weight:800;letter-spacing:.08em;color:#6b7280}
.rkm-square-payment-head strong{font-size:15px;color:#111827}
.rkm-square-payment-head b{font-size:15px;color:#111827}
.rkm-square-card{min-height:90px}
.rkm-square-help{color:#6b7280;line-height:1.4}
.rkm-square-status{padding:10px 12px;border-radius:12px;background:#fff1f2;color:#be123c;font-size:13px;font-weight:700}