/*
Theme Name: Rare & Luxe
Theme URI: https://rareandluxe.co.uk
Author: Rare & Luxe
Description: Custom marketplace theme for Rare & Luxe — jewellery, gemstone and diamond classifieds marketplace with verification. Built on WooCommerce, WP Job Manager and Ultimate Member.
Version: 1.1.0
Text Domain: rareandluxe
*/

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

/* ==========================================================================
   2. ROOT TOKENS — client's exact brand palette
   ========================================================================== */
:root{
  /* client-supplied palette */
  --rl-navy:        #020B15;   /* Deep Navy / Almost Black — header, hero, dark sections */
  --rl-black:       #02050A;   /* Near Black — deepest backgrounds/shadows */
  --rl-navy-2:      #0E1724;   /* Navy Blue — secondary dark areas */
  --rl-blue-gray:   #263243;   /* Blue-Gray — subtle backgrounds/images */
  --rl-cream-2:     #FAF7F2;   /* Warm Ivory / Cream — main page background */
  --rl-cream:       #EFEBE5;   /* Light Cream — cards / secondary backgrounds */
  --rl-gold:        #C59E65;   /* Gold — buttons, logo, accents */
  --rl-gold-dark:   #715941;   /* Dark Antique Gold — gold shadows/details */
  --rl-gold-muted:  #957859;   /* Muted Gold/Brown — secondary gold elements */
  --rl-brown:       #4F3B2E;   /* Warm Brown — jewelry/background photography */
  --rl-white:       #FFFFFF;
  --rl-gray:        #C4C0BC;   /* Soft Gray — borders / muted text */

  /* supporting neutrals (not in swatch, needed only for body-text legibility on cream) */
  --rl-ink:         #1E1B16;
  --rl-ink-soft:    #5B5347;
  --rl-line-dark:   rgba(255,255,255,.12);

  /* functional colour — not brand palette, used only for the "Verified" status badge */
  --rl-green:       #1E7A46;
  --rl-green-bg:    #E7F3EC;

  --rl-font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --rl-font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --rl-maxw: 1240px;
  --rl-radius-sm: 3px;
  --rl-radius: 6px;
  --rl-shadow: 0 10px 30px rgba(2,5,10,.10);
  --rl-shadow-lg: 0 20px 50px rgba(2,5,10,.20);
}

/* ==========================================================================
   3. RESET / BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--rl-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--rl-ink);
  background: var(--rl-cream-2);
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }
input, select{ font-family: inherit; }
h1,h2,h3,h4{ font-family: var(--rl-font-head); margin: 0; font-weight: 600; color: var(--rl-ink); }
p{ margin: 0; }
.rl-container{
  max-width: var(--rl-maxw);
  margin: 0 auto;
  padding: 0 32px;
}
:focus-visible{ outline: 2px solid var(--rl-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.rl-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: var(--rl-radius-sm);
  border: 1px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.rl-btn-gold{
  background: var(--rl-gold);
  color: var(--rl-navy);
}
.rl-btn-gold:hover{ background: var(--rl-gold-muted); color: var(--rl-white); }
.rl-btn-outline{
  background: transparent;
  border-color: var(--rl-line-dark);
  color: var(--rl-white);
}
.rl-btn-outline:hover{ border-color: var(--rl-gold); color: var(--rl-gold); }
.rl-btn-dark{
  background: var(--rl-navy);
  color: var(--rl-cream-2);
}
.rl-btn-dark:hover{ background: var(--rl-navy-2); }
.rl-btn-block{ width: 100%; }

/* ==========================================================================
   5. HEADER (two-row: brand/account row, then nav row)
   ========================================================================== */
.rl-header{ background: var(--rl-navy); }

