/* 
   REST SAAS - COMPONENTS CSS 
*/

/* ── Public Footer ── */
.rs-public-footer {
    padding: 60px 20px;
    background: #f8f9fa;
    text-align: center;
    border-top: 1px solid var(--rs-border);
    margin-top: 60px;
}
.rs-public-footer p {
    color: var(--rs-text-muted);
    font-size: 1.1rem;
    margin-bottom: 20px;
}
.rs-public-footer .rs-btn-ghost {
    border: 2px solid var(--rs-primary);
    color: var(--rs-primary);
    padding: 12px 24px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--rs-transition);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.rs-public-footer .rs-btn-ghost:hover {
    background: var(--rs-primary);
    color: white;
}

/* ── Navbar ── */
.rs-navbar {
    background: var(--rs-glass-bg);
    backdrop-filter: var(--rs-glass-blur);
    -webkit-backdrop-filter: var(--rs-glass-blur);
    border-bottom: 1px solid var(--rs-glass-border);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
}
.rs-nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    position: relative;
}
.rs-nav-brand { margin: 0; z-index: 1001; position: relative; }
.rs-nav-logo-text { margin: 0; font-size: 1.5rem; color: var(--rs-primary); letter-spacing: -0.02em; }

/* Desktop Navigation Layout */
.rs-nav-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
}

.rs-nav-links {
    list-style: none; margin: 0; padding: 0;
}
.rs-nav-links a {
    text-decoration: none;
    color: var(--rs-text-muted);
    font-weight: 500;
    transition: var(--rs-transition);
    font-size: 0.95rem;
}
.rs-nav-links a:hover { color: var(--rs-text); }
.rs-nav-auth-buttons { display: flex; align-items: center; gap: 16px; }

/* Desktop Only Adjustments */
@media (min-width: 769px) {
    .rs-nav-links {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        gap: 32px;
    }
}

.rs-hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}
.rs-hamburger span {
    width: 100%;
    height: 2px;
    background: var(--rs-text);
    border-radius: 2px;
    transition: var(--rs-transition);
}
.rs-hamburger.active span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.rs-hamburger.active span:nth-child(2) { opacity: 0; }
.rs-hamburger.active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* Mobile Navbar Overlay */
@media (max-width: 768px) {
    .rs-hamburger { display: flex; }
    .rs-nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: var(--rs-bg-alt);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 24px;
        gap: 40px;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1000;
    }
    .rs-nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    .rs-nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        width: 100%;
    }
    .rs-nav-links a {
        font-size: 1.5rem;
        color: var(--rs-text);
        font-weight: 600;
    }
    .rs-nav-auth-buttons {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 16px;
    }
    .rs-nav-auth-buttons .rs-btn {
        width: 100%;
        max-width: 300px;
        text-align: center;
        justify-content: center;
    }
}

/* ── Buttons ── */
.rs-btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: var(--rs-transition);
    border: none;
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
}
.rs-btn-primary {
    background: var(--rs-primary);
    color: #ffffff;
}
.rs-btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    color: #ffffff;
}
.rs-btn-full {
    display: block;
    width: 100%;
}

/* ── Hero ── */
.rs-hero {
    position: relative;
    padding: 120px 0;
    text-align: center;
    background-color: var(--rs-bg);
    background-size: cover;
    background-position: center;
    min-height: 80vh;
    display: flex;
    align-items: center;
}
.rs-hero-overlay {
    position: absolute; top:0; left:0; right:0; bottom:0;
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,250,0.95) 100%);
    z-index: 1;
}
.rs-hero-content {
    position: relative; z-index: 2;
    max-width: 800px; margin: 0 auto;
}
.rs-hero h1 {
    font-size: 4rem; line-height: 1.1; margin-bottom: 24px; letter-spacing: -1px;
}
.rs-text-primary { color: var(--rs-primary); }
.rs-hero p {
    font-size: 1.25rem; color: var(--rs-text-muted); margin-bottom: 40px;
}
.rs-hero-buttons { display: flex; gap: 16px; justify-content: center; }

/* ── Auth Forms ── */
.rs-auth-section {
    min-height: 80vh; display: flex; align-items: center; background: var(--rs-bg);
}
.rs-auth-card {
    background: var(--rs-bg-alt);
    max-width: 450px; margin: 0 auto;
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--rs-shadow-lg);
}
.rs-auth-header { text-align: center; margin-bottom: 30px; }
.rs-auth-header i { font-size: 2.5rem; color: var(--rs-primary); margin-bottom: 16px; display: block; }
.rs-auth-errors { background: #fee2e2; color: #991b1b; padding: 12px; border-radius: 8px; margin-bottom: 20px; }
.rs-auth-footer { text-align: center; margin-top: 24px; color: var(--rs-text-muted); }
.rs-auth-footer a { color: var(--rs-primary); font-weight: 600; text-decoration: none; }

/* ── Dashboard Layout ── */
.rs-dashboard {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--rs-bg);
}

/* Sidebar: Modern & Minimal */
.rs-dash-sidebar-backdrop { display: none; }
.rs-dash-sidebar-close { display: none; }

.rs-dash-sidebar {
    width: 260px;
    background: var(--rs-bg-alt);
    border-right: 1px solid var(--rs-border);
    display: flex;
    flex-direction: column;
    z-index: 10;
    transition: var(--rs-transition);
}
.rs-dash-brand {
    padding: 32px 24px;
}
.rs-dash-brand h3 { 
    margin: 0 0 8px 0; 
    font-size: 1.25rem; 
    letter-spacing: -0.03em;
}
.rs-plan-badge {
    display: inline-block; 
    padding: 2px 10px; 
    border-radius: 20px; 
    font-size: 0.7rem; 
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--rs-primary-light); 
    color: var(--rs-primary);
}
.rs-dash-nav {
    flex: 1; overflow-y: auto; padding: 0 16px; display: flex; flex-direction: column; gap: 2px;
}
.rs-dash-link {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    color: var(--rs-text-muted); text-decoration: none; font-weight: 500;
    border-radius: 8px; transition: var(--rs-transition);
    font-size: 0.9rem;
}
.rs-dash-link i { width: 20px; text-align: center; font-size: 1rem; opacity: 0.7; }
.rs-dash-link:hover { 
    background: var(--rs-bg); 
    color: var(--rs-text); 
}
.rs-dash-link.active { 
    background: var(--rs-primary-light); 
    color: var(--rs-primary); 
    font-weight: 600;
}
.rs-dash-link.active i { opacity: 1; }

.rs-dash-sidebar-footer { padding: 24px; border-top: 1px solid var(--rs-border); }
.rs-dash-logout { 
    color: var(--rs-text-muted); 
    text-decoration: none; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-weight: 500; 
    font-size: 0.9rem;
    transition: var(--rs-transition);
}
.rs-dash-logout:hover { color: var(--rs-danger); }

/* Content Area: Modular Grid */
.rs-dash-content {
    flex: 1; overflow-y: auto; padding: 48px;
}
.rs-dash-tab { display: none; animation: fadeIn 0.4s ease; }
.rs-dash-tab.active { display: block; }
.rs-dash-tab-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 32px; 
}
.rs-dash-tab-header h2 { 
    margin: 0; 
    font-size: 1.8rem; 
    letter-spacing: -0.04em; 
}

/* Glass Panels & Stats */
.rs-dash-card {
    background: var(--rs-bg-alt);
    border: 1px solid var(--rs-border);
    border-radius: 16px;
    box-shadow: var(--rs-shadow-sm);
    padding: 24px;
    transition: var(--rs-transition);
}
.rs-dash-card:hover {
    box-shadow: var(--rs-shadow-md);
}

