/* ============================================================
   Refubly — components
   Split out of the old single refubly-theme.css, rule by rule: a selector
   rendered by exactly one page lives in that page's file, anything shared
   lives here. Media queries are re-wrapped per file, so each keeps only its
   own overrides.
   Load order: base -> chrome -> components -> <page>. Keep it.
   NOTE: theme sets html{font-size:62.5%} -> 1rem = 10px.
   ============================================================ */

h1, h2, h3, h4, h5, h6,
.banner-title, .title, .widget-title, .icon-box-title,
.rf-title, .rf-seo-heading h1 {
    font-family: var(--rf-font-heading) !important;
    letter-spacing: -.02em;
}

/* headline weight punch, like the reference */

.rf-title,
.rf-seo-heading h1,
.banner-title {
    font-weight: 700;
}

/* ------------------------------------------------------------
   1. Landing scaffolding
   ------------------------------------------------------------ */

.rf-container {
    max-width: 152rem;
    margin-inline: auto;
    padding-inline: 2rem;
    width: 100%;
}

.rf-hero-main .banner {
    height: 100%;
}

.rf-hero-main .banner-content {
    padding-left: clamp(2rem, 5vw, 6.4rem);
    max-width: 62rem;
}

.rf-hero-main .banner-subtitle {
    font-size: clamp(1.2rem, 1rem + .5vw, 1.5rem);
    letter-spacing: .12em;
    margin-bottom: 1rem;
}

.rf-hero-main .banner-title {
    font-size: clamp(2.2rem, 1.4rem + 2.6vw, 4.6rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.12;
    margin-bottom: 1.2rem;
}

.rf-hero-main hr.divider {
    display: none;
}

.rf-hero-main .btn {
    border-radius: 999px;
    padding: 1.15rem 2.8rem;
    font-size: 1.3rem;
    letter-spacing: .05em;
}

@media (max-width: 991px) {
    .rf-hero-main .banner {
            aspect-ratio: 16 / 8;
            min-height: 24rem;
        }
}

@media (max-width: 575px) {
    .rf-hero-main .banner {
            aspect-ratio: 16 / 10;
            min-height: 21rem;
        }
}

@media (min-width: 992px) {
    .rf-hero-main,
        .rf-hero-main .banner {
            height: 44rem;
        }
}

.rf-cats .category-name {
    font-size: 1.35rem;
    font-weight: 600;
    text-align: center;
    margin-top: 1.2rem;
    letter-spacing: 0;
    text-transform: none;
}

.rf-cats .category-name a {
    color: var(--rf-ink);
}

.rf-cats .category-name a:hover {
    color: var(--rf-primary);
}

/* ------------------------------------------------------------
   5. Product card
   ------------------------------------------------------------ */

.rf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius);
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.rf-card:hover {
    border-color: #d9dee5;
    box-shadow: var(--rf-shadow-hover);
    transform: translateY(-.3rem);
}

.rf-card-media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: #fff;
    overflow: hidden;
}

.rf-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1.6rem;
    transition: opacity .35s ease, transform .35s ease;
}

.rf-card:hover .rf-card-media img {
    transform: scale(1.03);
}

.rf-card-img-hover {
    opacity: 0;
    z-index: 1;
}

.rf-card:hover .rf-card-img-hover {
    opacity: 1;
}

.rf-card-badge {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    z-index: 2;
    background: var(--rf-success);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    padding: .5rem .9rem;
    border-radius: 999px;
    letter-spacing: .02em;
}

.rf-card-body {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    flex-grow: 1;
    padding: 1.3rem 1.5rem 1.7rem;
    border-top: 1px solid var(--rf-border-soft);
}

.rf-card-name {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.05em;
    min-height: calc(2 * 1.45em);
}

.rf-card-name a {
    color: var(--rf-ink);
}

.rf-card-name a:hover {
    color: var(--rf-primary);
}

.rf-card-tag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--rf-success);
}

.rf-card-tag i {
    font-size: 1.1rem;
}

.rf-card-price {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.rf-price-new {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--rf-ink);
    letter-spacing: -.01em;
}

.rf-price-old {
    font-size: 1.3rem;
    color: var(--rf-muted);
}

/* Card inside a swiper slide keeps equal height */

.swiper-slide > .rf-card {
    height: 100%;
}

@media (max-width: 419px) {
    .rf-card-body {
            padding: 1rem 1.1rem 1.3rem;
        }

    .rf-card-name {
            font-size: 1.3rem;
        }

    .rf-price-new {
            font-size: 1.5rem;
        }
}

.rf-mini .rf-price-new {
    font-size: 1.45rem;
}

.rf-mini .rf-price-old {
    font-size: 1.2rem;
}

.rf-svc-anim-slide { overflow: hidden; }

.rf-svc-anim-flip { transform-style: preserve-3d; animation: rfSvcFlip 5s ease-in-out infinite; overflow: visible; }