.rl-header__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
}
.rl-logo{ display: flex; align-items: center; gap: 12px; }
.rl-logo__mark{ width: 32px; height: 32px; flex-shrink: 0; color: var(--rl-gold); }
.rl-logo__text{ display: flex; flex-direction: column; line-height: 1.15; }
.rl-logo__name{
  font-family: var(--rl-font-head);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--rl-white);
}
.rl-logo__name em{ font-style: normal; color: var(--rl-gold); }
.rl-logo__tag{
  font-size: 9px;
  letter-spacing: .15em;
  color: var(--rl-gold);
  text-transform: uppercase;
  margin-top: 3px;
}
.rl-header__actions{ display: flex; align-items: center; gap: 22px; }
.rl-icon-link{
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--rl-cream-2);
}
.rl-icon-link svg{ width: 18px; height: 18px; }
.rl-icon-link:hover{ color: var(--rl-gold); }
.rl-menu-toggle{ display: none; background: none; border: none; color: var(--rl-white); }

.rl-header__navbar{ background: var(--rl-navy-2); border-top: 1px solid var(--rl-line-dark); border-bottom: 1px solid var(--rl-line-dark); }
.rl-nav{
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 14px 32px;
}
.rl-nav__item{ position: relative; display: flex; align-items: center; }
.rl-nav__item > a{
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--rl-cream-2);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}
.rl-nav__item > a:hover{ color: var(--rl-gold); }
.rl-nav__caret{ transition: transform .15s ease; }
.rl-nav__item.has-dropdown:hover .rl-nav__caret{ transform: rotate(180deg); }
.rl-dropdown{
  display: none;
  position: absolute;
  top: 100%; left: 0; margin-top: 0;
  background: var(--rl-navy-2);
  border: 1px solid var(--rl-line-dark);
  border-radius: var(--rl-radius-sm);
  padding: 14px 0 8px; /* extra top padding replaces the old margin-gap, but stays inside the hoverable element */
  min-width: 190px;
  box-shadow: var(--rl-shadow-lg);
  z-index: 50;
}
.rl-nav__item.has-dropdown:hover .rl-dropdown{ display: block; }
.rl-dropdown a{
  display: block; padding: 10px 18px; font-size: 12px;
  text-transform: none; letter-spacing: 0; color: var(--rl-cream-2);
}
.rl-dropdown a:hover{ background: rgba(197,158,101,.14); color: var(--rl-gold); }

/* ==========================================================================
   6. HERO — full-bleed image right, copy pinned left
   ========================================================================== */
.rl-hero{
  position: relative;
  background: var(--rl-navy);
  overflow: hidden;
  min-height: 600px;
  display: flex;
  flex-direction: column;
}
.rl-hero__media{
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 56%;
  z-index: 0;
}
.rl-hero__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.rl-hero__media::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    var(--rl-navy) 0%,
    rgba(2,11,21,.78) 18%,
    rgba(2,11,21,.18) 42%,
    rgba(2,11,21,0) 60%);
}
.rl-hero__inner{
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 84px 60px 60px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
@media (max-width: 620px){
  .rl-hero__inner{ padding: 32px 20px 48px; }
}
.rl-hero__copy{
  max-width: 540px;
  width: 100%;
  text-align: left;
}
.rl-hero__eyebrow{
  font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--rl-gold); margin-bottom: 18px;
}
.rl-hero__eyebrow::before{ content: '\2726\2002'; }
.rl-hero h1{ font-size: 50px; line-height: 1.14; color: var(--rl-white); margin-bottom: 20px; text-align: left; }
.rl-hero h1 em{ font-style: normal; color: var(--rl-gold); }
.rl-hero p{ color: var(--rl-cream-2); opacity: .78; font-size: 16px; max-width: 460px; margin-bottom: 32px; text-align: left; }
.rl-hero__ctas{ display: flex; gap: 14px; margin-bottom: 44px; }
.rl-hero__badges{ display: flex; gap: 40px; flex-wrap: wrap; }
.rl-hero__badge{
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  font-size: 11px; font-weight: 500; letter-spacing: .03em;
  text-transform: uppercase; color: var(--rl-cream-2); line-height: 1.4;
}
.rl-hero__badge svg{ width: 22px; height: 22px; color: var(--rl-gold); }

