/* ===================== */
/* Base                  */
/* ===================== */

/* === GLOBAL FONT === */

/* Tell Bootstrap to use Montserrat for everything */
:root {
    --bs-body-font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Apply it to the whole page */
html, body {
    font-family: var(--bs-body-font-family);
}

/* Make sure form controls etc. don’t keep some other font */
body, button, input, select, textarea,
.navbar, .dropdown-menu, .card, .form-control, .form-select {
    font-family: inherit !important;
}


html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}


/* Images + overlay */
.image-container {
    position: relative;
    overflow: hidden;
}

    .image-container img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform .3s;
    }

    .image-container:hover img {
        transform: scale(1.05);
    }

.overlay-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.45);
    color: #fff;
    padding: .5rem .75rem;
    opacity: 0;
    transition: opacity .2s;
}

.image-container:hover .overlay-text {
    opacity: 1;
}
/* Responsive */
@media (max-width: 1200px) {
    .pinterest-grid {
        column-count: 3;
    }
}

@media (max-width: 768px) {
    .pinterest-grid {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .pinterest-grid {
        column-count: 1;
    }
}

/* ===================== */
/* Language switcher     */
/* ===================== */
.language-switcher img {
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 50%;
    transition: transform .2s;
}

    .language-switcher img:hover {
        transform: scale(1.2);
    }

/* ===================== */
/* Favorites card images */
/* ===================== */
.favorites-card-img {
    height: 150px;
    width: 100%;
    object-fit: cover;
}

/* ===================== */
/* RingiRae theme layer  */
/* ===================== */
:root {
    --rg-yellow: #FFD54F;
    --rg-pink: #F07193;
    --rg-purple: #6C63FF;
    --rg-green: #18C29C;
    --rg-dark: #2C2C2C;
    --rg-muted: #777;
    --rg-bg: #fffdfa;
    --rg-radius: 18px;
}

body {
    background: var(--rg-bg);
}

/* Promo ribbon */
.rg-promo {
    background: linear-gradient(90deg,var(--rg-green),#36d4a7);
    color: #fff;
    font-weight: 600;
    letter-spacing: .2px;
    text-align: center;
    padding: .45rem .75rem;
    font-size: .95rem;
}

    .rg-promo a {
        color: #fff;
        text-decoration: underline;
    }

/* Header */
.rg-header {
    background: #fff;
    border-bottom: 1px solid #eee;
}

.rg-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
}

    .rg-brand img {
        height: 36px;
    }

.rg-nav a {
    color: #333;
    margin: 0 .6rem;
    font-weight: 500;
}

.rg-icons a {
    color: #333;
    margin-left: 1rem;
    position: relative;
    font-size: 1.2rem;
}

.rg-icons .badge {
    position: absolute;
    top: -6px;
    right: -10px;
    background: var(--rg-green);
    color: #fff;
    font-size: .65rem;
    border-radius: 999px;
    padding: .1rem .35rem;
}

/* Optional hero */
.rg-hero {
    border-radius: var(--rg-radius);
    overflow: hidden;
    position: relative;
}

    .rg-hero img {
        width: 100%;
        height: auto;
        display: block;
    }

    .rg-hero .rg-hero-text {
        position: absolute;
        left: 6%;
        bottom: 10%;
        color: #fff;
        font-weight: 800;
        font-size: clamp(28px,5vw,56px);
        text-shadow: 0 2px 8px rgba(0,0,0,.35);
    }

/* Card bar & buttons */
.rg-card-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .8rem .75rem;
    gap: .5rem;
}

.rg-add-btn {
    background: var(--rg-yellow);
    border: none;
    border-radius: 999px;
    padding: .4rem .9rem;
    font-weight: 700;
    color: #3b2e00;
}

.rg-heart {
    background: #fff;
    border: 1px solid #eee;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .rg-heart.active {
        border-color: var(--rg-pink);
        color: #fff;
        background: var(--rg-pink);
    }

/* Price block */
.rg-price {
    padding: .25rem .85rem .9rem;
}

.rg-title {
    font-weight: 700;
    margin: .4rem 0 .1rem;
}

.rg-sub {
    color: var(--rg-muted);
    font-size: .9rem;
}

.rg-amount strong {
    color: #111;
}

.rg-amount small {
    color: var(--rg-muted);
}

/* Footer */
.rg-footer {
    background: var(--rg-yellow);
    padding: 1.2rem 0;
    margin-top: 2.5rem;

}

.rg-social a {
    width: 54px;
    height: 54px;
    background: var(--rg-pink);
    color: #fff;
    display: grid;
    place-items: center;
    border-radius: 50%;
    margin: 0 .35rem;
    box-shadow: 0 6px 14px rgba(0,0,0,.12);
}


/* Account icon: black, no caret, tighter spacing */
.rg-icons a {
    color: #000 !important;
    margin-left: .6rem;
}
/* heart/bag spacing */
.rg-icons i {
    font-size: 1.35rem;
    color: #000 !important;
}
/* icon color/size */

/* kill the dropdown caret arrow next to the person icon */
.rg-icons .dropdown-toggle::after {
    display: none !important;
}

/* make the account icon a bit closer to heart/bag */
.rg-icons .account {
    margin-right: .2rem;
}
/* before the heart */

/* Center header links: black, no underline */
.rg-mainlinks a {
    color: #000 !important;
    text-decoration: none !important;
    font-weight: 600; /* optional: a bit bolder */
}

    .rg-mainlinks a:hover {
        color: #5B388D !important; /* optional hover color to match palette */
        text-decoration: none !important;
    }

/* Admin add-product icon: no background circle, just the icon */
.btn-add-product-icon {
    background: transparent !important;
    box-shadow: none !important;
    width: auto;
    height: auto;
    border-radius: 0;
    padding: 0;
}

/* Ensure header icons are black and tidy (you likely have this already) */
.rg-icons a {
    color: #000 !important;
    margin-left: .6rem;
}

.rg-icons i {
    font-size: 1.35rem;
    color: #000 !important;
}

.rg-icons .dropdown-toggle::after {
    display: none !important;
}

/* Optional: subtle hover nudge on all icons */
.rg-icons a:hover i {
    transform: translateY(-1px);
    transition: transform .08s ease;
}

/* Favorite heart overlay on product card */
.fav-btn .btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, box-shadow .2s ease;
}

.fav-btn i {
    font-size: 1.2rem;
    color: #e74c3c; /* red heart */
}

.fav-btn .btn:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 14px rgba(0,0,0,.15);
}

/* Product details: wider quantity box, don't let it shrink in the input-group */
.qty-group .qty-input {
    width: 96px; /* visible for 2+ digits */
    min-width: 96px;
    flex: 0 0 auto; /* stop flexbox from shrinking it */
    text-align: center;
}

.cart-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
}


/* ============ Layout: sticky footer ============ */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1 0 auto;
}
/* main expands */
footer {
    margin-top: auto;
}
/* footer goes to bottom */

/* ============ About page ============ */
body.page-about {
    background: #fffdfa;
}
/* optional soft backdrop */

.about-hero {
    padding: 4rem 0 2rem; /* push content down */
}

@media (min-width: 992px) {
    .about-hero {
        padding: 6rem 0 3rem;
    }
}

.about-content {
    padding-bottom: 3rem;
}

.about-card {
    border-radius: 20px;
}

.prose {
    font-size: 1.05rem;
    line-height: 1.9;
    color: #2c2c2c;
}

/* Sticky footer layout */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* full-height page */
}

.site-main {
    flex: 1 0 auto;
}
/* main grows, pushes footer down */
footer {
    margin-top: auto;
}
/* footer snaps to bottom */

/* About page polish (centered, breathing room) */
body.page-about {
    background: var(--rg-bg);
}
/* optional: matches your theme */
.about-hero {
    padding: 4rem 0 2rem;
    text-align: center;
}

@media (min-width: 992px) {
    .about-hero {
        padding: 6rem 0 3rem;
    }
}

.about-content {
    padding-bottom: 3rem;
}

.about-card {
    border-radius: 20px;
    border: 0;
}

.prose {
    font-size: 1.05rem;
    line-height: 1.9;
    color: #2c2c2c;
}

/* === Product Details background (slightly darker warm wash) === */
body.product-details {
    background: linear-gradient(180deg, #fff0b3 0%, #ffffff 60%);
}

/* Safety net in case another rule overrides it */
html body.product-details {
    background: linear-gradient(180deg, #fff0b3 0%, #ffffff 60%) !important;
}

/* Hover cards for category listing */
.product-card {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease;
}

    .product-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(0,0,0,.12);
    }

    .product-card .image-wrap {
        position: relative;
        aspect-ratio: 1 / 1; /* square; use 4/5 if you prefer taller */
        background: #f6f6f6;
    }

        .product-card .image-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

    /* Heart button (top-right) */
    .product-card .fav-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        margin: 0;
    }

    .product-card .fav-btn {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border: 0;
        box-shadow: 0 6px 14px rgba(0,0,0,.12);
    }

        .product-card .fav-btn:hover {
            color: #e74c3c;
        }

    /* Hover overlay with actions */
    .product-card .hover-ops {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: flex-end;
        padding: 12px;
        opacity: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55));
        transition: opacity .18s ease;
    }

    .product-card:hover .hover-ops {
        opacity: 1;
    }

    /* Quantity input inside overlay */
    .product-card .qty-mini {
        width: 64px;
        min-width: 64px;
    }

    /* Position as before */
    .product-card .fav-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        margin: 0;
        z-index: 2;
        /* hidden by default */
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity .18s ease, transform .18s ease;
        pointer-events: none; /* prevent accidental clicks when hidden */
    }

        /* show on hover (and keep for keyboard focus) */
        .product-card:hover .fav-badge,
        .product-card .fav-badge:focus-within {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

/* Make the whole product image act like a link to Details */
.clickable-image-area {
    cursor: pointer;
    position: relative; /* keep absolutely-positioned children (heart, overlay) aligned */
}

/* Let clicks pass THROUGH the overlay container when it's just sitting there */
.product-card .hover-ops {
    pointer-events: none;
}

    /* But allow clicks on the actual interactive stuff INSIDE the overlay */
    .product-card .hover-ops form,
    .product-card .hover-ops button,
    .product-card .hover-ops .btn,
    .product-card .fav-badge {
        pointer-events: auto;
    }


/* Ghost heart: no background, just red icon */
.fav-btn-ghost {
    background: transparent;
    border: 0;
    padding: 0;
    width: auto;
    height: auto;
    line-height: 1;
    color: #e74c3c;
    cursor: pointer;
}

    .fav-btn-ghost i {
        font-size: 1.35rem; /* adjust size if you like */
    }

    .fav-btn-ghost:hover {
        transform: translateY(-1px);
    }

    .fav-btn-ghost:focus {
        outline: none;
    }

/* ===== Product details (pd) ===== */
.pd-title {
    font-size: 1.8rem; /* was bigger; adjust as you like */
    line-height: 1.15;
    font-weight: 800;
}

.pd-desc {
    font-size: 0.9rem;
    color: #2c2c2c;
}

.pd-hero {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
}

.pd-hero-main {
    background: #f7f7f7;
    display: flex; /* center the image */
    align-items: center;
    justify-content: center;
    padding: 8px;
}

    .pd-hero-main img, .pd-hero-main video {
        width: auto; /* let aspect ratio rule */
        height: auto;
        max-width: 100%;
        max-height: 520px; /* adjust to taste */
        object-fit: contain; /* ← no cropping */
        object-position: center center;
        border-radius: 12px;
    }

.pd-thumbs {
    display: flex;
    gap: .5rem;
    padding: .75rem;
    border-top: 1px solid #eee;
    background: #fff;
    flex-wrap: wrap;
}

.pd-thumb {
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 10px;
    background-color: #f2f2f2;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

    .pd-thumb:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(0,0,0,.12);
    }

.pd-thumb-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* fill the square nicely */
    border-radius: 10px; /* same as .pd-thumb corners */
}

.pd-meta i {
    margin-right: .25rem;
}

.pd-price-bgn {
    font-size: 1.55rem;
    font-weight: 700;
    color: #0aa; 
    line-height: 1;
}

.pd-price-eur {
    color: #0aa;
    font-weight: 700;
    font-size: 1.55rem;
}

