/* ==========================================================================
   bsb-theme.css — BSB (Baker Street Buds) Victorian Luxury Theme
   All rules scoped under [data-theme="bsb"] — zero effect on other themes.
   Colour tokens live in base.css; this file handles decorative/structural
   overrides only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Body — Leather texture background
   -------------------------------------------------------------------------- */

[data-theme="bsb"] body {
  background-color: #1c3a18;
}

[data-theme="bsb"] .page::after {
  content: '';
  position: fixed;
  inset: -8px;
  background-color: #595c48;
  background-image: url('/assets/img/decor/bg-texture.png?v=7');
  background-repeat: repeat;
  background-size: 256px 256px;
  background-blend-mode: soft-light;
  filter: blur(0.8px);
  pointer-events: none;
  z-index: -1;
}

/* --------------------------------------------------------------------------
   Vignette — Darkened edges for depth and atmosphere
   -------------------------------------------------------------------------- */

[data-theme="bsb"] .page::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 10%,
    rgba(0, 0, 0, 0.85) 100%
  );
  pointer-events: none;
  z-index: 0;
}

[data-theme="bsb"] .page > *:not(.header) {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Typography — Serif headings (Playfair Display)
   -------------------------------------------------------------------------- */

[data-theme="bsb"] h1,
[data-theme="bsb"] h2,
[data-theme="bsb"] h3,
[data-theme="bsb"] h4,
[data-theme="bsb"] h5,
[data-theme="bsb"] h6 {
  font-family: var(--font-heading);
}

/* --------------------------------------------------------------------------
   Square Corners — Override all border-radius for a sharper Victorian feel
   -------------------------------------------------------------------------- */

[data-theme="bsb"] {
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-full: 0;
}

/* --------------------------------------------------------------------------
   Quantity Stepper — Visible on dark background
   -------------------------------------------------------------------------- */

[data-theme="bsb"] .qty-stepper {
  border-color: var(--colour-border-accent);
}

[data-theme="bsb"] .qty-stepper__value {
  color: var(--colour-text);
  background-color: var(--colour-surface);
  border-left: 1px solid var(--colour-border-accent);
  border-right: 1px solid var(--colour-border-accent);
}

[data-theme="bsb"] .qty-stepper__btn {
  color: var(--colour-text);
  background-color: var(--colour-surface);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

[data-theme="bsb"] .header {
  border-bottom: 1px solid var(--colour-border-accent);
}

[data-theme="bsb"] .header__logo {
  font-family: var(--font-heading);
  letter-spacing: var(--tracking-wide);
}

[data-theme="bsb"] .header__nav-link {
  position: relative;
}

[data-theme="bsb"] .header__nav-link:hover::after,
[data-theme="bsb"] .header__nav-link--active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--colour-accent);
  border-radius: 1px;
}