/* search strip — sits below hero, darkest tone in the palette */
.rl-search{ background: var(--rl-navy-2); border-top: 1px solid var(--rl-line-dark); position: relative; z-index: 1; }
.rl-search__inner{ max-width: var(--rl-maxw); margin: 0 auto; padding: 30px 32px; }
.rl-search__title{
  text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--rl-gold); margin-bottom: 18px;
}
.rl-search__row{ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto auto; gap: 12px; align-items: center; }
.rl-search__field{
  display: flex; align-items: center; gap: 8px;
  background: var(--rl-blue-gray); border: 1px solid transparent; border-radius: var(--rl-radius-sm);
  padding: 13px 14px; font-size: 13px; color: var(--rl-cream-2);
  transition: border-color .15s ease;
}
.rl-search__field:focus-within{ border-color: var(--rl-gold); }
.rl-search__field svg{ width: 16px; height: 16px; flex-shrink: 0; color: var(--rl-cream-2); }
.rl-search__field select{ border: none; background: transparent; width: 100%; font-size: 13px; color: var(--rl-cream-2); }
.rl-search__field select option{ background: var(--rl-navy-2); color: var(--rl-cream-2); }
.rl-search__check{ display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--rl-cream-2); white-space: nowrap; }
.rl-search__submit{ padding: 14px 30px; }

/* ==========================================================================
   7. SECTION HEADINGS
   ========================================================================== */
.rl-section{ padding: 76px 0; }
.rl-section--cream{ background: var(--rl-cream); }
.rl-section--white{ background: var(--rl-cream-2); }
.rl-section--navy{ background: var(--rl-navy); }
.rl-section__head{ text-align: center; margin-bottom: 46px; }
.rl-section__head h2{
  font-size: 30px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rl-ink);
}
.rl-section--navy .rl-section__head h2{ color: var(--rl-white); }
.rl-section__head .rl-rule{
  width: 46px; height: 2px; background: var(--rl-gold);
  margin: 14px auto 0;
}

/* ==========================================================================
   8. COLLECTIONS GRID
   ========================================================================== */
