/* ============================================================
   Elicandra — Foglio di stile
   Replica pixel per pixel di elicandra.com (screenshot 08/04/2026)
   ============================================================ */

/* ----------------------------------------------------------
   RESET
   ---------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ----------------------------------------------------------
   VARIABILI :root
   ---------------------------------------------------------- */
:root {
  /* Colori RGB (usabili con rgba()) */
  --color-background:  255,255,255;
  --color-foreground:  0,0,0;
  --color-button:      0,0,0;
  --color-button-text: 255,255,255;
  --color-border:      191,191,191;

  /* Font — Inter identico al sito originale */
  --font-body-family:    'Inter', sans-serif;
  --font-body-weight:    400;
  --font-heading-family: 'Inter', sans-serif;
  --font-heading-weight: 400;

  /* Layout */
  --page-width: 120rem;

  /* Card */
  --product-card-corner-radius: 1.6rem;   /* 16px */

  /* Bottoni / input */
  --buttons-radius: 4px;
  --inputs-radius:  4px;
  --media-radius:   4px;

  /* Griglia — valori dal CSS Shopify */
  --grid-desktop-horizontal-spacing: 16px;
  --grid-desktop-vertical-spacing:   16px;
  --grid-mobile-horizontal-spacing:  8px;
  --grid-mobile-vertical-spacing:    8px;

  /* Transizione standard */
  --transition: 0.3s ease;
}

/* ----------------------------------------------------------
   HTML / BODY — base identica a Shopify
   ---------------------------------------------------------- */
html {
  font-size:        62.5%; /* 1rem = 10px */
  height:           100%;
  scroll-behavior:  smooth;
}

body {
  font-family:               var(--font-body-family);
  font-weight:               var(--font-body-weight);
  font-size:                 1.5rem;
  letter-spacing:            0.06rem;
  line-height:               1.6;
  background-color:          rgb(var(--color-background));
  color:                     rgba(var(--color-foreground), 0.75);
  -webkit-font-smoothing:    antialiased;
  -webkit-tap-highlight-color: transparent;
  display:                   grid;
  grid-template-rows:        auto 1fr auto;
  grid-template-columns:     100%;
  min-height:                100%;
}

@media (min-width: 750px) {
  body { font-size: 1.6rem; }
}

a        { color: inherit; text-decoration: none; }
img      { display: block; max-width: 100%; height: auto; }
button   { font-family: var(--font-body-family); cursor: pointer; border: none; }
textarea { font-family: var(--font-body-family); }

/* ----------------------------------------------------------
   PAGE WIDTH
   ---------------------------------------------------------- */
.page-width {
  max-width: var(--page-width);
  margin:    0 auto;
  padding:   0 1.5rem;
}

@media (min-width: 750px) {
  .page-width { padding: 0 5rem; }
}

/* ----------------------------------------------------------
   ANIMAZIONI
   ---------------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------
   LOADER PAGINA
   ---------------------------------------------------------- */
.page-loader {
  position:       fixed;
  inset:          0;
  background:     rgb(var(--color-background));
  z-index:        9999;
  pointer-events: none;
  transition:     opacity 0.4s ease;
}

.page-loader.hidden { opacity: 0; }

/* ----------------------------------------------------------
   LOGO TESTUALE
   ---------------------------------------------------------- */
.site-logo a {
  text-decoration: none;
}

.logo-text {
  font-family:    'Inter', sans-serif;
  font-size:      2.2rem;
  font-weight:    300;
  letter-spacing: 0.3em;
  color:          #000;
  text-transform: uppercase;
}

/* ----------------------------------------------------------
   HAMBURGER — visibile solo mobile (<750px)
   ---------------------------------------------------------- */
.hamburger {
  display:        none;
  flex-direction: column;
  gap:            5px;
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        8px;
}

.hamburger span {
  display:    block;
  width:      22px;
  height:     1px;
  background: #000;
}

@media (max-width: 749px) {
  .hamburger { display: flex; }
}

/* ----------------------------------------------------------
   MOBILE DRAWER
   ---------------------------------------------------------- */
.mobile-drawer {
  position:   fixed;
  top:        0;
  left:       -100%;
  width:      75vw;
  max-width:  320px;
  height:     100vh;
  background: #000;
  z-index:    200;
  padding:    80px 40px 40px;
  transition: left 0.35s ease;
}

.mobile-drawer.open { left: 0; }

.mobile-drawer ul {
  list-style: none;
  padding:    0;
  margin:     0;
}

.mobile-drawer ul li { margin-bottom: 32px; }

.mobile-drawer ul li a {
  color:          #fff;
  font-size:      1.8rem;
  letter-spacing: 0.15em;
  text-decoration: none;
  font-weight:    300;
}

