/* ElShiva - Premium CSS Styling */
/* Import additional Google Fonts for luxury feel */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Dancing+Script:wght@400;500;600;700&display=swap');
/* CSS Custom Properties for Royal Theme */
:root {
/* Royal Color Palette */
--royal-gold: #D4AF37;
--royal-gold-light: #F4E5AB;
--royal-gold-dark: #B8941F;
--royal-black: #1A1A1A;
--royal-charcoal: #2C2C2C;
--royal-off-white: #FAF9F6;
--royal-cream: #F5F5DC;
--royal-silver: #C0C0C0;
/* Accent Colors */
--royal-deep-red: #8B0000;
--royal-navy: #191970;
--royal-emerald: #50C878;
--royal-purple: #663399;
--royal-purple-light: #9966CC;
--royal-purple-dark: #4B0082;
/* Typography */
--font-primary: 'Playfair Display', serif;
--font-secondary: 'Montserrat', sans-serif;
--font-accent: 'Cinzel', serif;
--font-script: 'Dancing Script', cursive;
/* Shadows and Effects */
--royal-shadow: 0 8px 32px rgba(212, 175, 55, 0.15);
--royal-shadow-heavy: 0 16px 64px rgba(0, 0, 0, 0.2);
--royal-glow: 0 0 20px rgba(212, 175, 55, 0.3);
/* Gradients */
--royal-gradient: linear-gradient(135deg, var(--royal-gold) 0%, var(--royal-gold-dark) 100%);
--royal-gradient-reverse: linear-gradient(135deg, var(--royal-gold-dark) 0%, var(--royal-gold) 100%);
--royal-purple-gradient: linear-gradient(135deg, var(--royal-purple) 0%, var(--royal-purple-dark) 100%);
--royal-gold-purple-gradient: linear-gradient(135deg, var(--royal-gold) 0%, var(--royal-purple) 100%);
--royal-bg-gradient: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
--royal-dark-gradient: linear-gradient(135deg, var(--royal-black) 0%, var(--royal-charcoal) 100%);
--royal-pink-white-gradient: linear-gradient(135deg, #fffdf0 0%, #FFFFFF 100%);
--royal-gold-pink-gradient: linear-gradient(135deg, #D4AF37 0%, #FFB6C1 100%);
}
/* Global Styles */
* {
box-sizing: border-box;
}
/* Royal Cards */
.royal-card {
background: var(--royal-off-white);
border: 1px solid rgba(212, 175, 55, 0.2);
border-radius: 12px;
box-shadow: var(--royal-shadow);
transition: all 0.3s ease;
overflow: hidden;
}
.royal-card:hover {
box-shadow: var(--royal-shadow-heavy);
transform: translateY(-2px);
}
.royal-card-header {
background: var(--royal-gradient);
color: var(--royal-off-white);
padding: 1rem 1.25rem;
border-bottom: 2px solid var(--royal-gold-dark);
}
.royal-card-header h5,
.royal-card-header h6 {
color: var(--royal-off-white);
font-family: var(--font-accent);
font-weight: 600;
margin: 0;
}
.royal-card-body {
padding: 1.25rem;
background: var(--royal-off-white);
}
/* Bulk Pricing Card */
.royal-bulk-pricing-card {
background: linear-gradient(135deg, var(--royal-cream) 0%, var(--royal-off-white) 100%);
border: 2px solid var(--royal-gold-light);
border-radius: 8px;
padding: 1rem;
margin-top: 0.5rem;
}
.royal-bulk-pricing-card h6 {
color: var(--royal-purple);
font-family: var(--font-accent);
}
/* Product Description Styling */
.royal-product-description {
background: var(--royal-off-white);
padding: 2rem;
border-radius: 12px;
box-shadow: var(--royal-shadow);
margin-top: 2rem;
}
.royal-description-content {
font-size: 1.1rem;
line-height: 1.8;
color: var(--royal-charcoal);
text-align: justify;
font-family: var(--font-secondary);
}
body {
font-family: var(--font-secondary);
background: var(--royal-bg-gradient);
color: var(--royal-charcoal);
line-height: 1.6;
overflow-x: hidden;
}
/* Trusted B2B/B2C Section */
.royal-trusted-section {
background: var(--royal-purple-gradient);
padding: 2rem 0;
margin-bottom: 0;
}
.royal-trusted-banner {
color: var(--royal-off-white);
}
.royal-trusted-title {
font-family: var(--font-accent);
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--royal-off-white);
}
.royal-trusted-subtitle {
font-size: 1rem;
margin-bottom: 1rem;
color: var(--royal-gold-light);
}
.royal-trusted-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.royal-trust-badge {
background: rgba(255, 255, 255, 0.15);
color: var(--royal-off-white);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
@media (max-width: 768px) {
.royal-trusted-badges {
flex-direction: column;
align-items: center;
}
.royal-trusted-title {
font-size: 1.2rem;
}
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-primary);
font-weight: 600;
color: var(--royal-black);
}
.royal-script {
font-family: var(--font-script);
}
.royal-accent {
font-family: var(--font-accent);
}
/* Navigation Styles */
.royal-navbar {
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(250, 247, 242, 0.95) 100%) !important;
backdrop-filter: blur(15px);
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
padding: 0.6rem 0;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
position: relative;
}
.royal-navbar::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--royal-gold) 20%,
var(--royal-gold) 80%,
transparent 100%);
opacity: 0.6;
}
.royal-navbar.scrolled {
padding: 0.4rem 0;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
background: linear-gradient(180deg,
rgba(255, 255, 255, 1) 0%,
rgba(250, 247, 242, 1) 100%) !important;
}
.royal-logo {
font-family: var(--font-accent);
font-size: 1.8rem;
font-weight: 700;
color: var(--royal-gold) !important;
text-decoration: none;
transition: all 0.3s ease;
display: flex;
align-items: center;
}
.royal-logo-img {
height: 60px;
width: auto;
margin-right: 0.5rem;
object-fit: contain;
}
.royal-logo:hover {
color: var(--royal-gold-light) !important;
text-shadow: var(--royal-glow);
}
.royal-navbar .nav-link {
color: var(--royal-charcoal) !important;
font-weight: 500;
padding: 0.75rem 1rem !important;
position: relative;
transition: all 0.3s ease;
}
.royal-navbar .nav-link::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--royal-gradient);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.royal-navbar .nav-link:hover::before,
.royal-navbar .nav-link.active::before {
width: 80%;
}
.royal-navbar .nav-link:hover {
color: var(--royal-gold) !important;
}
/* Navbar Toggler - Make it visible on mobile */
.navbar-toggler {
border: 2px solid var(--royal-gold) !important;
padding: 0.5rem 0.75rem;
}
.navbar-toggler:focus {
box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.5);
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(212, 175, 55, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
width: 1.5em;
height: 1.5em;
}
.royal-dropdown {
background: var(--royal-dark-gradient);
border: 1px solid var(--royal-gold);
border-radius: 8px;
box-shadow: var(--royal-shadow);
}
.royal-dropdown .dropdown-item {
color: var(--royal-off-white);
transition: all 0.3s ease;
}
.royal-dropdown .dropdown-item:hover {
background: var(--royal-gradient);
color: var(--royal-black);
}
.cart-badge {
font-size: 1rem;
top: -0.1px !important;
color: black;
background-color: rgb(230 201 39) !important;
}
/* Button Styles */
.royal-btn-primary {
background: var(--royal-gradient);
border: none;
color: var(--royal-black);
font-weight: 600;
padding: 0.75rem 2rem;
border-radius: 50px;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
overflow: hidden;
}
.royal-btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
}
.royal-btn-primary:hover::before {
left: 100%;
}
.royal-btn-primary:hover {
background: var(--royal-gradient-reverse);
transform: translateY(-2px);
box-shadow: var(--royal-shadow);
color: var(--royal-black);
}
.royal-btn-outline {
border: 2px solid var(--royal-gold);
color: var(--royal-gold);
background: transparent;
font-weight: 600;
padding: 0.75rem 2rem;
border-radius: 50px;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}
.royal-btn-outline:hover {
background: var(--royal-gradient);
color: var(--royal-black);
border-color: var(--royal-gold);
transform: translateY(-2px);
box-shadow: var(--royal-shadow);
}
.royal-btn-secondary {
background: var(--royal-charcoal);
border: none;
color: var(--royal-off-white);
font-weight: 600;
padding: 0.75rem 2rem;
border-radius: 50px;
transition: all 0.3s ease;
}
.royal-btn-secondary:hover {
background: var(--royal-black);
color: var(--royal-off-white);
transform: translateY(-2px);
}
.royal-btn-danger {
background: linear-gradient(135deg, var(--royal-deep-red), #A52A2A);
border: none;
color: var(--royal-off-white);
font-weight: 600;
padding: 0.75rem 2rem;
border-radius: 50px;
transition: all 0.3s ease;
}
.royal-btn-danger:hover {
background: linear-gradient(135deg, #A52A2A, var(--royal-deep-red));
color: var(--royal-off-white);
transform: translateY(-2px);
}
.royal-btn-warning {
background: linear-gradient(135deg, #FF8C00, #FFA500);
border: none;
color: var(--royal-black);
font-weight: 600;
padding: 0.75rem 2rem;
border-radius: 50px;
transition: all 0.3s ease;
}
.royal-btn-lg {
padding: 1rem 3rem;
font-size: 1.1rem;
}
/* Hero Section */
.royal-hero-slider {
position: relative;
height: 80vh;
overflow: hidden;
}
.royal-hero-default {
height: 80vh;
background: linear-gradient(135deg, rgba(26, 26, 26, 0.8), rgba(44, 44, 44, 0.6)),
url('data:image/svg+xml,');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.royal-slide-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(26, 26, 26, 0.7), rgba(44, 44, 44, 0.5));
z-index: 1;
}
.royal-slide-img {
height: 80vh;
object-fit: cover;
}
.royal-slide-content {
position: relative;
z-index: 2;
text-align: center;
color: var(--royal-off-white);
}
.royal-slide-title {
font-family: var(--font-accent);
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
background: var(--royal-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.royal-slide-description {
font-size: 1.3rem;
margin-bottom: 2rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.royal-hero-title {
font-family: var(--font-accent);
font-size: 4rem;
font-weight: 700;
margin-bottom: 1rem;
background: var(--royal-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.royal-hero-subtitle {
font-size: 1.3rem;
margin-bottom: 2rem;
color: var(--royal-off-white);
}
.royal-carousel-control {
background: rgba(212, 175, 55, 0.3);
border: 2px solid var(--royal-gold);
border-radius: 50%;
width: 60px;
height: 60px;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s ease;
}
.royal-carousel-control:hover {
background: var(--royal-gradient);
color: var(--royal-black);
}
/* Sections */
.royal-section {
padding: 5rem 0;
position: relative;
}
.royal-section-alt {
background: rgba(212, 175, 55, 0.05);
}
.royal-section-title {
font-family: var(--font-accent);
font-size: 2.5rem;
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
color: var(--royal-black);
position: relative;
display: block;
}
.royal-section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: var(--royal-gradient);
border-radius: 2px;
}
.royal-section-subtitle {
text-align: center;
font-size: 1.1rem;
color: var(--royal-charcoal);
margin-bottom: 3rem;
}
/* Page Titles */
.royal-page-title {
font-family: var(--font-accent);
font-size: 2.5rem;
color: var(--royal-black);
margin-bottom: 1rem;
position: relative;
}
.royal-page-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100px;
height: 3px;
background: var(--royal-gradient);
border-radius: 2px;
}
/* Category Cards */
.royal-category-card {
background: var(--royal-off-white);
border-radius: 15px;
overflow: hidden;
box-shadow: var(--royal-shadow);
transition: all 0.3s ease;
position: relative;
height: 100%;
}
.royal-category-card:hover {
transform: translateY(-10px);
box-shadow: var(--royal-shadow-heavy);
}
.royal-category-image {
position: relative;
height: 250px;
overflow: hidden;
}
.royal-category-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.royal-category-card:hover .royal-category-image img {
transform: scale(1.1);
}
.royal-category-placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background: var(--royal-gradient);
color: var(--royal-black);
font-size: 3rem;
}
.royal-category-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(26, 26, 26, 0.8);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.royal-category-card:hover .royal-category-overlay {
opacity: 1;
}
.royal-category-content {
padding: 1.5rem;
text-align: center;
}
.royal-category-title {
font-family: var(--font-accent);
font-size: 1.3rem;
color: var(--royal-black);
margin-bottom: 0.5rem;
}
.royal-category-description {
color: var(--royal-charcoal);
font-size: 0.9rem;
}
/* Product Cards */
.royal-product-card {
background: var(--royal-off-white);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--royal-shadow);
transition: all 0.3s ease;
position: relative;
height: 100%;
border: 2px solid transparent;
}
.royal-product-card:hover {
transform: translateY(-5px);
box-shadow: var(--royal-shadow-heavy);
border-color: var(--royal-purple);
}
.royal-product-card-large {
min-height: 350px;
}
.royal-discount-badge {
position: absolute;
top: 10px;
right: 10px;
background: var(--royal-purple-gradient);
color: var(--royal-off-white);
padding: 4px 8px;
border-radius: 15px;
font-size: 0.75rem;
font-weight: 600;
z-index: 3;
}
.royal-bulk-badge {
position: absolute;
top: 15px;
left: 15px;
background: var(--royal-emerald);
color: var(--royal-off-white);
padding: 5px 10px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
z-index: 3;
}
.royal-product-image,
.royal-product-image-large {
position: relative;
height: 200px;
overflow: hidden;
}
.royal-product-image-large {
height: 350px;
}
.royal-product-image img,
.royal-product-image-large img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.royal-product-card:hover .royal-product-image img,
.royal-product-card:hover .royal-product-image-large img {
transform: scale(1.05);
}
.royal-product-placeholder,
.royal-product-placeholder-large {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
background: var(--royal-cream);
color: var(--royal-gold);
font-size: 2rem;
}
.royal-product-overlay,
.royal-product-overlay-large {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(26, 26, 26, 0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.royal-product-card:hover .royal-product-overlay,
.royal-product-card:hover .royal-product-overlay-large {
opacity: 1;
}
.royal-product-actions {
display: flex;
gap: 10px;
margin-bottom: 1rem;
}
.royal-product-quick-info {
text-align: center;
}
.royal-quick-info-item {
display: block;
color: var(--royal-gold);
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.royal-product-content,
.royal-product-content-large {
padding: 1rem;
}
.royal-product-title,
.royal-product-title-large {
font-family: var(--font-primary);
font-size: 1.1rem;
color: var(--royal-black);
margin-bottom: 0.5rem;
line-height: 1.3;
}
.royal-product-title-large {
font-size: 1.2rem;
}
.royal-product-price,
.royal-product-price-large {
margin-bottom: 1rem;
}
.royal-price-original {
text-decoration: line-through;
color: var(--royal-charcoal);
font-size: 0.9rem;
margin-right: 0.5rem;
}
.royal-price-discounted,
.royal-price-current {
background: var(--royal-gold-purple-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 600;
font-size: 1.1rem;
}
.royal-product-material {
font-size: 0.9rem;
color: var(--royal-charcoal);
margin-bottom: 0.5rem;
}
.royal-product-badges {
margin-top: 0.5rem;
}
/* Product Detail Page */
.royal-breadcrumb {
margin-bottom: 2rem;
}
.royal-breadcrumb .breadcrumb {
background: transparent;
padding: 0;
}
.royal-breadcrumb .breadcrumb-item a {
color: var(--royal-gold);
text-decoration: none;
}
.royal-breadcrumb .breadcrumb-item.active {
color: var(--royal-charcoal);
}
.royal-product-gallery {
margin-bottom: 2rem;
}
.royal-main-product-image {
width: 100%;
border-radius: 15px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.royal-main-product-image:hover {
transform: scale(1.02);
}
.royal-image-zoom-overlay {
position: absolute;
top: 10px;
right: 10px;
background: rgba(26, 26, 26, 0.8);
color: var(--royal-gold);
padding: 5px 10px;
border-radius: 20px;
font-size: 0.8rem;
opacity: 0;
transition: opacity 0.3s ease;
}
.royal-main-product-image:hover + .royal-image-zoom-overlay,
.royal-image-zoom-overlay:hover {
opacity: 1;
}
.royal-thumbnail-gallery {
margin-top: 1rem;
}
.royal-thumbnail {
width: 100%;
height: 100px;
object-fit: cover;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.royal-thumbnail:hover,
.royal-thumbnail.active {
border-color: var(--royal-gold);
transform: scale(1.05);
}
.royal-product-placeholder-detail {
height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--royal-cream);
border-radius: 15px;
color: var(--royal-gold);
font-size: 3rem;
}
.royal-product-videos {
margin-top: 2rem;
}
.royal-video-container {
position: relative;
}
.royal-product-video {
width: 100%;
border-radius: 8px;
}
.royal-video-title {
margin-top: 0.5rem;
font-size: 0.9rem;
color: var(--royal-charcoal);
}
/* Product Details Sidebar */
.royal-product-details {
padding: 2rem;
background: var(--royal-off-white);
border-radius: 15px;
box-shadow: var(--royal-shadow);
height: fit-content;
position: sticky;
top: 100px;
}
.royal-product-detail-title {
font-family: var(--font-accent);
font-size: 2rem;
color: var(--royal-black);
margin-bottom: 1rem;
}
.royal-product-price-detail {
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--royal-gold);
}
.royal-discount-info {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.5rem;
}
.royal-price-original-large {
text-decoration: line-through;
color: var(--royal-charcoal);
font-size: 1.1rem;
}
.royal-discount-percentage {
background: var(--royal-deep-red);
color: var(--royal-off-white);
padding: 2px 8px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 600;
}
.royal-price-current-large {
font-size: 2rem;
font-weight: 700;
color: var(--royal-gold);
}
.royal-discount-timer {
margin-top: 0.5rem;
}
.royal-product-badges-detail {
margin-bottom: 1.5rem;
}
.royal-badge-special {
background: var(--royal-gradient);
color: var(--royal-black);
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
.royal-badge-bulk {
background: var(--royal-emerald);
color: var(--royal-off-white);
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
.royal-specifications {
margin-bottom: 2rem;
}
.royal-detail-subtitle {
font-family: var(--font-accent);
font-size: 1.2rem;
color: var(--royal-black);
margin-bottom: 1rem;
position: relative;
}
.royal-detail-subtitle::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 50px;
height: 2px;
background: var(--royal-gradient);
}
.royal-specs-table {
background: transparent;
border: none;
}
.royal-specs-table td {
border: none;
padding: 0.5rem 0;
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.royal-specs-table td:first-child {
font-weight: 600;
color: var(--royal-charcoal);
width: 40%;
}
.royal-add-to-cart {
margin-bottom: 2rem;
}
.royal-quantity-selector {
margin-bottom: 1rem;
}
.royal-quantity-input {
max-width: 150px;
}
.royal-quantity-input .form-control {
border-color: var(--royal-gold);
background: var(--royal-off-white);
}
.royal-quantity-input .btn {
border-color: var(--royal-gold);
color: var(--royal-gold);
}
.royal-auth-prompt {
margin-bottom: 2rem;
}
.royal-policies {
border-top: 1px solid rgba(212, 175, 55, 0.3);
padding-top: 1rem;
}
.royal-policy-item {
text-align: center;
color: var(--royal-charcoal);
}
.royal-policy-item i {
font-size: 1.5rem;
color: var(--royal-gold);
margin-bottom: 0.5rem;
display: block;
}
/* Product Description */
.royal-product-description {
margin-bottom: 3rem;
padding: 2rem;
background: var(--royal-off-white);
border-radius: 15px;
box-shadow: var(--royal-shadow);
}
.royal-description-content {
font-size: 1.1rem;
line-height: 1.8;
color: var(--royal-charcoal);
}
/* Form Styles */
.royal-input,
.royal-select,
.royal-textarea {
border: 2px solid var(--royal-gold);
border-radius: 8px;
padding: 0.75rem 1rem;
background: var(--royal-off-white);
color: var(--royal-charcoal);
transition: all 0.3s ease;
margin-bottom: 1rem;
width: 100%;
}
.form-control.royal-input,
.form-control.royal-select,
.form-select.royal-input {
margin-bottom: 1rem;
}
.royal-input:focus,
.royal-select:focus,
.royal-textarea:focus {
border-color: var(--royal-gold-dark);
box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
background: var(--royal-off-white);
}
.royal-label {
font-weight: 600;
color: var(--royal-gold);
margin-bottom: 0.5rem;
display: block;
font-size: 1rem;
}
.form-label {
margin-bottom: 0.5rem;
font-size: 1rem;
font-weight: 600;
}
.country-code-select {
max-width: 120px;
flex: 0 0 120px;
}
.input-group {
margin-bottom: 0;
}
.input-group .royal-input {
margin-bottom: 0;
}
/* Ensure consistent column spacing in checkout form */
.royal-checkout-section .col-md-6 {
margin-bottom: 1rem;
}
.royal-checkout-section .col-12 {
margin-bottom: 1rem;
}
.royal-checkbox .form-check-input {
border: 2px solid var(--royal-gold);
background: var(--royal-off-white);
}
.royal-checkbox .form-check-input:checked {
background: var(--royal-gradient);
border-color: var(--royal-gold);
}
/* Enhanced Filter Tabs */
.royal-filter-tabs-container {
background: transparent;
margin-bottom: 0;
padding: 0;
}
.royal-filter-tabs {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0;
}
.royal-filter-tab {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
background: var(--royal-off-white);
color: var(--royal-charcoal);
width: 100%;
text-decoration: none;
border: 2px solid transparent;
border-radius: 25px;
font-weight: 500;
font-size: 0.9rem;
transition: all 0.3s ease;
white-space: nowrap;
}
.royal-filter-tab:hover {
background: linear-gradient(135deg, var(--royal-gold), var(--royal-gold-dark));
color: var(--royal-black);
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}
.royal-filter-tab.active {
background: linear-gradient(135deg, var(--royal-purple), var(--royal-purple-dark));
color: white;
border-color: var(--royal-purple);
box-shadow: 0 4px 15px rgba(106, 90, 205, 0.3);
}
/* Mobile Filter Tabs - Horizontal on Mobile */
@media (max-width: 991px) {
.royal-filter-tabs-container {
background: var(--royal-off-white);
border-bottom: 2px solid var(--royal-gold);
margin-bottom: 1.5rem;
padding: 1rem 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.royal-filter-tabs {
display: flex;
flex-direction: row;
justify-content: flex-start;
overflow-x: auto;
gap: 0.5rem;
padding: 0 1rem;
-webkit-overflow-scrolling: touch;
}
.royal-filter-tabs::-webkit-scrollbar {
height: 4px;
}
.royal-filter-tabs::-webkit-scrollbar-thumb {
background: var(--royal-gold);
border-radius: 2px;
}
.royal-filter-tab {
white-space: nowrap;
flex-shrink: 0;
width: auto;
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
}
}
.royal-filter-tab i {
font-size: 0.8rem;
}
/* Compact Sidebar Filters */
.royal-filter-sidebar.royal-filter-compact {
background: var(--royal-off-white);
border-radius: 12px;
padding: 1rem;
box-shadow: var(--royal-shadow);
position: sticky;
top: 100px;
height: fit-content;
border-left: 4px solid var(--royal-purple);
max-width: 100%;
}
.royal-filter-header {
display: flex;
justify-content: between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.royal-filter-title {
font-family: var(--font-accent);
color: var(--royal-black);
margin: 0;
font-size: 0.95rem;
font-weight: 600;
}
.royal-filter-clear {
background: none;
border: none;
color: var(--royal-charcoal);
font-size: 0.8rem;
cursor: pointer;
padding: 0.25rem;
border-radius: 50%;
transition: all 0.2s ease;
}
.royal-filter-clear:hover {
background: var(--royal-gold);
color: var(--royal-black);
}
/* Search Box */
.royal-search-box {
position: relative;
margin-bottom: 1rem;
}
.royal-search-input {
width: 100%;
padding: 0.6rem 2rem 0.6rem 0.75rem;
border: 1px solid var(--royal-gold);
border-radius: 20px;
background: white;
font-size: 0.85rem;
color: var(--royal-charcoal);
transition: all 0.3s ease;
}
.royal-search-input:focus {
outline: none;
border-color: var(--royal-purple);
box-shadow: 0 0 0 2px rgba(106, 90, 205, 0.2);
}
.royal-search-icon {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--royal-gold);
font-size: 0.8rem;
}
/* Filter Groups */
.royal-filter-group {
margin-bottom: 1rem;
border-bottom: 1px solid rgba(212, 175, 55, 0.1);
padding-bottom: 0.75rem;
}
.royal-filter-header-small {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
padding: 0.5rem 0;
margin-bottom: 0.5rem;
}
.royal-filter-label {
font-weight: 600;
color: var(--royal-black);
font-size: 0.8rem;
margin: 0;
}
.royal-filter-toggle {
color: var(--royal-gold);
font-size: 0.7rem;
transition: transform 0.3s ease;
}
.royal-filter-group.collapsed .royal-filter-toggle {
transform: rotate(180deg);
}
.royal-filter-group.collapsed .royal-filter-options {
display: none;
}
.royal-filter-options {
padding-left: 0.5rem;
}
/* Custom Checkboxes */
.royal-checkbox-label {
display: flex;
align-items: center;
margin-bottom: 0.4rem;
cursor: pointer;
font-size: 0.8rem;
color: var(--royal-charcoal);
}
.royal-checkbox-label input[type="checkbox"] {
display: none;
}
.royal-checkbox-custom {
width: 14px;
height: 14px;
border: 1px solid var(--royal-gold);
border-radius: 3px;
margin-right: 0.5rem;
position: relative;
background: white;
transition: all 0.2s ease;
}
.royal-checkbox-label input[type="checkbox"]:checked + .royal-checkbox-custom {
background: var(--royal-purple);
border-color: var(--royal-purple);
}
.royal-checkbox-label input[type="checkbox"]:checked + .royal-checkbox-custom::after {
content: '✓';
position: absolute;
top: -2px;
left: 2px;
color: white;
font-size: 10px;
font-weight: bold;
}
.royal-checkbox-text {
flex: 1;
line-height: 1.2;
}
/* Price Inputs */
.royal-price-inputs {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.royal-price-input {
flex: 1;
padding: 0.4rem 0.6rem;
border: 1px solid var(--royal-gold);
border-radius: 15px;
font-size: 0.75rem;
background: white;
color: var(--royal-charcoal);
}
.royal-price-input:focus {
outline: none;
border-color: var(--royal-purple);
}
.royal-price-separator {
color: var(--royal-gold);
font-weight: bold;
font-size: 0.8rem;
}
.royal-price-presets {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.3rem;
}
.royal-price-preset {
padding: 0.3rem 0.5rem;
border: 1px solid var(--royal-gold);
background: white;
color: var(--royal-charcoal);
border-radius: 12px;
font-size: 0.7rem;
cursor: pointer;
transition: all 0.2s ease;
}
.royal-price-preset:hover {
background: var(--royal-gold);
color: var(--royal-black);
}
/* Filter Actions */
.royal-filter-actions {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(212, 175, 55, 0.2);
}
.royal-apply-filters {
width: 100%;
padding: 0.6rem 1rem;
background: linear-gradient(135deg, var(--royal-purple), var(--royal-purple-dark));
color: white;
border: none;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.royal-apply-filters:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(106, 90, 205, 0.3);
}
/* Products Header */
.royal-products-top-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
flex-wrap: wrap;
gap: 1rem;
}
.royal-results-info {
flex: 1;
}
.royal-results-title {
font-family: var(--font-accent);
color: var(--royal-black);
margin: 0 0 0.5rem 0;
font-size: 1.5rem;
}
.royal-results-count {
color: var(--royal-charcoal);
font-size: 0.9rem;
}
.royal-sort-options {
display: flex;
align-items: center;
gap: 0.5rem;
}
.royal-sort-label {
color: var(--royal-charcoal);
font-size: 0.85rem;
font-weight: 500;
margin: 0;
}
.royal-sort-select {
padding: 0.5rem 1rem;
border: 1px solid var(--royal-gold);
border-radius: 20px;
background: white;
color: var(--royal-charcoal);
font-size: 0.8rem;
cursor: pointer;
}
.royal-view-toggle {
display: flex;
gap: 0.25rem;
}
.royal-view-btn {
padding: 0.5rem;
border: 1px solid var(--royal-gold);
background: white;
color: var(--royal-charcoal);
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.8rem;
}
.royal-view-btn.active,
.royal-view-btn:hover {
background: var(--royal-gold);
color: var(--royal-black);
}
/* Products Grid Enhanced */
.royal-products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
.royal-products-grid.royal-products-list {
grid-template-columns: 1fr;
}
.royal-products-grid.royal-products-list .royal-product-card {
display: flex;
flex-direction: row;
align-items: center;
padding: 1rem;
}
.royal-products-grid.royal-products-list .royal-product-image {
width: 120px;
height: 120px;
margin-right: 1rem;
flex-shrink: 0;
}
.royal-products-grid.royal-products-list .royal-product-content {
flex: 1;
padding: 0;
}
/* Sidebar Filters */
.royal-sidebar {
background: var(--royal-off-white);
border-radius: 10px;
padding: 0.8rem;
box-shadow: var(--royal-shadow);
position: sticky;
top: 100px;
height: fit-content;
border-left: 3px solid var(--royal-purple);
}
.royal-sidebar-header {
margin-bottom: 0.8rem;
text-align: center;
}
.royal-sidebar-header h5 {
font-size: 0.9rem;
margin: 0;
}
.royal-sidebar-header h5 {
font-family: var(--font-accent);
color: var(--royal-black);
}
.royal-filter-group {
margin-bottom: 0.7rem;
}
.royal-filter-label {
font-weight: 600;
color: var(--royal-black);
margin-bottom: 0.3rem;
display: block;
font-size: 0.85rem;
}
.royal-filter-actions {
border-top: 1px solid rgba(212, 175, 55, 0.3);
padding-top: 1.5rem;
margin-top: 1.5rem;
}
/* Products Header */
.royal-products-header {
margin-bottom: 2rem;
}
.royal-products-count {
color: var(--royal-charcoal);
font-size: 0.9rem;
}
.royal-sort-options {
display: flex;
justify-content: flex-end;
}
/* No Results */
.royal-no-results {
text-align: center;
padding: 4rem 2rem;
background: var(--royal-off-white);
border-radius: 15px;
box-shadow: var(--royal-shadow);
}
.royal-no-results-icon {
font-size: 4rem;
color: var(--royal-gold);
margin-bottom: 1rem;
}
.royal-no-results-title {
font-family: var(--font-accent);
color: var(--royal-black);
margin-bottom: 1rem;
}
.royal-no-results-text {
color: var(--royal-charcoal);
margin-bottom: 2rem;
}
/* Address Management */
.royal-address-card {
background: var(--royal-off-white);
border: 2px solid transparent;
border-radius: 15px;
padding: 1.5rem;
box-shadow: var(--royal-shadow);
transition: all 0.3s ease;
position: relative;
height: 100%;
}
.royal-address-card:hover {
border-color: var(--royal-gold);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.royal-address-card.royal-address-default {
border-color: var(--royal-purple);
background: linear-gradient(135deg, var(--royal-off-white) 0%, rgba(106, 90, 205, 0.05) 100%);
}
.royal-default-badge {
position: absolute;
top: -8px;
right: 15px;
background: linear-gradient(135deg, var(--royal-purple), var(--royal-purple-dark));
color: white;
padding: 0.3rem 0.8rem;
border-radius: 15px;
font-size: 0.75rem;
font-weight: 600;
box-shadow: 0 2px 8px rgba(106, 90, 205, 0.3);
}
.royal-address-content {
margin-bottom: 1rem;
}
.royal-address-name {
font-family: var(--font-accent);
color: var(--royal-black);
margin-bottom: 0.75rem;
font-size: 1.1rem;
}
.royal-address-name i {
color: var(--royal-gold);
}
.royal-address-details {
line-height: 1.6;
}
.royal-address-line {
margin-bottom: 0.5rem;
color: var(--royal-charcoal);
font-size: 0.9rem;
}
.royal-address-line i {
color: var(--royal-gold);
width: 18px;
}
.royal-address-actions {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgba(212, 175, 55, 0.2);
padding-top: 1rem;
}
.royal-address-actions-left,
.royal-address-actions-right {
display: flex;
gap: 0.5rem;
}
.royal-address-action-btn {
width: 35px;
height: 35px;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
font-size: 0.8rem;
}
.royal-address-default-btn {
background: rgba(212, 175, 55, 0.1);
color: var(--royal-gold);
}
.royal-address-default-btn:hover {
background: var(--royal-gold);
color: var(--royal-black);
}
.royal-address-edit-btn {
background: rgba(106, 90, 205, 0.1);
color: var(--royal-purple);
}
.royal-address-edit-btn:hover {
background: var(--royal-purple);
color: white;
text-decoration: none;
}
.royal-address-delete-btn {
background: rgba(220, 53, 69, 0.1);
color: #dc3545;
}
.royal-address-delete-btn:hover {
background: #dc3545;
color: white;
}
/* Form Styles Enhanced */
.royal-form-container {
background: var(--royal-off-white);
border-radius: 20px;
padding: 2rem;
box-shadow: var(--royal-shadow);
border-top: 4px solid var(--royal-purple);
}
.royal-form-header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.royal-form-title {
font-family: var(--font-accent);
color: var(--royal-black);
margin-bottom: 0.5rem;
}
.royal-form-subtitle {
color: var(--royal-charcoal);
font-size: 1rem;
margin: 0;
}
.royal-form-section-title {
font-family: var(--font-accent);
color: var(--royal-black);
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--royal-gold);
font-size: 1.1rem;
}
.royal-form-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(212, 175, 55, 0.2);
}
/* Shopping Cart */
.royal-cart-items {
background: var(--royal-off-white);
border-radius: 15px;
padding: 2rem;
box-shadow: var(--royal-shadow);
margin-bottom: 2rem;
}
.royal-cart-item {
padding: 1.5rem;
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
transition: all 0.3s ease;
}
.royal-cart-item:last-child {
border-bottom: none;
}
.royal-cart-item:hover {
background: rgba(212, 175, 55, 0.05);
border-radius: 8px;
}
.royal-cart-image {
width: 80px;
height: 80px;
border-radius: 8px;
overflow: hidden;
}
.royal-cart-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.royal-cart-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--royal-cream);
color: var(--royal-gold);
font-size: 1.5rem;
}
.royal-cart-title {
font-family: var(--font-primary);
font-size: 1.1rem;
color: var(--royal-black);
margin-bottom: 0.5rem;
}
.royal-cart-specs {
margin-bottom: 0.5rem;
}
.royal-spec-item {
display: inline-block;
margin-right: 1rem;
font-size: 0.9rem;
color: var(--royal-charcoal);
}
.royal-cart-discount .badge {
font-size: 0.7rem;
}
.royal-badge-discount {
background: var(--royal-deep-red);
color: var(--royal-off-white);
}
.royal-cart-price {
text-align: center;
}
.royal-cart-quantity .input-group {
max-width: 120px;
}
.royal-cart-actions {
text-align: center;
}
/* Cart Summary */
.royal-cart-summary {
background: var(--royal-off-white);
border-radius: 15px;
padding: 2rem;
box-shadow: var(--royal-shadow);
position: sticky;
top: 100px;
}
.royal-summary-header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--royal-gold);
}
.royal-summary-header h5 {
font-family: var(--font-accent);
color: var(--royal-black);
}
.royal-summary-content {
margin-bottom: 2rem;
}
.royal-summary-item {
padding: 1rem 0;
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.royal-summary-row {
padding: 0.5rem 0;
}
.royal-discount-row {
color: var(--royal-emerald);
}
.royal-summary-total {
padding: 1rem 0;
border-top: 2px solid var(--royal-gold);
font-size: 1.2rem;
}
.royal-summary-actions {
margin-bottom: 2rem;
}
.royal-trust-badges {
border-top: 1px solid rgba(212, 175, 55, 0.3);
padding-top: 1rem;
}
.royal-trust-item {
text-align: center;
margin-bottom: 0.5rem;
}
.royal-trust-item i {
font-size: 1.2rem;
margin-bottom: 0.3rem;
display: block;
}
/* Empty States */
.royal-empty-cart {
text-align: center;
padding: 4rem 2rem;
background: var(--royal-off-white);
border-radius: 15px;
box-shadow: var(--royal-shadow);
}
.royal-empty-icon {
font-size: 4rem;
color: var(--royal-gold);
margin-bottom: 1rem;
}
.royal-empty-title {
font-family: var(--font-accent);
color: var(--royal-black);
margin-bottom: 1rem;
}
.royal-empty-text {
color: var(--royal-charcoal);
margin-bottom: 2rem;
}
/* Checkout Styles */
.royal-checkout-section {
background: var(--royal-off-white);
border-radius: 15px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: var(--royal-shadow);
}
.royal-checkout-title {
font-family: var(--font-accent);
color: var(--royal-black);
margin-bottom: 1.5rem;
position: relative;
}
.royal-checkout-title::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 50px;
height: 2px;
background: var(--royal-gradient);
}
.royal-payment-options {
margin-bottom: 1rem;
}
.royal-payment-option {
border: 2px solid rgba(212, 175, 55, 0.3);
border-radius: 10px;
padding: 1rem;
margin-bottom: 1rem;
transition: all 0.3s ease;
cursor: pointer;
}
.royal-payment-option.active {
border-color: var(--royal-gold);
background: rgba(212, 175, 55, 0.1);
}
.royal-payment-option:hover {
border-color: var(--royal-gold);
}
.royal-payment-option input[type="radio"] {
display: none;
}
.royal-payment-label {
display: flex;
align-items: center;
cursor: pointer;
margin: 0;
}
.royal-payment-icon {
font-size: 2rem;
color: var(--royal-gold);
margin-right: 1rem;
}
.royal-payment-details h6 {
margin-bottom: 0.3rem;
color: var(--royal-black);
}
.royal-payment-details p {
margin: 0;
color: var(--royal-charcoal);
font-size: 0.9rem;
}
.royal-checkout-policies {
margin-bottom: 2rem;
}
.royal-order-summary {
background: var(--royal-off-white);
border-radius: 15px;
padding: 2rem;
box-shadow: var(--royal-shadow);
position: sticky;
top: 100px;
margin-bottom: 2rem;
max-height: calc(100vh - 120px);
overflow-y: auto;
}
.royal-summary-items {
margin-bottom: 2rem;
}
.royal-summary-image {
width: 50px;
height: 50px;
border-radius: 8px;
overflow: hidden;
}
.royal-summary-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.royal-summary-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--royal-cream);
color: var(--royal-gold);
}
.royal-summary-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--royal-black);
margin-bottom: 0.3rem;
}
.royal-summary-specs {
font-size: 0.8rem;
color: var(--royal-charcoal);
margin-bottom: 0.3rem;
}
.royal-summary-price {
font-weight: 600;
color: var(--royal-gold);
}
.royal-summary-calculation {
border-top: 1px solid rgba(212, 175, 55, 0.3);
padding-top: 1rem;
margin-bottom: 2rem;
}
.royal-calc-row {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.royal-calc-total {
display: flex;
justify-content: space-between;
font-size: 1.1rem;
border-top: 2px solid var(--royal-gold);
padding-top: 1rem;
}
.royal-place-order-btn {
position: relative;
padding-right: 4rem;
}
.royal-total-badge {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.2);
padding: 0.2rem 0.5rem;
border-radius: 10px;
font-size: 0.9rem;
}
.royal-security-badges {
text-align: center;
color: var(--royal-charcoal);
}
.royal-trust-indicators {
background: var(--royal-off-white);
border-radius: 15px;
padding: 1.5rem;
box-shadow: var(--royal-shadow);
display: flex;
flex-direction: column;
align-items: center;
}
.royal-trust-indicators .royal-trust-item {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1rem;
text-align: left;
max-width: 300px;
}
.royal-trust-indicators .royal-trust-item:last-child {
margin-bottom: 0;
}
.royal-trust-indicators .royal-trust-item i {
font-size: 1.5rem;
flex-shrink: 0;
width: 30px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.royal-trust-indicators .royal-trust-item div {
flex: 1;
}
.royal-trust-indicators .royal-trust-item h6 {
margin-bottom: 0.25rem;
color: var(--royal-black);
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
}
.royal-trust-indicators .royal-trust-item small {
color: var(--royal-charcoal);
font-size: 0.875rem;
display: block;
line-height: 1.4;
}
/* Orders Page */
.royal-order-card {
background: var(--royal-off-white);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: var(--royal-shadow);
transition: all 0.3s ease;
}
.royal-order-card:hover {
transform: translateY(-2px);
box-shadow: var(--royal-shadow-heavy);
}
.royal-order-header {
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid rgba(212, 175, 55, 0.3);
}
.royal-order-header .row {
row-gap: 0.75rem;
}
.royal-order-number {
font-family: var(--font-accent);
font-size: 1.2rem;
color: var(--royal-black);
}
.royal-order-status {
text-align: center;
}
.royal-status-badge {
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: 600;
text-transform: uppercase;
font-size: 0.8rem;
}
.royal-status-pending {
background: #FFA500;
color: var(--royal-black);
}
.royal-status-confirmed {
background: var(--royal-emerald);
color: var(--royal-off-white);
}
.royal-status-processing {
background: #1E90FF;
color: var(--royal-off-white);
}
.royal-status-shipped {
background: #FF69B4;
color: var(--royal-off-white);
}
.royal-status-delivered {
background: var(--royal-emerald);
color: var(--royal-off-white);
}
.royal-status-cancelled {
background: var(--royal-deep-red);
color: var(--royal-off-white);
}
.royal-status-returned {
background: #FF8C00;
color: var(--royal-black);
}
.royal-order-total {
text-align: center;
}
.royal-order-total strong {
font-size: 1.3rem;
color: var(--royal-gold);
}
.royal-order-actions {
text-align: center;
}
/* Order Progress Timeline */
.royal-order-progress {
padding: 1.25rem;
background: rgba(212, 175, 55, 0.05);
border-radius: 8px;
margin-top: 0.75rem;
margin-bottom: 1rem;
}
.royal-progress-timeline {
display: flex;
justify-content: space-between;
position: relative;
}
.royal-progress-timeline::before {
content: '';
position: absolute;
top: 30px;
left: 5%;
right: 5%;
height: 2px;
background: rgba(212, 175, 55, 0.3);
z-index: 1;
}
.royal-progress-step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 2;
flex: 1;
}
.royal-progress-step.completed .royal-progress-icon {
background: var(--royal-gradient);
color: var(--royal-black);
}
.royal-progress-step.completed .royal-progress-content h6 {
color: var(--royal-gold);
}
.royal-progress-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--royal-cream);
border: 2px solid rgba(212, 175, 55, 0.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
color: var(--royal-charcoal);
margin-bottom: 0.5rem;
transition: all 0.3s ease;
}
.royal-progress-content {
text-align: center;
}
.royal-progress-content h6 {
font-size: 0.9rem;
margin-bottom: 0.3rem;
color: var(--royal-charcoal);
}
.royal-progress-content small {
color: var(--royal-charcoal);
font-size: 0.8rem;
}
/* Order Items */
.royal-order-items {
margin-bottom: 1rem;
}
.royal-order-item {
padding: 0.75rem 0.5rem;
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
transition: all 0.3s ease;
}
.royal-order-item .row {
row-gap: 0.5rem;
}
.royal-order-item:last-child {
border-bottom: none;
}
.royal-order-item:hover {
background: rgba(212, 175, 55, 0.05);
border-radius: 8px;
}
.royal-item-image {
width: 60px;
height: 60px;
border-radius: 8px;
overflow: hidden;
}
.royal-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.royal-item-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--royal-cream);
color: var(--royal-gold);
}
.royal-item-title {
font-family: var(--font-primary);
font-size: 1rem;
color: var(--royal-black);
margin-bottom: 0.3rem;
}
.royal-item-specs {
margin-bottom: 0.5rem;
}
.royal-badge-quantity {
background: var(--royal-gradient);
color: var(--royal-black);
}
.royal-item-price {
font-weight: 600;
color: var(--royal-gold);
}
/* Order Shipping */
.royal-order-shipping {
background: rgba(212, 175, 55, 0.05);
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
}
.royal-order-shipping .row {
row-gap: 0.75rem;
}
.royal-shipping-title {
font-family: var(--font-accent);
color: var(--royal-black);
margin-bottom: 0.5rem;
font-size: 0.95rem;
}
.royal-shipping-address {
color: var(--royal-charcoal);
line-height: 1.6;
}
.royal-order-notes {
color: var(--royal-charcoal);
font-style: italic;
background: var(--royal-off-white);
padding: 1rem;
border-radius: 8px;
border-left: 4px solid var(--royal-gold);
}
/* Order Policies */
.royal-order-policies {
border-top: 1px solid rgba(212, 175, 55, 0.3);
padding-top: 1rem;
}
.royal-policy-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
}
.royal-policy-item i {
font-size: 1.2rem;
}
.royal-policy-item small {
font-size: 0.8rem;
color: var(--royal-charcoal);
}
.royal-no-orders {
text-align: center;
padding: 4rem 2rem;
background: var(--royal-off-white);
border-radius: 15px;
box-shadow: var(--royal-shadow);
}
.royal-no-orders-icon {
font-size: 4rem;
color: var(--royal-gold);
margin-bottom: 1rem;
}
.royal-no-orders-title {
font-family: var(--font-accent);
color: var(--royal-black);
margin-bottom: 1rem;
}
.royal-no-orders-text {
color: var(--royal-charcoal);
margin-bottom: 2rem;
}
/* Authentication Pages */
.royal-auth-body {
background: var(--royal-dark-gradient);
min-height: 100vh;
position: relative;
overflow-y: auto;
}
.royal-auth-body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
z-index: 1;
}
.royal-auth-container {
position: relative;
z-index: 2;
min-height: 100vh;
}
.royal-auth-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(26, 26, 26, 0.9), rgba(44, 44, 44, 0.8));
z-index: 1;
}
.royal-auth-brand {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
background: var(--royal-gradient);
color: var(--royal-black);
}
.royal-brand-content {
text-align: center;
padding: 2rem;
}
.royal-brand-logo {
margin-bottom: 3rem;
}
.royal-brand-icon {
font-size: 4rem;
margin-bottom: 1rem;
display: block;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.royal-brand-title {
font-family: var(--font-accent);
font-size: 3rem;
font-weight: 700;
margin-bottom: 0.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.royal-brand-subtitle {
font-size: 1.2rem;
font-weight: 300;
opacity: 0.9;
}
.royal-brand-features {
margin-top: 2rem;
}
.royal-feature-item {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
font-weight: 500;
}
.royal-feature-item i {
font-size: 1.5rem;
margin-right: 1rem;
}
.royal-brand-benefits {
margin-top: 2rem;
}
.royal-benefit-item {
display: flex;
align-items: flex-start;
margin-bottom: 2rem;
text-align: left;
}
.royal-benefit-item i {
font-size: 2rem;
margin-right: 1rem;
margin-top: 0.5rem;
}
.royal-benefit-item h6 {
margin-bottom: 0.5rem;
font-size: 1.1rem;
}
.royal-benefit-item p {
margin: 0;
opacity: 0.9;
}
.royal-auth-form-container {
position: relative;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: center;
min-height: 100vh;
padding: 2rem;
padding-top: 3rem;
padding-bottom: 3rem;
}
.royal-auth-form {
background: var(--royal-off-white);
border-radius: 20px;
padding: 3rem;
box-shadow: var(--royal-shadow-heavy);
width: 100%;
max-width: 500px;
position: relative;
}
.royal-mobile-logo {
text-align: center;
margin-bottom: 2rem;
color: var(--royal-gold);
}
.royal-mobile-logo i {
font-size: 2.5rem;
margin-bottom: 0.5rem;
display: block;
}
.royal-mobile-logo h3 {
font-family: var(--font-accent);
margin: 0;
}
.royal-auth-header {
text-align: center;
margin-bottom: 2rem;
}
.royal-auth-title {
font-family: var(--font-accent);
font-size: 2rem;
color: var(--royal-black);
margin-bottom: 0.5rem;
}
.royal-auth-subtitle {
color: var(--royal-charcoal);
font-size: 1rem;
}
.royal-form {
margin-bottom: 2rem;
}
.royal-form-group {
margin-bottom: 1.5rem;
position: relative;
}
.royal-form-label {
font-weight: 600;
color: var(--royal-black);
margin-bottom: 0.5rem;
display: block;
}
.royal-form-input {
width: 100%;
border: 2px solid rgba(212, 175, 55, 0.3);
border-radius: 10px;
padding: 0.75rem 1rem;
background: var(--royal-off-white);
color: var(--royal-charcoal);
transition: all 0.3s ease;
font-size: 1rem;
}
.royal-form-input:focus {
border-color: var(--royal-gold);
box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
outline: none;
}
.royal-password-container {
position: relative;
}
.royal-password-toggle {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--royal-gold);
cursor: pointer;
padding: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.royal-password-strength {
margin-top: 0.5rem;
}
.royal-strength-bar {
height: 4px;
border-radius: 2px;
background: #e9ecef;
transition: all 0.3s ease;
}
.royal-strength-very-weak { background: #dc3545; width: 20%; }
.royal-strength-weak { background: #fd7e14; width: 40%; }
.royal-strength-fair { background: #ffc107; width: 60%; }
.royal-strength-good { background: #198754; width: 80%; }
.royal-strength-strong { background: #20c997; width: 100%; }
.royal-strength-text {
font-size: 0.8rem;
margin-top: 0.25rem;
color: var(--royal-charcoal);
}
.royal-form-options {
margin-bottom: 2rem;
}
.royal-checkbox {
margin-bottom: 1rem;
}
.royal-checkbox .form-check-input {
border: 2px solid var(--royal-gold);
background: var(--royal-off-white);
border-radius: 4px;
}
.royal-checkbox .form-check-input:checked {
background: var(--royal-gradient);
border-color: var(--royal-gold);
}
.royal-checkbox-label {
color: var(--royal-charcoal);
font-size: 0.9rem;
}
.royal-link-small {
color: var(--royal-gold);
text-decoration: none;
font-size: 0.9rem;
}
.royal-link-small:hover {
color: var(--royal-gold-dark);
text-decoration: underline;
}
.royal-login-btn,
.royal-register-btn {
width: 100%;
padding: 1rem;
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.royal-auth-divider {
text-align: center;
margin: 2rem 0;
position: relative;
}
.royal-auth-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: rgba(212, 175, 55, 0.3);
}
.royal-auth-divider span {
background: var(--royal-off-white);
padding: 0 1rem;
color: var(--royal-charcoal);
position: relative;
z-index: 1;
}
.royal-auth-footer {
text-align: center;
}
.royal-auth-switch {
color: var(--royal-charcoal);
margin: 0;
}
.royal-link {
color: var(--royal-gold);
text-decoration: none;
font-weight: 600;
}
.royal-link:hover {
color: var(--royal-gold-dark);
text-decoration: underline;
}
.royal-demo-access {
text-align: center;
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid rgba(212, 175, 55, 0.3);
}
.royal-home-link {
position: fixed;
top: 20px;
left: 20px;
background: rgba(212, 175, 55, 0.9);
color: var(--royal-black);
padding: 0.75rem 1rem;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
z-index: 1000;
display: flex;
align-items: center;
gap: 0.5rem;
}
.royal-home-link:hover {
background: var(--royal-gold);
color: var(--royal-black);
transform: translateY(-2px);
}
/* Admin Styles */
.royal-admin-header {
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 2px solid var(--royal-gold);
}
.royal-admin-title {
font-family: var(--font-accent);
font-size: 2.5rem;
color: var(--royal-black);
margin-bottom: 0.5rem;
}
.royal-admin-subtitle {
color: var(--royal-charcoal);
font-size: 1.1rem;
}
.royal-admin-breadcrumb .breadcrumb {
background: transparent;
padding: 0;
margin-bottom: 1rem;
}
.royal-admin-breadcrumb .breadcrumb-item a {
color: var(--royal-gold);
text-decoration: none;
}
/* Admin Stats Cards */
.royal-stat-card {
background: var(--royal-off-white);
border-radius: 15px;
padding: 2rem;
box-shadow: var(--royal-shadow);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.royal-stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--royal-gradient);
}
.royal-stat-card:hover {
transform: translateY(-5px);
box-shadow: var(--royal-shadow-heavy);
}
.royal-stat-primary::before { background: linear-gradient(135deg, #007bff, #0056b3); }
.royal-stat-success::before { background: linear-gradient(135deg, #28a745, #1e7e34); }
.royal-stat-warning::before { background: linear-gradient(135deg, #ffc107, #e0a800); }
.royal-stat-info::before { background: linear-gradient(135deg, #17a2b8, #138496); }
.royal-stat-icon {
width: 60px;
height: 60px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--royal-off-white);
margin-bottom: 1rem;
}
.royal-stat-primary .royal-stat-icon { background: linear-gradient(135deg, #007bff, #0056b3); }
.royal-stat-success .royal-stat-icon { background: linear-gradient(135deg, #28a745, #1e7e34); }
.royal-stat-warning .royal-stat-icon { background: linear-gradient(135deg, #ffc107, #e0a800); }
.royal-stat-info .royal-stat-icon { background: linear-gradient(135deg, #17a2b8, #138496); }
.royal-stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--royal-black);
margin-bottom: 0.5rem;
}
.royal-stat-label {
color: var(--royal-charcoal);
font-weight: 600;
margin-bottom: 0.5rem;
}
.royal-stat-trend {
font-size: 0.9rem;
color: var(--royal-charcoal);
}
/* Admin Sections */
.royal-admin-section {
background: var(--royal-off-white);
border-radius: 15px;
padding: 2rem;
box-shadow: var(--royal-shadow);
margin-bottom: 2rem;
}
/* Quick Actions */
.royal-quick-action {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--royal-off-white);
border: 2px solid rgba(212, 175, 55, 0.3);
border-radius: 15px;
padding: 1.5rem;
text-decoration: none;
color: var(--royal-charcoal);
transition: all 0.3s ease;
min-height: 120px;
}
.royal-quick-action:hover {
border-color: var(--royal-gold);
background: rgba(212, 175, 55, 0.1);
color: var(--royal-black);
transform: translateY(-3px);
box-shadow: var(--royal-shadow);
}
.royal-quick-action i {
font-size: 2rem;
color: var(--royal-gold);
margin-bottom: 0.5rem;
}
.royal-quick-action span {
font-weight: 600;
text-align: center;
}
/* Admin Tables */
.royal-admin-table {
background: var(--royal-off-white);
border-radius: 10px;
overflow: hidden;
box-shadow: var(--royal-shadow);
}
.royal-admin-table thead {
background: var(--royal-gradient);
color: var(--royal-black);
}
.royal-admin-table thead th {
border: none;
padding: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.royal-admin-table tbody tr {
transition: all 0.3s ease;
}
.royal-admin-table tbody tr:hover {
background: rgba(212, 175, 55, 0.1);
}
.royal-admin-table td {
padding: 1rem;
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
vertical-align: middle;
}
.royal-order-number {
font-family: var(--font-accent);
font-weight: 600;
color: var(--royal-gold);
}
.royal-customer-info strong {
color: var(--royal-black);
}
.royal-amount {
color: var(--royal-gold);
font-size: 1.1rem;
}
.royal-action-buttons {
display: flex;
gap: 0.5rem;
}
/* Admin Product Cards */
.royal-admin-product-card {
background: var(--royal-off-white);
border-radius: 15px;
overflow: hidden;
box-shadow: var(--royal-shadow);
transition: all 0.3s ease;
position: relative;
}
.royal-admin-product-card:hover {
transform: translateY(-5px);
box-shadow: var(--royal-shadow-heavy);
}
.royal-product-status {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
display: flex;
flex-direction: column;
gap: 5px;
}
.royal-admin-product-image {
height: 200px;
position: relative;
overflow: hidden;
}
.royal-admin-product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.royal-admin-product-card:hover .royal-admin-product-image img {
transform: scale(1.05);
}
.royal-admin-product-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
background: var(--royal-cream);
color: var(--royal-gold);
font-size: 2rem;
}
.royal-admin-product-details {
padding: 1.5rem;
}
.royal-admin-product-title {
font-family: var(--font-primary);
font-size: 1.1rem;
color: var(--royal-black);
margin-bottom: 1rem;
line-height: 1.3;
}
.royal-admin-product-specs {
margin-bottom: 1rem;
}
.royal-spec-value {
font-weight: 600;
color: var(--royal-charcoal);
font-size: 0.9rem;
}
.royal-admin-product-price {
margin-bottom: 1rem;
text-align: center;
}
.royal-price-row {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.royal-admin-product-features {
margin-bottom: 1rem;
min-height: 50px;
}
.royal-feature-tag {
display: inline-block;
font-size: 0.7rem;
padding: 2px 6px;
border-radius: 10px;
margin: 2px;
background: rgba(212, 175, 55, 0.1);
color: var(--royal-charcoal);
}
.royal-admin-product-actions {
border-top: 1px solid rgba(212, 175, 55, 0.2);
padding-top: 1rem;
}
.royal-admin-product-meta {
text-align: center;
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid rgba(212, 175, 55, 0.1);
}
/* Admin Form Styles */
.royal-admin-form {
background: var(--royal-off-white);
border-radius: 15px;
padding: 2rem;
box-shadow: var(--royal-shadow);
}
.royal-form-section {
background: var(--royal-off-white);
border-radius: 15px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: var(--royal-shadow);
}
.royal-form-section-title {
font-family: var(--font-accent);
color: var(--royal-black);
margin-bottom: 1.5rem;
position: relative;
}
.royal-form-section-title::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 50px;
height: 2px;
background: var(--royal-gradient);
}
.royal-form-sidebar-section {
background: var(--royal-off-white);
border-radius: 15px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: var(--royal-shadow);
}
.royal-sidebar-title {
font-family: var(--font-accent);
color: var(--royal-black);
margin-bottom: 1rem;
font-size: 1.1rem;
}
.royal-option-group {
margin-bottom: 1rem;
}
.royal-option-group .form-check {
margin-bottom: 1rem;
}
.royal-guidelines {
border-top: 1px solid rgba(212, 175, 55, 0.3);
padding-top: 1rem;
}
.royal-guideline-item {
display: flex;
align-items: center;
margin-bottom: 0.8rem;
}
.royal-guideline-item i {
margin-right: 0.8rem;
width: 16px;
}
/* File Upload */
.royal-file-upload {
margin-bottom: 2rem;
position: relative;
}
.royal-file-input:hover {
border-color: var(--royal-purple);
background: rgba(106, 90, 205, 0.05);
}
.royal-file-input:focus {
outline: none;
border-color: var(--royal-purple);
box-shadow: 0 0 0 2px rgba(106, 90, 205, 0.2);
}
.royal-upload-area {
border: 2px dashed var(--royal-gold);
border-radius: 15px;
padding: 3rem 2rem;
text-align: center;
background: rgba(212, 175, 55, 0.05);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.royal-upload-area:hover {
border-color: var(--royal-gold-dark);
background: rgba(212, 175, 55, 0.1);
}
.royal-upload-icon {
font-size: 3rem;
color: var(--royal-gold);
margin-bottom: 1rem;
}
.royal-upload-area h6 {
color: var(--royal-black);
margin-bottom: 0.5rem;
}
.royal-upload-area p {
color: var(--royal-charcoal);
margin-bottom: 1rem;
}
.royal-file-input {
width: 100%;
padding: 0.75rem;
border: 2px dashed var(--royal-gold);
border-radius: 10px;
background: var(--royal-off-white);
color: var(--royal-charcoal);
cursor: pointer;
transition: all 0.3s ease;
}
.royal-uploaded-files {
margin-top: 1rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
/* Price Preview */
.royal-price-preview {
background: rgba(212, 175, 55, 0.1);
border-radius: 10px;
padding: 1rem;
text-align: center;
}
.royal-price-calculation {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.royal-price-label {
font-weight: 600;
color: var(--royal-black);
}
.royal-price-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--royal-gold);
}
.royal-savings {
color: var(--royal-emerald);
font-weight: 600;
}
/* Advertisement Cards */
.royal-ad-card {
background: var(--royal-off-white);
border-radius: 15px;
overflow: hidden;
box-shadow: var(--royal-shadow);
transition: all 0.3s ease;
position: relative;
}
.royal-ad-card:hover {
transform: translateY(-5px);
box-shadow: var(--royal-shadow-heavy);
}
.royal-ad-status {
position: absolute;
top: 15px;
right: 15px;
z-index: 3;
display: flex;
flex-direction: column;
gap: 5px;
}
.royal-ad-image {
height: 200px;
position: relative;
overflow: hidden;
}
.royal-ad-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.royal-ad-card:hover .royal-ad-image img {
transform: scale(1.05);
}
.royal-ad-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(26, 26, 26, 0.8);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.royal-ad-card:hover .royal-ad-overlay {
opacity: 1;
}
.royal-ad-actions {
display: flex;
gap: 10px;
}
.royal-ad-content {
padding: 1.5rem;
}
.royal-ad-title {
font-family: var(--font-primary);
color: var(--royal-black);
margin-bottom: 0.5rem;
}
.royal-ad-description {
color: var(--royal-charcoal);
margin-bottom: 1rem;
line-height: 1.5;
}
.royal-ad-link {
margin-bottom: 1rem;
}
.royal-ad-meta {
border-top: 1px solid rgba(212, 175, 55, 0.2);
padding-top: 1rem;
}
.royal-ad-controls {
border-top: 1px solid rgba(212, 175, 55, 0.2);
padding: 1rem 1.5rem;
}
/* Slider Preview */
.royal-slider-preview {
border-radius: 15px;
overflow: hidden;
box-shadow: var(--royal-shadow);
max-height: 400px;
}
.royal-preview-slide {
position: relative;
}
.royal-preview-slide img {
height: 400px;
object-fit: cover;
}
.royal-preview-caption {
background: rgba(26, 26, 26, 0.8);
border-radius: 10px;
margin: 2rem;
padding: 2rem;
}
/* Orders Management */
.royal-status-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 2rem;
padding: 1rem;
background: var(--royal-off-white);
border-radius: 15px;
box-shadow: var(--royal-shadow);
}
.royal-status-filter {
padding: 0.5rem 1rem;
border-radius: 25px;
text-decoration: none;
color: var(--royal-charcoal);
background: transparent;
border: 1px solid rgba(212, 175, 55, 0.3);
transition: all 0.3s ease;
font-weight: 500;
}
.royal-status-filter:hover,
.royal-status-filter.active {
background: var(--royal-gradient);
color: var(--royal-black);
border-color: var(--royal-gold);
text-decoration: none;
}
.royal-orders-table {
background: var(--royal-off-white);
border-radius: 15px;
overflow-x: auto;
overflow-y: visible;
box-shadow: var(--royal-shadow);
}
.royal-order-row:hover {
background: rgba(212, 175, 55, 0.05);
}
.royal-order-info {
line-height: 1.3;
}
.royal-order-status-cell {
text-align: center;
position: relative;
}
/* Fix dropdown overflow in table cells */
.table-responsive {
overflow-x: auto;
overflow-y: visible;
}
.royal-order-status-cell .dropdown {
position: static;
}
.royal-order-status-cell .dropdown-menu {
position: absolute;
z-index: 1050;
min-width: 180px;
}
.royal-order-dates {
line-height: 1.3;
}
.royal-order-actions {
text-align: center;
}
.royal-bulk-actions {
background: var(--royal-off-white);
border-radius: 15px;
padding: 1rem 2rem;
box-shadow: var(--royal-shadow);
}
.royal-bulk-count {
font-weight: 600;
color: var(--royal-gold);
}
/* Modals */
.royal-modal .modal-content {
background: var(--royal-off-white);
border: none;
border-radius: 15px;
box-shadow: var(--royal-shadow-heavy);
}
.royal-modal .modal-header {
background: var(--royal-gradient);
color: var(--royal-black);
border-bottom: none;
border-radius: 15px 15px 0 0;
}
.royal-modal .modal-body {
padding: 2rem;
}
.royal-modal .modal-footer {
border-top: 1px solid rgba(212, 175, 55, 0.3);
padding: 1rem 2rem;
}
/* Info Cards */
.royal-info-card {
background: rgba(212, 175, 55, 0.05);
border-radius: 8px;
padding: 1rem;
border-left: 4px solid var(--royal-gold);
}
.royal-info-card p {
margin-bottom: 0.5rem;
}
.royal-info-card p:last-child {
margin-bottom: 0;
}
/* Empty States */
.royal-empty-state {
text-align: center;
padding: 4rem 2rem;
background: var(--royal-off-white);
border-radius: 15px;
box-shadow: var(--royal-shadow);
}
.royal-empty-icon {
font-size: 4rem;
color: var(--royal-gold);
margin-bottom: 1rem;
}
.royal-empty-title {
font-family: var(--font-accent);
color: var(--royal-black);
margin-bottom: 1rem;
}
.royal-empty-text {
color: var(--royal-charcoal);
margin-bottom: 2rem;
}
/* Badges */
.royal-badge {
padding: 0.4rem 0.8rem;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: revert;
}
.royal-badge-success {
background: var(--royal-emerald);
color: var(--royal-off-white);
}
.royal-badge-warning {
background: #FFA500;
color: var(--royal-black);
}
.royal-badge-info {
background: #17a2b8;
color: var(--royal-off-white);
}
.royal-badge-secondary {
background: var(--royal-charcoal);
color: var(--royal-off-white);
}
.royal-badge-primary {
background: var(--royal-gradient);
color: var(--royal-black);
}
/* Alerts */
.royal-alert {
border: none;
border-radius: 10px;
border-left: 4px solid var(--royal-gold);
background: rgba(212, 175, 55, 0.1);
color: var(--royal-charcoal);
}
.royal-alert-info {
border-left-color: #17a2b8;
background: rgba(23, 162, 184, 0.1);
}
/* Dividers */
.royal-divider {
border: none;
height: 1px;
background: var(--royal-gradient);
margin: 2rem 0;
}
/* Footer */
.royal-footer {
background: var(--royal-pink-white-gradient);
color: var(--royal-charcoal);
padding: 3rem 0 2rem;
margin-top: 5rem;
}
.royal-footer-title {
font-family: var(--font-accent);
color: var(--royal-gold);
margin-bottom: 1rem;
}
.royal-footer-text {
color: var(--royal-charcoal);
opacity: 0.8;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.royal-certifications {
margin-bottom: 2rem;
}
.royal-footer-link {
color: var(--royal-charcoal);
text-decoration: none;
opacity: 0.7;
transition: all 0.3s ease;
display: block;
margin-bottom: 0.5rem;
}
.royal-footer-link:hover {
color: var(--royal-gold);
opacity: 1;
text-decoration: none;
}
.royal-social-links {
display: flex;
gap: 1rem;
}
.royal-social-link {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(212, 175, 55, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: var(--royal-gold);
text-decoration: none;
transition: all 0.3s ease;
}
.royal-social-link:hover {
background: var(--royal-gradient);
color: var(--royal-black);
transform: translateY(-3px);
}
.royal-footer-copyright {
color: var(--royal-charcoal);
opacity: 0.6;
margin: 0;
font-size: 0.9rem;
}
/* Feature Cards */
.royal-feature-card {
background: var(--royal-off-white);
border-radius: 15px;
padding: 2rem;
text-align: center;
box-shadow: var(--royal-shadow);
transition: all 0.3s ease;
height: 100%;
}
.royal-feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--royal-shadow-heavy);
}
.royal-feature-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--royal-gradient);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--royal-black);
margin: 0 auto 1.5rem;
}
.royal-feature-title {
font-family: var(--font-accent);
color: var(--royal-black);
margin-bottom: 1rem;
}
.royal-feature-text {
color: var(--royal-charcoal);
line-height: 1.6;
}
/* Zoom Overlay */
.royal-zoom-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
cursor: pointer;
}
.royal-zoom-container {
position: relative;
max-width: 90%;
max-height: 90%;
}
.royal-zoomed-image {
max-width: 100%;
max-height: 100%;
border-radius: 8px;
}
.royal-zoom-close {
position: absolute;
top: -40px;
right: -40px;
background: var(--royal-gold);
color: var(--royal-black);
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 1.5rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
/* Responsive Design */
@media (max-width: 768px) {
.royal-slide-title {
font-size: 2.5rem;
}
.royal-hero-title {
font-size: 2.8rem;
}
.royal-section-title {
font-size: 2rem;
}
.royal-page-title {
font-size: 2rem;
}
.royal-admin-title {
font-size: 2rem;
}
.royal-product-detail-title {
font-size: 1.5rem;
}
.royal-price-current-large {
font-size: 1.5rem;
}
.royal-sidebar {
position: static;
margin-bottom: 2rem;
}
.royal-cart-summary,
.royal-order-summary,
.royal-product-details {
position: static;
margin-bottom: 2rem;
}
.royal-progress-timeline {
flex-direction: column;
align-items: center;
}
.royal-progress-timeline::before {
display: none;
}
.royal-progress-step {
margin-bottom: 1rem;
}
.royal-status-filters {
flex-direction: column;
}
.royal-auth-form {
padding: 2rem 1.5rem;
}
.royal-brand-title {
font-size: 2rem;
}
.royal-brand-subtitle {
font-size: 1rem;
}
}
@media (max-width: 576px) {
.royal-hero-slider,
.royal-hero-default {
height: 60vh;
}
.royal-slide-img {
height: 60vh;
}
.royal-slide-title {
font-size: 2rem;
}
.royal-hero-title {
font-size: 2.2rem;
}
.royal-section {
padding: 3rem 0;
}
.royal-navbar {
padding: 0.5rem 0;
}
.royal-product-image,
.royal-product-image-large {
height: 200px;
}
.royal-category-image {
height: 200px;
}
.royal-main-product-image {
margin-bottom: 1rem;
}
.royal-thumbnail {
height: 80px;
}
.royal-btn-lg {
padding: 0.75rem 2rem;
font-size: 1rem;
}
.royal-quick-action {
min-height: 100px;
padding: 1rem;
}
.royal-quick-action i {
font-size: 1.5rem;
}
}
/* Print Styles */
@media print {
.royal-navbar,
.royal-footer,
.royal-sidebar,
.royal-admin-header,
.btn,
.royal-quick-action {
display: none !important;
}
body {
background: white !important;
color: black !important;
}
.royal-admin-section,
.royal-cart-summary,
.royal-order-summary {
box-shadow: none !important;
border: 1px solid #ccc !important;
}
}
/* Animation Keyframes */
@keyframes royal-shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes royal-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
@keyframes royal-bounce {
0%, 20%, 53%, 80%, 100% {
transform: translate3d(0, 0, 0);
}
40%, 43% {
transform: translate3d(0, -30px, 0);
}
70% {
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0, -4px, 0);
}
}
/* Utility Classes */
.royal-text-gold {
color: var(--royal-gold) !important;
}
.royal-bg-gold {
background: var(--royal-gradient) !important;
}
.royal-border-gold {
border-color: var(--royal-gold) !important;
}
.royal-shimmer {
animation: royal-shimmer 2s infinite;
}
.royal-pulse {
animation: royal-pulse 2s infinite;
}
.royal-bounce {
animation: royal-bounce 1s infinite;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--royal-cream);
}
::-webkit-scrollbar-thumb {
background: var(--royal-gradient);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--royal-gradient-reverse);
}
/* Selection */
::selection {
background: var(--royal-gold);
color: var(--royal-black);
}
::-moz-selection {
background: var(--royal-gold);
color: var(--royal-black);
}
/* Enhanced Homepage Sections */
/* Animated Stats Section */
.royal-stats-section {
background: linear-gradient(135deg, var(--royal-charcoal) 0%, var(--royal-black) 100%);
color: var(--royal-off-white);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.royal-stats-overlay::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('/static/images/pattern-overlay.png') repeat;
opacity: 0.1;
}
.royal-stat-item-animated {
text-align: center;
padding: 2rem;
border-radius: 15px;
transition: all 0.3s ease;
background: rgba(212, 175, 55, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(212, 175, 55, 0.3);
}
.royal-stat-item-animated:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(212, 175, 55, 0.3);
}
.royal-stat-icon {
font-size: 3rem;
color: var(--royal-gold);
margin-bottom: 1rem;
display: inline-block;
animation: pulse 2s infinite;
}
.royal-stat-number {
font-size: 3rem;
font-weight: bold;
color: var(--royal-gold);
margin: 1rem 0 0.5rem 0;
font-family: var(--font-accent);
}
.royal-stat-label {
color: var(--royal-off-white);
font-size: 1.1rem;
margin: 0;
}
/* Section Dividers */
.royal-section-divider {
display: flex;
align-items: center;
justify-content: center;
margin: 2rem 0;
}
.royal-divider-line {
height: 2px;
width: 100px;
background: linear-gradient(90deg, transparent, var(--royal-gold), transparent);
}
.royal-divider-gem {
margin: 0 1rem;
color: var(--royal-gold);
font-size: 1.5rem;
animation: sparkle 3s ease-in-out infinite;
}
/* Testimonials Section */
.royal-testimonials-section {
background: var(--royal-bg-gradient);
padding: 80px 0;
}
.royal-testimonial-card {
background: var(--royal-off-white);
border-radius: 20px;
padding: 2.5rem;
box-shadow: var(--royal-shadow);
transition: all 0.3s ease;
border: 1px solid rgba(212, 175, 55, 0.2);
height: 100%;
}
.royal-testimonial-card:hover {
transform: translateY(-5px);
box-shadow: var(--royal-shadow-heavy);
}
.royal-testimonial-stars {
color: var(--royal-gold);
font-size: 1.2rem;
margin-bottom: 1.5rem;
}
.royal-testimonial-text {
font-style: italic;
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 2rem;
color: var(--royal-charcoal);
}
.royal-testimonial-author {
display: flex;
align-items: center;
gap: 1rem;
}
.royal-testimonial-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--royal-gradient);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
}
.royal-testimonial-info h6 {
margin: 0;
color: var(--royal-charcoal);
font-weight: 600;
}
/* Newsletter Section */
.royal-newsletter-section {
background: var(--royal-gold-pink-gradient);
padding: 80px 0;
color: var(--royal-off-white);
}
.royal-newsletter-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 3rem;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.royal-newsletter-title {
font-family: var(--font-accent);
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--royal-off-white);
}
.royal-newsletter-subtitle {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.royal-newsletter-form .input-group {
max-width: 500px;
margin: 0 auto 1rem auto;
}
.royal-newsletter-input {
border: none;
border-radius: 50px 0 0 50px;
padding: 1rem 1.5rem;
font-size: 1.1rem;
background: rgba(255, 255, 255, 0.9);
}
.royal-newsletter-form .btn {
border-radius: 0 50px 50px 0;
padding: 1rem 2rem;
font-weight: 600;
border: none;
}
/* Image Zoom Modal */
.royal-zoom-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
animation: fadeIn 0.3s ease;
}
.royal-zoom-container {
position: relative;
max-width: 90vw;
max-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
.royal-zoomed-image {
max-width: 100%;
max-height: 100%;
border-radius: 8px;
box-shadow: var(--royal-shadow-heavy);
}
.royal-zoom-close {
position: absolute;
top: -50px;
right: -50px;
background: var(--royal-gold);
color: var(--royal-black);
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.royal-zoom-close:hover {
background: var(--royal-gold);
transform: scale(1.1);
}
/* Enhanced Animations */
@keyframes sparkle {
0%, 100% { transform: rotate(0deg) scale(1); }
25% { transform: rotate(180deg) scale(1.1); }
50% { transform: rotate(360deg) scale(1); }
75% { transform: rotate(540deg) scale(1.1); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ============================================
MODERN CARATLANE-INSPIRED DESIGN SYSTEM
============================================ */
/* Modern Color Palette - Vibrant Edition */
:root {
--modern-white: #FFFFFF;
--modern-off-white: #FAFAFA;
--modern-light-gray: #F5F5F5;
--modern-gray: #E0E0E0;
--modern-text: #333333;
--modern-text-light: #666666;
--modern-text-muted: #999999;
--modern-primary: #914F1E;
--modern-primary-dark: #6D3A16;
--modern-accent: #E6B17E;
--modern-border: #E5E5E5;
--modern-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
--modern-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
/* Vibrant Accent Colors */
--vibrant-pink: #FF6B9D;
--vibrant-purple: #9D4EDD;
--vibrant-blue: #4CC9F0;
--vibrant-teal: #00B4D8;
--vibrant-orange: #FF8500;
--vibrant-gold: #FFD60A;
--vibrant-red: #E63946;
--vibrant-green: #06FFA5;
}
/* Modern Hero Section */
.modern-hero {
background: var(--modern-white);
}
.modern-hero-img {
width: 100%;
height: 600px;
object-fit: cover;
object-position: center;
/* background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); */
}
.modern-hero-caption {
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
bottom: 0;
left: 0;
right: 0;
padding: 3rem 2rem;
}
.modern-hero-title {
font-family: 'Montserrat', sans-serif;
font-size: 2.5rem;
font-weight: 600;
color: var(--modern-white);
margin-bottom: 1rem;
}
.modern-hero-desc {
font-size: 1.1rem;
color: var(--modern-white);
margin-bottom: 1.5rem;
}
.modern-hero-default {
background: var(--modern-light-gray);
padding: 6rem 0;
}
.modern-hero-default .modern-hero-title {
color: var(--modern-text);
}
.modern-hero-subtitle {
font-size: 1.2rem;
color: var(--modern-text-light);
margin-bottom: 2rem;
}
.modern-hero-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
/* Modern Buttons */
.modern-btn-primary {
background: var(--modern-primary);
color: var(--modern-white);
border: none;
padding: 0.75rem 2rem;
font-size: 1rem;
font-weight: 500;
border-radius: 4px;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.modern-btn-primary:hover {
background: var(--modern-primary-dark);
color: var(--modern-white);
transform: translateY(-2px);
box-shadow: var(--modern-shadow-hover);
}
.modern-btn-outline {
background: transparent;
color: var(--modern-primary);
border: 2px solid var(--modern-primary);
padding: 0.75rem 2rem;
font-size: 1rem;
font-weight: 500;
border-radius: 4px;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.modern-btn-outline:hover {
background: var(--modern-primary);
color: var(--modern-white);
}
.modern-btn-outline-lg {
padding: 1rem 3rem;
font-size: 1.1rem;
}
/* Modern Section */
.modern-section {
padding: 4rem 0;
background: var(--modern-white);
}
.modern-section-gray {
background: var(--modern-light-gray);
}
.modern-section-header {
text-align: center;
margin-bottom: 3rem;
}
.modern-section-title {
font-family: 'Montserrat', sans-serif;
font-size: 2rem;
font-weight: 600;
color: var(--modern-text);
margin-bottom: 0.5rem;
}
.modern-section-subtitle {
font-size: 1.1rem;
color: var(--modern-text-light);
}
/* Modern Category Cards */
.modern-category-card {
display: flex;
flex-direction: column;
background: var(--modern-white);
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: var(--modern-shadow);
text-decoration: none;
height: 100%;
}
.modern-category-card:hover {
transform: translateY(-4px);
box-shadow: var(--modern-shadow-hover);
}
.modern-category-image {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
.modern-category-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.modern-category-card:hover .modern-category-image img {
transform: scale(1.05);
}
.modern-category-placeholder {
width: 100%;
height: 100%;
background: var(--modern-light-gray);
display: flex;
align-items: center;
justify-content: center;
color: var(--modern-text-muted);
font-size: 3rem;
}
.modern-category-content {
padding: 1.5rem;
text-align: center;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.modern-category-name {
font-family: 'Montserrat', sans-serif;
font-size: 1.1rem;
font-weight: 500;
color: var(--modern-text);
margin: 0;
width: 100%;
}
/* Modern Product Cards */
.modern-product-card {
background: var(--modern-white);
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: var(--modern-shadow);
position: relative;
}
.modern-product-card:hover {
box-shadow: var(--modern-shadow-hover);
transform: translateY(-4px);
}
.modern-discount-badge {
position: absolute;
top: 10px;
right: 10px;
background: #E74C3C;
color: var(--modern-white);
padding: 0.4rem 0.8rem;
font-size: 0.75rem;
font-weight: 600;
border-radius: 4px;
z-index: 10;
}
.modern-product-image-link {
display: block;
text-decoration: none;
}
.modern-product-image {
width: 100%;
height: 280px;
overflow: hidden;
background: var(--modern-light-gray);
position: relative;
}
.modern-product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.modern-product-card:hover .modern-product-image img {
transform: scale(1.05);
}
.modern-product-placeholder {
width: 100%;
height: 100%;
background: var(--modern-light-gray);
display: flex;
align-items: center;
justify-content: center;
color: var(--modern-text-muted);
font-size: 3rem;
}
.modern-product-info {
padding: 1.25rem;
}
.modern-product-name {
font-size: 1rem;
font-weight: 500;
color: var(--modern-text);
text-decoration: none;
display: block;
margin-bottom: 0.75rem;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.modern-product-name:hover {
color: var(--modern-primary);
}
.modern-product-price {
display: flex;
align-items: center;
gap: 0.75rem;
}
.modern-price-new {
font-size: 1.25rem;
font-weight: 600;
color: var(--modern-text);
}
.modern-price-old {
font-size: 1rem;
color: var(--modern-text-muted);
text-decoration: line-through;
}
.modern-price-current {
font-size: 1.25rem;
font-weight: 600;
color: var(--modern-text);
}
/* Modern Banner Cards */
.modern-banner-card {
position: relative;
border-radius: 8px;
overflow: hidden;
height: 300px;
box-shadow: var(--modern-shadow);
}
.modern-banner-image {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
.modern-banner-content {
position: relative;
z-index: 10;
padding: 2.5rem;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
background: linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent);
color: var(--modern-white);
}
.modern-banner-title {
font-family: 'Montserrat', sans-serif;
font-size: 1.75rem;
font-weight: 600;
margin-bottom: 1rem;
}
.modern-banner-desc {
font-size: 1.1rem;
margin-bottom: 1.5rem;
}
/* Modern Trust Section */
.modern-trust-section {
background: var(--modern-off-white);
padding: 3rem 0;
}
.modern-trust-item {
padding: 1.5rem;
}
.modern-trust-icon {
width: 60px;
height: 60px;
background: var(--modern-primary);
color: var(--modern-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin: 0 auto 1rem;
}
.modern-trust-title {
font-size: 1rem;
font-weight: 600;
color: var(--modern-text);
margin-bottom: 0.5rem;
}
.modern-trust-text {
font-size: 0.9rem;
color: var(--modern-text-light);
margin: 0;
}
/* Modern Newsletter Section */
.modern-newsletter-section {
background: var(--royal-gold-pink-gradient);
color: var(--modern-white);
padding: 4rem 0;
}
.modern-newsletter-title {
font-family: 'Montserrat', sans-serif;
font-size: 2rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.modern-newsletter-subtitle {
color: black;
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 2rem;
opacity: 0.9;
}
.modern-newsletter-form .input-group {
max-width: 500px;
margin: 0 auto;
}
.modern-newsletter-form .form-control {
border: none;
padding: 1rem 1.25rem;
font-size: 1rem;
border-radius: 4px 0 0 4px;
}
.modern-newsletter-form .form-control:focus {
box-shadow: none;
border-color: transparent;
}
.modern-newsletter-form .btn {
border-radius: 0 4px 4px 0;
padding: 1rem 2rem;
background: var(--modern-primary-dark);
border: none;
}
.modern-newsletter-form .btn:hover {
background: var(--modern-text);
}
/* Responsive Design */
@media (max-width: 768px) {
.modern-hero-img {
height: 350px;
}
.modern-hero-title {
font-size: 1.75rem;
}
.modern-section-title {
font-size: 1.5rem;
}
.modern-product-image {
height: 220px;
}
.modern-category-image {
height: 150px;
}
.modern-category-content {
padding: 1rem;
}
.modern-category-name {
font-size: 0.95rem;
}
.modern-banner-card {
height: 250px;
}
.modern-hero-actions {
flex-direction: column;
}
.modern-hero-actions .btn {
width: 100%;
text-align: center;
}
}
@media (max-width: 576px) {
.modern-hero-default {
padding: 3rem 0;
}
.modern-section {
padding: 2.5rem 0;
}
.modern-newsletter-section {
padding: 2.5rem 0;
}
.modern-category-image {
height: 130px;
}
.modern-category-content {
padding: 0.8rem;
}
.modern-category-name {
font-size: 0.85rem;
}
}
/* Vibrant Promotional Cards */
.vibrant-promo-card {
background: linear-gradient(135deg, var(--vibrant-purple) 0%, var(--vibrant-pink) 100%);
border-radius: 12px;
padding: 2rem;
color: white;
text-align: center;
box-shadow: 0 8px 24px rgba(157, 78, 221, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin-bottom: 1.5rem;
}
.vibrant-promo-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 32px rgba(157, 78, 221, 0.4);
}
.vibrant-promo-card h4 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.75rem;
}
.vibrant-promo-card p {
font-size: 1rem;
opacity: 0.95;
margin-bottom: 1rem;
}
.vibrant-promo-card.orange {
background: linear-gradient(135deg, var(--vibrant-orange) 0%, var(--vibrant-gold) 100%);
box-shadow: 0 8px 24px rgba(255, 133, 0, 0.3);
}
.vibrant-promo-card.blue {
background: linear-gradient(135deg, var(--vibrant-teal) 0%, var(--vibrant-blue) 100%);
box-shadow: 0 8px 24px rgba(76, 201, 240, 0.3);
}
.vibrant-promo-card.pink {
background: linear-gradient(135deg, var(--vibrant-pink) 0%, var(--vibrant-red) 100%);
box-shadow: 0 8px 24px rgba(255, 107, 157, 0.3);
}
/* Colorful Category Cards */
.modern-category-card {
position: relative;
overflow: hidden;
}
.modern-category-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--vibrant-pink), var(--vibrant-purple), var(--vibrant-blue));
transform: translateX(-100%);
transition: transform 0.5s ease;
}
.modern-category-card:hover::before {
transform: translateX(0);
}
/* Vibrant Discount Badges */
.modern-discount-badge {
background: linear-gradient(135deg, var(--vibrant-red) 0%, var(--vibrant-pink) 100%);
box-shadow: 0 4px 12px rgba(230, 57, 70, 0.4);
}
/* Colorful Feature Cards */
.colorful-feature {
background: linear-gradient(135deg, #F8F9FA 0%, #FFFFFF 100%);
border-radius: 12px;
padding: 2rem;
text-align: center;
border: 2px solid transparent;
transition: all 0.3s ease;
box-shadow: var(--modern-shadow);
}
.colorful-feature:hover {
border-color: var(--vibrant-purple);
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(157, 78, 221, 0.2);
}
.colorful-feature .icon {
width: 70px;
height: 70px;
margin: 0 auto 1.5rem;
background: linear-gradient(135deg, var(--vibrant-purple) 0%, var(--vibrant-pink) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
}
.colorful-feature:nth-child(2) .icon {
background: linear-gradient(135deg, var(--vibrant-blue) 0%, var(--vibrant-teal) 100%);
}
.colorful-feature:nth-child(3) .icon {
background: linear-gradient(135deg, var(--vibrant-orange) 0%, var(--vibrant-gold) 100%);
}
.colorful-feature:nth-child(4) .icon {
background: linear-gradient(135deg, var(--vibrant-green) 0%, var(--vibrant-teal) 100%);
}
/* Gradient Section Backgrounds */
.gradient-section-purple {
background: linear-gradient(180deg, #FFFFFF 0%, #F8F4FC 100%);
}
.gradient-section-blue {
background: linear-gradient(180deg, #FFFFFF 0%, #F0F9FF 100%);
}
.gradient-section-pink {
background: linear-gradient(180deg, #FFFFFF 0%, #FFF5F8 100%);
}
/* Animated Gradient Buttons */
.btn-gradient-animated {
background: linear-gradient(90deg, var(--vibrant-pink), var(--vibrant-purple), var(--vibrant-blue));
background-size: 200% auto;
color: white;
border: none;
padding: 0.875rem 2.5rem;
font-weight: 600;
border-radius: 50px;
transition: all 0.4s ease;
animation: gradient-shift 3s ease infinite;
}
.btn-gradient-animated:hover {
background-position: right center;
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(157, 78, 221, 0.4);
color: white;
}
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Colorful Trust Icons */
.modern-trust-icon {
background: linear-gradient(135deg, var(--vibrant-purple) 0%, var(--vibrant-pink) 100%);
}
.modern-trust-item:nth-child(2) .modern-trust-icon {
background: linear-gradient(135deg, var(--vibrant-blue) 0%, var(--vibrant-teal) 100%);
}
.modern-trust-item:nth-child(3) .modern-trust-icon {
background: linear-gradient(135deg, var(--vibrant-orange) 0%, var(--vibrant-gold) 100%);
}
.modern-trust-item:nth-child(4) .modern-trust-icon {
background: linear-gradient(135deg, var(--vibrant-green) 0%, var(--vibrant-teal) 100%);
}
/* ============================================
GOLDEN PRODUCT CARD DESIGN (CaratLane Style)
============================================ */
/* Golden gradient text */
.golden-gradient-text {
background: linear-gradient(135deg, #D4AF37 0%, #FFD700 50%, #F4E5AB 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
/* Redesigned Product Card - Golden Theme */
.modern-product-card {
background: #FFFFFF;
border-radius: 8px;
overflow: visible;
transition: all 0.3s ease;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
position: relative;
border: 1px solid #F0F0F0;
display: flex;
flex-direction: column;
height: 100%;
}
.modern-product-card:hover {
box-shadow: 0 8px 24px rgba(212, 175, 55, 0.15);
transform: translateY(-5px);
border-color: #D4AF37;
}
/* Golden Bestseller Badge */
.golden-badge {
position: absolute;
top: 12px;
left: 12px;
background: linear-gradient(135deg, #D4AF37 0%, #FFD700 100%);
color: #FFFFFF;
padding: 0.35rem 0.75rem;
font-size: 0.7rem;
font-weight: 700;
border-radius: 4px;
z-index: 10;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
text-transform: uppercase;
}
/* Discount Badge - Golden Style */
.modern-discount-badge {
background: linear-gradient(135deg, #D4AF37 0%, #FFD700 100%);
color: #FFFFFF;
box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
font-weight: 700;
letter-spacing: 0.5px;
}
/* Product Image Container */
.modern-product-image {
width: 100%;
height: 380px;
overflow: hidden;
background: #FAFAFA;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.modern-product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.modern-product-card:hover .modern-product-image img {
transform: scale(1.08);
}
/* Wishlist Heart Icon */
.product-wishlist-icon {
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
background: #FFFFFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
z-index: 10;
}
.product-wishlist-icon:hover {
background: #D4AF37;
color: #FFFFFF;
transform: scale(1.1);
}
.product-wishlist-icon i {
font-size: 1rem;
color: #999999;
}
.product-wishlist-icon:hover i {
color: #FFFFFF;
}
/* Product Info Section */
.modern-product-info {
padding: 1.25rem;
background: #FFFFFF;
flex: 1;
display: flex;
flex-direction: column;
}
/* Product Name with Golden Gradient */
.modern-product-name {
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
display: block;
margin-bottom: 0.5rem;
line-height: 1.4;
min-height: 2.8rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
transition: all 0.3s ease;
background: linear-gradient(135deg, #D4AF37 0%, #FFD700 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.modern-product-name:hover {
background: linear-gradient(135deg, #FFD700 0%, #F4E5AB 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transform: translateX(2px);
}
/* Product Meta Info */
.product-meta {
font-size: 0.8rem;
color: #999999;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.product-meta i {
color: #D4AF37;
font-size: 0.7rem;
}
/* Price Section - Golden Gradient */
.modern-product-price {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.75rem;
}
.modern-price-new {
font-size: 1.35rem;
font-weight: 700;
background: linear-gradient(135deg, #D4AF37 0%, #FFD700 50%, #F4E5AB 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.modern-price-old {
font-size: 0.95rem;
color: #BBBBBB;
text-decoration: line-through;
font-weight: 400;
}
.modern-price-current {
font-size: 1.35rem;
font-weight: 700;
background: linear-gradient(135deg, #D4AF37 0%, #FFD700 50%, #F4E5AB 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Product Rating */
.product-rating {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.85rem;
margin-top: 0.5rem;
}
.product-rating i {
color: #FFD700;
font-size: 0.75rem;
}
.product-rating span {
color: #666666;
margin-left: 0.25rem;
}
/* Add to Cart Button - Golden */
.product-cart-btn {
width: 100%;
background: linear-gradient(135deg, #D4AF37 0%, #FFD700 100%);
color: #FFFFFF;
border: none;
padding: 0.75rem;
font-weight: 600;
border-radius: 6px;
margin-top: 1rem;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 0.85rem;
}
.product-cart-btn:hover {
background: linear-gradient(135deg, #FFD700 0%, #D4AF37 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}
/* Section Title - Golden Gradient */
.modern-section-title {
background: linear-gradient(135deg, #D4AF37 0%, #FFD700 50%, #F4E5AB 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
/* Quick View Overlay */
.product-quick-view {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
padding: 1.5rem 1rem 1rem;
transform: translateY(100%);
transition: transform 0.3s ease;
display: flex;
justify-content: center;
gap: 0.75rem;
}
.modern-product-card:hover .product-quick-view {
transform: translateY(0);
}
.quick-view-btn {
background: #FFFFFF;
color: #D4AF37;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
font-size: 0.85rem;
transition: all 0.3s ease;
}
.quick-view-btn:hover {
background: #D4AF37;
color: #FFFFFF;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.modern-product-image {
height: 280px;
}
.modern-product-info {
padding: 0.85rem;
}
.modern-product-name {
font-size: 0.85rem;
min-height: 2.4rem;
line-height: 1.3;
margin-bottom: 0.4rem;
}
.product-meta {
font-size: 0.7rem;
gap: 0.3rem;
margin-bottom: 0.4rem;
flex-wrap: wrap;
}
.product-meta i {
font-size: 0.6rem;
}
.modern-product-price {
gap: 0.5rem;
margin-top: 0.5rem;
}
.modern-price-new,
.modern-price-current {
font-size: 1.1rem;
}
.modern-price-old {
font-size: 0.85rem;
}
.golden-badge {
font-size: 0.65rem;
padding: 0.3rem 0.6rem;
top: 8px;
left: 8px;
}
.modern-discount-badge {
font-size: 0.7rem;
padding: 0.35rem 0.7rem;
top: 8px;
right: 8px;
}
.product-wishlist-icon {
width: 32px;
height: 32px;
top: 8px;
right: 8px;
}
.product-wishlist-icon i {
font-size: 0.9rem;
}
}
@media (max-width: 576px) {
.modern-product-image {
height: 240px;
}
.modern-product-info {
padding: 0.75rem;
}
.modern-product-name {
font-size: 0.8rem;
min-height: 2.2rem;
line-height: 1.25;
}
.product-meta {
font-size: 0.65rem;
gap: 0.25rem;
}
.modern-price-new,
.modern-price-current {
font-size: 1rem;
}
.modern-price-old {
font-size: 0.8rem;
}
}
/* Pagination Styles */
.royal-pagination-container {
margin-top: 3rem;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.royal-pagination {
display: flex;
list-style: none;
padding: 0;
margin: 0;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
}
.royal-page-item {
display: inline-block;
}
.royal-page-link {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0.5rem 0.75rem;
background: var(--royal-off-white);
color: var(--royal-charcoal);
border: 2px solid transparent;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}
.royal-page-link:hover {
background: linear-gradient(135deg, #D4AF37 0%, #FFD700 100%);
color: #FFFFFF;
border-color: #D4AF37;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}
.royal-page-item.active .royal-page-link {
background: linear-gradient(135deg, #D4AF37 0%, #FFD700 100%);
color: #FFFFFF;
border-color: #D4AF37;
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}
.royal-page-item.disabled .royal-page-link {
background: var(--royal-off-white);
color: #CCCCCC;
cursor: not-allowed;
opacity: 0.5;
}
.royal-page-item.disabled .royal-page-link:hover {
background: var(--royal-off-white);
color: #CCCCCC;
transform: none;
box-shadow: none;
}
.royal-page-info {
font-size: 0.9rem;
color: var(--royal-charcoal);
text-align: center;
padding: 0.5rem 1rem;
background: var(--royal-off-white);
border-radius: 20px;
}
/* Mobile Pagination */
@media (max-width: 768px) {
.royal-pagination {
gap: 0.25rem;
}
.royal-page-link {
min-width: 36px;
height: 36px;
padding: 0.4rem 0.6rem;
font-size: 0.9rem;
}
.royal-page-info {
font-size: 0.85rem;
padding: 0.4rem 0.8rem;
}
}
@media (max-width: 576px) {
.royal-pagination {
gap: 0.15rem;
}
.royal-page-link {
min-width: 32px;
height: 32px;
padding: 0.3rem 0.5rem;
font-size: 0.85rem;
}
}
/* ========================================
Modern Product Detail Page Styles
======================================== */
/* Modern Image Grid Layout */
.royal-product-gallery-modern {
position: relative;
}
.royal-image-grid {
border-radius: 12px;
overflow: hidden;
}
.royal-grid-image-container {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.royal-grid-image-container.royal-grid-large {
aspect-ratio: 16 / 9;
}
.royal-grid-image-container:hover {
transform: scale(1.02);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.royal-grid-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.royal-grid-image-container:hover .royal-grid-image {
transform: scale(1.05);
}
.royal-grid-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
color: white;
font-size: 1.5rem;
}
.royal-grid-image-container:hover .royal-grid-overlay {
opacity: 1;
}
.royal-more-images-badge {
position: absolute;
bottom: 15px;
right: 15px;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
z-index: 10;
}
.royal-single-image-modern {
border-radius: 12px;
overflow: hidden;
}
/* Thumbnail Strip */
.royal-thumbnail-strip {
margin-top: 15px;
}
.royal-thumbnail-scroll {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 5px 0;
}
.royal-thumbnail-scroll::-webkit-scrollbar {
height: 6px;
}
.royal-thumbnail-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.royal-thumbnail-scroll::-webkit-scrollbar-thumb {
background: var(--royal-gold);
border-radius: 10px;
}
.royal-thumbnail-item {
flex-shrink: 0;
width: 80px;
height: 80px;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.3s ease;
}
.royal-thumbnail-item:hover {
border-color: var(--royal-gold);
transform: translateY(-2px);
}
.royal-thumbnail-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Modern Product Details */
.royal-product-details-modern {
position: sticky;
top: 100px;
}
.royal-product-header-modern {
margin-bottom: 2rem;
}
.royal-category-badge-modern {
display: inline-block;
background: linear-gradient(135deg, var(--royal-gold), var(--royal-gold-dark));
color: white;
padding: 0.4rem 1rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1rem;
}
.royal-product-detail-title-modern {
font-family: var(--font-accent);
font-size: 2rem;
font-weight: 700;
color: var(--royal-black);
margin-bottom: 1rem;
line-height: 1.3;
}
/* Modern Price Styling */
.royal-product-price-modern {
padding: 1.5rem;
background: linear-gradient(135deg, var(--royal-off-white), var(--royal-cream));
border-radius: 12px;
border-left: 4px solid var(--royal-gold);
margin-bottom: 1.5rem;
}
.royal-price-main-modern {
font-family: var(--font-accent);
font-size: 2.5rem;
font-weight: 700;
background: var(--royal-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
}
.royal-price-original-modern {
font-size: 1.25rem;
color: #999;
text-decoration: line-through;
}
.royal-discount-badge-modern {
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
padding: 0.3rem 0.8rem;
border-radius: 15px;
font-size: 0.875rem;
font-weight: 600;
}
.royal-discount-timer-modern {
color: #e74c3c;
font-weight: 500;
}
/* Modern Badges */
.royal-product-badges-modern {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.royal-badge-modern {
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
display: inline-flex;
align-items: center;
}
.royal-badge-special {
background: linear-gradient(135deg, var(--royal-purple), var(--royal-purple-dark));
color: white;
}
.royal-badge-bulk {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
}
/* Product Highlights */
.royal-product-highlights-modern {
background: white;
padding: 1.5rem;
border-radius: 12px;
box-shadow: var(--royal-shadow);
margin-bottom: 1.5rem;
}
.royal-section-subtitle-modern {
font-family: var(--font-accent);
font-size: 1.1rem;
font-weight: 600;
color: var(--royal-black);
margin-bottom: 1rem;
display: flex;
align-items: center;
}
.royal-highlights-list {
list-style: none;
padding: 0;
margin: 0;
}
.royal-highlights-list li {
padding: 0.75rem 0;
border-bottom: 1px solid var(--royal-cream);
}
.royal-highlights-list li:last-child {
border-bottom: none;
}
/* Product Options (Fit & Size, Variants) */
.royal-product-options-modern {
background: white;
padding: 1.25rem;
border-radius: 12px;
box-shadow: var(--royal-shadow);
}
.royal-product-options-modern label {
color: var(--royal-black);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
}
.royal-select-modern {
border: 2px solid var(--royal-gold-light);
border-radius: 8px;
padding: 0.75rem 1rem;
font-size: 1rem;
transition: all 0.3s ease;
background: white;
}
.royal-select-modern:focus {
border-color: var(--royal-gold);
box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
outline: none;
}
.royal-option-text {
padding: 0.75rem 1rem;
background: var(--royal-cream);
border-radius: 8px;
color: var(--royal-charcoal);
font-weight: 500;
}
/* Modern Add to Cart */
.royal-add-to-cart-modern {
background: white;
padding: 1.5rem;
border-radius: 12px;
box-shadow: var(--royal-shadow);
margin-bottom: 1.5rem;
}
.royal-quantity-modern {
margin-bottom: 1rem;
}
.royal-quantity-control {
display: flex;
align-items: center;
gap: 10px;
}
.royal-qty-btn {
width: 40px;
height: 40px;
border: 2px solid var(--royal-gold);
background: white;
color: var(--royal-gold);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.royal-qty-btn:hover {
background: var(--royal-gold);
color: white;
}
.royal-qty-input {
width: 80px;
height: 40px;
text-align: center;
border: 2px solid var(--royal-cream);
border-radius: 8px;
font-weight: 600;
font-size: 1.1rem;
}
.royal-btn-primary-modern {
width: 100%;
padding: 1rem;
background: var(--royal-gradient);
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
}
.royal-btn-primary-modern:hover {
background: var(--royal-gradient-reverse);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(212, 175, 55, 0.3);
color: white;
}
.royal-btn-outline-modern {
width: 100%;
padding: 1rem;
background: white;
color: var(--royal-gold);
border: 2px solid var(--royal-gold);
border-radius: 8px;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
text-align: center;
text-decoration: none;
display: inline-block;
}
.royal-btn-outline-modern:hover {
background: var(--royal-gold);
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(212, 175, 55, 0.2);
}
.royal-btn-block {
width: 100%;
}
/* Trust Badges */
.royal-trust-badges-modern {
display: flex;
justify-content: space-around;
padding: 1.5rem;
background: linear-gradient(135deg, var(--royal-off-white), white);
border-radius: 12px;
margin-bottom: 1.5rem;
}
.royal-trust-item {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.royal-trust-item i {
font-size: 1.5rem;
}
.royal-trust-item span {
font-size: 0.75rem;
font-weight: 500;
color: var(--royal-charcoal);
}
/* Auth Prompt Modern */
.royal-auth-prompt-modern {
background: white;
padding: 1.5rem;
border-radius: 12px;
box-shadow: var(--royal-shadow);
margin-bottom: 1.5rem;
}
/* Management Modern */
.royal-management-modern {
background: white;
padding: 1rem;
border-radius: 12px;
box-shadow: var(--royal-shadow);
}
/* Product Description Modern */
.royal-product-description-modern {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: var(--royal-shadow);
}
.royal-section-title-modern {
font-family: var(--font-accent);
font-size: 1.75rem;
font-weight: 700;
color: var(--royal-black);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
}
.royal-description-content-modern {
color: var(--royal-charcoal);
line-height: 1.8;
font-size: 1rem;
}
/* Image Modal */
.royal-image-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
}
.royal-modal-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
}
.royal-modal-content {
position: relative;
max-width: 90%;
max-height: 90%;
z-index: 10001;
}
.royal-modal-content img {
max-width: 100%;
max-height: 90vh;
border-radius: 8px;
}
.royal-modal-close {
position: absolute;
top: -50px;
right: 0;
background: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
color: var(--royal-black);
font-size: 1.5rem;
cursor: pointer;
transition: all 0.3s ease;
}
.royal-modal-close:hover {
background: var(--royal-gold);
color: white;
}
/* Responsive Adjustments */
@media (max-width: 991px) {
.royal-product-details-modern {
position: static;
margin-top: 2rem;
}
.royal-product-detail-title-modern {
font-size: 1.5rem;
}
.royal-price-main-modern {
font-size: 2rem;
}
}
@media (max-width: 767px) {
.royal-grid-image-container {
aspect-ratio: 1 / 1;
}
.royal-product-detail-title-modern {
font-size: 1.25rem;
}
.royal-price-main-modern {
font-size: 1.75rem;
}
.royal-trust-badges-modern {
flex-direction: column;
gap: 1rem;
}
.royal-trust-item {
flex-direction: row;
justify-content: center;
gap: 1rem;
}
}
/* ========================================
FOOTER ADVERTISEMENT SECTION - OVERLAY STYLE
======================================== */
.footer-advertisement-section {
margin: 4rem 0 0 0;
padding: 4vh;
}
/* Advertisement Container with Image Background */
.footer-split-ad {
position: relative;
min-height: 400px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
overflow: hidden;
margin-bottom: 2rem;
}
/* Overlay for better text readability */
.footer-split-ad::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 1;
}
/* Text Content Overlay - Default (Right Side) */
.footer-split-ad .footer-ad-content {
position: relative;
z-index: 2;
padding: 4rem 3rem;
max-width: 50%;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
margin-left: auto;
margin-right: 3rem;
}
/* Text Content on Left Side (for even numbered ads) */
.footer-split-ad.text-left .footer-ad-content {
margin-left: 3rem;
margin-right: auto;
}
.footer-ad-main-title {
font-family: var(--font-primary);
font-size: 3rem;
font-weight: 700;
color: white;
margin-bottom: 1.5rem;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.footer-ad-description {
font-family: var(--font-secondary);
font-size: 1.1rem;
color: white;
margin-bottom: 2rem;
line-height: 1.6;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.footer-ad-cta {
display: inline-block;
padding: 12px 32px;
background: var(--royal-gradient);
color: white;
text-decoration: none;
font-family: var(--font-secondary);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 4px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}
.footer-ad-cta:hover {
background: var(--royal-gradient-reverse);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
color: white;
}
/* Image Link (for clickability) */
.footer-ad-image-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}
/* Hover Effect */
.footer-split-ad:hover::before {
background: rgba(0, 0, 0, 0.4);
}
/* Responsive Design */
@media (max-width: 991px) {
.footer-split-ad {
min-height: 350px;
}
.footer-ad-content {
max-width: 60%;
margin-left: 2rem;
padding: 3rem 2rem;
}
.footer-ad-main-title {
font-size: 2.5rem;
}
}
@media (max-width: 768px) {
.footer-split-ad {
min-height: 300px;
}
.footer-ad-content {
max-width: 70%;
margin-left: 1.5rem;
padding: 2rem 1.5rem;
}
.footer-ad-main-title {
font-size: 2rem;
}
.footer-ad-description {
font-size: 1rem;
}
}
@media (max-width: 576px) {
.footer-split-ad {
min-height: 250px;
}
.footer-ad-content {
max-width: 80%;
margin-left: 1rem;
padding: 1.5rem 1rem;
background: rgba(255, 255, 255, 0.25);
}
.footer-ad-main-title {
font-size: 1.5rem;
letter-spacing: 1px;
}
.footer-ad-description {
font-size: 0.9rem;
margin-bottom: 1.5rem;
}
.footer-ad-cta {
padding: 10px 24px;
font-size: 0.85rem;
}
}
/* ========================================
PRODUCT DETAIL IMAGE CAROUSEL
======================================== */
/* Product Gallery Carousel Container */
.royal-product-gallery-carousel {
position: relative;
}
/* Main Image Container */
.royal-main-image-container {
position: relative;
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
/* Main Image Wrapper */
.royal-main-image-wrapper {
position: relative;
width: 100%;
aspect-ratio: 1;
cursor: zoom-in;
overflow: hidden;
background: #f8f9fa;
}
/* Main Product Image */
.royal-main-image {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.3s ease;
}
.royal-main-image-wrapper:hover .royal-main-image {
transform: scale(1.05);
}
/* Zoom Hint */
.royal-zoom-hint {
position: absolute;
bottom: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.85rem;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
display: flex;
align-items: center;
gap: 8px;
}
.royal-main-image-wrapper:hover .royal-zoom-hint {
opacity: 1;
}
/* Image Navigation Buttons */
.royal-image-navigation {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
padding: 0 10px;
z-index: 10;
pointer-events: none;
}
.royal-nav-btn {
background: rgba(255, 255, 255, 0.9);
border: none;
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
pointer-events: auto;
color: var(--royal-black);
}
.royal-nav-btn:hover {
background: var(--royal-gradient);
color: white;
transform: scale(1.1);
}
.royal-nav-btn i {
font-size: 1.2rem;
}
/* Image Counter */
.royal-image-counter {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 6px 14px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
z-index: 5;
}
/* Thumbnail Carousel */
.royal-thumbnail-carousel {
margin-top: 15px;
}
.royal-thumbnail-track {
display: flex;
gap: 12px;
overflow-x: auto;
padding-bottom: 10px;
scroll-behavior: smooth;
}
.royal-thumbnail-track::-webkit-scrollbar {
height: 6px;
}
.royal-thumbnail-track::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.royal-thumbnail-track::-webkit-scrollbar-thumb {
background: var(--royal-gold);
border-radius: 10px;
}
.royal-thumbnail-track::-webkit-scrollbar-thumb:hover {
background: var(--royal-gold-dark);
}
/* Thumbnail Wrapper */
.royal-thumbnail-wrapper {
flex-shrink: 0;
width: 80px;
height: 80px;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
border: 3px solid transparent;
transition: all 0.3s ease;
position: relative;
}
.royal-thumbnail-wrapper::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0);
transition: background 0.3s ease;
pointer-events: none;
}
.royal-thumbnail-wrapper:hover::after {
background: rgba(0, 0, 0, 0.1);
}
.royal-thumbnail-wrapper.active {
border-color: var(--royal-gold);
box-shadow: 0 0 0 1px var(--royal-gold);
}
.royal-thumbnail-image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Responsive Design */
@media (max-width: 991px) {
.royal-main-image-wrapper {
aspect-ratio: 4/3;
}
.royal-nav-btn {
width: 40px;
height: 40px;
}
.royal-nav-btn i {
font-size: 1rem;
}
}
@media (max-width: 768px) {
.royal-thumbnail-wrapper {
width: 70px;
height: 70px;
}
.royal-zoom-hint {
font-size: 0.75rem;
padding: 6px 12px;
}
}
@media (max-width: 576px) {
.royal-main-image-wrapper {
aspect-ratio: 1;
}
.royal-nav-btn {
width: 35px;
height: 35px;
}
.royal-nav-btn i {
font-size: 0.9rem;
}
.royal-thumbnail-wrapper {
width: 60px;
height: 60px;
}
}
/* ========================================
BULK ORDER SAMPLE NOTICE
======================================== */
.royal-bulk-sample-notice {
background: linear-gradient(135deg, #9966CC 0%, #663399 100%);
color: white;
padding: 12px 20px;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 500;
display: flex;
align-items: center;
box-shadow: 0 4px 15px rgba(153, 102, 204, 0.3);
animation: pulseGlow 2s ease-in-out infinite;
}
.royal-bulk-sample-notice i {
font-size: 1.1rem;
}
@keyframes pulseGlow {
0%, 100% {
box-shadow: 0 4px 15px rgba(153, 102, 204, 0.3);
}
50% {
box-shadow: 0 4px 25px rgba(153, 102, 204, 0.5);
}
}
@media (max-width: 576px) {
.royal-bulk-sample-notice {
font-size: 0.85rem;
padding: 10px 16px;
}
}
/* ========================================
ADVERTISEMENT TICKER BANNER
======================================== */
.royal-ad-ticker-banner {
background: linear-gradient(135deg, #1A1A1A 0%, #2C2C2C 100%);
color: white;
padding: 4px 0;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1050;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.royal-ad-ticker-content {
text-align: center;
font-size: 0.85rem;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
line-height: 1.2;
}
.royal-ad-ticker-content i {
color: var(--royal-gold);
animation: pulse 2s ease-in-out infinite;
}
#tickerText {
transition: opacity 0.3s ease;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
/* Adjust body and navbar for ticker banner */
body {
padding-top: 0px; /* Ticker height (~26px) + Navbar height (~80px) + small buffer */
}
.royal-navbar.fixed-top {
top: 26px; /* Position below ticker - no gap */
}
@media (max-width: 768px) {
.royal-ad-ticker-banner {
padding: 3px 0;
}
.royal-ad-ticker-content {
font-size: 0.8rem;
}
body {
padding-top: 0px;
}
.royal-navbar.fixed-top {
top: 24px;
}
}
@media (max-width: 576px) {
.royal-ad-ticker-banner {
padding: 3px 0;
}
.royal-ad-ticker-content {
font-size: 0.75rem;
}
body {
padding-top: 0px;
}
.royal-navbar.fixed-top {
top: 22px;
}
}
/* ============================================
Natural Beads Collection Section
============================================ */
.natural-beads-3d-section {
background: linear-gradient(135deg, #2a2416 0%, #3d3420 50%, #4a3f1a 100%);
padding: 80px 0;
}
.beads-3d-container {
position: relative;
}
.beads-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
opacity: 0.15;
}
.floating-bead {
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
}
.floating-bead img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.floating-bead.bead-1 { top: 10%; left: 5%; }
.floating-bead.bead-2 { top: 60%; left: 10%; width: 50px; height: 50px; }
.floating-bead.bead-3 { top: 25%; right: 15%; width: 70px; height: 70px; }
.floating-bead.bead-4 { bottom: 20%; right: 8%; }
.floating-bead.bead-5 { top: 40%; left: 3%; width: 45px; height: 45px; }
.floating-bead.bead-6 { bottom: 15%; left: 25%; width: 55px; height: 55px; }
.beads-3d-content {
padding-right: 30px;
}
.beads-subtitle {
color: var(--royal-gold);
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
margin-bottom: 15px;
display: block;
}
.beads-3d-title {
font-family: 'Playfair Display', serif;
font-size: 3.5rem;
font-weight: 700;
color: white;
margin-bottom: 20px;
line-height: 1.2;
}
.gradient-text {
background: linear-gradient(45deg, var(--royal-gold), #ffd700);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.beads-description {
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.7;
margin-bottom: 30px;
}
.beads-features {
display: flex;
gap: 25px;
margin-bottom: 35px;
flex-wrap: wrap;
}
.feature-item {
display: flex;
align-items: center;
gap: 8px;
color: white;
font-weight: 500;
font-size: 0.95rem;
}
.feature-item i {
color: var(--royal-gold);
font-size: 1.2rem;
}
.beads-cta-btn {
background: linear-gradient(45deg, var(--royal-gold), #ffd700);
color: var(--royal-black);
border: none;
padding: 14px 35px;
font-size: 1.05rem;
font-weight: 600;
border-radius: 50px;
display: inline-flex;
align-items: center;
gap: 12px;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
}
.beads-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(212, 175, 55, 0.5);
color: var(--royal-black);
}
.beads-cta-btn i {
transition: transform 0.3s ease;
}
.beads-cta-btn:hover i {
transform: translateX(5px);
}
/* Gallery Section */
.beads-gallery {
position: relative;
}
.beads-main-image {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
margin-bottom: 20px;
}
.beads-main-image a {
display: block;
position: relative;
}
.bead-img-main {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform 0.5s ease;
}
.beads-main-image a:hover .bead-img-main {
transform: scale(1.05);
}
.beads-mini-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.beads-mini-gallery a {
display: block;
text-decoration: none;
}
.bead-img-mini {
width: 100%;
height: 100px;
object-fit: cover;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.beads-mini-gallery a:hover .bead-img-mini {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4);
}
/* Responsive Design */
@media (max-width: 992px) {
.beads-3d-title {
font-size: 2.8rem;
}
.beads-3d-content {
padding-right: 0;
margin-bottom: 40px;
}
.bead-img-main {
height: 350px;
}
}
@media (max-width: 768px) {
.natural-beads-3d-section {
padding: 50px 0;
}
.beads-3d-title {
font-size: 2.2rem;
}
.beads-description {
font-size: 1rem;
}
.bead-img-main {
height: 300px;
}
.beads-mini-gallery {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.beads-features {
gap: 15px;
}
}
/* ============================================
Rings Collection Section
============================================ */
.rings-collection-section {
background: linear-gradient(135deg, #7b4397 0%, #dc2430 100%);
padding: 60px 0;
margin: 40px 0;
}
.rings-promo-banner {
background: linear-gradient(90deg, rgba(123, 67, 151, 0.9) 0%, rgba(220, 36, 48, 0.9) 100%);
padding: 40px;
border-radius: 20px;
text-align: center;
margin-bottom: 40px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.promo-tagline {
color: var(--royal-gold);
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 2px;
display: block;
margin-bottom: 10px;
}
.promo-title {
color: white;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 5px;
font-family: 'Cinzel', serif;
}
.promo-subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
margin-bottom: 20px;
}
.promo-shop-btn {
background: white;
color: #7b4397;
padding: 12px 30px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
display: inline-block;
transition: all 0.3s ease;
font-size: 0.9rem;
letter-spacing: 1px;
}
.promo-shop-btn:hover {
background: var(--royal-gold);
color: var(--royal-black);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(212, 175, 55, 0.4);
}
.rings-showcase-container {
position: relative;
padding: 0 15px;
}
.rings-showcase-scroll {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-behavior: smooth;
padding-bottom: 20px;
-webkit-overflow-scrolling: touch;
}
.rings-showcase-scroll::-webkit-scrollbar {
height: 8px;
}
.rings-showcase-scroll::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
.rings-showcase-scroll::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 10px;
}
.rings-showcase-scroll::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}
.ring-product-item {
flex: 0 0 280px;
min-width: 280px;
}
.ring-product-card {
background: white;
border-radius: 15px;
overflow: hidden;
text-decoration: none;
display: block;
transition: all 0.3s ease;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
height: 100%;
}
.ring-product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);
}
.ring-product-image {
width: 100%;
height: 250px;
background: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.ring-product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.ring-product-card:hover .ring-product-image img {
transform: scale(1.1);
}
.ring-product-info {
padding: 20px;
text-align: center;
}
.ring-product-name {
color: var(--royal-black);
font-size: 1rem;
font-weight: 600;
margin-bottom: 10px;
}
.ring-product-price {
color: #7b4397;
font-size: 1.2rem;
font-weight: 700;
margin: 0;
}
.ring-product-price .original-price {
text-decoration: line-through;
color: #999;
font-size: 0.9rem;
margin-right: 8px;
}
.ring-product-price .discounted-price {
color: #7b4397;
font-size: 1.2rem;
font-weight: 700;
}
.rings-view-all-btn {
background: white;
color: #7b4397;
padding: 15px 50px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
display: inline-block;
transition: all 0.3s ease;
font-size: 1.1rem;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.rings-view-all-btn:hover {
background: var(--royal-gold);
color: var(--royal-black);
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4);
}
@media (max-width: 768px) {
.promo-title {
font-size: 2rem;
}
.ring-product-image {
height: 200px;
}
.rings-promo-banner {
padding: 30px 20px;
}
}
/* ============================================
Filter Toggle Button
============================================ */
.filter-toggle-btn {
background: linear-gradient(135deg, var(--royal-gold), #ffd700);
color: var(--royal-black);
border: none;
padding: 12px 20px;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
transition: all 0.3s ease;
}
.filter-toggle-btn:hover {
background: linear-gradient(135deg, #ffd700, var(--royal-gold));
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}
/* Hide filters by default on mobile */
@media (max-width: 991px) {
#filterContent,
.royal-filter-tabs-container.d-none.d-lg-block {
display: none !important;
}
#filterContent.show-filters,
.royal-filter-tabs-container.d-none.d-lg-block.show-filters {
display: block !important;
animation: slideDown 0.3s ease-out;
}
}
/* Always show filters on desktop */
@media (min-width: 992px) {
#filterContent,
.royal-filter-tabs-container.d-none.d-lg-block {
display: block !important;
}
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================
Sticky Search Bar
============================================ */
.sticky-search-bar {
position: fixed;
top: -100px;
left: 0;
right: 0;
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(255, 255, 255, 0.95) 100%);
backdrop-filter: blur(20px);
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
padding: 10px 0;
z-index: 1040;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}
.sticky-search-bar::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--royal-gold) 50%,
transparent 100%);
opacity: 0.4;
}
.sticky-search-bar.show {
top: 40px; /* Position below the ticker banner (40px height) */
}
@media (max-width: 768px) {
.sticky-search-bar.show {
top: 35px; /* Adjust for smaller ticker on mobile */
}
}
@media (max-width: 576px) {
.sticky-search-bar.show {
top: 30px; /* Adjust for even smaller ticker on small mobile */
}
/* Mobile cart icon fix */
.sticky-search-bar .nav-link-sticky {
font-size: 1.1rem;
padding: 6px 8px;
min-width: 40px;
text-align: center;
}
.sticky-search-bar .nav-link-sticky .badge {
font-size: 0.65rem !important;
padding: 0.2rem 0.4rem !important;
top: -5px !important;
left: 50% !important;
min-width: 18px;
}
.sticky-search-bar .container {
padding-left: 8px;
padding-right: 8px;
}
.search-input-wrapper {
padding: 6px 12px;
}
.search-input {
font-size: 0.85rem;
}
.search-btn {
font-size: 0.8rem;
padding: 5px 10px;
}
.royal-logo-img {
width: 38px;
height: 38px;
}
.logo-text {
font-size: 0.9rem;
}
}
@media (max-width: 768px) {
/* Sticky search bar mobile adjustments */
.sticky-search-bar .container {
padding-left: 10px;
padding-right: 10px;
}
.search-input-wrapper {
padding: 6px 14px;
}
.search-input {
font-size: 0.9rem;
}
.search-btn {
font-size: 0.85rem;
padding: 6px 12px;
}
.sticky-search-bar .nav-link-sticky {
font-size: 1.2rem;
padding: 6px 10px;
}
.sticky-search-bar .nav-link-sticky .badge {
font-size: 0.7rem !important;
padding: 0.25rem 0.45rem !important;
}
.royal-logo-img {
width: 42px;
height: 42px;
}
.logo-text {
font-size: 1rem;
}
}
.search-form-sticky {
display: flex;
align-items: center;
}
.search-input-wrapper {
display: flex;
align-items: center;
background: linear-gradient(145deg, #ffffff 0%, #fafafa 100%);
border-radius: 60px;
padding: 4px 8px 4px 20px;
flex: 1;
max-width: 500px;
border: 2px solid rgba(212, 175, 55, 0.3);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.06),
inset 0 1px 2px rgba(255, 255, 255, 0.8);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.search-input-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(145deg,
rgba(212, 175, 55, 0.1) 0%,
rgba(255, 255, 255, 0) 50%,
rgba(212, 175, 55, 0.05) 100%);
border-radius: 60px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.search-input-wrapper::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 30%,
rgba(212, 175, 55, 0.15) 50%,
transparent 70%
);
animation: shimmer-slide 3s infinite;
opacity: 0;
transition: opacity 0.3s ease;
}
@keyframes shimmer-slide {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.search-input-wrapper:hover {
border-color: rgba(212, 175, 55, 0.5);
box-shadow:
0 4px 16px rgba(212, 175, 55, 0.15),
inset 0 1px 2px rgba(255, 255, 255, 0.8);
}
.search-input-wrapper:hover::before {
opacity: 1;
}
.search-input-wrapper:hover::after {
opacity: 1;
}
.search-input-wrapper:focus-within {
border-color: var(--royal-gold);
box-shadow:
0 6px 24px rgba(212, 175, 55, 0.25),
0 0 0 4px rgba(212, 175, 55, 0.1),
inset 0 1px 2px rgba(255, 255, 255, 0.9);
transform: translateY(-1px);
}
.search-input-wrapper:focus-within::before {
opacity: 1;
}
.search-input-wrapper:focus-within::after {
opacity: 0.6;
}
.search-input-wrapper .search-icon {
color: var(--royal-gold);
margin-right: 12px;
font-size: 1.1rem;
transition: all 0.3s ease;
z-index: 1;
}
.search-input-wrapper:focus-within .search-icon {
transform: scale(1.05);
color: var(--royal-gold);
}
.search-input {
border: none;
background: transparent;
outline: none;
flex: 1;
font-size: 0.95rem;
padding: 8px 4px;
color: var(--royal-black);
font-weight: 500;
z-index: 1;
}
.search-input::placeholder {
color: #888;
font-weight: 400;
transition: color 0.3s ease;
}
.search-input:focus::placeholder {
color: #aaa;
}
.search-btn {
background: linear-gradient(135deg, var(--royal-gold) 0%, #c9a02c 100%);
color: white;
border: none;
padding: 8px 24px;
border-radius: 50px;
font-weight: 600;
font-size: 0.9rem;
margin-left: 6px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 2px 8px rgba(212, 175, 55, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
position: relative;
overflow: hidden;
z-index: 1;
}
.search-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
transform: translate(-50%, -50%);
transition: width 0.5s ease, height 0.5s ease;
}
.search-btn:hover::before {
width: 200px;
height: 200px;
}
.search-btn:hover {
background: linear-gradient(135deg, #c9a02c 0%, var(--royal-gold) 100%);
transform: scale(1.02);
box-shadow:
0 4px 14px rgba(212, 175, 55, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.search-btn:active {
transform: scale(0.98);
box-shadow:
0 1px 4px rgba(212, 175, 55, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.nav-link-sticky {
color: var(--royal-black);
font-size: 1.3rem;
padding: 8px 12px;
transition: color 0.3s ease;
}
.nav-link-sticky:hover {
color: var(--royal-gold);
}
.logo-text {
font-family: var(--font-accent);
font-weight: 700;
font-size: 1.2rem;
}
/* Navbar scroll behavior */
#mainNavbar {
transition: top 0.3s ease;
}
#mainNavbar.hide-navbar {
top: -150px;
}
/* Search bar in main navbar */
.navbar-search-form .input-group-text {
border-right: 0;
}
.navbar-search-form .form-control {
border-left: 0;
}
.navbar-search-form .form-control:focus {
box-shadow: none;
border-color: #dee2e6;
}
.navbar-search-form .btn-outline-secondary {
border-color: var(--royal-gold);
color: var(--royal-gold);
}
.navbar-search-form .btn-outline-secondary:hover {
background: var(--royal-gold);
color: white;
}
/* Mobile responsive */
@media (max-width: 991px) {
.search-form-sticky {
max-width: none;
}
.search-input-wrapper {
padding: 6px 15px;
}
.search-btn {
padding: 6px 16px;
font-size: 0.9rem;
}
.logo-text {
display: none;
}
.sticky-search-bar .royal-logo-img {
width: 40px;
height: 40px;
}
}
/* ===================================
Designer Showcase Promo Section
=================================== */
.designer-showcase-promo {
background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.designer-showcase-promo::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.designer-promo-content {
padding: 20px;
}
.designer-promo-tag {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--royal-gradient);
color: white;
padding: 8px 20px;
border-radius: 30px;
font-family: var(--font-accent);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}
.designer-promo-tag i {
font-size: 1rem;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.designer-promo-title {
font-family: var(--font-primary);
font-size: 3rem;
font-weight: 700;
color: var(--royal-black);
margin-bottom: 20px;
line-height: 1.2;
}
.designer-promo-title .text-gold {
background: var(--royal-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.designer-promo-desc {
font-family: var(--font-secondary);
font-size: 1.1rem;
color: #555;
line-height: 1.8;
margin-bottom: 30px;
}
.designer-promo-features {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 30px;
}
.promo-feature {
display: flex;
align-items: center;
gap: 10px;
background: white;
padding: 12px 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.promo-feature:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}
.promo-feature i {
color: var(--royal-gold);
font-size: 1.3rem;
}
.promo-feature span {
font-family: var(--font-secondary);
font-size: 0.95rem;
font-weight: 600;
color: var(--royal-charcoal);
}
.designer-promo-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: var(--royal-gradient);
color: white;
padding: 14px 32px;
border-radius: 50px;
font-family: var(--font-accent);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
border: none;
box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.designer-promo-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.designer-promo-btn:hover::before {
left: 100%;
}
.designer-promo-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(212, 175, 55, 0.4);
color: white;
}
.designer-promo-btn i {
transition: transform 0.3s ease;
}
.designer-promo-btn:hover i {
transform: translateX(5px);
}
.designer-promo-visual {
padding: 20px;
position: relative;
}
.promo-image-wrapper {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
transition: all 0.4s ease;
}
.promo-image-wrapper:hover {
transform: scale(1.02);
box-shadow: 0 25px 80px rgba(212, 175, 55, 0.3);
}
.promo-main-image {
width: 100%;
height: auto;
display: block;
border-radius: 20px;
}
.promo-badge {
position: absolute;
top: 30px;
right: 30px;
background: var(--royal-gradient);
color: white;
padding: 20px;
border-radius: 50%;
width: 100px;
height: 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.5);
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.promo-badge i {
font-size: 1.8rem;
margin-bottom: 5px;
}
.promo-badge span {
font-family: var(--font-accent);
font-size: 0.7rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.5px;
}
/* Responsive Design */
@media (max-width: 991px) {
.designer-showcase-promo {
padding: 60px 0;
}
.designer-promo-title {
font-size: 2.2rem;
}
.designer-promo-desc {
font-size: 1rem;
}
.designer-promo-features {
justify-content: center;
}
.designer-promo-visual {
margin-top: 40px;
}
.promo-badge {
width: 80px;
height: 80px;
padding: 15px;
top: 20px;
right: 20px;
}
.promo-badge i {
font-size: 1.4rem;
}
.promo-badge span {
font-size: 0.6rem;
}
}
@media (max-width: 576px) {
.designer-promo-title {
font-size: 1.8rem;
}
.designer-promo-features {
flex-direction: column;
}
.promo-feature {
width: 100%;
}
.designer-promo-btn {
width: 100%;
justify-content: center;
}
}
/* Bulk Order Banner */
.bulk-order-banner {
/* background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); */
color: white;
/* padding: 12px 20px; */
border-radius: 8px;
display: flex;
align-items: center;
font-weight: 500;
font-size: 14px;
/* box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3); */
transition: all 0.3s ease;
}
.bulk-order-banner:hover {
transform: translateY(-2px);
/* box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4); */
}
.bulk-order-banner i {
font-size: 18px;
opacity: 0.9;
}
/* Responsive: Orders Page Mobile */
@media (max-width: 767px) {
.royal-order-number {
font-size: 0.95rem;
line-height: 1.3;
}
.royal-order-number small {
font-size: 0.75rem;
}
.royal-status-badge {
padding: 0.35rem 0.75rem;
font-size: 0.7rem;
}
.royal-order-total strong {
font-size: 1.1rem;
}
.royal-order-actions .btn {
font-size: 0.75rem;
padding: 0.35rem 0.6rem;
}
}
/* Product Card Auto-Rotation */
.product-rotating-img {
transition: opacity 0.3s ease-in-out;
}
.product-auto-rotate {
position: relative;
overflow: hidden;
}
.product-auto-rotate:hover .product-rotating-img {
transform: scale(1.05);
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
/* Carousel Touch Support */
#heroCarousel {
touch-action: pan-y pinch-zoom;
}
.carousel-item img {
transition: transform 0.3s ease-in-out;
}
/* Product Image Slider Controls */
.product-image-slider {
position: relative;
}
.product-image-slider .slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.9);
border: none;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
z-index: 5;
opacity: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.product-image-slider:hover .slider-arrow {
opacity: 1;
}
.product-image-slider .slider-arrow:hover {
background: var(--royal-gold);
color: white;
transform: translateY(-50%) scale(1.1);
}
.product-image-slider .slider-arrow-left {
left: 10px;
}
.product-image-slider .slider-arrow-right {
right: 10px;
}
.product-image-slider .slider-arrow i {
font-size: 14px;
color: var(--royal-black);
}
.product-image-slider .slider-arrow:hover i {
color: white;
}
.product-image-slider .slider-dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
z-index: 5;
}
.product-image-slider .slider-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}
.product-image-slider .slider-dot:hover {
background: rgba(255, 255, 255, 0.8);
transform: scale(1.2);
}
.product-image-slider .slider-dot.active {
background: var(--royal-gold);
width: 24px;
border-radius: 4px;
}