.pd-currency {
    font-weight: 700;
}

.pd-badges .badge {
    font-weight: 600;
}

.pd-buy .pd-qty .form-control {
    max-width: 120px;
}

.pd-buy .pd-add {
    padding-inline: 1.25rem;
}

.pd-buy .pd-qty .btn {
    min-width: 48px;
}

/* Product details: action bar (favorites + share) */
.pd-actionbar {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.pd-action {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.pd-action-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    background: transparent;
    padding: .25rem 0;
    color: #138a8a; /* teal-ish to match price tone */
    font-weight: 600;
    cursor: pointer;
}

    .pd-action-btn i {
        font-size: 1.1rem;
    }

    /* Hover / focus feedback */
    .pd-action-btn:hover,
    .pd-action-btn:focus {
        color: #0b6e6e;
        text-decoration: none;
    }

/* tiny success flash after copying link */
#pdShareBtn.shared {
    color: #2e7d32; /* green flash */
}


/* Favorites (eMAG-style list) */
.fav-list {
    border-radius: 12px;
    overflow: hidden;
}

.fav-item {
    padding: 1rem 1rem;
}

.fav-img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #eee;
    background: #fff;
}

.fav-title {
    font-weight: 600;
    font-size: 1.05rem;
}

.fav-prices {
    font-weight: 700;
}

/* Favorites (eMAG-style list) */
.fav-price-bgn {
    color: #0aa; /* same as .pd-price-bgn on Details */
    font-weight: 900; /* optional: match boldness */
}

.fav-price-eur {
    color: #0aa; /* same as .pd-price-eur on Details */
    font-weight: 700; /* optional */
}
/* teal for EUR */
.fav-qty {
    max-width: 76px;
}
/* small qty box */
@media (max-width: 576px) {
    .fav-img {
        width: 80px;
        height: 80px;
    }
}

/* Extra guard: also hide on hover/focus states (Chrome/Edge/Safari) */
input[type="number"].no-spinners:hover::-webkit-inner-spin-button,
input[type="number"].no-spinners:focus::-webkit-inner-spin-button,
input[type="number"].no-spinners:hover::-webkit-outer-spin-button,
input[type="number"].no-spinners:focus::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

/* Extra specificity for Bootstrap's .form-control */
.form-control.no-spinners {
    appearance: textfield !important;
    -moz-appearance: textfield !important;
    -webkit-appearance: none !important;
}

/* Brand marks in radio rows (couriers + payments) */
.brand-logo {
    height: 22px; /* pick 20–24px; same for all */
    width: auto; /* keep aspect ratio */
    object-fit: contain; /* behave nicely if width is constrained */
    vertical-align: middle; /* align with text baseline */
    margin-top: -2px; /* subtle optical alignment */
}

/* Optional: tighten those radio rows a bit */
.form-check.brand-row {
    display: flex;
    align-items: center;
    gap: .5rem; /* space between radio, logo, label */
}

/* Make the cash icon match the logos */
.cod-icon {
    font-size: 22px;
    line-height: 1;
}

/* Checkout – brand rows and icons */
.brand-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
}

.brand-logo {
    height: 22px;
    width: auto;
    object-fit: contain;
}

.cod-icon {
    font-size: 1.2rem;
}

/* Header logo sizing */
.rg-brand img {
    height: 48px; /* desktop-ish default */
    width: auto; /* keep aspect ratio */
    display: block; /* removes stray baseline gap */
}

/* Make room so it doesn’t feel cramped */
.rg-header {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Responsive: a bit smaller on narrow screens, a bit bigger on large */
@media (max-width: 576px) {
    .rg-brand img {
        height: 36px;
    }
}

@media (min-width: 1200px) {
    .rg-brand img {
        height: 56px;
    }
}

/* Homepage hero */
.hero-wrap {
    margin: 12px auto 24px;
}

.hero-img {
    display: block;
    width: 100%;
    height: clamp(180px, 28vw, 420px); /* responsive height */
    object-fit: cover; /* crops nicely */
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* Cart empty state */
.empty-cart-illus {
    max-width: 420px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.08));
}

.product-card .image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 4 / 3; /* matches 1200x900 */
    background: #f6f8ff;
}

    .product-card .image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.empty-search-illustration {
    max-width: 520px;
    width: 90%;
    height: auto;
    display: block;
    margin-inline: auto;
}


.rg-icons .rg-icon-link {
    margin-left: .5rem;
}


.rg-setting-icon {
    font-size: 1.6rem;
    color: #0d6efd;
    line-height: 1;
}

.manage-wrap h1, .manage-wrap h2, .manage-card, .manage-nav a {
    color: #111;
}

.manage-card {
    border: 1px solid rgba(0,0,0,.06);
}

.manage-nav .nav-link {
    border-radius: 14px;
    padding: .6rem .75rem;
}

    .manage-nav .nav-link.active {
        background: #111;
        color: #fff;
    }

.manage-card .form-control, .manage-card .btn {
    border-radius: 14px;
}

.rounded-xxl {
    border-radius: 22px;
}