.rl-collections{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.rl-collection{
  position: relative;
  aspect-ratio: 3/3.6;
  overflow: hidden;
  color: var(--rl-white);
  background: var(--rl-blue-gray);
}
.rl-collection img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.rl-collection:hover img{ transform: scale(1.06); }
.rl-collection::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,5,10,.05) 40%, rgba(2,5,10,.92) 100%);
}
.rl-collection__label{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 10px;
  text-align: center;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.rl-collection__icon{
  width: 30px; height: 30px; margin: 0 auto;
  border: 1px solid var(--rl-gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rl-collection__icon svg{ width: 14px; height: 14px; color: var(--rl-gold); }
.rl-collection__name{
  display: block;
  font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  margin: 0;
}
.rl-collection__link{
  display: block;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--rl-gold);
}

/* ==========================================================================
   9. VERIFIED SECTION
   ========================================================================== */
.rl-verified{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
}
.rl-verified__intro{
  background: var(--rl-navy);
  color: var(--rl-cream-2);
  border-radius: var(--rl-radius);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rl-verified__intro svg{ width: 34px; height: 34px; color: var(--rl-gold); margin-bottom: 16px; }
.rl-verified__intro h3{ font-size: 24px; color: var(--rl-white); margin-bottom: 12px; line-height: 1.2; }
.rl-verified__intro p{ font-size: 13px; color: var(--rl-cream-2); opacity: .7; margin-bottom: 22px; }
.rl-products{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.rl-product{
  background: var(--rl-cream);
  border: 1px solid var(--rl-gray);
  border-radius: var(--rl-radius);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.rl-product:hover{ box-shadow: var(--rl-shadow); transform: translateY(-2px); }
.rl-product__media{ position: relative; aspect-ratio: 4/3; background: var(--rl-blue-gray); }
.rl-product__media img{ width: 100%; height: 100%; object-fit: cover; }
.rl-product__badge{
  position: absolute; top: 10px; left: 10px;
  background: var(--rl-green-bg); color: var(--rl-green);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 20px;
  display: flex; align-items: center; gap: 4px;
}
.rl-product__badge svg{ width: 10px; height: 10px; }
.rl-product__fav{
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center;
}
.rl-product__fav svg{ width: 15px; height: 15px; color: var(--rl-ink); }
.rl-product__body{ padding: 16px; }
.rl-product__name{ font-size: 14px; font-weight: 600; margin-bottom: 3px; line-height: 1.35; color: var(--rl-ink); }
.rl-product__meta{ font-size: 12px; color: var(--rl-ink-soft); margin-bottom: 10px; }
.rl-product__foot{ display: flex; align-items: center; justify-content: space-between; }
.rl-product__price{ font-family: var(--rl-font-head); font-size: 17px; font-weight: 700; color: var(--rl-gold-dark); }
.rl-product__loc{ display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--rl-ink-soft); }
.rl-product__loc svg{ width: 11px; height: 11px; }
.rl-verified__more{ text-align: center; margin-top: 40px; }
.rl-verified__more a{
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rl-ink);
  border-bottom: 1px solid var(--rl-gold); padding-bottom: 4px;
}

/* ==========================================================================
   10. SELL CTA SECTION
   ========================================================================== */
.rl-sell{ background: var(--rl-navy); color: var(--rl-cream-2); }
.rl-sell__grid{ display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.rl-sell__copy h2{ font-size: 32px; color: var(--rl-white); margin-bottom: 8px; text-transform: none; }
.rl-sell__copy .rl-kicker{ color: var(--rl-gold); font-size: 14px; font-weight: 500; margin-bottom: 6px; display: block; }
.rl-sell__copy p{ color: var(--rl-cream-2); opacity: .72; max-width: 480px; margin: 16px 0 28px; font-size: 14px; }
.rl-sell__steps{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 34px 0 32px; }
.rl-sell__step svg{ width: 26px; height: 26px; color: var(--rl-gold); margin-bottom: 10px; }
.rl-sell__step-icon{
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(197,158,101,.4);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.rl-sell__step h4{
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--rl-gold);
  margin-bottom: 6px; font-family: var(--rl-font-body); font-weight: 600;
}
.rl-sell__step p{ font-size: 12px; color: var(--rl-cream-2); opacity: .65; margin: 0; }
.rl-sell__media{ border-radius: var(--rl-radius); overflow: hidden; aspect-ratio: 4/3.3; background: var(--rl-blue-gray); }
.rl-sell__media img{ width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   11. WHY CHOOSE SECTION
   ========================================================================== */
.rl-why{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; }
.rl-why__item{ text-align: center; }
.rl-why__icon{
  width: 62px; height: 62px; margin: 0 auto 18px;
  border-radius: 50%;
  border: 1px solid var(--rl-gray);
  display: flex; align-items: center; justify-content: center;
  background: var(--rl-cream-2);
}
.rl-why__icon svg{ width: 26px; height: 26px; color: var(--rl-gold-dark); }
.rl-why__item h4{
  font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  font-family: var(--rl-font-body); color: var(--rl-ink); margin-bottom: 8px;
}
.rl-why__item p{ font-size: 13px; color: var(--rl-ink-soft); line-height: 1.55; }

/* ==========================================================================
   12. GENERIC PAGE HERO (interior pages)
   ========================================================================== */
.rl-pagehero{
  background: var(--rl-navy);
  padding: 64px 32px 56px;
  text-align: center;
}
.rl-pagehero__eyebrow{
  font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--rl-gold); margin-bottom: 14px;
}
.rl-pagehero h1{ color: var(--rl-white); font-size: 40px; margin-bottom: 14px; }
.rl-pagehero p{ color: var(--rl-cream-2); opacity: .75; max-width: 560px; margin: 0 auto; font-size: 15px; }
.rl-breadcrumb{
  display: flex; justify-content: center; gap: 8px; font-size: 12px;
  color: var(--rl-cream-2); opacity: .55; margin-bottom: 18px; text-transform: uppercase; letter-spacing: .05em;
}
.rl-breadcrumb a:hover{ color: var(--rl-gold); }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.rl-footer{ background: var(--rl-navy); color: var(--rl-cream-2); padding-top: 64px; }
.rl-footer__top{
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center;
  padding-bottom: 46px; border-bottom: 1px solid var(--rl-line-dark);
}
.rl-footer__brand p{ color: var(--rl-cream-2); opacity: .6; font-size: 13px; margin-top: 10px; max-width: 320px; }
.rl-footer__news h5{
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--rl-gold);
  margin-bottom: 6px; font-family: var(--rl-font-body); font-weight: 600;
}
.rl-footer__news p{ font-size: 13px; color: var(--rl-cream-2); opacity: .6; margin-bottom: 14px; }
.rl-newsform{ display: flex; gap: 10px; }
.rl-newsform input{
  flex: 1; padding: 13px 16px; border-radius: var(--rl-radius-sm); border: 1px solid var(--rl-line-dark);
  background: var(--rl-navy-2); color: var(--rl-white); font-size: 13px;
}
.rl-newsform input::placeholder{ color: var(--rl-gray); }
.rl-social{ display: flex; gap: 12px; margin-top: 18px; justify-content: flex-end; }
.rl-social a{
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rl-line-dark);
  display: flex; align-items: center; justify-content: center;
}
.rl-social svg{ width: 15px; height: 15px; }
.rl-social a:hover{ border-color: var(--rl-gold); color: var(--rl-gold); }
.rl-footer__cols{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 44px 0; }
.rl-footer__col h6{
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--rl-white);
  margin-bottom: 16px; font-family: var(--rl-font-body); font-weight: 600;
}
.rl-footer__col a{ display: block; font-size: 13px; color: var(--rl-cream-2); opacity: .6; padding: 6px 0; }
.rl-footer__col a:hover{ color: var(--rl-gold); opacity: 1; }
.rl-footer__bottom{
  border-top: 1px solid var(--rl-line-dark);
  padding: 22px 0 26px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--rl-cream-2); opacity: .5;
}
.rl-footer__bottom a{ margin-left: 18px; }
.rl-footer__bottom a:hover{ color: var(--rl-gold); }