.rf-svc-anim-flash { overflow: hidden; }

.rf-svc-anim-flash::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%);
    transform: translateX(-130%);
    animation: rfSvcShine 2.4s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .rf-svc-anim-flip { animation: none !important; }
}

/* ------------------------------------------------------------
   12a. Shop page
   ------------------------------------------------------------ */

.rf-grid > .alert {
    grid-column: 1 / -1;
}

.rf-grid-shop {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .rf-grid-shop {
            grid-template-columns: repeat(3, 1fr);
        }
}

@media (min-width: 1200px) {
    .rf-grid-shop {
            grid-template-columns: repeat(4, 1fr);
        }
}

@media (max-width: 575px) {
    .shop-default-banner .banner-content {
            padding: 1.6rem;
        }
}

.shop-sidebar .widget-title {
    font-size: 1.5rem;
    font-weight: 700;
}

#applyFiltersBtn {
    border-radius: 999px;
}

.product-single .product-thumb.active,
.product-single .product-thumb:hover {
    border-color: var(--rf-primary);
}

.product-single .product-price {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

.product-single .product-price .new-price {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--rf-ink);
    letter-spacing: -.01em;
}

.product-single .price-block .old-price {
    font-size: 1.6rem;
    color: var(--rf-muted);
}

.product-single .product-qty-form .input-group {
    border: 1px solid var(--rf-border);
    border-radius: 999px;
    overflow: hidden;
}

.product-tabs .nav-tabs .nav-link {
    font-size: 1.5rem;
    font-weight: 600;
}

.product-tabs .nav-tabs .nav-link.active,
.product-tabs .nav-tabs .nav-link:hover {
    color: var(--rf-primary);
    border-color: var(--rf-primary);
}

#product-tab-specification .list-none li {
    padding: 1.1rem 1.4rem;
    border-radius: var(--rf-radius-sm);
    font-size: 1.35rem;
}

#product-tab-specification .list-none li:nth-child(odd) {
    background: var(--rf-bg-soft);
}

.related-product-section .title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* .product-sidebar .widget-icon-box {
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius);
    padding: .4rem 1.8rem;
    background: #fff;
} */

.product-sidebar .widget-icon-box .icon-box {
    padding: 1.5rem 0;
}

.product-sidebar .widget-icon-box .icon-box + .icon-box {
    border-top: 1px solid var(--rf-border-soft);
}

.product-sidebar .widget-banner .banner {
    border-radius: var(--rf-radius);
    overflow: hidden;
}

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

/* keep swipers from bleeding horizontally on small screens */

.swiper-container {
    max-width: 100%;
}

@media (max-width: 767px) {
    /* data tables (cart, orders, account) scroll instead of breaking layout */

    .main table.shop-table,
        .main .order-table,
        .main table.cart-table {
            display: block;
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

    .container,
        .container-fluid,
        .rf-container {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }
}

@media (max-width: 479px) {
    /* single-column checkout/auth forms */

    .main .form-row,
        .main .row.gutter-lg > [class*="col-"] {
            min-width: 0;
        }

    .main .btn {
            white-space: normal;
        }
}

/* ── Pagination ── */

.rf-pagination-wrap { margin-top: 3rem; display: flex; justify-content: center; }

.rf-pagination {
    display: flex;
    align-items: center;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.rf-pagination li { margin: 0; }

.rf-pagination a,
.rf-pagination span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-width: 3.8rem;
    height: 3.8rem;
    padding: 0 1.2rem;
    justify-content: center;
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius-sm);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--rf-ink);
    background: #fff;
    text-decoration: none;
    transition: all .15s ease;
}

.rf-pagination a:hover { border-color: var(--rf-primary); color: var(--rf-primary); }

