/* Premium Jewellery Showcase Theme */

:root {
    --color-gold: #c5a059;
    --color-gold-light: #e6c587;
    --color-gold-dark: #a18142;
    --color-black: #0a0a0a;
    --color-dark: #121212;
    --color-dark-lighter: #1e1e1e;
    --color-white: #ffffff;
    --color-gray: #888888;
    --color-orange: 248, 83, 26;
	
	--color-background: 233 223 214;
  	--color-foreground: 45 45 45;
  	--color-heading: 45 45 45;
	--color-subtitle: rgba(34, 34, 34, 0.5);
	--color-title: rgba(45, 45, 45, 1);
	
	--bg-light: #f0efee;
}

body {
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: 'Lato', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.font-playfair {
    font-family: 'Playfair Display', serif;
}

.font-lato {
    font-family: 'Lato', sans-serif;
}

.font-hanken {
    font-family: 'Hanken Grotesk,sans-serif';
}

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

.bg-gold {
    background-color: var(--color-gold) !important;
}

.border-gold {
    border-color: var(--color-gold) !important;
}

.bg-dark-custom {
    background-color: var(--color-dark) !important;
}

.fs-xs {
    font-size: 0.75rem;
}

.fs-sm {
    font-size: 0.875rem;
}

.tracking-wide {
    letter-spacing: 0.1em;
}

.cursor-pointer {
    cursor: pointer !important;
}

/* Custom Buttons */
.btn-gold {
    background-color: var(--color-gold);
    color: var(--color-black);
    border: 1px solid var(--color-gold);
    transition: all 0.3s ease;
}

.btn-gold:hover {
    background-color: var(--color-gold-light);
    border-color: var(--color-gold-light);
    color: var(--color-black);
}

.btn-outline-gold {
    background-color: transparent;
    color: var(--color-gold);
    border: 1px solid var(--color-gold);
    transition: all 0.3s ease;
}

.btn-outline-gold:hover {
    background-color: var(--color-gold);
    color: var(--color-black);
}

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(197, 160, 89, 0.2);
}

/* Nav Link Hover */
.nav-link-hover {
    transition: color 0.3s ease;
}

.nav-link-hover:hover {
    color: var(--color-gold) !important;
}

.navbar .nav-link {
    letter-spacing: 1px;
    padding: 1rem 1rem !important;
    transition: color 0.3s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--color-gold) !important;
}

/* Gold Divider */
.gold-divider {
    width: 60px;
    height: 2px;
    background-color: var(--color-gold);
}

/* Topbar */
.topbar {
    background-color: var(--color-black);
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
}

.live-rates {
    font-family: 'Lato', sans-serif;
    letter-spacing: 0.5px;
}

/* Categories Premium Redesign */
.section-subtitle-label {
    font-family: 'Lato', sans-serif;
    color: var(--color-gold);
    letter-spacing: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
}

.diamond-divider-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.diamond-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(197, 160, 89, 0.4), transparent);
    width: 100px;
}

.diamond-icon {
    width: 8px;
    height: 8px;
    background-color: var(--color-gold);
    transform: rotate(45deg);
    box-shadow: 0 0 10px rgba(197, 160, 89, 0.6);
}

.section-description {
    font-family: 'Lato', sans-serif;
    color: var(--color-gray);
    font-size: 0.95rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.premium-category-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background-color: var(--color-dark-lighter);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.premium-category-card .category-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.premium-category-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 70%);
    transition: opacity 0.4s ease;
}

.category-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem;
    z-index: 2;
    text-align: left;
}

.category-card-name {
    font-family: 'Playfair Display', serif;
    color: var(--color-white);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    transition: color 0.3s ease;
}

.category-card-count {
    font-family: 'Lato', sans-serif;
    color: var(--color-gray);
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.premium-category-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.premium-category-card:hover .category-img {
    transform: scale(1.1);
}

.premium-category-card:hover .category-card-name {
    color: var(--color-gold);
}

/* Shimmer Effect for Loading Placeholders */
.shimmer-card {
    position: relative;
    overflow: hidden;
}

.shimmer {
    border-radius: 4px;
    background: linear-gradient(90deg, #2a2a2a 0px, #3a3a3a 40px, #2a2a2a 80px);
    background-size: 600px;
    animation: shimmer 2s infinite linear;
}

.h-15px {
    height: 15px;
}

.h-20px {
    height: 20px;
}

@keyframes shimmer {
    0% {
        background-position: -100% 0;
    }

    100% {
        background-position: 100% 0;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-black);
}

::-webkit-scrollbar-thumb {
    background: var(--color-gold-dark);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold);
}

/* ------------------------------------- */
/* Mobile App Drawer Navigation          */
/* ------------------------------------- */
.premium-drawer {
    width: 320px !important;
    background-color: var(--color-dark) !important;
    border-right: 1px solid rgba(197, 160, 89, 0.2);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5) !important;
}

.drawer-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border-bottom: 1px solid rgba(197, 160, 89, 0.15);
    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
}

.drawer-body {
    background-color: var(--color-dark);
}

.drawer-item {
    background-color: transparent !important;
    color: var(--color-white) !important;
    padding: 1rem 1.5rem;
    font-size: 1.05rem;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Material ripple effect basis */
.drawer-item:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(197, 160, 89, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
    opacity: 0;
}

.drawer-item:active:after {
    width: 300px;
    height: 300px;
    opacity: 1;
    transition: 0s;
}

.drawer-item:hover,
.drawer-item:focus {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--color-gold) !important;
}

.drawer-item i {
    color: var(--color-gray);
    transition: color 0.2s ease;
}

.drawer-item:hover i,
.drawer-item.active i {
    color: var(--color-gold) !important;
}

.drawer-item.active {
    background-color: rgba(197, 160, 89, 0.08) !important;
    border-left: 4px solid var(--color-gold) !important;
    color: var(--color-gold) !important;
    font-weight: 700;
}

.drawer-item.active i {
    color: var(--color-gold);
}

/* Custom easing animation for showing the offcanvas */
.offcanvas.show:not(.hiding) {
    transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------- */
/* Premium Filter BottomSheet Drawer     */
/* ------------------------------------- */
.premium-filter-drawer {
    max-height: 85vh !important;
    height: auto !important;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    background-color: var(--color-dark) !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5) !important;
    border-top: 1px solid rgba(197, 160, 89, 0.3) !important;
}

.filter-drawer-header {
    background: linear-gradient(to bottom, #1a1a1a 0%, var(--color-dark) 100%);
    border-bottom: 1px solid rgba(197, 160, 89, 0.1);
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}

.filter-drawer-header::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.filter-drawer-body {
    border-radius: 0 !important;
    border: none !important;
    padding-top: 1rem !important;
    padding-bottom: 3rem !important;
}

/* Hide scrollbar for cleaner look in the bottom sheet */
.premium-filter-drawer .offcanvas-body::-webkit-scrollbar {
    display: none;
}

/* ------------------------------------- */
/* Mhoir-Exact Splide Hero Slider        */
/* ------------------------------------- */



/* ------------------------------------- */
/* Breadcrumb Styling                    */
/* ------------------------------------- */

.custom-breadcrumb {
    background: linear-gradient(90deg, #1a1a1a 0%, #222222 100%);
    border-radius: 50px;
    padding: 8px 24px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(197, 160, 89, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.breadcrumb-home {
    display: flex;
    align-items: center;
}

.home-icon-wrapper {
    background-color: rgba(255, 255, 255, 0.08);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    color: var(--color-white);
}

.home-icon-wrapper:hover {
    background-color: var(--color-gold);
    color: var(--color-black);
    transform: scale(1.05);
}

.breadcrumb {
    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23c5a059' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    --bs-breadcrumb-item-padding-x: 0.75rem;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    letter-spacing: 0.5px;
}

.breadcrumb-item+.breadcrumb-item::before {
    margin-top: 2px;
}

/* ======================================================
   PRODUCT CARDS & GRID (.fc-card, .fc-grid)
   Moved from index.php for global use across catalog
   ====================================================== */
/* Grid */
.fc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Product Card — rendered by JS */
.fc-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

/* Ratio wrapper: 3:4 portrait = 133.33% padding-top */
.fc-card-img {
    position: relative;
    width: 100%;
    padding-top: 133.33%;
    overflow: hidden;
    background: #111;
    flex-shrink: 0;
}

.fc-card-img img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fc-card:hover .fc-card-img img {
    transform: scale(1.06);
}

.fc-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5,5,5,0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 16px;
    opacity: 0;
    transition: opacity 0.3s;
}

.fc-card:hover .fc-card-overlay {
    opacity: 1;
}

.fc-view-btn {
    font-family: 'Lato', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #c9a84c;
    border: 1px solid rgba(197, 160, 89, 0.65);
    padding: 7px 18px;
}

/* Wishlist button */
.fc-wishlist-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: rgba(5,5,5,0.6);
    border: 1px solid rgba(197, 160, 89, 0.25);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    padding: 0;
}

.fc-wishlist-btn:hover {
    background: rgba(201, 168, 76, 0.15);
    border-color: #c9a84c;
}

/* Cart button */
.fc-cart-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 10;
    background: #c9a84c;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #050505;
    font-size: 0.85rem;
    transition: background 0.2s, transform 0.2s;
    padding: 0;
}

.fc-cart-btn:hover {
    background: #e0bb5a;
    transform: scale(1.1);
}

.fc-card-body {
    padding: 14px 4px 0;
    flex: 1 1 auto;
}

.fc-card-brand {
    font-family: 'Lato', sans-serif;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(197, 160, 89, 0.5);
    margin-bottom: 6px;
}

.fc-card-name {
    font-family: 'Lato', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #f5efe0;
    line-height: 1.4;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-card-price {
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #c9a84c;
    letter-spacing: 0.5px;
}

/* Shimmer loading placeholders */
.fc-shimmer-card {
    min-width: 0;
    width: 100%;
}

.fc-shimmer-img {
    width: 100%;
    padding-top: 133.33%;
    background: linear-gradient(90deg, #111 25%, #1a1a1a 50%, #111 75%);
    background-size: 200% 100%;
    animation: fcShimmer 1.4s infinite;
}

.fc-shimmer-body {
    padding: 14px 2px 0;
}

.fc-shimmer-line {
    background: linear-gradient(90deg, #111 25%, #1a1a1a 50%, #111 75%);
    background-size: 200% 100%;
    animation: fcShimmer 1.4s infinite;
    border-radius: 2px;
    margin-bottom: 8px;
    height: 10px;
}

.fc-shimmer-line--brand { width: 45%; }
.fc-shimmer-line--name  { width: 80%; height: 13px; }
.fc-shimmer-line--price { width: 35%; height: 13px; }

@keyframes fcShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Responsive */
@media (max-width: 1100px) {
    .fc-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .fc-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .fc-card-name { font-size: 0.8rem; }
    .fc-card-price { font-size: 0.85rem; }
    .fc-card-brand { font-size: 0.58rem; }
}

@media (max-width: 480px) {
    .fc-grid { gap: 8px; }
    .fc-card-name { font-size: 0.75rem; }
    .fc-card-price { font-size: 0.8rem; }
}

															/********************************************************

																			HOME PAGE CSS

															********************************************************/


/********************************************************
	Welcome Banner
*********************************************************/

.welcome-banner {
    background: linear-gradient(
        90deg,
        #f4ede7 0%,
        #e9dfd6 30%,
        #e3d6ca 70%,
        #f4ede7 100%
    );
    border-bottom: 1px solid rgba(233, 223, 214, 0.9);
    position: relative;
    z-index: 1030;
    overflow: hidden;
}

/* Top & Bottom Shimmer Lines */
.welcome-banner::before,
.welcome-banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
}

.welcome-banner::before {
    top: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.8),
        transparent
    );
}

.welcome-banner::after {
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
}

/* Banner Container */
.welcome-banner .banner-content {
    padding: 6px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

/* Decorative Stars */
.welcome-banner .banner-icon {
    color: #000;
    font-size: 11px;
    letter-spacing: 2px;
    opacity: 0.7;
}

/* Banner Text */
.welcome-banner .banner-text {
    font-family: 'Lato', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    color: #000;
    letter-spacing: 0.5px;
}

.welcome-banner .banner-title {
    color: #020202;
    font-weight: 700;
}

.welcome-banner .banner-highlight {
    color: #6f5c4d;
    font-weight: 600;
}

/* Claim Button */
.welcome-banner .claim-btn {
    font-family: 'Lato', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 14px;
    background: transparent;
    color: #000;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s ease;
}

.welcome-banner .claim-btn:hover {
    background: rgba(0, 0, 0);
    border-color: #000;
	color: #fff;
}

/********************************************************
LIVE GOLD RATE TICKER Premium Luxe
*********************************************************/
.rate-ticker-wrap {
	width: 100%;
	background: #050505;
	/* Deepest black */
	border-bottom: 1px solid rgba(197, 168, 117, 0.15);
	overflow: hidden;
	position: relative;
	z-index: 100;
	height: 38px;
	display: flex;
	align-items: center;
}

/* Luxury fade edges */
.rate-ticker-wrap::before,
.rate-ticker-wrap::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 120px;
	z-index: 2;
	pointer-events: none;
}

.rate-ticker-wrap::before {
	left: 0;
	background: linear-gradient(to right, #050505 10%, transparent 100%);
}

.rate-ticker-wrap::after {
	right: 0;
	background: linear-gradient(to left, #050505 10%, transparent 100%);
}

.rate-ticker-track {
	display: flex;
	align-items: center;
	white-space: nowrap;
	animation: rateTickerScroll 60s linear infinite;
	/* Slower, more elegant scroll */
	will-change: transform;
}

.rate-ticker-track:hover {
	animation-play-state: paused;
}

@keyframes rateTickerScroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-33.3333%);
	}

	/* Adjusted for triplicated items */
}

.rate-ticker-item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 0 10px;
	height: 38px;
	cursor: default;
}

.rate-ticker-label {
	font-family: 'Lato', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #c5a875;
	/* Gold Label */
}

.rate-ticker-price {
	font-family: 'Lato', sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	color: #ffffff;
	/* Brighter white for price */
	letter-spacing: 0.5px;
}

.rate-ticker-change {
	font-size: 0.75rem;
	font-weight: 700;
	margin-left: 4px;
}

.rate-ticker-change.up {
	color: #4ade80;
}

/* Brighter green */
.rate-ticker-change.down {
	color: #f87171;
}

/* Brighter red */

.rate-ticker-sep {
	color: #c5a875;
	margin-left: 20px;
	font-size: 0.7rem;
	opacity: 0.4;
}

@media (max-width: 768px) {
	.rate-ticker-wrap {
		height: 34px;
	}

	.rate-ticker-item {
		gap: 6px;
	}

	.rate-ticker-label {
		font-size: 0.65rem;
		letter-spacing: 0.8px;
	}

	.rate-ticker-price {
		font-size: 0.72rem;
	}

	.rate-ticker-change {
		font-size: 0.65rem;
	}

	.rate-ticker-sep {
		margin-left: 12px;
		font-size: 0.6rem;
	}
}

/* Brand Marquee (Below Slider) */
.brand-marquee-section {
	background-color: #050505;
	padding: 6px 0;
	/* Reduced padding for more subtle height */
	overflow: hidden;
	border-top: 1px solid rgba(197, 168, 117, 0.06);
	border-bottom: 1px solid rgba(197, 168, 117, 0.06);
}

.brand-marquee-wrap {
	display: flex;
	overflow: hidden;
	white-space: nowrap;
}

.brand-marquee-track {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	column-gap: 40px;
	/* Tighter spacing */
	padding-right: 40px;
	animation: brandMarqueeScroll 45s linear infinite;
	/* Slightly slower for elegance */
	will-change: transform;
}

@keyframes brandMarqueeScroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

.brand-marquee-section:hover .brand-marquee-track {
	animation-play-state: paused;
}

.brand-marquee-item {
	display: flex;
	align-items: center;
	gap: 40px;
	height: 32px;
	/* Slimmer height */
}

.brand-marquee-content {
	font-family: 'Lato', sans-serif;
	font-size: 0.65rem;
	/* More subtle font size */
	font-weight: 700;
	letter-spacing: 0.14em;
	color: #ffffff;
	text-transform: uppercase;
}

.brand-marquee-diamond {
	color: #c5a875;
	font-size: 0.55rem;
	opacity: 0.5;
}

@media (max-width: 768px) {
	.brand-marquee-section {
		padding: 4px 0;
	}

	.brand-marquee-track {
		column-gap: 20px;
		padding-right: 20px;
	}

	.brand-marquee-item {
		gap: 20px;
		height: 28px;
	}

	.brand-marquee-content {
		font-size: 0.58rem;
		letter-spacing: 0.1em;
	}
}

/* Premium Offer Banner */
.premium-offer-banner {
	position: relative;
	padding: 120px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: #0a0a0a;
	overflow: hidden;
}

.premium-offer-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	/* Premium dark aesthetic background image */
	background-image: url('https://images.unsplash.com/photo-1599643478514-4a4204558509?q=80&w=2000&auto=format&fit=crop');
	background-size: cover;
	background-position: center;
	opacity: 0.35;
	z-index: 0;
	transition: transform 10s ease;
}

.premium-offer-banner:hover::before {
	transform: scale(1.05);
}

.premium-offer-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at center, rgba(5,5,5,0.3) 0%, rgba(5,5,5,0.8) 100%);
	z-index: 1;
}

.premium-offer-content {
	position: relative;
	z-index: 2;
	max-width: 800px;
	padding: 0 20px;
	margin: 0 auto;
}

.premium-offer-subtitle {
	font-family: 'Lato', sans-serif;
	color: #c9a84c;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 4px;
	text-transform: uppercase;
	margin-bottom: 24px;
	display: block;
}

.premium-offer-title {
	font-family: 'Playfair Display', serif;
	color: #ffffff;
	font-size: 3.5rem;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 24px;
	text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.premium-offer-desc {
	font-family: 'Lato', sans-serif;
	color: #e0d8c3;
	font-size: 1.1rem;
	line-height: 1.6;
	margin-bottom: 40px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.premium-offer-btn {
	display: inline-block;
	background: linear-gradient(135deg, #c9a84c 0%, #e0bb5a 50%, #c9a84c 100%);
	color: #050505;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 16px 40px;
	text-decoration: none;
	border-radius: 2px;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(201, 168, 76, 0.2);
}

.premium-offer-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(201, 168, 76, 0.4);
	color: #000;
	text-decoration: none;
}

@media (max-width: 768px) {
	.premium-offer-banner {
		padding: 80px 0;
	}
	.premium-offer-title {
		font-size: 2.2rem;
		margin-bottom: 20px;
	}
	.premium-offer-subtitle {
		font-size: 0.75rem;
		letter-spacing: 2px;
		margin-bottom: 16px;
	}
	.premium-offer-desc {
		font-size: 0.95rem;
		margin-bottom: 30px;
	}
	.premium-offer-btn {
		padding: 14px 32px;
		font-size: 0.85rem;
	}
}


/* ==================================================
	   OUR BESTSELLERS Black Edition
   ================================================== */
.gbs-section {
	background: #050505;
	background-image: radial-gradient(ellipse 80% 50% at 50% -5%, rgba(197, 160, 89, 0.07) 0%, transparent 65%);
	padding: 80px 0 90px;
	border-top: 1px solid rgba(197, 160, 89, 0.1);
	border-bottom: 1px solid rgba(197, 160, 89, 0.1);
	overflow-x: hidden;
}

.gbs-inner {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
}

.gbs-header {
	text-align: center;
	margin-bottom: 44px;
}

.gbs-kicker {
	display: block;
	font-family: 'Lato', sans-serif;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 6px;
	text-transform: uppercase;
	color: #c9a84c;
	margin-bottom: 14px;
}

.gbs-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(2rem, 4vw, 2.6rem);
	font-weight: 400;
	color: #f5efe0;
	margin: 0 0 6px;
	text-shadow: 0 2px 40px rgba(197, 160, 89, 0.15);
}

.gbs-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 18px;
}

.gbs-divider-line {
	display: block;
	width: 56px;
	height: 1px;
	background: linear-gradient(90deg, transparent, #c9a84c, transparent);
	opacity: 0.7;
}

.gbs-divider-diamond {
	color: #c9a84c;
	font-size: 0.55rem;
	opacity: 0.8;
}

.gbs-tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	border-bottom: 1px solid rgba(197, 160, 89, 0.15);
	margin-bottom: 40px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.gbs-tabs::-webkit-scrollbar {
	display: none;
}

.gbs-tab {
	padding: 0.65rem 1.5rem;
	font-family: 'Lato', sans-serif;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(245, 239, 224, 0.4);
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	cursor: pointer;
	transition: color .2s, border-color .2s;
	white-space: nowrap;
}

.gbs-tab:hover {
	color: #f5efe0;
}

.gbs-tab.active {
	color: #c9a84c;
	border-bottom-color: #c9a84c;
}

.gbs-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	width: 100%;
	box-sizing: border-box;
}

@media(max-width:1100px) {
	.gbs-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media(max-width:768px) {
	.gbs-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

@media(max-width:480px) {
	.gbs-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
}

.gbs-card {
	display: block;
	text-decoration: none;
	color: inherit;
	min-width: 0;
	width: 100%;
	overflow: hidden;
}

.gbs-card-img {
	position: relative;
	overflow: hidden;
	background: #111;
	aspect-ratio: 3/4;
	width: 100%;
}

.gbs-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .55s cubic-bezier(.25, .46, .45, .94);
}

.gbs-card:hover .gbs-card-img img {
	transform: scale(1.06);
}

.gbs-card-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #0d0d0d, #1a1a1a);
	color: rgba(197, 160, 89, 0.2);
	font-size: 3rem;
}

.gbs-card-overlay {
	position: absolute;
	inset: 0;
	background: rgba(5, 5, 5, 0.5);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 20px;
	opacity: 0;
	transition: opacity .3s;
}

.gbs-card:hover .gbs-card-overlay {
	opacity: 1;
}

.gbs-view-btn {
	font-family: 'Lato', sans-serif;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #c9a84c;
	border: 1px solid rgba(197, 160, 89, 0.6);
	padding: 8px 20px;
}

.gbs-badge {
	position: absolute;
	top: 0;
	left: 0;
	font-family: 'Lato', sans-serif;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 5px 10px;
	z-index: 2;
	pointer-events: none;
}

.gbs-badge-featured {
	background: #c9a84c;
	color: #050505;
}

.gbs-badge-new {
	background: #1a1a1a;
	color: #c9a84c;
	border: 1px solid rgba(197, 160, 89, 0.4);
}

.gbs-card-body {
	padding: 14px 2px 0;
}

.gbs-brand {
	font-family: 'Lato', sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: rgba(197, 160, 89, 0.5);
	margin-bottom: 6px;
}

.gbs-name {
	font-family: 'Lato', sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: #f5efe0;
	line-height: 1.4;
	margin-bottom: 9px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gbs-meta {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 9px;
}

.gbs-pill {
	font-family: 'Lato', sans-serif;
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: rgba(197, 160, 89, 0.7);
	border: 1px solid rgba(197, 160, 89, 0.2);
	padding: 3px 8px;
}

.gbs-price {
	font-family: 'Lato', sans-serif;
	font-size: 0.98rem;
	font-weight: 700;
	color: #c9a84c;
	letter-spacing: .5px;
}

.gbs-empty {
	text-align: center;
	color: rgba(245, 239, 224, 0.3);
	font-size: 0.88rem;
	padding: 40px 0;
}

.gbs-view-all-wrap {
	text-align: center;
	margin-top: 44px;
}

.gbs-view-all {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'Lato', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #c9a84c;
	text-decoration: none;
	border: 1px solid rgba(197, 160, 89, 0.3);
	padding: 12px 32px;
	transition: background .25s, color .25s;
}

.gbs-view-all:hover {
	background: #c9a84c;
	color: #050505;
}

.gbs-view-all span {
	transition: transform .25s;
}

.gbs-view-all:hover span {
	transform: translateX(4px);
}

@media(max-width:768px) {
	.gbs-section {
		padding: 48px 0 56px;
	}

	.gbs-inner {
		padding: 0 12px;
		box-sizing: border-box;
		overflow: hidden;
	}

	.gbs-tabs {
		justify-content: flex-start;
		flex-wrap: nowrap;
		padding-bottom: 2px;
		margin-bottom: 28px;
	}

	.gbs-tab {
		padding: .5rem .85rem;
		font-size: 0.6rem;
		letter-spacing: 1.2px;
		flex-shrink: 0;
	}

	.gbs-panel {
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
	}

	.gbs-card-body {
		padding: 10px 2px 0;
	}

	.gbs-brand {
		font-size: 0.58rem;
		letter-spacing: 1.2px;
		margin-bottom: 4px;
	}

	.gbs-name {
		font-size: 0.78rem;
		margin-bottom: 6px;
	}

	.gbs-price {
		font-size: 0.85rem;
	}

	.gbs-pill {
		font-size: 0.58rem;
		padding: 2px 6px;
	}

	.gbs-view-all {
		font-size: 0.65rem;
		padding: 10px 24px;
		letter-spacing: 2px;
	}

	.gbs-header {
		margin-bottom: 28px;
	}
}

@media(max-width:390px) {
	.gbs-inner {
		padding: 0 10px;
	}

	.gbs-grid {
		gap: 6px;
	}

	.gbs-name {
		font-size: 0.72rem;
	}

	.gbs-price {
		font-size: 0.8rem;
	}
}



/* ==========================================
	   NEW ARRIVALS Black Edition
   ========================================== */
.na-section {
	background: #f0efee;
	background-image: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(197, 160, 89, 0.06) 0%, transparent 60%);
	padding: 80px 0 90px;
	border-top: 1px solid rgba(197, 160, 89, 0.1);
	border-bottom: 1px solid rgba(197, 160, 89, 0.1);
	overflow-x: hidden;
}

.na-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
	overflow: hidden;
}

/* Header */
.na-header {
	text-align: center;
	margin-bottom: 40px;
}

.na-kicker {
	display: block;
	font-family: 'Lato', sans-serif;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 6px;
	text-transform: uppercase;
	color: #000;
	margin-bottom: 12px;
}

.na-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(2rem, 4vw, 2.8rem);
	font-weight: 400;
	color: #000;
	margin: 0 0 10px;
	text-shadow: 0 2px 40px rgba(197, 160, 89, 0.15);
}

.na-subtitle {
	font-family: 'Lato', sans-serif;
	font-size: 0.82rem;
	color: rgba(0, 0, 0, 0.7);
	letter-spacing: 0.04em;
	margin: 0;
}

/* Controls row: tabs + arrows */
.na-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 32px;
	border-bottom: 1px solid rgba(197, 160, 89, 0.12);
	padding-bottom: 0;
	gap: 12px;
	flex-wrap: nowrap;
}

.na-tabs {
	display: flex;
	align-items: flex-end;
	gap: 0;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	flex: 1 1 auto;
	min-width: 0;
}

.na-tabs::-webkit-scrollbar {
	display: none;
}