.mobile-drawer ul li a:hover { opacity: 0.7; }

.drawer-close {
  position:    absolute;
  top:         24px;
  right:       24px;
  background:  none;
  border:      none;
  color:       #fff;
  font-size:   2rem;
  cursor:      pointer;
  line-height: 1;
}

.drawer-currency {
  margin-top: 40px;
}

.drawer-currency select {
  width:         100%;
  background:    transparent;
  border:        1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  color:         rgba(255,255,255,0.8);
  font-family:   'Inter', sans-serif;
  font-size:     1.4rem;
  padding:       1rem 1.2rem;
}

.drawer-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,0.5);
  z-index:    199;
}

.drawer-overlay.active { display: block; }

/* ----------------------------------------------------------
   NAVBAR
   Sfondo BIANCO — esattamente come da screenshot
   Height 88px, 3 colonne: hamburger/nav | logo+tagline | icons
   ---------------------------------------------------------- */
.header-wrapper {
  position: sticky;
  top:      0;
  z-index:  100;
}

.navbar {
  background:    #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  height:        88px;
  display:       grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:   center;
  padding:       0 3.2rem;
}

/* Sinistra: hamburger (mobile) + nav links (desktop) */
.navbar__left {
  display:     flex;
  align-items: center;
  gap:         3.2rem;
}

/* Hamburger — 3 linee nere, visibile solo <990px */
.navbar__hamburger {
  background:      transparent;
  border:          none;
  width:           44px;
  height:          44px;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  padding:         0;
}

@media (min-width: 990px) {
  .navbar__hamburger { display: none; }
}

.navbar__hamburger span {
  display:    block;
  width:      22px;
  height:     1px;
  background: #000;
  transition: var(--transition);
}

.navbar__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.navbar__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.navbar__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Nav links desktop — visibili solo ≥990px */
.navbar__nav {
  display:    none;
  list-style: none;
  gap:        3.2rem;
}

@media (min-width: 990px) {
  .navbar__nav { display: flex; }
}

.navbar__nav a {
  font-size:      1.3rem;
  letter-spacing: 0.04em;
  color:          rgba(0,0,0,0.75);
  transition:     color var(--transition);
}

.navbar__nav a:hover,
.navbar__nav a.active {
  color: #000;
}

/* Centro: logo + tagline */
.navbar__center {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             0.4rem;
}

.navbar__logo img {
  max-width: 300px;
  height:    auto;
  display:   block;
}

/* "SECOND HAND WATCHES & JEWELLERY" — grigio, uppercase, spaziato */
.navbar__tagline {
  font-size:      1.05rem;
  letter-spacing: 0.18em;
  color:          rgba(0,0,0,0.45);
  text-transform: uppercase;
  font-weight:    400;
  white-space:    nowrap;
}

/* Destra: icone search + account + cart */
.navbar__right {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             0.4rem;
}

.navbar__icon-btn {
  background:      transparent;
  border:          none;
  width:           44px;
  height:          44px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           rgba(0,0,0,0.75);
  transition:      color var(--transition);
}

