/* ================================================
   STYLE LUXURY E-COMMERCE THEME
   Sophisticated cream and gold color palette
   Based on brand identity analysis
================================================ */

/* ============================================
   CSS CUSTOM PROPERTIES (Variables)
============================================ */
:root {
  /* Brand Core Colors */
  --style-ink: #191D24;
  --style-gold: #DE9A0A;
  --style-gold-light: #FBCE3E;
  --style-gold-mid: #F2B61F;
  --style-gold-deep: #BB790B;
  --style-bronze: #7A4608;
  --style-gold-line: #CE8F11;
  
  /* Cream/Champagne Backgrounds */
  --style-cream: #EDDCC6;
  --style-cream-light: #F6E3CB;
  --style-cream-deep: #DFC9B0;
  
  /* Supporting Neutrals */
  --style-ivory: #E9D9C9;
  --style-sand: #E3C8A6;
  --style-camel: #D1A37C;
  --style-taupe: #CDA375;
  --style-warm-wood: #D99F63;
  --style-espresso: #362417;
  
  /* Text Colors */
  --style-text: #3A3735;
  --style-text-light: #6B6865;
  --style-gold-accessible: #8A5E00; /* Darker gold for accessibility */
  
  /* Gradients */
  --style-gold-gradient: linear-gradient(135deg, #FBCE3E 0%, #F2B61F 25%, #DE9A0A 55%, #BB790B 80%, #7A4608 100%);
  --style-gold-gradient-subtle: linear-gradient(135deg, #F2B61F 0%, #DE9A0A 50%, #BB790B 100%);
  
  /* Override Bootstrap Primary & Secondary */
  --primary: var(--style-gold);
  --secondary: var(--style-cream);
  --dark: var(--style-ink);
  --light: var(--style-cream-light);

  /* Soft Corners Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
}

/* ============================================
   SOFT CORNERS — Subtle border-radius globally
   Eliminates sharp edges across all UI elements
============================================ */

/* Containers, cards, sidebar blocks */
.product-item,
.cat-item,
.bg-light.p-4,
.bg-light.p-30,
.bg-light.p-4.mb-30,
.bg-light.p-4.mb-5,
.bg-light.p-30.mb-5,
.product-offer,
.vendor-carousel .bg-light,
.testimonial-item,
.d-flex.align-items-center.bg-light[style*="padding: 30px"] {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Product image area (top corners follow card) */
.product-item .product-img {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Category/collection filter blocks in sidebar */
.bg-light.p-4.mb-30,
.bg-light.p-4.mb-5 {
  border-radius: var(--radius-md);
}

/* Buttons */
.btn {
  border-radius: var(--radius-sm);
}

.btn-square {
  border-radius: var(--radius-sm);
}

.btn-block {
  border-radius: var(--radius-sm);
}

/* Form controls & inputs */
.form-control,
.custom-select,
.custom-control-label::before,
.input-group,
textarea.form-control {
  border-radius: var(--radius-sm);
}

.input-group > .form-control:first-child,
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.input-group > .form-control:last-child,
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Dropdown menus */
.dropdown-menu {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Breadcrumb */
.breadcrumb {
  border-radius: var(--radius-md);
}

/* Pagination */
.pagination .page-link {
  border-radius: 0;
}

.pagination .page-item:first-child .page-link {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.pagination .page-item:last-child .page-link {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Badges */
.badge {
  border-radius: var(--radius-sm);
}

/* Tables */
.table thead th:first-child {
  border-radius: var(--radius-sm) 0 0 0;
}

.table thead th:last-child {
  border-radius: 0 var(--radius-sm) 0 0;
}

/* Alert boxes */
.alert {
  border-radius: var(--radius-md);
}

/* Modal & card variants */
.modal-content,
.card {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Nav tabs */
.nav-tabs .nav-link {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* Carousel (hero) */
.carousel,
.carousel-inner {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Offer boxes */
.product-offer {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Toast / notification popups */
.toast {
  border-radius: var(--radius-md);
}

/* Quantity stepper group */
.input-group.quantity {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.input-group.quantity .btn {
  border-radius: 0;
}

/* Footer newsletter input */
footer .input-group {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Image thumbnails */
.thumbnail-nav,
img.border.p-1 {
  border-radius: var(--radius-sm);
}

/* List group items (material/care tabs) */
.list-group-item {
  border-radius: 0;
}

.list-group-item:first-child {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.list-group-item:last-child {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* ============================================
   GLOBAL STYLES
============================================ */

body {
  background-color: var(--style-cream-light);
  color: var(--style-text);
}

/* Links */
a {
  color: var(--style-gold-accessible);
}

a:hover {
  color: var(--style-gold-deep);
}

/* ============================================
   TOPBAR
============================================ */

.bg-secondary {
  background-color: var(--style-cream) !important;
}

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

.btn-sm.btn-light {
  background-color: var(--style-ivory);
  border-color: var(--style-cream-deep);
  color: var(--style-text);
}

.btn-sm.btn-light:hover {
  background-color: var(--style-cream-deep);
  color: var(--style-ink);
}

/* ============================================
   HEADER & LOGO
============================================ */

.bg-light {
  background-color: var(--style-cream-light) !important;
}

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

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

/* Logo styling */
.brand-logo {
  max-height: 54px;
  width: auto;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.brand-logo-link {
  display: inline-flex;
  align-items: center;
}

.brand-logo-link:hover .brand-logo {
  transform: scale(1.03);
}

.brand-logo-card {
  background: #ffffff;
  padding: 6px 14px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.text-uppercase.text-primary.bg-dark {
  background: var(--style-ink) !important;
  color: var(--style-gold) !important;
}

.text-uppercase.text-dark.bg-primary {
  background: var(--style-gold) !important;
  color: var(--style-ink) !important;
}

/* ============================================
   NAVIGATION
============================================ */

.bg-dark.mb-30 {
  background-color: var(--style-ink) !important;
}

.navbar-dark .navbar-nav .nav-link {
  color: var(--style-cream-light);
}

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

.btn.bg-primary {
  background: var(--style-gold) !important;
  color: var(--style-ink) !important;
  border: none;
}

.btn.bg-primary:hover {
  background: var(--style-gold-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(222, 154, 10, 0.4);
}

/* Category Dropdown */
.navbar-vertical.bg-light {
  background-color: var(--style-ivory) !important;
}

.navbar-vertical .nav-link {
  color: var(--style-text);
}

.navbar-vertical .nav-link:hover {
  color: var(--style-gold);
  background-color: var(--style-cream-light);
}

/* ============================================
   BUTTONS
============================================ */

.btn-primary {
  background: var(--style-gold) !important;
  border: none;
  color: var(--style-ink);
  font-weight: 500;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--style-gold-deep) !important;
  color: var(--style-ink);
  box-shadow: 0 4px 15px rgba(222, 154, 10, 0.4);
  transform: translateY(-2px);
}

.btn-outline-dark {
  border-color: var(--style-ink);
  color: var(--style-ink);
}

.btn-outline-dark:hover {
  background-color: var(--style-ink);
  color: var(--style-cream-light);
}

.btn-outline-light {
  border-color: var(--style-cream-light);
  color: var(--style-cream-light);
}

.btn-outline-light:hover {
  background-color: var(--style-cream-light);
  color: var(--style-ink);
}

/* ============================================
   PRODUCT CARDS
============================================ */

.product-item.bg-light {
  background-color: #FFFFFF !important; /* Keep cards white for product photo clarity */
  border: 1px solid var(--style-cream-deep);
}

.product-item:hover {
  box-shadow: 0 10px 40px rgba(25, 29, 36, 0.12);
  border-color: var(--style-gold-line);
}

.product-item .product-action {
  background: rgba(237, 220, 198, 0.95);
}

.product-item h5 {
  color: var(--style-gold);
}

.product-item h6 {
  color: var(--style-text);
}

.product-item .fa-star {
  color: var(--style-gold) !important;
}

.product-item .fa-star-half-alt {
  color: var(--style-gold) !important;
}

/* ============================================
   CATEGORY CARDS
============================================ */

.cat-item {
  background-color: var(--style-ivory);
  border: 1px solid var(--style-cream-deep);
}

.cat-item:hover {
  background-color: var(--style-cream-light);
  border-color: var(--style-gold-line);
  box-shadow: 0 8px 25px rgba(222, 154, 10, 0.15);
}

.cat-item h6 {
  color: var(--style-ink);
}

.cat-item small {
  color: var(--style-text-light);
}

/* ============================================
   FEATURE CARDS (Quality, Shipping, etc.)
============================================ */

.d-flex.align-items-center.bg-light {
  background-color: var(--style-ivory) !important;
  border: 1px solid var(--style-cream-deep);
}

.d-flex.align-items-center.bg-light:hover {
  background-color: var(--style-cream-light) !important;
  border-color: var(--style-gold-line);
}

.d-flex.align-items-center.bg-light h1 {
  color: var(--style-gold);
}

.d-flex.align-items-center.bg-light h5 {
  color: var(--style-ink);
}

/* ============================================
   SECTION TITLES
============================================ */

.section-title span {
  background-color: var(--style-cream) !important;
  color: var(--style-ink);
  font-weight: 500;
}

/* ============================================
   FORMS & INPUTS
============================================ */

.form-control {
  background-color: #FFFFFF;
  border-color: var(--style-cream-deep);
  color: var(--style-text);
}

.form-control:focus {
  border-color: var(--style-gold);
  box-shadow: 0 0 0 0.2rem rgba(222, 154, 10, 0.15);
}

.form-control::placeholder {
  color: var(--style-text-light);
}

.custom-select {
  background-color: #FFFFFF;
  border-color: var(--style-cream-deep);
  color: var(--style-text);
}

.custom-select:focus {
  border-color: var(--style-gold);
  box-shadow: 0 0 0 0.2rem rgba(222, 154, 10, 0.15);
}

/* ============================================
   BADGES
============================================ */

.badge {
  background-color: var(--style-gold);
  color: var(--style-ink);
}

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

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

/* ============================================
   CAROUSEL
============================================ */

.carousel-caption h1 {
  color: var(--style-cream-light);
  text-shadow: 2px 2px 4px var(--style-ink);
}

.carousel-caption p {
  color: var(--style-cream-light);
  text-shadow: 1px 1px 3px var(--style-ink);
}

.carousel-indicators li {
  background-color: var(--style-cream-deep);
}

.carousel-indicators .active {
  background-color: var(--style-gold);
}

/* ============================================
   PROMOTIONAL OFFERS
============================================ */

.product-offer .offer-text h6,
.product-offer .offer-text h3 {
  color: var(--style-cream-light);
  text-shadow: 2px 2px 4px var(--style-ink);
}

/* ============================================
   TABLES
============================================ */

.table {
  color: var(--style-text);
}

.table thead {
  background-color: var(--style-ink);
  color: var(--style-cream-light);
}

.table-light {
  background-color: var(--style-ivory) !important;
}

.table-hover tbody tr:hover {
  background-color: var(--style-cream-light);
}

/* ============================================
   BREADCRUMB
============================================ */

.breadcrumb {
  background-color: var(--style-cream);
}

.breadcrumb-item.active {
  color: var(--style-gold-accessible);
}

.breadcrumb-item a {
  color: var(--style-text);
}

.breadcrumb-item a:hover {
  color: var(--style-gold);
}

/* ============================================
   SIDEBAR FILTERS
============================================ */

.bg-light.p-4.mb-30,
.bg-light.p-4.mb-5,
.bg-light.p-30.mb-5,
.bg-light.p-30 {
  background-color: var(--style-ivory) !important;
  border: 1px solid var(--style-cream-deep);
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--style-gold);
  border-color: var(--style-gold);
}

.custom-checkbox .custom-control-label::before {
  border-color: var(--style-cream-deep);
}

/* ============================================
   DROPDOWN MENUS
============================================ */

.dropdown-menu {
  background-color: var(--style-ivory);
  border-color: var(--style-cream-deep);
}

.dropdown-item {
  color: var(--style-text);
}

.dropdown-item:hover {
  background-color: var(--style-cream-light);
  color: var(--style-gold);
}

/* ============================================
   PAGINATION
============================================ */

.pagination .page-link {
  background-color: var(--style-ivory);
  border-color: var(--style-cream-deep);
  color: var(--style-text);
}

.pagination .page-link:hover {
  background-color: var(--style-gold);
  border-color: var(--style-gold);
  color: var(--style-ink);
}

.pagination .page-item.active .page-link {
  background-color: var(--style-gold);
  border-color: var(--style-gold);
  color: var(--style-ink);
}

.pagination .page-item.disabled .page-link {
  background-color: var(--style-cream);
  border-color: var(--style-cream-deep);
  color: var(--style-text-light);
}

/* ============================================
   FOOTER
============================================ */

.bg-dark.text-secondary {
  background-color: var(--style-ink) !important;
  color: var(--style-cream-light) !important;
}

.text-secondary.text-uppercase {
  color: var(--style-cream-light) !important;
}

.footer-link,
.text-secondary.mb-2 {
  color: var(--style-cream-deep) !important;
}

.footer-link:hover,
.text-secondary.mb-2:hover {
  color: var(--style-gold-light) !important;
}

/* Footer Social Icons */
.btn-square {
  background-color: var(--style-gold);
  border-color: var(--style-gold);
}

.btn-square:hover {
  background: var(--style-gold-deep);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(222, 154, 10, 0.4);
}

/* ============================================
   BACK TO TOP BUTTON
============================================ */

.back-to-top {
  background: var(--style-gold);
  color: var(--style-ink);
}

.back-to-top:hover {
  background: var(--style-gold-deep);
  box-shadow: 0 6px 20px rgba(222, 154, 10, 0.6);
}

/* ============================================
   VENDOR CAROUSEL
============================================ */

.vendor-carousel .bg-light {
  background-color: var(--style-ivory) !important;
  border: 1px solid var(--style-cream-deep);
}

/* ============================================
   TESTIMONIALS
============================================ */

.testimonial-item {
  background-color: var(--style-ivory);
  border-color: var(--style-cream-deep);
  color: var(--style-text);
}

.testimonial-carousel .owl-item.center .testimonial-item {
  background: var(--style-gold) !important;
  border-color: var(--style-gold) !important;
}

.testimonial-carousel .owl-item.center .testimonial-item * {
  color: var(--style-ink) !important;
}

.testimonial-carousel .owl-dot {
  background: var(--style-cream-deep);
}

.testimonial-carousel .owl-dot.active {
  background: var(--style-gold);
}

/* ============================================
   CART & CHECKOUT
============================================ */

.table.table-borderless tbody tr:not(:last-child) {
  border-bottom-color: var(--style-cream);
}

.quantity .btn-primary {
  background-color: var(--style-gold);
}

.quantity .btn-primary:hover {
  background: var(--style-gold-deep);
}

.input-group .btn-primary {
  background: var(--style-gold);
}

/* ============================================
   CONTACT PAGE
============================================ */

iframe {
  border: 1px solid var(--style-cream-deep);
}

/* ============================================
   HEADINGS
============================================ */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--style-ink);
}

/* ============================================
   PRICE STYLING
============================================ */

.product-item h5 {
  color: var(--style-gold);
  font-weight: 600;
}

.text-muted {
  color: var(--style-text-light) !important;
}

/* ============================================
   ICON COLORS
============================================ */

.fa-check,
.fa-shipping-fast,
.fa-exchange-alt,
.fa-phone-volume {
  color: var(--style-gold);
}

.fas.fa-heart,
.fas.fa-shopping-cart {
  color: var(--style-gold) !important;
}

/* ============================================
   SEARCH BAR
============================================ */

.input-group-text {
  background-color: transparent;
  color: var(--style-gold);
  border-color: var(--style-cream-deep);
}

/* ============================================
   HOVER EFFECTS & TRANSITIONS
============================================ */

.cat-item,
.product-item,
.btn,
.form-control,
.custom-select,
.pagination .page-link {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   ACCESSIBILITY OVERRIDES
============================================ */

/* Ensure small gold text is readable */
small.text-primary,
.text-primary small {
  color: var(--style-gold-accessible) !important;
}

/* Links in text */
a.text-primary {
  color: var(--style-gold-accessible) !important;
}

a.text-primary:hover {
  color: var(--style-gold-deep) !important;
}

/* ============================================
   MEDIA QUERIES
============================================ */

/* Adjust for smaller screens */
@media (max-width: 767px) {
  .text-uppercase.text-primary.bg-dark,
  .text-uppercase.text-dark.bg-primary {
    font-size: 1.5rem;
  }
  
  .section-title span {
    font-size: 1rem;
    padding: 6px 12px;
  }
}

/* Ensure contrast on hover states for touch devices */
@media (hover: none) and (pointer: coarse) {
  .btn-primary:active {
    background: var(--style-gold-deep);
  }
  
  .product-item:active {
    box-shadow: 0 10px 40px rgba(25, 29, 36, 0.12);
  }
}


/* ============================================
   REMOVE PRODUCT IMAGE OVERLAY
   Images are now always visible without hover overlay
============================================ */

/* Hide the overlay completely */
.product-item .product-action {
  display: none !important;
}

/* Ensure product images are always fully visible */
.product-item .product-img {
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
}

.product-item .product-img img {
  opacity: 1 !important;
  transform: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Keep the nice hover effect on the card itself */
.product-item:hover {
  box-shadow: 0 10px 40px rgba(25, 29, 36, 0.12);
  border-color: var(--style-gold-line);
  transform: translateY(-5px);
}

/* Remove zoom effect on product images */
.product-item:hover .product-img img {
  transform: none !important;
}

/* ============================================
   SIGNATURE COLLECTIONS SHOWCASE (WHITESMOKE)
============================================ */
.signature-collection-card {
  background: whitesmoke !important;
  background-color: whitesmoke !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.signature-collection-card:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(222, 154, 10, 0.2) !important;
  border-color: var(--style-gold) !important;
}

.signature-collection-card .cat-img-box {
  width: 110px;
  height: 110px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background: #ffffff;
}

.signature-collection-card .cat-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.signature-collection-card:hover .cat-img-box img {
  transform: scale(1.08);
}