/**
 * Sony Store 黃金週 — colors aligned with campaign banner
 * Red #C50E06 | Gold #F2D27F | Oval gold #DCC175 | Sun #F5B465
 */
:root {
  --s618-red: #c50e06;
  --s618-red-dark: #9a0a08;
  --s618-gold: #f2d27f;
  --s618-gold-light: #f8e8a0;
  --s618-gold-dark: #dcc175;
  --s618-sun: #f5b465;
  --s618-sky: #dcc175; /* alias: former sky → oval gold */
  --s618-sky-dark: #c9a84c;
  --s618-orange: #c50e06; /* alias: former orange → banner red */
  --s618-orange-dark: #9a0a08;
  --s618-navy: #2a0c0c;
  --s618-teal: #00bfa5;
  --s618-pink: #ff4081;
  --s618-black: #0a0a0a;
  --s618-white: #ffffff;
}

/* Navbar — banner red with gold type */
#main-content .navbar.bg-red {
  background-color: var(--s618-red) !important;
  border-bottom: 3px solid var(--s618-gold);
  box-shadow: 0 2px 10px rgba(197, 14, 6, 0.28);
}

#main-content .navbar-dark .navbar-nav .nav-link {
  color: var(--s618-gold-light);
}

#main-content .navbar-dark .navbar-toggler,
#main-content .navbar-dark #currentCate {
  color: var(--s618-gold-light);
}

#main-content .navbar-toggler-icon i {
  color: var(--s618-gold) !important;
}

#main-content .navbar-collapse {
  background-color: var(--s618-red);
}

/* Other tabs — active / hover use gold oval */
#main-content .navbar-dark .navbar-nav .show > .nav-link,
#main-content .navbar-dark .navbar-nav .active > .nav-link,
#main-content .navbar-dark .navbar-nav .nav-link.show,
#main-content .navbar-dark .navbar-nav .nav-link.active,
#main-content .navbar-dark .navbar-nav .nav-link:hover {
  background-color: var(--s618-gold);
  color: var(--s618-navy) !important;
}

#main-content.vday .navbar-dark .navbar-nav .active > .nav-link,
#main-content.vday .navbar-dark .navbar-nav .nav-link.active,
#main-content.vday .navbar-dark .navbar-nav .nav-link:hover {
  background-color: var(--s618-gold);
  color: var(--s618-navy) !important;
}

/* Product item boxes */
#main-content .product-item {
  border-color: var(--s618-gold-dark);
}

/* Accent blocks (e-coupon, etc.) */
#main-content .bg-red {
  background-color: var(--s618-red) !important;
}

#main-content .tnc {
  border-color: var(--s618-gold-dark);
}

#main-content.vday .tnc {
  border-color: var(--s618-gold);
}

#main-content.vday .bg-red {
  background-color: var(--s618-red) !important;
}

/* CTA buttons */
#main-content .btn-buy,
#main-content .btn-style {
  background-color: var(--s618-red) !important;
  border-color: var(--s618-red) !important;
  color: var(--s618-white) !important;
}

#main-content .btn-buy:hover,
#main-content .btn-style:hover {
  background-color: var(--s618-red-dark) !important;
  border-color: var(--s618-red-dark) !important;
  color: var(--s618-white) !important;
}

/* Price / offer highlights */
#main-content .text-danger {
  color: var(--s618-red) !important;
}

#main-content .bg-star {
  color: var(--s618-gold);
  background-color: var(--s618-red);
  border-color: var(--s618-gold);
}

#main-content .subcate-title,
#main-content .subcate-title span {
  background-color: var(--s618-red);
}

/* Countdown — active sale */
#timer.start li,
#timer.start h5.startOffer,
#timer.start li.colon {
  color: var(--s618-red);
}

#timer.start li span {
  background: linear-gradient(180deg, #d41a10 0%, var(--s618-red) 48%, var(--s618-red-dark) 100%);
  color: var(--s618-white) !important;
}

/* Countdown — before sale */
#timer.before li,
#timer.before h5.beforeOffer,
#timer.before li.colon {
  color: var(--s618-navy);
}

#timer.before li span {
  background: linear-gradient(180deg, var(--s618-gold-light) 0%, var(--s618-gold) 48%, var(--s618-gold-dark) 100%);
  color: var(--s618-navy) !important;
}

#main-content .flash-content .campaign-period-title {
  color: var(--s618-navy) !important;
}

h5.startOffer,
h5.beforeOffer {
  color: var(--s618-navy) !important;
}

/* Swiper active bullet — gold */
#main-content .swiper-pagination-bullet-active {
  -webkit-box-shadow: 0 0 2px 2px var(--s618-gold);
  box-shadow: 0 0 2px 2px var(--s618-gold);
}

#main-content .dropdown-item.active,
#main-content .dropdown-item:hover {
  color: var(--s618-red) !important;
}
