@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Jost:wght@300;400;500&display=swap');

/* =====================================================================
   Light-luxury jewelry theme — custom overrides (stylesheet-custom.css)
   Loaded after stylesheet.css so these rules win the cascade.
   Palette: bg #F8F4EF · gold #C8A540 · ink #1A1A1A · muted #666 · border #E8DFCF
   ===================================================================== */

:root {
  --lux-bg: #F8F4EF;
  --lux-gold: #C8A540;
  --lux-gold-dark: #9E7D2B;
  --lux-ink: #1A1A1A;
  --lux-muted: #666666;
  --lux-border: #E8DFCF;
  --lux-surface: #FFFFFF;
}

/* ---------- Base / typography ---------- */
body {
  background-color: var(--lux-bg);
  color: var(--lux-ink);
  font-family: 'Jost', 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--lux-ink);
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-weight: 500;
  letter-spacing: 0.02em;
}

a { color: var(--lux-gold-dark); }
a:hover { color: var(--lux-ink); }

legend {
  color: var(--lux-ink);
  font-family: 'Playfair Display', Georgia, serif;
  border-bottom: 1px solid var(--lux-border);
}

/* ---------- Form controls (subtle refinement) ---------- */
.form-control, .form-select {
  border-color: var(--lux-border);
  border-radius: 2px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--lux-gold);
  box-shadow: 0 0 0 0.15rem rgba(200, 165, 64, 0.15);
}

/* ---------- Top utility bar (decoration: gold accent line) ---------- */
#top {
  background-color: var(--lux-bg);
  border-top: 2px solid var(--lux-gold);
  border-bottom: 1px solid var(--lux-border);
  color: var(--lux-muted);
  padding: 10px 0;
  margin: 0 0 24px 0;
  min-height: 44px;
}
#top .nav > .list-inline > .list-inline-item,
#top .nav > .list-inline .list-inline-item > a,
#top .nav > .list-inline .list-inline-item .dropdown > a,
#top .btn-link,
#top a {
  color: var(--lux-muted);
  text-shadow: none;
}
#top a:hover, #top .btn-link:hover { color: var(--lux-gold-dark); }

/* ---------- Header (generous whitespace, vertical centering) ---------- */
header { padding: 28px 0 12px; }
header .row { align-items: center; }
#logo { margin: 0 0 12px 0; }
#logo img { max-width: none; width: auto; height: 60px; }

/* ---------- Search ---------- */
#search .form-control-lg {
  height: 44px;
  font-size: 13px;
  border: 1px solid var(--lux-border);
  border-radius: 0;
  background-color: var(--lux-surface);
}
#search .form-control-lg:focus {
  border-color: var(--lux-gold);
  box-shadow: 0 0 0 0.15rem rgba(200, 165, 64, 0.12);
}
#search .btn-lg {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: none;
  border-radius: 0;
  color: var(--lux-ink);
  background-color: var(--lux-gold);
  border-color: var(--lux-gold);
}
#search .btn-lg:hover {
  color: #fff;
  background-color: var(--lux-gold-dark);
  border-color: var(--lux-gold-dark);
}

/* ---------- Header cart ---------- */
#header-cart .btn-lg {
  color: #fff;
  background-color: var(--lux-ink);
  background-image: none;
  border-color: var(--lux-ink);
  text-shadow: none;
  height: 44px;
  border-radius: 0;
  letter-spacing: 0.04em;
}
#header-cart .btn:hover { color: #fff; }
#header-cart .dropdown-menu {
  background: var(--lux-surface);
  border: 1px solid var(--lux-border);
  border-radius: 0;
  box-shadow: 0 14px 34px rgba(26, 26, 26, 0.08);
}