.na-tab {
	padding: 0.65rem 1.4rem;
	font-family: 'Lato', sans-serif;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(34, 34, 34, 0.61);
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	cursor: pointer;
	transition: color .2s, border-color .2s;
	white-space: nowrap;
}

.na-tab:hover {
	color: #000;
}

.na-tab.active {
	color: #000;
	border-bottom-color: #000;
}

/* Premium circular arrows */
.na-arrows {
	display: flex;
	gap: 10px;
	align-items: center;
}

.na-arrow {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(10, 10, 10, 0.8);
	border: 1px solid rgba(0, 0, 0, 0.25);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: background .25s, border-color .25s, color .25s, transform .25s;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.na-arrow:hover {
	background: #000;
	color: #fff;
	border-color: #000;
	transform: scale(1.08);
}

.na-arrow:disabled {
	opacity: 0.2;
	cursor: not-allowed;
	transform: none;
}

/* Slider track */
.na-track-outer {
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
}

.na-track {
	display: flex;
	gap: 20px;
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
	align-items: flex-start;
}

/* Product Card */
.na-card {
	flex: 0 0 calc(25% - 15px);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	min-width: 0;
	width: 0;
	cursor: pointer;
	box-sizing: border-box;
}

.na-card-img {
	position: relative;
	overflow: hidden;
	background: #111;
	aspect-ratio: 3 / 4;
	flex-shrink: 0;
}

.na-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.na-card:hover .na-card-img img {
	transform: scale(1.06);
}

.na-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #0d0d0d, #1a1a1a);
	color: rgba(197, 160, 89, 0.18);
	font-size: 3.5rem;
}

/* Hover overlay */
.na-img-overlay {
	position: absolute;
	inset: 0;
	background: rgba(5, 5, 5, 0.45);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 18px;
	opacity: 0;
	transition: opacity .3s;
}

.na-card:hover .na-img-overlay {
	opacity: 1;
}

.na-quick-view {
	font-family: 'Lato', sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.65);
	padding: 7px 18px;
}

/* Badge */
.na-badge {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	pointer-events: none;
	font-family: 'Lato', sans-serif;
	font-size: 0.58rem;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 4px 10px;
}

.na-badge-new {
	background: #fff;
	color: #000;
}

.na-badge-hot {
	background: #1a1a1a;
	color: #fff;
	border: 1px solid rgba(34, 34, 34, 0.5);
}

/* Card info */
.na-card-info {
	padding: 14px 0 0;
}

.na-cat-label {
	font-family: 'Lato', sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 1.8px;
	color: rgba(0, 0, 0, 0.6);
	display: block;
	margin-bottom: 6px;
}

.na-product-name {
	font-family: 'Lato', sans-serif;
	font-size: 0.92rem;
	font-weight: 600;
	color: #000;
	line-height: 1.38;
	margin-bottom: 9px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.na-pills {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.na-pill {
	font-family: 'Lato', sans-serif;
	font-size: 0.63rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(var(--color-orange), 1);
	border: 1px solid rgba(var(--color-orange), 1);
	padding: 3px 8px;
}

.na-card-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.na-price {
	font-family: 'Lato', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: #000;
	letter-spacing: 0.5px;
}

.na-arrow-icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #000;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform .25s, background .25s;
}

.na-card:hover .na-arrow-icon {
	transform: translateX(3px);
}

/* Explore CTA */
.na-cta-wrap {
	text-align: center;
	margin-top: 52px;
}

.na-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: 'Lato', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #000;
	text-decoration: none;
	border: 1px solid rgba(34, 34, 34, 0.35);
	padding: 14px 40px;
	transition: background .25s, color .25s;
}

.na-cta:hover {
	background: #000;
	color: #fff;
}

.na-cta-icon {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #000;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .25s, color .25s;
}

.na-cta:hover .na-cta-icon {
	background: #fff;
	color: #000;
}

/* Responsive */
@media (max-width: 1100px) {
	.na-card {
		flex: 0 0 calc(33.333% - 14px);
	}
}

@media (max-width: 768px) {
	.na-section {
		padding: 56px 0 64px;
	}

	.na-inner {
		padding: 0 14px;
	}

	.na-card {
		flex: 0 0 calc(50% - 10px);
	}

	.na-controls {
		gap: 8px;
		margin-bottom: 24px;
	}

	.na-tab {
		padding: .5rem .9rem;
		font-size: .6rem;
		letter-spacing: 1.5px;
		flex-shrink: 0;
	}

	.na-arrows {
		flex-shrink: 0;
	}

	.na-arrow {
		width: 36px;
		height: 36px;
	}

	.na-product-name {
		font-size: 0.82rem;
	}

	.na-price {
		font-size: 0.88rem;
	}

	.na-pill {
		font-size: 0.58rem;
		padding: 2px 6px;
	}

	.na-cat-label {
		font-size: 0.58rem;
	}

	.na-cta {
		font-size: 0.65rem;
		padding: 11px 28px;
		letter-spacing: 2px;
	}

	.na-cta-wrap {
		margin-top: 36px;
	}
}

@media (max-width: 480px) {
	.na-section {
		padding: 48px 0 56px;
	}

	.na-inner {
		padding: 0 12px;
	}

	.na-card {
		flex: 0 0 calc(85% - 10px);
	}

	.na-tab {
		padding: .45rem .7rem;
		font-size: .58rem;
		letter-spacing: 1.2px;
	}

	.na-arrow {
		width: 32px;
		height: 32px;
	}

	.na-header {
		margin-bottom: 28px;
	}

	.na-product-name {
		font-size: 0.8rem;
		white-space: normal;
	}
}



/* ===================================================
	SHOP BY CATEGORY at Premium Black Edition
=================================================== */

.sbc-section {
	background-color: #f0efee;
	background-image:
		radial-gradient(ellipse 80% 60% at 50% -10%, rgba(197, 160, 89, 0.08) 0%, transparent 70%);
	padding: 80px 0 90px;
	border-top: 1px solid rgba(197, 160, 89, 0.1);
	border-bottom: 1px solid rgba(197, 160, 89, 0.1);
}

/* --- Header --- */
.sbc-header {
	margin-bottom: 56px;
}

.sbc-discover-label {
	display: block;
	font-family: 'Lato', sans-serif;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 6px;
	text-transform: uppercase;
	color: #070707;
	margin-bottom: 14px;
	opacity: 0.9;
}

.sbc-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(2rem, 4.5vw, 2.8rem);
	font-weight: 400;
	/* Warm gold-tinted white — regal on black */
	color: #070707;
	margin: 0 0 6px;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-shadow: 0 2px 40px rgba(0, 0, 0, 0.15);
}

.sbc-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 20px 0 26px;
}

.sbc-divider-line {
	display: block;
	width: 56px;
	height: 1px;
	background: linear-gradient(90deg, transparent, #000, transparent);
	opacity: 0.7;
}

.sbc-divider-diamond {
	color: #070707;
	font-size: 0.6rem;
	line-height: 1;
	text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
	animation: sbcDiamondPulse 3s ease-in-out infinite;
}

@keyframes sbcDiamondPulse {

	0%,
	100% {
		text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
	}

	50% {
		text-shadow: 0 0 18px rgba(0, 0, 0, 1), 0 0 30px rgba(0, 0, 0, 0.4);
	}
}

.sbc-subtitle {
	font-family: 'Lato', sans-serif;
	font-size: 0.875rem;
	color: rgba(0, 0, 0, 0.7);
	/* max-width: 420px; */
	max-width: 720px;
	margin: 0 auto;
	line-height: 1.7;
}

.sbc-subtitle em {
	color: rgb(249, 75, 15);
	font-style: normal;
}

/* --- Cards Grid --- */
.sbc-grid {
	display: flex;
	gap: 18px;
	justify-content: center;
	flex-wrap: wrap;
}

/* --- Single Card --- */
.sbc-card {
	position: relative;
	display: block;
	width: 230px;
	height: 310px;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	cursor: pointer;
	flex-shrink: 0;
	/* Gold ring border on dark background = instant premium */
	outline: 1px solid rgba(197, 160, 89, 0.2);
	box-shadow:
		0 6px 24px rgba(255, 255, 255, 0.7),
		inset 0 0 0 1px rgba(255, 255, 255, 0.04);
	transition:
		transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.38s ease,
		outline-color 0.3s ease;
}

.sbc-card:hover {
	transform: translateY(-8px);
	outline-color: rgba(197, 160, 89, 0.65);
	box-shadow:
		0 20px 50px rgba(0, 0, 0, 0.85),
		0 0 28px rgba(197, 160, 89, 0.18),
		inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Full-cover image */
.sbc-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	filter: brightness(0.92) saturate(1.05);
}

.sbc-card:hover .sbc-card-img {
	transform: scale(1.09);
	filter: brightness(1) saturate(1.1);
}

/* No-image fallback */
.sbc-card-no-img {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: rgba(255, 255, 255, 0.25);
	background: #1a1a1a;
}

/* Gradient overlay — richer blacks for premium feel */
.sbc-card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
			rgba(0, 0, 0, 0.92) 0%,
			rgba(0, 0, 0, 0.5) 38%,
			rgba(0, 0, 0, 0.08) 65%,
			transparent 85%);
	pointer-events: none;
}

/* Text block */
.sbc-card-info {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 0 15px 18px;
	z-index: 2;
	pointer-events: none;
}

.sbc-card-name {
	display: block;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: #f5efe0;
	line-height: 1.25;
	margin-bottom: 5px;
	transition: color 0.25s ease;
}

.sbc-card:hover .sbc-card-name {
	color: #e8c96a;
}

.sbc-card-count {
	display: block;
	font-family: 'Lato', sans-serif;
	font-size: 0.72rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.4px;
}

/* Responsive */
@media (max-width: 991px) {
	.sbc-card {
		width: calc(33.333% - 14px);
		height: 260px;
	}
}

@media (max-width: 575px) {
	.sbc-section {
		padding: 52px 0 60px;
	}

	.sbc-grid {
		gap: 12px;
	}

	.sbc-card {
		width: calc(50% - 8px);
		height: 230px;
	}
}

.sbc-empty {
	color: rgba(255, 255, 255, 0.35);
	font-family: 'Lato', sans-serif;
	padding: 40px 0;
	text-align: center;
	width: 100%;
}


/* =============================================================
		SHOP BY OCCASION at Premium Black Edition
   ============================================================= */
.sbo-section {
    background-color: #050505;
    padding: 80px 0 100px;
    border-bottom: 1px solid rgba(197, 160, 89, 0.1);
}

.sbo-header {
    margin-bottom: 60px;
}

.sbo-discover-label {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #c9a84c;
    margin-bottom: 14px;
    opacity: 0.9;
}

.sbo-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4.5vw, 2.8rem);
    font-weight: 400;
    color: #f5efe0;
    margin: 0 0 6px;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-shadow: 0 2px 40px rgba(197, 160, 89, 0.15);
}

.sbo-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 20px 0 26px;
}

.sbo-divider-line {
    display: block;
    width: 56px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c9a84c, transparent);
    opacity: 0.7;
}

.sbo-divider-diamond {
    color: #c9a84c;
    font-size: 0.6rem;
    line-height: 1;
    text-shadow: 0 0 8px rgba(201, 168, 76, 0.8);
}

.sbo-subtitle {
    font-family: 'Lato', sans-serif;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.42);
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.7;
}

.sbo-subtitle em {
    color: #c9a84c;
    font-style: normal;
}

.sbo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

.sbo-card {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
}

.sbo-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(201, 168, 76, 0.15);
}

.sbo-img-wrap {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden;
}

.sbo-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.8s ease;
}

.sbo-card:hover .sbo-img-wrap img {
    transform: scale(1.08);
}

.sbo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5,5,5,0.9) 0%, rgba(5,5,5,0.3) 50%, transparent 100%);
    transition: background 0.4s ease;
}

.sbo-card:hover .sbo-overlay {
    background: linear-gradient(to top, rgba(5,5,5,0.95) 0%, rgba(201,168,76,0.2) 60%, transparent 100%);
}

.sbo-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 20px;
    text-align: center;
    transform: translateY(16px);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sbo-card:hover .sbo-content {
    transform: translateY(0);
}

.sbo-card-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: #fff;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    transition: color 0.3s ease;
}

.sbo-card:hover .sbo-card-title {
    color: #e4c978;
}

.sbo-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Lato', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #c9a84c;
    opacity: 0;
    transition: opacity 0.3s ease 0.1s;
}

.sbo-card:hover .sbo-card-link {
    opacity: 1;
}

/* Responsive */
@media (max-width: 1200px) {
    .sbo-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .sbo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .sbo-section {
        padding: 56px 0 64px;
    }
    .sbo-header {
        margin-bottom: 40px;
    }
    .sbo-content {
        transform: translateY(0);
        padding: 18px 14px;
    }
    .sbo-card-link {
        opacity: 1;
    }
    .sbo-card-title {
        font-size: 1.15rem;
    }
}

@media (max-width: 480px) {
    .sbo-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 14px;
    }
    .sbo-card {
        aspect-ratio: 2 / 3;
    }
    .sbo-card-title {
        font-size: 1.4rem;
    }
    .sbo-section {
        padding: 48px 0 56px;
    }
}



/* ==========================================
   FEATURED COLLECTION at Premium Black Edition
   ========================================== */
.fc-section {
    background: var(--bg-light);
    background-image: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(197, 160, 89, 0.06) 0%, transparent 65%);
    padding: 80px 0 90px;
    border-top: 1px solid rgba(197, 160, 89, 0.1);
    border-bottom: 1px solid rgba(197, 160, 89, 0.1);
    overflow-x: hidden;
}

.fc-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.fc-header {
    text-align: center;
    margin-bottom: 48px;
}

.fc-kicker {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--color-dark-lighter);
    margin-bottom: 14px;
}

.fc-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 400;
    color: var(--color-dark);
    margin: 0 0 6px;
    text-shadow: 0 2px 40px rgba(197, 160, 89, 0.15);
}

.fc-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
    margin-bottom: 16px;
}

.fc-divider-line {
    display: block;
    width: 56px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-dark), transparent);
    opacity: 0.7;
}

.fc-divider-diamond {
    color: var(--color-dark);
    font-size: 0.55rem;
    opacity: 0.8;
}

.fc-subtitle {
    font-family: 'Lato', sans-serif;
    font-size: 0.82rem;
    color: var(--color-subtitle);
    letter-spacing: 0.04em;
    margin: 0;
}

/* Grid */
.fc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Product Card — rendered by JS */
.fc-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

/* Ratio wrapper: 3:4 portrait = 133.33% padding-top */
.fc-card-img {
    position: relative;
    width: 100%;
    padding-top: 133.33%;
    overflow: hidden;
    background: #111;
    flex-shrink: 0;
}

.fc-card-img img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fc-card:hover .fc-card-img img {
    transform: scale(1.06);
}

.fc-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5,5,5,0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 16px;
    opacity: 0;
    transition: opacity 0.3s;
}

.fc-card:hover .fc-card-overlay {
    opacity: 1;
}

.fc-view-btn {
    font-family: 'Lato', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.65);
    padding: 7px 18px;
}

/* Wishlist button */
.fc-wishlist-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: rgba(5,5,5,0.6);
    border: 1px solid rgba(197, 160, 89, 0.25);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    padding: 0;
}

.fc-wishlist-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: #000;
}

/* Cart button */
.fc-cart-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 10;
    background: #000;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 0.85rem;
    transition: background 0.2s, transform 0.2s;
    padding: 0;
}

.fc-cart-btn:hover {
    background: #000;
    transform: scale(1.1);
}

.fc-card-body {
    padding: 14px 4px 0;
    flex: 1 1 auto;
}

.fc-card-brand {
    font-family: 'Lato', sans-serif;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--color-subtitle);
    margin-bottom: 6px;
}

.fc-card-name {
    font-family: 'Lato', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgb(var(--color-heading));
    line-height: 1.4;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-card-price {
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: rgb(var(--color-heading));
    letter-spacing: 0.5px;
}

/* Shimmer loading placeholders */
.fc-shimmer-card {
    min-width: 0;
    width: 100%;
}

.fc-shimmer-img {
    width: 100%;
    padding-top: 133.33%; /* 3:4 portrait ratio — same as fc-card-img */
    background: linear-gradient(90deg, #111 25%, #1a1a1a 50%, #111 75%);
    background-size: 200% 100%;
    animation: fcShimmer 1.4s infinite;
}

.fc-shimmer-body {
    padding: 14px 2px 0;
}

.fc-shimmer-line {
    background: linear-gradient(90deg, #111 25%, #1a1a1a 50%, #111 75%);
    background-size: 200% 100%;
    animation: fcShimmer 1.4s infinite;
    border-radius: 2px;
    margin-bottom: 8px;
    height: 10px;
}

.fc-shimmer-line--brand { width: 45%; }
.fc-shimmer-line--name  { width: 80%; height: 13px; }
.fc-shimmer-line--price { width: 35%; height: 13px; }

@keyframes fcShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* CTA */
.fc-cta-wrap {
    text-align: center;
    margin-top: 52px;
}

.fc-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Lato', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
    border: 1px solid rgba(34, 34, 34, 0.35);
    padding: 14px 40px;
    transition: background 0.25s, color 0.25s;
}

.fc-cta:hover {
    background: #000;
    color: #fff;
}

.fc-cta-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, color 0.25s;
}

.fc-cta:hover .fc-cta-icon {
    background: #fff;
    color: #000;
}

/* Responsive */
@media (max-width: 1100px) {
    .fc-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .fc-section { padding: 56px 0 64px; }
    .fc-inner { padding: 0 14px; }
    .fc-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .fc-header { margin-bottom: 32px; }
    .fc-card-name { font-size: 0.8rem; }
    .fc-card-price { font-size: 0.85rem; }
    .fc-card-brand { font-size: 0.58rem; }
    .fc-cta { font-size: 0.65rem; padding: 11px 28px; letter-spacing: 2px; }
    .fc-cta-wrap { margin-top: 36px; }
}

@media (max-width: 480px) {
    .fc-section { padding: 48px 0 56px; }
    .fc-inner { padding: 0 12px; }
    .fc-grid { gap: 8px; }
    .fc-card-name { font-size: 0.75rem; }
    .fc-card-price { font-size: 0.8rem; }
}


/* ==========================================
		WHAT OUR CUSTOMERS SAY
========================================== */
.wcs-section {
	background: #050505;
	background-image: radial-gradient(ellipse 70% 40% at 50% 100%, rgba(197, 160, 89, 0.05) 0%, transparent 70%);
	padding: 80px 0 90px;
	border-top: 1px solid rgba(197, 160, 89, 0.08);
	border-bottom: 1px solid rgba(197, 160, 89, 0.08);
}

.wcs-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Header */
.wcs-header {
	text-align: center;
	margin-bottom: 52px;
}

.wcs-kicker {
	display: block;
	font-family: 'Lato', sans-serif;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 6px;
	text-transform: uppercase;
	color: #c9a84c;
	margin-bottom: 14px;
}

.wcs-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(2rem, 4vw, 2.6rem);
	font-weight: 400;
	color: #f5efe0;
	margin: 0 0 6px;
	text-shadow: 0 2px 40px rgba(197, 160, 89, 0.15);
}

.wcs-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 18px;
}

.wcs-divider-line {
	display: block;
	width: 56px;
	height: 1px;
	background: linear-gradient(90deg, transparent, #c9a84c, transparent);
	opacity: .7;
}

.wcs-divider-diamond {
	color: #c9a84c;
	font-size: 0.55rem;
	opacity: .8;
}

/* Slider wrapper */
.wcs-slider-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
}

.wcs-track-outer {
	overflow: hidden;
	flex: 1;
}

.wcs-track {
	display: flex;
	gap: 20px;
	transition: transform 0.45s cubic-bezier(.25, .46, .45, .94);
	will-change: transform;
}

/* Review Card */
.wcs-card {
	flex: 0 0 calc(33.333% - 14px);
	background: #0f0f0f;
	border: 1px solid rgba(197, 160, 89, 0.12);
	padding: 26px 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: border-color 0.3s, box-shadow 0.3s;
	min-width: 0;
}

.wcs-card:hover {
	border-color: rgba(197, 160, 89, 0.35);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.wcs-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.wcs-stars {
	display: flex;
	gap: 2px;
}

.wcs-star {
	color: #f5a623;
	font-size: 1rem;
}

.wcs-star-empty {
	color: rgba(245, 166, 35, 0.25);
}

.wcs-time {
	font-family: 'Lato', sans-serif;
	font-size: 0.68rem;
	color: rgba(245, 239, 224, 0.35);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.wcs-text {
	font-family: 'Lato', sans-serif;
	font-size: 0.82rem;
	line-height: 1.65;
	color: rgba(245, 239, 224, 0.7);
	margin: 0;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Reviewer */
.wcs-reviewer {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
}

.wcs-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Lato', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	flex-shrink: 0;
	text-transform: uppercase;
}

.wcs-reviewer-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wcs-reviewer-name {
	font-family: 'Lato', sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	color: #f5efe0;
	display: flex;
	align-items: center;
	gap: 5px;
}

.wcs-verified {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.wcs-reviewer-meta {
	font-family: 'Lato', sans-serif;
	font-size: 0.65rem;
	color: rgba(245, 239, 224, 0.38);
	letter-spacing: 0.02em;
}

/* Arrows */
.wcs-arrow {
	background: rgba(197, 160, 89, 0.08);
	border: 1px solid rgba(197, 160, 89, 0.2);
	color: #c9a84c;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.25s, border-color 0.25s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wcs-arrow:hover {
	background: #c9a84c;
	color: #050505;
	border-color: #c9a84c;
}

.wcs-arrow:disabled {
	opacity: 0.25;
	cursor: not-allowed;
}

/* Dots */
.wcs-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 28px;
}

.wcs-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(197, 160, 89, 0.2);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background 0.3s, transform 0.3s;
}

.wcs-dot.active {
	background: #c9a84c;
	transform: scale(1.3);
}

/* Google Badge */
.wcs-google-badge {
	margin-top: 56px;
	display: flex;
	align-items: center;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
	padding: 28px 32px;
	background: #0d0d0d;
	border: 1px solid rgba(197, 160, 89, 0.12);
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

.wcs-google-logo {
	flex-shrink: 0;
}

.wcs-google-info {
	flex: 1;
	min-width: 180px;
}

.wcs-google-name {
	font-family: 'Lato', sans-serif;
	font-size: 0.9rem;
	font-weight: 700;
	color: #f5efe0;
	margin-bottom: 4px;
}

.wcs-google-rating-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 3px;
}

.wcs-google-score {
	font-family: 'Lato', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: #f5efe0;
}

.wcs-google-stars {
	color: #f5a623;
	font-size: 0.9rem;
	letter-spacing: 1px;
}

.wcs-google-label {
	font-family: 'Lato', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	color: #c9a84c;
}

.wcs-google-count {
	font-family: 'Lato', sans-serif;
	font-size: 0.68rem;
	color: rgba(245, 239, 224, 0.4);
	margin-bottom: 4px;
}

.wcs-google-powered {
	font-family: 'Lato', sans-serif;
	font-size: 0.62rem;
	color: rgba(245, 239, 224, 0.3);
	display: flex;
	align-items: center;
}

.wcs-leave-review {
	display: inline-flex;
	align-items: center;
	font-family: 'Lato', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	background: #c9a84c;
	color: #050505;
	padding: 10px 24px;
	text-decoration: none;
	border: 1px solid #c9a84c;
	transition: background 0.25s, color 0.25s;
	white-space: nowrap;
}

.wcs-leave-review:hover {
	background: transparent;
	color: #c9a84c;
}

/* Responsive */
@media (max-width: 900px) {
	.wcs-card {
		flex: 0 0 calc(50% - 10px);
	}
}

@media (max-width: 600px) {
	.wcs-section {
		padding: 56px 0 64px;
	}

	.wcs-inner {
		padding: 0 16px;
	}

	.wcs-card {
		flex: 0 0 calc(100% - 0px);
	}

	.wcs-arrow {
		width: 32px;
		height: 32px;
		font-size: 1.2rem;
	}

	.wcs-google-badge {
		padding: 20px;
		gap: 14px;
	}
}



/* ==========================================
LIVE GOLD RATE — Vishal Black Edition
========================================== */
.lgr-section {
	background: #080808;
	padding: 80px 0;
	border-top: 1px solid rgba(197, 160, 89, 0.08);
	border-bottom: 1px solid rgba(197, 160, 89, 0.08);
}

.lgr-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
}

.lgr-grid {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	margin-bottom: 50px;
}

/* Left Content */
.lgr-content {
	flex: 0 0 32%;
}

.lgr-kicker {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Lato', sans-serif;
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #c9a84c;
	margin-bottom: 24px;
}

.lgr-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #e74c3c;
	box-shadow: 0 0 8px rgba(231, 76, 60, 0.6);
	animation: lgrPulse 2s infinite;
}

@keyframes lgrPulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 6px rgba(231, 76, 60, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
	}
}

.lgr-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(2.5rem, 4vw, 3.6rem);
	font-weight: 400;
	color: #f5efe0;
	line-height: 1.1;
	margin: 0 0 16px;
}

.lgr-title-gold {
	color: #c9a84c;
}

.lgr-desc {
	font-family: 'Lato', sans-serif;
	font-size: 0.85rem;
	color: rgba(245, 239, 224, 0.7);
	margin: 0 0 12px;
}

.lgr-date {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Lato', sans-serif;
	font-size: 0.85rem;
	color: rgba(245, 239, 224, 0.7);
	margin-bottom: 30px;
}

.lgr-date svg {
	color: rgba(245, 239, 224, 0.5);
}

.lgr-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: 'Lato', sans-serif;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #f5efe0;
	text-decoration: none;
	background: #0d0d0d;
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 16px 24px;
	border-radius: 4px;
	transition: all .25s;
}

.lgr-btn:hover {
	background: #1a1a1a;
	border-color: rgba(197, 160, 89, 0.4);
	color: #c9a84c;
}

/* Right Cards */
.lgr-cards {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.lgr-card {
	position: relative;
	overflow: hidden;
	background: #121212;
	border: 1px solid rgba(255, 255, 255, 0.03);
	border-radius: 8px;
	padding: 24px 20px;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.4s, box-shadow 0.4s, background 0.4s;
}

/* Sweeping gold shimmer beam */
.lgr-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(197, 160, 89, 0.08) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-25deg);
	transition: all 0.7s ease;
	z-index: 1;
	pointer-events: none;
}