/* Dropdown menu — fully opaque so it covers page content behind it */
[data-theme="bsb"] .header__dropdown:hover .header__dropdown-menu {
  opacity: 1 !important;
  background-color: #2a5222;
  border: 1px solid #3a6830;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

[data-theme="bsb"] .footer {
  border-top: 1px solid var(--colour-border-accent);
}

[data-theme="bsb"] .footer__heading {
  font-family: var(--font-heading);
  letter-spacing: var(--tracking-widest);
}

[data-theme="bsb"] .footer__bottom {
  border-top: 1px solid var(--colour-border-accent);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

[data-theme="bsb"] .btn--primary {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

[data-theme="bsb"] .btn--secondary {
  border-color: var(--colour-accent);
  color: var(--colour-accent);
}

[data-theme="bsb"] .btn--secondary:hover {
  background-color: var(--colour-accent-subtle);
  border-color: var(--colour-accent-hover);
  color: var(--colour-accent);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

[data-theme="bsb"] .card:hover {
  border-color: var(--colour-accent);
}

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */

[data-theme="bsb"] .modal__header {
  border-bottom-color: var(--colour-border-accent);
}

[data-theme="bsb"] .modal__footer {
  border-top-color: var(--colour-border-accent);
}

/* --------------------------------------------------------------------------
   Select dropdown chevron for dark background
   -------------------------------------------------------------------------- */

[data-theme="bsb"] select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a8a090' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Product Cards
   -------------------------------------------------------------------------- */

[data-theme="bsb"] .product-card {
  border-top: 2px solid var(--colour-accent);
}

[data-theme="bsb"] .product-card__name {
  font-family: var(--font-heading);
}

[data-theme="bsb"] .product-card__price {
  color: var(--colour-accent);
}

/* --------------------------------------------------------------------------
   Shop Homepage
   -------------------------------------------------------------------------- */

[data-theme="bsb"] .shop-home__title {
  font-family: var(--font-heading);
  letter-spacing: var(--tracking-wide);
}

[data-theme="bsb"] .shop-home__subtitle {
  font-family: var(--font-heading);
  font-style: italic;
}

[data-theme="bsb"] .shop-home__section-title {
  font-family: var(--font-heading);
}

/* --------------------------------------------------------------------------
   Product Detail
   -------------------------------------------------------------------------- */

[data-theme="bsb"] .product-info__name {
  font-family: var(--font-heading);
}

[data-theme="bsb"] .product-info__price {
  font-family: var(--font-heading);
  color: var(--colour-accent);
}

/* --------------------------------------------------------------------------
   Basket
   -------------------------------------------------------------------------- */

[data-theme="bsb"] .basket__title {
  font-family: var(--font-heading);
}

/* --------------------------------------------------------------------------
   Checkout
   -------------------------------------------------------------------------- */

[data-theme="bsb"] .checkout__section-title {
  font-family: var(--font-heading);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--colour-border-accent);
}

/* --------------------------------------------------------------------------
   Account Cards
   -------------------------------------------------------------------------- */

[data-theme="bsb"] .account-card__title {
  font-family: var(--font-heading);
}

[data-theme="bsb"] .account-card__header:hover {
  background: var(--colour-surface-hover);
}

/* --------------------------------------------------------------------------
   Order History
   -------------------------------------------------------------------------- */

[data-theme="bsb"] .order-card__header {
  border-bottom-color: var(--colour-border-accent);
}

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */

[data-theme="bsb"] .reviews__title {
  font-family: var(--font-heading);
}

/* --------------------------------------------------------------------------
   Login Page
   -------------------------------------------------------------------------- */

[data-theme="bsb"] .login-page {
  background: transparent;
}

[data-theme="bsb"] .login-card {
  border: 1px solid var(--colour-border-accent);
  border-top: 3px solid var(--colour-accent);
}

[data-theme="bsb"] .login-card__logo-text {
  font-family: var(--font-heading);
  color: var(--colour-accent);
  letter-spacing: var(--tracking-wide);
}

[data-theme="bsb"] .login-card__title {
  font-family: var(--font-heading);
}

/* --------------------------------------------------------------------------
   Request Access Page
   -------------------------------------------------------------------------- */

[data-theme="bsb"] .request-access__section-title {
  font-family: var(--font-heading);
}

[data-theme="bsb"] .request-access__divider {
  border-color: var(--colour-border-accent);
}

/* --------------------------------------------------------------------------
   Confirmation Page
   -------------------------------------------------------------------------- */

[data-theme="bsb"] .confirmation__title {
  font-family: var(--font-heading);
}

/* --------------------------------------------------------------------------
   Decorative Utilities — opt-in classes
   -------------------------------------------------------------------------- */

/* Corner ornaments (opt-in via .card--ornate class) */
.card--ornate {
  position: relative;
  overflow: visible;
}

.card--ornate::before,
.card--ornate::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  background: url('/assets/img/decor/corner-tl.png') no-repeat center / contain;
  opacity: 0.4;
  pointer-events: none;
}

.card--ornate::before {
  top: -4px;
  left: -4px;
}

.card--ornate::after {
  top: -4px;
  right: -4px;
  transform: scaleX(-1);
}

/* CSS-only gold gradient divider */
.divider-ornament--css {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-8) 0;
}

.divider-ornament--css::before,
.divider-ornament--css::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--colour-accent), transparent);
  opacity: 0.3;
}

/* Gold text utility */
.text-gold {
  color: var(--colour-accent);
}

/* Heading with gold underline */
.heading-underline {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--colour-border-accent);
  margin-bottom: var(--space-4);
}