/* ═══════════════════════════════════════════════════════════════════
   RURENT — Responsive & UX Enhancement Layer
   File  : rurent-responsive.css
   Enqueue setelah rurent.css (higher specificity overrides)

   Breakpoints:
     1200px  — large desktop
      900px  — tablet landscape
      768px  — tablet portrait
      600px  — mobile large
      480px  — mobile medium
      375px  — mobile small (iPhone SE / Android compact)
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   0. Global base: pastikan semua elemen box-sizing + viewport safe
   ───────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* ─────────────────────────────────────────────────────────────────
   1. Wrapper pages — padding + max-width responsif
   ───────────────────────────────────────────────────────────────── */
.rurent-katalog,
.rurent-cart-page,
.rurent-checkout,
.rurent-payment-method,
.rurent-tnc,
.rurent-confirmation,
.rurent-product-page {
    padding-left: clamp(12px, 4vw, 24px);
    padding-right: clamp(12px, 4vw, 24px);
    padding-bottom: clamp(60px, 8vw, 80px);
}

/* ─────────────────────────────────────────────────────────────────
   2. Katalog V2 — rk2 Filter Bar
   ───────────────────────────────────────────────────────────────── */

/* Desktop baseline — filter bar horizontal scroll container */
.rk2-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--rr-surface, #fff);
    border: 1px solid var(--rr-border, #ddd6cc);
    border-radius: var(--rr-r-lg, 16px);
    padding: 10px 14px;
    margin-bottom: 20px;
    box-shadow: var(--rr-shadow-sm);
    position: relative;
    overflow: visible;
    flex-wrap: nowrap;
}

/* Date chips scrollable wrapper */
.rk2-date-chips-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.rk2-date-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.rk2-date-chips::-webkit-scrollbar { display: none; }