.rs-dash-stats-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px;
}
.rs-dash-stat-card {
    background: var(--rs-bg-alt); 
    padding: 24px; 
    border-radius: 16px; 
    border: 1px solid var(--rs-border);
    box-shadow: var(--rs-shadow-sm);
    display: flex; 
    flex-direction: column;
    gap: 4px;
}
.rs-dash-stat-icon { 
    width: 40px; 
    height: 40px; 
    background: var(--rs-primary-light); 
    color: var(--rs-primary); 
    border-radius: 10px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 1.2rem; 
    margin-bottom: 12px; 
}
.rs-dash-stat-num { 
    font-size: 1.75rem; 
    font-weight: 800; 
    color: var(--rs-text); 
    letter-spacing: -0.03em;
}
.rs-dash-stat-label {
    color: var(--rs-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Tables: Cloud Style */
.rs-table { 
    width: 100%; 
    border-collapse: separate; 
    border-spacing: 0;
    background: var(--rs-bg-alt); 
    border: 1px solid var(--rs-border);
    border-radius: 12px; 
    overflow: hidden; 
}
.rs-table th { 
    background: #fdfdfd; 
    text-align: left; 
    padding: 14px 20px; 
    font-weight: 600; 
    color: var(--rs-text-muted); 
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--rs-border); 
}
.rs-table td { 
    padding: 16px 20px; 
    border-bottom: 1px solid var(--rs-border); 
    vertical-align: middle; 
    color: var(--rs-text);
    font-size: 0.95rem;
}
.rs-table tr:last-child td { border-bottom: none; }
.rs-table tr:hover td { background: #f9fafb; }

.rs-btn-icon { 
    background: none; 
    border: 1px solid transparent; 
    cursor: pointer; 
    color: var(--rs-text-muted); 
    padding: 8px; 
    border-radius: 8px; 
    transition: var(--rs-transition);
}
.rs-btn-icon:hover { 
    background: var(--rs-bg); 
    border-color: var(--rs-border);
    color: var(--rs-text); 
}
.rs-badge-status { 
    padding: 4px 10px; 
    border-radius: 20px; 
    font-size: 0.75rem; 
    font-weight: 600; 
}
.rs-status-nuevo { background: #dcfce7; color: #166534; }
.rs-status-entregado { background: #f1f5f9; color: #475569; }

/* ── Public Store ── */
.rs-store {
    background: var(--rs-bg);
    min-height: 100vh;
}
body.rs-is-embed .rs-store,
.rs-is-embed .rs-store {
    min-height: 0 !important;
    height: auto !important;
}
.rs-store-header { background: var(--rs-bg-alt); margin-bottom: 40px; box-shadow: var(--rs-shadow-sm); }
.rs-store-banner { height: 200px; background-size: cover; background-position: center; }
.rs-store-header-content { display: flex; gap: 24px; padding-bottom: 32px; margin-top: -60px; position: relative; }
.rs-store-logo {
    width: 140px; height: 140px; border-radius: 20px; border: 4px solid var(--rs-bg-alt);
    background: #fff; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.1); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.rs-store-logo img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.rs-store-logo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: bold; color: var(--rs-text-muted); background: #f1f5f9; }
.rs-store-info h1 { margin: 0 0 8px 0; font-size: 2rem; display: flex; align-items: center; gap: 8px; }
.rs-verified-badge { color: #3182ce; font-size: 1.2rem; }
.rs-store-desc { color: var(--rs-text-muted); margin-bottom: 16px; }
.rs-store-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.9rem; }
.rs-store-status.open { color: var(--rs-success); font-weight: 600; }
.rs-store-status.closed { color: var(--rs-danger); font-weight: 600; }

.rs-store-main { display: flex; gap: 32px; align-items: flex-start; padding-bottom: 100px; }
.rs-store-sidebar { width: 250px; flex-shrink: 0; position: sticky; top: 24px; }
.rs-store-categories h3 { margin-bottom: 16px; }
.rs-store-categories ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px;}
.rs-store-categories a {
    display: block; padding: 10px 20px; background: var(--rs-bg); border-radius: 30px;
    text-decoration: none; color: var(--rs-text-muted); font-weight: 500; transition: var(--rs-transition); border: 1px solid var(--rs-border);
}
.rs-store-categories a:hover, .rs-store-categories a.active {
    border-color: var(--rs-primary); color: #fff; background: var(--rs-primary);
}

.rs-cat-thumb {
    width: 28px; height: 28px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
}
.rs-cat-icon {
    width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(128, 128, 128, 0.15); font-size: 0.85rem; flex-shrink: 0; color: var(--rs-text);
}

.rs-store-products { flex: 1; }
.rs-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px; }
.rs-product-card {
    background: var(--rs-bg-alt); border-radius: 20px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: var(--rs-transition); border: 1px solid rgba(0,0,0,0.04); display: flex; flex-direction: column;
    position: relative; cursor: pointer;
}
.rs-product-card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }
.rs-product-img { height: 220px; background: #f8f9fa; overflow: hidden; position: relative; }
.rs-product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.rs-product-card:hover .rs-product-img img { transform: scale(1.05); }
.rs-product-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.rs-product-body h4 { margin: 0 0 10px 0; font-size: 1.15rem; color: var(--rs-text); line-height: 1.3; }
.rs-product-desc { color: var(--rs-text-muted); font-size: 0.95rem; margin-bottom: 20px; flex: 1; line-height: 1.5; }
.rs-product-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rs-border); }
.rs-product-price { font-weight: 700; font-size: 1.3rem; color: var(--rs-primary); }
.rs-btn-add-cart {
    padding: 0 16px;
    height: 40px;
    border-radius: 12px;
    background: var(--rs-primary);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: var(--rs-transition);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.rs-btn-add-cart:hover { background: var(--rs-secondary); transform: scale(1.05); }
.rs-closed-msg { color: var(--rs-danger); font-weight: 600; font-size: 0.9rem; }

/* ── Cart Drawer ── */
.rs-floating-cart-btn {
    position: fixed; bottom: 24px; right: 24px; z-index: 900; background: var(--rs-primary); color: var(--rs-text);
    border: none; border-radius: 50px; padding: 12px 24px; display: none; align-items: center; gap: 12px;
    font-size: 1rem; font-weight: 600; cursor: pointer; box-shadow: 0 8px 32px rgba(0,0,0,0.15); transition: var(--rs-transition);
    border: 1px solid rgba(255,255,255,0.1);
}
.rs-floating-cart-btn:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
.rs-cart-badge { background: var(--rs-bg); color: var(--rs-text); border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; }
.rs-cart-total { font-weight: 500; opacity: 0.9; border-left: 1px solid rgba(255,255,255,0.3); padding-left: 12px; }

/* ── Button Animations ── */
@keyframes rsPop {
    0% { transform: scale(1); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); }
}
.rs-btn-pop {
    animation: rsPop 0.3s ease;
    background: #22c55e !important;
    border-color: #22c55e !important;
}
@keyframes rsBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.rs-floating-cart-btn.bounce {
    animation: rsBounce 0.3s ease;
}

.rs-cart-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 999; display: none; backdrop-filter: blur(4px);
}
.rs-cart-overlay.open { display: block; }
.rs-cart-drawer {
    position: fixed; top: 0; right: -400px; bottom: 0; width: 400px; max-width: 100%; background: var(--rs-bg);
    z-index: 1000; box-shadow: -4px 0 24px rgba(0,0,0,0.1); transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column;
}
.rs-cart-drawer.open { right: 0; }
.rs-cart-header { padding: 24px; border-bottom: 1px solid var(--rs-border); display: flex; justify-content: space-between; align-items: center; }
.rs-cart-header h3 { margin: 0; }
.rs-cart-close { background: none; border: none; font-size: 1.5rem; color: var(--rs-text-muted); cursor: pointer; }
.rs-cart-body { flex: 1; overflow-y: auto; padding: 24px; }
.rs-cart-footer { padding: 24px; border-top: 1px solid var(--rs-border); background: var(--rs-bg); }

