/* ============================================
   GILAS — Custom styles
   Effetto zoom in/out lento sull'hero della homepage
   (rif. brief: "effetto zoom in/out se possibile,
   per dare effetto di movimento")
   ============================================ */

@media (prefers-reduced-motion: no-preference) {
  [id*="__hero_gilas"] .hero__media img,
  [id*="__hero_gilas"] .hero__media video {
    animation: gilas-hero-zoom 26s ease-in-out infinite alternate;
    transform-origin: center center;
    will-change: transform;
  }

  @keyframes gilas-hero-zoom {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.12);
    }
  }
}

/* Il wrapper del media nasconde l'overflow generato dallo zoom */
[id*="__hero_gilas"] .hero__media {
  overflow: hidden;
}

/* ============================================
   GILAS — Contact form (stile "incisivo")
   Input solo con riga sottolineata, textarea
   con box pieno, bottone SEND centrato
   ============================================ */

.contact-form .contact-form__input:not(.contact-form__input--textarea) {
  border: none;
  border-bottom: var(--style-border-width-inputs, 1px) solid currentColor;
  border-radius: 0;
  background: transparent;
  padding-inline: 4px;
}

.contact-form .contact-form__input--textarea {
  border: var(--style-border-width-inputs, 1px) solid currentColor;
  border-radius: 0;
  background: transparent;
}

.contact-form .contact-form__input::placeholder {
  opacity: 0.85;
}