.rk2-chip {
    scroll-snap-align: start;
    flex-shrink: 0;
    background: var(--rr-surface-3, #f4efe8);
    border: 1.5px solid var(--rr-border-strong, #c8bfb3);
    border-radius: 980px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rr-text, #1a1a1a);
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
    font-family: var(--rr-font);
    line-height: 1.3;
}
.rk2-chip:hover {
    background: var(--rr-surface, #fff);
    border-color: var(--rr-teal, #305057);
    color: var(--rr-teal, #305057);
}
.rk2-chip.active {
    background: var(--rr-teal, #305057);
    border-color: var(--rr-teal, #305057);
    color: #fff;
}

/* Spec filters row */
.rk2-spec-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Filter separator */
.rk2-filter-sep {
    width: 1px;
    height: 20px;
    background: var(--rr-border, #ddd6cc);
    flex-shrink: 0;
}
.rk2-icon-sep {
    width: 1px;
    height: 18px;
    background: var(--rr-border, #ddd6cc);
    flex-shrink: 0;
    margin: 0 2px;
}

/* Dropdown */
.rk2-dropdown {
    position: relative;
    flex-shrink: 0;
}
.rk2-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1.5px solid var(--rr-border-strong, #c8bfb3);
    border-radius: 980px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rr-text, #1a1a1a);
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s ease;
    font-family: var(--rr-font);
    line-height: 1.3;
}
.rk2-dropdown-btn:hover,
.rk2-dropdown.open .rk2-dropdown-btn {
    border-color: var(--rr-teal, #305057);
    color: var(--rr-teal, #305057);
    background: var(--rr-teal-light, #e0eaec);
}
.rk2-dropdown-arrow {
    transition: transform .2s ease;
    flex-shrink: 0;
    stroke: currentColor;
}
.rk2-dropdown.open .rk2-dropdown-arrow {
    transform: rotate(180deg);
}

.rk2-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--rr-surface, #fff);
    border: 1px solid var(--rr-border, #ddd6cc);
    border-radius: var(--rr-r-md, 12px);
    box-shadow: 0 8px 24px rgba(48,80,87,.13);
    z-index: 200;
    padding: 6px;
    min-width: 160px;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.rk2-dropdown.open .rk2-dropdown-menu {
    display: block;
    animation: rrDropIn .15s ease;
}
@keyframes rrDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rk2-dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: var(--rr-r-sm, 8px);
    font-size: 13px;
    font-weight: 500;
    color: var(--rr-text, #1a1a1a);
    cursor: pointer;
    font-family: var(--rr-font);
    transition: background .12s ease;
    white-space: nowrap;
}
.rk2-dropdown-item:hover,
.rk2-dropdown-item.active {
    background: var(--rr-teal-light, #e0eaec);
    color: var(--rr-teal, #305057);
    font-weight: 600;
}

/* Calendar icon button */
.rk2-date-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: var(--rr-surface-3, #f4efe8);
    border: 1.5px solid var(--rr-border-strong, #c8bfb3);
    border-radius: 50%;
    cursor: pointer;
    color: var(--rr-teal, #305057);
    transition: all .15s ease;
    flex-shrink: 0;
}
.rk2-date-icon:hover {
    background: var(--rr-teal, #305057);
    color: #fff;
    border-color: var(--rr-teal, #305057);
}

/* Calendar popup */
.rk2-calendar-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--rr-surface, #fff);
    border: 1px solid var(--rr-border, #ddd6cc);
    border-radius: var(--rr-r-lg, 16px);
    box-shadow: 0 12px 40px rgba(48,80,87,.16);
    z-index: 9000;
    padding: 16px;
    width: 280px;
    animation: rrDropIn .18s ease;
}

/* ─────────────────────────────────────────────────────────────────
   3. Katalog V2 — Header
   ───────────────────────────────────────────────────────────────── */
.rk2-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.rk2-title {
    font-family: var(--rr-font-display, 'Fraunces', Georgia, serif);
    font-size: clamp(22px, 3.5vw, 36px);
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1.15;
    margin: 0 0 4px;
    color: var(--rr-text, #1a1a1a);
}
.rk2-title em {
    font-style: italic;
    color: var(--rr-teal-2, #448888);
}

.rk2-sub {
    font-size: clamp(13px, 1.5vw, 15px);
    color: var(--rr-text-muted, #6b7c80);
    margin: 0;
    line-height: 1.5;
}

.rk2-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 980px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: var(--rr-font);
    transition: all .18s ease;
    text-decoration: none;
    white-space: nowrap;
}
.rk2-btn--primary {
    background: var(--rr-teal, #305057);
    color: #fff;
}
.rk2-btn--primary:hover {
    background: var(--rr-teal-hover, #264349);
    transform: translateY(-1px);
    color: #fff;
}

/* ─────────────────────────────────────────────────────────────────
   4. Katalog V2 — Product Cards (rk2-card)
   ───────────────────────────────────────────────────────────────── */
.rk2-grid {
    display: grid;
    gap: 16px;
}

.rk2-card {
    background: var(--rr-surface, #fff);
    border: 1px solid var(--rr-border, #ddd6cc);
    border-radius: var(--rr-r-lg, 16px);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    display: flex;
    flex-direction: column;
}
.rk2-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(48,80,87,.12);
    border-color: var(--rr-border-strong, #c8bfb3);
}

.rk2-card__img-link {
    display: block;
    text-decoration: none;
}
.rk2-card__img {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--rr-surface-3, #f4efe8);
    overflow: hidden;
}
.rk2-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.rk2-card:hover .rk2-card__img img {
    transform: scale(1.04);
}

.rk2-card__img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rk2-card__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.rk2-card__brand {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--rr-teal-2, #448888);
}

.rk2-card__name {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.2px;
    color: var(--rr-text, #1a1a1a);
}
.rk2-card__name a {
    color: inherit;
    text-decoration: none;
}
.rk2-card__name a:hover {
    color: var(--rr-teal, #305057);
}

.rk2-card__specs {
    font-size: 12px;
    color: var(--rr-text-muted, #6b7c80);
    margin: 0;
    line-height: 1.4;
}

/* Rating bars */
.rk2-bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.rk2-bar-row {
    display: grid;
    grid-template-columns: 52px 1fr 28px;
    align-items: center;
    gap: 7px;
}
.rk2-bar-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--rr-text-muted, #6b7c80);
}
.rk2-bar-track {
    height: 4px;
    background: var(--rr-surface-3, #f4efe8);
    border-radius: 4px;
    overflow: hidden;
}
.rk2-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .35s ease;
}
.rk2-bar-val {
    font-size: 11px;
    font-weight: 700;
    color: var(--rr-text-2, #305057);
    text-align: right;
}

/* Card footer: price + actions */
.rk2-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--rr-border, #ddd6cc);
    flex-wrap: wrap;
}

.rk2-card__price {
    display: flex;
    align-items: baseline;
    gap: 3px;
    flex-shrink: 0;
}
.rk2-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--rr-text, #1a1a1a);
    letter-spacing: -0.3px;
}
.rk2-price-per {
    font-size: 11.5px;
    color: var(--rr-text-muted, #6b7c80);
}

.rk2-card__actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.rk2-btn-detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 980px;
    font-size: 12px;
    font-weight: 600;
    background: transparent;
    border: 1.5px solid var(--rr-border-strong, #c8bfb3);
    color: var(--rr-text, #1a1a1a);
    text-decoration: none;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
    font-family: var(--rr-font);
}
.rk2-btn-detail:hover {
    background: var(--rr-surface-3, #f4efe8);
    border-color: var(--rr-text-muted, #6b7c80);
    color: var(--rr-text, #1a1a1a);
}
.rk2-btn-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border-radius: 980px;
    font-size: 12px;
    font-weight: 600;
    background: var(--rr-teal, #305057);
    border: 1.5px solid var(--rr-teal, #305057);
    color: #fff;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
    font-family: var(--rr-font);
}
.rk2-btn-cart:hover {
    background: var(--rr-teal-hover, #264349);
    border-color: var(--rr-teal-hover, #264349);
    transform: translateY(-1px);
}

/* Availability badge on card */
.rk2-avail-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 980px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--rr-text, #1a1a1a);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 6px rgba(0,0,0,.10);
}
.available-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rr-success, #30d158);
    flex-shrink: 0;
}
.badge-unavailable { display: none; }
.unavailable .badge-available { display: none; }
.unavailable .badge-unavailable { display: inline; }
.unavailable .available-dot { background: var(--rr-danger, #ff3b30); }

/* No results */
.rk2-no-results {
    text-align: center;
    padding: 48px 24px;
    background: var(--rr-surface, #fff);
    border: 1px dashed var(--rr-border-strong, #c8bfb3);
    border-radius: var(--rr-r-lg, 16px);
    color: var(--rr-text-muted, #6b7c80);
    margin-top: 8px;
}
.rk2-no-results p {
    font-size: 15px;
    margin: 0 0 16px;
    color: var(--rr-text-muted, #6b7c80);
}
.rk2-no-results button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 980px;
    font-size: 13.5px;
    font-weight: 600;
    background: var(--rr-teal, #305057);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background .15s ease;
    font-family: var(--rr-font);
}
.rk2-no-results button:hover {
    background: var(--rr-teal-hover, #264349);
}

/* ─────────────────────────────────────────────────────────────────
   5. Product Detail Page
   ───────────────────────────────────────────────────────────────── */
.rurent-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 420px) 1fr;
    gap: 32px;
    align-items: start;
}

.product-page-left {
    position: sticky;
    top: 80px;
}

.product-page-image {
    background: var(--rr-surface-3, #f4efe8);
    border-radius: var(--rr-r-xl, 20px);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    max-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.product-page-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.product-radar-card {
    background: var(--rr-surface, #fff);
    border: 1px solid var(--rr-border, #ddd6cc);
    border-radius: var(--rr-r-lg, 16px);
    padding: 20px;
    margin-top: 16px;
    box-shadow: var(--rr-shadow-sm);
}

.product-badge-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.product-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 980px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--rr-surface-3, #f4efe8);
    color: var(--rr-text-2, #305057);
    border: 1px solid var(--rr-border, #ddd6cc);
}
.badge-level  { background: var(--rr-teal-light, #e0eaec); color: var(--rr-teal, #305057); }
.badge-style  { background: var(--rr-primary-light, #f7ede1); color: var(--rr-primary, #BF6616); }

.product-page-name {
    font-family: var(--rr-font-display, 'Fraunces', Georgia, serif);
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 6px 0 16px;
    color: var(--rr-text, #1a1a1a);
    line-height: 1.15;
}

.product-spec-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.spec-pill-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--rr-surface-3, #f4efe8);
    border: 1px solid var(--rr-border, #ddd6cc);
    border-radius: var(--rr-r-md, 12px);
    padding: 10px 16px;
    min-width: 80px;
}
.spec-pill-key {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--rr-text-muted, #6b7c80);
    margin-bottom: 3px;
}
.spec-pill-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--rr-teal, #305057);
}

/* Booking form */
.rurent-booking-form {
    background: var(--rr-surface, #fff);
    border: 1px solid var(--rr-border, #ddd6cc);
    border-radius: var(--rr-r-xl, 20px);
    padding: 24px;
    box-shadow: var(--rr-shadow-sm);
}

.booking-form-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--rr-text, #1a1a1a);
    margin-bottom: 18px;
    letter-spacing: -0.2px;
}

/* Extra hours pills */
.extra-hours-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.extra-pill {
    padding: 7px 14px;
    border-radius: 980px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1.5px solid var(--rr-border-strong, #c8bfb3);
    background: var(--rr-surface, #fff);
    color: var(--rr-text, #1a1a1a);
    cursor: pointer;
    transition: all .15s ease;
    font-family: var(--rr-font);
    white-space: nowrap;
}
.extra-pill:hover {
    border-color: var(--rr-teal, #305057);
    color: var(--rr-teal, #305057);
}
.extra-pill.active {
    background: var(--rr-teal, #305057);
    border-color: var(--rr-teal, #305057);
    color: #fff;
}
.extra-pill-2hari {
    border-color: var(--rr-primary, #BF6616);
    color: var(--rr-primary, #BF6616);
}
.extra-pill-2hari.active,
.extra-pill-2hari:hover {
    background: var(--rr-primary, #BF6616);
    border-color: var(--rr-primary, #BF6616);
    color: #fff;
}

/* Qty control */
.qty-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.qty-control {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--rr-border-strong, #c8bfb3);
    border-radius: 980px;
    overflow: hidden;
    background: var(--rr-surface, #fff);
}
.qty-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--rr-teal, #305057);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
    font-family: var(--rr-font);
}
.qty-btn:hover { background: var(--rr-teal-light, #e0eaec); }
.qty-input {
    width: 48px;
    border: none;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--rr-text, #1a1a1a);
    background: transparent;
    font-family: var(--rr-font);
    -moz-appearance: textfield;
}
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.qty-unit { font-size: 13.5px; color: var(--rr-text-muted, #6b7c80); }

/* Price summary */
.rurent-price-summary {
    background: var(--rr-surface-3, #f4efe8);
    border-radius: var(--rr-r-md, 12px);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13.5px;
    color: var(--rr-text, #1a1a1a);
}
.total-row {
    border-top: 1px solid var(--rr-border, #ddd6cc);
    padding-top: 8px;
    font-size: 15px;
}
.deposit-row { color: var(--rr-text-muted, #6b7c80); }
.deposit-badge {
    display: inline-block;
    background: var(--rr-warning-bg, #fff4e0);
    color: var(--rr-warning-text, #c77a00);
    border-radius: 980px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
}
.price-row-discount { color: var(--rr-success-text, #1a7a3a); }

/* Product CTA group */
.product-cta-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

/* Booking footer trust icons */
.booking-form-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--rr-border, #ddd6cc);
}
.booking-footer-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    color: var(--rr-text-muted, #6b7c80);
}
.booking-footer-item svg { color: var(--rr-teal, #305057); flex-shrink: 0; margin-top: 2px; }
.booking-footer-item strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--rr-text, #1a1a1a);
    margin-bottom: 2px;
}

/* ─────────────────────────────────────────────────────────────────
   6. Cart Page
   ───────────────────────────────────────────────────────────────── */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: start;
}

.cart-card,
.cart-summary-card,
.order-summary-card,
.checkout-card {
    background: var(--rr-surface, #fff);
    border: 1px solid var(--rr-border, #ddd6cc);
    border-radius: var(--rr-r-xl, 20px);
    padding: 24px;
    box-shadow: var(--rr-shadow-sm);
}

.cart-summary-card,
.order-summary-card {
    position: sticky;
    top: 80px;
}

/* Cart item */
.cart-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rr-border, #ddd6cc);
    align-items: start;
}
.cart-item:last-child { border-bottom: none; }

/* Cart item image */
.cart-item-image,
.cart-item-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--rr-r-md, 12px);
    background: var(--rr-surface-3, #f4efe8);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cart-item-icon .rr-icon svg { width: 28px; height: 28px; color: var(--rr-text-sub, #a0abad); }

/* Cart controls */
.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* Cart summary rows */
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13.5px;
    padding: 5px 0;
    color: var(--rr-text, #1a1a1a);
}
.summary-row.total {
    border-top: 1px solid var(--rr-border, #ddd6cc);
    padding-top: 10px;
    margin-top: 4px;
    font-size: 15px;
}
.summary-row--discount { color: var(--rr-success-text, #1a7a3a); }

.deposit-note {
    background: var(--rr-surface-3, #f4efe8);
    border-radius: var(--rr-r-sm, 8px);
    padding: 10px 12px;
    font-size: 12px;
    color: var(--rr-text-muted, #6b7c80);
    margin: 12px 0;
    line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────
   7. Checkout Page
   ───────────────────────────────────────────────────────────────── */
.rurent-checkout-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
}

/* Step indicator */
.checkout-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 28px;
    padding: 0;
}
.checkout-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rr-text-muted, #6b7c80);
    white-space: nowrap;
}
.checkout-step.active {
    color: var(--rr-teal, #305057);
}
.checkout-step.done {
    color: var(--rr-success-text, #1a7a3a);
}
.step-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all .2s ease;
}
.checkout-step.active .step-circle {
    background: var(--rr-teal, #305057);
    border-color: var(--rr-teal, #305057);
    color: #fff;
}
.checkout-step.done .step-circle {
    background: var(--rr-success, #30d158);
    border-color: var(--rr-success, #30d158);
    color: #fff;
}
.step-line {
    flex: 1;
    height: 2px;
    background: var(--rr-border, #ddd6cc);
    margin: 0 4px;
    min-width: 24px;
    max-width: 60px;
}

/* KTP upload */
.ktp-upload-area {
    display: block;
    border: 2px dashed var(--rr-border-strong, #c8bfb3);
    border-radius: var(--rr-r-lg, 16px);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all .2s ease;
    background: var(--rr-surface-3, #f4efe8);
}
.ktp-upload-area:hover {
    border-color: var(--rr-teal, #305057);
    background: var(--rr-teal-light, #e0eaec);
}
.ktp-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ktp-icon .rr-icon svg { width: 32px; height: 32px; color: var(--rr-teal, #305057); }
.ktp-text { font-size: 14px; font-weight: 600; color: var(--rr-text, #1a1a1a); }
.ktp-sub  { font-size: 12px; color: var(--rr-text-muted, #6b7c80); }

/* Voucher */
.rr-voucher-section,
.rr-voucher-box {
    background: var(--rr-surface-3, #f4efe8);
    border-radius: var(--rr-r-md, 12px);
    padding: 14px 16px;
    margin-bottom: 16px;
}
.rr-voucher-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--rr-text-2, #305057);
    margin-bottom: 10px;
}
.rr-voucher-input-row {
    display: flex;
    gap: 8px;
}
.rr-voucher-input {
    flex: 1;
    min-width: 0;
    border: 1.5px solid var(--rr-border-strong, #c8bfb3);
    border-radius: var(--rr-r-sm, 8px);
    padding: 9px 12px;
    font-size: 13.5px;
    font-family: var(--rr-font);
    background: var(--rr-surface, #fff);
    color: var(--rr-text, #1a1a1a);
    transition: border-color .15s ease;
}
.rr-voucher-input:focus {
    outline: none;
    border-color: var(--rr-teal, #305057);
    box-shadow: 0 0 0 3px rgba(68,136,136,.15);
}
.rr-voucher-apply-btn {
    flex-shrink: 0;
    padding: 9px 16px;
    border-radius: var(--rr-r-sm, 8px);
    font-size: 13px;
    font-weight: 700;
    background: var(--rr-teal, #305057);
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: var(--rr-font);
    transition: background .15s ease;
    white-space: nowrap;
}
.rr-voucher-apply-btn:hover { background: var(--rr-teal-hover, #264349); }

/* ─────────────────────────────────────────────────────────────────
   8. Sticky Cart Bar
   ───────────────────────────────────────────────────────────────── */
/* Base desktop styles live in rurent.css §6.
   Mobile overrides start at @media (max-width: 768px) below. */

/* ─────────────────────────────────────────────────────────────────
   9. Payment Page
   ───────────────────────────────────────────────────────────────── */
.payment-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

/* ─────────────────────────────────────────────────────────────────
   10. Confirmation Page
   ───────────────────────────────────────────────────────────────── */
.rurent-confirmation {
    max-width: 680px;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — Mobile-First Apple-Style Refactor
   v4.0 — Focus: large touch targets, sticky CTA, clean spacing,
          simplified cards, typographic hierarchy, smooth flow.
   Desktop (≥1025px) is intentionally untouched.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1200px — Wide desktop ─────────────────────────────────────── */
@media (min-width: 1200px) {
    .rurent-katalog--v2 .rk2-grid {
        grid-template-columns: repeat(var(--rk2-cols, 4), minmax(0, 1fr)) !important;
    }
    .rurent-katalog-preview .rk2-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* ── 1024px — Tablet landscape ─────────────────────────────────── */
@media (max-width: 1024px) {
    /* Katalog grid → 3 kolom */
    .rurent-katalog--v2 .rk2-grid,
    .rurent-katalog-preview .rk2-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    /* Product page: stack vertical */
    .rurent-product-layout {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
    .product-page-left {
        position: static;
        width: 100%;
    }
    .product-page-image {
        max-height: 360px;
    }

    /* Checkout layout */
    .rurent-checkout-layout {
        grid-template-columns: 1fr !important;
    }
    .order-summary-card {
        position: static;
    }

    /* Cart layout */
    .cart-layout {
        grid-template-columns: 1fr !important;
    }
    .cart-summary-card {
        position: static;
    }

    /* Filter bar: wrap on tablet */
    .rk2-filter-bar {
        flex-wrap: wrap;
        gap: 10px;
    }
    .rk2-spec-filters {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
        padding-top: 8px;
        border-top: 1px solid var(--rr-border, #ddd6cc);
    }
    .rk2-date-chips-wrap {
        width: calc(100% - 52px);
    }
}

/* ──────────────────────────────────────────────────────────────────
   TABLET PORTRAIT — 900px
   Mostly layout shifts; typography starts to breathe less
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

    /* Header: stack cleanly */
    .rk2-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .rk2-header-actions {
        width: 100%;
        display: flex;
        gap: 8px;
    }
    .rk2-header-actions .rk2-btn {
        flex: 1;
        justify-content: center;
        padding: 10px 16px; /* Slightly bigger touch target at tablet */
    }

    /* Spec pills: even distribution */
    .product-spec-pills { gap: 8px; }
    .spec-pill-item {
        flex: 1;
        min-width: 70px;
    }

    /* Sticky cart: hide total on tablet, keep CTA prominent */
    .sticky-cart-total { display: none; }
}

/* ──────────────────────────────────────────────────────────────────
   MOBILE — 768px
   Core Apple-style mobile experience begins here.
   Principles: generous spacing, large touch targets, clear hierarchy,
   sticky CTA always visible, cards scannable at a glance.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* ── Global page padding
       Safe horizontal gutters + generous bottom clearance for sticky bar */
    .rurent-katalog,
    .rurent-cart-page,
    .rurent-checkout,
    .rurent-payment-method,
    .rurent-tnc,
    .rurent-confirmation,
    .rurent-product-page,
    .rurent-katalog-preview {
        padding: 20px 16px 100px;
    }

    /* ── Katalog grid: 2-column, enough room to show 6+ above fold */
    .rurent-katalog--v2 .rk2-grid,
    .rurent-katalog-preview .rk2-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }

    /* filter bar mobile: handled by v3 block below */

    /* ── Product cards: clean, scannable layout
       Image ratio preserved. Footer: price left, CTA right (full width row). */
    .rk2-card__body {
        padding: 10px 12px 14px;
        gap: 5px;
    }
    .rk2-card__brand {
        font-size: 10px;
        letter-spacing: 0.7px;
    }
    .rk2-card__name {
        font-size: 13.5px;
        font-weight: 700;
        line-height: 1.3;
    }
    .rk2-card__specs {
        font-size: 11.5px;
        color: var(--rr-text-muted, #6b7c80);
    }
    .rk2-card__footer {
        flex-direction: column;
        gap: 8px;
        padding-top: 10px;
        align-items: stretch;
    }
    .rk2-card__price {
        align-items: baseline;
        gap: 3px;
    }
    .rk2-card__price .rk2-price {
        font-size: 15px;
        font-weight: 700;
    }
    .rk2-card__actions {
        width: 100%;
        gap: 6px;
    }
    /* Both buttons get equal width — full-width row, 44px min height */
    .rk2-btn-detail,
    .rk2-btn-cart {
        flex: 1;
        font-size: 12.5px;
        padding: 10px 8px;
        min-height: 40px;
        justify-content: center;
        border-radius: var(--rr-r-md, 12px); /* Softer on mobile */
    }
    /* Rating bars hidden on 2-col grid — too dense */
    .rk2-bars { display: none; }

    /* ── Product detail page */
    .product-page-name {
        font-size: clamp(22px, 6vw, 30px);
        letter-spacing: -0.4px;
        margin-bottom: 12px;
    }
    .product-page-image { max-height: 300px; }
    .rurent-booking-form {
        padding: 20px 16px;
        border-radius: var(--rr-r-lg, 16px);
    }
    .booking-form-title {
        font-size: 16px;
        margin-bottom: 16px;
    }

    /* ── Qty control: bigger tap targets */
    .qty-btn {
        width: 40px;
        height: 40px;
    }
    .qty-input {
        font-size: 16px; /* Prevents iOS zoom on focus */
        width: 52px;
    }

    /* ── Checkout progress: distil to numbers only on inactive steps */
    .checkout-step span { display: none; }
    .checkout-step.active span {
        display: inline;
        font-size: 13px;
    }
    .step-circle {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    .step-line { min-width: 18px; }

    /* ── Cart items: image + details row */
    .cart-item {
        grid-template-columns: 72px 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
        padding: 16px 0;
    }
    .cart-item-image,
    .cart-item-icon {
        width: 72px !important;
        height: 72px !important;
        border-radius: var(--rr-r-md, 12px) !important;
    }
    /* Controls span full width — easy to reach */
    .cart-item-controls {
        grid-column: 1 / -1;
        justify-content: space-between;
        align-items: center;
        margin-top: 4px;
    }

    /* ── Cards: reduce padding for breathing room */
    .cart-card,
    .checkout-card {
        padding: 20px 16px;
        border-radius: var(--rr-r-lg, 16px);
    }
    .cart-summary-card,
    .order-summary-card {
        padding: 20px 16px;
        border-radius: var(--rr-r-lg, 16px);
    }

    /* ── Payment options: full-width stack, easy selection */
    .payment-options {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    /* ── Extra hours pills: 3-column grid */
    .extra-hours-pills {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 7px;
    }
    .extra-pill {
        text-align: center;
        justify-content: center;
        padding: 9px 8px;         /* Comfortable tap target */
        min-height: 40px;
    }
    .extra-pill-2hari {
        grid-column: 1 / -1;
    }

    /* ── Sticky cart: handled by Mobile Polish section below */

    /* ── Quiz CTA: stacked layout */
    .quiz-cta-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .quiz-cta-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 12px 20px;
        min-height: 44px;
    }

    /* ── TnC accept section: stack vertically on mobile */
    .tnc-accept-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .tnc-checkbox-label {
        align-items: flex-start;
    }
    .tnc-checkbox-text {
        gap: 4px;
    }
    .tnc-checkbox-title {
        font-size: 14px;
        line-height: 1.4;
    }
    .tnc-checkbox-sub {
        font-size: 12px;
        line-height: 1.5;
    }
    .tnc-action-buttons {
        width: 100%;
        justify-content: space-between;
    }
    .tnc-action-buttons .rurent-btn-primary {
        flex: 1;
        text-align: center;
        justify-content: center;
    }

    /* ── Payment page: prevent WhatsApp button double-text on mobile
       - min-width: 180px pada .payment-option-info membuat header wrap di layar sempit,
         seolah-olah ada 2 baris teks yang overlap dengan tombol.
       - Tombol .rurent-btn-whatsapp: hide icon SVG di mobile, cukup teks saja. */
    .payment-option-info {
        min-width: 0;
    }
    .payment-option-header {
        flex-wrap: nowrap;
        align-items: center;
    }
    .rurent-btn-whatsapp .rr-icon,
    .rurent-btn-whatsapp .payment-icon-whatsapp {
        display: none;
    }
    .rurent-btn-whatsapp {
        justify-content: center;
        gap: 0;
    }

    /* ── Recovery bar: keep essential action, drop secondary text */
    .rr-recovery-detail { display: none; }
    .rr-recovery-btn--wa { display: none; }
}

/* ──────────────────────────────────────────────────────────────────
   SMALL MOBILE — 600px
   Tighten layout further. Filter becomes a column stack.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {

    /* Grid stays 2-col — shows more products above fold */
    .rurent-katalog--v2 .rk2-grid,
    .rurent-katalog-preview .rk2-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }

    /* filter bar mobile: handled by v3 block below */

    /* ── Header typography */
    .rk2-title {
        font-size: clamp(21px, 6vw, 26px);
        letter-spacing: -0.3px;
    }
    .rk2-sub { font-size: 13px; }

    /* ── Spec pills: horizontal scroll strip */
    .product-spec-pills {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .product-spec-pills::-webkit-scrollbar { display: none; }
    .spec-pill-item {
        flex-shrink: 0;
        min-width: 74px;
    }

    /* ── Booking form: 2-column hour pills */
    .extra-hours-pills { grid-template-columns: repeat(2, 1fr); }
    .extra-pill-2hari  { grid-column: 1 / -1; }

    /* ── Voucher: stack input + button vertically */
    .rr-voucher-input-row {
        flex-direction: column;
        gap: 8px;
    }
    .rr-voucher-apply-btn {
        width: 100%;
        padding: 11px 16px;
        min-height: 44px;
    }
    .rr-voucher-input {
        font-size: 16px;           /* iOS: prevent zoom */
    }

    /* ── Form inputs: prevent iOS auto-zoom (font-size must be ≥16px) */
    .rurent-input,
    select.rurent-input,
    input[type="text"].rurent-input,
    input[type="tel"].rurent-input,
    input[type="email"].rurent-input {
        font-size: 16px;
    }

    /* ── Card padding tighter */
    .cart-card,
    .checkout-card,
    .cart-summary-card,
    .order-summary-card {
        padding: 16px 14px;
    }

    /* ── KTP upload area */
    .ktp-upload-area {
        padding: 20px 14px;
    }

    /* ── Checkout step: numbers only */
    .checkout-step span { display: none; }
    .step-circle {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
    .step-line { max-width: 36px; }
}

/* ──────────────────────────────────────────────────────────────────
   COMPACT MOBILE — 480px
   Smallest comfortable layout before single-column.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

    /* ── Price summary: tighter vertical spacing */
    .rurent-price-summary {
        padding: 12px 14px;
        gap: 6px;
    }
    .price-row {
        font-size: 13.5px;
    }
    .total-row {
        font-size: 15px;
        font-weight: 700;
    }

    /* ── Product page */
    .product-page-name {
        font-size: 22px;
        letter-spacing: -0.4px;
    }
    .product-radar-card { padding: 16px; }

    /* ── Sticky cart: handled by Mobile Polish section */

    /* ── Cart item: slightly more compact thumbnail */
    .cart-item {
        grid-template-columns: 64px 1fr;
        gap: 10px;
    }
    .cart-item-image,
    .cart-item-icon {
        width: 64px !important;
        height: 64px !important;
        border-radius: var(--rr-r-sm, 8px) !important;
    }
    .cart-item-image img {
        width: 64px !important;
        height: 64px !important;
    }

    /* ── Booking trust footer: 2-column grid */
    .booking-form-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .booking-footer-item:first-child { grid-column: 1 / -1; }
    .booking-footer-item {
        font-size: 12px;
    }
}

/* ──────────────────────────────────────────────────────────────────
   MICRO MOBILE — 375px  (iPhone SE, Galaxy A-series compact)
   Single-column layout: maximum clarity, no cramming.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 375px) {

    /* ── Single-column katalog: give each product full attention */
    .rurent-katalog--v2 .rk2-grid,
    .rurent-katalog-preview .rk2-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    /* ── At single column, rating bars fit — bring them back */
    .rk2-bars { display: flex; }

    /* ── Card body more room in single-col */
    .rk2-card__body {
        padding: 14px 14px 16px;
        gap: 6px;
    }
    .rk2-card__name { font-size: 15px; }
    .rk2-card__footer {
        gap: 10px;
        flex-direction: row;       /* At full width, side-by-side works again */
        align-items: center;
        flex-wrap: wrap;
    }
    .rk2-card__actions { gap: 7px; }
    .rk2-btn-detail,
    .rk2-btn-cart {
        font-size: 13px;
        padding: 10px 14px;
        min-height: 42px;
        border-radius: var(--rr-r-md, 12px);
    }

    /* ── Filter: single-column dropdowns */
    .rk2-spec-filters { grid-template-columns: 1fr; }
    #filter-pickup-time-dd { grid-column: 1; }

    /* ── Global page edges */
    .rurent-katalog,
    .rurent-cart-page,
    .rurent-checkout,
    .rurent-payment-method,
    .rurent-tnc,
    .rurent-confirmation,
    .rurent-product-page {
        padding: 16px 12px 100px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   PRINT — hide interactive chrome
   ═══════════════════════════════════════════════════════════════════ */
@media print {
    .rurent-sticky-cart,
    .rk2-filter-bar,
    .product-cta-group,
    .cart-item-controls,
    .btn-add-more,
    .rurent-recovery-bar {
        display: none !important;
    }
    .rurent-product-layout,
    .cart-layout,
    .rurent-checkout-layout {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ACCESSIBILITY — focus & motion preferences
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .rk2-card,
    .rk2-card__img img,
    .rk2-btn,
    .rk2-chip,
    .rk2-dropdown-btn,
    .rurent-btn,
    .sticky-cart-btn {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
}

/* Focus rings — high-contrast keyboard affordance */
.rk2-chip:focus-visible,
.rk2-btn:focus-visible,
.rk2-btn-cart:focus-visible,
.rk2-btn-detail:focus-visible,
.rk2-dropdown-btn:focus-visible,
.rk2-date-icon:focus-visible,
.qty-btn:focus-visible,
.extra-pill:focus-visible,
.rurent-btn:focus-visible {
    outline: 2px solid var(--rr-teal-2, #448888);
    outline-offset: 3px;
    border-radius: var(--rr-r-sm, 8px);
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE POLISH v3 — fix overwidth · hero height · filter 3-pill ·
                       sticky cart compact 1-row
   Scope: ≤ 768px. Desktop UNTOUCHED.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0. Global overflow guard — cegah horizontal scroll ─────────── */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
    .rurent-elementor-widget,
    .elementor-widget-container,
    .elementor-section,
    .elementor-container {
        max-width: 100% !important;
        overflow-x: hidden;
    }
    .rk2-filter-bar,
    .rurent-katalog,
    .rurent-katalog-preview,
    .rk2-grid {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ── A. HERO — override inline min-height dari Elementor ─────────── */
@media (max-width: 768px) {
    /* !important dibutuhkan karena Elementor inject inline style */
    .rr-hero-section {
        min-height: 52vh !important;
    }
    .rr-hero-inner {
        padding: 48px 20px 36px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .rr-hero-title {
        font-size: clamp(26px, 7.5vw, 40px) !important;
        letter-spacing: -0.5px;
        line-height: 1.12;
        margin-bottom: 10px;
        text-align: center;
    }
    .rr-hero-sub {
        font-size: 13.5px !important;
        line-height: 1.55;
        margin-bottom: 22px;
        max-width: 300px;
        text-align: center;
        color: rgba(255,255,255,.82);
    }
    .rr-hero-btn-group {
        flex-direction: column !important;
        gap: 8px;
        width: 100%;
        max-width: 280px;
        align-items: stretch;
    }
    .rr-hero-btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 14px;
        min-height: 46px;
        border-radius: 12px;
        text-align: center;
        justify-content: center;
        display: flex;
        align-items: center;
    }
}
@media (max-width: 480px) {
    .rr-hero-section { min-height: 48vh !important; }
    .rr-hero-inner   { padding: 40px 16px 30px !important; }
    .rr-hero-title   { font-size: clamp(24px, 7vw, 34px) !important; }
    .rr-hero-btn-group { max-width: 100%; }
}


/* ── B. KATALOG CARDS — Shopee-style 2-col ──────────────────────── */
@media (max-width: 768px) {
    .rurent-katalog--v2 .rk2-grid,
    .rurent-katalog-preview .rk2-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .rk2-card { border-radius: 12px; }
    .rk2-card__img { aspect-ratio: 1/1; border-radius: 0; }
    .rk2-avail-badge { font-size: 10px; padding: 3px 8px; bottom: 6px; left: 6px; }
    .rk2-card__body  { padding: 8px 10px 10px; gap: 4px; }
    .rk2-card__brand { font-size: 9.5px; }
    .rk2-card__name  {
        font-size: 12.5px; font-weight: 700; line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .rk2-card__specs {
        font-size: 10.5px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .rk2-bars { display: none; }
    .rk2-card__footer { flex-direction: column; gap: 6px; padding-top: 8px; align-items: stretch; }
    .rk2-card__price .rk2-price     { font-size: 14px; font-weight: 700; }
    .rk2-card__price .rk2-price-per { font-size: 10.5px; }
    .rk2-card__actions { width: 100%; gap: 5px; display: flex; }

    .rk2-btn-detail {
        flex: 1; font-size: 12px; padding: 8px 10px;
        min-height: 34px; border-radius: 8px; justify-content: center;
    }
    .rk2-btn-detail::before { content: none; }

    .rk2-btn-cart {
        flex: 1; font-size: 12px; padding: 8px 10px;
        min-height: 34px; border-radius: 8px; justify-content: center;
    }
}
@media (max-width: 375px) {
    .rurent-katalog--v2 .rk2-grid,
    .rurent-katalog-preview .rk2-grid {
        grid-template-columns: 1fr !important;
    }
    .rk2-bars { display: flex; }
    .rk2-btn-detail { flex: 0 0 auto; width: auto; font-size: 12px; padding: 8px 12px; }
    .rk2-btn-detail::before { content: none; }
}


/* ── C. FILTER BAR — 3 pill sejajar: Kalender · Jam · Filter ─────── */
@media (max-width: 768px) {

    /* Bar: 1 baris, 3 elemen rata */
    .rk2-filter-bar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 10px 14px !important;
        border-radius: 14px !important;
        overflow: visible !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* Sembunyikan date chips — kalender pakai button */
    .rk2-date-chips-wrap { display: none !important; }
    .rk2-filter-sep,
    .rk2-icon-sep { display: none !important; }

    /* ── Kalender pill button */
    .rk2-date-icon {
        flex: 1 1 0% !important;
        width: auto !important;
        height: 38px !important;
        min-width: 0 !important;
        min-height: 38px;
        border-radius: 980px !important;
        background: var(--rr-surface-3, #f4efe8) !important;
        border: 1.5px solid var(--rr-border-strong, #c8bfb3) !important;
        color: var(--rr-text, #1a1a1a) !important;
        font-size: 12.5px;
        font-weight: 600;
        font-family: var(--rr-font, 'Inter', sans-serif);
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        padding: 0 10px !important;
        white-space: nowrap;
        box-sizing: border-box;
    }
    .rk2-date-icon:hover, .rk2-date-icon.active {
        background: var(--rr-teal, #305057) !important;
        border-color: var(--rr-teal, #305057) !important;
        color: #fff !important;
    }
    .rk2-cal-label { font-size: 12px; font-weight: 600; display: inline; }

    /* ── Spec filters: flatten ke flex parent */
    .rk2-spec-filters {
        display: contents !important;
    }

    /* Semua dropdown kecuali jam: hidden */
    .rk2-spec-filters .rk2-dropdown:not(#filter-pickup-time-dd) {
        display: none !important;
    }
    .rk2-spec-filters .rk2-filter-sep { display: none !important; }

    /* ── Jam dropdown */
    #filter-pickup-time-dd {
        display: block !important;
        flex: 1 1 0%;
        min-width: 0;
    }
    #filter-pickup-time-dd .rk2-dropdown-btn {
        width: 100%;
        height: 38px;
        border-radius: 980px !important;
        font-size: 12.5px;
        font-weight: 600;
        padding: 0 10px !important;
        justify-content: center;
        gap: 5px;
        background: var(--rr-surface-3, #f4efe8) !important;
        border: 1.5px solid var(--rr-border-strong, #c8bfb3) !important;
        color: var(--rr-text, #1a1a1a);
        white-space: nowrap;
        box-sizing: border-box;
    }
    #filter-pickup-time-dd.open .rk2-dropdown-btn,
    #filter-pickup-time-dd .rk2-dropdown-btn:hover {
        background: var(--rr-teal, #305057) !important;
        border-color: var(--rr-teal, #305057) !important;
        color: #fff !important;
    }
    #filter-pickup-time-dd .rk2-dropdown-menu {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        min-width: 130px;
        width: auto;
    }

    /* ── Filter group button */
    .rk2-filter-group-btn {
        flex: 1 1 0%;
        min-width: 0;
        height: 38px;
        border-radius: 980px;
        background: var(--rr-surface-3, #f4efe8);
        border: 1.5px solid var(--rr-border-strong, #c8bfb3);
        color: var(--rr-text, #1a1a1a);
        font-size: 12.5px;
        font-weight: 600;
        font-family: var(--rr-font, 'Inter', sans-serif);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        padding: 0 10px;
        white-space: nowrap;
        box-sizing: border-box;
        transition: all .15s ease;
    }
    .rk2-filter-group-btn:hover,
    .rk2-filter-group-btn.has-filter {
        background: var(--rr-teal, #305057);
        border-color: var(--rr-teal, #305057);
        color: #fff;
    }
    .rk2-filter-group-btn .rk2-fbadge {
        display: none;
        background: #fff;
        color: var(--rr-teal, #305057);
        border-radius: 50%;
        width: 16px; height: 16px;
        font-size: 10px; font-weight: 800;
        align-items: center; justify-content: center;
        line-height: 1; flex-shrink: 0;
    }
    .rk2-filter-group-btn.has-filter .rk2-fbadge { display: inline-flex; }

    /* Desktop: hide sheet, show normal */
}
@media (min-width: 769px) {
    .rk2-filter-sheet-overlay,
    .rk2-filter-sheet,
    .rk2-filter-group-btn { display: none !important; }
    .rk2-date-chips-wrap  { display: block !important; }
    .rk2-spec-filters { display: flex !important; }
    .rk2-spec-filters .rk2-dropdown { display: block !important; }
    .rk2-spec-filters .rk2-filter-sep { display: block !important; }
}

/* ── C2. BOTTOM SHEET Filter ────────────────────────────────────── */
@media (max-width: 768px) {
    .rk2-filter-sheet-overlay {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 500;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .rk2-filter-sheet-overlay.open { display: block; animation: rrFadeIn .2s ease; }
    @keyframes rrFadeIn { from{opacity:0} to{opacity:1} }
    @keyframes rrSlideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }

    .rk2-filter-sheet {
        position: fixed; bottom: 0; left: 0; right: 0;
        background: var(--rr-surface, #fff);
        border-radius: 20px 20px 0 0;
        z-index: 501;
        box-shadow: 0 -8px 40px rgba(48,80,87,.20);
        animation: rrSlideUp .25s ease;
        max-height: 85vh; overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .rk2-filter-sheet-handle {
        width: 36px; height: 4px;
        background: var(--rr-border-strong, #c8bfb3);
        border-radius: 4px;
        margin: 10px auto 0;
    }
    .rk2-filter-sheet-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 20px 12px;
        border-bottom: 1px solid var(--rr-border, #ddd6cc);
    }
    .rk2-filter-sheet-title { font-size: 16px; font-weight: 700; color: var(--rr-text, #1a1a1a); }
    .rk2-filter-sheet-close {
        width: 30px; height: 30px; border-radius: 50%;
        background: var(--rr-surface-3, #f4efe8); border: none;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; font-size: 15px; color: var(--rr-text, #1a1a1a);
        font-family: var(--rr-font);
    }
    .rk2-filter-sheet-body { padding: 16px 20px 8px; display: flex; flex-direction: column; gap: 20px; }
    .rk2-filter-group { display: flex; flex-direction: column; gap: 8px; }
    .rk2-filter-group-label {
        font-size: 11px; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.7px; color: var(--rr-text-muted, #6b7c80);
    }
    .rk2-filter-group-options { display: flex; flex-wrap: wrap; gap: 7px; }
    .rk2-filter-opt {
        padding: 7px 14px; border-radius: 980px;
        border: 1.5px solid var(--rr-border-strong, #c8bfb3);
        background: var(--rr-surface-3, #f4efe8);
        color: var(--rr-text, #1a1a1a);
        font-size: 13px; font-weight: 600; cursor: pointer;
        font-family: var(--rr-font);
        transition: all .15s ease; min-height: 36px;
        display: inline-flex; align-items: center;
    }
    .rk2-filter-opt:hover {
        border-color: var(--rr-teal, #305057);
        color: var(--rr-teal, #305057);
        background: var(--rr-teal-light, #e0eaec);
    }
    .rk2-filter-opt.active {
        background: var(--rr-teal, #305057);
        border-color: var(--rr-teal, #305057);
        color: #fff;
    }
    .rk2-filter-sheet-footer {
        display: flex; gap: 10px; padding: 14px 20px;
        border-top: 1px solid var(--rr-border, #ddd6cc);
        background: var(--rr-surface, #fff);
        position: sticky; bottom: 0;
    }
    .rk2-sheet-reset-btn {
        flex: 0 0 auto; padding: 12px 20px; border-radius: 12px;
        border: 1.5px solid var(--rr-border-strong, #c8bfb3);
        background: transparent; color: var(--rr-text, #1a1a1a);
        font-size: 14px; font-weight: 600; cursor: pointer;
        font-family: var(--rr-font);
    }
    .rk2-sheet-apply-btn {
        flex: 1; padding: 12px 20px; border-radius: 12px;
        border: none; background: var(--rr-teal, #305057); color: #fff;
        font-size: 14px; font-weight: 700; cursor: pointer;
        font-family: var(--rr-font); min-height: 46px;
    }
}


/* ── D. STICKY CART — collapsible bottom sheet ───────────────────── */
@media (max-width: 768px) {

    /* ── Wrapper: full-width bottom sheet, no overflow ── */
    .rurent-sticky-cart {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        padding: 0 !important;
        box-shadow: 0 -2px 20px rgba(48,80,87,.15) !important;
        border: 1px solid var(--rr-border, #ddd6cc);
        border-bottom: none;
        background: rgba(255,255,255,.98) !important;
        backdrop-filter: saturate(200%) blur(20px);
        -webkit-backdrop-filter: saturate(200%) blur(20px);
        box-sizing: border-box;
        transition: transform .3s cubic-bezier(.4,0,.2,1);
        overflow: hidden;
    }

    /* Collapsed: hanya handle bar yang kelihatan (48px) */
    .rurent-sticky-cart.sc-collapsed {
        transform: translateY(calc(100% - 48px)) !important;
    }

    /* Desktop inner hidden — replaced by handle + body layout */
    .sticky-cart-inner {
        flex-direction: column !important;
        padding: 0 14px 12px !important;
        gap: 10px !important;
        box-sizing: border-box;
        width: 100%;
    }
    /* Desktop info + desktop total: hidden on mobile */
    .sticky-cart-info { display: none !important; }
    .sticky-desktop-total { display: none !important; }
    /* Mobile-only elements: shown on mobile */
    .sticky-cart-items { display: flex !important; flex-direction: column; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--rr-border, #ddd6cc); }
    .sticky-cart-summary-row { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; }

    /* ── Handle bar — always visible, tap to toggle ── */
    .sticky-cart-handle {
        height: 48px;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0 14px;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        flex-shrink: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .sticky-cart-handle-left {
        flex: 1;
        min-width: 0;
    }
    .sticky-cart-icon {
        width: 32px; height: 32px; min-width: 32px;
        background: var(--rr-teal-light, #e0eaec);
        border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        font-size: 15px; flex-shrink: 0;
        color: var(--rr-teal, #305057);
    }
    .sticky-cart-qty {
        font-size: 13px; font-weight: 700;
        color: var(--rr-teal, #305057);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        display: block;
    }
    .sticky-total-label { display: none; }
    .sticky-total-val {
        font-size: 14px; font-weight: 800;
        color: var(--rr-teal, #305057); letter-spacing: -0.3px;
    }

    /* ── Actions: tombol Cart + Bayar ── */
    .sticky-cart-actions {
        display: flex !important;
        gap: 8px;
        padding: 0 !important;
        align-items: center;
        padding-bottom: max(0px, env(safe-area-inset-bottom, 0px)) !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* Tombol "Lihat Cart" — outline */
    .sticky-view-cart-link,
    .sticky-cart-btn--secondary {
        display: inline-flex !important;
        align-items: center; justify-content: center;
        gap: 5px;
        flex: 0 0 auto;
        padding: 10px 16px;
        font-size: 13px; font-weight: 600;
        min-height: 44px;
        border-radius: var(--rr-r-md, 12px);
        border: 1.5px solid var(--rr-teal, #305057);
        background: transparent;
        color: var(--rr-teal, #305057);
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
        box-sizing: border-box;
    }
    .sticky-view-cart-link:hover,
    .sticky-cart-btn--secondary:hover {
        background: var(--rr-teal, #305057);
        color: #fff;
    }

    /* Tombol "Bayar" — solid, flex-grow */
    .sticky-cart-btn:not(.sticky-cart-btn--secondary) {
        display: flex !important;
        align-items: center; justify-content: center;
        gap: 5px;
        flex: 1;
        padding: 10px 16px;
        font-size: 13px; font-weight: 700;
        min-height: 44px;
        border-radius: var(--rr-r-md, 12px);
        background: var(--rr-teal, #305057);
        color: #fff;
        border: 1.5px solid var(--rr-teal, #305057);
        white-space: nowrap;
        transition: background .15s ease;
        box-sizing: border-box;
    }
    .sticky-cart-btn:not(.sticky-cart-btn--secondary):hover {
        background: var(--rr-teal-hover, #264349);
        border-color: var(--rr-teal-hover, #264349);
    }

    /* Page clearance */
    .rurent-katalog,
    .rurent-katalog-preview,
    .rurent-product-page {
        padding-bottom: 64px !important;
    }
}

@media (max-width: 480px) {
    .sticky-cart-icon { width: 30px; height: 30px; min-width: 30px; font-size: 14px; }
    .sticky-total-val { font-size: 13.5px; }
    .sticky-cart-qty { font-size: 12.5px; }
    .sticky-cart-btn:not(.sticky-cart-btn--secondary),
    .sticky-view-cart-link,
    .sticky-cart-btn--secondary {
        font-size: 12.5px; padding: 9px 12px; min-height: 42px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   END — Mobile Polish v3
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   FIX: Mobile — sticky cart tampil di depan floating WA button
   Sticky cart z-index (999) < WA float z-index (9990), jadi WA
   nutupin cart. Di mobile kita naikkan cart di atas WA.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .rurent-sticky-cart {
        z-index: 10000 !important;
    }
    .rurent-wa-float {
        z-index: 9990 !important;
    }
    /* Saat sticky cart aktif, WA button naik supaya tidak ketimpa cart */
    body.rurent-cart-visible .rurent-wa-float {
        bottom: 80px !important;
    }
}