.rs-cart-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--rs-border); }
.rs-cart-item:last-child { border: none; margin: 0; padding: 0; }
.rs-cart-item-info h4 { margin: 0 0 4px 0; font-size: 1rem; }
.rs-cart-item-price { color: var(--rs-text-muted); font-size: 0.9rem; }
.rs-cart-item-actions { display: flex; align-items: center; gap: 12px; background: var(--rs-bg); border-radius: 8px; padding: 4px; border: 1px solid var(--rs-border); }
.rs-qty-btn { background: none; border: none; width: 24px; height: 24px; cursor: pointer; font-weight: bold; color: var(--rs-text); border-radius: 4px;}
.rs-qty-btn:hover { background: #e2e8f0; }

.rs-summary-row { display: flex; justify-content: space-between; margin-bottom: 12px; color: var(--rs-text-muted); }
.rs-summary-row.total { font-weight: 700; color: var(--rs-text); font-size: 1.25rem; border-top: 1px solid var(--rs-border); padding-top: 12px; margin-bottom: 24px; }

/* Checkout Modal */
#rs-checkout-modal .rs-modal { max-width: 600px; }

/* ── Product Configuration Modal ── */
.rs-modal-product {
    max-width: 500px;
    width: 95%;
}
.rs-p-modal-gallery {
    margin-bottom: 24px;
}
.main-feat-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 16px;
    background: #f1f5f9;
    margin-bottom: 12px;
}
.rs-p-gallery-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
}
.rs-p-gallery-thumbs img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--rs-transition);
}
.rs-p-gallery-thumbs img.active {
    border-color: var(--rs-primary);
}
.rs-p-modal-desc {
    color: var(--rs-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 24px;
    background: var(--rs-bg);
    padding: 12px;
    border-radius: 12px;
    border-left: 4px solid var(--rs-primary);
}
.rs-p-option-group {
    margin-bottom: 28px;
}
.rs-p-option-group label {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    color: var(--rs-text-muted);
}
.rs-p-option-group label .req { color: var(--rs-danger); margin-left: 4px; }
.rs-p-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}
.rs-p-opt {
    position: relative;
    cursor: pointer;
}
.rs-p-opt input {
    position: absolute; opacity: 0;
}
.rs-p-opt span {
    display: block;
    padding: 10px;
    text-align: center;
    background: var(--rs-bg);
    border: 1px solid var(--rs-border);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: var(--rs-transition);
}
.rs-p-opt input:checked + span {
    border-color: var(--rs-primary);
    background: var(--rs-primary-light);
    color: var(--rs-primary);
}
.rs-p-extras {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rs-p-extra-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--rs-bg);
    border: 1px solid var(--rs-border);
    border-radius: 12px;
    cursor: pointer;
    transition: var(--rs-transition);
}
.rs-p-extra-item:hover { border-color: var(--rs-primary); }
.rs-p-extra-item input { width: 18px; height: 18px; accent-color: var(--rs-primary); }
.rs-p-extra-item .extra-info { flex: 1; display: flex; justify-content: space-between; align-items: center; }
.rs-p-extra-item span { font-weight: 500; font-size: 0.9rem; }
.rs-p-extra-item small { color: var(--rs-primary); font-weight: 600; }

.rs-p-footer-price {
    display: flex;
    flex-direction: column;
}
.rs-p-footer-price span { font-size: 0.75rem; color: var(--rs-text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.rs-p-footer-price strong { font-size: 1.5rem; color: var(--rs-text); letter-spacing: -0.02em; }

.rs-modal-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--rs-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--rs-bg-alt);
    border-radius: 0 0 20px 20px;
}
.rs-modal-footer .rs-btn { padding: 12px 32px; }