.lgr-card:hover {
	transform: translateY(-6px);
	border-color: rgba(197, 160, 89, 0.45);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(197, 160, 89, 0.15);
	background: linear-gradient(135deg, #161616 0%, #1a160d 100%);
}

.lgr-card:hover::after {
	left: 200%;
}

.lgr-card-header {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
}

.lgr-badge {
	font-family: 'Lato', sans-serif;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 1px;
	background: rgba(255, 255, 255, 0.04);
	padding: 6px 10px;
	border-radius: 4px;
}

.lgr-trend {
	position: relative;
	z-index: 2;
	font-family: 'Lato', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
}

.lgr-trend-up {
	color: #4ade80;
}

.lgr-trend-down {
	color: #f87171;
}

.lgr-card-body {
	position: relative;
	z-index: 2;
}

.lgr-metal {
	font-family: 'Lato', sans-serif;
	font-size: 0.9rem;
	font-weight: 500;
	color: #e0d8c8;
	margin-bottom: 6px;
}

.lgr-price {
	font-family: 'Lato', sans-serif;
	font-size: 1.8rem;
	font-weight: 800;
	color: #c9a84c;
	margin-bottom: 6px;
	letter-spacing: 0.5px;
}

.lgr-unit {
	font-family: 'Lato', sans-serif;
	font-size: 0.7rem;
	color: rgba(245, 239, 224, 0.4);
}

/* Disclaimer */
.lgr-disclaimer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: 'Lato', sans-serif;
	font-size: 0.7rem;
	color: rgba(245, 239, 224, 0.4);
	border-top: 1px solid rgba(255, 255, 255, 0.04);
	padding-top: 24px;
	text-align: center;
}

/* Responsive */
@media (max-width: 1100px) {
	.lgr-grid {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.lgr-content {
		text-align: center;
	}

	.lgr-kicker {
		justify-content: center;
	}

	.lgr-date {
		justify-content: center;
	}

	.lgr-btn {
		justify-content: center;
	}
}

@media (max-width: 768px) {
	.lgr-section {
		padding: 60px 0;
	}

	.lgr-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.lgr-card {
		padding: 20px;
	}

	.lgr-disclaimer {
		flex-direction: column;
	}
}

@media (max-width: 480px) {
	.lgr-cards {
		grid-template-columns: 1fr;
	}

	.lgr-title {
		font-size: 2.2rem;
	}
}



/* ==========================================
WHY GINFO JEWELLERS — Black Edition
========================================== */
.wgj-section {
	background: #050505;
	background-image: radial-gradient(ellipse 80% 40% at 50% 100%, rgba(197, 160, 89, 0.05) 0%, transparent 65%);
	padding: 84px 0 90px;
	border-top: 1px solid rgba(197, 160, 89, 0.08);
	border-bottom: 1px solid rgba(197, 160, 89, 0.08);
}

.wgj-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Header */
.wgj-header {
	text-align: center;
	margin-bottom: 60px;
}

.wgj-kicker {
	display: block;
	font-family: 'Lato', sans-serif;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 6px;
	text-transform: uppercase;
	color: #c9a84c;
	margin-bottom: 14px;
}

.wgj-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(2rem, 4vw, 2.8rem);
	font-weight: 400;
	color: #f5efe0;
	margin: 0 0 6px;
	text-shadow: 0 2px 40px rgba(197, 160, 89, 0.12);
}

.wgj-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 20px;
}

.wgj-divider-line {
	display: block;
	width: 56px;
	height: 1px;
	background: linear-gradient(90deg, transparent, #c9a84c, transparent);
	opacity: 0.6;
}

.wgj-divider-diamond {
	color: #c9a84c;
	font-size: 0.5rem;
	opacity: 0.8;
}

/* Grid */
.wgj-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
}

/* Card */
.wgj-card {
	position: relative;
	overflow: hidden;
	background: #0e0e0e;
	border: 1px solid rgba(197, 160, 89, 0.1);
	border-radius: 4px;
	padding: 36px 24px 32px;
	text-align: center;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		border-color 0.4s, box-shadow 0.4s, background 0.4s;
}

/* Shimmer beam on hover */
.wgj-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(to right,
			rgba(255, 255, 255, 0) 0%,
			rgba(197, 160, 89, 0.06) 50%,
			rgba(255, 255, 255, 0) 100%);
	transform: skewX(-20deg);
	transition: left 0.7s ease;
	pointer-events: none;
	z-index: 0;
}

.wgj-card:hover {
	transform: translateY(-6px);
	border-color: rgba(197, 160, 89, 0.35);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 18px rgba(197, 160, 89, 0.1);
	background: linear-gradient(160deg, #131007 0%, #0e0e0e 100%);
}

.wgj-card:hover::after {
	left: 200%;
}

/* Icon */
.wgj-icon-wrap {
	position: relative;
	z-index: 1;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(197, 160, 89, 0.08);
	border: 1px solid rgba(197, 160, 89, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
	color: #c9a84c;
	transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.wgj-card:hover .wgj-icon-wrap {
	background: rgba(197, 160, 89, 0.14);
	border-color: rgba(197, 160, 89, 0.4);
	box-shadow: 0 0 20px rgba(197, 160, 89, 0.15);
}

/* Text */
.wgj-card-title {
	position: relative;
	z-index: 1;
	font-family: 'Lato', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: #f5efe0;
	line-height: 1.35;
	margin: 0 0 12px;
	letter-spacing: 0.02em;
}

.wgj-card-desc {
	position: relative;
	z-index: 1;
	font-family: 'Lato', sans-serif;
	font-size: 0.84rem;
	color: rgba(245, 239, 224, 0.5);
	line-height: 1.7;
	margin: 0;
}

/* Responsive */
@media (max-width: 1100px) {
	.wgj-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.wgj-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
}

@media (max-width: 400px) {
	.wgj-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.wgj-section {
		padding: 56px 0 64px;
	}

	.wgj-inner {
		padding: 0 16px;
	}

	.wgj-card {
		padding: 28px 18px 24px;
	}
}


/**********************************************************
   SHOP THE LOOK (Adapted for Black Edition)
***********************************************************/
.vjna-shop-look-section {
  padding: 80px 0;
  background-color: var(--bg-light);
  border-top: 1px solid rgba(201, 168, 76, 0.1);
  overflow: hidden;
}

.vjna-shop-look-container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
}

.vjna-shop-look-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 40px;
  align-items: stretch;
}

.vjna-shop-look-banner,
.vjna-shop-look-grid-wrapper,
.vjna-stl-card {
  min-width: 0;
}

.vjna-shop-look-banner {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  height: 100%;
  min-height: 500px;
}

.vjna-shop-look-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  height: 100%;
  align-content: start;
}

.vjna-shop-look-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.vjna-shop-look-banner:hover img {
  transform: scale(1.05);
}

.vjna-shop-look-banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  pointer-events: none;
}

.vjna-shop-look-heading {
  position: absolute;
  bottom: 30px;
  left: 30px;
  color: #fff;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.5rem, 4vw, 4.5rem);
  line-height: 1.1;
  font-weight: 300;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  margin: 0;
}

/* Card Styling */
.vjna-stl-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.vjna-stl-card:hover {
  transform: translateY(-5px);
}

.vjna-stl-img-box {
  position: relative;
  background: #111;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.vjna-stl-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.vjna-stl-card:hover .vjna-stl-img-box img {
  transform: scale(1.05);
}

.vjna-stl-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #c9a84c;
  color: #050505;
  font-family: 'Lato', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 2px;
  z-index: 2;
  text-transform: uppercase;
}

.vjna-stl-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px;
}

.vjna-stl-brand {
  font-family: 'Lato', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-subtitle);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vjna-stl-title {
  font-family: 'Lato', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-title);
  margin: 0;
  letter-spacing: 0.03em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vjna-stl-rating-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  margin-bottom: 2px;
}

._vjna-stl-star {
  color: #f5a623;
}

._vjna-stl-rating-val {
  color: rgba(245, 239, 224, 0.6);
}

.vjna-stl-star {
  color: #f5a623;
}

.vjna-stl-rating-val {
  color: rgba(0, 0, 0, 0.7);
}

.vjna-stl-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vjna-stl-price {
  font-family: 'Lato', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(var(--color-orange), 1);
}

.vjna-stl-orig {
  font-family: 'Lato', sans-serif;
  font-size: 0.85rem;
  color: var(--color-dark);
  text-decoration: line-through;
}

.vjna-stl-swatches {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.vjna-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.vjna-swatch:hover {
  transform: scale(1.15);
  border-color: rgba(201, 168, 76, 0.5);
}

/* Responsive */
@media (max-width: 1200px) {
  .vjna-shop-look-layout {
    grid-template-columns: 1fr;
  }
  .vjna-shop-look-banner {
    aspect-ratio: 16/9;
    min-height: auto;
  }
}

@media (max-width: 991px) {
  .vjna-shop-look-products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .vjna-shop-look-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .vjna-shop-look-section {
    padding: 40px 0;
  }
}

@media (max-width: 480px) {
  .vjna-shop-look-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .vjna-stl-title {
    font-size: 0.75rem;
  }
  .vjna-stl-price {
    font-size: 0.9rem;
  }
  .vjna-stl-orig {
    font-size: 0.75rem;
  }
  .vjna-shop-look-banner-overlay {
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0,0,0,0.2) 100%);
  }
}



/*********************************** 
	YOUTUBE SECTION
***********************************/
.yt-section {
	background: #0a0a0a;
	padding: 70px 0 80px;
	border-top: 1px solid rgba(255, 0, 0, .1);
	border-bottom: 1px solid rgba(255, 255, 255, .05);
}

/* Header */
.yt-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 32px;
}

.yt-header-left {
	display: flex;
	align-items: center;
	gap: 14px;
}

.yt-logo-icon {
	height: 22px;
}

.yt-handle {
	font-family: 'Lato', sans-serif;
	font-size: .85rem;
	color: rgba(240, 237, 232, .5);
}

.yt-subscribe-btn {
	display: inline-flex;
	align-items: center;
	background: #FF0000;
	color: #fff;
	font-family: 'Lato', sans-serif;
	font-size: .8rem;
	font-weight: 700;
	padding: 8px 18px;
	border-radius: 8px;
	text-decoration: none;
	transition: opacity .2s, transform .2s;
	letter-spacing: .3px;
}

.yt-subscribe-btn:hover {
	opacity: .88;
	transform: translateY(-1px);
	color: #fff;
}

/* Sub label */
.yt-sub-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Lato', sans-serif;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: rgba(240, 237, 232, .55);
	margin-bottom: 18px;
}

.yt-count-badge {
	background: rgba(255, 0, 0, .15);
	color: #FF0000;
	border: 1px solid rgba(255, 0, 0, .25);
	border-radius: 20px;
	padding: 1px 9px;
	font-size: .7rem;
	letter-spacing: 0;
}

/* ── Video scroll track ── */
.yt-scroll-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding-bottom: 8px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 0, 0, .3) transparent;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.yt-scroll-track::-webkit-scrollbar {
	height: 4px;
}

.yt-scroll-track::-webkit-scrollbar-track {
	background: transparent;
}

.yt-scroll-track::-webkit-scrollbar-thumb {
	background: rgba(255, 0, 0, .3);
	border-radius: 2px;
}

.yt-card {
	flex-shrink: 0;
	width: 280px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	text-align: left;
	padding: 0;
	transition: border-color .25s, transform .3s, box-shadow .3s;
	scroll-snap-align: start;
}

.yt-card:hover {
	border-color: rgba(255, 0, 0, .35);
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(255, 0, 0, .1);
}

.yt-thumb-wrap {
	position: relative;
	aspect-ratio: 16/9;
	overflow: hidden;
	background: #111;
}

.yt-thumb-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.yt-card:hover .yt-thumb-wrap img {
	transform: scale(1.05);
}

.yt-play-btn {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .25s;
}

.yt-card:hover .yt-play-btn {
	opacity: 1;
}

.yt-play-btn i {
	font-size: 2.2rem;
	color: #fff;
	background: rgba(255, 0, 0, .9);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 20px rgba(255, 0, 0, .5);
}

.yt-card-info {
	padding: 12px 14px 14px;
}

.yt-card-title {
	font-family: 'Lato', sans-serif;
	font-size: .95rem;
	font-weight: 600;
	color: #f0ede8;
	line-height: 1.45;
	margin: 0 0 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.yt-card-meta {
	font-family: 'Lato', sans-serif;
	font-size: .72rem;
	color: rgba(255, 255, 255, .35);
}

/* ── Shorts grid ── */
.yt-shorts-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
}

@media(max-width:1024px) {
	.yt-shorts-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media(max-width:600px) {
	.yt-shorts-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.yt-short-card {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-align: left;
}

.yt-short-thumb {
	position: relative;
	aspect-ratio: 9/16;
	border-radius: 10px;
	overflow: hidden;
	background: #111;
	border: 1px solid rgba(255, 255, 255, .07);
	transition: border-color .25s, transform .3s;
}

.yt-short-card:hover .yt-short-thumb {
	border-color: rgba(255, 0, 0, .4);
	transform: translateY(-3px);
}

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

.yt-short-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .25s;
}

.yt-short-card:hover .yt-short-overlay {
	opacity: 1;
}

.yt-short-play {
	width: 38px;
	height: 38px;
	background: rgba(255, 0, 0, .9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1rem;
}

.yt-short-label {
	position: absolute;
	bottom: 6px;
	left: 6px;
	background: rgba(255, 0, 0, .85);
	color: #fff;
	font-family: 'Lato', sans-serif;
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	gap: 3px;
}

.yt-short-title {
	font-family: 'Lato', sans-serif;
	font-size: .90rem;
	color: rgba(240, 237, 232, .6);
	margin: 6px 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.4;
}

/* CTA */
.yt-cta-row {
	text-align: center;
	margin-top: 36px;
}

.yt-cta-btn {
	display: inline-flex;
	align-items: center;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: .85rem;
	letter-spacing: .4px;
	text-decoration: none;
	color: #fff;
	border: 1px solid rgba(255, 0, 0, .3);
	background: rgba(255, 0, 0, .08);
	padding: 12px 30px;
	border-radius: 10px;
	transition: background .25s, border-color .25s, transform .25s;
}

.yt-cta-btn:hover {
	background: rgba(255, 0, 0, .18);
	border-color: rgba(255, 0, 0, .6);
	color: #fff;
	transform: translateY(-2px);
}

/* Modal */
.yt-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .92);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s;
	backdrop-filter: blur(8px);
}

.yt-modal.open {
	opacity: 1;
	pointer-events: auto;
}

.yt-modal-box {
	position: relative;
	width: 92%;
	max-width: 900px;
	background: #111;
	border-radius: 18px;
	border: 1px solid rgba(255, 0, 0, .18);
	overflow: hidden;
	transform: scale(.92);
	transition: transform .3s;
}

.yt-modal.open .yt-modal-box {
	transform: scale(1);
}

.yt-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	background: rgba(0, 0, 0, .5);
	border: 1px solid rgba(255, 255, 255, .15);
	color: #fff;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 16px;
	transition: .2s;
}

.yt-modal-close:hover {
	background: rgba(255, 255, 255, .15);
}

.yt-modal-title {
	padding: 14px 54px 14px 18px;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1rem;
	color: #f0ede8;
	font-weight: 700;
	border-bottom: 1px solid rgba(255, 0, 0, .12);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.yt-modal-player {
	position: relative;
}

.yt-modal-player.landscape {
	aspect-ratio: 16/9;
}

.yt-modal-player.portrait {
	aspect-ratio: 9/16;
	max-height: 80vh;
}

.yt-modal-player iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

@media(max-width:767px) {
	.yt-section {
		padding: 50px 0 60px;
	}

	.yt-card {
		width: 230px;
	}
}


/*********************************************** 
   INSTAGRAM SECTION — Premium Redesign
 ************************************************/

.ig-section {
    position: relative;
    background: var(--bg-light);
    padding: 90px 0 100px;
    overflow: hidden;
}

.ig-section-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(220,39,67,.07) 0%, transparent 70%),
        radial-gradient(ellipse 40% 30% at 15% 60%, rgba(188,24,136,.05) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 85% 70%, rgba(240,148,51,.04) 0%, transparent 60%);
    pointer-events: none;
}

.ig-container {
    position: relative;
    z-index: 1;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ── Section Header ── */
.ig-section-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 44px;
}

.ig-header-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.9), transparent);
}

.ig-header-center {
    flex-shrink: 0;
}

.ig-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: 'Lato', sans-serif;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(0,0,0,.9);
}

.ig-header-badge svg {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    flex-shrink: 0;
}

/* ── Profile Card ── */
.ig-profile-card {
    display: flex;
    align-items: center;
    gap: 40px;
    background: rgba(0,0,0,.9);
    border: 1px solid rgba(0,0,0,1);
    border-radius: 24px;
    padding: 32px 36px;
    margin-bottom: 4px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 1px 0 0 rgba(255,255,255,.05) inset,
        0 32px 64px rgba(0,0,0,.4);
    transition: box-shadow .3s ease;
}

.ig-profile-card:hover {
    box-shadow:
        0 1px 0 0 rgba(255,255,255,.05) inset,
        0 40px 80px rgba(0,0,0,.5);
}

/* ── Avatar ── */
.ig-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    text-decoration: none;
    display: block;
}

.ig-avatar-ring {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(
        from 0deg,
        #f09433 0%,
        #e6683c 15%,
        #dc2743 30%,
        #cc2366 50%,
        #bc1888 70%,
        #f09433 100%
    );
    animation: ig-ring-spin 6s linear infinite;
    transition: transform .3s ease;
}

.ig-avatar-wrap:hover .ig-avatar-ring {
    transform: scale(1.06);
}

@keyframes ig-ring-spin {
    to { filter: hue-rotate(360deg); }
}

.ig-avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #050505;
    overflow: hidden;
    background: #1a1a1a;
}

.ig-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.ig-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c9a84c;
    font-size: 2rem;
}

.ig-live-badge {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #dc2743, #bc1888);
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: .5rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    padding: 2px 7px;
    border-radius: 20px;
    border: 2px solid #050505;
    white-space: nowrap;
}

/* ── Profile Info ── */
.ig-profile-info {
    flex: 1;
    min-width: 0;
}

.ig-profile-top {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.ig-handle-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ig-handle {
    font-family: 'Lato', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #f5f0ea;
    letter-spacing: -.01em;
}

.ig-verified-badge {
    font-family: 'Lato', sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #dc2743;
    background: rgba(220,39,67,.1);
    border: 1px solid rgba(220,39,67,.2);
    padding: 2px 7px;
    border-radius: 20px;
    text-transform: uppercase;
}

.ig-follow-btn {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #dc2743 0%, #bc1888 100%);
    color: #fff !important;
    font-family: 'Lato', sans-serif;
    font-size: .8rem;
    font-weight: 700;
    padding: 7px 18px;
    border-radius: 10px;
    text-decoration: none;
    letter-spacing: .3px;
    box-shadow: 0 4px 16px rgba(220,39,67,.3);
    transition: all .25s ease;
    white-space: nowrap;
}

.ig-follow-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(220,39,67,.45);
    color: #fff !important;
}

/* ── Stats ── */
.ig-profile-stats {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 18px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    padding: 14px 20px;
    width: fit-content;
}

.ig-stat {
    text-align: center;
    padding: 0 20px;
}

.ig-stat:first-child {
    padding-left: 0;
}

.ig-stat:last-child {
    padding-right: 0;
}

.ig-stat strong {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: 3px;
    letter-spacing: -.02em;
}

.ig-stat span {
    font-family: 'Lato', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    color: rgba(255,255,255,.35);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.ig-stat-divider {
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,.07);
    flex-shrink: 0;
}

/* ── Bio ── */
.ig-bio {
    font-family: 'Lato', sans-serif;
}

.ig-bio-name {
    font-size: .9rem;
    font-weight: 700;
    color: #f0ede8;
    margin: 0 0 4px;
}

.ig-bio-text {
    font-size: .82rem;
    color: rgba(255,255,255,.5);
    line-height: 1.7;
    margin: 0;
}

/* ── Photo Grid ── */
.ig-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-bottom: 36px;
    margin-top: 5px;
    border-radius: 16px;
    overflow: hidden;
}

.ig-grid-item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: block;
    cursor: pointer;
    background: #111;
}

.ig-grid-featured {
    grid-row: span 2;
    aspect-ratio: unset;
}

.ig-grid-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.22,1,.36,1), filter .5s ease;
    filter: brightness(.9) saturate(1.05);
}

.ig-grid-item:hover .ig-grid-img {
    transform: scale(1.08);
    filter: brightness(.45) saturate(1.2);
}

/* Media badge (video / album) */
.ig-media-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    color: #fff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
    z-index: 2;
}

.ig-media-video {
    background: rgba(0,0,0,.55);
}

.ig-media-album {
    background: rgba(201,168,76,.7);
}

/* Hover overlay */
.ig-grid-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 50%, transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transition: opacity .35s ease;
    z-index: 3;
    padding: 16px;
}

.ig-grid-item:hover .ig-grid-overlay {
    opacity: 1;
}

.ig-overlay-content {
    text-align: center;
    width: 100%;
}

.ig-play-btn {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 8px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
}

.ig-caption {
    font-family: 'Lato', sans-serif;
    font-size: .72rem;
    color: rgba(255,255,255,.85);
    line-height: 1.5;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ig-view-link {
    font-family: 'Lato', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    color: rgba(255,255,255,.6);
    letter-spacing: .8px;
    text-transform: uppercase;
}

/* ── CTA Row ── */
.ig-cta-row {
    text-align: center;
    margin-top: 8px;
}

.ig-cta-btn {
    display: inline-flex;
    align-items: center;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .3px;
    text-decoration: none;
    color: rgba(255,255,255,.8);
    background: rgba(0,0,0,.9);
    border: 1px solid rgba(0,0,0,.9);
    padding: 13px 32px;
    border-radius: 50px;
    transition: all .3s ease;
    box-shadow: 0 2px 20px rgba(0,0,0,.3);
}

.ig-cta-btn:hover {
    background: rgba(220,39,67,.9);
    border-color: rgba(220,39,67,.9);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(220,39,67,.15);
}

/* ════ RESPONSIVE ════ */
@media (max-width: 767px) {
    .ig-section { padding: 60px 0 70px; }

    .ig-profile-card {
        gap: 20px;
        padding: 22px 20px;
        border-radius: 18px;
    }

    .ig-avatar-ring {
        width: 76px;
        height: 76px;
    }

    .ig-handle { font-size: 1rem; }

    .ig-profile-stats {
        padding: 10px 14px;
    }

    .ig-stat { padding: 0 12px; }
    .ig-stat strong { font-size: .95rem; }

    .ig-grid { gap: 3px; border-radius: 12px; }

    .ig-grid-featured { grid-row: span 1; aspect-ratio: 1 / 1; }
}

@media (max-width: 520px) {
    .ig-section-header { gap: 12px; margin-bottom: 28px; }
    .ig-header-badge { letter-spacing: 4px; }

    .ig-profile-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 28px 18px;
        gap: 16px;
    }

    .ig-avatar-ring { width: 90px; height: 90px; }

    .ig-profile-top { justify-content: center; }
    .ig-handle-wrap { justify-content: center; }

    .ig-profile-stats {
        width: 100%;
        justify-content: center;
    }

    .ig-stat { flex: 1; }

    .ig-bio { text-align: center; }

    .ig-grid { gap: 2px; border-radius: 10px; }

    .ig-cta-btn { width: 100%; justify-content: center; border-radius: 14px; padding: 14px 24px; }
}


/* ==========================================
   ADVANCE BOOKING CTA
   ========================================== */
.booking-cta-section {
    padding: 80px 0;
    background: #050505;
}

.cta-banner {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    padding: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 400px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.cta-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #111;
    z-index: 1;
}

.cta-bg::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 60%; height: 100%;
    background: radial-gradient(circle at 100% 50%, rgba(201, 168, 76, 0.15) 0%, transparent 70%);
}

.cta-artwork {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 50%;
    z-index: 2;
    mask-image: linear-gradient(to right, transparent 0%, black 40%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40%);
}

.cta-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.7;
    mix-blend-mode: luminosity; /* Gives it a highly stylized, cinematic look */
    transition: opacity 0.5s ease;
}

.cta-banner:hover .cta-artwork img {
    opacity: 0.9;
    mix-blend-mode: normal;
}

.cta-content {
    position: relative;
    z-index: 3;
    max-width: 550px;
}

.cta-kicker {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #c9a84c;
    margin-bottom: 12px;
}

.cta-heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.2rem, 3.5vw, 3.2rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 20px 0;
}

.cta-text {
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    color: rgba(245, 239, 224, 0.7);
    line-height: 1.6;
    margin: 0 0 32px 0;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.cta-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    font-family: 'Lato', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.cta-buttons .btn-primary {
    background: #c9a84c;
    color: #050505;
    border: 1px solid #c9a84c;
}

.cta-buttons .btn-primary:hover {
    background: #e4c978;
    border-color: #e4c978;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(201, 168, 76, 0.2);
}

.cta-buttons .btn-outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.cta-buttons .btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 991px) {
    .cta-artwork {
        width: 60%;
        mask-image: linear-gradient(to right, transparent 0%, black 60%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 60%);
    }
}

@media (max-width: 768px) {
    .booking-cta-section {
        padding: 50px 0;
    }
    .cta-banner {
        padding: 50px 24px;
        text-align: center;
        justify-content: center;
        min-height: auto;
    }
    .cta-artwork {
        width: 100%;
        opacity: 0.3;
        mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
    }
    .cta-bg::before {
        width: 100%;
        background: radial-gradient(circle at 50% 100%, rgba(201, 168, 76, 0.15) 0%, transparent 70%);
    }
    .cta-buttons {
        justify-content: center;
        width: 100%;
    }
    .cta-buttons a {
        width: 100%;
    }
}


															/********************************************************

																			CATALOGUE PAGE CSS

															********************************************************/


.attr-filter-box {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid rgba(255,255,255,0.15);
	color: #ccc;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s ease;
	background: rgba(255,255,255,0.05);
}
.attr-filter-item input:checked + .attr-filter-box {
	border-color: #D4AF37;
	color: #D4AF37;
	background: rgba(212,175,55,0.1);
}
.attr-filter-swatch {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: block;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all 0.2s ease;
	position: relative;
}
.attr-filter-item input:checked + .attr-filter-swatch {
	border-color: #D4AF37;
	transform: scale(1.15);
	box-shadow: 0 0 10px rgba(212,175,55,0.4);
}
.attr-filter-item input:checked + .attr-filter-swatch::after {
	content: '\F272';
	font-family: 'bootstrap-icons';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 12px;
	text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
/* Dual Range Slider Styles */
.multi-range-slider {
	position: relative;
	width: 100%;
	height: 20px;
	margin-top: 15px;
}
.multi-range-slider input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	outline: none;
	position: absolute;
	margin: 0;
	top: 0;
	background: transparent;
	pointer-events: none;
	z-index: 2;
}
.multi-range-slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 18px;
	width: 18px;
	border-radius: 50%;
	background: #D4AF37;
	cursor: pointer;
	pointer-events: auto;
	position: relative;
	z-index: 3;
	border: 2px solid #000;
}
.multi-range-slider input[type="range"]::-moz-range-thumb {
	height: 18px;
	width: 18px;
	border-radius: 50%;
	background: #D4AF37;
	cursor: pointer;
	pointer-events: auto;
	position: relative;
	z-index: 3;
	border: 2px solid #000;
}
.slider-track {
	width: 100%;
	height: 4px;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	border-radius: 5px;
	background: rgba(255,255,255,0.2);
	z-index: 1;
}

															/********************************************************

																			PRODUCT PAGE CSS

															********************************************************/