/* ==========================================================================
   14. GENERIC CONTENT BLOCKS (about / how it works / trust & safety / contact)
   ========================================================================== */
.rl-steps-list{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.rl-steps-list__item{
  background: var(--rl-cream);
  border: 1px solid var(--rl-gray);
  border-radius: var(--rl-radius);
  padding: 30px 24px;
  position: relative;
}
.rl-steps-list__num{ font-family: var(--rl-font-head); font-size: 34px; color: var(--rl-gold); margin-bottom: 12px; font-weight: 700; }
.rl-steps-list__item h3{ font-size: 17px; margin-bottom: 10px; }
.rl-steps-list__item p{ font-size: 13px; color: var(--rl-ink-soft); line-height: 1.6; }

.rl-two-col{ display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.rl-two-col img{ border-radius: var(--rl-radius); width: 100%; }
.rl-two-col .rl-kicker{ color: var(--rl-gold-dark); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: 10px; }
.rl-two-col h2{ font-size: 30px; margin-bottom: 18px; }
.rl-two-col p{ color: var(--rl-ink-soft); font-size: 15px; margin-bottom: 14px; line-height: 1.7; }

.rl-stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.rl-stats__item .num{ font-family: var(--rl-font-head); font-size: 40px; color: var(--rl-gold); font-weight: 700; }
.rl-stats__item .label{ font-size: 13px; color: var(--rl-cream-2); opacity: .65; margin-top: 6px; text-transform: uppercase; letter-spacing: .06em; }

.rl-values{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.rl-values__item{ padding: 30px 26px; background: var(--rl-cream); border-radius: var(--rl-radius); }
.rl-values__item svg{ width: 28px; height: 28px; color: var(--rl-gold-dark); margin-bottom: 16px; }
.rl-values__item h3{ font-size: 16px; margin-bottom: 8px; }
.rl-values__item p{ font-size: 13px; color: var(--rl-ink-soft); line-height: 1.6; }

.rl-faq{ max-width: 760px; margin: 0 auto; }
.rl-faq__item{ border-bottom: 1px solid var(--rl-gray); padding: 22px 0; }
.rl-faq__item h4{ font-size: 15px; margin-bottom: 8px; }
.rl-faq__item p{ font-size: 13px; color: var(--rl-ink-soft); line-height: 1.65; }

.rl-contact-grid{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; }
.rl-contact-card{ background: var(--rl-navy); color: var(--rl-cream-2); border-radius: var(--rl-radius); padding: 36px 30px; }
.rl-contact-card h3{ color: var(--rl-white); font-size: 20px; margin-bottom: 20px; }
.rl-contact-item{ display: flex; gap: 14px; margin-bottom: 22px; }
.rl-contact-item svg{ width: 20px; height: 20px; color: var(--rl-gold); flex-shrink: 0; margin-top: 2px; }
.rl-contact-item h5{ font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--rl-gold); margin-bottom: 4px; }
.rl-contact-item p{ font-size: 13px; color: var(--rl-cream-2); opacity: .75; }
.rl-form{ display: grid; gap: 16px; }
.rl-form__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rl-form label{ display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--rl-ink); margin-bottom: 8px; }
.rl-form input, .rl-form select, .rl-form textarea{
  width: 100%; padding: 13px 15px; border: 1px solid var(--rl-gray); border-radius: var(--rl-radius-sm);
  font-size: 14px; background: var(--rl-white); color: var(--rl-ink);
}
.rl-form textarea{ resize: vertical; min-height: 130px; }
.rl-form input:focus, .rl-form select:focus, .rl-form textarea:focus{ border-color: var(--rl-gold); }

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px){
  .rl-collections{ grid-template-columns: repeat(4, 1fr); }
  .rl-verified{ grid-template-columns: 1fr; }
  .rl-products{ grid-template-columns: repeat(2, 1fr); }
  .rl-why{ grid-template-columns: repeat(3, 1fr); gap: 26px 18px; }
  .rl-sell__grid{ grid-template-columns: 1fr; }
  .rl-sell__media{ order: -1; }
  .rl-footer__cols{ grid-template-columns: repeat(2, 1fr); }
  .rl-steps-list{ grid-template-columns: repeat(2, 1fr); }
  .rl-two-col{ grid-template-columns: 1fr; gap: 32px; }
  .rl-contact-grid{ grid-template-columns: 1fr; }
  .rl-stats{ grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .rl-hero__media{ width: 50%; }
}
@media (max-width: 860px){
  .rl-nav{
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--rl-navy-2);
    border-top: 1px solid var(--rl-line-dark);
    padding: 6px 20px 14px;
    z-index: 40;
  }
  .rl-nav.is-open{ display: flex; }
  .rl-nav__item{ flex-direction: column; align-items: flex-start; width: 100%; }
  .rl-nav__item > a{ padding: 12px 0; width: 100%; border-bottom: 1px solid var(--rl-line-dark); }
  .rl-dropdown{ position: static; display: none; border: none; background: transparent; box-shadow: none; padding-left: 14px; width: 100%; margin-top: 0; }
  .rl-nav__item.has-dropdown:hover .rl-dropdown,
  .rl-nav__item.has-dropdown.is-open .rl-dropdown{ display: block; }
  .rl-header{ position: relative; }
  .rl-header__navbar{ position: relative; }
  .rl-menu-toggle{ display: block; }
  .rl-hero{ min-height: auto; }
  .rl-hero__media{ position: relative; width: 100%; height: 260px; }
  .rl-hero__media::after{ background: linear-gradient(180deg, rgba(2,11,21,0) 0%, rgba(2,11,21,.9) 100%); }
  .rl-hero__inner{ padding: 32px 20px 48px; }
  .rl-hero h1{ font-size: 34px; }
  .rl-search__row{ grid-template-columns: 1fr 1fr; }
  .rl-search__submit{ grid-column: 1 / -1; }
  .rl-collections{ grid-template-columns: repeat(3, 1fr); }
  .rl-sell__steps{ grid-template-columns: repeat(2, 1fr); }
  .rl-footer__top{ grid-template-columns: 1fr; }
  .rl-social{ justify-content: flex-start; }
}
@media (max-width: 620px){
  .rl-container{ padding: 0 20px; }
  .rl-header__top{ padding: 16px 20px; }
  .rl-nav{ padding: 6px 20px 14px; }
  .rl-header__actions .rl-icon-link span{ display: none; }
  .rl-search{ padding: 0; }
  .rl-search__inner{ padding: 24px 20px; }
  .rl-collections{ grid-template-columns: repeat(2, 1fr); }
  .rl-products{ grid-template-columns: 1fr; }
  .rl-why{ grid-template-columns: 1fr 1fr; }
  .rl-section{ padding: 52px 0; }
  .rl-footer__cols{ grid-template-columns: 1fr; }
  .rl-steps-list{ grid-template-columns: 1fr; }
  .rl-form__row{ grid-template-columns: 1fr; }
  .rl-stats{ grid-template-columns: 1fr 1fr; }
  .rl-verified__intro{ padding: 26px 22px; }
}