/* ═══════════════════════════════════════
   REELS SECTION (Premium)
═══════════════════════════════════════ */
.rs-reels-section {
    padding: 28px 0 20px;
    margin-bottom: 8px;
}
.rs-reels-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 0 4px;
}
.rs-reels-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rs-reels-header h3 i { color: #a855f7; }
.rs-reels-hint {
    margin: 0;
    font-size: 0.78rem;
    color: var(--rs-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.rs-reels-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
}
.rs-reels-track::-webkit-scrollbar { display: none; }

.rs-reel-card {
    position: relative;
    flex: 0 0 185px;
    width: 185px;
    height: 329px; /* 9:16 ratio */
    border-radius: 18px;
    overflow: hidden;
    scroll-snap-align: start;
    background: #000;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}
.rs-reel-card:active { transform: scale(0.97); }

.rs-reel-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rs-reel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px 14px;
    z-index: 2;
}
.rs-reel-info { margin-bottom: 12px; }
.rs-reel-name {
    margin: 0 0 4px 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rs-reel-price {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.rs-reel-add-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 12px;
    background: var(--rs-primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.2s, transform 0.1s;
}
.rs-reel-add-btn:active { transform: scale(0.96); }

.rs-reel-mute-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(4px);
    font-size: 0.85rem;
    transition: background 0.2s;
}
.rs-reel-mute-btn:hover { background: rgba(0,0,0,0.75); }
.rs-reel-mute-btn.unmuted { background: var(--rs-primary); }

.rs-reel-play-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 4;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: transform 0.15s ease, opacity 0.15s;
    opacity: 0;
    pointer-events: none;
}
.rs-reel-card.paused .rs-reel-play-indicator {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* Floating Reels Button */
.rs-floating-reels-btn {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4);
    z-index: 999;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.rs-floating-reels-btn:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.6);
}
.rs-floating-reels-btn i {
    animation: rs-pulse-reels 2s infinite;
}
@keyframes rs-pulse-reels {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ═══════════════════════════════════════
   FULL SCREEN REELS (TikTok Style)
═══════════════════════════════════════ */
.rs-reels-modal {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 10000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: none;
}
.rs-reels-modal.open { display: flex; animation: rs-fade-in 0.3s ease; }

@keyframes rs-fade-in {
    from { opacity: 0; transform: scale(1.1); }
    to { opacity: 1; transform: scale(1); }
}

.rs-reels-container {
    height: 100vh;
    width: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.rs-reels-container::-webkit-scrollbar { display: none; }

.rs-reel-full-item {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.rs-reel-video-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    max-width: calc(100vh * 9 / 16); /* Force 9:16 based on viewport height */
    aspect-ratio: 9 / 16;
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rs-reel-full-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rs-reel-full-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 120px 24px 60px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    pointer-events: none;
    z-index: 2;
}
.rs-reel-full-overlay > * { pointer-events: auto; }

.rs-reel-full-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    max-width: 85%;
}
.rs-reel-full-name {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 15px rgba(0,0,0,0.8);
    letter-spacing: -0.5px;
}
.rs-reel-full-description {
    margin: 0;
    font-size: 1rem;
    opacity: 0.95;
    line-height: 1.4;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0,0,0,0.8);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rs-reel-full-price {
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.rs-reel-full-add-btn {
    width: 100%;
    padding: 18px;
    border: none;
    border-radius: 16px;
    background: var(--rs-primary);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    transition: transform 0.2s, background 0.2s;
}
.rs-reel-full-add-btn:active { transform: scale(0.95); }

.rs-reels-modal-close {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 10001;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
}
.rs-reels-modal-close:hover { background: rgba(255,255,255,0.25); transform: rotate(90deg); }

.rs-reel-full-mute-btn {
    position: absolute;
    top: 24px;
    right: 24px; /* Move to right if close is on right? Actually close is fixed. */
    left: 24px;
    z-index: 10001;
    background: rgba(0,0,0,0.3);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.rs-checkout-totals {
    background: var(--rs-primary-light);
    padding: 20px;
    border-radius: 16px;
    margin: 20px 0;
    text-align: center;
    border: 1px solid var(--rs-primary);
}
.rs-checkout-totals p { margin: 0; color: var(--rs-primary); font-size: 0.9rem; font-weight: 500; }
.rs-checkout-totals strong { display: block; font-size: 1.8rem; margin-top: 4px; }

/* Upgrade CTA In Dashboard */
.rs-upgrade-cta .rs-dash-link {
    display: inline-flex;
    margin: 0;
}

/* Animations */
@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.bounce { animation: bounce 0.3s ease; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Store Search */
.rs-store-search-wrap {
    position: relative;
    margin-bottom: 24px;
}
.rs-store-search-wrap i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rs-text-muted);
}
.rs-store-search-wrap input {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 16px 16px 48px;
    border: 1px solid var(--rs-border);
    border-radius: 16px;
    font-size: 1rem;
    background: var(--rs-bg);
    transition: var(--rs-transition);
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.rs-store-search-wrap input:focus {
    outline: none;
    border-color: var(--rs-primary);
    box-shadow: 0 4px 15px var(--rs-primary-light);
}

/* Responsive adjustments */
@media (min-width: 769px) {
    .rs-dash-mobile-header { display: none !important; }
}
@media (max-width: 768px) {
    .rs-dashboard { flex-direction: column; }
    .rs-dash-mobile-header { display: flex !important; }
    
    /* Center Store Main Content */
    .rs-store-main { 
        flex-direction: column; 
        gap: 24px; 
        align-items: center; 
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .rs-store-products {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* Center Header on Mobile */
    .rs-store-header-content { flex-direction: column; align-items: center; text-align: center; gap: 16px; margin-top: -70px; }
    .rs-store-logo { width: 140px; height: 140px; margin: 0 auto; }
    .rs-store-info { padding-top: 0; display: flex; flex-direction: column; align-items: center; }
    .rs-store-info h1 { justify-content: center; font-size: 1.8rem; }
    .rs-store-meta { justify-content: center; }
    
    /* Search Premium Mobile (Centered & Larger) */
    .rs-store-search-wrap { 
        width: 100%; 
        max-width: 480px; 
        margin: 0 auto 32px auto; 
    }
    .rs-store-search-wrap input { 
        border-radius: 30px; 
        box-shadow: 0 8px 25px rgba(0,0,0,0.08); 
        border: 1px solid var(--rs-border); 
        padding: 20px 20px 20px 55px; 
        background: var(--rs-bg-alt); 
        color: var(--rs-text);
        font-size: 1.1rem;
    }
    .rs-store-search-wrap i { left: 22px; font-size: 1.2rem; }
    
    /* Mobile Categories: Full Width Vertical Column */
    .rs-store-sidebar { 
        width: 100%; position: relative; top: 0; z-index: 10; 
        background: transparent;
        padding: 0 0 16px 0; margin-bottom: 24px; border-bottom: 1px solid var(--rs-border);
    }
    .rs-store-categories ul { flex-direction: column; overflow-x: visible; padding: 0; gap: 10px; margin: 0; width: 100%; }
    .rs-store-categories ul li { width: 100%; }
    .rs-store-categories a { 
        width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start;
        padding: 14px 18px; font-size: 1rem; border-radius: 14px; background: var(--rs-bg); color: var(--rs-text);
        box-shadow: none; border: 1px solid var(--rs-border); font-weight: 600; 
    }
    .rs-store-categories a.active { background: var(--rs-primary); color: #fff; border-color: var(--rs-primary); }
    .rs-store-categories h3 { display: block; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; color: var(--rs-text); opacity: 0.8; }

    /* Centered & Larger Vertical Product Cards */
    /* Mobile Layout for Classic Grid Template (Large Photos on Top) */
    .rs-template-classic .rs-products-grid { 
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px; 
        padding: 0;
    }
    .rs-template-classic .rs-product-card { 
        flex-direction: column !important;
        align-items: stretch !important;
        height: auto; 
        width: 100%;
        max-width: 100%; 
        margin: 0; 
        border-radius: 18px !important; 
        background: var(--rs-bg-alt) !important; 
        box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important; 
        border: 1px solid var(--rs-border) !important; 
        padding: 0 !important;
        overflow: hidden !important;
    }
    .rs-template-classic .rs-product-img { 
        order: 1 !important;
        width: 100% !important; 
        height: 200px !important; 
        min-width: 100% !important;
        border-radius: 18px 18px 0 0 !important; 
        margin: 0 !important;
        background: var(--rs-bg);
    }
    .rs-template-classic .rs-product-img img { width: 100%; height: 100%; object-fit: cover; }
    .rs-template-classic .rs-product-body { 
        order: 2 !important;
        padding: 16px !important; 
        width: 100%;
        box-sizing: border-box;
        display: flex; 
        flex-direction: column;
        text-align: left; 
    }
    .rs-template-classic .rs-product-body h4 { 
        font-size: 1.15rem !important; 
        margin-bottom: 6px !important; 
        font-weight: 700 !important; 
        color: var(--rs-text) !important;
        text-align: left !important;
        line-height: 1.3 !important;
    }
    .rs-template-classic .rs-product-desc { 
        margin-bottom: 14px !important; 
        font-size: 0.9rem !important; 
        line-height: 1.4 !important; 
        color: var(--rs-text-muted) !important; 
        text-align: left !important;
    }
    .rs-template-classic .rs-product-footer { 
        padding-top: 12px !important; 
        border-top: 1px solid var(--rs-border) !important; 
        display: flex !important;
        flex-direction: row !important; 
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    .rs-template-classic .rs-btn-add-cart { 
        padding: 8px 16px !important; 
        width: auto !important; 
        max-width: fit-content !important;
        height: 38px !important; 
        border-radius: 10px !important; 
        font-size: 0.88rem !important; 
        font-weight: 700 !important;
    }

    /* Mobile Layout for Compact Delivery Menu (Photos on Left) */
    .rs-template-compact-grid .rs-products-grid { 
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px; 
        padding: 0;
    }
    .rs-template-compact-grid .rs-product-card { 
        flex-direction: row !important;
        align-items: center !important; 
        justify-content: space-between !important;
        height: auto; 
        width: 100%;
        max-width: 100%; 
        margin: 0; 
        border-radius: 16px !important; 
        background: var(--rs-bg-alt) !important; 
        box-shadow: 0 4px 16px rgba(0,0,0,0.05) !important; 
        border: 1px solid var(--rs-border) !important; 
        padding: 14px !important;
        box-sizing: border-box !important;
    }
    .rs-template-compact-grid .rs-product-img { 
        order: 1 !important;
        width: 90px !important; 
        height: 90px !important; 
        min-width: 90px !important;
        border-radius: 12px !important; 
        flex-shrink: 0 !important; 
        overflow: hidden !important;
        margin-right: 14px !important;
        margin-left: 0 !important;
        background: var(--rs-bg) !important;
    }
    .rs-template-compact-grid .rs-product-img img { width: 100%; height: 100%; object-fit: cover; }
    .rs-template-compact-grid .rs-product-body { 
        order: 2 !important;
        padding: 0 !important; 
        flex: 1 !important; 
        min-width: 0 !important;
        display: flex !important; 
        flex-direction: column !important;
        justify-content: space-between !important; 
        text-align: left !important; 
    }
    .rs-product-body h4 { 
        font-size: 1.05rem; 
        margin-bottom: 4px; 
        display: -webkit-box; 
        -webkit-line-clamp: 2; 
        -webkit-box-orient: vertical; 
        overflow: hidden;
        font-weight: 700; 
        color: var(--rs-text);
        text-align: left;
        line-height: 1.3;
    }
    .rs-product-desc { 
        display: -webkit-box; 
        -webkit-line-clamp: 2; 
        -webkit-box-orient: vertical; 
        overflow: hidden;
        margin-bottom: 10px; 
        font-size: 0.85rem; 
        line-height: 1.4; 
        color: var(--rs-text-muted); 
        text-align: left;
    }
    .rs-product-footer { 
        padding: 0; 
        border: none; 
        display: flex;
        flex-direction: row; 
        align-items: center;
        justify-content: space-between;
        gap: 8px; 
        width: 100%;
        margin-top: auto;
    }
    .rs-product-price-wrap.footer-price {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .rs-product-price { font-size: 1.15rem; font-weight: 800; color: var(--rs-primary); }
    
    /* Compact Action Add Button (Rappi / PedidosYa Style) */
    .rs-btn-add-cart { 
        padding: 7px 14px; 
        width: auto; 
        max-width: fit-content;
        height: 36px; 
        border-radius: 10px; 
        justify-content: center; 
        font-size: 0.85rem; 
        font-weight: 700;
        text-transform: none;
        letter-spacing: normal;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--rs-primary);
        color: #ffffff;
        border: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }
    .rs-btn-add-cart span { display: inline; }

    
    /* Sidebar Backdrop overlay for Mobile */
    .rs-dash-sidebar-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(15, 23, 42, 0.4);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 1999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .rs-dash-sidebar-backdrop.active {
        opacity: 1;
        visibility: visible;
    }

    .rs-dash-sidebar { 
        position: fixed; 
        left: -280px; 
        top: 0; 
        bottom: 0; 
        width: 280px;
        transition: 0.35s cubic-bezier(0.16, 1, 0.3, 1); 
        box-shadow: 10px 0 30px rgba(0,0,0,0.15); 
        z-index: 2000; 
    }
    .rs-dash-sidebar.open { left: 0; }
    
    /* Sidebar Close Button inside sidebar on Mobile */
    .rs-dash-sidebar-close {
        display: flex !important;
        position: absolute;
        top: 20px;
        right: 20px;
        background: var(--rs-bg);
        border: 1px solid var(--rs-border);
        color: var(--rs-text);
        font-size: 1.1rem;
        cursor: pointer;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        transition: var(--rs-transition);
        box-shadow: var(--rs-shadow-sm);
        z-index: 2001;
    }
    .rs-dash-sidebar-close:hover {
        background: var(--rs-primary-light);
        color: var(--rs-primary);
        transform: scale(1.05);
    }

    /* Mobile Header Premium Look */
    .rs-dash-mobile-header {
        background: rgba(255, 255, 255, 0.8) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--rs-border);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
        position: sticky;
        top: 0;
        z-index: 998;
    }

    .rs-dash-content { padding: 24px 16px; }
    .rs-hero h1 { font-size: 2.2rem; }
    .rs-dash-grid { grid-template-columns: 1fr !important; gap: 20px !important; }

    /* Compact 2-column Grid for stats and quick access on Mobile */
    .rs-dash-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .rs-dash-stat-card {
        padding: 16px !important;
        border-radius: 14px !important;
    }
    .rs-dash-stat-num {
        font-size: 1.35rem !important;
    }
    .rs-dash-stat-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
        margin-bottom: 8px !important;
        border-radius: 8px !important;
    }

    .rs-dash-quick-access {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin-bottom: 24px !important;
    }
    .rs-quick-card {
        padding: 18px 12px !important;
        border-radius: 14px !important;
        gap: 8px !important;
    }
    .rs-quick-card i {
        font-size: 1.35rem !important;
    }
    .rs-quick-card span {
        font-size: 0.82rem !important;
    }
    
    /* Make the last quick-card stretch full width on mobile for visual balance */
    .rs-dash-quick-access a:last-child {
        grid-column: span 2;
    }

    /* Tables mobile wrapper visual aid */
    .rs-dash-table-wrap {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .rs-modal-product { 
        height: 100%; 
        max-height: 100%; 
        border-radius: 0; 
        display: flex; 
        flex-direction: column; 
    }
    .rs-modal-product .rs-modal-header {
        padding: 16px 20px;
        flex-shrink: 0;
        background: var(--rs-bg-alt);
        border-bottom: 1px solid var(--rs-border);
    }
    .rs-modal-product .rs-modal-body { 
        flex: 1; 
        overflow-y: auto; 
        padding: 20px;
        background: #fff;
        -webkit-overflow-scrolling: touch; 
    }
    #rs-product-config-content {
        display: flex;
        flex-direction: column;
    }
    .rs-p-modal-options {
        order: -1;
        margin-bottom: 20px;
        max-height: 40vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .rs-p-modal-gallery {
        order: 0;
    }
    .rs-p-modal-desc {
        order: 1;
    }
    .rs-p-options {
        display: flex !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
    }
    .rs-p-options::-webkit-scrollbar {
        height: 4px;
    }
    .rs-p-options::-webkit-scrollbar-thumb {
        background: var(--rs-primary);
        border-radius: 4px;
    }
    .rs-p-opt {
        flex: 0 0 auto;
        scroll-snap-align: start;
        min-width: 90px;
    }
    .rs-p-opt span {
        padding: 14px 16px;
        font-size: 0.85rem;
        border-radius: 12px;
        white-space: nowrap;
    }
    .rs-p-extras {
        display: flex !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        flex-direction: row !important;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
    }
    .rs-p-extras::-webkit-scrollbar {
        height: 4px;
    }
    .rs-p-extras::-webkit-scrollbar-thumb {
        background: var(--rs-primary);
        border-radius: 4px;
    }
    .rs-p-extra-item {
        flex: 0 0 auto;
        scroll-snap-align: start;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 12px 16px;
        min-width: 100px;
        gap: 6px;
        margin-bottom: 0;
    }
    .rs-p-extra-item .extra-info {
        flex-direction: column;
        gap: 2px;
    }
    .rs-p-extra-item input { width: 20px; height: 20px; }
    
    .rs-modal-product .rs-modal-footer {
        flex-shrink: 0;
        padding: 20px;
        background: var(--rs-bg-alt);
        border-top: 1px solid var(--rs-border);
        box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .rs-modal-product .rs-p-footer-price strong { font-size: 1.5rem; color: var(--rs-primary); }
    .rs-modal-product .rs-btn { padding: 14px 28px; border-radius: 12px; font-weight: 700; }
    
    .main-feat-img { height: 200px; }

    .rs-public-footer { padding-bottom: 100px; }

    /* POS Responsive: single column on mobile */
    #rs-pos-container {
        max-width: 100vw;
        overflow-x: hidden;
    }
    #rs-pos-container > div {
        grid-template-columns: 1fr !important;
        overflow: hidden !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #rs-pos-container > div > div {
        box-sizing: border-box !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    #rs-pos-container > div > div:first-child {
        border-right: none !important;
        border-bottom: 1px solid var(--rs-border);
    }
    #rs-pos-container > div > div:first-child > div:first-child {
        flex-direction: column !important;
        gap: 8px !important;
    }
    #rs-pos-container > div > div:first-child > div:first-child input {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #rs-pos-container > div > div:first-child > div:first-child select {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #rs-pos-catalog-grid {
        grid-template-columns: 1fr !important;
        max-height: none !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #rs-pos-cart-items {
        max-height: none !important;
    }
    #rs-pos-container .rs-form-row {
        flex-direction: column;
    }
    #rs-pos-container .rs-form-row .rs-form-group {
        width: 100%;
    }

    /* POS Premium Cards on Mobile */
    .rs-pos-item-card {
        flex-direction: row !important;
        align-items: center !important;
        padding: 12px 14px !important;
        gap: 14px !important;
        border-radius: 14px !important;
        background: #fff !important;
        border: 1px solid #e8ecf1 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
        transition: transform 0.15s, box-shadow 0.15s !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .rs-pos-item-card:active {
        transform: scale(0.98) !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
    }
    .rs-pos-item-card img {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        border-radius: 10px !important;
    }
    .rs-pos-item-card > div:nth-child(2) {
        flex: 1 !important;
        font-size: 0.95rem !important;
        height: auto !important;
        -webkit-line-clamp: unset !important;
        min-width: 0 !important;
    }
    .rs-pos-item-card > div:nth-child(3) {
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 2px !important;
        flex-shrink: 0 !important;
    }
    .rs-pos-item-card > div:nth-child(3) > span {
        font-size: 1rem !important;
    }
}

/* ── Premium Toggle Switch (rs-switch) ── */
.rs-switch {
    position: relative;
    display: inline-block !important;
    width: 44px !important;
    height: 24px !important;
    vertical-align: middle;
}

.rs-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.rs-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1 !important; /* Default off color */
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 34px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.rs-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Checked state transitions via input:checked */
.rs-switch input:checked + .rs-slider {
    background-color: var(--rs-primary, #6366f1) !important;
}

.rs-switch input:checked + .rs-slider::before {
    transform: translateX(20px);
}

/* ==========================================================================
   PREMIUM ORDERS & MODALS ENHANCEMENTS (RestSaaS v4.1.4)
   ========================================================================== */

/* ── Interactive Dropdown Status Badge ── */
.rs-status-dropdown-container {
    position: relative;
    display: inline-block;
}

.rs-status-dropdown-trigger {
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700 !important;
    padding: 6px 14px;
    border-radius: 20px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    text-transform: uppercase;
    font-family: inherit;
}

.rs-status-dropdown-trigger i {
    font-size: 0.65rem;
    transition: transform 0.25s ease;
}

.rs-status-dropdown-container.open .rs-status-dropdown-trigger i {
    transform: rotate(180deg);
}

.rs-status-dropdown-trigger.rs-status-nuevo {
    background: #eff6ff !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
}
.rs-status-dropdown-trigger.rs-status-preparando {
    background: #fff7ed !important;
    color: #c2410c !important;
    border: 1px solid #ffedd5 !important;
}
.rs-status-dropdown-trigger.rs-status-listo {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1px solid #d1fae5 !important;
}
.rs-status-dropdown-trigger.rs-status-entregado {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}
.rs-status-dropdown-trigger.rs-status-cancelado {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fee2e2 !important;
}

/* Floating Popover Menu */
.rs-status-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    background: #ffffff;
    border: 1px solid var(--rs-border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    z-index: 1000;
    min-width: 200px;
    padding: 6px;
    box-sizing: border-box;
    display: none;
    animation: rsDropdownIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.rs-status-dropdown-container.open .rs-status-dropdown-menu {
    display: block;
}

.rs-status-dropdown-item {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rs-text);
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.15s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.rs-status-dropdown-item:hover {
    background: var(--rs-bg-light, #f8fafc);
    color: var(--rs-primary);
}

.rs-status-dropdown-item.active {
    background: var(--rs-primary-light);
    color: var(--rs-primary);
}

@keyframes rsDropdownIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Ensure the table doesn't clip absolute dropdowns */
.rs-dash-table-wrap {
    overflow: visible !important;
}
.rs-table {
    overflow: visible !important;
}

/* ── Timeline Stepper inside Detail Modal ── */
.rs-order-timeline-card {
    background: #ffffff;
    border: 1px solid var(--rs-border);
    border-radius: 16px;
    padding: 24px 20px;
    margin-bottom: 24px;
    box-shadow: var(--rs-shadow-sm);
}

.rs-order-timeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin: 20px 0;
    padding: 0 10px;
}

.rs-order-timeline-track {
    position: absolute;
    top: 24px;
    left: 12.5%;
    right: 12.5%;
    height: 4px;
    background: #e2e8f0;
    z-index: 1;
    transform: translateY(-50%);
    border-radius: 2px;
}

.rs-order-timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--rs-primary), #10b981);
    z-index: 2;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0%;
    border-radius: 2px;
}

.rs-timeline-step {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    flex: 1;
}

.rs-timeline-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #64748b;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.rs-timeline-step:hover .rs-timeline-icon {
    transform: scale(1.1);
    border-color: var(--rs-primary);
    color: var(--rs-primary);
}

.rs-timeline-step.completed .rs-timeline-icon {
    background: #ecfdf5;
    border-color: #10b981;
    color: #10b981;
}

.rs-timeline-step.active .rs-timeline-icon {
    background: var(--rs-primary-light);
    border-color: var(--rs-primary);
    color: var(--rs-primary);
    box-shadow: 0 0 0 4px rgba(49, 130, 206, 0.2), 0 4px 10px rgba(0,0,0,0.08);
    animation: rsPulseActive 2s infinite;
}

.rs-timeline-label {
    margin-top: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    text-align: center;
    transition: color 0.3s ease;
}

.rs-timeline-step.active .rs-timeline-label {
    color: var(--rs-primary);
    font-weight: 800;
}

.rs-timeline-step.completed .rs-timeline-label {
    color: #10b981;
}

@keyframes rsPulseActive {
    0% { box-shadow: 0 0 0 0 rgba(49, 130, 206, 0.4), 0 4px 10px rgba(0,0,0,0.08); }
    70% { box-shadow: 0 0 0 8px rgba(49, 130, 206, 0), 0 4px 10px rgba(0,0,0,0.08); }
    100% { box-shadow: 0 0 0 0 rgba(49, 130, 206, 0), 0 4px 10px rgba(0,0,0,0.08); }
}

/* Timeline when order is canceled */
.rs-order-timeline.canceled .rs-order-timeline-track {
    background: #fee2e2;
}
.rs-order-timeline.canceled .rs-order-timeline-progress {
    background: #ef4444;
    width: 100% !important;
}
.rs-order-timeline.canceled .rs-timeline-step .rs-timeline-icon {
    border-color: #fca5a5;
    color: #ef4444;
    background: #fef2f2;
}
.rs-order-timeline.canceled .rs-timeline-step .rs-timeline-label {
    color: #ef4444;
}

/* ── Checkbox Cards styling for Assignment Modals ── */
.rs-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 4px;
}

.rs-checkbox-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid var(--rs-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    user-select: none;
    box-sizing: border-box;
}

.rs-checkbox-card:hover {
    border-color: var(--rs-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

.rs-checkbox-card.selected {
    background: var(--rs-primary-light) !important;
    border-color: var(--rs-primary) !important;
    transform: scale(1.02);
}

.rs-checkbox-card-input {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    accent-color: var(--rs-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.rs-checkbox-card-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rs-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.rs-checkbox-card.selected .rs-checkbox-card-label {
    color: var(--rs-primary);
    font-weight: 700;
}

/* ── Collapsible Premium Config Cards ── */
.rs-config-card {
    background: #ffffff;
    border: 1px solid var(--rs-border);
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: var(--rs-shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.rs-config-card:hover {
    box-shadow: var(--rs-shadow-md);
    border-color: var(--rs-primary-light);
}

.rs-config-card.is-expanded {
    border-color: var(--rs-primary);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

.rs-config-card-header {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    background: #ffffff;
    transition: background 0.2s ease;
}

.rs-config-card-header:hover {
    background: var(--rs-bg-alt);
}

.rs-config-card-info {
    flex: 1;
    padding-right: 16px;
}

.rs-config-card-title {
    margin: 0 0 4px 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--rs-text);
    display: flex;
    align-items: center;
    gap: 12px;
}

.rs-config-card-title i {
    color: var(--rs-primary);
    font-size: 1.25rem;
}

.rs-config-card-desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--rs-text-muted);
    font-weight: 500;
}

.rs-config-card-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--rs-bg-alt);
    border: 1px solid var(--rs-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rs-text-muted);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.rs-config-card-header:hover .rs-config-card-toggle {
    background: var(--rs-primary-light);
    color: var(--rs-primary);
    border-color: var(--rs-primary-light);
}

.rs-config-card.is-expanded .rs-config-card-toggle {
    background: var(--rs-primary);
    color: #ffffff;
    border-color: var(--rs-primary);
    transform: rotate(180deg);
}

.rs-config-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
    padding: 0 24px;
    border-top: 1px solid transparent;
}

.rs-config-card.is-expanded .rs-config-card-body {
    max-height: 1500px; /* High enough to contain all inputs */
    padding: 24px 24px 32px 24px;
    border-top: 1px solid var(--rs-border);
}

/* El asistente IA (pestaña #chatbot) tiene su propio archivo: assets/css/rs-ai-chat.css */

/* ══════════════════════════════════════════════════════════════════════════
   PLANTILLA: GRILLA CLÁSICA · 2 COLUMNAS  (settings.store_template = classic_two)

   Es la clásica con UNA diferencia: en el celular entran dos productos por fila en
   vez de uno. El HTML aplica las dos clases (rs-template-classic + esta), así que
   todo lo de la clásica sigue valiendo y acá va solamente lo que cambia.

   Por qué existe: con fotos grandes de ancho completo, un menú de 20 productos son
   20 pantallazos de scroll. En dos columnas se ve el doble de carta por pantalla sin
   perder la foto, que es lo que vende.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .rs-template-classic-2col .rs-products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 12px !important;
        width: 100%;
    }

    /* La tarjeta deja de centrarse sola: en una grilla ocupa su celda entera.
       min-width:0 es obligatorio — sin eso un nombre largo desborda la columna y
       rompe la grilla entera, que es el clásico de CSS Grid. */
    .rs-template-classic-2col .rs-product-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        border-radius: 16px !important;
    }

    .rs-template-classic-2col .rs-product-img {
        height: 132px !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .rs-template-classic-2col .rs-product-body {
        padding: 12px !important;
        /* Empuja el pie hacia abajo: con nombres de largo distinto, los precios de las
           dos columnas quedan alineados igual. Una grilla despareja se ve barata. */
        flex: 1 1 auto;
        justify-content: space-between;
    }

    .rs-template-classic-2col .rs-product-body h4 {
        font-size: .95rem !important;
        line-height: 1.25 !important;
        margin-bottom: 4px !important;
        /* Dos líneas y corta. Un nombre de cinco líneas descuadra toda la fila. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* La descripción no entra en una columna de 160px sin volverse ruido. */
    .rs-template-classic-2col .rs-product-desc {
        display: none !important;
    }

    .rs-template-classic-2col .rs-product-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px;
        padding-top: 10px !important;
    }

    .rs-template-classic-2col .rs-product-price {
        font-size: 1.05rem !important;
    }

    /* A ancho completo de la columna: es el objetivo del dedo, no un detalle. */
    .rs-template-classic-2col .rs-btn-add-cart {
        width: 100% !important;
        max-width: none !important;
        height: 40px !important;
        padding: 8px 10px !important;
        font-size: .85rem !important;
        justify-content: center;
    }
}

/* Pantallas muy angostas (iPhone SE y parecidos): dos columnas siguen entrando, pero
   el aire tiene que achicarse o las tarjetas quedan apretadas contra el borde. */
@media (max-width: 360px) {
    .rs-template-classic-2col .rs-products-grid { gap: 8px !important; }
    .rs-template-classic-2col .rs-product-img { height: 112px !important; }
    .rs-template-classic-2col .rs-product-body { padding: 10px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTONES DE CATEGORÍA  (settings.category_style + settings.category_mobile_rail)

   Cuatro estilos sobre el MISMO HTML (imagen o ícono + nombre); la diferencia es
   enteramente CSS. La imagen sale de categories.image_url, que el comercio sube desde
   el panel.

     · list    — la de siempre: pastilla con miniatura al costado.
     · tiles   — mosaico de dos columnas: la foto de fondo y el nombre encima.
     · circles — foto redonda con el nombre debajo.
     · image   — el botón ES la imagen: sin texto, sin marco. El nombre y todo lo demás
                 van dibujados adentro de la foto que diseñó el comercio.

   Y aparte, `rs-cats-rail`: en el celular las categorías pasan a una fila que se
   desliza al costado. Es un interruptor independiente del estilo — se puede tener
   mosaico apilado o mosaico en riel.

   Regla de oro de los cuatro: una categoría SIN imagen tiene que verse bien igual.
   Nadie carga las 12 fotos el primer día, y una tienda a medio armar no puede verse
   rota. Por eso el ícono de respaldo se estiliza con la forma de cada estilo, y en
   `image` —donde el texto vive adentro de la foto— el nombre vuelve a aparecer cuando
   no hay foto: un botón en blanco no se puede tocar.

   POR QUÉ TANTO !important: shortcodes/store/rs-store.php imprime un bloque <style>
   dentro de la página que redeclara .rs-cat-icon, .rs-cat-thumb y los <a> de las
   categorías con !important (32px, 36px en el celular, fondo gris, padding de lista).
   Un <style> del documento le gana a una hoja externa cuando él declara con !important.
   No es adorno: sin esto el mosaico sale con el ícono de 36px en una esquina.
   Verificado en el navegador, no deducido.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Círculos: la foto redonda arriba y el nombre debajo ── */

.rs-store-categories.rs-cats-circles ul {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 8px !important;
}

.rs-store-categories.rs-cats-circles ul li { width: 100% !important; min-width: 0; }

.rs-store-categories.rs-cats-circles a,
.rs-store-categories.rs-cats-circles a.active,
.rs-store-categories.rs-cats-circles a:hover {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    text-align: center;
}

.rs-store-categories.rs-cats-circles a .rs-cat-thumb,
.rs-store-categories.rs-cats-circles a .rs-cat-icon {
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid transparent;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .10);
    transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease, border-color .28s ease;
}

.rs-store-categories.rs-cats-circles a .rs-cat-icon,
.rs-store-categories.rs-cats-circles a.active .rs-cat-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--rs-primary), var(--rs-secondary, var(--rs-primary))) !important;
}