.rf-pagination .active span { background: var(--rf-ink); border-color: var(--rf-ink); color: #fff; }

.rf-pagination .disabled span { color: var(--rf-muted); background: var(--rf-bg-soft); cursor: default; }

@media (max-width: 991px) {
    .shop-sidebar.rf-sidebar-open .sidebar-overlay {
            display: block;
            position: fixed;
            inset: 0;
            background: rgba(20, 24, 31, .45);
            z-index: 1200;
        }

    .shop-sidebar.rf-sidebar-open .sidebar-content {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: 88vw;
            max-width: 34rem;
            background: #fff;
            z-index: 1201;
            overflow-y: auto;
            padding: 1.6rem;
            box-shadow: var(--rf-shadow-hover);
        }

    .shop-sidebar.rf-sidebar-open .sidebar-close {
            display: block;
            position: fixed;
            top: 1.2rem;
            left: calc(88vw - 4rem);
            z-index: 1202;
        }
}

/* ── Filter sidebar scrolling ─────────────────────────────────────────────
   The theme's sticky.js pins .sticky-sidebar with inline positioning sized to
   its original height, so filter groups past the fold became unreachable.
   Native CSS sticky + an internally scrollable panel keeps every group
   reachable no matter how many facets a category has. */

@media (min-width: 992px) {
    .shop-sidebar .sticky-sidebar {
            position: sticky !important;
            top: 2rem !important;
            bottom: auto !important;
            left: auto !important;
            width: auto !important;
            transform: none !important;
        }
}

/* The theme's sticky plugin measures the sidebar once and locks a height on the
   wrapper, so groups opened later were clipped. Let the wrapper size itself. */

.shop-sidebar .sidebar-content,
.shop-sidebar.sidebar-fixed .sidebar-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.rf-lcard .rf-price-new { font-size: 2.1rem; font-weight: 800; color: var(--rf-ink); }

.rf-lcard .rf-price-old { font-size: 1.4rem; }

@media (max-width: 575px) {
    .rf-lcard .rf-price-new { font-size: 1.8rem; }
}

.rf-cat.is-active .rf-cat-media {
    border-color: var(--rf-primary);
    box-shadow: 0 0 0 3px var(--rf-primary-soft);
}

.rf-cat:hover .rf-cat-name,
.rf-cat.is-active .rf-cat-name { color: var(--rf-primary); }

.rf-brands {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    justify-content: center;
}

/* --- why refubly ------------------------------------------ */

.rf-why {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.rf-why-card {
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius);
    padding: 2.8rem;
    transition: transform .18s ease, box-shadow .22s ease, border-color .2s ease;
}

.rf-why-card:hover { transform: translateY(-4px); box-shadow: var(--rf-shadow-hover); border-color: transparent; }

.rf-why-card h3 { font-size: 1.8rem; color: var(--rf-ink); margin: 0 0 .8rem; }

.rf-why-card p { font-size: 1.4rem; line-height: 1.6; color: var(--rf-text); margin: 0; }

/* --- sell / trade-in -------------------------------------- */

.rf-sell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 4rem;
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: 2rem;
}

.rf-sell-quote {
    display: inline-flex;
    flex-direction: column;
    gap: .4rem;
    margin: 2rem 0;
    padding: 1.8rem 2.4rem;
    background: var(--rf-primary-soft);
    border: 1px dashed var(--rf-primary);
    border-radius: 1.4rem;
}

.rf-sell-quote-label { font-size: 1.3rem; font-weight: 600; color: var(--rf-primary-dark); }

.rf-sell-quote-price { font-family: var(--rf-font-heading); font-size: 3.4rem; font-weight: 800; line-height: 1; color: var(--rf-ink); }

.rf-sell-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }

.rf-sell-perks li { display: flex; align-items: center; gap: 1rem; font-size: 1.4rem; color: var(--rf-text); }

.rf-sell-perks li i { color: var(--rf-primary); }

.rf-field { margin-bottom: 1.6rem; }

.rf-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }

.rf-field label { display: block; margin-bottom: .6rem; font-size: 1.3rem; font-weight: 600; color: var(--rf-ink); }