/* ==========================================================================
   16. LISTING GRID & FILTER BAR (Buy Jewellery page)
   ========================================================================== */
.rl-filter-bar{
  background: var(--rl-cream);
  border: 1px solid var(--rl-gray);
  border-radius: var(--rl-radius);
  padding: 24px;
  margin-bottom: 40px;
}
.rl-filter-bar__row{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto auto;
  gap: 12px;
  align-items: center;
}
.rl-filter-bar__field{
  display: flex; align-items: center; gap: 8px;
  background: var(--rl-white); border: 1px solid var(--rl-gray); border-radius: var(--rl-radius-sm);
  padding: 12px 14px; font-size: 13px; color: var(--rl-ink-soft);
}
.rl-filter-bar__field svg{ width: 16px; height: 16px; color: var(--rl-ink-soft); flex-shrink: 0; }
.rl-filter-bar__field select, .rl-filter-bar__field input{
  border: none; background: transparent; width: 100%; font-size: 13px; color: var(--rl-ink-soft); outline: none;
}
.rl-filter-bar__check{ display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--rl-ink-soft); white-space: nowrap; }
.rl-filter-bar__check input[type="checkbox"]{ accent-color: var(--rl-gold); width: 15px; height: 15px; }

.rl-listing-results{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 10px; }
.rl-listing-results p{ font-size: 13px; color: var(--rl-ink-soft); }

