/*
 * Visual polish layer — loaded last in layouts/site.php (after brand.css),
 * so it refines the existing design system without rewriting it. Only
 * existing tokens (tokens.css) plus a handful of warm gold tints are used.
 * Every motion here is neutralised by base.css's prefers-reduced-motion
 * block. Delete the <link> to this file to fall back to the previous look.
 */

/* ---------- Page-wide ---------- */
html { scroll-behavior: smooth; }
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-image: radial-gradient(ellipse at 50% -20%, rgba(228, 213, 195, 0.35) 0, transparent 60%);
    background-repeat: no-repeat;
}
::selection {
    background-color: rgba(201, 162, 75, 0.35);
    color: var(--color-primary-dark);
}
h1, h2, h3, .h1, .h2, .h3 { letter-spacing: -0.01em; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] .h1, html[lang="ar"] .h2, html[lang="ar"] .h3 { letter-spacing: 0; }

/* Section headings (components/section-header.php + centred homepage
   strips) get a short gold rule underneath. */
.bb-section-heading {
    position: relative;
    padding-bottom: var(--space-3);
}
.bb-section-heading::after {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 48px;
    height: 3px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--color-accent), rgba(201, 162, 75, 0.25));
}
html[dir="rtl"] .bb-section-heading::after { background: linear-gradient(270deg, var(--color-accent), rgba(201, 162, 75, 0.25)); }
.bb-section-heading--center::after { inset-inline-start: calc(50% - 24px); }

/* ---------- Buttons: lift, depth, press ---------- */
a.bb-btn-primary, a.bb-btn-secondary, a.bb-btn-accent, a.bb-btn-gold, a.bb-btn-ghost-light { text-decoration: none; }
.bb-btn-primary,
.bb-btn-secondary,
.bb-btn-accent,
.bb-btn-gold {
    border-radius: var(--radius-md);
    transition: background-color var(--motion-fast) var(--motion-ease),
                border-color var(--motion-fast) var(--motion-ease),
                color var(--motion-fast) var(--motion-ease),
                transform var(--motion-fast) var(--motion-ease),
                box-shadow var(--motion-base) var(--motion-ease);
}
.bb-btn-primary {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.06));
    box-shadow: 0 1px 2px rgba(33, 42, 33, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.bb-btn-primary:hover,
.bb-btn-secondary:hover,
.bb-btn-accent:hover,
.bb-btn-gold:hover {
    transform: translateY(-1px);
}
.bb-btn-primary:hover { box-shadow: 0 10px 22px rgba(33, 42, 33, 0.22); }
.bb-btn-accent,
.bb-btn-gold {
    background-image: linear-gradient(135deg, #D8B666 0%, var(--color-accent) 50%, var(--color-accent-dark) 100%);
    box-shadow: 0 1px 2px rgba(169, 132, 58, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.bb-btn-accent:hover,
.bb-btn-gold:hover { box-shadow: 0 10px 22px rgba(169, 132, 58, 0.32); }
.bb-btn-primary:active,
.bb-btn-secondary:active,
.bb-btn-accent:active,
.bb-btn-gold:active {
    transform: translateY(0) scale(0.98);
    box-shadow: none;
}
.bb-btn-primary:disabled,
.bb-btn-accent:disabled { transform: none; box-shadow: none; opacity: 0.65; }

/* ---------- Header ---------- */
.bb-header--scrolled {
    background-color: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    box-shadow: 0 8px 30px rgba(34, 39, 33, 0.08);
}
.bb-utility-bar {
    background-image: linear-gradient(90deg, #1B231B 0%, var(--color-primary-dark) 50%, #1B231B 100%);
}

/* ---------- Cards ---------- */
.bb-card { border-radius: var(--radius-lg); border-color: rgba(227, 218, 203, 0.8); }

.bb-product-card {
    border-radius: var(--radius-lg);
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(34, 39, 33, 0.06), 0 0 0 1px rgba(227, 218, 203, 0.7);
}
.bb-product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(34, 39, 33, 0.12), 0 0 0 1px rgba(201, 162, 75, 0.35);
}
.bb-product-card__media {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background-color: var(--color-surface-soft);
}
/* Soft scrim so the white action buttons read on light photos. */
.bb-product-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--color-overlay-dark-rgb), 0.08) 0%, transparent 30%);
    pointer-events: none;
}
.bb-product-card__body { padding: var(--space-3) var(--space-3) var(--space-4); }
.bb-product-card__name {
    font-weight: 600;
    transition: color var(--motion-fast) var(--motion-ease);
}
.bb-product-card:hover .bb-product-card__name { color: var(--color-primary); }
.bb-price-display--sm .bb-price-display__current,
.bb-price-display--sm { color: var(--color-primary-dark); }

/* Card action buttons slide in on hover (desktop pointer only; always
   visible on touch devices where there is no hover). */
@media (hover: hover) and (pointer: fine) {
    .bb-product-card__actions > * {
        opacity: 0;
        transform: translateX(8px);
        transition: opacity var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
    }
    html[dir="rtl"] .bb-product-card__actions > * { transform: translateX(-8px); }
    .bb-product-card:hover .bb-product-card__actions > *,
    .bb-product-card:focus-within .bb-product-card__actions > *,
    .bb-product-card__actions .is-active,
    .bb-product-card__actions .is-added {
        opacity: 1;
        transform: none;
    }
    .bb-product-card__actions > *:nth-child(2) { transition-delay: 40ms; }
    .bb-product-card__actions > *:nth-child(3) { transition-delay: 80ms; }
}
.bb-product-card__wishlist,
.bb-product-card__add-to-cart,
.bb-product-card__quick-view {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.bb-product-card__add-to-cart:not(:disabled):hover {
    background-color: var(--color-primary);
    color: #fff;
}

/* Badges: pill shape, a touch of depth. */
.bb-badge {
    border-radius: var(--radius-pill);
    padding-inline: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
    border-radius: var(--radius-md);
    border-color: var(--color-border);
    transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 0.22rem rgba(201, 162, 75, 0.18);
}
.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.form-range::-webkit-slider-thumb { background-color: var(--color-primary); }
.form-range::-moz-range-thumb { background-color: var(--color-primary); }

/* ---------- Footer ---------- */
.bb-footer {
    position: relative;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(201, 162, 75, 0.14) 0, transparent 45%),
        linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
.bb-footer::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.bb-footer__nav a {
    transition: color var(--motion-fast) var(--motion-ease), padding var(--motion-fast) var(--motion-ease);
}
.bb-footer__nav a:hover { padding-inline-start: 4px; }

/* ---------- Scroll reveal: gentler, with a slight scale ---------- */
.bb-reveal {
    transform: translateY(24px) scale(0.985);
    transition: opacity 600ms var(--motion-ease), transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bb-reveal.is-visible { transform: none; }

/* Stagger product-grid children as they enter (scroll-reveal.js adds
   .bb-reveal + --bb-reveal-delay to grid items). */
.bb-reveal[style*="--bb-reveal-delay"] { transition-delay: var(--bb-reveal-delay); }