/* Prevent any child from causing horizontal scroll */
.pd-wrap,
.pd-wrap * {
	box-sizing: border-box;
}

.pd-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 16px 20px 40px;
	overflow-x: hidden;
	/* clip any accidental overflow */
}

.pd-breadcrumb {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: #888;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.pd-breadcrumb a {
	color: #888;
	text-decoration: none;
	transition: color .2s;
}

.pd-breadcrumb a:hover {
	color: #D4AF37;
}

.pd-breadcrumb span {
	color: #D4AF37;
}

/* ── GRID: 40 / 60 desktop, single column mobile ── */
.pd-grid {
	display: grid;
	/* minmax(0,…) prevents columns from overflowing their track */
	grid-template-columns: minmax(0, 2fr) minmax(0, 2fr);
	gap: 32px;
	align-items: start;
	width: 100%;
}

@media(max-width: 900px) {
	.pd-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.pd-wrap {
		padding: 12px 14px 40px;
	}

	/* Ensure every direct child of pd-wrap cannot exceed viewport */
	.pd-wrap>* {
		max-width: 100%;
	}
}

/* Gallery */
.pd-gallery {
	position: sticky;
	top: 80px;
	min-width: 0;
	/* prevents grid blowout */
}

/* On mobile, disable sticky */
@media(max-width: 900px) {
	.pd-gallery {
		position: relative;
		top: auto;
	}
}

.pd-main-img-wrap {
	position: relative;
	background: #111;
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 1/1;
	cursor: crosshair;
	width: 100%;
}

.pd-main-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity .3s;
	pointer-events: none;
}

/* Hover Zoom Lens Overlay */
.pd-zoom-lens {
	display: none;
	position: absolute;
	border: 2px solid rgba(212, 175, 55, 0.75);
	background: rgba(212, 175, 55, 0.1);
	pointer-events: none;
	border-radius: 4px;
	z-index: 10;
	box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.4), 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* Zoom Result Panel – full overlay on top of the image itself */
.pd-zoom-result {
	display: none;
	position: absolute;
	inset: 0;
	/* covers 100% of pd-main-img-wrap */
	overflow: hidden;
	border-radius: 14px;
	z-index: 20;
	pointer-events: none;
	cursor: crosshair;
}

.pd-zoom-result img {
	position: absolute;
	max-width: none;
	pointer-events: none;
	will-change: transform;
}


/* On mobile: disable hover zoom entirely, use Panzoom pinch */
@media(max-width: 900px) {
	.pd-main-img-wrap {
		cursor: default;
		touch-action: none;
	}

	.pd-main-img-wrap img {
		pointer-events: auto;
	}

	.pd-zoom-lens {
		display: none !important;
	}

	.pd-zoom-result {
		display: none !important;
	}

	.pd-zoom-hint {
		display: none !important;
	}
}

.pd-img-badges {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pd-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .5px;
	backdrop-filter: blur(8px);
}

.pd-badge-gold {
	background: rgba(212, 175, 55, .9);
	color: #000;
}

.pd-badge-dark {
	background: rgba(0, 0, 0, .65);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .15);
}

.pd-zoom-hint {
	position: absolute;
	bottom: 12px;
	right: 12px;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	font-size: 10px;
	padding: 4px 10px;
	border-radius: 20px;
	pointer-events: none;
	backdrop-filter: blur(4px);
	transition: opacity .3s;
}

/* Hide zoom hint on mobile */
@media(max-width: 900px) {
	.pd-zoom-hint {
		display: none;
	}
}

.pd-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
}

.pd-thumbs::-webkit-scrollbar {
	height: 3px;
}

.pd-thumbs::-webkit-scrollbar-thumb {
	background: #D4AF37;
	border-radius: 3px;
}

.pd-thumb {
	width: 72px;
	height: 72px;
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid transparent;
	cursor: pointer;
	flex-shrink: 0;
	transition: border-color .2s;
}

.pd-thumb:hover,
.pd-thumb.active {
	border-color: #D4AF37;
}

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

/* Info Panel */
.pd-info {
	min-width: 0;
	/* prevents grid column blowout */
	width: 100%;
}

.pd-sku {
	font-size: 10px;
	letter-spacing: 1.5px;
	color: #666;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.pd-name {
	font-family: 'Playfair Display', serif;
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
	margin-bottom: 6px;
}

.pd-meta {
	font-size: 13px;
	color: #D4AF37;
	margin-bottom: 16px;
}

.pd-desc-short {
	font-size: 15px;
	color: #aaa;
	line-height: 1.7;
	margin-bottom: 20px;
	border-left: 2px solid rgba(212, 175, 55, .3);
	padding-left: 14px;
}

/* Attributes */
.pd-attributes {
	margin-bottom: 24px;
}

.pd-attr-group {
	margin-bottom: 20px;
}

.pd-attr-label {
	font-size: 13px;
	color: #fff;
	margin-bottom: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	letter-spacing: 0.5px;
}

.pd-size-guide {
	color: #aaa;
	text-decoration: none;
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: color 0.2s;
	border-bottom: 1px solid #666;
}

.pd-size-guide:hover {
	color: #fff;
	border-bottom-color: #fff;
}

.pd-attr-options {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* .pd-attr-box { min-width: 38px; height: 38px; padding: 0 10px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.15); font-size: 13px; color: #fff; cursor: pointer; transition: all .2s; border-radius: 4px; } */
.pd-attr-box {
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .15);
	font-size: 11px;
	color: #fff;
	cursor: pointer;
	transition: all .2s;
	border-radius: 4px;
}

.pd-attr-box:hover {
	border-color: #aaa;
}

.pd-attr-box.selected {
	border-color: #fff;
	background: rgba(255, 255, 255, .1);
	font-weight: bold;
}

.pd-attr-color {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border: 2px solid #111;
	cursor: pointer;
	transition: all .2s;
	outline: 1px solid rgba(255, 255, 255, .2);
	outline-offset: 1px;
}

.pd-attr-color:hover {
	outline-color: #aaa;
}

.pd-attr-color.selected {
	outline-color: #fff;
	outline-width: 2px;
}

/* Urgency Banner */
.pd-urgency-banner {
	background: rgba(30, 80, 40, 0.2);
	border: 1px solid rgba(46, 139, 87, 0.3);
	border-radius: 8px;
	padding: 14px 18px;
	margin-bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pd-urgency-viewers {
	font-size: 15px;
	color: #81c784;
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
}

.pd-urgency-timer {
	font-size: 14px;
	color: #ddd;
}

.pd-urgency-timer span {
	color: #ef5350;
	font-weight: 600;
	margin: 0 2px;
}

.pd-urgency-timer strong {
	color: #fff;
}

/* Price Card */
.pd-price-card {
	background: linear-gradient(135deg, #111 0%, #1a1a1a 100%);
	border: 1px solid rgba(212, 175, 55, .25);
	border-radius: 14px;
	padding: 18px 20px;
	margin-bottom: 16px;
	position: relative;
	overflow: hidden;
}

.pd-price-card::before {
	content: '';
	position: absolute;
	top: -40px;
	right: -40px;
	width: 120px;
	height: 120px;
	background: radial-gradient(circle, rgba(212, 175, 55, .12) 0%, transparent 70%);
	pointer-events: none;
}

.pd-price-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #666;
	margin-bottom: 4px;
}

.pd-price-main {
	font-family: 'Playfair Display', serif;
	font-size: clamp(26px, 4vw, 38px);
	font-weight: 700;
	color: #D4AF37;
	line-height: 1;
	margin-bottom: 4px;
}

.pd-price-live {
	font-size: 11px;
	color: #777;
}

.pd-breakdown {
	margin-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .06);
	padding-top: 12px;
}

.pd-breakdown-toggle {
	background: none;
	border: none;
	color: #888;
	font-size: 12px;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	margin-bottom: 10px;
}

.pd-breakdown-toggle:hover {
	color: #D4AF37;
}

.pd-breakdown-rows {
	display: none;
}

.pd-breakdown-rows.open {
	display: block;
}

.pd-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	color: #777;
	padding: 5px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.pd-row:last-child {
	border: none;
}

.pd-row .val {
	color: #ddd;
	font-weight: 600;
}

.pd-row.total {
	font-size: 13px;
	color: #aaa;
	border-top: 1px solid rgba(212, 175, 55, .2);
	padding-top: 8px;
	margin-top: 4px;
}

.pd-row.total .val {
	color: #D4AF37;
}

/* Action Buttons */
.pd-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 20px;
}

.pd-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 20px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .5px;
	cursor: pointer;
	border: none;
	transition: all .25s;
	text-decoration: none;
}

.pd-btn-gold {
	background: linear-gradient(135deg, #D4AF37, #F5D76E);
	color: #000;
}

.pd-btn-gold:hover {
	box-shadow: 0 6px 20px rgba(212, 175, 55, .35);
	transform: translateY(-1px);
	color: #000;
}

.pd-btn-outline {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .15);
	color: #ccc;
}

.pd-btn-outline:hover {
	border-color: #D4AF37;
	color: #D4AF37;
	background: rgba(212, 175, 55, .05);
}

.pd-btn-green {
	background: linear-gradient(135deg, #1a7a4c, #2ea664);
	color: #fff;
}

.pd-btn-green:hover {
	box-shadow: 0 6px 20px rgba(46, 166, 100, .25);
	transform: translateY(-1px);
	color: #fff;
}

.pd-btn-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

/* Specs */
.pd-specs {
	background: #111;
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 12px;
	padding: 16px 18px;
	margin-bottom: 16px;
}

.pd-specs-title {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
	margin-bottom: 12px;
}

.pd-specs-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.pd-spec-item {}

.pd-spec-label {
	font-size: 10px;
	color: #555;
	text-transform: uppercase;
	letter-spacing: .6px;
	margin-bottom: 2px;
}

.pd-spec-val {
	font-size: 13px;
	color: #e0d8c8;
	font-weight: 600;
}

.pd-spec-val.gold {
	color: #D4AF37;
}

/* Wishlist btn */
.pd-wishlist-btn {
	position: absolute;
	top: 12px;
	right: 12px;
	background: rgba(0, 0, 0, .65);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 50%;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all .2s;
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 16px;
}

.pd-wishlist-btn:hover,
.pd-wishlist-btn.active {
	background: rgba(220, 38, 38, .85);
	border-color: transparent;
	color: #fff;
}

/* Share btn */
.pd-share-btn {
	position: absolute;
	top: 60px;
	right: 12px;
	background: rgba(0, 0, 0, .65);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 50%;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all .2s;
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 15px;
	z-index: 5;
}

.pd-share-btn:hover {
	background: #D4AF37;
	border-color: transparent;
	color: #000;
	transform: scale(1.08);
}

/* Tabs for extra info */
.pd-tabs {
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	display: flex;
	gap: 0;
	margin-bottom: 16px;
	overflow-x: auto;
}

.pd-tab {
	padding: 10px 18px;
	font-size: 16px;
	font-weight: 600;
	color: #666;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: all .2s;
}

.pd-tab:hover {
	color: #D4AF37;
}

.pd-tab.active {
	color: #D4AF37;
	border-bottom-color: #D4AF37;
}

.pd-tab-pane {
	display: none;
	font-size: 14px;
	color: #ccc;
	line-height: 1.8;
}

.pd-tab-pane.active {
	display: block;
}

.pd-tab-pane:empty::after {
	content: 'Not specified.';
	color: #555;
	font-style: italic;
}

/* Stock badge */
.pd-stock {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 20px;
	margin-bottom: 14px;
}

.pd-stock-in {
	background: rgba(74, 222, 128, .1);
	color: #4ade80;
	border: 1px solid rgba(74, 222, 128, .2);
}

.pd-stock-out {
	background: rgba(239, 68, 68, .1);
	color: #f87171;
	border: 1px solid rgba(239, 68, 68, .2);
}

.pd-stock-mto {
	background: rgba(251, 191, 36, .1);
	color: #fbbf24;
	border: 1px solid rgba(251, 191, 36, .2);
}


/********************************************************
	RELATED	PRODUCT CSS
********************************************************/

/* ── Section wrapper ── */
.rp-section {
	/* max-width: 1380px; */
	max-width: 100%;
	margin: 70px auto 0;
	padding: 0 0 70px;
	overflow: hidden;
}

/* ── Gold shimmer divider ── */
.rp-divider {
	height: 1px;
	max-width: 1380px;
	margin: 0 auto 70px;
	background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5) 30%, rgba(212, 175, 55, 0.5) 70%, transparent);
}

/* ── Heading ── */
.rp-heading {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 40px 40px;
}

.rp-heading-line {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, rgba(212, 175, 55, 0.5), transparent);
}

.rp-heading-line.right {
	background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5));
}

.rp-heading h2 {
	font-family: 'Cormorant Garamond', 'Playfair Display', serif;
	font-size: clamp(20px, 3vw, 28px);
	font-weight: 600;
	color: #f5e6b0;
	white-space: nowrap;
	letter-spacing: 0.06em;
	margin: 0;
}

.rp-heading h2 span {
	color: #D4AF37;
}

/* ── Swiper container ── */
.rp-swiper-outer {
	position: relative;
	padding: 0 44px 52px;
}

.rp-swiper {
	overflow: visible !important;
}

/* ── Card ── */
.rp-card {
	background: linear-gradient(160deg, #141008 0%, #0d0b07 100%);
	border: 1px solid rgba(212, 175, 55, 0.18);
	border-radius: 18px;
	overflow: hidden;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
		border-color 0.3s ease,
		box-shadow 0.35s ease;
	position: relative;
}

.rp-card:hover {
	transform: translateY(-8px) scale(1.02);
	border-color: rgba(212, 175, 55, 0.6);
	box-shadow: 0 24px 56px rgba(0, 0, 0, 0.65),
		0 0 0 1px rgba(212, 175, 55, 0.18),
		0 0 36px rgba(212, 175, 55, 0.1);
}

/* ── Card image ── */
.rp-card-img {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #0a0a0a;
	position: relative;
}

.rp-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.rp-card:hover .rp-card-img img {
	transform: scale(1.1);
}

/* ── Featured badge ── */
.rp-card-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: linear-gradient(135deg, #D4AF37, #f0d060);
	color: #000;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 20px;
	z-index: 2;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* ── Hover overlay ── */
.rp-card-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 3;
}

.rp-card:hover .rp-card-overlay {
	opacity: 1;
}

.rp-card-overlay-text {
	background: rgba(212, 175, 55, 0.92);
	color: #000;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 9px 20px;
	border-radius: 30px;
	backdrop-filter: blur(6px);
}

/* ── Card info ── */
.rp-card-info {
	padding: 16px 16px 18px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rp-card-metal {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(212, 175, 55, 0.65);
}

.rp-card-name {
	font-family: 'Cormorant Garamond', 'Playfair Display', serif;
	font-size: 15.5px;
	font-weight: 600;
	color: #f0e8d0;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rp-card-purity {
	font-size: 10px;
	color: #666;
	letter-spacing: 0.06em;
	margin-top: auto;
	padding-top: 8px;
	border-top: 1px solid rgba(212, 175, 55, 0.1);
	display: flex;
	align-items: center;
	gap: 6px;
}

.rp-card-purity::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #D4AF37;
	flex-shrink: 0;
}

/* ── Custom Swiper Navigation Arrows ── */
.rp-nav {
	position: absolute;
	top: calc(50% - 26px);
	z-index: 10;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, #1a1404, #0d0b07);
	border: 1px solid rgba(212, 175, 55, 0.35);
	color: #D4AF37;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.rp-nav:hover {
	background: linear-gradient(135deg, #D4AF37, #c9a227);
	border-color: #D4AF37;
	color: #000;
	transform: scale(1.1);
	box-shadow: 0 6px 24px rgba(212, 175, 55, 0.3);
}

.rp-nav.rp-prev {
	left: 0;
}

.rp-nav.rp-next {
	right: 0;
}

.rp-nav svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.rp-nav.swiper-button-disabled {
	opacity: 0.3;
	pointer-events: none;
}

/* ── Custom Gold Pagination ── */
.rp-swiper-outer .swiper-pagination {
	bottom: 0;
}

.rp-swiper-outer .swiper-pagination-bullet {
	width: 7px;
	height: 7px;
	background: rgba(212, 175, 55, 0.3);
	opacity: 1;
	transition: all 0.3s ease;
}

.rp-swiper-outer .swiper-pagination-bullet-active {
	background: #D4AF37;
	width: 24px;
	border-radius: 4px;
	box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

@media (max-width: 768px) {
	.rp-heading {
		margin: 0 20px 30px;
	}

	.rp-swiper-outer {
		padding: 0 20px 48px;
	}

	.rp-nav {
		display: none;
	}
}


															/********************************************************

																			PREMIUM GOLD CALCULATOR PAGE CSS

															********************************************************/

/* ─── Calculator Design Tokens ──────────────── */
:root {
    --c-bg:       #0a0906;
    --c-surface:  #111009;
    --c-card:     #15120d;
    --c-border:   rgba(197,160,89,.18);
    --c-border-h: rgba(197,160,89,.55);
    --c-gold:     #C5A028;
    --c-gold-lt:  #D4AF37;
    --c-gold-dk:  #9A7A10;
    --c-text:     #e8e0d0;
    --c-muted:    rgba(232,224,208,.42);
}

/* ─── Page Wrapper ───────────────────────────── */
.calc-page {
    min-height: 100vh;
    background:
        radial-gradient(ellipse 90% 55% at 50% 0%, rgba(197,160,89,.07) 0%, transparent 65%),
        linear-gradient(170deg, #0d0b08 0%, #0a0907 100%);
    padding-top: 40px;
    padding-bottom: 60px;
}

/* ─── Page Header ────────────────────────────── */
.calc-hero {
    text-align: center;
    padding-bottom: 28px;
}

.calc-hero__eyebrow {
    font-family: 'Lato', sans-serif;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--c-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 14px;
}

.calc-hero__eyebrow span {
    display: block;
    width: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
}

.calc-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.calc-hero__sub {
    font-family: 'Lato', sans-serif;
    font-size: .9rem;
    color: var(--c-muted);
    max-width: 420px;
    margin: 0 auto;
}

/* ─── Calculator Card ────────────────────────── */
.calc-card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    overflow: hidden;
    max-width: 560px;
    margin: 0 auto;
    box-shadow:
        0 2px 60px rgba(0,0,0,.6),
        0 0 0 1px rgba(197,160,89,.04) inset,
        0 1px 0 rgba(197,160,89,.14) inset;
}

/* ─── Card Header Band ───────────────────────── */
.calc-card__header {
    background: linear-gradient(135deg, rgba(197,160,89,.12) 0%, rgba(197,160,89,.04) 100%);
    border-bottom: 1px solid var(--c-border);
    padding: 20px 28px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.calc-card__icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--c-gold-lt), var(--c-gold-dk));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #0a0906;
    box-shadow: 0 4px 16px rgba(197,160,89,.3);
}

.calc-card__title {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.calc-card__sub {
    font-family: 'Lato', sans-serif;
    font-size: .72rem;
    color: var(--c-muted);
    margin: 2px 0 0;
}

/* ─── Live Rate Ticker ───────────────────────── */
.calc-ticker {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,.35);
    border-bottom: 1px solid var(--c-border);
    padding: 9px 28px;
    font-family: 'Lato', sans-serif;
    font-size: .72rem;
}

.calc-ticker__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3ecf8e;
    animation: tickPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes tickPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(62,207,142,.45); }
    50%      { box-shadow: 0 0 0 5px rgba(62,207,142,.0); }
}

.calc-ticker__label { color: var(--c-muted); }
.calc-ticker__val   { color: var(--c-gold-lt); font-weight: 700; letter-spacing: .5px; }
.calc-ticker__sep   { color: var(--c-border-h); margin: 0 6px; }

/* ─── Card Body ──────────────────────────────── */
.calc-card__body {
    padding: 24px 28px 28px;
}

/* ─── Purity Selector ────────────────────────── */
.purity-label {
    font-family: 'Lato', sans-serif;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: 12px;
    display: block;
}

.purity-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 22px;
}

.purity-btn {
    position: relative;
}

.purity-btn input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.purity-btn label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    font-family: 'Lato', sans-serif;
    font-size: .75rem;
    font-weight: 700;
    color: var(--c-muted);
    background: rgba(255,255,255,.03);
    cursor: pointer;
    transition: all .25s;
    user-select: none;
}

.purity-btn label:hover {
    border-color: var(--c-gold);
    color: var(--c-gold-lt);
    background: rgba(197,160,89,.06);
}

.purity-btn input:checked + label {
    background: linear-gradient(135deg, var(--c-gold-lt), var(--c-gold-dk));
    border-color: var(--c-gold-lt);
    color: #0a0906;
    box-shadow: 0 4px 18px rgba(197,160,89,.35);
}

/* ─── Input Row ──────────────────────────────── */
.calc-input-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    margin-bottom: 12px;
    align-items: flex-end;
}

.calc-toggle-icon {
    width: 28px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-muted);
    font-size: 1rem;
    opacity: 0.6;
}

.calc-hint {
    font-family: 'Lato', sans-serif;
    font-size: .7rem;
    color: var(--c-muted);
    text-align: center;
    margin-bottom: 24px;
    letter-spacing: .3px;
}

.calc-hint i {
    color: var(--c-gold);
    margin-right: 4px;
}

.calc-field__label {
    font-family: 'Lato', sans-serif;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--c-gold);
    margin-bottom: 7px;
    display: block;
}

.calc-field__wrap {
    position: relative;
}

.calc-field__prefix,
.calc-field__suffix {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Lato', sans-serif;
    font-size: .85rem;
    font-weight: 700;
    color: var(--c-gold);
    z-index: 2;
    pointer-events: none;
}

.calc-field__prefix { left: 14px; }
.calc-field__suffix { right: 14px; }

.calc-field__input {
    width: 100%;
    background: rgba(0,0,0,.4);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 11px 38px 11px 14px;
    font-family: 'Lato', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    color: #fff;
    outline: none;
    transition: border-color .25s, box-shadow .25s;
    -moz-appearance: textfield;
}

.calc-field__input.has-prefix {
    padding-left: 28px;
    padding-right: 14px;
    text-align: right;
}

.calc-field__input::-webkit-inner-spin-button,
.calc-field__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.calc-field__input:focus {
    border-color: var(--c-gold);
    box-shadow: 0 0 0 3px rgba(197,160,89,.15);
    background: rgba(0,0,0,.55);
}

.calc-field__input::placeholder { color: rgba(255,255,255,.22); }

/* ─── Breakdown Section ──────────────────────── */
.calc-breakdown {
    background: rgba(0,0,0,.3);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    overflow: hidden;
}

.calc-breakdown__head {
    padding: 10px 18px;
    background: rgba(197,160,89,.06);
    border-bottom: 1px solid var(--c-border);
    font-family: 'Lato', sans-serif;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--c-gold);
    display: flex;
    align-items: center;
    gap: 8px;
}

.calc-breakdown__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
    border-bottom: 1px solid rgba(197,160,89,.06);
    font-family: 'Lato', sans-serif;
    font-size: .85rem;
}

.calc-breakdown__row:last-child { border-bottom: none; }

.calc-breakdown__key  { color: var(--c-muted); }
.calc-breakdown__val  { color: #fff; font-weight: 600; }

.calc-breakdown__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(197,160,89,.1), rgba(197,160,89,.04));
    border-top: 1px solid var(--c-border);
    font-family: 'Lato', sans-serif;
}

.calc-breakdown__total-key {
    font-size: .85rem;
    font-weight: 700;
    color: var(--c-gold-lt);
}

.calc-breakdown__total-val {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--c-gold-lt);
    letter-spacing: .5px;
}

/* ─── Disclaimer ─────────────────────────────── */
.calc-disclaimer {
    font-family: 'Lato', sans-serif;
    font-size: .68rem;
    color: var(--c-muted);
    text-align: center;
    margin-top: 18px;
    line-height: 1.7;
}

@media (max-width: 480px) {
    .purity-grid { grid-template-columns: repeat(4, 1fr); }
    .calc-card__body { padding: 18px 16px 22px; }
    .calc-card__header { padding: 16px 18px 14px; }
    .calc-ticker { padding: 9px 16px; }
    .calc-input-row { gap: 8px; }
}

															/********************************************************

																			DIGITAL GOLD PAGE CSS

															********************************************************/

/* ── Digital Gold Base Globals ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
.dg-page { font-family: 'Lato', sans-serif; color: #fff; background-color: #050403; overflow-x: hidden; }
.dg-gold-text { color: #c5a059; }
.dg-gold-gradient {
    background: linear-gradient(90deg, #f0d48a 0%, #c5a059 50%, #9a7730 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.dg-gold-rule {
    width: 60px; height: 1px;
    background: linear-gradient(90deg, transparent, #c5a059, transparent);
    margin: 24px auto;
}

/* ── HERO SECTION ────────── */
.dg-hero {
    position: relative;
    width: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 24px 80px;
    background: #060503;
    overflow: hidden;
}

.dg-hero__bg-glow {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(197,160,89,0.15) 0%, rgba(5,4,3,0.95) 70%, #050403 100%);
    z-index: 2;
}

.dg-hero__content {
    position: relative;
    z-index: 3;
    max-width: 960px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

.dg-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 28px;
}

.dg-hero__sub {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.9;
    max-width: 680px;
    margin: 0 auto 44px;
    font-weight: 300;
}

.dg-btn-gold {
    background-color: #c5a059;
    color: #050403 !important;
    border: 1px solid #c5a059;
    padding: 16px 40px;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(197,160,89,0.25);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.dg-btn-gold:hover {
    background-color: #e6c587;
    border-color: #e6c587;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(197,160,89,0.4);
}
.dg-btn-outline {
    background-color: transparent;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.4);
    padding: 16px 40px;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.dg-btn-outline:hover {
    background-color: #ffffff;
    color: #050403 !important;
    border-color: #ffffff;
    transform: translateY(-3px);
}

.dg-hero__stats-panel {
    background: rgba(197,160,89,0.04);
    border: 1px solid rgba(197,160,89,0.2);
    border-radius: 24px;
    padding: 36px 40px;
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 60px;
}
.dg-hero__stat-item {
    text-align: center;
    border-right: 1px solid rgba(197,160,89,0.15);
}
.dg-hero__stat-item:last-child { border-right: none; }
.dg-hero__stat-num {
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: #c5a059;
    margin-bottom: 8px;
}
.dg-hero__stat-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
}