.profile-hero {
    border-radius: 18px;
    padding: 18px;
    color: #0f2e16;
    background: linear-gradient(135deg, #baf2bb 0%, #c9f8d1 40%, #e8fff0 100%);
    border: 1px solid rgba(0,0,0,.05);
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #e6f7ea;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 28px;
    color: #0f2e16;
    position: relative;
}

    .profile-avatar .edit {
        position: absolute;
        right: -6px;
        bottom: -6px;
        background: #111;
        color: #fff;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

/* Avatar pencil badge on Manage/Profile */
.avatar-pencil {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #212529;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    transition: transform .12s ease;
    font-size: 0.9rem;
    line-height: 1;
}

label[for="photoInput"]:hover .avatar-pencil {
    transform: scale(1.05);
}

/* Two-Factor page: make primary buttons black with white text */
.manage-twofactor .btn.btn-primary {
    background-color: #212529;
    border-color: #212529;
    color: #fff;
}

    .manage-twofactor .btn.btn-primary:hover,
    .manage-twofactor .btn.btn-primary:focus {
        background-color: #0b0c0d;
        border-color: #0b0c0d;
        color: #fff;
    }

/* Account dropdown typography */
.account-menu .dropdown-menu,
.account-menu .dropdown-item,
.account-menu .dropdown-header {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.account-menu .dropdown-item {
    font-weight: 500;
    font-size: 1.05rem;
}

.account-menu .dropdown-header {
    font-weight: 600;
    font-size: 1.05rem;
}

/* site.css */
.rg-account-menu .dropdown-item {
    font-size: .75rem; 
    line-height: 1.25;
}

/* ====== Auth (login/register/etc.) ====== */
.auth-wrap {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.auth-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .auth-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.auth-card {
    border: 0;
    border-radius: 1rem; /* soft ends */
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    background: #fff;
}

    .auth-card .card-header {
        border-bottom: 0;
        padding: 1.25rem 1.25rem 0 1.25rem;
        background: transparent;
    }

.auth-title {
    font-weight: 800;
    letter-spacing: .2px;
}

.btn-dark.rounded-pill {
    padding: .6rem 1.15rem;
}

/* Make input corners soft too */
.auth-card .form-control {
    border-radius: .9rem;
}

/* Links next to dark buttons */
.auth-help {
    font-size: .95rem;
}

/* External provider buttons */
.auth-provider {
    border-radius: .9rem;
    border: 1px solid #e5e6eb;
    background: #111;
    color: #fff; /* black like the rest */
}

    .auth-provider:hover {
        background: #000;
        color: #fff;
    }

/* --- Auth pages (login/register/forgot/resend/reset) --- */
.auth-container h1,
.auth-container h2 {
    font-weight: 400; /* a bit lighter than default bold */
    margin-bottom: .75rem;
}

.auth-container h1 { /* shrink the big title */
    font-size: 2rem;
}

.auth-container h2 { /* shrink the secondary title */
    font-size: 1.25rem;
    color: #6c757d; /* muted subtitle */
}

/* Soft card look (keeps your site style) */
.auth-card {
    border: 0;
    border-radius: 1rem; /* soft corners */
    box-shadow: 0 8px 30px rgba(17,17,17,.06);
    padding: 1.25rem;
}

/* “Black theme” primary action button */
.auth-btn {
    background: #1e1f21;
    color: #fff;
    border: 0;
    border-radius: 999px; /* pill look like your Login */
    padding: .9rem 1rem;
}

    .auth-btn:hover,
    .auth-btn:focus {
        background: #18191b;
        color: #fff;
    }

/* Make helper links black */
.auth-links a {
    color: #111 !important;
    text-decoration: none;
    font-size: 0.9rem;
}

    .auth-links a:hover {
        text-decoration: underline;
    }

/* === My Orders (????? ???????) === */
.order-card {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    background: #fff;
    margin-bottom: 16px;
}

.order-header {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f3f5;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.order-title {
    font-weight: 700;
    font-size: 1.05rem;
}

.order-meta {
    color: #6c757d;
    white-space: nowrap;
}

.order-body {
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.order-left {
    flex: 1 1 auto;
    min-width: 0;
}

.order-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.order-thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid #edf0f2;
}

.order-footer {
    padding: 10px 16px;
    border-top: 1px solid #f1f3f5;
    color: #6c757d;
    font-size: .95rem;
}

.order-card--filters {
    padding: 12px 16px;
}

.filter-bar {
    display: flex;
    gap: 10px;
    align-items: center;
}

    .filter-bar .form-select, .filter-bar .form-control {
        max-width: 220px;
    }

    .filter-bar .search-wrap {
        margin-left: auto;
        max-width: 260px;
    }

.btn-outline-slim {
    border: 1px solid #dbe0e5;
    background: #fff;
}

    .btn-outline-slim:hover {
        background: #f8f9fa;
    }

@media (max-width: 576px) {
    .order-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .order-body {
        flex-direction: column;
    }

    .filter-bar {
        flex-wrap: wrap;
    }

        .filter-bar .search-wrap {
            width: 100%;
            max-width: none;
            margin-left: 0;
        }
}

.order-thumb-sm {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid #edf0f2
}

.order-thumbs {
    display: flex;
    gap: 10px
}

/* eMAG-like account sidebar */
.account-sidebar {
    position: sticky;
    top: 16px;
}

.account-card {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.avatar-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    background: #6c63ff;
    color: #fff;
}

.account-name {
    font-weight: 600;
    line-height: 1.2;
}

.account-menu .list-group-item {
    border-left: 0;
    border-right: 0;
}

    .account-menu .list-group-item:first-child {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }

    .account-menu .list-group-item:last-child {
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }

    .account-menu .list-group-item.active {
        background: #0d6efd;
        color: #fff;
        border-color: #0d6efd;
    }

.order-header-card {
    background: #e9f2f9;
    border: 1px solid #dfe8ef;
}

/* Host for Identity-like sidebar */
.identity-sidebar {
    position: sticky;
    top: 16px;
}

/* Green avatar card (eMAG-ish) */
.identity-card {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.identity-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
    /* green gradient */
    background: linear-gradient(135deg, #66c56b 0%, #3cae54 100%);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.2);
}

.identity-name {
    font-weight: 600;
    line-height: 1.2;
}

/* Make Identity's nav look neat when reused */
.nav.nav-pills.flex-column .nav-link {
    border-radius: 10px;
    margin: 4px 0;
}

    .nav.nav-pills.flex-column .nav-link.active {
        background: #0d6efd;
    }

/* Sticky sidebar */
.identity-sidebar {
    position: sticky;
    top: 16px;
}

/* Avatar card (same green as your profile page) */
.identity-card {
    border: 1px solid #e6f1e8;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.identity-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    /* green gradient to match your profile screenshot */
    background: linear-gradient(180deg, #6AC66E 0%, #49B35A 100%);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}

.identity-name {
    font-weight: 600;
    line-height: 1.2;
}

/* Manage nav look + black hover/active pill */
.manage-nav .nav-link {
    border-radius: 12px;
    margin: 4px 0;
    padding: .6rem .75rem;
    color: #111;
}

    .manage-nav .nav-link i {
        color: inherit;
    }

    .manage-nav .nav-link:hover,
    .manage-nav .nav-link:focus {
        background: #111;
        color: #fff;
    }

    .manage-nav .nav-link.active {
        background: #111;
        color: #fff; /* the solid black ‘card’ */
    }

/* Orders header card (eMAG-ish) */
.order-header-card {
    background: #e9f2f9;
    border: 1px solid #dfe8ef;
}

/* Thumbs */
.order-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #edf0f2;
}

.order-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
}

.rg-avatar-circle {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff;
    text-transform: uppercase;
    background: linear-gradient(135deg,#2e7d32 0%,#81c784 100%);
    position: relative;
    overflow: hidden;
}

    .rg-avatar-circle > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Reusable green gradient avatar – same look everywhere */
.avatar-green {
    width: 84px; /* you can make this 64px if you want it smaller in the sidebar */
    height: 84px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #2e7d32 0%, #81c784 100%); /* ? same colors */
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* If you need a smaller size in the sidebar, add a size modifier: */
.avatar-green--sm {
    width: 64px;
    height: 64px;
    font-size: 1rem;
}

/* Sidebar card tidy-up (optional) */
.account-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-name {
    font-weight: 600;
}

/* Reusable green gradient avatar */
.avatar-green {
    width: 84px;
    height: 84px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #2e7d32 0%, #81c784 100%);
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* smaller version for sidebars */
.avatar-green--sm {
    width: 64px;
    height: 64px;
    font-size: 1rem;
}

/* Unify all avatar backgrounds */
.rg-avatar-circle,
.account-sidebar .avatar-circle,
.identity-avatar,
.avatar-green,
.profile-avatar { /* add profile avatar too */
    background: linear-gradient( 135deg, var(--rg-green-main) 0%, var(--rg-green-light) 100% ) !important;
    color: #fff !important;
}

/* ===== Order tracking (eMAG-ish) ===== */
.rg-track {
    position: relative;
    padding: 34px 12px 6px;
}

/* thin grey line behind */
.rg-track-bar {
    position: relative;
    height: 8px;
    background: #e9edf2;
    border-radius: 999px;
}

/* blue fill for completed portion */
.rg-track-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 8px;
    background: #1e90ff; /* blue like eMAG */
    border-radius: 999px;
    transition: width .25s ease;
}

/* steps */
.rg-track-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 24px;
}

    .rg-track-steps li {
        text-align: center;
        color: #6b7785; /* muted label */
    }

    /* icon style */
    .rg-track-steps .step-icon {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        margin-inline: auto;
        margin-bottom: 6px;
        font-size: 1.15rem;
        background: #f1f5f9; /* light bubble */
        color: #6b7785;
        box-shadow: inset 0 0 0 2px #e5eaf0;
    }

    /* completed step == blue bubble + white icon + bold label */
    .rg-track-steps li.done .step-icon {
        background: #1e90ff;
        color: #fff;
        box-shadow: none;
    }

    .rg-track-steps .step-label {
        font-weight: 600;
        font-size: .95rem;
    }

    .rg-track-steps li.done .step-label {
        color: #1a3259; /* darker when done */
    }

/* Hide empty validation spans so they don't take space */
span.field-validation-valid {
    display: none;
}

/* Bubble style when the field has an error */
.validation-bubble span.bubble-error.field-validation-error {
    position: absolute;
    top: 100%; /* place under the input; use -8% for above */
    left: 0;
    transform: translateY(6px);
    display: inline-block;
    background: #dc3545; /* Bootstrap danger */
    color: #fff;
    padding: .4rem .6rem;
    border-radius: .5rem;
    font-size: .875rem;
    line-height: 1.2;
    box-shadow: 0 6px 18px rgba(220,53,69,.25);
    z-index: 2;
    max-width: 28rem; /* wrap instead of overflowing */
    white-space: normal;
    word-break: break-word;
}

    /* Little arrow */
    .validation-bubble span.bubble-error.field-validation-error::before {
        content: "";
        position: absolute;
        top: -6px; /* arrow above the bubble; use bottom: -6px if bubble above input */
        left: 12px;
        border-width: 6px;
        border-style: solid;
        border-color: transparent transparent #dc3545 transparent;
    }

/* Optional: make the input look invalid */
input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
    border-color: #dc3545;
}

/* If you use Bootstrap and want its feedback style too: */
input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
    /* map to Bootstrap's is-invalid look */
    background-image: none;
}




    .validation-bubble span.field-validation-error { /* same styles */
    }

    .validation-bubble span.field-validation-error::before { /* arrow */
    }



/* Anchor the bubble to each field group */
.validation-bubble {
    position: relative;
}

/* Only our bubble should show; hide any other validation spans */
span.field-validation-error:not(.bubble-error) {
    display: none !important;
}

/* Hide empty validation spans */
span.field-validation-valid {
    display: none;
}

/* Bubble */
.validation-bubble .bubble-error.field-validation-error {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(6px);
    display: inline-block; /* ensures proper box sizing */
    background: #dc3545;
    color: #fff;
    padding: .4rem .6rem;
    border-radius: .5rem;
    font-size: .875rem;
    line-height: 1.2;
    box-shadow: 0 6px 18px rgba(220,53,69,.25);
    z-index: 2;
    max-width: 28rem;
    white-space: normal;
    word-break: break-word;
}

    .validation-bubble .bubble-error.field-validation-error::before {
        content: "";
        position: absolute;
        top: -6px;
        left: 12px;
        border: 6px solid transparent;
        border-bottom-color: #dc3545;
    }

/* Red border on invalid inputs */
input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
    border-color: #dc3545;
}


/* Emerald gradient button */
.btn-emerald {
    background: linear-gradient(135deg, #34d399, #10b981); /* tailwind-ish emerald */
    color: #fff;
    border: 0;
    box-shadow: 0 4px 14px rgba(16,185,129,.2);
}

    .btn-emerald:hover {
        filter: brightness(0.97);
    }

    .btn-emerald:focus {
        outline: 2px solid rgba(16,185,129,.35);
        outline-offset: 2px;
    }



/* Iris/Violet gradient button */
.btn-iris {
    background: linear-gradient(135deg, #6366f1, #8b5cf6); /* indigo ? violet */
    color: #fff;
    border: 0;
    box-shadow: 0 4px 14px rgba(99,102,241,.25);
}

    .btn-iris:hover {
        filter: brightness(0.97);
    }

    .btn-iris:focus {
        outline: 2px solid rgba(99,102,241,.35);
        outline-offset: 2px;
    }

/* Teal gradient button */
.btn-teal {
    background: linear-gradient(135deg, #2dd4bf, #14b8a6);
    color: #0b3b38;
    border: 0;
    box-shadow: 0 4px 14px rgba(20,184,166,.22);
}

    .btn-teal:hover {
        filter: brightness(0.98);
    }

    .btn-teal:focus {
        outline: 2px solid rgba(20,184,166,.35);
        outline-offset: 2px;
    }



/* ===== Fancy palette ===== */
:root {
    --teal-500: #14b8a6;
    --teal-600: #0d9488;
    --emerald-500: #10b981;
    --emerald-600: #059669;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --emerald-700: #047857;
    --rose-500: #EF4444;
    --rose-600: #DC2626;
}

/* ===== Buttons ===== */
.btn-teal {
    color: #fff;
    background: var(--teal-500);
    border-color: var(--teal-500);
}

    .btn-teal:hover, .btn-teal:focus {
        background: var(--teal-600);
        border-color: var(--teal-600);
        color: #fff;
    }

.btn-emerald {
    color: #fff;
    background: var(--emerald-500);
    border-color: var(--emerald-500);
    box-shadow: 0 6px 18px rgba(16,185,129,.18);
}

    .btn-emerald:hover, .btn-emerald:focus {
        background: var(--emerald-600);
        border-color: var(--emerald-600);
        color: #fff;
    }

/* Primary “Add to cart” */
.btn-emerald {
    background: var(--emerald-500);
    border-color: var(--emerald-500);
    color: #fff;
    box-shadow: 0 6px 14px rgba(16,185,129,.18);
}

    .btn-emerald:hover {
        background: var(--emerald-600);
        border-color: var(--emerald-600);
    }

    .btn-emerald:active {
        background: var(--emerald-700);
        border-color: var(--emerald-700);
    }

.btn-amber {
    color: #1f2937;
    background: var(--amber-500);
    border-color: var(--amber-500);
}

    .btn-amber:hover, .btn-amber:focus {
        background: var(--amber-600);
        border-color: var(--amber-600);
        color: #111827;
    }

/* Outlines if you want them later */
.btn-outline-emerald {
    color: var(--emerald-600);
    border-color: var(--emerald-600);
    background: transparent;
}

    .btn-outline-emerald:hover {
        color: #fff;
        background: var(--emerald-600);
    }

/* “Edit product” (non-destructive, admin) */
.btn-amber-outline {
    background: transparent;
    color: var(--amber-600);
    border: 1px solid var(--amber-500);
}

    .btn-amber-outline:hover {
        background: var(--amber-500);
        color: #fff;
    }

/* Soft helpers for icons/text */
.text-teal {
    color: var(--teal-600) !important;
}

.text-emerald {
    color: var(--emerald-600) !important;
}

/* “Delete” (destructive) */
.btn-rose {
    background: var(--rose-500);
    border-color: var(--rose-500);
    color: #fff;
}

    .btn-rose:hover {
        background: var(--rose-600);
        border-color: var(--rose-600);
    }


/* Compact primary for list rows */
.btn-emerald-sm {
    --btn-bg: #10B981; /* emerald-500 */
    --btn-bg-h: #059669; /* emerald-600 */
    --btn-bg-a: #047857; /* emerald-700 */
    background: var(--btn-bg);
    border: 1px solid var(--btn-bg);
    color: #fff;
    padding: .35rem .65rem;
    line-height: 1.1;
    box-shadow: 0 4px 10px rgba(16,185,129,.15);
}

    .btn-emerald-sm:hover {
        background: var(--btn-bg-h);
        border-color: var(--btn-bg-h);
    }

    .btn-emerald-sm:active {
        background: var(--btn-bg-a);
        border-color: var(--btn-bg-a);
    }

/* Subtle qty input to match button height */
.fav-qty .form-control {
    width: 64px;
    padding: .35rem .4rem;
}

/* Optional: “Added” state */
.btn-emerald-outline-sm {
    background: transparent;
    border: 1px solid #10B981;
    color: #059669;
    padding: .35rem .65rem;
}

    .btn-emerald-outline-sm:hover {
        background: #ECFDF5;
    }
/* emerald-50 */


/* Right side action row in favorites */
.fav-actions {
    display: flex;
    align-items: center; /* vertical alignment */
    justify-content: flex-end; /* stick to the right */
    gap: 12px;
    min-width: 360px; /* keeps them from wrapping too easily */
}

/* Compact qty input, same height as buttons */
.fav-qty .form-control {
    width: 72px;
    height: 40px; /* match button height */
    padding: .45rem .5rem;
    text-align: center;
}

.fav-qty .input-group-text,
.fav-qty .btn {
    height: 40px;
}

/* Compact emerald button (from earlier) — same height */
.btn-emerald-sm {
    --btn-bg: #10B981;
    --btn-bg-h: #059669;
    --btn-bg-a: #047857;
    background: var(--btn-bg);
    border: 1px solid var(--btn-bg);
    color: #fff;
    padding: .45rem .75rem;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(16,185,129,.15);
    height: 40px; /* <- equalized */
    display: flex;
    align-items: center;
}

    .btn-emerald-sm:hover {
        background: var(--btn-bg-h);
        border-color: var(--btn-bg-h);
    }

    .btn-emerald-sm:active {
        background: var(--btn-bg-a);
        border-color: var(--btn-bg-a);
    }

/* Icon-only trash: same height, perfect square */
.btn-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Responsive: on narrow screens let them wrap nicely */
@media (max-width: 575.98px) {
    .fav-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
        min-width: 0;
    }
}


.product-disclaimer {
    margin-top: 12px; /* space below the “любими/сподели” row */
    font-size: 0.875rem; /* smaller font (≈14px) */
    color: #667085; /* muted gray */
    line-height: 1.4; /* comfy reading */
}

/* Make the big button a touch smaller without changing markup */
.pd-buy .btn.btn-lg {
    font-size: 0.8rem;
    padding: .5rem 0.8rem; /* tighter padding */
}

/* Make the +/- stepper match the new scale */
.pd-qty.input-group-lg .btn,
.pd-qty.input-group-lg input {
    font-size: 0.8rem;
    padding: .4rem .65rem;
}

/* Auth pages: make .btn-dark a pale black (charcoal) */
:root {
    /* tweak this to taste (lighter = larger hex value) */
    --auth-charcoal: #2b2b2b; /* pale black */
    --auth-charcoal-h: #242424; /* hover/focus */
    --auth-charcoal-a: #1f1f1f; /* active/pressed */
    --auth-charcoal-text: #f4f4f5; /* readable on charcoal */
}

/* Hit the exact buttons used by Identity views */
.auth-wrap .btn-dark,
.auth-card .btn-dark,
.auth-container .btn-dark,
.auth-wrap .btn.btn-dark.rounded-pill,
.auth-card .btn.btn-dark.rounded-pill,
.auth-container .btn.btn-dark.rounded-pill {
    background-color: var(--auth-charcoal) !important;
    border-color: var(--auth-charcoal) !important;
    color: var(--auth-charcoal-text) !important;
}

    .auth-wrap .btn-dark:hover,
    .auth-card .btn-dark:hover,
    .auth-container .btn-dark:hover,
    .auth-wrap .btn.btn-dark.rounded-pill:hover,
    .auth-card .btn.btn-dark.rounded-pill:hover,
    .auth-container .btn.btn-dark.rounded-pill:hover,
    .auth-wrap .btn-dark:focus,
    .auth-card .btn-dark:focus,
    .auth-container .btn-dark:focus {
        background-color: var(--auth-charcoal-h) !important;
        border-color: var(--auth-charcoal-h) !important;
    }

    .auth-wrap .btn-dark:active,
    .auth-card .btn-dark:active,
    .auth-container .btn-dark:active {
        background-color: var(--auth-charcoal-a) !important;
        border-color: var(--auth-charcoal-a) !important;
    }

/* Pale-black buttons only on Identity (auth/manage) pages
   Works with Bootstrap 5.3 variable-based buttons */
.auth-card .btn-dark,
.auth-wrap .btn-dark,
.auth-container .btn-dark,
.manage-card .btn-dark,
.manage-nav .btn-dark {
    --bs-btn-color: #f4f4f5; /* text */
    --bs-btn-bg: #2b2b2b; /* pale black (tweak lighter/darker here) */
    --bs-btn-border-color: #2b2b2b;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #242424;
    --bs-btn-hover-border-color: #242424;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #1f1f1f;
    --bs-btn-active-border-color: #1f1f1f;
    --bs-btn-focus-shadow-rgb: 33, 37, 41; /* optional: subtle focus ring */
}

/* --- Top nav: all caps, Montserrat, spaced --- */
.rg-mainlinks a, /* your custom group */
.rg-nav a, /* if you also use .rg-nav */
.navbar-nav .nav-link { /* Bootstrap fallback */
    font-family: 'Montserrat light', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .12em; /* the “tabs” look */
    font-size: .85rem;
    color: #111 !important;
    text-decoration: none !important;
}

/* spacing between items + keep centered */
.rg-mainlinks,
.rg-nav,
.navbar-nav {
    display: flex;
    gap: 2.2rem; /* adjust spacing */
    align-items: center;
    justify-content: center;
}

    /* subtle hover */
    .rg-mainlinks a:hover,
    .rg-nav a:hover,
    .navbar-nav .nav-link:hover {
        color: #5b388d !important; /* your theme accent */
    }

    /* Active page (optional underline) */
    .rg-mainlinks .active,
    .rg-nav .active,
    .navbar-nav .nav-link.active {
        position: relative;
    }

        .rg-mainlinks .active::after,
        .rg-nav .active::after,
        .navbar-nav .nav-link.active::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -6px;
            height: 2px;
            background: currentColor;
            opacity: .9;
        }

/* Tweak for small screens */
@media (max-width: 768px) {
    .rg-mainlinks a,
    .rg-nav a,
    .navbar-nav .nav-link {
        letter-spacing: .08em;
        font-size: .9rem;
    }

    .rg-mainlinks, .rg-nav, .navbar-nav {
        gap: 1.2rem;
    }
}


/* Category bar wrapper */
.category-bar {
    background: #f5eaf6;
    border: 0;
    margin-bottom: 1rem;
}

    /* Kill the old grey background & borders that were set earlier */
    .category-bar .category-ribbon {
        background: transparent !important;
        border: 0 !important;
        white-space: normal;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2rem; /* spacing between links */
        padding: .75rem 0;
        max-width: 520px; /* 🔴 SAME as .rg-mainlinks */
        margin-left: auto;
        margin-right: auto;
    }

    /* Reset the old pill look completely and match top-nav font */
    .category-bar .category-card {
        all: unset; /* nuke every previous style (including inline) */
        display: inline-block;
        cursor: pointer;
        /* match your top nav font, but lowercase & smaller */
        font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        font-weight: 300;
        text-transform: none; /* NOT uppercase */
        letter-spacing: .06em; /* a hint of spacing */
        font-size: .8rem;
        color: #111;
        line-height: 1.4;
        text-decoration: none;
    }

        .category-bar .category-card:hover {
            text-decoration: underline;
            color: #5B388D;
        }

/* Footer color tweak */
.rg-footer {
    background: #ebeff9 !important; /* soft bluish grey */
    color: #111; /* improve contrast for text */
}

    /* (optional) keep links dark in the lighter footer */
    .rg-footer a {
        color: #111;
    }


/* generic nav icons in header */
.icon-nav {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

.rg-icons .rg-icon-link,
.rg-icons .nav-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: .75rem;
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

    .rg-icons .rg-icon-link img,
    .rg-icons .nav-icon-wrapper img {
        transition: transform .12s ease;
    }

    .rg-icons .rg-icon-link:hover img,
    .rg-icons .nav-icon-wrapper:hover img {
        transform: translateY(-1px);
    }

/* keep badge positioning on cart */
.rg-cart-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    background-color: #000;
    color: #fff;
    font-size: .7rem;
    line-height: 1;
    border-radius: 999px;
    min-width: 18px;
    min-height: 18px;
    padding: 2px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* language switcher spacing still ok */
.language-switcher button img {
    width: 26px;
    height: 18px;
    object-fit: cover;
}

/* The whole right icon row */
.header-icons {
    display: flex;
    align-items: center;
    gap: 1rem; /* space between icons */
}

/* each clickable thing (search, globe, profile...) */
.nav-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    position: relative;
}

    /* force consistent size for icons */
    .nav-icon-wrapper img.icon-nav {
        width: 24px;
        height: 24px;
        object-fit: contain;
        display: block;
    }

/* Flags in dropdown */
.lang-flag-btn img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* hide Bootstrap caret on dropdown toggles */
.no-caret::after {
    display: none !important;
}

/* === product card icon buttons === */

/* remove default button chrome */
.icon-button {
    background: transparent;
    border: 0;
    padding: 0;
    line-height: 1;
    cursor: pointer;
}

/* HEART (favorites) top-right over the image */
.favorite-icon-btn {
    position: absolute;
    top: 0.5rem; /* tweak spacing */
    right: 0.5rem;
    z-index: 3;
}

.icon-heart {
    width: 28px; /* adjust to taste */
    height: 28px;
    object-fit: contain;
}

/* BAG (add to cart) bottom-right in the price block */
.cart-icon-btn {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 2;
}

.icon-bag {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Make sure the clickable-image-area still gets cursor pointer */
.clickable-image-area {
    cursor: pointer;
}

/* Stop clicks on icons from bubbling into the card click */
.stop-propagation {
    cursor: pointer;
}

    .stop-propagation button {
        cursor: pointer;
    }


.product-card {
    border-radius: 0.5rem;
    background-color: #fff;
}

    .product-card .image-wrap {
        position: relative;
    background-color: #f8f9fa;          /* soft bg behind transparent imgs */
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    /* we control the height with aspect-ratio instead of hard px */
    aspect-ratio: 4 / 3;                /* tweak if you want taller: 3/2, 1/1, etc. */
    overflow: visible;                  /* don't clip ears / petals */
    display: flex;
    align-items: center;
    justify-content: center;
    }

        /* product card main image */
        .product-card .image-wrap img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain; /* show whole object, don't crop */
            display: block;
        }
    .product-card img.w-100 {
        display: block;
        object-fit: cover;
        width: 100%;
    }

.fav-heart-form button,
.add-to-cart-mini button {
    line-height: 0;
}

.add-to-cart-mini button {
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
}


/* full-bleed hero wrapper */
.hero-full {
    width: 100vw; /* stretch across the viewport */
    margin-left: 50%;
    transform: translateX(-50%); /* center it even though parent may be a .container */
    padding-left: 1rem; /* optional horizontal padding so it's not glued to the very edge on mobile */
    padding-right: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    box-sizing: border-box;
}

    /* actual hero image frame */
    .hero-full picture,
    .hero-full .hero-img {
        display: block;
        width: 100%;
        border-radius: 12px; /* keep the nice rounded corners you already have */
        object-fit: cover;
    }

    /* if you want to enforce a max height so it doesn't get super tall on huge monitors */
    .hero-full .hero-img {
        max-height: 460px;
        width: 100%;
        height: auto;
    }

/* Lay the two prices side-by-side with controlled spacing */
.price-pair {
    display: inline-flex;
    align-items: baseline;
}

    /* Remove any inherited margins between the two <strong>s */
    .price-pair strong {
        margin: 0;
    }

/* If your stylesheet previously added a margin after the first strong, kill it */
.rg-amount strong + strong {
    margin-left: 0 !important;
}

/* Inject the slash with precise padding on both sides */
.price-pair .price-eur::before {
    content: "/";
    padding: 0 0.4rem; /* <- adjust this to widen/narrow the spaces */
}

/* The white text area of a product card */
.product-card .info-area {
    position: relative;
    padding-right: 3.25rem; /* room so the bag doesn't cover the price */
}

/* Floating bag button */
.product-card .cart-fab {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

    .product-card .cart-fab img {
        width: 22px;
        height: 22px;
    }


/* Footer social buttons */
.social-btn {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background: #ef6c8d; /* your pink */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .social-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(0,0,0,.18);
        background: #f07898;
    }

.social-icon {
    width: 22px;
    height: 22px;
    display: block;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .social-btn {
        transition: none;
    }

        .social-btn:hover {
            transform: none;
        }
}

.page-title {
    font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 300; /* bolder than before */
    letter-spacing: .01em;
    margin-top: .5rem;
    font-size: clamp(13px, 4vw, 22px); /* responsive size */
    color: #111827; /* very dark neutral */
}



/* Base look for links in the ribbon */
.category-ribbon .category-card {
    color: #212529; /* normal dark text */
    text-decoration: none; /* remove underline */
    font-weight: 500;
}

    .category-ribbon .category-card:hover {
        text-decoration: underline; /* optional on hover */
    }


/* ======= RINGIRAE – FINAL OVERRIDES (place LAST in site.css) ======= */

/* 0) Globals you can reuse */
:root {
    --rg-accent: #5b388c; /* your purple */
    --rg-text: #111111; /* pale-black text */
    --rg-text-muted: #667085;
    --rg-price: #111111; /* prices in black */
}

/* 1) Product name on Details page */
.pd-title {
    color: var(--rg-accent) !important;
}

/* 2) Prices in BLACK everywhere (Details + listings + favorites) */
.pd-price-bgn,
.pd-price-eur,
.fav-price-bgn,
.fav-price-eur,
.rg-amount strong {
    color: var(--rg-price) !important;
}

/* 3) Category bar — make current category bold, not blue/underlined */
.category-bar .category-card {
    color: var(--rg-text) !important;
    text-decoration: none !important;
    font-weight: 500;
}

    .category-bar .category-card:hover {
        color: var(--rg-accent) !important;
        text-decoration: underline !important;
    }
    /* when you render the active one with class="active" */
    .category-bar .category-card.active {
        color: var(--rg-text) !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        pointer-events: none; /* looks like text, not a link */
    }

/* 4) Top nav typography – use correct font name */
.rg-mainlinks a,
.rg-nav a,
.navbar-nav .nav-link {
    font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
    font-weight: 400 !important; /* or 300 if you prefer */
}

/* 5) “Pale black” buttons for auth/manage pages only */
.auth-container .btn-dark,
.auth-card .btn-dark,
.manage-nav .btn-dark,
.manage-card .btn-dark,
.auth-wrap .btn-dark,
.auth-container .btn.btn-dark.rounded-pill,
.auth-card .btn.btn-dark.rounded-pill,
.auth-wrap .btn.btn-dark.rounded-pill {
    background-color: #2b2b2b !important;
    border-color: #2b2b2b !important;
    color: #f4f4f5 !important;
}

    .auth-container .btn-dark:hover,
    .auth-card .btn-dark:hover,
    .manage-nav .btn-dark:hover,
    .manage-card .btn-dark:hover,
    .auth-wrap .btn-dark:hover,
    .auth-container .btn.btn-dark.rounded-pill:hover,
    .auth-card .btn.btn-dark.rounded-pill:hover,
    .auth-wrap .btn.btn-dark.rounded-pill:hover {
        background-color: #242424 !important;
        border-color: #242424 !important;
    }

/* 6) Make sure icon-only links stay black */
.rg-icons a,
.rg-icons i {
    color: #000 !important;
}


/* Product Details – action buttons use the same accent as the title */
:root {
    --rg-accent: #5b388c; /* your title color */
    --rg-accent-hover: #4b2d76; /* a touch darker on hover */
}

.pd-actionbar .pd-action-btn {
    color: var(--rg-accent) !important;
}

    .pd-actionbar .pd-action-btn:hover,
    .pd-actionbar .pd-action-btn:focus {
        color: var(--rg-accent-hover) !important;
        text-decoration: none;
    }

    /* make the icon follow the text color */
    .pd-actionbar .pd-action-btn i {
        color: currentColor;
    }


/* ========== Product Details typography unify ========== */
:root {
    --rg-accent: #5b388c; /* same pink you use for the title/menu */
    --rg-accent-hover: #4b2d76; /* slightly darker on hover */
    --rg-text-strong: #111; /* black-ish for prices/body text */
}

/* Use Montserrat everywhere inside the PD block */
.pd, .pd * {
    font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

    /* Title: keep the pink accent, slightly heavier */
    .pd .pd-title {
        color: var(--rg-accent) !important;
        font-weight: 600; /* thin look elsewhere; title needs a bit more weight */
        letter-spacing: .01em;
    }

    /* Meta + description: “thin” look */
    .pd .pd-meta,
    .pd .pd-desc {
        font-weight: 300; /* thin */
    }

    /* Prices: black text instead of teal; keep them bold-ish */
    .pd .pd-price-bgn,
    .pd .pd-price-eur,
    .pd .pd-currency {
        color: var(--rg-text-strong) !important;
        font-size: 1.25rem;
        font-weight: 600;
    }

/* Action buttons (Add to favorites / Share): pink accent like title */
.pd-actionbar .pd-action-btn {
    color: var(--rg-accent) !important;
    font-weight: 500;
}

    .pd-actionbar .pd-action-btn:hover,
    .pd-actionbar .pd-action-btn:focus {
        color: var(--rg-accent-hover) !important;
        text-decoration: none;
    }

    .pd-actionbar .pd-action-btn i {
        color: currentColor; /* make icons follow text color */
    }

/* Keep the big green Add-to-cart button, but match font */
.pd .btn {
    font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* smaller text for the two inline actions below the green button */
.pd-actionbar {
    gap: 1.25rem; /* a little tighter */
}

    .pd-actionbar .pd-action-btn {
        font-size: .92rem; /* smaller than the .btn-lg above */
        line-height: 1.25;
        font-weight: 500; /* keep it readable but not heavy */
    }

        .pd-actionbar .pd-action-btn i {
            font-size: 1rem; /* scale icons down to match text */
        }

/* on narrow screens make them a touch smaller again */
@media (max-width: 576px) {
    .pd-actionbar .pd-action-btn {
        font-size: .88rem;
    }

    .pd-actionbar {
        gap: 1rem;
    }
}



/* === FOOTER === */
.rg-footer {
    background-color: #f2f5ff;
    color: #111;
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* section titles: ПРОДУКТИ, СТРАНИЦИ, ... */
.rg-footer-title {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

/* list links under each title */
.rg-footer-list a {
    display: block;
    font-size: 0.95rem;
    font-weight: 400;
    margin-bottom: 0.30rem;
    color: #111;
    text-decoration: none;
}

    .rg-footer-list a:hover {
        color: #ff6f9c;
    }

/* contacts text – thinner than titles */
.rg-footer-contact p {
    font-size: 0.95rem;
    font-weight: 400;
    margin-bottom: 0.30rem;
}

/* === FOLLOW icons row === */
.rg-footer-follow-icons {
    display: flex;
    flex-direction: row;
    gap: 1.5rem; /* spacing between icons */
    align-items: center;
    margin-top: 0.3rem;
}

/* single square icon */
.rg-follow-icon {
    width: 48px; /* bigger box */
    height: 48px;
    border-radius: 12px;
    border: 2px solid #777;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px; /* bigger icon glyph */
    color: #333;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

    .rg-follow-icon:hover {
        background-color: #ff7aa2;
        border-color: #ff7aa2;
        color: #fff;
        text-decoration: none;
        transform: translateY(-1px);
    }

/* bottom line (copyright + privacy) */
.rg-footer-bottom {
    color: #555;
    font-size: 0.9rem;
}

.rg-footer-bottom-link {
    color: #111;
    text-decoration: none;
}

    .rg-footer-bottom-link:hover {
        color: #ff6f9c;
    }


/* --- FOLLOW US section in footer --- */

/* container for the three icons */
.rg-footer-social {
    display: flex;
    flex-direction: row; /* left → right */
    gap: 1rem; /* spacing between icons */
    align-items: center;
}

/* clickable box around each PNG icon */
.rg-footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; /* bigger */
    height: 44px;
    border-radius: 10px;
    border: 2px solid #777; /* grey outline */
    background: transparent; /* NO pink */
    padding: 0;
    text-decoration: none;
}

    /* make the PNGs a bit smaller than the box */
    .rg-footer-social-link img {
        width: 26px;
        height: 26px;
        display: block;
    }

    /* simple hover effect (optional) */
    .rg-footer-social-link:hover {
        border-color: #ff7aa2;
        background: #ff7aa2;
    }

        .rg-footer-social-link:hover img {
            filter: brightness(0) invert(1); /* make icon white on pink */
        }


/* ===== Privacy page typography & spacing ===== */
body.page-privacy .privacy-wrap {
    max-width: 900px; /* optional: nice readable width */
    margin: 2.5rem auto 3.5rem; /* top + bottom space (3.5rem above footer) */
}

    /* smaller, calmer title */
    body.page-privacy .privacy-wrap h1 {
        font-size: 1.9rem; /* was much larger */
        font-weight: 600;
        margin-bottom: 1.25rem;
    }

    /* smaller body text + nicer line-height */
    body.page-privacy .privacy-wrap p {
        font-size: 0.98rem; /* slightly smaller than default */
        line-height: 1.7;
        color: #2c2c2c;
    }

/* === Privacy page === */
body.page-privacy .privacy-wrapper {
    padding-bottom: 10rem; /* extra space above footer */
}

body.page-privacy .privacy-title {
    font-size: 1rem; /* smaller than default h1 */
    font-weight: 500;
}

body.page-privacy .privacy-text {
    font-size: 1rem; /* smaller body text */
    line-height: 1.7;
    max-width: 920px; /* nicer width for reading */
}

/* ===== Privacy page tweaks ===== */

body.page-privacy .site-main {
    padding-bottom: 6rem !important; /* big gap before footer */
}

body.page-privacy h1 {
    font-size: 2rem; /* smaller title */
    margin-bottom: 1rem;
}

body.page-privacy p {
    font-size: 0.5rem; /* smaller text */
    line-height: 0.7;
    max-width: 60rem; /* optional: narrower column */
    margin: 0 auto; /* center the text block */
}

.btn-request {
    font-size: 0.9rem;
    font-weight: 500;
    border: none !important;
}

    /* remove focus “ring” from this specific button */
    .btn-request:focus,
    .btn-request:active {
        box-shadow: none !important;
    }


/* === Fancy radio tiles (courier/payment/delivery) === */
.choice-group {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* wrapper so we can position the input */
.choice-tile-wrap {
    position: relative;
}

/* hide the native radio but keep it accessible */
.choice-input {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
}

/* the visible “card” */
.choice-tile {
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    padding: .55rem .85rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .08s ease;
}

    /* logo inside tile */
    .choice-tile img.brand-logo {
        height: 26px;
    }

/* checked state */
.choice-input:checked + .choice-tile {
    border-color: #5b388c;
    background: #f5e9ff;
    box-shadow: 0 0 0 1px rgba(91,56,140,.3);
    transform: translateY(-1px);
}

/* hover (mouse) */
.choice-tile:hover {
    border-color: #c4b3e6;
}

/* keyboard focus */
.choice-input:focus-visible + .choice-tile {
    outline: 2px solid #5b388c;
    outline-offset: 2px;
}

/* ==== COMMON RINGIRAE GREEN (promo ribbon) ==== */
:root {
    --rg-green-main: #18C29C; /* base green */
    --rg-green-light: #36D4A7; /* lighter promo green */
    --rg-green-dark: #0f8b6e; /* darker for hover on buttons, etc. */
}

/* In-stock badges (both Details & Category grids) */
.badge.bg-success {
    background-color: var(--rg-green-main) !important;
    color: #fff !important;
}

/* Main green buttons: Add to cart, Make request, small emerald buttons, etc. */
.btn-emerald,
.btn-emerald-sm,
.btn-request {
    background-color: var(--rg-green-main) !important;
    border-color: var(--rg-green-main) !important;
    color: #fff !important;
}

    /* Darker on hover/focus */
    .btn-emerald:hover,
    .btn-emerald-sm:hover,
    .btn-request:hover,
    .btn-emerald:focus,
    .btn-emerald-sm:focus,
    .btn-request:focus {
        background-color: var(--rg-green-dark) !important;
        border-color: var(--rg-green-dark) !important;
        color: #fff !important;
    }

    /* Optional: keep disabled looking the same shade but dimmed */
    .btn-emerald:disabled,
    .btn-emerald.disabled {
        background-color: var(--rg-green-main) !important;
        border-color: var(--rg-green-main) !important;
        opacity: .65;
    }

/* wrapper around heart + number */
.fav-heart-wrap {
    position: relative;
    display: inline-block;
}

/* the heart button itself */
.fav-heart-btn {
    padding: 0;
    border: 0;
    background: transparent;
}

/* white number to the LEFT of the heart */
.fav-heart-count {
    position: absolute;
    right: 100%; /* stick to the left side of the heart */
    margin-right: 4px; /* small gap between number and heart */
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    text-shadow: 0 0 3px rgba(0,0,0,0.7);
}

.header-icons {
    display: flex;
    align-items: center;
    column-gap: 2.5rem; /* adjust to taste – this is the distance between icons */
}

    /* make all icon wrappers behave the same */
    .header-icons .nav-icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0; /* override any old margins */
        padding: 0;
    }

.category-bar {
    padding-left: 0;
    padding-right: 0;
}


/* make the links row behave like the top "За нас / Контакти ..." row */
.category-ribbon {
    display: flex;
    justify-content: center;
    gap: 2.5rem; /* spacing between category names */
    padding: 0.6rem 0; /* only vertical padding, no extra left/right */
    margin: 0;
}

/* top nav links (За нас / Контакти / Стани...) */
.rg-mainlinks {
    max-width: 520px; /* tweak this until it looks right */
    margin-left: auto;
    margin-right: auto;
}


/* === TOP HEADER LAYOUT (logo | center links | icons) === */
.header-grid {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between; /* logo left, icons right */
}

/* icon row on the right */
.header-icons {
    display: flex;
    align-items: center;
    column-gap: 2.5rem;
}

/* logo stays on the left */
.rg-brand {
    justify-self: flex-start;
}

/* center block (About / Contact / Become) – absolutely centered on desktop */
@media (min-width: 992px) {
    .header-center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: auto;
    }
}

/* on mobile/tablet keep normal collapse behaviour */
@media (max-width: 991.98px) {
    .header-center {
        position: static;
        transform: none;
        width: 100%;
    }
}

/* Stronger pink category ribbon – RINGIRAE */
.category-bar {
    background: #ffe7f3; /* brighter / more pink */
    border: 0;
    margin-bottom: 1rem;
    padding: 0.7rem 0; /* a bit taller so it feels like a ribbon */
}

    /* keep the inner row centered and tidy */
    .category-bar .category-ribbon {
        display: flex;
        justify-content: center;
        gap: 2.3rem;
        padding: 0;
        margin: 0;
    }


/* only absolutely center the top nav, not the category ribbon */
@media (min-width: 992px) {
    .rg-header .header-center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: auto;
    }

    /* category ribbon uses normal centering */
    .category-bar .header-center {
        position: static;
        transform: none;
    }
}

/* Login/Register headings – smaller */
.auth-container h1 {
    font-size: 1.4rem; /* was 2rem */
}

.auth-container h2 {
    font-size: 1rem; /* was 1.25rem */
}


/* Login form fine-tuning */
.auth-card .form-label {
    font-size: 0.9rem;
}

.auth-card .form-control {
    font-size: 0.95rem;
}

.auth-card .form-check-label {
    font-size: 0.9rem;
}

.auth-btn {
    font-size: 0.95rem; /* text in the big black button */
}


/* ===== Product details: bigger Add-to-cart text ===== */
#addToCartBtn {
    font-size: 1rem !important; /* bigger text */
    padding: 0.7rem 1.6rem !important; /* a bit taller & wider */
}

.pd-thumb[data-type="video"] {
    position: relative;
}

    .pd-thumb[data-type="video"]::after {
        content: "▶";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        color: rgba(255,255,255,0.9);
        text-shadow: 0 0 6px rgba(0,0,0,0.8);
        pointer-events: none; /* clicks still go to the button */
    }

/* Footer contacts – make phone & email bigger */
.rg-footer-contact p {
    font-size: 0.9rem; /* try 1.05–1.1rem */
    font-weight: 400 !important; /* or 300 if you want thinner */
    line-height: 1.4; /* nicer spacing */
}

/* Cart summary heading size */
.cart-summary-title {
    font-size: 1rem; /* smaller than default h5 */
    font-weight: 500; /* optional – a bit lighter */
}

/* Cart summary typography */
.cart-summary-body {
    font-size: 0.9rem; /* base size for ALL text inside */
    line-height: 1.4;
}

    /* title slightly bigger but still compact */
    .cart-summary-body .cart-summary-title {
        font-size: 1rem;
        font-weight: 600;
    }

    /* keep the “Общо за плащане” row a hair stronger but same scale */
    .cart-summary-body .cart-summary-total-row {
        font-size: 0.9rem;
        font-weight: 600;
    }

    /* kill any Bootstrap fs-5 / fs-6 overrides inside this card */
    .cart-summary-body [class*="fs-"] {
        font-size: inherit !important;
    }

/* Cart table typography */
.cart-table th,
.cart-table td {
    font-size: 0.9rem; /* match your summary card text */
}

/* Optional: make header a touch stronger */
.cart-table th {
    font-weight: 600;
}

/* (optional) slightly smaller product name so it lines up nicely */
.cart-table td .fw-semibold {
    font-size: 0.9rem;
}

/* === Checkout typography === */
.checkout-form {
    font-size: 0.9rem; /* base font for the whole checkout */
}

    /* labels, inline texts, tiles, summary text */
    .checkout-form .form-label,
    .checkout-form .form-check-label,
    .checkout-form .choice-tile span,
    .checkout-form .choice-tile .fw-bold,
    .checkout-form .card .card-body,
    .checkout-form .card .card-body span {
        font-size: 0.9rem;
    }

    /* summary card title a bit larger */
    .checkout-form .card .card-title {
        font-size: 1rem;
        font-weight: 600;
    }

    /* “Общо” row – slightly bigger than 0.9rem but not huge */
    .checkout-form .checkout-total-row {
        font-size: 1.05rem;
    }


    /* === Checkout: make text a bit smaller & tidy === */

    /* everything inside the checkout form */
    .checkout-form .form-label,
    .checkout-form .form-check-label {
        font-size: 0.9rem;
    }

    .checkout-form .choice-tile span {
        font-size: 0.9rem;
    }

    .checkout-form .form-control,
    .checkout-form .form-select {
        font-size: 0.9rem;
    }

/* Right-side summary card */
.checkout-summary-body {
    font-size: 0.9rem; /* base size for all rows inside */
}

.checkout-summary-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* “Общо” row – slightly bigger and bold */
.checkout-total-row {
    font-size: 1rem;
    font-weight: 600;
}

    .checkout-total-row span:last-child {
        font-weight: 700; /* make the price a bit stronger */
    }

/* === Product cards – smaller text (0.9rem) === */

/* base font for the text block inside the card */
.product-card .px-3.py-3 {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* keep the product title a touch bigger than the rest */
.product-card .rg-title {
    font-size: 1rem; /* or 0.95rem if you want it even smaller */
    font-weight: 600;
}

/* optional: make category/description a bit lighter */
.product-card .rg-sub {
    font-size: 0.9rem;
    font-weight: 400;
}

/* prices same 0.9rem so everything aligns nicely */
.product-card .rg-amount,
.product-card .rg-amount strong,
.product-card .rg-amount small {
    font-size: 0.9rem;
}


/* === Product cards – smaller text (0.9rem) === */
.product-card-body {
    font-size: 0.9rem !important;
    line-height: 1.5;
}

    /* title slightly bigger but still compact */
    .product-card-body .rg-title {
        font-size: 1rem !important;
        font-weight: 600;
    }

    /* category/description text */
    .product-card-body .rg-sub {
        font-size: 0.9rem !important;
        font-weight: 400;
    }

    /* prices */
    .product-card-body .rg-amount,
    .product-card-body .rg-amount strong,
    .product-card-body .rg-amount small {
        font-size: 0.9rem !important;
    }

    .product-card-body .rg-title {
        font-size: 0.95rem !important; /* instead of 1rem */
    }

/* Favorites – normal weight title & prices */
.fav-title,
.fav-prices,
.fav-price-bgn,
.fav-price-eur {
    font-weight: 400 !important; /* or 300 if you want thinner */
    font-size: 0.9rem !important;
}


/* === Manage account pages – compact typography === */

/* Base font inside the right-side card */
.manage-wrap .manage-card .card-body {
    font-size: 0.9rem;
}

    /* Make headings the SAME size (0.9rem) so they don't look bigger */
    .manage-wrap .manage-card .card-body h1,
    .manage-wrap .manage-card .card-body h2,
    .manage-wrap .manage-card .card-body h3,
    .manage-wrap .manage-card .card-body h4,
    .manage-wrap .manage-card .card-body h5 {
        font-size: 0.9rem !important;
        font-weight: 500;
    }

    /* Make sure regular text/links inherit the 0.9rem */
    .manage-wrap .manage-card .card-body p,
    .manage-wrap .manage-card .card-body span,
    .manage-wrap .manage-card .card-body a,
    .manage-wrap .manage-card .card-body label,
    .manage-wrap .manage-card .card-body small {
        font-size: 0.9rem !important;
    }

/* Security settings rows – force 0.9rem */
.rg-settings {
    font-size: 0.9rem;
}

    .rg-settings .rg-setting-title {
        font-size: 0.9rem !important;
        font-weight: 500;
    }


/* === Contacts page typography === */

body.page-contact {
    font-size: 1rem; /* base font size (normal text) */
}

    /* smaller hero title on Contacts */
    body.page-contact .about-hero h1 {
        font-size: 1.5rem; /* adjust to taste */
        font-weight: 500; /* lighter than fw-bold */
    }

    /* lead line under the title */
    body.page-contact .about-hero .lead {
        font-size: 1rem;
    }

/* === About page – compact typography (0.9rem) === */

/* Smaller title */
body.page-about .about-hero h1 {
    font-size: 1.6rem; /* tweak to taste */
    font-weight: 500;
}

/* Subtitle under the title */
body.page-about .about-hero p.lead {
    font-size: 1rem;
}

/* Main text inside the white card */
body.page-about .about-card .card-body,
body.page-about .about-card .card-body p.prose {
    font-size: 1rem;
    line-height: 1.6;
}

/* === Promotions page – compact typography (0.9rem) === */
body.page-promotions .promo-title {
    font-size: 1.6rem; /* smaller H2 */
    font-weight: 500;
}

body.page-promotions .promo-empty h5 {
    font-size: 0.9rem; /* main message */
}

body.page-promotions .promo-empty .btn {
    font-size: 0.9rem; /* "Back home" button text */
    border-radius: 0px;
}

/* === Promotions page title – smaller & not bold === */
body.page-promotions .promo-title {
    font-size: 1.4rem; /* smaller than default h2 */
    font-weight: 400; /* normal weight, not bold */
    margin-bottom: 1rem;
}

/* Promo ribbon text – smaller & thinner */
.rg-promo {
    font-size: 0.9rem; /* smaller text */
    font-weight: 400; /* normal / thinner weight */
    background: linear-gradient( 90deg, var(--rg-green-main), var(--rg-green-light) );
    color: #fff;
}

    /* keep the link matching the same style */
    .rg-promo a {
        font-size: 0.9rem;
        font-weight: 400;
    }

/* Manage sidebar: smaller text */
.manage-nav .nav-link {
    font-size: 0.9rem;
    font-weight: 400;
    border-radius: 12px;
    margin: 4px 0;
    padding: .6rem .75rem;
    color: #111;
}

    /* Hover: light grey, not black bar */
    .manage-nav .nav-link:hover,
    .manage-nav .nav-link:focus {
        background: #f4f4f4;
        color: #111;
    }

    /* Active item: no black background, just bold text */
    .manage-nav .nav-link.active {
        background: transparent !important;
        color: #111 !important;
        font-weight: 600; /* make “Профил” bold when selected */
    }

/* Manage / Profile – compact typography (0.9rem, thin) */
.manage-wrap .card-body {
    font-size: 0.9rem; /* smaller text */
    line-height: 1.5; /* nice spacing */
    font-weight: 400; /* normal/thin feel */
}

    /* labels + helper text also 0.9rem and not bold */
    .manage-wrap .card-body .form-label,
    .manage-wrap .card-body .form-text {
        font-size: 0.9rem;
        font-weight: 400;
    }

/* Profile / Manage: Save button – outline by default, black on hover */
.manage-wrap .manage-save-btn {
    font-size: 0.9rem; /* keep same scale as text */
    font-weight: 500;
    border-radius: 999px;
}

    /* hover/focus → filled black (Bootstrap already does most of this,
   but we keep it here in case of other overrides) */
    .manage-wrap .manage-save-btn:hover,
    .manage-wrap .manage-save-btn:focus {
        background-color: #000 !important;
        border-color: #000 !important;
        color: #fff !important;
    }

/* Make all text in manage cards truly 0.9rem, including inputs */
.manage-wrap .card-body .form-control,
.manage-wrap .card-body .form-select,
.manage-wrap .card-body .form-check-label,
.manage-wrap .card-body .text-muted {
    font-size: 0.9rem !important;
}

/* (you already have this, but it's fine to keep) */
.manage-wrap .card-body .form-label,
.manage-wrap .card-body .form-text {
    font-size: 0.9rem;
    font-weight: 400;
}

/* Make ALL text in the Manage pages 0.9rem by default */
.manage-wrap {
    font-size: 0.9rem;
}

    /* Make common children inherit that 0.9rem (and override Bootstrap) */
    .manage-wrap p,
    .manage-wrap span,
    .manage-wrap label,
    .manage-wrap small,
    .manage-wrap a,
    .manage-wrap .form-control,
    .manage-wrap .form-select,
    .manage-wrap .form-check-label,
    .manage-wrap .btn,
    .manage-wrap .profile-hero {
        font-size: inherit !important;
    }

.rg-promo {
    font-size: 0.9rem !important;
    font-weight: 400 !important;
}

/* Manage > Addresses – title + right column typography */
.manage-wrap h3 {
    font-size: 1.6rem; /* smaller than default, but still a heading */
    font-weight: 500;
    margin-bottom: 1rem;
}

/* Right column card: 0.9rem everywhere */
.manage-wrap .card,
.manage-wrap .card-header,
.manage-wrap .card-body,
.manage-wrap .card-body label,
.manage-wrap .card-body .form-control,
.manage-wrap .card-body .form-check-label,
.manage-wrap .card-body .text-muted {
    font-size: 0.9rem;
}

/* Manage > Addresses – small, thin title */
.addresses-title {
    font-size: 0.9rem;
    font-weight: 400;
    margin-bottom: 0.75rem;
}

/* Black trash icon for delete on Addresses page */
.address-delete-btn i {
    font-size: 1.1rem;
    color: #000;
}

/* Manage > Addresses – small, thin title */
.manage-wrap .addresses-title {
    font-size: 1.15rem !important; /* a bit bigger than body (0.9rem) */
    font-weight: 500 !important; /* slightly stronger, not super bold */
    margin-bottom: 0.75rem;
}

/* Track order header buttons – a bit smaller & thinner than left title */
.order-header-actions .btn {
    font-size: 0.9rem; /* smaller than default */
    font-weight: 400; /* thinner text */
    text-transform: none; /* no accidental uppercase */
    padding: 0.4rem 0.9rem; /* a little slimmer */
    border-radius: 999px; /* optional: pill look */
}

/* Order header buttons (Track + Details) */
.order-header-actions .btn {
    font-size: 0.85rem;
    font-weight: 400;
    border-radius: 6px; /* <- no more pill / oval */
    padding: 0.45rem 0.9rem;
}

/* Use secondary grey style (in case something still uses outline-dark) */
.order-header-actions .btn-outline-dark {
    border-color: #6c757d;
    color: #6c757d;
}

    .order-header-actions .btn-outline-dark:hover,
    .order-header-actions .btn-outline-secondary:hover {
        background-color: #6c757d; /* grey on hover */
        border-color: #6c757d;
        color: #fff;
    }

/* Track / OrderDetails top title */
.order-header-card h4 {
    font-size: 1.35rem; /* default is ~1.5–1.6rem → reduce */
    font-weight: 400; /* thinner */
    letter-spacing: -0.2px; /* cleaner look */
}

.order-header-card .text-muted {
    font-size: 0.9rem;
    font-weight: 300;
}

/* Track / Order details: subline "Registered on / Total" */
.order-header-card .text-muted {
    font-size: 0.85rem; /* a bit smaller than 0.9rem */
    font-weight: 300; /* thinner */
    line-height: 1.4;
}

    /* Make the bold bits slightly lighter too (date + total) */
    .order-header-card .text-muted strong {
        font-weight: 500; /* instead of the default 700 */
    }

    /* Track / Order details: subline "Registered on / Total" */
.order-header-card .card-body .text-muted {
    font-size: 0.8rem !important;   /* smaller */
    font-weight: 300;               /* thin Montserrat */
    line-height: 1.4;
}

/* Make the bold bits only slightly stronger, not super bold */
.order-header-card .card-body .text-muted strong {
    font-weight: 400 !important;    /* lighter than default 700 */
}

/* Order tracking labels – smaller & thinner */
.rg-track-steps .step-label {
    font-size: 0.8rem !important; /* smaller */
    font-weight: 400 !important; /* thinner */
}

/* Order footer status text – smaller & thinner */
.order-footer {
    font-size: 0.8rem !important;
    font-weight: 300 !important;
}

/* Track status row under the blue timeline */
.rg-track-status {
    font-size: 0.9rem; /* smaller text */
    font-weight: 400; /* thin */
    color: #6c757d; /* optional: same grey as above */
}

    .rg-track-status strong {
        font-size: inherit; /* same size as "Статус:" */
        font-weight: 400; /* remove the “bold/big” look */
    }

/* === My Orders: header text & order number === */

/* "Номер на поръчка" – normal weight */
.order-card .order-title {
    font-weight: 400; /* not bold */
}

    /* The order number link – bold, black, not blue */
    .order-card .order-title a {
        font-weight: 600; /* bold */
        color: #111 !important; /* black, not link blue */
        text-decoration: underline; /* keep underline (optional) */
    }

        /* On hover -> grey text instead of blue/black */
        .order-card .order-title a:hover {
            color: #6c757d !important; /* grey on hover */
        }

/* === My Orders: buttons hover grey instead of black === */

.order-card .order-actions .btn-outline-dark {
    border-color: #6c757d;
    color: #6c757d;
}

    .order-card .order-actions .btn-outline-dark:hover {
        background-color: #6c757d; /* grey fill on hover */
        border-color: #6c757d;
        color: #fff;
    }

/* Order details: product links - thin, no underline */
.order-products .order-product-link {
    font-weight: 400;
    text-decoration: none;
    color: #111; /* same as link-dark */
}

    .order-products .order-product-link:hover,
    .order-products .order-product-link:focus {
        color: #5b388c; /* your accent */
        text-decoration: none; /* still no underline on hover */
    }


/* === Order details typography === */
.order-details {
    font-size: 0.9rem; /* base text size for this page */
}

    /* Header title a bit bigger but still light */
    .order-details .order-header-card h4 {
        font-size: 1.35rem;
        font-weight: 400;
    }

    /* Meta line under title (date/total) a bit smaller/thinner */
    .order-details .order-header-card .text-muted {
        font-size: 0.85rem;
        font-weight: 300;
    }

    /* Table and cards keep the 0.9rem */
    .order-details .card-body,
    .order-details table,
    .order-details th,
    .order-details td {
        font-size: inherit;
    }


/* Manage > Addresses: Make default button hover = grey, not black */
.manage-wrap .list-group-item .btn-outline-dark.btn-sm:hover,
.manage-wrap .list-group-item .btn-outline-dark.btn-sm:focus {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}


/* Manage > Addresses: green 'Основен' badge – thinner text */
.manage-wrap .badge.bg-success {
    font-weight: 400;
    font-size: 0.8rem;
}



/* Save address button: normal dark text, grey outline, grey hover */
.btn-save-address {
    color: #111111 !important; /* darker text like the rest */
    border-color: #6c757d; /* keep Bootstrap-ish grey border */
    font-weight: 400; /* same weight as other form text */
}

    .btn-save-address:hover,
    .btn-save-address:focus {
        background-color: #6c757d; /* fill grey on hover */
        border-color: #6c757d;
        color: #ffffff !important; /* white text on grey hover */
    }

/* === Security settings page (Manage / Security) === */
.rg-settings {
    font-size: 0.9rem;
}

    /* titles */
    .rg-settings h5 {
        font-size: 0.9rem;
        font-weight: 500;
        margin-bottom: .25rem;
    }

    /* description text under the title */
    .rg-settings .text-muted {
        font-size: 0.9rem;
    }

    /* buttons: outline, black text; grey on hover */
    .rg-settings .btn-outline-dark {
        font-size: 0.9rem;
        font-weight: 400;
        color: #111111;
        border-color: #111111;
    }

        .rg-settings .btn-outline-dark:hover,
        .rg-settings .btn-outline-dark:focus {
            background-color: #6c757d; /* grey fill */
            border-color: #6c757d;
            color: #ffffff;
        }


    /* Buttons size (same as your global button style) */
    .rg-settings .btn {
        font-size: 0.9rem !important;
        padding: 0.45rem 1.2rem;
    }

/* Email settings page – everything 0.9rem */
.rg-email-page,
.rg-email-page * {
    font-size: 0.9rem;
}

    /* Make sure Bootstrap's .btn-lg doesn't increase it again */
    .rg-email-page .btn-lg {
        font-size: 0.9rem !important;
        padding: 0.5rem 1.2rem;
    }

    /* Optional: nicer line height for the page text */
    .rg-email-page .form-label,
    .rg-email-page .text-danger,
    .rg-email-page .input-group-text {
        line-height: 1.35;
    }

/* Strong text color for outline buttons on Email page */
.rg-btn-strong {
    color: #212529 !important; /* same as normal body text */
    font-weight: 500; /* optional: a bit stronger */
}

    .rg-btn-strong:hover,
    .rg-btn-strong:focus {
        color: #212529 !important; /* keep it dark even on hover */
    }

/* normal state: dark text, outline, no fill */
.rg-btn-strong {
    color: #212529 !important; /* dark text */
    font-weight: 500;
}

    /* hover / focus: grey background, white text */
    .rg-btn-strong:hover,
    .rg-btn-strong:focus {
        background-color: #6c757d !important; /* same grey you use */
        border-color: #6c757d !important;
        color: #fff !important; /* WHITE text on hover */
    }

/* Reset-password card typography */
.auth-card {
    font-size: 0.9rem;
}

    .auth-card h1,
    .auth-card h2 {
        font-size: 1.2rem; /* optional: keep headings a bit larger */
    }


/* Base: outlined, dark text */
.rg-btn-strong {
    color: #212529 !important;
    font-weight: 500;
}

    /* Hover/focus: filled grey with white text */
    .rg-btn-strong:hover,
    .rg-btn-strong:focus {
        background-color: #6c757d !important;
        border-color: #6c757d !important;
        color: #fff !important;
    }


#change-password-form .btn {
    font-size: 0.9rem !important;
}

/* Change password page – make everything 0.9rem */
#change-password-form {
    font-size: 0.9rem; /* base size for the whole form */
}

    /* make all key bits inherit that size, overriding Bootstrap */
    #change-password-form .form-control,
    #change-password-form .form-label,
    #change-password-form .form-check-label,
    #change-password-form .text-danger,
    #change-password-form button {
        font-size: inherit !important;
    }

/* generic empty-state text style */
.empty-state-text {
    font-size: 0.9rem;
    line-height: 1.5;
}


/* generic “empty state” body text */
.empty-state-text {
    font-size: 0.9rem;
}

/* Empty cart title smaller than default h3 */
.empty-cart-title {
    font-size: 1.4rem; /* tweak: 1.3–1.5 as you like */
    font-weight: 600;
}

/* Empty cart button slightly smaller / lighter */
.empty-cart-btn {
    font-size: 0.9rem;
    padding: 0.35rem 1.75rem; /* less tall & wide */
    border-radius: 0px; /* keep pill look if you like */
}


/* Global input / select look: tall, sharp corners */
.form-control,
.form-select,
textarea.form-control {
    border-radius: 0; /* ⬅ sharp ends */
    padding: 0.9rem 1.25rem; /* controls height (taller) */
    line-height: 1.4;
}

.auth-card .form-control {
    border-radius: 0; /* sharp */
    padding: 0.9rem 1.25rem; /* same tall look */
    line-height: 1.4;
}

.manage-card .form-control {
    border-radius: 0;
}

/* Login / auth submit button – same height as inputs */
.auth-submit-btn {
    border-radius: 0; /* sharp corners to match inputs */
    padding: 0.9rem 1.25rem; /* same vertical padding as .form-control */
    line-height: 1.4;
    font-size: 0.95rem;
}

/* ==== Login card: flat fields (no strokes) ==== */

/* Email + password inside the login card */
.auth-card .form-control {
    border: 0 !important; /* kill the grey line */
    box-shadow: none !important; /* no glow on focus */
}

/* Big "Вход" button */
#login-submit {
    border: 0 !important; /* remove border */
    box-shadow: none !important; /* remove focus shadow */
    outline: none !important;
}


/* === Auth inputs (login + register) – tall, flat, light blue === */
.auth-card .form-control {
    border-radius: 0; /* sharp corners */
    border: 0; /* no stroke */
    padding: 0.9rem 1.25rem; /* same height as button */
    background-color: #edf3ff; /* light blue like Login */
    box-shadow: none; /* no focus glow */
}

/* === Auth primary submit button (login + register) === */
/* both pages use: class="w-100 btn-outline-secondary" inside .auth-card */
.auth-card button.w-100.btn-outline-secondary {
    border-radius: 0; /* sharp, same as inputs */
    border: 0; /* remove dark border */
    padding: 0.9rem 1.25rem; /* same height as inputs */
    box-shadow: none;
    background-color: #f1f1f1; /* same grey you use now */
}

    /* optional: a tiny hover tweak */
    .auth-card button.w-100.btn-outline-secondary:hover {
        background-color: #e4e4e4;
    }

/* Auth headings – same size on Login + Register */
.auth-container h1 {
    font-size: 1.4rem;
    font-weight: 500;
}

.auth-container h2 {
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: .75rem;
}

/* Auth: login / register buttons – keep black text */
.auth-container .btn-outline-secondary {
    background-color: #e9e9e9;
    border-color: #d0d0d0;
    color: #111 !important;
    padding: 0.9rem 1.25rem; /* same height as inputs */
}

    /* hover / focus: slightly darker bg, text stays black */
    .auth-container .btn-outline-secondary:hover,
    .auth-container .btn-outline-secondary:focus {
        background-color: #dcdcdc;
        border-color: #c0c0c0;
        color: #111 !important;
    }

/* My Orders filter bar – slimmer controls */
.order-card--filters .form-select,
.order-card--filters .form-control,
.order-card--filters .input-group-text {
    padding: 0.55rem 0.9rem; /* was 0.9rem 1.25rem globally */
    font-size: 0.9rem;
    line-height: 1.3;
}

/* keep the icon cell same height as the input */
.order-card--filters .input-group-text {
    border-radius: 0; /* same sharp corners */
}

/* Manage > Addresses – slimmer input fields (same scale as orders filters) */
.manage-wrap .card-body .form-control,
.manage-wrap .card-body .form-select,
.manage-wrap .card-body textarea.form-control {
    padding: 0.55rem 0.9rem; /* shorter & slimmer */
    font-size: 0.9rem;
    line-height: 1.3;
}

/* Make the profile card a bit more compact vertically */
.profile-card .card-body {
    padding: 1.1rem 1.4rem; /* was p-4 ≈ 2rem; adjust to taste */
}

/* Profile card – more compact */
.profile-card .profile-body {
    padding: 0.9rem 1.2rem; /* smaller than default card-body */
}

/* Less gap under avatar row */
.profile-card .avatar-row {
    margin-bottom: 0.6rem;
}

/* Slightly smaller gaps between fields */
.profile-card .profile-body .mb-2 {
    margin-bottom: 0.6rem;
}


/* Re-usable rounded button shape (same as profile/save) */
.btn-manage-rounded {
    border-radius: 2rem; /* pill-ish corners */
    padding: 0.45rem 1.6rem; /* similar height to 'Запази' */
    font-size: 0.95rem;
}

/* Availability line under product title */
.pd-availability {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.95rem;
}

/* in stock – same green as Add to Cart */
.pd-availability--ok {
    color: var(--rg-green-main); /* same as btn-emerald */
}

/* out of stock – red text only */
.pd-availability--out {
    color: #e53935; /* nice clear red */
}


.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(3px);
    justify-content: center;
    align-items: center;
    z-index: 5000;
}

.modal-box {
    background: white;
    padding: 25px 30px;
    border-radius: 14px;
    max-width: 380px;
    text-align: center;
    animation: showModal .25s ease-out;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}

@keyframes showModal {
    from {
        opacity: 0;
        transform: scale(.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-title {
    font-size: 1.3rem;
    margin-bottom: 10px;
    font-weight: 600;
    color: #d9534f; /* red tone */
}

.modal-btn {
    margin-top: 15px;
    padding: 10px 22px;
    border-radius: 8px;
    border: none;
    background: #00A37A;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.2s;
}

    .modal-btn:hover {
        background: #008f6a;
    }

/* Checkout – slimmer, square-ish fields */
.checkout-form .form-control,
.checkout-form .form-select,
.checkout-form textarea.form-control {
    border-radius: 0; /* sharp corners */
    padding: 0.55rem 0.9rem; /* reduce height */
    line-height: 1.3;
    font-size: 0.95rem;
}

    /* Nice focus state in your lilac theme */
    .checkout-form .form-control:focus,
    .checkout-form .form-select:focus,
    .checkout-form textarea.form-control:focus {
        box-shadow: none;
        border-color: #c79df2; /* adjust to your brand color if you like */
    }



/* Reduce hero section sizes */
.confirm-hero h1 {
    font-size: 1.8rem; /* default ~2.5rem → smaller */
    font-weight: 600;
}

.confirm-hero .lead {
    font-size: 1rem; /* default 1.25rem → smaller */
}

.confirm-hero .bi-check-circle-fill {
    font-size: 2.5rem !important; /* default ~3.25rem */
}

/* Reduce text in the summary card */
.card-body .fs-5 {
    font-size: 1.1rem !important; /* default 1.25rem */
}

.card-body strong {
    font-size: 1rem;
}

.card-body .text-muted {
    font-size: 0.9rem;
}


/* 1️⃣ Reduce only the "we will notify you" sentence */
.confirm-notify-text {
    font-size: 0.9rem !important;
}

/* 2️⃣ Reduce only the two buttons */
.confirm-actions .btn {
    font-size: 0.9rem !important;
    padding: 0.35rem 1rem !important;
}

/* 3️⃣ Make BGN and EUR exactly the same styling */
.order-total-main,
.order-total-eur {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #333 !important;
}


.hero-full {
    position: relative;
}

/* small overlay button in top-right of hero */
.hero-upload-form {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

.hero-upload-btn {
    border-radius: 999px;
    font-size: 0.8rem;
    padding: 0.3rem 0.75rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}


.hero-full {
    position: relative; /* so the controls are positioned over the image */
}

.hero-admin-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: flex;
    gap: 6px;
}

.hero-admin-btn {
    padding: 4px 6px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* Product details – smaller typography in variant card */
.pd-variant-card .pd-variant-header {
    font-size: 0.9rem;
}

.pd-variant-card .pd-variant-body .form-select,
.pd-variant-card .pd-variant-body small {
    font-size: 0.9rem;
}

/* Use the same pink as product-details title on all product cards */
.product-card-body .rg-title {
    color: var(--rg-accent) !important;
}

/* Product details – slimmer "Изберете опция" select */
.pd-variant-card .pd-variant-body .form-select {
    font-size: 0.9rem !important; /* make sure it’s 0.9rem */
    padding: 0.45rem 0.75rem !important; /* half the height */
    line-height: 1.3; /* tidy vertical alignment */
    height: auto; /* let padding control height */
}

/* HERO CAROUSEL */

/* Make sure only one slide is visible */
.hero-full {
    position: relative;
    overflow: hidden;
}

    .hero-full .hero-slide {
        display: none !important; /* hidden by default */
        width: 100%;
    }

        .hero-full .hero-slide.is-active {
            display: block !important; /* active slide only */
        }

/* Dots */
.hero-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.4rem;
    z-index: 5;
}

.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.4);
    padding: 0;
    cursor: pointer;
}

    .hero-dot.active {
        background: #fff;
    }


.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #333; /* darker border */
    background: rgba(0, 0, 0, 0.25); /* darker default */
    padding: 0;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, .4); /* small glow */
}

    .hero-dot.active {
        background: #fff;
        border-color: #333;
    }


/* Remove the line between pink category ribbon and the content */
.rg-header {
    border-bottom: none !important;
    box-shadow: none !important;
}

    /* in case the nav or category bar has its own border/shadow */
    .rg-header nav,
    .category-bar {
        border-top: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

/* Make hero go full width on the home page */
.home .hero-full {
    width: 100vw; /* full viewport width */
    margin-left: calc(50% - 50vw); /* pull out of .container on the left */
    margin-right: calc(50% - 50vw); /* and on the right */
    border-radius: 0; /* optional: remove rounded corners */
}

/* Prices inside product cards (home + category) */
.rg-amount.price-pair {
    padding-right: 3.2rem; /* space for the cart button */
}

/* (optional) make the EUR line a bit smaller so it fits nicer */
.price-eur {
    font-size: 0.9rem;
}

.product-card-body {
    position: relative;
}

/* === RINGIRAE: price layout – BGN line + EUR line, both bold === */
.price-pair {
    display: block !important; /* no inline flex */
}

.price-bgn,
.price-eur {
    display: block !important; /* each on its own line */
    font-weight: 700 !important; /* both bold */
}

/* kill the old slash between prices */
.price-pair .price-eur::before {
    content: none !important;
    padding: 0 !important;
}

/* About page text without the white card */
body.page-about .about-copy .prose {
    font-size: 0.9rem; /* or 1rem if you like it a bit bigger */
    line-height: 1.6;
}

/* Cart icon on product cards – no circle, just the bag */
.product-card .cart-fab {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    background: transparent; /* no white circle */
    border-radius: 0; /* no round shape */
    box-shadow: none; /* no shadow */

    width: auto; /* shrink to the image */
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
}

    .product-card .cart-fab img {
        width: 28px; /* a bit bigger if you like */
        height: 28px;
    }


/* Login page inputs – flat, no border */
.auth-container .auth-input {
    border: 0 !important; /* remove the grey border */
    box-shadow: none !important; /* no blue glow on focus */
    background-color: #edf3ff; /* same pale blue you already use */
}

    /* keep it borderless even when focused */
    .auth-container .auth-input:focus {
        outline: none;
        border: 0 !important;
        box-shadow: none !important;
    }

/* Login page: borderless email/password fields */
.auth-container .login-input {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: #edf3ff; /* keep your light blue */
}

/* Login + Register inputs: borderless, light background */
.auth-container .form-control,
.auth-container .auth-input {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: #edf3ff; /* same blue as now, change if you want */
}

    /* keep focus state clean too */
    .auth-container .form-control:focus,
    .auth-container .auth-input:focus {
        border: 0 !important;
        box-shadow: none !important;
    }


/* Register / Login main submit button – no border */
.auth-container button.w-100.btn-outline-secondary {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.category-card.active {
    font-weight: 700;
    text-decoration: underline; /* optional */
}

/* ===== Auth pages: center the whole block ===== */
.auth-container {
    max-width: 560px; /* form block width */
    margin: 2.5rem auto; /* horizontal center */
    padding: 0 1rem; /* safe on mobile */
}

    /* Center headings */
    .auth-container h1,
    .auth-container h2 {
        text-align: center;
    }

/* Optional: vertically center (uncomment if you want it centered in height too) */

.auth-container{
    min-height: calc(100vh - 220px);  
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.auth-container {
    max-width: 520px; /* try 520–640px */
    margin: 0 auto;
    padding: 2rem 1rem;
}

.auth-container {
    max-width: 1100px; /* or 1200px */
    margin: 0 auto;
    padding: 2rem 1rem;
    text-align: center; /* keeps your headings centered */
}

    .auth-container form {
        text-align: left; /* keeps inputs/validation aligned nicely */
    }

    .auth-container h1,
    .auth-container h2 {
        text-align: center;
    }

.pd-hero video {
    aspect-ratio: 9 / 16;
    object-fit: contain;
    background: #000;
}

.product-card .cart-fab {
    z-index: 5;
}

/* Make the floating bag always above the card content */
.product-card .cart-fab {
    z-index: 5;
    pointer-events: auto;
}

/* Optional but recommended: reserve space so the bag doesn't overlap prices */
.product-card-body {
    padding-right: 3.25rem;
}

/* Make the bag actually feel clickable */
.product-card .cart-fab {
    cursor: pointer;
    z-index: 5;
}

    /* Ensure the click goes to the button (not “caught” by the img element) */
    .product-card .cart-fab img {
        pointer-events: none;
        display: block;
    }


.cart-fab {
    position: relative;
    z-index: 20;
    pointer-events: auto;
    cursor: pointer;
}

.product-card a,
.product-card img {
    pointer-events: auto;
}

.image-wrap::after {
    pointer-events: none;
}


.pd-thumb {
    border: 0;
    background: transparent;
    padding: 0;
}

.pd-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* HERO media (image + video) */
.pd-hero-main img,
.pd-hero-main video {
    border-radius: 18px; /* adjust to taste */
    overflow: hidden;
    display: block;
}

/* Thumbnail container */
.pd-thumb {
    border-radius: 12px;
    overflow: hidden;
}

    /* Thumbnail videos */
    .pd-thumb video {
        border-radius: 12px;
        display: block;
    }



/* Category ribbon container */
.category-ribbon {
    display: flex;
    flex-wrap: wrap; /* ✅ allows next row */
    justify-content: flex-start;
    gap: 12px;
}


.category-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 20px;
    text-align: center;
    white-space: normal; /* ✅ allow wrapping */
    word-break: break-word; /* ✅ break long words */

    max-width: 140px; /* desktop safe */
}


@media (max-width: 576px) {
    .category-ribbon {
        justify-content: center; /* ✅ mobile only */
    }

}