.rs-store-categories.rs-cats-circles a span:not(.rs-cat-icon):not(.rs-cat-thumb) {
    font-size: .78rem !important;
    font-weight: 600 !important;
    line-height: 1.25;
    color: var(--rs-text) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rs-store-categories.rs-cats-circles a.active .rs-cat-thumb,
.rs-store-categories.rs-cats-circles a.active .rs-cat-icon {
    border-color: var(--rs-primary) !important;
    box-shadow: 0 0 0 3px var(--rs-bg), 0 0 0 5px var(--rs-primary);
    transform: translateY(-2px);
}

.rs-store-categories.rs-cats-circles a.active span:not(.rs-cat-icon):not(.rs-cat-thumb) {
    color: var(--rs-primary) !important;
    font-weight: 800 !important;
}

@media (hover: hover) and (pointer: fine) {
    .rs-store-categories.rs-cats-circles a:hover .rs-cat-thumb,
    .rs-store-categories.rs-cats-circles a:hover .rs-cat-icon { transform: translateY(-3px); }
}

/* ══════════════════════════════════════════════════════════════════════════
   ── Botón imagen: la foto ES el botón ──

   Sin texto, sin marco, sin ícono: lo que se ve es exactamente la imagen que subió el
   comercio, con el nombre y lo que quiera ya dibujado adentro. Una debajo de la otra,
   a lo ancho de la columna.

   La proporción es 3:1 y la imagen entra con object-fit: cover. Con una imagen 3:1
   (1200×400 es la medida recomendada en el panel) no se recorta nada; con otra
   proporción se recorta por los costados, por eso el panel avisa que lo importante va
   al centro.
   ══════════════════════════════════════════════════════════════════════════ */

.rs-store-categories.rs-cats-image ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.rs-store-categories.rs-cats-image ul li { width: 100% !important; min-width: 0; }

.rs-store-categories.rs-cats-image a {
    position: relative;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    aspect-ratio: 3 / 1;
    border-radius: 16px !important;
    overflow: hidden;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: 0 2px 12px rgba(16, 24, 40, .08);
    transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease;
}

/* Reserva de alto para navegadores sin aspect-ratio (Safari < 15). Sin esto el botón
   colapsa a 0 y la categoría desaparece de la pantalla. */
@supports not (aspect-ratio: 3 / 1) {
    .rs-store-categories.rs-cats-image a { height: 120px; }
}

.rs-store-categories.rs-cats-image a .rs-cat-thumb {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
}

/* Con foto, el texto ya está adentro de la imagen: el nombre se esconde de la vista
   pero NO del lector de pantalla ni del buscador. display:none lo borraría de los dos. */
.rs-store-categories.rs-cats-image a.rs-cat-has-img span:not(.rs-cat-icon):not(.rs-cat-thumb) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Sin foto todavía: el botón no puede quedar vacío. Vuelve el nombre, centrado sobre
   el color de la marca. */
.rs-store-categories.rs-cats-image a:not(.rs-cat-has-img) {
    background: linear-gradient(135deg, var(--rs-primary), var(--rs-secondary, var(--rs-primary))) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rs-store-categories.rs-cats-image a:not(.rs-cat-has-img) .rs-cat-icon {
    display: none !important;
}

.rs-store-categories.rs-cats-image a:not(.rs-cat-has-img) span:not(.rs-cat-icon):not(.rs-cat-thumb) {
    position: relative;
    z-index: 2;
    padding: 0 16px;
    text-align: center;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

.rs-store-categories.rs-cats-image a.active {
    box-shadow: 0 0 0 3px var(--rs-primary), 0 10px 24px rgba(16, 24, 40, .20);
}

@media (hover: hover) and (pointer: fine) {
    .rs-store-categories.rs-cats-image a:hover { transform: translateY(-2px); }
}

/* ══════════════════════════════════════════════════════════════════════════
   ── Riel lateral en el celular  (settings.category_mobile_rail) ──

   Opcional y aparte del estilo: cualquiera de los cuatro se puede mostrar como una
   fila que se desliza. Sirve cuando hay muchas categorías y apiladas empujan el
   catálogo fuera de la primera pantalla; estorba cuando son pocas.

   Sólo en el celular: en la computadora las categorías viven en la barra lateral.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .rs-store-categories.rs-cats-rail ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        gap: 10px !important;
        /* Sangría para que la primera y la última no queden pegadas al borde. */
        padding: 4px 16px 10px !important;
        margin: 0 -16px !important;
        width: auto !important;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .rs-store-categories.rs-cats-rail ul::-webkit-scrollbar { display: none; }

    .rs-store-categories.rs-cats-rail ul li {
        width: auto !important;
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    /* Un ancho por estilo. 78px en los círculos deja asomar el siguiente: es lo que
       le avisa al ojo que el riel sigue. Un riel que corta justo en el borde parece
       que no scrollea. */

    .rs-store-categories.rs-cats-rail.rs-cats-circles ul li { width: 78px !important; }
    .rs-store-categories.rs-cats-rail.rs-cats-circles a .rs-cat-thumb,
    .rs-store-categories.rs-cats-rail.rs-cats-circles a .rs-cat-icon { width: 62px !important; height: 62px !important; }

    .rs-store-categories.rs-cats-rail.rs-cats-image ul li { width: 210px !important; }

    .rs-store-categories.rs-cats-rail.rs-cats-list ul li { width: auto !important; }
    .rs-store-categories.rs-cats-rail.rs-cats-list a { white-space: nowrap; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PANEL DE INFORMACIÓN DEL COMERCIO  (#rs-info-panel)

   En el celular la estructura de la tienda pasa a ser: banner → logo → categorías.
   La descripción, el estado, el horario, la dirección y las redes se van a una hoja
   que sube desde abajo, a un toque del botón de arriba a la derecha.

   Por qué: en una pantalla de 6" ese bloque de información empujaba el catálogo fuera
   de la primera pantalla. El cliente entra por el link a ver QUÉ HAY, no a leer la
   dirección — y si la quiere, está a un toque.

   El bloque es UNO SOLO en el HTML y se muestra de dos formas:
     · escritorio → tal cual estaba, al lado del logo. Acá no cambia nada.
     · celular    → hoja inferior, oculta hasta que se toca el botón.

   Nada de duplicar el contenido ni de mover nodos con JS: el <h1> con el nombre del
   comercio existe una sola vez en el documento.
   ══════════════════════════════════════════════════════════════════════════ */

/* En escritorio no hay botón ni encabezado de hoja: el panel es el header de siempre. */
.rs-info-btn,
.rs-info-panel-head,
.rs-info-backdrop { display: none; }

/* El interruptor de sonido, cuando el panel es el header (escritorio). */
.rs-info-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 14px;
}

@media (max-width: 768px) {
    /* ── El botón ── */
    .rs-info-btn {
        position: fixed;
        top: calc(12px + env(safe-area-inset-top, 0px));
        right: 12px;
        z-index: 950;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .35);
        border-radius: 14px;
        background: rgba(17, 24, 39, .45);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        cursor: pointer;
        transition: transform .18s cubic-bezier(.16, 1, .3, 1), background-color .2s linear;
        -webkit-tap-highlight-color: transparent;
    }

    .rs-info-btn:active { transform: scale(.9); }

    .rs-info-btn-bars {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 18px;
    }

    .rs-info-btn-bars span {
        display: block;
        height: 2px;
        border-radius: 2px;
        background: #fff;
        transition: transform .24s cubic-bezier(.16, 1, .3, 1), opacity .18s linear;
    }

    /* Con el panel abierto, la hamburguesa se vuelve una X. Es la misma tecla para
       abrir y para cerrar: no hay que buscar dónde se cierra. */
    .rs-info-btn[aria-expanded="true"] .rs-info-btn-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .rs-info-btn[aria-expanded="true"] .rs-info-btn-bars span:nth-child(2) { opacity: 0; }
    .rs-info-btn[aria-expanded="true"] .rs-info-btn-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* ── El velo ── */
    .rs-info-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 998;
        background: rgba(8, 11, 18, .55);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .26s cubic-bezier(.16, 1, .3, 1);
    }

    .rs-info-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    /* ── La hoja ── */
    .rs-store-info#rs-info-panel {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 999;
        width: 100%;
        max-height: 86vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
        /* --rs-bg, NO --rs-bg-alt: en la tienda el sólido es --rs-bg y --rs-bg-alt es un
           tinte casi transparente (rgba(0,0,0,.02)). Al revés que en el panel del
           comerciante. Con --rs-bg-alt esta hoja se transparentaba y se leía el
           catálogo por detrás del texto. */
        background: var(--rs-bg);
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -12px 48px rgba(8, 11, 18, .3);
        align-items: stretch !important;
        text-align: left;
        transform: translate3d(0, 100%, 0);
        transition: transform .38s cubic-bezier(.16, 1, .3, 1);
        /* Sin esto la hoja "existe" cerrada y se puede tocar por debajo del catálogo. */
        visibility: hidden;
    }

    .rs-store-info#rs-info-panel.is-open {
        transform: none;
        visibility: visible;
    }

    @media (prefers-reduced-motion: reduce) {
        .rs-store-info#rs-info-panel { transition: none; }
    }

    /* Encabezado de la hoja, con la agarradera y el cierre. */
    .rs-info-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 2;
        margin: 0 -20px 4px;
        padding: 22px 20px 12px;
        /* Mismo motivo que arriba: este encabezado es sticky y tapa lo que scrollea. */
        background: var(--rs-bg);
        font-weight: 800;
        font-size: 1.05rem;
        color: var(--rs-text);
    }

    .rs-info-panel-head::before {
        content: "";
        position: absolute;
        top: 9px;
        left: 50%;
        width: 42px;
        height: 4px;
        margin-left: -21px;
        border-radius: 99px;
        background: var(--rs-border);
    }

    .rs-info-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border: none;
        border-radius: 50%;
        background: var(--rs-bg-alt);
        border: 1px solid var(--rs-border);
        color: var(--rs-text);
        font-size: 1rem;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* El contenido, alineado a la izquierda: en el header iba centrado, pero una hoja
       de información es un texto para leer, no un encabezado para mirar. */
    .rs-store-info#rs-info-panel .rs-store-title-wrap { justify-content: flex-start; }
    .rs-store-info#rs-info-panel h1 { font-size: 1.5rem; text-align: left; }
    .rs-store-info#rs-info-panel .rs-store-desc { text-align: left; margin-bottom: 14px; }

    .rs-store-info#rs-info-panel .rs-store-meta {
        flex-direction: column;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 12px;
        text-align: left;
    }

    .rs-store-info#rs-info-panel .rs-store-social {
        margin-top: 4px;
        gap: 12px;
    }

    .rs-info-actions {
        justify-content: flex-start;
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid var(--rs-border);
    }

    /* ── Banner → logo → categorías ──
       Con la información adentro de la hoja, el bloque del header queda con el logo
       solo: se centra y se le saca el aire que sobraba. */
    .rs-store-header-content {
        justify-content: center;
        gap: 0 !important;
        padding-bottom: 12px;
        margin-bottom: 4px !important;
    }

    .rs-store-sidebar { margin-bottom: 16px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   IDENTIDAD DEL COMERCIO  (.rs-store-identity)

   Nombre y estado. Van AFUERA del panel de información porque son lo mínimo que
   necesita quien entra por el link: dónde está parado y si el local atiende. Todo lo
   demás —descripción, horario, dirección, redes— sí queda a un toque.

   `.rs-store-main-info` existe sólo para que en escritorio la identidad y el panel
   sigan apilados al costado del logo, como estaban antes de separarlos.
   ══════════════════════════════════════════════════════════════════════════ */

.rs-store-main-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.rs-store-identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 35px;
}

