/* ==========================================================================
   Borgers Luxury — Brand CSS
   Loaded site-wide. Use these as "CSS Classes" on any Elementor widget/
   section (Advanced tab > CSS Classes) to apply the brand system without
   fighting Elementor's own styling panel.
   ========================================================================== */

:root {
  --ink: #0B0B0C;
  --ink-2: #141313;
  --ivory: #F4EFE6;
  --ivory-2: #E7DFCF;
  --brass: #C6A15B;
  --brass-deep: #8A6A34;
  --brass-bright: #E4C583;
  --burgundy: #3C1119;
}

/* ---- Set these same values in Elementor Pro too ----------------------
   Site Settings > Global Colors:
     Ink            #0B0B0C
     Ivory          #F4EFE6
     Brass          #C6A15B
     Brass Deep     #8A6A34
     Brass Bright   #E4C583
     Burgundy       #3C1119

   Site Settings > Global Fonts:
     Primary / Headings: Cormorant Garamond (weights 400/500/600, italic)
     Text / Body:        Jost (weight 300)
   ------------------------------------------------------------------------ */

body {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
}

h1, h2, h3, h4,
.font-display {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
}

/* Small uppercase label above headings, e.g. "Est. Hellertown, PA" */
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--brass);
}

/* Outline button — primary CTA style */
.btn-brass {
  display: inline-block;
  border: 1px solid var(--brass);
  background: transparent;
  color: var(--brass) !important;
  padding: 14px 32px;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: all 0.25s ease;
}
.btn-brass:hover {
  background: var(--brass);
  color: var(--ink) !important;
}

/* Dark outline button — for use on light backgrounds, e.g. the header */
.btn-dark {
  display: inline-block;
  border: 1px solid #2A2A2A;
  background: transparent;
  color: #2A2A2A !important;
  padding: 14px 32px;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: all 0.25s ease;
}
.btn-dark:hover {
  background: #2A2A2A;
  color: var(--ivory) !important;
}
.btn-ghost {
  display: inline-block;
  border: 1px solid rgba(231, 223, 207, 0.3);
  color: var(--ivory-2) !important;
  padding: 14px 32px;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: all 0.25s ease;
}
.btn-ghost:hover {
  border-color: var(--brass);
  color: var(--brass) !important;
}

/* Signature element: coin "reeded edge" divider. Drop a plain Elementor
   Divider or Spacer widget where you want one, then add this class. */
.reeded-divider {
  height: 10px;
  width: 100%;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(198, 161, 91, 0.65) 0px,
    rgba(198, 161, 91, 0.65) 2px,
    transparent 2px,
    transparent 7px
  );
}

/* Circular brass-outline mark used on category / step icons */
.brass-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(198, 161, 91, 0.5);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: rgba(198, 161, 91, 0.85);
  font-size: 1.1rem;
}

/* Section background helpers — apply to a Section's CSS Classes field */
.bg-ink   { background: var(--ink) !important; }
.bg-ink-2 { background: var(--ink-2) !important; }
.bg-burgundy { background: var(--burgundy) !important; }

/* Bordered card, e.g. for category tiles / price panels */
.brass-card {
  border: 1px solid rgba(138, 106, 52, 0.4);
  background: var(--ink);
  transition: border-color 0.25s ease;
}
.brass-card:hover { border-color: rgba(198, 161, 91, 0.6); }

/* Small "New In" style tag, e.g. on Recent Acquisitions images */
.brass-tag {
  display: inline-block;
  background: rgba(11, 11, 12, 0.9);
  border: 1px solid rgba(198, 161, 91, 0.5);
  padding: 4px 10px;
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--brass);
}

.text-balance { text-wrap: balance; }

/* Fallback header nav (used only until Elementor Theme Builder header is set) */
.primary-menu {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #2A2A2A;
}
.primary-menu a { text-decoration: none; }
.primary-menu a:hover { color: var(--brass-deep); }
@media (max-width: 900px) {
  .primary-menu { display: none; }
}
.footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
  color: rgba(231, 223, 207, 0.75);
}
.footer-menu li { margin-bottom: 6px; }
.footer-menu a { text-decoration: none; }
.footer-menu a:hover { color: var(--brass); }

/* Header logo sizing (fallback header.php; the Elementor Site Logo
   widget in the header template has its own Style-tab width control). */
.site-logo-link img,
.custom-logo { max-width: 210px; height: auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- Google Reviews marquee (shortcode: [borgers_google_reviews]) ---- */

.gr-wrap {
  width: 100%;
}

.gr-mask {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
}

.gr-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: gr-scroll 45s linear infinite;
  will-change: transform;
}

/* Pause on hover for desktop/pointer devices only — avoids a "stuck"
   feeling on touch, where hover can linger after a tap. */
@media (hover: hover) {
  .gr-mask:hover .gr-track { animation-play-state: paused; }
}

@keyframes gr-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.gr-card {
  flex: 0 0 auto;
  width: min(85vw, 320px);
  background: var(--ink);
  border: 1px solid rgba(138, 106, 52, 0.35);
  padding: 26px;
}

.gr-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.gr-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(198, 161, 91, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  color: var(--brass);
  font-size: 1rem;
  flex-shrink: 0;
}

.gr-name {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ivory);
  font-weight: 400;
}

.gr-stars {
  margin: 2px 0 0;
  color: var(--brass);
  font-size: 0.85rem;
  letter-spacing: 2px;
}

.gr-text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(231, 223, 207, 0.8);
  font-weight: 300;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gr-meta {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: rgba(231, 223, 207, 0.45);
  display: flex;
  align-items: center;
  gap: 6px;
}

.gr-g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brass);
  color: var(--ink);
  font-size: 0.65rem;
  font-weight: 700;
  font-family: sans-serif;
}

@media (max-width: 640px) {
  .gr-track { animation-duration: 32s; gap: 14px; }
  .gr-card { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .gr-track { animation: none; }
  .gr-mask { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- Shop grid (display-only, shortcode: [borgers_shop_grid]) ---- */

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.shop-item-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(138, 106, 52, 0.3);
  background: var(--ink-2);
}
.shop-item:hover .shop-item-media { border-color: rgba(198, 161, 91, 0.6); }

.shop-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.shop-item:hover .shop-item-img { transform: scale(1.05); }

.shop-item-img--placeholder {
  background: repeating-linear-gradient(
    45deg,
    rgba(198, 161, 91, 0.08),
    rgba(198, 161, 91, 0.08) 10px,
    transparent 10px,
    transparent 20px
  );
}

.shop-ribbon {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: rgba(11, 11, 12, 0.9);
  border: 1px solid rgba(198, 161, 91, 0.6);
  color: var(--brass);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 5px 10px;
}

.shop-item-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  margin: 14px 0 4px;
  color: var(--ivory);
}

.shop-item-price {
  font-size: 0.85rem;
  color: var(--brass);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}

.shop-grid-cta {
  text-align: center;
  margin-top: 40px;
}

@media (max-width: 640px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .shop-item-name { font-size: 1rem; }
}