.rf-field input,
.rf-field select {
    width: 100%;
    height: 4.8rem;
    padding: 0 1.4rem;
    font-size: 1.4rem;
    color: var(--rf-ink);
    background: #fff;
    border: 1px solid var(--rf-border);
    border-radius: .9rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.rf-field input:focus,
.rf-field select:focus { outline: none; border-color: var(--rf-primary); box-shadow: 0 0 0 3px rgba(7, 166, 75, .15); }

.rf-form-note { margin: 1.2rem 0 0; font-size: 1.2rem; color: var(--rf-muted); text-align: center; }

/* --- customer reviews ------------------------------------- */

/* The homepage's grid of testimonial cards. It was `.rf-reviews`, the same name
   the PDP gives its whole Ratings & Reviews <section> — so this four-column
   grid was laying that section out too, squeezing the review list, the summary
   and the write-a-review gate into 191px columns side by side. */
.rf-reviewgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.rf-stars { color: #F5A623; font-size: 1.7rem; letter-spacing: .2rem; }

/* --- responsive ------------------------------------------- */

@media (max-width: 1199px) {
    .rf-collections, .rf-reviewgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
    .rf-why { grid-template-columns: repeat(2, 1fr); }

    .rf-sell { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .rf-why { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .rf-field-row { grid-template-columns: 1fr; }

    .rf-collections, .rf-reviewgrid { grid-template-columns: 1fr; }
}

/* ========================================================================
   Reusable star rating (fractional, CSS-only)
   ======================================================================== */

.rf-stars { position: relative; display: inline-block; font-size: 1.6rem; line-height: 1; color: #dfe3e8; letter-spacing: 2px; font-family: Arial, sans-serif; }

.rf-stars::before { content: "\2605\2605\2605\2605\2605"; }

.rf-stars .rf-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; width: var(--pct, 0); color: #ffb400; }

.rf-stars .rf-stars-fill::before { content: "\2605\2605\2605\2605\2605"; }

/* ========================================================================
   Ratings & Reviews
   ======================================================================== */

.rf-reviews { margin: 4rem 0 3rem; }

.rf-rv-score .rf-stars { font-size: 1.8rem; margin: .8rem 0 .4rem; }

.rf-rv-tag--pro { color: var(--rf-green); background: var(--rf-primary-soft); }

.rf-rv-tag--con { color: #e5484d; background: #fdecec; }

.rf-rv-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }

.pdp-fullwidth .main-content { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; order: 1; }

.pdp-fullwidth .product-sidebar .sidebar-content,
.pdp-fullwidth .product-sidebar .sticky-sidebar,
.pdp-fullwidth .product-sidebar .sticky-content { position: static !important; transform: none !important; top: auto !important; width: auto !important; max-height: none !important; overflow: visible !important; }

/* Neutralise the mobile off-canvas chrome (band is inline now) */

.pdp-fullwidth .product-sidebar .sidebar-toggle,
.pdp-fullwidth .product-sidebar .sidebar-close,
.pdp-fullwidth .product-sidebar .sidebar-overlay { display: none !important; }

/* Each widget = its own full-width row */

.pdp-fullwidth .product-sidebar .sticky-sidebar { display: block; }

.pdp-fullwidth .product-sidebar .widget { width: 100%; margin: 0 0 3rem !important; }

.pdp-fullwidth .product-sidebar .widget:last-child { margin-bottom: 0 !important; }

.pdp-fullwidth .product-sidebar .widget > .title-link-wrapper .title { font-size: 1.8rem; }

.pdp-fullwidth .widget-icon-box .icon-box { margin: 0; padding: 1.6rem 1.8rem; border: 1px solid var(--rf-border); border-radius: var(--rf-radius); background: var(--rf-surface); }

/* Promo banners: natural-size row */

.pdp-fullwidth .widget-banner { display: flex; flex-wrap: wrap; gap: 1.6rem; }

.pdp-fullwidth .widget-banner .banner { margin: 0; }

/* More Products: 3 across per slide */

.pdp-fullwidth .widget-products .swiper-slide,
.pdp-fullwidth .widget-products .widget-col { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; height: auto !important; }

@media (max-width: 991px) {
    .pdp-fullwidth .widget-products .swiper-slide,
        .pdp-fullwidth .widget-products .widget-col { grid-template-columns: 1fr; }
}

.rf-topspecs, .rf-specs, .rf-desc, .rf-trustpanel, .rf-why { margin: 3.5rem 0; }

.rf-stock--in { color: var(--rf-green); background: var(--rf-primary-soft); }

.rf-stock--low { color: #b26b00; background: #fff4e0; }

.rf-stock--out { color: #b42318; background: #fdecec; }

.rf-why-card { position: relative; display: block; border-radius: var(--rf-radius); overflow: hidden; aspect-ratio: 16 / 9; background: var(--rf-bg-soft); text-decoration: none; }

.rf-why-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rf-cat.is-active .rf-cat-media .rf-cat-icon {
    color: var(--rf-ink);
}

.rf-vp-nav-links a.is-active { color: var(--rf-primary); font-weight: 600; }

.rf-vp-nav-links a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--rf-primary);
}

.rf-vauth-step {
    padding: 2.4rem 0;
    border-top: 1px solid var(--rf-border-soft);
}

.rf-vauth-step:first-of-type {
    padding-top: .8rem;
    border-top: 0;
}

.rf-vauth-step-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.6rem;
    font-family: var(--rf-font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--rf-ink);
}

.rf-vauth-step-title span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--rf-primary-soft);
    color: var(--rf-primary);
    font-size: 1.3rem;
    font-weight: 700;
}

.rf-vauth-fineprint {
    margin: 1.6rem 0 0;
    font-size: 1.3rem;
    line-height: 1.6;
    color: var(--rf-muted);
    text-align: center;
}

/* ---------- Panel shell ---------- */

/* The signed-in panel shell. Despite the name it is not vendor-only: the
   customer account page renders the same sidebar + main frame, so both kinds of
   signed-in user get one look. */
.rf-vpanel-grid {
    display: grid;
    grid-template-columns: 26rem minmax(0, 1fr);
    align-items: start;
    gap: 3rem;
}

.rf-vpanel-aside {
    position: sticky;
    top: 2rem;
    padding: 2.4rem 2rem;
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius);
    background: var(--rf-surface);
    box-shadow: var(--rf-shadow);
}

.rf-vpanel-id {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.6rem;
}

.rf-vpanel-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    background: var(--rf-gradient-blue);
    color: #fff;
    font-family: var(--rf-font-heading);
    font-size: 1.8rem;
    font-weight: 700;
}

.rf-vpanel-id-text { min-width: 0; }