/* Bottone SEND centrato, maiuscolo, spaziato */
.contact-form .contact-form__form > button[type="submit"],
.contact-form .contact-form__form > .button {
  margin-inline: auto;
  margin-block-start: 16px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* ============================================
   GILAS — Tipografia più minuta
   ============================================ */

/* Opzione C approvata: serif editoriale su tutta la tipografia */
:root {
  --gilas-font-serif: "Times New Roman", Times, serif;
  --font-body--family: var(--gilas-font-serif);
  --font-subheading--family: var(--gilas-font-serif);
  --font-heading--family: var(--gilas-font-serif);
  --font-accent--family: var(--gilas-font-serif);
  --font-paragraph--family: var(--gilas-font-serif);
  --font-h1--family: var(--gilas-font-serif);
  --font-h2--family: var(--gilas-font-serif);
  --font-h3--family: var(--gilas-font-serif);
  --font-h4--family: var(--gilas-font-serif);
  --font-h5--family: var(--gilas-font-serif);
  --font-h6--family: var(--gilas-font-serif);
  --button-font-family-primary: var(--gilas-font-serif);
  --button-font-family-secondary: var(--gilas-font-serif);
  --cart-primary-font-family: var(--gilas-font-serif);
  --cart-secondary-font-family: var(--gilas-font-serif);

  --font-h1--size: clamp(2.25rem, 3.8vw, 3.6rem);
  --font-h1--line-height: 0.98;
  --font-h1--weight: 400;
  --font-h2--size: clamp(2.1rem, 3.8vw, 3.4rem);
  --font-h2--line-height: 1;
  --font-h2--weight: 400;
  --font-paragraph--size: 0.875rem;
  --gilas-page-background: #efece4;
  --gilas-card-background: #f8f5ee;
  --gilas-text-color: #1f1f1f;
  --gilas-home-surface-provisional: var(--gilas-page-background);
  --gilas-hero-cta-provisional: var(--gilas-page-background);
  --gilas-card-background-provisional: var(--gilas-card-background);
}

body,
body :where(a, button, div, em, h1, h2, h3, h4, h5, h6, input, label, legend, li, option, p, select, small, span, strong, summary, textarea):not(svg):not(svg *) {
  font-family: var(--gilas-font-serif);
}

main h3:not(.h4),
main h6 {
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

main h3.h4 {
  font-size: 0.9rem;
  font-weight: 400;
}

/* Impaginazione comune alle pagine legal e alle informative Shopify. */
html:has(link[rel="canonical"]:is(
  [href$="/pages/terms-and-conditions"],
  [href$="/pages/cookie-policy"],
  [href$="/pages/shipping-returns"],
  [href*="/policies/"]
)) #MainContent {
  .section:has(.page-content),
  .shopify-policy__container {
    box-sizing: border-box;
    width: min(680px, calc(100% - 32px)) !important;
    max-width: 680px !important;
    margin-inline: auto !important;
    padding: 40px 0 80px !important;
  }

  .section:has(.page-content) {
    display: block;
  }

  .section-content-wrapper:has(.page-content) {
    gap: 32px !important;
    padding: 0 !important;
  }

  .text-block:has(h1),
  .shopify-policy__title {
    width: 100%;
    max-width: none;
    text-align: left !important;
  }

  .shopify-policy__title {
    margin: 0 0 32px !important;
  }

  :is(.page-content, .shopify-policy__body, .shopify-policy__body > .rte, rte-formatter) {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: left !important;
    overflow-wrap: anywhere;
  }

  :where(.page-content, .shopify-policy__body),
  :where(.page-content, .shopify-policy__body) * {
    font-family: var(--gilas-font-serif) !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    letter-spacing: normal !important;
    background-color: transparent !important;
  }

  :is(.page-content, .shopify-policy__body) div:not(.rte-table-wrapper) {
    display: contents;
  }

  :is(.page-content, .shopify-policy__body) p {
    margin: 0 0 12px !important;
    padding: 0 !important;
    text-indent: 0 !important;
  }

  :is(.page-content, .shopify-policy__body) :is(ul, ol) {
    margin: 12px 0 20px !important;
    padding: 0 0 0 24px !important;
    list-style-position: outside;
  }

  :is(.page-content, .shopify-policy__body) ul {
    list-style-type: disc !important;
  }

  :is(.page-content, .shopify-policy__body) ol {
    list-style-type: decimal !important;
  }

  :is(.page-content, .shopify-policy__body) li {
    display: list-item;
    margin: 0 0 8px !important;
    padding: 0 !important;
    text-indent: 0 !important;
  }

  :is(.page-content, .shopify-policy__body) li:last-child,
  :is(.page-content, .shopify-policy__body) li > p {
    margin-bottom: 0 !important;
  }

  :is(.page-content, .shopify-policy__body) li :is(ul, ol) {
    margin-block: 8px !important;
  }

  :is(h1, h2, h3, h4, h5, h6),
  :is(h1, h2, h3, h4, h5, h6) * {
    font-family: var(--gilas-font-serif) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    margin: 32px 0 12px !important;
    overflow-wrap: anywhere;
  }

  h1,
  h1 * {
    font-size: 1.375rem !important;
  }

  h1 {
    margin: 0 !important;
  }

  :is(.page-content, .shopify-policy__body) [data-gilas-legal-first] {
    margin-top: 0 !important;
  }

  :is(.page-content, .shopify-policy__body) [data-gilas-legal-empty] {
    display: none;
  }
}

html:has(main[data-template='index']),
body:has(main[data-template='index']),
body:has(main[data-template='index']) .page-wrapper,
main[data-template='index'],
main[data-template='index'] > .shopify-section {
  background-color: var(--gilas-home-surface-provisional);
}

main[data-template='index'] [id*='__hero_gilas'] .hero__media-grid,
main[data-template='index'] [id*='__media_with_content_world'] .media-block {
  background-color: var(--gilas-home-surface-provisional);
}

/* Link del mega menu più piccoli e ariosi */
.mega-menu__link {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

/* ============================================
   GILAS — Anteprima immagine nel mega menu
   (immagine a destra che cambia in hover)
   ============================================ */

.mega-menu {
  position: relative;
}

@media screen and (min-width: 990px) {
  .mega-menu__grid:has(.mega-menu__link[data-gilas-preview]) {
    min-height: clamp(225px, 22.5vw, 325px);
  }
}

.gilas-menu-preview {
  position: absolute;
  top: 0;
  right: var(--padding-lg, 3rem);
  width: clamp(180px, 18vw, 260px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  pointer-events: none;
}

.gilas-menu-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.25s ease;
}

@media screen and (max-width: 989px) {
  .gilas-menu-preview {
    display: none;
  }
}

/* ============================================
   GILAS — CTA hero stile "Discover the collection"
   (box traslucido, maiuscolo, spaziato)
   ============================================ */

[id*="__hero_gilas"] .button-secondary {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid currentColor !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--gilas-hero-cta-provisional) !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  padding: 0.4em 0.2em;
}

[id*="__hero_gilas"] .button-secondary:hover {
  background: transparent !important;
  color: var(--gilas-hero-cta-provisional) !important;
  border-bottom-width: 2px !important;
}

[id*="__hero_gilas"] .hero {
  min-height: calc(100vh - var(--hero-height-offset));
  min-height: calc(100svh - var(--hero-height-offset));
  min-height: calc(100dvh - var(--hero-height-offset));
}

body:has(.header[transparent]) [id*="__hero_gilas"] .hero {
  --hero-height-offset: 0px;
}

main[data-template='index'] [id*='__media_with_content_world'] .button-unstyled,
main[data-template='index'] [id*='__media_with_content_brand'] .button-unstyled {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* Stacco tra le sezioni editoriali di Brand, solo su desktop. */
@media screen and (min-width: 750px) {
  main[data-template='page.brand'] > .shopify-section + .shopify-section {
    margin-block-start: 40px;
  }
}

@media screen and (max-width: 749px) {
  main[data-template='index'] [id*='__media_with_content_brand'] .media-with-content {
    grid-template-areas: 'content content content' 'media media media';
  }

  [id*="__media_with_content_world"] .media-block img {
    object-position: 58% center;
  }
}

/* ============================================
   GILAS — Pagina prodotto: scroll indipendente
   Mouse sulla galleria = scorrono solo le immagini
   Mouse sui dettagli = scorre la pagina
   ============================================ */

@media screen and (min-width: 990px) {
  .product-information__media {
    position: sticky;
    top: var(--sticky-header-offset, 0px);
    height: calc(100svh - var(--sticky-header-offset, 0px));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

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

  .product-information__media media-gallery {
    position: relative;
  }
}

.gilas-gallery-scroll-hint {
  display: none;
}

@media screen and (min-width: 990px) and (hover: hover) and (pointer: fine) {
  .gilas-gallery-scroll-hint:not([hidden]) {
    position: absolute;
    z-index: 2;
    top: var(--gilas-gallery-hint-top);
    left: 50%;
    transform: translate(-50%, -100%);
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 12px 18px;
    border: 1px solid rgb(31 31 31 / 12%);
    border-radius: 999px;
    background: rgb(239 236 228 / 94%);
    color: #1f1f1f;
    font-family: var(--font-body--family);
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0.03em;
    pointer-events: none;
  }

  .gilas-gallery-scroll-hint__mouse {
    width: 18px;
    height: 26px;
    flex-shrink: 0;
  }

  .gilas-gallery-scroll-hint__arrow {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .gilas-gallery-scroll-hint__wheel {
    animation: gilas-gallery-scroll-wheel 1.6s ease-in-out 3;
  }
}

@keyframes gilas-gallery-scroll-wheel {
  0%, 100% { transform: translateY(0); opacity: 1; }
  65% { transform: translateY(5px); opacity: 0; }
  66% { transform: translateY(0); opacity: 0; }
}

/* ============================================
   GILAS — Dettagli prodotto: testi piccoli,
   varianti delicate con underline sul selezionato
   ============================================ */

/* Testi della colonna dettagli più minuti */
.product-details {
  font-size: 0.875rem;
}

.product-details .variant-option legend,
.product-details .variant-option__swatch-value {
  font-size: 0.75rem;
}

/* Bottoni taglia: solo testo, niente box */
.product-details .variant-option__button-label:not(:has(.swatch)) {
  border: none;
  background: transparent;
  border-radius: 0;
  flex: 0 0 auto;
  min-height: auto;
  min-width: 2em;
  padding-block: 2px;
  padding-inline: 10px;
  font-size: 0.8125rem;
}

.product-details .variant-option__button-label:not(:has(.swatch))::before,
.product-details .variant-option__button-label:not(:has(.swatch))::after {
  display: none;
}

/* Taglie esaurite: barra diagonale visibile anche senza selezione */
.product-details
  .variant-option__button-label:not(:has(.swatch)):has([data-option-available='false'])
  .variant-option__strikethrough line:last-of-type {
  clip-path: none;
  transition: none;
}

/* Taglia selezionata: sottolineatura sottile */
.product-details
  .variant-option__button-label:not(:has(.swatch)):has([data-current-checked='true'])
  .variant-option__button-label__text {
  box-shadow: 0 1.5px 0 0 currentColor;
  padding-bottom: 3px;
  font-weight: var(--font-weight-semibold);
}

/* Swatch colore: cerchi piccoli con outline delicato */
.product-details .variant-option__button-label:has(.swatch) {
  border-width: 1px;
}

/* Accordion e bottone più compatti */
.product-details .accordion summary,
.product-details .accordion {
  font-size: 0.8125rem;
}

/* Bottoni allineati a sinistra, larghezza sul contenuto */
.product-details .buy-buttons-block,
.product-details .product-form-buttons {
  width: fit-content;
  justify-content: flex-start;
}

.product-details .product-form-buttons .add-to-cart-button,
.product-details .buy-buttons-block .button {
  width: fit-content;
  min-width: 0;
  padding-inline: 2.5em;
}

.product-details .variant-option--buttons {
  justify-content: flex-start;
}

/* Le taglie senza box partono allineate col resto del testo */
.product-details .variant-option__button-label:not(:has(.swatch)):first-of-type {
  padding-inline-start: 0;
}