.navbar__icon-btn:hover { color: #000; }

.navbar__icon-btn svg {
  width:        20px;
  height:       20px;
  stroke:       currentColor;
  fill:         none;
  stroke-width: 1.5;
}

/* Selettore valuta nella navbar */
.navbar__currency {
  display:     flex;
  align-items: center;
}

.navbar__currency select {
  appearance:     none;
  -webkit-appearance: none;
  background:     transparent;
  border:         none;
  color:          rgba(0,0,0,0.75);
  font-family:    var(--font-body-family);
  font-size:      1.2rem;
  letter-spacing: 0.04em;
  cursor:         pointer;
  padding:        4px 2rem 4px 0.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 0.4rem center;
}

.navbar__currency select:focus { outline: none; }

/* ----------------------------------------------------------
   SEARCH OVERLAY
   ---------------------------------------------------------- */
.search-overlay {
  position:       fixed;
  inset:          0;
  background:     rgba(0,0,0,0.85);
  z-index:        200;
  display:        flex;
  align-items:    center;
  justify-content: center;
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.3s ease;
}

.search-overlay.open {
  opacity:        1;
  pointer-events: auto;
}

.search-overlay__inner {
  width:     90%;
  max-width: 60rem;
}

.search-overlay__input-wrap {
  display:       flex;
  align-items:   center;
  border-bottom: 1px solid rgba(255,255,255,0.4);
}

.search-overlay__input {
  flex:        1;
  background:  transparent;
  border:      none;
  color:       #fff;
  font-family: var(--font-body-family);
  font-size:   2.4rem;
  font-weight: 300;
  padding:     1.6rem 0;
  outline:     none;
}

.search-overlay__input::placeholder { color: rgba(255,255,255,0.3); }

.search-overlay__close {
  background:  transparent;
  border:      none;
  color:       rgba(255,255,255,0.6);
  font-size:   2.4rem;
  line-height: 1;
  padding:     0.8rem;
  cursor:      pointer;
}

.search-overlay__close:hover { color: #fff; }

.search-overlay__hint {
  color:          rgba(255,255,255,0.35);
  font-size:      1.2rem;
  letter-spacing: 0.04em;
  margin-top:     1.2rem;
}

/* ----------------------------------------------------------
   DRAWER MENU MOBILE
   ---------------------------------------------------------- */
.navbar__overlay {
  position:       fixed;
  inset:          0;
  background:     rgba(0,0,0,0.4);
  z-index:        150;
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.3s ease;
}

.navbar__overlay.open {
  opacity:        1;
  pointer-events: auto;
}

.navbar__drawer {
  position:        fixed;
  top:             0;
  left:            0;
  bottom:          0;
  width:           30rem;
  background:      #fff;
  z-index:         160;
  transform:       translateX(-100%);
  transition:      transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
  padding:         8rem 3.2rem 3.2rem;
  display:         flex;
  flex-direction:  column;
  gap:             3.2rem;
  border-right:    1px solid rgba(0,0,0,0.08);
}

.navbar__drawer.open { transform: translateX(0); }

.navbar__drawer-close {
  position:    absolute;
  top:         2.4rem;
  right:       2.4rem;
  background:  transparent;
  border:      none;
  color:       rgba(0,0,0,0.5);
  font-size:   2.4rem;
  line-height: 1;
  cursor:      pointer;
}

.navbar__drawer-nav {
  display:        flex;
  flex-direction: column;
  gap:            2.4rem;
}

.navbar__drawer-link {
  font-size:      1.6rem;
  letter-spacing: 0.04em;
  color:          rgba(0,0,0,0.75);
  transition:     color var(--transition);
}

.navbar__drawer-link:hover { color: #000; }

.navbar__drawer-currency label {
  display:        block;
  font-size:      1.1rem;
  letter-spacing: 0.1em;
  color:          rgba(0,0,0,0.4);
  text-transform: uppercase;
  margin-bottom:  0.8rem;
}

.navbar__drawer-currency select {
  width:         100%;
  background:    #fff;
  border:        1px solid rgba(0,0,0,0.2);
  border-radius: var(--inputs-radius);
  color:         rgba(0,0,0,0.75);
  font-family:   var(--font-body-family);
  font-size:     1.4rem;
  padding:       1rem 1.2rem;
}

/* ----------------------------------------------------------
   HERO SECTION (homepage)
   Colonna sinistra immagine su grigio chiaro | destra testo centrato
   ---------------------------------------------------------- */
.hero {
  display:               grid;
  grid-template-columns: 45fr 55fr;
  max-width:             var(--page-width);
  margin:                4rem auto;
  padding:               0 5rem;
  min-height:            60vh;
}

@media (max-width: 749px) {
  .hero {
    grid-template-columns: 1fr;
    padding:               0 20px;
    margin:                2rem auto;
  }
}

/* Colonna immagine: nessuno sfondo, immagine in alto a sinistra */
.hero__img-col {
  overflow:        hidden;
  display:         flex;
  align-items:     flex-start;
  justify-content: flex-start;
}

.hero__img-col img {
  width:      100%;
  max-width:  380px;
  height:     auto;
  max-height: 55vh;
  object-fit: contain;
}

.hero__img-placeholder {
  width:           100%;
  height:          100%;
  min-height:      50vh;
  background:      #f5f5f5;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           rgba(0,0,0,0.12);
  font-size:       8rem;
}

/* Colonna testo: bianca, testo centrato */
.hero__text-col {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         6rem 5rem;
  background:      #fff;
}

.hero__text {
  font-size:   1.5rem;
  line-height: 1.9;
  color:       rgba(0,0,0,0.65);
  max-width:   40rem;
  text-align:  center;
}

/* ----------------------------------------------------------
   SEZIONE COLLECTIONS (homepage)
   ---------------------------------------------------------- */
.collections-section {
  max-width: var(--page-width);
  margin:    6rem auto;
  padding:   0 5rem;
}

@media (max-width: 749px) {
  .collections-section { padding: 0 1.5rem; margin: 4rem auto; }
}

/* "Collections" — Inter regular, ~32px, nero, nessun grassetto */
.collections-section__title {
  font-family:    var(--font-heading-family);
  font-weight:    400;
  font-size:      3.2rem;
  letter-spacing: -0.01em;
  color:          #000;
  margin-bottom:  3.2rem;
}

/* Immagine grande — angoli 0 (nessun border-radius come da screenshot) */
.collections-section__img-wrap {
  border-radius: 0;
  overflow:      hidden;
  background:    #f5f5f5;
  max-width:     280px;
}

@media (max-width: 749px) {
  .collections-section__img-wrap { max-width: 100%; }
}

.collections-section__img-wrap img {
  width:      100%;
  height:     auto;
  max-height: 55vh;
  object-fit: cover;
  display:    block;
}

/* "Watches →" — link piccolo, nessun underline, con freccia */
.collections-section__link {
  display:        inline-block;
  margin-top:     2rem;
  font-size:      1.5rem;
  color:          rgba(0,0,0,0.75);
  transition:     color var(--transition);
}

.collections-section__link:hover { color: #000; }

/* ----------------------------------------------------------
   PAGE HEADER (Watches, Contact)
   ---------------------------------------------------------- */
.page-header {
  max-width: var(--page-width);
  margin:    0 auto;
  padding:   2rem 5rem 1.2rem;
}

@media (max-width: 749px) {
  .page-header { padding: 1.6rem 1.5rem 1rem; }
}

/* "Watches" — Inter regular, ~32px, nero */
.page-header__title {
  font-family:    var(--font-heading-family);
  font-weight:    400;
  font-size:      3.2rem;
  letter-spacing: -0.01em;
  color:          #000;
  margin-bottom:  0;
}

/* "All our watches will be shown here" — grigio, ~14px */
.page-header__subtitle {
  font-size:  1.4rem;
  color:      rgba(0,0,0,0.55);
  margin-top: 1rem;
}

/* ----------------------------------------------------------
   FILTRI BAR
   ---------------------------------------------------------- */
.filters-bar {
  max-width:   var(--page-width);
  margin:      0 auto 2.4rem;
  padding:     0 5rem;
  display:     flex;
  align-items: flex-end;
  gap:         2.4rem;
  flex-wrap:   wrap;
}

@media (max-width: 749px) {
  .filters-bar { padding: 0 1.5rem; }
}

.filter-group {
  display:        flex;
  flex-direction: column;
  gap:            0.6rem;
}

.filter-group label {
  font-size:      1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          rgba(0,0,0,0.45);
}

.filter-group select {
  appearance:          none;
  -webkit-appearance:  none;
  background:          #fff;
  border:              1px solid rgba(0,0,0,0.2);
  border-radius:       var(--inputs-radius);
  color:               rgba(0,0,0,0.75);
  font-family:         var(--font-body-family);
  font-size:           1.4rem;
  padding:             0.9rem 3.2rem 0.9rem 1.2rem;
  cursor:              pointer;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 1.2rem center;
}

.filter-group select:focus {
  outline:      none;
  border-color: #000;
}

.filter-btn {
  background:     #000;
  color:          #fff;
  border:         none;
  border-radius:  var(--buttons-radius);
  font-family:    var(--font-body-family);
  font-size:      1.2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        1rem 2.4rem;
  cursor:         pointer;
  min-height:     4.2rem;
  transition:     opacity var(--transition);
}

.filter-btn:hover { opacity: 0.8; }

.results-count {
  max-width: var(--page-width);
  margin:    0 auto 1.6rem;
  padding:   0 5rem;
  font-size: 1.3rem;
  color:     rgba(0,0,0,0.45);
}

@media (max-width: 749px) {
  .results-count { padding: 0 1.5rem; }
}

/* ----------------------------------------------------------
   GRIGLIA PRODOTTI
   4 col desktop | 3 col tablet | 2 col mobile
   ---------------------------------------------------------- */
.watches-container {
  max-width: var(--page-width);
  margin:    0 auto;
  padding:   0 5rem 6rem;
}

@media (max-width: 749px) {
  .watches-container { padding: 0 1.5rem 4rem; }
}

.watches-grid {
  display:               grid;
  list-style:            none;
  gap:                   var(--grid-mobile-vertical-spacing) var(--grid-mobile-horizontal-spacing);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 750px) {
  .watches-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-desktop-vertical-spacing) var(--grid-desktop-horizontal-spacing);
  }
}

@media (min-width: 1024px) {
  .watches-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ----------------------------------------------------------
   CARD PRODOTTO
   Struttura: immagine quadrata con badge overlay | testo sotto
   ---------------------------------------------------------- */
.card-wrapper {
  position: relative;
}

.card {
  background: #fff;
}

/* Ratio box 1:1 per l'immagine */
.card__inner.ratio {
  display:        block;
  position:       relative;
  padding-bottom: var(--ratio-percent, 100%);
  overflow:       hidden;
  border-radius:  var(--product-card-corner-radius);
  background:     rgba(0,0,0,0.04);
}

.card__media {
  position: absolute;
  inset:    0;
}

.card__media img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.card-wrapper:hover .card__media img { opacity: 0.85; }

.card__media-placeholder {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           rgba(0,0,0,0.12);
  font-size:       4rem;
}

/* Badge "Sold out" — overlay in basso a sinistra sull'immagine */
.card__inner .card__badge-overlay {
  position:      absolute;
  bottom:        1.2rem;
  left:          1.2rem;
  background:    #fff;
  color:         rgba(0,0,0,0.75);
  font-size:     1.1rem;
  letter-spacing: 0.04em;
  padding:       0.5rem 1rem;
  border-radius: 4px;
  z-index:       2;
  font-weight:   400;
}

/* Testo sotto immagine */
.card__content {
  padding: 1.2rem 0.2rem 0;
}

/* Nome prodotto */
.card__heading {
  font-family:    var(--font-heading-family);
  font-weight:    400;
  font-size:      1.5rem;
  line-height:    1.4;
  letter-spacing: 0.01em;
  margin-bottom:  0.4rem;
}

.card__heading a {
  color:           rgba(0,0,0,0.88);
  text-decoration: none;
  transition:      color var(--transition);
}

.card__heading a:hover { color: #000; }

/* Prezzo */
.price { margin-top: 0.3rem; }

.price-item {
  font-size:      1.3rem;
  color:          rgba(0,0,0,0.48);
  font-weight:    400;
  letter-spacing: 0.03em;
}

/* Badge SOLD OUT (testo sotto, per compatibilità) */
.card__badge {
  display:        none; /* il badge è overlaid sull'immagine via .card__badge-overlay */
}

/* Card sold-out: immagine leggermente più scura */
.card--sold .card__media img { opacity: 0.65; }

/* Empty state */
.empty-state {
  grid-column: 1 / -1;
  text-align:  center;
  padding:     6rem 2rem;
  color:       rgba(0,0,0,0.45);
}

.empty-state__title {
  font-size:     2rem;
  color:         #000;
  margin-bottom: 1.2rem;
}

.empty-state a {
  color:         #000;
  border-bottom: 1px solid rgba(0,0,0,0.3);
}

/* ----------------------------------------------------------
   PAGINA SINGOLO OROLOGIO
   55% galleria sinistra | 45% info destra
   ---------------------------------------------------------- */
.product-layout {
  display:               grid;
  grid-template-columns: 55fr 45fr;
  gap:                   4rem;
  max-width:             var(--page-width);
  margin:                4rem auto;
  padding:               0 5rem 6rem;
  align-items:           start;
}

@media (max-width: 749px) {
  .product-layout {
    grid-template-columns: 1fr;
    padding:    0 1.5rem 4rem;
    gap:        2.4rem;
    overflow-x: hidden; /* nessun elemento deve uscire dal viewport */
  }
}

/* Galleria */
.product-gallery__stage {
  position:      relative;
  border-radius: var(--media-radius);
  overflow:      hidden;
  aspect-ratio:  1 / 1;
  background:    rgba(0,0,0,0.04);
}

.product-gallery__main-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: opacity 0.3s ease;
}

.product-gallery__placeholder {
  width:           100%;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           rgba(0,0,0,0.15);
  font-size:       80px;
}

/* Frecce — nascosto di default, appaiono su hover dello stage */
.product-gallery__arrow {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  background:      rgba(255,255,255,0.75);
  color:           #000;
  border:          none;
  width:           38px;
  height:          38px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  z-index:         2;
  opacity:         0;
  transition:      opacity 0.2s ease, background 0.2s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.product-gallery__stage:hover .product-gallery__arrow { opacity: 1; }
.product-gallery__arrow:hover { background: rgba(255,255,255,0.95); }
.product-gallery__arrow--prev { left: 1rem; }
.product-gallery__arrow--next { right: 1rem; }

/* Strip miniature */
.product-gallery__thumbs {
  display:    flex;
  flex-wrap:  nowrap;
  gap:        6px;
  margin-top: 8px;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}

.product-gallery__thumbs::-webkit-scrollbar { display: none; }

.product-gallery__thumb {
  flex-shrink:   0;
  width:         72px;
  height:        72px;
  border-radius: 3px;
  overflow:      hidden;
  cursor:        pointer;
  background:    none;
  border:        none;
  padding:       0;
  box-shadow:    0 0 0 1.5px transparent;
  transition:    box-shadow 0.2s ease;
}

.product-gallery__thumb.is-active {
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.75);
}

.product-gallery__thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* Info prodotto */
.product__info-wrapper { padding-left: 4rem; }

@media (max-width: 749px) {
  .product__info-wrapper { padding-left: 0; }
}

.product-info__brand {
  font-size:      1.2rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(0,0,0,0.45);
  margin-bottom:  0.8rem;
}

.product-info__title {
  font-family:    var(--font-heading-family);
  font-weight:    400;
  font-size:      2.4rem;
  letter-spacing: -0.02em;
  color:          #000;
  line-height:    1.2;
}

.product-info__ref {
  font-size:  1.3rem;
  color:      rgba(0,0,0,0.4);
  margin-top: 0.6rem;
}

.product-info__price {
  display:     block;
  font-size:   2rem;
  color:       #000;
  margin:      1.6rem 0;
  font-weight: 400;
}

.product-info__pill {
  display:        inline-block;
  font-size:      1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          #2a7a4b;
  background:     rgba(42,122,75,0.08);
  padding:        0.3rem 1rem;
  border-radius:  40px;
  margin-left:    1.2rem;
  vertical-align: middle;
}

.product-info__pill--soldout {
  color:      #c0392b;
  background: rgba(192,57,43,0.10);
}

.product-info__price-ref {
  font-size:  1.3rem;
  color:      rgba(0,0,0,0.4);
}

.product-info__price-note {
  font-size:  1.2rem;
  color:      rgba(0,0,0,0.4);
  margin-top: 0.8rem;
}

.sold-out-label {
  display:        inline-block;
  font-size:      1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          rgba(0,0,0,0.4);
  border:         1px solid rgba(0,0,0,0.15);
  padding:        0.4rem 1.2rem;
  border-radius:  var(--buttons-radius);
  margin:         0.8rem 0;
}

.product-info__sep {
  border:     none;
  border-top: 1px solid rgba(0,0,0,0.08);
  margin:     2.4rem 0;
}

/* Bottone Enquire Now */
.btn-action {
  display:        block;
  width:          100%;
  padding:        1.5rem;
  background:     #000;
  color:          #fff;
  border:         none;
  border-radius:  var(--buttons-radius);
  font-family:    var(--font-body-family);
  font-size:      1.4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align:     center;
  cursor:         pointer;
  transition:     opacity var(--transition);
}

.btn-action:hover        { opacity: 0.8; }

.btn-action--soldout {
  background: rgba(0,0,0,0.08);
  color:      rgba(0,0,0,0.35);
  cursor:     not-allowed;
}

.btn-action--soldout:hover { opacity: 1; }

/* Enquire Now link sobrio */
.product-enquire-link {
  display:        inline-block;
  margin-top:     2.4rem;
  padding:        0.8rem 1.6rem;
  border:         1px solid rgba(0,0,0,0.25);
  border-radius:  var(--buttons-radius);
  font-family:    var(--font-body-family);
  font-size:      1.25rem;
  letter-spacing: 0.06em;
  color:          rgba(0,0,0,0.7);
  text-decoration: none;
  transition:     border-color var(--transition), color var(--transition);
}

.product-enquire-link:hover {
  border-color: rgba(0,0,0,0.6);
  color:        #000;
}

/* Scheda tecnica */
.product-details dl {
  display:               grid;
  grid-template-columns: auto 1fr;
}

.product-details dt {
  font-size:      1.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          rgba(0,0,0,0.4);
  padding:        1.2rem 2.4rem 1.2rem 0;
  border-bottom:  1px solid rgba(0,0,0,0.06);
}

.product-details dd {
  font-size:     1.4rem;
  color:         rgba(0,0,0,0.75);
  padding:       1.2rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.product-info__desc {
  font-size:   1.4rem;
  line-height: 1.8;
  color:       rgba(0,0,0,0.65);
  margin-top:  2.4rem;
}

/* ----------------------------------------------------------
   PAGINA SINGOLO OROLOGIO — fix mobile
   ---------------------------------------------------------- */
@media (max-width: 749px) {

  /* Galleria: stage full-width, nessun overflow laterale */
  .product__media-wrapper {
    width:    100%;
    overflow: hidden;
  }

  .product-gallery__stage {
    width:         100%;
    border-radius: 0; /* evita bordi che sporgono con overflow hidden sul parent */
  }

  /* Frecce: su touch non esiste :hover, le rendiamo sempre visibili */
  .product-gallery__arrow {
    opacity: 1;
    width:   34px;
    height:  34px;
  }

  /* Strip miniature: scorrimento orizzontale senza tagliare il contenuto */
  .product-gallery__thumbs {
    width:      100%;
    overflow-x: auto;
    overflow-y: visible;
    /* padding laterale per non toccare i bordi */
    padding:    4px 0 4px;
    /* Snap opzionale per UX più morbida */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .product-gallery__thumb {
    width:  64px;
    height: 64px;
    scroll-snap-align: start;
  }

  /* Dati tecnici: font leggibile, griglia che non tracima */
  .product-details dl {
    /* Colonna label a larghezza fissa per evitare overflow su testi lunghi */
    grid-template-columns: minmax(90px, auto) 1fr;
    word-break: break-word;
  }

  .product-details dt {
    font-size: 1.1rem;
    padding:   1rem 1.6rem 1rem 0;
  }

  .product-details dd {
    font-size: 1.3rem;
    padding:   1rem 0;
  }

  /* Bottone Enquire: full-width su mobile */
  .product-enquire-link {
    display:    block;
    width:      100%;
    text-align: center;
    box-sizing: border-box;
    margin-top: 2rem;
  }

  /* Prezzo e pill su righe separate se necessario */
  .product-info__pill {
    margin-left:  0;
    margin-top:   0.6rem;
    display:      inline-block;
  }

  /* Titolo prodotto: font leggermente ridotto per testi lunghi */
  .product-info__title {
    font-size: 2rem;
  }
}

/* ----------------------------------------------------------
   ANIMAZIONI — ridotte su prefers-reduced-motion
   e frecce galleria senza transizione su mobile touch
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .product-gallery__main-img  { transition: none; }
  .product-gallery__arrow     { transition: none; }
  .product-gallery__thumb     { transition: none; }
}

/* ----------------------------------------------------------
   PAGINA CONTATTI
   ---------------------------------------------------------- */
.contact-layout {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   6rem;
  max-width:             var(--page-width);
  margin:                4rem auto;
  padding:               0 5rem 6rem;
  align-items:           start;
}

@media (max-width: 749px) {
  .contact-layout {
    grid-template-columns: 1fr;
    padding: 0 1.5rem 4rem;
    gap:     3.2rem;
  }
}

.contact-info__title {
  font-family:    var(--font-heading-family);
  font-weight:    400;
  font-size:      3.2rem;
  letter-spacing: -0.02em;
  color:          #000;
  margin-bottom:  2.4rem;
}

.contact-info__intro {
  font-size:   1.5rem;
  line-height: 1.8;
  color:       rgba(0,0,0,0.65);
}

.contact-info__sep {
  border:     none;
  border-top: 1px solid rgba(0,0,0,0.08);
  margin:     3.2rem 0;
}

.contact-info__rows {
  display:        flex;
  flex-direction: column;
}

.contact-info__row {
  display:               grid;
  grid-template-columns: 10rem 1fr;
  gap:                   1.6rem;
  padding:               1.6rem 0;
  border-bottom:         1px solid rgba(0,0,0,0.06);
}

.contact-info__label {
  font-size:      1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          rgba(0,0,0,0.4);
  padding-top:    0.2rem;
}

.contact-info__value {
  font-size:   1.4rem;
  color:       rgba(0,0,0,0.75);
  line-height: 1.7;
}

.contact-info__value a {
  color:         inherit;
  border-bottom: 1px solid rgba(0,0,0,0.15);
  transition:    border-color var(--transition);
}

.contact-info__value a:hover { border-color: #000; }

/* Form */
.contact-form {
  display:        flex;
  flex-direction: column;
  gap:            1.6rem;
}

.contact-form h2 {
  font-family:    var(--font-heading-family);
  font-weight:    400;
  font-size:      2.4rem;
  letter-spacing: -0.02em;
  color:          #000;
  margin-bottom:  0.8rem;
}

.contact-form label {
  display:        block;
  font-size:      1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          rgba(0,0,0,0.45);
  margin-bottom:  0.6rem;
}

.contact-form input,
.contact-form textarea {
  display:       block;
  width:         100%;
  background:    #fff;
  border:        1px solid rgba(0,0,0,0.2);
  border-radius: var(--inputs-radius);
  font-family:   var(--font-body-family);
  font-size:     1.4rem;
  color:         rgba(0,0,0,0.75);
  padding:       1.2rem 1.4rem;
  transition:    border-color var(--transition);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline:      none;
  border-color: #000;
}

.contact-form textarea {
  min-height: 16rem;
  resize:     vertical;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     1.6rem;
}

@media (max-width: 549px) {
  .form-row-2 { grid-template-columns: 1fr; }
}

.form-feedback {
  padding:       1.4rem 1.6rem;
  border-radius: var(--inputs-radius);
  font-size:     1.4rem;
}

.form-feedback--success {
  background: rgba(42,122,75,0.08);
  color:      #2a7a4b;
  border:     1px solid rgba(42,122,75,0.2);
}

.form-feedback--error {
  background: rgba(200,50,50,0.06);
  color:      #c03030;
  border:     1px solid rgba(200,50,50,0.15);
}

.btn-send {
  background:     #000;
  color:          #fff;
  border:         none;
  border-radius:  var(--buttons-radius);
  font-family:    var(--font-body-family);
  font-size:      1.4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        1.5rem 3.2rem;
  cursor:         pointer;
  transition:     opacity var(--transition);
  align-self:     flex-start;
}

.btn-send:hover { opacity: 0.8; }

/* ----------------------------------------------------------
   FOOTER
   BIANCO — identico allo screenshot
   Selettori Country/region + Language affiancati + copyright
   ---------------------------------------------------------- */
.footer {
  background:    #fff;
  border-top:    1px solid rgba(0,0,0,0.08);
  padding:       2rem 5rem 1.6rem;
}

@media (max-width: 749px) {
  .footer { padding: 1.6rem 1.5rem 1.2rem; }
}

/* Riga selettori */
.footer__selectors {
  display:     flex;
  align-items: flex-end;
  gap:         1.6rem;
  flex-wrap:   wrap;
  margin-bottom: 1.6rem;
}

.footer__selector-group {
  display:        flex;
  flex-direction: column;
  gap:            0.6rem;
}

.footer__selector-group label {
  font-size:      1.2rem;
  letter-spacing: 0.04em;
  color:          rgba(0,0,0,0.55);
}

/* Dropdown con bordo rettangolare come da screenshot */
.footer__selector-group select {
  appearance:          none;
  -webkit-appearance:  none;
  background:          #fff;
  border:              1px solid rgba(0,0,0,0.25);
  border-radius:       var(--inputs-radius);
  color:               rgba(0,0,0,0.75);
  font-family:         var(--font-body-family);
  font-size:           1.4rem;
  padding:             0.8rem 3.6rem 0.8rem 1.2rem;
  cursor:              pointer;
  min-width:           14rem;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 1.2rem center;
}

.footer__selector-group select:focus {
  outline:      none;
  border-color: #000;
}

/* Copyright */
.footer__copy {
  font-size:   1.1rem;
  color:       rgba(0,0,0,0.38);
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------
   GRIGLIA COLLEZIONE — 4 colonne full width
   ---------------------------------------------------------- */
.collection-container {
  width:          100%;
  max-width:      var(--page-width, 120rem);
  margin:         0 auto;
  padding:        0 2rem 8rem;
  box-sizing:     border-box;
}

.products-grid {
  display:               grid;
  list-style:            none;
  margin:                0;
  padding:               0;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--grid-desktop-horizontal-spacing, 16px);
  width:                 100%;
}

@media (max-width: 1024px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 750px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-mobile-horizontal-spacing, 8px);
  }
}

/* ----------------------------------------------------------
   SEARCHBAR COLLEZIONE
   ---------------------------------------------------------- */
.collection-search {
  padding:       20px 0 8px;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 16px;
}

.search-input-wrapper {
  position:  relative;
  max-width: 400px;
}

.search-icon {
  position:       absolute;
  left:           0;
  top:            50%;
  transform:      translateY(-50%);
  color:          #999;
  pointer-events: none;
}

.search-input {
  width:           100%;
  border:          none;
  border-bottom:   1px solid #ccc;
  background:      transparent;
  padding:         10px 32px 10px 24px;
  font-size:       1.4rem;
  font-family:     'Inter', sans-serif;
  color:           #1a1a1a;
  outline:         none;
  border-radius:   0;
  transition:      border-color 0.2s ease;
}

.search-input:focus         { border-bottom-color: #000; }
.search-input::placeholder  { color: #bbb; }

.search-clear {
  position:   absolute;
  right:      0;
  top:        50%;
  transform:  translateY(-50%);
  color:      #999;
  text-decoration: none;
  font-size:  1.4rem;
  line-height: 1;
}

/* ----------------------------------------------------------
   PAGINA CONTATTI — solo dati, niente form
   ---------------------------------------------------------- */
.contacts-page {
  min-height:      60vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.contacts-container {
  max-width: 480px;
  width:     100%;
  padding:   60px 20px;
}

.contacts-title {
  font-size:     3.2rem;
  font-weight:   300;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  color:         #000;
}

.contacts-intro {
  font-size:     1.4rem;
  color:         #666;
  line-height:   1.7;
  margin-bottom: 48px;
}

.contacts-info {
  display:        flex;
  flex-direction: column;
  gap:            32px;
}

.contact-row {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.contact-label {
  font-size:      1rem;
  letter-spacing: 0.2em;
  color:          #999;
  font-weight:    400;
  text-transform: uppercase;
}

.contact-value {
  font-size:       1.6rem;
  color:           #000;
  text-decoration: none;
  font-weight:     300;
}

.contact-value:hover { text-decoration: underline; }

/* ----------------------------------------------------------
   UTILITY
   ---------------------------------------------------------- */
.visually-hidden {
  position:    absolute;
  width:       1px;
  height:      1px;
  overflow:    hidden;
  clip:        rect(0,0,0,0);
  white-space: nowrap;
}