/* ---------- Category menu ---------- */
/* bg-primary utility uses !important, so we match it to restyle the bar */
#menu {
  background-color: var(--lux-surface) !important;
  background-image: none !important;
  border: none;
  border-top: 1px solid var(--lux-border);
  border-bottom: 1px solid var(--lux-border);
  border-radius: 0;
  min-height: 50px;
}
#menu.navbar { padding: 0 1rem; margin-bottom: 30px; }
#menu #category {
  color: var(--lux-ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  text-shadow: none;
}
#menu .navbar-nav > li > a {
  color: var(--lux-ink);
  text-shadow: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  font-weight: 400;
  padding: 15px 18px;
  position: relative;
  background-color: transparent;
}
#menu .navbar-nav > li > a::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 10px;
  height: 1px;
  background-color: var(--lux-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s ease;
}
#menu .navbar-nav > li > a:hover {
  background-color: transparent;
  color: var(--lux-gold-dark);
}
#menu .navbar-nav > li > a:hover::after { transform: scaleX(1); }
#menu .dropdown-menu {
  border: 1px solid var(--lux-border);
  border-radius: 0;
  box-shadow: 0 14px 34px rgba(26, 26, 26, 0.08);
  background-color: var(--lux-surface);
}
#menu .dropdown-inner a {
  color: var(--lux-ink);
  font-size: 13px;
}
#menu .dropdown-inner ul li a:hover {
  color: var(--lux-gold-dark);
  background-image: none;
  background-color: var(--lux-bg);
}
#menu .see-all {
  border-top: 1px solid var(--lux-border);
  color: var(--lux-gold-dark);
}
#menu .see-all:hover, #menu .see-all:focus {
  background-image: none;
  background-color: var(--lux-bg);
  color: var(--lux-ink);
}

/* ---------- Mobile menu (toggler + collapsed dropdown) ---------- */
#menu .navbar-toggler,
.navbar-light .navbar-toggler {
  background-color: var(--lux-gold);
  background-image: none;
  border-color: var(--lux-gold);
  color: var(--lux-ink);
}
#menu .navbar-toggler i { color: var(--lux-ink); border-color: var(--lux-ink); }
@media (max-width: 767px) {
  #menu { border-radius: 0; }
  #menu div.dropdown-menu { background-color: var(--lux-surface); }
  #menu .dropdown-inner a { color: var(--lux-ink); width: 100%; }
  #menu .dropdown-menu a:hover { background: var(--lux-bg); }
  #menu .see-all { color: var(--lux-gold-dark); border: none; }
}

/* ---------- Buttons (restrained, no gradient / no text-shadow) ---------- */
.btn-primary {
  background-image: none;
  background-color: var(--lux-gold);
  border-color: var(--lux-gold);
  color: var(--lux-ink);
  text-shadow: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 2px;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
  background-color: var(--lux-gold-dark);
  border-color: var(--lux-gold-dark);
  color: #fff;
}
.btn-light {
  background-image: none;
  background-color: var(--lux-surface);
  border-color: var(--lux-border);
  color: var(--lux-ink);
  text-shadow: none;
  border-radius: 2px;
}
.btn-light:hover, .btn-light:focus {
  background-color: var(--lux-bg);
  border-color: var(--lux-gold);
  color: var(--lux-gold-dark);
}
.btn-warning {
  background-image: none;
  background-color: var(--lux-gold);
  border-color: var(--lux-gold);
  color: var(--lux-ink);
  text-shadow: none;
  border-radius: 2px;
}
.btn-warning:hover {
  background-color: var(--lux-gold-dark);
  border-color: var(--lux-gold-dark);
  color: #fff;
}
.btn-link { color: var(--lux-gold-dark); }

/* ---------- Product cards (refined, subtle shadow, soft hover) ---------- */
.product-thumb {
  border: 1px solid var(--lux-border);
  border-radius: 4px;
  background-color: var(--lux-surface);
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.03);
  transition: box-shadow .3s ease, transform .3s ease;
  overflow: hidden;
}
.product-thumb:hover {
  box-shadow: 0 16px 40px rgba(26, 26, 26, 0.09);
  transform: translateY(-3px);
}
.product-thumb h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  color: var(--lux-ink);
  letter-spacing: 0.02em;
}
.product-thumb .image a:hover { opacity: 1; }
.product-thumb .image img { transition: transform .5s ease; }
.product-thumb:hover .image img { transform: scale(1.2); }
.product-thumb .button-group {
  border-top: 1px solid var(--lux-border);
  background-color: var(--lux-bg);
}
.product-thumb .button-group button {
  background-color: var(--lux-bg);
  color: var(--lux-muted);
  font-weight: 400;
  letter-spacing: 0.06em;
}
.product-thumb .button-group button:hover {
  color: var(--lux-gold-dark);
  background-color: var(--lux-surface);
}
.product-thumb .button-group button + button { border-left: 1px solid var(--lux-border); }
.product-list .product-thumb .button-group { border-left: 1px solid var(--lux-border); }