/* ── HOW IT WORKS SECTION ────────── */
.dg-works { padding: 120px 0; background: #080604; }
.dg-works-card {
    background: rgba(197,160,89,0.02);
    border: 1px solid rgba(197,160,89,0.12);
    border-radius: 24px;
    padding: 40px;
    height: 100%;
    transition: all 0.4s ease;
}
.dg-works-card:hover {
    transform: translateY(-10px);
    border-color: rgba(197,160,89,0.35);
    background: rgba(197,160,89,0.04);
}
.dg-works-icon {
    font-size: 2.5rem;
    color: #c5a059;
    margin-bottom: 24px;
}


/************************************************************************************************************

		BUY DIGITAL GOLD

************************************************************************************************************/


/* ── CSS Variables for fluid scaling ─────────── */
:root {
    --card-pad: clamp(14px, 3vw, 28px);
    --gap: clamp(14px, 2.5vw, 28px);
    --title-size: clamp(1.1rem, 3vw, 1.65rem);
    --rate-size: clamp(1rem, 2.5vw, 1.25rem);
    --input-size: clamp(1rem, 2.5vw, 1.4rem);
    --label-size: clamp(0.6rem, 1.2vw, 0.72rem);
    --body-size: clamp(0.7rem, 1.5vw, 0.82rem);
    --btn-size: clamp(0.82rem, 1.5vw, 0.95rem);
    --radius-card: clamp(12px, 2vw, 20px);
}

/* ── Page shell ───────────────────────────────── */
.bg-page {
    font-family: 'Lato', sans-serif;
    color: #fff;
    background: #060504;
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 2vw, 24px) clamp(10px, 2vw, 16px);
    box-sizing: border-box;
}

/* ── Card ─────────────────────────────────────── */
.bg-card {
    background: linear-gradient(145deg, rgba(24,18,10,0.99), rgba(8,6,4,0.99));
    border: 1px solid rgba(197,160,89,0.25);
    border-radius: var(--radius-card);
    padding: var(--card-pad);
    max-width: min(820px, 100%);
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 25px 70px rgba(0,0,0,0.85), inset 0 1px 0 rgba(197,160,89,0.15);
    box-sizing: border-box;
}