/* En escritorio el estado de apertura vive en la fila del horario (.rs-store-meta);
   la copia de la identidad es sólo para el celular, donde debe verse debajo del
   nombre sin abrir la hoja de información. */
@media (min-width: 769px) {
    .rs-store-identity .rs-store-status { display: none; }
}

@media (max-width: 768px) {
    /* Banner → logo → NOMBRE + ESTADO → categorías. */
    .rs-store-main-info {
        width: 100%;
        align-items: center;
    }

    .rs-store-identity {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
        margin-top: 12px;
    }

    .rs-store-identity h1 {
        font-size: 1.55rem !important;
        line-height: 1.2;
        margin: 0;
    }

    /* El estado como pastilla: de un vistazo se ve si el local atiende, sin leer. */
    .rs-store-identity .rs-store-status {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 5px 14px;
        border-radius: 999px;
        font-size: .82rem;
        font-weight: 700;
        background: var(--rs-bg-alt);
        border: 1px solid var(--rs-border);
    }

    .rs-store-identity .rs-store-status i { font-size: .62rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTÓN IMAGEN · VARIANTE CON NOMBRE  (category_style = image_label)

   El mismo botón que `image` —el HTML lleva las dos clases— con una diferencia: el
   nombre de la categoría se ve SIEMPRE, centrado sobre el botón. Es exactamente lo que
   hace `image` cuando la categoría todavía no tiene foto, sólo que acá pasa también
   cuando la tiene.

   Para qué sirve: en `image` el nombre tiene que venir dibujado adentro de la imagen,
   lo que obliga al comercio a diseñar cada botón. Acá alcanza con subir una foto lisa
   y el nombre lo escribe el sistema.

   El ícono de respaldo no aparece nunca: su lugar lo ocupa el nombre.
   ══════════════════════════════════════════════════════════════════════════ */

.rs-store-categories.rs-cats-image-label a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rs-store-categories.rs-cats-image-label a .rs-cat-icon {
    display: none !important;
}

/* El velo, sólo cuando hay foto. Sin esto, un nombre blanco sobre una foto clara no se
   lee — y pasa siempre, porque las fotos de comida son claras. */
.rs-store-categories.rs-cats-image-label a.rs-cat-has-img::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(8, 11, 18, .68) 0%, rgba(8, 11, 18, .38) 55%, rgba(8, 11, 18, .22) 100%);
}

/* Deshace el ocultamiento accesible que aplica `image` a las que tienen foto: acá el
   nombre es el contenido del botón, no un dato para lectores de pantalla. */
.rs-store-categories.rs-cats-image-label a span:not(.rs-cat-icon):not(.rs-cat-thumb),
.rs-store-categories.rs-cats-image-label a.rs-cat-has-img span:not(.rs-cat-icon):not(.rs-cat-thumb) {
    position: relative !important;
    z-index: 2;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 18px !important;
    clip: auto !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-align: center;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── El punto del estado ──
   Habla por color: verde si el local atiende, rojo si no. El TEXTO se queda del color
   del comercio — un "Abierto" verde se pelea con cualquier paleta, un punto de 6px no.

   Va sobre el <i> y no sobre el <span> porque el bloque <style> del shortcode fuerza
   `.rs-store span { color: var(--rs-text) !important }`, así que el color del texto no
   es negociable desde acá... y está bien que no lo sea. */
.rs-store .rs-store-status i.fa-circle          { color: var(--rs-text-muted) !important; }
.rs-store .rs-store-status.open i.fa-circle     { color: #16a34a !important; }
.rs-store .rs-store-status.closed i.fa-circle   { color: #dc2626 !important; }