.rl-listing-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ==========================================================================
   17. FORM SUCCESS / ERROR MESSAGE (Contact & Sell pages)
   ========================================================================== */
.rl-form-message{
  padding: 14px 18px;
  border-radius: var(--rl-radius-sm);
  font-size: 13px;
  margin-bottom: 24px;
}
.rl-form-message--success{ background: var(--rl-green-bg); color: var(--rl-green); }

@media (max-width: 1080px){
  .rl-filter-bar__row{ grid-template-columns: 1fr 1fr; }
  .rl-listing-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .rl-listing-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   18. LEGAL PAGE CONTENT (Terms / Privacy / Cookies)
   ========================================================================== */
.rl-legal{ max-width: 780px; margin: 0 auto; }
.rl-legal p{ font-size: 15px; line-height: 1.75; color: var(--rl-ink-soft); margin-bottom: 18px; }
.rl-legal h2{ font-size: 22px; margin: 44px 0 14px; color: var(--rl-ink); }
.rl-legal h2:first-child{ margin-top: 0; }
.rl-legal ul{ margin: 0 0 18px; padding-left: 20px; list-style: disc; }
.rl-legal li{ font-size: 15px; line-height: 1.75; color: var(--rl-ink-soft); margin-bottom: 8px; }
.rl-legal__updated{ font-size: 13px; color: var(--rl-gold-dark); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 32px; display: block; }