/* ---------- Product images: full-width, keep aspect ratio ---------- */

/* 商品卡片缩略图：固定 1:1 方形容器 + object-fit:cover 铺满并裁掉白边/多余留白，
   保持原图比例不变形（cover 是等比裁剪、不是拉伸）；分类/列表/搜索/特价/相关页，
   以及 Featured/Latest/Special/Bestseller 等模块均复用 product/thumb.twig，一并生效 */
.product-thumb .image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.product-thumb .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  transform-origin: center;
}

/* Featured 模块：只显示产品图片、名称、价格（隐藏描述、评分星级、购物车/收藏/对比按钮） */
.featured-products .product-thumb .description p {
  display: none;
}
.featured-products .product-thumb .rating {
  display: none;
}
.featured-products .product-thumb .button-group {
  display: none;
}

/* 商品详情页主图铺满列宽，并去掉 img-thumbnail 自带的白框（边框+内边距+白底+圆角） */
#product-info .image > a > img {
  width: 100%;
  height: auto;
  padding: 0;
  border: none;
  background-color: transparent;
  border-radius: 0;
}

/* ---------- Price & rating ---------- */
.price { color: var(--lux-ink); font-family: 'Playfair Display', Georgia, serif; }
.price-new { font-weight: 600; color: var(--lux-gold-dark); }
.price-old { color: #999; }
.price-tax { color: #999; }
.rating .fa-star, .rating .fa-star + .fa-star { color: var(--lux-gold); }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  background-color: transparent;
  border: 1px solid var(--lux-border);
  border-radius: 0;
  margin: 0 0 24px 0;
}
.breadcrumb > li.breadcrumb-item { text-shadow: none; }
.breadcrumb > li.breadcrumb-item > a { color: var(--lux-muted); }
.breadcrumb > li.breadcrumb-item > a:hover { color: var(--lux-gold-dark); }
.breadcrumb > li.breadcrumb-item:after {
  border-right: 1px solid var(--lux-border);
  border-bottom: 1px solid var(--lux-border);
}

/* ---------- Pagination ---------- */
.pagination .page-link {
  color: var(--lux-muted);
  border-color: var(--lux-border);
}
.pagination .page-item.active .page-link {
  background-color: var(--lux-gold);
  border-color: var(--lux-gold);
  color: var(--lux-ink);
}
.pagination .page-link:hover {
  color: var(--lux-gold-dark);
  background-color: var(--lux-bg);
  border-color: var(--lux-border);
}

/* ---------- Nav tabs ---------- */
.nav-tabs { border-bottom: 1px solid var(--lux-border); }
.nav-tabs .nav-link { color: var(--lux-muted); }
.nav-tabs .nav-link.active {
  color: var(--lux-gold-dark);
  background-color: var(--lux-bg);
  border-color: var(--lux-border) var(--lux-border) var(--lux-bg);
}
.nav-tabs .nav-link:hover { color: var(--lux-gold-dark); }

/* ---------- Footer (deep premium: charcoal + champagne gold accents) ---------- */
footer {
  background-color: #1A1A1A;
  border-top: 2px solid var(--lux-gold);
  color: #9A9A9A;
}
footer h5 {
  color: var(--lux-gold);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 14px;
}
footer a { color: #B5B5B5; }
footer a:hover { color: var(--lux-gold); }
footer hr { border-bottom: 1px solid #333333; }

/* ---------- Responsive fine-tuning (keep mobile layout intact) ---------- */
@media (max-width: 767px) {
  header { padding: 16px 0 8px; }
  #search { margin-bottom: 8px; }
}