/* === FRONT PAGE === */

/* Banner Espa */
.espa-badge {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 900;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .4s ease, transform .4s ease;
  border-radius: 8px;
  box-shadow: 0 2px 18px rgba(0, 0, 0, .10);
  line-height: 0;
}

.espa-badge img {
  display: block;
  width: 280px;
  height: auto;
  border-radius: 8px;
}

.espa-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

.espa-badge.is-hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

/* Modal */
.espa-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.espa-modal[hidden] {
  display: none;
}

.espa-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, .65);
  backdrop-filter: blur(4px);
  animation: espaFadeIn .25s ease;
}

.espa-modal__box {
  position: relative;
  max-width: 760px;
  width: 100%;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  animation: espaSlideUp .28s ease;
}

.espa-modal__img {
  display: block;
  width: 100%;
  height: 100vh;
  object-fit: contain;
}

.espa-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  transition: background .22s ease, transform .22s ease;
  z-index: 1;
}

.espa-modal__close:hover {
  background: #fff;
  transform: scale(1.1);
}

@keyframes espaFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes espaSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 480px) {
  .espa-badge {
    bottom: 16px;
    left: 16px;
  }

  .espa-badge img {
    width: 140px;
  }
}

/* Hero */
.hero {
  min-height: calc(100vh - 82px);
  display: grid;
  place-items: center;
  background:
    linear-gradient(120deg, rgba(201, 146, 42, 0.12), transparent 38%),
    radial-gradient(circle at 80% 18%, rgba(212, 168, 67, 0.18), transparent 28%),
    var(--off-white);
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(201, 146, 42, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(201, 146, 42, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 860px;
  text-align: center;
  padding: 40px 20px;
}

.hero-content h1 {
  font-family: var(--font-main);
  font-size: clamp(58px, 9vw, 120px);
  font-weight: 500;
  line-height: 0.92;
  color: var(--black);
  margin-bottom: 26px;
}

.hero-content p {
  font-size: 18px;
  max-width: 580px;
  margin: 0 auto 36px;
  color: var(--gray);
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Categories Bar */
.categories-bar {
  background: var(--light-bg);
  border-block: 1px solid var(--border-light);
}

.categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}

.categories a {
  padding: 26px 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 13px;
  color: var(--dark);
  position: relative;
  transition: var(--transition);
  border-right: 1px solid var(--border-light);
}

.categories a:last-child {
  border-right: none;
}

.categories a::after {
  content: '';
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 18px;
  height: 1px;
  background: var(--primary-gold);
  transform: scaleX(0);
  transition: var(--transition);
}

.categories a:hover {
  color: var(--primary-gold);
}

.categories a:hover::after {
  transform: scaleX(1);
}

/* Featured Products section head */
.featured-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 52px;
}

/* About / Brand Story */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.about-image {
  height: 560px;
  background: #e8e2da;
  position: relative;
  overflow: hidden;
}

.about-image::before {
  content: '';
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(201, 146, 42, 0.35);
  z-index: 1;
  pointer-events: none;
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Newsletter */
.ra-newsletter-section{
  background:linear-gradient(135deg,var(--off-white),var(--light-bg));
  border-block:1px solid var(--border-light);
}
.ra-newsletter-box{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:46px;
  align-items:center;
  background:var(--white);
  border:1px solid var(--border-light);
  box-shadow:var(--shadow-gold);
  padding:54px;
  position:relative;
  overflow:hidden;
}
.ra-newsletter-box::before{
  content:'';
  position:absolute;
  inset:18px;
  border:1px solid rgba(201,146,42,.18);
  pointer-events:none;
}
.ra-newsletter-content,
.ra-newsletter-form{
  position:relative;
  z-index:1;
}
.ra-newsletter-content h2{
  font-family:var(--font-main);
  font-size:clamp(34px,4vw,56px);
  font-weight:500;
  line-height:1;
  color:var(--black);
  margin-bottom:18px;
}
.ra-newsletter-content p{
  max-width:520px;
  color:var(--gray);
  font-size:16px;
}
.ra-newsletter-form .wpcf7-form p{
  margin:0;
}
.ra-newsletter-form input[type="email"]{
  min-height:52px;
  background:var(--off-white);
}
.ra-newsletter-form .wpcf7-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  width:100%;
  margin-top:14px;
  padding:0 28px;
  border:1px solid var(--primary-gold);
  background:var(--primary-gold);
  color:var(--white);
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:var(--transition);
  border-radius:var(--radius);
}
.ra-newsletter-form .wpcf7-submit:hover{
  background:var(--gold-dark);
  border-color:var(--gold-dark);
}
.ra-newsletter-form .wpcf7-spinner{
  display:block;
  margin:12px auto 0;
}
.ra-newsletter-form .wpcf7-response-output{
  margin:16px 0 0!important;
  padding:12px 14px!important;
  border-color:var(--border)!important;
  color:var(--gray);
  font-size:13px;
}
@media (max-width:900px){
  .ra-newsletter-box{
    grid-template-columns:1fr;
    gap:28px;
    padding:38px 30px;
  }
}
@media (max-width:480px){
  .ra-newsletter-box{
    padding:30px 20px;
  }
}

/* Instagram strip */
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.insta {
  aspect-ratio: 1;
  background: #e8e2da;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.insta img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.insta:hover img {
  transform: scale(1.06);
}

.insta::after {
  content: 'View';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(201, 146, 42, 0.72);
  color: var(--white);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0;
  transition: var(--transition);
}

.insta:hover::after {
  opacity: 1;
}