body{margin:0;background:var(--a-bg);color:var(--a-text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6;font-size:16px}
.wrap{max-width:1200px;margin:0 auto;padding:24px}
/* Encapsulem l'encapçalament i el peu de pàgina amb vores subtils en gris clar */
.site-header,.site-footer{border-bottom:1px solid rgba(0,0,0,.1)}
.site-footer{border-top:1px solid rgba(0,0,0,.1);border-bottom:none}
/* Marca: color negre per defecte; accent daurat en hover */
.brand{color:var(--a-black);text-decoration:none;font-weight:600;font-size:1.25rem}
.brand:hover{color:var(--a-gold)}
/* Enllaç de login i compte al header */
.login-link, .account-link, .cart-link {
  color: var(--a-black);
  text-decoration: none;
  font-weight: 500;
  position: relative;
}
.login-link:hover, .account-link:hover, .cart-link:hover {
  color: var(--a-gold);
}
/* Menú principal: elements en línia amb separació */
.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:24px}
.primary-nav a{color:var(--a-black);text-decoration:none;font-weight:500}
.primary-nav a:hover{color:var(--a-gold)}
/* Accions del header (cerca i cistella) */
.header-actions{display:flex;gap:16px;align-items:center}

/* Topbar: franja superior amb idiomes i accions ràpides */
.topbar {
  background: var(--a-bg-light, #f8f8f8);
  border-bottom: 1px solid rgba(0, 0, 0, .05);
  font-size: 0.875rem;
}
.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.languages {
  display: flex;
  gap: 8px;
}
.languages a {
  display: inline-block;
  text-decoration: none;
  line-height: 1;
}
.top-actions a {
  margin-left: 16px;
  color: var(--a-black);
  text-decoration: none;
}
.top-actions a:hover {
  color: var(--a-gold);
}

/* Missatge de la topbar: ocupa l'espai restant i centra el contingut */
.topbar-message {
  flex: 1;
  text-align: center;
  padding: 4px 8px;
  font-size: 0.875rem;
  color: var(--a-black);
}

/* Hero slider styles */
.hero-slider {
  position: relative;
  overflow: hidden;
}
.hero-slider .hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .5s ease;
}
.hero-slider .hero-slide.is-active {
  opacity: 1;
}
.hero-slider .slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.hero-slider .slider-dots button {
  border: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  cursor: pointer;
  padding: 0;
}
.hero-slider .slider-dots button[aria-current="true"] {
  background: var(--a-gold);
}

/* Header principal: disposició de la marca, cerca i menús */
.header-main {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.header-search {
  flex: 1;
}
.header-search form {
  margin: 0;
}

/* Menú secundari (categories i enllaços addicionals) */
.secondary-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
  font-size: 0.9rem;
}
.secondary-nav a {
  color: var(--a-black);
  text-decoration: none;
  font-weight: 500;
}
.secondary-nav a:hover {
  color: var(--a-gold);
}
/* Peu de pàgina: center text and menu */
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:16px}
.footer-nav a{color:var(--a-black);text-decoration:none;font-weight:500}
.footer-nav a:hover{color:var(--a-gold)}