/* ── Premium Title ────────────────────────────── */
.bg-title-wrapper { text-align: center; margin-bottom: clamp(12px, 2vw, 20px); }
.bg-title {
    font-family: 'Playfair Display', serif;
    background: linear-gradient(135deg, #FFF6D6 0%, #D4AF37 55%, #F3E5AB 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: var(--title-size);
    font-weight: 700;
    letter-spacing: clamp(1px, 0.3vw, 2px);
    text-transform: uppercase;
    display: inline-block;
    margin: 0;
}
.bg-title-divider {
    width: clamp(50px, 8vw, 80px);
    height: 2px;
    background: linear-gradient(90deg, transparent, #D4AF37, transparent);
    margin: 5px auto 0;
}

/* ── Responsive Grid ──────────────────────────── */
.bg-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
    align-items: start;
}
/* Two columns when enough horizontal space */
@media (min-width: 640px) {
    .bg-grid {
        grid-template-columns: 1.2fr 0.8fr;
    }
    .bg-card-left {
        border-right: 1px solid rgba(197,160,89,0.12);
        padding-right: var(--gap);
    }
}
/* Wider card on large screens */
@media (min-width: 1024px) {
    .bg-card { padding: 28px 36px; }
    .bg-grid { grid-template-columns: 1.25fr 0.75fr; gap: 36px; }
    .bg-card-left { padding-right: 36px; }
}

/* ── KYC Banner ───────────────────────────────── */
.kyc-banner {
    background: rgba(239,68,68,0.07);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 8px;
    padding: clamp(6px,1.2vw,10px) clamp(10px,1.5vw,14px);
    margin-bottom: clamp(8px,1.5vw,14px);
    font-size: var(--body-size);
    color: #fca5a5;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.kyc-banner a {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(239,68,68,0.4);
    color: #fca5a5;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: var(--label-size);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s;
}
.kyc-banner a:hover { background: rgba(239,68,68,0.12); }

/* ── Live Rate Strip ──────────────────────────── */
.rate-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(197,160,89,0.06);
    border: 1px solid rgba(197,160,89,0.16);
    border-radius: 10px;
    padding: clamp(7px,1.2vw,10px) clamp(10px,1.5vw,16px);
    margin-bottom: clamp(10px,1.5vw,14px);
}
.rate-strip-label { font-size: var(--label-size); color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 1px; }
.rate-strip-value { font-size: var(--rate-size); font-weight: 700; color: #fff; }
.rate-strip-value span { font-size: var(--label-size); color: rgba(255,255,255,0.4); font-weight: 400; margin-left: 3px; }

/* ── Purity Tabs ──────────────────────────────── */
.purity-label { font-size: var(--label-size); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: clamp(5px,1vw,8px); display: block; text-align: center; }
.purity-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(5px,1vw,8px); margin-bottom: clamp(10px,1.5vw,14px); }
.purity-btn { position: relative; flex: 1; min-width: 46px; max-width: 90px; }
.purity-btn input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.purity-btn label { display: flex; align-items: center; justify-content: center; height: clamp(28px,4vw,34px); border: 1px solid rgba(197,160,89,0.2); border-radius: 6px; font-size: clamp(0.72rem,1.3vw,0.82rem); font-weight: 700; color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.02); cursor: pointer; transition: all 0.2s; user-select: none; }
.purity-btn label:hover { border-color: #c5a059; color: #fff; }
.purity-btn input:checked + label { background: linear-gradient(135deg,#D4AF37,#9A7A10); border-color: #D4AF37; color: #000; box-shadow: 0 3px 12px rgba(197,160,89,0.3); }

/* ── Mode Toggle ──────────────────────────────── */
.mode-toggle { display: flex; background: rgba(255,255,255,0.03); border: 1px solid rgba(197,160,89,0.16); border-radius: 8px; padding: 3px; margin-bottom: clamp(10px,1.5vw,14px); }
.mode-btn { flex: 1; position: relative; }
.mode-btn input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.mode-btn label { display: flex; align-items: center; justify-content: center; height: clamp(30px,4.5vw,36px); border-radius: 6px; font-size: clamp(0.75rem,1.4vw,0.88rem); font-weight: 600; color: rgba(255,255,255,0.5); cursor: pointer; transition: all 0.22s; user-select: none; margin: 0; }
.mode-btn input:checked + label { background: linear-gradient(135deg,#D4AF37,#9A7A10); color: #000; box-shadow: 0 3px 10px rgba(197,160,89,0.2); }

/* ── Amount Input Row ─────────────────────────── */
.input-row { display: flex; align-items: center; gap: clamp(8px,1.5vw,12px); margin-bottom: clamp(8px,1.5vw,12px); }
.bg-input {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(197,160,89,0.25);
    color: #fff;
    font-size: var(--input-size);
    font-weight: 600;
    text-align: center;
    padding: clamp(7px,1.2vw,10px) clamp(8px,1.2vw,12px);
    border-radius: 8px;
    width: 100%;
    transition: all 0.22s;
    flex: 1;
    box-sizing: border-box;
}
.bg-input::placeholder { color: rgba(255,255,255,0.2); }
.bg-input:focus { outline: none; border-color: #c5a059; box-shadow: 0 0 0 3px rgba(197,160,89,0.1); }
.bg-input.error { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.15); color: #fca5a5; }
.input-error-msg { color: #fca5a5; font-size: 0.75rem; text-align: center; margin-bottom: 10px; margin-top: -4px; display: none; }
.equiv-box { text-align: center; min-width: clamp(70px,12vw,96px); flex-shrink: 0; }
.equiv-box .eq-sign { font-size: 0.85rem; color: rgba(255,255,255,0.3); display: block; margin-bottom: 1px; }
.equiv-box .eq-val { font-size: clamp(0.78rem,1.5vw,0.95rem); font-weight: 700; color: #c5a059; display: block; line-height: 1.2; }
.equiv-box .eq-sub { font-size: 0.6rem; color: rgba(255,255,255,0.35); display: block; }

/* ── Quick Amounts ────────────────────────────── */
.quick-amounts { display: flex; gap: clamp(5px,1vw,8px); justify-content: center; margin-bottom: clamp(8px,1.5vw,12px); flex-wrap: wrap; }
.quick-btn {
    background: transparent;
    border: 1px solid rgba(197,160,89,0.25);
    color: rgba(197,160,89,0.8);
    padding: clamp(3px,0.6vw,5px) clamp(8px,1.5vw,12px);
    border-radius: 20px;
    cursor: pointer;
    font-size: clamp(0.7rem,1.2vw,0.8rem);
    transition: all 0.2s;
    font-family: 'Lato', sans-serif;
}
.quick-btn:hover { background: rgba(197,160,89,0.1); border-color: #c5a059; color: #c5a059; }

/* ── Info Pills ───────────────────────────────── */
.info-pills { display: flex; flex-direction: column; gap: clamp(3px,0.6vw,5px); margin-bottom: clamp(10px,1.5vw,14px); }
.info-pill { display: flex; align-items: center; gap: 6px; font-size: clamp(0.68rem,1.2vw,0.78rem); color: rgba(255,255,255,0.5); background: rgba(197,160,89,0.04); border: 1px solid rgba(197,160,89,0.08); border-radius: 6px; padding: clamp(3px,0.6vw,5px) clamp(7px,1.2vw,10px); }
.info-pill i { color: #c5a059; font-size: 0.75rem; flex-shrink: 0; }

/* ── Breakdown Box ────────────────────────────── */
.breakdown-box { background: rgba(0,0,0,0.25); border: 1px solid rgba(197,160,89,0.1); border-radius: 8px; padding: clamp(7px,1.2vw,10px) clamp(10px,1.5vw,14px); margin-bottom: clamp(10px,1.5vw,14px); }
.breakdown-row { display: flex; justify-content: space-between; align-items: center; font-size: clamp(0.72rem,1.3vw,0.82rem); color: rgba(255,255,255,0.55); padding: clamp(2px,0.4vw,3px) 0; }
.breakdown-row.total { font-size: clamp(0.82rem,1.5vw,0.95rem); font-weight: 700; color: #c5a059; border-top: 1px solid rgba(197,160,89,0.12); margin-top: 4px; padding-top: clamp(5px,1vw,8px); }
.breakdown-row.total span:last-child { color: #fff; }

/* ── CTA Button ───────────────────────────────── */
.bg-btn {
    display: block;
    width: 100%;
    padding: clamp(9px,1.5vw,13px);
    background: linear-gradient(135deg, #D4AF37, #9A7A10);
    border: none;
    border-radius: 8px;
    font-family: 'Lato', sans-serif;
    font-size: var(--btn-size);
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #000;
    cursor: pointer;
    transition: all 0.22s;
    box-shadow: 0 3px 12px rgba(197,160,89,0.2);
}
.bg-btn:hover:not(:disabled) { background: linear-gradient(135deg,#e6c87a,#b08c22); box-shadow: 0 5px 20px rgba(197,160,89,0.35); transform: translateY(-1px); }
.bg-btn:disabled { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.25); cursor: not-allowed; box-shadow: none; }

/* ── Extra-small screens (≤360px) ────────────── */
@media (max-width: 360px) {
    .bg-card { padding: 12px 10px; }
    .equiv-box { display: none; }
    .quick-amounts { gap: 4px; }
    .quick-btn { padding: 3px 7px; }
}



/*************************************************************************
		REDEEM GOLD CSS
*************************************************************************/

.rg-page { font-family: 'Lato', sans-serif; color: #fff; background-color: #050403; padding: 60px 0; min-height: 80vh; }
.rg-card { background: rgba(197,160,89,0.05); border: 1px solid rgba(197,160,89,0.2); border-radius: 20px; padding: 40px; max-width: 700px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.rg-input { background: rgba(0,0,0,0.5); border: 1px solid rgba(197,160,89,0.3); color: #c5a059; font-size: 1.1rem; padding: 12px 15px; border-radius: 10px; width: 100%; transition: all 0.3s ease; }
.rg-input:focus { outline: none; border-color: #c5a059; box-shadow: 0 0 15px rgba(197,160,89,0.2); }
.rg-btn { background: #c5a059; color: #000; border: none; padding: 15px 30px; font-weight: bold; border-radius: 10px; width: 100%; font-size: 1.1rem; cursor: pointer; transition: all 0.3s ease; }
.rg-btn:hover { background: #e6c587; }
.rg-btn:disabled { background: #555; color: #999; cursor: not-allowed; }
.type-card { border: 1px solid rgba(197,160,89,0.3); border-radius: 10px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; height: 100%; }
.type-card:hover { background: rgba(197,160,89,0.1); }
.type-card.active { background: rgba(197,160,89,0.15); border-color: #c5a059; box-shadow: 0 0 15px rgba(197,160,89,0.3); }
.type-icon { font-size: 2rem; color: #c5a059; margin-bottom: 10px; }


/*************************************************************************
		SELL GOLD CSS
*************************************************************************/

.sg-page { font-family: 'Lato', sans-serif; color: #fff; background-color: #050403; padding: 60px 0; min-height: 80vh; }
.sg-card { background: rgba(197,160,89,0.05); border: 1px solid rgba(197,160,89,0.2); border-radius: 20px; padding: 40px; max-width: 600px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.sg-input { background: rgba(0,0,0,0.5); border: 1px solid rgba(197,160,89,0.3); color: #c5a059; font-size: 1.2rem; padding: 12px; border-radius: 10px; width: 100%; transition: all 0.3s ease; }
.sg-input:focus { outline: none; border-color: #c5a059; box-shadow: 0 0 15px rgba(197,160,89,0.2); }
.sg-btn { background: #c5a059; color: #000; border: none; padding: 15px 30px; font-weight: bold; border-radius: 10px; width: 100%; font-size: 1.1rem; cursor: pointer; transition: all 0.3s ease; }
.sg-btn:hover { background: #e6c587; }
.sg-btn:disabled { background: #555; color: #999; cursor: not-allowed; }



/*************************************************************

		GOLD PORTFOLIO CSS

*************************************************************/

.pf-page { font-family: 'Lato', sans-serif; color: #fff; background-color: #050403; padding: 60px 0; min-height: 80vh; }
.pf-card { background: rgba(197,160,89,0.05); border: 1px solid rgba(197,160,89,0.2); border-radius: 20px; padding: 30px; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.pf-value-large { font-family: 'Playfair Display', serif; font-size: 3rem; color: #c5a059; font-weight: 700; line-height: 1; }
.pf-label { color: rgba(255,255,255,0.6); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; display: block; }

.pf-actions { display: flex; gap: 15px; margin-top: 30px; }
.pf-btn { flex: 1; text-align: center; padding: 12px; border-radius: 10px; font-weight: bold; text-decoration: none; transition: all 0.3s ease; }
.pf-btn-buy { background: #c5a059; color: #000; border: 1px solid #c5a059; }
.pf-btn-buy:hover { background: #e6c587; }
.pf-btn-sell { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4); }
.pf-btn-sell:hover { background: #fff; color: #000; }
.pf-btn-redeem { background: transparent; color: #c5a059; border: 1px solid #c5a059; }
.pf-btn-redeem:hover { background: rgba(197,160,89,0.1); }

.tx-table { width: 100%; border-collapse: collapse; }
.tx-table th, .tx-table td { padding: 15px; text-align: left; border-bottom: 1px solid rgba(197,160,89,0.1); }
.tx-table th { color: rgba(255,255,255,0.6); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }
.tx-table tr:last-child td { border-bottom: none; }
.badge { padding: 5px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: bold; }
.badge-buy { background: rgba(197,160,89,0.2); color: #c5a059; border: 1px solid #c5a059; }
.badge-sell { background: rgba(125,211,252,0.2); color: #7dd3fc; border: 1px solid #7dd3fc; }
.badge-redeem { background: rgba(192,132,252,0.2); color: #c084fc; border: 1px solid #c084fc; }

@media (max-width: 768px) {
    .pf-actions { flex-direction: column; }
    .tx-table { display: block; overflow-x: auto; white-space: nowrap; }
}

															/********************************************************

																			ABOUT PAGE CSS

															********************************************************/


/* ── Reset & Base Globals ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
.ab-page { font-family: 'Lato', sans-serif; color: #fff; background-color: #050403; overflow-x: hidden; }
.ab-heading { font-family: 'Playfair Display', serif; }
.ab-gold-text { color: #c5a059; }
.ab-gold-gradient {
    background: linear-gradient(90deg, #f0d48a 0%, #c5a059 50%, #9a7730 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ab-gold-rule {
    width: 60px; height: 1px;
    background: linear-gradient(90deg, transparent, #c5a059, transparent);
    margin: 24px auto;
}

/* ── HERO SECTION (Perfectly Proportioned & Centered) ────────── */
.ab-hero {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 130px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 24px 80px;
    background: #060503;
    overflow: hidden;
}

/* Luxury CSS-only Background Pattern & Glow (Ensures beauty even if images fail) */
.ab-hero__bg-pattern {
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c5a059' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M30 30L0 0h60L30 30zM30 30L0 60h60L30 30z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    opacity: 0.7;
    z-index: 1;
}
.ab-hero__bg-glow {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(197,160,89,0.15) 0%, rgba(5,4,3,0.95) 70%, #050403 100%);
    z-index: 2;
}

/* Hero Content Container */
.ab-hero__content {
    position: relative;
    z-index: 3;
    max-width: 960px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

/* Elegant Kicker Pill */
.ab-hero__kicker-wrap {
    margin-bottom: 32px;
}
.ab-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #c5a059;
    padding: 8px 24px;
    background: rgba(197,160,89,0.08);
    border: 1px solid rgba(197,160,89,0.3);
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(197,160,89,0.1);
}
.ab-hero__kicker i { font-size: 0.8rem; }

/* Hero Main Title */
.ab-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 6vw, 5.2rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 28px;
    letter-spacing: -0.5px;
}
.ab-hero h1 span.italic-gold {
    font-style: italic;
    display: block;
    margin-top: 6px;
}

/* Hero Subtitle */
.ab-hero__sub {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.9;
    max-width: 680px;
    margin: 0 auto 44px;
    font-weight: 300;
}

/* Hero Buttons */
.ab-hero__btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 64px;
}
.ab-btn-gold {
    background-color: #c5a059;
    color: #050403 !important;
    border: 1px solid #c5a059;
    padding: 16px 40px;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(197,160,89,0.25);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.ab-btn-gold:hover {
    background-color: #e6c587;
    border-color: #e6c587;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(197,160,89,0.4);
}
.ab-btn-outline {
    background-color: transparent;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.4);
    padding: 16px 40px;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.ab-btn-outline:hover {
    background-color: #ffffff;
    color: #050403 !important;
    border-color: #ffffff;
    transform: translateY(-3px);
}

/* Integrated Glassmorphism Stat Panel */
.ab-hero__stats-panel {
    background: rgba(197,160,89,0.04);
    border: 1px solid rgba(197,160,89,0.2);
    border-radius: 24px;
    padding: 36px 40px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
}
.ab-hero__stat-item {
    position: relative;
    padding: 0 16px;
    border-right: 1px solid rgba(197,160,89,0.15);
}
.ab-hero__stat-item:last-child { border-right: none; }
.ab-hero__stat-num {
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: #c5a059;
    line-height: 1;
    margin-bottom: 8px;
}
.ab-hero__stat-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}

/* ── MARQUEE BAND ─────────────────────────────────────────────── */
.ab-marquee {
    overflow: hidden;
    background: #0d0a06;
    border-top: 1px solid rgba(197,160,89,0.18);
    border-bottom: 1px solid rgba(197,160,89,0.18);
    padding: 20px 0;
}
.ab-marquee__track {
    display: flex;
    white-space: nowrap;
    animation: marqueeScroll 35s linear infinite;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: rgba(197,160,89,0.6);
    font-size: 1.05rem;
    letter-spacing: 2px;
}
.ab-marquee__dot { margin: 0 32px; color: #c5a059; font-style: normal; font-size: 0.9rem; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── SECTION HEADER UTILITY ───────────────────────────────────── */
.ab-section-header { text-align: center; margin-bottom: 64px; }
.ab-section-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #c5a059;
    margin-bottom: 16px;
}
.ab-section-label::before, .ab-section-label::after {
    content: ''; width: 30px; height: 1px; background: rgba(197,160,89,0.4);
}
.ab-section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

/* ── OUR STORY SECTION ────────────────────────────────────────── */
.ab-story { padding: 120px 0; background: #080604; position: relative; }
.ab-story__img-wrap { position: relative; height: 580px; border-radius: 20px; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.6); }
.ab-story__img-wrap::before {
    content: ''; position: absolute; inset: 0;
    border: 1px solid rgba(197,160,89,0.3);
    border-radius: 20px;
    z-index: 2;
    pointer-events: none;
}
.ab-story__img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85) sepia(0.15); transition: transform 0.7s ease; }
.ab-story__img-wrap:hover .ab-story__img { transform: scale(1.05); }
.ab-story__badge {
    position: absolute; bottom: 32px; right: 32px; z-index: 3;
    background: rgba(8,6,4,0.92); border: 1px solid rgba(197,160,89,0.4);
    border-radius: 16px; padding: 24px 32px; text-align: center;
    backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.ab-story__badge i { font-size: 2.2rem; color: #c5a059; display: block; margin-bottom: 8px; }
.ab-story__badge-title { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; color: #fff; }
.ab-story__badge-sub { font-size: 0.6rem; letter-spacing: 3px; color: rgba(255,255,255,0.4); text-transform: uppercase; margin-top: 4px; }

.ab-story__content { padding-left: 32px; }
.ab-story__text { font-size: 1.05rem; color: rgba(255,255,255,0.65); line-height: 1.95; margin-bottom: 24px; }

/* Blockquote */
.ab-quote {
    margin-top: 48px; padding: 32px 36px;
    background: rgba(197,160,89,0.03); border-left: 3px solid #c5a059;
    border-radius: 0 16px 16px 0; border-top: 1px solid rgba(197,160,89,0.1); border-right: 1px solid rgba(197,160,89,0.1); border-bottom: 1px solid rgba(197,160,89,0.1);
}
.ab-quote p { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-style: italic; color: rgba(255,255,255,0.9); line-height: 1.75; margin-bottom: 16px; }
.ab-quote footer { font-size: 0.65rem; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: #c5a059; }

/* ── THREE PILLARS SECTION ────────────────────────────────────── */
.ab-pillars { padding: 120px 0; background: linear-gradient(180deg, #080604 0%, #0c0906 50%, #050403 100%); position: relative; }
.ab-pillar-card {
    background: rgba(197,160,89,0.02);
    border: 1px solid rgba(197,160,89,0.12);
    border-radius: 24px;
    padding: 56px 44px;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}
.ab-pillar-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, #c5a059, transparent);
    opacity: 0.6; transition: opacity 0.4s ease;
}
.ab-pillar-card:hover {
    border-color: rgba(197,160,89,0.35);
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.6);
    background: rgba(197,160,89,0.04);
}
.ab-pillar-card:hover::before { opacity: 1; }
.ab-pillar-icon {
    width: 76px; height: 76px;
    background: rgba(197,160,89,0.08);
    border: 1px solid rgba(197,160,89,0.25);
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem; color: #c5a059;
    margin-bottom: 36px;
    transition: all 0.4s ease;
}
.ab-pillar-card:hover .ab-pillar-icon { background: #c5a059; color: #050403; transform: rotate(5deg); }
.ab-pillar-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 16px; }
.ab-pillar-desc { font-size: 0.95rem; color: rgba(255,255,255,0.55); line-height: 1.9; margin: 0; }
.ab-pillar-num {
    position: absolute; bottom: -20px; right: 20px;
    font-family: 'Playfair Display', serif; font-size: 8rem; font-weight: 900;
    color: rgba(197,160,89,0.04); line-height: 1; pointer-events: none;
}

/* ── MILESTONES TIMELINE SECTION ──────────────────────────────── */
.ab-timeline { padding: 120px 0; background: #050403; }
.ab-tl-container { position: relative; max-width: 860px; margin: 0 auto; }
.ab-tl-spine {
    position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%);
    background: linear-gradient(to bottom, transparent, rgba(197,160,89,0.35) 10%, rgba(197,160,89,0.35) 90%, transparent);
}
.ab-tl-item { display: flex; margin-bottom: 64px; position: relative; }
.ab-tl-item.left { justify-content: flex-end; padding-right: calc(50% + 40px); text-align: right; }
.ab-tl-item.right { justify-content: flex-start; padding-left: calc(50% + 40px); }
.ab-tl-dot {
    position: absolute; left: 50%; top: 24px; transform: translateX(-50%);
    width: 15px; height: 15px; border-radius: 50%; background: #c5a059;
    border: 3px solid #050403; box-shadow: 0 0 15px rgba(197,160,89,0.8); z-index: 2;
}
.ab-tl-card {
    background: rgba(197,160,89,0.03); border: 1px solid rgba(197,160,89,0.15);
    border-radius: 20px; padding: 36px 40px; width: 100%; max-width: 380px;
    transition: all 0.4s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.ab-tl-card:hover { border-color: rgba(197,160,89,0.4); transform: translateY(-5px); box-shadow: 0 15px 40px rgba(197,160,89,0.15); }
.ab-tl-year { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700; color: #c5a059; line-height: 1; margin-bottom: 12px; }
.ab-tl-title { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 12px; }
.ab-tl-desc { font-size: 0.95rem; color: rgba(255,255,255,0.55); line-height: 1.8; margin: 0; }

/* ── CTA BANNER SECTION ───────────────────────────────────────── */
.ab-cta { position: relative; padding: 140px 0; background: #080604; text-align: center; overflow: hidden; }
.ab-cta__bg {
    position: absolute; inset: 0;
    background-image: linear-gradient(to bottom, rgba(8,6,4,0.88) 0%, rgba(8,6,4,0.7) 50%, rgba(8,6,4,0.88) 100%),
                      url('https://images.unsplash.com/photo-1602173574767-37ac01994b2a?auto=format&fit=crop&q=80&w=2000');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.7; z-index: 1;
}
.ab-cta__content { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: 0 24px; }
.ab-cta__content h2 { font-family: 'Playfair Display', serif; font-size: clamp(2.2rem, 5vw, 4.2rem); font-weight: 700; color: #fff; margin-bottom: 24px; line-height: 1.15; }
.ab-cta__content p { font-size: 1.1rem; color: rgba(255,255,255,0.65); line-height: 1.9; margin-bottom: 48px; }

/* ── RESPONSIVE MEDIA QUERIES ─────────────────────────────────── */
@media (max-width: 991px) {
    .ab-hero__stats-panel { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
    .ab-hero__stat-item:nth-child(2) { border-right: none; }
    .ab-story__img-wrap { height: 420px; margin-bottom: 48px; }
    .ab-story__content { padding-left: 0; }
}
@media (max-width: 767px) {
    .ab-hero { min-height: auto; padding: 40px 16px 60px; }
    .ab-hero__stats-panel { grid-template-columns: 1fr; gap: 28px; padding: 28px 24px; }
    .ab-hero__stat-item { border-right: none !important; border-bottom: 1px solid rgba(197,160,89,0.15); padding-bottom: 20px; }
    .ab-hero__stat-item:last-child { border-bottom: none; padding-bottom: 0; }
    .ab-tl-spine { left: 24px; }
    .ab-tl-item.left, .ab-tl-item.right { justify-content: flex-start; padding-left: 64px; padding-right: 0; text-align: left; }
    .ab-tl-dot { left: 24px; }
    .ab-tl-card { max-width: 100%; }
    .ab-quote { padding: 24px; }
}


															/********************************************************

																					HELP PAGE CSS

															********************************************************/


.bg-light-custom { background-color: #fcfaf7; }
.tracking-widest { letter-spacing: 0.25em; }
.drop-shadow { text-shadow: 0 5px 15px rgba(0,0,0,0.5); }

.help-cat-card {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent !important;
}
.help-cat-card:hover {
    border-color: #c5a875 !important;
    background-color: #fff;
}
.icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.premium-accordion .accordion-item {
    border: none;
    background: #fff;
}
.premium-accordion .accordion-button {
    background-color: #fff;
    color: #1a1a1a;
    box-shadow: none;
}
.premium-accordion .accordion-button:not(.collapsed) {
    background-color: #fcfaf7;
    color: #c5a875;
}
.premium-accordion .accordion-button::after {
    filter: sepia(100%) hue-rotate(320deg) saturate(1000%);
}

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}

.rotate-12 { transform: rotate(-12deg); }




															/********************************************************

																					BLOG CSS

															********************************************************/

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --gold:     #D4AF37;       /* Brighter gold */
    --gold2:    #F3E5AB;
    --dark:     #050505;       /* Deeper black */
    --card:     rgba(20, 20, 20, 0.85); /* Glassmorphic card */
    --card-hover: rgba(30, 30, 30, 0.95);
    --border:   rgba(212, 175, 55, 0.2);
    --border-h: rgba(212, 175, 55, 0.5);
    --text:     #FFFFFF;       /* Pure white text */
    --muted:    rgba(255, 255, 255, 0.80); /* Brighter muted */
    --dim:      rgba(255, 255, 255, 0.65); /* Brighter dim */
}

/* ── Hero ──────────────────────────────────────────────────── */
.blog-hero {
    position: relative;
    padding: 90px 0 70px;
    background: radial-gradient(ellipse at 50% 0%,#1e1500 0%,#0a0a0a 65%);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
.blog-hero::before {
    content:'';position:absolute;inset:0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C9A84C' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events:none;
}
.blog-hero-badge {
    display: inline-block;
    border: 1px solid rgba(201,168,76,.45);
    color: var(--gold);
    font-size: .7rem;
    letter-spacing: .15em;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: 50px;
    margin-bottom: 18px;
    background: rgba(201,168,76,.06);
}
.blog-hero h1 {
    font-family: 'Playfair Display', serif;
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.15;
    margin-bottom: 16px;
}
.blog-hero .hero-sub {
    color: var(--muted);
    font-size: 1.05rem;
    max-width: 500px;
    margin: 0 auto 30px;
    line-height: 1.6;
}
/* Gold underline divider */
.gold-rule {
    width: 60px; height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold2));
    border-radius: 2px;
    margin: 0 auto 24px;
}

/* ── Search Bar ─────────────────────────────────────────────── */
.blog-search-wrap {
    max-width: 520px;
    margin: 0 auto;
    position: relative;
}
.blog-search-wrap .search-input {
    width: 100%;
    background: rgba(255,255,255,.07);
    border: 1.5px solid rgba(201,168,76,.3);
    border-radius: 50px;
    padding: 13px 56px 13px 20px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: border-color .25s, background .25s;
}
.blog-search-wrap .search-input::placeholder { color: var(--dim); }
.blog-search-wrap .search-input:focus {
    border-color: var(--gold);
    background: rgba(255,255,255,.1);
}
.blog-search-wrap .search-btn {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    background: var(--gold);
    color: #000;
    border: none;
    border-radius: 50px;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s;
}
.blog-search-wrap .search-btn:hover { background: var(--gold2); }

/* ── Main Layout ────────────────────────────────────────────── */
.blog-main { background: #0d0d0d; padding: 60px 0 80px; }

/* ── Category Chips ─────────────────────────────────────────── */
.cat-chips { display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; margin-bottom:32px; }
.cat-chips::-webkit-scrollbar { display:none; }
.cat-chips { -ms-overflow-style:none; scrollbar-width:none; }
.cat-chip {
    flex-shrink: 0;
    padding: 7px 18px;
    border-radius: 50px;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid rgba(255,255,255,.12);
    color: var(--muted);
    background: rgba(255,255,255,.04);
    transition: all .2s;
    white-space: nowrap;
}
.cat-chip:hover, .cat-chip.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #000;
}

/* ── Featured Hero Card ─────────────────────────────────────── */
.featured-hero {
    position: relative;
    min-height: 420px;
    border-radius: 16px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    margin-bottom: 40px;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
    transition: transform .35s, box-shadow .35s;
}
.featured-hero:hover { transform: translateY(-4px); box-shadow: 0 28px 70px rgba(0,0,0,.75); }
.featured-hero .fh-bg {
    position: absolute; inset:0; width:100%; height:100%;
    object-fit: cover;
    transition: transform .5s;
}
.featured-hero:hover .fh-bg { transform: scale(1.04); }
.featured-hero .fh-overlay {
    position:absolute; inset:0;
    background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.15) 100%);
}
.featured-hero .fh-content {
    position: absolute; bottom:0; left:0; right:0;
    padding: 36px 40px;
}
.featured-hero .fh-label {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--gold); color:#000;
    font-size:.72rem; font-weight:700; letter-spacing:.1em;
    padding: 4px 12px; border-radius:4px; margin-bottom:12px;
}
.featured-hero h2 {
    font-family:'Playfair Display',serif;
    color:#fff; font-size: clamp(1.4rem,3vw,2.1rem);
    line-height:1.25; margin-bottom:12px;
}
.featured-hero .fh-excerpt { color:rgba(255,255,255,.72); font-size:.95rem; margin-bottom:16px; max-width:600px; line-height:1.6; }
.featured-hero .fh-meta { display:flex; align-items:center; gap:20px; color:rgba(255,255,255,.65); font-size:.85rem; }
.featured-hero .fh-read { color:var(--gold); font-weight:700; font-size:.88rem; margin-left:auto; letter-spacing:.02em; }
.featured-hero .fh-read:hover { color:var(--gold2); }

/* ── Post Cards (Glassmorphism & High-Contrast) ───────────────── */
.post-card {
    background: var(--card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    display: flex; flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s, background 0.4s, border-color 0.4s;
    position: relative;
    z-index: 1;
}
.post-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 24px 50px rgba(0,0,0,0.8), 0 0 40px rgba(212,175,55,0.1);
    background: var(--card-hover);
    border-color: var(--border-h);
    z-index: 2;
}
.post-card .card-thumb {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: linear-gradient(135deg,#1a1108,#1f1a0a);
}
.post-card .card-thumb img {
    width:100%; height:100%; object-fit:cover;
    transition: transform .45s cubic-bezier(.25,.8,.25,1);
}
.post-card:hover .card-thumb img { transform: scale(1.07); }
.post-card .card-thumb .card-cat {
    position:absolute; top:10px; left:10px;
    background: rgba(0,0,0,.75); backdrop-filter:blur(6px);
    border: 1px solid rgba(201,168,76,.3);
    color: var(--gold); font-size:.72rem; font-weight:700;
    padding: 3px 10px; border-radius:4px;
    letter-spacing: .05em;
}
.post-card .card-thumb .card-placeholder {
    display:flex; align-items:center; justify-content:center;
    height:100%; color: var(--gold); opacity:.25; font-size:3.5rem;
}
.post-card .card-body {
    padding: 22px 22px 18px;
    display:flex; flex-direction:column; flex-grow:1;
}
.post-card .card-meta {
    display:flex; gap:16px; margin-bottom:12px;
    color: var(--dim); font-size:0.85rem; font-weight: 500;
}
.post-card .card-meta i { color: var(--gold); opacity: 0.9; }
.post-card h3 {
    font-family:'Playfair Display',serif;
    font-size: 1.25rem; line-height: 1.4;
    margin-bottom: 12px; font-weight: 600;
    letter-spacing: 0.02em;
}
.post-card h3 a { color: var(--text); text-decoration: none; transition: color 0.3s; }
.post-card h3 a:hover { color: var(--gold); }
.post-card .card-excerpt {
    font-size:.87rem; color: var(--muted);
    line-height:1.6; flex-grow:1;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    margin-bottom:16px;
}
.post-card .card-footer {
    display:flex; align-items:center; justify-content:space-between;
    padding-top:14px;
    border-top: 1px solid rgba(255,255,255,.07);
}
.card-tag {
    font-size:.75rem; font-weight:600;
    color: var(--gold);
    background: rgba(212,175,55,0.1);
    border: 1px solid rgba(212,175,55,0.3);
    border-radius:6px; padding:3px 10px;
    text-decoration:none; transition: all .2s;
}
.card-tag:hover { background:var(--gold); color:#000; border-color:var(--gold); box-shadow: 0 0 10px rgba(212,175,55,0.4); }
.card-read-more {
    font-size:.88rem; font-weight:700;
    color: var(--gold); text-decoration:none;
    display:flex; align-items:center; gap:6px;
    transition: gap .3s, color .3s, text-shadow .3s;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.card-read-more:hover { gap:10px; color:var(--gold2); text-shadow: 0 0 8px rgba(212,175,55,0.5); }

/* Quick Share on Card */
.card-quick-share {
    position: absolute; top: 12px; right: 12px;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    color: #fff; text-decoration: none; opacity: 0;
    transform: translateY(-10px); transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: pointer; z-index: 5;
}
.post-card:hover .card-quick-share { opacity: 1; transform: translateY(0); }
.card-quick-share:hover { background: var(--gold); color: #000; border-color: var(--gold); transform: scale(1.1); box-shadow: 0 4px 12px rgba(0,0,0,0.4); }

/* Animated Searching State */
.search-input.searching {
    background: rgba(212,175,55,0.15);
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(212,175,55,0.3);
}
.blog-search-wrap .spinner-border {
    position: absolute; right: 60px; top: 50%; transform: translateY(-50%);
    width: 1.2rem; height: 1.2rem; color: var(--gold);
    display: none;
}
.blog-search-wrap.is-loading .spinner-border { display: inline-block; }
.blog-search-wrap.is-loading .search-btn { opacity: 0.5; pointer-events: none; }

/* ── Section Heading ─────────────────────────────────────────── */
.section-heading {
    display:flex; align-items:center; gap:12px; margin-bottom:28px;
}
.section-heading .sh-line { flex:1; height:1px; background:linear-gradient(90deg,rgba(201,168,76,.3),transparent); }
.section-heading span {
    color:#fff; font-size:.72rem; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase;
    background: rgba(201,168,76,.1);
    border:1px solid rgba(201,168,76,.25);
    padding:5px 14px; border-radius:4px; white-space:nowrap;
}

/* ── Pagination ─────────────────────────────────────────────── */
.blog-pagination { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:48px; }
.blog-pagination a, .blog-pagination span {
    display:flex; align-items:center; justify-content:center;
    min-width:40px; height:40px; border-radius:8px;
    font-size:.88rem; font-weight:600; text-decoration:none;
    border: 1.5px solid rgba(255,255,255,.1);
    color: var(--muted);
    background: rgba(255,255,255,.03);
    transition: all .2s;
}
.blog-pagination a:hover { border-color:var(--gold); color:var(--gold); background:rgba(201,168,76,.07); }
.blog-pagination .active { background:var(--gold); border-color:var(--gold); color:#000; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 24px;
}
.sidebar-card .sc-title {
    font-size:.72rem; font-weight:800; letter-spacing:.12em;
    color: var(--gold); text-transform:uppercase;
    margin-bottom:18px;
    display:flex; align-items:center; gap:8px;
}
.sidebar-card .sc-title::after { content:''; flex:1; height:1px; background:rgba(201,168,76,.2); }

/* Featured sidebar items */
.sb-post-item { display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.05); text-decoration:none; transition:all .2s; }
.sb-post-item:last-child { border-bottom:none; padding-bottom:0; }
.sb-post-item:hover .sb-title { color:var(--gold) !important; }
.sb-post-thumb { width:60px; height:60px; object-fit:cover; border-radius:8px; flex-shrink:0; border:1px solid rgba(201,168,76,.15); }
.sb-thumb-placeholder { width:60px;height:60px;border-radius:8px;flex-shrink:0;background:linear-gradient(135deg,#1a1108,#2a1f0a);display:flex;align-items:center;justify-content:center;border:1px solid rgba(201,168,76,.15); }
.sb-title { color:rgba(255,255,255,.82); font-size:.85rem; font-weight:600; line-height:1.35; margin-bottom:4px; transition:color .2s; }
.sb-meta { color:var(--dim); font-size:.76rem; }
.sb-meta i { color:var(--gold); opacity:.7; }

/* Categories sidebar */
.sb-cat-link { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.05); text-decoration:none; color:rgba(255,255,255,.65); font-size:.9rem; transition:color .2s; }
.sb-cat-link:last-child { border-bottom:none; padding-bottom:0; }
.sb-cat-link:hover, .sb-cat-link.active { color:var(--gold); }
.sb-cat-link .sb-cat-count { font-size:.75rem; background:rgba(201,168,76,.12); border:1px solid rgba(201,168,76,.2); color:var(--gold); border-radius:20px; padding:2px 9px; font-weight:600; }

/* Tags Cloud */
.tag-cloud { display:flex; gap:6px; flex-wrap:wrap; }
.tag-pill {
    font-size:.77rem; font-weight:600;
    color:rgba(255,255,255,.6);
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-radius:20px; padding:4px 12px;
    text-decoration:none; transition:all .2s;
}
.tag-pill:hover, .tag-pill.active { background:var(--gold); border-color:var(--gold); color:#000; }

/* Archive */
.sb-archive-link { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.05); text-decoration:none; color:rgba(255,255,255,.65); font-size:.88rem; transition:color .2s; }
.sb-archive-link:last-child { border-bottom:none; padding-bottom:0; }
.sb-archive-link:hover { color:var(--gold); }
.sb-archive-count { font-size:.75rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.55); border-radius:20px; padding:2px 9px; }

/* Newsletter strip */
.newsletter-strip {
    background: linear-gradient(135deg, rgba(201,168,76,.12) 0%, rgba(201,168,76,.04) 100%);
    border: 1px solid rgba(201,168,76,.25);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
}
.newsletter-strip h5 { color:#fff; font-family:'Playfair Display',serif; font-size:1.1rem; margin-bottom:8px; }
.newsletter-strip p { color:var(--muted); font-size:.85rem; margin-bottom:16px; line-height:1.5; }
.newsletter-strip input {
    width:100%; background:rgba(0,0,0,.4); border:1.5px solid rgba(201,168,76,.3);
    border-radius:8px; padding:10px 14px; color:#fff; font-size:.9rem;
    outline:none; margin-bottom:10px;
}
.newsletter-strip input::placeholder { color:var(--dim); }
.newsletter-strip input:focus { border-color:var(--gold); }
.newsletter-strip .nl-btn {
    width:100%; background:var(--gold); color:#000; border:none;
    border-radius:8px; padding:10px; font-weight:700; font-size:.9rem;
    cursor:pointer; transition:background .2s;
}
.newsletter-strip .nl-btn:hover { background:var(--gold2); }

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state { text-align:center; padding:64px 24px; }
.empty-state .empty-icon { font-size:4rem; color:var(--gold); opacity:.2; margin-bottom:16px; }
.empty-state h4 { color:#fff; margin-bottom:8px; }
.empty-state p { color:var(--muted); margin-bottom:20px; }
.btn-gold-outline {
    display:inline-flex; align-items:center; gap:8px;
    border:1.5px solid var(--gold); color:var(--gold);
    background:transparent; border-radius:8px;
    padding:9px 22px; font-weight:600; font-size:.9rem;
    text-decoration:none; transition:all .2s;
}
.btn-gold-outline:hover { background:var(--gold); color:#000; }

/* ── Scroll reveal ────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:767px){
    .featured-hero .fh-content { padding:24px 20px; }
    .featured-hero .fh-excerpt { display:none; }
    .blog-hero { padding:60px 0 50px; }
}

/***************************************
		BLOG SINGLE PAGE
**************************************/

/*** Blog Content CSS & Reading Progress JS ***/
/* High Contrast Reading Styles */
.blog-content {
    font-size: 1.18rem; /* Slightly larger base */
    line-height: 1.85;
    letter-spacing: 0.01em;
}

/* Drop Cap Effect for first paragraph */
.blog-content > p:first-of-type::first-letter {
    color: #D4AF37;
    float: left;
    font-family: 'Playfair Display', serif;
    font-size: 5rem;
    line-height: 0.8;
    padding-top: 4px;
    padding-right: 12px;
    padding-left: 2px;
    margin-bottom: -10px;
    text-shadow: 2px 2px 10px rgba(212,175,55,0.3);
}

.blog-content h1,.blog-content h2,.blog-content h3,.blog-content h4 { 
    color:#D4AF37; margin-top:3rem; margin-bottom:1.5rem; 
    font-family:'Playfair Display',Georgia,serif; font-weight: 700; 
    letter-spacing: 0.02em; line-height: 1.3;
}
.blog-content h2 { font-size: 2.2rem; border-bottom: 1px solid rgba(212,175,55,0.2); padding-bottom: 10px; }
.blog-content h3 { font-size: 1.8rem; }

.blog-content p { color:rgba(255,255,255,0.92); margin-bottom:1.8rem; font-weight: 400; }

/* Animated Underline Links */
.blog-content a { 
    color:#D4AF37; 
    text-decoration: none; 
    position: relative;
    padding-bottom: 2px;
    font-weight: 500;
}
.blog-content a::after {
    content: '';
    position: absolute; width: 100%; height: 1px;
    bottom: 0; left: 0;
    background-color: #D4AF37;
    transform: scaleX(0); transform-origin: bottom right; transition: transform 0.3s ease-out;
}
.blog-content a:hover::after { transform: scaleX(1); transform-origin: bottom left; }
.blog-content a:hover { color: #F3E5AB; }

/* Enhanced Blockquote */
.blog-content blockquote { 
    position: relative;
    border-left:4px solid #D4AF37;
    padding: 1.8rem 2.5rem;
    margin: 3rem 0;
    background: linear-gradient(90deg, rgba(212,175,55,0.08) 0%, rgba(20,20,20,0.2) 100%);
    border-radius: 0 16px 16px 0;
    color:rgba(255,255,255,0.95);
    font-size: 1.4rem;
    font-style:italic; 
    font-family: 'Playfair Display', serif;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}
.blog-content blockquote::before {
    content: '"';
    position: absolute; top: -10px; left: 15px;
    font-family: 'Playfair Display', serif;
    font-size: 6rem; line-height: 1;
    color: rgba(212,175,55,0.15); pointer-events: none;
}

.blog-content img { max-width:100%; height: auto; border-radius:16px; margin:2.5rem 0; box-shadow: 0 16px 40px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.05); }
.blog-content iframe { max-width:100%; width:100% !important; aspect-ratio:16/9; height:auto !important; border-radius:16px; margin:2rem 0; box-shadow: 0 16px 40px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.05); }
.blog-content ul,.blog-content ol { color:rgba(255,255,255,0.92); padding-left:2.5rem; margin-bottom: 2rem; }
.blog-content li { margin-bottom:.8rem; }
.blog-content li::marker { color: #D4AF37; font-weight: bold; }
.blog-content pre,.blog-content code { background:#111; border-radius:8px; padding:.2em .6em; color:#F3E5AB; border: 1px solid rgba(255,255,255,0.1); font-size: 0.95em; }
.blog-content pre code { padding:0;background:none;border:none; }
.blog-content pre { padding:1.8rem; overflow-x:auto; box-shadow: inset 0 4px 15px rgba(0,0,0,0.8); margin: 2.5rem 0; border-radius: 12px; }
.blog-content table { width:100%;border-collapse:collapse;margin:3rem 0; font-size: 1.05rem; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border-radius: 12px; overflow: hidden; }
.blog-content th,.blog-content td { border:1px solid rgba(255,255,255,.05);padding:1.2rem 1.5rem;text-align:left; color: rgba(255,255,255,0.85); }
.blog-content th { background:rgba(212,175,55,0.12);color:#D4AF37; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9rem; }
.blog-content tr { background: rgba(20,20,20,0.8); }
.blog-content tr:nth-child(even) { background: rgba(30,30,30,0.8); }

/* Fade & Slide Up Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-up {
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Floating Action Bar */
.floating-action-bar {
    position: fixed;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%) translateX(-100px);
    z-index: 1000;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}
.floating-action-bar.visible {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
    pointer-events: auto;
}
.btn-action {
    width: 48px; height: 48px;
    background: transparent; color: #fff;
    border: 1px solid transparent;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; transition: all 0.3s ease;
}
.btn-action:hover {
    background: #D4AF37; color: #000;
    border-color: #D4AF37;
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(212,175,55,0.4);
}

@media(max-width: 1200px) {
    .floating-action-bar {
        left: 50%; top: auto; bottom: 2rem;
        transform: translateX(-50%) translateY(100px);
    }
    .floating-action-bar.visible {
        transform: translateX(-50%) translateY(0);
    }
    .floating-action-bar .fab-inner { flex-direction: row !important; }
    .floating-action-bar .fab-inner > div { width: 1px !important; height: 20px !important; }
}




															/********************************************************

																					CART CSS

															********************************************************/


/* Premium Cart Styles */
.cart-bg {
	background-color: #0a0a0a;
	min-height: calc(100vh - 80px);
}
.premium-card {
	background: #141414;
	border: 1px solid rgba(212, 175, 55, 0.15);
	border-radius: 0;
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.text-gold { color: #d4af37 !important; }
.bg-gold { background-color: #d4af37 !important; color: #000; }

.btn-gold {
	background: linear-gradient(135deg, #d4af37 0%, #aa8c2c 100%);
	color: #000;
	border: none;
	transition: all 0.3s ease;
}
.btn-gold:hover {
	background: linear-gradient(135deg, #f3cf5b 0%, #c5a337 100%);
	color: #000;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

.form-control-dark {
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #fff;
	padding: 0.75rem 1rem;
	border-radius: 0;
	transition: all 0.3s ease;
}
.form-control-dark:focus {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: #d4af37;
	box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25);
	color: #fff;
}
.form-control-dark[readonly] {
	background-color: rgba(0, 0, 0, 0.2);
	color: rgba(255,255,255,0.5);
}

.custom-address-input {
	border-left: 3px solid #d4af37 !important;
}

.custom-checkbox:checked {
	background-color: #d4af37;
	border-color: #d4af37;
}

.apply-coupon-box {
	cursor: pointer;
	background: linear-gradient(145deg, #1a1a1a 0%, #111 100%);
}
.apply-coupon-box:hover {
	border-color: #d4af37 !important;
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.coupon-card {
	border: 1px dashed rgba(212, 175, 55, 0.4);
	background: radial-gradient(circle at 0% 50%, #121212 8px, transparent 9px) 0 0,
				radial-gradient(circle at 100% 50%, #121212 8px, transparent 9px) 100% 0;
	background-color: #1a1a1a;
	background-size: 51% 100%;
	background-repeat: no-repeat;
	transition: transform 0.2s ease, border-color 0.2s ease;
}
.coupon-card:hover {
	transform: translateY(-2px);
	border-color: #d4af37;
}

.apply-btn-hover {
	transition: all 0.3s ease;
}
.apply-btn-hover:hover {
	filter: brightness(1.2);
}
.apply-link-hover:hover {
	color: #d4af37 !important;
	text-shadow: 0 0 8px rgba(212,175,55,0.4);
}

.fs-sm { font-size: 0.875rem; }
.fs-xs { font-size: 0.75rem; }
.tracking-wide { letter-spacing: 1px; }

/* Beautiful custom scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #444; border-radius: 10px; }
.custom-scrollbar:hover::-webkit-scrollbar-thumb { background: #d4af37; }

/* Select2 Custom Dark Styling */
.select2-container--default .select2-selection--single {
	background-color: rgba(255,255,255,0.05) !important;
	border: 1px solid rgba(255,255,255,0.1) !important;
	height: auto !important;
	padding: 0.25rem 0;
	border-radius: 0 !important;
}
.select2-container--default .select2-selection--single:focus {
	border-color: #d4af37 !important;
	box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #fff !important;
	line-height: normal !important;
	padding-left: 1rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100% !important;
	right: 10px !important;
}
.select2-dropdown {
	background-color: #1a1a1a !important;
	border: 1px solid #d4af37 !important;
	color: #fff !important;
	z-index: 1060 !important;
}
.select2-results__option--highlighted[aria-selected] {
	background-color: #d4af37 !important;
	color: #000 !important;
}

/* Global CSS Variable for reference */
:root {
	--text-gold: #d4af37;
	--gold-gradient: linear-gradient(135deg, #d4af37 0%, #aa8c2c 100%);
}



															/********************************************************

																					CHECKOUT CSS

															********************************************************/


/* Checkout Redesign Styles */
.checkout-bg {
	background-color: #0a0a0a;
	min-height: calc(100vh - 80px);
}
.premium-card {
	background: #141414;
	border: 1px solid rgba(212, 175, 55, 0.15);
	border-radius: 0;
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.text-gold { color: #d4af37 !important; }
.bg-gold { background-color: #d4af37 !important; color: #000; }

.custom-radio:checked {
	background-color: #d4af37;
	border-color: #d4af37;
}

.payment-method-box {
	background: rgba(255,255,255,0.02);
	transition: all 0.3s ease;
}
.payment-method-box.active {
	background: rgba(212, 175, 55, 0.05);
}

.btn-gold {
	background: linear-gradient(135deg, #d4af37 0%, #aa8c2c 100%);
	color: #000;
	border: none;
	transition: all 0.3s ease;
}
.btn-gold:hover {
	background: linear-gradient(135deg, #f3cf5b 0%, #c5a337 100%);
	color: #000;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

.tracking-wide { letter-spacing: 1px; }

/* Beautiful custom scrollbar */
.order-items-scrollable::-webkit-scrollbar { width: 4px; }
.order-items-scrollable::-webkit-scrollbar-track { background: transparent; }
.order-items-scrollable::-webkit-scrollbar-thumb { background: #444; border-radius: 10px; }
.order-items-scrollable:hover::-webkit-scrollbar-thumb { background: #d4af37; }

/* Global CSS Variable for reference */
:root {
	--text-gold: #d4af37;
}


															/********************************************************

																					COMMITTEE CSS

															********************************************************/

/* Committee Landing Styles */
.hero-committee {
    background: linear-gradient(rgba(10,10,10,0.8), rgba(10,10,10,0.9)), url('<?= BASE_URL ?>/media/committee-bg.jpg') center/cover;
    padding: 6rem 0 4rem;
    color: #fff;
    text-align: center;
}
.hero-committee h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: #d4af37;
}
.plan-card {
    background: #141414;
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}
.plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(212,175,55,0.15);
    border-color: #d4af37;
}
.plan-amount {
    font-size: 2.5rem;
    font-weight: bold;
    color: #d4af37;
}
.btn-gold-outline {
    border: 1px solid #d4af37;
    color: #d4af37;
    background: transparent;
    transition: all 0.3s;
}
.btn-gold-outline:hover {
    background: #d4af37;
    color: #000;
}



															/********************************************************

																					USER COMMITTEE CSS

															********************************************************/

/* Copying the dashboard-bg and premium-card styles from wallet.php */
.dashboard-bg {
    background-color: #0a0a0a;
    min-height: calc(100vh - 80px);
    padding-top: 3rem;
    padding-bottom: 3rem;
    color: #f8f9fa;
}
.premium-card {
    background: #141414;
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    overflow: hidden;
}
.sidebar-link {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    color: #888;
    text-decoration: none;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    font-family: var(--font-lato), sans-serif;
    font-weight: 600;
}
.sidebar-link i { margin-right: 15px; font-size: 1.2rem; }
.sidebar-link:hover, .sidebar-link.active {
    background: rgba(212, 175, 55, 0.1);
    color: #d4af37;
}

.committee-row {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 1.25rem 0;
    transition: background 0.2s;
}
.committee-row:hover {
    background: rgba(255,255,255,0.02);
}
.committee-row:last-child { border-bottom: none; }

.installment-row {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 1.25rem 0;
    transition: background 0.2s;
}
.installment-row:last-child { border-bottom: none; }
.installment-row:hover { background: rgba(255,255,255,0.02); }


															/********************************************************

																					KYC UPLOAD CSS

															********************************************************/

/* Premium Dashboard Styles (Consistent with profile.php) */
.dashboard-bg {
    background-color: #0a0a0a;
    min-height: calc(100vh - 80px);
    padding-top: 3rem;
    padding-bottom: 3rem;
    color: #f8f9fa;
}

.premium-card {
    background: #141414;
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    overflow: hidden;
}

.premium-label {
    color: #d4af37;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    display: block;
}

.premium-input {
    background-color: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.premium-input:focus {
    background-color: #222;
    border-color: #d4af37;
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
    color: #fff;
}

.premium-input[readonly] {
    background-color: #111;
    color: #888;
}

.btn-premium {
    background: linear-gradient(135deg, #d4af37 0%, #aa8c2c 100%);
    color: #000;
    font-weight: 600;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-premium:hover {
    background: linear-gradient(135deg, #e5c158 0%, #c1a13a 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
    color: #000;
}
.btn-outline-gold {
    color: #d4af37;
    border-color: #d4af37;
}
.btn-outline-gold:hover {
    background-color: #d4af37;
    color: #000;
}
.file-upload-wrapper {
    position: relative;
    border: 2px dashed rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    padding: 2rem 1rem;
    text-align: center;
    background: #1a1a1a;
    transition: all 0.3s ease;
    cursor: pointer;
}
.file-upload-wrapper:hover {
    border-color: #d4af37;
    background: #222;
}
.file-upload-wrapper input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.file-upload-wrapper i {
    font-size: 2rem;
    color: #d4af37;
    margin-bottom: 0.5rem;
}
.upload-preview {
    max-height: 150px;
    max-width: 100%;
    border-radius: 8px;
    margin-top: 1rem;
    display: none;
    object-fit: cover;
}
.camera-guide-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px dashed #d4af37;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    opacity: 0.65;
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4);
}
/* Custom premium selfie button styles */
.btn-selfie-camera,
.btn-selfie-file {
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: all 0.35s ease;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

.btn-selfie-camera {
    background: linear-gradient(135deg, #d4af37 0%, #aa8c2c 100%);
    color: #000 !important;
    border: none;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.25);
}

.btn-selfie-camera:hover {
    background: linear-gradient(135deg, #e5c158 0%, #c1a13a 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.btn-selfie-file {
    background: transparent;
    color: #d4af37 !important;
    border: 2px solid #d4af37;
}

.btn-selfie-file:hover {
    background: rgba(212, 175, 55, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.15);
}

/* Isolate selfie input from standard absolute wrapper styles */
#selfie-upload-wrapper #selfie-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    opacity: 0 !important;
}


															/********************************************************

																					LIVE RATE CSS

															********************************************************/

/* ── Variables ─────────────────────────────────────────────────── */
:root {
    --g:   #c9a84c;
    --g-lt:#e4c978;
    --g-dk:#8b6914;
    --g-glow: rgba(201,168,76,.35);
    --s:   #c0c0c0;
    --bg:  #0d0d05;
    --bg2: #131308;
    --bg3: #1c1c0e;
    --border: rgba(201,168,76,.18);
}

/* ── Hero ─────────────────────────────────────────────────────── */
.lr-hero {
    position: relative;
    padding: 80px 0 60px;
    overflow: hidden;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201,168,76,.12) 0%, transparent 70%), #0d0d05;
}
.lr-hero-bg {
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9a84c' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.lr-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .7rem; font-weight: 700; letter-spacing: .15em;
    color: var(--g); text-transform: uppercase;
    background: rgba(201,168,76,.08); border: 1px solid var(--border);
    padding: 5px 18px; border-radius: 20px; margin-bottom: 20px;
}
.lr-live-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #4caf50;
    box-shadow: 0 0 8px #4caf50;
    animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }

.lr-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 700; color: #fff; line-height: 1.15;
    margin-bottom: 18px;
    text-shadow: 0 2px 30px rgba(201,168,76,.2);
}
.lr-hero-sub {
    font-family: 'Lato', sans-serif;
    font-size: 1rem; color: rgba(255,255,255,.55); line-height: 1.7;
    max-width: 600px; margin: 0 auto 28px;
}
.lr-timestamp-bar {
    display: inline-flex; align-items: center;
    font-family: 'Lato', sans-serif; font-size: .8rem;
    color: rgba(255,255,255,.45);
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    padding: 7px 20px; border-radius: 30px;
}
.lr-refresh-badge {
    font-size: .7rem; font-weight: 600;
    background: rgba(201,168,76,.12); border: 1px solid var(--border);
    color: var(--g); border-radius: 10px; padding: 2px 10px;
}

/* ── Loader ────────────────────────────────────────────────────── */
.lr-loader-wrap {
    min-height: 320px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 18px;
    background: var(--bg); color: rgba(255,255,255,.4);
    font-family: 'Lato', sans-serif; font-size: .9rem;
}
.lr-spinner {
    width: 48px; height: 48px; border-radius: 50%;
    border: 3px solid rgba(201,168,76,.15);
    border-top-color: var(--g);
    animation: spin .9s linear infinite;
}
@keyframes spin { to{transform: rotate(360deg)} }

/* ── Section wrapper ─────────────────────────────────────────── */
.lr-section { background: var(--bg); padding: 60px 0 80px; }

/* ── Metal headings ─────────────────────────────────────────── */
.lr-metal-heading {
    display: flex; align-items: center; gap: 18px;
    margin-bottom: 36px;
}
.lr-metal-line {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.lr-metal-label {
    font-family: 'Lato', sans-serif; font-size: .75rem;
    font-weight: 700; letter-spacing: .14em;
    color: var(--g); white-space: nowrap;
}
.lr-silver-label { color: var(--s); }

/* ── Cards ─────────────────────────────────────────────────── */
.lr-animate {
    opacity: 0;
    animation: fadeUp .7s ease forwards;
    animation-delay: var(--delay, 0s);
}
@keyframes fadeUp {
    from { opacity:0; transform: translateY(22px); }
    to   { opacity:1; transform: translateY(0); }
}
.lr-card {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #1a1800 0%, #0f0f07 100%);
    border: 1px solid var(--border);
    border-radius: 18px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lr-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(201,168,76,.18);
    border-color: rgba(201,168,76,.4);
}
.lr-card-primary {
    background: linear-gradient(135deg, #231d00 0%, #100e00 100%);
    border-color: rgba(201,168,76,.35);
    box-shadow: 0 8px 40px rgba(201,168,76,.1);
}
.lr-card-primary:hover { box-shadow: 0 24px 70px rgba(201,168,76,.28); }
.lr-card-glow {
    position: absolute; top: -40px; right: -40px;
    width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, rgba(201,168,76,.18) 0%, transparent 70%);
    pointer-events: none;
}
.lr-card-silver {
    background: linear-gradient(135deg, #1a1a1e 0%, #0f0f12 100%);
    border-color: rgba(192,192,192,.25);
}
.lr-card-silver:hover {
    box-shadow: 0 20px 60px rgba(192,192,192,.12);
    border-color: rgba(192,192,192,.45);
}
.lr-card-inner {
    padding: 28px 32px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.lr-card-col {
    flex-direction: column; align-items: flex-start; text-align: left;
}
.lr-card-col .lr-rate-value { font-size: 2rem; }
.lr-card-left  { display: flex; align-items: flex-start; gap: 18px; }
.lr-card-right { text-align: right; min-width: 200px; }

/* ── Carat badges ────────────────────────────────────────────── */
.lr-carat-badge {
    flex-shrink: 0; width: 64px; height: 64px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem; font-weight: 700;
}
.lr-card-col .lr-carat-badge { width: 52px; height: 52px; font-size: 1rem; border-radius: 12px; }
.lr-carat-24k  { background: linear-gradient(135deg,#c9a84c,#8b6914); color:#fff; box-shadow: 0 6px 20px rgba(201,168,76,.4); }
.lr-carat-22k  { background: linear-gradient(135deg,#d4b96a,#9a7820); color:#fff; }
.lr-carat-21k  { background: linear-gradient(135deg,#b89840,#7a5c0e); color:#fff; }
.lr-carat-20k  { background: linear-gradient(135deg,#aa8a3a,#6e500d); color:#fff; }
.lr-carat-18k  { background: linear-gradient(135deg,#a07830,#5e3e06); color:#fff; }
.lr-carat-14k  { background: linear-gradient(135deg,#7a5820,#3e2004); color:#fff; }
.lr-carat-9k   { background: linear-gradient(135deg,#604010,#2a1402); color:#c9a84c; }
.lr-carat-silver_bar { background: linear-gradient(135deg,#e2e8f0,#94a3b8); color:#1e293b; box-shadow: 0 4px 15px rgba(148,163,184,.3); }
.lr-carat-silver_jewellery { background: linear-gradient(135deg,#cbd5e1,#64748b); color:#0f172a; }

/* ── Text elements ────────────────────────────────────────────── */
.lr-metal-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem; font-weight: 600; color: #fff;
}
.lr-purity {
    font-family: 'Lato', sans-serif;
    font-size: .78rem; color: rgba(255,255,255,.4);
    margin-top: 3px; letter-spacing: .04em;
}
.lr-rate-label {
    font-family: 'Lato', sans-serif;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
    color: rgba(255,255,255,.35); margin-bottom: 6px;
}
.lr-rate-value {
    font-family: 'Lato', sans-serif;
    font-size: 2.6rem; font-weight: 700; color: var(--g);
    line-height: 1; letter-spacing: -.01em;
    text-shadow: 0 0 20px rgba(201,168,76,.25);
}
.lr-rate-md { font-size: 2rem; }
.lr-silver-rate { color: var(--s) !important; text-shadow: 0 0 20px rgba(192,192,192,.2); }
.lr-silver-text { color: var(--s) !important; }
.lr-rate-10g {
    font-family: 'Lato', sans-serif;
    font-size: .8rem; color: rgba(255,255,255,.4); margin-top: 8px;
}
.lr-rate-hint {
    font-size: .68rem; text-transform: uppercase;
    letter-spacing: .08em; color: rgba(255,255,255,.3);
}
.lr-rate-multi {
    display: flex; gap: 16px; font-family: 'Lato', sans-serif;
    font-size: .8rem; color: rgba(255,255,255,.35);
}
.lr-rate-multi strong { color: rgba(255,255,255,.65); }

/* ── Hallmark tags ─────────────────────────────────────────── */
.lr-hallmark { display: flex; gap: 6px; flex-wrap: wrap; }
.lr-hm-tag {
    font-family: 'Lato', sans-serif;
    font-size: .62rem; font-weight: 600; letter-spacing: .08em;
    padding: 3px 9px; border-radius: 20px;
    background: rgba(201,168,76,.1); border: 1px solid rgba(201,168,76,.25);
    color: var(--g);
}
.lr-hm-silver {
    background: rgba(192,192,192,.08); border-color: rgba(192,192,192,.2);
    color: var(--s);
}

/* ── Purity Table ─────────────────────────────────────────── */
.lr-table-wrap {
    background: linear-gradient(135deg, #191700 0%, #0d0d05 100%);
    border: 1px solid var(--border); border-radius: 18px;
    overflow: hidden; margin-bottom: 24px;
}
.lr-table-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 26px; border-bottom: 1px solid var(--border);
    font-family: 'Lato', sans-serif;
    font-size: .82rem; font-weight: 700;
    color: var(--g); letter-spacing: .06em;
}
.lr-table-note { font-size: .72rem; color: rgba(255,255,255,.3); font-weight: 400; letter-spacing: 0; }
.lr-table {
    width: 100%; border-collapse: collapse;
    font-family: 'Lato', sans-serif; font-size: .85rem;
}
.lr-table thead tr { background: rgba(201,168,76,.04); }
.lr-table th {
    padding: 12px 20px; text-align: left;
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: rgba(201,168,76,.65);
    border-bottom: 1px solid var(--border);
}
.lr-table td {
    padding: 13px 20px; color: rgba(255,255,255,.6);
    border-bottom: 1px solid rgba(201,168,76,.05);
}
.lr-table tbody tr:last-child td { border-bottom: none; }
.lr-table tbody tr:hover td { background: rgba(201,168,76,.04); }
.lr-row-primary td { background: rgba(201,168,76,.04) !important; }
.lr-row-silver td  { background: rgba(192,192,192,.03) !important; }
.lr-tbl-carat { color: var(--g); font-size: .95rem; }
.lr-tbl-muted { color: rgba(255,255,255,.3); font-size: .78rem; }
.lr-tbl-rate  { font-weight: 700; color: rgba(255,255,255,.8); }

/* ── Disclaimer ─────────────────────────────────────────────── */
.lr-disclaimer {
    display: flex; align-items: flex-start; gap: 10px;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px; padding: 16px 22px;
    font-family: 'Lato', sans-serif; font-size: .8rem;
    color: rgba(255,255,255,.35); line-height: 1.6;
}
.lr-disclaimer i { color: rgba(255,255,255,.25); flex-shrink: 0; margin-top: 2px; }

/* ── Responsive tweaks ─────────────────────────────────────── */
@media (max-width: 767px) {
    .lr-card-inner    { flex-direction: column; padding: 22px 20px; }
    .lr-card-right    { text-align: left; min-width: unset; }
    .lr-rate-value    { font-size: 2rem; }
    .lr-table-head    { flex-direction: column; align-items: flex-start; gap: 4px; }
}


															/********************************************************

																					LOGIN PAGE CSS

															********************************************************/

/* Premium Login Specific Styles */
.login-bg {
	background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%);
	min-height: calc(100vh - 120px);
}

.login-card {
	background: #141414;
	border: 1px solid rgba(212, 175, 55, 0.2);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
	border-radius: 16px;
	overflow: hidden;
}

.login-img-panel {
	background-image: url('https://images.unsplash.com/photo-1599643478514-4a4204558509?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80');
	background-size: cover;
	background-position: center;
	position: relative;
	min-height: 250px;
}

.login-img-panel::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(20, 20, 20, 0.95), rgba(20, 20, 20, 0.3));
}

.auth-nav .nav-link {
	color: #888;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 1rem 1.5rem;
	font-weight: 600;
	letter-spacing: 1px;
	font-family: var(--font-lato), sans-serif;
	text-transform: uppercase;
	font-size: 0.85rem;
}

.auth-nav .nav-link:hover {
	color: #d4af37;
	border-color: transparent;
}

.auth-nav .nav-link.active {
	color: #d4af37;
	background: transparent;
	border-color: #d4af37;
}

.auth-input {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #fff;
	border-radius: 8px;
	padding: 0.8rem 1rem;
}

.auth-input:focus {
	background: rgba(255, 255, 255, 0.05);
	border-color: #d4af37;
	color: #fff;
	box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.15);
}

.auth-input::placeholder {
	color: #555;
}

/* In an input group, the right side of the prepend and left side of input need slight adjustment */
.input-group .auth-input:not(:first-child) {
	padding-left: 0.8rem !important;
}

.btn-premium {
	background: linear-gradient(135deg, #d4af37 0%, #aa851e 100%);
	color: #000;
	font-weight: 700;
	border: none;
	padding: 0.8rem 2rem;
	letter-spacing: 1px;
	transition: all 0.3s ease;
}

.btn-premium:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
	color: #000;
}

.btn-google {
	background: #fff;
	color: #333;
	font-weight: 600;
	border: 1px solid #ddd;
	border-radius: 8px;
	transition: all 0.3s ease;
}

.btn-google:hover {
	background: #f8f9fa;
	transform: translateY(-1px);
}



															/********************************************************

																					REWARDS PAGE CSS

															********************************************************/

/* Sidebar styles */
.dashboard-sidebar {
    background: #141414;
    border: 1px solid rgba(255,255,255,0.05);
}
.sidebar-link {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    color: #888;
    text-decoration: none;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    font-weight: 600;
}
.sidebar-link i {
    margin-right: 15px;
    font-size: 1.2rem;
}
.sidebar-link:hover, .sidebar-link.active {
    background: rgba(212, 175, 55, 0.1);
    color: #d4af37;
}

/* Reward Cards */
.reward-card {
    background: #141414;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
    position: relative;
}
.reward-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2;
}
.active-reward {
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.active-reward::before {
    background: #d4af37;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.8), 0 0 30px rgba(212, 175, 55, 0.5);
}
.used-reward::before {
    background: #dc3545;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.8), 0 0 30px rgba(220, 53, 69, 0.5);
}
.active-reward:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.1);
}
.rc-header {
    padding: 20px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rc-badge {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 50px;
    border: 1px solid #d4af37;
    color: #d4af37;
    font-weight: bold;
}
.rc-body {
    padding: 20px;
}
.rc-code-box {
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgba(212, 175, 55, 0.5);
    padding: 15px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rc-code {
    font-family: monospace;
    font-size: 1.2rem;
    color: #fff;
    font-weight: bold;
    letter-spacing: 2px;
}
.rc-footer {
    padding: 0 20px 20px;
}
.btn-gold {
    background: linear-gradient(135deg, #d4af37 0%, #aa8c2c 100%);
    color: #000;
    border: none;
}
.btn-gold:hover {
    background: linear-gradient(135deg, #f3cf5b 0%, #c5a337 100%);
    color: #000;
}
.btn-outline-gold {
    border: 1px solid #d4af37;
    color: #d4af37;
    background: transparent;
}
.btn-outline-gold:hover {
    background: #d4af37;
    color: #000;
}



															/********************************************************

																					ORDER CSS

															********************************************************/

/* Dashboard Styles Copied for context isolation */
.dashboard-bg { background-color: #0a0a0a; min-height: calc(100vh - 80px); padding-top: 3rem; padding-bottom: 3rem; color: #f8f9fa; }
.premium-card { background: #141414; border: 1px solid rgba(212, 175, 55, 0.15); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); overflow: hidden; }
.tracking-wrapper { padding-top: 10px; padding-bottom: 30px; }
.bg-gold { background-color: #d4af37 !important; color: #000; }
.text-gold { color: #d4af37 !important; }
.btn-outline-gold { border: 1px solid #d4af37; color: #d4af37; background: transparent; transition: all 0.3s ease; }
.btn-outline-gold:hover { background: #d4af37; color: #000; }
.hover-gold { transition: color 0.2s ease; }
.hover-gold:hover { color: #d4af37 !important; text-decoration: underline !important; }

.sidebar-link { display: flex; align-items: center; padding: 1rem 1.25rem; color: #888; text-decoration: none; border-radius: 8px; margin-bottom: 0.5rem; transition: all 0.3s ease; font-weight: 600; }
.sidebar-link i { margin-right: 15px; font-size: 1.2rem; }
.sidebar-link:hover, .sidebar-link.active { background: rgba(212, 175, 55, 0.1); color: #d4af37; }
.btn-premium { background: linear-gradient(135deg, #d4af37 0%, #aa851e 100%); color: #000; font-weight: 700; border: none; padding: 0.8rem 2.5rem; letter-spacing: 1px; border-radius: 8px; transition: all 0.3s ease; }


															/********************************************************

																					PAGE CSS

															********************************************************/

/* Specific Typography and Styling for Legal Documents */
.page-content-wrapper h2 {
    font-family: 'Playfair Display', serif;
    color: #d4af37;
    margin-top: 2.5rem;
    margin-bottom: 1.2rem;
    font-size: 1.8rem;
    font-weight: 700;
}
.page-content-wrapper h3 {
    font-family: 'Playfair Display', serif;
    color: #fff;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.4rem;
    font-weight: 600;
}
.page-content-wrapper p {
    margin-bottom: 1.5rem;
    text-align: justify;
}
.page-content-wrapper ul, 
.page-content-wrapper ol {
    margin-bottom: 2rem;
    padding-left: 1.5rem;
}
.page-content-wrapper li {
    margin-bottom: 0.5rem;
}
.page-content-wrapper a {
    color: #d4af37;
    text-decoration: none;
    transition: all 0.2s ease;
}
.page-content-wrapper a:hover {
    color: #f3cf5b;
    text-decoration: underline;
}
.drop-shadow {
    text-shadow: 2px 2px 20px rgba(0,0,0,0.8);
}


															/********************************************************

																					PROFILE PAGE CSS

															********************************************************/

/* Premium Dashboard Styles */
.dashboard-bg {
    background-color: #0a0a0a;
    min-height: calc(100vh - 80px);
    padding-top: 3rem;
    padding-bottom: 3rem;
    color: #f8f9fa;
}

.premium-card {
    background: #141414;
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    overflow: hidden;
}

/* Sidebar Styling */
.dashboard-sidebar {
    padding: 2rem 1.5rem;
    border-right: 1px solid rgba(255,255,255,0.05);
    height: 100%;
}
.sidebar-link {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    color: #888;
    text-decoration: none;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    font-family: var(--font-lato), sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.sidebar-link i {
    margin-right: 15px;
    font-size: 1.2rem;
}
.sidebar-link:hover, .sidebar-link.active {
    background: rgba(212, 175, 55, 0.1);
    color: #d4af37;
}

/* Profile Picture Upload */
.profile-img-container {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 50%;
    padding: 5px;
    background: linear-gradient(135deg, #d4af37 0%, rgba(20,20,20,1) 100%);
}
.profile-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #141414;
}
.profile-img-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #d4af37;
    color: #000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
    border: 3px solid #141414;
}
.profile-img-overlay:hover {
    transform: scale(1.1);
}

/* Form Styling */
.premium-label {
    color: #888;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}
.premium-input {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
}
.premium-input:focus {
    background: rgba(255,255,255,0.05);
    border-color: #d4af37;
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.15);
}

/* Select2 Custom Dark Styling */
.select2-container--default .select2-selection--single {
    background-color: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    height: 50px !important;
    border-radius: 8px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
    line-height: 50px !important;
    padding-left: 1.2rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px !important;
}
.select2-dropdown {
    background-color: #1a1a1a !important;
    border: 1px solid #d4af37 !important;
    color: #fff !important;
    z-index: 1060 !important; /* Above modal */
}
.select2-results__option--highlighted[aria-selected] {
    background-color: #d4af37 !important;
    color: #000 !important;
}

.border-gold {
    border-color: #d4af37 !important;
}

.btn-premium {
    background: linear-gradient(135deg, #d4af37 0%, #aa851e 100%);
    color: #000;
    font-weight: 700;
    border: none;
    padding: 0.8rem 2.5rem;
    letter-spacing: 1px;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
    color: #000;
}

.verification-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
}

/* Cropper Modal */
#cropper-container {
    max-height: 400px;
    overflow: hidden;
}


															/********************************************************

																					SPIN & WIN CSS

															********************************************************/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,800;1,400;1,700&family=Lato:wght@300;400;700;900&display=swap');

/*********************************************************************
   PREMIUM SPIN & WIN — JEWELLERY LUXURY EDITION
**********************************************************************/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --gold-1: #fce9a0;
    --gold-2: #f0d48a;
    --gold-3: #c5a059;
    --gold-4: #9a7730;
    --gold-5: #6b5020;
    --dark-1: #000000;
    --dark-2: #060504;
    --dark-3: #0c0a08;
    --dark-4: #131008;
    --dark-5: #1c1710;
}

/* ── PAGE SHELL ──────────────────────────────────────────── */
.sw-page {
    font-family: 'Lato', sans-serif;
    color: #fff;
    background: var(--dark-1);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

/* Background particle canvas */
#sw-particle-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.7;
}

/* Deep atmospheric background */
.sw-bg-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 60% at 15% 40%, rgba(197,160,89,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 80% 80% at 85% 60%, rgba(197,160,89,0.05) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(197,160,89,0.08) 0%, transparent 50%),
        linear-gradient(180deg, #000000 0%, #060504 40%, #0c0a08 100%);
}

/* Gold grid pattern */
.sw-bg-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(197,160,89,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(197,160,89,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* ── HERO SPLIT LAYOUT ─────────────────────────────────── */
.sw-hero {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    align-items: center;
}

/* ── LEFT PANEL ──────────────────────────────────────── */
.sw-left {
    padding: 70px 70px 70px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background:
        radial-gradient(ellipse 100% 80% at 0% 50%, rgba(197,160,89,0.06) 0%, transparent 65%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(197,160,89,0.04) 0%, transparent 60%);
}
.sw-left::after {
    content: '';
    position: absolute;
    right: 0; top: 8%; bottom: 8%;
    width: 1px;
    background: linear-gradient(to bottom, transparent 0%, rgba(197,160,89,0.15) 20%, rgba(197,160,89,0.55) 50%, rgba(197,160,89,0.15) 80%, transparent 100%);
}

/* Decorative corner ornament */
.sw-left-corner {
    position: absolute;
    top: 40px; left: 40px;
    width: 60px; height: 60px;
    pointer-events: none;
    opacity: 0.25;
}
.sw-left-corner::before,
.sw-left-corner::after {
    content: '';
    position: absolute;
    background: var(--gold-3);
}
.sw-left-corner::before { top: 0; left: 0; width: 100%; height: 1px; }
.sw-left-corner::after  { top: 0; left: 0; width: 1px; height: 100%; }

/* ── BADGE ROW ─────────────────────────────── */
.sw-badge-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 36px;
}
.sw-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    border: 1px solid rgba(197,160,89,0.35);
    background: rgba(197,160,89,0.07);
    color: var(--gold-3);
    position: relative;
    overflow: hidden;
}
.sw-badge-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(197,160,89,0.08) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: pillShimmer 3s ease-in-out infinite;
}
@keyframes pillShimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.sw-badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold-3);
    box-shadow: 0 0 8px var(--gold-3);
    animation: dotBlink 1.5s ease-in-out infinite;
}
@keyframes dotBlink { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
.sw-badge-sep { color: rgba(197,160,89,0.2); font-size: 1rem; }

/* ── EYEBROW ───────────────────────────────── */
.sw-eyebrow {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 20px;
}
.sw-eyebrow-text {
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 9px;
    text-transform: uppercase;
    color: rgba(197,160,89,0.55);
}

/* ── HEADLINE ──────────────────────────────── */
.sw-headline {
    font-family: 'Playfair Display', serif;
    font-size: clamp(3.2rem, 4.8vw, 5.8rem);
    font-weight: 800;
    line-height: 1.0;
    margin-bottom: 8px;
    letter-spacing: -2px;
    color: #fff;
}
.sw-headline-sub {
    font-family: 'Playfair Display', serif;
    font-size: clamp(3.2rem, 4.8vw, 5.8rem);
    font-weight: 800;
    font-style: italic;
    line-height: 1.0;
    letter-spacing: -2px;
    background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 30%, var(--gold-3) 65%, var(--gold-4) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: goldFlow 4s linear infinite;
    margin-bottom: 32px;
    display: block;
}
@keyframes goldFlow {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Ornament divider */
.sw-ornament {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}
.sw-ornament-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(197,160,89,0.35));
}
.sw-ornament-line.r { background: linear-gradient(90deg, rgba(197,160,89,0.35), transparent); }
.sw-ornament-glyph {
    font-size: 0.75rem;
    color: var(--gold-3);
    letter-spacing: 6px;
    opacity: 0.7;
}

/* ── DESCRIPTION ───────────────────────────── */
.sw-desc {
    font-size: 1rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.9;
    max-width: 100%;
    margin-bottom: 30px;
    font-weight: 300;
    letter-spacing: 0.2px;
}

/* ── STATUS / NOTICE ───────────────────────── */
.sw-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 22px;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 24px;
}
.sw-notice.gold {
    background: rgba(197,160,89,0.07);
    border: 1px solid rgba(197,160,89,0.3);
    color: var(--gold-2);
}
.sw-notice.danger {
    background: rgba(255,80,80,0.07);
    border: 1px solid rgba(255,80,80,0.2);
    color: #ff8a8a;
}
.sw-notice i { font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }

/* ── LOGIN CTA ─────────────────────────────── */
.sw-login-cta {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, rgba(197,160,89,0.1), rgba(197,160,89,0.04));
    border: 1px solid rgba(197,160,89,0.3);
    border-radius: 16px;
    padding: 22px 28px;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.35s cubic-bezier(0.23,1,0.32,1);
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}
.sw-login-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(197,160,89,0.06), transparent);
    background-size: 200% 100%;
    animation: pillShimmer 4s ease-in-out infinite;
}
.sw-login-cta:hover {
    background: rgba(197,160,89,0.15);
    border-color: rgba(197,160,89,0.55);
    transform: translateX(6px);
    color: var(--gold-2);
    box-shadow: 0 8px 30px rgba(197,160,89,0.15);
}
.sw-login-cta-icon {
    width: 52px; height: 52px;
    background: linear-gradient(135deg, var(--gold-3), var(--gold-5));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(197,160,89,0.3);
}
.sw-login-cta-text-top {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* ── PRIZE CARDS ───────────────────────────── */
.sw-prizes-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.sw-prizes-head-text {
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(197,160,89,0.5);
    white-space: nowrap;
}
.sw-prizes-head-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(197,160,89,0.25), transparent);
}

.sw-prize-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 44px;
}
.sw-prize-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(197,160,89,0.04);
    border: 1px solid rgba(197,160,89,0.14);
    transition: all 0.3s cubic-bezier(0.23,1,0.32,1);
    cursor: default;
    position: relative;
    overflow: hidden;
}
.sw-prize-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(197,160,89,0.3), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}
.sw-prize-card:hover { border-color: rgba(197,160,89,0.4); background: rgba(197,160,89,0.08); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.sw-prize-card:hover::before { transform: translateX(0); }
.sw-prize-icon-wrap {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    background: rgba(197,160,89,0.1);
    border: 1px solid rgba(197,160,89,0.2);
}
.sw-prize-info { min-width: 0; }
.sw-prize-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.sw-prize-type {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-3);
    opacity: 0.7;
}

/* ── TRUST BADGES ──────────────────────────── */
.sw-trust-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 28px;
    border-top: 1px solid rgba(197,160,89,0.1);
}
.sw-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}
.sw-trust-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(197,160,89,0.07);
    border: 1px solid rgba(197,160,89,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.3s;
}
.sw-trust-item:hover .sw-trust-icon { background: rgba(197,160,89,0.14); border-color: rgba(197,160,89,0.4); box-shadow: 0 4px 16px rgba(197,160,89,0.15); }
.sw-trust-val {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gold-2);
    line-height: 1;
}
.sw-trust-lbl {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.28);
    text-align: center;
}
.sw-trust-sep {
    width: 1px; height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(197,160,89,0.2), transparent);
}

/* RIGHT PANEL — WHEEL */
.sw-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 60px 80px 80px;
    position: relative;
    gap: 40px;
}

/* Decorative floating diamonds */
.sw-floater {
    position: absolute;
    color: var(--gold-3);
    opacity: 0.15;
    font-size: 1.2rem;
    animation: floatDiamond 8s ease-in-out infinite;
    pointer-events: none;
}
.sw-floater:nth-child(2) { animation-delay: -2s; font-size: 0.8rem; }
.sw-floater:nth-child(3) { animation-delay: -4s; font-size: 1.6rem; }
.sw-floater:nth-child(4) { animation-delay: -6s; font-size: 0.6rem; }
@keyframes floatDiamond {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.1; }
    25% { opacity: 0.25; }
    50% { transform: translateY(-20px) rotate(180deg); opacity: 0.2; }
}

/* ── WHEEL COMPONENT ──────────────────────────────────── */
.wheel-stage {
    position: relative;
    width: 520px;
    height: 520px;
    flex-shrink: 0;
}

/* Ambient glow layers */
.wheel-glow-outer {
    position: absolute;
    inset: -60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(197,160,89,0.12) 0%, transparent 70%);
    animation: ambientPulse 4s ease-in-out infinite;
    pointer-events: none;
}
.wheel-glow-mid {
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(197,160,89,0.08) 0%, transparent 70%);
    animation: ambientPulse 4s ease-in-out infinite 0.5s;
    pointer-events: none;
}
@keyframes ambientPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.08); opacity: 1; }
}

/* Rotating ornamental rings */
.wheel-ring-1 {
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    border: 1px solid rgba(197,160,89,0.5);
    pointer-events: none;
    animation: spinRingCW 30s linear infinite;
    /* Dashes via box-shadow trick */
    background: transparent;
}
.wheel-ring-2 {
    position: absolute;
    inset: -28px;
    border-radius: 50%;
    border: 1px dashed rgba(197,160,89,0.2);
    pointer-events: none;
    animation: spinRingCCW 45s linear infinite;
}
.wheel-ring-3 {
    position: absolute;
    inset: -44px;
    border-radius: 50%;
    border: 1px solid rgba(197,160,89,0.08);
    pointer-events: none;
    animation: spinRingCW 60s linear infinite;
}
@keyframes spinRingCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spinRingCCW { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* Tick marks on ring 1 */
.wheel-ring-ticks {
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    pointer-events: none;
    animation: spinRingCW 30s linear infinite;
}
.wheel-tick {
    position: absolute;
    left: calc(50% - 1px);
    top: 0;
    width: 2px;
    height: 8px;
    background: var(--gold-3);
    border-radius: 2px;
    transform-origin: 1px calc(50% + 50% * 1);
}

/* ── PREMIUM NEEDLE POINTER ─────────────────────────── */
.wheel-pointer {
    /* Centre horizontally; tip of needle (needle height=52px, mount=32px, total=84px)
       Position so tip lands exactly on the rim: top = -(total height - overlap) */
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
/* Animated glow halo behind the mount */
.wheel-pointer-glow {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(197,160,89,0.55) 0%, transparent 70%);
    animation: ptrHaloPulse 1.8s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes ptrHaloPulse {
    0%, 100% { transform: translateX(-50%) scale(1);    opacity: 0.7; }
    50%       { transform: translateX(-50%) scale(1.35); opacity: 1;   }
}
/* Outer glow ring that expands */
.wheel-pointer-ring {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 1.5px solid rgba(197,160,89,0.5);
    animation: ptrRingExpand 1.8s ease-out infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes ptrRingExpand {
    0%   { transform: translateX(-50%) scale(1);    opacity: 0.8; }
    100% { transform: translateX(-50%) scale(1.7);  opacity: 0;   }
}
/* Needle bounce animation */
.wheel-pointer svg {
    animation: needleBounce 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    filter:
        drop-shadow(0 0 10px rgba(252,233,160,0.9))
        drop-shadow(0 4px 20px rgba(197,160,89,0.7))
        drop-shadow(0 -2px 8px rgba(252,233,160,0.4));
}
@keyframes needleBounce {
    0%, 100% {
        transform: translateY(0);
        filter:
            drop-shadow(0 0 10px rgba(252,233,160,0.9))
            drop-shadow(0 4px 20px rgba(197,160,89,0.7));
    }
    40% {
        transform: translateY(5px);
        filter:
            drop-shadow(0 0 18px rgba(252,233,160,1))
            drop-shadow(0 8px 28px rgba(197,160,89,1))
            drop-shadow(0 -2px 12px rgba(252,233,160,0.6));
    }
    65% {
        transform: translateY(2px);
    }
}

/* Canvas wrapper */
.wheel-canvas-shell {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
        0 0 0 6px #060504,
        0 0 0 10px rgba(197,160,89,0.5),
        0 0 0 12px #060504,
        0 0 0 15px rgba(197,160,89,0.15),
        0 30px 80px rgba(0,0,0,0.9),
        inset 0 0 30px rgba(0,0,0,0.4);
}
#spin_canvas {
    width: 100%; height: 100%;
    transition: transform 5s cubic-bezier(0.1, 0.7, 0.1, 1);
    will-change: transform;
}

/* Premium center hub */
.wheel-hub {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 80px;
    border-radius: 50%;
    z-index: 25;
    cursor: default;
}
.wheel-hub-inner {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #2a2010, #0a0804);
    border: 3px solid var(--gold-3);
    box-shadow: 0 0 0 2px rgba(197,160,89,0.15), 0 0 30px rgba(197,160,89,0.4), inset 0 2px 6px rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.wheel-hub-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: conic-gradient(
        rgba(197,160,89,0.2) 0deg,
        transparent 60deg,
        rgba(197,160,89,0.1) 120deg,
        transparent 180deg,
        rgba(197,160,89,0.2) 240deg,
        transparent 300deg,
        rgba(197,160,89,0.1) 360deg
    );
    border-radius: 50%;
    animation: spinRingCW 8s linear infinite;
}
.wheel-hub-gem {
    position: relative;
    z-index: 2;
    font-size: 1.6rem;
    animation: gemPulse 2s ease-in-out infinite;
}
@keyframes gemPulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.1); filter: brightness(1.3); }
}

/* ── SPIN BUTTON ─────────────────────────────────────── */
.sw-btn-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.sw-spin-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 20px 64px;
    border: none;
    border-radius: 60px;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #0a0804;
    background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 25%, var(--gold-3) 50%, var(--gold-4) 75%, var(--gold-5) 100%);
    background-size: 300% 100%;
    background-position: 0% center;
    box-shadow: 0 8px 40px rgba(197,160,89,0.4), 0 2px 10px rgba(0,0,0,0.5);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
}
.sw-spin-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 60px;
    background: linear-gradient(135deg, var(--gold-1), var(--gold-2), var(--gold-3));
    opacity: 0;
    transition: opacity 0.4s;
}
.sw-spin-btn::after {
    content: '';
    position: absolute;
    top: 8px; left: 8px; right: 8px; bottom: 8px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.25);
    pointer-events: none;
}
.sw-spin-btn:hover:not(:disabled) {
    background-position: 100% center;
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 16px 50px rgba(197,160,89,0.55), 0 4px 20px rgba(0,0,0,0.5);
}
.sw-spin-btn:hover:not(:disabled)::before { opacity: 1; }
.sw-spin-btn-icon {
    font-size: 1.3rem;
    position: relative;
    z-index: 1;
    animation: spinIcon 6s linear infinite;
}
@keyframes spinIcon {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.sw-spin-btn-text { position: relative; z-index: 1; }
.sw-spin-btn:disabled {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    color: #555;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.sw-spin-btn:disabled .sw-spin-btn-icon { animation: none; }
.sw-spin-btn:disabled::after { border-color: rgba(255,255,255,0.05); }

.sw-spin-hint {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.25);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
}

/* ── WINNER MODAL ────────────────────────────────────── */
.sw-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(0,0,0,0.93);
    backdrop-filter: blur(12px) saturate(0.5);
    -webkit-backdrop-filter: blur(12px) saturate(0.5);
    align-items: center;
    justify-content: center;
}
.sw-modal-backdrop.open { display: flex; }

.sw-modal-box {
    position: relative;
    max-width: 520px;
    width: 94%;
    border-radius: 24px;
    overflow: hidden;
    animation: modalBurst 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 40px 100px rgba(0,0,0,0.9), 0 0 0 1px rgba(197,160,89,0.3);
}
@keyframes modalBurst {
    from { opacity: 0; transform: scale(0.7) translateY(30px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Animated gradient border */
.sw-modal-box::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 26px;
    background: linear-gradient(45deg, var(--gold-5), var(--gold-3), var(--gold-1), var(--gold-3), var(--gold-5));
    background-size: 300% 300%;
    animation: borderRotate 3s linear infinite;
    z-index: -1;
}
@keyframes borderRotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.sw-modal-inner {
    background: linear-gradient(160deg, #0e0b07 0%, #070504 50%, #0a0804 100%);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

/* Shine effect inside modal */
.sw-modal-inner::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(from 0deg at 50% 50%, transparent 340deg, rgba(197,160,89,0.06) 360deg);
    animation: modalShine 8s linear infinite;
    pointer-events: none;
}
@keyframes modalShine { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.sw-modal-top {
    padding: 50px 40px 30px;
    text-align: center;
    position: relative;
}

.sw-modal-trophy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(197,160,89,0.15), transparent 70%);
    border: 1px solid rgba(197,160,89,0.25);
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 24px;
    animation: trophyBounce 0.8s cubic-bezier(0.34,1.56,0.64,1) 0.3s both;
}
@keyframes trophyBounce {
    from { transform: scale(0) rotate(-30deg); }
    to { transform: scale(1) rotate(0deg); }
}

.sw-modal-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    line-height: 1.2;
}

.sw-modal-subtitle {
    color: rgba(255,255,255,0.55);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 360px;
    margin: 0 auto;
}

.sw-modal-body {
    padding: 0 40px 30px;
    text-align: center;
}

/* Coupon Card */
.sw-coupon-card {
    background: linear-gradient(135deg, rgba(197,160,89,0.06), rgba(197,160,89,0.02));
    border: 1px solid rgba(197,160,89,0.35);
    border-radius: 16px;
    padding: 30px 24px;
    margin: 0 0 24px;
    position: relative;
    overflow: hidden;
}
.sw-coupon-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-3), transparent);
}
.sw-coupon-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-3), transparent);
}
.sw-coupon-eyebrow {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(197,160,89,0.6);
    margin-bottom: 14px;
}
.sw-coupon-code-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: nowrap;
}
.sw-coupon-code-text {
    font-family: 'Lato', sans-serif;
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 900;
    letter-spacing: 6px;
    white-space: nowrap;
    font-variant-numeric: lining-nums tabular-nums;
    background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sw-copy-btn {
    background: rgba(197,160,89,0.15);
    border: 1px solid rgba(197,160,89,0.3);
    color: var(--gold-3);
    border-radius: 8px;
    width: 38px; height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.sw-copy-btn:hover { background: rgba(197,160,89,0.25); border-color: var(--gold-3); }
.sw-coupon-validity {
    font-size: 0.78rem;
    color: rgba(197,160,89,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Gift & Empty Cards */
.sw-result-card {
    border-radius: 16px;
    padding: 28px 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.sw-result-card.gift {
    background: radial-gradient(ellipse at top, rgba(197,160,89,0.12), rgba(197,160,89,0.03));
    border: 1px solid rgba(197,160,89,0.3);
}
.sw-result-card.empty {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
}
.sw-result-emoji { font-size: 3rem; margin-bottom: 14px; line-height: 1; }
.sw-result-heading {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--gold-2);
}
.sw-result-text { color: rgba(255,255,255,0.55); font-size: 0.9rem; line-height: 1.7; }

.sw-modal-footer {
    display: flex;
    gap: 14px;
    padding: 0 40px 40px;
    justify-content: center;
}
.sw-modal-cta {
    background: linear-gradient(135deg, var(--gold-3), var(--gold-4));
    color: #000;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 16px 36px;
    border-radius: 50px;
    text-decoration: none;
    border: none;
    transition: all 0.3s;
    display: inline-block;
}
.sw-modal-cta:hover { background: linear-gradient(135deg, var(--gold-2), var(--gold-3)); color: #000; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(197,160,89,0.3); }
.sw-modal-close {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.6);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 16px 36px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
}
.sw-modal-close:hover { border-color: rgba(255,255,255,0.35); color: #fff; }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 1100px) {
    .sw-hero { grid-template-columns: 1fr; }
    .sw-left { padding: 60px 40px 0; }
    .sw-left::after { display: none; }
    .sw-right { padding: 40px 40px 60px; }
    .wheel-stage { width: 380px; height: 380px; }
    .sw-trust-row { display: none; }
    .sw-prize-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
    .sw-left { padding: 40px 24px 0; }
    .sw-right { padding: 30px 24px 50px; }
    .wheel-stage { width: 300px; height: 300px; }
    .sw-headline { font-size: 2.8rem; }
    .sw-headline-sub { font-size: 2.8rem; }
    .sw-prize-grid { grid-template-columns: 1fr 1fr; }
    .sw-modal-top { padding: 36px 24px 20px; }
    .sw-modal-body { padding: 0 24px 20px; }
    .sw-modal-footer { padding: 0 24px 32px; flex-wrap: wrap; }
    .sw-coupon-code-text { font-size: 1.8rem; letter-spacing: 4px; }
}


															/********************************************************

																					VIDEO PLAYER CSS

															********************************************************/

/* ─── Hero ───────────────────────────────────────────────────────────── */
.vp-hero {
    position:relative;padding:90px 0 60px;overflow:hidden;
    background:#0a0a0a;
}
.vp-hero-bg {
    position:absolute;inset:0;
    background:radial-gradient(ellipse 70% 90% at 50% 0%,rgba(201,168,76,.13) 0%,transparent 70%);
}
.vp-hero-inner { position:relative;text-align:center; }
.vp-hero-badge {
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.3);
    padding:6px 18px;border-radius:50px;font-size:13px;font-weight:600;
    color:#C9A84C;letter-spacing:.5px;margin-bottom:20px;
}
.vp-live-dot {
    width:8px;height:8px;border-radius:50%;background:#FF0000;
    display:inline-block;animation:vp-pulse 1.5s infinite;
}
@keyframes vp-pulse {0%,100%{box-shadow:0 0 0 0 rgba(255,0,0,.6)}50%{box-shadow:0 0 0 6px rgba(255,0,0,0)}}
.vp-hero-title {
    font-family:'Playfair Display',Georgia,serif;
    font-size:clamp(2.2rem,5vw,3.5rem);font-weight:700;
    background:linear-gradient(135deg,#F0D48A 0%,#C9A84C 40%,#9a7a2d 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    margin-bottom:16px;line-height:1.2;
}
.vp-hero-sub { color:rgba(240,237,232,.55);font-size:1.05rem;max-width:520px;margin:0 auto 30px; }
.vp-search-wrap { position:relative;max-width:480px;margin:0 auto; }
.vp-search-icon { position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#C9A84C;font-size:16px; }
.vp-search {
    width:100%;padding:14px 20px 14px 48px;
    background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.25);
    border-radius:50px;color:#f0ede8;font-size:15px;outline:none;
    transition:border-color .2s;
}
.vp-search:focus { border-color:rgba(201,168,76,.6); }
.vp-search::placeholder { color:rgba(240,237,232,.35); }

/* ─── Filter Bar ─────────────────────────────────────────────────────── */
.vp-filter-bar {
    background:#111;border-bottom:1px solid rgba(201,168,76,.12);
    padding:12px 0;position:sticky;top:0;z-index:50;
}
.vp-tabs { display:flex;gap:8px;flex-wrap:wrap;align-items:center; }
.vp-tab {
    padding:7px 18px;border-radius:50px;
    border:1px solid rgba(201,168,76,.12);
    background:transparent;color:rgba(240,237,232,.55);font-size:13px;font-weight:600;cursor:pointer;
    transition:.2s;
}
.vp-tab:hover { border-color:rgba(201,168,76,.4);color:#C9A84C; }
.vp-tab.active { background:linear-gradient(135deg,#C9A84C,#9a7a2d);color:#000;border-color:transparent; }

/* ─── Grid Section ───────────────────────────────────────────────────── */
.vp-grid-section { background:#0a0a0a;padding:48px 0 80px; }
.vp-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:24px;
}

/* ─── Card ───────────────────────────────────────────────────────────── */
.vp-card {
    background:#111;border:1px solid rgba(201,168,76,.12);
    border-radius:16px;overflow:hidden;
    transition:transform .3s,box-shadow .3s,border-color .3s;
    display:flex;flex-direction:column;
}
.vp-card:hover {
    transform:translateY(-6px);
    box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 0 1px rgba(201,168,76,.2);
    border-color:rgba(201,168,76,.25);
}
.vp-card-short { max-width:260px;margin:0 auto; }
.vp-thumb-short { aspect-ratio:9/16 !important; }
.vp-thumb-wrap {
    position:relative;aspect-ratio:16/9;overflow:hidden;
    cursor:pointer;background:#000;flex-shrink:0;
}
.vp-thumb-img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s; }
.vp-card:hover .vp-thumb-img { transform:scale(1.06); }
.vp-thumb-overlay {
    position:absolute;inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 60%);
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity .3s;
}
.vp-card:hover .vp-thumb-overlay { opacity:1; }
.vp-play-btn {
    width:60px;height:60px;border-radius:50%;
    background:rgba(201,168,76,.9);
    display:flex;align-items:center;justify-content:center;
    font-size:22px;color:#000;
    box-shadow:0 0 30px rgba(201,168,76,.5);
    transition:transform .2s;
}
.vp-play-btn:hover { transform:scale(1.12); }
.vp-card-badge {
    position:absolute;top:10px;left:10px;
    padding:3px 10px;border-radius:5px;font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:.5px;
}
.vp-badge-video    { background:rgba(201,168,76,.85);color:#000; }
.vp-badge-short    { background:rgba(124,58,237,.85);color:#fff; }
.vp-badge-playlist { background:rgba(5,150,105,.85);color:#fff; }
.vp-card-tag {
    position:absolute;top:10px;right:10px;
    padding:3px 9px;border-radius:5px;font-size:11px;font-weight:600;
    background:rgba(0,0,0,.55);color:#C9A84C;backdrop-filter:blur(4px);
}
.vp-card-info { padding:18px;display:flex;flex-direction:column;flex:1; }
.vp-card-title {
    font-family:'Playfair Display',Georgia,serif;
    font-size:1rem;font-weight:700;color:#f0ede8;
    margin:0 0 8px;line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vp-card-desc {
    font-size:13px;color:rgba(240,237,232,.55);margin:0 0 14px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vp-card-footer { margin-top:auto;padding-top:14px;border-top:1px solid rgba(201,168,76,.12); }
.vp-yt-link {
    font-size:12px;color:#FF0000;text-decoration:none;
    display:inline-flex;align-items:center;transition:opacity .2s;
}
.vp-yt-link:hover { opacity:.75; }

/* ─── Empty ──────────────────────────────────────────────────────────── */
.vp-empty { text-align:center;padding:80px 20px;color:rgba(240,237,232,.55); }
.vp-empty i { font-size:56px;color:#FF0000;opacity:.35;display:block;margin-bottom:20px; }
.vp-empty h3 { font-size:1.5rem;color:#f0ede8;margin-bottom:10px; }
.vp-yt-btn {
    display:inline-flex;align-items:center;margin-top:20px;
    padding:12px 28px;border-radius:50px;
    background:#FF0000;color:#fff;text-decoration:none;font-weight:600;
    transition:opacity .2s;
}
.vp-yt-btn:hover { opacity:.85; }

/* ─── Modal ──────────────────────────────────────────────────────────── */
.vp-modal {
    position:fixed;inset:0;background:rgba(0,0,0,.92);
    z-index:9999;display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(8px);
}
.vp-modal.open { opacity:1;pointer-events:auto; }
.vp-modal-inner {
    position:relative;width:90%;max-width:900px;
    background:#111;border-radius:18px;border:1px solid rgba(201,168,76,.12);overflow:hidden;
    transform:scale(.92);transition:transform .3s;
}
.vp-modal.open .vp-modal-inner { transform:scale(1); }
.vp-modal-close {
    position:absolute;top:14px;right:14px;z-index:2;
    background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);
    color:#fff;width:38px;height:38px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px;
    transition:.2s;
}
.vp-modal-close:hover { background:rgba(255,255,255,.15); }
.vp-modal-title {
    padding:16px 56px 16px 20px;
    font-family:'Playfair Display',Georgia,serif;
    font-size:1.05rem;color:#f0ede8;font-weight:700;
    border-bottom:1px solid rgba(201,168,76,.12);
}
.vp-modal-iframe-wrap { position:relative;aspect-ratio:16/9; }
.vp-modal-iframe-wrap iframe { width:100%;height:100%;border:none;display:block; }

@media (max-width:640px) {
    .vp-hero { padding:60px 0 40px; }
    .vp-grid { grid-template-columns:1fr; }
    .vp-card-short { max-width:100%; }
}


															/********************************************************

																					WALLET CSS

															********************************************************/
/* Premium Dashboard Styles */
.dashboard-bg {
    background-color: #0a0a0a;
    min-height: calc(100vh - 80px); /* Adjust based on navbar height */
    padding-top: 3rem;
    padding-bottom: 3rem;
    color: #f8f9fa;
}

.premium-card {
    background: #141414;
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    overflow: hidden;
}

/* Sidebar Styling */
.sidebar-link {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    color: #888;
    text-decoration: none;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    font-family: var(--font-lato), sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.sidebar-link i {
    margin-right: 15px;
    font-size: 1.2rem;
}
.sidebar-link:hover, .sidebar-link.active {
    background: rgba(212, 175, 55, 0.1);
    color: #d4af37;
}

/* Wallet Specific Styles */
.wallet-header {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(20,20,20,1) 100%);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    padding: 2.5rem 2rem;
    text-align: center;
}
.wallet-balance {
    font-size: 3.5rem;
    font-weight: 700;
    color: #d4af37;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}
.btn-gold {
    background: linear-gradient(90deg, #d4af37 0%, #aa8c2c 100%);
    color: #000;
    border: none;
    transition: all 0.3s ease;
}
.btn-gold:hover {
    background: linear-gradient(90deg, #aa8c2c 0%, #d4af37 100%);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
    transform: translateY(-2px);
    color: #000;
}
.bg-gold-translucent {
    background: rgba(212, 175, 55, 0.1);
}

.tx-row {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 1.25rem 0;
    transition: background 0.2s;
}
.tx-row:hover {
    background: rgba(255,255,255,0.02);
}
.tx-row:last-child {
    border-bottom: none;
}
.text-credit {
    color: #28a745;
}
.text-debit {
    color: #dc3545;
}


															/********************************************************

																					WALLET CSS

															********************************************************/