.rf-vpanel-id-text strong {
    display: block;
    font-size: 1.4rem;
    color: var(--rf-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rf-vpanel-id-text small {
    display: block;
    font-size: 1.2rem;
    color: var(--rf-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rf-vpanel-status {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 2rem;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 600;
}

.rf-vpanel-status i { font-size: 1.1rem; }

.rf-vpanel-status.is-pending  { background: #fff5e0; color: #8a5a00; }

.rf-vpanel-status.is-approved { background: var(--rf-primary-soft); color: var(--rf-primary); }

.rf-vpanel-status.is-rejected { background: #fdecec; color: #b42318; }

.rf-vpanel-nav {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.rf-vpanel-nav a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border-radius: var(--rf-radius-sm);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--rf-text);
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

.rf-vpanel-nav a i {
    width: 1.8rem;
    flex: 0 0 auto;
    font-size: 1.4rem;
    color: var(--rf-muted);
    text-align: center;
    transition: color .18s ease;
}

.rf-vpanel-nav a:hover { background: var(--rf-bg-soft); color: var(--rf-ink); }

/* Bootstrap's tab JS stamps `.active` on the chosen link; the vendor panel
   marks its own with `.is-active`. Both mean the same thing here — the customer
   account panel drives its sections through those tabs. */
.rf-vpanel-nav a.is-active,
.rf-vpanel-nav a.active {
    background: var(--rf-primary-soft);
    color: var(--rf-primary);
    font-weight: 600;
}

.rf-vpanel-nav a.is-active i,
.rf-vpanel-nav a.active i,
.rf-vpanel-nav a:hover i { color: inherit; }

.rf-vpanel-signout {
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--rf-border-soft);
}

.rf-vpanel-signout button {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.1rem 1.2rem;
    border: 0;
    border-radius: var(--rf-radius-sm);
    background: transparent;
    color: var(--rf-muted);
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.rf-vpanel-signout button:hover { background: #fdecec; color: #b42318; }

.rf-vpanel-signout button i { width: 1.8rem; text-align: center; }

/* ---------- Panel content ---------- */

.rf-vpanel-head { margin-bottom: 2.4rem; }

.rf-vpanel-title {
    font-family: var(--rf-font-heading);
    font-size: clamp(2rem, 1.6rem + 1vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--rf-ink);
    margin: 0;
}

.rf-vpanel-sub {
    margin: .6rem 0 0;
    font-size: 1.4rem;
    color: var(--rf-muted);
}

.rf-vpanel-flash {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1.3rem 1.8rem;
    border-radius: var(--rf-radius-sm);
    font-size: 1.4rem;
}

.rf-vpanel-flash.is-success { background: var(--rf-primary-soft); color: var(--rf-primary); }

.rf-vpanel-flash.is-error   { background: #fdecec; color: #b42318; }

.rf-vpanel-banner {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    margin-bottom: 2.4rem;
    padding: 1.8rem 2rem;
    border: 1px solid #ffe2ad;
    border-radius: var(--rf-radius-sm);
    background: #fffaf0;
}

.rf-vpanel-banner i { color: #b57600; font-size: 1.8rem; margin-top: .2rem; }

.rf-vpanel-banner strong { display: block; font-size: 1.45rem; color: var(--rf-ink); }

.rf-vpanel-banner p { margin: .4rem 0 0; font-size: 1.35rem; line-height: 1.6; color: var(--rf-text); }

.rf-vpanel-banner.is-error { border-color: #f5c2c0; background: #fdf3f3; }

.rf-vpanel-banner.is-error i { color: #b42318; }

.rf-vpanel-strong { font-weight: 600; color: var(--rf-ink); }

/* ---------- Tables ---------- */

.rf-vpanel-tablewrap {
    overflow-x: auto;
    margin: 0 -.4rem;
    padding: 0 .4rem;
}

.rf-vpanel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.35rem;
}

.rf-vpanel-table th {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--rf-border);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--rf-muted);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.rf-vpanel-table td {
    padding: 1.4rem 1.2rem;
    border-bottom: 1px solid var(--rf-border-soft);
    color: var(--rf-text);
    vertical-align: middle;
}

.rf-vpanel-table tr:last-child td { border-bottom: 0; }

.rf-vpanel-table .is-num { text-align: right; white-space: nowrap; }

.rf-vpanel-table .is-actions { text-align: right; white-space: nowrap; }

.rf-vpanel-pill {
    display: inline-block;
    padding: .35rem 1rem;
    border-radius: 999px;
    background: var(--rf-bg-soft);
    color: var(--rf-text);
    font-size: 1.2rem;
    font-weight: 600;
    white-space: nowrap;
}

.rf-vpanel-pill.is-ok   { background: var(--rf-primary-soft); color: var(--rf-primary); }

.rf-vpanel-pill.is-warn { background: #fff5e0; color: #8a5a00; }

.rf-vpanel-pill.is-bad  { background: #fdecec; color: #b42318; }

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
    .rf-vpanel-grid { grid-template-columns: 1fr; }

    .rf-vpanel-aside { position: static; }

    .rf-vpanel-nav {
            flex-direction: row;
            flex-wrap: wrap;
            gap: .8rem;
        }

    .rf-vpanel-nav a { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 575px) {
    .rf-vpanel-actions .btn { width: 100%; }
}

/* ============================================================
   ERROR PAGES (errors/400, 401, 403, 404, 419, 429)
   500 and 503 are deliberately standalone documents with their
   own inline CSS — they must render when the DB is down, so
   they cannot depend on this file. Reminder: 1rem = 10px.
   ============================================================ */

.rf-err .page-content { padding-bottom: 6rem; }

.rf-err-hero {
    max-width: 66rem;
    margin: 0 auto 5.6rem;
    padding: 2rem 0;
    text-align: center;
}

.rf-err-code {
    display: block;
    font-family: var(--rf-font-heading);
    font-size: clamp(7rem, 5rem + 9vw, 13rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    background: var(--rf-gradient-blue);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 1rem;
}

.rf-err-hero.is-warn .rf-err-code {
    background: linear-gradient(135deg, #b57600 0%, #e0a418 55%, #f5c542 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.rf-err-hero.is-danger .rf-err-code {
    background: linear-gradient(135deg, #7a1310 0%, #b42318 55%, #e05a4f 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.rf-err-title {
    font-family: var(--rf-font-heading);
    font-size: clamp(2rem, 1.6rem + 1.2vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--rf-ink);
    margin: 0 0 1.2rem;
}

.rf-err-text {
    font-size: 1.5rem;
    line-height: 1.65;
    color: var(--rf-muted);
    margin: 0 auto 3rem;
    max-width: 52ch;
}

/* ---------- Search ---------- */

.rf-err-search {
    display: flex;
    align-items: center;
    gap: .8rem;
    max-width: 46rem;
    margin: 0 auto 3rem;
    padding: .5rem .5rem .5rem 1.8rem;
    border: 1px solid var(--rf-border);
    border-radius: 999px;
    background: var(--rf-surface);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.rf-err-search:focus-within {
    border-color: var(--rf-primary);
    box-shadow: 0 0 0 3px rgba(5, 128, 58, .12);
}

.rf-err-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 4.2rem;
    border: 0;
    background: transparent;
    color: var(--rf-ink);
    font-size: 1.4rem;
}

.rf-err-search input:focus { outline: none; }

.rf-err-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 4.2rem;
    height: 4.2rem;
    border: 0;
    border-radius: 50%;
    background: var(--rf-primary);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    transition: background-color .18s ease;
}

.rf-err-search-btn:hover { background: var(--rf-primary-dark); }

/* ---------- Actions ---------- */

.rf-err-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    justify-content: center;
}

/* ---------- Helpful links ---------- */

.rf-err-links {
    max-width: 108rem;
    margin: 0 auto;
    padding-top: 4rem;
    border-top: 1px solid var(--rf-border);
}

.rf-err-links-title {
    font-family: var(--rf-font-heading);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--rf-ink);
    text-align: center;
    margin: 0 0 2.4rem;
}

.rf-err-links-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
}

.rf-err-link {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    padding: 1.8rem;
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius);
    background: var(--rf-surface);
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.rf-err-link:hover {
    border-color: transparent;
    box-shadow: var(--rf-shadow-hover);
    transform: translateY(-2px);
}

.rf-err-link i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 4rem;
    height: 4rem;
    border-radius: 1.1rem;
    background: var(--rf-primary-soft);
    color: var(--rf-primary);
    font-size: 1.6rem;
}

.rf-err-link strong {
    display: block;
    font-size: 1.45rem;
    color: var(--rf-ink);
    margin-bottom: .2rem;
}

.rf-err-link small {
    display: block;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--rf-muted);
}

@media (max-width: 991px) {
    .rf-err-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .rf-err-links-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .rf-err-link:hover { transform: none; }
}

/* ── Homepage sections responsive polish ── */

@media (max-width: 1366px) {
    .rf-container {
            padding-inline: 1.6rem;
        }
}

.product-single .product-thumb.active {
    border-color: var(--rf-ink);
}

/* ── Buy box: one vertical rhythm for every child ──────────────────────── */

.product-single .product-details {
    display: flex;
    flex-direction: column;
    gap: var(--pdp-gap);
    align-items: stretch;
}

/* The theme ships margins on most of these; the flex gap owns spacing now,
   so they are zeroed rather than fought with per-element overrides. */

.product-single .product-details > * {
    margin-top: 0;
    margin-bottom: 0;
}

/* ── Price ─────────────────────────────────────────────────────────────── */

.product-single .product-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .4rem 1.2rem;
    margin: 0;
}

.product-single .product-price .new-price {
    font-family: var(--rf-font-heading);
    font-size: clamp(2.8rem, 2.2rem + 1.4vw, 3.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--rf-ink);
    text-decoration: none;
}

.product-single .price-block .old-price {
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--rf-muted);
    text-decoration: line-through;
    opacity: 1;
    margin: 0;
}

/* ── Variant picker ────────────────────────────────────────────────────── */

#variant-picker {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

/* Two stray <br>s used to do this job and left an uneven tail. */

#variant-picker br {
    display: none;
}

.product-single .product-qty-form .input-group {
    height: 100%;
    min-height: 5rem;
    border: 1.5px solid var(--rf-border);
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
}

.product-single .social-icon {
    width: 3.6rem;
    height: 3.6rem;
    line-height: 3.4rem;
    border-radius: 50%;
    border: 1px solid var(--rf-border);
    color: var(--rf-muted);
    transition: color .18s, border-color .18s, background .18s;
}

.product-single .social-icon:hover {
    color: var(--rf-ink);
    border-color: var(--rf-ink);
    background: var(--rf-bg-soft);
}

/* ── Section rhythm below the fold ─────────────────────────────────────── */

.rf-topspecs,
.rf-specs,
.rf-desc,
.rf-trustpanel,
.rf-why,
.rf-reviews,
.related-product-section {
    margin: 4.5rem 0 0;
    scroll-margin-top: 10rem;
}

.related-product-section .title {
    font-family: var(--rf-font-heading);
    font-size: clamp(1.9rem, 1.6rem + .7vw, 2.3rem);
    letter-spacing: -.02em;
}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT CARD MEDIA — hover gallery + zoom
   The card used to hold two <img>s and cross-fade to the second on hover.
   It now stacks every image the product has; refubly.js walks them while the
   pointer is over the card, and the dots show how many there are.
   ══════════════════════════════════════════════════════════════════════════ */

.rf-card-media {
    isolation: isolate;
}

.rf-card-media .rf-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1.6rem;
    opacity: 0;
    transform: scale(1);
    transition: opacity .35s ease, transform .45s ease;
    will-change: opacity, transform;
}

.rf-card-media .rf-card-img.is-active {
    opacity: 1;
}

/* The zoom is on the active frame only, so the outgoing image does not
   drift while it fades. */

.rf-card:hover .rf-card-media .rf-card-img.is-active,
.rf-card-media:focus-visible .rf-card-img.is-active {
    transform: scale(1.09);
}

/* Dots */

.rf-card-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.1rem;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: .5rem;
    pointer-events: none;
}

.rf-card-dot {
    width: .6rem;
    height: .6rem;
    border-radius: 999px;
    background: var(--rf-border);
    transition: width .25s ease, background .25s ease;
}

.rf-card-dot.is-active {
    width: 1.6rem;
    background: var(--rf-primary);
}

/* The theme's generic hover-image rule no longer applies — kept only so an
   older cached page does not show two images at once. */

.rf-card-img-hover {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .rf-card-media .rf-card-img,
        .rf-card-dot {
            transition: none;
        }

    .rf-card:hover .rf-card-media .rf-card-img.is-active {
            transform: none;
        }
}

/* Shop list rows get the same treatment at a smaller scale. */

.rf-lcard-media .rf-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1.2rem;
    opacity: 0;
    transition: opacity .35s ease, transform .45s ease;
}

.rf-lcard-media .rf-card-img.is-active {
    opacity: 1;
}

.rf-lcard:hover .rf-lcard-media .rf-card-img.is-active {
    transform: scale(1.07);
}

.rf-lcard-media .rf-card-dots {
    bottom: .8rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   PDP quantity stepper
   The markup order is input → plus → minus (the theme positions those two
   absolutely). Laying it out as a plain flex row therefore produced
   "1 − +" with the controls jammed against the number. `order` puts it back
   into the shape people expect — minus, value, plus — without touching the
   markup the theme's own scripts look for.
   ══════════════════════════════════════════════════════════════════════════ */

.product-single .product-qty-form .input-group {
    display: inline-flex;
    align-items: stretch;
    width: auto;
    height: 5rem;
    min-height: 0;
    padding: 0;
    border: 1.5px solid var(--rf-border);
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
}

.product-single .product-qty-form .quantity,
.product-single .product-qty-form input.form-control {
    order: 2;
    width: 4.8rem;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--rf-ink);
    box-shadow: none;
    -moz-appearance: textfield;
}

.product-single .product-qty-form .input-group:focus-within {
    border-color: var(--rf-primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   PDP sticky buy bar
   Once the buy box scrolls away the theme pins #pdp-actions to the bottom of
   the viewport. It was inheriting the in-page layout — full-width price type,
   an uncapped button label — so the bar overflowed its own edge.
   ══════════════════════════════════════════════════════════════════════════ */

.product-single .fix-bottom.product-sticky-content {
    background: #fff;
    border-top: 1px solid var(--rf-border);
    box-shadow: 0 -4px 20px rgba(13, 27, 61, .10);
}

.fix-bottom.product-sticky-content.fixed .product-form,
.product-sticky-content.sticky-content.fixed .product-form {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    max-width: 128rem;
    margin: 0 auto;
    padding: 1rem 1.6rem;
}

/* The theme clones the product title/price into the bar; keep them from
   eating the row and shrinking the controls to nothing. */

.product-sticky-content.fixed .product-title,
.fix-bottom .sticky-product-details .product-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.5rem !important;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-sticky-content.fixed .product-price,
.fix-bottom .sticky-product-details .product-price {
    flex: 0 0 auto;
}

.product-sticky-content.fixed .product-price .new-price,
.fix-bottom .sticky-product-details .new-price {
    font-size: 1.9rem !important;
}

@media (max-width: 767px) {
    .fix-bottom.product-sticky-content.fixed .product-form,
        .product-sticky-content.sticky-content.fixed .product-form {
            gap: .8rem;
            padding: .8rem 1.2rem;
        }

    .product-sticky-content.fixed .product-title,
        .fix-bottom .sticky-product-details .product-title {
            display: none;
        }
}

/* The buy row carries the theme's `container` class, which brings a max-width
   and gutters it does not need inside a column that is already 585px wide. */

.product-single .product-form.container {
    max-width: none;
    width: auto;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

/* The pinned-bar chrome belongs to the pinned state only. Unscoped, it drew a
   panel with a top border and a drop shadow around the qty box and CTA while
   they were still sitting in the page. */

.product-single .fix-bottom.product-sticky-content {
    background: transparent;
    border-top: 0;
    box-shadow: none;
    padding: 0;
}

.product-single .fix-bottom.product-sticky-content.fixed {
    background: #fff;
    border-top: 1px solid var(--rf-border);
    box-shadow: 0 -4px 20px rgba(13, 27, 61, .10);
}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT CARD ACTIONS
   A bare heart in the corner — no chip, no circle; saving just fills the
   glyph. Add-to-cart is a full-width green bar parked below the image frame
   that slides up over it on hover.
   ══════════════════════════════════════════════════════════════════════════ */
/* The frame clips the cart bar while it is parked below the image. */

.rf-card-frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--rf-radius) var(--rf-radius) 0 0;
}

/* ── Wishlist: the glyph is the whole control ──────────────────────────── */

.rf-card-fav {
    position: absolute;
    top: .9rem;
    right: 1rem;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rf-muted);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    /* Always visible: a saved product has to read as saved without hovering. */
    transition: color .18s ease, transform .18s ease;
}

.rf-card-fav i {
    /* The theme's outline heart is a hairline at this size; a hint of shadow
       keeps it legible over a light product photo. */
    filter: drop-shadow(0 1px 2px rgba(16, 24, 32, .18));
}

.rf-card-fav:hover {
    color: #e0393e;
    transform: scale(1.14);
}

.rf-card-fav:active {
    transform: scale(.94);
}

.rf-card-fav.is-added {
    color: #e0393e;
}

.rf-card-fav.is-busy {
    opacity: .5;
    cursor: progress;
}

/* ── Add to cart: slides up from under the frame ───────────────────────── */

.rf-card-add {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    height: 4.4rem;
    padding: 0 1.2rem;
    border: 0;
    background: var(--rf-primary);
    color: #fff;
    font-family: var(--rf-font);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), background .18s ease;
}

.rf-card-add i {
    font-size: 1.7rem;
    line-height: 1;
}

.rf-card-add > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.rf-card:hover .rf-card-add,
.rf-card:focus-within .rf-card-add {
    transform: translateY(0);
}

.rf-card-add:hover {
    background: var(--rf-primary-dark);
}

.rf-card-add.is-busy {
    background: var(--rf-primary-dark);
    cursor: progress;
}

.rf-card-add.is-added {
    background: var(--rf-ink);
}

/* The dots would sit behind the bar, so they step up out of its way. */

.rf-card-dots {
    bottom: 1.1rem;
    transition: bottom .3s cubic-bezier(.4, 0, .2, 1);
}

.rf-card:hover .rf-card-dots {
    bottom: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .rf-card-add,
        .rf-card-dots,
        .rf-card-fav {
            transition: background .18s ease, color .18s ease;
        }

    .rf-card:hover .rf-card-add {
            transform: translateY(0);
        }
}

/* Touch: no hover to slide the bar up, so it simply sits there. */

@media (hover: none), (pointer: coarse) {
    .rf-card-add {
            transform: translateY(0);
        }

    .rf-card-dots {
            bottom: 5.5rem;
        }
}

.rf-lcard-actions .rf-card-fav {
    position: static;
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.9rem;
}

.rf-card-fav--cart.is-added {
    color: var(--rf-primary);
}

/* The card's discount badge must stay above the image, which scales up on
   hover inside the same stacking context and was sliding over the top of it. */
.rf-card-badge {
    z-index: 5;
    width: auto;
    max-width: calc(100% - 2.2rem);
    white-space: nowrap;
    line-height: 1.2;
}

.rf-card-media .rf-card-img {
    z-index: 1;
}