@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --rn-pink: #ff1a5e;
    --rn-pink-dark: #d90f4c;
    --rn-black: #0d0d0f;
    --rn-grey: #f4f4f4;
    --rn-border: #dedede;
    --bs-link-color-rgb: 17, 17, 17;
    --bs-link-hover-color-rgb: 255, 26, 94;
}

html, body { height: 100%; }
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: Inter, sans-serif;
    color: #111;
    background: #fff;
}
main { flex: 1 0 auto; }
footer { flex-shrink: 0; }

.display-font, h1, h2, h3, h4, h5, .navbar-brand {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
}
.text-pink { color: var(--rn-pink) !important; }

/* Announcement + navigation */
.announcement { background: var(--rn-pink); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
.navbar { background: var(--rn-black); }
.navbar .nav-link { color: #fff !important; font-size: .86rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--rn-pink) !important; }
.navbar .nav-icons > a, .navbar .nav-icons > button, .navbar .nav-icons > .dropdown > button { color: #fff; font-size: 1.25rem; background: none; border: 0; padding: 0; position: relative; text-decoration: none; }
.navbar .nav-icons > a:hover, .navbar .nav-icons > button:hover, .navbar .nav-icons > .dropdown > button:hover { color: var(--rn-pink); }
.logo { width: 120px; height: auto; }
.cart-count-badge, .wish-count-badge { background: var(--rn-pink) !important; color: #fff; }
.nav-search { max-width: 260px; }
.nav-search .form-control { border-radius: 0; font-size: .85rem; }

/* Buttons */
.btn-ap, .btn-primary {
    --bs-btn-bg: var(--rn-pink); --bs-btn-border-color: var(--rn-pink); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--rn-pink-dark); --bs-btn-hover-border-color: var(--rn-pink-dark); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--rn-pink-dark); --bs-btn-active-border-color: var(--rn-pink-dark); --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--rn-pink); --bs-btn-disabled-border-color: var(--rn-pink);
    border-radius: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}
.btn { border-radius: 0; }
.btn-outline-primary { --bs-btn-color: var(--rn-pink); --bs-btn-border-color: var(--rn-pink); --bs-btn-hover-bg: var(--rn-pink); --bs-btn-hover-border-color: var(--rn-pink); --bs-btn-active-bg: var(--rn-pink); --bs-btn-active-border-color: var(--rn-pink); }
.form-control, .form-select, .card, .alert { border-radius: 0; }
.form-control:focus, .form-select:focus { border-color: var(--rn-pink); box-shadow: 0 0 0 .2rem rgba(255, 26, 94, .2); }
.form-check-input:checked { background-color: var(--rn-pink); border-color: var(--rn-pink); }
.page-link { color: #111; border-radius: 0; }
.page-item.active .page-link { background: var(--rn-pink); border-color: var(--rn-pink); }
.breadcrumb a { color: #666; text-decoration: none; }

/* Hero & banners */
.hero { background: #000 center/cover no-repeat; color: #fff; }
.hero img { width: 100%; height: auto; display: block; }
.section-title { font-size: 2.5rem; }
.banner-link img { width: 100%; height: auto; display: block; transition: transform .25s; }
.banner-link { display: block; overflow: hidden; }
.banner-link:hover img { transform: scale(1.02); }
.usp-bar img { max-width: 100%; height: auto; }

/* Genre cards */
.genre-card { display: block; overflow: hidden; background: #111; }
.genre-card img { width: 100%; height: auto; display: block; transition: transform .25s; }
.genre-card:hover img { transform: scale(1.04); }

/* Product cards */
.product-card { border: 0; }
.product-image { background: var(--rn-grey); position: relative; aspect-ratio: 1/1.1; overflow: hidden; }
.product-image img { width: 100%; height: 100%; object-fit: contain; transition: .25s; }
.product-card:hover .product-image img { transform: scale(1.025); }
.badge-ap { position: absolute; left: .75rem; top: .75rem; background: var(--rn-pink); color: #fff; border-radius: 0; }
.badge-sale { position: absolute; left: .75rem; top: .75rem; background: #111; color: #fff; border-radius: 0; }
.badge-ap + .badge-sale { top: 2.2rem; }
.wish { position: absolute; right: .8rem; top: .65rem; border: 0; background: transparent; font-size: 1.2rem; z-index: 2; color: #111; }
.wish.active, .wish:hover { color: var(--rn-pink); }
.product-brand { font-size: .75rem; color: #666; margin-top: .8rem; }
.product-title { font-weight: 600; margin-bottom: .15rem; }
.price { font-weight: 700; }
.price .was { color: #888; font-weight: 400; text-decoration: line-through; margin-left: .35rem; }
.price .now-sale { color: var(--rn-pink); }
.size-chip { border: 1px solid #bbb; font-size: .65rem; padding: .18rem .4rem; margin-right: .2rem; display: inline-block; }

/* Feature panels */
.feature-panel { min-height: 290px; background: #111; color: #fff; padding: 2.2rem; display: flex; align-items: end; }
.feature-panel.pink { background: var(--rn-pink); }
.feature-panel h3 { font-size: 3.2rem; line-height: .9; }

/* Footer */
.footer { background: var(--rn-black); color: #aaa; }
.footer h5 { color: #fff; }
.footer a { color: #aaa; text-decoration: none; }
.footer a:hover { color: #fff; }

/* Shop */
.shop-banner { background: #111 center/cover no-repeat; color: #fff; padding: 3.5rem 0; }
.filter-title { font-size: 1.25rem; }
.filter-group { border-bottom: 1px solid #ddd; padding-bottom: 1rem; margin-bottom: 1rem; }
.product-detail-image { background: var(--rn-grey); }
.size-btn { min-width: 48px; }
.accordion-button:not(.collapsed) { background: var(--rn-grey); color: #111; }
.accordion-item { border-radius: 0 !important; }

/* Artists A-Z */
.artist-letter { font: 800 2rem 'Barlow Condensed'; color: var(--rn-pink); }
.alphabet a { display: inline-flex; width: 31px; height: 31px; align-items: center; justify-content: center; border: 1px solid #ddd; color: #111; text-decoration: none; margin: 2px; font-size: .8rem; }
.alphabet a:hover, .alphabet a.active { background: var(--rn-pink); border-color: var(--rn-pink); color: #fff; }
.alphabet a.disabled { color: #bbb; pointer-events: none; }